HTM Let Javascript

ESIEA 4ime anne
Module CAAOO
HTML et JavaScript
par
Michel Futtersack
Matre de Confrences en Informatique
Universit Paris 5 Ren Descartes
Reproduction effectue par lESIEA

La reproduction de ce document par tout moyen que ce soit est soumise aux articles
L111-1 et L122-4 du code de la proprit intellectuelle
Premire partie : HTML
NB : Cette partie est un extrait de la spcification W3C de HTML 4.01.J'ai reformul certains passages
ou ajout des explications supplmentaires. Vous trouverez la version franaise complte du document
l'adresse : http://www.la-grange.net/w3c/html4.01/
Table des matires

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
Introduction HTML 4
La structure globale d'un document
Le texte
Les listes
Les tables
Les liens
Les objets, les images et les applets
Les feuilles de style
L'alignement, le style des polices et les rgles horizontales
Les cadres
Les formulaires
Les scripts
Index des lments
Index des attributs
1 Introduction HTML 4
Sommaire
1.
2.
3.
4.
Qu'est-ce que le World Wide Web ?

1. Introduction aux URI
2. Les identifiants de fragment
3. Les URI relatifs
Qu'est-ce que HTML ?
1. Une brve histoire de HTML
HTML 4
1. L'internationalisation
2. L'accessibilit
3. Les tables
4. Les documents composs
5. Les feuilles de styles
6. Les scripts
7. L'impression
La cration de document avec HTML 4
1. Sparer la structure et la prsentation
2. Considrer l'accs universel au Web
1.1 Qu'est-ce que le World Wide Web ?

Le World Wide Web (Web) est un rseau de ressources et d'informations. Le Web repose sur trois
mcanismes pour rendre ces donnes facilement disponibles le plus largement possible :
1.
un systme de nommage uniforme pour leur localisation sur le Web (par exemple, les URI) ;
2.
3.
des protocoles, pour accder des ressources nommes dont on possde l'adresse (par exemple,
HTTP)
l'hypertexte, pour faciliter la navigation entre ces ressources (par exemple, HTML).
1.1.1 Introduction aux URI

Chaque ressource disponible sur le Web -- document HTML, image, squence vido, programme, etc. -possde une adresse reprsente sous la forme d'un identifiant de ressource uniforme ou URI.
Les URI sont forms de trois parties distinctes :
1.
2.
3.
le nom du protocole utilis pour accder la ressource ;

le nom de la machine hbergeant la ressource ;
le nom de la ressource en question, indiqu sous la forme d'un chemin.
Prenons, pour exemple, l'URI qui dsigne la page des rapports techniques du W3C :
http://www.w3.org/TR
Cet URI peut tre compris comme suit : il est disponible via le protocole HTTP, hberg sur la machine
nomme www.w3.org et accessible sur un disque dur de celle-ci par le chemin "/TR". On peut
rencontrer d'autres systmes dans les documents HTML, par exemple, comme "mailto" pour un e-mail ou
"ftp" pour le protocole FTP.
Voici un autre exemple d'URI, qui pointe sur la bote aux lettres d'un utilisateur :
<a href="mailto:jean@quelquepart.com">Jean BON</a>.
Remarque : Vous connaissez probablement le terme URL et non le terme URI . Les URL forment
un sous-ensemble du systme de nommage plus gnral URI.
1.1.2 Les identifiants de fragment
Certains URI se rapportent un endroit dans une ressource. Ce genre d'URI se termine par un caractre
# , suivi par l'identifiant d'une ancre (appel identifiant de fragment ). Par exemple, voici un URI qui
pointe sur l'ancre section_2 de la page top.html :
http://unsite.com/html/top.html#section_2
1.1.3 Les URI relatifs
Un URI relatif ne comporte pas de nom de protocole ni de nom de machine. Son chemin se rapporte
gnralement une ressource disponible sur la mme machine que le document courant. Les liens relatifs
peuvent comporter d'autres composants de chemin relatifs (par exemple, ces caractres .. signifient le
niveau suprieur dans la hirachie dfinie par le chemin) et des identifiants de fragment.
Les URI relatifs se rsolvent en URI complets, en utilisant l'URI de base. Comme exemple de rsolution
d'URI relatif, prenons l'URI de base : "http://www.acme.com/support/intro.html". Dans le balisage de lien
hypertexte ci-dessous :
<a href="fournisseurs.html">Fournisseurs</a>
l'URI relatif se dvelopperait en l'URI complet "http://www.acme.com/support/fournisseurs.html", tandis
que pour le balisage de l'image ci-dessous :
<img src="../icones/logo.gif" alt="logo">
l'URI relatif se dvelopperait en l'URI complet "http://www.acme.com/icones/logo.gif".
En HTML, les URI s'utilisent pour :
relier un autre document ou ressource (voir les lments A et LINK) ;

