Les liens

Les liens hypertextes ou hyperliens sont la pierre angulaire du langage HTML et XHTML. Ils permettent d'insérer des liens à l'intérieur d'un document vers une ressource externe ou interne (d'autres pages, sites, documents, images, adresse de courriel, etc).

On utilise la balise <a> autour d'un texte ou d'une image. Par défaut, le texte lié (l'hypertexte) est habituellement souligné en bleu et les images ont une bordure bleue de 1 pixel. On peut toutefois utiliser le CSS pour modifier l'apparence par défaut des hyperliens ou des images.

On peut diviser les liens dans des pages XHTML en 3 catégories: liens absolus, liens relatifs et liens internes.

Les liens absolus

On dit qu'un lien est absolu lorsqu'il ne mène qu'à une seule ressource ou document. En comparaison, une adresse postale avec le numéro de porte, la rue, la ville, le code postal, la province et le pays est une adresse absolue. En effet, je peux envoyer ma lettre à partir de n'importe quel endroit sur terre et elle devrait atteindre la même destination (en théorie). Les liens absolus peuvent ouvrir des pages Web, des images, des fichiers multimédias ou être liés à des serveurs FTP, des adresses de courriels, etc.

Il existe plusieurs formes d'adresses absolues, voici quelques exemples:

Page Web

<a href="http://www.google.com/">Site de google</a>

<a href="/doc/tutxhtml08>Tutoriel XHTML sur les liens</a>

Serveur FTP

<a href="ftp://ftp.mozilla.org>Serveur FTP de Mozilla</a>

Courriel

<a href="mailto:yansanmo@iquebec.com>Envoyer un courriel à yansanmo@iquebec.com</a>

IRC

<a href="irc://irc.server.org/nomCanal>Clavarder sur #nomCanal</a>

Les liens relatifs

Les liens relatifs sont des bouts d'adresse non complets qui se réfère à un endroit précis, une adresse de référence. Ils sont relatifs à la page (ou répertoire) en cours, par exemple. Dans la vraie vie, on pourrait comparer les liens relatifs à des indications d'un objet par rapport à un autre (à droite de moi, à gauche de lui, en haut de la première rue, en bas de la côte, à 10 mètres de l'intersection). Il faut donc connaître l'adresse relative et l'adresse de référence pour être capable de former une adresse de destination réelle et complète.

Certains codes permettent d'indiquer des "directives" à une adresse relative.

/ (barre oblique)

Une adresse commençant par une barre oblique / est relative au nom de domaine. Par exemple, si je suis sur la page http://www.nomdedomaine.com/chemin/long/et/profond/index.htm et que j'utilise une adresse relative /logo.jpg dans ma page alors l'adresse complète sera: nom de domaine + adresse relative = http://www.nomdedomaine.com/logo.jpg.

../

Les ../ permettent de reculer d'un répertoire d'après la position en cours. Exemple: http://www.nomdedomaine.com/rep1/rep2/rep3/rep4/index.htm + ../images.png = http://www.nomdedomaine.com/rep1/rep2/rep3/images.jpg. Avec un ../, je recule de 1 (donc j'enlève rep4). Avec deux ../../, je recule de 2 (donc j'enlève rep3 et rep4). On ne peut pas remonter plus loin que le nom de domaine. Ainsi, http://www.nomdedomaine.com/ + ../pages.htm formera une adresse invalide (http://page.htm).

Exemple d'utilisation (sans base) pour la page http://www.ndd.com/section/sport/index.htm

Ex. 1.1: lien relatif au nom de domaine, utilisation de /
  <a href="/test/art/index.htm">Section sur les arts</a>
sera traduit par le navigateur en http://www.ndd.com/test/art/index.htm

Ex. 1.2: lien relatif au répertoire en cours
  <a href="page2.htm">Page 2</a>
sera encore traduit par le navigateur en http://www.ndd.com/section/sport/page2.htm

Ex. 1.3: lien relatif au répertoire en cours, reculer de 1 niveau
  <a href="../art/index.htm">Section sur les arts</a>
sera encore traduit par le navigateur en http://www.ndd.com/section/art/index.htm
 
Ex. 1.4: chemin d'une image relative au répertoire en cours, reculer de 2 niveaux
  <img src="../../logodusite.png" alt="logo du site" />
sera traduit par le navigateur en http://www.ndd.com/logodusite.png

L'adresse relative est habituellement utilisée en relation avec l'adresse du document en cours. Ce n'est toutefois pas le cas tout le temps. En effet, on peut à l'aide de la balise base modifier l'adresse de référence pour un document en entier.

Exemple d'utilisation (avec une base) pour la page http://www.ndd.com/section/sport/index.htm

<head>
 <base href="http://www.autresite.org/rep1/rep2/" />
</head>
<body>

Ex. 2.1: lien relatif à l'adresse de référence modifiée, utilisation de /
  <a href="/test/art/index.htm">Section sur les arts</a>
sera traduit par le navigateur en http://www.autresite.org/test/art/index.htm

Ex. 2.2: lien relatif à l'adresse de référence modifiée
  <a href="page2.htm">Page 2</a>
sera encore traduit par le navigateur en http://www.autresite.org/rep1/rep2/page2.htm

Ex. 2.3: lien relatif à l'adresse de référence modifiée, reculer de 1 niveau
  <a href="../art/index.htm">Section sur les arts</a>
sera encore traduit par le navigateur en http://www.autresite.org/rep1/art/index.htm
 
Ex. 2.4: chemin d'une image relative à l'adresse de référence modifiée, reculer de 2 niveaux
  <img src="../../logodusite.png" alt="logo du site" />
sera traduit par le navigateur en http://www.autresite.org/logodusite.png

</body>

Les liens internes

Ces liens permettent une navigation dans une même page XHTML. On les compare souvent à des notes de fin de page. Ainsi, on peut aller au début, à la fin ou à un endroit spécifique. Il s'agit de placer un identifiant sur une balise avec l'attribut id. Voici une balise h1 identifié avec la chaîne montitre: <h1 id="montitre">Titre Principal</h1>. Pour faire un lien interne vers une référence, on doit utiliser le # suivi de l'identifiant. Par exemple, pour faire un lien vers ma balise h1, on dois écrire <a href="#montitre">Lien vers mon titre principal</a>.

L'utilisation des adresses

Les adresses ou URL peuvent être utilisés dans beaucoup de balises différentes pour inclure ou lier des ressources externes et internes.

Voici une liste de balises qui utilisent des URL.

a href="ressource.xhtml"

a (pour anchor/ancre) permet de créer un lien à l'aide d'un texte ou d'une image vers un autre page ou ressource.

area coords="1,2,3,4" href="ressource.xhtml"

area (aire) permet de créer un lien pour une région spécifique d'une images (un rectangle, cercle ou polygone).

base href=""

base permet de modifier l'adresse de référence des liens relatifs suivants cette balise.

form action="script.php"

form (formulaire) permet de soumettre les données d'un formulaire à un script serveur.

iframe src="autredocument.xhtml"

iframe (cadre interne) permet d'insérer un document (page xhtml habituellement) à l'intérieur du document en cours.

img src="images.png"

img (image) permet d'insérer une image dans le document en cours

link href="ressource.ext"

link permet de lier un document à la page en cours ou d'inclure une feuille de style par exemple.

object data="objet.ext"

object permet d'insérer un document multimédia (page Web, images, son, vidéo, etc.)

script src="javascript.js"

script permet d'utiliser un script écrit dans un fichier.

Recommandations

• Ne pas utiliser de caractères spéciaux dans les adresses. Aucun accents ou espaces.
• Toujours écrire ces liens en minuscules. Certains serveurs différencient les majuscules des minuscules et les débutants peuvent avoir de la difficulté à trouver l'erreur.
• Ne pas utiliser des liens qui commencent par un point d'interrogation "?". Il existe un problème avec les différents standards et RFCs. Les navigateurs n'interprêtent pas tous de la même façon les URis commençant par un ?.
• Ne pas utiliser de liens qui commencent par javascript:. Il est préférable d'écrire son code javascript dans les attributs-évènements comme onclick="". Voici une technique pour ouvrir un popup par exemple: <a href="page.php" onclick="window.open(this.href);return false;">Ouvrir une page</a>