Un article de Mangue.org, l'encyclopéde libre.

Nous voici donc rendu aux liens hypertextes, l'une des notions les plus importantes concernant le web, puisque sans eux, internet se limiterait à un nombre incalculable de pages sans que celles-ci ne puissent être reliées entre elles et la navigation deviendrait par conséquent impossible. De même que tout le contenu d'internet ne pourrait se limiter qu'à une page, ce qui serait inconcevabe.

Sommaire

1 Notions importantes 2 Les liens 2.1 Attribut href (Hyper Reference) 2.2 Attribut hreflang (Hyper Reference Language) 2.3 Attribut target 2.4 Attribut type 2.5 L'attribut Acceskey 2.6 Tabindex 2.7 style 2.8 Mailto 1 Autres types de liens 1.1 Les ancres 1.2 Les maps

Notions importantes

Comme il est dit dans l'introduction, les liens hypertextes, plus communément appelés liens (tout court) permettent de relier des pages HTML entre elles, ce qui permet de créer des suites logiques entre les différentes pages composant un site (lien vers la suite de la page courante, lien vers une autre page HTML, etc.). La phrase précédente peut, à première vue, sembler plus ou moins complexe, mais on pourrait imager la chose en comparant (globalement) internet à une immense ville et tous les sites web aux maisons de cette ville. Les pages web représenteraient alors les différentes pièces de ces maisons et les portes pourraient alors être comparées aux liens. C'est à dire que lorsqu'on franchit une porte, on change de pièce, et par conséquent de page HTML, ou alors on peut franchir la porte du frigo (si on se trouve déjà dans la cuisine) et ainsi récuperer des objets, qui par analogie au monde de l'informatique pourraient représenter d'autres fichiers que des fichiers HTML, par exemple des archives Zip. Par extension, on pourrait comparer les portes d'entrées/sorties à des liens vers d'autres sites, une communauté de site à un quartier, etc. On pourrait étendre ce point de vue à l'infini car la toile ne cesse de s'agrandir.

D'un point de vue plus formel, la notion de lien hypertexte sous-entend également une autre notion très générale et très utilisée en informatique : celle de l'arborescence.

