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 :

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 :

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 :

Texte alternatif

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

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 :

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 :

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

Sur chaque image, ajoutez

Chaque lien doit ouvrir la page dans un nouvel onglet.

Voici le résultat escompté :

Quiz

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

Vérifier Bravo ! La balise img permet d'insérer une image spécifié avec l'attribut src. Essaie encore ...

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

Vérifier Bravo ! Le titre s'affiche au dessus de l'image, par exemple pour donner une aide contextuelle. Essaie encore ...

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

Vérifier Bravo ! Le texte alternatif s'affiche si l'image ne peut être affichée et les moteurs de recherche l'utilisent comme description de l'image. Essaie encore ...

Voir aussi


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