Les tags LINK en HTML

Hiérarchiser des pages HTML
vendredi 20 décembre 2002
par  Gaétan RYCKEBOER
popularité : 1%

La norme HTML 4.0 (ainsi que HTML 4.01 et suivantes) facilite la gestion de documents volumineux en plusieurs pages.
Ainsi, vous pouvez définir les autres pages d’un document en cours de visualisation. Il faut considérez une page HTML donnée comme faisant partie d’une hiérarchie correspondant à un document complet. De la même façon que lorsque vous lisez un livre, vous savez en permanence quel est le chapitre lu, quelle section, etc.

LaTeX permet de faire ce genre de choses depuis longtemps, et les outils type docbook ou sgml-tools implémentent cet enrichissement de la norme HTML. Ainsi, chaque section pourra être traitée comme une page HTML. Les liens vers le chapitre dont elles font partie, les autres chapitres, la table des matière ou l’index seront mentionnées dans l’en-tête de la page HTML que vous visualisez, et le fureteur se chargera de gérer la hiérarchie.

Hiérarchie d’un document

Commençons par définir un document, et la hiérarchie de ses chapitres, sections et sous-sections. En français, on appelle cela le plan.

Notre document d’exemple sera un rapport de stage, son sujet traitera du cryptage par GPG (sujet traité par ailleurs sur le site de CLX, voir FAQ clés GnuPG).

Le rapport est organisé ainsi :
- Table des matières
- 1 Introduction

  • 1.1 Remerciements
  • 1.2 But du stage

- 2 Principe de base des clés asymétriques

  • 2.1 l’algorithme RSA
  • 2.2 L’algorithme DES
  • 2.3 L’algorithme DSA

- 3 Implémentation de GPG

  • 3.1 Gestion des clés
    • 3.1.a Création d’une clé GPG
    • 3.1.b Révocation d’une clé

- Conclusion
- Index

Le document est divisé en chapitre, eux-mêmes découpés en sections, sous sections, et enfin paragraphes. Ici, nous traiterons sur des pages séparées les chapitres et les sections, c’est-à-dire les niveaux 1 et 2, considérant que les niveaux inférieurs sont plus lisibles sur une seule page.
Ainsi, les sous sections Création d’une clé GPG et
Révocation d’une clé seront sur la page Gestion des clés.

Si vous réalisez un tel rapport en LaTeX puis l’exportez en PDF, vous visualiserez en permanence à gauche la hiérarchie de votre document, et vous pourrez directement à un endroit donné d’un document. Si vous l’exportez en HTML, il y a fort à parier qu’avec des outils de conversion récents, vous aurez une série pages HTML correspondant à ce que nous avons évoqué, au sein desquelles vous pourrez trouver des balises ajoutées dans l’en-tête des pages.

Implantation des balises

