introduction à la création de documents pour le world …lsp · introduction à la création de...

Introduction à la Création de Documents pour le World Wide Web

HTML 4.0

Oscar FigueiredoDI/LSP

3ème édition - avril 1998

Ecole Polytechnique Fédérale de Lausanne - Laboratoire de Systèmes Périphériques


Avertissement :

Ce document présente le fonctionnement du World Wide Web et le langage HTML quien est le support essentiel. L’attention du lecteur est attirée sur le fait que ce domaine est en plei-ne évolution. Ce qui pourrait passer pour une norme de facto change parfois très vite d’où ladifficulté pour un document imprimé d’en présenter une vision tout à fait à jour. Le lecteur sou-cieux de précision est donc invité à se référer le plus souvent aux documents normatifs les plusrécents (souvent disponibles en ligne) et à se tenir informé de leur évolution. Cette 3ème éditions’appuie sur la dernière recommandation du W3C au sujet du langage, HTML 4.0, datant dumois de décembre 1997.

Une version électronique de cette ”Introduction à la Création de Documents pour le WorldWide Web” est disponible à l’URL http://diwww.epfl.ch/w3lsp/pub/coursweb/

Copyright ©1996,1998 Oscar Figueiredo LSP/EPFL.


Sommaire

1 World Wide Web : une porte sur Internet . . . . . . . . . . . . . . . . . . . . . . . . 7

2 Les principes de fonctionnement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.1 Le modèle client-serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.2 Documents hypermedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.3 URL : Uniform Resource Locator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

3 Le protocole HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113.1 Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113.2 Le serveur HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

4 Généralités sur le langage HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134.1 HTML et SGML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134.2 La séparation entre contenu et mise en forme . . . . . . . . . . . . . . . . . . . 144.3 Les différentes versions de HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 144.4 HTML en pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

4.4.1 Les entités . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154.4.2 Les étiquettes (tags) et les éléments . . . . . . . . . . . . . . . . . . . . . . . 164.4.3 Les commentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

5 Structure des documents HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175.1 Attributs génériques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175.2 Définition de version . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185.3 Structure générale du document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

5.3.1 Structure simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195.3.2 Structure multi-cadres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

5.4 En-tête de document (HEAD) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195.4.1 Titre du document (TITLE) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195.4.2 Meta-information, aide à l’indexage (META) . . . . . . . . . . . . . . . 195.4.3 Feuille de style incluse (STYLE) . . . . . . . . . . . . . . . . . . . . . . . . . 20

5.5 Corps simple de document (BODY) . . . . . . . . . . . . . . . . . . . . . . . . . . 205.6 Corps multi-cadres (FRAMESET, FRAME) . . . . . . . . . . . . . . . . . . . . 20

6 Eléments courants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236.1 Balisage de texte courant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236.2 Eléments de niveau bloc, paragraphes . . . . . . . . . . . . . . . . . . . . . . . . . 256.3 Séparateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266.4 Listes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276.5 Ancres et liens hypertexte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286.6 Incrustations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

6.6.1 Images (IMG) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306.6.2 Figures et cartes réactives (cliquables) . . . . . . . . . . . . . . . . . . . . . 30

6.7 Incrustation générique (OBJECT) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326.8 Applet (APPLET) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33



7 Formulaires de Saisie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

8 Tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398.1 Structure des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398.2 Groupements de colonnes et rangées . . . . . . . . . . . . . . . . . . . . . . . . . . 408.3 Tableaux complexes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

9 Feuilles de Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459.1 Association de feuilles de style à un document HTML . . . . . . . . . . . . 459.2 Les éléments DIV et SPAN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469.3 Cascading Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

9.3.1 Syntaxe générale du langage . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469.3.2 Propriétés usuelles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

10 Scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

11 L’Avenir du World Wide Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

A Jeu de Caractères et Entités HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55A-1 Entités de caractères spéciaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55A-2 Entités ISO Latin 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

B Exemples Concrets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57B-1 Elements Structurels et Formatage de Texte Courant . . . . . . . . . . . . . 57B-2 Liens, listes, images, positionnement par feuilles de style . . . . . . . . . 58B-3 Formulaire de Saisie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60B-4 Tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

C Références Bibliographiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64


Liste des Tableaux

1 Corps du document BODY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 Documents multi-cadres (frames) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 Eléments de niveau texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 Eléments typographiques (déconseillés) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245 Eléments de niveau bloc . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 Eléments de liste (exemples) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278 Eléments de liste simple (UL, OL, LI) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279 Eléments de liste de définition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

10 Hyperliens et ancres (A et LINK) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2911 Images (IMG) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3112 Images réactives côté client (MAP, AREA) . . . . . . . . . . . . . . . . . . . . . . . . . 3213 Incrustation d’objets génériques (OBJECT, PARAM) . . . . . . . . . . . . . . . . . 3314 Formulaires de saisie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3615 Attributs de l’Elément INPUT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3816 Tableaux (TABLE, CAPTION) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4017 Groupements de cellules (COL, COLGROUP, THEAD, TFOOT, TBODY)4218 Tableaux : Rangées et colonnes (TR, TD, TH) . . . . . . . . . . . . . . . . . . . . . . . 4319 Feuille de style interne (STYLE) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4620 CSS2 : Propriétés usuelles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4821 Scripts (SCRIPT). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Ecole Polytechnique Fédérale de Lausanne - Laboratoire de Systèmes Périphériques 7

1 World Wide Web : une porte sur InternetL’Internet et le World Wide Web sont deux concepts à tel point liés que la confusion règne

parfois chez les nouveaux utilisateurs. Si le World Wide Web est le système d’information quia popularisé l’Internet, il doit à ce dernier ses fondements mêmes et surtout son infrastructure.

L’Internet est le réseau des réseaux, un maillage planétaire d’ordinateurs interconnectés àtravers un protocole qui leur permet de tous parler la même langue, le protocole TCP/IP. Depuisses premiers balbutiements datant seulement des années 70 quand l’Advanced Research Pro-jects Agency, liée à la défense américaine, mettait en place ARPAnet, un réseau censé résisterà une attaque nucléaire, Internet a littéralement explosé et relie aujourd’hui plusieurs millionsde machines sur tous les continents. Dès cette époque des services et des normes se sont mis enplace destinés, du moins au début, à faciliter les échanges entre les communautés académiques.Parmi ces services certains sont encore très utilisés aujourd’hui : le courrier électronique, letransfert de fichiers (FTP), les services de conférence (News). Les services les plus récents sontles services d’information comme Gopher, Veronica et WAIS. Le World Wide Web s’inscritdans cette lignée et pour tout dire a complètement éclipsé ses prédécesseurs. Il a donné à l’In-ternet une forme de cohésion en permettant d’établir des liens entre les masses d’informationsautrefois dispersées. Grâce au Web, du point de vue de l’utilisateur, l’Internet apparaît enfincomme un tout.

Le concept du World Wide Web est né au CERN quand Tim Berners-Lee cherchait dessolutions pour faciliter la communication entre les chercheurs. Il introduisit pour la premièrefois le concept d’hypermedia dans l’échange d’informations au quotidien: plutôt que d’organi-ser l’information sous la forme classique de bases de données, son idée était de la laisser sousforme non structurée a priori en permettant simplement à chaque document de faire référenceaux autres. C’est là le concept clé, emprunté au révolutionnaire Hypercard d’Apple. Mais leWeb aurait pu en rester là, comme tous les autres outils d’Internet, un simple produit à interfaceprofondément anti-intuitive, réservé à des gourous de l’informatique si Marc Andreessen, àl’Université de l’Illinois à Urbana Champaign n’avait, en 1993, publié la première version deMosaic. Mosaic est le logiciel qui a apporté au World Wide Web, et par extension à Internet, sapremière interface conviviale et qui a ainsi permis de le démocratiser. Par ce simple déclic, lesuccès a été inespéré, inouï et la déferlante de nouveaux sites apparaissant chaque jour ne sem-ble pas devoir s’arrêter de sitôt [1][2].


2 Les principes de fonctionnement D’un point de vue technique, les fondements du World Wide Web sont étonnamment sim-

ples. Il s’agit de permettre l’accès, au moyen d’un système client-serveur, à des documents hy-permedia distribués!

2.1 Le modèle client-serveur

Le World Wide Web fonctionne suivant le modèle classique client-serveur. Deux acteurssont mis en jeu: d’un côté le client qui effectue des requêtes en direction du serveur, de l’autrele serveur qui exécute ces requêtes et renvoie le résultat au client. Client et serveur sont en pra-tique deux logiciels différents communiquant au moyen d’un protocole sur une même machine,à travers un réseau local ou bien à travers un réseau étendu (Figure 1).

Netscape Navigator et MS Internet Explorer sont ainsi les deux programmes clientsWorld Wide Web les plus répandus mais ce ne sont de loin pas les seuls, on note également lepetit nouveau Opera, Lynx et une foule d’autres. Tous ne sont pas nécessairement graphiques,

Figure 1: Le modèle client-serveur du World Wide Web

Hôte Distant

ServeurServeur

ftpd

Hôte Local

Client

HTTP FTPHTTP

Requê

te

Répon

se

Rép

onse

Req

uête

Répo

nse

Req

uête

Client


il en existe purement textuels ou adaptés à certaines formes de handicap ou de consultation (parexemple des navigateurs à synthèse vocale permettent de naviguer par téléphone). Côté ser-veurs, on note Apache, un logiciel libre (free software) qui est le serveur le plus répandu, et desproduits commerciaux comme les différents serveurs de Netscape ou Microsoft.

Le rôle d’un navigateur client se borne àn traduire les ordres que lui donne l’utilisateur à travers l’interface graphique en

messages conformes à un protocole d’échange avec un serveur n contacter le serveur adéquat et lui passer la requêten attendre la réponse du serveur n mettre en forme cette réponse et la présenter de façon convenable à l’utilisateur.

Le serveur renvoie en effet un fichier “brut” au client et c’est ce dernier qui est responsa-ble de sa mise en forme. Ceci se remarque facilement en utilisant deux programmes clients dif-férents pour visualiser le même document Web

2.2 Documents hypermedia

On appelle document hypertexte un document s’apparentant à un simple texte mais quel’on a pourvu d’un mécanisme permettant d’établir des liens entre différentes parties. L’exem-ple actuellement le plus connu de ce type de documents est sans doute celui des encyclopédiessur CD-ROM où l’utilisateur peut à tout moment sauter à la définition d’un mot qu’il aura trou-vé à un autre endroit dans la définition d’un autre mot. Ainsi, à la différence d’un livre où lesdonnées sont organisées selon une structure linéaire inhérente et suggèrent donc un certainmode de consultation, un document hypertexte n’a pas de structure apparente unique mais plutôtune structure “à la carte” définie par celui qui le consulte selon l’enchaînement de liens qu’ildécide de suivre. La notion d’hypermedia est semblable à celle d’hypertexte, cependant on pré-fère utiliser le terme hypermedia pour designer des documents contenant non seulement du textemais aussi d’autres types de données (son, images fixes ou animées, etc...).

2.3 URL : Uniform Resource Locator

Dans un contexte plus large que celui d’une simple encyclopédie sur CD-ROM se pose leproblème de l’identification des documents, indispensable pour établir une référence vers eux.Cette difficulté est d’autant plus critique qu’Internet est constitué d’une myriade de serveurs or-ganisés suivant des modèles totalement différents, sur lesquels l’accès aux documents se fait se-lon des protocoles variés. Pour pallier à ceci, une nomenclature standardisée a été définie pouridentifier individuellement les différents documents accessibles à travers l’Internet. Cette no-menclature est connue sous le nom d’URL (Uniform Resource Locator qui se traduit parfois parLocalisateur Uniforme de Ressource ou par le néologisme Locateur Uniforme de Ressource).Un URL1 est de la forme suivante :

protocole : Le nom du protocole. Le plus souvent http ou ftp

serveur : Le nom d’une machine reliée à Internet (ex: www.epfl.ch) ou son numéro IP (ex: 128.178.50.32).

protocole://serveur[:port]/[chemin/]fichier[#position]


10 Ecole Polytechnique Fédérale de Lausanne - Laboratoire de Systèmes Périphériques

Les documents hypermedia présents sur le World Wide Web sont écrits dans le langageHTML (HyperText Markup Language) il s’agit de simple texte auquel on a ajouté des construc-tions spéciales qui permettent de définir en particulier les liens vers les autres documents aumoyen des URLs. HTML permet d’abréger les URLs pour alléger l’écriture. Ainsi à l’intérieurd’un document dont l’URL absolu serait http://www.some.server/pub/doc.html, onpeut trouver des URLs de la forme :

• /private/secret.htmlUn URL commençant par un / fait référence à la base du document courant. Cet URL est donc équivalent à l’URL absolu : http://www.some.server/private/secret.html

• misc/anotherdoc.htmlUn URL non absolu ne commençant pas par le caractère / est dit relatif et fait référence au chemin complet du document courant. Cet URL est donc équivalent à http://www.some.server/pub/misc/anotherdoc.html

HTML autorise également des URLs étendus permettant le passage de paramètres . Ainsi:http://www.some.server/cgi-bin/imagemap.cgi?x=15&y=20 invoque le program-me imagemap.cgi se trouvant dans le répertoire /cgi-bin sur le serveurwww.some.server en lui passant comme paramètres x=15 et y=20.

1. Très précisément on décrit ici un URI (Uniform Resource Identifier) dont l’URL est une sous-partie. Par abus de langage on assimile les deux [3].

[port] : Numéro du port sur lequel le serveur est en attente. Suivant le protocole utilisé il existe toujours une valeur par défaut et ce paramètre est alors omis.

[chemin] : Le chemin (suite de répertoires séparés par des /) vers le docu-ment recherché.

fichier : Le nom du document recherché.

[position] : Un nom désignant une position (ancre) à l’intérieur du docu-ment. Facultatif.


3 Le protocole HTTPComme indiqué précédemment, le protocole est le langage commun parlé par le client et

le serveur pour se comprendre et mener à bien les requêtes de l’utilisateur. Le protocole de loinle plus utilisé sur le World Wide Web est le protocole HTTP (HyperText Transfer Protocol).C’est un protocole développé spécialement pour le transfert de documents hypermedia écrits enHTML. Dans cette optique, HTTP est un protocole sans état (à la différence de protocoles com-me FTP, il ne maintient pas d’information interne au cours d’une connexion) afin de traiter avec un maximum d’efficacité des requêtes extrêmement simples mais nombreuses. Les documents transmis sont typés pour permettre de construire des systèmes hypermedia.

