
	INFOS-AREA

Navigation


	Les Liens

Faire un lien en XHTML

Le lien constitue une liaison entre une page et une autre. Un visiteur de la page peut se rendre sur une autre page ou un autre emplacement de la même page à l'aide d'un lien. Ceci est possible dès que le visiteur clique sur l'objet de lien qui est généralement un texte ou une image.

Différent contextes tournent autour de ce sujet. Nous allons d'abord voir la balise indispensable pour faire des liens. Il s'agit de la balise <a> </a> qui est de type inline. Dans son attribut href, on spécifie la cible, c'est à dire l'adresse de la page ou de la ressource vers laquelle sera dirigé le visiteur après son clic sur le lien.

On identifie la cible par une URL. L'URL ou "Localiseur de Ressource Uniforme" est une sorte de nomenclature pour situer un document et lui donner une adresse. C'est le chemin du document vers lequel le lien sera renvoyé.

Voici un exemple d'utilisation de la balise <a> pour faire un lien :

Aperçu :

StandaCreation : Création de sites Internet est une société de création de sites Internet qui respecte les standards.

Code XHTML :

<a href="http://www.example.com" title="Société de création de site web">StandaCreation : Création de sites Internet</a> est une société de création de sites web.

Généralement, on distingue 2 façons de faire des liens :

Les liens internes au site : Normalement, un site est composé de plusieurs pages XHTML. Pour lier une page d'un site à un autre page du même site, on fait des liens relatifs.
Les liens externes au site : Il vous arrive aussi parfois de vouloir faire des liens vers les autres sites. Dans ce cas, on parle de liens absolus.

Dans la suite nous allons voir plus en détail la différence entre les deux tout en illustrant par des exemples.

Les liens absolus

Vous utiliserez ce type de lien lorsque votre lien pointe vers un autre site. L'adresse du lien commence souvent par "http://" ou "ftp://", suivi de l'adresse du site cible. Autrement dit, dans un lien absolu, on précise entièrement le chemin.

<a href="http://www.domaine.com/xhtml.php">tuto xhtml</a>

Dès que le visiteur clique sur le texte, il sera renvoyé vers la page http://www.domaine.com/xhtml.php.

Les liens relatifs

Dans un lien relatif, le chemin part du répertoire courant. Il s'agit d'un lien relatif au répertoire dans lequel on se trouve. Il est souvent utile d'employer ce lien quand on fait référence à une page interne à votre site. Si vous décidez de changer par exemple l'hébergement, l'adresse de votre site ne sera peut être plus le même.

Dans ce cas, l'utilisation des liens relatifs ne vous oblige pas à modifier l'adresse des liens. Par contre, ceci n'a d'intérêt que si vous gardez les mêmes noms de fichiers et la même structure de répertoire

Cas 1 : les deux fichiers se trouvent dans le même répertoire :

wwwdossier1fichier1.html wwwdossier1fichier2.html

Dans ce cas, si fichier 2 est la cible, on met comme adresse de lien dans fichier1

fichier2.html

Cas 2 : Les deux fichiers se trouvent dans des répertoire différents :

wwwdossier1fichier1.html wwwdossier1dossier2 fichier2.html

Pour aller de fichier1 à fichier2 on met :

dossier2/fichier2.html

Cas 3 : La cible se trouve dans le rep parent :

wwwfichier2.html wwwdossier1fichier1.html

Pour aller de fichier 1 à fichier 2 on met :

../fichier2.html

Lien interne sur une même page

Il s'avère parfois fastidieux de lire une longue page XHTML sans les ancres. Une ancre est un point pour repérer une partie particulière de la page. Par exemple, si vous êtes au milieu de la page et que vous souhaitez revenir en haut de la page, c'est l'ancre qui vous servira de référence. L'ajout de l'attribut id à une balise nous permet de créer une ancre qui servira de repère. Ceci est valable pour n'importe quelle balise.

L'attribut id permet de donner un nom, un identifiant unique à un lien

Par exemple :

<h2 id="section1">section1 :Lien vers une ancre</h2>

Comme d'habitude, on utilise la balise a avec son attribut href , mais en mettant cette fois ci le signe dièse (#) suivi du nom de l'ancre comme valeur de l'attribut. Ce signe dièse sert à marquer qu'il s'agit d'une ancre.

<a href="#mon_ancre">Aller vers l'ancre</a>

Quand on clique sur le lien, les barres de défilement se défileront automatiquement pour atteindre atteindre la section1 Lien vers une ancre qui se trouve dans une autre page

Là, on cherche à faire un lien qui permet d'ouvrir à la fois une nouvelle page et qui nous amène directement à une ancre sur cette page. Pour cela, il faut mettre après le nom de la page, le dièse et le nom de l'ancre. Par exemple :

Ce qui vous amènera sur la page page.html, au niveau de la section "section1".

Les Liens : Cas pratiques

