Adloun

HTML : structurer le Web (école d'ingénieur) · Chapitre 10 · Application directe du cours

La fiche d'un second livre

Valider, bien écrire, et le projet de la Librairie · niveau 2

Énoncé

Écrire la fiche livre-petit-prince.html du « Petit Prince » (A. de Saint-Exupéry, poche, 8,50 €, en stock, publié en 1943) sur le modèle de livre.html, avec une tête complète (titre, description, adresse canonique, Open Graph). Valider la page.

Corrigé

Tête :


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Le Petit Prince, A. de Saint-Exupéry — La Librairie du Campus</title>
  <meta name="description" content="Le Petit Prince d’Antoine de Saint-Exupéry, en édition de poche. 8,50 €, retrait gratuit en boutique.">
  <link rel="icon" href="images/favicon.svg" type="image/svg+xml">
  <link rel="canonical" href="https://librairie-campus.example/livre-petit-prince.html">
  <meta property="og:type" content="book">
  <meta property="og:title" content="Le Petit Prince, A. de Saint-Exupéry">
  <meta property="og:description" content="Édition de poche, 8,50 € à la Librairie du Campus.">
  <meta property="og:url" content="https://librairie-campus.example/livre-petit-prince.html">
  <meta property="og:image" content="https://librairie-campus.example/images/le-petit-prince-1200x630.jpg">
  <meta property="og:image:alt" content="Couverture du Petit Prince : le petit prince debout sur sa planète.">
  <meta name="twitter:card" content="summary_large_image">
</head>

Contenu principal :


<article>
  <h1>Le Petit Prince</h1>
  <p>Antoine de Saint-Exupéry — édition de poche</p>

  <figure>
    <img src="images/le-petit-prince.jpg" alt="Couverture : le petit prince debout sur sa planète, une écharpe au vent." width="300" height="420">
    <figcaption>Couverture de l’édition de poche.</figcaption>
  </figure>

  <section aria-labelledby="titre-resume">
    <h2 id="titre-resume">Résumé</h2>
    <p>Un aviateur tombé en panne dans le désert rencontre un enfant venu
    d’une autre planète. Publié en <time datetime="1943">1943</time>.</p>
  </section>

  <section aria-labelledby="titre-fiche">
    <h2 id="titre-fiche">Fiche technique</h2>
    <dl>
      <dt>Prix</dt>
      <dd>8,50 €</dd>
      <dt>Disponibilité</dt>
      <dd>En stock</dd>
    </dl>
  </section>

  <p><a href="commande.html">Commander ce livre</a></p>
</article>

La page reprend la structure de livre.html ; seules changent les données. Avec six livres, il faudrait six fichiers presque identiques : le livre Vue produira toutes les fiches à partir d'un seul modèle et des données du catalogue.

100 % gratuit

La suite du chapitre est sur Adloun

Exercice suivant et tuteur

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.

Le cours du chapitre · Tous les exercices du chapitre

Exercice suivant et tuteur →