3.1 Description

Le protocole HTTP est très simple. Une transaction HTTP se décompose en effet en qua-tre phases :

n Connexionn Requêten Réponsen Fermeture

La spécification d’HTTP/1.0 est maintenant stabilisée dans le RFC 1945 [3]. La prochaineversion HTTP/1.1 est pratiquement finalisée et une nouvelle génération est déjà en préparationsous le nom HTTP-NG.

3.2 Le serveur HTTP

L’activité du programme serveur se limite à :n attendre les requêtes d’un client en restant perpétuellement à l’écouten une fois reçue la requête, le serveur l’interprète et l’exécute, le plus souvent il ren-

voie en retour le fichier demandé par le client.

Le rôle principal du serveur est donc de renvoyer au client les fichiers qui lui sont deman-dés. Ces fichiers contiennent la plupart du temps du langage HTML et des images en format GIFou JPEG mais ils peuvent contenir absolument n’importe quel autre type de données (texte brut,Postscript, fichier son, programme exécutable, etc...)



Parfois le client demande au serveur un peu plus qu’un simple fichier, il peut lui demanderd’exécuter un programme et de lui renvoyer le résultat de ce programme, c’est ce qui se passepar exemple lorsque, après avoir rempli les champs d’un formulaire de recherche, l’utilisateurappuie sur le bouton du formulaire. Les données du formulaire sont passées par leserveur à un programme externe qui les utilise pour produire un résultat qu’il renvoie au serveurqui le fait passer au client. Le mécanisme par lequel le serveur et un programme externe échan-gent des données en vue de construire un document à renvoyer au client est appelé CommonGateway Interface (CGI) et sort du cadre de ce document [1][2][4](Figure 2). Comme le lance-

ment d’une application externe au serveur est assez lourd, certains serveurs permettent égale-ment d’intégrer une application (sous la forme d’une librairie) dans l’espace du serveur aumoyen d’appels normalisés (NSAPI de Netscape ou ISAPI de Microsoft), mais là encore celadépasse le simple cadre de ce document.

Figure 2: Requête d’exécution au serveur

Envoyer

Hôte DistantServeur

Hôte Local

Client

HTTP

Répon

se

CGI ScriptExécutable

Formulaire Réponse

Requê

te

Donné

es


4 Généralités sur le langage HTML

4.1 HTML et SGML

La grande majorité des documents accessibles sur le World Wide Web et qui en font saspécificité par rapport aux autres facettes d’Internet est écrite au moyen du langage HTML(HyperText Markup Language). HTML est l’application la plus connue du langage SGML(Standard Generalized Markup Language) [5].

SGML est un langage de description de structure de document. C’est là l’aspect le plusimportant à retenir qui le différencie radicalement des langages de description de page tels quePostscript. Ainsi SGML cherche à décrire la logique et la structure du document alors que Posts-cript permet d’en décrire la forme, l’aspect visuel final. Dans un document SGML on ne précisepas de taille ou de type de polices ni de mise en page (taille des paragraphes, positions relatives,etc...), au lieu de cela on s’attache à spécifier comment le document se subdivise et quelles ensont les parties clés relatives à un format défini.

Un document SGML respecte toujours un type de document défini dans une structure for-melle appelée DTD (Document Type Definition). Une DTD peut ainsi décrire, par exemple, lastructure formelle d’un rapport dont les éléments seraient un auteur noté par <author>, unedate notée par <date>, un titre noté <title> suivi d’un contenu divisé en paragraphes <p>précédés chacune par un titre <h>. Le début d’un tel document se présenterait alors sous la for-me :

<!DOCTYPE report PUBLIC “-//EPFL//DTD Report//EN”><report><author>John Smith<date>Feb 1st, 1996<title>Report on WWW<h>Introduction

Le document final imprimable est obtenu après interprétation par un visualiseur qui est àmême de formater le texte SGML suivant certaines règles prédéfinies ou réglées par l’utilisateurqui va lire le document : le visualiseur peut ainsi présenter l’élément <author> à 4 cm de lamarge supérieure et souligné. Ces règles dépendent du visualiseur et dans certains cas peuventêtre modifiées, ce qui explique que des personnes utilisant des visualiseurs différents n’obtien-



dront généralement pas le même aspect de document. Ainsi une même page du World WideWeb visualisée avec Netscape Navigator, MS Internet Explorer ou Opera n’est pas du tout miseen page de la même façon. Toutefois, l’essentiel, à savoir le texte et sa structure, est préservé.

L’avantage essentiel de SGML est sa portabilité et la simplicité des documents, ce sontessentiellement ces critères qui ont fait que le CERN, lors de la création de son système de dis-tribution d’information qui allait être à l’origine du World Wide Web, a décidé d’utiliser cettenorme pour en dériver le langage HTML. La notion de portabilité dans ce cas va beaucoup plusloin que la simple compatibilité avec différents logiciels ou plates-formes informatiques : lesdocuments SGML (et donc HTML) doivent pouvoir être consultés avec la même facilité sursupport informatique ou imprimé, sur un écran couleur 21 pouces ou sur l’écran à cristaux li-quides d’un organiseur, avec et sans images mais aussi en braille ou après conversion par dessystèmes de synthèse vocale pour consultation téléphonique ou par des personnes handicapées.C’est là un aspect trop souvent négligé par les rédacteurs de pages HTML qui ne pensent qu’àl’affichage sur leur propre écran.

4.2 La séparation entre contenu et mise en forme

Comme il a déjà été mentionné précédemment, HTML vise à décrire la structure d’un do-cument plus que sa présentation, c’est là, en effet, la seule façon d’assurer une indépendancemaximale par rapport au dispositif de visualisation1. Toutefois cette exigence a frustré beau-coup de rédacteurs, habitués à avoir un fort contrôle sur l’aspect final de leurs documents. Aucours des versions, HTML s’est donc vu contraint d’intégrer de plus en plus d’éléments et d’at-tributs permettant de spécifier des caractéristiques de mise en page. Fort heureusement,HTML 4.0 apporte une solution élégante au problème posé par cette nécessité d’une forte sépa-ration entre contenu et mise en page. La version stricte d’HTML 4.0 rend ainsi obsolètes bonnombre d’éléments de mise en forme qui existaient dans les versions antérieures et les remplacepar un nouvel outil appelé feuilles de style (style sheets).

4.3 Les différentes versions de HTML

Depuis la version 2.0 du langage HTML normalisée en 1994 dans le RFC 1866 [6], lesversions se sont succédées : certaines ont disparu faute de normalisation ou d’implémentationdans les navigateurs (HTML+, HTML 3.0).

Le développement et la normalisation du langage sont à présent en charge du W3 Consor-tium, un regroupement de partenaires industriels et académiques, dirigé par le Laboratory forComputer Science du MIT (USA) et l’INRIA (France).

Même si HTML 3.2 demeure aujourd’hui la recommandation du W3C la plus largementacceptée par les navigateurs, la recommandation en vigueur est la version 4.0 publiée en décem-bre 1997. Les deux plus importants fournisseurs de logiciels destinés au web, Netscape et Mi-crosoft, s’étant engagés en sa faveur, son support ne cesse de croître dans les versions les plusrécentes des navigateurs. Les versions successives de HTML assurent une compatibilité totaleavec les versions antérieures. Toutefois HTML 4.0 se décline en divers échelons : un premier

1. Visualisation est ici à prendre dans son sens le plus large puisqu’un document HTML doit pouvoir être consulté à travers des dispositifs allant jusqu’au synthétiseur de parole.


échelon garantit cette compatibilité alors que l’échelon le plus strict interdit un certain nombrede caractéristiques des version antérieures jugées comme étant de mauvaises pratiques. Cettedistinction est utile lors de la vérification d’un document par un outil de validation.

Lors de l’écriture d’un document en HTML il est important de bien savoir ce que l’onécrit, c’est-à-dire à quelle norme font référence les constructions utilisées. Seul l’emploid’HTML 3.2 (voire 2.0) strict garantit à l’heure actuelle une acceptabilité maximale par tous lesvisualiseurs. L’emploi de HTML 4.0 doit être aussi encouragé, d’autant que son utilisation necompromet pas la visualisation du document sur des visualiseurs à la norme 3.2. Par contre ilfaut absolument éviter les constructions spécifiques à tel ou tel visualiseur. Les normes du W3Cdoivent être la seule référence de l’auteur de documents HTML. Toute utilisation de construc-tions non normalisées ne pourrait que limiter l’audience potentielle du document réduisant ainsifortement l’intérêt de l’utilisation de HTML qui réside précisément dans son universalité.

4.4 HTML en pratique

Très concrètement, un document HTML, lors de son écriture, est un simple fichier textedont certaines parties portent une signification particulière, ce qu’on appelle le balisage(markup). Le balisage définit ainsi une suite structurée imbriquée d´éléments qui constitue ledocument. Un élément est une suite d’entités HTML délimitée par des étiquettes (tags) et repré-sentant une unité structurelle du document : titre, liste, paragraphe, texte mis en évidence, cita-tion, ... (Figure 3). HTML définit quels sont les éléments existants, leurs attributs et les règlesd’imbrication de ces éléments.

4.4.1 Les entités

On appelle entité SGML une unité textuelle1. Sa plus simple expression est un caractèrenon spécial, c’est-à-dire n’importe lequel sauf <, >, & et quelques autres qui dépendent de laDTD utilisée. Mais une entité peut être aussi constituée par une séquence de caractères entouréepar les délimiteurs & et ; qui est remplacée par un autre texte permettant ainsi d’abréger un do-cument en remplaçant certaines séquences longues et fréquentes par une abréviation plus cour-te. Dans HTML les entités complexes servent plutôt à coder les caractères spéciaux qui ont unesignification particulière ou bien des caractères internationaux lorsque l’on veut assurer unestricte conformité avec le jeu de caractères ASCII. Ainsi, comme le signe < a une significationHTML spéciale (délimiteur d’étiquette), quand on veut l’insérer en tant que tel dans un texte onle remplace par son entité équivalente : < De même si l’on souhaite assurer que le documentne soit pas endommagé lors du transfert par des canaux limités à l’ASCII (comme parfois encorecertaines passerelles de courrier électronique), on peut remplacer la lettre ‘é’ par l’entité équi-valente é La liste de ces entités est donnée en Annexe A.

La notation des entités peut également servir à inclure dans le texte des caractères spé-ciaux du jeu de caractères du document au moyen de leur numéro. Ex: < représente éga-lement le caractère ‘<‘ dans le jeu de caractères standard ISO-8859-1.

HTML 4.0 définit très précisément que le jeu de caractères employé par HTML estl’ Universal Character Set [11] (compatible Unicode), chaque document pouvant se limiter àl’un de ses sous-ensembles. ISO-8859-1, le jeu de caractères habituellement utilisé en EuropeOccidentale et qui comprend les caractères accentués des langues latines est un de ces sous-en-

1. Dans le jargon SGML, entité prend parfois un sens beaucoup plus large, comparable dans une certaine mesure au terme objet.

sembles. De ce fait, l’utilisation des entités équivalentes pour les caractères accentués françaisest facultative, pour peu que l’on s’assure que la plate-forme sur laquelle on travaille utilise bienle jeu de caractères ISO-8859-1. C’est le cas pour le système d’exploitation Unix mais cela dé-pend des logiciels utilisés sur les plates-formes MS Windows et MacOS.

4.4.2 Les étiquettes (tags) et les éléments

On appelle étiquettes (tags) les délimiteurs des éléments HTML. Un élément est, la plu-part du temps, délimité par une étiquette initiale (start-tag) de la forme <tag> et une étiquettefinale (end-tag) de la forme </tag>. Certains éléments comme BR (saut de ligne) n’ont pas

d’étiquette finale. D’autres comme P (paragraphe), LI (liste) ont des étiquettes finales option-nelles. Les éléments s’imbriquent les uns à l’intérieur des autres suivant des règles définies parle langage.

Les étiquettes peuvent contenir des attributs valués. L’exemple le plus classique est sansdoute :

<A href=”http://www.epfl.ch/”>Serveur de l’EPFL</a>

Cet élément porte le nom de lien hypertexte. On y reconnaît l’étiquette initiale <A> danslaquelle on trouve l’attribut href qui porte la valeur http://www.epfl.ch/. Pour chaqueélément seuls certains attributs sont autorisés. La valeur donnée aux éléments doit figurer entreguillemets ou apostrophes1 et ne doit pas contenir de guillemets, apostrophes ou signes > quidoivent, le cas échéant, être remplacés par les entités HTML équivalentes (voir § 4.4.1).

On ne différencie pas majuscules et minuscules dans une étiquette, les deux peuvent êtreutilisées indifféremment ou même mélangées.

4.4.3 Les commentaires

Un document HTML peut contenir des commentaires qui seront ignorés par l’analyseurlors de la visualisation. Les commentaires sont signalés par les délimiteurs SGML spéciaux: :



Un commentaire peut s’étaler sur plusieurs lignes (les retours à la ligne sont autorisés àl’intérieur d’un commentaire).

Figure 3: Un élément HTML

1. Ceci n’est en fait pas strictement obligatoire, mais cela peut éviter des problèmes d’interprétation sur certains visualiseurs

<H1>Ceci est un titre de niveau 1</H1>

Etiquette de début Etiquette de finTexte(Contenu de l’élément)


5 Structure des documents HTMLLe but de ce chapitre est de donner un aperçu global des moyens mis à disposition des

auteurs par le langage HTML et de sa philosophie sous-jacente. Pour une référence complètedes éléments et attributs, le lecteur est renvoyé aux documents de normalisation [8] ainsi que lesnombreuses ressources disponibles en ligne, comme le Compendium of HTML Elements [10].En particulier les éléments, attributs et imbrications présentés dans les divers tableaux visent àdonner une idée de l’usage le plus courant et ne cherchent en aucun cas à être parfaitement ex-haustifs. Les exceptions sont nombreuses et seule l’utilisation d’un validateur [12] permet des’assurer de la bonne conformité d’un document produit.

