Ajouter un lien vers une formation connexe
Objectif : Relier la réservation de l’atelier à une ressource de formation complémentaire pertinente, avec un texte de lien explicite.
Une personne qui découvre l’atelier peut vouloir approfondir une technique avant de réserver. Un lien placé au bon endroit lui propose une suite utile, sans détourner la page de son objectif principal : présenter l’atelier et permettre l’inscription.
Dans cette leçon, vous ajoutez un lien contextuel à l’article « À propos de l’atelier ». Il pointe vers une formation liée aux techniques créatives. Le projet ne fournit pas l’adresse de cette formation : l’exemple utilise donc une URL à remplacer par l’adresse réelle de la page connexe sur votre site avant publication.
Choisir une ressource qui prolonge le besoin
Un lien connexe est pertinent lorsqu’il répond à une question que le lecteur peut se poser à cette étape. Ici, une formation sur les techniques de création complète la présentation d’un atelier créatif. Une page sans rapport, comme les conditions générales du site, ne répondrait pas au même besoin et encombrerait le parcours.
Placez ce lien près de l’information qui lui donne du sens, plutôt que de l’ajouter isolément dans la navigation principale. Le lecteur comprend alors pourquoi vous lui proposez cette ressource. Le lien ne remplace ni le formulaire ni les informations pratiques : il complète la présentation pour les personnes qui souhaitent apprendre davantage avant de choisir leur formule.
Rédiger un lien compréhensible
Le texte cliquable doit annoncer la destination, même lorsqu’il est lu sans le paragraphe qui l’entoure. « Découvrez notre formation aux techniques créatives » décrit mieux la ressource qu’un texte vague comme « Cliquez ici ». Vous pouvez conserver une phrase de contexte, mais ne comptez pas sur elle pour rendre seul le lien compréhensible.
Intégrer le lien à la page de réservation
Le code ci-dessous présente la page complète à cet état du projet. Le lien a été ajouté dans l’article existant, après les informations sur la durée et les places disponibles. Remplacez l’URL d’exemple par celle de votre formation ; les autres éléments du squelette, les classes autorisées et les liens de navigation restent inchangés. Aucun ajout à style.css n’est nécessaire pour créer ce lien.
<!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>
<p>Pour approfondir les techniques de création, consultez notre <a href="/formations/techniques-creatives.html">formation aux techniques créatives</a>.</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" value="1" required>
</div>
<div class="atelier-champ">
<label for="formule">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>
<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>Dans cet exemple, le texte du lien précise qu’il mène à une formation consacrée aux techniques créatives. Le chemin /formations/techniques-creatives.html est une adresse d’exemple, non un fichier ajouté au projet. Si votre site utilise une autre adresse, modifiez uniquement la valeur de href pour qu’elle corresponde à la page réelle ; gardez un texte de lien fidèle à son contenu.
Le lien est intégré dans une phrase qui expose son intérêt : approfondir les techniques de création. La personne peut décider de le suivre ou de poursuivre directement vers l’inscription. Pour cette leçon, vous réutilisez les liens HTML présentés dans « Rédiger des liens utiles dans la navigation » ; ici, la différence est leur emplacement dans le contenu et la fonction de complément qu’ils remplissent.
À retenir
- Proposez une ressource qui répond à un besoin complémentaire lié au contenu consulté.
- Placez le lien près du passage qui explique son intérêt.
- Rédigez un texte cliquable qui annonce clairement la destination.
- Vérifiez que l’URL mène bien à la formation mentionnée et remplacez toute adresse d’exemple avant publication.
Dans la prochaine leçon, vous structurerez les informations de l’atelier par sujet à l’aide de paragraphes et de listes adaptés.