relier une feuille de style externe ou un script (voir LINK et SCRIPT) ;
inclure une images, un objet ou un applet dans une page (voir les lments IMG, OBJECT,
APPLET et INPUT) ;
crer des images cliquables (voir les lments MAP et AREA) ;
soumettre un formulaire (voir l'lment FORM) ;
crer un cadre (voir les lments FRAME et IFRAME) ;
citer une rfrence externe (voir les lments Q, BLOCKQUOTE, INS et DEL) ;
se reporter aux conventions de mtadonnes qui dcrivent un document (voir l'lment HEAD).
1.2 Qu'est-ce que HTML ?

Publier de l'information en vue d'une distribution mondiale ncessite l'usage d'un langage universellement
comprhensible, d'une sorte de langue maternelle accepte par tous les ordinateurs. Le langage de
publication utilis sur le World Wide Web est le langage de balisage hypertexte HTML.
HTML donne aux auteurs les moyens de :
publier des documents en ligne possdant des titres, du texte, des tables, des listes, des photos,
etc.
ramener des informations en ligne via des liens hypertextes avec un clic ;
concevoir des formulaires pour conduire des transactions avec des services distants, dans le but
de rechercher des informations, de faire des rservations, de prendre des commandes, etc.
inclure des feuilles de calculs, des squences vidos ou sonores et d'autres applications,
directement dans les documents.
1.2.1 Une brve histoire de HTML

Le langage HTML a t dvelopp l'origine par Tim Berners-Lee, alors au CERN, et popularis par le
navigateur Mosaic, dvelopp au NCSA. Pendant les annes 1990, il s'est panoui en profitant de la
croissance explosive du Web. Durant cette priode, HTML s'est agrandi de nombreuses manires
diffrentes. Le Web dpend des auteurs de pages et des diteurs de logiciels qui partagent les mmes
conventions pour HTML. Cela a motiv un travail commun sur les spcifications de HTML.
La plupart des gens sont d'accord sur le fait que les documents HTML devraient fonctionner correctement
sur des plates-formes et des navigateurs diffrents. Parvenir l'interoprabilit permet de baisser les cots
des fournisseurs de contenus parce qu'ils n'ont dvelopper qu'une seule version d'un document. Si cet
effort n'est pas fait, le risque est grand de voir le Web rgresser vers un monde propritaire de formats
incompatibles, en rduisant en fin de compte son potentiel commercial au dtriment de tous ses
participants.
Chaque version HTML a essay de reflter le plus grand consensus entre les acteurs de l'industrie, de
sorte que les investissements consentis par les fournisseurs de contenus ne soient pas gaspills et que
leurs documents ne deviennent en peu de temps illisibles.
Le langage HTML a t dvelopp avec l'intuition que les appareils de toutes sortes devaient pouvoir
utiliser les informations sur le Web : les ordinateurs personnels avec des crans de rsolution et de
profondeur de couleurs variables, les tlphones cellulaires, les appareils portables, les appareils de
synthse et de reconnaissance de la parole, les ordinateurs avec une bande passante faible comme leve,
et ainsi de suite.
1.3 HTML 4
La spcification HTML 4 prolonge HTML avec des mcanismes pour les feuilles de styles, les scripts, les
cadres, l'incorporation des objets, la gestion amliore des critures de droite gauche ou mixtes, les
tables enrichies et les amliorations des formulaires, qui augmentent l'accessibilit pour les personnes
ayant un handicap physique.
1.3.1 L'internationalisation
Cette version de HTML a t conue avec l'aide d'experts dans le domaine de l'internationalisation, de
telle sorte que les documents peuvent tre crits en toutes langues et diffuss partout dans le monde.
L'adoption de la norme ISO/IEC:10646, comme jeu de caractres du document pour HTML, a reprsent
une tape importante. C'est la norme mondiale la plus complte, qui tient compte des problmes
concernant la reprsentation des caractres internationaux, le sens des critures, la ponctuation et autres
particularits des langues mondiales.
Le langage HTML propose maintenant une meilleure gestion des diverses langues humaines l'intrieur
du document. Cela permet une efficacit accrue dans l'indexation des documents par les moteurs de
recherche, la typographie de qualit, la synthse de la parole partir du texte, la csure, etc.
1.3.2 L'accessibilit
Au fur et mesure de la croissance de la communaut du Web et de la diversification des capacits et
aptitudes de ses membres, il devient crucial que les technologies employes soient appropries leurs
besoins spcifiques. Le langage HTML a t conu pour rendre les pages Web plus accessibles ceux qui
ont des dficiences physiques. Les dveloppements de HTML 4 qui ont t inspirs par ce souci de
l'accessibilit comprennent :
une meilleure distinction de la structure et de la prsentation du document, en encourageant pour

cela l'utilisation des feuilles de style au lieu des lments et attributs de prsentation HTML ;
l'amlioration des formulaires, ce qui comprend l'ajout de cls d'accs (access keys), l'ajout de la
possibilit de regrouper smantiquement les contrles des formulaires et celle de regrouper
smantiquement les options de l'lment SELECT et l'ajout des tiquettes actives (active labels)
;
la possibilit de baliser la description textuelle d'un objet incorpor (avec l'lment OBJECT) ;
un nouveau mcanisme d'images cliquables ct client (l'lment MAP ), qui permet aux auteurs
d'intgrer des liens sous forme de texte et d'images ;
l'accompagnement obligatoire des images, incluses avec l'lment IMG, et des images
cliquables, incluses avec l'lment AREA, d'un texte de remplacement ;
la gestion des attributs title et lang pour tous les lments ;
la gestion des lments ABBR et ACRONYM ;
un ventail largi des mdias cibles (tty, braille, etc.) utiliser avec les feuilles de style ;
l'amlioration des tables, en y incluant des lgendes, des regroupements de colonnes et des
mcanismes pour faciliter la restitution non visuelle ;
les descriptions longues des tables, images, cadres, etc.
Les auteurs qui composent des pages en tenant compte de ces notions d'accessibilit ne seront pas
seulement remercis par les utilisateurs intresss mais en retireront aussi d'autres bnfices : les
documents HTML bien conus, qui distinguent la structure de la prsentation, s'adapteront plus
facilement aux nouvelles technologies.
1.3.3 Les tables
Les auteurs disposent maintenant d'un plus grand contrle sur leur structure et leur disposition (par
exemple, les regroupements de colonnes). La possibilit dont disposent les auteurs de spcifier la largeur
des colonnes permet aux agents utilisateurs (navigateurs web ou autres) d'afficher les donnes de table
progressivement (au fur et mesure du chargement), plutt que d'attendre le chargement entier de la table
avant de pouvoir la restituer.
1.3.4 Les documents composs
Le langage HTML offre maintenant une structure standard pour l'incorporation d'objets mdia et
d'applications gnriques dans les documents HTML. L'lment OBJECT (de mme que ses anctres, les
lments plus spcifiques IMG et APPLET) fournit le moyen d'inclure des images, des squences vido,
de l'audio, des mathmatiques, des applications spcialises et d'autres objets dans un document. Il
permet aussi aux auteurs de spcifier une hirarchie de restitutions de remplacement aux agents
utilisateurs qui ne grent pas certaines restitutions particulires.
1.3.5 Les feuilles de styles
Les feuilles de styles simplifient le balisage HTML et soulagent grandement HTML des responsabilits
de la prsentation. Elles donnent aux auteurs comme aux utilisateurs le contrle de la prsentation des
documents -- informations sur les polices de caractres, alignement, couleurs, etc.
Les informations de style peuvent tre spcifies pour un lment ponctuel ou pour des groupes
d'lments. Elles peuvent se trouver l'intrieur du document HTML ou dans une feuille de styles
externe.
Les mcanismes, qui associent une feuille de styles un document, sont indpendants du langage de
feuille de style.
Avant l'apparition des feuilles de styles, les auteurs disposaient d'un contrle limit sur la restitution des
pages. HTML 3.2 comprenait un certain nombre d'attributs et d'lments permettant un contrle de
l'alignement, de la taille de la police de caractres et de la couleur du texte. Les auteurs abusaient
galement de tables et d'images pour la mise en page. Le temps relativement long ncessaire pour que les
utilisateurs mettent jour leurs navigateurs implique que ces usages vont perdurer encore pendant un
certain temps. Cependant, puisque les feuilles de styles offrent des moyens de prsentation plus puissants,
le World Wide Web Consortium fera graduellement disparatre nombre d'lments et d'attributs de
prsentation HTML. Tout au long de ce document, les lments et attributs concerns sont marqus
comme dconseills . Ils sont gnralement accompagns d'exemples montrant comment parvenir au
mme rsultat en utilisant d'autres lments ou les feuilles de styles.
1.3.6 Les scripts
Au travers de scripts, les auteurs peuvent concevoir des pages Web dynamiques (par exemple, des
formulaires intelligents qui ragissent au cours de leur remplissage par l'utilisateur) et utiliser HTML
comme support d'applications en rseau.
Les mcanismes fournis pour associer HTML et scripts sont indpendants du langage de script.
1.3.7 L'impression
Les auteurs voudront parfois aider l'utilisateur dans l'impression d'autres documents, en plus du document
courant. Lorsque des documents font partie d'un ensemble, on peut dcrire leurs relations en utilisant
l'lment HTML LINK ou encore en utilisant le cadre de description des ressources (RDF) du W3C .
1.4 La cration de document avec HTML 4
Nous recommandons aux auteurs et aux dveloppeurs d'observer les principes gnraux suivants dans
leur travail avec HTML 4.
1.4.1 Sparer la structure et la prsentation
Le langage HTML trouve ses racines dans SGML qui a toujours t un langage destin la spcification
d'un balisage de structures. Avec la maturit, les lments et attributs de prsentation HTML sont de plus
en plus remplacs par d'autres mcanismes, en particulier les feuilles de styles. L'exprience montre que
la sparation de la structure d'un document de sa prsentation permet de rduire les cots de diffusion
vers un grand ventail de plates-formes, de mdias, etc., et facilite la mise jour des documents.
1.4.2 Considrer l'accs universel au Web
De manire rendre le Web plus accessible tous, notamment aux personnes avec un handicap physique,
les auteurs devraient prendre en compte la faon dont leurs documents seront interprts sur une grande
varit de plates-formes : les navigateurs commands la voix, les lecteurs en Braille, etc. Nous ne
demandons pas aux concepteurs de brider leur crativit, seulement que leurs crations intgrent les
restitutions alternatives. HTML propose nombre de mcanismes cet effet (par exemple, les attributs alt,
accesskey, etc.)
En outre, les auteurs devraient garder l'esprit que leurs documents peuvent aussi toucher des publics
loigns, dont les ordinateurs sont configurs trs diffremment. Pour qu'un document soit correctement
interprt, les auteurs devraient y inclure des informations sur la langue naturelle et le sens d'criture, sur
l'encodage employ et d'autres aspects relatifs l'internationalisation.
1.4.3 Aider les agents utilisateurs dans la restitution progressive
En concevant soigneusement leurs tables et en faisant appel aux nouvelles fonctionnalits des tables de
HTML 4, les auteurs peuvent aider les agents utilisateurs (navigateurs Web ou autres) restituer les
documents plus rapidement. Les auteurs peuvent apprendre concevoir des tables pour leur restitution
progressive (voir l'lment TABLE).
2 La structure globale d'un document HTML

Sommaire
1.
2.
3.
4.
Introduction la structure d'un document HTML

Les informations de version HTML
L'en-tte du document
1. L'lment HEAD
2. L'lment TITLE
3. L'attribut title
4. Les mtadonnes
Le corps du document
1. L'lment BODY
2. Les identifiants des lments : les attributs id et class
3. Les lments de bloc et les lments en-ligne
4. Le regroupement des lments : les lments DIV et SPAN
5. Les titres : les lments H1, H2, H3, H4, H5 et H6
6. L'lment ADDRESS
2.1 Introduction la structure d'un document HTML

Un document HTML 4 est un fichier texte qui se compose de trois parties :
1.
2.
3.
une ligne contenant les informations de version HTML ;

une section en-tte dclarative (dlimite par l'lment HEAD) ;
un corps, qui contient le contenu effectif du document. Le corps peut tre implant par l'lment
BODY ou l'lment FRAMESET.
Des blancs (les espaces, les sauts de ligne, les tabulations et les commentaires) peuvent survenir avant ou
aprs chaque section.
Voici un exemple de document HTML simple :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mon premier document HTML</title>
</head>
<body>
<p>Bonjour tout le monde !
</body>
</html>
Ce texte peut tre ralis avec n'importe quel diteur de texte et sauvegard dans un fichier toto.htm ou
toto.html. Ce fichier peut ensuite tre ouvert dans un navigateur Web (menu Fichier->Ouvrir un fichier)
qui fera le rendu ("rendering") de ce document HTML en une page Web.
Il est beaucoup plus commode d'utiliser un logiciel spcialis pour l'dition de pages HTML. Il en existe
de nombreux, dont les plus connus sont FrontPage de Microsoft et DreamWeaver de Macromdia. Je
vous recommande fortement d'utiliser le logiciel gratuit et multiplateforme KOMPOSER (anciennement
appel Nvu) (http://sourceforge.net/projects/kompozer/) qui fait partie du projet Mozilla. Quand on cr
un nouveau document HTML, la structure de base (informations de version, balises <html><head>, etc)
est gnre automatiquement. Voici une copie d'cran montrant le source ci-dessus.
Remarquez que les balises sont en minuscules. HTML n'est pas sensible la casse. Par contre, le
langage XHTML, qui va supplanter de plus en plus HTML, est sensible la casse : les balises
doivent tre crites en minuscules. Les diteurs HTML rcents crivent donc par dfaut les balises en
minuscules, ce qui permettra par la suite de traduire plus facilement les documents HTML en documents
XHTML.
2.2 Les informations de version HTML
Un document HTML valide dclare la version HTML qui est utilise dans le document. La dclaration
de type de document indique la dfinition de type de document (DTD) en vigueur pour le document.
HTML 4.01 spcifie trois DTD et les auteurs doivent donc inclure l'une des dclarations de type de
document suivantes dans leurs documents. Les DTD varient selon les lments qui y sont grs.
Le DTD HTML 4.01 strict comprend tous les lments et attributs qui ne sont pas dconseills
ou bien ceux qui n'apparaissent pas dans les documents avec jeu d'encadrement. Pour les
documents qui utilisent ce DTD, prendre la dclaration de type de document suivante :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Le DTD HTML 4.01 transitoire inclut la totalit du DTD strict auquel se rajoutent les lments
et attributs dconseills (la plupart d'entre eux concernant la prsentation visuelle). Pour les
documents qui utilisent ce DTD, prendre la dclaration de type de document suivante :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
Le DTD HTML 4.01 de jeu d'encadrement inclut la totalit du DTD transitoire plus les cadres.
Pour les documents qui utilisent ce DTD, prendre la dclaration de type de document suivante :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">
2.3 L'en-tte du document
2.3.1 L'lment HEAD
L'lment HEAD contient des informations sur le document courant, tels que son titre, des mots-cls que
les moteurs de recherche peuvent exploiter et d'autres donnes qui ne sont pas considres comme faisant
partie du contenu du document.
2.3.2 L'lment TITLE

Chaque document HTML doit avoir un lment TITLE dans la section HEAD.
Les auteurs devraient utiliser l'lment TITLE pour identifier le contenu d'un document. tant donn que
les utilisateurs consultent souvent les documents hors de leur contexte, les auteurs devraient fournir des
titres en fonction du contexte. Ainsi, au lieu d'un titre comme Introduction , qui n'apporte aucune
information sur le contexte, l'auteur devrait plutt produire un titre tel que Introduction l'apiculture au
Moyen-ge .
Pour des questions d'accessibilit, les agents utilisateurs doivent toujours rendre le contenu de l'lment
TITLE disponible aux utilisateurs (y compris les lments TITLE qui apparaissent dans les cadres). Les
mcanismes pour ce faire dpendent de l'agent utilisateur (par exemple, une lgende, un titre sonore).
Les titres peuvent contenir des entits de caractres (pour les caractres accentus, les caractres
spciaux, etc.), mais aucun balisage (y compris les commentaires). Voici un exemple de titre de
document :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<html>
<head>
<title>Une tude sur la dynamique des populations</title>
... autres lments d'en-tte...
</head>
<body>
... corps du document...
</body>
</html>
2.3.3 L'attribut title
Cet attribut fournit des informations consultatives concernant l'lment sur lequel il se place.
la diffrence de l'lment TITLE, qui produit une information concernant un document entier et qui ne
peut apparatre qu'une fois, l'attribut title peut annoter un nombre quelconque d'lments. Veuillez
consulter la dfinition de l'lment pour vrifier si celui-ci gre cet attribut.
Les agents utilisateurs peuvent restituer les valeurs des attributs title de diverses faons. Les navigateurs
visuels peuvent, par exemple, afficher leur valeur sous la forme d'une infobulle [ndt. tool tip] (un bref
message qui apparat quand le dispositif de pointage reste au-dessus d'un objet). Dans le mme ordre
d'ide, les agents utilisateurs sonores peuvent vocaliser les informations de titre. Par exemple, le
placement de l'attribut sur un lien permet aux agents utilisateurs (visuels et non-visuels) d'indiquer
l'utilisateur la nature de la ressource relie :
...un texte...
Voici une photo
<a href="http://quelquepart.com/trucsuper.gif" title="Moi faisant de la plonge">
de moi faisant de la plonge l't dernier
</a>
2.3.4 Les mtadonnes
L'lment META
On peut utiliser l'lment META pour identifier les proprits d'un document (par exemple, l'auteur, la
date d'expiration, une liste de mots-cls, etc.) et assigner des valeurs ces proprits.
Chaque lment META spcifie un couple proprit/valeur. L'attribut name identifie la proprit et
l'attribut content en spcifie la valeur.
Par exemple, la dclaration suivante fixe une valeur la proprit Auteur :
<meta name="Auteur" content="Dave Raggett">
On peut utiliser l'attribut lang avec l'lment META pour spcifier la langue de la valeur de l'attribut
content. Ceci permet aux synthtiseurs de parole d'appliquer des rgles de prononciation en fonction de la
langue.
Dans cet exemple, le nom de l'auteur est annonc comme tant en franais :
<meta name="Auteur" lang="fr" content="Arnaud Le Hors">
L'lment META et les en-ttes HTTP

L'attribut http-equiv, qui peut s'utiliser la place de l'attribut name, a un sens particulier quand les
documents sont ramens via le protocole de transfert hypertexte HTTP. Les serveurs HTTP peuvent
utiliser le nom de proprit spcifi par l'attribut http-equiv pour crer un en-tte de style dans la rponse
HTTP.
L'exemple suivant de dclaration META :
<meta http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT">
celle-ci donnera l'en-tte HTTP :
Expires: Tue, 20 Aug 1996 14:25:27 GMT
Cette facult peut tre utilise par les caches pour dterminer quand aller chercher une nouvelle copie du
document en question.
L'lment META et les moteurs de recherche
Une utilisation courante de l'lment META consiste spcifier des mots-cls qu'un moteur de recherche
peut utiliser pour amliorer la pertinence du rsultat d'une recherche. Quand des lments META
fournissent des informations en plusieurs langues sur un document, les moteurs de recherche peuvent
oprer un filtrage, en fonction de l'attribut lang, pour afficher le rsultat de la recherche selon les
prfrences de langue de l'utilisateur. Par exemple :

<meta name="keywords" lang="en-us"
content="vacation, Greece, sunshine">

<meta name="keywords" lang="en"
content="holiday, Greece, sunshine">

<meta name="keywords" lang="fr"
content="vacances, Grèce, soleil">
On peut galement accrotre l'efficacit des moteurs de recherche en utilisant l'lment LINK pour
spcifier des liens vers les traductions du document en d'autres langues, des liens vers les versions du
document pour d'autres mdias (par exemple, un fichier PDF) et, si le document fait partie d'une
collection de documents, des liens vers le point de dpart adquat partir duquel se dplacer dans la
collection.
L'lment META et les informations par dfaut
On peut utiliser l'lment META pour spcifier les informations par dfaut sur un document dans les cas
suivants :
le langage de script par dfaut ;

le langage de feuille de style par dfaut ;
l'encodage de caractres du document.
L'exemple suivant spcifie l'encodage de caractres du document comme tant "ISO-8859-5" :

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-5">
10
2.4 Le corps du document

2.4.1 L'lment BODY
Le corps du document reprsente le contenu du document. Le contenu peut tre prsent par un agent
utilisateur de diverses faons. Par exemple, pour les navigateur visuels, on peut assimiler le corps un
canevas dans lequel s'inscrit le contenu : le texte, les images, les couleurs, les graphiques, etc. Pour les
agents utilisateurs sonores, le mme contenu peut tre parl. Puisque les feuilles de style sont dsormais
le moyen prfr de spcifier la prsentation d'un document, les attributs de prsentation de l'lment
BODY sont maintenant dconseills.
EXEMPLE DCONSEILL :
Le fragment HTML suivant illustre l'emploi d'attributs dconseills. Il fixe une couleur blanche pour
l'arrire-plan du canevas, une couleur noire pour le texte d'avant-plan et, pour les liens hypertextes, une
couleur rouge initiale, une couleur fuchsia l'activation et une couleur marron une fois ceux-ci visits.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Une tude de la dynamique de la population</title>
</head>
<BODY bgcolor="white" text="black"
link="red" alink="fuchsia" vlink="maroon">
</body>
</html>
On pourrait obtenir le mme effet en utilisant une feuille de style, ainsi :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<html>
<head>
<style type="text/css">
body { background: white; color: black}
a:link { color: red }
a:visited { color: maroon }
a:active { color: fuchsia }
</style>
</head>
<body>
</body>
</html>
L'utilisation d'une feuille de style externe (relie) est plus souple et permet de changer la prsentation
sans revoir la source du document HTML :
<html>
<head>
<LINK rel="stylesheet" type="text/css" href="stylemalin.css">
</head>
<body>
</body>
</html>
11
Les documents qui contiennent des jeux d'encadrement remplacent l'lment BODY par l'lment
FRAMESET.Consulter la section 10 sur les cadres pour plus d'informations.
2.4.2 Les identifiants des lments : les attributs id et class
L'attribut id a plusieurs rles dans HTML :
comme slecteur dans une feuille de style ;

comme ancre cible de liens hypertextes ;
comme moyen d'appeler un lment particulier partir d'un script ;
comme nom d'un lment OBJECT dclar ;
pour un traitement universel par les agents utilisateurs (par exemple, pour identifier les champs
lors de l'extraction des donnes des pages HTML pour peupler une base de donnes, pour
traduire des documents HTML dans d'autres formats, etc.).
L'attribut class, au contraire, assigne un ou plusieurs noms de classe un lment ; on peut dire de
l'lment qu'il appartient ces classes. Un nom de classe peut tre partag par plusieurs instances
d'lments. L'attribut class a plusieurs rles dans HTML :
comme slecteur dans une feuille de style (quand l'auteur souhaite assigner une information de
style un ensemble d'lments) ;
pour un traitement universel par les agents utilisateurs .
Dans l'exemple suivant, on utilise l'lment SPAN en conjonction avec les attributs id et class pour
baliser les messages d'un document. Les messages apparaissent la fois en version anglaise et en version
franaise.

<p><span id="msg1" class="info" lang="en">Variable declared twice</span>
<p><span id="msg2" class="warning" lang="en">Undeclared variable</span>
<p><span id="msg3" class="erreur" lang="en">Bad syntax for variable name</span>

<p><span id="msg1" class="info" lang="fr">Variable déclarée deux fois</span>
<p><span id="msg2" class="warning" lang="fr">Variable indéfinie</span>
<p><span id="msg3" class="erreur" lang="fr">Erreur de syntaxe pour variable</span>
Les rgles de style CSS suivantes indiqueraient aux agents utilisateurs
informatifs en vert, ceux d'avertissement en jaune et ceux d'erreur en rouge :
d'afficher les messages
span.info { color: green }

span.warning { color: yellow }
span.erreur { color: red }
Remarquez que le nom "msg1" franais et le nom "msg1" anglais ne peuvent pas apparatre dans le mme
document parce qu'ils partagent la mme valeur d'attribut id. Les auteurs peuvent trouver d'autres emplois
pour l'attribut id pour affiner la prsentation des messages individuels, en faire des ancres cibles, etc.
Les lments HTML peuvent presque tous recevoir un identifiant et une information de classe.
Supposons, par exemple, que nous rdigions un document sur un langage de programmation. Ce
document doit inclure un certain nombre d'exemples prformats. On utilise l'lment PRE pour formater
ces exemples. On assigne aussi une couleur d'arrire-plan (verte) tous les lments PRE appartenant la
classe "exemple".
<head>
<title>... titre du document ...</title>
pre.exemple { background : green }
</style>
</head>
12
<body>
<pre class="exemple" id="exemple-1">
...exemple de code ici...
</pre>
</body>
En spcifiant l'attribut id de cet exemple, on peut (1) crer un hyperlien vers celui-ci et (2) surclasser
l'information de style de la classe par une information de style sur l'instance.
2.4.3 Les lments de bloc et les lments en-ligne
Certains lments HTML, qui peuvent apparatre dans l'lment BODY, sont dits tre de niveau bloc
[block-level] tandis que d'autres sont dits de niveau en-ligne [inline] (aussi connu comme sous le nom
niveau texte ). La distinction se fondent sur plusieurs notions :
Le modle de contenu
De manire gnrale, les lments de bloc peuvent contenir des lments en-ligne et d'autres
lments de bloc. Et de manire gnrale, les lments en-ligne ne peuvent contenir que des
donnes et d'autres lments en-ligne. L'ide inhrente cette distinction structurelle, c'est que
les lments de bloc crent des structures plus grandes que les lments en-ligne.
Le formatage
Par dfaut, les lments de bloc sont formats diffremment des lments en-ligne. En gnral,
les lments de bloc commencent sur une nouvelle ligne, et non les lments en-ligne. Pour des
informations concernant les blancs, les sauts de ligne et le formatage des blocs, veuillez
consulter la section sur le texte.
2.4.4 Le regroupement des lments : les lments DIV et SPAN
Les lments DIV et SPAN, en conjonction avec les attributs id et class, offrent un mcanisme gnrique
qui rajoute de la structure aux documents. Ces lments dfinissent le contenu comme tant en-ligne
(SPAN) ou de bloc (DIV) mais n'imposent aucune autre expression de prsentation sur le contenu. Ainsi,
les auteurs peuvent utiliser ceux-ci en conjonction avec les feuilles de style, l'attribut lang, etc., pour
exploiter HTML selon leurs besoins et leurs gots propres.
Supposons, par exemple, que nous voulions gnrer un document HTML partir d'une base de donnes
des informations de clientle. Comme HTML ne comprend pas d'lments identifiant des objets tels que
client , numro de tlphone , adresse e-mail , etc., nous utilisons les lments DIV et SPAN
pour obtenir les effets de structure et de prsentation dsirs. Nous pourrions utiliser l'lment TABLE
comme suit pour structurer les informations :


<div id="client-boyera" class="client">
<p><span class="client-title">Informations sur le client :</span>
<table class="client-data">
<tr><th>Nom : <td>Boyera</tr>
<tr><th>Prnom : <td>Stphane</tr>
<tr><th>Tl. : <td>(212) 555-1212</tr>
<tr><th>E-mail: <td>sb@foo.org</tr>
</table>
</div>
<div id="client-lafon" class="client">
<p><span class="client-title">Informations sur le client :</span>
<table class="client-data">
<tr><th>Nom : <td>Lafon</tr>
<tr><th>Prnom : <td>Yves</tr>
<tr><th>Tl. : <td>(617) 555-1212</tr>
<tr><th>E-mail : <td>yves@coucou.com</tr>
</table>
</div>
13
Par la suite, nous pourrons facilement rajouter des dclarations de feuilles de style pour affiner la
prsentation de ces entres de la base de donnes.
Les agents utilisateurs visuels placent en gnral un saut de ligne avant et aprs l'lment DIV, par
exemple :
<p>aaaaaaaaa<div>bbbbbbbbb</div><div>ccccc<p>ccccc</div>
ce qui est typiquement restitu par :
aaaaaaaaa
bbbbbbbbb
ccccc
ccccc
2.4.5 Les titres : les lments H1, H2, H3, H4, H5 et H6
Un lment de titre dcrit brivement le sujet de la section qu'il introduit. Les agents utilisateurs peuvent
utiliser les informations des titres pour, par exemple, construire automatiquement la table des matires du
document.
Il existe six degrs de titrage dans HTML, l'lment H1 reprsentant le titre le plus important et H6 le
moins important. Les navigateurs visuels restituent gnralement les titres les plus importants dans un
corps plus grand que les moins importants.
L'exemple suivant montre comment employer l'lment DIV pour associer un titre la section du
document qui le suit. De cette manire, on peut dfinir un style pour la section (colorer l'arrire-plan,
fixer la police, etc.) au moyen d'une feuille de style.
<div class="section" id="elephants-foret" >
<h1>Les lphants des forts</h1>
<p>Dans cette partie, nous abordons le sujet moins connu
des lphants des forts.
...la section continue...
<div class="sous-section" id="habitat-foret" >
<h2>L'habitat</h2>
<p>Les lphants des forts ne vivent pas
dans les arbres mais au milieu d'eux.
...la sous-section continue...
</div>
</div>
On peut dcorer cette structure en utilisant les informations de style suivantes :
<head>
<title>... titre du document...</title>
div.section { text-align: justify; font-size: 12pt}
div.sous-section { text-indent: 2em }
h1 { font-style: italic; color: green }
h2 { color: green }
</style>
</head>
2.4.6 L'lment ADDRESS
Les auteurs peuvent employer l'lment ADDRESS pour fournir les informations de contact du document
ou d'une partie essentielle de celui-ci, comme un formulaire. Cet lment apparat souvent au dbut ou
la fin du document.
Par exemple, une page du site Web du W3C relative HTML pourrait contenir les informations de
contact suivantes :
<address>
<a href="../People/Raggett/">Dave Raggett</a>,
<a href="../People/Arnaud/">Arnaud Le Hors</a>,
personnes contacter pour l'<a href="activite">activit HTML du W3C</a><br>
$Date : 1999/12/24 23:07:14 $
</address>
14
3 Le texte
Sommaire
1.
2.
3.
Les blancs
Le texte structur
1. Les phrases : les lments EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE,
ABBR, et ACRONYM
2. Les citations : les lments BLOCKQUOTE et Q
La restitution des citations
3. Les indices et les exposants : les lments SUB et SUP
Les lignes et les paragraphes
1. Les paragraphes : l'lment P
2. Le contrle des coupures de ligne
3.1 Les blancs

Le jeu de caractres du document comprend une grande varit de caractres blancs. La plupart d'entre
eux sont des lments typographiques, qui sont utiliss dans certaines applications pour produire un effet
particulier d'espacement visuel. En HTML, seuls les caractres suivants sont dfinis comme caractres
blancs :
espace ASCII ( )

tabulation ASCII ( )
saut de page ASCII ()
espace sans chasse ()
3.2 Le texte structur

3.2.1 Les phrases : les lments EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR et
ACRONYM
Les lments de phrase ajoutent une information structurelle des portions du texte. L'interprtation
habituelle de ces lments de phrase est la suivante :
EM :
Indique une mise en exergue.
STRONG :
Indique une mise en exergue plus forte.
CITE :
Contient un extrait ou une rfrence vers une autre source.
DFN :
Indique qu'il s'agit de l'instance dfinissante du terme englob.
CODE :
Dsigne un fragment de code informatique.
SAMP:
Dsigne un exemple des sorties d'un programme, d'un script, etc.
KBD:
Indique un texte que doit saisir l'utilisateur.
VAR:
Indique l'instance d'une variable ou le paramtre d'un programme.
ABBR:
Indique une forme abrge (par exemple, WWW , HTTP , i.e. , etc.).
ACRONYM:
Indique un acronyme (par exemple, radar , LAN , etc.).
Les lments EM et STRONG s'utilisent pour mettre en exergue une portion du texte. Les autres
lments de phrase ont une signification particulire pour un document dans un contexte technique. Ces
exemples illustrent quelques-uns de ces lments de phrase :
15
Comme le disait <cite>le Gnral De GAULLE</cite>,

<q lang="fr">Je vous ai compris !</q>
Pour plus d'informations, voir <cite>[ISO-0000]</cite>.
Veuillez dsormais indiquer, dans toute correspondance,
la rfrence suivante: <strong>1-234-55</ strong >
La prsentation des lments de phrase dpend de l'agent utilisateur. En gnral, les agents utilisateurs
visuels prsentent le texte de l'lment EM en italique et celui de l'lment STRONG en gras. Les agents
utilisateurs vocaux, eux, devraient changer les paramtres de la synthse vocale, tels que le volume, la
hauteur ou le timbre.
Les lments ABBR et ACRONYM permettent aux auteurs d'indiquer clairement les occurrences des
abrviations et des acronymes. En effet, les langues occidentales ont une grande utilisation des
acronymes comme UFO , ONU et bit , ainsi que des abrviations comme Mme. , SA ou
etc. . Le chinois et le japonais emploient tous deux des mcanismes d'abrviation analogues, selon
lequel un nom long est dsign par la suite par un sous-ensemble des caractres Han qui le constituent. Le
balisage de ces structures fournit une aide prcieuse aux agents utilisateurs et aux outils tels que les
vrificateurs d'orthographe, les synthtiseurs de parole, les systmes de traduction automatique et les
moteurs de recherche.
Le contenu des lments ABBR et ACRONYM spcifient l'expression abrge telle qu'elle apparatrait
normalement dans le cours du texte. L'attribut title de ces lments peut tre utilis pour donner la forme
complte ou dveloppe de l'expression.
Voici quelques exemples d'utilisation de l'lment ABBR :
<p>
<abbr title="World Wide Web">WWW</abbr>
<abbr lang="fr"
title="Société Nationale des Chemins de Fer">
SNCF
</abbr>
<abbr lang="es" title="Doña">Doña</abbr>
<abbr lang="en" title="Abbreviation">abbr.</abbr>
3.2.2 Les citations : les lments BLOCKQUOTE et Q
Ces deux lments dsignent une citation [quotation]. L'lment BLOCKQUOTE indique une citation
longue (avec un contenu de type bloc) et l'lment Q est cens tre utilis pour des citations courtes (avec
un contenu de type en-ligne) ne ncessitant pas un saut de paragraphe.
Cet exemple montre le formatage d'un extrait de Les deux tours , de J.R.R. Tolkien, sous forme d'un
bloc de citation :
<blockquote cite="http://www.mycom.com/tolkien/les%20deux%20tours.html">
<p>Ils allaient en file indienne, courant comme des limiers aprs un puissant fumet,
une lueur de convoitise dans leurs yeux. L'immense trane des Orques en marche
traait son vilain sillon presque droit vers l'ouest ; l'herbe douce du Rohan avait
t crase et noircie sur leur passage.<p>
</ blockquote >
La restitution des citations
Les agents utilisateurs visuels restituent en gnral l'lment BLOCKQUOTE sous la forme d'un bloc de
texte en retrait.
Les agents utilisateurs visuels doivent s'assurer que le contenu d'un lment Q soit restitu avec des
marques de citation englobantes. Les auteurs ne devraient pas placer de marque de citation au dbut ni
la fin du contenu d'un lment Q.
Les agents utilisateurs devraient ajouter les marques de citation en fonction de la langue (voir l'attribut
lang). Plusieurs langues adoptent des styles diffrents pour les marques de citation extrieures ou
intrieures (imbriques), ce que devrait respecter les agents utilisateurs .
Les exemples ci-dessous illustrent des citations imbriques avec l'lment Q.
John said, <Q lang="en-us">I saw Lucy at lunch, she told me
<q lang="en-us">Mary wants you
to get some ice cream on your way home.</q> I think I will get
16
some at Ben and Jerry's, on Gloucester Road.</q>

Dans la mesure o les deux citations sont en amricain, les agents utilisateurs devraient les restituer
convenablement, par exemple en rajoutant des guillemets simples autour de la citation intrieure et des
guillemets doubles autour de la citation extrieure :
John said, "I saw Lucy at lunch, she told me 'Mary wants you
to get some ice cream on your way home.' I think I will get some
at Ben and Jerry's, on Gloucester Road."
3.2.3 Les indices et les exposants : les lments SUB et SUP
Plusieurs critures (par exemple, le franais) requirent une criture en lettres suprieures ou en lettres
infrieures pour leur restitution correcte. On devrait baliser les textes en lettres infrieures avec l'lment
SUB et ceux en lettres suprieures avec SUP.
H<sub>2</sub>O
E = mc<sup>2</sup>
<span lang="fr">M<sup>lle</sup> Dupont</span>
3.3 Les lignes et les paragraphes
Les auteurs dcoupent habituellement leurs ides et leurs arguments en paragraphes successifs. Cette
organisation des informations en paragraphes n'est pas touche par la manire dont les paragraphes sont
prsents : le contenu du paragraphe, qu'il soit entirement justifi ou seulement justifi gauche, est
toujours le mme.
Le balisage HTML qui dfinit un paragraphe est clair : l'lment P contient un paragraphe.
La reprsentation visuelle des paragraphes n'est pas si simple. Un certain nombre d'aspects doivent tre
pris en compte, la fois esthtiques et techniques :
la gestion des blancs ;

les coupures de ligne et les retours la ligne ;
la justification ;
les csures ;
3.3.1 Les paragraphes : l'lment P

L'lment P correspond un paragraphe. Il ne peut pas contenir d'lments de type bloc (mme pas un
autre lment P).
On dconseille vivement aux auteurs d'utiliser des lments P vides. Les agents utilisateurs devraient
ignorer de tels lments P vides.
3.3.2 Le contrle des coupures de ligne
On dfinit une coupure de ligne comme tant un retour chariot (CR) , un saut de ligne
(LF)
ou la paire des deux (CRLF). Toutes les coupures de ligne sont des caractres blancs.
Forcer la coupure de ligne : l'lment BR
L'lment BR coupe (interrompt) la ligne de texte courante.
17
4 Les listes
Sommaire
1.
2.
3.
Introduction aux listes

Les listes non-ordonnes (UL), les listes ordonnes (OL) et les items de liste (LI)
Les listes de dfinitions : les lments DL, DT et DD
4.1 Introduction aux listes

HTML offre aux auteurs plusieurs moyens pour tablir des listes d'informations. Toutes les listes doivent
contenir un lment de liste ou plus. Celles-ci peuvent prsenter :
des informations non-ordonnes ;

des informations ordonnes ;
des dfinitions.
Par exemple, cette liste qui prcde est une liste non-ordonne qui a t cre l'aide de l'lment UL :
<ul>
<li>des informations non-ordonnées ;
<li>des informations ordonnées ;
<li>des définitions.
</ul>
La liste ordonne, qui est cre l'aide de l'lment OL, devrait contenir des informations dont
l'ordonnancement revt une certaine importance, comme dans une recette de cuisine :
1.
2.
3.
4.
Mlanger tous les ingrdients secs ;

Y verser les ingrdients humides ;
Remuer pendant 10 minutes ;
Cuire pendant 1 heure dans un four 300 degrs.
La liste de dfinitions, qui est cre l'aide de l'lment DL, consiste gnralement en une succession de
couples terme/dfinition (mme si les listes peuvent avoir d'autres usages). Ainsi, on pourrait utiliser une
liste de dfinitions pour la publicit d'un produit :
Un cot moindre
La nouvelle version de ce produit cote infiniment moins que la prcdente !
Encore plus facile utiliser
Nous avons apport des modifications au produit qui facilitent l'extrme son utilisation !
Sans danger pour les petits
Vous pouvez laisser vos enfants dans une pice, seuls avec ce produit, et ils ne se blesseront pas
(sans garantie toutefois).
une liste qui serait dfinie en HTML par :
<dl>
<dt><strong>Un coût moindre</strong>
<dd>La nouvelle version de ce produit coûte infiniment moins
que la précédente !
<dt><strong>Encore plus facile à utiliser</strong>
<dd>Nous avons apporté des modifications au produit
qui facilitent à l'extrême son utilisation !
<dt><strong>Sans danger pour les petits</strong>
<dd>Vous pouvez laisser vos enfants dans une pièce,
seuls avec ce produit, et ils ne se blesseront pas (sans garantie toutefois).
</dl>
On peut galement imbriquer les listes et les utiliser ensemble, comme dans l'exemple suivant qui montre
une liste de dfinitions contenant une liste non-ordonne (les ingrdients) et une liste ordonne (la marche
suivre) :
18
Les ingrdients :
100 g de farine
10 g de sucre
1 tasse d'eau
2 ufs
sel, poivre
La marche suivre :
1.
2.
3.
4.
Mlanger tous les ingrdients secs ;

Y verser les ingrdients humides ;
Remuer pendant 10 minutes ;
Cuire pendant 1 heure dans un four 300 degrs.
Remarques :
On peut varier la recette en y rajoutant des raisins secs.
La prsentation exacte des trois listes dpend de l'agent utilisateur. Nous dcourageons les auteurs
d'utiliser les listes simplement comme un moyen pour placer le texte en retrait. C'est une affaire de style
qui est du ressort des feuilles de style.
4.2 Les listes non-ordonnes (UL), les listes ordonnes (OL) et les items de liste (LI)
Les listes ordonnes et non-ordonnes sont restitues de manire identique, l'exception de la
numrotation des items des listes ordonnes par les agents utilisateurs visuels. Les agents utilisateurs
peuvent prsenter ces numros de diverses faons. Les listes non-ordonnes ne sont pas numrotes.
Les deux types de liste sont constitus de squences d'items de liste dfinis par l'lment LI (dont on peut
omettre la balise fermante).
Cet exemple illustre la structure de base d'une liste.
<ul>
<li> ... premier item de liste...
<li> ... deuxime item de liste...
...
</ul>
Les listes peuvent aussi s'imbriquer :
EXEMPLE DCONSEILL :
<ul>
<li> ... niveau 1, numro 1...
<ol>
<ol start="10">
</OL>
</ol>
</ul>
Dtails sur l'ordre des numros. Dans une liste ordonne, il n'est pas possible de poursuivre
automatiquement la numrotation de la liste partir d'une liste prcdente ou encore de cacher les
numros de certains items de liste particuliers. Cependant, les auteurs peuvent rinitialiser le numro
d'un item de liste en spcifiant son attribut value. La numrotation des items suivants se poursuit alors
partir de la nouvelle valeur. Par exemple :
<ol>
<li value="30"> cet item de liste a le numro 30.
<li value="40"> cet item de liste a le numro 40.
<li> cet item de liste a le numro 41.
</ol>
19
4.3 Les listes de dfinitions : les lments DL, DT et DD

Les listes de dfinitions varient seulement de manire minime par rapport aux autres types de liste dans la
mesure o les items de liste consistent en deux parties : un terme et une description. Le terme est donn
par l'lment DT et se restreint un contenu de type en-ligne. La description est donne par un lment
DD qui porte un contenu de type bloc..
En voici un exemple :
<dl>
<dt>Dweeb
<dd>Une jeune personne émotive qui peut évoluer
en <em>nerd</em> ou en <em>geek</em>
<dt>Hacker
<dd>Un programmeur fûté
<dt>Nerd
<dd>Une personne techniquement brillante mais socialement inepte
</dl>
Voici un exemple avec des termes et descriptions multiples :
<dl>
<dt>Centre
<dt>Centre
<dd> Un point équidistant de tous les poinst
à la surface d'une sphère.
<dd> Dans certains sports de champs, le joueur qui
occupe la position centrale sur le terrain,
le court ou la ligne centrale.
</dl>
Une autre application de l'lment DL serait, par exemple, pour le marquage d'un dialogue, chacun des
lments DT nommant un personnage et chacun des lments DD en contenant les paroles.
4.3.1 La restitution visuelle des listes
Remarque : Ce qui suit reprsente la description informative des comportements de mise en forme des
listes par certains agents utilisateurs visuels. Les feuilles de styles apportent un meilleur contrle de la
mise en forme des listes (par exemple, pour la numrotation, les conventions en rapport avec la langue,
l'indentation, etc.).
Les agents utilisateurs visuels place gnralement en retrait les listes imbriques en fonction du niveau
d'imbrication courant.
Pour les deux lments OL et UL, l'attribut type indique les options de restitution aux agents utilisateurs
visuels.
Pour l'lment UL, les valeurs possibles de l'attribut type sont "disc", "square" et "circle". La valeur par
dfaut dpend de la profondeur d'imbrication de la liste courante. Ces valeurs sont insensibles la casse.
La faon dont chacune des valeurs est reprsente dpend de l'agent utilisateur. Ceux-ci devraient essayer
de reprsenter la valeur "disc" par un petit cercle plein, la valeur "circle" par le contour d'un petit cercle et
"square" par le contour d'un petit carr.
Un agent utilisateur graphique pourrait les reprsenter comme ceci :
pour la valeur "disc"
pour la valeur "circle"
pour la valeur "square"
Pour l'lment OL, les valeurs possibles de l'attribut type sont rsumes dans le tableau ci-dessous (les
valeurs sont sensibles la casse) :
20
Type
Style de numrotation
en chiffres arabes
1, 2, 3, ...
alphabtique en minuscules
a, b, c, ...
alphabtique en majuscules
A, B, C, ...
en chiffres romains minuscules
i, ii, iii, ...
en chiffres romains majuscules
I, II, III, ...
Remarquez que l'attribut type est dconseill et que les styles des listes devraient tre contrls par les
feuilles de style.
Par exemple, en utilisant CSS, on peut spcifier que le style des numros des items de liste devrait tre en
chiffres romains minuscules. Dans l'extrait suivant, chaque lment OL appartenant la classe "romains"
prsentera des chiffres romains devant ses items de liste.
ol.romains { list-style-type: lower-roman;}
</style>
<body>
<ol class="romains">
<li> Numro 1...
<li> Numro 2...
</ol>
</body>
La restitution d'une liste de dfinitions dpend galement de l'agent utilisateur. Ainsi, l'exemple :
<dl>
<dt>Dweeb
<dd>Une jeune personne émotive qui peut évoluer
en un <em>nerd</em> ou un <em>geek</em>
<dt>Hacker
<dd>Un programmeur fûté
<dt>Nerd
<dd>Une personne techniquement brillante, mais socialement inepte
</dl>
celui-ci pourrait tre restitu par :
Dweeb
Une jeune personne motive qui pourrait voluer en nerd ou en geek
Hacker
Un programmeur ft
Nerd
Une personne techniquement brillante, mais socialement inepte
21
5 Les tables
Sommaire
1.
2.
3.
Introduction aux tables

Les lments de construction des tables
1. L'lment TABLE
La directionnalit de la table
2. La lgende de la table : l'lment CAPTION
3. Les regroupements de ranges : les lments THEAD, TFOOT et TBODY
4. Les regroupements de colonnes : les lments COLGROUP et COL
L'lment COLGROUP
L'lment COL
Le calcul du nombre de colonnes dans une table
Le calcul de la largeur des colonnes
5. Les ranges de la table : l'lment TR
6. Les cellules de la table : les lments TH et TD
Les cellules qui occupent plusieurs ranges ou colonnes
La mise en forme de la table par les agents utilisateurs visuels
1. Les bordures et les rgles
2. L'alignement horizontal et vertical
L'hritage des spcifications d'alignement
3. Les marges des cellules
5.1 Introduction aux tables

Le modle de la table de HTML permet aux auteurs d'arranger des donnes (texte, images, liens,
formulaires, champs de formulaires, autres tables, etc.) en ranges et colonnes de cellules.
Chaque table peut avoir une lgende propre (voir l'lment CAPTION) qui fournit une brve description
de l'objet de la table. On peut galement fournir une description plus longue (via l'attribut summary), au
bnfice des personnes qui utilisent des agents utilisateurs grant la synthse de parole et l'criture
Braille.
On peut regrouper les ranges de la table dans des sections d'en-tte, de pied et de corps (via les lments
THEAD, TFOOT et TBODY, respectivement). Les regroupements de ranges apportent des informations
de structure supplmentaires, qui peuvent tre utilises par les agents utilisateurs pour souligner cette
structure. Les agents utilisateurs peuvent exploiter le dcoupage en-tte/corps/pied de telle sorte que le
corps puisse dfiler indpendamment des sections d'en-tte et de pied. Pour l'impression d'une longue
table, les informations d'en-tte et de pied peuvent tre rptes sur chacune des pages qui contiennent les
donnes de la table.
Les auteurs peuvent galement regrouper les colonnes pour apporter des informations structurelles
supplmentaires qui peuvent tre exploites par les agents utilisateurs. En outre, les auteurs peuvent
dclarer des proprits de colonne au dbut de la dfinition de la table (via les lments COLGROUP et
COL) de sorte que les agents utilisateurs puissent restituer progressivement la table au lieu de devoir
attendre que toutes les donnes de la table soient arrives avant de pouvoir les restituer.
Les cellules de la table peuvent contenir soit des informations de rubrique (voir l'lment TH), soit
des informations de donnes (voir l'lment TD). Les cellules peuvent occuper plusieurs ranges et
colonnes. Le modle de la table HTML 4 permet aux auteurs l'tiquetage de chaque cellule de sorte que
les agents utilisateurs non-visuels puissent communiquer plus facilement l'utilisateur les indications de
rubrique concernant la cellule. Ce mcanisme apporte non seulement une grande assistance aux
personnes qui ont des dficiences visuelles, mais donne aussi aux navigateurs sans fil multimodes, avec
des capacits d'affichage limites (par exemple, les tlavertisseurs et les tlphones utilisant le Web), la
possibilit de grer les tables.
Les tables ne devraient pas reprsenter simplement un moyen de disposer le contenu d'un document car
cela peut entraner des problmes de restitution sur les mdias non-visuels. En outre, quand on les utilise
avec des graphiques, ces tables peuvent forcer l'utilisateur effectuer un dfilement horizontal pour voir
une table qui aura t conue sur un systme avec une surface d'affichage plus grande. Afin de minimiser
ces problmes, les auteurs devraient employer des feuilles de style pour le contrle de la disposition
plutt que des tables.
22
Voici une table simple qui montre certaines des caractristiques du modle de la table de HTML. Soit la
dfinition de table suivante :
<table border="1"
summary="Cette table donne quelques statistiques sur les
drosophiles : hauteur et poids moyens, et le
pourcentage de celles ayant des yeux rouges
(pour les mâles et les femelles).">
<caption><em>Une table test avec des cellules fusionnées</em></caption>
<tr><th rowspan="2"><th colspan="2">Moyenne
<th rowspan="2">Yeux<br>rouges
<tr><th>hauteur<th>poids
<tr><th>Mâles<td>1.9<td>0.003<td>40%
<tr><th>Femelles<td>1.7<td>0.002<td>43%
</table>
Cette table pourrait tre rendue comme ceci par un agent utilisateur graphique :
5.2 Les lments de construction des tables

5.2.1 L'lment TABLE
L'lment TABLE contient tous les autres lments qui spcifient la lgende, les ranges, le contenu et la
mise en forme.
La liste informative suivante dcrit les oprations que l'agent utilisateur peut tre amen raliser lors de
la restitution d'une table :
Restituer le sommaire dans l'attribut summary disponible l'utilisateur. Les auteurs devraient
fournir le sommaire du contenu et de la structure de la table, de sorte que les personnes utilisant
des agents utilisateurs non-visuels puissent mieux la comprendre ;
Restituer la lgende, le cas chant ;
Restituer l'en-tte de la table, le cas chant. Restituer le pied de la table, le cas chant. Les
agents utilisateurs doivent savoir o restituer l'en-tte et le pied. Par exemple, s'il s'agit d'un
mdia pagin en sortie, les agents utilisateurs peuvent placer l'en-tte en haut de chaque page, et
le pied en bas de chacune d'elles. De la mme manire, si l'agent utilisateur fournit un
mcanisme pour faire dfiler les ranges, l'en-tte peut apparatre en haut de la zone qui a dfil
et le pied en bas de celle-ci ;
Calculer le nombre de colonnes dans la table. Remarquez que le nombre de ranges dans une
table est gal au nombre d'lments TR contenus par l'lment TABLE ;
Regrouper les colonnes en fonction des ventuelles spcifications de groupe de colonnes ;
Restituer les cellules, range par range et regroupes dans les colonnes appropries, entre l'entte et le pied. Les agents utilisateurs devraient formater la table en fonction des attributs HTML
et des spcifications de la feuille de style.
Le modle de table HTML a t conu de telle sorte que les agents utilisateurs, avec l'assistance de
l'auteur, puissent restituer les tables progressivement (i.e., au fur et mesure que les ranges arrivent)
plutt que de devoir attendre la totalit des donnes avant de commencer la restitution.
Afin que l'agent utilisateur puisse formater une table en une seule passe, les auteurs doivent indiquer
l'agent utilisateur :
Le nombre de colonnes dans la table.
23
Les largeurs de ces colonnes..
Plus prcisment, l'agent utilisateur peut restituer une table en une seule passe quand les largeurs de
colonne sont spcifies l'aide d'une combinaison d'lments COLGROUP et COL. Si ventuellement
l'une des colonnes est spcifie en termes relatif ou de pourcentage, l'auteur doit aussi spcifier la largeur
de la table en question.
La directionnalit de la table
La directionnalit d'une table est soit celle qui est hrite (par dfaut, elle est de gauche droite), soit
celle qui est spcifie par l'attribut dir de l'lment TABLE.
Pour une table de gauche--droite, la colonne zro se trouve sur le ct gauche et la range zro se trouve
en haut. Pour une table de droite--gauche, la colonne zro se trouve sur le ct droit et la range zro en
haut.
Quand l'agent utilisateur alloue des cellules supplmentaires une range, ces cellules supplmentaires se
rajoutent la droite de la table, pour les tables de gauche--droite, et la gauche de la table, pour les
tables de droite--gauche.
Remarquer que l'lment TABLE est le seul sur qui l'attribut dir inverse l'ordre visuel des colonnes ; une
range de table (TR) ou un groupe de colonnes (COLGROUP) seuls ne peuvent pas tre inverss
indpendamment.
Quand il est spcifi pour l'lment TABLE, l'attribut dir affecte aussi la direction du texte l'intrieur
des cellules de la table (puisque l'attribut dir est hrit par les lments de type bloc).
Pour spcifier une table de droite--gauche, fixer la valeur de l'attribut dir comme suit :
<table dir="RTL">
...le reste de la table...
</table>
5.2.2 La lgende de la table : l'lment CAPTION
Quand l'lment CAPTION est prsent, son texte devrait dcrire la nature de la table. L'lment
CAPTION n'est autoris qu'immdiatement aprs la balise ouvrante de l'lment TABLE. L'lment
TABLE ne peut contenir qu'un seul lment CAPTION.
Les agents utilisateurs visuels permettent aux personnes voyantes d'embrasser rapidement la structure de
la table partir des en-ttes et de la lgende. Par consquent, les lgendes seront souvent inadaptes pour
le rsum de l'objet et de la structure de la table du point de vue des personnes qui dpendent d'agents
utilisateurs non-visuels.
Les auteurs devraient prendre soin de fournir des informations supplmentaires, qui rsument l'objet et la
structure de la table, en utilisant l'attribut summary de l'lment TABLE. Ceci est particulirement
important pour les tables dpourvues de lgende. Les exemples ci-dessous illustrent l'utilisation de
l'attribut summary.
Les agents utilisateurs visuels devraient viter le rognage de toute partie de la table qui contient la
lgende, moins de fournir un moyen pour accder toutes les parties de la table, par exemple par
dfilement horizontal ou vertical. Nous recommandons que le texte de la lgende soit coup la mme
largeur que celle de la table.
5.2.3 Les regroupements de ranges : les lments THEAD, TFOOT et TBODY
Les ranges de la table peuvent tre regroupes dans une section en-tte de la table, une section pied de la
table, et une ou plusieurs sections corps de table, en utilisant respectivement les lments THEAD,
TFOOT et TBODY. Cette organisation permet aux agents utilisateurs de grer le dfilement des corps de
la table, indpendamment de l'en-tte et du pied de la table. Pour l'impression d'une longue table, les
informations places dans l'en-tte et le pied de la table peuvent se rpter sur chacune des pages
contenant les donnes de la table.
L'en-tte et le pied de la table devraient contenir des informations sur les colonnes de la table. Le corps de
la table devrait contenir les ranges des donnes de la table.
Quand ils sont prsents, chaque lment THEAD, TFOOT et TBODY contient un groupe de ranges.
Chaque groupe de ranges doit contenir au moins une range, qui est dfinie par l'lment TR.
Cet exemple illustre l'ordre et la structure des en-ttes, pieds et corps des tables.
<table>
24
<thead>
<tr> ...informations d'en-tte...
</thead>
<tfoot>
<tr> ...informations de pied...
</tfoot>
<tbody>
<tr> ...premire range des donnes du bloc 1...
<tr> ...seconde range des donnes du bloc 1...
</tbody>
<tbody>
<tr> ...deuxime range des donnes du bloc 2...
<tr> ...troisime range des donnes du bloc 2...
</tbody>
</table>
L'lment TFOOT doit survenir avant un lment TBODY dans une dfinition d'lment TABLE, de
sorte que les agents utilisateurs puissent restituer le pied avant de recevoir toutes les ranges de donnes
(ventuellement nombreuses). Le rsum suivant indique les balises qui sont obligatoires et celles qui
peuvent tre omises :
la balise ouvrante de l'lment TBODY est toujours requise, sauf quand la table n'est forme que
d'un seul corps et n'a aucune section d'en-tte ni de pied. La balise fermante de TBODY peut
toujours tre omise en toute scurit
les balises ouvrantes des lments THEAD et TFOOT sont requises quand les sections d'en-tte
et de pied sont respectivement prsentes, mais les balises fermantes qui leur correspondent
peuvent toujours tre omises en toute scurit.
Les moteurs d'analyse des agents utilisateurs doivent obir ces rgles pour des raisons de rtrocompatibilit.
La table de l'exemple prcdent pourrait tre lagues en supprimant certaines balises fermantes,
comme :
<table>
<thead>
<tr> ...informations d'en-tte...
<tfoot>
<tr> ...informations de pied...
<tbody>
<tr> ...seconde range des donnes du bloc 2...
<tbody>
<tr> ...deuxime range des donnes du bloc 2...
<tr> ...troisime range des donnes du bloc 2...
</table>
Les sections THEAD, TFOOT et TBODY doivent contenir le mme nombre de colonnes.
5.2.4 Les regroupements de colonnes : les lments COLGROUP et COL
Les groupes de colonnes permettent aux auteurs de crer des divisions structurelles l'intrieur d'une
table. Les auteurs peuvent mettre en vidence cette structure au travers des feuilles de styles ou des
attributs HTML (par exemple, l'attribut rules pour l'lment TABLE). Une table peut contenir soit un seul
groupe de colonnes implicite (aucun lment COLGROUP ne dlimite les colonnes), soit un certain
nombre de groupes de colonnes explicites (chacun tant dlimit par une instance de l'lment
COLGROUP).
L'lment COL permet aux auteurs de partager des attributs entre plusieurs colonnes, sans faire appel
un regroupement structurel. L' tendue de l'lment COL est reprsente par le nombre de colonnes
qui vont partager les attributs de l'lment.
25
L'lment COLGROUP
L'lment COLGROUP cre un groupe de colonne explicite. On peut spcifier le nombre de colonnes
dans le groupe de colonnes de deux faons, qui s'excluent mutuellement :
1.
2.
l'attribut span de l'lment (valeur par dfaut "1") spcifie le nombre de colonnes dans le
groupe ;
chaque lment COL dans l'lment COLGROUP reprsente une ou plusieurs colonnes dans le
groupe.
L'avantage de l'utilisation de l'attribut span, c'est que les auteurs peuvent regrouper les informations
concernant les largeurs de colonne. Ainsi, si une table contient quarante colonnes, chacune d'elles ayant
une largeur de 20 pixels, il est plus facile d'crire :
<COLGROUP span="40" width="20">
</COLGROUP>
plutt que :
<colgroup>
<col width="20">
<col width="20">
...jusqu' totaliser 40 lments COL...
</colgroup>
Quand il est ncessaire d'isoler une colonne (par exemple, pour une information de style, pour spcifier
une information de largeur, etc.) au sein d'un groupe, les auteurs doivent identifier cette colonne avec un
lment COL. Ainsi, pour appliquer une information de style particulire la dernire colonne de la table
prcdente, on l'isole de cette manire :
<colgroup width="20">
<col span="39">
<col id="mise-en-forme-particuliere">
</colgroup>
L'attribut width de l'lment COLGROUP est hrit par la totalit des 40 colonnes. Le premier lment
COL se rapporte aux 39 premires colonnes (sans rien de particulier pour elles) et le second assigne une
valeur l'attribut id pour la quarantime colonne, de sorte qu'une feuille de style puisse s'y appliquer.
La table dans l'exemple suivant contient deux groupes de colonnes. Le premier groupe de colonnes
contient 10 colonnes et le second 5 colonnes. La largeur par dfaut de chaque colonne du premier groupe
de colonnes est de 50 pixels. La largeur de chaque colonne dans le second groupe sera celle minimale qui
est requise pour cette colonne en question.
<table>
<colgroup span="10" width="50">
<colgroup span="5" width="0*">
<thead>
<tr><td> ...
</table>
L'lment COL
L'lment COL permet aux auteurs de rassembler les spcifications d'attributs pour les colonnes de la
table. L'lment COL ne rassemble pas les colonnes de manire structurelle (c'est le rle de l'lment
COLGROUP). Les lments COL sont vides et ne servent que de support pour les attributs. Ils peuvent
apparatre l'intrieur comme l'extrieur d'un groupe de colonnes explicite (i.e., l'lment
COLGROUP).
L'attribut width de l'lment COL se rapporte la largeur de chacune des colonnes dans la couverture de
l'lment.
5.2.5 Les ranges de la table : l'lment TR
L'lment TR se comporte comme un conteneur pour une range de cellules de la table. La balise
fermante peut tre omise.
Cet exemple de table montre trois ranges, chacune commenant par un lment TR :
<table summary="Cette table représente le nombre de tasses de café
26
consommées par chaque sénateur,

le type de café (décafféiné ou normal),
et s'il est sucré ou non.">
<caption>Les tasses de café consommées par chaque sénateur</caption>
<tr> ...Une range en-tte...
<tr> ...Premire range de donnes...
<tr> ...Deuxime range de donnes...
...le reste de la table table...
</table>
5.2.6 Les cellules de la table : les lments TH et TD
Les cellules de table peuvent contenir deux types d'informations : des informations de rubrique et des
informations de donnes. Cette distinction permet aux agents utilisateurs de restituer les cellules de
rubrique et de donnes diffremment, mme en l'absence de feuilles de style. Par exemple, les agents
utilisateurs visuels peuvent prsenter le texte des cellules de rubrique en caractres gras. Les synthtiseurs
de parole peuvent restituer les informations de rubrique avec une inflexion de voix particulire.
L'lment TH dfinit une cellule qui contient une indication de rubrique. Les agents utilisateurs disposent
de deux types d'informations de rubrique : le contenu de l'lment TH et la valeur de l'attribut abbr. Les
agents utilisateurs doivent restituer soit le contenu de la cellule, soit la valeur de l'attribut abbr. Pour les
mdias visuels, cette dernire possibilit peut tre adquate quand il n'y a pas suffisamment de place pour
restituer le contenu entier de la cellule. Pour les mdias non-visuels, l'attribut abbr peut s'employer
comme abrviation des rubriques de la table, quand celles-ci sont restitues en accompagnement du
contenu des cellules concernes.
Les attributs headers et scope permettent galement aux auteurs d'assister les agents utilisateurs nonvisuels dans leur traitement des informations de rubrique. L'lment TD dfinit une cellule qui contient
des donnes.
Les cellules peuvent tre vides (i.e., elles ne contiennent pas de donnes.
Par exemple, la table suivante contient quatre colonnes de donnes, chacune tant chapeaute par une
description de la colonne.
<table summary="Cette table représente le nombre de tasses de café
<tr>
<th>Nom</th>
<th>Tasses</th>
<th>Type de café</th>
<th>Sucre ?</th>
<tr>
<td>T. Sexton</td>
<td>10</td>
<td>Espresso</td>
<td>Non</td>
<tr>
<td>J. Dinnen</td>
<td>5</td>
<td>Déca.</td>
<td>Oui</td>
</table>
Un agent utilisateur restituant sur un tlimprimeur pourrait afficher celle-ci comme suit :
Nom
Tasse
Type de caf Sucre ?
T. Sexton 10
Espresso
Non
J. Dinnen 5
Dca.
Oui
Les cellules qui occupent plusieurs ranges ou colonnes
Les cellules peuvent occuper plusieurs ranges ou colonnes. Le nombre des ranges ou des colonnes
occupes par une cellule est fix par les attributs rowspan et colspan des lments TH et TD.
27
Dans la dfinition de cette table, nous spcifions que la cellule en range 4 et colonne 2 devrait occuper
un total de trois colonnes, y compris la colonne courante.
<table border="1">
<tr><th>Nom<th>Tasses<th>Type de café<th>Sucre ?
<tr><td>T. Sexton<td>10<td>Espresso<td>Non
<tr><td>J. Dinnen<td>5<td>Déca.<td>Oui
<tr><td>A. Soria<td colspan="3"><em>Non disponible</em>
</table>
Cette table pourrait tre restitue sur un tlimprimeur par un agent utilisateur visuel comme suit :
Les tasses de caf consommes par
chaque snateur
--------------------------------------| Nom |Tasses|Type de caf|Sucre ?|
--------------------------------------|T. Sexton| 10 |Espresso |Non |
--------------------------------------|J. Dinnen|5 |Dca.
|Oui |
--------------------------------------|A. Soria |Non disponible
|
--------------------------------------L'exemple suivant illustre ( l'aide de bordures de table) la manire dont les dfinitions des cellules qui
occupent plus d'une range, ou colonne, affectent la dfinition des cellules suivantes. Considrons la
dfinition de table suivante :
<table border="1">
<tr><td>1 <td rowspan="2">2 <td>3
<tr><td>4 <td>6
<tr><td>7 <td>8 <td>9
</table>
Comme la cellule "2" couvre la premire et la deuxime range, la dfinition de cette deuxime range va
la prendre en compte. Ainsi, le deuxime lment TD dans la deuxime range dfinit en ralit la
troisime cellule de la range.
Un agent utilisateur graphique restituerait cette table par :
Remarquez que, si l'lment TD dfinissant la cellule "6" avait t omis, une cellule supplmentaire vide
aurait t ajoute par l'agent utilisateur pour complter la range.
De la mme manire, dans la dfinition de table suivante :
<table border="1">
<tr><td>1 <td>2 <td>3
<tr><td colspan="2">4 <td>6
<tr><td>7 <td>8 <td>9
</table>
la cellule "4" couvre deux colonnes, de sorte que le deuxime lment TD dans la range dfinit en ralit
la troisime cellule ("6") :
Un agent utilisateur graphique restituerait cette table par :
La dfinition de cellules qui se chevauchent constitue une erreur. Les agents utilisateurs peuvent diverger
sur la faon de grer cette erreur (par exemple, la restitution peut varier).
EXEMPLE ILLGAL
28
L'exemple suivant montre comment on pourrait crer des cellules qui se chevauchent. Dans cette table, la
cellule "5" couvre deux ranges et la cellule "7" deux colonnes, de sorte qu'elles se chevauchent dans la
cellule entre "7" et "9":
<table border="1">
<tr><td>1 <td>2 <td>3
<tr><td>4 <td rowspan="2">5 <td>6
<tr><td colspan="2">7 <td>9
</table>
5.3 La mise en forme de la table par les agents utilisateurs visuels
5.3.1 Les bordures et les rgles
Les attributs suivants affectent le cadre externe et les rgles internes de la table.
Dfinition des attributs
frame = void|above|below|hsides|lhs|rhs|vsides|box|border
Cet attribut spcifie quels cts du cadre entourant la table seront visibles. Les valeurs possibles
sont :
void : aucun ct. C'est la valeur par dfaut ;

above : le ct en haut seulement ;
below : le ct en bas seulement ;
hsides : les cts en haut et en bas seulement ;
vsides : les cts droite et gauche seulement ;
lhs : le ct gauche seulement ;
rhs : le ct droit seulement ;
box : les quatre cts ;
border : les quatre cts
rules = none|groups|rows|cols|all
Cet attribut spcifie quelles rgles vont apparatre entre les cellules l'intrieur de la table. La
restitution des rgles dpend de l'agent utilisateur. Les valeurs possibles sont :
none : aucune rgle. C'est la valeur par dfaut ;

groups : les rgles apparatront seulement entre les groupes de ranges (voir THEAD,
TFOOT et TBODY) et les groupes de colonnes (voir COLGROUP et COL) ;
rows : les rgles apparatront seulement entre les ranges ;
cols : les rgles apparatront seulement entre les colonnes ;
all : les rgles apparatront entre toutes les ranges et colonnes.
border = pixels [CN]

Cet attribut spcifie l'paisseur (en pixels seulement) du cadre autour de la table (voir la
remarque ci-dessous pour plus d'informations sur cet attribut).
Afin d'aider distinguer les cellules d'une table, on peut spcifier l'attribut border de l'lment TABLE.
Considrons cet exemple prcdent :
<table border="1"
summary="Cette table représente le nombre de tasses de café
<tr>
<th>Nom</th>
<th>Tasses</th>
<th>Type de café</th>
<th>Sucre ?</th>
<tr>
<td>T. Sexton</td>
29
<td>10</td>
<td>Espresso</td>
<td>Non</td>
<tr>
<td>J. Dinnen</td>
<td>5</td>
<td>Déca.</td>
<td>Oui</td>
</table>
Dans l'exemple suivant, l'agent utilisateur devrait afficher des bordures paisses de 5 pixels gauche et
droite de la table, avec des rgles dessines entre chaque colonne.
<table border="5" frame="vsides" rules="cols">
<tr> <td>1 <td>2 <td>3
<tr> <td>4 <td>5 <td>6
<tr> <td>7 <td>8 <td>9
</table>
5.3.2 L'alignement horizontal et vertical
La table dans cet exemple aligne des ranges de valeurs montaires sur un point dcimal. On dfinit
explicitement le caractre d'alignement comme tant , .
<table border="1">
<colgroup>
<col><col align="char" char=",">
<thead>
<tr><th>Légumes <th>Prix au kilo
<tbody>
<tr><td>Laitues
<td>€1
<tr><td>Carottes
<td>€10,50
<tr><td>Navets dorés <td>€100,30
</table>
5.3.3 Les marges des cellules
Dans l'exemple suivant, l'attribut cellspacing spcifie que les cellules devraient tre spares de vingt
pixels, les unes par rapport aux autres et par rapport au cadre de la table. L'attribut cellpadding spcifie
que la marge suprieure et la marge infrieure de la cellule seront chacune spares du contenu de la
cellule de 10% de l'espacement vertical disponible (totalisant 20%). De mme, la marge de gauche et la
marge de droite de la cellule seront chacune spares du contenu de la cellule de 10% de l'espacement
horizontal disponible (totalisant 20%).
<table cellspacing="20" cellpadding="20%">
<tr> <td>Donnes1 <td>Donnes2 <td>Donnes3
</table>
30
Si une table, ou une colonne donne, a une largeur fixe, les attributs cellspacing et cellpadding peuvent
demander plus d'espace que celui qui est assign. Les agents utilisateurs peuvent donner ces attributs la
priorit sur l'attribut de largeur width quand un conflit survient, mais ils ne sont pas obligs de le faire.
6 Les liens
Sommaire
1.
2.
3.
4.
Introduction aux liens et aux ancres

1. La visite d'une ressource relie
2. Les autres relations des liens
3. La spcification des ancres et des liens
4. Les titres des liens
5. Les liens et l'internationalisation
L'lment A
1. La syntaxe des noms d'ancre
2. Les liens imbriqus sont illgaux
3. Les ancres avec un attribut id
4. Les ressources non disponibles et non identifiables
Les relations du document : l'lment LINK
1. Les liens progressifs et les liens inverses
2. Les liens et les feuilles de style externes
3. Les liens et les moteurs de recherche
L'information de chemin : l'lment BASE
1. La rsolution des URI relatifs
6.1 Introduction aux liens et aux ancres

HTML offre nombre des expressions conventionnelles de l'dition pour enrichir le texte et structurer les
documents, mais ce qui le distingue des autres langages de balisage ce sont ses fonctionnalits pour les
documents hypertextes et interactifs. Cette section prsente le lien (ou encore hyperlien ou lien Web) qui
est la structure hypertexte de base. Le lien reprsente une connexion d'une ressource Web une autre.
Bien que le concept en soit simple, le lien a t un des moteurs principaux de la russite du Web.
Un lien possde deux extrmits, appeles ancres, et une direction. Le lien part de l'ancre source et
pointe vers l'ancre destination , qui peut reprsenter n'importe quelle ressource Web (par exemple, une
image, une squence vido, un extrait sonore, un programme, un document HTML, un lment au sein
d'un document HTML, etc.).
6.1.1 La visite d'une ressource relie
Le comportement par dfaut associ au lien est de ramener une autre ressource Web. Ce comportement
est communment et implicitement obtenu par la slection du lien (par exemple, un clic de souris, une
entre au clavier, etc..
L'extrait HTML suivant contient deux liens, l'un dont l'ancre destination est un document HTML nomm
"chapitre2.html" et l'autre une image au format PNG nomme "foret.png" :
<body>
...un texte...
<p>Plus de détails dans le <a href="chapitre2.html">chapitre deux</a>.
Voir aussi cette <a href="../images/foret.png">carte de la forêt enchantée.</a>
</body>
En activant ces liens (par un clic de souris, une entre au clavier, une commande vocale, etc.), l'utilisateur
peut visiter ces ressources. Remarquez que l'attribut href dans chaque ancre source spcifie l'adresse de
l'ancre destination avec un URI.
L'ancre destination du lien peut tre un lment l'intrieur d'un document HTML. L'ancre destination
doit avoir reu un nom d'ancre et tout URI qui dsigne cet ancre doit inclure le nom comme tant son
identifiant de fragment.
31
Les ancres destinations dans les documents HTML peuvent tre spcifies soit par l'lment A (en le
nommant grce l'attribut name), soit par tout autre lment (en le nommant avec l'attribut id).
Ainsi, par exemple, un auteur pourrait crer une table des matires dont les entres sont relies aux
lments de titre H2, H3, etc., dans le mme document. En utilisant l'lment A pour crer les ancres
destinations, nous cririons :
<h1>Table des matières</h1>
<p><a href="#section1">Introduction</a><br>
<a href="#section2">Historique</a><br>
<a href="#section2.1">Sur un ton plus personnel</a><br>
...le reste de la table des matires...
...le corps du document...
<h2><a name="section1">Introduction</a></h2>
...section 1...
<h2><a name="section2">Historique</a></h2>
...section 2...
<h3><a name="section2.1">Sur un ton plus personnel</a></H3>
...section 2.1...
On peut obtenir le mme effet en transformant les lments de titre eux-mmes en ancres :
<h1>Table des matières</h1>
<p><a href="#section1">Introduction</a><br>
<a href="#section2">Historique</a><br>
<a href="#section2.1">Sur un ton plus personnel</a><br>
...le reste de la table des matires...
...le corps du document...
<h2 id="section1">Introduction</h2>
...section 1...
<h2 id="section2">Historique</h2>
...section 2...
<h3 id="section2.1">Sur un ton plus personnel</H3>
...section 2.1...
6.1.2 Les autres relations des liens
De loin, l'utilisation la plus commune du lien est de ramener une autre ressource Web, comme illustr
dans les exemples prcdents. Cependant, les auteurs peuvent insrer, dans leurs documents, des liens qui
expriment d'autres relations entre les ressources que le simple activer ce lien pour visiter telle
ressource . Les liens qui expriment d'autres types de relation ont un ou plusieurs types de lien spcifis
dans leur ancre source.
Les rles d'un lien dfini par l'lment A, ou LINK, sont spcifis au travers des attributs rel et rev.
Par exemple, les liens dfinis par l'lment LINK peuvent dcrire la position d'un document par rapport
une srie de documents. Dans l'extrait suivant, les liens dans le document intitul Chapitre 5 pointent
vers le chapitre qui prcde et celui qui suit :
<head>
...autres informations d'en-tte...
<title>Chapitre 5</title>
<link rel="prev" href="chapitre4.html">
<link rel="next" href="chapitre6.html">
</head>
Le type du premier lien est "prev" et celui du second est "next" (deux parmi plusieurs types de lien
reconnus). Les liens spcifis par l'lment LINK ne sont pas restitus avec le contenu du document,
mme si les agents utilisateurs peuvent les restituer autrement (par exemple, comme outils de navigation).
Mme s'ils ne sont pas utiliss pour la navigation, ces liens peuvent tre interprts de manire
intressante. Par exemple, un agent utilisateur, qui imprime une srie de documents HTML comme si
c'tait un seul document, peut utiliser ces informations de lien comme base pour la formation d'un
document linaire cohrent. On donne plus d'informatons ci-dessous sur l'utilisation des liens au bnfice
des moteurs de recherche.
32
6.1.3 La spcifications des ancres et des liens

Bien que plusieurs lments et attributs HTML crent des liens vers d'autres ressources (par exemple,
l'lment IMG, l'lment FORM, etc.), ce chapitre traite des liens et des ancres cres par les lments
LINK et A. L'lment LINK ne peut apparatre que dans l'en-tte du document. L'lment A ne peut
apparatre que dans le corps.
Quand l'attribut href de l'lment A est spcifi, l'lment dfinit l'ancre source d'un lien que l'utilisateur
peut activer pour ramener une ressource Web. L'ancre source reprsente l'emplacement de l'instance de A
et l'ancre destination la ressource Web.
La ressource ramene peut tre prise en main par l'agent utilisateur de plusieurs faons : en ouvrant un
nouveau document HTML dans la mme fentre d'agent utilisateur, en ouvrant un nouveau document
HTML dans une fentre diffrente, en lanant un nouveau programme qui va prendre en charge la
ressource, etc. Puisque l'lment A possde un contenu (texte, images, etc.), les agents utilisateurs
peuvent restituer ce contenu de manire indiquer la prsence d'un lien (par exemple, en soulignant ce
contenu).
Quand les attributs name ou id de l'lment A sont spcifis, l'lment dfinit alors une ancre qui peut
tre la destination d'autres liens.
Les auteurs peuvent spcifier simultanment les attributs name et href dans la mme instance de A.
L'lment LINK dfinit une relation entre le document courant et une autre ressource. Bien que l'lment
LINK n'ait aucun contenu, la relation qu'il dfinit peut tre restitue par certains agents utilisateurs.
6.1.4 Les titres des liens
L'attribut title peut tre spcifi sur les deux lments A et LINK pour ajouter des informations sur la
nature d'un lien. Ces informations peuvent tre parles par l'agent utilisateur, tre restitues sous forme
d'infobulles, entraner un changement dans la reprsentation de l'image du curseur, etc.
Nous pouvons donc enrichir l'exemple prcdent en produisant un titre pour chaque lien :
<body>
...un texte...
<p>Plus de détails dans le <a href="chapitre2.html"
title="Aller au chapitre deux">chapitre deux</a>.
<a href="./chapter2.html"
title="Voir le chapitre deux.">chapitre deux</a>.
Voir aussi cette <a href="../images/foret.png"
title="Image PNG de la forêt enchantée">carte de la
forêt enchantée.</a>
</body>
6.1.5 Les liens et l'internationalisation
Comme les liens sont susceptibles de pointer vers des documents cods avec diffrents encodages de
caractres, les lments A et LINK reconnaissent l'attribut charset. Cet attribut permet aux auteurs de
conseiller les agents utilisateurs sur le codage des donnes l'autre extrmit du lien.
L'attribut hreflang apporte aux agents utilisateurs des informations concernant la langue de la ressource
au bout d'un lien, tout comme l'attribut lang fournit des informations propos de la langue du contenu
d'un lment ou de la valeur d'un attribut.
Munis de cette connaissance supplmentaire, les agents utilisateurs devraient pouvoir viter la
prsentation d'informations incohrentes l'utilisateur. Au lieu de cela, ils peuvent localiser les
ressources ncessaires pour la prsentation correcte du document, ou bien, s'ils ne peuvent pas localiser
ces ressources, ils devraient au moins avertir l'utilisateur que le document sera illisible et en donner la
raison.
6.2 L'lment A
Chaque lment A dfinit une ancre :
1.
2.
le contenu de l'lment A dfinit la position de l'ancre ;

l'attribut name nomme l'ancre, de sorte que celle-ci puisse tre la destination de zro ou plusieurs
liens (voir galement la section sur les ancres avec un attribut id) ;
33
3.
l'attribut href fait de cette ancre l'ancre source d'exactement un lien.
Les auteurs peuvent galement crer un lment A qui ne spcifie aucune ancre, i.e., qui ne spcifie
aucun attribut href, name ou id. Les valeurs de ces attributs peuvent tre fixes par la suite au moyen de
scripts.
Dans l'exemple suivant, l'lment A dfinit un lien. L'ancre source est reprsente par le texte site Web
du W3C et l'ancre destination par "http://www.w3.org/" :
Pour plus d'informations, veuillez consulter
le <a href="http://www.w3.org/">site Web du W3C</a>.
Ce lien dsigne la page d'accueil du World Wide Web Consortium. Quand un utilisateur active ce lien via
l'agent utilisateur, celui-ci va ramener la ressource, ici un document HTML.
Les agents utilisateurs restituent gnralement les liens de sorte les mettre en vidence pour les
utilisateurs (soulignage, vido inverse, etc.). La restitution exacte dpend de l'agent utilisateur. La
restitution peut varier si l'utilisateur a dj visit le lien ou non.
Pour indiquer explicitement aux agents utilisateurs l'encodage de caractres de la page de destination,
spcifiez l'attribut charset :
Pour plus d'information, veuillez consulter le
<a href="http://www.w3.org/" charset="ISO-8859-1">site Web du W3C</a>
Supposons que nous dfinissions une ancre nomme "ancre-1" dans le fichier "un.html".
...texte avant l'ancre...
<a name="ancre-1">Voici l'emplacement de l'ancre un.</a>
...texte aprs l'ancre...
Ceci cre une ancre autour du texte Voici l'emplacement de l'ancre un. . Habituellement, le contenu de
l'lment A n'est pas restitu de faon particulire quand l'lment A dfinit seulement une ancre.
Ayant dfini l'ancre, nous pouvons nous y rfrer partir du mme document ou d'un autre. Les URI qui
dsignent des ancres contiennent un caractre # suivi par le nom de l'ancre (l'identifiant de fragment).
Voici quelques exemples de tels URI :
un URI absolu : http://www.macompanie.com/un.html#ancre-1

un URI relatif : ./un.html#ancre-1 ou bien un.html#ancre-1
quand le lien est dfini dans le mme document : #ancre-1
Ainsi, un lien dfini dans le fichier "deux.html" dans le mme rpertoire que le fichier "un.html" se
rfrerait l'ancre comme suit :
...texte avant le lien...
Pour plus d'informations, veuillez consultez l'<a href="./un.html#ancre-1">ancre un</a>.
...texte aprs le lien...
Dans l'exemple suivant, l'lment A spcifie un lien (avec l'attribut href) et cre une ancre nomme (avec
l'attribut name) simultanment :
Je viens de rentrer de vacances ! Voici une
<a name="ancre-2"
href="http://www.unecompanie.com/Gens/Ian/vacances/famille.png">
photo de ma famille sur le lac.</a>.
Cet exemple contient un lien vers un autre type de ressource Web (une image PNG). L'activation du lien
entranerait le chargement de la ressource image partir du Web (et ventuellement son affichage si le
systme est configur dans ce sens).
6.2.1 La syntaxe des noms d'ancre
Le nom d'une ancre est la valeur soit de l'attribut name, soit de l'attribut id, quand on les utilise dans le
contexte des ancres. Les noms d'ancre doivent obir aux rgles suivantes :
Unicit : Les noms d'ancre doivent tre uniques dans le document. Les noms d'ancre qui ne
diffrent que par la casse ne devraient pas apparatre dans le mme document ;
Correspondance des chanes : Les comparaisons entre les identifiants de fragment et les noms
d'ancre doivent tre ralises selon une correspondance exacte (sensibilit la casse).
Ainsi, l'exemple suivant est juste pour ce qui est de la correspondance des chanes et doit donc tre
considr comme une correspondance par les agents utilisateurs :
34
<p><a href="#xxx">...</a>
...suite du document...
<p><a name="xxx">...</a>
EXEMPLE ILLGAL :
L'exemple suivant est illgal pour ce qui est de l'unicit, dans la mesure o les deux noms sont identiques
mis part la casse :
<p><a name="xxx">...</a>
<p><a name="XXX">...</a>
Bien que l'extrait suivant soit un code HTML lgal, le comportement de l'agent utilisateur n'est pas dfini
; certains agents utilisateurs peuvent considrer (par erreur) ceci comme tant une correspondance et
d'autres non.
<p><a href="#xxx">...</a>
<p><a name="XXX">...</a>
Les noms d'ancre devraient se limiter aux caractres ASCII..
6.2.2 Les liens imbriqus sont illgaux
Les liens et les ancres dfinis par l'lment A ne doivent pas tre imbriqus ; un lment A ne doit pas
contenir d'autres lments A. Les lments LINK ne doivent pas tre imbriqus non plus.
6.2.3 Les ancres avec un attribut id
On peut utiliser l'attribut id pour crer une ancre dans la balise ouvrante de n'importe quel lment (y
compris l'lment A).
Cet exemple illustre une utilisation de l'attribut id pour positionner une ancre dans un lment H2.
L'ancre est relie via l'lment A.
Vous pouvez obtenir des précisions dans la <a href="#section2">Section deux</a>.
...plus loin dans le document
<h2 id="section2">Section deux</h2>
...plus loin dans le document
<p>Veuillez vous reporter à la <a href="#section2">Section deux</a>
ci-dessus pour plus de détails.
L'exemple suivant nomme une ancre destination avec l'attribut id :
Je suis de retour de vacances ! Voici une
<a id="ancre-deux">photo de ma famille sur le lac.</a>.
Les attributs id et name partagent le mme espace de noms. Cela signifie qu'ils ne peuvent pas tous deux
dfinir une ancre avec le mme nom dans le mme document. On admet l'utilisation des deux attributs
pour spcifier l'identifiant unique d'un lment pour les lments suivants : A, APPLET, FORM,
FRAME, IFRAME, IMG et MAP. Quand les deux attributs sont utiliss sur un seul lment, leurs valeurs
doivent tre identiques.
EXEMPLE ILLGAL :
L'extrait suivant est un code HTML illgal, puisque ces attributs dclare le nom deux fois dans le mme
document.
<a href="#a1">...</a>
...
<h1 id="a1">
...des pages et des pages...
<a name="a1"></a>
L'exemple suivant illustre le fait que les attributs id et name doivent tre les mmes quand tous les deux
apparaissent dans la balise ouvrante d'un lment :
<p><a name="a1" id="a1" href="#a1">...</a>
De par sa spcification dans le DTD de HTML, l'attribut name peut contenir des rfrences de caractres.
Ainsi, la valeur "Dürst" est valide pour l'attribut name, comme l'est la valeur "Dürst". La
valeur de l'attribut id, par contre, ne peut pas contenir de rfrences de caractres.
Utiliser id ou name ? Les auteurs devraient considrer les points suivants au moment de dcider lequel
attribut utiliser entre id et name pour le nom d'une ancre :
35
l'attribut id peut faire plus qu'un nom d'ancre (par exemple, slecteur de feuille de style,
identifiant de traitement, etc.) ;
certains agents utilisateurs anciens ne grent pas les ancres cres par l'attribut id ;
l'attribut name autorise des noms d'ancre plus varis (avec les entits).
6.2.4 Les ressources non disponibles et non identifiables

L'appel d'une ressource non disponible ou non identifiable constitue une erreur. Bien que les agents
utilisateurs puissent varier dans la manire de grer une telle erreur, nous recommandons les
comportements suivants :
si l'agent utilisateur ne peut pas localiser une ressource relie, il devrait le signaler l'utilisateur ;
si l'agent utilisateur ne peut pas identifier le type de la ressource relie, il devrait quand mme
essayer de la traiter. Il devrait avertir l'utilisateur et il peut lui permettre d'intervenir et identifier
le type du document.
6.3 Les relations du document : l'lment LINK

Cet lment dfinit un lien. la diffrence de l'lment A, il ne peut apparatre que dans la section
HEAD du document, mme s'il peut apparatre un nombre de fois quelconque. Bien que l'lment LINK
n'ait pas de contenu, il vhicule des informations de relations qui peuvent tre restitues par les agents
utilisateurs de diverses faons (par exemple, une barre d'outils avec un menu droulant prsentant les
liens).
Cet exemple illustre la manire dont les lments LINK peuvent apparatre dans la section HEAD d'un
document. Le document courant a pour nom "chapitre2.html". L'attribut rel spcifie la relation du
document reli avec le document courant. Les valeurs "Index", "Next" et "Prev" sont expliques dans la
section sur les types de lien.
<html>
<head>
<title>Chapitre 2</title>
<link rel="Index" href="../index.html">
<link rel="Next" href="chapitre3.html">
<link rel="Prev" href="chapitre1.html">
</head>
...le reste du document...
6.3.1 Les liens progressifs et les liens inverses
Les attributs rel et rev jouent des rles complmentaires : l'attribut rel spcifie un lien progressif [ndt.
forward link] et l'attribut rev un lien inverse [ndt. reverse link].
Considrons les deux documents A et B suivants.
Document A :
<link href="docB" rel="foo">
celui-ci a exactement la mme signification que :
Document B :
<link href="docA" rev="foo">
On peut spcifier les deux attributs simultanment.
6.3.2 Les liens et les feuilles de style externes
Quand l'lment LINK relie une feuille de style externe un document, l'attribut type spcifie le langage
de feuille de style et l'attribut media spcifie le ou les mdias de restitution prvus. Les agents utilisateurs
peuvent gagner du temps en ne ramenant que celles des feuilles de style qui s'appliquent l'appareil
courant.
Les types de mdia sont abords ultrieurement dans la section sur les feuilles de style.
36
6.3.3 Les liens et les moteurs de recherche

Les auteurs peuvent utiliser l'lment LINK pour fournir diverses informations aux moteurs de recherche,
comprenant :
des liens vers les versions alternatives d'un document, crites dans une autre langue ;
des liens vers les versions alternatives d'un document, conues pour des mdias diffrents, par
exemple une version convenant particulirement pour l'impression ;
des liens vers la page de garde d'une collection de documents.
Les exemples ci-dessous illustrent les faons de combiner les indications de langue, les types de mdia et
les types de lien pour amliorer la prise en charge des documents par les moteurs de recherche.
Dans l'exemple suivant, nous utilisons l'attribut hreflang pour indiquer aux moteurs de recherche o
trouver les versions hollandaise, portugaise et arabe d'un document. Remarquez l'utilisation de l'attribut
charset pour le manuel arabe. Remarquez aussi l'utilisation de l'attribut lang pour indiquer que la valeur
de l'attribut title de l'lment LINK, qui dsigne le manuel franais, est en franais.
<head>
<title>Le manuel en anglais</title>
<link title="Le manuel en hollandais"
type="text/html"
rel="alternate"
hreflang="nl"
href="http://quelquepart.com/manuel/hollandais.html">
<link title="Le manuel en portugais"
type="text/html"
rel="alternate"
hreflang="pt"
href="http://quelquepart.com/manuel/portugais.html">
<link title="Le manuel en arabe"
type="text/html"
rel="alternate"
charset="ISO-8859-6"
hreflang="ar"
href="http://quelquepart.com/manuel/arabe.html">
<link lang="fr" title="Le manuel en français"
type="text/html"
rel="alternate"
hreflang="fr"
href="http://quelquepart.com/manuel/francais.html">
</head>
Dans l'exemple suivant, nous indiquons aux moteurs de recherche o trouver la version imprime d'un
manuel.
<head>
<title>Manuel de référence</title>
<link media="print" title="Le manuel en Postscript"
type="application/postscript"
rel="alternate"
href="http://quelquepart.com/manuel/postscript.ps">
</head>
Dans l'exemple suivant, nous indiquons aux moteurs de recherche o trouver la page de garde d'une
collection de documents.
<head>
<title>Manuel de référence -- Page 5</title>
<link rel="Start" title="La première page du manuel"
type="text/html"
href="http://quelquepart.com/manuel/debut.html">
</head>
37
6.4 L'information de chemin : l'lment BASE

Dans HTML, les liens et les rfrences d'images, d'applets, de programmes de traitement de formulaire,
de feuilles de style, etc. sont toujours spcifis par un URI. Les URI relatifs sont rsolus par rapport un
URI de base, qui peut avoir diverses provenances. L'lment BASE permet aux auteurs de spcifier
explicitement l'URI de base d'un document.
Quand il est prsent, l'lment BASE doit apparatre dans la section HEAD du document HTML, avant
tout lment qui se rfre une source externe. L'information de chemin spcifie par l'lment BASE
n'affecte que les URI du document dans lequel cet lment apparat.
Par exemple, soit les dclarations suivantes des lments BASE et A :
<html>
<head>
<title>Nos produits</title>
<base href="http://www.poulets.com/produits/intro.html">
</head>
<body>
<p>Avez-vous vu nos <a href="../cages/poules.gif">cages à poules</a> ?
</body>
</html>
l'URI relatif "../cages/poules.gif" se rsoudrait en :
http://www.poulets.com/cages/poules.gif
6.4.1 La rsolution des URI relatifs
Les agents utilisateurs doivent calculer l'URI de base, pour la rsolution des URI relatifs. Les agents
utilisateurs doivent calculer l'URI de base en fonction de la prsance suivante (de la priorit la plus
leve la plus basse) :
1.
2.
3.
l'URI de base est fix par l'lment BASE ;

l'URI de base est dtermin par les mtadonnes dcouvertes lors d'une interaction protocolaire,
telle qu'un en-tte HTTP;
par dfaut, l'URI de base correspond l'URI du document courant. Les documents HTML n'ont
pas tous un URI de base (par exemple, un document HTML valide peut apparatre dans un email et ne pas tre dsign par un URI). De tels documents sont considrs comme errons s'ils
contiennent des URI relatifs et dpendent d'un URI de base par dfaut.
De surcrot, les lments OBJECT et APPLET dfinissent des attributs qui ont priorit sur la valeur fixe
par l'lment BASE.
38
7 Les objets, les images et les applets

Sommaire
1.
2.
3.
4.
5.
6.
7.
Introduction aux objets, images et applets

L'inclusion d'une image : l'lment IMG
L'inclusion gnrique : l'lment OBJECT
1. Les rgles de restitution des objets
2. L'initialisation de l'objet : l'lment PARAM
3. Les systmes de nommage globaux des objets
L'inclusion d'un applet : l'lment APPLET
Les images cliquables
1. Les images cliquables ct client : les lments MAP et AREA
2. Les images cliquables ct serveur
La prsentation visuelle des images, objets et applets
1. La largeur et la hauteur
La manire de spcifier un texte de remplacement
7.1 Introduction aux objets, images et applets

Les fonctionnalits multimdias de HTML permettent aux auteurs d'inclure dans leurs pages des images,
des applets (des programmes qui sont automatiquement chargs puis lancs sur la machine de
l'utilisateur), des squences vido et d'autres documents HTML.
Par exemple, pour inclure une image PNG dans un document, l'auteur peut crire :
<body>
<p>Voici un gros plan sur le Grand Canyon :
<object data="canyon.png" type="image/png">
Ceci est un <em>gros plan</em> sur le Grand Canyon.
</object>
</body>
Les versions antrieures de HTML permettaient aux auteurs d'inclure des images (via l'lment IMG) et
des applets (via l'lment APPLET). Ces lments ont plusieurs limitations :
ils ne rpondent pas au problme plus gnral de la manire d'inclure les nouveaux comme les
futurs types de mdia ;
l'lment APPLET ne fonctionne qu'avec des applets bass sur le langage Java. Cet lment est
dconseill en faveur de l'lment OBJECT ;
ils entranent des problmes d'accessibilit.
Pour rpondre ces questions, HTML 4 introduit l'lment OBJECT, qui offre une solution gnrale aux
inclusions d'objets gnriques. L'lment OBJECT permet aux auteurs HTML de spcifier tout ce que
l'objet requiert pour sa prsentation par un agent utilisateur : le code source, les valeurs initiales et les
donnes d'excution. Dans cette spcification, on emploie le terme objet pour dsigner les choses que
les personnes mettent dans les documents HTML ; les termes usuels courants pour ces choses sont : les
applets, les modules d'extension [ndt. plug-ins], les gestionnaires de mdia [ndt. media handlers], etc.
Le nouvel lment OBJECT prend donc en charge quelques unes des tches effectues par les lments
existants. Considrons le comparatif des fonctionnalits suivant :
Type d'inclusion
lment spcifique
lment gnrique
Image
IMG
OBJECT
Applet
APPLET (dconseill) OBJECT
Un autre document HTML IFRAME
OBJECT
Le comparatif indique que chaque type d'inclusion possde une solution spcifique et une solution
gnrique. L'lment gnrique OBJECT servira de solution pour l'implmentation des types de mdia
futurs.
Pour inclure des images, les auteurs peuvent utiliser l'lment OBJECT ou bien l'lment IMG.
39
Pour inclure des applets, les auteurs devraient utiliser l'lment OBJECT puisque l'lment APPLET est
dconseill.
Pour inclure un document HTML dans un autre, les auteurs peuvent utiliser soit le nouvel lment
IFRAME, soit l'lment OBJECT. Dans les deux cas, le document incorpor reste indpendant du
document principal. Les agents utilisateurs visuels peuvent prsenter le document incorpor dans une
fentre distincte l'intrieur du document principal. Veuillez consulter les remarques sur les documents
incorpors pour une comparaison entre les lments OBJECT et IFRAME pour l'inclusion d'un
document.
Les images et les autres objets inclus peuvent avoir des hyperliens qui leur sont associs, la fois au
travers des mcanismes de liaison standards mais aussi via des images cliquables [ndt. image maps]. Une
image cliquable spcifie les rgions gomtriques actives d'un objet inclus et assigne un lien chacune
d'elles. Quand ils sont activs, ces liens peuvent entraner la recherche d'un document, lancer un
programme sur le serveur, etc.
Dans les sections suivantes, nous abordons les divers mcanismes dont disposent les auteurs pour les
inclusions multimdias et pour la cration d'images cliquables pour ces inclusions.
7.2 L'inclusion d'une image : l'lment IMG
L'lment IMG incorpore une image dans le document courant, l'emplacement de la dfinition de
l'lment. L'lment IMG n'a pas de contenu ; il est gnralement remplac dans la ligne par l'image que
dsigne l'attribut src, les images alignes gauche ou droite qui flottent hors de la ligne faisant
exception.
Dans un exemple prcdent, nous dfinissions un lien vers une photo familiale. Ici, nous insrons la
photo directement dans le document courant :
<body>
<p>Je viens de revenir de vacances !
Voici une photo de la famille sur le lac :
<img src="http://www.unecompagnie.com/Gens/Ian/vacances/famille.png"
alt="Une photo de ma famille sur le lac.">
</body>
On pourrait galement obtenir cette inclusion avec l'lment OBJECT, comme suit :
<body>
<p>Je viens de revenir de vacances !
Voici une photo de la famille sur le lac :
<object data="http://www.unecompagnie.com/Gens/Ian/vacances/famille.png"
type="image/png">
Une photo de ma famille sur le lac.
</object>
</body>
L'attribut alt spcifie le texte de remplacement qui sera restitu si l'image ne peut s'afficher (voir cidessous pour des prcisions sur la manire de spcifier un texte de remplacement). Les agents utilisateurs
doivent restituer le texte de remplacement quand ceux-ci ne grent pas les images, ne reconnaissent pas
un certain type d'image ou ne sont pas configurs pour afficher les images.
L'exemple suivant montre comment employer l'attribut longdesc pour relier l'image une description
approfondie :
<body>
<p>
<img src="image-cliquable.gif"
alt="Plan du site du laboratoire"
longdesc="plandusite.html">
</body>
L'attribut alt fournit une description brve de l'image. Celle-ci devrait tre suffisante pour permettre
l'utilisateur de dcider s'il va suivre le lien donn par l'attribut longdesc vers la description plus dtaille,
ici "plandusite.html".
Veuillez consulter la section sur la prsentation visuelle des objets, images et applets pour des prcisions
sur la taille, l'alignement et les bordures de l'image.
40
7.3 L'inclusion gnrique : l'lment OBJECT

La plupart des agents utilisateurs possdent des mcanismes intgrs pour la restitution des types de
donnes communs, tels que le texte, les images GIF, les couleurs, les polices et une poigne d'lments
graphiques. Pour restituer les types de donnes qu'ils ne reconnaissent pas nativement, les agents
utilisateurs lancent en gnral des applications externes. L'lment OBJECT permet aux auteurs de mieux
contrler si les donnes devraient tre restitues de manire externe ou par un certain programme,
spcifi par l'auteur, qui restitue ces donnes au sein de l'agent utilisateur.
Dans le cas le plus gnral, l'auteur peut avoir besoin de spcifier trois types d'informations :
L'implmentation de l'objet inclus. Par exemple, si l'objet inclus est un applet d'horloge, l'auteur
doit indiquer la localisation du code excutable de l'applet ;
Les donnes restituer. Par exemple, si l'objet inclus est un programme pour restituer des
donnes de polices, l'auteur doit indiquer la localisation de ces donnes ;
Les valeurs supplmentaires requises par l'objet l'excution. Par exemple, certains applets
peuvent demander des valeurs initiales en paramtres.
L'lment OBJECT permet aux auteurs de spcifier tous ces trois types de donnes, mais il n'est pas
ncessaire de toutes les spcifier en une seule fois. Par exemple, certains objets peuvent ne pas requrir
de donnes (par exemple, un applet autonome qui effectue une petite animation). D'autres peuvent exiger
une initialisation l'excution. D'autres encore ne pas avoir besoin d'informations supplmentaires sur
l'implantation, i.e., l'agent utilisateur peut dj savoir de lui-mme comment restituer ce type de donnes
(par exemple, des images GIF).
Les auteurs spcifient l'implantation d'un objet et la localisation des donnes restituer via l'lment
OBJECT. Par contre, pour spcifier des valeurs d'excution, les auteurs utilisent l'lment PARAM, qui
est abord dans la section sur l'initialisation de l'objet.
L'lment OBJECT peut aussi apparatre en contenu de l'ment HEAD. tant donn que les agents
utilisateurs ne restituent gnralement pas les lments placs dans la section HEAD, les auteurs
devraient s'assurer qu'aucun lment OBJECT dans la section HEAD ne spcifie un contenu qui peut tre
restitu. Veuillez consulter la section sur le partage des donnes entre les cadres pour un exemple
d'inclusion de l'lment OBJECT dans l'lment HEAD.
7.3.1 Les rgles de restitution des objets
L'agent utilisateur doit interprter l'lment OBJECT selon les rgles de prsance suivantes :
1.
2.
L'agent utilisateur doit en premier essayer de restituer l'objet. Il ne devrait pas restituer le
contenu de l'lment, mais il doit l'examiner au cas o l'lment contiendrait d'ventuels enfants
directs qui soient des lments PARAM (voir la section sur l'initialisation de l'objet) ou bien des
lments MAP (voir la section sur les images cliquables ct client) ;
Si l'agent utilisateur est incapable de restituer l'objet, pour une raison ou pour une autre (non
configur pour, absence des ressources, architecture errone, etc.), il doit essayer de restituer son
contenu.
Dans l'exemple suivant, nous insrons un applet d'horloge analogique dans un document via l'lment
OBJECT. L'applet, crit dans le langage Python, ne requiert aucune donnes supplmentaires ni valeurs
d'excution. L'attribut classid spcifie la localisation de l'applet :
<p><object classid="http://www.miamachina.it/orologioanalogico.py">
</object>
Remarquez que l'horloge sera restitue ds l'interprtation de la dclaration de l'lment OBJECT par
l'agent utilisateur. Il est possible de diffrer la restitution d'un objet en effectuant une dclaration
pralable de cet objet (dcrit ci-dessous).
Les auteurs devraient remplir cette dclaration en y incluant un texte de remplacement comme contenu de
l'lment OBJECT, pour le cas o l'agent utilisateur ne pourrait pas restituer l'horloge.
<p><object classid="http://www.miamachina.it/orologioanalogico.py">
Une horloge anime.
</object>
Une consquence significative de la conception de l'lment OBJECT, c'est qu'elle offre un mcanisme
pour spcifier des restitutions alternatives de l'objet chacune des dclarations des lments OBJECT
41
imbriqus peut spcifier un type de contenu alternatif. Si l'agent utilisateur ne peut pas restituer l'lment
OBJECT le plus externe, il essaye d'en restituer le contenu, qui peut tre un autre lment OBJECT, etc.
Dans l'exemple suivant, nous imbriquons plusieurs dclarations d'lments OBJECT pour illustrer le
fonctionnement des restitutions alternatives. L'agent utilisateur essaye d'abord de restituer le premier
lment OBJECT qu'il peut, dans l'ordre suivant : (1) un applet reprsentant un globe terrestre interactif,
crit dans le langage Python, (2) une animation MPEG du globe, (3) une image GIF du globe et (4) un
texte de remplacement.
<p>

<object title="La terre vue de l'espace"
classid="http://www.observer.mars/LaTerre.py">

<object data="LaTerre.mpeg" type="application/mpeg">

<object data="LaTerre.gif" type="image/gif">

La <strong>Terre</strong> vue de l'espace.
</object>
</object>
</object>
La dclaration la plus externe spcifie un applet qui ne requiert ni donne ni valeurs initiales. La
deuxime dclaration spcifie une animation MPEG et, puisqu'elle ne dfinit pas la localisation d'une
l'implmentation pour traiter l'animation MPEG, compte sur l'agent utilisateur pour prendre en charge
celle-ci. Nous avons galement spcifi l'attribut type, de sorte que l'agent utilisateur, qui sait ne pas
pouvoir restituer un MPEG, n'essaiera mme pas de charger le fichier "LaTerre.mpeg" partir du rseau.
La troisime dclaration spcifie la localisation d'un fichier GIF et fournit un texte de remplacement au
cas o tous les autres mcanismes auraient chou.
Les donnes internes compares aux donnes externes. Les donnes restituer peuvent tre fournies de
deux faons : en interne ou partir d'une ressource externe. Tandis que la premire mthode donnera en
gnral une restitution plus rapide, elle ne conviendra pas quand il s'agira de restituer une grande
quantit de donnes.
Voici un exemple qui illustre la manire dont les donnes internes peuvent tre injectes dans l'lment
OBJECT :
<p>
<object id="horloge1"
classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
data="data:application/x-oleobject;base64, ...des donnes en base64...">
Une horloge.
</object>
Veuillez consulter la section sur la prsentation visuelle des objets, images et applets pour des prcisions
sur la taille, l'alignement et les bordures d'un objet.
7.3.2 L'initialisation de l'objet : l'lment PARAM
Les lments PARAM spcifient l'ensemble des valeurs qui peuvent tre requises l'excution par un
objet. Il peut y avoir un nombre quelconque d'lments PARAM dans le contenu d'un lment OBJECT,
ou APPLET, dans n'importe quel ordre, mais ceux-ci doivent se placer au dbut du contenu de l'lment
englobant OBJECT, ou APPLET.
La syntaxe des noms et de leurs valeurs est cense comprise par l'implmentation de l'objet. Ce document
ne spcifie pas les faons selon lesquelles les agents utilisateurs devraient ramener les couples
nom/valeur ni devraient interprter les noms apparaissant en double.
Nous revenons l'exemple avec l'horloge pour illustrer l'utilisation de l'lment PARAM : supposons que
l'applet admette deux paramtres d'excution qui dfinissent sa hauteur et sa largeur initiales. On peut
fixer une dimension initiale de 40x40 pixels l'aide de deux lments PARAM.
<p><object classid="http://www.miamachina.it/orologianalogico.py">
<param name="height" value="40" valuetype="data">
<param name="width" value="40" valuetype="data">
L'agent utilisateur ne reconnat pas les applications Python.
</object>
42
Dans l'exemple suivant, les donnes d'excution pour le paramtre Valeurs_initiales de l'objet sont
spcifies comme tant une ressource externe (un fichier GIF). La valeur de l'attribut valuetype est donc
fixe "ref" et la valeur de l'attribut value est l'URI qui dsigne la ressource.
<p><object classid="http://www.cadeau.com/gifappli"
standby="Chargement en cours...">
<param name="Valeurs_initiales"
value="./images/elvis.gif">
valuetype="ref">
</object>
Remarquez que nous avons galement spcifi l'attribut standby pour que l'agent utilisateur puisse
afficher un message pendant le chargement du mcanisme de restitution.
Quand un lment OBJECT est restitu, l'agent utilisateur doit rechercher les seuls contenus des lments
PARAM qui sont des enfants directs et les injecter dans l'objet OBJECT.
Ainsi, dans l'exemple suivant, si l'objet identifi par "obj1" est restitu, alors le paramtre "param1"
s'applique "obj1" (et non "obj2"). Si l'objet "obj1" n'est pas restitu et par contre l'objet "obj2" l'est,
alors le paramtre "param1" est ignor et "param2" s'applique "obj2". Si ni l'un ni l'autre lment
OBJECT n'est restitu, alors ni l'un ni l'autre lment PARAM ne s'applique.
<p>
<object id="obj1">
<param name="param1">
<object id="obj2">
<param name="param2">
</object>
</object>
7.3.3 Les systmes de nommage globaux des objets
La localisation de l'implmentation d'un objet est donne par un URI. Comme nous l'avons vu dans
l'introduction aux URI, le premier segment d'un URI absolu spcifie le systme de nommage [ndt.
naming scheme] utilis pour transfrer les donnes dsignes par l'URI. Pour les documents HTML, ce
systme est frquemment http . Certains applets pourraient employer d'autres systmes de nommage.
Par exemple, lors de la spcification d'un applet Java, les auteurs peuvent utiliser des URI qui
commencent par java et pour les applets ActiveX par clsid .
Dans l'exemple suivant, on insre un applet Java dans un document HTML.
<p><object classid="java:program.start">
</object>
Par la spcification de l'attribut codetype, l'agent utilisateur peut dcider s'il ramne l'application Java en
s'appuyant sur sa capacit le faire.
<object codetype="application/java-archive"
classid="java:program.start">
</object>
Certains systmes de restitution demandent des informations supplmentaires pour identifier leur
implmentation et on doit leur dire o trouver ces informations. Les auteurs peuvent donner une
indication de chemin l'implmentation de l'objet via l'attribut codebase.
<object codetype="application/java-archive"
classid="java:program.start">
codebase="http://foooo.bar.com/java/monimplementation/"
</object>
L'exemple suivant spcifie (avec l'attribut classid) un objet ActiveX via un URI qui commence par le
systme de nommage clsid . L'attribut data localise les donnes restituer (une autre horloge).
<p><object classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
data="http://www.acme.com/ole/horloge.stm">
Cette application n'est pas reconnue.
</object>
7.4 L'inclusion d'un applet : l'lment APPLET
Cet lment, qui est gr par tous les navigateurs compatibles avec Java, permet aux dveloppeurs
d'incorporer un applet Java dans un document HTML. Il est dconseill en faveur de l'lment OBJECT.
43
Le contenu de l'lment APPLET fais office de support d'informations de remplacement pour les agents
utilisateurs qui ne reconnaissent pas cet lment ou qui ne sont pas configurs cet instant pour grer les
applets. Sinon, les agents utilisateurs doivent ignorer le contenu.
EXEMPLE DCONSEILL :
Dans l'exemple suivant, l'lment APPLET inclut un applet Java au document. Comme aucun attribut
codebase n'est donn, l'applet est cens se trouver dans le mme rpertoire que le document courant.
<applet code="Bulles.class" width="500" height="500">
Un applet Java qui dessine des bulles animées.
</applet>
Cet exemple peut se rcrire avec un lment OBJECT, comme suit :
<p><object codetype="application/java"
classid="java:Bulles.class"
width="500" height="500">
Un applet Java qui dessine des bulles animées.
</object>
Les valeurs initiales peuvent tre fournies l'applet via l'lment PARAM.
EXEMPLE DCONSEILL :
L'exemple d'applet Java suivant :
<applet code="AudioItem" width="15" height="15">
<param name="son" value="Bonjour.au|Bienvenue.au">
Un applet Java qui joue un son de bienvenue.
</applet>
celui-ci peut se rcrire avec l'lment OBJECT, commes suit :
<object codetype="application/java"
classid="AudioItem"
width="15" height="15">
<param name="son" value="Bonjour.au|Bienvenue.au">
Un applet Java qui joue un son de bienvenue.
</object>
7.5 Les images cliquables
Les images cliquables permettent aux auteurs de spcifier des rgions dans une image, ou un objet, et
d'assigner une action particulire chacune de ces rgions (par exemple, ramener un document, lancer un
programme, etc.). Quand l'utilisateur active la rgion, l'action est excute.
Une image cliquable est cre en associant un objet une spcification de zones gomtriques sensibles
sur celui-ci.
Il existe deux types d'images cliquables :
Ct client. Quand l'utilisateur active une rgion d'une image cliquable ct client avec une
souris, l'agent utilisateur en interprte les coordonnes du pixel. L'agent utilisateur slectionne le
lien spcifi pour la rgion active et le suit ;
Ct serveur. Quand l'utilisateur active une rgion d'une image cliquable ct serveur, les
coordonnes du pixel du clic sont envoyes l'agent ct serveur, qui est spcifi par l'attribut
href de l'lment A. L'agent ct serveur interprte ces coordonnes et effectue une certaine
action.
Les images cliquables ct client sont prfres celles ct serveur pour au moins deux raisons : elles
sont accessibles aux personnes navigant avec des agents utilisateurs non-graphiques et elles renvoient une
rponse immdiate pour ce qui est de savoir si le pointeur se trouve sur une rgion active ou non.
7.5.1 Les images cliquables ct client : les lments MAP et AREA
L'lment MAP spcifie une image cliquable ct client (ou un autre mcanisme de navigation) qui peut
tre associe d'autres lments (IMG, OBJECT ou INPUT). L'image cliquable est associe un lment
via l'attribut usemap de celui-ci. L'lment MAP peut s'employer sans image associe pour des
mcanismes de navigation gnraux.
La prsence de l'attribut usemap sur un lment OBJECT implique que l'objet qui est inclus est une
image. En outre, quand l'lment OBJECT a une image cliquable ct client associe, l'agent utilisateur
44
peut produire une interaction utilisateur avec cet lment OBJECT, uniquement en fonction de l'image
cliquable ct client. Ceci permet aux agents utilisateurs (tels un navigateur vocal ou un robot) d'interagir
avec l'lment OBJECT sans devoir le traiter ; l'agent utilisateur peut mme choisir de ne pas ramener (ou
traiter) l'objet. Quand un lment OBJECT a une image cliquable associe, l'auteur ne devrait pas
compter sur le fait que l'objet sera ramen ou trait par tous les agents utilisateurs.
Le modle de contenu de l'lment MAP permet l'auteur les combinaisons suivantes :
1.
2.
Un ou plusieurs lments AREA. Ces lments n'ont aucun contenu mais spcifient les rgions
gomtriques de l'image cliquable et les liens qui sont associs chaque rgion. Remarquez que
les agents utilisateurs ne restituent pas en gnral les lment AREA. C'est pourquoi les auteurs
doivent fournir un texte de remplacement pour chaque lment AREA avec l'attribut alt (voir cidessous pour des renseignements sur la manire de spcifier un texte de remplacement) ;
Un contenu de type bloc. Ce contenu devrait comprendre les lments A qui spcifient les
rgions gomtriques de l'image cliquable et le lien associ chaque rgion. Remarquez que
l'agent utilisateur devraient restituer le contenu de type bloc d'un lment MAP. Les auteurs
devraient utiliser cette mthode pour crer des documents plus accessibles.
Quand un lment MAP contient un contenu mixte ( la fois des lments AREA et un contenu de type
bloc), les agents utilisateurs doivent ignorer les lments AREA.
Les auteurs devraient spcifier la gomtrie d'une image cliquable entirement avec des lments AREA,
ou entirement avec des lments A, ou entirement avec les deux si le contenu est mixte. Les auteurs
peuvent souhaiter mler le contenu, de sorte que les agents utilisateurs anciens prendront en charge les
cartographies spcifies par les lments AREA et les agents utilisateurs rcents tireront profit des
contenus en bloc plus toffs.
Si deux rgions dfinies ou plus se chevauchent, l'lment dfinissant une rgion qui apparat en premier
dans le document a priorit (i.e., rpond aux sollicitations de l'utilisateur).
Les agents utilisateurs et les auteurs devraient offrir des alternatives textuelles aux images cliquables
quand les graphiques ne sont pas disponibles ou les utilisateurs ne peuvent y accder. Par exemple, les
agents utilisateurs peuvent utiliser le texte de l'attribut alt pour crer des liens textuels la place des
images cliquables graphiques. De tels liens peuvent tre activs de diverses faons (clavier, commande
vocale, etc.).
Exemples d'images cliquables ct client
Dans l'exemple suivant, nous crons une image cliquable ct client pour l'lment OBJECT. Nous ne
voulons pas restituer le contenu d'image cliquable quand l'lment OBJECT est restitu, c'est pourquoi
nous dissimulons l'lment MAP dans le contenu de l'lment OBJECT. En consquence, le contenu
de l'lment MAP ne sera restitu qui si l'lment OBJECT ne peut pas l'tre.
<html>
<head>
<title>Le site sympa !</title>
</head>
<body>
<p><object data="barrenavigation1.gif" type="image/gif" usemap="#carte1">
<map name="carte1">
<p>Naviguer dans le site :
<a href="guide.html" shape="rect" coords="0,0,118,28">Plan d'accès</a> |
<a href="raccourci.html" shape="rect" coords="118,0,184,28">Entrée</a> |
<a href="recherche.html" shape="circle" coords="184,200,60">Recherche</a> |
<a href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">
Les dix premiers du hit-parade</a>
</map>
</object>
</body>
</html>
On peut vouloir que l'image cliquable soit restitue mme si l'agent utilisateur est incapable de restituer
l'lment OBJECT. Par exemple, on peut vouloir associer une image cliquable un lment OBJECT et
inclure une barre de navigation textuelle en bas de la page. Pour cela, nous dfinissons l'lment MAP en
dehors de l'lment OBJECT :
<html>
45
<head>
<title>Le site sympa !</title>
</head>
<body>
</object>
...le reste de la page ici...
<map name="carte1">
</map>
</body>
</html>
Dans l'exemple suivant, nous crons une image cliquable similaire, cette fois en employant l'lment
AREA. Remarquez l'utilisation du texte de l'attribut alt :
<p>Voici une barre de navigation.
</object>
<map name="carte1">
<area href="guide.html"
alt="Plan d'accès"
shape="rect"
coords="0,0,118,28">
<area href="recherche.html"
alt="Recherche"
shape="rect"
coords="184,0,276,28">
<area href="raccourci.html"
alt="Entrée"
shape="circle"
coords="184,200,60">
<area href="top10.html"
alt="Les dix premiers du hit-parade"
shape="poly"
coords="276,0,276,28,100,200,50,50,276,0">
</map>
Voici une variante utilisant l'lment IMG au lieu de OBJECT (avec la mme dclaration MAP) :
<p><img src="barrenavigation1.gif" usemap="#carte1" alt="Barre de navigation">
L'exemple suivant illustre la manire dont on peut partager des images cliquables.
Les lments OBJECT imbriqus sont utiles pour offrir des solutions de repli au cas o l'agent utilisateur
ne reconnatrait pas certains formats. Par exemple :
<p>
<object data="barrenavigation.png" type="image/png">
<object data="barrenavigation.gif" type="image/gif">
texte dcrivant l'image...
</object>
</object>
Si l'agent utilisateur ne reconnat pas le format PNG, celui-ci essaye de restituer l'image GIF. Si celui-ci
ne reconnat pas le format GIF (par exemple, parce qu'il s'agit d'un navigateur vocal), il se rabat par
dfaut sur la description textuelle fournie en contenu de l'lment OBJECT interne. Quand les lments
OBJECT sont imbriqus de cette manire, les auteurs peuvent partager des images cliquables entre eux :
<p>
<object data="barrenavigation.png" type="image/png" usemap="#carte1">
46
<object data="barrenavigation.gif" type="image/gif" usemap="#carte1">

<map name="carte1">
</map>
</object>
</object>
L'exemple suivant montre comment on peut spcifier des ancres pour crer des zones inactives dans une
image cliquable. La premire ancre spcifie une petite rgion circulaire sans lien associ. La deuxime
ancre spcifie une rgion circulaire plus grande de mme centre que le prcdent. Les deux combins
forment un anneau dont le centre est inactif et le bord actif. L'ordre des dfinitions des ancres est
important, car le petit cercle doit surclasser le grand cercle.
<map name="carte1">
<p>
<a shape="circle" coords="100,200,50">Je suis inactif.</a>
<a href="lien-anneau-externe.html" shape="circle" coords="100,200,250">Je suis actif.</a>
</map>
De la mme manire, l'attribut nohref de l'lment AREA dclare que la rgion gomtrique n'a pas de
lien associ.
7.5.2 Les images cliquables ct serveur
Les images cliquables ct serveur peuvent se rvler intressantes pour les cas o l'image cliquable
serait trop complique raliser ct client.
On ne peut dfinir une image cliquable ct serveur que pour les lments IMG et INPUT. Pour ce qui
est de l'lment IMG, celui-ci doit se trouver dans un lment A et l'attribut boolen ismap ([CI]) doit tre
prsent. Pour ce qui est de l'lment INPUT, celui-ci doit tre du type "image".
Quand l'utilisateur active le lien, en cliquant sur l'image, les cordonnes de ce clic l'cran sont
directement transmises au serveur qui hberge le document. Les coordonnes l'cran sont exprimes par
des valeurs en pixels d'cran relativement l'image. Pour des informations normatives sur la dfinition
d'un pixel et sur la manire de le mesurer, veuillez consulter la spcification [CSS1].
Dans l'exemple suivant, la rgion active dfinit un lien ct serveur. Ainsi, tout clic sur l'image entranera
la transmission des coordonns du point cliqu au serveur.
<p><a href="http://www.acme.com/cgi-bin/competition">
<img src="jeu.gif" ismap alt="Cible"></a>
Le point cliqu est transmis au serveur comme suit. L'agent utilisateur drive un nouvel URI partir de
l'URI spcifi par l'attribut href de l'lment A, en lui rajoutant la fin le caractre ? suivi des
coordonnes x et y , spares par une virgule. Le lien est alors suivi en utilisant le nouvel URI. Par
exemple, dans l'exemple donn, si l'utilisateur clique au point x=10, y=27 , alors l'URI driv sera
"http://www.acme.com/cgi-bin/competition?10,27".
7.6 La prsentation visuelle des images, objets et applets
Tous les attributs des lments IMG et OBJECT, concernant alignement, lespace autour des objets et les
bordures, sont dconseills en faveur des feuilles de style. Nous ne les dtaillerons donc pas.
7.6.1 La largeur et la hauteur
Quand ils sont spcifis, les attributs width et height indiquent l'agent utilisateur de surclasser les
dimensions naturelles de l'image, ou de l'objet, par leurs valeurs.
Quand l'objet est une image, elle est mise l'chelle. L'agent utilisateur devrait faire de son mieux pour
changer l'chelle d'un objet ou d'une image pour correspondre la largeur et la hauteur spcifies par
l'auteur. Remarquez que les longueurs exprimes en pourcentages sont fonction de l'espace horizontal et
vertical disponible cet instant, non des dimensions naturelles de l'image, de l'objet ou de l'applet.
47
Les attributs height et width donnent l'agent utilisateur une indication sur les dimensions d'une image ou
d'un objet, de sorte qu'il puisse rserver leur place et continuer restituer le document en attendant les
donnes d'image.
7.7 La manire de spcifier un texte de remplacement
Plusieurs lments non-textuels (IMG, AREA, APPLET et INPUT) laissent l'auteur spcifier un texte de
remplacement qui sert de contenu quand l'lment ne peut pas tre restitu normalement. La spcification
d'un texte de remplacement reprsente une aide pour les utilisateurs ne disposant pas de terminaux
d'affichage graphiques, pour les utilisateurs dont les navigateurs ne reconnaissent pas les formulaires,
pour les utilisateurs avec des dficiences visuelles, pour ceux qui utilisent des synthtiseurs de parole,
ceux qui ont dsactiv l'affichage des images de leurs agents utilisateurs graphiques, etc.
On doit spcifier l'attribut alt sur les lments IMG et AREA. Il est optionnel pour les lments INPUT et
APPLET.
Alors qu'un texte de remplacement peut tre trs utile, on doit l'employer bon escient. Les auteurs
devraient observer les principes directeurs suivants :
Ne pas spcifier un texte de remplacement non pertinent lors de l'inclusion d'images destines
la mise en forme d'une page par exemple, la dfinition alt="Puce rouge" serait inadquate pour
une image qui ajoute une puce rouge pour dcorer un titre ou un paragraphe. Auquel cas, le texte
de remplacement devrait tre la chane vide (""). De manire gnrale, on conseille aux auteurs
d'viter l'insertion d'images (invisibles car se confondant avec le fond de la page) pour la mise en
forme des pages ; les feuilles de style sont prvues cet effet ;
Ne pas spcifier un texte de remplacement dpourvu de signification (par exemple, "texte
fictif"). Cela va non seulement frustrer l'utilisateur, mais aussi ralentir les agents utilisateurs qui
doivent convertir le texte en parole ou en sortie Braille.
8 Les feuilles de style

Sommaire
1.
2.
3.
4.
5.
Introduction aux feuilles de style

Le rajout de style HTML
1. L'tablissement du langage de feuille de style par dfaut
2. Les informations de style en-ligne
3. Les informations de style dans l'en-tte : l'lment STYLE
4. Les types de mdia
Les feuilles de style externes
1. Les feuilles de style prfres et alternatives
2. La spcification des feuilles de style externes
Les feuilles de style en cascade
1. L'hritage et la cascade
La dissimulation des donnes de style l'agent utilisateur
8.1 Introduction aux feuilles de style

Les feuilles de style reprsentent un progrs majeur pour les concepteurs de pages Web, en dveloppant
les possibilits d'amliorer l'aspect de leurs pages. Dans les milieux scientifiques au sein desquels le Web
a t conu, les personnes taient plus attaches au contenu de leurs documents qu' leur prsentation. Au
fur et mesure de la dcouverte du Web par des personnes issues d'horizons plus larges, les limitations
de HTML devinrent la source de frustrations continues et les auteurs furent forcs de contourner les
limitations stylistiques de HTML. Bien que l'intention tait louable, (amliorer la prsentation des pages
Web), les techniques employes pour le faire ont eu des effets secondaires malheureux. Ces techniques
fonctionnent parfois pour certaines personnes, mais pas tout le temps pour toutes les personnes. Elles
comprennent :
l'utilisation d'extensions HTML propritaires ;

la conversion du texte en une image ;
48
l'utilisation d'images pour contrler l'espacement ;

l'utilisation des tables pour la mise en page ;
l'criture d'un programme plutt que d'utiliser HTML.
Ces techniques accroissent considrablement la complexit des pages Web, offrent peu de souplesse,
souffrent de problmes d'interoprabilit et sont une preuve pour les personnes avec des handicaps.
Les feuilles de style rsolvent tous ces problmes en mme temps qu'elles remplacent l'ventail limit des
mcanismes de prsentation dans HTML. Avec les feuilles de style, il devient facile de spcifier
l'espacement entre les lignes de texte, l'indentation des lignes de texte, la couleur utilise pour le texte et
l'arrire-plan, la taille et le style de la police et quantit d'autres dtails.
Par exemple, la courte feuille de style CSS ( Cascading Style Sheet ) suivante (stocke dans le fichier
"special.css") dfinit la couleur du texte d'un paragraphe en vert et l'entoure avec une bordure pleine
rouge :
P.special {
color : green;
border: solid red;
}
L'auteur peut relier cette feuille de style son document HTML source avec l'lment LINK :
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylevert.css">
</head>
<body>
<p class="special">Le texte de ce paragraphe devrait être vert.
</body>
</html>
HTML 4 apporte la gestion des fonctionnalits de feuille de style suivantes :
La souplesse de la mise en place des informations de style
Le placement des feuilles de style dans des fichiers spars afin de faciliter leur rutilisation. Il
est parfois utile d'inclure des instructions de restitution dans le document auquel elles
s'appliquent, soit regroupes au dbut du document, soit dans les attributs des lments tout au
long du corps du document. Afin de faciliter la gestion du style pour un site entier, cette
spcification dcrit comment utiliser les en-ttes HTTP pour que les feuilles de style s'appliquent
un document.
L'indpendance vis--vis des langages de feuille de style
Cette spcification n'attache pas HTML un langage de style particulier. Cela permet
l'utilisation d'un panel de langages, par exemple les plus simples pour la majorit des utilisateurs
et les plus complexes pour une minorit d'utilisateurs aux besoins trs spcialiss. Les exemples
inclus ci-dessous utilisent tous le langage CSS , mais d'autres langages de feuille de style
seraient possibles.
La cascade
C'est la facult de certains langages de feuilles de style, tel que CSS, d'assembler les
informations de style provenant de plusieurs sources. Celles-ci pourraient tre, par exemple, la
charte de style d'une entreprise, les styles communs un groupe de documents et les styles
propres un seul document. En les stockant sparment, les feuilles de style peuvent tre
rutilises, ce qui simplifie l'dition et utilise plus efficacement les caches du rseau. La cascade
dfinit une squence ordonne de feuilles de style dans laquelle les dernires feuilles de style ont
une priorit plus leve que les premires. Certains langages de feuille de style ne grent pas la
cascade.
Les dpendances aux mdias
HTML permet aux auteurs de spcifier les documents indpendamment du mdia. Cela permet
aux utilisateurs l'accs aux pages Web au moyen d'une grande varit d'appareils et de mdias,
par exemple, les crans graphiques des ordinateurs tournant sous Windows, Macintosh OS ou
X11, les appareils de tlvision, les tlphones portables spciaux et les agendas lectroniques,
les navigateurs synthse vocale et les appareils tactiles Braille.
Les feuilles de style, par contraste, s'applique un mdia spcifique ou un groupe de mdias.
Une feuille de style prvue pour un cran peut tre ventuellement utilisable pour l'impression,
mais sera de peu d'utilit pour un navigateur synthse vocale. Cette spcification permet de
49
dfinir les catgories gnrales de mdias pour lesquels une feuille de style donne peut
s'appliquer. Ceci permet aux agents utilisateurs d'viter la recherche de feuilles de style
innapropries. Les langages de feuilles de style peuvent inclure des mcanismes dcrivant les
dpendances aux mdias dans la mme feuille de style.
Les styles alternatifs
Les auteurs peuvent vouloir offrir aux lecteurs plusieurs prsentations d'un document. Par
exemple, une feuille de style pour la restitution des documents compacts dans une petite taille de
police, ou une autre qui spcifie une taille de police plus grande pour une meilleure lisibilit.
Cette spcification permet aux auteurs de spcifier une feuille de style prfre tout comme les
feuilles alternatives qui visent des utilisateurs ou des mdias spcifiques. Les agents utilisateurs
devraient donner aux utilisateurs la possibilit de choisir entre plusieurs feuilles de styles
alternatives comme de dsactiver les feuilles de style.
Le souci de l'efficacit
Certaines personnes ont exprims des inquitudes sur l'efficacit des feuilles de style. Par
exemple, la recherche d'une feuille de style externe peut retarder la prsentation complte
l'utilisateur. Une question similaire surgit pour l'en-tte d'un document qui contient une longue
liste de rgles de style.
La proposition actuelle rpond ces interrogations en permettant aux auteurs d'inclure des
instructions de restitution l'intrieur de chaque lment HTML. Les indications de restitution
sont alors toujours disponibles au moment o l'agent utilisateur veut restituer chacun des
lments.
Dans de nombreux cas, les auteurs bnficieront d'une feuille de style commune un groupe de
documents. Auquel cas, l'parpillement des rgles de style travers le document entranera en
ralit une efficacit bien moindre que l'utilisation d'une feuille de style relie, puisque la feuille
de style sera dj prsente dans le cache local pour la plupart des documents. La disponibilit
publique de bonnes feuilles de style encouragera cette tendance.
8.2 Le rajout de style HTML
8.2.1 L'tablissement du langage de feuille de style par dfaut
Les auteurs doivent spcifier le langage de feuille de style des informations de style associes au
document HTML.
Les auteurs devraient utiliser l'lment META pour dfinir le langage de feuille de style par dfaut du
document. Par exemple, pour dfinir le langage CSS par dfaut, les auteurs devraient inclure la
dclaration suivante dans la section HEAD de leurs documents :
<meta http-equiv="Content-Style-Type" content="text/css">
On peut aussi dfinir le langage de feuille de style par dfaut avec les en-ttes HTTP. La dclaration
META prcdente quivaut l'en-tte HTTP :
Content-Style-Type: text/css
Les agents utilisateurs devraient dterminer le langage de feuille de style par dfaut du document en
suivant les tapes suivantes (de la plus haute priorit la plus basse) :
1.
2.
3.
Si plusieurs dclarations META ventuelles spcifient une valeur "Content-Style-Type", c'est la

dernire dans le flux de caractres qui dtermine le langage de feuille de style par dfaut ;
Sinon, quand plusieurs en-ttes HTTP ventuelles spcifient un champs "Content-Style-Type",
c'est le dernier dans le flux de caractres qui dtermine le langage de la feuille de style par
dfaut ;
Sinon, le type du langage de feuille de style par dfaut est "text/css".
8.2.2 Les informations de style en-ligne

Lattribut style spcifie les informations de style pour l'lment courant.
Cet exemple CSS spcifie les informations de couleur et de police du texte dans un paragraphe
particulier.
<p style="font-size: 12pt; color: fuchsia">Les feuilles
de style ne sont-elles pas merveilleuses ?
Dans CSS, les dclarations des proprits prennent la forme nom : valeur et sont spares par des
points-virgules.
50
Pour une souplesse optimale, les auteurs devraient dfinir les styles dans des feuilles de style externes.
8.2.3 Les informations de style dans l'en-tte : l'lment STYLE
L'lment STYLE permet aux auteurs de placer des rgles de style dans l'en-tte du document. HTML
autorise un nombre quelconque d'lments STYLE dans la section HEAD d'un document.
Les agents utilisateurs, qui ne reconnaissent pas les feuilles de style ou bien le langage de feuille de style
spcifique utilis par un lment STYLE, doivent dissimuler le contenu de l'lment STYLE. La
restitution du contenu de cet lment en tant que partie du texte du document constitue une erreur.
Certains langages de feuilles de style grent une syntaxe pour dissimuler le contenu aux agents
utilisateurs non conformes.
La syntaxe des donnes de style dpend du langage de feuille de style.
Certaines implmentations de feuille de style peuvent autoriser une plus grande varit de rgles dans
l'lment STYLE que dans l'attribut style. Par exemple, avec CSS, on peut dclarer les rgles l'intrieur
d'un lment STYLE pour :
toutes les instances d'un lment HTML particulier (par exemple, tous les lments P, tous les
lments H1, etc.) ;
toutes les instances d'un lment HTML appartenant une classe particulire (i.e., les lments
dont l'attribut class possde une valeur) ;
les instances uniques d'un lment HTML (i.e., un lment dont l'attribut id possde une valeur).
Les rgles de prsance et d'hritage des rgles de style dpendent du langage de feuille de style.
La dclaration CSS suivante, avec l'lment STYLE, met une bordure autour de chacun des lments H1
du document et les centre dans la page.
<head>
h1 {border-width: 1; border: solid; text-align: center}
</style>
</head>
Pour indiquer que ces informations de style ne devraient s'appliquer qu'aux lments H1 appartenant
une classe particulire, nous modifions la rgle de cette faon :
<head>
h1.maclasse {border-width: 1; border: solid; text-align: center}
</style>
</head>
<body>
<h1 class="maclasse"> Cet H1 est touché par notre style </h1>
<h1> Celui-ci ne l'est pas </h1>
</body>
Finalement, pour restreindre la porte des informations de style une instance unique d'lment H1,
spcifions l'attribut id :
<head>
#monid {border-width: 1; border: solid; text-align: center}
</style>
</head>
<body>
<h1 class="maclasse"> Cet H1 n'est pas touché </h1>
<h1 id="monid"> Cet H1 est touché par le style </h1>
<h1> Cet H1 n'est pas touché </h1>
</body>
Tandis qu'on peut dfinir des informations de style pour pratiquement tous les lments HTML, deux
lments, DIV et SPAN, sont particulirement utiles dans la mesure o ils n'imposent aucune smantique
de prsentation (en dehors de la distinction type bloc/type en-ligne). Lorsqu'ils sont utiliss conjointement
avec les feuilles de style, ces lments permettent aux utilisateurs un dveloppement HTML illimit,
particulirement quand ils sont utiliss avec les attributs class et id.
51
Dans l'exemple suivant, nous utilisons l'lment SPAN pour spcifier le style de la police des premiers
mots d'un paragraphe en petites capitales.
<head>
span.sc-ex { font-variant: small-caps; }
</style>
</head>
<body>
<p><span class="sc-ex">Les premiers mots</span> de
ce paragraphe en petites capitales.
</body>
Dans l'exemple suivant, nous utilisons l'lment DIV et l'attribut class pour dfinir la justification du
texte d'une succession de paragraphes qui constituent la section de rsum d'un article scientifique. Ces
informations de style pourraient tre rutilises pour d'autres sections de rsum en utilisant l'attribut
class ailleurs dans le document.
<head>
div.resume { text-align: justify }
</style>
</head>
<body>
<div class="resume">
<p>Les outils de gestion de contenu Web
permettent de résoudre la plupart des problèmes
de production liés aux sites web tout en jetant
un pont entre les différents supports de diffusion
de l'information.</p>
<p>Mais l'engouement dont bénéficient ces
logiciels ne doit pas faire oublier que leur
déploiement reste difficile et
que leur marché est très mouvant.</p>
</div>
</body>
8.2.4 Les types de mdia
HTML autorise les auteurs concevoir des documents qui exploitent les caractristiques du mdia sur
lequel le document doit tre restitu (par exemple, cran graphique, cran de tlvision, appareil de
poches, navigateur synthse vocale, appareil tactile Braille, etc.). En spcifiant l'attribut media, les
auteurs permettent aux agents utilisateurs de charger et appliquer les feuilles de style de manire
slective. Veuillez consulter la liste des descripteurs de mdia reconnus.
Les dclarations des exemples suivants s'appliquent aux lments H1. Pour une projection dans une
runion de travail, toutes leurs instances apparatront en bleu. Pour une impression papier, toutes les
instances seront centres.
<head>
<style type="text/css" media="projection">
H1 { color: blue}
</style>
<style type="text/css" media="print">
h1 { text-align: center }
</style>
Cet exemple ajoute des effets sonores aux ancres pour une sortie vocale :
<style type="text/css" media="aural">
a { cue-before: uri(ding.aiff); cue-after: uri(dong.wav)}
</style>
</head>
La commande du mdia est particulirement intressante quand elle s'applique aux feuilles de style
externes, dans la mesure o les agents utilisateurs peuvent conomiser du temps en ne chargeant partir
52
du rseau que celles des feuilles de style qui concernent l'appareil courant. Par exemple, les navigateurs
vocaux peuvent s'pargner le chargement des feuilles de style conues pour une restitution visuelle.
8.3 Les feuilles de style externes
Les auteurs peuvent sparer les feuilles de style des documents HTML. Ce qui offre plusieurs avantages :
les auteurs et les gestionnaires de site Web peuvent partager les feuilles de style entre nombre de
documents (et de sites) ;
les auteurs peuvent changer la feuille de style sans devoir apporter des modifications au
document ;
les agents utilisateurs peuvent charger les feuilles de style slectivement (en fonction des
descriptions des mdias).
8.3.1 Les feuilles de style prfres et alternatives

HTML permet aux auteurs d'associer un nombre quelconque de feuilles de style externes un document.
Le langage de feuille de style dfinit comment plusieurs feuilles de style externes interagissent (par
exemple, les rgles de cascade de CSS).
Les auteurs peuvent spcifier un certain nombre de feuilles de style mutuellement exclusives appeles
feuilles de style alternatives. L'utilisateur peut slectionner sa feuille de style favorite parmi celles-ci en
fonction de ses prfrences. Par exemple, l'auteur peut spcifier une feuille de style conue pour les petits
crans et une autre pour les utilisateurs dont la vision est faible (par exemple, avec une grande taille de
police). Les agents utilisateurs devraient permettre aux utilisateurs d'oprer une slection entre les feuilles
de style alternatives.
L'auteur peut spcifier que l'une des feuilles de style alternatives est la prfre. Les agents utilisateurs
devraient appliquer la feuille de style prfre de l'auteur, moins que l'utilisateur n'ait slectionn une
autre alternative.
L'auteur peut regrouper plusieurs feuilles de style alternatives (y compris sa prfre) sous un seul nom
de style. Quand un utilisateur slectionne un style nomm, l'agent utilisateur doit appliquer toutes les
feuilles de style de ce nom. Les agents utilisateurs ne doivent pas appliquer les feuilles de style
alternatives avec un nom diffrent.
L'auteur peut aussi spcifier des feuilles de style persistentes que l'agent utilisateur doit appliquer en plus
des ventuelles feuilles de style alternatives.
8.3.2 La spcification des feuilles de style externes
Les auteurs spcifient les feuilles de style externes au moyen des attributs suivants de l'lment LINK :
Donner comme valeur de l'attribut href la localisation du fichier de la feuille de style. Cette
valeur de l'attribut href est un URI.
Donner comme valeur de l'attribut type l'indication du langage de la ressource relie (la feuille
de style). Cela vite l'agent utilisateur de charger une feuille de style dans un langage de feuille
de style non reconnu ;
Indiquer si la feuille de style est persistente, prfre ou alternative :
o pour une feuille de style persistente, donner la valeur "stylesheet" l'attribut rel et ne
pas mettre d'attribut title ;
o pour une feuille de style prfre, donner la valeur "stylesheet" l'attribut rel et
nommer la feuille de style en spcifiant l'attribut title ;
o pour une feuille de style alternative, donner la valeur "alternate stylesheet" l'attribut
rel et nommer la feuille de style en spcifiant l'attribut title.
Les agents utilisateurs devraient fournir aux utilisateurs les moyens de passer en revue et de choisir les
feuilles de style alternatives dans une liste. On recommande la valeur de l'attribut title comme nom pour
chaque option.
Dans cet exemple, nous spcifions d'abord une feuille de style persistente qui se trouve dans le fichier
"meustilu.css" :
<link href="meustilu.css" rel="stylesheet" type="text/css">
53
En dfinissant l'attribut title, on en fait la feuille de style prfre de l'auteur :

<link href="meustilu.css" title="compact" rel="stylesheet" type="text/css">
En rajoutant le mot-cl "alternate" la valeur de l'attribut rel, on en fait une feuille de style alternative :
<link href="meustilu.css" title="Moyenne" rel="alternate stylesheet" type="text/css">
Pour plus de renseignements sur les feuilles de style externes, veuillez consulter la section sur les liens et
les feuilles de style externes.
L'auteur peut aussi utiliser l'lment META pour tablir la feuille de style prfre du document. Par
exemple, pour mettre compact comme feuille de style prfre (ci-dessus), l'auteur peut inclure la
ligne suivante dans la section HEAD :
<meta http-equiv="Default-Style" content="compact">
On peut encore spcifier la feuille de style prfre au moyen d'un en-tte HTTP. La dclaration META
prcdente quivaut l'en-tte HTTP suivant :
Default-Style: "compact"
Si deux ou plus dclarations META, ou en-ttes HTTP, spcifient la feuille de style prfre, c'est la
dernire qui sera retenue. Les en-ttes HTTP sont censs survenir avant la section HEAD du document
dans ce cas.
Si deux ou plus lments LINK spcifient une feuille de style prfre, le premier est retenu.
Les feuilles de style prfres au moyen d'lments META ou d'en-ttes HTTP ont priorit sur celles
spcifies avec l'lment LINK.
8.4 Les feuilles de style en cascade
Les langages de feuille de style en cascade, tel que CSS, autorisent l'assemblage des informations de
style provenant de plusieurs sources. Pour dfinir une cascade, l'auteur spcifie une succession d'lments
LINK et/ou STYLE. Les informations de style se rpandent en cascade selon l'ordre d'apparition des
lments dans la section HEAD.
Remarque : Cette spcification ne prcise pas la manire dont les feuilles de styles issues de diffrents
langages de style cascadent. Les auteurs devraient viter de mlanger les langages de feuilles de style.
Dans l'exemple suivant, nous spcifions deux feuilles de style alternatives nommes "compact". Si
l'utilisateur slectionne le style compact , l'agent utilisateur doit appliquer ces deux feuilles de style,
ainsi que la feuille de style persistente "commune.css". Si l'utilisateur slectionne imprimer grand ,
seules la feuille de style alternative "imprimergrand.css" et la feuille de style persistente "commun.css"
s'appliqueront.
<link rel="alternate stylesheet" title="compact" href="petit-base.css" type="text/css">
<link rel="alternate stylesheet" title="compact" href="petit-extras.css" type="text/css">
<link rel="alternate stylesheet" title="imprimer grand"
href="imprimergrand.css" type="text/css">
<link rel="stylesheet" href="commun.css" type="text/css">
Voici un exemple de cascade qui fait intervenir les deux lments LINK et STYLE.
<link rel="stylesheet" href="entreprise.css" type="text/css">
<link rel="stylesheet" href="rapport-technique.css" type="text/css">
p.special { color: rgb(230, 100, 180) }
</style>
8.4.1 L'hritage et la cascade
Quand l'agent utilisateur veut restituer un document, il doit trouver les valeurs des proprits de style, par
exemple, la famille de police, le style de la police, la taille, la hauteur de ligne, la couleur du texte et ainsi
de suite. Le mcanisme exact dpend du langage de feuille de style, mais la description suivante est
applicable en gnral :
Le mcanisme de cascade est utilis quand un certain nombre de rgles de style s'appliquent toutes
directement un lment. Le mcanisme permet l'agent utilisateur de ranger les rgles selon leur
spcificit, pour dterminer quelle rgle s'applique. Si aucune rgle n'est trouve, l'tape suivante va
dpendre de la proprit de style, si elle peut s'hriter ou non. Les proprits ne peuvent pas toutes
s'hriter. Auquel cas, le langage de feuille de style fournit des valeurs par dfaut qu'il faut utiliser quand il
n'y a aucune rgle explicite pour un lment particulier.
Si la proprit peut s'hriter, l'agent utilisateur examine l'lment englobant immdiat pour voir si une
rgle s'y applique. Ce processus continue jusqu' ce qu'une rgle appliquable soit trouve. Ce mcanisme
54
autorise une spcification compacte des feuilles de style. Par exemple, l'auteur peut spcifier la famille de
la police de tous les lments de BODY par une seule rgle applique l'lment BODY.
8.5 La dissimulation des donnes de style l'agent utilisateur
Certains langages de feuille de style grent une syntaxe qui permet aux auteurs de dissimuler le contenu
de l'lment STYLE aux agents utilisateurs non conformes.
Cet exemple montre, dans le cas de CSS, la manire de masquer par un commentaire le contenu de
l'lment STYLE pour s'assurer que les agents utilisateurs non conformes ne vont pas le restituer comme
du texte.
<!-h1 { color: red }
p { color: blue}
-->
</style>
9 L'alignement, les styles de police et les rgles horizontales

Sommaire
1.
2.
3.
Le formatage
1. La couleur d'arrire-plan
2. L'alignement
3. Les objets flottants
Faire flotter un objet
Faire flotter le texte autour d'un objet
Les polices
1. Les lments de style de police : les lments TT, I, B, BIG, SMALL, STRIKE, S et U
2. Les lments modificateurs de police : les lments FONT et BASEFONT
Les rgles : l'lment HR
Cette section de la spcification aborde certains lments et attributs HTML qui peuvent tre utiliss
pour la mise en forme visuelle des lments. Nombre d'entre eux sont dconseills.
9.1 Le formatage
9.1.1 La couleur d'arrire-plan
Lattribut bgcolor tablit la couleur d'arrire-plan du canevas du corps du document (l'lment BODY) ou
des tables (les lments TABLE, TR, TH et TD). On peut utiliser des attributs supplmentaires avec
l'lment BODY pour spcifier la couleur du texte.
Cet attribut est dconseill en faveur des feuilles de style pour spcifier les informations de couleur
d'arrire-plan.
9.1.2 L'alignement
Il est possible d'aligner les lments de bloc (tables, images, objets, paragraphes, etc.) sur le canevas avec
l'attribut align. Bien que cet attribut puisse se placer sur de nombreux lments HTML, l'ventail des
valeurs possibles diffre parfois d'un lment l'autre. Ici nous abordons seulement la signification de
l'attribut align pour le texte.
Lattribut align spcifie l'alignement horizontal de son lment par rapport son environnement. Les
valeurs possibles sont :
left : les lignes de texte sont restitues pousses gauche ;

center : les lignes de texte sont centres ;
55
right: les lignes de texte sont restitues pousses droite ;

justify : les lignes de texte sont justifies des deux cts.
La valeur par dfaut est tributaire de la direction de base du texte. Pour un texte de gauche--droite, la
valeur par dfaut est align=left, tandis que pour un texte de droite--gauche c'est align=right.
EXEMPLE DCONSEILL :
Cet exemple centre un titre sur le canevas.
<h1 align="center"> Comment tailler le bois </h1>
En utilisant le langage CSS, par exemple, on pourrait obtenir le mme effet par :
<head>
<title>Comment tailler le bois</title>
h1 { text-align: center}
</style>
<body>
<h1> Comment tailler le bois </h1>
Remarquez que cela centrerait tous les lments H1. On pourrait rduire la porte du style en plaant un
attribut class sur l'lment :
<head>
h1.bois {text-align: center}
</style>
<body>
<h1 class="bois"> Comment tailler le bois </h1>
EXEMPLE DCONSEILL :
De la mme faon, pour aligner un paragraphe droite sur le canevas avec l'attribut HTML align, on
pourrait avoir :
<p align="right">...Beaucoup de texte...
ce qui donnerait avec CSS :
<head>
p.monparagraphe {text-align: right}
</style>
<body>
<p class="monparagraphe">...Beaucoup de texte...
EXEMPLE DCONSEILL :
Pour aligner un ensemble de paragraphes droite, regroupez-les avec un lment DIV :
<div align="right">
<p>...texte du premier paragraphe...
<p>...texte du deuxime paragraphe...
<p>...texte du troisime paragraphe...
</div>
Avec CSS, la proprit text-align est hrite de l'lment parent ; on peut donc utiliser :
<head>
div.mesparagraphes {text-align: right}
</style>
<body>
<div class="mesparagraphes">
<p>...texte du premier paragraphe...
<p>...texte du deuxime paragraphe...
<p>...texte du troisime paragraphe...
</div>
Pour centrer le document entier avec CSS :
<head>
56
body {text-align: center}

</style>
<body>
...le corps est centr...
</body>
L'lment CENTER quivaut exactement la spcification de la valeur "center" sur l'attribut align de
l'lment DIV. L'lment CENTER est dconseill.
9.1.3 Les objets flottants
Les images et les objets peuvent apparatre directement en-ligne ou peuvent flotter vers un ct de la
page, altrant temporairement les marges du texte qui peut s'couler sur l'un ou l'autre bord de l'objet.
Faire flotter un objet
L'attribut align des objets, des images, des tables, des cadres, etc., entrane l'objet flotter vers la marge
gauche ou celle de droite. Les objets flottants commencent en gnral une nouvelle ligne. Cet attribut
admet les valeurs suivantes :
left : fait flotter l'objet vers la marge gauche courante. Le texte qui suit s'coule le long du flanc
droit de l'image ;
right : fait flotter l'objet vers la marge droite courante. Le texte qui suit s'coule le long du flanc
gauche de l'image.
EXEMPLE DCONSEILL :
L'exemple suivant montre comment faire flotter un lment IMG vers la marge gauche courante du
canevas.
<img align="left" src="http://foo.com/animage.gif" alt="mon chat">
Certains attributs d'alignement admettent galement la valeur "center", qui n'entrane aucun flottement,
mais centre l'objet l'intrieur des marges courantes. Cependant, pour les lments P et DIV, la valeur
"center" entrane le centrage de leur contenu.
Faire flotter le texte autour d'un objet
Lattribut clear de l'lment BR, contrle l'coulement du texte autour des objets flottants.
Il spcifie o la prochaine ligne devrait apparatre, dans un navigateur visuel, aprs le saut de ligne
provoqu par cet lment. Cet attribut prend en compte les objets flottants (images, tables, etc.). Les
valeurs possibles sont :
none : la ligne suivante commencera normalement. C'est la valeur par dfaut ;

left : la ligne suivante commencera la ligne la plus proche en-dessous d'ventuels
objets flottants sur la marge de gauche ;
right : la ligne suivante commencera la ligne la plus proche en-dessous d'ventuels
objets flottants sur la marge de droite ;
all : la ligne suivante commencera la ligne la plus proche en-dessous d'ventuels
objets flottants sur l'une ou l'autre marge.
En faisant appel aux feuilles de style, on pourrait spcifier que tous les sauts de ligne devraient se
comporter de cette faon pour les objets (images, tables, etc.) flottant contre la marge gauche. Avec CSS,
on pourrait obtenir cet effet comme suit :
br { clear: left }
</style>
Pour spcifier ce comportement sur une instance particulire de l'lment BR, on pourrait combiner
l'indication de style et l'attribut id :
<head>
...
57
br#monbr { clear: left }
</style>
</head>
<body>
<p>...
9.2 Les polices
Les lments HTML suivants spcifient des informations de police. Bien qu'ils ne soient pas tous
dconseills, on dcourage leur utilisation en faveur des feuilles de style.
9.2.1 Les lments de style de police : les lments TT, I, B, BIG, SMALL, STRIKE, S et U
La restitution des lments de style de police dpend de l'agent utilisateur. Ce qui suit n'est qu'une
description informative.
TT : restitu sous la forme d'un texte de tlimprimeur ou chasse fixe [ndt. monospaced].
I : restitu sous la forme d'un texte en italique.
B : restitu sous la forme d'un texte en caractres gras.
BIG : restitue le texte dans une grande taille de police.
SMALL : restitue le texte dans une petite taille de police.
STRIKE et S : Dconseill. Restituent un texte barr.
U : Dconseill. Restitue un texte soulign.
La phrase suivante montre divers types de texte :
<p> <b>gras</b>, <i>italique</i>, <b><i>gras italique</i></b>,
<tt>téléimprimeur</tt>, texte <big>grand</big> et <small>petit</small>.
Cette phrase pourrait tre restitue comme suit :
Il est possible d'obtenir une bien plus grande diversit d'effets de police en utilisant les feuilles de style.
Pour spcifier un texte italique en bleu dans un paragraphe avec CSS :
<head>
p#mypar {font-style: italic; color: blue}
</style>
</head>
<p id="mypar">...Beaucoup de texte en italique de couleur bleue...
Les lments de style de police doivent tre correctement imbriqus. La restitution des lments de style
de police imbriqus dpend de l'agent utilisateur.
9.2.2 Les lments modificateurs de police : les lments FONT et BASEFONT
Les lments FONT et BASEFONT sont dconseills.
L'lment FONT change la taille de la police et la couleur du texte qu'il contient.
L'lment BASEFONT tablit la taille de police de base (en utilisant l'attribut size). Les changements de
taille de police obtenus avec l'lment FONT sont relatifs la taille de police de base tablie par l'lment
BASEFONT. Si l'lment BASEFONT n'est pas prsent, alors la taille de police de base vaut "3".
EXEMPLE DCONSEILL :
L'exemple suivant illustre les diffrences entre les sept tailles de police disponibles avec l'lment
FONT :
<p><font size=1>size=1</font>
<font size=2>size=2</font>
Ceci pourrait tre restitu par :
58
L'illustration suivante montre l'effet des tailles de police relatives par rapport une taille de police de
base valant "3" :
La taille de police de base ne s'applique pas aux titres, sauf quand ceux-ci sont modifis par un lment
FONT avec un changement de taille de police relatif.
9.3 Les rgles : l'lment HR
L'lment HR entrane la restitution d'une rgle horizontale par l'agent utilisateur.
La quantit d'espace vertical insr entre une rgle et le contenu qui l'entoure dpend de l'agent
utilisateur.
EXEMPLE DCONSEILL :
Cet exemple centre les rgles, en les dimensionnant la moiti de la largeur disponible entre les marges.
La rgle du haut a une paisseur par dfaut tandis que les deux du bas sont fixes 5 pixels. La rgle du
bas devrait tre restitue dans une couleur pleine sans ombrage :
<hr width="50%" align="center">
<hr size="5" width="50%" align="center">
<hr noshade size="5" width="50%" align="center">
La restitution de ces rgles pourraient tre la suivante :
10 Les cadres
Sommaire
1.
2.
3.
4.
5.
Introduction aux cadres

