LE GUIDE DU CODE HTML


HTML, balise, attribut, code et language, tag, tableau, liste, formulaire, lien,...

image
Source code HTML
image



Fotolia


INSERTION D'IMAGES ET DE LIGNES EN HTML

SOMMAIRE
  • <hr...>
  • Source d'images de qualité
  • <img src="...">
  • Astuces d'utilisations


  • <hr...> : Trace une ligne horizontale. Cette balise n'a pas de balise fermante
    Ex :
    <hr>
    Résultat :

    width="..." : Cette propriété donne une largeur à la ligne
    La valeur peut-être exprimé en pixels ou en pourcentage de la largeur disponible
    Ex :
    <hr width="150">

    <hr width="25%">
    Résultat :



    align="..." : Cet attribut aligne horizontalement la ligne.
    Les valeurs possibles sont : center (valeur par défaut), left, right. Attention pour voir l'effet, il faut bien sur que la ligne n'occupe pas toute la largeur disponible !
    Ex :
    <hr width="150" align="center">

    <hr width="150" align="left">

    <hr width="150" align="right">

    Résultat :





    noshade : Cet attribut rend la ligne pleine, vous ne voyez plus d'ombrage.
    Aucune valeur n'est affectée à cet attribut.
    Ex :
    <hr noshade>
    Résultat :

    size="..." : Affecte l'épaisseur de la ligne
    La valeur est exprimée en pixels.
    Ex :
    <hr size="10">
    Résultat :

    ligne verticale : Par astuce, il est possible de tracer une ligne verticale avec la balise "hr", et ce en réduisant "width" (la largeur) à quelques points et en donnant à l'attribut "size" (hauteur dans ce cas) une valeur assez élevée selon les besoins.
    Ex :
    <hr size="30" width="3">
    Résultat :

    Compatibilité : IE Firefox
    Top of Page
    Source d'images de qualité
    Fotolia : est une banque d'images (photos, illustrations, vectoriels) et vidéos libres de droits.
    Vous pourrez donc utiliser toutes ces images et vidéos sur tous types de documents même professionnels sans limite de temps ni de nombre de diffusions.
    Le coût d'une image commence vers les 0,75 € (soit moins d'1 € TVAC). Pour ce tarif, la taille d'une images est souvent de l'ordre de 400 sur 300 pixels.
    Sachez qu'aujourd'hui (début novembre 2011) que Fotolia vous propose plus de 15.000.000 d'images et vidéos d'excellente qualité, de quoi trouver votre bonheur.
    Pour d'avantage d'informations et de recherche vistez le site de Fotolia
    Fotolia
    Top of Page
    <img src="..."> : Insertion d'image.
    Cette balise est toujours associée à l'attribut src="..." (source de l'image : adresse de l'image qui peut aussi être à l'extérieur du site).
    La balise d'insertion d'image s'emploi sans balise fermante !
    NB : Remarquez que l'image est issue d'un sous-répertoire, prenez cette habitude de ranger vos images dans un répertoire dédié aux images, cela décharge considérablement votre répertoire principal qui deviendrait vite surchargé !
    Ex :
    <img src="images/terre.png">
    Résultat :
    align="..." : Cet attribut aligne l'image par rapport à la ligne de texte courante.
    Les valeurs possibles sont :
  • absbottom : Aligne le bas du texte et le bas de l'image.
  • absmiddle : Aligne le milieu du texte et le milieu de l'image.
  • baseline : Aligne le milieu du texte et le milieu de l'image.
  • bottom : Aligne le bas du texte et le bas de l'image (valeur par défaut).
  • middle : Aligne le bas du texte et le milieu de l'image.
  • texttop : Aligne le haut du texte et le haut de l'image.
  • top : Aligne le haut du texte et le haut de l'image.
  • Ex :
    Texte de référence<img src="images/terre-petite.png" align="absbottom">
    Résultat :
    Text de référence
    Ex :
    Texte de référence<img src="images/terre-petite.png" align="absmiddle">
    Résultat :
    Text de référence
    Ex :
    Texte de référence<img src="images/terre-petite.png" align="baseline">
    Résultat :
    Text de référence
    Ex :
    Texte de référence<img src="images/terre-petite.png" align="bottom">
    Résultat :
    Text de référence
    Ex :
    Texte de référence<img src="images/terre-petite.png" align="middle">
    Résultat :
    Text de référence
    Ex :
    Texte de référence<img src="images/terre-petite.png" align="texttop">
    Résultat :
    Text de référence
    Ex :
    Texte de référence<img src="images/terre-petite.png" align="top">
    Résultat :
    Text de référence
    alt="..." : Cet attribut n'a pas d'utilité d'affichage. Néanmoins, il est fortement recommandé que vous l'utilisiez. En effet, les moteurs de recherche, comme Google, ne savent pas analyser le contenu des images, la solution est donc d'utiliser cette balise pour décrire l'image. Un commentaire d'image bien adapté, nourri en contenu les moteurs et améliore ainsi le référencement de votre page.
    Ex :
    <img src="images/terre-petite.png" alt="Petite terre">
    Résultat :
    Petite terre
    border="..." : Ajoute un bord autour de l'image.
    Les valeurs sont exprimée en pixels.
    Lorsque vous ne souhaitez pas avoir de bord, il est bon d'ajouter border="0"
    Ex :
    <img src="images/terre-petite.png" border="2">
    Résultat :
    hspace="..." : Cet attribut forcent un espace à gauche et droite de l'image.
    Les valeurs sont exprimée en pixels.
    Ex :
    Texte gauche<img src="images/terre-petite.png" hspace="20">Text droit
    Résultat :
    Texte gaucheText droit
    title="..." : Si vous avez placé cet attribut avec une description de l'image, vous verrez aparaître le contenu de la description lorsque vous passerez la souris sur l'image. Il semble que Google en tienne compte de la présence de cet attribut pour le calcul du PageRank de votre page.
    Ex :
    <img src="images/terre-petite.png" title="Petite terre">
    Résultat :
    vspace="..." : Cet attribut forcent un espace au-dessus et en-dessous de l'image.
    Les valeurs sont exprimée en pixels.
    Ex :
    Texte supérieur<br>
    <img src="images/terre-petite.png" vspace="20"><br>
    Text inférieur
    Résultat :
    Texte supérieur

    Text inférieur
    width="..." et height="..." : Ces 2 attributs forcent l'image en largeur et hauteur.
    Les valeurs sont exprimée en pixels.
    Ces attributs sont fortement conseillés (et surtout dans le cas des images de grandes dimensions) afin que le navigateur réserve la surface de l'image avant que celle-ci ne soit chargée.
    Lorsque ces 2 attribut sont absents, le navigateur attend d'avoir chargé les images pour en connaître les 2 dimensions, qu'il affecte ensuite aux images respectives.
    Ex :
    <img src="images/terre.png" width="68" height="68">
    Résultat :
    Vous pouvez donner d'autres valeurs (plus petites ou plus grandes) de largeur et de hauteur.
    L'image sera ainsi forcée aux dimensions que vous aurez imposées.
    Ex :
    <img src="images/terre.png" width="34" height="34">
    Résultat :
    Compatibilité : IE Firefox
    Top of Page
    Astuces d'utilisation :
    2 méthode pour tracer une ligne colorée horizontale ou verticale :
    Il faut au préalable créer 2 images
  • Une image de 1 pt sur 1 pt, par exemple rouge (qui est ici volontairement grossie) :
  • Une image de 8 pt de haut sur 1 pt de large, par exemple rouge et jaune (qui est ici volontairement grossie) :

  • Regardez le code et voyez le résultat ! C'est plus joli qu'avec la balise "hr" ?
    Ex :
    <img src="images/pt-rouge.gif" width="150" height="2">

    <img src="images/bar-8pt" width="150" height="8">
    Résultat :




    Compatibilité : IE Firefox
    Top of Page
    image

    image
    Accueil - Code HTML - Littératures - Liens utils - Référencés par... - Contact - Plan du site
    image
      © Copyright 2007 ;© VDC
      Tout droits réservés
      Date de création : 26/12/2007
      Dernière mise à jour : 09/02/2016
         image