Le premier site web de l'histoire

Publié le - Mis à jour le 09-02-2016

Le premier site web de l’histoire, qui présentait le projet « Word Wide Web », fut mis en ligne en 1990 par Tim Berners-Lee, l’inventeur du web, sur l’URL http://nxoc01.cern.ch/hypertext/WWW/TheProject.html.

Ce site a ensuite évolué, car il a été régulièrement mis à jour. Une copie de son dernier état, datant de 1992, est consultable sur le site du World Wide Web Consortium (W3C), l’organisme international de normalisation des techniques liées au web également fondé par Tim Berners-Lee en 1994.

Qui a suivi sur francetvéducation le deuxième épisode des aventures du « HTML par lui-même » connait à présent suffisamment le HTML pour comprendre presque tout le code source de ce premier site de l’histoire et même pour réaliser soi-même un site du même type.

tim berners-lee's computer at cern

L'ordinateur NeXT de Tim Berners-Lee sur lequel a été conçu et hebergé le premier site web de l'histoire.
Crédit : By Robert Scoble from Half Moon Bay, USA [CC-BY-2.0 (http://creativecommons.org/licenses/by/2.0)], via Wikimedia Commons

Mais depuis le début des années 1990, le HTML a évolué, et aujourd’hui Tim Berners-Lee ne coderait plus exactement les pages de son site de la même façon.

Pour faire un peu d’histoire, attardons-nous un peu sur le code source de la fameuse première page de l’histoire du web, désormais accessible sur le site du W3C via l’URL : http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

Nous allons regarder comment ce précieux document historique est codé, puis nous verrons ensuite un exemple de manière dont on pourrait coder la même page aujourd’hui. Nous reviendrons enfin sur ce qui a changé.
 

Le code de la première page HTML de l’histoire du web

  1. <HEADER>
  2. <TITLE>The World Wide Web project</TITLE>
  3. <NEXTIDN="55">
  4. </HEADER>
  5. <BODY>
  6. <H1>World Wide Web</H1>The WorldWideWeb (W3) is a wide-area<A
  7. NAME=0HREF="WhatIs.html">
  8. hypermedia</A> information retrieval
  9. initiative aiming to give universal
  10. access to a large universe of documents.<P>
  11. Everything there is online about
  12. W3 is linked directly or indirectly
  13. to this document, including an<A
  14. NAME=24HREF="Summary.html">executive
  15. summary</A>of the project,<A
  16. NAME=29HREF="Administration/Mailing/Overview.html">Mailing lists</A>
  17. ,<A
  18. NAME=30HREF="Policy.html">Policy</A>, November's<A
  19. NAME=34HREF="News/9211.html">W3 news</A>,
  20. <A
  21. NAME=41HREF="FAQ/List.html">Frequently Asked Questions</A>.
  22. <DL>
  23. <DT><A
  24. NAME=44HREF="../DataSources/Top.html">What's out there?</A>
  25. <DD>Pointers to the
  26. world's online information,<A
  27. NAME=45HREF="../DataSources/bySubject/Overview.html">subjects</A>
  28. ,<A
  29. NAME=z54HREF="../DataSources/WWW/Servers.html">W3 servers</A>, etc.
  30. <DT><A
  31. NAME=46HREF="Help.html">Help</A>
  32. <DD>on the browser you are using
  33. <DT><A
  34. NAME=13HREF="Status.html">Software Products</A>
  35. <DD>A list of W3 project
  36. components and their current state.
  37. (e.g.<A
  38. NAME=27HREF="LineMode/Browser.html">Line Mode</A>,X11<A
  39. NAME=35HREF="Status.html#35">Viola</A>,<A
  40. NAME=26HREF="NeXT/WorldWideWeb.html">NeXTStep</A>
  41. ,<A
  42. NAME=25HREF="Daemon/Overview.html">Servers</A>,<A
  43. NAME=51HREF="Tools/Overview.html">Tools</A>,<A
  44. NAME=53HREF="MailRobot/Overview.html">Mail robot</A>,<A
  45. NAME=52HREF="Status.html#57">
  46. Library</A>)
  47. <DT><A
  48. NAME=47HREF="Technical.html">Technical</A>
  49. <DD>Details of protocols, formats,
  50. program internals etc
  51. <DT><A
  52. NAME=40HREF="Bibliography.html">Bibliography</A>
  53. <DD>Paper documentation
  54. on W3 and references.
  55. <DT><A
  56. NAME=14HREF="People.html">People</A>
  57. <DD>A list of some people involved
  58. in the project.
  59. <DT><A
  60. NAME=15HREF="History.html">History</A>
  61. <DD> A summary of the history
  62. of the project.
  63. <DT><A
  64. NAME=37HREF="Helping.html">How can I help</A>?
  65. <DD>If you would like
  66. to support the web..
  67. <DT><A
  68. NAME=48HREF="../README.html">Getting code</A>
  69. <DD>Getting the code by<A
  70. NAME=49HREF="LineMode/Defaults/Distribution.html">
  71. anonymous FTP</A>, etc.</A>
  72. </DL>
  73. </BODY>
  74.  

Le code de la première page HTML de l’histoire du web actualisé

Voici un exemple de manière dont on pourrait coder la même page aujourd’hui :

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.   <head>
  5.    <metacharset="utf-8">
  6.    <title>The World Wide Web project</title>
  7.   </head>
  8.  
  9.   <body>
  10.  
  11.    <h1>World Wide Web</h1>
  12.  
  13.    <h2>The WorldWideWeb (W3) is a wide-area<aid="0"href="WhatIs.html">hypermedia</a>information retrieval initiative aiming to give universal access to a large universe of documents.</h2>
  14.  
  15.    <p>Everything there is online about W3 is linked directly or indirectly to this document, including an<aid="24"href="Summary.html">executive summary</a>of the project,<aid="29"href="Administration/Mailing/Overview.html">Mailing lists</a>,<aid="30"href="Policy.html">Policy</a>, November’s<aid="34"href="News/9211.html">W3 news</a>,<aid="41"href="FAQ/List.html">Frequently Asked Questions</a>.</p>
  16.  
  17.    <dl>
  18.  
  19.     <dt><aid="44"href="../DataSources/Top.html">What’s out there?</a></dt>
  20.     <dd>Pointers to the world’s online information,<aid="45"href="../DataSources/bySubject/Overview.html">subjects</a>,<aid="z54"href="../DataSources/WWW/Servers.html">W3 servers</a>, etc.</dd>
  21.  
  22.     <dt><aid="46"href="Help.html">Help</a></dt>
  23.     <dd>on the browser you are using</dd>
  24.  
  25.     <dt><aid="13"href="Status.html">Software Products</a></dt>
  26.     <dd>A list of W3 project components and their current state. (e.g.<aid="27"href="LineMode/Browser.html">Line Mode</a>, X11<aid="35"href="Status.html#35">Viola</a>,<aid="26"href="NeXT/WorldWideWeb.html">NeXTStep</a>,<aid="25"href="Daemon/Overview.html">Servers</a>,<aid="51"href="Tools/Overview.html">Tools</a>,<aid="53"href="MailRobot/Overview.html">Mail robot</a>,<aid="52"href="Status.html#57">Library</a>)</dd>
  27.  
  28.     <dt><aid="47"href="Technical.html">Technical</a></dt>
  29.     <dd>Details of protocols, formats, program internals etc</dd>
  30.  
  31.     <dt><aid="40"href="Bibliography.html">Bibliography</a></dt>
  32.     <dd>Paper documentation on W3 and references.</dd>
  33.  
  34.     <dt><aid="14"href="People.html">People</a></dt>
  35.     <dd>A list of some people involved in the project.</dd>
  36.  
  37.     <dt><aid="15"href="History.html">History</a></dt>
  38.     <dd>A summary of the history of the project.</dd>
  39.  
  40.     <dt><aid="37"href="Helping.html">How can I help</a>?</dt>
  41.     <dd>If you would like to support the web..</dd>
  42.  
  43.     <dt><aid="48"href="../README.html">Getting code</a></dt>
  44.     <dd>Getting the code by<aid="49"href="LineMode/Defaults/Distribution.html">anonymous FTP</a>, etc.</dd>
  45.  
  46.    </dl>
  47.  
  48.   </body>
  49. </html>

Ce qui a changé

  • Les majuscules
    On peut voir qu’à l’époque les balises et leurs attributs étaient écrits en majuscules. En 2000, l’évolution du HTML a rendu obligatoire leur écriture en minuscules. Aujourd’hui, avec le HTML5, l’écriture en minuscules n’est plus obligatoire, mais l’habitude semble avoir été prise…
  • L’absence de balise <html>
    Il n’y avait pas de balises <html> et </htm> pour délimiter l’ensemble du document, ni de déclaration de doctype, ni de déclaration d’un jeu de caractères.
  • La balise <HEADER>
    L’ancêtre de la balise <head> était <HEADER>. Comme cela a été vu dans « Le HTML par lui-même » au moment d’évoquer la dimension sémantique du html, la balise <header> a aujourd’hui changé de sens et désigne en HTML5 une partie du corps de la page. Elle délimite l’en-tête visible de la page.
  • Des balises laissées ouvertes
    Il n’était pas obligatoire de mettre des balises fermantes ! on voit au début du code une balise <p> ouvrante qui ne sera jamais fermée par une balise </p> (cette balise était utilisée comme une balise <br/>, pour faire un saut de ligne). de même plus loin pour la série de balises <dt> et <dd>. ces deux balises existent toujours et ont été rapidement évoquées dans « le html par lui-même » quand ont été passées en revue les principales balises permettant l’insertion de texte. les balises <dl>, <dt> et <dd> permettent l’insertion d’une liste de descriptions.
    <dl> marque le début de la liste et </dl> en marque la fin. les balises <dt> insèrent chacun des termes à décrire et les balises <dd> insèrent chacune de leurs descriptions.
  • Les anciennes ancres HTML
    Les ancres HTML étaient créées avec l’attribut « name » (et non pas l’attribut « id »), et cet attribut « name » recevait une valeur numérique (sans que celle-ci soit mise entre guillemets).
    Il s’agit bien d’ancres HTML : on peut s’en convaincre en tapant http://www.w3.org/history/19921103-hypertext/hypertext/www/theproject.html#49 dans la barre d’adresse de son navigateur (« 49 » correspond à l’identifiant de la dernière ancre du document).
    Bien sûr, pour pouvoir s’en rendre compte, il faut que la fin du contenu de la page soit sous la ligne de flottaison (autrement dit, il faut être obligé de faire défiler la page pour en voir la fin), et pour cela, il peut être nécessaire de rétrécir la taille de la fenêtre de son navigateur si on a un grand écran, jusqu’à faire apparaître la barre de défilement sur le côté droit du navigateur.
  • La balise <NEXTID>
    La balise <NEXTID N="55">, juste après la balise <TITLE>, est une balise qui a aujourd’hui totalement disparu. Il s’agissait d’un aide-mémoire permettant d’indiquer le prochain identifiant avec lequel créer la prochaine ancre HTML (« next id » peut se traduire par « prochain identifiant »).
    Ce qui distingue un document HTML d’un document imprimé, c’est qu’on peut le changer et le mettre à jour indéfiniment, en y ajoutant et en y retranchant du contenu. On voit dans cette première page du web qu’au fur et à mesure que des nouvelles versions de la page ont été mises en ligne entre 1990 et 1992, du contenu comprenant pas moins de trentre ancres HTML a été effacé, correspondant aux valeurs numériques suivantes : 1-12, 16-23, 28, 31-33, 36, 38, 39, 42, 43, 50 (car ne restent aujourd’hui dans le code que les ancres correspondant aux valeurs 0, 13-15, 24-27, 29, 30, 34, 35, 37, 40, 41, 44-49, 51-54).
    Si on devait aujourd’hui ajouter du contenu dans cette page avec une nouvelle ancre, la balise <NEXTID> nous rappelle qu’il faudra utiliser la valeur « 55 » qui n’a pas encore été utilisée (la dernière à avoir été utilisée était « 54 ») et ne surtout pas réutiliser aucune des valeurs numériques que nous venons de citer. En effet, si pour créer une nouvelle ancre on réattribuait par exemple la valeur « 42 », qui avait déjà été utilisée jadis pour créer une ancre qui depuis a été effacée, et qu’un autre site sur le web avait fait et gardé un lien vers cette ancre avant qu’elle ne soit effacée (http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html#42), ce lien pointerait aujourd’hui vers un contenu totalement différent. La balise <NEXTID> fournit un aide-mémoire en indiquant la prochaine valeur numérique à utiliser pour créer une ancre afin d’éviter ce cas de figure. L’idée est qu’il vaut mieux un lien mort qu’un lien vers un contenu qui aurait changé.

On se rend compte aussi ici qu’à l’époque la navigation à l’aide des ancres semble avoir été beaucoup plus importante qu’aujourd’hui. Cela s’explique peut-être parce que la résolution d’écran la plus répandue à l’époque était beaucoup plus basse : 640 × 480 pixels dans les années 1990 contre 1366 × 768 pixels au début des années 2010. On ne pouvait donc pas embrasser d’un seul regard tout le contenu d’une page telle que cette première page du web comme on peut le faire aujourd’hui sur la plupart des écrans. On ne voyait dans son écran qu’une petite portion de la page. Pouvoir créer des liens ciblant une partie précise de la page devait donc être beaucoup plus utile.
 

Vie et mort des balises : le HTML a une histoire

Mais pourquoi s’attarder aussi longtemps sur une balise comme la balise <NEXTID>, qui de toute façon n’existe plus ? Parce que c’est important pour comprendre le web de comprendre que celui-ci a une histoire. Les balises ont une vie, puis elles meurent. <NEXTID> a été rejoindre le cimetière des balises disparues.
On croit souvent que l’existence numérique échappe au vieillissement, à la corruption des choses matérielles. Mais une page HTML n’existe qu’aussi longtemps que les navigateurs savent l’interpréter.
Dans 50 ans, les navigateurs sauront-ils encore interpréter les pages que nous codons aujourd’hui, ou bien le HTML aura-t-il tellement évolué que nos pages actuelles seront devenues illisibles ?
Suivre les directives du W3C devrait garantir une « compatibilité ascendante » permettant aux techniques actuelles d’être compatibles avec les techniques du futur, mais est-ce si sûr ?

Recommandations