Htm Let Javascript

117

Click here to load reader

description

Htm Let Javascript

Transcript of Htm Let Javascript

Page 1: Htm Let Javascript

1

ESIEA 4ième année

Module CAAOOModule CAAOOModule CAAOOModule CAAOO

HTML et JavaScriptHTML et JavaScriptHTML et JavaScriptHTML et JavaScript

par

Michel FuttersackMichel FuttersackMichel FuttersackMichel 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

Page 2: Htm Let Javascript

2

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. Introduction à HTML 4 2. La structure globale d'un document 3. Le texte 4. Les listes 5. Les tables 6. Les liens 7. Les objets, les images et les applets 8. Les feuilles de style 9. L'alignement, le style des polices et les règles horizontales 10. Les cadres 11. Les formulaires 12. Les scripts 13. Index des éléments 14. Index des attributs

1 Introduction à HTML 4

Sommaire

1. Qu'est-ce que le World Wide Web ? 1. Introduction aux URI 2. Les identifiants de fragment 3. Les URI relatifs

2. Qu'est-ce que HTML ? 1. Une brève histoire de HTML

3. 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

4. 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) ;

Page 3: Htm Let Javascript

3

2. des protocoles, pour accéder à des ressources nommées dont on possède l'adresse (par exemple, HTTP)

3. 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. le nom du protocole utilisé pour accéder à la ressource ; 2. le nom de la machine hébergeant la ressource ; 3. 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).

Page 4: Htm Let Javascript

4

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.

Page 5: Htm Let Javascript

5

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.

Page 6: Htm Let Javascript

6

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).

Page 7: Htm Let Javascript

7

2 La structure globale d'un document HTML

Sommaire

1. Introduction à la structure d'un document HTML 2. Les informations de version HTML 3. 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

4. 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. une ligne contenant les informations de version HTML ; 2. une section en-tête déclarative (délimitée par l'élément HEAD) ; 3. 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.

Page 8: Htm Let Javascript

8

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.

Page 9: Htm Let Javascript

9

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" "http://www.w3.org/TR/html4/strict.dtd"> <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">

Page 10: Htm Let Javascript

10

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 : <!-- Pour les américanophones --> <meta name="keywords" lang="en-us" content="vacation, Greece, sunshine"> <!-- Pour les anglophones--> <meta name="keywords" lang="en" content="holiday, Greece, sunshine"> <!-- Pour les francophones --> <meta name="keywords" lang="fr" content="vacances, Gr&egrave;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">

Page 11: Htm Let Javascript

11

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"> ... corps du document... </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" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Une étude de la dynamique de la population</title> <style type="text/css"> body { background: white; color: black} a:link { color: red } a:visited { color: maroon } a:active { color: fuchsia } </style> </head> <body> ... corps du document... </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 : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Une étude de la dynamique de la population</title> <LINK rel="stylesheet" type="text/css" href="stylemalin.css"> </head> <body> ... corps du document... </body> </html>

Page 12: Htm Let Javascript

12

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. <!-- Messages en anglais --> <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> <!-- Messages en français --> <p><span id="msg1" class="info" lang="fr">Variable d&eacute;clar&eacute;e deux fois</span> <p><span id="msg2" class="warning" lang="fr">Variable ind&eacute;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 d'afficher les messages informatifs en vert, ceux d'avertissement en jaune et ceux d'erreur en rouge : 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> <style type="text/css"> pre.exemple { background : green } </style> </head>

Page 13: Htm Let Javascript

13

<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 : <!-- Exemple de données issues de la base client : --> <!-- Nom : Stéphane Boyera, Tél. : (212) 555-1212, E-mail : [email protected] --> <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>

Page 14: Htm Let Javascript

14

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> <style type="text/css"> 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>

Page 15: Htm Let Javascript

15

3 Le texte

Sommaire

1. Les blancs 2. 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 3. 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 (&#x0020;) • « tabulation » ASCII (&#x0009;) • « saut de page » ASCII (&#x000C;) • « espace sans chasse » (&#x200B;)

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 :

Page 16: Htm Let Javascript

16

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&eacute;t&eacute; Nationale des Chemins de Fer"> SNCF </abbr> <abbr lang="es" title="Do&ntilde;a">Do&ntilde;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

Page 17: Htm Let Javascript

17

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) &#x000D; », un « saut de ligne (LF) &#x000A; » 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.

Page 18: Htm Let Javascript

18

4 Les listes

Sommaire

1. Introduction aux listes 2. Les listes non-ordonnées (UL), les listes ordonnées (OL) et les items de liste (LI) 3. 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&eacute;es ; <li>des informations ordonn&eacute;es ; <li>des d&eacute;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. Mélanger tous les ingrédients secs ; 2. Y verser les ingrédients humides ; 3. Remuer pendant 10 minutes ; 4. 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&ucirc;t moindre</strong> <dd>La nouvelle version de ce produit co&ucirc;te infiniment moins que la pr&eacute;c&eacute;dente ! <dt><strong>Encore plus facile &agrave; utiliser</strong> <dd>Nous avons apport&eacute; des modifications au produit qui facilitent &agrave; l'extr&ecirc;me son utilisation ! <dt><strong>Sans danger pour les petits</strong> <dd>Vous pouvez laisser vos enfants dans une pi&egrave;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) :

Page 19: Htm Let Javascript

19

Les ingrédients :

• 100 g de farine • 10 g de sucre • 1 tasse d'eau • 2 œufs • sel, poivre

La marche à suivre :

1. Mélanger tous les ingrédients secs ; 2. Y verser les ingrédients humides ; 3. Remuer pendant 10 minutes ; 4. 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 : EXEMPLE DÉCONSEILLÉ : <ul> <li> ... niveau 1, numéro 1... <ol> <li> ... niveau 2, numéro 1... <li> ... niveau 2, numéro 2... <ol start="10"> <li> ... niveau 3, numéro 10... </OL> <li> ... niveau 2, numéro 1... </ol> <li> ... niveau 1, numéro 2... </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>

Page 20: Htm Let Javascript

20

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 &eacute;motive qui peut &eacute;voluer en <em>nerd</em> ou en <em>geek</em> <dt>Hacker <dd>Un programmeur f&ucirc;t&eacute; <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 &eacute;quidistant de tous les poinst &agrave; la surface d'une sph&egrave;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) :

Page 21: Htm Let Javascript

21

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. <style type="text/css"> 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 &eacute;motive qui peut &eacute;voluer en un <em>nerd</em> ou un <em>geek</em> <dt>Hacker <dd>Un programmeur f&ucirc;t&eacute; <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

Page 22: Htm Let Javascript

22

5 Les tables Sommaire

1. Introduction aux tables 2. 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 3. 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.

Page 23: Htm Let Javascript

23

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&acirc;les et les femelles)."> <caption><em>Une table test avec des cellules fusionn&eacute;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&acirc;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'en-

