Les images en HTML

Maintenant que nous savons comment coder du texte en HTML, nous pouvons commencer à afficher des images dans ces pages HTML.

Afficher une image
C'est la commande <IMG> qui permet d'afficher des images au sein d'une page codée en HTML et de la positionner à l'endroit voulu dans le texte. Cette commande n'a pas besoin d'être fermée.

Par exemple, pour afficher l'image logomain.gif,on utilise la commande :
<IMG SRC="../logomain.gif">

Par défaut, le bas de l'image est aligné avec le bas du texte. Ce sont les options qui vont permettre d'aligner les images comme désiré.

SRC
Cette option contient l'adresse ou est stockée l'image (Cf lien pour les adressages). En effet,en Html, l'image ne fait pas partie de votre document. Le browser va la chercher à l'adresse indiquée. Généralement, on place les images dans le même répertoire que les pages Html. On peut donc utiliser la même image plusieurs fois dans un même document.
ALT
Cette option permet d'afficher un texte à la place de l'image quand elle n'a pas encore été chargée. Cela est très utile pour des images lourdes. <IMG SRC="../logomain.gif" ALT="logo">
WIDTH et HEIGHT
Ce sont la largeur et la hauteur de l'image en pixels. Cela permet la fluidité de l'affichage car le navigateur doit connaitre l'emplacement à réserver à l'image pour pouvoir continuer à afficher le texte. <IMG SRC="../logomain.gif" HEIGHT=65 WIDTH=66>
BORDER
Taille du cadre autour de l'image en pixels (par défaut 1). Cela permet de mettre en valeur des images quand elles sont dans un lien. <IMG SRC="../logomain.gif" BORDER=0>
ALIGN
Alignement de l'image. prend les valeurs LEFT,RIGHT,MIDDLE,TOP et BOTTOM. On préfere utiliser cette balise pour centrer l'image verticalement ; pour centrer horizontalement, on encadre l'image par les balises <CENTER><IMG SRC="../logomain.gif" ALIGN=TOP><CENTER>
VSPACE - HSPACE
espace vertical et espace horizontal. permet de déterminer en pixels l'espace laissé libre autour de l'image.

Lien sur une image
Il est sympathique de pouvoir cliquer sur des images pour avancer dans un site. Pour cela, il suffit de combiner les balises vues précédemment :

On remarque que l'image est entourée d'une bordure. Pour la supprimer, on utilise l'option BORDER=0.

Et l'image de fond ?
Il est possible d'afficher une couleur ou une image en guise de fond sur votre page.

couleur de fond
Il suffit de modifier la balise <BODY> en <BODY BGCOLOR>. l'option BGCOLOR est suivie dans une couleur au format RGB (Ce code est constitué d'un dièse (#) suivi de trois nombres au format hexadécimal compris entre 00 et FF.) Par exemple : < BODY BGCOLOR="#555555"> ... <BODY> définit un fond gris.
image de fond
Semblable à la commande <BODY BGCOLOR>, la commande <BODY BACKGROUND> permet d'afficher une image qui sera répétée sans cesse en motif de fond.
Il faut comprendre que cette image doit être enregistrée auparavant dans un des deux formats, JPEG ou GIF. Aussi, il faut veiller à ce qu'elle soit d'une couleur approprié afin que le texte qui viendra s'ajouter par-dessus puisse être lisible malgrès tout.
<BODY BACKGROUND> doit être placée au tout début de la section <BODY>, remplacant cette dernière. Par exemple < BODY BACKGROUND="fichier"> ... </BODY>
il est conseiller de combiner les deux options pour que le navigateur affiche une couleur le temps qu'il charge l'image : <BODY BACKGROUND="fond.jpg BGCOLOR="FFFFFF">

La suite : Les Tableaux.

Pour plus de renseignements, contacter starshoot