1. A propos des liens hypertexte
Les liens hypertexte, communément appelés liens, sont un élément essentiel du Web qui permettent aux utilisateurs de naviguer entre différentes pages Web. En HTML, les liens sont créés à l'aide de la balise <a> (ancrages), qui peut être utilisée pour créer des liens vers d'autres pages, des fichiers, des images, des adresses e-mail et bien plus encore.
Syntaxe de base des liens hypertexte
1 |
<a href="URL de la cible">Texte du lien</a> |
- href: C'est l'attribut principal de la balise <a>, qui spécifie l'URL de la cible du lien.
- Texte du lien: C'est le texte visible du lien que l'utilisateur cliquera pour accéder à la cible.
2. Lien vers une page Web
Pour créer un lien vers une autre page Web, vous devez spécifier l'URL complète de la page cible dans l'attribut href.
Exemple
1 |
<a href="https://www.tresfacile.net">Cliquez ici pour visiter www.tresfacile.net</a> |
3. Lien vers une adresse e-mail
Vous pouvez également créer un lien pour ouvrir le client de messagerie de l'utilisateur avec une adresse e-mail pré-remplie en utilisant le préfixe "mailto:" dans l'attribut href.
Exemple
1 |
<a href="mailto:contact@example.com">Envoyez-nous un e-mail</a> |
4. Lien vers un fichier téléchargeable
Pour créer un lien vers un fichier téléchargeable, il vous suffit de spécifier le chemin du fichier dans l'attribut href.
Exemple
1 |
<a href="chemin_vers/mon_fichier.pdf">Télécharger le fichier PDF</a> |
5. Lien vers une ancre dans la même page
Vous pouvez créer des liens hypertextes qui pointent vers des ancres dans la même page en utilisant l'attribut href avec le nom de l'ancre précédé d'un dièse (#).
Exemple
1 2 3 4 5 6 |
<a href="#section1">Aller à la section 1</a> <!-- ... Le contenu de la page ... --> <h2 id="section1">Section 1</h2> <p>Ceci est le contenu de la section 1.</p> |
6. Lien vers une nouvelle fenêtre ou un nouvel onglet
Pour ouvrir le lien hypertexte dans une nouvelle fenêtre ou un nouvel onglet, vous pouvez utiliser l'attribut target avec la valeur "_blank" dans la balise <a>.
Exemple
1 |
<a href="https://www.tresfacile.net" target="_blank">Ouvrir dans une nouvelle fenêtre</a> |
7. Lien avec des attributs supplémentaires
Vous pouvez également ajouter des attributs supplémentaires à la balise <a> pour personnaliser le comportement du lien. Par exemple, vous pouvez ajouter une classe, un titre ou d'autres attributs d'événements JavaScript etc.
Exemple
1 |
<a href="https://www.example.com" class="mon-lien" title="Lien vers Example.com" onclick="maFonction()">Cliquez ici</a> |
8. Les attributs de la balise de lien <a>
La balise <a> en HTML (ancrage) prend en charge plusieurs attributs qui permettent de personnaliser le comportement et l'apparence des liens hypertexte. Voici la liste des attributs de la balise <a> :
- href: Spécifie l'URL de la cible du lien.
- target: Définit où ouvrir la cible du lien. Les valeurs courantes sont "_blank" (nouvelle fenêtre ou nouvel onglet), "_self" (dans la même fenêtre ou onglet), "_parent" (dans le cadre parent) et "_top" (dans la fenêtre parent de tous les cadres).
- download: Indique que le lien doit être téléchargé lorsque cliqué. L'attribut download peut contenir le nom de fichier préféré pour le téléchargement.
- rel: Définit la relation entre la page courante et la page cible. Les valeurs courantes incluent "noopener" pour éviter les attaques de fenêtres contextuelles, "noreferrer" pour ne pas envoyer de référeur à la page cible, etc.
- type: Définit le type de média de la cible liée (par exemple, "text/html" pour une page HTML, "image/jpeg" pour une image, etc.).
- ping: Spécifie une liste d'URLs séparées par des espaces pour être requêtées par le serveur lorsque le lien est cliqué.
- media: Définit le type de média auquel s'applique le lien.
- hreflang: Indique la langue du contenu de la page cible liée.
- referrerpolicy: Contrôle la politique de transmission du Referer header lorsque le lien est suivi.
- shape et coords: Utilisés dans les anciennes cartes d'image pour spécifier la forme et les coordonnées de la zone de la carte liée.
- title: Fournit un texte descriptif (infobulle) qui s'affiche lorsque l'utilisateur survole le lien avec la souris.
- accesskey: Définit une touche de raccourci pour activer le lien. Lorsque l'utilisateur appuie sur la touche spécifiée (généralement en combinaison avec la touche Alt), le lien sera activé.
- tabindex: Spécifie l'ordre de tabulation du lien. Vous pouvez définir un ordre numérique pour les liens en utilisant cet attribut.
- rel, rev, charset, shape, coords, name, urn, archive, code, declare, standby, usemap: Ces attributs étaient utilisés dans des versions antérieures de HTML pour des fonctionnalités spécifiques, mais ils sont désormais obsolètes et ne sont plus recommandés pour une utilisation moderne.
- Attributs d'événements JavaScript : Vous pouvez également utiliser des attributs d'événements tels que onclick, onmouseover, onmouseout, etc., pour lier des scripts JavaScript spécifiques aux événements du lien.
Exemple (attribut target)
1 |
<a href="https://www.example.com" target="_blank">Ouvrir dans une nouvelle fenêtre</a> |
Exemple (attribut download)
1 |
<a href="mon_fichier.pdf" download>Télécharger le fichier PDF</a> |
Exemple (attribut rel)
1 |
<a href="https://www.example.com" rel="noopener">Visitez Example.com</a> |
Exemple (attribut type)
1 |
<a href="mon_fichier.pdf" type="application/pdf">Ouvrir le fichier PDF</a> |
Exemple (attribut ping)
1 |
<a href="https://www.example.com" ping="https://www.analytics.com/log-click">Cliquez ici</a> |
Exemple (attribut media)
1 |
<a href="https://www.example.com" media="print">Version imprimable</a> |
Exemple (attribut hreflang)
1 |
<a href="https://www.example.com" hreflang="fr">Visitez Example.com en français</a> |
Exemple (attribut referrerpolicy)
1 |
<a href="https://www.example.com" referrerpolicy="no-referrer">Visitez Example.com</a> |
Exemple (attribut d'événements JavaScript)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <title>Exemple de lien hypertexte avec événement JavaScript</title> <script> function maFonction() { alert("Le lien a été cliqué !"); } </script> </head> <body> <a href="#" onclick="maFonction()">Cliquez ici</a> </body> </html> |
Younes Derfoufi
CRMEF OUJDA
1 thought on “Les liens hypertexte en HTML”