Créer des liens

Les liens sont très importants en html. On en voit de partout. Et c'est sans doute cela qui différencie le web d'un journal.

Question toute bête : qu'est-ce qu'un lien ? Un lien est le plus souvent un texte assez spécial. Lorsque l'on pointe dessus, la souris devient une main. C'est un des moyens de le reconnaître. Mais ce n'est pas tout ! Un texte qui fait lien est en général bleu et souligné.

Lorsque l'on clique sur un lien, on arrive sur une autre page ou sur une autre partie de la même page.
Et c'est par cela que l'on représente le web.

Concept relatif - absolu

Pour indiquer où se trouve un fichier cible (celui que l'Internaute voit après avoir cliqué sur un lien), vous aurez 2 moyens...

Le premier est appelé : "Adresse en absolu". Ce mot vous fait peut-être peur, mais il n'y a rien de sorcier là-dedans.

L'adresse du fichier doit être écrite en entier et vous devrez aussi préciser le type de lien (voir plus bas). Sur Internet, on écrira par exemple :

http://perso.provider.fr/jdupont/cible.html

Si bien sûr, le fichier de destination s'appelle cible.html. Idem sur votre disque dur, cela serait :

c:\Site perso\cible.html

Ce moyen est précis, mais assez long. Utilisez-le si vous voulez qu'un lien amène à un endroit précis.

Deuxième solution : utiliser une "Adresse en relatif". Ce doit être de loin le moyen le plus utilisé. Il est un peu plus compliqué et plus vague que l'absolu, mais il est plus utilisé car il a quelques avantages (l'adresse devient plus courte). Accrochez-vous aux exemples suivants...

Supposons que le fichier qui contient le lien se trouve dans :

c:\Site perso\sommaire.html

Et que le fichier cible se trouve dans le même dossier, c'est-à-dire :

c:\Site perso\cible.html

Alors, dans ce cas-là, on écrira que le lien amène vers :

cible.html

Tout court ! Maintenant, corsons la chose : sommaire.html ne change pas de dossier, mais cible.html, lui, se trouve dans un sous-dossier. Disons :

c:\Site perso\Dossier\cible.html

En relatif, on a :

Dossier/cible.html

Je vous coupe ici pour vous faire une remarque très importante :
Sur le web, pour séparer les dossiers, on utilise les /. Contrairement à votre P.C. (surtout avec dos) qui utilise les \. Ceci dit, Windows comprend les /.

Reprenons. Autre cas de figure : sommaire.html ne bouge toujours pas, mais cible.html se trouve dans le dossier précédent :

c:\cible.html

On utilise ici les deux points ..

../cible.html

Pensez aussi que vous pouvez tout mélanger : les Dossier/ et les ../ ! Mais en général un site n'est pas aussi compliqué que ça !

C'est donc un concept à connaître. Je vous conseille d'utiliser les "Adresses en relatif".
Pourquoi en relatif ? Eh bien, si votre site n'est pas très complexe, cela vous permettra de pouvoir visualiser les pages sur votre disque dur aussi bien que sur le web ! Parce que si l'adresse commence par http://, il faudra que vous soyez connecté pour voir les pages, et réciproquement...

Types de liens

Vous l'avez vu, les types de liens se rapportent à l'absolu. Des fois, il est nécessaire de créer des liens en absolu, car on n'a pas le choix. Vous avez ici une liste des types de liens (les plus importants) que vous pourrez utiliser, avec leur description.

http://

Ce type de lien amène vers une page html quelque part sur le web.

ftp://

Il est utilisé pour donner l'adresse d'un fichier à télécharger.

telnet://

Adresse d'un serveur Telnet (il faut cependant que le navigateur reconnaisse le Telnet)

gopher://

Donne l'adresse de fichiers sur un serveur gopher.

news:

Amène vers un groupe de news.

mailto:

Sert à envoyer une adresse e-mail à quelqu'un.

Notez qu'il s'agit là de préfixes, et qu'il faut donc donner l'adresse en entier ! Par exemple :

mailto:jdupont@sonprovider.fr

Créer un lien

Assez bavardé, on y va ! Pour créer un lien, vous devez d'abord écrire le texte sur lequel l'Internaute cliquera. Entourez-le ensuite du tag, on-ne-peut-plus-simple : <a>. Ce qui donne :

