Créez votre site web avec HTML5 et CSS3

Insérez une image avec la balise orpheline  <img>

La balise qui permet d'insérer une image est une balise orpheline :  <img> 

Pour fonctionner correctement, la balise  <img>  doit être accompagnée de deux attributs :

1. src  : cet attribut permet d'indiquer la source de l'image.

2. alt  : cet attribut permet de donner à l'image une description alternative.

Ajoutez l'attribut  src  pour indiquer la source de l'image

La source de l'image est précisée avec l'attribut  src pour indiquer au navigateur comment récupérer l'image que l'on veut insérer. De la même manière qu'un lien hypertexte, on peut indiquer la source d'une image :

…avec un chemin absolu si l'image vient d'internet

On utilise un chemin absolu pour indiquer la source d'une image lorsque celle-ci est en ligne, sur un site, ou qu'elle est hébergée sur le web. On copie colle donc simplement l'URL de l'image.

…ou avec un chemin relatif si l'image est en local sur votre ordinateur

C'est ce que l'on fait si l'image est sur notre ordinateur : on utilise alors le nom et l'arborescence du fichier de l'image en local pour indiquer sa source.

Si l'image est dans un sous-dossier nommé images, on précise :  src="images/logo.png" 

Si votre image ne s'affiche pas, c'est très certainement parce que le chemin est incorrect ! Simplifiez au maximum vos noms de fichiers et de dossiers, et tout ira bien.

Voici un exemple d'insertion d'image :

<p>
Voici une très belle photo que j'ai trouvée sur Unsplash :<br>
<img src="images/paysage.jpg" alt="Photo de plage vue du dessus" />
</p>

Voilà qui nous fait une belle transition vers la suite de ce chapitre !

Ajoutez l'attribut alt  pour donner à l'image une description alternative

Donner une decription alternative à une image est une bonne pratique !

Une description alternative est un court texte qui décrit ce que contient l'image. Ce texte alternatif sera :

• inscrit à la place de l'image si elle ne peut pas être affichée au moment du chargement de la page web (cela arrive) ;

• audio-décrit par les navigateurs de personnes présentant un handicap (trouble de la vue, non-voyants).

Cela contribue donc à améliorer ce que l'on appelle l'accessibilité d'un site web. En plus, cela aide les robots des moteurs de recherche pour trouver des images.

D'ailleurs, j'en profite pour faire une petite parenthèse sur les formats d'image !

Choisissez le bon format d'image

Voici quel format adopter en fonction de l'image que vous avez :

• Une photo : utilisez un JPEG.

• N'importe quelle image avec peu de couleurs (moins de 256) : utilisez un PNG 8 bits, ou éventuellement un GIF.

• N'importe quelle image avec beaucoup de couleurs : utilisez un PNG 24 bits.

• Une image animée : utilisez un GIF animé.

• Un logo vectoriel : utilisez un SVG (vous pouvez en apprendre davantage sur le SVG dans le cours "Codez un site web accessible avec HTML et CSS").

Ajoutez une infobulle avec l'attribut  title

Afin d'afficher une bulle d'aide sur vos images, vous pouvez utiliser l'attribut  title ; (à ne pas confondre avec la balise title qui permet d'indiquer au navigateur le titre d'une page web).

L'attribut title est facultatif, contrairement à alt.

Voici ce que cela peut donner :

<img src="montagnes.png" title="Alors, envie de vous balader n'est-ce pas ?" alt="Chemin de randonnée au milieu des montagnes">

Le visiteur du site, n'aura qu'à survoler la photo avec la souris pour voir l'infobulle "Alors, envie de vous balader n'est-ce pas ?" apparaître par dessus l'image.

Créez une miniature cliquable

Si votre image est très grosse, il est conseillé d'en afficher la miniature cliquable sur votre site. De cette manière vos pages web mettront moins de temps à s'afficher. Si vos visiteurs souhaitent voir vos images en taille originale, ils n'auront qu'à cliquer dessus.

Pour ce faire, il faut disposer de deux versions d’une photo : l'image d'origine, et une version de cette image moins lourde (donc plus petite).

Voyons voir comment faire en sorte que la miniature soit cliquable :

1. placez vos deux images dans un dossier appelé par exemple images  .

2. Faites afficher la version montagne_mini.jpg  sur une page,

3. et faites un lien vers la version montagne.jpg.

L'image agrandie s'affiche alors lorsqu'on clique sur la miniature.

Voici le code HTML qu’on peut utiliser pour cela :

<p>Vous souhaitez voir l'image dans sa taille d'origine ? Cliquez dessus !<br>
    <a href="images/montagne.jpg"><img src="images/montagne_mini.jpg" alt="Chemin de randonnée au milieu des montagnes" title="Cliquez pour agrandir" ></a>
</p>

À vous de jouer

Vous allez maintenant pouvoir enrichir le portfolio de Robbie Lens. Pour cela, vous devrez :

• remplacer les liens Twitter et Instagram en bas des pages "À propos" et "Accueil" par les icônes correspondantes ;

• insérer l'image de Robbie Lens sur la page d'accueil (le fichier s'appelle  robbie-lens.png  ) ;

• afficher tout en haut et tout en bas de la page le logo qui renvoie sur la page d'accueil grâce à un lien.

Vous trouverez toutes les images nécessaires pour cet exercice directement dans la base de code, dans le dossier  /images  .

En résumé

• Il existe plusieurs formats d'images adaptés au Web : PNG, JPG…

• On insère une image avec la balise <img>  .

• <img> doit obligatoirement comporter au moins ces deux attributs : src (source de l'image) et   alt (courte description de l'image).

• Il est possible d'afficher une autre version d'une image grâce à un lien qui entoure l’image.

Et voilà, vous avez maintenant terminé la première partie de ce cours : un grand bravo à vous ! Vous avez hâte de vous attaquer au CSS ? J’en suis sûr ! Mais avant de plonger dans le monde merveilleux de la mise en forme, passez le quiz !