tê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.

Page 24: Htm Let Javascript

24

• 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>

Page 25: Htm Let Javascript

25

<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> ...première rangée des données du bloc 2... <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étro-compatibilité. 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> ...première rangée des données du bloc 1... <tr> ...seconde rangée des données du bloc 2... <tbody> <tr> ...première rangée des données du bloc 2... <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.

Page 26: Htm Let Javascript

26

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. l'attribut span de l'élément (valeur par défaut "1") spécifie le nombre de colonnes dans le groupe ;

2. 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&eacute;sente le nombre de tasses de caf&eacute;

Page 27: Htm Let Javascript

27

consomm&eacute;es par chaque s&eacute;nateur, le type de caf&eacute; (d&eacute;caff&eacute;in&eacute; ou normal), et s'il est sucr&eacute; ou non."> <caption>Les tasses de caf&eacute; consomm&eacute;es par chaque s&eacute;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 non-visuels 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&eacute;sente le nombre de tasses de caf&eacute; consomm&eacute;es par chaque s&eacute;nateur, le type de caf&eacute; (d&eacute;caff&eacute;in&eacute; ou normal), et s'il est sucr&eacute; ou non."> <caption>Les tasses de caf&eacute; consomm&eacute;es par chaque s&eacute;nateur</caption> <tr> <th>Nom</th> <th>Tasses</th> <th>Type de caf&eacute;</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&eacute;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.

Page 28: Htm Let Javascript

28

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"> <caption>Les tasses de caf&eacute; consomm&eacute;es par chaque s&eacute;nateur</caption> <tr><th>Nom<th>Tasses<th>Type de caf&eacute;<th>Sucre ? <tr><td>T. Sexton<td>10<td>Espresso<td>Non <tr><td>J. Dinnen<td>5<td>D&eacute;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

Page 29: Htm Let Javascript

29

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&eacute;sente le nombre de tasses de caf&eacute; consomm&eacute;es par chaque s&eacute;nateur, le type de caf&eacute; (d&eacute;caff&eacute;in&eacute; ou normal), et s'il est sucr&eacute; ou non."> <caption>Les tasses de caf&eacute; consomm&eacute;es par chaque s&eacute;nateur</caption> <tr> <th>Nom</th> <th>Tasses</th> <th>Type de caf&eacute;</th> <th>Sucre ?</th> <tr> <td>T. Sexton</td>

Page 30: Htm Let Javascript

30

<td>10</td> <td>Espresso</td> <td>Non</td> <tr> <td>J. Dinnen</td> <td>5</td> <td>D&eacute;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&eacute;gumes <th>Prix au kilo <tbody> <tr><td>Laitues <td>&euro;1 <tr><td>Carottes <td>&euro;10,50 <tr><td>Navets dor&eacute;s <td>&euro;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>

Page 31: Htm Let Javascript

31

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. 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

2. 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

3. 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

