« Le langage HTML/Images » : différence entre les versions

Contenu supprimé Contenu ajouté
+
TouzaxA (discussion | contributions)
Vers le HTML5
Ligne 2 :
 
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
; XHTML
&lt;img src="mon_image.png" alt="texte si l'image n'est pas affichée" /&gt;
; HTML
&lt;img src="mon_image.png" alt="texte si l'image n'est pas affichée"&gt;
 
Par la suite, nous considérerons du XHTML. Pour du HTML, supprimez simplement la barre de fraction avant la fermeture de la balise.
; XHTML
&lt;img src="mon_image.png" alt="texte si l'image n'est pas affichée" /&gt;
Par la suite, nous considérerons du XHTMLHTML. Pour du HTMLXHTML, supprimezajoutez simplement la barre de fraction avant la fermeture de la balise.
 
La balise <code>img</code> peut avoir divers attributs facultatifs. Seuls les attributs <code>src</code> et <code>alt</code> sont obligatoires.
Ligne 37 ⟶ 38 :
 
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;
 
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 :
&lt;img src="image_decorative.png" alt="" /&gt;
 
----
Ligne 51 ⟶ 52 :
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 :
&lt;img src="renard.png" alt="Renard en promenade" title="Renard en promenade" /&gt;
 
; Remarque