L'élément <img> est destiné à recevoir
une image stockée dans un fichier externe au document. Ce
fichier est identifié par l'attribut src et sa
valeur est l'URL de l'image. Comme pour les hyperliens sa
valeur peut donc être une adresse relative ou absolue.
Le plus souvent on trouvera des images aux formats PNG,
JPEG ou GIF.
L'élément <img> impose un
attribut alt donnant une description de
l'image. Sa valeur est destinée à être affichée à la
place de l'image si celle-ci ne peut être chargée par
le navigateur. Si l'image est importante pour le document
(elle n'est pas uniquement décorative) il convient donc que
l'attribut alt soit suffisamment précis. Il est souvent proposé comme
première bonne approche pour en créer la valeur
de répondre à la question : Que diriez-vous à la place de l'image à
quelqu'un au téléphone à qui vous devriez lire le document
HTML.
.
Pour plus d'information sur la
bonne manière
de créer
l'attribut
alt d'un
élément
<img>, vous pouvez consulter
cette page du W3C. ou
la page wikipedia, ou encore ce
document qui présentent des bonnes pratiques de définition de l'attribut
alt.
Ce sera
l'occasion de vous rendre compte que la création de
document HTML est beaucoup plus complexe et subtile qu'il n'y
parait des fois...
Parmi les autres attributs de
l'élément <img>, on
trouve width et height qui
définissent la taille en pixels de la zone d'affichage de
l'image (la valeur est donnée sans unité). Si leurs valeurs
ne correspondent pas aux dimensions réelles de l'image,
celle-ci est redimensionnée en conséquence, et
éventuellement déformée. Si une seule des deux valeurs est
fournie, l'autre est adaptée pour conserver les proportions
de l'image. Nous verrons ultérieurement que les dimensions
d'affichage d'une image peuvent être également déterminées par
les feuilles de style.
Il est parfois recommandé de fixer les largeur et hauteur
des images pour des raisons visuelles mais aussi de
performances du navigateur. Celui-ci n'a pas à attendre le
chargement de l'image pour connaitre, et donc allouer, l'espace à lui réserver
dans la page.
L'élément <figure> peut accueillir
des éléments de flux (on rencontre souvent des
éléments <img> comme contenu d'un élément <figure> mais ce n'est pas une obligation) qui pourront être accompagnés d'une
légende placée avant ou après de contenu et définie par
l'élément <figcaption>. Il n'y a aucune
obligation à placer une image dans un élément <figure>.
-
Créez une page contenant un
élément
<img> dont la source est le
fichier pont-du-gard.jpg fourni.
- N'oubliez pas de vérifier la validité de la page
créée.
- La taille originale de cette image est
de 800x600. Faites différents essais sur la
page avec différentes valeurs pour les
attributs
width et height, y
compris en n'en fixant qu'un seul des deux. Que constatez-vous ?
- Modifiez la page pour placer cette image dans un
élément
<figure> pour lequel vous
définirez une légende.
