Académique Documents
Professionnel Documents
Culture Documents
HTML Guide Complet T
HTML Guide Complet T
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.
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
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
saisir.
j
Met laccent sur un point important, souvent dordre technique quil ne faut ngliger aucun prix.
Sommaire
Chapitre 1
1.1. 1.2.
Introduction HTML
11
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.
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.
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
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.
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.
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.
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
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.
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
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
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
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
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.
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.
20 LE GUIDE COMPLET
Chapitre 1
LE GUIDE COMPLET 21
Chapitre 1
Introduction HTML
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
Chapitre 1
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">
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
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
>
24 LE GUIDE COMPLET
Rsum
Tableau 1.1 : Structure dun lment HTML
Chapitre 1
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.
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
Chapitre 2
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.
28 LE GUIDE COMPLET
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).
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
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 $).
30 LE GUIDE COMPLET
Chapitre 2
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.
LE GUIDE COMPLET 31
Chapitre 2
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.
32 LE GUIDE COMPLET
Chapitre 2
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
de Microsoft Word. Attention cependant, il crit principalement pour Microsoft Explorer, ce qui peut provoquer de mauvaises surprises avec dautres navigateurs. Prudence
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
Chapitre 2
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
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.
Chapitre 2
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
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
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
Non
Onglets de navigation
Oui
Oui
Oui
Avec un programme de tierce partie (comme MyIE2) Oui Limit via modules complmentaires Via une application spare
Oui Oui
Oui Oui
Oui Oui
Oui Oui
Quelquesuns
Quelquesuns
40 LE GUIDE COMPLET
Navigateurs
Chapitre 2
Extensions
Nombreuses (http://update .mozilla.org/, (http: //extensionroom .mozdev.org/) et (http://extensions mirror.nl/) Intensive (avec about:config)
Nant
Nant
Quelquesunes
Personnalisation
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.
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
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
Chapitre 3
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
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
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
LE GUIDE COMPLET 45
Chapitre 3
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.
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
Chapitre 3
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
!DOCTYPE lorsque vous aurez recours des feuilles de style en cascade, des cadres ou XML.
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
Chapitre 3
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
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
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
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.6 : Accs au code source de la page daccueil de MicroApplication depuis Internet Explorer
52 LE GUIDE COMPLET
Chapitre 3
Figure 3.7 : Accs au code source de la page daccueil de MicroApplication depuis Firefox
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
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
<H1>
54 LE GUIDE COMPLET
Chapitre 3
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.
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
<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.
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
Chapitre 3
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
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.
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
Chapitre 3
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.
LE GUIDE COMPLET 59
Chapitre 3
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">
60 LE GUIDE COMPLET
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">
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
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>
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
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">
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
<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>
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
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
Chapitre 3
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.
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
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.
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
Chapitre 3
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>
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
<P align="left">
LE GUIDE COMPLET 67
Chapitre 3
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">
Examinez votre nouvelle page daccueil dans votre navigateur. Ouvrez celui-ci, puis naviguez jusquau chier pageacc1_3_3.html.
68 LE GUIDE COMPLET
Rsum
Chapitre 3
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.
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
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
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
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.
LE GUIDE COMPLET 73
Chapitre 4
Listes et tableaux
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".
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
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 !
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>
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>
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>
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
80 LE GUIDE COMPLET
Listes
Chapitre 4
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.
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
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.
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.
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é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ée 4 <ul> 5 <li>Elément OL 6 <dl> 7 <dt>start</dt> 8 <dd>valeur de début de la numérotation</dd> 9 <dt>type</dt> 10 <dd>1,Chiffres arabes (valeur par défaut)<br> 11 a : Lettres minuscules<br> 12 A : Lettres majuscules<br> 13 I : Chiffres romains en minuscules<br> 14 I : Chiffres romains en majuscules.</dd> 15 </dl> 16 </li> 17 <li>Elément LI 18 <dl> 19 <dt>value</dt> 20 <dd>valeur de réinitialisation de la numérotation.</dd> 21 <dt>type</dt> 22 <dd>1,Chiffres arabes (valeur par dé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 à puces 33 <ul> 34 <li>Elément UL 35 <dl> 36 <dt>type</dt> 37 <dd>disc : Rond plein (valeur par défaut)<br> 38 square : Carré 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ément LI <dl> <dt>type</dt> <dd>disc : Rond plein (valeur par défaut)<br> square : Carré 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.
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.
Vous y voyez des listes puces et numrotes imbriques, employes pour crer une table des matires.
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.
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.
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.
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.
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 :
Cet lment est particulirement important pour les tableaux dpourvus de lgende (CAPTION).
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.
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.
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.
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 :
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..
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
96 LE GUIDE COMPLET
Tableaux
Chapitre 4
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.
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
et 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.
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.
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
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.
Laspect dans les trois navigateurs, bien quencore diffrent, est plus satisfaisant.
Tableaux
Chapitre 4
Figure 4.24 : Page modie avec attribut cellspacing, vu dans Internet Explorer
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.
Chapitre 4
Listes et tableaux
Cest souvent intressant, puisque HTML reste globalement peu adapt aux espaces blancs.
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 :
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).
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>
3 Enregistrez votre chier, sans modier son nom, puis examinez le rsultat dans votre navigateur.
Chapitre 4
Listes et tableaux
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
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.
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.
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.
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.
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">
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
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>
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
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
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>
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
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>
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>
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.
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.
3 Cliquez sur licne Tableau. Cela affiche une nouvelle fentre, qui permet de dnir le tableau crer.
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.
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.
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.
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.
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.
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 :
Chapitre 4
Listes et tableaux
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
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>
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
Chapitre 4
Listes et tableaux
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.
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>
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.
Chapitre 4
Listes et tableaux
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
...informations de pied...
...premire range des donnes du bloc 1... ...seconde range des donnes du bloc 1...
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.
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.
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.
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
Chapitre 4
Listes et tableaux
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.
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">
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.
Chapitre 4
Listes et tableaux
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
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.
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.
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
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.
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.
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.
Chapitre 5
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
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">
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.
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 -->
Chapitre 5
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">
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.
Chapitre 5
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">
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 !
Chapitre 5
Figure 5.3 : La ligne denvoi de courriel napparat plus sur la page : le code plac en commentaire est ignor.
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.
Chapitre 5
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>
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.
Chapitre 5
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"]>
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
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
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
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>
Mais comme le montrent les trois copies dcran des gures suivantes, le rendu des navigateurs, mme rcents, manque pour le moins de cohrence :
Chapitre 5
Figure 5.8 : Rendu de citations imbriques dans le navigateur Internet Explorer (6 et 7).
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 :
Chapitre 5
<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.
Remarquez que, dans cet exemple, les valeurs des attributs href sont toutes inexistantes : il convient de crer les destinations de lien adquates.
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
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.
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
Chapitre 5
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">
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.
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
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.
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
Chapitre 5
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.
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 <iostream><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 << reveil.get_hours()<BR> 12 << ":" << reveil.get_minutes()<BR> 13 << ":" << reveil.get_seconds() << "\n";<BR> 14 <BR> 15 return 0; <BR> 16 } </CODE></P>
Chapitre 5
Caractres spciaux
En examinant le code ci-dessus, vous devriez tre intrigu par les mystrieux <. 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 :
Chapitre 5
Llment KBD est trs similaire : il sert signaler un texte, ou une expression, devant tre saisi par lutilisateur au clavier.
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.).
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
Chapitre 5
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.
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.
Chapitre 5
France
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">
Chapitre 5
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
(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
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 à se rapporte la lettre . Il est plus facile de se souvenir de à que de à ou de à. 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, À () ne se rapporte pas au mme caractre que à (). 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
< reprsente le caractre < gt; reprsente le caractre > & reprsente le caractre & " 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ée ou Liste ordonnée. Si vous prfrez vous en tenir un diteur de type texte, vous devrez en tenir compte et vous habituer à
Chapitre 5
écrire vos textes en tenant compte des caractères accentués;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égion</A> ;</LI> <ADDRESS> <A href="../ORignal/">Olivier Rignal</A> et <A href="../JBogue/">Justin Bogue</A> sont les personnes à contacter pour tout <A href="probleme"> problème</A> rencontré sur le site. </ADDRESS>
Chapitre 5
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.
Remarquez que, si nous avons ici modi le nom du chier, cela nest pas obligatoire : le simple fait denregistrer le chier accomplit la transformation.
Chapitre 5
Entit
< >
Dcimal
< >  
Hexadcimal
< >  
Caractre
Entit
é ê ì
Dcimal
é ê ì
Hexadcimal
é ຬ ì
LAnnexe D prsente une liste plus complte des caractres du jeu Latin-1.
Chapitre 5
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.
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
Chapitre 5
lment
But Texte affich dans une police plus petite Texte barr (dconseill) Texte soulign (dconseill)
Exemple
SMALL STRIKE et S 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.
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.
Chapitre 5
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>
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
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.
Chapitre 5
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
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.
Notation mathmatique
Chapitre 5
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écart-type <FONT face="Symbol">s</FONT> chantillon <I>n</I> :<BR><BR> <CODE><BIG><BIG> [x - t × (<FONT face="Symbol">s</FONT>/n<SUP>½</SUP>) ; x + t × (<FONT face="Symbol">s</FONT>/n<SUP>½</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.
Chapitre 5
Figure 5.23 : Exemple dquation crite laide de caractres texte avec Internet Explorer
Firefox
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.
Notation mathmatique
Chapitre 5
Lapparence nale peut galement tre variable selon les paramtrages dnis pour la page Web et pouvant tre outrepasss par lutilisateur.
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
Chapitre 5
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équation du second degré</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>
Rsum
</body> </html>
Chapitre 5
Malheureusement, rares sont les navigateurs reconnatre MathML : pour le moment, Firefox et Internet Explorer en restent encore totalement incapables.
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
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.
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
Les couleurs
Chapitre 6
Valeur RGB
Valeur RGB
Chapitre 6
Couleurs et images
Valeur RGB
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.
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">
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">
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.
Les couleurs
Chapitre 6
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.
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
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.
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.
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
Chapitre 6
Couleurs et images
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.
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
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.
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.
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.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.
Les images
Chapitre 6
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.
Chapitre 6
Couleurs et images
Figure 6.14 : Lemploi dun ligrane de faible taille (ici 129 159 pixels) est
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
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.
Chapitre 6
Couleurs et images
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
10 Enregistrez le chier sous le nom region1_6_1.html, puis examinez cette page dans votre navigateur.
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.
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
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.
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
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
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.
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
Les images
Chapitre 6
naffiche le contenu dun ventuel attribut alt quen labsence 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.
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.
Images animes
Chapitre 6
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.
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.
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 .
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.
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.
Chapitre 6
Couleurs et images
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.
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.
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.
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.
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.
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,
Images animes
Chapitre 6
Figure 6.34 : La diversit des 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.
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
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.
Images animes
Chapitre 6
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
Chapitre 6
Couleurs et images
: 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.
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/ .
2 Slectionnez Fonds de cartes, puis dans la page qui saffiche descendez jusqu la section Etats et slectionnez la carte France (rgions).
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égions franç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é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.
Image cliquable
Chapitre 6
Si vous cliquez sur une des zones, vous obtenez un message derreur : les pages secondaires spcies par les valeurs des attributs href nexistent pas !
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
Je suppose que vous restez dubitatif quant aux coordonnes de lexemple prcdent Comment est-il possible de les dterminer simplement ? Deux solutions soffrent vous.
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.
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é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é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é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.
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).
4 Choisissez Rectangle dans le menu de gauche, puis dessinez un rectangle sur la rgion Poitou-Charentes .
5 Renseignez les lments ncessaires dans la fentre Paramtres de la zone qui souvre, puis cliquez sur OK.
Chapitre 6
Couleurs et images
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.
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.
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.
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.
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
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.
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
Nombre Texte de description Valeur de lattribut name dun lment MAP associ Nant
ismap
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">
4 Enregistrez votre chier sous le nom region1_6_2.html, puis examinez-le dans votre navigateur.
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>
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.
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-
Chapitre 6
Couleurs et images
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.
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égion Poitou-Charentes</A> <A href="Ile de France.html" shape="circle" coords="274,167,21" title="Ile de France"> Ré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é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).
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 :
6 Enregistrez votre chier sous le nom FranceReg3err.html, puis examinez-le dans votre navigateur.
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égion Poitou-Charentes</A> <A href="Ile de France.html" shape="circle" coords="274,167,21" title="Ile de France"> Ré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é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.
Chapitre 6
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
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
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
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
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)
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
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
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.
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.
Nbre bit/pixel 24 24 24 24 16 16 8 8
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
Chapitre 6
Couleurs et images
Nbre bit/pixel 8 4 4 4
Couleurs 256 16 16 16
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
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.
Chapitre 6
Couleurs et images
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
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.
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
Chapitre 7
Passons la pratique.
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
Chapitre 7
<FRAME src="accueil.html" name ="princ"> <NOFRAMES> <P>Ce document a recours à 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>
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
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é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">
Chapitre 7
Jeux dencadrement
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égion</A> ;</LI> <LI>sur ma famille</A> ;</LI> <LI>sur mes passions</A>.</LI> </UL> <P> Naviguez dans le site à laide de la barre de navigation proposée ci-dessus. </P> <HR> <ADDRESS> <A href="../ORignal/">Olivier Rignal</A> et <A href="../JBogue/">Justin Bogue</A> sont les personnes à contacter pour tout <A href="probleme">problème</A> rencontré sur le site. </ADDRESS> <!-- Des remarques lé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.
Chapitre 7
Chapitre 7
</BODY> </HTML>
Jeux dencadrement
Vous pouvez maintenant examiner votre travail dans votre navigateur. Ne testez pas encore les liens de la barre de navigation.
Chapitre 7
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.
Chapitre 7
Jeux dencadrement
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
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.
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 à 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.
Chapitre 7
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">
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.
Chapitre 7
Jeux dencadrement
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
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">
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û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>
Chapitre 7
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">
Chapitre 7
Jeux dencadrement
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.
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.
Chapitre 7
Jeux dencadrement
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.
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.
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>
En ouvrant le chier cadresimbriques.html dans votre navigateur, vous voyez ce qui est prsent dans la gure suivante.
Un clic sur le lien du cadre nomm cadre1 ouvre le chier test_parent.html dans la totalit de la page.
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.
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> ...
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.
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.
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.
Chapitre 7
Jeux dencadrement
Dautres cadres du jeu dencadrement pourraient galement faire rfrence llment OBJECT.
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.
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é pour les afficher pour linstant. Cependant, vous pouvez visiter le <A href="cadreflottant2.html">document concern.</A>] </IFRAME> placé à lintérieur dun texte. </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.
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
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.
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.
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.
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
Introduction
j j
Chapitre 8
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
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">
Attribut style
Chapitre 8
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.
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>
Chapitre 8
Feuilles de style
Figure 8.1 : Page daccueil, avec titre principal, modie laide dun attribut style.
Pour spcier les informations de style de plusieurs lments, mieux vaut prfrer llment STYLE.
Toutes les instances dun lment HTML particulier (par exemple, tous les lments P, tous les lments H1, etc.).
H1 {dfinitions}
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.
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">
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.
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.
Chapitre 8
Feuilles de style
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">© 2005 votrenom Tous droits réservé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é 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.
lment STYLE
Chapitre 8
Figure 8.3 : Dnition dun style pour une classe dlments particulire
"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
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=
feuille de style par dfaut est absente, il est indispensable de fournir une valeur pour cet attribut : il est dpourvu de valeur par dfaut.
Chapitre 8
Feuilles de style
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).
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
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ément STYLE avec des élé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>
Chapitre 8
Feuilles de style
</HEAD> <BODY> <H1>Elément <CODE>STYLE</CODE> avec des élé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.
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)
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
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.
lment STYLE
Chapitre 8
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.
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
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.
Chapitre 8
Feuilles de style
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.
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.
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">
Chapitre 8
Feuilles de style
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>
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
Chapitre 8
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>Ma ré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ésentation de ma région"> <CAPTION>Ma ré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égion est clbre pour ses forêts, ses montagnes et ses lacs.</TD> </TR> <TR> <TD>Les forê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é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>
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>
Chapitre 8
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}
Figure 8.11 : Une unique modication du chier de feuille de style se rpercute sur tous les lments H1
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
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
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
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.
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.
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.
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.
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
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
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
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
Chapitre 8
Feuilles de style
de style CSS Proprit Valeur(s) But Proprits de police Style de la police Graisse de la police Taille de la police
fontfamily
Police(s) ou famille(s) de polices employer Alignement du texte Enrichissement du texte Indentation du texte
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}
Chapitre 8
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.
Chapitre 8
Feuilles de style
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}
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;}
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.
Chapitre 8
Proprit
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
border style
none, dotted, dashed, solid, double , groove, ridge, inset ou outset border-width border-style border-color
longueur, pourcentage ou
border
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}
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}
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.
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émonstration des propriété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 élé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ème élé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ème élé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ème élé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.
Chapitre 8
Feuilles de style
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 élé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émonstration des propriété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 élé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ème élément
Chapitre 8
<CODE>P</CODE><BR> Le paragraphe est placée dans un cadre flottant à 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ème élément <CODE>P</CODE><BR> Le paragraphe est défini comme devant safficher en haut et à droite de lé lément précé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ème élément <CODE>P</CODE><BR> Le paragraphe saffiche de faon absolue par rapport là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.
Chapitre 8
Feuilles de style
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
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
position
top
longueur ou pourcentage
top: 10pt
left
longueur ou pourcentage
left: 15pt
clip
overflow
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
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.
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.
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.
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.
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.
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.
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.
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.
Chapitre 8
Feuilles de style
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.
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">
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éo et Juliette de Shakespeare</H1> <HR> <DIV> <SPAN class="off">Capulet. - </SPAN> <SPAN class="Capulet">Quel est ce bruit ? ... Holà ! quon me donne ma grande épée.</SPAN><BR> <SPAN class="off">Lady Capulet. - </SPAN> <SPAN class="Lady_capulet">Non, une béquille ! une béquille !.. Pourquoi demander une épée ?</SPAN><BR> <SPAN class="off">Capulet. - </SPAN> <SPAN class="Capulet">Mon épée dis-je ! le vieux Montague arrive et brandit sa rapière en me narguant !</SPAN><BR> </DIV> <P class="direction">Entrent Montague, lépée la main, et Lady Montague.</P> <DIV> <SPAN class="off">Montague. - </SPAN> <SPAN class="Montague"> A toi, misérable Capulet ! Ne me retenez pas ! Lâ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éo et Juliette, Acte I Scàne I. William Shakespeare,"Richard III, Romé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
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.
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
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 (
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}
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.
Chapitre 8
Feuilles de style
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.
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.
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.
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
Chapitre 9
Affich dans un navigateur, cet extrait de chier affiche laspect prsent dans la gure suivante.
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.
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
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.
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
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.
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
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.
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.
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ériel possédé :<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>
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">
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
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 ! .
Chapitre 9
Formulaires
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">
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 à envoyer :</B> <INPUT type=file name=envoyer size=10>
Chapitre 9
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
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 à rechercher : ">
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
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é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.
Chapitre 9
Formulaires
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>
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.
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.
Chapitre 9
Formulaires
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
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.
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.
Chapitre 9
Formulaires
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ère ligne de texte initial.
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.
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.
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é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>
Lattribut for
Il est possible dassocier plusieurs lments LABEL la mme commande en crant plusieurs rfrences via lattribut for.
Chapitre 9
<TR> <TH><LABEL for="libelle_prenom">Pré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>
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 :
Chapitre 9
Formulaires
<FORM action="..." method="post"> <P> <LABEL> Prénom <INPUT type="text" name="prenom"> </LABEL> <LABEL> <INPUT type="text" name="nom"> Nom </LABEL> </P> </FORM>
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.).
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è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égorie recerchée</LEGEND> Quel type de produit recherchez-vous ? <INPUT name="categorie" type="checkbox" value="utilitaire">Utilitaire système <INPUT name="categorie" type="checkbox" value="sonvideo">Son et vidéo <INPUT name="categorie" type="checkbox" value="bureautique">Bureautique <BR> Si la catégorie recherche ne figure pas dans la liste précédente, saisissez ci-dessous des mots-clés séparés par des virgules. <BR> <TEXTAREA name="recherche" rows="3" cols="80"> </TEXTAREA> </FIELDSET> </FORM>
Chapitre 9
Formulaires
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.
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 ).
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
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 à 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é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>
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.
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.
Chapitre 9
Formulaires
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>
Formulaire et focus
Chapitre 9
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éer un compte </A> </LABEL> </P>
Chapitre 9
Formulaires
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).
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.
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.
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.
Chapitre 9
Formulaires
La faon dont sont restitus les lments en lecture seule dpend de lagent utilisateur. Voici un exemple :
Système dexploitation : <INPUT name="systeme_expl" type="text" value="Windows" readonly >
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.
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.
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.
Soumission du formulaire
Chapitre 9
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.
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.
Chapitre 9
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.
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.
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
Chapitre 10
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.
: 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;
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é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é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é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
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.
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"> <!--
Chapitre 10
Scripts
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).
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.
lment SCRIPT
Chapitre 10
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.
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">
Chapitre 10
Scripts
6 Enregistrez votre chier sous le nom accueil.html, puis ouvrez index.html dans un navigateur. Le rsultat est plus intressant.
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.
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.
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.
Chapitre 10
Scripts
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.
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ées... </SCRIPT> <NOSCRIPT> <P><A href="http://quelquepart.fr/donnes.html"> Accè aux données. </A> </NOSCRIPT>
lment SCRIPT
Chapitre 10
Grce llment NOSCRIPT, vous pouvez fournir de prcieuses indications vos visiteurs.
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é ", i , " à 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 >.
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
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
onsubmit onreset
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>
Chapitre 10
Scripts
Laspect de la barre de navigation, ainsi modie, serait quelque chose danalogue ce qui est prsent dans la gure suivante.
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.
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).
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.
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
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"
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é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ût" break; case 9 : mois1 ="Septembre" break; case 10 : mois1 ="Octobre"
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">
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
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.
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évrier","Mars", "Avril","Mai","Juin","Juillet","Août", "Septembre","Octobre","Novembre","Dé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
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.
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, " ");
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.
Chapitre 10
En autorisant les fentres surgissantes pour ce site et en rafrachissant votre document dans le navigateur, vous voyez apparatre une nouvelle fentre.
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évrier","Mars","Avril","Mai", "Juin","Juillet","Aot","Septembre","Octobre", "Novembre","Dé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 .
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
linkColor
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
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"> <!--
Chapitre 10
Scripts
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é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.
Chapitre 10
Figure 10.13 : Affichage dtaill du type de navigateur et du systme dexploitation laide dun script JavaScript, respectivement pour Firefox,
Figure 10.15 :
pour Nvu.
Chapitre 10
Scripts
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
language
frFR
mimeTypes
platform
plugins
Chapitre 10
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>
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égion</A></TD> </NOSCRIPT>
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.
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.
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.
Chapitre 10
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
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.
Vous pouvez paramtrer Firefox an quil vous demande si vous souhaitez accepter un cookie.
Avec Internet Explorer, choisissez Outils > Options Internet. Cliquez sur longlet Confidentialit, puis cliquez sur Avances. Dans la fentre qui saffiche, slectionnez les options adquates.
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) );
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 ) ); }
Chapitre 10
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.
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=" +
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
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.
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
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>
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.
Applets
Chapitre 10
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.
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é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 :
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é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.
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 -->
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élé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.
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
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.
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.
Chapitre 11
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
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.
Chapitre 11
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
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
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è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">
Accessibilit
Chapitre 11
Enn, les images despacement, les puces et les barres horizontales doivent galement possder un attribut alt dni.
Chapitre 11
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ésente le nombre de livres empruntés par chaque membre de la famille, et le nombre de livres non encore rendus."> <CAPTION>Livres emprunté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>
Accessibilit
<TD headers="t2">5</TD> <TD headers="t3">0</TD> </TABLE> ...
Chapitre 11
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ésente le nombre de livres empruntés par chaque membre de la famille, et le nombre de livres non encore rendus."> <CAPTION>Livres emprunté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> ...
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.
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és par titre, éditeur, ré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.">Éditeur</TH> <TH scope="col">Résumé</TH> <TH scope="col">Code ISBN</TH> <TH scope="col">Prix</TH> </TR> <TR> <TD scope="row">Wi-Foo, piratage et défense des rseaux sans fil</TD> <TD>CampusPress</TD> <TD> Le développement des réseaux sans fil saccélère. Pourtant, les problèmes
Accessibilit
Chapitre 11
de sécurité liés à ce type de réseau sont largement sous-éstimés. Ce livre étudie tant les méthodes employées pour pénétrer un tel réseau que celles qui permettent de laisser les assaillants et les curieux dehors. <EM>Niveau : Intermédiaire à avancé.</EM> </TD> <TD>2-7440-1948-8</TD> <TD>47 €</TD> </TR> <TR> <TD scope="row">La Bible C++</TD> <TD>Micro Application</TD> <TD> La référence absolue pour maîtriser la programmation C++ !<BR> Destiné aussi bien aux débutants quaux utilisateurs confirmés, cet ouvrage, référence incontestée outre-atlantique et traduit en Français, est un véritable outil de cours délivrant aux utilisateurs des bases solides et des connaissances poussées sur le langage C++. Lutilisateur dispose ici de toutes les informations pour comprendre les fondements du langage, rsoudre ses problèmes, puis développer des applications performantes avec le langage C++. <EM>Niveau : Intermédiaire à avancé. </EM> </TD> <TD>2-7429-3717-X</TD> <TD>81 €</TD> </TR> </TABLE> ...
Figure 11.5 : Tableau complexe employant lattribut scope, avec des cellules fusionnes.
Chapitre 11
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.
Accessibilit
Chapitre 11
<CAPTION> Récapitulatif des dépenses de vacances </CAPTION> <TR> <TH></TH> <TH>Alimentation</TH> <TH>Dé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>
summary="Ce tableau résume les dépenses occasionnés lors des vacances du mois de juillet à Toulouse et à Montpellier">
Chapitre 11
<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éné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
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éplacement</TH> <TH id="a4" axis="dpenses">Divers</TH> <TD>Sous-totaux</TD>
Chapitre 11
</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> ...
Accessibilit
Chapitre 11
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
Chapitre 11
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. 200705. Dpenses,
Date :
Dpenses,
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.
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.
Avec lagent utilisateur pwWebspeak, (noubliez pas que pwWebspeak lit ce qui est affich), vous obtenez laspect visuel qui est prsent dans la gure suivante.
Chapitre 11
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 !
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.
Chapitre 11
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 %
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 γ</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
Chapitre 11
et 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)*
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
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.
Chapitre 11
j
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épression multilingue</TITLE> ... </HEAD> <BODY> ...A propos de la dépression... <P lang="es">Tiene Usted Depresión? <P> La d´pression au Japon, connue sous le nom de <EM lang="ja">Utsubyo</EM>, y est trs fréquente : probablement une personne sur sept en souffre... </BODY> </HTML>
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.
Chapitre 11
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>
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>
Chapitre 11
Les gures suivantes prsentent laspect de ces deux codes 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
Chapitre 11
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.
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
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.
Limage suivante montre une page russe, qui prsente des caractres cyrilliques,
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.
Chapitre 11
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.
Choisir pour la page russe le jeu occidental nest toutefois pas sage : comme le montre la gure suivante, la page devient incomprhensible.
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.
Avec
Firefox, choisissez Outils / Options. Choisissez Fonctionnalits Web dans le volet de gauche, puis dcochez dans le volet de droite loption Charger les images .
Chapitre 11
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 :
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 ;
spcier plus prcisment un niveau de compatibilit avec les spcications HTML ; tester laffichage sur une WebTV.
Chapitre 11
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.
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
Chapitre 11
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.
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 !
Chapitre 11
Certains FAI proposent, comme Orange, un hbergement amlior pour un montant relativement modeste.
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.
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.
Chapitre 11
j
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).
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.
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.
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.
Chapitre 11
1 Servez-vous de votre compte Google pour ouvrir un compte Google Analytics, partir de la page http://www.google.com/analytics /fr-FR/.
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 ;
Chapitre 11
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
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)
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
(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.
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.
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.
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
Chapitre 11
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.
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..
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
Caractre espace inscable (symbole montaire) R (signe ngation) - (trait dunion virtuel) T _ (macron)
2
Nom de lentit
Codage dcimal
Codage hexadcimal
¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ­
  ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ­
  ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ­
Chapitre 12
Nom de lentit
Codage dcimal
Codage hexadcimal
µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î
µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î
µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î
Chapitre 12
Annexes
Tableau 12.1 : Jeu des entits de caractres Latin-1
Caractre Y
Nom de lentit
Codage dcimal
Codage hexadcimal
Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ; ß ; à á â ã ä å æ ç è é
Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é
Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é
Chapitre 12
Caractre y y
Nom de lentit
Codage dcimal
Codage hexadcimal
ê ; ë ì í î ï ð ñ ò ó ô ; õ ö ÷ ø ù ú û ü ý þ ÿ
ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ
ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú ྴ ü ý þ ÿ
Chapitre 12
Annexes
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
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
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
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 (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)
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)
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).
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)
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) noshade : ombrage (dconseill). (noshade) size : taille en pixels (dconseill). %Pixels; width : largeur (dconseill). %Length;
HTML : lment racine du document
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)
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;
Chapitre 12
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;
Chapitre 12
Annexes
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
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
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
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;
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
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)
Chapitre 12
Annexes
compact : rduction de lespace entre lments (compact) type : style de puces (dconseill). %ULStyle;
VAR : instance de variable ou argument de programme
(dconseill).
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.
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.
Chapitre 12
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
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.
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
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.
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.
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.
Chapitre 12
Annexes
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
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
<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= est prioritaire.
"Contenttype" content=text/html; charset="EUCJP" />). La valeur de lattribut dencodage de linstruction de traitement xml
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
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.
<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
<table rows="3">
<table rows=3>
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 &). 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&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.
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.
Compatibilit XHTML/HTML
Chapitre 12
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.
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.
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 :
center
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
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
body, table, tr, td, th object, img Br Ul, ol, dl Td, th object, img script
name Noshade
img, form hr
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
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.
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.
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.
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
ANY
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.
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
Chapitre 12
Annexes
Oprateur
Exemple
, ()
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.
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 >
Littral : vous affectez une chane de caractres un attribut. Vous le dclarez ainsi laide du mot-cl CDATA.
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.
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">
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;
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>
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 ∋ 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>
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 (:).
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">
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
Il est galement possible de dnir des entits caractres pour nimporte quel caractre en utilisant le code hexadcimal du caractre :
<!ENTITY nom_entite "ODEHEXA;">
Par exemple :
<!ENTITY ccedille "ç">
Mme si cette annexe peut sembler succincte, elle devrait vous permettre de mieux comprendre les DTD des spcications HTML 4.01 et XHTML 1.
Slecteurs CSS
Chapitre 12
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
1 1 1
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
2 2 2 2 3
E[attribut^="valeur"] Un lment E avec un attribut attribut dont la valeur commence exactement par la chane valeur
Chapitre 12
Annexes
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
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
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.
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/
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
Ressources Web
Chapitre 12
www.01gif.com/ gif.webgratuit.com/
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
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
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
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
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.
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
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
Chapitre 13
Glossaire
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.
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
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
Chapitre 13
Glossaire
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.
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
E
ECMAScript : Tentative de normalisation du langage de script employ
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.
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
enregistrer les adresses des sites frquemment visits. Correspond aux signets Netscape/Firefox.
Feuille de style : Fichier ou partie de document Web dcrivant la faon
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.
Chapitre 13
G
Gadget : Objet miniature offrant diverses fonctionnalits. Cest le nom
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
Chapitre 13
Glossaire
qui indique lagent utilisateur comment afficher ces lments et les informations dune page Web.
HTTP (Hypertext Transfer Protocol) : Protocole employ par les
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
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.
Chapitre 13
ISP (Internet Service Provider) : Fournisseur daccs Internet (FAI) : la
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
particulire.
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
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.
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
ligne.
Une
adresse
lectronique
revt
souvent
la
forme
nomutilisateur@nomhote.domaine.com.
Nom de domaine : Identiant unique sur Internet permettant la
Web.
O
Objet : lment numr dans le Modle Objet de Document (DOM),
Chapitre 13
Glossaire
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.
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
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
une autre mthode de codage pour protger tous les changes de donnes entre lui et ses clients.
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
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
nature commerciale, envoy des gens nayant rien demand et ne souhaitant pas les recevoir.
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
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.
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
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
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
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
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
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.
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
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
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
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
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
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
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
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
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
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
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