Cours de HTML - Les liens hypertexte



Contenu du cours
  • I. Introduction

  • 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

  • III. Liens vers des ressources utilisant d'autres protocoles
    1. Courrier électronique
    2. FTP ou Gopher
    3. Exercice : Liens divers

  • IV. Lien vers d'autres objets
  • _______________________

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

    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 :

    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

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

    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 :

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

    2. FTP ou Gopher

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

    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>




    Conditions d'utilisation et licence

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


    Source : www.gchagnon.fr/cours/html/index.html