Cours sur le langage HTML organisé par
Frédéric Jacquenod

II.5 Utilisons l'hypertexte et réalisons nos premiers liens

Pour le moment nous avons réalisé une page simple contenant du texte et une image. Mais l'un des intérêts de ce langage est de pouvoir réaliser des documents pointant vers d'autres documents et ainsi d'explorer une nouvelle dimension.

La balise à utiliser est <A HREF="adresse">Zone cliquable</A>

"adresse" est une adresse web ou une image au format jpeg.
"Zone cliquable" est un texte ou une image qui lorsque vous cliquez dessus vous renvoie à un autre document ou une autre partie de document.
La "Zone cliquable" se nomme aussi ancre.

Deux types de liens sont disponibles.

• Le lien vers un élément externe à vos pages
• Le lien vers un élément interne à vos pages




Le lien vers un élément externe à vos pages

La balise est :
<A HREF="adresse">Zone cliquable</A>
Lorsque vous cliquez sur "Zone cliquable", votre butineur charge la page référencée par "adresse".
Cette page peut être, sur votre serveur comme à l'autre bout du monde, mais pour vous ce sera transparent.
Réalisons un lien sur le site du moteur de recherche google.
<A HREF="http://www.google.fr">Google</A> Google
exercice15


Les liens peuvent aussi bien être des liens vers des pages web que vers des serveurs ftp, des serveurs de news, des serveurs gopher ou vers une machine accéssible en telnet ou vers d'autres services comme le courrier électronique.
<A HREF="ftp://ftp.jussieu.fr"> Le site ftp anonymous de l'université de Jussieu</A>
<A HREF="news://news.jussieu.fr"> Les news de de l'université de Jussieu</A>
Lien vers une adresse électronique voir le paragraphe II.7



Le lien vers un élément interne à vos pages

Lorsque vous avez un document assez long il est parfois intéressant pour la personne qui le consulte de pouvoir atteindre l'information désirée juste en cliquant sur un lien ou un mot clé qui l'envoie directement au bon endroit.
Un peu comme le font certains langages utilisant notamment le mot clé GOTO.
Vous pouvez ainsi réaliser un plan en début de votre document (comme sur celui-ci) et ainsi clarifier, simplifier la recherche dans ce dernier.
L'utilisateur se déplace ainsi directement sans avoir à utiliser les ascenseurs, juste en cliquant sur les mots clés comme pour une lien extèrieur.
Il perd moins de temps et trouve immédiatement l'information.

Les balises sont :
<A HREF="#étiquette">Zone cliquable</A>
associé à la balise
<A NAME="étiquette">

exercice17
Vous pouvez associer les deux balises dans une seule ce qui permet de faire des va-et-vient très utiles par exemple pour les notes de bas de pages.
Vous faites dans votre texte une annotation qui renvoie en cliquant à la note de bas de page qui elle même renvoie à cette annotation.
Ainsi une fois la lecture de la note de bas de page faite, vous revenez directement là où vous étiez resté dans le texte, simple et pratique.
<A HREF="#bas_de_page" NAME="annotation">(annotation 1)</A>
.....
<A HREF="#annotation" NAME="bas_de_page">(bas de page 1)</A>
exercice18





Une image comme ancre

Un lien hypertexte peut aussi bien se faire avec un texte,une image ou les deux à la fois. L'image est alors la "Zone cliquable".

<A HREF="http://www.google.fr"> <IMG SRC="./Images/..."></A>


Vous pouvez dans ce cas ajouter comme option à la balise IMG, BORDER=chiffre afin de grossir le trait qui entoure l'image, la rendant ainsi plus visible. Voir les options possibles au paragraphe II.4.

<A HREF="http://www.cicrp.jussieu.fr"> <IMG BORDER=6 SRC="./Images/..."></A>


exercice19




Option de la balise A

Vous pouvez lors du clic sur un lien hypertexte faire en sorte qu'une autre fenÍtre du navigateur s'ouvre contenant la page rČfČrencČe au lieu de la faire afficher dans la fenÍtre courante.
Cela permet notamment de garder les informations importantes dans la fenÍtre courante.
Pour cela utilisez l'option TARGET.
<A TARGET=nom_de_la_fenetre HREF="adresse">zone hypertexte</A>

Toutes les pages rČfČrencČes par nom_de_la_fenetre s'ouvriront dans la mÍme fenÍtre.
exercice16



Autre forme de lien

Vous pouvez inclure dans l'entete de votre document entre les balises HEAD et sa fermeture une META instruction.
<META HTTP-EQUIV="REFRESH" CONTENT="sec;URL=adresse">
ou sec represente le nombre de secondes avant la redirection et adresse l'URL vers ou vous renvoyez la page
exercice20

Frédéric Jacquenod