Images sur web

Ces images ayant été bien dimensionnées (160px), elles se succèdent naturellement et facilement en bandeau dans un conteneur de 640px de large capable de contenir les quatre.

Intégration

L'image est affichée dans la page mais elle n'est pas "collée" dans le code source de la page.
Elle n'y est pas présente physiquement.
Seul son chemin est indiqué de la manière suivante :
<img src="img2/005v.JPG" alt="sapin et ciel" />. C'est plus simple.
Et le navigateur, lisant ce chemin, va charger l'image et l'afficher au point correspondant du flux. Ci-dessous, l'équivalent en vision système (fenêtres, dossiers et fichiers):

Dans le dossier du site est installée cette page "3.htm" que vous lisez ; il y a à côté un sous-dossier nommé "img2" destiné à ranger des images. Ce dossier "img2" contient "005v.JPG". Cette image de ciel et d'arbre est "convoquée" ci-contre par une instruction html dans "3.htm" pour qu'elle vienne s'afficher sur l'écran du navigateur. L'image ne fait donc pas réellement partie de la page, elle est seulement "appellée" par celle-ci. Le slash (/) dans un "chemin de fichier" indique toujours que le terme posé avant contient le terme posé après.
En quelque sorte, dans le code HTML, / est l'"image" d'un dossier.

C'est le navigateur qui va "chercher" et afficher l'image à l'endroit désiré, à la taille indiquée, etc... selon les spécifications du fichier HTML et de la feuille de style (leçon 4 et 5). D'ailleurs si le navigateur va souvent chercher l'image dans un dossier, il peut aussi la "convoquer" directement depuis le web, par son adresse. Comme cela
<img src="http://www.monbeausapininternational.com/fr/images/005v.JPG"
alt="sapin et ciel" /> (c'est une adresse imaginaire, pour exemple: ne la cherchez pas sur le web ;-) démonstration dans la page suivante;
C'est la raison pour laquelle les menus contextuels des navigateurs (clic droit, Ctrl-clic sur mac) ont toujours un article "copier l'adresse de l'image" (et non enregistrer l'image, qui existe aussi). Maintenant vous pouvez intégrer à votre page de test une image piquée sur le web...

Cette image peut aussi facilement devenir un lien, par exemple pour afficher cette petite image en plus grand. Il faut lui appliquer la leçon 2 tout simplement, en posant la balise :<a href> AUTOUR de la balise <img>:
  <a href="mbosapin.htm"> ouvrir la balise a
<img src="img2/005v.JPG" alt="image de ciel et haut de sapin" /> placer img
</a> fermer la balise a. Et  ça marche !

"alt" et référencement naturel

Il ne nous reste qu'à souligner l'importance de l'attribut "alt" dans la balise img, indispensable depuis Xhtml. Cet argument est destiné aux logiciels de navigation qui n'affichent pas les images, aux aveugles utilisant un navigateur vocal, qui leur restitue par oral (voix de synthèse) le contenu de la page (Accessibilité donc...) et aux moteurs de recherche. A la place de l'image est alors lu le contenu de la balise alt="indication sur le contenu de l'image" *, Ici l'on mettrait alt="haut de sapin et ciel"
Le contenu de l'attribut alt est lu aussi par les moteurs de recherche, sa cohérence est prise en compte dans les informations de la page, donc il faut l'utiliser (intégré dans le système de notation). On inscrira alors dans la balise alt="une réalisation de monbeausapininternational.com, expert international du sapin, arbre sur fond de ciel à Quimper (France)", resituant le sens de l'image dans celui du site. Ne pas craindre ce genre de redondance destinée aux robots, le visiteur ne la voit pas.

Enfin depuis Xhtml la balise img est "auto-fermante" et doit être terminée par espace et slash