Les hyperliens

Un hyperlien est un ensemble de caractères ou une image sensibles qui, lorsqu'on clique dessus, renvoie soit:

• à un autre endroit de la même page
• à une autre page du même site
• à une page d'un site différent.

Pour transformer un élément d'un page Web en hyperlien, l'opération est double:

1. fixer précisément l'élément qui deviendra sensible au clic de la souris (délimité par les balises <A> et </A>)
2. donner une hyper référence correcte au point de vue syntaxique, mais aussi pointer vers une page ou un marqueur qui existe.

Lien vers un autre site Web

Grâce à un mot, un groupe de mots ou une image, vous pouvez envoyer le visiteur vers un autre site Web.

Il suffit de mettre en référence l'adresse du site en question. Exemple:

S'encodera de la façon suivante:

Lien vers une page d'un autre site Web

Il est possible de faire arriver le visiteur sur une page bien précise d'un autre site Web à condition que vous en connaissiez l'adresse complète (pour cela, il suffit d'afficher cette page dans votre navigateur et d'en copier l'adresse indiquée dans la fenêtre d'adresse).

S'encodera de la façon suivante:

"http://users.skynet.be" est le site, cette adresse seule donnerait accès à la racine du site.

"bd" est un répertoire et "pedagogimage" son sous-répertoire qui permettent d'entrer à l'intérieur de l'arborescence du site.

Aucune page n'est indiquée: arrivé dans le sous répertoire "pedagogimage", ce sera la page par défaut qui s'ouvrira (index.html ou ...).

Lien vers une autre page du même site Web

Tout ce qui concerne les répertoires est valable ici.

Dans votre page Web "intro.html", vous désirez inscrire la phrase

dans laquelle un clic sur le mot "détails" doit permettre d'accéder à la page "plus.html".

Plusieurs cas peuvent se présenter selon l'architecture de votre site (en cas de difficultés, se référer au chapitre "Les répertoires") (remarque: nous travaillerons uniquement en références relatives):

