Introduction

Maintenant, que nous savons comment mettre en forme du texte, nous pouvons améliorer notre site internet et nos articles en mettant des hyperliens vers d'autres pages de notre blog, ou d'autres sites.

Vocabulaire

Les liens : en informatique, un lien est appelé un hyperlien ou encore un lien hypertexte. En anglais : « Hypertext ».

Les liens hypertextes

Introduction

Les liens font partie intégrante du web. Il n'y a pas si longtemps que cela, les moteurs de recherche et les média-sociaux n'existaient pas, et on « voyageait » de liens en liens, d'un site à un autre. Chaque propriétaire de sites mettait en lien les sites d'amis, ou des articles qu'ils appréciaient. On dit de ces liens qu'ils sont des « liens externes ». En fait, les liens hypertextes sont le fondement même du web (Le H de HTML signifie Hypertext -> texte contenant des liens vers d'autres textes). 

Un site internet ressemblait à peu près à cela au niveau de l'esthétisme : Folklore.org: The Original Macintosh

C'était avant la généralisation du CSS (_Cascading Style Sheets_).

J'apprécie tout particulièrement les liens, car ils permettent de passer outre les moteurs de recherche comme Google. C'est vous qui décidez de l'importance du contenu d'un autre site et non un algorithme.
Si vos liens sont pertinents, votre site aura d'autant plus d'intérêt pour vos lecteurs, et ce n'est pas anodin.

Les liens sont essentiels, encore maintenant, ne serait-ce que pour diriger vos lecteurs vers d'autres pages de votre site ou blog. On appelle ses liens des « liens internes ». Cela va augmenter le temps qu'un visiteur passera sur votre site, vous permettra d'avoir plus de pages vues et donc d'augmenter votre visibilité sur les moteurs de recherche. Si votre site est monétisé, cela vous permettra de gagner davantage d'argent. Mais attention, trop de liens tuent leur efficacité. En effet, si, sur une page, vous faites plusieurs liens vers une même page ou un site, vous allez être déprécié par les moteurs de recherche. Comme toujours, tout est une question « de juste-milieu ».

Il y a un autre type d'hyperlien : celui qui fait un lien dans un même article, ou un lien vers une partie d'un autre site. C'est principalement des liens vers des titres, des paragraphes ou des vidéos.

La syntaxe des liens en HTML

On va utiliser la balise « a » qui entoure le texte que le visiteur verra et sur lequel il va pouvoir cliquer. Cette balise possède l'attribut « href » contenant l'adresse Comprendre l'URL vers laquelle le visiteur va être dirigé. On appelle « cible » le contenu de « href » et ancre le texte entre la balise ouvrante « a » et sa balise fermante.

<p>Voici un lien menant vers l'un de mes articles sur <a href="https://eridiane.fr/php">le PHP</a></p>

Dans cet exemple, « https://eridiane.fr/php » et la cible, « le PHP » est l'ancre.

On peut ajouter un attribut pour mettre une info-bulle contenant un texte de votre choix. Cette info-bulle se révélera au survol de la souris sur le lien. Pour cela, on va utiliser l'attribut « title » : 

<p>Voici un lien menant vers l'un de mes articles sur <a href="https://eridiane.fr/php" title="Un article sur le PHP">Le PHP</a> </p>


L'info-bulle ne peut pas être modifiée en CSS, et c'est bien dommage, mais il existe des moyens de contourner ce problème. On peut, en effet, ajouter un effet au survol, avec une classe. Nous verrons les classes plus tard, mais voici un exemple de ce que l'on peut faire : 
Créer une info-bulle en HTML et CSS

Les URL absolues et relatives

Un « href » peut contenir une URL classique. On dit qu'il possède une valeur absolue. Mais lorsqu'il s'agit de lien vers vos propres pages ou articles de votre blog, vous pouvez utiliser ce que l'on appelle des liens relatifs.

Voici un exemple d'une URL absolue : 

https://eridiane.fr/php

Et cette fois-ci, d'une URL relative : 

/pages/about

<a href="/pages/about">À propos</a>

Les URL relatives sont plus courtes et seront toujours fonctionnelles même si vous changez de nom de domaine. 

Problème de dossiers

Les liens relatifs pointent normalement vers un fichier placé dans le même dossier ou sous-dossier de la source. 
Que faire si nous voulons mettre des liens vers des dossiers qui se trouvent plus hauts ou dans une autre branche dans la hiérarchie des fichiers ?
Et bien, c'est possible en rajoutant `../` au début de l'URL relative.
Pour que vous puissiez bien comprendre, j'ai ouvert un dépôt Gitlab avec une hiérarchie de fichiers et les liens URL relatifs équivalents.

Les liens internes dans un article

Parfois, nous voulons faire un sommaire d'un article un peu long ou faire référence à un autre paragraphe dans votre article voire même un paragraphe sur une autre page ou sur un autre site. 

Pour y arriver, il faut deux choses :
- un attribut `id` qui va référencer le titre ou le paragraphe ;
- une URL qui comporte un fragment pointant vers l'endroit souhaité.

Qu'est-ce qu'une id ?

L'attribut `id`  permet de donner un identifiant à une balise. Chaque `id` doit avoir une valeur unique dans la page, c'est important. 

Voici comment il s'écrit :

À l'endroit où vous souhaitez placer l'ancre :

<p id="para3">Voici le dernier paragraphe.</p>

Dans ce bout de code, nous indiquons l'`id` « para3 ». Il marque ce paragraphe.

À l'endroit où vous souhaitez faire le lien : 

<a href="#para3">Allez au dernier paragraphe.</a>

Ici, nous disons au HTML d'aller à l'`id` « para3 » grâce au symbole dièse.

Si vous souhaitez faire un lien vers un passage, un titre en particulier en mettant le lien complet : 

<a href="https://darktable.fr/quest-ce-que-darktable/#ce-que-darktable-ne-fait-pas">Le passage d'un article sur Darktable</a>

Voilà, nous en avons fini avec les liens hypertextes. Dans un prochain article, nous verrons comment mettre des images et des vidéos au sein même de nos articles.