La disposition des cadres
1. L'lment FRAMESET
Les ranges et les colonnes
Les jeux d'encadrement imbriqus
Le partage des donnes entre les cadres
2. L'lment FRAME
L'tablissement du contenu initial d'un cadre
La restitution visuelle d'un cadre
La spcification des informations du cadre cible
1. L'tablissement de la cible par dfaut des liens
2. La smantique de cible
Le contenu de remplacement
1. L'lment NOFRAMES
Les cadres en-ligne : l'lment IFRAME
10.1 Introduction aux cadres

Les cadres (en anglais frames ) HTML permettent aux auteurs de prsenter les documents selon des
vues multiples, qui peuvent tre des fentres indpendantes ou bien des sous-fentres. Les vues multiples
offrent aux concepteurs les moyens de garder visibles certaines informations, tandis que d'autres vues
sont dfiles ou remplaces. Par exemple, dans la mme fentre, un cadre pourrait afficher une bannire
statique, un deuxime cadre afficher un menu de navigation et un troisime le document principal qui
peut dfiler ou tre remplac au gr de la navigation via le deuxime cadre.
Voici un document avec des cadres simple :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
<html>
<head>
<title>Un document avec un jeu d'encadrement simple</title>
59
</head>
<frameset cols="20%, 80%">
<frameset rows="100, 200">
<frame src="contenu_du_cadre1.html">
<frame src="contenu_du_cadre2.gif">
</frameset>
<noframes>
<p>Ce document avec un jeu d'encadrement contient :
<ul>
<li><a href="contenu_du_cadre1.html">Un contenu sympa</a>
<li><img src="contenu_du_cadre2.gif" alt="Une image sympa">
<li><a href="contenu_du_cadre3.html">D'autres contenus sympas</a>
</ul>
</noframes>
</frameset>
</html>
ce qui pourrait crer la disposition de cadres suivante :
--------------------------------------|
|
|
|
|
|
| Cadre 1 |
|
|
|
|
|
|
|
|------------- |
|
|
|
Cadre 3
|
|
|
|
|
|
|
|
|
|
| Cadre 2 |
|
|
|
|
|
|
|
|
|
|
|
|
|
--------------------------------------Si l'agent utilisateur ne peut pas afficher les cadres ou bien n'est pas configur pour le faire, alors il
restituera le contenu de l'lment NOFRAMES.
10.2 La disposition des cadres
Le document HTML qui dcrit la disposition des cadres (appel document avec jeu d'encadrement [ndt.
frameset document]) obit une structure diffrente de celle du document HTML sans cadres. Le
document standard possde une section HEAD et une section BODY. Le document avec jeu
d'encadrement possde une section HEAD et une section FRAMESET la place de BODY.
La section FRAMESET du document spcifie la disposition des vues dans la fentre principale de l'agent
utilisateur. En outre, la section FRAMESET peut contenir un lment NOFRAMES afin d'offrir un
contenu de remplacement aux agents utilisateurs qui ne reconnaissent pas les cadres ou bien ne sont pas
configurs pour afficher ces cadres.
Les lments, qui normalement seraient placs dans la section BODY, ne doivent pas apparatre avant le
premier lment FRAMESET, sinon cet lment FRAMESET sera ignor.
10.2.1 L'lment FRAMESET
L'lment FRAMESET spcifie la disposition de la fentre principale de l'utilisateur selon des
subdivisions rectangulaires.
60
Les ranges et les colonnes

