Testez vos compétences : Images HTML

Les images n°1

Dans cette tâche, nous vous demandons d'intégrer une image de quelques myrtilles dans la page.

Pour compléter cette tâche :

1. Ajoutez le chemin vers l'image dans un attribut approprié pour l'intégrer dans la page. L'image s'appelle blueberries.jpg et est disponible à l'adresse https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/images/blueberries.jpg?raw=true.
2. Ajoutez un texte alternatif dans un attribut approprié pour décrire l'image, pour les personnes qui ne peuvent pas la voir.
3. Donnez à l'élément <img> un attribut width de 400 et un attribut height approprié afin qu'il s'affiche avec le bon rapport d'aspect et qu'il ne provoque pas de re-render lors du chargement. La taille intrinsèque de l'image est de 615 x 419 pixels.

Le point de départ de la tâche ressemble à ceci :

Voici le code sous-jacent pour ce point de départ :

<h1>Image simple intégrée</h1>

<img />

<p>Vous devez voir une image de quelques myrtilles ci-dessus.</p>

body {
  background-color: white;
  color: #333333;
  font:
    1em / 1.4 "Helvetica Neue",
    "Helvetica",
    "Arial",
    sans-serif;
  padding: 1em;
  margin: 0;
}

* {
  box-sizing: border-box;
}

img {
  border: 1px solid black;
}

Le contenu mis à jour doit ressembler à ceci :

<h1>Image simple intégrée</h1>

<img src="https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/images/blueberries.jpg?raw=true"
     alt="myrtilles" width="400" height="273" />

<p>Vous devez voir une image de quelques myrtilles ci-dessus.</p>

Les images n°2

Dans cette tâche, vous avez déjà une image complète, mais nous aimerions que vous ajoutiez une info-bulle qui apparaît lorsque l'image est survolée par la souris. Vous devez y mettre des informations appropriées.

Le point de départ de la tâche ressemble à ceci :

Voici le code sous-jacent pour ce point de départ :

<h1>Titre d'image simple</h1>

<img
  src="https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/larch.jpg?raw=true"
  alt="Plusieurs grands arbres à feuilles persistantes appelés mélèzes" />

Nous n'avons pas fourni de contenu terminé pour cette tâche, car il ressemble au point de départ.

<h1>Titre d'image simple</h1>

<img
  src="https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/larch.jpg?raw=true"
  alt="Plusieurs grands arbres à feuilles persistantes appelés mélèzes"
  title="Et maintenant, numéro 1, le mélèze" />

Images 3

Dans cette tâche, vous disposez à la fois d'une image complète et d'un texte de légende. Ce que vous devez faire ici, c'est ajouter des éléments qui associent l'image à la légende.

Le point de départ de la tâche ressemble à ceci :

Voici le code sous-jacent pour ce point de départ :

<h1>Image et légende</h1>

<img
  src="https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/firefox.png?raw=true"
  alt="Un renard enflammé abstrait enroulé autour d'une sphère bleue"
  width="446"
  height="460" />
Le logo Firefox de 2019

figcaption {
  font-style: italic;
}

Le contenu mis à jour doit ressembler à ceci :

<h1>Image et légende</h1>

<figure>
  <img
    src="https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/firefox.png?raw=true"
    alt="Un renard enflammé abstrait enroulé autour d'une sphère bleue"
    width="446"
    height="460" />
  <figcaption>Le logo Firefox de 2019</figcaption>
</figure>

• Précédent
• Aperçu : Structurer le contenu avec HTML
• Suivant