Lecture des tableaux. Les différents éléments les plus courants et leurs attributs définis parHTML 4.0 sont présentés synthétiquement dans les tableaux suivants. HTML 3.2 et les versionsantérieures autorisent un certain nombre d’attributs de présentation permettant de contrôler l’as-pect visuel du document. Ces attributs sont déconseillés par HTML 4.0 (ce qui veut dire qu’ilspourront ne plus être supportés dans une prochaine version) et doivent donc être abandonnés auprofit des feuilles de style dans les nouveaux documents. Leur usage ne peut se justifier que pourdes raisons de compatibilité avec des navigateurs plus anciens, ils sont signalés par(DECONS.). D’autres attributs doivent obligatoirement être présents avec certains éléments, ilssont signalés par (OBLIG.).

5.1 Attributs génériques

La plupart des éléments HTML décrits par la suite acceptent, depuis la version 4.0 de lanorme, les attributs title, lang, style, class, id ainsi qu’une série d’attributs de type évé-nementiel. Une référence comme le Compendium of HTML Elements [10] permet de vérifier sices attributs sont autorisés pour un élément particulier.

• titleDonne un titre à l’élément. Ce titre peut être utilisé par un visualisateur graphique comme légende contextuelle.

• langPermet de spécifier la langue dans laquelle est exprimé l’élément. Il s’agit d’un code international : fr pour français, en pour anglais, …



• stylePermet de spécifier un attribut de style en ligne pour l’élément concerné. Si le style en question s’applique à d’autres éléments, il vaut mieux utiliser une définition dans une feuille de style. La syntaxe de la valeur de l’attribut est définie par le langage de style courant, le plus souvent CSS (voir Ch. 9).

• classIndique le ou les groupes auquel appartient l’élément. Ce type de regroupement permet en particulier d’attribuer des propriétés stylistiques communes à un sous-ensemble d’éléments de même type.

• idAttribue un nom (qui doit être unique sur toute l’étendue du document) à l’élément. Cette dénomination permet de lui attribuer un style particulier depuis la feuille de style ou bien de se servir de l’élément comme ancre hypertexte (voir § 6.5).

• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Ces attributs permettent d’associer des routines de script (voir Ch. 10) à la survenance d’un certaine nombre d’évènements.

5.2 Définition de version

Il est important (quoique non obligatoire) de définir sur la première ligne du document laversion du langage utilisée. Ceci se fait au moyen d’une formule SGML normalisée :

• HTML 3.2 :<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2//EN”>

• HTML 4.0 strict :<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”>

• HTML 4.0 transitionnel, c’est-à-dire compatible avec HTML 3.2 :<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

• HTML 4.0 avec la possibilité supplémentaire de créer des documents multi-cadres :<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Frameset//EN”>

Cette définition de version sert essentiellement aux outils de validation qui permettent devérifier la syntaxe d’un document.

5.3 Structure générale du document

Un document HTML 4.0 comprend deux parties. Le document HTML proprement dit quine décrit que la structure et une feuille de style associée qui décrit la mise en page du document.La présence d’une feuille de style est facultative. Si elle existe, cette feuille peut se trouver:

n dans un fichier séparé (sur la même machine ou une autre voire sur un site diffé-rent)

n intégrée dans le document HTML à l’intérieur d’un élément STYLEn disséminée à travers les différents éléments HTML sous la forme d’attributs

style

Les feuilles de style sont décrites au Ch. 9. La suite de ce chapitre porte sur le documentHTML proprement dit.


Il existe deux types de structure générale pour un tel document. La structure simple et lastructure multi-cadres (frames). Dans les deux cas on trouve tout d’abord une définition de laversion du langage (voir § 5.2) utilisée puis l’ensemble du document à l’intérieur de l’élémentHTML.

5.3.1 Structure simple

C’est la structure la plus courante, elle divise le document en deux parties : en en-tête dé-limité par l’élément HEAD et le corps du document limité par l’élément BODY.

<!DOCTYPE HTML PUBLIC “-//IETF//DTD HTML 2.0//EN”><HTML>

<HEAD><TITLE>Titre du Document</TITLE>

</HEAD><BODY>

... Le corps du document avec le balisage approprié ...</BODY>

</HTML>

5.3.2 Structure multi-cadres

Il s’agit d’une structure de document permettant de présenter plusieurs documents simplesà la fois en divisant l’espace d’affichage en sous-fenêtres (voir § 5.6). Cette extension du lan-gage proposée par Netscape a été intégrée dans une version étendue de la norme HTML 4.0. Eneffet, la structure multi-cadres est fortement liée à la possibilité d’avoir un affichage de type gra-phique, en ce sens cette fonctionnalité est contraire à l’esprit d’HTML d’où sa non-inclusiondans la norme HTML 4.0 stricte.

5.4 En-tête de document (HEAD)

L’élément HEAD contient des informations administratives à propos du document mais quine font pas strictement partie de ce dernier. Elles ne sont donc généralement pas représentéespar le visualiseurs dans le corps du document.

A l’intérieur de l’élément HEAD on trouve divers autres éléments décrits ici.

5.4.1 Titre du document (TITLE)

Il s’agit en fait du seul élément qui soit obligatoire dans un document HTML. Il donne untitre au document ou plus exactement une dénomination. En effet le contenu de cet élément n’estpas représenté dans le corps du document. Les visualiseurs graphiques l’affichent usuellementsur la barre de fenêtre et l’utilisent comme titre si vous insérez le document dans votre liste demarque-pages (bookmarks).

5.4.2 Meta-information, aide à l’indexage (META)

L’élément META est un élément générique permettant de spécifier des meta-informationsà propos du document. Cet élément comprend essentiellement deux attributs qui sont :

• nameNom de la meta-information



• contentValeur de la meta-information

Par exemple on peut ainsi spécifier l’auteur du document :

<META name=”Author” content=”Oscar Figueiredo”>

Une autre utilisation très importante de cet élément consiste à donner une description dudocument ainsi qu’une liste de mots clés. Ce type d’information est en effet mis à profit par lesoutils d’indexage automatique comme Altavista pour assurer une meilleure indexation :

<HEAD><META name=”description” content=”Un cours sur le langage HTML”><META name=”keywords” content=”cours HTML, présentation WWW”>

</HEAD>

5.4.3 Feuille de style incluse (STYLE)

Depuis la version 4.0, HTML permet d’inclure une ou plusieurs feuilles de style(voir § 4.2 et Ch. 9) à l’intérieur du document HTML au moyen de l’élément STYLE.

5.5 Corps simple de document (BODY)

Le corps du document contient la suite d’éléments constituant le document proprementdit : en-têtes de chapitres, paragraphes, listes, tableaux, … Ces différents éléments sont regrou-pés logiquement et décrits dans les sections suivantes.

Les couleurs sont spécifiées soit par un nom prédéfini (black, yellow, blue, …) soitsous la forme #rrvvbb, un nombre hexadécimal à 6 chiffres. Les deux premiers chiffres sontpour la composante rouge, les deux suivants pour le vert et les deux derniers pour le bleu.

5.6 Corps multi-cadres (FRAMESET, FRAME)

L’élément FRAMESET décrit le découpage géométrique de la zone de visualisation. A l’in-térieur de cet élément, on trouve des éléments FRAME qui permettent d’indiquer les URLs desdocuments HTML à afficher dans chacun des cadres définis. L’élément FRAMESET peut éven-tuellement être suivi par un élément NOFRAMES contenant une version du document destiné aux

Tableau 1 : Corps du document BODY

<BODY> Corps du document

Attributs génériques Voir § 5.1

BACKGROUND (DECONS.) Un URL désignant une image servant de toile de fond au document.

BGCOLOR (DECONS.) Une couleur à utiliser comme fond de document.

TEXT (DECONS.) Une couleur à utiliser pour le texte du document.

LINK (DECONS.) Une couleur à utiliser pour mettre en évidence les hyperliens.

VLINK (DECONS.) Une couleur à utiliser pour les liens déjà visités.

ALINK (DECONS.) Une couleur à utiliser pour les liens activés.


visualiseurs ne supportant pas les multi-cadres ou lorsque l’affichage multi-cadres a été désac-tivé. Le contenu de cet élément n’est pas affiché par un visualiseur supportant les multi-cadres.La structure générale d’un documents multi-cadres est donc de la forme suivante :

L’élément FRAMESET ne peut comporter que l’un ou l’autres des attributs rows ou colspermettant ainsi de diviser la fenêtre en lignes ou colonnes uniquement. On peut alors poursui-vre la subdivision des lignes ou colonnes ainsi créées en imbriquant d’autres élémentsFRAMESET à l’intérieur du premier. Une division de la fenêtre en deux colonnes, la deuxièmeétant elle-même divisée en 3 lignes, s’écrit donc ainsi:

... <FRAMESET COLS="50%,50%">

<FRAME SRC="colonneGauche.html"> <FRAMESET ROWS="33%,33%,33%">

<FRAME SRC="colonneDroiteLigne1.html"> <FRAME SRC="colonneDroiteLigne2.html"> <FRAME SRC="colonneDroiteLigne3.html">

</FRAMESET> </FRAMESET> ...

La division de fenêtre ainsi créée a l’aspect suivant :

HTML 4.0 incorpore également, à travers l’élément IFRAME, la notion de cadre en-ligneproposée par Microsoft et qui permet d’afficher un autre document en incrustation dans le coursd’une page. Ce mécanisme est tout à fait semblable à l’incrustation d’objet que réalise l’élémentOBJECT. Les attributs de l’élément IFRAME sont les mêmes que ceux de l’élément FRAME.

<!DOCTYPE HTML PUBLIC “-//IETF//DTD HTML 4.0 Frameset//EN”><HTML>

<HEAD><TITLE>Titre du Document</TITLE>

</HEAD><FRAMESET rows=”50%, 50%”>

<FRAME SRC=”documentGauche.html”><FRAME SRC=”documentDroite.html”>

</FRAMESET><NOFRAMES>

<BODY>...

</BODY></NOFRAMES>

</HTML>

Définition de la division encadres et des documents à af-ficher dans chacun des cadres

Document classique pour lesvisualiseurs ne supportantpas la division en cadres.



Tableau 2 : Documents multi-cadres (frames)

<FRAMESET> Une spécification de division de la fenêtre de visualisation en cadres. Ne peut contenir que des éléments FRAME et FRAMESET.

Attributs génériques Voir § 5.1

ROWS Une liste de hauteurs de cadres. La fenêtre est divisée en bandes horizon-tales de hauteurs spécifiées dans la liste. Les valeurs peuvent être expri-mées soit de façon absolue en pixels, soit en pourcentage soit en flottant par rapport à l'espace restant. Les valeurs flottantes utilisent le signe *. Si un seul signe de ce type apparaît dans la liste tout l'espace restant est affecté à la bande correspondante. S'il y en a plusieurs, l'espace restant est partagé également entre les bandes correspondantes sauf si un facteur est appliqué devant *. Ainsi la spécification suivante ROWS="25%,2*,*" partage la fenêtre en 3 bandes horizontales celle du haut occupe 25% de la hauteur totale, celle du milieu les 2/3 de l'espace ainsi laissé libre c'est-à-dire 50% de la hauteur totale de la fenêtre et la dernière bande occupe 1/3 de l'espace laissé par la première c'est-à-dire 25% de la hauteur totale de la fenêtre.

COLS Une liste de largeurs de cadres. La fenêtre est divisée en bandes vertica-les de hauteurs spécifiées dans la liste. Les valeurs peuvent être expri-mées de la même façon que pour l'attribut ROWS.

BORDER (DECONS.) Largeur de la bordure des cadres définis. Une valeur de 0 équivaut à FRAMEBORDER="no"

BORDERCOLOR (DECONS.) Couleur de la bordure des cadres définis.

<FRAME> Contenu d’un cadre d’affichage dans un document multi-cadres.

SRC Un URL désignant le document à afficher dans le cadre.

NAME Un nom symbolique désignant le cadre. Ceci permet de spécifier dans quel cadre afficher un document donné au moyen de l'attribut TARGET de l'ancre hypertexte (voir § 6.5)

MARGINWIDTH Largeur en pixels de la marge dans le cadre.

MARGINHEIGHT Hauteur en pixels de la marge dans le cadre.

SCROLLING Définit la possibilité pour le cadre d'être muni d'une barre de défilement. Les valeurs possibles sont yes (défilement autorisé), no (défilement interdit) et auto (par défaut le choix est laissé au visualiseur).

NORESIZE Si cet attribut est présent (pas de valeur nécessaire) alors le cadre n'est pas redimensionnable par le lecteur. Par défaut tous les cadres sont redi-mensionnables.

FRAMEBORDER Trace une bordure autour des cadres définis ou pas. Peut prendre les valeurs yes (par défaut) ou no.

BORDERCOLOR (DECONS.) Couleur de la bordure pour ce cadre. La couleur de bordure devant être la même pour tous les cadres partageant le même bord il faut éviter les con-flits.


6 Eléments courantsHTML distingue deux types d’éléments : les éléments de niveau texte et les éléments de

niveau bloc. Les premiers qualifient du texte courant à l’intérieur d’un paragraphe, les secondsimpliquent généralement un saut de ligne avant et après l’élément. Une étiquette ouvrant un élé-ment de niveau bloc ferme implicitement tout paragraphe précédemment ouvert.

6.1 Balisage de texte courant

Ces éléments de bas niveau qualifient de courtes séquences de mots, au plus une phrasegénéralement, afin de préciser leur fonction sémantique dans le document. Voici quelquesexemples d’utilisation de ces éléments :

...<p><cite>Alice au Pays des Merveilles</cite> par Lewis Caroll<p>La boucle <code>for (i=0; i<12; i++)</code> est équivalente à...<p>Tapez <kbd>cd</kbd> à la ligne de commande pour revenir...<p><strong>Important :</strong>Bien apparier les tags de début et...<p>Dans ce cas il ne faut <em>surtout pas</em> céder à la panique !...

Tableau 3 : Eléments de niveau texte

<ACRONYM> Une abréviation (WWW, FTP, URL …)

<CITE> Le titre d’un document cité en référence

<CODE> Un court morceau de code (informatique, mathématique,...) Pour des extraits plus longs (plusieurs lignes), on préférera utiliser PRE.

<EM> Un extrait devant être mis en évidence (généralement rendu en italique)

<KBD> Un texte tel qu'un utilisateur devrait le taper au clavier.

