Liens et navigation en HTML

Dans l'Égypte ancienne, les pyramides contenaient des centaines de couloirs, de passages secrets et de chambres cachées. Chaque porte menait quelque part - vers une chambre funéraire, un trésor, ou un autre couloir. Les liens en HTML fonctionnent exactement de la même façon ! Ce sont des portes qui mènent l'utilisateur d'une page à une autre, d'une section à une autre, et même vers un e-mail ou un numéro de téléphone. Mohamed dit : « Sans liens, Internet serait comme une pyramide sans portes - magnifique, mais hermétiquement close ! »

La balise <a> - Les portes de la pyramide

Les liens en HTML sont créés à l'aide de la balise <a> (de « anchor », ancre). L'attribut le plus important est href (hypertext reference), qui indique où mène le lien :

1<a href="https://fr.wikipedia.org/wiki/Pyramides_de_Gizeh">Pyramides de Gizeh</a>

Le texte entre <a> et </a> est le contenu du lien - ce que l'utilisateur voit et sur quoi il clique. Le navigateur l'affiche par défaut sous forme de texte bleu et souligné.

Structure d'un lien :

1<a href="ADRESSE_DESTINATION">Texte visible par l'utilisateur</a>

• href - attribut avec l'adresse vers laquelle mène le lien (URL de page, fichier, e-mail...)
• Contenu entre les balises - ce sur quoi nous cliquons

Adresses URL - Absolues et relatives

Tout comme en Égypte tu peux donner une adresse de deux façons (« Le Caire, rue des Pyramides 15 » ou « deux maisons plus loin »), en HTML nous avons deux types d'adresses :

Adresse absolue (chemin complet)

Contient l'adresse complète de la page, y compris le protocole (https://) et le domaine. Utilise-la pour créer des liens vers des pages externes :

1<!-- Lien vers une page externe -->
2<a href="https://www.britannica.com/place/ancient-Egypt">Encyclopédie sur l'Égypte</a>
3
4<!-- Lien vers une sous-page spécifique -->
5<a href="https://fr.wikipedia.org/wiki/Toutânkhamon">Toutânkhamon sur Wikipédia</a>

Adresse relative (chemin relatif)

Pointe vers une page au sein du même site web. Elle ne contient pas le domaine - le navigateur sait qu'il doit chercher le fichier sur le même serveur :

1<!-- Lien vers un fichier dans le même dossier -->
2<a href="about.html">À propos de moi</a>
3
4<!-- Lien vers un fichier dans un sous-dossier -->
5<a href="pages/gallery.html">Galerie de photos</a>
6
7<!-- Lien vers un fichier dans le dossier parent -->
8<a href="../index.html">Page d'accueil</a>

Ouvrir dans un nouvel onglet - target et rel

Par défaut, cliquer sur un lien ouvre la page dans le même onglet. Mais parfois tu veux que le lien s'ouvre dans un nouvel onglet - par exemple, quand tu crées un lien vers une source externe et que tu ne veux pas que l'utilisateur quitte ta page :

1<a href="https://www.metmuseum.org" target="_blank" rel="noopener noreferrer">
2  Metropolitan Museum - Collection égyptienne
3</a>

Explication des attributs :

• target="_blank" - ouvre le lien dans un nouvel onglet du navigateur
• rel="noopener noreferrer" - important pour la sécurité ! Empêche la nouvelle page d'accéder à ta page. Ajoute toujours cet attribut avec target="_blank"

Mohamed conseille : « Quand tu crées un lien vers un monde étranger, utilise toujours rel="noopener noreferrer" - c'est comme fermer la porte derrière toi pour que personne ne se faufile dans ta pyramide ! »

Liens e-mail et téléphone - Les messagers du pharaon

Lien e-mail (mailto:)

Le préfixe mailto: dans l'attribut href crée un lien qui ouvre le programme de messagerie par défaut :

1<a href="mailto:mohamed@pyramids.eg">Écrire à Mohamed</a>
2
3<!-- Avec un objet -->
4<a href="mailto:mohamed@pyramids.eg?subject=Question%20sur%20les%20pyramides">
5  Envoyer une question sur les pyramides
6</a>

Dans l'adresse, les espaces s'écrivent %20.

Lien téléphone (tel:)

Le préfixe tel: crée un lien qui, sur les téléphones mobiles, lance l'application d'appel :

