Contenu | Menu | Rechercher :

Le réseau des étudiants | Contact

Syntaxe XHTML des images

Nous voilà de retour au XHTML Je tiens à vous dire bravo ! De vous avoir patienté si longtemps En fait j'ai prévu beaucoup de chapitre sur la théorie. Pour que vous puissiez bien préparer vos images avant de les insérer dans vos pages Web

• La balise img / (img : image)

• Les attributs alt (texte alternatif), longdesc (description longue), title, width (largeur) et height (hauteur)

• Exemple d'une image xhtml

La balise img / (img : image)

La balise qui permet d'insérer une image est img / , elle fait partie des éléments vides de type en-ligne (inline) remplacés. Pour que cette balise opère, il faut lui ajouter obligatoirement l'attribut src (src : source), il permet d'indiquer au navigateur où aller chercher l'image. La valeur de l'attribut "src" doit être une URL.

Les règles d'imbrication de la balise img /

• une image peut être placée dans tous les éléments de type bloc (block) à part la balise pre (consultez : éléments enfants interdits à PRE en xhtml 1.0), ainsi que les éléments en-ligne (inline) qu'ils soient remplacés ou non.
• la balise img / étant un élément vide, elle ne doit contenir aucun élément enfant.

Exemple d'une image xhtml

  p    img src="valid-xhtml10.png" /    /p  

Commentaires

• notez que j'ai bien imbriqué la balise img / dans un paragraphe, car les éléments de type en-ligne ne doivent pas être placés directement dans le corps (body) sans l'avoir entouré par des balises de type bloc ;
• Remarquez bien que j'ai clôturé la balise img / avec une barre oblique "/" (antislash), car ceci est devenu obligatoire avec l'avènement du xhtml ;
• l'attribut src à reçu pour valeur une URL relative "valid-xhtml10.png" ce qui suppose que l'image et le fichier se trouvent tous les deux dans le même site , néanmoins vous pouvez spécifier des URL absolues vers des images qui existent dans d'autres sites, mais vous devez faire attention car ces images peuvent être supprimées, renommées ou déplacées.

Extrait du DTD strict de la balise img /

  !ELEMENT img EMPTY  
  !ATTLIST img
 %attrs;
 src         %URI;          #REQUIRED
 alt         %Text;         #REQUIRED
 longdesc    %URI;          #IMPLIED
 height      %Length;       #IMPLIED
 width       %Length;       #IMPLIED
 usemap      %URI;          #IMPLIED
 ismap       (ismap)        #IMPLIED
   

• la balise img / est un élément vide (empty), par voie de conséquence elle ne peut contenir aucun élément enfant ;
• l'élément img reconnaît deux attributs obligatoires (REQUIRED) : src et alt, les autres sont facultatifs (IMPLIED).

Les attributs alt (texte alternatif), longdesc (description longue), title, width (largeur) et height (hauteur)