<SAMP> Un exemple de sortie générée par un programme un script, etc….

<STRONG> Mise en évidence forte (généralement rendu en gras).



Outre ces éléments, les normes antérieures à HTML 4.0 prévoyaient un certain nombred’éléments permettant de préciser la typographie à employer. Ces éléments sont désormais dé-conseillés et ont été remplacés par les feuilles de style, toutefois on les retrouve parfois pour desraisons de compatibilité avec des visualiseurs plus anciens.

Certains éditeurs HTML font parfois peu de cas de la différence entre éléments logiqueset éléments physiques, cette distinction est toutefois importante : utiliser I ou EM n’est pas in-différent même si le texte ainsi balisé est présenté de la même façon par la plupart des visuali-seurs graphiques. Il faut utiliser les feuilles de style (ou à défaut du balisage physique) quandc’est un type de spécifique d’effet textuel qui est recherché et plutôt du balisage logique pourmettre l’accent sur une valeur sémantique. Ainsi l’utilisation d’une mise en italique forcée parune feuille de style ou l’élément physique I là où on recherchait le renforcement d’un termepeut conduire à une absence totale de mise en évidence si le document est visualisé sur un sys-tème ne permettant pas le rendu en italique (par exemple un visualiseur texte simple ou par syn-thèse vocale). L’utilisation du balisage logique adéquat EM permet au contraire de mettre quandmême en évidence le terme par un autre moyen. Le plus souvent c’est un balisage logique quiest nécessaire et qu’il faut donc préférer. Attention en particulier lors de l’utilisation d’éditeursWYSIWYG HTML et surtout de convertisseurs à partir de traitements de texte : ces éditeurscachent le balisage employé et ont une fâcheuse tendance à utiliser du balisage physique inap-proprié.

<VAR> Une variable muette.

<DFN> Une définition.

<SUB> Texte à rendre en indice.

<SUP> Texte à rendre en exposant.

Tableau 4 : Eléments typographiques (déconseillés)

Elément Description

<TT> Texte à rendre en police télétype (à largeur fixe).

<I> Texte à rendre en italique.

<B> Texte à rendre en gras

<U> Texte à rendre souligné

<STRIKE> Texte à rendre barré.

<BIG> Texte à rendre dans une taille plus grande que la taille courante

<SMALL> Texte à rendre dans une taille plus petite que la taille courante

<FONT> Change les attributs de la police d’affichage

SIZE Taille relative de la police (1 à 6). La police par défaut est de taille 3. La spécification peut être absolue (1 à 6) ou relative (+x ou -x) à la taille par défaut ou déclarée dans l’élément BASEFONT.

COLOR Couleur de la police.

FACE Nom de la police à utiliser.

Tableau 3 : Eléments de niveau texte


6.2 Eléments de niveau bloc, paragraphes

Ces éléments permettent d’organiser la structure du document en blocs. Ce sont des élé-ments de haut niveau, ils s’organisent en séquence et ne peuvent s’imbriquer mais peuvent con-tenir des éléments de texte (Tableau 3).

En toute généralité un document est composé d’une suite hiérarchique de parties elles-mê-mes divisées en sous-parties qui en dernier lieu contiennent des paragraphes ou d’autres typesde blocs (listes, formulaires, tableaux, etc…). Les éléments H2 à H6 permettent de donner untitre à chacun des niveaux d’imbrication des sous-parties. L’élément H1 sert à titrer le documentdans son ensemble et ne doit apparaître qu’une fois au début de chaque document. C’est uneerreur de sauter un niveau de titre, de titrer par exemple le document avec H2 sous prétexte que“le titre est trop gros avec H1”. En effet les Hn indiquent la structure logique du document et pasune taille, les feuilles de style permettent de spécifier ces tailles.

Voici un exemple de structure de corps de document correcte:

... <BODY>

<H1>HTML en 10 leçons</H1>

<H2>1 Leçon 1</H2><P>Dans cette première leçon nous allons voir... <H3>1.1 La théorie</H3><P>La théorie est simple...<H3>1.2 La pratique</H3><P>Voici un petit exercice maintenant...

<H2>2 Leçon 2</H2><P>Dans cette deuxième leçon nous allons voir...<H3>2.1 La théorie</H3><P>La théorie est simple...<H3>2.2 La pratique</H3><P>Voici un petit exercice maintenant...

</BODY>...

Tableau 5 : Eléments de niveau bloc

<H1>.<H6> En-tête de section. H1 est le plus gros titre, il ne doit être utilisé qu’une fois pour le titre du document. H6 est le plus petit sous-titre.

ALIGN (DECONS.) LEFT,CENTER,RIGHT. Alignement du titre

<P> Un paragraphe. L’étiquette finale est optionnelle.

ALIGN (DECONS.) LEFT,CENTER,RIGHT. Alignement du paragraphe

<ADDRESS> Bloc d’adresse de l’auteur



6.3 Séparateurs

Les sauts de ligne dans le fichier source du document sont considérés comme de simplescaractères d’espacement. Le visualiseur coupe les lignes en fonction de sa largeur d’affichage.Pour forcer un saut de ligne à l’intérieur d’un paragraphe il faut utiliser l’élément BR. Pour em-pêcher un saut de ligne entre deux mots il faut utiliser un espace insécable représenté par l’entité

<P>Ce saut de ligneest considéré comme un espace<br>L’élement <code>BR</code> insère un saut forcé

</P>

Ce paragraphe est usuellement représenté comme ceci :

Ce saut de ligne est considéré comme un espaceL’élément BR insère un saut forcé

<PRE> Un paragraphe préformatté. Utilisé généralement pour inclure du code source. Les retours à la ligne et les tabulations sont respectés par le visualiseur.

Contient Eléments texte (voir Tableau 4), A (voir Tableau 10), BR

<BLOCKQUOTE> Bloc provenant d’une autre source. Généralement une citation.

<DIV> Une division du document. Utilisé pour donner des propriétés stylistiques à un bloc de texte regroupant plusieurs autres éléments de niveau bloc.

ALIGN (DECONS.) LEFT,CENTER,RIGHT. Alignement de la division

Contient Tout élément autorisé à l’intérieur de BODY, c’est-à-dire en particulier des élé-ments de niveau bloc

Tableau 6 : Eléments séparateurs

<BR> Un retour à la ligne. Pas d'étiquette finale. Pas de contenu.

CLEAR (DECONS.) Insère un saut suffisamment haut pour que le texte suivant ne commence pas à côté d'une image se trouvant sur la ligne. Les valeurs possibles: LEFT, RIGHT, ALL assurent respectivement qu'il n'y a pas d'image à gauche, à droite et nulle part sur la ligne.

<HR> Barre de séparation horizontale.

ALIGN (DECONS.) Alignement du séparateur (LEFT, RIGHT ou CENTER)

NOSHADE (DECONS.) Supprime l’effet d’ombré

SIZE (DECONS.) Epaisseur en pixels.

WIDTH (DECONS.) Largeur en pixels ou en pourcentage

Tableau 5 : Eléments de niveau bloc


6.4 Listes

HTML 4.0 offre de nombreux éléments permettant de construire des listes ou des énumé-rations. Ces listes peuvent être généralement imbriquées les unes dans les autres. Les 3 typesfondamentaux de listes sont : la liste simple UL où chaque terme de la liste est précédé d’un pointou d’un signe similaire, la liste ordonnée OL où les termes sont précédés d’un numéro d’ordre,la liste de définitions DL où chaque terme, désigné par l’élément DT peut-être accompagné d’unedéfinition désignée par l’élément DD.

Tableau 7 : Eléments de liste (exemples)

Type de Liste Exemple de Code Représentation

Liste Simple <H1>Fruits :</H1><UL>

<LI>Pommes<LI>Poires<LI>Oranges

</UL>

n Pommesn Poiresn Oranges

Liste Ordonnée <H1>Procedure</H1><OL>

<LI>Etape 1<LI>Etape 2

</OL>

1. Etape 12. Etape 2

Liste de Définitions <H1>Glossaire</H1><DL>

<DT>HTML<DD>Hypertext...

<DT>SGML<DD>Standard...

</DL>

HTMLHypertext Markup Language

SGMLStandard Generalized ...

Tableau 8 : Eléments de liste simple (UL, OL, LI)

<UL> Une liste simple. Ne peut contenir que des éléments LI.

TYPE Le type de signe à afficher devant chaque entrée de la liste : DISC, CIRCLE, SQUARE.

<OL> Une liste ordonnée. Ne peut contenir que des éléments LI.

TYPE Le type de numérotation à utiliser: 1, chiffres arabes, a, lettres minuscules, A, lettres majus-cules, i, chiffres romains minuscules, I, chiffres romains majuscules.

START Le nombre initial de la séquence.

<LI> Un élément de liste UL ou OL. L’étiquette finale est facultative. LI peut contenir des éléments de type texte (Tableau 3), de type bloc (Tableau 5), des listes, des formulaires, des tableaux ainsi que A, IMG, HR, BR, etc…

TYPE Le type de signe ou de numérotation à utiliser. Les valeurs possibles sont les mêmes que celles autorisées pour l'attribut TYPE de l’élément dans lequel se trouve l’élément LI

VALUE Le nombre à utiliser (dans une liste OL).



6.5 Ancres et liens hypertexte

Un lien hypertexte HTML établit une relation orientée entre une source et une destination.Un lien est exprimé par un élément A ou LINK. LINK ne peut intervenir que dans l’en-tête d’undocument à l’intérieur d’un élément HEAD alors que A ne peut intervenir que dans le corps dudocument à l’intérieur de l’élément BODY. Une des extrémités du lien est définie par l’élémentlui-même, l’autre extrémité étant définie par l’attribut href de l’élément. Toute extrémité delien identifie une ressource atteignable sur le World Wide Web : un document, une position àl’intérieur d’un document, une image, une séquence vidéo, etc…

On appelle ancre ou point d’ancrage une zone à l’intérieur d’un document pouvant con-tenir plusieurs éléments et pouvant être utilisée comme extrémité d’un lien. Les ancres sontconstruites grâce à l’élément A muni de l’attribut name ou bien par l’attribut id supporté par laplupart des éléments. Les ancres permettent de donner un nom à un endroit précis du documentafin de pouvoir y faire référence dans un lien :

Typiquement un lien se présente de la façon suivante :

Consulter <a href=”http://www.epfl.ch”>le site officiel de l’EPFL</a>

et présenté de la façon suivante par un navigateur graphique classique :

Consulter le site officiel de l’EPFL

La portion de texte soulignée est alors active et l’utilisateur peut cliquer dessus de manièreà ce que le navigateur télécharge et affiche le document désigné.

Note: Il est interdit d’imbriquer des liens ou des ancres.

Tableau 9 : Eléments de liste de définition

<DL> Une liste de définitions. Ne peut contenir qu’une séquence d’éléments DT et DD.

<DT> Un terme à définir. L'étiquette finale est facultative. Contient des éléments de type texte (Tableau 3) et A, IMG, BR, etc…

<DD> Une définition. L'étiquette finale est facultative. Contient des éléments de type texte (Tableau 3) de type bloc (Tableau 5), des listes, des formulaires des tableaux ainsi que A, IMG, HR, BR, APPLET, MAP

...

...

...

...<a name=”par3”>Paragraphe 3</a>......

http://site.net/document.html

htpp://site.net/document.html#par3

Pointe au début du document.

Pointe sur le paragraphe 3.


HTML 4.0 prédéfinit un certain nombre de types de lien comme valeurs possibles des at-tributs REL et REV de l’élément LINK. Ces types sont conventionnels mais non limitatifs :

• contentsLe lien renvoie à une table des matières

• indexLe lien renvoie à un index du document

• glossaryLe lien renvoie à un glossaire

• copyrightLe lien renvoie à une déclaration de copyright

• nextLe lien renvoie vers le document suivant si le document courant fait partie d’une série. Cette valeur est généralement utilisée avec l’attribut rel.

• previousLe lien renvoie vers le document précédent si le document courant fait partie d’une série. Cette valeur est généralement utilisée avec l’attribut rev.

• startLe lien renvoie vers le premier document de la série dont fait partie le document courant.

• helpLe lien renvoie vers un document d’aide au sujet du document courant.

• alternateLe lien définit une version alternative du document, par exemple dans un autre langue.

• madeLe lien renvoie vers l’auteur du document. Cette valeur est généralement utilisée avec l’attribut rev. Une construction typique est :<link rev=”made” href=”mailto:[email protected]”>

Tableau 10 : Hyperliens et ancres (A et LINK)

<A> <LINK> Cet élément permet de définir un lien et/ou une ancre dans le corps d’un document.

NAME Cet attribut indique que l’élément définit une ancre dont le nom est la valeur de l’attribut

HREF Cet attribut indique que l’élément définit un lien hypertexte dont la deuxième extrémité est désignée par la valeur de cet attribut (un URL). Le texte contenu dans l’élément est mis en évidence et l'utilisateur peut l'”activer” (en cliquant dessus, par exemple) pour consulter la ressource spécifiée.

REL Cet attribut indique que l’élément lui-même est la source du lien, la destination étant indiquée par l’attribut href. La valeur de cet attribut indique le type de relation établi par le lien.

REV Cet attribut indique que l’élément lui-même est la destination du lien, la source étant indiquée par l’attribut href. La valeur de cet attribut indique le type de relation établi par le lien.

TITLE Suggère un titre pour la ressource accessible par l’hyperlien

TARGET Utilisé dans un document multi-cadres (voir § 5.6) pour spécifier le cadre cible où afficher le document spécifié par l'URL href.

L’élément LINK, uniquement valide en en-tête de document dispose de la même sémantique de lien (et des mêmes attributs sauf name) que l’élément A.



6.6 Incrustations

HTML 4.0 offre des moyens d’incruster divers objets dans le flot du texte, les images ensont l’exemple le plus répandu mais on trouve également des applets ou d’autres documents.

6.6.1 Images (IMG)

Quoique HTML 4.0 voudrait imposer l’élément OBJECT, plus générique, l’élément IMGdemeure de très loin le plus répandu pour inclure des images dans le cours du texte puisque sadéfinition remonte aux toutes premières versions du langage.

...<P>L’icône <IMG alt=”NEW” align=”middle” src=”images/new.gif> sertà signaler une entrée récente....

