Conception, suivi et animation d'un site web associatif


Page suivantePage precedente

2 - MAITRISER LA TECHNIQUE

2.1 - Le HTML, un langage simple

2.1.1 - Du côté de chez le client

2.1.2 - Du côté de chez le serveur

2.1.3 - Du côté de chez l'auteur

2.1.4 - Les enjeux de la technique

 


Présentation

Sommaire


Moteur de recherche


Contact avec l'auteur

-

2.1 - Le HTML, un langage simple

Le HTML est le langage universel qui permet aux ordinateurs connectés au réseau internet de communiquer entre eux : on parle d'interopérabilité entre les machines. Le HTML enrichit votre texte avec des "balises" : ce sont des indications de présentation ou de navigation abrégées, placées entre les deux signes < et >. Celles-ci sont comprises et interprétées par votre navigateur préféré (Netscape Navigator, Internet Explorer, pour n'en citer que deux) et permettent l'affichage du texte, des images, ou des liens hypertextes sur votre écran. Un bref exemple, et je vous renvoie au manuel d'initiation HTML que vous aurez choisi :

<i>

Je veux ce texte en italique.

</i>

où <i> est la balise de mise en italique, et </i> celle de fin d'italique, ce qui me donne à l'écran du navigateur :

Je veux ce texte en italique.

Ce langage offre également la possibilité extraordinaire de "feuilleter" un document complexe, en atteignant, depuis une page donnée, un nouveau texte grâce à un lien hypertexte. Cet effet est réalisé grâce à une simple balise placée sur un mot ou un groupe de mots (ceux-ci apparaissent généralement à l'écran en couleur et soulignés, et le curseur qui les survolent prend la forme d'une main au doigt pointé) ou encore sur une image, indiquant au navigateur qu'il doit afficher un autre texte lorsque le lecteur clique une fois dessus. Il peut s'agir d'un paragraphe situé dans la même page, ou bien d'une autre page du même site, ou bien d'une page d'un autre site, selon la syntaxe de la balise.

Voilà, c'est aussi simple que ça. Je répète (et en italique pour insister) : c'est aussi simple que ça. Les balises HTML ("tags" en anglais) vous permettent de commencer et de terminer un document, de modifier la présentation d'un texte, de proposer des liens hypertextes, d'afficher des images, de faire des tableaux, de mettre des jolies couleurs, etc. Pas besoin d'être informaticien ou programmeur pour vous en servir, il vous suffit d'être à l'aise avec un ordinateur et d'être rigoureux dans votre apprentissage et votre réalisation.

Pour vous entraîner, vous avez besoin d'un éditeur de texte quelconque (WordPad pour l'univers Windows, TeachText pour les Mac, feront aussi bien l'affaire, d'un manuel avec la liste des balises (voir Bibliographie), et d'un navigateur web pour contempler votre œuvre. Comme vous pouvez le constater, ces logiciels ne sont guère gourmands en mémoire, et votre ordinateur de la précédente génération suffit amplement à la tâche. Pas besoin non plus d'être connecté au réseau pour vos premiers essais : vous créez vos premières pages "en local", sur votre ordinateur, et pouvez les admirer et les tester, toujours en local (bien sûr, les liens vers les sites extérieurs ne fonctionneront pas). Et vous travaillerez de la même manière lorsque vous réaliserez le site de votre association. Par contre, vous aurez alors sans doute envie d'accélérer l'écriture du HTML en utilisant un logiciel "éditeur de HTML" dont la principale fonction est d'écrire les balises à votre place. Ils vous offrent en outre une interface graphique qui permet de travailler dans un environnement approchant le résultat final. Je recommande cependant fortement de commencer l'apprentissage en étudiant les balises et en les tapant à la main : il est très fréquent, lorsqu'on utilise un éditeur HTML, d'avoir à modifier soi-même le code qu'il génère.

retour