4. 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&eacute;tails dans le <a href="chapitre2.html">chapitre deux</a>. Voir aussi cette <a href="../images/foret.png">carte de la for&ecirc;t enchant&eacute;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.

Page 32: Htm Let Javascript

32

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&egrave;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&egrave;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.

Page 33: Htm Let Javascript

33

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&eacute;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&ecirc;t enchant&eacute;e">carte de la for&ecirc;t enchant&eacute;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. le contenu de l'élément A définit la position de l'ancre ; 2. 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) ;

Page 34: Htm Let Javascript

34

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 :

Page 35: Htm Let Javascript

35

<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> ...suite du document... <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&eacute;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 &agrave; la <a href="#section2">Section deux</a> ci-dessus pour plus de d&eacute;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&#xfc;rst" est valide pour l'attribut name, comme l'est la valeur "D&uuml;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 :

Page 36: Htm Let Javascript

36

• 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. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <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.

Page 37: Htm Let Javascript

37

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&ccedil;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&eacute;f&eacute;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&eacute;f&eacute;rence -- Page 5</title> <link rel="Start" title="La premi&egrave;re page du manuel" type="text/html" href="http://quelquepart.com/manuel/debut.html"> </head>

Page 38: Htm Let Javascript

38

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 : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <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 &agrave; 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. l'URI de base est fixé par l'élément BASE ; 2. 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; 3. 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 e-mail 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.

Page 39: Htm Let Javascript

39

7 Les objets, les images et les applets Sommaire

1. Introduction aux objets, images et applets 2. L'inclusion d'une image : l'élément IMG 3. 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

4. L'inclusion d'un applet : l'élément APPLET 5. Les images cliquables

1. Les images cliquables côté client : les éléments MAP et AREA 2. Les images cliquables côté serveur

6. La présentation visuelle des images, objets et applets 1. La largeur et la hauteur

7. 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.

Page 40: Htm Let Javascript

40

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 ci-dessous 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.

Page 41: Htm Let Javascript

41

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. 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) ;

2. 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

Page 42: Htm Let Javascript

42

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> <!-- Essayer d'abord l'applet en Python --> <object title="La terre vue de l'espace" classid="http://www.observer.mars/LaTerre.py"> <!-- Sinon, essayer la vidéo MPEG --> <object data="LaTerre.mpeg" type="application/mpeg"> <!-- Sinon, essayer l'image GIF --> <object data="LaTerre.gif" type="image/gif"> <!-- Sinon, le texte en dernier recours --> 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>

Page 43: Htm Let Javascript

43

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.

Page 44: Htm Let Javascript

44

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. EXEMPLE DÉCONSEILLÉ : 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&eacute;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&eacute;es. </object> Les valeurs initiales peuvent être fournies à l'applet via l'élément PARAM. EXEMPLE DÉCONSEILLÉ : 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

Page 45: Htm Let Javascript

45

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. 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 ci-dessous pour des renseignements sur la manière de spécifier un texte de remplacement) ;

2. 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&egrave;s</a> | <a href="raccourci.html" shape="rect" coords="118,0,184,28">Entr&eacute;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>

Page 46: Htm Let Javascript

46

<head> <title>Le site sympa !</title> </head> <body> <p><object data="barrenavigation1.gif" type="image/gif" usemap="#carte1"> </object> ...le reste de la page ici... <map name="carte1"> <p>Naviguer dans le site : <a href="guide.html" shape="rect" coords="0,0,118,28">Plan d'acc&egrave;s</a> | <a href="raccourci.html" shape="rect" coords="118,0,184,28">Entr&eacute;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> </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><object data="barrenavigation1.gif" type="image/gif" usemap="#carte1"> <p>Voici une barre de navigation. </object> <map name="carte1"> <area href="guide.html" alt="Plan d'acc&egrave;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&eacute;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">

Page 47: Htm Let Javascript

47

<object data="barrenavigation.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&egrave;s</a> | <a href="raccourci.html" shape="rect" coords="118,0,184,28">Entr&eacute;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> </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.

Page 48: Htm Let Javascript

48

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. Introduction aux feuilles de style 2. 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

3. 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

4. Les feuilles de style en cascade 1. L'héritage et la cascade

5. 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 ;

Page 49: Htm Let Javascript

49

• 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 : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="stylevert.css"> </head> <body> <p class="special">Le texte de ce paragraphe devrait &ecirc;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

Page 50: Htm Let Javascript

50

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. 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 ;

2. 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 ;

3. 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.

Page 51: Htm Let Javascript

51

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> <style type="text/css"> 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> <style type="text/css"> h1.maclasse {border-width: 1; border: solid; text-align: center} </style> </head> <body> <h1 class="maclasse"> Cet H1 est touch&eacute; 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> <style type="text/css"> #monid {border-width: 1; border: solid; text-align: center} </style> </head> <body> <h1 class="maclasse"> Cet H1 n'est pas touch&eacute; </h1> <h1 id="monid"> Cet H1 est touch&eacute; par le style </h1> <h1> Cet H1 n'est pas touch&eacute; </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.

