À 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 URL absolu et un URL relatif.
É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" où en vaut pour English.
Un élément peut contenir un ou plusieurs attributs. En XHTML, chaque attribut doit être associé à une valeur mise entre quotes. 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 URL (Universal Resource Locator ). 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 URL 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 :
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.
Créez un fichier que vous nommerez a.html. Copiez-y le code suivant et enregistrez-le :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta 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 URL.
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.
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 9 du présent cours et positionner le contenu de la page de façon à ce que le titre de la section 9.2 soit en haut de l'écran. Lien vers la section 9.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 9.2. Voici le code dont je me suis servi :
<a id="sect9-2"></a>J'ai nommé mon ancre "sect9-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="#sect9-2">Lien vers la section 9.2</a>L'URI indique que le lien va pointer vers une ancre (#sect9-2) située dans un fichier (la page en cours) 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'URL. Par exemple, #Sect-9.2 n'aurait pas fonctionné.
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 URL absolu.
Vous savez maintenant ce qu'est un URL 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.