La spcification de l'attribut rows dfinit le nombre de subdivisions horizontales dans un jeu
d'encadrement. La spcification de l'attribut cols dfinit le nombre de subdivisions verticales. Les deux
attributs peuvent tre utiliss simultanment pour crer une grille.
Si l'attribut rows est absent, chaque colonne occupe la hauteur entire de la page. Si l'attribut cols est
absent, chaque range occupe la largeur entire de la page. Si aucun de ces attributs n'est prsent, alors le
cadre occupe exactement les dimensions de la page.
Les cadres sont crs de gauche droite pour les colonnes et de haut en bas pour les ranges. Quand les
deux attributs sont spcifis, les vues sont cres de gauche droite dans la range suprieure, de gauche
droite dans la range suivante, etc.
Le premier exemple divise l'cran en deux verticalement (i.e., cre une moiti suprieure et une moiti
infrieure).
<frameset rows="50%, 50%">
...le reste de la dfinition...
</frameset>
L'exemple suivant cre trois colonnes. La deuxime a une largeur fixe de 250 pixels (qui peut servir, par
exemple, contenir une image dont les dimensions sont connues). La premire reoit 25% de l'espace
disponible et la troisime les 75% restant.
<frameset cols="1*,250,3*">
</frameset>
L'exemple suivant cre une grille de 23 subdivisions.
<frameset rows="30%,70%" cols="33%,34%,33%">
</frameset>
Pour l'exemple qui va suivre, on suppose que la fentre du navigateur fait 1000 pixels de haut. La
premire vue se voit allouer 30% de la hauteur totale (300 pixels). La seconde vue est fixe pour avoir
exactement 400 pixels de haut. Il reste 300 pixels rpartir entre les deux autres cadres. La hauteur du
quatrime cadre est dfinie comme tant "2*", il est donc deux fois plus haut que le troisime cadre, dont
la hauteur n'est que de "*" (quivalant "1*"). Ainsi, le troisime cadre fera 100 pixels de haut et le
quatrime 200 pixels de haut.
<frameset rows="30%,400,*,2*">
</frameset>
Les longueurs absolues dont le total n'est pas gal 100% de l'espace disponible rel devraient tre
ajustes par l'agent utilisateur. Quand ce total est infrieur 100%, l'espace restant devrait tre allou
proportionnellement chaque vue. Quand il est suprieur, chaque vue devrait tre rduite en fonction de
la proportion de l'espace total qui lui est spcifie.
Les jeux d'encadrement imbriqus
Les jeux d'encadrement peuvent s'imbriquer n'importe quel niveau.
Dans l'exemple suivant, l'lment FRAMESET externe divise l'espace disponible en trois colonnes
gales. L'lment FRAMESET interne partage alors la deuxime en deux ranges de hauteur ingale.
<frameset cols="33%, 33%, 34%">
...le contenu du premier cadre...
<frameset rows="40%, 50%">
...le contenu du deuxime cadre, premire range...
...le contenu du deuxime cadre, seconde range...
</frameset>
...le contenu du troisime cadre...
</frameset>
Le partage des donnes entre les cadres
Les auteurs peuvent partager des donnes entre plusieurs cadres en incluant celles-ci au moyen de
l'lment OBJECT. Les auteurs devraient inclure l'lment OBJECT dans l'lment HEAD du document
61
avec jeu d'encadrement et nommer cet objet avec un attribut id. Tout document qui est le contenu d'un
cadre dans le jeu d'encadrement peut se rfrer cet identifiant.
L'exemple suivant illustre la manire dont un script pourrait appeler un lment OBJECT dfini pour le
jeu d'encadrement entier :
<html>
<head>
<title>Voici un jeu d'encadrement avec un OBJECT dans HEAD</title>

