Images en HTML 4.0
Insertion d'images et position de la légende
Le tag simple <img src="image.*" align="..."> permet l'insertion d'une image contenue dans le fichier "image.*" (en général un fichier au format gif ou jpg) avec un certain alignement
<img src=leopard.jpg> ou <img src=leopard.jpg align="bottom"> Ceci est une légende
<img src=leopard.jpg align="top"> Ceci est une légende
<img src=leopard.jpg align="middle"> Ceci est une légende
Insertion d'images et position d'un long texte
En fait, les alignements "top", "bottom" ou "middle" sont bien adaptés à une légende courte d'image. Pour l'insertion de longs textes autour d'images, mieux vaut utiliser les alignements "right" et "left". On peut de plus spécifier des espaces horizontaux et verticaux autour des images à l'aide "hspace=..." et "vspace=..."
<img src=leopard.jpg align="right" hspace=50 vspace=50> Ceci est un long texte Ceci est un long texte Ceci est un long texte Ceci est un long texte Ceci est un long texte Ceci est un long texte Ceci est un long texte Ceci est un long texte Ceci est un long texte Ceci est un long texte Ceci est un long texte Ceci est un long texte
<img src=leopard.jpg align="left" hspace=30 vspace=55> Ceci est un long texte Ceci est un long texte Ceci est un long texte Ceci est un long texte Ceci est un long texte Ceci est un long texte Ceci est un long texte Ceci est un long texte Ceci est un long texte Ceci est un long texte Ceci est un long texte Ceci est un long texte
Insertion d'images dans des tableaux
Les résultats précédents sont loins d'être excellents. En particulier, il est difficile de retrouver un alignement correct du texte après insertion de l'image et du texte qui lui correspond (il n'y a qu'à voir le texte actuel qui ne reprend sa place à gauche que lorsque l'espace vertical spécifié e été épuisé !). La solution généralement adoptée consiste à insérer image et texte dans un tableau sans aucune bordure.
C'est ce qui est fait ci-dessous avec un tableau une ligne et deux colonnes de 40 % et 60 % avec texte et image centrés dans les colonnes :
|
|
Ceci est un long texte Ceci est un long texte Ceci est un long texte Ceci est un long texte Ceci est un long texte Ceci est un long texte Ceci est un long texte Ceci est un long texte Ceci est un long texte Ceci est un long texte Ceci est un long texte Ceci est un long texte
|
Taille et "titres" des images
Chaque image possede une taille propre exprimée en pixels. Il est fortement recommandé d'utiliser cette taille dans les tags d'insertion d'images. En effet, les images étant toujours plus longues à charger que le texte, il est intéressant de pouvoir commencer à lire le texte d'une page en attendant le chargement des images. Or un navigateur ne peut afficher le texte PUIS les images s'il ignore la place à réserver à l'image. Les attributs "width=..." et "height=..." seront donc quasi systématiquement employés.
Ces mêmes attributs de largeur et de hauteur peuvent être utilisés pour agrandir ou rétrécir les images. Attention toutefois aux déformations d'images at au fait qu'une énorme image affichée au format timbre poste demeure toujours une énorme image à télécharger !
Enfin, nombre de personnes désactivent l'affichage des images dans les options de leur navigateur mais apprécient d'avoir un mot d'explication sur l'image non affichée. Ceci peut se faire à l'aide de l'attribut alt="...". Faites un essai de désactivation de l'affichage des images sur cette page.
Images et hyperliens
Il est bien entendu possible de définir un lien sur une image. Rien de plus simple, on insère l'image à l'intérieur du tag d'hyperlien. L'image peut être entourée en bleu (signe d'un hyperlien) ou non selon la valeur de l'attribut "border=..."
Mosaïque d'images
Insérons plusieurs images les unes à coté des autres, des boutons par exemple.
Un simple tag <br> permet de mettre ces images sur deux lignes.
Pour faire en sorte que les images se touchent, il suffit de supprimer tous les retours à la ligne (interprétés comme des blancs) dans le source HTML.