Aller au contenu principal

Insérer une image

Notions théoriques​

Les images sont une partie essentielle de la plupart des sites Web.

En HTML, nous utilisons la balise <img> pour insérer une image dans une page.

La balise <img> est une balise vide, ce qui signifie qu'elle n'a pas de balise de fermeture.

Elle utilise plusieurs attributs importants :

  • src (source) : Cet attribut est obligatoire et spécifie l'URL de l'image. Comme pour les liens, vous pouvez utiliser un chemin absolu ou un chemin relatif.

  • alt (alternatif) : Cet attribut est utilisé pour fournir un texte alternatif pour l'image, qui peut être affiché si l'image ne peut pas être chargée, et qui est également utile pour l'accessibilité.

  • width et height : Ces attributs sont utilisés pour spécifier la largeur et la hauteur de l'image en pixels.

<img src="chemin/vers/image.jpg" alt="Description de l'image" width="500" height="600">

Exemple pratique​

Supposons que vous voulez ajouter une image de la couverture de votre jeu vidéo préféré à votre site. Vous pouvez le faire avec la balise <img>.

<h1>Bienvenue sur mon site sur The Legend of Zelda</h1>
<img src="images/zelda-cover.jpg" alt="Couverture de The Legend of Zelda" width="300" height="400">
<p><a href="contact.html">Contactez-moi</a> si vous voulez discuter de ce jeu fantastique !</p>

Test de mémorisation/compréhension​


Quelle balise est utilisée pour insérer une image dans une page HTML ?


Quel attribut est utilisé pour spécifier l'URL de l'image ?


Qu'est-ce que l'attribut 'alt' et pourquoi est-il important ?


TP pour réfléchir et résoudre des problèmes​

Pour ce TP, vous allez ajouter des images à votre site sur votre jeu vidéo préféré.

Vous pouvez utiliser des images de la couverture du jeu, des captures d'écran, des fan arts, etc.

attention

N'oubliez pas de fournir un texte alternatif pour chaque image avec l'attribut alt.

  1. Trouvez quelques images que vous voulez utiliser et enregistrez-les dans le même répertoire que vos fichiers HTML.
  2. Utilisez la balise <img> pour insérer ces images dans vos pages.
Une solution

Dans index.html :

<!DOCTYPE html>
<html>
<head>
    <title>Accueil</title>
</head>
<body>
    <h1>Bienvenue sur mon site sur The Legend of Zelda</h1>
    ...
    <img src="images/zelda-cover.jpg" alt="Couverture de The Legend of Zelda" width="800" height="450">
    <p><a href="contact.html">Contactez-moi</a> si vous voulez discuter de ce jeu fantastique !</p>
</body>