Différences entre les versions de « Le langage HTML/Images »

m
précision
(Les attributs <code>height</code> et <code>width</code>)
m (précision)
 
Une image est insérée avec la balise <code>img</code> en spécifiant avec l'attribut <code>src</code> ''(source)'' le chemin de l'image à inclure (sous la forme d'un adresse réticulaire, URL) et avec l'attribut <code>alt</code> l'éventuel texte de remplacement de l'image :
; XHTML
<pre><nowiki>
< &lt;img src="mon_image.png" alt="texte équivalent àsi l'image n'est pas affichée" />&gt;
; HTML
</nowiki></pre>
&lt;img src="mon_image.png" alt="texte si l'image n'est pas affichée"&gt;
 
 
La balise <code>img</code> peut avoir divers attributs facultatifs. Seuls les attributs <code>src</code> et <code>alt</code> sont obligatoires.
 
* <code>align</code> : alignement de l'image (peut prendre les valeurs <code>top</code>, <code>bottom</code>, <code>middle</code>, <code>left</code> ou <code>right</code>) ;
* <code>alt</code> : texte de remplacement (affiché si le navigateur ne peut afficher l'image) ; cet attribut est obligatoire, il permet notamment à un malvoyant de comprendre l'image qu'il ne peut voir (son logiciel lit le texte à voix haute ou le transforme en braille) ;
* <code>title</code> : titre de l'image (s'affiche en info bulle dans le navigateur) ;
* <code>border</code> : largeur de la bordure de l'image (valeur exprimée en pixels) ;
* <code>height</code> : hauteur de l'image (si aucune valeur spécifiée, l'image garde sa hauteur normale) ;
* <code>width</code> : largeur de l'image (si aucune valeur spécifiée, l'image garde sa largeur normale).
 
== L'attribut <code>src</code> ==
 
Il est nécessaire de donner, pour chaque image, un texte de remplacement pour les navigateurs ne supportant pas l'affichage d'images ou pour des raisons d'[[w:Accessibilité du Web|accessibilité des pages web]] (cf normes W3C). Le texte de remplacement est spécifié par l'attribut <code>alt</code> :
< &lt;img src="bienvenue.png" alt="Bienvenue !" />&gt;
<pre><nowiki>
 
<img src="bienvenue.png" alt="Bienvenue !" />
 
</nowiki></pre>
Lorsqu'une image ne véhicule pas d'information, ce texte peutdoit être vide, mais(n'oubliez pas que le <code>alt</code> est lu ou rendu en braille pour un malvoyant), l'attribut doit êtreest alors présent sous la forme :
< &lt;img src="image_decorative.png" alt="" />&gt;
 
Lorsqu'une image ne véhicule pas d'information, ce texte peut être vide, mais l'attribut doit être alors présent sous la forme :
<pre><nowiki>
<img src="image_decorative.png" alt="" />
</nowiki></pre>
 
== L'attribut <code>title</code> ==
Il est possible d'attribuer un titre à chaque image en plus de l'information alternative ''(alt)''. L'attribut <code>title</code> doit contenir un information ''optionnelle'' sur l'image, ou reproduire l'attribut <code>alt</code>:
Les navigateurs affichent cette information dans un info bulle :
< &lt;img src="renard.png" alt="Renard en promenade" title="Renard en promenade" />&gt;
<pre><nowiki>
<img src="renard.png" alt="Renard en promenade" title="Renard en promenade" />
</nowiki></pre>
 
; Remarque
13 177

modifications