Le fichier texte qui regroupe balises et contenu s'appelle le "code source". Lorsque vous regardez une page web, c'est ce fichier qui a été transmis par la machine serveuse, depuis l'ordinateur qui héberge le site, jusqu'à votre propre machine. Il se trouve donc sur votre bécane, et vous pouvez le lire. Tous les navigateurs ont un menu qui permet de le visualiser (3). Si l'aspect d'une page web vous séduit, ouvrez-en le code source puis conservez-le pour en étudier les balises à loisir, en faisant un copier/coller vers un traitement de texte. Sa transparence est une des caractéristiques séduisantes du web, qui met à disposition de tous le code originel. Comparez cette ouverture avec le soin que mettent les concepteurs de logiciels commerciaux à verrouiller leurs programmes, ou avec les soucis de transfert d'un système à l'autre ("ton texte est sur une disquette Windows ? Et comment je fais pour le lire sur mon Mac ?") parce que les constructeurs semblent avoir mis un point d'honneur à ne pas vouloir communiquer entre eux...

Une dernière chose à savoir : c'est le navigateur du lecteur (de la "machine client") qui décide de la retranscription visuelle des balises du code source. En tant que concepteur de la page web, vous n'avez pas un contrôle absolu sur son aspect final, à l'autre bout du réseau. Si le lecteur est un peu myope, il modifie les paramètres de son navigateur pour lire les textes des pages web dans un gros caractère, une police de corps 18 par exemple. C'est aussi la taille de son écran qui détermine la largeur maximum de la fenêtre de son navigateur. C'est encore sa carte graphique qui est un peu vieille et ne lui propose que 256 couleurs, au lieu des millions sur lequel comptait le concepteur des pages pour représenter ses photos ou ses illustrations. Le navigateur de la machine client, et la version de celui-ci, décidera enfin s'il comprend ou non les balises qu'il reçoit. Gardez bien en tête ce facteur : il est déterminant quand vous décidez que votre site doit être visible par tous dans les meilleures conditions. Cela peut vous sembler réducteur de ne pas avoir le contrôle sur l'aspect final de votre page (imaginez l'angoisse des graphistes web) : comprenez que ce n'est qu'à ce prix, relativement réduit, que le web peut être accessible à tous.

La simplicité du langage HTML provient de son origine : lorsque le web a été conçu, il devait servir à échanger des documents entre universitaires, bien plus soucieux du fond que de la forme. Quelques balises de présentation du texte (titre, sous-titre, listes...) suffisaient alors, le principal étant le caractère universel et pratique d'un langage devant relier tous les ordinateurs, et leurs différents systèmes d'exploitation (Mac OS, Windows, Unix, etc.). Voilà comment est née la première version du HTML, le HTML 1. En 1994, deux ans après la démonstration du premier serveur, le CERN (4) a créé le World Wide Web Consortium (W3C en abrégé), une association d'informaticiens basée au MIT (5) chargée d'élaborer et de faire progresser le HTML (c'est l'INRIA (6) qui y participe, pour la France). Le premier navigateur moderne, nommé Mosaïc, comporte une interface graphique : ses capacités ont poussé le W3C à enrichir le HTML vers sa version 2, adoptée en septembre 1995.

L'Internet et le web font alors timidement leur apparition dans la presse grand public, aux Etats-Unis, puis en France. Rappelons que le premier existe, dans une version expérimentale, depuis 1969, comme un projet de recherche d'une agence du département de la Défense des Etats-Unis, dans un contexte militaire donc. Et qu'il devient civil à la fin des années 70, lorsque les scientifiques nord-américains obtiennent, une fois raccordés les centres de recherche et les universités, la possibilité d'utiliser le réseau. Les Etats apportent leur financement au projet entre 1986, aux Etats-Unis, et 1994, pour la France avec RENATER (7). En 1995, le réseau grandissant, les opérateurs privés prennent le relai pour financer le développement des infrastructures de connexion.

retour

Flairant l'aubaine (mais rien à l'époque ne laissait croire que "ça marcherait" si bien, d'ailleurs bien prétentieux qui affirmerait aujourd'hui savoir ce que sera le web dans dix ans), des sociétés commerciales se lancent sur le marché du navigateur, Netscape d'abord (avec Navigator) puis Microsoft (avec Internet Explorer). Leur coup de génie consiste en distribuer gratuitement les navigateurs, chacun tentant de s'emparer de la totalité du marché. On estime qu'à eux deux, et dans leurs différentes versions, ils représentent actuellement 95 % du marché, dont 15 % pour Netscape Navigator et 80 % pour Internet Explorer (8). Précisons tout de suite qu'il existe d'autres navigateurs, comme KFM, Opera ou Lynx.