1. Les pages "intro.html" et "plus.html" sont dans le même répertoire (c'est la cas le plus simple). Votre phrase sera alors encodée de la façon suivante:
   
   

   Obtenir plus de <A HREF="plus.html">détails</A>.

   
   La page "plus.html" est "visible" directement puisque dans le même répertoire.
   
   
2. La page "plus.html" est dans le sous-répertoire "Nuances" du répertoire où se trouve la page "intro.html". La syntaxe deviendra
   
   

   Obtenir plus de <A HREF="Nuances/plus.html">détails</A>.

   
   Il faut "descendre" dans le répertoire "Nuances" pour que la page "plus.html" soit "visible".
   
   
3. La page "plus.html" est dans le répertoire parent du répertoire où se trouve la page "intro.html". La syntaxe deviendra
   
   

   Obtenir plus de <A HREF="../plus.html">détails</A>.

   
   Il faut "remonter" d'un répertoire pour que la page "plus.html" soit "visible".
   
   
4. La page "plus.html" est dans le répertoire frère "Ajout" du répertoire où se trouve la page "intro.html". La syntaxe deviendra
   
   

   Obtenir plus de <A HREF="../Ajout/plus.html">détails</A>.

   
   Il faut "remonter" d'un répertoire puis "redescendre" dans le répertoire "Ajout" pour que la page "plus.html" soit "visible".
   
   

Lien vers un autre endroit de la même page Web

Une page Web n'a pas de limite de longueur.

Bien que ce ne soit vraiment pas judicieux, il est des cas où on peut être amené à réaliser une page très longue. Il est alors utile de placer, en début de page, une série de liens qui permettront au lecteur d'accèder directement aux bons endroits de cette page.

Etant donné qu'on accède à la même page, on comprend tout de suite que ce genre de lien va nécessiter des signets dans le corps de la page afin que le navigateur sache quel endroit doit être affiché dans son coin supérieur gauche.

Dans l'exemple suivant, nous montrons donc deux éléments:

1. Où placer et comment nommer un signet (en vert)
   • Le signet sera délimité grâce aux balises <A> et </A>
   • Il sera signalé par le mot NAME
   • suivi du signe "="
   • et terminé du nom du signet entre " " (que les lettres et/ou des chiffres).
2. Comment "viser" cette balise dans la référence de l'hyperlien (en rouge).
   • La référence pointera vers le nom du signet précédé du signe "#"

Dans la page suivante, nous voulons placer deux liens qui permettront au visiteur de sauter, sur la même page, aux paragraphes "Inscription" et "Conditions" à partir de deux liens situés en tête de page.

Apparence (les signets n'apparaissent pas)

Syntaxe

Dans ces longues pages, il est également judicieux, à la fin de chaque sujet, de placer un lien [Haut] ou [Top] qui permet de retourner directement au sommet de la page, là où se trouve le menu. On procédera de la même façon en plaçant un signet en tout début de page, l'ensemble des liens [Haut] ou [Top] faisant référence à ce signet unique.

Lien vers un autre endroit d'une autre page Web

Pour cela, il suffit de mixer ce qui précède.

Voici comment faire pour accéder à la zone "inscription" d'une autre page appelée "plus.html" sachant que l'on a placé le signet <A NAME="inscri"></A> au bon endroit de cette page:

Il suffit de faire précéder le nom du signet du nom de la page sur laquelle il se trouve (les notions de répertoires sont naturellement à prendre en compte, voir ci-dessus)

Lien assigné à une image

Jusqu'à présent, nous avons réalisé des liens à partir de mots. Il est également possible d'assigner un hyperlien à une image.

La technique est simple: au lieu de mentionner du texte entre les balises <A> et </A>, il suffit d'y renseigner l'insertion d'une image.

Admettons que je désire que cette image animée renvoie vers le site d'où elle provient:

J'encoderai cela de la façon suivante:

Où "<IMG SRC="globe2.gif">" représente le code d'insertion de l'image animée en question.

Petite finesse: tout comme les mots auxquels sont associés un lien apparaissent en bleu et soulignés (de façon à être facilement repérables), les images utilisées comme liens s'entourent automatiquement d'un carré bleu qui deviendra pourpre quand le lien aura été visité.

Pour éliminer ce carré bleu disgrâcieux, il suffit de taper la référence de l'image suivie de la mention "BORDER=0". L'appel complet à l'image se notera donc "<IMG SRC="globe2.gif" BORDER=0>"

Lien de type "messagerie électronique"

Lorsque vous signalez sur votre site une adresse de courrier électronique, vous pouvez y associer un lien pour que le logiciel de courrier électronique installé sur l'ordinateur du visiteur affiche un nouveau message dans lequel l'adresse électronique est automatiquement indiquée (bien entendu, il faut pour cela qu'un logiciel de courrier électronique soit correctement installé sur la machine pour que cela fonctionne).

Pour réaliser ce lien sur l'adresse électronique (fictive) suivante:

J'encoderai cela comme ceci:

Attention, pensez aux personnes qui n'ont pas de logiciel de messagerie électronique installé ou qui consultent votre site à partir d'un ordinateur quelconque. Il vaudra toujours mieux mentionner l'adresse complète afin qu'elle puisse être recopiée et utilisée sur un ordinateur adéquat. A la mention précédente, on préfèrera donc:

Lien de type "FTP"

"FTP" signifie "File Transfer Protocole": c'est le protocole qui permet le transfert de fichier par l'Internet.

Un fichier devient automatiquement transférable s'il est de type ".exe". Il suffira donc de faire un lien dont ce fichier est la référence, et le navigateur ouvrira automatiquement une fenêtre proposant le téléchargement et le choix du répertoire de destination sur l'ordinateur du visiteur.

Pour télécharger le fichier (fictif) "hihan.exe":

J'encoderai cela comme ceci:

Divers

Changer la couleur des liens

Vous pouvez configurer la couleur globale de tous les hyperliens afin que chacun réagisse comme suit:

• avant qu'il soit visité (référence LINK) dont la couleur par défaut sera bleue
• au moment où vous pointez dessus (référence ALINK) dont la couleur par défaut sera rouge
• Après qu'il soit visité (référence VLINK) dont la couleur par défaut sera pourpre

Tout ceci se règle dans le navigateur grâce au menu "Outils" → "Options internet" → "Général" → "Couleurs"

Vous accédez alors à la fenêtre suivante dans laquelle vous pouvez changer les couleurs des différents aspects des liens.

Toutefois, il se peut que ces couleurs ne soient pas du tout en accord avec la palette des pages que vous avez développées. Vous avez donc le loisir de choisir les trois couleurs en question, et ces couleurs supplanteront les couleurs choisies dans le navigateur du visiteur (les choses sont bien faites).

Vous pouvez fixer des couleurs différentes pour chaque page, mais, étant donné que toutes les pages d'un site doivent avoir "un air de famille", vous veillerez à choisir des couleurs identiques pour l'entièreté du site.

L'introduction des couleurs se fait au niveau de chaque page dans la balise "<BODY>" de la manière suivante:

Ouvrir un lien dans une nouvelle fenêtre

Par defaut, quand le visiteur clique sur un lien, la page de destination s'affiche dans le navigateur à la place de la page qui contenait le lien.

Ceci est un gros défaut car, si le visiteur navigue un peu dans ce nouveau site, il risque de ne jamais retrouver votre page.

Une bonne technique est d'ouvrir les pages extérieures dans une nouvelle fenêtre du navigateur. Le visiteur peut alors visiter ce nouveau site à son aise. Quand il a fini son exploration, il suffit qu'il ferme cette fenêtre de navigation pour retomber automatiquement sur votre page.

Cette petite ajoute est très simple à implémenter, elle se fait au niveau de la balise créant l'hyperlien de la façon suivante:

◊ ◊ ◊

© Rupert Meurice de Dormale 2003