Réaliser sa page Web
   Leçon 9 : L'insertion de liens hypertextes

Les liens, le coeur du système

Il existe plusieurs types de liens, on peut citer les liens absolus et les liens relatifs, les liens locaux et les liens distants, les liens textuels (obtenus en cliquant sur un morceau de texte) et les liens graphiques (en cliquant sur une image une image).

Ici les choses se compliquent un peu. La paire de balises pour créer un lien est le <A> et le </A>. Mais cela ne suffit pas, il faut aussi dire vers où le lien doit pointer, c'est à dire où va se rendre la personne qui clique sur le lien. Cette destination peut être une page HTML, une image, un son etc... il faudra donc définir la destination du lien.
Pour créer un lien hypertexte, nous allons ajouter l'instruction "HREF" entre le <A> et le </A>, cette insertion se fait sous la forme suivante :
<A HREF=""> </A>
Cela ne suffit toujours pas, il faut maintenant dire vers ou pointe le lien. Pour cela nous allons mettre une adresse entre les guillemets.
<A HREF="http://www.babel.net/"> Ceci est un lien vers le serveur BABEL </A>

Voici le résultat :
Ceci est un lien vers le serveur BABEL
Si vous passez la souris sur ce lien, vous verrez au bas de votre navigateur, dans la barre de status, vers quel site il pointe.


Quelques exemples de liens relatifs (par rapport à la page actuelle)

  • <A HREF="test.html"> Lien vers le fichier test.html dans le même répertoire </A>
  • <A HREF="/toto/test.html"> Lien vers le fichier test.html dans le sous répertoire "toto" </A>
  • <A HREF="../test.html"> Lien vers le fichier test.html dans le répertoire supérieur </A>
    Les liens relatifs sont forcément des liens sur le serveur local.

Quelques exemples de liens absolus (liens qui ont une adresse complète)

  • <A HREF="http://www.babel.net/faq"> Lien vers la faq d'A.S.I (FAQ=Frequently Asked Questions) </A>
  • <A HREF="http://www.babel.net/~ericbon/index.html"> Lien vers ma homepage </A>
    Ces deux liens sont des liens vers des serveurs distants.

  • <A HREF="/~ericbon/index.html"> Lien vers le même serveur en local MAIS obligatoirement à partir de la racine du serveur et dans le répertoire /~ericbon/ </A>
    Ce lien codé en "dur" par rapport à la racine (symbolisée par le "/" de départ du lien) implique que ce fichier ne pourra jamais changer de position dans l'arborescence. C'est un lien local.

Autres Types de liens (Internet ce n'est pas que le World Wide Web)

  • <A HREF="ftp://..."> Lien vers un site FTP anonyme. Des liens vers des FTP privés sont aussi possibles mais peu recommandés car ils nécessitent la diffusion du mot de passe pour y accéder.
  • <A HREF="gopher://..."> Lien vers un serveur Gopher.
  • <A HREF="wais://..."> Lien vers un serveur Wais.
  • <A HREF="mailto:personne@sous-domaine.domaine.pays"> Lien vers une messagerie (E-Mail). Votre navigateur ouvrira une boîte de dialogue pour envoyer un courrier électronique à cette adresse.
  • <A HREF="news:..."> Lien vers un newsgroup.
  • <A HREF="telnet://..."> Active un lien vers une session Telnet.
    A part le FTP, ces autres services s'utilisent de moins en moins.

Liens au sein d'une même page

Vous pouvez aussi diviser votre page en plusieurs parties différentes; créer des liens vers ces différentes parties est possible. Pour cela nous utiliserons l'instruction <NAME> qui indiquera la destination du lien.
Voici la syntaxe :
<A NAME="test">
La syntaxe du lien à cliquer est <A HREF=#test> cliquer pour lancer le test</A>.
Voici un exemple : Cliquez ici pour revenir au début de la page.


Utiliser une image comme source de lien

Insérer simplement l'image entre l'instruction <A HREF="..."> et </A> :
<A HREF="demo.htm"><IMG SRC="demo.gif"></A>
Pour montrer que cette image est un lien, un cadre apparaîtra autour de l'image. Cependant quelques fois ce cadre n'est pas très beau, pour le supprimer il suffit d'insérer l'argument BORDER="0" (BORDER correspond tout simplement à la largeur du cadre. Un cadre de largeur 0 signifie pas de cadre).
Voici un exemple qui combine tous les effets vu dans les deux dernières leçons :
<A HREF="demo.htm"><IMG BORDER="0" SRC="demopic.gif" ALIGN="LEFT" ALT="Image pour Demo"></A>

Faisons le bilan, maintenant vous savez faire des listes, insérer des liens et des images :

Votre document sous notepad ou simpletext.

Le résultat sous Netscape Navigator


   On résume :
  • 2 concepts importants : lien relatif ou lien absolu et lien local ou lien distant.
  • Ecriture du lien : <A HREF="destination"> Texte à cliquer </A>.
  • Ne pas oublier le # dans les liens au sein d'une même page.