Liens (hyperlinks)

Créer des liens

Le lien (hyperlink en anglais) est un texte sur lequel on peut cliquer pour se rendre sur une autre page. On peut faire un lien d'une page page1.html vers une page2.html, mais on peut aussi faire un lien vers un autre site (par exemple, http://www.google.com ).

Le liens sont écrits d'une façon différente (par défaut, en bleu et soulignés), et un curseur en forme de main apparaît lorsqu'on pointe dessus.

Pour faire un lien, la balise qu'on utilise est : <a> . Il faut cependant lui ajouter un attribut, href pour indiquer vers quelle page le lien doit conduire.

Par exemple, le code ci-dessous est un lien qui amène vers le site www.facebook.com.

Les liens que nous venons de voir sont appelés liens absolus, car on indique l'adresse complète (URL). Nous allons maintenant voir que l'on peut écrire les liens d'une façon un peu différente, ce qui va nous être utile pour faire des liens entre les pages de notre site.

Créer des liens vers d'autres pages de son site

Au moment de la création du site, celui-ci n'a pas encore « d'adresse web » qui commence par http:// comme la plupart des sites. Cela ne vous empêchera pas de travailler, quand même, car on peut accéder n'importe quel fichier (page) de notre site, en utilisant son adresse relative.

Dans cet exemple, le fichier qu'on veut ouvrir en cliquant le lien, emoji-5.png, se trouve dans le dossier images qui est un niveau "plus bas" que le fichier liens.html où ce lien apparaît.

Dans Visual Studio Code, vous pouvez facilement trouver l'addresse relative du fichier que vous voulez mettre dans l'attribut href, en faisant clique droite avec la souris sur le fichier en question et choisissant "Copy relative path".

Si votre fichier cible est placé dans un dossier qui se trouve « plus haut » dans l'arborescence, il faut écrire deux points, comme ceci :

Dans l'exemple ci-haut, le code se trouve dans le fichier test-liens.html qui fait partie du dossier images. Le fichier liens.html qu'on veut ouvrir est au même niveau que le dossier images, donc, un niveau "plus haut" que test-liens.html. Voilà pourquoi, on met les deux points: pour dire qu'il faut "monter" un niveau pour accéder au fichier liens.html.

Voilà comment utiliser l'adresse relative quand le fichier qu'on veut ouvrir se trouve un niveau plus haut, au même niveau ou un niveau plus bas que le fichier où on écrit le code.

Créer des liens vers des ancres

Une ancre représente un point de repère que vous pouvez mettre dans vos pages HTML lorsqu'elles sont très longues. Il peut être utile de faire des liens qui amènent le lecteur directement à la partie qui l'intéresse.

Pour créer une ancre, il suffit de rajouter l'attribut id à n'importe quelle balise qui va servir de repère. Cet attribut va donner un nom à l'ancre qui nous servira ensuite pour faire un lien vers cette ancre. Par exemple :

Le liens qui va aller à cet endroit va ressembler à cela:

Créer des liens vers des ancres situées dans d'autres page

L'idée, c'est de faire un lien qui ouvre une autre page ET qui amène directement à une ancre située plus bas sur cette page. Pour le faire, il suffit de taper le nom de la page, suivi d'un dièse ( # ), suivi du nom de l'ancre.

Par exemple : <a href="ancres.html#rollers">

Des attributs utiles

<a href="google.com" target="_blanc"> : cet attribut dit au navigateur d'ouvrir la page dans une nouvelle fenêtre.
<a href="google.com" title="Ce lien ouvrira le site Google"> : l'attribut title affiche une bulle explicative lorsqu'on pointe sur le lien.

Sachez aussi qu'on peut utiliser la balise <a> quand on veut permettre que le visiteur télécharge un fichier. Il suffit que celui-ci soit de type différent de .html (et certains d'autres types spécifiques pour le web) ou images.

Par exemple, <a href="SANKARAN.doc">Télécharger le fichier</a>