Les liens hypertextes

Hyperliens

C’est l’essence même du web : le lien hypertexte ou hyperlien. Sans lui, le web ne serait qu’une méga bibliothèque sur support numérique à laquelle on accèderait par Internet.

Dans un premier temps nous verrons comment intégrer les liens dans le code HTML, puis nous montrerons comment les représenter graphiquement et enfin comment faciliter leur utilisation par l’internaute grâce au CSS.

 

HTML

Un texte de lien (anchor text) est le texte ou l’image cliquable d’une page web.

La balise du lien est <a>. Évidemment elle ne peut s’employer seule puisqu’il faut préciser l’adresse où le lien conduit, comme nous allons le voir. La fin de l’anchor text est balisée par </a>, cette fois sans autre précision.

Le saut

Pour créer un lien dans une même page, il faut placer une « ancre » au lieu où doit conduire le lien. Supposons que l’on nomme cette ancre « maths ». À l'endroit où l’internaute doit arriver après avoir cliqué on place <a id = "maths"> et le texte de lien est indiqué par <a href = "#maths">.

Par exemple, en page seconde, vous avez un menu des matières traitées sur ce site :

<ul>
<li><a href="#maths">Mathématiques</a></li>
<li><a href="#ses">Sciences économiques et sociales</a></li>
<li><a href="#snt">Sciences numériques et technologie</a></li>     
<li><a href="#mana">Management et gestion</a></li>
</ul>

Si vous cliquez sur Sciences numériques et technologie, vous faites un saut jusqu’au sous-titre Sciences Numériques et Technologie grâce au code suivant :

<a id = "snt">
<h2 align = "left" class = "Style9">Sciences Numériques et Technologie</h2></a>

Le lien interne

Les liens qui pointent dans le même site peuvent être très nombreux. Un site encyclopédique comme celui-ci en contenait environ 30 000 en octobre 2020.

Concrètement, il est simplissime de créer un lien avec un logiciel de conception de sites (avec Dreamweaver, un cliquer-glisser qui part du mot source et qui pointe vers le fichier destination). Si vous devez l’écrire dans le code, précisez le suffixe html. En général on arrive en haut de page et il n’y a pas lieu de placer une ancre mais il est tout à fait possible de lier un texte avec une ancre placée sur une autre page pour amener l'internaute sur un paragraphe en particulier.

Soit par exemple le texte de lien CSS qui renvoie à la page css.html :

<a href = "css.html">CSS</a>

Toutefois, à partir d’une certaine importance, un site comporte des dossiers pour que les fichiers soient bien rangés. Et si le lien doit pointer sur un fichier qui n’est pas dans le même dossier, il faut lui indiquer le chemin à suivre.

Supposons que sur cette page figure le texte PIB. Il doit pointer vers le dossier Economie qui contient le fichier pib.html (page qui doit s’ouvrir lors du clic sur PIB).

<a href = "../Economie/pib.html">PIB</a>

Les deux points du début indiquent que le navigateur doit remonter l’arborescence du site d’un niveau pour ensuite redescendre sur le bon dossier.

Le lien sortant

C’est le même principe qui est employé pour un lien externe, à savoir <a href = "URL du site">.

Par exemple, pour aller sur le site du tourisme à Lyon :

<a href = "https://www.lyon-france.com/">Tourisme à Lyon</a>

Option

Vous l’avez peut-être remarqué, lorsqu’un lien vous conduit sur une autre page, soit cette dernière remplace à l’écran celle sur laquelle vous vous trouviez, soit elle s’ajoute (un onglet vous permet de revenir à la page de départ). Sans précision dans le HTML, la page est remplacée. C’est le cas pour tous les liens internes de ce site. Sinon, il faut préciser target = "_blank". Comme un auteur préfère que vous puissiez revenir très vite sur son site plutôt que partir sans dire au revoir, il est fréquent que les liens externes comportent cet attribut.

Donc nous réécrivons :

<a href = "https://www.lyon-france.com/" target = "_blank>Tourisme à Lyon</a>

Là, c’est mieux.

 

Visualisation du maillage

Vous pouvez visualiser graphiquement les liens internes (telle page pointe vers telle autre) ainsi que les liens sortants. Grâce à la cartographie du site, on s’assure de la cohérence de la navigation interne mais aussi du nombre de liens qui pointent sur une page (utile pour son référencement).

Il existe des outils pour cela, par exemple Gephi :

https://gephi.org/

L’exemple suivant a été réalisé « manuellement » avec Graph Online.

cartographie

En page d’index se trouvent deux textes de lien (un qui renvoie en page 1 et l’autre qui renvoie en page 2). Deux liens aussi en page 1 : un pour l’index et un externe. Enfin, un seul lien issu de la page 2.

 

CSS

Avec CSS, il est très facile d’habiller les textes de liens (couleur spéciale, soulignement, caractère gras…).

L’exemple ci-dessous s'applique aux pages grises de ce site.

a:link {color: #0099FF;
text-decoration:none;
}
a:visited {color: #0099CC;
}
a:hover {color: #00CCCC;
}             
a:active {color: #00FFFF;
}

Quatre couleurs ! Une pour le lien non cliqué, une autre si l’utilisateur l’a déjà utilisé, une troisième pour le survol avec le pointeur de la souris et une quatrième lors du clic. Testez-les ici-même…