ou de façon équivalente, en utilisant l’élément OBJECT :

...<P>L’icône <OBJECT data=”images/new.gif>NEW</OBJECT> sertà signaler une entrée récente....

Ce qui donne :

L’icône sert à signaler une entrée récente.

L’attribut alt est primordial car il offre un contenu alternatif pour les visualiseurs qui nepourraient afficher l’image soit pour des raisons techniques (visualiseur texte, synthèse vocaleou autre) soit parce que cet affichage a été désactivé par l’utilisateur.

6.6.2 Figures et cartes réactives (cliquables)

HTML permet de définir des images réactives qui déclenchent des actions différentes sui-vant la position activée par l’utilisateur. La plupart du temps activer une zone d’image revientà cliquer avec la souris à un endroit déterminé ce qui charge un nouveau document. Ce méca-nisme permet de construire des menus graphiques notamment.

On distingue deux modes de fonctionnement de ce mécanisme suivant que la détermina-tion de l’action à entreprendre en fonction de la position activée se fait sur le serveur ou sur leclient.

Cartes réactives côté serveur. Ce mode de définition de cartes réactives existe depuisHTML 2.0. Une image IMG est cliquable si elle comporte l’attribut ismap (Tableau 11) et estimbriquée dans un lien <A href=...> :

<A href=”/cgi-bin/imagemap.cgi><IMG src=”” alt=”[Menu]”></A>

Dans ce cas, quand l’utilisateur clique sur l’image, le client ajoute à l’URL de l’ancre lescoordonnées du clic (voir § 2.3). Le serveur reçoit cet URL étendu, le traite et renvoie au clientle document adéquat suivant les coordonnées du clic. Comme c’est le serveur qui effectue l’ana-lyse de la requête, on parle d’images cliquables côté serveur ou server-side image maps. Ce


mécanisme est lourd pour le serveur qui est contraint à un traitement supplémentaire pour dé-terminer le bon document à renvoyer. Par contre il offre une très grande flexibilité dans cettedétermination en permettant de définir des zones actives de complexité arbitraire.

Cartes réactives côté client. Le mécanisme des cartes cliquables côté client (client-side imagemaps) consiste à fournir au client des éléments suffisants pour décider lui-même quel documentrécupérer en fonction des coordonnées d’activation. Ainsi le client demande alors directementle bon document au serveur, allégeant son travail. En pratique on définit des zones à l’intérieurd’une image auxquelles ont associe individuellement un URL.

Les cartes cliquables côté client son implémentées à travers les éléments MAP et AREA dé-crits ci-après ainsi que de l’attribut USEMAP de l’élément IMG (Tableau 11) qui permettent dedéfinir des zones actives dans une image.

...<A href=”/cgi-bin/pic”><IMG src=”pic.gif” usemap=”#myMap” ismap></A>......<MAP name=”myMap”>

<AREA shape=”RECT” coords=”10,10,49,49” href=”LSP.html”><AREA shape=”RECT” coords=”60,10,99,49” href=”activites.html”><AREA shape=”RECT” coords=”110,10,149,49” href=”equipe.html”>

</MAP>...

Tableau 11 : Images (IMG)

<IMG> Une image incrustée dans le texte. Pas d’étiquette finale. Pas d’élément contenu.

SRC (OBLIG.) L’URL identifiant l’image.

ALT (OBLIG.) Texte à afficher à la place de l’image si l'utilisateur préfère ne pas avoir d'ima-ges ou si le visualiseur ne les supporte pas.

HEIGHT (DECONS.) Hauteur (en pixels) de l'image.

WIDTH (DECONS.) Largeur (en pixels) de l'image.

ISMAP L’image est une carte cliquable dite côté serveur (§ 6.6.2). Cet attribut ne peut-être présent que si l’élément IMG est imbriqué dans un hyperlien A. Le visuali-seur ajoute à l'URL de l'ancre les coordonnées du point où l'utilisateur a cliqué à l'intérieur de l’image permettant ainsi de sauter à différentes ressources suivant l'endroit cliqué dans l'image.

ALIGN (DECONS.) Alignement par rapport au texte environnant. Les valeurs TOP, MIDDLE, BOTTOM, alignent l’image par rapport à la ligne de texte environnant. LEFT et RIGHT alignent l’image contre la marge gauche ou droite permettant au texte de s'afficher sur plusieurs lignes à côté de l'image.

BORDER (DECONS.) Epaisseur du bord ajouté autour d’une image si c’est un hyperlien.

HSPACE (DECONS.) L’espace laissé libre horizontalement autour de l’image.

VSPACE (DECONS.) L’espace laissé libre verticalement autour de l’image.

USEMAP L’image est une carte cliquable dite côté client. La valeur est un URL où trouver un élément MAP (Tableau 12). Cet attribut ne peut être présent que si l’élément IMG est imbriqué dans un lien A et peut être présent en même temps que l'attri-but ISMAP pour le cas où le visualiseur ne supporte pas les cartes côté client. Le visualiseur se sert des coordonnées du clic utilisateur dans l’image et des infor-mations précisées dans l’élément MAP pour déterminer l’hyperlien destination.

Ce mécanisme a l’avantage de fonctionner quand même avec des clients ne supportant pasles images cliquables côté client puisque la présence de l’attribut ISMAP assure alors le traite-ment côté serveur.

Note. L’élément OBJECT offre une alternative pour définir des cartes réactives grâce ã son st-tribut shapes. Etant d’usage moins répandu, elle n’est pas abordée ici.

6.7 Incrustation générique (OBJECT)

HTML 4.0 définit l’élément OBJECT afin de permettre l’incrustation d’objets divers (ima-ges, programmes graphiques, animations, portions de documents HTML, etc…) à l’intérieurd’un document. L’affichage de l’élément OBJECT est traité de façon un peu particulière par lesvisualisateurs. En effet, le contenu de l’élément n’est affiché que si le visualisateur n’a pas étécapable d’afficher l’objet référencé. Ce mécanisme permet d’offrir des alternatives de visuali-sation en imbriquant des éléments OBJECT. Par exemple :

<P> <OBJECT title="La Terre vue de l’espace"

classid="http://www.observer.mars/TheEarth.class">

<OBJECT data="TheEarth.mpeg" type="application/mpeg">

<OBJECT data="TheEarth.gif" type="image/gif">

La <STRONG>Terre</STRONG> vue de l’espace.</OBJECT>

</OBJECT></OBJECT>

Déclaration - Instanciation. L’élément OBJECT offre également un mécanisme par lequel unobjet peut être déclaré puis utilisé à divers endroits d’un même document. Pour cela on donneà l’élément l’attribut declare et un identificateur unique à travers l’attribut id. L’objet peutensuite être instancié n’importe où dans le document, notamment au moyen de l’élément A :

Tableau 12 : Images réactives côté client (MAP, AREA)

<MAP> Une carte : un ensemble de zones actives à appliquer sur une image.

NAME (OBLIG.) Obligatoire. Le nom par lequel la carte peut être référencée dans un lien USEMAP dans l’élément OBJECT ou IMG (voir Tableau 11).

Contient AREA

<AREA> Une zone active dans une image menant à un hyperlien particulier. Ne peut être contenu que dans MAP.

ALT (OBLIG.) Texte alternatif de description du contenu de la zone

SHAPE La forme de la zone : RECT (rectangulaire, défaut), CIRCLE (circulaire), POLY (polygonale), DEFAULT (identique à RECT).

COORDS Coordonnées en pixels de la zone sous forme d'une liste d'entiers. Le nombre de coordonnées à donner dépend de SHAPE.

HREF Un URL indiquant l’hyperlien à suivre lors d’un clic dans la zone.

NOHREF La zone n’est pas active (pas d’hyperlien associé).


<P><OBJECT declareid="earth.declaration"data="TheEarth.mpeg"type="application/mpeg">

La <STRONG>Terre</STRONG> vue de l’espace.</OBJECT>...plus loin dans le document...<P>Une superbe <A href="#earth.declaration">vue de la Terre !</A>

Passage de paramètres d’initialisation. Le passage de paramètres d’initialisation se fait aumoyen d’éléments PARAM contenus dans l’élément OBJECT.

<OBJECT classid="http://www.some.server/clock.class"><PARAM name="height" value="40" valuetype="data"><PARAM name="width" value="40" valuetype="data">Ce visualiseur ne supporte pas le langage Java.

</OBJECT>

6.8 Applet (APPLET)

L’élément APPLET servant à inclure une applet Java dans le document a été remplacé parl’élément OBJECT dans HTML 4.0 et son utilisation est donc désormais déconseillée. Java estun langage de syntaxe proche du C++ qui permet d’écrire des applications graphiques pouvant

Tableau 13 : Incrustation d’objets génériques (OBJECT, PARAM)

<OBJECT> Un objet incrusté (image, animation, applet, etc…)

DECLARE Indique qu’il s’agit d’une simple déclaration de l’objet pour référence ultérieure. L’objet ne doit pas être affiché à cet endroit.

CODEBASE URL de base pour CLASSID, DATA, ARCHIVE

CLASSID Un URL spécifiant un programme pouvant assurer le rendu de l’objet

DATA Un URL référençant les données de l’objet

TYPE Le type des données de l’objet (ex: image/jpeg, video/mpeg, etc…)

CODETYPE Le type de programme référencé par CLASSID

ARCHIVE Une liste d’URLs d’archives contenant les objets spécifiés par CLASSID et DATA

STANDBY Un message à afficher durant le chargement de l’objet

USEMAP Le nom d’un élément MAP définissant le découpage de l’objet en zones réactives (Tableau 12)

<PARAM> Un paramètre d’initialisation d’objet

NAME Nom du paramètre

VALUE Valeur du paramètre

VALUETYPE Le type de valeur contenu dans VALUE : data indique que VALUE contient la valeur directe à passer à l’objet; ref indique que VALUE contient un URL permettant d’accéder à la valeur; object indique que VALUE contient une référence d’objet déclaré dans le document.

TYPE Le type de la variable, uniquement dans le cas où VALUETYPE vaut ref. (ex: image/jpeg, video/mpeg, etc…)



s’exécuter sur n’importe quelle plate-forme informatique. Ces applications apparaissent commeles autres objets incrustés, dans un cadre à l’intérieur du document. On peut ainsi réaliser desapplications graphiques complexes et interactives rendant les pages HTML “vivantes”.


7 Formulaires de SaisieLes formulaires de saisie permettent à l’utilisateur de fournir des informations et ainsi

d’obtenir une réponse personnalisée. Les informations contenues dans les champs remplis parl’utilisateur sont transmises par le programme client au serveur qui les transmet à son tour à unprogramme de traitement par le mécanisme CGI (Common Gateway Interface) (voir § 3.2 etFigure 2).

La structure d’un formulaire de saisie est simple, elle se compose d’un élément FORM con-tenant essentiellement une suite de contrôles (éléments INPUT, TEXTAREA, SELECT,BUTTON, ...) mais aussi des éléments de structuration de document (le plus souvent un tableauTABLE (voir Ch. 8) afin d’aligner correctement les champs d’entrée).

HTML 4.0 prévoit les types de contrôles suivants :

• Boutons Les boutons son définis au moyen de l’élément BUTTON (ou de l’élément INPUT). On distingue trois types de boutons : bouton de soumission pour envoyer le contenu du formulaire pour traitement, bouton de remise à zéro du formulaire pour effacer tous les champs remplis et bouton simple dont l’action est définie par un script inclus dans le document.

• Coches et boutons radioUne coche est un bouton à deux états : activé (enfoncé) ou non. On définit une coche au moyen de l’élément <INPUT type=”checkbox”... L’attribut selected, présent ou non, définit l’état initial de la coche. Si plusieurs coches possèdent le même attribut name alors elles définissent un groupe de boutons radio, c’est-à-dire un groupe où une seule coche peut être activée à la fois.

• Menus Les menus sont des listes d’options à choix. On les définit au moyen des éléments SELECT, OPTGROUP et OPTION.

• Champs d’entrée textuelL’élément <INPUT type=”text”... permet de créer un champ de saisie textuelle à une ligne. L’élément TEXTAREA définit un champ de saisie textuel à plusieurs lignes.

• Sélecteur de fichiersIl s’agit d’un contrôle permettant de spécifier un fichier à transmettre avec le formulaire. Il se construit avec l’élément <INPUT type=”file”...



• Contrôle cachésCes contrôles ne sont pas affichés mais leur valeur est transmise en même temps que le formulaire. Les auteurs utilisent cette fonctionnalité pour transmettre des informations supplémentaires sur la transaction en cours.

• Objets de contrôleUn élément OBJECT à l’intérieur d’un formulaire définit un contrôle de sorte que sa valeur associée soit transmise avec le formulaire.

Globalement, un formulaire se présente donc ainsi :

...<FORM METHOD="POST" ACTION="http://host.net/cgi-bin/script.cgi">

<P>Type some text here:<BR><TEXTAREA NAME="text" ROWS=8 COLS=25></TEXTAREA><P>Choose a Font : <SELECT NAME="font">

<OPTION>Courier<OPTION>Helvetica<OPTION SELECTED>Times

</SELECT>

<P>Select a Font Size (default 8) : <INPUT NAME="size" SIZE=5 MAXLENGTH=3 VALUE="8"><INPUT TYPE="submit" VALUE="Submit"><INPUT TYPE="reset" VALUE="Reset">

</FORM>...

Tableau 14 : Formulaires de saisie

<FORM> Un formulaire comportant une suite de champs à remplir par l’utilisateur.

ACTION (OBLIG.)

Un URL désignant un programme destiné à recevoir et traiter les informations fournies par l'utilisateur dans les champs du formulaire.

METHOD La méthode par laquelle le programme client doit transmettre les données fournies par l'utilisateur au serveur. Deux valeurs sont possibles GET ou POST. GET est pré-féré quand il y a peu de données à transmettre, POST dans le cas contraire. Le défaut est GET.

ENCTYPE Désigne la forme de codage à employer pour les données. Par défaut: application/x-www-form-urlencoded. Il doit prendre la valeur multipart/form-data dans le cas où le formulaire comprend un sélecteur de fichiers.

ONSUBMIT Une fonction de script à exécuter lors de la soumission du formulaire

ONRESET Une fonction de script à exécuter lors de la remise à zéro du formulaire

