FriconiX
Des milliers de pictogrammes gratuits dessinés avec amour !

Cours 1.6. Les liens hypertextes en HTML

Syntaxe

HTML signifie Hypertext Markup Language, langage hypertexte à marqueurs ou balises. « Un système hypertexte est un système contenant des documents liés entre eux par des hyperliens permettant de passer automatiquement (en pratique grâce à l'informatique) du document consulté à un autre document lié ». Il est donc possible de créer des liens entre les pages d’un même site ou vers des sites extérieurs en utilisant la balise <a> selon la syntaxe suivante :

<a href="http://adresse_du_lien.html">Texte du lien</a>

Les liens absolus

Les liens absolus sont des liens où le chemin est mentionné en intégralité et commence souvent, mais pas toujours, par http:// ou https://. Voici un exemple de page contenant des liens absolus :

<h1>Les moteurs de recherche</H1>
<a href="https://www.bing.com/">Bing</a> : le moteur de recherche de Microsoft<br/>
<a href="https://www.google.com/">Google</a> : le moteur de recherche le plus utilisé<br/>
<a href="https://www.qwant.com/">Qwant</a> : le moteur de recherche français<br/>
<a href="https://www.ecosia.org/">Ecosia </a> Le moteur de recherche français<br/>

Le code précédent affiche des liens vers les différents moteurs de recherche :

Inutile de préciser qu'en cliquant sur les textes soulignés en bleus on accède à de nouvelles pages. Les liens forment le fondement des pages HTML. Ils permettent à l’utilisateur de visiter d’autres sites sur des thèmes similaires. Les liens permettent aussi aux moteurs de recherche de référencer de nouvelles pages et d’évaluer leur pertinence. Pour ces raisons, il est important, lorsque le contenu de la page s’y prête, d'ajouter quelques liens vers des sites apportant un complément d’information.

Les liens relatifs

Lorsque la cible du lien est sur le même site (ou domaine) il est possible de spécifier l’adresse du nouveau lien en relatif, c'est-à-dire son chemin depuis la page courante. Prenons l’exemple du site suivant contenant un répertoire racine et deux sous-répertoires (folder1 et folder2). Chacun de ses répertoires contient un ou plusieurs fichiers HTML :

Arborescence de fichiers pour les liens relatifs

Pour créer un lien depuis index.html vers image.jpg :

<a href="image.jpg">Texte du lien</a>

Pour créer un lien depuis index.html vers page1.html :

<a href="folder1/page1.html">Texte du lien</a>

Pour créer un lien depuis page2.html vers index.html :

<a href="../index.html">Texte du lien</a>

Les deux points successifs ../ signifient que l’on remonte d’un répertoire dans l’arborescence.

Lien dans un nouvel onglet

En ajoutant, l'attribut target à la balise <a>, il est possible de spécifier où le lien sera ouvert. L'option la plus utilisée est l'ouverture du lien dans un nouvel onglet avec la valeur _blank :

<a href="https://www.example.com" target="_blank">Lien dans un nouvel onglet.</a>

Voir aussi


Dernière mise à jour : 06/11/2019