Ircam - Centre Georges-Pompidou
IRCAM - Centre PompidouServeur © IRCAM - CENTRE POMPIDOU 1996-2005.
Tous droits réservés pour tous pays. All rights reserved.

Introduction au langage HTML:
comment composer des pages pour un serveur WWW

1. Introduction

Michel Fingerhut
2e édition, © Ircam 1995, 1996

Le texte et sa mise en page

Texte et directives

Les documents fournis par un serveur WWW sont des fichiers informatiques comprenant bien évidemment le texte, mais aussi des directives de structuration et de mise en page, de même qu'une pièce de théâtre imprimée comprend, outre le texte lui-même, des indications de mise en scène et de jeu: titre, sous-titre, paragraphe, liste, italiques, gras, tableaux, images, références externes...

Structuration et mise en page

Lorsqu'un utilisateur consulte un serveur (par exemple: celui de l'Ircam[1]), celui-ci envoie les documents à l'état brut, texte et directives. La mise en page (ou plutôt en écran) se fera chez l'utilisateur, dans l'application qui aura servi à «demander» ce document (Mosaic[2], Internet Explorer[3], Netscape[4]..., communément appelés «navigateurs»[5]), en fonction de la taille de la fenêtre, des polices de caractère disponibles sur l'ordinateur de l'utilisateur, des couleurs (ou de leur absence), etc. Elle pourra donc varier d'un écran à l'autre.

Le langage HTML[6] permet essentiellement de faire ressortir à l'écran la structure d'un document: ses chapitres, paragraphes et leurs regroupements. Ces entités apparaîtront différemment selon que la fenêtre de visualisation est plus ou moins large, quel que soit le navigateur que l'on utilise (Mosaic, Internet Explorer, Netscape, etc.): si le lecteur rétrécit la fenêtre, les lignes se replieront plus tôt. Ça n'est pas le cas d'un document mis en page en Postscript, par exemple: sa mise en page sera préservée quelque soit la largeur de la fenêtre, et si celle-ci est trop étroite, on ne verra qu'une partie des lignes.

HTML offre aussi une forme plus limitée de mise en page, par laquelle on peut spécifier la place relative d'entités les unes par rapport aux autres horizontalement et verticalement. On se sert pour cela des tableaux.

Langage en évolution

Enfin, il faut savoir que le standard HTML est en évolution: il existe un groupe chargé d'en discuter les normes (cf. Pour en savoir plus), et, d'autre part, des constructeurs (tels Netscape) rajoutent diverses fonctionnalités qui ne sont pas forcément acceptées par la communauté. Cet état de fait (fruit d'expérimentations, d'une part, mais aussi d'intérêts commerciaux puissants - la volonté d'imposer son propre standard et de dominer le marché) va à l'encontre de ce que HTML se propose d'être: un standard commun.

Les outils de composition

Outil de lecture, outil de composition

