Cours de HTML - Les liens hypertexte

version 1.30, dernière mise à jour le 18 juillet 2005.

  

Table des matières (TdM)

  1. I. Introduction
  1. II. Différents types de liens
    1. Introduction
    2. Liens internes
      1. Exemple
      2. La balise a
    3. Le lien externe et l'adresse absolue: comment s'écrit une URL absolue?
      1. URL: Uniform Resource Locator
      2. Un protocole
      3. L'adresse du serveur
      4. Un chemin d'accès
    4. Le lien interne et l'adresse relative: comment s'écrit une URL relative?
      1. Ressource située dans le même répertoire que la page d'appel
      2. Ressource située dans un sous-répertoire du répertoire contenant la page d'appel
      3. Ressource située dans un répertoire contenant la page d'appel
      4. Ressource située dans un répertoire situé dans une branche latérale
      5. Remarque importante: privilégier l'adresse relative
      6. Concaténer une URL et une ancre intra-page
  1. III. Liens vers des ressources utilisant d'autres protocoles
    1. Courrier électronique
    2. FTP ou Gopher
    3. Exercice : Liens divers
  1. IV. Lien vers d'autres objets

Retour au menu

Contenu du cours

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 :

>Retour à la TdM

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.

>Retour à la TdM

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

  • URL (voir ci-dessous).

  • valeur de l'attribut name (nom) de l'ancre à atteindre dans la même page Internet précédée du caractère #.

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).

>Retour à la TdM

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.

>Retour à la TdM

b. Un protocole

Indique le mode de dialogue utilisé pour communiquer avec la ressource invoquée. Ce peut être :

>Retour à la TdM

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.

>Retour à la TdM

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).

>Retour à la TdM

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".

>Retour à la TdM

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 exemplehref="archives/2001/18072001.html".

>Retour à la TdM

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".

>Retour à la TdM

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".

>Retour à la TdM

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.

>Retour à la TdM

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".

>Retour à la TdM

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.

>Retour à la TdM

2. FTP ou Gopher

provoque l'ouverture d'une application FTP ou Gopher selon le cas.

>Retour à la TdM

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>

Historique de ce document

Conditions d'utilisation et licence

Creative Commons License
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.

Retour au menu