Relier et contrôler le programme
Objectif : Ajouter des liens vers les sections et les informations utiles, puis contrôler le rendu et les destinations dans le navigateur.
Un programme peut contenir les bonnes informations et rester difficile à consulter si ses liens ne conduisent pas au bon endroit. Une ancre qui ne correspond à aucun identifiant laisse le visiteur sur la même section ; un chemin erroné peut afficher une page introuvable. Vous allez terminer le programme du Festival des Rives en vérifiant les destinations et le rendu directement dans le navigateur.
Relier les sections et les scènes
La navigation en tête de page doit donner accès aux parties utiles du programme : présentation, concerts et informations d’accès. Chaque valeur commençant par # dans href doit correspondre exactement à un id présent dans cette page. Pour faciliter l’accès direct aux concerts, les deux scènes ont également leur propre identifiant ; ajoutez leurs destinations à la navigation. Les identifiants ne se répètent pas.
Page finale du programme
Le fichier suivant reprend la page complète du projet : la présentation et son image légendée, les listes chronologiques de concerts, les informations d’accès, un lien externe explicite et les liens internes. Enregistrez-le sous index.html à la racine du projet. Le fichier style.css et l’image assets/festival-scene.jpg restent à leurs emplacements prévus ; aucun style n’est ajouté au HTML.
<!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="#scene-riviere">Scène de la Rivière</a></li>
<li><a class="festival-page__lien" href="#scene-jardin">Scène du Jardin</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.</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>Tester les destinations et le rendu
Ouvrez index.html dans votre navigateur et cliquez, l’un après l’autre, sur les liens de navigation. Vérifiez que la présentation, le programme, chaque scène et l’accès deviennent la destination visible ; testez également le lien de retour. Vous pouvez aussi lire le fragment qui apparaît dans la barre d’adresse après le clic : par exemple, #scene-riviere doit correspondre à id="scene-riviere". Le lien vers la mairie, lui, doit ouvrir la destination externe indiquée.
Contrôlez ensuite la page de haut en bas. Les titres doivent annoncer clairement les sections, les horaires doivent se lire dans l’ordre prévu, l’image doit s’afficher avec sa légende et les informations pratiques doivent être visibles. Vérifiez aussi le titre de l’onglet et l’absence de contenu coupé ou manquant. Si une image ne s’affiche pas, contrôlez le nom du fichier et son chemin ; si un lien interne ne fait rien, comparez son fragment avec l’identifiant de destination, caractère par caractère.
À retenir
- Chaque lien interne doit pointer vers un identifiant existant et unique.
- Les liens vers les sections et les scènes rendent le programme plus direct à parcourir.
- Testez les liens internes, le lien externe, l’image et le contenu dans le navigateur.
- En cas d’erreur, vérifiez précisément le fragment, le chemin du fichier ou le nom de la destination.
Votre programme est maintenant prêt à être contrôlé avant publication : chaque lien doit être suivi jusqu’à sa destination et chaque partie doit rester lisible dans la page.