Cours 1.9. Les images dans les pages HTML

Syntaxe

Pour insérer une image dans une page HTML, il convient d'utiliser la balise <img>. L'attribut src="" contient le chemin vers l'image. Voici un exemple :

<img src="https://friconix.com/png/fi-xwluxl-file-html-wide.png">

L'exemple précédent affiche l'image ci-dessous :

Tester l'exemple en ligne

Redimensionner l'image

Il est possible de contraindre les dimensions de l'image grâce aux attributs width="" et height="". Les paramètres sont spécifiés en pixels. Voici un exemple d'utilisation du redimensionnement d'images :

<h3>Image originale :</h3>
<img src="https://friconix.com/png/fi-xwluxm-file-html-wide.png">

<h3>Redimensionnement en hauteur (100 pixels) :</h3>
<img src="https://friconix.com/png/fi-xwluxl-file-html-wide.png" height="100px">

<h3>Redimensionnement en largeur (50 pixels) :</h3>
<img src="https://friconix.com/png/fi-xwluxl-file-html-wide.png" width="50">

<h3>Redimensionnement en largeur et hauteur :</h3>
<img src="https://friconix.com/png/fi-xwluxl-file-html-wide.png" width="200" height="150px">

L'exemple ci-dessous affiche les images redimensionnées :

Tester l'exemple en ligne

Notez que cette syntaxe tend à disparaitre au profit des feuilles de style CSS que vous aborderez plus tard.

Titre de l'image

Il est possible d'associer un titre à l'image. Ce titre sera affiché dans le navigateur lorsque l'utilisateur passe la souris sur l'image. Le titre est spécifié avec l'attribut title="". Voici un exemple :

<img src="https://example.com/image.png" title="L'icône HTML du site Friconix">

Passez la souris sur l'image ci-dessous :

Tester l'exemple en ligne

Texte alternatif

Il arrive que le navigateur ne puisse pas afficher l'image pour diverses raisons :

Le chemin est érroné
L'image n'est pas disponible
Le format d'image n'est pas supporté
...

Dans ce cas, il est possible de préciser un texte alternatif qui sera affiché à la place de l'image. Ce texte est spécifié avec la balise alt="".

<img src="https://example.com/image.png" alt="Image du site example.com">

Le code ci-dessus affiche une image avec un text alternatif dans la page HTML :

Tester l'exemple en ligne

Ce texte pourra également être affiché sur les terminaux brailles destinés aux personnes visuellement déficientes.

Notez que certains moteurs de recherche utilisent le texte alternatif et le titre pour obtenir une description textuelle de l'image qui servira au référencement. Spécifier les attributs alt et title permet d'améliorer le référencement de la page.

Exercice

Créez une nouvelle page contenant les logs des sites suivants :

Le blog de Lulu : https://lucidar.me/images/logo/logo.png
Friconix : https://friconix.com/images/logo/logo.svg
AnsWiki : https://ans.wiki/images/logo/logo-answiki.svg

Chaque image doit être affichée avec une taille de 100x100 pixels.

Sur chaque image, ajoutez

un titre affichant "Click to view the website" ;
un lien vers la page d'accueil du site.

Chaque lien doit ouvrir la page dans un nouvel onglet.

Voici le résultat escompté :

Faire l'exercice en ligne

Solution

Quiz

Quelle syntaxe permet d'insérer une image dans une page HTML ?

<img>image.jpg</img>

<src>image.jpg</img>

Vérifier

Quel est l'intérêt d'ajouter un titre dans une image en HTML ?

Le titre sera affiché sous l'image.

Le titre sera affiché si l'image n'est pas trouvée.

Ça ne sert à rien d'ajouter un titre dans une image

Le titre sera affiché lorsque l'utilisateur passe le curseur sur l'image.

Vérifier

À quoi sert l'attribut alt dans les images en HTML ?

Il affiche le titre sous l'image.

Il affiche un titre alternatif si l'image n'est pas trouvée.

Le titre sera affiché lorsque l'utilisateur passe le curseur sur l'image.

Le titre alternatif permet aux moteurs de recherche de référencer les images.

Vérifier

Cours 1.8 Sommaire Cours 1.10

Voir aussi

Dernière mise à jour : 19/11/2021