Page 52: Htm Let Javascript

52

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> <style type="text/css"> 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> <style type="text/css"> div.resume { text-align: justify } </style> </head> <body> <div class="resume"> <p>Les outils de gestion de contenu Web permettent de r&eacute;soudre la plupart des probl&egrave;mes de production li&eacute;s aux sites web tout en jetant un pont entre les diff&eacute;rents supports de diffusion de l'information.</p> <p>Mais l'engouement dont b&eacute;n&eacute;ficient ces logiciels ne doit pas faire oublier que leur d&eacute;ploiement reste difficile et que leur march&eacute; est tr&egrave;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

Page 53: Htm Let Javascript

53

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">

Page 54: Htm Let Javascript

54

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"> <style 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

Page 55: Htm Let Javascript

55

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. <style type="text/css"> <!-- h1 { color: red } p { color: blue} --> </style>

9 L'alignement, les styles de police et les règles horizontales

Sommaire

1. 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

2. 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

3. 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 ;

Page 56: Htm Let Javascript

56

• 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. EXEMPLE DÉCONSEILLÉ : 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> <style type="text/css"> 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> <title>Comment tailler le bois</title> <style type="text/css"> h1.bois {text-align: center} </style> <body> <h1 class="bois"> Comment tailler le bois </h1> EXEMPLE DÉCONSEILLÉ : 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> <title>Comment tailler le bois</title> <style type="text/css"> p.monparagraphe {text-align: right} </style> <body> <p class="monparagraphe">...Beaucoup de texte... EXEMPLE DÉCONSEILLÉ : 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> <title>Comment tailler le bois</title> <style type="text/css"> 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> <title>Comment tailler le bois</title> <style type="text/css">

Page 57: Htm Let Javascript

57

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.

EXEMPLE DÉCONSEILLÉ : 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 : <style type="text/css"> 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> ...

Page 58: Htm Let Javascript

58

<style type="text/css"> 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&eacute;l&eacute;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> <style type="text/css"> 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". EXEMPLE DÉCONSEILLÉ : 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> <font size=3>size=3</font> <font size=4>size=4</font> <font size=5>size=5</font> <font size=6>size=6</font> <font size=7>size=7</font> Ceci pourrait être restitué par :

Page 59: Htm Let Javascript

59

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. EXEMPLE DÉCONSEILLÉ : 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. Introduction aux cadres 2. 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

3. 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

4. Le contenu de remplacement 1. L'élément NOFRAMES

5. 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" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>Un document avec un jeu d'encadrement simple</title>

Page 60: Htm Let Javascript

60

</head> <frameset cols="20%, 80%"> <frameset rows="100, 200"> <frame src="contenu_du_cadre1.html"> <frame src="contenu_du_cadre2.gif"> </frameset> <frame src="contenu_du_cadre3.html"> <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.

Page 61: Htm Let Javascript

61

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*"> ...le reste de la définition... </frameset> L'exemple suivant crée une grille de 2×3 subdivisions. <frameset rows="30%,70%" cols="33%,34%,33%"> ...le reste de la définition... </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*"> ...le reste de la définition... </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

Page 62: Htm Let Javascript

62

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 : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>Voici un jeu d'encadrement avec un OBJECT dans HEAD</title> <!-- Cet OBJECT n'est pas restitué ! --> <object id="monobjet" data="data.bar"></object> </head> <frameset> <frame src="bianca.html" name="bianca"> </frameset> </html> <!-- Dans le document bianca.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 : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>Un document avec jeu d'encadrement</title> </head> <frameset cols="33%,33%,33%"> <frameset rows="*,200"> <frame src="contenu_du_cadre1.html"> <frame src="contenu_du_cadre2.gif"> </frameset> <frame src="contenu_du_cadre3.html"> <frame src="contenu_du_cadre4.html"> </frameset> </html> Celui-ci devrait produire une disposition des cadres semblable à :

Page 63: Htm Let Javascript

63

------------------------------------------ |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. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>Un document avec jeu d'encadrement</title> </head> <frameset cols="50%,50%"> <frame src="contenu_du_cadre1.html"> <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. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>Un document avec jeu d'encadrement</title> </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>

Page 64: Htm Let Javascript

64

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 : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>Un document avec jeu d'encadrement</title> </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" "http://www.w3.org/TR/html4/loose.dtd"> <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" "http://www.w3.org/TR/html4/loose.dtd"> <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">

Page 65: Htm Let Javascript

65

</head> <body> ...commencement du document... <p>Maintenant vous pouvez aller à la <a href="slide2.html">diapositive 2.</a> ...suite du document... <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. 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 ;

2. 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 ;

3. 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 ;

4. 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 : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <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>

Page 66: Htm Let Javascript

66

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. Introduction aux formulaires 2. 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"

Page 67: Htm Let Javascript