<object id="monobjet" data="data.bar"></object>
</head>
<frameset>
<frame src="bianca.html" name="bianca">
</frameset>
</html>

<html>
<head>
<title>La page de Bianca</title>
</head>
<body>
...le dbut du document...
<p>
<script type="text/javascript">
parent.monobjet.proprit
</script>
...le reste du document...
</body>
</html>
10.2.2 L'lment FRAME
L'lment FRAME dfinit le contenu et l'apparence d'un seul cadre.
L'tablissement du contenu initial d'un cadre
L'attribut src spcifie le document initial que le cadre va contenir.
Soit l'exemple de document HTML suivant :
<html>
<head>
<title>Un document avec jeu d'encadrement</title>
</head>
<frameset cols="33%,33%,33%">
<frameset rows="*,200">
<frame src="contenu_du_cadre2.gif">
</frameset>
</frameset>
</html>
Celui-ci devrait produire une disposition des cadres semblable :
62
-----------------------------------------|Cadre 1 |Cadre 3
|Cadre 4
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
------------- |
|
|
|Cadre 2
|
|
|
|
|
|
|
|
|
|
|
-----------------------------------------ainsi qu'il va entraner l'agent utilisateur charger chaque fichier dans une vue spare.
Le contenu d'un cadre ne doit pas se trouver dans le mme document que la dfinition de ce cadre.
EXEMPLE ILLGAL :
La dfinition de jeu d'encadrement suivante n'est pas lgale pour HTML, parce que le contenu du
deuxime cadre se trouve dans le mme document que le jeu d'encadrement.
<html>
<head>
</head>
<frameset cols="50%,50%">
<frame src="#ancre_dans_le_meme_document">
<noframes>
...un texte...
<h2><a name="ancre_dans_le_meme_document">Passage important</a></h2>
...un texte...
</noframes>
</frameset>
</html>
La restitution visuelle d'un cadre
L'exemple suivant illustre l'utilisation des attributs dcoratifs de l'lment FRAME. On spcifie que le
cadre 1 n'aura pas de barre de dfilement. Le cadre 2 laissera un espace autour de son contenu
(initialement, un fichier d'image) et ne sera pas redimensionnable. Aucune bordure ne sera dessine entre
les cadres 3 et 4. Des bordures seront dessines (par dfaut) entre les cadres 1, 2 et 3.
<html>
<head>
</head>
<frameset cols="33%,33%,33%">
<frameset rows="*,200">
<frame src="contenu_du_cadre1.html" scrolling="no">
<frame src="contenu_du_cadre2.gif"
marginwidth="10" marginheight="15"
noresize>
</frameset>
<frame src="contenu_du_cadre3.html" frameborder="0">
<frame src="contenu_du_cadre4.html" frameborder="0">
</frameset>
</html>
63
10.3 La spcification des informations du cadre cible

Lattribut target spcifie le nom du cadre dans lequel ouvrir un document.
En assignant un nom un cadre via l'attribut name, l'auteur peut s'y rfrer comme cible des liens
dfinis par les autres lments. L'attribut target peut se placer sur les lments qui crent des liens (A,
LINK), des images cliquables (AREA) et des formulaires (FORM).
Cet exemple illustre la manire dont l'attribut target autorise la modification dynamique du contenu d'un
cadre. Nous dfinissons d'abord un jeu d'encadrement dans le document "frameset.html suivant :
<html>
<head>
</head>
<frameset rows="50%,50%">
<frame name="fixe" src="init_fixe.html">
<frame name="dynamique" src="init_dynamique.html">
</frameset>
</html>
Ensuite, dans le document "init_dynamique.html" suivant, nous effectuons une liaison vers le cadre
nomm dynamique .
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<head>
<title>Un document ayant des ancres avec des cibles spcifiques</title>
</head>
<body>
...commencement du document...
<p>Maintenant vous pouvez aller la
<a href="diapo2.html" target="dynamique">diapositive 2.</a>
...more document...
<p>Vous vous dbrouillez bien. Allez la
<a href="diapo3.html" target="dynamique">diapositive 3.</a>
</body>
</html>
L'activation de l'un ou l'autre lien entrane l'ouverture d'un nouveau document dans le cadre nomm
dynamique , tandis que l'autre cadre nomm fixe conserve son contenu initial.
Remarque importante : La dfinition d'un jeu d'encadrement ne change pas contrairement au contenu de
l'un de ses cadre qui peut changer. Une fois que le contenu initial d'un cadre a chang, la dfinition du
jeu d'encadrement ne reflte plus la situation courante de ses cadres.
Pour l'instant, il n'existe aucun moyen pour coder le statut complet d'un jeu d'encadrement dans un URI.
C'est pourquoi, nombre d'agents utilisateurs ne permettent pas de placer un signet (bookmark) sur un jeu
d'encadrement.
Les jeux d'encadrement peuvent rendre la navigation d'avant en arrire, par le biais de l'historique de
l'agent utilisateu (le browser)r, plus complique pour les utilisateurs.
10.3.1 L'tablissement de la cible par dfaut des liens
Quand, dans le mme document, plusieurs liens dsignent la mme cible, il est possible de spcifier la
cible une seule fois et de se passer de l'attribut target de chaque lment. On ralise ceci en dfinissant
l'attribut target sur l'lment BASE.
Revenons l'exemple prcdent, cette fois par la mise en facteur des informations de cible, en les
dfinissant dans l'lment BASE et en les supprimant des lments A.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<head>
<title>Un document ayant un lment BASE avec une cible particuliret</title>
<base href="http://www.mycom.com/diapos" target="dynamique">
64
</head>
<body>
...commencement du document...
<p>Maintenant vous pouvez aller la <a href="slide2.html">diapositive 2.</a>
<p>Vous vous dbrouillez bien. Allez la
<a href="slide3.html">diapositive 3.</a>
</body>
</html>
10.3.2 La smantique de cible
Les agents utilisateurs devraient dterminer le cadre cible, dans lequel charger une ressource relie, selon
la prsance suivante (de la priorit la plus leve la plus basse) :
1.
2.
3.
4.
Si l'attribut target d'un lment vise un cadre connu, quand l'lment est activ (i.e., un lieu est
suivi ou un formulaire est soumis), la ressource dsigne par l'lment devrait se charger dans le
cadre cible ;
Si cet lment n'a pas d'attribut target et, par contre, l'lment BASE en a un, c'est l'attribut
target de l'lment BASE qui dtermine le cadre ;
Si ni cet lment ni l'lment BASE ne se rfrent une cible, alors la ressource dsigne par
l'lment devrait se charger dans le cadre qui contient l'lment ;
Si un attribut target se rfre un cadre C inconnu, l'agent utilisateur devrait crer une
nouvelle fentre et un nouveau cadre, puis assigner le nom C au cadre et enfin charger la
ressource dsigne par l'lment dans le nouveau cadre.
10.4 Le contenu de remplacement

Les auteurs devraient fournir un contenu de remplacement pour les agents utilisateurs qui ne
reconnaissent pas les cadres ou qui sont configurs pour ne pas les afficher.
10.4.1 L'lment NOFRAMES
L'lment NOFRAMES spcifie le contenu qui ne devrait tre affich que par les agents utilisateurs ne
reconnaissant pas les cadres ou non configurs pour les afficher. Les agents utilisateurs qui reconnaissent
les cadres doivent seulement afficher le contenu d'une dclaration NOFRAMES que s'ils sont configurs
pour ne pas afficher les cadres. Les agents utilisateurs qui ne reconnaissent pas les cadres doivent afficher
le contenu de l'lment NOFRAMES dans tous les cas.
Par exemple :
<html>
<head>
<title>Un document avec jeu d'encadrement et NOFRAMES</title>
</head>
<frameset cols="50%, 50%">
<frame src="principal.html">
<frame src="table_des_matieres.html">
<noframes>
<p>Voici la <a href="principal-noframes.html">
version sans cadres du document.</a>
</noframes>
</frameset>
</html>
65
10.5 Les cadres en-ligne : l'lment IFRAME

L'lment IFRAME permet aux auteurs d'insrer un cadre dans un bloc de texte. L'insertion d'un cadre
en-ligne dans un passage textuel revient un peu y insrer un objet via l'lment OBJECT : ces lments
permettent tous deux l'insertion d'un document HTML au sein d'un autre, ils peuvent tous deux tre
aligns sur le texte environnant, etc.
Les informations qui doivent tre insres en-ligne sont dsignes par l'attribut src de cet lment. Par
contre, le contenu de l'lment IFRAME ne devraient tre affich que par les agents utilisateurs qui ne
reconnaissent pas les cadres ou qui sont configurs pour ne pas les afficher.
Pour les agents utilisateurs qui reconnaissent les cadres, l'exemple suivant placera un cadre en-ligne,
entour par une bordure, au milieu du texte.
<iframe src="foo.html" width="400" height="500"
scrolling="auto" frameborder="1">
[Votre agent utilisateur ne reconnat pas les cadres ou n'est pas
configur pour les afficher pour l'instant. Cependant, vous pouvez visiter le
<a href="foo.html">document concern.</a>]
</iframe>
Les cadres en-ligne ne peuvent pas tre redimensionns (et donc n'acceptent pas l'attribut noresize).
Remarque : On peut galement incorporer un document HTML dans un autre document HTML avec
l'lment OBJECT.
11 Les formulaires
Sommaire
1.
2.
Introduction aux formulaires

Les commandes
1. Les types de commande
3. L'lment FORM
4. L'lment INPUT
1. Les types de commande crs par l'lment INPUT
2. Exemples de formulaires contenant des commandes INPUT
5. L'lment BUTTON
6. Les lments SELECT, OPTGROUP et OPTION
1. Les options prslectionnes
7. L'lment TEXTAREA
8. Les labels
1. L'lment LABEL
9. Donner le focus un lment
1. La navigation par tabulation
2. Les cls d'accs
10. Les commandes inactives et en lecture seule
1. Les commandes inactives
2. Les commandes en lecture seule
11. La soumission du formulaire
1. La mthode de soumission du formulaire
2. Les commandes russies
3. Le traitement des donnes du formulaire
Premire tape : identifier les commandes russies
Deuxime tape : construire le jeu des donnes du formulaire
Troisime tape : coder le jeu des donnes du formulaire
Quatrime tape : soumettre le jeu des donnes du formulaire cod
4. Les types de contenu du formulaire
"application/x-www-form-urlencoded"
"multipart/form-data"
66
11.1 Introduction aux formulaires