Ouvrir un lien dans la même fenêtre ou dans une fenêtre différente

Au temps de HTML, on utilisait l'attribut target="_blank" pour ouvrir un lien dans une nouvelle fenêtre. La norme W3C de XHTML ne recommande pas cette façon de faire.

<a href="http://julfisher.free.fr/cube" title="Lien externe vers le Rubik's Cube : solution" target="_blank"> JulFisher <img src="images/nouvelle_fenetre.png" alt="Lien externe" /></a>

Si vous essayez ce code, il va marcher mais votre code ne suivra pas les normes. C'est juste une question d'éthique pour que votre code soit valide au niveau du W3C. Le principe étant de laisser le choix libre aux visiteurs pour leur façon d'ouvrir le lien.

Certains visiteurs n'aimeront pas avoir à gérer plusieurs fenêtres qui s'ouvrent devant eux. Forcer l'ouverture des liens dans une nouvelle fenêtre pourra alors gêner leur navigation. Afin d'éviter la gène occasionnée, on doit laisser le visiteur décider lui-même de la façon dont il veut ouvrir le lien.

Il a donc été convenu de ne plus utiliser l'attribut target ni d'autres attributs qui permettent l'ouverture de lien dans une nouvelle fenêtre en XHTML.

Par contre, dans le cas où vous êtes vraiment dans l'obligation d'ouvrir un lien dans une autre fenêtre, il y a une autre solution alternative qui peut s'y substituer : le javascript. En utilisant le javascript pour le lien, non seulement vous auriez ce que vous vouliez mais aussi votre page sera valide. Avec ce cette autre méthode, il n'y a pas de contrainte de validation mais ceci n'entre pas dans le cadre de ce tutoriel.

Info bulle sur les liens

Afin de donner une indication au visiteur, on peut rajouter une bulle d'info sur le lien. Dès que le visiteur fait passer sa souris sur le lien, la bulle d'info apparaît. Vous pouvez ajouter une petite explication ou une information dans cette bulle.

L'exemple suivant va nous afficher "Voir la suite du tutoriel" dès qu'on pointe sur la zone de liens.

<a href="tutosuite.html" title="Voir la suite du tutoriel">suite </a>

Comme nous venons de voir, on a rajouté l'attribut title et on lui a donné comme valeur le texte de l'info-bulle.

Envoyer un mail

Un clic sur un lien peut aussi nous ouvrir facilement notre client mail par défaut ( Outook par exemple ). L'ouverture immédiate d'Outlook pourra faciliter la tâche du visiteur quand il veut par exemple vous envoyer un mail. Si vous voulez que la fenêtre d'Outlook ou du client par défaut s'ouvre tout de suite en cliquant sur un lien, voici ce qu'il faut faire:

<a href="mailto:adresse@domain.fr">Contactez-moi</a>

Le mot clé mailto: indique que vous voulez ouvrir le client mail par défaut. Vous placez ensuite après le mailto: l'adresse email du destinataire, et celle-ci apparaîtra automatiquement dans le client mail de l'internaute. Il n'aura pas à retaper l'adresse.

Toutefois, un gros problème se présente avec cette méthode. Des programmes malveillants ou des robots de SPAM reconnaissent facilement les liens de ce type. Par leur propre manipulation, ces programmes essaient d'avoir les adresses mails puis les inondent de SPAM.

Une solution serait par exemple de mettre une image à la place du texte du liens. L'image affiche sous forme textuelle votre adresse email. Les robots ne peuvent pas interpréter une image pour voir ce qui est écrit dessus. Il existe aussi d'autres solutions réalisables en PHP ou en javascript mais elles ne font pas partie des thèmes abordés dans ce tutoriel.

Lien pour ouvrir un fichier PDF

Il est aussi possible de faire un lien vers des fichiers autres que le HTML notamment les fichiers PDF :

<a href="catalog.pdf">Catalogue au format pdf </a>

Lorsque le visiteur cliquera sur ce lien, le document s'ouvrira automatiquement. Le visiteur pourra ensuite lire le fichier PDF à l'aide de Adobe acrobat reader par exemple. Dans le cas où aucun programme de ce type n'est installé sur la machine du visiteur, le navigateur va lui proposer de télécharger le fichier.

Lien pour télécharger un fichier au format zip

De la même façon on peut provoquer le téléchargement des fichiers au format zip en utilisant les liens.

Exemple :

<a href="fichier.zip">le texte du lien</a>

Caractères spéciaux dans les url

Parfois vous rencontrez des liens avec plusieurs paramètres. Il s'agit des liens de la forme page.php?a=valeur1&b=valeur2 par exemple. En XHTML, les ‘e' commerciales & doivent s'écrire dans le code source &,

Au final, vous devriez avoir un lien comme ceci :

<a href="page.php?a=valeur1&b=valeur2">Lien avec paramètre vers la page</a>