67

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&eacute;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é.

Page 68: Htm Let Javascript

68

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) ;

Page 69: Htm Let Javascript

69

• 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". <form action="http://unsite.com/prog/ajoutermembre" method="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

Page 70: Htm Let Javascript

70

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. <form action="http://unsite.com/prog/ajoutermembre" method="post"> <p> Pr&eacute;nom : <input type="text" name="prenom"><br> Nom : <input type="text" name="nom"><br> E-mail: <input type="text" name="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> 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 &agrave; envoyer ? <input type="file" name="nom_des_fichiers"> </p> </form>

Page 71: Htm Let Javascript

71

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. <form action="http://unsite.com/prog/ajoutermembre" method="post"> <p> Pr&eacute;nom : <input type="text" name="prenom"><br> Nom : <input type="text" name="nom"><br> E-mail: <input type="text" name="email"><br> <input type="radio" name="genre" value="homme"> Homme<br> <input type="radio" name="genre" value="femme"> Femme<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 ;

Page 72: Htm Let Javascript

72

• 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> <option>Composant_4</option> <option>Composant_5</option> <option>Composant_6</option> <option>Composant_7</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> <option label="3.5" value="pm3_3.5">PortMaster 3 avec ComOS 3.5</option> </optgroup> <optgroup label="PortMaster 2"> <option label="3.7" value="pm2_3.7">PortMaster 2 avec ComOS 3.7</option> <option label="3.5" value="pm2_3.5">PortMaster 2 avec ComOS 3.5</option> </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

Page 73: Htm Let Javascript

73

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 sous-menu 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&egrave;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 : <form action="..." method="post">

Page 74: Htm Let Javascript

74

<table> <tr> <td><label for="label_prenom">Pr&eacute;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. <form action="http://unsite.com/prog/ajoutermembre" method="post"> <p> <label for="label_prenom">Pr&eacute;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> <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> 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 : <form action="..." method="post"> <p> <label> Pr&eacute;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 « raccourci-clavier » ou « touche rapide »).

Page 75: Htm Let Javascript

75

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. 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 ;

2. 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 ;

3. 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. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <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... <form action="..." method="post"> <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.

Page 76: Htm Let Javascript

76

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. <form action="..." method="post"> <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&egrave;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 :

Page 77: Htm Let Javascript

77

• 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.

Page 78: Htm Let Javascript

78

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 : <form action="..." method="post"> <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-form-urlencoded". 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é. .

Page 79: Htm Let Javascript

79

"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. 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") ;

2. 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'en-tête « Content-Type », accompagné d'un paramètre "charset". Chaque partie est censée contenir :

1. un en-tête « Content-Disposition » dont la valeur est "form-data" ; 2. 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>

Page 80: Htm Let Javascript

80

Quel est votre nom ? <input type="text" name="nom_soumis"><br> Quels sont les fichiers à envoyer ? <input type="file" name="fichiers"><br> <input type="submit" value="Envoyer"> <input type="reset"> </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. Introduction aux scripts 2. 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

Page 81: Htm Let Javascript

81

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.

Page 82: Htm Let Javascript

82

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. 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 ;

2. 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". <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <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> <script type="text/javascript"> ...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.

Page 83: Htm Let Javascript

83

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é au-dessus 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é au-dessus 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 élément. Cet attribut peut s'utiliser avec la plupart des éléments.

onkeydown L'événement onkeydown se produit quand une touche est gardée appuyée au-dessus d'un élément. Cet attribut peut s'utiliser avec la plupart des éléments.

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

Page 84: Htm Let Javascript

84

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"> <script type="text/javascript"> function mon_onclick() { . . . } document.form.mybutton.onclick = mon_onclick </script> </button> Voici un gestionnaire de fenêtre plus intéressant : <script type="text/javascript">

Page 85: Htm Let Javascript

85

function mon_onload() { . . . } var win = window.open("un/autre/URI") if (win) win.onload = mon_onload </script> En Tcl, ça donnerait : <script type="text/tcl"> 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. Tous les éléments SCRIPT sont évalués dans l'ordre au fur et à mesure du chargement du document ;

2. 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 ;

3. 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> <script type="text/javascript"> 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.

Page 86: Htm Let Javascript

86

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. <script type="text/tcl"> ...un script Tcl qui insère des données... </script> <noscript> <p>Acc&eacute;der aux <a href="http://quelquepart.com/data">donn&eacute;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 <!-- et -->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 « <!-- » au début de l'élément SCRIPT et ignore les caractères suivants jusqu'à la fin de la ligne. JavaScript interprète la chaîne « // » comme le début d'un commentaire qui s'étend jusqu'à la fin de la ligne courante. Elle est nécessaire pour dissimuler la chaîne « --> » à l'analyseur JavaScript. <script type="text/javascript"> <!-- pour dissimuler le contenu du script aux navigateurs anciens function square(i) { document.write("L'appel a pass&eacute; ", i ," &agrave; la fonction.","<br>") return i * i } document.write("La fonction a renvoy&é ",square(i),".") // fin de la dissimulation du contenu aux navigateurs anciens --> </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 type="text/tcl"> <!-- pour dissimuler le contenu du script aux navigateurs anciens proc square {i} { document write "L'appel a pass&eacute; $i &agrave; la fonction.<br>" return [expr $i * $i] } document write "La fonction a renvoy&eacute; [square 5]." # fin de la dissimulation du contenu aux navigateurs anciens --> </script>

