Copyright

2009 Micro Application 20-22, rue des Petits-Htels 75010 Paris 1re dition - Avril 2009

Auteur

Fabrice LEMAINQUE Toute reprsentation ou reproduction, intgrale ou partielle, faite sans le consentement de MICRO APPLICATION est illicite (article L122-4 du code de la proprit intellectuelle). Cette reprsentation ou reproduction illicite, par quelque procd que ce soit, constituerait une contrefaon sanctionne par les articles L335-2 et suivants du code de la proprit intellectuelle. Le code de la proprit intellectuelle nautorise aux termes de larticle L122-5 que les reproductions strictement destines lusage priv et non destines lutilisation collective dune part, et dautre part, que les analyses et courtes citations dans un but dexemple et dillustration.

Avertissement aux utilisateurs

Les informations contenues dans cet ouvrage sont donnes titre indicatif et nont aucun caractre exhaustif voire certain. A titre dexemple non limitatif, cet ouvrage peut vous proposer une ou plusieurs adresses de sites Web qui ne seront plus dactualit ou dont le contenu aura chang au moment o vous en prendrez connaissance. Aussi, ces informations ne sauraient engager la responsabilit de lEditeur. La socit MICRO APPLICATION ne pourra tre tenue responsable de toute omission, erreur ou lacune qui aurait pu se glisser dans ce produit ainsi que des consquences, quelles quelles soient, qui rsulteraient des informations et indications fournies ainsi que de leur utilisation. Tous les produits cits dans cet ouvrage sont protgs, et les marques dposes par leurs titulaires de droits respectifs. Cet ouvrage nest ni dit, ni produit par le(s) propritaire(s) de(s) programme(s) sur le(s)quel(s) il porte et les marques ne sont utilises qu seule fin de dsignation des produits en tant que noms de ces derniers.

ISBN : 978-2-300-019586

MICRO APPLICATION 20-22, rue des Petits-Htels 75010 PARIS Tl. : 01 53 34 20 20 Fax : 01 53 34 20 00 http://www.microapp.com

Support technique : galement disponible sur www.microapp.com

Retrouvez des informations sur cet ouvrage ! Rendez-vous sur le site Internet de Micro Application www.microapp.com. Dans le module de recherche, sur la page daccueil du site, entrez la rfrence 4 chiffres indique sur le prsent livre. Vous accdez directement sa fiche produit.

1958

Avant-propos
Destine aussi bien aux dbutants quaux utilisateurs initis, la collection Guide Complet repose sur une mthode essentiellement pratique. Les explications, donnes dans un langage clair et prcis, sappuient sur de courts exemples. En n de chaque chapitre, dcouvrez, en fonction du sujet, des exercices, une check-list ou une srie de FAQ pour rpondre vos questions. Vous trouverez dans cette collection les principaux thmes de lunivers informatique : matriel, bureautique, programmation, nouvelles technologies...

Conventions typographiques
An de faciliter la comprhension des techniques dcrites, nous avons adopt les conventions typographiques suivantes :
j gras

: menu, commande, bote de dialogue, bouton, onglet. : zone de texte, liste droulante, case cocher, bouton

j italique

radio.
j

Police bton : Instruction, listing, adresse internet, texte

saisir.
j

: indique un retour la ligne volontaire d aux contraintes de la mise en page.

Il sagit dinformations supplmentaires relatives au sujet trait.

Met laccent sur un point important, souvent dordre technique quil ne faut ngliger aucun prix.

Propose conseils et trucs pratiques.

Donne en quelques lignes la dnition dun terme technique ou dune abrviation.

Sommaire

Chapitre 1
1.1. 1.2.

Introduction HTML

11

1.3. 1.4. 1.5.

Bref historique de HTML .......................................... 12 Pendant ce temps .................................................. 17 XML ................................................................... 17 CSS (Cascading Style Sheet) ..................................... 18 DOM2 (Document Object Model level 2) ........................ 20 La nouvelle gnration : XHTML ................................ 21 Prsentation rapide de la syntaxe et de la structure du langage ........................................................... 22 Rsum .............................................................. 25

Chapitre 2
2.1.

Les outils Web

27

2.2.

2.3.

Outils de cration de pages Web ............................... 28 diteurs commerciaux ............................................. 29 diteurs gratuits ..................................................... 31 Navigateurs .......................................................... 36 Bref historique : Netscape contre Microsoft .................... 37 De nouveaux challengers .......................................... 38 Rsum .............................................................. 42

Chapitre 3
3.1. 3.2.

Conception de votre premire page Web

43

3.3.

Conception du site ................................................. 44 Cration de la page daccueil .................................... 47 Instruction !DOCTYPE ............................................. 47 lment HEAD ....................................................... 49 lment BODY ...................................................... 53 Paragraphes de texte : lment P ................................ 57 Lien hypertexte : lment A ....................................... 59 lment saut de ligne BR .......................................... 65 Attributs dalignements ............................................ 66 Rsum .............................................................. 69

Chapitre 4
4.1.

Listes et tableaux

71

Listes ................................................................. 73 Liste ordonne : lments OL et LI ............................... 73

4 LE GUIDE COMPLET

Sommaire
Liste puces : lments UL et LI ................................. 75 Liste de dfinitions : lments DL, DT et DD ................... 76 Listes imbriques ................................................... 79 Tableaux ............................................................. 89 Cration dun tableau simple ..................................... 90 Contrle de la taille et de la structure des cellules ............. 98 Imbrication de tableaux .......................................... 127 Autres prcisions concernant les tableaux .................... 128 Rsum ............................................................. 133

4.2.

4.3.

Chapitre 5
5.1.

Mise en forme avance

135

5.2.

5.3.

5.4. 5.5.

5.6.

Principaux lments structuraux .............................. 136 lment HR ......................................................... 136 Commentaire HTML .............................................. 137 Modification des marges dun paragraphe .................... 148 lments de structuration du texte ........................... 149 Autres lments structuraux ..................................... 155 lment OBJECT .................................................. 155 Caractres spciaux et encodage de caractres .......... 156 Encodages de caractres ........................................ 157 Caractres spciaux .............................................. 159 Caractres non affichables ...................................... 163 Modication de lapparence du texte ......................... 164 Notation mathmatique ......................................... 169 En texte simple ..................................................... 169 laide de graphismes ........................................... 170 laide de MathML ................................................ 171 Rsum ............................................................. 173

Chapitre 6
6.1.

Couleurs et images

175

6.2.

Les couleurs ....................................................... 177 Modification du schma de couleurs de la page ............. 178 Modification de la couleur du texte dans un lment de page ............................................................. 183 Modification du schma de couleurs dun tableau .......... 184 Prcautions prendre avec les couleurs ...................... 184 Les images ......................................................... 186 Image darrire-plan .............................................. 187

LE GUIDE COMPLET 5

Sommaire
Image insre ...................................................... 190 Images animes ................................................... 198 Insertion dun gif anim ........................................... 199 Cration dun gif anim ........................................... 203 Image cliquable ................................................... 210 Images cliquables ct client : lments MAP et AREA .... 210 Images cliquables ct serveur ................................. 222 Inclusion gnrique dimages : lment OBJECT .......... 224 Diminution du temps de tlchargement ...................... 234 Rsum ............................................................. 240

6.3.

6.4.

6.5. 6.6.

Chapitre 7
7.1. 7.2.

Jeux dencadrement

243

7.3.

7.4. 7.5. 7.6. 7.7. 7.8. 7.9.

Jeu dencadrement : lment FRAMESET .................. 245 Contenu dun jeu dencadrement : lment FRAME ....... 248 Attributs essentiels de llment FRAME : name et src ..... 257 Attributs de mise en forme de llment FRAME ............. 258 Autres attributs de llment FRAME ........................... 259 Dtermination du cadre cible : attribut target ............... 261 Noms rservs ..................................................... 262 tablissement de la cible par dfaut des liens ................ 264 Smantique de cible .............................................. 264 Ensembles de cadres imbriqus .............................. 265 Partage de donnes entre cadres ............................. 269 Contenu de remplacement : lment NOFRAMES ........ 270 Cadres en ligne : lment IFRAME ............................ 271 Travail avec les jeux dencadrement .......................... 273 Rsum ............................................................. 275

Chapitre 8
8.1. 8.2. 8.3.

Feuilles de style

277

Introduction ........................................................ 279 Attribut style ....................................................... 281 lment STYLE .................................................... 282 Dfinition du style de la totalit des occurrences dun lment donn ............................................... 283 Dfinition du style de certaines occurrences dun lment donn ............................................... 286 Dfinition du style dune unique occurrence dun lment donn ............................................... 287

6 LE GUIDE COMPLET

Sommaire
lments DIV et SPAN ............................................ 288 Attribut media ...................................................... 291 Masquage du contenu de llment STYLE ................... 292 Feuille de style externe .......................................... 294 lment LINK ...................................................... 303 Prise en compte du mdium ..................................... 305 Proprits de feuille de style ................................... 306 Proprits de modification de texte et de police ............. 306 Reprsentation des lments laide dun style ............. 311 Feuille de style en cascade ..................................... 323 Cascade et hritage ............................................... 323 Feuille de style auditive, pour un public particulier ........ 328 Rsum ............................................................. 335

8.4.

8.5.

8.6. 8.7. 8.8.

Chapitre 9
9.1.

Formulaires

337

9.2.

9.3.

9.4.

9.5. 9.6.

Constituants dun formulaire ................................... 339 lment FORM ..................................................... 339 Types de commandes de formulaire ........................... 341 lment INPUT .................................................... 343 lment BUTTON ................................................. 350 lments SELECT, OPTGROUP et OPTION .................. 352 lment TEXTAREA ............................................... 356 lment LABEL .................................................... 357 Ajout dune structure un formulaire : lments FIELDSET et LEGEND ................................ 360 Formulaire et focus ............................................... 362 Navigation par tabulation ........................................ 363 Touches daccs rapide .......................................... 366 Commandes inactives et en lecture seule ................... 368 Commandes inactives ............................................ 368 Commandes en lecture seule ................................... 369 Soumission du formulaire ....................................... 370 Mthodes de soumission du formulaire ....................... 370 Commandes russies ............................................ 371 Traitement des donnes du formulaire ......................... 373 Types de contenu du formulaire ................................. 374 Remarques propos des formulaires ........................ 375 Rsum ............................................................. 376

LE GUIDE COMPLET 7

Sommaire

Chapitre 10

Scripts

379

10.1. Introduction aux scripts ......................................... 381 10.2. lment SCRIPT .................................................. 383 Dfinition du type de script : dclaration META et attribut type de llment SCRIPT ........................................ 386 Autres attributs de llment SCRIPT .......................... 387 Cas des agents utilisateurs qui ne grent pas les scripts ... 388 10.3. vnements intrinsques ....................................... 390 10.4. Travail avec les scripts ........................................... 396 JavaScript .......................................................... 397 ECMAScript ........................................................ 412 VBScript ............................................................ 413 Traitement de formulaires laide de scripts .................. 415 Cookies ............................................................. 416 10.5. Applets .............................................................. 424 lment OBJECT .................................................. 426 lment PARAM ................................................... 429 Dclaration et instanciation des objets ........................ 431 10.6. Rsum ............................................................. 432

Chapitre 11

Publication sur le Web

435

11.1. Identication du public .......................................... 436 11.2. Accessibilit ....................................................... 438 Accessibilit des tableaux ....................................... 441 Accessibilit des jeux dencadrement ......................... 453 Modules complmentaires (plug-in) ........................... 454 11.3. Adaptation plusieurs langues ................................ 456 Attribut lang ........................................................ 457 Attribut dir .......................................................... 461 lment BDO ....................................................... 463 Langues et jeux de caractres .................................. 465 11.4. Test du site ......................................................... 466 Ractions du public ............................................... 471 11.5. Publication sur le Web ........................................... 472 11.6. Suivi de la frquentation de votre site ........................ 478 11.7. Rsum ............................................................. 483

8 LE GUIDE COMPLET

Sommaire

Chapitre 12

Annexes

487

12.1. Jeu des entits de caractres Latin-1 ........................ 488 12.2. lments et attributs HTML 4.01 .............................. 491 lments HTML 4.01 .............................................. 492 Attributs HTML 4.01 .............................................. 504 12.3. Compatibilit XHTML/HTML ................................... 513 Rdaction correcte des documents ............................ 513 Remarques sur les lments .................................... 515 Remarques sur les attributs ..................................... 516 Exclusions SGML ................................................. 518 Instructions de traitement ........................................ 518 Modle Objet de Document et XHTML ........................ 519 Feuilles de style imbriques (CSS) et XHTML ................. 519 DTD XHTML ........................................................ 520 12.4. DTD et XML ........................................................ 523 Dclaration dun lment ........................................ 524 Dclaration dattributs ............................................ 526 Dclaration de notations ......................................... 527 Dclaration dentits .............................................. 528 12.5. Slecteurs CSS ................................................... 530 12.6. Ressources Web .................................................. 533 Spcifications ...................................................... 533 Outils de cration Web ........................................... 533 Navigateurs ......................................................... 534 Images .............................................................. 534 Feuilles de style .................................................... 535 Scripts ............................................................... 535 Modules complmentaires ...................................... 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 gnration : XHTML ...................................................................................... 21 Prsentation rapide de la syntaxe et de la structure du langage ............................. 22 Rsum ................................................................................................................................... 25

Chapitre 1

Introduction HTML

La lecture de cette introduction pourrait ne pas paratre certains comme totalement indispensable la comprhension du reste de louvrage. Pourtant, connatre la gense et lvolution de HTML et des langages apparents peut vous simplier grandement la vie, en vous permettant de mieux comprendre les proccupations et buts sous-jacents des crateurs et dveloppeurs du langage. Pour la cration dun site Web comme pour nimporte quelle activit de dveloppement, connatre lhistorique et la philosophie du langage employ procure un avantage souvent dterminant pour une russite parfaite.

1.1. Bref historique de HTML

Le langage HTML (HyperText Markup Language) a t dvelopp initialement par Tim Berners-Lee, alors au CERN. Il a rapidement connu un vif succs grce au navigateur Mosaic, dvelopp au NCSA. Pendant les annes 1990, il a poursuivi sa croissance en protant de celle, explosive, du Web, et sest enrichi de nombreuses manires. 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 spcications de HTML. Cest un format non propritaire 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 ddis sophistiqus 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-ttes, paragraphes, listes, liens hypertextes, etc. La spcication HTML 2.0 (RFC 1866 de novembre 1995) a vu le jour sous le contrle de lIETF (Internet Engineering Task Force). Le groupe de travail HTML du W3C (World Wide Web Consortium) diffuse en janvier 1997 la spcication HTML 3.2, qui apporte plusieurs amliorations et modications.
tats davancement dun document W3C

Tout document W3C passe par plusieurs tats davancement (ou de maturit) portant un nom prcis.
Brouillon (WD, Working Draft) : un document publi par le W3C an quil

soit examin par la communaut compose 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 considre que le document a t largement comment et rpond 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) : cest

dsormais un document technique mature, dont la possibilit de mise en uvre a t largement vrie. Il est envoy au Comit Consultatif (Advisory Committee) pour adoption nale.
Recommandation (REC, Recommendation) : une Recommandation W3C

est une spcication ou un ensemble de rgles ayant reu lapprobation du W3C. W3C en recommande un large dploiement. Elle est analogue un standard tel que diffus par dautres organismes.

Viendra ensuite la spcication HTML 4, un progrs immense par rapport aux versions antrieures. Ses principales innovations concernent linternationalisation, laccessibilit, les tableaux, les documents composs, les feuilles de style, les scripts et limpression.
j Internationalisation

: les documents peuvent tre crits en toutes les langues et diffuss partout dans le monde. Cela a t accompli en tenant compte du document RFC 2070, qui traite de linternationalisation de HTML. Ladoption de la norme ISO/IEC:10646 comme jeu de caractres du document pour HTML a reprsent une tape importante. Cest la norme mondiale la plus complte, qui tient compte des problmes concernant la reprsentation des caractres internationaux, le sens des critures, la ponctuation et autres particularits des langues mondiales. Cela permet une indexation des documents par les moteurs de recherche, une typographie de qualit, la synthse de la parole partir du texte, la csure, etc. Accessibilit : au fur et mesure de la croissance de la communaut du Web et de la diversication des capacits et aptitudes de ses membres, il devient crucial que les technologies employes soient appropries leurs besoins spciques. Le langage HTML a t conu pour rendre les pages Web plus accessibles ceux qui prsentent des dciences physiques. Les dveloppements de HTML 4 qui ont t inspirs par le souci de laccessibilit comprennent : une meilleure distinction de la structure et de la prsentation du document, en encourageant pour cela lutilisation des
LE GUIDE COMPLET 13

Chapitre 1

Introduction HTML

feuilles de style au lieu des lments et attributs de prsentation HTML ; lamlioration des formulaires, ce qui comprend lajout de touches daccs rapide (access keys), la possibilit de regrouper smantiquement les contrles des formulaires et les options de llment SELECT ainsi que lajout des tiquettes actives (active labels) ; la possibilit de baliser la description textuelle dun objet incorpor (avec llment OBJECT) ; un nouveau mcanisme dimages cliquables ct client (llment MAP), qui permet aux auteurs dintgrer des liens sous forme de texte et dimages ; laccompagnement obligatoire des images incluses avec llment IMG et des images cliquables incluses avec llment AREA, dun texte de remplacement, ainsi que des descriptions longues des tableaux, images, cadres, etc. ; la gestion des attributs title et lang pour tous les lments, ainsi que des lments ABBR et ACRONYM ; un ventail largi des mdias cibles (tty, braille, etc.) utiliser avec les feuilles de style ; lamlioration des tableaux, en y incluant des lgendes, des regroupements de colonnes et des mcanismes pour faciliter la restitution non visuelle ;
j Tableaux

: le nouveau modle de tableau est fond sur le document RFC1942. Les auteurs disposent maintenant dun plus grand contrle sur leur structure et leur disposition (par exemple, les regroupements de colonnes). Ils peuvent spcier la largeur des colonnes et permettre aux agents utilisateurs dafficher les donnes de table progressivement, au fur et mesure du chargement, plutt que dattendre le chargement entier du tableau. Documents composs : le langage HTML offre maintenant une structure standard pour lincorporation dobjets mdia et dapplications gnriques dans les documents HTML. Llment OBJECT (de mme que ses anctres, les lments plus spciques IMG et APPLET) fournit le moyen dinclure des images, des squences vido, de laudio, des mathmatiques, des applications spcialises et dautres objets dans un document. Il permet aussi aux auteurs de spcier une hirarchie de restitutions de

14 LE GUIDE COMPLET

Bref historique de HTML

Chapitre 1

remplacement aux agents utilisateurs qui ne grent pas certaines restitutions particulires. Feuilles de style : les feuilles de style simplient le balisage HTML et soulagent grandement HTML des responsabilits de la prsentation. Elles donnent aux auteurs comme aux utilisateurs le contrle de la prsentation des documents (informations sur les polices de caractres, alignement, couleurs, etc.). Les informations de styles peuvent tre spcies pour un lment ponctuel ou pour des groupes dlments. Elles peuvent se trouver lintrieur du document HTML ou dans une feuille de style externe. Les mcanismes qui associent une feuille de style un document sont indpendants du langage de feuille de style. Avant lapparition des feuilles de style, les auteurs disposaient dun contrle limit sur la restitution des pages. HTML 3.2 comprenait un certain nombre dattributs et dlments permettant un contrle de lalignement, de la taille de la police de caractres et de la couleur du texte. Les auteurs abusaient galement de tables et dimages pour la mise en pages. Le temps relativement long ncessaire pour que les utilisateurs mettent jour leurs navigateurs implique que ces usages vont perdurer encore pendant un certain temps. Cependant, puisque les feuilles de style offrent des moyens de prsentation plus puissants, le W3C fera graduellement disparatre nombre dlments et dattributs de prsentation HTML. Les lments et attributs concerns sont marqus comme dconseills . Scripts : les scripts permettent aux auteurs de concevoir des pages Web dynamiques (par exemple, des formulaires intelligents qui ragissent au cours de leur remplissage par lutilisateur) et demployer HTML comme support dapplications en rseau. Les mcanismes fournis pour associer HTML et scripts sont indpendants du langage de script. Impression : les auteurs voudront parfois aider lutilisateur dans limpression dautres documents, en sus du document courant. Lorsque des documents font partie dun ensemble, on peut dcrire leurs relations en utilisant llment HTML LINK ou encore en utilisant le cadre de description des ressources (RDF) du W3C.

Fondamentalement, HTML 4 spare bien plus efficacement la structure de la prsentation. Les lments et attributs de prsentation HTML sont de plus en plus remplacs par dautres mcanismes, en particulier les feuilles de style. Plus particulirement, les anciens lments FONT et BASEFONT sont dsormais dconseills.
LE GUIDE COMPLET 15

Chapitre 1

Introduction HTML

La spcication HTML 4.01 est enn une rvision de HTML 4 qui corrige des erreurs et apporte certaines modications la version prcdente. Vous pourrez trouver le texte en franais de la spcication HTML 4.01 ladresse www.la-grange.net/w3c/html4.01/cover.html Cette spcication incorpore davantage demprunts au langage XHTML (eXtensible HyperText Markup Language), ce qui a permis dallger dautant la spcication XHTML 1.0. HTML 4.01 existe en trois parfums . Vous spciez la variante employer en insrant une ligne au dbut du document. Chaque variante dispose de sa propre dfinition de type de document, ou DTD (Document Type Definition), qui spcie les rgles demploi de HTML de faon claire et succincte :
j

Le DTD HTML 4.01 strict comprend tous les lments et attributs qui ne sont pas dconseills ou qui napparaissent pas dans les documents avec jeu dencadrement. Pour les documents qui utilisent ce DTD, prendre la dclaration de type de document suivante :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Le DTD HTML 4.01 transitoire inclut la totalit du DTD strict auquel se rajoutent les lments et attributs dconseills (la plupart dentre eux concernant la prsentation visuelle). Pour les documents qui utilisent ce DTD, prendre la dclaration de type de document suivante :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Le DTD HTML 4.01 de jeu dencadrement inclut la totalit du DTD transitoire complt des cadres (frames). Pour les documents qui utilisent ce DTD, la dclaration de type de document suivante est employe :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

DTD

La dnition de type de document, ou DTD (Document Type Definition), dnit la structure dun document, les lments et attributs qui y sont autoriss, et le type de contenu ou dattribut permis. Un document bien form rpond simplement aux exigences de la spcication, tandis quun document valide se conforme strictement aux rgles tablies par la DTD laquelle il fait rfrence.
16 LE GUIDE COMPLET

Pendant ce temps

Chapitre 1

Ltude complte des DTD dpasse lobjectif de ce livre. Une excellente prsentation est disponible ladresse http://developpeur
.journaldunet.com/tutoriel/xml/031219xml_dtd1a.shtml

Dans lensemble de ce livre, nous nous conformerons la spcication HTML 4.01.

1.2. Pendant ce temps

Au cours de cette priode, dautres groupes de travail sintressaient diffrents aspects plus ou moins intgrs progressivement dans les spcications HTML successives.

XML
XML (eXtensible Markup Language) a t dvelopp sous lgide du W3C en 1996. Il dcrit une classe dobjets nomms documents XML et dcrit 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 constitus dunits de stockage nommes entits , renfermant des donnes analyses (parsed) ou non analyses (unparsed). Les donnes analyses sont composes de caractres, dont certains forment des donnes caractre et dautres un balisage. Le balisage code une description de la structure logique de stockage du document. XML procure un mcanisme imposant certaines contraintes sur cette structure logique. Un module logiciel nomm processeur XML sert lire les documents XML et procurer laccs leur structure et leur contenu. Par dnition, un processeur XML accomplit son travail pour le compte dun autre module, lapplication. Cette spcication dcrit le comportement attendu dun processeur XML : la faon dont il doit lire les donnes XML et les informations quil doit transmettre lapplication.

LE GUIDE COMPLET 17

Chapitre 1

Introduction HTML

Les objectifs fondamentaux de XML sont les suivants :

j j j j j j j j j j

XML doit tre largement utilisable sur Internet. XML doit prendre en charge une large gamme dapplications. XML doit tre compatible avec SGML. Lcriture de programmes traitant les documents XML doit tre facile. Les dispositifs facultatifs de XML doivent tre limits voire, dans lidal, inexistants. Les documents XML doivent tre clairs et lisibles par les humains. La conception XML doit pouvoir tre effectue rapidement. XML doit tre formel et concis. Il doit tre facile de crer des documents XML. Le ct abrupt du balisage XML importe peu.

Cette spcication, accompagne de ses standards associs (Unicode et ISO/IEC 10646 pour les caractres, Internet RFC 3066 pour les balises didentication 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 ncessaires pour comprendre XML Version 1.0 et construire les programmes informatiques qui le traitent.

CSS (Cascading Style Sheet)

Le langage CSS permet de dnir des feuilles de style qui peuvent tre appliques un site Web. Il permet la manipulation des styles appliqus chaque balise HTML, via un langage de script. La premire Recommandation CSS (Recommandation W3C du 17 dcembre 1996 rvise le 11 janvier 1999) a dni tout ce qui touche aux caractristiques graphiques : couleurs, polices, tailles, etc. Une seconde Recommandation (CSS2, 12 mai 1998) a t ajoute pour grer tous les problmes de positionnement dynamique. Elle dnit 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 caractres, lespacement et un signal auditif) aux documents structurs (comme les documents HTML et applications XML). En

18 LE GUIDE COMPLET

Pendant ce temps

Chapitre 1

sparant la prsentation du style du contenu des documents, CSS2 simplie ldition pour le Web et la maintenance dun site. CSS2 tant construit sur CSS1, toute feuille de style valide en CSS1 est ainsi galement valide en CSS2, quelques rares exceptions prs. CSS2 prvoit des feuilles de style lies un mdia spcique, ce qui autorise les auteurs prsenter des documents sur-mesure pour les navigateurs visuels, les synthtiseurs de parole, les imprimantes, les lecteurs en braille, les appareils portatifs, etc. Cette spcication introduit aussi les notions de positionnement du contenu, de tlchargement des polices, de mise en forme des tables, de fonctions dinternationalisation, de compteurs et de numrotage automatique et quelques proprits concernant linterface utilisateur. Aujourdhui, un troisime projet (CSS3, Brouillon du 23 mai 2001) est en cours de ralisation. Il modularise CSS2. Plusieurs de ces modules sont aujourdhui ltat 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 nest pas proprement parler un langage de balises pour Internet : il nexiste dailleurs aucune norme DHTML part entire. Cest en ralit un ensemble de technologies Internet associes an de fournir des pages HTML plus dynamiques. Microsoft a suivi cette voie en dveloppant une autre version de DHTML partir de la version 4 dInternet Explorer. DHTML sappuie sur HTML (ncessaire pour prsenter le document), sur les feuilles de style (CSS), qui permettent de dnir un style pour plusieurs objets et le positionnement de ceux-ci sur la page, sur le Modle Objet de Document (DOM), proposant une hirarchie dobjets an de faciliter leur manipulation, et enn sur un langage de script, essentiel pour dnir des vnements utilisateur. Il sagit essentiellement de JavaScript (dvelopp par Netscape) ou de JScript (dvelopp par Microsoft), et ventuellement de VBScript, la tendance tant toutefois demployer dsormais ECMAScript, une tentative de normalisation du noyau du langage : sa syntaxe, ses mots-cls et ses composants natifs. La troisime dition du standard ECMA-262 a t publie en dcembre 1999 (www.ecma-international.org/publications/standards/Ecma-262.htm). Sans script, le DHTML nest pas dynamique. Cest lassociation avec le script qui permet dapporter des modications aprs le chargement de la page, chose impossible avec le HTML classique. Avec ce dernier, une fois la page charge et affiche, il est impossible dafficher de nouveaux lments ou de les dplacer.

LE GUIDE COMPLET 19

Chapitre 1

Introduction HTML

Le DHTML serait trs intressant utiliser sil existait une norme officielle respecte par les navigateurs, ce qui reste loin dtre le cas : un script crit pour un navigateur risque fort de ne pas fonctionner sur un autre sans travail dadaptation. Mme si chacun peut potentiellement proter du DHTML, puisque pratiquement plus aucun internaute nutilise de navigateur de gnration infrieure la version 4, les nombreuses incompatibilits entre navigateurs provoquent de grandes difficults. DHTML nest donc en rien comparable au PHP, lASP, aux CGI, qui permettent de formater la vole les pages dun site (souvent interfac avec des bases de donnes) en proposant du contenu en temps rel et en interagissant avec lutilisateur. La majorit des effets du DHTML restent ainsi rservs aux intranets, o la population des navigateurs est connue et matrise.

DOM2 (Document Object Model level 2)

Le Modle Objet de Document (DOM, Recommandation W3C du 13 novembre 2000) est une interface de programmation dapplication (API) pour des documents HTML valides et XML bien forms. Il dnit la structure logique dun document et la manire dy accder et de le manipuler. Dans la spcication DOM, le terme document est employ au sens large : XML sert de plus en plus reprsenter de nombreuses sortes dinformations, qui peuvent tre stockes sur des systmes varis, et taient traditionnellement considres comme des donnes plutt que comme des documents. XML prsente nanmoins ces donnes comme des documents, le DOM permettant de grer ces donnes. Avec le Modle Objet de Document, les programmeurs peuvent construire des documents, naviguer dans leur structure ainsi quajouter, modier ou effacer des lments et leur contenu. Tout ce qui se trouve dans un document HTML, ou XML, peut tre touch, modi, effac ou ajout en utilisant le Modle Objet de Document, quelques rares exceptions prs. Un objectif important du DOM en tant que spcication W3C est de fournir une interface de programmation standard pouvant tre utilise dans une grande diversit denvironnements et dapplications. Le DOM est conu pour une utilisation dans nimporte quel langage de programmation.

20 LE GUIDE COMPLET

La nouvelle gnration : XHTML

Chapitre 1

1.3. La nouvelle gnration : 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 fonds sur XML dans le but de fonctionner avec des agents utilisateurs fonds eux aussi sur XML. Cest le successeur de HTML, disposant dsormais de sa propre spcication, XHTML 1.0. Celle-ci est la premire Recommandation W3C pour XHTML, cre daprs les travaux antrieurs 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 lments et attributs de la Recommandation W3C HTML 4, ce qui permet son interprtation par les navigateurs existants tant que certaines rgles trs simples sont respectes (voir Annexe C). Vous pouvez donc employer ds prsent XHTML. Vous pouvez transformer vos anciens documents HTML en XHTML grce un convertisseur dOpen Source, HTML Tidy. Cet outil limine au passage certaines erreurs de balisage, rduit lparpillement et amliore globalement le balisage, facilitant dautant sa maintenance ultrieure. Comme HTML 4.01, XHTML 1.0 existe en trois parfums : Strict, Transitional et Frameset. Vous choisissez la variante en insrant une ligne au dbut du document, spciant le DTD employ. La spcication XHTML 1.0 complte en anglais est disponible en plusieurs formats, dont HTML, PostScript et PDF. Il existe galement de nombreuses traductions, dont une version franaise disponible ladresse www.la-grange.net/w3c/xhtml1/ Nous signalerons lorsque ncessaire les modications apporter au code HTML 4.01 pour une parfaite compatibilit avec la spcication XHTML 1.0.

LE GUIDE COMPLET 21

Chapitre 1

Introduction HTML

1.4. Prsentation rapide de la syntaxe et de la structure du langage

HTML est fondamentalement un langage trs simple, dans lequel des balises (tag) dnissent un lment et ses proprits. En HTML, ces balises sont les signes infrieur et suprieur (comme dans <TITLE>). Une balise dnit un lment : un objet, texte ou autre, encadr par une balise douverture et une balise de fermeture. Cette dernire est identique la balise douverture, ceci prs quune barre oblique (slash) est place entre l e caractre infrieur et le nom de llment. Entre les deux balises est plac le contenu :
<TITLE>Titre</TITLE>

Ici, llment est TITLE, la balise douverture <TITLE>, le contenu Titre et la balise de fermeture </TITLE>. Certains lments peuvent exceptionnellement tre prsents dans un document sans balise : <HEAD> et HEAD sont tous les deux valides. Les lments dpourvus de contenu portent le nom dlments vides. Si cette absence de contenu est lie la dnition de llment, celui-ci est galement dpourvu de balise de fermeture : un tel lment accomplit quelque chose, puis sarrte, devenant superu dans le code. Un saut de ligne (BR) est un tel lment vide : une fois le saut de ligne effectu, il ny a plus rien faire. Vous rencontrerez par la suite dautres lments vides.
XHTML

XHTML impose que tout lment possde une balise de fermeture. Il existe toutefois une notation particulire signalant en XTML un lment vide :
<br />

ou
<img src="image.jpg" alt="image" />

Cette construction est prfrer <BR></BR>, autorise par XML, mais qui provoque des rsultats inattendus avec certains agents utilisateurs.

22 LE GUIDE COMPLET

Prsentation rapide de la syntaxe et de la structure du langage

Chapitre 1

Un lment nest pas une balise !

Certaines personnes font rfrence aux lments comme des balises (par exemple, la balise P ). Souvenez-vous que llment P est une chose et que la balise <P> en est une autre. Par exemple, llment HEAD est toujours prsent, mme si les balises ouvrante <HEAD> et fermante </HEAD> peuvent tre absentes du document.

Les lments se rpartissent en deux catgories principales : les blocs et les lignes, qui quivalent rciproquement aux styles paragraphe et caractre dun traitement de texte. Un lment de type bloc cre un nouveau bloc (texte ou graphique), gnrant le plus souvent un saut de ligne ou de paragraphe lors de son ouverture et/ou de sa fermeture. Le plus classique des lments de type bloc est le paragraphe de texte, mais il en existe bien dautres, comme vous le verrez. En revanche, un lment ligne ne provoque pas de saut de ligne ou de paragraphe et naffecte pas la totalit du bloc. Cest le cas des lments modiant la police, les couleurs, etc. Quelques trs rares lments peuvent tre la fois de type bloc et de type ligne. Tout lment peut possder des lments enfants imbriqus. Il porte alors le nom dlment parent :
<H1>Ceci est le titre <B>important</B></H1>

Ici, un lment B (gras) est imbriqu dans llment parent H1 (en-tte de niveau 1). Le contenu de llment H1 est Ceci est le titre <B>important</B>, celui de llment B est important. Les lments peuvent possder des proprits associes, appeles attributs, qui peuvent eux-mmes possder des valeurs (par dfaut, ou encore dnies par lauteur ou par un script). Les couples attribut/valeur apparaissent avant le caractre > nal de la balise ouvrante dun lment. Un nombre quelconque de couples attribut/valeur (autoriss), spars par des espaces, peuvent apparatre dans la balise ouvrante dun lment. Ils peuvent survenir dans nimporte quel ordre :
<IMG src="image.gif">

Les attributs sont obligatoires pour certains lments.

LE GUIDE COMPLET 23

Chapitre 1

Introduction HTML

Sensibilit la casse

Les lments HTML et leurs attributs ne sont pas sensibles la casse. Si thoriquement vous navez donc pas vous proccuper de la bonne utilisation de majuscules et de minuscules dans vos balises, sauf pour les noms de chiers, daprs la spcication, les noms de balise doivent toujours tre crits en majuscules et les attributs en minuscules.

En gnral, mieux vaut toujours placer la valeur dun attribut entre guillemets, mme si HTML tolre leur absence lorsquil sagit dune valeur numrique (contrairement XTML). Cette valeur place entre guillemets doit tre considre comme sensible la casse. Cette sensibilit la casse des valeurs dattributs peut provenir du navigateur (exceptionnellement) ou du serveur (trs frquemment). Ainsi, une telle faute de casse peut passer inaperue localement, mais tre agrante une fois le site publi.
XHTML

En revanche, XHTML est sensible la casse : la spcication recommande dcrire tous les noms dlments et dattributs en minuscules. Pour XML, <li> et <LI> sont des balises diffrentes. Un soin particulier doit en outre tre apport au respect de la casse des valeurs des attributs.

Le Tableau 1.1 montre la structure dun lment, illustre de quelques exemples. Une balise HTML comporte toujours les signes <>.
Tableau 1.1 : Structure dun lment HTML

Composant < ELEMENT Attribut Valeur

Description Balise ouvrante de la balise douverture Nom de llment Proprit de cet lment. Parfois obligatoire pour certains lments. Valeur de lattribut, prcde dun signe gal et normalement place entre guillemets. Balise fermante de la balise douverture

Exemple

< A href ="http://www. microapplication.fr" >

>

24 LE GUIDE COMPLET

Rsum
Tableau 1.1 : Structure dun lment HTML

Chapitre 1

Composant Contenu </ELEMENT>

Description Contenu de llment (pas pour tous les lments). Balise de fermeture (parfois facultative).

Exemple

MicroApplication </A>

Toute page HTML est compose, aprs la ligne de dclaration du DTD, dun lment racine HTML qui comprend deux lments enfants :
j

Len-tte (HEAD) comprend des donnes non-affiches par le navigateur, servant sa conguration ou prsentes au bnce de lauteur, du lecteur ou dautres intervenants. Le corps (BODY) contient les donnes qui seront affiches, encadres par des balises spciant leur structure.

Une page HTML se prsente donc fondamentalement comme suit :

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

Nous reviendrons bien sr plus en dtail par la suite sur cette structure.

1.5. Rsum
j

HTML est un langage conu par le CERN au dbut des annes 1990. Fond sur SGML (Standard Generalized Markup Language), il
a connu plusieurs volutions avant de parvenir la spcification actuelle HTML 4.01.

HTML spare dsormais efficacement la structure de la prsentation. Les lments et attributs de prsentation HTML sont de plus en plus remplacs par dautres mcanismes, en particulier les feuilles de style. 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

j j

apparentes dsormais intgres ou exploites en tout ou partie et par HTML. XHTML reprsente la future gnration de HTML. La spcication actuelle est XHTML 1.0. HTML est un langage dans lequel des balises (tag) dnissent un lment et ses proprits. En HTML, ces balises sont les signes infrieur et suprieur (<>). Une balise dnit un lment encadr par une balise douverture et une balise de fermeture. Le contenu gure entre ces deux balises. Il existe deux catgories principales dlments : les blocs et les lignes. Un lment de type bloc cre un nouveau bloc, gnrant le plus souvent un saut de ligne ou de paragraphe lors de son ouverture et/ou de sa fermeture. En revanche, un lment ligne ne provoque pas de saut de ligne ou de paragraphe et naffecte pas la totalit du bloc de texte. Les lments peuvent possder des proprits associes, ou attributs, dotes de valeurs. Les couples attribut/valeur apparaissent avant le caractre > nal de la balise ouvrante dun lment. Les attributs sont obligatoires pour certains lments.

26 LE GUIDE COMPLET

Les outils Web

Outils de cration de pages Web ..................................................................................... 28 Navigateurs ............................................................................................................................ 36 Rsum ................................................................................................................................... 42

Chapitre 2

Les outils Web

Pour bien concevoir un site Web, vous devez connatre et matriser deux types doutils : un ou plusieurs diteurs HTML, qui permettent de crer effectivement les pages et donc le site Web, et un ou plusieurs navigateurs, qui affichent rellement ces pages Web. Vous pourriez penser : daccord, parler des logiciels de cration de sites est logique, mais pourquoi aborder les navigateurs ? La rponse est simple : malgr lexistence des Recommandations du W3C, la petite guerre entre les grandes familles de navigateurs ainsi que leur obstination prconiser plutt telle ou telle mthodologie (et surtout pas celle utilise par lautre) fait que le rendu dune mme page HTML peut grandement diffrer selon le navigateur employ.

2.1. Outils de cration de pages Web

Un diteur HTML a pour but dviter la saisie manuelle souvent fastidieuse des caractres spciaux, des codes couleur, de lencodage des balises, etc. Comme il en existe un grand nombre, quelques prcisions sur les outils disponibles peuvent tre utiles. Remarquez toutefois que toute apprciation en ce domaine relve du subjectif : nous nen prsentons que quelques-uns, classs par ordre alphabtique. La plupart des diteurs tant disponibles sur le Net en version dvaluation, il peut tre utile den tester plusieurs avant de procder un choix dnitif. Les diffrents outils peuvent tre classs en deux catgories : les diteurs commerciaux et les produits Open Source (gratuits). Ils se rpartissent galement entre diteurs WYSIWYG (What You See Is What You Get) et les diteurs en texte brut, qui ncessitent de connatre le HTML. Ces derniers disposent gnralement dune fonction de prvisualisation dans laquelle le codage des balises HTML napparat plus. Gardez cependant toujours lesprit que cette prvisualisation nest, et ne sera, jamais dle 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 llaboration de votre page. Adoptez lditeur avec lequel vous vous sentez le plus laise. Mme sil nest pas le plus clbre, il sera votre compagnon de longues heures de travail. Dailleurs, pourquoi se limiter un seul diteur ? Il est tout fait envisageable demployer un diteur volu pour les premiers jets, an de disposer rapidement dun

28 LE GUIDE COMPLET

Outils de cration de pages Web

Chapitre 2

brouillon exploitable, puis de recourir un diteur de la premire gnration (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 bncie du savoir-faire dAdobe en matire dimages et dillustrations et permet la gestion de la mise en page au pixel prs, la gestion de linteractivit grce une ligne du temps et un diteur JavaScript, la cration 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 gnr est dune complexit certaine, faire plir tout puriste du codage HTML, tandis que son prix reste lev (479 Q).

Dreamweaver MX 2004 (Windows, Mac)

Macromedia Dreamweaver est considr par beaucoup comme le meilleur diteur HTML du moment. Il permet de concevoir intelligemment la cration de sites (codage HTML propre et acadmique, compatibilit avec les diffrents navigateurs, mises jour dans tout le site, etc.). Certainement un peu droutant lors de la premire prise en main, en raison de son nombre impressionnant de palettes doutils, il est facile de sy habituer : cet diteur WYSIWYG convient aussi bien aux dbutants quaux initis. 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 spcialement de Word, ne seront pas dpayss par linterface de lditeur de Microsoft : sa prise en main leur est ainsi aise. Cest un bon produit, auquel on ne peut reprocher quune faon peu acadmique dcrire le HTML : il est frquent que des navigateurs autres quInternet Explorer prouvent quelques difficults interprter 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 socit Sausage Software, prend en charge un nombre encore plus grand de langages (HMTL, JavaScript, CSS, PHP, ASP, VBScript). Particulirement puissante, elle dispose d peu prs toutes les fonctions envisageables. Linterface souvre sur une fentre mixte qui prsente la fois le code et sa mise en page obtenue via le navigateur. De trs nombreux outils et fonctions sont disponibles. Les outils Supertoolz peuvent tre tlchargs en groupe ou sparment depuis le site Internet de Sausage Software. Lutilisation de la couleur en fonction des balises ou de la syntaxe, la gestion de sites, la prise en charge des codes de classement PICS (ltrage des contenus indsirables) et des canaux Web denvoi de donnes linstigation du serveur sont quelques-unes des possibilits offertes. HotDog affiche automatiquement en rouge toute erreur de syntaxe HTML quil dtecte. Cette version intgre Xara MenuMaker (pour la cration de menus anims en DHTML ) ainsi que Bloomer (facilite la cration danimations ash) (100 $).

Namo WebEditor
Intermdiaire entre FrontPage Express et FrontPage 2000, cet diteur devrait ravir les webmestres dbutants intermdiaires refusant de recourir des usines gaz plus performantes, mais aussi plus complexes. Raisonnablement complet et intelligemment conu, 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 vrier instantanment le rsultat de son codage. Intressant pour ceux qui prfrent avoir la sensation de coder du HTML plutt que celle demployer un traitement de texte. Cest un diteur complet, intelligent, respectueux du code et de lesprit HTML. Disposant de scripts et daides intgrs, il permet de travailler rapidement et efficacement sur (X)HTML, CSS, JavaScript, ASP et PHP. Il possde un autre intrt : son faible prix (67 Q). Vous pouvez facilement en trouver une version dvaluation de 30 jours en tlchargement.

30 LE GUIDE COMPLET

Outils de cration de pages Web

Chapitre 2

Web Fast (Windows)

Web Fast est plus un outil complet de gestion de site quun simple diteur Web. Ds son lancement du logiciel, il prend en charge les tapes ncessaires la construction du site. Web Fast intgre le site lui-mme, le logiciel FTP ncessaire sa publication sur Internet, les fonctions de commerce lectronique (versions Plus et Pro) avec suivi de commandes, le paiement scuris (version Pro), les statistiques compltes du site et un back-office. Le prix schelonne selon la version de 75 456 Q. Il existe bien dautres diteurs commerciaux, parmi lesquels HotMetal (500 $, voir www.xmetal.com/) et CoffeeCup HTML (www.coffeecup.com /html-editor/, 49 $). Vous pourrez les dcouvrir en lanant une recherche laide 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 considr comme un diteur HTML : il est possible denregistrer un texte au format HTML, le traitement de texte se chargeant dajouter toutes les balises ncessaires en fonction de ce qui a t saisi. Cela est malheureusement accompagn dun fatras de balises absolument superues, le respect des spcications W3C restant interprt de faon trs personnelle par Microsoft dconseiller absolument.

diteurs gratuits
Est-il rellement ncessaire de recourir un logiciel payant ? Aucunement. Il existe de trs nombreux produits gratuits, capables deffectuer un excellent travail et probablement trs suffisants pour la cration dun site personnel.

1st Page 2000 (Windows)

1st Page 2000 est un outil de cration de sites Web aussi adapt la cration des pages HTML qu llaboration de scripts dans les langages de programmation les plus rcents. Son interface disponible sous trois formes le destine tant aux dbutants quaux professionnels du secteur.

LE GUIDE COMPLET 31

Chapitre 2

Les outils Web

Ce logiciel offre toutes les fonctionnalits courantes de ses concurrents payants, jusquaux plus sophistiques comme en tmoigne la prsence dun convertisseur XML, dun vricateur de syntaxe, dun compresseur de documents ou encore dun client FTP intgr. Il offre par ailleurs des possibilits originales comme le redimensionnement automatique des images, la correction de lorthographe en cours de frappe (en anglais) et la prvisualisation dans quatre navigateurs diffrents. Outre ldition en JavaScript particulirement bien prise en charge, 1st Page 2000 permet de manipuler les chiers Flash et Shockwave. Il sait identier 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 ncessaire. Il nest actuellement disponible quen anglais et peut tre trouv en tlchargement un peu partout. Le site officiel se trouve ladresse www.evrsoft.com/1stpage2.shtml.

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

Navigateur et diteur WYSIWYG gratuit du W3C. Il sert dmontrer et exprimenter la plupart des nouveaux formats et protocoles dvelopps par le consortium W3. Il est adaptable et extensible, et prend en charge notamment MathLM. Amaya propose par dfaut de crer un nouveau document uniquement dans une des trois versions de la spcication XHTML 1.0 (strict, transitoire, de jeu dencadrement), mais il est possible de transformer le document en version HTML 4.01 (ou mme en version XHTML 1.1) laide de loption de menu File > Change the document type. Cest un produit intressant, ne serait-ce que pour vrier la conformit de votre code (www.w3.org/Amaya/).
Figure 2.1 : Interface dAmaya

32 LE GUIDE COMPLET

Outils de cration 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 dernire version de la suite Mozilla (actuellement la 1.7.7) contient toujours cet excellent diteur, dsormais nomm Mozilla Composer. Tlchargez-la en franais sur www.mozilla-europe.org/fr/ Vous disposerez, en plus du clbre navigateur de lditeur, du logiciel grant la messagerie et les forums et de celui de discussion en direct (Chatzilla). Lditeur Mozilla propose toutes les grandes fonctions dun diteur Web, dont des modes en code source ou en WYSIWYG, lintgration de feuilles de style et un logiciel ftp (file transfert protocol) pour envoyer vos pages sur un serveur distant. Bien conu, cet diteur WYSIWYG reprend les principales, et donc les plus usuelles, fonctions du HTML. Il reste cependant un peu lger face aux diteurs HTML plus spcialiss.

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 dautres navigateurs. Prudence

Figure 2.3 : Front Page Express

NotePad (Windows)
Eh oui, le bon vieux Bloc-Notes de Windows peut servir dditeur HTML ! Si vous employez Internet Explorer ou que vous en disposez, il est mme probable que vous vous en servirez (ou que vous vous en tes dj servi) votre insu : lorsque vous choisissez dafficher le code source dune page avec ce navigateur (Affichage >> Source), celui-ci saffiche dans le Bloc-Notes. Si vous travaillez en local, vous pouvez immdiatement modier le code, enregistrer le chier, puis rafrachir votre navigateur (bouton Actualiser ou Affichage >> Actualiser) pour voir les rsultats de vos modications ; et cela dune faon souvent plus dle que celle du volet de prvisualisation des diteurs plus volus. Oserai-je avouer que, comme cest le cas pour dautres anciens programmeurs, le Bloc-notes reste mon principal diteur HTML, surtout en raison du mcanisme qui vient dtre expliqu : jai pris lhabitude de travailler ainsi un site en local sous IE, mme si mon navigateur Web principal est en ralit FireFox

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

34 LE GUIDE COMPLET

Outils de cration de pages Web

Chapitre 2

Nvu 1.0/KompoZer (Linux, Windows et Mac OSX)

Nvu (prononcer N-viou ) est la refonte du module ddition HTML de Mozilla dvelopp par Disruptive Innovations. Il permet de crer facilement des pages Web en mode WYSIWYG. Sil nest pas aussi puissant que les poids lourds comme Dreamweaver ou Adobe Golive, il reste largement suffisant pour la majorit des utilisations. Nvu permet de crer des pages Web et de grer un site sans aucune connaissance technique ou apprentissage du HTML, ce qui le rend accessible quasiment tout le monde. Il permet galement de gnrer des documents en XHTML, dditer des pages en PHP et contient un diteur de feuilles de style intgr (CaScadeS) trs pratique. Vous trouverez plus dinformations sur Nvu sur le site officiel du projet Nvu (en anglais), www.nvu.com. Cerise sur le gteau, il existe une version en franais ! Produit recommand.

Figure 2.5 : Interface de Nvu

Nvu nest toutefois plus maintenu et French Mozilla recommande le passage Komposer (http://www.kompozer.net/). La version propose en tlchargement est anglaise, mais il existe des kits de localisation disponibles sur le site officiel ou sur le site de French Mozilla (http: //frenchmozilla.sourceforge.net/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 dun composant FTP capable de tlcharger les chiers sur un serveur. Des outils supplmentaires peuvent tre tlchargs depuis le site de SourceTec Software. Appels widgets (un widget, contraction de Windows et de gadget, dsigne sous Unix et Linux un outil graphique permettant daccomplir une action. Windows emploie plutt le terme de contrle ), ils concernent en particulier la cration de boutons, bannires et menus. SoThink est un diteur qui apportera beaucoup aux dbutants et auteurs de pages Web moyennement expriments (www.sothink.com/htmleditor/). Comme pour les diteurs commerciaux, il existe bien dautres diteurs gratuits. L encore, vous pourrez en identier en lanant une recherche laide de votre moteur de recherche favori. En conclusion, notre avis est quun logiciel gratuit est largement suffisant pour les besoins dun utilisateur normal et peut suffire pour une petite ou moyenne entreprise. Comme nous lavons dj voqu, le choix de ce logiciel dpend de vos prfrences personnelles. Dans les exemples de ce livre, nous nous servirons dun 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 lexcellent Nvu en franais.

2.2. Navigateurs
Si vous souhaitez que votre site soit visible par tous dans de bonnes conditions, et quil ne soit pas rserv aux seuls francophones possdant une vue de 10/10, et disposant de surcrot exclusivement dInternet Explorer version 6 corrig SP2 vous devez prendre en compte les navigateurs de votre public. Sil sagit dun intranet dentreprise, la chose est gnralement facile. Si, en revanche, vous voulez vous ouvrir au monde entier, la tche se complique. La premire tape consiste donc examiner les navigateurs actuellement employs et connatre les principales diffrences 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 larrive dInternet Explorer, Microsoft a insidieusement tent de faire passer dans les murs le terme explorateur Web . Certains technocrates franais ont alors tent une solution intermdiaire, en proposant comme terme officiel fureteur , tandis que les Canadiens prfraient butineur . Nous nous en tiendrons dans ce livre au terme consacr par lhistoire, soit navigateur , malgr une tendresse personnelle pour butineur.

Bref historique : Netscape contre Microsoft

Comme nous lavons dj 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 dpartement de luniversit de lIllinois. Le projet tait dirig par Marc Andreessen. Ses tudes peine termines, ce dernier se rend dans la Silicon Valley, o il participe la cration de lentreprise Mosaic Communications. Le nom Mosaic tant la proprit du NCSA, lentreprise est rebaptise Netscape. Au milieu de lanne 1995, le navigateur de Netscape rgne en matre : il tait alors dpourvu de tout concurrent srieux. Sa part de march na pas t mesure avec prcision cette poque, mais tout le monde saccorde dire quelle dpassait 80 %. Ayant pris conscience de limportance du Web, Microsoft conoit alors son propre navigateur, Internet Explorer, dont la premire version est distribue gratuitement avec Windows 95. Ds 1996, la part de march du navigateur de Netscape ne cesse de dcrotre, au rythme de 1 % par mois environ. Mme si, comme la constat la justice amricaine, Microsoft a abus de sa situation de monopole dans le domaine du systme dexploitation pour imposer son navigateur aux constructeurs de micro-ordinateurs, force est toutefois de reconnatre qu partir de la version 4, Internet Explorer lemporte sur le plan technique : cette avance ne sest ensuite jamais dmentie. 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 bnvoles la possibilit de participer lvolution de son navigateur, Netscape pense probablement pouvoir acclrer et amliorer
LE GUIDE COMPLET 37

Chapitre 2

Les outils Web

sa production. Cest tout le contraire qui se passe. La version 5 du navigateur ne verra jamais le jour, et la version 6 fut, ses dbuts, trs dcevante (oserai-je dire que les termes usine gaz et lenteur extrme sont ici des euphmismes ?) et surtout trs tardive. Ds 1999, les parts de march de Netscape et Microsoft sont respectivement de 29 et 69 % (source : Statmarket). Un des gros dfauts du navigateur de Netscape concernait laffichage des tableaux. Lorsque ceux-ci commencent tre employs massivement pour la conception des pages Web, ce dfaut clate au grand jour. La version 6 est corrige, malheureusement un peu tard : au dbut de lanne 2000, la part mondiale de march du navigateur de Netscape nest plus que de 18 %. Au milieu de lanne 2001, il tait gnralement admis quelle tait descendue autour de 12 %, mais quelle tait stabilise. Lapparition de la version 6 du navigateur de Microsoft (n octobre 2001) provoque une nouvelle baisse de la part de march de son concurrent : elle descend en dessous de 10 % et continue dcrotre, tandis que la version 6 dInternet Explorer connat en revanche un rel succs. La chute sacclre alors de manire exponentielle. Une tude sur lanne 2001 crditait Navigator de 4,5 % de parts de march, contre 94,2 % Explorer. La version 6.2 de Navigator, corrige, apparat enn comme un produit srieux, capable de rivaliser avec la version 6 de son concurrent, sauf en ce qui concerne la vitesse, pourtant amliore. Netscape a mis sur la diffrence : son produit respecte les standards du W3C. Netscape a abandonn les technologies propritaires (JavaScript) au prot de technologies standardises (ECMAScript), alors que Microsoft reste compltement 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 daccs Internet procure toujours ses clients un navigateur qui nest autre que IE personnalis .

De nouveaux challengers
En juin 2002, daprs OneStat, une socit spcialise dans lanalyse de trac, Internet Explorer dpasse la barre des 95 %. Larrive de Netscape Navigator 7.0 en version dvaluation au mois de mai, suivie par celle de Mozilla 1.0 au mois de juin, stabilise cependant le dclin de Navigator. Le prochain abandon de IE par AOL devient de plus en plus probable : Compuserve, liale dAOL, utilise dsormais un navigateur

38 LE GUIDE COMPLET

Navigateurs

Chapitre 2

moteur Gecko. Le navigateur de Netscape aurait donc nalement une chance de survivre. Dbut 2005, avec 90 % du march selon le cabinet dtudes spcialis WebSideStory, Internet Explorer est toujours, de loin, le navigateur Internet le plus utilis dans le monde, bien quayant perdu un peu plus de cinq points depuis juin, principalement au bnce de Firefox, lapplication de la fondation but non lucratif Mozilla. Celui-ci sadjuge prs de 5 % du march en janvier, contre 2,7 % en octobre 2004. Dans les mois qui suivent, Firefox continue sa progression, directement aux dpens dInternet Explorer. Au cours de lt 2005, Netscape jette lponge : la suite Mozilla 8, dont le nom de code tait Seamonkey, ne verra jamais le jour. Lquipe rejoint la Fondation Mozilla pour se consacrer au dveloppement de Firefox et de Thunderbird, le logiciel de messagerie frre. Entre 2005 et 2008, Firefox progresse de prs de 13 points, grignotant sur Internet Explorer et sur les autres produits bass sur Mozilla (la suite et Netscape). On peut remarquer les audiences de Safari (rserv aux derniers Mac OS X) un peu plus de 1,5 %. Opera est dsormais marginal avec 0,1 %.
Tableau 2.1 : Parts de march des navigateurs Web entre janvier 2005

et janvier 2008 daprs Libstat, Mdiamtrie-eStat et Journal du Net (http://solutions.journaldunet.com/dossiers/chiffres/navigateurs.shtml et http://www.libstat.com/pages/navigateur.htm) Navigateur Internet Explorer Mozilla/Firefox Safari Opera Autres Pourcentage au 01/2005 90,7 % 8,1 % 1,2 % 0,3 % 0,6 % Pourcentage au 01/2007 85,3 % 11,7 % 1,6 % 0,6 % 0,3 % Pourcentage au 01/2008 73,4 % 20,7 % 1,5 % 0,1 % 3,3 %

Ces chiffres dpendent toutefois largement du pays et du type dutilisateur : selon certaines donnes, la part de march de Firefox pourrait dj dpasser 35 % en France chez les utilisateurs individuels (hors entreprises).

LE GUIDE COMPLET 39

Chapitre 2

Les outils Web

Il est galement intressant dexaminer les systmes dexploitation employs. Windows Vista atteint 13 %, Windows XP est crdit de 77 %. Les anciens Windows ne reprsentent plus que 4 % des internautes franais. Mac et Linux progressent tout en restant modestes avec respectivement 3,5 et 0,3 % de ces internautes en janvier 2008. Concrtement, cela signie que dans limmdiat vous devez tester vos pages avec Internet Explorer (de prfrence versions 6 et 7) et Firefox pour toucher prs 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 enn avec Konqueror sur une machine Linux.
Tableau 2.2 : Comparaison entre navigateurs Web (source : http://kb.mozillazine.org/Intro_:_Comparison)
Dispositif Mozilla Suite/Firefox Camino Opera (http: //opera.com/) Apple Safari (http://apple.com /safari/) Microsoft Internet Explorer (http://microsoft .com/windows/ie/) Windows

Platesformes prises en charge

Windows, Mac OS X, Linux, autres

Mac OS X

Windows Linux, Symbian (http: //symbian.com/), Motorola (http://motorola .com/), autres 39 $ (ou gratuit avec publicits) Non

Mac OS X

Cot

Gratuit

Gratuit

Intgr

Intgr

Open Source

Oui (http: //mozilla.org /MPL/)

Oui (http: //mozilla.org /MPL/)

Partiellement (http://developer .apple.com /darwin/projects /webcore/) Oui

Non

Onglets de navigation

Oui

Oui

Oui

Avec un programme de tierce partie (comme MyIE2) Oui Limit via modules complmentaires Via une application spare

Blocage des popup Gestionnaire de formulaires/ mots de passe Thmes

Oui Oui

Oui Oui

Oui Oui

Oui Oui

Nombreux (http://texturizer .net/firefox /themes/)

Quelquesuns

Nombreux (http://my.opera .com/community /customize/)

Quelquesuns

40 LE GUIDE COMPLET

Navigateurs

Chapitre 2

Tableau 2.2 : Comparaison entre navigateurs Web (source : http://kb.mozillazine.org/Intro_:_Comparison)

Dispositif Mozilla Suite/Firefox Camino Opera (http: //opera.com/) Apple Safari (http://apple.com /safari/) Microsoft Internet Explorer (http://microsoft .com/windows/ie/) Quelquesunes

Extensions

Nombreuses (http://update .mozilla.org/, (http: //extensionroom .mozdev.org/) et (http://extensions mirror.nl/) Intensive (avec about:config)

Nant

Nant

Quelquesunes

Personnalisation

Intensive (avec les chiers prefs et .ini)

Partielle ( laide des prfrences et des chiers du registre et de stratgies)

Vous trouverez dans lAnnexe C les adresses o vous procurer les diffrents navigateurs. Il convient galement de citer Lynx (http://lynx .browser.org/), 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 daccueil de

Google.

Convertisseurs texte-parole

De nombreuses personnes handicapes, particulirement les malvoyants, ont recours des convertisseurs texte-parole. Il sagit de programmes capables de lire haute voix un document informatique. Ces convertisseurs emploient souvent une inexion particulire ou un signal lorsquils rencontrent un lment HTML particulier, si bien quil est dconseill dutiliser de faon incorrecte ces lments si votre public est susceptible dinclure des handicaps. Et, moins que votre site ne soit pas prsent sur Internet, il est probable quil sera visit par un
LE GUIDE COMPLET 41

Chapitre 2

Les outils Web

nombre certain de handicaps. Ces convertisseurs font partie des

agents utilisateurs HTML.

Pourquoi agent utilisateur plutt que navigateur ?

Mme si les navigateurs sont probablement les principaux consommateurs de documents HTML et XHTML, dautres programmes et systmes lisent ces documents. Par exemple les convertisseurs texteparole que nous venons dvoquer 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 rsultats 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. Lauteur de ce site a oubli quil existait autre chose que des navigateurs : il aurait d placer un texte appropri dans un lment noframes (reportez-vous au Chapitre 7, traitant des jeux dencadrement, pour plus de prcisions ce sujet) pour viter ce problme.

2.3. Rsum
j

j j

Un diteur HTML a pour but dviter la saisie manuelle souvent fastidieuse des caractres spciaux, des codes couleur, de lencodage des balises, etc. Les diteurs HTML peuvent tre commerciaux ou gratuits, WYSIWYG (What You See Is What You Get) ou en texte brut. Les navigateurs ne traitent pas tous le HTML de la mme faon : pour bncier dune audience maximale, il est important de connatre ceux employs par votre public et dadapter votre code en consquence. Le march des navigateurs volue avec le temps : Netscape Navigator, au dbut le seul navigateur existant, a t concurrenc peu peu par Internet Explorer qui la nalement supplant. Un nouveau venu, Firefox, simplante de plus en plus. Un agent utilisateur est un programme capable de comprendre le langage HTML. Les navigateurs sont des agents utilisateurs visuels, mais il existe dautres agents utilisateurs, comme les convertisseurs texte-parole (agents utilisateurs audio), les robots des moteurs de recherche, etc.

42 LE GUIDE COMPLET

Conception de votre premire page Web

Conception du site ............................................................................................................... 44 Cration de la page daccueil ........................................................................................... 47 Rsum ................................................................................................................................... 69

Chapitre 3

Conception de votre premire page Web

Vous avez choisi un ou plusieurs diteurs de pages Web, avez tlcharg et install ventuellement quelques navigateurs complmentaires n de test : vous tes prt passer la conception de votre site. lments tudis dans ce chapitre :
j j j j

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

3.1. Conception du site

Tout dabord, prenez un peu de temps pour rchir, si possible avec une feuille de papier et un stylo. Pour bien concevoir votre site ds les premiers instants, vous devez en prvoir ds le dbut sa structure et son contenu. Il sera bien sr toujours possible de procder des modications par la suite (vous ny manquerez dailleurs pas), mais le temps consacr cette rexion initiale sera largement amorti ! Un site peut tre considr comme une arborescence contenant les lments suivants :
j j

Une page daccueil, avec une barre de navigation. Une ou plusieurs pages secondaires, dont certaines peuvent galement comporter une nouvelle barre de navigation : cela correspond une nouvelle ramication de larborescence. ventuellement des pages tertiaires, et ainsi de suite

Le site le plus simple ne comporte quune page, tandis que les sites complexes peuvent possder de trs nombreuses ramications. Dans ce dernier cas, le site propose souvent une carte du site, destine faciliter la navigation des utilisateurs (voir Figure 3.1). Sur votre feuille de papier, commencez tracer larborescence de votre site, en gurant chaque page par un rectangle (pas trop petit !). Dans chaque rectangle, donnez un titre la page, puis notez un aperu du contenu prvisionnel. Nhsitez pas rpartir 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 ladministration franaise (www.service-public.fr/aide/plan.html) j j j j

Quel est le but de ce site ? Linformation propose est-elle utile ? Une mme page ne comporte-t-elle pas trop dinformations ? Si oui, est-il possible de diviser logiquement ces informations ? La structure obtenue est-elle quilibre et pertinente ?

Dans le cadre de lexemple de ce livre, le site envisag est prsent dans la gure suivante.
Page daccueil

Ma rgion

Ma famille

Mes passions

Figure 3.2 : bauche du plan de notre site prsent dans louvrage

LE GUIDE COMPLET 45

Chapitre 3

Conception de votre premire page Web

Cela fait, vous tes prt dbuter rellement la cration de la premire page de votre site Web. Vous allez commencer par la page la plus importante, la page daccueil. la n de ce chapitre, vous aurez cr une page identique celle de la gure qui suit, dont le code est prsent dans le listing suivant.

Figure 3.3 : Page daccueil telle que conue la n de ce chapitre

Listing 3-1 : Page daccueil telle que conue la fin de ce chapitre (version 1.3.3)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>"Ma page daccueil"</TITLE> <META name="author" content="mon nom"> <META name="version" content="1.3.3"> </HEAD> <BODY> <H1 align="center">Ma page daccueil</H1> <H2 align="center">Bienvenue sur mon site.</H2> <P>Vous trouverez sur ce site des informations :<BR> sur ma <A href="region.html">rgion</A> ;<BR> sur ma <A href="famille.html">famille</A> ;<BR> sur mes <A href="passions.html">passions</A>.</P> <P align="center"><A href="mailto:votre_nom@votre_FAI"> Ecrivez-moi !</A>.</P> </BODY> </HTML>

Nous allons procder pas pas pour la cration de cette page, en expliquant chaque tape les instructions et lments employs.

46 LE GUIDE COMPLET

Cration de la page daccueil

Chapitre 3

3.2. Cration de la page daccueil

La page daccueil est la page la plus importante dun site : cest elle qui incitera le visiteur examiner plus en dtail le site ou le quitter immdiatement. Il existe de nombreuses faons de rendre attrayante une page daccueil (ou dailleurs toute page) : vous les dcouvrirez peu peu au l de la lecture de ce livre. Il est frquent de se contenter dune bauche de page daccueil au moment de la construction du site, pour la gnoler en dernier lieu. Il ne sagit donc pour le moment que de crer une premire page relativement simple. Gardez bien prsent lesprit que, partir de HTML 4, le plus important concerne la structure de la page. La majorit des enjolivements sont facilement ajouts par la suite. La dmarche est ici trs similaire celle recommande lors de la rdaction dun document laide dun traitement de texte : vous commencez par une frappe au kilomtre , en privilgiant la structure (les phrases, paragraphes, chapitres et autres subdivisions) par rapport aux enrichissements qui ne seront apports quultrieurement, gnralement laide dune feuille de style. En effet, une page Web nest en ralit gure plus quun chier texte pourvu dun ensemble de balises de spcication permettant laffichage dans un navigateur Web (il en va de mme dans votre traitement de texte, mais ces balises internes sont masques). Pour insister sur ce fait, les premiers travaux seront effectus uniquement laide du Bloc-Notes. Nous vous conseillons de crer sur votre disque dur, lemplacement de votre choix, un nouveau dossier nomm par exemple MonSiteWeb : vous y rassemblerez tous les chiers du site Web. Sinon, par dfaut, le Bloc-notes devrait crer vos chiers dans Mes Documents.

Instruction !DOCTYPE
HTML ayant connu de nombreuses rvisions pendant son histoire, il tait ncessaire dinformer lagent utilisateur de la version HTML employe. Cela est effectu laide de linstruction !DOCTYPE (dailleurs automatiquement insre en tte dun document Web par la plupart des diteurs HTML). Vous verrez par la suite comment utiliser

LE GUIDE COMPLET 47

Chapitre 3

Conception de votre premire page Web

!DOCTYPE lorsque vous aurez recours des feuilles de style en cascade, des cadres ou XML.

Commencez la cration de la premire page de votre site.

1 Ouvrez le Bloc-Notes (Dmarrer >> Tous les programmes >>

Accessoires >> Bloc-notes Windows ou Dmarrer >> Excuter >> Notepad).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
j

2 Saisissez comme premire ligne de votre document HTML :

Linstruction <!DOCTYPE> indique ici que ce document respecte la dnition de type de document HTML 4.01, telle que dnie par le W3C et disponible ladresse www.w3.org/TR /REC-html4/loose.dtd Nous choisissons ici le DTD transitoire pour pouvoir par la suite employer les lments dconseills (essentiellement ceux permettant de modier la prsentation dans le document HTML), interdits dans le DTD strict. Remarquez que cet lment est dpourvu de balise de fermeture. Vient ensuite llment HTML signalant le dbut dun document HTML.

3 Appuyez sur [], puis saisissez <HTML> pour dbuter la page. Appuyez sur [], puis fermez immdiatement llment HTML en saisissant sa balise de fermeture </HTML>.
Fermez toujours un lment aprs lavoir ouvert

Mme si HTML tolre un certain nombre derreurs de syntaxe, une bonne habitude prendre consiste toujours fermer un lment immdiatement aprs lavoir ouvert, puis saisir le contenu entre les deux balises. Cela vite doublier de fermer un lment par la suite, ce qui peut entraner des rsultats inattendus. Cest dailleurs ainsi que procde un diteur HTML, comme vous le constaterez vous-mme.

4 Par

scurit,

enregistrez

votre

chier

sous

le

nom

pageacc1_0.html. Assurez-vous de bien choisir une extension .html, mme si .htm pourrait tre suffisant, an dindiquer au

navigateur que le chier est de type HTML et doit tre interprt en consquence. Ne fermez ni le chier ni le Bloc-notes.

48 LE GUIDE COMPLET

Cration de la page daccueil

Chapitre 3

Enregistrement au format HTML

Selon loutil ddition employ, enregistrer un document au format HTML peut tre enfantin ou plus complexe. Un diteur Web utilise gnralement par dfaut 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 ncessaire de modier le type de chier lors de lenregistrement. Si vous prouvez des difficults ouvrir un document Web cr laide dun traitement de texte ou dun diteur de texte simple, vriez lextension du nom du chier et le type de chier, an de vous assurer quil a bien t enregistr au format HTML.

lment HEAD
Le premier lment enfant de llment HTML est llment HEAD. Celui-ci, len-tte du document, contient de nombreuses informations importantes qui intressent le navigateur. lexception du contenu de llment TITLE, le contenu de llment HEAD napparat pas dans ce qui est affich directement dans le navigateur Web. Vous pouvez donc y placer des commentaires, des informations destines aux moteurs de recherche, des avertissements relatifs aux droits dauteur, ainsi que du code de script. Cest galement dans cet lment que doivent se trouver les informations relatives aux feuilles de style. Cet lment est le premier du chier HTML tre charg et donc lu par le navigateur.

1 Revenez au document prcdemment cr (pageacc1_0.html), sil est toujours ouvert. Sinon, ouvrez le Bloc-Notes, puis ouvrez le chier. 2 Placez-vous en dessous de la balise douverture <HTML> (mais au-dessus de la balise de fermeture </HTML>), appuyez sur [], puis saisissez <HEAD> pour dbuter la section den-tte. Le contenu de cet lment napparat pas dans le navigateur Web. Comme vous lavez fait prcdemment, et pour les mmes raisons, fermez immdiatement llment HEAD en appuyant sur [], puis en saisissant sa balise de fermeture </HEAD>.

lment TITLE
Un lment indispensable dans llment HEAD est llment TITLE (titre), qui dnit le texte affich dans la barre de titre de la fentre de votre navigateur.

LE GUIDE COMPLET 49

Chapitre 3

Conception de votre premire page Web

1 Placez-vous en dessous de la balise douverture <HEAD>, appuyez nouveau sur [], puis ajoutez la balise douverture <TITLE> pour dnir le titre de la page. Ce titre sera affich dans la barre de titre de la fentre du navigateur. Fermez llment TITLE en saisissant </TITLE>. 2 Revenez juste aprs la balise <TITLE>, puis saisissez le titre de la page, ici "Ma page daccueil". Appuyez sur [].

lment META
Autre composant capital de llment HEAD, llment META est un moyen de procurer des informations concernant votre site aux moteurs de recherche, dautres auteurs Web et des serveurs Web. Vous pouvez y placer pratiquement nimporte quel type dinformation. Cet lment est dpourvu de balise de fermeture. Un lment META est un lment vide (dpourvu de contenu) dont la syntaxe est la suivante :
<META name="valeur" content="valeur">

Lattribut name dnit ce que la valeur de content va dcrire. Par exemple, la valeur de name peut tre "datetime" : lagent utilisateur sait alors que les chiffres et les lettres de content correspondent une date et une heure, probablement celles de la dernire modication. La balise de fermeture dun lment META est facultative.
XHTML

Comme pour tout lment vide, un lment META doit tre rdig comme suit en XHTML :
<meta name="nom" content="contenu" />

Rien ne vous empche dadopter dores et dj cette syntaxe dans vos documents HTML.

Un lment HEAD peut possder un nombre quelconque dlments META. Ceux-ci permettent de fournir de nombreuses informations utiles concernant votre page, comme lauteur ou la version, ce que vous allez faire maintenant.

1 Placez-vous sur la ligne vierge en dessous de llment TITLE. Saisissez <META name="author" content="votre_nom">
50 LE GUIDE COMPLET

Cration de la page daccueil

Chapitre 3

(o votre_nom est votre nom), appuyez sur [], puis saisissez <META name="version" content="1.0">. 2 Par scurit, enregistrez nouveau votre chier sous le nom pageacc1_0.html. Ne fermez ni le chier ni le Bloc-Notes. Les lments META sont en outre particulirement utiles pour faire reconnatre 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 rsultat dune recherche dun utilisateur.
<META NAME="keywords" CONTENT="mot-cl1, mot-cl2, ...">

Cette balise indique que le contenu de CONTENT est une srie de mots-cls qui dnissent plus nement votre page. Autre lment META frquent, celui qui indique le nom du gnrateur du document, gnralement insr automatiquement par votre diteur HTML :
<meta name="generator" content="nom_du_gnrateur">

Figure 3.4 : Certains diteurs insrent automatiquement diverses instructions META, dont le nom du gnrateur.

Expressions anglophones

Rien nimpose que la valeur de name soit exprime en anglais. Vous pouvez tout fait lgalement retenir name="auteur" et name="mots cls". Comme toutefois ces mta-informations sont gnralement exploites par des agents anglophones (la quasi-totalit des moteurs de recherche), mieux vaut, pour plus defficacit, conserver les expressions anglophones. Toute personne examinant le code source de la page peut lire les informations prsentes dans llment HEAD, mais celles-ci ne sont pas affiches dans le texte du document.

LE GUIDE COMPLET 51

Chapitre 3

Conception de votre premire page Web

Affichage source

Pratiquement tous les navigateurs permettent dexaminer le code HTML source dune page Web affiche dans votre navigateur, laide dune 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.

Llment HEAD doit galement englober tout script et information de feuille de style, respectivement dans des lments SCRIPT, LINK et STYLE (nous y reviendrons par la suite). Un exemple dun lment HEAD simple est montr dans le Listing 3.2, correspondant len-tte de la page prsente sur la gure suivante.

Figure 3.5 : Page daccueil de MicroApplication

Figure 3.6 : Accs au code source de la page daccueil de MicroApplication depuis Internet Explorer

52 LE GUIDE COMPLET

Cration de la page daccueil

Chapitre 3

Figure 3.7 : Accs au code source de la page daccueil de MicroApplication depuis Firefox

Listing 3-2 : Extrait de la section HEAD de la page daccueil de MicroApplication

<HEAD> <TITLE>Micro Application - Editeurs de livres dinformatique, de cd-rom et de papiers dimpression.</title> <META NAME="description" CONTENT="Edition de livres dinformatique, de cd-rom et de papiers dimpression. 15 thmatiques(bureautique, architecture, linux, windows, gravure, musique, mp3, culture, dcoration, jeux de cartes, photo, programmation, cration 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>

lment BODY
Llment BODY renferme lessentiel : le corps du document. Tout son contenu est visible dans le navigateur : texte, graphismes, liens hypertextes, etc. La seule faon de masquer une information consiste la placer dans une balise de commentaire.

1 Revenez au document prcdemment cr (pageacc1_0.html) sil est toujours ouvert. Sinon, ouvrez le Bloc-Not0es, puis ouvrez le chier. 2 Placez-vous aprs la balise </HEAD>, appuyez sur [], puis dbutez le corps du document en saisissant <BODY>. Comme

LE GUIDE COMPLET 53

Chapitre 3

Conception de votre premire page Web

prcdemment, refermez llment BODY en appuyant sur [] puis en saisissant </BODY>. Comme cela a t soulign, llment BODY de votre page Web ne doit pas tre dpourvu de structure et de forme : tout bon document doit possder une structure organise. Traditionnellement, la structure se compose de titres de niveaux divers et de paragraphes de texte.

Titres : lment Hn
Les titres sont obtenus en HTML laide de llment 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 llment TITLE), H2 un sous-titre, etc.

3 Pour commencer une page bien structure , dbutez par un titre de niveau 1. Placez-vous la n de la balise <BODY>, puis appuyez sur []. Saisissez <H1></H1> (pour refermer immdiatement llment). 4 Placez-vous entre les deux balises, et saisissez ensuite le titre de la page : Ma page daccueil (sans guillemets). Votre site Web possde maintenant un titre de premier niveau. 5 Crez un titre de niveau 2 : placez-vous la n de la ligne prcdente, appuyez sur [] puis saisissez <H2></H2> (pour refermer immdiatement llment). Placez-vous entre les deux balises, et saisissez ensuite : Bienvenue sur mon site. Appuyez sur []. 6 Toujours par scurit, enregistrez nouveau votre travail sous le mme nom.
Un titre peut se trouver nimporte o dans llment BODY, cest--dire dans le corps du document. Il sagit dun lment bloc, ce qui signie quun saut de ligne est effectu avant et aprs llment. Le tableau suivant dtaille les diffrents lments titre.
Tableau 3.1 : lment titre (Hn)

Titre Titre 1

Balise

Utilisation Titre du niveau suprieur : en gnral celui de la page ou un titre de chapitre.

<H1>

54 LE GUIDE COMPLET

Cration de la page daccueil

Tableau 3.1 : lment titre (Hn)

Chapitre 3

Titre Titre 2 Titre 3 Titre 4 Titre 5

Balise

Utilisation Titre de second niveau : section ou partie dun document. Sous-sections dun document : ces trois niveaux suffisent le plus souvent, en terme de structure. Peu utilis pour la structure. Peu utilis pour la structure, mais servant de faon abusive pour des avertissements en petits caractres, comme des informations lgales ou de droits dauteur. Sert souvent de faon abusive pour des avertissements en petits caractres, comme des informations lgales ou de droits dauteur.

<H2> <H3> <H4> <H5>

Titre 6

<H6>

Les titres constituent un lment essentiel de la structure dun document. De nombreux auteurs les emploient toutefois comme raccourcis de mise en forme : au lieu de modier directement la police dun texte (ce qui est dailleurs dconseiller), ils lincorporent dans un lment titre offrant un aspect similaire celui quils veulent obtenir. Techniquement parlant, cette utilisation est incorrecte, tous les navigateurs naffichant pas les titres de la mme faon. Il est toutefois exact que la plupart des navigateurs affichent les titres des trois niveaux suprieurs (1 3) en polices de grandes tailles, tandis que les autres niveaux (5 et 6) sont affichs en polices plus petites, souvent en gras. Pour obtenir une structure parfaite, il est donc dconseill de recourir aux titres uniquement pour obtenir laspect souhait : les niveaux de titre ne doivent pas prsenter dinterruption.
<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 premire page Web

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

ne lest pas. Si vous voulez obtenir laspect dun titre de niveau 4 pour votre titre de niveau 3, modiez le style de llment H3, de prfrence laide dune feuille de style. Nemployer les titres qu des ns structurelles. Si votre public nutilise que des navigateurs textuels (comme Lynx), ou si votre site sadresse des personnes souffrant de handicaps, les titres doivent tre utiliss bon escient. Cela pargnera vos visiteurs employant des navigateurs en mode texte (comme Lynx) de srieuses difficults lorsque leur navigateur non standard affichera (ou de lire haute voix) votre texte de faon incohrente. Les convertisseurs texte-parole emploient en effet souvent une inexion particulire ou un signal lorsquils rencontrent un lment HTML particulier, comme justement un titre.
Titres et moteurs de recherche

Les principaux moteurs de recherche se servent dsormais principalement de la structure du document dnie par les titres pour cataloguer un document. Initialement, ils navaient recours quaux lments TITLE ou META, mais ils se sont rapidement rendu compte que des concepteurs peu scrupuleux surchargeaient ces lments de mots-cls nayant rien voir avec le contenu rel du site, simplement pour attirer plus de visiteurs. En parcourant les titres, un moteur de recherche peut apprhender la structure du document et ainsi le cataloguer avec une meilleure prcision. Si les lments essentiels de votre site apparaissent dans vos titres, votre page Web possde des chances maximales de se retrouver classe dans la catgorie adquate, l o la cherche le public vis.

Titres de documents et outils de vrication

Les outils de vrication HTML (comme le validateur W3C disponible ladresse http://validator.w3.org/) se servent galement des titres pour reconstituer la structure du document. Cela sert gnralement lauteur de la page : il peut regarder si la structure du document est bien reprsente par les titres, ou si la page gagne tre rorganise.

56 LE GUIDE COMPLET

Cration de la page daccueil

Chapitre 3

Paragraphes de texte : lment P

Toute page Web est essentiellement compose de texte : ne laissez jamais les graphismes attrayants, les animations poustouantes et autres complments vous masquer ce fait. Les gens vont sur le Web pour trouver des informations, pas pour admirer limage dun avion de ligne traversant lcran. Llment texte fondamental est le paragraphe dni par llment P. Il nexige pas de fermeture (la balise </P> est facultative), bien que cela soit prfrable pour crer une page structure possdant des exigences de validation stricte. Un simple retour chariot ne possde aucune signication en HTML : le navigateur nen tient pas compte et ne le remplace mme pas par un simple espace. Pour commencer un nouveau paragraphe, veillez bien employer la balise <P>.

1 Revenez au document pageacc1_0.html. 2 Crez un paragraphe : placez-vous sur la ligne vierge en dessous du titre de niveau 2, puis saisissez <P></P> (pour refermer immdiatement llment). Placez-vous entre les deux balises, et saisissez ensuite une phrase quelconque, par exemple : Vous
trouverez sur ce site des informations sur ma rgion, ma famille et mes passions.

3 Nous allons nous arrter l dans un premier temps. Enregistrez nouveau votre chier, toujours sous le nom pageacc1_0.html.
Ce que vous avez saisi jusque-l devrait ressembler au listing suivant.
Listing 3-3 : Premire page daccueil.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>"Ma page daccueil"</TITLE> <META name="author" content="mon nom"> <META name="version" content="1.0"> </HEAD> <BODY> <H1>Ma page daccueil</H1> <H2>Bienvenue sur mon site.</H2> <P>Vous trouverez sur ce site des informations sur ma rgion, ma famille et mes passions.</P> </BODY> </HTML>

LE GUIDE COMPLET 57

Chapitre 3

Conception de votre premire page Web

Il est temps dexaminer cette page laide de votre navigateur. Ouvrez celui-ci, puis naviguez jusquau chier pageacc1_0.html. Vous devriez voir quelque chose de similaire ce qui est prsent dans les gures qui suivent : aucune diffrence napparat que vous utilisiez Internet Explorer 6 ou Firefox. Remarquez que le contenu de llment TITLE apparat dans la barre de titre de la fentre du navigateur, le reste du contenu de llment HEAD restant invisible : seul le contenu de llment BODY est affich.

Figure 3.8 : Laspect de cette page avec Internet Explorer 6

Figure 3.9 : Laspect de cette page avec Firefox

Difficile de faire plus simple ! Difficile aussi de faire plus laid, hlas En outre, pour le moment, il nexiste aucune relation entre cette page daccueil et les autres pages du site, que nous avions pourtant prvues dans notre conception initiale. Nous allons dabord ajouter les liens vers les autres pages, puis amliorer un peu laspect de la page. Nous crerons ensuite les pages secondaires.

58 LE GUIDE COMPLET

Cration de la page daccueil

Chapitre 3

Lien hypertexte : lment A

Pour effectuer un lien entre une partie quelconque (ou presque) de votre page et une autre ressource Internet pouvant se trouver nimporte o (sur la mme page, sur une page diffrente situe sur le mme site, sur une page situe sur un autre site, vers un chier ou une image situ un emplacement quelconque), il est fait appel llment A (anchor, signiant ancre ), un lment de type ligne (sans saut de ligne aprs llment). Les liens hypertextes sont ce qui fait le World Wide Web (ou WWW, ou toile daraigne mondiale). Ce sont eux qui permettent de passer de page en page et de site en site, dun bout lautre de la plante. En vrit, cet lment, pourtant simple dutilisation, est probablement le plus important de tout le langage HTML, tant donn sa puissance intrinsque. La syntaxe de llment A est la suivante :
<A [name="nom_lien"] [id="id_lien"] href="emplacement de la ressource">contenu servant de lien</A>

Chaque lment A dnit une ancre. Au sein de cet lment, lattribut href fait de cette ancre la source dexactement un lien, tandis que le contenu de llment A dnit la position de lancre. Lattribut name, facultatif, nomme lancre (pour quelle puisse tre la destination de zro ou plusieurs liens. Il en est de mme de lattribut id).
Valeur dattribut

Les auteurs peuvent galement crer un lment A qui ne spcie aucune ancre (qui ne spcie aucun attribut href, name ou id). Les valeurs de ces attributs peuvent tre xes par la suite au moyen de scripts.

Attribut href et URI

La valeur de lattribut href, emplacement_de_la ressource, porte le nom didentifiant de ressource uniforme ou URI (Universal Resource Identifier), terme dsormais prfr lancien URL ou localisateur de ressource uniforme (URL, Universal Resource Locator). Le rle dun URI est capital : chaque ressource disponible sur le Web (document HTML,

LE GUIDE COMPLET 59

Chapitre 3

Conception de votre premire page Web

image, squence vido, programme, etc.) possde une adresse reprsente sous la forme dun URI. Un URI est form de trois parties distinctes :

1 Le nom du protocole servant accder la ressource. 2 Le nom de la machine hbergeant la ressource. 3 Le nom de la ressource en question, indiqu sous la forme dun chemin daccs.
Considrez comme exemple lURI qui dsigne la page des rapports techniques (TR, Technical Reports) du W3C :
http://www.w3.org/TR

Cet URI peut tre compris comme suit : il est disponible via le protocole HTTP, hberg sur la machine nomme www.w3.org , et accessible par le chemin /TR .
HTTP

HTTP est le sigle de HyperText Transfer Communication Protocol. Cest le protocole, ou mthode de communication, employ par un navigateur Web pour requrir une ressource Web auprs dun serveur. Le terme http:// prcde toujours une adresse URI ; il est plac avant les noms du domaine et de la machine. Internet dispose dautres protocoles de communication : HTTP scuris (https), courrier lectronique (mailto) et protocole de transfert de chiers (ftp) sont tous dautres exemples de protocoles largement utiliss, que vous rencontrerez sans aucun doute.

Il sagit ici dune adresse URI dite exclusive, utilise pour les sites situs lextrieur de votre propre domaine. Il existe un autre type dadresse URI, lURI 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 lexemple cible.html) est dans ce mme dossier, il peut tre reli en utilisant simplement :
<A href="cible.html">

Remarquez, pour les URI locaux, labsence du prxe http://.

60 LE GUIDE COMPLET

Cration de la page daccueil

Chapitre 3

Au sein de la chane de texte du chemin, vous pouvez employer les classiques modicateurs :
../ demande de monter dun niveau dans larborescence par rapport au

document actif :
<A href="../cible.html">

Pour atteindre un sous-dossier, saisissez son nom puis une barre oblique et enn le nom du chier, comme dans :
<A href="dossier/cible.html">

Vous pouvez les combiner votre guise :

<A href="../dossier/cible.html">

Une barre oblique place au dbut de lURI signie quil faut remonter la racine du domaine :
<A href="/cible.html">

Les agents utilisateurs restituent gnralement les liens de faon les mettre en vidence pour les utilisateurs (soulignage, vido inverse, etc.). La restitution exacte dpend de lagent utilisateur. La restitution peut varier si lutilisateur a ou non dj visit le lien. De faon gnrale, le pointeur se transforme en main lorsquil se trouve sur un lien.

Figure 3.10 : La plupart de navigateurs signalent un lien, et laffichent de faon diffrente lorsquil a dj t visit (ici, Logiciels en tlchargement).

Attributs name et id
Ces attributs spcient un nom ou un identiant pour lancre, de faon ce que celle-ci puisse tre cible par un autre lien. Ils partagent le mme espace de noms, ce qui signie quils ne peuvent pas tous deux dnir
LE GUIDE COMPLET 61

Chapitre 3

Conception de votre premire page Web

une ancre avec le mme nom dans le mme document. Quand les deux attributs sont utiliss sur un mme lment, leurs valeurs doivent tre identiques. Voici une ancre nomme :
<A name="intro">Introduction</A>

Pour y faire rfrence depuis une autre ancre, vous procdez 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 matires... ...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 prsentons ici lattribut name employ avec un lment a, mais une ancre sert en ralit rarement de cible une autre ancre. Lattribut name nest employ que pour relativement peu dlments. Lattribut id joue en revanche un rle analogue et peut tre employ avec tous les lments sauf BASE, HEAD, HTML, META, SCRIPT, STYLE et TITLE. Lexemple prcdent 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 matires... ...le corps du document... <H2 id="intro">Introduction</H2> ...contenu... <H2 id="historique">Historique</H2> ...contenu... <H3 id="histo1">Au commencement</H3> ...contenu...

Notez quune ancre (ou lien) ainsi employe porte frquemment le nom de signet, pour la diffrencier dun lien menant vers une autre page Web.

62 LE GUIDE COMPLET

Cration de la page daccueil

Chapitre 3

Il est galement possible de concevoir un lien hypertexte qui dclenche lenvoi dun courrier lectronique lorsquun utilisateur clique dessus. Au lieu de http://, utilisez mailto: suivi de ladresse lectronique de destination :
<A "mailto:mon_nom@monFAI.fr">

Remarquez, pour un lien de message lectronique, labsence de barre oblique. Ajoutez maintenant des ancres votre page daccueil.

1 Ouvrez le Bloc-Notes, puis le chier prcdemment cr (pageacc1_0.html). 2 Vous allez modier la version en entrant comme suit la balise META stipulant la version :
<META name="version" content="1.3.2">

Convention sur les numros de version

Traditionnellement, un numro de version comporte deux ou trois nombres spars par des points. Le premier nombre, gauche, correspond au numro de version majeur : il reste identique tant que des modications radicales nont pas t apportes. Le second numro correspond au numro de version mineur : des modications plus secondaires. Le troisime nombre, sil est prsent, correspond gnralement des modications trs secondaires, souvent lies lradication de bogues ou la correction derreurs. Dans le cadre de ce livre, nous employons la convention suivante, trs proche de la convention acadmique : j le premier nombre correspond la version majeure ; j le second correspond au chapitre concern ; j le troisime, lordre dapparition du code dans le chapitre. La nouvelle version de notre page daccueil est donc la 1.3.2.

Vous allez maintenant crer des ancres. Celles-ci vont pour le moment pointer vers des pages inexistantes, mais cela na pas encore dimportance.

3 Insrez llment lien hypertexte avant le mot ou la phrase et noubliez pas de fermer llment A aprs le mot servant de lien :

LE GUIDE COMPLET 63

Chapitre 3

Conception de votre premire page Web

<P>Vous trouverez sur ce site des informations sur ma <A href="region.html">rgion</A>, ma <A href="famille.html"> famille</A> ; et mes <A href="passions.html">passions</A>.</P>

Remarquez quil est employ ici un lien relatif : les chiers

region.html, famille.html et passions.html seront placs dans le

mme dossier que la page daccueil.

4 Ajoutez un nouveau lien permettant de vous envoyer un message. Placez-vous aprs la balise </P>, appuyez sur [] et saisissez sur la nouvelle ligne :
<P align="center"><A href="mailto:votre_nom@votre_FAI"> Ecrivez-moi !</A>.</P>

j votre_nom@votre_FAI

correspond bien sr votre adresse

lectronique.

5 Enregistrez votre chier sous le nom pageacc1_3_2.html, mais ne fermez pas le Bloc-Notes. Le code complet de cette page est prsent dans le listing qui suit.
Listing 3-4 : Page daccueil modifie (version 1.3.2)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>"Ma page daccueil"</TITLE> <META name="author" content="mon nom"> <META name="version" content="1.3.2"> </HEAD> <BODY> <H1>Ma page daccueil</H1> <H2>Bienvenue sur mon site.</H2> <P>Vous trouverez sur ce site des informations sur ma <A href="region.html">rgion</A>, ma <A href="famille.html"> famille</A> et mes <A href="passions.html">passions</A>.</P> <P><A href="mailto:votre_nom@votre_FAI">Ecrivez-moi !</A>.</P> </BODY> </HTML>

Examinez cette nouvelle page dans votre navigateur. Ouvrez celui-ci, puis naviguez jusquau chier pageacc1_3_2.html. Vous devriez voir quelque chose de similaire ce qui est prsent dans la gure suivante.

64 LE GUIDE COMPLET

Cration de la page daccueil

Chapitre 3

Figure 3.11 : Aspect de la page Web modie

Essayez de cliquer sur un des liens : vous obtenez un message derreur, variable selon le navigateur. Cest normal : les pages secondaires nexistent pas encore ! Vous y remdierez sous peu.

Figure 3.12 : Message derreur indiquant un lien rompu

lment saut de ligne BR

Nous avons dit que les lments Hn et P, dj examins, taient des lments de type bloc, qui dbutent sur une nouvelle ligne et insrent aprs eux un saut de ligne. Nous avons galement soulign que HTML ne reconnaissait pas les sauts de ligne insrs dans le contenu dun lment. Il est pourtant parfois ncessaire deffectuer manuellement un passage la ligne sans pour autant changer dlment (de bloc), par exemple pour possder un titre rparti sur deux lignes ou pour diviser un paragraphe trop long. Cela seffectue en insrant un lment vide BR, de type ligne :

1 Revenez dans le Bloc-Notes au chier prcdent (pageacc1_3_2.html). 2 Vous allez encore modier la version. Entrez comme suit la balise META stipulant la version :

LE GUIDE COMPLET 65

Chapitre 3

Conception de votre premire page Web

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

3 Vous allez maintenant insrer des sauts de ligne entre les diffrents thmes dans le (seul) paragraphe de texte. Commencez par :
<P>Vous trouverez sur ce site des informations :<BR> sur ma <A href="region.html">rgion</A> ;<BR> sur ma <A href="famille.html">famille</A> ;<BR> sur mes <A href="passions.html">passions</A>.</P>

Remarquez que le texte a t un peu modi. Les passages la ligne employs dans le code prsent (aprs les balises <BR>) permettent uniquement damliorer sa lisibilit : ils sont ignors par HTML. Tout le contenu de llment P aurait pu tre saisi sur la mme ligne.

Vous pouvez insrer un saut de ligne o vous voulez dans llment

BODY pour obtenir un saut de ligne lcran : entre deux lments bloc,

entre deux lments ligne, au sein dun contenu texte, etc.

XHTML

Si vous souhaitez tre compatible XHTML, llment vide BR doit tre cod <br />.

Attributs dalignements
Pour encore amliorer laspect dun titre (ou dun paragraphe), il serait utile de pouvoir agir sur lalignement. HTML dispose dun attribut dalignement applicable de nombreux lments, align. Vous allez un peu amliorer laspect de la premire page en jouant sur lalignement.

1 Revenez dans le Bloc-Notes au chier (pageacc1_3_3.html). 2 Centrez les deux titres, laide de lattribut align :
<H1 align="center">Ma page daccueil</H1> <H2 align="center">Bienvenue sur mon site.</H2>

prcdent

3 Modiez le lien qui permet de vous envoyer un message. Ajoutez ce qui suit :
66 LE GUIDE COMPLET

Cration de la page daccueil

Chapitre 3

<P align="center"><A href="mailto:votre_nom@votre_FAI"> Ecrivez-moi !</A>.</P>

4 Enregistrez votre chier sous le nom pageacc1_3_3.html. Le code complet de cette page est prsent dans le Listing 3.4. 5 Pour la bonne forme, nous allons galement crer le squelette des autres pages. En partant du chier actuellement ouvert, commencez par modier llment TITLE :
<TITLE>"Ma rgion "</TITLE>

6 Modiez ensuite le titre et le sous-titre

<H1 align="center">Ma rgion </H1> <H2 align="center">... complter.</H2>

7 puis le paragraphe de texte :

<P>... complter.</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 prvoir sur une page secondaire un lien vers la page daccueil principale. Ajoutez donc la ligne suivante, juste avant la balise </BODY> :
<P align="center"><A href="pageacc1_3_3.html">Retour vers la page daccueil</A></P>

9 Enregistrez ce chier sous le nom region.html. 10 Crez ensuite les deux autres pages (famille.html et passions.html), en modiant comme il se doit le contenu des lments TITLE et H1.
Lattribut align possde plusieurs valeurs possibles, dont la signication est prsente dans le Tableau 3.2. Remarquez toutefois que son emploi avec des titres et paragraphes est dsormais dconseill : mieux vaut recourir aux feuilles de style, que vous dcouvrirez dans le Chapitre 8.
Tableau 3.2 : Valeurs dalignement des paragraphes

Attribut de P

Alignement de texte Alignement gauche.

<P align="left">

LE GUIDE COMPLET 67

Chapitre 3

Conception de votre premire page Web

Tableau 3.2 : Valeurs dalignement des paragraphes

Attribut de P

Alignement de texte Alignement sur la marge de droite, sans justication gauche : celle-ci est plutt dsordonne, mais cette disposition est pratique dans le cas dimages et de colonnes de texte. Le texte est centr. Le texte est justi, comme avec un traitement de texte.

<P align="right">

<P align="center"> <P align="justify">

Listing 3-5 : Page daccueil modifie (version 1.3.3).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>"Ma page daccueil"</TITLE> <META name="author" content="mon nom"> <META name="version" content="1.3.3"> </HEAD> <BODY> <H1 align="center">Ma page daccueil</H1> <H2 align="center">Bienvenue sur mon site.</H2> <P>Vous trouverez sur ce site des informations :<BR> sur ma <A href="region.html">rgion</A> ;<BR> sur ma <A href="famille.html">famille</A> ;<BR> sur mes <A href="passions.html">passions</A>.</P> <P align="center"><A href="mailto:votre_nom@votre_FAI"> Ecrivez-moi !</A>.</P> </BODY> </HTML>

Examinez votre nouvelle page daccueil dans votre navigateur. Ouvrez celui-ci, puis naviguez jusquau chier pageacc1_3_3.html.

Figure 3.13 : Page daccueil

68 LE GUIDE COMPLET

Rsum

Chapitre 3

Cliquez sur un lien : vous accdez lune des nouvelles pages.

Figure 3.14 : Une des pages secondaires

Revenez la page daccueil, testez les autres liens, puis, revenu sur la page daccueil, testez le lien denvoi de courriel : votre logiciel de messagerie souvre.

Figure 3.15 : Logiciel de messagerie lanc partir de la page

3.3. Rsum
j j j

Linstruction !DOCTYPE permet de stipuler la DTD (Document Type Definition) employe pour le document HTML. Un document HTML se compose dun lment parent HTML qui contient des lments enfants HEAD et BODY. La seule information affiche par le navigateur appartenant llment HEAD est le contenu de llment TITLE, gurant dans la barre de titre de la fentre. Les lments META de llment
LE GUIDE COMPLET 69

Chapitre 3

Conception de votre premire page Web

j j

j j j

HEAD servent fournir des mta-informations employes par certains agents utilisateurs (comme les robots des moteurs de recherche), dont les mots-cls, une description, lauteur, la version et le gnrateur de la page. Llment BODY constitue le corps du document : tout son contenu est visible dans le navigateur. Ce contenu doit tre structur de faon logique. HTML propose les lments Hn pour des titres de niveaux diffrents, ainsi que llment P pour un paragraphe de texte. Les liens hypertextes sont crs laide de llment A suivi de lattribut href stipulant la cible du lien. Cet attribut href est suivi dun nom de protocole, comme http:/ ou mailto:, spciant le type de cible et laction suivre. Un lien hypertexte peut tre absolu ou relatif. Un saut de ligne est obtenu laide de llment vide BR. Les titres et les paragraphes admettent lemploi de lattribut align pour obtenir un alignement particulier. Cet attribut est toutefois dsormais dconseill : mieux vaut recourir aux feuilles de style.

70 LE GUIDE COMPLET

Listes et tableaux

Listes ....................................................................................................................................... 73 Tableaux .................................................................................................................................. 89 Rsum ................................................................................................................................ 133

Chapitre 4

Listes et tableaux

Une page Web est compose avant tout de texte. Toutefois, toutes les donnes et informations places sur un site Web doivent passer par un ltre nal avant de pouvoir tre lues par un tre humain : elles doivent tre affiches lcran. La lecture lcran, malgr les progrs raliss par les concepteurs dcrans, reste plus malaise que la lecture dun document imprim ou projet. La majorit des internautes rechignent lire de longs textes en ligne, prfrant souvent les imprimer pour les relire tte repose. Une conception intelligente dun site Web doit prendre en compte ces contraintes invitables. Malgr son importance, mieux vaut limiter le texte. Arez-le toujours au maximum. Recourrez aux espaces vierges pour reposer la vue. Voici quelques rgles simples :
j j j

Placez toujours les informations importantes en haut de lcran. Pour tre efficace, un cran (une page) ne devrait jamais comporter plus de sept informations distinctes. Seuls les 100 premiers mots permettent lutilisateur de dcider si le document est intressant. Un document destin un public gnral ne devrait jamais excder 500 mots.

Cela ne veut pas dire que les longs articles sont proscrits sur le Web, mais mieux vaut les rendre accessibles laide dun lien explicite, par exemple, Exemple extrait du Chapitre 1 ou Table des matires dtaille . Si ce chapitre va vous aider afficher votre texte de faon ce quil soit facilement lisible et comprhensible, il reste de votre ressort de faire en sorte que le sujet soit intressant et susceptible dattirer le public concern ! Les pages ralises jusquici sont dune extrme simplicit. HTML propose de nombreux autres lments structuraux pour amliorer tant la structure que, par la suite, le rendu ou laffichage des pages. Au cours de ce chapitre, nous allons examiner les listes et les tableaux des lments fondamentaux de toute page Web russie.

72 LE GUIDE COMPLET

Listes

Chapitre 4

lments et attributs tudis 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 dapporter un peu plus de structure un document :
j j j

Les listes ordonnes ou numrotes. Les listes non ordonnes ou listes puces. Les listes de dnitions.

Il est galement possible dimbriquer des listes, mme de types diffrents.

Liste ordonne : lments OL et LI

Une liste numrote (ou ordonne) incrmente automatiquement chaque lment de la liste. Ce systme de numrotation automatique est trs utile, car il simplie dautant la saisie. Crer une liste numrote est dune extrme simplicit. Vous dbutez la liste en ouvrant llment liste OL (Ordered List, liste ordonne), puis poursuivez par chaque membre de la liste, prcd de la balise dlment de liste, <LI>. La balise de fermeture </LI> est facultative mais recommande. En revanche, llment liste lui-mme doit imprativement tre ferm.
<OL> <LI>Premier lment</LI> <LI>Deuxime lment</LI> ... <LI>Dernier lment</LI> </OL>

LE GUIDE COMPLET 73

Chapitre 4

Listes et tableaux

Figure 4.1 : Exemple de liste ordonne

Test

Les fragments de code ainsi prsents sont des extraits dune page complte. Si vous souhaitez les tester, le mieux est de construire une page type nomme par exemple test.html, avec un squelette de page (instruction !doctype, lments HTML, HEAD et BODY) , et de saisir simplement dans llment BODY lextrait de code propos.

Llment OL peut possder un argument start, spciant le numro commenant la squence. Par exemple, avec <OL start="2">, le premier membre de la liste porte le numro 2. Les lments LI et OL peuvent possder un attribut type, qui permet de dnir le mode de numrotation de la liste. Employ pour un lment LI individuel, il ne sapplique qu cet lment. Insr en revanche lintrieur de la balise <OL>, il agit sur la totalit de la liste. Voici les valeurs possibles pour lattribut type :
j j j j j

1 : Chiffres arabes (valeur par dfaut) a : Lettres minuscules A : Lettres majuscules i : Chiffres romains en minuscules I : Chiffres romains en majuscules

value, employ uniquement avec un lment LI, rinitialise lordre de la squence. Ainsi, avec <LI value="8">, le membre suivant possdera automatiquement une value de 9.

74 LE GUIDE COMPLET

Listes

Chapitre 4

Figure 4.2 : Exemple de liste ordonne, avec emploi des attributs type="A", start="2" pour llment OL et value="9" pour le dernier lment LI.

Lemploi des attributs start, type et value est dsormais dconseill au prot des feuilles de style.
Combiner les attributs

Il est possible de combiner les attributs start et type : le premier membre de la liste apparat avec la valeur start dans le type spci. Ainsi, <OL type="I" start="4"> aboutit-il un premier membre dsign par "IV".

Liste puces : lments UL et LI

Une liste puces ressemble normment la prcdente, si ce nest que la numrotation est remplace par des puces. Une liste puces est un lment UL (Unordered List, liste non ordonne) qui renferme un nombre quelconque dlments LI. Comme pour une liste ordonne, llment UL doit imprativement tre ferm.
<UL> <LI>Premier lment</LI> <LI>Deuxime lment</LI> ... <LI>Dernier lment</LI> </UL>

Figure 4.3 : Exemple de liste puces

LE GUIDE COMPLET 75

Chapitre 4

Listes et tableaux

Vous pouvez modier le style des puces grce lattribut type. L aussi, il peut sappliquer un lment LI individuel ou, insr dans la balise <UL>, agir sur la totalit de la liste. Voici les valeurs possibles pour lattribut type, lorsquil est employ dans une liste non ordonne :
Tableau 4.1 : Valeurs possibles de lattribut type

Valeur

Signication Rond plein (valeur par dfaut) Carr plein Cercle vide

Disc Square Circle

Lemploi de lattribut type est dsormais dconseill au prot des feuilles de style.

Figure 4.4 : Exemple de liste puces, avec emploi des trois valeurs possibles pour lattribut type.

Les listes sont trs agrables en HTML : elles sont demploi facile tout en tant dune extrme souplesse. Il est trs facile de transformer une liste numrote en liste puces et inversement, simplement en modiant les balises de dbut et de n. Attention toutefois aux surprises si vous avez employ les attributs dconseills, les valeurs licites pour ces attributs tant diffrentes selon le type de liste !

Liste de dnitions : lments DL, DT et DD

Une liste de dnitions est lquivalent dun tableau de deux colonnes, la premire renfermant les mots ou expressions dnir et la seconde les dnitions elles-mmes.

76 LE GUIDE COMPLET

Listes

Chapitre 4

Il est possible de crer une liste de dnitions laide de llment DL (Definition List, liste de dnitions), dont le contenu est compos dlments DT (Definition Term, terme de dnition) et dlments DD (Definition Description, description de dnition) correspondants. Voici un exemple de code, avec la copie dcran correspondante.
<H1 align="center">Elments dune liste de dfinitions</H1> <DL> <DT>DL</DT> <DD>Elment liste de dfinition.</DD> <DT>DT</DT> <DD>Elment terme de dfinition</DD> <DT>DD</DT> <DD>Elment description de la dfinition</DD> </DL>

Figure 4.5 : Liste de dnitions

Vous avez dcouvert les listes. Ne trouvez-vous pas que notre page daccueil prsente ce qui ressemble furieusement une liste ? Autant la modier

1 Revenez dans le Bloc-Notes au chier prcdent (pageacc1_3_3.html). 2 Comme dhabitude, vous modiez la version. Entrez comme suit la balise META stipulant la version :
<META name="version" content="1.4.1">

3 Placez-vous la n 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 crer une nouvelle ligne.

LE GUIDE COMPLET 77

Chapitre 4

Listes et tableaux

4 Saisissez sur celle-ci <UL> pour dbuter une liste puces. 5 Placez-vous au dbut de la ligne
sur ma <A href="region.html">rgion</A> ;<BR>

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

6 Faites de mme pour la ligne suivante. Saisissez au dbut de la troisime 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 dsormais ressembler ceci :
<P>Vous <UL> <LI>sur <LI>sur <LI>sur </UL> trouverez sur ce site des informations :</P> ma <A href="region.html">rgion</A> ;</LI> ma <A href="famille.html">famille</A> ;</LI> mes <A href="passions.html">passions</A>.</LI>

7 Enregistrez votre chier sous le nom pageacc1_4_1.html.

Examinez cette page laide de votre navigateur. Son aspect est dsormais plus agrable.

Figure 4.6 : Page daccueil avec liste puces

Testez les liens. Tout va bien, mais lorsque vous voulez revenir votre page daccueil, vous obtenez une des anciennes versions. Pourquoi ? Tout simplement parce que vous navez pas modi 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 daccueil</A>

Ce type derreur est particulirement frquent (autant quexasprant !). Vous verrez par la suite une des faons de lviter, grce notamment

78 LE GUIDE COMPLET

Listes

Chapitre 4

laide dune barre de navigation, mais voici dj quelques rgles et astuces simples permettant dviter au moins partiellement ce pige :

1 Ne modiez un nom de chier comportant un numro de version quen cas de modication 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 modications rellement secondaires, qui ne sont souvent que des corrections de bogues. En revanche, pensez actualiser le contenu de votre balise <META name ="version" content="numro de version">. 2 Une bonne habitude prendre consiste archiver rgulirement tous les chiers composant le site, et au minimum lors dun changement de version mineure. Vous pouvez ainsi compacter, par exemple dans un chier nomm ici MonSitev1_3.zip, tous les chiers crs et employs jusque-l (sauf pageacc1_4_1.html). 3 Idalement, cette archive (ou une copie) devrait tre stocke un autre emplacement : en cas dincident, vous pourriez ainsi revenir la version antrieure. 4 Supprimez ensuite de la racine du site les chiers superus (ici, les chiers pagacc1_3_x.html). 5 Enn, modiez les chiers prsentant dans la nouvelle version des problmes (liens ou autres) en corrigeant les erreurs.
Remarquez que cest exactement la dmarche que nous avons retenue, puisque les diffrentes archives MonSite correspondent chaque chapitre.

Listes imbriques
Il est trs facile dimbriquer des listes, mme de types diffrents. Pour ce faire, dbutez simplement une nouvelle liste plutt que de crer un nouveau membre de liste. La nouvelle liste se comporte comme une subdivision du membre le prcdant immdiatement. Voici un exemple :

LE GUIDE COMPLET 79

Chapitre 4

Listes et tableaux

Cration dune liste imbrique avec un diteur de texte

Listing 4-1 : Exemple de code de listes imbriques
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 <H1>Arguments et valeurs possibles dans des listes</H1> <OL type="I"> <LI>Liste ordonne</LI> <UL type="square"> <LI>Elment OL</LI> <DL> <DT>start</DT> <DD>valeur de dbut de la numrotation</DD> <DT>type</DT> <DD>1,Chiffres arabes (valeur par dfaut)<BR> a : Lettres minuscules<BR> A : Lettres majuscules<BR> I : Chiffres romains en minuscules<BR> I : Chiffres romains en majuscules</DD> </DL> <LI>Elment LI</LI> <DL> <DT>value</DT> <DD>valeur de rinitialisation de la numrotation</DD> <DT>type</DT> <DD>1,Chiffres arabes (valeur par dfaut)<BR> a : Lettres minuscules<BR> A : Lettres majuscules<BR> I : Chiffres romains en minuscules<BR> I : Chiffres romains en majuscules</DD> </DL> </UL> <LI>Liste puces</LI> <UL type="square"> <LI>Elment UL</LI> <DL> <DT>type</DT> <DD> disc : Rond plein (valeur par dfaut)<BR> square : Carr plein<BR> circle : Cercle vide</DD> </DL> <LI>Elment LI</LI> <DL> <DT>type</DT> <DD> disc : Rond plein (valeur par dfaut)<BR> square : Carr plein<BR> circle : Cercle vide</DD> </DL> </UL> </OL>

80 LE GUIDE COMPLET

Listes

Chapitre 4

La gure suivante prsente laspect de ce code vu dans un navigateur.

Figure 4.7 : Listes imbriques

Ce code prsente plusieurs choses intressantes. Remarquez dabord la prsence de numros de ligne : ceux-ci ne sont prsents que pour faciliter linterprtation du code et ne doivent pas tre saisis. En revanche, le code a t indent pour mettre en vidence les imbrications : les lments de mme rang apparaissent les uns en dessous des autres, tandis que les passages la ligne HTML (<BR>) ont t matrialiss laide de retours chariot manuels . Comme cela a dj t prcis, les espaces vides supplmentaires (espaces, tabulations, sauts de ligne) sont ignors par HTML : ils ne servent qu simplier la lecture du code. Cest 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 dtail : aprs la ligne 1 (llment titre de premier niveau H1), il est dbut en ligne 2 une liste ordonne laide
LE GUIDE COMPLET 81

Chapitre 4

Listes et tableaux

de llment OL, dont lattribut type stipule que la numrotation est faite en chiffres romains majuscules (type="I"). Vient ensuite, ligne 3, un lment de ligne LI, puis, ligne 4, dbute une liste puces, llment UL possdant un attribut type x square, pour dnir une puce carre pleine. Vient ensuite un lment de liste (LI), puis commence, ligne 6, une liste de dnitions numrant les attributs et les valeurs possibles pour cet lment. Il suffit ensuite de fermer la liste de dnitions (ligne 15), de placer un autre lment LI (pour llment LI de liste ordonne, ligne 16) et de recommencer une liste de dnitions. Nous fermons ensuite la liste de dnitions (ligne 26), la liste puces (ligne 27) et arrivons au second membre de la liste ordonne (ligne 28). La suite reprend la structure prsente partir de la ligne 4. La dernire liste de dnitions est ferme ligne 43, la liste puces ligne 44 et enn la liste numrote ligne 45. Ouf Trois types diffrents de listes imbriques, tout en jouant laide de lattribut type sur laspect de ces listes Cette structure demande la saisie dune quantit de code importante. Il est donc intressant de voir en quoi le recours un diteur HTML permet de faciliter les choses.

Cration dune liste imbrique avec un diteur HTML

Nous allons ici crer des listes imbriques laide de lditeur gratuit du W3C, Amaya.

1 Ouvrez Amaya (Dmarrer > Tous les programmes > Amaya > Amaya). 2 Crez un nouveau document en choisissant File > New > New XHTML 1.0 Transitional document. Par dfaut, il est propos de crer le chier dans le dossier dinstallation dAmaya : naviguez jusqu votre dossier Mon site Web, puis saisissez comme nom de document ListesImbriques2.html. 3 Le document est de type XHTML 1.0. Transformez-le immdiatement 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 : Modication du type de document avec Amaya

4 Remarquez que la barre de titre affiche no title. Modiez le titre du document. Choisissez XHTML> Change title, puis saisissez Listes imbriques. La barre de titre affiche Listes imbriques. 5 Crez un titre de niveau 1 : cliquez sur le bouton H1, puis saisissez Arguments et valeurs possibles dans des listes. 6 Dbutez une liste numrote en cliquant sur le bouton Numbered list. 7 Slectionnez la ligne numrote 1, puis choisissez Edit > Insert. Une seconde ligne numrote 2 apparat en dessous. Remarquez quavec Amaya, pour crer des listes imbriques, mieux vaut dnir la structure dabord : nous crons les deux lignes de la premire liste avant dinsrer les autres listes. 8 Placez-vous juste aprs 2, puis saisissez Liste puces. 9 Placez-vous juste aprs 1, puis saisissez Liste ordonne. 10 Dbutez une liste puces en cliquant sur le bouton Bulleted list. 11 Comme prcdemment, cette liste puces doit compter deux lments : slectionnez la premire ligne, puis choisissez Edit > Insert. 12 Placez-vous sur la premire ligne, puis saisissez Elment OL. 13 Dbutez une liste de dnitions en cliquant sur le bouton Dfinition list, puis saisissez start. 14 Choisissez XHTML > List > Definition (dd), puis saisissez valeur de dbut de la numrotation. 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 dfaut), puis choisissez XHTML > Break (br). 18 Rptez ltape 13, en saisissant successivement a : Lettres minuscules, A : Lettres majuscules et i : Chiffres romains en minuscules en insrant aprs chaque fois un saut de ligne. 19 Saisissez I : Chiffres romains en majuscules.
Chanes de texte

Vous pouvez galement saisir la suite toutes les chanes de texte, puis vous placer la n de chacune et insrer le saut de ligne en choisissant XHTML > Break (br).

20 Placez-vous sur le deuxime lment de la liste puces et saisissez Elment LI. 21 Dbutez une liste de dnitions en cliquant sur le bouton Dfinition list, puis saisissez value. 22 Choisissez XHTML > List > Definition (dd), puis saisissez valeur de rinitialisation. 23 Rptez les tapes 15 19. 24 Placez-vous aprs Liste puces, puis dbutez une nouvelle liste puces en cliquant sur le bouton Bulleted list. 25 Cette liste puces doit galement compter deux lments : slectionnez la premire ligne, puis choisissez Edit > Insert. 26 Placez-vous sur la premire ligne, puis saisissez Elment UL. 27 Dbutez une liste de dnitions en cliquant sur le bouton Dfinition list, puis saisissez type. 28 Choisissez XHTML > List > Definition (dd). 29 Saisissez disc : Rond plein (valeur par dfaut), puis choisissez XHTML > Break (br). 30 Rptez ltape 29, en saisissant square : Carr plein, en insrant un saut de ligne, puis en saisissant circle : Cercle vide. 31 Placez-vous sur la seconde ligne, puis saisissez Elment LI. 32 Rptez les tapes 27 30.
84 LE GUIDE COMPLET

Listes

Chapitre 4

La fentre de lditeur affiche directement les listes imbriques telles que vous les aviez vues prcdemment.

Figure 4.9 : Page Listes imbriques dans lditeur Amaya

Aucune balise na t saisie en dur . Mais quel est laspect du code sous-jacent ? Pour le voir, choisissez View > Show source. Un extrait de ce code est prsent dans le listing suivant.

Figure 4.10 : Code source de la page Listes imbriques

Remarquez la prsence de numros de lignes (servant faciliter lidentication des erreurs), linstruction !doctype et llment meta
LE GUIDE COMPLET 85

Chapitre 4

Listes et tableaux

qui concerne le gnrateur, automatiquement insrs. Bien que nous ayons choisi de convertir le document en HTML 4.01, les balises gurent en minuscules, conformment la spcication XHTML 1.0. Le code est agrablement indent et agrment de couleurs pour mieux identier les lments et leurs attributs. Remarquez en outre la prsence de caractres curieux , la place des caractres accentus (par exemple, ordonne est cod ordonn&#xe9;e). Nous reviendrons bientt sur ce point.
Listing 4-2 : Extrait du code du fichier listesimbriques2.html
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
40 41 42 43 44 45 46 47 48 49 50 51 52 53

Chapitre 4

</dl> </li> <li>El&#xe9;ment LI <dl> <dt>type</dt> <dd>disc : Rond plein (valeur par d&#xe9;faut)<br> square : Carr&#xe9; plein<br> circle : Cercle vide </dd> </dl> </li> </ul> </li> </ol>

Lextrait concernant uniquement les listes est un peu plus long : les balises de fermeture </li> occupent une ligne elles seules, contrairement au listing prcdent. Remarquez en outre que les listes sont rellement imbriques dans les lments LI concerns : 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 imbriques

LE GUIDE COMPLET 87

Chapitre 4

Listes et tableaux

Est-il rellement plus simple de travailler avec un diteur ddi que directement avec le Bloc-Notes ? Pour le moment, cela nest pas probant, mais reconnaissons que cet exemple est particulirement tordu ! Les listes sont largement employes dans les pages Web. Pour vous en persuader, examinez la page de la version franaise de la spcication HTML 4.01 et le code source correspondant.

Figure 4.12 : Exemple de listes

Vous y voyez des listes puces et numrotes imbriques, employes pour crer une table des matires.

Figure 4.13 : Exemple de listes avec le code source correspondant

88 LE GUIDE COMPLET

Tableaux

Chapitre 4

4.2. Tableaux
Les tableaux (souvent nomms tables en HTML) permettent de prsenter des donnes (texte, texte prformat, images, liens, formulaires, champs de formulaires, autres tables, etc.) organises en lignes et en colonnes. Ils constituent dsormais la mthode favorite daffichage de donnes et de prsentation des pages Web. Alors quils taient initialement prvus pour les seules donnes, ils ont rapidement conquis le statut doutils de prsentation, autorisant les auteurs concevoir des pages ressemblant des documents imprims, dotes de barres latrales, de colonnes et despaces vierges. Les tableaux ne devraient pas toutefois reprsenter simplement un moyen de disposer le contenu dun document : cela peut entraner des problmes de restitution sur les mdias non visuels. En outre, employs avec des images, ces tableaux peuvent forcer lutilisateur effectuer un dlement horizontal pour voir un tableau conu sur un systme offrant une surface daffichage de taille suprieure. An de minimiser ces problmes, il est recommand demployer des feuilles de style pour le contrle de la disposition plutt que des tableaux. Les cellules dun tableau peuvent contenir soit des informations de rubrique (lment TH), soit des informations de donnes (lment TD). Les cellules peuvent occuper plusieurs lignes et colonnes. Le modle du tableau HTML 4 permet aux auteurs ltiquetage de chaque cellule, de sorte que les agents utilisateurs non visuels peuvent communiquer plus facilement lutilisateur les indications de rubrique concernant la cellule. Ce mcanisme apporte non seulement une grande assistance aux personnes qui ont des dciences visuelles, mais donne aussi aux navigateurs sans l multimodes, avec des capacits daffichage limites (par exemple, les tlavertisseurs et les tlphones utilisant le Web), la possibilit de grer les tableaux. Contrairement ce qui a pu se passer au dbut, la plupart des navigateurs prennent dsormais parfaitement en charge les tableaux (mme si certains interprteurs texte-parole peuvent encore prouver quelques difficults les comprendre). Compte tenu de leur facilit de mise en uvre, il serait dommage de se priver de ces prcieux outils. Attention toutefois, si leur mise en uvre initiale est trs simple, leur puissance permet datteindre un degr de sophistication lev assorti dune rare complexit !

LE GUIDE COMPLET 89

Chapitre 4

Listes et tableaux

Cest probablement pour les tableaux que le recours un diteur HTML ddi est le plus prcieux, comme nous le verrons vers la n du chapitre. Mais, comme nous lavons dj dit en dautres cas, la meilleure faon de bien les comprendre consiste en crer dabord quelques-uns de toutes pices laide dun simple diteur de texte : ce quoi nous allons nous attacher maintenant.

Cration dun tableau simple

La structure fondamentale dun tableau est constitue de llment parent TABLE. Celui-ci contient tous les autres lments qui spcient la lgende, les ranges, le contenu et la mise en forme. Ses principaux lments enfants sont TR (ligne) et TD (cellule dune ligne, assimilable une colonne). Nous allons commencer par placer sur la page Ma famille du site un tableau trs simple, qui a pour but de prsenter une famille pour le moment rduite aux deux parents (nous avons bien le temps davoir des enfants !).

1 Ouvrez le Bloc-Notes sil ne lest pas dj, puis le chier famille.html cr au cours du chapitre prcdent. 2 Comme dhabitude, modiez le numro de version :
<META name="version" content="1.4.1">

3 Supprimez la ligne du titre de niveau 2 (H2), puis placez-vous aprs la balise <P> et remplacez le contenu actuel par :
<P>Prsentation de ma famille</P>

4 Placez-vous aprs la balise </P> et appuyez sur [] pour crer une nouvelle ligne. Sur cette ligne, saisissez <TABLE>. Comme conseill habituellement, fermez immdiatement llment en appuyant sur [] et en saisissant la balise fermante du tableau, </TABLE>.
Lastuce avec les tableaux HTML consiste rchir en termes de lignes, et non de colonnes, contrairement ce qui est gnralement pratiqu dans un tableau de feuille de calcul ou de traitement de texte.

5 Placez-vous aprs la balise ouvrante <TABLE>, appuyez sur [], ouvrez un lment ligne avec <TR>, appuyez sur [] et fermez llment par </TR>.
90 LE GUIDE COMPLET

Tableaux

Chapitre 4

6 Placez-vous aprs la balise ouvrante <TR>, appuyez sur [], ouvrez un lment colonne avec <TD>, saisissez Qualit, fermez llment par </TD>, puis appuyez sur []. 7 Saisissez <TD>Prnom</TD>, puis appuyez sur []. 8 Saisissez <TD>Age</TD>, puis appuyez sur []. 9 Saisissez <TD>Taille</TD>, puis appuyez sur []. 10 Placez-vous aprs la balise fermante </TR>, appuyez sur [], puis ouvrez un nouvel lment ligne avec <TD>. <TR>, appuyez sur [] et fermez llment par </TR>. 11 Placez-vous aprs la balise ouvrante <TR>, appuyez sur [], saisissez <TD>Pre</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 aprs la balise fermante </TR>, appuyez sur [], puis ouvrez un nouvel lment ligne avec <TR>, appuyez sur [] et fermez llment par </TR>. 16 Placez-vous aprs la balise ouvrante <TR>, appuyez sur [], saisissez <TD>Mre</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 chier sans modier son nom (nous ne souhaitons pas de nouvelle erreur de lien !). Ne fermez ni le chier ni le Bloc-Notes.

Figure 4.14 : Aspect dun 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 daccueil et en suivant le lien vers Ma famille, ou en chargeant directement la page famille.html. Ce tableau reste dune extrme simplicit. Voici le code complet de cette page.
Listing 4-3 : Code de la page famille.html (version 1.4.1)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <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>Prsentation de ma famille</P> <TABLE> <TR> <TD>Qualit</TD> <TD>Prnom</TD> <TD>Age</TD> <TD>Taille</TD> </TR> <TR> <TD>Pre</TD> <TD>Jean</TD> <TD>30</TD> <TD>1,83</TD> </TR> <TR> <TD>Mre</TD> <TD>Martine</TD> <TD>28</TD> <TD>1,63</TD> </TR> </TABLE> <P align="center"> <A href="mailto:votre_nom@votre_FAI">Ecrivez-moi !</A>. </P> <P align="center"> <A href="pageacc1_4_1.html">Retour vers la page daccueil</A> </P> </BODY> </HTML>

92 LE GUIDE COMPLET

Tableaux

Chapitre 4

Les balises fermantes des lments TR et TD peuvent tre omises, mais cela est dconseill, ne serait-ce que par souci de compatibilit avec XHTML 1.0.

En-tte de colonne : lment TH

Cest un tableau trs simple, de trois lignes et quatre colonnes. Comment lamliorer ? Tout dabord, il serait mieux de mettre en vidence les en-ttes des colonnes. Cela ne pose aucun problme, grce un lment prvu cet effet, TH.
j

Placez-vous aprs louverture du premier lment ligne (TR) et remplacez tous les noms dlment TD par TH, comme dans :
<TH>Qualit</TH>

La balise fermante de llment TH peut tre omise, mais cela reste dconseill.
Les lments TH

Les agents utilisateurs visuels restituent typiquement le contenu des lments TH centr verticalement et horizontalement, et en caractres gras.

Lgende de tableau : lment CAPTION

Il serait galement intressant de doter le tableau dune lgende, plutt que davoir recours un lment P qui casse un peu la structure de la page. Tel est le but de llment CAPTION.

1 Supprimez la ligne <P>Prsentation de ma famille</P>. 2 Placez-vous aprs louverture de llment tableau (TR), appuyez sur [] et saisissez :
<CAPTION>Prsentation de la famille</CAPTION>

Llment CAPTION fournit une brve description du but du tableau. Il doit imprativement tre unique et situ immdiatement aprs la balise ouvrante de llment TABLE. Vous pouvez galement fournir une description plus longue, grce lattribut summary de llment TABLE, au bnce des personnes employant des agents utilisateurs de type convertisseur texte-parole ou gnration de braille. Nous reviendrons sur

LE GUIDE COMPLET 93

Chapitre 4

Listes et tableaux

cet attribut, ainsi que sur les autres attributs applicables aux lments enfants dun tableau et qui permettent damliorer son rendu pour les agents utilisateurs non visuels dans le Chapitre 10, traitant de laccessibilit. Servez-vous cependant tout de suite de lattribut summary :

3 Placez-vous dans la balise douverture de llment TABLE et saisissez :

<TABLE summary="Ce tableau prsente les membres de ma famille en donnant leur titre, leur prnom, leur ge et leur taille">

Cet lment est particulirement important pour les tableaux dpourvus de lgende (CAPTION).

Contrle de lalignement dun tableau

Vous avez dj rencontr lattribut align, disponible pour peu prs tous les lments bloc. TABLE tant un lment bloc, en employant align="center" dans cet lment, vous centrez le tableau dans la page. Les valeurs possibles pour align sont center, left ou right.

1 Modiez la ligne de la balise douverture de llment TABLE pour centrer le tableau :

<TABLE align="center" summary="Ce tableau prsente les membres de ma famille en donnant leur titre, leur prnom, leur ge et leur taille">

2 Enregistrez votre chier, sans modier son nom. Ne fermez ni le chier ni le Bloc-Notes.
Examinez cette page dans votre navigateur. Le tableau est plus intressant.

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 nimporte laquelle des cellules individuelles, pour ne centrer que les donnes de cette cellule. Souvenez-vous cependant que lemploi de lattribut align est dsormais est dsormais dconseill : mieux vaut recourir aux feuilles de style.

Bordures et rgles de tableau : attributs border, frame et rules

Un tableau digne de ce nom possde gnralement des lignes de sparation. Vous pouvez contrler celles-ci laide de plusieurs attributs facultatifs de llment TABLE : border, frame et rules. Commenons par lattribut border, dont la valeur exprime en pixels dnit la largeur du cadre extrieur.

1 Modiez comme suit la ligne de la balise douverture de llment TABLE :

<TABLE border="2" align="center" summary="Ce tableau prsente les membres de ma famille en donnant leur titre, leur prnom, leur ge et leur taille">

2 Enregistrez votre chier, sans modier son nom. Ne fermez ni le chier ni le Bloc-Notes.
Examinez le tableau dans un navigateur : son aspect est nettement plus sympathique.

Figure 4.16 : Aspect du tableau amlior

Vous pouvez cependant aller bien plus loin, en spciant quels cts du cadre entourant la table doivent tre visibles (grce lattribut frame),

LE GUIDE COMPLET 95

Chapitre 4

Listes et tableaux

ainsi que les rgles devant tre affiches (grce lattribut rules). Les valeurs possibles pour ces deux attributs sont prsentes dans le tableau de la page 5. Modiez votre tableau pour afficher une bordure de 5 pixels gauche et droite du tableau, des rgles tant dessines uniquement entre les colonnes :

3 Modiez comme suit la ligne de la balise douverture de llment TABLE :

<TABLE border="5" frame="vsides" rules="cols" align="center" summary="Ce tableau prsente les membres de ma famille en donnant leur titre, leur prnom, leur ge et leur taille">

4 Enregistrez votre chier, sans modier son nom. Ne fermez ni le chier ni le Bloc-Notes.
Examinez le rsultat obtenu dans un navigateur : son aspect devrait ressembler ce qui est prsent dans la gure suivante..

Figure 4.17 : Aspect du nouveau tableau avec Firefox

Le tableau suivant prsente les valeurs possibles des attributs frame, rules et border ainsi que leur signication.
Tableau 4.2 : Attributs de bordure et de rgles de llment TABLE

Attribut

Valeur

Signication Aucune bordure (valeur par dfaut) Haut uniquement Bas uniquement Haut et bas uniquement Droite et gauche uniquement Ct gauche uniquement

Frame

Void Above Below Hsides Vsides Lhs

96 LE GUIDE COMPLET

Tableaux

Chapitre 4

Tableau 4.2 : Attributs de bordure et de rgles de llment TABLE

Attribut

Valeur

Signication Ct droit uniquement Les quatre cts Aucune (valeur par dfaut) Uniquement entre les groupes de lignes (THEAD, TFOOT et TBODY) et les groupes de colonnes (COLGROUP et COL) Uniquement entre les lignes Uniquement entre les colonnes Entre toutes les lignes et colonnes Bordure de n pixels. Pas de bordure si n = 0.

Rhs box ou border Rules None Groups

Rows Cols All Border N

Pour des raisons de compatibilit descendante, les conventions suivantes doivent tre respectes par les agents utilisateurs :
j j j

La dnition border="0" signie que frame="void" et que rules="none" (sauf si spci autrement). Toute autre valeur de lattribut border signie inversement que frame="border" et que rules="all". La prsence de lattribut border sans valeur dans la balise ouvrante de llment TABLE quivaut frame="border" et rules="all", avec une certaine valeur par dfaut non nulle pour lattribut border. Autrement dit, les dnitions <TABLE border="2"> et <TABLE sont border="2" frame="border" rules="all"> quivalentes, comme <TABLE border> et <TABLE frame="border" rules="all">.
Variations selon les navigateurs

Le rendu dun tableau peut diffrer lgrement selon le navigateur employ. Examinez les copies dcran suivantes, correspondant ltat 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 prcdemment obtenu. Si Firefox et Internet Explorer sont trs proches (lintervalle entre le titre et le tableau est plus faible avec Firefox, tandis que leffet relief est plus prononc), Amaya affiche une unique ligne de sparation.

Contrle de la taille et de la structure des cellules

Reprenons un peu de terminologie : un tableau est compos de lignes (lments TR) et de colonnes. Lintersection dune ligne et dune colonne est une cellule, le plus petit lment de donnes dun tableau. Une cellule individuelle ne devrait contenir quune information

98 LE GUIDE COMPLET

Tableaux

Chapitre 4

(toujours la structure avant tout !), de type en-tte (lment TH) ou donne (lment TD). Dans ce qui prcde, vous avez construit votre premier tableau, compos de trois lignes (dont la ligne den-ttes) et de quatre colonnes, soit un total de douze cellules individuelles : le tableau contient effectivement trois lments ligne TR et douze lments cellule, dont quatre lments TH den-tte et huit lments TD de donnes. Une cellule peut recevoir une mise en forme particulire en HTML laide dattributs spciaux.

Espacement : attributs cellspacing et cellpadding

Il est ainsi possible de modier lespacement entre les cellules, tout comme le dcalage entre le contenu de la cellule et la bordure, ce qui porte le nom un peu inattendu de remplissage (padding). Pour ce faire, vous modiez les attributs cellspacing et/ou cellpadding. Lattribut cellspacing dtermine la largeur de la partie blanche de la bordure. Autrement dit, il quantie lespace qui doit tre laiss par lagent utilisateur entre le ct gauche du tableau et le ct gauche de la colonne situe lextrme gauche, le haut du tableau et le haut de la range suprieure, et ainsi de suite pour le ct droit et le bas du tableau. Lattribut spcie galement lespacement entre les cellules. Notre tableau tant de trs petite taille, vous allez larer un peu.

1 Modiez comme suit la ligne de la balise douverture de llment TABLE :

<TABLE border="5" frame="vsides" rules="cols" align="center" cellspacing="20" summary="Ce tableau prsente les membres de ma famille en donnant leur titre, leur prnom, leur ge et leur taille">

2 Enregistrez votre chier, sans modier son nom, puis examinez le rsultat dans votre navigateur (voir Figure 4.20).
moins que cela ne ressemble une des gures qui suivent (voir Figure 4.21, 4.22).

LE GUIDE COMPLET 99

Chapitre 4

Listes et tableaux

Figure 4.20 : Emploi de lattribut cellspacing, vu dans Firefox.

Figure 4.21 : Emploi de lattribut cellspacing, vu dans Internet Explorer

Figure 4.22 : Emploi de lattribut cellspacing, vu dans Amaya.

Les diffrences entre navigateurs sont ici encore plus agrantes : Firefox semble incapable de tenir compte de la prsence de lattribut cellspacing, contrairement ses homologues. Plus vous compliquez la prsentation dun tableau en combinant les attributs et plus cela est susceptible de se produire.

3 Modiez nouveau la ligne de la balise douverture de llment TABLE :

<TABLE border="2" align="center" cellspacing="20" summary= "Ce tableau prsente les membres de ma famille en donnant leur titre, leur prnom, leur ge et leur taille">

Laspect dans les trois navigateurs, bien quencore diffrent, est plus satisfaisant.

100 LE GUIDE COMPLET

Tableaux

Chapitre 4

Figure 4.23 : Page modie avec attribut cellspacing, vu dans Firefox

Figure 4.24 : Page modie avec attribut cellspacing, vu dans Internet Explorer

Figure 4.25 : Page modie avec attribut cellspacing, vu dans Amaya.

Un second attribut, cellpadding, correspond la largeur, galement exprime en pixels, de lespace compris entre le contenu de la cellule et la bordure du tableau ou la rgle. La valeur de cet attribut peut tre exprime en pixels : les quatre marges se trouvent alors cette distance du contenu. Si la valeur de lattribut est exprime en pourcentage, les marges suprieure et infrieure devraient se trouver gale distance du contenu, en fonction dun pourcentage de lespacement vertical disponible, tandis que les marges gauche et droite devraient se trouver gale distance du contenu, en fonction dun pourcentage de lespacement horizontal disponible. Ces deux attributs contrlent donc conjointement lespacement entre et lintrieur des cellules.
Bordure invisible

En attribuant au tableau une bordure invisible (border=0), le contenu de la cellule semble otter , spar de toutes les autres informations.

LE GUIDE COMPLET 101

Chapitre 4

Listes et tableaux

Cest souvent intressant, puisque HTML reste globalement peu adapt aux espaces blancs.

1 Modiez comme suit la ligne de la balise douverture de llment TABLE :

<TABLE border="2" align="center" cellspacing="20" cellpadding="30%" summary="Ce tableau prsente les membres de ma famille en donnant leur titre, leur prnom, leur ge et leur taille">

2 Enregistrez votre chier, sans modier son nom, puis examinez le rsultat dans votre navigateur. Vous devriez voir quelque chose dquivalent ce qui est prsent dans la gure suivante.

Figure 4.26 :

Emploi de lattribut cellpadding

Ici, lattribut cellspacing spcie que les cellules devraient tre spares de vingt pixels, les unes par rapport aux autres ainsi que par rapport au cadre du tableau. Lattribut cellpadding stipule que la marge suprieure et la marge infrieure de la cellule seront chacune spares du contenu de la cellule de 15 % de lespacement vertical disponible (soit 30 % au total). De mme, la marge de gauche et la marge de droite de la cellule seront chacune spares du contenu de la cellule de 15 % de lespacement horizontal disponible (soit 30 % au total).

Alignement : attributs align et valign

Vous pouvez galement modier lalignement dune cellule. Pour modier lalignement horizontal, vous recourez lattribut align, dj
102 LE GUIDE COMPLET

Tableaux

Chapitre 4

rencontr, dans un lment TD ou TH. Lalignement vertical sajuste laide de lattribut valign. valign, qui peut prendre les valeurs top (haut), bottom (bas), middle (milieu, la valeur par dfaut) et baseline (premire ligne). Cette dernire valeur aligne le contenu de toutes les cellules selon la premire ligne de texte, mais pas forcment en haut ni en alignant la dernire ligne.

1 Modiez comme suit les lments TD du second lment TR (le premier contenant les en-ttes, soit des lments TH) :
<TD <TD <TD <TD valign="top">Pre</TD> valign="top">Jean</TD> align="right" valign="top">30</TD> align="right" valign="top">1,83</TD>

2 Procdez de mme pour les lments TD du dernier lment TR :

<TD <TD <TD <TD valign="top">Mre</TD> valign="top">Martine</TD> align="right" valign="top">28</TD> align="right" valign="top">1,63</TD>

3 Enregistrez votre chier, sans modier son nom, puis examinez le rsultat dans votre navigateur.

Figure 4.27 : Contrle de lalignement horizontal et vertical

LE GUIDE COMPLET 103

Chapitre 4

Listes et tableaux

Attributs dconseills en HTML

Vous ne devriez pas tre tonns que je signale une fois encore que les attributs align et valign sont dconseiller dans le corps de la page HTML, et quune feuille de style devrait tre employe la place

Largeur des colonnes : attribut width

La largeur des colonnes peut tre spcie laide de largument width de trois faons diffrentes :
j Fixe

: une largeur xe est exprime en pixels (par exemple,

width="30"). Spcier une largeur xe permet une restitution

progressive.
Conit dattributs

Lorsquun tableau ou une colonne possde une largeur xe, les attributs cellspacing et cellpadding peuvent ncessiter plus despace que celui qui est attribu. En cas de conit, les agents utilisateurs peuvent (sans tre obligs de le faire) donner ces attributs la priorit sur lattribut de largeur width. Mieux vaut donc viter de se trouver dans cette situation.

j Pourcentage

: une largeur exprime en pourcentage (par exemple, width="20%") se fonde sur le pourcentage despace horizontal disponible pour le tableau (entre les marges courantes gauche et droite). Remarquez que cet espace ne dpend pas du tableau en lui-mme : une spcication en pourcentage permet donc une restitution progressive. Proportionnelle : une valeur proportionnelle (par exemple, width="3*") se rapporte aux portions despace horizontal ncessaire au tableau. Si le tableau possde une largeur xe (via lattribut width de llment TABLE), les agents utilisateurs peuvent le restituer de faon progressive, comme pour des colonnes proportionnelles. En revanche, si la largeur du tableau nest pas xe, lagent utilisateur doit attendre davoir reu toutes les donnes avant de pouvoir dterminer lespace horizontal ncessaire au tableau. Cet espace sera alors seulement allou aux colonnes proportionnelles.

104 LE GUIDE COMPLET

Tableaux

Chapitre 4

Comme cela a t mentionn, lattribut width peut galement tre employ sur llment TABLE pour dnir la largeur totale dun tableau. Comme pour une colonne, cette largeur peut tre exprime de faon xe, en pourcentage ou de faon proportionnelle. Modiez de nouveau votre tableau :

1 Modiez comme suit la ligne de la balise douverture de llment TABLE, pour crer un tableau occupant 80 % de lespace libre disponible lcran :
<TABLE border="2" align="center" cellspacing="20" cellpadding="30%" width="80%" summary="Ce tableau prsente les membres de ma famille en donnant leur titre, leur prnom, leur ge et leur taille">

2 Modiez comme suit les lments TH du premier lment TR (celui qui contient les en-ttes) :
<TH <TH <TH <TH width="30%">Qualit</TH> width="30%">Prnom</TH> width="20%">Age</TH> width="20%">Taille</TH>

Remarquez que le total des quatre pourcentages est bien gal 100 %.

3 Enregistrez votre chier, sans modier son nom, puis examinez le rsultat 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 gure mrite que vous vous y attardiez un peu plus longtemps. Tout dabord, remarquez que la valeur par dfaut de lattribut dalignement horizontal align est centr (align="center") pour un lment TH, alors quil est gauche (align="left") pour un lment TD. En outre, les choix dalignement sont bien mieux mis en vidence que prcdemment. Remarquez galement quil a suffi de modier la largeur des cellules de la premire ligne : ces spcications ont t hrites par les lignes suivantes. Mais que se passerait-il si vous spciez des largeurs diffrentes pour les cellules de la seconde ligne ? Autant essayer

4 Modiez comme suit les lments TD du second lment TR (le premier contenant les en-ttes, soit des lments TH) :
<TD <TD <TD <TD valign="top" width="20%">Pre</TD> valign="top" width="20%">Jean</TD> align="right" valign="top" width="30%">30</TD> align="right" valign="top" width="25%">1,83</TD>

Pour corser les choses, le total des pourcentages est mme cette fois diffrent de 100 %

5 Enregistrez votre chier, mais cette fois-ci sous le nom FamilleTest.html, puis examinez le rsultat dans votre navigateur.

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

cellules

Manifestement, lagent utilisateur a t dconcert : il a retenu la plus forte des valeurs de largeur spcies pour les trois premires colonnes (30 % pour les deux premires colonnes, cause des largeurs spcies pour les deux premires cellules de la premire ligne, puis 30 % pour la
106 LE GUIDE COMPLET

Tableaux

Chapitre 4

troisime colonne, cause de la troisime cellule de la deuxime ligne) et na accord la dernire colonne que le reste de lespace disponible, soit 10 %. Gardez toutefois lesprit que, mme si lemploi de lattribut width nest pas dconseill, mieux vaut spcier la largeur des tableaux laide 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. Lattribut rowspan ralise une fusion verticale tandis que lattribut colspan opre une fusion horizontale. Lattribut rowspan spcie le nombre de colonnes couvertes par la cellule courante. Sa valeur par dfaut est "1", la valeur "0" signiant que la cellule couvre toutes les colonnes, depuis la colonne courante jusqu la dernire colonne de la section de table (voir plus loin les lments THEAD, TBODY et TFOOT) dans laquelle la cellule est dnie. Lattribut colspan spcie le nombre de colonnes couvertes par la cellule courante. Sa valeur par dfaut est "1", la valeur "0" signiant que la cellule couvre toutes les colonnes, partir de la colonne courante jusqu la dernire colonne du groupe de colonnes (voir plus loin llment COLGROUP) dans lequel la cellule est dnie.

Cration dun tableau cellules fusionnes laide dun diteur de texte

Vous allez ici mettre en uvre ces nouveaux attributs en modiant la page secondaire Mes rgions du site Web, laide dun diteur de texte.

1 Ouvrez le Bloc-Notes sil ne lest pas dj, puis le chier region.html (attention, si vous navez pas ferm prcdemment le Bloc-Notes, le chier actuel est familleTest.html). 2 Comme dhabitude, modiez le numro 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 llment P. Crez sa place un nouveau tableau centr, avec sa lgende (lment CAPTION) et son attribut summary) :
<TABLE border="2" align="center" summary= "Prsentation de ma rgion"> <CAPTION>Ma rgion</CAPTION> </TABLE>

4 Vous allez crer ici un tableau un peu complexe, employant la fois des fusions de lignes et de colonnes, dont laspect thorique est reprsent dans la gure suivante.
Tableau 4.3 : Aspect du tableau crer

Colonne 1 Ligne 1 Ligne 2 Ligne 3 Ligne 4 Cette cellule occupe 1 colonne et 4 lignes. Elle contiendra par la suite une image.

Colonne 2

Colonne 3

Colonne 4

Cette cellule stend sur 3 colonnes. Cellule individuelle Cellule sur 2 lignes Cellule individuelle Cellule individuelle

Cellule sur 2 lignes et 2 colonnes

Ce tableau possde au total quatre lignes et quatre colonnes. Comme cela a dj t voqu prcdemment, un tableau HTML doit se construire ligne par ligne. Examinez la premire ligne thorique : elle contient deux cellules, lune stendant sur trois lignes et lautre sur trois colonnes. Entrez le code pour crer cette premire ligne.

5 Ouvrez un lment de ligne TR (en vous plaant au-dessus de la balise de n </TABLE> et en crant de nouvelles lignes), puis crez la premire cellule en la dclarant comme stendant sur 4 lignes :
<TR> <TD rowspan="4">...Une image sera place ici...</TD> </TR> </TABLE>

6 Crez ensuite la seconde cellule, qui doit stendre sur trois colonnes :
<TR> <TD rowspan="4">...Une image sera place ici...</TD> <TD colspan="3">Ma rgion est clbre pour ses forts, ses montagnes et ses lacs.</TD> </TR>

108 LE GUIDE COMPLET

Tableaux
Tableau 4.4 : Cellules cres la n de ltape 6

Chapitre 4

Colonne 1 Ligne 1 Ligne 2 Ligne 3 Ligne 4 ...Une image sera place ici...

Colonne 2

Colonne 3

Colonne 4

Ma rgion est clbre pour ses forts, ses montagnes et ses lacs. Cellule individuelle Cellule sur 2 lignes Cellule individuelle Cellule individuelle

Cellule sur 2 lignes et 2 colonnes

7 Passons la seconde ligne. Ouvrez un nouvel lment TR, sous la ligne prcdente, puis crez ses cellules. Vous nen avez que trois crer, puisque la premire cellule de cette ligne est sousentendue par lextension de la premire cellule de la premire ligne.
<TR> <TD>Les forts</TD> <TD>Les montagnes</TD> <TD>Les lacs</TD> </TR> </TABLE>
Tableau 4.5 : Cellules cres la n de ltape 7

Colonne 1 Ligne 1 Ligne 2 Ligne 3 Ligne 4 ...Une image sera place ici...

Colonne 2

Colonne 3

Colonne 4

Ma rgion est clbre pour ses forts, ses montagnes et ses lacs. Les forts Cellule sur 2 lignes Les montagnes Les lacs

Cellule sur 2 lignes et 2 colonnes

8 Occupez-vous de la troisime ligne. Crez cette fois uniquement deux lments TD, lun stendant sur deux lignes et lautre occupant deux lignes et deux colonnes :
<TR> <TD rowspan="2">Ici, du texte complter </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 cres la n de ltape 8

Colonne 1 Ligne 1 Ligne 2 Ligne 3 Ligne 4 ...Une image sera place ici...

Colonne 2

Colonne 3

Colonne 4

Ma rgion est clbre pour ses forts, ses montagnes et ses lacs. Les forts Ici, du texte complter. Les montagnes Les lacs

Ici, une autre image.

9 Et la quatrime ligne ? Comme le montre la gure prcdente, elle est dj implicitement cre : sa premire cellule par la premire cellule de la premire ligne, la seconde par la seconde cellule de la troisime ligne et les deux dernires par la troisime cellule de la ligne prcdente. Pour la bonne forme, insrez tout de mme un lment TR vide :
<TR></TR>

10 Enregistrez le chier, puis examinez la page dans votre navigateur:

Figure 4.30 : Aspect de la page Rgion dans un navigateur

Voici le code complet de la page :

Listing 4-4 : Fichier region.html (version 1.4.2).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><HTML> <HTML> <HEAD> <TITLE>Ma rgion</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= "Prsentation de ma rgion"> <CAPTION>Ma rgion</CAPTION> <TR> <TD rowspan="4">...Une image sera place ici...</TD> <TD colspan="3">Ma rgion est clbre pour ses forts, ses montagnes et ses lacs.</TD> </TR> <TR> <TD>Les forts</TD> <TD>Les montagnes</TD> <TD>Les lacs</TD> </TR> <TR> <TD rowspan="2">ici, du texte complter </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 daccueil</A> </P> </BODY> </HTML>

Figure 4.31 : Aspect de la page Rgion dans un navigateur

Une bonne mthode consiste toujours procder comme nous lavons fait ici, cest--dire en traant un quadrillage sur une feuille de papier et en indiquant les cellules dj cres : cela diminue fortement les risques derreur et les surprises dsagrables susceptibles den rsulter.

Cration dun tableau cellules fusionnes laide dun diteur HTML

Comme nous lavons dit auparavant, les tableaux tel celui de cet exemple peuvent rapidement devenir trs complexes : ce sont
LE GUIDE COMPLET 111

Chapitre 4

Listes et tableaux

probablement eux qui mritent le plus le recours un diteur HTML. Nous allons concevoir nouveau le mme tableau, mais cette fois laide de Nvu.

1 Ouvrez Nvu. Bonne nouvelle, contrairement Amaya, linterface est localise, si toutefois vous avez tlcharg la bonne version (nous employons ici la version 1.0PR (20050330)). 2 Saisissez Ma rgion. Cliquez sur la che de la zone de liste droulante, ct de Corps de texte et, choisissez dans la liste Titre 1.

Figure 4.32 : Cration dun titre de niveau 1

Placez-vous la n du titre, puis appuyez sur [].

3 Cliquez sur licne Tableau. Cela affiche une nouvelle fentre, qui permet de dnir le tableau crer.

Figure 4.33 : Bote de dialogue Insrer un tableau

112 LE GUIDE COMPLET

Tableaux

Chapitre 4

Vous allez immdiatement modier les attributs de votre tableau (en ralit de llment TABLE). Cliquez sur dition avance. Vous voyez que Nvu a dj dni trois attributs avec des valeurs par dfaut : cellspacing, cellpading et border.

Figure 4.34 : diteur des proprits avances

4 Vous voulez ajouter deux attributs summary et align. Ouvrez la zone de liste droulante Attribut et choisissez summary. Dans la zone de texte Valeur, saisissez Prsentation de ma rgion. Ouvrez nouveau la zone de liste droulante Attribut et choisissez align. Ouvrez la zone de liste droulante Valeur et choisissez center. La fentre diteur des proprits avances doit ressembler ce qui est prsent dans la gure qui suit. Conrmez par OK pour revenir la fentre Insrer un tableau.

Figure 4.35 : Fentre diteur des proprits avances renseigne

LE GUIDE COMPLET 113

Chapitre 4

Listes et tableaux

5 Nous voulons un tableau de quatre lignes et quatre colonnes : slectionnez dans cette fentre quatre lignes et quatre colonnes, puis cliquez sur OK. 6 Slectionnez les cellules de la premire colonne, puis choisissez dans le menu Tableau > Fusionner les cellules slectionnes : les quatre cellules concernes fusionnent. 7 Slectionnez les trois dernires cellules de la premire ligne, puis choisissez nouveau dans le menu Tableau > Fusionner les cellules slectionnes : les trois cellules concernes fusionnent. 8 De la mme faon, faites fusionner les secondes cellules des lignes 3 et 4, puis les deux dernires cellules des lignes 3 et 4.

Figure 4.36 : Aspect de la page Ma rgion aprs ltape 8

9 Placez-vous dans la premire cellule et saisissez ...Une image sera place ici Placez-vous dans la seconde cellule de la premire ligne et saisissez Ma rgion est clbre pour ses forts, ses montagnes et ses lacs. Saisissez dans les cellules vides de la seconde ligne respectivement Les forts, Les montagnes et Les lacs. 10 Sur la troisime ligne, saisissez dans la seconde cellule Ici, du texte complter et dans la troisime Ici, une autre image.

114 LE GUIDE COMPLET

Tableaux

Chapitre 4

11 Il subsiste quelques dtails rgler : placez-vous sur le titre de niveau 1 et choisissez dans la barre doutils Format > Aligner > Centrer. Cela centre le titre. Ensuite, vous ne devez pas oublier dajouter un nom dauteur. Cela est accompli laide de loption de menu Outils > Prfrences. La page Options saffiche. Cliquez sur Paramtres de pages et, dans la fentre 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 prcdemment, mais a t ralis ici avec une grande facilit. Enregistrez votre travail. Choisissez Fichier > Enregistrer sous. Le programme vous demande de saisir un titre (le contenu de llment TITLE). Saisissez Ma rgion et cliquez sur OK. Dans la bote de dialogue Enregistrer sous, naviguez jusquau dossier Mon Site Web et enregistrez le chier sous le nom region2.html.

Figure 4.37 : Aspect de la page termine dans lditeur Nvu

13 Il serait maintenant intressant dexaminer le code source ainsi gnr. Rien de plus simple : cliquez en bas de la fentre sur longlet Source. Le code source saffiche (voir Figure 4.38).
Ce code est trs semblable celui cr manuellement. Remarquez toutefois quelques diffrences :

LE GUIDE COMPLET 115

Chapitre 4

Listes et tableaux

Figure 4.38 : Code source de la page j

Comme nous lavons dj vu auparavant, les caractres accentus sont reprsents par des squences bizarres de caractres. Nous examinerons ceux-ci dans le prochain chapitre. La balise TABLE emploie un nouvel attribut (style= "margin
left: auto; marginright: auto; textalign: left; width: 100%;"). Il sera examin en dtail dans le Chapitre 8,

traitant des feuilles de style. Les balises TD se voient dotes dattributs que nous connaissons, mais possdant la valeur "undefined" (<td colspan="1" rowspan="4" align="undefined" valign="undefined">). Cest un des petits problmes des diteurs HTML, qui insrent automatiquement des balises et attributs supplmentaires, ce qui alourdit le code. Lorsque HTML constate labsence de ces attributs avec une valeur spcie, il considre quils sont prsents avec leur valeur par dfaut : il est donc superu de les ajouter, cela alourdissant inutilement le code. Il manque cependant llment META indiquant la version du chier : ajoutez-la manuellement, puis enregistrez le chier en cliquant sur Enregistrer.

Comme vous venez de le voir, il est bien plus simple de crer un tableau laide dun diteur HTML comme Nvu que de le btir de toutes pices dans un simple diteur de texte, moins de faire preuve dune rare matrise du code HTML !
116 LE GUIDE COMPLET

Tableaux

Chapitre 4

Cellules manquantes et cellules se recoupant

Deux problmes sont frquents avec les tableaux possdant des cellules fusionnes : loubli dune cellule dans une ligne et le recouvrement de cellules. Pour voir ce qui se passe dans ces conditions, nous allons modier laide dun diteur de texte la page rgion.html.

1 Ouvrez le Bloc-Notes sil ne lest pas dj, puis ouvrez le chier region.html. 2 Par scurit, enregistrez-le tout de suite sous le nom region_erreur.html. 3 Modiez le titre (lment TITLE) :
<TITLE>Ma rgion (page avec erreurs)</TITLE>

4 Comme dhabitude, modiez le numro de version :

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

5 Modiez la lgende (lment CAPTION) :

<CAPTION>Ma rgion (tableau avec erreurs)</CAPTION>

6 Vous allez dabord crer 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 utilise ici : pour crer une cellule vide qui possde toutefois un cartement entre ses bordures, insrez dans celle-ci un saut de ligne (<BR>). Cela naugmente pas lespace blanc, mais cre une cellule vide.
Cellule vide

Pour crer une cellule vide qui affiche cependant un cartement entre ses bordures, insrez 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 chier, puis examinez-le dans un navigateur.

Figure 4.39 : Aspect de la page region_erreurs aprs ltape 7

Curieux, non ? Il y a bien une erreur, mais pas celle laquelle vous vous attendiez. Plutt que de voir une nouvelle ligne laquelle manque une cellule, trois cellules sont ajoutes la droite de la dernire ligne Rchissez : si le tableau comportait thoriquement quatre lignes de quatre cellules (reportez-vous la gure page 110), il a t prcis que la quatrime ligne tait cre implicitement, dans la mesure o toutes les cellules de la ligne prcdente (la troisime) stendaient sur deux lignes (en ralit, quatre pour la premire cellule, qui dbute sur la premire ligne). Le Listing page 110 ne prsente effectivement que trois lments TR. Lorsque vous ajoutez un nouvel lment TR, celui-ci est considr comme tant la quatrime ligne, possdant dj quatre cellules dnies. Les trois nouvelles cellules vont donc sajouter la droite de celles-ci, sur cette mme ligne, do laspect affich.

8 Ajoutez un lment ligne vide (<TR></TR>) avant la balise douverture de celui que vous venez dinsrer. Enregistrez votre chier, puis examinez-le dans un navigateur.

Figure 4.40 : Aspect de la page region_erreurs aprs ltape 6

118 LE GUIDE COMPLET

Tableaux

Chapitre 4

Une ligne supplmentaire apparat bien : elle comporte une cellule de moins que ce qui est normalement ncessaire, comme vous vous y attendiez. Remarquez que cet exemple dmontre quil est inutile, voire dangereux, de crer des cellules stendant sur plusieurs lignes lorsque toutes les cellules dune ligne stendent vers le bas dun mme incrment : cela reste invisible lcran et risque dentraner par la suite des erreurs, en cas de modication de la page. Mieux vaudrait ici supprimer lattribut rowspan="2" dans les cellules de la troisime ligne, et modier lattribut de la premire cellule en rowspan="3". Vous pourrez alors supprimer en toute scurit llment ligne vide. Faites-le donc.

8 Vous allez maintenant dnir des cellules qui se chevauchent. Modiez le second lment TD du second lment TR (donc en ralit la troisime cellule de la seconde ligne) :
<TD rowspan="2">Les montagnes</TD>

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

Figure 4.41 : Aspect de la page region_erreurs aprs ltape 8

En thorie, cette cellule se recoupe dsormais avec la troisime cellule de la troisime ligne. En pratique, la restitution de cette erreur (car cen est une) peut varier selon le mode de gestion de lagent utilisateur concern. Ici, pratiquement quel que soit le navigateur employ, la cellule Les montagnes stend vers le bas, la cellule normalement situe au-dessous tant repousse vers la droite et semblant ne plus stendre latralement sur deux cellules. Cela est dailleurs faux : vriez-le.

10 Ajoutez une cellule vide (<TD><BR></TD>) aprs la cellule Les lacs :

<TD>Les lacs</TD><TD><BR></TD>

LE GUIDE COMPLET 119

Chapitre 4

Listes et tableaux

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

Figure 4.42 : Aspect de la page region_erreurs aprs ltape 10

Vous voyez, grce lapparition de la nouvelle cellule, que la cellule Ici, une autre image stend bien sur deux cellules. Le code de ce tableau prodigieusement laid, puisque bourr derreurs, est prsent dans le listing suivant, comme exemple ne surtout pas suivre : ne crez 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 rgion (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="Prsentation de ma rgion"> <CAPTION>Ma rgion (page avec erreurs)</CAPTION> <TR> <TD rowspan="3">...Une image sera place ici...</TD> <TD colspan="3">Ma rgion est clbre pour ses forts, ses montagnes et ses lacs.</TD> </TR> <TR> <TD>Les forts</TD> <TD rowspan="2">Les montagnes</TD> <TD>Les lacs</TD><TD><BR></TD> </TR> <TR> <TD>ici, du texte complter </TD> <TD colspan="2">Ici, une autre image </TD> </TR> <TR> <TD><BR></TD> <TD><BR></TD>
120 LE GUIDE COMPLET

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

Chapitre 4

Regroupement de lignes : lments THEAD, TFOOT et TBODY

Il est possible de regrouper les lignes dun tableau dans des sections den-tte, de pied et de corps ( laide respectivement des lments THEAD, TFOOT et TBODY). Ces regroupements apportent des informations de structure supplmentaires, qui peuvent tre utilises par les agents utilisateurs pour souligner cette structure. Les agents utilisateurs peuvent exploiter le dcoupage en-tte/corps/pied de faon faire dler le corps indpendamment des sections den-tte et de pied. Pour limpression dun grand tableau, les informations den-tte et de pied peuvent tre rptes sur chacune des pages qui contiennent les donnes du tableau. Chacun de ces lments encadre au moins un lment TR. Ils possdent tous les attributs facultatifs standard ainsi que les attributs dalignement, qui seront alors appliqus toutes les cellules du groupe de lignes. Si vous utilisez ces lments, llment TFOOT doit prcder llment TBODY dans votre code HTML, an que les navigateurs Web puissent afficher les informations du pied avant de charger la totalit des lignes de donnes. Les sections THEAD, TFOOT et TBODY doivent contenir le mme nombre de colonnes. Plusieurs lments TBODY peuvent coexister. Lexemple suivant illustre lordre et la structure des en-ttes, pieds et corps de tableau.
<TABLE> <THEAD> <TR> </THEAD> <TFOOT> <TR> </TFOOT> <TBODY> <TR> <TR> </TBODY> <TBODY> ...informations den-tte...

...informations de pied...

...premire range des donnes du bloc 1... ...seconde range des donnes du bloc 1...

LE GUIDE COMPLET 121

Chapitre 4

Listes et tableaux

<TR> ...premire range des donnes du bloc 2... <TR> ...deuxime range des donnes du bloc 2... <TR> ...troisime range des donnes du bloc 2... </TBODY> </TABLE>

Nous allons examiner un exemple plus concret. Supposons que dans vos passions gurent les ouvrages de science-ction : vous avez conu une liste dune cinquantaine douvrages, rpartis en plusieurs thmes, que vous avez prsente en tableau. Celui-ci se trouve dans une page nomme SF.html, qui est connecte votre page Mes passions. Par pure charit, nous vous pargnerons la saisie de ce tableau, pour ne vous en prsenter que le rsultat.

Figure 4.43 : Page avec tableaux renfermant des lments THEAD, TBODY

et TFOOT.

En apparence, ces regroupements sont sans effet : ils nentrent en jeu que pour un affichage progressif et une impression. La gure suivante prsente un extrait du code source de la page (voir Figure 4.44). La balise ouvrante de llment TBODY est toujours obligatoire si le tableau possde un en-tte ou un pied. Elle peut tre omise en leur absence. Les balises fermantes des trois lments TBODY peuvent tre omises, mais cela reste dconseill.

Regroupement de colonnes : lments COL et COLGROUP

Comme vous devez lavoir dsormais bien compris, HTML regroupe les cellules de donnes en lignes laide de llment TR. Chaque lment TR signale une nouvelle ligne du tableau, ces lignes se prsentant en
122 LE GUIDE COMPLET

Tableaux

Chapitre 4

squence, du haut vers le bas. Il nexiste pas dlment correspondant TC pour les colonnes dun tableau : il est par consquent parfois dlicat de placer des donnes en colonnes dans un tableau : il faut sassurer que chaque ligne possde suffisamment de cellules, et que chaque colonne contient bien les bonnes donnes.

Figure 4.44 : Code source de la page sf.html

HTML 4.0 permet toutefois deffectuer un regroupement structurel de colonnes laide de llment COLGROUP et dans le but dune mise en forme laide de llment COL. Cette structure peut tre mise en vidence grce aux feuilles de style ou des attributs HTML (comme lattribut rules pour llment TABLE). Un tableau contient soit un unique groupe de colonnes implicite (pas dlment COLGROUP), soit un certain nombre de groupes de colonnes explicites, dlimits chacun par une instance de llment COLGROUP. Quand il est ncessaire disoler une ou plusieurs colonnes (par exemple, pour une information de style ou de largeur spcique) au sein dun groupe, les auteurs doivent identier cette colonne avec un lment COL. Llment 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 lments possdent un attribut capital, span, dont la valeur est un entier suprieur 0 et qui spcie le nombre de colonnes concernes. Sa valeur par dfaut est 1 : cest cette valeur qui est employe lorsque lattribut est absent, ce qui correspond un groupe ne contenant quune seule colonne. Lorsque cet lment est prsent dans un lment COLGROUP, les agents utilisateurs doivent lignorer si llment contient un ou plusieurs lments COL. Lintrt de lattribut span est quil permet de regrouper les informations concernant les largeurs de colonnes. Ainsi, si une table contient n colonnes, chacune delles ayant une largeur de 30 pixels, il est plus facile dcrire :
<COLGROUP span="n" width="30"></COLGROUP>

que :
<COLGROUP> <COL width="30"> <COL width="30"> ...jusqu totaliser n lments COL... </COLGROUP>

Pour appliquer une information de style particulire la colonne m dun tableau possdant n colonnes, vous lisolez comme suit :
<COLGROUP width="20"> <COL span="m-1"> <COL id="mise-en-forme-particuliere"> <COL span="n-m"> </COLGROUP>

Un second attribut, width, spcie la largeur par dfaut de chaque colonne dans le groupe de colonnes courant. Sa valeur peut tre exprime comme habituellement en pixels, en pourcentage ou de faon relative, mais galement laide de la forme spciale "0*" (zro et astrisque). 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 calcule exactement. La spcication de la valeur "0*" va donc empcher lagent utilisateur deffectuer une restitution progressive du tableau. Comme pour span, un attribut width prsent dans un lment COL outrepasse celui prsent dans COLGROUP, pour les colonnes concernes.

124 LE GUIDE COMPLET

Tableaux

Chapitre 4

Il est capital de bien comprendre les rles respectifs de ces deux lments : si llment COLGROUP est un rassemblement structurel, llment COL rassemble les spcications dattributs pour les colonnes du tableau, mais ne rassemble pas les colonnes de manire structurelle. Les lments COL sont vides et ne servent que de support pour les attributs. Ils peuvent apparatre lintrieur comme lextrieur dun lment COLGROUP. Ces deux lments acceptent les attributs dalignement horizontal et vertical dj rencontrs (align et valign), ainsi que lattribut width. Les copies dcran de la page 134 montrent la page prcdente, sf.html, ayant recours un simple lment COL plac aprs la balise ouvrante de llment TABLE (<COL span="3" valign="top">) pour dnir lalignement 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 dcrit prcdemment : une tche laborieuse qui augmente fortement la taille du code source, mais demeure hlas la seule solution de compatibilit avec les navigateurs non standard.

Figure 4.45 : Page sf.html avec recours des lments COL examine sous diffrents 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 diffrents regroupements

Vous devriez avoir dj souponn que crer des lments COLGROUP ou COL nempchait pas la fusion de cellules individuelles qui appartiennent des lments diffrents. Cela est possible, mais mieux vaut vous en abstenir. Selon lagent utilisateur, la cellule ainsi fusionne peut prendre les proprits du premier lment ou du second lment de regroupement, voire empcher simplement laffichage correct du tableau.

126 LE GUIDE COMPLET

Tableaux

Chapitre 4

Imbrication de tableaux
Il est possible dimbriquer des tableaux : un tableau peut se trouver lintrieur dune cellule dun autre tableau. Cela peut devenir extrmement 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 sil ne lest pas dj, puis ouvrez le chier region.html. 2 Comme dhabitude, modiez le numro de version :
<META name ="version" content="1.4.3">

3 Modiez la lgende (lment CAPTION) :

<CAPTION>Ma rgion (tableaux imbriqus)</CAPTION>

4 Comme vous lavez fait dans la page region_erreurs, supprimez lattribut rowspan="2" dans les cellules de la troisime ligne, et modiez lattribut de la premire cellule en rowspan="3". 5 Placez-vous dans la deuxime cellule de la troisime ligne, autrement dit dans le premier lment TD du dernier lment TR. Effacez le texte Ici, du texte complter , appuyez deux fois sur [] et placez-vous sur la premire ligne vierge. 6 Saisissez le fragment de code suivant, crant un nouveau tableau imbriqu :
<TABLE align="center" border="1" width="100%"> <CAPTION>Donnes 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-ttes sont disposs en colonne et non plus en ligne. Enregistrez ce chier et examinez-le dans votre navigateur.

LE GUIDE COMPLET 127

Chapitre 4

Listes et tableaux

Figure 4.48 : Tableaux imbriqus

Autres prcisions concernant les tableaux

La puissance et la richesse des tableaux font quils sont largement employs comme outils de conception, et ce sur la grande majorit des sites. Cela pose encore quelques problmes lis la compatibilit entre navigateurs. Plus encore, en utilisant exactement la mme version du mme navigateur sur deux machines diffrentes, vous pourriez voir tout le tableau sur lune et tre oblig de faire dler lcran sur la seconde. Un tableau doit tre conu avec la plus grande prudence. Par exemple, en dnissant lattribut width (largeur) en pixels, le tableau cesse dtre universel et noffre un rsultat parfait qu ceux qui possdent exactement la mme rsolution dcran et la mme taille de fentre. Si vous voulez absolument utiliser des tableaux pour raliser votre mise en page, et si les feuilles de style napportent pas de rponse satisfaisante (ce qui serait pour le moins surprenant), veillez dnir lattribut width en pourcentage, le pourcentage de la fentre devant tre occup par chaque colonne ou cellule. Pour restituer un tableau, tout agent utilisateur peut effectuer les oprations suivantes :
j

j j

Restituer le contenu de lattribut summary. Il est prfrable de fournir une description du contenu et de la structure du tableau an que les visiteurs qui emploient des agents utilisateurs non visuels puissent mieux la comprendre. Restituer la lgende (lment CAPTION), si elle est prsente. Restituer len-tte et/ou le pied du tableau (si prsents). Par exemple, sil sagit dun mdia pagin en sortie, les agents

128 LE GUIDE COMPLET

Tableaux

Chapitre 4

j j j

utilisateurs peuvent placer len-tte en haut de chaque page et le pied en bas de chacune delles. De la mme manire, si lagent utilisateur fournit un mcanisme pour faire dler les ranges, len-tte peut apparatre en haut de la zone qui a dl et le pied en bas de celle-ci. Calculer le nombre de colonnes dans la table (cest le nombre dlments TR de llment TABLE). Regrouper les colonnes en fonction des ventuelles spcications de regroupement de colonnes. Restituer les cellules, range par range et regroupes dans les colonnes appropries, entre len-tte et le pied. Les agents utilisateurs devraient mettre en forme le tableau daprs les attributs HTML et les spcications de la feuille de style.

Le modle de tableau HTML 4.01 a t conu pour que les agents utilisateurs puissent restituer progressivement les tableaux, plutt que de devoir attendre la rception de la totalit des donnes 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 prcisment, lagent utilisateur peut restituer un tableau en une seule passe quand les largeurs de colonnes sont spcies laide dune combinaison dlments COLGROUP et COL. Si une des colonnes est spcie en termes relatifs ou en pourcentage, il faut aussi spcier la largeur du tableau en question. Les agents utilisateurs visuels permettent aux personnes voyantes dembrasser rapidement la structure du tableau partir des en-ttes (TH) et de la lgende (CAPTION). En revanche, ceux-ci seront souvent inadapts pour les personnes qui dpendent dagents utilisateurs non visuels. Les agents utilisateurs visuels devraient viter le rognage de toute partie du tableau contenant la lgende, moins de fournir un moyen pour accder toutes les parties du tableau, par exemple par dlement horizontal ou vertical.

Calcul du nombre de colonnes dans un tableau

Il existe deux faons de dterminer le nombre de colonnes dans une table (par ordre de priorit) :
LE GUIDE COMPLET 129

Chapitre 4

Listes et tableaux

1 Si llment TABLE contient des lments COLGROUP ou COL, les agents utilisateurs calculent comme suit le nombre de colonnes :
Pour chaque lment COL, prendre la valeur de son attribut span (la valeur par dfaut est "1"). Pour chaque lment COLGROUP contenant au moins un lment COL, ignorer lattribut span de llment COLGROUP. Pour chaque lment COL, effectuer les calculs de ltape 1. Pour chaque lment COLGROUP vide, prendre la valeur de son attribut span (la valeur par dfaut tant "1").

2 Sinon, quand llment TABLE ne contient aucun lment 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 possdant le plus de colonnes, y compris les cellules qui couvrent plusieurs colonnes. Les lignes possdant un nombre de colonnes moindre seront garnies de cellules vides en n de ligne. La n dune ligne dpend de la directionnalit du tableau.
Lorsquun tableau contient des lments COLGROUP ou COL et que les deux types de calcul naboutissent pas au mme nombre de colonnes, cela entrane une erreur. Une fois que lagent utilisateur a calcul le nombre de colonnes dans le tableau, il peut les regrouper en groupes de colonnes.

Hritage des attributs

Le problme de lhritage des attributs dalignement dans un tableau peut parfois sembler complexe. Certains dentre eux peuvent tre hrits de llment TABLE ou de la ligne laquelle la cellule appartient. Certains peuvent galement tre hrits dune colonne, laide dlments COLGROUP ou COL. Les regroupements de colonnes apportent des informations structurelles supplmentaires qui peuvent tre exploites par les agents utilisateurs. Il est galement possible de dclarer des proprits de colonnes au dbut de la dnition du tableau (via les lments COLGROUP et COL), pour que les agents utilisateurs puissent restituer progressivement la table au lieu de devoir attendre que toutes les donnes du tableau soient arrives avant de pouvoir les restituer.

130 LE GUIDE COMPLET

Tableaux

Chapitre 4

Lalignement du contenu des cellules peut tre spci cellule par cellule ou bien peut tre hrit des lments qui lenglobent tels que la range, la colonne ou la table mme. Lordre de priorit (de la plus leve la plus basse) des attributs dalignement (align, char et charoff) est le suivant :

1 Lattribut dalignement dni sur un lment lintrieur des donnes de la cellule (par exemple, un lment P). 2 Lattribut dalignement dni sur une cellule (les lments TH et TD). 3 Lattribut dalignement dni sur un lment de regroupement de colonnes (les lments COL et COLGROUP). Quand la cellule appartient un regroupement de colonnes, la proprit dalignement est hrite de la dnition de la cellule initiant le recouvrement. 4 Lattribut dalignement dni sur un lment de ligne ou de regroupement de lignes (les lments TR, THEAD, TFOOT et TBODY). Quand la cellule appartient un ensemble de plusieurs lignes, la proprit dalignement est hrite de la dnition de la cellule initiant le recouvrement. 5 Lattribut dalignement dni sur la table (llment TABLE). 6 La valeur dalignement par dfaut.
Lordre de priorit (de la plus leve la plus basse) de lattribut valign (ainsi que des autres attributs hrits lang, dir et style) est le suivant :

1 Lattribut dni sur un lment lintrieur des donnes de la cellule (par exemple, un lment P). 2 Lattribut dni sur une cellule (les lments TH et TD). 3 Lattribut dni sur un lment de range ou de regroupement de ranges (les lments TR, THEAD, TFOOT et TBODY). Quand la cellule fait partie dun ensemble recouvrant plusieurs ranges, la valeur de lattribut est hrite de la dnition de la cellule initiant le recouvrement. 4 Lattribut dni sur un lment de regroupement de colonnes (les lments COL et COLGROUP). Quand la cellule appartient un regroupement de colonnes, la valeur de lattribut est hrite de la dnition de la cellule initiant le recouvrement. 5 Lattribut dni sur la table (llment TABLE).
LE GUIDE COMPLET 131

Chapitre 4

Listes et tableaux

6 La valeur par dfaut de lattribut.

En outre, lors de la restitution des cellules, lalignement horizontal est dtermin par les colonnes, de prfrence aux lignes, tandis que les lignes ont la prfrence sur les colonnes pour lalignement vertical. Il existe un attribut non encore examin, lattribut dir. Celui-ci dnit la directionnalit dun tableau (qui, par dfaut, est de gauche droite). Pour une table de gauche--droite, la colonne zro se trouve sur le ct gauche et la range zro se trouve en haut. Pour une table de droite-gauche, la colonne zro se trouve sur le ct droit et la range zro en haut. Lorsquil est spci pour llment TABLE, lattribut dir affecte aussi la direction du texte lintrieur des cellules du tableau (puisquil est hrit par les lments de type bloc). Pour spcier une table de droite--gauche, xez la valeur de lattribut
dir comme suit :
<TABLE dir="RTL"> ...le reste du tableau... </TABLE>

Il est possible de modier la direction du texte dans une cellule individuelle en spciant lattribut dir dans llment qui dnit cette cellule.
lment TABLE

Llment TABLE est le seul pour lequel lattribut dir inverse lordre visuel des colonnes : une ligne de tableau (TR) ou un groupe de colonnes (COLGROUP) seuls ne peuvent tre inverss indpendamment.

Remarquez bien quune cellule peut hriter de la valeur dun attribut non de son parent, mais de la premire cellule dun recouvrement. Il sagit dune exception aux rgles gnrales dhritage des attributs.

Autres mises en forme de tableaux : attributs char et charoff

Lors de la premire publication de la spcication, en 1997, la spcication des feuilles de style CSS1 noffrait pas de mcanismes permettant le contrle de tous les aspects de la mise en forme visuelle des tables. Depuis lors, la spcication des feuilles de style CSS2 a ajout des proprits qui permettent la mise en forme visuelle des tables.
132 LE GUIDE COMPLET

Rsum

Chapitre 4

Lattribut dalignement align employ dans un tableau peut possder une valeur particulire (align="char"), qui stipule que lalignement est effectu sur un caractre unique prsent dans un fragment de texte qui sert daxe dalignement. Ce caractre est dni par lattribut char, dont la valeur par dfaut est le sparateur point dcimal pour la langue courante, telle quelle est dnie par lattribut lang (par exemple, le point . pour langlais et la virgule , pour le franais). Lattribut charoff, quand il est prsent, spcie le dcalage de la premire occurrence du caractre dalignement sur chaque ligne. Si la ligne ne comprend pas de caractre dalignement, elle devrait glisser horizontalement de manire nir sur la position dalignement. Lors du recours lattribut charoff pour xer le dcalage du caractre dalignement, la direction du dcalage est dtermine par la direction de texte courante (telle que spcie par lattribut dir). Dans les textes de gauche--droite (la valeur par dfaut), le dcalage sopre partir de la marge de gauche. Inversement, pour les textes de droite--gauche, le dcalage seffectue partir de la marge de droite. Hlas ! Si la spcication mentionne effectivement que les agents utilisateurs ne sont pas obligs de grer ces attributs, aucun des navigateurs tests na t en mesure de le faire dans leurs versions actuelles (Firefox 2.0.0.12, Mozilla 9, Internet Explorer 7.0.5730 et Amaya 7.8.3)

4.3. Rsum
j

Il est possible de crer en HTML trois types de listes : ordonnes ou numrotes, non ordonnes ou listes puces et listes de dnitions. Une liste numrote est cre laide de llment OL renfermant des items de liste LI. Il est possible de modier le type de numrotation laide de lattribut type, la valeur de dbut laide de lattribut start et de rinitialiser la numrotation dans un item de liste laide de lattribut value. Une liste puces est cre laide de llment UL renfermant des items de liste LI. Il est possible de modier laspect de la puce laide de lattribut type, pour toute la liste ou pour un item particulier.

LE GUIDE COMPLET 133

Chapitre 4
j

Listes et tableaux

j j

j j

Une liste de dnitions est cre laide de llment DL renfermant des lments enfants DT (terme de dnition) et DD (description de la dnition). Il est possible dimbriquer un nombre quelconque de listes de tous types. Un tableau est cr laide de llment TABLE. Il contient des lignes (lment TR) et des colonnes crant des cellules pouvant renfermer des informations de rubrique (lment TH) ou des informations de donnes (lment TD). Llment TABLE possde trois attributs, border, frame et rules, qui indiquent lagent utilisateur les bordures et les rgles restituer. Llment CAPTION permet de doter le tableau dune lgende. Il est galement utile de renseigner lattribut summary de llment TABLE, au bnce des agents utilisateurs non visuels. Les attributs cellspacing et cellpadding permettent de modier respectivement lespacement entre les cellules, ainsi que le dcalage entre le contenu de la cellule et la bordure. Lalignement horizontal dun tableau seffectue laide de lattribut align et lalignement vertical grce lattribut valign. La largeur est contrle par lattribut width. Elle peut tre exprime de faon xe, en pourcentage ou proportionnellement. Il est possible de fusionner des cellules dune mme ligne laide de lattribut colspan et dune mme colonne laide de lattribut rowspan. Ces deux attributs peuvent tre combins. Vous regroupez structurellement des lignes laide dlments den-tte de tableau (THEAD), de corps de tableau (TBODY) et de pied de tableau (TFOOT). Vous regroupez structurellement des colonnes laide dlments COLGROUP et dnissez des attributs partags laide dlments COL. Lattribut span spcie ltendue dun regroupement. Il est possible dimbriquer des tableaux. Cest avec les tableaux quil est possible de constater les diffrences de restitution les plus importantes entre navigateurs.

134 LE GUIDE COMPLET

Mise en forme avance

Principaux lments structuraux ................................................................................... 136 lments de structuration du texte ............................................................................... 149 Caractres spciaux et encodage de caractres ...................................................... 156 Modification de lapparence du texte ........................................................................... 164 Notation mathmatique .................................................................................................... 169 Rsum ................................................................................................................................ 173

Chapitre 5

Mise en forme avance

HTML propose de nombreuses autres possibilits de mise en forme des pages ou de portions de texte, laide dlments de type bloc ou de type ligne. Tous rpondent des besoins prcis, et peuvent tre employs de diverses faons, par exemple soit la place de llment de paragraphe normal P, soit en combinaison avec celui-ci. lments tudis dans ce chapitre :
HR <!---> DIV, SPAN PRE, TT BLOCQUOTE, Q CITE ABBR, ACRONYM EM, STRONG OBJECT CODE, SMP, KBD

5.1. Principaux lments structuraux

lment HR
Cet lment bloc est probablement le plus curieux de cette srie, car il sagit dun lment vide dpourvu de balise de fermeture, dont le seul rle est dinsrer une ligne horizontale lcran. Placez-le aprs 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 chier pageacc1_4_1.html. 2 Comme dhabitude, modiez le numro de version :
<META name="version" content="1.5.1">

3 Ajoutez un lment HR de barre horizontale entre les titres de niveau 1 et de niveau 2 :

<H1 align="center">Ma page daccueil</H1> <HR> <H2 align="center">Bienvenue sur mon site.</H2>

4 Ajoutez galement un lment HR juste avant la balise de fermeture de llment BODY.

<HR> </BODY>

136 LE GUIDE COMPLET

Principaux lments structuraux

Chapitre 5

5 Enregistrez votre chier sous le nom pageacc1_5_1.html, puis examinez-le dans votre navigateur.
La page affiche dsormais deux barres horizontales.

Figure 5.1 : Barres horizontales dans la page daccueil

XHTML

En XHTML, comme pour tout lment vide, vous devez lcrire <hr />.

Commentaire HTML
Autre bloc particulier, le cas o vous souhaitez insrer un commentaire non lu par le navigateur, et donc non affich dans la fentre de celui-ci.
<!-- commentaire -->

o commentaire est le texte du commentaire. Ce texte peut occuper plusieurs lignes. Les commentaires sont frquemment saisis en majuscules an de faciliter leur identication dans le code. Prenons un exemple concret : vous possdez un en-tte ou un pied de page commun toutes vos pages Web et savez que vous allez devoir rgulirement le modier. Vous pouvez en faciliter grandement la recherche en insrant juste avant un commentaire comme :
<!-- DEBUT DU PIED DE PAGE -->

LE GUIDE COMPLET 137

Chapitre 5

Mise en forme avance

Les commentaires sont prcieux lorsquun site Web est dvelopp en collaboration, pour expliquer certains ensembles de code ou simplement pour servir daide-mmoire ou de lignes directrices en vue damliorations ultrieures.

1 Revenez au chier pageacc1_5_1.html actuellement ouvert dans le Bloc-Notes. 2 Modiez nouveau le numro de version :
<META name="version" content="1.5.2">

3 Ajoutez un lment de commentaire juste aprs le titre de niveau 2 :

<H2 align="center">Bienvenue sur mon site.</H2> <!-- Contenu toffer, probablement laide dune barre de navigation. Remarque importante : ne pas oublier de modifier les liens tant de la page daccueil que des pages secondaires en cas de modification des noms de fichier ! -->

4 Ajoutez un autre commentaire juste avant la balise de fermeture de llment BODY.

<HR> <!-- Des remarques lgales ne seraient pas superflues --> </BODY>

Remarquez que le premier commentaire stend sur plusieurs lignes, contrairement au second.

5 Enregistrez votre chier sous le nom pageacc1_5_2.html, puis examinez-le dans votre navigateur : laspect est strictement identique la page prcdente, puisque les commentaires sont ignors par lagent utilisateur.

Figure 5.2 : Les commentaires napparaissent pas dans la fentre du navigateur

138 LE GUIDE COMPLET

Principaux lments structuraux

Chapitre 5

Couples de traits dunion

Les espaces vierges sont interdits entre le dlimiteur douverture de la dclaration de balisage <! et le dlimiteur douverture de commentaire , mais autoriss entre le dlimiteur de n de commentaire et le dlimiteur de n de dclaration de balisage >. Une erreur classique consiste inclure une chane de traits dunion lintrieur dun commentaire. Prenez garde ne pas insrer une suite de deux traits dunions adjacents ou plus lintrieur dun commentaire : lagent utilisateur linterprterait comme la n du commentaire !

Les commentaires se rvlent galement prcieux justement en raison de leur capacit ne pas tre interprts par lagent utilisateur : lorsque vous testez le code dune nouvelle page et rencontrez une erreur, il est parfois utile de mettre en commentaire une portion du code, qui sera ainsi ignore par le navigateur. Il peut sagir dune portion dont vous savez quelle fonctionne correctement ou au contraire dune partie de posant problme. Prenons un exemple.

1 Revenez au chier pageacc1_5_2.html actuellement ouvert dans le Bloc-Notes. 2 Modiez nouveau le numro de version :
<META name="version" content="1.5.3">

3 Dclarez comme commentaire le paragraphe denvoi de courriel :

<!-<P align="center"> <A href="mailto:votre_nom@votre_FAI">Ecrivez-moi !</A> </P> -->

4 Enregistrez votre chier sous le nom pageacc1_5_3.html, puis examinez-le dans votre navigateur : lancre permettant lenvoi dun courriel votre adresse napparat plus dans la fentre (voir Figure 5.3).
Cette technique est extrmement intressante : pensez par exemple un tableau saffichant dune faon qui ne correspond pas votre attente. Placez en commentaire tous les lments TR, puis sortez-les un un du commentaire en dplaant la balise <! jusqu identier celui qui pose problme !

LE GUIDE COMPLET 139

Chapitre 5

Mise en forme avance

Figure 5.3 : La ligne denvoi de courriel napparat plus sur la page : le code plac en commentaire est ignor.

lments DIV et SPAN

Les lments DIV et SPAN, employs avec leurs attributs id et class, offrent un mcanisme gnrique qui rajoute de la structure aux documents. Llment DIV est un lment bloc, tandis que SPAN est un lment ligne. Impliqus uniquement dans un but structurel, ils nimposent en eux-mmes aucune prsentation particulire du contenu. Ils sont essentiellement employs avec les feuilles de style et/ou lattribut lang pour mieux exploiter HTML. Prenons un exemple concret. Souvenez-vous que, lors de ltude des en-ttes, corps et pieds de tableaux (THEAD, TBODY et TFOOT), nous avions suppos que lune de vos passions concernait la littrature de science-ction. Vous aviez (thoriquement) conu un tableau prsentant diffrents ouvrages. HTML ne disposant pas dlment identiant des objets comme SF classique , Heroic fantasy , etc., les lments DIV et SPAN permettent dobtenir les effets de structure et de prsentation souhaits. 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 lments structuraux

</TBODY> <TBODY> <DIV id="Heroic" class="typeSF"> <TR> <TH colspan="3"> <SPAN class="heroic">Auteurs "heroic-fantasy"</SPAN> </TH> </TR> ...autre contenu... </DIV> </TBODY> ...

Chapitre 5

Vous avez dni des blocs prsentation particulire, lis au style attribu la classe typeSF, et des lments ligne galement prsentation particulire, lis aux classes Sfclassique et heroic. Observe dans un navigateur, cette page ne prsente aucune diffrence avec la version prcdente (reportez-vous la gure de la page 134), puisque vous navez pas encore dni ces classes de feuilles de style. Vous verrez plus en dtail dans le Chapitre 8, traitant des feuilles de style, comment exploiter ces structures.

lment PRE
Llment PRE est trs intressant en ce quil dnit un bloc de texte comme prformat. Les agents utilisateurs visuels (les navigateurs) grent comme suit le contenu dun lment PRE :
j j j j

Ils peuvent respecter les espaces vierges prsents dans le texte. Ils peuvent afficher le texte laide dune police espacement non proportionnel. Ils peuvent dsactiver le retour la ligne automatique. Ils ne doivent pas dsactiver le traitement bidirectionnel.

Remarquez bien que les navigateurs ne sont donc pas tenus de respecter absolument les espaces vierges prsents dans le contenu dun lment PRE. Pour examiner un exemple, supposons que parmi vos passions gure galement Shakespeare et, plus particulirement parmi les uvres de cet minent auteur, Hamlet. Une de vos pages contient un extrait de cette pice : vous souhaitez respecter exactement la mise en forme de lauteur.

LE GUIDE COMPLET 141

Chapitre 5

Mise en forme avance

1 Plutt que de crer dans le Bloc-Notes un nouveau chier, repartez du chier prcdent (en principe pageacc1_5_2.html) en supprimant tout le contenu de llment BODY. Cela vite davoir saisir de nouveau tous les lments communs. 2 Dans llment HEAD, modiez llment TITLE :
<TITLE>"Hamlet de Shakespeare"</TITLE>

3 Puis modiez le numro de version :

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

4 Ajoutez un nouveau titre de niveau 1 dans llment 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 Ophlia ses parents</P>.

6 Crez ensuite un lment PRE et placez-y son contenu, puis faites-le suivre dune 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 nen sortit. </PRE> <HR>

7 Enregistrez votre chier sous le nom hamlet1_5_1.html, puis examinez-le dans votre navigateur : laspect du texte est strictement respect par lagent utilisateur.

Figure 5.4 : Aspect dun lment PRE

142 LE GUIDE COMPLET

Principaux lments structuraux

Chapitre 5

Llment PRE possde un lment ligne analogue, TT.

lments BLOCKQUOTE et Q
Nous venons de placer sur une page Web un extrait de texte clbre : il est normalement lgalement obligatoire de citer les sources de cette uvre. Il est frquent de devoir placer sur une page Web des citations. Une citation peut maner dun avis reconnu pour souligner lintrt dun produit, peut indiquer une source dinformation ou reprsenter des notes de lecture. Elle peut aussi simplement tre une de vos citations favorites, affiche quelque part sur votre page Web. Quel que soit le motif de sa prsence, une citation se doit de respecter un style bien dni pour apparatre de faon satisfaisante sur tous les navigateurs. Tel est le but de llment BLOCKQUOTE, un lment de type bloc, dont lquivalent en type ligne est llment Q. Les agents utilisateurs visuels restituent en gnral llment BLOCKQUOTE sous la forme dun bloc de texte en retrait. Voici la syntaxe des lments BLOCKQUOTE et Q :
<BLOCKQUOTE [lang="code_langue"][cite="URI_source"]> <Q [lang="code_langue"][cite="URI_source"]>

1 Revenez au chier prcdent, et modiez le numro de version :

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

2 Encadrez llment PRE par un lment BLOCKQUOTE :

<BLOCKQUOTE> <PRE> ... texte ... </PRE> </BLOCKQUOTE>

3 Enregistrez votre chier sous le nom hamlet1_5_2.html, puis examinez-le dans votre navigateur. La diffrence est faible par rapport la gure prcdente, mais le lger retrait attendu est bien prsent (voir Figure 5.5).
Lattribut facultatif cite de llment BLOCKQUOTE permet de spcier lURI du document source (si celui-ci est disponible sur le Web). Mieux vaut toutefois employer llment CITE pour indiquer la source de la citation. Cet lment apparat sur une ligne individuelle, le plus souvent en italique.

4 Revenez votre chier, puis ajoutez sous llment BLOCKQUOTE llment suivant :
LE GUIDE COMPLET 143

Chapitre 5

Mise en forme avance

Figure 5.5 : Aspect dun lment BLOCKQUOTE combin avec un lment PRE

<CITE>Hamlet, Acte IV Scne V.William Shakespeare, "Richard III, Romo et Juliette, Hamlet", Trad. F-V Hugo.1979, Ed. Garnier-Flammarion, ISBN 2-08-070006-5, page 339.</CITE>

5 Enregistrez votre chier sans modier son nom, puis examinez-le dans votre navigateur. La source de la citation est bien indique sous la forme attendue.

Figure 5.6 : Aspect dun lment BLOCKQUOTE combin avec un lment PRE

144 LE GUIDE COMPLET

Principaux lments structuraux

Chapitre 5

Remarquez que vous pourriez amliorer la mise en forme, par exemple en plaant des sauts de ligne dans la source et/ou en employant lattribut align. Comme vous savez dsormais le faire, nous vous en laissons linitiative comme exercice complmentaire. Le code complet de cet exemple est prsent dans le listing suivant.
Listing 5-1 : Code du fichier Hamlet 1.5.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <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 Ophlia 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 nen sortit. </PRE> </BLOCKQUOTE> <CITE>Hamlet, Acte IV Scne V. William Shakespeare, "Richard III, Romo et Juliette, Hamlet", Trad. F-V Hugo. 1979, Ed. Garnier-Flammarion, ISBN 2-08-070006-5, page 339.</CITE> <HR> </BODY> </HTML>

Le rle de lattribut lang, galement facultatif, est plus subtil. Des citations peuvent tre imbriques, ce qui signie que vous pouvez utiliser llment Q lintrieur dun lment BLOCKQUOTE. Un lment Q peut dailleurs galement tre plac lintrieur dun autre lment Q. La spcication est toutefois un peu contradictoire en ce qui concerne le comportement des navigateurs vis--vis du contenu dun lment 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 dbut ni la n du contenu dun lment Q. Les marques de citation employes doivent dpendre de la langue, telle que spcie par lattribut lang : en effet, le type de marque de citation,
LE GUIDE COMPLET 145

Chapitre 5

Mise en forme avance

extrieure ou intrieure (imbriques), dpend 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 dajouter des marques de citation avant et aprs une citation encadre par llment BLOCKQUOTE, dune manire approprie au contexte de langue courant et au degr dimbrication des citations. Mais certains auteurs employant tort llment BLOCKQUOTE pour obtenir un texte en retrait, les agents utilisateurs ne devraient nalement pas ajouter de marques de citation en style par dfaut, an de prserver les intentions de ces auteurs. Tout ceci nest pas trs clair. Mieux vaut considrer un exemple. Les Anglo-Saxons se servent de guillemets comme marques de citation extrieures et dapostrophes comme marques de citation intrieures, tandis que les francophones privilgient des guillemets imbriqus. De ce fait, le fragment de code suivant :
Listing 5-2 : Citations imbriques
<Q <Q <Q <Q lang="en-us">He shouted lang="en-us">What are you doing here?</Q></Q> lang="fr">Il scria lang="fr">Que faites-vous ici ?</Q></Q>

devrait tre affich comme ceci :

"He shouted What are you doing here? "Il scria "Que faites-vous ici ?""

Mais comme le montrent les trois copies dcran des gures suivantes, le rendu des navigateurs, mme rcents, manque pour le moins de cohrence :

Figure 5.7 : Rendu de citations imbriques dans le navigateur Firefox 2.0.

146 LE GUIDE COMPLET

Principaux lments structuraux

Chapitre 5

Figure 5.8 : Rendu de citations imbriques dans le navigateur Internet Explorer (6 et 7).

Figure 5.9 : Rendu de citations imbriques dans le navigateur Amaya.

Mieux vaut donc observer la plus grande prudence en cas dimbrication de citations. La sagesse recommande demployer de prfrence les entits caractres HTML tudies dans la suite de ce chapitre pour afficher guillemets ou apostrophes, plutt que dimbriquer des lments Q. Par ailleurs, lemploi des lments BLOCKQUOTE et Q uniquement pour obtenir le retrait dun texte est dconseill : prfrez le recours aux feuilles de style.

lment ADDRESS
Llment ADDRESS, gnralement plac au dbut ou la n dun document, sert fournir des informations de contact applicables au document ou une partie essentielle de celui-ci. Ses balises douverture et de fermeture sont toutes deux obligatoires. Un exemple concret semble prfrable une longue explication.

1 Ouvrez dans le Bloc-Notes le chier pageacc1_5_2.html (cest en principe actuellement hamlet1_5_2.html qui est ouvert). 2 Modiez nouveau le numro de version :
<META name="version" content="1.5.4">

3 Entrez le dernier lment HR et le dernier commentaire, et insrez un lment ADDRESS comme suit :

LE GUIDE COMPLET 147

Chapitre 5

Mise en forme avance

<ADDRESS> <A href="../ORignal/">Olivier Rignal</A> et <A href="../JBogue/">Justin Bogue</A> sont les personnes contacter pour tout <A href="probleme"> problme</A> rencontr sur le site. </ADDRESS>

4 Enregistrez votre chier sous le nom pageacc1_5_4.html, puis examinez-le dans votre navigateur : la page propose dsormais des informations de contact.

Figure 5.10 : lment ADDRESS

Remarquez que, dans cet exemple, les valeurs des attributs href sont toutes inexistantes : il convient de crer les destinations de lien adquates.

Modication des marges dun paragraphe

Il est parfois souhaitable ou ncessaire de modier les marges dun bloc de texte (lment DIV, P ou PRE). Vous pouvez y parvenir laide de lattribut style plac lintrieur de la balise douverture de llment concern :
<P style="margin-left: 10pt">

Cela cre une marge supplmentaire gauche de 10 points. Remarquez que la syntaxe de lattribut style est la mme que celle de nimporte quel attribut HTML : attribut="valeur". Il est applicable la
148 LE GUIDE COMPLET

lments de structuration du texte

Chapitre 5

plupart des lments HTML (reportez-vous lAnnexe A), mais est dsormais dconseill au prot des feuilles de style.
Taille en pixels

Pour calculer avec plus de prcision limportance dune taille exprime en pixels, utilisez la formule suivante :
Taille relle = valeur (largeur de lcran)/(rsolution horizontale de lcran)

En supposant que vous possdiez un cran de 17 mesurant (environ) 34 cm de large et employ avec une rsolution de 1280 1024 (donc 1280 pixels de rsolution horizontale), une valeur de 10 pixels correspond : 10 34/1280 = 0,266 centimtres soit 2,7 mm La chose est plus dlicate pour les mesures exprimes en points : si sur un Mac, la rgle est un point = un pixel , sur un PC, le rglage par dfaut est un point = 4/3 pixel . Cest la raison pour laquelle certains auteurs crivent que le Mac a une dpi de 72 et le PC une dpi de 96. Tout dpend de la dnition 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. lments de structuration du texte

HTML propose un certain nombre dlments de type ligne permettant de caractriser prcisment une partie de texte. Ces lments sont prsents dans le tableau de la page 155. Gardez bien prsent lesprit que le but de ces lments est avant tout de contribuer la structure du texte, non dobtenir une prsentation particulire.

lments EM et STRONG
Les lments EM (EMphasis, emphase) et STRONG (fort) sutilisent pour mettre en exergue une portion du texte qui possde, par exemple, une signication particulire dans un contexte donn. La prsentation des lments de phrase dpend de lagent utilisateur. En gnral, les agents utilisateurs visuels prsentent le texte de llment EM

LE GUIDE COMPLET 149

Chapitre 5

Mise en forme avance

en italique et celui de llment STRONG en gras. Les agents utilisateurs vocaux, eux, devraient changer les paramtres de la synthse vocale tels que le volume, la hauteur ou le timbre.

1 Revenez au le chier pageacc1_5_4.html, en principe celui actuellement ouvert dans le Bloc-Notes. 2 Modiez nouveau le numro de version :
<META name="version" content="1.5.5">

3 Modiez comme suit le titre de niveau 2 :

<H2 align="center">Bienvenue sur <EM>mon</EM> site.</H2>

4 Modiez comme suit le contenu du premier lment P :

<P>Vous trouverez sur ce site des <STRONG>informations </STRONG> :</P>

5 Enregistrez votre chier sous le nom pageacc1_5_5.html, puis examinez-le dans votre navigateur : le mot mon apparat en italique, le mot informations en gras.

Figure 5.11 : lments EM et STRONG

Vous avez pu rencontrer dautres lments qui permettent de placer une partie de texte en italique (lment I) ou en gras (lment B). Ces lments, sur lesquels nous reviendrons, modient laspect de la police, mais ne possdent aucun rle structurel. Autrement dit, un mot plac en gras ou en italique par G ou I attire visuellement lattention, ce qui lui confre une importance particulire, alors quinversement EM et STRONG

150 LE GUIDE COMPLET

lments de structuration du texte

Chapitre 5

attribuent structurellement une importance particulire ce mot, qui se trouve de ce fait affich visuellement en italique ou en gras. Comme cela a dj t largement soulign, tous les effets cosmtiques appliqus la prsentation gagnent largement tre du ressort exclusif des feuilles de style.

lments ABBR et ACRONYM

Les lments ABBR et ACRONYM permettent aux auteurs dindiquer clairement les occurrences des abrviations et des acronymes. Les langues occidentales raffolent en effet des sigles comme RATP, ONU ou bit, ainsi que des abrviations comme Mme, SA ou etc. Le chinois et le japonais emploient tous deux des mcanismes dabrviation analogues, selon lesquels un nom long est dsign par la suite par un sous-ensemble des caractres Han qui le constituent. Le balisage de ces structures fournit une aide prcieuse aux agents utilisateurs et aux outils tels que les vricateurs dorthographe, les synthtiseurs de parole, les systmes de traduction automatique et les moteurs de recherche. Le contenu des lments ABBR et ACRONYM spcie lexpression abrge telle quelle apparatrait normalement dans le cours du texte. Lattribut title de ces lments peut servir procurer la forme complte ou dveloppe de lexpression. Voici quelques exemples dutilisation des lments ACRONYM et ABBR :
Listing 5-3 : lments ABBR et ACRONYM
<P> <ABBR title="World Wide Web">WWW</ABBR> <ACRONYM lang="fr" title="Rgie Autonome des Transports Parisiens"> RATP </ACRONYM> <ABBR lang="es" title="Doa">Doa</ABBR> <ABBR lang="en" title="Abbreviation">abbr.</ABBR> </P>

Voici laspect de ce fragment de code dans un navigateur. Remarquez ce qui se passe lorsque le pointeur est plac sur un lment (voir Figure 5.12). Abrviations et acronymes possdent souvent une prononciation idiosyncrasique. Par exemple, si CEE et FAI se prononcent typiquement

LE GUIDE COMPLET 151

Chapitre 5

Mise en forme avance

lettre lettre, Ram et Medef se prononcent phontiquement. En outre, certains termes (comme URI) sont pels par les uns et prononcs comme des mots par les autres. En cas de ncessit, les auteurs devront utiliser les feuilles de style pour spcier la prononciation dune forme abrge.

Figure 5.12 : lments ABBR et ACRONYM

lments CODE, SMP et KBD

Internet possde, de par ses origines militaires et universitaires, une lourde orientation scientique et technologique. Il tait donc logique que HTML propose un lment structurel spcique laffichage de code, llment CODE. Au sens le plus large, le terme code dcrit les lments et la syntaxe permettant une machine de lire un programme ou un chier. En rdigeant de lHTML, vous crivez du code, mme si celui-ci diffre largement de celui dun programme crit dans un autre langage, comme C ou PHP. Tout code doit respecter scrupuleusement une syntaxe spcique au langage concern. Traditionnellement (et comme cest le cas dans cet ouvrage) du code est le plus souvent affich sous forme de texte avec une police non proportionnelle. Cest une mthode universelle qui signale quil sagit de quelque chose destine la machine. Lorsquil est lu par un agent utilisateur visuel, comme un navigateur, le texte gurant dans llment CODE devrait galement tre affich laide dune police non proportionnelle. Certains navigateurs tant rgls an dafficher le contenu de llment CODE dune faon particulire, mieux vaut le rserver aux exemples de code que vous souhaitez prsenter sur le Web.

152 LE GUIDE COMPLET

lments de structuration du texte

Chapitre 5

Voici un exemple de code, tir de lexcellent ouvrage La Bible C++ de C. Horstmann et T. Budd (Ed. Micro Application, 2004, ISBN 2-74293717-x).
Listing 5-4 : Exemple de llment CODE
<P>Fichier temps1.cpp</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 laspect de ce code dans un navigateur.

Figure 5.13 : Mise en uvre de llment CODE

LE GUIDE COMPLET 153

Chapitre 5

Mise en forme avance

Caractres spciaux

En examinant le code ci-dessus, vous devriez tre intrigu par les mystrieux &lt;. Plusieurs caractres sont des composants fondamentaux de la syntaxe HTML : en particulier les symboles <> qui constituent une balise. Il est donc impossible demployer ces symboles en HTML sans que lagent utilisateur ne tente de lire la balise place lintrieur. Pour pallier cela, une notation particulire existe, nomme rfrence de caractre. Ce sujet sera abord un peu plus loin dans ce chapitre.

Llment CODE est de type ligne. Employez-le avec un lment de paragraphe, comme P ou PRE, pour afficher un bloc de code. Comme il sagit dun lment de structure signicatif, ne placez que du code dans un lment CODE. Si vous souhaitez afficher du texte avec le mme aspect, prfrez llment bloc PRE ou llment ligne TT : tous deux affichent en principe un texte dans une police non proportionnelle. Llment SMP, trs proche de llment CODE, sert signaler une sortie de programme. En reprenant lexemple prcdant et en ajoutant la n, aprs la balise de fermeture de llment P :
<P>Ce programme affiche :</P> <P><SMP>7:16:40</SMP></P>

le navigateur affiche :

Figure 5.14 : Mise en uvre des lments CODE et SMP

154 LE GUIDE COMPLET

lments de structuration du texte

Chapitre 5

Llment KBD est trs similaire : il sert signaler un texte, ou une expression, devant tre saisi par lutilisateur au clavier.

Autres lments structuraux

Llment CITE a dj t abord lors de ltude des lments BLOCKQUOTE et Q. Il permet de fournir la source dune citation et est gnralement prfrer lattribut cite des lments BLOCKQUOTE et Q. Les autres lments, DFN et VAR, sont plus rarement mis en uvre. Le tableau suivant prsente tous ces lments structuraux ainsi que leur signication.
Tableau 5.1 : lments de structuration du texte

lment

Description Indique une mise en emphase. Indique une emphase plus forte. Contient un extrait ou une rfrence vers une autre source. Indique quil sagit de linstance dnissante du terme englob. Dsigne un fragment de code informatique. Dsigne un exemple des sorties dun programme, dun script, etc. Indique un texte que doit saisir lutilisateur. Indique linstance dune variable ou le paramtre dun programme. Indique une forme abrge (par exemple WWW, HTTP, i.e., etc.). Indique un acronyme (par exemple, radar, Lan, etc.).

EM STRONG CITE DFN CODE SAMP KBD VAR ABBR ACRONYM

lment OBJECT
Les versions antrieures de HTML permettaient aux auteurs dinclure des images (grce llment IMG) et des applets (grce llment APPLET). Ces lments souffraient de plusieurs contraintes, dont la

LE GUIDE COMPLET 155

Chapitre 5

Mise en forme avance

principale tait probablement lincapacit inclure les types de mdias nouveaux et venir. HTML 4 a donc introduit llment OBJECT, qui offre une solution gnrale aux inclusions dobjets gnriques. Cet lment permet la spcication de tout ce dont a besoin lobjet pour sa prsentation par un agent utilisateur : le code source, les valeurs initiales et les donnes dexcution. Dans cette spcication, le terme objet dsigne les contenus placs dans des documents HTML (applets, modules complmentaires ou plug-ins, gestionnaires de mdias, etc.). Ce nouvel lment OBJECT prend ainsi en charge quelques-unes des tches effectues par les lments existants. Il remplace notamment les lments spciques IMG (image), APPLET (applet) et IFRAME (autre document HTML). Chacun de ces trois types dinclusion possde ainsi une solution spcique et une solution gnrique. Llment gnrique OBJECT servira de solution pour limplmentation des types de mdias futurs. Nous examinerons plus en dtail cet lment lors de lexamen des solutions spciques dinclusion, mais il mritait dtre cit ds prsent.

5.3. Caractres spciaux et encodage de caractres

Si vos pages Web sont exclusivement destines un public occidental et sont rdiges uniquement en anglais, vous ne devriez gure rencontrer de problmes de caractres, sauf pour laffichage des caractres HTML rservs, qui pourraient tre prsents dans du texte : les rglages par dfaut sont parfaits. En revanche, si vous devez placer sur tout ou partie dune page du texte en russe, hbreu ou chinois, ou mme simplement en franais, vous devez savoir comment employer les caractres spciaux et les jeux de caractres.

156 LE GUIDE COMPLET

Caractres spciaux et encodage de caractres

Chapitre 5

Encodages de caractres
Les jeux de caractres, galement nomms encodages de caractres couramment utiliss sur le Web comprennent ISO-8859-1 (appel aussi Latin-1, utilisable pour la plupart des langues dEurope de lOuest), ISO-8859-5 (qui gre 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 diffrent doctets pour diffrents caractres). Les noms des jeux de caractres sont insensibles la casse : SHIFT_JIS, Shift_JIS, et shift_jis sont quivalents. La spcication HTML 4.0.1 nindique pas quels encodages de caractres doit reconnatre lagent utilisateur. Pour reconnatre lencodage de caractres employ, le moyen le plus simple consiste employer le paramtre charset dans le champ ContentType de len-tte du protocole HTTP. Ce protocole mentionne ISO-8859-1 comme encodage par dfaut lorsque le paramtre charset est absent du champ ContentType de len-tte. Cette recommandation sest toutefois rvle inutile : certains serveurs ne permettent pas denvoyer un paramtre charset et dautres peuvent ne pas tre congurs pour lenvoyer. Les agents utilisateurs ne doivent donc pas supposer une valeur par dfaut pour le paramtre charset. Pour viter tout problme, les documents HTML peuvent (et devraient) comporter des informations explicites sur lencodage de caractres du document, fournies lagent utilisateur laide dun lment META. Ainsi, pour spcier comme encodage de caractres du document EUC-JP, le document devrait inclure la dclaration META suivante :
<META http-equiv="Content-Type" content="text/html; charset=EUC-JP">

La dclaration META doit seulement tre utilise lorsque lencodage est organis de telle sorte que les octets en valeurs ASCII reprsentent des caractres ASCII (au moins jusqu lanalyse de llment META). Les dclarations META devraient donc apparatre le plus tt possible dans llment HEAD. Cest ce que respecte par exemple Microsoft (ainsi que de nombreux autres sites) en lindiquant explicitement laide dun lment META plac au dbut du code source.

LE GUIDE COMPLET 157

Chapitre 5

Mise en forme avance

Figure 5.15 : Page daccueil du site Microsoft France (www.microsoft.com/france/)

Figure 5.16 : Dbut du code source de la page daccueil du site Microsoft

France

Llment META employ par Microsoft est le suivant :

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1" />

Remarquez tout dabord quil est au format XHTML, comme lindique sa fermeture />. Cet lment indique que le contenu est de type HTML et que le jeu de caractres employ est ISO-8859-1, le jeu de caractres du monde occidental. Employer cet lment tant une bonne habitude prendre, faites-le immdiatement pour la page daccueil de votre site.

1 Ouvrez dans le Bloc-Notes le chier pageacc1_5_5.html, en principe celui actuellement ouvert dans le Bloc-Notes. 2 Modiez nouveau le numro de version :
<META name="version" content="1.5.6">

158 LE GUIDE COMPLET

Caractres spciaux et encodage de caractres

Chapitre 5

3 Ajoutez, juste aprs llment TITLE, un nouvel lment META :

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

4 Enregistrez votre chier sous le nom pageacc1_5_6.html.

Si votre page emploie un jeu de caractres diffrent, vous pouvez spcier une autre valeur pour lattribut charset. Cet attribut peut concerner toute la page ou sappliquer uniquement un lment (par exemple, pour une citation).

Caractres spciaux
Un encodage de caractres donn peut ne pas pouvoir exprimer tous les caractres du jeu de caractres du document. Avec de tels encodages, ou lorsque les congurations matrielles ou logicielles ne permettent pas aux utilisateurs dentrer directement certains caractres spciaux, les auteurs peuvent avoir recours aux rfrences de caractres SGML. Il sagit dun mcanisme indpendant de lencodage, utilis pour ajouter nimporte quel caractre issu du jeu de caractres du document. Les rfrences de caractres en HTML peuvent se prsenter sous deux formes :
j j

Les rfrences de caractres numriques hexadcimales). Les rfrences dentits de caractres.

(dcimales

ou

Les rfrences de caractres numriques spcient la position du code dun caractre dans le jeu de caractres du document. Elles peuvent tre exprimes :
j j

Sous forme dcimale, &#D;, o D reprsente un nombre dcimal qui se rapporte au numro de caractre D dcimal ISO 10646. Sous forme hexadcimale, &#xH; o &#XH;, o H reprsente un nombre hexadcimal qui se rapporte au numro de caractre H hexadcimal ISO 10646.

Les nombres hexadcimaux dans les rfrences de caractres numriques sont insensibles la casse. Il est recommand de prfrer la forme hexadcimale la forme dcimale, car cest la forme employe pour les normes des jeux de caractres.
LE GUIDE COMPLET 159

Chapitre 5

Mise en forme avance

Les entits de caractres reprsentent un moyen plus intuitif pour les auteurs dappeler les caractres du jeu de caractres du document. Elles ont recours des noms symboliques, qui vitent aux auteurs davoir se remmorer les positions des codes. Par exemple, la rfrence dentit de caractre &agrave; se rapporte la lettre . Il est plus facile de se souvenir de &agrave; que de &#224; ou de &#xe0;. HTML 4 ne dnit pas de rfrence dentit de caractre pour chacun des caractres du jeu de caractres du document. En outre, les rfrences dentits de caractres sont sensibles la casse. Ainsi, &Agrave; () ne se rapporte pas au mme caractre que &agrave; (). Quatre rfrences dentits de caractres mritent une attention particulire : elles sont frquemment utilises pour masquer certains caractres spciaux dans le code HTML.
j j j j

&lt; reprsente le caractre < gt; reprsente le caractre > &amp; reprsente le caractre & &quot; reprsente le caractre "

Vous comprenez dsormais lorigine des caractres bizarres que vous avez rencontrs dans le pass. Vous pourriez cependant vous poser la question de lintrt rel de ces rfrences de caractres : si elles paraissent effectivement indispensables pour les caractres rservs de HTML, comme < et >, nous avons jusque-l largement employ, dans les pages, du texte comportant des caractres accentus sans que cela ne semble poser le moindre problme. La restitution des caractres accentus prsents tels quels dans le texte dpend en ralit tant de lagent utilisateur employ que de la conguration de la machine utilise, et notamment des polices installes sur celle-ci. Par scurit, lemploi des rfrences de caractres est donc hautement recommand. La majorit des diteurs HTML transforment automatiquement ces caractres en rfrences, vous vitant davoir les saisir manuellement : ainsi, Liste ordonne devient Liste ordonna#xe9;e, mais vous pourriez aussi bien crire Liste ordonn&eacute;e ou Liste ordonn&#233;e. Si vous prfrez vous en tenir un diteur de type texte, vous devrez en tenir compte et vous habituer &agrave;

160 LE GUIDE COMPLET

Caractres spciaux et encodage de caractres

Chapitre 5

&eacute;crire vos textes en tenant compte des caract&egrave;res accentu&eacutes;s . Rassurez-vous, lhabitude vient en fait assez vite.

1 Ouvrez dans le Bloc-Notes le chier pageacc1_5_6.html (en principe celui actuellement ouvert dans le Bloc-Notes). 2 Modiez nouveau le numro de version :
<META name="version" content="1.5.7">

3 Remplacez tous les caractres accentus du texte par leurs quivalents rfrences de caractres :
<LI>sur ma <A href="region.html">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 chier sous le nom pageacc1_5_7.html.

Examinez cette page dans votre navigateur : vous ne devriez constater aucune diffrence avec la version prcdente.

Figure 5.17 : Emploi des rfrences de caractres

LE GUIDE COMPLET 161

Chapitre 5

Mise en forme avance

Un peu pnible quand mme Ne serait-il pas possible de tirer prot de la capacit des diteurs HTML transformer automatiquement tout ce qui a pu tre cr auparavant ? Bien sr que oui.

1 Ouvrez Nvu, puis ouvrez le chier pageacc1_5_6.html (qui possde encore des caractres accentus). 2 Vriez le paramtrage de Nvu. Choisissez Outils > Prfrences. Dans la fentre qui souvre, cliquez dans le volet de droite sur Gnral si le volet Gnral nest pas affich dans la partie droite. Vriez que dans la section Lors de lenregistrement ou de la publication de page loption Reformater la source HTML est bien slectionne. 3 Cliquez dans le volet de gauche sur Avances. Dans la section Caractres spciaux, vriez que Dfinir les caractres suivants en tant quentits est bien x Tout caractre ayant une entit quivalente dans la spcification HTML 4". 4 Enregistrez votre chier sous le nom pageacc1_5_6b.html.
En examinant le code source, vous constaterez que tous les caractres possdant une entit quivalente ont bien t remplacs par celle-ci.

Figure 5.18 : Page automatiquement transforme par Nvu

Remarquez que, si nous avons ici modi le nom du chier, cela nest pas obligatoire : le simple fait denregistrer le chier accomplit la transformation.

162 LE GUIDE COMPLET

Caractres spciaux et encodage de caractres

Chapitre 5

Caractres non affichables

Malgr toutes les prcautions, un agent utilisateur nest pas toujours en mesure de restituer de manire signicative tous les caractres dun document. Par exemple, si lagent utilisateur ne dispose pas dune police approprie, la valeur dun caractre peut ne pas sexprimer au travers de lencodage de caractres interne de lagent utilisateur, etc. Vu la palette des rponses possibles en pareils cas, la spcication HTML 4.0.1 ne suggre aucun comportement spcique. Selon la mise en uvre, les caractres non affichables peuvent galement tre grs par le systme daffichage sous-jacent et non par lapplication ellemme. Il est recommand par le W3C que les agents utilisateurs adoptent un mcanisme visible et clair, mais non intrusif, pour avertir lutilisateur de labsence des ressources ncessaires. Le tableau suivant prsente les entits les plus employes en HTML.
Tableau 5.2 : Jeu des rfrences de caractres Latin-1 (ISO-8859-1)
Caractre
< > espace inscable

Entit
&lt; &gt; &nbsp;

Dcimal
&#60; &#62; &#160;

Hexadcimal
&#x3c; &#x3e; &#xa0;

Caractre

Entit
&eacute; &ecirc; &igrave;

Dcimal
&#233; &#234; &#236;

Hexadcimal
&#xe9; &#xeac; &#xec;

&laquo; &plusmn; &raquo; &times; &agrave; &acirc; &ccedil; &egrave;

&#171; &#177; &#187; &#215; &#224; &#226; &#231; &#232;

&#xab; &#xb1; &#xbb; &#xb7; &#xe0; &#xe2; &#xe7; &#xe8;

&icirc; &iuml; &ocirc; &ouml; &divide; &ugrave; &ucirc; &uuml;

&#238; &#239; &#244; &#246; &#247; &#249; &#251; &#252;

&#xee; &#xef; &#xf4; &#xf6; &#xf7; &#xf9; &#xfb; &#xfc;

LAnnexe D prsente une liste plus complte des caractres du jeu Latin-1.

LE GUIDE COMPLET 163

Chapitre 5

Mise en forme avance

Nous avons dj rencontr avec les tableaux lattribut dir, dnissant la directionnalit. Celui-ci, combin ou non avec lattribut lang, permet dadapter encore mieux vos pages au public vis. Ces attributs seront tudis plus en dtail dans le Chapitre 10, traitant de linternationalisation et de la localisation.

5.4. Modication de lapparence du texte

HTML dispose de plusieurs lments permettant de modier lapparence du texte, similaires en un sens aux enrichissements que vous pouvez apporter un document dans un traitement de texte. Il est ainsi possible de modier le style dun mot individuel, dune expression ou dune phrase. Il existe de bonnes raisons de vouloir procder ainsi, mais il existe galement dexcellentes raisons de ne pas le faire. Mme si tous ces lments ne sont pas dconseills, il reste prconis de leur prfrer les feuilles de style.

lments TT, I, B, BIG, SMALL, STRIKE, S et U

Ajouter du gras, de litalique et du soulignement certaines parties de vos textes augmente leur impact et contribue lefficacit de votre message pour le public concern. Comme cela a dj t signal, mieux vaut toutefois employer une emphase structurelle laide des lments EM et STRONG, dj abords. Le tableau suivant prsente les lments utilisables.
Tableau 5.3 : lments de modication de police

lment

But Texte affich en police non proportionnelle Texte en italique Texte en gras Texte affich dans une police plus grande

Exemple

TT I B BIG

<TT>texte</TT> <I>texte</I> <B>texte</B> <BIG>texte</BIG>

164 LE GUIDE COMPLET

Modification de lapparence du texte

Tableau 5.3 : lments de modication de police

Chapitre 5

lment

But Texte affich dans une police plus petite Texte barr (dconseill) Texte soulign (dconseill)

Exemple

SMALL STRIKE et S U

<SMALL>texte</SMALL> <S>texte</S> <U>texte</U>

Remarquez que la restitution des lments de style de police dpend de lagent utilisateur. Il est possible dobtenir une bien plus grande diversit deffets de police en utilisant les feuilles de style. Les lments de style de police doivent tre correctement imbriqus. La restitution des lments de style de police imbriqus dpend de lagent utilisateur.

Modicateurs de police : lments FONT et BASEFONT

Llment BASEFONT dnit les caractristiques de la police de base. Il est gnralement plac en tte dun document HTML. Les modications ultrieures apportes la police grce llment FONT sont relatives la police de base dnie par llment BASEFONT. Ces deux lments sont dsormais dconseills. Ils possdent plusieurs attributs facultatifs :

Attribut size
Cet attribut dconseill dnit la taille de la police. Sa valeur peut tre exprime comme entier compris 1 et 7, attribuant la police une certaine taille xe dont la restitution dpend de lagent utilisateur, ou comme accroissement relatif : la valeur +1 signie la taille au-dessus, la valeur 3 signie trois tailles en dessous. Toutes les tailles se trouvent sur une chelle allant de 1 7. Si llment BASEFONT est absent ou ne dnit pas lattribut size, la taille de police de base est gale 3.

LE GUIDE COMPLET 165

Chapitre 5

Mise en forme avance

Police des titres

La taille de police de base ne sapplique pas aux titres, sauf quand ceux-ci sont modis par un lment FONT avec un changement de taille de police relatif.

Attribut color
Cet attribut dconseill spcie la couleur du texte (reportez-vous au Chapitre 6 pour plus de dtails).

Attribut face
Cet attribut dnit une liste de noms de police, spars par des virgules, que lagent utilisateur devrait employer par ordre de prfrence. Vous trouverez ci-dessous un petit exemple de la mise en uvre de cet attribut. Laffichage dans un navigateur est montr dans la gure 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 : Diffrents types de police

Une parade aux nombreux problmes poss par llment FONT consiste recourir aux feuilles de style en cascade (CSS). Lorsquelles sont utilises correctement, les feuilles de style permettent aux concepteurs Web de suggrer un format daffichage pour certaines portions de texte, sachant que le navigateur de lutilisateur peut ne pas en tenir compte. Vous pouvez modier la couleur, la taille, la graisse et le style du texte. Vous pouvez

166 LE GUIDE COMPLET

Modification de lapparence du texte

Chapitre 5

mme disposer dun style de recouvrement et de justication de paragraphe. Cette mthode, bien plus souple que les lments disponibles via HTML, est tudie en dtail dans le Chapitre 8. En fait, les plus anciens navigateurs (ceux qui nutilisent pas CSS) ignorent automatiquement les feuilles de style, ramenant tout dans le style de texte par dfaut.
Tailles relatives

Si vous dcidez davoir recours llment FONT pour modier la taille ou les couleurs dune 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 prdni dans les prfrences du navigateur.

Indices et exposants : lments SUB et SUP

Le franais emploie rgulirement des abrviations dans lesquelles un des termes est crit comme exposant : Mlle, 1er, etc. En outre, les notations mathmatiques (tudies un peu plus loin) ont frquemment recours des exposants : a2 + b2 = c2. HTML propose cette n les lments SUB (subscript, indice) et SUP (superscript, exposant). Il sagit dlments ligne qui dcalent lgrement vers le bas ou vers le haut le texte par rapport au reste de la ligne. Leurs balises douverture et de fermeture sont obligatoires. Llment indice SUB place le texte en dessous de la ligne de texte normal. Cela est frquemment employ pour des notes de bas de page ou de glossaire, souvent lies laide dun signet (ou ancre) vers une rfrence situe la n du document. Par exemple, considrez le fragment de code suivant :
<P>Il existe dailleurs 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 daccomplir une action. Plus connu sous le nom de "contr&ocirc;le" avec Windows.</CITE></P>

Ce code procure un lien hypertexte vers la dnition du terme widget.

LE GUIDE COMPLET 167

Chapitre 5

Mise en forme avance

Figure 5.20 : Le premier paragraphe prsente un lien

Figure 5.21 : Le premier paragraphe prsente un lien. Un clic sur celui-ci mne vers la dnition du terme.

Comme vous lavez sans doute devin tout seul, llment exposant accomplit exactement le contraire, plaant le texte au-dessus de la ligne de texte normal. Bien que cela puisse galement tre utilis pour des notes, lusage le plus frquent concerne des notations chimiques ou mathmatiques. Ainsi,
a<SUP>2</SUP> + b<SUP>2</SUP> = c<SUP>2</SUP>

affiche lcran : a2 + b2 = c2

Figure 5.22 : quation obtenue laide de llment SUP

Remarquez que nous avons employ ici un lment CODE pour afficher lquation dans une police non proportionnelle. Les termes lis la langue, les notes, les quations chimiques ou mathmatiques sont autant de raisons en faveur dun emploi judicieux des indices et des exposants.
Emploi intelligent des notes en HTML

Une note est lie au corps dune section et explique soit la n de cette section soit la n du document. Comme certains documents peuvent tre de grande taille, prfrez en HTML les notes places en n de section ou en pied de page, pour pargner vos utilisateurs une navigation intensive.

168 LE GUIDE COMPLET

Notation mathmatique

Chapitre 5

5.5. Notation mathmatique

Comme nous lavons dj soulign, le World Wide Web a vu le jour en 1991, avant tout pour favoriser le transfert de donnes entre les physiciens. Malgr cette origine, les notations scientiques et mathmatiques taient mal prises en charge par les premires versions de HTML. HTML 4.0 propose cependant quelques mthodes trs sophistiques pour afficher de faon attrayante et fonctionnelle les quations mathmatiques. De plus, divers programmes auxiliaires offrent dautres moyens dafficher des mathmatiques sur le Web.

En texte simple
La faon la plus simple dafficher des mathmatiques sur le Web est parfois la meilleure, mme si ce nest pas la plus attrayante : vous pouvez recourir des caractres textuels pour les reprsenter, comme cela est montr dans lexemple de llment SUP. Comme nous lavons fait dans cet exemple, mieux vaut recourir un lment CODE pour afficher lquation dans une police non proportionnelle ( espacement xe). Vous devrez cependant parfois employer dans des quations des symboles particuliers, comme des lettres grecques. Dans un tel cas, lemploi de llment FONT dj prsent, bien que dconseill, 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>

Hlas ! Tous les navigateurs ninterprtent pas ce code de la mme faon. Seul Internet Explorer tire prot de llment FONT pour afficher correctement le sigma grec.

LE GUIDE COMPLET 169

Chapitre 5

Mise en forme avance

Figure 5.23 : Exemple dquation crite laide de caractres texte avec Internet Explorer

Figure 5.24 : Exemple dquation crite laide de caractres texte avec

Firefox

Figure 5.25 : Exemple dquation crite laide de caractres texte avec

Amaya.

Lemploi de texte simple atteint toutefois ses limites en prsence de fractions compliques, ou en cas doprandes mathmatiques plus avancs.

laide de graphismes
Une autre option consiste crer des images de lquation mathmatique et de les insrer 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 mathmatique comme lditeur dquation de Microsoft Word ou un programme commercial comme MathType (www.dessci.com/en/products/mathtype/). Utiliser des chiers graphiques spars est une solution simple et rapide, mais les images ne peuvent pas tre facilement enregistres avec les pages Web, tandis quil reste impossible de couper/coller les quations. Crer une image individuelle pour chaque quation peut reprsenter un travail titanesque si la page traite intensivement des mathmatiques.

170 LE GUIDE COMPLET

Notation mathmatique

Chapitre 5

Lapparence nale peut galement tre variable selon les paramtrages dnis pour la page Web et pouvant tre outrepasss par lutilisateur.

Figure 5.26 : Exemple demploi de lditeur dquation Word

laide de MathML
Diffrents experts du Web, mathmaticiens, scientiques et autres ont travaill pour dvelopper une solution qui permette dincorporer les notations mathmatiques en HTML. Cest un problme complexe dont le but tait de dnir un langage de notation structurel plutt quun simple langage de description de page. HTML 4.0 propose une excellente solution, sous la forme de MathML, un langage de notation mathmatique dvelopp partir de XML. La spcication 1.01 de MathML est disponible ladresse www.w3.org/1999/07/REC-MathML-19990707/ MathML est simple, bien que par ncessit complexe pour pouvoir reprsenter la totalit des mathmatiques modernes. Comme en matire de conception Web, il existe diffrents diteurs, commerciaux ou gratuits, qui permettent de crer des quations grce une interface simple et facile daccs, de convertir votre travail, et de laisser au programme la tche de rsoudre votre quation. Mme 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 dvelopp par le W3C
Figure 5.27 : Amaya permet de raliser trs facilement des quations mathmatiques sous MathML

LE GUIDE COMPLET 171

Chapitre 5

Mise en forme avance

Lexemple prsent est la clbre solution de lquation du second degr. Remarquez le pointeur plac sur lditeur mathmatique. Le code de cette page est prsent ci-dessous.
Listing 5-7 : Exemple MathML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <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 http://www.w3.org/Amaya/"> </head> <body> <h1 align=center>Solution de l&eacute;quation du second degr&eacute;</h1> <p> <code> <math xmlns="http://www.w3.org/1998/Math/MathML"> <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

Rsum
</body> </html>

Chapitre 5

Malheureusement, rares sont les navigateurs reconnatre 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 reconnatre MathML

Cet tat de choses devant logiquement voluer, nous ne saurions faire autrement que de vous recommander de vous intresser MathML.

5.6. Rsum
j j

Llment HR permet dinsrer une ligne horizontale lcran. La balise <! commentaire > signale un commentaire ignor par HTML. Ces commentaires sont prcieux lorsque le site est dvelopp et/ou maintenu par plusieurs personnes. Les lments DIV et SPAN, grce leurs attributs id et class, offrent un mcanisme gnrique de structure. Ils sont essentiellement employs avec les feuilles de style (grce aux attributs id et class) et/ou lattribut lang pour mieux exploiter HTML. Llment PRE dnit un bloc de texte prformat : la mise en forme stipule est thoriquement restitue telle quelle lcran, y compris les espaces vierges normalement ignors par HTML.
LE GUIDE COMPLET 173

Chapitre 5
j

Mise en forme avance

j j

j j

Llment BLOCKQUOTE (de type bloc) et son quivalent ligne Q servent signaler une citation. Ils doivent de prfrence tre employs en combinaison avec llment CITE, procurant la source de la citation. Llment ADDRESS, gnralement plac au dbut ou la n dun document, sert fournir des informations de contact applicables au document. Lattribut style permet de modier les marges dun bloc de texte. Les lments EM et STRONG sutilisent pour mettre en exergue une portion du texte, qui possde par exemple une signication particulire dans un contexte technique. ABBR et ACRONYM sont des lments qui permettent aux auteurs dindiquer clairement les occurrences des abrviations et des acronymes. Llment CODE a pour but dafficher un fragment de code informatique. Cest un lment structurel, accompagn des lments PMR (sortie de programme) et KBR (texte saisir au clavier). Le jeu de caractres habituellement employ en Europe occidentale est ISO-8859-1, galement nomm Latin-1. Il existe toutefois de nombreux autres encodages de caractres rpondant aux besoins des diffrentes langues. Les caractres ne pouvant tre obtenus directement au clavier (comme les majuscules accentues) ou susceptibles de poser problme dans du code HTML (comme les caractres < et >) sont remplacs dans le code HTML par des rfrences de caractres, exprimes sous forme numrique ou laide dentits caractres. FONT et BASEFONT sont des lments qui permettent de dnir et de modier les polices employes. Ils sont dsormais dconseills au prot des feuilles de style. Les indices et exposants sont obtenus laide des lments SUB et SUP. Les quations mathmatiques peuvent tre reprsentes laide de texte brut, ou dimages ralises laide dautres produits ou de MathML, la solution prconise par le W3C pour laffichage de notations mathmatiques. MathML reste malheureusement trs peu pris en charge par les navigateurs actuels.

174 LE GUIDE COMPLET

Couleurs et images

Les couleurs ........................................................................................................................ 177 Les images .......................................................................................................................... 186 Images animes ................................................................................................................. 198 Image cliquable .................................................................................................................. 210 Inclusion gnrique dimages : lment OBJECT ..................................................... 224 Rsum ................................................................................................................................ 240

Chapitre 6

Couleurs et images

La plupart des pages Web ont recours des couleurs, des images et des icnes exploites dune faon ou dune autre. Choisir avec soin un ensemble dimages contribue donner votre site son style particulier. Cet ensemble procure aux visiteurs des indices visuels sur le contenu et est galement susceptible de servir doutil de navigation. La premire tape pour passer dune simple page de texte en noir et blanc une page plus attractive consiste employer les couleurs. Ltape suivante consiste incorporer des images en divers emplacements de la page : dans des lments, comme arrire-plan dune page ou dune portion de celle-ci, etc. En rgle gnrale, ne demandez jamais une image de faire le travail dun texte. De simples liens texte peuvent conduire les visiteurs vers dautres parties du site aussi facilement quun bouton graphique, sans augmenter le temps de chargement. Si vous retenez des boutons graphiques, ceux-ci doivent tre aussi lgers que possible. Les images sont toutefois prcieuses : vous pouvez employer le logo de votre organisme dans len-tte, ajouter dautres images comme lments illustratifs, et mme employer un texte icne cest--dire une police de caractres fortement associe votre site. Outre les images statiques, vous pouvez employer des images animes (gif anims). Comme vous le verrez dans ce chapitre, il faut dans ce domaine agir avec prudence : un grand nombre dimages animes peut fatiguer lil assez vite et rendre la page plus confuse quexplicite. Enn, une tape encore plus volue consiste crer des images reprsentant plusieurs liens : les images cliquables (imagemap). HTML permet de faire en sorte quune zone de limage soit active, cest--dire quun lien lui soit associ. Vous allez tudier ces diffrentes techniques dans ce chapitre. lments tudis :
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 premire tape de lenjolivement dune page, aprs avoir parfaitement dni sa structure comme vous avez appris le faire dans les chapitres prcdents, consiste y ajouter de la couleur. Les couleurs sont souvent mises prot par les concepteurs de sites pour donner un site une note particulire, ce qui porte gnralement le nom de charte graphique . Lorsque vous surfez sur le Web, essayez de noter les pages qui vous plaisent et celles que vous naimez pas, et pourquoi. Se servir de couleurs spciques sur lensemble 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, grce divers attributs de llment BODY : bgcolor et text dnissent respectivement la couleur darrire-plan et la couleur de texte, link, vlink et alink dnissent respectivement la couleur des liens, la couleur des liens visits et la couleur des liens slectionns. bgcolor sert galement dnir la couleur de fond dans des tableaux, tandis que lattribut color, propre aux lments FONT et BASEFONT, dnit la couleur du texte dans un lment individuel. La valeur des attributs de couleur se rapporte aux dnitions des couleurs telles que spcies dans la spcication SRGB, relative un standard des couleurs sur Internet et actuellement dans sa version 1.10 (www.w3.org/Graphics/Color/sRGB). Une valeur de couleur peut soit tre un nombre hexadcimal (prx par un caractre dise # ) soit lun des noms de couleur prdnis.
Tableau 6.1 : Noms de quelques couleurs et valeurs RGB

Nom Black Silver Gray White Maroon Red

Valeur RGB

Nom Green Lime Olive Yellow Navy Blue

Valeur RGB

#000000 #C0C0C0 #808080 #FFFFFF #800000 #FF0000

#008000 #00FF00 #808000 #FFFF00 #000080 #0000FF

LE GUIDE COMPLET 177

Chapitre 6

Couleurs et images

Tableau 6.1 : Noms de quelques couleurs et valeurs RGB

Nom Purple Fuchsia

Valeur RGB

Nom Teal Aqua

Valeur RGB

#800080 #FF00FF

#008080 #00FFFF

Ces noms de couleur sont insensibles la casse : les valeurs de couleur #800080, Purple et PURPLE dsignent toutes trois la mme couleur violette.

Figure 6.1 : Les 140 couleurs noms prdnis

Modication du schma de couleurs de la page

Modier un schma de couleur lintrieur dune page seffectue dans llment BODY, car cela affecte pratiquement tous les lments du corps de la page. Aprs une modication de couleur, vriez-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 dordinateurs et de congurations diffrentes. Cela an de bien vrier que la page reste parfaite en toutes circonstances. Nous allons modier le schma de couleur de notre page daccueil, tout dabord laide des couleurs standard :

1 Ouvrez dans le Bloc-Notes le chier pageacc1_5_7.html (la dernire version de la page daccueil). 2 Modiez nouveau le numro de version :
<META name="version" content="1.6.1">

3 Attribuez une couleur darrire-plan lintgralit de la page :

<BODY bgcolor="black">

4 Attribuez une couleur au texte de la page (si vous ne le faites pas, la couleur par dfaut du texte tant le noir, toute la page sera invisible) :
<BODY bgcolor="black text="white">

BODY ou BASEFONT

Vous pouvez galement modier la couleur du texte laide dun lment BASEFONT. Un lment
<BASEFONT color="white">

aurait un effet identique

<BODY text="white">

5 Modiez les couleurs des liens :

<BODY bgcolor="black" text="white" link="yellow" vlink="silver" alink="purple">

4 Enregistrez votre chier sous le nom pageacc1_6_1.html.

Examinez cette nouvelle page dans votre navigateur. Daccord, elle noffre rien dexceptionnel et pourrait mme tre dcrite comme un peu macabre, mais il ne sagit que dun exemple ! Lemploi des noms de couleur gnriques est dune grande simplicit et parfaitement explicite. Vous pouvez indiffremment employer le codage hexadcimal et crire :
<BODY bgcolor="#000000" text="#FFFFFF" link="#FFFF00" vlink="#C0C0C0" alink="#800080">

LE GUIDE COMPLET 179

Chapitre 6

Couleurs et images

La valeur hexadcimale employe 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 diffrentes valeurs sont leves et plus la couleur est lumineuse : trois fois 0 pour le noir et trois fois FF pour le blanc. Vous pouvez spcier nimporte quelle valeur hexadcimale, mme si elle ne correspond pas une couleur standard. Cest ce qua fait Micro Application.

Figure 6.2 : Micro Application a retenu comme couleur de fond un bleu profond, dni dans llment BODY grce lattribut bgcolor="#003366".

Comme vous tes un utilisateur subtil, vous ralisez que cela permet de disposer de 2563 couleurs possibles (de 0 FF ou 255, donc 256 possibilits pour chaque composante primaire), soit environ 16,8 millions de couleurs Vous risquez de dire alors : Rigolo, va ! Facile dire, mais je nai pas envie de tester une multitude de combinaisons avant de trouver la couleur qui me plat ! Pas de panique, cest enfantin. Mme si vous ne disposez pas dun logiciel de dessin volu comme Adobe PhotoShop ou Corell Draw (ou, en tant moins dpensier, dun partagiciel comme Paint Shop Pro ou mieux encore dun produit de dessin gratuit comme lincomparable The Gimp), les systmes dexploitation Windows sont accompagns dun programme de dessin simple (Paint) qui permet de disposer dun chantillonneur de couleurs gratuit.

1 Ouvrez Paint (en principe, Dmarrer > Tous les programmes > Accessoires > Paint). 2 Choisissez Couleurs > Modification des couleurs . La fentre Modification des couleurs saffiche.

180 LE GUIDE COMPLET

Les couleurs

Chapitre 6

Figure 6.3 : Le logiciel de dessin Windows Paint

3 Cliquez sur Dfinir les couleurs personnalises. La fentre Modification des couleurs sagrandit, proposant une zone colore dans laquelle se trouve un curseur, une zone de visualisation agrandie de la couleur en bas, ainsi que, sur la droite, les valeurs RGB exprimes en nombres dcimaux.

Figure 6.4 : Fentre Modication des couleurs de Paint

4 Dplacez le curseur et choisissez la couleur souhaite. Notez par crit les valeurs RGB, et continuez rechercher des couleurs ou fermez Paint (cliquez sur Annuler puis sur Fichier > Quitter). Cest tout !
Enn, pas exactement. Vous disposez de chiffres dcimaux quil faut convertir en hexadcimal. moins dtre trs dou et de savoir faire cela avec facilit, vous avez besoin dun convertisseur. La

LE GUIDE COMPLET 181

Chapitre 6

Couleurs et images

Calculatrice Windows, galement livre avec le systme dexploitation, est parfaite pour cela.

1 Ouvrez la calculette (Dmarrer > Tous les programmes > Accessoires > Calculatrice). Passez si ncessaire (cest probable) en mode scientique en choisissant Affichage > Scientifique. Vriez que le bouton doption Dc. est slectionn, juste sous la ligne daffichage.

Figure 6.5 : Calculatrice Windows en mode scientique

2 Saisissez le code de la couleur rouge. 3 Cliquez sur le bouton doption Hex et notez par crit le rsultat deux chiffres (il peut y avoir une lettre) correspondant la couleur rouge. 4 Rptez ces tapes pour le vert et le bleu, puis assemblez ensuite les diffrents codes de deux chiffres : RRVVBB. Voil votre code RGB pour cette couleur.
En vous reportant la gure montrant la fentre Modification des couleurs de Paint de la gure 6.4, vous voyez que les valeurs pour la couleur slectionne taient 0, 51 et 102, ce qui donne 00, 33 et 66, donc un code RGB de 003366 : justement la couleur employe par Micro Application pour sa page daccueil.
Convertisseur

Remarquez que si vous disposez dun code RGB en hexadcimal et que vous souhaitez voir quelle couleur il correspond, accomplissez exactement lopration inverse : convertissez le code en dcimal, puis saisissez directement sous Paint les valeurs obtenues dans les cases adquates : la couleur correspondante sajuste aprs la modication de chaque valeur, pour aboutir la couleur cherche.

182 LE GUIDE COMPLET

Les couleurs

Chapitre 6

On line

Vous pouvez galement vous servir dun convertisseur en ligne, comme celui propos par AlterLinks ladresse www.alterlinks.fr
/conversion-table/RGB-HTML-RWX.php

Modication de la couleur du texte dans un lment de page

Comme pour llment BASEFONT, vous pouvez recourir lattribut color dun lment FONT pour modier la couleur du texte pour ou dans un lment. Gardez bien prsent lesprit que toute modication applique laide de FONT reste active jusqu la fermeture de llment FONT ! Pour renforcer limpact dun terme important, vous pouvez combiner lemploi dune 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 saffiche en gras et en rouge.

Figure 6.6 : Modication de la couleur dun mot dans un lment

LE GUIDE COMPLET 183

Chapitre 6

Couleurs et images

Modication du schma de couleurs dun tableau

bgcolor est un autre attribut facultatif de plusieurs lments de tableau TABLE, TR, TD et TH. De faon analogue lattribut bgcolor de llment BODY, il modie la couleur de fond. Il peut donc modier la

couleur de fond de tout le tableau, dune ligne ou dune cellule den-tte ou de donne. Si vous modiez le fond dune cellule, assurez-vous bien que cela ne compromette pas la lisibilit du texte qui y est plac : servez-vous de llment FONT ou mieux encore dune feuille de style pour modier galement la couleur du texte. Lattribut bgcolor est dsormais dconseill au prot des feuilles de style. Les fonds colors de tableaux ne sont pas reconnus par les plus vieux navigateurs.

Modier la couleur dune cellule de tableau

Pour modier la couleur de fond dune cellule de tableau, insrez lattribut bgcolor dans llment TD, exactement comme vous procderiez avec un lment BODY ou un lment TABLE.

Figure 6.7 : Modication de la couleur de fond dune cellule de tableau

Noubliez pas de modier si ncessaire la couleur de la police laide de llment FONT !

Prcautions prendre avec les couleurs

Lemploi des couleurs ncessite certaines prcautions. Sachez que leur rendu rel dpend de la conguration tant matrielle que logicielle de
184 LE GUIDE COMPLET

Les couleurs

Chapitre 6

lordinateur de lutilisateur. Chaque carte graphique, chaque cran, voire chaque navigateur peut inuencer lgrement le rendu. Si la diffrence est gnralement subtile, une conguration inhabituelle peut rendre le site difficile lire. Cest pourquoi, une fois encore, mieux vaut tester le site sur autant de machines diffrentes que possible (il suffit dexaminer les ranges de tlviseurs dans nimporte quel magasin daudiovisuel ou grande surface pour disposer dune ide des variations susceptibles de se produire selon le matriel employ !). Une bonne astuce consiste souvent examiner le site laide dune machine et de logiciels datant un peu, pour voir si le site se dgrade de faon acceptable. Par exemple, vous avez remarqu que le codage RGB permet de disposer de plus de 16 millions de couleurs : si votre cran nest pas congur en millions de couleurs, vous ne pourrez voir selon les cas que 65 000 ou mme 216 couleurs (utilisation dans ce cas uniquement des nombres 00, 33, 66, 99, CC et FF). Mme si les couleurs peuvent apporter beaucoup dinformations aux documents et les rendre plus lisibles, mieux vaut sen tenir aux principes suivants lors de leur emploi :
j

Attention aux combinaisons de couleurs susceptibles de poser problme aux personnes atteintes de daltonisme dans ses diverses formes. Toutes les tudes dmontrent 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 possdant la mme intensit lumineuse leur sont particulirement difficiles distinguer. Lorsque vous dnissez 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 diffrencier. Les visiteurs souffrant dune dcience dacuit visuelle vous en sauront gr galement ! Si vous employez une image darrire-plan ou dnissez une couleur darrire-plan, veillez bien assortir les diverses couleurs des textes. Les couleurs dnies par les lments BODY et FONT, et par lattribut bgcolor sur les tables ressortent diffremment 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 spcique. Dans le futur, la gestion du

LE GUIDE COMPLET 185

Chapitre 6

Couleurs et images

modle de couleur SRGB en mme temps que celle des prols de couleur ICC devrait attnuer ce problme. La spcication de couleurs dans des lments HTML est dconseille. Servez-vous plutt des feuilles de style.

Enn, sachez que les couleurs peuvent tre dsactives par lutilisateur. Tous les navigateurs ou presque possdent dsormais des options de gestion des couleurs ou autorisent les utilisateurs dnir un ensemble particulier de couleurs utiliser pour tout site visit. Assurez-vous que vos graphismes ne risquent pas de disparatre ou de perdre toute signication si un autre schma de couleur est retenu. Les schmas les plus classiques sont les suivants :
j j j

Fond blanc, texte noir, liens hypertextes bleus. Fond noir, texte blanc et liens hypertextes jaunes. Fond gris, texte noir et liens hypertextes bleus.

Quil sagisse l des schmas les plus frquents ne signie pas quils soient les seuls. Certains utilisateurs peuvent avoir retenu des couleurs contraste maximal, dautres peuvent avoir augment fortement la taille des polices an de lire plus aisment les textes.

6.2. Les images

Vous le savez dj, il est possible de placer des images sur un site Web. Les pages Web ont le plus souvent recours deux formats de chiers graphiques, GIF (Graphic Interchange Format) et JPEG (Join Photographic Experts Group), mme sil 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 dots de nombreuses couleurs. Leur systme de compression leur permet de diminuer la taille totale des chiers. En revanche, le format GIF, limit une palette maximale de 256 couleurs, sert plutt pour les dessins au trait, les icnes et les images animes. Le format PNG, libre de droits, est annonc comme le successeur du format propritaire GIF. PNG prend en charge trois types dimages : vraies couleurs, chelle de gris et fonde sur une palette ( 8 bits ), tandis que JPEG ne prend en charge que les deux premiers et GIF uniquement le troisime, mme sil peut muler une chelle de gris
186 LE GUIDE COMPLET

Les images

Chapitre 6

laide dune palette de gris. PNG gre en outre la transparence dune faon plus sophistique que GIF. Il sagit dun format destin aux images xes, mme si un projet nomm MNG pour les images animes a vu le jour en 1999. La compression PNG est dexcellente qualit. En pratique, le choix du format se limite souvent la version de limage qui occupe le moins de place. Le temps de chargement dune page tant proportionnel au nombre dlments graphiques quelle contient ainsi qu leur taille totale, il est capital de retenir des images de la plus faible taille possible. Il est prouv quune page demandant plus de 15 secondes de tlchargement a tendance chasser les visiteurs potentiels (attention : en situation relle, pas en local sur votre ordinateur !). Quel que soit le format dimage retenu, linclusion dans une page Web reste identique.

Image darrire-plan
Au lieu dun fond de couleur uniforme, vous pouvez utiliser une image darrire-plan (background), spcie dans llment BODY laide de lattribut background. La syntaxe est la suivante :
<BODY background ="nomfichier">

o nomfichier est le nom du chier image utiliser comme fond dcran. Cet attribut est dsormais dconseill, au prot des feuilles de style. Une telle image remplit lcran par un effet de mosaque. Autrement dit, elle est rpte en largeur autant de fois que ncessaire pour occuper la largeur de lcran et est de mme rpte en hauteur autant de fois que ncessaire pour remplir toute la hauteur de lcran. vitez les trs grands graphismes en fond dcran : cela fonctionne rarement bien, et les utilisateurs disposant de grands crans voient aisment la rptition du graphisme. Une image darrire-plan est prioritaire sur une couleur darrire-plan avec la plupart des navigateurs. Ce type dimage est principalement employ de deux faons : pour crer un effet de bordure ( droite ou gauche) ou comme mosaque ligrane sur tout lcran.

LE GUIDE COMPLET 187

Chapitre 6

Couleurs et images

La premire 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 conseille pour le site concern. Ainsi, la rptition est en thorie uniquement verticale, et peut crer un effet de cahier spirales ou de cahier dcolier carreaux, avec un trait de marge en couleur. Inconvnient vident, si la largeur dcran employe nest pas exactement celle prvue, la rptition peut galement se produire horizontalement, dtruisant toute cette belle prsentation. Vous pourrez galement parfois rencontrer une image ne mesurant que quelques pixels de haut et de grande largeur. Lauteur a pris la prcaution de sassurer dune apparente continuit entre le haut et le bas de son image, ainsi quentre les cts droit et gauche : toute rptition semble alors presque invisible.

Figure 6.8 : Une image ayant la forme dun n bandeau.

Figure 6.9 : Un n bandeau employ comme image de fond est une solution sduisante de prime abord

Limage employe ici, qui mesure 802 pixels de large sur 32 de haut, est adapte une fentre de navigateur denviron 800 pixels de large (soit une rsolution de 800 x 600, pour un affichage en plein cran). Si la fentre est plus petite ou plus grande, tout laspect est compromis.

188 LE GUIDE COMPLET

Les images

Chapitre 6

Figure 6.10 : Un aspect modi par lutilisateur

Figure 6.11 : mais qui reste largement dpendante de lutilisateur !

La seconde solution a recours une image de fond de relativement petite taille (plus la taille est petite et plus les erreurs de rptition sont imperceptibles), trs peu colore et contraste, servant ainsi de ligrane au reste du contenu. Javoue affectionner particulirement ce type de fond, que je trouve efficace, sobre et lgant.

Figure 6.12 : Lemploi dun ligrane.

LE GUIDE COMPLET 189

Chapitre 6

Couleurs et images

Figure 6.13 : Lemploi dun ligrane.

Figure 6.14 : Lemploi dun ligrane de faible taille (ici 129 159 pixels) est

une solution possible, indpendante de la taille de lcran employ.

Image insre
Vous pouvez galement insrer des images pratiquement dans tout lment de votre page : une image peut donc se trouver en plein milieu dun texte, ou ce dernier senrouler en colonnes autour du dessin. Avant denvisager de diffuser une image sur Internet, vous devez prendre certaines prcautions (comme dailleurs avec pratiquement tout contenu) : veillez toujours respecter scrupuleusement la lgislation sur le copyright et les droits dauteur. Pour pouvoir diffuser une image sur votre site, vous devez vrier que vous avez le droit de le faire : soit elle est libre de droits, soit vous avez obtenu laccord de son propritaire

190 LE GUIDE COMPLET

Les images

Chapitre 6

(auteur), soit enn vous en tes vous-mme lauteur. Mme dans ce dernier cas, si limage est une photographie reprsentant dautres personnes, vous devez obtenir leur autorisation formelle. Depuis bien longtemps, HTML permet linclusion dimages laide de llment IMG. Cet lment incorpore une image dans le document courant, lemplacement de la dnition de llment. Dpourvu de contenu, il est gnralement remplac dans la ligne par limage que dsigne lattribut src, les images alignes gauche ou droite qui ottent hors de la ligne faisant exception. Nous allons modier lapparence de la page secondaire Rgion en insrant une image. Pour simplier, nous allons employer une image dont disposent normalement tous les utilisateurs de machines Windows XP : une de celles se trouvant dans le dossier Echantillons dimages du dossier Mes images. Avant de commencer, il faut vous livrer quelques travaux prparatoires :

1 Ouvrez lExplorateur Windows, naviguez jusqu votre dossier MonSite et crez-y un sous-dossier, nomm Images : vous y placerez toutes les images employes sur le site. Cest une bonne habitude prendre pour viter de surcharger le rpertoire principal.
Subdivisions

Vous pourriez mme aller encore plus loin et subdiviser le sousdossier Images en plusieurs sous-dossiers : gif (les images GIF statiques), gifanim (les gif anims), icone (les icnes et boutons) et JPEG (les photos).

2 Choisissez Dmarrer > Mes images, puis cliquez sur le dossier Echantillons dimages. 3 Slectionnez limage Coucher de soleil.jpg, puis choisissez dans la barre de menu Edition > Copier. 4 Revenez dans votre dossier MonSite/Images, puis collez limage de coucher de soleil en choisissant Edition > Coller. 5 Procdez de la mme faon pour les images Hiver.jpg et Nnuphars.jpg.
Vous tes maintenant prt insrer des images sur votre site.

6 Ouvrez le Bloc-Notes, puis ouvrez le chier region1_4_3.html.

LE GUIDE COMPLET 191

Chapitre 6

Couleurs et images

7 Modiez dabord le numro de version :

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

8 Protez-en pour modier le lien vers la page daccueil en fonction du nom du chier actuel :
<A href="pageacc1_6_1.html">Retour vers la page daccueil </A>

9 Placez-vous maintenant dans la premire cellule de la premire ligne, et remplacez le contenu texte ...Une image sera place ici... par un lment IMG, comme suit :
<TD rowspan="3"><IMG src="Images/Coucher de soleil.jpg"> </TD>

Remarquez que la balise IMG est dpourvue dlment de fermeture : son contenu est dni par la valeur de lattribut src, un URI. Cet attribut indique au navigateur o trouver limage, comme lattribut href de llment A indique o trouver la ressource lie une ancre.
Sensibilit la casse

Respectez avec soin la casse dans lURI de llment IMG, comme pour tout URI. Certains navigateurs et/ou serveurs sont sensibles la casse des URI. Tous ne ltant pas, votre site pourrait fonctionner parfaitement en local, mais plus du tout une fois en ligne. Une bonne habitude consiste nemployer que des minuscules pour les noms des chiers image. Cette sensibilit la casse tant susceptible de concerner galement lextension, vriez celles de vos chiers image : certains programmes de dessin enregistrent automatiquement les chiers avec une extension en majuscules.

XHTML

En XHTML, cette instruction scrirait :

<img src="Images/Coucher de soleil.jpg" />

10 Enregistrez le chier sous le nom region1_6_1.html, puis examinez cette page dans votre navigateur.

192 LE GUIDE COMPLET

Les images

Chapitre 6

Archivez

Lhabitude prise ici dattribuer aux chiers un nom comportant le numro de version na pour but que dviter les recouvrements de chiers et de permettre dtudier les versions prcdentes. Pour un site rel, cette mthode nest gure recommander, la modication des noms de chiers entranant des risques de liens rompus et imposant de mettre continuellement jour ces liens. Mieux vaut archiver les anciens chiers, puis les modier sans changer leur nom.

Figure 6.15 : Insertion dune image

Laspect nest pas extraordinaire, et ce pour plusieurs raisons. Nous ne commenterons pas le choix de limage, puisquil a fallu employer une image prexistante sur la majorit des systmes : le choix est trs limit. En revanche, cette image semble de taille un peu exagre, crasant tout le tableau et ncessitant un cran de grande taille. En examinant le chier image, vous voyez que celle-ci mesure 800 600 pixels : une taille imposante, sans doute dmesure par rapport nos besoins. Il

LE GUIDE COMPLET 193

Chapitre 6

Couleurs et images

faudrait lafficher en taille plus rduite. Cest ce que permettent les attributs height et width de llment IMG.

11 Modiez comme suit llment IMG en ajoutant les attributs height et width :
<TD rowspan="3"> <IMG src="Images/coucher de soleil.jpg " width="267" height="200"> </TD>

12 Enregistrez nouveau le chier sous le mme nom puis examinez la page dans votre navigateur.

Figure 6.16 : Insertion dune image taille dtermine

Nous avons ici divis la taille daffichage de limage par 3. Laspect est nettement plus satisfaisant (remarquez que nous avons conserv exactement la mme taille de fentre que pour la capture dcran prcdente). Ces deux attributs mritent quelques commentaires supplmentaires :
j

Leurs valeurs sont exprimes en pixels.

194 LE GUIDE COMPLET

Les images
j

Chapitre 6

Les deux attributs ne sont pas obligatoires si vous souhaitez modier la taille dune image de faon proportionnelle : ne saisir que height="200" suffit rduire la taille de limage dun tiers en hauteur et en largeur. La prsence des deux attributs permet en outre de modier le ratio de limage, ce qui est parfois utile. Ces attributs ont t employs ici pour rduire la taille de limage, mais ils auraient tout aussi bien pu servir laugmenter. Selon le rapport dagrandissement retenu, attendez-vous une perte de qualit (pixellisation de limage). Lorsque vous incluez ces attributs, la page Web semble se charger plus vite : le navigateur est en mesure dafficher le texte avant davoir ni de charger la page, car il connat la place rserver limage. En leur absence, le visiteur est confront une page blanche pendant le chargement de limage, le navigateur ne sachant pas la place libre dont il dispose pour afficher le texte. Ce phnomne est presque imperceptible en local, mais devient vident lorsque la page est tlcharge depuis le Web.

En pratique, vous chargez ici une image dun poids environ neuf fois suprieur ce qui est ncessaire : 800 600 pixels, soit 480 000 pixels, alors que vous nexploitez quune image de 266 200 pixels, soit 53 200 pixels. Malgr la compression JPEG, le temps de chargement est environ neuf fois suprieur aux besoins. Mieux vaut toujours redimensionner les images la taille souhaite laide dun programme de dessin (nous reviendrons par la suite sur ce thme). En revanche, conservez donc les attributs height et width pour acclrer laffichage de la page.

13 Lorsque vous insrez une image, vous devez penser aux agents utilisateurs non visuels. Servez-vous de lattribut alt pour proposer une alternative textuelle ds le dbut du chargement de limage :
<IMG src="Images/coucher de soleil.jpg " width="267" height="200" alt="Coucher de soleil sur le lac de Linciel">

14 Enregistrez nouveau le chier sous le mme nom puis examinez la page dans votre navigateur.
Lattribut alt spcie le texte de remplacement qui est restitu si limage ne peut safficher. Les agents utilisateurs doivent restituer le texte de remplacement quand ils ne grent pas les images, ne

LE GUIDE COMPLET 195

Chapitre 6

Couleurs et images

reconnaissent pas un certain type dimage ou ne sont pas congurs pour les afficher. Remarquez quInternet Explorer affiche le texte alternatif dans une infobulle lorsque le pointeur de la souris est plac sur limage.

Figure 6.17 : Image avec texte alternatif

Cest une des nombreuses erreurs lies au manque de respect dInternet Explorer vis--vis de la spcication HTML 4.01 : la valeur de lattribut alt ne devrait tre affiche que lorsque lagent utilisateur ne peut afficher limage. Pour afficher un commentaire dans une infobulle, vous devez employer lattribut title.

15 Servez-vous de lattribut title pour proposer un commentaire affich dans une infobulle lorsque le pointeur se trouve sur limage :
<IMG src="Images/coucher de soleil.jpg " 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 chier sous le mme nom puis examinez la page dans votre navigateur.
Remarquez que nous avons volontairement diffrenci les valeurs des attributs alt et title. Tant Internet Explorer que Firefox affichent dsormais le commentaire dans une infobulle. Internet Explorer

196 LE GUIDE COMPLET

Les images

Chapitre 6

naffiche le contenu dun ventuel attribut alt quen labsence de lattribut title.

Figure 6.18 : Emploi de lattribut title.

Figure 6.19 : Emploi de lattribut title. Tant Internet Explorer que Firefox affichent correctement ce commentaire dans une infobulle lorsque le pointeur se trouve sur limage.

LE GUIDE COMPLET 197

Chapitre 6

Couleurs et images

Vous pouvez galement recourir lattribut longdesc pour relier limage une description plus dtaille. Cet attribut se comporte comme une ancre :
<IMG src="image.jpgf" alt="Schma du moteur " longdesc="schmamoteur.html">

Llment IMG possde dautres attributs qui permettent de jouer sur les paramtres de restitution dune image :
j

Lattribut align permet daligner limage, de la mme faon que pour un paragraphe. Vous pouvez utiliser les valeurs center, right ou left. Si vous placez du texte aprs le graphisme, celui-ci coulera autour de limage aligne droite ou gauche, donnant un aspect similaire celui dun magazine. Lattribut border permet de dnir la largeur du cadre entourant limage. En choisissant border="0", limage sera dpourvue de cadre.

6.3. Images animes

Pour ajouter de lclat une page, il est possible dutiliser des gifs anims. Il sagit dun type dimage GIF qui peut tre anim en combinant plusieurs images en un unique chier GIF, selon le standard dni en 1987 par Compuserve. Limage effectue lors de sa restitution un cycle travers les diffrentes images lmentaires. Mme si les animations GIF noffrent pas le niveau de souplesse et de contrle propos par dautres formats danimation, il a connu et connat encore un immense succs largement d au fait quil est reconnu par limmense majorit des navigateurs. En outre, les chiers de gifs anims sont gnralement plus petits que dautres chiers danimation, comme les applets Java. Ce type dimage est souvent employ pour les bannires publicitaires, pour attirer des visiteurs sur une page, mais peut galement servir attirer lattention sur des parties prcises dune page ou comme boutons de barre de navigation. GIF89a, comme GIF, possde une palette de couleurs comprise entre 2 et 256 couleurs. Plus la palette est petite et plus le chier est de petite taille. Si votre image GIF nemploie que 4 couleurs, vous pouvez rduire en consquence la palette 4 couleurs (2 bits) et ainsi diminuer la taille du chier de prs de 75 %.

198 LE GUIDE COMPLET

Images animes

Chapitre 6

Insertion dun gif anim

Linsertion dun gif anim est strictement identique celle dune image statique, comme vu prcdemment. Vous allez maintenant ajouter un gif anim votre page daccueil, pour mieux attirer lattention sur la ligne permettant de vous envoyer un courriel. Problme : vous ne disposez pas dun 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 crations. Ouvrez nimporte quel outil de recherche, tapez comme mots-cls GIF et gratuit et vous navez que lembarras du choix.

Figure 6.20 : Une recherche simple procure des milliers dadresses potentielles

1 Ouvrez votre navigateur, puis connectez-vous Internet (si ce nest dj fait). Entrez ladresse suivante dans la barre dadresse de votre navigateur : http://gif.webgratuit.com/ 2 Il sagit dune des adresses, choisie presque au hasard, de la recherche prcdente. Il en existe bien dautres Dans la fentre qui saffiche, cliquez dans le cadre du milieu sur Gif/Gif anims.

Figure 6.21 : Page daccueil de WebGratuit

LE GUIDE COMPLET 199

Chapitre 6

Couleurs et images

Dans la liste qui saffiche, choisissez Webdesign (en bas de la colonne de gauche), puis Mail (dans la colonne de droite), puis enn Botes. La page qui apparat propose diffrentes images animes de botes aux lettres.

Figure 6.22 : Gifs anims de botes aux lettres

3 Descendez si ncessaire dans la fentre pour vous placer sur la seconde bote aux lettres rouge sur fond noir (nomme boites009.gif). Appuyez sur le bouton droit de votre souris et choisissez Enregistrer la cible sous .

Figure 6.23 : Enregistrement dun gif anim

200 LE GUIDE COMPLET

Images animes

Chapitre 6

4 Dans la bote de dialogue Enregistrer sous, sans modier le nom de chier, choisissez le dossier de destination en naviguant jusqu MonSite/Images, puis cliquez sur Enregistrer. 5 Dans le Bloc-Notes, ouvrez le chier pageacc1_6_1.html. Modiez comme suit la ligne denvoi de courriel :
<A href="mailto:votre_nom@votre_FAI"> <IMG src="Images/Boites009.gif">Ecrivez-moi ! </A>

6 Enregistrez le chier sans modier son nom, puis examinez-le dans le navigateur.

Figure 6.24 : Page daccueil modie

Vous comprenez pourquoi nous avons choisi un gif fond noir : pour que limage se mle agrablement au fond, dni comme noir (bgcolor="black"). En revanche, laspect nest pas trs agrable : le cadre jaune choque, tandis que la phrase crivez-moi ! fait double emploi.

7 Rectiez comme suit llment IMG :

<A href="mailto:votre_nom@votre_FAI"> <IMG src="Images/Boites009.gif" border="0" alt="Ecrivez-moi !"> </A>

LE GUIDE COMPLET 201

Chapitre 6

Couleurs et images

8 Enregistrez le chier, puis rafrachissez votre navigateur.

Figure 6.25 : Page daccueil modie

Laspect est plus agrable. Vous venez de comprendre en quoi lharmonisation des couleurs dune page et de celles des lments graphiques qui y sont insrs est capitale. Prenez garde toujours slectionner des couleurs en harmonie avec les images et les icnes de votre page. Une fois les couleurs choisies, vous pouvez les appliquer votre fond, au texte et aux liens hypertextes selon vos dsirs. Inversement, si vous avez dj slectionn les couleurs (ou quune charte graphique est impose), soyez prudent dans le choix de vos images.
Veillez au fond

Les images GIF peuvent possder une couleur transparente (gnralement celle darrire-plan), ce qui facilite grandement leur insertion sur nimporte quel fond. Tout arrire-plan color, ou fond sur une image, apparatra derrire le nouveau dessin. Veillez toutefois ce que limage contraste agrablement avec le fond retenu.

202 LE GUIDE COMPLET

Images animes

Chapitre 6

La slection ou la modication de la couleur transparente seffectue laide de votre logiciel de dessin favori : reportez-vous sa documentation.

Cration dun gif anim

Sil existe sur le Web autant de gifs anims proposs en tlchargement gratuit, cela nest pas un hasard : la cration de gifs anims est dune grande facilit, ce qui en a fait un sport international trs pris. Notez quune image anime est charge une seule fois, quel que soit le nombre de rptitions programmes. Il a t dit plus haut quil sagissait dune succession dimages GIF assembles en un unique chier GIF : voyez-la un peu comme un dessin anim, o chaque image prsente une lgre diffrence avec la prcdente. En partant dune premire image xe,

Figure 6.26 : Image xe initiale

de taille relativement simple, il est assez facile de la dupliquer, de la modier lgrement,

Figure 6.27 : Image modie : la couleur de fond a t change et dnie comme transparente, et seul reste un petit clair partant du cerveau.

LE GUIDE COMPLET 203

Chapitre 6

Couleurs et images

de lenregistrer sous un nouveau nom, et ainsi de suite, jusqu disposer dune srie dimages lmentaires.

Figure 6.28 : Les diffrentes images lmentaires, chacune avec un clair (total ou fractionnel) diffrent. Il faut ensuite les assembler.

Pour ce faire, vous avez votre disposition un certain nombre doutils, qui relvent comme lhabitude des produits commerciaux ou des logiciels gratuits. Vous trouverez les adresses menant vers plusieurs dentre eux dans lAnnexe E, consacre aux ressources Web. Jprouve une lgre prfrence (irrationnelle ?) pour deux dentre eux, probablement due au fait que je les emploie depuis longtemps. Le premier, Microsoft Gif Animator version 1.0.0.101, assez ancien (il a t conu pour Windows 95/98), est quelque peu spartiate. Sa simplicit le rend toutefois particulirement simple employer. Lautre, Ulead Gif Animator 1.5, galement ancien (1997) est plus complexe. Il dispose en particulier doptions intressantes permettant de diminuer la taille du chier rsultant Il est frquent que je me serve des deux en combinaison, lun aprs lautre : vous comprendrez pourquoi un peu plus loin. Si Ulead Gif Animator 1.5 tait lpoque disponible gratuitement, les versions ultrieures sont payantes. Une version de dmonstration de Ulead Gif Animator 5 (49,95 $ pour la version complte), peut tre tlcharge ladresse www.ulead.com. Heureusement, Microsoft Gif Animator reste disponible gratuitement, notamment ladresse www.zdnet .fr/telecharger/windows/fiche/0,39021313,11010272s,00.htm Une fois Microsoft Gif Animator tlcharg et install, vous y importez successivement les diffrentes images lmentaires.

204 LE GUIDE COMPLET

Images animes

Chapitre 6

Figure 6.29 : Microsoft Gif Animator avec les images lmentaires charges

L commence le vrai travail : vous pouvez jouer sur les diffrents paramtres. Longlet Options doit rester en principe inchang. Longlet Animation galement, sauf en ce qui concerne le rglage Lopping : celui-ci dtermine si lanimation doit se rpter et, le cas chant, un certain nombre de fois ou indniment. Si loption Loop forever est la plus employe, dans certains cas une seule diffusion de lanimation est prfrable. Sur longlet Images, le rglage Duration est le plus important : il dnit le temps, exprim en centimes de secondes, pendant lequel est affiche limage lmentaire active. En cliquant dans la barre doutils sur Select All, vous pouvez appliquer un paramtre lensemble des images, puis lajuster par la suite pour chaque image. Il est possible de modier lordre des images mais aussi dajouter (ou de rpter) ou supprimer des images lmentaires. Dans tous les cas, un clic sur le bouton Preview permet dobtenir un aperu de limage.

Figure 6.30 : Aperu de lanimation dans Microsoft Gif Animator

LE GUIDE COMPLET 205

Chapitre 6

Couleurs et images

Une fois satisfait du rsultat, il ne vous reste qu enregistrer le chier de gif anim sous le nom et lemplacement de votre choix. Nous avons cependant signal quil tait important de chercher optimiser en la diminuant la taille de tout chier tlcharg pour une page Web. Cest l quintervient pour moi Ulead Gif Animator 1.5,

Figure 6.31 : Ulead Gif Animator

dont lutilitaire doptimisation des gifs anims est remarquable.

Figure 6.32 : Un autre cran de lAssistant Optimisation dUlead Gif Animator

206 LE GUIDE COMPLET

Images animes

Chapitre 6

Figure 6.33 : encore un autre

Figure 6.34 : La diversit des crans de lAssistant Optimisation dUlead Gif Animator

Figure 6.35 : Diffrents crans de lAssistant Optimisation dUlead Gif Animator

Remarquez que la taille du chier a t trs fortement diminue : passer de presque deux diximes de seconde un centime de seconde de temps de tlchargement noffre rien danodin. Soyons tout de mme honnte : cela est estim partir des temps de chargement de lpoque (soit laide dun modem 28,8 kbps). Si le rapport de grandeur reste le mme aujourdhui, avec une connexion 500 kbps (presque le minimum dune connexion cble ou ADSL), les temps de chargement sont respectivement 1 centime de seconde et 0,5 millime de seconde.

LE GUIDE COMPLET 207

Chapitre 6

Couleurs et images

Mme si la page comporte cent images animes, la diffrence est presque imperceptible pour lutilisateur. Il demeure toutefois que, par respect pour les utilisateurs disposant de connexions plus lentes tant que pour prserver la bande passante globale, mieux vaut toujours rduire la taille des chiers tlchargs. Il existe dautres produits similaires, dont A Smaller Gif, disponible ladresse www.peda.com/smaller/download.html

Figure 6.36 : Optimisation laide de A Smaller Gif

Une recherche devrait galement vous fournir des adresses doutils en ligne. Parmi les nombreux autres clbres utilitaires de cration de gifs anims, il convient galement de citer Animated Shop 3 (29 $, mais livr gratuitement en accompagnement de lexcellent Paint Shop Pro 9, 129 $ : www.jasc.com/products/paintshoppro/) et Gif gIf giF (www.peda.com /ggg/download.html). Nhsitez pas tlcharger les versions de dmonstration pour vous familiariser avec ces produits et ventuellement complter ou remplacer le produit gratuit de Microsoft.

208 LE GUIDE COMPLET

Images animes

Chapitre 6

Emploi dicnes de puces pour une liste dsordonne

Vous avez certainement dj remarqu de splendides listes, avec des puces colores gurant en tte de chaque membre de la liste. Il est facile den faire autant, mme si cela diverge quelque peu du standard HTML. Le recours une icne de puce rompt la structure de la liste, certains agents utilisateurs risquant alors de ne pas la reconnatre comme telle. Au lieu demployer une liste (lment UL), placez simplement un lment saut de ligne (BR) aprs chaque membre de la liste. Au dbut de la ligne suivante, insrez votre icne de puce (statique ou anime), par exemple comme suit :
<IMG src="images/puce.gif" height=5 width=5 alt="*">

Avec la majorit des navigateurs, vous ne verrez aucune diffrence visuelle avec une vraie liste (voir les gures suivantes, prsentant respectivement une telle liste et le code source correspondant). Mme si cela est visuellement attrayant, gardez en mmoire quil sagit dune atteinte la structure du document

Figure 6.37 : Exemple de liste recourant des icnes de puces

Figure 6.38 : Fragment du code source de la page prcdente

LE GUIDE COMPLET 209

Chapitre 6

Couleurs et images

6.4. Image cliquable

Une image cliquable permet de spcier des rgions (ou un objet) dans limage et daffecter une action particulire chacune de ces rgions (par exemple, ouvrir une nouvelle page, lancer un programme, etc.). Un clic sur la rgion (une activation) excute laction. Pour crer une image cliquable, vous associez un objet (ici une image) une spcication de zones gomtriques sensibles sur celui-ci. Les images cliquables sont de deux types : ct client et ct serveur.
j Ct client

: elles sont entirement gres par lagent utilisateur de lutilisateur. En raison de labsence dappel au serveur pour lexcution ct client, elles sexcutent plus rapidement. Il est de plus possible de les tester en local sur son ordinateur personnel. Lorsque lutilisateur active une rgion dune image cliquable ct client avec une souris, lagent utilisateur interprte les coordonnes du pixel. Lagent utilisateur slectionne le lien spci pour la rgion active et le suit. Ct serveur : quand lutilisateur active une rgion dune image cliquable ct serveur, les coordonnes du pixel du clic sont envoyes lagent ct serveur, spci par lattribut href de llment A. Lagent ct serveur interprte ces coordonnes et effectue une certaine action.

Les images cliquables ct client sont prfres celles ct serveur pour au moins deux raisons : elles sont accessibles aux personnes navigant avec des agents utilisateurs non graphiques et elles renvoient une rponse immdiate quant la prsence du pointeur sur une rgion active. Nous allons examiner tour tour plus en dtail ces deux types.

Images cliquables ct client : lments MAP et AREA

Les images cliquables ct client ont recours deux lments, MAP et AREA. Une image cliquable ct client est spcie laide de llment MAP. Elle est associe un autre lment (ici IMG, mais ce pourrait tre dautres objets, comme nous le verrons plus tard) via lattribut usemap de celui-ci.
210 LE GUIDE COMPLET

Image cliquable

Chapitre 6

Pour voir comment mettre en uvre une image cliquable, nous allons dabord rassembler le matriel ncessaire : en loccurrence, une simple image de fond de carte, rcupre sur lexcellent site de Sciences-Po.

1 Ouvrez

votre

navigateur,

puis

naviguez

jusqu

lURI

www.sciences-po.fr/cartographie/ .

Figure 6.39 : Site du dpartement Cartographie de Sciences-Po

2 Slectionnez Fonds de cartes, puis dans la page qui saffiche descendez jusqu la section Etats et slectionnez la carte France (rgions).

Figure 6.40 : Page Fonds de cartes

LE GUIDE COMPLET 211

Chapitre 6

Couleurs et images

Effectuez sur ce chier un clic avec le bouton droit de la souris et choisissez Enregistrer sous. Comme vous laviez fait prcdemment, naviguez jusqu votre dossier MonSite/Images pour y enregistrer le chier (nomm franregs.gif). Cest fait : vous disposez dune image prte tre transforme en image cliquable. Poursuivons en crant la page Web qui va lemployer.

3 Ouvrez le Bloc-Notes, puis ouvrez le chier region1_6_1.html. Il va nous servir de squelette pour crer une nouvelle page. 4 Modiez dabord le contenu de la balise TITLE :
<TITLE>R&eacute;gions fran&ccedil;aises">

5 Supprimez tout le contenu de llment BODY. 6 Entrez dans llment BODY un nouveau titre de niveau 1 :
<H1 align="center">Carte de France avec r&eacute;gions</H1>

7 Placez-vous en dessous et crez comme suit un lment IMG inclus dans un lment P :
<P><IMG src="Images/franregs.gif" usemap="#freg" alt="Carte de France"> </P>

Remarquez lajout dans la balise de llment IMG dun nouvel attribut, usemap. Celui-ci signale que limage spcie par lURI valeur de lattribut src va tre une image cliquable ct client, dnie par un lment MAP. La valeur de lattribut usemap de llment IMG doit correspondre avec celle de lattribut name de llment MAP associ.

8 Ajoutez ensuite dans llment P, aprs llment IMG, un lment MAP associ pour le moment vide :
<MAP name="freg"> </MAP>

La valeur de lattribut name de llment MAP correspond bien celle de lattribut usemap de llment IMG.

9 Par scurit, enregistrez votre chier sous le nom FranceReg.html.

Le second type dlment capital pour une image cliquable est llment
AREA. Cet lment possde deux attributs : lattribut shape, qui spcie la forme dune rgion, et lattribut coords, qui spcie la position et la

forme de la rgion lcran.

212 LE GUIDE COMPLET

Image cliquable

Chapitre 6

10 Ajoutez ce qui suit dans llment MAP :

<MAP name=freg> <AREA shape="rect" coords="161,263,204,323" href="Poitou-Charentes.html" alt = "R&eacute;gion Poitou-Charentes" title="Poitou-Charentes"> <AREA shape="circle" coords="274,167,21" href="Ile de France.html" 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="Centre.html" alt="R&eacute;gion Centre" title="Centre"> </MAP>

11 Enregistrez nouveau votre chier, puis examinez-le dans votre navigateur.

Remarquez que, lorsque vous dplacez le pointeur sur une des zones dnies, celui-ci se transforme en main, indiquant la prsence dun lien. En outre, si vous le laissez un peu plus longtemps sur la zone, la valeur de lattribut title saffiche.

Figure 6.41 : Aspect de limage cliquable

Si vous cliquez sur une des zones, vous obtenez un message derreur : les pages secondaires spcies par les valeurs des attributs href nexistent pas !

LE GUIDE COMPLET 213

Chapitre 6

Couleurs et images

Lattribut shape accepte quatre valeurs possibles, dont trois sont employes dans lexemple prcdent :
j j j j

default spcie la rgion entire. rect dnit une rgion rectangulaire. circle dnit une rgion circulaire. poly dnit une rgion polygonale.

Le nombre et lordre des valeurs de lattribut coords dpendent de la valeur de lattribut shape, comme le montre le tableau suivant. Il sagit dune liste de valeurs longueur, spares par une virgule.
Tableau 6.2 : Valeurs des attributs shape et coords dun lment AREA

Valeur de lattribut

Formes

Coordonnes (coords) ncessaires

shape default Rect circle polygon

Toute limage Rectangle Cercle Polygone Nant En haut gauche (coordonnes x et y), en bas droite (coordonnes x et y) Centre (coordonnes x et y), rayon Chaque sommet (coordonnes x et y). le dernier couple de coordonnes devrait tre identique au premier pour "fermer" le polygone.

Je suppose que vous restez dubitatif quant aux coordonnes de lexemple prcdent Comment est-il possible de les dterminer simplement ? Deux solutions soffrent vous.

Cration manuelle dune image cliquable

La premire mthode est la suivante :

1 Ouvrez votre programme de dessin habituel et chargez limage concerne (ici, franregs.gif). 2 Placez votre curseur lemplacement approximatif du coin suprieur dun rectangle, lemplacement de la rgion PoitouCharentes. Pratiquement tous les programmes de dessin affichent quelque part les coordonnes actuelles du curseur.

214 LE GUIDE COMPLET

Image cliquable
2

Chapitre 6

Figure 6.42 : Les coordonnes de la position actuelle du curseur (ici encadres dun ovale) dans le logiciel de dessin Microsoft Paint

3 Notez ces coordonnes, puis placez-vous sur le coin infrieur droit du rectangle pour la rgion Poitou-Charentes et notez nouveau les coordonnes. Vous disposez des quatre paramtres ncessaires pour la dnition dune forme de type rectangle, que vous navez plus qu reporter dans le code :
<AREA shape="rect" coords="161,263,204,323" href="Poitou-Charentes.html" alt="R&eacute;gion Poitou-Charentes" title="Poitou-Charentes">

Remarquez que vous nobtiendrez pas forcment tout fait les mmes coordonnes : quelques pixels de diffrence ne sont pas un problme, lindication visuelle procure lutilisateur tant essentiellement la modication de la forme du curseur (indiquant un lien) ainsi quventuellement lapparition de linfobulle dnie par lattribut title.

4 Pour le cercle, placez-vous dans la rgion le-de-France au centre du cercle, et notez ses coordonnes. Dplacez-vous
LE GUIDE COMPLET 215

Chapitre 6

Couleurs et images

horizontalement ou verticalement pour dnir le rayon souhait et notez la diffrence entre coordonnes : cest le rayon. Vous disposez des trois paramtres ncessaires pour la dnition dune forme de type cercle, que vous navez plus qu reporter dans le code :
<AREA shape="circle" coords="274,167,21" href="Ile de France.html" alt="R&eacute;gion Ile de France" title="Ile de France">

5 La dmarche est un peu plus laborieuse pour un polygone : placez-vous sur un des angles de la rgion Centre et notez ses coordonnes. Dplacez-vous successivement sur les autres sommets du polygone souhait et notez leurs coordonnes. Lorsque vous en avez termin, reportez toutes ces coordonnes 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="Centre.html" alt="R&eacute;gion Centre" title="Centre">

Remarquez que le dernier sommet doit tre identique au premier. Si toutefois vous ne le spciez pas, les agents utilisateurs devraient tre en mesure de le gnrer deux-mmes.
Le rayon

Quand la valeur du rayon est un pourcentage, lagent utilisateur devrait calculer le rayon nal par rapport la hauteur et la largeur de lobjet associ. Le rayon devrait tre la plus petite valeur des deux.

Cration dune image cliquable laide dun diteur

La deuxime mthode consiste recourir un logiciel de cration dimages cliquables. Il en existe un certain nombre, mais nous vous recommandons lincomparable logiciel de dessin dOpen Source gratuit, The Gimp, qui dispose dun tel utilitaire intgr.

1 Si vous nen disposez pas dj, tlchargez The Gimp depuis http://gimp-win.sourceforge.net/ et installez-le sur votre ordinateur. Cest 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 lenvironnement dexcution GTK +2 : noubliez pas de le tlcharger et de linstaller galement. 2 Lancez The Gimp et chargez limage Franceregs.gif. 3 Choisissez Filtres > Web > Image cliquable (imagemap).

Figure 6.43 : Cration dune image cliquable laide de The Gimp

4 Choisissez Rectangle dans le menu de gauche, puis dessinez un rectangle sur la rgion Poitou-Charentes .

Figure 6.44 : Utilisez le rectangle

5 Renseignez les lments ncessaires dans la fentre Paramtres de la zone qui souvre, puis cliquez sur OK.

LE GUIDE COMPLET 217

Chapitre 6

Couleurs et images

Figure 6.45 : Fentre Paramtres de la zone

6 Choisissez Cercle dans le menu de gauche, puis dessinez un cercle dans la rgion le-de-France (attention : The Gimp trace un cercle en spciant le centre, puis en dnissant le rayon). Renseignez les lments ncessaires dans la fentre qui souvre, puis cliquez sur OK. 7 Choisissez Polygone dans le menu de gauche, puis dessinez un polygone dans la rgion Centre. Renseignez les lments ncessaires dans la fentre qui souvre, puis cliquez sur OK. La fentre de The Gimp devrait afficher quelque chose de similaire la gure suivante.

Figure 6.46 : Image cliquable cre laide de The Gimp

218 LE GUIDE COMPLET

Image cliquable

Chapitre 6

Remarquez comme il est facile de dnir une rgion polygonale laide dun tel outil !

8 Choissez dans le menu Afficher > Source. Vous voyez le code source de limage ainsi cre safficher. Vous pouvez copier-coller ce code (prsent en intgralit dans le listing suivant) dans votre chier, pour y ajouter dautres attributs, comme lattribut title.

Figure 6.47 : Affichage du code source de limage cliquable cre par The Gimp

Listing 6-1 : Code source de limage cliquable cre par The Gimp
<img src="franregs.gif" 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="Rgion Poitou-Charentes" href="Poitou-Charentes.html" /> <area shape="circle" coords="276,165,20" alt="Rgion Ile de France" href="Ile de France.html" /> <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="Rgion Centre" href="Centre.html" /> </map>

En examinant ce code et en le comparant celui cr manuellement laide de Paint, vous voyez que les coordonnes diffrent lgrement.

LE GUIDE COMPLET 219

Chapitre 6

Couleurs et images

Comme nous lavons dj soulign, cela ne prsente pas la moindre importance. Remarquez galement que le polygone est beaucoup plus complexe : nous avons suivi presque exactement les frontires de la rgion Centre. Par ailleurs, The Gimp a ajout quelques commentaires, quil est de bon ton de conserver, tandis que son balisage respecte la spcication XHTML (balises <IMG /> et <AREA />).

Recouvrement de zones
Si deux rgions dnies ou plus se chevauchent, le premier lment qui dnit une rgion dans le document est prioritaire. Il est ainsi possible de spcier des ancres pour crer des zones inactives dans une image cliquable. Dans lexemple ci-dessous, la premire ancre spcie une petite rgion circulaire dpourvue de lien, tandis que la seconde spcie une rgion circulaire de taille suprieure de mme centre que la prcdente. La combinaison des deux cre un anneau cliquable dont le centre est inactif et le bord actif. Lordre des dnitions 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 lattribut nohref de llment AREA pour dclarer que la rgion ne possde pas de lien associ :
<A shape="circle" coords="100,200,50" nohref title="Lien inactif"</A>

Vous pourriez souhaiter doter la totalit de limage dun lien. Cela est possible en ajoutant un lment AREA dont lattribut shape possde comme valeur default. Compte tenu de ce qui est expos plus haut, ce dernier lment doit se trouver juste avant la balise de fermeture </MAP>, de faon que tous les lments AREA prcdemment dnis soient prioritaires. Le code serait ici par exemple :
<AREA shape="default" HREF="francereg.html" alt="Carte de France par rgions">

Les images cliquables sont largement employes pour proposer des barres de navigation ressemblant tout sauf une barre. Le recours un graphisme plutt qu du texte permet demployer des polices de caractres exotiques . Cest une mthode largement employe sur les sites destins 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, llment MAP peut tre associ plusieurs lments outre IMG : OBJECT et INPUT. Il est associ un lment via lattribut usemap de celui-ci. Il peut semployer sans image associe pour des mcanismes de navigation gnraux. Le recours aux lments AREA nest toutefois pas la seule possibilit demploi de llment MAP. Le modle de contenu de celui-ci permet en effet dy placer :
j

Un ou plusieurs lments AREA. Ces lments, dpourvus de contenu, spcient les rgions gomtriques de limage cliquable et les liens qui sont associs chaque rgion. Les agents utilisateurs ne restituent pas gnral les lments AREA : mieux vaut fournir un texte de remplacement pour chaque lment AREA laide de lattribut alt. Un contenu de type bloc compos entre autres dlments A spciant les rgions gomtriques de limage cliquable et le lien associ chaque rgion. Les agents utilisateurs devraient restituer le contenu de type bloc dun lment MAP : cette mthode sert crer des documents plus accessibles. Un contenu mixte dlments AREA et dlments A. En ce cas, les agents utilisateurs doivent ignorer les lments AREA.

LE GUIDE COMPLET 221

Chapitre 6

Couleurs et images

En mlangeant les contenus, les agents utilisateurs anciens prendront en charge les cartographies spcies par les lments AREA, tandis que les agents utilisateurs rcents tireront prot des contenus de type bloc plus toffs. Pensez toujours offrir des alternatives textuelles aux images cliquables, au cas o les graphismes ne seraient pas disponibles ou les utilisateurs ne pourraient y accder. Les agents utilisateurs peuvent employer le texte de lattribut alt pour crer des liens textuels la place des images cliquables graphiques. De tels liens peuvent tre activs de diverses faons (clavier, commande vocale, etc.). Sachez enn que llment MAP ne prsente pas de compatibilit descendante avec les agents utilisateurs HTML 2.0 : il sera ignor par de tels agents utilisateurs.

Images cliquables ct serveur

Plutt quune image ct client, il est possible de crer une image cliquable ct serveur. Les images cliquables ct serveur peuvent se rvler intressantes lorsque limage cliquable savre trop complique raliser ct client, mais font peser un poids supplmentaire sur le serveur, ce qui peut tre diversement apprci. Lorsquune image cliquable ct serveur est dnie pour un lment IMG, celui-ci doit se trouver dans un lment A et possder lattribut boolen ismap.
<P><A href="http://www.acme.com/cgi-bin/test"> <IMG src="jeu.gif" ismap alt="Cible"></A>

La diffrence fondamentale avec une image cliquable ct client est que la dnition des rgions (effectue dans le cas prcdent avec llment MAP) est ici effectue par un script en ASCII situ sur le serveur. Le contenu du chier de script test.map cit dans lexemple ci-dessus pourrait tre quelque chose comme ceci :
default ../index.html 0, 0, 100, 460 rect ../index.html 0, 1, 100, 65 rect ../service1.html 0, 72, 100, 142 rect ../service2.html 0, 146, 100, 213 rect ../formation.html 0, 219, 100, 283 rect ../profils.html 0, 288, 100, 351 rect ../references.html 0, 355, 100, 403 rect ../contact.html 0, 407, 100, 453

222 LE GUIDE COMPLET

Image cliquable

Chapitre 6

Les images cliquables ct serveur ont t dveloppes lorigine par deux organismes, le NCSA et le CERN. Malgr des efforts certains de standardisation, il subsiste quelques petites diffrences entre eux, ainsi quau sein de leurs mises en uvre. Vous devez vrier le standard employ par le serveur Web avant de crer un script dimage cliquable ct serveur. Lexemple prcdent est au format NCSA, mais voici la mme chose au format CERN :
rect (0,1) (100,65) ../index.html rect (0,72) (100,142) ../service1.html rect (0,146) (100,213) ../service2.html rect (0,219) (100,283) ../formation.html rect (0,288) (100,351) ../profilse.html rect (0,355) (100,403) ../references.html rect (0,407) (100,453) ../contact.html default ../index.html

Lorsque lutilisateur active un lien en cliquant sur limage, les cordonnes de ce clic lcran sont directement transmises au serveur qui hberge le script. Les coordonnes lcran sont exprimes par des valeurs en pixels dcran relatives limage. Pour transmettre au serveur le point cliqu, lagent utilisateur drive un nouvel URI partir de lURI spci par lattribut href de llment A, en lui rajoutant la n le caractre ? suivi des coordonnes x et y , spares par une virgule. Le lien est alors suivi en utilisant le nouvel URI. Par exemple, dans lexemple donn, si lutilisateur clique au point x=10, y=27 , lURI driv sera http://www.acme .com/cgibin/test?10,27 . Les agents utilisateurs ne disposant daucun moyen de slectionner des coordonnes spciques (par exemple, un agent utilisateur non graphique qui sappuie sur une saisie au clavier, un agent utilisateur vocal, etc.), doivent envoyer les coordonnes 0,0 au serveur lors de lactivation du lien. En conclusion, mieux vaut ne pas crer dimages cliquables ct serveur : celles-ci sont compltement 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 ct 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 accder en cliquant sur limage cliquable.

LE GUIDE COMPLET 223

Chapitre 6

Couleurs et images

Une image cliquable ct serveur ne peut tre dnie que pour des lments IMG et INPUT, ce dernier devant alors tre de type image . Pour terminer, si llment IMG (dont les attributs sont rsums dans le tableau suivant) reste prsent en HTML 4.01, il y est toutefois dconseill en raison de ses limites : en effet, il ne rpond pas au problme plus gnral de linclusion des types de mdias nouveaux ou venir et entranent des problmes daccessibilit. Il convient dsormais de lui prfrer llment OBJECT.
Tableau 6.3 : Attributs de llment IMG

Attribut

Valeur(s) URI

Effet Fournit lemplacement de limage. Cet attribut est obligatoire. Place limage respectivement au centre, droite ou gauche. Peut autoriser le droulement du texte autour du graphisme. Taille du cadre de limage, exprime en pixels (0 pour pas de cadre). Procure une alternative textuelle au graphisme. Signale que cette image est une image cliquable ct client, dnie par llment MAP associ. Signale que cette image est une image cliquable ct serveur.

src align

center, left, right

border alt usemap

Nombre Texte de description Valeur de lattribut name dun lment MAP associ Nant

ismap

6.5. Inclusion gnrique dimages : lment OBJECT

Pour inclure des images, les auteurs devraient dsormais privilgier llment OBJECT. Il sagit dun lment de type ligne, devant obligatoirement possder une balise douverture et une balise de fermeture, contrairement IMG qui ne possdait pas de balise de fermeture. En effet, la plupart des agents utilisateurs possdent des mcanismes intgrs pour la restitution des types de donnes communs, tels que le

224 LE GUIDE COMPLET

Inclusion gnrique dimages : lment OBJECT

Chapitre 6

texte, les images GIF, les couleurs, les polices et une poigne dlments graphiques. Pour restituer les types de donnes quils ne reconnaissent pas nativement, les agents utilisateurs lancent en gnral des applications externes. Llment OBJECT permet aux auteurs de mieux contrler si les donnes doivent tre restitues de manire externe ou par un certain programme, spci par lauteur, qui restitue ces donnes au sein de lagent utilisateur. Voici comment employer llment OBJECT pour inclure une image.

1 Ouvrez le Bloc-Notes, puis ouvrez le chier region1_6_1.html. 2 Modiez dabord la version du document :
<META name ="version" content="1.6.2">

3 Remplacez llment IMG par ce qui suit :

<OBJECT data="Images/coucher de soleil.jpg" type="image/gif" width="267" height="200" title="Un coucher de soleil sur le lac de Linciel"> </OBJECT>

4 Enregistrez votre chier sous le nom region1_6_2.html, puis examinez-le dans votre navigateur.

Figure 6.49 : Inclusion dimage laide de llment OBJECT

Visuellement, le recours llment OBJECT plutt qu llment IMG ne produit aucune diffrence (reportez-vous la gure de la page 242 pour comparer). Revenez au code pour lexaminer nouveau. Le nouvel lment possde deux nouveaux attributs :
LE GUIDE COMPLET 225

Chapitre 6
j

Couleurs et images

Lattribut data de llment OBJECT remplace llment src de llment IMG : cest un URI, pouvant tre interprt relativement la valeur de lattribut optionnel codebase et qui lest par dfaut relativement lURI de base du document. Lattribut type spcie le type des donnes spcies par lURI de lattribut data. Cet attribut facultatif est toutefois recommand : il vite le chargement par lagent utilisateur dinformations dont il ne peut reconnatre le type de contenu. Si la valeur de cet attribut diffre de len-tte HTTP Content-Type renvoy par le serveur quand lobjet est renvoy, cest len-tte HTTP Content-Type qui a priorit.

Remarquez galement que nous avons supprim lattribut alt et sa valeur. En effet, une des caractristiques les plus intressantes de llment OBJECT est quil fonctionne un peu comme la classique instruction sisinon (if else). Autrement dit, il peut possder un contenu interprt uniquement sil est impossible dinterprter le contenu de sa balise douverture. Pour disposer dun texte alternatif affich au cas o lagent utilisateur ne peut interprter limage, procdez comme suit :

5 Modiez llment OBJECT en insrant le texte ci-dessous juste avant la balise de fermeture </OBJECT> :
<OBJECT data="Images/coucher de soleil.jpg" type="image/gif" width="267" height="200" title="Un coucher de soleil sur le lac de Linciel"> <!Si limage ne peut tre affiche, afficher le texte --> Coucher de soleil sur le lac de Linciel </OBJECT>

6 Enregistrez nouveau votre chier, sous le mme nom.

En lexaminant dans votre navigateur, vous ne constaterez aucune diffrence. Cette syntaxe semble ntre quune nuance, mais elle prend toutefois tout son sens lorsque vous savez quil est possible dimbriquer des lments OBJECT, ainsi que demployer ceux-ci pour spcier bien dautres types de contenus, dont des scripts. Prenons un exemple.

1 Ouvrez le chier FranceReg2.html. 2 Modiez dabord la version du document :

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

226 LE GUIDE COMPLET

Inclusion gnrique dimages : lment OBJECT

Chapitre 6

3 Modiez comme suit le contenu de la premire cellule du tableau. Attention, veillez bien refermer les lments OBJECT que vous allez ajouter la n du fragment du code :
<TD rowspan="3"> <!-- Essayer dabord un applet en Python --> <OBJECT title="Coucher de soleil sur le lac de Linciel" classid="Linciel.py"> <!-- Sinon, essayer lanimation MNG --> <OBJECT data="Linciel.mng" type="application/mng"> <!-- Sinon, essayer limage JPEG --> <OBJECT data="Images/coucher de soleil.jpg" 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 chier sous le nom region1_6_3.html, puis examinez-le dans votre navigateur.

Figure 6.50 : Possibilits alternatives laide de llment OBJECT

Le navigateur tant pour le moment incapable dinterprter un script Python ou une animation MNG (souvenez-vous : cest le format danimation driv de PNG), il affiche la premire possibilit reconnue, ici limage JPEG. Remarquez que Firefox signale par une barre de message que cette page ncessite des modules complmentaires (plug-

LE GUIDE COMPLET 227

Chapitre 6

Couleurs et images

ins) et propose dessayer de les installer. Nous reviendrons dans le

Chapitre 10, consacr aux scripts, sur lemploi de llment OBJECT avec les scripts. Vous voyez ici une partie de la souplesse fantastique offerte par cet lment. Le reste ne dpend que de votre imagination. Bien videmment, cet lment permet galement linsertion dimages cliquables, ct client ou ct serveur. Commenons par une image cliquable ct client.

1 Revenez au chier region1_6_2.html. 2 Modiez dabord la version du document :

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

3 Modiez le code comme suit. Attention, noubliez pas de refermer llment OBJECT aprs la fermeture de llment MAP !
<P> <OBJECT data="Images/franregs.gif" datatype="image/GIF" usemap="#freg"> <MAP name="freg"> <P>Quelques prcisions : <A href="Poitou-Charentes.html" shape="rect" coords="161,263,204,323" title="Poitou-Charentes"> R&eacute;gion Poitou-Charentes</A> <A href="Ile de France.html" shape="circle" coords="274,167,21" title="Ile de France"> R&eacute;gion Ile de France</A> <A href="Centre.html" 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 llment MAP est dissimul dans le contenu de llment OBJECT. Nous ne voulons pas restituer le contenu de llment MAP lorsque llment OBJECT est restitu. Il ne le sera que si llment OBJECT ne peut ltre.

4 Enregistrez votre chier sous le nom FranceReg3.html, puis examinez-le dans votre navigateur (voir Figure 6.51).

228 LE GUIDE COMPLET

Inclusion gnrique dimages : lment OBJECT

Chapitre 6

Cette gure ne diffre en apparence en rien de la version IMG (reportezvous la gure de la page 242). Nous allons simuler un agent utilisateur incapable dinterprter limage, en modiant le nom et le type de limage :

Figure 6.51 : Image cliquable laide de llment OBJECT

5 Modiez comme suit llment OBJECT :

<OBJECT data="Images/franregs.mng" datatype="image/MNG" usemap="#freg">

6 Enregistrez votre chier sous le nom FranceReg3err.html, puis examinez-le dans votre navigateur.

Figure 6.52 : Alternative propose grce un lment OBJECT

LE GUIDE COMPLET 229

Chapitre 6

Couleurs et images

Limage ne pouvant tre affiche, vous voyez la place un menu textuel. Vous pourriez souhaiter que limage cliquable soit restitue mme si lagent utilisateur est incapable de restituer llment OBJECT. Par exemple, en associant une image cliquable un lment OBJECT et en plaant une barre de navigation textuelle en bas de page. Pour cela, placez llment MAP en dehors de llment OBJECT :
Listing 6-2 : Elment MAP restitu
<HTML> ... <BODY> <H1 align="center">Carte de France avec rgions</H1> <P> <OBJECT data="Images/franregs.mng" datatype="image/MNG" usemap="#freg"> </OBJECT> </P> ... reste du corps <MAP name="freg"> <P>Quelques prcisions : <A href="Poitou-Charentes.html" shape="rect" coords="161,263,204,323" title="Poitou-Charentes"> R&eacute;gion Poitou-Charentes</A> <A href="Ile de France.html" shape="circle" coords="274,167,21" title="Ile de France"> R&eacute;gion Ile de France</A> <A href="Centre.html" 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 gure suivante montre laspect de cette page dans un navigateur (voir Figure 6.53). Comme avec llment IMG, vous pouvez crer une image cliquable en employant des lments AREA.

1 Ouvrez le chier FranceReg.html. 2 Modiez dabord la version du document :

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

230 LE GUIDE COMPLET

Inclusion gnrique dimages : lment OBJECT

Chapitre 6

Figure 6.53 : Affichage simultan de limage cliquable et de liens textuels

3 Remplacez llment IMG par un lment OBJECT, comme suit :

<P> <OBJECT data="Images/franregs.gif" datatype="image/GIF" usemap="#freg"> <P> Carte des France avec r&eacute;gions </OBJECT> </P>

4 Enregistrez votre chier sous le nom FranceReg4.html, puis examinez-le dans votre navigateur (voir Figure 6.54).
Une fois encore, cette gure ne diffre apparemment en rien de la version IMG (reportez-vous la gure de la page image06_34 ). La prsence de lattribut usemap sur un lment OBJECT implique que lobjet inclus soit une image cliquable ct client associe. En ce cas, lagent utilisateur peut produire une interaction utilisateur avec cet lment OBJECT, uniquement en fonction de limage cliquable ct client. Ceci permet certains agents utilisateurs comme les navigateurs vocaux ou les robots dinteragir avec llment OBJECT sans devoir le traiter. Lagent utilisateur peut mme choisir de ne pas ramener (ou traiter) lobjet. Lorsquun lment OBJECT possde une image cliquable associe, vous ne devez pas supposer que lobjet sera trait par tous les agents utilisateurs.
LE GUIDE COMPLET 231

Chapitre 6

Couleurs et images

Figure 6.54 : Image cliquable laide de llment OBJECT et dlments AREA

Llment OBJECT peut aussi apparatre comme contenu de llment HEAD. Les agents utilisateurs ne restituant gnralement pas les lments placs dans la section HEAD, veillez ce quaucun lment OBJECT situ dans la section HEAD ne spcie un contenu qui peut tre restitu. Le Chapitre 7, traitant des jeux dencadrement, propose un exemple dinclusion dlment OBJECT dans llment HEAD. De mme, le Chapitre 9, traitant des formulaires, procure quelques prcisions sur lemploi dlments OBJECT dans les formulaires.
Tableau 6.4 : Principaux attributs de llment OBJECT relatifs aux images

Attribut

Valeur(s) Uri

Effet Spcie la localisation des donnes de lobjet, par exemple les donnes dimages pour les objets dnissant des images ou, plus gnralement, la forme srialise dun objet qui peut tre utilise pour recrer cet objet. Facultatif. Spcie le type de contenu des donnes spcies par lattribut data. Signale que lobjet associ est une image cliquable.

data

type usemap

type-de-contenu Nant

232 LE GUIDE COMPLET

Inclusion gnrique dimages : lment OBJECT

Tableau 6.5 : Attributs de llment OBJECT

Chapitre 6

Attribut

Valeur(s) Uri

Effet Spcier la localisation de limplmentation dun objet via un URI. Peut tre employ en combinaison ou en remplacement de lattribut data, selon le type de lobjet impliqu. Spcie le chemin de base qui sert la rsolution des URI relatifs spcis par les attributs classid, data et archive. Quand il est absent, sa valeur par dfaut correspond lURI de base du document courant. Spcie le type de contenu des donnes attendues lors du chargement de lobjet spci par lattribut classid. Cet attribut est optionnel, mais recommand lorsque lattribut classid est spci. Il permet en effet lagent utilisateur dviter le chargement des informations dont les types ne sont pas reconnus. Quand il est absent, sa valeur par dfaut est celle de lattribut type. Spcie la localisation des donnes de lobjet, par exemple les donnes dimages pour les objets dnissant des images, ou plus gnralement, la forme srialise dun objet qui peut tre utilise pour recrer cet objet. Facultatif. Spcie le type de contenu des donnes spcies par lattribut data. Spcie une liste dURI, spars par des espaces, des archives contenant les ressources concernant lobjet. Cette liste peut inclure les ressources spcies par les attributs classid et data. Le prchargement des archives diminue gnralement le temps de chargement des objets. Les archives spcies comme URI relatifs devraient tre interprtes relativement lattribut codebase. Quand il est prsent, la dnition de llment OBJECT courant nest quune dclaration. Lobjet doit tre instanci par la suite via une dnition OBJECT qui se rfre cette dclaration.

classid

codebase

Uri

codetype

type-de-contenu

data

Uri

type archive

type-de-contenu liste-uri

declare

LE GUIDE COMPLET 233

Chapitre 6

Couleurs et images
Tableau 6.5 : Attributs de llment OBJECT

Attribut

Valeur(s) texte

Effet Spcie le message que lagent utilisateur peut restituer pendant le chargement de limplmentation et des donnes de lobjet.

standby

Diminution du temps de tlchargement

Comme cela a dj t soulign, le temps de chargement dune page est proportionnel au nombre et la taille des graphismes employs sur cette page. Lemploi des illustrations doit donc tre judicieusement mesur. Heureusement, plusieurs mthodes permettent damliorer le temps de chargement dune page, mme si elle contient des illustrations.

Rduction de la taille physique des images

La premire mthode consiste employer des images de plus faible taille, ajustes la rsolution envisage pour la page Web. Une erreur frquente consiste employer des chiers image tels quels et modier la taille daffichage lcran. Cette erreur devient de plus en plus frquente avec le dveloppement de la photo numrique, dont le pouvoir de rsolution augmente danne en anne, mais elle se rencontre aussi lors de lemploi de documents numriss laide dun scanner. Il y a parfois de quoi se perdre dans la jungle des units de mesure employes par les dispositifs dacquisition dimages (scanneurs, appareils photo et camras numriques) et de restitution (imprimantes, tables traantes, asheuses). Le terme le plus employ est celui de dpi (dots per inch) : cest 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 rsolution dimpression de 600 dpi est un minimum, une rsolution de 2 400 dpi noffrant plus rien dexceptionnel. Sachez cependant que les limites sont proches : les professionels de limprimerie ne dpassent que rarement 3 600 dpi pour des reproductions dart, en employant des papiers spciaux fort onreux. Une rsolution suprieure napporte rien et peut mme dgrader le rendu nal.

234 LE GUIDE COMPLET

Inclusion gnrique dimages : lment OBJECT

Chapitre 6

Les imprimantes noir et blanc (comme les imprimantes laser ordinaires ) fonctionnent en tons de gris : chaque pixel de limage de dpart est traduit en carr de 16 pixels (4 4) an de pouvoir afficher des teintes diffrentes. La rsolution est donc en fait divise par 4 par rapport un dessin au trait (bien quelle puisse tre augmente de faon logicielle par limprimante). Cette organisation se faisant horizontalement, lappellation correcte devrait tre lpi (ligne par pouce) au lieu de dpi. En revanche, les appareils photo numriques parlent le plus souvent en nombre total de pixels (4, 5 ou 6 millions pour les modles les plus perfectionns), tandis que les crans mlangent la notion de diagonale de lcran (15, 17 ou 19 pouces) et de rsolution (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, lcran affich est gnralement plus petit que la taille physique de lcran !
Appareils photo numriques : 4 millions de pixels, cest beaucoup !

Oui et non Grossirement et traditionnellement, une photo prsente un rapport largeur/hauteur de 3/2 (en mode paysage, cest--dire horizontalement. Cest linverse en mode portrait). Autrement dit, vous avez :
rsolution = 3 l x 2 l

Do
l = (rsolution/6)

Avec une rsolution 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 dune rsolution de 4 millions de pixels possde donc une largeur denviron 2 449 pixels et une hauteur de 1 633 pixels. Autrement dit, imprime avec une imprimante atteignant une rsolution de 1 200 points par pouce, pour conserver cette rsolution, la photo obtenue mesurerait environ 2 pouces par 1,4 pouces, soit 5 cm par 3,5 cm Pas trs grand ! En revanche, si vous imprimez avec une rsolution de 350 dpi (par exemple), la photo atteindra 17,7 12 cm : cest plus raisonnable. Comprenez bien toutefois que si, partant de cette photo de 4 millions de pixels place dans un logiciel et ayant dni une taille dimpression de 17,7 12 cm, mme en slectionnant une rsolution dimpression de 1 200 dpi, la vraie rsolution de la photo imprime (pas celle de limpression elle-mme) ne sera que de 350 dpi ! Les points supplmentaires ont t obtenus par extrapolation

LE GUIDE COMPLET 235

Chapitre 6

Couleurs et images

Mieux vaut donc convertir cette rsolution thorique en nombre de points : si vous considrez une photo normale de format 24 18 cm, soit 9,6 7,2 pouces, avec une rsolution 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 lappareil photo numrique Le problme est toutefois totalement diffrent si vous affichez votre photo numrique lcran : avec la rsolution actuelle la plus frquente de 1 024 768, une telle photo occuperait une supercie quivalente presque 5 crans (presque 2,4 crans en largeur et un peu plus de 2 en hauteur). Elle est donc totalement inexploitable en ltat sur une page Web.
Tableau 6.6 : Rsolution et part de march des crans mondiaux en 2006

(source : OneStatjuin2006) Rsolution Nombre total de points Rsolution en dpi (selon la taille de lcran, de 15 19) 73 81 dpi 91 108 dpi 57 62 dpi 82 91 dpi Part de march 2006

1 024 768 1 280 1 024 800 600 1 152 864

786 432 1 310 720 480 000 949 248

56,1 % 15,8 % 12,0 % 54,0 %

Le problme est similaire lorsque vous voulez placer sur votre site une image provenant dun scanneur plat. Si la numrisation est effectue dans le but dune impression, vous devez choisir une rsolution dentre gale au produit de la rsolution de sortie par le rapport de taille souhait par rapport loriginal. Par exemple, avec une imprimante rgle sur 600 dpi et un rapport dimpression du double de loriginal, vous aurez : 600 2 = 1200 dpi. En revanche, en vue dun affichage cran, une rsolution dentre de 75 dpi est largement suffisante, voire exagre, puisquil est exceptionnel quune image occupe tout lcran : tout dpend encore une fois du rapport de taille entre loriginal et ce que vous souhaitez obtenir lcran.

236 LE GUIDE COMPLET

Inclusion gnrique dimages : lment OBJECT

Chapitre 6

Nous nirons pas plus loin dans ltude des scanneurs et autres priphriques dacquisition ou de restitution dimages, ce thme sortant du champ de cet ouvrage. En reprenant toutefois notre exemple dimage numrique, celle-ci code 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 chiers graphiques oprent une compression des donnes aboutissant une rduction de la taille des chiers.

Rduction de la taille des chiers

Vous savez toutefois probablement que les chiers graphiques peuvent tre trouvs sous diffrentes formes, reconnaissables lextension du nom de chier : JPG, GIF, PNG, TIF, BMP, etc., et que ces formats ralisent une compression logicielle des donnes plus ou moins efficace. titre dexemple, le tableau suivant prsente une comparaison de la taille des chiers de limage exemple de Coucher de soleil employe dans notre page Rgion, qui mesure 800 600 pixels, selon le format de chier employ.
Tableau 6.7 : Comparaison de quelques formats de chiers graphiques

Type JPG PNG TIF BMP TIF PNG TIF PNG

Nbre bit/pixel 24 24 24 24 16 16 8 8

Couleurs 16 millions 16 millions 16 millions 16 millions 64 000 64 000 256 256

Taille en mmoire 1 406 Ko 1 406 Ko 1 406 Ko 1 406 Ko 703 Ko 703 Ko 469 Ko 469 Ko

Taille relle du chier 70 Ko 532 Ko 1 254 Ko 1 407 Ko 551 Ko 378 Ko 194 Ko 163 Ko

LE GUIDE COMPLET 237

Chapitre 6

Couleurs et images

Tableau 6.7 : Comparaison de quelques formats de chiers graphiques

Type GIF TIF PNG GIF

Nbre bit/pixel 8 4 4 4

Couleurs 256 16 16 16

Taille en mmoire 469 Ko 234 Ko 234 Ko 234 Ko

Taille relle du chier 251 Ko 59 Ko 49 Ko 49 Ko

Remarquez tout dabord que la taille en mmoire correspond bien au calcul thorique :
800 600 24 = 11 524 000 bits = 1 440 000 octets = 1 406 Ko

Cette rsolution ne permet pas le format GIF, qui naccepte pas plus de 256 couleurs. En revanche, le format BMP la reconnat : comme vous le voyez, il neffectue aucune compression. Ce format nest dailleurs pas reconnu sur le Web, pas plus que le format TIF : ils ne sont l que pour permettre la comparaison. Dans cet exemple, le chier JPEG est de loin le plus petit. La premire possibilit pour rduire la taille de ce chier sans modier le format de limage consiste rduire 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 chier JPEG, malgr cette baisse de qualit. Poursuivons en passant en 256 couleurs, pour pouvoir tester le format GIF. Si les chiers restent de taille suprieure celui dun chier JPEG en 16 millions de couleurs, le format GIF se rvle le plus gourmand parmi les autres. Poussons le raisonnement son terme en rduisant radicalement le nombre de couleurs 16 (soit 4 bits par couleur). La taille des chiers poursuit sa rduction, passant cette fois en dessous de celle du chier JPEG. Il est toutefois permis de sinterroger sur la pertinence dune telle rduction de qualit, pour ne gagner que 30 % en taille ! Sachez toutefois que les chiffres prsents ici sont propres cette image : une autre image pourrait donner des rsultats diffrents, le format GIF pouvant savrer plus intressant en 256 couleurs. Il reste

238 LE GUIDE COMPLET

Inclusion gnrique dimages : lment OBJECT

Chapitre 6

cependant important de noter que, inversement, la conversion dun chier GIF en JPEG apporte parfois une grande amlioration ! Tout dpendant des caractristiques du chier, seuls les essais et lexprience pourront vous procurer un indice. Il existe par ailleurs plusieurs programmes permettant de rduire la taille des images JPEG avec une perte de qualit minimale. Cest le cas de Paint Shop Pro.

Figure 6.55 : Paint Shop Pro permet de rduire la taille dune image JPG

SmartSaver 3.0, conu par Ulead, est plus facile employer. Vous pouvez en tlcharger une version dvaluation depuis le site www.ulead .com/webutilities/frwhere.htm Cet utilitaire ralise un extraordinaire travail dajustement de compression en comparant les rsultats selon les rglages et les types de chiers. Deux fentres permettent de comparer loriginal, gauche, et la version compresse, droite, en taille et en qualit. Les effets des diffrents rglages sautent immdiatement aux yeux : au prix dune baisse de qualit perceptible, mais somme toute acceptable, la taille du chier passe de 71 41 Ko ! (voir Figure 6.56) SmartSaver propose des outils pour recadrer et modier la taille des images : ainsi, tous les outils ncessaires pour amliorer le chargement dune image sont-ils la porte de main.

LE GUIDE COMPLET 239

Chapitre 6

Couleurs et images

Figure 6.56 : Rduction de la taille dune image avec SmartSaver 3.0

Recours une page de vignettes

Pour afficher un groupe dimages de qualit photographique, une solution astucieuse consiste crer une page qui prsente des rductions de ces images, appeles vignettes ou miniatures (thumbnail). Chaque vignette est relie limage en taille relle. 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 intressent.

6.6. Rsum
j j j j

La toute premire tape de lenjolivement dune page consiste y ajouter de la couleur. Exploiter les couleurs est de la plus grande simplicit en HTML, grce divers attributs de llment BODY. La valeur hexadcimale employe pour spcier une couleur porte le nom de code RGB de cette couleur. Vous modiez la couleur du texte pour ou dans un lment grce lattribut color dun lment FONT. Vous modiez la couleur

240 LE GUIDE COMPLET

Rsum

Chapitre 6

j j

du fond des lments dun tableau laide de lattribut bgcolor de llment concern. Les couleurs peuvent tre dsactives par lutilisateur. Tous les navigateurs ou presque possdent dsormais des options de gestion des couleurs ou autorisent les utilisateurs dnir un ensemble particulier de couleurs utiliser pour tout site visit. Tous ces attributs sont dsormais dconseills, au prot des feuilles de style. Il est possible de placer des images sur un site Web. Les formats de chiers graphiques les plus frquents 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 laccord de son propritaire ou vous en tes vous-mme lauteur. Vous insrez une image darrire-plan pour la totalit de la page dans llment BODY laide de lattribut background. Vous insrez une image dans un lment HTML laide des lments IMG et OBJECT. Ce dernier lment, plus puissant, est dsormais privilgier. Vous pouvez employer des images statiques ou des images animes (gifs anims). Vous pouvez crer vos propres images animes. Il est possible de crer et dinsrer des images cliquables : un clic sur une portion de limage dclenche une action, souvent (mais pas toujours) louverture dune nouvelle page. Vous employez pour ce faire les lments MAP et AREA, associs des lments IMG ou OBJECT. De faon gnrale, mieux vaut toujours chercher diminuer le temps de tlchargement dune page Web. Vous devez veiller bien contrler la taille de vos images. Un choix judicieux du format de chier, ainsi que le recours certains utilitaires, peut permettre de rduire sensiblement la taille des chiers concerns, sans perte de qualit visuelle.

LE GUIDE COMPLET 241

Jeux dencadrement
Jeu dencadrement : lment FRAMESET .................................................................. 245 Contenu dun jeu dencadrement : lment FRAME ................................................ 248 Dtermination du cadre cible : attribut target ............................................................. 261 Ensembles de cadres imbriqus .................................................................................... 265 Partage de donnes entre cadres ................................................................................. 269 Contenu de remplacement : lment NOFRAMES ................................................... 270 Cadres en ligne : lment IFRAME ................................................................................ 271 Travail avec les jeux dencadrement ............................................................................. 273 Rsum ................................................................................................................................ 275

Chapitre 7

Jeux dencadrement

Les cadres ou frames sont largement employs en HTML. Ils constituent le principal moyen dafficher de multiples pages HTML sur le mme cran au mme moment. Vous pourriez ouvrir plusieurs fentres ou onglets sous votre navigateur, mais seriez alors contraint de basculer constamment de lun lautre. Grce aux cadres, il est possible de concevoir un site qui prsente aux utilisateurs plusieurs fentres. Ces fentres dinformation doivent cependant tre lies : les utilisateurs ne doivent pas avoir limpression de perdre une place prcieuse pour des lments sans importance. Les cadres sont frquemment employs pour contrler la navigation de lutilisateur sur le site. Des tudes ont dmontr quune barre de navigation ou un menu ntaient utiles qu condition dtre situs en haut dun document. Beaucoup dutilisateurs du Web ne font jamais dler lcran vers le bas : les ventuelles barres de navigation situes en bas dune page doivent donc tre des rpliques de celles du haut. Mieux vaut recourir un cadre pour placer dnitivement les outils de navigation un endroit bien dni de lcran. Des cadres permettent de prsenter les documents selon des vues multiples : des fentres indpendantes ou des sous-fentres. Cest un moyen de garder visibles certaines informations, tandis que dautres fentres dlent ou sont remplaces. Par exemple, dans la mme fentre, un cadre pourrait afficher une bannire statique, un deuxime cadre afficher un menu de navigation et un troisime le document principal qui peut dler ou tre remplac au gr de la navigation via le deuxime cadre. Ce chapitre montre comment construire un jeu dencadrement ou
frameset, aussi nomm ensemble de cadres . Cela seffectue par le

biais dun chier qui dnit les cadres, le mode douverture dune page dans un cadre en utilisant le lien prsent dans un autre, et la faon dutiliser les lments de script pour que les cadres fonctionnent correctement. Vous allez apprendre concevoir un ensemble de cadres attrayant, ergonomique et efficace. En raison des problmes de conception qui leur sont propres, les cadres sont une technique avance de HTML et doivent tre traits comme tels. lments tudis
FRAMESET, cols, rows FRAME, name, src, noresize, scrolling, frameborder, marginheight, marginwidth target BASE NOFRAMES IFRAME

244 LE GUIDE COMPLET

Jeu dencadrement : lment FRAMESET

Chapitre 7

7.1. Jeu dencadrement : lment FRAMESET

Un chier de dnition de jeu dencadrement possde une syntaxe analogue celle dun document HTML ordinaire, mais son code diffre. Tout dabord, avec HTML 4.01, ces documents utilisent un lment DOCTYPE diffrent en tte de page. Ils sont en outre dpourvus dlment BODY, remplac par un lment FRAMESET. Nous allons immdiatement mettre en jeu les cadres pour amliorer notre site Web. Le meilleur moyen de commencer consiste tracer sur une feuille de papier laspect souhait, en attribuant un nom chaque cadre. Ici, comme le montre la gure suivante, notre ensemble de cadres ne contient que deux cadres. Le premier cadre, nomm nav (pour navigation), occupe la totalit de la largeur de lcran et ne possde quune hauteur de 50 pixels. Le second cadre, nomm princ (pour principal) occupe le reste de la fentre.

Figure 7.1 : Schma de lensemble de cadres de notre site

Passons la pratique.

1 Ouvrez le Bloc-Notes. 2 Saisissez llment DOCTYPE caractristique dun ensemble de cadres :

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

LE GUIDE COMPLET 245

Chapitre 7

Jeux dencadrement

3 Poursuivez comme avec nimporte quel document HTML, en saisissant les lments HTML et HEAD. Comme lhabitude, noubliez pas de refermer immdiatement ces lments :
<HTML> <HEAD> </HEAD> <HTML>

4 Vous allez maintenant saisir les diffrents lments lintrieur de llment HEAD : TITLE et divers lments 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 llment HEAD de notre page daccueil, une exception prs : comme nous apportons une modication majeure au site, le numro de version devient 2.7.1.

5 Contrairement une page Web normale , un chier densemble de cadres est dpourvu dlment BODY, remplac par un lment FRAMESET. Vous y saisissez la dnition de votre ensemble de cadres :
</HEAD> <FRAMESET rows="50, *"> <FRAME src="barrenav.html" name="nav"> <FRAME src="accueil.html" name ="princ"> </FRAMESET> </HTML>

Nos deux cadres empils se comportent comme des lignes et sont donc dnis dans lensemble de cadres comme tels (rows). Si nous avions choisi des cadres juxtaposs, donc en colonnes, nous aurions employ cols. Remarquez la spcication de la hauteur du premier cadre, 50 pixels. Le signe * employ pour le second signie occuper le reste de lcran . Ces points seront tudis dans la suite de cette section.

6 Tous les agents utilisateurs ne sont pas en mesure dafficher les cadres. Une bonne prcaution consiste prvoir une alternative, laide dun lment NOFRAMES. Si lagent utilisateur ne peut afficher les cadres (ou est congur pour ne pas le faire), il restitue le contenu de llment NOFRAMES.
246 LE GUIDE COMPLET

Jeu dencadrement : lment FRAMESET

Chapitre 7

<FRAME src="accueil.html" name ="princ"> <NOFRAMES> <P>Ce document a recours &agrave; un jeu dencadrement qui contient : <UL> <LI><A href="barrenav.html">Une barre de navigation </A> <LI><A href="accueil.html">Une page daccueil</A> </UL> </P> </NOFRAMES> </FRAMESET> </HTML>

7 Enregistrez votre chier sous le nom index.html.

index.html ?

Vous pourriez vous demander pourquoi ce chier est enregistr sous ce nom. Lorsque quil reoit un URI dpourvu de nom de chier, tout agent utilisateur recherche par dfaut un chier nomm index.html. Cela vite davoir mmoriser le nom de la premire page de votre site : seul lURI vers son dossier est ncessaire, soit donc dans notre cas /MonSite.

Llment FRAMESET spcie la disposition de la fentre principale de lutilisateur selon des subdivisions rectangulaires : lignes et colonnes. Nous avons employ ici lattribut rows. Celui-ci spcie la disposition des cadres horizontaux. Sa valeur est une liste de longueurs en pixels, en pourcentage ou relatives, spares par des virgules. La valeur par dfaut est 100 %, cest--dire une seule range. Prenons un exemple :
<FRAMESET rows="20,25%,*"> ...reste de la dfinition... </FRAMESET>

Vous crez ici trois lignes. La premire possde une hauteur xe de 20 pixels (pour recevoir par exemple des icnes de navigation dont les dimensions sont connues). La seconde occupe 25 % de lespace qui reste disponible et la troisime le solde (soit 75 %). Nous aurions pu prfrer une disposition en colonnes, laide de lattribut cols, qui spcie la disposition des cadres verticaux. Sa
LE GUIDE COMPLET 247

Chapitre 7

Jeux dencadrement

valeur est une liste de longueurs en pixels, en pourcentage ou relatives, spares par des virgules. La valeur par dfaut est 100 %, cest--dire une seule colonne. Il est possible de combiner des attributs rows et cols. Si lattribut rows est absent, chaque colonne occupe la hauteur entire de la page. Si lattribut cols est absent, chaque range occupe la largeur entire de la page. Si aucun de ces attributs nest prsent, le cadre occupe la totalit de la page. Les cadres sont crs de gauche droite pour les colonnes et de haut en bas pour les lignes. Quand les deux attributs sont spcis, les cadres sont crs ligne par ligne du haut vers le bas, les colonnes tant places successivement de gauche droite dans la range suprieure, de gauche droite dans la range suivante, etc. Voici un exemple de grille 23 :
<FRAMESET rows="30%,70%" cols="33%,34%,33%"> ...reste de la dfinition... </FRAMESET>

Les longueurs absolues dont le total nest pas gal 100 % de lespace disponible rel devraient tre ajustes par lagent utilisateur. Quand ce total est infrieur 100 %, lespace restant devrait tre allou proportionnellement chaque vue. Quand il est suprieur, chaque vue devrait tre rduite en fonction de la proportion de lespace total qui lui est spcie. Je pense que vous commencez comprendre pourquoi il est fortement conseill de tracer sur papier laspect voulu dun jeu dencadrement avant de commencer le programmer

7.2. Contenu dun jeu dencadrement : lment FRAME

Vous avez donc cr un jeu dencadrement fort simple. Celui-ci est toutefois pour le moment totalement dpourvu de contenu. Vous devez avoir compris que cette page allait remplacer lactuelle page daccueil. Celle-ci est divise en deux pages distinctes, affiches chacune dans un cadre propre : la partie navigation dans le cadre du haut, et le texte daccueil dans le second cadre. Crez maintenant ces deux pages, partir de lancienne page daccueil.
248 LE GUIDE COMPLET

Contenu dun jeu dencadrement : lment FRAME

Chapitre 7

1 Ouvrez dans le Bloc-Notes la dernire version de la page daccueil, pageacc_6_1.html. 2 Vous allez dabord crer la barre de navigation. Modiez tout dabord le contenu des lments 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 llment 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="accueil.html" target=princ> Accueil</A></TD> <TD><A href="region.html" target=princ> Ma r&eacute;gion</A></TD> <TD><A href="famille.html" target=princ> Ma famille</A></TD> <TD><A href="passions.html" target=princ> Mes passions</A></TD> <TD><A href="mailto:votre_nom@votre_FAI"> <IMG src="Images/Boites009.gif" height="50" alt="Ecrivez-moi !" border="0"></A></TD </TR> </TABLE> </BODY>

Remarquez que nous avons limin les couleurs attribues prcdemment la page, dans llment BODY : vous savez dsormais dnir vos propres couleurs et arrire-plans.

4 Cest tout pour la barre de navigation. Enregistrez le chier sous le nom barrenav.html. 5 Rechargez dans le Bloc-Notes la page pageacc_6_1.html. 6 Vous allez cette fois crer la page daccueil. Modiez le contenu des lments TITLE et META, comme suit :
<HEAD> <TITLE>"Page daccueil"</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

LE GUIDE COMPLET 249

Chapitre 7

Jeux dencadrement

<META name="author" content="votre nom"> <META name="version" content="2.7.1"> </HEAD>

7 Modiez comme suit le contenu de llment BODY. Comme prcdemment, vous devriez pouvoir vous viter un peu de saisie :
<BODY> <H1 align="center">Ma page daccueil</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; laide 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 lment DIV pour obtenir le centrage du contenu de la page, aprs les titres.

8 Enregistrez le chier sous le nom accueil.html.

Voici les listings complets des trois chiers crs ce stade :
Listing 7-1 : Index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <HEAD>

250 LE GUIDE COMPLET

Contenu dun jeu dencadrement : lment FRAME

<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="barrenav.html" name="nav"> <FRAME src="accueil.html" name ="princ"> <NOFRAMES> <P>Ce document a recours &agrave; un jeu dencadrement qui contient : <UL> <LI><A href="barrenav.html">Une barre de navigation </A> <LI><A href="accueil.html">Une page daccueil</A> </UL> </P> </NOFRAMES> </FRAMESET> </HTML>

Chapitre 7

Listing 7-2 : barrenav.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <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="accueil.html" target=princ> Accueil</A></TD> <TD><A href="region.html" target=princ> Ma r&eacute;gion</A></TD> <TD><A href="famille.html" target=princ> Ma famille</A></TD> <TD><A href="passions.html" target=princ> Mes passions</A></TD> <TD><A href="mailto:votre_nom@votre_FAI"> <IMG src="Images/Boites009.gif" height="50" alt="Ecrivez-moi !" border="0"></A></TD </TR> </TABLE>
LE GUIDE COMPLET 251

Chapitre 7
</BODY> </HTML>

Jeux dencadrement

Listing 7-3 : accueil.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>"Page daccueil"</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 daccueil</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; laide 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 dun jeu dencadrement : lment FRAME

Chapitre 7

Figure 7.2 : Aspect du nouveau jeu dencadrement

Quelques problmes se posent dans la barre de navigation. Tout dabord, en ayant limin les couleurs, licne retenue pour envoyer un courriel ressort de faon un peu dsagrable. Vous pourriez dnir votre propre charte graphique (et vous le ferez probablement), et savez o chercher une icne plus adapte, grce au Chapitre 6. Plus gnant, bien que nous ayons pris la prcaution dliminer les bordures du tableau et dajuster la hauteur de licne, celle-ci napparat pas totalement. Une barre de dlement est donc propose sur la droite de lcran. En outre, la barre sparant les deux cadres nest pas du meilleur got. Remarquez dailleurs quil est possible de la cliquerdposer pour modier la taille du cadre de la barre de navigation, ce qui nest pas ce que nous souhaitons. Il est possible de remdier ces diffrents points.

1 Ouvrez nouveau le chier index.html. 2 Modiez comme suit llment FRAME de la barre de navigation :
<FRAME src="barrenav.html" name="nav" noresize scrolling="no" frameborder="0" marginheight="0"> <FRAME src="accueil.html" name ="princ" frameborder="0">

Nous reviendrons sous peu plus en dtail sur les attributs employs.

3 Enregistrez le chier sans modier son nom. Examinez-le nouveau dans votre navigateur.

LE GUIDE COMPLET 253

Chapitre 7

Jeux dencadrement

Figure 7.3 : Aspect du jeu dencadrement modi

Laspect est dsormais beaucoup plus sympathique. Avant de procder un test plus approfondi, il est ncessaire de veiller ce que les cibles des liens de la barre de navigation soient valides. Si les chiers famille.html et passions.html existent bien, ce nest pas le cas du chier region.html. Rglez ce problme maintenant.

4 Ouvrez le chier region1_6_3.html, puis, sans le modier, enregistrez-le sous le nom region.html, sans fermer le Bloc-Notes ni le chier. 5 Testez maintenant les diffrents liens de la barre de navigation. Vous vous dplacez aisment dune page lautre, sans avoir revenir la page daccueil. Comme toutefois les liens sont dornavant toujours prsents lcran, ceux situs sur les pages secondaires deviennent superus. Les liminer amliorera laspect de ces pages, tout en facilitant leur maintenance ultrieure.

Figure 7.4 : Supprimer les liens du bas de la page amliorera son aspect

254 LE GUIDE COMPLET

Contenu dun jeu dencadrement : lment FRAME

Chapitre 7

6 Revenez au chier region.html, toujours ouvert. Modiez son numro de version comme suit :
<META name ="version" content="2.7.1">

7 Pour bien faire, supprimez les deux premiers lments OBJECT (lapplet Python et lanimation MNG), puis supprimez les liens situs en bas de la page. Les lignes supprimer sont les suivantes :
<!-- Essayer dabord un applet en Python --> <OBJECT title="Coucher de soleil sur le lac de Linciel" classid="Linciel.py"> <!-- Sinon, essayer lanimation MNG --> <OBJECT data="Linciel.mng" type="application/mng"> ... <P align="center"> <A href="pageacc1_6_1.html">Retour vers la page daccueil</A> </P>

8 Vous pouvez modier le commentaire avec llment OBJECT jpg. Enregistrez ensuite le chier sous le mme nom. 9 Ouvrez successivement les chiers famille.html et passions.html. Modiez les numros de version en 2.7.1 et supprimez les liens, puis enregistrez-les sans modier leur nom.
Dsormais, vous passez dune page lautre aisment, dun simple clic. Il est bien sr possible ce stade dencore amliorer le site. laide des informations obtenues lors de la lecture des chapitres prcdents (essentiellement le Chapitre 6), vous pourriez notamment :
j

Ajouter un arrire-plan aux deux cadres. En toute logique, un bandeau serait parfait pour la barre de navigation (puisque la taille est xe), tandis quune mosaque, ventuellement de type ligrane, serait parfaite pour le cadre principal. Ajouter un arrire-plan aux cellules du tableau de la barre de navigation, ou remplacer les liens texte par des dessins ou icnes employant des polices plus sophistiques. Vous verrez dans le Chapitre 9, traitant des scripts, comment rendre cette barre encore plus attractive.

LE GUIDE COMPLET 255

Chapitre 7

Jeux dencadrement

Vous pourriez galement crer dautres barres de navigation, adaptes laffichage de pages de niveau infrieur des pages dj cres (par exemple, un dtail des passions), voire modier totalement le jeu dencadrement en le remplaant par un autre, comme vous allez le dcouvrir dans la suite de ce chapitre. Les possibilits ne dpendent que de votre imagination ! Voici le nouvel tat du listing du chier index.html.
Listing 7-4 : index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <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="barrenav.html" name="nav" noresize scrolling="no" frameborder="0" marginheight="0"> <FRAME src="accueil.html" name ="princ" frameborder="0"> <NOFRAMES> <P>Ce document a recours &agrave; un jeu dencadrement qui contient : <UL> <LI><A href="barrenav.html"> Une barre de navigation </A> <LI><A href="accueil.html"> Une page daccueil</A> </UL> </P> </NOFRAMES> </FRAMESET> </HTML>

Il est toutefois temps de comprendre comment seffectue toute cette magie, en examinant les diffrents constituants de llment FRAMESET. Commenons par les attributs de llment FRAME.

256 LE GUIDE COMPLET

Contenu dun jeu dencadrement : lment FRAME

Chapitre 7

Attributs essentiels de llment FRAME : name et src

Llment FRAME dnit le contenu et lapparence dun unique cadre. Lattribut 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 thorie, cet attribut est en pratique presque toujours ncessaire.
<FRAME src="barrenav.html" name="nav" noresize scrolling="no" frameborder="0" marginheight="0"> <FRAME src="accueil.html" name ="princ" frameborder="0">

Un nom de cadre doit rpondre certains impratifs. Il doit commencer avec un caractre alphanumrique, pas par un symbole. Il existe toutefois un certain nombre de noms rservs qui possdent des proprits spciales. Ces noms commencent par un trait de soulignement. Il sagit de _blank, _self, _parent, et _top. Chacun possde un but spcial dans les cadres, et accomplit quelque chose dunique. Ces noms rservs et leur emploi seront examins un peu plus loin dans ce chapitre. Lattribut src spcie la localisation du contenu initial placer dans le cadre dni par llment FRAME :
<FRAME src="barrenav.html" name="nav" noresize scrolling="no" frameborder="0" marginheight="0"> <FRAME src="accueil.html" name ="princ" frameborder="0">

Contenu et dnition des cadres

La dnition dun jeu dencadrement, telle que spcie par les valeurs des attributs src des lments FRAME, ne change jamais. En revanche, le contenu de lun ou de plusieurs de ses cadres peut changer. Aprs une telle modication, la dnition du jeu dencadrement ne rete plus la situation courante de ses cadres.

LE GUIDE COMPLET 257

Chapitre 7

Jeux dencadrement

Attributs de mise en forme de llment FRAME

Ces attributs conditionnent la faon dont les agents utilisateurs restituent le cadre et inuent sur son comportement. Lattribut boolen noresize indique lagent utilisateur que le cadre ne doit pas tre redimensionnable : sil est prsent, il est impossible deffectuer un glisser-dposer pour modier la taille du cadre.
<FRAME src="barrenav.html" name="nav" noresize scrolling="no" frameborder="0" marginheight="0">

Lattribut scrolling autorise ou interdit la prsence de barres de dlement pour la fentre du cadre. Les valeurs possibles sont auto (une barre de dlement est prsente si ncessaire. Cest la valeur par dfaut), yes (mcanisme de dlement toujours prsent) et no (mcanisme de dlement toujours absent).
<FRAME src="barrenav.html" name="nav" noresize scrolling="no" frameborder="0" marginheight="0">

Lattribut frameborder procure lagent utilisateur une indication sur la bordure du cadre. Les valeurs possibles sont 1 (prsence dune sparation entre ce cadre et chacun des cadres adjacents. Cest la valeur par dfaut) et 0 (pas de sparation entre ce cadre et chacun des cadres adjacents). Remarquez que des sparateurs peuvent nanmoins tre dessins ct de ce cadre, sils sont spcis par les cadres adjacents. Si vous ne voulez pas de sparation entre plusieurs cadres, spciez frameborder="0" pour tous les cadres concerns, comme nous lavons fait sur notre site :
<FRAME src="barrenav.html" name="nav" noresize scrolling="no" frameborder="0" marginheight="0"> <FRAME src="accueil.html" name ="princ" frameborder="0">

Les attributs marginwidth et marginheight spcient respectivement la quantit despace laisser entre le contenu du cadre et ses marges latrales (gauche et droite) et haute et basse. La valeur, exprime en pixels, doit tre suprieure zro. Les valeurs par dfaut dpendent de lagent utilisateur. Comme les principaux navigateurs prsentent sur ce point des diffrences sensibles, mieux vaut spcier

258 LE GUIDE COMPLET

Contenu dun jeu dencadrement : lment FRAME

Chapitre 7

explicitement des valeurs, surtout pour les barres de navigation et les cadres dimensions xes.
<FRAME src="barrenav.html" name="nav" noresize scrolling="no" frameborder="0" marginheight="0">

Autres attributs de llment FRAME

Comme pour la plupart des autres lments, un lment FRAME peut possder des attributs id, class (identiants internes au document), title (titre de llment) et style (informations de style en ligne), ainsi quun attribut longdesc qui spcie un lien vers une description longue du cadre. Cette description devrait suppler la brve description fournie laide de lattribut title. Elle peut tre particulirement utile aux agents utilisateurs non visuels. Lattribut 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 associes aux cadres sont attaches ceux-ci et non leur contenu. Ce dernier pouvant varier au l du temps, la description longue initiale peut devenir inadquate pour les contenus ultrieurs du cadre. Mieux vaut notamment ne pas inclure une image comme seul contenu dun cadre. Le document avec jeu dencadrement suivant dcrit deux cadres. Le cadre de gauche contient une table des matires et celui de droite contient initialement limage dune autruche :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <HTML> <HEAD> <TITLE>Un document avec jeu dencadrement mal fait</TITLE> </HEAD> <FRAMESET cols="20%, 80%"> <FRAME src="table_des_matieres.html"> <FRAME src="autruche.gif" longdesc="autruche-desc.html"> </FRAMESET> </HTML>

Remarquez que limage est incluse dans le cadre indpendamment de tout lment HTML : lattribut longdesc constitue le seul moyen de spcier un texte de remplacement. Si le contenu du cadre de droite change (par exemple, lutilisateur choisit dans la table des matires un serpent sonnette), les utilisateurs nauront aucun accs textuel au nouveau contenu du cadre.
LE GUIDE COMPLET 259

Chapitre 7

Jeux dencadrement

Il ne faut donc pas placer directement une image dans un cadre comme valeur de lattribut src. Limage doit plutt tre spcie dans un document HTML spar, dans lequel elle est annote laide du texte de remplacement adquat :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <HTML> <HEAD> <TITLE>Un document avec jeu dencadrement bien fait</TITLE> </HEAD> <FRAMESET cols="20%, 80%"> <FRAME src="table_des_matieres.html"> <FRAME src="autruche-conteneur.html"> </FRAMESET> </HTML> <!-- Dans le document autruche-conteneur.html: --> <HTML> <HEAD> <TITLE>Lautruche rapide et puissante</TITLE> </HEAD> <P> <OBJECT data="autruche.gif" type="image/gif"> Ces autruches ont vraiment bon go&ucirc;t ! </OBJECT> </HTML>

Enn, un attribut target peut tre plac dans un lment FRAME, dnissant ainsi une cible par dfaut pour tous les liens de ce cadre. Lattribut target est tudi plus en dtail dans la section suivante.
Dnition et contenu

Un document qui contient une dnition de cadre ne doit pas comporter le contenu de ce cadre. Lexemple suivant est illgal, puisque le contenu du deuxime cadre se trouve dans le mme document que le jeu dencadrement.
<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

Dtermination du cadre cible : attribut target

Chapitre 7

7.3. Dtermination du cadre cible : attribut target

Une fois le jeu dencadrement cr, vous devez disposer dun moyen de naviguer entre les cadres. La plupart des jeux dencadrement consistent en un cadre principal entour dautres cadres, comme des bannires, des menus de navigation ou dautres lments. Que se passe-t-il toutefois lorsque vous cliquez sur un lien situ lintrieur dun cadre ? Dhabitude, cela ouvre une nouvelle page lintrieur de la fentre active, donc du mme cadre. Ceci peut rendre les choses difficiles lire lors de lutilisation dun menu de navigation troit ! Heureusement, lorsque vous cliquez sur un lien dans un ensemble de cadres, vous pouvez spcier que la nouvelle page doit souvrir :
j j j j j j j

Dans le mme cadre. Dans un autre cadre du jeu dencadrement. Dans un autre cadre lintrieur dun cadre enfant ou parent (dans le cas de cadres imbriqus, abords plus loin). Dans un nouveau jeu dencadrement qui remplace le jeu existant et toutes les fentres qui pouvaient sy trouver. Dans un autre cadre, forant un autre cadre se relancer ou ouvrir une nouvelle page. Dans une nouvelle fentre du navigateur. Dans la fentre actuelle en remplaant lactuel jeu dencadrement.

Comme vous pouvez le voir, il existe de nombreuses faons de manipuler le contenu des cadres laide de liens. Par dfaut, les liens souvrent dans le mme cadre. Pour ouvrir un lien dans un autre cadre, vous employez lattribut target :
<A href="exemple.html" target="cible">

Si toutefois vous souhaitez ouvrir un cadre lintrieur dun autre cadre du jeu dencadrement, vous devez dabord prciser le nom de chaque cadre, et cibler ce cadre. Par exemple :
<FRAME name="contenu">

nomme un cadre prcis nomm contenu. Un clic sur le lien

LE GUIDE COMPLET 261

Chapitre 7

Jeux dencadrement

<A href=info.html target=contenu>

ouvrira le document Web nomm info.html lintrieur du cadre nomm contenu. Lattribut target peut se placer sur les lments qui crent des liens (A, LINK), des images cliquables (AREA) et des formulaires (FORM). Vous pouvez aussi cibler tous les cadres dun ensemble, et tous les liens dun cadre, en plaant lattribut target dans llment FRAME.
<FRAME name="barrenav" target="contenu">

ouvre un cadre nomm barrenav, qui ouvrira par dfaut tous ses liens dans le cadre nomm contenu. Comme vous pouvez le voir, les possibilits sont immenses.

Noms rservs
Nous avons prcdemment voqu lexistence de noms rservs, qui dbutent par un trait de soulignement : _blank, _self, _parent et _top. Ces noms rservs devraient imposer lagent utilisateur de fonctionner comme suit :
j

Un lien qui cible _blank ouvre une page dans une nouvelle fentre dpourvue 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 dautres personnes doivent souvrir dans de nouvelles fentres. En effet, votre site nest probablement pas le seul utiliser les cadres : rien nest plus nervant quun site en cadres lintrieur du petit cadre de contenu dun autre site en cadres. En outre, vous ne voudriez peut-tre pas tre associ au propritaire du contenu de ce site : si le lien souvre dans votre ensemble, il apparatra comme faisant partie de votre site, ce qui peut tre trs dsagrable.
Anciennes versions

Avec les anciennes versions de Netscape Navigator, _new possde un effet analogue _blank, mais ne fait pas partie du standard HTML.

262 LE GUIDE COMPLET

Dtermination du cadre cible : attribut target

j

Chapitre 7

La cible _self ouvre une page lintrieur du cadre actif. Cest le comportement par dfaut de beaucoup dagents utilisateurs : en labsence de cible spcie, le document nomm par le lien souvre dans le cadre actif. Ceci est utile pour les liens situs lintrieur du cadre principal, gnralement censs ouvrir des contenus diffrents dans ce cadre. Le nom rserv _parent sapplique aux cadres imbriqus. Lorsque vous ciblez le cadre _parent, vous ciblez rellement le cadre dans lequel rside votre cadre actuel. Enn, _top ouvre le lien dans la fentre en cours, remplaant la totalit du jeu dencadrement actif. Une fentre de navigation peut tre considre comme un conteneur. Celui-ci peut renfermer un jeu dencadrement, lintrieur duquel peut se trouver un autre jeu dencadrement. Lorsque vous lancez un lien dans un autre cadre, le contenu est mlang dans le conteneur. En louvrant en revanche dans _top, le contenu du conteneur est remplac en totalit par la ou les pages auxquelles mne ce lien. Vous emploierez par exemple _top pour ouvrir un nouveau chier de dnition de jeu dencadrement, diffrent du jeu actif.

Remarquez bien lemploi de devraient En pratique, quelques prcautions complmentaires sont ncessaires lors de lemploi de jeux dencadrement imbriqus, comme vous le verrez plus loin. Les agents utilisateurs, dont les principaux navigateurs, peuvent interprter diffremment selon les situations ces noms rservs, notamment _parent.
Conits de noms de cadres

un moment donn, il peut arriver que deux cadres possdent le mme nom. Cest souvent le rsultat dune ouverture dun ensemble de cadres dans un ensemble existant. HTML 4.01 dispose de rgles spciales pour la gestion de ce genre de conits. Le navigateur recherche dabord le cadre nomm dans lensemble le plus profond. Si aucun cadre de ce nom nexiste, il cherche dans le cadre parent, puis dans lensemble parent, et ainsi de suite. Sil ne parvient toutefois pas identier de cadre portant ce nom, il ouvre un nouveau cadre et lui attribue ce nom.

LE GUIDE COMPLET 263

Chapitre 7

Jeux dencadrement

tablissement de la cible par dfaut des liens

Quand, dans une mme document, plusieurs liens dsignent la mme cible, il est possible de spcier la cible une seule fois et de se passer de lattribut target de chaque lment. Pour ce faire, dnissez dans le document lattribut target sur un lment BASE. Par exemple, pour spcier que tous les liens situs dans le document
passions.html doivent ouvrir un nouveau chier dans le cadre nomm

affichage, vous dnissez comme suit un lment BASE :

... <META name="version" content="2.7.1"> <BASE href="MonSite" target="affichage"> </HEAD> ...

Smantique de cible
La dtermination par lagent utilisateur du cadre cible nest pas toujours vidente. HTML 4.01 recommande que les agents utilisateurs dterminent le cadre cible dans lequel charger une ressource relie selon la prsance suivante (de la priorit la plus leve la plus basse) :
j

Si lattribut target dun lment vise un cadre connu, quand llment est activ (un clic sur un lien ou la soumission dun formulaire), la ressource dsigne par llment devrait se charger dans le cadre cible. Si cet lment est dpourvu dattribut target et quen revanche llment BASE en possde un, cest lattribut target de llment BASE qui dtermine le cadre. Si ni cet lment ni llment BASE ne se rfrent une cible, la ressource dsigne par llment devrait se charger dans le cadre qui contient llment (comportement par dfaut identique une cible _self). Si un attribut target se rfre un cadre C inconnu, lagent utilisateur devrait crer une nouvelle fentre et un nouveau cadre, puis assigner le nom C au cadre et, enn, charger la ressource dsigne par llment dans le nouveau cadre.

264 LE GUIDE COMPLET

Ensembles de cadres imbriqus

Chapitre 7

Les agents utilisateurs devraient fournir aux utilisateurs un mcanisme permettant de surclasser lattribut target. Remarquez quune fois de plus les comportements par dfaut prconiss par HTML pour les agents utilisateurs sont dune efficacit certaine : vous pouvez trs souvent vous abstenir de spcier diffrents attributs en vous reposant sur le comportement par dfaut. Cest toutefois une attitude un peu risque, car un agent utilisateur au comportement inhabituel peut amener des rsultats catastrophiques : par scurit, mieux vaut spcier tout ce qui peut ltre. Cela est particulirement valable pour lattribut target.

7.4. Ensembles de cadres imbriqus

Les jeux dencadrement peuvent simbriquer nimporte quel niveau. Dans lexemple suivant, llment FRAMESET externe divise lespace disponible en trois colonnes presque gales. Llment FRAMESET interne partage alors la deuxime colonne en deux ranges de hauteur ingale.
... <FRAMESET cols="33%, 33%, 34%"> <FRAME name="cadre1" src="cadre1.html"> <FRAMESET rows="40%, 60%"> <FRAME name="cadre2l1" src="cadre2l1.html"> <FRAME name="cadre2l2" src="cadre2l2.html"> </FRAMESET> <FRAME name="cadre3" src="cadre3.html"> </FRAMESET> ...

Le schma de laspect de ce jeu dencadrement est prsent dans la gure suivante.

Figure 7.5 : Jeux dencadrement imbriqus

LE GUIDE COMPLET 265

Chapitre 7

Jeux dencadrement

Lorsque des jeux dencadrement sont imbriqus, certains cadres sont les parents des autres. Cela est sans importance la plupart du temps, mais devient capital lorsque vous devez grer les scripts et que vous utilisez les noms rservs, avec comme cible _parent. Revenez lexemple prsent ci-dessus. Ce jeu cre un ensemble de quatre cadres. Le jeu principal est divis en trois colonnes, la colonne centrale tant divise en deux lignes. Considrez le lien suivant :
<A href="test_parent.html" target="_parent">Lien</A>

Nous avons plac ce lien dans les chiers nomms cadre1.html et cadre2l1.html. Le chier cadre2l2.html contient en revanche le lien :
<A href="test_parent.html" target="_self">Lien</A>

Enn, le chier cadre3.html contient le lien :

<A href="test_parent.html" target="_top">Lien</A>

En ouvrant le chier cadresimbriques.html dans votre navigateur, vous voyez ce qui est prsent dans la gure suivante.

Figure 7.6 : Jeux dencadrement imbriqus

Un clic sur le lien du cadre nomm cadre1 ouvre le chier test_parent.html dans la totalit de la page.

Figure 7.7 : Le _parent de cadre1 est la totalit de la fentre

266 LE GUIDE COMPLET

Ensembles de cadres imbriqus

Chapitre 7

Un clic sur le lien du cadre de la seconde ligne de la seconde colonne ouvre le chier test_parent.html dans ce cadre.

Figure 7.8 : Le _self de cadre2 est bien lui-mme

Enn, un clic sur le lien du cadre 3 ouvre aussi le chier dans la totalit de la page : pour cadre1 et cadre2, _top et _parent possdent la mme signication. Jusque-l, tout va bien. En revanche, un clic sur le lien du cadre de la premire ligne de la seconde colonne devrait ouvrir le chier test_parent.html dans la totalit de cette colonne, remplaant ce deuxime jeu dencadrement. Malheureusement, tel nest pas le cas, et le chier souvre comme si _top avait t employ, ou comme si vous aviez cliqu sur le lien de cadre1 : cest--dire sur un lien situ dans un cadre qui nappartient pas lui-mme un jeu dencadrement secondaire. Le rsultat est identique ce qui est prsent dans la gure de la page 276. Que se passe-t-il ? Il semble en pratique que les agents utilisateurs considrent souvent que des jeux dencadrement imbriqus dnis dans un unique chier ne constituent quun unique jeu dencadrement. Pour remdier ce dfaut, nous avons modi comme suit le chier de spcication du jeu dencadrement principal, enregistr sous le nom cadresimbriques2.html :
... <FRAMESET cols="33%, 33%, 34%"> <FRAME name="cadre1" src="cadre1.html"> <FRAME name="cadre2" src="cadre2.html"> <FRAME name="cadre3" src="cadre3.html"> </FRAMESET> ...

LE GUIDE COMPLET 267

Chapitre 7

Jeux dencadrement

Vous spciez donc ici un jeu dencadrement unique. Remarquez lapparition du chier cadre2.html. Celui-ci est une nouvelle spcication de jeu dencadrement :
... <FRAMESET rows="40%, 60%"> <FRAME name="cadre2l1" src="cadre2l1.html"> <FRAME name="cadre2l2" src="cadre2l2.html"> </FRAMESET> ...

Nous possdons dj les autres chiers. lexamen du chier cadresimbriques2.html dans un navigateur, aucune diffrence avec laspect prcdent napparat, si ce nest le titre et lURL de la page.

Figure 7.9 : Jeux dencadrement imbriqus

Comme prcdemment, un clic sur le lien du cadre nomm cadre1 ouvre le chier 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 chier test_parent.html dans ce cadre. Enn, un clic sur le lien du cadre 3 ouvre aussi le chier dans la totalit de la page. Aucune diffrence. Cette fois cependant, un clic sur le lien du cadre de la premire ligne de la seconde colonne ouvre bien le chier test_parent.html dans la totalit de cette colonne, remplaant ce deuxime jeu dencadrement.

Figure 7.10 : Le _parent de cadre2l1 est cette fois cadre2

268 LE GUIDE COMPLET

Partage de donnes entre cadres

Chapitre 7

Lors de la ralisation de cadres imbriqus, mieux vaut donc sparer les spcications des jeux concerns pour viter tout problme de comportement du nom rserv _parent, ou vous en tenir des cadres nomms explicitement dsigns.

7.5. Partage de donnes entre cadres

Il est possible de partager des donnes entre plusieurs cadres en incluant celles-ci au moyen de llment OBJECT. Llment OBJECT doit tre plac dans llment HEAD du document de dnition du jeu dencadrement et nomm laide dun attribut id. Tout document qui est le contenu dun cadre dans le jeu dencadrement peut alors se rfrer cet identiant. Lexemple suivant illustre la manire dont un script pourrait appeler un lment OBJECT dni pour le jeu dencadrement entier (nous tudierons plus en dtail les scripts dans le Chapitre 10). Fichier de dnition du jeu dencadrement :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <HTML> <HEAD> <TITLE>Voici un jeu dencadrement avec un OBJECT dans HEAD </TITLE> <!-- Cet OBJECT nest pas restitu&eacute ! --> <OBJECT id="mon_objet" data="data.bar"></OBJECT> </HEAD> <FRAMESET> <FRAME src="martine.html" name="martine"> </FRAMESET> </HTML>

Listing 7-5 : Fichier martine.html

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

...le reste du document... </BODY> </HTML>

Dautres cadres du jeu dencadrement pourraient galement faire rfrence llment OBJECT.

7.6. Contenu de remplacement : lment NOFRAMES

Tous les agents utilisateurs ne sont pas en mesure de reconnatre les cadres. En outre, certains peuvent tre congurs pour ne pas les afficher. Il est donc important de fournir un contenu de remplacement, ce qui est obtenu laide de llment NOFRAMES. Llment NOFRAMES spcie le contenu qui ne devrait tre affich que par les agents utilisateurs qui ne reconnaissent pas les cadres ou sont congurs pour ne pas les afficher. Les agents utilisateurs qui reconnaissent les cadres ne doivent afficher le contenu dune dclaration NOFRAMES que sils sont congurs pour ne pas afficher les cadres. Ceux qui ne reconnaissent pas les cadres doivent afficher dans tous les cas le contenu de llment NOFRAMES. Llment NOFRAMES fait partie la fois des DTD transitoires et des jeux dencadrement. Dans un document qui fait appel au DTD de jeu dencadrement, llment NOFRAMES est plac la n de la section FRAMESET du document. Cest ce que nous avons fait dans notre chier de dnition de jeu dencadrement index.html :
... <FRAMESET rows="50, *"> <FRAME src="barrenav.html" name="nav" noresize crolling="no" frameborder="0" marginheight="0"> <FRAME src="accueil.html" name ="princ" frameborder="0"> <NOFRAMES> <P>Ce document a recours &agrave; un jeu dencadrement qui contient : <UL> <LI><A href="barrenav.html">Une barre de navigation </A> <LI><A href="accueil.html">Une page daccueil</A> </UL>

270 LE GUIDE COMPLET

Cadres en ligne : lment IFRAME

</P> </NOFRAMES> </FRAMESET> ...

Chapitre 7

Llment NOFRAMES peut tre employ dans un document qui constitue la source dun cadre et qui utilise le DTD transitoire. Cela permet aux auteurs dexpliquer lobjet du document, au cas o celui-ci serait vu indpendamment du jeu dencadrement ou encore avec un agent utilisateur ne reconnaissant pas les cadres.

7.7. Cadres en ligne : lment IFRAME

Depuis sa version 3.0, Internet Explorer permettait de dnir des cadres en ligne, qui ottaient dans la page. Ce dispositif a t repris dans HTML 4.01. Llment IFRAME permet dinsrer un cadre dans un bloc de texte. Linsertion dun cadre en ligne dans un passage textuel revient un peu y insrer un objet via llment OBJECT : ces lments permettent tous deux linsertion dun document HTML au sein dun autre, ils peuvent tous deux tre aligns sur le texte environnant, etc. Cet lment possde les mmes attributs que llment FRAME, lexception de lattribut noresize superu puisquun cadre en ligne ne peut jamais tre redimensionn. Les informations qui doivent tre insres en ligne sont dsignes par lattribut src. En revanche, comme avec llment OBJECT, le contenu de llment IFRAME ne doit tre affich que par les agents utilisateurs qui ne reconnaissent pas les cadres ou qui sont congurs pour ne pas les afficher. Voici un exemple de mise en uvre dun cadre ottant.
Listing 7-6 : cadreflottant.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <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 dencadrement

<IFRAME src="cadreflottant2.html" width="400" height="500" scrolling="auto" frameborder="1"> [Votre agent utilisateur ne reconnat pas les cadres ou nest pas configur&eacute; pour les afficher pour linstant. Cependant, vous pouvez visiter le <A href="cadreflottant2.html">document concern.</A>] </IFRAME> plac&eacute; &agrave; lint&eacute;rieur dun texte. </P> </BODY> </HTML>

Listing 7-7 : cadreflottant2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <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 lagent utilisateur reconna&icirc;t les cadres ou peuvent &ecirc;tre affich&eacute;es dans une page propre si tel nest pas le cas. </P> </BODY> </HTML>

Pour les agents utilisateurs qui reconnaissent les cadres, lexemple suivant placera un cadre en ligne, entour par une bordure, au milieu du texte.

Figure 7.11 : Cadre ottant affich par un navigateur reconnaissant les

cadres

En revanche, si lagent utilisateur ne reconnat pas les cadres ou est congur pour ne pas les afficher, le chier cadreflottant.html sera affich.
272 LE GUIDE COMPLET

Travail avec les jeux dencadrement

Chapitre 7

Figure 7.12 : Cadre ottant affich par un navigateur qui ne reconnat pas

les cadres

Un clic sur le lien propos cet effet affiche le contenu du cadre ottant dans une fentre propre.

Figure 7.13 : Le contenu du cadre ottant (celui du chier cadreottant2.html) est affich dans une fentre propre

lment OBJECT

Vous pouvez galement incorporer un document HTML dans un autre document HTML avec llment OBJECT, dj abord au Chapitre 6 ainsi que dans la section prcdente, et sur lequel nous reviendrons encore.

7.8. Travail avec les jeux dencadrement

Lorsque vous concevez un jeu dencadrement, vous devez vous souvenir que son aspect lcran peut diffrer de ce que vous aviez en tte, et ce pour de multiples raisons. Par exemple, chaque barre de dlement prsente sur un cadre rduit lespace disponible lcran, ce qui rend le site de plus en plus exigu et inconfortable. Pour amliorer le confort, rduisez le nombre de cadres. Commencez par bien dnir les raisons pour lesquelles vous souhaitez employer un cadre dans vos pages HTML. Dsirez-vous faire de la place pour une bannire publicitaire ? Inclure une barre de navigation
LE GUIDE COMPLET 273

Chapitre 7

Jeux dencadrement

sur un ct de lcran (ou en haut ou en bas) ? Comparer deux documents cte cte ? Mieux vaut toujours tracer par crit un schma de la structure de jeu dencadrement que vous souhaitez concevoir, en y inscrivant les noms attribus aux cadres. Les principales questions auxquelles vous devez imprativement rpondre pralablement la conception dun jeu dencadrement sont les suivantes :
j j j

Quel cadre sera susceptible de subir les modications les plus frquentes ou les plus nombreuses ? Comment les utilisateurs navigueront-ils dans ce jeu dencadrement ? En quoi ce jeu dencadrement aidera-t-il votre public apprcier le site ?

Dune certaine faon, les problmes de conception dun jeu dencadrement sont trs proches de ceux rencontrs lors de la conception de tableaux. Un des principaux problmes poss par les cadres, comme avec les tableaux, concerne la taille de lcran. Si toutefois, dans une conception HTML typique, vous ne vous proccupez gnralement que de la largeur de lcran lors de la ralisation de grands tableaux de prsentation, les cadres occupent la totalit de la fentre du navigateur. La plupart des utilisateurs naviguent avec une taille de fentre maximale : celle-ci occupe tout lcran disponible. Ceci signie que les rsolutions type des crans ont un rle jouer. Les rsolutions les plus frquentes sont dsormais par ordre dcroissant : 1024 768 (56 %), 1280 1024 (16 %) et 800 600 (12 %) et, les autres rsolutions (1280 800 et 1152 864) ne reprsentant que moins de 8 % du parc. Il est donc raisonnable de considrer que lcran de lutilisateur possde 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 dune barre de navigation. Noubliez en outre pas que les cadres sont officiellement apparus dans HTML 4.0. Des agents utilisateurs plus anciens ne pourront peut tre pas reconnatre un ou plusieurs des attributs dcrits dans ce chapitre. Par exemple, cibler un cadre ou les attributs de largeur et de dlimitation peuvent ne pas fonctionner correctement avec des navigateurs anciens. Pire encore, ils peuvent fonctionner dune faon autre que celle
274 LE GUIDE COMPLET

Rsum

Chapitre 7

attendue. Mme si la grande majorit des navigateurs prennent en charge depuis un temps certain la quasi-totalit des attributs abords dans ce chapitre (comme Microsoft Internet Explorer et Netscape Navigator depuis leur version 3.0), mieux vaut toujours tester vos pages avec dautres navigateurs avant de lancer votre site. Sachez enn que les jeux dencadrement peuvent rendre la navigation davant en arrire, par le biais de lhistorique de lagent utilisateur, plus complique pour les utilisateurs.

7.9. Rsum
j

j j

Les cadres ou frames sont largement employs en HTML. Ils constituent le principal moyen dafficher plusieurs HTML sur le mme cran au mme moment. Un chier de dnition de jeu dencadrement possde une syntaxe analogue celle dun document HTML ordinaire, mais son code diffre. Ils utilisent un lment DOCTYPE diffrent en tte de page, et sont dpourvus dlment BODY, remplac par un lment FRAMESET. Llment FRAMESET spcie la disposition des vues dans la fentre principale de lagent utilisateur. La spcication de lattribut rows de llment FRAMESET dnit le nombre de subdivisions horizontales dans un jeu dencadrement. La spcication de lattribut cols dnit le nombre de subdivisions verticales. Les deux attributs peuvent tre utiliss simultanment pour crer une grille. Au sein de llment FRAMESET, les diffrents cadres sont dnis laide dlments FRAME. Un lment FRAME dnit le contenu et lapparence dun unique cadre. Lattribut name dun lment 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 imprativement commencer par un caractre alphanumrique. Il existe toutefois un certain nombre de noms rservs qui possdent des proprits spciales et dbutent par un trait de soulignement ( _blank, _self, _parent, et _top). Lattribut src dun lment FRAME spcie la localisation du contenu initial placer dans le cadre dni par llment FRAME.

LE GUIDE COMPLET 275

Chapitre 7
j

Jeux dencadrement

j j

Vous pouvez spcier le mode de restitution dun cadre par lagent utilisateur laide de diffrents attributs. noresize indique lagent utilisateur que le cadre ne doit pas tre redimensionnable, lattribut scrolling autorise ou interdit la prsence de barres de dlement, frameborder spcie la taille (ou labsence) de la bordure du cadre. Les attributs marginwidth et marginheight spcient respectivement la quantit despace laisser entre le contenu du cadre et ses marges latrales (gauche et droite) et haute et basse. Par dfaut, tout lien prsent dans un cadre ouvre sa rfrence dans le mme cadre. Pour ouvrir un lien dans un autre cadre, vous devez utiliser lattribut target, suivi du nom du cadre cible. Vous pouvez dnir un cadre cible par dfaut pour les liens du cadre en employant lattribut target dans un lment BASE. HTML 4.01 recommande des rgles de priorits que devraient respecter les agents utilisateurs pour dterminer le cadre cible dans lequel charger une ressource lie. Il est possible dimbriquer un nombre quelconque de jeux dencadrement. Il est possible de partager des donnes entre plusieurs cadres en incluant celles-ci au moyen de llment OBJECT. Llment OBJECT doit tre plac dans llment HEAD du document de dnition du jeu dencadrement et nomm laide dun attribut id. Tout document qui est le contenu dun cadre dans le jeu dencadrement peut alors se rfrer cet identiant. Il est prfrable de placer un lment NOFRAMES dans llment FRAMESET an doffrir un contenu de remplacement aux agents utilisateurs qui ne reconnaissent pas les cadres ou ne sont pas congurs pour afficher ces cadres. Vous pouvez insrer un cadre en ligne au sein dun bloc de texte laide de llment IFRAME. Un tel cadre ne peut jamais tre redimensionn. Dune certaine faon, les problmes de conception dun jeu dencadrement sont trs proches de ceux rencontrs lors de la conception de tableaux. Un des principaux problmes poss, comme avec les tableaux, concerne la taille de lcran. Il est de nos jours raisonnable de considrer que lcran de lutilisateur possde 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 lment STYLE ................................................................................................................... 282 Feuille de style externe ..................................................................................................... 294 Proprits de feuille de style ........................................................................................... 306 Feuille de style en cascade ............................................................................................. 323 Feuille de style auditive, pour un public particulier ................................................... 328 Rsum ................................................................................................................................ 335

Chapitre 8

Feuilles de style

Vous avez remarqu dans les chapitres prcdents que les attributs et certains lments relatifs la mise en forme et la prsentation de pages Web taient frquemment, signals comme dconseills en faveur du recours aux feuilles de style. Lors de lapparition du Web, les principaux utilisateurs taient essentiellement des scientiques, des enseignants et des militaires, plus concerns par le contenu des documents que par leur prsentation. Le dveloppement fulgurant du World Wide Web et larrive de personnes issues dhorizons trs diffrents a mis rapidement en vidence que les limites de HTML constituaient une source de frustration perptuelle. Nombreux furent alors ceux qui durent contourner les limites de mise en forme dHTML par des mthodes aussi diverses quastucieuses. Aussi louable quait pu tre le but damliorer la prsentation des pages Web, les techniques employes pour ce faire possdaient des effets secondaires malheureux : leur fonctionnement ntait pas garanti et restait largement dpendant de divers facteurs, dont lagent utilisateur. Les principales mthodes employes taient :
j j j j j

Lemploi dextensions HTML propritaires. La conversion du texte en image. Le recours des images pour contrler lespacement. Lemploi de tableaux pour la mise en page. Lcriture dun programme plutt que le recours HTML.

Ces techniques accroissent considrablement la complexit des pages Web, offrent peu de souplesse, souffrent de problmes dinteroprabilit et constituent une preuve pnible pour les personnes prsentant des handicaps. Les feuilles de style HTML reprsentent un progrs majeur qui dveloppe les possibilits damlioration de laspect des pages Web. Elles rsolvent tous ces problmes en mme temps quelles remplacent lventail limit des mcanismes de prsentation HTML. Avec les feuilles de style, il devient facile de spcier lespacement entre les lignes de texte, lindentation des lignes de texte, la couleur utilise pour le texte et larrire-plan, la taille et le style de la police et quantit dautres dtails. Les feuilles de style HTML peuvent tre mises en uvre de trois faons diffrentes :
j

Au sein dun lment.

278 LE GUIDE COMPLET

Introduction
j j

Chapitre 8

Dans llment HEAD du document. laide dune feuille de style externe.

Ces trois mthodes ne sont pas exclusives les unes des autres. Ce chapitre tudie les diffrentes modalits de mise en uvre des feuilles de style. lments et attributs tudis 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 cites plus haut, tait damliorer la sparation de la logique de structure (dnie par les lments HTML) de celle de la prsentation (dsormais dnie par les feuilles de style). Cette dmarche de sparation des diffrentes couches de logique, de plus en plus frquente en matire de programmation, sinspire du modle MVC (voir encadr).
Sparation de la logique et de la prsentation : le modle MVC (Model-View-Controller)

Le modle MVC est un modle de conception logicielle largement rpandu, initialement cr dans les annes 1980 par Xerox PARC pour Smalltalk-80. Il a t plus rcemment recommand comme modle pour la plate-forme J2EE de Sun et gagne fortement en popularit auprs des dveloppeurs ColdFusion et PHP. Cest un outil fort utile au dveloppeur, quel que soit le langage utilis, mme sil prsente quelques inconvnients. Le modle de conception MVC impose la sparation entre les donnes, les traitements et la prsentation. Toute application est ainsi divise en trois composants fondamentaux : le modle, la vue et le contrleur. Chacun de ces composants possde un rle bien dni. La vue est linterface avec laquelle interagit lutilisateur. Pour les applications Web, ctait historiquement une interface HTML, mais cela peut galement tre une interface Macromedia Flash ou dautres langages de balises comme XHTML, XML/XSL, WML et les services Web. Le

LE GUIDE COMPLET 279

Chapitre 8

Feuilles de style

MVC sait grer lutilisation de diffrentes vues pour une mme application. Aucun traitement nest effectu dans la vue : celle-ci ne sert qu afficher les donnes et permettre lutilisateur dagir sur celles-ci. Le deuxime composant du MVC, le modle, reprsente les donnes et les rgles de travail (l o seffectuent les traitements). Les bases de donnes en font partie, de mme que des objets comme les EJB et composants ColdFusion. Les donnes renvoyes par le modle sont indpendantes de la prsentation : le modle ne ralise aucune mise en forme. Un mme modle peut afficher ses donnes dans plusieurs vues. Enn, le contrleur interprte les requtes de lutilisateur et appelle le modle et la vue ncessaires pour rpondre celles-ci. Lorsque lutilisateur clique sur un lien ou soumet un formulaire HTML, le contrleur ne produit rien et neffectue aucun traitement : il intercepte simplement la requte pour dterminer les modles et vues qui doivent tre associs. Pour rsumer, une requte utilisateur est interprte par le contrleur, qui dtermine les portions du modle et de la vue qui doivent tre appeles. Le modle gre les interactions avec les donnes et applique les rgles de travail, puis renvoie les donnes. Le contrleur slectionne enn une vue et lui transmet les donnes. En appliquant ce modle HTML, la feuille de style serait la vue, lagent utilisateur le contrleur et le document HTML le modle.

La spcication HTML 4.01 ne lie pas HTML un langage de style particulier. Cela permet lutilisation dun panel de langages (les plus simples pour la majorit des utilisateurs et les plus complexes pour une minorit dutilisateurs aux besoins trs spcialiss). Le langage le plus frquemment employ est CSS (Cascading Style Sheet), fond sur la Recommandation W3C CSS niveau 2 (dont la version rvise au 7 juin 2005 est disponible en franais ladresse www.yoyodesign.org/doc/w3c /css2/cover.html) et la version 2.1 release candidate (disponible en anglais ladresse http://www.w3.org/TR/CSS21/). Cest celui dont nous nous servirons dans cet ouvrage. La spcication CSS niveau 3 est en cours dlaboration (voir http://www.w3.org/Style/CSS/current-work). Souvenezvous toutefois que dautres langages de feuille de style sont possibles en HTML. Pour employer dans vos pages des feuilles de style, vous devez spcier le langage employ, laide dun lment META.

1 Ouvrez le chier index.html dans le Bloc-Notes. 2 Modiez le numro de version en 3.8.1 (il sagit l encore dune modication 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>, llment META suivant :

<META http-equiv="Content-Style-Type" content="text/css">

4 Enregistrez le chier index.html sans modier son nom. 5 Rptez les tapes 1 4 pour les chiers passions.html, region.html, famille.html et barrenav.html. 6 Ouvrez le chier accueil.html. Modiez son numro de version, ajoutez le nouvel lment META, puis gardez ce chier ouvert dans le Bloc-Notes.
Comme vous devez lavoir compris, il sagit dune ligne essentielle ajouter dsormais systmatiquement dans llment HEAD de tout chier HTML.

8.2. Attribut style

La faon la plus simple de dnir un style dans une page, pour rester en conformit avec la spcication HTML 4.01, consiste le faire en ligne laide de lattribut style. Cet attribut peut tre employ avec tous les lments HTML sauf BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE et TITLE. Passons la pratique.

1 Revenez au chier index.html, qui devrait tre ouvert dans votre Bloc-Notes. 2 Modiez comme suit la ligne de titre (llment H1), en ajoutant un attribut style :
<H1 style="font-size: 32pt; text-align: center; color: green">Ma page daccueil</H1>

3 Enregistrez le chier sans modier son nom.

Lancez votre navigateur, puis ouvrez le chier index.html (voir Figure 8.1). La syntaxe de la valeur de lattribut style est dtermine par le langage de feuille de style par dfaut. Par exemple, pour un style en ligne CSS, vous devez employer la syntaxe de bloc de dclaration CSS. La syntaxe gnrale CSS de lattribut style est donc :
LE GUIDE COMPLET 281

Chapitre 8

Feuilles de style

Figure 8.1 : Page daccueil, avec titre principal, modie laide dun attribut style.

style ="proprit1 : valeur; proprit2 = valeur; propritn = valeur"

Pour spcier les informations de style de plusieurs lments, mieux vaut prfrer llment STYLE.

8.3. lment STYLE

Llment STYLE permet de rassembler des rgles de style dans len-tte du document, qui vont ainsi sappliquer la totalit des lments concerns du document. HTML autorise un nombre quelconque dlments STYLE dans la section HEAD dun document. La syntaxe des donnes de style dpend du langage de feuille de style. Certaines implmentations de feuille de style peuvent autoriser une plus grande varit de rgles dans llment STYLE que dans lattribut style. Dune faon gnrale, CSS distingue les slecteurs (la dnition dun lment) et les dfinitions (les proprits de prsentation affectes cet lment). CSS permet de dclarer les rgles lintrieur dun lment STYLE pour :
j

Toutes les instances dun lment HTML particulier (par exemple, tous les lments P, tous les lments H1, etc.).
H1 {dfinitions}

282 LE GUIDE COMPLET

lment STYLE
j

Chapitre 8

Toutes les instances dun lment HTML appartenant une classe particulire (par exemple, les lments dont lattribut class possde une valeur spcie).
*[class=valeur] {dfinitions}

Les instances uniques dun lment HTML (par exemple, un lment dont lattribut id possde une valeur spcie).
lment[id=valeur] {dfinitions}

Il ne sagit l toutefois que dexemples simplissimes : la version 3 des slecteurs CSS (http://www.w3.org/Style/css3-selectors-updates/WD-css3selectors-20010126.fr.html) propose des slecteurs nombreux et trs sophistiqus, capables de rpondre dsormais pratiquement toutes les situations (reportez-vous au tableau 13.12 du Chapitre 13, Annexes ). Les possibilits denrichissement dun contenu laide dune feuille de style sont dsormais extrmement riches. En outre, CSS permet de combiner laide doprateurs les slecteurs simples, ce qui largit encore le champ des possibilits.
Sensibilit a casse dans les slecteurs

Dans les slecteurs, la sensibilit la casse des noms dlments et dattributs ainsi que des valeurs des attributs dpend du langage du document. Par exemple, les noms dlments sont sensibles la casse en XML mais pas en HTML.

Les rgles de prsance et dhritage des rgles de style dpendent du langage de feuille de style. Examinons successivement ces trois possibilits.

Dnition du style de la totalit des occurrences dun lment donn

Llment STYLE permet de dnir facilement laspect dlments HTML spcis. Voici comment procder :

1 Ouvrez dans le Bloc-Notes le chier accueil.html. 2 Enregistrez-le en ltat sous le nom accueil_3_8_1.html. Modiez ensuite son numro 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 llment HEAD, ajoutez un lment 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 lattribut style de llment H1 ainsi que lattribut align de llment H2 (puisque vous avez dni ces styles dans len-tte), ainsi que les balises de llment DIV (les styles des lments contenus sont galement dnis dans len-tte). Comme vous avez dni un cadre autour de llment H1, vous pouvez galement supprimer la rgle horizontale qui le suit (llment HR). 5 Enregistrez le chier dabord sous le nom accueil_3_8_2.html, puis sous le nom accueil.html.
Lancez votre navigateur, puis ouvrez le chier index.html. Remarquez que vous lancez index.html puisque celui-ci charge automatiquement accueil.html dans un jeu dencadrement (voir Figure 8.2). Cette page ne diffre que trs peu de la prcdente. Nous examinerons plus en dtail dans la suite de ce chapitre les diffrents attributs quil est possible demployer dans une feuille de style, mais regardez dj ce que nous avons fait ici :
j

j j

Dans llment H1, la proprit borderwidth cre un cadre pais dun pixel, la proprit border dnissant son aspect (ligne pleine). La proprit color, dj rencontre, dnit la couleur du texte. La proprit fontsize, galement dj rencontre, dnit la taille de la police. Nous avons employ des tailles dcroissantes selon les cas.

284 LE GUIDE COMPLET

lment STYLE

Chapitre 8

Figure 8.2 : Page daccueil avec, cette fois, recours un lment STYLE. j

La proprit textalign, dj rencontre aussi, dnit lalignement du texte. Les lments H1, H2, P, UL et ADDRESS sont dnis comme devant tre centrs lcran. En revanche, llment LI doit tre align gauche. Enn, la proprit marginleft: 40% de llment LI dnit une marge gauche gale 40 % de lespace disponible : leffet obtenu avec cette marge et lalignement gauche est plus satisfaisant que le centrage prcdent.

Grce la dnition des styles dans llment HEAD, toute occurrence des lments dnis sera rendue de faon homogne, selon les critres spcis. Un norme gain de temps et la garantie de disposer dun effet homogne ! Effet homogne, mais peut-tre trop. Vous pourriez souhaiter dnir des types de prsentation particuliers pour certaines occurrences dun lment prcis . Cela est possible, grce lemploi de lattribut classe.

LE GUIDE COMPLET 285

Chapitre 8

Feuilles de style

Dnition du style de certaines occurrences dun lment donn

Souvenez-vous : nous avons prvu dans la page daccueil une place pour des remarques lgales, mais sans encore les crer. Si nous les mettons dans un lment P, elles possderont une taille de police et un centrage automatiques, compte tenu de la feuille de style actuelle. Il faut donc indiquer que, pour les lments P qui appartiennent une classe particulire, laspect doit tre autre. Procdez comme suit :

1 Revenez dans le Bloc-Notes au chier accueil.html. 2 Modiez son numro de version :

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

3 Ajoutez dans llment STYLE, juste aprs la dnition de llment P, une nouvelle dnition :
P {font-size: 16pt; text-align: center} P.legal {font-size: 8pt; font-variant: small-caps} UL {font-size: 16 pt; text-align: center}

4 Remplacez le commentaire <! Des remarques lgales ne seraient pas superflues > par llment P suivant :
<P class="legal">&copy; 2005 votrenom Tous droits r&eacute;serv&eacute;s</P>

5 Enregistrez le chier dabord sous le nom accueil_3_8_3.html, puis sous le nom accueil.html.
<HEAD> <STYLE type="text/css"> H1.maclasse {border-width: 1; border: solid; text-align: center} </STYLE> </HEAD> <BODY> <H1 class="maclasse"> Cet H1 est touch&eacute; par notre style </H1> <H1> Celui-ci ne lest pas </H1> </BODY>

Ouvrez le chier index.html dans votre navigateur (voir Figure 8.3). Le paragraphe des remarques lgales, bien qutant un lment P, est prsent diffremment puisque nous avons spci que cet lment appartenait la classe legal.

286 LE GUIDE COMPLET

lment STYLE

Chapitre 8

Figure 8.3 : Dnition dun style pour une classe dlments particulire

Remarquez lattribut type de llment STYLE. Sa syntaxe est :

type = "type_de_contenu"

Cet attribut spcie le langage de feuille de style par dfaut du contenu de llment. Il surclasse, lorsquil est prsent et quelle est spcie, la feuille de style par dfaut (dnie par <META httpequiv=
"ContentStyleType" content="type_de_contenu"> dans llment HEAD). Le langage de feuille de style est spci comme un type de contenu (par exemple, "text/css"). Si la dnition de la

feuille de style par dfaut est absente, il est indispensable de fournir une valeur pour cet attribut : il est dpourvu de valeur par dfaut.

Dnition du style dune unique occurrence dun lment donn

Vous pourriez galement souhaiter quun lment unique dans votre, voire vos pages respecte un style particulier. Vous avez alors recours lidentiant de cet lment (lattribut id), lequel doit tre unique dans le document. La syntaxe est la suivante :
<STYLE> #monid {proprit1 :valeur; proprit2: valeur;... propritn: 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 lintrt de dnir dans la feuille de style den-tte un lment unique : ne serait-il pas plus simple de dnir un attribut style dans cet lment ? La rponse tient ce que nous avons dj soulign plusieurs reprises : HTML doit tre un langage de spcication de contenu. Son but est avant tout la structure et non la prsentation. Mieux vaut donc sparer au maximum la logique structurelle (les lments HTML et leur contenu) de la logique de prsentation (la feuille de style).

lments DIV et SPAN

Vous avez compris quil tait possible de dnir des informations de style pour pratiquement tous les lments HTML. Deux lments, DIV et SPAN, mritent cependant des mentions particulires. La plupart des lments HTML possdent dj une mise en forme intgre . Un paragraphe de texte place une ligne avant et aprs lui-mme, et utilisera une police diffrente de celle des autres lments dans certains navigateurs. Dans la mesure o les feuilles de style sont supposes combiner les indications structurelles et les indications de mise en forme, il fallait crer des lments neutres . Llment DIV est un lment de type bloc, ce qui signie quune ligne sera insre avant et aprs lui. En termes de structure, il ne correspond quau souhait de lui voir prsenter un aspect particulier, diffrent du comportement des lments de structure classique. Il ne possde pourtant aucune autre mise en forme particulire par dfaut, si bien que le texte qui y gure apparatra comme texte par dfaut (sauf sil est spci autrement).
SPAN fonctionne de la mme faon, si ce nest quil sagit dun lment ligne. Ces deux lments peuvent tre dnis dans une feuille de style comme nimporte quel autre lment.

En consquence, vous pouvez utiliser ces lments pour insrer des styles conus entirement sur la structure de la page, plutt que selon ses lments de conception. Par exemple, si la premire section de votre

288 LE GUIDE COMPLET

lment STYLE

Chapitre 8

document contient les informations les plus importantes, placez-les dans un lment DIV auquel vous attribuez un style particulier : une couleur spciale, une police caractristique ou un texte en italique. Tout son contenu, y compris les titres et les images, hriteront du style DIV. De ce fait, lemploi de ces lments conjointement aux feuilles de style permet un dveloppement HTML pratiquement illimit, particulirement quand ils sont employs avec les attributs class et id : cela permet de dvelopper potentiellement une innit de types de prsentation diffrents. 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} DIV.it {font-style: italic} DIV.g {font-weight: bold} DIV.itg {font-style: italic; font-weight: bold} SPAN.it {font-style: italic} SPAN.g {font-weight: bold} SPAN.itg {font-style: italic; font-weight: bold} </STYLE>

Regardez le chier suivant (volontairement minimaliste), dans lequel les parties importantes sont prsentes en gras :
Listing 8-1 : Fichier STYLEDIVSPAN.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <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} DIV.it {font-style: italic} DIV.g {font-weight: bold} DIV.itg {font-style: italic; font-weight: bold} SPAN.it {font-style: italic} SPAN.g {font-weight: bold} SPAN.itg {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 dautres <SPAN class="itg">en italiques gras</SPAN>.</P> </BODY> </HTML>

Examin dans votre navigateur, ce chier affiche ce qui est prsent dans la gure suivante.

Figure 8.4 : Dnition dun style pour des classes dlments DIV et SPAN

Le gain de saisie semble ici relativement faible, mais imaginez que vous ayez modier la taille et le type de la police, sa couleur, lalignement, etc. Remarquez en outre dans cette gure que les lments DIV des classes it, g et itg hritent du style dni pour llment gnrique DIV : ici, la taille de police et le centrage. Nous reviendrons par la suite sur cette notion dhritage, mais sachez ds prsent quun style hrite des caractristiques par dfaut de son style parent.

290 LE GUIDE COMPLET

lment STYLE

Chapitre 8

Attribut media
HTML permet aux auteurs de spcier les documents qui exploitent les caractristiques du mdium sur lequel le document doit tre restitu (par exemple : cran graphique, cran de tlvision, appareil de poche, navigateur synthse vocale, appareil tactile braille, etc.). Cela ouvre aux utilisateurs laccs aux pages Web au moyen dune grande varit dappareils. Les feuilles de style sappliquent un mdium spcique ou un groupe de mdias. Une feuille de style prvue pour un cran peut tre ventuellement utilisable pour limpression, mais sera de peu dutilit pour un navigateur synthse vocale. Cette spcication permet de dnir les catgories gnrales de mdias auxquelles peut sappliquer une feuille de style donne. Ceci permet aux agents utilisateurs dviter la recherche de feuilles de style inappropries. Les langages de feuilles de style peuvent inclure des mcanismes dcrivant les dpendances aux mdias dans une mme feuille de style. Lattribut media de llment STYLE spcie le mdia de destination dsir pour les informations de style. Cela peut tre un descripteur de mdia unique ou une liste de descripteurs, spars par des virgules. La valeur par dfaut de cet attribut est screen, soit un cran dordinateur (le cas le plus frquent). Sa syntaxe est la suivante :
media = "descripteur_mdium1, descripteur_mdium2, ... descripteur_mdiumn"

Les valeurs possibles et les signications de celles-ci sont prsentes dans le tableau suivant.
Tableau 8.1 : Descripteurs de mdias

Descripteur de mdium

But crans dordinateurs non pagins Priphrique utilisant une grille de caractres xe, comme un tlex. Priphriques de type tlvision Vidoprojecteurs Priphriques tenus la main (en principe cran de petite taille et faible bande passante)

screen tty tv projection handheld

LE GUIDE COMPLET 291

Chapitre 8

Feuilles de style
Tableau 8.1 : Descripteurs de mdias

Descripteur de mdium

But Matriaux opaques pagins et documents vus lcran en mode Aperu avant impression Priphrique rendu tactile braille Imprimantes pagination braille Synthtiseurs de parole. Anciennement aural en CSS 2.0. Tous priphriques

print braille embossed speech all

Par exemple, les dclarations des exemples suivants sappliquent aux lments H1. Pour une projection dans une runion de travail, toutes leurs instances apparatront en bleu. Pour une impression papier, toutes les instances seront centres.
<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 particulirement intressant quand il sapplique aux feuilles de style externes, dans la mesure o les agents utilisateurs peuvent conomiser du temps en ne chargeant partir du rseau que les feuilles de style qui concernent le priphrique courant. Nous reviendrons donc sur ce sujet lors de ltude des feuilles de style externes.

Masquage du contenu de llment STYLE

Les agents utilisateurs qui ne reconnaissent pas les feuilles de style ou le langage de feuille de style spcique employ par un lment STYLE doivent dissimuler le contenu de llment STYLE. La restitution du contenu de cet lment en tant que partie du texte du document constitue une erreur. Certains langages de feuilles de style grent une syntaxe pour dissimuler le contenu aux agents utilisateurs non conformes. Cest le cas de CSS.

1 Revenez dans le Bloc-Notes au chier accueil.html.

292 LE GUIDE COMPLET

lment STYLE

Chapitre 8

2 Modiez son numro de version :

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

3 Modiez comme suit llment 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} P.legal {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 chier dabord sous le nom accueil_3_8_4.html, puis sous le nom accueil.html.
Ouvrez le chier index.html dans votre navigateur. Vous devriez obtenir quelque chose de similaire ce qui est prsent dans la gure suivante,

Figure 8.5 : Le masquage optionnel du contenu de llment STYLE reste sans consquence si lagent utilisateur reconnat cet lment

soit quelque chose de parfaitement identique ce qui tait prsent dans celle-ci. La seule diffrence est quun agent utilisateur qui ne reconnat pas llment STYLE naffichera pas son contenu comme du texte.
LE GUIDE COMPLET 293

Chapitre 8

Feuilles de style

Figure 8.6 : Dnition dun style pour une classe dlments particulire

En poussant le raisonnement propos de la sparation de la structure et de la prsentation sa conclusion logique, la sparation doit tre encore plus drastique et les styles dnis dans une ou plusieurs feuilles de style externes. Cest ce que nous allons examiner maintenant.

8.4. Feuille de style externe

Outre lobjectif de sparation de la structure et de la prsentation, dexcellentes raisons incitent employer des feuilles de style :
j j j

Il est possible de partager des feuilles de style entre plusieurs documents et/ou sites. Une feuille de style peut tre modie sans quil soit ncessaire de modier le document. Les agents utilisateurs peuvent charger les feuilles de style slectivement, en fonction des descriptions des mdias.

Cela a toujours t et reste une des recommandations fondamentales de la spcication CSS. Le principal avantage est quil suffit de modier une feuille de style externe pour modier laspect gnral du site. Cela est fort pratique si vous utilisez un modle gnral, chaque page pouvant toujours, si ncessaire, possder un aspect particulier grce aux classes et aux identiants. Comme cela a t mentionn plus tt, il est possible de lier une feuille de style externe nimporte quel document Web. Une feuille de style

294 LE GUIDE COMPLET

Feuille de style externe

Chapitre 8

externe sadapte particulirement bien aux sites de grande taille : il suffit de modier un chier pour affecter lintgralit du site. En combinaison avec un modle de page Web, cela facilite lorganisation et la standardisation du site. Une feuille de style nest rien dautre quun chier texte qui indique lagent utilisateur comment restituer votre code HTML. Elle complte les lments standard : si llment H1 signale un titre, la balise <H1 style="color: green;"> correspond un titre vert. Une feuille de style externe emmne HTML un pas plus avant dans la sparation russie entre logique de travail et logique de prsentation. Pour crer une feuille de style externe, dbutez par un chier texte ordinaire. Il nest pas besoin dutiliser un quelconque lment ou balise : saisissez simplement vos proprits la vole, exactement comme si elle taient incluses dans llment STYLE dun chier HTML. Comme nous lavons vu prcdemment, un style se compose de proprits qui possdent des valeurs. Pour le paragraphe vert, la proprit est color et sa valeur est green. Vous allez crer votre premire 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 llment STYLE du chier accueil.html, puisque les informations sont identiques) :
/* style.css : 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} P.legal {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 possde ni ouverture ni fermeture. Les commentaires sont encadrs de symboles /* et */ : un vieux souvenir de syntaxe de programmation.

2 Enregistrez ce chier sous le nom style.css.

Attention, un chier de feuille de style doit toujours comporter une extension .css.

LE GUIDE COMPLET 295

Chapitre 8

Feuilles de style

3 Ouvrez le chier accueil.html. 4 Modiez son numro de version :

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

5 Remplacez llment STYLE par llment LINK suivant :

<LINK rel="STYLESHEET" type="text/css" href="style.css">

6 Enregistrez le chier dabord sous le nom accueil_3_8_5.html, puis sous le nom accueil.html.
Ouvrez le chier index.html dans votre navigateur. Vous devriez obtenir quelque chose de similaire ce qui est prsent dans la gure suivante, soit encore une fois quelque chose de parfaitement identique ce qui tait prsent Figure 8.3 ou Figure 8.5. La seule diffrence est que les styles sont dsormais dnis dans une feuille de style externe.

Figure 8.7 : Le site employant dsormais une feuille de style externe

Pour tirer un prot maximum de notre feuille de style, il faut lappliquer aux autres pages de notre site, en compltant si besoin les diffrentes spcications. Commenons par le chier le plus simple, passions.html.

1 Ouvrez passions.html dans le Bloc-Notes. 2 Modiez son numro de version :

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

3 Ajoutez llment LINK identique celui du chier accueil.html.

<LINK rel="STYLESHEET" type="text/css" href="style.css">

296 LE GUIDE COMPLET

Feuille de style externe

Chapitre 8

4 Supprimez les attributs align des lments H1 et H2, puisquils sont dsormais superus. 5 Enregistrez le chier sans modier son nom.
Ouvrez le chier index.html dans votre navigateur, puis cliquez dans la barre de navigation sur Mes passions. Vous devriez obtenir quelque chose de similaire ce qui est prsent dans la gure suivante, cest--dire un aspect beaucoup plus proche de celui de la page daccueil.

Figure 8.8 : Page Mes passions, employant dsormais la feuille de style externe.

Les pages Ma rgion et Ma famille sont un peu plus complexes, puisquelles font appel des tableaux. Nous devons donc dnir un style de tableau dans la feuille de style.

1 Ouvrez style.css dans le Bloc-Notes. 2 Ajoutez les dnitions de style suivantes la n du chier :
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} TD.droit {font-size: 14pt; text-align: right}

3 Enregistrez le chier sans modier son nom. 4 Ouvrez region.html dans le Bloc-Notes. 5 Modiez son numro de version :
<META name="version" content="3.8.1">

LE GUIDE COMPLET 297

Chapitre 8

Feuilles de style

6 Ajoutez llment LINK identique celui des chiers accueil.html et passions.html :

<LINK rel="STYLESHEET" type="text/css" href="style.css">

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 lments TD par un attribut class="droit", comme dans lexemple suivant :
<TH>Temp. Max.</TH><TD class="droit">18 </TD>

9 Enregistrez votre chier sans modier son nom.

Ouvrez le chier index.html dans votre navigateur, puis cliquez dans la barre de navigation sur Ma rgion.

Figure 8.9 : Page Ma rgion, employant dsormais la feuille de style

externe.

Similaire, mais pas identique : nous avons en ralit lgrement modi le contenu de ce chier, en y ajoutant du contenu et en remplaant les caractres accentus par les entits adquates. Voici son listing complet, les modications tant signales en gras.
298 LE GUIDE COMPLET

Feuille de style externe

Listing 8-2 : region.html version 3.8.1

Chapitre 8

<!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="style.css"> </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 limage JPEG --> <OBJECT data="Images/coucher de soleil.jpg" 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 clbre 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 chier, famille.html.

1 Ouvrez famille.html dans le Bloc-Notes. 2 Modiez son numro de version :

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

3 Ajoutez llment LINK identique celui des chiers accueil.html, passions.html et region.html :
<LINK rel="STYLESHEET" type="text/css" href="style.css">

4 Supprimez les attributs align de llment H1. Supprimez les attributs border, align, cellspacing, cellpadding et width du tableau. 5 Supprimez les attributs valign des lments TD et remplacez les attributs align="right" par un attribut class="droit", comme dans lexemple suivant :
<TH>Temp. Max.</TH><TD class="droit">18 </TD>

6 Enregistrez votre chier sans modier son nom.

Ouvrez le chier index.html dans votre navigateur, puis cliquez dans la barre de navigation sur Ma famille (voir Figure 8.10). Toutes nos pages prsentent dsormais un aspect homogne. Imaginez maintenant que vous vouliez soudainement modier la couleur du cadre plac autour de llment H1, et dnir 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 dsormais la feuille de style externe.

1 Ouvrez le chier style.css dans le Bloc-notes. 2 Modiez comme suit la dnition du style de llment H1 :
H1 {margin-left: 15%; margin-right: 15%; border-width: 1; border: solid; text-align: center; font-size: 32pt; color: blue}

3 Enregistrez votre chier.

Rafrachissez votre navigateur ou ouvrez nouveau index.html. Cliquez successivement sur les liens Ma famille et Mes passions. Tous les lments H1 ont t modis.

Figure 8.11 : Une unique modication du chier de feuille de style se rpercute sur tous les lments H1

LE GUIDE COMPLET 301

Chapitre 8

Feuilles de style

Figure 8.12 : Une unique modication du chier de feuille de style se rpercute sur tous les lments H1

Une seule modication du chier de feuille de style se rpercute sur lensemble du site.

Figure 8.13 : Une unique modication du chier de feuille de style se rpercute sur tous les lments H1

Cet exemple est dune simplicit dconcertante. Pour voir quel point une feuille de style bien conue peut profondment modier laspect dun site, visitez www.csszengarden.com/ et cliquez sur les diffrents modles proposs dans le cadre de droite : comme le montrent les deux copies dcran qui suivent, les diffrences peuvent tre phnomnales !

Figure 8.14 : Exemple de leffet des feuilles de style proposes par csszengarden.com

302 LE GUIDE COMPLET

Feuille de style externe

Chapitre 8

Figure 8.15 : Autre exemple de leffet des feuilles de style proposes par csszengarden.com

Nous reviendrons bientt plus en dtail sur les diffrentes proprits des feuilles de style. Pour le moment, penchons-nous plus avant sur llment LINK.

lment LINK
Comme vous lavez vu dans les exemples prcdents, vous liez une feuille de style un document HTML laide de llment LINK. La syntaxe de celui-ci est la suivante :
<LINK rel="STYLESHEET" type="text/css" href="nomfeuilledestyle.css">

href est comme dhabitude une URL vers le chier de feuille de style. Il semblerait toutefois que les URL absolues se comportent parfois de faon erratique : prfrez les feuilles de style loges sur le serveur de votre site.

HTML permet dassocier un nombre quelconque de feuilles de style externes un document. Le langage de feuille de style dnit comment

LE GUIDE COMPLET 303

Chapitre 8

Feuilles de style

plusieurs feuilles de style externes interagissent (par exemple, les rgles de cascade de CSS). Il est ainsi possible de spcier plusieurs feuilles de style mutuellement exclusives, alors nommes feuilles de style alternatives . Cela permet doffrir aux lecteurs plusieurs prsentations dun document. Lutilisateur peut slectionner sa feuille de style favorite parmi celles-ci en fonction de ses prfrences. Par exemple, une feuille de style pour la restitution des documents compacts dans une petite taille de police, ou une autre spciant une taille de police plus grande pour une meilleure lisibilit. Des feuilles alternatives peuvent viser des utilisateurs ou des mdias spciques. Les agents utilisateurs doivent permettre aux utilisateurs de choisir entre plusieurs feuilles de style alternatives ainsi que de dsactiver les feuilles de style. Il est possible de spcier une feuille de style prfre. Les agents utilisateurs doivent appliquer la feuille de style prfre de lauteur, sauf si lutilisateur slectionne une autre alternative. Plusieurs feuilles de style alternatives (y compris la prfre) peuvent tre regroupes sous un seul nom de style. Lorsquun utilisateur slectionne un style nomm, lagent utilisateur doit appliquer toutes les feuilles de style qui portent ce nom, mais pas celles qui portent un nom diffrent. Vous verrez plus loin comment nommer un groupe de feuilles de style. Il est galement possible de spcier des feuilles de style persistantes : elles sont appliques par lagent utilisateur en sus des ventuelles feuilles de style alternatives. Les agents utilisateurs doivent respecter les descripteurs de mdium lors de lapplication dune feuille de style. Ils doivent galement permettre aux utilisateurs de dsactiver entirement les feuilles de style de lauteur : aucune feuille de style nest applique, quelle soit persistante ou alternative. Les attributs de llment LINK jouent les rles suivants :
j

La valeur de lattribut rel indique si la feuille de style est persistante, prfre ou alternative. Si cet attribut possde la valeur "stylesheet", la feuille de style est persistante en labsence dattribut title et prfre si lattribut title est spci. La feuille de style est en revanche alternative si lattribut

304 LE GUIDE COMPLET

Feuille de style externe

Chapitre 8

rel possde la valeur "alternate stylesheet" et que la feuille est nomme laide de lattribut title. La valeur de lattribut type indique le langage de la ressource relie (la feuille de style). Cela vite lagent utilisateur de charger une feuille de style dans un langage de feuille de style non reconnu. La valeur de lattribut href est un URI, qui indique la localisation du chier 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 lattribut title comme nom pour chaque option. Vous pouvez galement employer un lment META pour dnir la feuille de style prfre du document. Par exemple, pour dnir comme feuille de style prfre une feuille nomme "favorite", placez ce qui suit dans llment HEAD :
<META http-equiv="Default-Style" content="favorite">

Si plusieurs dclarations META spcient la feuille de style prfre, seule la dernire est retenue. En revanche, si plusieurs lments LINK spcient une feuille de style prfre, seul le premier est retenu. Les feuilles de style prfres au moyen dlments META ont priorit sur celles spcies avec llment LINK.

Prise en compte du mdium

Pour tenir compte du mdium dans la liaison dune feuille de style, servez -vous de lattribut media dans llment LINK. Par exemple :
<LINK rel="stylesheet" type="text/css" media="print, handheld" href="styles.css">

Cet lment spcie que cette feuille de style sapplique aux priphriques dimpression et aux priphriques tenus la main (comme les tlphones portables et les assistants lectroniques personnels). Vous pouvez toutefois galement utiliser la rgle @media lintrieur dune feuille de style an que celle-ci puisse transmettre des informations diffrents types de mdias.

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

8.5. Proprits de feuille de style

Aprs avoir vu comment crer une feuille de style, tant locale quexterne, il est temps dexaminer plus en profondeur les proprits quil est possible de dnir dans une feuille de style. Souvenez-vous que, si HTML nest en rien li un langage de feuille de style spcique, nous traitons uniquement ici du langage CSS.

Proprits de modication de texte et de police

Les proprits les plus simples concernent la prsentation du contenu textuel dun document Depuis son invention, llment FONT posait quelques problmes aux concepteurs de pages Web. Il reste trs mal support par les anciens navigateurs et entre parfois en conit avec llment BODY. Les feuilles de style rsolvent fort adroitement les problmes poss par FONT. Les utilisateurs seront dans un proche avenir en mesure de dnir une feuille de style par dfaut pour leur navigateur, qui contiendra non seulement les couleurs et les tailles de police mais galement les espacements, les bordures et les indentations. Ces lments peuvent dj tous tre spcis laide dune feuille de style. Les proprits signales ici peuvent tre appliques tout lment qui possde un contenu texte. Pour modier la couleur dune portion de texte, employez la proprit
color. Par exemple :
<P style="color: #990000 ;">

place le paragraphe en rouge sombre (#990000).

306 LE GUIDE COMPLET

Proprits de feuille de style

Chapitre 8

Assurez-vous de bien fermer tout lment ayant recours des styles, faute de quoi ceux-ci sappliqueront llment suivant. Pour modier la couleur de fond, utilisez backgroundcolor
<P style=color: #990000 ; background-color: #66FFFF ;>

pour un texte rouge sombre sur fond bleu clair. Une couleur de fond applique du texte fait ressortir le texte en surbrillance. La proprit font recouvre plusieurs proprits apparentes :
j j

fontstyle dnit le type de la police. Les valeurs possibles sont normal, italic et oblique. fontweight dnit la graisse de la police. Les valeurs possibles sont les incrments successifs de 100 900 : normal (quivaut 400), bold (quivaut 700), bolder (graisse suprieure celle assigne une police, plus grasse que celle hrite par la police. Sil ny en a pas, la valeur de graisse de la proprit prend la valeur numrique suprieure, laspect de la police ne changeant pas. Si la valeur hrite est dj gale 900, la valeur rsultante reste 900), lighter (graisse infrieure celle assigne une police, moins grasse que celle hrite par la police. Sil ny en a pas, la valeur de graisse de la proprit prend la valeur numrique infrieure, laspect de la police ne changeant pas. Si la valeur hrite est dj gale 100, la valeur rsultante devient galement 100). fontsize dnit la taille de la police. La valeur peut tre une taille absolue : une taille en points ou un des mots-cls xxlarge, xlarge, large, medium, small, xsmall, xxsmall. Pour un cran, il est conseill un facteur dchelle de 1,2 entre les valeurs conscutives de la table. Ainsi, si la valeur medium correspond 12pt, la valeur large devrait correspondre 14.4pt. Les facteurs dchelle peuvent varier selon les mdias considrs. Par ailleurs, lagent utilisateur devrait prendre en compte la qualit et la disponibilit des polices au moment du calcul de cette table. Celle-ci peut aussi diffrer dune famille de polices une autre. La valeur peut galement tre une valeur relative, grce aux mots-cls larger et smaller (ce qui correspond un dplacement dune case dans lchelle prcdente), ou en pourcentage, par rapport la taille de la police de llment parent.

LE GUIDE COMPLET 307

Chapitre 8
j

Feuilles de style

fontfamily modie le type de police utilis dans une page. Vous pouvez dnir une fonte spcique, comme Arial ou Helvetica, ou vous contenter dutiliser un nom gnrique, comme sansserif ou serif. Vous pouvez dnir des familles

de polices : le navigateur essaye alors chaque police son tour et retient la premire quil comprend. Ainsi, avec comme style
font-family: Arial, Helvetica, sans-serif ;

le navigateur essaye dabord la police Arial (installe sur la plupart des PC), puis la police Helvetica (prsente sur la plupart des Macintoshs) et ensuite seulement la famille gnrique Sansserif, comprenant toutes les fontes dites non proportionnelles (contrairement Arial et Helvetica, qui sont des polices proportionnelles). Parmi les autres familles gnriques, vous trouvez serif, cursive, fantasy et monospace. Les familles de polices sont spares par des virgules, mais vriez quil ny ait pas de virgule avant le point-virgule nal.
Units de taille

Les lments peuvent avoir recours huit units diffrentes. j Les units relatives :
em (taille de la fonte actuelle), ex (hauteur de la fonte actuelle).
j

Les units absolues :

px (pixel), in (pouce), cm (centimtre), mm (millimtre), 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 units absolues devraient tre rserves aux cas pour lesquels vous connaissez les dimensions physiques du priphrique de sortie.

Il est souvent possible dabrger des proprits apparentes en les rassemblant dans une dnition unique, ce qui est souvent nomm raccourci. Cest le cas pour la proprit font. Par exemple, pour spcier quun lment doit se prsenter dans une fonte Arial ou Sans-serif en gras italique de petite taille, vous dnissez normalement comme suit les diffrentes proprits :
{font-style: italic ; font-weight: bold ; font-size: small ; font-family: Arial, sans-serif ; }

Vous pouvez cependant dnir en une seule fois toutes les proprits relatives aux polices. Vous devez pour cela dnir toutes ces proprits
308 LE GUIDE COMPLET

Proprits de feuille de style

Chapitre 8

selon un ordre particulier, en ne faisant apparatre que leurs valeurs. Lordre adquat est le suivant :
font-style font-weight font-size font-family

Cest ainsi que, dans lexemple prcdent, vous auriez pu utiliser :

{font: italic bold small Arial, sans-serif}

Lintrt de cette technique tient son gain de place, au prix dune perte de lisibilit. Les proprits individuelles sont spares par des espaces tandis que les valeurs multiples applicables une proprit (comme les valeurs de fontfamily) sont spares par des virgules. Vous dcouvrirez par la suite de nombreux autres exemples de notation raccourcie. Une autre proprit de police intressante, mais qui nappartient pas la notation raccourcie de la proprit font, est fontvariant. Dans une police en petites capitales, les lettres minuscules prsentent un aspect similaire aux lettres majuscules, avec toutefois une taille rduite et des proportions lgrement diffrentes. Ce type de police porte le nom de police bicamrale (qui possde deux casses, comme les critures latines). Les valeurs possibles sont normal (une police non tiquete comme tant en petites capitales) ou smallcaps (qui spcie une police tiquete comme tant en petites capitales). En labsence dune telle police, les agents utilisateurs devraient en effectuer la simulation, par exemple en slectionnant une police normale et en remplaant les lettres minuscules par des majuscules mises lchelle. En dernier ressort, les lettres majuscules inchanges dune police normale peuvent se substituer aux petites capitales : le texte apparat alors entirement en majuscules. Le tableau suivant dresse la liste des principales proprits de texte et de police.
Tableau 8.2 : Principales proprits de texte et de police de feuille

de style CSS Proprit Valeur(s) couleur hexadcimale ou nom couleur hexadcimale ou nom But Couleur darrireplan Couleur de texte

background color color

LE GUIDE COMPLET 309

Chapitre 8

Feuilles de style

Tableau 8.2 : Principales proprits de texte et de police de feuille

de style CSS Proprit Valeur(s) But Proprits de police Style de la police Graisse de la police Taille de la police

font fontstyle fontweight fontsize

fontstyle fontweight fontsize fontfamily normal, italic, oblique

Incrments de 100, normal, bold, bolder, lighter taille en points, xxlarge, xlarge, large, medium, small, xsmall, xxsmall, larger, smaller, pourcentage tout nom de police, serif, sansserif, cursive, fantasy, monospace

fontfamily

Police(s) ou famille(s) de polices employer Alignement du texte Enrichissement du texte Indentation du texte

textalign text decoration textindent

left, right, center, justify none, underline, overline, linethrough, blink

longueur en points, longueur en pourcentage

Nous avions employ les proprits textalign, fontsize et fontweight dans plusieurs des spcications de notre feuille de style, ainsi que color et fontvariant une fois chacune :
/* style.css : 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} P.legal {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} TD.droit {font-size: 14pt; text-align: right}

310 LE GUIDE COMPLET

Proprits de feuille de style

Chapitre 8

Reprsentation des lments laide dun style

Vous connaissez dj les lments bloc et la faon dont ils se positionnent lcran. laide de tableaux, vous pouvez tricher quant cette disposition, bien que cela soit un peu dlicat et demande de multiples ajustements. Jusqu maintenant, un conit fondamental existait en HTML entre une bonne compatibilit internavigateurs et la possibilit dafficher des informations sous forme graphique. Les feuilles de style permettent dtablir un compromis entre vos exigences de prsentation et les souhaits de votre public. Vous pouvez dnir les lments bloc au sein de la feuille de style dans des proprits de botes CSS et dterminer quand et o llment sera affich. Deux catgories principales de proprits doivent tre distingues ce stade : celles intrinsques llment, qui dnissent ses caractristiques internes, et celles relatives la page ou au ux du code HTML. Ces dernires dnissent la position de llment lcran (ou le cas chant sur le mdium concern).

Proprits intrinsques dun lment

Tout lment CSS se comporte comme une imbrication successive de quatre botes :
j

La bote externe est laire de marges. Elle occupe le maximum de lespace disponible (ou spci). Ces marges transparentes, dont les dimensions sont gres par la proprit margin, dnissent lespace transparent entre le bord de lcran (ou dun autre lment) et llment actif. lintrieur de laire de marges se trouve laire de bordures. Gre par la proprit border, elle reprsente les bordures affectes llment actif. Vient ensuite laire despacement : la surface entre le contenu et la limite intrieure de la bordure. Elle est gre par la proprit padding. Enn, la bote la plus intrieure est la bote de contenu. Elle renferme le contenu de llment actif.

LE GUIDE COMPLET 311

Chapitre 8

Feuilles de style

Figure 8.16 : Bote CSS

La proprit margin et ses proprits apparentes dnissent un espace transparent entre le bord de lcran (ou dun autre lment) et llment courant. Vous pouvez dnir la largeur (ou la hauteur) de chaque marge ou bien attribuer toutes les marges une mme valeur. Par exemple,
{margin: 10px}

cre une marge de 10 pixels autour de llment bloc. Vous pouvez spcier sparment la taille de chaque marge en faisant suivre lattribut dun tiret puis de lemplacement concern : margintop, marginright, marginbottom et marginleft. Ainsi,
{margin-top: 1px ; margin-right: 10px ; margin-bottom: 1px ; margin-left: 10px ;}

procure-t-il llment concern des marges suprieure et infrieure dun pixel, mais des marges droite et gauche de 10 pixels. Vous pouvez spcier comme valeur pour cet attribut une valeur absolue (comme dans lexemple), un pourcentage (par exemple, margin: 10% impose des marges de chaque ct de 10 % de lespace disponible) ou choisir la valeur auto. Comme pour la proprit font, les proprits de bote possdent galement une forme raccourcie, plus simple mais moins lisible. Pour la proprit margin, les valeurs doivent tre places dans lordre suivant :
{margin: haut droit bas gauche}

312 LE GUIDE COMPLET

Proprits de feuille de style

Chapitre 8

Remarquez que seuls des espaces sparent les valeurs individuelles. Lexemple prcdent, avec une marge dun 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 spcication CSS 2.1, les marges horizontales ne fusionnent jamais, de mme que les marges verticales dlments positionns de faon absolue, ottants, en ligne (inline) ou avec un attribut overflow x autre chose que visible, ainsi que les marges de llment racine. Deux ou plus marges verticales adjacentes situes dans le ux normal peuvent fusionner. La largeur de la marge rsultante est la largeur maximale de la largeur des marges concernes. Dans le cas de marges ngatives, la valeur absolue maximale des marges ngatives est dduite de la valeur maximale des marges positives, ou de zro en labsence de marge positive, Les bordures sont dnies laide de la proprit border et de ses proprits apparentes :
j

borderwidth dnit la largeur de la bordure. Les largeurs peuvent tre dnies avec les valeurs thin (mince), thick (paisse), medium (moyenne) ou exprimes en points. Vous pouvez dnir individuellement la largeur de la bordure de chaque ct laide de bordertopwidth, border rightwidth, borderbottomwidth et borderleft width. Lordre abrg de la proprit borderwidth est identique celui de margin, soit :
{border-width: haut droite bas gauche}

borderstyle permet de dnir un style de bordure. Cette proprit peut recevoir les valeurs none (aucune), dotted (pointills), 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). bordercolor est similaire la proprit color dun lment. Elle semploie de la mme faon.

La proprit border possde une forme raccourcie, qui permet dappliquer les valeurs transmises toutes les bordures dun mme lment. Lordre 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 spcier de valeur que pour la bordure du haut (ou celle de droite, du bas ou de gauche) laide de la proprit bordertop (ou right, bottom ou left) selon cet ordre :
{border-top: border-top-width border-style color;}

Enn, la proprit padding utilise la mme syntaxe que la proprit margin, y compris la syntaxe raccourcie. Cest une proprit tablissant un espace vierge autour du contenu de llment, lintrieur de la bordure. Les proprits du contenu dun lment sont height et width. Ils sont analogues aux attributs correspondants et dterminent la hauteur et la largeur du contenu. Cela signie que, pour obtenir la taille totale de llment, vous devez ajouter successivement lespacement, la bordure et la marge. Ces proprits acceptent une valeur absolue ou en pourcentage, ainsi que la valeur auto. Le comportement de cette dernire valeur est quelque peu complexe et dpasse la porte de ce livre. Reportez-vous la section 10.3, Le calcul des largeurs et des marges, de la spcication CSS2, ladresse www.yoyodesign.org/doc/w3c /css2/visudet.html#Computing_widths_and_margins Ces proprits nacceptent pas de valeurs ngatives. La proprit overflow permet de dnir ce qui doit se passer quand le contenu de llment excde lespace dni. Les valeurs acceptables sont visible (le contenu nest pas tronqu et peut tre reprsent hors de la bote du bloc), hidden (le contenu est tronqu et aucun mcanisme de dlement nest fourni pour voir la partie rogne. La taille et la forme du reliquat du rognage peuvent tre spcies par la proprit clip), scroll (le contenu est tronqu et lagent utilisateur fournit si possible un mcanisme de dlement visible lcran, tel quune barre de dlement. Ce dispositif apparat que le contenu de llment soit tronqu ou non) ou auto. Mme lorsque la valeur de la proprit overflow est visible, le contenu peut tre rogn par le systme dexploitation pour tenir dans la fentre du document de lagent utilisateur. Le tableau suivant rsume ces proprits, leurs valeurs et leurs effets.

314 LE GUIDE COMPLET

Proprits de feuille de style

Tableau 8.3 : Proprits intrinsques dun lment

Chapitre 8

Proprit

Valeur longueur, pourcentage ou

Exemple

Effet Impose llment une largeur de cent points. Peut ainsi remplacer un tableau. Impose llment une hauteur de vingt points Cre une marge de dix points autour de llment Cre une bordure mince en haut et en bas, et une bordure paisse sur les cts. Cre une bordure paisse autour de llment

width

width: 100pt

auto

height

longueur ou auto

height: 20pt margin: 10pt border width: thin thick thin thick border style: double

margin

longueur, pourcentage ou

auto border width thin, medium, thick, longueur

border style

none, dotted, dashed, solid, double , groove, ridge, inset ou outset border-width border-style border-color
longueur, pourcentage ou

border

border: 4pt double #000000 padding: 10px

Ajoute une marge double de quatre points autour du contenu Ajoute un espacement de dix pixels entre le contenu et la bordure

padding

auto

Nous avions employ plusieurs de ces proprits dans notre chier style.css :
/* style.css : 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} P.legal {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} TD.droit {font-size: 14pt; text-align: right}

Incompatibilits 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 problmes : j La proprit padding des feuilles de style ntait pas reconnue. Il fallait employer la place topPadding, rightPadding, bottomPadding ou leftPadding. j La proprit margins des feuilles de style ntait pas reconnue. Il fallait employer leftMargin, rightMargin ou bottomMargin. j Les proprits width, height et border appliques aux images dans les feuilles de style ntaient 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.

Proprits de positionnement dun lment

Ces proprits dnissent lemplacement dapparition de llment actif sur le mdium considr. Elle sont dsormais 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 dcouvrir consiste prendre un exemple. Examinez le listing suivant :
Listing 8-3 : position0.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>"Positions CSS dun &eacute;l&eacute;ment"</TITLE>

316 LE GUIDE COMPLET

Proprits 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 soleil.jpg" 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 soleil.jpg" 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 soleil.jpg" 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 soleil.jpg" 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 rptition de quatre paragraphes de texte, dans lesquels est insre une image. En labsence de spcication de position particulire, les lments respectent le ux normal du code. En examinant ce chier dans votre navigateur, vous observez quelque chose danalogue la gure suivante : un empilement des quatre paragraphes, centrs en raison de lattribut style="textalign: center" de llment BODY.

LE GUIDE COMPLET 317

Chapitre 8

Feuilles de style

Figure 8.17 : Flux HTML normal

Modions maintenant ce chier, en ajoutant des attributs style aux trois derniers paragraphes, ainsi que quelques commentaires. Nous obtenons le listing suivant, dans lequel les modications sont notes en gras :
Listing 8-4 : position.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>"Positions CSS dun &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 lments similaires, dont seuls les attributs style diffrent --> <!-- Flux normal --> <P><IMG src="Images/coucher de soleil.jpg" 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 soleil.jpg" 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

Proprits 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 soleil.jpg" 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 safficher 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 soleil.jpg" 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 saffiche de faon absolue par rapport l&agrave;cran.<BR> Ceci est un paragraphe de texte normal. </P> </BODY> </HTML>

En examinant ce chier dans votre navigateur, vous observez quelque chose danalogue la gure suivante : les quatre paragraphes sont dsormais rpartis lcran dans un ordre diffrent de celui de leur apparition dans le code.

Figure 8.18 : Positionnements dlments

LE GUIDE COMPLET 319

Chapitre 8

Feuilles de style

Analysons un peu ce qui se passe :

j

j j

Le premier paragraphe respecte le ux HTML normal. Il est entr en dessous du titre, exactement comme dans la copie dcran prcdente. Le second paragraphe est plac dans une bote ottante positionne gauche : il est retir du ux normal. Le troisime paragraphe se voit attribuer une position relative par rapport llment prcdent : lgrement plus haut et franchement plus droite. En revanche, le quatrime paragraphe se voit attribuer une position absolue par rapport lcran : en haut et gauche de celui-ci.

Le dernier paragraphe est particulirement intressant. Pour vous en convaincre, rduisez la largeur de la fentre de votre navigateur, et faites, si ncessaire et possible, dler la fentre : le quatrime paragraphe se dplace en consquence et occupe toujours le mme emplacement lcran !

Figure 8.19 : Un lment positionn de faon absolue occupe toujours la mme position lcran

Cet exemple devrait vous ouvrir un certain nombre de possibilits. Tout dabord, plus besoin de tableaux, puisque vous pouvez dnir lemplacement dun lment en fonction de llment prcdent. Ensuite, un lment dni en position absolue (par exemple en haut gauche) peut constituer un magnique logo, toujours affich au mme emplacement, mme lorsque lutilisateur fait dler une page Remarquez toutefois que ces types de positionnement peuvent amener un recouvrement des diffrents lments, ce qui nest gure
320 LE GUIDE COMPLET

Proprits de feuille de style

Chapitre 8

souhaitable. Heureusement, comme vous allez le voir, il existe des moyens de pallier ce problme Regardons de plus prs les diffrentes proprits mises en uvre lors du positionnement dlments. La proprit float spcie quune bote doit tre ottante gauche, droite ou pas du tout. Elle peut tre spcie pour tout lment, mais ne sapplique quaux lments qui ne sont pas positionns de faon absolue. La proprit clear (non employe dans cet exemple) indique quels cts dune bote dlment ne peuvent pas tre adjacents une bote ottante antrieure. Elle ne concerne pas les ventuels lments ottants lintrieur de llment concern ou dans dautres contextes de mise en forme. Cest un espacement au-dessus de la marge suprieure dun lment, qui sert pousser verticalement llment au-del de la bote ottante, gnralement vers le bas. La proprit position dtermine si la position dun lment est absolute, relative ou static. Sa valeur par dfaut est static, ce qui signie que llment apparat selon son chargement, en principe selon sa place dans le code source. Une position absolute signie que la position de llment est xe par rapport au coin suprieur gauche du mdium (gnralement lcran). Comme nous lavons signal, un lment dot de ce type de position peut recouvrir un autre lment, puisquil est retir du ux normal. Si la proprit position possde comme valeur relative, llment sera plac en fonction de son parent ou de son voisin. Si llment parent a recours une position absolute, alors llment relative apparatra la suite de celui-ci et pourra galement recouvrir dautres lments : il est lui aussi retir du ux normal. Les proprits left et top dnissent lendroit o llment doit tre plac par rapport aux cts de lcran (ou, dans le cas dun lment enfant, aux cts de llment parent). Les valeurs sont exprimes en points ou en pourcentage. Pour grer les possibles recouvrements, servez-vous de la proprit zindex. Elle permet de contrler llment devant apparatre audessus dun autre en cas de recouvrement de positions absolues : un peu comme les couches dun programme de dessin.
LE GUIDE COMPLET 321

Chapitre 8

Feuilles de style

clip dnit un rognage de llment, tandis que visibility permet dtablir si llment est visible ou non. Un lment visibility: hidden occupe son espace, mais nest pas visible lcran.

Ces proprits, leurs valeurs et leurs buts sont prsents dans le tableau suivant.
Tableau 8.4 : Proprits CSS de positionnement des lments

Proprit

Valeur

Exemple

Effet
Place llment dans un rectangle ottant sur la gauche Place llment lcran sans tenir compte des autres lments de la page Place llment dix points du haut du document ou de llment parent Place llment quinze point de la gauche du document ou de llment parent Rogne cinq pixels du haut et du bas, et dix pixels sur les cts.

float

left, right, none ou inherit absolute, relative, static

float: left position: absolute

position

top

longueur ou pourcentage

top: 10pt

left

longueur ou pourcentage

left: 15pt

clip

shape (topvalue, rightvalue, bottomvalue, leftvalue) visible, hidden, auto, scroll

Entier

clip: rect (5 10 5 10)

overflow

overflow: scroll zindex: 1 Clear: left

Attribue llment une barre de dlement, quil en ait besoin ou non. Place dabord le premier lment et empile dessus les suivants La bote est dcale de lespace ncessaire pour placer le bord de la bordure suprieure en dessous du bord infrieur de toute bote ottante due un lment antrieur dans le document source.

zindex

clear

none, left, right, both ou inherit

322 LE GUIDE COMPLET

Feuille de style en cascade

Chapitre 8

Une mise en uvre efficace de ces proprits demande souvent pas mal de ttonnements. Le rsultat est toutefois souvent la hauteur des efforts engags Souvenez-vous que nous avions dit que les feuilles de style reprsentaient 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 lassemblage des informations de style provenant de plusieurs sources. Pour dnir une cascade, lauteur spcie une succession dlments LINK et/ou STYLE. Les informations de style se rpandent en cascade selon lordre dapparition des lments dans la section HEAD.
Gare aux mlanges

La spcication HTML 4.01 ne prcise pas la manire dont cascadent les feuilles de style issues de diffrents langages de style. Mieux vaut viter de mlanger les langages de feuilles de style.

La cascade peut inclure des feuilles de style qui concernent diffrents mdias. Les lments LINK et STYLE peuvent tous deux tre utiliss avec lattribut media. Lagent utilisateur est alors responsable de llimination des feuilles de style qui ne sappliquent pas au mdium courant. Cette notion de cascade semble alors poser quelques problmes : comment lagent utilisateur sait-il quelle feuille de style doit tre applique ? Pour le cas dun mdium de sortie, la chose est claire, mais nous avons vu quil pouvait exister plusieurs feuilles de style en cascade (une ou plusieurs feuilles externes, des lments STYLE et des attributs style). Cela nous amne la notion dhritage.

Cascade et hritage
Lorsquun agent utilisateur veut restituer un document, il doit identier les valeurs des proprits de style : la famille de police, le style de la police, la taille, la hauteur de ligne, la couleur du texte, etc. Le mcanisme exact dpend du langage de feuille de style, mais la description qui suit est gnralement applicable.

LE GUIDE COMPLET 323

Chapitre 8

Feuilles de style

Le mcanisme de cascade est utilis quand un certain nombre de rgles de style sappliquent toutes directement un lment. Il permet lagent utilisateur de classer les rgles selon leur spcicit pour dterminer celle qui est applicable. Si aucune rgle nest trouve, ltape suivante va dpendre de la proprit de style : est-elle hritable ? Toutes ne le sont pas. Le langage de feuille de style fournit alors des valeurs par dfaut, utilises en labsence de rgle explicite pour un lment particulier. Si la proprit peut shriter, lagent utilisateur examine llment englobant immdiat pour voir si une rgle sy applique. Ce processus continue jusqu lidentication dune rgle applicable. Ce mcanisme autorise une spcication compacte des feuilles de style. Par exemple, lauteur peut spcier le type dalignement du texte pour tous les lments de BODY par une seule rgle applique llment BODY. Cest ce que nous avions fait dans les chiers position0.html et position.html :
<BODY style="text-align: center">

Fondamentalement, tout lment inclus dans un autre hrite du style de celui-ci, moins que la feuille de style ne prcise le contraire. Par exemple, la plupart des lments sont inclus dans llment BODY. Si celui-ci est dni comme devant comporter du texte centr de couleur bleue, tous les lments de BODY possderont un texte bleu centr. Mme si un lment particulier, comme H, est galement dni dans la feuille de style, il hrite des proprits de BODY moins que ses proprits color et background ne soient explicitement spcies dans la feuille de style. La thorie de lhritage est donc trs simple : vous partez de linformation la plus externe (la feuille de style externe) et progressez vers lintrieur. Un lment inclus dans un autre lment hrite de ses proprits sauf sil dispose dun style modiant tout ou partie de ces proprits. Une feuille de style externe est surpasse par une feuille interne, elle-mme dpasse par un style dni lintrieur de llment, lui-mme surpass pour un lment enfant par un style dni dans celui-ci. Voici lordre dhritage, par priorit croissante :
j j j

Proprits dnies par lutilisateur pour llment courant. Proprits de feuille de style externe de llment parent. Proprits de feuille de style locale de llment parent.

324 LE GUIDE COMPLET

Feuille de style en cascade

j j j j

Chapitre 8

Styles de ligne de llment parent. Proprits de feuille de style externe de llment courant. Proprits de feuille de style locale de llment courant. Styles de ligne de llment courant.

Vous voyez apparatre dans cette liste un lment curieux : la notion de feuille de style dnie par lutilisateur. Vous lavez probablement dj fait sans le savoir : il sagit de la modication des proprits de votre agent utilisateur, par exemple de votre navigateur. Prenons un exemple. Avec Firefox dabord :

1 Ouvrez Firefox, puis chargez le chier index.html de votre site. Vous devez voir votre familire page daccueil.

Figure 8.20 : Page daccueil de votre site

2 Choisissez dans la barre de menu Affichage > Style de la page > Aucun style. Toute la mise en forme dnie dans la feuille de style disparat.

Figure 8.21 : Page daccueil de votre site, sans feuille de style.

LE GUIDE COMPLET 325

Chapitre 8

Feuilles de style

Choisissez nouveau Affichage > Style de la page puis slectionnez Style de base de la page pour retrouver un affichage normal. Vous avez ici ordonn lagent utilisateur dignorer toute feuille de style. Vous pouvez toutefois agir sur la page dautres faons.

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

Figure 8.22 : Page daccueil de votre site, avec augmentation de la taille des polices.

Leffet est exactement identique lapplication gnrale de la proprit fontsize: larger. Vous pouvez augmenter plusieurs reprises la taille des polices, ou inversement la diminuer. Aprs avoir procd quelques essais, choisissez Affichage > Taille de texte > Normale pour retrouver un affichage normal. Vous pouvez galement agir sur la police par dfaut, ainsi que sur la couleur de divers lments, en choisissant Outils > Options. Slectionnez Gnral et choisissez Couleurs et police.

Figure 8.23 : Fentre couleurs et polices de Firefox

326 LE GUIDE COMPLET

Feuille de style en cascade

Chapitre 8

Dautres paramtres peuvent galement tre modis dans la section Avanc des Options, comme le redimensionnement automatique des images trop grandes pour laffichage dans la fentre de navigation. Des modications similaires sont possibles avec Internet Explorer ( partir de sa version 4) et celui-ci offre en outre la possibilit demployer une feuille de style personnalise.

1 Ouvrez Internet Explorer, puis cliquez sur Outils > Options Internet. 2 Dans longlet Gnral, cliquez sur le bouton Accessibilit.

Figure 8.24 : Fentre Accessibilit dInternet Explorer

3 Cochez la case ct de loption Mettre les documents en forme en utilisant ma feuille de style, puis saisissez dans la bote de dialogue le chemin daccs et le nom de la feuille. 4 Remarquez que, mme sans dnir de feuille de style personnelle, vous pouvez dcider dans cette fentre dignorer les spcications de couleur, de nom et de taille de polices des pages que vous affichez.

Figure 8.25 : Fentre permettant de dnir vos prfrences, qui outrepassent les spcications de style des pages affiches.

5 Cliquez sur OK pour sortir de loption Accessibilit. Les autres boutons de la fentre Gnral permettent de spcier les couleurs, les polices et la langue.

LE GUIDE COMPLET 327

Chapitre 8

Feuilles de style

Figure 8.26 : Autre fentre.

Figure 8.27 : Encore une autre.

Cliquez de nouveau sur OK pour enregistrer vos nouveaux rglages des Options Internet. Lcran affiche alors les pages en mlant les feuilles de style de lutilisateur et celles du crateur du site.

8.7. Feuille de style auditive, pour un public particulier

Comme nous lavons signal, vous pouvez dnir plusieurs feuilles de style, adaptes chacune aux caractristiques du mdium sur lequel le document doit tre restitu (par exemple : cran graphique, cran de tlvision, appareil de poche, navigateur synthse vocale, appareil tactile braille, etc.). Les feuilles de style disposent de plusieurs moyens pour prsenter des informations des utilisateurs parcourant le Web laide de navigateurs non standard. Par exemple, certaines proprits des feuilles de style
328 LE GUIDE COMPLET

Feuille de style auditive, pour un public particulier

Chapitre 8

permettent de dnir la pagination, en cas dimpression de la page. De faon similaire, le W3C a congur plusieurs proprits concernant des priphriques auditifs ou audio. Une feuille de style auditive peut tre utilise par un malvoyant, avec des navigateurs mains libres ou des priphriques comparables texteparole. Outre permettre la prsentation du contenu normal dune page Web, une feuille de style auditive autorise les concepteurs Web avoir recours des effets sonores particuliers, comme des prcisions, des orateurs multiples ou des modications dintonation. Voici un exemple de feuille de style possdant des proprits auditives :
Listing 8-5 : styleaudit.css
/* styleaudit.css : Feuille de style proprits auditives */ BODY {color: #000000 ; background: #FFFFFF; text-align: left} .direction {margin-left: 10%; font-family: monospace; font-style: italic; color: #000080; speak: none} SPAN.direction {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 lemploi de classes (.direction, par exemple) sans signalisation par un lment : le style dni sapplique alors toutes les instances de cette classe, quel que soit llment concern. Comme nous voulons supprimer lindentation pour une indication de mise en scne en ligne, nous avons spci une marge 0 pour llment SPAN.direction. Cette feuille de style est lie au chier suivant :
Listing 8-6 : romeo.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <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="styleaudit.css"> </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; ! quon 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 prononces laide des voix adquates. Si toute la pice tait ainsi mise en forme
330 LE GUIDE COMPLET

Feuille de style auditive, pour un public particulier

Chapitre 8

dans un chier HTML, il serait possible tous les acteurs de rpter laide dun ordinateur : il suffirait de dsactiver la lecture des rpliques qui le concerne dans la feuille de style. Les autres rpliques seraient encore lues par lagent utilisateur.

Figure 8.28 : Aspect de lextrait de Romo et Juliette

La proprit sonore la plus importante est speak. Pour dsactiver totalement la lecture vocale dun lment, xez sa valeur none, comme nous lavons fait pour les indications de mise en scne :
.direction {margin-left: 10%; font-family: monospace; font-style: italic; color: #000080; speak: none}

Cet lment ne sera pas lu (parl), bien que cette proprit puisse tre ignore par certains convertisseurs texte-parole. La valeur spellout permet aux mots concerns dtre pels, 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 dun signal sonore grce la proprit cue. Par exemple :
cue: url("pop.au")

Vous pouvez placer lindice avant ou aprs, laide des proprits cuebefore et cueafter. Vous pouvez aussi facilement ajouter une courte pause avant ou aprs le signal. Utilisez ainsi
pause: 20ms

pour crer une pause de vingt millisecondes avant et aprs llment. Vous pouvez galement avoir recours aux proprits pausebefore et
LE GUIDE COMPLET 331

Chapitre 8

Feuilles de style

pauseafter avec la mme syntaxe. La proprit pause dispose dun

raccourci :
pause: pause-before-value pause-after-value

Comme cela tait mentionn plus haut, une feuille de style auditive permet davoir recours plusieurs orateurs. Les proprits azimuth (direction), elevation (hauteur) et voicefamily permettent dajouter des effets saisissants votre page Web. Bien videmment, ces proprits peuvent tre ou non rendues correctement selon lagent utilisateur concern, mais cette dmarche ambitieuse est la premire tape vers un format Web audio utilisable de faon universelle. Servez-vous de la proprit volume pour ajuster le niveau sonore rendu par le programme. Une valeur silent impose au programme dattendre aussi longtemps quil laurait fallu pour lire le texte, mais sans que vous nentendiez rien : cest ce quil faudrait employer pour faire rpter lacteur jouant Capulet, en modiant comme suit son style :
.Capulet {speak: normal; voice-family: male; volume: silent}

Voici quelques autres moyens de modier les proprits de la voix : pitch rend la voix plus aigu ou plus grave, voicefamily permet de choisir entre une voix dhomme, de femme ou denfant, ou bien dutiliser une police de voix propre au navigateur. speechrate acclre ou ralentit le dbit vocal, tandis que richness et stress autorisent la modication de certains attributs de la voix elle-mme. Nous avons ici employ une unique feuille de style qui combinait prsentations visuelle et sonore. Il existe deux autres mthodes pour mieux sparer les proprits en fonction du priphrique de sortie. Noubliez pas que, chaque fois que vous rpartissez des instructions en catgories bien distinctes, vous facilitez dautant la maintenance ultrieure. La premire mthode consiste employer au sein dun unique chier la rgle @media :
Listing 8-7 : styleaudit2.css
/* styleaudit2.css : Feuille de style proprits 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} SPAN.direction {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 crer deux feuilles distinctes et de recourir un attribut media lors de la liaison de ces feuilles au chier concern :
Listing 8-8 : visuel.css
/* visuel.css : Feuille de style proprits uniquement visuelles */ BODY {color: #000000 ; background: #FFFFFF; text-align: left} .direction {margin-left: 10%; font-family: monospace; font-style: italic; color: #000080} SPAN.direction {margin-left: 0px;} .off {font-variant: small-caps}

Listing 8-9 : audit.css

/* audit.css : Feuille de style proprits 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 chier romeo.html laide des deux lments LINK suivants, dots dun attribut media :
<LINK rel="STYLESHEET" type="text/css" href="visuel.css" media="screen"> <LINK rel="STYLESHEET" type="text/css" href="audit.css" media="speech">

Nous avons examin ici le cas dune prsentation la fois visuelle et auditive, mais vous pourriez faire de mme pour une prsentation en vue dune impression, ou pour distinguer une prsentation sur cran dordinateur dune prsentation laide dun vido-projecteur.

LE GUIDE COMPLET 333

Chapitre 8

Feuilles de style

Pourquoi des diffrences entre impression, cran dordinateur et vido-projection ?

Un cran dordinateur fonctionne par mission de lumire : celle-ci provient soit de son tube cathodique, soit des cristaux liquides ou dun dispositif similaire. De ce fait, des pages plutt claires avec un texte sombre sont gnralement prfrables. Ce fait est encore plus agrant pour une impression, surtout en noir et blanc, pour laquelle il vaut mieux rduire les surfaces sombres imprimes (pour des raisons dconomies dencre et de lisibilit). Cest exactement le contraire avec un vido-projecteur ou un rtroprojecteur, puisque les participants ne voient quune lumire rchie par lcran : des pages fonces avec un texte clair sont gnralement moins fatigantes et possdent un impact suprieur. Inconvnient toutefois pour des transparents de rtroprojection : vous consommez alors beaucoup plus dencre

Figure 8.29 : Une telle page est parfaite pour un affichage cran ou une impression

Figure 8.30 : En revanche, cette version est mieux adapte une vido-projection.

334 LE GUIDE COMPLET

Rsum

Chapitre 8

En conclusion, les feuilles de style vous offrent un mcanisme dune rare puissance pour adapter parfaitement le contenu de vos pages et documents Web au public vis. Leur tude complte dpasse largement la porte de ce livre, puisque la spcication CSS2 est aussi, sinon plus complexe que la spcication HTML 4.01.

8.8. Rsum
j

j j

La plupart des attributs et lments relatifs la mise en forme et la prsentation des pages Web sont dsormais dconseills en faveur du recours aux feuilles de style. La spcication HTML 4.01 ne lie pas HTML un langage de style particulier. Cela permet lutilisation potentielle de plusieurs langages. Le langage le plus frquemment employ est CSS (Cascading Style Sheet), fond sur la Recommandation W3C CSS 2.1 (http://www.w3.org/TR/CSS21/cover.html#minitoc), dans lattente de la diffusion nale de la version 3. Vous spciez le langage de feuille de style laide dun lment META. Vous pouvez inclure des styles dans une page Web de trois faons diffrentes : laide de lattribut style, plac dans pratiquement dans nimporte quel lment ; laide dun lment STYLE plac dans llment HEAD, un lment STYLE pouvant renfermer plusieurs dnitions de style ; en crant une feuille de style externe, indpendante du document HTML. Vous liez ensuite cette feuille externe votre document HTML laide dun lment LINK.

Vous pouvez dnir le style de toutes les occurrences dun lment, dune classe spcique ou dun id spcique. Ces possibilits ne sont pas mutuellement exclusives. HTML permet aux auteurs de spcier les documents exploitant les caractristiques du mdium sur lequel le document doit tre restitu (par exemple : cran graphique, cran de tlvision, appareil de poche, navigateur synthse vocale, appareil tactile braille, etc.). Cela est effectu laide de lattribut media de llment STYLE.

LE GUIDE COMPLET 335

Chapitre 8
j j

Feuilles de style

j j

Le contenu de llment STYLE doit tre masqu vis--vis des agents utilisateurs qui ne reconnaissent pas les feuilles de style. Une feuille de style est un simple chier texte qui indique lagent utilisateur comment restituer votre code HTML. Les feuilles de style externes emmnent HTML un pas plus avant dans la sparation russie des logiques de travail et de prsentation. Un nom de chier de feuille de style se termine par une extension .css. Une feuille de style externe peut tre dnie comme persistante, prfre ou alternative. Outre les proprits de modication des caractristiques du texte et des polices, CSS propose des proprits de positionnement. Celles-ci permettent de saffranchir en partie ou en totalit du ux normal du code HTML. Tout lment CSS se comporte comme une bote dote de proprits soit intrinsques, soit relatives un ou plusieurs autres lments ou au document. Les langages de feuille de style en cascade, tel que CSS, autorisent lassemblage des informations de style provenant de plusieurs sources. Pour dnir une cascade, lauteur spcie une succession dlments LINK et/ou STYLE. Les informations de style se rpandent en cascade selon lordre dapparition des lments dans la section HEAD. Un lment inclus dans un autre lment hrite de ses proprits sauf sil dispose dun style modiant tout ou partie de ces proprits. Une feuille de style externe est surpasse par une feuille interne, elle-mme dpasse par un style dni lintrieur de llment, lui-mme surpass pour un lment enfant par un style dni dans celui-ci. Il est possible de paramtrer un agent utilisateur an quil ignore tout ou partie des feuilles de style prvues par lauteur, et mme parfois dappliquer sa propre feuille de style utilisateur. Une feuille de style proprits auditives est un exemple de feuille de style adapte aux caractristiques du mdium sur lequel le document doit tre restitu.

336 LE GUIDE COMPLET

Formulaires

Constituants dun formulaire ........................................................................................... 339 Formulaire et focus ............................................................................................................ 362 Commandes inactives et en lecture seule ................................................................... 368 Soumission du formulaire ................................................................................................ 370 Remarques propos des formulaires ........................................................................... 375 Rsum ................................................................................................................................ 376

Chapitre 9

Formulaires

Un formulaire constitue un moyen dapporter un peu dinteractivit une page HTML. Il peut permettre de slectionner une langue, une feuille de style particulire, de personnaliser laffichage (comme pour un Bienvenue votre_nom ) et bien dautres choses encore. Ds le prochain chapitre, quand vous en apprendrez plus sur les scripts, les formulaires deviendront trs importants. La plupart des scripts ont recours des formulaires pour ajouter du dynamisme un site. Un script peut valider le contenu dun formulaire avant de le soumettre un autre script, ou mme 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 enregistrs sur lordinateur de lutilisateur, et non sur le serveur Web. Grce aux scripts et aux formulaires, vous pouvez crer de puissantes applications qui rduisent le poids impos aux ressources de votre serveur. Un formulaire HTML est une partie du document constitue dun contenu normal, dun balisage, mais surtout dlments spciaux tiquets appels commandes (cases cocher, boutons doption, menus, etc.). Lutilisateur remplit gnralement le formulaire en modiant ses commandes (en saisissant un texte, en slectionnant les articles dun menu, etc.), avant de le soumettre un agent pour traitement (par exemple, un serveur Web, un serveur de messagerie, etc.). Ce chapitre prsente les principaux constituants des formulaires Web, ainsi que la faon de les concevoir. Le Chapitre 10, consacr aux scripts, traitera plus en dtail de lemploi de scripts pour traiter les informations dun formulaire. lments et attributs tudis :
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 dun formulaire

Chapitre 9

9.1. Constituants dun formulaire

lment FORM
Voici un extrait de chier qui cre un formulaire simple. Celui-ci comprend des tiquettes ou libells (labels), des boutons doption et des boutons de commande (pour rinitialiser le formulaire ou le soumettre) :
<FORM action="http://unsite.com/prog/ajoutermembre" method="post"> <P> <LABEL for="prenom">Pr&eacute;nom : </LABEL> <INPUT type="text" id="prenom"><BR> <LABEL for="nom">Nom : </LABEL> <INPUT type="text" id="nom"><BR> <LABEL for="email">e-mail : </LABEL> <INPUT type="text" id="email"><BR> <INPUT type="radio" name="genre" value="homme"> Homme<BR> <INPUT type="radio" name="genre" value="femme"> Femme<BR> <INPUT type="submit" value="Envoyer"> <INPUT type="reset"> </P> </FORM>

Affich dans un navigateur, cet extrait de chier affiche laspect prsent dans la gure suivante.

Figure 9.1 : Exemple de formulaire

Il est vrai que laspect nest pas parfait, mais vous savez comment lamliorer si vous le voulez Vous crez un formulaire dans une page HTML laide de llment FORM. Ses balises douverture et de fermeture sont obligatoires.

LE GUIDE COMPLET 339

Chapitre 9

Formulaires

Llment FORM agit comme conteneur gnral du formulaire, notamment pour les commandes. Il spcie :
j j

j j

La disposition du formulaire (dnie par le contenu de llment). Le programme qui va manipuler le formulaire rempli puis soumis. Le programme rcepteur doit tre capable danalyser les couples nom/valeur an de les utiliser. La mthode selon laquelle les donnes de lutilisateur seront envoyes au serveur. Lencodage de caractres qui doit tre accept par le serveur pour manipuler ce formulaire. Les agents utilisateurs peuvent avertir lutilisateur de lencodage accept et/ou empcher que celui-ci nentre des caractres non reconnus.

Un formulaire peut contenir un texte et un balisage (paragraphes, listes, etc.) en plus de commandes. Il accomplit tout ceci laide de plusieurs attributs fondamentaux :
j

Lattribut action spcie lagent charg du traitement du formulaire. Le comportement de lagent utilisateur pour une valeur autre quun URI http est indni. Lattribut method spcie la mthode HTTP qui sera employe pour soumettre le jeu des donnes de formulaire. Les valeurs possibles (insensibles la casse) sont get (la valeur par dfaut) et post. Nous reviendrons plus loin sur la signication de ces deux mthodes. Lattribut name nomme llment pour quil puisse tre appel par une feuille de style ou un script. Cet attribut est dsormais dconseill : mieux vaut employer lattribut id pour identier les lments. Lattribut enctype spcie le type de contenu dni pour la soumission du formulaire au serveur (lorsque la valeur de method est post). La valeur par dfaut de cet attribut est application/xwwwformurlencoded. La valeur multipart/ formdata doit tre employe avec llment INPUT lorsque celui-ci est dni comme type="file". Lattribut acceptcharset spcie la liste des encodages de caractres des donnes saisies qui sont accepts par le serveur traitant ce formulaire. La valeur est une liste de valeurs de jeu de caractres, spares par des espaces et/ou des virgules. Le client doit interprter cette liste comme une liste de type OU

340 LE GUIDE COMPLET

Constituants dun formulaire

Chapitre 9

exclusif . La valeur par dfaut de cet attribut est la chane rserve UNKNOWN. Les agents utilisateurs peuvent interprter cette valeur comme reprsentant lencodage de caractres employ pour transmettre le document contenant llment FORM en question. Enn, lattribut accept spcie la liste de types de contenu, spars par des virgules, que le serveur qui traite ce formulaire prend correctement en charge. Lagent utilisateur peut utiliser ces informations pour liminer les chiers non conformes quand il demande lutilisateur de slectionner un chier envoyer au serveur.

Types de commandes de formulaire

Les utilisateurs interagissent avec les formulaires au moyen de commandes nommes. Le nom de commande dune commande est spci par son attribut name. La porte de lattribut name dune commande au sein dun lment FORM est cet lment FORM. Chaque commande possde la fois une valeur initiale et une valeur courante, toutes deux des chanes de caractres. La valeur initiale dune commande peut gnralement tre spcie laide de lattribut value de llment de commande. La valeur courante dune commande est dabord gale la valeur initiale. Elle peut tre modie par la suite par les actions de lutilisateur et par les scripts. La valeur initiale dune commande ne change pas. Lorsquun formulaire est rinitialis, la valeur courante de chaque commande redevient sa valeur initiale. Si la commande est dpourvue de valeur initiale, leffet de la rinitialisation du formulaire sur cette commande est indni. Lors de la soumission du formulaire pour son traitement, le nom et la valeur courante de certaines commandes sont accoupls. Ces couples sont soumis avec le formulaire. HTML dnit plusieurs grands types de commandes :
j Boutons daction.

Comme lindique leur nom, les boutons daction ont pour but de dclencher une action. Celle-ci peut tre dnie, comme pour un bouton de soumission (qui soumet le

LE GUIDE COMPLET 341

Chapitre 9

Formulaires

formulaire) ou de rinitialisation (qui redonne leur valeur initiale toutes les commandes), ou dnie par lutilisateur. Un formulaire peut contenir plusieurs boutons de soumission. Un bouton daction dni par lutilisateur ne possde pas de comportement par dfaut. Chaque bouton poussoir peut avoir des scripts ct client qui sont associs aux attributs dvnement de llment. Quand un vnement se produit (par exemple, lutilisateur presse le bouton, le relche, etc.), le script associ est dclench. Le langage du script du bouton doit tre dni laide dune dclaration de script par dfaut (avec llment META). Un bouton est cr laide dun lment BUTTON ou INPUT. Cases cocher. Les cases cocher sont des interrupteurs marche/arrt qui peuvent tre actionns par lutilisateur. Linterrupteur est sur marche lorsque lattribut checked de llment de commande est spci. Lors de la soumission du formulaire, seules les commandes de cases cocher actives peuvent devenir des commandes russies. Des cases cocher peuvent tre regroupes au sein dun formulaire sous un mme nom de commande. Elles permettent ainsi aux utilisateurs de slectionner plusieurs valeurs pour la mme proprit. Vous crez une case cocher laide de llment INPUT. Boutons doption. Parfois galement appels boutons radio, les boutons doption sont analogues aux cases cocher. Ils en diffrent toutefois en ce que, lorsquils sont regroups sous un mme nom de commande, ils sont mutuellement exclusifs : lorsquun bouton est mis sur marche , tous les autres boutons du groupe sont automatiquement mis sur arrt . Vous crez un bouton radio laide de llment INPUT. En raison des diffrences dinterprtation entre les agents utilisateurs, veillez ce que lun des boutons doption dun groupe soit mis initialement sur marche . Menus. Les menus proposent des options aux utilisateurs, parmi lesquelles il faut faire un choix. Vous crez un menu laide de llment SELECT combin avec des lments OPTGROUP et OPTION. Saisie de texte. Deux types de commande permettent aux utilisateurs la saisie dun texte. Llment INPUT cre une commande pour une saisie sur une seule ligne, llment 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 dun formulaire

j Slection

Chapitre 9

dun fichier. Ce type de commande permet lutilisateur de slectionner un chier de sorte que son contenu puisse tre soumis avec le formulaire. Une commande de slection de chier est cre laide de llment INPUT. Commandes caches. Il est possible de crer des commandes qui ne sont pas restitues mais dont les valeurs sont soumises avec le formulaire. Cela sert gnralement 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 cache est cre laide de llment INPUT. Commandes dobjets. Il est possible dinsrer des objets gnriques dans les formulaires, de faon que les valeurs qui leur sont associes soient soumises en mme temps que les autres commandes. Llment OBJECT permet de crer une commande dobjet.

Les lments utiliss pour crer les commandes apparaissent gnralement dans un lment FORM. Ils peuvent toutefois apparatre en dehors de la dclaration de llment FORM lorsquils servent crer une interface utilisateur.

lment INPUT
Vous avez d remarquer que llment INPUT est de loin llment le plus employ dans un formulaire. Il permet en effet de crer des boutons daction, des cases cocher, des boutons doption, la saisie dun texte dune ligne, la slection dun chier et de crer une commande cache. Cet lment, dpourvu de balise de fermeture, possde la syntaxe gnrale suivante :
<INPUT type=valeur name=valeur value=valeur size=valeur>

Lattribut type est lattribut le plus important : il spcie le type de commande crer. Cet attribut peut possder de nombreuses valeurs lgales, qui conditionnent la prsence ou labsence dautres attributs. La valeur par dfaut de cet attribut est text. Cela cre une commande de saisie de texte sur une seule ligne. Lattribut complmentaire size indique lagent utilisateur la largeur initiale de la commande, exprime

LE GUIDE COMPLET 343

Chapitre 9

Formulaires

en nombre entier de caractres. Lattribut complmentaire maxlength spcie le nombre maximum de caractres que lutilisateur peut saisir. Par exemple,
Nom de lutilisateur : <INPUT type=text name="nomutilisateur" value="" size="10" maxlength="25">

cre un champ de 10 caractres de largeur, qui peut accepter jusqu 25 caractres en tout.

Figure 9.2 : Exemple dlment INPUT de type text

Lorsquil sera soumis, le nom du champ sera nomutilisateur et la valeur (value) sera ce qui a t saisi dans le champ. La valeur password cre une commande de saisie de texte sur une seule ligne, de type mot de passe : le texte saisi est restitu de manire dissimuler les caractres (par exemple, une succession dastrisques). La valeur courante est le texte saisi par lutilisateur, non le texte restitu par lagent utilisateur. Vous employez en ce cas les attributs complmentaires size et maxlength comme avec la valeur text.
Mot de passe : <INPUT type="password" name="motdepasse" size="10" maxlenght="15">

Cet exemple cre un champ de 10 caractres de largeur, qui peut accepter jusqu un maximum de 15 caractres en tout. Lors de la saisie, les caractres sont remplacs lcran par des astrisques.

Figure 9.3 : Exemple dlment INPUT de type password

344 LE GUIDE COMPLET

Constituants dun 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 quil soit masqu par lagent utilisateur aux yeux dun ventuel observateur, le mot de passe est transmis au serveur en texte clair et peut tre lu par quiconque possde un accs au rseau.

La valeur checkbox cre une case cocher, tandis que la valeur radio cre un bouton doption. Lattribut complmentaire value, qui spcie la valeur initiale de la commande, est alors obligatoire. Lattribut boolen checked spcie 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 dlments INPUT de type checkbox et radio

Remarquez dans cette gure 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 doption ncessite un lment spar, vous les rassemblez dans un mme groupe laide dun mme name, ici sexe . Des boutons doption appartenant au mme groupe sont mutuellement exclusifs : un clic sur lun dentre eux dsactive les autres. Vous pouvez possder plusieurs groupes de boutons doption, chaque groupe de boutons possdant un name unique. Chaque bouton possde toutefois une value diffrente, ici homme et femme . Homme et femme tant des valeurs mutuellement exclusives, ils constituent de bons candidats pour des boutons doption. En revanche, les cases cocher laissent lutilisateur libre de slectionner plus dune option dans un groupe. Les champs de cases cocher dun mme groupe possdent le mme nom, des valeurs diffrentes, mais ne sexcluent pas mutuellement. Dans cet exemple, lutilisateur peut possder zro ou plusieurs des matriels cits : des cases cocher constituent donc un excellent choix. Les valeurs submit et reset crent respectivement un bouton de soumission et un bouton de rinitialisation. Voici un exemple de mise en uvre :
<INPUT type="submit" value="Envoyer !"> <INPUT type="reset" value="Annuler">

Figure 9.5 : Exemple dlments INPUT de type submit et reset

Ces boutons possdent des signications prtablies : vous navez pas leur lier de script. Le bouton de soumission effectue laction dnie dans llment FORM, tandis que le bouton de rinitialisation redonne tous les lments du formulaire leur valeur initiale. Exceptionnellement, lattribut name est normalement superu pour ces deux boutons : la valeur qui apparat sur le bouton lui-mme nest pas envoye avec le reste des donnes du formulaire. Elle ne possde pas de nom et est par consquent sans intrt.
346 LE GUIDE COMPLET

Constituants dun formulaire

Chapitre 9

Si vous spciez toutefois un nom pour votre bouton Envoyer, le nom et la valeur ( name et value) de ce bouton seront envoys. Cette caractristique peut se rvler trs utile en combinaison avec lemploi de langages de script lors du traitement de votre formulaire. La valeur image cre un bouton de soumission graphique. La valeur de lattribut complmentaire src spcie alors lURI de limage qui va dcorer le bouton. Pour des questions daccessibilit, mieux vaut toujours fournir un texte de remplacement pour limage, laide de lattribut alt. Lattribut complmentaire obligatoire src spcie la localisation de limage utiliser pour dcorer le bouton de soumission graphique. Lorsque vous cliquez sur limage laide dun dispositif de pointage, le formulaire est soumis et les coordonnes du clic sont transmises au serveur. La coordonne x se mesure en pixels partir de la gauche de limage et la coordonne y en pixels partir du haut de limage. Les donnes soumises comprennent les valeurs nom.x=valeurdex et nom.y=valeurdey, dans lesquelles nom est la valeur de lattribut name, et valeur-de-x et valeur-de-y respectivement les valeurs des coordonnes x et y . Remarquez que, si le serveur doit entreprendre des actions diffrentes selon lendroit cliqu, lutilisateur dun navigateur non graphique sera dsavantag. Mieux vaut donc recourir aux approches alternatives suivantes :
j

Employer plusieurs boutons de soumission (chacun avec sa propre image) au lieu dun seul bouton de soumission graphique. Les feuilles de style permettent de contrler le positionnement de ces boutons. Employer une image cliquable ct client en combinaison avec des scripts.

Voici un exemple :
<INPUT type="image" src="images/boutonenvoyer.gif" alt="Envoyer !">

Il est cr un bouton de type image, qui emploie le chier image boutonenvoyer.gif (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 dlment INPUT de type image

La valeur button cre un bouton daction. Lintitul du bouton est la valeur de lattribut value.
<INPUT type="button" name="fond" value="Changer la couleur de fond">

Figure 9.7 : Exemple dlment INPUT de type button

La valeur hidden cre une commande cache.

<INPUT type="hidden" name="sourceform" value="feedback.html">

Nous ne montrons pas de copie dcran, puisque par dnition cette commande ny apparat pas ! Cela permet par exemple de savoir quel formulaire lutilisateur a rempli, ou de soumettre lheure, la date, les donnes de lutilisateur, ou des donnes similaires en plus du reste des donnes du formulaire. Enn, la valeur file cre une commande de slection de chiers. Le nom du chier initial est en principe la valeur de lattribut value.
<B>Fichier &agrave; envoyer :</B> <INPUT type=file name=envoyer size=10>

348 LE GUIDE COMPLET

Constituants dun formulaire

Chapitre 9

Figure 9.8 : Exemple dlment INPUT de type le

Remarquez dans la gure prcdente quun bouton Parcourir est automatiquement ajout ct du champ de saisie du nom de chier : vous pouvez cliquer dessus pour parcourir votre systme de chiers et slectionner le chier concern. En spciant dans llment FORM lattribut enctype et en lui attribuant la valeur multipart/formdata, chaque contenu de chier sera conditionn pour soumission dans une section distincte dun document en plusieurs parties. Les autres attributs de llment INPUT sont prsents dans le tableau suivant.
Tableau 9.1 : Autres attributs de llment INPUT

Attribut

Valeur boolen

But Lorsque lattribut type possde la valeur radio ou checkbox, spcie que le bouton est sur marche . Ignor pour les autres types de commande. Spcie, lorsque lattribut type possde la valeur text ou password, le nombre maximum de caractres que lutilisateur peut saisir. Ce nombre peut excder la valeur spcie pour lattribut size, auquel cas lagent utilisateur devrait proposer un mcanisme de dlement. La valeur par dfaut de cet attribut est un nombre illimit. Nom de la commande Retire llment de lordre de tabulation

Checked

Maxlength

entier

Name Notab

nom

LE GUIDE COMPLET 349

Chapitre 9

Formulaires
Tableau 9.1 : Autres attributs de llment INPUT

Attribut

Valeur entier

But Indique lagent utilisateur la largeur initiale de la commande. La largeur est donne en pixels, sauf lorsque lattribut type possde la valeur text ou password. Il sagit alors dun nombre entier de caractres. Lorsque lattribut type possde la valeur image, spcie la localisation de limage utiliser pour dcorer le bouton de soumission graphique. Dnit la place dans lordre de tabulation Valeur initiale de la commande. Facultatif, sauf lorsque lattribut type possde la valeur radio ou checkbox.

Size

Src

uri

Tabindex Value

entier valeur

Nous reviendrons dans la suite de ce chapitre sur les attributs tabindex et notab.
lment ISINDEX

Llment ISINDEX nest pas un lment de formulaire, puisquil nappartient pas un lment FORM. Son emploi est fortement dconseill. Cet lment cre une commande de saisie dun texte sur une seule ligne, qui admet un nombre quelconque de caractres. Les agents utilisateurs peuvent utiliser la valeur de lattribut prompt de cet lment comme titre pour linvite. Mieux vaut employer INPUT pour crer des commandes de saisie de texte. Ainsi, la dclaration ISINDEX suivante :
<ISINDEX prompt="Saisissez le mot &agrave; rechercher : ">

pourrait se rcrire comme suit avec llment INPUT :

<FORM action="..." method="post"> <P>Saisissez le mot &agrave; rechercher : <INPUT type="text"> </P> </FORM>

lment BUTTON
Les boutons crs par llment BUTTON fonctionnent exactement comme ceux crs avec llment INPUT, mais offrent des possibilits de restitution plus varies, puisque llment BUTTON peut possder un
350 LE GUIDE COMPLET

Constituants dun formulaire

Chapitre 9

contenu. Par exemple, un lment BUTTON qui contient une image fonctionne de la mme faon et peut avoir le mme aspect quun lment INPUT dont lattribut type possde la valeur image, mais admet en outre un contenu. Cet lment doit imprativement possder 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 restitus comme des images plates (reportez-vous la gure de la page 378). Ses principaux attributs sont les suivants :
j name j j

spcie le nom de la commande. value dnit la valeur initiale du bouton. type dclare le type du bouton. Les valeurs possibles sont la valeur par dfaut submit (bouton de soumission), reset (bouton de rinitialisation) et button (bouton daction).

Lexemple suivant reprend et prolonge un exemple prcdent en crant des boutons de soumission et de rinitialisation avec llment BUTTON au lieu de INPUT. Les boutons contiennent des images par lintermdiaire dlments IMG.
<FORM action="http://unsite.fr/prog/ajoutermembre" method="post"> <P> Pr&eacute;nom : <INPUT type="text" name="prenom"><BR> Nom : <INPUT type="text" name="nom"><BR> E-mail: <INPUT type="text" name="email"><BR> <INPUT type="radio" name="genre" value="homme"> Homme<BR> <INPUT type="radio" name="genre" value="femme"> Femme<BR> <BUTTON name="submit" value="envoyer" type="submit"> <IMG src="images/c_bon.gif" alt="Cest tout bon !"> </BUTTON> <BUTTON name="reset" type="reset"> <IMG src="images/c_pas_bon.gif" alt="Surtout pas !"> </BUTTON> </P> </FORM>

Le rsultat est prsent dans la gure suivante. Pensez toujours fournir un texte de remplacement pour llment IMG.

LE GUIDE COMPLET 351

Chapitre 9

Formulaires

Figure 9.9 : Exemple dlment BUTTON

IMG et BUTTON

Il est illgal dassocier une image cliquable un lment IMG apparaissant en contenu dun lment BUTTON. Lexemple suivant est interdit :
<BUTTON> <IMG src="foo.gif" usemap="..."> </BUTTON>

lments SELECT, OPTGROUP et OPTION

lment SELECT
Vous crez un menu laide dun lment SELECT. Cet lment possde obligatoirement une balise douverture et une balise de fermeture. Chaque option du menu est reprsente par un lment OPTION. Un lment SELECT doit contenir au moins un lment 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 dun formulaire

<OPTION value="autre">Texte ou autre</OPTION> </SELECT>

Chapitre 9

Cet exemple cre ici un menu droulant proposant les choix qui gurent dans les diffrents lments OPTION. Ce choix de mode de prsentation dpend toutefois de lagent utilisateur.

Figure 9.10 : Exemple de menu (lment SELECT)

Les principaux attributs de llment SELECT sont les suivants :

j j

Lattribut name spcie le nom de la commande. Lattribut size spcie le nombre de lignes de la zone de liste droulante, lorsque llment SELECT se prsente comme tel. Les agents utilisateurs ne sont pas tenus de prsenter llment SELECT sous forme dune zone de liste : ils peuvent faire appel un autre mcanisme, comme un menu droulant. Lattribut boolen facultatif multiple permet une slection multiple. En son absence, llment SELECT nautorise quune slection unique.

Lorsque lattribut multiple est spci, les utilisateurs peuvent choisir plusieurs options en maintenant enfonce la touche [Ctrl] pendant quils cliquent sur chacun de leurs choix.

lment OPTION
Chaque choix dun menu est reprsent par un lment OPTION. Seule la balise douverture est obligatoire, mais, comme nous lavons dj signal, mieux vaut toujours fermer un lment HTML.

LE GUIDE COMPLET 353

Chapitre 9

Formulaires

Les principaux attributs de llment OPTION sont les suivants :

j

Lattribut label permet de spcier un intitul pour loption plus court que le contenu de llment OPTION. Les agents utilisateurs doivent employer la valeur de cet attribut, lorsquil est prsent, plutt que le contenu de llment OPTION comme intitul de loption. Lattribut facultatif value spcie la valeur initiale de la commande. Sil est absent, la valeur initiale est le contenu de llment OPTION. Lattribut boolen facultatif selected spcie que loption est prslectionne. Dans lexemple prcdent, nous avions dcid que le choix Firefox tait prslectionn :
<OPTION selected value="ff">Firefox</OPTION>

Il est possible de prslectionner zro ou plusieurs options. Les agents utilisateurs devraient dterminer les options prslectionnes comme suit :
j

j j

Si aucun lment OPTION ne possde dattribut selected, le comportement de lagent utilisateur vis--vis du choix de loption slectionne initiale est indni. Si un lment OPTION possde un attribut selected, alors celui-ci devrait tre prslectionn. Si llment SELECT possde un attribut multiple spci et plusieurs lments OPTION avec lattribut selected spci, alors ceux-ci devraient tous tre prslectionns.

Si plusieurs lments OPTION possdent un attribut selected alors que lattribut multiple nest pas spci sur llment SELECT, cest une erreur. Les agents utilisateurs peuvent varier dans la prise en charge de cette erreur, mais ils ne devraient pas prslectionner plus dune option.

lment OPTGROUP
Vous pouvez regrouper logiquement des options laide de llment OPTGROUP. Cela est particulirement utile quand lutilisateur doit effectuer un choix partir dune longue liste doptions : les groupes doptions apparentes sont plus faciles comprendre et se remmorer quune seule longue liste doptions. Dans HTML 4, les groupes imbriqus sont interdits : tous les lments OPTGROUP doivent tre spcis directement dans un lment SELECT.
354 LE GUIDE COMPLET

Constituants dun formulaire

Chapitre 9

Les balises douverture et de fermeture de llment OPTGROUP sont obligatoires. Son principal attribut est label, qui spcie lintitul du groupe doptions.
Regroupement

Des futures versions de HTML pourraient (et devraient) tendre le mcanisme de regroupement, de faon autoriser limbrication de groupes doptions.

Voici un exemple demploi de llment 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 slection partir des groupes doptions au moyen dun menu hirarchique ou dun autre mcanisme retant la structure des options : cest le cas de Firefox, comme le montre la gure suivante (voir Figure 9.11). Remarquez que chaque sous-menu affiche lintitul dun lment OPTGROUP ou dun lment OPTION.

LE GUIDE COMPLET 355

Chapitre 9

Formulaires

Figure 9.11 : Exemple de menu, avec recours llment OPTGROUP .

lment TEXTAREA
Llment TEXTAREA permet de crer une zone de texte de saisie multiligne. Vos utilisateurs pourront la remplir en soumettant leurs commentaires, suggestions ou messages de forum. TEXTAREA permet lutilisateur de saisir plusieurs lignes de texte. Celles-ci sont contenues dans value. Les agents utilisateurs doivent employer comme valeur initiale le contenu de cet lment, intgralement restitu. Les balises douverture et de fermeture de cet lment sont obligatoires. Les attributs de llment TEXTAREA sont les suivants :
j j

Lattribut name spcie le nom de la commande. Lattribut rows spcie 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 dler le contenu de la commande quand celui-ci stend au-del de la zone visible. Lattribut cols spcie la largeur visible en fonction de la chasse moyenne des caractres. Les utilisateurs doivent pouvoir saisir des lignes plus longues que cette largeur. Les agents utilisateurs peuvent couper les textes de ligne visibles an de garder les longues lignes visibles sans devoir les faire dler.

Voici un exemple :
<FORM action="http://unsite.fr/prog/lecture-texte" method="post"> <P> <TEXTAREA name="le_texte" rows="10" cols="80"> Premi&egrave;re ligne de texte initial.

356 LE GUIDE COMPLET

Constituants dun formulaire

Chapitre 9

Seconde ligne de texte initial. </TEXTAREA> <INPUT type="submit" value="Envoyer"><INPUT type="reset"> </P> </FORM>

Cet exemple cre une commande TEXTAREA de dix lignes sur quatrevingts colonnes et qui contient initialement deux lignes de texte. La commande TEXTAREA est suivie par deux boutons de soumission et de rinitialisation.

Figure 9.12 : Exemple dlment TEXTAREA

La spcication de lattribut readonly permet lauteur dafficher un texte non modiable dans la commande TEXTAREA. Cela diffre de lemploi dun texte balis standard dans un document, puisque la valeur de llment TEXTAREA est soumise avec le formulaire.

lment LABEL
Quelques commandes de formulaire possdent des libells ou labels automatiquement associs (comme les boutons daction), mais la plupart en sont dpourvues (les champs de texte, les cases cocher, les boutons doption ainsi que les menus). Lorsquune commande possde un libell implicite, les agents utilisateurs doivent employer la valeur de lattribut value comme chane de caractres du libell.

LE GUIDE COMPLET 357

Chapitre 9

Formulaires

Llment LABEL permet de spcier un libell pour les commandes dpourvues de libell implicite. Chaque lment LABEL est associ exactement une commande de formulaire. Ses balises douverture et de fermeture sont obligatoires. Lattribut for associe explicitement un label une autre commande : la valeur de lattribut for doit tre la mme que celle de lattribut id dune certaine commande du mme document. Quand il est absent, le libell qui est dni est associ au contenu de llment. Dans lexemple suivant, un tableau permet daligner deux commandes de saisie de texte ainsi que les libells qui leur sont associs. 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 dlments LABEL

Lattribut for

Il est possible dassocier plusieurs lments LABEL la mme commande en crant plusieurs rfrences via lattribut for.

Lexemple complique le prcdent, en prsentant plus dlments LABEL :

<FORM action="http://unsite.fr/prog/ajoutermembre" method="post"> <TABLE style="margin-left: 30%">

358 LE GUIDE COMPLET

Constituants dun 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 dlments LABEL

Pour associer implicitement un libell une autre commande, llment de commande doit se trouver lintrieur de llment LABEL. Cet lment LABEL ne peut alors contenir quun seul lment de commande. Le label en question peut se placer avant ou aprs la commande associe. Lexemple suivant associe implicitement deux libells 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 dlments LABEL (libells implicites)

Remarquez quil est impossible demployer cette technique lorsque la disposition est assure par un tableau : le libell se trouve dans une cellule et la commande associe dans une autre. Lorsquun lment LABEL reoit le focus, celui-ci est communiqu la commande associe. Le focus sera tudi dans la suite de ce chapitre. Les agents utilisateurs peuvent restituer les libells de nombreuses faons (par exemple : visuellement, lus par des synthtiseurs de parole, etc.).

Ajout dune structure un formulaire : lments FIELDSET et LEGEND

Comme nous lavons dj largement soulign, une des vocations profondes de HTML est de se proccuper de la structure des documents. Cette notion de structure semble quelque peu mise mal par les diffrents lments de formulaires Heureusement, llment FIELDSET remdie cette situation. Il permet de regrouper par thme les commandes et les libells apparents. Le regroupement des commandes facilite leur comprhension par les utilisateurs, tout en amliorant la navigation par tabulation pour les agents utilisateurs visuels et la navigation vocale pour les agents
360 LE GUIDE COMPLET

Constituants dun formulaire

Chapitre 9

utilisateurs vocaux. La bonne utilisation de cet lment rend plus accessibles les documents. Llment LEGEND permet aux auteurs dassigner une lgende un lment FIELDSET. Il renforce laccessibilit lorsque llment FIELDSET est restitu de manire non visuelle. Ses balises douverture et de fermeture sont obligatoires. Le principal attribut de LEGEND est align, dsormais dconseill au prot des feuilles de style. Il positionne la lgende par rapport au jeu de champs. Ses valeurs possibles sont la valeur par dfaut top (au-dessus du jeu de champs), bottom (en dessous), left ( gauche) et right ( droite). Lexemple suivant propose un formulaire de type recherche de logiciel . Il se divise en trois parties : les informations personnelles, le systme dexploitation et la catgorie recherche. Chaque partie contient les commandes pour la saisie des informations concernes.
<FIELDSET> <LEGEND>Syst&egrave;me dexploitation</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 recherche 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 gure suivante montre laspect de ce formulaire sous Firefox.

Figure 9.16 : Exemple dlments FIELSET et LEGEND

Remarquez quil serait possible damliorer laide de la feuille de style la prsentation visuelle du formulaire, en alignant les lments lintrieur de chaque lment FIELDSET et en ajoutant de la couleur et des indications de police. Vous pourriez galement ajouter des scripts, par exemple pour nafficher la zone de texte Recherche que si lutilisateur indique ne pas trouver de catgorie, etc.

9.2. Formulaire et focus

Dans un document HTML, un lment doit recevoir le focus (aussi nomm attention ) grce une action de lutilisateur pour devenir actif et remplir sa fonction. Par exemple, un utilisateur doit activer (en gnral cliquer) le lien spci par llment A pour suivre le lien en question. De la mme manire, les utilisateurs doivent donner le focus llment TEXTAREA pour y saisir un texte. Il existe plusieurs faons de donner le focus un lment :
j

En dsignant llment avec un dispositif de pointage.

362 LE GUIDE COMPLET

Formulaire et focus
j

Chapitre 9

En naviguant dun lment lautre au clavier. Il peut avoir t dni un ordre de tabulation spciant lordre dans lequel les lments reoivent le focus quand lutilisateur navigue laide du clavier dans le document. Une fois slectionn, llment peut tre activ par une certaine combinaison de touches. En slectionnant llment au moyen dune touche daccs rapide (appele aussi parfois raccourci clavier ou cl daccs ).

Navigation par tabulation

Dans un document HTML, plusieurs lments sont soumis un ordre de tabulation, explicite ou implicite. Il sagit essentiellement des lments qui reconnaissent lattribut tabindex, savoir les lments A, AREA, BUTTON, INPUT, OBJECT, SELECT et TEXTAREA. Lordre de tabulation dnit lordre dans lequel les lments recevront le focus lorsque lutilisateur naviguera laide du clavier. Lordre de tabulation peut comprendre des lments imbriqus dans dautres lments. Cet ordre de tabulation est dni de faon explicite laide de lattribut
tabindex, pour les lments 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 zros de tte.

Les agents utilisateurs parcourent les lments qui peuvent recevoir le focus selon les rgles suivantes :

1 Dabord les lments qui reconnaissent lattribut tabindex et lui assignent une valeur positive. La navigation part de llment dont lattribut tabindex possde la plus petite valeur pour aller vers llment qui possde la valeur la plus leve. Les valeurs ne se suivent pas forcment, ni ne doivent commencer une valeur particulire. Les lments dont les valeurs de lattribut tabindex sont identiques sont parcourus dans lordre de leur apparition dans le ux de caractres du code. 2 Ceux des lments qui ne reconnaissent pas lattribut tabindex, ou bien le reconnaissent et lui assignent une valeur 0, sont

LE GUIDE COMPLET 363

Chapitre 9

Formulaires

parcourus ensuite. Ces lments sont parcourus dans lordre de leur apparition dans le ux de caractres du code. Cela signie que si aucun lment ne possde dattribut tabindex, lordre de tabulation sera celui de lapparition des lments dans le code. Les lments inactifs ne participent pas dans lordre de tabulation. Examinez le listing suivant :
Listing 9-1 : tabindex.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <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="style.css"> </HEAD> <BODY> <H1>Exemple de formulaire</H1> <H2>Navigation &agrave; laide de la touche <CODE>TAB</CODE></H2> <P>...un texte...</P> <P>Consultez le <A tabindex="10" href="http://www.w3.org/"> site Web du W3C.</A> <BR> ...suite du texte... <BR> <BUTTON type="button" name="action" tabindex="1" onclick="action()"> Effectuer laction 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
</BODY> </HTML>

Chapitre 9

Dans cet exemple, lordre de tabulation est le suivant : llment BUTTON, les lments INPUT dans lordre (remarquez que celui nomm champs1 partage la mme valeur dattribut tabindex que le bouton, mais champs1 apparat plus tard dans le ux de caractres) et enn le lien cr par llment A.

Figure 9.17 : Navigation laide de lattribut tabindex

Touches congurables

La touche ou la combinaison de touches qui produit la navigation par tabulation dpend de la conguration de lagent utilisateur. Cest gnralement la touche [] pour la navigation et la touche [] pour lactivation de llment slectionn, mais cela nest en rien une obligation imprative.

Les agents utilisateurs peuvent galement dnir des combinaisons de cls pour parcourir lordre de tabulation lenvers. Quand la n ou le dbut de lordre de tabulation est atteint, lagent utilisateur peut revenir en arrire au dbut ou la n.

LE GUIDE COMPLET 365

Chapitre 9

Formulaires

Touches daccs rapide

Vous tes probablement familier avec les touches daccs rapide de votre systme dexploitation ou de vos logiciels favoris. Par exemple, vous savez certainement quavec Windows la combinaison [ctrl]+[c] copie un objet, tandis que la combinaison [ctrl]+[v] colle cet objet lemplacement actif. HTML permet de dnir de telles touches daccs rapide pour un lment, laide de lattribut accesskey. Sa syntaxe est la suivante :
accesskey = caractre

caractre est un caractre seul qui provient du jeu de caractres du

document.
Cl daccs

Pensez tenir compte de la mthode de saisie de lutilisateur suppos lors de la spcication dune cl daccs.

Un appui sur la touche daccs rapide affecte un lment lui procure le focus. Ce qui se passe lorsque llment reoit le focus dpend de llment. Par exemple, si lutilisateur active un lien dni par un lment A, lagent utilisateur suit en gnral le lien. Lorsque lutilisateur active un bouton radio, lagent utilisateur change la valeur du bouton radio. Quand lutilisateur active un champ de texte, la saisie devient possible, etc. Vous pouvez dnir un attribut accesskey pour les lments suivants : A, AREA, BUTTON, INPUT, LABEL, LEGEND et TEXTAREA. Lexemple qui suit affecte la touche daccs rapide [N] au libell associ une commande INPUT. Un appui sur la touche procure le focus au libell, qui le transmet la commande associe. Lutilisateur peut alors saisir un texte dans la zone INPUT.
<FORM action="..." method="post"> <P> <LABEL for="libelle_utilisateur" accesskey="N"> Nom dutilisateur </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 daccs rapide

Compliquons cet exemple en ajoutant un lien hypertexte lorsque lutilisateur ne possde pas de compte. Une touche daccs rapide est affecte ce lien dni par un lment A. Un appui sur cette touche mne lutilisateur vers ce qui serait un document offrant un formulaire douverture de compte.
<FORM action="..." method="post"> ... idem ci-dessus ... </FORM> <P> <LABEL> <A rel="contents" accesskey="C" href="inscription.html"> Cr&eacute;er un compte </A> </LABEL> </P>

Figure 9.19 : Touche daccs rapide

LE GUIDE COMPLET 367

Chapitre 9

Formulaires

Touches daccs rapide

La procdure exacte dinvocation des touches daccs rapide dpend du systme dexploitation sous-jacent. Avec MS Windows, cest en gnral une combinaison [alt]+touche daccs rapide. Avec un systme Apple, ce serait [cmd]+touche daccs rapide.

La restitution des cls daccs est fonction de lagent utilisateur. Mieux vaut inclure la cl daccs dans le texte du libell ou partout o la cl daccs doit sappliquer. Les agents utilisateurs devraient restituer la valeur dune cl daccs de faon mettre son rle en vidence et la distinguer des autres caractres (par exemple, en la soulignant).

9.3. Commandes inactives et en lecture seule

Parfois, une saisie de lutilisateur peut tre indsirable ou superue. Il faut donc pouvoir rendre une commande inactive ou la restituer en lecture seule. Vous pourriez par exemple souhaiter que le bouton de soumission dun formulaire reste inactif tant que lutilisateur na pas entr certaines donnes obligatoires. De la mme manire, lauteur peut vouloir inclure un bout de texte en lecture seule, qui doit tre soumis comme valeur en mme temps que le formulaire. Les sections suivantes dcrivent les commandes inactives et celles en lecture seule.

Commandes inactives
Vous dclarez une commande comme inactive laide de lattribut boolen disabled. La commande est dsactive et refuse toute forme dentre de lutilisateur. Cet attribut peut tre employ avec les lments BUTTON, INPUT, OPTGROUP, OPTION, SELECT et TEXTAREA. Lorsquil est prsent dans un lment, lattribut disabled produit leffet suivant :
j j j

Les commandes inactives ne reoivent pas le focus. Les commandes inactives sont ignores au cours dune navigation par tabulation. Les commandes inactives ne peuvent pas russir.

368 LE GUIDE COMPLET

Commandes inactives et en lecture seule

Chapitre 9

Cet attribut est hrit, les dclarations locales surclassant toutefois la valeur hrite. Dans lexemple suivant, llment INPUT est inactif. Il ne peut pas recevoir dentre de lutilisateur et sa valeur ne peut pas tre soumise avec le formulaire.
<INPUT type="submit" disabled name="Soumettre"">

La faon dont sont restitus les lments inactifs dpend de lagent 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 dsactive

Seul un script peut modier dynamiquement la valeur de lattribut disabled.

Commandes en lecture seule

Lattribut boolen readonly , lorsquil est prsent dans une commande de formulaire, interdit les modications de la commande. Vous pouvez lemployer avec les lments INPUT et TEXTAREA. Quand il est prsent, lattribut readonly produit les effets suivants sur llment :
j j j

Les lments en lecture seule reoivent lattention mais les utilisateurs ne peuvent pas les modier. Les lments en lecture seule sont inclus dans la navigation par tabulation. Les lments en lecture seule peuvent russir.

LE GUIDE COMPLET 369

Chapitre 9

Formulaires

La faon dont sont restitus les lments en lecture seule dpend de lagent utilisateur. Voici un exemple :
Syst&egrave;me dexploitation : <INPUT name="systeme_expl" type="text" value="Windows" readonly >

Figure 9.21 : Commande en lecture seule

Il est impossible de modier le contenu de la zone de texte prsente dans la gure prcdente. Seul un script peut modier dynamiquement la valeur de lattribut readonly.

9.4. Soumission du formulaire

Dans tout ce qui prcde, nous avons examin avec soin les lments grce auxquels il tait possible de faire saisir des informations par lutilisateur. Le formulaire rempli, lutilisateur clique sur le bouton Soumettre. Les sections suivantes expliquent la manire dont les agents utilisateurs soumettent les donnes de formulaire aux agents qui traitent les formulaires.

Mthodes de soumission du formulaire

Lattribut method de llment FORM spcie la mthode HTTP employe pour envoyer le formulaire lagent de traitement. Cet attribut admet deux valeurs :

370 LE GUIDE COMPLET

Soumission du formulaire
j

Chapitre 9

get : lensemble des donnes du formulaire est rajout lURI spci par lattribut action (avec comme sparateur un caractre point dinterrogation ?) et ce nouvel URI est envoy

lagent de traitement. post : lensemble des donnes de formulaire est inclus dans le corps du formulaire et envoy lagent de traitement.

La mthode get est prfrer lorsque le formulaire ne produit aucun effet secondaire (il est alors dit idempotent ). La plupart des recherches dans une base de donnes sont dpourvues deffets secondaires visibles et font des applications idales pour la mthode get. Les moteurs de recherche emploient get : une demande de recherche najoute rien un chier ou ne modie en rien les donnes du serveur. Si le service associ au traitement dun formulaire entrane des effets secondaires (par exemple, si le formulaire modie une base de donnes ou labonnement un service), mieux vaut employer la mthode post. Elle est ainsi employe pour les pages dinscription, les salles de discussion et les forums de discussion en ligne.
Le codage des caractres avec Get et Post

La mthode get restreint les valeurs du jeu des donnes du formulaire aux caractres ASCII. En revanche, la mthode post, lorsquelle est spcie avec lattribut enctype="multipart/formdata", recouvre la totalit du jeu de caractres ISO 10646.

Commandes russies
Une commande est dite russie lorsque son nom est appari sa valeur courante et que ce couple appartient au jeu des donnes du formulaire qui est soumis. Une commande russie peut tre soumise. Une commande russie doit tre dnie dans un lment FORM et possder un nom de commande. Remarquez toutefois que :
j j

Les commandes inactives ne peuvent russir. Si le formulaire contient plusieurs boutons de soumission, seul le bouton de soumission actif russira.

LE GUIDE COMPLET 371

Chapitre 9
j j

Formulaires

Toutes les cases cocher actives (sur marche ) peuvent russir. Dans le cas de boutons doption qui partagent le mme nom (la mme valeur pour lattribut name), seul le bouton doption activ peut russir. Pour les menus, le nom de commande est donn par llment SELECT et les valeurs sont fournies par les lments OPTION. Seules les options slectionnes peuvent russir. Si aucune option nest slectionne, la commande choue : ni le nom ni aucune valeur ne sont soumis au serveur avec le formulaire. La valeur courante dune slection de chiers est une liste dun ou plusieurs noms de chiers. Lors de la soumission du formulaire, le contenu de chaque chier est soumis avec le restant des donnes du formulaire. Les contenus des chiers sont conditionns en fonction du type de contenu du formulaire. La valeur courante dune commande dobjet est dtermine par limplmentation de lobjet.

Si une commande est dpourvue de valeur courante au moment de la soumission du formulaire, les agents utilisateurs ne sont pas obligs de la traiter comme une commande russie. En outre, les agents utilisateurs ne doivent pas considrer les commandes suivantes comme tant russies :
j j

Les boutons de rinitialisation. Les lments OBJECT dont lattribut declare nest pas spci.

Les commandes caches et les commandes qui ne sont pas restitues en raison de leffet dune feuille de style peuvent quand mme russir. 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 entrane malgr tout laccouplement 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 donnes du formulaire

Lorsque lutilisateur soumet le formulaire (par exemple, en activant un bouton de soumission), lagent utilisateur le traite de la manire suivante.

1 Premire tape : identication des commandes russies. 2 Deuxime tape : construction du jeu des donnes du formulaire (le jeu des donnes du formulaire est la squence des couples nom de commande/valeur courante construite partir des commandes russies). 3 Troisime tape : codage du jeu des donnes du formulaire.
Le jeu des donnes du formulaire est alors cod en fonction du type de contenu spci par lattribut enctype de llment FORM.

4 Quatrime tape : soumission du jeu des donnes du formulaire cod. 5 Enn, les donnes codes sont envoyes lagent de traitement dsign par lattribut action, en utilisant le protocole spci par lattribut method.
Cette spcication ne dnit pas toutes les mthodes de soumission valides ni les types de contenu qui peuvent tre employs avec les formulaires. Les agents utilisateurs HTML 4 doivent cependant obir aux conventions tablies dans les cas suivants :
j

Si la valeur de lattribut method est get et la valeur de lattribut action est un URI HTTP, alors lagent utilisateur prend la valeur de lattribut action, lui rajoute un caractre ? et enn le jeu des donnes du formulaire, cod en utilisant le type de contenu application/xwwwformurlencoded. Lagent utilisateur traverse alors le lien vers cet URI. Dans ce scnario, les donnes du formulaire se limitent aux codes ASCII. Si la valeur de lattribut method est post et la valeur de lattribut action est un URI HTTP, alors lagent utilisateur conduit une transaction HTTP post en utilisant la valeur de lattribut action et un message cr en fonction du type de contenu spci par lattribut enctype.

Pour toute autre valeur de lattribut action ou method, le comportement nest pas spci.
LE GUIDE COMPLET 373

Chapitre 9

Formulaires

Les agents utilisateurs devraient restituer les rponses des transactions HTTP get et post.

Types de contenu du formulaire

Lattribut enctype de llment FORM spcie le type de contenu utilis pour coder le jeu des donnes du formulaire en vue de sa soumission au serveur. Les agents utilisateurs doivent reconnatre les types de contenu lists ci-dessous. Le comportement pour dautres types de contenu nest pas spci. Le type de contenu par dfaut est application/xwww formurlencoded. Les formulaires soumis avec ce type de contenu

doivent tre cods comme suit :

1 Les noms de commandes et les valeurs sont chappes. Les caractres espace sont remplacs par des caractres plus (+) puis les caractres rservs sont chapps comme dcrit dans le document [RFC1738], section 2.2. Les caractres non alphanumriques sont remplacs par une squence de la forme %HH : un caractre pourcentage et deux chiffres hexadcimaux qui reprsentent le code ASCII du caractre en question. Les sauts de ligne sont reprsents par des couples de caractres CR LF (%0D%0A). 2 Les couples nom/valeur des commandes sont lists selon leur ordre dapparition dans le document. Le nom est spar de la valeur par un caractre gal =, et les couples nom/valeur sont spars les uns des autres par des esperluettes (&).
Le type de contenu application/xwwwformurlencoded est inefficace pour lenvoi de grandes quantits de donnes binaires ou de texte contenant des caractres non ASCII. Lautre valeur possible est multipart/formdata. Cest le type de contenu employer pour la soumission de formulaires contenant des chiers, des donnes non ASCII et des donnes binaires.

374 LE GUIDE COMPLET

Remarques propos des formulaires

Chapitre 9

9.5. Remarques propos des formulaires

Avant de crer un formulaire sur votre site, la premire chose qui vous vient lesprit est de dgager les questions qui vont tre poses, et celles qui seront obligatoires. Il est en effet possible dempcher la soumission dun formulaire si un des champs obligatoires nest 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 denregistrement du site de MicroApplication.

Cela nest toutefois quun aspect du problme. Il est plus important encore de savoir de quelles informations vous avez rellement besoin et comment expliquer ce fait lutilisateur. Certains sites exigent beaucoup plus dinformations que ncessaire. Est-il rellement indispensable de demander son numro de tlphone un utilisateur pour obtenir simplement des commentaires sur votre site ? Toute information possde une valeur, et les utilisateurs deviennent de plus en plus mants sur les donnes quils 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 nexiger que les informations strictement ncessaires lobjectif de votre formulaire. Si la raison pour laquelle vous voulez ces informations nest pas instantanment vidente, alors expliquez vos motivations. Si vous conservez des donnes utilisateur dans un chier, vous devez dclarer celui-ci la CNIL (Commission Nationale Informatique et Libert). Un formulaire HTML ne prsente que peu ou pas dintrt en labsence dun dispositif capable de traiter les informations recueillies. Ce traitement est gnralement effectu laide de scripts, qui feront lobjet du prochain chapitre.
LE GUIDE COMPLET 375

Chapitre 9

Formulaires

9.6. Rsum
j j

Un formulaire constitue un moyen dapporter un peu dinteractivit une page HTML. Vous crez un formulaire dans une page HTML laide de llment FORM. Cet lment agit comme conteneur gnral du formulaire, notamment pour les commandes. Les utilisateurs interagissent avec les formulaires au moyen de commandes nommes. Le nom dune commande est spci par son attribut name. Chaque commande possde la fois une valeur initiale et une valeur courante. La valeur initiale dune commande peut gnralement tre spcie laide de lattribut value de llment de commande. HTML dnit plusieurs grands types de commandes : boutons daction, cases cocher, boutons doption, menus, saisie de texte et slection dun chier. Llment INPUT est le plus employ dans un formulaire. Il permet de crer des boutons daction, des cases cocher, des boutons doption, la saisie dun texte dune ligne et la slection de chiers. Son attribut type spcie le type de la commande. La valeur text est la valeur par dfaut de cet attribut. Elle cre une commande de saisie de texte sur une seule ligne. La valeur password cre une commande de saisie de texte sur une seule ligne de type mot de passe : le texte saisi est restitu de manire dissimuler les caractres. La valeur checkbox cre une case cocher, tandis que la valeur radio cre un bouton doption. Les valeurs submit et reset crent respectivement un bouton de soumission et un bouton de rinitialisation. La valeur image cre un bouton de soumission graphique. La valeur button cre un bouton daction. La valeur hidden cre une commande cache. Enn, la valeur file cre une commande de slection de chiers. Les boutons crs par llment BUTTON fonctionnent exactement comme ceux crs avec llment INPUT, mais offrent des possibilits de restitution plus varies, puisque llment BUTTON peut possder un contenu. Vous crez un menu laide dun lment SELECT. Chaque option du menu est reprsente par un lment OPTION. Un lment SELECT doit contenir au moins un lment OPTION.

376 LE GUIDE COMPLET

Rsum
j j j j j j

Chapitre 9

j j

Vous pouvez regrouper logiquement des options laide de llment OPTGROUP. Llment TEXTAREA permet de crer une zone de texte de saisie multiligne. Llment LABEL permet de spcier un libell pour les commandes dpourvues de libell implicite. Llment FIELDSET permet de regrouper par thme les commandes et les libells apparents. Llment LEGEND permet aux auteurs dassigner une lgende un lment FIELDSET. Vous pouvez donner le focus un lment de plusieurs faons : laide dun dispositif de pointage, en naviguant dun lment lautre au clavier selon lordre de tabulation ou laide de touches daccs rapide. Lordre de tabulation est dni de faon explicite laide de lattribut tabindex. Une touche daccs rapide est dnie pour un lment laide de lattribut accesskey. Vous dclarez une commande comme inactive laide de lattribut boolen disabled. Lattribut boolen readonly, lorsquil est prsent dans une commande de formulaire, interdit les modications de cette commande. Lattribut method de llment FORM spcie la mthode HTTP employe pour envoyer le formulaire lagent de traitement. Cet attribut admet deux valeurs : get et post. Une commande est dite russie lorsque son nom est appari sa valeur courante et que ce couple appartient au jeu des donnes du formulaire qui est soumis. Les donnes sont envoyes lagent de traitement dsign par lattribut action, en utilisant le protocole spci par lattribut method. Lattribut enctype de llment FORM spcie le type de contenu utilis pour coder le jeu des donnes du formulaire en vue de sa soumission au serveur. Il existe deux types de contenu reconnus : par dfaut, application/xwwwformurlencoded et multipart/formdata, employer pour la soumission de formulaires contenant des chiers, des donnes non ASCII et des donnes binaires.

LE GUIDE COMPLET 377

Scripts

Introduction aux scripts .................................................................................................... 381 lment SCRIPT ................................................................................................................. 383 vnements intrinsques ................................................................................................. 390 Travail avec les scripts ...................................................................................................... 396 Applets .................................................................................................................................. 424 Rsum ................................................................................................................................ 432

Chapitre 10

Scripts

Vous savez dsormais crer une page Web dune relative complexit sans trop de difficults. 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 grce lemploi de scripts. Un script est un programme crit dans un langage de programmation particulier. Son excution est dclenche par un vnement qui se produit sur la machine cliente, soit automatiquement (comme au chargement dun document HTML) soit suite une action de lutilisateur. Il existe deux types de scripts : les scripts ct serveur et les scripts ct client.
j Les scripts ct serveur

sont situs et sexcutent comme leur nom lindique sur le serveur, et peuvent envoyer un rsultat 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 entres de celle dun client. Dautres scripts ct serveur comprennent des images cliquables ct serveur et des extensions ou API brevetes, comme ASP (Active Server Pages), ColdFusion, FrontPage Extensions ou le trs populaire PHP. Les scripts ct client sont des programmes qui peuvent accompagner le document HTML ou bien y tre directement incorpors. Ils sexcutent sur la machine cliente (prservant ainsi les ressources du serveur) galement suite un vnement. Nous reviendrons par la suite sur les vnements HTML. HTML gre les scripts dune faon indpendante du langage de script. Ces scripts sont gnralement rdigs en JavaScript ou en VBScript, et ncessitent de lutilisateur un navigateur capable et autoriss lire et excuter le langage de script que vous utilisez, quel quil soit. Les scripts ct client sont donc trs dpendants du navigateur, mais ils sont aussi bien plus rapides que ceux ct serveur.

Ce chapitre sintresse essentiellement aux scripts ct client. lments et attributs tudis 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 daugmenter la ractivit et le dynamisme de documents HTML. Par exemple :
j j j

Modier dynamiquement le contenu dun document lors du chargement de celui-ci. Accompagner un formulaire et valider les donnes avant la soumission. Actions particulires suite un vnement comme le chargement, le dchargement, la prise de focus dun lment, le mouvement de la souris, etc. Action lie aux commandes dun formulaire (par exemple, les boutons) pour simuler une interface utilisateur graphique.

Cette liste permet de sparer les scripts en deux catgories principales :

j Scripts action unique

: ils sont excuts une seule fois, lors du chargement du document par lagent utilisateur. Ils apparaissent dans le document lintrieur dun lment SCRIPT. Pour tenir compte des agents utilisateurs qui ne peuvent pas grer les scripts, mieux vaut inclure un contenu de remplacement via llment NOSCRIPT.

Ces scripts sont capables de modier dynamiquement le contenu du document. Leurs capacits dpendent du langage de script concern. La modication dynamique dun document peut tre modlise comme suit :
j j

Tous les lments SCRIPT sont valus dans lordre au fur et mesure du chargement du document. Toutes les structures de script lintrieur dun lment SCRIPT donn, qui gnrent des valeurs SGML de type CDATA, sont values. Leur texte gnr combin est insr dans le document la place de llment SCRIPT. Les donnes gnres de type CDATA sont rvalues.

Par exemple, imaginons le fragment de document suivant (vous ltudierez plus en dtail par la suite) :
<script language="JavaScript"> <!-Navigateur = navigator.appName;

LE GUIDE COMPLET 381

Chapitre 10

Scripts

if (Navigateur == Netscape) { document.write("<TD><A href=region_nets.html "); } if (Navigateur == Microsoft Internet Explorer) { document.write("<TD><A href=region_IE.html "); } document.writeln("target=princ>Ma r&eacute;gion</A></TD>" //--> </script>

Considrons que vous lexaminez avec un navigateur de type Netscape, congur pour accepter les scripts.

1 Le navigateur examine le contenu de llment SCRIPT. 2 Comme il sagit dun navigateur de type Netscape, cest le premier cas de linstruction conditionnelle qui est valu. Le moteur de script place donc dans le document la chane de caractres <TD><A href=region_nets.html, sort de linstruction conditionnelle, puis insre la chane target =princ>Ma r&eacute;gion</A></TD> et sort de llment SCRIPT. Le navigateur interprte ensuite la chane totale, soit :
<TD><A href=region_IE.html target=princ>Ma r&eacute;gion </A></TD>

Sil stait agi dun navigateur Internet Explorer, le rsultat 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 aprs le traitement de chaque lment SCRIPT.
j Scripts rptitifs

: ils sont excuts chaque fois quun vnement particulier se produit. Ils peuvent tre affects un certain nombre dlments laide des attributs dvnement intrinsque, tudis plus loin.

HTML ne dpend pas dun langage de script particulier. Les auteurs des documents indiquent explicitement aux agents utilisateurs le langage de chaque script. Les deux grands langages de script ct client, JavaScript (dvelopp par Netscape) et VBScript (Microsoft), ont men une bataille froce an

382 LE GUIDE COMPLET

lment SCRIPT

Chapitre 10

dattirer lattention des dveloppeurs. Microsoft a mme dvelopp sa propre version de JavaScript, nomme JScript. Cela sest traduit lpoque par une fragmentation croissante des sites Web : une fonction ntait reconnue que par un type de navigateur et partageait le public en deux parties, ceux qui possdaient 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 ngation de la technologie et de lesprit qui rgit Internet et le World Wide Web. Lide originelle tait et reste de partager ides et informations, indpendamment de lordinateur, du systme dexploitation ou de lapplication. La tendance est toutefois dsormais au respect de ECMAScript, une tentative de normalisation du noyau du langage JavaScript et de ses drivs : sa syntaxe, ses mots-cls et ses composants natifs. La troisime dition du standard ECMA-262 a t publie en dcembre 1999 (www.ecma-international.org/publications/standards/Ecma-262.htm). Nous reviendrons plus en dtail sur ces principaux langages dans la suite de ce chapitre. Pour le moment, intressons-nous la faon dincorporer un script ct client un document HTML.

10.2. lment SCRIPT

Vous insrez un script dans un document laide de llment SCRIPT, obligatoirement dot de balises douverture et de fermeture. Cet lment peut apparatre un nombre quelconque de fois dans les lments HEAD ou BODY dun document HTML. Par exemple, ajoutons notre page daccueil un petit script :

1 Ouvrez accueil.html dans le Bloc-Notes. 2 Modiez le numro de version :

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

3 Insrez, dans llment H2 du corps (llment BODY), llment SCRIPT suivant, en remplaant ce qui se trouve entre la balise douverture H2 et llment EM :
<H2> <SCRIPT type="text/javascript"> <!--

LE GUIDE COMPLET 383

Chapitre 10

Scripts

document.write("Bienvenue sur ") </SCRIPT> --> <EM>mon</EM> site.</H2>

4 Enregistrez votre chier, sans modier son nom, puis ouvrez index.html dans un navigateur. Gure passionnant : leffet est strictement identique la version prcdente (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 lattribut type) est en effet dune grande simplicit, puisquil ne contient quune instruction : document.write signie imprimer lcran linformation place entre parenthses . Celle-ci tant identique au texte original, aucune diffrence nest visible. Autrement dit, ce script est strictement identique la version prcdente du code, soit :
<H2>Bienvenue sur <EM>mon</EM> site.</H2>

Nous reviendrons par la suite sur la signication des lignes <! et >, mais souvenez-vous quil sagit dun commentaire HTML.
JavaScript dsactiv

Aucune diffrence nest visible si, et seulement si, votre navigateur est congur de faon autoriser les scripts. Si ce nest pas le cas, vous obtenez quelque chose de similaire ce qui est prsent gure suivante.

384 LE GUIDE COMPLET

lment SCRIPT

Chapitre 10

Figure 10.2 : Page daccueil sous Firefox, JavaScript tant dsactiv.

Activer JavaScript

Vous activez JavaScript avec Firefox en choisissant Outils > Options. Slectionnez Gnral dans la zone de gauche, puis cochez loption Autoriser JavaScript. Avec Internet Explorer, les rglages seffectuent en choisissant Outils > Options Internet, puis en cliquant sur longlet Scurit. Reportez-vous pour plus de dtails la documentation de votre navigateur. Internet Explorer 6 vous informe si une page contient un ou plusieurs script alors que le navigateur nest pas congur pour les accepter.
Figure 10.3 : Message dInternet Explorer, qui signale que les scripts sont dsactivs.

Ce script ne prsentant gure dintrt, essayons autre chose :

1 Revenez accueil.html, ouvert dans le Bloc-Notes. 2 Enregistrez le chier sous le nom accueil_3_10_1.html. 3 Modiez le numro de version :
<META name="version" content="3.10.2">

4 Redonnez llment H2 sa forme antrieure :

<H2>Bienvenue sur <EM>mon</EM> site.</H2>

LE GUIDE COMPLET 385

Chapitre 10

Scripts

5 Insrez aprs cet lment le code suivant :

<SCRIPT type="text/JavaScript"> <!-document.write("<P>Vous utilisez un navigateur " + navigator.appName + "</P>"); --> </SCRIPT>

6 Enregistrez votre chier sous le nom accueil.html, puis ouvrez index.html dans un navigateur. Le rsultat est plus intressant.

Figure 10.4 : Affichage du type de navigateur laide dun script JavaScript

Remarquez dans cette gure que Firefox est identi comme navigateur Netscape. Il est possible dobtenir plus de dtails, en particulier sur la version employe, comme vous le verrez par la suite.

Dnition du type de script : dclaration META et attribut type de llment SCRIPT

Nous ne le rpterons jamais assez : HTML ne dpend pas dun langage de script particulier. Vous devez indiquer explicitement aux agents utilisateurs le langage de chaque script. Vous pouvez spcier un langage de script par dfaut pour tous les scripts dun document. Pour ce faire, placez la dclaration META suivante dans llment HEAD :
<META http-equiv="Content-Script-Type" content="un_certain_type">

386 LE GUIDE COMPLET

lment SCRIPT

Chapitre 10

La valeur un_certain_type reprsente le type de contenu qui nomme le langage de script, par exemple text/tcl, text/JavaScript ou text/vbscript. Un document qui ne spcie pas de langage de script par dfaut et qui contient un ou plusieurs lments spciant un ou plusieurs scripts dvnement intrinsque est incorrect. Les agents utilisateurs peuvent toujours essayer dinterprter les scripts spcis incorrectement, mais ne sont nullement tenus de le faire. Vous pouvez galement spcier localement le langage dun script en dnissant lattribut type de son lment SCRIPT dans le document. La valeur de lattribut type spcie le langage de script du contenu de llment. Il outrepasse le langage de script par dfaut. Le langage de script est spci comme type de contenu (par exemple, text/javascript). Il faut fournir une valeur pour cet attribut, qui est dpourvu de valeur par dfaut. Cet attribut remplace dsormais lattribut language, qui spciait le langage de script du contenu de cet lment laide dun identiant du langage. Ces identiants ntant pas normaliss, lattribut est dconseill en faveur de lattribut type.

Autres attributs de llment SCRIPT

Un script peut tre dni en contenu de llment SCRIPT (comme dans les exemples prcdents) ou dans un chier externe. Lattribut src spcie alors lemplacement du script externe :
<SCRIPT type="text/javascript" src="quelquepart/script.js">

Si lattribut src nest pas spci, lagent utilisateur doit interprter le contenu de llment comme tant le script. Dans le cas contraire, lagent utilisateur doit ignorer le contenu de llment et ramener le script dsign par lURI. Remarquez que lattribut optionnel charset se rfre lencodage de caractres du script dsign par lattribut src et non au contenu de llment SCRIPT. Quand il est prsent, lattribut boolen defer indique lagent utilisateur que le script ne va gnrer aucun contenu de document (par exemple, aucune instruction document.write en JavaScript). Lagent utilisateur peut donc poursuivre lanalyse et la restitution.

LE GUIDE COMPLET 387

Chapitre 10

Scripts

Cas des agents utilisateurs qui ne grent pas les scripts

Les scripts sont prcieux, mais il serait dommage de fonder un site sur lexploitation de ceux-ci sans tenir compte des agents utilisateurs qui ne reconnaissent pas les scripts. Deux prcautions sont prendre :
j

Fournir un contenu de remplacement aux agents utilisateurs qui ne reconnaissent pas les scripts ou ne sont pas congurs pour les accepter. Dissimuler le contenu de ceux-ci pour les agents utilisateurs qui seraient susceptibles dafficher leur contenu comme du texte.

Nous allons examiner ces deux prcautions.

lment NOSCRIPT
Llment NOSCRIPT permet de fournir un contenu de remplacement lorsque, pour une raison quelconque, un script nest pas excut. Le contenu de llment NOSCRIPT ne doit tre restitu par un agent utilisateur reconnaissant les scripts que dans les cas suivants :
j j

Lagent utilisateur est congur pour ne pas excuter (valuer) les scripts. Lagent utilisateur ne reconnat pas le langage de script invoqu par un lment SCRIPT apparu plus tt dans le document.

Les agents utilisateurs qui ne grent pas les scripts ct client doivent restituer le contenu de cet lment. Dans lexemple suivant, lagent utilisateur qui interprte llment SCRIPT va inclure certaines donnes cres dynamiquement dans le document. Sil ne reconnat pas les scripts, lutilisateur peut toujours obtenir les donnes grce un lien.
<SCRIPT type="text/javascript"> ...un script javascrit qui incorpore des donn&eacute;es... </SCRIPT> <NOSCRIPT> <P><A href="http://quelquepart.fr/donnes.html"> Acc&egrave; aux donn&eacute;es. </A> </NOSCRIPT>

388 LE GUIDE COMPLET

lment SCRIPT

Chapitre 10

Grce llment NOSCRIPT, vous pouvez fournir de prcieuses indications vos visiteurs.

Figure 10.5 : Exemple de contenu dun lment NOSCRIPT

Dissimulation des donnes de script aux agents utilisateurs

La seconde prcaution consiste dissimuler le contenu des scripts. En effet, un agent utilisateur qui ne reconnat pas llment SCRIPT va vraisemblablement restituer le contenu de cet lment comme un texte. Certains moteurs de script, dont ceux des langages JavaScript et VBScript, autorisent la dlimitation des dclarations dun script par un commentaire SGML <! >. Les agents utilisateurs qui ne reconnaissent pas llment SCRIPT ignoreront le commentaire tandis que les moteurs de script intelligents comprendront que le script dans le commentaire doit tre excut.
Solution alternative

Une autre solution ce problme consiste placer les scripts dans des documents externes et les appeler avec lattribut src.

Avec JavaScript, vous pouvez employer la chane <! au dbut de llment SCRIPT : le moteur ignore les caractres suivants jusqu la n de la ligne. JavaScript interprte la chane // comme le dbut dun
LE GUIDE COMPLET 389

Chapitre 10

Scripts

commentaire qui stend jusqu la n de la ligne courante. Elle est ncessaire pour dissimuler la chane > lanalyseur JavaScript (mme si celle-ci ne lui pose gnralement pas de problme). Voici un exemple :
<SCRIPT type="text/javascript"> <!dissimulation du contenu du script aux anciens navigateurs function square(i) { document.write("Lappel a pass&eacute; ", i , " &agrave; la fonction.","<BR>") return i * i } document.write("La fonction a renvoy& ",square(i),".") // fin de la dissimulation du contenu --> </SCRIPT>

Avec VBScript, cest le caractre guillemet simple qui fait, du reste de la ligne courante, un commentaire. Par exemple :
<SCRIPT type="text/vbscript"> <!-Sub foo() ... End Sub --> </SCRIPT>

Vous lavez compris, le choix du caractre de commentaire dpend du langage de script employ. Avec Tcl, par exemple, ce serait le caractre #, etc.
Fermeture de commentaires

Certains navigateurs referment les commentaires au premier caractre > rencontr. Pour dissimuler le contenu du script ces navigateurs, vous pouvez transposer les oprandes des oprateurs relationnels et de dcalage (par exemple, en crivant y < x plutt que x > y) ou employer le mcanisme dchappement du langage de script pour le caractre >.

10.3. vnements intrinsques

Chaque langage de script obit ses propres rgles pour appeler des objets HTML partir dun script. La spcication HTML ne dnit aucun mcanisme standard dappel des objets HTML. La syntaxe des donnes du script dpend du langage de script.
390 LE GUIDE COMPLET

vnements intrinsques

Chapitre 10

Les scripts doivent toutefois rfrer un lment en fonction du nom qui lui est assign. Les moteurs de script doivent observer la rgle de prsance suivante dans lidentication dun lment : lattribut name est prioritaire sur lattribut id si les deux sont prsents. Sinon, lun ou lautre peuvent tre employs indiffremment. Il est possible dassocier une action un certain nombre dvnements, qui se produisent lorsque lutilisateur interagit avec lagent utilisateur. Chacun des vnements intrinsques prend comme valeur un script :
nom_vnement="script"

Evnements intrinsques

Des modications vont probablement tre apportes aux vnements intrinsques, notamment en ce qui concerne la faon dont les scripts sont rattachs aux vnements. Les recherches dans ce domaine sont menes par les membres du groupe de travail sur le Modle Objet de Document (DOM) du W3C. Consultez le site Web du W3C (www.w3.org/) pour plus de renseignements.

Le script sexcute chaque fois que lvnement se produit pour cet lment. La syntaxe des donnes de script dpend du langage de script. Les vnements reconnus par les diffrents lments HTML sont prsents dans le tableau suivant.
Tableau 10.1 : vnements intrinsques HTML

vnement

Survient lorsque

vnements concernant les lments BODY et FRAMESET

onload onunload

Lagent utilisateur nit de charger une fentre ou bien tous les cadres dans un jeu dencadrement FRAMESET Lagent utilisateur retire le document dune fentre ou dun cadre

vnements de formulaire (lment FORM)

onsubmit onreset

Un formulaire est soumis Un formulaire est rinitialis

vnements concernant les commandes de formulaire

LE GUIDE COMPLET 391

Chapitre 10

Scripts
Tableau 10.1 : vnements intrinsques HTML

vnement

Survient lorsque Un lment reoit le focus via le dispositif de pointage ou une navigation par tabulation. Sapplique aux lments A, AREA, LABEL, INPUT, SELECT, TEXTAREA et BUTTON. Un lment perd le focus via le dispositif de pointage ou une navigation par tabulation. Sapplique aux mmes lments que onfocus. Lutilisateur slectionne un certain texte dans un champ textuel. Sapplique aux lments INPUT et TEXTAREA. Une commande perd le focus ou sa valeur a t modie depuis linstant o elle a reu le focus. Sapplique aux lments INPUT, SELECT et TEXTAREA.

onfocus

onblur

onselect onchange

vnements gnriques. Tous les lments, sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE et TITLE.

onclick ondblclick onmousedown onmouseup onmouseover onmousemove onmouseout onkeypress onkeydown onkeyup

Le bouton du dispositif de pointage est cliqu au-dessus dun lment Le bouton du dispositif de pointage est double-cliqu audessus dun lment Le bouton du dispositif de pointage est appuy au-dessus dun lment Le bouton du dispositif de pointage est relch au-dessus dun lment Le dispositif de pointage est dplac sur un lment Le dispositif de pointage est dplac alors quil est audessus dun lment Le dispositif de pointage est dplac en dehors dun lment Une touche est presse puis relche au-dessus dun lment Une touche est garde appuye au-dessus dun lment Une touche est relche au-dessus dun lment

Comme vous pouvez le voir, la liste des vnements quil est possible didentier et de relier une action est impressionnante. Vous pouvez par exemple employer des lments de commande de formulaire (INPUT, SELECT, BUTTON, TEXTAREA et LABEL), qui rpondent tous
392 LE GUIDE COMPLET

vnements intrinsques

Chapitre 10

certains vnements intrinsques, pour amliorer linterface utilisateur graphique du document. Voici quelques exemples demploi dvnements intrinsques. Nous avions vu, lors de lexamen des formulaires, que certains champs pouvaient tre obligatoires, et quil tait possible de tester la validit des donnes dun formulaire avant sa soumission laide de scripts. Dans le premier exemple, la commande nomme nomUtilisateur est un champ obligatoire. Lorsque lutilisateur quitte ce champ, celui-ci perd le focus (vnement onblur), ce qui appelle une fonction JavaScript qui teste la validit de nomUtilisateur.
<INPUT name="nomUtilisateur" onblur="verifNomUtilisateur(this.value)">

Dans lexemple suivant, le champ nombre doit normalement contenir une valeur comprise entre 1 et 10. Le code JavaScript suivant vrie ce fait aprs la saisie dun nombre par lutilisateur :
<INPUT name="nombre" onchange="if (!verifNombre(this.value, 1, 10)) {this.focus();this.select();} else {remercier()}" value="0">

Document.write

Une dclaration document.write ou quivalente place dans un gestionnaire dvnements intrinsques cre et crit vers un nouveau document au lieu de modier le document courant.

Voici enn un autre exemple demploi dvnements intrinsques. Supposons que nous ayons modi la barre de navigation en remplaant le texte par une icne. Pour licne correspondant Accueil, ce pourrait tre une icne nomme accueil.gif. Le chier de la barre de navigation a t modi en consquence (ce chier se trouve dans les chiers exemples sous le nom barrenav1.html ; vous devez lappeler laide du chier index1.html, galement prsent) :
<TD><A href="accueil.html" target=princ> <IMG src="images/accueil.gif" alt="Accueil" border="0"> </A> </TD>

LE GUIDE COMPLET 393

Chapitre 10

Scripts

Laspect de la barre de navigation, ainsi modie, serait quelque chose danalogue ce qui est prsent dans la gure suivante.

Figure 10.6 : Aspect de la barre de navigation modie

Imaginez que nous voulions que lutilisateur visualise encore mieux sa navigation en modiant laspect de licne. Pour faire simple, nous nous sommes borns ici inverser les couleurs de licne, laide de la fonction Ngatif de Paint Shop Pro, pour crer un chier nomm accueil2.gif.

Figure 10.7 : Aspect des icnes accueil.gif et accueil2.gif

Nous modions alors comme suit llment A qui concerne la page daccueil, en ajoutant ce qui suit :
<TD><A href="accueil.html" target=princ onmouseover="t=acc.src;acc.src=acc.lowsrc" onmouseout="acc.src=t" > <IMG name="acc" lowsrc="images/accueil2.gif" src="images/accueil.gif" alt="Accueil" border="0"> </A> </TD>

Ce chier se trouve dans les chiers exemples, sous le nom barrenav2.html. En lexaminant dans votre navigateur (en appelant index2.html, galement fourni), vous constatez que, lorsque votre dispositif de pointage (en principe votre souris) est plac au-dessus de licne Accueil, celle-ci se modie immdiatement : cela ajoute de linteractivit et du dynamisme votre site, pour des efforts somme toute relativement faibles.
394 LE GUIDE COMPLET

vnements intrinsques

Chapitre 10

Figure 10.8 : Modication la vole de licne selon que le dispositif de pointage est plac ou non dessus

Ce petit fragment de code mrite que vous lexaminiez dun peu plus prs, pour comprendre ce qui se passe. Il est un peu particulier en ce quil nemploie pas un vrai script (vous remarquerez labsence dlment SCRIPT), mais a recours au Modle Objet de Document (DOM) sous-jacent tout document HTML ou XML bien form. Regardez dabord llment IMG : vous lavez nomm (name="acc"), avez laiss lattribut src dni comme prcdemment, mais avez galement dni un autre attribut, lowsrc, avec comme valeur la seconde icne. Dans llment A, vous avez ajout deux gestionnaires dvnements : un pour onmouseover (la souris est sur licne) et un pour onmouseout (la souris quitte licne). Par dfaut, la souris nest pas sur licne et licne affiche est celle qui correspond la valeur de lattribut src de llment IMG (ou acc.src, puisque cet lment se nomme acc), soit donc celle situe lURI images/accueil.gif. Lorsque la souris se place sur licne, la valeur de acc.src est place dans la variable t et est remplace par la valeur de acc.lowsrc, soit lURI qui mne la seconde icne : images/accueil2.gif. Lagent utilisateur applique alors la modication et affiche la seconde icne. Lorsque le curseur quitte licne, la valeur de t est place dans acc.src et la premire icne est nouveau affiche.
Modle Objet de Document (DOM)

Le Modle Objet de Document (DOM), spcication du W3C (http: //xmlfr.org/w3c/TR/REC-DOM-Level-1/), est une interface de programmation dapplications (API) pour documents HTML et XML. Il se divise en deux parties : DOM Core (ou noyau) et DOM HTML (les spcications propres HTML).

LE GUIDE COMPLET 395

Chapitre 10

Scripts

Le DOM dnit la structure logique des documents ainsi que la faon dont vous accdez aux lments et les manipulez. Avec le Modle Objet de Document, les programmeurs peuvent construire des documents, naviguer dans leur structure, et ajouter, modier ou supprimer des lments ou du contenu. Tout ce qui se trouve dans un document HTML ou XML peut tre accd, chang, dtruit ou ajout en utilisant le Modle Objet de Document, quelques rares exceptions prs. DOM est conu pour tre utilis avec nimporte quel langage de programmation. Dans DOM, les documents ont une structure logique comparable une arborescence. Le nom Modle Objet de Document a t choisi parce quil sagit dun modle objet au sens traditionnel de la conception oriente objet : les documents sont modliss en utilisant des objets, tandis que le modle ne contient pas uniquement la structure du document mais aussi son comportement et celui des objets dont il est compos. En dautres termes, les nuds ne reprsentent pas une structure de donnes, mais des objets possdant une identit, un comportement et des proprits. Le DOM contient galement les vnements associs aux diffrents lments du document. Par exemple, dans lexemple ci-dessus, DOM contient llment HTML A ainsi que les vnements associs onMouseOver et onMouseOut. Les attributs des lments HTML nomms sont traits comme des proprits de lobjet. Ainsi, vous accdez lattribut src de llment IMG nomm acc laide de acc.src. Une tude plus complte du DOM dpasse largement lobjectif de ce livre. Reportez-vous si ncessaire la spcication du W3C, ladresse indique en haut de cet encadr.

10.4. Travail avec les scripts

Vous devez lavoir compris, si insrer un script, interne ou externe, dans un document HTML ne prsente gure de difficults, cest tout autre chose ds que lon passe la rdaction de ces scripts. Les langages de script sont gnralement rputs ne pas tre trs faciles apprendre. Si vous souhaitez vous y attaquer, commencez par la syntaxe : cest la grammaire fondamentale des langages informatiques, de programmation, de script ou hypertextes. Aprs avoir compris la syntaxe, passez au vocabulaire : les mots rservs et les noms. Par exemple, en quoi un frame JavaScript diffre-t-il dun FRAME HTML ?

396 LE GUIDE COMPLET

Travail avec les scripts

Chapitre 10

Vous pouvez apprendre un langage de script en utilisant la mme mthode que celle dont vous vous tes servi pour HTML : en achetant un ouvrage consacr au langage qui vous intresse, en examinant des codes source dans votre navigateur Web, ainsi quen menant des recherches dans les listes de diffusion et les forums de discussion. Sans vouloir plonger trop avant dans ltude de ces langages de script, il existe une mthode simple et efficace : rutiliser du code. Vous avez remarqu que, dans les pages HTML que nous avons cres, de nombreuses parties de code taient rptitives : plutt que de les saisir nouveau, un simple copier-coller permet dobtenir rapidement le rsultat souhait. Il en va de mme pour les scripts : rutiliser 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 rcrire dans chaque document, mais en faire un script externe appel par plusieurs documents. En outre, de nombreux concepteurs indpendants partagent leur travail avec tous, encourageant le public utiliser et rutiliser leur guise leurs scripts. Lorsque vous voulez accomplir quelque chose, il existe de fortes chances pour quun programmeur autre que vous y ait dj pens et ait mme propos son script gratuitement sur le Net. Un dernier point : la scurit des scripts. Les scripts sont globalement bien moins dangereux quon ne le laisse supposer. Plus exactement, les dangers quils prsentent sont le plus souvent dus des failles de scurit des navigateurs et des systmes dexploitation. Des mises jour sont rgulirement diffuses pour pallier ces failles lorsquelles sont identies. Veillez toujours rechercher au moins mensuellement les mises jour de scurit qui sappliquent votre navigateur et votre systme dexploitation. Nous allons maintenant examiner un peu plus en dtail les principaux langages de script.

JavaScript
Le JavaScript est un langage qui permet dcrire des scripts incorpors dans un document HTML. Historiquement, cest le premier langage de script pour le Web qui a permis aux dveloppeurs Web dexcuter de petits programmes sur le navigateur Web plutt que sur le serveur Web, do le terme de script ct client.
LE GUIDE COMPLET 397

Chapitre 10

Scripts

JavaScript a t mis au point par Netscape en 1995. lorigine, il se nommait LiveScript et tait destin fournir un langage de script simple au navigateur Netscape Navigator 2. Il a, lpoque, t longtemps critiqu pour son manque de scurit, son dveloppement peu pouss et labsence de messages derreur explicites rendant dlicate son utilisation. Le 4 dcembre 1995, suite une association avec le constructeur Sun, Netscape rebaptise son langage JavaScript (un clin dil au langage Java dvelopp par Sun). la mme poque, Microsoft met au point le langage JScript, un langage de script trs similaire. De ce fait, le langage JavaScript dans ses diffrentes versions (jusqu 2.0 pour JavaScript au sens strict, plus les versions de JScript) est fortement dpendant du navigateur appelant la page Web dans laquelle le script est incorpor (reportez-vous plus loin au tableau page 407). Ainsi, pour viter toute drive, un standard a t dni pour normaliser les langages de script. Il sagit de lECMA-262, aussi appel ECMAScript, cr par lorganisation du mme nom (ECMA, European Computer Manufactures Association). Nous reviendrons par la suite sur ECMAScript. Il ne ncessite 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. Cest un langage peu volu qui ne permet aucune condentialit au niveau des codes : ceux-ci restent visibles. Vous avez dj rencontr JavaScript dans ce chapitre. Ce livre na pas pour vocation de vous apprendre tout ce quil faudrait savoir propos de JavaScript, mais vous allez cependant en dcouvrir la syntaxe principale et le vocabulaire de base. Cela est suffisant pour dbuter avec JavaScript. JavaScript permet de personnaliser lapparence de documents HTML, douvrir et de fermer des botes de dialogue surgissantes (pop-up), de manipuler des cookies, dexcuter des calculs ainsi que de gnrer et de manipuler dynamiquement le contenu de la page HTML elle-mme. JavaScript a recours au Modle Objet de Document (DOM), cit dans la section prcdente, pour modier dynamiquement la page Web. La syntaxe de JavaScript diffre de celle dHTML, sans en devenir pour autant effrayante. La syntaxe de base du langage, largement inspire de celle de C/C++, prsente les caractristiques suivantes :
398 LE GUIDE COMPLET

Travail avec les scripts

j j j j

Chapitre 10

Les commandes sont spares par un point-virgule (;). Les accolades {}dnissent un bloc de commande et permettent de limiter la porte des variables. Un commentaire sur une ligne est prcd de //. Un commentaire sur plusieurs lignes est encadr par la balise douverture /* et la balise de fermeture */.

JavaScript est sensible la casse. Cela signie que si vous concevez une fonction nomme Date, vous ne pourrez lappeler laide de date, DATE ou DaTE : il faut imprativement lappeler avec Date. JavaScript est enn un langage script orient objets, ce qui signie que vous pouvez crer des classes et des instances dobjets. JavaScript propose en standard un certain nombre de classes, que vous pourrez utiliser votre aise pour crer vos programmes. Il sera donc possible davoir des syntaxes du type :
objet.methode(parametre);

Lutilit 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 dune portion de texte, ou de la date et de lheure courantes. Une fois la page charge, il nexiste aucun moyen de mettre jour lheure sans avoir recours un lment META Refresh ou sans demander lutilisateur dactualiser (ou de recharger) la page. Si cependant le script qui permet dinclure lheure est situ dans une fonction JavaScript, celle-ci peut tre excute chaque fois que lutilisateur accomplit une certaine action, comme dplacer la souris sur une image ou cliquer sur un bouton. Voici un exemple classique de code JavaScript, adapt pour une meilleure conformit avec la spcication HTML 4.01 partir dun chier disponible gratuitement sur lexcellent site de Je JavaScript.net (www.jejavascript.net/date.php). Ce script na quun but : afficher la date systme.
Listing 10-1 : date.js
01 02 03 04 05 06 07 // PLF - http://www.jejavascript.net/ var datedujour, date, mois, mois1, jour, jour1, an; datedujour = new Date(); jour = datedujour.getDay() switch(jour){ case 1 : jour1 ="Lundi"

LE GUIDE COMPLET 399

Chapitre 10
08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

Scripts

break; case 2 : jour1 ="Mardi" break; case 3 : jour1 ="Mercredi" break; case 4 : jour1 ="Jeudi" break; case 5 : jour1 ="Vendredi" break; case 6 : jour1 ="Samedi" break; case 0 : jour1 ="Dimanche" break; } date = datedujour.getDate() mois = datedujour.getMonth() switch(mois+1){ case 1 : mois1 ="Janvier" break; case 2 : mois1 ="F&eacute;vrier" break; case 3 : mois1 ="Mars" break; case 4 : mois1 ="Avril" break; case 5 : mois1 ="Mai" break; case 6 : mois1 ="Juin" break; case 7 : mois1 ="Juillet" break; case 8 : mois1 ="Ao&ucirc;t" break; case 9 : mois1 ="Septembre" break; case 10 : mois1 ="Octobre"

400 LE GUIDE COMPLET

Travail avec les scripts

60 61 62 63 64 65 66 67 68 break; case 11 : mois1 ="Novembre" break; case 12 : mois1 ="D&eacute;cembre" break; } an = datedujour.getFullYear()

Chapitre 10

Les lignes ont t numrotes uniquement pour faciliter linterprtation ultrieure. Le chier tel quil est prsent est un chier externe, que vous devez appeler comme suit dans votre lment HEAD :
<SCRIPT type="text/javascript" src="date.js">

Ce code JavaScript calcule la date systme. Comment fonctionne-t-il ?

1 Vous dnissez dans la ligne 2 plusieurs variables : datedujour, date, mois, mois1, jour, jour1 et an. 2 Dans la ligne 3, vous affectez datedujour la valeur renvoye par la mthode globale Date(). 3 Dans la ligne 4, vous affectez la variable jour la valeur renvoye par la mthode datedujour.getDay(). 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 renvoye par la mthode datedujour.getDate(). Celle-ci renvoie un nombre qui correspond au jour du mois. 6 Dans la ligne 29, vous affectez la variable mois la valeur renvoye par la mthode datedujour.getMonth(). 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 renvoye par la mthode datedujour.getFullYear(). Celle-ci renvoie un nombre qui correspond au jour du mois.
Nous avons dni des variables, mais ne les avons pas encore employes : cela respecte le principe de la sparation des logiques de

LE GUIDE COMPLET 401

Chapitre 10

Scripts

travail et de prsentation. Pour afficher la date du jour, placez ce qui suit dans un lment SCRIPT dans le corps de votre document HTML :
<SCRIPT type="text/javascript"> document.write("<DIV style=text-align: center; font-weight: bold; font-size: +2"); document.write(jour1, " "); document.write(date, " "); document.write(mois1 , " "); document.write(an, " "); document.write("</DIV>"); </SCRIPT

Cela crit dans le document la date systme, au sein dun lment DIV style dni.

Figure 10.9 : Affichage de la date systme laide dun script

Ce script nest quun exemple. Il pourrait tre crit de bien dautres faons pour parvenir au mme rsultat. Par exemple, JavaScript permet lutilisation de matrices dans vos scripts. Celles-ci sont dnies laide de crochets []. Vous pourriez ainsi employer des matrices au lieu dinstructions conditionnelles. Le programme deviendrait alors :
Listing 10-2 : date2.js
01 02 03 // PLF - http://www.jejavascript.net/ Modifs : F. Lemainque var datedujour, date, mois, mois1, jour, jour1, an; nomMois = new Array("Janvier","F&eacute;vrier","Mars", "Avril","Mai","Juin","Juillet","Ao&ucirc;t", "Septembre","Octobre","Novembre","D&eacute;cembre"); nomJours = new Array("Dimanche","Lundi","Mardi", "Mercredi","Jeudi","Vendredi","Samedi"); datedujour = new Date(); jour = datedujour.getDay() jour1 = nomjours[jour] date = datedujour.getDate() mois = datedujour.getMonth() mois1 = nomMois[mois] an = datedujour.getFullYear()

04 05 06 07 08 09 10 11

402 LE GUIDE COMPLET

Travail avec les scripts

Chapitre 10

Le chier est nettement plus court : 11 lignes au lieu de 68 ! Il pourrait dailleurs tre rendu encore plus compact, mais nous laissons cela votre sagacit. Examin dans votre navigateur, il procure des rsultats identiques la version prcdente.

Figure 10.10 : Autre script daffichage de la date systme

Cadres cibles et JavaScript

JavaScript utilise des cadres cibles et des fentres nommes pour contrler le contenu dun document Web. Il peut vous jouer des tours quand vous ciblez partir dun cadre possdant une cible de base (lment BASE). Selon le navigateur, JavaScript peut employer la cible de base au lieu de la cible spcie dans le script. Vous pouvez contourner ceci en retirant llment BASE de votre page de cadres.

Comme tout bon langage, JavaScript possde un vocabulaire constitu de mots individuels qui, lorsquils sont combins en fonctions, ordonnent au navigateur Web daccomplir quelque chose via le moteur de script. Vous trouverez certains des mots de ce vocabulaire dans le tableau page 406. Trs succinctement, comme nous lavons signal plus haut, vous pouvez dcomposer le langage JavaScript en objets, mthodes et vnements. Lensemble dobjets disponibles pour le langage de script dpend du navigateur utilis. Il sagit du Modle Objet de Document (Document Object Model, ou DOM), dj abord. Les mthodes dnissent les actions de JavaScript. Dans lexemple prcdent,
document.write(jour1, " ");

LE GUIDE COMPLET 403

Chapitre 10

Scripts

a recours la mthode write() pour insrer du texte dans lobjet document, et le faire ainsi apparatre dans votre navigateur Web. Enn, les vnements permettent dappeler les fonctions. Si les fonctions sont un ensemble dinstructions excutes chaque fois que vous prononcez le mot magique, alors lvnement est ce mot magique. Si le script contient une fonction nomme OuvreFenetre, vous pourriez appeler celle-ci laide dun vnement comme :
<BODY onLoad="OuvreFenetre ()">,

Cela excute le script. onLoad est lvnement qui indique au navigateur quand appeler la fonction et excuter le script. Voici un exemple :
<SCRIPT LANGUAGE="javascript"> <!-function OuvreFenetre(){ remote = window.open("","remotewin",width=125,height=175); remote.location.href = "fenetre.html"; if (remote.opener == null) remote.opener = window; remote.opener.name = "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 lavertissement prsent dans la gure suivante : ici les fentres surgissantes (popup) sont dsactives et Firefox vous prvient de la tentative.

Figure 10.11 : Les fentres surgissantes sont dsactives

404 LE GUIDE COMPLET

Travail avec les scripts

Chapitre 10

En autorisant les fentres surgissantes pour ce site et en rafrachissant votre document dans le navigateur, vous voyez apparatre une nouvelle fentre.

Figure 10.12 : Apparition dune fentre surgissante

Globalement, les fentres surgissantes sont plus souvent pnibles quutiles : mieux vaut les laisser dsactives et ne les activer que lorsque cela est rellement ncessaire. Le vocabulaire JavaScript contient bien dautres mots, en sus des objets, mthodes et vnements prsents ici : par exemple, les matrices, les instructions et les oprateurs. Une matrice est une collection dobjets ou de variables regroups sous un mme nom de variable. Nous en avons employ dans le chier date2.js :
nomMois = new Array( "Janvier","F&eacute;vrier","Mars","Avril","Mai", "Juin","Juillet","Aot","Septembre","Octobre", "Novembre","D&eacute;cembre");

Certaines instructions utilisent des mots rservs, comme if, else if et switch. Nous avions employ cette dernire instruction dans le chier date2.js :
switch(jour){ instructions case }

Chacune de ces instructions possde un sens prcis pour JavaScript. Cest ainsi que switch signie branchez-vous sur linstruction case qui correspond la valeur du paramtre et accomplissez linstruction mentionne, puis sortez de linstruction switch .

LE GUIDE COMPLET 405

Chapitre 10

Scripts

Il existe galement de nombreux oprateurs, les plus courants servant pour des oprations mathmatiques ou comme oprateurs de comparaison, par exemple dans une instruction if. Les objets documents, comme document.cookie, appartiennent aussi bien JavaScript quau Modle Objet de Document (DOM). JavaScript possde plusieurs objets intgrs, comme lobjet cookie, qui peuvent tre utiliss automatiquement comme parties de lobjet document. Les mises en uvre Netscape et Microsoft du DOM sont toutefois longtemps restes incompatibles, rendant difficile la vie du concepteur Web. Le tableau suivant prsente quelques exemples dobjets ou proprits document, prcieux en JavaScript.
Tableau 10.2 : Proprits de document JavaScript

Nom de la proprit
alinkColor

Exemple
document .alinkColor .#CC0000

But
Dnit la couleur des liens slectionns

quivalent HTML
<BODY alink =#CC0000> <BODY bgcolor =FFFFFF>

bgColor Cookie

Dnit la couleur darriredocument .bgColor.#FFFFFF plan document .cookie Obtient la valeur de tout cookie associ ce document

fgColor lastModified

document Dnit la couleur du texte .fgColor.#000000 document .lastModified document .linkColor .#0000CC document .location document .referrer document.title Obtient la date de dernire modication du document actif Dnit la couleur des liens

<BODY text =#000000>

linkColor

<BODY link =#0000CC> <!#echo var ="DOCUMENT_URI">

Location Referrer

Obtient lURL du document Lit lURL du document cible (la page Web lie au document actif) Rcupre le titre (llment TITLE) du document actif Voir location

Title URL

406 LE GUIDE COMPLET

Travail avec les scripts

Tableau 10.2 : Proprits de document JavaScript

Chapitre 10

Nom de la proprit
vlinkColor

Exemple
document .vlinkColor .#CC00CC

But
Dnit la couleur des liens visits

quivalent HTML
<BODY vlink ="#CC00CC">

Nous avons dit que le rendu et le bon fonctionnement de JavaScript dpendaient largement du navigateur employ. Le tableau suivant prsente les versions de JavaScript prises en charge par les principaux navigateurs.
Tableau 10.3 : Versions JavaScript et navigateurs

Version de JavaScript JavaScript 1.0 JavaScript 1.1 JavaScript 1.2 JavaScript 1.3 JavaScript 1.4 JavaScript 1.5 JavaScript 1.6 JavaScript 1.7 JavaScript 1.8

Navigateurs Netscape Navigator 2.0, Internet Explorer 3.0, Opera, Mozilla Netscape Navigator 3.0, Opera, Mozilla Netscape Navigator 4.0/4.05, Internet Explorer 4.0, Opera, Mozilla Netscape Navigator 4.06, Internet Explorer 5.0, Opera, Mozilla Netscape Navigator 6.0, Internet Explorer 6.0, Opera, Mozilla Netscape Navigator 6.0, Mozilla Firefox 1.5/Gecko 1.8 Firefox 2/Gecko 1.8.1 Firefox 3/Gecko 1.9 ( paratre).

Si vous devez crire plusieurs versions dun programme, an de tenir compte des agents utilisateurs employs par vos visiteurs, il serait intressant de pouvoir dterminer le type dagent utilisateur employ. Cela est possible : nous lavons fait, quoique de faon trs primitive, dans la dernire version du chier accueil.html :
... <SCRIPT type="text/javascript"> <!--

LE GUIDE COMPLET 407

Chapitre 10

Scripts

document.write("<P>Vous utilisez un navigateur " + navigator.appName + "</P>"); --> </SCRIPT> ...

Il est possible de faire bien mieux, grce aux proprits de lobjet navigator de JavaScript.

1 Ouvrez accueil.html dans le Bloc-Notes. 2 Enregistrez le chier sous le nom accueil_3_10_2.html. 3 Modiez le numro de version :
<META name="version" content="3.10.3">

4 Dplacez llment SCRIPT par couper-coller juste avant llment HR du bas de la page. 5 Insrez aprs la ligne de commentaire de llment SCRIPT le code suivant, en remplacement de la ligne actuelle :
<SCRIPT type="text/JavaScript"> <!-document.write("<TABLE width=70%>"); document.write("<TR>"); document.write("<TD>Nom et version de votre navigateur </TD><TD>"); document.write(navigator.appName + " " + navigator .appVersion); document.write("</TD></TR>"); document.write("<TR>"); document.write("<TD>Informations d&eacute;tailles sur votre agent utilisateur</TD><TD>"); document.write(navigator.userAgent); document.write("</TD></TR>"); document.write("</TABLE>"); // --> </SCRIPT>

6 Enregistrez votre chier sous le nom accueil.html, puis ouvrez index.html dans un navigateur. Le rsultat peut vous surprendre (voir Figure 10.13, 10.14, 10.15).
Cela est obtenu laide des prcieuses proprits de llment navigator, prsentes dans le tableau suivant.

408 LE GUIDE COMPLET

Travail avec les scripts

Chapitre 10

Figure 10.13 : Affichage dtaill du type de navigateur et du systme dexploitation laide dun 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 : Proprits JavaScript de lobjet navigateur (navigator)

Proprit
appCodeName

Description
Renvoie le nom de code du 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 diffrente si le navigateur du client est fond sur un autre moteur, comme Opera. Renvoie le nom du navigateur (la plupart du temps la marque). Cette proprit est utile pour diffrencier les navigateurs de Netscape et de Microsoft. Renvoie la version du navigateur sous la forme suivante : numro de version (systme dexploitation): nationalit). Elle est utile pour connatre le systme dexploitation de lutilisateur, mais elle permet surtout, en association avec la proprit navigator.appName, de connatre les fonctionnalits prises en charge par le navigateur de votre visiteur. Renvoie une chane de caractres qui correspond la langue utilise par le navigateur du client. Cette proprit nest comprise que par les navigateurs prenant en charge les versions 1.2 et suprieures de JavaScript. Renvoie un tableau des types MIME pris en charge par le navigateur, cest--dire les types de chiers enregistrs. Renvoie une chane de caractres qui indique le systme dexploitation du client. Cette proprit nest comprise que par les navigateurs qui prennent en charge les versions 1.2 et suprieures de JavaScript. Renvoie la liste des plug-in (modules complmentaires) installs sur la machine cliente.

Exemple
Mozilla

appName

Netscape

appVersion

5.0 (Windows, frFR)

language

frFR

mimeTypes

application/xshockwave flash, application/futuresplash, application/xjavavm, etc. Win32

platform

plugins

npnul32.dll, npswf32.dll, NPOJI610.dll, NPJava11.dll, etc.

410 LE GUIDE COMPLET

Travail avec les scripts

Chapitre 10

Tableau 10.4 : Proprits JavaScript de lobjet navigateur (navigator)

Proprit
userAgent

Description
Renvoie la chane de caractres qui comprend toutes les informations sur lagent utilisateur du client. Les proprits ci-dessus offrent un moyen pratique de rcuprer une partie de cette information.

Exemple
Mozilla/5.0 (Windows, U, Windows NT 5.1, frFR, rv:1.7.8), Gecko/20050511, Firefox/1.0.4

Puisque vous pouvez dterminer le type de lagent utilisateur du client, vous tes en mesure de crer un site rellement dynamique, qui oriente le visiteur vers des pages conues spciquement pour lagent utilisateur dont il se sert. Par exemple, en remplaant dans la barre de navigation
<TD><A href="accueil.html" target=princ>Accueil</A></TD>

par ce qui suit :

<script type="text/javascript"> <!-Navigateur = navigator.appName; if (Navigateur == Netscape) { document.write("<TD><A href=region_nets.html "); } if (Navigateur == Microsoft Internet Explorer) { document.write("<TD><A href=region_IE.html "); } document.writeln("target=princ>Ma r&eacute;gion</A></TD>" //--> </script>

Selon le navigateur, la page affiche diffre. Vous pouvez ainsi tirer prot des caractristiques propres chaque navigateur.
NOSCRIPT

Si vous procdez ainsi, vous devriez en pratique placer la ligne remplace dans un lment NOSCRIPT, cela an de prendre en compte les navigateurs ne reconnaissant pas les scripts, en ciblant ventuellement une page dpourvue 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 gnralement recours lobjet XMLHTTPRequest (XHR) pour envoyer une requte un script serveur et analyser dynamiquement les rsultats de ce dernier via DOM. Internet Explorer a t le premier proposer ce composant, sous forme dun ActiveX, ds la n des annes 90. Ce nest quen 2002 que les dveloppeurs commencent massivement lutiliser, vu son adoption dans FireFox. Les versions dInternet Explorer antrieures la 7 ne graient pas lobjet XHR tels que dcrit dans les standards du W3C mais proposaient un contrle 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 dnit les interfaces riches permettant linternaute une plus grande interactivit avec la page web.

ECMAScript
Comme nous lavons dj signal, ECMAScript est une tentative de normalisation du noyau du langage JavaScript et de ses drivs : sa syntaxe, ses mots-cls et ses composants natifs. La troisime dition du standard ECMA-262 a t publie en dcembre 1999 (www .ecma-international.org/publications/standards/Ecma-262.htm), mais la quatrime version est en dveloppement (http://www.ecmascript.org/es4 /spec/overview.pdf).Cest devenu un standard international (ECMA-262 et ISO-10262), ce qui en fait une des rares technologies Internet non protocole avoir obtenu une normalisation dun organisme officiel : mme HTML na jamais dpass le stade de Recommandation W3C. Le standard ECMAScript dnit une syntaxe de programmation proche du langage C. Si vous connaissez dj ce langage, vous serez rapidement oprationnel. Si chaque navigateur possde son propre interprteur de JavaScript, et est donc susceptible dtre incomplet et de ne pas comprendre tout ce que vous aurez pu coder, les dernires versions des navigateurs modernes prennent en charge dans sa quasi-intgralit le standard ECMAScript. Cest 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 identier un script crit en ECMAScript. En effet, il est dclar 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 quils peuvent recouvrir des diffrences notables.

VBScript
VBScript est un langage de script propre Microsoft, driv du langage de programmation Visual Basic. VBScript ntait pas prvu 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. Lexprience prouve quil suffit dexaminer quelques exemples de nimporte quel langage de script pour shabituer sa syntaxe. VBScript reste trs proche de JavaScript, mme sil emploie une syntaxe de ponctuation lgrement diffrente. Les commentaires dbutent par une apostrophe simple, tandis que certains oprateurs ont recours un symbole diffrent : par exemple & au lieu de +. VBScript nest pas sensible la casse : document.write, document.Write et Document.Write sont strictement quivalents. Comme pour tout script, votre code doit tre insr dans un lment
SCRIPT, mais avec cette fois, comme valeur de lattribut type, la chane text/vbscript. Une ligne de commentaire permet de le

masquer vis--vis des anciens navigateurs. Vous pouvez (et devriez) galement avoir recours un lment <NOSCRIPT> an dafficher 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 systme, exactement comme les chiers JavaScript date.js et date2.js vus prcdemment.
<SCRIPT type="text/vbscript"> <!-document.write(Day(Now) & " " & MonthName(Month(Now), False) & " " & Year(Now)) --> </SCRIPT>
LE GUIDE COMPLET 413

Chapitre 10

Scripts

Hlas ! Comme le montrent les copies dcran des gures 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 gre bien mieux que JavaScript : ActiveX. Cela na rien dtonnant, car ces deux technologies sont signes Microsoft. Un site conu laide de VBScript peut exploiter nimporte quel dispositif dInternet Explorer : cest le seul navigateur reconnatre parfaitement la fois VBScript et ActiveX. Bien videmment, il est peine ncessaire de vous rappeler la ncessit de prvoir un site alternatif pour les non-utilisateurs de MSIE. Si VBScript prsente les mmes risques globaux de scurit que nimporte quel script, ce nest pas le cas dActiveX : Internet Explorer vous prviendra toutefois en principe des risques de certaines actions, ce qui vous permet de contrler linnocuit dun programme avant son excution.

414 LE GUIDE COMPLET

Travail avec les scripts

Chapitre 10

Traitement de formulaires laide de scripts

Vous avez vu, dans des exemples prcdents, comment valider des entres dun formulaire laide dun script avant den autoriser la soumission. Les scripts peuvent galement agir (et agissent gnralement) aprs la soumission. Lors de la conception de votre formulaire, vous devez spcier une action dans llment FORM. Cette action dtermine lendroit o sont envoyes les donnes et leur traitement. Il y a communment deux faons de traiter les donnes dun formulaire. Laction la plus facile utiliser est un formulaire denvoi de courrier lectronique :
<FORM action=mailto:mon_nomph@monFAI.fr" method="POST">

Les donnes sont envoyes mon adresse lectronique sous une forme relativement illisible en raison du type dencodage URL, qui a insr des caractres supplmentaires avant la transmission au serveur ou lenvoi par courrier lectronique. Vous avez alors besoin dun moyen de dcoder ces donnes. Il existe un grand nombre de programmes, dont de nombreux disponibles gratuitement (uudecode.com, Sperical UUDecode, etc.), qui permettent de dcoder aisment ces donnes. Essayez simplement une recherche Google avec comme mots-cls uudecode + freeware ! Lautre faon de traiter les donnes consiste employer un script CGI (Common Gateway Interface). Un script CGI est un script ct serveur. Les scripts CGI peuvent quasiment tout faire avec des donnes de formulaire : dcoder les rsultats et les envoyer une adresse lectronique, les ajouter une base de donnes ou un chier, chercher des informations, modier un prol dutilisateur, crer ou envoyer un chier, effacer un chier ou traiter les donnes comme bon vous semble. Plusieurs scripts CGI gratuits sont disponibles sur Internet. La facilit demploi de ces scripts peut cependant varier. Ils sont gnralement rdigs par des indpendants. Certains scripts ne sont gratuits que pour des institutions caritatives et ducatives, tous les autres devant payer. En gnral, un bon script CGI cote entre 100 et 300 Q. Les programmes excuts par CGI sont toujours crits en langages de programmation individuels. La plupart des scripts CGI sont crits en Perl, C ou C++, mme 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 frquents, car de nombreux programmeurs sont familiariss avec ce genre de langages. Malheureusement, les programmes C doivent tre compils dans quelque chose que lordinateur puisse comprendre. Perl est un langage trs rpandu pour les CGI, car il est petit, rapide et facile apprendre et utiliser. Contrairement C, les scripts Perl nont pas besoin dtre compils pour tre excuts. Enn, un grand nombre de bibliothques Perl ont t cres spciquement pour grer les applications CGI. Attention, les scripts CGI posent toutefois de nombreux problmes :
j

Comme ils sont installs ct serveur, ils en consomment les ressources. Cela peut ne plaire que trs moyennement votre hbergeur. Ils peuvent prsenter de srieux risques scuritaires, soit volontairement, soit plus frquemment parce quils sont mal crits : un autre motif qui les rend suspects aux yeux des hbergeurs !

Pour ces raisons, nombreux sont les hbergeurs qui soit refusent totalement linstallation de tout script CGI, soit, plus rarement, offrent eux-mmes une palette de scripts svrement contrls auxquels vous devez obligatoirement vous limiter.

Cookies
Un cookie est un petit fragment dinformation qui reste stock sur votre ordinateur aprs la clture de la connexion. HTTP est un protocole dit sans tat , ou sans mmoire : chaque requte individuelle envoye au serveur Web est indpendante des prcdentes. Autrement dit, le serveur ne dispose daucun moyen de savoir que vous venez de consulter la page Ma rgion alors que vous accdez la page Ma famille. Un chier de cookie est un chier en texte brut renfermant des cookies. Netscape rassemble les cookies dans votre dossier Profil utilisateur. Chaque utilisateur possde son propre chier de cookies, exactement comme il dispose de sa propre liste de signets. Avec Internet Explorer, les cookies sont stocks dans le dossier
C:\Windows\Cookie du disque dur. Chaque cookie constitue un chier

individuel : en raison de la taille minimale occupe par un chier, cela

416 LE GUIDE COMPLET

Travail avec les scripts

Chapitre 10

peut amener consommer un espace disque non ngligeable. Il en va dailleurs de mme pour la liste des favoris. Les utilisateurs ne font gnralement pas grand-chose avec leurs cookies, et ne sont dailleurs pas supposs y toucher. Mme si de nombreux utilitaires de gestion des cookies, dsormais souvent intgrs aux navigateurs, rendent ceux-ci accessibles lutilisateur moyen, le but rel des cookies est de fournir certaines informations au serveur Web, pour maintenir un tat homogne lors de la navigation sur le Web. Les cookies renferment parfois des informations sensibles, comme des noms dutilisateurs ou des mots de passe : le genre de choses quil nest gure souhaitable de voir rendues disponibles tout autre site que celui pour lequel elles sont prvues. Rassurez-vous, un cookie ne peut tre lu que par le serveur Web qui la gnr. Si vous possdez un serveur Web ladresse www.mondomaine.com et que vous crez un cookie utilisateur contenant le nom et le numro de tlphone de lutilisateur, seuls les scripts sexcutant sur www.mondomaine.com sont capables de lire ce cookie et den extraire le numro de tlphone. Un cookie peut servir stocker des informations saisies par lutilisateur dans un formulaire Web ou tout autre priphrique dentre en ligne. Il peut aussi mmoriser des comportements, comme les liens hypertextes suivis ou les images affiches. Cela permet au responsable du site de cibler sa publicit, dvaluer lefficacit des diffrents dispositifs de navigation et didentier les sujets qui retiennent lattention des visiteurs. Malgr leur potentiel et en dpit de certaines ides reues, les cookies restent limits. Ils ne peuvent excuter un programme situ sur votre disque dur, tlcharger ou installer un virus, imposer votre ordinateur denvoyer un message lectronique votre insu, lire un lment non volontairement fourni par lintermdiaire dun formulaire Web ou, dune faon plus gnrale, provoquer une quelconque modication de votre systme. Un cookie stocke une information lmentaire dans un endroit prcis de votre disque dur : le chier cookies.txt avec Netscape, le dossier C:\Windows\Cookies avec Internet Explorer. Cest tout. Linformation quil renferme ne peut venir que du serveur Web, laide de donnes transmises via un formulaire Web ou tout autre dispositif de saisie en ligne. En outre, un utilisateur peut choisir daccepter ou de refuser les cookies. Par exemple, pour ce faire, avec Firefox, choisissez Outils > Options.
LE GUIDE COMPLET 417

Chapitre 10

Scripts

Slectionnez Vie prive dans le volet de gauche, dveloppez la section Cookies et dcochez loption Autoriser les sites crer des cookies.

Figure 10.18 : Contrle des cookies avec Firefox

Vous pouvez paramtrer Firefox an quil vous demande si vous souhaitez accepter un cookie.

Figure 10.19 : Invite dacceptation de cookie de Firefox

Avec Internet Explorer, choisissez Outils > Options Internet. Cliquez sur longlet Confidentialit, puis cliquez sur Avances. Dans la fentre qui saffiche, slectionnez les options adquates.

Figure 10.20 : Contrle des cookies avec Internet Explorer

418 LE GUIDE COMPLET

Travail avec les scripts

Chapitre 10

Vous pouvez crer un cookie laide de code HTML pur, laide dun lment META et dun en-tte http ou laide de lattribut HTTP_EQUIV.
<META HTTP-EQUIV="Set-Cookie" CONTENT="cookievalue=xxx; expires=Saturday, 31-Dec-05 23:59:59 GMT; path=/">

Cela noffre toutefois quun intrt relatif, car tout y est cod en dur , tandis que le bon fonctionnement nest garanti quavec Netscape.
HTTPEQUIV

Nous voquons ici lattribut HTTPEQUIV dun lment META. Un lment META dot dun attribut HTTPEQUIV quivaut un en-tte HTTP. Il sert contrler laction des navigateurs et peut permettre de modier ou de prciser les informations fournies par les vrais en-ttes. Ces lments devraient avoir un effet identique quils soient sous cette forme ou quils soient spcis comme en-ttes HTTP. Certains serveurs les traduisent automatiquement en vrais en-ttes HTTP. Les en-ttes HTTP sont gnralement supplants par les instructions HTML correspondantes et sont parfois interprts de faons diffrentes par les serveurs. Nous avons donc prfr les laisser de ct. Reportez-vous pour plus dinformations la spcication HTTP (RFC 2616, www.ietf.org /rfc/rfc2616.txt).

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 ) { // Dfinition de la date/heure exprime en milliseconds var today = new Date(); today.setTime( today.getTime() ); /* Si la variable expiration dexpiration exacte. Elle */ if ( expiration ) { expiration = expiration * } var date_expiration = new + (expiration) );

est dfinie, calculer la date est exprime ici en jours

1000 * 60 * 60 * 24; Date( today.getTime()

document.cookie = 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 prt. Dans la plupart des cas, seuls les quatre premiers paramtres doivent tre xs (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 dnir ce cookie uniquement pour ce chemin et non pour la totalit du domaine. En gnral toutefois, vous donnerez la variable path la valeur /, la racine de votre site Web. mondomaine et secure nont gnralement pas besoin dtre spcis, sauf dans des buts trs prcis. Vous crez rellement le cookie en invoquant cette fonction :
Set_Cookie( moncookie, 9, 30, /, , );.

Cette ligne de code cre un cookie nomm moncookie, dont la valeur est 9 et la date dexpiration xe 30 jours de sa cration, valides pour la totalit du site. Veillez toujours faire gurer le nombre correct de paramtres, les paramtres non spcis tant placs entre apostrophes vides. Un nombre incorrect de paramtres entrane une erreur du code. Crer un cookie est parfait, mais pouvoir le lire serait encore mieux. Voici comment procder :
Listing 10-4 : fonction Get_Cookie
// cette fonction rcupre le cookie sil existe function Get_Cookie( nom ) { var debut = document.cookie.indexOf( nom + "=" ); var longueur = debut + nom.length + 1; if ( ( !debut ) && ( name != document.cookie.substring( 0, nom.length ) ) ) { return null; } if ( debut == -1 ) return null; var fin = document.cookie.indexOf( ";", len ); if ( fin == -1 ) fin = document.cookie.length; return unescape( document.cookie.substring( 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 faon personnalise 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 rellement, faites-le sans les numros de ligne !
Listing 10-5 : passage.js
01 // Passage.js 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 = location.pathname; 09 myDomain = pathname.substring(0, pathname.lastIndexOf(/)) +/; 10 // dfinir la date dexpiration un an . 11 var largeExpDate = new Date (); 12 largeExpDate.setTime(largeExpDate.getTime() + (365 * 24 * 3600 * 1000)); 13 } 14 set_Cookie(username,username,largeExpDate,myDomain); 15 } 16

La ligne 2 dnit une variable username, dont la valeur est spcie comme gale celle du champ username de la fonction get_Cookie. Celle-ci nest pas encore dnie, mais il est classique dans un programme JavaScript de placer les dnitions des fonctions la n du programme. Si le nom dutilisateur est vide (test de la ligne 3), la ligne 4 ouvre une bote de dialogue invitant lutilisateur saisir son nom ou son pseudo. Comme lutilisateur peut parfaitement refuser de saisir son nom en refermant la bote dinvite, les lignes 5 6 grent ce cas en attribuant la variable username la valeur vous, puis saute la ligne 13, qui marque la n de cette instruction conditionnelle.

LE GUIDE COMPLET 421

Chapitre 10

Scripts

Si lutilisateur a renseign son nom ou pseudo, les lignes 7 et 8 spcient respectivement les valeurs des variables pathname et monDomaine. Les lignes 9 11 calculent la date dexpiration en ajoutant 365 jours la date systme. La ligne 12 cre un cookie partir des diffrentes valeurs renseignes ou calcules. Enn, les lignes 13 et 14 referment les deux instructions conditionnelles. Un cookie qui contient le nom de lutilisateur est alors cr (ou recr). Voici maintenant les fonctions du programme. Vous reconnatrez : get_Cookie (lignes 25 40) et set_Cookie (lignes 42 55), un peu modies par rapport aux prcdentes ; une fonction utilitaire, get_cookieVal (lignes 17 23, qui extrait une portion du cookie en fonction dun paramtre de dcalage (offset) ; et enn la fonction message (lignes 57 60).
17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 function get_CookieVal (offset) { var endstr = document.cookie.indexOf (";", offset); if (endstr == -1) endstr = document.cookie.length; return unescape(document.cookie.substring(offset, endstr)); } function get_Cookie (name) { var arg = name + "="; var alen = arg.length; var clen = document.cookie.length; var i = 0; while (i < clen) { var j = i + alen; if (document.cookie.substring(i, j) == arg) return get_CookieVal (j); i = document.cookie.indexOf(" ", i) + 1; if (i == 0) break; } return null; } function set_Cookie (name, value) { var argv = set_Cookie.arguments; var argc = set_Cookie.arguments.length; var expires = (argc > 2) ? argv[2] : null; var path = (argc > 3) ? argv[3] : null; var domain = (argc > 4) ? argv[4] : null; var secure = (argc > 5) ? argv[5] : false; document.cookie = name + "=" + escape (value) + ((expires == null) ? "" : ("; expires=" +

422 LE GUIDE COMPLET

Travail avec les scripts

52 53 54 55 56 57 58 59 60 61

Chapitre 10

expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : ""); } function message(){ document.write ("Bonjour "+ username + " ! Cela fait " + visites + " fois que vous visitez notre site"); }

Nous nentrerons pas dans le dtail de ces fonctions, car cela risquerait de nous emmener trop loin. Pour terminer le script, saisissez ce qui suit :
62 63 64 65 66 67 68 69 70 71 var expdate = new Date(); var visites; // dfinir la date dexpiration un an . expdate.setTime(expdate.getTime() + (24 * 60 * 60 * 1000 * 365)); if(!(visites = get_Cookie("visites"))) visites = 0; visites++; set_Cookie("visites", visites, expdate, "/", null, false); username = username.toUpperCase(); message();

Vous dnissez la date dexpiration et incrmentez la variable compteur visites, puis crez le cookie nomm visites. La ligne 79 convertit par scurit la variable username en majuscules, an dviter toute erreur de casse, tandis que la dernire ligne invoque la fonction message. Enregistrez ce chier sous le nom passage.js.

1 Ouvrez maintenant dans le Bloc-Notes le chier accueil.html. 2 Enregistrez-le sous le nom accueil_3_10_3.html, puis modiez son numro de version :
<META name="version" content="3.10.4">

3 Pour invoquer votre programme JavaScript, placez ce qui suit juste aprs llment H2 :
<P><SCRIPT type="txt/JavaScript" src="passage.js"> message();</SCRIPT>

4 Enregistrez votre chier sous le nom accueil.html, puis ouvrez index.html dans votre navigateur.
Vous voyez dabord apparatre la bote de dialogue dinvite.
LE GUIDE COMPLET 423

Chapitre 10

Scripts

Figure 10.21 : Invite de saisie du nom dutilisateur

Saisissez (ou non) un nom, fermez la bote de dialogue : un message de bienvenue saffiche lcran. Si vous cliquez sur le bouton Rafrachir (ou Actualiser) de votre navigateur, le cookie username est lu, le compteur de visites est incrment et le message se modie : il en sera de mme chaque visite.

Figure 10.22 : Le compteur de visites est incrment chaque passage sur la page

partir de ce script, il serait facile de modier le message en fonction du nombre de visites ou daprs des noms dutilisateurs spciques. Attention toutefois ne pas placer ainsi des donnes condentielles, car il est facile daccder au chier passage.js et dexaminer son contenu. Vous venez de dcouvrir la puissance des cookies, limite toutefois par la possibilit quont les utilisateurs de les refuser. Examinons maintenant un autre outil frquemment employ, les applets.

10.5. Applets
Le lancement de Java par Sun Microsystems en 1995 a fait leffet dune bombe. Tout le monde voulait soudainement du Java sur son site. Celui-ci servait rsoudre des problmes alors que cela ntait pas du tout son but initial.

424 LE GUIDE COMPLET

Applets

Chapitre 10

La popularit de Java tenait ce quil pouvait accomplir deux choses dont tait jusque-l incapable le Web. Vous pouviez tout dabord concevoir des applications compatibles quelle que soit la plate-forme considre, excutables sur le Web en temps rel. Il constituait ensuite un moyen dynamique de contrle et de manipulation de donnes Web, toujours en temps rel. LHTML dynamique a trs temporairement perturb Java. Il permet lui aussi la manipulation en temps rel de contenus Web, tout en tant charg plus rapidement. DHTML nest toutefois encore que peu compatible entre les navigateurs, sans mme voquer des architectures diffrentes. Les applets Java tant partiellement compiles, vous ne pouvez en examiner le code comme avec HTML, JavaScript ou VBScript. Cela est capital pour les dveloppeurs Java dsireux de protger leur code. Le tableau suivant rappelle les principales diffrences entre JavaScript et Java.
Tableau 10.5 : Diffrences entre JavaScript et Java

JavaScript Langage interprt

Java Langage pseudo compil (chargement dune machine virtuelle) Code (applet) part du document HTML, appel partir de la page. Langage fortement typ (dclaration du type de variable) Liaisons statiques : les objets doivent exister au chargement (compilation) Condentialit du code Sr : ne peut pas crire sur le disque dur

Code intgr au HTML (ventuellement via un chier externe) Langage peu typ Liaisons dynamiques : les rfrences des objets sont vries au chargement Accessibilit du code Sr : ne peut pas crire sur le disque dur

Remarquez que si une applet Java (le programme) est pralablement compile, une machine virtuelle permettant dinterprter le pseudo code doit tre charge en mmoire (du ct du client) chaque chargement de la page, do 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 modication de chiers sur votre disque dur. Sun a rapidement remdi au problme, mais comme les applets Java peuvent dsormais demander et obtenir des droits daccs supplmentaires, des applets provenant de sources indlicates sont susceptibles de contenir des virus et des programmes douteux : soyez prudents avec les applets Java. Mieux vaut gnralement les dsactiver dans votre navigateur. Cette attitude tant conseille, elle diminue lintrt des applets Java dans vos pages HTML. HTML permet dintgrer une applet dans votre page Web. Il ne sagit toutefois pas obligatoirement dune applet Java : ce peut tre une applet Python, Perl, etc. Linclusion dune applet seffectuait autrefois laide de llment APPLET, dsormais dconseill au prot de llment OBJECT. Voici un exemple de code HTML dinsertion dune applet laide de llment APPLET :
<APPLET code="nomclasse.class" width="100" height="100"></APPLET>.

La valeur de lattribut code est le nom de la classe Java qui sert de chier principal de lapplet elle-mme. Dans llment APPLET, vous pouvez placer un ou plusieurs paramtres dans des lments PARAM. Ceux-ci indiquent lapplet les variables et contrles quelle doit utiliser. La plupart des bonnes applets que vous pouvez tlcharger et utiliser gratuitement possdent des commentaires relatifs aux variables et paramtres que vous pouvez et devriez utiliser.

lment OBJECT
Dsormais, vous devez prfrer llment OBJECT :
<OBJECT codetype="application/java" classid="nomclasse.class"></OBJECT>

Le tableau suivant prsente les principaux attributs de llment OBJECT.

Tableau 10.6 : Attributs classiques de llment OBJECT

Attribut
classid

Valeur
uri

Description
Sert spcier la localisation de limplmentation dun objet via un URI. Peut tre employ simultanment ou en alternative avec lattribut data, selon le type de lobjet impliqu.

426 LE GUIDE COMPLET

Applets

Chapitre 10

Tableau 10.6 : Attributs classiques de llment OBJECT

Attribut
codebase

Valeur
uri

Description
Spcie le chemin de base utilis pour rsoudre les URI relatifs spcis par les attributs classid, data et archive. Sa valeur par dfaut est lURI de base du document courant. Spcie le type de contenu des donnes attendues lors du chargement de lobjet spci par lattribut classid. Facultatif, il est toutefois recommand lorsque lattribut classid est spci : il permet lagent utilisateur dviter le chargement dinformations de type non reconnu. Sa valeur par dfaut est celle de lattribut type. Peut tre utilis pour spcier la localisation des donnes de lobjet (par exemple les donnes dimages) ou, plus gnralement, la forme srialise dun objet qui peut tre utilise pour recrer cet objet. Quand il est donn comme URI relatif, celui-ci devrait tre interprt relativement lattribut codebase. Spcie le type de contenu des donnes spcies par lattribut data. Facultatif, mais recommand quand lattribut data est spci : il permet lagent utilisateur dviter le chargement des informations type de contenu non reconnu. Si la valeur de cet attribut diffre de len-tte HTTP ContentType renvoy par le serveur quand lobjet est ramen, cest len-tte HTTP ContentType qui a prsance. Sert spcier la liste des URI, spars par des espaces, des archives contenant les ressources qui concernent lobjet. Cette liste peut inclure les ressources spcies par les attributs classid et data. Le prchargement des archives diminue gnralement le temps de chargement des objets. Les archives spcies comme URI relatifs devraient tre interprtes relativement lattribut codebase. Quand il est prsent, cet attribut boolen fait de la dnition de llment OBJECT courant seulement une dclaration. Lobjet doit tre instanci par la suite au travers dune dnition OBJECT qui se rfre cette dclaration.

codetype

typedecontenu

data

uri

type

typedecontenu

archive

listeuri

declare

standby

texte

Spcie le message que lagent utilisateur peut restituer pendant le chargement de limplmentation et des donnes de lobjet.

LE GUIDE COMPLET 427

Chapitre 10

Scripts

Voici un exemple dinsertion dapplet dhorloge analogique dans un document via llment OBJECT. Lapplet, crit dans le langage Python, ne requiert aucune donnes supplmentaires ni valeurs dexcution. Lattribut classid spcie la localisation de lapplet :
<P><OBJECT classid="http://www.miamachina.it/orologioanalogico.py"> </OBJECT>

Remarquez que lhorloge sera restitue ds linterprtation de la dclaration de llment OBJECT par lagent utilisateur. Il est possible de diffrer la restitution dun objet en effectuant une dclaration pralable de cet objet. Mieux vaut toujours ajouter un tel lment un texte de remplacement, au cas o lagent utilisateur ne puisse pas restituer lhorloge.
<P><OBJECT classid="http://www.miamachina.it/orologioanalogico.py"> Une horloge anim&eacute;e. </OBJECT>

Une des grandes forces de llment OBJET est, comme nous lavons vu dans le Chapitre 6 traitant des images, la possibilit de spcier des restitutions alternatives de lobjet : chacune des dclarations des lments OBJECT imbriqus peut spcier un type de contenu alternatif. Si lagent utilisateur ne peut pas restituer llment OBJECT le plus externe, il essaye den restituer le contenu, qui peut tre un autre lment OBJECT, etc. Souvenez-vous de lexemple alors prsent :
<TD rowspan="3"> <!-- Essayer dabord un applet en Python --> <OBJECT title="Coucher de soleil sur le lac de Linciel" classid="Linciel.py"> <!-- Sinon, essayer lanimation MNG --> <OBJECT data="Linciel.mng" type="application/mng"> <!-- Sinon, essayer limage JPEG --> <OBJECT data="Images/coucher de soleil.jpg" 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>

Lagent utilisateur essaye dabord de restituer le premier lment OBJECT possible, dans lordre 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 dclaration la plus externe spcie une applet qui ne requiert ni donnes ni valeur initiales. La deuxime dclaration spcie une animation MNG. Comme elle ne dnit pas la localisation dune implmentation pour traiter lanimation MNG, elle compte sur lagent utilisateur pour la prendre en charge. La troisime dclaration spcie la localisation dun chier JPG et fournit un texte de remplacement au cas o tous les autres mcanismes auraient chou. Les donnes restituer peuvent tre fournies de deux faons : en interne ou partir dune ressource externe. La premire mthode est gnralement plus rapide, mais ne convient pas pour une grande quantit de donnes. Voici un exemple demploi de donnes internes dans llment 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>

lment PARAM
Pour initialiser un lment, vous avez recours un ou plusieurs lments PARAM. Cet lment ne possde quune balise douverture. Les lments PARAM spcient lensemble des valeurs ncessaires lexcution dun objet. Un lment OBJECT (ou APPLET) peut possder un nombre quelconque dlments PARAM dans nimporte quel ordre. Ils doivent toutefois tre situs au dbut du contenu de llment OBJECT (ou APPLET). La syntaxe des noms et de leurs valeurs est cense tre comprise par limplmentation de lobjet. La spcication ne dnit pas les faons selon lesquelles les agents utilisateurs devraient ramener les couples nom/valeur ni interprter les noms en doublon.

LE GUIDE COMPLET 429

Chapitre 10

Scripts

Lattribut name dnit le nom dun paramtre dexcution cens tre connu des objets insrs. La sensibilit la casse de la proprit dpend de limplmentation spcique de lobjet. Lattribut value spcie la valeur dun paramtre dexcution spci par lattribut name. Les valeurs de proprit nont aucune signication pour HTML : leur signication est dtermine par lobjet en question. Lattribut valuetype spcie le type de lattribut value. Les valeurs possibles sont :
j

data : cest la valeur par dfaut. Signie que la valeur spcie par value sera value puis transmise limplmentation de lobjet sous forme dune chane. ref : la valeur spcie par lattribut value est un URI qui dsigne une ressource dans laquelle les valeurs dexcution sont stockes. LURI doit tre transmise lobjet tel quel (non rsolu). object : la valeur spcie par lattribut value est un identiant qui se rfre la dclaration dun lment OBJECT situ dans le mme document. Lidentiant doit tre la valeur de lattribut id de llment OBJECT dclar.

Lattribut type spcie le type de contenu de la ressource dsigne par lattribut value uniquement lorsque lattribut valuetype possde comme valeur ref. Cet attribut indique donc lagent utilisateur le type des valeurs situes lURI dsign par lattribut value.
OBJECT et EMBED

Microsoft Internet Explorer reconnat llment OBJECT partir de sa version 3.0, Netscape partir de sa version 4. Ce dernier prenait galement en charge llment EMBED qui lui tait propre. Vous devriez dsormais nemployer que OBJECT. Voici un exemple demploi de ces deux lments, qui tient compte du navigateur :
Listing 10-6 : lments OBJECT et EMBED
... <OBJECT classid="clsid:numericID" codebase="../" width="largeur" height="hauteur" id="nom"> <PARAM name="src" value="nomfichier.dcr"> <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="nomfichier.dcr" bgcolor="couleurfond" pluginspage="http://www.macromedia.com/shockwave/download/" start="true" alt="Shockwave"> <NOEMBED> Si vous ne disposez pas de Shockwave, vous pouvez le t&eacute;l&eacute;charger <A HREF=http://www.macromedia.com/shockwave/download/> ici </A> pour voir cette animation. </NOEMBED> </OBJECT> ...

Un utilisateur qui possde un navigateur ne reconnaissant ni OBJECT ni EMBED voit le contenu de llment NOEMBED. Remarquez que les lments OBJECT et NOEMBED doivent possder une balise de fermeture, contrairement EMBED. Dsormais, vous devriez toutefois nemployer que OBJECT.

Dclaration et instanciation des objets

Nous avons signal plus haut quil tait possible de sparer la dclaration dun objet de ses instanciations. Cela prsente plusieurs avantages :
j

j j

Les donnes peuvent tre ramenes du rseau par lagent utilisateur une seule fois (lors de la dclaration) et rutilises pour chaque instanciation. Il est possible dinstancier un objet partir dun autre endroit que celui de la dclaration de lobjet, par exemple partir dun lien. Il est possible de spcier des objets comme tant des donnes dexcution dautres objets.

Pour dclarer un objet de sorte quil ne soit pas excut au moment o lagent utilisateur le lit, il faut placer lattribut boolen declare dans llment OBJECT et identier cette dclaration en affectant une valeur unique son attribut id. Les instanciations ultrieures de lobjet se rfreront cet identiant. Un lment OBJECT dclar doit apparatre dans le document avant la premire instance de cet lment OBJECT. Un objet dni avec lattribut declare est instanci chaque fois quun lment qui se rapporte cet objet requiert une restitution de celui-ci

LE GUIDE COMPLET 431

Chapitre 10

Scripts

(par exemple, un lien qui se rfre lobjet est activ, un autre objet qui sy rfre est activ, etc.). Les agents utilisateurs qui ne reconnaissent pas lattribut declare doivent restituer le contenu de la dclaration de llment OBJECT. Llment OBJECT est aussi prcieux que complexe. Pour en savoir plus, reportez-vous la spcication HTML 4.01.

10.6. Rsum
j j

j j j

Un script est un programme crit dans un langage de programmation particulier. Il existe deux types de script : les scripts ct serveur et les scripts ct client. Les scripts ct serveur sont situs et sexcutent comme leur nom lindique sur le serveur et peuvent envoyer un rsultat vers la machine cliente. Les scripts ct client sont des programmes qui peuvent accompagner le document HTML ou bien y tre directement incorpors. Ils sexcutent sur la machine cliente (prservant ainsi les ressources du serveur). Un script action unique est excut une seule fois, lors du chargement du document par lagent utilisateur. Il apparat dans le document lintrieur dun lment SCRIPT. Un script rptitif est excut chaque fois que se produit un vnement particulier. Vous insrez un script dans un document laide de llment SCRIPT. HTML ne dpend pas dun langage de script particulier. Les auteurs des documents indiquent explicitement aux agents utilisateurs le langage de chaque script. Vous pouvez le faire laide dune dclaration META place dans llment HEAD ou en dnissant lattribut type de llment SCRIPT. Llment NOSCRIPT permet de fournir un contenu de remplacement lorsque, pour une raison quelconque, un script nest pas excut. Il est possible dassocier une action un certain nombre dvnements intrinsques qui se produisent lorsque lutilisateur interagit avec lagent utilisateur. Chacun des vnements prend comme valeur un script.

432 LE GUIDE COMPLET

Rsum
j

Chapitre 10

j j

JavaScript est historiquement le premier langage de script pour le Web qui a permis aux dveloppeurs Web dexcuter de petits programmes sur le navigateur Web plutt que sur le serveur Web. JScript est un langage de script trs similaire dvelopp par Microsoft. Le bon fonctionnement de JavaScript dpendait largement du navigateur employ. Un standard a t dni pour normaliser les langages de script de type JavaScript, ECMA-262 aussi appel ECMAScript. Cest devenu un standard international (ECMA-262 et ISO-10262), ce qui en fait une des rares technologies Internet non protocole avoir obtenu une normalisation dun organisme officiel. VBScript est un langage de script propre Microsoft, driv de leur langage de programmation Visual Basic. Un script CGI (Common Gateway Interface) est un script ct serveur. Ces scripts, souvent employs pour le traitement distant des formulaires, posent toutefois de nombreux problmes. Un cookie est un petit fragment dinformation qui reste stock sur votre ordinateur aprs la clture de la connexion. Les utilisateurs peuvent choisir daccepter ou de refuser les cookies. HTML permet dintgrer une applet dans votre page Web. Il ne sagit toutefois pas obligatoirement dune des clbres applets Java : ce peut tre une applet Python, Perl, etc. Linclusion dune applet seffectuait autrefois laide de llment APPLET, dsormais dconseill au prot de llment 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 frquentation de votre site .......................................................................... 478 Rsum ................................................................................................................................ 483

Chapitre 11

Publication sur le Web

Au l des chapitres prcdents, vous avez dcouvert les principaux composants du langage HTML et avez construit un site Web minimaliste. Vous disposez toutefois dsormais des connaissances ncessaires pour lamliorer plus avant, grce aux diffrentes techniques abordes. Pour le moment, satisfait de votre premire ralisation, vous souhaitez la placer sur le Web, pour quelle puisse y tre consult par tous. Par tous ? Vraiment ? Probablement pas. Tout site sadresse un public potentiel plus ou moins cibl. Pour un site dentreprise, 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 dentre eux qui emploient Internet. Ds le dbut de la phase de conception de votre site, vous devez garder lesprit les caractristiques de la cible vise et pour ce faire identier votre public. Ce public identi, vous devrez probablement adapter votre site en fonction de ses demandes ou habitudes particulires. Vous devrez ensuite amliorer laccessibilit de votre site, pour tenir compte des personnes souffrant de divers handicaps, et ventuellement le rendre disponible en plusieurs langages. Enn, vous le placerez sur le Net laide dun des multiples outils disponibles et le testerez laide du plus grand nombre possible de navigateurs. Ce chapitre sintresse lensemble de ces dmarches. lments et attributs abords 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. Identication du public

Lidentication des visiteurs probables dun site Web est capitale. Nombreux sont les auteurs Web commencer sans ide aucune de leur public potentiel. Ils se contentent dassembler quelques ides, des lments qui leur ont plu, gnralement simplement pour apprendre coder en HTML. Sans le savoir, leurs pages possdent cependant un public : ceux qui partagent leurs thmes dintrt (ceux qui gurent sur

436 LE GUIDE COMPLET

Identification du public

Chapitre 11

les pages Web), ainsi que ceux qui possdent une conguration matrielle et logicielle identique celle du concepteur. La composante fondamentale dun site Web est linformation que vous tenez partager. Le plus important est sans doute de savoir avec qui vous allez la partager. Ne surestimez pas le pouvoir dun message cibl. Internet est dsormais trop vaste et trop diversi pour garantir que vous serez capable datteindre tout le monde. De toute vidence, le public le plus facile cibler est celui dun intranet dentreprise. Le ou les navigateurs employs sont connus, ce qui simplie grandement le codage. En revanche, de tels sites ne brillent gnralement pas par linnovation : ils sont essentiellement informatifs et destins aider les salaris accomplir leur travail. Si votre site sadresse des enfants, privilgiez les graphismes et les icnes signicatives au texte. Les enfants prfrent des images claires et colores et sont souvent capables de comprendre le but dune icne sans avoir lire le texte.

Figure 11.1 : Un site destin aux enfants insiste sur les icnes et les images

En revanche, si le site concerne plutt des personnes ges (une population en forte croissance sur Internet), veillez ce quil puisse sadapter aux dcits visuels, ainsi quaux 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 adaptes aux personnes souffrant de dcits visuels

Par contraste, si votre cible est constitue de hard gamers, ces fous de jeux vido, vous pouvez prsumer sans grand risque derreur quils disposent dun cran de grande taille, dune carte graphique performante, des derniers codecs, et probablement dune liaison Internet haut dbit : dans un tel cas, pas question dhsiter abuser des images et vidos ! Mais si vous suspectez que mme un seul pileptique sensible la lumire est susceptible de visiter votre site, oubliez les animations spectaculaires et les clignotements rptitifs. Vous devez en effet dsormais tenir compte des personnes souffrant de handicaps et proposer des alternatives pour votre site. Aujourdhui, de nombreux utilisateurs surfent sur le Web sans souris. Ils transmettent les ordres lagent utilisateur laide du clavier ou de commandes vocales. La prise en compte de ces utilisateurs porte le nom d accessibilit du site .

11.2. Accessibilit
Lordinateur est un outil prcieux, parfois indispensable de nombreux utilisateurs qui souffrent de handicaps. Il procure laccs la communication et lenseignement indpendamment des capacits physiques. Internet a permis en outre la ralisation de vritables postes de travail virtuels. Quil sagisse de recherche ou de courrier lectronique, lordinateur aide les personnes handicapes agir de faon interactive avec leur collgues, leurs amis et leur famille un degr inimaginable dans le pass. Il est de notorit publique que la population des seniors crot rgulirement. Ceux-ci sintressent en outre de plus en plus linformatique, essentiellement grce Internet. Cette nouvelle vague

438 LE GUIDE COMPLET

Accessibilit

Chapitre 11

dutilisateurs dcouvre toutefois que lcran nest pas toujours facile lire et que la souris constitue un outil malcommode pour quelquun souffrant darthrite ou dune quelconque affection du poignet. En tant que concepteur dun site Web, vous ne devez ignorer aucune des parties de votre public potentiel. Ayant dtermin qui va accder votre site, concevez-le de faon faciliter son accs. Tenez compte de lagent utilisateur probable, de la conguration matrielle envisageable, etc. Votre site doit-il tre visit par des personnes ges, des familles, le grand public ? Partez alors du principe quils possdent un cran de 17 pouces dot dune rsolution minimale de 800 x 600. Votre site est consacr la programmation avance ? Vriez quil gre bien le texte : de nombreux utilisateurs UNIX ne possdent que des navigateurs en mode Texte seul. Votre site concerne les jeux vido ou sadresse des professionnels de limprimerie et du graphisme ? Vous pouvez sans crainte supposer quils disposent dun priphrique daffichage de haut de gamme, probablement mme suprieur au vtre. Voici les principaux piges daccessibilit rencontrs lors de la conception dun site Web :
j

Les cadres rendent la navigation difficile sans souris. De surcrot, ils posent problme sur de petits crans faible rsolution et ne sont pas reconnus par les navigateurs textuels. Les tableaux sont assez mal reconnus par les navigateurs textuels, mais permettent dafficher efficacement des donnes brutes. Si vous dnissez la taille et la largeur, les utilisateurs possdant un affichage limit seront obligs de faire dler la page pour lire lintgralit du tableau. Un tableau peut souvent tre remplac par un autre lment structurel, comme un en-tte ou un pied de page, prsent sur toutes les pages du site. Utilisez toujours le nouvel attribut summary pour procurer une alternative texte au tableau. Les images posent rarement de problmes, mme si de nombreux agents utilisateurs ne les affichent pas, par construction ou suite un choix de lutilisateur. Empcher le chargement des graphismes permet de diminuer le temps de chargement dune page Web ou facilite le travail dun navigateur texte-parole. Lattribut alt plac dans llment IMG permet aux utilisateurs ayant dsactiv les images den obtenir une description. Mme si les graphismes anims permettent de capter lattention, ils deviennent irritants lorsquils 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 dutilisateurs sensibles la lumire. Enn, les utilisateurs peuvent bloquer les animations aprs leur chargement dans la plupart des navigateurs. Les formulaires ont subi de lourdes modications en vue damliorer laccessibilit. Le dplacement entre les champs dun formulaire saccomplit traditionnellement laide de la touche [] du clavier, parcourant ainsi les champs dans lordre o ils ont t rdigs en code HTML. Cela peut poser quelques problmes, particulirement sil existe des liens hypertextes supplmentaires (comme des publicits) au milieu de la page. Utilisez les lments FIELDSET et LEGEND ainsi que lattribut tabindex (dcrits dans le Chapitre 8) an daider les utilisateurs naviguer dans le formulaire sans la souris.
Cas de lattribut alt

Vous devez toujours doter une image dquivalent texte, mais la valeur de lattribut alt doit satisfaire certains critres, faute de quoi il peut tre considr comme suspect. Respectez les rgles suivantes : Le texte ne doit pas dpasser 150 caractres (10 12 mots). Ncrivez pas :
<IMG src="images/couchersoleil.jpg" alt="Coucher de soleil sur le lac de Linciel. Remarquez le jeu du vent sur les vagues et, larri&egrave;re-plan, la vue sur la montagne du Destin">.

Le texte ne doit pas dcrire une image qui sert de lien, mais la destination du lien.
<A href="images/couchersoleil.jpg"> <IMG src="images/scouchersoleil.jpg" alt="Coucher de soleil sur le lac de Linciel"> Coucher de soleil</A>

Utilisez plutt :
<A href="images/couchersoleil.jpg"> <IMG src="images/scouchersoleil.jpg" alt="Lien vers limage du coucher de soleil sur le lac de Linciel">Coucher de soleil</A>

Il ne doit pas contenir dinformations sur la taille du chier, ni un nom de chier ou une extension de chier image. Ncrivez jamais :
<IMG src="images/couchersoleil.jpg" 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/couchersoleil.jpg" alt="Ins&eacute;rer limage ici">

Enn, les images despacement, les puces et les barres horizontales doivent galement possder un attribut alt dni.

Accessibilit des tableaux

Les tableaux sont une des structures HTML qui posent le plus de problmes aux agents utilisateurs non visuels. Pourtant, HTML dispose dsormais des outils ncessaires en permettre une restitution parfaite. Il suffit de les mettre en uvre. Une cellule de tableau peut contenir deux types dinformations : des informations de rubrique (ou libell) et des informations de donnes. Cette distinction permet aux agents utilisateurs de restituer les cellules de rubrique et de donnes diffremment, mme en labsence de feuilles de style. Par exemple, les agents utilisateurs visuels peuvent prsenter le texte des cellules de rubrique en caractres gras. Les synthtiseurs de parole peuvent restituer les informations de rubrique avec une inexion de voix particulire. Llment TH dnit une cellule qui contient une indication de rubrique. Les agents utilisateurs disposent de deux types dinformations de rubrique : le contenu de llment TH et la valeur de lattribut facultatif abbr. Les agents utilisateurs doivent restituer soit le contenu de la cellule, soit la valeur de lattribut abbr. Pour les mdias visuels, cette dernire possibilit peut tre adquate quand il ny a pas suffisamment de place pour restituer le contenu entier de la cellule. Pour les mdias non visuels, lattribut abbr peut semployer comme abrviation des rubriques du tableau, quand celles-ci sont restitues en accompagnement du contenu des cellules concernes. Les attributs headers et scope permettent galement aux auteurs dassister les agents utilisateurs non visuels dans leur traitement des informations de rubrique. Llment TD dnit une cellule qui contient des donnes. Une cellule peut tre vide (ne pas contenir de donnes).

LE GUIDE COMPLET 441

Chapitre 11

Publication sur le Web

Les agents utilisateurs non visuels peuvent faire appel certains attributs des lments TD et TH pour restituer les cellules du tableau plus intuitivement :
j

Pour une cellule de donnes particulire, lattribut headers rpertorie les cellules qui fournissent des indications de rubrique pertinentes. Chaque cellule de rubrique doit tre nomme laide de lattribut id. Il nest toutefois pas toujours possible de distinguer clairement cellules de rubrique et cellules de donnes. Servez-vous pour de telles cellules de llment TD accompagn dun attribut id ou scope, selon que lun ou lautre est le plus adapt. Pour une cellule de rubrique donne, lattribut scope indique lagent utilisateur les cellules concernes par ces indications de rubrique. Les auteurs peuvent choisir demployer cet attribut plutt que lattribut headers, sils considrent quil convient mieux. Ces deux attributs remplissent la mme fonction. Lattribut headers est en gnral ncessaire quand les rubriques se trouvent une position inhabituelle par rapport aux donnes qui les concernent. Lattribut abbr spcie un nom de rubrique abrg pour les cellules de rubrique, pour que les agents utilisateurs puissent restituer plus rapidement les indications de rubrique.

Dans lexemple suivant, nous assignons des indications de rubrique aux cellules en dnissant lattribut headers. Chaque cellule de la mme colonne se rapporte la mme cellule de rubrique (via lattribut id).
Listing 11-1 : Extrait du fichier headers.html
... <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
<TD headers="t2">5</TD> <TD headers="t3">0</TD> </TABLE> ...

Chapitre 11

Figure 11.3 : Tableau employant lattribut headers

Un synthtiseur de parole pourrait restituer cette table comme suit :

Lgende : Livres emprunts par chaque membre de la famille Rsum : Ce tableau reprsente le nombre de livres emprunts 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 manire dont la rubrique Non rendus ? sabrge en Sortis, grce lattribut abbr. Vous pourriez crire le mme exemple en substituant lattribut scope lattribut headers.
Listing 11-2 : Extrait du fichier scope.html
... <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
<TD>5</TD> <TD>0</TD> </TABLE> ...

Publication sur le Web

Remarquez la valeur col de lattribut scope, qui signie toutes les cellules de la colonne active . Affich dans un navigateur visuel, laspect est identique. Il en est de mme avec un agent utilisateur non visuel.

Figure 11.4 : Tableau employant lattribut scope

Les autres valeurs de lattribut scope permettent de construire des tableaux plus complexes :
Listing 11-3 : Extrait du fichier scope2.html
... <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 rseaux sans fil</TD> <TD>CampusPress</TD> <TD> Le d&eacute;veloppement des r&eacute;seaux sans fil sacc&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 quaux 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++. Lutilisateur dispose ici de toutes les informations pour comprendre les fondements du langage, rsoudre 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 lattribut scope, avec des cellules fusionnes.

LE GUIDE COMPLET 445

Chapitre 11

Publication sur le Web

Remarquez lemploi de la valeur row pour lattribut scope. Mme si la premire cellule de chaque ligne contient des donnes et non des indications de rubrique, lattribut scope fait que la cellule de donnes se comporte comme une cellule de rubrique de ligne. Ceci permet aux synthtiseurs de parole de fournir la demande le nom du livre concern ou de le dclarer immdiatement avant le contenu de chaque cellule. Il est parfois utile de catgoriser les cellules. Les utilisateurs qui parcourent une table avec un agent utilisateur bas sur la parole peuvent souhaiter entendre une explication sur le contenu dune cellule, en plus du contenu en question. Pour ce faire, lagent utilisateur pourrait lire les indications de rubrique associes avant le contenu de la cellule de donnes. Les utilisateurs peuvent galement vouloir des informations sur plusieurs cellules, auquel cas les indications de rubrique donnes au niveau de la cellule (attributs headers, scope et abbr) peuvent ne pas fournir le contexte adquat. Examinez le tableau suivant, qui montre la rpartition des dpenses au cours dun voyage de plusieurs jours, destination de deux villes, Toulouse et Montpellier.

Figure 11.6 : Dpenses de voyage

Le code de ce tableau est le suivant :

Listing 11-4 : Extrait du fichier vacances.html
... <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> ...

Lutilisateur pourrait souhaiter extraire des informations du tableau sous la forme de requtes comme :
j j j

Quel a t le montant des frais de dplacement (essence, page, etc.) ? Quai-je dpens en alimentation le 18 juillet ? Quel est le montant total des dpenses Montpellier ?

Chaque requte implique un calcul par lagent utilisateur, qui peut faire intervenir zro ou plusieurs cellules. Pour dterminer, par exemple, les dpenses dalimentation du 18 juillet, lagent utilisateur doit reconnatre les cellules se rapportant Alimentation et Dates (particulirement le 18 juillet), puis dterminer lintersection de ces deux ensembles. Pour satisfaire ce genre de requte, le modle de table HTML 4 permet aux auteurs de classer les rubriques et les donnes des cellules par catgorie. Par exemple, pour le tableau des frais de dplacement, lauteur pourrait regrouper les cellules de rubrique Montpellier et

448 LE GUIDE COMPLET

Accessibilit

Chapitre 11

Transports dans la catgorie dpenses et les quatre jours dans la catgorie date. Les trois questions prcdentes se traduiraient alors

comme suit :
j

Quel a t le montant des frais de dplacement ? devient Quelles sont toutes les cellules de donnes qui appartiennent la catgorie dpenses=Dplacement ? Quai-je dpens en alimentation le 18 juillet ? devient Quelles sont toutes les cellules dans les catgories dpenses=Alimentation et date=18-07-2005 ? Quel est le montant total des dpenses Montpellier ? devient Quelles sont toutes les cellules dans les catgories dpenses=Alimentation, Dplacement, Divers et ville=Montpellier ?

Lauteur catgorise une cellule de rubrique ou de donnes en spciant lattribut axis de la cellule. Par exemple, dans le tableau des frais de dplacement, la cellule qui contient linformation Montpellier serait place comme suit dans la catgorie ville :
<TH id="a6" axis="ville">Montpellier</TH>

Toute cellule qui contient des informations relatives Montpellier devrait se rapporter cette cellule de rubrique grce lattribut headers ou lattribut scope. Ainsi, les frais dalimentation du 18-07-2005 devraient tre baliss pour se rapporter lattribut 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 rfrences id. Vous pouvez donc catgoriser une cellule donne par divers moyens (ou selon un nombre quelconque de rubriques). Voici le balisage du tableau des dpenses avec des indications de catgorie. Les modications apportes au chier prcdent gurent en gras :
Listing 11-5 : Extrait du fichier vacances2.html.
... </CAPTION> <TR> <TH></TH> <TH id="a2" axis="dpenses">Alimentation</TH> <TH id="a3" axis="dpenses">D&eacute;placement</TH> <TH id="a4" axis="dpenses">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

Laspect du tableau dans un navigateur visuel est strictement identique.

Figure 11.7 : Tableau des dpenses de voyage avec catgorisation des cellules

Pourtant, ce balisage permet aux agents utilisateurs dviter de troubler lutilisateur avec des informations parasites. Par exemple, si un synthtiseur de parole devait dire tous les nombres gurant dans la colonne Alimentation de cette table, en rponse la question Quelle est la totalit de mes frais de repas ? , lutilisateur serait incapable de distinguer entre les dpenses du jour et les sous-totaux ou les totaux. En catgorisant soigneusement les cellules de donnes, les auteurs permettent aux agents utilisateurs de faire des distinctions smantiques importantes lors de la restitution. Il nexiste pas de limite quant la manire dont les auteurs peuvent catgoriser les informations contenues dans une table. Dans cette table des frais de dplacement, par exemple, on pourrait rajouter les catgories sous-totaux et totaux. Les agents utilisateurs, notamment les synthtiseurs de parole, peuvent combiner les informations communes plusieurs cellules rsultant dune requte. Par exemple, si lutilisateur demande Quai-je dpens en alimentation Montpellier ? , lagent utilisateur dterminerait dabord 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. Alimentation : 56,25 Ville : Montpellier. Alimentation : 35,00 Date : 190705. Dpenses,

Date :

200705.

Dpenses,

ou, de manire plus concise :

Montpellier, 190705, Alimentation : 56,25 Montpellier, 200705, Alimentation : 35,00

Une restitution encore plus conome combinerait les informations communes et les rorganiserait :
Montpellier, Alimentation, 190705 : 56,25 200705 : 35,00

Lattribut axis

La spcication HTML 4.01 noblige pas les agents utilisateurs grer les informations fournies par lattribut axis. Elle nmet pas non plus de recommandation sur la manire dont les agents utilisateurs peuvent prsenter les informations de lattribut axis aux utilisateurs, ni sur la faon dont les utilisateurs peuvent effectuer des requtes vers lagent utilisateur.

En labsence dindications de rubrique fournies par lattribut scope ou lattribut headers, les agents utilisateurs peuvent nanmoins construire des informations de rubrique en fonction de lalgorithme suivant, dont lobjectif consiste rechercher une liste ordonne de rubriques.
j

partir de la position de la cellule, rechercher dabord 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 sachve quand le bord du tableau est atteint ou bien quand on trouve une cellule de donnes qui fait suite une cellule de rubrique.

452 LE GUIDE COMPLET

Accessibilit
j

Chapitre 11

Les rubriques de ligne sont insres dans la liste, dans lordre o elles apparaissent dans la table. Pour les tableaux de gauche droite, les rubriques sinsrent de gauche droite. Les rubriques de colonne sont insres aprs les rubriques de ligne, dans lordre o elles apparaissent dans le tableau, de haut en bas. Si une cellule de rubrique possde un attribut headers, les rubriques rfrences par cet attribut sont insres dans la liste et la recherche sachve pour la direction courante. Les cellules TD qui possdent un attribut axis sont galement traites comme des cellules de rubrique.

Accessibilit des jeux dencadrement

Les jeux dencadrement font galement partie des structures dlicates interprter par les agents utilisateurs non visuels. Les remdes sont toutefois ici presque inexistants. La seule solution, comme cela tait voqu au Chapitre 7, consiste employer un lment NOFRAMES et fournir un lien alternatif vers une version dpourvue de cadres.
<NOFRAMES> <H1>Bienvenue chez ORIGNAL TRADUCTIONS !</H1> Votre agent utilisateur ne reconna&icirc;t malheureusement pas les jeux dencadrement. Cliquez <A href="oritexte.html">ici</A> pour acc&eacute;der au site alternatif en version purement textuelle. </NOFRAMES>

Avec lagent utilisateur pwWebspeak, (noubliez pas que pwWebspeak lit ce qui est affich), vous obtenez laspect visuel qui est prsent dans la gure suivante.

Figure 11.8 : pwWebSpeak ne reconnat pas les jeux dencadrement

LE GUIDE COMPLET 453

Chapitre 11

Publication sur le Web

Le navigateur en texte seul Linx affiche ce qui est prsent gure suivante.

Figure 11.9 : Linx ne reconnat pas non plus les jeux dencadrement

Enn, un navigateur visuel ne reconnaissant pas les jeux dencadrement pourrait afficher ce qui est prsent dans la gure qui suit.

Figure 11.10 : Affichage avec un navigateur visuel ne reconnaissant pas les jeux dencadrement

En labsence de llment NOFRAME, les agents utilisateurs afficheraient une page vide !

Modules complmentaires (plug-in)

Pourquoi aborder ce sujet dans une section traitant de laccessibilit ? Parce que, une fois encore, le choix dimposer le chargement et linstallation de modules complmentaires (ou plug-in) pour accder un site dpend du public vis. Si celui-ci est compos dinternautes avertis, il est probable quils disposent dj des principaux modules complmentaires et ne rechigneront pas les installer ventuellement si ce nest pas le cas. En revanche, de nombreux utilisateurs moins bien informs ne se donneront

454 LE GUIDE COMPLET

Accessibilit

Chapitre 11

pas la peine de tlcharger un programme complmentaire pour visionner certaines sections de votre site. Prvoyez toujours une solution alternative pour ce type de visiteurs ! Voici quelques exemples de contenus susceptibles de rclamer un module complmentaire :
j j j j j

Texte au format PDF (Portable Document format) : Adobe Acrobate Reader. Musique : RealAudio, MIDI, WAV, QuickTime. Vido : MPEG, AVI. Animations : Flash/Shockwave (Macromedia), applets Java. Mondes virtuels : VRML .

Adobe Acrobat Reader est un clbre plug-in qui permet de lire et dimprimer des documents du Web ayant t formats pour limpression. Les utilisateurs peuvent avoir accs aux formulaires gouvernementaux, aux brochures collectives et bien dautres informations. Si lapparence de linformation que vous voulez prsenter est trs importante, envisagez de la prsenter comme un chier Adobe Acrobat. Shockwave est galement trs rpandu. Propos par Macromdia, il permet aux utilisateurs de voir des animations sophistiques ainsi que des lms crs avec le logiciel Director de Macromedia. Les applets Java ncessitent linstallation dune machine Java virtuelle (JVM, Java Virtual Machine), toutefois parfois intgre au navigateur (cas dInternet Explorer). Lincorporation de ce type dlments dans une page Web seffectue laide de llment OBJECT dj abord. Llment OBJECT a pour but de grer terme tous les contenus non textuels. Par exemple, des images simples, des lms et des applets Java peuvent tous tre affichs laide de llment OBJECT. Cet lment permet de crer diffrentes possibilits pour les utilisateurs qui ne peuvent visualiser vos chiers multimdias : un utilisateur peut voir du texte, un autre une image xe, un dernier une vido de haute qualit.

LE GUIDE COMPLET 455

Chapitre 11

Publication sur le Web

Comme le montre le tableau suivant, certains modules complmentaires sont toutefois largement installs :
Tableau 11.1 : Les technologies (plug-in) installes sur les postes

des internautes en fvrier 2008. (Source : http://www.web-stats.org/k/pluggins-par-pluggins.html) Rang 1 2 3 4 5 6 7 Produit Java Javascript Flash QuickTime Real Player Shockwave PDF Prsence 98,7 % 98,5 % 96,9 % 49,9 % 27,6 % 24,9 % 13,3 %

11.3. Adaptation plusieurs langues

Vous pourriez vouloir proposer des versions de votre site adaptes plusieurs cultures et langues, an dlargir votre public. Certains parlent pour ce faire dinternationalisation du site, terme souvent confondu avec celui de localisation. Pour simplier, linternationalisation est le processus par lequel un produit est rendu disponible aux utilisateurs dautres langues et dautres cultures. Pour HTML 4.0, il sagit essentiellement de prendre en charge les langues qui se lisent de droite gauche, comme lhbreu et larabe, ainsi que celles fondes sur des idogrammes, 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 spcique. Autrement dit, vous internationalisez votre site en localisant diffrentes versions de vos pages. Lensemble de caractres Unicode dsormais adopt par HTML est la rponse ultime au problme des diffrentes langues. Il dispose de plus de 25 000 caractres diffrents et est destin reprsenter les langues du monde entier (plus quelques autres, comme le klingon - attribut lang="xklingon", x - spciant une langue exprimentale). Vous

456 LE GUIDE COMPLET

Adaptation plusieurs langues

Chapitre 11

trouverez des informations complmentaires sur Unicode ladresse www.unicode.org/ Vous spciez la langue dun lment HTML laide de son attribut lang.

Attribut lang
Lattribut lang spcie la langue de base dans laquelle sont crits les valeurs des attributs et le contenu textuel dun lment. La valeur par dfaut de cet attribut nest pas dnie. Cet attribut sapplique ou non un attribut selon sa syntaxe et sa smantique et lopration en jeu. Vous devez tre capable dcrire dans la langue humaine de votre document. Le Web ne se comporte pas comme un traducteur universel, capable par exemple de modier une page Web du franais au japonais. Vous devez le traduire vous-mme en japonais, dans le pire des cas laide dun des nombreux programmes de traduction disponibles sur le Web. Lindication de langue procure par lattribut lang peut permettre un agent utilisateur de contrler la restitution de diverses manires, en respectant les pratiques culturelles en usage dans une langue donne. Si le but de lattribut lang est de permettre aux agents utilisateurs de reprsenter un contenu de faon plus pertinente, il nincite aucunement reprsenter de faon moins pertinente les caractres atypiques pour une langue particulire. Un agent utilisateur doit toujours faire de son mieux pour reprsenter tous les caractres, quelle que soit la valeur spcie par lang. Par exemple, imaginez que vous ayez plac des caractres de lalphabet grec au milieu dun texte en franais :
<P><Q lang="fr">Ses super-pouvoirs taient la consquence dun rayonnement &gamma;</Q>, expliqua-t-il.</P>

Lagent utilisateur doit sefforcer de reprsenter le contenu franais de manire approprie (dans sa faon de grer les guillemets par exemple) et faire son possible pour reprsenter le caractre , mme si ce nest pas un caractre franais. Remarquez que Firefox

LE GUIDE COMPLET 457

Chapitre 11

Publication sur le Web

Figure 11.11 : Aperu du code prcdent avec le navigateur Firefox

et Internet Explorer

Figure 11.12 : Aperu du code prcdent avec le navigateur Internet Explorer

ninterprtent pas de faon identique les guillemets normalement induits par llment Q, comme nous lavons vu lors de ltude de cet lment. Lattribut lang reoit comme valeur un code qui identie une langue parle, crite, ou utilise dune manire ou dune autre pour la communication dinformations entre personnes. Les langages informatiques sont explicitement exclus des codes de langue. Le document RFC1766 dnit et explique les codes de langue qui doivent tre utiliss dans les documents HTML. Brivement, 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 prsente certains codes de langue.

458 LE GUIDE COMPLET

Adaptation plusieurs langues

Tableau 11.2 : Valeurs de lattribut lang

Chapitre 11

Valeur de lang

Langage Arabe Allemand Grec Anglais Version est-londonienne de langlais Espagnol Franais Franais canadien Hbreu Hindi La langue navajo parle par certains Indiens dAmrique Italien Japonais Nerlandais Portugais Russe Sanscrit Ourdou Klingon (pensez StarTrek). Le code principal x signale une langue exprimentale. Chinois

ar de el en encockney es fr frCA he hi inavajo it ja nl pt ru sa ur xklingon zh

Un lment hrite de lindication du code de langue selon lordre de priorit suivant (de la priorit la plus leve la plus faible) :
j j j

Lattribut lang spci pour llment lui-mme. Llment parent le plus proche, dont lattribut lang est spci. Len-tte HTTP ContentLanguage (qui peut tre congur au sein dun serveur). Par exemple : ContentLanguage: frCA.

LE GUIDE COMPLET 459

Chapitre 11
j

Publication sur le Web

Les valeurs par dfaut de lagent utilisateur et les prfrences de lutilisateur.

Dans lexemple suivant, la langue principale du document est le franais (fr). Un paragraphe est dclar comme tant en espagnol (es), aprs lequel la langue principale redevient le franais. Le paragraphe qui vient ensuite inclut une phrase enchsse en japonais (ja), aprs laquelle la langue principale redevient le franais.
Listing 11-6 : Extrait du fichier depression.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <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 trs fr&eacute;quente : probablement une personne sur sept en souffre... </BODY> </HTML>

La gure suivante prsente laspect de cette page dans un navigateur.

Figure 11.13 : Texte multilingue

460 LE GUIDE COMPLET

Adaptation plusieurs langues

Chapitre 11

Hritage

Les cellules dun tableau peuvent hriter des valeurs de lang non de leur parent mais de la premire cellule dun groupe.

Lorsquun 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 lattribut lang), il doit toujours donner la prfrence aux codes qui concident parfaitement. Il peut toutefois considrer la correspondance des codes principaux comme suffisante. Ainsi, si lattribut lang est spci pour llment HTML avec la valeur frCA, lagent utilisateur devrait-il prfrer les indications de style qui correspondent dabord frCA, puis la valeur plus gnrale fr. Les agents utilisateurs ne doivent pas utiliser lattribut lang pour dterminer la direction du texte.

Attribut dir
Outre spcier la langue dun document laide de lattribut lang, il peut tre ncessaire de dnir la directionnalit de base (de gauche droite ou de droite gauche) de certaines parties du texte dun document, de la structure dun tableau, etc. Vous y parvenez laide de lattribut dir, qui spcie la direction de base dun texte neutre par rapport la direction (autrement dit, un texte dpourvu de directionnalit inhrente telle que dnie dans la norme Unicode) dans le contenu ou les valeurs dattribut dun lment. Il spcie aussi la directionnalit des tableaux. Les valeurs possibles sont :
j j

LTR (left to right) : texte ou tableau allant de gauche droite. RTL (right to left) : texte ou tableau allant de droite gauche.

La spcication Unicode attribue une directionnalit aux caractres et dnit un algorithme complexe pour dterminer la directionnalit correcte dun texte. Si un document ne contient pas de caractres affichables droite gauche, lagent utilisateur conforme nest pas tenu dappliquer lalgorithme bidirectionnel Unicode. Si un document contient des caractres droite gauche, et si lagent utilisateur affiche ces caractres, lagent utilisateur doit utiliser lalgorithme bidirectionnel.

LE GUIDE COMPLET 461

Chapitre 11

Publication sur le Web

Mme si la norme Unicode spcie des caractres spciaux concernant la direction du texte, HTML offre des structures de balisage de niveau suprieur qui accomplissent la mme chose : lattribut dir ( ne pas confondre avec llment DIR) et llment BDO. Ainsi, pour faire une citation en hbreu, il est plus intuitif dcrire :
<Q lang="he" dir="rtl">...une citation en hbreu...</Q>

que de faire appel des caractres Unicode :

&#x202B;&#x05F4;...une citation en hbreu...&#x05F4;&#x202C;

Figure 11.14 : Attribut dir avec Firefox

Figure 11.15 : Attribut dir avec Internet Explorer

Comme le montrent les copies dcran prcdentes, 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 reconnatre pour le moment lattribut dir. En ralit, ces deux navigateurs semblent interprter lattribut 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

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

Chapitre 11

donne, avec ces deux navigateurs, un rsultat 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 gures suivantes prsentent laspect 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 dsactiver lalgorithme bidirectionnel Unicode et de spcier une directionnalit laide de llment BDO (BiDirectional Override).

lment BDO
Si lalgorithme bidirectionnel et lattribut dir devraient suffire grer les changements de direction enchsss, il semble toutefois quils ne

LE GUIDE COMPLET 463

Chapitre 11

Publication sur le Web

soient pas parfaitement pris en charge pour le moment. Llment BDO, dont les balises douverture et de fermeture sont obligatoires, permet de dnir une directionnalit indpendamment de lalgorithme bidirectionnel sur des passages choisis du texte. Cet lment possde un attribut obligatoire dir, identique celui vu ci-dessus, mais qui prvaut sur la directionnalit inhrente des caractres telle que dnie dans Unicode. Reprenons lexemple prcdent, cette fois avec des lments BDO :
<HTML> <HEAD> <TITLE><BDO dir="rtl">Elments 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 gure suivante, laspect obtenu est celui souhait, si ce nest que llment BDO nest pris en compte que dans le corps du document, et non dans un lment TITLE.

Figure 11.18 : lments BDO et attributs dir avec Firefox

Attention toutefois, seuls les navigateurs les plus rcents reconnaissent llment BDO. Dune faon gnrale, lalgorithme bidirectionnel Unicode est dune grande complexit et intervient dans de nombreux domaines. Si cela vous intresse, reportez-vous la spcication HTML 4.01 pour en apprendre plus son sujet. Enn, prenez garde tester votre page en langue trangre laide dun navigateur reconnaissant cette langue. Si laspect nest pas correct, revenez en arrire et placez un attribut lang dans tout lment relatif au
464 LE GUIDE COMPLET

Adaptation plusieurs langues

Chapitre 11

contenu de la page. Il sera parfois ncessaire davoir recours un lment <BASEFONT> dans la section <HEAD>, an dimposer lutilisation dune police exotique.

Langues et jeux de caractres

Si vous ralisez une page dans une langue autre queuropenne, noubliez pas de modier la page de caractres du document laide de lattribut charset. Certains alphabets, tel lalphabet cyrillique, possdent des caractres difficilement affichables laide des caractres dEurope de lOuest Latin-1 (Western European), nomms ISO-8859-1. Les caractres cyrilliques seront trouvs dans la page Windows-1251, tandis que SHIFT_JIS et EUC-JP produisent les caractres japonais. Vous pouvez spcier le jeu de caractres pour un document en cyrillique comme ceci :
<META http-equiv="Content-Type" content="text/html; charset= Windows-1251">

Limage suivante montre une page russe, qui prsente des caractres cyrilliques,

Figure 11.19 : Site russe, ladresse http://www.cccp.de/

Voici le code source de cette page avec la spcication du jeu de caractres pour cette page.

Figure 11.20 : Code source de cette page, montrant le choix du jeu de caractres Windows-1251.

LE GUIDE COMPLET 465

Chapitre 11

Publication sur le Web

Avec de nombreux navigateurs, vous pouvez forcer le choix du type dencodage de la page. Par exemple, avec Firefox, vous choisissez Affichage / Encodage des caractres.

Figure 11.21 : Modication de lencodage de la page avec Firefox

Choisir pour la page russe le jeu occidental nest toutefois pas sage : comme le montre la gure suivante, la page devient incomprhensible.

Figure 11.22 : Aspect du site prcdent, en imposant un encodage occidental ISO-8859-1.

11.4. Test du site

Nous avons dj insist sur le fait quil fallait toujours tester un site Web avec autant de navigateurs que possible. La plupart dentre eux sont disponibles gratuitement, mme sil ne sagit que de versions de dmonstration. Dune faon gnrale, comme cela a t voqu dans le Chapitre 2, il est prfrable 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 dun public qui comprend des utilisateurs difficults visuelles, le mieux est un navigateur texte-parole. Ceux-ci sont plutt onreux, mais une version de dmonstration de pwWebSpeack est disponible ladresse www.prodworks.com Une alternative consiste utiliser un navigateur en texte seul, comme Lynx (http://lynx.browser.org/), an de visualiser votre site. Prenez toujours la prcaution dexaminer votre site sous un navigateur graphique aprs avoir dsactiv les graphismes. Voici comment dsactiver les graphismes avec les deux principaux navigateurs :
j

Avec Internet Explorer, choisissez Outils / Options Internet. Cliquez sur longlet Avanc, puis descendez dans la liste et dcochez dans la section Multimdia loption Afficher les images.

Figure 11.23 : Dsactivation des images avec Internet Explorer j

Avec

Firefox, choisissez Outils / Options. Choisissez Fonctionnalits Web dans le volet de gauche, puis dcochez dans le volet de droite loption Charger les images .

Figure 11.24 : Dsactivation de graphismes avec Firefox

LE GUIDE COMPLET 467

Chapitre 11

Publication sur le Web

Remarquez quun navigateur images dsactives (ou en texte seul) supprime toutes les indications des feuilles de style. Tout graphisme ventuellement prsent sur la page naffiche que le texte prsent dans son attribut alt.

Figure 11.25 : Page Ma rgion dans Internet Explorer, les graphismes tant dsactivs.

Bien videmment, si vous ralisez une page pour un intranet, testez-le avec le navigateur utilis par lentreprise, pourvu de tous les programmes complmentaires (plug-in) installs de faon standard. Prenez garde aux problmes de compatibilit entre navigateurs. La page est-elle parfaite avec un autre navigateur ? Si vous avez conu votre site en pensant un navigateur unique, sans pouvoir exercer de contrle sur le navigateur rellement utilis, nimaginez pas que votre page sera parfaite pour chaque visiteur. Examinez votre page avec au moins un autre navigateur, et observez ses transformations, en vriant quelle ne perd pas sa signication. Si tel tait le cas, essayez de la modier an que le message peru reste identique quels que soient le navigateur et la conguration matrielle de lutilisateur. Il est bien sr difficile de disposer de tous les navigateurs sur son ordinateur. Plusieurs solutions sont possibles :

468 LE GUIDE COMPLET

Test du site
j Partage du test des ressources Web avec dautres.

Chapitre 11

Il peut sagir damis ou de relations, qui possdent une architecture matrielle et/ou un navigateur diffrents des vtres. Vous pouvez galement solliciter, sur certains groupes de discussion, lexamen de votre site. Certains dveloppeurs peuvent pousser le professionnalisme jusqu vous envoyer une capture dcran ! En attirant lattention des testeurs sur certains problmes spciques que vous suspectez, les rponses reues devraient vous permettre de rsoudre tout problme potentiel. Emploi de sites de test disponibles sur le Net (comme, par exemple, AnyBrowser.com). Vous pouvez : tester votre site laide dune simulation de navigateur de troisime gnration ;

Figure 11.26 : Test dun site avec un navigateur de troisime gnration

spcier plus prcisment un niveau de compatibilit avec les spcications HTML ; tester laffichage sur une WebTV.

Figure 11.27 : Test dun site en choisissant le niveau de compatibilit du navigateur

LE GUIDE COMPLET 469

Chapitre 11

Publication sur le Web

Pensez galement modier votre rsolution et faire varier la taille de la fentre du navigateur. Des surprises ne manqueront pas de sensuivre Ne poussez toutefois pas la prcision lextrme : les diffrences entre navigateurs sont invitables. Tant que le contenu reste lisible, ne modiez pas votre page parce quun lment diffre lgrement dun autre. Tout au long de la phase de test, vous devrez rpondre plusieurs questions. Tout dabord, celles qui concernent directement le contenu :
j j j j j

j j

Les informations dtailles sur le contenu sont-elles directement ou rapidement disponibles ? Tout document doit possder un titre. Vos titres rsument-ils bien le contenu des pages ? Lesthtique des pages est-elle de bon got ? Originale ? Attrayante ? Ny a-t-il rien qui puisse choquer inutilement un lecteur dune culture diffrente de la vtre ? Le raffinement de votre page daccueil nest-il pas excessif au point de pnaliser lourdement le temps de chargement (image trop grande ou texte trop long) ? La page daccueil signale-t-elle la conguration optimale pour visionner votre site ? Tous les liens sont-ils bien dnis ? Toutes les images sont-elles bien prsentes ? Comptent-elles toutes bien un texte alternatif ? Avez-vous pens limiter leur taille ?

Vous pouvez en outre utilement vrier le bon balisage de votre document, soit laide du service propos par le W3C ladresse http://validator.w3.org/, soit en employant leur diteur/navigateur gratuit Amaya.
Emplacement

Un site Web est susceptible de changer demplacement. Ce peut tre une dcision de niveau serveur, dont vous ntes pas matre. Un truc tout simple pour tester ce problme consiste changer votre site en construction de disque ou de rpertoire. Vous verrez ainsi si cette modication pose problme.

470 LE GUIDE COMPLET

Test du site

Chapitre 11

Bref, testez, testez... il en restera toujours quelque chose. Noubliez jamais que le lecteur dune prsentation informatise tablira toujours une corrlation 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 lditeur/navigateur Amaya, qui peut enregistrer des documents HTML en XHTML.

Ractions du public
Vous avez conu un splendide site Web, lavez 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 dentrer 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 complter cela par un lien situ sur votre page daccueil, qui prcise o signaler un problme. Nous lavons fait pour notre site, grce au lien de messagerie de la barre de navigation (affiche sur chaque page) et au message qui gure dans la page daccueil, mme si pour le moment les liens de ce message ne possdent 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 complt par les visiteurs et envoy (probablement par messagerie) au responsable du site. Dans notre cas, ce serait une page probleme.html. Le formulaire doit poser des questions prcises relatives au site, ainsi que sur le prol du visiteur. Ces dernires informations permettent de vrier 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 avances consistent proposer une liste de diffusion ou une adresse de groupe de discussion. Une liste de diffusion envoie un message toute personne prsente sur la liste, les membres pouvant le plus souvent rpondre directement la liste. Cela peut augmenter la porte 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, regroups par sujet ou par thme. Cela est trs similaire la liste de diffusion, mais attire traditionnellement moins de gens : sans doute parce que les utilisateurs doivent les visiter activement, alors quils reoivent automatiquement les messages dune liste. Ces deux mthodes demandent toutefois une mise en uvre plus complexe, qui ne sera pas aborde ici. Quelle que soit la faon dont vous encouragez les commentaires touchant votre site, rpondez-y toujours rapidement. Si quelquun vous crit pour vous demander une URL, envoyez-la le jour mme ou rpondez que vous ne savez pas o la trouver. Nhsitez jamais avouer que vous ignorez quelque chose, mais essayez daller trouver la rponse.

11.5. Publication sur le Web

La dernire tape, et paradoxalement la plus simple, consiste placer votre site sur le Web. Pour le moment, vous possdez un site en construction, stock quelque part sur votre disque dur. Pour continuer, vous avez besoin dun hbergeur et dun outil capable de transfrer les chiers qui composent votre site sur le serveur de cet hbergeur. Le problme se pose diffremment pour une entreprise dote de son propre rseau (et qui dispose probablement dun ou de plusieurs
472 LE GUIDE COMPLET

Publication sur le Web

Chapitre 11

serveurs hbergeant son intranet et son site Web externe), pour une entreprise passant par lintermdiaire dun fournisseur daccs Internet (FAI) spcialis et pour un individu ou une PME pouvant se contenter des services dun FAI grand public. Cest ce dernier cas que nous nous intressons particulirement. Peut-tre lignorez-vous, mais si vous disposez dun accs Internet, vous possdez probablement un hbergeur. La quasi-totalit des FAI mettent gracieusement votre disposition un espace de stockage capable dhberger vos pages personnelles. La place offerte se compte dsormais en centaines de mgaoctets, un chiffre excdant en principe largement les besoins dun site personnel ou SOHO (Small Home, Home Office). Orange propose par exemple 100 Mo despace 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 hbergement amlior pour un montant relativement modeste.

Figure 11.31 : Hbergement amlior d Orange

Vous devrez dans la plupart des cas activer vos pages personnelles (votre compte de pages personnelles) auprs de votre FAI. Suivez pour cela les instructions fournies par celui-ci dans sa documentation ou sur son site. Vous devez ensuite disposer dun moyen de transfrer vos chiers du rpertoire de construction, situ sur votre disque dur, jusquau rpertoire de destination, situ une adresse fournie par votre FAI (souvent quelque chose comme votrenom.perso-ftp, votreFAI.fr ou votrenom.perso.votreFAI.fr). Cela seffectue laide dun protocole nomm FTP (File Transfer Protocole), si bien que les logiciels capables daccomplir ce travail portent le nom de logiciels FTP . Certains diteurs HTML proposent des fonctions FTP intgres pour le transfert et ladministration de votre site Web. Si ce nest pas le cas de votre diteur favori, il vous reste, selon les FAI, deux solutions :
j WebFTP

: cette mthode relativement rcente propose par certains FAI (dont Neuf-Telecom) est similaire au WebMail, ce systme qui vous permet de consulter vos courriers sans logiciel de messagerie ddi, depuis nimporte quel navigateur. Gnralement trs intuitive, cest une mthode lgante.

474 LE GUIDE COMPLET

Publication sur le Web

j Logiciels FTP indpendants

Chapitre 11

: il en existe un grand nombre, certains gratuits, certains sous forme de partagiciels (shareware), dautres enn tant commerciaux. Votre FAI propose gnralement dans sa bote outil un tel produit (Cuteftp pour Orange, LeechFtp sous Windows ou Fetch sous MacOS proposs sur le kit de connexion de Free, mais il en existe bien dautres, comme vous le montrera une simple recherche Google). Citons notament Filezilla, de la grande famille des logiciels libres gratuits (www.filezilla-project.org).

Figure 11.32 : Une recherche Google avec comme mots-cls logiciel FTP + gratuit procure plus de 6 600 rponses

Si vous avez choisi de tlcharger et dinstaller un logiciel FTP, vous devez le congurer. Pour ce faire, vous devez toujours lui indiquer :
j j j

Ladresse du serveur FTP. Cest gnralement quelque chose comme perso-ftp.votreFAI.fr Votre identiant et votre mot de passe de messagerie. Lemplacement de vos pages sur votre disque dur (le site local).

Ces informations vous sont fournies par votre FAI. Selon le logiciel, dautres informations peuvent vous tre demandes :
j j

Le type dhte. Cette information vous est fournie par votre FAI. Cest souvent UNIX (standard). Un nom pour la connexion. Pratique si ce logiciel doit servir vous connecter plusieurs serveurs STP.

LE GUIDE COMPLET 475

Chapitre 11
j

Publication sur le Web

Ladresse de votre site. Cest souvent quelque chose comme http://perso.votreFAI.fr/votrenom/ ou votrenom.perso .votreFAI.fr.

Les copies dcran qui suivent montrent les informations demandes par WS_FTP95 LE, mon logiciel FTP favori (bien quancien).

Figure 11.33 : Informations de connexion demandes par WS_FTP95 LE

Figure 11.34 : Informations de connexion demandes par WS_FTP95 LE

Vous voyez en principe, dans la fentre du logiciel, deux volets. Le volet de gauche prsente les chiers situs dans le dossier spci lors de la conguration du logiciel. Si ce nest pas le bon dossier, vous pouvez naviguer sur votre ordinateur jusqu afficher le dossier contenant les chiers de votre site. tablissez la connexion si elle ne lest pas dj (la mthode peut diffrer selon le logiciel). Le cadre de droite affiche les chiers et dossiers actuellement situs sur le serveur distant : ceux effectivement consults par des visiteurs.

476 LE GUIDE COMPLET

Publication sur le Web

Chapitre 11

Figure 11.35 : Fentre de WS_FTP95 LE, affichant les dossiers de MonSite et ceux situs sur le serveur distant.

Pour transfrer des chiers, slectionnez-les dans le volet de gauche et lancez le transfert, par exemple en cliquant sur un bouton.

Figure 11.36 : Slection et transfert de chiers

Un message dtat du transfert des chiers est gnralement affich. Patientez quelques instants et allez visiter votre site, en lanant votre navigateur et en saisissant ladresse de votre site. Ce mme logiciel permet de grer votre site distance. Vous pouvez tout moment ajouter de nouveaux chiers ou en supprimer. Pour supprimer un chier distant, slectionnez-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 frquentation de votre site

Une fois votre site en ligne, vous souhaiterez probablement en suivre la frquentation dune faon ou dune autre. De nombreux FAI proposent de tels outils, parfois gratuitement, parfois moyennant nances. Leur emploi est parfois simple, parfois complexe. Et tout changement de FAI impose dtudier un nouveau systme Une solution alternative consiste recourir Google Analytics, un outil gratuit dune rare puissance. Voici comment en proter :

1 Servez-vous de votre compte Google pour ouvrir un compte Google Analytics, partir de la page http://www.google.com/analytics /fr-FR/.

Figure 11.37 : Page daccueil de Google Analytics.

2 Dans la zone de texte Sinscrire Google Analytics, cliquez sur Inscription.

478 LE GUIDE COMPLET

Suivi de la frquentation de votre site

Chapitre 11

3 Entrez lURL du site Web que vous souhaitez suivre, puis nommez votre compte. Cest ce nom qui gurera dans vos rapports Google Analytics. Vous pourrez, si vous le souhaitez, ajouter dautres sites aprs la conguration de votre compte. 4 Renseignez vos nom, prnom, numro de tlphone et pays. 5 Acceptez le contrat utilisateur et cliquez sur Crer un compte. Cela affiche la page Instructions de suivi. Cette page possde une zone de texte qui contient un fragment de code. Dans celui-ci, UAxxxxxxxx est lidentiant unique associ votre compte:
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-xxxxxxx-x"; urchinTracker(); </script>

Ce fragment de code charge la bibliothque urchin.js dans lagent utilisateur client, dnit lidentiant unique (_uacct), puis appelle urchinTracker() pour renvoyer les donnes 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 llment HEAD, surtout si votre page est riche en code JavaScript et que vous constatez quelques problmes.
Lactivation de Google Anaytics nest pas immmdiate

Larrive des premires donnes dans vos rapports peut demander prs de 24 heures aprs louverture dun compte et la saisie, puis la publication du code de suivi adquat. Soyez patient

Vous pouvez examiner les tats associs votre gadget en ouvrant une session dans Google Analytics et en choisissant Afficher les rapports. La page qui saffiche alors est le Tableau de bord (voir Figure 11.38). Il prsente six volets principaux. En haut, un graphique de lvolution des visites quotidiennes ;

LE GUIDE COMPLET 479

Chapitre 11

Publication sur le Web

Figure 11.38 : Tableau de bord Google Analytics.

En dessous, diffrentes donnes sur la Frquentation du site (nombre de visites sur la priode, pages vues, pages par visites, rapport nouveaux/anciens visiteurs etc.) ; Vient ensuite une Vue densemble des visiteurs, trs similaire au premier graphique si ce nest quil concerne les visiteurs et non les visites, et une Synthse gographique : une carte du monde o lintensit de la couleur est proportionnelle au nombre de visiteurs de mme dorigine gographique. Le dernier groupe prsente une Vue densemble des sources de trafic (un camembert qui montre par quel moyen les visiteurs sont parvenus votre site) et une Vue densemble du contenu (les pages les plus vues). Vous pouvez galement ventuellement voir un graphique de Vue densemble des objectifs, si vous avez dni un objectif dans les paramtres danalyse. Il suffit de cliquer sur le lien Afficher le rapport dun des volets ou sur un lment pour afficher ses dtails. Laccs est galement possible partir du menu de gauche. Il est impossible de tout dtailler : cela ncessiterait un ouvrage entier ! Intressons-nous plutt llment Visiteurs : cliquez gauche sur Visiteurs ou sur Afficher le rapport du volet Vue densemble des visiteurs. Cela affiche une nouvelle page qui fourmille dinformations

480 LE GUIDE COMPLET

Suivi de la frquentation de votre site

Chapitre 11

intressantes (Segmentation des visiteurs, Profil des visiteurs dont langue(s), Fournisseurs daccs et Valeurs personnalises, Type de navigateur [navigateurs, systmes dexploitation, navigateur et systmes dexploitation, couleurs dcran, rsolutions dcran, types de prise en charge de Java, Flash] et Synthse gographique)

Figure 11.39 : Page Vue densemble des visiteurs

Cliquons dans le volet Navigateurs de la section Profil technique sur Afficher le rapport complet. Cela peut permettre de vrier certains postulats mis prcdemment. Je prcise toutefois que cela ne sapplique qu mon site, dont les 5833 visiteurs constats sur environ 1 an ne constituent pas forcment un chantillon reprsentatif du Web. En revanche, cest sans aucun doute "mon" public.

Figure 11.40 :

Navigateurs

Mes visiteurs possdent dans 68,8 % des cas Internet Explorer, et Firefox dans 24,4 % des cas. Vous pouvez cliquer sur le nom dun navigateur pour voir des dtails sur ses versions : ainsi, Internet Explorer 6 tait encore employ dans 50,7 % des cas, soit par environ 35 % de mes visiteurs. Il nexiste quasiment plus de versions antrieures
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 % dentre eux possdent au moins la version 2.0.0.1. Cliquons ensuite dans le menu de gauche sur Systmes dexploitation.

Figure 11.41 : Versions de la plate-forme.

Leur systme dexploitation est Windows dans 92 % des cas. Il devient intressant de regarder la combinaison navigateur/plate-forme en cliquant dans le menu de gauche sur Navigateurs et systmes dexploitation pour disposer dune ide plus prcise de leurs caractristiques.

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 : Rsolutions dcran.

482 LE GUIDE COMPLET

Rsum

Chapitre 11

Seuls (mais encore) 4,4 % des visiteurs possdent une rsolution de 800 x 600 pixels. 43,7 % disposent dune rsolution de 1024 x 768, les autres possdant une rsolution suprieure. Si je dois donc toujours prvoir une rsolution minimale de 800 x 600, les choses risquent dvoluer rapidement Ces informations sont prcieuses : elles conrment que je ne puis me dispenser de tester mes pages laide au moins dInternet Explorer 6 et 7 et de Firefox 2. Google Analytics apparat donc comme un outil prcieux, presque indispensable. Ne vous en privez pas !

11.7. Rsum
j

Ds le dbut de la phase de conception de votre site, vous devez garder lesprit les caractristiques de la cible vise et, pour ce faire, identier votre public : Les enfants prfrent des images claires et colores et sont souvent capables de comprendre le but dune icne sans avoir lire le texte. Les personnes ges peuvent souffrir de dcits visuels et prouver des difficults employer le clavier ou la souris. Un public damateurs de jeux vido apprcie particulirement les images et les vidos.

j j

Les cadres rendent la navigation difficile sans souris et ne sont pas reconnus par les navigateurs textuels. Les images posent rarement de problmes si vous avez pens placer un attribut alt dans llment IMG pour permettre aux utilisateurs ayant dsactiv les images den obtenir une description. 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 donnes particulire, lattribut headers rpertorie les cellules qui fournissent des indications de rubrique pertinentes. Pour une cellule de rubrique donne, lattribut scope indique lagent utilisateur les cellules concernes par ces indications de rubrique. Enn, lattribut abbr spcie un nom de rubrique abrg pour les

LE GUIDE COMPLET 483

Chapitre 11

Publication sur le Web

cellules de rubrique, an que les agents utilisateurs puissent restituer plus rapidement les indications de rubrique. Les jeux dencadrement font galement partie des structures dlicates interprter par les agents utilisateurs non visuels. La seule solution consiste employer un lment NOFRAME et fournir un lien alternatif vers une version dpourvue de cadres. Les modules complmentaires (ou plug-in) sont de petits programmes qui permettent dafficher dans le navigateur des types de contenu normalement non affichables. Les plus clbres sont Adobe Acrobat Reader, Shockwave, JVM (Java Virtual Machine), QuickTime et RealAudio. Ces types de contenu sont insrs dans une page Web laide de llment OBJET. Lensemble de caractres Unicode dsormais adopt par HTML dispose de plus de 25 000 caractres diffrents et est capable de reprsenter les langues du monde entier. Vous spciez la langue dun lment HTML laide de son attribut lang. Celui-ci reoit comme valeur un code qui identie une langue parle, crite, ou utilise dune manire ou dune autre pour la communication dinformations entre personnes. Lattribut dir spcie la direction de base dun texte dpourvu de directionnalit inhrente telle que dnie dans la norme Unicode, ainsi que la directionnalit des tableaux. Il ne semble toutefois pas tre trs reconnu par les navigateurs actuels. Il est possible de dsactiver lalgorithme bidirectionnel Unicode et de spcier une directionnalit laide de llment BDO (BiDirectional Override). Cet lment possde un attribut obligatoire dir, identique au prcdent, mais qui prvaut sur la directionnalit inhrente des caractres telle que dnie dans Unicode. Si vous ralisez une page dans une langue autre queuropenne, vous devez modier le jeu de caractres du document laide de lattribut charset dun lment META. De nombreux navigateurs permettent dimposer le choix du type dencodage de la page. 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. Vous devez galement effectuer un test avec ces navigateurs en dsactivant laffichage des images.

484 LE GUIDE COMPLET

Rsum
j

Chapitre 11

j j

Vous pouvez trouver sur le Net des sites de test, comme AnyBrowser.com. Vous pouvez y effectuer un test en spciant un niveau de compatibilit avec les spcications HTML et mme tester un affichage WebTV. Vous devez fournir aux utilisateurs un moyen dentrer en contact avec vous et les encourager vous faire part de leurs remarques. Pour placer effectivement votre site sur le Web, vous avez besoin dun hbergeur et dun outil capable de transfrer les chiers qui composent votre site sur le serveur de cet hbergeur. La quasitotalit des FAI mettent gracieusement votre disposition un espace de stockage capable dhberger vos pages personnelles. Le transfert de vos chiers du rpertoire de construction jusquau rpertoire de destination, situ chez lhbergeur, seffectue laide dun protocole nomm FTP (File Transfer Protocole). Les logiciels capables daccomplir ce travail portent le nom de logiciels FTP . Il existe de nombreux logiciels FTP gratuits, chaque FAI disposant de ses propres prfrences. Google Analytics est un outil prcieux qui permet de suivre avec une grande prcision la frquentation de son site Web..

LE GUIDE COMPLET 485

Annexes

Jeu des entits de caractres Latin-1 .......................................................................... 488 lments et attributs HTML 4.01 ................................................................................... 491 Compatibilit XHTML/HTML ........................................................................................... 513 DTD et XML ......................................................................................................................... 523 Slecteurs CSS .................................................................................................................. 530 Ressources Web ................................................................................................................ 533

Chapitre 12

Annexes

12.1. Jeu des entits de caractres Latin-1

Tableau 12.1 : Jeu des entits de caractres Latin-1

Caractre espace inscable (symbole montaire) R (signe ngation) - (trait dunion virtuel) T _ (macron)
2

Nom de lentit

Codage dcimal

Codage hexadcimal

&nbsp; &iexcl; &cent; &pound; &curren; &yen; &brvbar; &sect; &uml; &copy; &ordf; &laquo; &not; &shy;

&#160; &#161; &#162; &#163; &#164; &#165; &#166; &#167; &#168; &#169; &#170; &#171; &#172; &#173;

&#xa0; &#xa1; &#xa2; &#xa3; &#xa4; &#xa5; &#xa6; &#xa7; &#xa8; &#xa9; &#xaa; &#xab; &#xac; &#xad;

&reg; &macr; &deg; &plusmn; &sup2; &sup3; &acute;

&#174; &#175; &#176; &#177; &#178; &#179; &#180;

&#xae; &#xaf; &#xb0; &#xb1; &#xb2; &#xb3; &#xb4;

488 LE GUIDE COMPLET

Jeu des entits de caractres Latin-1

Tableau 12.1 : Jeu des entits de caractres Latin-1

Chapitre 12

Caractre (pied de mouche) ^

Nom de lentit

Codage dcimal

Codage hexadcimal

&micro; &para; &middot; &cedil; &sup1; &ordm; &raquo; &frac14; &frac12; &frac34; &iquest; &Agrave; &Aacute; &Acirc; &Atilde; &Auml; &Aring; &AElig; &Ccedil; &Egrave; &Eacute; &Ecirc; &Euml; &Igrave; &Iacute; &Icirc;

&#181; &#182; &#183; &#184; &#185; &#186; &#187; &#188; &#189; &#190; &#191; &#192; &#193; &#194; &#195; &#196; &#197; &#198; &#199; &#200; &#201; &#202; &#203; &#204; &#205; &#206;

&#xb5; &#xb6; &#xb7; &#xb8; &#xb9; &#xba; &#xbb; &#xbc; &#xbd; &#xbe; &#xbf; &#xc0; &#xc1; &#xc2; &#xc3; &#xc4; &#xc5; &#xc6; &#xc7; &#xc8; &#xc9; &#xca; &#xcb; &#xcc; &#xcd; &#xce;

LE GUIDE COMPLET 489

Chapitre 12

Annexes
Tableau 12.1 : Jeu des entits de caractres Latin-1

Caractre Y

Nom de lentit

Codage dcimal

Codage hexadcimal

&Iuml; &ETH; &Ntilde; &Ograve; &Oacute; &Ocirc; &Otilde; &Ouml; &times; &Oslash; &Ugrave; &Uacute; &Ucirc; &Uuml; &Yacute; &THORN ; &szlig ; &agrave; &aacute; &acirc; &atilde; &auml; &aring; &aelig; &ccedil; &egrave; &eacute;

&#207; &#208; &#209; &#210; &#211; &#212; &#213; &#214; &#215; &#216; &#217; &#218; &#219; &#220; &#221; &#222; &#223; &#224; &#225; &#226; &#227; &#228; &#229; &#230; &#231; &#232; &#233;

&#xcf; &#xd0; &#xd1; &#xd2; &#xd3; &#xd4; &#xd5; &#xd6; &#xd7; &#xd8; &#xd9; &#xda; &#xdb; &#xdc; &#xdd; &#xde; &#xdf; &#xe0; &#xe1; &#xe2; &#xe3; &#xe4; &#xe5; &#xe6; &#xe7; &#xe8; &#xe9;

490 LE GUIDE COMPLET

lments et attributs HTML 4.01

Tableau 12.1 : Jeu des entits de caractres Latin-1

Chapitre 12

Caractre

Nom de lentit

Codage dcimal

Codage hexadcimal

&ecirc ; &euml; &igrave; &iacute; &icirc; &iuml; &eth;

&#234; &#235; &#236; &#237; &#238; &#239; &#240; &#241; &#242; &#243; &#244; &#245; &#246; &#247; &#248; &#249; &#250; &#251; &#252; &#253; &#254; &#255;

&#xea; &#xeb; &#xec; &#xed; &#xee; &#xef; &#xf0; &#xf1; &#xf2; &#xf3; &#xf4; &#xf5; &#xf6; &#xf7; &#xf8; &#xf9; &#xfa; &#xfb4; &#xfc; &#xfd; &#xfe; &#xff;

y y

&ntilde; &ograve; &oacute; &ocirc ; &otilde; &ouml; &divide; &oslash; &ugrave; &uacute; &ucirc; &uuml; &yacute; &thorn; &yuml;

12.2. lments et attributs HTML 4.01

Vous trouverez ici la totalit des lments et attributs proposs par la spcication HTML 4.01, classs par ordre alphabtique.

LE GUIDE COMPLET 491

Chapitre 12

Annexes

lments HTML 4.01

A : ancre

accesskey : touche daccs rapide. %Character; charset : jeu de caractres de la ressource lie. %Charset; coords : employ avec les cartes ct client. %Coords; href : URI de la ressource lie. %URI; hreflang : code de la langue. %LanguageCode; name : n de lien nomm. CDATA onblur : llment a perdu le focus. %Script; onfocus : llment a obtenu le focus. %Script; rel : types de liens avant. %LinkTypes; rev : types de liens arrire. %LinkTypes; shape : employ avec les cartes ct client. %Shape; tabindex : position dans lordre de tabulation. NUMBER target : afficher dans ce cadre (DTD Frameset). %FrameTarget; type : type de contenu. %ContentType;
ABBR : abrviation (www, HTTP, etc.) ACRONYM : acronyme ADDRESS : informations sur lauteur APPLET : applet Java (dconseill, DTD Transitoire)

align : alignement vertical ou horizontal (dconseill). %IAlign; alt : description brve (dconseill). %Text; archive : liste darchives, spares par des virgules (dconseill). CDATA code : chier de classes de lapplet (dconseill). CDATA codebase : URI facultatif de base pour lapplet (dconseill). %URI; height : hauteur initiale (dconseill). %Length; hspace : intervalle horizontal (dconseill). %Pixels; name : permet aux applets de se retrouver mutuellement (dconseill). CDATA object : chier dapplet srialis (dconseill). CDATA vspace : intervalle vertical (dconseill). %Pixels; width : largeur initiale (dconseill). %Length;
AREA : image cliquable ct client

accesskey : touche daccs rapide. %Character; alt : description brve. %Text; coords : liste de longueurs spares par des virgules. %Coords;
492 LE GUIDE COMPLET

lments et attributs HTML 4.01

Chapitre 12

href : URI de la ressource lie. %URI; nohref : cette rgion est sans action. (nohref) onblur : llment a perdu le focus. %Script; onfocus : llment a obtenu le focus. %Script; shape : contrle linterprtation des coordonnes. %Shape; tabindex : place dans lordre 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 (dconseill, DTD transitoire)

color : couleur du texte (dconseill). %Color; face : liste de noms de police, spars par des virgules (dconseill). CDATA size : obligatoire. Taille de police de base des lments FONT (dconseill). CDATA
BDO : inactivation de lalgorithme 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 slectionnes (dconseill). %Color; background : image darrire-plan du document (dconseill). %URI; bgcolor : couleur darrire-plan du document (dconseill). %Color; link : couleur des liens (dconseill). %Color; onload : le document a t charg. %Script; onunload : le document a t supprim. %Script; text : couleur du texte du document (dconseill). %Color; vlink : couleur des liens visits (dconseill). %Color;
BR : saut de ligne

clear : contrle du ux de texte (dconseill). (left | all | right | none)

LE GUIDE COMPLET 493

Chapitre 12

Annexes

BUTTON : bouton

accesskey : touche daccs rapide. %Character; disabled : non disponible dans ce contexte. (disabled) name : nom. CDATA onblur : llment a perdu le focus. %Script; onfocus : llment a obtenu le focus. %Script; tabindex : position dans lordre de tabulation. NUMBER type : employ comme bouton de formulaire.(button | submit | reset) value : valeur envoye au serveur lors de la soumission du formulaire. CDATA
CAPTION : lgende de tableau

align : alignement relatif du tableau (dconseill). %CAlign;

CENTER : raccourci pour DIV align="center" (dconseill, DTD transitoire) CITE : citation CODE : fragment de code informatique COL : colonne de tableau

align : alignement (dconseill). (left | center | right | justify | char) char : caractre dalignement, par exemple char=:.%Character; charoff : dcalage du caractre dalignement. %Length; span : les attributs de COL affectent n colonnes. n (nombre) valign : alignement vertical dans les cellules. (top | middle | bottom | baseline) width : spcication de la largeur des colonnes. %MultiLength;
COLGROUP : groupe de colonnes de tableau

align : alignement (dconseill). (left | center | right | justify | char) char : caractre dalignement, par exemple char=:. %Character; charoff : dcalage du caractre dalignement. %Length; span : nombre de colonnes par dfaut dans un groupe. NUMBER width : largeur par dfaut des COL concernes (imbriques). %MultiLength; valign : alignement vertical dans les cellules. (top | middle | bottom | baseline)

494 LE GUIDE COMPLET

lments et attributs HTML 4.01

DD : description de dnition DEL : texte supprim

Chapitre 12

cite : information sur le motif de la modication. datetime : date et heure de modication. %Datetime;
DFN : dnition dinstance DIR : liste de rpertoire (dconseill, DTD transitoire)

compact : rduction (compact)

de lespace entre lments (dconseill).

DIV : conteneur de langue/style gnrique

align : alignement du texte (dconseill). (left | center | right | justify)

DL : liste de dnitions

compact : rduction (compact)

DT : terme de dnition EM : emphase

de lespace entre lments (dconseill).

FIELDSET : groupe de contrles de formulaire FONT : modication(s) locale(s) dune police (dconseill, DTD transitoire) color : couleur du texte (dconseill). %Color; face : liste de noms de police, spars par une virgule (dconseill).

CDATA size : par exemple size="+1", size="4" (dconseill). [+|]nn,

FORM : formulaire interactif

acceptcharset : liste des jeux de caractres pris en charge. %Charsets; accept : liste des types MIME pour le tlchargement de chiers. %ContentTypes; action : mode de gestion des formulaires ct serveur (obligatoire). %URI; enctype : type dencodage. %ContentType; method : mthode HTTP employe 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 rinitialis. %Script; onsubmit : le formulaire a t soumis. %Script; target : afficher dans ce cadre . %FrameTarget;
FRAME : sous-cadre (fentre secondaire) (DTD Frameset)

longdesc : lien vers une description longue, compltant le titre. %URI; marginheight : marge haute en pixels. %Pixels; marginwidth : marge basse en pixels. %Pixels; noresize : lutilisateur peut-il modier la taille des cadres ? (noresize) frameborder : prsence ou absence de bordure pour le cadre. 1 | 0) name : nom du cadre pour pouvoir le cibler. CDATA scrolling : prsence ou absence des barres de dlement du cadre. (yes | no | auto) src : source du contenu du cadre. %URI;
FRAMESET : subdivision de fentre (DTD Frameset)

cols : liste de longueurs, par dfaut 100 % (1 colonne) (DTD Frameset). %MultiLengths; onload : tous les cadres ont t chargs (DTD Frameset). %Script; onunload : tous les cadres ont t supprims (DTD Frameset). %Script; rows : liste de longueurs, par dfaut 100 % (1 ligne) (DTD Frameset). %MultiLengths;
Hn : titre de niveau n (n compris entre 1 et 6)

align : alignement du texte (dconseill). (left | center | right | justify)

HEAD : en-tte de document

profile : dictionnaire nomm de mta-informations. %URI;

HR : ligne horizontale

align : alignement du texte (dconseill). (left | center | right) noshade : ombrage (dconseill). (noshade) size : taille en pixels (dconseill). %Pixels; width : largeur (dconseill). %Length;
HTML : lment racine du document

version : constante (dconseill). %HTML Version;

I : texte de style italique

496 LE GUIDE COMPLET

lments et attributs HTML 4.01

IFRAME : sous-fentre en ligne (DTD Transitoire)

Chapitre 12

align : alignement vertical ou horizontal (dconseill). %IAlign; height : hauteur du cadre. %Length; longdesc : lien vers une description longue, compltant le titre. %URI; marginheight : hauteur des marges en pixels. %Pixels; marginwidth : largeur des marges en pixels. %Pixels; width : largeur du cadre. %Length; frameborder : prsence ou absence de bordure de cadre. (1 | 0) name : nom du cadre pour pouvoir le cibler. CDATA scrolling : prsence ou absence des barres de dlement du cadre. (yes | no | auto) src : source du contenu du cadre. %URI;
IMG : image incorpore

align : alignement vertical ou horizontal (dconseill). %IAlign; alt : description brve (recommand). %Text; border : largeur de la bordure du lien (dconseill). %Pixels; ismap : emploi de carte image ct serveur. (ismap) height : hauteur doutrepassement. %Length; hspace : dcalage horizontal (dconseill). %Pixels; longdesc : lien vers une description longue (compltant alt). name : nom de limage (pour un script). CDATA src : URI de limage incorporer (obligatoire). %URI; usemap : emploi de carte image ct client. %URI; vspace : dcalage vertical (dconseill). %Pixels; width : largeur doutrepassement. %Length;
INPUT : contrle de formulaire (saisie)

accept : liste des types MIME pour le tlchargement de chiers. %ContentTypes; accesskey : touche daccs rapide. %Character; align : alignement vertical ou horizontal (dconseill). %IAlign; alt : description brve. checked : pour les boutons doption et les cases cocher. (checked) disabled : indisponible dans ce contexte. (disabled) ismap : emploi de carte image ct serveur. (ismap) maxlength : nombre maximum de caractres dun champ texte. NUMBER name : soumission comme partie dun formulaire. CDATA onblur : llment a perdu le focus. %Script; onchange : la valeur de llment a t modie. %Script; onfocus : llment a obtenu le focus. %Script;
LE GUIDE COMPLET 497

Chapitre 12

Annexes

onselect : du texte a t slectionn. %Script; readonly : pour du texte et un mot de passe. (readonly) size : spcique chaque type de champ. CDATA src : pour les champs image. %URI; tabindex : position dans lordre de tabulation. NUMBER type : le type de widget ncessaire. %InputType; usemap : emploi dune carte image ct client. %URI; value : spcique aux boutons doption et cases cocher. CDATA
INS : texte insr

cite : information sur le motif de la modication. %URI; datetime : date et heure de la modication. %Datetime;
ISINDEX : invite ligne unique (dconseill, DTD transitoire)

prompt : message dinvite (dconseill). %Text;

KBD : texte devant tre saisi par lutilisateur LABEL : libell dun champ de formulaire

accesskey : touche daccs rapide. %Character; for : correspond la valeur dID dun champ. onblur : llment a perdu le focus. %Script; onfocus : llment a obtenu le focus. %Script;
LEGEND : lgende dun ensemble de champs

accesskey : touche daccs rapide. %Character; align : alignement relatif dun ensemble de champs (dconseill). %LAlign;
LI : lment de liste

type : style dun lment de liste (dconseill). %LIStyle; value : rinitialisation du numro de squence (dconseill). NUMBER
LINK : lien indpendant du mdia

charset : jeu de caractres de la ressource lie. %Charset; href : URI de la ressource lie. %URI; media : pour laffichage sur un mdia prcis. %MediaDesc; target : afficher dans ce cadre (DTD Frameset). %FrameTarget; hreflang : code de langue. %LanguageCode; rel : type de lien avant. %LinkTypes; rev : type de lien arrire. %LinkTypes; type : type de contenu indicatif. %ContentType;

498 LE GUIDE COMPLET

lments et attributs HTML 4.01

MAP : image cliquable ct client

Chapitre 12

name : servant de rfrence usemap (obligatoire). CDATA

MENU : liste de menu (dconseill, DTD transitoire)

compact : espace entre lments rduit (dconseill). (compact)

META : mta-information gnrique

content : information associe (obligatoire). CDATA httpequiv : nom de len-tte de rponse HTTP. NAME name : nom de la mta-information. NAME scheme : slection dune 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 gnrique

align : alignement vertical ou horizontal (dconseill). %IAlign; archive : liste dURI spares par des espaces. CDATA border : largeur de la bordure du lien (dconseill). %Pixels; classid : identie une mise en uvre. %URI; codebase : URI de base pour classid, data, archive. %URI; codetype : type de contenu pour code. %ContentType; data : rfrence vers les donnes de lobjet. %URI; declare : dclaration dun drapeau sans linitialiser. (declare) height : hauteur doutrepassement. %Length; hspace : intervalle horizontal (dconseill). %Pixels; name : soumettre comme partie dun formulaire. CDATA standby : message afficher lors du chargement. %Text; tabindex : position dans lordre de tabulation. NUMBER type : type de contenu pour data. %ContentType; usemap : emploi dune carte image ct client. %URI; vspace : intervalle vertical (dconseill). %Pixels; width : largeur doutrepassement. %Length;
OL : liste ordonne

compact : rduction de lintervalle entre lments (dconseill). (compact) start : dbut du numro de squence (dconseill). NUMBER type : style de numrotation (dconseill). %OLStyle;

LE GUIDE COMPLET 499

Chapitre 12

Annexes

OPTGROUP : groupe doptions

disabled : indisponible dans ce contexte. (disabled) label : employ dans les menus hirarchiques (obligatoire). %Text;
OPTION : option pouvant tre slectionne

disabled : indisponible dans ce contexte. (disabled) label : employ dans les menus hirarchiques. %Text; selected : option prslectionne. (selected) value : par dfaut, le contenu de llment. CDATA
P : paragraphe

align : alignement du texte (dconseill). (left | center | right | justify)

PARAM : valeur de proprit nomme

name : nom de la proprit (obligatoire). CDATA type : type de contenu pour la valeur lorsque valuetype=ref. %ContentType; value : valeur de la proprit. CDATA valuetype : mode dinterprtation de la valeur. (DATA | REF | OBJECT)
PRE : texte prformat

width : (dconseill). NUMBER

Q : courte citation en ligne

cite : URI du document source ou message. %URI;

S : texte de style barr (dconseill, DTD transitoire) SAMP : exemple de sortie de programme, scripts, etc. SCRIPT : instructions de script

charset : jeu de caractres de la ressource lie. %Charset; defer : lagent utilisateur peut interrompre lexcution du script. (defer) language : nom de langage de script prdni (dconseill). CDATA src : URI dun script externe. %URI; type : type de contenu du langage de script (obligatoire). %ContentType;
SELECT : slecteur doption

disabled : indisponible dans ce contexte. (disabled)

500 LE GUIDE COMPLET

lments et attributs HTML 4.01

Chapitre 12

multiple : la valeur par dfaut est une slection simple. (multiple) name : nom du champ. CDATA onblur : llment a perdu le focus. %Script; onfocus : llment a obtenu le focus. %Script; size : lignes visibles. NUMBER tabindex : position dans lordre de tabulation. NUMBER onchange : la valeur de llment a t modie. %Script;
SMALL : texte en style diminu SPAN : conteneur de langue/style gnrique STRIKE : texte barr (dconseill, DTD transitoire) STRONG : emphase forte STYLE : informations de style

media : conu pour lemploi avec ces mdias. %MediaDesc; type : type de contenu du langage de style (obligatoire). %ContentType;
SUB : indice SUP : exposant TABLE : tableau

align : position relative du tableau dans la fentre (dconseill). %TAlign; bgcolor : couleur darrire-plan des cellules. %Color; border : contrle 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 parle. %Text; width : largeur du tableau. %Length;
TBODY : corps de tableau

align : alignement (dconseill). (left | center | right | justify | char) char : caractre dalignement, par exemple char=:. %Character;

LE GUIDE COMPLET 501

Chapitre 12

Annexes

charoff : dcalage pour le caractre dalignement. %Length; valign : alignement vertical dans les cellules. (top | middle | bottom |

baseline)
TD : cellule de donnes de tableau

abbr : abrviation pour les cellules den-tte. %Text; align : alignement (dconseill). (left | center | right | justify | char) axis : liste spare par des virgules den-ttes apparents. bgcolor : couleur darrire-plan dune cellule (dconseill). %Color; char : caractre dalignement, par exemple char=:. %Character; charoff : dcalage pour le caractre dalignement. %Length; colspan : nombre de colonnes fusionnes. NUMBER headers : liste dID des cellules den-tte. IDREFS height : hauteur de la cellule (dconseill). %Length; nowrap : suppression du retour la ligne automatique (dconseill). (nowrap) rowspan : nombre de lignes fusionnes dans une cellule. NUMBER scope : porte des cellules den-tte. %Scope; valign : alignement vertical dans les cellules. (top | middle | bottom | baseline) width : largeur de la cellule (dconseill). %Length;
TEXTAREA : champ texte lignes multiples

accesskey : touche daccs rapide. %Character; cols : nombre de colonnes (obligatoire). NUMBER disabled : indisponible dans ce contexte. (disabled) name : nom. #IMPLIED onblur : llment a perdu le focus. %Script; onchange : la valeur de llment a t modie. %Script; onfocus : llment a obtenu le focus. %Script; onselect : du texte a t slectionn. %Script; readonly : lecture seule. (readonly) rows : nombre de lignes (obligatoire). NUMBER tabindex : position dans lordre de tabulation. NUMBER
TFOOT : pied de tableau

align : alignement (dconseill). (left | center | right | justify | char) char : caractre dalignement, par exemple char=:. %Character; charoff : dcalage pour le caractre dalignement. %Length; valign : alignement vertical dans les cellules. (top | middle | bottom | baseline)
502 LE GUIDE COMPLET

lments et attributs HTML 4.01

TH : cellule den-tte de tableau

Chapitre 12

abbr : abrviation pour les cellules den-tte. %Text; align : alignement (dconseill). (left | center | right | justify | char) axis : liste spare par des virgules den-ttes apparents. CDATA bgcolor : couleur darrire-plan dune cellule (dconseill). %Color; char : caractre dalignement, par exemple char=:. %Character; charoff : dcalage pour le caractre dalignement. %Length; colspan : nombre de colonnes fusionnes par cellule. NUMBER headers : liste des ID des cellules den-tte. IDREFS height : hauteur des cellules (dconseill). %Length; nowrap : suppression du passage automatique la ligne (dconseill). (nowrap) rowspan : nombre de lignes fusionnes par cellule. NUMBER scope : porte des cellules den-ttes. %Scope; valign : alignement vertical dans les cellules. (top | middle | bottom | baseline) width : largeur des cellules (dconseill). %Length;
THEAD : en-tte de tableau

align : alignement (dconseill). (left | center | right | justify | char) char : caractre dalignement, par exemple char=:. %Character; charoff : dcalage pour le caractre dalignement. %Length; valign : alignement vertical dans les cellules. (top | middle | bottom | baseline)
TITLE : titre du document TR : ligne de tableau

align : alignement (dconseill). (left | center | right | justify | char) abbr : abrviation pour les cellules den-tte. %Text; bgcolor : couleur darrire-plan pour une ligne (dconseill). %Color; char : caractre dalignement, par exemple char=:. %Character; charoff : dcalage du caractre dalignement. %Length; valign : alignement vertical dans les cellules. (top | middle | bottom | baseline)
TT : texte de style tlscripteur, espacement xe U : texte soulign (dconseill, DTD transitoire)

LE GUIDE COMPLET 503

Chapitre 12

Annexes

UL : liste non ordonne (liste puces)

compact : rduction de lespace entre lments (compact) type : style de puces (dconseill). %ULStyle;
VAR : instance de variable ou argument de programme

(dconseill).

Attributs HTML 4.01

A

abbr : Abrviation pour cellule de rubrique. %Text;. lments TD et TH. acceptcharset : liste des jeux de caractres reconnus. %Charsets;. lment FORM. accept : liste de types MIME pour chargement dun chier sur le serveur. %ContentTypes;. lments FORM, INPUT. accesskey : touche daccs rapide %Character;. lments A, AREA, BUTTON, INPUT, LABEL, LEGEND, TEXTAREA. action : Obligatoire. Gestionnaire de formulaires ct serveur.%URI;. lment FORM. align : Alignement relatif au tableau. %CAlign;. lment CAPTION. align : alignement vertical ou horizontal (dconseill, DTD transitoire). %IAlign;. lments APPLET, IFRAME, IMG, INPUT, OBJECT. align : relativement au jeu de champs (dconseill, DTD transitoire). %LAlign;. lment LEGEND. align : position du tableau relativement la fentre (dconseill, DTD transitoire). %TAlign;. lment TABLE. align : alignement (dconseill, DTD transitoire). (left | center | right). lment HR. align : alignement du texte (dconseill, DTD transitoire). (left | center | right | justify). lments DIV, H1, H2, H3, H4, H5, H6, P. align : alignement (dconseill). (left | center | right | justify | char). lments COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR. alink : couleur des liens slectionns (dconseill, DTD transitoire). %Color;. lment BODY. alt : brve description (dconseill, DTD transitoire). %Text;. lment APPLET. alt : brve description. %Text;. lments AREA, IMG.

504 LE GUIDE COMPLET

lments et attributs HTML 4.01

Chapitre 12

alt : brve description. CDATA. lment INPUT. archive : liste darchives spares par des virgules (dconseill, DTD transitoire). CDATA. lment APPLET. archive : liste dURI spars par des espaces. CDATA. lment OBJECT. axis : liste des rubriques concernes spares par des virgules. CDATA. lments TD, TH.
B

background : mosaque de textures pour larrire-plan du document (dconseill, DTD transitoire). %URI;. lment BODY. bgcolor : couleur darrire-plan des cellules (dconseill, DTD transitoire). %Color;. lment TABLE. bgcolor : couleur darrire-plan des ranges (dconseill, DTD transitoire). %Color;. lment TR. bgcolor : couleur darrire-plan des cellules (dconseill, DTD transitoire). %Color;. lments TD,TH. bgcolor : couleur darrire-plan du document (dconseill, DTD transitoire). %Color;. lment BODY. border : paisseur du contour du tableau. %Pixels;. lment TABLE. border : paisseur de la bordure du lien (dconseill, DTD transitoire). %Pixels;. lments IMG, OBJECT.
C

cellpadding : espacement lintrieur des cellules. %Length;. lment TABLE. cellspacing : espacement entre les cellules. %Length;. lment TABLE. char : caractre dalignement, par exemple char=:. %Character;. lments COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR. charoff : dcalage du caractre dalignement. %Length;. lments COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR. charset : encodage de caractres de la ressource relie. %Charset;. lments A, LINK, SCRIPT. checked : pour les boutons radio et les cases cocher. (checked). lment INPUT. cite : URI du document ou message source. %URI;. lments BLOCKQUOTE, Q. cite : informations sur la raison du changement. %URI;. lments DEL, INS. class : liste de classes spares par des espaces. CDATA. Tous les lments sauf BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE et TITLE.
LE GUIDE COMPLET 505

Chapitre 12

Annexes

classid : identie une implmentation %URI;. lment OBJECT. clear : contrle lcoulement du texte (dconseill, DTD transitoire).(left | all | right | none). lment BR. code : chier de classe de lapplet (dconseill, DTD transitoire). CDATA. lment APPLET. codebase : URI de base pour les attributs classid, data, archive. %URI;. lment OBJECT. codebase : URI de base optionnel pour lapplet (dconseill, DTD transitoire). %URI;. lment APPLET. codetype : type de contenu de lattribut code. %ContentType;. lment OBJECT. color : couleur du texte (dconseill, DTD transitoire). %Color;. lments BASEFONT, FONT. cols : liste de longueurs, par dfaut : 100% (1 colonne) (DTD Frameset). %MultiLengths;. lment FRAMESET. cols : nombre de colonnes (obligatoire) (dconseill, DTD transitoire). NUMBER. lment TEXTAREA. colspan : nombre de colonnes couvertes par la cellule. NUMBER. lments TD, TH. compact : espacement inter-items rduit (dconseill, DTD transitoire).(compact). lments DIR, DL, MENU, OL, UL. content : informations associes (obligatoire). CDATA. lment META. coords : liste de longueurs spares par des virgules. %Coords;. lment AREA. coords : utiliser avec les images cliquables ct client. %Coords;. lment A.
D

data : rfrence aux donnes de lobjet. %URI;. lment OBJECT. datetime : date et heure du changement. %Datetime;. lments DEL, INS. declare : dclare mais ninstancie pas le drapeau. (declare). lment OBJECT. defer : lagent utilisateur peut diffrer lexcution du script. (defer). lment SCRIPT. dir : direction du texte faible/neutre. (ltr | rtl). Tous les lments sauf APPLET, BASE, BASEFONT, BDO, BR, FRAME, FRAMESET, IFRAME, PARAM, SCRIPT. dir : directionnalit (obligatoire). (ltr | rtl). lment BDO. disabled : indisponible dans ce contexte. (disabled). lments BUTTON, INPUT, OPTGROUP, OPTION, SELECT, TEXTAREA.

506 LE GUIDE COMPLET

lments et attributs HTML 4.01

E

Chapitre 12

enctype : type dencodage. %ContentType;. lment FORM.

F

face : liste de noms de police spars par des virgules (dconseill, DTD transitoire). CDATA. lments BASEFONT, FONT. for : correspond la valeur ID du champ. IDREF. lment LABEL. frame : quelles parties du contour restituer ? %TFrame;. lment TABLE. frameborder : bordures de cadre ou non ? (1 | 0). lments FRAME, IFRAME.
H

headers : liste des id des cellules de rubrique. IDREFS. lments TD, TH. height : hauteur du cadre (dconseill, DTD transitoire). %Length;. lment IFRAME. height : hauteur de la cellule (dconseill, DTD transitoire). %Length;. lments TD, TH. height : surclasser la hauteur. %Length;. lments IMG, OBJECT. height : hauteur initiale (obligatoire) (dconseill, DTD Transitoire). %Length;. lment APPLET. href : URI de la ressource relie. %URI;. lments A, AREA, LINK. href : URI qui fait office dURI de base. %URI;. lment BASE. hreflang : code de langue. %LanguageCode;. lments A, LINK. hspace : gouttire horizontale (dconseill, DTD transitoire). %Pixels;. lments APPLET, IMG, OBJECT. httpequiv : nom de len-tte de rponse HTTP. NAME. lment META.
I

id : identiant unique au document. ID. Tous les lments sauf BASE, HEAD, HTML, META, SCRIPT, STYLE, TITLE. ismap : utiliser une image cliquable ct serveur. (ismap). lments IMG, INPUT.
L

label : utiliser dans les menus hirarchiques. %Text;. lment OPTION. label : utiliser dans les menus hirarchiques (obligatoire). %Text;. lment OPTGROUP lang : code de langue. %LanguageCode;. Tous les lments sauf APPLET, BASE, BASEFONT, BR, FRAME, FRAMESET, IFRAME, PARAM, SCRIPT.
LE GUIDE COMPLET 507

Chapitre 12

Annexes

language : nom de langage de script prdni (dconseill, DTD transitoire). CDATA. lment SCRIPT. link : couleur des liens (dconseill, DTD transitoire). %Color;. lment BODY. longdesc : lien vers une description longue (en complment de lattribut alt). %URI;. lment IMG. longdesc : lien vers une description longue (en complment de lattribut title) (DTD Frameset). %URI;. lments FRAME, IFRAME.
M

marginheight : marges verticales en pixels (DTD Frameset). %Pixels;. lments FRAME, IFRAME. marginwidth : marges horizontales en pixels (DTD Frameset). %Pixels;. lments FRAME, IFRAME. maxlength : nombre de caractres maxi pour les champs de texte. NUMBER. lment INPUT. media : prvu pour ces mdias. %MediaDesc;. lment STYLE. media : pour restitution sur ces mdias. %MediaDesc;. lment LINK. method : mthode HTTP utilise pour soumettre le formulaire. (GET | POST). lment FORM. multiple : slection simple par dfaut. (multiple). lment SELECT.
N

name : nom. CDATA. lments BUTTON, TEXTAREA. name : permet aux applets de se trouver les uns les autres (dconseill, DTD transitoire). CDATA. lment APPLET. name : nom du champ. CDATA. lment SELECT. name : nom du formulaire pour les scripts. CDATA. lment FORM. name : nom du cadre pour le ciblage. (DTD Frameset). CDATA. lments FRAME, IFRAME. name : nom de limage pour les scripts. CDATA. lment IMG. name : extrmit du lien nomme. CDATA. lment A. name : soumettre comme partie du formulaire. CDATA. lments INPUT, OBJECT. name : pour appel par lattribut usemap (obligatoire). CDATA. lment MAP. name : nom de proprit (obligatoire). CDATA. lment PARAM. name : nom des mta-informations (obligatoire). NAME. lment META. nohref : cette rgion est inactive. (nohref). lment AREA. noresize : autoriser lutilisateur redimensionner le cadre ? (DTD Frameset). (noresize). lment FRAME. noshade : (dconseill, DTD transitoire). (noshade). lment HR.
508 LE GUIDE COMPLET

lments et attributs HTML 4.01

Chapitre 12

nowrap : suppression de la csure (dconseill, DTD transitoire). (nowrap). lments TD, TH.
O

object : chier dapplet srialis (dconseill, DTD transitoire). CDATA. lment APPLET. onblur : llment a perdu lattention. %Script;. lments A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA. onchange : la valeur de llment a chang. %Script;. lments INPUT, SELECT, TEXTAREA. onclick : le bouton dun pointeur a t cliqu. %Script;. Tous les lments sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE. ondblclick : le bouton dun pointeur a t double-cliqu. %Script;. Tous les lments sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE. onfocus : llment a reu lattention. %Script;. lments A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA. onkeydown : une touche est appuye. %Script;. Tous les lments sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE. onkeypress : une touche a t presse puis relche. %Script;. Tous les lments sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE. onkeyup : une touche est relche. %Script;. Tous les lments sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE. onload : tous les cadres ont t chargs (DTD Frameset). %Script;. lment FRAMESET. onload : le document a t charg. %Script;. lment BODY. onmousedown : le bouton dun pointeur a t appuy. %Script;. Tous les lments sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE. onmousemove : le bouton dun pointeur a t dplac lintrieur. %Script;. Tous les lments 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 dun pointeur a t dplac en dehors. %Script;. Tous les lments sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE. onmouseover : le bouton dun pointeur a t dplac sur. %Script;. Tous les lments sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE. onmouseup : le bouton dun pointeur a t relch. %Script;. Tous les lments sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE. onreset : le formulaire a t rinitialis. %Script;. lment FORM. onselect : un texte a t slectionn. %Script;. lments INPUT, TEXTAREA. onsubmit : le formulaire a t soumis. %Script;. lment FORM. onunload : tous les cadres ont t retirs (DTD Frameset). %Script;. lment FRAMESET. onunload : le document a t retir. %Script;. lment BODY.
P

profile : dictionnaire de mta-informations nomm. %URI;. lment HEAD. prompt : message dinvite (dconseill, DTD Transitoire). %Text;. lment ISINDEX.
R

Readonly : lecture seule. (readonly). lment TEXTAREA. readonly : pour les boutons de type text et passwd. (readonly). lment INPUT. rel : types de liens progressifs. %LinkTypes;. lments A,LINK. rev : types de liens rgressifs. %LinkTypes;. lments A, LINK. rows : liste de longueurs, par dfaut : 100% (1 range) (DTD Frameset). %MultiLengths;. lment FRAMESET. rows : nombre de lignes (obligatoire). NUMBER. lment TEXTAREA. rowspan : nombre de ranges couvertes par la cellule. NUMBER. lments TD, TH. rules : rgles entre ranges et colonnes. %TRules;. lment TABLE.
S

scheme : slectionner une forme de contenu. CDATA. lment META. scope : porte des cellules de rubrique. %Scope;. lments TD, TH. scrolling : barres de dlement ou non (DTD Frameset). (yes | no
510 LE GUIDE COMPLET

lments et attributs HTML 4.01

Chapitre 12

| auto). lments FRAME, IFRAME. selected : prslection. (selected). lment OPTION. shape : contrle linterprtation des coordonnes. %Shape;. lment AREA. shape : employer avec les images cliquables ct client. %Shape;. lment A. size : taille (dconseill, DTD Transitoire). %Pixels;. lment HR. size : taille de la police, [+|]entier, par exemple size="+1", size="4" (dconseill, DTD transitoire). CDATA. lment FONT. size : propre chaque type de champ. CDATA. lment INPUT. size : taille de police de base pour les lments FONT (obligatoire) (dconseill, DTD transitoire). CDATA. lment BASEFONT. size : ranges visibles. NUMBER. lment SELECT. span : Les attributs de llment COL affectent n colonnes. NUMBER. lment COL. span : nombre de colonnes par dfaut dans le groupe. NUMBER. lment COLGROUP. src : URI dun script externe. %URI;. lment SCRIPT. src : pour les champs avec des images. %URI;. lment INPUT. src : source du contenu du cadre (DTD Frameset). %URI;. lments FRAME, IFRAME. src : URI de limage incorporer (obligatoire). %URI;. lment IMG. standby : message montrer pendant le chargement. %Text;. lment OBJECT. start : numro commenant la squence (dconseill, DTD transitoire). NUMBER. lment OL. style : indications de style associes. %StyleSheet;. Tous les lments sauf BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE. summary : objet/structure pour sortie vocale. %Text;. lment TABLE.
T

tabindex : position dans lordre de tabulation. NUMBER. lments A, AREA, BUTTON, INPUT, OBJECT, SELECT, TEXTAREA. target : restituer dans ce cadre (DTD Transitoire). %FrameTarget;. lments A, AREA, BASE, FORM, LINK. text : couleur du texte du document (dconseill, DTD transitoire). %Color;. lment BODY. title : titre consultatif. %Text;. Tous les lments sauf BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, TITLE. type : type de contenu consultatif. %ContentType;. lments A, LINK.

LE GUIDE COMPLET 511

Chapitre 12

Annexes

type : type de contenu pour lattribut data. %ContentType;. lment OBJECT. type : type de contenu pour lattribut value quand valuetype=ref. %ContentType;. lment PARAM. type : type de contenu du langage de script (obligatoire). %ContentType;. lment SCRIPT. type : type de contenu du langage de style (obligatoire). %ContentType;. lment STYLE. type : le genre de gadget voulu. %InputType;. lment INPUT. type : style de litem de liste (dconseill, DTD transitoire). %LIStyle;. lment LI. type : style de numrotation (dconseill, DTD transitoire). %OLStyle;. lment OL. type : style de puces (dconseill, DTD transitoire). %ULStyle;. lment UL. type : utiliser comme bouton de formulaire. (button | submit | reset). lment BUTTON.
U

usemap : utiliser une image cliquable ct client. %URI;. lments IMG, INPUT, OBJECT.
V

valign : Alignement vertical dans les cellules. (top | middle | bottom | baseline). lments COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR. value : spcier pour les boutons radio et les cases cocher. CDATA. lment INPUT. value : par dfaut, le contenu de llment. CDATA. lment OPTION. value : valeur de proprit. CDATA. lment PARAM. value : envoy au serveur la soumission. CDATA. lment BUTTON. value : rinitialise le numro dans la squence (dconseill, DTD transitoire). NUMBER. lment LI. valuetype : comment interprter la valeur ? (dconseill, DTD transitoire). (DATA | REF | OBJECT). lment PARAM. version : une constante (dconseill, DTD transitoire). CDATA. lment HTML. vlink : couleur des liens visits (dconseill, DTD transitoire). %Color;. lment BODY. vspace : gouttire verticale (dconseill, DTD transitoire). %Pixels;. lments APPLET, IMG, OBJECT.

512 LE GUIDE COMPLET

Compatibilit XHTML/HTML
W

Chapitre 12

width : largeur (dconseill, DTD transitoire). %Length;. lment HR. width : largeur du cadre (DTD transitoire). %Length;. lment IFRAME. width : surclasser la largeur. %Length;. lments IMG, OBJECT. width : largeur du tableau. %Length;. lment TABLE. width : largeur de la cellule (dconseill, DTD transitoire). %Length;. lments TD, TH. width : largeur initiale (obligatoire) (dconseill, DTD transitoire). %Length;. lment APPLET. width : spcication de la largeur de colonne. %MultiLength;. lment COL. width : largeur par dfaut des lments COL contenus. %MultiLength;. lment COLGROUP. width : largeur (dconseill, DTD transitoire). NUMBER. lment PRE.

12.3. Compatibilit XHTML/HTML

Comme XHTML est une application XML, certaines habitudes parfaitement lgales dans le HTML 4 fond sur SGML doivent tre amendes.

Rdaction correcte des documents

La rdaction correcte est un nouveau concept introduit par XML. Il signie essentiellement quun lment doit toujours possder une balise de n ou tre crit selon une forme particulire (voir ci-dessous). En outre, tous les lments doivent tre imbriqus et non se chevaucher.
Tableau 12.2 : La rdaction correcte

CORRECT lments imbriqus

INCORRECT lments se chevauchant

<p>ceci est un paragraphe <em>avec emphase</em>.</p>

<p>ceci est un paragraphe <em>avec emphase.</p></em>

LE GUIDE COMPLET 513

Chapitre 12

Annexes

Noms des lments et des attributs en minuscules

Les documents XHTML doivent employer la casse minuscules pour tous les noms dlment HTML et les noms dattribut. Cette diffrence est ncessaire, car XML est sensible la casse (<li> et <LI> sont des balises diffrentes).

Balises de n obligatoires
Dans le HTML 4 fond sur SGML, il est possible domettre la balise de n de certains lments, llment suivant crant une balise de n implicite. Cette omission nest plus autorise dans le XHTML fond sur XML. Tous les lments autres que ceux dclars dans la DTD comme EMPTY doivent possder une balise de n.
Tableau 12.3 : XHTML : balise de n obligatoire

CORRECT lments termins

INCORRECT lments non termins

<p>Ceci est un paragraphe.</p><p> Ceci est un autre paragraphe.</p>

<p>Ceci est un paragraphe.<p>Ceci est un autre paragraphe.

Les lments vides doivent toujours possder une balise de n ou la balise de dbut se terminer avec />. Par exemple, <br/> ou <hr></hr>.
Tableau 12.4 : lments vides

CORRECT balises vides termines

INCORRECT balises vides non termines

<br/><hr/>

<br><hr>

Vous devez placer un espacement avant le / et > de n des lments vides, par exemple <br />, <hr /> et <img src="karen.jpg" alt="Karen" />. Utilisez galement une syntaxe minimale pour les lments vides, par exemple <br />, comme syntaxe alternative de <br></br> qui est autoris par XML, car cela donne des rsultats inattendus avec certains agents utilisateurs.
514 LE GUIDE COMPLET

Compatibilit XHTML/HTML

Chapitre 12

En cas toutefois doccurrence vide dun lment dont le modle de contenu nest pas EMPTY (par exemple, un titre ou un paragraphe vide), nutilisez pas la forme minimise : utilisez <p></p> et non <p />.

Encodage de caractres
Pour spcier lencodage de caractres dans le document, utilisez la spcication de lattribut dencodage dans la dclaration xml (par exemple <?xml version="1.0" encoding="EUCJP"?>) et une dclaration meta http-equiv (par exemple <meta httpequiv=
"Contenttype" content=text/html; charset="EUCJP" />). La valeur de lattribut dencodage de linstruction de traitement xml

est prioritaire.

Remarques sur les lments

lments script et style
En XHTML, les lments script et style sont dclars comme possdant un contenu de type #PCDATA. Ainsi, < et & seront-ils traits comme le dbut dun balisage, et les entits comme &lt; et &amp; seront-elles reconnues comme des rfrences dentits par le processeur XML, soit respectivement < et &. Emballer le contenu des lments script ou style lintrieur dune section marque CDATA vitera la transformation de ces entits.
<script> <![CDATA[ ... contenu script non echapp ... ]]> </script>

Les sections CDATA sont reconnues par le processeur XML et apparaissent comme des nuds dans le Modle 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 dliminer le contenu des commentaires. Par consquent, la pratique historique de cacher ses scripts et ses feuilles de style au sein dun commentaire pour rendre les documents compatibles avec les anciens navigateurs nest pas

LE GUIDE COMPLET 515

Chapitre 12

Annexes

conseille : elle ne fonctionnera pas comme attendu dans les mises en uvre bases sur XML.

lment isindex
Ne mettez pas plus dun lment isindex dans le head dun document. Llment isindex est abandonn en faveur de llment input.

Remarques sur les attributs

XML ne supporte pas la minimisation des attributs. La paire valeur/attribut doit tre crite au complet. Les noms dattributs tels que compact et checked ne peuvent pas tre pris comme lments sans que leur valeur soit spcie.
Tableau 12.5 : Valeur obligatoire

CORRECT attributs non minimiss

INCORRECT attributs minimiss

<dl compact="compact">

<dl compact>

Quelques agents utilisateurs HTML sont toutefois incapables dinterprter les attributs boolens quand ils apparaissent dans leur forme complte (non minimise), tels que requis par XML 1.0. Notez que ce problme naffecte 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 dattributs doivent tre mises entre guillemets, mme celles qui semblent tre numriques.
Tableau 12.6 : Guillemets impratifs

CORRECT valeurs dattributs entre guillemets

INCORRECT valeurs dattributs sans les guillemets

<table rows="3">

<table rows=3>

516 LE GUIDE COMPLET

Compatibilit XHTML/HTML

Chapitre 12

Dans les valeurs dattributs, les agents utilisateurs teront les espacements de dbut et de n des valeurs dattributs et dresseront une squence dun ou plusieurs caractres despacement (tels que les retours de lignes) un unique espacement intermots (un caractre despacement ASCII pour les critures occidentales). vitez les retours de ligne et les caractres despacement multiples au sein des valeurs dattributs. Ils seront traits illogiquement par les agents utilisateurs. Quand une valeur dattribut contient une perluette, lattribut doit tre exprim comme une rfrence dentit du caractre (par exemple &amp;). Par exemple, quand lattribut href de llment a pointe vers un script CGI qui accepte des paramtres, il doit tre exprim comme ceci :
http://my.site.dom/cgi-bin/myscript.pl?class=guest&amp;name=user

plutt que comme a :

http://my.site.dom/cgi-bin/myscript.pl?class=guest&name=user.

Attributs id et name
HTML 4 a dni lattribut name pour les lments a, applet, form, frame, iframe, img et map. HTML 4 a galement introduit lattribut id. Ces deux attributs ont t conus pour tre utiliss comme des identicateurs partiels. En XML, les identicateurs partiels sont de type ID, et il ne peut y avoir quun unique attribut ID par lment. En XHTML 1.0, lattribut id est aussi dni de type ID. Pour sassurer que les documents XHTML 1.0 sont des documents XML correctement structurs, les documents XHTML 1.0 doivent utiliser lattribut id quand lidenticateur partiel est dni, mme sur les lments qui possdent historiquement aussi un attribut name. En XML, un URI qui termine par un identicateur partiel de la forme
#foo ne se rfre pas aux lments possdant un attribut name="foo", mais aux lments possdant un attribut dni de type ID, soit lattribut id de HTML 4. Beaucoup de clients HTML existants ne maintiennent pas lutilisation des attributs de type ID de cette manire, donc des

valeurs identiques doivent tre fournies pour les deux attributs an dassurer des compatibilits ascendante et descendante maximales (par exemple, <a id="foo" name="foo">...</a>).
LE GUIDE COMPLET 517

Chapitre 12

Annexes

galement, depuis que lensemble des valeurs lgales dnies pour les attributs de type ID est bien plus restreint que pour ceux de type CDATA, le type de lattribut name a t chang en NMTOKEN. Cet attribut est contraint de manire ce quil ne puisse pas avoir dautres 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 exprime dans les DTD XHTML 1.0. cause de ces changements, la plus grande prcaution est de rigueur lors de la conversion de vos documents HTML existants. Les valeurs de ces attributs doivent tre uniques lintrieur dun document, valides, et toute rfrence ces identicateurs partiels (quils soient internes ou externes) doit tre mise jour, mme si les valeurs doivent tre changes durant la conversion. XHTML 1.0 a abandonn lattribut name des lments 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 spciez le langage dun lment. La valeur de lattribut xml:lang est prioritaire.

Exclusions SGML
SGML permet au rdacteur dune DTD dexclure la prsence de certains lments lintrieur dun lment. Une telle interdiction (appele exclusion ) nest pas possible en XML. Par exemple, la DTD HTML 4 stricte interdit lembotement dun lment a dans un autre lment a quelque profondeur que ce soit. Il nest pas possible de dnir ce type dinterdiction en XML. Mme si cette interdiction ne peut pas tre dnie dans la DTD, certains lments ne devraient pas tre embots.

Instructions de traitement
Vriez que les instructions de traitement sexcutent sur les agents utilisateurs. Si la dclaration XML nest pas incluse dans un document, le document peut uniquement employer les jeux de caractres par dfaut UTF-8 ou UTF-16.

518 LE GUIDE COMPLET

Compatibilit XHTML/HTML

Chapitre 12

Modle Objet de Document et XHTML

La Recommandation de Modle Objet de Document niveau 1 dnit les interfaces du Modle Objet de Document pour XML et HTML 4. Le Modle Objet de Document du HTML 4 spcie que les noms des lments et des attributs HTML sont retourns en casse majuscules . Le Modle Objet de Document XML spcie que les noms des lments et des attributs sont retourns dans la casse spcie. En XHTML 1.0, les noms des lments et des attributs sont spcis dans la casse minuscules . Cette diffrence apparente peut tre xe de deux manires :
j

Les applications qui accdent des documents XHTML distribus avec le type de mdia Internet text/html via le DOM peuvent utiliser le DOM HTML et sappuyer sur des noms dlments et dattributs retourns en majuscules par ces interfaces. Les applications qui accdent des documents XHTML distribus avec le type de mdia Internet text/html ou application/xml peuvent galement utiliser le DOM XML. Les noms des lments et des attributs sont renvoys en casse minuscules . Quelques lments XHTML peuvent ou non apparatre dans larbre dobjets, car ils sont facultatifs dans le modle de contenu (par exemple llment tbody lintrieur dun tableau table). Cela se produit parce quen HTML 4 quelques lments pouvaient tre minimiss et leurs balises de dbut et de n pouvaient tre toutes les deux omises (une fonctionnalit SGML). Ce nest pas possible en XML. Plutt que de demander aux auteurs de documents dinsrer des lments hors contexte, XHTML a rendu facultatifs les lments. Les applications ont besoin de sadapter en respectant cela.

Feuilles de style imbriques (CSS) et XHTML

La Recommandation des feuilles de style imbriques niveau 2 dnit les proprits appliques larbre danalyse grammaticale du document HTML ou XML. Les diffrences dans lanalyse produiront diffrents rsultats sonores ou visuels, selon les slecteurs utiliss. Les indicateurs suivants rduisent cet effet pour des documents distribus sans modication des deux types de mdias :
j

Les feuilles de style CSS pour le XHTML doivent employer des noms dlments et dattributs de casse minuscules .
LE GUIDE COMPLET 519

Chapitre 12
j

Annexes

Dans les tableaux, llment tbody sera dduit par le parseur dun agent utilisateur HTML, mais pas par le parseur dun agent utilisateur XML. Par consquent, vous devez toujours ajouter explicitement un lment tbody sil se rfre un slecteur CSS. Au sein de lespace de noms XHTML, les agents utilisateurs reconnaissent lattribut id comme un attribut de type ID. Par consquent, les feuilles de style doivent pouvoir continuer employer la syntaxe raccourcie # du slecteur mme si lagent utilisateur ne lit pas la DTD. Au sein de lespace de noms XHTML, les agents utilisateurs reconnaissent lattribut class. Par consquent, les feuilles de style doivent pouvoir continuer employer la syntaxe raccourcie . du slecteur. Les CSS dnissent des rgles de conformit diffrentes pour les documents HTML et XML. Les rgles HTML sappliquent aux documents XHTML distribus en tant que HTML, les rgles XML aux documents XHTML distribus comme XML.

DTD XHTML
Comme pour HTML, XHTML existe en trois parfums : strict, transitoire et jeux dencadrement. Ces trois versions sont respectivement dclares comme suit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

La variante frameset reprend tous les balises et attributs de la variante transitional. Deux balises ont t rajoute : frameset et frame.

Diffrences entre strict et transitional

Lanalyse des diffrences 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 sparation du contenu et de la prsentation. Cela implique donc la suppression de tous les lments et attributs de mise en forme, et lobligation de passer par les CSS.
520 LE GUIDE COMPLET

Compatibilit XHTML/HTML

Chapitre 12

Le Tableau B.1 prsente les lments devenus obsoltes en XHTML strict et leurs alternatives.
Tableau 12.7 : lments obsoltes en XHTML strict

lment

Alternative Utilisez la variante frameset du XHTML Utilisez la variante transitional du XHTML Utilisez les styles CSS font et ses drivs : fontfamily, fontsize, fontweight, etc. Style textdecoration : underline; Style textdecoration : linethrough; Ces balises ont en fait la mme fonction que ul ; seule lapparence par dfaut change. Remplacez-les par une liste ul et modiez lapparence avec les styles liststyle et leurs drivs (liststyletype, etc.), et ventuellement margin ou padding. Le style textalign : center; mettre sur llment parent pour centrer des lments de type en ligne. Sur les lments de type bloc, les styles suivants : marginleft : auto; marginright :

frameset, frame iframe font, basefont u s, strike menu, dir

center

auto; isindex applet

lment input lment object

Le Tableau suivant prsente les attributs devenus obsoltes en XHTML strict et leurs alternatives.
Tableau 12.8 : Attributs obsoltes en XHTML strict

Attribut

lments concerns

Alternative Style textalign sur llment parent pour aligner des lments de type en ligne. Sur des lments de type bloc, les styles suivants : marginleft, marginright.

Align

div, p, h1 h6, hr, object, img, input, legend, table, caption

LE GUIDE COMPLET 521

Chapitre 12

Annexes
Tableau 12.8 : Attributs obsoltes en XHTML strict

Attribut

lments concerns

Alternative Style backgroundimage, qui peut tre employ conjointement avec les styles backgroundposition et backgroundrepeat pour positionner et dnir la rptition de limage de fond. Il est possible dutiliser ces styles sur pratiquement tous les lments. Style backgroundcolor Style border Style clear Jouer sur les styles margin ou padding Style height Style margin Aucun. Lattribut type suffit : script

background

body

bgcolor border clear compact height hspace, vspace language

body, table, tr, td, th object, img Br Ul, ol, dl Td, th object, img script

type="text/javascript". link, alink, vlink body

Dnissez un style par dfaut sur llment a ainsi que sur les pseudo-classes :link , :visited et :active. Utilisez lattribut id Ensemble des styles border , en particulier borderstyle. Style whitespace : nowrap; Style height Utilisez les styles pour grer des compteurs Aucun

name Noshade

img, form hr

Nowrap Size start target

th, td hr Ol base, link, a, area, form

522 LE GUIDE COMPLET

DTD et XML
Tableau 12.8 : Attributs obsoltes en XHTML strict

Chapitre 12

Attribut

lments concerns

Alternative Style color Style liststyle Utilisez les styles pour grer des compteurs Style width

text type value width

body ul, ol, li li hr, pre, td, th

Remarquez par ailleurs que, au sein des lments form, noscript et blockquote , il ne peut plus y avoir dlments de type en ligne. Pour convertir rapidement et de faon correcte un document HTML en document au format XHTML, servez-vous de HTML Tidy ou de lditeur/navigateur Amaya.

12.4. DTD et XML

XML a recours un chier nomm DTD (Document Type Definition, dnition de document type) pour vrier quun document XML respecte une syntaxe donne. Une DTD constitue une grammaire qui permet de vrier la conformit du document XML. La norme XML nimpose pas lutilisation dune DTD pour un document XML, mais elle impose en revanche le respect exact des rgles de base de la norme XML. La terminologie XML emploie les dnitions suivantes :
j Document bien form j

pour un document qui ne comporte pas de DTD mais respecte les exigences de la spcication. Document valide pour un document qui se conforme strictement aux rgles dune DTD.

Une DTD peut tre dnie de 2 faons :

j De faon interne

: la grammaire est incluse au sein mme du

document.
j De faon externe

: soit en appelant un chier qui contient la grammaire partir dun chier local, soit en y accdant par son URL.
LE GUIDE COMPLET 523

Chapitre 12

Annexes

Cest cette dernire solution qui est adopte par les chiers HTML : HTML 4 tant fond sur XML, il repose sur des DTD. Vous lavez vu lors de lcriture de pages Web, puisque tout chier HTML dbute en principe par la spcication de la DTD employe :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

La prhistoire du dveloppement de sites Web a fait croire de nombreux concepteurs que le HTML pouvait scrire de manire assez libre, le navigateur se chargeant de rattraper les btises et dafficher la page tant bien que mal. Cest videmment totalement faux. Cela ntait d quau simple fait que les agents utilisateurs de lpoque taient non validants, incapables de grer correctement et totalement les spcications des langages Web. Cest pourquoi un concepteur doit encore se battre pour faire fonctionner un site dans les principaux navigateurs. Il est donc utile de sintresser un peu plus la structure dune 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 rfrence beaucoup plus rapide consulter que les longues spcications publies par le W3C. Elle indique clairement ce que le navigateur est en droit dattendre.

Dclaration dun lment

Pour pouvoir crer un document XML, il est utile dans un premier temps de dnir les lments qui peuvent tre employs, et plus exactement les informations que vous souhaitez utiliser. La dnition dun lment rpond la syntaxe suivante :
<!ELEMENT Nom Modle >

Le paramtre modle reprsente soit un type de donnes prdni, soit une rgle dutilisation de llment. Les types prdnis utilisables sont prsents dans le Tableau D.1.
Tableau 12.9 : Types prdnis pour un lment

Type prdni

Description Llment peut contenir tout type de donnes

ANY

524 LE GUIDE COMPLET

DTD et XML
Tableau 12.9 : Types prdnis pour un lment

Chapitre 12

Type prdni

Description Llment ne contient pas de donnes spciques Le contenu nest pas interprt par lagent utilisateur Llment doit contenir une chane de caractres. Ce contenu est interprt par lagent utilisateur.

EMPTY #CDATA #PCDATA

Autrement dit, un lment avec un contenu de type #PCDATA (parsed character data) verra ce contenu interprt par le navigateur, les balises ventuelles tant traites comme telles, tandis quavec #CDATA le contenu est considr comme une simple chane de caractres... Ainsi un lment nomm titre contenant un type #PCDATA sera dclar comme suit dans la DTD :
<!ELEMENT titre (#PCDATA) >

Ecriture de #PCDATA

Le mot-cl #PCDATA doit imprativement gurer entre parenthses. Vous obtiendrez sinon une erreur du parseur.

Cet lment pourra tre crit de la faon suivante dans le document XML :
<titre>Bible C++</titre>

Il est galement possible de dnir des rgles dutilisation : les lments XML quun lment peut ou doit contenir. Cette syntaxe se fait laide de notations spciques, prsentes dans le Tableau D.2 :
Tableau 12.10 : Oprateurs des rgles dutilisation dun lment

Oprateur

Exemple

Signication Llment a doit tre prsent au minimum une fois Llment a peut tre prsent plusieurs fois (ou aucune) Llment a est facultatif. Les lments a ou b peuvent tre prsents

+ * ? |

a+ a* a? a|b

LE GUIDE COMPLET 525

Chapitre 12

Annexes

Tableau 12.10 : Oprateurs des rgles dutilisation dun lment

Oprateur

Exemple

Signication Llment a doit tre prsent et suivi de llment

, ()

a,b (a,b)+

b
Regroupement dlments en vue de leur appliquer les autres oprateurs. Ici, la prsence dun lment a suivi dun lment b est obligatoire.

Vous pouvez ainsi crer la dclaration suivante dans une DTD :

<!ELEMENT <!ELEMENT <!ELEMENT <!ELEMENT <!ELEMENT livre (titre,editeur,auteur,date),url? > titre (#PCDATA) > editeur (#PCDATA) > auteur (#PCDATA) > url (#PCDATA) >

Cette dclaration 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>www.microapp.com </url> </livre>

ou bien :
<livre> <titre>La Bible C++</titre> <editeur>Micro Application </editeur> <auteur>Horstamn C, Budd T. </auteur> <date>2004</date> </livre>

Dclaration dattributs
Vous pouvez ajouter des proprits un lment particulier en lui affectant un attribut, cest--dire une paire cl/valeur. Avec XML, la syntaxe de dnition dun attribut est la suivante :
<! ATTLIST lment attribut type >

type reprsente le type de donne de lattribut. Il peut tre :

j

Littral : vous affectez une chane de caractres un attribut. Vous le dclarez ainsi laide du mot-cl CDATA.

526 LE GUIDE COMPLET

DTD et XML
j

Chapitre 12

numration : permet de dnir une liste de valeurs possibles pour un attribut donn, an de limiter le choix de lutilisateur. La syntaxe de ce type dattribut est :
<! ATTLIST lment attribut (valeur1 | valeur2 | ... ) >

Pour dnir une valeur par dfaut, faites suivre lnumration par la valeur dsire place entre guillemets :
<! ATTLIST lment attribut (valeur1 | valeur2 ) "valeur_par_dfaut" >

Atomique : permet de dnir un identiant unique pour chaque lment grce au mot-cl ID.

Chacun de ces types dattributs peut tre suivi dun mot-cl particulier qui permet de spcier le niveau de ncessit de lattribut :
j j j

#IMPLIED : lattribut est facultatif. #REQUIRED : lattribut est obligatoire. #FIXED : lattribut possde une valeur par dfaut sil nest pas dni. Il doit tre immdiatement suivi de la valeur place entre guillemets.

Une dclaration dattribut peut ainsi se prsenter comme ceci :

<! ATTLIST livre IDlivre ID #REQUIRED niveau(debutant|intermediaire|expert)"expert" >

Llment livre possde deux attributs IDlivre et niveau. Le premier attribut est de type atomique : cest un identiant unique obligatoire. Lattribut niveau peut tre dbutant, intermdiaire ou expert, cette dernire valeur tant affecte par dfaut.

Dclaration de notations
XML permet la dnition dune application par dfaut lancer pour ouvrir des documents non XML encapsuls dans le code XML. Il est ainsi possible dassocier les images JPG au programme Paint Shop Pro (psp.exe) grce la syntaxe suivante :
<! NOTATION jpg SYSTEM "psp.exe">

LE GUIDE COMPLET 527

Chapitre 12

Annexes

Dclaration dentits
XML permet de crer des entits, cest--dire de dclarer un groupe dlments sous un nom an de ne pas avoir rcrire ces derniers plusieurs fois dans la DTD sils se rptent, dans le mme esprit que les macros dans les diteurs de texte. Le recours des entits dans un document XML permet une meilleure lisibilit, un meilleur contrle du contenu et amliore la facilit de mise jour. XML possde plusieurs types dentits : les entits gnrales, les entits paramtres et les entits caractres.

Entits gnrales
Les entits gnrales servent dnir des lments pouvant tre substitus dans le corps du document XML (mme sils sont dnis au sein de la DTD et non du document XML lui-mme). La syntaxe dune entit gnrale est la suivante :
<!ENTITY nom_entite "Contenu de lentite">

Il est par exemple possible de dclarer lentit gnrale suivante dans la DTD :
<!ENTITY site "microapp.com">

Les entits dnies dans la DTD peuvent ainsi tre utilises dans le code XML en les appelant avec la syntaxe suivante :
&nom__entite;

La dclaration prcdente 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 entits contenues dans le code XML en chane de caractres :
<livre> <titre>La Bible C++</titre> <editeur>Micro Application </editeur> <auteur>Horstamn C, Budd T. </auteur>

528 LE GUIDE COMPLET

DTD et XML
<date>2004</date> <url>www.microapp.com</url> </livre>

Chapitre 12

Les entits gnrales peuvent aussi tre contenues dans un chier extrieur (an dtre utilises par plusieurs DTD, par exemple). Elles portent alors le nom dentits externes. La syntaxe dune entit externe est la suivante :
<!ENTITY nom_entite SYSTEM "nom_fichier">

Dans lexemple suivant, le contenu du chier niv.txt (situ dans le mme rpertoire que la DTD) sera insr dans le chier XML chaque fois que lentit &niv; sera rencontre :
<!ENTITY niv SYSTEM "niv.txt">

Entits paramtres
Une entit paramtre permet demployer des entits dans les DTD elles-mmes. La syntaxe est la suivante :
<!ENTITY % nom_entite definition>

Le nom de lentit doit toutefois respecter certaines rgles :

j j

Commencer par une lettre ou un trait de soulignement (underscore _). tre compos uniquement de lettres, de chiffres, de tirets (), de traits de soulignement (_), de points (.) ou du caractre deux points (:).

Voici un exemple de dclaration dentit paramtre :

<!ENTITY % niv #REQUIRED niveau(debutant|intermediaire|expert) "expert">

Il est galement possible (comme pour les entits gnrales) de dnir une entit paramtre externe grce la syntaxe suivante :
<!ENTITY % nom_entite SYSTEM "fichier.dtd">

La DTD fichier.dtd sera un chier comportant la dclaration dentit paramtre :

<!ENTITY % nom_entite "definition">

LE GUIDE COMPLET 529

Chapitre 12

Annexes

Entits caractres
Les entits caractres sont des caractres rservs du XML reprsents sous forme dentits gnrales an de pouvoir insrer ces caractres rservs dans le document XML. Les principales entits caractres sont prsentes dans le Tableau D.3.
Tableau 12.11 : Principales entits caractre

Entit caractre

Reprsentation & < > "

&amp; &lt; &gt; &apos; &quot;

Il est galement possible de dnir des entits caractres pour nimporte quel caractre en utilisant le code hexadcimal du caractre :
<!ENTITY nom_entite "&#xCODEHEXA;">

Par exemple :
<!ENTITY ccedille "&#x00E7;">

Mme si cette annexe peut sembler succincte, elle devrait vous permettre de mieux comprendre les DTD des spcications HTML 4.01 et XHTML 1.

12.5. Slecteurs CSS

La version 3 des slecteurs CSS (http://www.w3.org/Style/css3-selectors -updates/WD-css3-selectors-20010126.fr.html) propose des slecteurs nombreux et trs sophistiqus, capables de rpondre dsormais pratiquement toutes les situations. Les slecteurs sont classs dans le tableau suivant par ordre dapparition dans les versions CSS, an de montrer lvolution.

530 LE GUIDE COMPLET

Slecteurs CSS

Chapitre 12

Tableau 12.12 : Evolution des slecteurs CSS de la version 1 la version 3

Motif
E E:link/visited

Signication
Un lment de type E Un lment E dune ancre hypertexte dont la cible na pas encore t visite (:link) ou la t (:visited) Le premire ligne mise en forme dun lment E La premire letttre mise en forme dun lment E Un lment E dont la classe est warning . Le langage du document spcie le mode de dtermination de la classe. Un lment E dont lID est monid . Un lment F descendant dun lment E Un lment E pendant certaines actions de lutilisateur Nimporte quel lment Un lment E avec un attribut attribut Un lment E avec un attribut attribut dont la valeur est valeur

CCS
1 1

E::firstline E::firstletter E.warning

1 1 1

E#monid E F E:active/hover/focus * E[attribut] E[attribut="valeur"]

1 1 1 et 2 2 2 2 2

E[attribut~="valeur"] Un lment E avec un attribut attribut dont la valeur est une liste de valeurs spares par des virgules dont lune est gale valeur E:firstchild E:lang(fr) Un lment E, premier enfant de son parent Un lment E en langue fr . Le langage du document spcie le mode de dtermination de la langue Contenu gnr avant un lment E Contenu gnr aprs un lment E Un lment F enfant dun lment E Un lment F immdiatement prcd par un lment E

2 2

E::before E::after E > F E + F

2 2 2 2 3

E[attribut^="valeur"] Un lment E avec un attribut attribut dont la valeur commence exactement par la chane valeur

LE GUIDE COMPLET 531

Chapitre 12

Annexes

Tableau 12.12 : Evolution des slecteurs CSS de la version 1 la version 3

Motif

Signication

CCS
3

E[attribut$="valeur"] Un lment E dont la valeur de lattribut attribut se termine exactement par la chane valeur E[attribut*="valeur"] Un lment E dont la valeur de lattribut attribut contient la sous-chane valeur E[hreflang|="en"] Un lment E dont lattribut hreflang contient une liste spare par des tirets qui commence ( gauche) par en Un lment E racine du document Un lment E, n
ime ime

3 3

E:root E:nthchild(n) E:nthlastchild(n) E:nthoftype(n) E:nthlastoftype(n) E:lastchild E:firstoftype E:lastoftype E:onlychild E:onlyoftype E:empty E:target E:enabled/disabled E:checked E::selection

3 3 3 3 3 3 3 3 3 3 3 3 3 3 3

enfant de son parent

Un lment E, n enfant de son parent en partant du dernier Un lment E, nime descendant de ce type Un lment E, nime descendant de ce type partir du dernier Un lment E, nime dernier enfant de son parent Un lment E, premier descendant de ce type Un lment E, dernier descendant de ce type Un lment E, seul enfant de son parent Un lment E, seul descendant de ce type Un lment E dpourvu denfant (y compris tout nud texte) Un lment E cible de lURI Un lment dinterface utilisateur E activ ou dsactiv Un lment dinterface utilisateur E coch (bouton doption ou case cocher) La portion dun lment E actuellement slectionne/mise en surbrillance par lutilisateur Un lment E qui ne correspond pas au slecteur simple s Un lment F prcd par un lment E

E:not(s) E ~ F

3 3

532 LE GUIDE COMPLET

Ressources Web

Chapitre 12

Comme le montre ce tableau, les possibilits denrichissement dun contenu laide dune feuille de style sont dsormais extrmement riches. CSS permet en outre de combiner laide doprateurs les slecteurs simples, ce qui largit encore le champ des possibilits.

12.6. Ressources Web

De nombreuses autres ressources sont prsentes sur le Web : il est fortement recommand dy accder, car les ressources en ligne sont actualises plus frquemment que ne peut ltre cet ouvrage.

Spcications
Spcication HTML 4.01 : www.w3.org/TR/html401 (anglais), www.la-grange .net/w3c/html4.01/cover.html (franais). Spcication du Modle Objet de Document (DOM) : www.w3.org/TR /REC-DOM-Level-1/ Recommandation XHTML 1.0 : www.w3.org/TR/2002/REC-xhtml1-20020801/ (anglais), www.la-grange.net/w3c/xhtml1/ (franais). Site Web Unicode : www.unicode.org/

Outils de cration Web

Logiciel commerciaux
WebExpert : http://softwares.visicommedia.com/fr/products/webexpert/overview .html Adobe Golive : www.adobe.fr/products/golive/main.html Namo Web Editor : www.namo.com/products/webeditor.php HotDog Professional 7.0.1 : www.sausage.com/ WebFast : www.internetspirit.com/

Logiciels gratuits
1st Page 2000 : www.evrsoft.com/1stpage2.shtml Amaya : www.w3.org/Amaya/ Mozilla Composer : www.archilinux.org/mozilla/composer.html Tlchargement de la suite Mozilla : www.mozilla-europe.org/fr/ Netscape Composer : http://wp.netscape.com/communicator/composer/v4.0/
LE GUIDE COMPLET 533

Chapitre 12

Annexes

Nvu : http://frenchmozilla.sourceforge.net/nvu/ Le site principal anglais est www.nvu.com Un tutoriel trs complet couvrant linstallation, la conguration et lutilisation de Nvu (fond sur la version 0.9) est galement propos sur le site de Framasoft (www.framasoft.net/article2656 .html). SoThink HTML Editor (CutePage) : www.sothink.com/htmleditor/

Navigateurs
Internet Explorer : www.microsoft.com/france/internet/produits/ie/default.mspx Netscape Navigator : www.telechargement.netscape.fr/telechargement /netscape7/ Mozilla : www.mozilla-europe.org/fr/ Firefox : www.mozilla-europe.org/fr/products/Firefox/ Un excellent comparatif entre Internet Explorer et Firefox est propos ladresse http://emmanuel.clement.free.fr/navigateurs/comparatif.htm Opera : www.opera.com/ Camino : www.mozilla-europe.org/fr/ Lynx : un excellent tutoriel en franais peut tre trouv ladresse http://dominique.guebey.club.fr/tekno/lynx/index.htm La page officielle est http: //lynx.browser.org/ pwWebSpeak : une version de dmonstration de ce navigateur texteparole peut tre trouve ladresse www.prodworks.com

Images
Fonds dcran : www.atelier-duotang.com/tuiles/modeles/fonds.php?page=1 Ulead SmartSaver : www.ulead.com/webutilities/frwhere.htm Paint Shop Pro (129 $): www.jasc.com/products/paintshoppro/ The Gimp : http://gimp-win.sourceforge.net/ SRGB : un espace de couleur par dfaut standard pour Internet, version 1.10, M. Stokes, M. Anderson, S. Chandrasekar et R. Motta, 5 novembre 1996. www.w3.org/Graphics/Color/sRGB

Sites de gifs anims

dgif.legif.com/ www.yatoula.com/ www.icone-gif.com/ www.chez.com/gif/

534 LE GUIDE COMPLET

Ressources Web

Chapitre 12

www.01gif.com/ gif.webgratuit.com/

diteurs dimages animes

Microsoft Gif Animator (gratuit) : www.zdnet.fr/telecharger/windows/fiche /0,39021313,11010272s,00.htm A Smaller GIF (28 $) : www.peda.com/smaller/download.html Gif.gIf.giF (28 $) : www.peda.com/ggg/download.html Ulead GIF Animator 5 (49 $) : www.ulead.com Animated Shop/Paint Shop Pro (29/129 $) : www.jasc.com/products /paintshoppro/

Feuilles de style
Spcication CSS2 : www.w3.org/TR/REC-CSS2/cover.html#minitoc Proprits des feuilles de style CSS2 : www.w3.org/TR/REC-CSS2/propidx .html Spcications sur les rgles dhritage CSS2 : www.w3.org/TR/REC-CSS2 /cascade.html Le W3C a cr plusieurs styles basiques utiliser sur une page Web. Visitez www.w3.org/StyleSheets/Core/ Vous trouverez lensemble des proprits des feuilles de style auditives ladresse www.w3.org/TR/REC-CSS2/aural.html

Scripts
JavaScript
Pour commencer, visitez www.hotwired.com/webmonkey/javascript/ La JavaScript Source dInternet World se situe ladresse http://javascript .internet.com/ HotSyte (www.serve.com/hotsyte/) propose des ressources JavaScript, offrant de nombreux programmes tlchargeables. Il existe des dizaines de sites consacrs des exemples de code JavaScript, parmi lesquels www.toutjavascript.com, javascript.internet.com/, javascriptkit.com/, www.javascriptfr.com/ et bien dautres. Le groupe de discussion Usenet comp.lang.javascript est un bon endroit o poser des questions et obtenir les informations les plus fraches sur JavaScript.
LE GUIDE COMPLET 535

Chapitre 12

Annexes

Une foire aux questions (FAQ) JavaScript peut tre trouve ladresse http://idm.internet.com/faq/js-faq.shtml Une excellente ressource JavaScript est situe ladresse www .webreference.com/javascript

JScript
La page officielle du crateur Microsoft est http://msdn.microsoft.com /library/default.asp?url=/library/en-us/script56/html /js56jslrfjscriptlanguagereference.asp Vous trouverez dautres exemples aux adresses www.asp-fr.net/jscript/ et www.pageresource.com/jscript/ (entre autres). Vous pouvez trouver des milliers de scripts JavaScript ladresse www.javascripts.com

ECMA-Script
www.ecma-international.org/publications/standards/Ecma-262.htm

VBScript
La page officielle du crateur Microsoft se trouve ladresse http://msdn .microsoft.com/library/default.asp?url=/library/en-us/script56/html/vtorivbscript .asp Vous trouverez dautres exemples et tutoriels aux adresses www .intranetjournal.com/corner/wrox/progref/vbt/, www.asp-fr.net/vbscript/, www .asp-php.net/tutorial/scripting/index.php (entre autres).

Java
De nombreuses ressources de script sont disponibles ladresse www.irt .org/ Ce site propose dailleurs des ressources sur pratiquement tous les sujets abords dans ce livre. De nombreuses autres ressources Java, parmi lesquelles des applets, peuvent tre trouves ladresse www.developer.com/java/

Cookies
La foire aux questions (FAQ) Unofficial Cookie se trouve ladresse www.cookiecentral.com/unofficial_cookie_faq.htm

536 LE GUIDE COMPLET

Ressources Web

Chapitre 12

Modules complmentaires
Shockwave : www.macromedia.com/shockwave/download/download.cgi?P1 _Prod_Version=ShockwaveFlash Adobe Acrobat Reader : www.adobe.fr/products/acrobat/readstep2.html RealPlayer : http://france.real.com/player/?&src=ZG.fr.idx,ZG.fr.rp.rp.hd.def Ressources MIDI : www.midi.com QuickTime : www.apple.com/quicktime/download/win.html

Logiciels FTP
CuteFTP : www.cuteftp.com/cuteftp/ LeechFTP : http://stud.fh-heilbronn.de/~jdebis/leechftp/downloads.html. Ce produit, dont il existe une version franaise, va prochainement tre remplac par BitBeamer, du mme auteur. WS- FTP 95 : nombreux sites, dont www.sharewarejunkies.com/8zwd7 /ws_ftp_95_le.htm FileZilla : nombreux sites, dont le site officiel http://sourceforge.net/project /showfiles.php?group_id=21558. Vous pourrez tlcharger de nombreux autres clients FTP gratuits partir des adresses suivantes : www.01net.com/telecharger/windows/Internet/ftp/ www.tutoriels.com/downloads.php?id=57 www.jetelecharge.com/softs-49-1.php http://telecharger.presence-pc.com/categorie.asp?num=43&page=1 et bien dautres encore

LE GUIDE COMPLET 537

Glossaire

Chapitre 13

Glossaire

A
Accessibilit : Procurer un accs universel un site Web laide de

nimporte quel dispositif entre-sortie comme : reconnaissance vocale, lecteurs dcran ou interprteurs braille, dispositifs de pointage non standard et TTY.
ActiveX : Technique propritaire Microsoft permettant au navigateur

Web dincorporer et de contrler des applications dans une page Web.

Adresse IP : Numro unique utilis par les ordinateurs an de

sidentier sur Internet. Les utilisateurs se connectant par modem tlphonique possdent souvent des adresses IP dynamiques, an de minimiser le nombre dIP disponibles.
Alignement : Positionnement du contenu dune page par rapport aux

marges : gauche, droite ou centr.

Animation : Graphisme multiples images, un chier Shockwave ou

une applet danimation Java semblant sanimer lcran.

API (Application Programming Interface) : Dans un serveur Web, un

environnement de programmation permettant la rdaction de programmes intgrs pour des scripts ct serveur ou autres tches du serveur.
Applet : Miniprogramme, gnralement crit en Java, qui excute une application contenue dans une page Web. Application : Programme indpendant qui possde un but particulier. Un programme JavaScript, une applet Java ou mme un ensemble de pages Web peuvent constituer une application. Architecture : Combinaison dun microprocesseur et du matriel identiant un modle dordinateur (x86, SPARC, Macintosh, etc.). Archive : Un ou plusieurs chiers renfermant dautres chiers dans un but de sauvegarde ou de rfrence ultrieure. ASCII : Donnes en texte pur, ni codes ni compresses. Aspect : Combinaison des couleurs de document, des images et des outils de navigation confrant un site une image homogne.

540 LE GUIDE COMPLET

Chapitre 13
Assistant : Petit programme, le plus souvent incorpor un autre programme, automatisant une tche complexe ou guidant travers les tapes successives dun concept peu familier. Attribut : Inue sur un lment HTML. Un attribut dtermine les

proprits dun lment.

Attribut (dclaration d) : En XML, une dclaration dattribut dnit la faon dont les attributs peuvent tre utiliss et dans quels lments. Auditive (feuille de style) : Feuille de style en cascade (CSS) contenant

des proprits spciques aux navigateurs Web audio.

Autorisation : Permission de lire, dcrire ou dexcuter des chiers

accorde des individus, des groupes ou des utilisateurs anonymes. Voir aussi droit daccs.
Authentification de base : Nom dutilisateur et/ou mot de passe exigs pour pouvoir accder un chier ou un rpertoire, sans que la transaction (mot de passe compris) soit forcment crypte.

B
background : Utilis comme attribut pour llment BODY, il spcie

limage darrire-plan utiliser. En tant que proprit de feuille de style, il dtermine la couleur darrire-plan de llment dni.
Balise : Chane de caractres dbutant par < et nissant par >, qui ouvre

ou ferme un lment HTML.

Balise (diteur de type) : diteur affichant lcran les balises HTML alors que vous ditez votre page et possdant des raccourcis pour faciliter linsertion des diffrentes balises. Bande passante : Taux maximal de transfert dun lien. Barre doutils : Ensemble de boutons et dicnes dun programme donnant accs aux outils et fonctionnalits de celui-ci. Base de donnes : Un ou plusieurs chiers rassemblant des donnes individuelles, telles que les noms dun carnet dadresses ou les produits dun catalogue.

LE GUIDE COMPLET 541

Chapitre 13

Glossaire

Barre de navigation : Partie dune page Web donnant accs aux

diffrentes pages et/ou actions possibles sur un site Web.

Bien form : Terme appliqu un document respectant la spcication

laquelle il fait rfrence (XML surtout).

Binaire : Donnes codes ou compresses, telles que des images, des archives, des programmes ou tout chier non ASCII. Bloc (lment) : lment HTML qui insre un saut de ligne automatique

avant sa balise douverture et aprs sa balise de fermeture.

BODY : Corps du document : partie qui renferme le contenu visible dune

page.
Bote de dialogue : Fentre indpendante qui apparat pour poser une

question, ou servir dalerte ou davertissement lutilisateur. Une bote de dialogue exige en gnral une rponse avant dtre ferme.
Bordure : Ligne ou frontire autour dun lment tel quun tableau ou

une image.
Bouton (aspect) : Transformer une image en lui donnant lapparence dun bouton cliquable .

C
Cache : Emplacement du disque dur o le navigateur stocke les chiers

temporaires.
Cadre (frame) : Panneau individuel dans un jeu dencadrement (frameset) permettant de voir une seule page Web la fois. Caractres (jeu de) : Un jeu de caractres (charset) est lensemble des caractres et symboles utiliss dans un document. Par exemple, lalphabet japonais utilise un jeu diffrent de celui de lalphabet de lEurope de lOuest. Casse (sensibilit la) : Diffrence entre majuscules et minuscules. Cellule : Case individuelle dun tableau.

542 LE GUIDE COMPLET

Chapitre 13
CGI (Common Gateway Interface) : Interface de programmation qui

permet un utilisateur Web anonyme dexcuter un programme (tel un script Perl) sur le serveur.
Champ (de formulaire) : lment individuel qui rcupre une saisie de

lutilisateur.
Chiffrage : Fait de crypter les donnes an quelles ne puissent tre lues sans lapplication dun algorithme de dchiffrage prcis. Classe : Slecteur de feuille de style permettant dappliquer une dnition de style nimporte quel lment en utilisant lattribut facultatif class. Client : Partie utilisateur dune connexion rseau. Lordinateur ou le programme client ne gre que quelques connexions simultanment, toutes les connexions tant inities par lui-mme. Clip art : Image gratuite ou peu coteuse pouvant tre intgre tout

document. Vriez toujours les droits dauteurs et contraintes dutilisation avant dutiliser un quelconque clip art.
Code : Instructions sous-jacentes destines lordinateur. Le code

source HTML nest pas compil et peut facilement tre consult.

Codec : Code sous-jacent qui permet la lecture dun chier dun format prcis. Essentiellement employ pour les chiers son, image et vido. La majorit des codecs usuels sont intgrs aux logiciels concerns, mais il peut tre loccasion ncessaire de tlcharger un codec complmentaire. Colonne : Affichage vertical de donnes dans un tableau. Commentaire : Chane de caractres de type texte non affiche par le

navigateur Web.
Compatibilit inter navigateurs : Rendre un site Web compatible avec la

plupart, sinon tous les navigateurs Web, en gnral en nutilisant que les standards Web.
Compteur : Script ou SSI (Server Side Include) comptant et affichant le

nombre de touches reues par la page active.

LE GUIDE COMPLET 543

Chapitre 13

Glossaire

Compression : Utilisation dun algorithme pour rduire la taille dun

chier par limination des donnes redondantes. Largement employ pour les chiers image.
Concepteur : Professionnel du Web qui organise, rdige ou met en uvre un site Web. Contenu : Texte, images et chiers multimdias placs dans une page

Web.
Contenu (notation du) : Pratique consistant dcrire tout contenu

potentiellement agressif ou drangeant dans un lment META ou un commentaire an de procurer un contrle parental sur lexprience Web des enfants.
Contextuel (lment) : lment procurant des informations quant la

signication de llment marqu, et non uniquement sur la faon dont il doit tre affich.
Cookie : Petit chier qui stocke de petits bouts dinformations an daider 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 utiliss dans un document, tels quils sont dnis dans un lment (souvent BODY) ou dans une feuille de style. Courriel : Courrier lectronique. Message envoy rapidement et simplement sur Internet, laide du protocole SMTP (Standard Mail Transfer Protocol), grce un logiciel de messagerie lectronique.

D
Dfilement : Utilisation des touches de direction du clavier ou des barres

de dlement pour afficher les informations hors cran en raison des limites imposes par la taille de lcran, mais appartenant au document courant.
Dfinition (liste de) : Liste HTML possdant deux types de membres : le terme et sa dnition. Descripteur de mdia : Dans une feuille de style, le type de lagent utilisateur qui va afficher la page Web.

544 LE GUIDE COMPLET

Chapitre 13
Document Type Declaration (DOCTYPE) : Le DTD est un document

dnissant la faon dont les lments HTML doivent tre affichs, ainsi que les attributs correspondant ces lments.
DOM (Document Object Model) : Le Modle Objet de Document est un moyen de nommer les objets dun document an de pouvoir les utiliser dans un script. Donne : Information, gnralement transmise ou stocke dans un

ordinateur.
Droit daccs : Permission de lire, dcrire ou dexcuter des chiers, accorde des individus, des groupes ou des utilisateurs anonymes. Dynamique (HTML) ou DHTML : Rend HTML dynamique et modiable

laide de langages de script et du DOM. Dsormais dconseill.

E
ECMAScript : Tentative de normalisation du langage de script employ

avec HTML. Correspond un tronc commun entre JavaScript et JScript.

Elment : Conteneur HTML qui possde une signication particulire

pour un document.
Elment (dclaration) : En XML, dclarer un lment et son utilisation dans le DTD. Email : Voir courriel. En ligne : Fait dtre connect Internet. En HTML, caractrise galement un lment qui sinsre la suite du prcdent et avant le suivant sans insertion de saut de ligne. En-tte HTTP : Information envoye automatiquement avec un document Web lors du transfert HTTP. Il peut contenir le nom du chier, sa date, sa taille, ainsi que toute information mentionne dans des lments META.

Enfant (lment) : Tout lment inclus dans un autre lment HTML.

LE GUIDE COMPLET 545

Chapitre 13

Glossaire

Entit (dclaration) : En XML, dclarer un objet comme devant tre remplac par un chier externe ou par une donne frquemment utilise, comme une adresse lectronique ou des informations de droits dauteur. Espace vierge : Espace inutilis autour du texte ou dune image dans un programme de PAO ou la publication Internet. En HTML, certains caractres sont interprts, comme les retour-chariot, les tabulations et les espaces excdentaires. Exposant : Texte ottant au-dessus de la ligne normale de texte.

F
FAI : Fournisseur daccs Internet. Correspond langlo-saxon ISP (Internet Service Provider). FAQ (Foire aux questions ou Frequently Asked Questions) : Un chier

daide se prsentant sous la forme dune suite de questions/rponses.

Favoris : Ensemble de chiers utiliss par Internet Explorer pour

enregistrer les adresses des sites frquemment visits. Correspond aux signets Netscape/Firefox.
Feuille de style : Fichier ou partie de document Web dcrivant la faon

dafficher des lments HTML individuels dans un navigateur Web.

Firefox : La nouvelle gnration du navigateur Web Mozilla. Formulaire : En HTML, un lment permettant aux utilisateurs de saisir des donnes traites par la suite via un script ct client ou un

programme CGI.
Frquentation : Le nombre et le type des visites sur un site. Frameset : Jeu dencadrement qui apparat dans un navigateur et permet de visualiser simultanment plusieurs pages Web. FTP (File Transfer Protocol) : Protocole standard pour le transfert de chiers en tous sens sur un rseau. Fonction : En programmation, un fragment de programme renfermant

une srie dinstructions, pouvant ensuite tre appel ou utilis plusieurs reprises dans le programme.

546 LE GUIDE COMPLET

Chapitre 13

G
Gadget : Objet miniature offrant diverses fonctionnalits. Cest le nom

donn par Google ses widgets.

GIF : Format de chier graphique bien adapt aux images simples. Glisser-dposer : Fait de cliquer sur un objet avec le bouton gauche,

puis de dplacer la souris en laissant le bouton enfonc et de dposer ensuite lobjet (en relchant le bouton) un autre emplacement de lcran.
Google : lorigine un simple mais trs performant moteur de

recherche, aujourdhui un groupe qui propose de nombreux produits et solutions aux internautes (Google Maps, Google Search, Google Earth, Google Gadgets, etc)
Google Analytics : Systme de suivi de la frquentation dun site, propos par Google. GUI (Graphical User Interface) : Linterface graphique utilisateur est la

partie graphique dun programme qui, le plus souvent laide de fentres et de botes de dialogue, permet de contrler 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-ttes) constituent un moyen tant

visuel que structurel dorganiser et de prsenter un document.

HEAD : lment dun document qui renferme des informations sur la

page, mais pas de contenu visible.

Hit : Terme anglophone qui correspond une visite sur un site. Hbergement Web : Fait davoir recours un serveur Web qui appartient une tierce personne pour rendre un site Web disponible sur Internet. Votre hbergeur est gnralement votre FAI. Hte : Nom dun ordinateur ou dun programme sur un domaine,

comme le www de www.domain.com ou local2 dans local2.domain.com

LE GUIDE COMPLET 547

Chapitre 13

Glossaire

HTML (Hypertext Markup Language) : Ensemble des lments identis

qui indique lagent utilisateur comment afficher ces lments et les informations dune page Web.
HTTP (Hypertext Transfer Protocol) : Protocole employ par les

ordinateurs lors du transfert de documents Web (http://).

I
Icne : Petite image aidant la navigation ou apportant une signication

accrue au texte.
ID : Slecteur de feuilles de style devant tre unique lintrieur dune page Web, et pouvant utiliser nimporte quel style. Image cliquable : Une mme image comportant plusieurs liens

hypertextes.
Imbriquer : Placer un lment HTML lintrieur dun autre lment.

Frquemment utilis pour des lments identiques, tels que listes et tableaux. Certains lments ne peuvent tre imbriqus.
Indice : Texte plac en dessous de la ligne normale de texte. Input : Accepter des donnes partir dun site Web, en gnral via un

champ de formulaire.
Interactivit : Accepter des saisies utilisateur et y rpondre de faon

dynamique.
Internationalisation : Rendre un site accessible dautres langues et

cultures. galement nomm localisation.

Internet : Rseau international et publiquement disponible dordinateurs

utilisant des protocoles standard rseau pour communiquer et transfrer des informations.
Internet Explorer : Le navigateur Web Microsoft intgr aux systmes dexploitation Windows. Intranet : Rseau priv interne, souvent plac labri dun pare-feu.

548 LE GUIDE COMPLET

Chapitre 13
ISP (Internet Service Provider) : Fournisseur daccs Internet (FAI) : la

socit ou lorganisation qui procure laccs Internet un individu ou une socit.

J
Java : Langage de programmation complet et compatible entre platesformes dvelopp par Sun Microsystems. JavaScript : Langage de scripts ct client dvelopp par Netscape. Journal : Fichier denregistrement dvnements prcis. Par exemple,

chaque accs un site Web : les chiers concerns et dautres informations telles que lheure, la date et ladresse IP de chaque client.
JPEG : Format de chier graphique particulirement adapt aux images

complexes (photographies).
JScript : Implmentation Microsoft de JavaScript : JScript et JavaScript ne sont pas 100 % compatible entre eux.

L
Libre (source) : Tout programme technique ou bibliothque dont le code

source est librement disponible sous forme non compile, gnralement an de permettre le dveloppement 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, lutilisateur voit son navigateur Web ouvrir la ressource correspondant au lien.
Lien (vrification de) : Utilisation dun outil Web pour vrier tous les

liens dune page Web et sassurer quils sont valides.

Ligne : Donnes affiches horizontalement dans un tableau. Ligne (lment) : lment nentranant pas de saut de ligne ni de rupture de paragraphe lors de sa fermeture. Localisation : Rendre le site accessible une langue ou une culture

particulire.

LE GUIDE COMPLET 549

Chapitre 13

Glossaire

M
Masqu (champ) : Champ de formulaire non visible par lutilisateur, mais nanmoins transmis avec les autres champs de donnes. mailto: : Protocole utiliser la place de http:// pour crer un lien de

messagerie.
Marge Espace autour de lextrieur dun lment. META : lment HTML procurant des informations complmentaires

telles quen-ttes HTTP, date de rafrachissement ou dexpiration de chiers, noms des auteurs, mots-cls et tout autre contenu possible.
Mthode (de formulaire) : Faon dont les donnes du formulaire sont transmises au serveur : GET ou PUT. Modle : Document prconu dans lequel il suffit de remplir les

blancs pour obtenir un document utile et agrable.

Module complmentaire : Application tierce installe dans une autre application comme programme intgr, tels Shockwave ou Acrobat Reader. galement nomm plug-in. Mot de passe : Mot, expression ou chane de caractres secrets permettant de vrier que vous tes celui que vous dclarez tre. Moteur de recherche : Site Web ou programme dressant le catalogue et

indexant les sites Web, puis autorisant les utilisateurs rechercher un site particulier laide dun mot-cl, dune description ou dautres critres.
Mozilla :

Prcurseur de Netscape Navigator, et maintenant un mouvement pour les navigateurs source libre, qui a notamment cr Firefox et Thunderbird.

Multimdia : Combinaison quelconque de textes, graphismes, chiers audio ou vido et pages de ralit 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 dplacer sur le site. Netscape Communicator : Ensemble de navigation Web dvelopp et distribu par Netscape Corporation. name : En HTML, attribut optionnel qui permet normalement

nimporte quel lment de gurer dans un script.

Nom dutilisateur : Nom qui permet didentier un compte utilisateur en

ligne.

Une

adresse

lectronique

revt

souvent

la

forme

nomutilisateur@nomhote.domaine.com.
Nom de domaine : Identiant unique sur Internet permettant la

connexion un ordinateur individuel.

Nom rserv : En programmation, un mot qui ne peut tre employ comme variable ou nom de fonction parce quil possde dj une signication particulire dans le langage de programmation. Non ordonne (liste) : Liste puces. Non proportionnelle (police) : Police de caractres conservant un espacement constant quelle que soit la largeur relle 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 dune faon sensiblement diffrente des navigateurs les plus courants, Firefox et Microsoft Internet Explorer. Note de fin : Note ou commentaire plac la n dun document. Note de pied de page : Note ou commentaire plac la n dune page

Web.

O
Objet : lment numr dans le Modle Objet de Document (DOM),

utilis ou manipul par un script ct client.

Objet incorpor : Tout chier (le plus souvent multimdia) utilisant

llment OBJECT pour tre plac dans un document Web.

LE GUIDE COMPLET 551

Chapitre 13

Glossaire

Open source : Voir source libre. Ordonne (liste) : Liste numrote.

P
Page Web : Page individuelle rdige en HTML. Palette : Ensemble des couleurs disponibles dans tout programme

ddition graphique.
Pare-feu : Combinaison de matriel et de logiciels place entre deux rseaux (par exemple, un rseau interne et Internet) an de limiter les transactions ce qui est autoris. Parent (lment) : lment renfermant ou contrlant (dans un script) un

autre lment.
Passage la ligne : Ce qui se passe lorsque lextrmit dun texte atteint

la limite droite de lespace de visualisation, dans une fentre ou une zone de saisie.
Perl : Langage de programmation non compil aussi simple que rpandu, utilis pour les scripts CGI. Pixel : Plus petit lment adressable dun cran. Plate-forme : Combinaison de larchitecture (matriel) et du systme

dexploitation (logiciel) rendant un environnement informatique unique (Windows NT sur Intel et Windows NT sur DECAlpha, par exemple).
Plug-in : Voir complment. Police : Aspect visuel des caractres dun texte. Positionnement : La faon de placer lcran des objets par rapport au

coin suprieur gauche de lcran (positionnement absolu) ou par rapport dautres objets (positionnement relatif).
Prfrences : Dans un navigateur Web, le menu utilis pour dnir les couleurs de police, la page de dmarrage, les identits de messagerie et de groupes de discussion, les dispositifs de scurit et autres options.

552 LE GUIDE COMPLET

Chapitre 13
Prsentation : Positionnement visuel des paragraphes de texte, dimages et dautres lments dun document. Propritaire : Technique ou programme au dveloppement trs ferm.

Une licence doit tre acquise par tout utilisateur potentiel dune telle technique propritaire. Ces techniques ne sont valides par aucun comit de standardisation.
Proxy (serveur) : Serveur effectuant la connexion votre place, puis renvoyant le rsultat. Souvent utilis dans des coupe-feu et pour procurer des services de cache de grands rseaux.

R
Remplissage : Espace entre la bordure dun lment (sil en possde une) et le contenu de llment (texte, image ou chier incorpor). Rseau : Ensemble dordinateurs relis laide de protocoles rseau identiques, tels que TCP/IP (pour Internet). Rsolution : Nombre de pixels, exprim en largeur x hauteur, pouvant

tre affichs par un cran.

RGB (valeurs) : Valeurs respectives de rouge, vert et bleu dnissant une

couleur en HTML.

S
Sans serif (police) : Polices comme Arial et Helvetica, dpourvues

de serifs, les petites lignes en bas des bras et des jambes des lettres (le pied dun l , par exemple).
Script : Petit programme pouvant effectuer un nombre illimit dinstructions. Scripting : Application dun script un lment HTML dans un script

ct client tel que JavaScript.

Scuris (serveur) : Serveur Web utilisant SSL (Secure Socket Layer) ou

une autre mthode de codage pour protger tous les changes de donnes entre lui et ses clients.

LE GUIDE COMPLET 553

Chapitre 13

Glossaire

Scurit (zones de) : Dans Microsoft Internet Explorer, une zone de scurit est une rgion, comme un rseau local, un intranet ou Internet, laquelle vous appliquez des consignes de scurit particulires. Serif (police) : Polices comme Times New Roman et Times, dotes de

petites lignes au bout des jambages des lettres (comme le pied dun l , par exemple).
Site Web : Ensemble de pages Web relies par des liens hypertextes et

gnralement maintenu par un individu ou un groupe.

Surveiller : Conserver une veille constante sur la disponibilit, le temps de rponse et le trac dun site Web. Serveur : Dans une transaction rseau, le serveur gre de nombreuses

connexions manant de nombreux ordinateurs diffrents, pour transfrer les informations dun endroit un autre.
SGML (Standard Generalized Markup Language) : Mthode de description

de langages balises devant procurer une information visuelle, structurale et syntaxique du contenu dun document. Ne sapplique pas forcment au Web, ni mme un document lectronique.
Signet : Avec Netscape et Firefox, un site frquemment visit dont vous enregistrez lURL dans un chier sur votre disque. Lquivalent dun Favori Internet Explorer. Signet interne : En HTML, un lien hypertexte menant vers une destination interne la page. Sortie (output) : Donnes ou rsultat renvoy aprs quun utilisateur a

demand une information un serveur Web. Se rfre gnralement une requte.

Source : Voir code. Spcifique navigateur : lment et/ou fonctionnalit ne fonctionnant que sur une famille de navigateurs et nappartenant pas aux standards Internet. Spam : Pourriel. Message lectronique non sollicit, en gnral de

nature commerciale, envoy des gens nayant rien demand et ne souhaitant pas les recevoir.

554 LE GUIDE COMPLET

Chapitre 13
Spcification : Description de la mise en uvre dune technique. La

spcication HTML dcrit la mise en uvre prconise de HTML dans un navigateur Web an que les auteurs Web puissent sen servir efficacement.
SSI (Server-Side Includes) : Mthode ct serveur qui permet linclusion

de donnes, chiers et informations dans une page Web avant leur affichage dans le navigateur Web.
SSL

(Secure Sockets Layer) : Standard de scurit pour les communications TCP/IP, le plus souvent employ avec HTTP.

Systme dexploitation : Logiciel fournissant tous les services de base, tel laccs aux ressources matrielles, la mmoire, au processeur et aux autres programmes. Style (proprit) : Caractristique individuelle dun lment HTML modi ou dni laide dune feuille de style externe ou interne, ou de lattribut style. Style (slecteur) : Attribut HTML (ID ou class) appliquant des

proprits de style llment contenant lattribut sans changer llment.

Submit (bouton) : Champ de formulaire envoyant les donnes du formulaire vers un script. Syntaxe : Faon particulire de rdiger le code source an quil soit

comprhensible par un ordinateur.

T
Tableau : Quadrillage permettant dafficher des donnes plus efficacement en lignes et en colonnes. galement utilis dans un simple but de prsentation. TCP/IP (Transmission Control Protocol/Internet Protocol) : Utiliss conjointement, ils constituent la forme primaire de transmission de donnes sur Internet. IP dnit le format des paquets de donnes envoys tandis que TCP gre le rassemblement des paquets larrive et la rcupration des donnes perdues.

LE GUIDE COMPLET 555

Chapitre 13

Glossaire

Tlchargement (download) : Transfert des donnes depuis un ordinateur distant sur votre propre ordinateur. Tlchargement (upload) : Transfert de donnes ou de chiers 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 naffiche que du texte : pas

dimage, de contenu multimdia ni mme souvent de tableaux.

Thunderbird : Le nouveau logiciel de messagerie open source de

Mozilla.
Touche (hit) : Accs vers une page Web. Correspond en gnral un accs vers la page elle-mme, pas vers les images quelle contient. Trafic : Portion de bande passante utilise par le rseau un moment

prcis. Un trac important sur votre serveur signie de nombreuses touches, mais galement des connexions ralenties.
TWAIN (compatible) : Scanner, camra, appareil photo ou tout autre

dispositif dentre compatible avec le standard TWAIN.

U
Unicode : Le systme de codication de caractres permettant lemploi lectronique de toutes les langues mondiales. URI (Uniform Resource Identifier) : Connu auparavant sous le nom

dURL, cest lemplacement dun document ou dun chier sur Internet.

URL (Uniform Resource Locator) : Adresse didentication dune ressource Internet (le plus souvent une page Web). Url (codication) : Mthode de codication de caractres spciaux telles les barres obliques (slashes) dans une adresse URL an quun serveur, ou un autre programme, puisse les comprendre. Utilisateur : Individu accdant un site Web ou utilisant un programme.

556 LE GUIDE COMPLET

Chapitre 13
Uuencode : Connu initialement sous le nom de UNIX-to-UNIX Copy,

cest une faon de transformer un chier binaire en texte dans le but de le transfrer laide dun programme texte seul, tel un client de messagerie lectronique.

V
Valeur : Dans un lment HTML, les attributs possdent le plus souvent

une valeur qui modie le comportement de llment.

Validation : Excuter un programme pour sassurer 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 rfrence (XML principalement). Variable : Dans un programme ou un script, un emplacement nomm o

des donnes peuvent tre stockes et rcupres selon les besoins des programmes.
VBScript : Un langage de script conu par Microsoft similaire par sa syntaxe Visual Basic. Vignette : Image rduite en taille, qui acclre le tlchargement. Utilis pour les catalogues dimages et les aperus. galement nomme miniature .

W
W3C (World Wide Web Consortium) : le groupe de travail sur les

standards lorigine des recommandations Web tels HTML, CSS et XML.

WebTV : Technique en dveloppement permettant aux utilisateurs de surfer sur Internet laide dune tlvision plutt que dun ordinateur. Widget : Contraction de windows gadget correspondant un dispositif graphique affich lcran. Ce terme est dsormais rserv un objet miniature, gnralement programm en JavaScript, qui accomplit des fonctions particulires.

LE GUIDE COMPLET 557

Chapitre 13

Glossaire

World Wide Web ou WWW : Ensemble des ressources Web prsentes sur

Internet.
WYSIWYG (What You See Is What You Get) : Tel cran, tel crit : diteur dans lequel vous ditez un document tout en pouvant lexaminer sous laspect exact quil aurait sous un navigateur.

X
XML (eXtensible Markup Language) : Sur-ensemble de HTML autorisant lapplication de diffrentes dnitions 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, lment ........................................................................... 59, 492 Abbr, attribut ............................................................................. 441 ABBR, lment .................................................................... 151, 492 Accept, attribut ........................................................................... 341 Accept-charset, attribut ................................................................. 340 Accessibilit .............................................................................. 438 Accesskey, attribut ....................................................................... 366 ACRONYM, lment ............................................................. 151, 492 Action, attribut ........................................................................... 340 ADDRESS, lment .............................................................. 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 numrique .............................................................. 235 Applet ............................................................................... 424, 492 APPLET, lment ................................................................. 155, 426 AREA, lment .................................................................... 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 llment IMG ..................................................................... 224 de llment OBJECT .......................................................... 233, 426 de llment 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
304 386 231 194 452

title ................................................................................ 196, type ................................................... 74, 76, 226, 287, 305, 343, usemap .................................................................................. width ........................................................................ 104, 124, Axis, attribut .............................................................................

B
B, lment .......................................................................... 164, 493 Background, attribut .................................................................... 187 Balise ....................................................................................... 22 BASE, lment .................................................................... 264, 493 BASEFONT, lment ............................................................. 165, 493 BDO, lment ...................................................................... 463, 493 Bgcolor, attribut .......................................................................... 184 BIG, lment ....................................................................... 164, 493 Bloc-notes .................................................................................. 34 BLOCKQUOTE, lment ........................................................ 143, 493 BODY, lment ..................................................................... 53, 493 Border, attribut ............................................................................ 95 BR, lment .......................................................................... 65, 493 BUTTON, lment ................................................................ 350, 494

C
Calculatrice ............................................................................... 182 CAPTION, lment ................................................................. 93, 494 Caractre encodage de ............................................................................ 157 langues et jeux de ..................................................................... 465 non affichable .......................................................................... 163 spciaux .......................................................................... 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 crer ..................................................................................... 143 imbriquer ............................................................................... 145 Cite, attribut .............................................................................. 143
562 LE GUIDE COMPLET

Index

Chapitre 14

CITE, lment ............................................................... 143, 155, 494 Class, attribut ............................................................................. 140 CNIL (Commission Nationale Informatique et Libert) ........................... 375 Code source afficher ................................................................................... 52 CODE, lment .................................................................... 152, 494 Codebase, attribut ....................................................................... 226 COL, lment ...................................................................... 122, 494 COLGROUP, lment ............................................................ 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 modier dans un lment ............................................................ 183 modier dans un tableau ............................................................. 184 modier le schma de ................................................................ 178 modier pour une cellule de tableau ............................................... 184 noms et valeurs RGB ................................................................ 177 prcautions prendre ................................................................. 184 Crer bloc de texte comme pr-formatt ................................................. 141 citation .................................................................................. 143 commentaire HTML .................................................................. 137 couleurs ................................................................................. 177 GIF anim .............................................................................. 199 image ................................................................................... 190 image cliquable ........................................................................ 214 image darrire-plan .................................................................. 187 jeu dencadrement .................................................................... 245 lien hypertexte .......................................................................... 59 ligne horizontale ...................................................................... 136 liste puce .............................................................................. 75 liste de dnitions ...................................................................... 76 liste ordonne ........................................................................... 73

LE GUIDE COMPLET 563

Chapitre 14

Index

listes imbriques ........................................................................ 79 notation mathmatique ............................................................... 169 page daccueil ........................................................................... 47 paragraphe de texte .................................................................... 57 saut de ligne ............................................................................. 65 tableau .................................................................................... 89 tableau cellules fusionnes ........................................................ 107 titre ....................................................................................... 54 CSS (Cascading Style Sheet) ..................................................... 18, 280 proprits de botes ................................................................... 311 proprits de texte et de police ..................................................... 310 slecteur ................................................................................ 282 CutePage (voir SoThink) ................................................................ 36

D
Data, attribut ............................................................................. 226 DD, lment ......................................................................... 76, 495 DEL ........................................................................................ 495 DFN, lment ...................................................................... 155, 495 DHTML (Dynamic HyperText Markup Language) .................................. 19 DIR ........................................................................................ 495 Dir, attribut ......................................................................... 461, 464 Disabled, attribut ........................................................................ 368 DIV, lment ................................................................. 140, 288, 495 DL, lement .......................................................................... 76, 495 DOCTYPE, lment .................................................................... 245 DOM (Document Object Model) ..................................................... 395 DOM2 (Document Object Model level 2) ............................................ 20 Donne (partager entre des cadres) ................................................... 269 Dpi (dots per inch) ...................................................................... 234 Dreamweaver .............................................................................. 29 DT, lment .......................................................................... 76, 495 DTD (Document Type Denition) ...................................................... 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 Elment ..................................................................................... 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, lment ........................................................................ 149, 495 EMBED, lment ........................................................................ 430 Encodage de caractres ................................................................. 157 Enctype, attribut ................................................................... 340, 374 Entits de caractres .................................................................... 160 Evnements ............................................................................... 390

566 LE GUIDE COMPLET

Index

Chapitre 14

F
Face, attribut ............................................................................. 166 Feuille de styles alternative .............................................................................. 304 auditive ................................................................................. 328 en cascade .............................................................................. 323 externe, crer .......................................................................... 294 hritage ................................................................................. 323 interne, crer ........................................................................... 282 principales proprits CSS ........................................................... 309 proprits de botes ................................................................... 311 FIELDSET, lment ............................................................... 360, 495 Filezilla .................................................................................... 475 Firefox ...................................................................................... 39 FONT, lment .............................................................. 165, 183, 495 For, attribut ............................................................................... 358 FORM, lment .................................................................... 339, 495 Format HTML ............................................................................. 49 Formulaire ajout dune structure .................................................................. 360 bouton daction ........................................................................ 348 bouton doption ....................................................................... 346 bouton de soumission graphique ................................................... 347 bouton de soumission ou de rinitialisation ...................................... 346 boutons ................................................................................. 350 case cocher .......................................................................... 345 commande cache ..................................................................... 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 daccs rapide ............................................................... 366 traitement des donnes ............................................................... 373 traiter laide dun script ............................................................ 415 zone de texte de saisie multilignes ................................................. 356 Frame (voir Jeu dencadrement) ...................................................... 244 Frame, attribut ............................................................................. 95 FRAME, lment .................................................................. 248, 496 Frameborder, attribut .................................................................... 258 Frameset (voir Jeu dencadrement) ................................................... 244 FRAMESET, lment ............................................................. 245, 496 Frquentation, suivre la ................................................................. 478

LE GUIDE COMPLET 567

Chapitre 14

Index

FrontPage ................................................................................... 29 FrontPage Express ........................................................................ 33 FTP (File Transfer Protocole) .......................................................... 474

G
Get, mthode HTTP ..................................................................... Gif gIf giF ................................................................................ Google Analytics ........................................................................ compte .................................................................................. 371 208 478 478

H
HEAD, lment ..................................................................... 49, 496 Headers, attribut ......................................................................... 441 Height, attribut ........................................................................... 194 Hritage des attributs ............................................................................ 130 feuille de styles ........................................................................ 323 Hn, lment .......................................................................... 54, 496 HotDog ..................................................................................... 30 HR, lment ........................................................................ 136, 496 Href, attribut ....................................................................... 213, 305 HTML ..................................................................................... 496 commentaire ........................................................................... 137 dnition ................................................................................. 12 diteur .................................................................................... 28 lment ................................................................................... 48 lments structuraux de texte ....................................................... 155 vnements intrinsques ............................................................. 391 format .................................................................................... 49 HTTP (HyperText Transfer Communication Protocol) .............................. 60 HTTP-EQUIV, attribut .................................................................. 419

I
I, lment ........................................................................... 164, 496 Id, attribut ................................................................ 62, 140, 269, 287 IETF (Internet Engineering Task Force) ............................................... 12 IFRAME, lment ................................................................. 271, 497 Image anime .................................................................................. 198 darrire-plan, inclure ................................................................ 187
568 LE GUIDE COMPLET

Index

Chapitre 14

insrer ................................................................................... 190 rduire la taille des chiers .......................................................... 237 rduire la taille physique ............................................................. 234 IMG, lment ................................................................ 155, 191, 497 Index.html ................................................................................ 247 INPUT, lment ................................................................... 343, 497 INS ........................................................................................ 498 Instruction !DOCTYPE ............................................................................. 47 document.write ........................................................................ 384 Internationalisation ...................................................................... 456 Internet Explorer .......................................................................... 39 ISINDEX, lment ................................................................ 350, 498 Ismap, attribut ............................................................................ 222

J
Java (diffrences avec Java script) .................................................... JavaScript ................................................................................. compatibilit avec les navigateurs .................................................. diffrences avec Java ................................................................. proprits de document .............................................................. Jeu dencadrement ....................................................................... accessibilit ............................................................................ cadre cible ............................................................................. cible par dfaut des liens ............................................................ conits de noms ....................................................................... contenu de remplacement ............................................................ imbriquer ............................................................................... noms rservs ......................................................................... partage de donnes ................................................................... JVM (Java Virtual Machine) ........................................................... 425 397 407 425 406 244 453 261 264 263 270 265 262 269 455

K
KBD, lment ...................................................................... 152, 498

L
LABEL, lment .................................................................. 357, 498 Lang, attribut ................................................................. 140, 145, 457 valeurs .................................................................................. 459 LEGEND, lment ................................................................ 360, 498 Lgende de tableau ....................................................................... 93

LE GUIDE COMPLET 569

Chapitre 14

Index

LI, lment ........................................................................... 73, 498 Lien hypertexte, crer .................................................................... 59 Link, attribut ............................................................................. 177 LINK, lment ..................................................................... 303, 498 Liste puce, crer ............................................................................. 75 de dnitions, crer .................................................................... 76 imbrique, crer ........................................................................ 79 ordonne, crer ......................................................................... 73 Listing accueil.html v. 2.7.1 .................................................................. 252 audit.css ................................................................................ 333 barrenav.html 2.7.1 ................................................................... 251 citations imbriques .................................................................. 146 date2.js ................................................................................. 402 lment CODE .................................................................. 151, 153 lment MAP restitu ................................................................ 230 lments ABBR et ACRONYM .................................................... 151 lments OBJECT et EMBED ...................................................... 430 exemple MathML ..................................................................... 172 extrait de la section HEAD de la page daccueil de MicroApplication ........ 53 extrait du code du chier listesimbriques2.html .................................. 87 famille.html (version 1.4.1) ........................................................... 92 fonction Get_Cookie ................................................................. 420 index.html v.2.7.1 ..................................................................... 250 index.html v.2.7.2 ..................................................................... 256 listes imbriques ........................................................................ 80 notations scientiques en texte ..................................................... 169 pageacc1_0.html. ....................................................................... 57 pageacc1_3_2.html ..................................................................... 64 pageacc1_3_3.html ..................................................................... 68 Pageacc_v1_3_3.html .................................................................. 46 position.html ........................................................................... 318 position0.html ......................................................................... 316 region.html version 1.4.2 ............................................................ 110 region.html version 3.8.1 ............................................................ 298 region_erreurs.html ................................................................... 120 romeo.html ............................................................................. 329 styleaudit.css ........................................................................... 329 styleaudit2.css ......................................................................... 332 STYLEDIVSPAN.html ............................................................... 289 tailles de police ........................................................................ 166 visuel.css ............................................................................... 333 Localisation ............................................................................... 456 Longdesc, attribut ....................................................................... 259 Lynx ......................................................................................... 41

570 LE GUIDE COMPLET

Index

Chapitre 14

M
MAP, lment ...................................................................... 210, 499 Marginheight, attribut ................................................................... 258 Marginwidth, attribut .................................................................... 258 Masquer (les donnes de script aux agents utilisateurs) ........................... 389 Mathmatiques, afficher en HTML ................................................... 169 MathML ................................................................................... 171 Media, attribut ..................................................................... 291, 305 @media, rgle ..................................................................... 305, 332 MENU ..................................................................................... 499 META, lment ............................................. 50, 157, 280, 305, 386, 499 Method, attribut .......................................................................... 340 Microsoft Gif Animator ................................................................ 204 Modle MVC (Model-View-Controller) ............................................. 279 Modier apparence du texte .................................................................... 164 couleur dune cellule de tableau .................................................... 184 couleur du texte dans un lment .................................................. 183 couleurs dun tableau ................................................................. 184 marges dun paragraphe .............................................................. 148 police ................................................................................... 165 schma de couleurs de la page ..................................................... 178 site pour ladapter plusieurs langues ............................................. 456 styles affichs par le navigateur .................................................... 325 Module complmentaire .......................................................... 227, 454 Mosaic ...................................................................................... 12 Mozilla ...................................................................................... 39 Multiple, attribut ......................................................................... 353 MVC (Model-View-Controller), modle ............................................. 279

N
Name, attribut ............................................................ 50, 62, 257, 340 Namo WebEditor .......................................................................... 30 Navigateur .................................................................................. 39 activer ou dsactiver les scripts ..................................................... 384 afficher le code source ................................................................. 52 compatibilit JavaScript .............................................................. 407 Internet Explorer ........................................................................ 39 Lynx ...................................................................................... 41 modier les styles affichs .......................................................... 325 Mosaic ................................................................................... 12 Mozilla/Firefox ......................................................................... 39 Opera ..................................................................................... 39
LE GUIDE COMPLET 571

Chapitre 14

Index

Safari ..................................................................................... 39 Navigator, objet .......................................................................... 410 NOFRAMES, lment ................................................ 246, 270, 453, 499 Nohref, attribut ........................................................................... 220 Noresize, attribut ........................................................................ 258 NOSCRIPT, lment .............................................................. 388, 499 NotePad (voir Bloc-notes) ............................................................... 34 Numro de version ........................................................................ 63 Nvu .......................................................................................... 35

O
OBJECT, lment ......................................... 155, 224, 269, 426, 455, 499 Objet navigator ........................................................................... 410 OL, lment .......................................................................... 73, 499 Opera ........................................................................................ 39 OPTGROUP, lment ............................................................. 354, 500 OPTION, lment ................................................................. 353, 500

P
P, lment ............................................................................ 57, 500 Page daccueil ............................................................................. 47 Paint ....................................................................................... 180 Paint Shop Pro ..................................................................... 180, 239 Paragraphe aligner .................................................................................... 67 crer ...................................................................................... 57 modier les marges ................................................................... 148 PARAM, lment .................................................................. 429, 500 PhotoShop ................................................................................ 180 Plug-ins (voir Module complmentaire) ............................................. 156 Popup (voir Fentre surgissante) ...................................................... 404 Post, mthode HTTP .................................................................... 371 PRE, lment ....................................................................... 141, 500 Prcaution avec les couleurs ........................................................... 184 Proprits CSS ........................................................................... 310 PwWebSpeack ............................................................................ 467 PwWebspeak ............................................................................. 453

Q
Q, lment .......................................................................... 143, 500
572 LE GUIDE COMPLET

Index

Chapitre 14

R
Readonly, attribut ........................................................................ 369 Rfrence de caractre .................................................................. 154 entit .................................................................................... 160 numrique .............................................................................. 159 Rgle @media ..................................................................... 305, 332 Rel, attribut ............................................................................... 304 Rsolution ................................................................................ 236 Rows, attribut ............................................................................ 247 Rowspan, attribut ........................................................................ 107 Rules, attribut .............................................................................. 95

S
S, lment .......................................................................... 164, 500 Safari ........................................................................................ 39 SAMP ..................................................................................... 500 Saut de ligne, crer ....................................................................... 65 Scope, attribut ............................................................................ 441 SCRIPT ................................................................................... 500 action unique ........................................................................ 381 activer ou dsactiver dans le navigateur ........................................... 384 CGI (Common Gateway Interface) ................................................ 415 cookie ................................................................................... 416 ct client .............................................................................. 380 ct serveur ............................................................................ 380 ECMAScript ........................................................................... 412 vnements intrinsques HTML .................................................... 390 JavaScript .............................................................................. 397 masquer les donnes aux agents utilisateurs ...................................... 389 rptitif ................................................................................. 382 traitement de formulaire ............................................................. 415 VBScript ............................................................................... 413 SCRIPT, lment .................................................................. 383, 500 Scrolling, attribut ........................................................................ 258 SELECT, lment ................................................................. 352, 500 Slecteur 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 hbergement ........................................................................... 473 publier sur le Web .................................................................... 472 suivre la frquentation ............................................................... 478 test ...................................................................................... 466 Size, attribut .............................................................................. 165 SMALL, lment .................................................................. 164, 501 SmartSaver 3.0 ........................................................................... 239 SMP, lment ............................................................................. 152 SoThink HTML Editor ................................................................... 36 Span, attribut ............................................................................. 124 SPAN, lment ............................................................... 140, 288, 501 Src, attribut ......................................................................... 191, 257 Start, attribut ............................................................................... 74 STRIKE, lment .................................................................. 164, 501 STRONG, lment ................................................................ 149, 501 Style, attribut ....................................................................... 148, 281 STYLE, lment ................................................................... 282, 501 masquer le contenu ................................................................... 292 SUB, lment ...................................................................... 167, 501 Summary, attribut ............................................................. 93, 128, 439 SUP, lment ....................................................................... 167, 501

T
Tabindex, attribut ........................................................................ 363 TABLE, lment .................................................................... 90, 501 Tableau accessibilit ............................................................................ 441 aligner .................................................................................... 94 aligner une cellule .................................................................... 102 attributs de bordure et de rgles de llment TABLE ........................... 96 bordures et rgles, attributs border, frame et rules ................................ 95 calcul du nombre de colonnes ...................................................... 129 cellules manquantes et cellules se recoupant ..................................... 117 colonne, lment TD ................................................................... 90 crer ...................................................................................... 89 en-tte de colonne ...................................................................... 93 xer la largeur des colonnes ........................................................ 104 fusionner des cellules ................................................................ 107 hritage des attributs ................................................................. 130 imbriquer ............................................................................... 127 lgende de tableau, lment CAPTION ............................................. 93 ligne, lment TR ...................................................................... 90 mise en forme, attributs char et charoff ........................................... 132

574 LE GUIDE COMPLET

Index

Chapitre 14

modier la couleur dune cellule ................................................... 184 modier le schma 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, lment .................................................................. 121, 501 TD, lment .......................................................................... 90, 502 Test du site Web ......................................................................... 466 Text, attribut .............................................................................. 177 TEXTAREA, lment ............................................................. 356, 502 Texte lments structuraux .................................................................. 155 modier lapparence .................................................................. 164 modier la couleur du texte dans un lment .................................... 183 structurer ............................................................................... 149 TFOOT, lment ................................................................... 121, 502 TH, lment .......................................................................... 93, 503 The Gimp ........................................................................... 180, 216 THEAD, lment .................................................................. 121, 503 Tim Berners-Lee .......................................................................... 12 Title, attribut ....................................................................... 196, 304 TITLE, lment ..................................................................... 49, 503 Titre, crer ................................................................................. 54 TR, lment .......................................................................... 90, 503 TT, lment ......................................................................... 164, 503 Type, attribut ........................................... 74, 76, 226, 287, 305, 343, 386

U
U, lment .......................................................................... 164, 503 UL ......................................................................................... 504 Ulead Gif Animator ..................................................................... 204 UNICODE ................................................................................ 461 Urchin.js, bibliothque JavaScript .................................................... 479 UrchinTracker(), fonction JavaScript ................................................. 479 URI (Universal Resource Identier) ................................................... 59 URL (Universal Resource Locator) .................................................... 59 Usemap, attribut ......................................................................... 231

LE GUIDE COMPLET 575

Chapitre 14

Index

V
Valign, attribut ........................................................................... 102 Value, attribut .............................................................................. 74 VAR, lment ...................................................................... 155, 504 VBScript .................................................................................. 413 Version, numro 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 Sbastopol - 75001 Paris