Hypertexte : une question de liens

Photo par JJ Ying publiée sur Unsplash

Hypertexte et hyperlien

Au cœur du web, il y a cette capacité de sauter d'une page à l'autre. Ou d'une partie d'une page à une autre. Par exemple, à partir de cette page, vous pouvez vous rendre sur la page wikipedia consacrée à Tim BERNERS-LEE.

C'est dans les années 60 que le sociologue Ted NELSON invente le terme d'hypertexte, qui s'intéresse à l'époque à un domaine littéraire. Tim BERNERS-LEE s'est appuyé sur ces travaux pour en faire le concept centrale du web.

Un hypertexte est un document ou un ensemble de documents informatiques qui permet de passer d'une information à l'autre grâce à un système de renvois appelés hyperliens, ou liens hypertextes. Ceux-ci prennent la plupart du temps la forme d'un texte souligné en bleu, bien qu'ils puissent également être placés sur une photo, une image, un bouton, etc. Vous avez un exemple ci dessus avec le lien vers la page wikipedia de Tim BERNERS-LEE.

Le H et le T dans HTML sont donc les initiales de Hyper Text. La signification de HTML est donc Hyper Text Markup Language, soit en français le Langages de balises pour l'hypertexte.

La balise du lien

Pour créer un hyperlien en html, la balise est a. C'est l'intiale de anchoren anglais, qui signifie ancre en français. C'est la balise qui ancre notre page sur une autre page. Mais on voit bien qu'il ne suffit pas d'avoir la balise toute seule. En effet, si j'écris :

<a>la page wikipedia consacrée à Tim BERNERS-LEE.</a>

On voit tout de suite qu'il va y avoir un problème : c'est un lien que j'ai créé sur ma page HTML, mais un lien vers quoi ? Quelle sera l'adresse du site où ce lien me conduira ?

Les attributs

Certaines balises HTML doivent avoir, en plus de la balise, des informations particulières sur la balise. Dans le cas d'un lien hypertexte, il faut avoir l'adresse d'arrivée. Cette adresse est la référence du lien. On appelle cela l'hyperréférence, et on va donner cette information à l'intérieur de la balise ouvrante. Je vais donc indiquer dans mon fichier HTML que la destination du lien est https://fr.wikipedia.org/wiki/Tim_Berners-Lee :

<a href="https://fr.wikipedia.org/wiki/Tim_Berners-Lee">la page wikipedia consacrée à Tim BERNERS-LEE.</a>

• href est le nom de l'attribut
• https://fr.wikipedia.org/wiki/Tim_Berners-Lee est la valeur de l'attribut

Attributs multiples

De nombreuses balises HTML peuvent avoir des attributs multiples. Par exemple, pour la balise d'ancre, il y a l'attribut href qui est indispensable, mais on peut aussi utiliser l'attribut target (qui signifie cible en anglais), qui indique le comportement du lien. Voici quelques une des valeurs possibles :

• _self : le contexte de navigation actuel (par défaut)
• _blank : va ouvrir le lien dans un nouvel onglet du navigateur
• _top : si l'on est dans une sous fenêtre, va ouvrir le lien dans la fenêtre

Aussi, si je veux, comme sur cette page, que le lien vers la page wikipedia de Tim BERNERS-LEE s'ouvre dans un nouvel onglet sans remplacer la page actuelle, mon code sera :

<a href="https://fr.wikipedia.org/wiki/Tim_Berners-Lee" target="_blank">la page wikipedia consacrée à Tim BERNERS-LEE.</a>

À vous !

Vous allez maintenant faire vous même des liens dans une page web. Ouvrez l'éditeur en cliquant sur le bouton suivant et suivez les consignes.

Le lien interne

On peut même créer des liens qui renvoient non pas vers une autre page web mais vers une autre partie de la même page web. Pour cela , il faut procéder en deux étapes :

• En premier lieu, il faut créer la destination. Cela se fait en donnant un identifiant à un élément HTML grâce à l'attribut id. ATTENTION ! Cet identifiant doit être unique dans la page.
• Ensuite, on crée le lien en mettant comme hyperréférence la valeur de cet attribut id précédé d'un caractère #.

Vous pouvez essayer un exemple ci dessous. Regardez bien le code avant de l'exécuter.

Si vous voulez tout savoir sur les liens et la balise a, y compris comment créer des liens pour utiliser des adresses de courrier électronique et des numéros de téléphone, vous pouvez vous référer à la documentation de la fondation mozilla

<a href="https://fr.wikipedia.org/wiki/Tim_Berners-Lee" target="_blank">la page wikipedia consacrée à Tim BERNERS-LEE.</a>

Passons à quelques balises structurantes.