Elles sont de la forme <LINK REL="blabla" HREF="blabla" TITLE="blabla blabla"> et doivent figurer dans l’en-tête de la page (la partie encadrée par le <HEAD> </HEAD>

L’idée étant que pour chaque page indépendante, on puisse indiquer la hiérarchie — au dessus mais aussi au dessous — au sein de laquelle elle s’intègre. Pour cela, vous disposez d’un certain nombre de valeurs prédéfinies, à mettre dans le paramètre REL de la balise LINK :
- top : la page situé tout en haut. Ici, ce serait la première page, qui pourrait ressembler à une table des matières ;
- up : la page située juste au dessus dans l’arborescence ;
- next et previous : les page situées au même niveau, suivantes et précédentes ;
- last et first : les premières et dernières pages du niveau.

Voilà pour la navigation. Par exemple, pour la page "L’algorithme RSA", voici ce que cela donnerait :

<link rel="up" title="Principe de base des clés asymétriques" href="chapitre2.html">
<link rel="top" title="Rapport de stage" href="index.html">
<link rel="next" title="L'algorithme DES" href="section2.2.html">
<link rel="last" title="L'algorithme DSA" href="section2.3.html">
<link rel="Contents" title="Table des matières" href="sommaire.html">

Mais on peut aussi positionner d’autres balises, permettant un accès direct aux documents :
- chapter, pour le niveau 1 ;
- section, pour le niveau 2 ;
- subsection, pour le niveau 3 ;
- appendices, pour les annexes ;
- glossary, pour le glossaire ;
- index, pour l’index.

Au niveau de l’interface, ces balises de navigation directe ne sont malheureusement pas toujours gérées, mais si elles le sont, elles apparaîtront dans un menu popup très agréable à utiliser.

Formats multiples

Un autre intérêt des balises LINK est de permettre de visualiser des documents dans plusieurs langues, ou dans plusieurs formats. Pour cela, il suffit de renseigner les attributs "media" (pour le format) et "lang" (ou hreflang) pour la langue. Typiquement, ils s’insèrent dans une balise "alternative". Par exemple :

<LINK REL="alternative" LANG="en" MEDIA="screen" href="section2.1-en.html">

Notez qu’il est tout à fait possible de gérer conjointement plusieurs formats d’affichage par le biais d’une même page HTML en utilisant les styles CSS :

<LINK rel="stylesheet" media="aural" href="corporate-aural.css" type="text/css">
<LINK rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css">
<LINK rel="stylesheet" media="print" href="corporate-print.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE media="screen, print" type="text/css">
   p { color: rgb(230, 100, 180) }
</STYLE>
<STYLE type="text/css" media="projection">
   H1 { color: blue}
</STYLE>  <STYLE type="text/css" media="print">
  H1 { text-align: center }
</STYLE>

Ainsi, l’exemple suivant ajoute un effet sonore aux ancres (tag "A") pour être utilisé par un synthétiseur vocal :

<STYLE type="text/css" media="aural">
  A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)}
</STYLE>

Les media définis par la norme HTML 4.0 sont :
- screen, pour les écrans d’ordinateurs classiques ;
- aural, destiné à la synthèse vocale ;
- tty, pour les affichage à taille fixe, utilisables entre autres par lynx ou mosaic ;
- print, pour une sortie imprimante ;
- projection, pour les vidéo-projecteurs ;
- tv, pour une diffusion vers un téléviseur (basse résolution entre autres) ;
- handled, pour les PDA type PSION, PALM ou VR3 ;
- braille, pour les afficheur destinés aux aveugles [1] ;
- all, pour tout le monde. Cela implique un format compatible avec tous.

Autres types de liens

Vous le verrez plus loin, Mozilla gère également les liens non normalisés par le W3C. Cela dit, sans sortir du cadre strict de la norme, un certain nombre de liens sont utilisables, pour préciser diverses choses :
- help, pour donner une page précisant plus d’informations, de l’aide, des liens etc. ;
- authors, les auteurs de la page, une balise par auteur ;
- copyright, qui désigne une page donnant toutes les informations de copyright ie. la licence, les droits d’auteurs, etc. ;
- bookmarks, qui permet de donner des liens directs sur des documents annexes en relation avec la page courante.

Et d’autres balises non normalisées en HTML 4.0 mais gérées par les navigateurs :
- search, désignant une page permettant de faire une recherche sur le document (le site) que vous visualisez ;
- shortcut icon, qui permet d’indiquer un icône à afficher correspondant à la page que vous visualisez [2], vous le verrez dans l’exemple SPIP plus loin.

Implémentation courante et SPIP

Ces balises sont bien sûr très bien adaptées aux gros documents, comme un rapport, un livre, ou ce genre de choses trop volumineux pour être vu en une seule page, mais vous allez voir, on peut aisément en détourner l’usage pour l’adapter à n’importe quel site Web.
Ainsi, sur le site du CLX, si votre navigateur gère les balises de liens, vous pouvez naviguer dans tout le site sans passer par le liens hypertexte.

