Module 4 — Les connexions : liens et navigation | Faites entrer HTML

Dans cette ville, personne n’agit seul.
Tout est connecté.
Un lien mal posé, et tu te perds dans le noir.

🎯 Objectifs d’apprentissage

À la fin de ce module, vous saurez :

Créer des liens internes et externes
Comprendre la différence entre chemins relatifs et absolus
Mettre en place une navigation claire et accessible
Guider l’utilisateur sans qu’il s’en rende compte

🔗 Le lien hypertexte — La connexion de base

Le lien, c’est le coup de fil discret.
Une porte qui s’ouvre vers ailleurs.

🧷 L’élément `<a>`

<a href="rapport.html">Consulter le rapport</a>

<a> pour anchor
href indique la destination
Sans href, le lien est mort

🗺️ Chemins absolus et relatifs — Savoir où on va

🌍 Lien absolu — Adresse complète

<a href="https://dossiers-secrets.com/preuves">Archives externes</a>

URL complète
Indépendant du site courant
Utilisé pour les ressources externes

📁 Lien relatif — À l’intérieur du réseau

<a href="preuves.html">Voir les preuves</a>
<a href="../archives/temoin.html">Déposition du témoin</a>

Dépend de l’emplacement du fichier
Plus flexible
Indispensable pour la navigation interne

../ = remonter d’un dossier ./ = dossier courant

🧭 Liens internes — Les ancres

Parfois, on ne change pas de lieu. On change juste de pièce.

<a href="#suspect-principal">Aller au suspect principal</a>

Cible :

<h2 id="suspect-principal">Suspect principal</h2>

Navigation fluide
Très utilisée pour les pages longues
Utile pour l’accessibilité

🧩 Types de liens — Chaque contact a son usage

🌐 Liens externes (nouvel onglet)

<a href="https://exemple.com"
   target="_blank"
   rel="noopener">
   Base de données externe
</a>

target="_blank" : nouvel onglet
rel="noopener" : sécurité
Ne jamais oublier ce duo

🏠 Liens internes au site

<a href="index.html">Retour au QG</a>

Simple. Efficace. Sans détour.

📥 Liens de téléchargement

<a href="rapport.pdf" download>Télécharger le rapport</a>

Lance un téléchargement
Utile pour PDF, images, archives

✉️ Lien email — `mailto`

<a href="mailto:contact@site.com">Contacter le bureau</a>

Ouvre le client mail
Pas de JavaScript
Direct et classique

📞 Lien téléphone — `tel`

<a href="tel:+33123456789">Appeler le central</a>

Essentiel sur mobile
Format international recommandé

🧠 Navigation avancée — Guider sans perdre

🎯 Ancres vers sections de page

<nav>
    <a href="#contexte">Contexte</a>
    <a href="#preuves">Preuves</a>
    <a href="#conclusion">Conclusion</a>
</nav>

Chaque lien pointe vers une vérité précise.

♿ Texte de lien descriptif — Accessibilité

❌ Mauvais :

<a href="preuves.html">Cliquez ici</a>

✅ Bon :

<a href="preuves.html">Consulter les preuves numériques</a>

Lisible hors contexte
Compréhensible par les lecteurs d’écran
Meilleur pour le SEO

🏷️ Attribut `title` — Info supplémentaire

<a href="suspect.html" title="Dossier complet du suspect">
    Dossier suspect
</a>

Affiché au survol
Complément d’information
Ne remplace jamais un bon texte de lien

Fin du module 4. Les connexions sont établies. Au prochain module, on ajoutera des pièces au dossier.

Module 4 — Les connexions : liens et navigation