Dans le chapitre précédent, vous avez appris à créer une page XHTML toute simple. Bien moche je vous l'accorde, mais c'était une page XHTML quand même. Vous avez appris beaucoup de choses d'un coup. Aussi, pour vous laisser le temps de digérer, ce chapitre est bien moins condensé que le précédent
Dans ce chapitre, nous allons apprendre à faire des
liens entre vos pages.
Je suppose que chacun d'entre vous sait ce qu'est un lien : un texte sur lequel on peut cliquer pour se rendre sur une autre page.
On peut faire un lien d'une page a.html vers une page b.html, mais on peut aussi faire un lien vers un autre site (ex. : http://www.siteduzero.com). Dans les 2 cas, le fonctionnement est le même.
Avant de vous montrer le code XHTML qui vous permet de créer des liens, je dois
absolument vous apprendre à faire la différence entre des liens
absolus et des liens
relatifs.
Allez, qui m'aime me suive !
... Bon allez quoi soyez cool, me laissez pas tout seul
Comme je vous l'ai dit rapidement dans l'introduction, on distingue 2 types de liens :
- Les liens internes à son site : normalement, votre site comportera plusieurs pages XHTML (ou alors il sera bien pauvre !). Si vous voulez faire un lien d'une page à une autre, vous ferez le plus souvent ce qu'on appelle des liens relatifs. Un lien relatif est assez court, par exemple "fichiers/cible.html".
- Les liens vers d'autres sites : ce sont par exemple des liens vers "http://www.siteduzero.com", ou vers un fichier précis (par exemple "http://www.siteduzero.com/fichier.html"). Ces liens sont appelés liens absolus et, contrairement aux liens relatifs, ils commencent souvent par "http://".
Les liens les plus simples à priori sont les liens absolus :
http://www.siteduzero.com/page.html
... est un lien absolu. Pas compliqué jusque-là, mais un peu long à écrire.
Supposons maintenant que vous ayez 2 pages XHTML qui se trouvent dans le même dossier sur votre disque dur :
c:\site\source.html
c:\site\cible.html
Vous voulez faire un lien de source.html vers cible.html. Là c'est très simple, comme les fichiers se trouvent dans le même dossier il suffira d'écrire juste "cible.html" !
Si les fichiers ne se trouvent pas dans le même dossier :
Je ne veux pas vous embrouiller avec ces notions qui sont un peu nouvelles et abstraites pour vous. Vous allez voir en pratiquant que c'est en fait vraiment très simple et intuitif à utiliser.
D'ailleurs, on fera le plus souvent des liens relatifs, et comme pour commencer on mettra toutes nos pages .html dans le même dossier, il suffira juste d'écrire le nom de la page vers laquelle amène le lien : "page.html" par exemple.
Rentrons dans le vif du sujet maintenant
Pour faire un lien, on utilise la balise <a> (facile à retenir hein ;))
On doit ajouter l'attribut "href" pour indiquer l'adresse de la page cible (la page vers laquelle le lien amène).
Nous allons commencer par apprendre à faire quelque chose de vital : un lien vers le Site du Zér0 (comment vivriez-vous sans savoir faire ça ?) :
Code : HTML1
2 | <p>Hep ! Je connais un site qui est vraiment super : le <a href="http://www.siteduzero.com">Site du Zér0</a><br />
N'hésitez pas à aller le visiter, il vaut <em>vraiment</em> le coup d'oeil ;)</p>
|
C'est d'une simplicité effarante n'est-ce pas ? Vous mettez le texte du lien entre les balises <a> et </a>, et vous indiquez l'adresse de la page dans le
href=""
Nous venons de faire ici un lien en absolu vers un autre site ("http://"...). Maintenant, nous allons voir comment faire un lien en relatif.
Je crée 2 pages : source.html et cible.html.
source.html contient un lien vers cible.html, et les 2 pages se trouvent
dans le même dossier. Voici comment je vais procéder :
Code : HTML1
2
3
4 | <h1>source.html</h1>
<p>Tu te trouves sur source.html<br />
Souhaites-tu visiter <a href="cible.html">le fichier cible.html</a> ?</p>
|
1
2
3 | <h1>cible.html</h1>
<p>Bravo ! Tu viens d'atterir sur cible.html !</p>
|
Le bouton ci-dessous ouvre la page source.html :
Pour faire plus court, j'ai omis dans mes exemples les autres balises d'en-tête qui constituent d'habitude une page XHTML (<html>, <head> etc...), mais il est bien entendu qu'il faut les mettre pour faire une vraie page XHTML.
Voilà, tout le principe de la chose est là : le lien est <a href="cible.html"> ce qui est très court. Cela implique par contre que la page cible.html se trouve dans le même dossier.
Si la page s'était trouvée dans un sous-dossier, on aurait fait le lien comme je vous l'ai expliqué plus haut dans ce chapitre :
<a href="dossier/cible.html">
Une bulle d'aide sur le lien
Vous pouvez, si vous le désirez car ce n'est pas obligatoire, utiliser l'attribut title : une bulle d'aide s'affichera lorsque vous pointerez sur le lien. Ca ressemblera à ça :
La bulle d'aide peut être utile pour informer le visiteur de quelque chose avant même qu'il n'ait cliqué sur le lien.
Voici comment faire :
Code : HTML1 | <p>Allez donc visiter le <a href="http://www.siteduzero.com" title="Site réservé aux débutants">Site du Zér0</a></p>
|
Le cas des liens ouvrant une nouvelle fenêtre
Et si je veux que mon lien s'ouvre dans une nouvelle fenêtre ?
Ce n'est pas possible.
Beaucoup de sites le font, c'est vrai, mais en XHTML il n'est plus possible d'ouvrir les liens dans une nouvelle fenêtre.
C'est une décision qui a été prise : désormais on ne force plus les liens à ouvrir automatiquement une nouvelle fenêtre. Ceci afin de ne pas gêner la navigation du visiteur qui n'a pas forcément envie de voir 50 fenêtres de son explorateur ouvertes.
C'est au visiteur de
décider lui-même s'il veut ouvrir le lien dans une nouvelle fenêtre. Il fera Maj + Clic sur le lien (fonctionne sur IE et Mozilla), ou encore mieux : Ctrl + Clic (pour ouvrir dans un nouvel onglet dans Mozilla ;)).
Enfin, chose importante à savoir pour que vous compreniez un peu mieux : les personnes non-voyantes qui surfent sur le web sont perturbées par l'ouverture d'une nouvelle fenêtre de leur navigateur. Quand une nouvelle fenêtre s'ouvre, il n'est plus possible de faire "Précédente", et cela perturbe beaucoup les personnes handicapées.
C'est aussi par respect pour ces personnes-là qu'on a décidé aujourd'hui de ne plus forcer un lien à ouvrir une nouvelle fenêtre du navigateur.
J'espère que vous comprendrez et que vous appliquerez cette règle, elle est vraiment très importante.
S'il est impossible d'ouvrir une nouvelle fenêtre en XHTML, on peut en revanche le faire à l'aide de Javascript. Utilisée avec parcimonie, cette méthode est "tolérée" mais ce n'est pas de notre niveau.
Un lien pour envoyer un mail
Si vous voulez que vos visiteurs puissent vous envoyer un mail, vous pouvez utiliser des liens "mailto". Rien ne change au niveau de la balise, vous devez simplement modifier la valeur de l'attribut
href comme ceci :
href="mailto:votrenom@bidule.com"
Il suffit donc de faire commencer le lien par "mailto:" et d'écrire l'adresse e-mail où on peut vous contacter. Un exemple :
Code : HTML1
2
3 | <h2>Me contacter</h2>
<p>Pour me contacter, <a href="mailto:jean.dupont@free.fr">cliquez ici</a> !</p>
|
Si vous cliquez sur le lien, un nouveau message vide s'ouvre, prêt à être envoyé à votre adresse e-mail
Beuh, c'est quoi une ancre ?
Une
ancre, c'est une sorte de point de repère que vous pouvez mettre dans vos grosses pages XHTML.
En effet, si votre page est très grande il peut être utile de faire un lien amenant plus bas dans la même page pour amener le visiteur directement à la partie qui l'intéresse.
Pour créer une ancre, il suffit de rajouter l'attribut
id à une balise qui va alors servir de repère. Ce peut être n'importe quelle balise, un titre par exemple.
Utilisez l'attribut
id pour donner un nom à l'ancre, ce qui va vous servir ensuite pour faire le lien vers cette ancre. Par exemple :
<h2 id="mon_ancre">Titre</h2>
Ensuite, il suffit de faire un lien comme d'habitude, mais cette fois l'attribut
href contiendra un dièse (
#) suivi du nom de l'ancre. Exemple :
<a href="#mon_ancre">Aller vers l'ancre</a>
Normalement, si vous cliquez sur le lien, cela vous amènera plus bas dans la même page (à condition que la page comporte suffisamment de texte pour que les barres de défilement se déplacent automatiquement).
Voici un exemple de page comportant beaucoup de texte et utilisant les ancres (j'ai mis n'importe quoi dans le texte pour remplir :p) :
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27 | <h1>Ma grande page</h1>
<p>
Aller directement à la partie traitant de :<br />
<a href="#cuisine">La cuisine</a><br />
<a href="#rollers">Les rollers</a><br />
<a href="#arc">Le tir à l'arc</a><br />
</p>
<h2 id="cuisine">La cuisine</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pharetra volutpat nisl. Nullam sollicitudin nulla eget justo. Maecenas urna dui, mollis ut, tristique sit amet, adipiscing nec, neque. Praesent bibendum tempor metus. Sed vitae tellus mollis magna luctus ultrices. Mauris sollicitudin aliquet nunc. Aenean urna. Duis lorem. Proin augue. Quisque interdum felis eu diam.</p>
<p>Etiam pede lectus, facilisis sit amet, varius a, malesuada varius, nisl. Aenean aliquam, odio quis semper cursus, nisl lacus rutrum ipsum, a laoreet neque ante vitae tortor. In hac habitasse platea dictumst. Ut at neque interdum enim pharetra commodo. Curabitur erat mi, congue ut, volutpat vel, semper ac, wisi. Sed non metus vel massa pharetra euismod. Nunc quis quam. Curabitur non libero a libero semper tincidunt. Mauris vehicula dui a wisi. Quisque nisl dolor, tempus nec, tristique vitae, eleifend eget, nunc. Duis dapibus, lectus eget egestas consectetuer, nibh metus pharetra nisl, vitae rutrum mi tellus placerat nulla. Praesent sed libero non enim suscipit aliquet. Proin tincidunt pede sit amet eros.</p>
<p>Phasellus sed nisl. Integer rhoncus risus vitae arcu. Praesent sed diam non justo sagittis vulputate. Etiam faucibus posuere tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam porta. Vestibulum lectus ante, laoreet a, condimentum sit amet, dictum ac, sapien. Ut et tortor. Aliquam vitae lacus. Vestibulum non pede eget ante elementum elementum. Quisque accumsan wisi id quam. Integer tortor justo, cursus volutpat, vehicula ut, pellentesque ultrices, neque. Aenean eu tortor vitae dui pretium molestie. Sed dui nibh, rhoncus ut, egestas quis, commodo id, magna. Morbi gravida tellus id diam. Nunc nonummy leo nec velit. Curabitur id lacus a ipsum lacinia accumsan.</p>
<h2 id="rollers">Les rollers</h2>
<p>Nunc ullamcorper imperdiet lorem. Aliquam convallis, sapien sit amet malesuada dignissim, sem tortor interdum risus, vel scelerisque sapien est ac justo. Sed varius nisl lacinia libero accumsan luctus. Nam luctus leo. In hac habitasse platea dictumst. Donec eget massa. Vivamus arcu ante, condimentum eu, imperdiet et, pulvinar vel, neque. Morbi auctor. Sed ac ligula. Pellentesque adipiscing orci id ipsum. Fusce ipsum. Cras eget neque. Nulla at sapien ornare augue tempor viverra. Praesent vulputate. Mauris mi. Quisque quam. Cras fermentum orci non risus. Phasellus quis augue vitae felis tincidunt dignissim. Vestibulum ut nulla at eros sagittis ullamcorper.</p>
<p>Sed vel erat. Aenean a massa. Quisque ultricies, dolor non rutrum ullamcorper, lorem ligula blandit pede, malesuada volutpat magna dolor et ante. In tellus felis, tincidunt eget, adipiscing eu, gravida sit amet, lorem. Proin dolor. Proin vel elit. Morbi vel enim. Aenean congue enim sed ipsum. Praesent tristique. Ut placerat metus sed nibh. Sed sit amet urna. Morbi et lorem. Sed a erat eget dolor sollicitudin ornare. Maecenas nibh. Quisque tincidunt. Sed odio diam, dapibus a, interdum non, convallis id, pede. Donec condimentum eros eu nunc consequat commodo. Donec tempus fringilla eros.</p>
<p>Mauris mollis luctus urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse consectetuer sem at urna. Aliquam dui magna, congue non, porttitor vitae, varius a, lacus. Duis nec enim. Quisque malesuada, lectus vel laoreet egestas, lorem nibh ultricies elit, et varius velit erat vel risus. Maecenas pellentesque nibh et purus. Nulla commodo justo vitae odio. Sed ornare. Quisque at tortor. Donec mi. Vestibulum consectetuer congue purus. Aenean pulvinar.</p>
<h2 id="arc">Le tir à l'arc</h2>
<p>Nam vel arcu quis justo condimentum egestas. Aliquam dictum wisi. Nam lorem. Ut scelerisque. In velit tortor, venenatis eget, ultricies id, mollis nec, dui. Morbi nec ante vitae libero fermentum aliquam. Ut non quam. Cras ac urna. Aenean sollicitudin turpis sit amet quam. Quisque lacinia. Proin mollis. Vestibulum dapibus, nulla sit amet lacinia dapibus, est odio condimentum lorem, id aliquam lorem enim vitae nibh. Nulla tortor. Nunc pulvinar. Vestibulum malesuada wisi et urna.</p>
|
S'il ne se passe rien quand vous cliquez sur les liens, c'est qu'il n'y a pas assez de texte. Dans ce cas, vous pouvez soit rajouter du blabla dans la page pour qu'il y ait (encore) plus de texte, ou bien réduire la taille de la fenêtre de votre navigateur pour faire apparaître les barres de défilement sur le côté.
Lien vers une ancre située dans une autre page
Alors là je vous préviens, on va faire le Mégamix ?
L'idée, c'est de faire un lien qui ouvre une nouvelle page ET qui amène directement à une ancre située plus bas sur cette page.
En pratique c'est assez simple à faire : il suffit de taper le nom de la page, suivi d'un dièse (
#), suivi du nom de l'ancre.
Par exemple :
<a href="cible.html#rollers">
... vous amènera sur la page cible.html, directement au niveau de l'ancre appelé "rollers".
Voici une page qui contient 3 liens, chacun amenant vers une des ancres de la page de l'exemple précédent :
Code : HTML1
2
3
4
5
6
7 | <h1>Le Mégamix <sup>TM</sup></h1>
<p>
Rendez-vous quelque part sur une autre page :<br />
<a href="ancres.html#cuisine">La cuisine</a><br />
<a href="ancres.html#rollers">Les rollers</a><br />
<a href="ancres.html#arc">Le tir à l'arc</a><br />
</p>
|
Pff c'est trop fastoche
Allez on va arrêter là, parce que si ça continue le XHTML va finir par être accessible même à des mômes de 10 ans
(ps : si vous avez 10 ans et que vous lisez ces lignes, ne m'en veuillez pas ! Je sais qu'il y a de nombreux lecteurs de cet âge, je disais ça juste pour plaisanter hein 
)
Siteduzero.com
Newbiesparadise.com