Pour utiliser ces balises dans un site Web complet, on peut imaginer la totalité du site comme une sorte de gros document. Les rubriques et sous rubriques pourraient alors être vues comme des chapitres et des sections, les pages contenues dans une rubriques seraient alors des sous sections. Il est également possible de sortir du cadre strict de la norme du W3C, et de créer de nouvelles balises, comme "rubrique", "sous-rubrique", "article", "brève" [3]... qui seront correctement traitées par Mozilla, en sachant que la page risque alors de ne plus être validée par le validateur [4] du W3C].

Ces balises rendent tout de même possible l’utilisation des barres de navigation de tous les navigateurs qui le gèrent [5], et peuvent être intégrées aisément au sein d’un squelette SPIP [6] de la sorte :

<HEAD>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<BOUCLE_ART(ARTICLES){id_article}>
   <title>CLX - #TITRE</title>
   <meta name="description" content="#RESUME">
   <link rel="SHORTCUT ICON" href="favicon.ico">
   <link rel="contents" href="http://clx.anet.fr/spip/">
   <link rel="copyright" href="http://clx.anet.fr/spip/article.php3?id_article=7" title="Ces documents sont sous licence GNU GPL">
   <link rel="Webmestre" title="Webmestre CLX" href="mailto:webmaster@clx.anet.fr">
   <BOUCLE_RUBa11(RUBRIQUES){id_secteur=#ID_SECTEUR}> <link rel="top" href="#URL_RUBRIQUE" title="#TITRE"> </BOUCLE_RUBa11>
   <BOUCLE_RUBa1(RUBRIQUES){id_rubrique}> <link rel="up" href="#URL_RUBRIQUE" title="#TITRE"> </BOUCLE_RUBa1>
   <BOUCLE_RUBarts(ARTICLES){id_rubrique}> <link rel="section" href="#URL_ARTICLE" title="#TITRE"> </BOUCLE_RUBarts>
   <BOUCLE_RUBrub(RUBRIQUES){id_parent}> <link rel="chapter" href="#URL_RUBRIQUE" title="#TITRE"> </BOUCLE_RUBrub>
   <BOUCLE_RUBbrv(BREVES){id_rubrique}> <link rel="subsection" href="#URL_BREVE" title="[(#DATE||jour)]-[(#DATE||mois)] #TITRE"> </BOUCLE_RUBbrv>
   <BOUCLE_AUTa1(AUTEURS){id_article}> <link rel="Authors" href="#EMAIL" title="#NOM"> </BOUCLE_AUTa1>
   <BOUCLE_ARTnext(ARTICLES){id_rubrique}{par date}{inverse}{age_relatif>0}{0,1}> <link rel="prev" href="#URL_ARTICLE" title="#TITRE"> </BOUCLE_ARTnext>
   <BOUCLE_ARTprev(ARTICLES){id_rubrique}{par date}{age_relatif<0}{0,1}> <link rel="next" href="#URL_ARTICLE" title="#TITRE"> </BOUCLE_ARTprev>
   <BOUCLE_ARTfirst(ARTICLES){id_rubrique}{par date}{0,1}> <link rel="first" href="#URL_ARTICLE" title="#TITRE"> </BOUCLE_ARTfirst>
   <BOUCLE_ARTlast(ARTICLES){id_rubrique}{par date}{inverse}{0,1}> <link rel="last" href="#URL_ARTICLE" title="#TITRE"> </BOUCLE_ARTlast>
</BOUCLE_ART>
</HEAD>

Navigateurs utilisant ces balises

On ne peut que regretter une fois de plus que les navigateurs les plus répandus ne soient pas compatibles avec les standards définis par le WWW consortium. Cependant, d’autres navigateurs gèrent correctement ces balises depuis leur apparition (Lynx et Mosaic), et d’autres relativement moins répandus les gèrent depuis peu. Voici la liste (non exhaustive) des navigateurs supportant les liens LINK :
- Mozilla (sauf le 1.0) ;
- iCab ;
- Opera 5.0 (Macintosh uniquement) et Opera 7 bêta (toutes plateformes) ;
- Lynx, bien sûr ;
- NCSA mosaic ;
- CAB (sur Atari) ;
- Emacs-w3 ;
- AOLpress (eh oui !).

Netographie

- L’excellente page de Mathias Gutfeld wenn Sie sprechen deutch et sa page de liens en Anglais (ouf) ! : http://www.subotnik.net/html/link.h...
- 101 trucs que Mozilla sait faire et qu’IE ne sait pas
- Le HTML 4.01 par le W3C
- La page du Web Design Group

Voilà, bon courage, et à vos claviers !


[1non voyants si vous préférez une pointe de démagogie.

[2IE le gère bien cette fois-ci.

[3Attention toutefois à ne pas mettre d’accent.

[4oops...

[5les IE* n’en font une fois de plus pas partie.

[6Consultez également les squelettes mis en place par le CLX.


Commentaires

Logo de DaffyDuke
jeudi 31 juillet 2003 à 00h50 - par  DaffyDuke

Pour les voir dans Firebird, consultez le site ci-dessous. Il convient d’installer l’indispensable plugin Link Toolbar.

dimanche 1er juin 2003 à 19h33 - par  jyves

super, je cherchais justement de la documentation sur les link pour songer à voir si je pouvais incorporer ça dans mon site en spip, et voilà qu’on m’en offre la description et l’implémentation sur un plateau ! merci.

Logo de Frédéric Gautier
mercredi 12 mars 2003 à 00h22 - par  Frédéric Gautier

Merci, corrigé.

Logo de ALLEGETICE
lundi 10 mars 2003 à 16h32 - par  ALLEGETICE

Juste pour vous signaler une petite erreur en fin de ligne de tag:dans implémentation courante et SPIP

Voir la correction en gras.
La boucle fermante doit être corrigée :

BOUCLE_ARTICLE

- changer par :

BOUCLE_ART

Annonces

Annuaire LibreNord

Retrouvez l’annuaire de logiciels libres créé par l’association Club Linux Nord-Pas de Calais sur le site suivant http://www.librenord.org


Sur le Web

16 mai - Marche mondiale contre Monsanto et Bayer

16 mai - Émission « Libre à vous ! » sur radio Cause Commune (21 mai 2019) - Modèles d'organisation d'entreprises - Transcriptions - Partager est bon

16 mai - Publication officielle du SILL 2019 (Socle interministériel de logiciels libres)

16 mai - Interview de Lionel Maurel - Bonus de Philippe Borrel - Internet ou la révolution du partage

15 mai - Fontaine, ville « libre » - Bonus de La Bataille du Libre

15 mai - L'April présente à la Fête du Libre le 25 mai 2019 à Ivry-sur-Seine (94)

15 mai - Collectivités, participez à l'édition 2019 du label Territoire Numérique Libre

15 mai - Tonton Alias raconte comment il s'est cogné au mur du content ID de Google - Décryptualité du 13 mai 2019

14 mai - « Libre à vous ! » diffusée mardi 14 mai 2019 sur radio Cause Commune - Développement logiciel libre – Next INpact – Internet ou la révolution du partage

14 mai - Pourquoi les logiciels tombent en panne - Décryptualité du 6 mai 2019

14 mai - Animatrice/animateur nature en CDD (30h) pour 4 mois

14 mai - Décryptualité du 13 mai 2019 - Tonton Alias raconte comment il s'est cogné au mur du content ID de Google

13 mai - Revue de presse de l'April pour la semaine 19 de l'année 2019

13 mai - Fête de la nature 2019

13 mai - Libre à vous ! Radio Cause Commune - Transcription de l'émission du 7 mai 2019

13 mai - Projection du film « Fahavalo »

11 mai - Urgent, mobilisez-vous, contactez sénateurs et sénatrices pour la priorité au logiciel libre dans l'éducation

10 mai - Interview de Hervé Le Crosnier - Bonus de Philippe Borrel - Internet ou la révolution du partage

10 mai - Interview de Pierre-Yves Gosset - Bonus de Philippe Borrel - Internet ou la révolution du partage

9 mai - Réunion du groupe de travail Sensibilisation de l'April le 16 mai 2019 à la FPH (Paris 11e) - accueil à partir de 18 h 30