Créer des liens vers des pages du site
Objectif : Relier une information du festival à une page interne avec une adresse relative.
Une page de programme peut renvoyer vos visiteurs vers une autre page du même site, par exemple pour consulter des informations pratiques. Pour que le lien fonctionne, son adresse doit correspondre à l’emplacement réel de la page visée.
Vous avez déjà structuré le programme du Festival des Rives avec des titres, des paragraphes et des listes. Dans cette leçon, vous ajoutez un lien vers une page du site en utilisant l’élément a et son attribut href.
Définir la destination du lien
Un lien se construit avec une balise a. L’attribut href indique la destination ; le texte placé entre les balises est la partie sur laquelle vous pouvez cliquer. Pour viser une page du même site, vous indiquez son chemin relatif, c’est-à-dire son emplacement par rapport au fichier HTML qui contient le lien.
Le projet fourni ne comporte qu’une page HTML : index.html. Vous pouvez donc créer un lien interne vers cette page depuis son pied de page, par exemple pour proposer un retour à la page du festival. La destination est écrite index.html, sans nom de domaine : le navigateur cherche ce fichier dans le même dossier que le fichier courant.
Ajouter le lien à la page du festival
Le code ci-dessous reprend la page du projet. Les horaires sont présentés dans des listes ordonnées, conformément à l’état atteint à la leçon précédente. Le nouveau lien figure dans le pied de page ; il pointe vers index.html, le seul fichier HTML prévu par le contrat.
<!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>
<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">
<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>
<p><a class="festival-page__lien" href="index.html">Revenir à la page du festival</a></p>
</footer>
</body>
</html>Ouvrez index.html dans votre navigateur, puis activez « Revenir à la page du festival ». Le navigateur charge de nouveau la page désignée par le chemin relatif. Dans un site comprenant plusieurs pages, vous pouvez appliquer le même principe en indiquant le nom du fichier de destination, à condition que ce fichier existe dans le dossier attendu.
À retenir
- L’élément a crée un lien cliquable ; son attribut href indique la destination.
- Un chemin relatif désigne une page à partir de l’emplacement du fichier HTML courant.
- Dans le projet fourni, index.html est la seule page HTML et peut être visée par href="index.html".
- Vérifiez que le fichier annoncé dans href existe au chemin indiqué.
La prochaine leçon portera sur les liens vers des sites externes et sur la façon de rendre leur destination compréhensible.