Dans ce chapitre, on va apprendre à créer des liens en XHTML !
2 types de liens
Il existe 2 types de liens :
-
Les liens relatifs : ce sont les liens internes à votre site. Ils permettent d'aller de page en page. Généralement, les liens en relatif sont assez courts. Exemple : "cible\html" .
-
Les liens absolus : ce sont les liens vers d'autres site. Ils sont plus longs que les relatifs. Exemple : "http://tout-pour-ton-blog.oldiblog.com/" .
Exemple :
- Vous avez 2 page web dans un même dossier :
C:\fichiers\acceuil.html
C:\fichiers\cible.html
On veut faire un lien allant de acceuil.html à cible.html . On écrira tout simplement "cible.html" !
- Si maintenant nous avons cible.html dans un sous dossier, et acceuil.html ne change pas de place :
C:\fichiers\dossier\cible.html
On écrira alors : "dossier\cible.html" .
- Cette fois, c'est acceuil.html qui se trouvera dans un sou dossier :
C:\fichiers\dossier\acceuil.html
C:\fichiers\cible.html
Pour remonter un dossier, on met ".." .On écrira donc : "..\cible.html" .
ATTENTION : Ne confondez pas avec les antislash (\) de Windows : sur Internet, on utilise TOUJOURS des slash (/) !
Pour commencer, je vous conseille de mettre toutes vos pages html dans un même dossier, ce sera plus simple.
Un lien vers une autre page
A la pratique, mainenant ! :D
Les balises pour insérer un lien sont
<a> et
</a> , avec le text entre.
On doit ajouter l'attribut "
href" pour indiquer l'adresse de la page ciblé .
Donc, quelque chose de vital : un lein vers Tout pour ton blog ^^
<p>Hep ! Je connais un site qu'il est vraiment super : <a href="http://tout-pour-ton-blog.oldiblog.com/">Tout pour ton blog !</a><br />
N'hésitez pas à aller le visiter, il vaut <em>vraiment</em> le coup d'oeil ;)</p>
C'est horriblement simple, non ;)
C'était un lien absolu, maintenant voyons les liens relatifs, avec 2 pages :
C:\fichier\acceuil.html
C:\fichier\cible.html
Acceuil.html
<h1>Acceuil.html</h1>
<p>Tu te trouves sur acceuil.html<br />
Veux-tu visiter <a href="cible.html">le fichier cible.html</a> ?</p>
Cible.html
<h1>cible.html
</h1> <p>Bravo ! Tu viens d'atterir sur cible.html ! <br/>Pour retourner sur acceuil.html, clique <a href="acceuil.html"> ici
</a> !!!</p>
Une bulle d'aide :
Même si ce n'est pas obligatoire, vous pouvez utiliser l'attribut "
title". Il affichera une bulle d'aide quand la souris pointera sur le lien.
Exemple :
<p><a href="http://tout-pour-ton-blog.oldiblog.com/" title="Un blog pour t'aider à faire ton blog">Tout pour ton blog !
</a></p>
Liens ouvrant dans une nouvelle fenêtre :En HHTML, ouvrir un lien dans une nouvelle fenêtre n'est plus possible. Pourquoi ?
D'abord parce que le visiteurs n'a pas forcément envie de voir 36 fenêtre s'ouvir, ensuite car ça gène beaucoup les personnes mal-voyantes, qui ne peuvent alors plus faire "précédent" .
C'est donc au visiteur de décider s'il veut ouvrir le lien dans une nouvelle fenêtre en faisant Maj + clic .
J'éspère que vous comprenez cette règle, elle est très importante.
Un lien pour envoyer un mail :Pour mettre en lien envoyant un mail, rien ne change au niveau de la balise, il faut juste modifier la valeur de "
href" comme ça :
href="mailto:votrenom@bidule.com"
il suffit donc de mettre en valeur "mailto:", suivis de l'adresse mail.
Un lien vers une ancre
Une ancre,vous vous demandez ce que c'est ?
Eh bien, une
ancre, c'est un répère sur votre page web. Si votre page est très longue, il est utile de mettre des liens allant tout en bas et tout en haut ;)
En voila :
2 types de liensUn lien vers une autre pagePour créer une ancre, il suffit de rajouter
id à n'importe quelle balise, un paragraphe, un titre...
Cela va nous permettre de réaliser un lien vers cette ancre.
Exemple :
<p id="rose">Le rose est... rose ^^ </p>
Ensuite, pour créer le lien, il faut mettre dans la valeur un # , suivis du nom de l'ancre.
Ici, l'ancre est rose :
<a href="#rose">Aller vers l'ancre Rose</a> Quand vous cliquez sur le lien, la page se mettra toute seule à la hauteur de l'ancre ( si biensûr votre page est assez longue ).
Un lien vers une ancre située sur une autre page :
Et ouais, vous vous y attendiez ! C'est la MégaMix, maintenant !
En fait, c'est plutôt simple : l'idée, c'est de faire un lien vers une autre page et vers une ancre ...
Il suffit donc de taper le nom de la page, suivis d'un dièse # et du nom de l'ancre !
C'est facile, hein ? Allez, bientôt un nouveau chapitre !