A partir de 1995, commence ce que j'appelle la "course à l'armement" dans le domaine du HTML. Le W3C, conscient que les utilisateurs ont besoin de plus de fonctionnalités, travaille à se mettre d'accord sur de nouvelles balises pour la version 3 du HTML. En mai 1996, il présente le HTML 3.2, qui comprend, entre autre, la présentation en tableaux (si utile pour la mise en page), plus de choix pour l'organisation des textes autour des images, des options de tailles et couleurs différentes pour les caractères, etc. Mais les "frames", que Netscape (et lui seul) permet d'afficher depuis sa version 2.0, n'en font pas partie. C'est que, de leur côté, les fabricants de navigateurs ont développé, au nom des utilisateurs (ou plutôt au nom de leur propre lutte pour le contrôle du marché ?), des balises apportant de nouvelles fonctionnalités à chaque version de leur logiciel (nous en sommes actuellement à la version 6 de Netscape Navigator et 5.5 d'Internet Explorer), sans que ces balises aient été entérinées par le W3C. Bien sûr, elles ne sont pas reconnues par les autres navigateurs (ni par la version antérieure dudit navigateur, d'ailleurs). Voilà qui fait éclater rapidement la notion d'interopérabilité, d'universalité de lecture, à la base du web. Le W3C peine à suivre la cadence : mais y est-il obligé ? Les améliorations proposées par les navigateurs commerciaux ne sont-elles pas des cyber-gadgets ? Etudions cela de plus près.

L'évolution du web a lieu dans différentes directions : plus de multimédia (animations, sons, vidéos...), plus d'interactivité (ce sont les demandes du lecteur qui génèrent les pages, à partir d'un ensemble de données, selon les informations dont lui seul a besoin, par exemple), plus d'indépendance par rapport au support (de nouveaux langages proposent des balises "structurant" le texte, au lieu de préciser uniquement son apparence, comme le HTML). Cette évolution peut se définir selon trois grands critères techniques : la nouvelle fonctionnalité est prise en charge, soit par la machine client (l'ordinateur et le navigateur du lecteur), soit par la machine serveur (celle où se trouve hébergé le site web), soit elle est réalisée sur la machine de l'auteur du site. Dans le premier cas, c'est donc bien le lecteur qui décide s'il veut profiter du gadget, en choisissant sa version de navigateur ou en paramétrant celui-ci, ou sa machine qui décide si elle le peut, techniquement parlant.

Je laisse de côté, pour l'instant, mon antienne sur la primauté du contenu dans un site associatif : étudions un peu les avantages et les inconvénients de chacune de ces innovations, dans l'optique précédemment posée d'un accès universel.

[ Cette section 2.1 est divisée en deux fichiers : lisez donc la suite ]

retour


Complétez cette section :

- Pour quelques explications plus générales sur l'hypertexte, voir l'annexe 1.

- Sur les logiciels éditeurs de HTML, cf. par. 4.2 - Quel budget ?

- Quelques conseils pour le choix d'un ouvrage sur le HTML dans la bibliographie > Technique

 Page suivantePage precedente


Notes

(3) Dans Internet Explorer : Affichage > Source ; dans Netscape : Afficher > Source de la page.

(4) CERN : Centre européen de la recherche nucléaire

Merci, pour la partie historique, à Jean-Luc Parouty, Mejdi Ayari et Laurent Aucher, enseignants à l'Agence universitaire de la francophonie.

(5) MIT : Massachussets Institute of Technology

(6) INRIA : Institut national de recherche en informatique et automatique

(7) RENATER : Réseau national de l'éducation et de la recherche. C'est le fournisseur d'accès des établissements français d'enseignement et de recherche.

(8) Ces chiffres datent de juillet 2001, et proviennent de l'étude - mise à jour de manière permanente - menée sur le site suivant (en anglais) :

http://www.cen.uiuc.edu/bstats/latest.html retour


"Conception, suivi et animation d'un site web associatif" - Eve Demazière - Décembre 1999 - eve@internatif.org
http://www.internatif.org/eve/serveurs/2_1.html - Mis à jour : Samedi 21 juillet 2001