US

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 :

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
<HTML>
<HEAD>
    <TITLE>Liens hypertextes</TITLE>
 
<BODY>
    <P>
        <A href="http://www.google.be/fr">Google</A><BR>
        <A href="page4.php">Page précédente</A><BR>
        <A href="#bas">Bas de page</A>
 
    <P align="center">... Suite du document ...
 
    <P><A name="bas">Bas de page</A>
Listing 2.16 Liens hypertextes.
Liens hypertextes
Figure 2.18 Liens hypertextes.

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 !.

1 
<A href="http://www.amazon.fr">Achetez des livres facilement et rapidement !</A>
Listing 2.17 Lien hypertexte externe.

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.

1 
2 
<P><A href="http://www.ukonline.be/programmation/html/index.php">Section HTML</A><BR>
<A href="index.php">Accueil du chapitre 2 du tutoriel</A>
Listing 2.18 Lien hypertexte interne.

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.

Symbole Action
../ Remonter d'un dossier
./ Même dossier
/ Racine du site
Tableau 2.3 Chemins relatifs spéciaux.

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.

Chemins relatifs spéciaux
Figure 2.19 Chemins relatifs spéciaux.

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).

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
<H1>Table des matières</H1>
<P><A href="#section1">Introduction</A><BR>
<A href="#section2">Quelques rappels</A><BR>
<A href="#section2.1">Notions de base</A>
 
<H2><A name="section1">Introduction</A></H2>
    <P>...
<H2><A name="section2">Quelques rappels</A></H2>
    <P>...
<H3><A name="section2.1">Notions de base</A></H3>
    <P>...
Listing 2.19 Une table des matières avec des signets définis avec l'élément A.

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 :

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
<H1>Table des matières</H1>
<P><A href="#section1">Introduction</A><BR>
<A href="#section2">Quelques rappels</A><BR>
<A href="#section2.1">Notions de base</A>
 
<H2 id="section1">Introduction</H2>
    ...
<H2 id="section2">Quelques rappels</H2>
    ...
<H3 id="section2.1">Notions de base</H3>
    ...
Listing 2.20 Une table des matières avec des signets définis avec l'attribut id.

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.

1 
<a href="http://www.allhtml.com" target="_blank">All HTML</a>
Listing 2.21 Attribut target de l'élément A.

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.

État Description
link Lien non visité
vlink Lien visité
alink Lien sélectionné par l'utilisateur
Tableau 2.4 Les différents états d'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.

1 
<BODY link="blue" vlink="purple" alink="red">
Listing 2.22 Personnaliser la couleur des liens.
  • Espace membre
  • Learning Center
  • Les forums
  • Livre d'or
  • Imprimer
  • Boutique
  • Info
  • Règlement
  • Erreur
  • Newsletter

MyPagerank.Net

Firefox 3.6

Browse Happy logo

Open Clip Art Library

Join our Facebook Group

Twitter

Copyright © 2000-2017 UKO. Toute reproduction strictement interdite sans autorisation du webmaster

Valid XHTML 1.1 !
Valid CSS2 !
Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0
ICRA Internet Content Rating Association
Creative Commons License
Site optimisé pour Firefox avec une résolution 1024x768 --- Page chargée en 0.0632889 secondes --- This site uses Thumbshots previews