<a>Cliquez ici !</a>

On croirait que l'on a fait exprès de choisir un nom si simple, pour ne pas l'oublier...
Cependant, le tag <a> ne peut exister sans attributs ! Il faut au moins préciser l'adresse ou l'endroit de la page.

C'est donc ici se séparent les 2 moyens d'utiliser un lien, le premier amène à une autre page, le second à un autre endroit de la page.

Le lien amène à une autre page

Ajoutez l'attribut href et précisez-le de l'adresse que vous voulez (vous allez maintenant réutiliser ce que vous avez appris). Par exemple :

<a href="http://perso.sonprovider.fr/jdupont/cible.html">
Cliquez ici !</a>

Ou bien en relatif :

<a href="cible.html">Cliquez ici !</a>

Vous pouvez tout aussi bien proposer d'envoyer un mail :

<a href="mailto:jdupont@sonprovider.fr">M'envoyer un mail
</a>

Vous voyez toutes les possibiltés qui s'offrent à vous !

Ici se séparent les 2 moyens d'utiliser un lien, le premier amène à une autre page, le second à un autre endroit de la page.

Le lien amène à un autre endroit de la page

Si vous voulez qu'un lien amène à un autre endroit de la page (c'est surtout intéressant si vous avez une grande page), vous n'avez pas besoin de changer l'attribut href. Mais il vous faut d'abord définir l'endroit où le lien amènera. On appelle cet "endroit" une ancre.

Pour faire une ancre, placez-vous à l'endroit désiré et entourez-le du tag <a>. Ajoutez-lui l'attribut name, puis précisez name par le mot de votre choix. Essayez quand même de ne pas faire un grand mot, et de ne pas insérer de caractères spéciaux.
On obtient alors quelque chose comme ça :

<a name="bobo">Vous vous êtes fait mal ?</a>

Par contre, on ne voit pas qu'il s'agit d'une ancre, car, contrairement aux liens, il ne se différencie pas du texte normal. Mais votre navigateur en a besoin pour connaître l'endroit où aller.

2° étape : créer le lien. Je vous ai dit que l'on n'a pas besoin de changer le tag href, et c'est vrai. Mais ce qui va changer sera la façon dont vous écrirez l'adresse...
Après le ", mettez directement un #. Juste après, écrivez le nom de l'ancre :

En cas de bobo, <a href="#bobo">cliquez ici pour lire le
chapitre traitant de cela.</a>

Mieux, vous pouvez combiner les 2 moyens d'utiliser un lien. C'est à dire que le lien amènera à un endroit précis d'une autre page. Exemple :

<a href="sommhtml.html#bas">Go !</a>

Reprenons un exemple concret avec Jean Dupont. Observez particulièrement le lien vers une adresse e-mail. Après un ? (sans espaces), on ajoute subject=, et on écrit alors le sujet de l'e-mail. Voyez plutôt :

<html>

<head>
<title>La page personnelle de Jean Dupont</title>
<!-Quelques tags meta->
</head>

<body>

Bonjour, bienvenue sur la page personnelle de Jean Dupont,
qui a été créée il y a peu.<p>Vous m'excuserez du manque
d'informations et de rubriques que je ne tarderai pas à
vous proposer...<br>En attendant, vous trouverez quelques
adresses susceptibles de vous intéresser :<p>

<a href="../sommhtml.html#bas">Apprenez le html !(bas de 
la page)</a>
<br>Vous pouvez <a href="mailto:jdupont@sonprovider.fr
?subject=Je veux te parler">
m'envoyer un mail.</a>

</body>

</html>

J'ai mis quelques entrées pour faciliter la lecture de l'exemple.

Vous avez peut-être remarqué que l'adresse : "../sommhtml.html", contient des .. Si vous voulez savoir pourquoi, voilà la réponse : les exemples se trouvant dans un sous-dossier appelé "Exemples", il faut écrire l'adresse avec .. car le sommaire se trouve dans le dossier précédent.

Fin du chapitre sur les liens. Vous allez à partir de maintenant apprendre à embellir votre page, car, pour l'instant, le résultat est plutôt loin des pages web que vous visitez !