Les liens cliquables (hyperliens)

Les hyperliens (ou liens cliquables dans une page) sont des éléments d'une page HTML sur lesquels on peut cliquer et sauter à différents autres endroits sur le web.

Ces endroits du web accessibles par hyperlien incluent :

• une autre page web du site actuel;
• une autre page web d'un tout autre site;
• un emplacement spécifique sur la page web actuelle;
• un fichier à ouvrir ou à télécharger.

Par défaut, lorsque l'utilisateur déplace son curseur de souris sur un hyperlien, ce dernier se transforme en une petite main - icône normalisé pour indiquer un lien cliquable.

Il est important de noter qu'un lien cliquable n'est pas nécessairement du texte. Ce peut être une image ou tout autre élément HTML. Il faut vraiment se fier sur l'icône de la souris pour savoir si l'élément HTML est cliquable.

Les liens cliquables d'une page web sont définis à l'aide de la balise <a>. Cette balise nécessite une ouverture et une fermeture. Le contenu entre l'ouverture et la fermeture indique ce qui est cliquable sur la page. Ainsi, la syntaxe d'unl ien cliquable est la suivante :

<a href="destination">Contenu cliquable sur la page web</a>

href : attribut de balise permettant d'indiquer à quel endroit sur le web le lien doit mener.

EXEMPLE :

<a href="https://dinf.ca/">Cours du Département d'informatique</a>

Ce code permet d'afficher sur la page web le lien cliquable suivant :

Cours du Département d'informatique

Définitions

Pour parler de liens cliquables, on doit comprendre quelques termes. Voici quelques définitions qui vous seront utiles pour la suite :

URL

Un URL désigne une adresse web, un chemin d'accès, permettant d'accéder à une ressource sur Internet. On parle aussi de lien web.

La définition et la syntaxe d'un URL est indiqué dans la théorie de la semaine 1.

Comme vu tout à l'heure, il existe aussi des adresse web absolues et relatives, comme les chemins d'Accès sur le disque dur.

Adresse absolue

Une adresse absolue indique un lien complet, incluant le protocole, le nom de domaine et le chemin d'accès.

Exemple:

Adresse relative

Une adresse relative ne contient généralement que le chemin d'accès, sans le protocole, ni le nom de domaine.

Ces adresses sont utilisées lorsqu'un site web utilise une ressource locale, c'est à dire sur le même disque dur.

Par exemple, supposons le dossier suivant, contenant les fichiers nécessaires à un site web :

Lorsque la page index.html affiche l'image imageA.png, elle y accéde directement, en indiquant le sous-dossier et le nom du fichier à retrouver, en partant de son emplacement actuel : images/imageA.png.

Lien local ou interne

Un lien local ou lien interne est un lien cliquable menant l'internaute à une page du même site web. Puisque la page web actuelle connaît son emplacement sur le disque du serveur web, nous n'avons pas à indiquer une adresse absolue comme destination. Il est conseillé d'utiliser une adresse relative.

<a href="contact.html">Nous contacter</a>

Lien externe

Un lien externe est un lien cliquable menant l'internaut à un autre site web. Puisque nous changeons de site web, donc de serveur etc., on doit ici utiliser un lien absolu.

<a href="https://www.w3schools.com/">Site de référence en développement web</a>

Lien d'ancrage ou signet

Un lien d'ancrage, ou signet, est un lien qui permet d'accéder à une section spécifique d'une page web. Lorsque le lien est cliqué, la page défile jusqu'à la section de destination. Ces liens sont pratiques lorsqu'on fait face à une page web particulièrment longue. Ils sont aussi utilisés pour créer le bouton cliquable "retour au haut de la page" qu'on retrouve souvent sur Internet.

Pour créer un lien d'ancrage, nous avons besoin de deux éléments :

1. Le signet ou l'ancre

   Ce dernier est un élément HTML qui contient un identifiant unique. Exemple:

   <h2 id="chap2">Chapitre 2</h2>
   

2. Le lien cliquable vers le signet

   Le lien aura donc comme URL de destination l'ancrage pré-défini. Exemple :

   <a href="#chap2">Aller au chapitre 2</a>
   

   Le lien cliquable peut aussi se trouver sur une autre page :

   <a href="contenu_complet.html#chap2">Aller au chapitre 2</a>
   

Retour vers le haut

Pour créer un lien qui ramène vers le haut de la page, une valeur pré-définie a vu le jour en HTML5, soit l'ancrage implicite #top.

Ainsi, pour créer un lien vers le haut de la page, il suffit de créer un lien en utilisant cet ancrage :

<a href="#top">Retour vers le haut</a>

Image cliquable

Tel que mentionné plus tôt, les liens cliquables ne sont pas que du texte. On peut parfois rendre une image cliquable. Ainsi, il suffit, au lieu du texte, d'insérer une balise d'image.

<a href="https://cll.omnivox.ca/Login/Account/Login?ReturnUrl=%2fintr">
    <img src="img/logo_omnivox.png" alt="Lien vers Omnivox">
</a>

Cet exemple s'applique à n'importe quel élément HTML que nous voudrions rendre cliquable. Il suffit de remplacer l'image pour l'élément voulu.

Target et Title

L'attribut minimum pour un lien web est href et permet d'indiquer la destination du lien cliquable.

On peut toutefois ajouter d'autres attributs, dont deux très utiles à connaître.

target="_blank"

L'attribut target permet d'indiquer l'endroit où la page destination doit être affichée. Par défaut, cette page s'affiche normalement dans la fenêtre du navigateur déja ouverte.

L'idéal, surtout lorsqu'un lien cliquable mène vers un autre site web, est d'ouvrir la nouvelle page soit dans une nouvelle fenêtre ou un nouvel onglet du navigateur. C'est ce que permet la valeur _blank de l'attribut *target.

<a href="http://cll.qc.ca" target="_blank">Cégep de Lévis-lauzon</a>

Noter que ce qui détermine si la page doit s'ouvrir dans un nouvel onglet ou dans une nouvelle fenêtre du navgateur sont les paramètres du navigateur lui-même :

title="Aller vers la page d'aide"

L'attribut title permet de définir un petit texte d'information à propos du lien. Normalement, ce texte s'ffiche dans une bulle lorsque le curseur de la souris est placé au-dessus d'un lien.

<a href="https://www.w3schools.com/html/default.asp" title="Go to W3Schools HTML section">Visit out HTML Tutorial</a>

CSS pour liens cliquables

Par défaut, les liens cliquables seront affichés en bleu souligné s'ils n'ont pas encore été visités. Une fois que l'utilisateur aura cliqué sur le lien, alors ce dernier s'affiche en mauve souligné.

En plus de la police, de la taille et de la couleur du texte utilisé dans un lien, il est aussi possible de modifier l'apparence par défaut des différents états des liens cliquables grâce au CSS. Pour ce faire, on utilise les sélecteurs d'état.

Les états possibles pour un lien sont :

• a:link -> un lien non visité
• a:visited -> un lien visité
• a:hover -> un lien dont le curseur de souris survole
• a:active -> un lien au moment où il est cliqué (lorsque le bouton de la souris est enfoncé)

EXEMPLES :

/*style pour tous les liens, peu importe leur état*/
a {
    text-decoration: none;
}

/*style pour tous les liens non visités*/
a:link {
  color: red;
}

/*style pour tous les liens visités*/
a:visited {
  color: green;
}

/*style pour tous les liens, lorsque la souris les survole*/
a:hover {
  color: hotpink;
}

/*style pour tous les liens, lorsque cliqués*/
a:active {
  color: blue;
}