Contient Tout élément pouvant être contenu dans BODY mais pas un autre FORM


<INPUT> Un contrôle de formulaire pour l’entrée de données.

TYPE Définit le type du contrôle d'entrée. Par défaut, prend la valeur TEXT. Suivant la valeur de cet attribut, d’autres attributs sont applicables. Voir Tableau 15.

NAME Le nom du contrôle. Ce nom est passé, avec la valeur entrée par l'utilisateur, au programme de traitement. Obligatoire sauf pour les types SUBMIT et RESET.

ALIGN (DECONS.)

Alignement du champ suivant le même principe que l’alignement des images (voir Tableau 11). Les valeurs possibles sont: LEFT, RIGHT, TOP, MIDDLE et BOTTOM

ONFOCUS Fonction de script à appeler quand le contrôle acquiert le focus

ONBLUR Fonction de script à appeler quand le contrôle acquiert le focus

ONSELECT Fonction de script à appeler quand du texte a été sélectionné

ONCHANGE Fonction de script à appeler quand la valeur du contrôle a changé

<TEXTAREA> Un champ d’entrée texte multi-lignes

NAME (OBLIG.) Le nom du champ.

COLS (OBLIG.) Le nombre de colonnes visibles à l’écran.

ROWS (OBLIG.) Le nombre de lignes visibles à l’écran.

<SELECT> Un menu à choix.

NAME (OBLIG.) Le nom du menu, passé avec la valeur de l'option sélectionnée par l'utilisateur au programme de traitement.

MULTIPLE Indique que plusieurs des options du menu peuvent être choisies.

SIZE Le nombre d'options du menu visibles simultanément.

Contient OPTION

<OPTION> Une option dans un menu à choix.

SELECTED Indique que cette option doit être choisie par défaut dans la liste.

VALUE Valeur à retourner. En l’absence de cet attribut c’est le contenu de l’élément qui est retourné.

<BUTTON> Un bouton

NAME Le nom du bouton

VALUE La valeur portée par le bouton.

TYPE submit pour un bouton de soumission ou reset pour un bouton de remise à zéro du formulaire

DISABLED Le bouton est désactivé si cet attribut est présent

ONFOCUS Fonction de script à appeler quand le contrôle acquiert le focus

ONBLUR Fonction de script à appeler quand le contrôle acquiert le focus

Tableau 14 : Formulaires de saisie (Suite)



Comme indiqué précédemment les attributs utilisables dans l’élément INPUT dépendentde l’attribut TYPE utilisé. Ceci est résumé dans le tableau suivant.

Tableau 15 : Attributs de l’Elément INPUT

TYPE Description

Attribut Additionnel

TEXT Un champ d’entrée textuel d’une ligne.

MAXLENGTH La longueur maximale du texte.

SIZE La longueur du champ de saisie. Si elle est inférieure à MAXLENGTH le champ comporte un ascenseur.

VALUE Le texte initial à placer dans le champ

PASSWORD Un champ d’entrée textuel d’une ligne où le texte entré par l’utilisateur n’apparaît pas en clair. Destiné à la saisie de mots de passe.

CHECKBOX Une coche.

VALUE La valeur de la coche initialement choisie.

CHECKED Si cet attribut est présent, il indique que l’option doit être présentée cochée au départ

RADIO Une coche dans un groupe de boutons radio. Parmi plusieurs éléments INPUT RADIO ayant le même NAME, un seul peut être coché à la fois.

VALUE (OBLIG.) Obligatoire. La valeur de l’option initialement choisie.

CHECKED La présence de cet attribut indique que l’option doit être initialment cochée

IMAGE Une image à cliquer. Cliquer sur cette image soumet le formulaire pour traitement. Deux champs fantômes contenant les coordonnées du point cliqué sont transmis en plus. Le nom de ces champs est composé de la valeur de l’attribut NAME suivi de x et y

SRC Obligatoire. L’URL où trouver l’image.

ALIGN (DECONS.) Alignement par rapport à la ligne de base du texte environnant. Valeurs possibles : TOP, MIDDLE et BOTTOM, LEFT et RIGHT.

HIDDEN Un champ caché que l’utilisateur ne modifie pas.mais dont la valeur est transmise avec le for-mulaire

NAME Obligatoire. Le nom du champ à transmettre.

VALUE Obligatoire. La valeur du champ à transmettre.

SUBMIT Un bouton pour soumettre le formulaire pour traitement.

NAME Si cet attribut est présent, la paire NAME/VALUE est renvoyée avec les données du formulaire, ce qui permet de distinguer plusieurs boutons de soumission dans un formulaire.

VALUE Un label pour le bouton de soumission

RESET Un bouton pour réinitialiser le formulaire.

VALUE Un label pour le bouton

FILE Un sélecteur de fichiers pour préciser un fichier à envoyer.


8 TableauxLa création de tableaux est une possibilité offerte depuis HTML 3.2. Cette fonctionnalité

est souvent détournée de son but premier par les auteurs car elle leur permet d’avoir une maîtrisebeaucoup plus grande sur l’aspect final de leur document à travers la possibilité d’aligner et decontrôler la disposition des différents constituants de la page. Cette attitude va à l’encontre dela philosophie SGML et il faut toujours préférer les solutions utilisant les feuilles de style pourcontrôler la mise en page.

8.1 Structure des tableaux

Un tableau HTML est composé de cellules organisées en rangées et colonnes. L’élémentTABLE définit le tableau. A l’intérieur de cet élément, une succession d’éléments TR (TableRow) définit les rangées, elles-mêmes composées d’éléments TD et TH définissant les cellulesproprement dites. TD (Table Data) définit une cellule simple alors que TH (Table Heading) dé-finit une cellule de titre pour la ligne et/ou la colonne où elle apparaît. Un tableau simple a lastructure suivante :

...<TABLE>

<CAPTION>Titre du Tableau</CAPTION><TR>

<TH>Titre Colonne 1<TH>Titre Colonne 2<TH>Titre Colonne 3

</TR><TR>

<TD>Objet 1<TD>Objet 2<TD>Objet 3

</TR></TABLE>...



Un tel tableau est représenté de la façon suivante :

8.2 Groupements de colonnes et rangées

Les éléments COL et COLGROUP permettent de grouper des colonnes de façon à ajouter uneinformation sur la structure du tableau et pouvoir modifier des attributs de présentation sur ungroupe de colonnes. Leur utilisation au début de la définition de la table donne également suf-fisamment d’information au visualiseur pour lui permettre d’afficher le tableau de façon incré-mentale au fur et à mesure qu’il reçoit les rangées depuis le serveur. Sans cette information, levisualiseur est obligé d’attendre la réception de l’intégralité du tableau pour pouvoir le mettreen page. Par exemple :

<TABLE><COLGROUP>

<COL width=”30”><COL width=”0*”>

Titre du Tableau

Titre Colonne 1 Titre Colonne 2 Titre Colonne 3

Objet 1 Objet 2 Objet 3

Tableau 16 : Tableaux (TABLE, CAPTION)

<TABLE> Un tableau.

SUMMARY Résumé du contenu du tableau

WIDTH La largeur du tableau. Deux types de valeurs sont possibles: mesure absolue en pixels (ex : WIDTH="200") ou proportionnelle en pourcentage (ex : WIDTH="50%").

COLS Le nombre de colonnes du tableau. Il est préférable d’utiliser les éléments COLGROUP et COL pour indiquer cette information (voir § 8.2)

BORDER Largeur en pixels de la bordure à dessiner autour du tableau. Par défaut un tableau n'a pas de bordure.

FRAME Spécifie quelles portions du cadre entourant le tableau seront visibles : void (aucun cadre), above (le haut), below (le bas), hsides (le haut et le bas), vsides (le côtés droit et gauche), lhs (le côté gauche), rhs, (le côté droit), box ou border (les quatre côtés).

RULES Spécifie quelles droites de séparation intérieures il faut tracer : none (aucune), groups (entre les groupes de rangées et de colonnes), rows (entre les rangées), cols (entre les colonnes), all (entre rangées et colonnes).

CELLSPACING L’espace laissé entre les différentes cases.

CELLPADDING L’espace laissé entre le bord de chaque case et le contenu.

Contient Dans cet ordre : CAPTION (optionnel) puis COL et COLGROUP (optionnel) puis THEAD (optionnel) puis TFOOT (optionnel) puis TBODY (implicite)

<CAPTION> Un titre de tableau.

ALIGN (DECONS.) Position du titre. Valeurs possibles: TOP et BOTTOM pour placer le titre en haut ou en bas du tableau.


<COL width=”1*”><COLGROUP align=”center”>

<COL width=”2*”><COL width=”1*” align=”char” char=”:”>

<TR>...

</TABLE>

Ceci définit une table comportant 5 colonnes réparties en deux groupes. Les cellules dudeuxième groupe sont centrées. La 5ème colonne surcharge cet attribut par un alignement descellules sur le caractère ‘:’. La première colonne occupe une largeur fixes de 30 pixels. Ladeuxième colonne est dimensionnée selon le minimum nécessaire à la plus large de ses cellules.L’espace restant est réparti entre les 3 colonnes restantes à raison de 1/4, 2/4, 1/4.

Les éléments THEAD, TFOOT et TBODY regroupent des rangées du tableau en groupes ded’en-tête, de pied et de corps du tableau. Cette information ajoute à la description structurelledu tableau. Elle peut être utilisée pour fixer les attributs de mise en page sur un groupe de ran-gées. Dans le cas d’un tableau occupant plusieurs pages, les groupes d’en-tête et de pied peuventêtre repris sur chacune des pages.

<TABLE>

<THEAD>

<TR> ...En-tête...

</THEAD>

<TFOOT>

<TR> ...Pied de tableau...

</TFOOT>

<TBODY>

<TR> ...Première rangée du premier bloc...

<TR> ...Deuxième rangée du premier bloc...

</TBODY>

<TBODY>

<TR> ...Première rangée du deuxièmebloc...

<TR> ...Deuxième rangée du deuxième bloc...<TR> ...Troisième rangée du deuxième bloc...

</TBODY></TABLE>



Note. L’élément TFOOT, s’il est présent, doit intervenir avant le premier élément TBODY de ma-nière à ce que le visualiseur dispose de l’information d’en-tête et de pied de tableau avant la ré-ception du corps.

8.3 Tableaux complexes

Un certain nombre d’attributs permettent de contrôler plus avant l’aspect du tableau. Enparticulier, les attributs rowspan et colspan des éléments TH et TD permettent de créer destableaux plus complexes en spécifiant des cases qui s’étendent sur plusieurs rangées ou colon-nes.

...<TABLE>

<TR><TH ROWSPAN=”2”>Végétaux

<TD>Fruits

Tableau 17 : Groupements de cellules (COL, COLGROUP, THEAD, TFOOT, TBODY)

<COLGROUP> Un groupe de colonnes.

SPAN Nombre de colonnes du groupe

WIDTH La largeur du tableau. Trois types de valeurs sont possibles: mesure absolue en pixels (ex : width="200"), proportionnelle en pourcentage (ex : width="50%") ou relative à l’espace

restant (ex .width="3*" correspond à 3 nièmes de l’espace restant où n est la somme de toutes les spécifications relatives)

ALIGN Alignement horizontal des cellules des colonnes du groupe : left (marge gauche), center (centré), right (marge droite), justify (justifié), char (par rapport à un caractère donné).

VALIGN Alignement vertical des cellules des colonnes du groupe :top (haut), middle (centrage verti-cal), bottom (bas), base (alignement de la ligne de base de la première ligne de texte de tou-tes les cellules comportant cette valeur d’attribut).

CHAR Caractère sur lequel aligner si align=”char” .

Contient COL

<COL> Une déclaration de colonne (cet élément ne crée pas de colonne, il sert juste de déclara-tion pour des colonnes qui doivent être crées au moyen de TD et/ou TH). Accepte les mêmes attributs que COLGROUP.

<THEAD><TFOOT><TBODY>

Un groupe de rangées (resp. d’en-tête, de pied et de corps du tableau)

ALIGN Alignement horizontal des cellules des rangées du groupe (voir le même attribut de l’élément COLGROUP).

VALIGN Alignement vertical des cellules des rangées du groupe (voir le même attribut de l’élément COLGROUP).



</TR><TR>

<TD>Fleurs </TD></TR>

</TABLE>...

est représenté de la façon suivante :

On note que ‘Végétaux’, bien qu’occupant deux lignes ne doit apparaître, dans le codeHTML, que dans la définition de la première ligne. Des exemples de définition de tableaux com-plexes sont donnés en Annexe B-4.

Plusieurs points importants :n des cases de tableau peuvent être videsn la définition ne doit pas provoquer de chevauchement de casesn des tableaux peuvent être imbriqués

Végétaux Fruits

Fleurs

Tableau 18 : Tableaux : Rangées et colonnes (TR, TD, TH)

<TR> Une rangée dans un tableau.

WIDTH La largeur du tableau. (voir le même attribut de l’élément COLGROUP, Tableau 17)

ALIGN Alignement horizontal des cellules des colonnes du groupe (voir le même attri-but de l’élément COLGROUP, Tableau 17)

VALIGN Alignement vertical des cellules des colonnes du groupe (voir le même attribut de l’élément COLGROUP, Tableau 17)


Contient TD et TH



<TD> <TH> Une case dans un tableau (resp. normale ou de titre).

COLSPAN Nombre de colonnes sur lequel s’étend cette case.

ROWSPAN Nombre de rangées sur lequel s’étend cette case.

ALIGN Alignement horizontal de la cellule (voir le même attribut de l’élément COLGROUP, Tableau 17)

VALIGN Alignement vertical de la cellule (voir le même attribut de l’élément COLGROUP, Tableau 17)


SCOPE Indique les cellules concernées par le titre dans le cas d’un élément TH. Les valeurs possibles sont : row (les cellule du reste de la rangée), col (les cellules du reste de la colonne), rowgroup (les cellules du même groupe de rangées), colgroup (les cellules du même groupe de colonnes).

NOWRAP (DECONS.) Ne pas couper les lignes automatiquement à l’intérieur de cette case.

WIDTH (DECONS.) La largeur de la case. Absolue en nombre de pixels (ex: WIDTH="200") ou en pourcentage de la largeur totale du tableau (ex: WIDTH="50%").

BGCOLOR (DECONS.)

