Dans cette lecon, vous apprendrez a faire des liens entre les pages.
Pour faire un lien, on se sert de ce qu'on utilise toujours pour coder du HTML : un element. Un simple element avec un seul attribut et vous pourrez relier tout et n'importe quoi. Voici un exemple montrant a quoi un lien vers HTML.net aurait l'air :
<a href="http://www.html.net/">Voici un lien vers HTML.net</a>
Ce qui donnerait dans le navigateur :
L'element a tient pour anchor (N.d.T. ancre). Et l'attribut href est l'abreviation de
hypertext reference (N.d.T. appel hypertexte), qui indique ou conduit le lien, habituellement a une adresse Internet
ou a un nom de fichier.
Dans l'exemple precedent, l'attribut href vaut "http://www.html.net", ce qui correspond a l'adresse complete de
HTML.net et qu'on appelle une adresse URL (Uniform Resource Locator). Notez qu'il faut toujours inclure http:// dans les
adresses URL. L'expression Voici un lien vers HTML.net est le texte affiche dans le navigateur pour le lien.
Rappelez-vous de clore l'element par </a>.
Si voulez faire un lien entre des pages sur le meme site, il n'est pas necessaire d'ecrire l'adresse (URL) entiere du document. Par exemple, si vous avez deux pages (appelons-les page1.htm et page2.htm) enregistrees dans le meme dossier, vous pouvez faire un lien d'une page a l'autre simplement en inscrivant le nom du fichier dans le lien. Dans ces conditions, un lien de page1.htm vers page2.htm apparaitrait comme ceci :
<a href="page2.htm">Cliquez ici pour aller a la page 2</a>
Si la page 2 se trouvait dans un sous-dossier (appele "sous-dossier"), le lien serait alors :
<a href="sous-dossier/page2.htm">Cliquez ici pour aller a la page 2</a>
En sens inverse, un lien de la page 2 (dans le sous-dossier) a la page 1 serait le suivant :
<a href="../page1.htm">Un lien vers la page 1</a>
Le chemin ../ pointe sur le dossier a un niveau superieur par rapport a la position du fichier ou le lien se trouve. En suivant le meme raisonnement, vous pouvez aussi pointer sur une position deux dossiers (ou plus) en amont avec ../../ .
Vous avez compris le systeme ? Autrement, vous pouvez toujours ecrire l'adresse (URL) complete du fichier.
On peut egalement creer des liens internes a une page, par exemple, une table des matieres en haut de la page avec des liens
vers chaque chapitre en-dessous. Vous avez seulement besoin d'un attribut tres utile, appele id (pour identification),
et du symbole # .
Utilisez l'attribut id pour marquer l'element que vous voulez relier. Par exemple :
<h1 id="heading1">titre 1</h1>
On cree ensuite un lien vers cet element en utilisant le symbole # dans l'attribut de liaison. Le # indique au navigateur
de rester sur la meme page. Ce caractere doit etre suivi de l'id de la balise a relier. Par exemple :
<a href="#heading1">Lien vers le titre 1</a>
Tout sera plus clair avec un exemple :
<html>
<head>
</head>
<body>
<p><a href="#heading1">Lien vers le titre 1</a></p>
<p><a href="#heading2">Lien vers le titre 2</a></p>
<h1 id="heading1">Titre 1</h1>
<p>Texte texte texte texte</p>
<h1 id="heading2">Titre 2</h1>
<p>Texte texte texte texte</p>
</body>
</html>
Dans le navigateur, cela apparaitra comme ceci (cliquez sur les deux liens) :
(Remarque : L'attribut id doit commencer par une lettre).
On peut egalement faire un lien vers une adresse e-mail. Cela se fait presque de la meme facon que pour relier un document :
<a href="mailto:nobody@html.net">Envoyer un e-mail a nobody chez HTML.net</a>
Dans le navigateur, cela donne :
La seule difference entre un lien d'e-mail et un lien de fichier, c'est que l'on tape mailto:
suivi d'une adresse e-mail au lieu de taper l'adresse d'un document. Au clic du lien, le programme de messagerie par defaut se lance
avec un message vide pour l'adresse e-mail indique. Veuillez noter que cela fonctionnera seulement si un programme de messagerie
est installe sur votre ordinateur. Essayez donc !
Pour creer un lien, vous devez toujours utiliser l'attribut href. Vous pouvez en outre placer
un attribut title sur le lien :
<a href="http://www.html.net/" title="Visitez HTML.net pour apprendre HTML">HTML.net</a>
Cela apparaitra ainsi dans le navigateur :
L'attribut title sert a fournir une breve description du lien. Si vous positionnez le curseur sur le lien sans le cliquer, vous verrez apparaitre le message Visitez HTML.net pour apprendre HTML .