|
Les liens :
 1) Définitions :
Un lien est moyen d'aller d'une page à une autre. Il s'agit d'une passerelle virtuel qui nous amène à un autre endroit lorsqu'on le sélectionne.
2) A quoi ça sert ?
Il est donc possible de créer un index ou un menu, de cliquer sur un terme de ce dernier et d'afficher le contenu correspondant. Un lien peut pointer :
- vers une autre page du site.
- vers un endroit de cette même page.
- vers une page d’un autre site.
- vers une adresse e-mail.
- vers un fichier, pour en donner le téléchargement.
3) En pratique :
La balise que nous allons utiliser à pour syntaxe: <A href= "path">Liens</A> où path est le chemin qui nous conduira à la page désiré.
NOTE :
Nous avons déjà utilisé le path ou le chemin dans le chapitre D ), avec l’attribut BACKGROUND. Nous devons maintenant appronfondir ce concept. Il y a deux types de chemin, le chemin absolu et le chemin relatif. |
Dans votre système d’exploitation (prenons l’exemple du plus courant, windows) vous savez que pour accéder à un fichier il vous faut parcourir une arborescence, qui est de la forme: Lecteur:\répertoire\répertoire\fichier.extension, par exemple:
"C:\windows\medias\ding.wav" ou encore:
"C:\mes documents\image\sable.jpg"
Ces formes sont des chemins absolus car elles partent de la racine, de C. Imaginons que vous ayez une page web dans le repertoire se trouvant ici :
"C:\mes documents\site\page.html" Et que vous vouliez qu’un lien vous amène à la page "suite.html". Deux possibilités s’offrent à vous. Gardons la syntaxe des liens vu plus haut et adaptons-la avec un chemin absolu. Cela nous donne:
<A href="C:/mes documents/site/suite.html">Lien</A>
Un problème viendra si pour une raison quelconque vous souhaitez déplacer votre répertoire "site". En effet si le vous déplacer dans le répertoire "windows", le lien ne sera plus valide car le chemin sera devenu:
"C:\windows\site\suite.html"
Vous nous direz que le problème sera résolu en ne déplaçant pas le répertoire. Mais si vous faite un site c’est certainement pour le mettre en ligne, c’est-à-dire chez un hébergeur. Le chemin changera là aussi. L’autre possibilité reste à remplacer le chemin par un autre. Si votre site est succin et qu’il n’y a qu’une dizaine de liens, alors effectivement c’est envisageable. Mais si votre site est aussi complexe que celui que nous allons développer ensemble, avec des générations de liens, vous comprendrez qu’il nous faut trouver une autre solution.
La solution est le chemin relatif. Vous avez bien sur la possibilité d’écrire:
<A href="suite.html">Lien</A>
Vous voyez que si vous déplacez le répertoire "site", le lien sera toujours valide. Et si le lien pointait sur une page nommé "suite.html" situé dans un autre répertoire nommé "pages", nous aurions:
<A href="pages/suite.html">Lien</A>
NOTE :
En Html, les chemins s’écrivent avec des slashs "/", alors que windows (surtout MSDOS) les écrits avec des backslashs "\". Pour remonter d’un répertoire il faut se servir de "../" ex: <BODY BACKGROUND="../images/fond.jpg"> |
4) Exercice: vers une autre page du site
Nous allons créer une page avec un mot qui sera lié à une autre page. Commençons par créer un répertoire "site", nous travaillerons dorénavant dans ce répertoire. Créons une page simple avec le mot "Mon premier lien":
<HTML><HEAD>
<TITLE>F-4 Premier lien</TITLE>
</HEAD><BODY>
<A href="suite.html">Mon premier lien</A>
</BODY>
</HTML> |
Créons maintenant notre deuxième page qui devra s’appeler "suite.html":
<HTML><HEAD>
<TITLE>F-4 Suite</TITLE>
</HEAD><BODY>
Voici le contenu de la page </BODY>
</HTML> |
Nous voyons que la première page ressemble à cela:
Le fait de cliquer sur ce lien affiche la page nommé "suite.html" dans le même navigateur. Si vous avez des erreurs, vérifiez bien l’extension du fichier suite, vous pouvez le nommer en .htm bien sûr, mais dans ce cas vérifiez le lien de la balise <A href="">. Sur certain système d’exploitation la casse est à respecter. Respectez bien les majuscules et les minuscules. Si cela n’a pas d’importance sous windows, cela en aura une chez votre futur hébergeur. Nous vous conseillons d’écrire tous vos fichiers en minuscule.
NOTE :
Si vous désirez que la page s’ouvre dans un autre navigateur il vous faudra insérer l’attribut TARGET="_BLANK", _BLANK étant un type de cible. |
5) Exercice : Vers un endroit de la page
Cela s’appelle une ancre. Pour faire une lien à l’intérieur d’une page, nous allons commencer par faire créer une ancre. La balise est A et la syntaxe: <A NAME="ancre">ancre de la page</A>
Ainsi pour créer un lien d’une page pointant sur une ancre d’une même page, on aura le code suivant:
<HTML><HEAD>
<TITLE>F-5 Second lien</TITLE>
</HEAD><BODY>
<A href="#ici">Mon premier lien</A>
<BR><BR><BR><BR><BR>
<A NAME="ici">Voici l'ancre</A>
</BODY>
</HTML> |
NOTE :
La balise <BR> correspond à un saut de ligne. |
6) Exercice : Lien vers une ancre d’une page d’un autre site
Imaginons un site http://www.site.com/page.html qui contient une balise nommé "important". Nous voulons faire un lien sur notre page pour aller directement à la balise de ce site. Nous écrirons alors :
<HTML><HEAD>
<TITLE>F-6 Troisième lien</TITLE>
</HEAD><BODY>
<A href="http://www.site.com/page.html#important">Lien vers une ancre</A>
</BODY>
</HTML> |
7) Exercice : Lien vers une adresse e-mail
Sur tout site internet, l’auteur y mets son adresse mail. Il serait fastidieux de recopier l’adresse dans son logiciel de messagerie. Heureusement pour palier à cela, le langage Html a prevu des fonctions. Nous allons créer un lien nommé "Ecrivez-moi".
<HTML><HEAD>
<TITLE>F-7 E-mail</TITLE>
</HEAD><BODY>
<A href="mailto:
Cet e-mail est protégé contre les robots collecteurs de mails, votre navigateur doit accepter le Javascript pour le voir
">Ecrivez-moi</A>
</BODY>
</HTML> |
Nous allons maintenant voir des fonctions annexes permettant d’envoyer un sujet, puis une copie de l’e-mail à une autre adresse. Cela fera une bonne entrée en matière pour le gros chapitre de la programmation car nous allons voir les variables et leurs déclarations dans une URL.
Nous voulons mettre un sujet par défaut à tous ceux qui pourraient nous envoyer un mail en cliquant sur le lien. Nous écrivons :
<HTML><HEAD>
<TITLE>F-7 E-mail + sujet</TITLE>
</HEAD><BODY>
<A href="mailto:
Cet e-mail est protégé contre les robots collecteurs de mails, votre navigateur doit accepter le Javascript pour le voir
?subject=voici un sujet">Ecrivez-moi</A>
</BODY>
</HTML> |
Nous voyons l’apparition d’un point d’interrogation dans l’adresse. Lors de vos différents surf sur internet, vous aurez certainement remarqué cela. Ce symbole est une césure entre l’adresse en elle-même et les variables. Ici "subject" est une variable reconnu par le logiciel de messagerie. s’il doit y a plusieurs variables, alors on les sépare par l’esperluette. Ce que nous allons faire avec l’exemple suivant car nous allons ajouter l’envoie d’une Copie Carbone du message. A notre époque ce n’est plus vraiment une copie carbone mais les sigles sont restés les mêmes : cc.
<HTML><HEAD>
<TITLE>F-7 E-mail + sujet + cc</TITLE>
</HEAD><BODY>
<A href="mailto:
Cet e-mail est protégé contre les robots collecteurs de mails, votre navigateur doit accepter le Javascript pour le voir
?subject=voici un sujet&cc=
Cet e-mail est protégé contre les robots collecteurs de mails, votre navigateur doit accepter le Javascript pour le voir
">Ecrivez-moi</A>
</BODY>
</HTML> |
8) Exercice : Pour télécharger un fichier
La syntaxe est identique à un lien sur une autre page, sauf que le lien pointe vers l’adresse d’un fichier :
<HTML><HEAD>
<TITLE>F-7 Télécharger</TITLE>
</HEAD><BODY>
<A href="fichier.exe">Télécharger</A>
</BODY>
</HTML> |
|
|
Les liens