Lien hypertexte

Un des grands avantages des documents HTML, par rapport à d'autres documents, est qu'il est possible de naviguer aisément entre différentes pages grâce aux liens hypertextes (ou hyperliens) et même au sein d'un même document grâce aux signets. Il s'agit d'ailleurs de la puissance du Web, de ses milliard de documents interconnectés entre eux grâces aux liens hypertextes. Ceux-ci sont représentés par l'élément A. Voici l'exemple qui va nous suivre tout au long de cette section :

Les balises ouvrantes et fermantes sont toutes deux obligatoires pour l'élément A. Il s'agit d'un élément de niveau texte et il est tout à fait interdit d'avoir des liens imbriqués, c'est-à-dire qu'il ne peut y avoir d'élément A entre les deux balises <A> et </A>.

Types de liens

Si on regarde plus attentivement l'exemple du listing 2.16, on peut voir trois types différents de liens. Les deux attributs qui vont nous intéresser ici sont href et name.

Lien externe

Le premier lien qui a été mis dans notre exemple est un lien externe : c'est un lien vers le site de Google belgique. On donne comme valeur à l'attribut href l'adresse du site concerné sous forme d'un URL et le texte se trouvant entre les balises ouvrantes et fermantes sera celui sur lequel l'utilisateur devra cliquer. Il s'agit d'un lien externe car il réfère une ressource extérieure au document, se trouvant sur une autre machine. Voici par exemple comment faire un lien vers Amazon, le texte du lien étant Achetez des livres facilement et rapidement !.

La valeur de l'attribut href est en fait n'importe quelle URL. On en reparle plus en détails à la fin de cette section.

Lien interne

Le deuxième lien de l'exemple permet de revenir à la page précédente du site, c'est un lien externe en ce sens qu'il réfère une ressource sur le même site. La valeur de l'attribut href consiste simplement en le nom de la page, dans notre cas page4.php. Il s'agit d'un chemin relatif : on donne le lien vers la ressource par rapport à la page sur laquelle le lien se trouve. Comme on se trouve actuellement à l'adresse http://www.ukonline.be/programmation/html/tutoriel/chapitre2/page5.php, ça signifie que le lien relatif page4.php réfère en fait la ressource suivante : http://www.ukonline.be/programmation/html/tutoriel/chapitre2/page4.php qui est le chemin absolu correspondant au chemin relatif page4.php et on aurait tout à fait pu l'utiliser comme le montre l'exemple suivant.

De plus, il existe trois chemins relatifs spéciaux qui sont repris dans le tableau suivant. Ceux-ci représentent respectivement le dossier courant, le dossier précédent et le dossier racine du site.

Prenons par exemple la page sur laquelle on se trouve actuellement. En observant son adresse dans la barre du navigateur, on voit qu'elle se trouve dans le dossier chapitre2. Pour retourner sur la page d'accueil de la section HTML, il faut remonter de deux dossiers, ce qui correspond au chemin relatif ../../index.php et donc chemin absolu http://www.ukonline.be/programmation/html/index.php. On peut également directement remonter à la racine du site avec / et donc, le chemin relatif /index.php correspond au chemin absolu http://www.ukonline.be/index.php.

Signets

Le dernier type de lien est un lien vers un signet, c'est-à-dire un autre endroit dans la même page. Un signet est représenté par l'élément A et en utilisant l'attribut name dont la valeur correspond au nom du signet. Ensuite, pour créer un lien vers un signer, on créé simplement un lien interne en donnant comme valeur à l'attribut href le nom du signet précédé du caractère #. Si l'utilisateur clique sur un tel lien, il sera dirigé vers la partie du document signalée par le signet.

Un exemple typique d'utilisation des signets est l'ajout d'une mini table des matières en début de page pour rapidement diriger l'utilisateur vers la bonne partie du texte. L'exemple suivant vous montre un extrait d'un tel document (le document complet se trouve dans les ressources sous le nom anchor.htm).

On défini simplement un signet pour chaque titre du document et on utilise ces signets pour créer des liens vers chacune des parties du document.

Une autre manière un peu plus simple et légère pour créer une table des matières est d'utiliser l'attribut id disponible pour la grande majorité des éléments. Cet attribut défini un identificateur unique pour un élément précis du document (deux éléments ne peuvent avoir la même valeur pour cet attribut au sein d'un même document). On peut ensuite faire un lien vers un élément qui possède un identificateur de la même manière qu'avec les signets. La table des matières modifiée devient donc :

Dans les deux cas, le nom que vous donnez au signet doit être unique dans le document. De plus, ce nom est insensible à la casse, donc il vous est par exemple interdit d'avoir les deux noms suivants : section1 et SECTION1 qui sont considérés comme les mêmes.

Cible

Lorsqu'on clique sur un lien, la ressource liée s'ouvre par défaut dans la même fenêtre que celle qui contient le document avec le lien. On peut vouloir que la ressource liée s'ouvre dans une nouvelle fenêtre par exemple. L'endroit où la ressource doit s'ouvrir est appelé cible du lien et peut être modifié avec l'attribut target. Il y a différentes valeurs possibles pour cet attribut, mais seule une nous intéresse pour le moment : _blank permet d'ouvrir le lien dans une nouvelle fenêtre. Nous verrons les autres valeurs à la section sur les cadres.

Style

Dans les navigateurs visuels (Firefox, Opéra, Internet Explorer, ...), il est possible de personnaliser la couleur des liens selon leur état, ce qui n'est pas possible pour les navigateurs en mode texte (Lynx, ...). Le tableau suivant reprend les différents états que peut prendre un lien.

Il est possible de définir une couleur différente pour les liens selon l'état dans lequel ils se trouvent en utilisant les attributs link, alink et vlink de l'élément BODY. L'exemple suivant montre comment mettre les liens non visités en bleu, les liens visités en pourpre et les liens sélectionnés en rouge.