FriconiX
Des milliers de pictogrammes gratuits dessinés avec amour !

Cours 1.9. Les images dans les pages HTML

Cours 1.8 Sommaire Cours 1.10

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 :

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 :

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é :

Faire l'exercice en ligne
Solution
Cours 1.8 Sommaire Cours 1.10

Voir aussi

Dernière mise à jour : 16/01/2020
 Soutenez le blog à Lulu sur Tipee.