Un formulaire HTML est une partie du document constitue d'un contenu normal, d'un balisage,
d'lments spciaux appels commandes ou contrles (cases cocher, boutons radio, menus, etc.) et de
labels sur ces commandes. L'utilisateur remplit gnralement le formulaire en modifiant ses
commandes (en saisissant un texte, en slectionnant les articles d'un menu, etc.), avant de soumettre le
formulaire un agent pour son traitement (par exemple, un serveur Web, un serveur de courrier, etc.).
Voici un formulaire simple qui comprend des labels, des boutons radio et des boutons poussoirs (pour
rinitialiser le formulaire ou le soumettre) :
<form action="http://unsite.com/prog/ajoutermembre" method="post">
<p>
<label for="prenom">Prénom : </label>
<input type="text" id="prenom"><br>
<label for="nom">Nom : </label>
<input type="text" id="nom"><br>
<label for="email">e-mail : </label>
<input type="text" id="email"><br>
<input type="radio" name="genre" value="homme"> Homme<br>
<input type="radio" name="genre" value="femme"> Femme<br>
<input type="submit" value="Envoyer"> <input type="reset">
</p>
</form>
11.2 Les commandes
Les utilisateurs interagissent avec les formulaires au moyen de commandes nommes.
Le nom de commande d'une commande est donn par son attribut name. La porte de l'attribut name
d'une commande au sein d'un lment FORM est cet lment FORM.
Chaque command possde la fois une valeur initiale et une valeur courante, les deux sont des chanes de
caractres. Veuillez consulter la dfinition de chaque commande pour des prcisions sur la valeur initiale
et les ventuelles contraintes sur les valeurs imposes par la commande. En gnral, la valeur initiale
d'une commande peut tre spcifie avec l'attribut value de l'lment de commande. Cependant, la valeur
initiale d'un lment TEXTAREA est donne par son contenu et la valeur initiale d'un lment OBJECT
dans un formulaire est dtermine par l'implmentation de l'objet (i.e., elle n'est pas prcise par cette
spcification).
La valeur courante d'une commande est d'abord gale la valeur initiale. Par la suite, la valeur
courante de la commande peut tre modifie par les actions de l'utilisateur et par les scripts.
La valeur initiale d'une commande ne change pas. Ainsi, quand un formulaire est rinitialis, chacune des
valeurs courantes des commandes reprend sa valeur initiale. Si la commande n'a pas de valeur initiale,
alors l'effet de la rinitialisation du formulaire sur cette commande n'est pas dfini.
Lors de la soumission du formulaire pour son traitement, le nom et la valeur courante de certaines
commandes sont accoupls et ces couples sont soumis avec le formulaire. On appelle ces commandes,
pour lesquelles des couples nom/valeur sont soumis, des commandes russies (successful controls).
11.2.1 Les types de commande
HTML dfini les types de commande suivants :
Les boutons
Les auteurs peuvent crer trois types de boutons :
les boutons de soumission : quand il est actionn, le bouton de soumission soumet le

formulaire. Un formulaire peut contenir plusieurs boutons de soumission ;
les boutons de rinitialisation : quand il est actionn, le bouton de rinitialisation remet
toutes les commandes leur valeur initiale ;
les boutons poussoirs : les boutons poussoirs n'ont pas de comportement par dfaut.
Chaque bouton poussoir peut avoir des scripts ct client qui sont associs aux attributs
d'vnement de l'lment. Quand un vnement se produit (par exemple, l'utilisateur
presse le bouton, le relche, etc.), le script associ est dclench.
67
Les auteurs crent des boutons avec les lments BUTTON ou INPUT.
Les cases cocher
Les cases cocher (et les boutons radio ) sont des interrupteurs marche/arrt qui peuvent tre
actionns par l'utilisateur. L'interrupteur est sur marche quand l'attribut checked de l'lment
de commande est spcifi. Lors de la soumission du formulaire, seules les commandes de cases
cocher sur marche peuvent devenir des commandes russies.
Dans un formulaire, plusieurs cases cocher peuvent partager le mme nom de commande.
Ainsi, par exemple, les cases cocher permettent aux utilisateurs de slectionner plusieurs
valeurs pour la mme proprit. On utilise l'lment INPUT pour crer une commande de case
cocher.
Les boutons radio
Les boutons radio sont analogues aux cases cocher, la diffrence que, quand plusieurs
boutons partage le mme nom de commande, alors ils s'excluent mutuellement : quand l'un est
mis sur marche , tous les autres avec le mme nom se mettent sur arrt . On utilise
l'lment INPUT pour crer une commande de bouton radio.
Si aucun des boutons radio, dans un jeu partageant le mme nom de
commande, n'est en position marche , alors le comportement de l'agent
utilisateur, pour le choix de la commande qui est initialement sur marche ,
n'est pas dfini.
En raison des diffrences d'interprtation entre les agents utilisateurs, les auteurs devraient
s'assurer qu'un des boutons radio dans un jeu soit mis initialement sur marche .
Les menus
Les menus proposent des options aux utilisateurs parmi lesquelles faire un choix. L'lment
SELECT cre un menu, en conjonction avec les lments OPTGROUP et OPTION.
La saisie de texte
Les auteurs peuvent crer deux types de commande qui permettent aux utilisateurs la saisie d'un
texte. L'lment INPUT cre une commande pour une saisie sur une seule ligne et l'lment
TEXTAREA cre une commande pour une saisie sur plusieurs lignes. Dans les deux cas, le texte
saisi devient la valeur courante de la commande.
La slection d'un fichier
Ce type de commande permet l'utilisateur de slectionner un fichier de sorte que son contenu
puisse tre soumis avec le formulaire. On utilise l'lment INPUT pour crer une commande de
slection de fichier.
Les commandes caches
Les auteurs peuvent crer des commandes qui ne sont pas restitues mais dont les valeurs sont
soumises avec le formulaire. Les auteurs utilisent en gnral ce type de commande pour
enregistrer les informations entre les changes client/serveur, qui seraient perdues sinon du fait
que le protocole HTTP est un protocole sans tat. On utilise l'lment INPUT pour crer une
commande cache.
Les commandes d'objets
Les auteurs peuvent insrer des objets gnriques dans les formulaires de telle sorte que les
valeurs qui leur sont associes soient soumises en mme temps que les autres commandes. On
utilise l'lment OBJECT pour crer une commande d'objet.
Les lments utiliss pour crer les commandes apparaissent gnralement dans un lment FORM, mais
ils peuvent aussi apparatre en dehors de la dclaration de l'lment FORM quand on les utilise pour
construire des interfaces utilisateurs. Ceci est abord dans la section sur les vnements intrinsques.
Remarquez que les commandes en dehors d'un formulaire ne peuvent pas tre des commandes russies.
11.3 L'lment FORM
L'lment FORM agit comme conteneur pour les commandes. Il spcifie :
la disposition du formulaire (donne par le contenu de l'lment) ;

le programme qui va manipuler le formulaire rempli puis soumis (l'attribut action). Le
programme rcepteur doit tre capable d'analyser les couples nom/valeur afin de les utiliser ;
la mthode selon laquelle les donnes de l'utilisateur seront envoyes au serveur (l'attribut
method) ;
68
l'encodage de caractres qui doit tre accept par le serveur pour manipuler ce formulaire
(l'attribut accept-charset). Les agents utilisateurs peuvent avertir l'utilisateur de la valeur de
l'attribut accept-charset et/ou empcher que celui-ci n'entre des caractres non reconnus.
Un formulaire peut contenir un texte et un balisage (paragraphes, listes, etc.) en plus des commandes de
formulaire.
L'exemple suivant montre un formulaire qui va tre trait par le programme ajoutermembre une fois
soumis. Le formulaire sera envoy au programme l'aide de la mthode HTTP "post".
...contenu du formulaire...
</form>
11.4 L'lment INPUT
11.4.1 Les types de commande crs par l'lment INPUT
Le type de commande dfini par l'lment INPUT est fonction de la valeur de l'attribut type :
text
Cre une commande de saisie de texte sur une seule ligne.
password
Comme pour la valeur "text", mais le texte saisi est restitu de manire dissimuler les
caractres (par exemple, une succession de caractres astrisques * ). Ce type de commande
est souvent employ pour les entres sensibles comme les mots de passe. Remarquez que la
valeur courante est le texte saisi par l'utilisateur, non le texte restitu par l'agent utilisateur.
Remarque : Les dveloppeurs d'applications devraient remarquer que ce mcanisme n'offre
qu'une protection lgre. Bien qu'il soit masqu par l'agent utilisateur aux yeux d'un ventuel
observateur, le mot de passe est transmis au serveur en texte clair et peut tre lu par quiconque
ayant un accs granulaire au rseau.
checkbox
Cre une case cocher.
radio
Cre un bouton radio .
submit
Cre un bouton de soumission.
image
Cre un bouton de soumission graphique. La valeur de l'attribut src spcifie l'URI de l'image qui
va dcorer le bouton. Pour des questions d'accessibilit, les auteurs devraient fournir un texte de
remplacement pour l'image au moyen de l'attribut alt.
Quand un dispositif de pointage est employ pour cliquer sur l'image, le formulaire est soumis et
les coordonnes du clic sont passes au serveur. La coordonne x se mesure en pixels partir
de la gauche de l'image et la coordonne y en pixels partir du haut de l'image. Les donnes
soumises comprennent les valeurs nom.x=valeur-de-x et nom.y=valeur-de-y, dans lesquelles le
nom est la valeur de l'attribut name, et valeur-de-x et valeur-de-y sont les valeurs des
coordonnes x et y respectivement.
Si le serveur entreprend diverses actions en fonction de l'endroit cliqu, l'utilisateur d'un
navigateur non-graphique sera dsavantag. Pour cette raison, les auteurs devraient considrer
ces approches alternatives :
Utiliser plusieurs bouton de soumission (chacun avec sa propre image) au lieu d'un seul
bouton de soumission graphique. Les auteurs peuvent employer les feuilles de style
pour contrler le positionnement de ces boutons ;
Utiliser une image cliquable ct client en mme temps que des scripts.
reset
Cre un bouton de rinitialisation.
button
Cre un bouton poussoir. Les agents utilisateurs devraient utiliser la valeur de l'attribut value
comme intitul du bouton.
hidden
69
Cre une commande cache.

file
Cre une commande de slection de fichier. Les agents utilisateurs peuvent utiliser la valeur de
l'attribut value comme nom de fichier initial.
11.4.2 Exemples de formulaires contenant des commandes INPUT
L'exemple de fragment HTML suivant dfinit un formulaire simple qui permet l'utilisateur de saisir ses
prnom, nom, adresse e-mail et genre. Quand on actionnera le bouton de soumission, le formulaire sera
transmis au programme spcifi par l'attribut action.
<p>
Prénom : <input type="text" name="prenom"><br>
Nom : <input type="text" name="nom"><br>
E-mail: <input type="text" name="email"><br>
</p>
</form>
Ce formulaire pourrait tre restitu comme suit :
Dans l'exemple suivant, la fonction JavaScript verifier est dclenche quand l'vnement "onclick" se
produit :
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<form action="..." method="post">
<p>
<input type="button" value="Cliquez moi" onclick="verifier()">
</form>
</body>
L'exemple suivant montre la manire dont le contenu d'un fichier spcifi par l'utilisateur peut tre
soumis avec le formulaire. L'utilisateur est invit donner son nom et la liste des noms de fichier dont le
contenu devrait tre soumis avec le formulaire. En spcifiant la valeur "multipart/form-data" pour
l'attribut enctype, chaque contenu de fichier sera conditionn pour soumission dans une section distincte
d'un document en plusieurs parties.
<form action="http://server.dom/cgi/gestion"
enctype="multipart/form-data"
method="post">
<p>
Quel est votre nom ? <input type="text" name="nom_expediteur">
Quels sont les fichiers à envoyer ? <input type="file" name="nom_des_fichiers">
</p>
</form>
70
11.5 L'lment BUTTON

Les boutons crs par l'lment BUTTON fonctionnent exactement comme ceux crs avec l'lment
INPUT, mais ils offrent des possibilits de restitution plus varies : l'lment BUTTON peut avoir un
contenu. Par exemple, un lment BUTTON qui contient une image fonctionne de la mme faon et peut
avoir le mme aspect qu'un lment INPUT dont l'attribut type a la valeur "image", sauf que le type
d'lment BUTTON admet un contenu.
Les agents utilisateurs visuels peuvent restituer les boutons BUTTON en relief et avec un mouvement de
haut en bas quand on les clique, tandis qu'ils peuvent restituer les boutons INPUT comme des images
plates .
L'exemple suivant reprend et prolonge un exemple prcdent en crant des boutons de soumission et de
rinitialisation avec l'lment BUTTON au lieu de INPUT. Les boutons contiennent des images par
l'intermdiaire d'lments IMG.
<p>
Prénom : <input type="text" name="prenom"><br>
Nom : <input type="text" name="nom"><br>
E-mail: <input type="text" name="email"><br>
<button name="submit" value="envoyer" type="submit">
Envoyer<img src="/icons/c-bon.gif" alt=""></button>
<button name="reset" type="reset">
Effacer<img src="/icons/c-pas-bon.gif" alt=""></button>
</p>
</form>
Les auteurs doivent se rappeler de fournir un texte de remplacement pour l'lment IMG.
11.6 Les lments SELECT, OPTGROUP et OPTION
L'lment SELECT cre un menu. Chaque option offerte par le menu est reprsente par un lment
OPTION. L'lment SELECT doit contenir au moins un lment OPTION.
L'lment OPTGROUP permet aux auteurs le regroupement logique des options. Cela est
particulirement utile quand l'utilisateur doit effectuer un choix partir d'une longue liste d'options ; les
groupes d'options apparentes sont plus facile comprendre et se remmorer qu'une seule longue liste
d'options. Dans HTML 4 tous les lments OPTGROUP doivent tre spcifis directement dans un
lment SELECT (i.e., les groupes ne peuvent pas tre imbriqus).
11.6.1 Les options prslectionnes
Zro ou plusieurs options peuvent tre prslectionnes pour l'utilisateur. Les agents utilisateurs devraient
dterminer les options qui sont prselectionnes comme suit :
si aucun lment OPTION ne possde un attribut selected, le comportement de l'agent utilisateur

vis--vis du choix de l'option slectionne initiale est indfini. Remarque : tant donn que les
implmentations existantes grent ce cas diversement, la spcification courante se dmarque du
document RFC1866 ([RFC1866] section 8.1.3), qui dclare :
La premire option est slectionne l'initialisation, moins que l'attribut
SELECTED ne soit prsent sur l'un des lments <OPTION>.
Comme le comportement des agents utilisateurs varie, les auteurs devraient s'assurer que chaque
menu inclut un lment OPTION prslectionn par dfaut ;
si un lment OPTION possde un attribut selected, alors celui-ci devrait tre prslectionn ;
si l'lment SELECT a un attribut multiple spcifi et plusieurs lments OPTION avec l'attribut
selected spcifi, alors ceux-ci devraient tous tre prslectionns ;
71
il s'agit d'une erreur si plusieurs lments OPTION ont un attribut selected alors que l'attribut
multiple n'est pas spcifi sur l'lment SELECT. Les agents utilisateurs peuvent varier dans la
prise en charge de cette erreur, mais ils ne devraient pas prslectionner plus d'une option.
Lors de la restitution de l'option d'un menu, l'agent utilisateur devrait utiliser la valeur de l'attribut label
de l'lment OPTION comme intitul pour l'option. Si cet attribut n'est pas spcifi, l'agent utilisateur
devrait utiliser le contenu de l'lment OPTION.
L'attribut label de l'lment OPTGROUP spcifie l'intitul d'un groupe d'options.
Dans cet exemple, nous crons un menu qui permet l'utilisateur de slectionner lequel parmi sept
composants logiciels choisir. Le premier et le deuxime composant sont prslectionns mais ils peuvent
tre dslectionns par l'utilisateur. Les composants restants ne sont pas prslectionns. L'attribut size
dclare que le menu ne devrait avoir que quatre ranges, mme si l'utilisateur peut effectuer un choix
parmi sept options. La mise disposition des autres options devrait se faire au moyen d'un mcanisme de
dfilement.
L'lment SELECT est suivi par un bouton de soumission et un de rinitialisation.
<form action="http://unsite.com/prog/choisir_composant" method="post">
<p>
<select multiple size="4" name="selection_composant">
<option selected value="composant_1_a">Composant_1</option>
<option selected value="composant_1_b">Composant_2</option>
<option>Composant_3</option>
</select>
<input type="submit" value="Envoyer"><input type="reset">
</p>
</form>
Seules les options slectionnes russiront (en utilisant le nom de commande "selection_composant"). Si
aucune option n'est slectionne, la commande n'est pas russie et ni le nom ni la valeur ne sont envoys
au serveur la soumission du formulaire. Remarquez que l'attribut value est spcifi, il dtermine donc la
valeur initiale de la commande, sinon ce serait le contenu de l'lment.
Dans ce exemple, nous employons l'lment OPTGROUP pour regrouper les options. Soit le balisage
suivant :
<form action="http://unsite.com/prog/unprogramme" method="post">
<p>
<select name="ComOS">
<option selected label="aucun" value="aucun">Aucun</option>
<optgroup label="PortMaster 3">
<option label="3.7.1" value="pm3_3.7.1">PortMaster 3 avec ComOS 3.7.1</option>
<option label="3.7" value="pm3_3.7">PortMaster 3 avec ComOS 3.7</option>
</optgroup>
<optgroup label="PortMaster 2">
</optgroup>
<optgroup label="IRX">
<option label="3.7R" value="IRX_3.7R">IRX avec ComOS 3.7R</option>
<option label="3.5R" value="IRX_3.5R">IRX avec ComOS 3.5R</option>
</optgroup>
</select>
</form>
celui-ci reprsenterait le regroupement suivant :
Aucun
PortMaster 3
3.7.1
3.7
3.5
72
PortMaster 2
3.7
3.5
IRX
3.7R
3.5R
Les agents utilisateurs visuels peuvent autoriser les utilisateurs effectuer une slection partir des
groupes d'options au moyen d'un menu hirarchique ou d'un autre mcanisme qui reflte la structure des
options.
Un agent utilisateur graphique pourrait restituer ceci par :
Cette image montre un lment SELECT qui est restitu par un menu en cascade. L'intitul suprieur du
menu affiche la valeur slectionne la nouvelle valeur (PortMaster 2, 3.7). Remarquez que chaque sousmenu affiche l'intitul d'un lment OPTGROUP, ou d'un lment OPTION.
11.7 L'lment TEXTAREA
L'lment TEXTAREA cre une commande de saisie de texte multilignes. Les agents utilisateurs
devraient utiliser le contenu de cet lment comme valeur initiale et restituer initialement ce texte.
Cet exemple cre une commande TEXTAREA qui fait vingt ranges par quatre-vingt colonnes et qui
contient initialement deux lignes de texte. La commande TEXTAREA est suivie par un bouton de
soumission et un de rinitialisation.
<form action="http://unsite.com/prog/lecture-texte" method="post">
<p>
<textarea name="le_texte" rows="20" cols="80">
Première ligne de texte initial.
Seconde ligne de texte initial.
</textarea>
<input type="submit" value="Envoyer"><input type="reset">
</p>
</form>
La spcification de l'attribut readonly permet l'auteur d'afficher un texte non modifiable dans la
commande TEXTAREA. Ce n'est pas la mme chose que d'utiliser un texte balis standard dans un
document, parce que la valeur de l'lment TEXTAREA est soumise avec le formulaire.
11.8 Les labels
Quelques commandes de formulaire ont des labels qui leur sont automatiquement associs (les boutons
poussoirs) tandis que la plupart d'entre elles en sont dpourvues (les champs de texte, les cases cocher
et les boutons radio ainsi que les menus).
Pour celles des commandes qui ont un label implicite, les agents utilisateurs devraient utiliser la valeur de
l'attribut value comme chane pour le label.
On utilise l'lment LABEL pour spcifier les labels des commandes qui n'ont pas de labels implicites.
11.8.1 L'lment LABEL
L'lment LABEL peut s'utiliser pour attacher des informations aux commandes. Chaque lment
LABEL est associ exactement une commande de formulaire.
L'attribut for associe explicitement un label une autre commande : la valeur de l'attribut for doit tre la
mme que celle de l'attribut id de l'lment de commande associ. On peut associer plusieurs lments
LABEL la mme commande en crant plusieurs rfrences via l'attribut for.
Cet exemple cre une table qui est utilise pour aligner deux commandes de saisie de texte et les labels
qui leur sont associs. Chaque label est associ explicitement une commande de saisie de texte :
73
<table>
<tr>
<td><label for="label_prenom">Prénom</label>
<td><input type="text" name="prenom" id="label_prenom">
<tr>
<td><label for="label_nom">Nom</label>
<td><input type="text" name="nom" id="label_nom">
</table>
</form>
Cet exemple reprend un exemple de formulaire prcdent et y inclut des lments LABEL.
<p>
<label for="label_prenom">Prénom : </label>
<input type="text" id="label_prenom"><br>
<label for="label_nom">Nom : </label>
<input type="text" id="label_nom"><br>
<label for="label_email">E-mail : </label>
<input type="text" id="label_email"><br>
</p>
</form>
Pour associer implicitement un label une autre commmande, l'lment de commande doit se trouver
l'intrieur de l'lment LABEL. Auquel cas, cet lment LABEL ne peut contenir qu'un seul lment de
commande. Le label en question peut se placer avant ou aprs la commande associe.
Dans cet exemple, nous associons implicitement deux labels deux commandes de saisie de texte :
<p>
<label>
Prénom
<input type="text" name="prenom">
</label>
<label>
<input type="text" name="nom">
Nom
</label>
</p>
</form>
Remarquez qu'on ne peut pas employer cette technique quand la disposition est assure par une table, le
label tant dans une cellule et la commande associe dans une autre cellule.
Quand un lment LABEL reoit le focus, celui-ci communique ce focus la commande qui lui est
associe.
11.9 Donner le focus un lment
Dans un document HTML, un lment doit recevoir le focus par le biais de l'utilisateur afin de devenir
actif et de remplir sa fonction. Par exemple, les utilisateurs doivent activer le lien spcifi par l'lment A
pour suivre le lien en question. De la mme manire, les utilisateurs doivent donner le focus l'lment
TEXTAREA pour y saisir un texte.
Il y a plusieurs faons de donner l'attention un lment :
en dsignant l'lment avec un dispositif de pointage ;

en navigant d'un lment l'autre au clavier. L'auteur du document peut dfinir un ordre de
tabulation qui spcifie l'odre dans lequel les lments vont recevoir l'attention quand l'utilisateur
navigue au clavier dans le document. Une fois slectionn, l'lment peut tre activ par une
certaine combinaison de touches ;
en slectionnant l'lment au moyen d'une cl d'accs (appelle aussi parfois raccourciclavier ou touche rapide ).
74
11.9.1 La navigation par tabulation

L'ordre de tabulation dfinit l'ordre dans lequel les lments vont recevoir le focus lorsque l'utilisateur
navigue au clavier. L'ordre de tabulation peut comprendre les lments imbriqus dans d'autres lments.
Les lments qui reoivent l'attention devraient tre parcourus par les agents utilisateurs en fonction des
rgles suivantes :
1.
2.
3.
Ceux des lments qui reconnaissent l'attribut tabindex et lui assignent une valeur positive sont
parcourus en premier. La navigation procde partir de l'lment avec la plus petite valeur pour
l'attribut tabindex vers l'lment avec la valeur la plus leve. Les valeurs ne se suivent pas
forcment ni doivent commencer une valeur particulire. Les lments dont les valeurs de
l'attribut tabindex sont identiques devraient tre parcourus dans l'ordre de leur apparition dans le
flux de caractre ;
Ceux des lments qui ne reconnaissent pas l'attribut tabindex, ou bien le reconnaissent et lui
assigne une valeur de "0", sont parcourus ensuite. Ces lments sont parcourus dans l'ordre de
leur apparition dans le flux de caractres ;
Les lments qui sont inactifs ne participent pas dans l'ordre de tabulation.
Les lments suivants reconnaissent l'attribut tabindex : A, AREA, BUTTON, INPUT, OBJECT,
SELECT, et TEXTAREA.
Dans cet exemple, l'ordre de tabulation sera le suivant : l'lment BUTTON, les lments INPUT en
ordre (remarquez que celui nomm "champs1" partage la mme valeur d'attribut tabindex que le bouton,
mais "champs1" apparat plus tard dans le flux de caractres) et finalemnt le lien cr par l'lment A.
<html>
<head>
<title>Un document avec FORM</title>
</head>
<body>
...un texte...
<p>Aller sur le
<a tabindex="10" href="http://www.w3.org/">site Web du W3C.</a>
...suite du texte...
<button type="button" name="base_de_donnees"
tabindex="1" onclick="base_de_donnees()">
Obtenir la base de donnes courante.
</button>
...suite du texte...
<p>
<input tabindex="1" type="text" name="champs1">
<input tabindex="2" type="text" name="champs2">
<input tabindex="3" type="submit" name="submit">
</p>
</form>
</body>
</html>
11.9.2 Les cls d'accs
La pression de la cl d'accs assigne un lment lui donne le focus. L'action qui survient quand
l'lment reoit l'attention est fonction de l'lment. Par exemple, quand l'utilisateur active un lien dfini
par l'lment A, l'agent utilisateur suit en gnral le lien. Quand l'utilisateur active un bouton radio,
l'agent utilisateur change la valeur du bouton radio. Quand l'utilisateur active un champ de texte, la saisie
devient possible, etc.
Les lments suivants reconnaissent l'attribut accesskey : A, AREA, BUTTON, INPUT, LABEL et
LEGEND, ainsi que TEXTAREA.
75
Cet exemple assigne la cl d'accs U au label associ une commande INPUT. Le fait d'appuyer sur
la cl d'accs donne l'attention au label, qui son tour la transmet la commande associe. L'utilisateur
peut alors saisir un texte dans la zone INPUT.
<p>
<label for="label_utilisateur" accesskey="U">
User Name
</label>
<input type="text" name="utilisateur" id="label_utilisateur">
</p>
</form>
Dans cet exemple, nous assignons une cl d'accs un lien dfini par l'lment A. La frappe de cette cl
d'accs conduit l'utilisateur vers un autre document, ici une table des matires.
<p><a accesskey="T"
rel="contents"
href="http://quelquepart.com/specification/table_des_matieres.html">
Table des matières</a>
L'invocation des cls d'accs est fonction du systme sous-jacent. Par exemple, sur les machines faisant
tourner le systme MS Windows, on devra en gnral presser la touche alt en plus de la cl d'accs.
Sur les systmes Apple, ce sera la touche cmd qu'il faudra appuyer en plus de la cl d'accs.
La restitution des cls d'accs est fonction de l'agent utilisateur. Nous recommandons aux auteurs
d'inclure la cl d'accs dans le texte du label ou partout o la cl d'accs doit s'appliquer. Les agents
utilisateurs devraient restituer la valeur d'une cl d'accs de sorte mettre en vidence son rle et la
distinguer des autres caractres (par exemple, en la soulignant).
11.10 Les commandes inactives et en lecture seule
Dans les situations pour lesquelles les entres de l'utilisateur sont soit indsirables, soit hors de propos, il
importe de pouvoir rendre une commande inactive ou de la restituer en lecture seule. Par exemple, on
peut vouloir que le bouton de soumission d'un formulaire reste inactif tant que l'utilisateur n'a pas entr
certaines donnes obligatoires. De la mme manire, l'auteur peut vouloir inclure un bout de texte en
lecture seule, qui doit tre soumis comme valeur en mme temps que le formulaire. Les sections
suivantes dcrivent les commandes inactives et celles en lecture seule.
11.10.1 Les commandes inactives
Quand il est prsent, l'attribut disabled produit l'effet suivant sur un lment :
les commandes inactives ne reoivent pas le focus ;

les commandes inactives sont sautes au cours d'une navigation par tabulation ;
les commandes inactives ne peuvent pas russir.
Les lments suivants reconnaissent l'attribut disabled : BUTTON, INPUT, OPTGROUP, OPTION,
SELECT, et TEXTAREA.
Cet attribut est hrit mais les dclarations locales surclassent la valeur hrite.
La manire dont les lments inactifs sont restituts est fonction de l'agent utilisateur. Par exemple,
certains agents utilisateurs restituent en gris les articles de menu, les labels de bouton, etc. qui sont
inactifs.
Dans cet exemple, l'lment INPUT est inactif. C'est pourquoi il ne peut pas recevoir l'entre de
l'utilisateur et sa valeur ne peut pas tre soumise avec le formulaire.
<input disabled name="fred" value="stone">
Remarque : Seul un script peut modifier dynamiquement la valeur de l'attribut disabled.
11.10.2 Les commandes en lecture seule
L'attribut readonly spcifie si la commande peut tre modifie ou non par l'utilisateur.
Quand il est prsent, l'attribut readonly produit les effets suivants sur l'lment :
76
les lments en lecture seule reoivent le focus mais les utilisateurs ne peuvent pas les modifier ;
les lments en lecture seule sont inclus dans la navigation par tabulation ;
les lments en lecture seule peuvent russir.
Les lments suivants reconnaissent l'attribut readonly : INPUT et TEXTAREA.

La manire dont les lments en lecture seule sont restitus est fonction de l'agent utilisateur.
Remarque : Seul un script peut modifier dynamiquement la valeur de l'attribut readonly.
11.11 La soumission du formulaire
Les sections suivantes expliquent la manire dont les agents utilisateurs soumettent les donnes de
formulaire aux agents de traitement des formulaires.
11.11.1 La mthode de soumission du formulaire
L'attribut method de l'lment FORM spcifie la mthode HTTP employe pour envoyer le formulaire
l'agent de traitement. Cet attribut admet deux valeurs :
get : avec la mthode HTTP "get", l'ensemble des donns de formulaire est rajout l'URI
spcifi par l'attribut action (avec un caractre point d'interrogation ? comme sparateur) et
ce nouvel URI est envoy l'agent de traitement ;
post : avec la mthode HTTP "post", l'ensemble des donns de formulaire est inclus dans le
corps de la requte HTTP et envoy l'agent de traitement.
On devrait employer la mthode "get" quand le formulaire est idempotent (i.e., ne produit aucun effet
secondaire). Nombre de recherches dans les bases de donnes n'ont pas d'effets secondaires visibles et
font des applications idales pour la mthode "get".
Si le service associ au traitement d'un formulaire entrane des effets secondaires (par exemple, si le
formulaire modifie une base de donnes ou l'abonnement un service), on devrait alors employer la
mthode "post".
Remarque : La mthode "get" restreint les valeurs du jeu des donnes du formulaire [ndt. form data set]
aux caractres ASCII. Seule la mthode "post" (avec l'attribut enctype="multipart/form-data") est
spcifie comme recouvrant le jeu de caractres [ISO10646] entier.
11.11.2 Les commandes russies
Une commande russie est valable pour une soumission. Toute les commandes russies ont leur nom
de commande accoupl leur valeur courante et font partie du jeu des donnes du formulaire qui est
soumis. Une commande russie doit tre dfinie dans un lment FORM et doit avoir un nom de
commande.
Cependant :
les commandes qui sont inactives ne peuvent pas russir ;

si le formulaire contient plusieurs boutons de soumission, seul le bouton de soumission actif
russira ;
toutes les cases cocher sur marche peuvent russir ;
pour les boutons radio qui partagent la mme valeur d'attribut name, seul le bouton radio sur
marche peut russir ;
pour les menus, le nom de commande est donn par l'lment SELECT et les valeurs sont
fournies par les lments OPTION. Seules les options slectionnes peuvent russir. Quand
aucune option n'est slectionne, la commande ne russit pas et ni le nom ni aucune valeur ne
sont soumis au serveur avec le formulaire ;
la valeur courante d'une slection de fichier est une liste d'un ou plusieurs noms de fichiers. Lors
de la soumission du formulaire, le contenu de chaque fichier est soumis avec le restant des
donnes du formulaire. Les contenus des fichiers sont conditionns en fonction du type de
contenu du formulaire ;
la valeur courante d'une commande d'objet est dtermine par l'implmentatin de l'objet.
77
Si une commande n'a pas de valeur courante au moment de la soumission du formulaire, les agents
utilisateurs ne sont pas obligs de la traiter comme une commande russie.
Les commandes caches et les commandes qui ne sont pas restitues en raison de l'effet d'une feuille de
style peuvent quand mme russir. Par exemple :
<p>
<input type="password" style="display:none"
name="mot_de_passe_invisible"
value="mon_mot_de_passe">
</form>
cela entranera malgr tout l'accouplement de la valeur au nom "mot_de_passe_invisible" et leur
soumission avec le formulaire.
11.11.3 Le traitement des donnes du formulaire
Quand l'utilisateur soumet le formulaire (par exemple, en activant un bouton de soumission), l'agent
utilisateur le traite de la manire suivante.
Premire tape : identifier les commandes russies
Deuxime tape : construire le jeu des donnes du formulaire
Le jeu des donnes du formulaire est la squence des couples nom de commande/valeur courante
construite partir des commandes russies.
Troisime tape : coder le jeu des donnes du formulaire
Le jeu des donnes du formulaire est alors cod en fonction du type de contenu spcifi par l'attribut
enctype de l'lment FORM.
Quatrime tape : soumettre le jeu des donnes du formulaire cod
Enfin, les donnes codes sont envoyes l'agent de traitement dsign par l'attribut action, en utilisant le
protocole spcifi par l'attribut method.
Cette spcification ne dfinit pas toutes les mthodes de soumissions valides ni les types de contenu qui
peuvent tre utiliss avec les formulaires. Cependant, les agents utilisateur HTML 4 doivent obir aux
conventions tablies dans les cas suivants s:
si la valeur de l'attribut method est "get" et la valeur de l'attribut action est un URI HTTP, alors
l'agent utilisateur prend la valeur de l'attribut action, lui rajoute un caractre ? et enfin le jeu
des donnes du formulaire, cod en utilisant le type de contenu "application/x-www-formurlencoded". L'agent utilisateur traverse alors le lien vers cet URI. Dans ce scnario, les donnes
du formulaire se limitent aux codes ASCII ;
si la valeur de l'attribut method est "post" et la valeur de l'attribut action est un URI HTTP, alors
l'agent utilisateur conduit une transaction HTTP "post" en utilisant la valeur de l'attribut action et
un message cr en fonction du type de contenu spcifi par l'attribut enctype.
Pour toute autre valeur de l'attribut action ou method, le comportement n'est pas spcifi.
Les agents utilisateurs devraient restituer les rponses des transactions HTTP "get" et "post".
11.11.4 Les types de contenu du formulaire
L'attribut enctype de l'lment FORM spcifie le type de contenu utilis pour coder le jeu des donnes du
formulaire en vue de sa soumission au serveur. Les agents utilisateurs doivent reconnatre les types de
contenu lists ci-dessous. Le comportement pour d'autres types de contenu n'est pas spcifi.
.
78
"application/x-www-form-urlencoded"
C'est le type de contenu par dfaut. Les formulaires soumis avec ce type de contenu doivent tre cods
commes suit :
1.
2.
Les noms de commandes et les valeurs sont chappes. Les caractres espace sont remplacs
par des caractres plus + puis les caractres rservs sont chapps comme dcrit dans le
document [RFC1738], section 2.2 : Les caractres non-alphanumriques sont remplacs par une
squence de la forme %HH , un caractre pourcentage et deux chiffres hexadcimaux qui
reprsentent le code ASCII du caractre en question. Les sauts de ligne sont reprsents par des
couples de caractres "CR LF" (i.e., "%0D%0A") ;
Les couples nom/valeur des commandes sont lists selon leur ordre d'apparition dans le
document. Le nom est spar de la valeur par un caractre gal = , et les couples nom/valeur
sont spars les uns des autres par des caractres esperluettes & .
"multipart/form-data"
Le type de contenu "application/x-www-form-urlencoded" est inefficace pour l'envoi de grandes
quantits de donnes binaires ou de texte contenant des caractres non-ASCII. C'est le type de contenu
"multipart/form-data" qui devrait tre utilis pour la soumission de formulaires contenant des fichiers, des
donnes non-ASCII et des donnes binaires.
Un message "multipart/form-data" contient une succession de parties, chacune d'elles reprsentant une
commande russie. Les parties sont envoyes l'agent de traitement dans le mme ordre selon lequel les
commandes correspondantes apparaissent dans le flux du document. Les bornes de ces parties ne
devraient pas survenir au milieu des donnes cette spcification ne dfinit pas la faon dont cela est fait.
Comme pour tous les types MIME en plusieurs parties, chaque partie possde en option un en-tte
Content-Type dont la valeur par dfaut est "text/plain". Les agents utilisateurs devraient produire l'entte Content-Type , accompagn d'un paramtre "charset".
Chaque partie est cense contenir :
1.
2.
un en-tte Content-Disposition dont la valeur est "form-data" ;

un attribut name spcifiant le nom de commande de la commande correspondante. Les noms de
commande, qui sont cods originellement dans des jeux de caractres non-ASCII, peuvent tre
cods l'aide de la mthode indique dans le document [RFC2045].
Ainsi, par exemple, pour une commande nomme "macommande", la partie correspondante serait
spcifie par :
Content-Disposition: form-data; name="macommande"
Comme pour toutes les transmissions MIME, on utilise les caractres "CR LF" (i.e., "%0D%0A") pour
sparer les lignes de donnes.
Chaque partie peut tre code et l'en-tte Content-Transfer-Encoding peut tre fourni, si la valeur de
cette partie n'est pas conforme l'encodage par dfaut (7BIT) (voir le document [RFC2045], section 6)
Si le contenu d'un fichier est soumis avec un formulaire, l'entre du fichier devrait tre identifie par le
type de contenu adquat (par exemple, "application/octet-stream"). Si plusieurs fichiers doivent tre
retourns en rsultat d'une seule entre de formulaire, ils devraient tre retourns comme type
"multipart/mixed" imbriqu dans le "multipart/form-data".
L'agent utilisateur devrait essayer de fournir un nom de fichier pour chaque fichier soumis. Le nom du
fichier peut tre spcifi avec le paramtre "filename" dans un en-tte 'Content-Disposition: form-data'
ou, au cas o il y aurait plusieurs fichiers, dans un en-tte 'Content-Disposition: file' de la sous-partie. Si
le nom de fichier du systme d'exploitation du client n'est pas en US-ASCII, le nom de fichier pourrait
tre approxim ou cod en utilisant la mthode dcrite dans le document [RFC2045]. Cela est commode
pour les cas o, par exemple, les fichiers tlchargs vers le serveur pourraient contenir des rfrences les
uns vers les autres (par exemple, un fichier TeX et sa description de style auxilliaire ".sty").
L'exemple suivant illustre le codage "multipart/form-data". Supposons le formulaire suivant :
<form action="http://server.com/cgi/gestion"
enctype="multipart/form-data"
method="post">
<p>
79
Quel est votre nom ? <input type="text" name="nom_soumis"><br>

Quels sont les fichiers envoyer ? <input type="file" name="fichiers"><br>
</form>
Si l'utilisateur saisit "Martin" dans la commande de texte et slectionne le fichier textuel "fichier1.txt",
l'agent utilisateur pourrait envoyer en retour les donnes suivantes :
Content-Type: multipart/form-data; boundary=AaB03x
--AaB03x
Content-Disposition: form-data; name="nom_soumis"
Martin
--AaB03x
Content-Disposition: form-data; name="fichiers"; filename="fichier1.txt"
Content-Type: text/plain
... contenu de fichier1.txt ...
--AaB03x-Si l'utilisateur avait slectionn un second fichier (image) "fichier2.gif", l'agent utilisateur pourrait
assembler les parties comme suit :
Content-Type: multipart/form-data; boundary=AaB03x
--AaB03x
Content-Disposition: form-data; name="nom_soumis"
Martin
--AaB03x
Content-Disposition: form-data; name="fichiers"
Content-Type: multipart/mixed; boundary=BbC04y
--BbC04y
Content-Disposition: file; filename="fichier1.txt"
Content-Type: text/plain
... contenu de fichier1.txt ...
--BbC04y
Content-Disposition: file; filename="fichier2.gif"
Content-Type: image/gif
Content-Transfer-Encoding: binary
...contenu de fichier2.gif...
--BbC04y---AaB03x--
12 Les scripts
Sommaire
1.
2.
Introduction aux scripts

La conception des documents pour les agents utilisateurs qui grent les scripts
1. L'lment SCRIPT
2. La spcification du langage de script
Le langage de script par dfaut
La dclaration locale du langage de script
L'appel des lments HTML partir d'un script
3. Les vnements intrinsques
4. La modification dynamique des documents
80
3.
La conception des documents pour les agents utilisateurs qui ne grent pas les scripts
1. L'lment NOSCRIPT
2. La dissimulation des donnes de script aux agents utilisateurs
12.1 Introduction aux scripts

Un script ct client est un programme pouvant accompagner le document HTML ou bien y tre
directement incorpor. Le programme s'excute sur la machine cliente au chargement du document ou
tout autre moment comme l'activation d'un lien. La gestion des scripts de HTML est indpendante du
langage de script.
Les scripts offrent aux auteurs le moyen d'accrotre les documents HTML de manire les rendre trs
ractifs et interactifs. Par exemple :
des scripts peuvent tre valus au chargement du document et modifier le contenu de celui-ci
dynamiquement ;
des scripts peuvent accompagner un formulaire et en traiter les entres au fur et mesure. Les
concepteurs peuvent remplir dynamiquement des parties du formulaire en fonction des valeurs
des autres champs. Ils peuvent aussi s'assurer que les donnes entres appartiennent un ventail
prdtermin de valeurs, que les champs soient cohrents les uns avec les autres, etc. ;
des scripts peuvent tre dclenchs par les vnements qui affectent le document, tels que le
chargement, le dchargement, l'attention d'un lment [ndt. element focus], le mouvement de la
souris, etc. ;
des scripts peuvent tre attachs aux commandes d'un formulaire (par exemple, les boutons) et
produire les lments d'une interface utilisateur graphique.
Il existe deux types de script que les auteurs peuvent attacher un document HTML :
ceux qui sont excuts une seule fois quand le document est charg par l'agent utilisateur. Les
scripts qui apparaissent l'intrieur d'un lment SCRIPT s'excutent quand le document est
charg. Pour les agents utilisateurs qui ne peuvent pas ou ne pourront pas grer les scripts,
l'auteur peut inclure un contenu de remplacement via l'lment NOSCRIPT ;
ceux qui sont excuts toutes les fois o un vnement particulier se produit. Ces scripts peuvent
tre assigns un certain nombre d'lments au moyen des attributs d'vnement intrinsque.
12.2 La conception des documents pour les agents utilisateurs qui grent les scripts
Les sections suivantes abordent les questions concernant les agents utilisateurs qui grent les scripts.
12.2.1 L'lment SCRIPT
L'lment SCRIPT installe un script dans le document. Cet lment peut apparatre un nombre
quelconque de fois dans les lments HEAD ou BODY d'un document HTML.
Le script peut tre dfini en contenu de l'lment SCRIPT ou dans un fichier externe. Si l'attribut src n'est
pas spcifi, alors l'agent utilisateur doit interprter le contenu de l'lment comme tant le script. Si
l'attribut src a une valeur d'URI, alors l'agent utilisateur doit ignorer le le contenu de l'lment et ramener
le script dsign par l'URI. Remarquez que l'attribut charset se rfre l'encodage de caractres du script
dsign par l'attribut src ; cela ne concerne pas le contenu de l'lment SCRIPT.
Les scripts sont valus par les moteurs de script, qui doivent tre connus de l'agent utilisateur.
La syntaxe des donnes du script dpend du langage de script.
12.2.2 La spcification du langage de script
Comme HTML ne dpend pas d'un langage de script particulier, les auteurs des documents doivent
indiquer explicitement aux agents utilisateurs le langage de chaque script. Cela peut tre fait soit au
travers d'une dclaration par dfaut, soit par une dclaration locale.
81
Le langage de script par dfaut

Les auteurs devraient spcifier le langage de script par dfaut pour tous les scripts d'un document, en
incluant la dclaration META suivante dans l'lment HEAD :
<meta http-equiv="Content-Script-Type" content="un_certain_type">
dans laquelle la valeur "un_certain_type" reprsente le type de contenu nommant le langage de script. En
exemple de telles valeurs : "text/tcl", "text/javascript", "text/vbscript".
En l'absence d'une dclaration META, le langage par dfaut peut tre fix par un en-tte HTTP
Content-Script-Type .
Content-Script-Type: un_certain_type
dans lequel la valeur "un_certain_type" reprsente encore le type de contenu nommant le langage de
script.
Les agents utilisateurs devraient dterminer le langage de script par dfaut du document selon les tapes
suivantes (de la priorit la plus grande la plus faible) :
1.
2.
Si d'ventuelles dclarations META spcifient une valeur "Content-Script-Type", c'est la

dernire dans le flux de caractres qui dtermine le langage de script par dfaut ;
Sinon, si d'ventuels en-ttes HTTP spcifie "Content-Script-Type", c'est le dernier dans le flux
de caractres qui dtermine le langage de script par dfaut.
Les documents, qui ne spcifient pas de langage de script par dfaut et qui contiennent des lments
spcifiant un script d'vnement intrinsque, sont errons. Les agents utilisateurs peuvent toujours
essayer d'interprter les scripts spcifis incorrectement mais ils ne sont pas obligs de le faire. Les outils
d'dition devraient gnrer une indication de langage de script par dfaut pour aider les auteurs crer
des documents corrects.
La dclaration locale du langage de script
On doit spcifier l'attribut type pour chaque instance de l'lment SCRIPT dans le document. La valeur
de l'attribut type d'un lment SCRIPT surclasse le langage de script par dfaut de cet lment.
Dans cet exemple, nous dclarons le langage de script par dfaut comme tant "text/tcl". Nous incluons
dans l'en-tte du document un lment SCRIPT, dont le script en question est localis dans un fichier
externe, tel quel et crit dans le langage de script "text/vbscript". Nous incluons galement dans le corps
du document un lment SCRIPT, lequel contient son propre script crit dans le langage "text/javascript".
<html>
<head>
<title>Un document avec SCRIPT</title>
<meta http-equiv="Content-Script-Type" content="text/tcl">
<script type="text/vbscript" src="http://quelquepart.com/progs/vbcalc">
</script>
</head>
<body>
...un code JavaScript...
</script>
</body>
</html>
L'appel des lments HTML partir d'un script
Chaque langage de script obit ses propres rgles pour appeler des objets HTML partir d'un script.
Cette spcification ne dfinit pas de mcanisme standard pour appeler les objets HTML.
Nanmoins, les scripts devraient se rfrer un lment en fonction du nom qui lui est assign. Les
moteurs de scripts devraient observer les rgles de prsance suivantes dans l'identification d'un lment :
l'attribut name est prioritaire sur l'attribut id, quand tous les deux sont spcifis. Sinon, on peut utiliser
l'un ou l'autre.
82
12.2.3 Les vnements intrinsques

Liste des attributs dont la valeur est un script gestionnaire d'vnement
onload
L'vnement onload se produit quand l'agent utilisateur finit de charger une fentre ou bien tous
les cadres dans un jeu d'encadrement FRAMESET. Cet attribut peut s'utiliser avec les lments
BODY et FRAMESET.
onunload
L'vnement onunload se produit quand l'agent utilisateur retire le document d'une fentre ou
d'un cadre. Cet attribut peut s'utiliser avec les lments BODY et FRAMESET.
onclick
L'vnement onclick se produit quand le bouton du dispositif de pointage est cliqu au-dessus
d'un lment. Cet attribut peut s'utiliser avec la plupart des lments.
ondblclick
L'vnement ondblclick se produit quand le bouton du dispositif de pointage est double-cliqu
au-dessus d'un lment. Cet attribut peut s'utiliser avec la plupart des lments.
onmousedown
L'vnement onmousedown se produit quand le bouton du dispositif de pointage est appuy audessus d'un lment. Cet attribut peut s'utiliser avec la plupart des lments.
onmouseup
L'vnement onmouseup se produit quand le bouton du dispositif de pointage est relch audessus d'un lment. Cet attribut peut s'utiliser avec la plupart des lments.
onmouseover
L'vnement onmouseover se produit quand le dispositif de pointage est dplac sur un lment.
Cet attribut peut s'utiliser avec la plupart des lments.
onmousemove
L'vnement onmousemove se produit quand le dispositif de pointage est dplac alors qu'il est
au-dessus d'un lment. Cet attribut peut s'utiliser avec la plupart des lments.
onmouseout
L'vnement onmouseout se produit quand le dispositif de pointabe est dplac en dehors d'un
lment. Cet attribut peut s'utiliser avec la plupart des lments.
onfocus
L'vnement onfocus se produit quand un lment reoit l'attention, soit par le biais du dispositif
de pointage, soit au travers d'une navigation par tabulation. Cet attribut peut s'utiliser avec les
lments suivants : A, AREA, LABEL, INPUT, SELECT, TEXTAREA et BUTTON.
onblur
L'vnement onblur se produit quand un lment perd l'attention, soit par le biais du dispositif de
pointage, soit au travers d'une navigation par tabulation. On peut l'utiliser avec les mmes
lments que l'vnement onfocus.
onkeypress
L'vnement onkeypress se produit quand une touche est presse puis relche au-dessus d'un
onkeydown
L'vnement onkeydown se produit quand une touche est garde appuye au-dessus d'un
onkeyup
L'vnement onkeyup se produit quand une touche est relche au-dessus d'un lment. Cet
attribut peut s'utiliser avec la plupart des lments.
onsubmit
L'vnement onsubmit se produit quand un formulaire est soumis. Il ne s'applique qu' l'lment
FORM.
onreset
L'vnement onreset se produit quand un formulaire est rinitialis. Il ne s'applique qu'
l'lment FORM.
onselect
L'vnement onselect se produit quand l'utilisateur slectionne un certain texte dans un champs
textuel. Cet attribut peut s'utiliser avec les lments INPUT et TEXTAREA.
onchange
83
L'vnement onchange se produit quand une commande perd l'attention de saisie et quand sa
valeur a t modifie depuis l'instant o elle avait reu l'attention. Cet attribut s'applique aux
lments suivants : INPUT, SELECT et TEXTAREA.
Il est possible d'associer une action un certain nombre d'vnements, qui se produisent quand
l'utilisateur interagit avec l'agent utilisateur. Chacun des vnements intrinsques lists ci-dessus
prend comme valeur un script. Le script s'excute toutes les fois o l'vnement se produit pour cet
lment. La syntaxe des donnes de script dpend du langage de script.
Les lments de commande, savoir INPUT, SELECT, BUTTON, TEXTAREA et LABEL, rpondent
tous certains vnements intrinsques. Quand ces lments n'apparaissent pas dans un formulaire, on
peut les employer pour augmenter l'interface utilisateur graphique du document.
Par exemple, l'auteur peut vouloir inclure des boutons poussoirs dans son document, ceux-ci ne
soumettant pas de formulaire mais commnuniquant quand mme avec un serveur quand ils sont activs.
Les exemples suivants montrent quelques commandes et comportements d'interface utilisateur possibles
raliss partir d'vnements intrinsques.
Dans l'exemple suivant, la commande nomme "nomUtilisateur" est un champ obligatoire. Quand
l'utilisateur quitte le champ, l'vnement onblur appelle une fonction JavaScript qui confirme la validit
de "nomUtilisateur".
<input name="nomUtilisateur" onblur="verifNomUtilisateur(this.value)">
Voici un autre exemple en JavaScript :
<input name ="nombre"
onchange="if (!verifNombre(this.value, 1, 10))
{this.focus();this.select();} else {remercier()}"
VALUE="0">
Voici l'exemple en VBScript d'un gestionnaire d'vnement pour un champ textuel :
<input name="edit1" size="50">
<script type="text/vbscript">
Sub edit1_changed()
If edit1.value = "abc" Then
button1.enabled = True
Else
button1.enabled = False
End If
End Sub
</script>
Voici le mme exemple utilisant cette fois Tcl :
<input name="edit1" size="50">
<script type="text/tcl">
proc edit1_changed {} {
if {[edit value] == abc} {
button1 enable 1
} else {
button1 enable 0
}
}
edit1 onChange edit1_changed
</script>
Voici un exemple en JavaScript d'une relation d'vnement [ndt. event binding] l'intrieur d'un script.
Tout d'abord, voici un gestionnaire de clic simple :
<button type="button" name="mon_bouton" value="10">
function mon_onclick() {
...
}
document.form.mybutton.onclick = mon_onclick
</script>
</button>
Voici un gestionnaire de fentre plus intressant :
84
function mon_onload() {
...
}
var win = window.open("un/autre/URI")
if (win) win.onload = mon_onload
</script>
En Tcl, a donnerait :
proc mon_onload {} {
...
}
set win [window open "un/autre/URI"]
if {$win != ""} {
$win onload mon_onload
}
</script>
12.2.4 La modification dynamique des documents
Les scripts qui s'excutent quand le document est charg sont capables de modifier dynamiquement le
contenu du document. Ces capacits sont fonction du langage de script en question (par exemple, la
dclaration "document.write" dans le modle objet de HTML reconnue par certains diteurs de logiciels).
On peut modliser la modification dynamique d'un document comme suit :
1.
2.
3.
Tous les lments SCRIPT sont valus dans l'ordre au fur et mesure du chargement du
document ;
Toutes les structures de script l'intrieur d'un lment SCRIPT donn, qui gnrent des valeurs
SGML de type CDATA, sont values. Leur texte gnr combin est insr dans le document
la place de l'lment SCRIPT ;
Les donnes gnres de type CDATA sont r-values.
Les documents HTML sont contraints de se conformer au DTD HTML avant comme aprs le traitement
de chaque lment SCRIPT.
L'exemple suivant illustre la manire dont les scripts peuvent modifier un document dynamiquement. Soit
le script suivant :
<title>Document de test</title>
document.write("<p><b>Bonjour tout le monde !<\/b>")
</script>
celui-ci produit le mme effet que ce balisage HTML :
<title>Document de test</title>
<p><B>Bonjour tout le monde !</B>
12.3 La conception des documents pour les agents utilisateurs qui ne grent pas les scripts
Les sections suivantes expliquent comment les auteurs peuvent crer des documents qui fonctionnent
auprs des agents utilisateurs ne reconnaissant pas les scripts.
12.3.1 L'lment NOSCRIPT
L'lment NOSCRIPT permet aux auteurs de fournir un contenu de remplacement quand un script n'est
pas excut. Le contenu de l'lment NOSCRIPT ne devrait tre restitu par un agent utilisateur
reconnaissant les scripts que dans les cas suivants :
l'agent utilisateur est configur pour ne pas valuer les scripts ;

l'agent utilisateur ne reconnat pas le langage de script invoqu par un lment SCRIPT apparu
plus tt dans le document.
85
Les agents utilisateurs qui ne grent pas les scripts ct client doivent restituer le contenu de cet lment.
Dans l'exemple suivant, l'agent utilisateur qui interprte l'lment SCRIPT va inclure certaines donnes
cres dynamiquement dans le document. Si l'agent utilisateur ne reconnat pas les scripts, l'utilisateur
peut toujours obtenir les donnes au travers d'un lien.
...un script Tcl qui insre des donnes...
</script>
<noscript>
<p>Accéder aux <a href="http://quelquepart.com/data">données.</a>
</ noscript >
12.3.2 La dissimulation des donnes de script aux agents utilisateurs
Les agents utilisateurs qui ne reconnaissent pas l'lment SCRIPT vont vraisemblablement restituer le
contenu de cet lment comme un texte. Certains moteurs de script, dont ceux des langages JavaScript,
VBScript et Tcl, autorisent la dlimitation des dclarations d'un script par un commentaire SGML. Les
agents utilisateurs, qui ne reconnaissent pas l'lment SCRIPT, ignoreront donc le commentaire c'est-dire tout ce qui est compris entre alors que les moteurs de script intelligents comprendront que
le script dans le commentaire devrait tre excut.
Une autre solution ce problme, c'est de placer les scripts dans des documents externes et de les appeler
avec l'attribut src.
Commenter les scripts en JavaScript
Le moteur JavaScript autorise l'apparition de la chane  l'analyseur JavaScript.

</script>
Commenter les scripts en VBScript
En VBScript, le caractre guillemet simple fait que le reste de la ligne courante est trait comme un
commentaire. On peut dont l'utiliser pour dissimuler la chane --> VBScript, par exemple :
<script type="text/vbscript">
<!-Sub foo()
...
End Sub
' -->
</script>
Commenter les scripts en TCL
En Tcl, le caractre dise # annonce le reste de la ligne comme un commentaire :

</script>
86
13 Index des lments

Lgende : Optionnel, Interdit, Vide, Dconseill, DTD Transitoire, DTD avec jeu d'enCadrement
Nom
Balise
Balise
Vide Dc. DTD Description
ouvrante fermante
ancre
ABBR
abrviation (e.g., WWW, HTTP, etc.)
ACRONYM
acronyme
ADDRESS
informations sur l'auteur
APPLET
AREA
applet Java
aire d'image cliquable ct client
style de texte gras
BASE
BASEFONT
URI de base du document

D
taille de la police de base
BDO
inactivation de l'algorithme I18N BiDi
BIG
style de texte agrandi
BLOCKQUOTE
citation longue
BODY
BR
O
I
corps du document
V
saut de ligne forc
BUTTON
bouton poussoir
CAPTION
lgende de la table
CENTER
raccourci pour DIV align=center
CITE
citation
CODE
fragment de code
COL
colonne de table
COLGROUP
groupe de colonnes de table
DD
description de la dfinition
DEL
texte supprim [ndt. deleted]
DFN
dfinition d'instance
DIR
liste d'annuaire [ndt. directory list]
DIV
conteneur de langue/style gnrique
DL
liste de dfinitions [ndt. definition list]
DT
terme de dfinition [ndt. definition term]
EM
emphase
FIELDSET
groupe de commandes de formulaire
FONT
FORM
FRAME
FRAMESET
changement local la police

formulaire interactif
sous-fentre
subdivision de fentre
H1
titrage
H2
titrage
H3
titrage
H4
titrage
H5
titrage
87
H6
HEAD
titrage
O
HR
HTML
O
I
en-tte du document
V
rgle horizontale
lment racine du document
style de texte italique
IFRAME
sous-fentre en-ligne
IMG
image incopore
INPUT
commande de formulaire
INS
texte insr
ISINDEX
invite sur une seule ligne
KBD
texte entrer par l'utilisateur
LABEL
texte du label d'un champs de formulaire
LEGEND
lgende du jeu de champs
LI
LINK
item de liste
V
lien indpendant du mdia
MAP
image cliquable ct client
MENU
META
liste de menus
mtainformations gnriques
NOFRAMES
conteneur du contenu de remplacement pour

une restitution sans cadres
NOSCRIPT
conteneur du contenu de remplacement pour

une restitution sans scripts
OBJECT
objet incorpor gnrique
OL
liste ordonne [ndt. ordered list]
OPTGROUP
groupe d'options
OPTION
option slectionnable
paragraphe
PARAM
valeur de proprit nomme
PRE
texte prformat
br citation en-ligne
style de texte barr
SAMP
exemple de sortie d'un programme, scripts,

etc.
SCRIPT
dclarations de script
SELECT
slecteur d'option
SMALL
style de texte diminu
SPAN
conteneur de langue/style gnrique
STRIKE
texte barr
STRONG
forte emphase
STYLE
indication de style
SUB
criture en lettres infrieures
SUP
criture en lettres suprieures
TABLE
TBODY
corps de table
88
TD
cellule de donnes d'une table [ndt. table data

cell]
TEXTAREA
champs de texte multiligne
TFOOT
pied de table
TH
cellule de rubrique d'une table [ndt. table

header cell]
THEAD
en-tte de table
TITLE
titre du document
TR
range de table
style de texte tlimprimeur ou chasse fixe
[ndt. monospaced]
TT
U
style de texte soulign
UL
liste non-ordonne
VAR
instance d'une variable ou argument de

