Les liens

1. Des liens pour naviguer...

Nous voici maintenant arrivé à l'un des aspects les plus intéressants du Xhtml : les liens hypertexte.
Ce sont eux qui permettent de lier les pages entre-elles afin de construire cet immense réseau qu'est l'Internet.
Nous allons donc apprendre ici à mettre en place ces liens.
Vous pourrez ainsi lier entre-elles les différentes pages qui composent votre site Web.

Je vous propose d'étudier la mise en place des liens dans cet ordre :

• Syntaxe de base d'un lien
• L'adressage absolu
• L'adressage relatif
• Les ancres
• L'envoi d'emails

Encore une fois tout cela reste assez simple mais n'oubliez pas qu'il est important de pratiquer pour bien saisir toutes les subtilités de ces notions !!

2. Syntaxe de base d'un lien

La balise de base d'un lien n'est pas très compliquée à retenir, la voici : <a> ... </a>.

Par contre utilisée sans attribut cette balise n'a pas beaucoup d'intérêts...
Vous devrez donc toujours l'utiliser avec l'attribut " href " qui prend pour valeur l'url de destination du lien.

Un exemple sera sans doute plus parlant : Il est également important pour des raisons d'accessibilité et deréférencement de prendre l'habitude de donner des titres à vos liens.
On utilise pour cela l'attribut " title " :
Notez que vous pouvez faire un lien vers toute sorte de types de documents : html, php, pdf, doc, jpg, swf, etc...

3. L'adressage absolu

Comme nous l'avons vu ci-dessus faire un lien nous impose d'indiquer le chemin d'accès au document que nous souhaitons lier.
En informatique il existe 2 méthodes d'adressage pour indiquer le chemin d'un fichier.
Nous allons pour le moment nous intéresser à la méthode d'adressage absolu qui est la plus simple à comprendre et à utiliser.

L'adressage absolu consiste à indiquer le chemin complet permettant d'accèder au document.

Par exemple le chemin absolu de cette page est :
http://www.netgerdesign.com/developpement/xhtml/les-liens.html

Dans ce type d'adressage on retrouve donc toujours la racine et le nom du document.
Éventuellement si le document ne se trouve pas à la racine (comme c'est le cas dans l'exemple ci-dessus) les noms des dossiers où il est rangé apparaitrons également.

4. L'adressage relatif

Voyons maintenant ce qui en est de l'adressage relatif.
Rassurez-vous celui-ci n'est pas beaucoup plus compliqué quel'adressage absolu mais il demande parfois un tout petit peu plus deréflexion car comme son nom l'indique il est relatif !

Et bien relatif au document où vous placez le lien en question !!
Le chemin vers le document cible est donc noté en prenant pour point de départ le document où se trouve le lien.

Je conçois que tout cela n'est pas très limpide et je vous propose donc de passer à un petit exemple.

Imaginons que nous disposons de l'arborescence suivante :

• index.php
• dossier-graphisme
  • tutoriaux-photoshop.php
  • cours-photoshop
    • cours1.php
    • cours2.php
    • cours3.php
• dossier-webmastering
  • tutoriaux-dreamweaver.php
  • webmastering
    • introduction.php
    • le-xhtml
      • cours1.php
      • cours2.php
      • cours3.php

Pour commencer prenons comme point de départ le fichier qui se trouve à la racine, soit " index.php ".
En partant de cette page pour aller jusqu'au fichier " tutoriaux-photoshop.php " nous utiliserons donc le chemin suivant :
dossier-graphisme/tutoriaux-photoshop.php

Toujours pour cet exemple un lien pointant sur le premier cours de la partie Xhtml se notera ainsi :
dossier-webmastering/webmastering/le-xhtml/cours1.php

Lorsque vous utilisez l'adressage relatif vous pouvez indiquer une remontée au dossier parent en utilisant la suite de caractères suivante: " ../ " (point point slash)
Ainsi pour revenir à l'accueil depuis le fichier " tutoriaux-photoshop.php " on notera tout simplement :
../index.php

De même pour faire un lien vers la page " tutoriaux-photoshop.php "depuis l'une des pages de cours sur le xhtml il faut noter :
../../../dossier-graphisme/tutoriaux-photoshop.php

Avec un peu d'entrainement ce petit exercice devient vraiment très simple vous verrez

5. Les ancres

Intéressons-nous maintenant à d'autres types de liens plus particuliers : les ancres.

En fait celles-ci vont nous permettre de définir des points d'arrêt dans notre page.
Il sera ensuite possible d'atteindre ces points d'arrêt en les renseignant dans les liens.

Pour placer une ancre on utilise la balise de lien <a> ... </a> avec l'attribut " name ".
Vous l'aurez deviné cet attribut prend comme valeur le nom de l'ancre.

Vous voyez c'est très simple !!
Et faire un lien vers cette ancre est tout aussi simple à mettre en place : il vous suffit pour cela d'utiliser le caractère " # " (dièse)suivis du nom de l'ancre.
Voici un exemple de lien pointant vers une ancre placée sur la même page :
Et voici ce que donnerai un lien pointant sur une ancre placée sur une autre page :

6. L'envoi d'emails

Pour clôturer ce chapitre sur les liens nous allons nous intéresser à un autre cas particulier : l'envoi d'emails.
Cela consiste à faire un lien qui ouvrira automatiquement le logicielde courrier électronique de l'internaute afin qu'il puisse rédiger sonmessage pour vous l'envoyer.

On utilise pour cela la balise ... accompagnée de son attribut " href ".
La particularité porte cette fois sur la valeur de l'attribut " href ": vous devez utiliser " mailto " avant de noter votre adresse émail.

Voici un exemple :
Le principal inconvénient vient des robots spammeurs...
En effet ceux-ci pourront lire votre adresse email et l'enregistrer...ce qui vous assure ensuite une foule de courriers indésirables dans votre boite mail

Certes il existe plusieurs techniques permettant de dissimuler et de protéger votre émail de ces robots.
Vous pouvez par exemple utiliser Javascript ou encore les caractères spéciaux mais cela ne garantie pas à 100% qu'un de ces bots ne parvienne à récupérer votre email...

La meilleure méthode à adopter est alors d'utiliser un formulaire de contact...