Sans la notion de liens, la construction d'une arborescence serait impossible. Comme on le remarque Sur l'image ci-dessus, l'arborescence d'un site représente en fait son architecture, sa constitution ou son plan. L'arborescence d'un site est caractérisée par son sommet (appellé également racine, cela dépend du sens dans lequel on prend l'arbre). La première page HTML situé à la racine d'un site est la plupart du temps nommé index.html. Comme sur la plupart des système de type UNIX, la racine d'un site se note / et selon la disposition des différentes pages dans l'arborescence, celles-ci acquièrent une adresse, par exemple :

• /répertoire1/mon_fichier.html sous les sytèmes UNIX ;
• C:\répertoire1\mon_fichier.hml sous MS-Windows ;
• Entrée -> 1er étage -> Salle de bain par analogie à notre exemple sur les maisons.

Cette adresse représente l'URL de la page.

Ce qui nous amène à une autre notion : celle des URL (Uniform Resource Locator). En effet, les liens permettent de se balader de page en page, mais faut-il encore que les liens "pointent" vers ces pages. Les liens sont caractérisés par des URL qui désignent la page sur laquelle on va se diriger lorsqu'on va cliquer ceux-ci. On peut donc alors distinguer 2 sortes de liens :

• les liens relatifs ;
• les liens absolus.

Les URL des liens absolus prennent en compte l'adresse de fichier à partir de protocoles tels que HTTP (HyperText Transfert Protocol) ou encore FTP (File Transfert Protocol). Les URL sont alors de la forme : protocole://adresse/vers/le/fichier. Les URLs ressemblent donc à ces exemples :

• http://forum.mangue.org/index.php

Les adresses des liens relatifs, contrairement aux liens absolus, sont constitués relativement au document courant, c'est à dire qu'il va cibler un fichier (.html, .zip, etc.) suivant la position de la page courante dans l'arborescence du site. Voici un exemple : ../../mon_fichier.html. Si le fichier ciblé se trouve dans le même dossier que la page courante, on appelle juste la page en question (exemple : ma_page.html ou ./ma_page.html, le sigle . représentant le répertoire courant), si celle-ci ne se trouve pas dans le même répertoire, on utilise le sigle .. pour revenir vers un répertoire parent dans l'arborescence. On peut également définir un lien à partir de la racine du site grace au sigle / et ainsi parcourir l'arborescence simplement ( exemple : /mon_dossier/mon_fichier.html). (Remarque : cette mise en oeuvre est assez similaire à celle des liens absolus).

Après avoir vu ces notions essentielles, nous allons voir maintenant comment on peut mettre en oeuvre, en HTML, les différents types de liens.

Les liens

Comme nous l'avons vu précédement, les liens permettent entre autres de naviguer entre les différentes pages web, mais on peut également faire "pointer" ces liens vers autre chose que des pages HTML. Grossièrement, on pourrait dire que l'on peut désigner n'importe quel type de fichier dans une URL, que ce soient des fichiers "zip" (.zip), des images JPG ou BMP, des exécutables, des vidéos, des fichiers sonores, etc. Ces derniers étant plutôt propices au téléchargement. Tout et n'importe quoi peut faire office de lien, du texte, une image... C'est à dire que l'on peut aussi bien appliquer un lien sur une image que sur du texte, qui serviront d'intermédiaire entre la page courante et là où pointe le lien.

Un lien est caractérisé par le conteneur <a> </a>. Tout ce qui sera entre ces 2 balises (textes, images, etc.) sera associé à une url cible, mais en lui même le conteneur seul ne sert à rien. En effet, il lui faut lui associer des attributs tels que href, target... Voici une description détaillée des différents attributs possibles :

Attribut href (Hyper Reference)

Cet attribut indique vers quelle URL le lien va "pointer". Comme il est dit plus haut, le lien peut pointer vers toute sorte de fichiers. href désignant l'url, cet attribut est un minimum en ce qui concerne une bonne constitution du conteneur <a> </a>.

<html>
 
<head>
<title> Exemple 1 </title>
</head>
 
<body bgcolor="FFFFFF" text="000000">
 
<!-- Exemple de lien -->
[mon_fichier.html Lien]
 
<!-- Exemple de lien relatif -->
[/mon_répertoire/dossier1/fichier1.html Lien relatif]
 
<!-- Exemple de lien absolu -->
[http://www.programmationworld.com Lien absolu]
 
</body>
 
</html>

Attribut hreflang (Hyper Reference Language)

Cet attribut, qui par son nom, peut ressembler à son homologue href, n'en est rien. En fait cet attribut permet d'indiquer quelle sera la langue (français, anglais, allemand...) de la cible du lien, celle-ci étant écrite sous forme d'une abréviation de 2 lettres :

• fr : français (french)
• en : anglais (english)
• de : allemand (deutch)
• ...

<html>
 
<head>
<title> Exemple 2 </title>
</head>
 
<body text="000000">
 
<!-- Exemple d'utilisation de hreflang -->
[/mon_répertoire/dossier1/fichier1.html" hreflang="fr Lien français]
 
<!-- Autre exemple -->
[http://www.playmore.co.jp" hreflang="jp Lien japonais]
 
</body>
 
</html>

Attribut target

En français, target signifie cible. Cet attribut ne désigne pas la cible vers lequel le lien va pointer, mais dans quelle Frame va être actualisé le lien. La notion de Frame sera vue au prochain cours. Tout ce que l'on peut en dire pour l'instant, c'est qu'une page HTML peut être divisée en plusieurs parties, chaque partie désignant un frame. L'attribut target peut prendre 5 types d'arguments :

• _blank : la cible sera une nouvelle fenêtre du navigateur.
• _parent
• _self : La cible sera la fenêtre courante du navigateur.
• _top
• Nom de la Frame : la cible sera la frame qui porte le nom qui sera désigné.

Remarque

Si l'attribut target n'est pas désigné, le lien va se comporter comme si la valeur de target était celle de la Frame courante, si le cas était qu'il n'y avait pas de Frame dans la page, la cible du lien sera la fenêtre courante.

<html>
 
<head>
<title> Exemple 3 </title>
</head>
 
<body text="FFFFFF">
 
<!-- Exemple d'utilisation de target -->
[/dossier1/fichie1.html" target="_blank Lien1]
[/dossier2/fichier2.html" target="_parent Lien2]
[/dossier3/fichier3.html" target="_self Lien3]
[/dossier4/fichier4.html" target="_top Lien4]
 
<!-- Autre exemple -->
[/dossier5/fichier5.html" target="nom_de_la_frame" hreflang="fr Lien5]
[/dossier6/fichier6.html" hreflang="en" target="my_frame" >Lien6</a>
 
</body>
 
</html>

Attribut type

l'attribut type permet de mentionner le type de fichier vers lequel est ciblé le lien (page html, document word, fichier audio ...). L'argument que peut prendre type est composé de la forme suivante : catégorie / sous-catégorie. Voici un bref aperçu des différents types les plus souvent rencontrés :

• application/msword : document word (.doc) ;
• application/pdf : document Acrobat (.pdf) ;
• audio/x-midi : fichier midi (.mid) ;
• image/jpg : image jpeg (.jpg) ;
• text/html : page web (.html) ;
• video/mpeg : vidéo mpeg (.mpeg).

<html>
 
<head>
<title> Exemple 4 </title>
</head>
 
<body bgcolor="FFFFFF" text="000000 
 
<!-- Exemple de type -->
<a href="mon_fichier.html" type="application/pdf">Lien de type PDF]
 
</body>
 
</html>
<html4strict>
 
 
=== Les relations logiques ===
 
 
Les relations logiques, au même sens que l'attribut type, permettent de désigner quel sera la nature du fichier ciblé par le lien, mais dans un sens très général. Pour cela, on utilise les attributs '''rev''' et '''rel'''. '''rel''' permet de désigner un lien logique vers une cible qu'on pourrait caractériser par la <u>suite</u> de la page courante, c'est à dire par la cible "après" la page courante. '''rev''' (reverse), quant à lui a l'effet inverse de '''rel''', puisqu'il permet de désigner la page ou fichier "avant" la page courante.
 
 
<html4strict>
<" rev="appendix">Retour à l'annexe</a>
 
</body>
 
</html>

Il existe différents arguments en ce qui concerne les liens logiques :

• alternate : même contenu que le fichier de la page courante, mais sous un autre format ;
• appendix : annexe ;
• bookmark : signet ;
• chapter : chapitre ;
• contents : table des matières ;
• copyright : copyright ;
• glossary : glossaire ;
• help : aide contextuelle ;
• index : index, table des mots clés ;
• next : suivant ;
• prev : précédent ;
• section : section, partie ;
• subsection : sous-section, sous-partie.

L'attribut Acceskey

Cet attribut permet d'associer un lien à une touche du clavier ; en quelque sorte, acceskey permet de définir un raccourci vers un lien.

<html>
 
<head>
<title> Exemple 6 </title>
</head>
 
<body background="mon_image.jpg" text="000000">
 
<!-- Exemple de raccourci avec acceskey -->
[mon_fichier.html" acceskey="a Raccourci vers le lien
en appuyant sur le bouton `a`]
 
</body>
 
</html>

Tabindex

Dans le même esprit que acceskey, tabindex permet d'accéder rapidement aux différents liens d'une page HTML via la touche tab du clavier grâce à un système de numérotation des liens.

<html>
 
<head>
<title> Exemple 7 </title>
</head>
 
<body background="mon_image.jpg" alink="blue" bgproperties="fixed">
 
<!-- Exemple de raccourci avec tabindex -->
 
[rep/fichier1.html" tabindex="1 Raccourci vers le lien 1]
[rep/fichier3.html" tabindex="3 Raccourci vers le lien 3]
[rep/fichier2.html" tabindex="2 Raccourci vers le lien 2]
[rep/fichier4.html" tabindex="4 Raccourci vers le lien 4]
[rep/fichier5.html" tabindex="5 Raccourci vers le lien 5]
 
</body>
 
</html>

Dans cet exemple, nous pouvons voir que les liens sont indexés dans le désordre. Lorsque la touche tab sera pressée, le lien1 sera selectionnné. Si la touche est de nouveau pressée, le lien2 sera ensuite sélectionné, et ainsi de suite ... Une fois le lien voulu sélectionné, il ne reste plus qu'à appuyer sur la touche Entrée pour passer à la page suivante.

style

On peut également affecter à un lien un style, pour cela on utilise un attribut portant le même nom, style. Grâce à cet attribut, on peut appliquer à un lien une taille exprimée en pixels, lui appliquer des effets "visuels" lors d'un passage de curseur dessus, ... On englobe généralement cette notion de style dans ce qu'on appelle les feuilles de styles. Cette notion sera vue dans un prochain chapitre. Voici un exemple d'utilisation de l'attribut style :

<html>
 
<head>
<title> Exemple 8 </title>
</head>
 
<body background="mon_image.jpg" link="blue" vlink="red">
 
<!-- Exemple de style -->
 
[/site/rep/fichier.html" style="color: #FF9999; 
     font-family: tahoma; font-size: 10px 
Lien de taille de 10 pixels et de font tahoma]
 
</body>
 
</html>

Mailto

Il existe une autre forme de lien : les adresses emails. En effet, on peut également associer un lien vers une adresse mail. Ce type de lien utilise une syntaxe quelque peu différente des liens vus précédement. On utilise l'argument mailto (envoyer un mail vers) de href pour pointer vers une adresse mail. Lorsque l'on écrit un email, on remarque qu'il est possible de rajouter un champ sujet ou objet. il est possible d'en rajouter un à partir du lien en utilisant l'argument subject.

<html>
 
<head>
<title> Exemple 9 </title>
</head>
 
<body>
 
<!-- Exemple de lien/mail -->
 
[mailto:toto@free.fr> toto </a>
<a href="mailto:tata@free.fr?subject=il fait beau aujourd'hui  tata ]
 
</body>
 
</html>
 

Autres types de liens

Il existe encore 2 types de liens très particuliers : les ancres et les maps. En voici une description très détaillée.

Les ancres

Une autre forme de lien permet de faire référence à un endroit précis d'une page HTML, on appelle ce type de lien des ancres. Les ancres sont caractérisées par leurs noms (attribut name). Le principe des ancres est de créerdes liens internes à une page HTML. Lorsqu'on veut faire pointer un lien vers une ancre, on utilise l'attribut href=#NOM_ANCRE ou NOM_ANCRE est le nom de l'ancre. Par exemple, on utilisera href="#toto" pour faire un lien vers l'ancre toto.

<html>
 
<head>
<title> Exemple 10 </title>
</head>
 
<body>
 
<!-- Exemple d'ancre -->
 
<!-- Lien pointant vers une ancre -->
[#toto  toto_d (point de départ)]
<br>
<br>
<br>
<!-- Ancre positionnée quelque part sur la page HTML -->
<a name="toto"> toto_a (point d'arrivée) </a>
 
</body>
 
</html>

Un exemple concret des ancres se situe au début de certains articles du site, c'est le cas du sommaire qui utilise ce type de lien.

On peut également employer les ancres situées dans d'autres pages HTML. Ceci permet de se placer directement à l'endroit voulu dans la page cible. Le principe est le même que celui vu précédemment :

<html>
  <head>
    <title> Exemple 11 - Page source (ma_page1.html) </title>
  </head>
 
  <body>
 
<!-- Exemple d'ancre -->
 
<!-- Lien pointant vers une ancre qui est présente sur "ma_page2.html" -->
[ma_page2.html#tata  tata (point de départ)]
 
</body>
 
</html>

 
<html>
  <head>
    <title> Exemple 11 - Page ciblée (ma_page2.html) </title>
  </head>
  <body>
    <!-- Ancre positionnée quelque part sur la page HTML -->
    <a name="tata"> tata </a>
  </body>
</html>

Ce qui se passe dans le navigateur pour ce genre de lien, c'est qu'il charge d'abord la page cible, ici ma_page2.html puis ensuite recherche l'ancre nommé tata.

Nous avons bientôt fini le tour des différents types de liens. Il ne reste plus que les maps ...

Les maps

Voici un nouveau type de lien : les Maps. Celui-ci est spécifique aux images puisque cette notion permet de définir une zone (rectangle, cercle ou encore polygone) sur une image et faire correspondre la partie désignée à un lien.

Pour préciser que des liens de type map seront utilisés sur une image, on utilise l'attribut usemap qui sera placé dans le conteneur <img> (cf remarque) et qui prendra comme valeur le nom de la map.

Pour introduire une image, on utilise la balise <img>. Tous les détails la concernant se trouvent dans l'article sur HTML et le multimédia.

<!-- Exemple de conteneur map -->
 
<map name="titi"> ... </map>

La balise <area> permet de définir une zone de l'image qui sera affectée à un lien. Il existe 3 types de zones de lien qui sont arguments de l'attribut shape :

• Rectangle,
• Cercle,
• Polygone.

Lorsque l'on définit une zone, il faut bien la matérialiser par des coordonnées et ce par l'intermédiaire de l'attribut coords. Celui-ci peut se trouver sous 3 formes selon le type de surface choisi. Il peut être de la forme :

• coords="x₁,y₁,x₂,y₂", si la surface choisie est le rectangle. Le couple (x₁,y₁) représente le coin supérieur gauche, tandis que le couple (x₂,y₂) représente le coin inférieur droit ;
• coords="x, y, r", si la surface choisie est un cercle. Le couple (x,y) représente le centre de celui-ci et r son rayon ;
• coords="x₁,y₁,...,x_n,y_n", si la surface choisie est un polygone quelconque. Les couples (x_i,y_i) représentent les coordonnées des sommets du polygone.

<!-- Exemple d'utilisation de la balise area -->
 
<area shape="circle" coords="250,100,200" href="ma_page.html">
 
<center>
<u>x</u> représente l'abscisse et <u>y</u> l'ordonnée d'un point.<br>
Ces coordonnées sont toutes exprimées en pixels.

Voici un exemple complet associé à l'image plus haut :

<html>
  <head>
    <title> Exemple 12 </title>
  </head>
  <body>
    <!-- Exemple de Map -->
    <img src="jext.jpg" usemap="#jext">
      <map name="jext">
        <area shape="rect" coords="12,12,104,80" href="rep/fichier1.html">
        <area shape="circle" coords="194,102,46" href="http://www.monsite.com/dossier.html">
        <area shape="poly" coords="37,197,17,264,179,268,132,193" href="/index.html#sommaire">
      </map>
  </body>
</html>

Voilà, nous en avons fini avec ce qui concerne les liens hypertextes. Cette notion est l'essence même du web puisque celui-ci ne peut se résumer à une seule page. La notion la plus importante de ce cours est sûrement celle de l'attribut href qui permet de cibler la page désirée. Sans celui-ci, un lien n'est rien. A méditer...