• L'attribut alt (texte alternatif)

  L'attribut alt permet d'associer un texte alternatif à une image, cet attribut est devenu obligatoire depuis la version html 4.0, donc ayez l'habitude de vous en servir pour que votre page soit conforme aux standards w3c, cet attribut permet d'afficher un texte alternatif qui va substituer l'image si cette dernière n'est pas affichée pour certaines raisons dont :

  • l'utilisateur a désactivé l'affichage des images par son navigateur.
    sous Firefox et Netscape : menu Outils (Tools) / Options / Contenu (Content) et puis décocher la case "Charger les images automatiquement" (load images automatically).
    sous Mozilla : Edition / Préférences / développez le menu Confidentialité et sécurité / Images / cochez le bouton radio : Ne pas afficher les images.
    sous Internet Explorer : Outils (Tools) / Options internet / Avancé, puis dans le groupe "Multimédia" décocher la case "Afficher les images".
    sous Opera : Outils / Préférences / Pages Web / Mettez "Pas d'images" dans la liste "Images".
  • l'utilisateur a interrompu le chargement de la page avant que toutes les images ne soient réceptionnées.
  • si au cours du chargement de la page les images ne sont pas encore chargées (images volumineuses, connexion lente), le texte alternatif sera affiché en attendant le chargement complet de l'image.
  • les utilisateurs des terminaux vT100 équipés de navigateurs en mode texte-seul qui n'affichent pas les graphiques tels que Lynx.
  • les non-voyants qui utilisent des navigateurs à synthèse vocale (les lecteurs d'écran tel que Jaws), le contenu de l'attribut alt sera lu, si le texte alternatif fait défaut, le nom de l'image sera alors prononcée (exemple : accueil point png) ce qui peut gêner la navigation et compromettre l'accessibilité du site.
  • URL vers une image qui a été déplacée, renommée ou supprimée.
  • une URL erronée (faute de frappe )

  Les deux navigateurs Internet Explorer 6 et 7 implémentent l'attribut "alt" de manière erronée. En fait Les deux navigateurs précités utilisent la valeur de l'attribut "alt" pour afficher une info bulle or ce n'est pas la raison d'être de cet attribut qui a été normalement conçu pour afficher un texte alternatif dans le cas où l'image qui lui est associée n'est pas affichée et aussi pour améliorer l'accessibilité des images avec l'attribut alt.

  Pour ceux qui veulent associer des bulles aux images, un attribut "title" a été spécialement prévu pour cette tâche. Pour mettre fin à cette mauvaise conduite des deux navigateurs précités, je vous conseille de mentionner toujours en plus du texte alternatif, l'attribut title, car lorsque les deux attributs title et alt sont mentionnés le titre l'emporte sur le texte alternatif et s'affiche comme info bulle.

  Vous devez être conscient de l'importance de l'attribut "alt" sur la qualité du référencement. En fait Google le prend en considération pour faire une recherche d'images et aussi pour le contenu de la page où se trouve l'image.
  

• l'attribut title

  L'attribut title permet d'associer un titre à une image, ce dernier apparaît sous forme d'une bulle d'aide au passage de la souris.

• l'attribut longdesc (description longue)

  Si les attributs alt et title ne satisfont pas à vos besoins, vous pouvez utiliser l'attribut longdesc qui a parut dans la version html 4.0. Cet attribut doit recevoir pour valeur l'URL d'une page Web qui contient des informations plus détaillées sur l'image.

  Si vous naviguez sous Firefox, Netscape ou Mozilla, vous aurez la possibilité d'atteindre la valeur de l'attribut longdesc : cliquez sur le bouton droit de la souris sur l'image en question, puis sélectionnez "propriétés" ceci va faire apparaître une petite fenêtre qui contient des informations très utiles sur l'image : le texte alternatif, les dimensions (hauteur et largeur), la taille en KO, la valeur des deux attributs title et longdesc, l'emplacement de l'image dans le serveur.

• les attributs width (largeur) et height (hauteur)

  Les attributs width et height permettent respectivement de spécifier la largeur et la hauteur de l'image. La valeur de ces attributs peut être exprimée sous forme d'un nombre entier ou un pourcentage, un nombre entier est une valeur absolue qui correspond à la taille en pixel, le pourcentage est une valeur relative qui est calculée en fonction de la largeur et hauteur des conteneurs (page ou bloc) qui englobent l'image.

  Il est judicieux de préciser les dimensions des images. Le navigateur n’aura pas à attendre à ce que l’image soit chargée pour déterminer sa taille et poursuivre en conséquence la composition du reste de la page. Lorsque vous spécifiez la taille de l'image le navigateur réserve d'avance une place correspondant aux dimensions de l'images non encore chargée et poursuit la construction de la page, dans le cas contraire le navigateur sera obligé d'attendre jusqu'à ce qu'il charge toutes les images ce qui est à même d'alourdir la navigation surtout lorsqu'il s'agit de graphiques volumineux.

  Si vous voulez redimensionner (changer la taille) une image, vous feriez mieux de préciser une et une seule valeur c'est-à-dire soit l'hauteur soit la largeur. Lorsque vous omettez l'une des deux valeurs le navigateur calcule l'autre valeur de manière à préserver les proportions de l'image.

  A noter que le redimensionnement d'images avec les attributs width et height ou les propriétés CSS équivalentes n'affecte pas la taille de l'image (elle demeure invariable).

Exemple d'une image xhtml

Code xhtml de l'image

    p    img src="../images/oncle.gif" width="132" height="125"
 alt="mon oncle" title="l'image de mon oncle" longdesc="oncle.html"    /p  

Commentaires

• si vous naviguez sous Firefox, Netscape ou Mozilla, vous pouvez afficher la fenêtre suivante :
• les deux attributs (width="132" height="125") pouvant être remplacés par le style (style="width: 132px; height: 125px;") :
  p img src="../images/oncle.gif" alt="mon oncle" title="l'image de mon oncle" longdesc="oncle.html" style="width: 132px; height: 125px;" /p
  Consultez : les propriétés css : width et height.
• on a spécifié les dimensions de l'image pour que le navigateur puisse poursuivre la composition de la page en cas de non chargement de l'image et cela en réservant un cadre de 132pixels x 125pixels à l'image en attendant son chargement complet.

Les noms des images, des fichiers (html, pdf, doc etc.) et des dossiers ne doivent pas contenir des espaces, les lettres accentuées et les autres caractères spéciaux comme les caractères non alphanumériques (autre que - + _ . /). Au lieu de nommer par "mon image.gif" utilisez plutôt "mon_image.gif", les underscores "_" remplacent les espaces dans la nomination des fichiers.

Si vous voulez quand même utiliser des caractères non recommandés dans la nomination de vos dossiers, fichiers et images vous serez amené à coder ces caractères dans les URL sous la forme %xx où xx et la valeur hexadécimale du caractère en question.

Par exemple un espace doit être codé par l'entité x20. Il existe une fonction JavaScript "escape()" qui permet de convertir les caractères non alphanumériques (à l'exception de - + _ . /) sous la forme %xx. Je vous invite à vous en servir vous pouvez par exemple écrire l'URL "mes images/mon père.jpg" et la convertir en "mes%20images/mon%20p%E8re.jpg".

A présent on a presque tout appris sur les images. Néanmoins je vous ai préparé quelques tutos supplémentaires pour des raisons de perfectionnement : des images accessibles.

buvetteetudiants.com © tous droits résérvés