Page 87: Htm Let Javascript

87

13 Index des éléments

Légende : Optionnel, Interdit, Vide, Déconseillé, DTD Transitoire, DTD avec jeu d'enCadrement

Nom Balise ouvrante

Balise fermante

Vide Déc. DTD Description

A ancre

ABBR abréviation (e.g., WWW, HTTP, etc.)

ACRONYM acronyme

ADDRESS informations sur l'auteur

APPLET D T applet Java

AREA I V aire d'image cliquable côté client

B style de texte gras

BASE I V URI de base du document

BASEFONT I V D T taille de la police de base

BDO inactivation de l'algorithme I18N BiDi

BIG style de texte agrandi

BLOCKQUOTE citation longue

BODY O O corps du document

BR I 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 changement local à la police

FORM formulaire interactif

FRAME I V C sous-fenêtre

FRAMESET C subdivision de fenêtre

H1 titrage

H2 titrage

H3 titrage

H4 titrage

H5 titrage

Page 88: Htm Let Javascript

88

H6 titrage

HEAD O O en-tête du document

HR I V règle horizontale

HTML O 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 item de liste

LINK I V lien indépendant du média

MAP image cliquable côté client

MENU D T liste de menus

META I V 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

Page 89: Htm Let Javascript

89

TD O cellule de données d'une table [ndt. table data cell]

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

TT style de texte téléimprimeur ou à chasse fixe [ndt. monospaced]

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 Éléments concernés Type

Valeur par défaut Déc. DTD Commentaires

abbr TD, TH %Text; #IMPLIED abréviation pour cellule de rubrique

accept-charset FORM %Charsets; #IMPLIED liste des jeux de caractères reconnus

accept FORM, INPUT %ContentTypes; #IMPLIED

liste de types MIME pour chargement d'un fichier sur le serveur

accesskey

A, AREA, BUTTON, INPUT, LABEL, LEGEND, TEXTAREA

%Character; #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, INPUT, OBJECT

%IAlign; #IMPLIED D T alignement vertical ou 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

Page 90: Htm Let Javascript

90

align HR (left | center | right)

#IMPLIED D T

align DIV, H1, H2, H3, H4, H5, H6, P

(left | center | right | justify)

#IMPLIED D T alignement, alignement du texte

align

COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR

(left | center | right | justify | char)

#IMPLIED

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 D T liste d'archives séparées par des virgules

archive OBJECT CDATA #IMPLIED liste d'URI séparés par des espaces

axis TD, TH CDATA #IMPLIED

liste des rubriques concernées 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ère-plan des cellules

bgcolor TR %Color; #IMPLIED D T couleur d'arrière-plan des rangées

bgcolor TD, TH %Color; #IMPLIED D T couleur d'arrière-plan des cellules

bgcolor BODY %Color; #IMPLIED D T couleur d'arrière-plan du document

border TABLE %Pixels; #IMPLIED épaisseur du contour de la table

border IMG, OBJECT %Pixels; #IMPLIED D T épaisseur de la bordure du lien

cellpadding TABLE %Length; #IMPLIED espacement à l'intérieur des cellules

cellspacing TABLE %Length; #IMPLIED espacement entre les cellules

char

COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR

%Character; #IMPLIED caractère d'alignement, e.g. char=':'

Page 91: Htm Let Javascript

91

charoff

COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR

%Length; #IMPLIED décalage du 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, META, PARAM, SCRIPT, STYLE et TITLE

CDATA #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 du texte

code APPLET CDATA #IMPLIED D T fichier de classe de l'applet

codebase OBJECT %URI; #IMPLIED

URI de base pour les attributs classid, data, archive

codebase APPLET %URI; #IMPLIED D T URI de base optionnel pour l'applet

codetype OBJECT %ContentType; #IMPLIED type de contenu de l'attribut code

color BASEFONT, FONT

%Color; #IMPLIED D T couleur du texte

cols FRAMESET %MultiLengths; #IMPLIED C liste de longueurs, par défaut : 100% (1 colonne)

cols TEXTAREA NUMBER #REQUIRED

colspan TD, TH NUMBER 1

nombre de colonnes couvertes par la cellule

compact DIR, DL, MENU, OL, UL

(compact) #IMPLIED D T espacement inter-items réduit

content META CDATA #REQUIRED informations

Page 92: Htm Let Javascript

92

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

defer SCRIPT (defer) #IMPLIED

