Construire la présentation générale
Objectif : Réaliser la page d’accueil du programme avec une structure de document complète, une présentation et une image légendée.
Une page de programme rassemble plusieurs informations : le nom du festival, une présentation, les concerts et les indications pratiques. Si ces contenus sont juxtaposés sans organisation, les visiteurs risquent de manquer les informations utiles ou de ne pas trouver la section recherchée. Vous allez réunir les éléments travaillés dans les leçons précédentes pour produire la page complète du Festival des Rives.
La page ci-dessous reprend l’état du projet après la leçon sur la légende d’une image. Elle conserve les noms de fichiers et les classes prévus, ainsi que les contenus et les identifiants déjà utilisés. Les listes des concerts sont ordonnées dans cet état du projet ; les informations d’accès restent dans une liste non ordonnée.
Assembler la page complète
Dans index.html, commencez par le squelette du document déjà établi. L’en-tête présente le festival et propose des liens vers la présentation, le programme et l’accès. Le contenu principal regroupe ces trois sections : la présentation générale, le programme des deux scènes, puis les informations pratiques. Le pied de page ferme le document avec une précision sur la mise à jour des informations.
La présentation situe le festival et donne une information concrète sur son contenu. Son image est regroupée avec sa légende, tandis que le texte alternatif conservé dans alt décrit l’information visuelle utile. Le lien vers le site de la mairie reste explicite. Les liens de navigation du haut pointent vers les sections de cette même page ; ceux des scènes pointent vers leurs titres, et le lien de retour conduit à la présentation.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Festival des Rives — Programme</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="festival-page">
<header class="festival-page__entete">
<h1>Festival des Rives</h1>
<p>Deux jours de musique au cœur de la ville.</p>
<nav class="festival-page__navigation" aria-label="Navigation principale">
<ul>
<li><a class="festival-page__lien" href="#presentation">Présentation</a></li>
<li><a class="festival-page__lien" href="#programme">Programme</a></li>
<li><a class="festival-page__lien" href="#acces">Accès</a></li>
</ul>
</nav>
</header>
<main class="festival-page__contenu">
<section class="festival-page__presentation" id="presentation">
<h2>Un festival local et convivial</h2>
<p>Retrouvez des artistes de la région et des découvertes musicales dans le parc des Rives.</p>
<figure>
<img class="festival-page__image" src="assets/festival-scene.jpg" alt="La scène principale installée dans le parc, devant un public réuni en soirée">
<figcaption>La scène principale du Festival des Rives, dans le parc.</figcaption>
</figure>
<p>Pour découvrir les initiatives de la ville, consultez le <a class="festival-page__lien" href="https://www.example.org/">site de la mairie</a>.</p>
</section>
<section class="festival-page__programme" id="programme">
<h2>Programme des concerts</h2>
<section class="festival-page__scene" aria-labelledby="scene-riviere">
<h3 id="scene-riviere">Scène de la Rivière — samedi</h3>
<ol>
<li class="festival-page__horaire"><time datetime="2025-06-14T18:00">18 h</time> — Les Lucioles</li>
<li class="festival-page__horaire"><time datetime="2025-06-14T20:00">20 h</time> — Rivage Sonore</li>
</ol>
</section>
<section class="festival-page__scene" aria-labelledby="scene-jardin">
<h3 id="scene-jardin">Scène du Jardin — samedi</h3>
<ol>
<li class="festival-page__horaire"><time datetime="2025-06-14T19:00">19 h</time> — Trio des Pins</li>
<li class="festival-page__horaire"><time datetime="2025-06-14T21:00">21 h</time> — Les Échos</li>
</ol>
</section>
</section>
<section class="festival-page__acces" id="acces">
<h2>Préparer votre venue</h2>
<p>Le festival se déroule au parc des Rives, accessible à pied depuis la gare centrale.</p>
<ul>
<li>Adresse : 12, avenue du Parc, 00000 Ville-sur-Rive.</li>
<li>Entrée gratuite dans la limite des places disponibles.</li>
<li>Un stationnement vélo est disponible près de l'entrée.</li>
</ul>
<p><a class="festival-page__lien" href="#presentation">Retour à la présentation</a></p>
</section>
</main>
<footer class="festival-page__pied">
<p>Festival des Rives — informations susceptibles d'être mises à jour.</p>
</footer>
</body>
</html>Enregistrer et observer le résultat
Enregistrez le code dans index.html, à la racine du projet, sans modifier les noms des classes ou des fichiers. Ouvrez ensuite ce fichier dans votre navigateur. Vous devez voir le titre du festival, les trois liens de navigation, la présentation avec son image et sa légende, les concerts classés par scène, les informations d’accès et le pied de page.
La présentation générale est maintenant rassemblée dans une page unique. À ce stade, gardez les contenus et les destinations de liens cohérents avec le projet ; l’organisation détaillée des scènes et la vérification pratique des liens seront traitées dans les leçons suivantes.
À retenir
- Réunissez l’en-tête, le contenu principal et le pied de page dans un document complet.
- Donnez à la présentation une place distincte et associez l’image à sa légende dans figure.
- Conservez les liens vers les sections et les scènes, ainsi que le lien externe explicite.
- Enregistrez la page sous index.html et vérifiez que les fichiers liés portent les chemins prévus.