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 écologique<br/>

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

Tester l'exemple en ligne

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 :

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>

Tester l'exemple en ligne

Exercice

Créez un fichier HTML contenant deux liens absolus redirigenant vers https://lucidar.me. Le premier est un lien normal, le second s'ouvre dans un nouvel onglet.

Voici le résultat excompté:

Faire l'exercice en ligne

Solution

Quiz

Cochez le(les) lien(s) absolu(s) :

https://www.google.com/

https://lucidar.me/fr/web-dev-class/learn-web-dev/

/fr/web-dev-class/learn-web-dev/

/wiki/Questionnaire_choix_multiples

Vérifier

Dans un lien relatif, le chemin ...

est relatif à la position actuelle.

ne peut pointer que sur une autre page du même site.

est mentionné en intégralité

commence souvent par http:// ou https://

Vérifier

Quelle syntaxe permet de créer un lien vers Wikipedia ?

Vérifier

Quelle syntaxe permet d'ouvrir un lien dans un nouvel onglet ?

target="blank"

target="_blank"

target="new"

target="_new"

Vérifier

Cours 1.5 Sommaire Cours 1.7

Voir aussi

Dernière mise à jour : 23/05/2021