l'agent utilisateur peut différer l'exécution du script

dir

Tous les éléments, sauf APPLET, BASE, BASEFONT, BDO, BR, FRAME, FRAMESET, IFRAME, PARAM, SCRIPT

(ltr | rtl) #IMPLIED direction du texte faible/neutre

dir BDO (ltr | rtl) #REQUIRED directionnalité

disabled

BUTTON, INPUT, OPTGROUP, OPTION, SELECT, TEXTAREA

(disabled) #IMPLIED indisponible dans ce contexte

enctype FORM %ContentType; "application/x-www- form-urlencoded"

face BASEFONT, FONT

CDATA #IMPLIED D T liste de noms de police séparés par des virgules

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 C bordures de cadre ou non ?

headers TD, TH IDREFS #IMPLIED liste des id des cellules de rubrique

height IFRAME %Length; #IMPLIED T hauteur du cadre

height TD, TH %Length; #IMPLIED D T hauteur de la cellule

height IMG, OBJECT %Length; #IMPLIED surclasser la

Page 93: Htm Let Javascript

93

hauteur

height APPLET %Length; #REQUIRED D T hauteur initiale

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 code de langue

hspace APPLET, IMG, OBJECT

%Pixels; #IMPLIED D T gouttière horizontale

http-equiv META NAME #IMPLIED nom de l'en-tête de réponse HTTP

id

Tous les éléments, sauf BASE, HEAD, HTML, META, SCRIPT, STYLE, TITLE

ID #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

Tous les éléments, sauf APPLET, BASE, BASEFONT, BR, FRAME, FRAMESET, IFRAME, PARAM, SCRIPT

%LanguageCode; #IMPLIED code de langue

language SCRIPT CDATA #IMPLIED D T nom de langage de script prédéfini

link BODY %Color; #IMPLIED D T couleur des liens

longdesc IMG %URI; #IMPLIED

