CPU ⬜ Carré Petit Utile

Extrait de l'émission CPU release Ex0203 : Aux origines du web.

Comme nous l'avons raconté, à l'origine du web, il y a une problématique : comment lier et récupérer des documents entre eux dans un contexte réseau. Étendre le principe même de l'hypertexte et l'appliquer entre plusieurs serveurs informatiques.

La particularité du HTML et qui a propulsé l'hypertexte à l'ère des réseaux partagés tient en un balisage spécifique pour les liens, et une notation réseau.

Le point crucial du langage créé par Tim Berners Lee, est une balise qui définit les hyperliens, la fameuse balise <a> et son attribut href="" qui contient l'adresse URL. Et la balise fermante plus loin par un </a>. Une balise qui résout à la fois le contexte d'un lien au milieu d'un texte, et où mène ce lien. Et tout texte et autres éléments entre la balise ouvrante et la balise fermante devient un lien. À noter une subtilité pour les étourdis : on ne peut mettre un lien à l'intérieur d'un autre lien, donc quand on déclare un lien, il faut le fermer pour en mettre un autre.
Le a est l'abréviation de anchor, pour ancre, to anchor veut dire fixer, mais aussi présenter (je suis un présentateur d'émission radio, en anglais, on me désigne comme anchorman).

Cette balise <a> est décrite dès la toute première spécification du HTML. Et d'entrée, elle permet de faire trois types de liens :

• des liens internes, pointant sur une balise nommée dans le même document, ce qui est très pratique quand on met un sommaire en début d'un immense document, ou des renvois en bas de page ;
• des liens relatifs, c'est à dire dépendant de la position relative du document dans l'arborescence fichier par rapport au contenu qu'il souhaite lier, genre dans le même répertoire, ou en sous-répertoire ;
• des liens absolus, qui se réfèrent à une adresse complète, potentiellement vers une autre machine…

…mais ça, on en parlera prochainement.

D'autres types de liens vont arriver dans le HTML, avec leurs tags spécifiques :

• la balise <img> et son attribut src="", qui sera la première insertion média,
• les liens documentaires, qui sont hors textes et plus des métadonnées du document, comme <link> ou <meta>,
• les formulaires avec la balise <form> et ses enfants <input>, <select>, <textarea> où le navigateur envoie au serveur des données renseignées par l'utilisateur,
• les insertions de programmes externes comme <object>, <embed>, <iframe>, et plus tard l'insertion d'un programme en javascript avec <script> ou une description de style, une CSS donc.

D'autres attributs seront rapidement ajoutés au tag <a>, donnant des explications ou comment prendre en charge le lien : ils donnent un titre alternatif du lien, quelle est la langue du contenu qui est pointé ou s'il faut l'ouvrir dans une nouvelle fenêtre.

Ces liens hypertextes donnent une vraie richesse d'interaction, tout en restant incroyablement simples à mettre en œuvre. Mais la conception du HTML de Tim Berners Lee induit une légère régression par rapport à ce qui existait : l'ajout d'un lien n'est pas réciproque, contrairement aux systèmes hypertextes existants sur un seul serveur. Donc si une page sur un serveur A fait un lien vers une page sur un serveur B, le serveur B ne le sait pas et doit être informé pour qu'il mette en place lui aussi un lien dans l'autre sens.
Ou pas.
D'ailleurs, spoiler, vous n'imaginez pas le nombre de pages web de notre site cpu.pm que je vais devoir modifier pour référencer dans chacune des précédentes chroniques celles issues de cette émission.
Oui, notre site web est fait main, avec toute la passion d'un artisan.
[Si ! si ! Regardez le code source de cette page ici → ←]

Sur l'aspect présenté par cette balise, on dit qu'elle est inline, c'est à dire qu'elle peut s'insérer dans le fil du texte et peut ne s'appliquer que sur un seul mot, voire un seul caractère (bande de vicieux). Par défaut, les liens sont présentés par les navigateurs comme colorés en bleu sombre et soulignés. C'est une tradition graphique. La raison historique du souligné est assez triviale : Tim Berners Lee a un NeXT Cube, qui a un écran… monochrome. Ouais, la station de travail de Steve Jobs qui coûte à l'époque le prix d'une voiture neuve n'a même pas un écran en couleurs par défaut, contrairement à ses contemporains PC ou micros 16/32 bits familiaux.
Dis, Steve Jobs, tes ordis sont littéralement hors de prix ! Ahem, pardon.

L'autre type de client web le plus utilisé était un navigateur en mode texte sur des terminaux d'ordinateurs centraux genre VT100 ou des PC en mode texte avec une carte Hercules monochrome.
La couleur bleue a un avantage : d'être très sombre, donc imprimable en noir et blanc en étant très proche du texte normal. Oui, à l'époque, les imprimantes couleurs commencent à se démocratiser, même si elles sont très chères et très lentes.

Et enfin, telle que rendue sur les premiers navigateurs web, la balise <a> a une propriété importante et fondamentale : Elle est accessible. On peut atteindre et donner le focus d'activité à une balise <a>au milieu d'un document avec la touche ↹ tabulation. Et une fois que cette balise a le focus, suivre le lien en appuyant sur la touche entrée ↵ ou espace.

Historiquement, cette propriété d'accessibilité fut dûe aux terminaux de gros ordinateurs qui avaient rarement d'autres touches de fonction et aux PC pré-Windows qui n'avaient pas de souris pour cliquer. Il était conventionnel dans les applications de l'époque de passer sur les éléments actifs affichés à l'écran avec la touche tabulation. L'accessibilité naturelle du web pour certains handicaps est venue à cause des limites des ordinateurs et terminaux de consultation, ce que l'on appelle un handicap situationnel. (en gros, un handicap qui vient de votre environnement immédiat ou de votre outil).

Quant à l'URL, c'est tout un monde, et nous en parlerons dans une émission à venir.

Auteur : Da Scritch.
Voix complémentaire : Infested Grunt
Photo : CC-By DaScritch.