Lien Hypertextes
Qu’est-ce qu’un lien hypertexte ?
Section intitulée « Qu’est-ce qu’un lien hypertexte ? »Un lien hypertexte permet de naviguer d’une page à une autre en cliquant dessus. C’est l’une des bases du web, ce qui permet de relier les pages entre elles.
Le mot “hypertexte” a été introduit par Ted Nelson en 1965.
Le HTML (HyperText Markup Language) en est l’une des premières applications concrètes à grande échelle.
La balise <a>
Section intitulée « La balise <a> »Pour créer un lien, on utilise la balise <a> (comme “anchor”, ancre).
Exemple simple :
Section intitulée « Exemple simple : »<a href="page.html">Aller à la page</a>href: définit l’adresse du lien (le “chemin”)- Le texte entre
<a>et</a>est ce qui est cliquable
Types de liens
Section intitulée « Types de liens »1. Lien vers une page interne :
Section intitulée « 1. Lien vers une page interne : »<a href="about.html">À propos</a>2. Lien vers une page externe :
Section intitulée « 2. Lien vers une page externe : »<a href="https://wildcodeschool.com">Wild Code School</a>3. Lien vers un fichier dans un dossier parent :
Section intitulée « 3. Lien vers un fichier dans un dossier parent : »<a href="../home.html">Retour à l’accueil</a>4. Lien depuis la racine du site :
Section intitulée « 4. Lien depuis la racine du site : »<a href="/pages/contact.html">Contact</a>Les liens d’ancrage (vers une section de la page)
Section intitulée « Les liens d’ancrage (vers une section de la page) »Étape 1 : donner un id à l’élément cible
Section intitulée « Étape 1 : donner un id à l’élément cible »<h2 id="citation">Citation sur les chats</h2>Étape 2 : créer un lien avec #id
Section intitulée « Étape 2 : créer un lien avec #id »<a href="#citation">Voir la citation</a>Mail & Téléphone
Section intitulée « Mail & Téléphone »Lien pour envoyer un email :
Section intitulée « Lien pour envoyer un email : »<a href="mailto:bob@example.com">Envoyer un email</a>Lien pour appeler un numéro de téléphone :
Section intitulée « Lien pour appeler un numéro de téléphone : »<a href="tel:+3361020304">Appeler maintenant</a>Très utile sur mobile : un clic = un appel ou un email.
Attributs supplémentaires utiles
Section intitulée « Attributs supplémentaires utiles »title → info au survol + accessibilité
Section intitulée « title → info au survol + accessibilité »<a href="..." title="Accédez à notre page Facebook">Page Facebook</a>Les lecteurs d’écran peuvent lire ce titre pour donner plus de contexte.
target="_blank" → ouvrir dans un nouvel onglet
Section intitulée « target="_blank" → ouvrir dans un nouvel onglet »<a href="https://example.com" target="_blank">Visiter le site</a>download → lien de téléchargement
Section intitulée « download → lien de téléchargement »<a href="cv.pdf" download="cv-bob-smith.pdf">Télécharger mon CV</a>Le fichier sera téléchargé avec le nom indiqué.
Bonnes pratiques
Section intitulée « Bonnes pratiques »Texte du lien = clair et descriptif
Section intitulée « Texte du lien = clair et descriptif »Mauvais :
<a href="...">Cliquez ici</a>Meilleur :
<a href="...">Voir notre page Facebook</a>Toujours vérifier le bon usage des chemins :
Section intitulée « Toujours vérifier le bon usage des chemins : ».→ dossier courant..→ remonter d’un dossier/→ racine du site
Résumé express
Section intitulée « Résumé express »| Type de lien | Syntaxe |
|---|---|
| Page interne | <a href="page.html">Lien</a> |
| Page externe | <a href="https://...">Lien</a> |
| Vers une section | <a href="#id">Lien</a> + <h2 id="id">Titre</h2> |
<a href="mailto:mail@example.com">Envoyer un email</a> | |
| Téléphone | <a href="tel:+33...">Appeler</a> |
| Nouveau onglet | target="_blank" |
| Téléchargement | download="nom-fichier" |
| Info au survol | title="Texte" |