lien vers une description longue (en complément de l'attribut alt)

longdesc FRAME, IFRAME %URI; #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 en pixels

maxlength INPUT NUMBER #IMPLIED nombre de

Page 94: Htm Let Javascript

94

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

name APPLET CDATA #IMPLIED D T

permet aux applets de se trouver les uns les autres

name SELECT CDATA #IMPLIED nom du champs

name FORM CDATA #IMPLIED nom du formulaire pour les scripts

name FRAME, IFRAME CDATA #IMPLIED C nom du cadre pour le ciblage

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

noresize FRAME (noresize) #IMPLIED C

autoriser l'utilisateur à redimensionner le cadre ?

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, LABEL, SELECT, TEXTAREA

%Script; #IMPLIED l'élément a perdu l'attention

Page 95: Htm Let Javascript

95

onchange INPUT, SELECT, TEXTAREA

%Script; #IMPLIED la valeur de l'élément a changé

onclick

Tous les éléments, sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE

%Script; #IMPLIED le bouton d'un pointeur a été cliqué

ondblclick

Tous les éléments, sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE

%Script; #IMPLIED le bouton d'un pointeur a été double cliqué

onfocus

A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA

%Script; #IMPLIED l'élément a reçu l'attention

onkeydown

Tous les éléments, sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE

%Script; #IMPLIED une touche est appuyée

onkeypress

Tous les éléments, sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE

%Script; #IMPLIED une touche a été pressée puis relâchée

onkeyup Tous les éléments, sauf APPLET, BASE,

%Script; #IMPLIED une touche est relâchée

Page 96: Htm Let Javascript

96

BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE

onload FRAMESET %Script; #IMPLIED C tous les cadres ont été chargés

onload BODY %Script; #IMPLIED le document a été chargé

onmousedown

Tous les éléments, sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE

%Script; #IMPLIED le bouton d'un pointeur a été appuyé

onmousemove

Tous les éléments, sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE

%Script; #IMPLIED

le bouton d'un pointeur a été déplacé à l'intérieur

onmouseout

Tous les éléments, sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE

%Script; #IMPLIED le bouton d'un pointeur a été déplacé en dehors

onmouseover

Tous les éléments, sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME,

%Script; #IMPLIED le bouton d'un pointeur a été déplacé sur

Page 97: Htm Let Javascript

97

ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE

onmouseup

Tous les éléments, sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE

%Script; #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 C tous les cadres ont été retirés

onunload BODY %Script; #IMPLIED le document a été retiré

profile HEAD %URI; #IMPLIED dictionnaire de métainformations nommé

prompt ISINDEX %Text; #IMPLIED D T message d'invite

readonly TEXTAREA (readonly) #IMPLIED

readonly INPUT (readonly) #IMPLIED pour les boutons de type text et passwd

rel A, LINK %LinkTypes; #IMPLIED types de lien progressif

rev A, LINK %LinkTypes; #IMPLIED types de lien régressif

rows FRAMESET %MultiLengths; #IMPLIED C liste de longueurs, par défaut : 100% (1 rangée)

rows TEXTAREA NUMBER #REQUIRED

rowspan TD, TH NUMBER 1 nombre de rangées couvertes par la cellule

rules TABLE %TRules; #IMPLIED règles entre rangées et colonnes

scheme META CDATA #IMPLIED selectionner une forme de contenu

scope TD, TH %Scope; #IMPLIED portée des cellules de rubrique

Page 98: Htm Let Javascript

98

scrolling FRAME, IFRAME (yes | no | auto) auto C barres de défilement ou non

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 [+|-]entier, e.g. size="+1", size="4"

size INPUT CDATA #IMPLIED propre à chaque type de champs

size BASEFONT CDATA #REQUIRED D T taille de police de base pour les éléments FONT

size SELECT NUMBER #IMPLIED rangées visibles

span COL NUMBER 1

les attributs de l'élément COL affectent "n" colonnes

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 C source du contenu du cadre

src IMG %URI; #REQUIRED URI de l'image à incorporer

standby OBJECT %Text; #IMPLIED message à montrer pendant le chargement

start OL NUMBER #IMPLIED D T numéro commençant la séquence

style

Tous les éléments, sauf BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE

%StyleSheet; #IMPLIED indications de style associées

summary TABLE %Text; #IMPLIED objet/structure pour sortie vocale

tabindex A, AREA, BUTTON, INPUT,

NUMBER #IMPLIED position dans l'ordre de

Page 99: Htm Let Javascript

99

OBJECT, SELECT, TEXTAREA

tabulation

target A, AREA, BASE, FORM, LINK

%FrameTarget; #IMPLIED T restituer dans ce cadre

text BODY %Color; #IMPLIED D T couleur du texte du document

title

Tous les éléments, sauf BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, TITLE

%Text; #IMPLIED titre consultatif

type A, LINK %ContentType; #IMPLIED type de contenu consultatif

type OBJECT %ContentType; #IMPLIED type de contenu pour l'attribut data

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 de numérotation

type UL %ULStyle; #IMPLIED D T style de puce

type BUTTON (button | submit | reset)

submit utiliser comme bouton de formulaire

usemap IMG, INPUT, OBJECT

%URI; #IMPLIED utiliser une image cliquable côté client

valign

COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR

(top | middle | bottom | baseline)

#IMPLIED 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, le contenu de l'élément

value PARAM CDATA #IMPLIED valeur de

Page 100: Htm Let Javascript

100

propriété

value BUTTON CDATA #IMPLIED envoyé au serveur à la soumission

value LI NUMBER #IMPLIED D T réinitialise le numéro dans la séquence

valuetype PARAM (DATA | REF | OBJECT)

DATA comment interpréter la valeur

version HTML CDATA %HTML.Version; D T une constante

vlink BODY %Color; #IMPLIED D T couleur des liens visités

vspace APPLET, IMG, OBJECT

%Pixels; #IMPLIED D T gouttière verticale

width HR %Length; #IMPLIED D T

width IFRAME %Length; #IMPLIED T largeur du cadre

width IMG, OBJECT %Length; #IMPLIED surclasser la largeur

width TABLE %Length; #IMPLIED largeur de la table

width TD, TH %Length; #IMPLIED D T largeur de la 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 D T

Page 101: Htm Let Javascript

101

Deuxième partie : Javascript

Table des matières

1. Présentation de Javascript 2. Littéraux et constantes 3. Objets et fonctions 4. Tableaux 5. Opérateurs, expressions et instructions 6. Accès aux éléments de la page HTML à partir d'un script 7. 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 ci-dessus, 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

Page 102: Htm Let Javascript

102

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

Page 103: Htm Let Javascript

103

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 FireFox : https://addons.mozilla.org/fr/firefox/addon/1843

• utiliser un débogueur intégré dans un IDE (NetBeans à partir de la version 6.5)

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).

Page 104: Htm Let Javascript

104

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; 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 !!)

Page 105: Htm Let Javascript

105

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.

Page 106: Htm Let Javascript

106

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.

Page 107: Htm Let Javascript

107

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

\b \n \f \t \r \\ \' \" \••• \x•• \u••••

Caractère représenté

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 é=&eacute; On écrira S = "Le d\u00EEner sera pr\u00EAt \u00E0 l'heure " ; au lieu de S = "Le d&icirc;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 celui-ci 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 .

Page 108: Htm Let Javascript

108

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".

Page 109: Htm Let Javascript

109

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://www-128.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++.

Page 110: Htm Let Javascript

110

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 ☺

Page 111: Htm Let Javascript

111

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 :

Page 112: Htm Let Javascript

112

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 :

Page 113: Htm Let Javascript

113

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 contre-partie 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 :

Page 114: Htm Let Javascript

114

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 :

Page 115: Htm Let Javascript

115

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.

Page 116: Htm Let Javascript

116

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…)

Page 117: Htm Let Javascript

117

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 .