1<a href="tel:+48123456789">Appeler : +48 123 456 789</a>

Ces liens sont particulièrement utiles sur les pages mobiles - l'utilisateur peut appeler ou écrire un e-mail d'un seul clic !

Liens d'ancrage - Navigation au sein d'une page

Imagine un long rouleau de papyrus avec de nombreux chapitres. Au lieu de dérouler tout le rouleau, tu aimerais sauter directement à un chapitre précis. Les liens d'ancrage permettent de naviguer au sein de la même page.

Étape 1 : Donne un id à la section cible

L'attribut id est un identifiant d'élément unique - comme le numéro d'une chambre dans une pyramide :

1<h2 id="discoveries">Mes découvertes</h2>
2<p>Contenu sur les découvertes...</p>
3
4<h2 id="contact">Contact</h2>
5<p>Contenu sur le contact...</p>

Étape 2 : Crée un lien avec # et le nom de l'id

1<a href="#discoveries">Aller aux découvertes</a>
2<a href="#contact">Aller au contact</a>

Cliquer sur un tel lien fait défiler la page jusqu'à l'élément ayant l'id correspondant. Le signe # indique au navigateur : « cherche un élément avec cet id sur cette même page. »

Retour en haut

Une technique populaire - un lien en bas de page qui ramène vers le haut :

1<!-- En haut de la page -->
2<h1 id="top">Ma page sur l'Égypte</h1>
3
4<!-- Quelque part en bas de la page -->
5<a href="#top">Retour en haut</a>

Exemple de navigation complète

Combinons tous les types de liens en un seul exemple :

1<h1 id="top">Portail égyptien</h1>
2
3<!-- Navigation interne -->
4<p>
5  <a href="#history">Histoire</a> |
6  <a href="#gallery">Galerie</a> |
7  <a href="#contact">Contact</a>
8</p>
9
10<h2 id="history">Histoire de l'Égypte</h2>
11<p>L'Égypte ancienne est l'une des plus anciennes civilisations du monde...</p>
12
13<h2 id="gallery">Galerie</h2>
14<p>Plus de photos sur
15  <a href="https://unsplash.com/s/photos/egypt" target="_blank" rel="noopener noreferrer">
16    Unsplash
17  </a>
18</p>
19
20<h2 id="contact">Contact</h2>
21<p>
22  <a href="mailto:info@egyptian-portal.com">Écris-nous</a><br>
23  <a href="tel:+48111222333">Appelle-nous</a>
24</p>
25
26<a href="#top">Retour en haut</a>

Résumé

Mohamed résume : « Les liens sont la colonne vertébrale d'Internet - sans eux, les pages seraient des îles isolées. Souviens-toi des règles clés : »

• <a href="URL"> - crée un lien (ancre)
• Adresses absolues (https://...) - pour les pages externes
• Adresses relatives (about.html) - pour les pages du même site web
• target="_blank" + rel="noopener noreferrer" - ouverture sûre dans un nouvel onglet
• mailto: - lien e-mail, tel: - lien téléphone
• href="#id" - liens d'ancrage vers des sections de la même page
• L'attribut id - identifiant d'élément unique

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <title>Les liens en HTML</title>
6</head>
7<body>
8    <h1 id="top">Liens et navigation</h1>
9
10    <nav>
11        <a href="#section1">À propos de l'Égypte</a> |
12        <a href="#section2">Monuments</a> |
13        <a href="#contact">Contact</a>
14    </nav>
15
16    <hr>
17
18    <h2 id="section1">À propos de l'Égypte ancienne</h2>
19    <p>L'Égypte est une civilisation fascinante.
20       <a href="https://fr.wikipedia.org/wiki/%C3%89gypte_antique" target="_blank" rel="noopener noreferrer">Lire la suite sur Wikipédia</a>
21    </p>
22
23    <h2 id="section2">Les monuments les plus importants</h2>
24    <p>Pyramide de Khéops, Sphinx, Temple de Karnak.</p>
25
26    <h2 id="contact">Contact</h2>
27    <p>E-mail : <a href="mailto:mohamed@pyramids.eg">mohamed@pyramids.eg</a></p>
28    <p>Téléphone : <a href="tel:+20123456789">+20 123 456 789</a></p>
29
30    <p><a href="#top">↑ Retour en haut</a></p>
31</body>
32</html>