Dernière mise à jour le 4 octobre 2022
Une des grandes fonctionnalités du Web est la possibilité pour une page de faire un lien vers une autre, créant ainsi une toile infinie (le World Wide Web).
Un lien est fait avec la balise a (pour anchor, une ancre) et a absolument besoin de l’attribut href (hypertext reference) pour spécifier la cible du lien.
<a href=cible du lien>texte (ou image) cliquable</a>
Le texte qui se trouve entre <a> et </a> constitue le lien lui-même et c’est sur lui que l’on peut cliquer.
Même si un hyperlien nous mène généralement vers une autre page Web, il peut aussi nous diriger vers un répertoire, une image, une vidéo, etc.
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les hyperliens</title> </head> <body> <a href="https://fr.vikidia.org/wiki/Ornithorynque">L'ornithorynque</a><br> <a href="ornithorynque.jpg">Mon animal préféré</a> </body> </html>
Notez que, par défaut, un lien est représenté en bleu et souligné, puis passe au violet et souligné lorsqu'il a été visité (nous verrons plus loin comment modifier ces couleurs).
On peut aussi forcer le lien à s’ouvrir dans un nouvel onglet plutôt que dans l’onglet courant en utilisant l’attribut target (qui veut dire "cible") avec la valeur _blank (notez le caractère souligné au début).
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple d'hyperliens</title>
</head>
<body>
<a href="https://fr.vikidia.org/wiki/Ornithorynque"
target="_blank">L'ornithorynque</a><br>
<a href="ornithorynque.jpg" target="_blank">Mon animal préféré</a>
</body>
</html>
La cible du lien peut être une ressource (document HTML, image, etc.) située sur autre site Web ou sur le site Web courant.
Quand la cible est une ressource externe au site Web, le chemin de cette ressource doit inclure le protocole (http:// ou https://).
Exemple :
<a href="https://fr.vikidia.org/wiki/Ornithorynque">L'ornithorynque</a>
La chaîne http signifie Hypertext Transfer Protocol (protocole de transfert hypertexte).
Il s'agit du protocole de communication qui permet d’aller chercher un document sur un serveur Web (HTTPS est la version sécurisée).
La mention du protocole et du nom de domaine (ex : https://prog101.com) sont nécessaires dans un lien vers une ressource externe.
Un hyperlien peut pointer vers une ressource qui est dans le même site Web que la page courante.
Dans ce cas, la mention du protocole et du nom de domaine ne sont pas nécessaires.
Exemple :
<a href="ornithorynque.jpg">Mon animal préféré</a>
Il est aussi possible de créer un lien vers un élément précis d'un document.
Le principe consiste d'abord à donner un attribut id à l'élément :
... <p id="conclusion"> Lorem ipsum dolor sit amet. Sit tenetur eligendi hic rerum porro ut necessitatibus eveniet et consectetur odio. </p> ...
Ensuite, on construit l'hyperlien en faisant précéder la valeur du id de l'élément ciblé du caractère # :
<a href="#conclusion">Notre conclusion</a> ... <p id="conclusion"> Lorem ipsum dolor sit amet. Sit tenetur eligendi hic rerum porro ut necessitatibus eveniet et consectetur odio. </p> ...
Exemple de lien vers le même élément à partir d'une autre page du même site :
<a href="page5.html#conclusion">La conclusion</a>
Exemple de lien vers le même élément à partir d'un autre site Web :
<a href="http://nowhere.com/page5.html#conclusion">Conclusion</a>
Un autre type de lien commun est le lien vers un courriel
Dans ce cas, on donnera l’adresse de courriel du destinataire comme valeur à l'attribut href, en la précédant de la chaîne mailto: (notez l'absence des barres obliques)
<a href="mailto:leprof@prog101.com">Écrivez-moi!</a>
Le fait de cliquer sur un tel lien démarre l'exécution du logiciel de courrier électronique de l'utilisateur
Terminons en voyant comment on peut améliorer l'apparence de nos hyperliens.
Pour cela, on utilise très souvent ce qu'on appelle des "pseudo-classes".
Les pseudo-classes sont un ajout que nous pouvons mettre à un sélecteur CSS pour sélectionner uniquement les éléments qui ont une certaine caractéristique.
Les pseudo-classes ont tous la même syntaxe
sélecteur:pseudo-classe
Par exemple, la pseudo-classe hover permet de modifier le style d’un sélecteur selon que la souris est sur l’élément ou non :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Pseudo-classes CSS</title>
<style>
a {
color: black;
}
a:hover {
color: red;
text-decoration: overline;
</style>
</head>
<body>
<a href="http://google.ca">Google (CA)</a>
</body>
</html>
Quand la souris n’est pas sur le lien (élément a) :
Google (CA)
Quand on passe avec la souris l'élément a:hover) :
Google (CA)
Voici une liste des pseudo-classes utilisées pour les hyperliens :
| Pseudo-classe | Définition | Exemple(s) |
|---|---|---|
| :hover | Se produit quand la souris survole l'élément. S’utilise avec tous les éléments. |
p:hover sélectionne le paragraphe survolé par la souris. a:hover sélectionne l'hyperlien survolé par la souris. |
| :link | Sélectionne les liens qui n'ont pas été visités. | a:link sélectionne les lien qui n’ont jamais été visités. |
| :visited | Sélectionne les liens déjà visités. | a:visited sélectionne les liens qui ont déjà été visités. |
| :active | Sélectionne les liens actifs. | a:active sélectionne un lien sur lequel on a cliqué. |