Une couleur de fond à utiliser dans cette case du tableau. Cette couleur est héri-tée par un éventuel tableau imbriqué dans cette case.

Contient Tout élément autorisé dans l’élément BODY y compris TABLE

Tableau 18 : Tableaux : Rangées et colonnes (TR, TD, TH)


9 Feuilles de StyleLes feuilles de style sont le seul et unique mécanisme préconisé par HTML 4.0 pour con-

trôler l’aspect visuel du document. La plupart des éléments et attributs qui permettaient d’exer-cer un tel contrôle dans les versions antérieures du langage sont en effet désormais déconseilléset pourraient disparaître dès la prochaine version.

Une feuille de style regroupe des règles de présentation que l’on peut appliquer à des élé-ments HTML dans un document. Ces règles sont exprimées dans un langage indépendant deHTML. En fait, HTML n’impose pas un langage de feuille de style particulier, en pratique, tou-tefois le langage Cascading Style Sheet (CSS) [13] tend à s’imposer.

9.1 Association de feuilles de style à un document HTML

HTML 4.0 offre une grande flexibilité au niveau de la localisation des feuilles de style.Une feuille de style peut ainsi résider dans un fichier à part, ce qui permet de la partager entreplusieurs documents, elle peut se trouver à l’intérieur même du document HTML ou bien ellepeut aussi être répartie au niveau même de chaque élément, grâce à l’attribut style.

L’inclusion d’une feuille de style externe est réalisée au moyen de l’élémentLINK (voir § 6.5) :

<HEAD><LINK href=”EPFLStyle.css” rel=”stylesheet” type=”text/css”>...

</HEAD>

Une feuille de style interne est définie à l’intérieur d’un élément STYLE intervenant à l’in-térieur de l’élément HEAD :

<HEAD><STYLE type=”text/css”>

H1 { text-align: center; color: red}</STYLE>

</HEAD>

Une spécification de style en ligne se fait au moyen de l’attribut style supporté par laplupart des éléments :



<P type=”text/css” style=”font-size: 12pt; color: red”>

Cette dernière pratique est à éviter et ne se justifie que pour des surcharges extrêmementlocalisées d’un style général défini par exemple en début de document à l’intérieur d’un élémentSTYLE.

Plusieurs feuilles de style internes et/ou externes peuvent être spécifiées pour permettrede paramétrer le rendu sur des supports différents. Le support auquel s’applique la feuille de sty-le est décrit par l’attribut media. Plusieurs feuilles de style peuvent également s’appliquer aumême media, le langage CSS a en effet la particularité de pouvoir fusionner des spécificationsde style intervenant à plusieurs niveaux, permettant ainsi de combiner une feuille externe avecune feuille générale interne (élément STYLE), une spécification locale (attribut style) et despréférences lecteur (définies par exemple par l’utilisateur dans la configuration de son visuali-seur).

9.2 Les éléments DIV et SPAN

Les éléments DIV et SPAN sont particulièrement utiles en combinaison avec les feuillesde style. Tous deux n’apportent aucune information de structure sur le document contrairementaux autres éléments HTML, leur rôle est simplement d’englober du texte de manière à pouvoiren modifier les propriétés d’affichage grâce à une feuille de style. DIV est un élément de niveaubloc (qui termine un paragraphe ouvert et est entouré généralement de sauts de ligne), SPAN estun élément de niveau texte (voir Ch. 6).

<HEAD><STYLE>

SPAN.avertissement { color: red }</STYLE>

</HEAD>...La copie de ce document sans autorisation est <SPAN class=”avertissement”>interdite</SPAN> sous peine......

9.3 Cascading Style Sheets

9.3.1 Syntaxe générale du langage

Une feuille de style CSS est composée d’une séquence de règles (rules), chacune de cesrègles est composée d’un sélecteur (selector) et d’une déclaration (declaration). Une déclara-tion associe une valeur (value) à une propriété (property).

Tableau 19 : Feuille de style interne (STYLE)

<STYLE> Une définition de feuille de style

TYPE (OBLIG.) Le langage utilisé pour la feuille de style. Le plus souvent text/css

MEDIA Support de rendu auquel cette feuille de style s’applique : screen, print, projection, braille, speech, all

TITLE Titre de la feuille de style


<HEAD><STYLE type="text/css">

H1 { color: blue }</STYLE>

</HEAD>

Dans cet exemple H1 est le sélecteur dont le rôle est de limiter la portée de la déclarationqui le suit. La déclaration associe la valeur blue à la propriété color indiquant ainsi que lacouleur des éléments H1 du document doivent être affichés en bleu. On peut associer plusieursdéclarations au même délimiteur en les séparant par ; et utiliser des déclarateurs multiples aumoyen du séparateur , :


H1 { color: blue; font-size: 14pt }H2, H3 { font-size: 12pt }

</STYLE></HEAD>

Le plus souvent les délimiteurs sont ainsi des éléments HTML. Toutefois on peut ne faireporter une déclaration de style que sur un sous-ensemble nommé d’éléments d’un certain type.Par exemple, faire en sorte que des paragraphes d’annotation soient affichés en rouge. Pour celail faut déclarer ces paragraphes dans le document comme appartenant à la classe annotationen utilisant l’attribut class (voir § 5.1) :

<P class=”annotation”>Une annotation importante<P>Suivie d’un paragraphe normal

Le délimiteur ne concernant que les paragraphes de classe annotation s’écrit alorsP.annotation, ce qui donne la règle suivante :


P.annotation { color: red}</STYLE>

</HEAD>...<P class=”annotation”>Note: Ceci est important</P>...

De même un délimiteur peut n’affecter qu’une seule instance d’un élément dans le docu-ment, il suffit pour cela de donner un identificateur unique à cette instance au moyen de l’attri-but id (voir § 5.1) et de le référencer dans le délimiteur grâce au séparateur # au lieu de ..

9.3.2 Propriétés usuelles

Unités de longueur. Là où des propriétés admettent des longueurs comme valeur, celles-ci peu-vent être exprimées en différentes unités :

• Unités relatives à la police couranteem : la largeur de la lettre m dans la police couranteex : la hauteur du x dans la police courantepx : pixels du dispositif d’affichage



• Unités absoluesin : pouces, 1 pouce vaut 2.54 cmcm : centimètresmm : millimètrespt : points typographiques, 1 point correspond à 1/72ème de poucepc : picas, 1 pica est égal à 12 points

Couleurs. CSS2 prévoit différentes façons de spécifier des couleurs : soit par mot-clé (aqua,black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver,teal, white et yellow), soit par triplet de composantes rouge/vert/bleu de la forme suivante :

