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

Aller à la navigation Aller à la recherche
aucun résumé de modification
m (<source> -> <syntaxhighlight> (phab:T237267))
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'une adresse réticulaire, URL) et avec l'attribut <code>alt</code> l'éventuel texte de remplacement de l'image :
; HTML5/HTML
<syntaxhighlight lang="html">
&lt;<img src="mon_image.png" alt="texte si l'image n'est pas affichée"&gt;>
</syntaxhighlight>
 
; XHTML
<syntaxhighlight lang="html">
&lt;<img src="mon_image.png" alt="texte si l'image n'est pas affichée" /&gt;>
</syntaxhighlight>
Par la suite, nous considérerons du HTML. Pour du XHTML, ajoutez simplement la barre de fraction avant la fermeture de la balise.
 
 
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> :
<syntaxhighlight lang="html">
&lt;<img src="bienvenue.png" alt="Bienvenue !" &gt;>
</syntaxhighlight>
 
Lorsqu'une image ne véhicule pas d'information, ce texte doit être vide (n'oubliez pas que le <code>alt</code> est lu ou rendu en braille pour un malvoyant), l'attribut est alors présent sous la forme :
<syntaxhighlight lang="html">
&lt;<img src="image_decorative.png" alt="" &gt;>
</syntaxhighlight>
 
----
Il est possible d'attribuer un titre à chaque image en plus de l'information alternative ''(alt)''. L'attribut <code>title</code> doit contenir une information ''optionnelle'' sur l'image, ou reproduire l'attribut <code>alt</code>:
Les navigateurs affichent cette information dans une info bulle :
<syntaxhighlight lang="html">
&lt;<img src="renard.png" alt="Renard en promenade" title="Renard en promenade" &gt;>
</syntaxhighlight>
 
; Remarque

Menu de navigation