alainericgauthier.com

construire une présence sur le web

Apprendre HTML5 : les hyperliens

Web

Selon un article de 2013, n'importe quelle page web serait au plus à 19 clics de n'importe quelle autre page.

Les résultats de cette recherche ont été présentés sur le web assez souvent et ici mais l'article original se trouve ici.

Petite note, vous n'avez pas à payer pour lire toute l'étude, les conclusions principales sont dans l'abstract. Mais peu importe si cela est encore vrai aujourd'hui, l'idée est que l'intérêt du web est d'avoir un très grand nombre de pages liées entres elles et que ces liens soient pertinents.

Sur le site du CERN, vous pouvez lire un article sur la naissance du web; vous verrez que les hyperliens sont au coeur de ce qu'est HTML.

Mais trève de bavardage sur la théorie des réseaux et l'histoire du web, vous êtes ici pour faire des pages web, n'est-ce pas?

Commençons par des exemples concrets. Dans cet article, vous trouverez des liens vers des pages qui m'ont aidé à rédiger cet article. Vers la fin de l'article, j'ajoute, à titre d'exemple, le code de certains de ces hyperliens.

De quoi est fait un hyperlien?

Nous avons déjà vu dans l'article sur les éléments de niveau textuel comment est fait un hyperlien. Pour résumer, voici un hyperlien avec le strict minimum pour qu'il pointe vers une autre page web.

<a href="http://info.cern.ch/hypertext/WWW/TheProject.html">Le premier site du web</a>

Vous aurez compris qu'un bout de texte est balisé par l'élément <a> et que celui-ci possède un attribut href et que la valeur de cet attribut est l'adresse du premier site du web. Une telle adresse se nomme URL.

URL

Et pour parler des hyperliens, il faut parler des URL.

  • Uniform
  • Resource
  • Locator

Si vous n'en avez pas assez de la théorie et que vous voulez creuser un peu plus ce qu'est un URL, je ne peux que vous recommander la page wikipedia pour commencer et si vous voulez y aller vraiment à fond, lisez le Living Standard. Si jamais vous en revenez sain d'esprit, je continue avec mes exemples.

Les hyperliens absolus et relatifs

Jusqu'à maintenant, je ne vous ai donné que des exemple d'hyperliens absolus. Ces liens ont la syntaxe suivante :

protocole://domaine/chemin

Le protocole indique au navigateur comment l'information sera transférée du serveur au client. Les plus fréquents sur le web sont https et http. Le domaine c'est le nom du site web. Par exemple, le domaine de cette page est alainericgauthier.com. Le chemin (path en anglais), décrit l'emplacement du document.

Note : selon le type de serveur qui sert les pages web au client (un navigateur), le document peut contenir une extension (le plus souvent .html mais parfois .htm) ou rien du tout. Mais ceci est un détail technique qui dépasse le cadre de cette série.

Les hyperliens relatif permettent de naviguer vers un autre page à partir de la page actuelle. Pour l'utilisateur, cela ne fait pas vraiment de différence, cliquer sur un lien absolu ou un lien relatif mènera vers une autre page. Mais pour le navigateur (et le programmeur), le processus est différent.

Quand vous créez un site web, vos documents HTML peuvent être dans le même dossier, dans un sous-dossier du dossier actuel, ou dans un dossier au-dessus du dossier actuel. Les liens relatifs vous permettent d'accéder à ces trois emplacement.

Des exemple vous aideront à mieux comprendre ce que je veux dire.

Disons que sur le domaine exemple.com, vous avez deux documents html :

index.html
about.html

Si vous êtes dans le document index.html et que vous voulez accéder au document about.html. En lien absolus, voici comment accéder à chacun des documents :

Liens absolus et relatifs pour 2 documents
Document Lien absolu Lien relatif
index.html http://exemple.com/index.html index.html
about.html http://exemple.com/about.html about.html

Ce qui veut dire que pour créer un lien vers about.html dans index.html, vous pouvez écrire le code suivant :

<a href="about.html">À propos</a>.

Notez que le code suivant fonctionnerait aussi :

<a href="http://exemple.com/about.html">À propos</a>

Pourquoi utiliser des liens relatifs?

Puisque les deux liens permettent de faire exactement la même chose pourquoi devrait-on utiliser des liens relatifs quand les liens absolus font l'affaire?

La raison principale est que votre site pourrait déménager. Par exemple, si vous travaillez sur un serveur local, il se pourrait que celui-ci ait un nom de domaine différent. Il se pourrait aussi qu'un jour, vous décidiez de migrer votre site vers un nouveau domaine. Par exemple, vous pourriez passer de exemple.com à autre.com.

Si vous avez des liens absolus, vous devrez tous les ré-écrire dans chacun de vos documents. Si vous n'avez que deux document, cela n'est pas très long mais un site web respectable aura d'une vingtaine à plusieurs centaines de pages. Vous n'avez pas envie de vous taper la ré-écriture de milliers de liens. Et c'est la beauté des liens relatifs, tant que les documents HTML restent au même endroit dans l'architecture des dossiers, vous n'avez rien à modifier.

