Le langage Html
Les images

Barre de séparation

Image de la Maison de la Culture de Mouscron, ville de l'auteur

GIF ou JPEG?

Avant de passer aux balises, il faut savoir ce qui suit.

Les deux formats d'image reconnus sur le Web, sont le format GIF (version 89a) et le format JPEG. Pour le format GIF (maximum 256 couleurs), on retiendra la caractéristique de transparence possible pour une couleur. Ces deux formats donnent des résultats assez équivalents bien que JPG soit plutôt recommandé pour des images du style photographique avec des tons nuancés ou dégradés.


L'ennemi sur le Web, c'est la taille des images ! Plus l'image sera grande, plus le temps de chargement sera long... au risque de décourager vos visiteurs. Si cela est possible, une image en 16 ou 256 couleurs peut très bien faire l'affaire. Présentez une petite image indiquant un lien vers l'image complète est également un bon conseil.


Il n'est pas inutile de prévoir dans votre panoplie de compositeur Web, un logiciel de retouche d'images. A ce propos "Paint Shop Pro" a la triple qualité d'être disponible en shareware, d'être très intuitif et d'être performant. En outre, un tel logiciel vous permettra de composer vos propres images et ainsi de personnaliser vos pages.


Dois-je rappeler qu'il est très facile de se faire une bibliothèque d'images tout en surfant sur le Web? Il suffit de se positionner sur l'image, de cliquer avec le bouton droit de la souris et de suivre les instructions du menu déroulant (Enregistrer l'image sous...).

Le code Html est :

<IMG SRC="Adresse de l'image"> Afficher l'image qui se trouve à l'adresse...

La balise image possède de nombreux attributs.

Texte alternatif alt="****" Pour les browser n'ayant pas l'option "image" activée
Dimensions width=?
height=?
Hauteur et largeur (en pixels)
Bordure border=? (en pixels)
Alignement align=top
align=middle
align=botton
align=left
align=right

Commentaires :

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.
Presque en conséquence logique de ceci, le fait d'utiliser la même image à plusieurs reprises dans un fichier Html ne modifie en rien la taille de celui-ci.
Prévoir un texte pour les browsers n'ayant pas l'option image activée, permet au lecteur de ne pas perdre le fil de l'exposé et peut-être d'activer cette option pour découvrir votre oeuvre.
Il est important pour la fluidité de l'affichage de préciser la taille en hauteur et largeur de l'image car le browser peut ainsi, connaissant l'emplacement à réserver pour celle-ci, continuer à afficher le texte. Cette information vous est donnée par Paint Shop Pro par exemple.

L'attribut Align

L'attribut align positionne l'image par rapport au texte :

<IMG SRC="HELP.gif" align=TOP>Fichier d'aide
<IMG SRC="HELP.gif" align=CENTER>Fichier d'aide
<IMG SRC="HELP.gif" align=BOTTOM>Fichier d'aide

Lien sur image

    En cliquant sur l'image, vous ouvrirez un fichier nommé "MaVille".

    Les balises sont :

    <A HREF="MaVille.htm"><IMG SRC="STAQUET.gif"></A>

    Remarquons que les images cliquables sont par défaut entourées d'une bordure. Pour enlever cette bordure, il suffit d'ajouter l'attribut border=0.