|
L'intégration d'images dans les documents HTML ne faisait pas partie des spécifications de départ. Il faut attendre février 1993 pour que Marc Andreessen propose le tag IMG qui permet de lier des images aux pages. Si "Une image vaut mille mots", il faut veillez à ce que cet adage ne se transforme pas en "Une image vaut mille maux" car si l'intégration d'une image dans du contenu se fait extrêmement facilement, il existe différents formats graphiques d'image et il faut veiller à utiliser le plus adapté pour avoir des fichiers le moins volumineux possibles et donc plus rapides à télécharger. |
|
|
Images et
formats graphiques lire aussi tu dois.
|
On utilise la balise img pour embarquer une image dans du contenu. L'élément créé avec img est un élément vide qui n'a pas de balise de fermeture.
img ne peut pas être utilisé pour les images de fond de page ou de fond de blocs. Les images de fond sont gérées avec des règles de style CSS dont certaines propriétés sont spécialement faite pour gérer la disposition, la répétition, etc. des images de fond.
L'attribut src
L'attribut src doit toujours être présent car c'est sa
valeur qui va définir l'URL
du fichier image à télécharger et à inclure dans la page. Bien
sûr si l'image est un fichier situé dans un des dossiers de votre
site, il faut utiliser une URL
relative pour faire le lien.
Je vous rappelle qu'il convient d'être prudent avec les caractères utilisés pour les noms des fichiers et des dossiers qui les contiennent et je vous conseille (à nouveau) d'adopter les règles suivantes :
- les noms de fichier et de dossiers étant sensibles à la casse, utilisez uniquement des minuscules,
- utilisez uniquement les caractères aplhabétiques non accentués (de a à z), des chiffres (de 0 à 9), le caractère -, le caractère _ et le caractère .
- n'utilisez jamais d'espaces.
Dimensions
Les attributs width et height permettent
de donner la largeur et la hauteur de l'image. La valeur de ces
attributs est simplement un nombre entier qui
exprime la hauteur ou la largeur en pixels.
Il ne faut surtout pas spécifier d'unité (le pixel) car la valeur ne
serait pas prise en compte.
Visuellement, il n'y aucune différence quand on ajoute les dimensions de l'image. En effet, si les dimensions ne sont pas données dans le code, le navigateur les calcule pour l'affichage.
Spécifiez toujours la taille des images que vous intégrez dans une page Web.
Veillez à donner les dimensions correctes de l'image, sinon celle-ci sera déformée lors de son affichage par le navigateur.
D'une façon générale, il faut éviter de donner des dimensions
différentes des dimensions originales de l'image. Le rendu des
images ainsi déformée n'est pas excellent car le navigateur n'est
pas un outil de traitement d'images comme peuvent l'être des
logiciels spécialisés (photoshop,
Gimp,
etc).
Remarque : le fait de réduire ou d'augmenter la taille de l'image
affichée par le navigateur ne réduit pas ou n'augmente pas la taille
du fichier transféré sur le réseau. Le nombre d'octets transférés
sera toujours celui du fichier situé sur le serveur.
On utilise souvent des miniatures à la place des images de grandes
tailles. En cliquant sur ces miniatures on voit l'image en taille
réelle. Ces miniatures ne sont pas obtenues en reduisant les
dimensions de l'image originale avec les attributs width
et height car comme on l'a vu le navigateur n'est pas
un logiciel de traitement d'images.
La miniature est obtenue par la réduction des dimensions de l'image
originale avec un logiciel spécialisé (photoshop,
Gimp,
etc) ou d'un outil comme Easy Thumbnails.
On a donc 2 versions de l'image : une réduite et une à la taille
originale. On affiche la réduite dans un lien qui pointe sur
l'originale comme dans l'exemple suivant.
Alignement
Par défaut, les images sont considérées comme des éléments de type en ligne. Dans un bloc de texte, elles se positionnent comme un caractère : le bas de l'image est affiché sur la ligne de base des caractères.
Image : http://commons.wikimedia.org/wiki/File:Anatomielettre.gif
Changer l'alignement par défaut est parfois nécessaire. Il faut
alors utiliser la propriété de style CSS vertical-align
comme le montre l'exemple suivant.
La valeur par défaut de la la propriété vertical-align
est baseline.
L'attribut alt
Quand une image n'est pas là simplement pour un effet décoratif, il
faudrait mettre un attribut alt (pour alternative
textuelle) dont la valeur est un court texte descriptif de l'image.
Ce texte sera :
- affiché à la place de l'image si celle-ci ne peut pas être téléchargée,
- lu par les applications spécialisées des personnes avec un handicap visuel
- utilisé par les moteurs de recherches pour leur indexation.
Dans la suite de ce tutoriel et pour simplifier le code, nous
n'utiliserons pas d'attribut alt.
Bulle d'aide
On peut utiliser l'attribut title pour réaliser des
bulles d'aide. Particulièrement utiles quand on utilise des images
pour faire des liens, les bulles d'aide (ou infos bulle) affichent
un cours texte quand le curseur de la souris stationne quelques
dixièmes de secondes sur une image.
Images et textes (1)
|
Complétez le code HTML pour obtenir le résultat ci-dessous. 
|
Les images dans la page se trouvent dans le dossier 
|
Images et textes (2)
|
Complétez le code HTML pour obtenir le résultat ci-dessous. 
|
Les images dans la page se trouvent dans l'arborescence suivante :
|
| Nom fichier | Dimension | Dossier | Bulle |
|---|---|---|---|
| yoda.jpg | 200 X 148 | star_wars, images | Yoda |
| darkv.jpg | 200 X 148 | star_wars | Dark Vador |
| gandalf.jpg | 200 X 124 | lord_rings, images | Gandalf |