Naviguer dans la hiérarchie

Parlant d'architecture, le lien relatif que vous avez vu ne vous permet que d'accéder aux documents qui sont dans le même dossier que celui dans lequel vous êtes présentement.

Disons que vous avez un document index.html et que vous avez un dossier produits qui contient un document nommé widgets.html. Et disons que vous êtes encore sur le domaine exemple.com. Le tableau suivant vous montre le lien absolu et le lien relatif.

Liens absolus et relatifs pour 2 documents à un niveau différent dans la hiérarchie
Document Lien absolu Lien relatif
index.html http://exemple.com/index.html index.html
widgets.html http://exemple.com/produits/widgets.html /produits/widgets.html

Vous aurez donc remarqué que le lien relatif n'est composé que de la partie chemin d'une URL comme je l'ai montré au début de cet article.

Disons que l'architecture de votre site web se complique un peu et que vous avez maintenant les mêmes documents que dans l'exemple précédent mais vous avez aussi un deuxième dossier nommé contact.

Dans le dossier racine de votre serveur (le dossier le plus haut dans la hiérarchie) vous aurez donc deux documents HTML (index.html et about.html) et vous aurez deux dossiers (produits et contact).

Disons que vous êtes dans le document widgets.html qui se trouvent dans le dossier produits et que vous voulez créer un hyperliens vers le document president.html qui se trouve dans le dossier contact. Et disons que vous voulez aussi créer un lien vers la page widgets.html quand vous êtes dans la page president.html. Le tableau suivant vous montre le lien absolu et le lien relatif menant vers l'autre document.

Liens absolus et relatif pour 2 documents dans une hiérarchie complexe
À partir de ... Lien absolu Lien relatif
widgets.html http://exemple.com/contact/president.html ../contact/president.html
president.html http://exemple.com/produits/widges.html ../produits/widgets.html

C'est les deux points qui indiquent au navigateur qu'il faut remonter d'un niveau dans la hiérarchie de dossiers.

Mais ça ne s'arrête pas là, si vous voulez remonter de deux dossiers dans la hiérarchie, vous pouvez utiliser les deux points deux fois.

../../index.html

Les liens internes

L'élément <a> nous permet de faire une autre sorte de lien, les liens interne au document. Ceux ne sont pas utilisé très souvent mais si vous avez des documents vraiment longs, ils peuvent devenir utiles.

Dans la vraie vie sur le web, on les utilise souvent dans des pages de foire aux questions par exemple. Pour créer un lien interne, il faut deux choses.

Un hyperlien avec une valeur pour l'attribut html qui comment par un dièse (#). Et il nous faut ensuite la valeur d'un attribut id d'un élément vers lequel nous voulons pointer.

Disons que vous avez un document qui contient au haut de la page une navigation interne et trois sections qui commencent toutes par un titre de niveau 2 <h2>.

Comme vous l'avez vu dans l'article sur les attributs universels, tous les éléments peuvent avoir un attribut id.

Comme un bout de code vaut parfois mille mots, voici donc le code avec des liens internes qui ne fonctionnent pas encore.

<nav>
  <ul>
    <li>Première section</li>
    <li>Deuxième section</li>
    <li>Troisième section</li>
  </ul>
</nav>
<h2>Première section</h2>
<p>Imaginez que ceci est un très looooong paragraphe.</p>
<h2>Deuxième section</h2>
<p>Imaginez que ceci est un très looooong paragraphe.</p>
<h2>Troisième section</h2>
<p>Imaginez que ceci est un très looooong paragraphe.</p>

La première chose à faire est d'ajouter des éléments <a> à l'intérieur des éléments <li>.

<li><a href="">Première section</a></li>
<li><a href="">Deuxième section</a></li>
<li><a href="">Troisième section</a></li>

Nous allons ensuite ajouter des attributs id à chaque éléments <h2> et leur donner une valeur différentes.

<h2 id="un">Première section</h2>
...
<h2 id="deux">Deuxième section</h2>
,,,
<h2 id="trois">Troisième section</h2>
...

Il ne reste plus qu'à créer des liens internes qui fonctionnent dans la navigation. Voici le code final de la page :

<nav>
  <ul>
    <li><a href="#un">Première section</a></li>
    <li><a href="#deux">Deuxième section</a></li>
    <li><a href="#trois">Troisième section</a></li>
  </ul>
</nav>
<h2 id="un">Première section</h2>
<p>Imaginez que ceci est un très looooong paragraphe.</p>
<h2 id="deux">Deuxième section</h2>
<p>Imaginez que ceci est un très looooong paragraphe.</p>
<h2 id="trois">Troisième section</h2>
<p>Imaginez que ceci est un très looooong paragraphe.</p>

Avec ce que vous avez vu jusqu'à maintenant, vous êtes en mesure de créer 80% des pages qui existent sur le web. Mais il reste encore quelques éléments important à voir.

Si vous avez des questions ou des demandes concernant cette série d'articles, n'hésitez pas à me contacter.