programme
14 Index des attributs

Lgende : Dconseill, DTD Transitoire, DTD avec jeu d'enCadrement
Nom
abbr
lments
concerns
TD, TH
accept-charset FORM
Valeur par
dfaut
Type
Dc. DTD Commentaires
%Text;
#IMPLIED
abrviation pour
cellule
de
rubrique
%Charsets;
#IMPLIED
liste des jeux de

caractres
reconnus
%ContentTypes; #IMPLIED
liste de types
MIME
pour
chargement d'un
fichier sur le
serveur
accept
FORM, INPUT
accesskey
A,
AREA,
BUTTON, INPUT,
LABEL,
%Character;
LEGEND,
TEXTAREA
#IMPLIED
touche
de
caractre
pour
l'accessibilit
action
FORM
%URI;
#REQUIRED
gestionnaire de
formulaire ct
serveur
align
CAPTION
%CAlign;
#IMPLIED
relativement la
table
align
APPLET,
IFRAME,
IMG, %IAlign;
INPUT, OBJECT
#IMPLIED
alignement
vertical
horizontal
align
LEGEND
%LAlign;
#IMPLIED
relativement au
jeu de champs
align
TABLE
%TAlign;
#IMPLIED
position de la
table relativement
la fentre
89
ou
align
HR
(left | center |
#IMPLIED
right)
align
DIV, H1, H2, H3, (left | center |

#IMPLIED
H4, H5, H6, P
right | justify)
alignement,
alignement
texte
align
COL,
COLGROUP,
(left | center |
TBODY,
TD, right | justify | #IMPLIED
TFOOT,
TH, char)
THEAD, TR
alink
BODY
%Color;
#IMPLIED
couleur des liens

slectionns
alt
APPLET
%Text;
#IMPLIED
brve description
alt
AREA, IMG
%Text;
#REQUIRED
brve description
alt
INPUT
CDATA
#IMPLIED
brve description
archive
APPLET
CDATA
#IMPLIED
archive
OBJECT
CDATA
#IMPLIED
liste
d'URI
spars par des
espaces
#IMPLIED
liste des rubriques

concernes
spares par des
virgules
axis
TD, TH
CDATA
du
liste
d'archives
spares par des
virgules
background
BODY
%URI;
#IMPLIED
mosaque
de
textures
pour
l'arrire-plan du
document
bgcolor
TABLE
%Color;
#IMPLIED
couleur d'arrireplan des cellules
bgcolor
TR
%Color;
#IMPLIED
couleur d'arrireplan des ranges
bgcolor
TD, TH
%Color;
#IMPLIED
couleur d'arrireplan des cellules
bgcolor
BODY
%Color;
#IMPLIED
couleur d'arrireplan du document
border
TABLE
%Pixels;
#IMPLIED
border
IMG, OBJECT
%Pixels;
#IMPLIED
cellpadding
TABLE
%Length;
#IMPLIED
espacement
l'intrieur
cellules
cellspacing
TABLE
%Length;
#IMPLIED
espacement entre
les cellules
char
COL,
COLGROUP,
TBODY,
TD, %Character;
TFOOT,
TH,
THEAD, TR
#IMPLIED
caractre
d'alignement, e.g.
char=':'
90
paisseur
contour de
table
D
du
la
paisseur de la
bordure du lien
des
charoff
COL,
COLGROUP,
TBODY,
TD, %Length;
TFOOT,
TH,
THEAD, TR
#IMPLIED
dcalage
caractre
d'alignement
charset
A, LINK, SCRIPT %Charset;
#IMPLIED
encodage
de
caractres de la
ressource relie
checked
INPUT
(checked)
#IMPLIED
pour les boutons

radio et les cases
cocher
cite
BLOCKQUOTE,
Q
%URI;
#IMPLIED
URI du document
ou
message
sources
cite
DEL, INS
%URI;
#IMPLIED
informations sur
la
raison
du
changement
class
Tous les lments,

sauf
BASE,
BASEFONT,
HEAD,
HTML, CDATA
META, PARAM,
SCRIPT, STYLE
et TITLE
#IMPLIED
liste de classes
spares par des
espaces
classid
OBJECT
%URI;
#IMPLIED
identifie
une
implmentation
clear
BR
(left | all | right |

none
none)
contrle
l'coulement
texte
code
APPLET
CDATA
fichier de classe
de l'applet
#IMPLIED
codebase
OBJECT
%URI;
#IMPLIED
codebase
APPLET
%URI;
#IMPLIED
codetype
OBJECT
%ContentType;
#IMPLIED
color
BASEFONT,
FONT
%Color;
#IMPLIED
cols
FRAMESET
%MultiLengths;
#IMPLIED
cols
TEXTAREA
NUMBER
#REQUIRED
colspan
TD, TH
NUMBER
compact
DIR, DL, MENU,

(compact)
OL, UL
#IMPLIED
content
META
#REQUIRED
91
du
URI de base pour

les
attributs
classid,
data,
archive
D
URI de
optionnel
l'applet
base
pour
type de contenu
de l'attribut code
D
couleur du texte
liste de longueurs,
par dfaut : 100%
(1 colonne)
nombre
de
colonnes
couvertes par la
cellule
CDATA
du
espacement interitems rduit

informations
associes
coords
AREA
%Coords;
#IMPLIED
liste de longueurs
spares par des
virgules
coords
%Coords;
#IMPLIED
utiliser avec les

images cliquables
ct client
data
OBJECT
%URI;
#IMPLIED
rfrence
aux
donnes de l'objet
datetime
DEL, INS
%Datetime;
#IMPLIED
date et heure du
changement
declare
OBJECT
(declare)
#IMPLIED
dclare
mais
n'instancie pas le
drapeau
#IMPLIED
l'agent utilisateur
peut
diffrer
l'excution
du
script
defer
SCRIPT
(defer)
dir
Tous les lments,

sauf
APPLET,
BASE,
BASEFONT,
BDO,
BR, (ltr | rtl)
FRAME,
FRAMESET,
IFRAME,
PARAM, SCRIPT
#IMPLIED
direction du texte
faible/neutre
dir
BDO
#REQUIRED
directionnalit
disabled
BUTTON, INPUT,
OPTGROUP,
OPTION,
(disabled)
SELECT,
TEXTAREA
#IMPLIED
indisponible dans
ce contexte
enctype
FORM
%ContentType;
"application/xwwwformurlencoded"
face
BASEFONT,
FONT
CDATA
#IMPLIED
for
LABEL
IDREF
#IMPLIED
correspond la
valeur ID du
champs
frame
TABLE
%TFrame;
#IMPLIED
quelles parties du
contour restituer
frameborder
FRAME, IFRAME (1 | 0)
headers
TD, TH
IDREFS
#IMPLIED
height
IFRAME
%Length;
#IMPLIED
height
TD, TH
%Length;
#IMPLIED
height
IMG, OBJECT
%Length;
#IMPLIED
(ltr | rtl)
92
liste de noms de
police spars par
des virgules
bordures de cadre
ou non ?
liste des id des
cellules
de
rubrique
hauteur du cadre
hauteur
cellule
surclasser
de
la
la
hauteur
height
APPLET
%Length;
#REQUIRED
href
A, AREA, LINK
%URI;
#IMPLIED
URI
de
la
ressource relie
href
BASE
%URI;
#IMPLIED
URI qui fait

office d'URI de
base
hreflang
A, LINK
%LanguageCode; #IMPLIED
hspace
APPLET,
OBJECT
http-equiv
META
IMG,
hauteur initiale
code de langue
D
gouttire
horizontale
%Pixels;
#IMPLIED
NAME
#IMPLIED
nom de l'en-tte
de rponse HTTP
id
Tous les lments,

sauf
BASE,
HEAD,
HTML, ID
META, SCRIPT,
STYLE, TITLE
#IMPLIED
identifiant unique
au document
ismap
IMG, INPUT
(ismap)
#IMPLIED
utiliser une image

cliquable
ct
serveur
label
OPTION
%Text;
#IMPLIED
utiliser dans les

menus
hirarchiques
label
OPTGROUP
%Text;
#REQUIRED
utiliser dans les

menus
hirarchiques
lang
Tous les lments,

sauf
APPLET,
BASE,
BASEFONT, BR,
%LanguageCode; #IMPLIED
FRAME,
FRAMESET,
IFRAME,
PARAM, SCRIPT
language
SCRIPT
CDATA
#IMPLIED
nom de langage
de script prdfini
link
BODY
%Color;
#IMPLIED
couleur des liens
code de langue
#IMPLIED
lien vers une

