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 :
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.
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 :
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.
Créez une nouvelle page contenant les logs des sites suivants :
https://lucidar.me/images/logo/logo.png
https://friconix.com/images/logo/logo.svg
https://ans.wiki/images/logo/logo-answiki.svg
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é :
Quelle syntaxe permet d'insérer une image dans une page HTML ?
Quel est l'intérêt d'ajouter un titre dans une image en HTML ?
À quoi sert l'attribut alt
dans les images en HTML ?