Developpez.com

Plus de 14 000 cours et tutoriels en informatique professionnelle à consulter, à télécharger ou à visionner en vidéo.

Developpez.com - Développement Web
X

Choisissez d'abord la catégorieensuite la rubrique :

 

VII. Liens hyper-texte

Par Hugo ETIEVANT

  1. Introduction
  2. La balise de base
  3. Les liens internes
  4. Les info-bulles
  5. Les e-mail
  6. Les autres protocols
  7. Les cadres
  8. Encore plus...

Introduction

Qu'est quoi un lien hyper-texte ? C'est un élément graphique ou textuel d'une page web qui sous l'action d'un clic de souris commande le chargement d'une autre page dans le navigateur. Ce moyen simple et sûr de surfer rapidement et efficacement sur la toile fut inventé par un chercheur du français du CERN.


La balise de base

La balise de base est <A> qui a pour attributs HREF : l'adresse de destination et TARGET : le cadre de destination (facultatif). Pour des explications sur les cadres, voir le chapitre Les Cadres. Cette balise est en fait un conteneur, c'est-à-dire qu'elle doit être refermée par </A>. Les éléments situés à l'intérieur (texte, images) renveront vers une page sous l'action d'un clic. De plus, lorsque la souris survole un lien, son apparence change : d'une flèche elle devient une main.

Syntaxe :

<A HREF="adresse_destination">Texte_ou_image_à_cliquer</A>

Exemples :

<A HREF="intro.txt">Introduction</A>
Introduction

<A HREF="html/intro.php3" TARGET="cadre1"><IMG SRC="images/a1.gif"></A>

<A HREF="../../images/photo5.jpg">Une photo de vacance</A>
Une photo de vacance

<A HREF="http://www.multimania.com/cyberzoide/html/index.php3" TARGET="_top>Revenir à ma Home Page</A>
Revenir à ma Home Page

Comme vous pouvez le voir, l'adresse destination spécifiée en valeur à l'attribut HREF peut être relative ou absolue. Elle peut contenir aussi des remontées avals de répertoire. Tout comme les pages web, les images GIF, PNG et JPG mais aussi les documents TXT peuvent être pointées par des liens.

Les liens textuels apparaissent souligné et de couleur définie par la balise <BODY> (pour plus d'informations, voir le chapitre Corps de Document) quant aux images, elles apparissent avec une bordure d'épaisseur égale à deux pixels et de même couleur de les liens textuels.


Les liens internes

Lorsqu'on désire créer une page volumineuse, il est préférable d'insérer un menu avec des liens hyper-texte internes à la page (comme pour cette page). Pour cela on utilise la même balise mais cette fois l'adresse de destination est un mots clé précédé du signe musical dièse #. Et il faudra, au sein de la page insérer une balise marqueur dont l'identifiant sera ce mot clé pour qu'un clic de souris sur le lien se dirige vers ce marqueur.

Syntaxe :

Départ :
<A HREF="#mot_clé">Texte_ou_image_à_cliquer</A>

Arrivée :
<A NAME="mot_clé">Texte_ou_image</A>

Exemples :

Départ :
<A HREF="#plus">Encore Plus...</A>
Encore Plus...

Arrivée :
<A NAME="plus">Encore plus...</A>
Encore Plus...


Les info-bulles

L'attribut TITLE permet de faire afficher un court descriptif du lien lorsque le curseur de la souris passe sur le lien.

Syntaxe :

<A HREF="page.htm" TITLE="description"> Texte_ou_image_à_cliquer</A>

Exemple :

baby


Les email

Il est intéressant de part un clic de souris de permettre à vos visiteurs de vous laisser un message. Pour cela, mettez comme adresse destination la syntaxe mailto:+ votre adresse électronique.

Syntaxe :

<A HREF="mailto:votre_email"> Texte_ou_image_à_cliquer</A>

Exemple :

<A HREF="mailto:cyberzoide@multimania.com"> Ecrivez-moi</A>
Ecrivez-moi

Cette commande vous permet de spécifier un sujet et un message par défaut mais aussi plusieurs destinataires.

Syntaxes :

<A HREF="mailto:votre_email?subject= sujet_du_message"> Texte_ou_image_à_cliquer</A>

<A HREF="mailto:votre_email?body= corps_du_message"> Texte_ou_image_à_cliquer</A>

<A HREF="mailto:votre_email?subject= sujet_du_message&body= corps_du_message"> Texte_ou_image_à_cliquer</A>

<A HREF="mailto:votre_email?cc= autre_destinataire"> Texte_ou_image_à_cliquer</A>


Les autres protocols

On a vu plus haut qu'il est possible d'appeler des pages web, des images mais aussi d'autres documents (.txt, .shtml, .doc) , des films (.avi, .jpeg), des sons (.wav, .mid, .rmi, .ra, aif, .mp3, etc...) et qu'il était possible d'utiliser un autre protocol : le courrier électronique. Il existe bien d'autres protocols accessibles par un simple lien hyper-texte.

SyntaxeDescription
<A HREF="">Protocol par défaut : HTTP
<A HREF="#">Lien interne, protocol HTTP
<A HREF="http://">Protocol HTTP
<A HREF="pnm://">Protocol PNM pour le streaming en RealAudio
<A HREF="ftp://">Protocol FTP pour le transfert de fichiers
<A HREF="mailto:">Protocol SMTP pour le courrier électronique
<A HREF="news:">Protocol NNTP pour les forums de discussion
<A HREF="telnet://">Protocol Telnet pour le contrôle d'un ordinateur distant
<A HREF="gopher://">Protocol Gopher pour discussion et transfert de fichier
<A HREF="wais://">Protocol Wais
<A HREF="file://">Adressage local sur un poste non-distant

Les cadres

Il existe des constantes relatives au cadre de destination spécifié en valeur à l'attribut TARGET.

SyntaxeDescription
TARGET="_blank"Affichage du lien dans une autre autre fenêtre du navigateur
TARGET="_top"Affichage dans la totalité de la fenêtre courante
TARGET="_parent"Affichage dans le cadre qui enveloppe la structure courante
TARGET="_self"Affichage dans le cadre courant (par defaut)
TARGET="cadre"Affichage dans le cadre spécifié

Encore Plus...

  • Lorsque vous faites un lien à partir d'une image, spécifiez la valeur 0 à l'attribut BORDER de la balise <IMG> afin de supprimer la bordure bleu.

  • Dans une balise <A>, vous pouvez rajouter les instructuions JavaScript (onFocus, onClick, onMouseOver...) pour produire des effets graphiques ou sonores en tout genre qui surprendront vos visiteurs.

  • Evitez d'insérer un texte très long dans le conteneur <A HREF> : c'est du plus mauvais effet !

Responsable bénévole de la rubrique Développement Web : Xavier Lecomte -