XHTML > Les liens hypertextes

Définitions

La fonction des liens hypertextes est de permettre la navigation d'une page vers une autre page, qu'elle soit sur le même site Internet ou non.

Exemple : lien menant sur la page "Contact" du site "france.fr" :

	<a href="http://www.france.fr/nous-contacter"> Contact <a>

Les différents types de lien

Liens absolus

Les liens absolus indiquent une adresse complète comprenant le protocole (http://), le nom du site Internet cible et le chemin vers la page à afficher. Ce type de lien est utilisé dès que l'on souhaite mener le visiteur sur une page d'un autre site Internet.

	<a href="http://www.boureliou.com/sylvain/curriculum-vitae">
	  CV de Sylvain Boureliou
	<a>

Liens relatifs

Les liens relatifs sont utilisés lorsque l'on souhaite pointer sur une page interne du site. L'adresse à fournir pour la page cible est alors relative à l'adresse de la page actuelle.

Exemple : lien vers la page 05-commentaires.html qui se trouve dans le même dossier que la page actuelle :

	<a href="05-commentaires.html"> Les commentaires XHTML <a>

Exemple : lien vers la page introduction.html qui se trouve dans le dossier "documentation" (qui est au même niveau que la page actuelle) :

	<a href="documentation/introduction.html"> Documentation <a>

Exemple : lien vers plan.html qui se trouve dans le dossier parent de la page actuelle (dossier parent) :

	<a href="../plan.html"> Plan du site <a>

Lien inter-page (vers une ancre)

Une ancre est un point de repère utile dans une page XHTML contenant beaucoup de contenu. Un lien vers une ancre permet au visiteur de faire défiler la page directement au paragraphe qui l'intéresse.

Ce type de lien n'est utile que lorsque la page est suffisamment longue pour faire apparaître la barre de défilement verticale.

<h2>Une très longue page</h2>
<p>Sommaire : <br />
   - <a href="#automobile">Section automobile</a><br />
   - ...
</p>
....
....
....
<p id="automobile"> Nunc ullamcorper imperdiet lorem....</p>

Il est également possible de se rendre à une ancre disponible sur une autre page web :

<a href="rapport.html#conclusion">Conclusion du rapport</a>

Les liens de type "mailto" pour envoyer des courriels

<a href="mailto:sylvain.boureliou@gmail.com">
  Contactez-moi par courriel !
</a>

Liens ouvrant une nouvelle fenêtre

Ce n'est pas possible en XHTML pour les raisons suivantes :

• Respect de l'expérience de navigation du visiteur, c'est à lui de décider s'il souhaite ouvrir un lien dans une nouvelle fenêtre.
• Respect des personnes mal-voyantes qui peuvent être perturbées par l'ouverture d'une nouvelle fenêtre (il n'est plus possible de faire "page précédente").

Afficher une bulle d'aide : l'attribut "title"

<a href="mailto:sylvain.boureliou@gmail.com"
   title="Cliquez pour ouvrir votre logiciel de courriels">
  Contactez-moi par courriel !</a>

Adresses spéciale véhiculant de l'information

Les adresses du type page.html?x=valeur1&y=valeur2 permettent de passer de l'information dynamique à la page demandée (cas des sites Internet dynamiques). Le point important ici est qu'en XHTML les & doivent s'écrire &.

<a href="page.html?x=valeur1&amp;y=valeur2">Page dynamique</a>

Place à la pratique :

Exercices

1) Soit un site Internet ayant l'arborescence suivante :

	/accueil.html
	/documents/introduction.html
	/documents/vehicules/motos.html
	/documents/vehicules/automobiles.html
	/documents/vehicules/marques/peugeot.html
	/documents/vehicules/marques/renault.html

Créer toutes les pages avec un contenu très simple.

Dans la page "automobile.html", ajouter des liens vers toutes les autres pages du site Internet.

2) - Ecrire une longue page de texte contenant des titres et sous-titres h1, h2 et h3.
- Créer un sommaire (liste de liens) permettant d'accéder rapidement à chaque section.
- Ajouter en fin de chaque section principale (<h1>) un lien permettant de remonter au sommaire.