Créer des liens sur son site web XHTML
Noter ce cours :
Présentation
Un lien va vous permettre de lier une page à une autre. Quand vous vous trouvez sur un site, que vous passez la souris et que vous cliquez sur certaines zones pour vous rendre à une autre page, vous cliquez sur ce qu'on appelle des liens. Leur importance est capitale pour que vos visiteurs puissent naviguer facilement dans votre site.
Le code XHTML d'un lien relatif ou absolu peut être présenté comme ceci : <a href="adresse de la page à atteindre">Ici le texte qui sera affiché au visiteur pour cliquer sur le lien</a>
La balise utilisée est <a> et l'attribut permettant de spécifier une adresse de redirection est href. Il existe différents types de liens. Nous allons tout d'abord voir ce que sont les liens relatifs et absolus.
Les liens absolus
Il s'agit des liens les plus simples à comprendre. En effet, il s'agit de liens comportant une adresse complète. Ce type de lien doit toujours être utilisé lorsque votre lien pointe vers un autre site. On reconnait ces liens car ils commencent souvent par "http://" ou encore "ftp://", suivis de l'adresse du site en question. Voici un exemple de lien absolu :
<a href="http://www.vulgarisation-informatique.com/xhtml.php">Consultez le site Vulgarisation-informatique !</a>
On peut voir que ce lien pointera vers la page http://www.vulgarisation-informatique.com/xhtml.php. Le texte que verront les visiteurs pour cliquer sur ce lien sera "Consultez le site Vulgarisation-informatique !". Je pense que vous avez compris les liens absolus. Passons maintenant à quelque chose de plus compliqué : les liens relatifs.
Les liens relatifs
Les liens relatifs sont utilisés lorsque vous souhaitez pointer sur une page interne à votre site. Attention par contre, la notion de lien relatif est un peu compliquée. Quand on dit "relatif" il faut se demander "relatif à quoi". Et bien la réponse est simple : les liens sont relatifs au répertoire dans lequel vous vous trouvez. Prenons l'exemple d'une architecture de site comme ceci :
On va définir le répertoire Site comme étant la racine du site web. Imaginions que vous ayez une page dans le répertoire Site qui se nomme index.html. Vous souhaitez sur cette page placer un lien vers la page plan.html située dans ce même répertoire. Le lien est très simple :
<a href="plan.html">Plan du site</a>
Rien ne précède "plan.html" le navigateur saura donc qu'il a affaire à une page située dans le même répertoire. Si vous souhaitez maintenant faire un lien sur la page index.html qui pointerait vers une page située dans le répertoire documents et nommée documentations.html, vous auriez du faire un lien de ce type :
<a href="documents/documentations.html">Documentations</a>
Comme vous pouvez le voir, cela n'a rien de sorcier. Si maintenant vous vous situez sur la page documentations.html, qui, je le rappelle, se trouve dans le dossier documents, et que vous souhaitez placer un lien de retour sur la page d'accueil, vous allez devoir "remonter" d'un répertoire. On utilise pour ça deux points à la suite. Voici ce que ça donne :
<a href="../index.html">Accueil du site</a>
Les deux points signifient que vous allez remonter au dossier parent. Si vous avez une page située dans le dossier miniatures, et que vous souhaitez faire un lien vers l'accueil du site, il vous faut remonter deux répertoires. Cela ne pose pas de problème :
<a href="../../index.html">Accueil du site</a>
Les ancres
Une ancre est une ligne imaginaire. Vous pouvez en placer autant que vous voulez et où vous voulez. Elles ne sont utiles que lorsque les pages sont suffisament hautes pour que l'ascenseur vertical soit activé. En cliquant sur un lien, vous allez pouvoir vous déplacer automatiquement où vous aurez défini une ancre.
Voici un exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="fr">
<head>
<title>Bienvenue
sur ma page web !</title>
<meta
http-equiv="content-type"
content="text/html;charset=ISO-8859-1" />
</head>
<body>
<h1 id="titre">Bienvenue sur
la première page de mon site web</h1>
<p>Ici, je place
mon premier paragraphe.<br
/>Peu importe sa longueur, on doit toujours décomposer le
texte en différents paragraphes, que vous pourrez ensuite éclaircir. La balise <p>
doit ensuite être fermée pour dire que le paragraphe se termine.</p>
<h2 id="sous_titre">Sous-titre</h1>
<p>Ici, je place
mon deuxième paragraphe.<br
/>Peu importe sa longueur, on doit toujours décomposer le
texte en différents paragraphes, que vous pourrez ensuite éclaircir. La balise <p>
doit ensuite être fermée pour dire que le paragraphe se termine.</p>
</body>
</html>
Maintenant placez ces liens où vous souhaitez :
<a href="#titre">Aller au titre</a>
et un autre lien :
<a href="#sous_titre">Aller au sous-titre</a>
Faites en sorte que vous puissiez voir les ascenseurs verticaux (réduisez d'une manière conséquente la hauteur de la fenêtre de votre navigateur si nécessaire) et cliquez sur ces deux liens que vous aurez placés où vous le souhaitez. Votre navigateur va faire automatiquement défiler l'ascenseur pour vous rendre à l'endroit où se situent les ancres. Vous aurez remarqué que l'on utilise le signe # pour se rendre à une ancre. Si vous souhaitez vous rendre directement à une ancre d'une autre page web (extérieure ou non), il faut faire comme ceci :
<a href="index.html#sous_titre">Aller au sous-titre de la page d'accueil</a>
Et ceci est valable pour toutes les url ;)
Info-bulles sur les liens
Vous pouvez si vous le souhaitez rajouter une info-bulle qui s'affichera au passage de la souris sur le lien, après un court délai. L'info-bulle permet d'ajouter un complément d'informations au lien et doit être utilisée comme telle. Voici un exemple d'info-bulle qui s'affichera si on passe la souris sur le lien "plan du site" que nous avons vu tout à l'heure :
<a href="plan.html" title="Consultez le plan du site suivant votre profil">Plan du site</a>
Comme vous pouvez le constater, on a rajouté l'attribut title qui permet de dire que l'on va ajouter une info-bulle. L'info-bulle qui sera affichée contiendra le texte suivant : Consultez le plan du site suivant votre profil. C'est aussi simple que ça :)
Envoyer un mail
Si vous souhaitez faire un lien qui ouvre votre client mail par défaut et vous permet de vous envoyer un mail, voici comment vous pouvez procéder :
<a href="mailto:votre_adresse_mail@votre_fai.fr">Contactez-moi</a>
Vous devez faire un lien de cette forme :
- mailto: : indique que vous souhaitez envoyer ouvrir le client mail par défaut
Vous placez ensuite après le mailto: votre adresse email, et celle-ci apparaîtra dans le client mail de l'internaute, qui n'aura plus qu'à rédiger son message. Il y a par contre un gros problème avec cette méthode : de plus en plus de robots de SPAM sillonnent le web à la recherche de liens de ce style. Ils récupèrent les adresses mails (souvent à l'aide d'expressions régulières), puis les innondent de SPAM. Pour remédier à cela, il existe plusieurs moyens. Je vais vous en détailler quelques uns :
- Vous pouvez remplacer le @ dans l'adresse mail par des caractères comme _AT_, cependant cette forme est très connue des robots. Corsez un peu le lien comme ceci par exemple : <a href="mailto:votre_adresse_mail_CHEZ_fai_POINT_fr">Contactez-moi (remplacez _CHEZ_ par @ et _POINT_ par .)</a>
- Une solution bien plus efficace consiste à créer une image qui affiche sous forme textuelle votre adresse mail. Les robots ne savent généralement pas reconnaître automatiquement les caractères d'une image, vous serez donc tranquille. Veuillez quand même à ne pas utiliser une police trop courante, de changer certains caractères de couleur, de taille, de leur faire subir quelques rotations ... afin d'être sûr.
Il existe d'autres solutions réalisables en PHP notamment, mais qui dépassent le cadre de ce cours.
URL un peu spéciales
Vous avez surement dû voir des adresses web de la forme page.php?x=valeur1&y=valeur2 par exemple. Ces adresses web ne vous seront généralement pas utiles en XHTML, mais il faut juste savoir que les & doivent s'écrire dans le code source &, ceci afin de respecter les recommandations XHTML. Voici l'exemple d'un lien de ce style :
<a href="page.php?x=valeur1&y=valeur2">Consulter la page</a>
Chapitre suivant
- Les images
- Insérer une image en XHTML
- Texte alternatif et info-bulles
- Les différents formats d'images