EM { color: #f00 } /* #rgb en hexadécimal*/EM { color: #ff0000 } /* #rrggbb en hexadécimal */EM { color: rgb(255,0,0) } /* entier de 0 à 255 */EM { color: rgb(100%, 0%, 0%) } /* flottant de 0.0% à 100.0% */

URL. Certains éléments admettent comme valeur un URL (ou plus exactement un URI). Lasyntaxe est la suivante :

BODY { background-image: url(marble.gif) }

Propriétés. CSS définit plus d’une centaine de propriétés [13]. En voici quelques unes parmiles plus usuelles.

Tableau 20 : CSS2 : Propriétés usuelles

Couleurs color La couleur d’avant-plan

background-color La couleur d’arrière plan

background-image Une image à utiliser comme fond

Polices font-family Une liste de familles de la police à utiliser

P { font-family: Baskerville, "Heisi Mincho W3", Symbol }

font-style normal, italic, oblique

font-weight normal, bold, bolder, lighter

font-size La taille de la police exprimée soit par une taille absolue déterminée par le visualiseur (xx-small, x-small, small, medium, large, x-large, xx-large), soit par une mesure relative (larger, smaller) soit par une mesure de longueur soit par un pourcentage par rapport à l’élément englobant

font Un raccourci pour toutes les propriétés ci-dessus

P { font: bold italic large Palatino, serif }

Texte text-indent Indentation de la première ligne d’un bloc

text-align Alignement horizontal d’un bloc de texte : left, right, center, justify. Peut être également utilisé pour les cellules de tableau.

text-decoration Attributs additionnels de décoration : underline, overline, line-through, blink

text-transform Modification de la capitalisation d’un bloc de texte : capitalize, uppercase, lowercase


Espacement margin-topmargin-rightmargin-botoommargin-left

Largeur de marge. La valeur est soit une longueur, soit un pourcentage de la boite englobante.margin est un raccourci pour ces quatre spécifications individuelles.

padding-toppadding-rightpadding-botoompadding-left

Largeur de remplissage (cette zone de remplissage entoure la zone d’affichage et est elle-même entourée par la zone de marge). padding est un raccourci pour ces quatre spéci-fications individuelles.

Bordures border-top-widthborder-right-widthborder-bottom-widthborder-left-width

Largeur de bordure. La valeur est soit une longueur soit thin, medium ou thick. border-width est un raccourci pour ces quatre spécifications individuelles.

border-style Le style de cadre : dotted (pointillé), dashed (pointillé long), solid, double, groove (creusé), ridge (relief)

border-top-colorborder-right-colorborder-bottom-colorborder-left-color

Couleur de bordure. border-color est un raccourci pour ces quatre spécifications individuelles.

border Raccourci pour les trois propriétés précédentes

Listes list-style-type Type de numérotation de la liste : disc, circle, square, decimal, lower-roman, upper-roman, lower-latin, upper-latin, …

list-style-image Une image à utiliser comme marqueur d’élément de liste (surcharge list-style-type).

UL { list-style-image: url(http://png.com/ellipse.png) }

Tableaux caption-side Position de la légende du tableau : top, bottom, left ou right.

vertical-align La hauteur d’une rangée dépend de la taille et du placement des cellules qu’elle contient. Une cellule est donc souvent moins haute que la hauteur de la rangée à laquelle elle appartient. Cette propriété détermine l’alignement vertical d’une cellule par rapport à sa rangée : baseline (aligne la ligne de base texte de la cellule avec la ligne de base de la rangée), bottom (le bas de la cellule coïncide avec le bas de la rangée), top, middle

border-spacing Espacement des bordures de cellules. La spécification comprend un ou deux longueurs (une seule longueur s’applique à l’espacement horizontal et vertical), deux lon-gueurs correspondent respectivement à l’espacement hori-zontal et vertical.

TABLE { border-spacing: 15pt }

empty-cells Attributs de bordure pour les cellules vides : border ou noborder.

Tableau 20 : CSS2 : Propriétés usuelles


10 ScriptsUn script est un programme qui peut accompagner un document HTML. Les différentes

fonctions de ce programme sont exécutées lors d’évènements liés au document (chargement,passage de la souris au dessus d’un élément, activation d’un lien, soumission d’un formulaireou changement de contenu d’un champ, etc…)

L’élément SCRIPT définit un script exécuté lors du chargement du document par le visua-liseur. NOSCRIPT fournit un texte alternatif pour les visualiseurs ne comprenant pas le script.

Les attributs génériques onclick, ondblclick, onmousedown, onmouseup,onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup,admis par la plupart des éléments HTML permettent d’associer des routines de script (voirCh. 10) à la survenance d’un certaine nombre d’évènements. La syntaxe exacte de ctee associa-tion dépend du langage de sript utilisé.

HTML ne préconise pas de langage de script particulier. Dans la pratique toutefois, Javas-cript est le plus répandu. Javascript est en cours de normalisation par l’ISO après avoir été nor-malisé par l’ECMA [14].

Tableau 21 : Scripts (SCRIPT)

<SCRIPT> Un script

SRC Un URL désignant un script externe au document

TYPE Le langage de script utilisé. Le plus souvent text/javascript

DEFER Indique au visualiseur que le script ne modifie pas l’aspect du document qui peut donc être affiché avant la fin de l’exécution du script.


11 L’Avenir du World Wide WebEvoquer le succès du World Wide Web est aujourd’hui devenu un lieu commun. Le sys-

tème d’information construit sur Internet autour du langage HTML et du protocole HTTP con-naît une expansion fulgurante, preuve de ses qualités et du besoin qu’il représentait. Lebouillonnement d’idées autour des technologies du World Wide Web et la demande en nouvel-les fonctionnalités sont tels que les normes à peine créées sont déjà dépassées de facto.

Ainsi un certain nombre de questions demeurent ouvertes même si HTML 4.0 apporte desréponses aux problèmes les plus couramment évoqués par les auteurs :

n les feuilles de style ont réussi le tour de force d’offrir aux auteurs un maximum de contrôle sur la présentation des documents sans sacrifier aux objectifs d’indépen-dance vis-à-vis du support de visualisation

n l’adoption des mécanismes de scriptage offre une immense liberté dans la création de documents dynamiques, avec, par exemple, la possibilité souvent réclamée de contrôler les données d’un formulaire avant de le soumettre pour traitement

n l’incrustation d’objets génériques garantit l’indépendance du langage vis-à-vis d’inclusions de programmes, images, animations quelconques

Les questions de mise en page ayant ainsi trouvé des solutions satisfaisantes, c’est du côtédu langage HTML même, c’est-à-dire de la description de structure du document, que des limi-tes apparaissent. En effet, deux problèmes sont aujourd’hui soulevés :

• manque d’extensibilité du langageHTML limite la structuration du document aux éléments qu’il offre. Certes des éléments comme DIV et SPAN associés aux attributs class et id sembleraient pouvoir apporter une solution mais ce n’est qu’un pis aller pour masquer le besoin pour l’auteur de pouvoir créer de nouveaux éléments à volonté.

• manque de rigueur au niveau de la syntaxe des documentsSeule une faible portion des documents que l’on trouve aujourd’hui sur le World Wide Web sont syntaxiquement corrects et passent l’épreuve d’un validateur et ceci pour deux raisons : tout d’abord un immense laxisme de la part des visualiseurs comme Netscape Navigator ou Internet Explorer dont un partie non négligeable du code est consacrée au rattrapage des erreurs commises par l’auteur (étiquettes de fermeture oubliées, éléments croisés, imbrications invalides ou attributs manquants, …) mais aussi la piètre qualité des outils de génération actuels



(convertisseurs depuis les traitements de texte et outils graphiques de composition de pages web) qui pour la plupart ont l’indécence de produire du code HTML grossièrement invalide.

C’est pourquoi, le langage XML (eXtensible Markup Language) [15], sorte de voie in-termédiaire entre HTML et SGML, offrant l’extensibilité du langage et la possibilité pour lesvisualiseurs d’être plus stricts dans son interprétation trouve aujourd’hui une telle audience.Avec XML il devient possible de créer ses propres éléments à volonté tout en leur attribuant uneforme de présentation par un langage de feuilles de style comme CSS2 ou XSL (eXtensible StyleLanguage). Après un succès aussi spectaculaire les jours du langage HTML seraient-ils donccomptés?


Annexe A : Jeu de Caractères et Entités HTML

Pour référence, voici le jeu de caractères et d’entités spéciales HTML tiré de [7].

A-1 : Entités de caractères spéciaux

La table suivante liste les entités définies dans le jeu de caractères spéciaux de HTML 4.0(déclaration SGML "-//W3C//ENTITIES Special//EN//HTML")

A-2 : Entités ISO Latin 1

Cette table liste les entités HTML prévues dans l’ensemble ISO Latin 1 du W3C"-//W3C//ENTITIES Latin 1//EN//HTML",

Syntax Description" quotation mark = APL quote& ampersand< less-than sign> greater-than sign&OElig; latin capital ligature OE&oelig; latin small ligature oe&Scaron; latin capital letter S with caron&scaron; latin small letter s with caron&Yuml; latin capital letter Y with diaeresis&circ; modifier letter circumflex accent&tilde; small tilde&ensp; en space&emsp; em space thin space&zwnj; zero width non-joiner&zwj; zero width joiner

&lrm; left-to-right mark&rlm; right-to-left mark– en dash— em dash‘ left single quotation mark’ right single quotation mark&sbquo; single low-9 quotation mark“ left double quotation mark” right double quotation mark&bdquo; double low-9 quotation mark&dagger; dagger&Dagger; double dagger&permil; per mille sign&lsaquo; single left-pointing angle quotation mark&rsaquo; single right-pointing angle quotation mark€ euro sign

Syntax Description

Syntax Description no-break space = non-breaking space¡ inverted exclamation mark¢ cent sign£ pound sign¤ currency sign¥ yen sign = yuan sign¦ broken bar = broken vertical bar§ section sign¨ diaeresis = spacing diaeresis© copyright signª feminine ordinal indicator

« left-pointing double angle quotation mark¬ not sign soft hyphen = discretionary hyphen® registered sign = registered trade mark sign¯ macron = spacing macron = overline° degree sign± plus-minus sign = plus-or-minus sign² superscript two = superscript digit two³ superscript three = superscript digit three´ acute accent = spacing acuteµ micro sign¶ pilcrow sign = paragraph sign

Syntax Description



· middle dot = Georgian comma¸ cedilla = spacing cedilla¹ superscript one = superscript digit oneº masculine ordinal indicator» right-pointing double angle quotation mark¼ vulgar fraction one quarter½ vulgar fraction one half¾ vulgar fraction three quarters¿ inverted question markÀ latin capital letter A with graveÁ latin capital letter A with acuteÂ latin capital letter A with circumflexÃ latin capital letter A with tildeÄ latin capital letter A with diaeresisÅ latin capital letter A with ring aboveÆ latin capital letter AEÇ latin capital letter C with cedillaÈ latin capital letter E with graveÉ latin capital letter E with acuteÊ latin capital letter E with circumflexË latin capital letter E with diaeresisÌ latin capital letter I with graveÍ latin capital letter I with acuteÎ latin capital letter I with circumflexÏ latin capital letter I with diaeresisÐ latin capital letter ETHÑ latin capital letter N with tildeÒ latin capital letter O with graveÓ latin capital letter O with acuteÔ latin capital letter O with circumflexÕ latin capital letter O with tildeÖ latin capital letter O with diaeresis× multiplication signØ latin capital letter O with strokeÙ latin capital letter U with graveÚ latin capital letter U with acuteÛ latin capital letter U with circumflexÜ latin capital letter U with diaeresisÝ latin capital letter Y with acuteÞ latin capital letter THORNß latin small letter sharp s = ess-zedà latin small letter a with graveá latin small letter a with acuteâ latin small letter a with circumflexã latin small letter a with tildeä latin small letter a with diaeresiså latin small letter a with ring aboveæ latin small letter aeç latin small letter c with cedillaè latin small letter e with graveé latin small letter e with acuteê latin small letter e with circumflex

Syntax Descriptionë latin small letter e with diaeresisì latin small letter i with graveí latin small letter i with acuteî latin small letter i with circumflexï latin small letter i with diaeresisð latin small letter ethñ latin small letter n with tildeò latin small letter o with graveó latin small letter o with acuteô latin small letter o with circumflexõ latin small letter o with tildeö latin small letter o with diaeresis÷ division signø latin small letter o with strokeù latin small letter u with graveú latin small letter u with acuteû latin small letter u with circumflexü latin small letter u with diaeresisý latin small letter y with acuteþ latin small letter thorn withÿ latin small letter y with diaeresis

Syntax Description


Annexe B : Exemples Concrets

Cette annexe regroupe quelques exemples concrets de documents HTML. tous ces docu-ments sont conformes à la version stricte de la norme HTML 4.0.

B-1 : Elements Structurels et Formatage de Texte Courant

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”><html> <head> <meta content=”text/html; charset=iso-8859-1” http-equiv=”Content-Type”> <link rev=”made” href=”mailto:Oscar Figueiredo”> <title>Démonstration de Document HTML</title> </head>

<body> <h1>Un Simple Document HTML</h1>

<h2>Eléments Structurels Courants</h2>

<p>Un paragraphe débute par le tag <code><p></code>, les retours à la ligne dans cet élément ne sont pas pris en compte par le visualiseur qui coupe les lignes d’après la taille de la fenêtre. Toutefois l’élément <code><br></code> permet d’insérer des sauts de ligne comme <br> ici<br> Et la suite continue donc à la ligne d’après.</p>

<pre>Dans un paragraphe préformatté comme celui-ci,c’est différent,les sauts à la ligne sont reproduitstels quels, de même que les tabulations comme ici. L’élément <code><pre></code> estplutôt utilisé pour présenter des extraitsde code source.</pre>

<h2>Liste et eléments de style logique</h2>

<p>Ce paragraphe montre l’utilisation des différents éléments de <em>style logique</em> à l’intérieur d’une liste :</p>

<ul> <li>Citation : <cite>Alice au Pays des Merveilles</cite> <li>Code : <code>for (i=0; i<12; i++)</code> <li>Mise en évidence : <em>Important</em> <li>Renforcement : <strong>Nota Bene :</strong> <li>Exemple d’entrée au clavier : Tapez <kbd>htmlchek sugar=1 mydoc.html</kbd> <li>Variable muette : <var>X</var> varie de 0 à 10 </ul>

<hr>

<address> <a href=”mailto:[email protected]”><[email protected]></a> </address> </body></html>



Ce document est présenté de la façon suivante par Netscape Navigator 4.05 :

B-2 : Liens, listes, images, positionnement par feuilles de style

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><html>

<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><meta http-equiv="Content-Style-Type" content="text/css"><link href="maitlo:[email protected]" rev="made"><title>Démonstration de Document HTML</title><style type="text/css">

IMG.vcenter {vertical-align: middle}IMG.vtop {vertical-align: top}

</style></head>

<body><h1>Listes, Figures et Ancres</h1>

<h2><a name="index">Index</a></h2>

<p><ol>

<li><a href="#index">Index</a><li><a href="#listes">Listes</a><li><a href="#images">Images</a>

</ol>

<h2><a name="listes">Listes</a></h2>

<p>L'index est présenté sous forme de liste ordonnée.Voici une liste de définition :

<dl><dt><strong>HTML</strong> : <em>Hypertext Markup Language</em><dd>Le langage utilisé pour écrire les documents sur le

World Wide Web.<dt><strong>SGML</strong> : <em>Standard Generalized Markup Language</em>


<dd>Langage de description de structure de documents...</dl>

<h2><a name="images">Images</a></h2>

<p>Voici une image en ligne avec différents types d'alignement spécifiés par feuille de style :

<ul><li>Alignement vertical <code>top</code> (avec <code>class="vtop"</code>) :

<img class="vtop" src="http://some.server/Icons/new.gif" alt="NEW"><li>Alignement vertical <code>middle</code> (avec <code>class="vcenter"</code>) :

<img class="vcenter" src="http://some.server/Icons/new.gif" alt="NEW"><li>Alignement vertical <code>bottom</code> (avec style en ligne <code>style="vertical-

align: bottom"</code>) :<img style="vertical-align: bottom" src="http://some.server/Icons/new.gif"

alt="NEW"></ul>

<hr>

<address><a href="mailto:[email protected]"><[email protected]></a>

</address></body>

</html>

Netscape Navigator 4.05 en donne la visualisation suivante :



Lynx 2.8 en donne la visualisation suivante :

B-3 : Formulaire de Saisie

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><html>

<head><meta content="text/html; charset: iso-8859-1" http-equiv="Content-Type"><link rev="made" href="mailto:[email protected]"><title>Formulaires : un exemple</title>

</head>

<body><h1>Un formulaire simple...</h1>

<form action="/cgi-bin/handleForm.cgi" method="POST">

<p>Votre Nom : <input type="TEXT" name="nom" size="25">

<p>Décrivez-vous en quelques lignes : <br><textarea name="vous" rows="5" cols="50"></textarea>

<p>Sexe : Masculin <input type="RADIO" name="sexe" value="masculin">Féminin <input type="RADIO" name="sexe" value="feminin">

<p>Avez-vous un ordinateur : <input type="CHECKBOX" name="ordi">

<p>Si oui de quel type :<select name="typeOrdi">

<option value="pc">PC ou Compatible<option>Macintosh<option>Autre

</select>

<p><input type="SUBMIT" value="Envoyer"><input type="RESET" value="Effacer">

</form>

<hr>

<address><a href="mailto:[email protected]"><[email protected]></a>

</address>

</body></html>


Ce formulaire est présentéde la façon suivante par Netscape Navigator.4.05 :

Lynx 2.8 l’affiche comme suit :

B-4 : Tableaux

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><html> <head>

<meta content="text/html; charset=iso-8859-1"><link rev="made" href="mailto:[email protected]">

<title>Tableaux : un exemple</title><style type="text/css">

DIV.table {text-align: center; margin-bottom: 1ex;}

.centered {text-align: center}

.f-right {text-align: right}</style>

</head>

<body>

<h1>Quelques exemples de tableaux...</h1>

<p>Les attributs <code>ROWSPAN</code> et <code>COLSPAN</code> permettent decréer des tableaux complexes :</p>

<div class="table"><table border="1">

<colgroup span="4">

<col width="0*"><col width="0*"><col width="0*"><col width="0*">

</colgroup><tbody>

<tr><th rowspan=2 colspan=2></th><th colspan=2>Moyenne</th>

</tr><tr>

<th>Taille</th><th>Poids</th>

</tr><tr>

<th rowspan=2>Sexe</th><th>Hommes</th><td>1.80 m</td><td>75 kg</td>

</tr><tr>

<th>Femmes</th><td>1.65 m</td><td>55 kg</td>

</tr></tbody>

</table></div>

<p> On peut égaler utiliser les feuilles de style pour ajusterl'alignement des cases du tableau et l'élément <code><BR></code> pourinsérer des retours à la ligne à l'intérieur d'une case :</p>

<div class="table"><table border="1">

<colgroup span="4"><col width="0*"><col width="0*"><col width="0*"><col width="0*">

</colgroup><tbody>


<tr><th></th><th>Très Long Titre 1</th><th>Très Long Titre 2</th><th>Très Long Titre 3</th></tr>

<tr><th class="centered">Centré sur toute la ligne</th><td class="centered">1ère Case</td><td class="centered">2ème Case</td><td class="centered">Encore<br>une autre case</td></tr>

<tr><th>Alignement par case</th><td class="f-right">Aligné à droite</td><td class="centered">Centré</td><td>Par défaut,<br>aligné à gauche</td>

</tr></tbody>

</table></div>

<hr><address>

<a href="mailto:[email protected]"><[email protected]></a></address>

</body></html>

Netscape 2.0 donne la représentation suivante de ce document :



Annexe C : Références Bibliographiques

[1] The World Wide Web Unleashed, John December and Neil Randall, SAMS Pu-blishing.

[2] Inside the World Wide Web, Steven Vaughan-Nichols, Rob Tidrow et al., New Ri-ders

[3] HTTP/1.0 Internet RFC 1945, Informational, Tim Berners-Lee, Roy T. Fielding, and Henrik Frystyk Nielsen (les spécifications les plus récentes du protocole HTTP sont disponibles à l’URL http://www.w3c.org/Protocols/)

[4] The Common Gateway Interface, National Center for Supercomputing Applications (NCSA), http://hoohoo.ncsa.uiuc.edu/cgi/

[5] SGML An Author’s Guide to the Standard Generalized Markup Language, Martin Bryan, Addison Wesley

[6] HTML 2.0 Proposed Standard, RFC 1866, Dan Connoly, HTML Working Group of the Internet Engineering Task Force, http://www.w3.org/hypertext/www/MarkUp/html-spec/

[7] HTML 3.2 Reference Specification, Dave Ragget, W3C, http://www.w3.org/TR/REC-html32.html

[8] The HTML 4.0 Specification, Dave Raggett, Arnaud Le Hors, Ian Jacobs, W3C,http://www.w3.org/TR/REC-html40/

[9] HTML Tables, RFC 1942 Dave Ragget, W3C http://www.ics.uci.edu/pub/ietf/html/rfc1942.txt or other RFC repositories.

[10] The Compendium of HTML Elements, Ron Woodall, http://www.htmlcompendium.org/

[11] Information Technology - Universal Multiple-Octet Coded Character Set (UCS) - Part 1 : Architecture and Basic Multilingual Plane, ISO/IEC 10646-1:993

[12] HTML Validation Service, W3C, http://validator.w3.org/

[13] Cascading Style Sheets, level 2, W3C, http://www.w3.org/TR/PR-CSS2/

[14] Standard ECMA-262, ECMAScript: A general purpose, cross-platform program-ming language, ECMA, http://www.ecma.ch/stand/ecma-262.htm

[15] Extensible Markup Language (XML) 1.0, W3C Recommendation 10-February-1998, http://www.w3.org/TR/1998/REC-xml-19980210