description
longue
(en
complment de
l'attribut alt)
#IMPLIED
lien vers une

description
longue
(en
complment de
l'attribut title)
marginheight FRAME, IFRAME %Pixels;
#IMPLIED
marges verticales
en pixels
marginwidth
FRAME, IFRAME %Pixels;
#IMPLIED
marges
horizontales
pixels
en
maxlength
INPUT
#IMPLIED
nombre
de
longdesc
longdesc
IMG
%URI;
FRAME, IFRAME %URI;
NUMBER
93
caractres maxi
pour les champs
de texte
media
STYLE
%MediaDesc;
#IMPLIED
prvu pour ces

mdias
media
LINK
%MediaDesc;
#IMPLIED
pour restitution
sur ces mdias
method
FORM
(GET | POST)
GET
mthode HTTP
utilise
pour
soumettre
le
formulaire
multiple
SELECT
(multiple)
#IMPLIED
slection simple
par dfaut
name
BUTTON,
TEXTAREA
CDATA
#IMPLIED
permet
aux
applets de se
trouver les uns les
autres
name
APPLET
CDATA
#IMPLIED
name
SELECT
CDATA
#IMPLIED
nom du champs
name
FORM
CDATA
#IMPLIED
nom
formulaire
les scripts
name
FRAME, IFRAME CDATA
#IMPLIED
name
IMG
CDATA
#IMPLIED
nom de l'image
pour les scripts
name
CDATA
#IMPLIED
extrmit du lien
nomme
name
INPUT, OBJECT
CDATA
#IMPLIED
soumettre comme
partie
du
formulaire
name
MAP
CDATA
#REQUIRED
pour appel par

l'attribut usemap
name
PARAM
CDATA
#REQUIRED
nom de proprit
name
META
NAME
#IMPLIED
nom
des
mtainformations
nohref
AREA
(nohref)
#IMPLIED
cette rgion est

inactive
autoriser
l'utilisateur
redimensionner le
cadre ?
nom du cadre
pour le ciblage
noresize
FRAME
(noresize)
#IMPLIED
noshade
HR
(noshade)
#IMPLIED
nowrap
TD, TH
(nowrap)
#IMPLIED
suppression de la
csure
object
APPLET
CDATA
#IMPLIED
fichier
d'applet
srialis
onblur
A,
AREA,
BUTTON, INPUT,
%Script;
LABEL, SELECT,
TEXTAREA
#IMPLIED
94
du
pour
l'lment a perdu
l'attention
onchange
INPUT, SELECT,
%Script;
TEXTAREA
#IMPLIED
la
valeur
l'lment
chang
onclick
Tous les lments,

sauf
APPLET,
BASE,
BASEFONT,
BDO, BR, FONT,
FRAME,
%Script;
FRAMESET,
HEAD,
HTML,
IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE
#IMPLIED
le bouton d'un
pointeur a t
cliqu
ondblclick
Tous les lments,

sauf
APPLET,
BASE,
BASEFONT,
BDO, BR, FONT,
FRAME,
%Script;
FRAMESET,
HEAD,
HTML,
IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE
#IMPLIED
le bouton d'un
pointeur a t
double cliqu
onfocus
A,
AREA,
BUTTON, INPUT,
%Script;
LABEL, SELECT,
TEXTAREA
#IMPLIED
l'lment a reu
l'attention
onkeydown
Tous les lments,

sauf
APPLET,
BASE,
BASEFONT,
BDO, BR, FONT,
FRAME,
%Script;
FRAMESET,
HEAD,
HTML,
IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE
#IMPLIED
une touche
appuye
onkeypress
Tous les lments,

sauf
APPLET,
BASE,
BASEFONT,
BDO, BR, FONT,
FRAME,
%Script;
FRAMESET,
HEAD,
HTML,
IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE
#IMPLIED
une touche a t
presse
puis
relche
onkeyup
Tous les lments,

sauf
APPLET, %Script;
BASE,
#IMPLIED
une touche
relche
95
de
a
est
est
BASEFONT,
BDO, BR, FONT,
FRAME,
FRAMESET,
HEAD,
HTML,
IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE
FRAMESET
%Script;
#IMPLIED
onload
BODY
%Script;
#IMPLIED
le document a t
charg
Tous les lments,

sauf
APPLET,
BASE,
BASEFONT,
BDO, BR, FONT,
FRAME,
onmousedown
%Script;
FRAMESET,
HEAD,
HTML,
IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE
#IMPLIED
le bouton d'un
pointeur a t
appuy
Tous les lments,

sauf
APPLET,
BASE,
BASEFONT,
BDO, BR, FONT,
FRAME,
onmousemove
%Script;
FRAMESET,
HEAD,
HTML,
IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE
#IMPLIED
le bouton d'un
pointeur a t
dplac
l'intrieur
Tous les lments,

sauf
APPLET,
BASE,
BASEFONT,
BDO, BR, FONT,
FRAME,
%Script;
FRAMESET,
HEAD,
HTML,
IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE
#IMPLIED
le bouton d'un
pointeur a t
dplac en dehors
Tous les lments,

sauf
APPLET,
BASE,
BASEFONT,
onmouseover BDO, BR, FONT, %Script;
FRAME,
FRAMESET,
HEAD,
HTML,
IFRAME,
#IMPLIED
le bouton d'un
pointeur a t
dplac sur
onmouseout
96
tous les cadres

ont t chargs
onload
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE
onmouseup
Tous les lments,

sauf
APPLET,
BASE,
BASEFONT,
BDO, BR, FONT,
FRAME,
%Script;
FRAMESET,
HEAD,
HTML,
IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE
#IMPLIED
le bouton d'un
pointeur a t
relch
onreset
FORM
%Script;
#IMPLIED
le formulaire a t
rinitialis
onselect
INPUT,
TEXTAREA
%Script;
#IMPLIED
un texte a t
slectionn
onsubmit
FORM
%Script;
#IMPLIED
le formulaire a t
soumis
onunload
FRAMESET
%Script;
#IMPLIED
onunload
BODY
%Script;
#IMPLIED
le document a t
retir
profile
HEAD
%URI;
#IMPLIED
dictionnaire
de
mtainformations
nomm
prompt
ISINDEX
%Text;
#IMPLIED
readonly
TEXTAREA
(readonly)
#IMPLIED
readonly
INPUT
(readonly)
#IMPLIED
pour les boutons

de type text et
passwd
rel
A, LINK
%LinkTypes;
#IMPLIED
types de
progressif
lien
rev
A, LINK
%LinkTypes;
#IMPLIED
types de
rgressif
lien
rows
FRAMESET
%MultiLengths;
#IMPLIED
rows
TEXTAREA
NUMBER
#REQUIRED
rowspan
TD, TH
NUMBER
nombre
de
ranges couvertes
par la cellule
rules
TABLE
%TRules;
#IMPLIED
rgles
ranges
colonnes
scheme
META
CDATA
#IMPLIED
selectionner une
forme de contenu
scope
TD, TH
%Scope;
#IMPLIED
porte
cellules
rubrique
97
tous les cadres

ont t retirs
message d'invite
liste de longueurs,
par dfaut : 100%
(1 range)
entre
et
des
de
FRAME, IFRAME (yes | no | auto)
auto
selected
OPTION
(selected)
#IMPLIED
shape
AREA
%Shape;
rect
contrle
l'interprtation
des coordonnes
shape
%Shape;
rect
utiliser avec les

images cliquables
ct client
size
HR
%Pixels;
#IMPLIED
size
FONT
CDATA
#IMPLIED
size
INPUT
CDATA
#IMPLIED
size
BASEFONT
CDATA
#REQUIRED
size
SELECT
NUMBER
#IMPLIED
ranges visibles
les attributs de
l'lment
COL
affectent
"n"
colonnes
span
COL
NUMBER
barres
de
dfilement ou non
scrolling
[+|-]entier,
size="+1",
size="4"
e.g.
propre chaque
type de champs
D
taille de police de
base pour les
lments FONT
span
COLGROUP
NUMBER
nombre
de
colonnes
par
dfaut dans le
groupe
src
SCRIPT
%URI;
#IMPLIED
URI d'un script

externe
src
INPUT
%URI;
#IMPLIED
pour les champs

avec des images
src
FRAME, IFRAME %URI;
#IMPLIED
src
IMG
%URI;
#REQUIRED
URI de l'image
incorporer
standby
OBJECT
%Text;
#IMPLIED
message
montrer pendant
le chargement
start
OL
NUMBER
#IMPLIED
style
Tous les lments,

sauf
BASE,
BASEFONT,
HEAD,
HTML, %StyleSheet;
META, PARAM,
SCRIPT, STYLE,
TITLE
#IMPLIED
indications
de
style associes
summary
TABLE
#IMPLIED
objet/structure
pour sortie vocale
tabindex
A,
AREA,
NUMBER
BUTTON, INPUT,
#IMPLIED
position
l'ordre
%Text;
98
source du contenu
du cadre
numro
commenant
squence
la
dans
de
OBJECT,
SELECT,
TEXTAREA
tabulation
target
A, AREA, BASE,
%FrameTarget;
FORM, LINK
#IMPLIED
text
BODY
#IMPLIED
title
Tous les lments,

sauf
BASE,
BASEFONT,
%Text;
HEAD,
HTML,
META, PARAM,
SCRIPT, TITLE
#IMPLIED
titre consultatif
type
A, LINK
%ContentType;
#IMPLIED
type de contenu
consultatif
type
OBJECT
%ContentType;
#IMPLIED
type de contenu
pour
l'attribut
data
%Color;
restituer dans ce
cadre
couleur du texte
du document
type
PARAM
%ContentType;
#IMPLIED
type de contenu
pour
l'attribut
value
quand
valuetype=ref
type
SCRIPT
%ContentType;
#REQUIRED
type de contenu
du langage de
script
type
STYLE
%ContentType;
#REQUIRED
type de contenu
du langage de
style
type
INPUT
%InputType;
TEXT
le genre de gadget
voulu
type
LI
%LIStyle;
#IMPLIED
style de l'item de
liste
type
OL
%OLStyle;
#IMPLIED
style
numrotation
type
UL
%ULStyle;
#IMPLIED
style de puce
type
BUTTON
(button | submit |
submit
reset)
utiliser
comme
bouton
de
formulaire
usemap
IMG,
OBJECT
%URI;
#IMPLIED
utiliser une image

cliquable
ct
client
valign
COL,
COLGROUP,
(top | middle |
#IMPLIED
TBODY,
TD,
bottom | baseline)
TFOOT,
TH,
THEAD, TR
alignement
vertical dans les
cellules
value
INPUT
CDATA
#IMPLIED
spcifier pour les

boutons radio et
les cases cocher
value
OPTION
CDATA
#IMPLIED
par dfaut,
contenu
l'lment
le
de
value
PARAM
CDATA
#IMPLIED
valeur
de
INPUT,
99
de
proprit
envoy au serveur
la soumission
value
BUTTON
CDATA
#IMPLIED
value
LI
NUMBER
#IMPLIED
valuetype
PARAM
(DATA | REF |
DATA
OBJECT)
version
HTML
CDATA
%HTML.Version; D
une constante
vlink
BODY
%Color;
#IMPLIED
couleur des liens

visits
vspace
APPLET,
OBJECT
%Pixels;
#IMPLIED
gouttire verticale
width
HR
%Length;
#IMPLIED
width
IFRAME
%Length;
#IMPLIED
width
IMG, OBJECT
%Length;
#IMPLIED
surclasser
largeur
width
TABLE
%Length;
#IMPLIED
largeur de la table
width
TD, TH
%Length;
#IMPLIED
largeur
cellule
width
APPLET
%Length;
#REQUIRED
largeur initiale
width
COL
%MultiLength;
#IMPLIED
spcification de la
largeur
de
colonne
width
COLGROUP
%MultiLength;
#IMPLIED
largeur par dfaut

des
lments
COL contenus
width
PRE
NUMBER
#IMPLIED
IMG,
100
rinitialise
le
numro dans la
squence
comment
interprter
valeur
la
largeur du cadre
la
de
la
Deuxime partie : Javascript

Table des matires
1.
2.
3.
4.
5.
6.
7.
Prsentation de Javascript
Littraux et constantes
Objets et fonctions
Tableaux
Oprateurs, expressions et instructions
Accs aux lments de la page HTML partir d'un script
DOM (Document Object Model)
1 Prsentation de JavaScript
1.1 Qu'est ce que JavaScript ?
JavaScript est un langage de scripts. Il est donc d'un apprentissage simple et rapide et permet des
programmeurs dbutants de raliser leurs premires pages Web sous une forme particulirement
attrayante et fonctionnelle. Il existe une multitude de petits programmes JavaScript accessibles
gratuitement sur le Web et que l'on peut intgrer dans ses propres pages HTML. Par exemple aux
adresses http://www.editeurjavascript.com/ et http://www.dynamicdrive.com/ Un programme JavaScript
est intgr dans une page HTML tlcharge partir d'un serveur HTTP, puis il est excut sur le poste
client. Pour des raisons de scurit videntes, un tel programme ne peut donc ni lire, ni crire dans un
fichier du poste client.
Javascript est un langage dynamiquement typ (loosely typed), comme SmallTalk, les types sont lis aux
valeurs plutt qu'aux noms des variables. On ne peut pas dire par exemple que la variable x est de type
entier, mais qu'elle contient une valeur de type entier un instant donn. Les variables ne sont pas
dclares avec un type spcifique : une valeur de n'importe quel type peut leur tre attribue. L'indication
du type est mmoris au niveau des valeurs : chaque valeur est attach un champ de bits supplmentaire
indiquant son type.
Un programme Javascript est dcrit au sein de l'lment SCRIPT. Un script peut-tre plac dans l'en-tte
de la page HTML (dans l'lment HEAD) ou dans son corps (dans l'lment BODY). Dans l'exemple cidessus, le script est plac dans le corps de la page HTML et excut au moment o la page est tlcharge
dans le navigateur Web. La variable entier est dclare, mais non encore dfinie (elle n'a pas de
101
valeur, aucune zone mmoire ne lui a t alloue). Sa valeur est de type undefined. La variable i est
dclare, dfinie et initialise dans la mme instruction. Elle est de type entier. La variable accentu
n'est pas dclare, mais directement dfinie et initialise avec la valeur de i. La variable chane est de
type chane. Puisque les variables ne sont pas statiquement types, il n'existe pas d'identificateurs pour
dsigner les types. Tout comme Java, Javascript est sensible la casse et on peut utiliser les caractres
accentus dans les noms des variables. Il existe en Javascript un certain nombre d'"objets" prdfinis.
L'objet document reprsente le document HTML dans lequel est insr le script. Comme en Java, on
peut envoyer un message un objet pour lui demander de rendre un service. Lorsque l'interprte
Javascript (contenu dans le navigateur Web) interprte la ligne document.write(i); il affiche la
valeur de i dans la page Web. La chane passe en argument write peut tre du code HTML qui sera
interprt de la mme faon que si ce code HTML tait crit en dehors de l'lment <script>. C'est le cas
pour l'instruction document.write("<br>"); qui permet de sauter une ligne dans la page Web.
A quoi sert le mot-cl var ? C'est essentiellement un indicateur de visibilit. Une variable dclare avec
le mot-cl var n'est utilisable que dans le bloc o elle est dclare
Dans l'exemple ci-dessus, x est une variable locale la fonction toto alors que y est une variable
globale (oui, comme dans les vieux langages non structurs, on peut dfinir une variable globale au plus
profond d'une fonction !!!! bonjour les effets de bords). La demande de lecture de la valeur de x en
dehors de la fonction toto provoque une erreur d'interprtation.
1.2 Les diverses formes de JavaScript
Javascript est une marque dpose par Netscape depuis 1997. La version Microsoft de Javascript, utilise
par le navigateur Internet Explorer, s'apelle JScript.
Les problmes d'incompatibilit obligent le programmeur tester le type de navigateur utilis par le
client, sa version, la plate-forme qui le supporte (Windows -16 ou 32-, Mac OS, Unix,...) et bien d'autres
choses encore, afin d'adapter le script qu'il dveloppe tous les cas de figures envisageables s'il veut que
son document puisse tre accessible le plus largement possible.
Un script dont l'ide de base se veut simple peut donc devenir "une usine gaz" si l'on doit tenter de
prendre en compte toutes les alternatives possibles. Dans ces conditions, le premier besoin du
programmeur est de tester l'ensemble de son script dans les diffrentes situations. Malheureusement, les
outils de debugging JavaScript sont rudimentaires, essentiellement en raison du typage dynamique qui ne
102
permet pas de contrler si les variables sont utilises correctement. Pour dtecter les erreurs d'excution
d'un programme JavaScript :
dans un navigateur Mozilla, on peut utiliser la Console JavaScript (menu Outils). Contrairement
aux compilateurs qui peuvent dtecter en une seule passe plusieurs erreurs, l'interprte
JavaScript s'interrompt la premire erreur !!!
utiliser
une
extension
de
navigateur
comme
FireBug
pour
https://addons.mozilla.org/fr/firefox/addon/1843
utiliser un dbogueur intgr dans un IDE (NetBeans partir de la version 6.5)
FireFox :
1.3 Vers une normalisation ?

Face aux problmes que nous venons d'voquer, on peut esprer une normalisation de JavaScript. Un
standard existe, il s'appelle ECMAScript (European Computer Manufactures Association). Cette norme
ECMA-262 date de 1999 (http://www.ecma-international.org/publications/standards/Ecma-262.htm)!
Depuis, une nouvelle norme ECMA-327 a t propose en juin 2001. Une autre standardisation ISO
(International Organization of Standardization) ayant pour code ISO/IEC-16262 a t dfinie. Mais ne
vous rjouissez pas trop vite... La version JavaScript utilise aujourd'hui (septembre 2005) par les
navigateurs Netscape-Mozilla est la version 1.4. La version 1.5 implantera la norme ECMA-262
(http://www.mozilla.org/js/js15.html ).
Ces standards ne voulant avantager ni Netscape-Mozilla, ni Internet Explorer ont choisi d'adopter un
niveau trs bas (en gros, l'intersection des fonctionnalits offertes par les deux navigateurs), ce qui leur
confre un intrt de portabilit, mais passablement douteux sur le plan des fonctionnalits (C'est
pourquoi, la plupart du temps les crateurs prfrent adapter leurs pages aux deux navigateurs les plus
utiliss en prvoyant les particularits de chacun). Conscients de cette vidence, Netscape et Microsoft
ont d'ores et dj propos une mise jour du standard. Mais la procdure n'en est qu' ses dbuts et vous
aurez le temps d'aligner de nombreuses lignes de programmes avant que le nouveau standard soit adopt.
Il y a fort parier qu'il sera d'ailleurs devenu obsolte lorsqu'il entrera en vigueur
1.4 A quel moment un script s'excute-t-il ?
Un programme JavaScript inclus dans une page HTML dans un lment <script> s'excute au moment de
l'interprtation de la page HTML : le navigateur lit l'ensemble du code HTML et concatne en mmoire
les sources des diffrents scripts, puis il passe la main l'interprte JavaScript qui excute le tout. Enfin
le navigateur r-interprte le code HTML dans lequel ont t insres les valeurs renvoyes par les
scripts.
Les scripts situs dans l'en-tte de la page servent en gnral dfinir des variables et des fonctions qui
seront utilises dans des scripts figurant dans le corps de la page HTML. Un script peut ajouter dans le
document du code HTML dpendant de plusieurs facteurs tels le type de configuration matrielle et/ou
logicielle du client (navigateur, plugins,...), le contenu ventuel de certains cookies, la date, l'heure du
moment prsent, etc. A chaque endroit o le contenu du document devra s'adapter ces facteurs, un script
sera plac et excut juste aprs le chargement. Ces scripts se placent dans le corps du document (entre
<body> et </body>). Voici un exemple de script qui met en forme un texte d'une faon diffrente suivant
le type de navigateur (le dtail de ce script sera comprhensible dans la suite de ce cours).
103
Rappelons que les caractres spciaux (guillemets, lettres accentues, chevrons) figurant l'intrieur
d'une chane sont cods par une suite de caractres compris entre & et ; Par exemple < est cod par <
lt signifie less than)
Un script peut galement tre situ dans un lment autre que <script>. Dans ce cas, le source JavaScript
est une chane de caractres qui est la valeur d'un attribut reprsentant un vnement mis par l'lment
HTML. La liste des vnements HTML et des lments pouvant les mettre, la suite d'une action de
l'utilisateur ou d'un changement de l'environnement, se trouve dans la partie HTML de ce document
(12.2.3). Voici un exemple d'lment <h1> qui met un vnement onclick quand on clique dessus. Le
gestionnaire d'vnement est un appel la fonction prdfinie alert qui affiche une fentre popup :
On peut aussi excuter une suite d'instructions JavaScript en mode interactif en tapant
javascript:<instructions> dans la barre d'adresse du navigateur (ne pas oublier les deux points
aprs javascript !!)
104
Au lieu de placer les instructions JavaScript directement dans un lment <script>, on peut utiliser
l'attribut src de l'lment <script> dont la valeur sera l'URL d'un fichier JavaScript. Cette approche est
utile :
Lorsque plusieurs pages d'un site utilisent des scripts identiques, au lieu de dupliquer ceux-ci
dans chacun des documents HTML, il est plus judicieux de regrouper toutes les scripts communs
dans un seul fichier et de prciser dans chacun des documents HTML le nom du fichier dont il
s'agit. Cela rduit l'espace disque serveur ncessaire pour stocker les fichiers HTML et rend
toute modification plus simple et plus sre ;
Pour ce qui est du temps de chargement des parties communes, il n'interviendra que lors de la
premire utilisation puisqu' partir de cet instant, l'ensemble sera sauvegard dans le cache du
navigateur.
Le fichier contenant le source JavaScript peut aussi provenir de n'importe quel serveur HTTP,
diffrent de celui qui a fourni la page HTML.
Les fichiers peuvent tre de deux sortes. D'une part ceux qui contiennent du source JavaScript pur (sans
HTML). Le fichier sera postfix par l'extension .js et il sera inclus par : <script src="path/nom de
fichier.js"></script>. D'autre part les fichiers-archives ayant une extension .jar (Java archive) et contenant
plusieurs fichiers du type de ceux que l'on vient de voir, mais compresss. La rfrence ces fichiers se
fera par : <script archive="../../Archives_JS/CoursJS.jar" src="Sces_Chap1.js"></script>. L'archive est
place dans le cache du navigateur lors du tlchargement de la premire page qui l'utilise, puis chaque
script rfrenc par l'attribut src est extrait de l'archive galement la premire utilisation.
1.5 L'emplacement d'un script dans une page HTML a-t-il une importance?
Il est possible d'utiliser un identificateur (une fonction ou une variable) un endroit de la page HTML
alors qu'il est dfini dans un script plac plus loin dans la page. En fait, au moment du chargement, tout le
code Javascript est analys quel que soit son emplacement dans la page. Si bien qu'en n'importe quel lieu
de la page, on peut rfrencer toute variable pourvu qu'elle soit dfinie au plus haut niveau et donc qu'elle
soit visible. Les scripts peuvent tre placs n'importe o dans la page HTML. Les rfrences en avant
seront bien traites : on peut utiliser une fonction g l'intrieur d'une fonction f et la fonction g tre
dcrite aprs la fonction f. Tous les lments <script> d'une mme page constituent un seul et mme
programme JavaScript.
105
2 Littraux et constantes
2.1 Identificateurs
Rappelons que JavaScript est sensible la casse. Il ignore tout caractre d'espacement (blanc, tabulation,
retour la ligne, etc.) apparaissant entre les entits lexicales. Ainsi, pour une meilleure lisibilit du source
vous pouvez insrer des blancs par exemple, de part et d'autre d'oprateurs, indenter des portions
constituant des blocs ou couper une ligne trop longue. Par contre une entit lexicale ne peut en aucun cas
contenir un caractre d'espacement sous peine de la transformer en deux entits lexicales et donc,
vraisemblablement de voir apparatre une erreur d'interprtation. Les identificateurs servent nommer
des variables ou des fonctions. La syntaxe d'un identificateur impose en premire place un caractre
alphabtique (majuscule ou minuscule, accentu ou non) ou $ (dollar) ou _ (soulign). Les caractres
suivants peuvent tre n'importe quelle combinaison de ces mmes caractres plus des chiffres.
2.2 Littraux
Les littraux peuvent tre de type numrique (entiers ou rels), de type chanes de caractres ou de type
boolen. Ces trois types correspondent aux types primitifs de JavaScript
De faon gnrale, les littraux numriques sont crits en dcimal. Le langage accepte nanmoins des
littraux entiers en reprsentation octale ou hexadcimale. Les premiers, dont les chiffres sont compris
entre 0 et 7, ont pour caractristique de dbuter par le chiffre "0". Les seconds dbutent par les caractres
"0x" et ont pour chiffres n'importe quel chiffre entre 0 et 9 ainsi que les lettres A, B, C, D, E ou F
(majuscules ou minuscules).
Les rels peuvent avoir une reprsentation en virgule fixe (du type 3.14159) ou en virgule flottante (du
type 0.314 E+1 ou encore .314 e+1). Dans tous les cas, la marque dcimale est le point et non la virgule,
quant au signe d'exponentiation, il peut tre indiffremment en majuscule ou minuscule.
Les chanes littrales sont encadres par des quotes simples ( ' ) ou doubles ( " ). Si l'intrieur d'une
chane encadre par un de ces caractres, ce mme caractre doit apparatre, il sera prcd du caractre
"antislash" ( \ ).
Les littraux peuvent avoir des formes plus complexes que pour les types primitifs que nous venons de
voir. C'est le cas des "initialisateurs" de tableaux ou d'objets que nous verrons plus loin.
106
2.3 Commentaires
Comme en Java, on utilise // pour mettre en commentaire tout ce qui suit sur la mme ligne et /* */ pour
commenter un bloc.
2.4 Caractres spciaux
JavaScript autorise la reprsentation de caractres particuliers l'intrieur d'une chane de caractres.
Pour pouvoir obtenir ces reprsentations, on utilise le caractre backslash (\) suivi d'un autre caractre.
Nous avons vu que JavaScript dispose de deux caractres diffrents pour limiter les chanes, ce qui est
bien agrable lorsque la chane elle-mme ncessite l'utilisation d'un de ces caractres, comme par
exemple dans "L'apprentissage de JavaScript est ais", ou encore ' Le professeur a dit : "tudiez
srieusement !" '. Mais nous rencontrerons de nombreuses situations o cela ne suffira plus. Dans ce cas,
nous pourrons utiliser les caractres \' ou \" pour signifier l'occurrence d'une simple apostrophe ou de
guillemets comme dans : "Le professeur a dit : \"L\'apprentissage de JavaScript est ais !\" ".
Voici la liste de ces caractres spciaux ainsi que leur signification :
Squence Caractre reprsent
\b
\n
\f
\t
\r
\\
\'
\"
\
\x
\u
Backspace - retour arrire d'un caractre

Newline - Saut de ligne
Form feed - Nouvelle page
Tab - Tabulation
Return - Retour chariot
Backslash - Le caractre backslash lui-mme
Single quote - Apostrophe
Double quote - Guillemets
N'importe quel caractre dont reprsente le code octal (3 chiffres)
N'importe quel caractre dont reprsente le code hexadcimal (2 chiffres)
N'importe quel caractre dont reprsente le code Unicode (4 chiffres hexa)
Il est noter que pour tout caractre autre que ceux indiqus ci-dessus, le fait qu'il apparaisse prcd
d'un backslash ne change absolument rien. Le backslash est ignor et le caractre apparat normalement.
Pour connatre l'unicode d'un caractre spcial, on peut utiliser l'utilitaire charmap de Windows :
L'utilisation des unicodes dans les navigateurs rcents est prfrable au codage HTML du type
=é On crira S = "Le d\u00EEner sera pr\u00EAt \u00E0 l'heure " ; au
lieu de S = "Le dîner sera pr&ampecirc;t &ampagrave; l'heure ";
Il faut signaler pour terminer que les navigateurs rcents acceptent les caractres accentus (bien que les
normes HTML indiquent que les caractres doivent tre cods en ASCII sur 7 bits, c'est une nouvelle
preuve que les techniques disponibles sont en avance sur les normes). On peut donc crire directement
document.write("Le dner sera prvu l'heure"); quand on dite son code HTML.
Cependant,on n'est pas assur que le texte s'affichera correctement dans tous les navigateurs. De
mme, si on utilise des caractres accentus dans le source des scripts, on n'est pas assur que celuici sera accept par d'anciennes versions de l'interprte JavaScript.
2.5 Littraux et valeurs boolennes
Il existe deux littraux boolens : true et false. Compte tenu du typage dynamique, certaines valeurs
numriques ou de type chane peuvent tre converties en boolens. Le nombre 0 est converti en false.
Toutes les autres valeurs numriques sont converties en true. De mme, toutes les chanes de caractres
sont converties en true.
107
2.6 les constantes

Infinity est une constante numrique qui reprsente +infini et qui est affiche lorsque le rsultat d'un
calcul dpasse la valeur 1.7976931348623157E+10308
-Infinity est la valeur ngative correspondante.

La constante NaN (Not A Number) a la mme signification qu'en Java .
La constante null permet de reprsenter une valeur diffrente de toute autre, signifiant ainsi qu'une
variable possdant cette valeur n'a pas reu d'affectation.
La constante undefined est plus gnrale que null : c'est une valeur qui est retourne (en cas de
demande d'criture ou par utilisation de l'oprateur typeof par exemple) pour une variable dfinie mais
non affecte, ou non dfinie ou pour une proprit non dfinie d'un "objet".
108
3 Objets et Fonctions
3.1 JavaScript n'est pas un langage orient objet
Un objet JavaScript ressemble une structure " la C" contenant des valeurs nommes (des proprits).
Ces valeurs peuvent tre d'un type primitif nombre, chane ou boolen, un type objet ouune fonction.
En effet, JavaScript est un langage fonctionnel, c'est--dire un langage dans lequel les fonctions sont
des "citoyens de premire espce". Cela signifie qu'une fonction peut tre vue comme une donne. Ainsi,
on peut passer une fonction en argument une autre fonction et une fonction peut retourner une fonction.
Une fonction dont un des paramtres est une fonction ou qui renvoie une fonction est appele une
fonctionnelle (comme en LISP). Un objet n'est donc pas une structure " la C", dont les champs sont fixs
une bonne fois pour toutes la compilation, mais plutt une liste de proprits attache un symbole.
Comme en LISP, on peut ajouter ou supprimer une proprit un objet en cours d'excution du
programme.
Comme en Java, un objet est une donne alloue dynamiquement en mmoire avec l'oprateur new.
Voici un exemple de cration d'une instance de la classe prdfinie Object, laquelle on ajoute
dynamiquement des proprits. La valeur de la proprit c de l'objet monObjet est la fonction
prdfinie alert. L'oprateur delete supprime la proprit c de l'objet monObjet.
Le fait que JavaScript soit un langage fonctionnel peut paratre anecdotique, mais c'est fondamental, car
cela permet de dfinir implicitement des pointeurs sur fonctions et ainsi des fonctions de type callback.
Cette possibilit est la base de la technologie rcente AJAX (http://www128.ibm.com/developerworks/library/j-ajax1/?ca=dgr-lnxw01Ajax). Une mthode en JavaScript est donc
une fonction qui est la valeur d'une proprit d'une certaine classe. Mais on peut aussi dfinir et utiliser
des fonctions en dehors de toute classe, comme on le fait en langage C++.
109
Comme en Java, une variable dont le type est un objet est en fait un pointeur, comme le montre
clairement l'exemple suivant dans lequel monObjet et tonObjet pointent vers la mme zone mmoire.
JavaScript utilise donc les concepts d'instance et de "classe", ainsi que d'envoi de message. Cependant,
JavaScript ne dfinit ni la notion d'hritage entre classes, ni la notion de polymorphisme, ni la
notion d'encapsulation, ce n'est donc absolument pas un langage orient objet, mais tout au plus un
langage bas objet (object based), comme disent certains auteurs amricains.
Pour embrouiller encore plus les ides, de nombreux auteurs appellent les "classes" des Objets !!!! Il
existe un certains nombre de "classes" prdfinies dans JavaScript (pour une liste complte, consultez
http://www.devguru.com/technologies/javascript/home.asp)
3.2 Construction d'un objet
Si on veut crer plusieurs objets ayant les mmes proprits, mais avec des valeurs diffrentes, on dfinit
une fonction constructeur, qui est une fonction comme une autre. La pseudo variable this est utilise
l'intrieur du constructeur pour dsigner l'objet que l'on est en train de construire. Il n'y a donc pas de
dfinition de classe comme en Java, on dfinit un constructeur qui est ensuite appel avec l'oprateur new
pour dfinir une nouvelle instance. Une mthode est dfinie comme une proprit ordinaire, dont la
valeur est une fonction. Pour crer une fonction, on utilise le mot cl function. Dans l'exemple suivant
on dfinit une "classe" Personne avec deux proprits de type chane, une proprit numrique et une
proprit fonctionnelle, nomme afficheToi, qui est l'unique mthode de cette classe. Puis on cr
deux instances de cette classe et on envoie un message chacune d'elles avec le slecteur
afficheToi(). Enfin, nous avons retenu que le typage est dynamique. Rien n'interdit donc d'affecter la
valeur 0 la proprit afficheToi qui devient de type numrique et la classe Personne n'a plus
aucune mthode. Le message toi.afficheToi() provoque donc une erreur. L'interprte indique que
la valeur de toi.afficheToi n'est pas une fonction. Vous commencez comprendre pourquoi
JavaScript est rput tre un langage difficile dboguer
110
3.3 Destruction d'un objet

JavaScript comme Java gre automatiquement la mmoire grce un Garbage Collector. Si aucune
variable ne pointe sur un objet, celui-ci sera limin de la mmoire au prochain nettoyage. Il est possible
de demander explicitement la destruction d'un objet avec l'oprateur delete.
3.4 En JavaScript, toutes les donnes peuvent tre vues comme des objets
Certains auteurs clament "En JavaScript, tout est objet", ce qui ne veut pas dire grand-chose, car on se
demande ce que recouvre le "tout".
Comme en Java, chaque type primitif correspond une classe. Nous avons les classes Number,
Boolean et String. La conversion d'un type numrique en une instance de Number et vice-versa se
fait par un mcanisme de boxing/unboxing comme en Java (>=1.5) et C# :
Nouveaut par rapport Java : les fonctions peuvent elles aussi tre vues comme des objets, instances de
la classe Function. On peut passer au constructeur Function un nombre quelconque d'arguments de
type chane. Tous les arguments reprsentent les paramtres formels de la fonction, sauf le dernier qui
reprsente le corps de la fonction, qui peut contenir un nombre quelconque d'instructions JavaScript,
spares par des point-virgule. On peut ainsi crer dynamiquement des fonctions, en assemblant des
morceaux de code source :
111
3.5 Passage d'argument une fonction

JavaScript distingue deux catgories de types : les types simples, qui ne contiennent qu'une seule valeur,
et les types composs, qui contiennent plusieurs valeurs. Les type simples sont les types primitifs et les
classes Number, Boolean et String. Les types composs sont les autres classes (y compris la classe
Array permettant de dfinir des tableaux)
Comme en C et en Java, tous les arguments passs une fonction sont passs par valeur, mais comme en
Java, les variables de type compos sont des pointeurs. Si une telle variable est modifie l'intrieur de la
fonction, la modification est conserve aprs l'appel cette fonction.
3.6 Variables et mthodes de classe

Pour implanter les notions de variable de classe et de mthode de classe, JavaScript introduit la notion de
prototype. L'expression <nom de classe> prototype <nom de proprit> = <valeur> permet de
dfinir une proprit de classe (qui sera un attribut ou une mthode selon le type de <valeur>. Cependant
pour accder une variable de classe ou une mthode de classe, il faut s'adresser une instance, puisque
il n'existe pas proprement parler de classes en JavaScript. Voici un exemple dans lequel la constante pi
est dfinie comme variable de la "classe" Cercle :
112
4 Tableaux
4.1 Les tableaux sont des objets
Les tableaux sont des instances de la classe Array, qui ressemble beaucoup la collection ArrayList
de Java. Les lments d'un tableau peuvent tre de types distincts. Tout tableau est en ralit une liste de
pointeurs. On peut donc ajouter, supprimer des lments d'un tableau en cours d'excution. La contrepartie de cette souplesse est evidemment une perte d'efficacit par rapport aux "vrais" tableaux, implants
en mmoire sous forme d'lments tous de mme taille et contigus.
Les mthodes push et pop de la classe Array permettent de grer un tableau comme une pile, le
sommet de la pile tant le dernier lment du tableau.
Les tableaux acceptent galement des index symboliques, ils ressemblent alors plus aux collections de
type Map de Java. Les dpassements de tableau ne provoquent pas d'erreur d'interprtation comme le
montre l'exemple suivant :
4.2 les mthodes de la classe Array

Voici quelques exemples d'appels de mthodes de la classe Array :
113
5 Oprateurs, expressions et instructions

5.1 Oprateurs
La plupart des oprateurs sont identiques ceux de Java. Ils ont les mmes priorits relatives et les
mmes rgles d'associativit. Comme en Java et contrairement C++ et C#, il est impossible de crer de
nouveaux oprateurs en JavaScript. L'oprateur delete dj rencontr et inconnu en Java permet de
supprimer un objet ou une proprit d'objet. L'oprateur unaire void s'applique une valeur de type
quelconque et renvoie systmatiquement la valeur undefined, ce qui pallie le fait que le littral
undefined n'existe pas et ne peut donc pas figurer explicitement dans le source. Enfin l'oprateur
unaire typeof retourne une chane reprsentant le type de son argument. On peut l'utiliser avec ou sans
parenthses. Par exemple, document.write((typeof "toto").toUpperCase()) crit
"STRING" dans la page Web.
5.2 Les expressions
La syntaxe est identique celle de Java
5.3 Les instructions
Le point-virgule est un sparateur d'instruction et non pas un terminateur d'instruction comme en C et
Java. Cela signifie que le point-virgule peut tre omis si on utilise un autre sparateur, par exemple un
passage la ligne :
114
L'instruction switch est plus puissante que celle de Java. Le test et les valeurs des diffrents cas peuvent
tre des chanes et mme une expression quelconque :
L'instruction with(<nom d'une classe>) est une sorte d'import la Java localement un bloc. Elle permet
d'utiliser les proprits et les mthodes d'une classe sans avoir rpter le nom de la classe en prfixe.
Il existe une instruction for de type "foreach" qui ressemble celle qu'on trouve en Java (>=1.5). Cela
permet de parcourir un tableau avec un indice mais sans prciser les bornes :
6 Accs aux lments de la page HTML partir d'un script

6.1 Nommer les lments de la page
Les lments d'une page doivent tre nomms pour que les scripts puissent lire leur contenu et les
manipuler. En HTML 4 et en XHTML, on utilise l'attribut id. Cet attribut optionnel peut tre utilis pour
n'importe quel lment :
<h1 id="montitre">Titre de ma page </h1>
Il est important que les auteurs de pages suivent une mthode rigoureuse pour choisir le nom des
lments, ce qui assurera entre autres que tous les noms soient diffrents. Dans les versions de HTML
antrieures la version 4 on utilisait l'attribut name et les anciennes versions des navigateurs ne
reconnaissent pas l'attribut id. C'est pourquoi il est conseill d'utiliser les deux attributs avec la mme
valeur.
115
Window et Document sont deux classes prdfinies de JavaScript. Lorsque le navigateur affiche une
page dans une fentre, il cr une instance de Window nomme window (avec une minuscule). La
classe Window possde une proprit nomme document dont la valeur est une instance de la classe
Document et qui reprsente la page HTML. La classe Document possde une proprit nomme
forms qui est un tableau d'objets de la classe Form. Ceux-ci reprsentent les formulaires contenus dans
le corps de la page (lment <form>). Les formulaires sont numrots partir de 0 en commenant par le
formulaire le plus haut dans la page. La classe Form possde une proprit nomme elements qui est
un tableau d'objets de la classe Object. Ceux-ci reprsentent les lments du formulaire (boutons,
botes cocher, etc). La classe Document possde galement une proprit nomme images qui est un
tableau d'objets de la classe Image, qui reprsentent les images contenus dans la page (lment <img>).
Par exemple document.forms[0].elements[0] dsigne le premier lment apparaissant dans le
premier formulaire du document HTML
6.2 Dynamic HTML

Un script peut accder un lment de la page soit en utilisant son nom (attribut id), soit en indiquant sa
position dans un tableau prdfini.
DHTML (Dynamic HTML) dsigne la possibilit de modifier le contenu et mme la structure d'une page
HTML aprs son chargement sur le poste client grce un script. DHTML est apparu avec les versions 4
des navigateurs Web et l'utilisation conjointe de trois technologies :
DHTML = HTML + CSS + JavaScript
Dans l'exemple suivant, on dfinit deux styles dans l'en-tte de la page. Le style un est affect un
lment <h1> grce son attribut class. Puis un script attach cet lment permet de changer son
style la suite d'un clic grce son attribut className dont la valeur est le nom du style de l'lment
(on ne peut pas utiliser directement l'attribut class pour changer le style, on se demande pourquoi)
116
7 DOM (Document Object Model)

7.1 Le DOM standard
Le problme de DHTML est qu'il n'est pas normalis. Certains objets , attributs, etc sont reconnus par les
interprtes JavaScript de certains navigateurs et pas par les autres.
Le DOM est une norme du W3C (http://www.w3.org/DOM/) permettant de dfinir une interface standard
entre les scripts d'une page HTML et le contenu de cette page, charg en mmoire sous la forme d'un
arbre. L'objectif est le mme que celui de DHTML : pourvoir modifier le contenu d'une page HTML
aprs que celle-ci ait t charge sur le poste client. DOM est dcrite trs prcisment par un ensemble
d'interfaces qui doivent tre implantes d'une faon ou d'une autre dans les navigateurs
(http://www.w3.org/TR/DOM-Level-2-Core/core.html)
La norme DOM possde plusieurs niveaux. Les niveaux 1 et 2 sont en grande partie disponibles dans IE
et compltement dans Mozilla/Netscape.
Pour accder un lment de la page, on utilise la mthode getElementById de l'interface
Document qui renvoie une instance de type Node. Node est une interface dcrivant toutes les
oprations que l'on peut faire sur un des noeuds de l'arbre DOM. Par exemple la mthode
appendChild de l'interface Node permet d'ajouter un sous-lment un lment existant. Ainsi, DOM
permet non seulement de modifier les contenus d'un document HTML, mais aussi de modifier
compltement la structure de ce document (supprimer, insrer des lments) par manipulation de l'arbre.
Dans l'exemple suivant, on insre dans un lment <h1> le nom de l'utilisateur saisi par un alert.
117

HTM Let Javascript

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTM Let Javascript

Загружено:

Авторское право:

Доступные форматы

ESIEA 4ime anne

Reproduction effectue par lESIEA

Premire partie : HTML

Table des matires

Qu'est-ce que le World Wide Web ?

1.1 Qu'est-ce que le World Wide Web ?

1.1.1 Introduction aux URI

le nom du protocole utilis pour accder la ressource ;

relier un autre document ou ressource (voir les lments A et LINK) ;

1.2 Qu'est-ce que HTML ?

1.2.1 Une brve histoire de HTML

une meilleure distinction de la structure et de la prsentation du document, en encourageant pour

2 La structure globale d'un document HTML

Introduction la structure d'un document HTML

2.1 Introduction la structure d'un document HTML

une ligne contenant les informations de version HTML ;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

2.3.2 L'lment TITLE

L'lment META et les en-ttes HTTP

le langage de script par dfaut ;

L'exemple suivant spcifie l'encodage de caractres du document comme tant "ISO-8859-5" :

2.4 Le corps du document

comme slecteur dans une feuille de style ;

d'afficher les messages

span.info { color: green }

3.1 Les blancs

espace ASCII (&#x0020;)

3.2 Le texte structur

Comme le disait <cite>le Gnral De GAULLE</cite>,

some at Ben and Jerry's, on Gloucester Road.</q>

la gestion des blancs ;

3.3.1 Les paragraphes : l'lment P

Introduction aux listes

4.1 Introduction aux listes

des informations non-ordonnes ;

Mlanger tous les ingrdients secs ;

Mlanger tous les ingrdients secs ;

4.3 Les listes de dfinitions : les lments DL, DT et DD

en chiffres romains minuscules

i, ii, iii, ...

en chiffres romains majuscules

I, II, III, ...

Introduction aux tables

5.1 Introduction aux tables

5.2 Les lments de construction des tables

Le nombre de colonnes dans la table.

Les largeurs de ces colonnes..

consomm&eacute;es par chaque s&eacute;nateur,

void : aucun ct. C'est la valeur par dfaut ;

none : aucune rgle. C'est la valeur par dfaut ;

border = pixels [CN]

Introduction aux liens et aux ancres

6.1 Introduction aux liens et aux ancres

6.1.3 La spcifications des ancres et des liens

le contenu de l'lment A dfinit la position de l'ancre ;

l'attribut href fait de cette ancre l'ancre source d'exactement un lien.

un URI absolu : http://www.macompanie.com/un.html#ancre-1

6.2.4 Les ressources non disponibles et non identifiables

6.3 Les relations du document : l'lment LINK

6.3.3 Les liens et les moteurs de recherche

6.4 L'information de chemin : l'lment BASE

espace ASCII ( )

consommées par chaque sénateur,