Les Liens

Nous allons maintenant voir comment créer des liens. Les liens permettent de nous ammener sur une autre page Web. Il faut savoir qu'on à la possibilité de faire deux types de liens :

• Un lien vers une autre page : C'est le cas le plus courant.
• Un lien vers un autre endroit sur la même page : Cela permet de se déplacer rapidement à différents endroits d'une même page, évitant ainsi au visiteur d'avoir à trop utiliser la molette de sa souris ou l'ascenseur.

Insérer un lien vers une autre page

Ce type de lien est le plus courant. Il permet de nous ammener vers une autre page de notre site ou vers une page d'un site différent.

Création d'un lien simple

Pour faire un lien, nous allons utiliser la balise XHTML suivante : <a></a>.Aussi il faut mettre à l'intérieur le texte qui va servir de lien.

Par exemple :

Toutefois il manque encore quelque chose pour que notre lien soit correct: il faut indiquer le nom de la page vers laquelle amène le lien et que la page existe !. Pour cela nous allons créer une page2.html (par exemple et la mettre dans le même dossier) et rajouter à la balise <a> l'attribut href
Cette attribut permet d'indiquer le nom de la page qui sera appelée lorsqu'on cliquera sur ce lien.

Ici, le texte "Cliquez ici" sera écrit en bleu souligné. Si l'on clique dessus, on sera ammené sur page2.html

Exemple

Ajout d'une infobulle

Il est possible d'ajouter une infobulle (ou bulle d'aide) sur les liens. Cette bulle est un petit message qui s'affiche lorsque l'on pointe avec la souris sur le lien

Pour créer une bulle d'aide sur un lien, on doit ajouter à la balise <a> l'attribut title

Exemple

Exemple

Le texte de la bulle d'aide doit être assez court (quelques mots tout au plus). Inutile de rédiger un roman dans la balise title, celui-ci serait tronqué par le navigateur au bout de quelques mots seulement.
L'attribut title peut être aussi utilisé sur d'autres balises tels :<p> , <q>, <strong>, <em>

Un lien pour envoyer un e-mail

Avec le Xhtml, on peut créer un lien ouvrant une fenêtre de messagerie (comme Outlook express). Cet email sera automatiquement rempli avec une adresse mail en destinataire, si bien que les visiteurs n'auront plus qu'à rédiger leur message et à cliquer sur le bouton Envoyer

Ce type de lien se crée de la même façon qu'un lien vers une autre page web, à la différence près que le contenu de l'attribut href doit cette fois commencer par le préfixe mailto: suivi de l'adresse mail.

Exemple

Ainsi le lien ouvre une fenêtre de message du logiciel de courrier éléctronique correspondant (Outlook express par exemple).

Exemple

Insérer un lien vers un autre endroit de la page

Voici un exemple pratique : L'on place une liste de recettes en bas de la page, mais celle ci est très longue. Pour éviter aux visiteurs d'avoir à faire défiler toute la page, on a la possibilité de créer un point de repère sur la section de la page contenant les recettes : ce point de recette est appelé "ancre".
On peut aussi dans un deuxième temps créer un lien en haut de la page qui indiquera au navigateur : "Si le visiteur clique sur ce lien, alors amène-le à l'endroit de la page ou se trouve l'ancre des recettes".

Pour créer une ancre, il sufit de rajouter un attribut id à n'importe quelle balise. Cette attribut sert à donner un nom à l'ancre pour l'identifier. Par exemple, on peut rajouter une ancre à un titre :

Exemple

Maintenant que l'ancre est crée, on peut insérer le lien qui amène directement dessus.
On utilise toujours la balise <a> mais on doit indiquer aussi l'attribut href="recettes" c'est à dire le nom de l'ancre précédé d'un dièse (#). Cela nous donne le lien suivant :

Au final le code de la page Web ressemble à cela

Exemple

Apres un clic sur le lien, nous sommes amenés plus bas sur la même page, à l'emplacement de l'ancre recettes

Les liens relatifs et absolus

Pour faire un lien d'une page vers une autre, deux façons d'écrire l'adresse de la page cible : la notation relative ou absolue.

Les Liens relatifs

Les liens relatifs décvrivent la position d'un fichier cible par rapport au fichier actuel. Ces liens s'adaptent très bien aux changements d'adresse précisement car ils ne contiennent pas l'adresse du site. Il est donc conseillé d'utiliser des liens relatifs lorsque l'ont fait des liens internes, c'est à dire des liens pointant vers d'autres pages du site.

On peut distinguer plusieurs cas :

• Les fichiers html sont dans le même dossier :

• Les fichier html sont dans des fichiers différents :

Cela donne l'indication suivante au navigateur : "Rends-toi dans le dossier nommé dossier1 puis dans le dossier nommé dossier2 et va sur page2.html

• Les fichier html sont dans des fichiers différents (page2.html avant page1.html dans l'arborescence) :

Ansi si page2.html se trouve dans le dossier situé avant page1.html dans l'arborescence, il faudra l'indiquer grâce à ../:

Les Liens absolus

Les liens absolus décrivent la position d'un fichier cible de manière absolue. Cela signifie qu'on peut faire un lien vers un autre site que le sien. Leur défaut vienne du fait qu'il faille connaître l'adresse complète du site en question. Ils ne sont donc pas adaptés pour faire des liens internes à nos sites car l'ont ne connais pas l'adresse du site Web (celui ci n'étant pas encore sur internet mais sur le dique dur du PC). Ainsi on utilise les liens absolus uniquement pour amener le visiteur vers un autre site que le nôtre.

Exemple

Voir la partie les Images.