9. Créer des liens hypertextes

Sommaire

À la fin de ce chapitre, vous saurez créer un lien vers une autre page ou vers un point précis à l'intérieur d'un document. Vous aurez également appris la différence entre un URI absolu et un URI relatif.

9.1 Faire un lien vers une page éloignée

Éditez le fichier test.html et ajoutez-y le code suivant :

<p>Utilisez le <a href="http://validator.w3.org/index.html" 
  hreflang="en">Validateur HTML du W3C</a> pour vérifier le code HTML
  de vos pages Web. C'est bon et c'est gratuit.</p>

Vous venez de créer un paragraphe assorti d'un lien vers le Validateur HTML du W3C. Convenons d'appeler « cible » le fichier vers lequel pointe un lien.

L'élément a vaut pour anchor, qui signifie « ancre ». Il sert à créer des liens hypertextes. L'attribut href sert à indiquer le chemin vers la cible. Comme le contenu du fichier cible est en anglais et qu'il est sage de toujours signaler un changement de langue, on met hreflang="en"en vaut pour English.

Un élément peut contenir un ou plusieurs attributs. En XHTML, chaque attribut doit être associé à une valeur mise entre guillemets. L'ordre entre les attributs n'a aucune importance.

Le texte compris entre les balises <a> et </a> est celui qui sera signalé comme un lien à vos visiteurs. Sauf avis contraire, il apparaîtra en bleu souligné à l'écran.

Le texte d'un lien doit être suffisamment explicite pour donner une idée du contenu qu'il annonce. Idéalement, il doit même pouvoir être compris hors contexte. Trouvez des mots descriptifs et évitez les formules du genre : « cliquez ici ».

Le chemin vers le fichier cible est indiqué au moyen d'un URI (Universal Resource Identifier). Celui-ci se compose normalement du protocole utilisé (http://), du domaine où se trouve le fichier cible (validator.w3.org), du répertoire précis dans lequel il se trouve (/), suivi du nom du fichier lui-même (index.html).

Lorsqu'un URI ne se termine pas par un nom de fichier, c'est le fichier par défaut qui sera automatiquement utilisé. La plupart du temps, il s'agit du fichier index.html.

Pour créer un lien vers une page Web externe à votre site :

  1. écrivez le code de votre lien en laissant la valeur de l'attribut href vide
  2. rendez vous sur la page où vous voulez faire pointer le lien
  3. copiez l'URI de cette page avec Ctrl+C
  4. retournez au fichier où vous voulez mettre votre lien
  5. collez l'URI entre les guillemets de l'expression href="" avec Ctrl+V

Le copier-coller constitue la méthode la plus sûre pour ne pas faire d'erreur dans la transcription d'un URI. Plus vous avez affaire à un URI long et complexe, plus cette méthode est indiquée.

9.2 Faire un lien vers une page voisine

Créez un fichier que vous nommerez a.html. Copiez-y le code suivant et enregistrez-le :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
lang="fr">
<head> <meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Page A</title> </head> <body> <p>Aller à la page <a href="test.html">test.html</a>.</p> </body> </html>

Vous venez de créer un fichier à l'intérieur duquel se trouve un paragraphe assorti d'un lien pointant vers le fichier test.html.

Puisque le fichier cible se trouve dans le même répertoire que le fichier où se trouve le lien, le navigateur n'a pas de chemin à parcourir avant de pouvoir le retracer. Et c'est pourquoi on a pu se contenter d'écrire "a.html" comme URI.

Si le fichier cible s'était trouvé un répertoire plus haut, on aurait pu se contenter d'écrire "../a.html". S'il s'était trouvé deux répertoires plus haut, "../../a.html". Et ainsi de suite.

Au contraire, s'il s'était trouvé un répertoire plus bas (supposons dans le répertoire « archives »), il aurait fallu écrire "archives/a.html". Et s'il s'était trouvé deux répertoires plus bas (supposons dans le répertoire « 2005 » du répertoire « archives »), il aurait fallu écrire "archives/2005/a.html". Et ainsi de suite.

Bref, lorsqu'on connaît le chemin qui sépare un lien de sa cible, l'indication du trajet à suivre suffit pour que le navigateur s'y retrouve.

9.3 Faire un lien vers une ancre

Il est possible de faire pointer un lien vers un endroit précis à l'intérieur d'un fichier. On dit alors que le lien pointe vers une ancre.

Activez le lien suivant et observez : votre navigateur va se rendre au chapitre 6 du présent cours et positionner le contenu de la page de façon à ce que le titre de la section 6.2 soit en haut de l'écran. Lien vers la section 6.2

Activez le bouton Précédent de votre navigateur pour revenir ici et poursuivre votre lecture après. Si vous aimez les raccourcis clavier, Alt+Flèche gauche devrait avoir le même effet.

Ce genre de lien suppose qu'on a d'abord inséré une ancre à l'endroit voulu. Pour ma part, je l'ai mise juste avant le </h2> du titre de la section 6.2. Voici le code dont je me suis servi :

<a id="sect-6.2"></a>

J'ai nommé mon ancre "sect-6.2" en me servant de l'attribut id, qui vaut pour Identifier, qu'on peut traduire par « identifiant ». Une fois l'ancre en place, je me suis servi du code suivant pour créer le lien :

<a href="page-006.html#sect-6.2">Lien vers la section 6.2</a>

L'URI indique que le lien va pointer vers une ancre (#sect-6.2) située dans un fichier (page-006.html) situé dans le même répertoire que celui où on se trouve (puisqu'il n'y a pas d'autres indications dans l'URI).

Le nom de l'ancre ne doit pas commencer par un chiffre. Et pour que le lien fonctionne, le nom de l'ancre doit être écrit tel quel dans l'URI. Par exemple, #Sect-6.2 n'aurait pas fonctionné.

9.4 URI relatifs et URI absolus

Si vous dites habiter le 3 avenue des Trèfles à Oslo en Norvège, on pourra vous situer depuis n'importe où. Au contraire, si vous dites habiter la 4e maison à droite de la mairie, on ne pourra vous situer que si on connaît d'abord la mairie dont vous parlez.

Ce que vous avez vu ci-dessus vous permet de comprendre que les adresses Web fonctionnent de manière semblable.

Lorsqu'on connaît le chemin qui sépare un lien de sa cible, on peut recourir à un URI qui se contente d'indiquer ce chemin, sans devoir écrire l'adresse de la cible au long. C'est le cas par exemple, lorsque l'URI ressemble à "a.html", à "../a.html" ou à "archives/a.html". On fait alors usage d'un URI relatif.

Au contraire, lorsqu'on ne connaît pas la distance qui sépare un lien de sa cible, on est obligé de recourir à un URI complet. C'est le cas par exemple lorsque l'URI commence par "http://". On fait alors usage d'un URI absolu.

Conclusion

Vous savez maintenant ce qu'est un URI et avez appris à vous servir de l'élément a pour créer des liens. En cours de route, vous avez également fait connaissance avec les attributs href, hreflang et id.

Les liens hypertextes sont au cœur même du Web. Vous êtes maintenant équipé pour créer les vôtres.

À jour le 4 mars 2006