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
- 9 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.