Une galerie de couvertures — exercice corrigé d'HTML : structurer le Web (école d'ingénieur) (chapitre 4)

Une galerie de couvertures

Images et médias · niveau 2

Énoncé

Écrire une page « Nouveautés » qui présente trois livres, chacun dans une <figure> légendée par son titre et son auteur. Les images mesurent 200 × 300 pixels ; celles qui ne sont pas visibles à l'ouverture de la page sont chargées en différé.

Corrigé


<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Nouveautés — La Librairie du Campus</title>
  </head>
  <body>
    <h1>Nouveautés de la rentrée</h1>
    <figure>
      <img src="images/couverture-java.svg" alt="Couverture de Programmation Java"
           width="200" height="300">
      <figcaption>Programmation Java — I. Alame</figcaption>
    </figure>
    <figure>
      <img src="images/couverture-petit-prince.svg" alt="Couverture du Petit Prince"
           width="200" height="300" loading="lazy">
      <figcaption>Le Petit Prince — Saint-Exupéry</figcaption>
    </figure>
    <figure>
      <img src="images/couverture-java.svg" alt="Couverture d'Analyse MPSI"
           width="200" height="300" loading="lazy">
      <figcaption>Analyse MPSI — J.-M. Monier</figcaption>
    </figure>
  </body>
</html>

La première couverture, visible dès l'ouverture, n'est pas différée. (Le fichier de la troisième est un remplaçant : en vrai, chaque livre a sa couverture.)