HTML et JavaScript HTML et JavaScript

Transcription

ESIEA 4ième année
Module CAAOO
HTML et JavaScript
par
Michel Futtersack
Maître de Conférences en Informatique
Université Paris 5 René Descartes
Reproduction effectuée par l’ESIEA
La reproduction de ce document par tout moyen que ce soit est soumise aux articles
L111-1 et L122-4 du code de la propriété intellectuelle
1
Première partie : HTML
NB : Cette partie est un extrait de la spécification W3C de HTML 4.01.J'ai reformulé certains passages
ou ajouté des explications supplémentaires. Vous trouverez la version française complète du document à
l'adresse : http://www.la-grange.net/w3c/html4.01/
Table des matières
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 règles horizontales
Les cadres
Les formulaires
Les scripts
Index des éléments
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 brève histoire de HTML
HTML 4
1. L'internationalisation
2. L'accessibilité
3. Les tables
4. Les documents composés
5. Les feuilles de styles
6. Les scripts
7. L'impression
La création de document avec HTML 4
1. Séparer la structure et la présentation
2. Considérer l'accès universel au Web
1.1 Qu'est-ce que le World Wide Web ?
Le World Wide Web (Web) est un réseau de ressources et d'informations. Le Web repose sur trois
mécanismes pour rendre ces données facilement disponibles le plus largement possible :
1.
un système de nommage uniforme pour leur localisation sur le Web (par exemple, les URI) ;
2
2.
3.
des protocoles, pour accéder à des ressources nommées dont on possède 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, séquence vidéo, programme, etc. -possède une adresse représentée sous la forme d'un identifiant de ressource uniforme ou URI.
Les URI sont formés de trois parties distinctes :
1.
2.
3.
le nom du protocole utilisé pour accéder à la ressource ;
le nom de la machine hébergeant la ressource ;
le nom de la ressource en question, indiqué sous la forme d'un chemin.
Prenons, pour exemple, l'URI qui désigne 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, hébergé sur la machine
nommée « www.w3.org » et accessible sur un disque dur de celle-ci par le chemin "/TR". On peut
rencontrer d'autres systèmes 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 boîte aux lettres d'un utilisateur :
<a href="mailto:[email protected]">Jean BON</a>.
Remarque : Vous connaissez probablement le terme « URL » et non le terme « URI ». Les URL forment
un sous-ensemble du système de nommage plus général 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 caractère
« # », 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
généralement à une ressource disponible sur la même machine que le document courant. Les liens relatifs
peuvent comporter d'autres composants de chemin relatifs (par exemple, ces caractères « .. » signifient le
niveau supérieur dans la hiérachie définie par le chemin) et des identifiants de fragment.
Les URI relatifs se résolvent en URI complets, en utilisant l'URI de base. Comme exemple de résolution
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 développerait 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 développerait 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 éléments 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 éléments IMG, OBJECT,
APPLET et INPUT) ;
créer des images cliquables (voir les éléments MAP et AREA) ;
soumettre un formulaire (voir l'élément FORM) ;
créer un cadre (voir les éléments FRAME et IFRAME) ;
citer une référence externe (voir les éléments Q, BLOCKQUOTE, INS et DEL) ;
se reporter aux conventions de métadonnées qui décrivent un document (voir l'élément HEAD).
3
1.2 Qu'est-ce que HTML ?
Publier de l'information en vue d'une distribution mondiale nécessite l'usage d'un langage universellement
compréhensible, d'une sorte de « langue maternelle » acceptée 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 possédant 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 réservations, de prendre des commandes, etc.
inclure des feuilles de calculs, des séquences vidéos ou sonores et d'autres applications,
directement dans les documents.
1.2.1 Une brève histoire de HTML
Le langage HTML a été développé à l'origine par Tim Berners-Lee, alors au CERN, et popularisé par le
navigateur Mosaic, développé au NCSA. Pendant les années 1990, il s'est épanoui en profitant de la
croissance explosive du Web. Durant cette période, HTML s'est agrandi de nombreuses manières
différentes. Le Web dépend des auteurs de pages et des éditeurs de logiciels qui partagent les mêmes
conventions pour HTML. Cela a motivé un travail commun sur les spécifications 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 différents. Parvenir à l'interopérabilité permet de baisser les coûts
des fournisseurs de contenus parce qu'ils n'ont à développer qu'une seule version d'un document. Si cet
effort n'est pas fait, le risque est grand de voir le Web régresser vers un monde propriétaire de formats
incompatibles, en réduisant en fin de compte son potentiel commercial au détriment de tous ses
participants.
Chaque version HTML a essayé de refléter le plus grand consensus entre les acteurs de l'industrie, de
sorte que les investissements consentis par les fournisseurs de contenus ne soient pas gaspillés et que
leurs documents ne deviennent en peu de temps illisibles.
Le langage HTML a été développé avec l'intuition que les appareils de toutes sortes devaient pouvoir
utiliser les informations sur le Web : les ordinateurs personnels avec des écrans de résolution et de
profondeur de couleurs variables, les téléphones cellulaires, les appareils portables, les appareils de
synthèse et de reconnaissance de la parole, les ordinateurs avec une bande passante faible comme élevée,
et ainsi de suite.
1.3 HTML 4
La spécification HTML 4 prolonge HTML avec des mécanismes pour les feuilles de styles, les scripts, les
cadres, l'incorporation des objets, la gestion améliorée des écritures de droite à gauche ou mixtes, les
tables enrichies et les améliorations des formulaires, qui augmentent l'accessibilité pour les personnes
ayant un handicap physique.
1.3.1 L'internationalisation
Cette version de HTML a été conçue avec l'aide d'experts dans le domaine de l'internationalisation, de
telle sorte que les documents peuvent être écrits en toutes langues et diffusés partout dans le monde.
L'adoption de la norme ISO/IEC:10646, comme jeu de caractères du document pour HTML, a représenté
une étape importante. C'est la norme mondiale la plus complète, qui tient compte des problèmes
concernant la représentation des caractères internationaux, le sens des écritures, la ponctuation et autres
particularités des langues mondiales.
Le langage HTML propose maintenant une meilleure gestion des diverses langues humaines à l'intérieur
du document. Cela permet une efficacité accrue dans l'indexation des documents par les moteurs de
recherche, la typographie de qualité, la synthèse de la parole à partir du texte, la césure, etc.
4
1.3.2 L'accessibilité
Au fur et à mesure de la croissance de la communauté du Web et de la diversification des capacités et
aptitudes de ses membres, il devient crucial que les technologies employées soient appropriées à leurs
besoins spécifiques. Le langage HTML a été conçu pour rendre les pages Web plus accessibles à ceux qui
ont des déficiences physiques. Les développements de HTML 4 qui ont été inspirés par ce souci de
l'accessibilité comprennent :
•
•
•
•
•
•
•
•
•
•
une meilleure distinction de la structure et de la présentation du document, en encourageant pour
cela l'utilisation des feuilles de style au lieu des éléments et attributs de présentation HTML ;
l'amélioration des formulaires, ce qui comprend l'ajout de clés d'accès (access keys), l'ajout de la
possibilité de regrouper sémantiquement les contrôles des formulaires et celle de regrouper
sémantiquement les options de l'élément SELECT et l'ajout des étiquettes actives (active labels)
;
la possibilité de baliser la description textuelle d'un objet incorporé (avec l'élément OBJECT) ;
un nouveau mécanisme d'images cliquables côté client (l'élément MAP ), qui permet aux auteurs
d'intégrer des liens sous forme de texte et d'images ;
l'accompagnement obligatoire des images, incluses avec l'élément IMG, et des images
cliquables, incluses avec l'élément AREA, d'un texte de remplacement ;
la gestion des attributs title et lang pour tous les éléments ;
la gestion des éléments ABBR et ACRONYM ;
un éventail élargi des médias cibles (tty, braille, etc.) à utiliser avec les feuilles de style ;
l'amélioration des tables, en y incluant des légendes, des regroupements de colonnes et des
mécanismes 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 remerciés par les utilisateurs intéressés mais en retireront aussi d'autres bénéfices : les
documents HTML bien conçus, qui distinguent la structure de la présentation, s'adapteront plus
facilement aux nouvelles technologies.
1.3.3 Les tables
Les auteurs disposent maintenant d'un plus grand contrôle sur leur structure et leur disposition (par
exemple, les regroupements de colonnes). La possibilité dont disposent les auteurs de spécifier la largeur
des colonnes permet aux agents utilisateurs (navigateurs web ou autres) d'afficher les données de table
progressivement (au fur et à mesure du chargement), plutôt que d'attendre le chargement entier de la table
avant de pouvoir la restituer.
1.3.4 Les documents composés
Le langage HTML offre maintenant une structure standard pour l'incorporation d'objets média et
d'applications génériques dans les documents HTML. L'élément OBJECT (de même que ses ancêtres, les
éléments plus spécifiques IMG et APPLET) fournit le moyen d'inclure des images, des séquences vidéo,
de l'audio, des mathématiques, des applications spécialisées et d'autres objets dans un document. Il
permet aussi aux auteurs de spécifier une hiérarchie de restitutions de remplacement aux agents
utilisateurs qui ne gèrent pas certaines restitutions particulières.
1.3.5 Les feuilles de styles
Les feuilles de styles simplifient le balisage HTML et soulagent grandement HTML des responsabilités
de la présentation. Elles donnent aux auteurs comme aux utilisateurs le contrôle de la présentation des
documents -- informations sur les polices de caractères, alignement, couleurs, etc.
Les informations de style peuvent être spécifiées pour un élément ponctuel ou pour des groupes
d'éléments. Elles peuvent se trouver à l'intérieur du document HTML ou dans une feuille de styles
externe.
Les mécanismes, qui associent une feuille de styles à un document, sont indépendants du langage de
feuille de style.
5
Avant l'apparition des feuilles de styles, les auteurs disposaient d'un contrôle limité sur la restitution des
pages. HTML 3.2 comprenait un certain nombre d'attributs et d'éléments permettant un contrôle de
l'alignement, de la taille de la police de caractères et de la couleur du texte. Les auteurs abusaient
également de tables et d'images pour la mise en page. Le temps relativement long nécessaire 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 présentation plus puissants,
le World Wide Web Consortium fera graduellement disparaître nombre d'éléments et d'attributs de
présentation HTML. Tout au long de ce document, les éléments et attributs concernés sont marqués
comme « déconseillés ». Ils sont généralement accompagnés d'exemples montrant comment parvenir au
même résultat en utilisant d'autres éléments 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 réagissent au cours de leur remplissage par l'utilisateur) et utiliser HTML
comme support d'applications en réseau.
Les mécanismes fournis pour associer HTML et scripts sont indépendants 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 décrire leurs relations en utilisant
l'élément HTML LINK ou encore en utilisant le cadre de description des ressources (RDF) du W3C .
1.4 La création de document avec HTML 4
Nous recommandons aux auteurs et aux développeurs d'observer les principes généraux suivants dans
leur travail avec HTML 4.
1.4.1 Séparer la structure et la présentation
Le langage HTML trouve ses racines dans SGML qui a toujours été un langage destiné à la spécification
d'un balisage de structures. Avec la maturité, les éléments et attributs de présentation HTML sont de plus
en plus remplacés par d'autres mécanismes, en particulier les feuilles de styles. L'expérience montre que
la séparation de la structure d'un document de sa présentation permet de réduire les coûts de diffusion
vers un grand éventail de plates-formes, de médias, etc., et facilite la mise à jour des documents.
1.4.2 Considérer l'accès universel au Web
De manière à rendre le Web plus accessible à tous, notamment aux personnes avec un handicap physique,
les auteurs devraient prendre en compte la façon dont leurs documents seront interprétés sur une grande
variété de plates-formes : les navigateurs commandés à la voix, les lecteurs en Braille, etc. Nous ne
demandons pas aux concepteurs de brider leur créativité, seulement que leurs créations intègrent les
restitutions alternatives. HTML propose nombre de mécanismes à 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
éloignés, dont les ordinateurs sont configurés très différemment. Pour qu'un document soit correctement
interprété, 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 fonctionnalités 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'élément TABLE).
6
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-tête du document
1. L'élément HEAD
2. L'élément TITLE
3. L'attribut title
4. Les métadonnées
Le corps du document
1. L'élément BODY
2. Les identifiants des éléments : les attributs id et class
3. Les éléments de bloc et les éléments en-ligne
4. Le regroupement des éléments : les éléments DIV et SPAN
5. Les titres : les éléments H1, H2, H3, H4, H5 et H6
6. L'élément 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-tête déclarative (délimitée par l'élément HEAD) ;
un corps, qui contient le contenu effectif du document. Le corps peut être implanté par l'élément
BODY ou l'élément FRAMESET.
Des blancs (les espaces, les sauts de ligne, les tabulations et les commentaires) peuvent survenir avant ou
après 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 réalisé 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 spécialisé pour l'édition de pages HTML. Il en existe
de nombreux, dont les plus connus sont FrontPage de Microsoft et DreamWeaver de Macromédia. 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 générée automatiquement. Voici une copie d'écran montrant le source ci-dessus.
7
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 récents écrivent donc par défaut 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 déclare la version HTML qui est utilisée dans le document. La déclaration
de type de document indique la définition de type de document (DTD) en vigueur pour le document.
HTML 4.01 spécifie trois DTD et les auteurs doivent donc inclure l'une des déclarations de type de
document suivantes dans leurs documents. Les DTD varient selon les éléments qui y sont gérés.
•
Le DTD HTML 4.01 strict comprend tous les éléments et attributs qui ne sont pas déconseillés
ou bien ceux qui n'apparaissent pas dans les documents avec jeu d'encadrement. Pour les
documents qui utilisent ce DTD, prendre la déclaration 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 éléments
et attributs déconseillés (la plupart d'entre eux concernant la présentation visuelle). Pour les
documents qui utilisent ce DTD, prendre la déclaration 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 déclaration 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-tête du document
2.3.1 L'élément HEAD
L'élément HEAD contient des informations sur le document courant, tels que son titre, des mots-clés que
les moteurs de recherche peuvent exploiter et d'autres données qui ne sont pas considérées comme faisant
partie du contenu du document.
8
2.3.2 L'élément TITLE
Chaque document HTML doit avoir un élément TITLE dans la section HEAD.
Les auteurs devraient utiliser l'élément 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 plutôt 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'élément
TITLE disponible aux utilisateurs (y compris les éléments TITLE qui apparaissent dans les cadres). Les
mécanismes pour ce faire dépendent de l'agent utilisateur (par exemple, une légende, un titre sonore).
Les titres peuvent contenir des entités de caractères (pour les caractères accentués, les caractères
spéciaux, 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 éléments d'en-tête...
</head>
<body>
... corps du document...
</body>
</html>
2.3.3 L'attribut title
Cet attribut fournit des informations consultatives concernant l'élément sur lequel il se place.
À la différence de l'élément TITLE, qui produit une information concernant un document entier et qui ne
peut apparaître qu'une fois, l'attribut title peut annoter un nombre quelconque d'éléments. Veuillez
consulter la définition de l'élément pour vérifier si celui-ci gère cet attribut.
Les agents utilisateurs peuvent restituer les valeurs des attributs title de diverses façons. Les navigateurs
visuels peuvent, par exemple, afficher leur valeur sous la forme d'une « infobulle » [ndt. tool tip] (un bref
message qui apparaît quand le dispositif de pointage reste au-dessus d'un objet). Dans le même ordre
d'idée, 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 reliée :
...un texte...
Voici une photo
<a href="http://quelquepart.com/trucsuper.gif" title="Moi faisant de la plongée">
de moi faisant de la plongée l'été dernier
</a>
2.3.4 Les métadonnées
L'élément META
On peut utiliser l'élément META pour identifier les propriétés d'un document (par exemple, l'auteur, la
date d'expiration, une liste de mots-clés, etc.) et assigner des valeurs à ces propriétés.
Chaque élément META spécifie un couple propriété/valeur. L'attribut name identifie la propriété et
l'attribut content en spécifie la valeur.
Par exemple, la déclaration suivante fixe une valeur à la propriété « Auteur » :
<meta name="Auteur" content="Dave Raggett">
9
On peut utiliser l'attribut lang avec l'élément META pour spécifier la langue de la valeur de l'attribut
content. Ceci permet aux synthétiseurs de parole d'appliquer des règles de prononciation en fonction de la
langue.
Dans cet exemple, le nom de l'auteur est annoncé comme étant en français :
<meta name="Auteur" lang="fr" content="Arnaud Le Hors">
L'élément META et les en-têtes HTTP
L'attribut http-equiv, qui peut s'utiliser à la place de l'attribut name, a un sens particulier quand les
documents sont ramenés via le protocole de transfert hypertexte HTTP. Les serveurs HTTP peuvent
utiliser le nom de propriété spécifié par l'attribut http-equiv pour créer un en-tête de style dans la réponse
HTTP.
L'exemple suivant de déclaration META :
<meta http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT">
celle-ci donnera l'en-tête HTTP :
Expires: Tue, 20 Aug 1996 14:25:27 GMT
Cette faculté peut être utilisée par les caches pour déterminer quand aller chercher une nouvelle copie du
document en question.
L'élément META et les moteurs de recherche
Une utilisation courante de l'élément META consiste à spécifier des mots-clés qu'un moteur de recherche
peut utiliser pour améliorer la pertinence du résultat d'une recherche. Quand des éléments META
fournissent des informations en plusieurs langues sur un document, les moteurs de recherche peuvent
opérer un filtrage, en fonction de l'attribut lang, pour afficher le résultat de la recherche selon les
préférences 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 accroître l'efficacité des moteurs de recherche en utilisant l'élément LINK pour
spécifier des liens vers les traductions du document en d'autres langues, des liens vers les versions du
document pour d'autres médias (par exemple, un fichier PDF) et, si le document fait partie d'une
collection de documents, des liens vers le point de départ adéquat à partir duquel se déplacer dans la
collection.
L'élément META et les informations par défaut
On peut utiliser l'élément META pour spécifier les informations par défaut sur un document dans les cas
suivants :
•
•
•
le langage de script par défaut ;
le langage de feuille de style par défaut ;
l'encodage de caractères du document.
L'exemple suivant spécifie l'encodage de caractères 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'élément BODY
Le corps du document représente le contenu du document. Le contenu peut être présenté par un agent
utilisateur de diverses façons. 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 même contenu peut être parlé. Puisque les feuilles de style sont désormais
le moyen préféré de spécifier la présentation d'un document, les attributs de présentation de l'élément
BODY sont maintenant déconseillés.
EXEMPLE DÉCONSEILLÉ :
Le fragment HTML suivant illustre l'emploi d'attributs déconseillés. Il fixe une couleur blanche pour
l'arrière-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 visités.
<!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 même 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 (reliée) est plus souple et permet de changer la présentation
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'élément BODY par l'élément
FRAMESET.Consulter la section 10 sur les cadres pour plus d'informations.
2.4.2 Les identifiants des éléments : les attributs id et class
L'attribut id a plusieurs rôles dans HTML :
•
•
•
•
•
comme sélecteur dans une feuille de style ;
comme ancre cible de liens hypertextes ;
comme moyen d'appeler un élément particulier à partir d'un script ;
comme nom d'un élément OBJECT déclaré ;
pour un traitement universel par les agents utilisateurs (par exemple, pour identifier les champs
lors de l'extraction des données des pages HTML pour peupler une base de données, pour
traduire des documents HTML dans d'autres formats, etc.).
L'attribut class, au contraire, assigne un ou plusieurs noms de classe à un élément ; on peut dire de
l'élément qu'il appartient à ces classes. Un nom de classe peut être partagé par plusieurs instances
d'éléments. L'attribut class a plusieurs rôles dans HTML :
•
•
comme sélecteur dans une feuille de style (quand l'auteur souhaite assigner une information de
style à un ensemble d'éléments) ;
pour un traitement universel par les agents utilisateurs .
Dans l'exemple suivant, on utilise l'élément 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
française.

<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 règles 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" français et le nom "msg1" anglais ne peuvent pas apparaître dans le même
document parce qu'ils partagent la même valeur d'attribut id. Les auteurs peuvent trouver d'autres emplois
pour l'attribut id pour affiner la présentation des messages individuels, en faire des ancres cibles, etc.
Les éléments HTML peuvent presque tous recevoir un identifiant et une information de classe.
Supposons, par exemple, que nous rédigions un document sur un langage de programmation. Ce
document doit inclure un certain nombre d'exemples préformatés. On utilise l'élément PRE pour formater
ces exemples. On assigne aussi une couleur d'arrière-plan (verte) à tous les éléments 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 spécifiant l'attribut id de cet exemple, on peut (1) créer 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 éléments de bloc et les éléments en-ligne
Certains éléments HTML, qui peuvent apparaître dans l'élément 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 modèle de contenu
De manière générale, les éléments de bloc peuvent contenir des éléments en-ligne et d'autres
éléments de bloc. Et de manière générale, les éléments en-ligne ne peuvent contenir que des
données et d'autres éléments en-ligne. L'idée inhérente à cette distinction structurelle, c'est que
les éléments de bloc créent des structures « plus grandes » que les éléments en-ligne.
Le formatage
Par défaut, les éléments de bloc sont formatés différemment des éléments en-ligne. En général,
les éléments de bloc commencent sur une nouvelle ligne, et non les éléments 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 éléments : les éléments DIV et SPAN
Les éléments DIV et SPAN, en conjonction avec les attributs id et class, offrent un mécanisme générique
qui rajoute de la structure aux documents. Ces éléments définissent le contenu comme étant en-ligne
(SPAN) ou de bloc (DIV) mais n'imposent aucune autre expression de présentation 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 goûts propres.
Supposons, par exemple, que nous voulions générer un document HTML à partir d'une base de données
des informations de clientèle. Comme HTML ne comprend pas d'éléments identifiant des objets tels que
« client », « numéro de téléphone », « adresse e-mail », etc., nous utilisons les éléments DIV et SPAN
pour obtenir les effets de structure et de présentation désirés. Nous pourrions utiliser l'élément 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>Prénom : <td>Stéphane</tr>
<tr><th>Tél. : <td>(212) 555-1212</tr>
<tr><th>E-mail: <td>[email protected]</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>Prénom : <td>Yves</tr>
<tr><th>Tél. : <td>(617) 555-1212</tr>
<tr><th>E-mail : <td>[email protected]</tr>
</table>
</div>
13
Par la suite, nous pourrons facilement rajouter des déclarations de feuilles de style pour affiner la
présentation de ces entrées de la base de données.
Les agents utilisateurs visuels placent en général un saut de ligne avant et après l'élément 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 éléments H1, H2, H3, H4, H5 et H6
Un élément de titre décrit brièvement 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 matières du
document.
Il existe six degrés de titrage dans HTML, l'élément H1 représentant le titre le plus important et H6 le
moins important. Les navigateurs visuels restituent généralement les titres les plus importants dans un
corps plus grand que les moins importants.
L'exemple suivant montre comment employer l'élément DIV pour associer un titre à la section du
document qui le suit. De cette manière, on peut définir un style pour la section (colorer l'arrière-plan,
fixer la police, etc.) au moyen d'une feuille de style.
<div class="section" id="elephants-foret" >
<h1>Les éléphants des forêts</h1>
<p>Dans cette partie, nous abordons le sujet moins connu
des éléphants des forêts.
...la section continue...
<div class="sous-section" id="habitat-foret" >
<h2>L'habitat</h2>
<p>Les éléphants des forêts ne vivent pas
dans les arbres mais au milieu d'eux.
...la sous-section continue...
</div>
</div>
On peut décorer 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'élément ADDRESS
Les auteurs peuvent employer l'élément ADDRESS pour fournir les informations de contact du document
ou d'une partie essentielle de celui-ci, comme un formulaire. Cet élément apparaît souvent au début 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 éléments EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE,
ABBR, et ACRONYM
2. Les citations : les éléments BLOCKQUOTE et Q
La restitution des citations
3. Les indices et les exposants : les éléments SUB et SUP
Les lignes et les paragraphes
1. Les paragraphes : l'élément P
2. Le contrôle des coupures de ligne
3.1 Les blancs
Le jeu de caractères du document comprend une grande variété de caractères blancs. La plupart d'entre
eux sont des éléments typographiques, qui sont utilisés dans certaines applications pour produire un effet
particulier d'espacement visuel. En HTML, seuls les caractères suivants sont définis comme caractères
blancs :
•
•
•
•
« espace » ASCII ( )
« tabulation » ASCII (	)
« saut de page » ASCII ()
« espace sans chasse » ()
3.2 Le texte structuré
3.2.1 Les phrases : les éléments EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR et
ACRONYM
Les éléments de phrase ajoutent une information structurelle à des portions du texte. L'interprétation
habituelle de ces éléments 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 référence vers une autre source.
DFN :
Indique qu'il s'agit de l'instance définissante du terme englobé.
CODE :
Désigne un fragment de code informatique.
SAMP:
Désigne 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 paramètre d'un programme.
ABBR:
Indique une forme abrégée (par exemple, « WWW », « HTTP », « i.e. », etc.).
ACRONYM:
Indique un acronyme (par exemple, « radar », « LAN », etc.).
Les éléments EM et STRONG s'utilisent pour mettre en exergue une portion du texte. Les autres
éléments de phrase ont une signification particulière pour un document dans un contexte technique. Ces
exemples illustrent quelques-uns de ces éléments de phrase :
15
Comme le disait <cite>le Général De GAULLE</cite>,
<q lang="fr">Je vous ai compris !</q>
Pour plus d'informations, voir <cite>[ISO-0000]</cite>.
Veuillez désormais indiquer, dans toute correspondance,
la référence suivante: <strong>1-234-55</ strong >
La présentation des éléments de phrase dépend de l'agent utilisateur. En général, les agents utilisateurs
visuels présentent le texte de l'élément EM en italique et celui de l'élément STRONG en gras. Les agents
utilisateurs vocaux, eux, devraient changer les paramètres de la synthèse vocale, tels que le volume, la
hauteur ou le timbre.
Les éléments ABBR et ACRONYM permettent aux auteurs d'indiquer clairement les occurrences des
abréviations et des acronymes. En effet, les langues occidentales ont une grande utilisation des
acronymes comme « UFO », « ONU » et « bit », ainsi que des abréviations comme « Mme. », « SA » ou
« etc. ». Le chinois et le japonais emploient tous deux des mécanismes d'abréviation analogues, selon
lequel un nom long est désigné par la suite par un sous-ensemble des caractères Han qui le constituent. Le
balisage de ces structures fournit une aide précieuse aux agents utilisateurs et aux outils tels que les
vérificateurs d'orthographe, les synthétiseurs de parole, les systèmes de traduction automatique et les
moteurs de recherche.
Le contenu des éléments ABBR et ACRONYM spécifient l'expression abrégée telle qu'elle apparaîtrait
normalement dans le cours du texte. L'attribut title de ces éléments peut être utilisé pour donner la forme
complète ou développée de l'expression.
Voici quelques exemples d'utilisation de l'élément 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 éléments BLOCKQUOTE et Q
Ces deux éléments désignent une citation [quotation]. L'élément BLOCKQUOTE indique une citation
longue (avec un contenu de type bloc) et l'élément Q est censé être utilisé pour des citations courtes (avec
un contenu de type en-ligne) ne nécessitant 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 après un puissant fumet,
une lueur de convoitise dans leurs yeux. L'immense traînée des Orques en marche
traçait son vilain sillon presque droit vers l'ouest ; l'herbe douce du Rohan avait
été écrasée et noircie sur leur passage.<p>
</ blockquote >
La restitution des citations
Les agents utilisateurs visuels restituent en général l'élément BLOCKQUOTE sous la forme d'un bloc de
texte en retrait.
Les agents utilisateurs visuels doivent s'assurer que le contenu d'un élément Q soit restitué avec des
marques de citation englobantes. Les auteurs ne devraient pas placer de marque de citation au début ni à
la fin du contenu d'un élément Q.
Les agents utilisateurs devraient ajouter les marques de citation en fonction de la langue (voir l'attribut
lang). Plusieurs langues adoptent des styles différents pour les marques de citation extérieures ou
intérieures (imbriquées), ce que devrait respecter les agents utilisateurs .
Les exemples ci-dessous illustrent des citations imbriquées avec l'élément 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 américain, les agents utilisateurs devraient les restituer
convenablement, par exemple en rajoutant des guillemets simples autour de la citation intérieure et des
guillemets doubles autour de la citation extérieure :
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 éléments SUB et SUP
Plusieurs écritures (par exemple, le français) requièrent une écriture en lettres supérieures ou en lettres
inférieures pour leur restitution correcte. On devrait baliser les textes en lettres inférieures avec l'élément
SUB et ceux en lettres supérieures 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 découpent habituellement leurs idées et leurs arguments en paragraphes successifs. Cette
organisation des informations en paragraphes n'est pas touchée par la manière dont les paragraphes sont
présentés : le contenu du paragraphe, qu'il soit entièrement justifié ou seulement justifié à gauche, est
toujours le même.
Le balisage HTML qui définit un paragraphe est clair : l'élément P contient un paragraphe.
La représentation visuelle des paragraphes n'est pas si simple. Un certain nombre d'aspects doivent être
pris en compte, à la fois esthétiques et techniques :
•
•
•
•
la gestion des blancs ;
les coupures de ligne et les retours à la ligne ;
la justification ;
les césures ;
3.3.1 Les paragraphes : l'élément P
L'élément P correspond à un paragraphe. Il ne peut pas contenir d'éléments de type bloc (même pas un
autre élément P).
On déconseille vivement aux auteurs d'utiliser des éléments P vides. Les agents utilisateurs devraient
ignorer de tels éléments P vides.
3.3.2 Le contrôle des coupures de ligne
On définit 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 caractères blancs.
Forcer la coupure de ligne : l'élément BR
L'élément BR coupe (interrompt) la ligne de texte courante.
17
4 Les listes
Sommaire
1.
2.
3.
Introduction aux listes
Les listes non-ordonnées (UL), les listes ordonnées (OL) et les items de liste (LI)
Les listes de définitions : les éléments 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 élément de liste ou plus. Celles-ci peuvent présenter :
•
•
•
des informations non-ordonnées ;
des informations ordonnées ;
des définitions.
Par exemple, cette liste qui précède est une liste non-ordonnée qui a été crée à l'aide de l'élément UL :
<ul>
<li>des informations non-ordonnées ;
<li>des informations ordonnées ;
<li>des définitions.
</ul>
La liste ordonnée, qui est créée à l'aide de l'élément OL, devrait contenir des informations dont
l'ordonnancement revêt une certaine importance, comme dans une recette de cuisine :
1.
2.
3.
4.
Mélanger tous les ingrédients secs ;
Y verser les ingrédients humides ;
Remuer pendant 10 minutes ;
Cuire pendant 1 heure dans un four à 300 degrés.
La liste de définitions, qui est créée à l'aide de l'élément DL, consiste généralement en une succession de
couples terme/définition (même si les listes peuvent avoir d'autres usages). Ainsi, on pourrait utiliser une
liste de définitions pour la publicité d'un produit :
Un coût moindre
La nouvelle version de ce produit coûte infiniment moins que la précédente !
Encore plus facile à utiliser
Nous avons apporté des modifications au produit qui facilitent à l'extrême son utilisation !
Sans danger pour les petits
Vous pouvez laisser vos enfants dans une pièce, seuls avec ce produit, et ils ne se blesseront pas
(sans garantie toutefois).
une liste qui serait définie 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 définitions contenant une liste non-ordonnée (les ingrédients) et une liste ordonnée (la marche
à suivre) :
18
Les ingrédients :
•
•
•
•
•
100 g de farine
10 g de sucre
1 tasse d'eau
2 œufs
sel, poivre
La marche à suivre :
1.
2.
3.
4.
Mélanger tous les ingrédients secs ;
Y verser les ingrédients humides ;
Remuer pendant 10 minutes ;
Cuire pendant 1 heure dans un four à 300 degrés.
Remarques :
On peut varier la recette en y rajoutant des raisins secs.
La présentation exacte des trois listes dépend de l'agent utilisateur. Nous décourageons 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-ordonnées (UL), les listes ordonnées (OL) et les items de liste (LI)
Les listes ordonnées et non-ordonnées sont restituées de manière identique, à l'exception de la
numérotation des items des listes ordonnées par les agents utilisateurs visuels. Les agents utilisateurs
peuvent présenter ces numéros de diverses façons. Les listes non-ordonnées ne sont pas numérotées.
Les deux types de liste sont constitués de séquences d'items de liste définis par l'élément 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> ... deuxième item de liste...
...
</ul>
Les listes peuvent aussi s'imbriquer :
<ul>
<li> ... niveau 1, numéro 1...
<ol>
<ol start="10">
</OL>
</ol>
</ul>
Détails sur l'ordre des numéros. Dans une liste ordonnée, il n'est pas possible de poursuivre
automatiquement la numérotation de la liste à partir d'une liste précédente ou encore de cacher les
numéros de certains items de liste particuliers. Cependant, les auteurs peuvent réinitialiser le numéro
d'un item de liste en spécifiant son attribut value. La numérotation des items suivants se poursuit alors à
partir de la nouvelle valeur. Par exemple :
<ol>
<li value="30"> cet item de liste a le numéro 30.
<li value="40"> cet item de liste a le numéro 40.
<li> cet item de liste a le numéro 41.
</ol>
19
4.3 Les listes de définitions : les éléments DL, DT et DD
Les listes de définitions varient seulement de manière 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'élément DT et se restreint à un contenu de type en-ligne. La description est donnée par un élément
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'élément DL serait, par exemple, pour le marquage d'un dialogue, chacun des
éléments DT nommant un personnage et chacun des éléments DD en contenant les paroles.
4.3.1 La restitution visuelle des listes
Remarque : Ce qui suit représente la description informative des comportements de mise en forme des
listes par certains agents utilisateurs visuels. Les feuilles de styles apportent un meilleur contrôle de la
mise en forme des listes (par exemple, pour la numérotation, les conventions en rapport avec la langue,
l'indentation, etc.).
Les agents utilisateurs visuels place généralement en retrait les listes imbriquées en fonction du niveau
d'imbrication courant.
Pour les deux éléments OL et UL, l'attribut type indique les options de restitution aux agents utilisateurs
visuels.
Pour l'élément UL, les valeurs possibles de l'attribut type sont "disc", "square" et "circle". La valeur par
défaut dépend de la profondeur d'imbrication de la liste courante. Ces valeurs sont insensibles à la casse.
La façon dont chacune des valeurs est représentée dépend de l'agent utilisateur. Ceux-ci devraient essayer
de représenter 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 représenter comme ceci :
pour la valeur "disc"
pour la valeur "circle"
pour la valeur "square"
Pour l'élément OL, les valeurs possibles de l'attribut type sont résumées dans le tableau ci-dessous (les
valeurs sont sensibles à la casse) :
20
Type
Style de numérotation
1
en chiffres arabes
1, 2, 3, ...
a
alphabétique en minuscules
a, b, c, ...
A
alphabétique en majuscules
A, B, C, ...
i
en chiffres romains minuscules
i, ii, iii, ...
I
en chiffres romains majuscules
I, II, III, ...
Remarquez que l'attribut type est déconseillé et que les styles des listes devraient être contrôlés par les
feuilles de style.
Par exemple, en utilisant CSS, on peut spécifier que le style des numéros des items de liste devrait être en
chiffres romains minuscules. Dans l'extrait suivant, chaque élément OL appartenant à la classe "romains"
présentera des chiffres romains devant ses items de liste.
ol.romains { list-style-type: lower-roman;}
</style>
<body>
<ol class="romains">
<li> Numéro 1...
<li> Numéro 2...
</ol>
</body>
La restitution d'une liste de définitions dépend é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 fûté
Nerd
Une personne techniquement brillante, mais socialement inepte
21
5 Les tables
Sommaire
1.
2.
3.
Introduction aux tables
Les éléments de construction des tables
1. L'élément TABLE
La directionnalité de la table
2. La légende de la table : l'élément CAPTION
3. Les regroupements de rangées : les éléments THEAD, TFOOT et TBODY
4. Les regroupements de colonnes : les éléments COLGROUP et COL
L'élément COLGROUP
L'élément COL
Le calcul du nombre de colonnes dans une table
Le calcul de la largeur des colonnes
5. Les rangées de la table : l'élément TR
6. Les cellules de la table : les éléments TH et TD
Les cellules qui occupent plusieurs rangées ou colonnes
La mise en forme de la table par les agents utilisateurs visuels
1. Les bordures et les règles
2. L'alignement horizontal et vertical
L'héritage des spécifications d'alignement
3. Les marges des cellules
5.1 Introduction aux tables
Le modèle de la table de HTML permet aux auteurs d'arranger des données (texte, images, liens,
formulaires, champs de formulaires, autres tables, etc.) en rangées et colonnes de cellules.
Chaque table peut avoir une légende propre (voir l'élément CAPTION) qui fournit une brève description
de l'objet de la table. On peut également fournir une description plus longue (via l'attribut summary), au
bénéfice des personnes qui utilisent des agents utilisateurs gérant la synthèse de parole et l'écriture
Braille.
On peut regrouper les rangées de la table dans des sections d'en-tête, de pied et de corps (via les éléments
THEAD, TFOOT et TBODY, respectivement). Les regroupements de rangées apportent des informations
de structure supplémentaires, qui peuvent être utilisées par les agents utilisateurs pour souligner cette
structure. Les agents utilisateurs peuvent exploiter le découpage en-tête/corps/pied de telle sorte que le
corps puisse défiler indépendamment des sections d'en-tête et de pied. Pour l'impression d'une longue
table, les informations d'en-tête et de pied peuvent être répétées sur chacune des pages qui contiennent les
données de la table.
Les auteurs peuvent également regrouper les colonnes pour apporter des informations structurelles
supplémentaires qui peuvent être exploitées par les agents utilisateurs. En outre, les auteurs peuvent
déclarer des propriétés de colonne au début de la définition de la table (via les éléments COLGROUP et
COL) de sorte que les agents utilisateurs puissent restituer progressivement la table au lieu de devoir
attendre que toutes les données de la table soient arrivées avant de pouvoir les restituer.
Les cellules de la table peuvent contenir soit des informations « de rubrique » (voir l'élément TH), soit
des informations « de données » (voir l'élément TD). Les cellules peuvent occuper plusieurs rangées et
colonnes. Le modèle 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 mécanisme apporte non seulement une grande assistance aux
personnes qui ont des déficiences visuelles, mais donne aussi aux navigateurs sans fil multimodes, avec
des capacités d'affichage limitées (par exemple, les téléavertisseurs et les téléphones utilisant le Web), la
possibilité de gérer les tables.
Les tables ne devraient pas représenter simplement un moyen de disposer le contenu d'un document car
cela peut entraîner des problèmes de restitution sur les médias non-visuels. En outre, quand on les utilise
avec des graphiques, ces tables peuvent forcer l'utilisateur à effectuer un défilement horizontal pour voir
une table qui aura été conçue sur un système avec une surface d'affichage plus grande. Afin de minimiser
ces problèmes, les auteurs devraient employer des feuilles de style pour le contrôle de la disposition
plutôt que des tables.
22
Voici une table simple qui montre certaines des caractéristiques du modèle de la table de HTML. Soit la
définition 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 éléments de construction des tables
5.2.1 L'élément TABLE
L'élément TABLE contient tous les autres éléments qui spécifient la légende, les rangées, le contenu et la
mise en forme.
La liste informative suivante décrit les opérations que l'agent utilisateur peut être amené à réaliser 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 légende, le cas échéant ;
Restituer l'en-tête de la table, le cas échéant. Restituer le pied de la table, le cas échéant. Les
agents utilisateurs doivent savoir où restituer l'en-tête et le pied. Par exemple, s'il s'agit d'un
média paginé en sortie, les agents utilisateurs peuvent placer l'en-tête en haut de chaque page, et
le pied en bas de chacune d'elles. De la même manière, si l'agent utilisateur fournit un
mécanisme pour faire défiler les rangées, l'en-tête peut apparaître en haut de la zone qui a défilé
et le pied en bas de celle-ci ;
Calculer le nombre de colonnes dans la table. Remarquez que le nombre de rangées dans une
table est égal au nombre d'éléments TR contenus par l'élément TABLE ;
Regrouper les colonnes en fonction des éventuelles spécifications de groupe de colonnes ;
Restituer les cellules, rangée par rangée et regroupées dans les colonnes appropriées, entre l'entête et le pied. Les agents utilisateurs devraient formater la table en fonction des attributs HTML
et des spécifications de la feuille de style.
Le modèle de table HTML a été conçu 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 rangées arrivent)
plutôt que de devoir attendre la totalité des données 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 précisément, l'agent utilisateur peut restituer une table en une seule passe quand les largeurs de
colonne sont spécifiées à l'aide d'une combinaison d'éléments COLGROUP et COL. Si éventuellement
l'une des colonnes est spécifiée en termes relatif ou de pourcentage, l'auteur doit aussi spécifier la largeur
de la table en question.
La directionnalité de la table
La directionnalité d'une table est soit celle qui est héritée (par défaut, elle est de gauche à droite), soit
celle qui est spécifiée par l'attribut dir de l'élément TABLE.
Pour une table de gauche-à-droite, la colonne zéro se trouve sur le côté gauche et la rangée zéro se trouve
en haut. Pour une table de droite-à-gauche, la colonne zéro se trouve sur le côté droit et la rangée zéro en
haut.
Quand l'agent utilisateur alloue des cellules supplémentaires à une rangée, ces cellules supplémentaires 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'élément TABLE est le seul sur qui l'attribut dir inverse l'ordre visuel des colonnes ; une
rangée de table (TR) ou un groupe de colonnes (COLGROUP) seuls ne peuvent pas être inversés
indépendamment.
Quand il est spécifié pour l'élément TABLE, l'attribut dir affecte aussi la direction du texte à l'intérieur
des cellules de la table (puisque l'attribut dir est hérité par les éléments de type bloc).
Pour spécifier 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 légende de la table : l'élément CAPTION
Quand l'élément CAPTION est présent, son texte devrait décrire la nature de la table. L'élément
CAPTION n'est autorisé qu'immédiatement après la balise ouvrante de l'élément TABLE. L'élément
TABLE ne peut contenir qu'un seul élément CAPTION.
Les agents utilisateurs visuels permettent aux personnes voyantes d'embrasser rapidement la structure de
la table à partir des en-têtes et de la légende. Par conséquent, les légendes seront souvent inadaptées pour
le résumé de l'objet et de la structure de la table du point de vue des personnes qui dépendent d'agents
utilisateurs non-visuels.
Les auteurs devraient prendre soin de fournir des informations supplémentaires, qui résument l'objet et la
structure de la table, en utilisant l'attribut summary de l'élément TABLE. Ceci est particulièrement
important pour les tables dépourvues de légende. 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
légende, à moins de fournir un moyen pour accéder à toutes les parties de la table, par exemple par
défilement horizontal ou vertical. Nous recommandons que le texte de la légende soit coupé à la même
largeur que celle de la table.
5.2.3 Les regroupements de rangées : les éléments THEAD, TFOOT et TBODY
Les rangées de la table peuvent être regroupées dans une section en-tête de la table, une section pied de la
table, et une ou plusieurs sections corps de table, en utilisant respectivement les éléments THEAD,
TFOOT et TBODY. Cette organisation permet aux agents utilisateurs de gérer le défilement des corps de
la table, indépendamment de l'en-tête et du pied de la table. Pour l'impression d'une longue table, les
informations placées dans l'en-tête et le pied de la table peuvent se répéter sur chacune des pages
contenant les données de la table.
L'en-tête et le pied de la table devraient contenir des informations sur les colonnes de la table. Le corps de
la table devrait contenir les rangées des données de la table.
Quand ils sont présents, chaque élément THEAD, TFOOT et TBODY contient un groupe de rangées.
Chaque groupe de rangées doit contenir au moins une rangée, qui est définie par l'élément TR.
Cet exemple illustre l'ordre et la structure des en-têtes, pieds et corps des tables.
<table>
24
<thead>
<tr> ...informations d'en-tête...
</thead>
<tfoot>
<tr> ...informations de pied...
</tfoot>
<tbody>
<tr> ...première rangée des données du bloc 1...
<tr> ...seconde rangée des données du bloc 1...
</tbody>
<tbody>
<tr> ...deuxième rangée des données du bloc 2...
<tr> ...troisième rangée des données du bloc 2...
</tbody>
</table>
L'élément TFOOT doit survenir avant un élément TBODY dans une définition d'élément TABLE, de
sorte que les agents utilisateurs puissent restituer le pied avant de recevoir toutes les rangées de données
(éventuellement nombreuses). Le résumé suivant indique les balises qui sont obligatoires et celles qui
peuvent être omises :
•
•
la balise ouvrante de l'élément TBODY est toujours requise, sauf quand la table n'est formée que
d'un seul corps et n'a aucune section d'en-tête ni de pied. La balise fermante de TBODY peut
toujours être omise en toute sécurité
les balises ouvrantes des éléments THEAD et TFOOT sont requises quand les sections d'en-tête
et de pied sont respectivement présentes, mais les balises fermantes qui leur correspondent
peuvent toujours être omises en toute sécurité.
Les moteurs d'analyse des agents utilisateurs doivent obéir à ces règles pour des raisons de rétrocompatibilité.
La table de l'exemple précédent pourrait être élaguées en supprimant certaines balises fermantes,
comme :
<table>
<thead>
<tr> ...informations d'en-tête...
<tfoot>
<tr> ...informations de pied...
<tbody>
<tr> ...seconde rangée des données du bloc 2...
<tbody>
<tr> ...deuxième rangée des données du bloc 2...
<tr> ...troisième rangée des données du bloc 2...
</table>
Les sections THEAD, TFOOT et TBODY doivent contenir le même nombre de colonnes.
5.2.4 Les regroupements de colonnes : les éléments COLGROUP et COL
Les groupes de colonnes permettent aux auteurs de créer des divisions structurelles à l'intérieur 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'élément TABLE). Une table peut contenir soit un seul
groupe de colonnes implicite (aucun élément COLGROUP ne délimite les colonnes), soit un certain
nombre de groupes de colonnes explicites (chacun étant délimité par une instance de l'élément
COLGROUP).
L'élément COL permet aux auteurs de partager des attributs entre plusieurs colonnes, sans faire appel à
un regroupement structurel. L'« étendue » de l'élément COL est représentée par le nombre de colonnes
qui vont partager les attributs de l'élément.
25
L'élément COLGROUP
L'élément COLGROUP crée un groupe de colonne explicite. On peut spécifier le nombre de colonnes
dans le groupe de colonnes de deux façons, qui s'excluent mutuellement :
1.
2.
l'attribut span de l'élément (valeur par défaut "1") spécifie le nombre de colonnes dans le
groupe ;
chaque élément COL dans l'élément COLGROUP représente 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>
plutôt que :
<colgroup>
<col width="20">
<col width="20">
...jusqu'à totaliser 40 éléments COL...
</colgroup>
Quand il est nécessaire d'isoler une colonne (par exemple, pour une information de style, pour spécifier
une information de largeur, etc.) au sein d'un groupe, les auteurs doivent identifier cette colonne avec un
élément COL. Ainsi, pour appliquer une information de style particulière à la dernière colonne de la table
précédente, on l'isole de cette manière :
<colgroup width="20">
<col span="39">
<col id="mise-en-forme-particuliere">
</colgroup>
L'attribut width de l'élément COLGROUP est hérité par la totalité des 40 colonnes. Le premier élément
COL se rapporte aux 39 premières colonnes (sans rien de particulier pour elles) et le second assigne une
valeur à l'attribut id pour la quarantième 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 défaut 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'élément COL
L'élément COL permet aux auteurs de rassembler les spécifications d'attributs pour les colonnes de la
table. L'élément COL ne rassemble pas les colonnes de manière structurelle (c'est le rôle de l'élément
COLGROUP). Les éléments COL sont vides et ne servent que de support pour les attributs. Ils peuvent
apparaître à l'intérieur comme à l'extérieur d'un groupe de colonnes explicite (i.e., l'élément
COLGROUP).
L'attribut width de l'élément COL se rapporte à la largeur de chacune des colonnes dans la couverture de
l'élément.
5.2.5 Les rangées de la table : l'élément TR
L'élément TR se comporte comme un conteneur pour une rangée de cellules de la table. La balise
fermante peut être omise.
Cet exemple de table montre trois rangées, chacune commençant par un élément 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 rangée en-tête...
<tr> ...Première rangée de données...
<tr> ...Deuxième rangée de données...
...le reste de la table table...
</table>
5.2.6 Les cellules de la table : les éléments TH et TD
Les cellules de table peuvent contenir deux types d'informations : des informations de rubrique et des
informations de données. Cette distinction permet aux agents utilisateurs de restituer les cellules de
rubrique et de données différemment, même en l'absence de feuilles de style. Par exemple, les agents
utilisateurs visuels peuvent présenter le texte des cellules de rubrique en caractères gras. Les synthétiseurs
de parole peuvent restituer les informations de rubrique avec une inflexion de voix particulière.
L'élément TH définit une cellule qui contient une indication de rubrique. Les agents utilisateurs disposent
de deux types d'informations de rubrique : le contenu de l'élément 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
médias visuels, cette dernière possibilité peut être adéquate quand il n'y a pas suffisamment de place pour
restituer le contenu entier de la cellule. Pour les médias non-visuels, l'attribut abbr peut s'employer
comme abréviation des rubriques de la table, quand celles-ci sont restituées en accompagnement du
contenu des cellules concernées.
Les attributs headers et scope permettent également aux auteurs d'assister les agents utilisateurs nonvisuels dans leur traitement des informations de rubrique. L'élément TD définit une cellule qui contient
des données.
Les cellules peuvent être vides (i.e., elles ne contiennent pas de données.
Par exemple, la table suivante contient quatre colonnes de données, chacune étant chapeautée 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 téléimprimeur pourrait afficher celle-ci comme suit :
Nom
Tasse
Type de café Sucre ?
T. Sexton 10
Espresso
Non
J. Dinnen 5
Déca.
Oui
Les cellules qui occupent plusieurs rangées ou colonnes
Les cellules peuvent occuper plusieurs rangées ou colonnes. Le nombre des rangées ou des colonnes
occupées par une cellule est fixé par les attributs rowspan et colspan des éléments TH et TD.
27
Dans la définition de cette table, nous spécifions que la cellule en rangée 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 restituée sur un téléimprimeur par un agent utilisateur visuel comme suit :
Les tasses de café consommées par
chaque sénateur
--------------------------------------| Nom |Tasses|Type de café|Sucre ?|
--------------------------------------|T. Sexton| 10 |Espresso |Non |
--------------------------------------|J. Dinnen|5 |Déca.
|Oui |
--------------------------------------|A. Soria |Non disponible
|
--------------------------------------L'exemple suivant illustre (à l'aide de bordures de table) la manière dont les définitions des cellules qui
occupent plus d'une rangée, ou colonne, affectent la définition des cellules suivantes. Considérons la
définition 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 première et la deuxième rangée, la définition de cette deuxième rangée va
la prendre en compte. Ainsi, le deuxième élément TD dans la deuxième rangée définit en réalité la
troisième cellule de la rangée.
Un agent utilisateur graphique restituerait cette table par :
Remarquez que, si l'élément TD définissant la cellule "6" avait été omis, une cellule supplémentaire vide
aurait été ajoutée par l'agent utilisateur pour compléter la rangée.
De la même manière, dans la définition 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 deuxième élément TD dans la rangée définit en réalité
la troisième cellule ("6") :
Un agent utilisateur graphique restituerait cette table par :
La définition de cellules qui se chevauchent constitue une erreur. Les agents utilisateurs peuvent diverger
sur la façon de gérer cette erreur (par exemple, la restitution peut varier).
EXEMPLE ILLÉGAL
28
L'exemple suivant montre comment on pourrait créer des cellules qui se chevauchent. Dans cette table, la
cellule "5" couvre deux rangées 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 règles
Les attributs suivants affectent le cadre externe et les règles internes de la table.
Définition des attributs
frame = void|above|below|hsides|lhs|rhs|vsides|box|border
Cet attribut spécifie quels côtés du cadre entourant la table seront visibles. Les valeurs possibles
sont :
•
•
•
•
•
•
•
•
•
void : aucun côté. C'est la valeur par défaut ;
above : le côté en haut seulement ;
below : le côté en bas seulement ;
hsides : les côtés en haut et en bas seulement ;
vsides : les côtés droite et gauche seulement ;
lhs : le côté gauche seulement ;
rhs : le côté droit seulement ;
box : les quatre côtés ;
border : les quatre côtés
rules = none|groups|rows|cols|all
Cet attribut spécifie quelles règles vont apparaître entre les cellules à l'intérieur de la table. La
restitution des règles dépend de l'agent utilisateur. Les valeurs possibles sont :
•
•
•
•
•
none : aucune règle. C'est la valeur par défaut ;
groups : les règles apparaîtront seulement entre les groupes de rangées (voir THEAD,
TFOOT et TBODY) et les groupes de colonnes (voir COLGROUP et COL) ;
rows : les règles apparaîtront seulement entre les rangées ;
cols : les règles apparaîtront seulement entre les colonnes ;
all : les règles apparaîtront entre toutes les rangées et colonnes.
border = pixels [CN]
Cet attribut spécifie 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 spécifier l'attribut border de l'élément TABLE.
Considérons cet exemple précédent :
<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 règles dessinées 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 rangées de valeurs monétaires sur un point décimal. On définit
explicitement le caractère 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 spécifie que les cellules devraient être séparées de vingt
pixels, les unes par rapport aux autres et par rapport au cadre de la table. L'attribut cellpadding spécifie
que la marge supérieure et la marge inférieure de la cellule seront chacune séparées du contenu de la
cellule de 10% de l'espacement vertical disponible (totalisant 20%). De même, la marge de gauche et la
marge de droite de la cellule seront chacune séparées du contenu de la cellule de 10% de l'espacement
horizontal disponible (totalisant 20%).
<table cellspacing="20" cellpadding="20%">
<tr> <td>Données1 <td>Données2 <td>Données3
</table>
30
Si une table, ou une colonne donnée, 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 obligés de le faire.
6 Les liens
Sommaire
1.
2.
3.
4.
Introduction aux liens et aux ancres
1. La visite d'une ressource reliée
2. Les autres relations des liens
3. La spécification des ancres et des liens
4. Les titres des liens
5. Les liens et l'internationalisation
L'élément A
1. La syntaxe des noms d'ancre
2. Les liens imbriqués sont illégaux
3. Les ancres avec un attribut id
4. Les ressources non disponibles et non identifiables
Les relations du document : l'élément 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'élément BASE
1. La résolution 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 fonctionnalités pour les
documents hypertextes et interactifs. Cette section présente le lien (ou encore hyperlien ou lien Web) qui
est la structure hypertexte de base. Le lien représente 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 réussite du Web.
Un lien possède deux extrêmités, appelées ancres, et une direction. Le lien part de l'ancre « source » et
pointe vers l'ancre « destination », qui peut représenter n'importe quelle ressource Web (par exemple, une
image, une séquence vidéo, un extrait sonore, un programme, un document HTML, un élément au sein
d'un document HTML, etc.).
6.1.1 La visite d'une ressource reliée
Le comportement par défaut associé au lien est de ramener une autre ressource Web. Ce comportement
est communément et implicitement obtenu par la sélection du lien (par exemple, un clic de souris, une
entrée 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 nommée "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 entrée au clavier, une commande vocale, etc.), l'utilisateur
peut visiter ces ressources. Remarquez que l'attribut href dans chaque ancre source spécifie l'adresse de
l'ancre destination avec un URI.
L'ancre destination du lien peut être un élément à l'intérieur d'un document HTML. L'ancre destination
doit avoir reçu un nom d'ancre et tout URI qui désigne cet ancre doit inclure le nom comme étant son
identifiant de fragment.
31
Les ancres destinations dans les documents HTML peuvent être spécifiées soit par l'élément A (en le
nommant grâce à l'attribut name), soit par tout autre élément (en le nommant avec l'attribut id).
Ainsi, par exemple, un auteur pourrait créer une table des matières dont les entrées sont reliées aux
éléments de titre H2, H3, etc., dans le même document. En utilisant l'élément A pour créer 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 matières...
...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 même effet en transformant les éléments de titre eux-mêmes 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 matières...
...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 précédents. Cependant, les auteurs peuvent insérer, 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 spécifiés
dans leur ancre source.
Les rôles d'un lien défini par l'élément A, ou LINK, sont spécifiés au travers des attributs rel et rev.
Par exemple, les liens définis par l'élément LINK peuvent décrire la position d'un document par rapport à
une série de documents. Dans l'extrait suivant, les liens dans le document intitulé « Chapitre 5 » pointent
vers le chapitre qui précède et celui qui suit :
<head>
...autres informations d'en-tête...
<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 spécifiés par l'élément LINK ne sont pas restitués avec le contenu du document,
même si les agents utilisateurs peuvent les restituer autrement (par exemple, comme outils de navigation).
Même s'ils ne sont pas utilisés pour la navigation, ces liens peuvent être interprétés de manière
intéressante. Par exemple, un agent utilisateur, qui imprime une série de documents HTML comme si
c'était un seul document, peut utiliser ces informations de lien comme base pour la formation d'un
document linéaire cohérent. On donne plus d'informatons ci-dessous sur l'utilisation des liens au bénéfice
des moteurs de recherche.
32
6.1.3 La spécifications des ancres et des liens
Bien que plusieurs éléments et attributs HTML créent des liens vers d'autres ressources (par exemple,
l'élément IMG, l'élément FORM, etc.), ce chapitre traite des liens et des ancres créées par les éléments
LINK et A. L'élément LINK ne peut apparaître que dans l'en-tête du document. L'élément A ne peut
apparaître que dans le corps.
Quand l'attribut href de l'élément A est spécifié, l'élément définit l'ancre source d'un lien que l'utilisateur
peut activer pour ramener une ressource Web. L'ancre source représente l'emplacement de l'instance de A
et l'ancre destination la ressource Web.
La ressource ramenée peut être prise en main par l'agent utilisateur de plusieurs façons : en ouvrant un
nouveau document HTML dans la même fenêtre d'agent utilisateur, en ouvrant un nouveau document
HTML dans une fenêtre différente, en lançant un nouveau programme qui va prendre en charge la
ressource, etc. Puisque l'élément A possède un contenu (texte, images, etc.), les agents utilisateurs
peuvent restituer ce contenu de manière à indiquer la présence d'un lien (par exemple, en soulignant ce
contenu).
Quand les attributs name ou id de l'élément A sont spécifiés, l'élément définit alors une ancre qui peut
être la destination d'autres liens.
Les auteurs peuvent spécifier simultanément les attributs name et href dans la même instance de A.
L'élément LINK définit une relation entre le document courant et une autre ressource. Bien que l'élément
LINK n'ait aucun contenu, la relation qu'il définit peut être restituée par certains agents utilisateurs.
6.1.4 Les titres des liens
L'attribut title peut être spécifié sur les deux éléments A et LINK pour ajouter des informations sur la
nature d'un lien. Ces informations peuvent être parlées par l'agent utilisateur, être restituées sous forme
d'infobulles, entraîner un changement dans la représentation de l'image du curseur, etc.
Nous pouvons donc enrichir l'exemple précédent 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 codés avec différents encodages de
caractères, les éléments A et LINK reconnaissent l'attribut charset. Cet attribut permet aux auteurs de
conseiller les agents utilisateurs sur le codage des données à l'autre extrêmité 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 élément ou de la valeur d'un attribut.
Munis de cette connaissance supplémentaire, les agents utilisateurs devraient pouvoir éviter la
présentation d'informations incohérentes à l'utilisateur. Au lieu de cela, ils peuvent localiser les
ressources nécessaires pour la présentation 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'élément A
Chaque élément A définit une ancre :
1.
2.
le contenu de l'élément A définit la position de l'ancre ;
l'attribut name nomme l'ancre, de sorte que celle-ci puisse être la destination de zéro 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 créer un élément A qui ne spécifie aucune ancre, i.e., qui ne spécifie
aucun attribut href, name ou id. Les valeurs de ces attributs peuvent être fixées par la suite au moyen de
scripts.
Dans l'exemple suivant, l'élément A définit un lien. L'ancre source est représentée 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 désigne 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 généralement les liens de sorte à les mettre en évidence pour les
utilisateurs (soulignage, vidéo inverse, etc.). La restitution exacte dépend de l'agent utilisateur. La
restitution peut varier si l'utilisateur a déjà visité le lien ou non.
Pour indiquer explicitement aux agents utilisateurs l'encodage de caractères de la page de destination,
spécifiez 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 définissions une ancre nommée "ancre-1" dans le fichier "un.html".
...texte avant l'ancre...
<a name="ancre-1">Voici l'emplacement de l'ancre un.</a>
...texte après l'ancre...
Ceci crée une ancre autour du texte « Voici l'emplacement de l'ancre un. ». Habituellement, le contenu de
l'élément A n'est pas restitué de façon particulière quand l'élément A définit seulement une ancre.
Ayant défini l'ancre, nous pouvons nous y référer à partir du même document ou d'un autre. Les URI qui
désignent des ancres contiennent un caractère « # » 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 défini dans le même document : #ancre-1
Ainsi, un lien défini dans le fichier "deux.html" dans le même répertoire que le fichier "un.html" se
référerait à 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 après le lien...
Dans l'exemple suivant, l'élément A spécifie un lien (avec l'attribut href) et crée une ancre nommée (avec
l'attribut name) simultanément :
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
entraînerait le chargement de la ressource image à partir du Web (et éventuellement son affichage si le
système 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 obéir aux règles suivantes :
•
•
Unicité : Les noms d'ancre doivent être uniques dans le document. Les noms d'ancre qui ne
diffèrent que par la casse ne devraient pas apparaître dans le même document ;
Correspondance des chaînes : Les comparaisons entre les identifiants de fragment et les noms
d'ancre doivent être réalisées selon une correspondance exacte (sensibilité à la casse).
Ainsi, l'exemple suivant est juste pour ce qui est de la correspondance des chaînes et doit donc être
considéré comme une correspondance par les agents utilisateurs :
34
<p><a href="#xxx">...</a>
...suite du document...
<p><a name="xxx">...</a>
EXEMPLE ILLÉGAL :
L'exemple suivant est illégal 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 légal, le comportement de l'agent utilisateur n'est pas défini
; certains agents utilisateurs peuvent considérer (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 caractères ASCII..
6.2.2 Les liens imbriqués sont illégaux
Les liens et les ancres définis par l'élément A ne doivent pas être imbriqués ; un élément A ne doit pas
contenir d'autres éléments A. Les éléments LINK ne doivent pas être imbriqués non plus.
6.2.3 Les ancres avec un attribut id
On peut utiliser l'attribut id pour créer une ancre dans la balise ouvrante de n'importe quel élément (y
compris l'élément A).
Cet exemple illustre une utilisation de l'attribut id pour positionner une ancre dans un élément H2.
L'ancre est reliée via l'élément 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 même espace de noms. Cela signifie qu'ils ne peuvent pas tous deux
définir une ancre avec le même nom dans le même document. On admet l'utilisation des deux attributs
pour spécifier l'identifiant unique d'un élément pour les éléments suivants : A, APPLET, FORM,
FRAME, IFRAME, IMG et MAP. Quand les deux attributs sont utilisés sur un seul élément, leurs valeurs
doivent être identiques.
EXEMPLE ILLÉGAL :
L'extrait suivant est un code HTML illégal, puisque ces attributs déclare le nom deux fois dans le même
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 mêmes quand tous les deux
apparaissent dans la balise ouvrante d'un élément :
<p><a name="a1" id="a1" href="#a1">...</a>
De par sa spécification dans le DTD de HTML, l'attribut name peut contenir des références de caractères.
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 références de caractères.
Utiliser id ou name ? Les auteurs devraient considérer les points suivants au moment de décider 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, sélecteur de feuille de style,
identifiant de traitement, etc.) ;
certains agents utilisateurs anciens ne gèrent pas les ancres créées par l'attribut id ;
l'attribut name autorise des noms d'ancre plus variés (avec les entités).
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 manière de gérer une telle erreur, nous recommandons les
comportements suivants :
•
•
si l'agent utilisateur ne peut pas localiser une ressource reliée, il devrait le signaler à l'utilisateur ;
si l'agent utilisateur ne peut pas identifier le type de la ressource reliée, il devrait quand même
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'élément LINK
Cet élément définit un lien. À la différence de l'élément A, il ne peut apparaître que dans la section
HEAD du document, même s'il peut apparaître un nombre de fois quelconque. Bien que l'élément LINK
n'ait pas de contenu, il véhicule des informations de relations qui peuvent être restituées par les agents
utilisateurs de diverses façons (par exemple, une barre d'outils avec un menu déroulant présentant les
liens).
Cet exemple illustre la manière dont les éléments LINK peuvent apparaître dans la section HEAD d'un
document. Le document courant a pour nom "chapitre2.html". L'attribut rel spécifie la relation du
document relié avec le document courant. Les valeurs "Index", "Next" et "Prev" sont expliquées 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 rôles complémentaires : l'attribut rel spécifie un lien progressif [ndt.
forward link] et l'attribut rev un lien inverse [ndt. reverse link].
Considérons les deux documents A et B suivants.
Document A :
<link href="docB" rel="foo">
celui-ci a exactement la même signification que :
Document B :
<link href="docA" rev="foo">
On peut spécifier les deux attributs simultanément.
6.3.2 Les liens et les feuilles de style externes
Quand l'élément LINK relie une feuille de style externe à un document, l'attribut type spécifie le langage
de feuille de style et l'attribut media spécifie le ou les médias de restitution prévus. 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 média sont abordés ultérieurement dans la section sur les feuilles de style.
36
6.3.3 Les liens et les moteurs de recherche
Les auteurs peuvent utiliser l'élément 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, conçues pour des médias différents, par
exemple une version convenant particulièrement pour l'impression ;
des liens vers la page de garde d'une collection de documents.
Les exemples ci-dessous illustrent les façons de combiner les indications de langue, les types de média et
les types de lien pour améliorer 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'élément LINK, qui désigne le manuel français, est en français.
<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 imprimée 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'élément BASE
Dans HTML, les liens et les références d'images, d'applets, de programmes de traitement de formulaire,
de feuilles de style, etc. sont toujours spécifiés par un URI. Les URI relatifs sont résolus par rapport à un
URI de base, qui peut avoir diverses provenances. L'élément BASE permet aux auteurs de spécifier
explicitement l'URI de base d'un document.
Quand il est présent, l'élément BASE doit apparaître dans la section HEAD du document HTML, avant
tout élément qui se réfère à une source externe. L'information de chemin spécifiée par l'élément BASE
n'affecte que les URI du document dans lequel cet élément apparaît.
Par exemple, soit les déclarations suivantes des éléments 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 résoudrait en :
http://www.poulets.com/cages/poules.gif
6.4.1 La résolution des URI relatifs
Les agents utilisateurs doivent calculer l'URI de base, pour la résolution des URI relatifs. Les agents
utilisateurs doivent calculer l'URI de base en fonction de la préséance suivante (de la priorité la plus
élevée à la plus basse) :
1.
2.
3.
l'URI de base est fixé par l'élément BASE ;
l'URI de base est déterminé par les métadonnées découvertes lors d'une interaction protocolaire,
telle qu'un en-tête HTTP;
par défaut, 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 apparaître dans un email et ne pas être désigné par un URI). De tels documents sont considérés comme erronés s'ils
contiennent des URI relatifs et dépendent d'un URI de base par défaut.
De surcroît, les éléments OBJECT et APPLET définissent des attributs qui ont priorité sur la valeur fixée
par l'élément 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'élément IMG
L'inclusion générique : l'élément OBJECT
1. Les règles de restitution des objets
2. L'initialisation de l'objet : l'élément PARAM
3. Les systèmes de nommage globaux des objets
L'inclusion d'un applet : l'élément APPLET
Les images cliquables
1. Les images cliquables côté client : les éléments MAP et AREA
2. Les images cliquables côté serveur
La présentation visuelle des images, objets et applets
1. La largeur et la hauteur
La manière de spécifier un texte de remplacement
7.1 Introduction aux objets, images et applets
Les fonctionnalités multimédias de HTML permettent aux auteurs d'inclure dans leurs pages des images,
des applets (des programmes qui sont automatiquement chargés puis lancés sur la machine de
l'utilisateur), des séquences vidéo 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 antérieures de HTML permettaient aux auteurs d'inclure des images (via l'élément IMG) et
des applets (via l'élément APPLET). Ces éléments ont plusieurs limitations :
•
•
•
ils ne répondent pas au problème plus général de la manière d'inclure les nouveaux comme les
futurs types de média ;
l'élément APPLET ne fonctionne qu'avec des applets basés sur le langage Java. Cet élément est
déconseillé en faveur de l'élément OBJECT ;
ils entraînent des problèmes d'accessibilité.
Pour répondre à ces questions, HTML 4 introduit l'élément OBJECT, qui offre une solution générale aux
inclusions d'objets génériques. L'élément OBJECT permet aux auteurs HTML de spécifier tout ce que
l'objet requiert pour sa présentation par un agent utilisateur : le code source, les valeurs initiales et les
données d'exécution. Dans cette spécification, on emploie le terme « objet » pour désigner 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 média [ndt. media handlers], etc.
Le nouvel élément OBJECT prend donc en charge quelques unes des tâches effectuées par les éléments
existants. Considérons le comparatif des fonctionnalités suivant :
Type d'inclusion
Élément spécifique
Élément générique
Image
IMG
OBJECT
Applet
APPLET (déconseillé) OBJECT
Un autre document HTML IFRAME
OBJECT
Le comparatif indique que chaque type d'inclusion possède une solution spécifique et une solution
générique. L'élément générique OBJECT servira de solution pour l'implémentation des types de média
futurs.
Pour inclure des images, les auteurs peuvent utiliser l'élément OBJECT ou bien l'élément IMG.
39
Pour inclure des applets, les auteurs devraient utiliser l'élément OBJECT puisque l'élément APPLET est
déconseillé.
Pour inclure un document HTML dans un autre, les auteurs peuvent utiliser soit le nouvel élément
IFRAME, soit l'élément OBJECT. Dans les deux cas, le document incorporé reste indépendant du
document principal. Les agents utilisateurs visuels peuvent présenter le document incorporé dans une
fenêtre distincte à l'intérieur du document principal. Veuillez consulter les remarques sur les documents
incorporés pour une comparaison entre les éléments OBJECT et IFRAME pour l'inclusion d'un
document.
Les images et les autres objets inclus peuvent avoir des hyperliens qui leur sont associés, à la fois au
travers des mécanismes de liaison standards mais aussi via des images cliquables [ndt. image maps]. Une
image cliquable spécifie les régions géométriques actives d'un objet inclus et assigne un lien à chacune
d'elles. Quand ils sont activés, ces liens peuvent entraîner la recherche d'un document, lancer un
programme sur le serveur, etc.
Dans les sections suivantes, nous abordons les divers mécanismes dont disposent les auteurs pour les
inclusions multimédias et pour la création d'images cliquables pour ces inclusions.
7.2 L'inclusion d'une image : l'élément IMG
L'élément IMG incorpore une image dans le document courant, à l'emplacement de la définition de
l'élément. L'élément IMG n'a pas de contenu ; il est généralement remplacé dans la ligne par l'image que
désigne l'attribut src, les images alignées à gauche ou à droite qui « flottent » hors de la ligne faisant
exception.
Dans un exemple précédent, nous définissions un lien vers une photo familiale. Ici, nous insérons 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'élément 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 spécifie le texte de remplacement qui sera restitué si l'image ne peut s'afficher (voir cidessous pour des précisions sur la manière de spécifier un texte de remplacement). Les agents utilisateurs
doivent restituer le texte de remplacement quand ceux-ci ne gèrent pas les images, ne reconnaissent pas
un certain type d'image ou ne sont pas configurés 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 brève de l'image. Celle-ci devrait être suffisante pour permettre à
l'utilisateur de décider s'il va suivre le lien donné par l'attribut longdesc vers la description plus détaillée,
ici "plandusite.html".
Veuillez consulter la section sur la présentation visuelle des objets, images et applets pour des précisions
sur la taille, l'alignement et les bordures de l'image.
40
7.3 L'inclusion générique : l'élément OBJECT
La plupart des agents utilisateurs possèdent des mécanismes intégrés pour la restitution des types de
données communs, tels que le texte, les images GIF, les couleurs, les polices et une poignée d'éléments
graphiques. Pour restituer les types de données qu'ils ne reconnaissent pas nativement, les agents
utilisateurs lancent en général des applications externes. L'élément OBJECT permet aux auteurs de mieux
contrôler si les données devraient être restituées de manière externe ou par un certain programme,
spécifié par l'auteur, qui restitue ces données au sein de l'agent utilisateur.
Dans le cas le plus général, l'auteur peut avoir besoin de spécifier trois types d'informations :
•
•
•
L'implémentation de l'objet inclus. Par exemple, si l'objet inclus est un applet d'horloge, l'auteur
doit indiquer la localisation du code exécutable de l'applet ;
Les données à restituer. Par exemple, si l'objet inclus est un programme pour restituer des
données de polices, l'auteur doit indiquer la localisation de ces données ;
Les valeurs supplémentaires requises par l'objet à l'exécution. Par exemple, certains applets
peuvent demander des valeurs initiales en paramètres.
L'élément OBJECT permet aux auteurs de spécifier tous ces trois types de données, mais il n'est pas
nécessaire de toutes les spécifier en une seule fois. Par exemple, certains objets peuvent ne pas requérir
de données (par exemple, un applet autonome qui effectue une petite animation). D'autres peuvent exiger
une initialisation à l'exécution. D'autres encore ne pas avoir besoin d'informations supplémentaires sur
l'implantation, i.e., l'agent utilisateur peut déjà savoir de lui-même comment restituer ce type de données
(par exemple, des images GIF).
Les auteurs spécifient l'implantation d'un objet et la localisation des données à restituer via l'élément
OBJECT. Par contre, pour spécifier des valeurs d'exécution, les auteurs utilisent l'élément PARAM, qui
est abordé dans la section sur l'initialisation de l'objet.
L'élément OBJECT peut aussi apparaître en contenu de l'ément HEAD. Étant donné que les agents
utilisateurs ne restituent généralement pas les éléments placés dans la section HEAD, les auteurs
devraient s'assurer qu'aucun élément OBJECT dans la section HEAD ne spécifie un contenu qui peut être
restitué. Veuillez consulter la section sur le partage des données entre les cadres pour un exemple
d'inclusion de l'élément OBJECT dans l'élément HEAD.
7.3.1 Les règles de restitution des objets
L'agent utilisateur doit interpréter l'élément OBJECT selon les règles de préséance suivantes :
1.
2.
L'agent utilisateur doit en premier essayer de restituer l'objet. Il ne devrait pas restituer le
contenu de l'élément, mais il doit l'examiner au cas où l'élément contiendrait d'éventuels enfants
directs qui soient des éléments PARAM (voir la section sur l'initialisation de l'objet) ou bien des
éléments MAP (voir la section sur les images cliquables côté 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 erronée, etc.), il doit essayer de restituer son
contenu.
Dans l'exemple suivant, nous insérons un applet d'horloge analogique dans un document via l'élément
OBJECT. L'applet, écrit dans le langage Python, ne requiert aucune données supplémentaires ni valeurs
d'exécution. L'attribut classid spécifie la localisation de l'applet :
<p><object classid="http://www.miamachina.it/orologioanalogico.py">
</object>
Remarquez que l'horloge sera restituée dès l'interprétation de la déclaration de l'élément OBJECT par
l'agent utilisateur. Il est possible de différer la restitution d'un objet en effectuant une déclaration
préalable de cet objet (décrit ci-dessous).
Les auteurs devraient remplir cette déclaration en y incluant un texte de remplacement comme contenu de
l'élément 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 animée.
</object>
Une conséquence significative de la conception de l'élément OBJECT, c'est qu'elle offre un mécanisme
pour spécifier des restitutions alternatives de l'objet chacune des déclarations des éléments OBJECT
41
imbriqués peut spécifier un type de contenu alternatif. Si l'agent utilisateur ne peut pas restituer l'élément
OBJECT le plus externe, il essaye d'en restituer le contenu, qui peut être un autre élément OBJECT, etc.
Dans l'exemple suivant, nous imbriquons plusieurs déclarations d'éléments OBJECT pour illustrer le
fonctionnement des restitutions alternatives. L'agent utilisateur essaye d'abord de restituer le premier
élément OBJECT qu'il peut, dans l'ordre suivant : (1) un applet représentant 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 déclaration la plus externe spécifie un applet qui ne requiert ni donnée ni valeurs initiales. La
deuxième déclaration spécifie une animation MPEG et, puisqu'elle ne définit pas la localisation d'une
l'implémentation pour traiter l'animation MPEG, compte sur l'agent utilisateur pour prendre en charge
celle-ci. Nous avons également spécifié l'attribut type, de sorte que l'agent utilisateur, qui sait ne pas
pouvoir restituer un MPEG, n'essaiera même pas de charger le fichier "LaTerre.mpeg" à partir du réseau.
La troisième déclaration spécifie la localisation d'un fichier GIF et fournit un texte de remplacement au
cas où tous les autres mécanismes auraient échoué.
Les données internes comparées aux données externes. Les données à restituer peuvent être fournies de
deux façons : en interne ou à partir d'une ressource externe. Tandis que la première méthode donnera en
général une restitution plus rapide, elle ne conviendra pas quand il s'agira de restituer une grande
quantité de données.
Voici un exemple qui illustre la manière dont les données internes peuvent être injectées dans l'élément
OBJECT :
<p>
<object id="horloge1"
classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
data="data:application/x-oleobject;base64, ...des données en base64...">
Une horloge.
</object>
Veuillez consulter la section sur la présentation visuelle des objets, images et applets pour des précisions
sur la taille, l'alignement et les bordures d'un objet.
7.3.2 L'initialisation de l'objet : l'élément PARAM
Les éléments PARAM spécifient l'ensemble des valeurs qui peuvent être requises à l'exécution par un
objet. Il peut y avoir un nombre quelconque d'éléments PARAM dans le contenu d'un élément OBJECT,
ou APPLET, dans n'importe quel ordre, mais ceux-ci doivent se placer au début du contenu de l'élément
englobant OBJECT, ou APPLET.
La syntaxe des noms et de leurs valeurs est censée comprise par l'implémentation de l'objet. Ce document
ne spécifie pas les façons selon lesquelles les agents utilisateurs devraient ramener les couples
nom/valeur ni devraient interpréter les noms apparaissant en double.
Nous revenons à l'exemple avec l'horloge pour illustrer l'utilisation de l'élément PARAM : supposons que
l'applet admette deux paramètres d'exécution qui définissent sa hauteur et sa largeur initiales. On peut
fixer une dimension initiale de 40x40 pixels à l'aide de deux éléments 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 reconnaît pas les applications Python.
</object>
42
Dans l'exemple suivant, les données d'exécution pour le paramètre « Valeurs_initiales » de l'objet sont
spécifiées comme étant une ressource externe (un fichier GIF). La valeur de l'attribut valuetype est donc
fixée à "ref" et la valeur de l'attribut value est l'URI qui désigne 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 spécifié l'attribut standby pour que l'agent utilisateur puisse
afficher un message pendant le chargement du mécanisme de restitution.
Quand un élément OBJECT est restitué, l'agent utilisateur doit rechercher les seuls contenus des éléments
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 paramètre "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 paramètre "param1" est ignoré et "param2" s'applique à "obj2". Si ni l'un ni l'autre élément
OBJECT n'est restitué, alors ni l'un ni l'autre élément PARAM ne s'applique.
<p>
<object id="obj1">
<param name="param1">
<object id="obj2">
<param name="param2">
</object>
</object>
7.3.3 Les systèmes de nommage globaux des objets
La localisation de l'implémentation d'un objet est donnée par un URI. Comme nous l'avons vu dans
l'introduction aux URI, le premier segment d'un URI absolu spécifie le système de nommage [ndt.
naming scheme] utilisé pour transférer les données désignées par l'URI. Pour les documents HTML, ce
système est fréquemment « http ». Certains applets pourraient employer d'autres systèmes de nommage.
Par exemple, lors de la spécification 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 insère un applet Java dans un document HTML.
<p><object classid="java:program.start">
</object>
Par la spécification de l'attribut codetype, l'agent utilisateur peut décider s'il ramène l'application Java en
s'appuyant sur sa capacité à le faire.
<object codetype="application/java-archive"
classid="java:program.start">
</object>
Certains systèmes de restitution demandent des informations supplémentaires pour identifier leur
implémentation et on doit leur dire où trouver ces informations. Les auteurs peuvent donner une
indication de chemin à l'implémentation 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 spécifie (avec l'attribut classid) un objet ActiveX via un URI qui commence par le
système de nommage « clsid ». L'attribut data localise les données à 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'élément APPLET
Cet élément, qui est géré par tous les navigateurs compatibles avec Java, permet aux développeurs
d'incorporer un applet Java dans un document HTML. Il est déconseillé en faveur de l'élément OBJECT.
43
Le contenu de l'élément APPLET fais office de support d'informations de remplacement pour les agents
utilisateurs qui ne reconnaissent pas cet élément ou qui ne sont pas configurés à cet instant pour gérer les
applets. Sinon, les agents utilisateurs doivent ignorer le contenu.
Dans l'exemple suivant, l'élément APPLET inclut un applet Java au document. Comme aucun attribut
codebase n'est donné, l'applet est censé se trouver dans le même répertoire 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 récrire avec un élément 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'élément PARAM.
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 récrire avec l'élément 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 spécifier des régions dans une image, ou un objet, et
d'assigner une action particulière à chacune de ces régions (par exemple, ramener un document, lancer un
programme, etc.). Quand l'utilisateur active la région, l'action est exécutée.
Une image cliquable est créée en associant à un objet une spécification de zones géométriques sensibles
sur celui-ci.
Il existe deux types d'images cliquables :
•
•
Côté client. Quand l'utilisateur active une région d'une image cliquable côté client avec une
souris, l'agent utilisateur en interprète les coordonnées du pixel. L'agent utilisateur sélectionne le
lien spécifié pour la région activée et le suit ;
Côté serveur. Quand l'utilisateur active une région d'une image cliquable côté serveur, les
coordonnées du pixel du clic sont envoyées à l'agent côté serveur, qui est spécifié par l'attribut
href de l'élément A. L'agent côté serveur interprète ces coordonnées et effectue une certaine
action.
Les images cliquables côté client sont préférées à celles côté serveur pour au moins deux raisons : elles
sont accessibles aux personnes navigant avec des agents utilisateurs non-graphiques et elles renvoient une
réponse immédiate pour ce qui est de savoir si le pointeur se trouve sur une région active ou non.
7.5.1 Les images cliquables côté client : les éléments MAP et AREA
L'élément MAP spécifie une image cliquable côté client (ou un autre mécanisme de navigation) qui peut
être associée à d'autres éléments (IMG, OBJECT ou INPUT). L'image cliquable est associée à un élément
via l'attribut usemap de celui-ci. L'élément MAP peut s'employer sans image associée pour des
mécanismes de navigation généraux.
La présence de l'attribut usemap sur un élément OBJECT implique que l'objet qui est inclus est une
image. En outre, quand l'élément OBJECT a une image cliquable côté client associée, l'agent utilisateur
44
peut produire une interaction utilisateur avec cet élément OBJECT, uniquement en fonction de l'image
cliquable côté client. Ceci permet aux agents utilisateurs (tels un navigateur vocal ou un robot) d'interagir
avec l'élément OBJECT sans devoir le traiter ; l'agent utilisateur peut même choisir de ne pas ramener (ou
traiter) l'objet. Quand un élément OBJECT a une image cliquable associée, l'auteur ne devrait pas
compter sur le fait que l'objet sera ramené ou traité par tous les agents utilisateurs.
Le modèle de contenu de l'élément MAP permet à l'auteur les combinaisons suivantes :
1.
2.
Un ou plusieurs éléments AREA. Ces éléments n'ont aucun contenu mais spécifient les régions
géométriques de l'image cliquable et les liens qui sont associés à chaque région. Remarquez que
les agents utilisateurs ne restituent pas en général les élément AREA. C'est pourquoi les auteurs
doivent fournir un texte de remplacement pour chaque élément AREA avec l'attribut alt (voir cidessous pour des renseignements sur la manière de spécifier un texte de remplacement) ;
Un contenu de type bloc. Ce contenu devrait comprendre les éléments A qui spécifient les
régions géométriques de l'image cliquable et le lien associé à chaque région. Remarquez que
l'agent utilisateur devraient restituer le contenu de type bloc d'un élément MAP. Les auteurs
devraient utiliser cette méthode pour créer des documents plus accessibles.
Quand un élément MAP contient un contenu mixte (à la fois des éléments AREA et un contenu de type
bloc), les agents utilisateurs doivent ignorer les éléments AREA.
Les auteurs devraient spécifier la géométrie d'une image cliquable entièrement avec des éléments AREA,
ou entièrement avec des éléments A, ou entièrement avec les deux si le contenu est mixte. Les auteurs
peuvent souhaiter mêler le contenu, de sorte que les agents utilisateurs anciens prendront en charge les
cartographies spécifiées par les éléments AREA et les agents utilisateurs récents tireront profit des
contenus en bloc plus étoffés.
Si deux régions définies ou plus se chevauchent, l'élément définissant une région qui apparaît en premier
dans le document a priorité (i.e., répond 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 accéder. Par exemple, les
agents utilisateurs peuvent utiliser le texte de l'attribut alt pour créer des liens textuels à la place des
images cliquables graphiques. De tels liens peuvent être activés de diverses façons (clavier, commande
vocale, etc.).
Exemples d'images cliquables côté client
Dans l'exemple suivant, nous créons une image cliquable côté client pour l'élément OBJECT. Nous ne
voulons pas restituer le contenu d'image cliquable quand l'élément OBJECT est restitué, c'est pourquoi
nous « dissimulons » l'élément MAP dans le contenu de l'élément OBJECT. En conséquence, le contenu
de l'élément MAP ne sera restitué qui si l'élément 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 restituée même si l'agent utilisateur est incapable de restituer
l'élément OBJECT. Par exemple, on peut vouloir associer une image cliquable à un élément OBJECT et
inclure une barre de navigation textuelle en bas de la page. Pour cela, nous définissons l'élément MAP en
dehors de l'élément 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 créons une image cliquable similaire, cette fois en employant l'élément
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'élément IMG au lieu de OBJECT (avec la même déclaration MAP) :
<p><img src="barrenavigation1.gif" usemap="#carte1" alt="Barre de navigation">
L'exemple suivant illustre la manière dont on peut partager des images cliquables.
Les éléments OBJECT imbriqués sont utiles pour offrir des solutions de repli au cas où l'agent utilisateur
ne reconnaîtrait pas certains formats. Par exemple :
<p>
<object data="barrenavigation.png" type="image/png">
<object data="barrenavigation.gif" type="image/gif">
texte décrivant l'image...
</object>
</object>
Si l'agent utilisateur ne reconnaît pas le format PNG, celui-ci essaye de restituer l'image GIF. Si celui-ci
ne reconnaît pas le format GIF (par exemple, parce qu'il s'agit d'un navigateur vocal), il se rabat par
défaut sur la description textuelle fournie en contenu de l'élément OBJECT interne. Quand les éléments
OBJECT sont imbriqués de cette manière, 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 spécifier des ancres pour créer des zones inactives dans une
image cliquable. La première ancre spécifie une petite région circulaire sans lien associé. La deuxième
ancre spécifie une région circulaire plus grande de même centre que le précédent. Les deux combinés
forment un anneau dont le centre est inactif et le bord actif. L'ordre des définitions 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 même manière, l'attribut nohref de l'élément AREA déclare que la région géométrique n'a pas de
lien associé.
7.5.2 Les images cliquables côté serveur
Les images cliquables côté serveur peuvent se révéler intéressantes pour les cas où l'image cliquable
serait trop compliquée à réaliser côté client.
On ne peut définir une image cliquable côté serveur que pour les éléments IMG et INPUT. Pour ce qui
est de l'élément IMG, celui-ci doit se trouver dans un élément A et l'attribut booléen ismap ([CI]) doit être
présent. Pour ce qui est de l'élément INPUT, celui-ci doit être du type "image".
Quand l'utilisateur active le lien, en cliquant sur l'image, les cordonnées de ce clic à l'écran sont
directement transmises au serveur qui héberge le document. Les coordonnées à l'écran sont exprimées par
des valeurs en pixels d'écran relativement à l'image. Pour des informations normatives sur la définition
d'un pixel et sur la manière de le mesurer, veuillez consulter la spécification [CSS1].
Dans l'exemple suivant, la région active définit un lien côté serveur. Ainsi, tout clic sur l'image entraînera
la transmission des coordonnés 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 dérive un nouvel URI à partir de
l'URI spécifié par l'attribut href de l'élément A, en lui rajoutant à la fin le caractère « ? » suivi des
coordonnées « x » et « y », séparées 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 dérivé sera
"http://www.acme.com/cgi-bin/competition?10,27".
7.6 La présentation visuelle des images, objets et applets
Tous les attributs des éléments IMG et OBJECT, concernant alignement, l’espace autour des objets et les
bordures, sont déconseillés en faveur des feuilles de style. Nous ne les détaillerons donc pas.
7.6.1 La largeur et la hauteur
Quand ils sont spécifiés, 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 spécifiées par
l'auteur. Remarquez que les longueurs exprimées 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 réserver leur place et continuer à restituer le document en attendant les
données d'image.
7.7 La manière de spécifier un texte de remplacement
Plusieurs éléments non-textuels (IMG, AREA, APPLET et INPUT) laissent l'auteur spécifier un texte de
remplacement qui sert de contenu quand l'élément ne peut pas être restitué normalement. La spécification
d'un texte de remplacement représente 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 déficiences visuelles, pour ceux qui utilisent des synthétiseurs de parole,
ceux qui ont désactivé l'affichage des images de leurs agents utilisateurs graphiques, etc.
On doit spécifier l'attribut alt sur les éléments IMG et AREA. Il est optionnel pour les éléments INPUT et
APPLET.
Alors qu'un texte de remplacement peut être très utile, on doit l'employer à bon escient. Les auteurs
devraient observer les principes directeurs suivants :
•
•
Ne pas spécifier un texte de remplacement non pertinent lors de l'inclusion d'images destinées à
la mise en forme d'une page par exemple, la définition alt="Puce rouge" serait inadéquate pour
une image qui ajoute une puce rouge pour décorer un titre ou un paragraphe. Auquel cas, le texte
de remplacement devrait être la chaîne vide (""). De manière générale, 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 prévues à cet effet ;
Ne pas spécifier un texte de remplacement dépourvu 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 défaut
2. Les informations de style en-ligne
3. Les informations de style dans l'en-tête : l'élément STYLE
4. Les types de média
Les feuilles de style externes
1. Les feuilles de style préférées et alternatives
2. La spécification des feuilles de style externes
Les feuilles de style en cascade
1. L'héritage et la cascade
La dissimulation des données de style à l'agent utilisateur
8.1 Introduction aux feuilles de style
Les feuilles de style représentent un progrès majeur pour les concepteurs de pages Web, en développant
les possibilités d'améliorer l'aspect de leurs pages. Dans les milieux scientifiques au sein desquels le Web
a été conçu, les personnes étaient plus attachées au contenu de leurs documents qu'à leur présentation. Au
fur et à mesure de la découverte du Web par des personnes issues d'horizons plus larges, les limitations
de HTML devinrent la source de frustrations continues et les auteurs furent forcés de contourner les
limitations stylistiques de HTML. Bien que l'intention était louable, (améliorer la présentation des pages
Web), les techniques employées 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 propriétaires ;
la conversion du texte en une image ;
48
•
•
•
l'utilisation d'images pour contrôler l'espacement ;
l'utilisation des tables pour la mise en page ;
l'écriture d'un programme plutôt que d'utiliser HTML.
Ces techniques accroissent considérablement la complexité des pages Web, offrent peu de souplesse,
souffrent de problèmes d'interopérabilité et sont une épreuve pour les personnes avec des handicaps.
Les feuilles de style résolvent tous ces problèmes en même temps qu'elles remplacent l'éventail limité des
mécanismes de présentation dans HTML. Avec les feuilles de style, il devient facile de spécifier
l'espacement entre les lignes de texte, l'indentation des lignes de texte, la couleur utilisée pour le texte et
l'arrière-plan, la taille et le style de la police et quantité d'autres détails.
Par exemple, la courte feuille de style CSS (« Cascading Style Sheet ») suivante (stockée dans le fichier
"special.css") définit 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'élément 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 fonctionnalités 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 séparés afin de faciliter leur réutilisation. Il
est parfois utile d'inclure des instructions de restitution dans le document auquel elles
s'appliquent, soit regroupées au début du document, soit dans les attributs des éléments tout au
long du corps du document. Afin de faciliter la gestion du style pour un site entier, cette
spécification décrit comment utiliser les en-têtes HTTP pour que les feuilles de style s'appliquent
à un document.
L'indépendance vis-à-vis des langages de feuille de style
Cette spécification 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 très spécialisés. 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 séparément, les feuilles de style peuvent être
réutilisées, ce qui simplifie l'édition et utilise plus efficacement les caches du réseau. La cascade
définit une séquence ordonnée de feuilles de style dans laquelle les dernières feuilles de style ont
une priorité plus élevée que les premières. Certains langages de feuille de style ne gèrent pas la
cascade.
Les dépendances aux médias
HTML permet aux auteurs de spécifier les documents indépendamment du média. Cela permet
aux utilisateurs l'accès aux pages Web au moyen d'une grande variété d'appareils et de médias,
par exemple, les écrans graphiques des ordinateurs tournant sous Windows, Macintosh OS ou
X11, les appareils de télévision, les téléphones portables spéciaux et les agendas électroniques,
les navigateurs à synthèse vocale et les appareils tactiles Braille.
Les feuilles de style, par contraste, s'applique à un média spécifique ou à un groupe de médias.
Une feuille de style prévue pour un écran peut être éventuellement utilisable pour l'impression,
mais sera de peu d'utilité pour un navigateur à synthèse vocale. Cette spécification permet de
49
définir les catégories générales de médias pour lesquels une feuille de style donnée peut
s'appliquer. Ceci permet aux agents utilisateurs d'éviter la recherche de feuilles de style
innapropriées. Les langages de feuilles de style peuvent inclure des mécanismes décrivant les
dépendances aux médias dans la même feuille de style.
Les styles alternatifs
Les auteurs peuvent vouloir offrir aux lecteurs plusieurs présentations 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 spécifie une taille de police plus grande pour une meilleure lisibilité.
Cette spécification permet aux auteurs de spécifier une feuille de style préférée tout comme les
feuilles alternatives qui visent des utilisateurs ou des médias spécifiques. Les agents utilisateurs
devraient donner aux utilisateurs la possibilité de choisir entre plusieurs feuilles de styles
alternatives comme de désactiver les feuilles de style.
Le souci de l'efficacité
Certaines personnes ont exprimés des inquiétudes sur l'efficacité des feuilles de style. Par
exemple, la recherche d'une feuille de style externe peut retarder la présentation complète à
l'utilisateur. Une question similaire surgit pour l'en-tête d'un document qui contient une longue
liste de règles de style.
La proposition actuelle répond à ces interrogations en permettant aux auteurs d'inclure des
instructions de restitution à l'intérieur de chaque élément HTML. Les indications de restitution
sont alors toujours disponibles au moment où l'agent utilisateur veut restituer chacun des
éléments.
Dans de nombreux cas, les auteurs bénéficieront d'une feuille de style commune à un groupe de
documents. Auquel cas, l'éparpillement des règles de style à travers le document entraînera en
réalité une efficacité bien moindre que l'utilisation d'une feuille de style reliée, puisque la feuille
de style sera déjà présente 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 défaut
Les auteurs doivent spécifier le langage de feuille de style des informations de style associées au
document HTML.
Les auteurs devraient utiliser l'élément META pour définir le langage de feuille de style par défaut du
document. Par exemple, pour définir le langage CSS par défaut, les auteurs devraient inclure la
déclaration suivante dans la section HEAD de leurs documents :
<meta http-equiv="Content-Style-Type" content="text/css">
On peut aussi définir le langage de feuille de style par défaut avec les en-têtes HTTP. La déclaration
META précédente équivaut à l'en-tête HTTP :
Content-Style-Type: text/css
Les agents utilisateurs devraient déterminer le langage de feuille de style par défaut du document en
suivant les étapes suivantes (de la plus haute priorité à la plus basse) :
1.
2.
3.
Si plusieurs déclarations META éventuelles spécifient une valeur "Content-Style-Type", c'est la
dernière dans le flux de caractères qui détermine le langage de feuille de style par défaut ;
Sinon, quand plusieurs en-têtes HTTP éventuelles spécifient un champs "Content-Style-Type",
c'est le dernier dans le flux de caractères qui détermine le langage de la feuille de style par
défaut ;
Sinon, le type du langage de feuille de style par défaut est "text/css".
8.2.2 Les informations de style en-ligne
L’attribut style spécifie les informations de style pour l'élément courant.
Cet exemple CSS spécifie 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 déclarations des propriétés prennent la forme « nom : valeur » et sont séparées par des
points-virgules.
50
Pour une souplesse optimale, les auteurs devraient définir les styles dans des feuilles de style externes.
8.2.3 Les informations de style dans l'en-tête : l'élément STYLE
L'élément STYLE permet aux auteurs de placer des règles de style dans l'en-tête du document. HTML
autorise un nombre quelconque d'éléments 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
spécifique utilisé par un élément STYLE, doivent dissimuler le contenu de l'élément STYLE. La
restitution du contenu de cet élément en tant que partie du texte du document constitue une erreur.
Certains langages de feuilles de style gèrent une syntaxe pour dissimuler le contenu aux agents
utilisateurs non conformes.
La syntaxe des données de style dépend du langage de feuille de style.
Certaines implémentations de feuille de style peuvent autoriser une plus grande variété de règles dans
l'élément STYLE que dans l'attribut style. Par exemple, avec CSS, on peut déclarer les règles à l'intérieur
d'un élément STYLE pour :
•
•
•
toutes les instances d'un élément HTML particulier (par exemple, tous les éléments P, tous les
éléments H1, etc.) ;
toutes les instances d'un élément HTML appartenant à une classe particulière (i.e., les éléments
dont l'attribut class possède une valeur) ;
les instances uniques d'un élément HTML (i.e., un élément dont l'attribut id possède une valeur).
Les règles de préséance et d'héritage des règles de style dépendent du langage de feuille de style.
La déclaration CSS suivante, avec l'élément STYLE, met une bordure autour de chacun des éléments 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 éléments H1 appartenant à
une classe particulière, nous modifions la règle de cette façon :
<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 portée des informations de style à une instance unique d'élément H1,
spécifions 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 définir des informations de style pour pratiquement tous les éléments HTML, deux
éléments, DIV et SPAN, sont particulièrement utiles dans la mesure où ils n'imposent aucune sémantique
de présentation (en dehors de la distinction type bloc/type en-ligne). Lorsqu'ils sont utilisés conjointement
avec les feuilles de style, ces éléments permettent aux utilisateurs un développement HTML illimité,
particulièrement quand ils sont utilisés avec les attributs class et id.
51
Dans l'exemple suivant, nous utilisons l'élément SPAN pour spécifier 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'élément DIV et l'attribut class pour définir la justification du
texte d'une succession de paragraphes qui constituent la section de résumé d'un article scientifique. Ces
informations de style pourraient être réutilisées pour d'autres sections de résumé 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 média
HTML autorise les auteurs à concevoir des documents qui exploitent les caractéristiques du média sur
lequel le document doit être restitué (par exemple, écran graphique, écran de télévision, appareil de
poches, navigateur à synthèse vocale, appareil tactile Braille, etc.). En spécifiant l'attribut media, les
auteurs permettent aux agents utilisateurs de charger et appliquer les feuilles de style de manière
sélective. Veuillez consulter la liste des descripteurs de média reconnus.
Les déclarations des exemples suivants s'appliquent aux éléments H1. Pour une projection dans une
réunion de travail, toutes leurs instances apparaîtront en bleu. Pour une impression papier, toutes les
instances seront centrées.
<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 média est particulièrement intéressante 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 réseau 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 conçues pour une restitution visuelle.
8.3 Les feuilles de style externes
Les auteurs peuvent séparer 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 sélectivement (en fonction des
descriptions des médias).
8.3.1 Les feuilles de style préférées et alternatives
HTML permet aux auteurs d'associer un nombre quelconque de feuilles de style externes à un document.
Le langage de feuille de style définit comment plusieurs feuilles de style externes interagissent (par
exemple, les règles de « cascade » de CSS).
Les auteurs peuvent spécifier un certain nombre de feuilles de style mutuellement exclusives appelées
feuilles de style alternatives. L'utilisateur peut sélectionner sa feuille de style favorite parmi celles-ci en
fonction de ses préférences. Par exemple, l'auteur peut spécifier une feuille de style conçue 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'opérer une sélection entre les feuilles
de style alternatives.
L'auteur peut spécifier que l'une des feuilles de style alternatives est la préférée. Les agents utilisateurs
devraient appliquer la feuille de style préférée de l'auteur, à moins que l'utilisateur n'ait sélectionné une
autre alternative.
L'auteur peut regrouper plusieurs feuilles de style alternatives (y compris sa préférée) sous un seul nom
de style. Quand un utilisateur sélectionne 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 différent.
L'auteur peut aussi spécifier des feuilles de style persistentes que l'agent utilisateur doit appliquer en plus
des éventuelles feuilles de style alternatives.
8.3.2 La spécification des feuilles de style externes
Les auteurs spécifient les feuilles de style externes au moyen des attributs suivants de l'élément 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 reliée (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, préférée 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 préférée, donner la valeur "stylesheet" à l'attribut rel et
nommer la feuille de style en spécifiant 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 spécifiant 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 spécifions 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 définissant l'attribut title, on en fait la feuille de style préférée 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'élément META pour établir la feuille de style préférée du document. Par
exemple, pour mettre « compact » comme feuille de style préférée (ci-dessus), l'auteur peut inclure la
ligne suivante dans la section HEAD :
<meta http-equiv="Default-Style" content="compact">
On peut encore spécifier la feuille de style préférée au moyen d'un en-tête HTTP. La déclaration META
précédente équivaut à l'en-tête HTTP suivant :
Default-Style: "compact"
Si deux ou plus déclarations META, ou en-têtes HTTP, spécifient la feuille de style préférée, c'est la
dernière qui sera retenue. Les en-têtes HTTP sont censés survenir avant la section HEAD du document
dans ce cas.
Si deux ou plus éléments LINK spécifient une feuille de style préférée, le premier est retenu.
Les feuilles de style préférées au moyen d'éléments META ou d'en-têtes HTTP ont priorité sur celles
spécifiées avec l'élément 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 définir une cascade, l'auteur spécifie une succession d'éléments
LINK et/ou STYLE. Les informations de style se répandent en cascade selon l'ordre d'apparition des
éléments dans la section HEAD.
Remarque : Cette spécification ne précise pas la manière dont les feuilles de styles issues de différents
langages de style cascadent. Les auteurs devraient éviter de mélanger les langages de feuilles de style.
Dans l'exemple suivant, nous spécifions deux feuilles de style alternatives nommées "compact". Si
l'utilisateur sélectionne 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 sélectionne « 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 éléments 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'héritage et la cascade
Quand l'agent utilisateur veut restituer un document, il doit trouver les valeurs des propriétés 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 mécanisme exact dépend du langage de feuille de style, mais la description suivante est
applicable en général :
Le mécanisme de cascade est utilisé quand un certain nombre de règles de style s'appliquent toutes
directement à un élément. Le mécanisme permet à l'agent utilisateur de ranger les règles selon leur
spécificité, pour déterminer quelle règle s'applique. Si aucune règle n'est trouvée, l'étape suivante va
dépendre de la propriété de style, si elle peut s'hériter ou non. Les propriétés ne peuvent pas toutes
s'hériter. Auquel cas, le langage de feuille de style fournit des valeurs par défaut qu'il faut utiliser quand il
n'y a aucune règle explicite pour un élément particulier.
Si la propriété peut s'hériter, l'agent utilisateur examine l'élément englobant immédiat pour voir si une
règle s'y applique. Ce processus continue jusqu'à ce qu'une règle appliquable soit trouvée. Ce mécanisme
54
autorise une spécification compacte des feuilles de style. Par exemple, l'auteur peut spécifier la famille de
la police de tous les éléments de BODY par une seule règle appliquée à l'élément BODY.
8.5 La dissimulation des données de style à l'agent utilisateur
Certains langages de feuille de style gèrent une syntaxe qui permet aux auteurs de dissimuler le contenu
de l'élément STYLE aux agents utilisateurs non conformes.
Cet exemple montre, dans le cas de CSS, la manière de masquer par un commentaire le contenu de
l'élément 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 règles horizontales
Sommaire
1.
2.
3.
Le formatage
1. La couleur d'arrière-plan
2. L'alignement
3. Les objets flottants
Faire flotter un objet
Faire flotter le texte autour d'un objet
Les polices
1. Les éléments de style de police : les éléments TT, I, B, BIG, SMALL, STRIKE, S et U
2. Les éléments modificateurs de police : les éléments FONT et BASEFONT
Les règles : l'élément HR
Cette section de la spécification aborde certains éléments et attributs HTML qui peuvent être utilisés
pour la mise en forme visuelle des éléments. Nombre d'entre eux sont déconseillés.
9.1 Le formatage
9.1.1 La couleur d'arrière-plan
L’attribut bgcolor établit la couleur d'arrière-plan du canevas du corps du document (l'élément BODY) ou
des tables (les éléments TABLE, TR, TH et TD). On peut utiliser des attributs supplémentaires avec
l'élément BODY pour spécifier la couleur du texte.
Cet attribut est déconseillé en faveur des feuilles de style pour spécifier les informations de couleur
d'arrière-plan.
9.1.2 L'alignement
Il est possible d'aligner les éléments de bloc (tables, images, objets, paragraphes, etc.) sur le canevas avec
l'attribut align. Bien que cet attribut puisse se placer sur de nombreux éléments HTML, l'éventail des
valeurs possibles diffère parfois d'un élément à l'autre. Ici nous abordons seulement la signification de
l'attribut align pour le texte.
L’attribut align spécifie l'alignement horizontal de son élément par rapport à son environnement. Les
valeurs possibles sont :
•
•
left : les lignes de texte sont restituées poussées à gauche ;
center : les lignes de texte sont centrées ;
55
•
•
right: les lignes de texte sont restituées poussées à droite ;
justify : les lignes de texte sont justifiées des deux côtés.
La valeur par défaut est tributaire de la direction de base du texte. Pour un texte de gauche-à-droite, la
valeur par défaut est align=left, tandis que pour un texte de droite-à-gauche c'est align=right.
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 même 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 éléments H1. On pourrait réduire la portée du style en plaçant un
attribut class sur l'élément :
<head>
h1.bois {text-align: center}
</style>
<body>
<h1 class="bois"> Comment tailler le bois </h1>
De la même façon, 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...
Pour aligner un ensemble de paragraphes à droite, regroupez-les avec un élément DIV :
<div align="right">
<p>...texte du premier paragraphe...
<p>...texte du deuxième paragraphe...
<p>...texte du troisième paragraphe...
</div>
Avec CSS, la propriété « text-align » est héritée de l'élément parent ; on peut donc utiliser :
<head>
div.mesparagraphes {text-align: right}
</style>
<body>
<div class="mesparagraphes">
<p>...texte du premier paragraphe...
<p>...texte du deuxième paragraphe...
<p>...texte du troisième paragraphe...
</div>
Pour centrer le document entier avec CSS :
<head>
56
body {text-align: center}
</style>
<body>
...le corps est centré...
</body>
L'élément CENTER équivaut exactement à la spécification de la valeur "center" sur l'attribut align de
l'élément DIV. L'élément CENTER est déconseillé.
9.1.3 Les objets flottants
Les images et les objets peuvent apparaître directement « en-ligne » ou peuvent flotter vers un côté de la
page, altérant 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., entraîne l'objet à flotter vers la marge
gauche ou celle de droite. Les objets flottants commencent en général 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.
L'exemple suivant montre comment faire flotter un élément 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'entraîne aucun flottement,
mais centre l'objet à l'intérieur des marges courantes. Cependant, pour les éléments P et DIV, la valeur
"center" entraîne le centrage de leur contenu.
Faire flotter le texte autour d'un objet
L’attribut clear de l'élément BR, contrôle l'écoulement du texte autour des objets flottants.
Il spécifie où la prochaine ligne devrait apparaître, dans un navigateur visuel, après le saut de ligne
provoqué par cet élément. 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 défaut ;
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 spécifier que tous les sauts de ligne devraient se
comporter de cette façon 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 spécifier ce comportement sur une instance particulière de l'élément 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 éléments HTML suivants spécifient des informations de police. Bien qu'ils ne soient pas tous
déconseillés, on décourage leur utilisation en faveur des feuilles de style.
9.2.1 Les éléments de style de police : les éléments TT, I, B, BIG, SMALL, STRIKE, S et U
La restitution des éléments de style de police dépend de l'agent utilisateur. Ce qui suit n'est qu'une
description informative.
TT : restitué sous la forme d'un texte de téléimprimeur ou à chasse fixe [ndt. monospaced].
I : restitué sous la forme d'un texte en italique.
B : restitué sous la forme d'un texte en caractères gras.
BIG : restitue le texte dans une « grande » taille de police.
SMALL : restitue le texte dans une « petite » taille de police.
STRIKE et S : Déconseillé. Restituent un texte barré.
U : Déconseillé. 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 restituée comme suit :
Il est possible d'obtenir une bien plus grande diversité d'effets de police en utilisant les feuilles de style.
Pour spécifier 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 éléments de style de police doivent être correctement imbriqués. La restitution des éléments de style
de police imbriqués dépend de l'agent utilisateur.
9.2.2 Les éléments modificateurs de police : les éléments FONT et BASEFONT
Les éléments FONT et BASEFONT sont déconseillés.
L'élément FONT change la taille de la police et la couleur du texte qu'il contient.
L'élément BASEFONT établit la taille de police de base (en utilisant l'attribut size). Les changements de
taille de police obtenus avec l'élément FONT sont relatifs à la taille de police de base établie par l'élément
BASEFONT. Si l'élément BASEFONT n'est pas présent, alors la taille de police de base vaut "3".
L'exemple suivant illustre les différences entre les sept tailles de police disponibles avec l'élément
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 modifiés par un élément
FONT avec un changement de taille de police relatif.
9.3 Les règles : l'élément HR
L'élément HR entraîne la restitution d'une règle horizontale par l'agent utilisateur.
La quantité d'espace vertical inséré entre une règle et le contenu qui l'entoure dépend de l'agent
utilisateur.
Cet exemple centre les règles, en les dimensionnant à la moitié de la largeur disponible entre les marges.
La règle du haut a une épaisseur par défaut tandis que les deux du bas sont fixées à 5 pixels. La règle du
bas devrait être restituée 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 règles pourraient être la suivante :
10 Les cadres
Sommaire
1.
2.
3.
4.
5.
Introduction aux cadres
La disposition des cadres
1. L'élément FRAMESET
Les rangées et les colonnes
Les jeux d'encadrement imbriqués
Le partage des données entre les cadres
2. L'élément FRAME
L'établissement du contenu initial d'un cadre
La restitution visuelle d'un cadre
La spécification des informations du cadre cible
1. L'établissement de la cible par défaut des liens
2. La sémantique de cible
Le contenu de remplacement
1. L'élément NOFRAMES
Les cadres en-ligne : l'élément IFRAME
10.1 Introduction aux cadres
Les cadres (en anglais « frames ») HTML permettent aux auteurs de présenter les documents selon des
vues multiples, qui peuvent être des fenêtres indépendantes ou bien des sous-fenêtres. Les vues multiples
offrent aux concepteurs les moyens de garder visibles certaines informations, tandis que d'autres vues
sont défilées ou remplacées. Par exemple, dans la même fenêtre, un cadre pourrait afficher une bannière
statique, un deuxième cadre afficher un menu de navigation et un troisième le document principal qui
peut défiler ou être remplacé au gré de la navigation via le deuxième 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 créer 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'élément NOFRAMES.
10.2 La disposition des cadres
Le document HTML qui décrit la disposition des cadres (appelé document avec jeu d'encadrement [ndt.
frameset document]) obéit à une structure différente de celle du document HTML sans cadres. Le
document standard possède une section HEAD et une section BODY. Le document avec jeu
d'encadrement possède une section HEAD et une section FRAMESET à la place de BODY.
La section FRAMESET du document spécifie la disposition des vues dans la fenêtre principale de l'agent
utilisateur. En outre, la section FRAMESET peut contenir un élément NOFRAMES afin d'offrir un
contenu de remplacement aux agents utilisateurs qui ne reconnaissent pas les cadres ou bien ne sont pas
configurés pour afficher ces cadres.
Les éléments, qui normalement seraient placés dans la section BODY, ne doivent pas apparaître avant le
premier élément FRAMESET, sinon cet élément FRAMESET sera ignoré.
10.2.1 L'élément FRAMESET
L'élément FRAMESET spécifie la disposition de la fenêtre principale de l'utilisateur selon des
subdivisions rectangulaires.
60
Les rangées et les colonnes
La spécification de l'attribut rows définit le nombre de subdivisions horizontales dans un jeu
d'encadrement. La spécification de l'attribut cols définit le nombre de subdivisions verticales. Les deux
attributs peuvent être utilisés simultanément pour créer une grille.
Si l'attribut rows est absent, chaque colonne occupe la hauteur entière de la page. Si l'attribut cols est
absent, chaque rangée occupe la largeur entière de la page. Si aucun de ces attributs n'est présent, alors le
cadre occupe exactement les dimensions de la page.
Les cadres sont créés de gauche à droite pour les colonnes et de haut en bas pour les rangées. Quand les
deux attributs sont spécifiés, les vues sont créées de gauche à droite dans la rangée supérieure, de gauche
à droite dans la rangée suivante, etc.
Le premier exemple divise l'écran en deux verticalement (i.e., crée une moitié supérieure et une moitié
inférieure).
<frameset rows="50%, 50%">
...le reste de la définition...
</frameset>
L'exemple suivant crée trois colonnes. La deuxième a une largeur fixe de 250 pixels (qui peut servir, par
exemple, à contenir une image dont les dimensions sont connues). La première reçoit 25% de l'espace
disponible et la troisième les 75% restant.
<frameset cols="1*,250,3*">
</frameset>
L'exemple suivant crée une grille de 2×3 subdivisions.
<frameset rows="30%,70%" cols="33%,34%,33%">
</frameset>
Pour l'exemple qui va suivre, on suppose que la fenêtre du navigateur fait 1000 pixels de haut. La
première vue se voit allouer 30% de la hauteur totale (300 pixels). La seconde vue est fixée pour avoir
exactement 400 pixels de haut. Il reste 300 pixels à répartir entre les deux autres cadres. La hauteur du
quatrième cadre est définie comme étant "2*", il est donc deux fois plus haut que le troisième cadre, dont
la hauteur n'est que de "*" (équivalant à "1*"). Ainsi, le troisième cadre fera 100 pixels de haut et le
quatrième 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 réel devraient être
ajustées par l'agent utilisateur. Quand ce total est inférieur à 100%, l'espace restant devrait être alloué
proportionnellement à chaque vue. Quand il est supérieur, chaque vue devrait être réduite en fonction de
la proportion de l'espace total qui lui est spécifiée.
Les jeux d'encadrement imbriqués
Les jeux d'encadrement peuvent s'imbriquer à n'importe quel niveau.
Dans l'exemple suivant, l'élément FRAMESET externe divise l'espace disponible en trois colonnes
égales. L'élément FRAMESET interne partage alors la deuxième en deux rangées de hauteur inégale.
<frameset cols="33%, 33%, 34%">
...le contenu du premier cadre...
<frameset rows="40%, 50%">
...le contenu du deuxième cadre, première rangée...
...le contenu du deuxième cadre, seconde rangée...
</frameset>
...le contenu du troisième cadre...
</frameset>
Le partage des données entre les cadres
Les auteurs peuvent partager des données entre plusieurs cadres en incluant celles-ci au moyen de
l'élément OBJECT. Les auteurs devraient inclure l'élément OBJECT dans l'élément 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 référer à cet identifiant.
L'exemple suivant illustre la manière dont un script pourrait appeler un élément OBJECT défini 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 début du document...
<p>
<script type="text/javascript">
parent.monobjet.propriété
</script>
...le reste du document...
</body>
</html>
10.2.2 L'élément FRAME
L'élément FRAME définit le contenu et l'apparence d'un seul cadre.
L'établissement du contenu initial d'un cadre
L'attribut src spécifie 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 entraîner l'agent utilisateur à charger chaque fichier dans une vue séparée.
Le contenu d'un cadre ne doit pas se trouver dans le même document que la définition de ce cadre.
EXEMPLE ILLÉGAL :
La définition de jeu d'encadrement suivante n'est pas légale pour HTML, parce que le contenu du
deuxième cadre se trouve dans le même 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 décoratifs de l'élément FRAME. On spécifie que le
cadre 1 n'aura pas de barre de défilement. Le cadre 2 laissera un espace autour de son contenu
(initialement, un fichier d'image) et ne sera pas redimensionnable. Aucune bordure ne sera dessinée entre
les cadres 3 et 4. Des bordures seront dessinées (par défaut) 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 spécification des informations du cadre cible
L’attribut target spécifie le nom du cadre dans lequel ouvrir un document.
En assignant un nom à un cadre via l'attribut name, l'auteur peut s'y référer comme « cible » des liens
définis par les autres éléments. L'attribut target peut se placer sur les éléments qui créent des liens (A,
LINK), des images cliquables (AREA) et des formulaires (FORM).
Cet exemple illustre la manière dont l'attribut target autorise la modification dynamique du contenu d'un
cadre. Nous définissons 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 spécifiques</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 débrouillez bien. Allez à la
<a href="diapo3.html" target="dynamique">diapositive 3.</a>
</body>
</html>
L'activation de l'un ou l'autre lien entraîne 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 définition 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 définition du
jeu d'encadrement ne reflète 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 arrière, par le biais de l'historique de
l'agent utilisateu (le browser)r, plus compliquée pour les utilisateurs.
10.3.1 L'établissement de la cible par défaut des liens
Quand, dans le même document, plusieurs liens désignent la même cible, il est possible de spécifier la
cible une seule fois et de se passer de l'attribut target de chaque élément. On réalise ceci en définissant
l'attribut target sur l'élément BASE.
Revenons à l'exemple précédent, cette fois par la mise en facteur des informations de cible, en les
définissant dans l'élément BASE et en les supprimant des éléments A.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<head>
<title>Un document ayant un élément BASE avec une cible particulièret</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 débrouillez bien. Allez à la
<a href="slide3.html">diapositive 3.</a>
</body>
</html>
10.3.2 La sémantique de cible
Les agents utilisateurs devraient déterminer le cadre cible, dans lequel charger une ressource reliée, selon
la préséance suivante (de la priorité la plus élevée à la plus basse) :
1.
2.
3.
4.
Si l'attribut target d'un élément vise un cadre connu, quand l'élément est activé (i.e., un lieu est
suivi ou un formulaire est soumis), la ressource désignée par l'élément devrait se charger dans le
cadre cible ;
Si cet élément n'a pas d'attribut target et, par contre, l'élément BASE en a un, c'est l'attribut
target de l'élément BASE qui détermine le cadre ;
Si ni cet élément ni l'élément BASE ne se réfèrent à une cible, alors la ressource désignée par
l'élément devrait se charger dans le cadre qui contient l'élément ;
Si un attribut target se réfère à un cadre « C » inconnu, l'agent utilisateur devrait créer une
nouvelle fenêtre et un nouveau cadre, puis assigner le nom « C » au cadre et enfin charger la
ressource désignée par l'élément 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 configurés pour ne pas les afficher.
10.4.1 L'élément NOFRAMES
L'élément NOFRAMES spécifie le contenu qui ne devrait être affiché que par les agents utilisateurs ne
reconnaissant pas les cadres ou non configurés pour les afficher. Les agents utilisateurs qui reconnaissent
les cadres doivent seulement afficher le contenu d'une déclaration NOFRAMES que s'ils sont configurés
pour ne pas afficher les cadres. Les agents utilisateurs qui ne reconnaissent pas les cadres doivent afficher
le contenu de l'élément 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'élément IFRAME
L'élément IFRAME permet aux auteurs d'insérer un cadre dans un bloc de texte. L'insertion d'un cadre
en-ligne dans un passage textuel revient un peu à y insérer un objet via l'élément OBJECT : ces éléments
permettent tous deux l'insertion d'un document HTML au sein d'un autre, ils peuvent tous deux être
alignés sur le texte environnant, etc.
Les informations qui doivent être insérées en-ligne sont désignées par l'attribut src de cet élément. Par
contre, le contenu de l'élément IFRAME ne devraient être affiché que par les agents utilisateurs qui ne
reconnaissent pas les cadres ou qui sont configurés 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 reconnaît 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 redimensionnés (et donc n'acceptent pas l'attribut noresize).
Remarque : On peut également incorporer un document HTML dans un autre document HTML avec
l'élément OBJECT.
11 Les formulaires
Sommaire
1.
2.
Introduction aux formulaires
Les commandes
1. Les types de commande
3. L'élément FORM
4. L'élément INPUT
1. Les types de commande créés par l'élément INPUT
2. Exemples de formulaires contenant des commandes INPUT
5. L'élément BUTTON
6. Les éléments SELECT, OPTGROUP et OPTION
1. Les options présélectionnées
7. L'élément TEXTAREA
8. Les labels
1. L'élément LABEL
9. Donner le focus à un élément
1. La navigation par tabulation
2. Les clés d'accès
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 méthode de soumission du formulaire
2. Les commandes réussies
3. Le traitement des données du formulaire
Première étape : identifier les commandes réussies
Deuxième étape : construire le jeu des données du formulaire
Troisième étape : coder le jeu des données du formulaire
Quatrième étape : soumettre le jeu des données 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 constituée d'un contenu normal, d'un balisage,
d'éléments spéciaux appelés commandes ou contrôles (cases à cocher, boutons radio, menus, etc.) et de
labels sur ces commandes. L'utilisateur « remplit » généralement le formulaire en modifiant ses
commandes (en saisissant un texte, en sélectionnant 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
réinitialiser 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 nommées.
Le « nom de commande » d'une commande est donné par son attribut name. La portée de l'attribut name
d'une commande au sein d'un élément FORM est cet élément FORM.
Chaque command possède à la fois une valeur initiale et une valeur courante, les deux sont des chaînes de
caractères. Veuillez consulter la définition de chaque commande pour des précisions sur la valeur initiale
et les éventuelles contraintes sur les valeurs imposées par la commande. En général, la « valeur initiale »
d'une commande peut être spécifiée avec l'attribut value de l'élément de commande. Cependant, la valeur
initiale d'un élément TEXTAREA est donnée par son contenu et la valeur initiale d'un élément OBJECT
dans un formulaire est déterminée par l'implémentation de l'objet (i.e., elle n'est pas précisée par cette
spécification).
La « valeur courante » d'une commande est d'abord égale à la valeur initiale. Par la suite, la valeur
courante de la commande peut être modifiée par les actions de l'utilisateur et par les scripts.
La valeur initiale d'une commande ne change pas. Ainsi, quand un formulaire est réinitialisé, chacune des
valeurs courantes des commandes reprend sa valeur initiale. Si la commande n'a pas de valeur initiale,
alors l'effet de la réinitialisation du formulaire sur cette commande n'est pas défini.
Lors de la soumission du formulaire pour son traitement, le nom et la valeur courante de certaines
commandes sont accouplés et ces couples sont soumis avec le formulaire. On appelle ces commandes,
pour lesquelles des couples nom/valeur sont soumis, des commandes réussies (successful controls).
11.2.1 Les types de commande
HTML défini les types de commande suivants :
Les boutons
Les auteurs peuvent créer 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 réinitialisation : quand il est actionné, le bouton de réinitialisation remet
toutes les commandes à leur valeur initiale ;
les boutons poussoirs : les boutons poussoirs n'ont pas de comportement par défaut.
Chaque bouton poussoir peut avoir des scripts côté client qui sont associés aux attributs
d'événement de l'élément. Quand un événement se produit (par exemple, l'utilisateur
presse le bouton, le relâche, etc.), le script associé est déclenché.
67
Les auteurs créent des boutons avec les éléments BUTTON ou INPUT.
Les cases à cocher
Les cases à cocher (et les boutons « radio ») sont des interrupteurs marche/arrêt qui peuvent être
actionnés par l'utilisateur. L'interrupteur est sur « marche » quand l'attribut checked de l'élément
de commande est spécifié. Lors de la soumission du formulaire, seules les commandes de cases
à cocher sur « marche » peuvent devenir des commandes réussies.
Dans un formulaire, plusieurs cases à cocher peuvent partager le même nom de commande.
Ainsi, par exemple, les cases à cocher permettent aux utilisateurs de sélectionner plusieurs
valeurs pour la même propriété. On utilise l'élément INPUT pour créer une commande de case à
cocher.
Les boutons « radio »
Les boutons « radio » sont analogues aux cases à cocher, à la différence que, quand plusieurs
boutons partage le même nom de commande, alors ils s'excluent mutuellement : quand l'un est
mis sur « marche », tous les autres avec le même nom se mettent sur « arrêt ». On utilise
l'élément INPUT pour créer une commande de bouton radio.
Si aucun des boutons radio, dans un jeu partageant le même 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 défini.
En raison des différences d'interprétation 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'élément
SELECT crée un menu, en conjonction avec les éléments OPTGROUP et OPTION.
La saisie de texte
Les auteurs peuvent créer deux types de commande qui permettent aux utilisateurs la saisie d'un
texte. L'élément INPUT crée une commande pour une saisie sur une seule ligne et l'élément
TEXTAREA crée une commande pour une saisie sur plusieurs lignes. Dans les deux cas, le texte
saisi devient la valeur courante de la commande.
La sélection d'un fichier
Ce type de commande permet à l'utilisateur de sélectionner un fichier de sorte que son contenu
puisse être soumis avec le formulaire. On utilise l'élément INPUT pour créer une commande de
sélection de fichier.
Les commandes cachées
Les auteurs peuvent créer des commandes qui ne sont pas restituées mais dont les valeurs sont
soumises avec le formulaire. Les auteurs utilisent en général 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'élément INPUT pour créer une
commande cachée.
Les commandes d'objets
Les auteurs peuvent insérer des objets génériques dans les formulaires de telle sorte que les
valeurs qui leur sont associées soient soumises en même temps que les autres commandes. On
utilise l'élément OBJECT pour créer une commande d'objet.
Les éléments utilisés pour créer les commandes apparaissent généralement dans un élément FORM, mais
ils peuvent aussi apparaître en dehors de la déclaration de l'élément FORM quand on les utilise pour
construire des interfaces utilisateurs. Ceci est abordé dans la section sur les événements intrinsèques.
Remarquez que les commandes en dehors d'un formulaire ne peuvent pas être des commandes réussies.
11.3 L'élément FORM
L'élément FORM agit comme conteneur pour les commandes. Il spécifie :
•
•
•
la disposition du formulaire (donnée par le contenu de l'élément) ;
le programme qui va manipuler le formulaire rempli puis soumis (l'attribut action). Le
programme récepteur doit être capable d'analyser les couples nom/valeur afin de les utiliser ;
la méthode selon laquelle les données de l'utilisateur seront envoyées au serveur (l'attribut
method) ;
68
•
l'encodage de caractères 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 empêcher que celui-ci n'entre des caractères 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 méthode HTTP "post".
...contenu du formulaire...
</form>
11.4 L'élément INPUT
11.4.1 Les types de commande créés par l'élément INPUT
Le type de commande défini par l'élément INPUT est fonction de la valeur de l'attribut type :
text
Crée une commande de saisie de texte sur une seule ligne.
password
Comme pour la valeur "text", mais le texte saisi est restitué de manière à dissimuler les
caractères (par exemple, une succession de caractères astérisques « * »). Ce type de commande
est souvent employé pour les entrées 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 développeurs d'applications devraient remarquer que ce mécanisme n'offre
qu'une protection légère. 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 accès granulaire au réseau.
checkbox
Crée une case à cocher.
radio
Crée un bouton « radio ».
submit
Crée un bouton de soumission.
image
Crée un bouton de soumission graphique. La valeur de l'attribut src spécifie l'URI de l'image qui
va décorer 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 coordonnées du clic sont passées au serveur. La coordonnée « x » se mesure en pixels à partir
de la gauche de l'image et la coordonnée « y » en pixels à partir du haut de l'image. Les données
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
coordonnées « x » et « y » respectivement.
Si le serveur entreprend diverses actions en fonction de l'endroit cliqué, l'utilisateur d'un
navigateur non-graphique sera désavantagé. Pour cette raison, les auteurs devraient considérer
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 contrôler le positionnement de ces boutons ;
Utiliser une image cliquable côté client en même temps que des scripts.
reset
Crée un bouton de réinitialisation.
button
Crée un bouton poussoir. Les agents utilisateurs devraient utiliser la valeur de l'attribut value
comme intitulé du bouton.
hidden
69
Crée une commande cachée.
file
Crée une commande de sélection 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 définit un formulaire simple qui permet à l'utilisateur de saisir ses
prénom, nom, adresse e-mail et genre. Quand on actionnera le bouton de soumission, le formulaire sera
transmis au programme spécifié 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 déclenchée quand l'événement "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 manière dont le contenu d'un fichier spécifié 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 spécifiant 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'élément BUTTON
Les boutons créés par l'élément BUTTON fonctionnent exactement comme ceux créés avec l'élément
INPUT, mais ils offrent des possibilités de restitution plus variées : l'élément BUTTON peut avoir un
contenu. Par exemple, un élément BUTTON qui contient une image fonctionne de la même façon et peut
avoir le même aspect qu'un élément INPUT dont l'attribut type a la valeur "image", sauf que le type
d'élément 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 précédent en créant des boutons de soumission et de
réinitialisation avec l'élément BUTTON au lieu de INPUT. Les boutons contiennent des images par
l'intermédiaire d'éléments 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'élément IMG.
11.6 Les éléments SELECT, OPTGROUP et OPTION
L'élément SELECT crée un menu. Chaque option offerte par le menu est représentée par un élément
OPTION. L'élément SELECT doit contenir au moins un élément OPTION.
L'élément OPTGROUP permet aux auteurs le regroupement logique des options. Cela est
particulièrement utile quand l'utilisateur doit effectuer un choix à partir d'une longue liste d'options ; les
groupes d'options apparentées sont plus facile à comprendre et à se remémorer qu'une seule longue liste
d'options. Dans HTML 4 tous les éléments OPTGROUP doivent être spécifiés directement dans un
élément SELECT (i.e., les groupes ne peuvent pas être imbriqués).
11.6.1 Les options présélectionnées
Zéro ou plusieurs options peuvent être présélectionnées pour l'utilisateur. Les agents utilisateurs devraient
déterminer les options qui sont préselectionnées comme suit :
•
si aucun élément OPTION ne possède un attribut selected, le comportement de l'agent utilisateur
vis-à-vis du choix de l'option sélectionnée initiale est indéfini. Remarque : Étant donné que les
implémentations existantes gèrent ce cas diversement, la spécification courante se démarque du
document RFC1866 ([RFC1866] section 8.1.3), qui déclare :
La première option est sélectionnée à l'initialisation, à moins que l'attribut
SELECTED ne soit présent sur l'un des éléments <OPTION>.
Comme le comportement des agents utilisateurs varie, les auteurs devraient s'assurer que chaque
menu inclut un élément OPTION présélectionné par défaut ;
•
•
si un élément OPTION possède un attribut selected, alors celui-ci devrait être présélectionné ;
si l'élément SELECT a un attribut multiple spécifié et plusieurs éléments OPTION avec l'attribut
selected spécifié, alors ceux-ci devraient tous être présélectionnés ;
71
•
il s'agit d'une erreur si plusieurs éléments OPTION ont un attribut selected alors que l'attribut
multiple n'est pas spécifié sur l'élément SELECT. Les agents utilisateurs peuvent varier dans la
prise en charge de cette erreur, mais ils ne devraient pas présélectionner 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'élément OPTION comme intitulé pour l'option. Si cet attribut n'est pas spécifié, l'agent utilisateur
devrait utiliser le contenu de l'élément OPTION.
L'attribut label de l'élément OPTGROUP spécifie l'intitulé d'un groupe d'options.
Dans cet exemple, nous créons un menu qui permet à l'utilisateur de sélectionner lequel parmi sept
composants logiciels choisir. Le premier et le deuxième composant sont présélectionnés mais ils peuvent
être désélectionnés par l'utilisateur. Les composants restants ne sont pas présélectionnés. L'attribut size
déclare que le menu ne devrait avoir que quatre rangées, même si l'utilisateur peut effectuer un choix
parmi sept options. La mise à disposition des autres options devrait se faire au moyen d'un mécanisme de
défilement.
L'élément SELECT est suivi par un bouton de soumission et un de réinitialisation.
<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 sélectionnées réussiront (en utilisant le nom de commande "selection_composant"). Si
aucune option n'est sélectionnée, la commande n'est pas réussie et ni le nom ni la valeur ne sont envoyés
au serveur à la soumission du formulaire. Remarquez que l'attribut value est spécifié, il détermine donc la
valeur initiale de la commande, sinon ce serait le contenu de l'élément.
Dans ce exemple, nous employons l'élément 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 représenterait 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 sélection à partir des
groupes d'options au moyen d'un menu hiérarchique ou d'un autre mécanisme qui reflète la structure des
options.
Un agent utilisateur graphique pourrait restituer ceci par :
Cette image montre un élément SELECT qui est restitué par un menu en cascade. L'intitulé supérieur du
menu affiche la valeur sélectionnée la nouvelle valeur (PortMaster 2, 3.7). Remarquez que chaque sousmenu affiche l'intitulé d'un élément OPTGROUP, ou d'un élément OPTION.
11.7 L'élément TEXTAREA
L'élément TEXTAREA crée une commande de saisie de texte multilignes. Les agents utilisateurs
devraient utiliser le contenu de cet élément comme valeur initiale et restituer initialement ce texte.
Cet exemple crée une commande TEXTAREA qui fait vingt rangées 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 réinitialisation.
<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 spécification de l'attribut readonly permet à l'auteur d'afficher un texte non modifiable dans la
commande TEXTAREA. Ce n'est pas la même chose que d'utiliser un texte balisé standard dans un
document, parce que la valeur de l'élément TEXTAREA est soumise avec le formulaire.
11.8 Les labels
Quelques commandes de formulaire ont des labels qui leur sont automatiquement associés (les boutons
poussoirs) tandis que la plupart d'entre elles en sont dépourvues (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 chaîne pour le label.
On utilise l'élément LABEL pour spécifier les labels des commandes qui n'ont pas de labels implicites.
11.8.1 L'élément LABEL
L'élément LABEL peut s'utiliser pour attacher des informations aux commandes. Chaque élément
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
même que celle de l'attribut id de l'élément de commande associé. On peut associer plusieurs éléments
LABEL à la même commande en créant plusieurs références via l'attribut for.
Cet exemple crée une table qui est utilisée pour aligner deux commandes de saisie de texte et les labels
qui leur sont associés. 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 précédent et y inclut des éléments 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'élément de commande doit se trouver à
l'intérieur de l'élément LABEL. Auquel cas, cet élément LABEL ne peut contenir qu'un seul élément de
commande. Le label en question peut se placer avant ou après la commande associée.
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 assurée par une table, le
label étant dans une cellule et la commande associée dans une autre cellule.
Quand un élément LABEL reçoit le focus, celui-ci communique ce focus à la commande qui lui est
associée.
11.9 Donner le focus à un élément
Dans un document HTML, un élément 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 spécifié par l'élément A
pour suivre le lien en question. De la même manière, les utilisateurs doivent donner le focus à l'élément
TEXTAREA pour y saisir un texte.
Il y a plusieurs façons de donner l'attention à un élément :
•
•
•
en désignant l'élément avec un dispositif de pointage ;
en navigant d'un élément à l'autre au clavier. L'auteur du document peut définir un ordre de
tabulation qui spécifie l'odre dans lequel les éléments vont recevoir l'attention quand l'utilisateur
navigue au clavier dans le document. Une fois sélectionné, l'élément peut être activé par une
certaine combinaison de touches ;
en sélectionnant l'élément au moyen d'une clé d'accès (appellée aussi parfois « raccourciclavier » ou « touche rapide »).
74
11.9.1 La navigation par tabulation
L'ordre de tabulation définit l'ordre dans lequel les éléments vont recevoir le focus lorsque l'utilisateur
navigue au clavier. L'ordre de tabulation peut comprendre les éléments imbriqués dans d'autres éléments.
Les éléments qui reçoivent l'attention devraient être parcourus par les agents utilisateurs en fonction des
règles suivantes :
1.
2.
3.
Ceux des éléments qui reconnaissent l'attribut tabindex et lui assignent une valeur positive sont
parcourus en premier. La navigation procède à partir de l'élément avec la plus petite valeur pour
l'attribut tabindex vers l'élément avec la valeur la plus élevée. Les valeurs ne se suivent pas
forcément ni doivent commencer à une valeur particulière. Les éléments dont les valeurs de
l'attribut tabindex sont identiques devraient être parcourus dans l'ordre de leur apparition dans le
flux de caractère ;
Ceux des éléments qui ne reconnaissent pas l'attribut tabindex, ou bien le reconnaissent et lui
assigne une valeur de "0", sont parcourus ensuite. Ces éléments sont parcourus dans l'ordre de
leur apparition dans le flux de caractères ;
Les éléments qui sont inactifs ne participent pas dans l'ordre de tabulation.
Les éléments suivants reconnaissent l'attribut tabindex : A, AREA, BUTTON, INPUT, OBJECT,
SELECT, et TEXTAREA.
Dans cet exemple, l'ordre de tabulation sera le suivant : l'élément BUTTON, les éléments INPUT en
ordre (remarquez que celui nommé "champs1" partage la même valeur d'attribut tabindex que le bouton,
mais "champs1" apparaît plus tard dans le flux de caractères) et finalemnt le lien créé par l'élément 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 données 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 clés d'accès
La pression de la clé d'accès assignée à un élément lui donne le focus. L'action qui survient quand
l'élément reçoit l'attention est fonction de l'élément. Par exemple, quand l'utilisateur active un lien défini
par l'élément A, l'agent utilisateur suit en général 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 éléments suivants reconnaissent l'attribut accesskey : A, AREA, BUTTON, INPUT, LABEL et
LEGEND, ainsi que TEXTAREA.
75
Cet exemple assigne la clé d'accès « U » au label associé à une commande INPUT. Le fait d'appuyer sur
la clé d'accès donne l'attention au label, qui à son tour la transmet à la commande associée. 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'accès à un lien défini par l'élément A. La frappe de cette clé
d'accès conduit l'utilisateur vers un autre document, ici une table des matières.
<p><a accesskey="T"
rel="contents"
href="http://quelquepart.com/specification/table_des_matieres.html">
Table des matières</a>
L'invocation des clés d'accès est fonction du système sous-jacent. Par exemple, sur les machines faisant
tourner le système MS Windows, on devra en général presser la touche « alt » en plus de la clé d'accès.
Sur les systèmes Apple, ce sera la touche « cmd » qu'il faudra appuyer en plus de la clé d'accès.
La restitution des clés d'accès est fonction de l'agent utilisateur. Nous recommandons aux auteurs
d'inclure la clé d'accès dans le texte du label ou partout où la clé d'accès doit s'appliquer. Les agents
utilisateurs devraient restituer la valeur d'une clé d'accès de sorte à mettre en évidence son rôle et à la
distinguer des autres caractères (par exemple, en la soulignant).
11.10 Les commandes inactives et en lecture seule
Dans les situations pour lesquelles les entrées de l'utilisateur sont soit indésirables, 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 données obligatoires. De la même manière, l'auteur peut vouloir inclure un bout de texte en
lecture seule, qui doit être soumis comme valeur en même temps que le formulaire. Les sections
suivantes décrivent les commandes inactives et celles en lecture seule.
11.10.1 Les commandes inactives
Quand il est présent, l'attribut disabled produit l'effet suivant sur un élément :
•
•
•
les commandes inactives ne reçoivent pas le focus ;
les commandes inactives sont sautées au cours d'une navigation par tabulation ;
les commandes inactives ne peuvent pas réussir.
Les éléments suivants reconnaissent l'attribut disabled : BUTTON, INPUT, OPTGROUP, OPTION,
SELECT, et TEXTAREA.
Cet attribut est hérité mais les déclarations locales surclassent la valeur héritée.
La manière dont les éléments inactifs sont restitutés 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'élément INPUT est inactif. C'est pourquoi il ne peut pas recevoir l'entrée 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 spécifie si la commande peut être modifiée ou non par l'utilisateur.
Quand il est présent, l'attribut readonly produit les effets suivants sur l'élément :
76
•
•
•
les éléments en lecture seule reçoivent le focus mais les utilisateurs ne peuvent pas les modifier ;
les éléments en lecture seule sont inclus dans la navigation par tabulation ;
les éléments en lecture seule peuvent réussir.
Les éléments suivants reconnaissent l'attribut readonly : INPUT et TEXTAREA.
La manière dont les éléments en lecture seule sont restitués 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 manière dont les agents utilisateurs soumettent les données de
formulaire aux agents de traitement des formulaires.
11.11.1 La méthode de soumission du formulaire
L'attribut method de l'élément FORM spécifie la méthode HTTP employée pour envoyer le formulaire à
l'agent de traitement. Cet attribut admet deux valeurs :
•
•
get : avec la méthode HTTP "get", l'ensemble des donnés de formulaire est rajouté à l'URI
spécifié par l'attribut action (avec un caractère point d'interrogation « ? » comme séparateur) et
ce nouvel URI est envoyé à l'agent de traitement ;
post : avec la méthode HTTP "post", l'ensemble des donnés de formulaire est inclus dans le
corps de la requête HTTP et envoyé à l'agent de traitement.
On devrait employer la méthode "get" quand le formulaire est idempotent (i.e., ne produit aucun effet
secondaire). Nombre de recherches dans les bases de données n'ont pas d'effets secondaires visibles et
font des applications idéales pour la méthode "get".
Si le service associé au traitement d'un formulaire entraîne des effets secondaires (par exemple, si le
formulaire modifie une base de données ou l'abonnement à un service), on devrait alors employer la
méthode "post".
Remarque : La méthode "get" restreint les valeurs du jeu des données du formulaire [ndt. form data set]
aux caractères ASCII. Seule la méthode "post" (avec l'attribut enctype="multipart/form-data") est
spécifiée comme recouvrant le jeu de caractères [ISO10646] entier.
11.11.2 Les commandes réussies
Une commande réussie est « valable » pour une soumission. Toute les commandes réussies ont leur nom
de commande accouplé à leur valeur courante et font partie du jeu des données du formulaire qui est
soumis. Une commande réussie doit être définie dans un élément FORM et doit avoir un nom de
commande.
Cependant :
•
•
•
•
•
•
•
les commandes qui sont inactives ne peuvent pas réussir ;
si le formulaire contient plusieurs boutons de soumission, seul le bouton de soumission actif
réussira ;
toutes les cases à cocher sur « marche » peuvent réussir ;
pour les boutons radio qui partagent la même valeur d'attribut name, seul le bouton radio sur
« marche » peut réussir ;
pour les menus, le nom de commande est donné par l'élément SELECT et les valeurs sont
fournies par les éléments OPTION. Seules les options sélectionnées peuvent réussir. Quand
aucune option n'est sélectionnée, la commande ne réussit pas et ni le nom ni aucune valeur ne
sont soumis au serveur avec le formulaire ;
la valeur courante d'une sélection 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
données du formulaire. Les contenus des fichiers sont conditionnés en fonction du type de
contenu du formulaire ;
la valeur courante d'une commande d'objet est déterminée par l'implémentatin 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 obligés de la traiter comme une commande réussie.
Les commandes cachées et les commandes qui ne sont pas restituées en raison de l'effet d'une feuille de
style peuvent quand même réussir. Par exemple :
<p>
<input type="password" style="display:none"
name="mot_de_passe_invisible"
value="mon_mot_de_passe">
</form>
cela entraînera 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 données du formulaire
Quand l'utilisateur soumet le formulaire (par exemple, en activant un bouton de soumission), l'agent
utilisateur le traite de la manière suivante.
Première étape : identifier les commandes réussies
Deuxième étape : construire le jeu des données du formulaire
Le jeu des données du formulaire est la séquence des couples nom de commande/valeur courante
construite à partir des commandes réussies.
Troisième étape : coder le jeu des données du formulaire
Le jeu des données du formulaire est alors codé en fonction du type de contenu spécifié par l'attribut
enctype de l'élément FORM.
Quatrième étape : soumettre le jeu des données du formulaire codé
Enfin, les données codées sont envoyées à l'agent de traitement désigné par l'attribut action, en utilisant le
protocole spécifié par l'attribut method.
Cette spécification ne définit pas toutes les méthodes de soumissions valides ni les types de contenu qui
peuvent être utilisés avec les formulaires. Cependant, les agents utilisateur HTML 4 doivent obéir 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 caractère « ? » et enfin le jeu
des données 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 scénario, les données
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 spécifié par l'attribut enctype.
Pour toute autre valeur de l'attribut action ou method, le comportement n'est pas spécifié.
Les agents utilisateurs devraient restituer les réponses des transactions HTTP "get" et "post".
11.11.4 Les types de contenu du formulaire
L'attribut enctype de l'élément FORM spécifie le type de contenu utilisé pour coder le jeu des données du
formulaire en vue de sa soumission au serveur. Les agents utilisateurs doivent reconnaître les types de
contenu listés ci-dessous. Le comportement pour d'autres types de contenu n'est pas spécifié.
.
78
"application/x-www-form-urlencoded"
C'est le type de contenu par défaut. Les formulaires soumis avec ce type de contenu doivent être codés
commes suit :
1.
2.
Les noms de commandes et les valeurs sont échappées. Les caractères « espace » sont remplacés
par des caractères plus « + » puis les caractères réservés sont échappés comme décrit dans le
document [RFC1738], section 2.2 : Les caractères non-alphanumériques sont remplacés par une
séquence de la forme « %HH », un caractère pourcentage et deux chiffres hexadécimaux qui
représentent le code ASCII du caractère en question. Les sauts de ligne sont représentés par des
couples de caractères "CR LF" (i.e., "%0D%0A") ;
Les couples nom/valeur des commandes sont listés selon leur ordre d'apparition dans le
document. Le nom est séparé de la valeur par un caractère égal « = », et les couples nom/valeur
sont séparés les uns des autres par des caractères esperluettes « & ».
"multipart/form-data"
Le type de contenu "application/x-www-form-urlencoded" est inefficace pour l'envoi de grandes
quantités de données binaires ou de texte contenant des caractères non-ASCII. C'est le type de contenu
"multipart/form-data" qui devrait être utilisé pour la soumission de formulaires contenant des fichiers, des
données non-ASCII et des données binaires.
Un message "multipart/form-data" contient une succession de parties, chacune d'elles représentant une
commande réussie. Les parties sont envoyées à l'agent de traitement dans le même ordre selon lequel les
commandes correspondantes apparaissent dans le flux du document. Les bornes de ces parties ne
devraient pas survenir au milieu des données cette spécification ne définit pas la façon dont cela est fait.
Comme pour tous les types MIME en plusieurs parties, chaque partie possède en option un en-tête
« Content-Type » dont la valeur par défaut est "text/plain". Les agents utilisateurs devraient produire l'entête « Content-Type », accompagné d'un paramètre "charset".
Chaque partie est censée contenir :
1.
2.
un en-tête « Content-Disposition » dont la valeur est "form-data" ;
un attribut name spécifiant le nom de commande de la commande correspondante. Les noms de
commande, qui sont codés originellement dans des jeux de caractères non-ASCII, peuvent être
codés à l'aide de la méthode indiquée dans le document [RFC2045].
Ainsi, par exemple, pour une commande nommée "macommande", la partie correspondante serait
spécifiée par :
Content-Disposition: form-data; name="macommande"
Comme pour toutes les transmissions MIME, on utilise les caractères "CR LF" (i.e., "%0D%0A") pour
séparer les lignes de données.
Chaque partie peut être codée et l'en-tête « Content-Transfer-Encoding » peut être fourni, si la valeur de
cette partie n'est pas conforme à l'encodage par défaut (7BIT) (voir le document [RFC2045], section 6)
Si le contenu d'un fichier est soumis avec un formulaire, l'entrée du fichier devrait être identifiée par le
type de contenu adéquat (par exemple, "application/octet-stream"). Si plusieurs fichiers doivent être
retournés en résultat d'une seule entrée de formulaire, ils devraient être retournés 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 spécifié avec le paramètre "filename" dans un en-tête 'Content-Disposition: form-data'
ou, au cas où il y aurait plusieurs fichiers, dans un en-tête 'Content-Disposition: file' de la sous-partie. Si
le nom de fichier du système d'exploitation du client n'est pas en US-ASCII, le nom de fichier pourrait
être approximé ou codé en utilisant la méthode décrite dans le document [RFC2045]. Cela est commode
pour les cas où, par exemple, les fichiers téléchargés vers le serveur pourraient contenir des références 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 sélectionne le fichier textuel "fichier1.txt",
l'agent utilisateur pourrait envoyer en retour les données 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 sélectionné 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 gèrent les scripts
1. L'élément SCRIPT
2. La spécification du langage de script
Le langage de script par défaut
La déclaration locale du langage de script
L'appel des éléments HTML à partir d'un script
3. Les événements intrinsèques
4. La modification dynamique des documents
80
3.
La conception des documents pour les agents utilisateurs qui ne gèrent pas les scripts
1. L'élément NOSCRIPT
2. La dissimulation des données de script aux agents utilisateurs
12.1 Introduction aux scripts
Un script côté client est un programme pouvant accompagner le document HTML ou bien y être
directement incorporé. Le programme s'exécute 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 indépendante du
langage de script.
Les scripts offrent aux auteurs le moyen d'accroître les documents HTML de manière à les rendre très
réactifs et interactifs. Par exemple :
•
•
•
•
des scripts peuvent être évalués au chargement du document et modifier le contenu de celui-ci
dynamiquement ;
des scripts peuvent accompagner un formulaire et en traiter les entrées 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 données entrées appartiennent à un éventail
prédéterminé de valeurs, que les champs soient cohérents les uns avec les autres, etc. ;
des scripts peuvent être déclenchés par les événements qui affectent le document, tels que le
chargement, le déchargement, l'attention d'un élément [ndt. element focus], le mouvement de la
souris, etc. ;
des scripts peuvent être attachés aux commandes d'un formulaire (par exemple, les boutons) et
produire les éléments d'une interface utilisateur graphique.
Il existe deux types de script que les auteurs peuvent attacher à un document HTML :
•
•
ceux qui sont exécutés une seule fois quand le document est chargé par l'agent utilisateur. Les
scripts qui apparaissent à l'intérieur d'un élément SCRIPT s'exécutent quand le document est
chargé. Pour les agents utilisateurs qui ne peuvent pas ou ne pourront pas gérer les scripts,
l'auteur peut inclure un contenu de remplacement via l'élément NOSCRIPT ;
ceux qui sont exécutés toutes les fois où un événement particulier se produit. Ces scripts peuvent
être assignés à un certain nombre d'éléments au moyen des attributs d'événement intrinsèque.
12.2 La conception des documents pour les agents utilisateurs qui gèrent les scripts
Les sections suivantes abordent les questions concernant les agents utilisateurs qui gèrent les scripts.
12.2.1 L'élément SCRIPT
L'élément SCRIPT installe un script dans le document. Cet élément peut apparaître un nombre
quelconque de fois dans les éléments HEAD ou BODY d'un document HTML.
Le script peut être défini en contenu de l'élément SCRIPT ou dans un fichier externe. Si l'attribut src n'est
pas spécifié, alors l'agent utilisateur doit interpréter le contenu de l'élément comme étant le script. Si
l'attribut src a une valeur d'URI, alors l'agent utilisateur doit ignorer le le contenu de l'élément et ramener
le script désigné par l'URI. Remarquez que l'attribut charset se réfère à l'encodage de caractères du script
désigné par l'attribut src ; cela ne concerne pas le contenu de l'élément SCRIPT.
Les scripts sont évalués par les moteurs de script, qui doivent être connus de l'agent utilisateur.
La syntaxe des données du script dépend du langage de script.
12.2.2 La spécification du langage de script
Comme HTML ne dépend 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 déclaration par défaut, soit par une déclaration locale.
81
Le langage de script par défaut
Les auteurs devraient spécifier le langage de script par défaut pour tous les scripts d'un document, en
incluant la déclaration META suivante dans l'élément HEAD :
<meta http-equiv="Content-Script-Type" content="un_certain_type">
dans laquelle la valeur "un_certain_type" représente 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 déclaration META, le langage par défaut peut être fixé par un en-tête HTTP
« Content-Script-Type ».
Content-Script-Type: un_certain_type
dans lequel la valeur "un_certain_type" représente encore le type de contenu nommant le langage de
script.
Les agents utilisateurs devraient déterminer le langage de script par défaut du document selon les étapes
suivantes (de la priorité la plus grande à la plus faible) :
1.
2.
Si d'éventuelles déclarations META spécifient une valeur "Content-Script-Type", c'est la
dernière dans le flux de caractères qui détermine le langage de script par défaut ;
Sinon, si d'éventuels en-têtes HTTP spécifie "Content-Script-Type", c'est le dernier dans le flux
de caractères qui détermine le langage de script par défaut.
Les documents, qui ne spécifient pas de langage de script par défaut et qui contiennent des éléments
spécifiant un script d'événement intrinsèque, sont erronés. Les agents utilisateurs peuvent toujours
essayer d'interpréter les scripts spécifiés incorrectement mais ils ne sont pas obligés de le faire. Les outils
d'édition devraient générer une indication de langage de script par défaut pour aider les auteurs à créer
des documents corrects.
La déclaration locale du langage de script
On doit spécifier l'attribut type pour chaque instance de l'élément SCRIPT dans le document. La valeur
de l'attribut type d'un élément SCRIPT surclasse le langage de script par défaut de cet élément.
Dans cet exemple, nous déclarons le langage de script par défaut comme étant "text/tcl". Nous incluons
dans l'en-tête du document un élément 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 élément 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 éléments HTML à partir d'un script
Chaque langage de script obéit à ses propres règles pour appeler des objets HTML à partir d'un script.
Cette spécification ne définit pas de mécanisme standard pour appeler les objets HTML.
Néanmoins, les scripts devraient se référer à un élément en fonction du nom qui lui est assigné. Les
moteurs de scripts devraient observer les règles de préséance suivantes dans l'identification d'un élément :
l'attribut name est prioritaire sur l'attribut id, quand tous les deux sont spécifiés. Sinon, on peut utiliser
l'un ou l'autre.
82
12.2.3 Les événements intrinsèques
Liste des attributs dont la valeur est un script gestionnaire d'événement
onload
L'événement onload se produit quand l'agent utilisateur finit de charger une fenêtre ou bien tous
les cadres dans un jeu d'encadrement FRAMESET. Cet attribut peut s'utiliser avec les éléments
BODY et FRAMESET.
onunload
L'événement onunload se produit quand l'agent utilisateur retire le document d'une fenêtre ou
d'un cadre. Cet attribut peut s'utiliser avec les éléments BODY et FRAMESET.
onclick
L'événement onclick se produit quand le bouton du dispositif de pointage est cliqué au-dessus
d'un élément. Cet attribut peut s'utiliser avec la plupart des éléments.
ondblclick
L'événement ondblclick se produit quand le bouton du dispositif de pointage est double-cliqué
au-dessus d'un élément. Cet attribut peut s'utiliser avec la plupart des éléments.
onmousedown
L'événement onmousedown se produit quand le bouton du dispositif de pointage est appuyé audessus d'un élément. Cet attribut peut s'utiliser avec la plupart des éléments.
onmouseup
L'événement onmouseup se produit quand le bouton du dispositif de pointage est relâché audessus d'un élément. Cet attribut peut s'utiliser avec la plupart des éléments.
onmouseover
L'événement onmouseover se produit quand le dispositif de pointage est déplacé sur un élément.
Cet attribut peut s'utiliser avec la plupart des éléments.
onmousemove
L'événement onmousemove se produit quand le dispositif de pointage est déplacé alors qu'il est
au-dessus d'un élément. Cet attribut peut s'utiliser avec la plupart des éléments.
onmouseout
L'événement onmouseout se produit quand le dispositif de pointabe est déplacé en dehors d'un
élément. Cet attribut peut s'utiliser avec la plupart des éléments.
onfocus
L'événement onfocus se produit quand un élément reçoit 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
éléments suivants : A, AREA, LABEL, INPUT, SELECT, TEXTAREA et BUTTON.
onblur
L'événement onblur se produit quand un élément 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 mêmes
éléments que l'événement onfocus.
onkeypress
L'événement onkeypress se produit quand une touche est pressée puis relâchée au-dessus d'un
onkeydown
L'événement onkeydown se produit quand une touche est gardée appuyée au-dessus d'un
onkeyup
L'événement onkeyup se produit quand une touche est relâchée au-dessus d'un élément. Cet
attribut peut s'utiliser avec la plupart des éléments.
onsubmit
L'événement onsubmit se produit quand un formulaire est soumis. Il ne s'applique qu'à l'élément
FORM.
onreset
L'événement onreset se produit quand un formulaire est réinitialisé. Il ne s'applique qu'à
l'élément FORM.
onselect
L'événement onselect se produit quand l'utilisateur sélectionne un certain texte dans un champs
textuel. Cet attribut peut s'utiliser avec les éléments INPUT et TEXTAREA.
onchange
83
L'événement onchange se produit quand une commande perd l'attention de saisie et quand sa
valeur a été modifiée depuis l'instant où elle avait reçu l'attention. Cet attribut s'applique aux
éléments suivants : INPUT, SELECT et TEXTAREA.
Il est possible d'associer une action à un certain nombre d'événements, qui se produisent quand
l'utilisateur interagit avec l'agent utilisateur. Chacun des « événements intrinsèques » listés ci-dessus
prend comme valeur un script. Le script s'exécute toutes les fois où l'événement se produit pour cet
élément. La syntaxe des données de script dépend du langage de script.
Les éléments de commande, à savoir INPUT, SELECT, BUTTON, TEXTAREA et LABEL, répondent
tous à certains événements intrinsèques. Quand ces éléments 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 même avec un serveur quand ils sont activés.
Les exemples suivants montrent quelques commandes et comportements d'interface utilisateur possibles
réalisés à partir d'événements intrinsèques.
Dans l'exemple suivant, la commande nommée "nomUtilisateur" est un champ obligatoire. Quand
l'utilisateur quitte le champ, l'événement 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'événement 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 même 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'événement [ndt. event binding] à l'intérieur 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 fenêtre plus intéressant :
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'exécutent quand le document est chargé sont capables de modifier dynamiquement le
contenu du document. Ces capacités sont fonction du langage de script en question (par exemple, la
déclaration "document.write" dans le modèle objet de HTML reconnue par certains éditeurs de logiciels).
On peut modéliser la modification dynamique d'un document comme suit :
1.
2.
3.
Tous les éléments SCRIPT sont évalués dans l'ordre au fur et à mesure du chargement du
document ;
Toutes les structures de script à l'intérieur d'un élément SCRIPT donné, qui génèrent des valeurs
SGML de type CDATA, sont évaluées. Leur texte généré combiné est inséré dans le document à
la place de l'élément SCRIPT ;
Les données générées de type CDATA sont ré-évaluées.
Les documents HTML sont contraints de se conformer au DTD HTML avant comme après le traitement
de chaque élément SCRIPT.
L'exemple suivant illustre la manière 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 même 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 gèrent pas les scripts
Les sections suivantes expliquent comment les auteurs peuvent créer des documents qui fonctionnent
auprès des agents utilisateurs ne reconnaissant pas les scripts.
12.3.1 L'élément NOSCRIPT
L'élément NOSCRIPT permet aux auteurs de fournir un contenu de remplacement quand un script n'est
pas exécuté. Le contenu de l'élément 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 reconnaît pas le langage de script invoqué par un élément SCRIPT apparu
plus tôt dans le document.
85
Les agents utilisateurs qui ne gèrent pas les scripts côté client doivent restituer le contenu de cet élément.
Dans l'exemple suivant, l'agent utilisateur qui interprète l'élément SCRIPT va inclure certaines données
créées dynamiquement dans le document. Si l'agent utilisateur ne reconnaît pas les scripts, l'utilisateur
peut toujours obtenir les données au travers d'un lien.
...un script Tcl qui insère des données...
</script>
<noscript>
<p>Accéder aux <a href="http://quelquepart.com/data">données.</a>
</ noscript >
12.3.2 La dissimulation des données de script aux agents utilisateurs
Les agents utilisateurs qui ne reconnaissent pas l'élément SCRIPT vont vraisemblablement restituer le
contenu de cet élément comme un texte. Certains moteurs de script, dont ceux des langages JavaScript,
VBScript et Tcl, autorisent la délimitation des déclarations d'un script par un commentaire SGML. Les
agents utilisateurs, qui ne reconnaissent pas l'élément 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 exécuté.
Une autre solution à ce problème, 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 chaîne «  » à l'analyseur JavaScript.

</script>
Commenter les scripts en VBScript
En VBScript, le caractère guillemet simple fait que le reste de la ligne courante est traité comme un
commentaire. On peut dont l'utiliser pour dissimuler la chaîne « --> » à VBScript, par exemple :
<script type="text/vbscript">
<!-Sub foo()
...
End Sub
' -->
</script>
Commenter les scripts en TCL
En Tcl, le caractère dièse « # » annonce le reste de la ligne comme un commentaire :

</script>
86
13 Index des éléments
Légende : Optionnel, Interdit, Vide, Déconseillé, DTD Transitoire, DTD avec jeu d'enCadrement
Nom
Balise
Balise
Vide Déc. DTD Description
ouvrante fermante
A
ancre
ABBR
abréviation (e.g., WWW, HTTP, etc.)
ACRONYM
acronyme
ADDRESS
informations sur l'auteur
APPLET
D
AREA
I
T
V
applet Java
aire d'image cliquable côté client
B
style de texte gras
BASE
I
V
BASEFONT
I
V
URI de base du document
D
T
taille de la police de base
BDO
inactivation de l'algorithme I18N BiDi
BIG
style de texte agrandi
BLOCKQUOTE
citation longue
BODY
BR
O
O
I
corps du document
V
saut de ligne forcé
BUTTON
bouton poussoir
CAPTION
légende de la table
CENTER
D
T
raccourci pour DIV align=center
CITE
citation
CODE
fragment de code
COL
I
V
colonne de table
COLGROUP
O
groupe de colonnes de table
DD
O
description de la définition
DEL
texte supprimé [ndt. deleted]
DFN
définition d'instance
DIR
D
T
liste d'annuaire [ndt. directory list]
DIV
conteneur de langue/style générique
DL
liste de définitions [ndt. definition list]
DT
O
terme de définition [ndt. definition term]
EM
emphase
FIELDSET
groupe de commandes de formulaire
FONT
D
T
FORM
FRAME
FRAMESET
changement local à la police
formulaire interactif
I
V
C
sous-fenêtre
C
subdivision de fenêtre
H1
titrage
H2
titrage
H3
titrage
H4
titrage
H5
titrage
87
H6
HEAD
titrage
O
HR
HTML
O
I
O
en-tête du document
V
règle horizontale
O
élément racine du document
I
style de texte italique
IFRAME
T
sous-fenêtre en-ligne
IMG
I
V
image incoporée
INPUT
I
V
commande de formulaire
INS
texte inséré
ISINDEX
I
V
D
T
invite sur une seule ligne
KBD
texte à entrer par l'utilisateur
LABEL
texte du label d'un champs de formulaire
LEGEND
légende du jeu de champs
LI
O
LINK
I
item de liste
V
lien indépendant du média
MAP
image cliquable côté client
MENU
D
META
I
T
V
liste de menus
métainformations génériques
NOFRAMES
C
conteneur du contenu de remplacement pour
une restitution sans cadres
NOSCRIPT
conteneur du contenu de remplacement pour
une restitution sans scripts
OBJECT
objet incorporé générique
OL
liste ordonnée [ndt. ordered list]
OPTGROUP
groupe d'options
OPTION
O
option sélectionnable
P
O
paragraphe
PARAM
I
V
valeur de propriété nommée
PRE
texte préformaté
Q
brè citation en-ligne
S
D
T
style de texte barré
SAMP
exemple de sortie d'un programme, scripts,
etc.
SCRIPT
déclarations de script
SELECT
sélecteur d'option
SMALL
style de texte diminué
SPAN
conteneur de langue/style générique
STRIKE
D
T
texte barré
STRONG
forte emphase
STYLE
indication de style
SUB
écriture en lettres inférieures
SUP
écriture en lettres supérieures
TABLE
TBODY
O
O
corps de table
88
TD
cellule de données d'une table [ndt. table data
cell]
O
TEXTAREA
champs de texte multiligne
TFOOT
O
pied de table
TH
O
cellule de rubrique d'une table [ndt. table
header cell]
THEAD
O
en-tête de table
TITLE
titre du document
TR
O
rangée de table
style de texte téléimprimeur ou à chasse fixe
[ndt. monospaced]
TT
U
D
T
style de texte souligné
UL
liste non-ordonnée
VAR
instance d'une variable ou argument de
programme
14 Index des attributs
Légende : Déconseillé, DTD Transitoire, DTD avec jeu d'enCadrement
Nom
abbr
Éléments
concernés
TD, TH
accept-charset FORM
Valeur par
défaut
Type
Déc. DTD Commentaires
%Text;
#IMPLIED
abréviation pour
cellule
de
rubrique
%Charsets;
#IMPLIED
liste des jeux de
caractères
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
caractère
pour
l'accessibilité
action
FORM
%URI;
#REQUIRED
gestionnaire de
formulaire côté
serveur
align
CAPTION
%CAlign;
#IMPLIED
D
T
relativement à la
table
align
APPLET,
IFRAME,
IMG, %IAlign;
INPUT, OBJECT
#IMPLIED
D
T
alignement
vertical
horizontal
align
LEGEND
%LAlign;
#IMPLIED
D
T
relativement au
jeu de champs
align
TABLE
%TAlign;
#IMPLIED
D
T
position de la
table relativement
à la fenêtre
89
ou
align
HR
(left | center |
#IMPLIED
right)
D
T
align
DIV, H1, H2, H3, (left | center |
#IMPLIED
H4, H5, H6, P
right | justify)
D
T
alignement,
alignement
texte
align
COL,
COLGROUP,
(left | center |
TBODY,
TD, right | justify | #IMPLIED
TFOOT,
TH, char)
THEAD, TR
alink
BODY
%Color;
#IMPLIED
D
T
couleur des liens
sélectionnés
alt
APPLET
%Text;
#IMPLIED
D
T
brève description
alt
AREA, IMG
%Text;
#REQUIRED
brève description
alt
INPUT
CDATA
#IMPLIED
brève description
archive
APPLET
CDATA
#IMPLIED
archive
OBJECT
CDATA
#IMPLIED
liste
d'URI
séparés par des
espaces
#IMPLIED
liste des rubriques
concernées
séparées par des
virgules
axis
TD, TH
CDATA
D
T
du
liste
d'archives
séparées par des
virgules
background
BODY
%URI;
#IMPLIED
D
T
mosaïque
de
textures
pour
l'arrière-plan du
document
bgcolor
TABLE
%Color;
#IMPLIED
D
T
couleur d'arrièreplan des cellules
bgcolor
TR
%Color;
#IMPLIED
D
T
couleur d'arrièreplan des rangées
bgcolor
TD, TH
%Color;
#IMPLIED
D
T
couleur d'arrièreplan des cellules
bgcolor
BODY
%Color;
#IMPLIED
D
T
couleur d'arrièreplan du document
border
TABLE
%Pixels;
#IMPLIED
border
IMG, OBJECT
%Pixels;
#IMPLIED
cellpadding
TABLE
%Length;
#IMPLIED
espacement
l'intérieur
cellules
cellspacing
TABLE
%Length;
#IMPLIED
espacement entre
les cellules
char
COL,
COLGROUP,
TBODY,
TD, %Character;
TFOOT,
TH,
THEAD, TR
#IMPLIED
caractère
d'alignement, e.g.
char=':'
90
épaisseur
contour de
table
D
T
du
la
épaisseur de la
bordure du lien
à
des
charoff
COL,
COLGROUP,
TBODY,
TD, %Length;
TFOOT,
TH,
THEAD, TR
#IMPLIED
décalage
caractère
d'alignement
charset
A, LINK, SCRIPT %Charset;
#IMPLIED
encodage
de
caractères de la
ressource reliée
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 éléments,
sauf
BASE,
BASEFONT,
HEAD,
HTML, CDATA
META, PARAM,
SCRIPT, STYLE
et TITLE
#IMPLIED
liste de classes
séparées par des
espaces
classid
OBJECT
%URI;
#IMPLIED
identifie
une
implémentation
clear
BR
(left | all | right |
none
none)
D
T
contrôle
l'écoulement
texte
code
APPLET
CDATA
D
T
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
T
URI de
optionnel
l'applet
base
pour
type de contenu
de l'attribut code
D
T
couleur du texte
C
liste de longueurs,
par défaut : 100%
(1 colonne)
nombre
de
colonnes
couvertes par la
cellule
1
CDATA
du
D
T
espacement interitems réduit
informations
associées
coords
AREA
%Coords;
#IMPLIED
liste de longueurs
séparées par des
virgules
coords
A
%Coords;
#IMPLIED
à utiliser avec les
images cliquables
côté client
data
OBJECT
%URI;
#IMPLIED
référence
aux
données de l'objet
datetime
DEL, INS
%Datetime;
#IMPLIED
date et heure du
changement
declare
OBJECT
(declare)
#IMPLIED
déclare
mais
n'instancie pas le
drapeau
#IMPLIED
l'agent utilisateur
peut
différer
l'exécution
du
script
defer
SCRIPT
(defer)
dir
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)
1
headers
TD, TH
IDREFS
#IMPLIED
height
IFRAME
%Length;
#IMPLIED
height
TD, TH
%Length;
#IMPLIED
height
IMG, OBJECT
%Length;
#IMPLIED
(ltr | rtl)
92
D
T
C
liste de noms de
police séparés par
des virgules
bordures de cadre
ou non ?
liste des id des
cellules
de
rubrique
D
T
hauteur du cadre
T
hauteur
cellule
surclasser
de
la
la
hauteur
height
APPLET
%Length;
#REQUIRED
href
A, AREA, LINK
%URI;
#IMPLIED
URI
de
la
ressource reliée
href
BASE
%URI;
#IMPLIED
URI qui fait
office d'URI de
base
hreflang
A, LINK
%LanguageCode; #IMPLIED
hspace
APPLET,
OBJECT
http-equiv
META
IMG,
D
T
hauteur initiale
code de langue
D
T
gouttière
horizontale
%Pixels;
#IMPLIED
NAME
#IMPLIED
nom de l'en-tête
de réponse HTTP
id
sauf
BASE,
HEAD,
HTML, ID
META, SCRIPT,
STYLE, TITLE
#IMPLIED
identifiant unique
au document
ismap
IMG, INPUT
(ismap)
#IMPLIED
utiliser une image
cliquable
côté
serveur
label
OPTION
%Text;
#IMPLIED
à utiliser dans les
menus
hiérarchiques
label
OPTGROUP
%Text;
#REQUIRED
à utiliser dans les
menus
hiérarchiques
lang
sauf
APPLET,
BASE,
BASEFONT, BR,
%LanguageCode; #IMPLIED
FRAME,
FRAMESET,
IFRAME,
PARAM, SCRIPT
language
SCRIPT
CDATA
#IMPLIED
D
T
nom de langage
de script prédéfini
link
BODY
%Color;
#IMPLIED
D
T
couleur des liens
code de langue
#IMPLIED
lien vers une
description
longue
(en
complément de
l'attribut alt)
#IMPLIED
C
lien vers une
description
longue
(en
complément de
l'attribut title)
marginheight FRAME, IFRAME %Pixels;
#IMPLIED
C
marges verticales
en pixels
marginwidth
FRAME, IFRAME %Pixels;
#IMPLIED
C
marges
horizontales
pixels
en
maxlength
INPUT
#IMPLIED
nombre
de
longdesc
longdesc
IMG
%URI;
FRAME, IFRAME %URI;
NUMBER
93
caractères maxi
pour les champs
de texte
media
STYLE
%MediaDesc;
#IMPLIED
prévu pour ces
médias
media
LINK
%MediaDesc;
#IMPLIED
pour restitution
sur ces médias
method
FORM
(GET | POST)
GET
méthode HTTP
utilisée
pour
soumettre
le
formulaire
multiple
SELECT
(multiple)
#IMPLIED
sélection simple
par défaut
name
BUTTON,
TEXTAREA
CDATA
#IMPLIED
D
T
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
A
CDATA
#IMPLIED
extrêmité du lien
nommée
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 propriété
name
META
NAME
#IMPLIED
nom
des
métainformations
nohref
AREA
(nohref)
#IMPLIED
cette région est
inactive
autoriser
l'utilisateur
à
redimensionner le
cadre ?
C
nom du cadre
pour le ciblage
noresize
FRAME
(noresize)
#IMPLIED
noshade
HR
(noshade)
#IMPLIED
D
T
nowrap
TD, TH
(nowrap)
#IMPLIED
D
T
suppression de la
césure
object
APPLET
CDATA
#IMPLIED
D
T
fichier
d'applet
sérialisé
onblur
A,
AREA,
BUTTON, INPUT,
%Script;
LABEL, SELECT,
TEXTAREA
#IMPLIED
94
C
du
pour
l'élément a perdu
l'attention
onchange
INPUT, SELECT,
%Script;
TEXTAREA
#IMPLIED
la
valeur
l'élément
changé
onclick
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
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'élément a reçu
l'attention
onkeydown
sauf
APPLET,
BASE,
BASEFONT,
BDO, BR, FONT,
FRAME,
%Script;
FRAMESET,
HEAD,
HTML,
IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE
#IMPLIED
une touche
appuyée
onkeypress
sauf
APPLET,
BASE,
BASEFONT,
BDO, BR, FONT,
FRAME,
%Script;
FRAMESET,
HEAD,
HTML,
IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE
#IMPLIED
une touche a été
pressée
puis
relâchée
onkeyup
sauf
APPLET, %Script;
BASE,
#IMPLIED
une touche
relâchée
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é
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é
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é
déplacé
à
l'intérieur
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é
déplacé en dehors
sauf
APPLET,
BASE,
BASEFONT,
onmouseover BDO, BR, FONT, %Script;
FRAME,
FRAMESET,
HEAD,
HTML,
IFRAME,
#IMPLIED
le bouton d'un
pointeur a été
déplacé sur
onmouseout
96
C
tous les cadres
ont été chargés
onload
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE
onmouseup
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é
relâché
onreset
FORM
%Script;
#IMPLIED
le formulaire a été
réinitialisé
onselect
INPUT,
TEXTAREA
%Script;
#IMPLIED
un texte a été
sélectionné
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
métainformations
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
régressif
lien
rows
FRAMESET
%MultiLengths;
#IMPLIED
rows
TEXTAREA
NUMBER
#REQUIRED
rowspan
TD, TH
NUMBER
1
nombre
de
rangées couvertes
par la cellule
rules
TABLE
%TRules;
#IMPLIED
règles
rangées
colonnes
scheme
META
CDATA
#IMPLIED
selectionner une
forme de contenu
scope
TD, TH
%Scope;
#IMPLIED
portée
cellules
rubrique
97
C
D
T
C
tous les cadres
ont été retirés
message d'invite
liste de longueurs,
par défaut : 100%
(1 rangée)
entre
et
des
de
FRAME, IFRAME (yes | no | auto)
auto
selected
OPTION
(selected)
#IMPLIED
shape
AREA
%Shape;
rect
contrôle
l'interprétation
des coordonnées
shape
A
%Shape;
rect
à utiliser avec les
images cliquables
côté client
size
HR
%Pixels;
#IMPLIED
D
T
size
FONT
CDATA
#IMPLIED
D
T
size
INPUT
CDATA
#IMPLIED
size
BASEFONT
CDATA
#REQUIRED
size
SELECT
NUMBER
#IMPLIED
rangées visibles
1
les attributs de
l'élément
COL
affectent
"n"
colonnes
span
COL
NUMBER
C
barres
de
défilement ou non
scrolling
[+|-]entier,
size="+1",
size="4"
e.g.
propre à chaque
type de champs
D
T
taille de police de
base pour les
éléments FONT
span
COLGROUP
NUMBER
1
nombre
de
colonnes
par
défaut 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
sauf
BASE,
BASEFONT,
HEAD,
HTML, %StyleSheet;
META, PARAM,
SCRIPT, STYLE,
TITLE
#IMPLIED
indications
de
style associées
summary
TABLE
#IMPLIED
objet/structure
pour sortie vocale
tabindex
A,
AREA,
NUMBER
BUTTON, INPUT,
#IMPLIED
position
l'ordre
%Text;
98
C
D
T
source du contenu
du cadre
numéro
commençant
séquence
la
dans
de
OBJECT,
SELECT,
TEXTAREA
tabulation
target
A, AREA, BASE,
%FrameTarget;
FORM, LINK
#IMPLIED
text
BODY
#IMPLIED
title
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;
D
T
restituer dans ce
cadre
T
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
D
T
style de l'item de
liste
type
OL
%OLStyle;
#IMPLIED
D
T
style
numérotation
type
UL
%ULStyle;
#IMPLIED
D
T
style de puce
type
BUTTON
(button | submit |
submit
reset)
utiliser
comme
bouton
de
formulaire
usemap
IMG,
OBJECT
%URI;
#IMPLIED
utiliser une image
cliquable
côté
client
valign
COL,
COLGROUP,
(top | middle |
#IMPLIED
TBODY,
TD,
bottom | baseline)
TFOOT,
TH,
THEAD, TR
alignement
vertical dans les
cellules
value
INPUT
CDATA
#IMPLIED
spécifier pour les
boutons radio et
les cases à cocher
value
OPTION
CDATA
#IMPLIED
par défaut,
contenu
l'élément
le
de
value
PARAM
CDATA
#IMPLIED
valeur
de
INPUT,
99
de
propriété
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
T
une constante
vlink
BODY
%Color;
#IMPLIED
D
T
couleur des liens
visités
vspace
APPLET,
OBJECT
%Pixels;
#IMPLIED
D
T
gouttière verticale
width
HR
%Length;
#IMPLIED
D
T
width
IFRAME
%Length;
#IMPLIED
width
IMG, OBJECT
%Length;
#IMPLIED
surclasser
largeur
width
TABLE
%Length;
#IMPLIED
largeur de la table
width
TD, TH
%Length;
#IMPLIED
D
T
largeur
cellule
width
APPLET
%Length;
#REQUIRED
D
T
largeur initiale
width
COL
%MultiLength;
#IMPLIED
spécification de la
largeur
de
colonne
width
COLGROUP
%MultiLength;
#IMPLIED
largeur par défaut
des
éléments
COL contenus
width
PRE
NUMBER
#IMPLIED
IMG,
100
D
T
réinitialise
le
numéro dans la
séquence
comment
interpréter
valeur
T
D
T
la
largeur du cadre
la
de
la
Deuxième partie : Javascript
Table des matières
1.
2.
3.
4.
5.
6.
7.
Présentation de Javascript
Littéraux et constantes
Objets et fonctions
Tableaux
Opérateurs, expressions et instructions
Accès aux éléments de la page HTML à partir d'un script
DOM (Document Object Model)
1 Présentation 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 débutants de réaliser leurs premières pages Web sous une forme particulièrement
attrayante et fonctionnelle. Il existe une multitude de petits programmes JavaScript accessibles
gratuitement sur le Web et que l'on peut intégrer dans ses propres pages HTML. Par exemple aux
adresses http://www.editeurjavascript.com/ et http://www.dynamicdrive.com/ Un programme JavaScript
est intégré dans une page HTML téléchargée à partir d'un serveur HTTP, puis il est exécuté sur le poste
client. Pour des raisons de sécurité é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 liés aux
valeurs plutôt 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
déclarées avec un type spécifique : une valeur de n'importe quel type peut leur être attribuée. L'indication
du type est mémorisé au niveau des valeurs : à chaque valeur est attaché un champ de bits supplémentaire
indiquant son type.
Un programme Javascript est décrit au sein de l'élément SCRIPT. Un script peut-être placé dans l'en-tête
de la page HTML (dans l'élément HEAD) ou dans son corps (dans l'élément BODY). Dans l'exemple cidessus, le script est placé dans le corps de la page HTML et exécuté au moment où la page est téléchargée
dans le navigateur Web. La variable entier est déclarée, mais non encore définie (elle n'a pas de
101
valeur, aucune zone mémoire ne lui a été allouée). Sa valeur est de type undefined. La variable i est
déclarée, définie et initialisée dans la même instruction. Elle est de type entier. La variable accentué
n'est pas déclarée, mais directement définie et initialisée avec la valeur de i. La variable chaîne est de
type chaîne. Puisque les variables ne sont pas statiquement typées, il n'existe pas d'identificateurs pour
désigner les types. Tout comme Java, Javascript est sensible à la casse et on peut utiliser les caractères
accentués dans les noms des variables. Il existe en Javascript un certain nombre d'"objets" prédéfinis.
L'objet document représente le document HTML dans lequel est inséré le script. Comme en Java, on
peut envoyer un message à un objet pour lui demander de rendre un service. Lorsque l'interprète
Javascript (contenu dans le navigateur Web) interprète la ligne document.write(i); il affiche la
valeur de i dans la page Web. La chaîne passée en argument à write peut être du code HTML qui sera
interprété de la même façon que si ce code HTML était écrit en dehors de l'élément <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 déclarée avec
le mot-clé var n'est utilisable que dans le bloc où elle est déclarée
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 structurés, on peut définir 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'interprétation.
1.2 Les diverses formes de JavaScript
Javascript est une marque déposée par Netscape depuis 1997. La version Microsoft de Javascript, utilisée
par le navigateur Internet Explorer, s'apelle JScript.
Les problèmes 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 développe à tous les cas de figures envisageables s'il veut que
son document puisse être accessible le plus largement possible.
Un script dont l'idée 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 différentes situations. Malheureusement, les
outils de debugging JavaScript sont rudimentaires, essentiellement en raison du typage dynamique qui ne
102
permet pas de contrôler si les variables sont utilisées correctement. Pour détecter les erreurs d'exécution
d'un programme JavaScript :
•
dans un navigateur Mozilla, on peut utiliser la Console JavaScript (menu Outils). Contrairement
aux compilateurs qui peuvent détecter en une seule passe plusieurs erreurs, l'interprète
JavaScript s'interrompt à la première erreur !!!
•
utiliser
une
extension
de
navigateur
comme
FireBug
pour
https://addons.mozilla.org/fr/firefox/addon/1843
utiliser un débogueur intégré dans un IDE (NetBeans à partir de la version 6.5)
•
FireFox :
1.3 Vers une normalisation ?
Face aux problèmes que nous venons d'évoquer, on peut espérer 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é proposée en juin 2001. Une autre standardisation ISO
(International Organization of Standardization) ayant pour code ISO/IEC-16262 a été définie. Mais ne
vous réjouissez pas trop vite... La version JavaScript utilisée 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 très bas (en gros, l'intersection des fonctionnalités offertes par les deux navigateurs), ce qui leur
confère un intérêt de portabilité, mais passablement douteux sur le plan des fonctionnalités (C'est
pourquoi, la plupart du temps les créateurs préfèrent adapter leurs pages aux deux navigateurs les plus
utilisés en prévoyant les particularités de chacun). Conscients de cette évidence, Netscape et Microsoft
ont d'ores et déjà proposé une mise à jour du standard. Mais la procédure n'en est qu'à ses débuts 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 obsolète lorsqu'il entrera en vigueur
1.4 A quel moment un script s'exécute-t-il ?
Un programme JavaScript inclus dans une page HTML dans un élément <script> s'exécute au moment de
l'interprétation de la page HTML : le navigateur lit l'ensemble du code HTML et concatène en mémoire
les sources des différents scripts, puis il passe la main à l'interprète JavaScript qui exécute le tout. Enfin
le navigateur ré-interprète le code HTML dans lequel ont été insérées les valeurs renvoyées par les
scripts.
Les scripts situés dans l'en-tête de la page servent en général à définir des variables et des fonctions qui
seront utilisées dans des scripts figurant dans le corps de la page HTML. Un script peut ajouter dans le
document du code HTML dépendant de plusieurs facteurs tels le type de configuration matérielle et/ou
logicielle du client (navigateur, plugins,...), le contenu éventuel de certains cookies, la date, l'heure du
moment présent, etc. A chaque endroit où le contenu du document devra s'adapter à ces facteurs, un script
sera placé et exécuté juste après 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 façon différente suivant
le type de navigateur (le détail de ce script sera compréhensible dans la suite de ce cours).
103
Rappelons que les caractères spéciaux (guillemets, lettres accentuées, chevrons) figurant à l'intérieur
d'une chaîne sont codés par une suite de caractères compris entre & et ; Par exemple < est codé par <
lt signifie less than)
Un script peut également être situé dans un élément autre que <script>. Dans ce cas, le source JavaScript
est une chaîne de caractères qui est la valeur d'un attribut représentant un événement émis par l'élément
HTML. La liste des événements HTML et des éléments 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'élément <h1> qui émet un événement onclick quand on clique dessus. Le
gestionnaire d'événement est un appel à la fonction prédéfinie alert qui affiche une fenêtre popup :
On peut aussi exécuter 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
après javascript !!)
104
Au lieu de placer les instructions JavaScript directement dans un élément <script>, on peut utiliser
l'attribut src de l'élément <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 préciser dans chacun des documents HTML le nom du fichier dont il
s'agit. Cela réduit l'espace disque serveur nécessaire pour stocker les fichiers HTML et rend
toute modification plus simple et plus sûre ;
Pour ce qui est du temps de chargement des parties communes, il n'interviendra que lors de la
première 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,
différent 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 compressés. La référence à ces fichiers se
fera par : <script archive="../../Archives_JS/CoursJS.jar" src="Sces_Chap1.js"></script>. L'archive est
placée dans le cache du navigateur lors du téléchargement de la première page qui l'utilise, puis chaque
script référencé par l'attribut src est extrait de l'archive également à la première 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 défini 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 référencer toute variable pourvu qu'elle soit définie au plus haut niveau et donc qu'elle
soit visible. Les scripts peuvent être placés n'importe où dans la page HTML. Les références en avant
seront bien traitées : on peut utiliser une fonction g à l'intérieur d'une fonction f et la fonction g être
décrite après la fonction f. Tous les éléments <script> d'une même page constituent un seul et même
programme JavaScript.
105
2 Littéraux et constantes
2.1 Identificateurs
Rappelons que JavaScript est sensible à la casse. Il ignore tout caractère d'espacement (blanc, tabulation,
retour à la ligne, etc.) apparaissant entre les entités lexicales. Ainsi, pour une meilleure lisibilité du source
vous pouvez insérer des blancs par exemple, de part et d'autre d'opérateurs, indenter des portions
constituant des blocs ou couper une ligne trop longue. Par contre une entité lexicale ne peut en aucun cas
contenir un caractère d'espacement sous peine de la transformer en deux entités lexicales et donc,
vraisemblablement de voir apparaître une erreur d'interprétation. Les identificateurs servent à nommer
des variables ou des fonctions. La syntaxe d'un identificateur impose en première place un caractère
alphabétique (majuscule ou minuscule, accentué ou non) ou $ (dollar) ou _ (souligné). Les caractères
suivants peuvent être n'importe quelle combinaison de ces mêmes caractères plus des chiffres.
2.2 Littéraux
Les littéraux peuvent être de type numérique (entiers ou réels), de type chaînes de caractères ou de type
booléen. Ces trois types correspondent aux types primitifs de JavaScript
De façon générale, les littéraux numériques sont écrits en décimal. Le langage accepte néanmoins des
littéraux entiers en représentation octale ou hexadécimale. Les premiers, dont les chiffres sont compris
entre 0 et 7, ont pour caractéristique de débuter par le chiffre "0". Les seconds débutent par les caractères
"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 réels peuvent avoir une représentation 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 décimale est le point et non la virgule,
quant au signe d'exponentiation, il peut être indifféremment en majuscule ou minuscule.
Les chaînes littérales sont encadrées par des quotes simples ( ' ) ou doubles ( " ). Si à l'intérieur d'une
chaîne encadrée par un de ces caractères, ce même caractère doit apparaître, il sera précédé du caractère
"antislash" ( \ ).
Les littéraux 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 même ligne et /* */ pour
commenter un bloc.
2.4 Caractères spéciaux
JavaScript autorise la représentation de caractères particuliers à l'intérieur d'une chaîne de caractères.
Pour pouvoir obtenir ces représentations, on utilise le caractère backslash (\) suivi d'un autre caractère.
Nous avons vu que JavaScript dispose de deux caractères différents pour limiter les chaînes, ce qui est
bien agréable lorsque la chaîne elle-même nécessite l'utilisation d'un de ces caractères, comme par
exemple dans "L'apprentissage de JavaScript est aisé", ou encore ' Le professeur a dit : "Étudiez
sérieusement !" '. Mais nous rencontrerons de nombreuses situations où cela ne suffira plus. Dans ce cas,
nous pourrons utiliser les caractères \' 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 caractères spéciaux ainsi que leur signification :
Séquence Caractère représenté
\b
\n
\f
\t
\r
\\
\'
\"
\•••
\x••
\u••••
Backspace - retour arrière d'un caractère
Newline - Saut de ligne
Form feed - Nouvelle page
Tab - Tabulation
Return - Retour chariot
Backslash - Le caractère backslash lui-même
Single quote - Apostrophe
Double quote - Guillemets
N'importe quel caractère dont ••• représente le code octal (3 chiffres)
N'importe quel caractère dont •• représente le code hexadécimal (2 chiffres)
N'importe quel caractère dont •••• représente le code Unicode (4 chiffres hexa)
Il est à noter que pour tout caractère autre que ceux indiqués ci-dessus, le fait qu'il apparaisse précédé
d'un backslash ne change absolument rien. Le backslash est ignoré et le caractère apparaît normalement.
Pour connaître l'unicode d'un caractère spécial, on peut utiliser l'utilitaire charmap de Windows :
L'utilisation des unicodes dans les navigateurs récents est préférable 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 récents acceptent les caractères accentués (bien que les
normes HTML indiquent que les caractères doivent être codés 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 dîner sera prévu à 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
même, si on utilise des caractères accentués dans le source des scripts, on n'est pas assuré que celuici sera accepté par d'anciennes versions de l'interprète JavaScript.
2.5 Littéraux et valeurs booléennes
Il existe deux littéraux booléens : true et false. Compte tenu du typage dynamique, certaines valeurs
numériques ou de type chaîne peuvent être converties en booléens. Le nombre 0 est converti en false.
Toutes les autres valeurs numériques sont converties en true. De même, toutes les chaînes de caractères
sont converties en true.
107
2.6 les constantes
Infinity est une constante numérique qui représente +infini et qui est affichée lorsque le résultat d'un
calcul dépasse la valeur 1.7976931348623157E+10308
-Infinity est la valeur négative correspondante.
La constante NaN (Not A Number) a la même signification qu'en Java .
La constante null permet de représenter une valeur différente de toute autre, signifiant ainsi qu'une
variable possédant cette valeur n'a pas reçu d'affectation.
La constante undefined est plus générale que null : c'est une valeur qui est retournée (en cas de
demande d'écriture ou par utilisation de l'opérateur typeof par exemple) pour une variable définie mais
non affectée, ou non définie ou pour une propriété non définie 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 nommées (des propriétés).
Ces valeurs peuvent être d'un type primitif nombre, chaîne ou booléen, un type objet ou…une fonction.
En effet, JavaScript est un langage fonctionnel, c'est-à-dire un langage dans lequel les fonctions sont
des "citoyens de première espèce". Cela signifie qu'une fonction peut être vue comme une donnée. Ainsi,
on peut passer une fonction en argument à une autre fonction et une fonction peut retourner une fonction.
Une fonction dont un des paramètres est une fonction ou qui renvoie une fonction est appelée une
fonctionnelle (comme en LISP). Un objet n'est donc pas une structure "à la C", dont les champs sont fixés
une bonne fois pour toutes à la compilation, mais plutôt une liste de propriétés attachée à un symbole.
Comme en LISP, on peut ajouter ou supprimer une propriété à un objet en cours d'exécution du
programme.
Comme en Java, un objet est une donnée allouée dynamiquement en mémoire avec l'opérateur new.
Voici un exemple de création d'une instance de la classe prédéfinie Object, à laquelle on ajoute
dynamiquement des propriétés. La valeur de la propriété c de l'objet monObjet est la fonction
prédéfinie alert. L'opérateur delete supprime la propriété c de l'objet monObjet.
Le fait que JavaScript soit un langage fonctionnel peut paraître anecdotique, mais c'est fondamental, car
cela permet de définir implicitement des pointeurs sur fonctions et ainsi des fonctions de type callback.
Cette possibilité est à la base de la technologie récente AJAX (http://www128.ibm.com/developerworks/library/j-ajax1/?ca=dgr-lnxw01Ajax). Une méthode en JavaScript est donc
une fonction qui est la valeur d'une propriété d'une certaine classe. Mais on peut aussi définir 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 même zone mémoire.
JavaScript utilise donc les concepts d'instance et de "classe", ainsi que d'envoi de message. Cependant,
JavaScript ne définit ni la notion d'héritage 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 américains.
Pour embrouiller encore plus les idées, de nombreux auteurs appellent les "classes" des Objets !!!! Il
existe un certains nombre de "classes" prédéfinies dans JavaScript (pour une liste complète, consultez
http://www.devguru.com/technologies/javascript/home.asp)
3.2 Construction d'un objet
Si on veut créer plusieurs objets ayant les mêmes propriétés, mais avec des valeurs différentes, on définit
une fonction constructeur, qui est une fonction comme une autre. La pseudo variable this est utilisée à
l'intérieur du constructeur pour désigner l'objet que l'on est en train de construire. Il n'y a donc pas de
définition de classe comme en Java, on définit un constructeur qui est ensuite appelé avec l'opérateur new
pour définir une nouvelle instance. Une méthode est définie comme une propriété ordinaire, dont la
valeur est une fonction. Pour créer une fonction, on utilise le mot clé function. Dans l'exemple suivant
on définit une "classe" Personne avec deux propriétés de type chaîne, une propriété numérique et une
propriété fonctionnelle, nommée afficheToi, qui est l'unique méthode de cette classe. Puis on créé
deux instances de cette classe et on envoie un message à chacune d'elles avec le sélecteur
afficheToi(). Enfin, nous avons retenu que le typage est dynamique. Rien n'interdit donc d'affecter la
valeur 0 à la propriété afficheToi qui devient de type numérique et la classe Personne n'a plus
aucune méthode. Le message toi.afficheToi() provoque donc une erreur. L'interprète indique que
la valeur de toi.afficheToi n'est pas une fonction. Vous commencez à comprendre pourquoi
JavaScript est réputé être un langage difficile à déboguer ☺
110
3.3 Destruction d'un objet
JavaScript comme Java gère automatiquement la mémoire grâce à un Garbage Collector. Si aucune
variable ne pointe sur un objet, celui-ci sera éliminé de la mémoire au prochain nettoyage. Il est possible
de demander explicitement la destruction d'un objet avec l'opérateur delete.
3.4 En JavaScript, toutes les données 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 numérique en une instance de Number et vice-versa se
fait par un mécanisme 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 chaîne. Tous les arguments représentent les paramètres formels de la fonction, sauf le dernier qui
représente le corps de la fonction, qui peut contenir un nombre quelconque d'instructions JavaScript,
séparées par des point-virgule. On peut ainsi créer dynamiquement des fonctions, en assemblant des
morceaux de code source :
111
3.5 Passage d'argument à une fonction
JavaScript distingue deux catégories de types : les types simples, qui ne contiennent qu'une seule valeur,
et les types composés, qui contiennent plusieurs valeurs. Les type simples sont les types primitifs et les
classes Number, Boolean et String. Les types composés sont les autres classes (y compris la classe
Array permettant de définir des tableaux)
Comme en C et en Java, tous les arguments passés à une fonction sont passés par valeur, mais comme en
Java, les variables de type composé sont des pointeurs. Si une telle variable est modifiée à l'intérieur de la
fonction, la modification est conservée après l'appel à cette fonction.
3.6 Variables et méthodes de classe
Pour implanter les notions de variable de classe et de méthode de classe, JavaScript introduit la notion de
prototype. L'expression <nom de classe> prototype <nom de propriété> = <valeur> permet de
définir une propriété de classe (qui sera un attribut ou une méthode selon le type de <valeur>. Cependant
pour accéder à une variable de classe ou une méthode 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 définie 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 éléments d'un tableau peuvent être de types distincts. Tout tableau est en réalité une liste de
pointeurs. On peut donc ajouter, supprimer des éléments d'un tableau en cours d'exécution. La contrepartie de cette souplesse est evidemment une perte d'efficacité par rapport aux "vrais" tableaux, implantés
en mémoire sous forme d'éléments tous de même taille et contigus.
Les méthodes push et pop de la classe Array permettent de gérer un tableau comme une pile, le
sommet de la pile étant le dernier élément du tableau.
Les tableaux acceptent également des index symboliques, ils ressemblent alors plus aux collections de
type Map de Java. Les dépassements de tableau ne provoquent pas d'erreur d'interprétation comme le
montre l'exemple suivant :
4.2 les méthodes de la classe Array
Voici quelques exemples d'appels de méthodes de la classe Array :
113
5 Opérateurs, expressions et instructions
5.1 Opérateurs
La plupart des opérateurs sont identiques à ceux de Java. Ils ont les mêmes priorités relatives et les
mêmes règles d'associativité. Comme en Java et contrairement à C++ et C#, il est impossible de créer de
nouveaux opérateurs en JavaScript. L'opérateur delete déjà rencontré et inconnu en Java permet de
supprimer un objet ou une propriété d'objet. L'opérateur unaire void s'applique à une valeur de type
quelconque et renvoie systèmatiquement la valeur undefined, ce qui pallie le fait que le littéral
undefined n'existe pas et ne peut donc pas figurer explicitement dans le source. Enfin l'opérateur
unaire typeof retourne une chaîne représentant le type de son argument. On peut l'utiliser avec ou sans
parenthèses. 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 séparateur 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 séparateur, par exemple un
passage à la ligne :
114
L'instruction switch est plus puissante que celle de Java. Le test et les valeurs des différents cas peuvent
être des chaînes et même 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 propriétés et les méthodes d'une classe sans avoir à répéter le nom de la classe en préfixe.
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 préciser les bornes :
6 Accès aux éléments de la page HTML à partir d'un script
6.1 Nommer les éléments de la page
Les éléments d'une page doivent être nommés 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 élément :
<h1 id="montitre">Titre de ma page </h1>
Il est important que les auteurs de pages suivent une méthode rigoureuse pour choisir le nom des
éléments, ce qui assurera entre autres que tous les noms soient différents. Dans les versions de HTML
antérieures à 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 même
valeur.
115
Window et Document sont deux classes prédéfinies de JavaScript. Lorsque le navigateur affiche une
page dans une fenêtre, il créé une instance de Window nommée window (avec une minuscule). La
classe Window possède une propriété nommée document dont la valeur est une instance de la classe
Document et qui représente la page HTML. La classe Document possède une propriété nommée
forms qui est un tableau d'objets de la classe Form. Ceux-ci représentent les formulaires contenus dans
le corps de la page (élément <form>). Les formulaires sont numérotés à partir de 0 en commençant par le
formulaire le plus haut dans la page. La classe Form possède une propriété nommée elements qui est
un tableau d'objets de la classe Object. Ceux-ci représentent les éléments du formulaire (boutons,
boîtes à cocher, etc). La classe Document possède également une propriété nommée images qui est un
tableau d'objets de la classe Image, qui représentent les images contenus dans la page (élément <img>).
Par exemple document.forms[0].elements[0] désigne le premier élément apparaissant dans le
premier formulaire du document HTML
6.2 Dynamic HTML
Un script peut accéder à un élément de la page soit en utilisant son nom (attribut id), soit en indiquant sa
position dans un tableau prédéfini.
DHTML (Dynamic HTML) désigne la possibilité de modifier le contenu et même la structure d'une page
HTML après son chargement sur le poste client grâce à 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 définit deux styles dans l'en-tête de la page. Le style un est affecté à un
élément <h1> grâce à son attribut class. Puis un script attaché à cet élément permet de changer son
style à la suite d'un clic grâce à son attribut className dont la valeur est le nom du style de l'élément
(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 problème de DHTML est qu'il n'est pas normalisé. Certains objets , attributs, etc sont reconnus par les
interprètes JavaScript de certains navigateurs et pas par les autres.
Le DOM est une norme du W3C (http://www.w3.org/DOM/) permettant de définir une interface standard
entre les scripts d'une page HTML et le contenu de cette page, chargé en mémoire sous la forme d'un
arbre. L'objectif est le même que celui de DHTML : pourvoir modifier le contenu d'une page HTML
après que celle-ci ait été chargée sur le poste client. DOM est décrite très précisément par un ensemble
d'interfaces qui doivent être implantées d'une façon ou d'une autre dans les navigateurs
(http://www.w3.org/TR/DOM-Level-2-Core/core.html)
La norme DOM possède plusieurs niveaux. Les niveaux 1 et 2 sont en grande partie disponibles dans IE
et complètement dans Mozilla/Netscape.
Pour accéder à un élément de la page, on utilise la méthode getElementById de l'interface
Document qui renvoie une instance de type Node. Node est une interface décrivant toutes les
opérations que l'on peut faire sur un des noeuds de l'arbre DOM. Par exemple la méthode
appendChild de l'interface Node permet d'ajouter un sous-élément à un élément existant. Ainsi, DOM
permet non seulement de modifier les contenus d'un document HTML, mais aussi de modifier
complètement la structure de ce document (supprimer, insérer des éléments) par manipulation de l'arbre.
Dans l'exemple suivant, on insère dans un élément <h1> le nom de l'utilisateur saisi par un alert.
117

HTML et JavaScript HTML et JavaScript

Transcription

Documents pareils

Cette carte interactive, réalisée par la chaîne de radio

Bruno Vargas et Didier Debord

18-attribut du sujet

www.exercices.fr.st Pour chaque adjectif, indiquez sa

DNA Script - Réseau Entreprendre Sud Ile-de

écriture WMK - La Maternelle De Wendy

Participe passé

VENDS RAQUETTES HEAD

ATELIER DE CALLIGRAPHIE Origine du Script Création de l

DUT SRC - Webchronique