I. Introduction
Ecrire des "pages Web", c'est bien ; ne pas les isoler du monde et leur permettre, soit d'être indexée sur une autre page, soit de mener vers un autre site, c'est mieux. A l'inverse d'un livre, par exemple, où le plus souvent la lecture se fait de manière linéaire, et ceci à cause de la nature même du support, le support électronique a permis de développer le concept d'hypertexte.
La lecture n'est plus forcément linéaire ; chaque groupe de mots peut mener à des informations supplémentaires, ou bien permettre de lancer une application externe, en fonction des besoins de l'utilisateur. C'est une perspective qu'il ne faut jamais oublier : un lien hypertexte est là pour introduire une certaine profondeur ou bien pour élargir un champ... et non pour artificiellement multiplier des pages sur un site !
Le but de ce chapitre est de faire un rapide exposé de cette notion fondamentale sur le réseau.
II. Différents types de liens
1. Introduction
Différents types de liens sont possibles :
- des liens internes à une page donnée. Lors du fonctionnement de ce lien, le navigateur ne charge pas de nouvelle page. Le contenu de la fenêtre est simplement ajusté pour que la référence apparaisse à l'écran. Par exemple, ce lien intra-page va placer l'affichage au niveau du paragraphe consacré à cette notion.
- des liens pointant vers une autre page d'un même serveur. Lors du fonctionnement de ce lien, le navigateur charge une nouvelle page située sur le même serveur. La syntaxe employée sera alors relative à la page en cours. Par exemple, ce support de cours constitue lui-même un site installé sur un serveur unique, et ce lien permet de revenir au premier cours d'introduction. On parle de lien interne et d'adresse relative.
- des liens pointant vers un autre site. Il va falloir lancer une requête sur l'ensemble de la toile pour que le serveur qui possède la page demandée puisse l'envoyer via l'Internet, au client demandeur. On parle de lien externe et d'adresse absolue. Exemple : vers le site du W3C.
2. Liens internes
a. Exemple
La table des matières en tête de ce document est constituée d'une collection de liens relatifs donnant accès à chacun de ses paragraphes.
La syntaxe à respecter est la suivante :
Origine du lien de l'exemple
|
Extrémité du lien de l'exemple
|
|---|---|
<a href="#internes">Liens internes</a>
|
<a name="internes"></a>
|
Table 1. Utilisation de la balise
a pour créer un lien interne.b. La balise a
Pour définir un lien, il faut désigner son départ et son arrivée : c'est la même balise
<a> (pour anchor ou ancre) à l'aide de deux attributs différents (href et name) qui les prend en charge.
Attribut
|
Effet
|
Valeur(s)
|
|---|---|---|
href |
Hypertexte REFerence, désigne l'adresse à atteindre par le navigateur
|
|
name |
étiquette de l'ancre
|
chaîne de caractères
|
accesskey |
définit une touche du clavier. La combinaison "ALT + touche" a le même effet que le clic sur le lien.
|
touche du clavier
|
tabindex |
fixe la position de l'élément dans l'ordre séquentiel des tabulations.
|
valeur numérique entière
|
target |
(voir les frames)
| |
title |
Une rapide description du lien
|
Une chaîne de caractères.
|
shape |
(voir les images réactives)
| |
coords |
(voir les images réactives)
| |
onfocus,onblur |
Un script à exécuter quand le curseur est positionné sur le lien (
onfocus), ou bien qu'il le quitte (onblur). |
Une chaîne de caractères.
|
Table 2. Attributs de la balise
<a>
L'attribut
accesskey est très important si l'on doit prendre en compte l'accessibilité de la page. Il permet la navigation sans utiliser de souris. De plus, on peut imaginer, sur un site Web, des fonctionnalités qui sont alors facilement accessibles par une combinaison de touches : envoyer un courrier électronique avec une combinaison ALT+C, faire une recherche avec le raccourci ALT+R, etc. De même, l'attribut tabindex permet de faciliter la navigation pour les personnes ne pouvant que mal maîtriser une souris (les mal-voyants par exemple).3. Le lien externe et l'adresse absolue: comment s'écrit une URL absolue?
a. URL: Uniform Resource Locator
C'est-à-dire un "localisateur" (adresse) unifié de ressource. L'URL absolue peut se décomposer en trois parties, par exemple l'adresse :http://www.w3.org/TR/REC-MathML/appendixA.html se décompose en :
protocole
|
adresse du serveur
|
Chemin d'accès sur le serveur
|
|---|---|---|
http:// | www.w3.org | /TR/REC-MathML/appendixA.html |
Table 3. Structure d'une URL.
b. Un protocole
Indique le mode de dialogue utilisé pour communiquer avec la ressource invoquée. Ce peut être :
- http:// Hyper Text Transfer Protocole, pour les pages Web.
- ftp:// File Transfer Protocole pour l'échange de fichiers quelconques.
- news: serveur de news.
- mailto: courrier électronique.
- gopher:// autre mode de parcours de pages web utilisant une recherche par mot-clé.
- file:// fichier interne, dont l'accès ne nécessite pas l'emploi du réseau Internet.
c. L'adresse du serveur
C'est l'identifiant du serveur où se trouvent les pages et autres ressources auxquelles l'utilisateur souhaite accéder. Elle apparaît en général en clair formée de trois parties. On peut trouver aussi des adresses numériques. Par exemple, 134.157.46.230 est l'adresse du serveur de la salle multimédia de la CIM.
d. Un chemin d'accès
Une requête vers un serveur aboutit dans un dossier par défaut (généralement sous Windows NT, dans le dossier
InetPub>wwwroot). Il faut préciser le chemin d'accès (enchâssement des dossiers et sous-dossiers) du fichier contenant la page Web à afficher.
Les extensions des fichiers contenant des pages
HTML peuvent être .htm, .html, .shtml, .asp (requête base de données sur le serveur) ou .php (idem).4. Le lien interne et l'adresse relative: comment s'écrit une URL relative?
a. Ressource située dans le même répertoire que la page d'appel
La valeur prise par l'attribut href est simplement le nom du fichier, par exemple
href="index.html".b. Ressource située dans un sous-répertoire du répertoire contenant la page d'appel
Il suffit de citer la suite des sous-répertoires jusqu'au fichier ressource, par exemple
href="archives/2001/18072001.html".c. Ressource située dans un répertoire contenant la page d'appel
Il faut remonter successivement chaque répertoire par "../". Dans cet exemple, le répertoire visé est le supérieur hiérarchique de deuxième rang (le grand-père) :
href="../../index.html".d. Ressource située dans un répertoire situé dans une branche latérale
Il faut remonter au répertoire commun par "../" puis redescendre la bonne branche, par exemple
href="../../produits/convecteurs/rh1200x.html".e. Remarque importante: privilégier l'adresse relative
Lors de la création d'un site destiné à un seul serveur, tous les liens internes doivent être sous forme relative. En effet, on développe sur sa propre machine avant de transférer sur le serveur l'ensemble du site créé. Si les liens internes sont sous forme absolue, ils seront perdus après le transfert : les noms de répertoires ne seront peut-être pas les mêmes sur le serveur !
De plus, utiliser une adresse relative au lieu d'une adresse absolue permet au routeur de ne pas avoir à résoudre à chaque requête le chemin vers le serveur. Cette opération prend du temps, rendant ainsi la page plus longue à charger.
f. Concaténer une URL et une ancre intra-page
Pour accéder directement à une section donnée d'une autre page donnée, il suffit de concaténer l'URL avec la valeur du paramètre
name à l'aide du symbole #, par exemple :href="index.html#tablematieres".III. Liens vers des ressources utilisant d'autres protocoles
1. Courrier électronique
L'utilisation de protocole
mailto:... provoque l'ouverture de l'application correspondant au courrier sous Internet Explorer ou sous Netscape.- lien e-mail sans sujet :
href="mailto:A.Talon@dupuis.fr" - lien e-mail avec sujet :
href="mailto:A.Talon@dupuis.fr?subject=marsupilami" - lien e-mail avec sujet et texte dans le corps du message :
href="mailto:A.Talon@dupuis.fr?subject=marsupilami&body=longueur_queue" - lien e-mail avec sujet, envoyé à deux personnes :
href="mailto:A.Talon@dupuis.fr?cc=Lefuneste@dupuis.fr&subject=marsupilami"
2. FTP ou Gopher
provoque l'ouverture d'une application FTP ou Gopher selon le cas.
- lien externe vers un serveur FTP :
href="ftp://ftp.jussieu.fr". - lien externe vers un serveur de news :
href="news:news.u-psud.fr". Il est alors demandé au visiteur, le cas échéant, s'il veut s'abonner à ce serveur de news.
Exercice 1. Liens divers
Énoncé
Correction
IV. Lien vers d'autres objets
Le système d'exploitation recherchera de lui-même, selon l'extension du fichier, quelle application permet de l'exploiter. S'il n'a jamais fait l'association, il proposera à l'utilisateur de l'établir lui-même.
Vous pouvez également proposer un fichier (
.EXE ou .ZIP) en téléchargement...
<a href="site.zip">Téléchargement du site</a>
0 commentaires
Enregistrer un commentaire