De même qu'un document MS-WORD ne peut être lu qu'à l'aide d'une application qui comprend ce format (MS-WORD, bien évidemment, mais d'autres encore), un document en HTML ne peut être en général lu qu'avec un outil adéquat (Mosaic, Internet Explorer, Netscape, ...).

Contrairement à MS-WORD, par exemple, qui sert à composer le document et à l'afficher à l'écran ou à le lire, on ne peut composer des pages en HTML à l'aide d'un navigateur (bien que cela en ait été l'intention des créateurs de HTML, et bien qu'on peut s'en servir pour les modifier localement).[7]

Outils de composition spécialisés ou non

Encore contrairement à MS-WORD, le format des fichiers en HTML est lisible, et ne comprend aucun caractère spécial (voir exemple ci-dessous): ils peuvent donc être préparés par n'importe quel éditeur de texte (par exemple: TeachText sur Macintosh, Edit sur MS-DOS/Windows, ou encore vi sur Unix). Toutefois, ceci suppose une bonne connaissance du langage HTML.

Il existe aussi des éditeurs spécialisés, qui facilitent la création de tels documents en «cachant» à l'auteur le langage sous-jacente (comme le fait MS-WORD pour des documents en WORD): des menus, boutons, et autres outils servent à insérer les directives de mise en page (HtmlPro, ...).

Les directives (étiquettes, tags)

Syntaxe

Les directives sont mêlées au texte; pour s'en distinguer, elles sont indiquées par des signes particuliers: < avant la directive, et > à la fin de la directive. La directive est un code d'une ou plusieurs lettres, suivie dans certains cas d'informations ou précisions complémentaires (par exemple: dans le cas d'une image, si elle est alignée par le haut ou le bas).

Ainsi, pour mettre une partie du texte en gras dans la phrase:

ceci est un exemple de phrase en HTML
le document comprendra:
ceci est <B>un exemple</B> de phrase en HTML
Le navigateur, à la réception de cette phrase, commencera à afficher le texte, jusqu'à la directive <B> (B = Bold, gras en anglais), qui lui ordonne de passer en gras. Les mots suivants seront donc affichés en gras, jusqu'à la directive </B> dans laquelle le / indique "fin de", donc, dans notre exemple, fin de mise en gras. Les derniers mots seront donc affichés dans la police précédente.

La directive à l'intérieur des crochets peut être écrite indifféremment en majuscules ou minuscules (mais non pas les indications complémentaires).

Champ d'action

On remarque que la directive "gras" possède un champ d'action: sa mise en effet est signifiée par <B> et son arrêt par </B>. C'est le cas de nombreuses directives, qui apparaissent donc en paire. Par contre, d'autres ont un effet immédiat et local (par exemple: insérer une image, couper un paragraphe) et ne possèdent un "pendant" avec le signe /.

Nous allons voir successivement les principales directives. Nous prenons pour exemple la page d'accueil du serveur de l'Ircam, dont le texte intégral apparaît ci-dessous:
La page à l'écranLes directives HTML la composant
<HTML>
<HEAD>
<TITLE>Serveur WWW de l'Ircam</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<IMG ALIGN=TOP SRC="/images/logo.gif" ALT="Ircam - Centre Georges-Pompidou">
<HR>
<H1>Institut de Recherche et Coordination Acoustique/Musique</H1>
<IMG ALIGN=MIDDLE SRC="/images/ircam.gif" ALT="Adresse:"> 1 Place Igor-Stravinsky,
75004 Paris (France)
<HR>
<I>(<A HREF="index-e.html">English version</A>)</I>
<H2>Vous avez accès aux rubriques suivantes:</H2>
<UL>
<LI> <A HREF="/accueil/visite.html">Visite de l'IRCAM</A>
<LI> <A HREF="/accueil/concerts.html">La musique</A>
<LI> <A HREF="/accueil/r-et-d.html">La recherche et le développement</A>
<LI> <A HREF="/forum/">Le groupe des utilisateurs de logiciels (FORUM IRCAM)</A>
<LI> <A HREF="/equipes/pedago.html">Les cours et formations</A>
<LI> <A HREF="/biblio/index.html"> La bibliothèque</A>
<LI> <A HREF="/produits/editions/publications.html">Les produits éditoriaux</A>
<LI> <A HREF="/divers/index.html">Informations et services divers</A>
<LI> <A HREF="/interne/index.html">Rubriques internes</A>
</UL>
<H2>Actualités:</H2>
<UL>
<LI> <A HREF="inauguration/introduction.html">Inauguration des nouveaux
espaces</A>: L'Ircam dévoile le haut, du 14 au 29 juin 1996
</UL>
<H2>Organismes et activités connexes:</H2>
<UL>
<LI><A HREF="http://www.cnac-gp.fr">Centre national d'art et de culture
Georges Pompidou</A>
<LI><A HREF="http://www.bpi.fr">Bibliothèque publique d'information</A> (BPI)
<LI><A HREF="http://www.culture.fr">Ministère de la Culture</A>
</UL>
<H2>Dans le cadre des actions du Centre Pompidou et de l'Ircam dans
les domaines de l'exclusion et de la solidarité:</H2>
<UL>
<LI><A HREF="artcom">Base de données d'Artcom de films et vidéos pour la
lutte contre le Sida</A>
<LI><A HREF="solidarites/sida/index.html">Sida et VIH - manifestations,
informations et ressources</A>
</UL>
<FONT SIZE=3>En cas de problème, prière d'envoyer un courrier électronique à
<A HREF="mailto:webmaster@ircam.fr">webmaster@ircam.fr</A> détaillant ce qui
est arrivé et fournissant les messages d'erreur le plus fidèlement possible.
Merci!</FONT>
</BODY>
</HTML>

Mot d'ordre: structurer!

Il est primordial de bien structurer un texte, non seulement par rapport à son sens, mais à sa présentation: les mots alignés les uns après les autres composent une phrase; des phrases composent un paragraphe. Ceux-ci peuvent être combinés de diverses façons (listes), et regroupés en chapitres et sous-chapitres, sous des en-têtes dont la forme indique le niveau de regroupement.

Par exemple, le document que vous tenez entre vos mains comporte un titre (en première page), puis des sous-titres. Dans un traitement de texte (comme MS-WORD) il est possible d'établir ces distinctions manuellement (en jouant sur la taille de la police, sur les retours de chariot, etc.): c'est l'approche du bricoleur.

Il existe, par contre, dans la plupart de ces traitements de texte des "entités" sémantiques telles que: titre, sous-titre, paragraphe, ... qui permettent d'obtenir ces mêmes effets de mise en page.

À première vue, ils sont plus "compliqués" à mettre en oeuvre (tant qu'on n'a pas appris à le faire), mais leur utilité se révèle très rapidement: par exemple, si l'on veut changer l'apparence de tous les sous-titres d'un document, on ne peut le faire "d'un coup" que s'ils sont "reconnus" par le logiciel en tant que tels, se distinguant du reste du texte. Par contre, dans l'approche du bricoleur, il faudra aller d'un sous-titre à l'autre jusqu'à qu'ils aient tous été modifiés individuellement.

Un autre avantage apparaît lorsque l'on veut convertir des documents préparés pour un traitement de texte pour les utiliser dans un autre: par exemple, prendre un document en MS-WORD pour le convertir par une "moulinette automatique" en un document HTML. Si le document d'origine est bien structuré, sa conversion reproduira en général les mêmes notions (paragraphe, en-têtes, etc.) dans le format cible. Si, par contre, il est bricolé, le résultat sera en général illisible et demandera de nombreuses interventions manuelles.

Conclusion: avant de rédiger le document, penser en terme de structure, et l'écrire ainsi.

Notes

  1. Il s'agit de l'ancienne présentation du serveur de l'Ircam, encore disponible à l'adresse http://www-old.ircam.fr/.
  2. Mosaic a été le premier navigateur hypertextuel, développé par le NCSA à l'Université de Chicago. Disponible gratuitement sur de nombreuses plates-formes, son développement a récemment été stoppé, suite à l'émergence de navigateurs commerciaux qu'il ne pouvait concurrencer.
  3. Internet Explorer est une récente création de Microsoft, qui souhaite s'implanter fortement sur l'Internet, et concurrencer Netscape..
  4. Netscape, produit commercial de la société du même nom, fondée (entre autres) par le développeur principal de Mosaic, après qu'il ait quitté le groupe du NCSA.
  5. Le terme «navigateur» (ou, plus poétiquement «butineur») traduit le terme anglais browser (mot qui signifie lire en diagonale, feuilleter, dont «butineur» rend mieux le sens), et indique l'une des fonctions de ces applicatifs: le déplacement dans des documents multimédias répartis (butineur, quant à lui, indique bien le mode le plus plus commun d'accès, le lèche-vitrine!).
  6. HyperText Markup Language (langage d'annotation pour hypertexte) est un dérivé de SGML (Standard Generalized Markup Language), lui-même un langage pour la structuration de documents textuels.
  7. Une extension d'Internet Explorer vient d'être mise sur le marché par Microsoft (FrontPage). Celle-ci permet de gérer le contenu d'un serveur à partir d'un navigater (avec les protections et autorisations adéquates).

____________________________
Serveur © IRCAM-CGP, 1996-2008 - document mis à jour le 09/06/1997 à 11h41m33s.