Créer des liens vers des sites externes
Objectif : Ajouter au programme du festival un lien externe dont le texte indique clairement la destination.
Vous souhaitez orienter les visiteurs du Festival des Rives vers une information publiée par la mairie. Un lien externe permet de rejoindre une page située sur un autre site, mais son adresse et son intitulé doivent aider les visiteurs à comprendre où ils vont. Vous allez ajouter ce lien à la présentation du festival et vérifier son comportement dans le navigateur.
Distinguer une adresse externe d’un chemin relatif
Dans la leçon précédente, vous avez utilisé un chemin relatif pour relier des pages du même site. Un lien externe utilise généralement une URL absolue : l’adresse complète de la ressource, qui commence par un protocole comme https:// et indique ensuite le nom du site. Dans le projet, le lien vers le site de la mairie porte ainsi l’adresse https://www.example.org/, au lieu d’un nom de fichier du projet comme index.html.
L’élément a et son attribut href restent les mêmes que pour un lien interne ; seule la destination change. Le texte placé entre les balises ouvrante et fermante constitue le texte du lien. Il doit nommer ou résumer la destination, afin que le visiteur puisse comprendre le lien même lorsqu’il lit la page rapidement ou parcourt les liens séparément.
Écrire un texte de lien explicite
« Site de la mairie » donne une indication plus utile que « cliquez ici » : le visiteur sait quel organisme il pourra consulter. Choisissez une formulation concise et cohérente avec la phrase qui l’entoure. Évitez également de faire du texte du lien une adresse complète si le nom du site suffit à identifier la destination.
Le squelette de la page prévoit déjà un lien externe dans la présentation. Dans le fichier index.html, vérifiez que son URL complète et son texte sont tous deux placés dans l’élément a. L’exemple ci-dessous reprend toute la page à l’état du projet : les horaires restent dans des listes ordonnées et le pied de page conserve le lien relatif vers index.html ajouté dans la leçon précédente.
<!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. <a class="festival-page__lien" href="index.html">Consulter le programme du festival</a>.</p>
</footer>
</body>
</html>Tester le lien dans le navigateur
Enregistrez index.html, puis ouvrez ou actualisez la page dans votre navigateur. Repérez le texte « site de la mairie » dans la présentation et activez-le : le navigateur doit tenter d’ouvrir la page correspondant à l’adresse indiquée. Si la page ne se charge pas, contrôlez l’orthographe de l’URL, le protocole https:// et votre connexion ; une page d’exemple ne représente pas nécessairement le site réel de votre commune.
- Un lien externe pointe vers une ressource d’un autre site, généralement avec une URL absolue commençant par https://.
- L’élément a et l’attribut href définissent le lien ; le texte placé entre les balises annonce sa destination.
- Préférez un intitulé précis comme « site de la mairie » à une formule vague comme « cliquez ici ».
- Vérifiez l’adresse et testez le lien dans le navigateur ; une URL d’exemple doit être remplacée par une adresse réelle.
Dans la leçon suivante, vous ajouterez une navigation qui mène directement à une scène du programme.