Liens hypertexte

A l’origine du web, un lien hypertexte associe une URL à un mot ou bout de texte pour permettre la navigation, le butinage comme disent les québécois. L’URL peut désigner :

1. Une ressource interne au site, présente dans son arborescence, auquel cas l’adresse, qui peut être relative ou absolue, ne commence pas par http:// et ne contient pas d’adresse IP ou de nom de domaine ; par exemple /img/logo.png
2. Une ressource externe comme http://w3c.org, auquel cas l’adresse IP ou le nom de domaine est bien sûr obligatoire, de même que le protocole http:// devant pour bien distinguer les deux types d’adresse

La balise pour créer un lien est <a> avec les attributs suivants :

1. href : URL de la ressource liée
2. target : indique si la ressource liée est montrée, si c’est possible, dans le même onglet du navigateur (target="_self") ou dans une nouvel onglet (target="_blank"), la première valeur étant celle par défaut en l’absence d’attribut

Ce sont les valeurs et les attributs les plus communs, vous pouvez en trouver une description exhaustive dans w3schools ou ailleurs.

La balise contient le texte qui apparaîtra comme un lien, donc souligné par défaut en l’absence de styles. Il est ainsi possible de mettre un texte « en clair » au lieu d’écrire l’URL comme lien hypertexte. En voici trois exemples :

<a href="http://cours.jarus.fr">Le cours en ligne</a>
<a href="menu.html">Menu</a>
<a href="http://www.jeuxvideo.com" target="_blank">www.jeuxvideo.com</a>

Ancres

Il est parfois nécessaire que le lien vers une page vous emmène à un endroit précis de la page, en général plus bas dans une partie qui n’est pas montrée après le chargement de la page. Ceci se fait en deux étapes.

Désigner une ancre

Il faut d’abord désigner une ancre dans une page, un endroit où l’on va pouvoir « atterrir ». Le point d’ancrage est forcément sur un élément HTML et se fait en donnant un nom d’ancre avec l’attribut id, par exemple :

<h1 id="titre">Titre</h1>
<p id="para_intro">bla bla...<p>

Nous verrons que cet identifiant (« id ») doit être unique dans une page et qu’il servira dans les feuilles de styles.

Utiliser l’ancre

Ensuite, vous pouvez autant de fois que vous le souhaitez pointer vers cet ancre dans une URL en ajoutant son nom à la fin de l’URL précédé de # :

<a href="#titre">Pointe vers titre dans la même page<a>
<a href="/cvg.html#article4">Pointer vers le quatrième article des CGV dans la page cgv.html</a>

Lien par une image

Les liens avec du texte c’est sympa, mais on aimerait aussi pouvoir cliquer sur une image pour renvoyer vers une autre page. Pourquoi ne pas cliquer sur n’importe quel élément visible ?

Pour l’image, le principe est simple, vous placez votre image à la place du texte, dans la balise <a>. Voici un exemple pour donner accès au moteur de recherche DuckDuckGo par une image cliquable :

<a href="https://duckduckgo.com">
   <img src="https://duckduckgo.com/assets/logo_homepage.normal.v107.png"/>
</a>

En fait, <a> est une des rares balises pouvant contenir pratiquement n’importe quel élément (ou suite d’éléments), de sorte qu’on peut associer un lien à un titre <h1>, un paragraphe <p>, un texte en gras avec <strong>, etc.

Dernier point important, comme nous l’expliquerons en détail au chapitre sur les CSS, <a> de « caractère » qui s’insère dans le texte sans retour à la ligne, comme <b> ou même <img>. Sauf bien sûr si vous mettez à l’intérieur une balise que j’appelle pour l’instant de « paragraphe » comme <h1>.

A votre avis, <h1><a href="http://google.fr">Google</a></h1> donne-t-il le même résultat que <a href="http://google.fr"><h1>Google</h1></a> ? Si vous n’êtes pas sûr(e), testez !