Assembler la structure de la page
Objectif : Intégrer les landmarks, les titres et les contenus de la page de réservation.
Une page peut contenir toutes les informations attendues et rester difficile à parcourir si ses zones ne sont pas organisées clairement. Dans cette leçon, vous assemblez la page de réservation de l’atelier : l’en-tête, la navigation, la présentation, le formulaire, les tarifs et le pied de page.
Vous avez déjà étudié le rôle de header, nav, main, section, article et footer ; ici, vous les combinez dans un document complet. Le code ci-dessous reprend les éléments du projet et rassemble les choix du formulaire déjà travaillés, sans ajouter de classe ni de fichier.
Assembler le document dans index.html
Commencez par les métadonnées du document et le lien vers style.css. Dans le corps, l’en-tête présente le nom de l’atelier et la navigation principale ; les liens pointent vers les identifiants des trois sections. Le contenu principal contient ensuite la présentation, l’inscription et les tarifs. Le pied de page reste à l’extérieur de main, car il conclut la page plutôt que le contenu principal.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Réservation de l’atelier</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="atelier-page">
<header class="atelier-entete">
<p>Atelier créatif</p>
<nav class="atelier-navigation" aria-label="Navigation principale">
<ul>
<li><a href="#presentation">Présentation</a></li>
<li><a href="#inscription">Inscription</a></li>
<li><a href="#tarifs">Tarifs</a></li>
</ul>
</nav>
</header>
<main class="atelier-principal">
<section class="atelier-presentation" id="presentation" aria-labelledby="titre-atelier">
<h1 id="titre-atelier">Réservez votre place à l’atelier</h1>
<article class="atelier-article">
<h2>À propos de l’atelier</h2>
<p>Participez à une séance guidée et repartez avec votre création.</p>
<p>Durée : deux heures. Les places sont limitées.</p>
<h3>Au programme</h3>
<ul>
<li>Découverte des matériaux et des outils.</li>
<li>Réalisation d’une création guidée.</li>
<li>Conseils pour emporter et conserver votre création.</li>
</ul>
<p>Pour préparer votre venue, consultez les informations pratiques de l’atelier.</p>
</article>
</section>
<section class="atelier-inscription" id="inscription" aria-labelledby="titre-inscription">
<h2 id="titre-inscription">Formulaire d’inscription</h2>
<form class="atelier-formulaire" action="#" method="post">
<div class="atelier-champ">
<label for="nom">Nom complet</label>
<input id="nom" name="nom" type="text" autocomplete="name" minlength="2" required>
</div>
<div class="atelier-champ">
<label for="courriel">Adresse courriel</label>
<input id="courriel" name="courriel" type="email" autocomplete="email" required>
</div>
<div class="atelier-champ">
<label for="telephone">Téléphone</label>
<input id="telephone" name="telephone" type="tel" autocomplete="tel" pattern="[0-9 +()-]{8,20}" required>
</div>
<div class="atelier-champ">
<label for="date">Date souhaitée</label>
<input id="date" name="date" type="date" required>
</div>
<div class="atelier-champ">
<label for="participants">Nombre de participants</label>
<input id="participants" name="participants" type="number" min="1" max="8" step="1" value="1" required>
</div>
<fieldset>
<legend>Formule</legend>
<div class="atelier-champ">
<label for="formule">Choisissez une formule</label>
<select id="formule" name="formule" required>
<option value="">Choisissez une formule</option>
<option value="decouverte">Découverte</option>
<option value="complete">Complète</option>
</select>
</div>
</fieldset>
<fieldset>
<legend>Préférence de contact</legend>
<div class="atelier-champ">
<input id="contact-courriel" name="contact" type="radio" value="courriel" required>
<label for="contact-courriel">Courriel</label>
</div>
<div class="atelier-champ">
<input id="contact-telephone" name="contact" type="radio" value="telephone">
<label for="contact-telephone">Téléphone</label>
</div>
</fieldset>
<div class="atelier-champ">
<input id="prochaines-dates" name="prochaines-dates" type="checkbox" value="oui">
<label for="prochaines-dates">Recevoir les prochaines dates d’atelier</label>
</div>
<button class="atelier-bouton" type="submit">Envoyer la réservation</button>
</form>
</section>
<section class="atelier-tarifs" id="tarifs" aria-labelledby="titre-tarifs">
<h2 id="titre-tarifs">Tarifs des formules</h2>
<table class="atelier-tableau">
<caption>Tarifs par participant, en euros</caption>
<thead>
<tr>
<th scope="col">Formule</th>
<th scope="col">Durée</th>
<th scope="col">Tarif</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Découverte</th>
<td>Deux heures</td>
<td>35 €</td>
</tr>
<tr>
<th scope="row">Complète</th>
<td>Trois heures</td>
<td>50 €</td>
</tr>
</tbody>
</table>
</section>
</main>
<footer class="atelier-pied">
<p>Atelier créatif — Informations et réservations</p>
</footer>
</body>
</html> Chargement de l'aperçu…
Chaque zone importante possède un intitulé : la navigation a son nom accessible, et les sections relient leur nom à un titre grâce à aria-labelledby. Ces références doivent correspondre à un id réellement présent. Le titre principal est le seul h1 ; les niveaux suivants expriment les sous-parties sans remplacer ce titre.
Vérifier l’assemblage
L’indentation de quatre espaces rend visibles les niveaux d’imbrication : vous pouvez repérer rapidement ce qui appartient à une section et ce qui se trouve à côté. Vérifiez également que les éléments ouverts sont correctement refermés et que le tableau comme le formulaire restent dans leurs sections respectives. Le document présenté est autonome avec les deux fichiers du projet ; il ne demande aucun script supplémentaire.
À retenir
- Placez l’en-tête, la navigation, le contenu principal et le pied de page dans leurs zones respectives.
- Gardez un seul h1 et utilisez les titres suivants pour organiser les sous-parties.
- Faites correspondre les fragments de navigation et les références aria-labelledby aux identifiants de la page.
- Conservez les sections, le formulaire, le tableau et les classes du contrat du projet.
- Indentez le HTML avec quatre espaces pour rendre sa structure contrôlable.
Dans la prochaine leçon, vous intégrerez et vérifierez le tableau des tarifs dans cette page assemblée.