Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Syntaxe XHTML des images

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)

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 /

Exemple d'une image xhtml

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

Commentaires

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
   

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

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

image 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 image 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.

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau