Les liens en HTML

1. Introduction

Objectif:

L'objectif de cette séquence est de vous apprendre ce qu'est un lien, à quoi il sert, comment en faire, ainsi que vous proposer différents exemples, des exercices, des corrigés de ces exercices, les erreurs fréquentes commises, et enfin des références on-line. Le but est que vous puissiez être capable de faire des liens dans les documents HTML que vous créerez vous-même.

Prérequis:

Il n'y pas de prérequis particulier pour cette séquence, à part savoir gérer des fichiers, avoir à disposition et savoir utiliser un éditeur de texte et un browser. Il est aussi recommandé d'avoir vue la séquence sur les images.

A quoi ça sert?:

Un lien est constitué d'une ancre pointant sur un autre fichier ou un endroit précis du même fichier, il permet d'accéder à d'autres types de fichiers (textes, images, sons, animations, etc), de naviguer sur le Worl Wide Web. Les liens permettent d'accéder, de trouver de l'information. Ils sont importants pour le fonctionnement du Web qui est une sorte d'hypertext géant.
D'autre part, selon l'adresse donnée et le protocole utilisé, un lien peut aussi servir à envoyer un mail, à télécharger un fichier, à accéder à un newsgroup, etc.

La syntaxe:

La syntaxe pour le marqueur du lien est un marqueur conteneur, ce qui veut dire qu'il y a un marqueur de début et un de fin. Voici la syntaxe d'un lien:
<a href="URL"> le texte faisant office de lien visible </a>
Le marqueur du début est <a >, il a comme paramètre "href". Le "a" signifie anchor soit ancre en français, "href" signifie la référence, le fichier sur lequel il pointe. URL correspond à Universal Ressource Locator, soit l'adresse du fichier sur lequel pointe le lien.</a> est le marqueur de fin.

2. Le lien

Définition:

Un lien est une ancre qui pointe sur, soit une partie du même document, soit un autre fichier. Cet autre fichier peut être un fichier HTML, un fichier d'images, de sons, d'animation, etc. Il peut se trouver soit dans le même répertoire, soit dans un autre répertoire mais sur le même serveur, ou encore, sur un autre serveur se trouvant n'importe où dans le monde. Un lien lie une partie d'un fichier à une autre ressource.

Principes:

Voici comment se structure cette partie:

Principe générale

Il y a deux niveaux dans la création d'un lien. Au niveau du document source, il y a le marqueur du début et de fin qui entourent du texte ou image. Dans le marqueur de début on écrira l'adresse du fichier sur lequel on veut faire un lien. Au niveau du document browsé, le logiciel lira ce code et l'interprétera. Le texte ou l'image qui était entourée sera souligné et de couleur bleue (par défaut, toutefois il est possible de paramétrer cela), le curseur changera de forme en passant dessus (il prendra la forme d'une main) et l'adresse du fichier sur lequel pointe le lien apparaitra. Pour accéder à cet autre fichier il suffira de cliquer sur le lien, puis le browser chargera le document en question.

Il y a donc deux choses, d'une part le marqueur de lien, l'ancre, contenant l'adresse du fichier sur lequel pointe le lien, et d'autre part le lien visible lorsque le document est browsé et reconnaissable à sa couleur, son soulignement, le changement de curseur et le fait que lorsque l'on clique dessus le fichier "pointé" sera chargé par le browser.
Le lien visible peut être constitué d'un texte de longueur variable, de une lettre à à plusieurs lignes, ou encore d'une image. Dans ce dernier cas il suffit de mettre à la place du texte, le marqueur qui permet d'insérer une image.

Voici un exemple de code d'un lien:
<a href="http://tecfa.unige.ch/tecfa.html"> un lien sur la page interne de TECFA </a>
qui une fois browsé donne ceci:
un lien sur la page interne de TECFA

Structure générale d'un lien:

Comme mentionné ci-dessus, la syntaxe d'un lien est:

<a href="URL"> le texte ou l'image faisant office de lien visible </a>
le marqueur d'un lien est <a > et href=" " est un de ses paramètres. La valeur qu'il va prendre est un URL (Universal ou Uniform Ressource Locator).

L'URL et ses différents protocoles:

URL= <protocole>://<adresse du serveur>/<chemin (répertoires)/nom du fichier. extension du fichier>
L'URL est l'adresse d'un fichier sur le Web, il se compose du type de protocole, de l'adresse du serveur, et du chemin du fichier, soit les répertoires et sous-répertoires dans lesquels se trouve le fichier, et enfin du nom du fichier même. Il existe différents protocoles utilisés pour les fichiers sur le Worl Wide Web et géré par le client Web.

L'adresse

adresse absolue:
L'adresse d'un fichier se compose du nom du serveur, et du chemin jusqu'au fichier, et du nom du fichier avec son extension. Pour un lien pointant sur un fichier qui se trouve sur un autre serveur on écrira ce que l'on appelle une adresse absolue, l'adresse en entier avec aussi le protocole.
Exemple: l'adresse absolu de ce fichier est:
http://tecfa.unige.ch/~shubber/stafs/staf17/htmllien.html
Ainsi si l'on voulait faire un lien sur cette page en donnant l'adresse absolue, cela donnerait ceci
<a href="http://tecfa.unige.ch/~shubber/stafs/staf17/htmllien.html"> lien sur les connaissances de base </a>

adresse relative:
Si le fichier "pointé" se trouve sur le même serveur on peut soit écrire l'adresse absolue soit l'adresse relative. Une adresse relative est une adresse plus courte, on l'utilise lorsque le fichier visé se trouve soit par exemple dans le même répertoire que le fichier que vous faites, ou quelques répertoires au-dessus ou en-dessous dans l'arborescence du serveur.
Exemples:

L'intérêt de ce chemin relatif est que si l'on déplace des fichiers d'un même répertoire, on n'aura pas besoin de changer l'adresse des liens pour qu'ils fonctionnent toujours. Ainsi si vous avez plusieurs fichiers dans le même répertoire ou à proximité, vous avez meilleur temps d'utiliser un chemin relatif.

Les paramètres:

Il existe plusieurs paramètres au marqueur <a >:

Exemples:

Voici différents exemples "browsés" de ce que vous avez vu auparavant:

Exercices:

Voici différents exercices correspondant aux thèmes abordés précédemment.
  1. Exercices sur les liens à localisation externe

    1. Exercice:
      Créez deux fichiers html, lienex1.html et lienex1b.html avec un lien allant de lienex1.html à lienex1b.html, le chemin que vous donnerez sera absolu. Le texte du lien que vous écrirez et qui sera visible, sera "mon premier lien".
      En fait pour ce premier exercice, nous allons décrire la procédure pas à pas afin de de vous faciliter sa réalisation. Dans un premier temps, vous allez ouvrir le logiciel "Bloc-note" (Notepad). Vous allez vous trouvez face à une feuille vierge sur laquelle vous allez écrire les marqueurs de la structure de base d'une page HTML (pour plus de détails). Vous donnez comme titre (title) lienex1b et vous enregistrez votre fichier sous le nom lienex1b.html dans un répertoire. Dans la partie "body" de votre document, écrivez "bla bla bla" afin d'avoir du texte sur votre page. Puis refaites la même procédure pour créer votre fichier lienex1.html, enregistrez le dans un répertoire en-dessus. Ecrivez dans la partie "body" de ce fichier le lien avec le marqueur vu précédemment, comme adresse mettez celle du fichier lienex1b.html avec les noms des différents répertoires dans lesquels se trouve le fichier (vous donnez ainsi le chemin absolu depuis la base de votre disque dur). Maintenant pour vérifier si votre lien fonctionne, ouvrez un client Web (par exemple Netscape), puis pour ouvrir votre fichier dans le browser allez à la rubrique "Open file in browser". Si cela marche, vous devriez voir votre fichier à l'écran avec comme titre dans la barre du haut, lienex1 et le texte visible de votre lien en couleur et souligné. Si votre lien fonctionne, en cliquant dessus, votre deuxième fichier devrait s'ouvrir, être chargé par le browser, avec le titre du fichier en haut et "blabla" comme texte.

    2. Exercice:
      Reprenez les fichiers de l'exercice précédent et utilisez cette fois pour votre lien un chemin relatif.

    3. Exercice:
      Reprenez les fichiers de l'exercice 2 et faites un lien sur le fichier lienex1b.html pointant sur le fichier lienex1.html avec comme texte "retour". Vous devriez ainsi avoir un lien pointant sur l'autre fichier sur chacun des fichiers, et donc passez de l'un à l'autre sans utiliser les boutons du browser.

    4. Exercice:
      Créez un fichier html lienex3.html qui aura un lien pointant sur une image (de votre choix), le texte visible sera le nom de cette image. De nouveau si vous avez réussi en cliquant sur le nom dans le fichier lienex3.html browsé, votre browser devrait charger l'image que vous avez choisie.

    5. Exercice:
      Reprenez les fichiers de l'exercice 2, et cette fois comme lien visible au lieu de mettre du texte, vous allez mettre l'image que vous avez choisi dans l'exercice précédent. Si cela marche, dans votre fichier lienex1.html browsé, en cliquant sur l'image, votre browser devrait charger le fichier lienex1b.html.

  2. Exercices portant sur les protocoles d'URL

    1. Créez un fichier nommé lienavex1.html. Dans ce fichier vous fairez un lien permettant d'envoyer un mail à votre adresse, de même que vous fairez un lien sur un newsgroup de votre choix.
    2. Créez un fichier nommé lienavex2.html et un autre nommé lienavex3.html. Faites un lien entre les deux pages de manière à ce que ce lien ouvre une nouvelle page de browse avec le fichier sur lequel il pointe.

  3. Exercices portant sur les liens internes

    1. Exercice:
      Créez un fichier html que vous enregistrerez sous le nom lienex4.html. Dans ce fichier vous mettrez une grande quantité de texte (faites par exemple un copié-collé d'un texte que vous avez). Faites un lien interne au début du document qui pointera sur le milieu du texte. Pour vérifier si votre lien marche, une fois votre fichier browsé en cliquant sur le lien, l'ancre interne (endroit sur lequel votre lien pointe) devrait apparaître en haut de votre écran.

    2. Exercice:
      Créez un fichier html nommé lienex5.html dans lequel vous mettrez un lien pointant sur l'ancre interne du fichier lienex4.html. Pour voir si votre lien marche, il suffit que dans votre fichier lienex5.html en cliquant sur le lien que vous avez fait, le browser charge le fichier lienex4.html avec la partie délimitée par l'ancre apparaissant en haut de l'écran.

    3. Exercice:
      Reprenez le fichier lienex4.html, et cette fois au lieu d'un texte pour le lien, utilisez une image de votre choix. Si votre lien fonctionne, alors en cliquant sur l'image dans votre page browsée devrait apparaître la partie du texte correspondant à l'ancre interne.

    4. Exercice:
      Prenez à nouveau le fichier lienex4.html et changez votre ancre interne pour que le lien interne pointe sur une image de votre choix. Pour vérifier si votre lien fonctionne, en cliquant dans votre browser sur l'image qui est le lien interne, votre deuxième image (l'ancre interne) devrait apparaître en haut de l'écran.

Erreurs fréquentes:

Il peut arriver que vous ne parvieniez pas à faire vos liens du premier coup. Dans cette partie vous pourrez voir quelles sont les erreurs fréquentes qui peuvent être commises lors de la création de liens.

Corrigés des exercices:

Voici les corrigés des exercices ci-dessus.

  1. Corrigés des exercices portant sur la création de liens à localisation externes

    1. Exercice:
      Fichier1: lienex1.htmlFichier2:lienex1b.html
      <html>
      <head>
      <title>lienex1.html </title>
      </head>
      <body>
      <a href="/html/lien/exercices/lienex1b.html"> mon premier lien </a>
      </body>
      </html>       		<html>
      <head>
      <title>lienex1b.html </title>
      </head>
      <body>
      bla bla bla bla
      </body>
      </html>

    2. Exercice:
      Fichier1: lienex1.htmlFichier2:lienex1b.html
      <html>
      <head>
      <title>lienex1.html </title>
      </head>
      <body>
      <a href="lienex1b.html"> mon premier lien </a>
      </body>
      </html>       		<html>
      <head>
      <title>lienex1b.html </title>
      </head>
      <body>
      bla bla bla bla
      </body>
      </html>

    3. Exercice:
      Fichier1: lienex1.htmlFichier2:lienex1b.html
      <html>
      <head>
      <title>lienex1.html </title>
      </head>
      <body>
      <a href="lienex1b.html"> mon premier lien </a>
      </body>
      </html>       		<html>
      <head>
      <title>lienexb1.html </title>
      </head>
      <body>
      <a href="lienex1.html"> retour </a>
      </body>
      </html>

    4. Exercice:
      Fichier1: lienex3.htmlFichier2:eclps97.jpg
      <html>
      <head>
      <title>lienex1.html </title>
      </head>
      <body>
      <a href="images/eclps97.jpg"> éclipse du soleil </a>
      </body>
      </html>

    5. Exercice:
      Fichier1: lienex1.htmlFichier2:lienex1b.html
      <html>
      <head>
      <title>lienex1.html </title>
      </head>
      <body>
      <a href="lienex1b.html"> <img src="images/eclps96.jpg"> </a>
      </body>
      </html>       		<html>
      <head>
      <title>lienexb1.html </title>
      </head>
      <body>
      bla bla bla bla
      </body>
      </html>

  2. Corrigés des exercices portant sur l'URL et ses différents protocoles:

    1. Exercice:
      Fichier lienavex1.html
      <html>
      <head>
      <title>lienavex1.html </title>
      </head>
      <a href="mailto:me@monadressee-mail.com"> pour m'envoyer un message </a>
      <a href="news.lesgrandsmangeurs.chocolat.com"> pour envoyer un message à un news group </a>
      </body>
      </html>

    2. Exercice:
      Fichier1: lienavex2.htmlFichier2:lienavex3.html
      <html>
      <head>
      <title>lienavex2.html </title>
      </head>
      <body>
      <a href="lienavex3.html" target="_blank"> lien sur le fichier lienavex3.html </a>
      </body>
      </html>       		<html>
      <head>
      <title>lienavex3.html </title>
      </head>
      <body>
      bla bla bla bla
      </body>
      </html>

  3. Corrigés des exercices portant sur la création de liens internes

    1. Exercice:
      Fichier lienex4.html
      <html>
      <head>
      <title>lienex4.html </title>
      </head>
      <a href="#fin"> lien interne pointant sur la fin du document </a>
      .......
      .......
      votre texte
      .......
      <a name="fin"> texte texte</a>
      texte texte
      </body>
      </html>

    2. Exercice:
      Fichier lienex4.html Fichier lienex5.html
      <html>
      <head>
      <title>lienex4.html </title>
      </head>
      <a href="#fin"> lien interne pointant sur la fin du document </a>
      .......
      .......
      votre texte
      .......
      <a name="fin"> texte texte</a>
      texte texte
      </body>
      </html>
      		 <html>
      <head>
      <title>lienex5.html </title>
      </head>
      <a href="lienex4.html#fin"> lien externe pointant sur la fin du document lienex4.html </a>
      </body>
      </html>

    3. Exercice:
      Fichier lienex4.html
      <html>
      <head>
      <title>lienex4.html </title>
      </head>
      <a href="#fin"> <img src="mickey.gif"> </a>
      .......
      .......
      votre texte
      .......
      <a name="fin"> texte texte</a>
      texte texte
      </body>
      </html>

    4. Exercice:
      Fichier lienex4.html
      <html>
      <head>
      <title>lienex4.html </title>
      </head>
      <a href="#fin"> <img src="mickey.gif"> </a>
      .......
      .......
      votre texte
      .......
      <a name="fin"> <img src="minnie.jpg"></a>
      texte texte
      </body>
      </html>

3. Conclusion

En conclusion faisons un rappel des notions importantes à retenir en ce qui concerne les liens.
Un lien permet de relier un fichier à une ressource dont la localisation peut être soit interne, soit externe, et cette ressource peut être de nature différente, une image, du texte, des sons, des animations, etc.
La syntaxe d'un lien est :
<a href="URL"> ce qui apparaîtra comme étant le lien une fois le fichier browsé </a>
<a est le marqueur, href=" " est un de ses paramètres. L'URL est l'adresse du serveur, l'adresse du fichier par rapport aux répertoires et sous-répertoires et le nom du fichier ainsi que son extension. Il existe différents types de protocoles, le plus utilisé sur le Web est "HTTP". L'adresse d'un fichier peut être soit absolue s'il se trouve sur un autre serveur, soit relative s'il se trouve sur le même serveur que le fichier oú se marque le lien.
Un autre paramètre du marqueur <a > est name="nomdel'ancreinterne" que l'on utilise lorsque l'on veut faire un lien pointant sur un endroit précis dans un document qui peut être soit le même, on parlera alors de lien interne, soit un autre document. A l'aide du marqueur et de ce paramètre on définit une ancre interne sur laquelle pointera le lien. On utilise donc deux fois le marqueur <a >, une fois avec le paramètre name=" nomdel'ancreinterne" et une fois avec href="#nomdel'ancreinterne", notez la présence du symbole "#".
Pour que le lien fonctionne, il est important d'être très précis dans l'écriture de l'URL, il faut vérifier les majuscules, minuscules, l'orthographe, la syntaxe, etc.

4. Références

Voici différentes liens sur des manuels HTML on-line:

Y.P.S (août 1997)