Intégrer une image :

<img src="" alt="" />

IMaGe SouRCe="url de l'image, ou chemin vers l'image" ALTernative texte="description du contenu de l'image"

l'attribut alt est une description textuelle, destinée:

  1. Aux aveugles : leur navigateur vocal leur lira ce qui est écrit, ils sauront un peu de quoi il s'agit.
  2. Aux robots des moteurs de recherche, qui n‘ont pas d‘yeux pour voir. Mais ils savent lire. Ils sauront un peu, ou beaucoup, en quoi consiste cette image*.
  3. * Cet attribut est obligatoire; Il est intéressant de bien l‘utiliser pour un bon référencement naturel.

Exemple: je vais chercher une image sur le web, je trouve son URL pour l‘afficher dans cette page

Code : <img src="http://upload.wikimedia.org/wikipedia/commons/5/5c/1-2_Le-corbeau-et-le-renard.jpg" alt="gravure, illustration pour la fable de La Fontaine Le corbeau et le renard " />

Résultat :
gravure, illustration pour la fable de La Fontaine Le corbeau et le renard

IMPORTANT : ceci nous montre qu‘une page web, physiquement, c‘est du texte, et seulement du texte. Il n‘y a aucune image "collée" dans la page. L‘image est "appelée", au contraire (comme "appelée au téléphone"), réceptionnée, et affichée instantanément(ou presque) dans la page.


Nous pouvons aussi afficher des images personnelles. Celles-ci seront alors installées dans un DOSSIER "images", dans notre DOSSIER de site. Le CHEMIN sera alors rédigé À PARTIR DE LA PAGE où nous voulons afficher l‘image. Imaginons que nous parlons à cette page:
«Ohé! Page "images.html"!
Regarde autour de toi et cherche un dossier qui s‘appelle "images".
Tu l'as trouvé ? OK, rentre dedans et cherche un FICHIER qui s‘appelle "jardinorange.jpg".
Tu l‘as trouvé ? OK, ouvre et affiche ici ce fichier "jardinorange.jpg".
»

Traduit en html, cela donnera :

Code : <img src="images/jardinorange.jpg" alt="photo de mon jardin au travers d‘un lampion orange" />

Résultat :

photo de mon jardin au travers d‘un lampion orange


DU GRAIN À MOUDRE : Les balises peuvent s‘emboîter les unes DANS les autres (comme body et head dans html; les plus malins auront compris comment une image peut, elle aussi, devenir un lien...

Bon travail à tous...


index.html | Balises de base | Liens


GLOSSAIRE