HTML Guide Complet t

  • Published on
    31-Oct-2015

  • View
    71

  • Download
    0

Transcript

Copyright 2009 Micro Application20-22, rue des Petits-Htels75010 Paris1re dition - Avril 2009Auteur Fabrice LEMAINQUEToute reprsentation ou reproduction, intgrale ou partielle, faite sans leconsentement de MICRO APPLICATION est illicite (article L122-4 du codede la proprit intellectuelle).Cette reprsentation ou reproduction illicite, par quelque procd que cesoit, constituerait une contrefaon sanctionne par les articles L335-2 etsuivants du code de la proprit intellectuelle.Le code de la proprit intellectuelle nautorise aux termes de larticle L122-5que les reproductions strictement destines lusage priv et non destines lutilisation collective dune part, et dautre part, que les analyses et courtescitations dans un but dexemple et dillustration.Avertissement Les informations contenues dans cet ouvrage sont donnes titre indicatifaux utilisateurs et nont aucun caractre exhaustif voire certain. A titre dexemple nonlimitatif, cet ouvrage peut vous proposer une ou plusieurs adresses de sitesWeb qui ne seront plus dactualit ou dont le contenu aura chang aumoment 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 touteomission, erreur ou lacune qui aurait pu se glisser dans ce produit ainsi quedes consquences, quelles quelles soient, qui rsulteraient des informa-tions et indications fournies ainsi que de leur utilisation.Tous les produits cits dans cet ouvrage sont protgs, et les marquesdposes 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 etles marques ne sont utilises qu seule fin de dsignation des produits entant que noms de ces derniers.ISBN : 978-2-300-019586MICRO APPLICATION Support technique :20-22, rue des Petits-Htels galement disponible sur75010 PARIS www.microapp.comTl. : 01 53 34 20 20Fax : 01 53 34 20 00http://www.microapp.comRetrouvez des informations sur cet ouvrage !Rendez-vous sur le site Internet de Micro Applicationwww.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.1958Avant-proposDestine aussi bien aux dbutants quaux utilisateurs initis, lacollection Guide Complet repose sur une mthode essentiellementpratique. Les explications, donnes dans un langage clair et prcis,sappuient sur de courts exemples. En fin de chaque chapitre, dcouvrez,en fonction du sujet, des exercices, une check-list ou une srie de FAQpour rpondre vos questions.Vous trouverez dans cette collection les principaux thmes de luniversinformatique : matriel, bureautique, programmation, nouvellestechnologies...Conventions typographiquesAfin de faciliter la comprhension des techniques dcrites, nous avonsadopt les conventions typographiques suivantes :j gras : menu, commande, bote de dialogue, bouton, onglet.j italique : zone de texte, liste droulante, case cocher, boutonradio.j Police bton : Instruction, listing, adresse internet, texte saisir.j : indique un retour la ligne volontaire d aux contraintes dela mise en page.Il sagit dinformations supplmentaires relatives au sujet trait.Met laccent sur un point important, souvent dordre technique quilne faut ngliger aucun prix.Propose conseils et trucs pratiques.Donne en quelques lignes la dfinition dun terme technique ou duneabrviation.Chapitre 1 Introduction HTML 111.1. Bref historique de HTML .......................................... 121.2. Pendant ce temps .................................................. 17XML ................................................................... 17CSS (Cascading Style Sheet) ..................................... 18DOM2 (Document Object Model level 2) ........................ 201.3. La nouvelle gnration : XHTML ................................ 211.4. Prsentation rapide de la syntaxe et de la structuredu langage ........................................................... 221.5. Rsum .............................................................. 25Chapitre 2 Les outils Web 272.1. Outils de cration de pages Web ............................... 28diteurs commerciaux ............................................. 29diteurs gratuits ..................................................... 312.2. Navigateurs .......................................................... 36Bref historique : Netscape contre Microsoft .................... 37De nouveaux challengers .......................................... 382.3. Rsum .............................................................. 42Chapitre 3 Conception de votre premire page Web 433.1. Conception du site ................................................. 443.2. Cration de la page daccueil .................................... 47Instruction !DOCTYPE ............................................. 47lment HEAD ....................................................... 49lment BODY ...................................................... 53Paragraphes de texte : lment P ................................ 57Lien hypertexte : lment A ....................................... 59lment saut de ligne BR .......................................... 65Attributs dalignements ............................................ 663.3. Rsum .............................................................. 69Chapitre 4 Listes et tableaux 714.1. Listes ................................................................. 73Liste ordonne : lments OL et LI ............................... 73Sommaire4 LE GUIDE COMPLETListe puces : lments UL et LI ................................. 75Liste de dfinitions : lments DL, DT et DD ................... 76Listes imbriques ................................................... 794.2. Tableaux ............................................................. 89Cration dun tableau simple ..................................... 90Contrle de la taille et de la structure des cellules ............. 98Imbrication de tableaux .......................................... 127Autres prcisions concernant les tableaux .................... 1284.3. Rsum ............................................................. 133Chapitre 5 Mise en forme avance 1355.1. Principaux lments structuraux .............................. 136lment HR ......................................................... 136Commentaire HTML .............................................. 137Modification des marges dun paragraphe .................... 1485.2. lments de structuration du texte ........................... 149Autres lments structuraux ..................................... 155lment OBJECT .................................................. 1555.3. Caractres spciaux et encodage de caractres .......... 156Encodages de caractres ........................................ 157Caractres spciaux .............................................. 159Caractres non affichables ...................................... 1635.4. Modification de lapparence du texte ......................... 1645.5. Notation mathmatique ......................................... 169En texte simple ..................................................... 169 laide de graphismes ........................................... 170 laide de MathML ................................................ 1715.6. Rsum ............................................................. 173Chapitre 6 Couleurs et images 1756.1. Les couleurs ....................................................... 177Modification du schma de couleurs de la page ............. 178Modification de la couleur du texte dans un lmentde page ............................................................. 183Modification du schma de couleurs dun tableau .......... 184Prcautions prendre avec les couleurs ...................... 1846.2. Les images ......................................................... 186Image darrire-plan .............................................. 187Sommaire5LE GUIDE COMPLETImage insre ...................................................... 1906.3. Images animes ................................................... 198Insertion dun gif anim ........................................... 199Cration dun gif anim ........................................... 2036.4. Image cliquable ................................................... 210Images cliquables ct client : lments MAP et AREA .... 210Images cliquables ct serveur ................................. 2226.5. Inclusion gnrique dimages : lment OBJECT .......... 224Diminution du temps de tlchargement ...................... 2346.6. Rsum ............................................................. 240Chapitre 7 Jeux dencadrement 2437.1. Jeu dencadrement : lment FRAMESET .................. 2457.2. Contenu dun jeu dencadrement : lment FRAME ....... 248Attributs essentiels de llment FRAME : name et src ..... 257Attributs de mise en forme de llment FRAME ............. 258Autres attributs de llment FRAME ........................... 2597.3. Dtermination du cadre cible : attribut target ............... 261Noms rservs ..................................................... 262tablissement de la cible par dfaut des liens ................ 264Smantique de cible .............................................. 2647.4. Ensembles de cadres imbriqus .............................. 2657.5. Partage de donnes entre cadres ............................. 2697.6. Contenu de remplacement : lment NOFRAMES ........ 2707.7. Cadres en ligne : lment IFRAME ............................ 2717.8. Travail avec les jeux dencadrement .......................... 2737.9. Rsum ............................................................. 275Chapitre 8 Feuilles de style 2778.1. Introduction ........................................................ 2798.2. Attribut style ....................................................... 2818.3. lment STYLE .................................................... 282Dfinition du style de la totalit des occurrencesdun lment donn ............................................... 283Dfinition du style de certaines occurrencesdun lment donn ............................................... 286Dfinition du style dune unique occurrencedun lment donn ............................................... 2876 LE GUIDE COMPLETSommairelments DIV et SPAN ............................................ 288Attribut media ...................................................... 291Masquage du contenu de llment STYLE ................... 2928.4. Feuille de style externe .......................................... 294lment LINK ...................................................... 303Prise en compte du mdium ..................................... 3058.5. Proprits de feuille de style ................................... 306Proprits de modification de texte et de police ............. 306Reprsentation des lments laide dun style ............. 3118.6. Feuille de style en cascade ..................................... 323Cascade et hritage ............................................... 3238.7. Feuille de style auditive, pour un public particulier ........ 3288.8. Rsum ............................................................. 335Chapitre 9 Formulaires 3379.1. Constituants dun formulaire ................................... 339lment FORM ..................................................... 339Types de commandes de formulaire ........................... 341lment INPUT .................................................... 343lment BUTTON ................................................. 350lments SELECT, OPTGROUP et OPTION .................. 352lment TEXTAREA ............................................... 356lment LABEL .................................................... 357Ajout dune structure un formulaire :lments FIELDSET et LEGEND ................................ 3609.2. Formulaire et focus ............................................... 362Navigation par tabulation ........................................ 363Touches daccs rapide .......................................... 3669.3. Commandes inactives et en lecture seule ................... 368Commandes inactives ............................................ 368Commandes en lecture seule ................................... 3699.4. Soumission du formulaire ....................................... 370Mthodes de soumission du formulaire ....................... 370Commandes russies ............................................ 371Traitement des donnes du formulaire ......................... 373Types de contenu du formulaire ................................. 3749.5. Remarques propos des formulaires ........................ 3759.6. Rsum ............................................................. 376Sommaire7LE GUIDE COMPLETChapitre 10 Scripts 37910.1. Introduction aux scripts ......................................... 38110.2. lment SCRIPT .................................................. 383Dfinition du type de script : dclaration META et attributtype de llment SCRIPT ........................................ 386Autres attributs de llment SCRIPT .......................... 387Cas des agents utilisateurs qui ne grent pas les scripts ... 38810.3. vnements intrinsques ....................................... 39010.4. Travail avec les scripts ........................................... 396JavaScript .......................................................... 397ECMAScript ........................................................ 412VBScript ............................................................ 413Traitement de formulaires laide de scripts .................. 415Cookies ............................................................. 41610.5. Applets .............................................................. 424lment OBJECT .................................................. 426lment PARAM ................................................... 429Dclaration et instanciation des objets ........................ 43110.6. Rsum ............................................................. 432Chapitre 11 Publication sur le Web 43511.1. Identification du public .......................................... 43611.2. Accessibilit ....................................................... 438Accessibilit des tableaux ....................................... 441Accessibilit des jeux dencadrement ......................... 453Modules complmentaires (plug-in) ........................... 45411.3. Adaptation plusieurs langues ................................ 456Attribut lang ........................................................ 457Attribut dir .......................................................... 461lment BDO ....................................................... 463Langues et jeux de caractres .................................. 46511.4. Test du site ......................................................... 466Ractions du public ............................................... 47111.5. Publication sur le Web ........................................... 47211.6. Suivi de la frquentation de votre site ........................ 47811.7. Rsum ............................................................. 4838 LE GUIDE COMPLETSommaireChapitre 12 Annexes 48712.1. Jeu des entits de caractres Latin-1 ........................ 48812.2. lments et attributs HTML 4.01 .............................. 491lments HTML 4.01 .............................................. 492Attributs HTML 4.01 .............................................. 50412.3. Compatibilit XHTML/HTML ................................... 513Rdaction correcte des documents ............................ 513Remarques sur les lments .................................... 515Remarques sur les attributs ..................................... 516Exclusions SGML ................................................. 518Instructions de traitement ........................................ 518Modle Objet de Document et XHTML ........................ 519Feuilles de style imbriques (CSS) et XHTML ................. 519DTD XHTML ........................................................ 52012.4. DTD et XML ........................................................ 523Dclaration dun lment ........................................ 524Dclaration dattributs ............................................ 526Dclaration de notations ......................................... 527Dclaration dentits .............................................. 52812.5. Slecteurs CSS ................................................... 53012.6. Ressources Web .................................................. 533Spcifications ...................................................... 533Outils de cration Web ........................................... 533Navigateurs ......................................................... 534Images .............................................................. 534Feuilles de style .................................................... 535Scripts ............................................................... 535Modules complmentaires ...................................... 537Logiciels FTP ....................................................... 537Chapitre 13 Glossaire 539Chapitre 14 Index 559Sommaire9LE GUIDE COMPLETIntroduction HTMLBref historique de HTML .................................................................................................... 12Pendant ce temps ................................................................................................................ 17La nouvelle gnration : XHTML ...................................................................................... 21Prsentation rapide de la syntaxe et de la structure du langage ............................. 22Rsum ................................................................................................................................... 25La lecture de cette introduction pourrait ne pas paratre certainscomme totalement indispensable la comprhension du reste delouvrage. Pourtant, connatre la gense et lvolution de HTML et deslangages apparents peut vous simplifier grandement la vie, en vouspermettant de mieux comprendre les proccupations et buts sous-jacentsdes crateurs et dveloppeurs du langage. Pour la cration dun site Webcomme pour nimporte quelle activit de dveloppement, connatrelhistorique et la philosophie du langage employ procure un avantagesouvent dterminant pour une russite parfaite.1.1. Bref historique de HTMLLe langage HTML (HyperText Markup Language) a t dveloppinitialement par Tim Berners-Lee, alors au CERN. Il a rapidementconnu un vif succs grce au navigateur Mosaic, dvelopp au NCSA.Pendant les annes 1990, il a poursuivi sa croissance en profitant decelle, explosive, du Web, et sest enrichi de nombreuses manires. LeWeb repose sur le respect, par les concepteurs de pages et les diteurs delogiciels, de conventions identiques pour HTML, ce qui a motiv letravail commun sur les spcifications de HTML.Cest un format non propritaire fond sur SGML (Standard GeneralizedMarkup Language) se conformant au standard international ISO 8879. Ilpeut tre cr et trait par de nombreux outils, depuis des diteurs detexte simples jusqu des outils ddis sophistiqus WYSIWYG (WhatYou See Is What You Get ou tel cran, tel crit). HTML emploie desbalises (comme et ) pour structurer un texte en en-ttes,paragraphes, listes, liens hypertextes, etc.La spcification HTML 2.0 (RFC 1866 de novembre 1995) a vu le joursous le contrle de lIETF (Internet Engineering Task Force). Le groupe detravail HTML du W3C (World Wide Web Consortium) diffuse en janvier1997 la spcification HTML 3.2, qui apporte plusieurs amliorations etmodifications.tats davancement dun document W3CTout document W3C passe par plusieurs tats davancement (ou dematurit) portant un nom prcis.Brouillon (WD, Working Draft) : un document publi par le W3C afin quilsoit examin par la communaut compose des membres du W3C, dupublic et des autres organismes techniques.12 LE GUIDE COMPLETIntroduction HTMLChapitre 1Candidat la recommandation (CR, Candidate Recommendation) : leW3C considre que le document a t largement comment etrpond aux exigences techniques du groupe de travail (Working Group). Ilpublie un CR pour obtenir des commentaires sur les mises en uvre.Proposition de recommandation (PR, Proposed Recommendation) : cestdsormais un document technique mature, dont la possibilit de mise enuvre a t largement vrifie. Il est envoy au Comit Consultatif(Advisory Committee) pour adoption finale.Recommandation (REC, Recommendation) : une Recommandation W3Cest une spcification ou un ensemble de rgles ayant reu lapprobation duW3C. W3C en recommande un large dploiement. Elle est analogue unstandard tel que diffus par dautres organismes.Viendra ensuite la spcification HTML 4, un progrs immense parrapport aux versions antrieures. Ses principales innovations concernentlinternationalisation, laccessibilit, les tableaux, les documentscomposs, les feuilles de style, les scripts et limpression.j Internationalisation : les documents peuvent tre crits en toutesles langues et diffuss partout dans le monde. Cela a t accomplien tenant compte du document RFC 2070, qui traite delinternationalisation de HTML. Ladoption de la normeISO/IEC:10646 comme jeu de caractres du document pourHTML a reprsent une tape importante. Cest la normemondiale la plus complte, qui tient compte des problmesconcernant la reprsentation des caractres internationaux, le sensdes critures, la ponctuation et autres particularits des languesmondiales. Cela permet une indexation des documents par lesmoteurs de recherche, une typographie de qualit, la synthse dela parole partir du texte, la csure, etc.j Accessibilit : au fur et mesure de la croissance de lacommunaut du Web et de la diversification des capacits etaptitudes de ses membres, il devient crucial que les technologiesemployes soient appropries leurs besoins spcifiques. Lelangage HTML a t conu pour rendre les pages Web plusaccessibles ceux qui prsentent des dficiences physiques. Lesdveloppements de HTML 4 qui ont t inspirs par le souci delaccessibilit comprennent :une meilleure distinction de la structure et de la prsentationdu document, en encourageant pour cela lutilisation desBref historique de HTML Chapitre 113LE GUIDE COMPLETfeuilles de style au lieu des lments et attributs deprsentation HTML ;lamlioration des formulaires, ce qui comprend lajout detouches daccs rapide (access keys), la possibilit deregrouper smantiquement les contrles des formulaires et lesoptions de llment SELECT ainsi que lajout des tiquettesactives (active labels) ;la possibilit de baliser la description textuelle dun objetincorpor (avec llment OBJECT) ;un nouveau mcanisme dimages cliquables ct client(llment MAP), qui permet aux auteurs dintgrer des lienssous forme de texte et dimages ;laccompagnement obligatoire des images incluses avecllment IMG et des images cliquables incluses avec llmentAREA, dun texte de remplacement, ainsi que des descriptionslongues 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.) utiliseravec les feuilles de style ;lamlioration des tableaux, en y incluant des lgendes, desregroupements de colonnes et des mcanismes pour faciliter larestitution non visuelle ;j Tableaux : le nouveau modle de tableau est fond sur ledocument RFC1942. Les auteurs disposent maintenant dun plusgrand contrle sur leur structure et leur disposition (par exemple,les regroupements de colonnes). Ils peuvent spcifier la largeurdes colonnes et permettre aux agents utilisateurs dafficher lesdonnes de table progressivement, au fur et mesure duchargement, plutt que dattendre le chargement entier du tableau.j Documents composs : le langage HTML offre maintenant unestructure standard pour lincorporation dobjets mdia etdapplications gnriques dans les documents HTML. LlmentOBJECT (de mme que ses anctres, les lments plus spcifiquesIMG et APPLET) fournit le moyen dinclure des images, dessquences vido, de laudio, des mathmatiques, des applicationsspcialises et dautres objets dans un document. Il permet aussiaux auteurs de spcifier une hirarchie de restitutions de14 LE GUIDE COMPLETIntroduction HTMLChapitre 1remplacement aux agents utilisateurs qui ne grent pas certainesrestitutions particulires.j Feuilles de style : les feuilles de style simplifient le balisageHTML et soulagent grandement HTML des responsabilits de laprsentation. Elles donnent aux auteurs comme aux utilisateurs lecontrle de la prsentation des documents (informations sur lespolices de caractres, alignement, couleurs, etc.). Lesinformations de styles peuvent tre spcifies pour un lmentponctuel ou pour des groupes dlments. Elles peuvent se trouver lintrieur du document HTML ou dans une feuille de styleexterne. Les mcanismes qui associent une feuille de style undocument sont indpendants du langage de feuille de style. Avantlapparition des feuilles de style, les auteurs disposaient duncontrle limit sur la restitution des pages. HTML 3.2 comprenaitun certain nombre dattributs et dlments permettant un contrlede lalignement, de la taille de la police de caractres et de lacouleur du texte. Les auteurs abusaient galement de tables etdimages pour la mise en pages. Le temps relativement longncessaire pour que les utilisateurs mettent jour leursnavigateurs implique que ces usages vont perdurer encore pendantun certain temps. Cependant, puisque les feuilles de style offrentdes moyens de prsentation plus puissants, le W3C feragraduellement disparatre nombre dlments et dattributs deprsentation HTML. Les lments et attributs concerns sontmarqus comme dconseills .j Scripts : les scripts permettent aux auteurs de concevoir des pagesWeb dynamiques (par exemple, des formulaires intelligents qui ragissent au cours de leur remplissage par lutilisateur) etdemployer HTML comme support dapplications en rseau. Lesmcanismes fournis pour associer HTML et scripts sontindpendants du langage de script.j Impression : les auteurs voudront parfois aider lutilisateur danslimpression dautres documents, en sus du document courant.Lorsque des documents font partie dun ensemble, on peut dcrireleurs relations en utilisant llment HTML LINK ou encore enutilisant le cadre de description des ressources (RDF) du W3C.Fondamentalement, HTML 4 spare bien plus efficacement la structurede la prsentation. Les lments et attributs de prsentation HTML sontde plus en plus remplacs par dautres mcanismes, en particulier lesfeuilles de style. Plus particulirement, les anciens lments FONT etBASEFONT sont dsormais dconseills.Bref historique de HTML Chapitre 115LE GUIDE COMPLETLa spcification HTML 4.01 est enfin une rvision de HTML 4 quicorrige des erreurs et apporte certaines modifications la versionprcdente. Vous pourrez trouver le texte en franais de la spcificationHTML 4.01 ladresse www.la-grange.net/w3c/html4.01/cover.html Cettespcification incorpore davantage demprunts au langage XHTML(eXtensible HyperText Markup Language), ce qui a permis dallgerdautant la spcification XHTML 1.0.HTML 4.01 existe en trois parfums . Vous spcifiez la variante employer en insrant une ligne au dbut du document. Chaque variantedispose de sa propre dfinition de type de document, ou DTD (DocumentType Definition), qui spcifie les rgles demploi de HTML de faonclaire et succincte :j Le DTD HTML 4.01 strict comprend tous les lments etattributs qui ne sont pas dconseills ou qui napparaissent pasdans les documents avec jeu dencadrement. Pour les documentsqui utilisent ce DTD, prendre la dclaration de type de documentsuivante :j Le DTD HTML 4.01 transitoire inclut la totalit du DTD strictauquel se rajoutent les lments et attributs dconseills (laplupart dentre eux concernant la prsentation visuelle). Pour lesdocuments qui utilisent ce DTD, prendre la dclaration de type dedocument suivante :j Le DTD HTML 4.01 de jeu dencadrement inclut la totalit duDTD transitoire complt des cadres (frames). Pour les documentsqui utilisent ce DTD, la dclaration de type de document suivanteest employe :DTDLa dfinition de type de document, ou DTD (Document TypeDefinition), dfinit la structure dun document, les lments et attributsqui y sont autoriss, et le type de contenu ou dattribut permis. Undocument bien form rpond simplement aux exigences de laspcification, tandis quun document valide se conforme strictement auxrgles tablies par la DTD laquelle il fait rfrence.16 LE GUIDE COMPLETIntroduction HTMLChapitre 1Ltude complte des DTD dpasse lobjectif de ce livre. Uneexcellente prsentation est disponible ladresse http://developpeur.journaldunet.com/tutoriel/xml/031219xml_dtd1a.shtmlDans lensemble de ce livre, nous nous conformerons la spcificationHTML 4.01.1.2. Pendant ce tempsAu cours de cette priode, dautres groupes de travail sintressaient diffrents aspects plus ou moins intgrs progressivement dans lesspcifications HTML successives.XMLXML (eXtensible Markup Language) a t dvelopp sous lgide duW3C en 1996. Il dcrit une classe dobjets nomms documents XML etdcrit partiellement le comportement des programmes informatiques quiles traitent. XML est une application restreinte de SGML (StandardGeneralized Markup Language, ISO 8879). Par construction, lesdocuments XML sont des documents conformes SGML.Ils sont constitus dunits de stockage nommes entits , renfermantdes donnes analyses (parsed) ou non analyses (unparsed). Lesdonnes analyses sont composes de caractres, dont certains formentdes donnes caractre et dautres un balisage. Le balisage code unedescription de la structure logique de stockage du document. XMLprocure un mcanisme imposant certaines contraintes sur cette structurelogique.Un module logiciel nomm processeur XML sert lire les documentsXML et procurer laccs leur structure et leur contenu. Pardfinition, un processeur XML accomplit son travail pour le comptedun autre module, lapplication. Cette spcification dcrit lecomportement attendu dun processeur XML : la faon dont il doit lireles donnes XML et les informations quil doit transmettre lapplication.Pendant ce temps Chapitre 117LE GUIDE COMPLETLes objectifs fondamentaux de XML sont les suivants :j XML doit tre largement utilisable sur Internet.j XML doit prendre en charge une large gamme dapplications.j XML doit tre compatible avec SGML.j Lcriture de programmes traitant les documents XML doit trefacile.j Les dispositifs facultatifs de XML doivent tre limits voire, danslidal, inexistants.j Les documents XML doivent tre clairs et lisibles par leshumains.j La conception XML doit pouvoir tre effectue rapidement.j XML doit tre formel et concis.j Il doit tre facile de crer des documents XML.j Le ct abrupt du balisage XML importe peu.Cette spcification, accompagne de ses standards associs (Unicode etISO/IEC 10646 pour les caractres, Internet RFC 3066 pour les balisesdidentification de langue, ISO 639 pour les codes de noms de langue etISO 3166 pour les codes de noms de pays), procure toutes lesinformations ncessaires pour comprendre XML Version 1.0 etconstruire les programmes informatiques qui le traitent.CSS (Cascading Style Sheet)Le langage CSS permet de dfinir des feuilles de style qui peuvent treappliques un site Web. Il permet la manipulation des styles appliqus chaque balise HTML, via un langage de script.La premire Recommandation CSS (Recommandation W3C du 17dcembre 1996 rvise le 11 janvier 1999) a dfini tout ce qui toucheaux caractristiques graphiques : couleurs, polices, tailles, etc.Une seconde Recommandation (CSS2, 12 mai 1998) a t ajoute pourgrer tous les problmes de positionnement dynamique. Elle dfinit lesfeuilles de style en cascade, niveau 2. CSS2 est un langage de feuille destyle qui permet aux auteurs et aux lecteurs de lier du style (comme lespolices de caractres, lespacement et un signal auditif) aux documentsstructurs (comme les documents HTML et applications XML). En18 LE GUIDE COMPLETIntroduction HTMLChapitre 1sparant la prsentation du style du contenu des documents, CSS2simplifie ldition pour le Web et la maintenance dun site.CSS2 tant construit sur CSS1, toute feuille de style valide en CSS1 estainsi galement valide en CSS2, quelques rares exceptions prs. CSS2prvoit des feuilles de style lies un mdia spcifique, ce qui autoriseles auteurs prsenter des documents sur-mesure pour les navigateursvisuels, les synthtiseurs de parole, les imprimantes, les lecteurs enbraille, les appareils portatifs, etc. Cette spcification introduit aussi lesnotions de positionnement du contenu, de tlchargement des polices, demise en forme des tables, de fonctions dinternationalisation, decompteurs et de numrotage automatique et quelques propritsconcernant linterface utilisateur.Aujourdhui, un troisime projet (CSS3, Brouillon du 23 mai 2001) esten cours de ralisation. Il modularise CSS2. Plusieurs de ces modulessont aujourdhui ltat de Candidats la recommandation. Pour deplus amples informations, consultez le site du W3C. propos du DHTMLLe DHTML (Dynamic HyperText Markup Language) a t invent parNetscape partir de sa version 4. Ce nest pas proprement parler unlangage de balises pour Internet : il nexiste dailleurs aucune normeDHTML part entire. Cest en ralit un ensemble de technologiesInternet associes afin de fournir des pages HTML plus dynamiques.Microsoft a suivi cette voie en dveloppant une autre version deDHTML partir de la version 4 dInternet Explorer.DHTML sappuie sur HTML (ncessaire pour prsenter le document), surles feuilles de style (CSS), qui permettent de dfinir un style pourplusieurs objets et le positionnement de ceux-ci sur la page, sur le ModleObjet de Document (DOM), proposant une hirarchie dobjets afin defaciliter leur manipulation, et enfin sur un langage de script, essentiel pourdfinir des vnements utilisateur. Il sagit essentiellement de JavaScript(dvelopp par Netscape) ou de JScript (dvelopp par Microsoft), etventuellement de VBScript, la tendance tant toutefois demployerdsormais ECMAScript, une tentative de normalisation du noyau dulangage : sa syntaxe, ses mots-cls et ses composants natifs. La troisimedition 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 lescript qui permet dapporter des modifications aprs le chargement de lapage, chose impossible avec le HTML classique. Avec ce dernier, une foisla page charge et affiche, il est impossible dafficher de nouveauxlments ou de les dplacer.Pendant ce temps Chapitre 119LE GUIDE COMPLETLe DHTML serait trs intressant utiliser sil existait une normeofficielle respecte par les navigateurs, ce qui reste loin dtre lecas : un script crit pour un navigateur risque fort de ne pas fonctionnersur un autre sans travail dadaptation. Mme si chacun peutpotentiellement profiter du DHTML, puisque pratiquement plus aucuninternaute nutilise de navigateur de gnration infrieure la version 4,les nombreuses incompatibilits entre navigateurs provoquent de grandesdifficults.DHTML nest donc en rien comparable au PHP, lASP, aux CGI, quipermettent de formater la vole les pages dun site (souvent interfacavec des bases de donnes) en proposant du contenu en temps rel et eninteragissant avec lutilisateur. La majorit des effets du DHTML restentainsi rservs aux intranets, o la population des navigateurs est connue etmatrise.DOM2 (Document Object Model level 2)Le Modle Objet de Document (DOM, Recommandation W3C du 13novembre 2000) est une interface de programmation dapplication (API)pour des documents HTML valides et XML bien forms. Il dfinit lastructure logique dun document et la manire dy accder et de lemanipuler. Dans la spcification DOM, le terme document estemploy au sens large : XML sert de plus en plus reprsenter denombreuses sortes dinformations, qui peuvent tre stockes sur dessystmes varis, et taient traditionnellement considres comme desdonnes plutt que comme des documents. XML prsente nanmoinsces donnes comme des documents, le DOM permettant de grer cesdonnes.Avec le Modle Objet de Document, les programmeurs peuventconstruire des documents, naviguer dans leur structure ainsi quajouter,modifier ou effacer des lments et leur contenu. Tout ce qui se trouvedans un document HTML, ou XML, peut tre touch, modifi, effac ouajout en utilisant le Modle Objet de Document, quelques raresexceptions prs.Un objectif important du DOM en tant que spcification W3C est defournir une interface de programmation standard pouvant tre utilisedans une grande diversit denvironnements et dapplications. Le DOMest conu pour une utilisation dans nimporte quel langage deprogrammation.20 LE GUIDE COMPLETIntroduction HTMLChapitre 11.3. La nouvelle gnration : XHTMLXHTML (eXtensible HyperText Markup Language) constitue une famillede modules et de types de documents existants ou futurs, qui constituentune reproduction, un sous-ensemble et une extension de HTMLreformul en XML. Les types de documents de la famille XHTML sonttous fonds sur XML dans le but de fonctionner avec des agentsutilisateurs fonds eux aussi sur XML. Cest le successeur de HTML,disposant dsormais de sa propre spcification, XHTML 1.0. Celle-ci estla premire Recommandation W3C pour XHTML, cre daprs lestravaux antrieurs sur HTML 4.01, HTML 4.0, HTML 3.2 et HTML 2.0.Elle combine la force de HTML 4 avec la puissance de XML.XHTML 1.0 emprunte les lments et attributs de la RecommandationW3C HTML 4, ce qui permet son interprtation par les navigateursexistants tant que certaines rgles trs simples sont respectes (voirAnnexe C). Vous pouvez donc employer ds prsent XHTML.Vous pouvez transformer vos anciens documents HTML en XHTMLgrce un convertisseur dOpen Source, HTML Tidy. Cet outil limineau passage certaines erreurs de balisage, rduit lparpillement etamliore globalement le balisage, facilitant dautant sa maintenanceultrieure.Comme HTML 4.01, XHTML 1.0 existe en trois parfums : Strict,Transitional et Frameset. Vous choisissez la variante en insrant une ligneau dbut du document, spcifiant le DTD employ.La spcification XHTML 1.0 complte en anglais est disponible enplusieurs formats, dont HTML, PostScript et PDF. Il existe galement denombreuses traductions, dont une version franaise disponible ladresse www.la-grange.net/w3c/xhtml1/Nous signalerons lorsque ncessaire les modifications apporter au codeHTML 4.01 pour une parfaite compatibilit avec la spcificationXHTML 1.0.La nouvelle gnration : XHTML Chapitre 121LE GUIDE COMPLET1.4. Prsentation rapide de la syntaxeet de la structure du langageHTML est fondamentalement un langage trs simple, dans lequel desbalises (tag) dfinissent un lment et ses proprits. En HTML, cesbalises sont les signes infrieur et suprieur (comme dans ).Une balise dfinit un lment : un objet, texte ou autre, encadr par unebalise douverture et une balise de fermeture. Cette dernire estidentique la balise douverture, ceci prs quune barre oblique (slash)est place entre l e caractre infrieur et le nom de llment. Entre lesdeux balises est plac le contenu :TitreIci, llment est TITLE, la balise douverture , le contenuTitre et la balise de fermeture .Certains lments peuvent exceptionnellement tre prsents dans undocument sans balise : et HEAD sont tous les deux valides.Les lments dpourvus de contenu portent le nom dlments vides. Sicette absence de contenu est lie la dfinition de llment, celui-ci estgalement dpourvu de balise de fermeture : un tel lment accomplitquelque chose, puis sarrte, devenant superflu dans le code. Un saut deligne (BR) est un tel lment vide : une fois le saut de ligne effectu, ilny a plus rien faire. Vous rencontrerez par la suite dautres lmentsvides.XHTMLXHTML impose que tout lment possde une balise de fermeture. Ilexiste toutefois une notation particulire signalant en XTML un lmentvide :ouCette construction est prfrer , autorise par XML, maisqui provoque des rsultats inattendus avec certains agents utilisateurs.22 LE GUIDE COMPLETIntroduction HTMLChapitre 1Un lment nest pas une balise !Certaines personnes font rfrence aux lments comme des balises(par exemple, la balise P ). Souvenez-vous que llment P est unechose et que la balise en est une autre. Par exemple, llment HEADest toujours prsent, mme si les balises ouvrante et fermante peuvent tre absentes du document.Les lments se rpartissent en deux catgories principales : les blocs etles lignes, qui quivalent rciproquement aux styles paragraphe etcaractre dun traitement de texte. Un lment de type bloc cre unnouveau bloc (texte ou graphique), gnrant le plus souvent un saut deligne ou de paragraphe lors de son ouverture et/ou de sa fermeture. Leplus classique des lments de type bloc est le paragraphe de texte, maisil en existe bien dautres, comme vous le verrez.En revanche, un lment ligne ne provoque pas de saut de ligne ou deparagraphe et naffecte pas la totalit du bloc. Cest le cas des lmentsmodifiant la police, les couleurs, etc. Quelques trs rares lmentspeuvent tre la fois de type bloc et de type ligne.Tout lment peut possder des lments enfants imbriqus. Il portealors le nom dlment parent :Ceci est le titre importantIci, un lment B (gras) est imbriqu dans llment parent H1 (en-ttede niveau 1). Le contenu de llment H1 est Ceci est le titreimportant, celui de llment B est important.Les lments peuvent possder des proprits associes, appelesattributs, qui peuvent eux-mmes possder des valeurs (par dfaut, ouencore dfinies par lauteur ou par un script). Les couples attribut/valeurapparaissent avant le caractre > final de la balise ouvrante dunlment. Un nombre quelconque de couples attribut/valeur (autoriss),spars par des espaces, peuvent apparatre dans la balise ouvrante dunlment. Ils peuvent survenir dans nimporte quel ordre :Les attributs sont obligatoires pour certains lments.Prsentation rapide de la syntaxe et de la structure du langage Chapitre 123LE GUIDE COMPLETSensibilit la casseLes lments HTML et leurs attributs ne sont pas sensibles la casse.Si thoriquement vous navez donc pas vous proccuper de la bonneutilisation de majuscules et de minuscules dans vos balises, sauf pour lesnoms de fichiers, daprs la spcification, les noms de balise doiventtoujours tre crits en majuscules et les attributs en minuscules.En gnral, mieux vaut toujours placer la valeur dun attribut entreguillemets, mme si HTML tolre leur absence lorsquil sagit dunevaleur numrique (contrairement XTML). Cette valeur place entreguillemets doit tre considre comme sensible la casse. Cettesensibilit la casse des valeurs dattributs peut provenir du navigateur(exceptionnellement) ou du serveur (trs frquemment). Ainsi, une tellefaute de casse peut passer inaperue localement, mais tre flagrante unefois le site publi.XHTMLEn revanche, XHTML est sensible la casse : la spcificationrecommande dcrire tous les noms dlments et dattributs enminuscules. Pour XML, et sont des balises diffrentes. Unsoin particulier doit en outre tre apport au respect de la casse desvaleurs des attributs.Le Tableau 1.1 montre la structure dun lment, illustre de quelquesexemples. Une balise HTML comporte toujours les signes .Tableau 1.1 : Structure dun lment HTMLComposant Description Exemple< Balise ouvrante de la balisedouverture Balise fermante de la balisedouverture>24 LE GUIDE COMPLETIntroduction HTMLChapitre 1Tableau 1.1 : Structure dun lment HTMLComposant Description ExempleContenu Contenu de llment (pas pour tousles lments).MicroApplication Balise de fermeture (parfoisfacultative).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 lenavigateur, servant sa configuration ou prsentes au bnfice delauteur, du lecteur ou dautres intervenants.j Le corps (BODY) contient les donnes qui seront affiches,encadres par des balises spcifiant leur structure.Une page HTML se prsente donc fondamentalement comme suit :...contenu...contenu...Nous reviendrons bien sr plus en dtail par la suite sur cette structure.1.5. Rsumj HTML est un langage conu par le CERN au dbut des annes1990. Fond sur SGML (Standard Generalized Markup Language), ila connu plusieurs volutions avant de parvenir la spcificationactuelle HTML 4.01.j HTML spare dsormais efficacement la structure de laprsentation. Les lments et attributs de prsentation HTML sontde plus en plus remplacs par dautres mcanismes, en particulierles feuilles de style.j XML (eXtensible Markup Language), CSS (Cascading Style Sheet)et DOM (Document Object Model) sont autant de technologiesRsum Chapitre 125LE GUIDE COMPLETapparentes dsormais intgres ou exploites en tout ou partie et par HTML.j XHTML reprsente la future gnration de HTML. Laspcification actuelle est XHTML 1.0.j HTML est un langage dans lequel des balises (tag) dfinissent unlment et ses proprits. En HTML, ces balises sont les signesinfrieur et suprieur (). Une balise dfinit un lment encadrpar une balise douverture et une balise de fermeture. Le contenufigure entre ces deux balises.j Il existe deux catgories principales dlments : les blocs et leslignes. Un lment de type bloc cre un nouveau bloc, gnrant leplus souvent un saut de ligne ou de paragraphe lors de sonouverture et/ou de sa fermeture. En revanche, un lment ligne neprovoque pas de saut de ligne ou de paragraphe et naffecte pas latotalit du bloc de texte.j Les lments peuvent possder des proprits associes, ouattributs, dotes de valeurs. Les couples attribut/valeurapparaissent avant le caractre > final de la balise ouvrante dunlment. Les attributs sont obligatoires pour certains lments.26 LE GUIDE COMPLETIntroduction HTMLChapitre 1Les outilsWebOutils de cration de pages Web ..................................................................................... 28Navigateurs ............................................................................................................................ 36Rsum ................................................................................................................................... 42Pour bien concevoir un site Web, vous devez connatre et matriser deuxtypes doutils : un ou plusieurs diteurs HTML, qui permettent de crereffectivement les pages et donc le site Web, et un ou plusieursnavigateurs, qui affichent rellement ces pages Web.Vous pourriez penser : daccord, parler des logiciels de cration desites est logique, mais pourquoi aborder les navigateurs ? La rponseest simple : malgr lexistence des Recommandations du W3C, la petite guerre entre les grandes familles de navigateurs ainsi que leurobstination prconiser plutt telle ou telle mthodologie (et surtout pascelle utilise par lautre) fait que le rendu dune mme page HTML peutgrandement diffrer selon le navigateur employ.2.1. Outils de cration de pages WebUn diteur HTML a pour but dviter la saisie manuelle souventfastidieuse des caractres spciaux, des codes couleur, de lencodage desbalises, etc. Comme il en existe un grand nombre, quelques prcisionssur les outils disponibles peuvent tre utiles. Remarquez toutefois quetoute apprciation en ce domaine relve du subjectif : nous nenprsentons que quelques-uns, classs par ordre alphabtique. La plupartdes diteurs tant disponibles sur le Net en version dvaluation, il peuttre utile den tester plusieurs avant de procder un choix dfinitif.Les diffrents outils peuvent tre classs en deux catgories : les diteurscommerciaux et les produits Open Source (gratuits). Ils se rpartissentgalement entre diteurs WYSIWYG (What You See Is What You Get) etles diteurs en texte brut, qui ncessitent de connatre le HTML. Cesderniers disposent gnralement dune fonction de prvisualisation danslaquelle le codage des balises HTML napparat plus. Gardez cependanttoujours lesprit que cette prvisualisation nest, et ne sera, jamaisfidle 100 % par rapport ce qui sera affich par un navigateur. notre avis, mieux vaut viter les diteurs qui crivent tout pourvous . Un diteur doit vous faciliter le travail tout en vous laissant lamain dans llaboration de votre page. Adoptez lditeur avec lequelvous vous sentez le plus laise. Mme sil nest pas le plus clbre, ilsera votre compagnon de longues heures de travail. Dailleurs, pourquoise limiter un seul diteur ? Il est tout fait envisageable demployer unditeur volu pour les premiers jets, afin de disposer rapidement dun28 LE GUIDE COMPLETLes outils WebChapitre 2brouillon exploitable, puis de recourir un diteur de la premiregnration (plus proche des balises brutes) pour une personnalisationplus pointue.diteurs commerciauxAdobe Golive CS2 (Windows, MacIntosh)Adobe Golive est avant tout destin aux infographistes. Il bnficie dusavoir-faire dAdobe en matire dimages et dillustrations et permet lagestion de la mise en page au pixel prs, la gestion de linteractivitgrce une ligne du temps et un diteur JavaScript, la cration desfeuilles de style WYSIWYG et la gestion votre site. Les autresconcepteurs se sentent un peu perdus dans cet univers de palettes etautres outils. Le code gnr est dune complexit certaine, faire plirtout puriste du codage HTML, tandis que son prix reste lev (479 Q).Dreamweaver MX 2004 (Windows, Mac)Macromedia Dreamweaver est considr par beaucoup comme lemeilleur diteur HTML du moment. Il permet de concevoirintelligemment la cration de sites (codage HTML propre etacadmique, compatibilit avec les diffrents navigateurs, mises jourdans tout le site, etc.). Certainement un peu droutant lors de la premireprise en main, en raison de son nombre impressionnant de palettesdoutils, il est facile de sy habituer : cet diteur WYSIWYG convientaussi bien aux dbutants quaux initis. Complet, performant,professionnel et volutif, son seul handicap est son prix lev (530 Q,mais seulement 260 Q en version ducation).FrontPage (Windows)Les utilisateurs de Microsoft Office, et plus spcialement de Word, neseront pas dpayss par linterface de lditeur de Microsoft : sa prise enmain leur est ainsi aise. Cest un bon produit, auquel on ne peutreprocher quune faon peu acadmique dcrire le HTML : il estfrquent que des navigateurs autres quInternet Explorer prouventquelques difficults interprter des pages crites avec cet diteur(240 Q).Outils de cration de pages Web Chapitre 229LE GUIDE COMPLETHotDog Professional 7.0.1 (Windows)La nouvelle version de la suite HotDog Professional Webmaster, de lasocit Sausage Software, prend en charge un nombre encore plus grandde langages (HMTL, JavaScript, CSS, PHP, ASP, VBScript).Particulirement puissante, elle dispose d peu prs toutes les fonctionsenvisageables. Linterface souvre sur une fentre mixte qui prsente la fois le code et sa mise en page obtenue via le navigateur. De trsnombreux outils et fonctions sont disponibles. Les outils Supertoolzpeuvent tre tlchargs en groupe ou sparment depuis le site Internetde Sausage Software. Lutilisation de la couleur en fonction des balisesou de la syntaxe, la gestion de sites, la prise en charge des codes declassement PICS (filtrage des contenus indsirables) et des canaux Webdenvoi de donnes linstigation du serveur sont quelques-unes despossibilits offertes. HotDog affiche automatiquement en rouge touteerreur de syntaxe HTML quil dtecte. Cette version intgre XaraMenuMaker (pour la cration de menus anims en DHTML ) ainsi queBloomer (facilite la cration danimations flash) (100 $).Namo WebEditorIntermdiaire entre FrontPage Express et FrontPage 2000, cet diteurdevrait ravir les webmestres dbutants intermdiaires refusant derecourir des usines gaz plus performantes, mais aussi pluscomplexes. Raisonnablement complet et intelligemment conu, le prixde Namo WebEditor reste raisonnable (99 $).WebExpert 6.0 (Windows)WebExpert est un des rares diteurs de ce groupe ne pas treWYSIWYG, mais proposer un volet de visualisation permettant devrifier instantanment le rsultat de son codage. Intressant pour ceuxqui prfrent avoir la sensation de coder du HTML plutt que celledemployer un traitement de texte. Cest un diteur complet, intelligent,respectueux du code et de lesprit HTML. Disposant de scripts etdaides intgrs, il permet de travailler rapidement et efficacement sur(X)HTML, CSS, JavaScript, ASP et PHP. Il possde un autre intrt :son faible prix (67 Q). Vous pouvez facilement en trouver une versiondvaluation de 30 jours en tlchargement.30 LE GUIDE COMPLETLes outils WebChapitre 2Web Fast (Windows)Web Fast est plus un outil complet de gestion de site quun simplediteur Web. Ds son lancement du logiciel, il prend en charge lestapes ncessaires la construction du site. Web Fast intgre le sitelui-mme, le logiciel FTP ncessaire sa publication sur Internet, lesfonctions de commerce lectronique (versions Plus et Pro) avec suivi decommandes, le paiement scuris (version Pro), les statistiquescompltes du site et un back-office. Le prix schelonne selon la versionde 75 456 Q.Il existe bien dautres diteurs commerciaux, parmi lesquels HotMetal(500 $, voir www.xmetal.com/) et CoffeeCup HTML (www.coffeecup.com/html-editor/, 49 $). Vous pourrez les dcouvrir en lanant une recherche laide de votre moteur de recherche favori, en employant commemot-cl html editor ou diteur html . Ici, comme souvent, Googlereste votre meilleur ami !Word (Windows)Word peut galement tre considr comme un diteur HTML : il estpossible denregistrer un texte au format HTML, le traitement de textese chargeant dajouter toutes les balises ncessaires en fonction de cequi a t saisi. Cela est malheureusement accompagn dun fatras debalises absolument superflues, le respect des spcifications W3C restantinterprt de faon trs personnelle par Microsoft dconseillerabsolument.diteurs gratuitsEst-il rellement ncessaire de recourir un logiciel payant ?Aucunement. Il existe de trs nombreux produits gratuits, capablesdeffectuer un excellent travail et probablement trs suffisants pour lacration dun site personnel.1st Page 2000 (Windows)1st Page 2000 est un outil de cration de sites Web aussi adapt lacration des pages HTML qu llaboration de scripts dans les langagesde programmation les plus rcents. Son interface disponible sous troisformes le destine tant aux dbutants quaux professionnels du secteur.Outils de cration de pages Web Chapitre 231LE GUIDE COMPLETCe logiciel offre toutes les fonctionnalits courantes de ses concurrentspayants, jusquaux plus sophistiques comme en tmoigne la prsencedun convertisseur XML, dun vrificateur de syntaxe, dun compresseurde documents ou encore dun client FTP intgr. Il offre par ailleurs despossibilits originales comme le redimensionnement automatique desimages, la correction de lorthographe en cours de frappe (en anglais) etla prvisualisation dans quatre navigateurs diffrents. Outre ldition enJavaScript particulirement bien prise en charge, 1st Page 2000 permetde manipuler les fichiers Flash et Shockwave. Il sait identifier etsurligner la syntaxe des langages DHTML, ASP, SSI, CFML et WebTV.Le paquetage comprend 450 scripts JavaScript, 15 en DHTML , 17 enPerl , 6 en HTML et 2 scripts CGI. Un bon niveau HTML est ncessaire.Il nest actuellement disponible quen anglais et peut tre trouv entlchargement un peu partout. Le site officiel se trouve ladressewww.evrsoft.com/1stpage2.shtml.Amaya (Windows, Unix, AIX, Solaris, Linux)Navigateur et diteur WYSIWYG gratuit du W3C. Il sert dmontrer et exprimenter la plupart des nouveaux formats et protocolesdvelopps par le consortium W3. Il est adaptable et extensible, et prenden charge notamment MathLM. Amaya propose par dfaut de crer unnouveau document uniquement dans une des trois versions de laspcification XHTML 1.0 (strict, transitoire, de jeu dencadrement),mais il est possible de transformer le document en version HTML 4.01(ou mme en version XHTML 1.1) laide de loption de menu File >Change the document type. Cest un produit intressant, ne serait-ce quepour vrifier la conformit de votre code (www.w3.org/Amaya/).Figure 2.1 :Interface dAmaya32 LE GUIDE COMPLETLes outils WebChapitre 2diteur Mozilla/Netscape Composer (Linux,Windows et Mac OSX)Inclus dans la suite Netscape Communicator depuis la version 4.0,Netscape Composer tait un diteur gratuit. La dernire version de lasuite Mozilla (actuellement la 1.7.7) contient toujours cet excellentditeur, dsormais nomm Mozilla Composer. Tlchargez-la enfranais sur www.mozilla-europe.org/fr/ Vous disposerez, en plus duclbre navigateur de lditeur, du logiciel grant la messagerie et lesforums et de celui de discussion en direct (Chatzilla).Lditeur Mozilla propose toutes les grandes fonctions dun diteur Web,dont des modes en code source ou en WYSIWYG, lintgration defeuilles de style et un logiciel ftp (file transfert protocol) pour envoyer vospages sur un serveur distant. Bien conu, cet diteur WYSIWYG reprendles principales, et donc les plus usuelles, fonctions du HTML. Il restecependant un peu lger face aux diteurs HTML plus spcialiss.FrontPage ExpressInclus dans la suite Microsoft Internet Explorer 4.0, 5.0 et suivantes,FrontPage Express est galement un diteur gratuit. Il reprend lesfonctions les plus usuelles du HTML. Son interface est voisine de celleFigure 2.2 : diteur MozillaOutils de cration de pages Web Chapitre 233LE GUIDE COMPLETde Microsoft Word. Attention cependant, il crit principalement pourMicrosoft Explorer, ce qui peut provoquer de mauvaises surprises avecdautres navigateurs. PrudenceNotePad (Windows)Eh oui, le bon vieux Bloc-Notes de Windows peut servir dditeurHTML ! Si vous employez Internet Explorer ou que vous en disposez, ilest mme probable que vous vous en servirez (ou que vous vous en tesdj servi) votre insu : lorsque vous choisissez dafficher le codesource dune page avec ce navigateur (Affichage >> Source), celui-cisaffiche dans le Bloc-Notes. Si vous travaillez en local, vous pouvezimmdiatement modifier le code, enregistrer le fichier, puis rafrachirvotre navigateur (bouton Actualiser ou Affichage >> Actualiser) pourvoir les rsultats de vos modifications ; et cela dune faon souvent plusfidle que celle du volet de prvisualisation des diteurs plus volus.Oserai-je avouer que, comme cest le cas pour dautres anciensprogrammeurs, le Bloc-notes reste mon principal diteur HTML, surtouten raison du mcanisme qui vient dtre expliqu : jai pris lhabitude detravailler ainsi un site en local sous IE, mme si mon navigateur Webprincipal est en ralit FireFoxFigure 2.3 : Front Page ExpressFigure 2.4 :Affichage du codesource dans leBloc-Notes, depuisInternet Explorer.34 LE GUIDE COMPLETLes outils WebChapitre 2Nvu 1.0/KompoZer (Linux, Windows et MacOSX)Nvu (prononcer N-viou ) est la refonte du module ddition HTMLde Mozilla dvelopp par Disruptive Innovations. Il permet de crerfacilement des pages Web en mode WYSIWYG. Sil nest pas aussipuissant que les poids lourds comme Dreamweaver ou Adobe Golive, ilreste largement suffisant pour la majorit des utilisations. Nvu permet decrer des pages Web et de grer un site sans aucune connaissancetechnique ou apprentissage du HTML, ce qui le rend accessible quasiment tout le monde. Il permet galement de gnrer des documentsen XHTML, dditer des pages en PHP et contient un diteur de feuillesde style intgr (CaScadeS) trs pratique. Vous trouverez plusdinformations sur Nvu sur le site officiel du projet Nvu (en anglais),www.nvu.com. Cerise sur le gteau, il existe une version en franais !Produit recommand.Nvu nest toutefois plus maintenu et French Mozilla recommande lepassage Komposer (http://www.kompozer.net/). La version propose entlchargement est anglaise, mais il existe des kits de localisationdisponibles sur le site officiel ou sur le site de French Mozilla (http://frenchmozilla.sourceforge.net/nvu/).Figure 2.5 : Interface de NvuOutils de cration de pages Web Chapitre 235LE GUIDE COMPLETSoThink HTML Editor (Windows)SoThink HTML Editor (anciennement nomm CutePage : vous pourrezencore le trouver sous ce nom) est un diteur HTML dot denombreuses fonctions, ainsi que dun composant FTP capable detlcharger les fichiers sur un serveur. Des outils supplmentairespeuvent tre tlchargs depuis le site de SourceTec Software. Appels widgets (un widget, contraction de Windows et de gadget, dsignesous Unix et Linux un outil graphique permettant daccomplir uneaction. Windows emploie plutt le terme de contrle ), ils concernenten particulier la cration de boutons, bannires et menus. SoThink est unditeur qui apportera beaucoup aux dbutants et auteurs de pages Webmoyennement expriments (www.sothink.com/htmleditor/).Comme pour les diteurs commerciaux, il existe bien dautres diteursgratuits. L encore, vous pourrez en identifier en lanant une recherche laide de votre moteur de recherche favori.En conclusion, notre avis est quun logiciel gratuit est largementsuffisant pour les besoins dun utilisateur normal et peut suffire pourune petite ou moyenne entreprise. Comme nous lavons dj voqu, lechoix de ce logiciel dpend de vos prfrences personnelles. Dans lesexemples de ce livre, nous nous servirons dun diteur en texte brut (icile Bloc-Notes de Windows, mais ce peut tre un tout autre produit, parexemple Vi sous Linux), ainsi que des diteurs Amaya du W3C et delexcellent Nvu en franais.2.2. NavigateursSi vous souhaitez que votre site soit visible par tous dans de bonnesconditions, et quil ne soit pas rserv aux seuls francophones possdantune vue de 10/10, et disposant de surcrot exclusivement dInternetExplorer version 6 corrig SP2 vous devez prendre en compte lesnavigateurs de votre public. Sil sagit dun intranet dentreprise, lachose est gnralement facile. Si, en revanche, vous voulez vous ouvrirau monde entier, la tche se complique. La premire tape consiste donc examiner les navigateurs actuellement employs et connatre lesprincipales diffrences existant entre eux.36 LE GUIDE COMPLETLes outils WebChapitre 2Navigateur ou explorateur ?Dans les premiers temps, Netscape Navigator tait le seul produitexistant. Le terme anglais Web browser a donc logiquement t traduit navigateur Web . Suite larrive dInternet Explorer, Microsoft ainsidieusement tent de faire passer dans les murs le terme explorateur Web . Certains technocrates franais ont alors tent unesolution intermdiaire, en proposant comme terme officiel fureteur ,tandis que les Canadiens prfraient butineur . Nous nous entiendrons dans ce livre au terme consacr par lhistoire, soit navigateur , malgr une tendresse personnelle pour butineur.Bref historique : Netscape contre MicrosoftComme nous lavons dj voqu, le Web est n vers 1990 des travauxde Tim Berners-Lee. Le premier navigateur digne de ce nom, Mosaic,est cr en 1992 par le NCSA (National Center for SupercomputingApplications), un dpartement de luniversit de lIllinois. Le projet taitdirig par Marc Andreessen. Ses tudes peine termines, ce dernier serend dans la Silicon Valley, o il participe la cration de lentrepriseMosaic Communications. Le nom Mosaic tant la proprit du NCSA,lentreprise est rebaptise Netscape.Au milieu de lanne 1995, le navigateur de Netscape rgne en matre :il tait alors dpourvu de tout concurrent srieux. Sa part de march napas t mesure avec prcision cette poque, mais tout le mondesaccorde dire quelle dpassait 80 %. Ayant pris conscience delimportance du Web, Microsoft conoit alors son propre navigateur,Internet Explorer, dont la premire version est distribue gratuitementavec Windows 95.Ds 1996, la part de march du navigateur de Netscape ne cesse dedcrotre, au rythme de 1 % par mois environ. Mme si, comme laconstat la justice amricaine, Microsoft a abus de sa situation demonopole dans le domaine du systme dexploitation pour imposer sonnavigateur aux constructeurs de micro-ordinateurs, force est toutefois dereconnatre qu partir de la version 4, Internet Explorer lemporte sur leplan technique : cette avance ne sest ensuite jamais dmentie.En 1998, le code du navigateur Netscape est rendu public. Les logicielslibres et Netscape ont en effet un ennemi commun : Microsoft. Endonnant des bnvoles la possibilit de participer lvolution de sonnavigateur, Netscape pense probablement pouvoir acclrer et amliorerNavigateurs Chapitre 237LE GUIDE COMPLETsa production. Cest tout le contraire qui se passe. La version 5 dunavigateur ne verra jamais le jour, et la version 6 fut, ses dbuts, trsdcevante (oserai-je dire que les termes usine gaz et lenteurextrme sont ici des euphmismes ?) et surtout trs tardive. Ds 1999,les parts de march de Netscape et Microsoft sont respectivement de 29et 69 % (source : Statmarket).Un des gros dfauts du navigateur de Netscape concernait laffichagedes tableaux. Lorsque ceux-ci commencent tre employsmassivement pour la conception des pages Web, ce dfaut clate augrand jour. La version 6 est corrige, malheureusement un peu tard : audbut de lanne 2000, la part mondiale de march du navigateur deNetscape nest plus que de 18 %. Au milieu de lanne 2001, il taitgnralement admis quelle tait descendue autour de 12 %, maisquelle tait stabilise. Lapparition de la version 6 du navigateur deMicrosoft (fin octobre 2001) provoque une nouvelle baisse de la part demarch de son concurrent : elle descend en dessous de 10 % et continue dcrotre, tandis que la version 6 dInternet Explorer connat enrevanche un rel succs. La chute sacclre alors de manireexponentielle. 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 enfin comme un produitsrieux, capable de rivaliser avec la version 6 de son concurrent, sauf ence qui concerne la vitesse, pourtant amliore. Netscape a mis sur ladiffrence : son produit respecte les standards du W3C. Netscape aabandonn les technologies propritaires (JavaScript) au profit detechnologies standardises (ECMAScript), alors que Microsoft restecompltement en marge des Recommandations W3C. Le rachat deNetscape par AOL place toutefois le sort de Navigator entre les mains deces derniers : ce fournisseur daccs Internet procure toujours sesclients un navigateur qui nest autre que IE personnalis .De nouveaux challengersEn juin 2002, daprs OneStat, une socit spcialise dans lanalyse detrafic, Internet Explorer dpasse la barre des 95 %. Larrive deNetscape Navigator 7.0 en version dvaluation au mois de mai, suiviepar celle de Mozilla 1.0 au mois de juin, stabilise cependant le dclin deNavigator. Le prochain abandon de IE par AOL devient de plus en plusprobable : Compuserve, filiale dAOL, utilise dsormais un navigateur 38 LE GUIDE COMPLETLes outils WebChapitre 2moteur Gecko. Le navigateur de Netscape aurait donc finalement unechance de survivre.Dbut 2005, avec 90 % du march selon le cabinet dtudes spcialisWebSideStory, Internet Explorer est toujours, de loin, le navigateurInternet le plus utilis dans le monde, bien quayant perdu un peu plusde cinq points depuis juin, principalement au bnfice de Firefox,lapplication de la fondation but non lucratif Mozilla. Celui-ci sadjugeprs de 5 % du march en janvier, contre 2,7 % en octobre 2004. Dansles mois qui suivent, Firefox continue sa progression, directement auxdpens dInternet Explorer.Au cours de lt 2005, Netscape jette lponge : la suite Mozilla 8, dontle nom de code tait Seamonkey, ne verra jamais le jour. Lquiperejoint la Fondation Mozilla pour se consacrer au dveloppement deFirefox et de Thunderbird, le logiciel de messagerie frre.Entre 2005 et 2008, Firefox progresse de prs de 13 points, grignotantsur Internet Explorer et sur les autres produits bass sur Mozilla (la suiteet Netscape). On peut remarquer les audiences de Safari (rserv auxderniers Mac OS X) un peu plus de 1,5 %. Opera est dsormaismarginal avec 0,1 %.Tableau 2.1 : Parts de march des navigateurs Web entre janvier 2005et janvier 2008 daprs Libstat, Mdiamtrie-eStat et Journal du Net(http://solutions.journaldunet.com/dossiers/chiffres/navigateurs.shtmlet http://www.libstat.com/pages/navigateur.htm)Navigateur Pourcentage au01/2005Pourcentage au01/2007Pourcentage au01/2008InternetExplorer90,7 % 85,3 % 73,4 %Mozilla/Firefox 8,1 % 11,7 % 20,7 %Safari 1,2 % 1,6 % 1,5 %Opera 0,3 % 0,6 % 0,1 %Autres 0,6 % 0,3 % 3,3 %Ces chiffres dpendent toutefois largement du pays et du typedutilisateur : selon certaines donnes, la part de march de Firefoxpourrait dj dpasser 35 % en France chez les utilisateurs individuels(hors entreprises).Navigateurs Chapitre 239LE GUIDE COMPLETIl est galement intressant dexaminer les systmes dexploitationemploys. Windows Vista atteint 13 %, Windows XP est crdit de77 %. Les anciens Windows ne reprsentent plus que 4 % desinternautes franais. Mac et Linux progressent tout en restant modestesavec respectivement 3,5 et 0,3 % de ces internautes en janvier 2008.Concrtement, cela signifie que dans limmdiat vous devez tester vospages avec Internet Explorer (de prfrence versions 6 et 7) et Firefoxpour toucher prs de 96 % du public potentiel. Si possible, effectuezgalement un test avec Safari (sur une machine Mac), Netscape etMozilla (sur une machine Windows) et enfin avec Konqueror sur unemachine Linux.Tableau 2.2 : Comparaison entre navigateurs Web(source : http://kb.mozillazine.org/Intro_:_Comparison)Dispositif MozillaSuite/FirefoxCamino Opera (http://opera.com/)Apple Safari(http://apple.com/safari/)MicrosoftInternetExplorer(http://microsoft.com/windows/ie/)Plates-formesprises enchargeWindows,Mac OS X,Linux, autresMac OS X WindowsLinux,Symbian (http://symbian.com/),Motorola(http://motorola.com/), autresMac OS X WindowsCot Gratuit Gratuit 39 $ (ougratuit avecpublicits)Intgr IntgrOpen Source Oui (http://mozilla.org/MPL/)Oui (http://mozilla.org/MPL/)Non Partiellement(http://developer.apple.com/darwin/projects/webcore/)NonOnglets denavigationOui Oui Oui Oui Avec unprogrammede tiercepartie(commeMyIE2)Blocage despopupOui Oui Oui Oui OuiGestionnairedeformulaires/mots depasseOui Oui Oui Oui Limit viamodulescomplmen-tairesThmes Nombreux(http://texturizer.net/firefox/themes/)Quelques-unsNombreux(http://my.opera.com/community/customize/)Quelques-unsVia uneapplicationspare40 LE GUIDE COMPLETLes outils WebChapitre 2Tableau 2.2 : Comparaison entre navigateurs Web(source : http://kb.mozillazine.org/Intro_:_Comparison)Dispositif MozillaSuite/FirefoxCamino Opera (http://opera.com/)Apple Safari(http://apple.com/safari/)MicrosoftInternetExplorer(http://microsoft.com/windows/ie/)Extensions Nombreuses(http://update.mozilla.org/,(http://extensionroom.mozdev.org/) et(http://extensionsmirror.nl/)Nant Nant Quelques-unesQuelques-unesPersonna-lisationIntensive(avecabout:config)? Intensive(avec lesfichiers prefset .ini)? Partielle (laide desprfrenceset desfichiers duregistre et destratgies)Vous trouverez dans lAnnexe C les adresses o vous procurer lesdiffrents navigateurs. Il convient galement de citer Lynx (http://lynx.browser.org/), un navigateur en texte seul largement employ par lespersonnes souffrant de handicaps visuels. Il est souvent employ encombinaison avec un convertisseur texte-parole.Convertisseurs texte-paroleDe nombreuses personnes handicapes, particulirement lesmalvoyants, ont recours des convertisseurs texte-parole. Il sagit deprogrammes capables de lire haute voix un document informatique.Ces convertisseurs emploient souvent une inflexion particulire ou unsignal lorsquils rencontrent un lment HTML particulier, si bien quilest dconseill dutiliser de faon incorrecte ces lments si votre publicest susceptible dinclure des handicaps. Et, moins que votre site nesoit pas prsent sur Internet, il est probable quil sera visit par unFigure 2.6 : Lynx, navigateur en texte seul, affichant la page daccueil deGoogle.Navigateurs Chapitre 241LE GUIDE COMPLETnombre certain de handicaps. Ces convertisseurs font partie desagents utilisateurs HTML.Pourquoi agent utilisateur plutt que navigateur ?Mme si les navigateurs sont probablement les principauxconsommateurs de documents HTML et XHTML, dautres programmeset systmes lisent ces documents. Par exemple les convertisseurs texte-parole que nous venons dvoquer ou les moteurs de recherche qui lisentles 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 encharge , 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 plusde prcisions ce sujet) pour viter ce problme.2.3. Rsumj Un diteur HTML a pour but dviter la saisie manuelle souventfastidieuse des caractres spciaux, des codes couleur, delencodage des balises, etc.j Les diteurs HTML peuvent tre commerciaux ou gratuits,WYSIWYG (What You See Is What You Get) ou en texte brut.j Les navigateurs ne traitent pas tous le HTML de la mme faon :pour bnficier dune audience maximale, il est important deconnatre ceux employs par votre public et dadapter votre codeen consquence.j Le march des navigateurs volue avec le temps : NetscapeNavigator, au dbut le seul navigateur existant, a t concurrencpeu peu par Internet Explorer qui la finalement supplant. Unnouveau venu, Firefox, simplante de plus en plus.j Un agent utilisateur est un programme capable decomprendre le langage HTML. Les navigateurs sont des agentsutilisateurs 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 COMPLETLes outils WebChapitre 2Conceptionde votre premirepageWebConception du site ............................................................................................................... 44Cration de la page daccueil ........................................................................................... 47Rsum ................................................................................................................................... 69Vous avez choisi un ou plusieurs diteurs de pages Web, avez tlcharget install ventuellement quelques navigateurs complmentaires fin detest : vous tes prt passer la conception de votre site.lments tudis dans ce chapitre :j !DOCTYPEj HTMLj HEAD, TITLE, METAj BODY, Hn, P, A, BR3.1. Conception du siteTout dabord, prenez un peu de temps pour rflchir, si possible avecune feuille de papier et un stylo. Pour bien concevoir votre site ds lespremiers instants, vous devez en prvoir ds le dbut sa structure et soncontenu. Il sera bien sr toujours possible de procder desmodifications par la suite (vous ny manquerez dailleurs pas), mais letemps consacr cette rflexion initiale sera largement amorti !Un site peut tre considr comme une arborescence contenant leslments suivants :j Une page daccueil, avec une barre de navigation.j Une ou plusieurs pages secondaires, dont certaines peuventgalement comporter une nouvelle barre de navigation : celacorrespond une nouvelle ramification de larborescence.j ventuellement des pages tertiaires, et ainsi de suiteLe site le plus simple ne comporte quune page, tandis que les sitescomplexes peuvent possder de trs nombreuses ramifications. Dans cedernier cas, le site propose souvent une carte du site, destine faciliterla navigation des utilisateurs (voir Figure 3.1).Sur votre feuille de papier, commencez tracer larborescence de votresite, en figurant chaque page par un rectangle (pas trop petit !). Danschaque rectangle, donnez un titre la page, puis notez un aperu ducontenu prvisionnel.Nhsitez pas rpartir des informations trop abondantes en plusieurspages. Les questions se poser ce stade sont les suivantes :44 LE GUIDE COMPLETConception de votre premire page WebChapitre 3j Quel est le but de ce site ?j Linformation propose est-elle utile ?j Une mme page ne comporte-t-elle pas trop dinformations ? Sioui, est-il possible de diviser logiquement ces informations ?j La structure obtenue est-elle quilibre et pertinente ?Dans le cadre de lexemple de ce livre, le site envisag est prsent dansla figure suivante.Figure 3.1 : Page de plan du site du portail de ladministration franaise(www.service-public.fr/aide/plan.html)PagedaccueilMargionMafamilleMespassions Figure 3.2 :bauche du plan denotre site prsentdans louvrageConception du site Chapitre 345LE GUIDE COMPLETCela fait, vous tes prt dbuter rellement la cration de la premirepage de votre site Web. Vous allez commencer par la page la plusimportante, la page daccueil. la fin de ce chapitre, vous aurez crune page identique celle de la figure qui suit, dont le code est prsentdans le listing suivant.Listing 3-1 : Page daccueil telle que conue la fin de ce chapitre (version 1.3.3)"Ma page daccueil"Ma page daccueilBienvenue sur mon site.Vous trouverez sur ce site des informations :sur ma rgion ;sur ma famille ;sur mes passions.Ecrivez-moi !.Nous allons procder pas pas pour la cration de cette page, enexpliquant chaque tape les instructions et lments employs.Figure 3.3 :Page daccueil telle que conue la fin de ce chapitre46 LE GUIDE COMPLETConception de votre premire page WebChapitre 33.2. Cration de la page daccueilLa page daccueil est la page la plus importante dun site : cest elle quiincitera le visiteur examiner plus en dtail le site ou le quitterimmdiatement. Il existe de nombreuses faons de rendre attrayante unepage daccueil (ou dailleurs toute page) : vous les dcouvrirez peu peu au fil de la lecture de ce livre.Il est frquent de se contenter dune bauche de page daccueil aumoment de la construction du site, pour la fignoler en dernier lieu. Il nesagit donc pour le moment que de crer une premire page relativementsimple. Gardez bien prsent lesprit que, partir de HTML 4, le plusimportant concerne la structure de la page. La majorit desenjolivements sont facilement ajouts par la suite.La dmarche est ici trs similaire celle recommande lors de lardaction dun document laide dun traitement de texte : vouscommencez par une frappe au kilomtre , en privilgiant la structure(les phrases, paragraphes, chapitres et autres subdivisions) par rapportaux enrichissements qui ne seront apports quultrieurement,gnralement laide dune feuille de style.En effet, une page Web nest en ralit gure plus quun fichier textepourvu dun ensemble de balises de spcification permettant laffichagedans un navigateur Web (il en va de mme dans votre traitement detexte, mais ces balises internes sont masques).Pour insister sur ce fait, les premiers travaux seront effectusuniquement laide du Bloc-Notes. Nous vous conseillons de crer survotre disque dur, lemplacement de votre choix, un nouveau dossiernomm par exemple MonSiteWeb : vous y rassemblerez tous les fichiersdu site Web. Sinon, par dfaut, le Bloc-notes devrait crer vos fichiersdans Mes Documents.Instruction !DOCTYPEHTML ayant connu de nombreuses rvisions pendant son histoire, iltait ncessaire dinformer lagent utilisateur de la version HTMLemploye. Cela est effectu laide de linstruction !DOCTYPE(dailleurs automatiquement insre en tte dun document Web par laplupart des diteurs HTML). Vous verrez par la suite comment utiliserCration de la page daccueil Chapitre 347LE GUIDE COMPLET!DOCTYPE lorsque vous aurez recours des feuilles de style en cascade, des cadres ou XML.Commencez la cration de la premire page de votre site.1 Ouvrez le Bloc-Notes (Dmarrer >> Tous les programmes >>Accessoires >> Bloc-notes Windows ou Dmarrer >> Excuter >>Notepad).2 Saisissez comme premire ligne de votre document HTML :j Linstruction indique ici que ce documentrespecte la dfinition de type de document HTML 4.01, telleque dfinie par le W3C et disponible ladresse www.w3.org/TR/REC-html4/loose.dtd Nous choisissons ici le DTD transitoirepour pouvoir par la suite employer les lments dconseills(essentiellement ceux permettant de modifier la prsentationdans le document HTML), interdits dans le DTD strict.j Remarquez que cet lment est dpourvu de balise defermeture. Vient ensuite llment HTML signalant le dbutdun document HTML.3 Appuyez sur [], puis saisissez pour dbuter la page.Appuyez sur [], puis fermez immdiatement llment HTML ensaisissant sa balise de fermeture .Fermez toujours un lment aprs lavoir ouvertMme si HTML tolre un certain nombre derreurs de syntaxe, unebonne habitude prendre consiste toujours fermer un lmentimmdiatement aprs lavoir ouvert, puis saisir le contenu entre lesdeux balises. Cela vite doublier de fermer un lment par la suite, cequi peut entraner des rsultats inattendus. Cest dailleurs ainsi queprocde un diteur HTML, comme vous le constaterez vous-mme.4 Par scurit, enregistrez votre fichier sous le nompageacc1_0.html. Assurez-vous de bien choisir une extension.html, mme si .htm pourrait tre suffisant, afin dindiquer aunavigateur que le fichier est de type HTML et doit tre interprten consquence. Ne fermez ni le fichier ni le Bloc-notes.48 LE GUIDE COMPLETConception de votre premire page WebChapitre 3Enregistrement au format HTMLSelon loutil ddition employ, enregistrer un document au formatHTML peut tre enfantin ou plus complexe. Un diteur Web utilisegnralement par dfaut le format HTML (avec comme extension .htmlou .htm). En revanche, un diteur de texte simple, comme le Bloc-Notes,ou un traitement de texte, tel que Word ou WordPerfect, peuvent rendrencessaire de modifier le type de fichier lors de lenregistrement. Si vousprouvez des difficults ouvrir un document Web cr laide duntraitement de texte ou dun diteur de texte simple, vrifiez lextensiondu nom du fichier et le type de fichier, afin de vous assurer quil a bient enregistr au format HTML.lment HEADLe premier lment enfant de llment HTML est llment HEAD.Celui-ci, len-tte du document, contient de nombreuses informationsimportantes qui intressent le navigateur. lexception du contenu dellment TITLE, le contenu de llment HEAD napparat pas dans cequi est affich directement dans le navigateur Web. Vous pouvez donc yplacer des commentaires, des informations destines aux moteurs derecherche, des avertissements relatifs aux droits dauteur, ainsi que ducode de script. Cest galement dans cet lment que doivent se trouverles informations relatives aux feuilles de style. Cet lment est lepremier du fichier HTML tre charg et donc lu par le navigateur.1 Revenez au document prcdemment cr (pageacc1_0.html), silest toujours ouvert. Sinon, ouvrez le Bloc-Notes, puis ouvrez lefichier.2 Placez-vous en dessous de la balise douverture (maisau-dessus de la balise de fermeture ), appuyez sur [],puis saisissez pour dbuter la section den-tte. Lecontenu de cet lment napparat pas dans le navigateur Web.Comme vous lavez fait prcdemment, et pour les mmesraisons, fermez immdiatement llment HEAD en appuyant sur[], puis en saisissant sa balise de fermeture .lment TITLEUn lment indispensable dans llment HEAD est llment TITLE(titre), qui dfinit le texte affich dans la barre de titre de la fentre devotre navigateur.Cration de la page daccueil Chapitre 349LE GUIDE COMPLET1 Placez-vous en dessous de la balise douverture , appuyez nouveau sur [], puis ajoutez la balise douverture pour dfinir le titre de la page. Ce titre sera affich dans la barrede titre de la fentre du navigateur. Fermez llment TITLE ensaisissant .2 Revenez juste aprs la balise , puis saisissez le titre de lapage, ici "Ma page daccueil". Appuyez sur [].lment METAAutre composant capital de llment HEAD, llment META est unmoyen de procurer des informations concernant votre site aux moteursde recherche, dautres auteurs Web et des serveurs Web. Vous pouvezy placer pratiquement nimporte quel type dinformation. Cet lmentest dpourvu de balise de fermeture.Un lment META est un lment vide (dpourvu de contenu) dont lasyntaxe est la suivante :Lattribut name dfinit ce que la valeur de content va dcrire. Parexemple, la valeur de name peut tre "datetime" : lagent utilisateursait alors que les chiffres et les lettres de content correspondent unedate et une heure, probablement celles de la dernire modification. Labalise de fermeture dun lment META est facultative.XHTMLComme pour tout lment vide, un lment META doit tre rdigcomme suit en XHTML :Rien ne vous empche dadopter dores et dj cette syntaxe dans vosdocuments HTML.Un lment HEAD peut possder un nombre quelconque dlmentsMETA. Ceux-ci permettent de fournir de nombreuses informations utilesconcernant votre page, comme lauteur ou la version, ce que vous allezfaire maintenant.1 Placez-vous sur la ligne vierge en dessous de llment TITLE.Saisissez 50 LE GUIDE COMPLETConception de votre premire page WebChapitre 3(o votre_nom est votre nom), appuyez sur [], puis saisissez.2 Par scurit, enregistrez nouveau votre fichier sous le nompageacc1_0.html. Ne fermez ni le fichier ni le Bloc-Notes.Les lments META sont en outre particulirement utiles pour fairereconnatre votre page par les robots de recherche du genre AltaVista ouGoogle.Cette balise indique que le contenu de CONTENT est la description devotre page HTML. Ce contenu pourra tre affich par un moteur derecherche comme rsultat dune recherche dun utilisateur.Cette balise indique que le contenu de CONTENT est une srie demots-cls qui dfinissent plus finement votre page.Autre lment META frquent, celui qui indique le nom du gnrateur dudocument, gnralement insr automatiquement par votre diteurHTML :Expressions anglophonesRien nimpose que la valeur de name soit exprime en anglais. Vouspouvez tout fait lgalement retenir name="auteur" et name="motscls". Comme toutefois ces mta-informations sont gnralementexploites par des agents anglophones (la quasi-totalit des moteurs derecherche), mieux vaut, pour plus defficacit, conserver les expressionsanglophones.Toute personne examinant le code source de la page peut lire lesinformations prsentes dans llment HEAD, mais celles-ci ne sont pasaffiches dans le texte du document.Figure 3.4 :Certains diteurs insrentautomatiquement diversesinstructions META, dont le nom dugnrateur.Cration de la page daccueil Chapitre 351LE GUIDE COMPLETAffichage sourcePratiquement tous les navigateurs permettent dexaminer le codeHTML source dune page Web affiche dans votre navigateur, laidedune commande ressemblant Affichage >> Source. Cette commande setrouve dans Internet Explorer, dans Netscape Navigator et dans Firefoxdans le menu Affichage de la barre de menus.Llment HEAD doit galement englober tout script et information defeuille de style, respectivement dans des lments SCRIPT, LINK etSTYLE (nous y reviendrons par la suite). Un exemple dun lmentHEAD simple est montr dans le Listing 3.2, correspondant len-tte dela page prsente sur la figure suivante.Figure 3.5 : Page daccueil de MicroApplicationFigure 3.6 :Accs au code source de lapage daccueil deMicroApplication depuisInternet Explorer52 LE GUIDE COMPLETConception de votre premire page WebChapitre 3Listing 3-2 : Extrait de la section HEAD de la page daccueil de MicroApplicationMicro Application - Editeurs de livres dinformatique,de cd-rom et de papiers dimpression....lment BODYLlment BODY renferme lessentiel : le corps du document. Tout soncontenu est visible dans le navigateur : texte, graphismes, lienshypertextes, 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) silest toujours ouvert. Sinon, ouvrez le Bloc-Not0es, puis ouvrez lefichier.2 Placez-vous aprs la balise , appuyez sur [], puisdbutez le corps du document en saisissant . CommeFigure 3.7 : Accs au code source de la page daccueil de MicroApplicationdepuis FirefoxCration de la page daccueil Chapitre 353LE GUIDE COMPLETprcdemment, refermez llment BODY en appuyant sur [] puisen saisissant .Comme cela a t soulign, llment BODY de votre page Web ne doitpas tre dpourvu de structure et de forme : tout bon document doitpossder une structure organise. Traditionnellement, la structure secompose de titres de niveaux divers et de paragraphes de texte.Titres : lment HnLes titres sont obtenus en HTML laide de llment Hn, o n est unchiffre compris entre 1 et 6, correspondant au niveau du titre : H1 est untitre principal (souvent identique au contenu de llment TITLE), H2 unsous-titre, etc.3 Pour commencer une page bien structure , dbutez par un titrede niveau 1. Placez-vous la fin de la balise , puisappuyez sur []. Saisissez (pour refermerimmdiatement llment).4 Placez-vous entre les deux balises, et saisissez ensuite le titre dela page : Ma page daccueil (sans guillemets). Votre site Webpossde maintenant un titre de premier niveau.5 Crez un titre de niveau 2 : placez-vous la fin de la ligneprcdente, appuyez sur [] puis saisissez (pourrefermer immdiatement llment). Placez-vous entre les deuxbalises, et saisissez ensuite : Bienvenue sur mon site.Appuyez sur [].6 Toujours par scurit, enregistrez nouveau votre travail sous lemme nom.Un titre peut se trouver nimporte o dans llment BODY, cest--diredans le corps du document. Il sagit dun lment bloc, ce qui signifiequun saut de ligne est effectu avant et aprs llment.Le tableau suivant dtaille les diffrents lments titre.Tableau 3.1 : lment titre (Hn)Titre Balise UtilisationTitre 1 Titre du niveau suprieur : en gnral celui de la page ouun titre de chapitre.54 LE GUIDE COMPLETConception de votre premire page WebChapitre 3Tableau 3.1 : lment titre (Hn)Titre Balise UtilisationTitre 2 Titre de second niveau : section ou partie dundocument.Titre 3 Sous-sections dun document : ces trois niveaux suffisentle plus souvent, en terme de structure.Titre 4 Peu utilis pour la structure.Titre 5 Peu utilis pour la structure, mais servant de faonabusive pour des avertissements en petits caractres,comme des informations lgales ou de droits dauteur.Titre 6 Sert souvent de faon abusive pour des avertissementsen petits caractres, comme des informations lgalesou de droits dauteur.Les titres constituent un lment essentiel de la structure dun document.De nombreux auteurs les emploient toutefois comme raccourcis de miseen forme : au lieu de modifier directement la police dun texte (ce quiest dailleurs dconseiller), ils lincorporent dans un lment titreoffrant un aspect similaire celui quils veulent obtenir.Techniquement parlant, cette utilisation est incorrecte, tous lesnavigateurs naffichant pas les titres de la mme faon. Il est toutefoisexact que la plupart des navigateurs affichent les titres des trois niveauxsuprieurs (1 3) en polices de grandes tailles, tandis que les autresniveaux (5 et 6) sont affichs en polices plus petites, souvent en gras.Pour obtenir une structure parfaite, il est donc dconseill de recouriraux titres uniquement pour obtenir laspect souhait : les niveaux de titrene doivent pas prsenter dinterruption.est correct.Cration de la page daccueil Chapitre 355LE GUIDE COMPLETne lest pas.Si vous voulez obtenir laspect dun titre de niveau 4 pour votre titre deniveau 3, modifiez le style de llment H3, de prfrence laide dunefeuille de style. Nemployer les titres qu des fins structurelles. Si votrepublic nutilise que des navigateurs textuels (comme Lynx), ou si votresite sadresse des personnes souffrant de handicaps, les titres doiventtre utiliss bon escient. Cela pargnera vos visiteurs employant desnavigateurs en mode texte (comme Lynx) de srieuses difficults lorsqueleur navigateur non standard affichera (ou de lire haute voix) votretexte de faon incohrente. Les convertisseurs texte-parole emploient eneffet souvent une inflexion particulire ou un signal lorsquilsrencontrent un lment HTML particulier, comme justement un titre.Titres et moteurs de rechercheLes principaux moteurs de recherche se servent dsormaisprincipalement de la structure du document dfinie par les titres pourcataloguer un document. Initialement, ils navaient recours quauxlments TITLE ou META, mais ils se sont rapidement rendu compte quedes concepteurs peu scrupuleux surchargeaient ces lments de mots-clsnayant rien voir avec le contenu rel du site, simplement pour attirerplus de visiteurs.En parcourant les titres, un moteur de recherche peut apprhender lastructure du document et ainsi le cataloguer avec une meilleure prcision.Si les lments essentiels de votre site apparaissent dans vos titres, votrepage Web possde des chances maximales de se retrouver classe dans lacatgorie adquate, l o la cherche le public vis.Titres de documents et outils de vrificationLes outils de vrification HTML (comme le validateur W3Cdisponible ladresse http://validator.w3.org/) se servent galement des titrespour reconstituer la structure du document. Cela sert gnralement lauteur de la page : il peut regarder si la structure du document est bienreprsente par les titres, ou si la page gagne tre rorganise.56 LE GUIDE COMPLETConception de votre premire page WebChapitre 3Paragraphes de texte : lment PToute page Web est essentiellement compose de texte : ne laissezjamais les graphismes attrayants, les animations poustouflantes etautres complments vous masquer ce fait. Les gens vont sur le Web pourtrouver des informations, pas pour admirer limage dun avion de lignetraversant lcran.Llment texte fondamental est le paragraphe dfini par llment P. Ilnexige pas de fermeture (la balise est facultative), bien que celasoit prfrable pour crer une page structure possdant des exigencesde validation stricte.Un simple retour chariot ne possde aucune signification en HTML : lenavigateur nen tient pas compte et ne le remplace mme pas par unsimple espace. Pour commencer un nouveau paragraphe, veillez bienemployer la balise .1 Revenez au document pageacc1_0.html.2 Crez un paragraphe : placez-vous sur la ligne vierge en dessousdu titre de niveau 2, puis saisissez (pour refermerimmdiatement llment). Placez-vous entre les deux balises, etsaisissez ensuite une phrase quelconque, par exemple : Voustrouverez sur ce site des informations sur margion, ma famille et mes passions.3 Nous allons nous arrter l dans un premier temps. Enregistrez nouveau votre fichier, toujours sous le nom pageacc1_0.html.Ce que vous avez saisi jusque-l devrait ressembler au listing suivant.Listing 3-3 : Premire page daccueil."Ma page daccueil"Ma page daccueilBienvenue sur mon site.Vous trouverez sur ce site des informations sur ma rgion,ma famille et mes passions.Cration de la page daccueil Chapitre 357LE GUIDE COMPLETIl est temps dexaminer cette page laide de votre navigateur. Ouvrezcelui-ci, puis naviguez jusquau fichier pageacc1_0.html. Vous devriezvoir quelque chose de similaire ce qui est prsent dans les figures quisuivent : aucune diffrence napparat que vous utilisiez InternetExplorer 6 ou Firefox. Remarquez que le contenu de llment TITLEapparat dans la barre de titre de la fentre du navigateur, le reste ducontenu de llment HEAD restant invisible : seul le contenu dellment BODY est affich.Difficile de faire plus simple ! Difficile aussi de faire plus laid, hlasEn outre, pour le moment, il nexiste aucune relation entre cette pagedaccueil et les autres pages du site, que nous avions pourtant prvuesdans notre conception initiale. Nous allons dabord ajouter les liens versles autres pages, puis amliorer un peu laspect de la page. Nouscrerons ensuite les pages secondaires.Figure 3.8 :Laspect de cette pageavec Internet Explorer6Figure 3.9 :Laspect de cette pageavec Firefox58 LE GUIDE COMPLETConception de votre premire page WebChapitre 3Lien hypertexte : lment APour effectuer un lien entre une partie quelconque (ou presque) de votrepage et une autre ressource Internet pouvant se trouver nimporte o (surla mme page, sur une page diffrente situe sur le mme site, sur unepage situe sur un autre site, vers un fichier ou une image situ unemplacement quelconque), il est fait appel llment A (anchor,signifiant ancre ), un lment de type ligne (sans saut de ligne aprsllment).Les liens hypertextes sont ce qui fait le World Wide Web (ou WWW, outoile daraigne mondiale). Ce sont eux qui permettent de passer de pageen page et de site en site, dun bout lautre de la plante. En vrit, cetlment, pourtant simple dutilisation, est probablement le plusimportant de tout le langage HTML, tant donn sa puissanceintrinsque.La syntaxe de llment A est la suivante :contenu servant de lienChaque lment A dfinit une ancre. Au sein de cet lment, lattributhref fait de cette ancre la source dexactement un lien, tandis que lecontenu de llment A dfinit la position de lancre. Lattribut name,facultatif, nomme lancre (pour quelle puisse tre la destination de zroou plusieurs liens. Il en est de mme de lattribut id).Valeur dattributLes auteurs peuvent galement crer un lment A qui ne spcifieaucune ancre (qui ne spcifie aucun attribut href, name ou id). Lesvaleurs de ces attributs peuvent tre fixes par la suite au moyen descripts.Attribut href et URILa valeur de lattribut href, emplacement_de_la ressource, porte le nomdidentifiant de ressource uniforme ou URI (Universal Resource Identifier),terme dsormais prfr lancien URL ou localisateur de ressourceuniforme (URL, Universal Resource Locator). Le rle dun URI estcapital : chaque ressource disponible sur le Web (document HTML,Cration de la page daccueil Chapitre 359LE GUIDE COMPLETimage, squence vido, programme, etc.) possde une adressereprsente 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 dunchemin daccs.Considrez comme exemple lURI qui dsigne la page des rapportstechniques (TR, Technical Reports) du W3C :http://www.w3.org/TRCet URI peut tre compris comme suit : il est disponible via le protocoleHTTP, hberg sur la machine nomme www.w3.org , et accessiblepar le chemin /TR .HTTPHTTP est le sigle de HyperText Transfer Communication Protocol. Cestle protocole, ou mthode de communication, employ par un navigateurWeb pour requrir une ressource Web auprs dun serveur. Le termehttp:// prcde toujours une adresse URI ; il est plac avant les nomsdu domaine et de la machine. Internet dispose dautres protocoles decommunication : HTTP scuris (https), courrier lectronique (mailto)et protocole de transfert de fichiers (ftp) sont tous dautres exemples deprotocoles 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 undocument selon sa relation avec le document actuellement visualis. Sile document courant est dans un dossier, et que le document li (nommpour lexemple cible.html) est dans ce mme dossier, il peut tre reli enutilisant simplement :Remarquez, pour les URI locaux, labsence du prfixe http://.60 LE GUIDE COMPLETConception de votre premire page WebChapitre 3Au sein de la chane de texte du chemin, vous pouvez employer lesclassiques modificateurs :../ demande de monter dun niveau dans larborescence par rapport audocument actif :Pour atteindre un sous-dossier, saisissez son nom puis une barre obliqueet enfin le nom du fichier, comme dans :Vous pouvez les combiner votre guise :Une barre oblique place au dbut de lURI signifie quil faut remonter la racine du domaine :Les agents utilisateurs restituent gnralement les liens de faon lesmettre en vidence pour les utilisateurs (soulignage, vido inverse, etc.).La restitution exacte dpend de lagent utilisateur. La restitution peutvarier si lutilisateur a ou non dj visit le lien. De faon gnrale, lepointeur se transforme en main lorsquil se trouve sur un lien.Attributs name et idCes attributs spcifient un nom ou un identifiant pour lancre, de faon ce que celle-ci puisse tre cible par un autre lien. Ils partagent le mmeespace de noms, ce qui signifie quils ne peuvent pas tous deux dfinirFigure 3.10 : La plupart de navigateurs signalent un lien, et laffichent defaon diffrente lorsquil a dj t visit (ici, Logiciels en tlchargement).Cration de la page daccueil Chapitre 361LE GUIDE COMPLETune ancre avec le mme nom dans le mme document. Quand les deuxattributs sont utiliss sur un mme lment, leurs valeurs doivent treidentiques.Voici une ancre nomme :IntroductionPour y faire rfrence depuis une autre ancre, vous procdez commesuit :IntroductionCe qui pourrait tre mis en uvre comme suit :SommaireIntroductionHistoriqueChapitre 1 ...le reste du tableau des matires......le corps du document...Introduction...contenu...Historique...contenu...Au commencement...contenu...Nous prsentons ici lattribut name employ avec un lment a, maisune ancre sert en ralit rarement de cible une autre ancre. Lattributname nest employ que pour relativement peu dlments. Lattributid joue en revanche un rle analogue et peut tre employ avec tous leslments sauf BASE, HEAD, HTML, META, SCRIPT, STYLE et TITLE.Lexemple prcdent serait ainsi plus probablement crit :SommaireIntroductionHistoriqueChapitre 1 ...le reste de la table des matires......le corps du document...Introduction...contenu...Historique...contenu...Au commencement...contenu...Notez quune ancre (ou lien) ainsi employe porte frquemment le nomde signet, pour la diffrencier dun lien menant vers une autre page Web.62 LE GUIDE COMPLETConception de votre premire page WebChapitre 3Il est galement possible de concevoir un lien hypertexte qui dclenchelenvoi dun courrier lectronique lorsquun utilisateur clique dessus. Aulieu de http://, utilisez mailto: suivi de ladresse lectronique dedestination :Remarquez, pour un lien de message lectronique, labsence de barreoblique.Ajoutez maintenant des ancres votre page daccueil.1 Ouvrez le Bloc-Notes, puis le fichier prcdemment cr(pageacc1_0.html).2 Vous allez modifier la version en entrant comme suit la baliseMETA stipulant la version :Convention sur les numros de versionTraditionnellement, un numro de version comporte deux ou troisnombres spars par des points. Le premier nombre, gauche,correspond au numro de version majeur : il reste identique tant que desmodifications radicales nont pas t apportes. Le second numrocorrespond au numro de version mineur : des modifications plussecondaires. Le troisime nombre, sil est prsent, correspondgnralement des modifications trs secondaires, souvent lies lradication de bogues ou la correction derreurs.Dans le cadre de ce livre, nous employons la convention suivante, trsproche 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 momentpointer vers des pages inexistantes, mais cela na pas encoredimportance.3 Insrez llment lien hypertexte avant le mot ou la phrase etnoubliez pas de fermer llment A aprs le mot servant de lien :Cration de la page daccueil Chapitre 363LE GUIDE COMPLETVous trouverez sur ce site des informations sur margion, ma famille ; et mes passions.j Remarquez quil est employ ici un lien relatif : les fichiersregion.html, famille.html et passions.html seront placs dans lemme dossier que la page daccueil.4 Ajoutez un nouveau lien permettant de vous envoyer un message.Placez-vous aprs la balise , appuyez sur [] et saisissez surla nouvelle ligne :Ecrivez-moi !.j votre_nom@votre_FAI correspond bien sr votre adresselectronique.5 Enregistrez votre fichier sous le nom pageacc1_3_2.html, mais nefermez pas le Bloc-Notes. Le code complet de cette page estprsent dans le listing qui suit.Listing 3-4 : Page daccueil modifie (version 1.3.2)"Ma page daccueil"Ma page daccueilBienvenue sur mon site.Vous trouverez sur ce site des informations sur margion, ma famille et mes passions.Ecrivez-moi !.Examinez cette nouvelle page dans votre navigateur. Ouvrez celui-ci,puis naviguez jusquau fichier pageacc1_3_2.html. Vous devriez voirquelque chose de similaire ce qui est prsent dans la figure suivante.64 LE GUIDE COMPLETConception de votre premire page WebChapitre 3Essayez de cliquer sur un des liens : vous obtenez un message derreur,variable selon le navigateur. Cest normal : les pages secondairesnexistent pas encore ! Vous y remdierez sous peu.lment saut de ligne BRNous avons dit que les lments Hn et P, dj examins, taient deslments de type bloc, qui dbutent sur une nouvelle ligne et insrentaprs eux un saut de ligne. Nous avons galement soulign que HTMLne reconnaissait pas les sauts de ligne insrs dans le contenu dunlment. Il est pourtant parfois ncessaire deffectuer manuellement unpassage la ligne sans pour autant changer dlment (de bloc), parexemple pour possder un titre rparti sur deux lignes ou pour diviser unparagraphe trop long. Cela seffectue en insrant un lment vide BR, detype ligne :1 Revenez dans le Bloc-Notes au fichier prcdent(pageacc1_3_2.html).2 Vous allez encore modifier la version. Entrez comme suit la baliseMETA stipulant la version :Figure 3.11 :Aspect de la page Web modifieFigure 3.12 :Message derreurindiquant un lienrompuCration de la page daccueil Chapitre 365LE GUIDE COMPLET3 Vous allez maintenant insrer des sauts de ligne entre lesdiffrents thmes dans le (seul) paragraphe de texte. Commencezpar :Vous trouverez sur ce site des informations :sur ma rgion ;sur ma famille ;sur mes passions.j Remarquez que le texte a t un peu modifi. Les passages laligne employs dans le code prsent (aprs les balises )permettent uniquement damliorer sa lisibilit : ils sontignors par HTML. Tout le contenu de llment P aurait putre saisi sur la mme ligne.Vous pouvez insrer un saut de ligne o vous voulez dans llmentBODY pour obtenir un saut de ligne lcran : entre deux lments bloc,entre deux lments ligne, au sein dun contenu texte, etc.XHTMLSi vous souhaitez tre compatible XHTML, llment vide BR doittre cod .Attributs dalignementsPour encore amliorer laspect dun titre (ou dun paragraphe), il seraitutile de pouvoir agir sur lalignement.HTML dispose dun attribut dalignement applicable de nombreuxlments, align.Vous allez un peu amliorer laspect de la premire page en jouant surlalignement.1 Revenez dans le Bloc-Notes au fichier prcdent(pageacc1_3_3.html).2 Centrez les deux titres, laide de lattribut align :Ma page daccueilBienvenue sur mon site.3 Modifiez le lien qui permet de vous envoyer un message. Ajoutezce qui suit :66 LE GUIDE COMPLETConception de votre premire page WebChapitre 3Ecrivez-moi !.4 Enregistrez votre fichier sous le nom pageacc1_3_3.html. Le codecomplet de cette page est prsent dans le Listing 3.4.5 Pour la bonne forme, nous allons galement crer le squelette desautres pages. En partant du fichier actuellement ouvert,commencez par modifier llment TITLE :"Ma rgion "6 Modifiez ensuite le titre et le sous-titre Ma rgion ... complter.7 puis le paragraphe de texte :... complter.8 Vous pouvez votre guise conserver ou supprimer la lignetablissant un lien vers un message lectronique. En revanche, ilest capital de toujours prvoir sur une page secondaire un lienvers la page daccueil principale. Ajoutez donc la ligne suivante,juste avant la balise :Retour versla page daccueil9 Enregistrez ce fichier sous le nom region.html.10 Crez ensuite les deux autres pages (famille.html et passions.html),en modifiant comme il se doit le contenu des lments TITLE etH1.Lattribut align possde plusieurs valeurs possibles, dont lasignification est prsente dans le Tableau 3.2. Remarquez toutefois queson emploi avec des titres et paragraphes est dsormais dconseill :mieux vaut recourir aux feuilles de style, que vous dcouvrirez dans leChapitre 8.Tableau 3.2 : Valeurs dalignement des paragraphesAttribut de P Alignement de texte Alignement gauche.Cration de la page daccueil Chapitre 367LE GUIDE COMPLETTableau 3.2 : Valeurs dalignement des paragraphesAttribut de P Alignement de texte Alignement sur la marge de droite, sansjustification gauche : celle-ci est pluttdsordonne, mais cette disposition est pratiquedans le cas dimages et de colonnes de texte.Le texte est centr.Le texte est justifi, comme avec un traitement detexte.Listing 3-5 : Page daccueil modifie (version 1.3.3)."Ma page daccueil"Ma page daccueilBienvenue sur mon site.Vous trouverez sur ce site des informations :sur ma rgion ;sur ma famille ;sur mes passions.Ecrivez-moi !.Examinez votre nouvelle page daccueil dans votre navigateur. Ouvrezcelui-ci, puis naviguez jusquau fichier pageacc1_3_3.html.Figure 3.13 :Page daccueil68 LE GUIDE COMPLETConception de votre premire page WebChapitre 3Cliquez sur un lien : vous accdez lune des nouvelles pages.Revenez la page daccueil, testez les autres liens, puis, revenu sur lapage daccueil, testez le lien denvoi de courriel : votre logiciel demessagerie souvre.3.3. Rsumj Linstruction !DOCTYPE permet de stipuler la DTD (DocumentType Definition) employe pour le document HTML.j Un document HTML se compose dun lment parent HTML quicontient des lments enfants HEAD et BODY.j La seule information affiche par le navigateur appartenant llment HEAD est le contenu de llment TITLE, figurant dansla barre de titre de la fentre. Les lments META de llmentFigure 3.14 :Une des pages secondairesFigure 3.15 :Logiciel de messagerie lanc partir de la pageRsum Chapitre 369LE GUIDE COMPLETHEAD servent fournir des mta-informations employes parcertains agents utilisateurs (comme les robots des moteurs derecherche), dont les mots-cls, une description, lauteur, la versionet le gnrateur de la page.j Llment BODY constitue le corps du document : tout son contenuest visible dans le navigateur.j Ce contenu doit tre structur de faon logique. HTML proposeles lments Hn pour des titres de niveaux diffrents, ainsi quellment P pour un paragraphe de texte.j Les liens hypertextes sont crs laide de llment A suivi delattribut href stipulant la cible du lien. Cet attribut href estsuivi dun nom de protocole, comme http:/ ou mailto:,spcifiant le type de cible et laction suivre.j Un lien hypertexte peut tre absolu ou relatif.j Un saut de ligne est obtenu laide de llment vide BR.j Les titres et les paragraphes admettent lemploi de lattributalign pour obtenir un alignement particulier. Cet attribut esttoutefois dsormais dconseill : mieux vaut recourir aux feuillesde style.70 LE GUIDE COMPLETConception de votre premire page WebChapitre 3Listes et tableauxListes ....................................................................................................................................... 73Tableaux .................................................................................................................................. 89Rsum ................................................................................................................................ 133Une page Web est compose avant tout de texte. Toutefois, toutes lesdonnes et informations places sur un site Web doivent passer par unfiltre final avant de pouvoir tre lues par un tre humain : elles doiventtre affiches lcran.La lecture lcran, malgr les progrs raliss par les concepteursdcrans, reste plus malaise que la lecture dun document imprim ouprojet. La majorit des internautes rechignent lire de longs textes enligne, prfrant souvent les imprimer pour les relire tte repose.Une conception intelligente dun site Web doit prendre en compte cescontraintes invitables. Malgr son importance, mieux vaut limiter letexte. Arez-le toujours au maximum. Recourrez aux espaces viergespour reposer la vue.Voici quelques rgles simples :j Placez toujours les informations importantes en haut de lcran.j Pour tre efficace, un cran (une page) ne devrait jamaiscomporter plus de sept informations distinctes.j Seuls les 100 premiers mots permettent lutilisateur de dcidersi le document est intressant. Un document destin un publicgnral 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, parexemple, Exemple extrait du Chapitre 1 ou Table des matiresdtaille .Si ce chapitre va vous aider afficher votre texte de faon ce quil soitfacilement lisible et comprhensible, il reste de votre ressort de faire ensorte que le sujet soit intressant et susceptible dattirer le publicconcern !Les pages ralises jusquici sont dune extrme simplicit. HTMLpropose de nombreux autres lments structuraux pour amliorer tant lastructure que, par la suite, le rendu ou laffichage des pages.Au cours de ce chapitre, nous allons examiner les listes et les tableauxdes lments fondamentaux de toute page Web russie.72 LE GUIDE COMPLETListes et tableauxChapitre 4lments et attributs tudis dans ce chapitre :OL (type, start, type), LI (type, value)UL (type), LI (type)DL, DT, DDTABLE (summary, align, border, frame, rule, cellspacing,cellpadding, width)CAPTIONTR, TD, TH (align, valign, width, rowspan, colspan)THEAD, TBODY, TFOOTCOLGROUP, COL (span, width)4.1. ListesIl existe en HTML trois types de listes qui permettent dapporter un peuplus de structure un document :j Les listes ordonnes ou numrotes.j Les listes non ordonnes ou listes puces.j Les listes de dfinitions.Il est galement possible dimbriquer des listes, mme de typesdiffrents.Liste ordonne : lments OL et LIUne liste numrote (ou ordonne) incrmente automatiquement chaquelment de la liste. Ce systme de numrotation automatique est trsutile, car il simplifie dautant la saisie.Crer une liste numrote est dune extrme simplicit. Vous dbutez laliste en ouvrant llment liste OL (Ordered List, liste ordonne), puispoursuivez par chaque membre de la liste, prcd de la balisedlment de liste, . La balise de fermeture est facultativemais recommande. En revanche, llment liste lui-mme doitimprativement tre ferm.Premier lmentDeuxime lment...Dernier lmentListes Chapitre 473LE GUIDE COMPLETTestLes fragments de code ainsi prsents sont des extraits dune pagecomplte. Si vous souhaitez les tester, le mieux est de construire unepage type nomme par exemple test.html, avec un squelette de page(instruction !doctype, lments HTML, HEAD et BODY) , et de saisirsimplement dans llment BODY lextrait de code propos.Llment OL peut possder un argument start, spcifiant le numrocommenant la squence. Par exemple, avec , lepremier membre de la liste porte le numro 2.Les lments LI et OL peuvent possder un attribut type, qui permet dedfinir le mode de numrotation de la liste. Employ pour un lment LIindividuel, il ne sapplique qu cet lment. Insr en revanche lintrieur de la balise , il agit sur la totalit de la liste. Voici lesvaleurs possibles pour lattribut type :j 1 : Chiffres arabes (valeur par dfaut)j a : Lettres minusculesj A : Lettres majusculesj i : Chiffres romains en minusculesj I : Chiffres romains en majusculesvalue, employ uniquement avec un lment LI, rinitialise lordre dela squence. Ainsi, avec , le membre suivantpossdera automatiquement une value de 9.Figure 4.1 :Exemple de liste ordonne74 LE GUIDE COMPLETListes et tableauxChapitre 4Lemploi des attributs start, type et value est dsormais dconseillau profit des feuilles de style.Combiner les attributsIl est possible de combiner les attributs start et type : le premiermembre de la liste apparat avec la valeur start dans le type spcifi.Ainsi, aboutit-il un premier membredsign par "IV".Liste puces : lments UL et LIUne liste puces ressemble normment la prcdente, si ce nest quela numrotation est remplace par des puces. Une liste puces est unlment UL (Unordered List, liste non ordonne) qui renferme un nombrequelconque dlments LI. Comme pour une liste ordonne, llmentUL doit imprativement tre ferm.Premier lmentDeuxime lment...Dernier lmentFigure 4.2 :Exemple de liste ordonne, avec emploides attributs type="A", start="2" pourllment OL et value="9" pour le dernierlment LI.Figure 4.3 :Exemple de liste pucesListes Chapitre 475LE GUIDE COMPLETVous pouvez modifier le style des puces grce lattribut type. Laussi, il peut sappliquer un lment LI individuel ou, insr dans labalise , agir sur la totalit de la liste. Voici les valeurs possiblespour lattribut type, lorsquil est employ dans une liste non ordonne :Tableau 4.1 : Valeurs possibles de lattribut typeValeur SignificationDisc Rond plein (valeur par dfaut)Square Carr pleinCircle Cercle videLemploi de lattribut type est dsormais dconseill au profit desfeuilles de style.Les listes sont trs agrables en HTML : elles sont demploi facile touten tant dune extrme souplesse. Il est trs facile de transformer uneliste numrote en liste puces et inversement, simplement en modifiantles balises de dbut et de fin. Attention toutefois aux surprises si vousavez employ les attributs dconseills, les valeurs licites pour cesattributs tant diffrentes selon le type de liste !Liste de dfinitions : lments DL, DT et DDUne liste de dfinitions est lquivalent dun tableau de deux colonnes,la premire renfermant les mots ou expressions dfinir et la secondeles dfinitions elles-mmes.Figure 4.4 :Exemple de liste puces, avecemploi des trois valeurs possiblespour lattribut type.76 LE GUIDE COMPLETListes et tableauxChapitre 4Il est possible de crer une liste de dfinitions laide de llment DL(Definition List, liste de dfinitions), dont le contenu est composdlments DT (Definition Term, terme de dfinition) et dlments DD(Definition Description, description de dfinition) correspondants. Voiciun exemple de code, avec la copie dcran correspondante.Elments dune liste de dfinitionsDLElment liste de dfinition.DTElment terme de dfinitionDDElment description de la dfinitionVous avez dcouvert les listes. Ne trouvez-vous pas que notre pagedaccueil prsente ce qui ressemble furieusement une liste ? Autant lamodifier1 Revenez dans le Bloc-Notes au fichier prcdent(pageacc1_3_3.html).2 Comme dhabitude, vous modifiez la version. Entrez comme suitla balise META stipulant la version :3 Placez-vous la fin de la ligneVous trouverez sur ce site des informations :et remplacez la balise par une balise , puis appuyez sur[] pour crer une nouvelle ligne.Figure 4.5 :Liste de dfinitionsListes Chapitre 477LE GUIDE COMPLET4 Saisissez sur celle-ci pour dbuter une liste puces.5 Placez-vous au dbut de la lignesur ma rgion ;Saisissez , puis remplacez la balise par .6 Faites de mme pour la ligne suivante. Saisissez au dbut de latroisime ligne , puis remplacez la balise de fermeture par , appuyez sur [] puis saisissez pour fermer laliste. Ce fragment de code devrait dsormais ressembler ceci :Vous trouverez sur ce site des informations :sur ma rgion ;sur ma famille ;sur mes passions.7 Enregistrez votre fichier sous le nom pageacc1_4_1.html.Examinez cette page laide de votre navigateur. Son aspect estdsormais plus agrable.Testez les liens. Tout va bien, mais lorsque vous voulez revenir votrepage daccueil, vous obtenez une des anciennes versions. Pourquoi ?Tout simplement parce que vous navez pas modifi le nom de la cible(attribut href) dans les pages secondaires. Le lien stipule toujours :Retour vers la page daccueilCe type derreur est particulirement frquent (autant quexasprant !).Vous verrez par la suite une des faons de lviter, grce notamment Figure 4.6 :Page daccueil avec liste puces78 LE GUIDE COMPLETListes et tableauxChapitre 4laide dune barre de navigation, mais voici dj quelques rgles etastuces simples permettant dviter au moins partiellement ce pige :1 Ne modifiez un nom de fichier comportant un numro de versionquen cas de modification au moins mineure (par exemple ici, lepassage de la version 1.3 la 1.4). Il est en principe inutile denoter ainsi les modifications rellement secondaires, qui ne sontsouvent que des corrections de bogues. En revanche, pensez actualiser le contenu de votre balise .2 Une bonne habitude prendre consiste archiver rgulirementtous les fichiers composant le site, et au minimum lors dunchangement de version mineure. Vous pouvez ainsi compacter,par exemple dans un fichier nomm ici MonSitev1_3.zip, tous lesfichiers crs et employs jusque-l (sauf pageacc1_4_1.html).3 Idalement, cette archive (ou une copie) devrait tre stocke unautre emplacement : en cas dincident, vous pourriez ainsi revenir la version antrieure.4 Supprimez ensuite de la racine du site les fichiers superflus (ici,les fichiers pagacc1_3_x.html).5 Enfin, modifiez les fichiers prsentant dans la nouvelle versiondes problmes (liens ou autres) en corrigeant les erreurs.Remarquez que cest exactement la dmarche que nous avons retenue,puisque les diffrentes archives MonSite correspondent chaquechapitre.Listes imbriquesIl est trs facile dimbriquer des listes, mme de types diffrents. Pour cefaire, dbutez simplement une nouvelle liste plutt que de crer unnouveau membre de liste. La nouvelle liste se comporte comme unesubdivision du membre le prcdant immdiatement. Voici un exemple :Listes Chapitre 479LE GUIDE COMPLETCration dune liste imbriqueavec un diteur de texteListing 4-1 : Exemple de code de listes imbriques1 Arguments et valeurs possibles dans des listes2 3 Liste ordonne4 5 Elment OL6 7 start8 valeur de dbut de la numrotation9 type10 1,Chiffres arabes (valeur par dfaut)11 a : Lettres minuscules12 A : Lettres majuscules13 I : Chiffres romains en minuscules14 I : Chiffres romains en majuscules15 16 Elment LI17 18 value19 valeur de rinitialisation de la numrotation20 type21 1,Chiffres arabes (valeur par dfaut)22 a : Lettres minuscules23 A : Lettres majuscules24 I : Chiffres romains en minuscules25 I : Chiffres romains en majuscules26 27 28 Liste puces29 30 Elment UL31 32 type33 disc : Rond plein (valeur par dfaut)34 square : Carr plein35 circle : Cercle vide36 37 Elment LI38 39 type40 disc : Rond plein (valeur par dfaut)41 square : Carr plein42 circle : Cercle vide43 44 45 80 LE GUIDE COMPLETListes et tableauxChapitre 4La figure suivante prsente laspect de ce code vu dans un navigateur.Ce code prsente plusieurs choses intressantes. Remarquez dabord laprsence de numros de ligne : ceux-ci ne sont prsents que pourfaciliter linterprtation du code et ne doivent pas tre saisis. Enrevanche, le code a t indent pour mettre en vidence lesimbrications : les lments de mme rang apparaissent les uns endessous des autres, tandis que les passages la ligne HTML () ontt matrialiss laide de retours chariot manuels . Comme cela adj t prcis, les espaces vides supplmentaires (espaces, tabulations,sauts de ligne) sont ignors par HTML : ils ne servent qu simplifier lalecture du code. Cest une bonne habitude prendre lors de la saisiemanuelle de code. La plupart des diteurs de code WYSIWYGaccomplissent cela automatiquement.Examinez le code plus en dtail : aprs la ligne 1 (llment titre depremier niveau H1), il est dbut en ligne 2 une liste ordonne laideFigure 4.7 :Listes imbriquesListes Chapitre 481LE GUIDE COMPLETde llment OL, dont lattribut type stipule que la numrotation estfaite en chiffres romains majuscules (type="I").Vient ensuite, ligne 3, un lment de ligne LI, puis, ligne 4, dbute uneliste puces, llment UL possdant un attribut type fix square,pour dfinir une puce carre pleine. Vient ensuite un lment de liste(LI), puis commence, ligne 6, une liste de dfinitions numrant lesattributs et les valeurs possibles pour cet lment.Il suffit ensuite de fermer la liste de dfinitions (ligne 15), de placer unautre lment LI (pour llment LI de liste ordonne, ligne 16) et derecommencer une liste de dfinitions. Nous fermons ensuite la liste dedfinitions (ligne 26), la liste puces (ligne 27) et arrivons au secondmembre de la liste ordonne (ligne 28). La suite reprend la structureprsente partir de la ligne 4. La dernire liste de dfinitions est fermeligne 43, la liste puces ligne 44 et enfin la liste numrote ligne 45.Ouf Trois types diffrents de listes imbriques, tout en jouant laidede lattribut type sur laspect de ces listesCette structure demande la saisie dune quantit de code importante. Ilest donc intressant de voir en quoi le recours un diteur HTMLpermet de faciliter les choses.Cration dune liste imbriqueavec un diteur HTMLNous allons ici crer des listes imbriques laide de lditeur gratuit duW3C, Amaya.1 Ouvrez Amaya (Dmarrer > Tous les programmes > Amaya >Amaya).2 Crez un nouveau document en choisissant File > New > NewXHTML 1.0 Transitional document. Par dfaut, il est propos decrer le fichier dans le dossier dinstallation dAmaya : naviguezjusqu votre dossier Mon site Web, puis saisissez comme nom dedocument ListesImbriques2.html.3 Le document est de type XHTML 1.0. Transformez-leimmdiatement en document HTML en choisissant File > Changethe Document Type > Change to HTML 4.01 Transitional.82 LE GUIDE COMPLETListes et tableauxChapitre 44 Remarquez que la barre de titre affiche no title. Modifiez le titre dudocument. Choisissez XHTML> Change title, puis saisissezListes imbriques. La barre de titre affiche Listes imbriques.5 Crez un titre de niveau 1 : cliquez sur le bouton H1, puissaisissez Arguments et valeurs possibles dans deslistes.6 Dbutez une liste numrote en cliquant sur le bouton Numberedlist.7 Slectionnez la ligne numrote 1, puis choisissez Edit > Insert.Une seconde ligne numrote 2 apparat en dessous. Remarquezquavec Amaya, pour crer des listes imbriques, mieux vautdfinir la structure dabord : nous crons les deux lignes de lapremire 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 deuxlments : slectionnez la premire ligne, puis choisissez Edit >Insert.12 Placez-vous sur la premire ligne, puis saisissez Elment OL.13 Dbutez une liste de dfinitions en cliquant sur le boutonDfinition list, puis saisissez start.14 Choisissez XHTML > List > Definition (dd), puis saisissez valeurde dbut de la numrotation.15 Choisissez XHTML > List > Term (dt), puis saisissez type.Figure 4.8 :Modificationdu type dedocumentavec AmayaListes Chapitre 483LE GUIDE COMPLET16 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 : Lettresminuscules, A : Lettres majuscules et i : Chiffresromains en minuscules en insrant aprs chaque fois unsaut de ligne.19 Saisissez I : Chiffres romains en majuscules.Chanes de texteVous pouvez galement saisir la suite toutes les chanes de texte,puis vous placer la fin de chacune et insrer le saut de ligne enchoisissant XHTML > Break (br).20 Placez-vous sur le deuxime lment de la liste puces etsaisissez Elment LI.21 Dbutez une liste de dfinitions en cliquant sur le boutonDfinition list, puis saisissez value.22 Choisissez XHTML > List > Definition (dd), puis saisissez valeurde 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 dfinitions en cliquant sur le boutonDfinition list, puis saisissez type.28 Choisissez XHTML > List > Definition (dd).29 Saisissez disc : Rond plein (valeur par dfaut), puischoisissez XHTML > Break (br).30 Rptez ltape 29, en saisissant square : Carr plein, eninsrant un saut de ligne, puis en saisissant circle : Cerclevide.31 Placez-vous sur la seconde ligne, puis saisissez Elment LI.32 Rptez les tapes 27 30.84 LE GUIDE COMPLETListes et tableauxChapitre 4La fentre de lditeur affiche directement les listes imbriques tellesque vous les aviez vues prcdemment.Aucune balise na t saisie en dur . Mais quel est laspect du codesous-jacent ? Pour le voir, choisissez View > Show source. Un extrait dece code est prsent dans le listing suivant.Remarquez la prsence de numros de lignes (servant faciliterlidentification des erreurs), linstruction !doctype et llment metaFigure 4.9 :Page Listes imbriques dans lditeurAmayaFigure 4.10 :Code source de la pageListes imbriquesListes Chapitre 485LE GUIDE COMPLETqui concerne le gnrateur, automatiquement insrs. Bien que nousayons choisi de convertir le document en HTML 4.01, les balisesfigurent en minuscules, conformment la spcification XHTML 1.0.Le code est agrablement indent et agrment de couleurs pour mieuxidentifier les lments et leurs attributs. Remarquez en outre la prsencede caractres curieux , la place des caractres accentus (parexemple, ordonne est cod ordonne). Nous reviendronsbientt sur ce point.Listing 4-2 : Extrait du code du fichier listesimbriques2.html1 Arguments et valeurs possibles dans des listes2 3 Liste ordonne4 5 Elment OL6 7 start8 valeur de dbut de la numrotation9 type10 1,Chiffres arabes (valeur par dfaut)11 a : Lettres minuscules12 A : Lettres majuscules13 I : Chiffres romains en minuscules14 I : Chiffres romains en majuscules.15 16 17 Elment LI18 19 value20 valeur de rinitialisation de la numrotation.21 type22 1,Chiffres arabes (valeur par dfaut)23 a : Lettres minuscules24 A : Lettres majuscules25 I : Chiffres romains en minuscules26 I : Chiffres romains en majuscules.27 28 29 30 31 32 Liste puces33 34 Elment UL35 36 type37 disc : Rond plein (valeur par dfaut)38 square : Carr plein39 circle : Cercle vide 86 LE GUIDE COMPLETListes et tableauxChapitre 440 41 42 Elment LI43 44 type45 disc : Rond plein (valeur par dfaut)46 square : Carr plein47 circle : Cercle vide48 49 50 51 52 53 Lextrait concernant uniquement les listes est un peu plus long : lesbalises de fermeture occupent une ligne elles seules,contrairement au listing prcdent. Remarquez en outre que les listessont rellement imbriques dans les lments LI concerns : en termesde structure, cette construction est bien plus propre. Pour vous enpersuader, examinez la structure du document en choisissant View >Show structure.Figure 4.11 :Structure de la page ListesimbriquesListes Chapitre 487LE GUIDE COMPLETEst-il rellement plus simple de travailler avec un diteur ddi quedirectement avec le Bloc-Notes ? Pour le moment, cela nest pasprobant, mais reconnaissons que cet exemple est particulirement tordu !Les listes sont largement employes dans les pages Web. Pour vous enpersuader, examinez la page de la version franaise de la spcificationHTML 4.01 et le code source correspondant.Vous y voyez des listes puces et numrotes imbriques, employespour crer une table des matires.Figure 4.12 : Exemple de listesFigure 4.13 : Exemple de listes avec le code source correspondant88 LE GUIDE COMPLETListes et tableauxChapitre 44.2. TableauxLes tableaux (souvent nomms tables en HTML) permettent deprsenter des donnes (texte, texte prformat, images, liens,formulaires, champs de formulaires, autres tables, etc.) organises enlignes et en colonnes. Ils constituent dsormais la mthode favoritedaffichage de donnes et de prsentation des pages Web. Alors quilstaient initialement prvus pour les seules donnes, ils ont rapidementconquis le statut doutils de prsentation, autorisant les auteurs concevoir des pages ressemblant des documents imprims, dotes debarres latrales, de colonnes et despaces vierges.Les tableaux ne devraient pas toutefois reprsenter simplement unmoyen de disposer le contenu dun document : cela peut entraner desproblmes de restitution sur les mdias non visuels. En outre, employsavec des images, ces tableaux peuvent forcer lutilisateur effectuer undfilement horizontal pour voir un tableau conu sur un systme offrantune surface daffichage de taille suprieure. Afin de minimiser cesproblmes, il est recommand demployer des feuilles de style pour lecontrle de la disposition plutt que des tableaux.Les cellules dun tableau peuvent contenir soit des informations derubrique (lment TH), soit des informations de donnes (lmentTD). Les cellules peuvent occuper plusieurs lignes et colonnes. Lemodle du tableau HTML 4 permet aux auteurs ltiquetage de chaquecellule, de sorte que les agents utilisateurs non visuels peuventcommuniquer plus facilement lutilisateur les indications de rubriqueconcernant la cellule. Ce mcanisme apporte non seulement une grandeassistance aux personnes qui ont des dficiences visuelles, mais donneaussi aux navigateurs sans fil multimodes, avec des capacits daffichagelimites (par exemple, les tlavertisseurs et les tlphones utilisant leWeb), la possibilit de grer les tableaux.Contrairement ce qui a pu se passer au dbut, la plupart desnavigateurs prennent dsormais parfaitement en charge les tableaux(mme si certains interprteurs texte-parole peuvent encore prouverquelques difficults les comprendre). Compte tenu de leur facilit demise en uvre, il serait dommage de se priver de ces prcieux outils.Attention toutefois, si leur mise en uvre initiale est trs simple, leurpuissance permet datteindre un degr de sophistication lev assortidune rare complexit !Tableaux Chapitre 489LE GUIDE COMPLETCest probablement pour les tableaux que le recours un diteur HTMLddi est le plus prcieux, comme nous le verrons vers la fin du chapitre.Mais, comme nous lavons dj dit en dautres cas, la meilleure faon debien les comprendre consiste en crer dabord quelques-uns de toutespices laide dun simple diteur de texte : ce quoi nous allons nousattacher maintenant.Cration dun tableau simpleLa structure fondamentale dun tableau est constitue de llmentparent TABLE. Celui-ci contient tous les autres lments qui spcifient lalgende, les ranges, le contenu et la mise en forme. Ses principauxlments enfants sont TR (ligne) et TD (cellule dune ligne, assimilable une colonne).Nous allons commencer par placer sur la page Ma famille du site untableau trs simple, qui a pour but de prsenter une famille pour lemoment rduite aux deux parents (nous avons bien le temps davoir desenfants !).1 Ouvrez le Bloc-Notes sil ne lest pas dj, puis le fichierfamille.html cr au cours du chapitre prcdent.2 Comme dhabitude, modifiez le numro de version :3 Supprimez la ligne du titre de niveau 2 (H2), puis placez-vousaprs la balise et remplacez le contenu actuel par :Prsentation de ma famille4 Placez-vous aprs la balise et appuyez sur [] pour crerune nouvelle ligne. Sur cette ligne, saisissez . Commeconseill habituellement, fermez immdiatement llment enappuyant sur [] et en saisissant la balise fermante du tableau,.Lastuce avec les tableaux HTML consiste rflchir en termesde lignes, et non de colonnes, contrairement ce qui estgnralement pratiqu dans un tableau de feuille de calcul ou detraitement de texte.5 Placez-vous aprs la balise ouvrante , appuyez sur [],ouvrez un lment ligne avec , appuyez sur [] et fermezllment par .90 LE GUIDE COMPLETListes et tableauxChapitre 46 Placez-vous aprs la balise ouvrante , appuyez sur [],ouvrez un lment colonne avec , saisissez Qualit, fermezllment par , puis appuyez sur [].7 Saisissez Prnom, puis appuyez sur [].8 Saisissez Age, puis appuyez sur [].9 Saisissez Taille, puis appuyez sur [].10 Placez-vous aprs la balise fermante , appuyez sur [], puisouvrez un nouvel lment ligne avec . , appuyez sur []et fermez llment par .11 Placez-vous aprs la balise ouvrante , appuyez sur [],saisissez Pre, puis appuyez sur [].12 Saisissez Jean, puis appuyez sur [].13 Saisissez 30, puis appuyez sur [].14 Saisissez 1,83, puis appuyez sur [].15 Placez-vous aprs la balise fermante , appuyez sur [], puisouvrez un nouvel lment ligne avec , appuyez sur [] etfermez llment par .16 Placez-vous aprs la balise ouvrante , appuyez sur [],saisissez Mre, puis appuyez sur [].17 Saisissez Martine, puis appuyez sur [].18 Saisissez 28, puis appuyez sur [].19 Saisissez 1,63, puis appuyez sur [].20 Nous agrandirons la famille plus tard. Enregistrez votre fichiersans modifier son nom (nous ne souhaitons pas de nouvelle erreurde lien !). Ne fermez ni le fichier ni le Bloc-Notes.Figure 4.14 :Aspect dun tableau simpleTableaux Chapitre 491LE GUIDE COMPLETExaminez cette page dans votre navigateur. Vous pouvez le faire enchargeant la page daccueil et en suivant le lien vers Ma famille, ou enchargeant directement la page famille.html. Ce tableau reste duneextrme simplicit.Voici le code complet de cette page.Listing 4-3 : Code de la page famille.html (version 1.4.1)"Ma famille"Ma famillePrsentation de ma familleQualitPrnomAgeTaillePreJean301,83MreMartine281,63Ecrivez-moi !.Retour vers la page daccueil92 LE GUIDE COMPLETListes et tableauxChapitre 4Les balises fermantes des lments TR et TD peuvent tre omises, maiscela est dconseill, ne serait-ce que par souci de compatibilit avecXHTML 1.0.En-tte de colonne : lment THCest un tableau trs simple, de trois lignes et quatre colonnes.Comment lamliorer ? Tout dabord, il serait mieux de mettre envidence les en-ttes des colonnes. Cela ne pose aucun problme, grce un lment prvu cet effet, TH.j Placez-vous aprs louverture du premier lment ligne (TR) etremplacez tous les noms dlment TD par TH, comme dans :QualitLa balise fermante de llment TH peut tre omise, mais cela restedconseill.Les lments THLes agents utilisateurs visuels restituent typiquement le contenu deslments TH centr verticalement et horizontalement, et en caractresgras.Lgende de tableau : lment CAPTIONIl serait galement intressant de doter le tableau dune lgende, pluttque davoir recours un lment P qui casse un peu la structure dela page. Tel est le but de llment CAPTION.1 Supprimez la ligne Prsentation de ma famille.2 Placez-vous aprs louverture de llment tableau (TR), appuyezsur [] et saisissez :Prsentation de la familleLlment CAPTION fournit une brve description du but du tableau. Ildoit imprativement tre unique et situ immdiatement aprs la baliseouvrante de llment TABLE. Vous pouvez galement fournir unedescription plus longue, grce lattribut summary de llment TABLE,au bnfice des personnes employant des agents utilisateurs de typeconvertisseur texte-parole ou gnration de braille. Nous reviendrons surTableaux Chapitre 493LE GUIDE COMPLETcet attribut, ainsi que sur les autres attributs applicables aux lmentsenfants dun tableau et qui permettent damliorer son rendu pour lesagents utilisateurs non visuels dans le Chapitre 10, traitant delaccessibilit. Servez-vous cependant tout de suite de lattributsummary :3 Placez-vous dans la balise douverture de llment TABLE etsaisissez :Cet lment est particulirement important pour les tableaux dpourvusde lgende (CAPTION).Contrle de lalignement dun tableauVous avez dj rencontr lattribut align, disponible pour peu prstous les lments bloc. TABLE tant un lment bloc, en employantalign="center" dans cet lment, vous centrez le tableau dans lapage. Les valeurs possibles pour align sont center, left ou right.1 Modifiez la ligne de la balise douverture de llment TABLEpour centrer le tableau :2 Enregistrez votre fichier, sans modifier son nom. Ne fermez ni lefichier ni le Bloc-Notes.Examinez cette page dans votre navigateur. Le tableau est plusintressant.Figure 4.15 :Aspect du tableau centr94 LE GUIDE COMPLETListes et tableauxChapitre 4Vous pouvez galement employer cet attribut dans une ligne, pour necentrer que les contenus des cellules de cette ligne, ou dans nimportelaquelle des cellules individuelles, pour ne centrer que les donnes decette cellule. Souvenez-vous cependant que lemploi de lattribut alignest dsormais est dsormais dconseill : mieux vaut recourir auxfeuilles de style.Bordures et rgles de tableau : attributsborder, frame et rulesUn tableau digne de ce nom possde gnralement des lignes desparation. Vous pouvez contrler celles-ci laide de plusieurs attributsfacultatifs de llment TABLE : border, frame et rules.Commenons par lattribut border, dont la valeur exprime en pixelsdfinit la largeur du cadre extrieur.1 Modifiez comme suit la ligne de la balise douverture dellment TABLE :2 Enregistrez votre fichier, sans modifier son nom. Ne fermez ni lefichier ni le Bloc-Notes.Examinez le tableau dans un navigateur : son aspect est nettement plussympathique.Vous pouvez cependant aller bien plus loin, en spcifiant quels cts ducadre entourant la table doivent tre visibles (grce lattribut frame),Figure 4.16 :Aspect du tableau amliorTableaux Chapitre 495LE GUIDE COMPLETainsi que les rgles devant tre affiches (grce lattribut rules). Lesvaleurs possibles pour ces deux attributs sont prsentes dans letableau de la page 5. Modifiez votre tableau pour afficher une bordure de5 pixels gauche et droite du tableau, des rgles tant dessinesuniquement entre les colonnes :3 Modifiez comme suit la ligne de la balise douverture dellment TABLE :4 Enregistrez votre fichier, sans modifier son nom. Ne fermez ni lefichier ni le Bloc-Notes.Examinez le rsultat obtenu dans un navigateur : son aspect devraitressembler ce qui est prsent dans la figure suivante..Le tableau suivant prsente les valeurs possibles des attributs frame,rules et border ainsi que leur signification.Tableau 4.2 : Attributs de bordure et de rgles de llment TABLEAttribut Valeur SignificationFrame Void Aucune bordure (valeur par dfaut)Above Haut uniquementBelow Bas uniquementHsides Haut et bas uniquementVsides Droite et gauche uniquementLhs Ct gauche uniquementFigure 4.17 :Aspect du nouveau tableau avecFirefox96 LE GUIDE COMPLETListes et tableauxChapitre 4Tableau 4.2 : Attributs de bordure et de rgles de llment TABLEAttribut Valeur SignificationRhs Ct droit uniquementbox ou border Les quatre ctsRules None Aucune (valeur par dfaut)Groups Uniquement entre les groupes de lignes(THEAD, TFOOT et TBODY) et les groupes decolonnes (COLGROUP et COL)Rows Uniquement entre les lignesCols Uniquement entre les colonnesAll Entre toutes les lignes et colonnesBorder N Bordure de n pixels. Pas de bordure si n = 0.Pour des raisons de compatibilit descendante, les conventions suivantesdoivent tre respectes par les agents utilisateurs :j La dfinition border="0" signifie que frame="void" et querules="none" (sauf si spcifi autrement).j Toute autre valeur de lattribut border signifie inversement queframe="border" et que rules="all".j La prsence de lattribut border sans valeur dans la baliseouvrante de llment TABLE quivaut frame="border" et rules="all", avec une certaine valeur par dfaut non nulle pourlattribut border.j Autrement dit, les dfinitions et sontquivalentes, comme et .Variations selon les navigateursLe rendu dun tableau peut diffrer lgrement selon le navigateuremploy. Examinez les copies dcran suivantes, correspondant ltatactuel de notre page famille vue sous Internet ExplorerTableaux Chapitre 497LE GUIDE COMPLETet Amaya,et comparez-les la celle obtenue avec Firefox prcdemment obtenu.Si Firefox et Internet Explorer sont trs proches (lintervalle entre le titreet le tableau est plus faible avec Firefox, tandis que leffet relief estplus prononc), Amaya affiche une unique ligne de sparation.Contrle de la taille et de la structuredes cellulesReprenons un peu de terminologie : un tableau est compos de lignes(lments TR) et de colonnes. Lintersection dune ligne et dunecolonne est une cellule, le plus petit lment de donnes dun tableau.Une cellule individuelle ne devrait contenir quune informationFigure 4.18 :Aspects du nouveau tableau avecInternet ExplorerFigure 4.19 :Aspects du nouveau tableau avec Amaya98 LE GUIDE COMPLETListes et tableauxChapitre 4(toujours la structure avant tout !), de type en-tte (lment TH) oudonne (lment TD). Dans ce qui prcde, vous avez construit votrepremier tableau, compos de trois lignes (dont la ligne den-ttes) et dequatre colonnes, soit un total de douze cellules individuelles : le tableaucontient effectivement trois lments ligne TR et douze lments cellule,dont quatre lments TH den-tte et huit lments TD de donnes.Une cellule peut recevoir une mise en forme particulire en HTML laide dattributs spciaux.Espacement : attributs cellspacinget cellpaddingIl est ainsi possible de modifier lespacement entre les cellules, toutcomme le dcalage entre le contenu de la cellule et la bordure, ce quiporte le nom un peu inattendu de remplissage (padding). Pour cefaire, vous modifiez les attributs cellspacing et/ou cellpadding.Lattribut cellspacing dtermine la largeur de la partie blanche de labordure. Autrement dit, il quantifie lespace qui doit tre laiss parlagent utilisateur entre le ct gauche du tableau et le ct gauche de lacolonne situe lextrme gauche, le haut du tableau et le haut de larange suprieure, et ainsi de suite pour le ct droit et le bas du tableau.Lattribut spcifie galement lespacement entre les cellules.Notre tableau tant de trs petite taille, vous allez larer un peu.1 Modifiez comme suit la ligne de la balise douverture dellment TABLE :2 Enregistrez votre fichier, sans modifier son nom, puis examinez lersultat dans votre navigateur (voir Figure 4.20). moins que cela ne ressemble une des figures qui suivent (voirFigure 4.21, 4.22).Tableaux Chapitre 499LE GUIDE COMPLETLes diffrences entre navigateurs sont ici encore plus flagrantes : Firefoxsemble incapable de tenir compte de la prsence de lattributcellspacing, contrairement ses homologues. Plus vous compliquezla prsentation dun tableau en combinant les attributs et plus cela estsusceptible de se produire.3 Modifiez nouveau la ligne de la balise douverture de llmentTABLE :Laspect dans les trois navigateurs, bien quencore diffrent, est plussatisfaisant.Figure 4.20 :Emploi de lattribut cellspacing, vudans Firefox.Figure 4.21 :Emploi de lattribut cellspacing, vu dansInternet ExplorerFigure 4.22 :Emploi de lattribut cellspacing, vudans Amaya.100 LE GUIDE COMPLETListes et tableauxChapitre 4Un second attribut, cellpadding, correspond la largeur, galementexprime en pixels, de lespace compris entre le contenu de la cellule etla bordure du tableau ou la rgle. La valeur de cet attribut peut treexprime en pixels : les quatre marges se trouvent alors cette distancedu contenu. Si la valeur de lattribut est exprime en pourcentage, lesmarges suprieure et infrieure devraient se trouver gale distance ducontenu, en fonction dun pourcentage de lespacement verticaldisponible, tandis que les marges gauche et droite devraient se trouver gale distance du contenu, en fonction dun pourcentage delespacement horizontal disponible.Ces deux attributs contrlent donc conjointement lespacement entre et lintrieur des cellules.Bordure invisibleEn attribuant au tableau une bordure invisible (border=0), le contenude la cellule semble flotter , spar de toutes les autres informations.Figure 4.23 :Page modifie avec attributcellspacing, vu dans FirefoxFigure 4.24 :Page modifie avec attributcellspacing, vu dans Internet ExplorerFigure 4.25 :Page modifie avec attribut cellspacing,vu dans Amaya.Tableaux Chapitre 4101LE GUIDE COMPLETCest souvent intressant, puisque HTML reste globalement peuadapt aux espaces blancs.1 Modifiez comme suit la ligne de la balise douverture dellment TABLE :2 Enregistrez votre fichier, sans modifier son nom, puis examinez lersultat dans votre navigateur. Vous devriez voir quelque chosedquivalent ce qui est prsent dans la figure suivante.Ici, lattribut cellspacing spcifie que les cellules devraient trespares de vingt pixels, les unes par rapport aux autres ainsi que parrapport au cadre du tableau. Lattribut cellpadding stipule que lamarge suprieure et la marge infrieure de la cellule seront chacunespares du contenu de la cellule de 15 % de lespacement verticaldisponible (soit 30 % au total). De mme, la marge de gauche et lamarge de droite de la cellule seront chacune spares du contenu de lacellule de 15 % de lespacement horizontal disponible (soit 30 % autotal).Alignement : attributs align et valignVous pouvez galement modifier lalignement dune cellule. Pourmodifier lalignement horizontal, vous recourez lattribut align, djFigure 4.26 :Emploi delattributcellpadding102 LE GUIDE COMPLETListes et tableauxChapitre 4rencontr, 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) etbaseline (premire ligne). Cette dernire valeur aligne le contenu detoutes les cellules selon la premire ligne de texte, mais pas forcmenten haut ni en alignant la dernire ligne.1 Modifiez comme suit les lments TD du second lment TR (lepremier contenant les en-ttes, soit des lments TH) :PreJean301,832 Procdez de mme pour les lments TD du dernier lment TR :MreMartine281,633 Enregistrez votre fichier, sans modifier son nom, puis examinez lersultat dans votre navigateur.Figure 4.27 :Contrle delalignementhorizontal etverticalTableaux Chapitre 4103LE GUIDE COMPLETAttributs dconseills en HTMLVous ne devriez pas tre tonns que je signale une fois encore queles attributs align et valign sont dconseiller dans le corps de lapage HTML, et quune feuille de style devrait tre employe laplaceLargeur des colonnes : attribut widthLa largeur des colonnes peut tre spcifie laide de largument widthde trois faons diffrentes :j Fixe : une largeur fixe est exprime en pixels (par exemple,width="30"). Spcifier une largeur fixe permet une restitutionprogressive.Conflit dattributsLorsquun tableau ou une colonne possde une largeur fixe, lesattributs cellspacing et cellpadding peuvent ncessiter plusdespace que celui qui est attribu. En cas de conflit, les agentsutilisateurs peuvent (sans tre obligs de le faire) donner ces attributsla priorit sur lattribut de largeur width. Mieux vaut donc viter de setrouver dans cette situation.j Pourcentage : une largeur exprime en pourcentage (parexemple, width="20%") se fonde sur le pourcentage despacehorizontal disponible pour le tableau (entre les marges courantesgauche et droite). Remarquez que cet espace ne dpend pas dutableau en lui-mme : une spcification en pourcentage permetdonc une restitution progressive.j Proportionnelle : une valeur proportionnelle (par exemple,width="3*") se rapporte aux portions despace horizontalncessaire au tableau. Si le tableau possde une largeur fixe (vialattribut width de llment TABLE), les agents utilisateurspeuvent le restituer de faon progressive, comme pour descolonnes proportionnelles. En revanche, si la largeur du tableaunest pas fixe, lagent utilisateur doit attendre davoir reu toutesles donnes avant de pouvoir dterminer lespace horizontalncessaire au tableau. Cet espace sera alors seulement allou auxcolonnes proportionnelles.104 LE GUIDE COMPLETListes et tableauxChapitre 4Comme cela a t mentionn, lattribut width peut galement treemploy sur llment TABLE pour dfinir la largeur totale dun tableau.Comme pour une colonne, cette largeur peut tre exprime de faonfixe, en pourcentage ou de faon proportionnelle.Modifiez de nouveau votre tableau :1 Modifiez comme suit la ligne de la balise douverture dellment TABLE, pour crer un tableau occupant 80 % delespace libre disponible lcran :2 Modifiez comme suit les lments TH du premier lment TR(celui qui contient les en-ttes) :QualitPrnomAgeTailleRemarquez que le total des quatre pourcentages est bien gal 100 %.3 Enregistrez votre fichier, sans modifier son nom, puis examinez lersultat dans votre navigateur.Figure 4.28 :Ajustement de lalargeur du tableauet des cellulesTableaux Chapitre 4105LE GUIDE COMPLETCette figure mrite que vous vous y attardiez un peu plus longtemps.Tout dabord, remarquez que la valeur par dfaut de lattributdalignement horizontal align est centr (align="center") pourun lment TH, alors quil est gauche (align="left") pour unlment TD. En outre, les choix dalignement sont bien mieux mis envidence que prcdemment. Remarquez galement quil a suffi demodifier la largeur des cellules de la premire ligne : ces spcificationsont t hrites par les lignes suivantes.Mais que se passerait-il si vous spcifiez des largeurs diffrentes pourles cellules de la seconde ligne ? Autant essayer4 Modifiez comme suit les lments TD du second lment TR (lepremier contenant les en-ttes, soit des lments TH) :PreJean301,83Pour corser les choses, le total des pourcentages est mme cette foisdiffrent de 100 %5 Enregistrez votre fichier, mais cette fois-ci sous le nomFamilleTest.html, puis examinez le rsultat dans votre navigateur.Manifestement, lagent utilisateur a t dconcert : il a retenu la plusforte des valeurs de largeur spcifies pour les trois premires colonnes(30 % pour les deux premires colonnes, cause des largeurs spcifiespour les deux premires cellules de la premire ligne, puis 30 % pour laFigure 4.29 : Ajustement incorrect de la largeur du tableau et descellules106 LE GUIDE COMPLETListes et tableauxChapitre 4troisime 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 widthnest pas dconseill, mieux vaut spcifier la largeur des tableaux laide de feuilles de style.Fusion de cellules : attributs rowspanet colspanDans un tableau, il est souvent utile de fusionner des cellules, que celasoit horizontalement (sur plusieurs colonnes) ou verticalement (surplusieurs lignes), voire les deux. Lattribut rowspan ralise une fusionverticale tandis que lattribut colspan opre une fusion horizontale.Lattribut rowspan spcifie le nombre de colonnes couvertes par lacellule courante. Sa valeur par dfaut est "1", la valeur "0" signifiantque la cellule couvre toutes les colonnes, depuis la colonne courantejusqu la dernire colonne de la section de table (voir plus loin leslments THEAD, TBODY et TFOOT) dans laquelle la cellule est dfinie.Lattribut colspan spcifie le nombre de colonnes couvertes par lacellule courante. Sa valeur par dfaut est "1", la valeur "0" signifiantque la cellule couvre toutes les colonnes, partir de la colonne courantejusqu la dernire colonne du groupe de colonnes (voir plus loinllment COLGROUP) dans lequel la cellule est dfinie.Cration dun tableau cellules fusionnes laide dun diteur de texteVous allez ici mettre en uvre ces nouveaux attributs en modifiant lapage secondaire Mes rgions du site Web, laide dun diteur de texte.1 Ouvrez le Bloc-Notes sil ne lest pas dj, puis le fichierregion.html (attention, si vous navez pas ferm prcdemment leBloc-Notes, le fichier actuel est familleTest.html).2 Comme dhabitude, modifiez le numro de version :Tableaux Chapitre 4107LE GUIDE COMPLET3 Supprimez la ligne du titre de niveau 2 (H2), puis le paragraphe dellment P. Crez sa place un nouveau tableau centr, avec salgende (lment CAPTION) et son attribut summary) :Ma rgion4 Vous allez crer ici un tableau un peu complexe, employant lafois des fusions de lignes et de colonnes, dont laspect thoriqueest reprsent dans la figure suivante.Tableau 4.3 : Aspect du tableau crerColonne 1 Colonne 2 Colonne 3 Colonne 4Ligne 1 Cette cellule occupe 1colonne et 4 lignes. Ellecontiendra par la suiteune image.Cette cellule stend sur 3 colonnes.Ligne 2 CelluleindividuelleCelluleindividuelleCelluleindividuelleLigne 3 Cellule sur2 lignesCellule sur 2 lignes et 2colonnesLigne 4Ce tableau possde au total quatre lignes et quatre colonnes. Commecela a dj t voqu prcdemment, un tableau HTML doit seconstruire ligne par ligne. Examinez la premire ligne thorique : ellecontient deux cellules, lune stendant sur trois lignes et lautre sur troiscolonnes. Entrez le code pour crer cette premire ligne.5 Ouvrez un lment de ligne TR (en vous plaant au-dessus de labalise de fin et en crant de nouvelles lignes), puiscrez la premire cellule en la dclarant comme stendant sur 4lignes :...Une image sera place ici...6 Crez ensuite la seconde cellule, qui doit stendre sur troiscolonnes :...Une image sera place ici...Ma rgion est clbre pour ses forts,ses montagnes et ses lacs.108 LE GUIDE COMPLETListes et tableauxChapitre 4Tableau 4.4 : Cellules cres la fin de ltape 6Colonne 1 Colonne 2 Colonne 3 Colonne 4Ligne 1 ...Une image seraplace ici...Ma rgion est clbre pour ses forts, sesmontagnes et ses lacs.Ligne 2 CelluleindividuelleCelluleindividuelleCelluleindividuelleLigne 3 Cellule sur 2lignesCellule sur 2 lignes et 2colonnesLigne 47 Passons la seconde ligne. Ouvrez un nouvel lment TR, sous laligne prcdente, puis crez ses cellules. Vous nen avez que trois crer, puisque la premire cellule de cette ligne est sous-entendue par lextension de la premire cellule de la premireligne.Les fortsLes montagnesLes lacsTableau 4.5 : Cellules cres la fin de ltape 7Colonne 1 Colonne 2 Colonne 3 Colonne 4Ligne 1 ...Une imagesera place ici...Ma rgion est clbre pour ses forts, sesmontagnes et ses lacs.Ligne 2 Les forts LesmontagnesLes lacsLigne 3 Cellule sur 2lignesCellule sur 2 lignes et 2colonnesLigne 48 Occupez-vous de la troisime ligne. Crez cette fois uniquementdeux lments TD, lun stendant sur deux lignes et lautreoccupant deux lignes et deux colonnes :Ici, du texte complter Ici, une autre image Tableaux Chapitre 4109LE GUIDE COMPLETTableau 4.6 : Cellules cres la fin de ltape 8Colonne 1 Colonne 2 Colonne 3 Colonne4Ligne 1 ...Une image seraplace ici...Ma rgion est clbre pour ses forts, sesmontagnes et ses lacs.Ligne 2 Les forts LesmontagnesLes lacsLigne 3 Ici, du texte complter.Ici, une autre image.Ligne 49 Et la quatrime ligne ? Comme le montre la figure prcdente,elle est dj implicitement cre : sa premire cellule par lapremire cellule de la premire ligne, la seconde par la secondecellule de la troisime ligne et les deux dernires par la troisimecellule de la ligne prcdente. Pour la bonne forme, insrez toutde mme un lment TR vide :10 Enregistrez le fichier, puis examinez la page dans votrenavigateur:Voici le code complet de la page :Listing 4-4 : Fichier region.html (version 1.4.2).Ma rgionFigure 4.30 :Aspect de la pageRgion dans unnavigateur110 LE GUIDE COMPLETListes et tableauxChapitre 4Ma rgion...Une image sera place ici...Ma rgion est clbre pour ses forts,ses montagnes et ses lacs.Les fortsLes montagnesLes lacsici, du texte complter Ici, une autre imageRetour vers la pagedaccueilUne bonne mthode consiste toujours procder comme nous lavonsfait ici, cest--dire en traant un quadrillage sur une feuille de papier eten indiquant les cellules dj cres : cela diminue fortement les risquesderreur et les surprises dsagrables susceptibles den rsulter.Cration dun tableau cellules fusionnes laide dun diteur HTMLComme nous lavons dit auparavant, les tableaux tel celui de cetexemple peuvent rapidement devenir trs complexes : ce sontFigure 4.31 :Aspect de la pageRgion dans unnavigateurTableaux Chapitre 4111LE GUIDE COMPLETprobablement 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, linterfaceest localise, si toutefois vous avez tlcharg la bonne version(nous employons ici la version 1.0PR (20050330)).2 Saisissez Ma rgion. Cliquez sur la flche de la zone de listedroulante, ct de Corps de texte et, choisissez dans la listeTitre 1.Placez-vous la fin du titre, puis appuyez sur [].3 Cliquez sur licne Tableau. Cela affiche une nouvelle fentre, quipermet de dfinir le tableau crer.Figure 4.32 : Cration dun titre de niveau 1Figure 4.33 :Bote de dialogue Insrer un tableau112 LE GUIDE COMPLETListes et tableauxChapitre 4Vous allez immdiatement modifier les attributs de votre tableau(en ralit de llment TABLE). Cliquez sur dition avance.Vous voyez que Nvu a dj dfini trois attributs avec des valeurspar dfaut : cellspacing, cellpading et border.4 Vous voulez ajouter deux attributs summary et align. Ouvrez lazone de liste droulante Attribut et choisissez summary. Dans lazone de texte Valeur, saisissez Prsentation de ma rgion.Ouvrez nouveau la zone de liste droulante Attribut et choisissezalign. Ouvrez la zone de liste droulante Valeur et choisissezcenter. La fentre diteur des proprits avances doitressembler ce qui est prsent dans la figure qui suit. Confirmezpar OK pour revenir la fentre Insrer un tableau.Figure 4.34 :diteur des propritsavancesFigure 4.35 :Fentre diteur desproprits avancesrenseigneTableaux Chapitre 4113LE GUIDE COMPLET5 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 choisissezdans le menu Tableau > Fusionner les cellules slectionnes : lesquatre cellules concernes fusionnent.7 Slectionnez les trois dernires cellules de la premire ligne, puischoisissez nouveau dans le menu Tableau > Fusionner lescellules slectionnes : les trois cellules concernes fusionnent.8 De la mme faon, faites fusionner les secondes cellules deslignes 3 et 4, puis les deux dernires cellules des lignes 3 et 4.9 Placez-vous dans la premire cellule et saisissez ...Une imagesera place ici Placez-vous dans la seconde cellule de lapremire ligne et saisissez Ma rgion est clbre pour sesforts, ses montagnes et ses lacs. Saisissez dans lescellules vides de la seconde ligne respectivement Les forts,Les montagnes et Les lacs.10 Sur la troisime ligne, saisissez dans la seconde cellule Ici, dutexte complter et dans la troisime Ici, une autreimage.Figure 4.36 : Aspect de la page Ma rgion aprs ltape 8114 LE GUIDE COMPLETListes et tableauxChapitre 411 Il subsiste quelques dtails rgler : placez-vous sur le titre deniveau 1 et choisissez dans la barre doutils Format > Aligner >Centrer. Cela centre le titre. Ensuite, vous ne devez pas oublierdajouter un nom dauteur. Cela est accompli laide de loptionde menu Outils > Prfrences. La page Options saffiche. Cliquezsur Paramtres de pages et, dans la fentre de droite, saisissezdans le champ Auteur mon nom (o mon nom est votre nom).12 Le tableau obtenu ressemble beaucoup ce que nous avions faitprcdemment, 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 dellment TITLE). Saisissez Ma rgion et cliquez sur OK. Dansla bote de dialogue Enregistrer sous, naviguez jusquau dossierMon Site Web et enregistrez le fichier sous le nom region2.html.13 Il serait maintenant intressant dexaminer le code source ainsignr. Rien de plus simple : cliquez en bas de la fentre surlonglet Source. Le code source saffiche (voir Figure 4.38).Ce code est trs semblable celui cr manuellement. Remarqueztoutefois quelques diffrences :Figure 4.37 : Aspect de la page termine dans lditeur NvuTableaux Chapitre 4115LE GUIDE COMPLETj Comme nous lavons dj vu auparavant, les caractres accentussont reprsents par des squences bizarres de caractres.Nous examinerons ceux-ci dans le prochain chapitre.j La balise TABLE emploie un nouvel attribut (style= "marginleft: auto; marginright: auto; textalign: left;width: 100%;"). Il sera examin en dtail dans le Chapitre 8,traitant des feuilles de style.j Les balises TD se voient dotes dattributs que nous connaissons,mais possdant la valeur "undefined" ().Cest un des petits problmes des diteurs HTML, qui insrentautomatiquement des balises et attributs supplmentaires, ce quialourdit le code. Lorsque HTML constate labsence de cesattributs avec une valeur spcifie, il considre quils sontprsents avec leur valeur par dfaut : il est donc superflu de lesajouter, cela alourdissant inutilement le code.j Il manque cependant llment META indiquant la version dufichier : ajoutez-la manuellement, puis enregistrez le fichier encliquant 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 picesdans un simple diteur de texte, moins de faire preuve dune rarematrise du code HTML !Figure 4.38 : Code source de la page116 LE GUIDE COMPLETListes et tableauxChapitre 4Cellules manquantes et cellules se recoupantDeux problmes sont frquents avec les tableaux possdant des cellulesfusionnes : loubli dune cellule dans une ligne et le recouvrement decellules. Pour voir ce qui se passe dans ces conditions, nous allonsmodifier laide dun diteur de texte la page rgion.html.1 Ouvrez le Bloc-Notes sil ne lest pas dj, puis ouvrez le fichierregion.html.2 Par scurit, enregistrez-le tout de suite sous le nomregion_erreur.html.3 Modifiez le titre (lment TITLE) :Ma rgion (page avec erreurs)4 Comme dhabitude, modifiez le numro de version :5 Modifiez la lgende (lment CAPTION) :Ma rgion (tableau avec erreurs)6 Vous allez dabord crer une nouvelle ligne en oubliant unecellule. Pour ce faire, placez-vous avant la balise de fermeture, appuyez sur [] puis saisissez :Une astuce a t utilise ici : pour crer une cellule vide quipossde toutefois un cartement entre ses bordures, insrez danscelle-ci un saut de ligne (). Cela naugmente pas lespaceblanc, mais cre une cellule vide.Cellule videPour crer une cellule vide qui affiche cependant un cartement entreses bordures, insrez dans celle-ci un saut de ligne ().XHTMLSouvenez-vous : en XHTML, vous devez saisir .Tableaux Chapitre 4117LE GUIDE COMPLET7 Enregistrez votre fichier, puis examinez-le dans un navigateur.Curieux, non ? Il y a bien une erreur, mais pas celle laquelle vous vousattendiez. Plutt que de voir une nouvelle ligne laquelle manque unecellule, trois cellules sont ajoutes la droite de la dernire ligneRflchissez : si le tableau comportait thoriquement quatre lignes dequatre cellules (reportez-vous la figure page 110), il a t prcis quela quatrime ligne tait cre implicitement, dans la mesure o toutes lescellules de la ligne prcdente (la troisime) stendaient sur deux lignes(en ralit, quatre pour la premire cellule, qui dbute sur la premireligne). Le Listing page 110 ne prsente effectivement que trois lmentsTR. Lorsque vous ajoutez un nouvel lment TR, celui-ci est considrcomme tant la quatrime ligne, possdant dj quatre cellules dfinies.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 () avant la balisedouverture de celui que vous venez dinsrer. Enregistrez votrefichier, puis examinez-le dans un navigateur.Figure 4.39 : Aspect de la page region_erreurs aprs ltape 7Figure 4.40 : Aspect de la page region_erreurs aprs ltape 6118 LE GUIDE COMPLETListes et tableauxChapitre 4Une ligne supplmentaire apparat bien : elle comporte une cellule demoins que ce qui est normalement ncessaire, comme vous vous yattendiez.Remarquez que cet exemple dmontre quil est inutile, voire dangereux,de crer des cellules stendant sur plusieurs lignes lorsque toutes lescellules dune ligne stendent vers le bas dun mme incrment : celareste invisible lcran et risque dentraner par la suite des erreurs, encas de modification de la page. Mieux vaudrait ici supprimer lattributrowspan="2" dans les cellules de la troisime ligne, et modifierlattribut de la premire cellule en rowspan="3". Vous pourrez alorssupprimer en toute scurit llment ligne vide. Faites-le donc.8 Vous allez maintenant dfinir des cellules qui se chevauchent.Modifiez le second lment TD du second lment TR (donc enralit la troisime cellule de la seconde ligne) :Les montagnes9 Enregistrez votre fichier, puis examinez-le dans votre navigateur.En thorie, cette cellule se recoupe dsormais avec la troisime cellulede la troisime ligne. En pratique, la restitution de cette erreur (car cenest une) peut varier selon le mode de gestion de lagent utilisateurconcern. Ici, pratiquement quel que soit le navigateur employ, lacellule Les montagnes stend vers le bas, la cellule normalementsitue au-dessous tant repousse vers la droite et semblant ne plusstendre latralement sur deux cellules. Cela est dailleurs faux :vrifiez-le.10 Ajoutez une cellule vide () aprs la cellule Leslacs :Les lacsFigure 4.41 : Aspect de la page region_erreurs aprs ltape 8Tableaux Chapitre 4119LE GUIDE COMPLET11 Enregistrez votre fichier, puis examinez-le dans votre navigateur.Vous voyez, grce lapparition de la nouvelle cellule, que la cellule Ici, une autre image stend bien sur deux cellules. Le code de cetableau prodigieusement laid, puisque bourr derreurs, est prsent dansle listing suivant, comme exemple ne surtout pas suivre : ne crezjamais de cellules se recouvrant !Listing 4-5 : Fichier region_erreurs.html.Ma rgion (page avec erreurs)Ma rgion (page avec erreurs)...Une image sera place ici...Ma rgion est clbre pour ses forts,ses montagnes et ses lacs.Les fortsLes montagnesLes lacsici, du texte complter Ici, une autre image Figure 4.42 : Aspect de la page region_erreurs aprs ltape 10120 LE GUIDE COMPLETListes et tableauxChapitre 4Regroupement de lignes : lments THEAD,TFOOT et TBODYIl est possible de regrouper les lignes dun tableau dans des sectionsden-tte, de pied et de corps ( laide respectivement des lmentsTHEAD, TFOOT et TBODY). Ces regroupements apportent desinformations de structure supplmentaires, qui peuvent tre utilises parles agents utilisateurs pour souligner cette structure. Les agentsutilisateurs peuvent exploiter le dcoupage en-tte/corps/pied de faon faire dfiler le corps indpendamment des sections den-tte et de pied.Pour limpression dun grand tableau, les informations den-tte et depied peuvent tre rptes sur chacune des pages qui contiennent lesdonnes du tableau.Chacun de ces lments encadre au moins un lment TR. Ils possdenttous les attributs facultatifs standard ainsi que les attributs dalignement,qui seront alors appliqus toutes les cellules du groupe de lignes.Si vous utilisez ces lments, llment TFOOT doit prcder llmentTBODY dans votre code HTML, afin que les navigateurs Web puissentafficher les informations du pied avant de charger la totalit des lignesde donnes.Les sections THEAD, TFOOT et TBODY doivent contenir le mme nombrede colonnes. Plusieurs lments TBODY peuvent coexister. Lexemplesuivant illustre lordre et la structure des en-ttes, pieds et corps detableau. ...informations den-tte... ...informations de pied... ...premire range des donnes du bloc 1... ...seconde range des donnes du bloc 1...Tableaux Chapitre 4121LE GUIDE COMPLET ...premire range des donnes du bloc 2... ...deuxime range des donnes du bloc 2... ...troisime range des donnes du bloc 2...Nous allons examiner un exemple plus concret. Supposons que dans vospassions figurent les ouvrages de science-fiction : vous avez conu uneliste dune cinquantaine douvrages, rpartis en plusieurs thmes, quevous avez prsente en tableau. Celui-ci se trouve dans une pagenomme SF.html, qui est connecte votre page Mes passions. Par purecharit, nous vous pargnerons la saisie de ce tableau, pour ne vous enprsenter que le rsultat.En apparence, ces regroupements sont sans effet : ils nentrent en jeuque pour un affichage progressif et une impression. La figure suivanteprsente un extrait du code source de la page (voir Figure 4.44).La balise ouvrante de llment TBODY est toujours obligatoire si letableau possde un en-tte ou un pied. Elle peut tre omise en leurabsence. Les balises fermantes des trois lments TBODY peuvent treomises, mais cela reste dconseill.Regroupement de colonnes : lments COLet COLGROUPComme vous devez lavoir dsormais bien compris, HTML regroupe lescellules de donnes en lignes laide de llment TR. Chaque lmentTR signale une nouvelle ligne du tableau, ces lignes se prsentant enFigure 4.43 : Page avec tableaux renfermant des lments THEAD, TBODYet TFOOT.122 LE GUIDE COMPLETListes et tableauxChapitre 4squence, du haut vers le bas. Il nexiste pas dlment correspondantTC pour les colonnes dun tableau : il est par consquent parfois dlicatde placer des donnes en colonnes dans un tableau : il faut sassurer quechaque ligne possde suffisamment de cellules, et que chaque colonnecontient bien les bonnes donnes.HTML 4.0 permet toutefois deffectuer un regroupement structurel decolonnes laide de llment COLGROUP et dans le but dune mise enforme laide de llment COL. Cette structure peut tre mise envidence grce aux feuilles de style ou des attributs HTML (commelattribut rules pour llment TABLE).Un tableau contient soit un unique groupe de colonnes implicite (pasdlment COLGROUP), soit un certain nombre de groupes de colonnesexplicites, 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 spcifique) au sein dungroupe, les auteurs doivent identifier cette colonne avec un lment COL.Llment COL permet de partager des attributs entre plusieurs colonnes,sans faire appel un regroupement structurel.Figure 4.44 :Code source de la pagesf.htmlTableaux Chapitre 4123LE GUIDE COMPLETCes deux lments possdent un attribut capital, span, dont la valeur estun entier suprieur 0 et qui spcifie le nombre de colonnes concernes.Sa valeur par dfaut est 1 : cest cette valeur qui est employe lorsquelattribut est absent, ce qui correspond un groupe ne contenant quuneseule colonne.Lorsque cet lment est prsent dans un lment COLGROUP, les agentsutilisateurs doivent lignorer si llment contient un ou plusieurslments COL.Lintrt de lattribut span est quil permet de regrouper lesinformations concernant les largeurs de colonnes. Ainsi, si une tablecontient n colonnes, chacune delles ayant une largeur de 30 pixels, il estplus facile dcrire :que :...jusqu totaliser n lments COL...Pour appliquer une information de style particulire la colonne m duntableau possdant n colonnes, vous lisolez comme suit :Un second attribut, width, spcifie la largeur par dfaut de chaquecolonne dans le groupe de colonnes courant. Sa valeur peut treexprime comme habituellement en pixels, en pourcentage ou de faonrelative, mais galement laide de la forme spciale "0*" (zro etastrisque). Celle-ci stipule que la largeur de chaque colonne du groupedoit tre suffisante pour rendre le contenu de la colonne. Ceci impliqueque ce contenu soit connu en totalit avant que la largeur ne puisse trecalcule exactement. La spcification de la valeur "0*" va doncempcher lagent utilisateur deffectuer une restitution progressive dutableau.Comme pour span, un attribut width prsent dans un lment COLoutrepasse celui prsent dans COLGROUP, pour les colonnes concernes.124 LE GUIDE COMPLETListes et tableauxChapitre 4Il est capital de bien comprendre les rles respectifs de ces deuxlments : si llment COLGROUP est un rassemblement structurel,llment COL rassemble les spcifications dattributs pour les colonnesdu tableau, mais ne rassemble pas les colonnes de manire structurelle.Les lments COL sont vides et ne servent que de support pour lesattributs. Ils peuvent apparatre lintrieur comme lextrieur dunlment COLGROUP.Ces deux lments acceptent les attributs dalignement horizontal etvertical 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 dellment TABLE () pour dfinirlalignement vertical dans les cellules : cela fonctionne parfaitementavec Internet Explorer et Amaya, mais malheureusement pas avecFirefox. Vous pouvez mettre en forme les colonnes en travaillantindividuellement sur chaque cellule de la colonne, comme cela a tdcrit prcdemment : une tche laborieuse qui augmente fortement lataille du code source, mais demeure hlas la seule solution decompatibilit avec les navigateurs non standard.Figure 4.45 : Page sf.html avec recours des lments COL examine sousdiffrents navigateursTableaux Chapitre 4125LE GUIDE COMPLETFusion de cellules appartenant diffrents regroupementsVous devriez avoir dj souponn que crer des lments COLGROUPou COL nempchait pas la fusion de cellules individuelles quiappartiennent des lments diffrents. Cela est possible, mais mieuxvaut vous en abstenir. Selon lagent utilisateur, la cellule ainsi fusionnepeut prendre les proprits du premier lment ou du second lment deregroupement, voire empcher simplement laffichage correct du tableau.Figure 4.46 : Sous un autre navigateurFigure 4.47 : Sous encore un autre navigateur126 LE GUIDE COMPLETListes et tableauxChapitre 4Imbrication de tableauxIl est possible dimbriquer des tableaux : un tableau peut se trouver lintrieur dune cellule dun autre tableau. Cela peut devenir extrmementcomplexe comprendre dans le code HTML : prenez garde bien utiliserdes 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 fichierregion.html.2 Comme dhabitude, modifiez le numro de version :3 Modifiez la lgende (lment CAPTION) :Ma rgion (tableaux imbriqus)4 Comme vous lavez fait dans la page region_erreurs, supprimezlattribut rowspan="2" dans les cellules de la troisime ligne, etmodifiez 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 foissur [] et placez-vous sur la premire ligne vierge.6 Saisissez le fragment de code suivant, crant un nouveau tableauimbriqu :Donnes climatologiquesTemp. Max.18 Temp. min.-3,1 Pluie682 mm7 Remarquez que nous avons retenu ici une nouvelle disposition :les en-ttes sont disposs en colonne et non plus en ligne.Enregistrez ce fichier et examinez-le dans votre navigateur.Tableaux Chapitre 4127LE GUIDE COMPLETAutres prcisions concernant les tableauxLa puissance et la richesse des tableaux font quils sont largementemploys comme outils de conception, et ce sur la grande majorit dessites. Cela pose encore quelques problmes lis la compatibilit entrenavigateurs. Plus encore, en utilisant exactement la mme version dumme navigateur sur deux machines diffrentes, vous pourriez voir toutle tableau sur lune et tre oblig de faire dfiler lcran sur la seconde.Un tableau doit tre conu avec la plus grande prudence. Par exemple,en dfinissant lattribut width (largeur) en pixels, le tableau cesse dtreuniversel et noffre un rsultat parfait qu ceux qui possdentexactement la mme rsolution dcran et la mme taille de fentre.Si vous voulez absolument utiliser des tableaux pour raliser votre miseen page, et si les feuilles de style napportent pas de rponsesatisfaisante (ce qui serait pour le moins surprenant), veillez dfinirlattribut width en pourcentage, le pourcentage de la fentre devant treoccup par chaque colonne ou cellule.Pour restituer un tableau, tout agent utilisateur peut effectuer lesoprations suivantes :j Restituer le contenu de lattribut summary. Il est prfrable defournir une description du contenu et de la structure du tableauafin que les visiteurs qui emploient des agents utilisateurs nonvisuels puissent mieux la comprendre.j Restituer la lgende (lment CAPTION), si elle est prsente.j Restituer len-tte et/ou le pied du tableau (si prsents). Parexemple, sil sagit dun mdia pagin en sortie, les agentsFigure 4.48 : Tableaux imbriqus128 LE GUIDE COMPLETListes et tableauxChapitre 4utilisateurs peuvent placer len-tte en haut de chaque page et lepied en bas de chacune delles. De la mme manire, si lagentutilisateur fournit un mcanisme pour faire dfiler les ranges,len-tte peut apparatre en haut de la zone qui a dfil et le pieden bas de celle-ci.j Calculer le nombre de colonnes dans la table (cest le nombredlments TR de llment TABLE).j Regrouper les colonnes en fonction des ventuelles spcificationsde regroupement de colonnes.j Restituer les cellules, range par range et regroupes dans lescolonnes appropries, entre len-tte et le pied. Les agentsutilisateurs devraient mettre en forme le tableau daprs lesattributs HTML et les spcifications de la feuille de style.Le modle de tableau HTML 4.01 a t conu pour que les agentsutilisateurs puissent restituer progressivement les tableaux, plutt que dedevoir attendre la rception de la totalit des donnes avant decommencer la restitution. Pour que cela soit possible, les concepteursdoivent indiquer le nombre de colonnes du tableau ainsi que la largeurde ses colonnes.Plus prcisment, lagent utilisateur peut restituer un tableau en uneseule passe quand les largeurs de colonnes sont spcifies laide dunecombinaison dlments COLGROUP et COL. Si une des colonnes estspcifie en termes relatifs ou en pourcentage, il faut aussi spcifier lalargeur du tableau en question.Les agents utilisateurs visuels permettent aux personnes voyantesdembrasser rapidement la structure du tableau partir des en-ttes (TH) etde la lgende (CAPTION). En revanche, ceux-ci seront souvent inadaptspour les personnes qui dpendent dagents utilisateurs non visuels.Les agents utilisateurs visuels devraient viter le rognage de toute partiedu tableau contenant la lgende, moins de fournir un moyen pouraccder toutes les parties du tableau, par exemple par dfilementhorizontal ou vertical.Calcul du nombre de colonnes dansun tableauIl existe deux faons de dterminer le nombre de colonnes dans unetable (par ordre de priorit) :Tableaux Chapitre 4129LE GUIDE COMPLET1 Si llment TABLE contient des lments COLGROUP ou COL, lesagents utilisateurs calculent comme suit le nombre de colonnes :Pour chaque lment COL, prendre la valeur de son attributspan (la valeur par dfaut est "1").Pour chaque lment COLGROUP contenant au moins unlment 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 sonattribut span (la valeur par dfaut tant "1").2 Sinon, quand llment TABLE ne contient aucun lmentCOLGROUP ou COL, les agents utilisateurs devraient fonder lenombre de colonnes sur ce qui est requis par les lignes. Lenombre de colonnes est gal au nombre de colonnes requises parla ligne possdant le plus de colonnes, y compris les cellules quicouvrent plusieurs colonnes. Les lignes possdant un nombre decolonnes moindre seront garnies de cellules vides en fin de ligne.La fin dune ligne dpend de la directionnalit du tableau.Lorsquun tableau contient des lments COLGROUP ou COL et que lesdeux 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 letableau, il peut les regrouper en groupes de colonnes.Hritage des attributsLe problme de lhritage des attributs dalignement dans un tableaupeut parfois sembler complexe. Certains dentre eux peuvent tre hritsde llment TABLE ou de la ligne laquelle la cellule appartient.Certains peuvent galement tre hrits dune colonne, laidedlments COLGROUP ou COL.Les regroupements de colonnes apportent des informations structurellessupplmentaires qui peuvent tre exploites par les agents utilisateurs. Ilest galement possible de dclarer des proprits de colonnes au dbutde la dfinition du tableau (via les lments COLGROUP et COL), pour queles agents utilisateurs puissent restituer progressivement la table au lieude devoir attendre que toutes les donnes du tableau soient arrivesavant de pouvoir les restituer.130 LE GUIDE COMPLETListes et tableauxChapitre 4Lalignement du contenu des cellules peut tre spcifi cellule parcellule ou bien peut tre hrit des lments qui lenglobent tels que larange, la colonne ou la table mme.Lordre de priorit (de la plus leve la plus basse) des attributsdalignement (align, char et charoff) est le suivant :1 Lattribut dalignement dfini sur un lment lintrieur desdonnes de la cellule (par exemple, un lment P).2 Lattribut dalignement dfini sur une cellule (les lments TH etTD).3 Lattribut dalignement dfini sur un lment de regroupement decolonnes (les lments COL et COLGROUP). Quand la celluleappartient un regroupement de colonnes, la propritdalignement est hrite de la dfinition de la cellule initiant lerecouvrement.4 Lattribut dalignement dfini sur un lment de ligne ou deregroupement de lignes (les lments TR, THEAD, TFOOT etTBODY). Quand la cellule appartient un ensemble de plusieurslignes, la proprit dalignement est hrite de la dfinition de lacellule initiant le recouvrement.5 Lattribut dalignement dfini sur la table (llment TABLE).6 La valeur dalignement par dfaut.Lordre de priorit (de la plus leve la plus basse) de lattributvalign (ainsi que des autres attributs hrits lang, dir et style) estle suivant :1 Lattribut dfini sur un lment lintrieur des donnes de lacellule (par exemple, un lment P).2 Lattribut dfini sur une cellule (les lments TH et TD).3 Lattribut dfini sur un lment de range ou de regroupement deranges (les lments TR, THEAD, TFOOT et TBODY). Quand lacellule fait partie dun ensemble recouvrant plusieurs ranges, lavaleur de lattribut est hrite de la dfinition de la cellule initiantle recouvrement.4 Lattribut dfini sur un lment de regroupement de colonnes (leslments COL et COLGROUP). Quand la cellule appartient unregroupement de colonnes, la valeur de lattribut est hrite de ladfinition de la cellule initiant le recouvrement.5 Lattribut dfini sur la table (llment TABLE).Tableaux Chapitre 4131LE GUIDE COMPLET6 La valeur par dfaut de lattribut.En outre, lors de la restitution des cellules, lalignement horizontal estdtermin par les colonnes, de prfrence aux lignes, tandis que leslignes ont la prfrence sur les colonnes pour lalignement vertical.Il existe un attribut non encore examin, lattribut dir. Celui-ci dfinitla directionnalit dun tableau (qui, par dfaut, est de gauche droite).Pour une table de gauche--droite, la colonne zro se trouve sur le ctgauche et la range zro se trouve en haut. Pour une table de droite--gauche, la colonne zro se trouve sur le ct droit et la range zro enhaut. Lorsquil est spcifi pour llment TABLE, lattribut dir affecteaussi la direction du texte lintrieur des cellules du tableau (puisquilest hrit par les lments de type bloc).Pour spcifier une table de droite--gauche, fixez la valeur de lattributdir comme suit :...le reste du tableau...Il est possible de modifier la direction du texte dans une celluleindividuelle en spcifiant lattribut dir dans llment qui dfinit cettecellule.lment TABLELlment TABLE est le seul pour lequel lattribut dir inverse lordrevisuel 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 attributnon de son parent, mais de la premire cellule dun recouvrement. Ilsagit dune exception aux rgles gnrales dhritage des attributs.Autres mises en forme de tableaux :attributs char et charoffLors de la premire publication de la spcification, en 1997, laspcification des feuilles de style CSS1 noffrait pas de mcanismespermettant le contrle de tous les aspects de la mise en forme visuelledes tables. Depuis lors, la spcification des feuilles de style CSS2 aajout des proprits qui permettent la mise en forme visuelle des tables.132 LE GUIDE COMPLETListes et tableauxChapitre 4Lattribut dalignement align employ dans un tableau peut possderune valeur particulire (align="char"), qui stipule que lalignementest effectu sur un caractre unique prsent dans un fragment de textequi sert daxe dalignement.Ce caractre est dfini par lattribut char, dont la valeur par dfaut estle sparateur point dcimal pour la langue courante, telle quelle estdfinie par lattribut lang (par exemple, le point . pour langlais etla virgule , pour le franais).Lattribut charoff, quand il est prsent, spcifie le dcalage de lapremire occurrence du caractre dalignement sur chaque ligne. Si laligne ne comprend pas de caractre dalignement, elle devrait glisserhorizontalement de manire finir sur la position dalignement.Lors du recours lattribut charoff pour fixer le dcalage du caractredalignement, la direction du dcalage est dtermine par la direction detexte courante (telle que spcifie par lattribut dir). Dans les textes degauche--droite (la valeur par dfaut), le dcalage sopre partir de lamarge de gauche. Inversement, pour les textes de droite--gauche, ledcalage seffectue partir de la marge de droite.Hlas ! Si la spcification mentionne effectivement que les agentsutilisateurs ne sont pas obligs de grer ces attributs, aucun desnavigateurs tests na t en mesure de le faire dans leurs versionsactuelles (Firefox 2.0.0.12, Mozilla 9, Internet Explorer 7.0.5730 etAmaya 7.8.3)4.3. Rsumj Il est possible de crer en HTML trois types de listes : ordonnesou numrotes, non ordonnes ou listes puces et listes dedfinitions.j Une liste numrote est cre laide de llment OL renfermantdes items de liste LI. Il est possible de modifier le type denumrotation laide de lattribut type, la valeur de dbut laide de lattribut start et de rinitialiser la numrotation dansun item de liste laide de lattribut value.j Une liste puces est cre laide de llment UL renfermant desitems de liste LI. Il est possible de modifier laspect de la puce laide de lattribut type, pour toute la liste ou pour un itemparticulier.Rsum Chapitre 4133LE GUIDE COMPLETj Une liste de dfinitions est cre laide de llment DLrenfermant des lments enfants DT (terme de dfinition) et DD(description de la dfinition).j Il est possible dimbriquer un nombre quelconque de listes de toustypes.j Un tableau est cr laide de llment TABLE. Il contient deslignes (lment TR) et des colonnes crant des cellules pouvantrenfermer des informations de rubrique (lment TH) ou desinformations de donnes (lment TD).j Llment TABLE possde trois attributs, border, frame etrules, qui indiquent lagent utilisateur les bordures et lesrgles restituer.j Llment CAPTION permet de doter le tableau dune lgende. Ilest galement utile de renseigner lattribut summary de llmentTABLE, au bnfice des agents utilisateurs non visuels.j Les attributs cellspacing et cellpadding permettent demodifier respectivement lespacement entre les cellules, ainsi quele dcalage entre le contenu de la cellule et la bordure.j Lalignement horizontal dun tableau seffectue laide delattribut align et lalignement vertical grce lattributvalign. La largeur est contrle par lattribut width. Elle peuttre exprime de faon fixe, en pourcentage ouproportionnellement.j Il est possible de fusionner des cellules dune mme ligne laidede lattribut colspan et dune mme colonne laide de lattributrowspan. Ces deux attributs peuvent tre combins.j Vous regroupez structurellement des lignes laide dlmentsden-tte de tableau (THEAD), de corps de tableau (TBODY) et depied de tableau (TFOOT).j Vous regroupez structurellement des colonnes laide dlmentsCOLGROUP et dfinissez des attributs partags laide dlmentsCOL. Lattribut span spcifie ltendue dun regroupement.j Il est possible dimbriquer des tableaux.j Cest avec les tableaux quil est possible de constater lesdiffrences de restitution les plus importantes entre navigateurs.134 LE GUIDE COMPLETListes et tableauxChapitre 4Mise en formeavancePrincipaux lments structuraux ................................................................................... 136lments de structuration du texte ............................................................................... 149Caractres spciaux et encodage de caractres ...................................................... 156Modification de lapparence du texte ........................................................................... 164Notation mathmatique .................................................................................................... 169Rsum ................................................................................................................................ 173HTML propose de nombreuses autres possibilits de mise en forme despages ou de portions de texte, laide dlments de type bloc ou detype ligne. Tous rpondent des besoins prcis, et peuvent treemploys de diverses faons, par exemple soit la place de llment deparagraphe normal P, soit en combinaison avec celui-ci.lments tudis dans ce chapitre :HRDIV, SPANPRE, TTBLOCQUOTE, QCITEABBR, ACRONYMEM, STRONGOBJECTCODE, SMP, KBD5.1. Principaux lments structurauxlment HRCet lment bloc est probablement le plus curieux de cette srie, car ilsagit dun lment vide dpourvu de balise de fermeture, dont le seulrle est dinsrer une ligne horizontale lcran. Placez-le aprs lestitres principaux et les changements de section. Une telle barrehorizontale constitue une preuve manifeste de changement de sujet.1 Ouvrez le Bloc-Notes, puis le fichier pageacc1_4_1.html.2 Comme dhabitude, modifiez le numro de version :3 Ajoutez un lment HR de barre horizontale entre les titres deniveau 1 et de niveau 2 :Ma page daccueilBienvenue sur mon site.4 Ajoutez galement un lment HR juste avant la balise defermeture de llment BODY.136 LE GUIDE COMPLETMise en forme avanceChapitre 55 Enregistrez votre fichier sous le nom pageacc1_5_1.html, puisexaminez-le dans votre navigateur.La page affiche dsormais deux barres horizontales.XHTMLEn XHTML, comme pour tout lment vide, vous devez lcrire.Commentaire HTMLAutre bloc particulier, le cas o vous souhaitez insrer un commentairenon lu par le navigateur, et donc non affich dans la fentre de celui-ci.o commentaire est le texte du commentaire. Ce texte peut occuperplusieurs lignes. Les commentaires sont frquemment saisis enmajuscules afin de faciliter leur identification dans le code.Prenons un exemple concret : vous possdez un en-tte ou un pied depage commun toutes vos pages Web et savez que vous allez devoirrgulirement le modifier. Vous pouvez en faciliter grandement larecherche en insrant juste avant un commentaire comme :Figure 5.1 :Barres horizontales dans la pagedaccueilPrincipaux lments structuraux Chapitre 5137LE GUIDE COMPLETLes commentaires sont prcieux lorsquun site Web est dvelopp encollaboration, pour expliquer certains ensembles de code ou simplementpour servir daide-mmoire ou de lignes directrices en vuedamliorations ultrieures.1 Revenez au fichier pageacc1_5_1.html actuellement ouvert dans leBloc-Notes.2 Modifiez nouveau le numro de version :3 Ajoutez un lment de commentaire juste aprs le titre de niveau 2 :Bienvenue sur mon site.4 Ajoutez un autre commentaire juste avant la balise de fermeturede llment BODY.Remarquez que le premier commentaire stend sur plusieurslignes, contrairement au second.5 Enregistrez votre fichier sous le nom pageacc1_5_2.html, puisexaminez-le dans votre navigateur : laspect est strictementidentique la page prcdente, puisque les commentaires sontignors par lagent utilisateur.Figure 5.2 :Les commentaires napparaissentpas dans la fentre du navigateur138 LE GUIDE COMPLETMise en forme avanceChapitre 5Couples de traits dunionLes espaces vierges sont interdits entre le dlimiteur douverture de ladclaration de balisage . Une erreur classiqueconsiste inclure une chane de traits dunion lintrieur duncommentaire. Prenez garde ne pas insrer une suite de deux traitsdunions adjacents ou plus lintrieur dun commentaire : lagentutilisateur linterprterait comme la fin du commentaire !Les commentaires se rvlent galement prcieux justement en raison deleur capacit ne pas tre interprts par lagent utilisateur : lorsquevous testez le code dune nouvelle page et rencontrez une erreur, il estparfois utile de mettre en commentaire une portion du code, qui sera ainsiignore par le navigateur. Il peut sagir dune portion dont vous savezquelle fonctionne correctement ou au contraire dune partie de posantproblme. Prenons un exemple.1 Revenez au fichier pageacc1_5_2.html actuellement ouvert dans leBloc-Notes.2 Modifiez nouveau le numro de version :3 Dclarez comme commentaire le paragraphe denvoi de courriel :4 Enregistrez votre fichier sous le nom pageacc1_5_3.html, puisexaminez-le dans votre navigateur : lancre permettant lenvoidun courriel votre adresse napparat plus dans la fentre (voirFigure 5.3).Cette technique est extrmement intressante : pensez par exemple untableau saffichant dune faon qui ne correspond pas votre attente.Placez en commentaire tous les lments TR, puis sortez-les un un ducommentaire en dplaant la balise Principaux lments structuraux Chapitre 5139LE GUIDE COMPLETlments DIV et SPANLes lments DIV et SPAN, employs avec leurs attributs id et class,offrent un mcanisme gnrique qui rajoute de la structure auxdocuments. Llment DIV est un lment bloc, tandis que SPAN est unlment ligne. Impliqus uniquement dans un but structurel, ilsnimposent en eux-mmes aucune prsentation particulire du contenu.Ils sont essentiellement employs avec les feuilles de style et/oulattribut lang pour mieux exploiter HTML.Prenons un exemple concret. Souvenez-vous que, lors de ltude desen-ttes, corps et pieds de tableaux (THEAD, TBODY et TFOOT), nousavions suppos que lune de vos passions concernait la littrature descience-fiction. Vous aviez (thoriquement) conu un tableau prsentantdiffrents ouvrages. HTML ne disposant pas dlment identifiant desobjets comme SF classique , Heroic fantasy , etc., les lmentsDIV et SPAN permettent dobtenir les effets de structure et deprsentation souhaits. Voici comment vous pourriez vous en servir :Auteurs "classiques" SF...autre contenu...Figure 5.3 :La ligne denvoi decourriel napparatplus sur la page : lecode plac encommentaire estignor.140 LE GUIDE COMPLETMise en forme avanceChapitre 5Auteurs "heroic-fantasy"...autre contenu......Vous avez dfini des blocs prsentation particulire, lis au styleattribu 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 diffrenceavec la version prcdente (reportez-vous la figure de la page 134),puisque vous navez pas encore dfini ces classes de feuilles de style.Vous verrez plus en dtail dans le Chapitre 8, traitant des feuilles destyle, comment exploiter ces structures.lment PRELlment PRE est trs intressant en ce quil dfinit un bloc de textecomme prformat. Les agents utilisateurs visuels (les navigateurs)grent comme suit le contenu dun lment PRE :j Ils peuvent respecter les espaces vierges prsents dans le texte.j Ils peuvent afficher le texte laide dune police espacementnon proportionnel.j Ils peuvent dsactiver le retour la ligne automatique.j Ils ne doivent pas dsactiver le traitement bidirectionnel.Remarquez bien que les navigateurs ne sont donc pas tenus de respecterabsolument les espaces vierges prsents dans le contenu dun lmentPRE.Pour examiner un exemple, supposons que parmi vos passions figuregalement Shakespeare et, plus particulirement parmi les uvres de cetminent auteur, Hamlet. Une de vos pages contient un extrait de cettepice : vous souhaitez respecter exactement la mise en forme de lauteur.Principaux lments structuraux Chapitre 5141LE GUIDE COMPLET1 Plutt que de crer dans le Bloc-Notes un nouveau fichier,repartez du fichier prcdent (en principe pageacc1_5_2.html) ensupprimant tout le contenu de llment BODY. Cela vite davoir saisir de nouveau tous les lments communs.2 Dans llment HEAD, modifiez llment TITLE :"Hamlet de Shakespeare"3 Puis modifiez le numro de version :4 Ajoutez un nouveau titre de niveau 1 dans llment BODY :Extrait de Hamlet de Shakespeare5 Ajouter ensuite une barre horizontale, puis un paragraphe :Ceci est un de mes extraits favoris : un petit air unpeu coquin chant par Ophlia ses parents.6 Crez ensuite un lment PRE et placez-y son contenu, puisfaites-le suivre dune autre barre horizontale :Alors, il se leva et mit ses habits,Et ouvrit la porte de sa chambre ;Et vierge elle y entra, et puis oncques viergeElle nen sortit.7 Enregistrez votre fichier sous le nom hamlet1_5_1.html, puisexaminez-le dans votre navigateur : laspect du texte eststrictement respect par lagent utilisateur.Figure 5.4 :Aspect dun lment PRE142 LE GUIDE COMPLETMise en forme avanceChapitre 5Llment PRE possde un lment ligne analogue, TT.lments BLOCKQUOTE et QNous venons de placer sur une page Web un extrait de texte clbre : ilest normalement lgalement obligatoire de citer les sources de cetteuvre. Il est frquent de devoir placer sur une page Web des citations.Une citation peut maner dun avis reconnu pour souligner lintrt dunproduit, peut indiquer une source dinformation ou reprsenter des notesde 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 unstyle bien dfini pour apparatre de faon satisfaisante sur tous lesnavigateurs. Tel est le but de llment BLOCKQUOTE, un lment detype bloc, dont lquivalent en type ligne est llment Q. Les agentsutilisateurs visuels restituent en gnral llment BLOCKQUOTE sous laforme dun bloc de texte en retrait. Voici la syntaxe des lmentsBLOCKQUOTE et Q :1 Revenez au fichier prcdent, et modifiez le numro de version :2 Encadrez llment PRE par un lment BLOCKQUOTE :... texte ...3 Enregistrez votre fichier sous le nom hamlet1_5_2.html, puisexaminez-le dans votre navigateur. La diffrence est faible parrapport la figure prcdente, mais le lger retrait attendu est bienprsent (voir Figure 5.5).Lattribut facultatif cite de llment BLOCKQUOTE permet de spcifierlURI du document source (si celui-ci est disponible sur le Web). Mieuxvaut toutefois employer llment CITE pour indiquer la source de lacitation. Cet lment apparat sur une ligne individuelle, le plus souventen italique.4 Revenez votre fichier, puis ajoutez sous llment BLOCKQUOTEllment suivant :Principaux lments structuraux Chapitre 5143LE GUIDE COMPLETHamlet, 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.5 Enregistrez votre fichier sans modifier son nom, puis examinez-ledans votre navigateur. La source de la citation est bien indiquesous la forme attendue.Figure 5.5 :Aspect dun lmentBLOCKQUOTEcombin avec unlment PREFigure 5.6 :Aspect dun lmentBLOCKQUOTEcombin avec unlment PRE144 LE GUIDE COMPLETMise en forme avanceChapitre 5Remarquez que vous pourriez amliorer la mise en forme, par exempleen plaant des sauts de ligne dans la source et/ou en employant lattributalign. Comme vous savez dsormais le faire, nous vous en laissonslinitiative comme exercice complmentaire. Le code complet de cetexemple est prsent dans le listing suivant.Listing 5-1 : Code du fichier Hamlet 1.5.2"Hamlet de Shakespeare"Extrait de Hamlet de ShakespeareCeci est un de mes extraits favoris : un petit air unpeu coquin chant par Ophlia ses parents.Alors, il se leva et mit ses habits,Et ouvrit la porte de sa chambre ;Et vierge elle y entra, et puis oncques viergeElle nen sortit.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, page339.Le rle de lattribut lang, galement facultatif, est plus subtil. Descitations peuvent tre imbriques, ce qui signifie que vous pouvezutiliser llment Q lintrieur dun lment BLOCKQUOTE. Un lmentQ peut dailleurs galement tre plac lintrieur dun autre lment Q.La spcification est toutefois un peu contradictoire en ce qui concerne lecomportement des navigateurs vis--vis du contenu dun lment Q : enprincipe, celui-ci devrait tre restitu avec des marques de citationenglobantes, si bien que les auteurs ne devraient donc pas placer demarque de citation au dbut ni la fin du contenu dun lment Q. Lesmarques de citation employes doivent dpendre de la langue, telle quespcifie par lattribut lang : en effet, le type de marque de citation,Principaux lments structuraux Chapitre 5145LE GUIDE COMPLETextrieure ou intrieure (imbriques), dpend de la langue. Ceci devraittre respect par les agents utilisateurs.Il est recommand que les mises en uvre de feuilles de stylefournissent un moyen dajouter des marques de citation avant et aprsune citation encadre par llment BLOCKQUOTE, dune manireapproprie au contexte de langue courant et au degr dimbrication descitations. Mais certains auteurs employant tort llment BLOCKQUOTEpour obtenir un texte en retrait, les agents utilisateurs ne devraientfinalement pas ajouter de marques de citation en style par dfaut, afin deprserver les intentions de ces auteurs.Tout ceci nest pas trs clair. Mieux vaut considrer un exemple. LesAnglo-Saxons se servent de guillemets comme marques de citationextrieures et dapostrophes comme marques de citation intrieures,tandis que les francophones privilgient des guillemets imbriqus. De cefait, le fragment de code suivant :Listing 5-2 : Citations imbriquesHe shoutedWhat are you doing here?Il scriaQue faites-vous ici ?devrait tre affich comme ceci :"He shouted What are you doing here?"Il scria "Que faites-vous ici ?""Mais comme le montrent les trois copies dcran des figures suivantes,le rendu des navigateurs, mme rcents, manque pour le moins decohrence :Figure 5.7 :Rendu de citations imbriques dans lenavigateur Firefox 2.0.146 LE GUIDE COMPLETMise en forme avanceChapitre 5Mieux vaut donc observer la plus grande prudence en cas dimbricationde citations. La sagesse recommande demployer de prfrence les entitscaractres HTML tudies dans la suite de ce chapitre pour afficherguillemets ou apostrophes, plutt que dimbriquer des lments Q.Par ailleurs, lemploi des lments BLOCKQUOTE et Q uniquement pourobtenir le retrait dun texte est dconseill : prfrez le recours auxfeuilles de style.lment ADDRESSLlment ADDRESS, gnralement plac au dbut ou la fin dundocument, sert fournir des informations de contact applicables audocument ou une partie essentielle de celui-ci. Ses balises douvertureet de fermeture sont toutes deux obligatoires.Un exemple concret semble prfrable une longue explication.1 Ouvrez dans le Bloc-Notes le fichier pageacc1_5_2.html (cest enprincipe actuellement hamlet1_5_2.html qui est ouvert).2 Modifiez nouveau le numro de version :3 Entrez le dernier lment HR et le dernier commentaire, et insrezun lment ADDRESS comme suit :Figure 5.8 :Rendu de citations imbriques dans lenavigateur Internet Explorer (6 et 7).Figure 5.9 :Rendu de citations imbriques dans lenavigateur Amaya.Principaux lments structuraux Chapitre 5147LE GUIDE COMPLETOlivier Rignal etJustin Bogue sont lespersonnes contacter pour tout problme rencontr sur le site.4 Enregistrez votre fichier sous le nom pageacc1_5_4.html, puisexaminez-le dans votre navigateur : la page propose dsormaisdes informations de contact.Remarquez que, dans cet exemple, les valeurs des attributs href sonttoutes inexistantes : il convient de crer les destinations de lienadquates.Modification des marges dun paragrapheIl est parfois souhaitable ou ncessaire de modifier les marges dun blocde texte (lment DIV, P ou PRE). Vous pouvez y parvenir laide delattribut style plac lintrieur de la balise douverture de llmentconcern :Cela cre une marge supplmentaire gauche de 10 points. Remarquezque la syntaxe de lattribut style est la mme que celle de nimportequel attribut HTML : attribut="valeur". Il est applicable laFigure 5.10 :lment ADDRESS148 LE GUIDE COMPLETMise en forme avanceChapitre 5plupart des lments HTML (reportez-vous lAnnexe A), mais estdsormais dconseill au profit des feuilles de style.Taille en pixelsPour calculer avec plus de prcision limportance dune tailleexprime 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 (donc1280 pixels de rsolution horizontale), une valeur de 10 pixels correspond :10 34/1280 = 0,266 centimtres soit 2,7 mmLa chose est plus dlicate pour les mesures exprimes en points : si sur unMac, la rgle est un point = un pixel , sur un PC, le rglage par dfautest un point = 4/3 pixel .Cest la raison pour laquelle certains auteurs crivent que le Mac a unedpi de 72 et le PC une dpi de 96. Tout dpend de la dfinition du dot de dpi (pixel ou point).Puisque nous parlons essentiellement de PC, une valeur de 10 pointscorrespond environ 3,5 mm.5.2. lments de structuration du texteHTML propose un certain nombre dlments de type ligne permettantde caractriser prcisment une partie de texte. Ces lments sontprsents dans le tableau de la page 155.Gardez bien prsent lesprit que le but de ces lments est avant toutde contribuer la structure du texte, non dobtenir une prsentationparticulire.lments EM et STRONGLes lments EM (EMphasis, emphase) et STRONG (fort) sutilisent pourmettre en exergue une portion du texte qui possde, par exemple, unesignification particulire dans un contexte donn.La prsentation des lments de phrase dpend de lagent utilisateur. Engnral, les agents utilisateurs visuels prsentent le texte de llment EMlments de structuration du texte Chapitre 5149LE GUIDE COMPLETen italique et celui de llment STRONG en gras. Les agents utilisateursvocaux, eux, devraient changer les paramtres de la synthse vocale telsque le volume, la hauteur ou le timbre.1 Revenez au le fichier pageacc1_5_4.html, en principe celuiactuellement ouvert dans le Bloc-Notes.2 Modifiez nouveau le numro de version :3 Modifiez comme suit le titre de niveau 2 :Bienvenue sur mon site.4 Modifiez comme suit le contenu du premier lment P :Vous trouverez sur ce site des informations :5 Enregistrez votre fichier sous le nom pageacc1_5_5.html, puisexaminez-le dans votre navigateur : le mot mon apparat enitalique, le mot informations en gras.Vous avez pu rencontrer dautres lments qui permettent de placer unepartie de texte en italique (lment I) ou en gras (lment B). Ceslments, sur lesquels nous reviendrons, modifient laspect de la police,mais ne possdent aucun rle structurel. Autrement dit, un mot plac engras ou en italique par G ou I attire visuellement lattention, ce qui luiconfre une importance particulire, alors quinversement EM et STRONGFigure 5.11 :lments EM et STRONG150 LE GUIDE COMPLETMise en forme avanceChapitre 5attribuent structurellement une importance particulire ce mot, qui setrouve 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 duressort exclusif des feuilles de style.lments ABBR et ACRONYMLes lments ABBR et ACRONYM permettent aux auteurs dindiquerclairement les occurrences des abrviations et des acronymes. Leslangues occidentales raffolent en effet des sigles comme RATP, ONU oubit, ainsi que des abrviations comme Mme, SA ou etc. Le chinois et lejaponais emploient tous deux des mcanismes dabrviation analogues,selon lesquels un nom long est dsign par la suite par un sous-ensembledes caractres Han qui le constituent. Le balisage de ces structuresfournit une aide prcieuse aux agents utilisateurs et aux outils tels queles vrificateurs dorthographe, les synthtiseurs de parole, les systmesde traduction automatique et les moteurs de recherche.Le contenu des lments ABBR et ACRONYM spcifie lexpression abrgetelle quelle apparatrait normalement dans le cours du texte. Lattributtitle de ces lments peut servir procurer la forme complte oudveloppe de lexpression.Voici quelques exemples dutilisation des lments ACRONYM et ABBR :Listing 5-3 : lments ABBR et ACRONYMWWWRATPDoaabbr.Voici laspect de ce fragment de code dans un navigateur. Remarquez cequi se passe lorsque le pointeur est plac sur un lment (voirFigure 5.12).Abrviations et acronymes possdent souvent une prononciationidiosyncrasique. Par exemple, si CEE et FAI se prononcent typiquementlments de structuration du texte Chapitre 5151LE GUIDE COMPLETlettre lettre, Ram et Medef se prononcent phontiquement. En outre,certains termes (comme URI) sont pels par les uns et prononcscomme des mots par les autres. En cas de ncessit, les auteurs devrontutiliser les feuilles de style pour spcifier la prononciation dune formeabrge.lments CODE, SMP et KBDInternet possde, de par ses origines militaires et universitaires, unelourde orientation scientifique et technologique. Il tait donc logique queHTML propose un lment structurel spcifique laffichage de code,llment CODE.Au sens le plus large, le terme code dcrit les lments et la syntaxepermettant une machine de lire un programme ou un fichier. Enrdigeant de lHTML, vous crivez du code, mme si celui-ci diffrelargement de celui dun programme crit dans un autre langage, commeC ou PHP. Tout code doit respecter scrupuleusement une syntaxespcifique au langage concern. Traditionnellement (et comme cest lecas dans cet ouvrage) du code est le plus souvent affich sous forme detexte avec une police non proportionnelle. Cest une mthodeuniverselle qui signale quil sagit de quelque chose destine lamachine. Lorsquil est lu par un agent utilisateur visuel, comme unnavigateur, le texte figurant dans llment CODE devrait galement treaffich laide dune police non proportionnelle. Certains navigateurstant rgls afin dafficher le contenu de llment CODE dune faonparticulire, mieux vaut le rserver aux exemples de code que voussouhaitez prsenter sur le Web.Figure 5.12 :lments ABBR et ACRONYM152 LE GUIDE COMPLETMise en forme avanceChapitre 5Voici un exemple de code, tir de lexcellent ouvrage La Bible C++ de C.Horstmann et T. Budd (Ed. Micro Application, 2004, ISBN 2-7429-3717-x).Listing 5-4 : Exemple de llment CODEFichier temps1.cpp1 #include 2 3 using namespace std; 4 5 #include "ccc_time.h"6 7 int main()8 {9 Time reveil(7, 0, 0, 0); 10 reveil.add_seconds(1000); /* mille secondes plus tard */11 cout 5 Supprimez tout le contenu de llment BODY.6 Entrez dans llment BODY un nouveau titre de niveau 1 :Carte de France avecrgions7 Placez-vous en dessous et crez comme suit un lment IMGinclus dans un lment P :Remarquez lajout dans la balise de llment IMG dun nouvel attribut,usemap. Celui-ci signale que limage spcifie par lURI valeur delattribut src va tre une image cliquable ct client, dfinie par unlment MAP. La valeur de lattribut usemap de llment IMG doitcorrespondre avec celle de lattribut name de llment MAP associ.8 Ajoutez ensuite dans llment P, aprs llment IMG, unlment MAP associ pour le moment vide :La valeur de lattribut name de llment MAP correspond bien celle delattribut usemap de llment IMG.9 Par scurit, enregistrez votre fichier sous le nom FranceReg.html.Le second type dlment capital pour une image cliquable est llmentAREA. Cet lment possde deux attributs : lattribut shape, qui spcifiela forme dune rgion, et lattribut coords, qui spcifie la position et laforme de la rgion lcran.212 LE GUIDE COMPLETCouleurs et imagesChapitre 610 Ajoutez ce qui suit dans llment MAP :11 Enregistrez nouveau votre fichier, puis examinez-le dans votrenavigateur.Remarquez que, lorsque vous dplacez le pointeur sur une des zonesdfinies, celui-ci se transforme en main, indiquant la prsence dun lien.En outre, si vous le laissez un peu plus longtemps sur la zone, la valeurde lattribut title saffiche.Si vous cliquez sur une des zones, vous obtenez un message derreur :les pages secondaires spcifies par les valeurs des attributshref nexistent pas !Figure 6.41 :Aspect de limage cliquableImage cliquable Chapitre 6213LE GUIDE COMPLETLattribut shape accepte quatre valeurs possibles, dont trois sontemployes dans lexemple prcdent :j default spcifie la rgion entire.j rect dfinit une rgion rectangulaire.j circle dfinit une rgion circulaire.j poly dfinit une rgion polygonale.Le nombre et lordre des valeurs de lattribut coords dpendent de lavaleur de lattribut shape, comme le montre le tableau suivant. Il sagitdune liste de valeurs longueur, spares par une virgule.Tableau 6.2 : Valeurs des attributs shape et coords dun lment AREAValeur delattributshapeFormes Coordonnes (coords) ncessairesdefault Toute limage NantRect Rectangle En haut gauche (coordonnes x et y),en bas droite (coordonnes x et y)circle Cercle Centre (coordonnes x et y), rayonpolygon Polygone Chaque sommet (coordonnes x et y). ledernier couple de coordonnes devraittre identique au premier pour "fermer"le polygone.Je suppose que vous restez dubitatif quant aux coordonnes delexemple prcdent Comment est-il possible de les dterminersimplement ? Deux solutions soffrent vous.Cration manuelle dune image cliquableLa premire mthode est la suivante :1 Ouvrez votre programme de dessin habituel et chargez limageconcerne (ici, franregs.gif).2 Placez votre curseur lemplacement approximatif du coinsuprieur dun rectangle, lemplacement de la rgion Poitou-Charentes. Pratiquement tous les programmes de dessin affichentquelque part les coordonnes actuelles du curseur.214 LE GUIDE COMPLETCouleurs et imagesChapitre 623 Notez ces coordonnes, puis placez-vous sur le coin infrieurdroit du rectangle pour la rgion Poitou-Charentes et notez nouveau les coordonnes. Vous disposez des quatre paramtresncessaires pour la dfinition dune forme de type rectangle, quevous navez plus qu reporter dans le code :Remarquez que vous nobtiendrez pas forcment tout fait lesmmes coordonnes : quelques pixels de diffrence ne sont pas unproblme, lindication visuelle procure lutilisateur tantessentiellement la modification de la forme du curseur (indiquantun lien) ainsi quventuellement lapparition de linfobulle dfiniepar lattribut title.4 Pour le cercle, placez-vous dans la rgion le-de-France aucentre du cercle, et notez ses coordonnes. Dplacez-vousFigure 6.42 : Les coordonnes de la position actuelle du curseur (iciencadres dun ovale) dans le logiciel de dessin Microsoft PaintImage cliquable Chapitre 6215LE GUIDE COMPLEThorizontalement ou verticalement pour dfinir le rayon souhait etnotez la diffrence entre coordonnes : cest le rayon. Vousdisposez des trois paramtres ncessaires pour la dfinition duneforme de type cercle, que vous navez plus qu reporter dans lecode :5 La dmarche est un peu plus laborieuse pour un polygone :placez-vous sur un des angles de la rgion Centre et notez sescoordonnes. Dplacez-vous successivement sur les autressommets du polygone souhait et notez leurs coordonnes.Lorsque vous en avez termin, reportez toutes ces coordonnesdans votre code. Ce pourrait tre comme suit :Remarquez que le dernier sommet doit tre identique au premier. Sitoutefois vous ne le spcifiez pas, les agents utilisateurs devraient tre enmesure de le gnrer deux-mmes.Le rayonQuand la valeur du rayon est un pourcentage, lagent utilisateurdevrait calculer le rayon final par rapport la hauteur et la largeur delobjet associ. Le rayon devrait tre la plus petite valeur des deux.Cration dune image cliquable laide dunditeurLa deuxime mthode consiste recourir un logiciel de crationdimages cliquables. Il en existe un certain nombre, mais nous vousrecommandons lincomparable logiciel de dessin dOpen Source gratuit,The Gimp, qui dispose dun tel utilitaire intgr.1 Si vous nen disposez pas dj, tlchargez The Gimp depuishttp://gimp-win.sourceforge.net/ et installez-le sur votre ordinateur.Cest ici la page Windows, mais il existe des versions Linux (la216 LE GUIDE COMPLETCouleurs et imagesChapitre 6version originelle) et Mac. Vous aurez galement besoin delenvironnement dexcution GTK +2 : noubliez pas de letlcharger 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 unrectangle sur la rgion Poitou-Charentes .5 Renseignez les lments ncessaires dans la fentre Paramtresde la zone qui souvre, puis cliquez sur OK.Figure 6.43 :Cration duneimage cliquable laide de TheGimpFigure 6.44 : Utilisez le rectangleImage cliquable Chapitre 6217LE GUIDE COMPLET6 Choisissez Cercle dans le menu de gauche, puis dessinez uncercle dans la rgion le-de-France (attention : The Gimp trace uncercle en spcifiant le centre, puis en dfinissant 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 unpolygone dans la rgion Centre. Renseignez les lmentsncessaires dans la fentre qui souvre, puis cliquez sur OK. Lafentre de The Gimp devrait afficher quelque chose de similaire la figure suivante.Figure 6.45 :Fentre Paramtres de lazoneFigure 6.46 : Image cliquable cre laide de The Gimp218 LE GUIDE COMPLETCouleurs et imagesChapitre 6Remarquez comme il est facile de dfinir une rgion polygonale laidedun tel outil !8 Choissez dans le menu Afficher > Source. Vous voyez le codesource de limage ainsi cre safficher. Vous pouvez copier-collerce code (prsent en intgralit dans le listing suivant) dans votrefichier, pour y ajouter dautres attributs, comme lattribut title.Listing 6-1 : Code source de limage cliquable cre par The GimpEn examinant ce code et en le comparant celui cr manuellement laide de Paint, vous voyez que les coordonnes diffrent lgrement.Figure 6.47 :Affichage du codesource de limagecliquable cre parThe GimpImage cliquable Chapitre 6219LE GUIDE COMPLETComme nous lavons dj soulign, cela ne prsente pas la moindreimportance. Remarquez galement que le polygone est beaucoup pluscomplexe : nous avons suivi presque exactement les frontires de largion Centre. Par ailleurs, The Gimp a ajout quelques commentaires,quil est de bon ton de conserver, tandis que son balisage respecte laspcification XHTML (balises et ).Recouvrement de zonesSi deux rgions dfinies ou plus se chevauchent, le premier lment quidfinit une rgion dans le document est prioritaire. Il est ainsi possiblede spcifier des ancres pour crer des zones inactives dans une imagecliquable. Dans lexemple ci-dessous, la premire ancre spcifie unepetite rgion circulaire dpourvue de lien, tandis que la seconde spcifieune rgion circulaire de taille suprieure de mme centre que laprcdente. La combinaison des deux cre un anneau cliquable dont lecentre est inactif et le bord actif. Lordre des dfinitions des ancres estcapital : le petit cercle doit tre prioritaire par rapport au grand cercle.En conclusion, llment MAP peut tre associ plusieurs lmentsoutre IMG : OBJECT et INPUT. Il est associ un lment via lattributusemap de celui-ci. Il peut semployer sans image associe pour desmcanismes de navigation gnraux.Le recours aux lments AREA nest toutefois pas la seule possibilitdemploi de llment MAP. Le modle de contenu de celui-ci permet eneffet dy placer :j Un ou plusieurs lments AREA. Ces lments, dpourvus decontenu, spcifient les rgions gomtriques de limage cliquableet les liens qui sont associs chaque rgion. Les agentsutilisateurs ne restituent pas gnral les lments AREA : mieuxvaut fournir un texte de remplacement pour chaque lment AREA laide de lattribut alt.j Un contenu de type bloc compos entre autres dlments Aspcifiant les rgions gomtriques de limage cliquable et le lienassoci chaque rgion. Les agents utilisateurs devraient restituerle contenu de type bloc dun lment MAP : cette mthode sert crer des documents plus accessibles.j Un contenu mixte dlments AREA et dlments A. En ce cas, lesagents utilisateurs doivent ignorer les lments AREA.Figure 6.48 : Exemple de site destin des enfants et recourant uneimage cliquable pour la navigationImage cliquable Chapitre 6221LE GUIDE COMPLETEn mlangeant les contenus, les agents utilisateurs anciens prendront encharge les cartographies spcifies par les lments AREA, tandis que lesagents utilisateurs rcents tireront profit des contenus de type bloc plustoffs.Pensez toujours offrir des alternatives textuelles aux imagescliquables, au cas o les graphismes ne seraient pas disponibles ou lesutilisateurs ne pourraient y accder. Les agents utilisateurs peuventemployer le texte de lattribut alt pour crer des liens textuels laplace des images cliquables graphiques. De tels liens peuvent treactivs de diverses faons (clavier, commande vocale, etc.).Sachez enfin que llment MAP ne prsente pas de compatibilitdescendante avec les agents utilisateurs HTML 2.0 : il sera ignor par detels agents utilisateurs.Images cliquables ct serveurPlutt quune image ct client, il est possible de crer une imagecliquable ct serveur. Les images cliquables ct serveur peuvent servler intressantes lorsque limage cliquable savre trop complique raliser ct client, mais font peser un poids supplmentaire sur leserveur, ce qui peut tre diversement apprci.Lorsquune image cliquable ct serveur est dfinie pour un lmentIMG, celui-ci doit se trouver dans un lment A et possder lattributboolen ismap.La diffrence fondamentale avec une image cliquable ct client est quela dfinition des rgions (effectue dans le cas prcdent avec llmentMAP) est ici effectue par un script en ASCII situ sur le serveur. Lecontenu du fichier de script test.map cit dans lexemple ci-dessuspourrait tre quelque chose comme ceci :default ../index.html 0, 0, 100, 460rect ../index.html 0, 1, 100, 65rect ../service1.html 0, 72, 100, 142rect ../service2.html 0, 146, 100, 213rect ../formation.html 0, 219, 100, 283rect ../profils.html 0, 288, 100, 351rect ../references.html 0, 355, 100, 403rect ../contact.html 0, 407, 100, 453222 LE GUIDE COMPLETCouleurs et imagesChapitre 6Les images cliquables ct serveur ont t dveloppes lorigine pardeux organismes, le NCSA et le CERN. Malgr des efforts certains destandardisation, il subsiste quelques petites diffrences entre eux, ainsiquau sein de leurs mises en uvre. Vous devez vrifier le standardemploy par le serveur Web avant de crer un script dimage cliquablect serveur. Lexemple prcdent est au format NCSA, mais voici lamme chose au format CERN :rect (0,1) (100,65) ../index.htmlrect (0,72) (100,142) ../service1.htmlrect (0,146) (100,213) ../service2.htmlrect (0,219) (100,283) ../formation.htmlrect (0,288) (100,351) ../profilse.htmlrect (0,355) (100,403) ../references.htmlrect (0,407) (100,453) ../contact.htmldefault ../index.htmlLorsque lutilisateur active un lien en cliquant sur limage, lescordonnes de ce clic lcran sont directement transmises au serveurqui hberge le script. Les coordonnes lcran sont exprimes par desvaleurs en pixels dcran relatives limage.Pour transmettre au serveur le point cliqu, lagent utilisateur drive unnouvel URI partir de lURI spcifi par lattribut href de llment A,en lui rajoutant la fin le caractre ? suivi des coordonnes x et y , spares par une virgule. Le lien est alors suivi en utilisant lenouvel URI. Par exemple, dans lexemple donn, si lutilisateur cliqueau 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 descoordonnes spcifiques (par exemple, un agent utilisateur nongraphique qui sappuie sur une saisie au clavier, un agent utilisateurvocal, etc.), doivent envoyer les coordonnes 0,0 au serveur lorsde lactivation du lien.En conclusion, mieux vaut ne pas crer dimages cliquables ctserveur : celles-ci sont compltement inaccessibles aux utilisateurs dedivers agents utilisateurs comme les navigateurs texte seul et lesmoteurs de recherche comme Google. Si vous devez absolumentemployer des images cliquables ct serveur, ajoutez une barre denavigation en texte seul en dessous. Celle-ci doit inclure de vrais lienstexte vers chacune des pages auxquelles vous pourriez accder encliquant sur limage cliquable.Image cliquable Chapitre 6223LE GUIDE COMPLETUne image cliquable ct serveur ne peut tre dfinie que pour deslments IMG et INPUT, ce dernier devant alors tre de type image .Pour terminer, si llment IMG (dont les attributs sont rsums dans letableau suivant) reste prsent en HTML 4.01, il y est toutefoisdconseill en raison de ses limites : en effet, il ne rpond pas auproblme plus gnral de linclusion des types de mdias nouveaux ou venir et entranent des problmes daccessibilit. Il convient dsormaisde lui prfrer llment OBJECT.Tableau 6.3 : Attributs de llment IMGAttribut Valeur(s) Effetsrc URI Fournit lemplacement de limage. Cetattribut est obligatoire.align center, left,rightPlace limage respectivement aucentre, droite ou gauche. Peutautoriser le droulement du texteautour du graphisme.border Nombre Taille du cadre de limage, exprimeen pixels (0 pour pas de cadre).alt Texte de description Procure une alternative textuelle augraphisme.usemap Valeur de lattributname dun lmentMAP associSignale que cette image est uneimage cliquable ct client, dfinie parllment MAP associ.ismap Nant Signale que cette image est uneimage cliquable ct serveur.6.5. Inclusion gnrique dimages :lment OBJECTPour inclure des images, les auteurs devraient dsormais privilgierllment OBJECT. Il sagit dun lment de type ligne, devantobligatoirement possder une balise douverture et une balise defermeture, contrairement IMG qui ne possdait pas de balise defermeture.En effet, la plupart des agents utilisateurs possdent des mcanismesintgrs pour la restitution des types de donnes communs, tels que le224 LE GUIDE COMPLETCouleurs et imagesChapitre 6texte, les images GIF, les couleurs, les polices et une poigne dlmentsgraphiques. Pour restituer les types de donnes quils ne reconnaissentpas nativement, les agents utilisateurs lancent en gnral desapplications externes. Llment OBJECT permet aux auteurs de mieuxcontrler si les donnes doivent tre restitues de manire externe ou parun certain programme, spcifi par lauteur, qui restitue ces donnes ausein de lagent utilisateur.Voici comment employer llment OBJECT pour inclure une image.1 Ouvrez le Bloc-Notes, puis ouvrez le fichier region1_6_1.html.2 Modifiez dabord la version du document :3 Remplacez llment IMG par ce qui suit :4 Enregistrez votre fichier sous le nom region1_6_2.html, puisexaminez-le dans votre navigateur.Visuellement, le recours llment OBJECT plutt qu llment IMGne produit aucune diffrence (reportez-vous la figure de la page 242pour comparer). Revenez au code pour lexaminer nouveau. Le nouvellment possde deux nouveaux attributs :Figure 6.49 : Inclusion dimage laide de llment OBJECTInclusion gnrique dimages : lment OBJECT Chapitre 6225LE GUIDE COMPLETj Lattribut data de llment OBJECT remplace llment src dellment IMG : cest un URI, pouvant tre interprt relativement la valeur de lattribut optionnel codebase et qui lest par dfautrelativement lURI de base du document.j Lattribut type spcifie le type des donnes spcifies par lURIde lattribut data. Cet attribut facultatif est toutefoisrecommand : il vite le chargement par lagent utilisateurdinformations dont il ne peut reconnatre le type de contenu. Si lavaleur de cet attribut diffre de len-tte HTTP Content-Typerenvoy par le serveur quand lobjet est renvoy, cest len-tteHTTP Content-Type qui a priorit.Remarquez galement que nous avons supprim lattribut alt et savaleur. En effet, une des caractristiques les plus intressantes dellment OBJECT est quil fonctionne un peu comme la classiqueinstruction sisinon (if else). Autrement dit, il peut possder uncontenu interprt uniquement sil est impossible dinterprter lecontenu de sa balise douverture. Pour disposer dun texte alternatifaffich au cas o lagent utilisateur ne peut interprter limage, procdezcomme suit :5 Modifiez llment OBJECT en insrant le texte ci-dessous justeavant la balise de fermeture :Coucher de soleil sur le lac de Linciel6 Enregistrez nouveau votre fichier, sous le mme nom.En lexaminant dans votre navigateur, vous ne constaterez aucunediffrence. Cette syntaxe semble ntre quune nuance, mais elle prendtoutefois tout son sens lorsque vous savez quil est possible dimbriquerdes lments OBJECT, ainsi que demployer ceux-ci pour spcifier biendautres types de contenus, dont des scripts. Prenons un exemple.1 Ouvrez le fichier FranceReg2.html.2 Modifiez dabord la version du document :226 LE GUIDE COMPLETCouleurs et imagesChapitre 63 Modifiez comme suit le contenu de la premire cellule du tableau.Attention, veillez bien refermer les lments OBJECT que vousallez ajouter la fin du fragment du code :Coucher de soleil sur le lac de Linciel4 Enregistrez votre fichier sous le nom region1_6_3.html, puisexaminez-le dans votre navigateur.Le navigateur tant pour le moment incapable dinterprter un scriptPython ou une animation MNG (souvenez-vous : cest le formatdanimation driv de PNG), il affiche la premire possibilit reconnue,ici limage JPEG. Remarquez que Firefox signale par une barre demessage que cette page ncessite des modules complmentaires (plug-Figure 6.50 : Possibilits alternatives laide de llment OBJECTInclusion gnrique dimages : lment OBJECT Chapitre 6227LE GUIDE COMPLETins) et propose dessayer de les installer. Nous reviendrons dans leChapitre 10, consacr aux scripts, sur lemploi de llment OBJECTavec les scripts.Vous voyez ici une partie de la souplesse fantastique offerte par cetlment. Le reste ne dpend que de votre imagination.Bien videmment, cet lment permet galement linsertion dimagescliquables, ct client ou ct serveur. Commenons par une imagecliquable ct client.1 Revenez au fichier region1_6_2.html.2 Modifiez dabord la version du document :3 Modifiez le code comme suit. Attention, noubliez pas de refermerllment OBJECT aprs la fermeture de llment MAP !Quelques prcisions :Rgion Poitou-CharentesRgion Ile de FranceRgion CentreRemarquez que llment MAP est dissimul dans le contenu dellment OBJECT. Nous ne voulons pas restituer le contenu dellment MAP lorsque llment OBJECT est restitu. Il ne le sera que sillment OBJECT ne peut ltre.4 Enregistrez votre fichier sous le nom FranceReg3.html, puisexaminez-le dans votre navigateur (voir Figure 6.51).228 LE GUIDE COMPLETCouleurs et imagesChapitre 6Cette figure ne diffre en apparence en rien de la version IMG (reportez-vous la figure de la page 242). Nous allons simuler un agent utilisateurincapable dinterprter limage, en modifiant le nom et le type delimage :5 Modifiez comme suit llment OBJECT :6 Enregistrez votre fichier sous le nom FranceReg3err.html, puisexaminez-le dans votre navigateur.Figure 6.51 :Image cliquable laide de llmentOBJECTFigure 6.52 :Alternativepropose grce un lmentOBJECTInclusion gnrique dimages : lment OBJECT Chapitre 6229LE GUIDE COMPLETLimage ne pouvant tre affiche, vous voyez la place un menutextuel.Vous pourriez souhaiter que limage cliquable soit restitue mme silagent utilisateur est incapable de restituer llment OBJECT. Parexemple, en associant une image cliquable un lment OBJECT et enplaant 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...Carte de France avec rgions... reste du corpsQuelques prcisions :Rgion Poitou-CharentesRgion Ile de FranceRgion CentreLa figure suivante montre laspect de cette page dans un navigateur (voirFigure 6.53).Comme avec llment IMG, vous pouvez crer une image cliquable enemployant des lments AREA.1 Ouvrez le fichier FranceReg.html.2 Modifiez dabord la version du document :230 LE GUIDE COMPLETCouleurs et imagesChapitre 63 Remplacez llment IMG par un lment OBJECT, comme suit : Carte des France avec rgions4 Enregistrez votre fichier sous le nom FranceReg4.html, puisexaminez-le dans votre navigateur (voir Figure 6.54).Une fois encore, cette figure ne diffre apparemment en rien de laversion IMG (reportez-vous la figure de la page image06_34 ).La prsence de lattribut usemap sur un lment OBJECT implique quelobjet inclus soit une image cliquable ct client associe. En ce cas,lagent utilisateur peut produire une interaction utilisateur avec cetlment OBJECT, uniquement en fonction de limage cliquable ctclient. Ceci permet certains agents utilisateurs comme les navigateursvocaux ou les robots dinteragir avec llment OBJECT sans devoir letraiter. Lagent utilisateur peut mme choisir de ne pas ramener (outraiter) lobjet. Lorsquun lment OBJECT possde une image cliquableassocie, vous ne devez pas supposer que lobjet sera trait par tous lesagents utilisateurs.Figure 6.53 :Affichage simultan de limagecliquable et de liens textuelsInclusion gnrique dimages : lment OBJECT Chapitre 6231LE GUIDE COMPLETLlment OBJECT peut aussi apparatre comme contenu de llmentHEAD. Les agents utilisateurs ne restituant gnralement pas les lmentsplacs dans la section HEAD, veillez ce quaucun lment OBJECT situdans la section HEAD ne spcifie un contenu qui peut tre restitu.Le Chapitre 7, traitant des jeux dencadrement, propose un exempledinclusion dlment OBJECT dans llment HEAD. De mme, leChapitre 9, traitant des formulaires, procure quelques prcisions surlemploi dlments OBJECT dans les formulaires.Tableau 6.4 : Principaux attributs de llment OBJECT relatifs aux imagesAttribut Valeur(s) Effetdata Uri Spcifie la localisation des donnes de lobjet,par exemple les donnes dimages pour lesobjets dfinissant des images ou, plusgnralement, la forme srialise dun objetqui peut tre utilise pour recrer cet objet.type type-de-contenu Facultatif. Spcifie le type de contenu desdonnes spcifies par lattribut data.usemap Nant Signale que lobjet associ est une imagecliquable.Figure 6.54 :Image cliquable laide de llmentOBJECT etdlments AREA232 LE GUIDE COMPLETCouleurs et imagesChapitre 6Tableau 6.5 : Attributs de llment OBJECTAttribut Valeur(s) Effetclassid Uri Spcifier la localisation de limplmentationdun objet via un URI. Peut tre employ encombinaison ou en remplacement delattribut data, selon le type de lobjetimpliqu.codebase Uri Spcifie le chemin de base qui sert larsolution des URI relatifs spcifis par lesattributs classid, data et archive.Quand il est absent, sa valeur par dfautcorrespond lURI de base du documentcourant.codetype type-de-contenu Spcifie le type de contenu des donnesattendues lors du chargement de lobjetspcifi par lattribut classid. Cet attributest optionnel, mais recommand lorsquelattribut classid est spcifi. Il permet eneffet lagent utilisateur dviter lechargement des informations dont lestypes ne sont pas reconnus. Quand il estabsent, sa valeur par dfaut est celle delattribut type.data Uri Spcifie la localisation des donnes delobjet, par exemple les donnes dimagespour les objets dfinissant des images, ouplus gnralement, la forme srialise dunobjet qui peut tre utilise pour recrer cetobjet.type type-de-contenu Facultatif. Spcifie le type de contenu desdonnes spcifies par lattribut data.archive liste-uri Spcifie une liste dURI, spars par desespaces, des archives contenant lesressources concernant lobjet. Cette listepeut inclure les ressources spcifies parles attributs classid et data. Leprchargement des archives diminuegnralement le temps de chargement desobjets. Les archives spcifies comme URIrelatifs devraient tre interprtesrelativement lattribut codebase.declare Quand il est prsent, la dfinition dellment OBJECT courant nest quunedclaration. Lobjet doit tre instanci parla suite via une dfinition OBJECT qui serfre cette dclaration.Inclusion gnrique dimages : lment OBJECT Chapitre 6233LE GUIDE COMPLETTableau 6.5 : Attributs de llment OBJECTAttribut Valeur(s) Effetstandby texte Spcifie le message que lagent utilisateurpeut restituer pendant le chargement delimplmentation et des donnes de lobjet.Diminution du temps de tlchargementComme cela a dj t soulign, le temps de chargement dune page estproportionnel au nombre et la taille des graphismes employs sur cettepage. Lemploi des illustrations doit donc tre judicieusement mesur.Heureusement, plusieurs mthodes permettent damliorer le temps dechargement dune page, mme si elle contient des illustrations.Rduction de la taille physique des imagesLa premire mthode consiste employer des images de plus faibletaille, ajustes la rsolution envisage pour la page Web. Une erreurfrquente consiste employer des fichiers image tels quels et modifier la taille daffichage lcran. Cette erreur devient de plus enplus frquente avec le dveloppement de la photo numrique, dont lepouvoir de rsolution augmente danne en anne, mais elle se rencontreaussi lors de lemploi de documents numriss laide dun scanner.Il y a parfois de quoi se perdre dans la jungle des units de mesureemployes par les dispositifs dacquisition dimages (scanneurs,appareils photo et camras numriques) et de restitution (imprimantes,tables traantes, flasheuses).Le terme le plus employ est celui de dpi (dots per inch) : cest lenombre de points sur un pouce, soit 2,54 cm. Ce terme est employ pourles scanneurs et les imprimantes. De nos jours, une rsolutiondimpression de 600 dpi est un minimum, une rsolution de 2 400 dpinoffrant plus rien dexceptionnel. Sachez cependant que les limites sontproches : les professionels de limprimerie ne dpassent que rarement3 600 dpi pour des reproductions dart, en employant des papiersspciaux fort onreux. Une rsolution suprieure napporte rien et peutmme dgrader le rendu final.234 LE GUIDE COMPLETCouleurs et imagesChapitre 6Les imprimantes noir et blanc (comme les imprimantes laser ordinaires ) fonctionnent en tons de gris : chaque pixel de limage dedpart est traduit en carr de 16 pixels (4 4) afin de pouvoir afficher desteintes diffrentes. La rsolution est donc en fait divise par 4 par rapport un dessin au trait (bien quelle puisse tre augmente de faon logiciellepar 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 ennombre total de pixels (4, 5 ou 6 millions pour les modles les plusperfectionns), tandis que les crans mlangent la notion de diagonale delcran (15, 17 ou 19 pouces) et de rsolution (800 600, 1024 768,1280 960 ou 1280 1024, etc.). Pas facile de comparer, surtout entenant compte du fait que, pour un moniteur cathodique, lcran affichest 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 prsenteun rapport largeur/hauteur de 3/2 (en mode paysage, cest--dire horizon-talement. Cest linverse en mode portrait). Autrement dit, vous avez :rsolution = 3 l x 2 lDol = (rsolution/6)Avec une rsolution de 4 millions de pixels, vous obtenez :l = (4 000 000/6) = (2 666 666) = 816,5 pixelsUne photo obtenue avec un appareil photo dune rsolution de 4 millionsde pixels possde donc une largeur denviron 2 449 pixels et une hauteurde 1 633 pixels. Autrement dit, imprime avec une imprimante atteignantune rsolution de 1 200 points par pouce, pour conserver cette rsolution,la photo obtenue mesurerait environ 2 pouces par 1,4 pouces, soit 5 cmpar 3,5 cm Pas trs grand !En revanche, si vous imprimez avec une rsolution de 350 dpi (parexemple), la photo atteindra 17,7 12 cm : cest plus raisonnable.Comprenez bien toutefois que si, partant de cette photo de 4 millions depixels place dans un logiciel et ayant dfini une taille dimpression de17,7 12 cm, mme en slectionnant une rsolution dimpression de1 200 dpi, la vraie rsolution de la photo imprime (pas celle delimpression elle-mme) ne sera que de 350 dpi ! Les pointssupplmentaires ont t obtenus par extrapolationInclusion gnrique dimages : lment OBJECT Chapitre 6235LE GUIDE COMPLETMieux vaut donc convertir cette rsolution thorique en nombre depoints : si vous considrez une photo normale de format 24 18 cm, soit9,6 7,2 pouces, avec une rsolution de 1 200 points par pouce vousavez imprim (9,6 1 200) (7,2 1 200) = 99 532 800 points : plus de99,5 millions de points ! Nous sommes loin des 4 millions de pixels dela photo obtenue avec lappareil photo numriqueLe problme est toutefois totalement diffrent si vous affichez votrephoto numrique lcran : avec la rsolution actuelle la plus frquentede 1 024 768, une telle photo occuperait une superficie quivalente presque 5 crans (presque 2,4 crans en largeur et un peu plus de 2 enhauteur). Elle est donc totalement inexploitable en ltat sur une pageWeb.Tableau 6.6 : Rsolution et part de march des crans mondiaux en 2006(source : OneStatjuin2006)Rsolution Nombre totalde pointsRsolution en dpi(selon la taille delcran, de 15 19)Part demarch 20061 024 768 786 432 73 81 dpi 56,1 %1 280 1 0241 310 720 91 108 dpi 15,8 %800 600 480 000 57 62 dpi 12,0 %1 152 864 949 248 82 91 dpi 54,0 %Le problme est similaire lorsque vous voulez placer sur votre site uneimage provenant dun scanneur plat. Si la numrisation est effectuedans le but dune impression, vous devez choisir une rsolution dentregale au produit de la rsolution de sortie par le rapport de taillesouhait par rapport loriginal. Par exemple, avec une imprimantergle 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 75dpi est largement suffisante, voire exagre, puisquil est exceptionnelquune image occupe tout lcran : tout dpend encore une fois durapport de taille entre loriginal et ce que vous souhaitez obtenir lcran.236 LE GUIDE COMPLETCouleurs et imagesChapitre 6Nous nirons pas plus loin dans ltude des scanneurs et autrespriphriques dacquisition ou de restitution dimages, ce thme sortantdu champ de cet ouvrage.En reprenant toutefois notre exemple dimage numrique, celle-ci codeen vraies couleurs (32 bits par pixel) devrait occuper 32 4 millions =128 millions de bits, soit, converti en octets, environ 16 MoHeureusement, les principaux formats de fichiers graphiques oprentune compression des donnes aboutissant une rduction de la taille desfichiers.Rduction de la taille des fichiersVous savez toutefois probablement que les fichiers graphiques peuventtre trouvs sous diffrentes formes, reconnaissables lextension dunom de fichier : JPG, GIF, PNG, TIF, BMP, etc., et que ces formatsralisent une compression logicielle des donnes plus ou moins efficace. titre dexemple, le tableau suivant prsente une comparaison de lataille des fichiers de limage exemple de Coucher de soleil employedans notre page Rgion, qui mesure 800 600 pixels, selon le format defichier employ.Tableau 6.7 : Comparaison de quelques formats de fichiers graphiquesType Nbrebit/pixelCouleurs Taille enmmoireTaille relle dufichierJPG 24 16millions1 406 Ko 70 KoPNG 24 16millions1 406 Ko 532 KoTIF 24 16millions1 406 Ko 1 254 KoBMP 24 16millions1 406 Ko 1 407 KoTIF 16 64 000 703 Ko 551 KoPNG 16 64 000 703 Ko 378 KoTIF 8 256 469 Ko 194 KoPNG 8 256 469 Ko 163 KoInclusion gnrique dimages : lment OBJECT Chapitre 6237LE GUIDE COMPLETTableau 6.7 : Comparaison de quelques formats de fichiers graphiquesType Nbrebit/pixelCouleurs Taille enmmoireTaille relle dufichierGIF 8 256 469 Ko 251 KoTIF 4 16 234 Ko 59 KoPNG 4 16 234 Ko 49 KoGIF 4 16 234 Ko 49 KoRemarquez tout dabord que la taille en mmoire correspond bien aucalcul thorique :800 600 24 = 11 524 000 bits = 1 440 000 octets = 1 406 KoCette rsolution ne permet pas le format GIF, qui naccepte pas plus de256 couleurs. En revanche, le format BMP la reconnat : comme vous levoyez, il neffectue aucune compression. Ce format nest dailleurs pasreconnu sur le Web, pas plus que le format TIF : ils ne sont l que pourpermettre la comparaison. Dans cet exemple, le fichier JPEG est de loinle plus petit.La premire possibilit pour rduire la taille de ce fichier sans modifierle format de limage consiste rduire le nombre de couleurs, pourpasser 64 000 couleurs. Cela limine le format JPEG, obligatoirementen 16 millions de couleurs. Nous restons toutefois loin de la taille dufichier JPEG, malgr cette baisse de qualit. Poursuivons en passant en256 couleurs, pour pouvoir tester le format GIF.Si les fichiers restent de taille suprieure celui dun fichier JPEG en 16millions de couleurs, le format GIF se rvle le plus gourmand parmi lesautres. Poussons le raisonnement son terme en rduisant radicalementle nombre de couleurs 16 (soit 4 bits par couleur).La taille des fichiers poursuit sa rduction, passant cette fois en dessousde celle du fichier JPEG. Il est toutefois permis de sinterroger sur lapertinence dune telle rduction de qualit, pour ne gagner que 30 % entaille !Sachez toutefois que les chiffres prsents ici sont propres cetteimage : une autre image pourrait donner des rsultats diffrents, leformat GIF pouvant savrer plus intressant en 256 couleurs. Il reste238 LE GUIDE COMPLETCouleurs et imagesChapitre 6cependant important de noter que, inversement, la conversion dunfichier GIF en JPEG apporte parfois une grande amlioration !Tout dpendant des caractristiques du fichier, seuls les essais etlexprience pourront vous procurer un indice.Il existe par ailleurs plusieurs programmes permettant de rduire la tailledes images JPEG avec une perte de qualit minimale. Cest le cas dePaint Shop Pro.SmartSaver 3.0, conu par Ulead, est plus facile employer. Vouspouvez en tlcharger une version dvaluation depuis le site www.ulead.com/webutilities/frwhere.htm Cet utilitaire ralise un extraordinaire travaildajustement de compression en comparant les rsultats selon lesrglages et les types de fichiers. Deux fentres permettent de comparerloriginal, gauche, et la version compresse, droite, en taille et enqualit. Les effets des diffrents rglages sautent immdiatement auxyeux : au prix dune baisse de qualit perceptible, mais somme touteacceptable, la taille du fichier passe de 71 41 Ko ! (voir Figure 6.56)SmartSaver propose des outils pour recadrer et modifier la taille desimages : ainsi, tous les outils ncessaires pour amliorer le chargementdune image sont-ils la porte de main.Figure 6.55 : Paint Shop Pro permet de rduire la taille dune image JPGInclusion gnrique dimages : lment OBJECT Chapitre 6239LE GUIDE COMPLETRecours une page de vignettesPour afficher un groupe dimages de qualit photographique, unesolution astucieuse consiste crer une page qui prsente des rductionsde ces images, appeles vignettes ou miniatures (thumbnail). Chaquevignette est relie limage en taille relle. Ceci permet aux visiteurs devoir ce qui est disponible avec une perte de temps minimale enchargement, et ils peuvent ainsi voir uniquement les images qui lesintressent.6.6. Rsumj La toute premire tape de lenjolivement dune page consiste yajouter de la couleur.j Exploiter les couleurs est de la plus grande simplicit en HTML,grce divers attributs de llment BODY.j La valeur hexadcimale employe pour spcifier une couleurporte le nom de code RGB de cette couleur.j Vous modifiez la couleur du texte pour ou dans un lment grce lattribut color dun lment FONT. Vous modifiez la couleurFigure 6.56 : Rduction de la taille dune image avec SmartSaver 3.0240 LE GUIDE COMPLETCouleurs et imagesChapitre 6du fond des lments dun tableau laide de lattribut bgcolorde llment concern.j Les couleurs peuvent tre dsactives par lutilisateur. Tous lesnavigateurs ou presque possdent dsormais des options degestion des couleurs ou autorisent les utilisateurs dfinir unensemble particulier de couleurs utiliser pour tout site visit.Tous ces attributs sont dsormais dconseills, au profit desfeuilles de style.j Il est possible de placer des images sur un site Web. Les formatsde fichiers graphiques les plus frquents sont GIF (GraphicInterchange Format), JPEG (Join Photographic Experts Group) etPNG (Portable Network Graphic). Pour pouvoir diffuser sur votresite une image, vous devez avoir le droit de le faire : elle est librede droits, vous avez obtenu laccord de son propritaire ou vousen tes vous-mme lauteur.j Vous insrez une image darrire-plan pour la totalit de la pagedans llment BODY laide de lattribut background.j Vous insrez une image dans un lment HTML laide deslments IMG et OBJECT. Ce dernier lment, plus puissant, estdsormais privilgier.j Vous pouvez employer des images statiques ou des imagesanimes (gifs anims). Vous pouvez crer vos propres imagesanimes.j Il est possible de crer et dinsrer des images cliquables : un clicsur une portion de limage dclenche une action, souvent (maispas toujours) louverture dune nouvelle page. Vous employezpour ce faire les lments MAP et AREA, associs des lmentsIMG ou OBJECT.j De faon gnrale, mieux vaut toujours chercher diminuer letemps de tlchargement dune page Web. Vous devez veiller bien contrler la taille de vos images. Un choix judicieux duformat de fichier, ainsi que le recours certains utilitaires, peutpermettre de rduire sensiblement la taille des fichiers concerns,sans perte de qualit visuelle.Rsum Chapitre 6241LE GUIDE COMPLETJeuxdencadrementJeu dencadrement : lment FRAMESET .................................................................. 245Contenu dun jeu dencadrement : lment FRAME ................................................ 248Dtermination du cadre cible : attribut target ............................................................. 261Ensembles de cadres imbriqus .................................................................................... 265Partage de donnes entre cadres ................................................................................. 269Contenu de remplacement : lment NOFRAMES ................................................... 270Cadres en ligne : lment IFRAME ................................................................................ 271Travail avec les jeux dencadrement ............................................................................. 273Rsum ................................................................................................................................ 275Les cadres ou frames sont largement employs en HTML. Ils constituent leprincipal moyen dafficher de multiples pages HTML sur le mme cran aumme moment. Vous pourriez ouvrir plusieurs fentres ou onglets sous votrenavigateur, mais seriez alors contraint de basculer constamment de lun lautre. Grce aux cadres, il est possible de concevoir un site qui prsenteaux utilisateurs plusieurs fentres. Ces fentres dinformation doiventcependant tre lies : les utilisateurs ne doivent pas avoir limpression deperdre une place prcieuse pour des lments sans importance.Les cadres sont frquemment employs pour contrler la navigation delutilisateur sur le site. Des tudes ont dmontr quune barre denavigation ou un menu ntaient utiles qu condition dtre situs enhaut dun document. Beaucoup dutilisateurs du Web ne font jamaisdfiler lcran vers le bas : les ventuelles barres de navigation situesen bas dune page doivent donc tre des rpliques de celles du haut.Mieux vaut recourir un cadre pour placer dfinitivement les outils denavigation un endroit bien dfini de lcran.Des cadres permettent de prsenter les documents selon des vues multiples :des fentres indpendantes ou des sous-fentres. Cest un moyen de gardervisibles certaines informations, tandis que dautres fentres dfilent ou sontremplaces. Par exemple, dans la mme fentre, un cadre pourrait afficherune bannire statique, un deuxime cadre afficher un menu de navigation etun troisime le document principal qui peut dfiler ou tre remplac au grde la navigation via le deuxime cadre.Ce chapitre montre comment construire un jeu dencadrement ouframeset, aussi nomm ensemble de cadres . Cela seffectue par lebiais dun fichier qui dfinit les cadres, le mode douverture dune pagedans un cadre en utilisant le lien prsent dans un autre, et la faondutiliser les lments de script pour que les cadres fonctionnentcorrectement. Vous allez apprendre concevoir un ensemble de cadresattrayant, ergonomique et efficace.En raison des problmes de conception qui leur sont propres, les cadressont une technique avance de HTML et doivent tre traits comme tels.lments tudisFRAMESET, cols, rowsFRAME, name, src, noresize, scrolling, frameborder,marginheight, marginwidthtargetBASENOFRAMESIFRAME244 LE GUIDE COMPLETJeux dencadrementChapitre 77.1. Jeu dencadrement : lmentFRAMESETUn fichier de dfinition de jeu dencadrement possde une syntaxeanalogue celle dun document HTML ordinaire, mais son code diffre.Tout dabord, avec HTML 4.01, ces documents utilisent un lmentDOCTYPE diffrent en tte de page. Ils sont en outre dpourvusdlment BODY, remplac par un lment FRAMESET.Nous allons immdiatement mettre en jeu les cadres pour amliorernotre site Web. Le meilleur moyen de commencer consiste tracer surune feuille de papier laspect souhait, en attribuant un nom chaquecadre. Ici, comme le montre la figure suivante, notre ensemble de cadresne contient que deux cadres. Le premier cadre, nomm nav (pournavigation), occupe la totalit de la largeur de lcran et ne possdequune hauteur de 50 pixels. Le second cadre, nomm princ (pourprincipal) occupe le reste de la fentre.Passons la pratique.1 Ouvrez le Bloc-Notes.2 Saisissez llment DOCTYPE caractristique dun ensemble decadres :Figure 7.1 : Schma de lensemble de cadres de notre siteJeu dencadrement : lment FRAMESET Chapitre 7245LE GUIDE COMPLET3 Poursuivez comme avec nimporte quel document HTML, ensaisissant les lments HTML et HEAD. Comme lhabitude,noubliez pas de refermer immdiatement ces lments :4 Vous allez maintenant saisir les diffrents lments lintrieur dellment HEAD : TITLE et divers lments META."Mon site Web"Remarquez que ce contenu est identique celui de llmentHEAD de notre page daccueil, une exception prs : comme nousapportons une modification majeure au site, le numro de versiondevient 2.7.1.5 Contrairement une page Web normale , un fichier densemblede cadres est dpourvu dlment BODY, remplac par un lmentFRAMESET. Vous y saisissez la dfinition de votre ensemble decadres :Nos deux cadres empils se comportent comme des lignes et sontdonc dfinis dans lensemble de cadres comme tels (rows). Sinous avions choisi des cadres juxtaposs, donc en colonnes, nousaurions employ cols. Remarquez la spcification de la hauteurdu premier cadre, 50 pixels. Le signe * employ pour le secondsignifie occuper le reste de lcran . Ces points seront tudisdans la suite de cette section.6 Tous les agents utilisateurs ne sont pas en mesure dafficher lescadres. Une bonne prcaution consiste prvoir une alternative, laide dun lment NOFRAMES. Si lagent utilisateur ne peutafficher les cadres (ou est configur pour ne pas le faire), ilrestitue le contenu de llment NOFRAMES.246 LE GUIDE COMPLETJeux dencadrementChapitre 7Ce document a recours un jeu dencadrementqui contient :Une barre denavigation Une pagedaccueil7 Enregistrez votre fichier sous le nom index.html.index.html ?Vous pourriez vous demander pourquoi ce fichier est enregistr sousce nom. Lorsque quil reoit un URI dpourvu de nom de fichier, toutagent utilisateur recherche par dfaut un fichier nomm index.html. Celavite davoir mmoriser le nom de la premire page de votre site : seullURI vers son dossier est ncessaire, soit donc dans notre cas/MonSite.Llment FRAMESET spcifie la disposition de la fentre principale delutilisateur selon des subdivisions rectangulaires : lignes et colonnes.Nous avons employ ici lattribut rows. Celui-ci spcifie la dispositiondes cadres horizontaux. Sa valeur est une liste de longueurs en pixels, enpourcentage ou relatives, spares par des virgules. La valeur par dfautest 100 %, cest--dire une seule range.Prenons un exemple :...reste de la dfinition...Vous crez ici trois lignes. La premire possde une hauteur fixe de 20pixels (pour recevoir par exemple des icnes de navigation dont lesdimensions sont connues). La seconde occupe 25 % de lespace quireste disponible et la troisime le solde (soit 75 %).Nous aurions pu prfrer une disposition en colonnes, laide delattribut cols, qui spcifie la disposition des cadres verticaux. SaJeu dencadrement : lment FRAMESET Chapitre 7247LE GUIDE COMPLETvaleur est une liste de longueurs en pixels, en pourcentage ou relatives,spares par des virgules. La valeur par dfaut est 100 %, cest--direune seule colonne.Il est possible de combiner des attributs rows et cols. Si lattributrows est absent, chaque colonne occupe la hauteur entire de la page. Silattribut cols est absent, chaque range occupe la largeur entire de lapage. Si aucun de ces attributs nest prsent, le cadre occupe la totalitde la page.Les cadres sont crs de gauche droite pour les colonnes et de haut enbas pour les lignes. Quand les deux attributs sont spcifis, les cadressont crs ligne par ligne du haut vers le bas, les colonnes tant placessuccessivement de gauche droite dans la range suprieure, de gauche droite dans la range suivante, etc.Voici un exemple de grille 23 :...reste de la dfinition...Les longueurs absolues dont le total nest pas gal 100 % de lespacedisponible rel devraient tre ajustes par lagent utilisateur. Quand cetotal est infrieur 100 %, lespace restant devrait tre allouproportionnellement chaque vue. Quand il est suprieur, chaque vuedevrait tre rduite en fonction de la proportion de lespace total qui luiest spcifie.Je pense que vous commencez comprendre pourquoi il est fortementconseill de tracer sur papier laspect voulu dun jeu dencadrementavant de commencer le programmer7.2. Contenu dun jeu dencadrement :lment FRAMEVous avez donc cr un jeu dencadrement fort simple. Celui-ci esttoutefois pour le moment totalement dpourvu de contenu. Vous devezavoir compris que cette page allait remplacer lactuelle page daccueil.Celle-ci est divise en deux pages distinctes, affiches chacune dans uncadre propre : la partie navigation dans le cadre du haut, et le textedaccueil dans le second cadre. Crez maintenant ces deux pages, partir de lancienne page daccueil.248 LE GUIDE COMPLETJeux dencadrementChapitre 71 Ouvrez dans le Bloc-Notes la dernire version de la pagedaccueil, pageacc_6_1.html.2 Vous allez dabord crer la barre de navigation. Modifiez toutdabord le contenu des lments TITLE et META, comme suit :"Barre de navigation"3 Cette page doit tre une simple barre de navigation. Remplacez latotalit du contenu actuel de llment BODY par ce qui suit (enfaisant attention, vous pouvez vous viter un peu de saisie) :AccueilMa rgionMa familleMes passionsContenu dun jeu dencadrement : lment FRAME Chapitre 7249LE GUIDE COMPLET7 Modifiez comme suit le contenu de llment BODY. Commeprcdemment, vous devriez pouvoir vous viter un peu desaisie :Ma page daccueilBienvenue sur monsite.Vous trouverez sur ce site desinformations :sur ma rgion ;sur ma famille ;sur mes passions.Naviguez dans le site laide de la barre denavigation propose ci-dessus.Olivier Rignal etJustin Bogue sont lespersonnes contacter pour toutproblmerencontr sur le site.Remarquez le recours un lment DIV pour obtenir le centragedu contenu de la page, aprs les titres.8 Enregistrez le fichier sous le nom accueil.html.Voici les listings complets des trois fichiers crs ce stade :Listing 7-1 : Index.html250 LE GUIDE COMPLETJeux dencadrementChapitre 7"Mon site Web"Ce document a recours un jeudencadrement qui contient :Une barrede navigation Une pagedaccueilListing 7-2 : barrenav.html"Barre de navigation"AccueilMa rgionMa familleMes passionsListing 7-3 : accueil.html"Page daccueil"Ma page daccueilBienvenue sur monsite.Quelques problmes se posent dans la barre de navigation. Tout dabord,en ayant limin les couleurs, licne retenue pour envoyer un courrielressort de faon un peu dsagrable. Vous pourriez dfinir votre proprecharte graphique (et vous le ferez probablement), et savez o chercherune icne plus adapte, grce au Chapitre 6.Plus gnant, bien que nous ayons pris la prcaution dliminer lesbordures du tableau et dajuster la hauteur de licne, celle-ci napparatpas totalement. Une barre de dfilement est donc propose sur la droitede lcran. En outre, la barre sparant les deux cadres nest pas dumeilleur got. Remarquez dailleurs quil est possible de la cliquer-dposer pour modifier la taille du cadre de la barre de navigation, ce quinest pas ce que nous souhaitons. Il est possible de remdier cesdiffrents points.1 Ouvrez nouveau le fichier index.html.2 Modifiez comme suit llment FRAME de la barre de navigation :Nous reviendrons sous peu plus en dtail sur les attributsemploys.3 Enregistrez le fichier sans modifier son nom. Examinez-le nouveau dans votre navigateur.Figure 7.2 : Aspect du nouveau jeu dencadrementContenu dun jeu dencadrement : lment FRAME Chapitre 7253LE GUIDE COMPLETLaspect est dsormais beaucoup plus sympathique. Avant de procder un test plus approfondi, il est ncessaire de veiller ce que les cibles desliens de la barre de navigation soient valides. Si les fichiers famille.htmlet passions.html existent bien, ce nest pas le cas du fichier region.html.Rglez ce problme maintenant.4 Ouvrez le fichier region1_6_3.html, puis, sans le modifier,enregistrez-le sous le nom region.html, sans fermer le Bloc-Notesni le fichier.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 sontdornavant toujours prsents lcran, ceux situs sur les pagessecondaires deviennent superflus. Les liminer amliorera laspectde ces pages, tout en facilitant leur maintenance ultrieure.Figure 7.3 :Aspect du jeudencadrementmodifiFigure 7.4 :Supprimer lesliens du bas dela pageamliorera sonaspect254 LE GUIDE COMPLETJeux dencadrementChapitre 76 Revenez au fichier region.html, toujours ouvert. Modifiez sonnumro de version comme suit :7 Pour bien faire, supprimez les deux premiers lments OBJECT(lapplet Python et lanimation MNG), puis supprimez les lienssitus en bas de la page. Les lignes supprimer sont lessuivantes :...Retour vers la pagedaccueil8 Vous pouvez modifier le commentaire avec llment OBJECT jpg.Enregistrez ensuite le fichier sous le mme nom.9 Ouvrez successivement les fichiers famille.html et passions.html.Modifiez les numros de version en 2.7.1 et supprimez les liens,puis enregistrez-les sans modifier leur nom.Dsormais, vous passez dune page lautre aisment, dunsimple clic.Il est bien sr possible ce stade dencore amliorer le site. laide desinformations 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, unbandeau serait parfait pour la barre de navigation (puisque la tailleest fixe), tandis quune mosaque, ventuellement de typefiligrane, serait parfaite pour le cadre principal.j Ajouter un arrire-plan aux cellules du tableau de la barre denavigation, ou remplacer les liens texte par des dessins ou icnesemployant des polices plus sophistiques. Vous verrez dans leChapitre 9, traitant des scripts, comment rendre cette barre encoreplus attractive.Contenu dun jeu dencadrement : lment FRAME Chapitre 7255LE GUIDE COMPLETVous pourriez galement crer dautres barres de navigation, adaptes laffichage de pages de niveau infrieur des pages dj cres (parexemple, un dtail des passions), voire modifier totalement le jeudencadrement en le remplaant par un autre, comme vous allez ledcouvrir dans la suite de ce chapitre. Les possibilits ne dpendent quede votre imagination !Voici le nouvel tat du listing du fichier index.html.Listing 7-4 : index.html"Mon site Web"Ce document a recours un jeudencadrement qui contient :Une barre de navigation Une page daccueilIl est toutefois temps de comprendre comment seffectue toute cettemagie, en examinant les diffrents constituants de llment FRAMESET.Commenons par les attributs de llment FRAME.256 LE GUIDE COMPLETJeux dencadrementChapitre 7Attributs essentiels de llment FRAME :name et srcLlment FRAME dfinit le contenu et lapparence dun unique cadre.Lattribut name assigne un nom au cadre courant. Ce nom est employcomme cible des liens : le cadre dans lequel ouvrir un document. Bienque facultatif en thorie, cet attribut est en pratique presque toujoursncessaire.Un nom de cadre doit rpondre certains impratifs. Il doit commenceravec un caractre alphanumrique, pas par un symbole. Il existetoutefois un certain nombre de noms rservs qui possdent desproprits spciales. Ces noms commencent par un trait desoulignement. Il sagit de _blank, _self, _parent, et _top. Chacunpossde un but spcial dans les cadres, et accomplit quelque chosedunique. Ces noms rservs et leur emploi seront examins un peu plusloin dans ce chapitre.Lattribut src spcifie la localisation du contenu initial placer dans lecadre dfini par llment FRAME :Contenu et dfinition des cadresLa dfinition dun jeu dencadrement, telle que spcifie par lesvaleurs des attributs src des lments FRAME, ne change jamais. Enrevanche, le contenu de lun ou de plusieurs de ses cadres peut changer.Aprs une telle modification, la dfinition du jeu dencadrement nereflte plus la situation courante de ses cadres.Contenu dun jeu dencadrement : lment FRAME Chapitre 7257LE GUIDE COMPLETAttributs de mise en forme de llment FRAMECes attributs conditionnent la faon dont les agents utilisateurs restituentle cadre et influent sur son comportement.Lattribut boolen noresize indique lagent utilisateur que le cadrene doit pas tre redimensionnable : sil est prsent, il est impossibledeffectuer un glisser-dposer pour modifier la taille du cadre.Lattribut scrolling autorise ou interdit la prsence de barres dedfilement pour la fentre du cadre. Les valeurs possibles sont auto(une barre de dfilement est prsente si ncessaire. Cest la valeur pardfaut), yes (mcanisme de dfilement toujours prsent) et no(mcanisme de dfilement toujours absent).Lattribut frameborder procure lagent utilisateur une indication surla bordure du cadre. Les valeurs possibles sont 1 (prsence dunesparation entre ce cadre et chacun des cadres adjacents. Cest la valeurpar dfaut) et 0 (pas de sparation entre ce cadre et chacun des cadresadjacents).Remarquez que des sparateurs peuvent nanmoins tre dessins ctde ce cadre, sils sont spcifis par les cadres adjacents. Si vous nevoulez pas de sparation entre plusieurs cadres, spcifiezframeborder="0" pour tous les cadres concerns, comme nouslavons fait sur notre site :Les attributs marginwidth et marginheight spcifientrespectivement la quantit despace laisser entre le contenu du cadre etses marges latrales (gauche et droite) et haute et basse. La valeur,exprime en pixels, doit tre suprieure zro. Les valeurs par dfautdpendent de lagent utilisateur. Comme les principaux navigateursprsentent sur ce point des diffrences sensibles, mieux vaut spcifier258 LE GUIDE COMPLETJeux dencadrementChapitre 7explicitement des valeurs, surtout pour les barres de navigation et lescadres dimensions fixes.Autres attributs de llment FRAMEComme pour la plupart des autres lments, un lment FRAME peutpossder des attributs id, class (identifiants internes au document),title (titre de llment) et style (informations de style en ligne),ainsi quun attribut longdesc qui spcifie un lien vers une descriptionlongue du cadre. Cette description devrait suppler la brvedescription fournie laide de lattribut title. Elle peut treparticulirement utile aux agents utilisateurs non visuels.Lattribut longdesc permet de rendre les documents avec des cadresplus accessibles aux personnes utilisant des agents utilisateurs nonvisuels. Remarquez toutefois que les descriptions longues associes auxcadres sont attaches ceux-ci et non leur contenu. Ce dernier pouvantvarier au fil du temps, la description longue initiale peut devenirinadquate pour les contenus ultrieurs du cadre. Mieux vaut notammentne pas inclure une image comme seul contenu dun cadre.Le document avec jeu dencadrement suivant dcrit deux cadres. Lecadre de gauche contient une table des matires et celui de droitecontient initialement limage dune autruche :Un document avec jeu dencadrement mal faitRemarquez que limage est incluse dans le cadre indpendamment detout lment HTML : lattribut longdesc constitue le seul moyen despcifier un texte de remplacement. Si le contenu du cadre de droitechange (par exemple, lutilisateur choisit dans la table des matires unserpent sonnette), les utilisateurs nauront aucun accs textuel aunouveau contenu du cadre.Contenu dun jeu dencadrement : lment FRAME Chapitre 7259LE GUIDE COMPLETIl ne faut donc pas placer directement une image dans un cadre commevaleur de lattribut src. Limage doit plutt tre spcifie dans undocument HTML spar, dans lequel elle est annote laide du texte deremplacement adquat :Un document avec jeu dencadrement bien faitLautruche rapide et puissanteCes autruches ont vraiment bon got !Enfin, un attribut target peut tre plac dans un lment FRAME,dfinissant ainsi une cible par dfaut pour tous les liens de ce cadre.Lattribut target est tudi plus en dtail dans la section suivante.Dfinition et contenuUn document qui contient une dfinition de cadre ne doit pascomporter le contenu de ce cadre. Lexemple suivant est illgal, puisquele contenu du deuxime cadre se trouve dans le mme document que lejeu dencadrement....un texte...Passage important...un texte...260 LE GUIDE COMPLETJeux dencadrementChapitre 77.3. Dtermination du cadre cible :attribut targetUne fois le jeu dencadrement cr, vous devez disposer dun moyen denaviguer entre les cadres. La plupart des jeux dencadrement consistenten un cadre principal entour dautres cadres, comme des bannires, desmenus de navigation ou dautres lments.Que se passe-t-il toutefois lorsque vous cliquez sur un lien situ lintrieur dun cadre ? Dhabitude, cela ouvre une nouvelle page lintrieur de la fentre active, donc du mme cadre. Ceci peut rendre leschoses difficiles lire lors de lutilisation dun menu de navigationtroit ! Heureusement, lorsque vous cliquez sur un lien dans unensemble de cadres, vous pouvez spcifier que la nouvelle page doitsouvrir :j Dans le mme cadre.j Dans un autre cadre du jeu dencadrement.j Dans un autre cadre lintrieur dun cadre enfant ou parent(dans le cas de cadres imbriqus, abords plus loin).j Dans un nouveau jeu dencadrement qui remplace le jeu existantet toutes les fentres qui pouvaient sy trouver.j Dans un autre cadre, forant un autre cadre se relancer ou ouvrir une nouvelle page.j Dans une nouvelle fentre du navigateur.j Dans la fentre actuelle en remplaant lactuel jeu dencadrement.Comme vous pouvez le voir, il existe de nombreuses faons demanipuler le contenu des cadres laide de liens. Par dfaut, les lienssouvrent dans le mme cadre.Pour ouvrir un lien dans un autre cadre, vous employez lattributtarget :Si toutefois vous souhaitez ouvrir un cadre lintrieur dun autre cadredu jeu dencadrement, vous devez dabord prciser le nom de chaquecadre, et cibler ce cadre. Par exemple :nomme un cadre prcis nomm contenu. Un clic sur le lienDtermination du cadre cible : attribut target Chapitre 7261LE GUIDE COMPLETouvrira le document Web nomm info.html lintrieur du cadre nommcontenu.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 liensdun cadre, en plaant lattribut target dans llment FRAME.ouvre un cadre nomm barrenav, qui ouvrira par dfaut tous ses liensdans le cadre nomm contenu. Comme vous pouvez le voir, lespossibilits sont immenses.Noms rservsNous avons prcdemment voqu lexistence de noms rservs, quidbutent par un trait de soulignement : _blank, _self, _parent et_top.Ces noms rservs devraient imposer lagent utilisateur de fonctionnercomme suit :j Un lien qui cible _blank ouvre une page dans une nouvellefentre dpourvue de nom.Utilisez target=_blank lorsque votre lien renvoie en dehors devotre site. Par exemple, si vous proposez une liste de liens, ceuxqui appartiennent dautres personnes doivent souvrir dans denouvelles fentres. En effet, votre site nest probablement pas leseul utiliser les cadres : rien nest plus nervant quun site encadres lintrieur du petit cadre de contenu dun autre site encadres. En outre, vous ne voudriez peut-tre pas tre associ aupropritaire du contenu de ce site : si le lien souvre dans votreensemble, il apparatra comme faisant partie de votre site, ce quipeut tre trs dsagrable.Anciennes versionsAvec les anciennes versions de Netscape Navigator, _new possde uneffet analogue _blank, mais ne fait pas partie du standard HTML.262 LE GUIDE COMPLETJeux dencadrementChapitre 7j La cible _self ouvre une page lintrieur du cadre actif. Cestle comportement par dfaut de beaucoup dagents utilisateurs : enlabsence de cible spcifie, le document nomm par le liensouvre dans le cadre actif. Ceci est utile pour les liens situs lintrieur du cadre principal, gnralement censs ouvrir descontenus diffrents dans ce cadre.j Le nom rserv _parent sapplique aux cadres imbriqus.Lorsque vous ciblez le cadre _parent, vous ciblez rellement lecadre dans lequel rside votre cadre actuel.j Enfin, _top ouvre le lien dans la fentre en cours, remplaant latotalit du jeu dencadrement actif. Une fentre de navigation peuttre considre comme un conteneur. Celui-ci peut renfermer unjeu dencadrement, lintrieur duquel peut se trouver un autrejeu dencadrement. Lorsque vous lancez un lien dans un autrecadre, le contenu est mlang dans le conteneur. En louvrant enrevanche dans _top, le contenu du conteneur est remplac entotalit par la ou les pages auxquelles mne ce lien. Vousemploierez par exemple _top pour ouvrir un nouveau fichier dedfinition de jeu dencadrement, diffrent du jeu actif.Remarquez bien lemploi de devraient En pratique, quelquesprcautions complmentaires sont ncessaires lors de lemploi de jeuxdencadrement imbriqus, comme vous le verrez plus loin. Les agentsutilisateurs, dont les principaux navigateurs, peuvent interprterdiffremment selon les situations ces noms rservs, notamment_parent.Conflits de noms de cadres un moment donn, il peut arriver que deux cadres possdent lemme nom. Cest souvent le rsultat dune ouverture dun ensemble decadres dans un ensemble existant. HTML 4.01 dispose de rglesspciales pour la gestion de ce genre de conflits. Le navigateur recherchedabord le cadre nomm dans lensemble le plus profond. Si aucun cadrede ce nom nexiste, il cherche dans le cadre parent, puis dans lensembleparent, et ainsi de suite. Sil ne parvient toutefois pas identifier decadre portant ce nom, il ouvre un nouveau cadre et lui attribue ce nom.Dtermination du cadre cible : attribut target Chapitre 7263LE GUIDE COMPLETtablissement de la cible par dfautdes liensQuand, dans une mme document, plusieurs liens dsignent la mmecible, il est possible de spcifier la cible une seule fois et de se passer delattribut target de chaque lment. Pour ce faire, dfinissez dans ledocument lattribut target sur un lment BASE.Par exemple, pour spcifier que tous les liens situs dans le documentpassions.html doivent ouvrir un nouveau fichier dans le cadre nommaffichage, vous dfinissez comme suit un lment BASE :......Smantique de cibleLa dtermination par lagent utilisateur du cadre cible nest pas toujoursvidente. HTML 4.01 recommande que les agents utilisateursdterminent le cadre cible dans lequel charger une ressource relie selonla prsance suivante (de la priorit la plus leve la plus basse) :j Si lattribut target dun lment vise un cadre connu, quandllment est activ (un clic sur un lien ou la soumission dunformulaire), la ressource dsigne par llment devrait se chargerdans le cadre cible.j Si cet lment est dpourvu dattribut target et quen revanchellment BASE en possde un, cest lattribut target dellment BASE qui dtermine le cadre.j Si ni cet lment ni llment BASE ne se rfrent une cible, laressource dsigne par llment devrait se charger dans le cadrequi contient llment (comportement par dfaut identique unecible _self).j Si un attribut target se rfre un cadre C inconnu, lagentutilisateur devrait crer une nouvelle fentre et un nouveau cadre,puis assigner le nom C au cadre et, enfin, charger la ressourcedsigne par llment dans le nouveau cadre.264 LE GUIDE COMPLETJeux dencadrementChapitre 7Les agents utilisateurs devraient fournir aux utilisateurs un mcanismepermettant de surclasser lattribut target.Remarquez quune fois de plus les comportements par dfaut prconisspar HTML pour les agents utilisateurs sont dune efficacit certaine :vous pouvez trs souvent vous abstenir de spcifier diffrents attributsen vous reposant sur le comportement par dfaut. Cest toutefois uneattitude un peu risque, car un agent utilisateur au comportementinhabituel peut amener des rsultats catastrophiques : par scurit,mieux vaut spcifier tout ce qui peut ltre. Cela est particulirementvalable pour lattribut target.7.4. Ensembles de cadres imbriqusLes jeux dencadrement peuvent simbriquer nimporte quel niveau.Dans lexemple suivant, llment FRAMESET externe divise lespacedisponible en trois colonnes presque gales. Llment FRAMESETinterne partage alors la deuxime colonne en deux ranges de hauteuringale.......Le schma de laspect de ce jeu dencadrement est prsent dans lafigure suivante.Figure 7.5 :Jeux dencadrement imbriqusEnsembles de cadres imbriqus Chapitre 7265LE GUIDE COMPLETLorsque 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 vousutilisez les noms rservs, avec comme cible _parent.Revenez lexemple prsent ci-dessus. Ce jeu cre un ensemble dequatre cadres. Le jeu principal est divis en trois colonnes, la colonnecentrale tant divise en deux lignes. Considrez le lien suivant :LienNous avons plac ce lien dans les fichiers nomms cadre1.html etcadre2l1.html. Le fichier cadre2l2.html contient en revanche le lien :LienEnfin, le fichier cadre3.html contient le lien :LienEn ouvrant le fichier cadresimbriques.html dans votre navigateur, vousvoyez ce qui est prsent dans la figure suivante.Un clic sur le lien du cadre nomm cadre1 ouvre le fichiertest_parent.html dans la totalit de la page.Figure 7.6 : Jeux dencadrement imbriqusFigure 7.7 :Le _parent de cadre1 est latotalit de la fentre266 LE GUIDE COMPLETJeux dencadrementChapitre 7Un clic sur le lien du cadre de la seconde ligne de la seconde colonneouvre le fichier test_parent.html dans ce cadre.Enfin, un clic sur le lien du cadre 3 ouvre aussi le fichier dans la totalitde la page : pour cadre1 et cadre2, _top et _parent possdent lamme signification. Jusque-l, tout va bien.En revanche, un clic sur le lien du cadre de la premire ligne de laseconde colonne devrait ouvrir le fichier test_parent.html dans la totalitde cette colonne, remplaant ce deuxime jeu dencadrement.Malheureusement, tel nest pas le cas, et le fichier souvre comme si_top avait t employ, ou comme si vous aviez cliqu sur le lien decadre1 : cest--dire sur un lien situ dans un cadre qui nappartient paslui-mme un jeu dencadrement secondaire. Le rsultat est identique ce qui est prsent dans la figure de la page 276.Que se passe-t-il ? Il semble en pratique que les agents utilisateursconsidrent souvent que des jeux dencadrement imbriqus dfinis dansun unique fichier ne constituent quun unique jeu dencadrement. Pourremdier ce dfaut, nous avons modifi comme suit le fichier despcification du jeu dencadrement principal, enregistr sous le nomcadresimbriques2.html :......Figure 7.8 : Le _self de cadre2 est bien lui-mmeEnsembles de cadres imbriqus Chapitre 7267LE GUIDE COMPLETVous spcifiez donc ici un jeu dencadrement unique. Remarquezlapparition du fichier cadre2.html. Celui-ci est une nouvellespcification de jeu dencadrement :......Nous possdons dj les autres fichiers. lexamen du fichiercadresimbriques2.html dans un navigateur, aucune diffrence aveclaspect prcdent napparat, si ce nest le titre et lURL de la page.Comme prcdemment, un clic sur le lien du cadre nomm cadre1ouvre le fichier test_parent.html dans la totalit de la page. Un clic sur lelien du cadre de la seconde ligne de la seconde colonne ouvre le fichiertest_parent.html dans ce cadre. Enfin, un clic sur le lien du cadre 3 ouvreaussi le fichier dans la totalit de la page. Aucune diffrence.Cette fois cependant, un clic sur le lien du cadre de la premire ligne dela seconde colonne ouvre bien le fichier test_parent.html dans la totalitde cette colonne, remplaant ce deuxime jeu dencadrement.Figure 7.9 :Jeux dencadrementimbriqusFigure 7.10 :Le _parent decadre2l1 est cettefois cadre2268 LE GUIDE COMPLETJeux dencadrementChapitre 7Lors de la ralisation de cadres imbriqus, mieux vaut donc sparer lesspcifications des jeux concerns pour viter tout problme decomportement du nom rserv _parent, ou vous en tenir des cadresnomms explicitement dsigns.7.5. Partage de donnes entre cadresIl est possible de partager des donnes entre plusieurs cadres en incluantcelles-ci au moyen de llment OBJECT. Llment OBJECT doit treplac dans llment HEAD du document de dfinition du jeudencadrement et nomm laide dun attribut id. Tout document quiest le contenu dun cadre dans le jeu dencadrement peut alors se rfrer cet identifiant.Lexemple suivant illustre la manire dont un script pourrait appeler unlment OBJECT dfini pour le jeu dencadrement entier (noustudierons plus en dtail les scripts dans le Chapitre 10).Fichier de dfinition du jeu dencadrement :Voici un jeu dencadrement avec un OBJECT dans HEADListing 7-5 : Fichier martine.htmlLa page de Martine...le dbut du document...parent.mon_objet.propritPartage de donnes entre cadres Chapitre 7269LE GUIDE COMPLET...le reste du document...Dautres cadres du jeu dencadrement pourraient galement fairerfrence llment OBJECT.7.6. Contenu de remplacement :lment NOFRAMESTous les agents utilisateurs ne sont pas en mesure de reconnatre lescadres. En outre, certains peuvent tre configurs pour ne pas lesafficher. Il est donc important de fournir un contenu de remplacement, cequi est obtenu laide de llment NOFRAMES.Llment NOFRAMES spcifie le contenu qui ne devrait tre affich quepar les agents utilisateurs qui ne reconnaissent pas les cadres ou sontconfigurs pour ne pas les afficher. Les agents utilisateurs quireconnaissent les cadres ne doivent afficher le contenu dune dclarationNOFRAMES que sils sont configurs pour ne pas afficher les cadres.Ceux qui ne reconnaissent pas les cadres doivent afficher dans tous lescas le contenu de llment NOFRAMES.Llment NOFRAMES fait partie la fois des DTD transitoires et desjeux dencadrement. Dans un document qui fait appel au DTD de jeudencadrement, llment NOFRAMES est plac la fin de la sectionFRAMESET du document.Cest ce que nous avons fait dans notre fichier de dfinition de jeudencadrement index.html :...Ce document a recours un jeu dencadrementqui contient :Une barre denavigation Une pagedaccueil270 LE GUIDE COMPLETJeux dencadrementChapitre 7...Llment NOFRAMES peut tre employ dans un document qui constituela source dun cadre et qui utilise le DTD transitoire. Cela permet auxauteurs dexpliquer lobjet du document, au cas o celui-ci serait vuindpendamment du jeu dencadrement ou encore avec un agentutilisateur ne reconnaissant pas les cadres.7.7. Cadres en ligne : lment IFRAMEDepuis sa version 3.0, Internet Explorer permettait de dfinir des cadresen ligne, qui flottaient dans la page. Ce dispositif a t repris dansHTML 4.01.Llment IFRAME permet dinsrer un cadre dans un bloc de texte.Linsertion dun cadre en ligne dans un passage textuel revient un peu y insrer un objet via llment OBJECT : ces lments permettent tousdeux linsertion dun document HTML au sein dun autre, ils peuventtous deux tre aligns sur le texte environnant, etc.Cet lment possde les mmes attributs que llment FRAME, lexception de lattribut noresize superflu puisquun cadre en ligne nepeut jamais tre redimensionn.Les informations qui doivent tre insres en ligne sont dsignes parlattribut src. En revanche, comme avec llment OBJECT, le contenude llment IFRAME ne doit tre affich que par les agents utilisateursqui ne reconnaissent pas les cadres ou qui sont configurs pour ne pasles afficher.Voici un exemple de mise en uvre dun cadre flottant.Listing 7-6 : cadreflottant.htmlExemple de cadre flottant Ceci est un exemple de cadre flottantCadres en ligne : lment IFRAME Chapitre 7271LE GUIDE COMPLET[Votre agent utilisateur ne reconnat pas les cadres ounest pas configur pour les afficher pour linstant.Cependant, vous pouvez visiter ledocument concern.]plac lintrieur dun texte.Listing 7-7 : cadreflottant2.htmlCadre flottantQuelques informations importantesLes informations contenues dans ce document sontaffiches dans un cadre flottant si lagentutilisateur reconnat les cadres ou peuvent treaffiches dans une page propre si tel nest pas le cas.Pour les agents utilisateurs qui reconnaissent les cadres, lexemple suivantplacera un cadre en ligne, entour par une bordure, au milieu du texte.En revanche, si lagent utilisateur ne reconnat pas les cadres ou estconfigur pour ne pas les afficher, le fichier cadreflottant.html seraaffich.Figure 7.11 : Cadre flottant affich par un navigateur reconnaissant lescadres272 LE GUIDE COMPLETJeux dencadrementChapitre 7Un clic sur le lien propos cet effet affiche le contenu du cadre flottantdans une fentre propre.lment OBJECTVous pouvez galement incorporer un document HTML dans un autredocument HTML avec llment OBJECT, dj abord au Chapitre 6ainsi que dans la section prcdente, et sur lequel nous reviendronsencore.7.8. Travail avec les jeuxdencadrementLorsque vous concevez un jeu dencadrement, vous devez vous souvenirque son aspect lcran peut diffrer de ce que vous aviez en tte, et cepour de multiples raisons. Par exemple, chaque barre de dfilementprsente sur un cadre rduit lespace disponible lcran, ce qui rend lesite de plus en plus exigu et inconfortable. Pour amliorer le confort,rduisez le nombre de cadres.Commencez par bien dfinir les raisons pour lesquelles vous souhaitezemployer un cadre dans vos pages HTML. Dsirez-vous faire de laplace pour une bannire publicitaire ? Inclure une barre de navigationFigure 7.12 : Cadre flottant affich par un navigateur qui ne reconnat pasles cadresFigure 7.13 :Le contenu du cadreflottant (celui du fichiercadreflottant2.html) estaffich dans une fentrepropreTravail avec les jeux dencadrement Chapitre 7273LE GUIDE COMPLETsur un ct de lcran (ou en haut ou en bas) ? Comparer deuxdocuments cte cte ? Mieux vaut toujours tracer par crit un schmade la structure de jeu dencadrement que vous souhaitez concevoir, en yinscrivant les noms attribus aux cadres.Les principales questions auxquelles vous devez imprativementrpondre pralablement la conception dun jeu dencadrement sont lessuivantes :j Quel cadre sera susceptible de subir les modifications les plusfrquentes ou les plus nombreuses ?j Comment les utilisateurs navigueront-ils dans ce jeudencadrement ?j En quoi ce jeu dencadrement aidera-t-il votre public apprcierle site ?Dune certaine faon, les problmes de conception dun jeudencadrement sont trs proches de ceux rencontrs lors de laconception de tableaux.Un des principaux problmes poss par les cadres, comme avec lestableaux, concerne la taille de lcran. Si toutefois, dans une conceptionHTML typique, vous ne vous proccupez gnralement que de la largeurde lcran lors de la ralisation de grands tableaux de prsentation, lescadres occupent la totalit de la fentre du navigateur.La plupart des utilisateurs naviguent avec une taille de fentremaximale : celle-ci occupe tout lcran disponible. Ceci signifie que lesrsolutions type des crans ont un rle jouer. Les rsolutions les plusfrquentes 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 estdonc raisonnable de considrer que lcran de lutilisateur possde unedimension au moins gale 800 pixels de large pour 600 pixels de haut :tenez-en compte lors de votre conception, par exemple pour la tailledune barre de navigation.Noubliez en outre pas que les cadres sont officiellement apparus dansHTML 4.0. Des agents utilisateurs plus anciens ne pourront peut tre pasreconnatre un ou plusieurs des attributs dcrits dans ce chapitre. Parexemple, cibler un cadre ou les attributs de largeur et de dlimitationpeuvent ne pas fonctionner correctement avec des navigateurs anciens.Pire encore, ils peuvent fonctionner dune faon autre que celle274 LE GUIDE COMPLETJeux dencadrementChapitre 7attendue. Mme si la grande majorit des navigateurs prennent encharge depuis un temps certain la quasi-totalit des attributs abordsdans ce chapitre (comme Microsoft Internet Explorer et NetscapeNavigator depuis leur version 3.0), mieux vaut toujours tester vos pagesavec dautres navigateurs avant de lancer votre site.Sachez enfin que les jeux dencadrement peuvent rendre la navigationdavant en arrire, par le biais de lhistorique de lagent utilisateur, pluscomplique pour les utilisateurs.7.9. Rsumj Les cadres ou frames sont largement employs en HTML. Ilsconstituent le principal moyen dafficher plusieurs HTML sur lemme cran au mme moment.j Un fichier de dfinition de jeu dencadrement possde une syntaxeanalogue celle dun document HTML ordinaire, mais son codediffre. Ils utilisent un lment DOCTYPE diffrent en tte de page,et sont dpourvus dlment BODY, remplac par un lmentFRAMESET.j Llment FRAMESET spcifie la disposition des vues dans lafentre principale de lagent utilisateur.j La spcification de lattribut rows de llment FRAMESET dfinitle nombre de subdivisions horizontales dans un jeudencadrement. La spcification de lattribut cols dfinit lenombre de subdivisions verticales. Les deux attributs peuvent treutiliss simultanment pour crer une grille.j Au sein de llment FRAMESET, les diffrents cadres sont dfinis laide dlments FRAME. Un lment FRAME dfinit le contenuet lapparence dun unique cadre.j Lattribut name dun lment FRAME assigne un nom au cadreconcern. Ce nom est employ comme cible des liens : le cadredans lequel ouvrir un document. Un nom de cadre doitimprativement commencer par un caractre alphanumrique. Ilexiste toutefois un certain nombre de noms rservs quipossdent des proprits spciales et dbutent par un trait desoulignement ( _blank, _self, _parent, et _top).j Lattribut src dun lment FRAME spcifie la localisation ducontenu initial placer dans le cadre dfini par llment FRAME.Rsum Chapitre 7275LE GUIDE COMPLETj Vous pouvez spcifier le mode de restitution dun cadre parlagent utilisateur laide de diffrents attributs. noresizeindique lagent utilisateur que le cadre ne doit pas treredimensionnable, lattribut scrolling autorise ou interdit laprsence de barres de dfilement, frameborder spcifie la taille(ou labsence) de la bordure du cadre. Les attributsmarginwidth et marginheight spcifient respectivement laquantit despace laisser entre le contenu du cadre et ses margeslatrales (gauche et droite) et haute et basse.j Par dfaut, tout lien prsent dans un cadre ouvre sa rfrence dansle mme cadre. Pour ouvrir un lien dans un autre cadre, vousdevez utiliser lattribut target, suivi du nom du cadre cible.Vous pouvez dfinir un cadre cible par dfaut pour les liens ducadre en employant lattribut target dans un lment BASE.j HTML 4.01 recommande des rgles de priorits que devraientrespecter les agents utilisateurs pour dterminer le cadre cibledans lequel charger une ressource lie.j Il est possible dimbriquer un nombre quelconque de jeuxdencadrement.j Il est possible de partager des donnes entre plusieurs cadres enincluant celles-ci au moyen de llment OBJECT. LlmentOBJECT doit tre plac dans llment HEAD du document dedfinition du jeu dencadrement et nomm laide dun attributid. Tout document qui est le contenu dun cadre dans le jeudencadrement peut alors se rfrer cet identifiant.j Il est prfrable de placer un lment NOFRAMES dans llmentFRAMESET afin doffrir un contenu de remplacement aux agentsutilisateurs qui ne reconnaissent pas les cadres ou ne sont pasconfigurs pour afficher ces cadres.j Vous pouvez insrer un cadre en ligne au sein dun bloc de texte laide de llment IFRAME. Un tel cadre ne peut jamais treredimensionn.j Dune certaine faon, les problmes de conception dun jeudencadrement sont trs proches de ceux rencontrs lors de laconception de tableaux. Un des principaux problmes poss,comme avec les tableaux, concerne la taille de lcran. Il est denos jours raisonnable de considrer que lcran de lutilisateurpossde une dimension au moins gale 800 pixels de large pour600 pixels de haut.276 LE GUIDE COMPLETJeux dencadrementChapitre 7Feuilles de styleIntroduction ......................................................................................................................... 279Attribut style ........................................................................................................................ 281lment STYLE ................................................................................................................... 282Feuille de style externe ..................................................................................................... 294Proprits de feuille de style ........................................................................................... 306Feuille de style en cascade ............................................................................................. 323Feuille de style auditive, pour un public particulier ................................................... 328Rsum ................................................................................................................................ 335Vous avez remarqu dans les chapitres prcdents que les attributs etcertains lments relatifs la mise en forme et la prsentation de pagesWeb taient frquemment, signals comme dconseills en faveur durecours aux feuilles de style.Lors de lapparition du Web, les principaux utilisateurs taientessentiellement des scientifiques, des enseignants et des militaires, plusconcerns par le contenu des documents que par leur prsentation. Ledveloppement fulgurant du World Wide Web et larrive de personnesissues dhorizons trs diffrents a mis rapidement en vidence que leslimites de HTML constituaient une source de frustration perptuelle.Nombreux furent alors ceux qui durent contourner les limites de mise enforme dHTML par des mthodes aussi diverses quastucieuses. Aussilouable quait pu tre le but damliorer la prsentation des pages Web,les techniques employes pour ce faire possdaient des effetssecondaires malheureux : leur fonctionnement ntait pas garanti etrestait largement dpendant de divers facteurs, dont lagent utilisateur.Les principales mthodes employes taient :j Lemploi dextensions HTML propritaires.j La conversion du texte en image.j Le recours des images pour contrler lespacement.j Lemploi de tableaux pour la mise en page.j Lcriture dun programme plutt que le recours HTML.Ces techniques accroissent considrablement la complexit des pagesWeb, offrent peu de souplesse, souffrent de problmes dinteroprabilitet constituent une preuve pnible pour les personnes prsentant deshandicaps.Les feuilles de style HTML reprsentent un progrs majeur quidveloppe les possibilits damlioration de laspect des pages Web.Elles rsolvent tous ces problmes en mme temps quelles remplacentlventail limit des mcanismes de prsentation HTML. Avec lesfeuilles de style, il devient facile de spcifier lespacement entre leslignes de texte, lindentation des lignes de texte, la couleur utilise pourle texte et larrire-plan, la taille et le style de la police et quantitdautres dtails.Les feuilles de style HTML peuvent tre mises en uvre de trois faonsdiffrentes :j Au sein dun lment.278 LE GUIDE COMPLETFeuilles de styleChapitre 8j Dans llment HEAD du document.j laide dune feuille de style externe.Ces trois mthodes ne sont pas exclusives les unes des autres. Cechapitre tudie les diffrentes modalits de mise en uvre des feuilles destyle.lments et attributs tudis dans ce chapitre :STYLELINKcolor, background-color, font-, text-, margin-, border-,padding-, height, width, overflow, float, position, left,top, z-index, clip, visibility, mediaspeak, spell-out, cue-, pause-, azimuth, elevation,voice-family, volume, silent, speech-rate, richness,stress@media8.1. IntroductionUne des motivations sous-jacentes aux feuilles de style, outre cellescites plus haut, tait damliorer la sparation de la logique de structure(dfinie par les lments HTML) de celle de la prsentation (dsormaisdfinie par les feuilles de style). Cette dmarche de sparation desdiffrentes couches de logique, de plus en plus frquente en matire deprogrammation, 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 largementrpandu, initialement cr dans les annes 1980 par Xerox PARC pourSmalltalk-80. Il a t plus rcemment recommand comme modle pour laplate-forme J2EE de Sun et gagne fortement en popularit auprs desdveloppeurs ColdFusion et PHP. Cest un outil fort utile au dveloppeur,quel que soit le langage utilis, mme sil prsente quelquesinconvnients.Le modle de conception MVC impose la sparation entre les donnes,les traitements et la prsentation. Toute application est ainsi divise entrois composants fondamentaux : le modle, la vue et le contrleur.Chacun de ces composants possde un rle bien dfini.La vue est linterface avec laquelle interagit lutilisateur. Pour lesapplications Web, ctait historiquement une interface HTML, mais celapeut galement tre une interface Macromedia Flash ou dautres langagesde balises comme XHTML, XML/XSL, WML et les services Web. LeIntroduction Chapitre 8279LE GUIDE COMPLETMVC sait grer lutilisation de diffrentes vues pour une mmeapplication. Aucun traitement nest effectu dans la vue : celle-ci nesert qu afficher les donnes et permettre lutilisateur dagir surcelles-ci. Le deuxime composant du MVC, le modle, reprsente lesdonnes et les rgles de travail (l o seffectuent les traitements). Lesbases de donnes en font partie, de mme que des objets comme les EJBet composants ColdFusion. Les donnes renvoyes par le modle sontindpendantes de la prsentation : le modle ne ralise aucune mise enforme. Un mme modle peut afficher ses donnes dans plusieurs vues.Enfin, le contrleur interprte les requtes de lutilisateur et appelle lemodle et la vue ncessaires pour rpondre celles-ci. Lorsquelutilisateur clique sur un lien ou soumet un formulaire HTML, lecontrleur ne produit rien et neffectue aucun traitement : il interceptesimplement la requte pour dterminer les modles et vues qui doiventtre associs.Pour rsumer, une requte utilisateur est interprte par le contrleur, quidtermine les portions du modle et de la vue qui doivent tre appeles.Le modle gre les interactions avec les donnes et applique les rgles detravail, puis renvoie les donnes. Le contrleur slectionne enfin une vueet lui transmet les donnes.En appliquant ce modle HTML, la feuille de style serait la vue, lagentutilisateur le contrleur et le document HTML le modle.La spcification HTML 4.01 ne lie pas HTML un langage de styleparticulier. Cela permet lutilisation dun panel de langages (les plussimples pour la majorit des utilisateurs et les plus complexes pour uneminorit dutilisateurs aux besoins trs spcialiss). Le langage le plusfrquemment employ est CSS (Cascading Style Sheet), fond sur laRecommandation W3C CSS niveau 2 (dont la version rvise au 7 juin2005 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 nousservirons dans cet ouvrage. La spcification CSS niveau 3 est en coursdlaboration (voir http://www.w3.org/Style/CSS/current-work). Souvenez-vous toutefois que dautres langages de feuille de style sont possibles enHTML.Pour employer dans vos pages des feuilles de style, vous devez spcifierle langage employ, laide dun lment META.1 Ouvrez le fichier index.html dans le Bloc-Notes.2 Modifiez le numro de version en 3.8.1 (il sagit l encore dunemodification majeure) :280 LE GUIDE COMPLETFeuilles de styleChapitre 83 Ajoutez juste en dessous, avant la balise , llmentMETA suivant :4 Enregistrez le fichier index.html sans modifier son nom.5 Rptez les tapes 1 4 pour les fichiers passions.html,region.html, famille.html et barrenav.html.6 Ouvrez le fichier accueil.html. Modifiez son numro de version,ajoutez le nouvel lment META, puis gardez ce fichier ouvertdans le Bloc-Notes.Comme vous devez lavoir compris, il sagit dune ligne essentielle ajouter dsormais systmatiquement dans llment HEAD de tout fichierHTML.8.2. Attribut styleLa faon la plus simple de dfinir un style dans une page, pour rester enconformit avec la spcification HTML 4.01, consiste le faire en ligne laide de lattribut style. Cet attribut peut tre employ avec tous leslments HTML sauf BASE, BASEFONT, HEAD, HTML, META, PARAM,SCRIPT, STYLE et TITLE.Passons la pratique.1 Revenez au fichier index.html, qui devrait tre ouvert dans votreBloc-Notes.2 Modifiez comme suit la ligne de titre (llment H1), en ajoutantun attribut style :Ma page daccueil3 Enregistrez le fichier sans modifier son nom.Lancez votre navigateur, puis ouvrez le fichier index.html (voirFigure 8.1).La syntaxe de la valeur de lattribut style est dtermine par le langagede feuille de style par dfaut. Par exemple, pour un style en ligne CSS,vous devez employer la syntaxe de bloc de dclaration CSS. La syntaxegnrale CSS de lattribut style est donc :Attribut style Chapitre 8281LE GUIDE COMPLETstyle ="proprit1 : valeur; proprit2 = valeur; propritn = valeur"Pour spcifier les informations de style de plusieurs lments, mieuxvaut prfrer llment STYLE.8.3. lment STYLELlment STYLE permet de rassembler des rgles de style dans len-ttedu document, qui vont ainsi sappliquer la totalit des lmentsconcerns du document. HTML autorise un nombre quelconquedlments STYLE dans la section HEAD dun document.La syntaxe des donnes de style dpend du langage de feuille de style.Certaines implmentations de feuille de style peuvent autoriser une plusgrande varit de rgles dans llment STYLE que dans lattributstyle. Dune faon gnrale, CSS distingue les slecteurs (ladfinition dun lment) et les dfinitions (les proprits de prsentationaffectes cet lment). CSS permet de dclarer les rgles lintrieurdun lment STYLE pour :j Toutes les instances dun lment HTML particulier (par exemple,tous les lments P, tous les lments H1, etc.).H1 {dfinitions}Figure 8.1 :Page daccueil, avectitre principal,modifie laidedun attribut style.282 LE GUIDE COMPLETFeuilles de styleChapitre 8j Toutes les instances dun lment HTML appartenant une classeparticulire (par exemple, les lments dont lattribut classpossde une valeur spcifie).*[class=valeur] {dfinitions}j Les instances uniques dun lment HTML (par exemple, unlment dont lattribut id possde une valeur spcifie).lment[id=valeur] {dfinitions}Il ne sagit l toutefois que dexemples simplissimes : la version 3 desslecteurs CSS (http://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html) propose des slecteurs nombreux et trssophistiqus, capables de rpondre dsormais pratiquement toutes lessituations (reportez-vous au tableau 13.12 du Chapitre 13, Annexes ).Les possibilits denrichissement dun contenu laide dune feuille destyle sont dsormais extrmement riches. En outre, CSS permet decombiner laide doprateurs les slecteurs simples, ce qui largitencore le champ des possibilits.Sensibilit a casse dans les slecteursDans les slecteurs, la sensibilit la casse des noms dlments etdattributs ainsi que des valeurs des attributs dpend du langage dudocument. Par exemple, les noms dlments sont sensibles la casse enXML mais pas en HTML.Les rgles de prsance et dhritage des rgles de style dpendent dulangage de feuille de style.Examinons successivement ces trois possibilits.Dfinition du style de la totalitdes occurrences dun lment donnLlment STYLE permet de dfinir facilement laspect dlmentsHTML spcifis. Voici comment procder :1 Ouvrez dans le Bloc-Notes le fichier accueil.html.2 Enregistrez-le en ltat sous le nom accueil_3_8_1.html. Modifiezensuite son numro de version :lment STYLE Chapitre 8283LE GUIDE COMPLET3 Avant la balise de fermeture de llment HEAD, ajoutez unlment STYLE dot du contenu suivant :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}4 Supprimez lattribut style de llment H1 ainsi que lattributalign de llment H2 (puisque vous avez dfini ces styles danslen-tte), ainsi que les balises de llment DIV (les styles deslments contenus sont galement dfinis dans len-tte). Commevous avez dfini un cadre autour de llment H1, vous pouvezgalement supprimer la rgle horizontale qui le suit (llmentHR).5 Enregistrez le fichier dabord sous le nom accueil_3_8_2.html, puissous le nom accueil.html.Lancez votre navigateur, puis ouvrez le fichier index.html. Remarquezque vous lancez index.html puisque celui-ci charge automatiquementaccueil.html dans un jeu dencadrement (voir Figure 8.2).Cette page ne diffre que trs peu de la prcdente. Nous examineronsplus en dtail dans la suite de ce chapitre les diffrents attributs quil estpossible demployer dans une feuille de style, mais regardez dj ce quenous avons fait ici :j Dans llment H1, la proprit borderwidth cre un cadrepais dun pixel, la proprit border dfinissant son aspect (lignepleine).j La proprit color, dj rencontre, dfinit la couleur du texte.j La proprit fontsize, galement dj rencontre, dfinit lataille de la police. Nous avons employ des tailles dcroissantesselon les cas.284 LE GUIDE COMPLETFeuilles de styleChapitre 8j La proprit textalign, dj rencontre aussi, dfinitlalignement du texte. Les lments H1, H2, P, UL et ADDRESSsont dfinis comme devant tre centrs lcran. En revanche,llment LI doit tre align gauche.j Enfin, la proprit marginleft: 40% de llment LI dfinitune marge gauche gale 40 % de lespace disponible : leffetobtenu avec cette marge et lalignement gauche est plussatisfaisant que le centrage prcdent.Grce la dfinition des styles dans llment HEAD, toute occurrencedes lments dfinis sera rendue de faon homogne, selon les critresspcifis. Un norme gain de temps et la garantie de disposer dun effethomogne !Effet homogne, mais peut-tre trop. Vous pourriez souhaiter dfinir destypes de prsentation particuliers pour certaines occurrences dunlment prcis . Cela est possible, grce lemploi de lattribut classe.Figure 8.2 : Page daccueil avec, cette fois, recours un lment STYLE.lment STYLE Chapitre 8285LE GUIDE COMPLETDfinition du style de certaines occurrencesdun lment donnSouvenez-vous : nous avons prvu dans la page daccueil une place pourdes remarques lgales, mais sans encore les crer. Si nous les mettonsdans un lment P, elles possderont une taille de police et un centrageautomatiques, compte tenu de la feuille de style actuelle. Il faut doncindiquer que, pour les lments P qui appartiennent une classeparticulire, laspect doit tre autre. Procdez comme suit :1 Revenez dans le Bloc-Notes au fichier accueil.html.2 Modifiez son numro de version :3 Ajoutez dans llment STYLE, juste aprs la dfinition dellment P, une nouvelle dfinition :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 par llment P suivant : 2005 votrenom Tous droits rservs5 Enregistrez le fichier dabord sous le nom accueil_3_8_3.html, puissous le nom accueil.html.H1.maclasse {border-width: 1; border: solid;text-align: center} Cet H1 est touchpar notre style Celui-ci ne lest pas Ouvrez le fichier index.html dans votre navigateur (voir Figure 8.3).Le paragraphe des remarques lgales, bien qutant un lment P, estprsent diffremment puisque nous avons spcifi que cet lmentappartenait la classe legal.286 LE GUIDE COMPLETFeuilles de styleChapitre 8Remarquez lattribut type de llment STYLE. Sa syntaxe est :type = "type_de_contenu"Cet attribut spcifie le langage de feuille de style par dfaut du contenude llment. Il surclasse, lorsquil est prsent et quelle est spcifie, lafeuille de style par dfaut (dfinie par dansllment HEAD). Le langage de feuille de style est spcifi comme untype de contenu (par exemple, "text/css"). Si la dfinition de lafeuille de style par dfaut est absente, il est indispensable de fournir unevaleur pour cet attribut : il est dpourvu de valeur par dfaut.Dfinition du style dune unique occurrencedun lment donnVous pourriez galement souhaiter quun lment unique dans votre,voire vos pages respecte un style particulier. Vous avez alors recours lidentifiant de cet lment (lattribut id), lequel doit tre unique dans ledocument. La syntaxe est la suivante :#monid {proprit1 :valeur; proprit2: valeur;...propritn: valeur}Figure 8.3 : Dfinition dun style pour une classe dlments particulirelment STYLE Chapitre 8287LE GUIDE COMPLETLa mise en uvre serait comme suit : Ce paragraphe est soumis au style mais pas celui-la. Vous pourriez vous poser la question de lintrt de dfinir dans lafeuille de style den-tte un lment unique : ne serait-il pas plus simplede dfinir un attribut style dans cet lment ?La rponse tient ce que nous avons dj soulign plusieurs reprises :HTML doit tre un langage de spcification de contenu. Son but estavant tout la structure et non la prsentation. Mieux vaut donc sparer aumaximum la logique structurelle (les lments HTML et leur contenu)de la logique de prsentation (la feuille de style).lments DIV et SPANVous avez compris quil tait possible de dfinir des informations destyle pour pratiquement tous les lments HTML. Deux lments, DIVet SPAN, mritent cependant des mentions particulires.La plupart des lments HTML possdent dj une mise en forme intgre . Un paragraphe de texte place une ligne avant et aprslui-mme, et utilisera une police diffrente de celle des autres lmentsdans certains navigateurs.Dans la mesure o les feuilles de style sont supposes combiner lesindications structurelles et les indications de mise en forme, il fallaitcrer des lments neutres . Llment DIV est un lment de typebloc, ce qui signifie quune ligne sera insre avant et aprs lui. Entermes de structure, il ne correspond quau souhait de lui voir prsenterun aspect particulier, diffrent du comportement des lments destructure classique. Il ne possde pourtant aucune autre mise en formeparticulire par dfaut, si bien que le texte qui y figure apparatra commetexte par dfaut (sauf sil est spcifi autrement).SPAN fonctionne de la mme faon, si ce nest quil sagit dun lmentligne. Ces deux lments peuvent tre dfinis dans une feuille de stylecomme nimporte quel autre lment.En consquence, vous pouvez utiliser ces lments pour insrer desstyles conus entirement sur la structure de la page, plutt que selon seslments de conception. Par exemple, si la premire section de votre288 LE GUIDE COMPLETFeuilles de styleChapitre 8document contient les informations les plus importantes, placez-les dansun lment DIV auquel vous attribuez un style particulier : une couleurspciale, une police caractristique ou un texte en italique. Tout soncontenu, y compris les titres et les images, hriteront du style DIV.De ce fait, lemploi de ces lments conjointement aux feuilles de stylepermet un dveloppement HTML pratiquement illimit, particulirementquand ils sont employs avec les attributs class et id : cela permet dedvelopper potentiellement une infinit de types de prsentationdiffrents. Par exemple :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}Regardez le fichier suivant (volontairement minimaliste), dans lequel lesparties importantes sont prsentes en gras :Listing 8-1 : Fichier STYLEDIVSPAN.html"Elment STYLE avec deslments DIV et SPAN "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}lment STYLE Chapitre 8289LE GUIDE COMPLETElment STYLE avecdes lments DIVet SPANCeci est un paragraphe normal.Ceci est un paragraphe en italiquesCeci est un paragraphe en grasCeci est un paragraphe en italiques grasCeci est un paragraphe normal, avec quelques motsen italiques,quelques-uns en gras et dautresen italiques gras.Examin dans votre navigateur, ce fichier affiche ce qui est prsentdans la figure suivante.Le gain de saisie semble ici relativement faible, mais imaginez que vousayez modifier la taille et le type de la police, sa couleur, lalignement,etc.Remarquez en outre dans cette figure que les lments DIV des classesit, g et itg hritent du style dfini pour llment gnrique DIV : ici,la taille de police et le centrage. Nous reviendrons par la suite sur cettenotion dhritage, mais sachez ds prsent quun style hrite descaractristiques par dfaut de son style parent.Figure 8.4 :Dfinition dun style pour des classesdlments DIV et SPAN290 LE GUIDE COMPLETFeuilles de styleChapitre 8Attribut mediaHTML permet aux auteurs de spcifier les documents qui exploitent lescaractristiques du mdium sur lequel le document doit tre restitu (parexemple : cran graphique, cran de tlvision, appareil de poche,navigateur synthse vocale, appareil tactile braille, etc.). Cela ouvreaux utilisateurs laccs aux pages Web au moyen dune grande varitdappareils.Les feuilles de style sappliquent un mdium spcifique ou ungroupe de mdias. Une feuille de style prvue pour un cran peut treventuellement utilisable pour limpression, mais sera de peu dutilitpour un navigateur synthse vocale. Cette spcification permet dedfinir les catgories gnrales de mdias auxquelles peut sappliquerune feuille de style donne. Ceci permet aux agents utilisateurs dviterla recherche de feuilles de style inappropries. Les langages de feuillesde style peuvent inclure des mcanismes dcrivant les dpendances auxmdias dans une mme feuille de style.Lattribut media de llment STYLE spcifie le mdia de destinationdsir pour les informations de style. Cela peut tre un descripteur demdia unique ou une liste de descripteurs, spars par des virgules. Lavaleur 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 significations de celles-ci sont prsentesdans le tableau suivant.Tableau 8.1 : Descripteurs de mdiasDescripteur demdiumButscreen crans dordinateurs non paginstty Priphrique utilisant une grille de caractres fixe,comme un tlex.tv Priphriques de type tlvisionprojection Vidoprojecteurshandheld Priphriques tenus la main (en principe cran depetite taille et faible bande passante)lment STYLE Chapitre 8291LE GUIDE COMPLETTableau 8.1 : Descripteurs de mdiasDescripteur demdiumButprint Matriaux opaques pagins et documents vus lcran en mode Aperu avant impressionbraille Priphrique rendu tactile brailleembossed Imprimantes pagination braillespeech Synthtiseurs de parole. Anciennement aural en CSS2.0.all Tous priphriquesPar exemple, les dclarations des exemples suivants sappliquent auxlments H1. Pour une projection dans une runion de travail, toutesleurs instances apparatront en bleu. Pour une impression papier, toutesles instances seront centres.H1 {color: blue}H1 {text-align: center}Le choix du support est particulirement intressant quand il sappliqueaux feuilles de style externes, dans la mesure o les agents utilisateurspeuvent conomiser du temps en ne chargeant partir du rseau que lesfeuilles de style qui concernent le priphrique courant. Nousreviendrons donc sur ce sujet lors de ltude des feuilles de styleexternes.Masquage du contenu de llment STYLELes agents utilisateurs qui ne reconnaissent pas les feuilles de style ou lelangage de feuille de style spcifique employ par un lment STYLEdoivent dissimuler le contenu de llment STYLE. La restitution ducontenu de cet lment en tant que partie du texte du document constitueune erreur. Certains langages de feuilles de style grent une syntaxepour dissimuler le contenu aux agents utilisateurs non conformes. Cestle cas de CSS.1 Revenez dans le Bloc-Notes au fichier accueil.html.292 LE GUIDE COMPLETFeuilles de styleChapitre 82 Modifiez son numro de version :3 Modifiez comme suit llment STYLE :5 Enregistrez le fichier dabord sous le nom accueil_3_8_4.html, puissous le nom accueil.html.Ouvrez le fichier index.html dans votre navigateur. Vous devriez obtenirquelque chose de similaire ce qui est prsent dans la figure suivante,soit quelque chose de parfaitement identique ce qui tait prsent danscelle-ci.La seule diffrence est quun agent utilisateur qui ne reconnat pasllment STYLE naffichera pas son contenu comme du texte.Figure 8.5 : Le masquage optionnel du contenu de llment STYLE restesans consquence si lagent utilisateur reconnat cet lmentlment STYLE Chapitre 8293LE GUIDE COMPLETEn poussant le raisonnement propos de la sparation de la structure etde la prsentation sa conclusion logique, la sparation doit tre encoreplus drastique et les styles dfinis dans une ou plusieurs feuilles de styleexternes. Cest ce que nous allons examiner maintenant.8.4. Feuille de style externeOutre lobjectif de sparation de la structure et de la prsentation,dexcellentes raisons incitent employer des feuilles de style :j Il est possible de partager des feuilles de style entre plusieursdocuments et/ou sites.j Une feuille de style peut tre modifie sans quil soit ncessairede modifier le document.j Les agents utilisateurs peuvent charger les feuilles de styleslectivement, en fonction des descriptions des mdias.Cela a toujours t et reste une des recommandations fondamentales dela spcification CSS. Le principal avantage est quil suffit de modifierune feuille de style externe pour modifier laspect gnral du site. Celaest fort pratique si vous utilisez un modle gnral, chaque page pouvanttoujours, si ncessaire, possder un aspect particulier grce aux classeset aux identifiants.Comme cela a t mentionn plus tt, il est possible de lier une feuillede style externe nimporte quel document Web. Une feuille de styleFigure 8.6 : Dfinition dun style pour une classe dlments particulire294 LE GUIDE COMPLETFeuilles de styleChapitre 8externe sadapte particulirement bien aux sites de grande taille : il suffitde modifier un fichier pour affecter lintgralit du site. En combinaisonavec un modle de page Web, cela facilite lorganisation et lastandardisation du site.Une feuille de style nest rien dautre quun fichier texte qui indique lagent utilisateur comment restituer votre code HTML. Elle complteles lments standard : si llment H1 signale un titre, la balise correspond un titre vert. Une feuille destyle externe emmne HTML un pas plus avant dans la sparationrussie entre logique de travail et logique de prsentation.Pour crer une feuille de style externe, dbutez par un fichier texteordinaire. Il nest pas besoin dutiliser un quelconque lment ou balise :saisissez simplement vos proprits la vole, exactement comme sielle taient incluses dans llment STYLE dun fichier HTML.Comme nous lavons vu prcdemment, un style se compose deproprits qui possdent des valeurs. Pour le paragraphe vert, laproprit est color et sa valeur est green. Vous allez crer votrepremire feuille de style.1 Ouvrez un document vierge dans le Bloc-Notes. Saisissez ce quisuit (vous pouvez galement effectuer un copier-coller du contenude llment STYLE du fichier accueil.html, puisque lesinformations 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 niouverture ni fermeture. Les commentaires sont encadrs desymboles /* et */ : un vieux souvenir de syntaxe deprogrammation.2 Enregistrez ce fichier sous le nom style.css.Attention, un fichier de feuille de style doit toujours comporterune extension .css.Feuille de style externe Chapitre 8295LE GUIDE COMPLET3 Ouvrez le fichier accueil.html.4 Modifiez son numro de version :5 Remplacez llment STYLE par llment LINK suivant :6 Enregistrez le fichier dabord sous le nom accueil_3_8_5.html, puissous le nom accueil.html.Ouvrez le fichier index.html dans votre navigateur. Vous devriezobtenir quelque chose de similaire ce qui est prsent dans la figuresuivante, soit encore une fois quelque chose de parfaitement identique ce qui tait prsent Figure 8.3 ou Figure 8.5. La seule diffrence est queles styles sont dsormais dfinis dans une feuille de style externe.Pour tirer un profit maximum de notre feuille de style, il faut lappliqueraux autres pages de notre site, en compltant si besoin les diffrentesspcifications. Commenons par le fichier le plus simple, passions.html.1 Ouvrez passions.html dans le Bloc-Notes.2 Modifiez son numro de version :3 Ajoutez llment LINK identique celui du fichier accueil.html.Figure 8.7 :Le site employantdsormais une feuillede style externe296 LE GUIDE COMPLETFeuilles de styleChapitre 84 Supprimez les attributs align des lments H1 et H2, puisquilssont dsormais superflus.5 Enregistrez le fichier sans modifier son nom.Ouvrez le fichier index.html dans votre navigateur, puis cliquez dans labarre de navigation sur Mes passions. Vous devriez obtenir quelquechose de similaire ce qui est prsent dans la figure suivante,cest--dire un aspect beaucoup plus proche de celui de la pagedaccueil.Les pages Ma rgion et Ma famille sont un peu plus complexes,puisquelles font appel des tableaux. Nous devons donc dfinir unstyle de tableau dans la feuille de style.1 Ouvrez style.css dans le Bloc-Notes.2 Ajoutez les dfinitions de style suivantes la fin du fichier :TABLE {width: 100%; border-width: 2;border-style:double; text-align: center}CAPTION {font-size: 24px; font-weight: bold;text-align: center;}TH {font-size: 20pt; border-width: 1;border-style: solid; text-align: center}TD {font-size: 14pt; border-width: 1;border-style: solid; text-align: center}TD.droit {font-size: 14pt; text-align: right}3 Enregistrez le fichier sans modifier son nom.4 Ouvrez region.html dans le Bloc-Notes.5 Modifiez son numro de version :Figure 8.8 :Page Mes passions, employantdsormais la feuille de styleexterne.Feuille de style externe Chapitre 8297LE GUIDE COMPLET6 Ajoutez llment LINK identique celui des fichiers accueil.htmlet passions.html :7 Supprimez les attributs align et border du premier tableau, etles attributs align, border et width du second tableau.8 Remplacez les attributs align="right" de ses trois lments TDpar un attribut class="droit", comme dans lexemple suivant :Temp. Max.18 9 Enregistrez votre fichier sans modifier son nom.Ouvrez le fichier index.html dans votre navigateur, puis cliquez dans labarre de navigation sur Ma rgion.Similaire, mais pas identique : nous avons en ralit lgrement modifile contenu de ce fichier, en y ajoutant du contenu et en remplaant lescaractres accentus par les entits adquates. Voici son listing complet,les modifications tant signales en gras.Figure 8.9 : Page Ma rgion, employant dsormais la feuille de styleexterne.298 LE GUIDE COMPLETFeuilles de styleChapitre 8Listing 8-2 : region.html version 3.8.1Ma rgionMa rgionCoucher de soleil sur le lac de LincielMa rgion est clbrepour ses forts, ses montagnes et ses lacs.Les fortsLlanowarLothlorienLes montagnesMontagnes bleuesMoriaLes lacsCaldera de RissLac de LincielFeuille de style externe Chapitre 8299LE GUIDE COMPLETDonnes climatologiquesTemp. Max.18 Temp. min.6,6 Pluie682 mmIci, une autre image Occupez-vous maintenant du dernier fichier, famille.html.1 Ouvrez famille.html dans le Bloc-Notes.2 Modifiez son numro de version :3 Ajoutez llment LINK identique celui des fichiersaccueil.html, passions.html et region.html :4 Supprimez les attributs align de llment H1. Supprimez lesattributs border, align, cellspacing, cellpadding etwidth du tableau.5 Supprimez les attributs valign des lments TD et remplacez lesattributs align="right" par un attribut class="droit",comme dans lexemple suivant :Temp. Max.18 6 Enregistrez votre fichier sans modifier son nom.Ouvrez le fichier index.html dans votre navigateur, puis cliquez dans labarre de navigation sur Ma famille (voir Figure 8.10).Toutes nos pages prsentent dsormais un aspect homogne. Imaginezmaintenant que vous vouliez soudainement modifier la couleur du cadreplac autour de llment H1, et dfinir un retrait droite et gauche decelui-ci. Rien de plus simple !300 LE GUIDE COMPLETFeuilles de styleChapitre 81 Ouvrez le fichier style.css dans le Bloc-notes.2 Modifiez comme suit la dfinition du style de llment H1 :H1 {margin-left: 15%; margin-right: 15%; border-width: 1;border: solid; text-align: center;font-size: 32pt; color: blue}3 Enregistrez votre fichier.Rafrachissez votre navigateur ou ouvrez nouveau index.html. Cliquezsuccessivement sur les liens Ma famille et Mes passions. Tous leslments H1 ont t modifis.Figure 8.10 :Page Ma famille, employantdsormais la feuille de styleexterne.Figure 8.11 : Une unique modification du fichier de feuille de style serpercute sur tous les lments H1Feuille de style externe Chapitre 8301LE GUIDE COMPLETUne seule modification du fichier de feuille de style se rpercute surlensemble du site.Cet exemple est dune simplicit dconcertante. Pour voir quel pointune feuille de style bien conue peut profondment modifier laspectdun site, visitez www.csszengarden.com/ et cliquez sur les diffrentsmodles proposs dans le cadre de droite : comme le montrent les deuxcopies dcran qui suivent, les diffrences peuvent tre phnomnales !Figure 8.12 :Une unique modification du fichier defeuille de style se rpercute sur tous leslments H1Figure 8.13 :Une unique modification du fichier de feuille destyle se rpercute sur tous les lments H1Figure 8.14 :Exemple de leffet des feuilles destyle proposes parcsszengarden.com302 LE GUIDE COMPLETFeuilles de styleChapitre 8Nous reviendrons bientt plus en dtail sur les diffrentes proprits desfeuilles de style. Pour le moment, penchons-nous plus avant surllment LINK.lment LINKComme vous lavez vu dans les exemples prcdents, vous liez unefeuille de style un document HTML laide de llment LINK. Lasyntaxe de celui-ci est la suivante :href est comme dhabitude une URL vers le fichier de feuille de style.Il semblerait toutefois que les URL absolues se comportent parfois defaon erratique : prfrez les feuilles de style loges sur le serveur devotre site.HTML permet dassocier un nombre quelconque de feuilles de styleexternes un document. Le langage de feuille de style dfinit commentFigure 8.15 : Autre exemple de leffet des feuilles de style proposes parcsszengarden.comFeuille de style externe Chapitre 8303LE GUIDE COMPLETplusieurs feuilles de style externes interagissent (par exemple, les rglesde cascade de CSS).Il est ainsi possible de spcifier plusieurs feuilles de style mutuellementexclusives, alors nommes feuilles de style alternatives . Cela permetdoffrir aux lecteurs plusieurs prsentations dun document. Lutilisateurpeut slectionner sa feuille de style favorite parmi celles-ci en fonctionde ses prfrences. Par exemple, une feuille de style pour la restitutiondes documents compacts dans une petite taille de police, ou une autrespcifiant une taille de police plus grande pour une meilleure lisibilit.Des feuilles alternatives peuvent viser des utilisateurs ou des mdiasspcifiques. Les agents utilisateurs doivent permettre aux utilisateurs dechoisir entre plusieurs feuilles de style alternatives ainsi que dedsactiver les feuilles de style.Il est possible de spcifier une feuille de style prfre. Les agentsutilisateurs doivent appliquer la feuille de style prfre de lauteur, saufsi lutilisateur slectionne une autre alternative.Plusieurs feuilles de style alternatives (y compris la prfre) peuventtre regroupes sous un seul nom de style. Lorsquun utilisateurslectionne un style nomm, lagent utilisateur doit appliquer toutes lesfeuilles de style qui portent ce nom, mais pas celles qui portent un nomdiffrent. Vous verrez plus loin comment nommer un groupe de feuillesde style.Il est galement possible de spcifier des feuilles de style persistantes : elles sont appliques par lagent utilisateur en sus desventuelles feuilles de style alternatives.Les agents utilisateurs doivent respecter les descripteurs de mdium lorsde lapplication dune feuille de style. Ils doivent galement permettreaux utilisateurs de dsactiver entirement les feuilles de style delauteur : aucune feuille de style nest applique, quelle soit persistanteou alternative.Les attributs de llment LINK jouent les rles suivants :j La valeur de lattribut rel indique si la feuille de style estpersistante, prfre ou alternative. Si cet attribut possde lavaleur "stylesheet", la feuille de style est persistante enlabsence dattribut title et prfre si lattribut title estspcifi. La feuille de style est en revanche alternative si lattribut304 LE GUIDE COMPLETFeuilles de styleChapitre 8rel possde la valeur "alternate stylesheet" et que lafeuille est nomme laide de lattribut title.j La valeur de lattribut type indique le langage de la ressourcerelie (la feuille de style). Cela vite lagent utilisateur decharger une feuille de style dans un langage de feuille de stylenon reconnu.j La valeur de lattribut href est un URI, qui indique lalocalisation du fichier de la feuille de style.Les agents utilisateurs devraient fournir aux utilisateurs les moyens depasser en revue et de choisir les feuilles de style alternatives dans uneliste. Mieux vaut employer la valeur de lattribut title comme nompour chaque option.Vous pouvez galement employer un lment META pour dfinir lafeuille de style prfre du document. Par exemple, pour dfinir commefeuille de style prfre une feuille nomme "favorite", placez ce quisuit dans llment HEAD :Si plusieurs dclarations META spcifient la feuille de style prfre,seule la dernire est retenue. En revanche, si plusieurs lments LINKspcifient une feuille de style prfre, seul le premier est retenu. Lesfeuilles de style prfres au moyen dlments META ont priorit surcelles spcifies avec llment LINK.Prise en compte du mdiumPour tenir compte du mdium dans la liaison dune feuille de style,servez -vous de lattribut media dans llment LINK. Par exemple :Cet lment spcifie que cette feuille de style sapplique auxpriphriques dimpression et aux priphriques tenus la main (commeles tlphones portables et les assistants lectroniques personnels).Vous pouvez toutefois galement utiliser la rgle @media lintrieurdune feuille de style afin que celle-ci puisse transmettre desinformations diffrents types de mdias.Feuille de style externe Chapitre 8305LE GUIDE COMPLET@media print {BODY {font-size: 10pt}}@media screen {BODY {font-size: 12pt}}Reportez-vous au tableau de la page 291 pour voir la liste desdescripteurs de mdium autoriss.8.5. Proprits de feuille de styleAprs avoir vu comment crer une feuille de style, tant localequexterne, il est temps dexaminer plus en profondeur les propritsquil est possible de dfinir dans une feuille de style. Souvenez-vousque, si HTML nest en rien li un langage de feuille de stylespcifique, nous traitons uniquement ici du langage CSS.Proprits de modification de texteet de policeLes proprits les plus simples concernent la prsentation du contenutextuel dun documentDepuis son invention, llment FONT posait quelques problmes auxconcepteurs de pages Web. Il reste trs mal support par les anciensnavigateurs et entre parfois en conflit avec llment BODY. Les feuillesde style rsolvent fort adroitement les problmes poss par FONT. Lesutilisateurs seront dans un proche avenir en mesure de dfinir une feuillede style par dfaut pour leur navigateur, qui contiendra non seulementles couleurs et les tailles de police mais galement les espacements, lesbordures et les indentations. Ces lments peuvent dj tous trespcifis laide dune feuille de style.Les proprits signales ici peuvent tre appliques tout lment quipossde un contenu texte.Pour modifier la couleur dune portion de texte, employez la propritcolor. Par exemple :place le paragraphe en rouge sombre (#990000).306 LE GUIDE COMPLETFeuilles de styleChapitre 8Assurez-vous de bien fermer tout lment ayant recours des styles,faute de quoi ceux-ci sappliqueront llment suivant.Pour modifier la couleur de fond, utilisez backgroundcolorpour un texte rouge sombre sur fond bleu clair. Une couleur de fondapplique du texte fait ressortir le texte en surbrillance.La proprit font recouvre plusieurs proprits apparentes :j fontstyle dfinit le type de la police. Les valeurs possiblessont normal, italic et oblique.j fontweight dfinit la graisse de la police. Les valeurspossibles sont les incrments successifs de 100 900 : normal(quivaut 400), bold (quivaut 700), bolder (graissesuprieure celle assigne une police, plus grasse que cellehrite par la police. Sil ny en a pas, la valeur de graisse de laproprit prend la valeur numrique suprieure, laspect de lapolice 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 lapolice. Sil ny en a pas, la valeur de graisse de la proprit prendla valeur numrique infrieure, laspect de la police ne changeantpas. Si la valeur hrite est dj gale 100, la valeur rsultantedevient galement 100).j fontsize dfinit la taille de la police. La valeur peut tre unetaille absolue : une taille en points ou un des mots-cls xxlarge,xlarge, large, medium, small, xsmall, xxsmall. Pourun cran, il est conseill un facteur dchelle de 1,2 entre lesvaleurs conscutives de la table. Ainsi, si la valeur mediumcorrespond 12pt, la valeur large devrait correspondre 14.4pt. Les facteurs dchelle peuvent varier selon les mdiasconsidrs. Par ailleurs, lagent utilisateur devrait prendre encompte la qualit et la disponibilit des polices au moment ducalcul de cette table. Celle-ci peut aussi diffrer dune famille depolices une autre. La valeur peut galement tre une valeurrelative, grce aux mots-cls larger et smaller (ce quicorrespond un dplacement dune case dans lchelleprcdente), ou en pourcentage, par rapport la taille de la policede llment parent.Proprits de feuille de style Chapitre 8307LE GUIDE COMPLETj fontfamily modifie le type de police utilis dans une page.Vous pouvez dfinir une fonte spcifique, comme Arial ouHelvetica, ou vous contenter dutiliser un nom gnrique,comme sansserif ou serif. Vous pouvez dfinir des famillesde polices : le navigateur essaye alors chaque police son tour etretient la premire quil comprend. Ainsi, avec comme stylefont-family: Arial, Helvetica, sans-serif ;le navigateur essaye dabord la police Arial (installe sur laplupart des PC), puis la police Helvetica (prsente sur la plupartdes Macintoshs) et ensuite seulement la famille gnrique Sans-serif, comprenant toutes les fontes dites non proportionnelles(contrairement Arial et Helvetica, qui sont des policesproportionnelles). Parmi les autres familles gnriques, voustrouvez serif, cursive, fantasy et monospace. Les famillesde polices sont spares par des virgules, mais vrifiez quil nyait pas de virgule avant le point-virgule final.Units de tailleLes lments peuvent avoir recours huit units diffrentes.j Les units relatives :em (taille de la fonte actuelle), ex (hauteur de la fonte actuelle).j Les units absolues :px (pixel), in (pouce), cm (centimtre), mm (millimtre), pt (point. Unpoint CSS2 mesure 1/72e de pouce, soit environ 0,35 mm) et pc (pica, 12points ou 4,15 mm).Les units absolues devraient tre rserves aux cas pour lesquels vousconnaissez les dimensions physiques du priphrique de sortie.Il est souvent possible dabrger des proprits apparentes en lesrassemblant dans une dfinition unique, ce qui est souvent nommraccourci. Cest le cas pour la proprit font. Par exemple, pourspcifier quun lment doit se prsenter dans une fonte Arial ouSans-serif en gras italique de petite taille, vous dfinissez normalementcomme suit les diffrentes proprits :{font-style: italic ; font-weight: bold ;font-size: small ; font-family: Arial, sans-serif ; }Vous pouvez cependant dfinir en une seule fois toutes les propritsrelatives aux polices. Vous devez pour cela dfinir toutes ces proprits308 LE GUIDE COMPLETFeuilles de styleChapitre 8selon un ordre particulier, en ne faisant apparatre que leurs valeurs.Lordre adquat est le suivant :font-style font-weight font-size font-familyCest ainsi que, dans lexemple prcdent, vous auriez pu utiliser :{font: italic bold small Arial, sans-serif}Lintrt de cette technique tient son gain de place, au prix dune pertede lisibilit. Les proprits individuelles sont spares par des espacestandis que les valeurs multiples applicables une proprit (comme lesvaleurs de fontfamily) sont spares par des virgules.Vous dcouvrirez par la suite de nombreux autres exemples de notationraccourcie.Une autre proprit de police intressante, mais qui nappartient pas lanotation raccourcie de la proprit font, est fontvariant. Dans unepolice en petites capitales, les lettres minuscules prsentent un aspectsimilaire aux lettres majuscules, avec toutefois une taille rduite et desproportions lgrement diffrentes. Ce type de police porte le nom depolice bicamrale (qui possde deux casses, comme les critures latines).Les valeurs possibles sont normal (une police non tiquete commetant en petites capitales) ou smallcaps (qui spcifie une policetiquete comme tant en petites capitales). En labsence dune tellepolice, les agents utilisateurs devraient en effectuer la simulation, parexemple en slectionnant une police normale et en remplaant les lettresminuscules par des majuscules mises lchelle. En dernier ressort, leslettres majuscules inchanges dune police normale peuvent sesubstituer aux petites capitales : le texte apparat alors entirement enmajuscules.Le tableau suivant dresse la liste des principales proprits de texte et depolice.Tableau 8.2 : Principales proprits de texte et de police de feuillede style CSSProprit Valeur(s) Butbackgroundcolorcouleur hexadcimale ou nom Couleur darrire-plancolor couleur hexadcimale ou nom Couleur de texteProprits de feuille de style Chapitre 8309LE GUIDE COMPLETTableau 8.2 : Principales proprits de texte et de police de feuillede style CSSProprit Valeur(s) Butfont fontstyle fontweightfontsize fontfamilyProprits depolicefontstyle normal, italic, oblique Style de la policefontweight Incrments de 100, normal,bold, bolder, lighterGraisse de la policefontsize taille en points, xxlarge,xlarge, large, medium,small, xsmall, xxsmall,larger, smaller, pourcentageTaille de la policefontfamily tout nom de police, serif,sansserif, cursive,fantasy, monospacePolice(s) oufamille(s) de polices employertextalign left, right, center, justify Alignement du textetextdecorationnone, underline, overline,linethrough, blinkEnrichissement dutextetextindent longueur en points, longueur enpourcentageIndentation du texteNous avions employ les proprits textalign, fontsize etfontweight dans plusieurs des spcifications de notre feuille de style,ainsi que color et fontvariant une fois chacune :/* style.css : Feuille de style pour mon site */H1 {margin-left: 15%; margin-right: 15%; border-width: 1;border-style: solid; text-align: center;font-size: 32pt; color: blue}H2 {font-size: 20pt; text-align: center}P {font-size: 16pt; text-align: center}P.legal {font-size: 8pt; font-variant: small-caps}UL {font-size: 16 pt; text-align: center}LI {font-size: 14pt; text-align: left; margin-left: 40%}ADDRESS {text-align: center}TABLE {width: 100%; border-width: 2px; border-style: double;text-align: center}CAPTION {font-size: 24px; font-weight: bold;text-align: center;}TH {font-size: 20pt; border-width: 1px;border-style: solid; text-align: center}TD {font-size: 14pt; border-width: 1px;border-style: solid; text-align: center}TD.droit {font-size: 14pt; text-align: right}310 LE GUIDE COMPLETFeuilles de styleChapitre 8Reprsentation des lments laide dunstyleVous connaissez dj les lments bloc et la faon dont ils sepositionnent lcran. laide de tableaux, vous pouvez tricher quant cette disposition, bien que cela soit un peu dlicat et demande demultiples ajustements. Jusqu maintenant, un conflit fondamentalexistait en HTML entre une bonne compatibilit internavigateurs et lapossibilit dafficher des informations sous forme graphique.Les feuilles de style permettent dtablir un compromis entre vosexigences de prsentation et les souhaits de votre public. Vous pouvezdfinir les lments bloc au sein de la feuille de style dans des propritsde botes CSS et dterminer quand et o llment sera affich.Deux catgories principales de proprits doivent tre distingues cestade : celles intrinsques llment, qui dfinissent ses caractristiquesinternes, et celles relatives la page ou au flux du code HTML. Cesdernires dfinissent la position de llment lcran (ou le cas chantsur le mdium concern).Proprits intrinsques dun lmentTout lment CSS se comporte comme une imbrication successive dequatre botes :j La bote externe est laire de marges. Elle occupe le maximum delespace disponible (ou spcifi). Ces marges transparentes, dontles dimensions sont gres par la proprit margin, dfinissentlespace transparent entre le bord de lcran (ou dun autrelment) et llment actif.j lintrieur de laire de marges se trouve laire de bordures.Gre par la proprit border, elle reprsente les borduresaffectes llment actif.j Vient ensuite laire despacement : la surface entre le contenu et lalimite intrieure de la bordure. Elle est gre par la propritpadding.j Enfin, la bote la plus intrieure est la bote de contenu. Ellerenferme le contenu de llment actif.Proprits de feuille de style Chapitre 8311LE GUIDE COMPLETLa proprit margin et ses proprits apparentes dfinissent un espacetransparent entre le bord de lcran (ou dun autre lment) et llmentcourant. Vous pouvez dfinir la largeur (ou la hauteur) de chaque margeou bien attribuer toutes les marges une mme valeur. Par exemple,{margin: 10px}cre une marge de 10 pixels autour de llment bloc. Vous pouvezspcifier sparment la taille de chaque marge en faisant suivre lattributdun 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 infrieuredun pixel, mais des marges droite et gauche de 10 pixels.Vous pouvez spcifier 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) ouchoisir la valeur auto.Comme pour la proprit font, les proprits de bote possdentgalement une forme raccourcie, plus simple mais moins lisible. Pour laproprit margin, les valeurs doivent tre places dans lordre suivant :{margin: haut droit bas gauche}Figure 8.16 : Bote CSS312 LE GUIDE COMPLETFeuilles de styleChapitre 8Remarquez que seuls des espaces sparent les valeurs individuelles.Lexemple prcdent, avec une marge dun pixel en haut et en bas et unemarge de 10 pixels droite et gauche, pourrait ainsi tre crit :{margin: 1px 10px 1px 10px}Dans certains cas, des marges adjacentes peuvent fusionner. Selon laspcification CSS 2.1, les marges horizontales ne fusionnent jamais, demme que les marges verticales dlments positionns de faonabsolue, flottants, en ligne (inline) ou avec un attribut overflow fix autre chose que visible, ainsi que les marges de llment racine.Deux ou plus marges verticales adjacentes situes dans le flux normalpeuvent fusionner. La largeur de la marge rsultante est la largeurmaximale de la largeur des marges concernes. Dans le cas de margesngatives, la valeur absolue maximale des marges ngatives est dduitede la valeur maximale des marges positives, ou de zro en labsence demarge positive,Les bordures sont dfinies laide de la proprit border et de sesproprits apparentes :j borderwidth dfinit la largeur de la bordure. Les largeurspeuvent tre dfinies avec les valeurs thin (mince), thick(paisse), medium (moyenne) ou exprimes en points. Vouspouvez dfinir individuellement la largeur de la bordure dechaque ct laide de bordertopwidth, borderrightwidth, borderbottomwidth et borderleftwidth. Lordre abrg de la proprit borderwidth estidentique celui de margin, soit :{border-width: haut droite bas gauche}j borderstyle permet de dfinir un style de bordure. Cetteproprit peut recevoir les valeurs none (aucune), dotted(pointills), dashed (tirets), solid (pleine), double (grasse),groove (cadre grav), ridge (cadre en relief), inset (en 3D eten creux) et outset (en 3D et en relief).j bordercolor est similaire la proprit color dun lment.Elle semploie de la mme faon.La proprit border possde une forme raccourcie, qui permetdappliquer les valeurs transmises toutes les bordures dun mmelment. Lordre respecter est le suivant :{border: border-width border-style color;}Proprits de feuille de style Chapitre 8313LE GUIDE COMPLETVous pouvez galement combiner les notations raccourcies pour nespcifier de valeur que pour la bordure du haut (ou celle de droite, dubas ou de gauche) laide de la proprit bordertop (ou right,bottom ou left) selon cet ordre :{border-top: border-top-width border-style color;}Enfin, la proprit padding utilise la mme syntaxe que la propritmargin, y compris la syntaxe raccourcie. Cest une proprit tablissantun espace vierge autour du contenu de llment, lintrieur de labordure.Les proprits du contenu dun lment sont height et width. Ils sontanalogues aux attributs correspondants et dterminent la hauteur et lalargeur du contenu. Cela signifie que, pour obtenir la taille totale dellment, vous devez ajouter successivement lespacement, la bordureet la marge. Ces proprits acceptent une valeur absolue ou enpourcentage, ainsi que la valeur auto. Le comportement de cettedernire valeur est quelque peu complexe et dpasse la porte de celivre. Reportez-vous la section 10.3, Le calcul des largeurs et desmarges, de la spcification CSS2, ladresse www.yoyodesign.org/doc/w3c/css2/visudet.html#Computing_widths_and_margins Ces proprits nacceptentpas de valeurs ngatives.La proprit overflow permet de dfinir ce qui doit se passer quand lecontenu de llment excde lespace dfini. Les valeurs acceptablessont visible (le contenu nest pas tronqu et peut tre reprsent horsde la bote du bloc), hidden (le contenu est tronqu et aucunmcanisme de dfilement nest fourni pour voir la partie rogne. Lataille et la forme du reliquat du rognage peuvent tre spcifies par laproprit clip), scroll (le contenu est tronqu et lagent utilisateurfournit si possible un mcanisme de dfilement visible lcran, telquune barre de dfilement. Ce dispositif apparat que le contenu dellment soit tronqu ou non) ou auto.Mme lorsque la valeur de la proprit overflow est visible, lecontenu peut tre rogn par le systme dexploitation pour tenir dans lafentre du document de lagent utilisateur.Le tableau suivant rsume ces proprits, leurs valeurs et leurs effets.314 LE GUIDE COMPLETFeuilles de styleChapitre 8Tableau 8.3 : Proprits intrinsques dun lmentProprit Valeur Exemple Effetwidth longueur,pourcentage ouautowidth:100ptImpose llmentune largeur de centpoints. Peut ainsiremplacer untableau.height longueur ou auto height:20ptImpose llmentune hauteur de vingtpointsmargin longueur,pourcentage ouautomargin:10ptCre une marge dedix points autour dellmentborderwidththin, medium,thick, longueurborderwidth:thinthickthinthickCre une borduremince en haut et enbas, et une bordurepaisse sur lescts.borderstylenone, dotted,dashed, solid,double , groove,ridge, inset ououtsetborderstyle:doubleCre une bordurepaisse autour dellmentborder border-widthborder-styleborder-colorborder:4ptdouble#000000Ajoute une margedouble de quatrepoints autour ducontenupadding longueur,pourcentage ouautopadding:10pxAjoute unespacement de dixpixels entre lecontenu et labordureNous avions employ plusieurs de ces proprits dans notre fichierstyle.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}Proprits de feuille de style Chapitre 8315LE GUIDE COMPLETLI {font-size: 14pt; text-align: left; margin-left: 40%}ADDRESS {text-align: center}TABLE {width: 100%; border-width: 2px; border-style: double;text-align: center}CAPTION {font-size: 24px; font-weight: bold;text-align: center;}TH {font-size: 20pt; border-width: 1px; border-style: solid;text-align: center}TD {font-size: 14pt; border-width: 1px; border-style: solid;text-align: center}TD.droit {font-size: 14pt; text-align: right}Incompatibilits de navigateurs anciensLes feuilles de style ne sont pas reconnues par tous les agentsutilisateurs. 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. Ilfallait employer la place topPadding, rightPadding,bottomPadding ou leftPadding.j La proprit margins des feuilles de style ntait pas reconnue. Ilfallait employer leftMargin, rightMargin ou bottomMargin.j Les proprits width, height et border appliques aux images dansles feuilles de style ntaient pas reconnues.Vous devez donc tre conscient du fait que les utilisateurs disposant denavigateurs anciens peuvent ne pas voir votre site comme vous lesouhaitez.Proprits de positionnement dun lmentCes proprits dfinissent lemplacement dapparition de llment actifsur le mdium considr. Elle sont dsormais reconnues par la plupartdes navigateurs (Internet Explorer depuis la version 3.0 et Netscapedepuis sa version 4.0).Le meilleur moyen de les dcouvrir consiste prendre un exemple.Examinez le listing suivant :Listing 8-3 : position0.html"Positions CSS dun lment"316 LE GUIDE COMPLETFeuilles de styleChapitre 8Dmonstration desproprits de positionnement CSSPremier lment PCeci est un paragraphe de texte normal.Deuxime lmentPCeci est un paragraphe de texte normal.Troisime lmentPCeci est un paragraphe de texte normal.Quatrime lmentPCeci est un paragraphe de texte normal.Rien de bien excitant : la rptition de quatre paragraphes de texte, danslesquels est insre une image. En labsence de spcification de positionparticulire, les lments respectent le flux normal du code. Enexaminant ce fichier dans votre navigateur, vous observez quelque chosedanalogue la figure suivante : un empilement des quatre paragraphes,centrs en raison de lattribut style="textalign: center" dellment BODY.Proprits de feuille de style Chapitre 8317LE GUIDE COMPLETModifions maintenant ce fichier, en ajoutant des attributs style auxtrois derniers paragraphes, ainsi que quelques commentaires. Nousobtenons le listing suivant, dans lequel les modifications sont notes engras :Listing 8-4 : position.html"Positions CSS dunlment"Dmonstration desproprits de positionnement CSSPremier lment PFlux normal.Ceci est un paragraphe de texte normal.Deuxime lmentFigure 8.17 : Flux HTML normal318 LE GUIDE COMPLETFeuilles de styleChapitre 8PLe paragraphe est place dans un cadreflottant gauche.Ceci est un paragraphe de texte normal.Troisime lmentPLe paragraphe est dfini comme devant safficheren haut et droite de llment prcdent.Ceci est un paragraphe de texte normal.Quatrime lmentPLe paragraphe saffiche de faon absolue par rapport lcran.Ceci est un paragraphe de texte normal.En examinant ce fichier dans votre navigateur, vous observez quelquechose danalogue la figure suivante : les quatre paragraphes sontdsormais rpartis lcran dans un ordre diffrent de celui de leurapparition dans le code.Figure 8.18 :Positionnements dlmentsProprits de feuille de style Chapitre 8319LE GUIDE COMPLETAnalysons un peu ce qui se passe :j Le premier paragraphe respecte le flux HTML normal. Il est entren dessous du titre, exactement comme dans la copie dcranprcdente.j Le second paragraphe est plac dans une bote flottantepositionne gauche : il est retir du flux normal.j Le troisime paragraphe se voit attribuer une position relative parrapport llment prcdent : lgrement plus haut etfranchement plus droite.j En revanche, le quatrime paragraphe se voit attribuer uneposition absolue par rapport lcran : en haut et gauche decelui-ci.Le dernier paragraphe est particulirement intressant. Pour vous enconvaincre, rduisez la largeur de la fentre de votre navigateur, etfaites, si ncessaire et possible, dfiler la fentre : le quatrimeparagraphe se dplace en consquence et occupe toujours le mmeemplacement lcran !Cet exemple devrait vous ouvrir un certain nombre de possibilits. Toutdabord, plus besoin de tableaux, puisque vous pouvez dfinirlemplacement dun lment en fonction de llment prcdent.Ensuite, un lment dfini en position absolue (par exemple en haut gauche) peut constituer un magnifique logo, toujours affich au mmeemplacement, mme lorsque lutilisateur fait dfiler une pageRemarquez toutefois que ces types de positionnement peuvent amenerun recouvrement des diffrents lments, ce qui nest gureFigure 8.19 :Un lment positionnde faon absolueoccupe toujours lamme position lcran320 LE GUIDE COMPLETFeuilles de styleChapitre 8souhaitable. Heureusement, comme vous allez le voir, il existe desmoyens de pallier ce problmeRegardons de plus prs les diffrentes proprits mises en uvre lors dupositionnement dlments.La proprit float spcifie quune bote doit tre flottante gauche, droite ou pas du tout. Elle peut tre spcifie pour tout lment, mais nesapplique quaux lments qui ne sont pas positionns de faonabsolue.La proprit clear (non employe dans cet exemple) indique quelscts dune bote dlment ne peuvent pas tre adjacents une boteflottante antrieure. Elle ne concerne pas les ventuels lments flottants lintrieur de llment concern ou dans dautres contextes de mise enforme. Cest un espacement au-dessus de la marge suprieure dunlment, qui sert pousser verticalement llment au-del de labote flottante, gnralement vers le bas.La proprit position dtermine si la position dun lment estabsolute, relative ou static. Sa valeur par dfaut est static, cequi signifie que llment apparat selon son chargement, en principeselon sa place dans le code source. Une position absolute signifie quela position de llment est fixe par rapport au coin suprieur gauche dumdium (gnralement lcran). Comme nous lavons signal, unlment dot de ce type de position peut recouvrir un autre lment,puisquil est retir du flux normal.Si la proprit position possde comme valeur relative, llmentsera plac en fonction de son parent ou de son voisin. Si llmentparent a recours une position absolute, alors llment relativeapparatra la suite de celui-ci et pourra galement recouvrir dautreslments : il est lui aussi retir du flux normal.Les proprits left et top dfinissent lendroit o llment doit treplac par rapport aux cts de lcran (ou, dans le cas dun lmentenfant, aux cts de llment parent). Les valeurs sont exprimes enpoints ou en pourcentage.Pour grer les possibles recouvrements, servez-vous de la propritzindex. Elle permet de contrler llment devant apparatre au-dessus dun autre en cas de recouvrement de positions absolues : un peucomme les couches dun programme de dessin.Proprits de feuille de style Chapitre 8321LE GUIDE COMPLETclip dfinit un rognage de llment, tandis que visibility permetdtablir 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 tableausuivant.Tableau 8.4 : Proprits CSS de positionnement des lmentsProprit Valeur Exemple Effetfloat left, right, noneou inheritfloat:leftPlace llment dans unrectangle flottant sur lagaucheposition absolute,relative, staticposition:absolutePlace llment lcransans tenir compte desautres lments de lapagetop longueur oupourcentagetop:10ptPlace llment dixpoints du haut dudocument ou dellment parentleft longueur oupourcentageleft:15ptPlace llment quinzepoint de la gauche dudocument ou dellment parentclip shape(topvalue,rightvalue,bottomvalue,leftvalue)clip:rect (510 5 10)Rogne cinq pixels duhaut et du bas, et dixpixels sur les cts.overflow visible,hidden, auto,scrolloverflow:scrollAttribue llment unebarre de dfilement, quilen ait besoin ou non.zindex Entier zindex:1Place dabord le premierlment et empiledessus les suivantsclear none, left, right,both ou inheritClear:leftLa bote est dcale delespace ncessaire pourplacer le bord de labordure suprieure endessous du bordinfrieur de toute boteflottante due unlment antrieur dansle document source.322 LE GUIDE COMPLETFeuilles de styleChapitre 8Une mise en uvre efficace de ces proprits demande souvent pas malde ttonnements. Le rsultat est toutefois souvent la hauteur des effortsengags Souvenez-vous que nous avions dit que les feuilles de stylereprsentaient un aspect avanc de HTML : vous en avez ici une preuve.8.6. Feuille de style en cascadeLes langages de feuille de style en cascade, tel que CSS, autorisentlassemblage des informations de style provenant de plusieurs sources.Pour dfinir une cascade, lauteur spcifie une succession dlmentsLINK et/ou STYLE. Les informations de style se rpandent en cascadeselon lordre dapparition des lments dans la section HEAD.Gare aux mlangesLa spcification HTML 4.01 ne prcise pas la manire dont cascadentles feuilles de style issues de diffrents langages de style. Mieux vautviter de mlanger les langages de feuilles de style.La cascade peut inclure des feuilles de style qui concernent diffrentsmdias. Les lments LINK et STYLE peuvent tous deux tre utilissavec lattribut media. Lagent utilisateur est alors responsable dellimination des feuilles de style qui ne sappliquent pas au mdiumcourant.Cette notion de cascade semble alors poser quelques problmes :comment lagent utilisateur sait-il quelle feuille de style doit treapplique ? Pour le cas dun mdium de sortie, la chose est claire, maisnous avons vu quil pouvait exister plusieurs feuilles de style en cascade(une ou plusieurs feuilles externes, des lments STYLE et des attributsstyle). Cela nous amne la notion dhritage.Cascade et hritageLorsquun agent utilisateur veut restituer un document, il doit identifierles valeurs des proprits de style : la famille de police, le style de lapolice, la taille, la hauteur de ligne, la couleur du texte, etc. Lemcanisme exact dpend du langage de feuille de style, mais ladescription qui suit est gnralement applicable.Feuille de style en cascade Chapitre 8323LE GUIDE COMPLETLe mcanisme de cascade est utilis quand un certain nombre de rglesde style sappliquent toutes directement un lment. Il permet lagentutilisateur de classer les rgles selon leur spcificit pour dterminercelle qui est applicable. Si aucune rgle nest trouve, ltape suivanteva dpendre de la proprit de style : est-elle hritable ? Toutes ne lesont pas. Le langage de feuille de style fournit alors des valeurs pardfaut, utilises en labsence de rgle explicite pour un lmentparticulier.Si la proprit peut shriter, lagent utilisateur examine llmentenglobant immdiat pour voir si une rgle sy applique. Ce processuscontinue jusqu lidentification dune rgle applicable. Ce mcanismeautorise une spcification compacte des feuilles de style. Par exemple,lauteur peut spcifier le type dalignement du texte pour tous leslments de BODY par une seule rgle applique llment BODY. Cestce que nous avions fait dans les fichiers position0.html et position.html :Fondamentalement, tout lment inclus dans un autre hrite du style decelui-ci, moins que la feuille de style ne prcise le contraire. Parexemple, la plupart des lments sont inclus dans llment BODY. Sicelui-ci est dfini comme devant comporter du texte centr de couleurbleue, tous les lments de BODY possderont un texte bleu centr.Mme si un lment particulier, comme H, est galement dfini dans lafeuille de style, il hrite des proprits de BODY moins que sesproprits color et background ne soient explicitement spcifiesdans la feuille de style.La thorie de lhritage est donc trs simple : vous partez delinformation la plus externe (la feuille de style externe) et progressezvers lintrieur. Un lment inclus dans un autre lment hrite de sesproprits sauf sil dispose dun style modifiant tout ou partie de cesproprits. Une feuille de style externe est surpasse par une feuilleinterne, elle-mme dpasse par un style dfini lintrieur de llment,lui-mme surpass pour un lment enfant par un style dfini danscelui-ci.Voici lordre dhritage, par priorit croissante :j Proprits dfinies par lutilisateur pour llment courant.j Proprits de feuille de style externe de llment parent.j Proprits de feuille de style locale de llment parent.324 LE GUIDE COMPLETFeuilles de styleChapitre 8j Styles de ligne de llment parent.j Proprits de feuille de style externe de llment courant.j Proprits de feuille de style locale de llment courant.j Styles de ligne de llment courant.Vous voyez apparatre dans cette liste un lment curieux : la notionde feuille de style dfinie par lutilisateur. Vous lavez probablementdj fait sans le savoir : il sagit de la modification des proprits devotre agent utilisateur, par exemple de votre navigateur.Prenons un exemple. Avec Firefox dabord :1 Ouvrez Firefox, puis chargez le fichier 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 dfinie dans la feuille destyle disparat.Figure 8.20 : Page daccueil de votre siteFigure 8.21 :Page daccueil de votre site, sansfeuille de style.Feuille de style en cascade Chapitre 8325LE GUIDE COMPLETChoisissez nouveau Affichage > Style de la page puisslectionnez Style de base de la page pour retrouver un affichagenormal.Vous avez ici ordonn lagent utilisateur dignorer toute feuillede style. Vous pouvez toutefois agir sur la page dautres faons.3 Choisissez dans la barre de menu Affichage > Taille de texte > Plusgrande. Tout le contenu texte de la page voit sa taille de policeaugmente.Leffet est exactement identique lapplication gnrale de la propritfontsize: larger. Vous pouvez augmenter plusieurs reprises lataille des polices, ou inversement la diminuer. Aprs avoir procd quelques essais, choisissez Affichage > Taille de texte > Normale pourretrouver un affichage normal.Vous pouvez galement agir sur la police par dfaut, ainsi que sur lacouleur de divers lments, en choisissant Outils > Options. SlectionnezGnral et choisissez Couleurs et police.Figure 8.22 :Page daccueil de votre site,avec augmentation de lataille des polices.Figure 8.23 :Fentre couleurs et polices de Firefox326 LE GUIDE COMPLETFeuilles de styleChapitre 8Dautres paramtres peuvent galement tre modifis dans la sectionAvanc des Options, comme le redimensionnement automatique desimages trop grandes pour laffichage dans la fentre de navigation.Des modifications similaires sont possibles avec Internet Explorer (partir de sa version 4) et celui-ci offre en outre la possibilit demployerune feuille de style personnalise.1 Ouvrez Internet Explorer, puis cliquez sur Outils > OptionsInternet.2 Dans longlet Gnral, cliquez sur le bouton Accessibilit.3 Cochez la case ct de loption Mettre les documents en forme enutilisant ma feuille de style, puis saisissez dans la bote de dialoguele chemin daccs et le nom de la feuille.4 Remarquez que, mme sans dfinir de feuille de style personnelle,vous pouvez dcider dans cette fentre dignorer les spcificationsde couleur, de nom et de taille de polices des pages que vousaffichez.5 Cliquez sur OK pour sortir de loption Accessibilit. Les autresboutons de la fentre Gnral permettent de spcifier les couleurs,les polices et la langue.Figure 8.24 :Fentre Accessibilit dInternet ExplorerFigure 8.25 :Fentre permettant de dfinirvos prfrences, quioutrepassent lesspcifications de style despages affiches.Feuille de style en cascade Chapitre 8327LE GUIDE COMPLETCliquez de nouveau sur OK pour enregistrer vos nouveauxrglages des Options Internet.Lcran affiche alors les pages en mlant les feuilles de style delutilisateur et celles du crateur du site.8.7. Feuille de style auditive,pour un public particulierComme nous lavons signal, vous pouvez dfinir plusieurs feuilles destyle, adaptes chacune aux caractristiques du mdium sur lequel ledocument doit tre restitu (par exemple : cran graphique, cran detlvision, appareil de poche, navigateur synthse vocale, appareiltactile braille, etc.).Les feuilles de style disposent de plusieurs moyens pour prsenter desinformations des utilisateurs parcourant le Web laide de navigateursnon standard. Par exemple, certaines proprits des feuilles de styleFigure 8.26 :Autre fentre.Figure 8.27 :Encore une autre.328 LE GUIDE COMPLETFeuilles de styleChapitre 8permettent de dfinir la pagination, en cas dimpression de la page. Defaon similaire, le W3C a configur plusieurs proprits concernant despriphriques auditifs ou audio.Une feuille de style auditive peut tre utilise par un malvoyant, avecdes navigateurs mains libres ou des priphriques comparables texte-parole. Outre permettre la prsentation du contenu normal dune pageWeb, une feuille de style auditive autorise les concepteurs Web avoirrecours des effets sonores particuliers, comme des prcisions, desorateurs multiples ou des modifications 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) sanssignalisation par un lment : le style dfini sapplique alors toutes lesinstances de cette classe, quel que soit llment concern. Comme nousvoulons supprimer lindentation pour une indication de mise en scne enligne, nous avons spcifi une marge 0 pour llmentSPAN.direction.Cette feuille de style est lie au fichier suivant :Listing 8-6 : romeo.html"Hamlet de Shakespeare"Feuille de style auditive, pour un public particulier Chapitre 8329LE GUIDE COMPLETExtrait de Romo et Juliettede ShakespeareCapulet. - Quel est ce bruit ? ...Hol ! quon me donne ma grandepe.Lady Capulet. - Non, une bquille !une bquille !.. Pourquoi demander unepe ?Capulet. - Mon pe dis-je !le vieux Montague arrive et brandit sa rapireen me narguant !Entrent Montague, lpe la main, et Lady Montague.Montague. - A toi, misrable Capulet ! Ne me retenez pas !Lchez-moi !Lady Montague, le retenant. - Tu ne feras pas un seul pas verston ennemi.Entre le Prince Escalus, avec sa suite.Romo et Juliette, Acte I Scne I.William Shakespeare,"Richard III, Romo et Juliette,Hamlet", Trad. F-V Hugo. 1979, Ed. Garnier-Flammarion,ISBN 2-08-070006-5, page 154.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 forme330 LE GUIDE COMPLETFeuilles de styleChapitre 8dans un fichier HTML, il serait possible tous les acteurs de rpter laide dun ordinateur : il suffirait de dsactiver la lecture des rpliquesqui le concerne dans la feuille de style. Les autres rpliques seraientencore lues par lagent utilisateur.La proprit sonore la plus importante est speak. Pour dsactivertotalement la lecture vocale dun lment, fixez 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 treignore par certains convertisseurs texte-parole. La valeur spelloutpermet aux mots concerns dtre pels, la valeur normalcorrespondant un rendu vocal normal.Dans de nombreux navigateurs texte-parole, les liens hypertextes sontlus comme du texte ordinaire. Pour donner un indice sonore particulierlorsque le navigateur atteint un lien hypertexte, servez-vous dun signalsonore grce la proprit cue. Par exemple :cue: url("pop.au")Vous pouvez placer lindice avant ou aprs, laide des propritscuebefore et cueafter.Vous pouvez aussi facilement ajouter une courte pause avant ou aprs lesignal. Utilisez ainsipause: 20mspour crer une pause de vingt millisecondes avant et aprs llment.Vous pouvez galement avoir recours aux proprits pausebefore etFigure 8.28 :Aspect de lextrait deRomo et JulietteFeuille de style auditive, pour un public particulier Chapitre 8331LE GUIDE COMPLETpauseafter avec la mme syntaxe. La proprit pause dispose dunraccourci :pause: pause-before-value pause-after-valueComme cela tait mentionn plus haut, une feuille de style auditivepermet davoir recours plusieurs orateurs. Les proprits azimuth(direction), elevation (hauteur) et voicefamily permettentdajouter des effets saisissants votre page Web. Bien videmment, cesproprits peuvent tre ou non rendues correctement selon lagentutilisateur concern, mais cette dmarche ambitieuse est la premiretape vers un format Web audio utilisable de faon universelle.Servez-vous de la proprit volume pour ajuster le niveau sonore rendupar le programme. Une valeur silent impose au programme dattendreaussi longtemps quil laurait fallu pour lire le texte, mais sans que vousnentendiez rien : cest ce quil faudrait employer pour faire rpterlacteur jouant Capulet, en modifiant comme suit son style :.Capulet {speak: normal; voice-family: male; volume: silent}Voici quelques autres moyens de modifier les proprits de la voix :pitch rend la voix plus aigu ou plus grave, voicefamily permet dechoisir entre une voix dhomme, de femme ou denfant, ou biendutiliser une police de voix propre au navigateur. speechrateacclre ou ralentit le dbit vocal, tandis que richness et stressautorisent la modification de certains attributs de la voix elle-mme.Nous avons ici employ une unique feuille de style qui combinaitprsentations visuelle et sonore. Il existe deux autres mthodes pourmieux sparer les proprits en fonction du priphrique de sortie.Noubliez pas que, chaque fois que vous rpartissez des instructions encatgories bien distinctes, vous facilitez dautant la maintenanceultrieure. La premire mthode consiste employer au sein dununique fichier la rgle @media :Listing 8-7 : styleaudit2.css/* styleaudit2.css : Feuille de style proprits visuelleset auditives */@media screen(BODY {color: #000000 ; background: #FFFFFF; text-align: left}.direction {margin-left: 10%; font-family: monospace;font-style: italic; color: #000080}SPAN.direction {margin-left: 0px;}.off {font-variant: small-caps})@media speech (332 LE GUIDE COMPLETFeuilles de styleChapitre 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 derecourir un attribut media lors de la liaison de ces feuilles au fichierconcern :Listing 8-8 : visuel.css/* visuel.css : Feuille de style proprits uniquementvisuelles */BODY {color: #000000 ; background: #FFFFFF; text-align: left}.direction {margin-left: 10%; font-family: monospace;font-style: italic; color: #000080}SPAN.direction {margin-left: 0px;}.off {font-variant: small-caps}Listing 8-9 : audit.css/* audit.css : Feuille de style proprits purementauditives */.direction {speak: none}.Capulet {speak: normal; voice-family: male}.Lady_capulet {speak: normal; voice-family: female;speech-rate: slow; richness: 40%; pitch: hight}.Montague {speak: normal; voice-family: male;richness: 80%; pitch: low}.Lady_montague {speak: normal; voice-family: female;speech-rate: slow}.off {speak: normal; voice-family: male; volume: 75%}Vous liez alors ces deux feuilles de style au fichier romeo.html laidedes deux lments LINK suivants, dots dun attribut media :Nous avons examin ici le cas dune prsentation la fois visuelle etauditive, mais vous pourriez faire de mme pour une prsentation en vuedune impression, ou pour distinguer une prsentation sur crandordinateur dune prsentation laide dun vido-projecteur.Feuille de style auditive, pour un public particulier Chapitre 8333LE GUIDE COMPLETPourquoi des diffrences entre impression, cran dordinateuret vido-projection ?Un cran dordinateur fonctionne par mission de lumire : celle-ciprovient soit de son tube cathodique, soit des cristaux liquides ou dundispositif similaire. De ce fait, des pages plutt claires avec un textesombre sont gnralement prfrables. Ce fait est encore plus flagrantpour une impression, surtout en noir et blanc, pour laquelle il vaut mieuxrduire les surfaces sombres imprimes (pour des raisons dconomiesdencre et de lisibilit).Cest exactement le contraire avec un vido-projecteur ou unrtroprojecteur, puisque les participants ne voient quune lumire rflchiepar lcran : des pages fonces avec un texte clair sont gnralementmoins fatigantes et possdent un impact suprieur. Inconvnient toutefoispour des transparents de rtroprojection : vous consommez alors beaucoupplus dencreFigure 8.29 :Une telle page est parfaite pourun affichage cran ou uneimpressionFigure 8.30 :En revanche, cette version estmieux adapte unevido-projection.334 LE GUIDE COMPLETFeuilles de styleChapitre 8En conclusion, les feuilles de style vous offrent un mcanisme dunerare puissance pour adapter parfaitement le contenu de vos pages etdocuments Web au public vis. Leur tude complte dpasse largementla porte de ce livre, puisque la spcification CSS2 est aussi, sinon pluscomplexe que la spcification HTML 4.01.8.8. Rsumj La plupart des attributs et lments relatifs la mise en forme et la prsentation des pages Web sont dsormais dconseills enfaveur du recours aux feuilles de style.j La spcification HTML 4.01 ne lie pas HTML un langage destyle particulier. Cela permet lutilisation potentielle de plusieurslangages. Le langage le plus frquemment employ est CSS(Cascading Style Sheet), fond sur la Recommandation W3C CSS2.1 (http://www.w3.org/TR/CSS21/cover.html#minitoc), dans lattentede la diffusion finale de la version 3.j Vous spcifiez le langage de feuille de style laide dun lmentMETA.j Vous pouvez inclure des styles dans une page Web de trois faonsdiffrentes : laide de lattribut style, plac dans pratiquement dansnimporte quel lment ; laide dun lment STYLE plac dans llment HEAD, unlment STYLE pouvant renfermer plusieurs dfinitions destyle ;en crant une feuille de style externe, indpendante dudocument HTML. Vous liez ensuite cette feuille externe votre document HTML laide dun lment LINK.j Vous pouvez dfinir le style de toutes les occurrences dunlment, dune classe spcifique ou dun id spcifique. Cespossibilits ne sont pas mutuellement exclusives.j HTML permet aux auteurs de spcifier les documents exploitantles caractristiques du mdium sur lequel le document doit trerestitu (par exemple : cran graphique, cran de tlvision,appareil de poche, navigateur synthse vocale, appareil tactilebraille, etc.). Cela est effectu laide de lattribut media dellment STYLE.Rsum Chapitre 8335LE GUIDE COMPLETj Le contenu de llment STYLE doit tre masqu vis--vis desagents utilisateurs qui ne reconnaissent pas les feuilles de style.j Une feuille de style est un simple fichier texte qui indique lagent utilisateur comment restituer votre code HTML. Lesfeuilles de style externes emmnent HTML un pas plus avant dansla sparation russie des logiques de travail et de prsentation. Unnom de fichier de feuille de style se termine par une extension.css.j Une feuille de style externe peut tre dfinie comme persistante,prfre ou alternative.j Outre les proprits de modification des caractristiques du texteet des polices, CSS propose des proprits de positionnement.Celles-ci permettent de saffranchir en partie ou en totalit du fluxnormal du code HTML.j Tout lment CSS se comporte comme une bote dote deproprits soit intrinsques, soit relatives un ou plusieurs autreslments ou au document.j Les langages de feuille de style en cascade, tel que CSS,autorisent lassemblage des informations de style provenant deplusieurs sources. Pour dfinir une cascade, lauteur spcifie unesuccession dlments LINK et/ou STYLE. Les informations destyle se rpandent en cascade selon lordre dapparition deslments dans la section HEAD.j Un lment inclus dans un autre lment hrite de ses propritssauf sil dispose dun style modifiant tout ou partie de cesproprits. Une feuille de style externe est surpasse par unefeuille interne, elle-mme dpasse par un style dfini lintrieurde llment, lui-mme surpass pour un lment enfant par unstyle dfini dans celui-ci.j Il est possible de paramtrer un agent utilisateur afin quil ignoretout ou partie des feuilles de style prvues par lauteur, et mmeparfois dappliquer sa propre feuille de style utilisateur.j Une feuille de style proprits auditives est un exemple defeuille de style adapte aux caractristiques du mdium sur lequelle document doit tre restitu.336 LE GUIDE COMPLETFeuilles de styleChapitre 8FormulairesConstituants dun formulaire ........................................................................................... 339Formulaire et focus ............................................................................................................ 362Commandes inactives et en lecture seule ................................................................... 368Soumission du formulaire ................................................................................................ 370Remarques propos des formulaires ........................................................................... 375Rsum ................................................................................................................................ 376Un formulaire constitue un moyen dapporter un peu dinteractivit une page HTML. Il peut permettre de slectionner une langue, unefeuille 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 ontrecours des formulaires pour ajouter du dynamisme un site. Un scriptpeut valider le contenu dun formulaire avant de le soumettre un autrescript, ou mme traiter la totalit du contenu sans recourir auxressources du serveur. Certains de ces scripts peuvent enregistrer desinformations dans un ou plusieurs cookies qui sont enregistrs surlordinateur de lutilisateur, et non sur le serveur Web. Grce aux scriptset aux formulaires, vous pouvez crer de puissantes applications quirduisent le poids impos aux ressources de votre serveur.Un formulaire HTML est une partie du document constitue duncontenu normal, dun balisage, mais surtout dlments spciauxtiquets appels commandes (cases cocher, boutons doption, menus,etc.). Lutilisateur remplit gnralement le formulaire en modifiantses commandes (en saisissant un texte, en slectionnant les articles dunmenu, etc.), avant de le soumettre un agent pour traitement (parexemple, 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 informationsdun formulaire.lments et attributs tudis :FORM, action, method, name, id, enctype, accept-charset,acceptLABEL, forINPUT, type, checked, maxlength, notab, size, src,tabindex, valueISINDEXBUTTON, name, value, typeSELECT, name, size, multiple, OPTION, label, value,selected, OPTGROUP, labelTEXTAREA, name, rows, colsLABEL, value, forFIELSET, LEGEND, aligntabindex, accesskey, disabled, readonlyOBJECT338 LE GUIDE COMPLETFormulairesChapitre 99.1. Constituants dun formulairelment FORMVoici un extrait de fichier qui cre un formulaire simple. Celui-cicomprend des tiquettes ou libells (labels), des boutons doption et desboutons de commande (pour rinitialiser le formulaire ou le soumettre) :Prnom : Nom : e-mail : Homme Femme Affich dans un navigateur, cet extrait de fichier affiche laspect prsentdans la figure suivante.Il est vrai que laspect nest pas parfait, mais vous savez commentlamliorer si vous le voulezVous crez un formulaire dans une page HTML laide de llmentFORM. Ses balises douverture et de fermeture sont obligatoires.Figure 9.1 :Exemple de formulaireConstituants dun formulaire Chapitre 9339LE GUIDE COMPLETLlment FORM agit comme conteneur gnral du formulaire,notamment pour les commandes. Il spcifie :j La disposition du formulaire (dfinie par le contenu de llment).j Le programme qui va manipuler le formulaire rempli puis soumis.Le programme rcepteur doit tre capable danalyser les couplesnom/valeur afin de les utiliser.j La mthode selon laquelle les donnes de lutilisateur serontenvoyes au serveur.j Lencodage de caractres qui doit tre accept par le serveur pourmanipuler ce formulaire. Les agents utilisateurs peuvent avertirlutilisateur de lencodage accept et/ou empcher que celui-cinentre 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 plusieursattributs fondamentaux :j Lattribut action spcifie lagent charg du traitement duformulaire. Le comportement de lagent utilisateur pour unevaleur autre quun URI http est indfini.j Lattribut method spcifie la mthode HTTP qui sera employepour soumettre le jeu des donnes de formulaire. Les valeurspossibles (insensibles la casse) sont get (la valeur par dfaut) etpost. Nous reviendrons plus loin sur la signification de ces deuxmthodes.j Lattribut name nomme llment pour quil puisse tre appelpar une feuille de style ou un script. Cet attribut est dsormaisdconseill : mieux vaut employer lattribut id pour identifier leslments.j Lattribut enctype spcifie le type de contenu dfini pour lasoumission du formulaire au serveur (lorsque la valeur de methodest post). La valeur par dfaut de cet attribut estapplication/xwwwformurlencoded. La valeur multipart/formdata doit tre employe avec llment INPUT lorsquecelui-ci est dfini comme type="file".j Lattribut acceptcharset spcifie la liste des encodages decaractres des donnes saisies qui sont accepts par le serveurtraitant ce formulaire. La valeur est une liste de valeurs de jeu decaractres, spares par des espaces et/ou des virgules. Le clientdoit interprter cette liste comme une liste de type OU340 LE GUIDE COMPLETFormulairesChapitre 9exclusif . La valeur par dfaut de cet attribut est la chanerserve UNKNOWN. Les agents utilisateurs peuvent interprtercette valeur comme reprsentant lencodage de caractresemploy pour transmettre le document contenant llment FORMen question.j Enfin, lattribut accept spcifie la liste de types de contenu,spars par des virgules, que le serveur qui traite ce formulaireprend correctement en charge. Lagent utilisateur peut utiliser cesinformations pour liminer les fichiers non conformes quand ildemande lutilisateur de slectionner un fichier envoyer auserveur.Types de commandes de formulaireLes utilisateurs interagissent avec les formulaires au moyen decommandes nommes. Le nom de commande dune commande estspcifi par son attribut name. La porte de lattribut name dunecommande au sein dun lment FORM est cet lment FORM.Chaque commande possde la fois une valeur initiale et une valeurcourante, toutes deux des chanes de caractres. La valeur initiale dunecommande peut gnralement tre spcifie laide de lattribut valuede llment de commande.La valeur courante dune commande est dabord gale la valeur initiale.Elle peut tre modifie par la suite par les actions de lutilisateur et parles scripts.La valeur initiale dune commande ne change pas. Lorsquun formulaireest rinitialis, la valeur courante de chaque commande redevient savaleur initiale. Si la commande est dpourvue de valeur initiale, leffetde la rinitialisation du formulaire sur cette commande est indfini.Lors de la soumission du formulaire pour son traitement, le nom et lavaleur courante de certaines commandes sont accoupls. Ces couplessont soumis avec le formulaire.HTML dfinit plusieurs grands types de commandes :j Boutons daction. Comme lindique leur nom, les boutonsdaction ont pour but de dclencher une action. Celle-ci peut tredfinie, comme pour un bouton de soumission (qui soumet leConstituants dun formulaire Chapitre 9341LE GUIDE COMPLETformulaire) ou de rinitialisation (qui redonne leur valeur initiale toutes les commandes), ou dfinie par lutilisateur. Unformulaire peut contenir plusieurs boutons de soumission. Unbouton daction dfini par lutilisateur ne possde pas decomportement par dfaut. Chaque bouton poussoir peut avoir desscripts ct client qui sont associs aux attributs dvnement dellment. Quand un vnement se produit (par exemple,lutilisateur presse le bouton, le relche, etc.), le script associ estdclench. Le langage du script du bouton doit tre dfini laidedune dclaration de script par dfaut (avec llment META). Unbouton est cr laide dun lment BUTTON ou INPUT.j Cases cocher. Les cases cocher sont des interrupteursmarche/arrt qui peuvent tre actionns par lutilisateur.Linterrupteur est sur marche lorsque lattribut checked dellment de commande est spcifi. Lors de la soumission duformulaire, seules les commandes de cases cocher activespeuvent devenir des commandes russies. Des cases cocherpeuvent tre regroupes au sein dun formulaire sous un mmenom de commande. Elles permettent ainsi aux utilisateurs deslectionner plusieurs valeurs pour la mme proprit. Vous crezune case cocher laide de llment INPUT.j Boutons doption. Parfois galement appels boutons radio, lesboutons doption sont analogues aux cases cocher. Ils endiffrent toutefois en ce que, lorsquils sont regroups sous unmme nom de commande, ils sont mutuellement exclusifs :lorsquun bouton est mis sur marche , tous les autres boutonsdu groupe sont automatiquement mis sur arrt . Vous crez unbouton radio laide de llment INPUT. En raison desdiffrences dinterprtation entre les agents utilisateurs, veillez ce que lun des boutons doption dun groupe soit misinitialement sur marche .j Menus. Les menus proposent des options aux utilisateurs, parmilesquelles il faut faire un choix. Vous crez un menu laide dellment SELECT combin avec des lments OPTGROUP etOPTION.j Saisie de texte. Deux types de commande permettent auxutilisateurs la saisie dun texte. Llment INPUT cre unecommande pour une saisie sur une seule ligne, llmentTEXTAREA, pour une saisie sur plusieurs lignes. Dans les deuxcas, le texte saisi devient la valeur courante de la commande.342 LE GUIDE COMPLETFormulairesChapitre 9j Slection dun fichier. Ce type de commande permet lutilisateur de slectionner un fichier de sorte que son contenupuisse tre soumis avec le formulaire. Une commande deslection de fichier est cre laide de llment INPUT.j Commandes caches. Il est possible de crer des commandes quine sont pas restitues mais dont les valeurs sont soumises avec leformulaire. Cela sert gnralement enregistrer les informationsentre les changes client/serveur, qui seraient autrement perduesdu fait de la nature sans tat du protocole HTTP (voir ledocument [RFC2616]). Une commande cache est cre laidede llment INPUT.j Commandes dobjets. Il est possible dinsrer des objetsgnriques dans les formulaires, de faon que les valeurs qui leursont associes soient soumises en mme temps que les autrescommandes. Llment OBJECT permet de crer une commandedobjet.Les lments utiliss pour crer les commandes apparaissentgnralement dans un lment FORM. Ils peuvent toutefois apparatre endehors de la dclaration de llment FORM lorsquils servent crer uneinterface utilisateur.lment INPUTVous avez d remarquer que llment INPUT est de loin llment leplus employ dans un formulaire. Il permet en effet de crer des boutonsdaction, des cases cocher, des boutons doption, la saisie dun textedune ligne, la slection dun fichier et de crer une commande cache.Cet lment, dpourvu de balise de fermeture, possde la syntaxegnrale suivante :Lattribut type est lattribut le plus important : il spcifie le type decommande crer. Cet attribut peut possder de nombreuses valeurslgales, qui conditionnent la prsence ou labsence dautres attributs.La valeur par dfaut de cet attribut est text. Cela cre une commandede saisie de texte sur une seule ligne. Lattribut complmentaire sizeindique lagent utilisateur la largeur initiale de la commande, exprimeConstituants dun formulaire Chapitre 9343LE GUIDE COMPLETen nombre entier de caractres. Lattribut complmentaire maxlengthspcifie le nombre maximum de caractres que lutilisateur peut saisir.Par exemple,Nom de lutilisateur : cre un champ de 10 caractres de largeur, qui peut accepter jusqu 25caractres 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 uneseule ligne, de type mot de passe : le texte saisi est restitu de manire dissimuler les caractres (par exemple, une succession dastrisques). Lavaleur courante est le texte saisi par lutilisateur, non le texte restitu parlagent utilisateur. Vous employez en ce cas les attributscomplmentaires size et maxlength comme avec la valeur text.Mot de passe : Cet exemple cre un champ de 10 caractres de largeur, qui peutaccepter jusqu un maximum de 15 caractres en tout. Lors de la saisie,les caractres sont remplacs lcran par des astrisques.Figure 9.2 :Exemple dlment INPUT de type textFigure 9.3 :Exemple dlment INPUT de type password344 LE GUIDE COMPLETFormulairesChapitre 9Comme pour la valeur text, lors de la soumission, le nom du champsera motdepasse et la valeur (value) ce qui a t saisi dans le champ.Mot de passeLa protection offerte par ce dispositif reste toute relative. Bien quilsoit masqu par lagent utilisateur aux yeux dun ventuel observateur, lemot de passe est transmis au serveur en texte clair et peut tre lu parquiconque possde un accs au rseau.La valeur checkbox cre une case cocher, tandis que la valeur radiocre un bouton doption. Lattribut complmentaire value, qui spcifiela valeur initiale de la commande, est alors obligatoire. Lattributboolen checked spcifie que le bouton (ou la case) est sur marche .En voici un exemple :Sexe : Homme FemmeMatriel possd :Ecran platGraveur de DVDGraveur de CDImprimante multifonctionRemarquez dans cette figure que le bouton Homme est coch, toutcomme les cases cran plat et Graveur de DVD.Figure 9.4 :Exemple dlments INPUT de typecheckbox et radioConstituants dun formulaire Chapitre 9345LE GUIDE COMPLETSi chaque bouton doption ncessite un lment spar, vous lesrassemblez dans un mme groupe laide dun mme name, ici sexe . Des boutons doption appartenant au mme groupe sontmutuellement exclusifs : un clic sur lun dentre eux dsactive les autres.Vous pouvez possder plusieurs groupes de boutons doption, chaquegroupe de boutons possdant un name unique. Chaque bouton possdetoutefois une value diffrente, ici homme et femme . Homme etfemme tant des valeurs mutuellement exclusives, ils constituent debons candidats pour des boutons doption.En revanche, les cases cocher laissent lutilisateur libre de slectionnerplus dune option dans un groupe. Les champs de cases cocher dunmme groupe possdent le mme nom, des valeurs diffrentes, mais nesexcluent pas mutuellement. Dans cet exemple, lutilisateur peutpossder zro ou plusieurs des matriels cits : des cases cocherconstituent donc un excellent choix.Les valeurs submit et reset crent respectivement un bouton desoumission et un bouton de rinitialisation. Voici un exemple de mise enuvre :Ces boutons possdent des significations prtablies : vous navez pas leur lier de script. Le bouton de soumission effectue laction dfinie dansllment FORM, tandis que le bouton de rinitialisation redonne tousles lments du formulaire leur valeur initiale. Exceptionnellement,lattribut name est normalement superflu pour ces deux boutons : lavaleur qui apparat sur le bouton lui-mme nest pas envoye avec lereste des donnes du formulaire. Elle ne possde pas de nom et est parconsquent sans intrt.Figure 9.5 :Exemple dlments INPUT de typesubmit et reset346 LE GUIDE COMPLETFormulairesChapitre 9Si vous spcifiez toutefois un nom pour votre bouton Envoyer, le nom etla valeur ( name et value) de ce bouton seront envoys. Cettecaractristique peut se rvler trs utile en combinaison avec lemploi delangages de script lors du traitement de votre formulaire.La valeur image cre un bouton de soumission graphique. La valeur delattribut complmentaire src spcifie alors lURI de limage qui vadcorer le bouton. Pour des questions daccessibilit, mieux vauttoujours fournir un texte de remplacement pour limage, laide delattribut alt. Lattribut complmentaire obligatoire src spcifie lalocalisation de limage utiliser pour dcorer le bouton de soumissiongraphique.Lorsque vous cliquez sur limage laide dun dispositif de pointage, leformulaire est soumis et les coordonnes du clic sont transmises auserveur. La coordonne x se mesure en pixels partir de la gauchede limage et la coordonne y en pixels partir du haut de limage.Les donnes soumises comprennent les valeurs nom.x=valeurdex etnom.y=valeurdey, dans lesquelles nom est la valeur de lattributname, et valeur-de-x et valeur-de-y respectivement les valeursdes coordonnes x et y .Remarquez que, si le serveur doit entreprendre des actions diffrentesselon lendroit cliqu, lutilisateur dun navigateur non graphique seradsavantag. Mieux vaut donc recourir aux approches alternativessuivantes :j Employer plusieurs boutons de soumission (chacun avec sapropre image) au lieu dun seul bouton de soumission graphique.Les feuilles de style permettent de contrler le positionnement deces boutons.j Employer une image cliquable ct client en combinaison avecdes scripts.Voici un exemple :Il est cr un bouton de type image, qui emploie le fichier imageboutonenvoyer.gif (situ comme il se doit dans le dossier images du site)et dont le texte alternatif est Envoyer ! .Constituants dun formulaire Chapitre 9347LE GUIDE COMPLETLa valeur button cre un bouton daction. Lintitul du bouton est lavaleur de lattribut value.La valeur hidden cre une commande cache.Nous ne montrons pas de copie dcran, puisque par dfinition cettecommande 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 desdonnes similaires en plus du reste des donnes du formulaire.Enfin, la valeur file cre une commande de slection de fichiers. Lenom du fichier initial est en principe la valeur de lattribut value.Fichier envoyer :Figure 9.6 :Exemple dlment INPUT de typeimageFigure 9.7 :Exemple dlment INPUT de typebutton348 LE GUIDE COMPLETFormulairesChapitre 9Remarquez dans la figure prcdente quun bouton Parcourir estautomatiquement ajout ct du champ de saisie du nom de fichier :vous pouvez cliquer dessus pour parcourir votre systme de fichiers etslectionner le fichier concern.En spcifiant dans llment FORM lattribut enctype et en lui attribuantla valeur multipart/formdata, chaque contenu de fichier seraconditionn pour soumission dans une section distincte dun documenten plusieurs parties.Les autres attributs de llment INPUT sont prsents dans le tableausuivant.Tableau 9.1 : Autres attributs de llment INPUTAttribut Valeur ButChecked boolen Lorsque lattribut type possde la valeur radioou checkbox, spcifie que le bouton est sur marche . Ignor pour les autres types decommande.Maxlength entier Spcifie, lorsque lattribut type possde la valeurtext ou password, le nombre maximum decaractres que lutilisateur peut saisir. Ce nombrepeut excder la valeur spcifie pour lattributsize, auquel cas lagent utilisateur devraitproposer un mcanisme de dfilement. La valeurpar dfaut de cet attribut est un nombre illimit.Name nom Nom de la commandeNotab Retire llment de lordre de tabulationFigure 9.8 :Exemple dlment INPUT detype fileConstituants dun formulaire Chapitre 9349LE GUIDE COMPLETTableau 9.1 : Autres attributs de llment INPUTAttribut Valeur ButSize entier Indique lagent utilisateur la largeur initiale de lacommande. La largeur est donne en pixels, sauflorsque lattribut type possde la valeur text oupassword. Il sagit alors dun nombre entier decaractres.Src uri Lorsque lattribut type possde la valeur image,spcifie la localisation de limage utiliser pourdcorer le bouton de soumission graphique.Tabindex entier Dfinit la place dans lordre de tabulationValue valeur Valeur initiale de la commande. Facultatif, sauflorsque lattribut type possde la valeur radioou checkbox.Nous reviendrons dans la suite de ce chapitre sur les attributs tabindexet notab.lment ISINDEXLlment ISINDEX nest pas un lment de formulaire, puisquilnappartient pas un lment FORM. Son emploi est fortementdconseill. Cet lment cre une commande de saisie dun texte sur uneseule ligne, qui admet un nombre quelconque de caractres. Les agentsutilisateurs peuvent utiliser la valeur de lattribut prompt de cet lmentcomme titre pour linvite. Mieux vaut employer INPUT pour crer descommandes de saisie de texte.Ainsi, la dclaration ISINDEX suivante :pourrait se rcrire comme suit avec llment INPUT :Saisissez le mot rechercher : lment BUTTONLes boutons crs par llment BUTTON fonctionnent exactementcomme ceux crs avec llment INPUT, mais offrent des possibilitsde restitution plus varies, puisque llment BUTTON peut possder un350 LE GUIDE COMPLETFormulairesChapitre 9contenu. Par exemple, un lment BUTTON qui contient une imagefonctionne de la mme faon et peut avoir le mme aspect quunlment INPUT dont lattribut type possde la valeur image, maisadmet en outre un contenu.Cet lment doit imprativement possder une balise ouvrante et unebalise de fermeture.Les agents utilisateurs visuels peuvent restituer les boutons BUTTON enrelief et avec un mouvement de haut en bas quand on les clique, lesboutons INPUT tant restitus comme des images plates (reportez-vous la figure de la page 378).Ses principaux attributs sont les suivants :j name spcifie le nom de la commande.j value dfinit la valeur initiale du bouton.j type dclare le type du bouton. Les valeurs possibles sont lavaleur par dfaut submit (bouton de soumission), reset (boutonde rinitialisation) et button (bouton daction).Lexemple suivant reprend et prolonge un exemple prcdent en crantdes boutons de soumission et de rinitialisation avec llment BUTTONau lieu de INPUT. Les boutons contiennent des images parlintermdiaire dlments IMG.Prnom : Nom : E-mail: Homme FemmeLe rsultat est prsent dans la figure suivante. Pensez toujours fournirun texte de remplacement pour llment IMG.Constituants dun formulaire Chapitre 9351LE GUIDE COMPLETIMG etBUTTONIl est illgal dassocier une image cliquable un lment IMGapparaissant en contenu dun lment BUTTON. Lexemple suivant estinterdit :lments SELECT, OPTGROUP et OPTIONlment SELECTVous crez un menu laide dun lment SELECT. Cet lment possdeobligatoirement une balise douverture et une balise de fermeture.Chaque option du menu est reprsente par un lment OPTION. Unlment SELECT doit contenir au moins un lment OPTION. Voici unexemple.Choisissez votre navigateur :Netscape NavigatorFirefoxMicrosoft Internet Explorer 5 ouantrieurMicrosoft Internet Explorer 6.xFigure 9.9 :Exemple dlment BUTTON352 LE GUIDE COMPLETFormulairesChapitre 9Texte ou autreCet exemple cre ici un menu droulant proposant les choix qui figurentdans les diffrents lments OPTION. Ce choix de mode de prsentationdpend toutefois de lagent utilisateur.Les principaux attributs de llment SELECT sont les suivants :j Lattribut name spcifie le nom de la commande.j Lattribut size spcifie le nombre de lignes de la zone de listedroulante, lorsque llment SELECT se prsente comme tel. Lesagents utilisateurs ne sont pas tenus de prsenter llmentSELECT sous forme dune zone de liste : ils peuvent faire appel un autre mcanisme, comme un menu droulant.j Lattribut boolen facultatif multiple permet une slectionmultiple. En son absence, llment SELECT nautorise quuneslection unique.Lorsque lattribut multiple est spcifi, les utilisateurs peuvent choisirplusieurs options en maintenant enfonce la touche [Ctrl] pendant quilscliquent sur chacun de leurs choix.lment OPTIONChaque choix dun menu est reprsent par un lment OPTION. Seulela balise douverture est obligatoire, mais, comme nous lavons djsignal, mieux vaut toujours fermer un lment HTML.Figure 9.10 :Exemple de menu (lment SELECT)Constituants dun formulaire Chapitre 9353LE GUIDE COMPLETLes principaux attributs de llment OPTION sont les suivants :j Lattribut label permet de spcifier un intitul pour loptionplus court que le contenu de llment OPTION. Les agentsutilisateurs doivent employer la valeur de cet attribut, lorsquil estprsent, plutt que le contenu de llment OPTION commeintitul de loption.j Lattribut facultatif value spcifie la valeur initiale de lacommande. Sil est absent, la valeur initiale est le contenu dellment OPTION.j Lattribut boolen facultatif selected spcifie que loption estprslectionne. Dans lexemple prcdent, nous avions dcidque le choix Firefox tait prslectionn :FirefoxIl est possible de prslectionner zro ou plusieurs options. Les agentsutilisateurs devraient dterminer les options prslectionnes commesuit :j Si aucun lment OPTION ne possde dattribut selected, lecomportement de lagent utilisateur vis--vis du choix de loptionslectionne initiale est indfini.j Si un lment OPTION possde un attribut selected, alorscelui-ci devrait tre prslectionn.j Si llment SELECT possde un attribut multiple spcifi etplusieurs lments OPTION avec lattribut selected spcifi,alors ceux-ci devraient tous tre prslectionns.Si plusieurs lments OPTION possdent un attribut selected alors quelattribut multiple nest pas spcifi sur llment SELECT, cest uneerreur. Les agents utilisateurs peuvent varier dans la prise en charge decette erreur, mais ils ne devraient pas prslectionner plus dune option.lment OPTGROUPVous pouvez regrouper logiquement des options laide de llmentOPTGROUP. Cela est particulirement utile quand lutilisateur doiteffectuer un choix partir dune longue liste doptions : les groupesdoptions apparentes sont plus faciles comprendre et se remmorerquune seule longue liste doptions. Dans HTML 4, les groupesimbriqus sont interdits : tous les lments OPTGROUP doivent trespcifis directement dans un lment SELECT.354 LE GUIDE COMPLETFormulairesChapitre 9Les balises douverture et de fermeture de llment OPTGROUP sontobligatoires. Son principal attribut est label, qui spcifie lintitul dugroupe doptions.RegroupementDes futures versions de HTML pourraient (et devraient) tendre lemcanisme de regroupement, de faon autoriser limbrication degroupes doptions.Voici un exemple demploi de llment OPTGROUP :Antrieur la version 4.0Version 4 6.xPostrieur la version 6.xFirefox 1.0Firefox 1.2Firefox 1.2Antrieur la version 4.0Version 4 6Postrieur la version 6.xAutreLes agents utilisateurs visuels peuvent autoriser les utilisateurs effectuer une slection partir des groupes doptions au moyen dunmenu hirarchique ou dun autre mcanisme refltant la structure desoptions : cest le cas de Firefox, comme le montre la figure suivante(voir Figure 9.11).Remarquez que chaque sous-menu affiche lintitul dun lmentOPTGROUP ou dun lment OPTION.Constituants dun formulaire Chapitre 9355LE GUIDE COMPLETlment TEXTAREALlment TEXTAREA permet de crer une zone de texte de saisiemultiligne. Vos utilisateurs pourront la remplir en soumettant leurscommentaires, suggestions ou messages de forum. TEXTAREA permet lutilisateur de saisir plusieurs lignes de texte. Celles-ci sont contenuesdans value. Les agents utilisateurs doivent employer comme valeurinitiale le contenu de cet lment, intgralement restitu. Les balisesdouverture et de fermeture de cet lment sont obligatoires.Les attributs de llment TEXTAREA sont les suivants :j Lattribut name spcifie le nom de la commande.j Lattribut rows spcifie le nombre de lignes de texte visibles. Lesutilisateurs doivent pouvoir saisir plus de lignes que ce nombre :les agents utilisateurs devraient donc fournir un moyen de fairedfiler le contenu de la commande quand celui-ci stend au-delde la zone visible.j Lattribut cols spcifie la largeur visible en fonction de la chassemoyenne des caractres. Les utilisateurs doivent pouvoir saisirdes lignes plus longues que cette largeur. Les agents utilisateurspeuvent couper les textes de ligne visibles afin de garder leslongues lignes visibles sans devoir les faire dfiler.Voici un exemple :Premire ligne de texte initial.Figure 9.11 :Exemple de menu, avecrecours llmentOPTGROUP.356 LE GUIDE COMPLETFormulairesChapitre 9Seconde ligne de texte initial.Cet exemple cre une commande TEXTAREA de dix lignes sur quatre-vingts colonnes et qui contient initialement deux lignes de texte. Lacommande TEXTAREA est suivie par deux boutons de soumission et derinitialisation.La spcification de lattribut readonly permet lauteur dafficher untexte non modifiable dans la commande TEXTAREA. Cela diffre delemploi dun texte balis standard dans un document, puisque la valeurde llment TEXTAREA est soumise avec le formulaire.lment LABELQuelques commandes de formulaire possdent des libells ou labelsautomatiquement associs (comme les boutons daction), mais la pluparten sont dpourvues (les champs de texte, les cases cocher, les boutonsdoption ainsi que les menus).Lorsquune commande possde un libell implicite, les agentsutilisateurs doivent employer la valeur de lattribut value commechane de caractres du libell.Figure 9.12 :Exemple dlmentTEXTAREAConstituants dun formulaire Chapitre 9357LE GUIDE COMPLETLlment LABEL permet de spcifier un libell pour les commandesdpourvues de libell implicite. Chaque lment LABEL est associ exactement une commande de formulaire. Ses balises douverture et defermeture sont obligatoires.Lattribut for associe explicitement un label une autre commande : lavaleur de lattribut for doit tre la mme que celle de lattribut iddune certaine commande du mme document. Quand il est absent, lelibell qui est dfini est associ au contenu de llment.Dans lexemple suivant, un tableau permet daligner deux commandesde saisie de texte ainsi que les libells qui leur sont associs. Chaquelibell est associ explicitement une commande de saisie de texte :PrnomNomLattribut forIl est possible dassocier plusieurs lments LABEL la mmecommande en crant plusieurs rfrences via lattribut for.Lexemple complique le prcdent, en prsentant plus dlmentsLABEL :Figure 9.13 :Exemple dlments LABEL358 LE GUIDE COMPLETFormulairesChapitre 9Prnom :Nom : Adrelle : Homme Femme Pour associer implicitement un libell une autre commande, llmentde commande doit se trouver lintrieur de llment LABEL. Cetlment LABEL ne peut alors contenir quun seul lment de commande.Le label en question peut se placer avant ou aprs la commandeassocie.Lexemple suivant associe implicitement deux libells deuxcommandes de saisie de texte :Figure 9.14 :Exemple dlments LABELConstituants dun formulaire Chapitre 9359LE GUIDE COMPLETPrnomNomRemarquez quil est impossible demployer cette technique lorsque ladisposition est assure par un tableau : le libell se trouve dans unecellule et la commande associe dans une autre.Lorsquun lment LABEL reoit le focus, celui-ci est communiqu lacommande associe. Le focus sera tudi dans la suite de ce chapitre.Les agents utilisateurs peuvent restituer les libells de nombreuses faons(par exemple : visuellement, lus par des synthtiseurs de parole, etc.).Ajout dune structure un formulaire :lments FIELDSET et LEGENDComme nous lavons dj largement soulign, une des vocationsprofondes de HTML est de se proccuper de la structure des documents.Cette notion de structure semble quelque peu mise mal par lesdiffrents lments de formulairesHeureusement, llment FIELDSET remdie cette situation. Il permetde regrouper par thme les commandes et les libells apparents. Leregroupement des commandes facilite leur comprhension par lesutilisateurs, tout en amliorant la navigation par tabulation pour lesagents utilisateurs visuels et la navigation vocale pour les agentsFigure 9.15 :Exemple dlments LABEL(libells implicites)360 LE GUIDE COMPLETFormulairesChapitre 9utilisateurs vocaux. La bonne utilisation de cet lment rend plusaccessibles les documents.Llment LEGEND permet aux auteurs dassigner une lgende unlment FIELDSET. Il renforce laccessibilit lorsque llmentFIELDSET est restitu de manire non visuelle. Ses balises douvertureet de fermeture sont obligatoires.Le principal attribut de LEGEND est align, dsormais dconseill auprofit des feuilles de style. Il positionne la lgende par rapport au jeu dechamps. Ses valeurs possibles sont la valeur par dfaut top (au-dessusdu jeu de champs), bottom (en dessous), left ( gauche) et right (droite).Lexemple suivant propose un formulaire de type recherche delogiciel . Il se divise en trois parties : les informations personnelles, lesystme dexploitation et la catgorie recherche. Chaque partie contientles commandes pour la saisie des informations concernes.Systme dexploitation Windows Mac OX Linux AutreCatgorie recercheQuel type de produit recherchez-vous ?Utilitaire systmeSon et vidoBureautiqueSi la catgorie recherche ne figure pasdans la liste prcdente, saisissezci-dessous des mots-cls sparspar des virgules.Constituants dun formulaire Chapitre 9361LE GUIDE COMPLETLa figure suivante montre laspect de ce formulaire sous Firefox.Remarquez quil serait possible damliorer laide de la feuille de stylela prsentation visuelle du formulaire, en alignant les lments lintrieur de chaque lment FIELDSET et en ajoutant de la couleur etdes indications de police. Vous pourriez galement ajouter des scripts,par exemple pour nafficher la zone de texte Recherche que silutilisateur indique ne pas trouver de catgorie, etc.9.2. Formulaire et focusDans un document HTML, un lment doit recevoir le focus (aussinomm attention ) grce une action de lutilisateur pour deveniractif et remplir sa fonction. Par exemple, un utilisateur doit activer (engnral cliquer) le lien spcifi par llment A pour suivre le lien enquestion. De la mme manire, les utilisateurs doivent donner le focus llment TEXTAREA pour y saisir un texte.Il existe plusieurs faons de donner le focus un lment :j En dsignant llment avec un dispositif de pointage.Figure 9.16 : Exemple dlments FIELSET et LEGEND362 LE GUIDE COMPLETFormulairesChapitre 9j En naviguant dun lment lautre au clavier. Il peut avoir tdfini un ordre de tabulation spcifiant lordre dans lequel leslments reoivent le focus quand lutilisateur navigue laide duclavier dans le document. Une fois slectionn, llment peuttre activ par une certaine combinaison de touches.j En slectionnant llment au moyen dune touche daccs rapide(appele aussi parfois raccourci clavier ou cl daccs ).Navigation par tabulationDans un document HTML, plusieurs lments sont soumis un ordre detabulation, explicite ou implicite. Il sagit essentiellement des lmentsqui reconnaissent lattribut tabindex, savoir les lments A, AREA,BUTTON, INPUT, OBJECT, SELECT et TEXTAREA.Lordre de tabulation dfinit lordre dans lequel les lments recevrontle focus lorsque lutilisateur naviguera laide du clavier. Lordre detabulation peut comprendre des lments imbriqus dans dautreslments.Cet ordre de tabulation est dfini de faon explicite laide de lattributtabindex, pour les lments qui le reconnaissent. Sa syntaxe est lasuivante :tabindex = nombrenombre doit tre compris entre 0 et 32 767. Les agents utilisateursdoivent ignorer les ventuels zros de tte.Les agents utilisateurs parcourent les lments qui peuvent recevoir lefocus selon les rgles suivantes :1 Dabord les lments qui reconnaissent lattribut tabindex et luiassignent une valeur positive. La navigation part de llmentdont lattribut tabindex possde la plus petite valeur pour allervers llment qui possde la valeur la plus leve. Les valeurs nese suivent pas forcment, ni ne doivent commencer une valeurparticulire. Les lments dont les valeurs de lattribut tabindexsont identiques sont parcourus dans lordre de leur apparition dansle flux de caractres du code.2 Ceux des lments qui ne reconnaissent pas lattribut tabindex,ou bien le reconnaissent et lui assignent une valeur 0, sontFormulaire et focus Chapitre 9363LE GUIDE COMPLETparcourus ensuite. Ces lments sont parcourus dans lordre deleur apparition dans le flux de caractres du code.Cela signifie que si aucun lment ne possde dattribut tabindex,lordre de tabulation sera celui de lapparition des lments dans lecode.Les lments inactifs ne participent pas dans lordre de tabulation.Examinez le listing suivant :Listing 9-1 : tabindex.htmlExemple de formulaireExemple de formulaireNavigation laide de la toucheTAB...un texte...Consultez lesite Web du W3C....suite du texte...Effectuer laction prvue....suite du texte...364 LE GUIDE COMPLETFormulairesChapitre 9Dans cet exemple, lordre de tabulation est le suivant : llmentBUTTON, les lments INPUT dans lordre (remarquez que celui nommchamps1 partage la mme valeur dattribut tabindex que le bouton,mais champs1 apparat plus tard dans le flux de caractres) et enfin lelien cr par llment A.Touches configurablesLa touche ou la combinaison de touches qui produit la navigation partabulation dpend de la configuration de lagent utilisateur. Cestgnralement la touche [] pour la navigation et la touche [] pourlactivation de llment slectionn, mais cela nest en rien uneobligation imprative.Les agents utilisateurs peuvent galement dfinir des combinaisons decls pour parcourir lordre de tabulation lenvers. Quand la fin ou ledbut de lordre de tabulation est atteint, lagent utilisateur peut reveniren arrire au dbut ou la fin.Figure 9.17 :Navigation laide de lattributtabindexFormulaire et focus Chapitre 9365LE GUIDE COMPLETTouches daccs rapideVous tes probablement familier avec les touches daccs rapide devotre systme dexploitation ou de vos logiciels favoris. Par exemple,vous savez certainement quavec Windows la combinaison [ctrl]+[c] copieun objet, tandis que la combinaison [ctrl]+[v] colle cet objet lemplacement actif. HTML permet de dfinir de telles touches daccsrapide pour un lment, laide de lattribut accesskey. Sa syntaxe estla suivante :accesskey = caractrecaractre est un caractre seul qui provient du jeu de caractres dudocument.Cl daccsPensez tenir compte de la mthode de saisie de lutilisateur supposlors de la spcification dune cl daccs.Un appui sur la touche daccs rapide affecte un lment lui procurele focus. Ce qui se passe lorsque llment reoit le focus dpend dellment. Par exemple, si lutilisateur active un lien dfini par unlment A, lagent utilisateur suit en gnral le lien. Lorsque lutilisateuractive un bouton radio, lagent utilisateur change la valeur du boutonradio. Quand lutilisateur active un champ de texte, la saisie devientpossible, etc.Vous pouvez dfinir 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 aulibell, qui le transmet la commande associe. Lutilisateur peut alorssaisir un texte dans la zone INPUT.Nom dutilisateur366 LE GUIDE COMPLETFormulairesChapitre 9Compliquons cet exemple en ajoutant un lien hypertexte lorsquelutilisateur ne possde pas de compte. Une touche daccs rapide estaffecte ce lien dfini par un lment A. Un appui sur cette touchemne lutilisateur vers ce qui serait un document offrant un formulairedouverture de compte.... idem ci-dessus ...Crer un compteFigure 9.18 :Touches daccs rapideFigure 9.19 :Touche daccs rapideFormulaire et focus Chapitre 9367LE GUIDE COMPLETTouches daccs rapideLa procdure exacte dinvocation des touches daccs rapide dpenddu systme dexploitation sous-jacent. Avec MS Windows, cest engnral une combinaison [alt]+touche daccs rapide. Avec un systmeApple, ce serait [cmd]+touche daccs rapide.La restitution des cls daccs est fonction de lagent utilisateur. Mieuxvaut inclure la cl daccs dans le texte du libell ou partout o la cldaccs doit sappliquer. Les agents utilisateurs devraient restituer lavaleur dune cl daccs de faon mettre son rle en vidence et ladistinguer des autres caractres (par exemple, en la soulignant).9.3. Commandes inactives et enlecture seuleParfois, une saisie de lutilisateur peut tre indsirable ou superflue. Ilfaut donc pouvoir rendre une commande inactive ou la restituer enlecture seule. Vous pourriez par exemple souhaiter que le bouton desoumission dun formulaire reste inactif tant que lutilisateur na pasentr certaines donnes obligatoires. De la mme manire, lauteur peutvouloir inclure un bout de texte en lecture seule, qui doit tre soumiscomme valeur en mme temps que le formulaire. Les sections suivantesdcrivent les commandes inactives et celles en lecture seule.Commandes inactivesVous dclarez une commande comme inactive laide de lattributboolen disabled. La commande est dsactive et refuse toute formedentre de lutilisateur. Cet attribut peut tre employ avec les lmentsBUTTON, INPUT, OPTGROUP, OPTION, SELECT et TEXTAREA.Lorsquil est prsent dans un lment, lattribut disabled produitleffet suivant :j Les commandes inactives ne reoivent pas le focus.j Les commandes inactives sont ignores au cours dune navigationpar tabulation.j Les commandes inactives ne peuvent pas russir.368 LE GUIDE COMPLETFormulairesChapitre 9Cet attribut est hrit, les dclarations locales surclassant toutefois lavaleur hrite.Dans lexemple suivant, llment INPUT est inactif. Il ne peut pasrecevoir dentre de lutilisateur et sa valeur ne peut pas tre soumiseavec le formulaire.La faon dont sont restitus les lments en lecture seule dpend delagent utilisateur.Voici un exemple :Systme dexploitation : Il est impossible de modifier le contenu de la zone de texte prsentedans la figure prcdente.Seul un script peut modifier dynamiquement la valeur de lattributreadonly.9.4. Soumission du formulaireDans tout ce qui prcde, nous avons examin avec soin les lmentsgrce auxquels il tait possible de faire saisir des informations parlutilisateur. Le formulaire rempli, lutilisateur clique sur le boutonSoumettre. Les sections suivantes expliquent la manire dont les agentsutilisateurs soumettent les donnes de formulaire aux agents qui traitentles formulaires.Mthodes de soumission du formulaireLattribut method de llment FORM spcifie la mthode HTTPemploye pour envoyer le formulaire lagent de traitement. Cet attributadmet deux valeurs :Figure 9.21 :Commande en lecture seule370 LE GUIDE COMPLETFormulairesChapitre 9j get : lensemble des donnes du formulaire est rajout lURIspcifi par lattribut action (avec comme sparateur uncaractre point dinterrogation ?) et ce nouvel URI est envoy lagent de traitement.j post : lensemble des donnes de formulaire est inclus dans lecorps du formulaire et envoy lagent de traitement.La mthode get est prfrer lorsque le formulaire ne produit aucuneffet secondaire (il est alors dit idempotent ). La plupart desrecherches dans une base de donnes sont dpourvues deffetssecondaires visibles et font des applications idales pour la mthodeget. Les moteurs de recherche emploient get : une demande derecherche najoute rien un fichier ou ne modifie en rien les donnes duserveur.Si le service associ au traitement dun formulaire entrane des effetssecondaires (par exemple, si le formulaire modifie une base de donnesou labonnement un service), mieux vaut employer la mthode post.Elle est ainsi employe pour les pages dinscription, les salles dediscussion et les forums de discussion en ligne.Le codage des caractres avec Get et PostLa mthode get restreint les valeurs du jeu des donnes du formulaireaux caractres ASCII. En revanche, la mthode post, lorsquelle estspcifie avec lattribut enctype="multipart/formdata", recouvrela totalit du jeu de caractres ISO 10646.Commandes russiesUne commande est dite russie lorsque son nom est appari savaleur courante et que ce couple appartient au jeu des donnes duformulaire qui est soumis. Une commande russie peut tre soumise.Une commande russie doit tre dfinie dans un lment FORM etpossder un nom de commande.Remarquez toutefois que :j Les commandes inactives ne peuvent russir.j Si le formulaire contient plusieurs boutons de soumission, seul lebouton de soumission actif russira.Soumission du formulaire Chapitre 9371LE GUIDE COMPLETj Toutes les cases cocher actives (sur marche ) peuventrussir.j Dans le cas de boutons doption qui partagent le mme nom (lamme valeur pour lattribut name), seul le bouton doption activpeut russir.j Pour les menus, le nom de commande est donn par llmentSELECT et les valeurs sont fournies par les lments OPTION.Seules les options slectionnes peuvent russir. Si aucune optionnest slectionne, la commande choue : ni le nom ni aucunevaleur ne sont soumis au serveur avec le formulaire.j La valeur courante dune slection de fichiers est une liste dun ouplusieurs noms de fichiers. Lors de la soumission du formulaire,le contenu de chaque fichier est soumis avec le restant desdonnes du formulaire. Les contenus des fichiers sontconditionns en fonction du type de contenu du formulaire.j La valeur courante dune commande dobjet est dtermine parlimplmentation de lobjet.Si une commande est dpourvue de valeur courante au moment de lasoumission du formulaire, les agents utilisateurs ne sont pas obligs dela traiter comme une commande russie.En outre, les agents utilisateurs ne doivent pas considrer lescommandes suivantes comme tant russies :j Les boutons de rinitialisation.j Les lments OBJECT dont lattribut declare nest pas spcifi.Les commandes caches et les commandes qui ne sont pas restitues enraison de leffet dune feuille de style peuvent quand mme russir. Parexemple :Cela entrane malgr tout laccouplement de la valeur au nommot_de_passe_invisible et leur soumission avec le formulaire.372 LE GUIDE COMPLETFormulairesChapitre 9Traitement des donnes du formulaireLorsque lutilisateur soumet le formulaire (par exemple, en activant unbouton de soumission), lagent utilisateur le traite de la maniresuivante.1 Premire tape : identification 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 descommandes russies).3 Troisime tape : codage du jeu des donnes du formulaire.Le jeu des donnes du formulaire est alors cod en fonction dutype de contenu spcifi par lattribut enctype de llmentFORM.4 Quatrime tape : soumission du jeu des donnes du formulairecod.5 Enfin, les donnes codes sont envoyes lagent de traitementdsign par lattribut action, en utilisant le protocole spcifipar lattribut method.Cette spcification ne dfinit pas toutes les mthodes de soumissionvalides ni les types de contenu qui peuvent tre employs avec lesformulaires. Les agents utilisateurs HTML 4 doivent cependant obiraux conventions tablies dans les cas suivants :j Si la valeur de lattribut method est get et la valeur de lattributaction est un URI HTTP, alors lagent utilisateur prend la valeurde lattribut action, lui rajoute un caractre ? et enfin le jeu desdonnes du formulaire, cod en utilisant le type de contenuapplication/xwwwformurlencoded. Lagent utilisateurtraverse alors le lien vers cet URI. Dans ce scnario, les donnesdu formulaire se limitent aux codes ASCII.j Si la valeur de lattribut method est post et la valeur de lattributaction est un URI HTTP, alors lagent utilisateur conduit unetransaction HTTP post en utilisant la valeur de lattribut actionet un message cr en fonction du type de contenu spcifi parlattribut enctype.Pour toute autre valeur de lattribut action ou method, lecomportement nest pas spcifi.Soumission du formulaire Chapitre 9373LE GUIDE COMPLETLes agents utilisateurs devraient restituer les rponses des transactionsHTTP get et post.Types de contenu du formulaireLattribut enctype de llment FORM spcifie le type de contenu utilispour coder le jeu des donnes du formulaire en vue de sa soumission auserveur. Les agents utilisateurs doivent reconnatre les types de contenulists ci-dessous. Le comportement pour dautres types de contenu nestpas spcifi.Le type de contenu par dfaut est application/xwwwformurlencoded. Les formulaires soumis avec ce type de contenudoivent tre cods comme suit :1 Les noms de commandes et les valeurs sont chappes. Lescaractres espace sont remplacs par des caractres plus (+)puis les caractres rservs sont chapps comme dcrit dans ledocument [RFC1738], section 2.2. Les caractres nonalphanumriques sont remplacs par une squence de la forme%HH : un caractre pourcentage et deux chiffres hexadcimaux quireprsentent le code ASCII du caractre en question. Les sauts deligne sont reprsents par des couples de caractres CR LF(%0D%0A).2 Les couples nom/valeur des commandes sont lists selon leurordre dapparition dans le document. Le nom est spar de lavaleur par un caractre gal =, et les couples nom/valeur sontspars les uns des autres par des esperluettes (&).Le type de contenu application/xwwwformurlencoded estinefficace pour lenvoi de grandes quantits de donnes binaires ou detexte contenant des caractres non ASCII.Lautre valeur possible est multipart/formdata. Cest le type decontenu employer pour la soumission de formulaires contenant desfichiers, des donnes non ASCII et des donnes binaires.374 LE GUIDE COMPLETFormulairesChapitre 99.5. Remarques proposdes formulairesAvant de crer un formulaire sur votre site, la premire chose qui vousvient lesprit est de dgager les questions qui vont tre poses, et cellesqui seront obligatoires. Il est en effet possible dempcher la soumissiondun formulaire si un des champs obligatoires nest pas rempli. Ceci estsouvent utilis sur le Web pour exiger un nom ou une adresse.Cela nest toutefois quun aspect du problme. Il est plus importantencore de savoir de quelles informations vous avez rellement besoin etcomment expliquer ce fait lutilisateur. Certains sites exigent beaucoupplus dinformations que ncessaire. Est-il rellement indispensable dedemander son numro de tlphone un utilisateur pour obtenirsimplement des commentaires sur votre site ? Toute information possdeune valeur, et les utilisateurs deviennent de plus en plus mfiants sur lesdonnes quils fournissent gratuitement. Ils peuvent en outre ne passavoir qui vous tes exactement, ou pourquoi vous voulez cetteinformation.Vous ne devez demander et plus forte raison nexiger que lesinformations strictement ncessaires lobjectif de votre formulaire. Sila raison pour laquelle vous voulez ces informations nest pasinstantanment vidente, alors expliquez vos motivations. Si vousconservez des donnes utilisateur dans un fichier, vous devez dclarercelui-ci la CNIL (Commission Nationale Informatique et Libert).Un formulaire HTML ne prsente que peu ou pas dintrt en labsencedun dispositif capable de traiter les informations recueillies. Cetraitement est gnralement effectu laide de scripts, qui feront lobjetdu prochain chapitre.Figure 9.22 :Champs de formulaireobligatoires, dans le formulairedenregistrement du site deMicroApplication.Remarques propos des formulaires Chapitre 9375LE GUIDE COMPLET9.6. Rsumj Un formulaire constitue un moyen dapporter un peudinteractivit une page HTML.j Vous crez un formulaire dans une page HTML laide dellment FORM. Cet lment agit comme conteneur gnral duformulaire, notamment pour les commandes.j Les utilisateurs interagissent avec les formulaires au moyen decommandes nommes. Le nom dune commande est spcifipar son attribut name. Chaque commande possde la fois unevaleur initiale et une valeur courante. La valeur initiale dunecommande peut gnralement tre spcifie laide de lattributvalue de llment de commande.j HTML dfinit plusieurs grands types de commandes : boutonsdaction, cases cocher, boutons doption, menus, saisie de texteet slection dun fichier.j Llment INPUT est le plus employ dans un formulaire. Ilpermet de crer des boutons daction, des cases cocher, desboutons doption, la saisie dun texte dune ligne et la slection defichiers. Son attribut type spcifie le type de la commande.j La valeur text est la valeur par dfaut de cet attribut. Elle creune commande de saisie de texte sur une seule ligne. La valeurpassword cre une commande de saisie de texte sur une seuleligne de type mot de passe : le texte saisi est restitu demanire dissimuler les caractres. La valeur checkbox cre unecase cocher, tandis que la valeur radio cre un boutondoption. Les valeurs submit et reset crent respectivement unbouton de soumission et un bouton de rinitialisation. La valeurimage cre un bouton de soumission graphique. La valeurbutton cre un bouton daction. La valeur hidden cre unecommande cache. Enfin, la valeur file cre une commande deslection de fichiers.j Les boutons crs par llment BUTTON fonctionnent exactementcomme ceux crs avec llment INPUT, mais offrent despossibilits de restitution plus varies, puisque llment BUTTONpeut possder un contenu.j Vous crez un menu laide dun lment SELECT. Chaqueoption du menu est reprsente par un lment OPTION. Unlment SELECT doit contenir au moins un lment OPTION.376 LE GUIDE COMPLETFormulairesChapitre 9j Vous pouvez regrouper logiquement des options laide dellment OPTGROUP.j Llment TEXTAREA permet de crer une zone de texte de saisiemultiligne.j Llment LABEL permet de spcifier un libell pour lescommandes dpourvues de libell implicite.j Llment FIELDSET permet de regrouper par thme lescommandes et les libells apparents.j Llment LEGEND permet aux auteurs dassigner une lgende un lment FIELDSET.j 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 touchesdaccs rapide.j Lordre de tabulation est dfini de faon explicite laide delattribut tabindex. Une touche daccs rapide est dfinie pourun lment laide de lattribut accesskey.j Vous dclarez une commande comme inactive laide delattribut boolen disabled.j Lattribut boolen readonly, lorsquil est prsent dans unecommande de formulaire, interdit les modifications de cettecommande.j Lattribut method de llment FORM spcifie la mthode HTTPemploye pour envoyer le formulaire lagent de traitement. Cetattribut admet deux valeurs : get et post.j Une commande est dite russie lorsque son nom est appari sa valeur courante et que ce couple appartient au jeu des donnesdu formulaire qui est soumis.j Les donnes sont envoyes lagent de traitement dsign parlattribut action, en utilisant le protocole spcifi par lattributmethod.j Lattribut enctype de llment FORM spcifie le type de contenuutilis pour coder le jeu des donnes du formulaire en vue de sasoumission au serveur. Il existe deux types de contenu reconnus :par dfaut, application/xwwwformurlencoded etmultipart/formdata, employer pour la soumission deformulaires contenant des fichiers, des donnes non ASCII et desdonnes binaires.Rsum Chapitre 9377LE GUIDE COMPLETScriptsIntroduction aux scripts .................................................................................................... 381lment SCRIPT ................................................................................................................. 383vnements intrinsques ................................................................................................. 390Travail avec les scripts ...................................................................................................... 396Applets .................................................................................................................................. 424Rsum ................................................................................................................................ 432Vous savez dsormais crer une page Web dune relative complexitsans trop de difficults. Vous savez y incorporer des graphismes et yadjoindre des liens. Vous allez dans ce chapitre apprendre doter vospages Web de plus de dynamisme grce lemploi de scripts.Un script est un programme crit dans un langage de programmationparticulier. Son excution est dclenche par un vnement qui se produitsur la machine cliente, soit automatiquement (comme au chargement dundocument HTML) soit suite une action de lutilisateur.Il existe deux types de scripts : les scripts ct serveur et les scripts ctclient.j Les scripts ct serveur sont situs et sexcutent comme leurnom lindique sur le serveur, et peuvent envoyer un rsultat versla machine cliente. Ils taient anciennement de type CGI(Common Gateway Interface), une technique qui permettait delancer un programme sur une machine en utilisant les entres decelle dun client. Dautres scripts ct serveur comprennent desimages cliquables ct serveur et des extensions ou APIbrevetes, comme ASP (Active Server Pages), ColdFusion,FrontPage Extensions ou le trs populaire PHP.j Les scripts ct client sont des programmes qui peuventaccompagner le document HTML ou bien y tre directementincorpors. Ils sexcutent sur la machine cliente (prservant ainsiles ressources du serveur) galement suite un vnement. Nousreviendrons par la suite sur les vnements HTML. HTML gre lesscripts dune faon indpendante du langage de script. Ces scriptssont gnralement rdigs en JavaScript ou en VBScript, etncessitent de lutilisateur un navigateur capable et autoriss lireet excuter le langage de script que vous utilisez, quel quil soit.Les scripts ct client sont donc trs dpendants du navigateur, maisils 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, deferNOSCRIPTAPPLET, code, width, heightOBJECT, codetype, codebase, classid, data, type, archive,declare, standbyPARAM, name, value, valuetype380 LE GUIDE COMPLETScriptsChapitre 1010.1. Introduction aux scriptsLes scripts permettent daugmenter la ractivit et le dynamisme dedocuments HTML. Par exemple :j Modifier dynamiquement le contenu dun document lors duchargement de celui-ci.j Accompagner un formulaire et valider les donnes avant lasoumission.j Actions particulires suite un vnement comme le chargement,le dchargement, la prise de focus dun lment, le mouvement dela souris, etc.j Action lie aux commandes dun formulaire (par exemple, lesboutons) pour simuler une interface utilisateur graphique.Cette liste permet de sparer les scripts en deux catgories principales :j Scripts action unique : ils sont excuts une seule fois, lors duchargement du document par lagent utilisateur. Ils apparaissentdans le document lintrieur dun lment SCRIPT. Pour tenircompte des agents utilisateurs qui ne peuvent pas grer les scripts,mieux vaut inclure un contenu de remplacement via llmentNOSCRIPT.Ces scripts sont capables de modifier dynamiquement le contenu dudocument. Leurs capacits dpendent du langage de script concern. Lamodification dynamique dun document peut tre modlise commesuit :j Tous les lments SCRIPT sont valus dans lordre au fur et mesure du chargement du document.j Toutes les structures de script lintrieur dun lment SCRIPTdonn, qui gnrent des valeurs SGML de type CDATA, sontvalues. Leur texte gnr combin est insr dans le document la place de llment SCRIPT.j Les donnes gnres de type CDATA sont rvalues.Par exemple, imaginons le fragment de document suivant (vousltudierez plus en dtail par la suite) :if (Navigateur == Netscape){document.write("dattirer lattention des dveloppeurs. Microsoft a mme dvelopp sapropre version de JavaScript, nomme JScript. Cela sest traduit lpoque par une fragmentation croissante des sites Web : une fonctionntait reconnue que par un type de navigateur et partageait le public endeux parties, ceux qui possdaient un navigateur compatible et tous lesautres.Tout ce qui impose aux concepteurs Web de faire un choix quant laplate-forme de destination est une ngation de la technologie et delesprit qui rgit Internet et le World Wide Web. Lide originelle tait etreste de partager ides et informations, indpendamment de lordinateur,du systme dexploitation ou de lapplication.La tendance est toutefois dsormais au respect de ECMAScript, unetentative de normalisation du noyau du langage JavaScript et de sesdrivs : sa syntaxe, ses mots-cls et ses composants natifs. La troisimedition 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 suitede ce chapitre. Pour le moment, intressons-nous la faon dincorporerun script ct client un document HTML.10.2. lment SCRIPTVous insrez un script dans un document laide de llment SCRIPT,obligatoirement dot de balises douverture et de fermeture. Cet lmentpeut apparatre un nombre quelconque de fois dans les lments HEADou BODY dun document HTML.Par exemple, ajoutons notre page daccueil un petit script :1 Ouvrez accueil.html dans le Bloc-Notes.2 Modifiez le numro de version :3 Insrez, dans llment H2 du corps (llment BODY), llmentSCRIPT suivant, en remplaant ce qui se trouve entre la balisedouverture H2 et llment EM :document.write("Bienvenue sur ")-->mon site.4 Enregistrez votre fichier, sans modifier son nom, puis ouvrezindex.html dans un navigateur. Gure passionnant : leffet eststrictement identique la version prcdente (regardez laFigure 10.1 et comparez-la la Figure 8.10).Ce script JavaScript (remarquez la valeur de lattribut type) est en effetdune grande simplicit, puisquil ne contient quune instruction :document.write signifie imprimer lcran linformation placeentre parenthses . Celle-ci tant identique au texte original, aucunediffrence nest visible. Autrement dit, ce script est strictement identique la version prcdente du code, soit :Bienvenue sur mon site.Nous reviendrons par la suite sur la signification des lignes ,mais souvenez-vous quil sagit dun commentaire HTML.JavaScript dsactivAucune diffrence nest visible si, et seulement si, votre navigateur estconfigur de faon autoriser les scripts. Si ce nest pas le cas, vousobtenez quelque chose de similaire ce qui est prsent figure suivante.Figure 10.1 :Votre premier scriptJavaScript384 LE GUIDE COMPLETScriptsChapitre 10Activer JavaScriptVous activez JavaScript avec Firefox en choisissant Outils > Options.Slectionnez Gnral dans la zone de gauche, puis cochez loptionAutoriser JavaScript.Avec Internet Explorer, les rglages seffectuent en choisissant Outils >Options Internet, puis en cliquant sur longlet Scurit. Reportez-vouspour plus de dtails la documentation de votre navigateur. InternetExplorer 6 vous informe si une page contient un ou plusieurs script alorsque le navigateur nest pas configur pour les accepter.Ce script ne prsentant gure dintrt, essayons autre chose :1 Revenez accueil.html, ouvert dans le Bloc-Notes.2 Enregistrez le fichier sous le nom accueil_3_10_1.html.3 Modifiez le numro de version :4 Redonnez llment H2 sa forme antrieure :Bienvenue sur mon site.Figure 10.2 :Page daccueil sous Firefox,JavaScript tant dsactiv.Figure 10.3 :Message dInternet Explorer, qui signale que lesscripts sont dsactivs.lment SCRIPT Chapitre 10385LE GUIDE COMPLET5 Insrez aprs cet lment le code suivant :6 Enregistrez votre fichier sous le nom accueil.html, puis ouvrezindex.html dans un navigateur. Le rsultat est plus intressant.Remarquez dans cette figure que Firefox est identifi comme navigateurNetscape. Il est possible dobtenir plus de dtails, en particulier sur laversion employe, comme vous le verrez par la suite.Dfinition du type de script : dclarationMETA et attribut type de llment SCRIPTNous ne le rpterons jamais assez : HTML ne dpend pas dun langagede script particulier. Vous devez indiquer explicitement aux agentsutilisateurs le langage de chaque script.Vous pouvez spcifier un langage de script par dfaut pour tous lesscripts dun document. Pour ce faire, placez la dclaration METAsuivante dans llment HEAD :Figure 10.4 :Affichage du type denavigateur laidedun scriptJavaScript386 LE GUIDE COMPLETScriptsChapitre 10La valeur un_certain_type reprsente le type de contenu qui nommele langage de script, par exemple text/tcl, text/JavaScript outext/vbscript.Un document qui ne spcifie pas de langage de script par dfaut et quicontient un ou plusieurs lments spcifiant un ou plusieurs scriptsdvnement intrinsque est incorrect. Les agents utilisateurs peuventtoujours essayer dinterprter les scripts spcifis incorrectement, maisne sont nullement tenus de le faire.Vous pouvez galement spcifier localement le langage dun script endfinissant lattribut type de son lment SCRIPT dans le document. Lavaleur de lattribut type spcifie le langage de script du contenu dellment. Il outrepasse le langage de script par dfaut. Le langage descript est spcifi comme type de contenu (par exemple,text/javascript). Il faut fournir une valeur pour cet attribut, qui estdpourvu de valeur par dfaut. Cet attribut remplace dsormais lattributlanguage, qui spcifiait le langage de script du contenu de cet lment laide dun identifiant du langage. Ces identifiants ntant pasnormaliss, lattribut est dconseill en faveur de lattribut type.Autres attributs de llment SCRIPTUn script peut tre dfini en contenu de llment SCRIPT (comme dansles exemples prcdents) ou dans un fichier externe. Lattribut srcspcifie alors lemplacement du script externe :Si lattribut src nest pas spcifi, lagent utilisateur doit interprter lecontenu de llment comme tant le script. Dans le cas contraire,lagent utilisateur doit ignorer le contenu de llment et ramener lescript dsign par lURI. Remarquez que lattribut optionnel charsetse rfre lencodage de caractres du script dsign par lattribut srcet non au contenu de llment SCRIPT.Quand il est prsent, lattribut boolen defer indique lagentutilisateur que le script ne va gnrer aucun contenu de document (parexemple, aucune instruction document.write en JavaScript). Lagentutilisateur peut donc poursuivre lanalyse et la restitution.lment SCRIPT Chapitre 10387LE GUIDE COMPLETCas des agents utilisateurs qui ne grentpas les scriptsLes scripts sont prcieux, mais il serait dommage de fonder un site surlexploitation de ceux-ci sans tenir compte des agents utilisateurs qui nereconnaissent pas les scripts. Deux prcautions sont prendre :j Fournir un contenu de remplacement aux agents utilisateurs quine reconnaissent pas les scripts ou ne sont pas configurs pour lesaccepter.j Dissimuler le contenu de ceux-ci pour les agents utilisateurs quiseraient susceptibles dafficher leur contenu comme du texte.Nous allons examiner ces deux prcautions.lment NOSCRIPTLlment NOSCRIPT permet de fournir un contenu de remplacementlorsque, pour une raison quelconque, un script nest pas excut. Lecontenu de llment NOSCRIPT ne doit tre restitu par un agentutilisateur reconnaissant les scripts que dans les cas suivants :j Lagent utilisateur est configur pour ne pas excuter (valuer) lesscripts.j Lagent utilisateur ne reconnat pas le langage de script invoqupar un lment SCRIPT apparu plus tt dans le document.Les agents utilisateurs qui ne grent pas les scripts ct client doiventrestituer le contenu de cet lment.Dans lexemple suivant, lagent utilisateur qui interprte llmentSCRIPT va inclure certaines donnes cres dynamiquement dans ledocument. Sil ne reconnat pas les scripts, lutilisateur peut toujoursobtenir les donnes grce un lien....un script javascrit qui incorpore des donnes...Acc aux donnes.388 LE GUIDE COMPLETScriptsChapitre 10Grce llment NOSCRIPT, vous pouvez fournir de prcieusesindications vos visiteurs.Dissimulation des donnes de scriptaux agents utilisateursLa seconde prcaution consiste dissimuler le contenu des scripts. Eneffet, un agent utilisateur qui ne reconnat pas llment SCRIPT vavraisemblablement restituer le contenu de cet lment comme un texte.Certains moteurs de script, dont ceux des langages JavaScript etVBScript, autorisent la dlimitation des dclarations dun script par uncommentaire SGML . Les agents utilisateurs qui nereconnaissent pas llment SCRIPT ignoreront le commentaire tandisque les moteurs de script intelligents comprendront que le script dans lecommentaire doit tre excut.Solution alternativeUne autre solution ce problme consiste placer les scripts dans desdocuments externes et les appeler avec lattribut src.Avec JavaScript, vous pouvez employer la chane Figure 10.5 :Exemple de contenu dunlment NOSCRIPTlment SCRIPT Chapitre 10389LE GUIDE COMPLETcommentaire qui stend jusqu la fin de la ligne courante. Elle estncessaire pour dissimuler la chane > lanalyseur JavaScript (mmesi celle-ci ne lui pose gnralement pas de problme).Voici un exemple :" la fonction.","")return i * i}document.write("La fonction a renvoy& ",square(i),".")// fin de la dissimulation du contenu -->Avec VBScript, cest le caractre guillemet simple qui fait, du restede la ligne courante, un commentaire. Par exemple :Vous lavez compris, le choix du caractre de commentaire dpend dulangage de script employ. Avec Tcl, par exemple, ce serait le caractre#, etc.Fermeture de commentairesCertains navigateurs referment les commentaires au premier caractre> rencontr. Pour dissimuler le contenu du script ces navigateurs, vouspouvez transposer les oprandes des oprateurs relationnels et dedcalage (par exemple, en crivant y < x plutt que x > y) ouemployer le mcanisme dchappement du langage de script pour lecaractre >.10.3. vnements intrinsquesChaque langage de script obit ses propres rgles pour appeler desobjets HTML partir dun script. La spcification HTML ne dfinitaucun mcanisme standard dappel des objets HTML. La syntaxe desdonnes du script dpend du langage de script.390 LE GUIDE COMPLETScriptsChapitre 10Les scripts doivent toutefois rfrer un lment en fonction du nomqui lui est assign. Les moteurs de script doivent observer la rgle deprsance suivante dans lidentification dun lment : lattribut nameest prioritaire sur lattribut id si les deux sont prsents. Sinon, lun oulautre 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 intrinsquesDes modifications vont probablement tre apportes aux vnementsintrinsques, notamment en ce qui concerne la faon dont les scripts sontrattachs aux vnements. Les recherches dans ce domaine sont menespar 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 plusde renseignements.Le script sexcute chaque fois que lvnement se produit pour cetlment. La syntaxe des donnes de script dpend du langage de script.Les vnements reconnus par les diffrents lments HTML sontprsents dans le tableau suivant.Tableau 10.1 : vnements intrinsques HTMLvnement Survient lorsquevnements concernant les lments BODY et FRAMESETonload Lagent utilisateur finit de charger une fentre ou bientous les cadres dans un jeu dencadrement FRAMESETonunload Lagent utilisateur retire le document dune fentre oudun cadrevnements de formulaire (lment FORM)onsubmit Un formulaire est soumisonreset Un formulaire est rinitialisvnements concernant les commandes de formulairevnements intrinsques Chapitre 10391LE GUIDE COMPLETTableau 10.1 : vnements intrinsques HTMLvnement Survient lorsqueonfocus Un lment reoit le focus via le dispositif de pointage ouune navigation par tabulation. Sapplique aux lments A,AREA, LABEL, INPUT, SELECT, TEXTAREA et BUTTON.onblur Un lment perd le focus via le dispositif de pointage ouune navigation par tabulation. Sapplique aux mmeslments que onfocus.onselect Lutilisateur slectionne un certain texte dans un champtextuel. Sapplique aux lments INPUT et TEXTAREA.onchange Une commande perd le focus ou sa valeur a t modifiedepuis linstant o elle a reu le focus. Sapplique auxlments INPUT, SELECT et TEXTAREA.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 Le bouton du dispositif de pointage est cliqu au-dessusdun lmentondblclick Le bouton du dispositif de pointage est double-cliqu au-dessus dun lmentonmousedown Le bouton du dispositif de pointage est appuy au-dessusdun lmentonmouseup Le bouton du dispositif de pointage est relch au-dessusdun lmentonmouseover Le dispositif de pointage est dplac sur un lmentonmousemove Le dispositif de pointage est dplac alors quil est au-dessus dun lmentonmouseout Le dispositif de pointage est dplac en dehors dunlmentonkeypress Une touche est presse puis relche au-dessus dunlmentonkeydown Une touche est garde appuye au-dessus dun lmentonkeyup Une touche est relche au-dessus dun lmentComme vous pouvez le voir, la liste des vnements quil est possibledidentifier et de relier une action est impressionnante. Vous pouvezpar exemple employer des lments de commande de formulaire(INPUT, SELECT, BUTTON, TEXTAREA et LABEL), qui rpondent tous 392 LE GUIDE COMPLETScriptsChapitre 10certains vnements intrinsques, pour amliorer linterface utilisateurgraphique du document.Voici quelques exemples demploi dvnements intrinsques.Nous avions vu, lors de lexamen des formulaires, que certains champspouvaient tre obligatoires, et quil tait possible de tester la validit desdonnes dun formulaire avant sa soumission laide de scripts.Dans le premier exemple, la commande nomme nomUtilisateur estun champ obligatoire. Lorsque lutilisateur quitte ce champ, celui-ciperd le focus (vnement onblur), ce qui appelle une fonctionJavaScript qui teste la validit de nomUtilisateur.Dans lexemple suivant, le champ nombre doit normalement contenirune valeur comprise entre 1 et 10. Le code JavaScript suivant vrifie cefait aprs la saisie dun nombre par lutilisateur :Document.writeUne dclaration document.write ou quivalente place dans ungestionnaire dvnements intrinsques cre et crit vers un nouveaudocument au lieu de modifier le document courant.Voici enfin un autre exemple demploi dvnements intrinsques.Supposons que nous ayons modifi la barre de navigation en remplaantle texte par une icne. Pour licne correspondant Accueil, ce pourraittre une icne nomme accueil.gif.Le fichier de la barre de navigation a t modifi en consquence (cefichier se trouve dans les fichiers exemples sous le nom barrenav1.html ;vous devez lappeler laide du fichier index1.html, galement prsent) :vnements intrinsques Chapitre 10393LE GUIDE COMPLETLaspect de la barre de navigation, ainsi modifie, serait quelque chosedanalogue ce qui est prsent dans la figure suivante.Imaginez que nous voulions que lutilisateur visualise encore mieux sanavigation en modifiant laspect de licne. Pour faire simple, nous noussommes borns ici inverser les couleurs de licne, laide de lafonction Ngatif de Paint Shop Pro, pour crer un fichier nommaccueil2.gif.Nous modifions alors comme suit llment A qui concerne la pagedaccueil, en ajoutant ce qui suit :Ce fichier se trouve dans les fichiers exemples, sous le nombarrenav2.html. En lexaminant dans votre navigateur (en appelantindex2.html, galement fourni), vous constatez que, lorsque votredispositif de pointage (en principe votre souris) est plac au-dessus delicne Accueil, celle-ci se modifie immdiatement : cela ajoute delinteractivit et du dynamisme votre site, pour des efforts sommetoute relativement faibles.Figure 10.6 : Aspect de la barre de navigation modifieFigure 10.7 :Aspect des icnes accueil.gif etaccueil2.gif394 LE GUIDE COMPLETScriptsChapitre 10Ce petit fragment de code mrite que vous lexaminiez dun peu plusprs, pour comprendre ce qui se passe. Il est un peu particulier en cequil nemploie pas un vrai script (vous remarquerez labsencedlment 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 dfini comme prcdemment, mais avezgalement dfini un autre attribut, lowsrc, avec comme valeur laseconde icne.Dans llment A, vous avez ajout deux gestionnaires dvnements :un pour onmouseover (la souris est sur licne) et un pouronmouseout (la souris quitte licne).Par dfaut, la souris nest pas sur licne et licne affiche est celle quicorrespond la valeur de lattribut src de llment IMG (ou acc.src,puisque cet lment se nomme acc), soit donc celle situe lURIimages/accueil.gif.Lorsque la souris se place sur licne, la valeur de acc.src est placedans la variable t et est remplace par la valeur de acc.lowsrc, soitlURI qui mne la seconde icne : images/accueil2.gif. Lagentutilisateur applique alors la modification et affiche la seconde icne.Lorsque le curseur quitte licne, la valeur de t est place dansacc.src et la premire icne est nouveau affiche.Modle Objet de Document (DOM)Le Modle Objet de Document (DOM), spcification du W3C (http://xmlfr.org/w3c/TR/REC-DOM-Level-1/), est une interface de programmationdapplications (API) pour documents HTML et XML. Il se divise endeux parties : DOM Core (ou noyau) et DOM HTML (les spcificationspropres HTML).Figure 10.8 : Modification la vole de licne selon que le dispositif depointage est plac ou non dessusvnements intrinsques Chapitre 10395LE GUIDE COMPLETLe DOM dfinit la structure logique des documents ainsi que lafaon dont vous accdez aux lments et les manipulez. Avec leModle Objet de Document, les programmeurs peuvent construire desdocuments, naviguer dans leur structure, et ajouter, modifier ousupprimer des lments ou du contenu. Tout ce qui se trouve dans undocument HTML ou XML peut tre accd, chang, dtruit ou ajouten utilisant le Modle Objet de Document, quelques rares exceptionsprs. DOM est conu pour tre utilis avec nimporte quel langage deprogrammation.Dans DOM, les documents ont une structure logique comparable unearborescence. Le nom Modle Objet de Document a t choisi parcequil sagit dun modle objet au sens traditionnel de la conceptionoriente objet : les documents sont modliss en utilisant des objets, tandisque le modle ne contient pas uniquement la structure du document maisaussi son comportement et celui des objets dont il est compos. Endautres 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 diffrentslments du document.Par exemple, dans lexemple ci-dessus, DOM contient llment HTML Aainsi que les vnements associs onMouseOver et onMouseOut. Lesattributs des lments HTML nomms sont traits comme des propritsde lobjet. Ainsi, vous accdez lattribut src de llment IMG nommacc laide de acc.src.Une tude plus complte du DOM dpasse largement lobjectif de celivre. Reportez-vous si ncessaire la spcification du W3C, ladresseindique en haut de cet encadr.10.4. Travail avec les scriptsVous devez lavoir compris, si insrer un script, interne ou externe, dansun document HTML ne prsente gure de difficults, cest tout autrechose ds que lon passe la rdaction de ces scripts.Les langages de script sont gnralement rputs ne pas tre trs faciles apprendre. Si vous souhaitez vous y attaquer, commencez par lasyntaxe : cest la grammaire fondamentale des langages informatiques,de programmation, de script ou hypertextes. Aprs avoir compris lasyntaxe, passez au vocabulaire : les mots rservs et les noms. Parexemple, en quoi un frame JavaScript diffre-t-il dun FRAME HTML ?396 LE GUIDE COMPLETScriptsChapitre 10Vous pouvez apprendre un langage de script en utilisant la mmemthode que celle dont vous vous tes servi pour HTML : en achetantun ouvrage consacr au langage qui vous intresse, en examinant descodes source dans votre navigateur Web, ainsi quen menant desrecherches dans les listes de diffusion et les forums de discussion.Sans vouloir plonger trop avant dans ltude de ces langages de script, ilexiste 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 lessaisir nouveau, un simple copier-coller permet dobtenir rapidement lersultat souhait. Il en va de mme pour les scripts : rutiliser vosfragments de code conomise du temps et des efforts. Si une fonction ouune sous-routine fonctionne la perfection, mieux vaut ne pas larcrire dans chaque document, mais en faire un script externe appelpar plusieurs documents. En outre, de nombreux concepteursindpendants partagent leur travail avec tous, encourageant le public utiliser et rutiliser leur guise leurs scripts. Lorsque vous voulezaccomplir quelque chose, il existe de fortes chances pour quunprogrammeur autre que vous y ait dj pens et ait mme propos sonscript gratuitement sur le Net.Un dernier point : la scurit des scripts. Les scripts sont globalementbien moins dangereux quon ne le laisse supposer. Plus exactement, lesdangers quils prsentent sont le plus souvent dus des failles descurit des navigateurs et des systmes dexploitation. Des mises joursont rgulirement diffuses pour pallier ces failles lorsquelles sontidentifies. Veillez toujours rechercher au moins mensuellement lesmises jour de scurit qui sappliquent votre navigateur et votresystme dexploitation.Nous allons maintenant examiner un peu plus en dtail les principauxlangages de script.JavaScriptLe JavaScript est un langage qui permet dcrire des scripts incorporsdans un document HTML. Historiquement, cest le premier langage descript pour le Web qui a permis aux dveloppeurs Web dexcuter depetits programmes sur le navigateur Web plutt que sur le serveur Web,do le terme de script ct client.Travail avec les scripts Chapitre 10397LE GUIDE COMPLETJavaScript a t mis au point par Netscape en 1995. lorigine, il senommait LiveScript et tait destin fournir un langage de script simpleau navigateur Netscape Navigator 2. Il a, lpoque, t longtempscritiqu pour son manque de scurit, son dveloppement peu pouss etlabsence de messages derreur explicites rendant dlicate sonutilisation. Le 4 dcembre 1995, suite une association avec leconstructeur Sun, Netscape rebaptise son langage JavaScript (un clindil au langage Java dvelopp par Sun). la mme poque,Microsoft met au point le langage JScript, un langage de script trssimilaire.De ce fait, le langage JavaScript dans ses diffrentes versions (jusqu2.0 pour JavaScript au sens strict, plus les versions de JScript) estfortement dpendant du navigateur appelant la page Web dans laquellele script est incorpor (reportez-vous plus loin au tableau page 407).Ainsi, pour viter toute drive, un standard a t dfini pour normaliserles langages de script. Il sagit de lECMA-262, aussi appelECMAScript, cr par lorganisation du mme nom (ECMA, EuropeanComputer Manufactures Association). Nous reviendrons par la suite surECMAScript.Il ne ncessite toutefois pas de compilateur, contrairement au langageJava avec lequel il a longtemps t et reste parfois confondu : le code estdirectement crit dans la page HTML. Cest un langage peu volu quine permet aucune confidentialit au niveau des codes : ceux-ci restentvisibles.Vous avez dj rencontr JavaScript dans ce chapitre. Ce livre na paspour vocation de vous apprendre tout ce quil faudrait savoir propos deJavaScript, mais vous allez cependant en dcouvrir la syntaxe principaleet le vocabulaire de base. Cela est suffisant pour dbuter avecJavaScript.JavaScript permet de personnaliser lapparence de documents HTML,douvrir et de fermer des botes de dialogue surgissantes (pop-up), demanipuler des cookies, dexcuter des calculs ainsi que de gnrer et demanipuler dynamiquement le contenu de la page HTML elle-mme.JavaScript a recours au Modle Objet de Document (DOM), cit dans lasection prcdente, pour modifier dynamiquement la page Web.La syntaxe de JavaScript diffre de celle dHTML, sans en devenir pourautant effrayante. La syntaxe de base du langage, largement inspire decelle de C/C++, prsente les caractristiques suivantes :398 LE GUIDE COMPLETScriptsChapitre 10j Les commandes sont spares par un point-virgule (;).j Les accolades {}dfinissent un bloc de commande et permettentde limiter la porte des variables.j Un commentaire sur une ligne est prcd de //.j Un commentaire sur plusieurs lignes est encadr par la balisedouverture /* et la balise de fermeture */.JavaScript est sensible la casse. Cela signifie que si vous concevez unefonction nomme Date, vous ne pourrez lappeler laide de date,DATE ou DaTE : il faut imprativement lappeler avec Date.JavaScript est enfin un langage script orient objets, ce qui signifie quevous pouvez crer des classes et des instances dobjets. JavaScriptpropose en standard un certain nombre de classes, que vous pourrezutiliser votre aise pour crer vos programmes. Il sera donc possibledavoir des syntaxes du type :objet.methode(parametre);Lutilit de JavaScript pour les auteurs de pages Web dynamiques tienten grande partie au recours des fonctions. Un script JavaScript peuttre une simple ligne de code permettant de capturer la saisie duneportion de texte, ou de la date et de lheure courantes. Une fois la pagecharge, il nexiste aucun moyen de mettre jour lheure sans avoirrecours un lment META Refresh ou sans demander lutilisateurdactualiser (ou de recharger) la page. Si cependant le script qui permetdinclure lheure est situ dans une fonction JavaScript, celle-ci peut treexcute 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 unemeilleure conformit avec la spcification HTML 4.01 partir dunfichier disponible gratuitement sur lexcellent site de Je JavaScript.net(www.jejavascript.net/date.php). Ce script na quun but : afficher la datesystme.Listing 10-1 : date.js01 // PLF - http://www.jejavascript.net/02 var datedujour, date, mois, mois1, jour, jour1, an;03 datedujour = new Date();04 jour = datedujour.getDay()05 switch(jour){06 case 1 :07 jour1 ="Lundi"Travail avec les scripts Chapitre 10399LE GUIDE COMPLET08 break;09 case 2 :10 jour1 ="Mardi"11 break;12 case 3 :13 jour1 ="Mercredi"14 break;15 case 4 :16 jour1 ="Jeudi"17 break;18 case 5 :19 jour1 ="Vendredi"20 break;21 case 6 :22 jour1 ="Samedi"23 break;24 case 0 :25 jour1 ="Dimanche"26 break;27 }28 date = datedujour.getDate()29 mois = datedujour.getMonth()30 switch(mois+1){31 case 1 :32 mois1 ="Janvier"33 break;34 case 2 :35 mois1 ="Fvrier"36 break;37 case 3 :38 mois1 ="Mars"39 break;40 case 4 :41 mois1 ="Avril"42 break;43 case 5 :44 mois1 ="Mai"45 break;46 case 6 :47 mois1 ="Juin"48 break;49 case 7 :50 mois1 ="Juillet"51 break;52 case 8 :53 mois1 ="Aot"54 break;55 case 9 :56 mois1 ="Septembre"57 break;58 case 10 :59 mois1 ="Octobre"400 LE GUIDE COMPLETScriptsChapitre 1060 break;61 case 11 :62 mois1 ="Novembre"63 break;64 case 12 :65 mois1 ="Dcembre"66 break;67 }68 an = datedujour.getFullYear()Les lignes ont t numrotes uniquement pour faciliter linterprtationultrieure.Le fichier tel quil est prsent est un fichier externe, que vous devezappeler comme suit dans votre lment HEAD :Ce code JavaScript calcule la date systme. Comment fonctionne-t-il ?1 Vous dfinissez dans la ligne 2 plusieurs variables : datedujour,date, mois, mois1, jour, jour1 et an.2 Dans la ligne 3, vous affectez datedujour la valeur renvoyepar la mthode globale Date().3 Dans la ligne 4, vous affectez la variable jour la valeurrenvoye par la mthode datedujour.getDay(). Celle-cirenvoie 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 valeurrenvoye par la mthode datedujour.getDate(). Celle-cirenvoie un nombre qui correspond au jour du mois.6 Dans la ligne 29, vous affectez la variable mois la valeurrenvoye par la mthode datedujour.getMonth(). Celle-cirenvoie un nombre qui correspond au mois. Les lignes 30 67sont une instruction conditionnelle qui affecte la variable mois1le nom du mois en lettres.7 Dans la ligne 68, vous affectez la variable an la valeur renvoyepar la mthode datedujour.getFullYear(). Celle-ci renvoieun nombre qui correspond au jour du mois.Nous avons dfini des variables, mais ne les avons pas encoreemployes : cela respecte le principe de la sparation des logiques deTravail avec les scripts Chapitre 10401LE GUIDE COMPLETtravail et de prsentation. Pour afficher la date du jour, placez ce qui suitdans un lment SCRIPT dans le corps de votre document HTML :document.write("Le fichier est nettement plus court : 11 lignes au lieu de 68 ! Il pourraitdailleurs tre rendu encore plus compact, mais nous laissons cela votre sagacit. Examin dans votre navigateur, il procure des rsultatsidentiques la version prcdente.Cadres cibles et JavaScriptJavaScript utilise des cadres cibles et des fentres nommes pourcontrler le contenu dun document Web. Il peut vous jouer des toursquand vous ciblez partir dun cadre possdant une cible de base(lment BASE). Selon le navigateur, JavaScript peut employer la ciblede base au lieu de la cible spcifie dans le script. Vous pouvezcontourner 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 moteurde script. Vous trouverez certains des mots de ce vocabulaire dans letableau page 406.Trs succinctement, comme nous lavons signal plus haut, vous pouvezdcomposer le langage JavaScript en objets, mthodes et vnements.Lensemble dobjets disponibles pour le langage de script dpend dunavigateur utilis. Il sagit du Modle Objet de Document (DocumentObject Model, ou DOM), dj abord.Les mthodes dfinissent les actions de JavaScript. Dans lexempleprcdent,document.write(jour1, " ");Figure 10.10 :Autre script daffichage de la datesystmeTravail avec les scripts Chapitre 10403LE GUIDE COMPLETa recours la mthode write() pour insrer du texte dans lobjetdocument, et le faire ainsi apparatre dans votre navigateur Web.Enfin, les vnements permettent dappeler les fonctions. Si lesfonctions sont un ensemble dinstructions excutes chaque fois quevous prononcez le mot magique, alors lvnement est ce mot magique.Si le script contient une fonction nomme OuvreFenetre, vouspourriez appeler celle-ci laide dun vnement comme :,Cela excute le script. onLoad est lvnement qui indique aunavigateur quand appeler la fonction et excuter le script. Voici unexemple :Si vous placez ce script dans une page Web et ouvrez celle-ci avec votrenavigateur, vous pourriez obtenir lavertissement prsent dans la figuresuivante : ici les fentres surgissantes (popup) sont dsactives etFirefox vous prvient de la tentative.Figure 10.11 :Les fentres surgissantes sontdsactives404 LE GUIDE COMPLETScriptsChapitre 10En autorisant les fentres surgissantes pour ce site et en rafrachissantvotre document dans le navigateur, vous voyez apparatre une nouvellefentre.Globalement, les fentres surgissantes sont plus souvent pniblesquutiles : mieux vaut les laisser dsactives et ne les activer que lorsquecela est rellement ncessaire.Le vocabulaire JavaScript contient bien dautres mots, en sus des objets,mthodes et vnements prsents ici : par exemple, les matrices, lesinstructions et les oprateurs. Une matrice est une collection dobjets oude variables regroups sous un mme nom de variable. Nous en avonsemploy dans le fichier date2.js :nomMois = new Array("Janvier","Fvrier","Mars","Avril","Mai","Juin","Juillet","Aot","Septembre","Octobre","Novembre","Dcembre");Certaines instructions utilisent des mots rservs, comme if, else ifet switch. Nous avions employ cette dernire instruction dans lefichier date2.js :switch(jour){ instructions case }Chacune de ces instructions possde un sens prcis pour JavaScript.Cest ainsi que switch signifie branchez-vous sur linstruction casequi correspond la valeur du paramtre et accomplissez linstructionmentionne, puis sortez de linstruction switch .Figure 10.12 :Apparition dune fentresurgissanteTravail avec les scripts Chapitre 10405LE GUIDE COMPLETIl existe galement de nombreux oprateurs, les plus courants servantpour des oprations mathmatiques ou comme oprateurs decomparaison, par exemple dans une instruction if.Les objets documents, comme document.cookie, appartiennent aussibien JavaScript quau Modle Objet de Document (DOM). JavaScriptpossde plusieurs objets intgrs, comme lobjet cookie, qui peuventtre utiliss automatiquement comme parties de lobjet document. Lesmises en uvre Netscape et Microsoft du DOM sont toutefoislongtemps restes incompatibles, rendant difficile la vie du concepteurWeb.Le tableau suivant prsente quelques exemples dobjets ou propritsdocument, prcieux en JavaScript.Tableau 10.2 : Proprits de document JavaScriptNom de lapropritExemple But quivalentHTMLalinkColor document.alinkColor.#CC0000Dfinit la couleur des liensslectionnsbgColor document.bgColor.#FFFFFFDfinit la couleur darrire-planCookie document.cookieObtient la valeur de toutcookie associ cedocumentfgColor document.fgColor.#000000Dfinit la couleur du texte lastModified document.lastModifiedObtient la date de derniremodification du documentactiflinkColor document.linkColor.#0000CCDfinit la couleur des liens Location document.locationObtient lURL du document Referrer document.referrerLit lURL du document cible(la page Web lie audocument actif)Title document.title Rcupre le titre (llmentTITLE) du document actifURL Voir location406 LE GUIDE COMPLETScriptsChapitre 10Tableau 10.2 : Proprits de document JavaScriptNom de lapropritExemple But quivalentHTMLvlinkColor document.vlinkColor.#CC00CCDfinit la couleur des liensvisitsNous avons dit que le rendu et le bon fonctionnement de JavaScriptdpendaient largement du navigateur employ.Le tableau suivant prsente les versions de JavaScript prises en chargepar les principaux navigateurs.Tableau 10.3 : Versions JavaScript et navigateursVersion deJavaScriptNavigateursJavaScript 1.0 Netscape Navigator 2.0, Internet Explorer 3.0,Opera, MozillaJavaScript 1.1 Netscape Navigator 3.0, Opera, MozillaJavaScript 1.2 Netscape Navigator 4.0/4.05, Internet Explorer 4.0,Opera, MozillaJavaScript 1.3 Netscape Navigator 4.06, Internet Explorer 5.0,Opera, MozillaJavaScript 1.4 Netscape Navigator 6.0, Internet Explorer 6.0,Opera, MozillaJavaScript 1.5 Netscape Navigator 6.0, MozillaJavaScript 1.6 Firefox 1.5/Gecko 1.8JavaScript 1.7 Firefox 2/Gecko 1.8.1JavaScript 1.8 Firefox 3/Gecko 1.9 ( paratre).Si vous devez crire plusieurs versions dun programme, afin de tenircompte des agents utilisateurs employs par vos visiteurs, il seraitintressant de pouvoir dterminer le type dagent utilisateur employ.Cela est possible : nous lavons fait, quoique de faon trs primitive,dans la dernire version du fichier accueil.html :...document.write("Vous utilisez un navigateur "+ navigator.appName + "");-->...Il est possible de faire bien mieux, grce aux proprits de lobjetnavigator de JavaScript.1 Ouvrez accueil.html dans le Bloc-Notes.2 Enregistrez le fichier sous le nom accueil_3_10_2.html.3 Modifiez le numro de version :4 Dplacez llment SCRIPT par couper-coller juste avantllment HR du bas de la page.5 Insrez aprs la ligne de commentaire de llment SCRIPT lecode suivant, en remplacement de la ligne actuelle :6 Enregistrez votre fichier sous le nom accueil.html, puis ouvrezindex.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 llmentnavigator, prsentes dans le tableau suivant.408 LE GUIDE COMPLETScriptsChapitre 10Figure 10.13 :Affichage dtaill dutype de navigateur etdu systmedexploitation laidedun scriptJavaScript,respectivement pourFirefox, Figure 10.14 : pour InternetExplorerFigure 10.15 : pour Nvu.Travail avec les scripts Chapitre 10409LE GUIDE COMPLETTableau 10.4 : Proprits JavaScript de lobjet navigateur (navigator)Proprit Description ExempleappCodeName Renvoie le nom de code dunavigateur, le plus souventMozilla, le moteur utilis par laplupart des navigateurs (InternetExplorer, Netscape, mais aussibeaucoup de navigateurs sousUnix.). Cette valeur seradiffrente si le navigateur duclient est fond sur un autremoteur, comme Opera.MozillaappName Renvoie le nom du navigateur (laplupart du temps la marque).Cette proprit est utile pourdiffrencier les navigateurs deNetscape et de Microsoft.NetscapeappVersion Renvoie la version du navigateursous la forme suivante : numrode version (systmedexploitation): nationalit).Elle est utile pour connatre lesystme dexploitation delutilisateur, mais elle permetsurtout, en association avec laproprit navigator.appName,de connatre les fonctionnalitsprises en charge par lenavigateur de votre visiteur.5.0 (Windows, frFR)language Renvoie une chane decaractres qui correspond lalangue utilise par le navigateurdu client. Cette proprit nestcomprise que par lesnavigateurs prenant en chargeles versions 1.2 et suprieuresde JavaScript.frFRmimeTypes Renvoie un tableau des typesMIME pris en charge par lenavigateur, cest--dire les typesde fichiers enregistrs.application/xshockwaveflash,application/futuresplash,application/xjavavm,etc.platform Renvoie une chane decaractres qui indique lesystme dexploitation du client.Cette proprit nest compriseque par les navigateurs quiprennent en charge les versions1.2 et suprieures deJavaScript.Win32plugins Renvoie la liste des plug-in(modules complmentaires)installs sur la machine cliente.npnul32.dll, npswf32.dll,NPOJI610.dll,NPJava11.dll, etc.410 LE GUIDE COMPLETScriptsChapitre 10Tableau 10.4 : Proprits JavaScript de lobjet navigateur (navigator)Proprit Description ExempleuserAgent Renvoie la chane de caractresqui comprend toutes lesinformations sur lagentutilisateur du client. Lesproprits ci-dessus offrent unmoyen pratique de rcuprerune partie de cette information.Mozilla/5.0 (Windows, U,Windows NT 5.1, frFR,rv:1.7.8),Gecko/20050511,Firefox/1.0.4Puisque vous pouvez dterminer le type de lagent utilisateur du client,vous tes en mesure de crer un site rellement dynamique, qui orientele visiteur vers des pages conues spcifiquement pour lagent utilisateurdont il se sert. Par exemple, en remplaant dans la barre de navigationAccueilpar ce qui suit :Selon le navigateur, la page affiche diffre. Vous pouvez ainsi tirerprofit des caractristiques propres chaque navigateur.NOSCRIPTSi vous procdez ainsi, vous devriez en pratique placer la ligneremplace dans un lment NOSCRIPT, cela afin de prendre en compteles navigateurs ne reconnaissant pas les scripts, en ciblantventuellement une page dpourvue de tout script :Ma rgionTravail avec les scripts Chapitre 10411LE GUIDE COMPLETJavaScript est un des composants essentiels de la technologie AJAX(Asynchronous Javascript And XML). Les applications AJAX ontgnralement recours lobjet XMLHTTPRequest (XHR) pour envoyerune requte un script serveur et analyser dynamiquement les rsultatsde ce dernier via DOM. Internet Explorer a t le premier proposer cecomposant, sous forme dun ActiveX, ds la fin des annes 90. Ce nestquen 2002 que les dveloppeurs commencent massivement lutiliser,vu son adoption dans FireFox. Les versions dInternet Explorerantrieures la 7 ne graient pas lobjet XHR tels que dcrit dans lesstandards 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 quidfinit les interfaces riches permettant linternaute une plus grandeinteractivit avec la page web.ECMAScriptComme nous lavons dj signal, ECMAScript est une tentative denormalisation du noyau du langage JavaScript et de ses drivs : sasyntaxe, ses mots-cls et ses composants natifs. La troisime dition dustandard ECMA-262 a t publie en dcembre 1999 (www.ecma-international.org/publications/standards/Ecma-262.htm), mais laquatrime version est en dveloppement (http://www.ecmascript.org/es4/spec/overview.pdf).Cest devenu un standard international (ECMA-262 etISO-10262), ce qui en fait une des rares technologies Internet nonprotocole avoir obtenu une normalisation dun organisme officiel :mme HTML na jamais dpass le stade de Recommandation W3C.Le standard ECMAScript dfinit une syntaxe de programmation prochedu langage C. Si vous connaissez dj ce langage, vous serezrapidement oprationnel.Si chaque navigateur possde son propre interprteur de JavaScript, etest donc susceptible dtre incomplet et de ne pas comprendre tout ceque vous aurez pu coder, les dernires versions des navigateursmodernes prennent en charge dans sa quasi-intgralit le standardECMAScript. Cest pourquoi il vaut toujours mieux se reporter cestandard lorsque vous crivez un programme en JavaScript.412 LE GUIDE COMPLETScriptsChapitre 10Vous ne pouvez identifier un script crit en ECMAScript. En effet, il estdclar dans du code HTML comme tant de type JavaScript :En pratique donc, les termes JavaScript et ECMAScript sontpratiquement synonymes, alors quils peuvent recouvrir des diffrencesnotables.VBScriptVBScript est un langage de script propre Microsoft, driv du langagede programmation Visual Basic. VBScript ntait pas prvu initialementpour devenir un langage de script pour Internet. Il est destin auxutilisateurs peu techniques, en utilisant largement la syntaxe VisualBasic. Il est de ce fait parfois plus pratique pour des utilisateursoccasionnels. Lexprience prouve quil suffit dexaminer quelquesexemples de nimporte quel langage de script pour shabituer sasyntaxe.VBScript reste trs proche de JavaScript, mme sil emploie une syntaxede ponctuation lgrement diffrente. Les commentaires dbutent parune apostrophe simple, tandis que certains oprateurs ont recours unsymbole diffrent : par exemple & au lieu de +. VBScript nest passensible la casse : document.write, document.Write etDocument.Write sont strictement quivalents.Comme pour tout script, votre code doit tre insr dans un lmentSCRIPT, mais avec cette fois, comme valeur de lattribut type, lachane text/vbscript. Une ligne de commentaire permet de lemasquer vis--vis des anciens navigateurs. Vous pouvez (et devriez)galement avoir recours un lment afin dafficher dutexte ou un lien pour les utilisateurs ne disposant pas de lareconnaissance de VBScript.Voici un exemple de script VBScript. Il se borne afficher la datesystme, exactement comme les fichiers JavaScript date.js etdate2.js vus prcdemment.Travail avec les scripts Chapitre 10413LE GUIDE COMPLETHlas ! Comme le montrent les copies dcran des figures suivantes, sicela fonctionne parfaitement avec Internet Explorer, ce script reste sanseffet sous Firefox.Il est toutefois une chose que VBScript gre bien mieux que JavaScript :ActiveX. Cela na rien dtonnant, car ces deux technologies sontsignes Microsoft. Un site conu laide de VBScript peut exploiternimporte quel dispositif dInternet Explorer : cest le seul navigateur reconnatre parfaitement la fois VBScript et ActiveX. Bienvidemment, il est peine ncessaire de vous rappeler la ncessit deprvoir un site alternatif pour les non-utilisateurs de MSIE.Si VBScript prsente les mmes risques globaux de scurit quenimporte quel script, ce nest pas le cas dActiveX : Internet Explorervous prviendra toutefois en principe des risques de certaines actions, cequi vous permet de contrler linnocuit dun programme avant sonexcution.Figure 10.16 :Test de ce script avec InternetExplorerFigure 10.17 :Test de ce script avecFirefox.414 LE GUIDE COMPLETScriptsChapitre 10Traitement de formulaires laide de scriptsVous avez vu, dans des exemples prcdents, comment valider desentres dun formulaire laide dun script avant den autoriser lasoumission.Les scripts peuvent galement agir (et agissent gnralement) aprs lasoumission. Lors de la conception de votre formulaire, vous devezspcifier une action dans llment FORM. Cette action dterminelendroit o sont envoyes les donnes et leur traitement.Il y a communment deux faons de traiter les donnes dun formulaire.Laction la plus facile utiliser est un formulaire denvoi de courrierlectronique :serveur peut tre utilis. C et C++ sont des choix frquents, car denombreux programmeurs sont familiariss avec ce genre de langages.Malheureusement, les programmes C doivent tre compils dansquelque chose que lordinateur puisse comprendre. Perl est un langagetrs rpandu pour les CGI, car il est petit, rapide et facile apprendre et utiliser. Contrairement C, les scripts Perl nont pas besoin dtrecompils pour tre excuts. Enfin, un grand nombre de bibliothquesPerl ont t cres spcifiquement pour grer les applications CGI.Attention, les scripts CGI posent toutefois de nombreux problmes :j Comme ils sont installs ct serveur, ils en consomment lesressources. Cela peut ne plaire que trs moyennement votrehbergeur.j Ils peuvent prsenter de srieux risques scuritaires, soitvolontairement, soit plus frquemment parce quils sont malcrits : un autre motif qui les rend suspects aux yeux deshbergeurs !Pour ces raisons, nombreux sont les hbergeurs qui soit refusenttotalement linstallation de tout script CGI, soit, plus rarement, offrenteux-mmes une palette de scripts svrement contrls auxquels vousdevez obligatoirement vous limiter.CookiesUn cookie est un petit fragment dinformation qui reste stock sur votreordinateur aprs la clture de la connexion. HTTP est un protocole dit sans tat , ou sans mmoire : chaque requte individuelle envoyeau serveur Web est indpendante des prcdentes. Autrement dit, leserveur ne dispose daucun moyen de savoir que vous venez deconsulter la page Ma rgion alors que vous accdez la page Ma famille.Un fichier de cookie est un fichier en texte brut renfermant des cookies.Netscape rassemble les cookies dans votre dossier Profil utilisateur.Chaque utilisateur possde son propre fichier de cookies, exactementcomme il dispose de sa propre liste de signets.Avec Internet Explorer, les cookies sont stocks dans le dossierC:\Windows\Cookie du disque dur. Chaque cookie constitue un fichierindividuel : en raison de la taille minimale occupe par un fichier, cela416 LE GUIDE COMPLETScriptsChapitre 10peut amener consommer un espace disque non ngligeable. Il en vadailleurs de mme pour la liste des favoris.Les utilisateurs ne font gnralement pas grand-chose avec leurscookies, et ne sont dailleurs pas supposs y toucher. Mme si denombreux utilitaires de gestion des cookies, dsormais souvent intgrsaux navigateurs, rendent ceux-ci accessibles lutilisateur moyen, le butrel 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 desnoms dutilisateurs ou des mots de passe : le genre de choses quil nestgure souhaitable de voir rendues disponibles tout autre site que celuipour lequel elles sont prvues. Rassurez-vous, un cookie ne peut tre luque par le serveur Web qui la gnr. Si vous possdez un serveur Web ladresse www.mondomaine.com et que vous crez un cookie utilisateurcontenant le nom et le numro de tlphone de lutilisateur, seuls lesscripts sexcutant sur www.mondomaine.com sont capables de lire cecookie et den extraire le numro de tlphone.Un cookie peut servir stocker des informations saisies par lutilisateurdans un formulaire Web ou tout autre priphrique dentre en ligne. Ilpeut aussi mmoriser des comportements, comme les liens hypertextessuivis ou les images affiches. Cela permet au responsable du site decibler sa publicit, dvaluer lefficacit des diffrents dispositifs denavigation et didentifier les sujets qui retiennent lattention desvisiteurs.Malgr leur potentiel et en dpit de certaines ides reues, les cookiesrestent limits. Ils ne peuvent excuter un programme situ sur votredisque dur, tlcharger ou installer un virus, imposer votre ordinateurdenvoyer un message lectronique votre insu, lire un lment nonvolontairement fourni par lintermdiaire dun formulaire Web ou, dunefaon plus gnrale, provoquer une quelconque modification de votresystme. Un cookie stocke une information lmentaire dans un endroitprcis de votre disque dur : le fichier cookies.txt avec Netscape, ledossier C:\Windows\Cookies avec Internet Explorer. Cest tout.Linformation quil renferme ne peut venir que du serveur Web, laidede donnes transmises via un formulaire Web ou tout autre dispositif desaisie en ligne.En outre, un utilisateur peut choisir daccepter ou de refuser les cookies.Par exemple, pour ce faire, avec Firefox, choisissez Outils > Options.Travail avec les scripts Chapitre 10417LE GUIDE COMPLETSlectionnez Vie prive dans le volet de gauche, dveloppez la sectionCookies et dcochez loption Autoriser les sites crer des cookies.Vous pouvez paramtrer Firefox afin quil vous demande si voussouhaitez accepter un cookie.Avec Internet Explorer, choisissez Outils > Options Internet. Cliquez surlonglet Confidentialit, puis cliquez sur Avances. Dans la fentre quisaffiche, slectionnez les options adquates.Figure 10.18 : Contrle des cookies avec FirefoxFigure 10.19 :Invite dacceptation de cookie deFirefoxFigure 10.20 :Contrle des cookies avec InternetExplorer418 LE GUIDE COMPLETScriptsChapitre 10Vous pouvez crer un cookie laide de code HTML pur, laide dunlment META et dun en-tte http ou laide de lattribut HTTP_EQUIV.Cela noffre toutefois quun intrt relatif, car tout y est cod en dur ,tandis que le bon fonctionnement nest garanti quavec Netscape.HTTPEQUIVNous voquons ici lattribut HTTPEQUIV dun lment META. Unlment META dot dun attribut HTTPEQUIV quivaut un en-tteHTTP. Il sert contrler laction des navigateurs et peut permettre demodifier ou de prciser les informations fournies par les vrais en-ttes.Ces lments devraient avoir un effet identique quils soient sous cetteforme ou quils soient spcifis comme en-ttes HTTP. Certains serveursles traduisent automatiquement en vrais en-ttes HTTP. Les en-ttesHTTP sont gnralement supplants par les instructions HTMLcorrespondantes et sont parfois interprts de faons diffrentes par lesserveurs. Nous avons donc prfr les laisser de ct. Reportez-vouspour plus dinformations la spcification HTTP (RFC 2616, www.ietf.org/rfc/rfc2616.txt).Mieux vaut donc avoir recours un petit programme JavaScript, commecelui-ci :Listing 10-3 : fonction Set_Cookiefunction Set_Cookie( nom, valeur, expiration, pathname,mondomaine, secure ){// Dfinition de la date/heure exprime en millisecondsvar today = new Date();today.setTime( today.getTime() );/*Si la variable expiration est dfinie, calculer la datedexpiration exacte. Elle est exprime ici en jours*/if ( expiration ){expiration = expiration * 1000 * 60 * 60 * 24;}var date_expiration = new Date( today.getTime()+ (expiration) );document.cookie = nom + "=" +escape( valeur ) +( ( expiration ) ? ";expiration="Travail avec les scripts Chapitre 10419LE GUIDE COMPLET+ date_expiration.toGMTString() : "" ) +( ( pathname ) ? ";pathname=" + pathname : "" ) +( ( mondomaine ) ? ";mondomaine=" + mondomaine : "" ) +( ( secure ) ? ";secure" : "" );}Le cookie est prt. Dans la plupart des cas, seuls les quatre premiersparamtres doivent tre fixs (nom, valeur, expiration etnom_path). Si le cookie ne doit tre disponible que dans un dossier,ajoutez comme variable nom_path /nom_dossier/ pour indiquerau script de dfinir ce cookie uniquement pour ce chemin et non pour latotalit du domaine. En gnral toutefois, vous donnerez la variablepath la valeur /, la racine de votre site Web. mondomaine etsecure nont gnralement pas besoin dtre spcifis, sauf dans desbuts 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 valeurest 9 et la date dexpiration fixe 30 jours de sa cration, valides pourla totalit du site.Veillez toujours faire figurer le nombre correct de paramtres, lesparamtres non spcifis tant placs entre apostrophes vides. Unnombre 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 existefunction Get_Cookie( nom ) {var debut = document.cookie.indexOf( nom + "=" );var longueur = debut + nom.length + 1;if ( ( !debut ) &&( name != document.cookie.substring( 0, nom.length ) ) ){return null;}if ( debut == -1 ) return null;var fin = document.cookie.indexOf( ";", len );if ( fin == -1 ) fin = document.cookie.length;return unescape( document.cookie.substring( longueur, fin ) );}420 LE GUIDE COMPLETScriptsChapitre 10Vous pouvez ensuite employer cette fonction comme suit :if ( Get_Cookie( moncookie ) ) faire quelque chose Parfait , direz-vous, mais quoi cela peut-il donc servir ? Eh bien,que penseriez-vous de pouvoir accueillir de faon personnalise lesvisiteurs de votre site, en indiquant le nombre de leurs visites sur lesite ?Pour ce faire, vous allez crire un petit (!) programme JavaScript.Attention, si vous le saisissez rellement, faites-le sans les numros deligne !Listing 10-5 : passage.js01 // Passage.js02 var username = get_Cookie(username);03 if (username == null ) {04 username = prompt(Merci de bien vouloir taper votrenom 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 }16La ligne 2 dfinit une variable username, dont la valeur est spcifiecomme gale celle du champ username de la fonction get_Cookie.Celle-ci nest pas encore dfinie, mais il est classique dans unprogramme JavaScript de placer les dfinitions des fonctions la fin duprogramme.Si le nom dutilisateur est vide (test de la ligne 3), la ligne 4 ouvre unebote de dialogue invitant lutilisateur saisir son nom ou son pseudo.Comme lutilisateur peut parfaitement refuser de saisir son nom enrefermant la bote dinvite, les lignes 5 6 grent ce cas en attribuant la variable username la valeur vous, puis saute la ligne 13, quimarque la fin de cette instruction conditionnelle.Travail avec les scripts Chapitre 10421LE GUIDE COMPLETSi lutilisateur a renseign son nom ou pseudo, les lignes 7 et 8spcifient respectivement les valeurs des variables pathname etmonDomaine. Les lignes 9 11 calculent la date dexpiration enajoutant 365 jours la date systme. La ligne 12 cre un cookie partirdes diffrentes valeurs renseignes ou calcules. Enfin, les lignes 13 et14 referment les deux instructions conditionnelles. Un cookie quicontient 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 peumodifies par rapport aux prcdentes ; une fonction utilitaire,get_cookieVal (lignes 17 23, qui extrait une portion du cookie enfonction dun paramtre de dcalage (offset) ; et enfin la fonctionmessage (lignes 57 60).17 function get_CookieVal (offset)18 {19 var endstr = document.cookie.indexOf (";", offset);20 if (endstr == -1)21 endstr = document.cookie.length;22 return unescape(document.cookie.substring(offset, endstr));23 }2425 function get_Cookie (name)26 {27 var arg = name + "=";28 var alen = arg.length;29 var clen = document.cookie.length;30 var i = 0;31 while (i < clen) {32 var j = i + alen;33 if (document.cookie.substring(i, j) == arg)34 return get_CookieVal (j);35 i = document.cookie.indexOf(" ", i) + 1;36 if (i == 0)37 break;38 }39 return null;40 }4142 function set_Cookie (name, value)43 {44 var argv = set_Cookie.arguments;45 var argc = set_Cookie.arguments.length;46 var expires = (argc > 2) ? argv[2] : null;47 var path = (argc > 3) ? argv[3] : null;48 var domain = (argc > 4) ? argv[4] : null;49 var secure = (argc > 5) ? argv[5] : false;50 document.cookie = name + "=" + escape (value) +51 ((expires == null) ? "" : ("; expires=" +422 LE GUIDE COMPLETScriptsChapitre 1052 expires.toGMTString())) + ((path == null) ? "" : ("; path=" +53 path)) + ((domain == null) ? "" : ("; domain=" + domain)) +54 ((secure == true) ? "; secure" : "");55 }5657 function message(){58 document.write ("Bonjour "+ username + " ! Cela fait " + visites +59 " fois que vous visitez notre site");60 }61Nous nentrerons pas dans le dtail de ces fonctions, car cela risqueraitde nous emmener trop loin. Pour terminer le script, saisissez ce qui suit :62 var expdate = new Date();63 var visites;64 // dfinir la date dexpiration un an .65 expdate.setTime(expdate.getTime() + (24 * 60 * 60 * 1000 * 365));66 if(!(visites = get_Cookie("visites")))67 visites = 0;68 visites++;69 set_Cookie("visites", visites, expdate, "/", null, false);70 username = username.toUpperCase();71 message();Vous dfinissez la date dexpiration et incrmentez la variable compteurvisites, puis crez le cookie nomm visites. La ligne 79 convertitpar scurit la variable username en majuscules, afin dviter touteerreur de casse, tandis que la dernire ligne invoque la fonctionmessage. Enregistrez ce fichier sous le nom passage.js.1 Ouvrez maintenant dans le Bloc-Notes le fichier accueil.html.2 Enregistrez-le sous le nom accueil_3_10_3.html, puis modifiez sonnumro de version :3 Pour invoquer votre programme JavaScript, placez ce qui suitjuste aprs llment H2 :message();4 Enregistrez votre fichier sous le nom accueil.html, puis ouvrezindex.html dans votre navigateur.Vous voyez dabord apparatre la bote de dialogue dinvite.Travail avec les scripts Chapitre 10423LE GUIDE COMPLETSaisissez (ou non) un nom, fermez la bote de dialogue : un message debienvenue saffiche lcran.Si vous cliquez sur le bouton Rafrachir (ou Actualiser) de votrenavigateur, le cookie username est lu, le compteur de visites estincrment et le message se modifie : il en sera de mme chaque visite. partir de ce script, il serait facile de modifier le message en fonctiondu nombre de visites ou daprs des noms dutilisateurs spcifiques.Attention toutefois ne pas placer ainsi des donnes confidentielles, caril est facile daccder au fichier passage.js et dexaminer son contenu.Vous venez de dcouvrir la puissance des cookies, limite toutefois parla possibilit quont les utilisateurs de les refuser. Examinonsmaintenant un autre outil frquemment employ, les applets.10.5. AppletsLe lancement de Java par Sun Microsystems en 1995 a fait leffet dunebombe. Tout le monde voulait soudainement du Java sur son site.Celui-ci servait rsoudre des problmes alors que cela ntait pas dutout son but initial.Figure 10.21 :Invite de saisie du nom dutilisateurFigure 10.22 :Le compteur de visitesest incrment chaque passage sur lapage424 LE GUIDE COMPLETScriptsChapitre 10La popularit de Java tenait ce quil pouvait accomplir deux chosesdont tait jusque-l incapable le Web. Vous pouviez tout dabordconcevoir des applications compatibles quelle que soit la plate-formeconsidre, excutables sur le Web en temps rel. Il constituait ensuiteun moyen dynamique de contrle et de manipulation de donnes Web,toujours en temps rel.LHTML dynamique a trs temporairement perturb Java. Il permet luiaussi la manipulation en temps rel de contenus Web, tout en tantcharg plus rapidement. DHTML nest toutefois encore que peucompatible entre les navigateurs, sans mme voquer des architecturesdiffrentes.Les applets Java tant partiellement compiles, vous ne pouvez enexaminer le code comme avec HTML, JavaScript ou VBScript. Cela estcapital pour les dveloppeurs Java dsireux de protger leur code. Letableau suivant rappelle les principales diffrences entre JavaScript etJava.Tableau 10.5 : Diffrences entre JavaScript et JavaJavaScript JavaLangage interprt Langage pseudo compil(chargement dune machinevirtuelle)Code intgr au HTML(ventuellement via un fichierexterne)Code (applet) part du documentHTML, appel partir de la page.Langage peu typ Langage fortement typ(dclaration du type de variable)Liaisons dynamiques : les rfrencesdes objets sont vrifies auchargementLiaisons statiques : les objetsdoivent exister au chargement(compilation)Accessibilit du code Confidentialit du codeSr : ne peut pas crire sur ledisque durSr : ne peut pas crire sur ledisque durRemarquez que si une applet Java (le programme) est pralablementcompile, une machine virtuelle permettant dinterprter le pseudo codedoit tre charge en mmoire (du ct du client) chaque chargement dela page, do un important ralentissement pour les applets Java parrapport au JavaScript.Applets Chapitre 10425LE GUIDE COMPLETLes failles originelles de Java autorisaient la manipulation et lamodification de fichiers sur votre disque dur. Sun a rapidement remdiau problme, mais comme les applets Java peuvent dsormais demanderet obtenir des droits daccs supplmentaires, des applets provenant desources indlicates sont susceptibles de contenir des virus et desprogrammes douteux : soyez prudents avec les applets Java. Mieuxvaut gnralement les dsactiver dans votre navigateur.Cette attitude tant conseille, elle diminue lintrt des applets Javadans vos pages HTML.HTML permet dintgrer une applet dans votre page Web. Il ne sagittoutefois pas obligatoirement dune applet Java : ce peut tre une appletPython, Perl, etc. Linclusion dune applet seffectuait autrefois laidede llment APPLET, dsormais dconseill au profit de llmentOBJECT. Voici un exemple de code HTML dinsertion dune applet laide de llment APPLET :.La valeur de lattribut code est le nom de la classe Java qui sert defichier principal de lapplet elle-mme. Dans llment APPLET, vouspouvez placer un ou plusieurs paramtres dans des lments PARAM.Ceux-ci indiquent lapplet les variables et contrles quelle doitutiliser. La plupart des bonnes applets que vous pouvez tlcharger etutiliser gratuitement possdent des commentaires relatifs aux variableset paramtres que vous pouvez et devriez utiliser.lment OBJECTDsormais, vous devez prfrer llment OBJECT :Le tableau suivant prsente les principaux attributs de llmentOBJECT.Tableau 10.6 : Attributs classiques de llment OBJECTAttribut Valeur Descriptionclassid uri Sert spcifier la localisation delimplmentation dun objet via un URI. Peuttre employ simultanment ou en alternativeavec lattribut data, selon le type de lobjetimpliqu.426 LE GUIDE COMPLETScriptsChapitre 10Tableau 10.6 : Attributs classiques de llment OBJECTAttribut Valeur Descriptioncodebase uri Spcifie le chemin de base utilis pourrsoudre les URI relatifs spcifis par lesattributs classid, data et archive. Sa valeurpar dfaut est lURI de base du documentcourant.codetype typedecontenu Spcifie le type de contenu des donnesattendues lors du chargement de lobjetspcifi par lattribut classid. Facultatif, il esttoutefois recommand lorsque lattributclassid est spcifi : il permet lagentutilisateur dviter le chargementdinformations de type non reconnu. Sa valeurpar dfaut est celle de lattribut type.data uri Peut tre utilis pour spcifier la localisationdes donnes de lobjet (par exemple lesdonnes dimages) ou, plus gnralement, laforme srialise dun objet qui peut treutilise pour recrer cet objet. Quand il estdonn comme URI relatif, celui-ci devrait treinterprt relativement lattribut codebase.type typedecontenu Spcifie le type de contenu des donnesspcifies par lattribut data. Facultatif, maisrecommand quand lattribut data estspcifi : il permet lagent utilisateur dviterle chargement des informations type decontenu non reconnu. Si la valeur de cetattribut diffre de len-tte HTTPContentType renvoy par le serveur quandlobjet est ramen, cest len-tte HTTPContentType qui a prsance.archive listeuri Sert spcifier la liste des URI, spars pardes espaces, des archives contenant lesressources qui concernent lobjet. Cette listepeut inclure les ressources spcifies par lesattributs classid et data. Le prchargementdes archives diminue gnralement le tempsde chargement des objets. Les archivesspcifies comme URI relatifs devraient treinterprtes relativement lattributcodebase.declare Quand il est prsent, cet attribut boolen faitde la dfinition de llment OBJECT courantseulement une dclaration. Lobjet doit treinstanci par la suite au travers dunedfinition OBJECT qui se rfre cettedclaration.standby texte Spcifie le message que lagent utilisateurpeut restituer pendant le chargement delimplmentation et des donnes de lobjet.Applets Chapitre 10427LE GUIDE COMPLETVoici un exemple dinsertion dapplet dhorloge analogique dans undocument via llment OBJECT. Lapplet, crit dans le langage Python,ne requiert aucune donnes supplmentaires ni valeurs dexcution.Lattribut classid spcifie la localisation de lapplet :Remarquez que lhorloge sera restitue ds linterprtation de ladclaration de llment OBJECT par lagent utilisateur. Il est possible dediffrer la restitution dun objet en effectuant une dclaration pralablede cet objet.Mieux vaut toujours ajouter un tel lment un texte de remplacement,au cas o lagent utilisateur ne puisse pas restituer lhorloge.Une horloge anime.Une des grandes forces de llment OBJET est, comme nous lavons vudans le Chapitre 6 traitant des images, la possibilit de spcifier desrestitutions alternatives de lobjet : chacune des dclarations deslments OBJECT imbriqus peut spcifier un type de contenu alternatif.Si lagent utilisateur ne peut pas restituer llment OBJECT le plusexterne, il essaye den restituer le contenu, qui peut tre un autrelment OBJECT, etc. Souvenez-vous de lexemple alors prsent :Coucher de soleil sur le lac de LincielLagent utilisateur essaye dabord de restituer le premier lmentOBJECT possible, dans lordre suivant :1 Une applet crite en langage Python.428 LE GUIDE COMPLETScriptsChapitre 102 Une animation MNG du coucher de soleil.3 Une image JPG de celui-ci.4 Un texte de remplacement.La dclaration la plus externe spcifie une applet qui ne requiert nidonnes ni valeur initiales. La deuxime dclaration spcifie uneanimation MNG. Comme elle ne dfinit pas la localisation duneimplmentation pour traiter lanimation MNG, elle compte sur lagentutilisateur pour la prendre en charge. La troisime dclaration spcifie lalocalisation dun fichier JPG et fournit un texte de remplacement au caso tous les autres mcanismes auraient chou.Les donnes restituer peuvent tre fournies de deux faons : en interneou partir dune ressource externe. La premire mthode estgnralement plus rapide, mais ne convient pas pour une grande quantitde donnes.Voici un exemple demploi de donnes internes dans llmentOBJECT :Une horloge.lment PARAMPour initialiser un lment, vous avez recours un ou plusieurs lmentsPARAM. Cet lment ne possde quune balise douverture.Les lments PARAM spcifient lensemble des valeurs ncessaires lexcution dun objet. Un lment OBJECT (ou APPLET) peut possderun nombre quelconque dlments PARAM dans nimporte quel ordre. Ilsdoivent toutefois tre situs au dbut du contenu de llment OBJECT(ou APPLET).La syntaxe des noms et de leurs valeurs est cense tre comprise parlimplmentation de lobjet. La spcification ne dfinit pas les faonsselon lesquelles les agents utilisateurs devraient ramener les couplesnom/valeur ni interprter les noms en doublon.Applets Chapitre 10429LE GUIDE COMPLETLattribut name dfinit le nom dun paramtre dexcution cens treconnu des objets insrs. La sensibilit la casse de la proprit dpendde limplmentation spcifique de lobjet.Lattribut value spcifie la valeur dun paramtre dexcution spcifipar lattribut name. Les valeurs de proprit nont aucune significationpour HTML : leur signification est dtermine par lobjet en question.Lattribut valuetype spcifie le type de lattribut value. Les valeurspossibles sont :j data : cest la valeur par dfaut. Signifie que la valeur spcifiepar value sera value puis transmise limplmentation delobjet sous forme dune chane.j ref : la valeur spcifie par lattribut value est un URI quidsigne une ressource dans laquelle les valeurs dexcution sontstockes. LURI doit tre transmise lobjet tel quel (non rsolu).j object : la valeur spcifie par lattribut value est un identifiantqui se rfre la dclaration dun lment OBJECT situ dans lemme document. Lidentifiant doit tre la valeur de lattribut idde llment OBJECT dclar.Lattribut type spcifie le type de contenu de la ressource dsigne parlattribut value uniquement lorsque lattribut valuetype possdecomme valeur ref. Cet attribut indique donc lagent utilisateur le typedes valeurs situes lURI dsign par lattribut value.OBJECT et EMBEDMicrosoft Internet Explorer reconnat llment OBJECT partir de saversion 3.0, Netscape partir de sa version 4. Ce dernier prenaitgalement en charge llment EMBED qui lui tait propre. Vous devriezdsormais nemployer que OBJECT.Voici un exemple demploi de ces deux lments, qui tient compte dunavigateur :Listing 10-6 : lments OBJECT et EMBED...430 LE GUIDE COMPLETScriptsChapitre 10 Si vous ne disposez pas de Shockwave, vous pouvezle tlcharger icipour voir cette animation....Un utilisateur qui possde un navigateur ne reconnaissant ni OBJECTni EMBED voit le contenu de llment NOEMBED. Remarquez que leslments OBJECT et NOEMBED doivent possder une balise de fermeture,contrairement EMBED. Dsormais, vous devriez toutefois nemployer queOBJECT.Dclaration et instanciation des objetsNous avons signal plus haut quil tait possible de sparer ladclaration dun objet de ses instanciations. Cela prsente plusieursavantages :j Les donnes peuvent tre ramenes du rseau par lagentutilisateur une seule fois (lors de la dclaration) et rutilises pourchaque instanciation.j Il est possible dinstancier un objet partir dun autre endroit quecelui de la dclaration de lobjet, par exemple partir dun lien.j Il est possible de spcifier des objets comme tant des donnesdexcution dautres objets.Pour dclarer un objet de sorte quil ne soit pas excut au moment olagent utilisateur le lit, il faut placer lattribut boolen declare dansllment OBJECT et identifier cette dclaration en affectant une valeurunique son attribut id. Les instanciations ultrieures de lobjet serfreront cet identifiant. Un lment OBJECT dclar doit apparatredans le document avant la premire instance de cet lment OBJECT.Un objet dfini avec lattribut declare est instanci chaque fois quunlment qui se rapporte cet objet requiert une restitution de celui-ciApplets Chapitre 10431LE GUIDE COMPLET(par exemple, un lien qui se rfre lobjet est activ, un autre objet quisy rfre est activ, etc.).Les agents utilisateurs qui ne reconnaissent pas lattribut declaredoivent restituer le contenu de la dclaration de llment OBJECT.Llment OBJECT est aussi prcieux que complexe. Pour en savoirplus, reportez-vous la spcification HTML 4.01.10.6. Rsumj Un script est un programme crit dans un langage deprogrammation particulier.j Il existe deux types de script : les scripts ct serveur et les scriptsct client. Les scripts ct serveur sont situs et sexcutentcomme leur nom lindique sur le serveur et peuvent envoyer unrsultat vers la machine cliente. Les scripts ct client sont desprogrammes qui peuvent accompagner le document HTML oubien y tre directement incorpors. Ils sexcutent sur la machinecliente (prservant ainsi les ressources du serveur).j Un script action unique est excut une seule fois, lors duchargement du document par lagent utilisateur. Il apparat dans ledocument lintrieur dun lment SCRIPT.j Un script rptitif est excut chaque fois que se produit unvnement particulier.j Vous insrez un script dans un document laide de llmentSCRIPT.j HTML ne dpend pas dun langage de script particulier. Lesauteurs des documents indiquent explicitement aux agentsutilisateurs le langage de chaque script. Vous pouvez le faire laide dune dclaration META place dans llment HEAD ou endfinissant lattribut type de llment SCRIPT.j Llment NOSCRIPT permet de fournir un contenu deremplacement lorsque, pour une raison quelconque, un scriptnest pas excut.j Il est possible dassocier une action un certain nombredvnements intrinsques qui se produisent lorsque lutilisateurinteragit avec lagent utilisateur. Chacun des vnements prendcomme valeur un script.432 LE GUIDE COMPLETScriptsChapitre 10j JavaScript est historiquement le premier langage de script pour leWeb qui a permis aux dveloppeurs Web dexcuter de petitsprogrammes sur le navigateur Web plutt que sur le serveur Web.JScript est un langage de script trs similaire dvelopp parMicrosoft.j Le bon fonctionnement de JavaScript dpendait largement dunavigateur employ. Un standard a t dfini pour normaliser leslangages de script de type JavaScript, ECMA-262 aussi appelECMAScript. Cest devenu un standard international (ECMA-262et ISO-10262), ce qui en fait une des rares technologies Internet non protocole avoir obtenu une normalisation dunorganisme officiel.j VBScript est un langage de script propre Microsoft, driv deleur langage de programmation Visual Basic.j Un script CGI (Common Gateway Interface) est un script ctserveur. Ces scripts, souvent employs pour le traitement distantdes formulaires, posent toutefois de nombreux problmes.j Un cookie est un petit fragment dinformation qui reste stock survotre ordinateur aprs la clture de la connexion. Les utilisateurspeuvent choisir daccepter ou de refuser les cookies.j HTML permet dintgrer une applet dans votre page Web. Il nesagit toutefois pas obligatoirement dune des clbres appletsJava : ce peut tre une applet Python, Perl, etc. Linclusion duneapplet seffectuait autrefois laide de llment APPLET,dsormais dconseill au profit de llment OBJECT.Rsum Chapitre 10433LE GUIDE COMPLETPublicationsur leWebIdentification du public ..................................................................................................... 436Accessibilit ........................................................................................................................ 438Adaptation plusieurs langues ...................................................................................... 456Test du site .......................................................................................................................... 466Publication sur le Web ...................................................................................................... 472Suivi de la frquentation de votre site .......................................................................... 478Rsum ................................................................................................................................ 483Au fil des chapitres prcdents, vous avez dcouvert les principauxcomposants du langage HTML et avez construit un site Webminimaliste. Vous disposez toutefois dsormais des connaissancesncessaires pour lamliorer plus avant, grce aux diffrentes techniquesabordes.Pour le moment, satisfait de votre premire ralisation, vous souhaitez laplacer sur le Web, pour quelle puisse y tre consult par tous. Par tous ?Vraiment ? Probablement pas. Tout site sadresse un public potentielplus ou moins cibl. Pour un site dentreprise, dont le but est depromouvoir et de vendre un produit ou un service, la cible se composedes clients potentiels, ou du moins de ceux dentre eux qui emploientInternet. Ds le dbut de la phase de conception de votre site, vousdevez garder lesprit les caractristiques de la cible vise et pour cefaire identifier votre public.Ce public identifi, vous devrez probablement adapter votre site enfonction de ses demandes ou habitudes particulires.Vous devrez ensuite amliorer laccessibilit de votre site, pour tenircompte des personnes souffrant de divers handicaps, et ventuellementle rendre disponible en plusieurs langages. Enfin, vous le placerez sur leNet laide dun des multiples outils disponibles et le testerez laidedu plus grand nombre possible de navigateurs.Ce chapitre sintresse lensemble de ces dmarches.lments et attributs abords dans ce chapitre :IMG, altTABLE, summary, TH, TD, TR, headers, scope, abbrNOFRAMEOBJECT, EMBEB, NOEMBEDlang, dir, BDO, dir, META, charset11.1. Identification du publicLidentification des visiteurs probables dun site Web est capitale.Nombreux sont les auteurs Web commencer sans ide aucune de leurpublic potentiel. Ils se contentent dassembler quelques ides, deslments qui leur ont plu, gnralement simplement pour apprendre coder en HTML. Sans le savoir, leurs pages possdent cependant unpublic : ceux qui partagent leurs thmes dintrt (ceux qui figurent sur436 LE GUIDE COMPLETPublication sur le WebChapitre 11les pages Web), ainsi que ceux qui possdent une configurationmatrielle et logicielle identique celle du concepteur.La composante fondamentale dun site Web est linformation que voustenez partager. Le plus important est sans doute de savoir avec quivous allez la partager. Ne surestimez pas le pouvoir dun message cibl.Internet est dsormais trop vaste et trop diversifi pour garantir que vousserez capable datteindre tout le monde.De toute vidence, le public le plus facile cibler est celui dun intranetdentreprise. Le ou les navigateurs employs sont connus, ce quisimplifie grandement le codage. En revanche, de tels sites ne brillentgnralement pas par linnovation : ils sont essentiellement informatifset destins aider les salaris accomplir leur travail.Si votre site sadresse des enfants, privilgiez les graphismes et lesicnes significatives au texte. Les enfants prfrent des images claires etcolores et sont souvent capables de comprendre le but dune icne sansavoir lire le texte.En revanche, si le site concerne plutt des personnes ges (unepopulation en forte croissance sur Internet), veillez ce quil puissesadapter aux dficits visuels, ainsi quaux utilisateurs ayant du mal utiliser le clavier ou la souris.Figure 11.1 : Un site destin aux enfants insiste sur les icnes et les imagesIdentification du public Chapitre 11437LE GUIDE COMPLETPar contraste, si votre cible est constitue de hard gamers, ces fous dejeux vido, vous pouvez prsumer sans grand risque derreur quilsdisposent dun cran de grande taille, dune carte graphiqueperformante, des derniers codecs, et probablement dune liaison Internet haut dbit : dans un tel cas, pas question dhsiter abuser des imageset vidos !Mais si vous suspectez que mme un seul pileptique sensible lalumire est susceptible de visiter votre site, oubliez les animationsspectaculaires et les clignotements rptitifs. Vous devez en effetdsormais tenir compte des personnes souffrant de handicaps et proposerdes alternatives pour votre site. Aujourdhui, de nombreux utilisateurssurfent sur le Web sans souris. Ils transmettent les ordres lagentutilisateur laide du clavier ou de commandes vocales. La prise encompte de ces utilisateurs porte le nom d accessibilit du site .11.2. AccessibilitLordinateur est un outil prcieux, parfois indispensable de nombreuxutilisateurs qui souffrent de handicaps. Il procure laccs lacommunication et lenseignement indpendamment des capacitsphysiques. Internet a permis en outre la ralisation de vritables postesde travail virtuels. Quil sagisse de recherche ou de courrierlectronique, lordinateur aide les personnes handicapes agir de faoninteractive avec leur collgues, leurs amis et leur famille un degrinimaginable dans le pass.Il est de notorit publique que la population des seniors crotrgulirement. Ceux-ci sintressent en outre de plus en plus linformatique, essentiellement grce Internet. Cette nouvelle vagueFigure 11.2 : Le site de la FIDEV propose des versions adaptes auxpersonnes souffrant de dficits visuels438 LE GUIDE COMPLETPublication sur le WebChapitre 11dutilisateurs dcouvre toutefois que lcran nest pas toujours facile lire et que la souris constitue un outil malcommode pour quelquunsouffrant darthrite ou dune quelconque affection du poignet. En tantque concepteur dun site Web, vous ne devez ignorer aucune des partiesde votre public potentiel.Ayant dtermin qui va accder votre site, concevez-le de faon faciliter son accs. Tenez compte de lagent utilisateur probable, de laconfiguration matrielle envisageable, etc. Votre site doit-il tre visitpar des personnes ges, des familles, le grand public ? Partez alors duprincipe quils possdent un cran de 17 pouces dot dune rsolutionminimale de 800 x 600. Votre site est consacr la programmationavance ? Vrifiez quil gre bien le texte : de nombreux utilisateursUNIX ne possdent que des navigateurs en mode Texte seul. Votre siteconcerne les jeux vido ou sadresse des professionnels delimprimerie et du graphisme ? Vous pouvez sans crainte supposer quilsdisposent dun priphrique daffichage de haut de gamme,probablement mme suprieur au vtre.Voici les principaux piges daccessibilit rencontrs lors de laconception dun site Web :j Les cadres rendent la navigation difficile sans souris. De surcrot,ils posent problme sur de petits crans faible rsolution et nesont pas reconnus par les navigateurs textuels.j Les tableaux sont assez mal reconnus par les navigateurs textuels,mais permettent dafficher efficacement des donnes brutes. Sivous dfinissez la taille et la largeur, les utilisateurs possdant unaffichage limit seront obligs de faire dfiler la page pour lirelintgralit du tableau. Un tableau peut souvent tre remplac parun autre lment structurel, comme un en-tte ou un pied de page,prsent sur toutes les pages du site. Utilisez toujours le nouvelattribut summary pour procurer une alternative texte au tableau.j Les images posent rarement de problmes, mme si de nombreuxagents utilisateurs ne les affichent pas, par construction ou suite un choix de lutilisateur. Empcher le chargement des graphismespermet de diminuer le temps de chargement dune page Web oufacilite le travail dun navigateur texte-parole. Lattribut altplac dans llment IMG permet aux utilisateurs ayant dsactivles images den obtenir une description.j Mme si les graphismes anims permettent de capter lattention,ils deviennent irritants lorsquils apparaissent sur des pages deAccessibilit Chapitre 11439LE GUIDE COMPLETcontenu et non sur des pages de navigation. Une animationagressive peut rendre difficile la concentration dutilisateurssensibles la lumire. Enfin, les utilisateurs peuvent bloquer lesanimations aprs leur chargement dans la plupart des navigateurs.j Les formulaires ont subi de lourdes modifications en vuedamliorer laccessibilit. Le dplacement entre les champs dunformulaire saccomplit traditionnellement laide de la touche[] du clavier, parcourant ainsi les champs dans lordre o ils ontt 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 lmentsFIELDSET et LEGEND ainsi que lattribut tabindex (dcrits dansle Chapitre 8) afin daider les utilisateurs naviguer dans leformulaire sans la souris.Cas de lattribut altVous devez toujours doter une image dquivalent texte, mais lavaleur de lattribut alt doit satisfaire certains critres, faute de quoi ilpeut tre considr comme suspect. Respectez les rgles suivantes :Le texte ne doit pas dpasser 150 caractres (10 12 mots). Ncrivez pas :.Le texte ne doit pas dcrire une image qui sert de lien, mais la destinationdu lien.Coucher de soleilUtilisez plutt :Coucher de soleilIl ne doit pas contenir dinformations sur la taille du fichier, ni un nom defichier ou une extension de fichier image. Ncrivez jamais :440 LE GUIDE COMPLETPublication sur le WebChapitre 11Il ne doit pas servir de commentaire :Enfin, les images despacement, les puces et les barres horizontalesdoivent galement possder un attribut alt dfini.Accessibilit des tableauxLes tableaux sont une des structures HTML qui posent le plus deproblmes aux agents utilisateurs non visuels. Pourtant, HTML disposedsormais des outils ncessaires en permettre une restitution parfaite.Il suffit de les mettre en uvre.Une cellule de tableau peut contenir deux types dinformations : desinformations de rubrique (ou libell) et des informations de donnes.Cette distinction permet aux agents utilisateurs de restituer les cellulesde rubrique et de donnes diffremment, mme en labsence de feuillesde style. Par exemple, les agents utilisateurs visuels peuvent prsenter letexte des cellules de rubrique en caractres gras. Les synthtiseurs deparole peuvent restituer les informations de rubrique avec une inflexionde voix particulire.Llment TH dfinit une cellule qui contient une indication de rubrique.Les agents utilisateurs disposent de deux types dinformations derubrique : le contenu de llment TH et la valeur de lattribut facultatifabbr. Les agents utilisateurs doivent restituer soit le contenu de lacellule, soit la valeur de lattribut abbr. Pour les mdias visuels, cettedernire possibilit peut tre adquate quand il ny a pas suffisammentde place pour restituer le contenu entier de la cellule. Pour les mdiasnon visuels, lattribut abbr peut semployer comme abrviation desrubriques du tableau, quand celles-ci sont restitues en accompagnementdu contenu des cellules concernes. Les attributs headers etscope permettent galement aux auteurs dassister les agentsutilisateurs non visuels dans leur traitement des informations derubrique.Llment TD dfinit une cellule qui contient des donnes. Une cellulepeut tre vide (ne pas contenir de donnes).Accessibilit Chapitre 11441LE GUIDE COMPLETLes agents utilisateurs non visuels peuvent faire appel certainsattributs des lments TD et TH pour restituer les cellules du tableau plusintuitivement :j Pour une cellule de donnes particulire, lattribut headersrpertorie les cellules qui fournissent des indications de rubriquepertinentes. Chaque cellule de rubrique doit tre nomme laidede lattribut id. Il nest toutefois pas toujours possible dedistinguer clairement cellules de rubrique et cellules de donnes.Servez-vous pour de telles cellules de llment TD accompagndun attribut id ou scope, selon que lun ou lautre est le plusadapt.j Pour une cellule de rubrique donne, lattribut scope indique lagent utilisateur les cellules concernes par ces indications derubrique. Les auteurs peuvent choisir demployer cet attributplutt que lattribut headers, sils considrent quil convientmieux. Ces deux attributs remplissent la mme fonction.Lattribut headers est en gnral ncessaire quand les rubriquesse trouvent une position inhabituelle par rapport aux donnesqui les concernent.j Lattribut abbr spcifie un nom de rubrique abrg pour lescellules de rubrique, pour que les agents utilisateurs puissentrestituer plus rapidement les indications de rubrique.Dans lexemple suivant, nous assignons des indications de rubrique auxcellules en dfinissant lattribut headers. Chaque cellule de la mmecolonne se rapporte la mme cellule de rubrique (via lattribut id).Listing 11-1 : Extrait du fichier headers.html...Livres emprunts par chaque membre dela familleNomLivresNon rendus ?Claude102Martine442 LE GUIDE COMPLETPublication sur le WebChapitre 1150...Un synthtiseur de parole pourrait restituer cette table comme suit :Lgende : Livres emprunts par chaque membre de la familleRsum : Ce tableau reprsente le nombre de livresemprunts par chaque membre de la famille, et le nombrede livres non encore rendus.Nom : Claude, Livres : 10, Sortis : 2Nom : Martine, Livres : 5, Sortis : 0Remarquez 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...Livres emprunts par chaque membrede la familleNomLivresNon rendus ?Claude102MartineFigure 11.3 :Tableau employant lattributheadersAccessibilit Chapitre 11443LE GUIDE COMPLET50...Remarquez la valeur col de lattribut scope, qui signifie toutes lescellules de la colonne active . Affich dans un navigateur visuel,laspect est identique. Il en est de mme avec un agent utilisateur nonvisuel.Les autres valeurs de lattribut scope permettent de construire destableaux plus complexes :Listing 11-3 : Extrait du fichier scope2.html...TraductionsTitre du livre diteurRsumCode ISBNPrixWi-Foo, piratage et dfense des rseaux sans filCampusPressLe dveloppement des rseaux sans filsacclre. Pourtant, les problmesFigure 11.4 :Tableau employant lattribut scope444 LE GUIDE COMPLETPublication sur le WebChapitre 11de scurit lis ce type derseau sont largement sous-stims. Celivre tudie tant les mthodes employespour pntrer un tel rseau que cellesqui permettent de laisser les assaillants et les curieuxdehors. Niveau : Intermdiaire avanc.2-7440-1948-847 La Bible C++Micro ApplicationLa rfrence absolue pour matriserla programmation C++ !Destin aussi bien aux dbutants quauxutilisateurs confirms, cet ouvrage,rfrence inconteste outre-atlantiqueet traduit en Franais, est un vritableoutil de cours dlivrant aux utilisateurs desbases solides et des connaissances pousses surle langage C++. Lutilisateur dispose ici de toutes lesinformations pour comprendre les fondements du langage,rsoudre ses problmes, puis dvelopper desapplications performantes avec le langage C++.Niveau : Intermdiaire avanc.2-7429-3717-X81 ...Figure 11.5 :Tableau complexeemployant lattribut scope,avec des cellulesfusionnes.Accessibilit Chapitre 11445LE GUIDE COMPLETRemarquez lemploi de la valeur row pour lattribut scope. Mme si lapremire cellule de chaque ligne contient des donnes et non desindications de rubrique, lattribut scope fait que la cellule de donnesse comporte comme une cellule de rubrique de ligne. Ceci permet auxsynthtiseurs de parole de fournir la demande le nom du livre concernou de le dclarer immdiatement avant le contenu de chaque cellule.Il est parfois utile de catgoriser les cellules. Les utilisateurs quiparcourent une table avec un agent utilisateur bas sur la parole peuventsouhaiter entendre une explication sur le contenu dune cellule, en plusdu contenu en question. Pour ce faire, lagent utilisateur pourrait lire lesindications de rubrique associes avant le contenu de la cellule dedonnes.Les utilisateurs peuvent galement vouloir des informations surplusieurs cellules, auquel cas les indications de rubrique donnes auniveau de la cellule (attributs headers, scope et abbr) peuvent ne pasfournir le contexte adquat. Examinez le tableau suivant, qui montre larpartition des dpenses au cours dun voyage de plusieurs jours, destination de deux villes, Toulouse et Montpellier.Le code de ce tableau est le suivant :Listing 11-4 : Extrait du fichier vacances.html...summary="Ce tableau rsume les dpensesoccasionns lors des vacances du mois dejuillet Toulouse et Montpellier">Rcapitulatif des dpenses de vacancesAlimentationDplacementDiversTotauxToulouse17-07-0537.7432.0015.0018-07-0527.284.0020.53Sous-totaux65.0236.0035.53136.52Montpellier19-07-0556.2529.00Accessibilit Chapitre 11447LE GUIDE COMPLET00.0020-07-0535.000.0036.00Sous-totaux91.2529.0036.00196.25Totaux gnraux156.2765.0071.53332.77...Lutilisateur pourrait souhaiter extraire des informations du tableau sousla forme de requtes comme :j Quel a t le montant des frais de dplacement (essence, page,etc.) ?j Quai-je dpens en alimentation le 18 juillet ?j Quel est le montant total des dpenses Montpellier ?Chaque requte implique un calcul par lagent utilisateur, qui peut faireintervenir zro ou plusieurs cellules. Pour dterminer, par exemple, lesdpenses dalimentation du 18 juillet, lagent utilisateur doit reconnatreles cellules se rapportant Alimentation et Dates (particulirement le 18juillet), puis dterminer lintersection de ces deux ensembles.Pour satisfaire ce genre de requte, le modle de table HTML 4 permetaux auteurs de classer les rubriques et les donnes des cellules parcatgorie. Par exemple, pour le tableau des frais de dplacement,lauteur pourrait regrouper les cellules de rubrique Montpellier et448 LE GUIDE COMPLETPublication sur le WebChapitre 11Transports dans la catgorie dpenses et les quatre jours dans lacatgorie date. Les trois questions prcdentes se traduiraient alorscomme 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 ? j Quai-je dpens en alimentation le 18 juillet ? devient Quelles sont toutes les cellules dans les catgoriesdpenses=Alimentation et date=18-07-2005 ? j Quel est le montant total des dpenses Montpellier ? devient Quelles sont toutes les cellules dans les catgoriesdpenses=Alimentation, Dplacement, Divers et ville=Montpellier ? Lauteur catgorise une cellule de rubrique ou de donnes en spcifiantlattribut axis de la cellule. Par exemple, dans le tableau des frais dedplacement, la cellule qui contient linformation Montpellier seraitplace comme suit dans la catgorie ville :MontpellierToute cellule qui contient des informations relatives Montpellier devraitse rapporter cette cellule de rubrique grce lattribut headers ou lattribut scope. Ainsi, les frais dalimentation du 18-07-2005 devraienttre baliss pour se rapporter lattribut id (dont la valeur ici est a6) dela cellule de rubrique :27.28Chaque attribut headers fournit une liste de rfrences id. Vouspouvez donc catgoriser une cellule donne par divers moyens (ou selonun nombre quelconque de rubriques).Voici le balisage du tableau des dpenses avec des indications decatgorie. Les modifications apportes au fichier prcdent figurent engras :Listing 11-5 : Extrait du fichier vacances2.html....AlimentationDplacementDiversSous-totauxAccessibilit Chapitre 11449LE GUIDE COMPLETToulouse17-07-0537.7432.0015.0018-07-0527.284.0020.53Sous-totaux65.0236.0035.53136.52Montpellier19-07-0556.2529.0000.0020-07-0535.000.0036.00...450 LE GUIDE COMPLETPublication sur le WebChapitre 11Laspect du tableau dans un navigateur visuel est strictement identique.Pourtant, ce balisage permet aux agents utilisateurs dviter de troublerlutilisateur avec des informations parasites. Par exemple, si unsynthtiseur de parole devait dire tous les nombres figurant dans lacolonne Alimentation de cette table, en rponse la question Quelle estla totalit de mes frais de repas ? , lutilisateur serait incapable dedistinguer entre les dpenses du jour et les sous-totaux ou les totaux. Encatgorisant soigneusement les cellules de donnes, les auteurspermettent aux agents utilisateurs de faire des distinctions smantiquesimportantes lors de la restitution.Il nexiste pas de limite quant la manire dont les auteurs peuventcatgoriser les informations contenues dans une table. Dans cette tabledes frais de dplacement, par exemple, on pourrait rajouter lescatgories sous-totaux et totaux.Les agents utilisateurs, notamment les synthtiseurs de parole, peuventcombiner les informations communes plusieurs cellules rsultant dunerequte. Par exemple, si lutilisateur demande Quai-je dpens enalimentation Montpellier ? , lagent utilisateur dterminerait dabordles cellules en question (19-07-05 : 56,25 ; 20-07-05 : 35,00) puisFigure 11.7 :Tableau des dpenses de voyageavec catgorisation des cellulesAccessibilit Chapitre 11451LE GUIDE COMPLETrestituerait ces informations. Un agent utilisateur disant ces informationspourrait les lire ainsi :Ville : Montpellier. Date : 190705. Dpenses,Alimentation : 56,25Ville : Montpellier. Date : 200705. Dpenses,Alimentation : 35,00ou, de manire plus concise :Montpellier, 190705, Alimentation : 56,25Montpellier, 200705, Alimentation : 35,00Une restitution encore plus conome combinerait les informationscommunes et les rorganiserait :Montpellier, Alimentation, 190705 : 56,25200705 : 35,00Lattribut axisLa spcification HTML 4.01 noblige pas les agents utilisateurs grer les informations fournies par lattribut axis. Elle nmet pas nonplus de recommandation sur la manire dont les agents utilisateurspeuvent prsenter les informations de lattribut axis aux utilisateurs, nisur la faon dont les utilisateurs peuvent effectuer des requtes verslagent utilisateur.En labsence dindications de rubrique fournies par lattribut scope oulattribut headers, les agents utilisateurs peuvent nanmoins construiredes informations de rubrique en fonction de lalgorithme suivant, dontlobjectif consiste rechercher une liste ordonne de rubriques.j partir de la position de la cellule, rechercher dabord descellules de rubrique de ligne vers la gauche. Puis rechercher descellules de rubrique de colonne vers le haut. La recherche dansune direction sachve quand le bord du tableau est atteint ou bienquand on trouve une cellule de donnes qui fait suite une cellulede rubrique.452 LE GUIDE COMPLETPublication sur le WebChapitre 11j Les rubriques de ligne sont insres dans la liste, dans lordre oelles apparaissent dans la table. Pour les tableaux de gauche droite, les rubriques sinsrent de gauche droite.j Les rubriques de colonne sont insres aprs les rubriques deligne, dans lordre o elles apparaissent dans le tableau, de hauten bas.j Si une cellule de rubrique possde un attribut headers, lesrubriques rfrences par cet attribut sont insres dans la liste etla recherche sachve pour la direction courante.j Les cellules TD qui possdent un attribut axis sont galementtraites comme des cellules de rubrique.Accessibilit des jeux dencadrementLes jeux dencadrement font galement partie des structures dlicates interprter par les agents utilisateurs non visuels. Les remdes sonttoutefois ici presque inexistants. La seule solution, comme cela taitvoqu au Chapitre 7, consiste employer un lment NOFRAMES et fournir un lien alternatif vers une version dpourvue de cadres.Bienvenue chez ORIGNAL TRADUCTIONS !Votre agent utilisateur ne reconnat malheureusement pas lesjeux dencadrement. Cliquez ici pouraccder au site alternatif en version purement textuelle.Avec lagent utilisateur pwWebspeak, (noubliez pas que pwWebspeak lit ce qui est affich), vous obtenez laspect visuel qui est prsentdans la figure suivante.Figure 11.8 :pwWebSpeak nereconnat pas les jeuxdencadrementAccessibilit Chapitre 11453LE GUIDE COMPLETLe navigateur en texte seul Linx affiche ce qui est prsent figuresuivante.Enfin, un navigateur visuel ne reconnaissant pas les jeux dencadrementpourrait afficher ce qui est prsent dans la figure qui suit.En labsence de llment NOFRAME, les agents utilisateurs afficheraientune page vide !Modules complmentaires (plug-in)Pourquoi aborder ce sujet dans une section traitant de laccessibilit ?Parce que, une fois encore, le choix dimposer le chargement etlinstallation de modules complmentaires (ou plug-in) pour accder un site dpend du public vis.Si celui-ci est compos dinternautes avertis, il est probable quilsdisposent dj des principaux modules complmentaires et nerechigneront pas les installer ventuellement si ce nest pas le cas. Enrevanche, de nombreux utilisateurs moins bien informs ne se donnerontFigure 11.9 : Linx ne reconnat pas non plus les jeux dencadrementFigure 11.10 :Affichage avec un navigateurvisuel ne reconnaissant pas lesjeux dencadrement454 LE GUIDE COMPLETPublication sur le WebChapitre 11pas la peine de tlcharger un programme complmentaire pourvisionner certaines sections de votre site. Prvoyez toujours une solutionalternative pour ce type de visiteurs !Voici quelques exemples de contenus susceptibles de rclamer unmodule complmentaire :j Texte au format PDF (Portable Document format) : AdobeAcrobate Reader.j Musique : RealAudio, MIDI, WAV, QuickTime.j Vido : MPEG, AVI.j Animations : Flash/Shockwave (Macromedia), applets Java.j Mondes virtuels : VRML .Adobe Acrobat Reader est un clbre plug-in qui permet de lire etdimprimer des documents du Web ayant t formats pourlimpression. Les utilisateurs peuvent avoir accs aux formulairesgouvernementaux, aux brochures collectives et bien dautresinformations. Si lapparence de linformation que vous voulez prsenterest trs importante, envisagez de la prsenter comme un fichier AdobeAcrobat.Shockwave est galement trs rpandu. Propos par Macromdia, ilpermet aux utilisateurs de voir des animations sophistiques ainsi quedes films 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 (casdInternet Explorer).Lincorporation de ce type dlments dans une page Web seffectue laide de llment OBJECT dj abord. Llment OBJECT a pour butde grer terme tous les contenus non textuels. Par exemple, des imagessimples, des films et des applets Java peuvent tous tre affichs laidede llment OBJECT.Cet lment permet de crer diffrentes possibilits pour les utilisateursqui ne peuvent visualiser vos fichiers multimdias : un utilisateur peutvoir du texte, un autre une image fixe, un dernier une vido de hautequalit.Accessibilit Chapitre 11455LE GUIDE COMPLETComme le montre le tableau suivant, certains modules complmentairessont toutefois largement installs :Tableau 11.1 : Les technologies (plug-in) installes sur les postesdes internautes en fvrier 2008.(Source : http://www.web-stats.org/k/pluggins-par-pluggins.html)Rang Produit Prsence1 Java 98,7 %2 Javascript 98,5 %3 Flash 96,9 %4 QuickTime 49,9 %5 Real Player 27,6 %6 Shockwave 24,9 %7 PDF 13,3 %11.3. Adaptation plusieurs languesVous pourriez vouloir proposer des versions de votre site adaptes plusieurs cultures et langues, afin dlargir votre public. Certains parlentpour ce faire dinternationalisation du site, terme souvent confondu aveccelui de localisation.Pour simplifier, linternationalisation est le processus par lequel unproduit est rendu disponible aux utilisateurs dautres langues et dautrescultures. Pour HTML 4.0, il sagit essentiellement de prendre en chargeles langues qui se lisent de droite gauche, comme lhbreu et larabe,ainsi que celles fondes sur des idogrammes, comme le japonais et lechinois. En revanche, la localisation consiste adapter un produit ou unetechnologie un march local compos de personnes employant unelangue spcifique. Autrement dit, vous internationalisez votre site enlocalisant diffrentes versions de vos pages.Lensemble de caractres Unicode dsormais adopt par HTML est larponse ultime au problme des diffrentes langues. Il dispose de plusde 25 000 caractres diffrents et est destin reprsenter les langues dumonde entier (plus quelques autres, comme le klingon - attributlang="xklingon", x - spcifiant une langue exprimentale). Vous456 LE GUIDE COMPLETPublication sur le WebChapitre 11trouverez des informations complmentaires sur Unicode ladressewww.unicode.org/Vous spcifiez la langue dun lment HTML laide de son attributlang.Attribut langLattribut lang spcifie la langue de base dans laquelle sont crits lesvaleurs des attributs et le contenu textuel dun lment. La valeur pardfaut de cet attribut nest pas dfinie. 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 votredocument. Le Web ne se comporte pas comme un traducteur universel,capable par exemple de modifier 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 leWeb.Lindication de langue procure par lattribut lang peut permettre unagent utilisateur de contrler la restitution de diverses manires, enrespectant les pratiques culturelles en usage dans une langue donne.Si le but de lattribut lang est de permettre aux agents utilisateurs dereprsenter un contenu de faon plus pertinente, il nincite aucunement reprsenter de faon moins pertinente les caractres atypiques pour unelangue particulire. Un agent utilisateur doit toujours faire de son mieuxpour reprsenter tous les caractres, quelle que soit la valeur spcifiepar lang.Par exemple, imaginez que vous ayez plac des caractres de lalphabetgrec au milieu dun texte en franais :Ses super-pouvoirs taient la consquence dun rayonnement , expliqua-t-il.Lagent utilisateur doit sefforcer de reprsenter le contenu franais demanire approprie (dans sa faon de grer les guillemets par exemple)et faire son possible pour reprsenter le caractre , mme si ce nest pasun caractre franais.Remarquez que FirefoxAdaptation plusieurs langues Chapitre 11457LE GUIDE COMPLETet Internet Explorerninterprtent pas de faon identique les guillemets normalement induitspar llment Q, comme nous lavons vu lors de ltude de cet lment.Lattribut lang reoit comme valeur un code qui identifie une langueparle, crite, ou utilise dune manire ou dune autre pour lacommunication dinformations entre personnes. Les langagesinformatiques sont explicitement exclus des codes de langue. Ledocument RFC1766 dfinit et explique les codes de langue qui doiventtre utiliss dans les documents HTML.Brivement, les codes de langue consistent en un code principal et unesuite ventuellement vide de sous-codes :code-de-langue = code-principal ("-" sous-code)*Le tableau suivant prsente certains codes de langue.Figure 11.11 :Aperu du code prcdentavec le navigateur FirefoxFigure 11.12 :Aperu du code prcdentavec le navigateur InternetExplorer458 LE GUIDE COMPLETPublication sur le WebChapitre 11Tableau 11.2 : Valeurs de lattribut langValeur de lang Langagear Arabede Allemandel Grecen Anglaisencockney Version est-londonienne de langlaises Espagnolfr FranaisfrCA Franais canadienhe Hbreuhi Hindiinavajo La langue navajo parle par certains Indiens dAmriqueit Italienja Japonaisnl Nerlandaispt Portugaisru Russesa Sanscritur Ourdouxklingon Klingon (pensez StarTrek). Le code principal x signaleune langue exprimentale.zh ChinoisUn lment hrite de lindication du code de langue selon lordre depriorit suivant (de la priorit la plus leve la plus faible) :j Lattribut lang spcifi pour llment lui-mme.j Llment parent le plus proche, dont lattribut lang est spcifi.j Len-tte HTTP ContentLanguage (qui peut tre configur ausein dun serveur). Par exemple : ContentLanguage: frCA.Adaptation plusieurs langues Chapitre 11459LE GUIDE COMPLETj Les valeurs par dfaut de lagent utilisateur et les prfrences delutilisateur.Dans lexemple suivant, la langue principale du document est le franais(fr). Un paragraphe est dclar comme tant en espagnol (es), aprslequel la langue principale redevient le franais. Le paragraphe qui vientensuite inclut une phrase enchsse en japonais (ja), aprs laquelle lalangue principale redevient le franais.Listing 11-6 : Extrait du fichier depression.htmlDpression multilingue......A propos de la dpression...Tiene Usted Depresin? La dpression au Japon, connue sous le nom de Utsubyo, y est trs frquente :probablement une personne sur sept en souffre...La figure suivante prsente laspect de cette page dans un navigateur.Figure 11.13 :Texte multilingue460 LE GUIDE COMPLETPublication sur le WebChapitre 11HritageLes cellules dun tableau peuvent hriter des valeurs de lang non deleur parent mais de la premire cellule dun groupe.Lorsquun agent utilisateur ajuste la restitution en fonction desindications de langue (en comparant les codes de langue de la feuille destyle et les valeurs de lattribut lang), il doit toujours donner laprfrence aux codes qui concident parfaitement. Il peut toutefoisconsidrer la correspondance des codes principaux comme suffisante.Ainsi, si lattribut lang est spcifi pour llment HTML avec la valeurfrCA, lagent utilisateur devrait-il prfrer les indications de style quicorrespondent dabord frCA, puis la valeur plus gnrale fr.Les agents utilisateurs ne doivent pas utiliser lattribut lang pourdterminer la direction du texte.Attribut dirOutre spcifier la langue dun document laide de lattribut lang, ilpeut tre ncessaire de dfinir la directionnalit de base (de gauche droite ou de droite gauche) de certaines parties du texte dundocument, de la structure dun tableau, etc. Vous y parvenez laide delattribut dir, qui spcifie la direction de base dun texte neutre parrapport la direction (autrement dit, un texte dpourvu dedirectionnalit inhrente telle que dfinie dans la norme Unicode) dansle contenu ou les valeurs dattribut dun lment. Il spcifie aussi ladirectionnalit des tableaux. Les valeurs possibles sont :j LTR (left to right) : texte ou tableau allant de gauche droite.j RTL (right to left) : texte ou tableau allant de droite gauche.La spcification Unicode attribue une directionnalit aux caractres etdfinit un algorithme complexe pour dterminer la directionnalitcorrecte dun texte. Si un document ne contient pas de caractresaffichables droite gauche, lagent utilisateur conforme nest pas tenudappliquer lalgorithme bidirectionnel Unicode. Si un documentcontient des caractres droite gauche, et si lagent utilisateur afficheces caractres, lagent utilisateur doit utiliser lalgorithme bidirectionnel.Adaptation plusieurs langues Chapitre 11461LE GUIDE COMPLETMme si la norme Unicode spcifie des caractres spciaux concernantla direction du texte, HTML offre des structures de balisage de niveausuprieur qui accomplissent la mme chose : lattribut dir ( ne pasconfondre avec llment DIR) et llment BDO. Ainsi, pour faire unecitation en hbreu, il est plus intuitif dcrire :...une citation en hbreu...que de faire appel des caractres Unicode :...une citation en hbreu...Comme le montrent les copies dcran prcdentes, ces deux lignes decode ont un effet identique mais pas celui attendu, puisque le texte estbien crit de gauche droite ! Ni Firefox ni Internet Explorer nesemblent reconnatre pour le moment lattribut dir.En ralit, ces deux navigateurs semblent interprter lattribut dircomme similaire un attribut align. Ainsi, le code suivant :...un titre allant normalement de droite gauche...Figure 11.14 :Attribut dir avec FirefoxFigure 11.15 :Attribut dir avec Internet Explorer462 LE GUIDE COMPLETPublication sur le WebChapitre 11Titre allant aussi de droite gauche......texte allant de gauche droite......encore un texte de droite gauche...donne, avec ces deux navigateurs, un rsultat strictement quivalent :...un titre allant normalement de droite gauche...Titre allant aussi de droite gauche......texte allant de gauche droite......encore un texte de droite gauche...Les figures suivantes prsentent laspect de ces deux codes avec Firefox.Heureusement, il est possible de dsactiver lalgorithme bidirectionnelUnicode et de spcifier une directionnalit laide de llment BDO(BiDirectional Override).lment BDOSi lalgorithme bidirectionnel et lattribut dir devraient suffire grerles changements de direction enchsss, il semble toutefois quils neFigure 11.16 :Attribut dir avec FirefoxFigure 11.17 :Attribut align avec FirefoxAdaptation plusieurs langues Chapitre 11463LE GUIDE COMPLETsoient pas parfaitement pris en charge pour le moment. Llment BDO,dont les balises douverture et de fermeture sont obligatoires, permet dedfinir une directionnalit indpendamment de lalgorithme bidirectionnelsur des passages choisis du texte.Cet lment possde un attribut obligatoire dir, identique celui vuci-dessus, mais qui prvaut sur la directionnalit inhrente des caractrestelle que dfinie dans Unicode.Reprenons lexemple prcdent, cette fois avec des lments BDO :Elments BDO (droite gauche)Titre allant aussi de droite gauche......texte allant de gauche droite......encore un texte de droite gauche...Comme le montre la figure suivante, laspect obtenu est celui souhait,si ce nest que llment BDO nest pris en compte que dans le corps dudocument, et non dans un lment TITLE.Attention toutefois, seuls les navigateurs les plus rcents reconnaissentllment BDO.Dune faon gnrale, lalgorithme bidirectionnel Unicode est dunegrande complexit et intervient dans de nombreux domaines. Si celavous intresse, reportez-vous la spcification HTML 4.01 pour enapprendre plus son sujet.Enfin, prenez garde tester votre page en langue trangre laide dunnavigateur reconnaissant cette langue. Si laspect nest pas correct,revenez en arrire et placez un attribut lang dans tout lment relatif auFigure 11.18 :lments BDO et attributs dir avecFirefox464 LE GUIDE COMPLETPublication sur le WebChapitre 11contenu de la page. Il sera parfois ncessaire davoir recours unlment dans la section , afin dimposerlutilisation dune police exotique.Langues et jeux de caractresSi vous ralisez une page dans une langue autre queuropenne,noubliez pas de modifier la page de caractres du document laide delattribut charset. Certains alphabets, tel lalphabet cyrillique,possdent des caractres difficilement affichables laide des caractresdEurope de lOuest Latin-1 (Western European), nomms ISO-8859-1.Les caractres cyrilliques seront trouvs dans la page Windows-1251,tandis que SHIFT_JIS et EUC-JP produisent les caractres japonais. Vouspouvez spcifier le jeu de caractres pour un document en cyrilliquecomme ceci :Limage suivante montre une page russe, qui prsente des caractrescyrilliques,Voici le code source de cette page avec la spcification du jeu decaractres pour cette page.Figure 11.19 :Site russe, ladressehttp://www.cccp.de/Figure 11.20 :Code source de cette page,montrant le choix du jeu decaractres Windows-1251.Adaptation plusieurs langues Chapitre 11465LE GUIDE COMPLETAvec de nombreux navigateurs, vous pouvez forcer le choix du typedencodage de la page. Par exemple, avec Firefox, vous choisissezAffichage / Encodage des caractres.Choisir pour la page russe le jeu occidental nest toutefois pas sage :comme le montre la figure suivante, la page devient incomprhensible.11.4. Test du siteNous avons dj insist sur le fait quil fallait toujours tester un siteWeb avec autant de navigateurs que possible. La plupart dentre euxsont disponibles gratuitement, mme sil ne sagit que de versions dedmonstration. Dune faon gnrale, comme cela a t voqu dans leChapitre 2, il est prfrable de tester le site au moins sous InternetExplorer 6.0 et 7.0 et sous Firefox 1 et 2.Figure 11.21 :Modification de lencodagede la page avec FirefoxFigure 11.22 :Aspect du site prcdent,en imposant un encodageoccidental ISO-8859-1.466 LE GUIDE COMPLETPublication sur le WebChapitre 11Dans le cas dun public qui comprend des utilisateurs difficultsvisuelles, le mieux est un navigateur texte-parole. Ceux-ci sont pluttonreux, mais une version de dmonstration de pwWebSpeack estdisponible ladresse www.prodworks.com Une alternative consiste utiliser un navigateur en texte seul, comme Lynx (http://lynx.browser.org/),afin de visualiser votre site. Prenez toujours la prcaution dexaminervotre site sous un navigateur graphique aprs avoir dsactiv lesgraphismes. Voici comment dsactiver les graphismes avec les deuxprincipaux navigateurs :j Avec Internet Explorer, choisissez Outils / Options Internet.Cliquez sur longlet Avanc, puis descendez dans la liste etdcochez dans la section Multimdia loption Afficher les images.j Avec Firefox, choisissez Outils / Options. ChoisissezFonctionnalits Web dans le volet de gauche, puis dcochez dansle volet de droite loption Charger les images .Figure 11.23 :Dsactivation des images avecInternet ExplorerFigure 11.24 :Dsactivation degraphismes avec FirefoxTest du site Chapitre 11467LE GUIDE COMPLETRemarquez quun navigateur images dsactives (ou en texte seul)supprime toutes les indications des feuilles de style. Tout graphismeventuellement prsent sur la page naffiche que le texte prsent dansson attribut alt.Bien videmment, si vous ralisez une page pour un intranet, testez-leavec le navigateur utilis par lentreprise, pourvu de tous lesprogrammes complmentaires (plug-in) installs de faon standard.Prenez garde aux problmes de compatibilit entre navigateurs. La pageest-elle parfaite avec un autre navigateur ? Si vous avez conu votre siteen pensant un navigateur unique, sans pouvoir exercer de contrle surle navigateur rellement utilis, nimaginez pas que votre page sera parfaite pour chaque visiteur. Examinez votre page avec au moins unautre navigateur, et observez ses transformations, en vrifiant quelle neperd pas sa signification. Si tel tait le cas, essayez de la modifier afinque le message peru reste identique quels que soient le navigateur et laconfiguration matrielle de lutilisateur.Il est bien sr difficile de disposer de tous les navigateurs sur sonordinateur. Plusieurs solutions sont possibles :Figure 11.25 :Page Ma rgion dansInternet Explorer, lesgraphismes tantdsactivs.468 LE GUIDE COMPLETPublication sur le WebChapitre 11j Partage du test des ressources Web avec dautres. Il peut sagirdamis ou de relations, qui possdent une architecture matrielleet/ou un navigateur diffrents des vtres. Vous pouvez galementsolliciter, sur certains groupes de discussion, lexamen de votresite. Certains dveloppeurs peuvent pousser le professionnalismejusqu vous envoyer une capture dcran ! En attirant lattentiondes testeurs sur certains problmes spcifiques que voussuspectez, les rponses reues devraient vous permettre dersoudre tout problme potentiel.j Emploi de sites de test disponibles sur le Net (comme, parexemple, AnyBrowser.com). Vous pouvez :tester votre site laide dune simulation de navigateur detroisime gnration ;spcifier plus prcisment un niveau de compatibilit avec lesspcifications HTML ;tester laffichage sur une WebTV.Figure 11.26 :Test dun site avec unnavigateur de troisimegnrationFigure 11.27 :Test dun site en choisissant leniveau de compatibilit dunavigateurTest du site Chapitre 11469LE GUIDE COMPLETPensez galement modifier votre rsolution et faire varier la taille dela fentre du navigateur. Des surprises ne manqueront pas desensuivreNe poussez toutefois pas la prcision lextrme : les diffrences entrenavigateurs sont invitables. Tant que le contenu reste lisible, nemodifiez pas votre page parce quun lment diffre lgrement dunautre.Tout au long de la phase de test, vous devrez rpondre plusieursquestions. Tout dabord, celles qui concernent directement le contenu :j Les informations dtailles sur le contenu sont-elles directementou rapidement disponibles ?j Tout document doit possder un titre. Vos titres rsument-ils bienle contenu des pages ?j Lesthtique des pages est-elle de bon got ? Originale ?Attrayante ?j Ny a-t-il rien qui puisse choquer inutilement un lecteur duneculture diffrente de la vtre ?j Le raffinement de votre page daccueil nest-il pas excessif aupoint de pnaliser lourdement le temps de chargement (image tropgrande ou texte trop long) ? La page daccueil signale-t-elle laconfiguration optimale pour visionner votre site ?j Tous les liens sont-ils bien dfinis ?j Toutes les images sont-elles bien prsentes ? Comptent-ellestoutes bien un texte alternatif ? Avez-vous pens limiter leurtaille ?Vous pouvez en outre utilement vrifier le bon balisage de votredocument, soit laide du service propos par le W3C ladressehttp://validator.w3.org/, soit en employant leur diteur/navigateur gratuitAmaya.EmplacementUn site Web est susceptible de changer demplacement. Ce peut treune dcision de niveau serveur, dont vous ntes pas matre. Un truc toutsimple pour tester ce problme consiste changer votre site enconstruction de disque ou de rpertoire. Vous verrez ainsi si cettemodification pose problme.470 LE GUIDE COMPLETPublication sur le WebChapitre 11Bref, testez, testez... il en restera toujours quelque chose.Noubliez jamais que le lecteur dune prsentation informatise tabliratoujours une corrlation inconsciente entre la valeur du contenu decelle-ci et son aspect.XHTMLPour convertir rapidement un document au format XHTML, vouspouvez vous servir de HTML Tidy ou de lditeur/navigateur Amaya,qui peut enregistrer des documents HTML en XHTML.Ractions du publicVous avez conu un splendide site Web, lavez test par tous les moyenspossibles. Comment toutefois savoir avec quelle efficacit votre messageparvient au public cibl ? Pour ce faire, vous devez fournir auxutilisateurs un moyen dentrer en contact avec vous.Le premier moyen pour encourager vos visiteurs vous faire part deleurs remarques consiste placer sur chaque page un lien vers votreadresse lectronique. Vous pouvez utilement complter cela par un liensitu sur votre page daccueil, qui prcise o signaler un problme. Nouslavons fait pour notre site, grce au lien de messagerie de la barre denavigation (affiche sur chaque page) et au message qui figure dans lapage daccueil, mme si pour le moment les liens de ce message nepossdent pas de cible.Figure 11.28 :Il est capital deproposer undispositif permettantaux utilisateurs devous contacterTest du site Chapitre 11471LE GUIDE COMPLETUn autre moyen consiste proposer un formulaire en ligne, qui peut trecomplt par les visiteurs et envoy (probablement par messagerie) auresponsable du site. Dans notre cas, ce serait une page probleme.html. Leformulaire doit poser des questions prcises relatives au site, ainsi quesur le profil du visiteur. Ces dernires informations permettent devrifier que le visiteur fait bien partie de la cible choisie, tandis que lesquestions portant sur le site permettent de focaliser les critiquesventuelles.Des solutions plus avances consistent proposer une liste de diffusionou une adresse de groupe de discussion. Une liste de diffusion envoie unmessage toute personne prsente sur la liste, les membres pouvant leplus souvent rpondre directement la liste. Cela peut augmenter laporte de votre site Web tandis que votre public pourra plus facilementvous faire part de ses remarques.Un groupe de discussion est un endroit o des utilisateurs peuventenvoyer et lire des messages, regroups par sujet ou par thme. Cela esttrs similaire la liste de diffusion, mais attire traditionnellement moinsde gens : sans doute parce que les utilisateurs doivent les visiteractivement, alors quils reoivent automatiquement les messages duneliste.Ces deux mthodes demandent toutefois une mise en uvre pluscomplexe, qui ne sera pas aborde ici.Quelle que soit la faon dont vous encouragez les commentairestouchant votre site, rpondez-y toujours rapidement. Si quelquun vouscrit pour vous demander une URL, envoyez-la le jour mme ourpondez que vous ne savez pas o la trouver. Nhsitez jamais avouerque vous ignorez quelque chose, mais essayez daller trouver la rponse.11.5. Publication sur le WebLa dernire tape, et paradoxalement la plus simple, consiste placervotre site sur le Web. Pour le moment, vous possdez un site enconstruction, stock quelque part sur votre disque dur. Pour continuer,vous avez besoin dun hbergeur et dun outil capable de transfrer lesfichiers qui composent votre site sur le serveur de cet hbergeur.Le problme se pose diffremment pour une entreprise dote de sonpropre rseau (et qui dispose probablement dun ou de plusieurs472 LE GUIDE COMPLETPublication sur le WebChapitre 11serveurs hbergeant son intranet et son site Web externe), pour uneentreprise passant par lintermdiaire dun fournisseur daccs Internet(FAI) spcialis et pour un individu ou une PME pouvant se contenterdes services dun FAI grand public. Cest ce dernier cas que nous nousintressons particulirement.Peut-tre lignorez-vous, mais si vous disposez dun accs Internet, vouspossdez probablement un hbergeur. La quasi-totalit des FAI mettentgracieusement votre disposition un espace de stockage capabledhberger vos pages personnelles. La place offerte se compte dsormaisen centaines de mgaoctets, un chiffre excdant en principe largementles besoins dun site personnel ou SOHO (Small Home, Home Office).Orange propose par exemple 100 Mo despace pour le stockage de vospages personnelles, Free montant jusqu 10 Go !Figure 11.29 : Gestion des pages personnelles de FreeFigure 11.30 : Offre standard OrangePublication sur le Web Chapitre 11473LE GUIDE COMPLETCertains FAI proposent, comme Orange, un hbergement amlior pourun montant relativement modeste.Vous devrez dans la plupart des cas activer vos pages personnelles(votre compte de pages personnelles) auprs de votre FAI. Suivez pourcela les instructions fournies par celui-ci dans sa documentation ou surson site.Vous devez ensuite disposer dun moyen de transfrer vos fichiers durpertoire de construction, situ sur votre disque dur, jusquau rpertoirede destination, situ une adresse fournie par votre FAI (souventquelque chose comme votrenom.perso-ftp, votreFAI.fr ouvotrenom.perso.votreFAI.fr). Cela seffectue laide dunprotocole nomm FTP (File Transfer Protocole), si bien que les logicielscapables daccomplir ce travail portent le nom de logiciels FTP .Certains diteurs HTML proposent des fonctions FTP intgres pour letransfert et ladministration de votre site Web. Si ce nest pas le cas devotre diteur favori, il vous reste, selon les FAI, deux solutions :j WebFTP : cette mthode relativement rcente propose parcertains FAI (dont Neuf-Telecom) est similaire au WebMail, cesystme qui vous permet de consulter vos courriers sans logicielde messagerie ddi, depuis nimporte quel navigateur.Gnralement trs intuitive, cest une mthode lgante.Figure 11.31 : Hbergement amlior d Orange474 LE GUIDE COMPLETPublication sur le WebChapitre 11j Logiciels FTP indpendants : il en existe un grand nombre,certains gratuits, certains sous forme de partagiciels (shareware),dautres enfin tant commerciaux. Votre FAI proposegnralement dans sa bote outil un tel produit (Cuteftp pourOrange, LeechFtp sous Windows ou Fetch sous MacOS proposssur le kit de connexion de Free, mais il en existe bien dautres,comme vous le montrera une simple recherche Google). Citonsnotament Filezilla, de la grande famille des logiciels libresgratuits (www.filezilla-project.org).Si vous avez choisi de tlcharger et dinstaller un logiciel FTP, vousdevez le configurer. Pour ce faire, vous devez toujours lui indiquer :j Ladresse du serveur FTP. Cest gnralement quelque chosecomme perso-ftp.votreFAI.frj Votre identifiant et votre mot de passe de messagerie.j 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 Le type dhte. Cette information vous est fournie par votre FAI.Cest souvent UNIX (standard).j Un nom pour la connexion. Pratique si ce logiciel doit servir vous connecter plusieurs serveurs STP.Figure 11.32 : Une recherche Google avec comme mots-cls logiciel FTP + gratuit procure plus de 6 600 rponsesPublication sur le Web Chapitre 11475LE GUIDE COMPLETj Ladresse de votre site. Cest souvent quelque chose commehttp://perso.votreFAI.fr/votrenom/ ou votrenom.perso.votreFAI.fr.Les copies dcran qui suivent montrent les informations demandes parWS_FTP95 LE, mon logiciel FTP favori (bien quancien).Vous voyez en principe, dans la fentre du logiciel, deux volets. Le voletde gauche prsente les fichiers situs dans le dossier spcifi lors de laconfiguration du logiciel. Si ce nest pas le bon dossier, vous pouveznaviguer sur votre ordinateur jusqu afficher le dossier contenant lesfichiers de votre site.tablissez la connexion si elle ne lest pas dj (la mthode peut diffrerselon le logiciel). Le cadre de droite affiche les fichiers et dossiersactuellement situs sur le serveur distant : ceux effectivement consultspar des visiteurs.Figure 11.33 :Informations de connexiondemandes par WS_FTP95 LEFigure 11.34 :Informations de connexiondemandes par WS_FTP95 LE476 LE GUIDE COMPLETPublication sur le WebChapitre 11Pour transfrer des fichiers, slectionnez-les dans le volet de gauche etlancez le transfert, par exemple en cliquant sur un bouton.Un message dtat du transfert des fichiers est gnralement affich.Patientez quelques instants et allez visiter votre site, en lanant votrenavigateur et en saisissant ladresse de votre site.Ce mme logiciel permet de grer votre site distance. Vous pouvez tout moment ajouter de nouveaux fichiers ou en supprimer. Poursupprimer un fichier distant, slectionnez-le simplement dans le cadre dedroite et cliquez sur Supprimer ou Delete.Figure 11.35 : Fentre de WS_FTP95 LE, affichant les dossiers de MonSiteet ceux situs sur le serveur distant.Figure 11.36 : Slection et transfert de fichiersPublication sur le Web Chapitre 11477LE GUIDE COMPLET11.6. Suivi de la frquentationde votre siteUne fois votre site en ligne, vous souhaiterez probablement en suivre lafrquentation dune faon ou dune autre. De nombreux FAI proposentde tels outils, parfois gratuitement, parfois moyennant finances. Leuremploi est parfois simple, parfois complexe. Et tout changement de FAIimpose dtudier un nouveau systmeUne solution alternative consiste recourir Google Analytics, un outilgratuit dune rare puissance. Voici comment en profiter :1 Servez-vous de votre compte Google pour ouvrir un compteGoogle Analytics, partir de la page http://www.google.com/analytics/fr-FR/.2 Dans la zone de texte Sinscrire Google Analytics, cliquez surInscription.Figure 11.37 : Page daccueil de Google Analytics.478 LE GUIDE COMPLETPublication sur le WebChapitre 113 Entrez lURL du site Web que vous souhaitez suivre, puisnommez votre compte. Cest ce nom qui figurera dans vosrapports Google Analytics. Vous pourrez, si vous le souhaitez,ajouter dautres sites aprs la configuration de votre compte.4 Renseignez vos nom, prnom, numro de tlphone et pays.5 Acceptez le contrat utilisateur et cliquez sur Crer un compte. Celaaffiche la page Instructions de suivi. Cette page possde une zonede texte qui contient un fragment de code. Dans celui-ci,UAxxxxxxxx est lidentifiant unique associ votre compte:_uacct = "UA-xxxxxxx-x";urchinTracker();Ce fragment de code charge la bibliothque urchin.js dans lagentutilisateur client, dfinit lidentifiant unique (_uacct), puis appelleurchinTracker() pour renvoyer les donnes Google Analytics.Vous devez copier ce fragment de code dans chaque page Web que vousvoulez suivre. Vous le faites en principe juste avant la balise defermeture , mais vous pouvez galement le placer dansllment HEAD, surtout si votre page est riche en code JavaScript et quevous constatez quelques problmes.Lactivation de Google Anaytics nest pas immmdiateLarrive des premires donnes dans vos rapports peut demander prsde 24 heures aprs louverture dun compte et la saisie, puis lapublication du code de suivi adquat. Soyez patientVous pouvez examiner les tats associs votre gadget en ouvrant unesession 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 ;Suivi de la frquentation de votre site Chapitre 11479LE GUIDE COMPLETEn 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 aupremier graphique si ce nest quil concerne les visiteurs et nonles visites, et une Synthse gographique : une carte du mondeo lintensit de la couleur est proportionnelle au nombre devisiteurs de mme dorigine gographique.Le dernier groupe prsente une Vue densemble des sources detrafic (un camembert qui montre par quel moyen les visiteurs sontparvenus votre site) et une Vue densemble du contenu (lespages les plus vues).Vous pouvez galement ventuellement voir un graphique de Vuedensemble des objectifs, si vous avez dfini un objectif dans lesparamtres danalyse.Il suffit de cliquer sur le lien Afficher le rapport dun des volets ou sur unlment pour afficher ses dtails. Laccs est galement possible partirdu menu de gauche. Il est impossible de tout dtailler : cela ncessiteraitun ouvrage entier !Intressons-nous plutt llment Visiteurs : cliquez gauche surVisiteurs ou sur Afficher le rapport du volet Vue densemble des visiteurs.Cela affiche une nouvelle page qui fourmille dinformationsFigure 11.38 : Tableau de bord Google Analytics.480 LE GUIDE COMPLETPublication sur le WebChapitre 11intressantes (Segmentation des visiteurs, Profil des visiteurs dont langue(s),Fournisseurs daccs et Valeurs personnalises, Type de navigateur[navigateurs, systmes dexploitation, navigateur et systmesdexploitation, couleurs dcran, rsolutions dcran, types de prise encharge de Java, Flash] et Synthse gographique)Cliquons dans le volet Navigateurs de la section Profil technique surAfficher le rapport complet. Cela peut permettre de vrifier certainspostulats mis prcdemment. Je prcise toutefois que cela ne sappliquequ mon site, dont les 5833 visiteurs constats sur environ 1 an neconstituent pas forcment un chantillon reprsentatif du Web. Enrevanche, cest sans aucun doute "mon" public.Mes visiteurs possdent dans 68,8 % des cas Internet Explorer, etFirefox dans 24,4 % des cas. Vous pouvez cliquer sur le nom dunnavigateur pour voir des dtails sur ses versions : ainsi, InternetExplorer 6 tait encore employ dans 50,7 % des cas, soit par environ35 % de mes visiteurs. Il nexiste quasiment plus de versions antrieuresFigure 11.39 : Page Vue densemble des visiteursFigure 11.40 :NavigateursSuivi de la frquentation de votre site Chapitre 11481LE GUIDE COMPLET(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 devientintressant de regarder la combinaison navigateur/plate-forme encliquant dans le menu de gauche sur Navigateurs et systmesdexploitation pour disposer dune ide plus prcise de leurscaractristiques.Internet Explorer sur Windows 68,7 % de mes visiteurs, suivi de Firefoxsur Windows (23 %). Safari sur Macintosh atteint les 5 %, suivi deFirefox toujours sur Macintosh (1 %). Les autres combinaisons restentanecdotiques, ne totalisant que 3 % des visiteurs.Figure 11.41 :Versions de laplate-forme.Figure 11.42 :CombinaisonsNavigateur etPlate-forme.Figure 11.43 :Rsolutions dcran.482 LE GUIDE COMPLETPublication sur le WebChapitre 11Seuls (mais encore) 4,4 % des visiteurs possdent une rsolution de800 x 600 pixels. 43,7 % disposent dune rsolution de 1024 x 768, lesautres possdant une rsolution suprieure. Si je dois donc toujoursprvoir une rsolution minimale de 800 x 600, les choses risquentdvoluer rapidementCes informations sont prcieuses : elles confirment que je ne puis medispenser de tester mes pages laide au moins dInternet Explorer 6 et7 et de Firefox 2.Google Analytics apparat donc comme un outil prcieux, presqueindispensable. Ne vous en privez pas !11.7. Rsumj Ds le dbut de la phase de conception de votre site, vous devezgarder lesprit les caractristiques de la cible vise et, pour cefaire, identifier votre public :Les enfants prfrent des images claires et colores et sontsouvent capables de comprendre le but dune icne sans avoir lire le texte.Les personnes ges peuvent souffrir de dficits visuels etprouver des difficults employer le clavier ou la souris.Un public damateurs de jeux vido apprcie particulirementles images et les vidos.j Les cadres rendent la navigation difficile sans souris et ne sont pasreconnus par les navigateurs textuels.j Les images posent rarement de problmes si vous avez pens placer un attribut alt dans llment IMG pour permettre auxutilisateurs ayant dsactiv les images den obtenir unedescription.j Les tableaux sont assez mal reconnus par les navigateurs textuels.Servez-vous toujours du nouvel attribut summary pour procurerune alternative texte au tableau. Pour une cellule de donnesparticulire, lattribut headers rpertorie les cellules quifournissent des indications de rubrique pertinentes. Pour unecellule de rubrique donne, lattribut scope indique lagentutilisateur les cellules concernes par ces indications de rubrique.Enfin, lattribut abbr spcifie un nom de rubrique abrg pour lesRsum Chapitre 11483LE GUIDE COMPLETcellules de rubrique, afin que les agents utilisateurs puissentrestituer plus rapidement les indications de rubrique.j Les jeux dencadrement font galement partie des structuresdlicates interprter par les agents utilisateurs non visuels. Laseule solution consiste employer un lment NOFRAME et fournir un lien alternatif vers une version dpourvue de cadres.j Les modules complmentaires (ou plug-in) sont de petitsprogrammes qui permettent dafficher dans le navigateur destypes de contenu normalement non affichables. Les plus clbressont Adobe Acrobat Reader, Shockwave, JVM (Java VirtualMachine), QuickTime et RealAudio. Ces types de contenu sontinsrs dans une page Web laide de llment OBJET.j Lensemble de caractres Unicode dsormais adopt par HTMLdispose de plus de 25 000 caractres diffrents et est capable dereprsenter les langues du monde entier.j Vous spcifiez la langue dun lment HTML laide de sonattribut lang. Celui-ci reoit comme valeur un code qui identifieune langue parle, crite, ou utilise dune manire ou dune autrepour la communication dinformations entre personnes.j Lattribut dir spcifie la direction de base dun texte dpourvu dedirectionnalit inhrente telle que dfinie dans la norme Unicode,ainsi que la directionnalit des tableaux. Il ne semble toutefois pastre trs reconnu par les navigateurs actuels.j Il est possible de dsactiver lalgorithme bidirectionnel Unicodeet de spcifier une directionnalit laide de llment BDO(BiDirectional Override). Cet lment possde un attribut obligatoiredir, identique au prcdent, mais qui prvaut sur ladirectionnalit inhrente des caractres telle que dfinie dansUnicode.j Si vous ralisez une page dans une langue autre queuropenne,vous devez modifier le jeu de caractres du document laide delattribut charset dun lment META. De nombreux navigateurspermettent dimposer le choix du type dencodage de la page.j Il faut toujours tester un site Web avec autant de navigateurs quepossible, et au minimum sous Internet Explorer 5.0 et 6.0 et sousFirefox.j Vous devez galement effectuer un test avec ces navigateurs endsactivant laffichage des images.484 LE GUIDE COMPLETPublication sur le WebChapitre 11j Vous pouvez trouver sur le Net des sites de test, commeAnyBrowser.com. Vous pouvez y effectuer un test en spcifiant unniveau de compatibilit avec les spcifications HTML et mmetester un affichage WebTV.j Vous devez fournir aux utilisateurs un moyen dentrer en contactavec vous et les encourager vous faire part de leurs remarques.j Pour placer effectivement votre site sur le Web, vous avez besoindun hbergeur et dun outil capable de transfrer les fichiers quicomposent votre site sur le serveur de cet hbergeur. La quasi-totalit des FAI mettent gracieusement votre disposition unespace de stockage capable dhberger vos pages personnelles.j Le transfert de vos fichiers du rpertoire de construction jusquaurpertoire de destination, situ chez lhbergeur, seffectue laide dun protocole nomm FTP (File Transfer Protocole). Leslogiciels capables daccomplir ce travail portent le nom de logiciels FTP . Il existe de nombreux logiciels FTP gratuits,chaque FAI disposant de ses propres prfrences.j Google Analytics est un outil prcieux qui permet de suivre avecune grande prcision la frquentation de son site Web..Rsum Chapitre 11485LE GUIDE COMPLETAnnexesJeu des entits de caractres Latin-1 .......................................................................... 488lments et attributs HTML 4.01 ................................................................................... 491Compatibilit XHTML/HTML ........................................................................................... 513DTD et XML ......................................................................................................................... 523Slecteurs CSS .................................................................................................................. 530Ressources Web ................................................................................................................ 53312.1. Jeu des entits de caractresLatin-1Tableau 12.1 : Jeu des entits de caractres Latin-1Caractre Nom de lentit CodagedcimalCodagehexadcimalespaceinscable (symbolemontaire) - R (signengation) - (traitdunionvirtuel) T _(macron) 2 ` 488 LE GUIDE COMPLETAnnexesChapitre 12Tableau 12.1 : Jeu des entits de caractres Latin-1Caractre Nom de lentit CodagedcimalCodagehexadcimal (pied demouche) ^ Jeu des entits de caractres Latin-1 Chapitre 12489LE GUIDE COMPLETTableau 12.1 : Jeu des entits de caractres Latin-1Caractre Nom de lentit CodagedcimalCodagehexadcimal Y Þ ; ß ; 490 LE GUIDE COMPLETAnnexesChapitre 12Tableau 12.1 : Jeu des entits de caractres Latin-1Caractre Nom de lentit CodagedcimalCodagehexadcimal ê ; ô ; y y 12.2. lments et attributs HTML 4.01Vous trouverez ici la totalit des lments et attributs proposs par laspcification HTML 4.01, classs par ordre alphabtique.lments et attributs HTML 4.01 Chapitre 12491LE GUIDE COMPLETlments HTML 4.01A : ancreaccesskey : 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 : fin de lien nomm. CDATAonblur : 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. NUMBERtarget : afficher dans ce cadre (DTD Frameset). %FrameTarget;type : type de contenu. %ContentType;ABBR : abrviation (www, HTTP, etc.)ACRONYM : acronymeADDRESS : informations sur lauteurAPPLET : 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).CDATAcode : fichier de classes de lapplet (dconseill). CDATAcodebase : 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).CDATAobject : fichier dapplet srialis (dconseill). CDATAvspace : intervalle vertical (dconseill). %Pixels;width : largeur initiale (dconseill). %Length;AREA : image cliquable ct clientaccesskey : touche daccs rapide. %Character;alt : description brve. %Text;coords : liste de longueurs spares par des virgules. %Coords;492 LE GUIDE COMPLETAnnexesChapitre 12href : 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. NUMBERtarget : afficher dans ce cadre (DTD Frameset). %FrameTarget;B : texte en style grasBASE : URI de base du documenthref : 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).CDATAsize : obligatoire. Taille de police de base des lments FONT(dconseill). CDATABDO : inactivation de lalgorithme I18N BiDidir : direction (obligatoire). (ltr | rtl)BIG : texte agrandiBLOCKQUOTE : citation longuecite : URI du document source ou message. %URI;BODY : corps du documentalink : 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 ligneclear : contrle du flux de texte (dconseill). (left | all |right | none)lments et attributs HTML 4.01 Chapitre 12493LE GUIDE COMPLETBUTTON : boutonaccesskey : touche daccs rapide. %Character;disabled : non disponible dans ce contexte. (disabled)name : nom. CDATAonblur : llment a perdu le focus. %Script;onfocus : llment a obtenu le focus. %Script;tabindex : position dans lordre de tabulation. NUMBERtype : employ comme bouton de formulaire.(button | submit |reset)value : valeur envoye au serveur lors de la soumission du formulaire.CDATACAPTION : lgende de tableaualign : alignement relatif du tableau (dconseill). %CAlign;CENTER : raccourci pour DIV align="center" (dconseill, DTDtransitoire)CITE : citationCODE : fragment de code informatiqueCOL : colonne de tableaualign : 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 : spcification de la largeur des colonnes. %MultiLength;COLGROUP : groupe de colonnes de tableaualign : 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. NUMBERwidth : largeur par dfaut des COL concernes (imbriques).%MultiLength;valign : alignement vertical dans les cellules. (top | middle |bottom | baseline)494 LE GUIDE COMPLETAnnexesChapitre 12DD : description de dfinitionDEL : texte supprimcite : information sur le motif de la modification.datetime : date et heure de modification. %Datetime;DFN : dfinition dinstanceDIR : liste de rpertoire (dconseill, DTD transitoire)compact : rduction de lespace entre lments (dconseill).(compact)DIV : conteneur de langue/style gnriquealign : alignement du texte (dconseill). (left | center | right| justify)DL : liste de dfinitionscompact : rduction de lespace entre lments (dconseill).(compact)DT : terme de dfinitionEM : emphaseFIELDSET : groupe de contrles de formulaireFONT : modification(s) locale(s) dune police (dconseill, DTDtransitoire)color : couleur du texte (dconseill). %Color;face : liste de noms de police, spars par une virgule (dconseill).CDATAsize : par exemple size="+1", size="4" (dconseill). [+|]nn,FORM : formulaire interactifacceptcharset : liste des jeux de caractres pris en charge.%Charsets;accept : liste des types MIME pour le tlchargement de fichiers.%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)lments et attributs HTML 4.01 Chapitre 12495LE GUIDE COMPLETname : nom du formulaire (employ dans des scripts). CDATAonreset : 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 modifier la taille des cadres ?(noresize)frameborder : prsence ou absence de bordure pour le cadre. 1 | 0)name : nom du cadre pour pouvoir le cibler. CDATAscrolling : prsence ou absence des barres de dfilement 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) (DTDFrameset). %MultiLengths;onload : tous les cadres ont t chargs (DTD Frameset). %Script;onunload : tous les cadres ont t supprims (DTD Frameset).%Script;rows : liste de longueurs, par dfaut 100 % (1 ligne) (DTD Frameset).%MultiLengths;Hn : titre de niveau n (n compris entre 1 et 6)align : alignement du texte (dconseill). (left | center | right | justify)HEAD : en-tte de documentprofile : dictionnaire nomm de mta-informations. %URI;HR : ligne horizontalealign : 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 documentversion : constante (dconseill). %HTML Version;I : texte de style italique496 LE GUIDE COMPLETAnnexesChapitre 12IFRAME : sous-fentre en ligne (DTD Transitoire)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. CDATAscrolling : prsence ou absence des barres de dfilement du cadre.(yes | no | auto)src : source du contenu du cadre. %URI;IMG : image incorporealign : 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). CDATAsrc : 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 fichiers.%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.NUMBERname : soumission comme partie dun formulaire. CDATAonblur : llment a perdu le focus. %Script;onchange : la valeur de llment a t modifie. %Script;onfocus : llment a obtenu le focus. %Script;lments et attributs HTML 4.01 Chapitre 12497LE GUIDE COMPLETonselect : du texte a t slectionn. %Script;readonly : pour du texte et un mot de passe. (readonly)size : spcifique chaque type de champ. CDATAsrc : pour les champs image. %URI;tabindex : position dans lordre de tabulation. NUMBERtype : le type de widget ncessaire. %InputType;usemap : emploi dune carte image ct client. %URI;value : spcifique aux boutons doption et cases cocher. CDATAINS : texte insrcite : information sur le motif de la modification. %URI;datetime : date et heure de la modification. %Datetime;ISINDEX : invite ligne unique (dconseill, DTD transitoire)prompt : message dinvite (dconseill). %Text;KBD : texte devant tre saisi par lutilisateurLABEL : libell dun champ de formulaireaccesskey : 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 champsaccesskey : touche daccs rapide. %Character;align : alignement relatif dun ensemble de champs (dconseill).%LAlign;LI : lment de listetype : style dun lment de liste (dconseill). %LIStyle;value : rinitialisation du numro de squence (dconseill). NUMBERLINK : lien indpendant du mdiacharset : jeu de caractres de la ressource lie. %Charset;href : URI de la ressource lie. %URI;media : pour laffichage sur un mdia prcis. %MediaDesc;target : afficher dans ce cadre (DTD Frameset). %FrameTarget;hreflang : code de langue. %LanguageCode;rel : type de lien avant. %LinkTypes;rev : type de lien arrire. %LinkTypes;type : type de contenu indicatif. %ContentType;498 LE GUIDE COMPLETAnnexesChapitre 12MAP : image cliquable ct clientname : servant de rfrence usemap (obligatoire). CDATAMENU : liste de menu (dconseill, DTD transitoire)compact : espace entre lments rduit (dconseill). (compact)META : mta-information gnriquecontent : information associe (obligatoire). CDATAhttpequiv : nom de len-tte de rponse HTTP. NAMEname : nom de la mta-information. NAMEscheme : slection dune forme de contenu. CDATANOFRAMES : conteneur de contenu alternatif pour un affichage nonfond sur des cadres (DTD Frameset)NOSCRIPT : conteneur de contenu alternatif pour un affichage nonfond sur des scriptsOBJECT : objet incorpor gnriquealign : alignement vertical ou horizontal (dconseill). %IAlign;archive : liste dURI spares par des espaces. CDATAborder : largeur de la bordure du lien (dconseill). %Pixels;classid : identifie une mise en uvre. %URI;codebase : URI de base pour classid, data, archive. %URI;codetype : type de contenu pour code. %ContentType;data : 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. CDATAstandby : message afficher lors du chargement. %Text;tabindex : position dans lordre de tabulation. NUMBERtype : 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 ordonnecompact : rduction de lintervalle entre lments (dconseill).(compact)start : dbut du numro de squence (dconseill). NUMBERtype : style de numrotation (dconseill). %OLStyle;lments et attributs HTML 4.01 Chapitre 12499LE GUIDE COMPLETOPTGROUP : groupe doptionsdisabled : indisponible dans ce contexte. (disabled)label : employ dans les menus hirarchiques (obligatoire). %Text;OPTION : option pouvant tre slectionnedisabled : indisponible dans ce contexte. (disabled)label : employ dans les menus hirarchiques. %Text;selected : option prslectionne. (selected)value : par dfaut, le contenu de llment. CDATAP : paragraphealign : alignement du texte (dconseill). (left | center | right| justify)PARAM : valeur de proprit nommename : nom de la proprit (obligatoire). CDATAtype : type de contenu pour la valeur lorsque valuetype=ref.%ContentType;value : valeur de la proprit. CDATAvaluetype : mode dinterprtation de la valeur. (DATA | REF |OBJECT)PRE : texte prformatwidth : (dconseill). NUMBERQ : courte citation en lignecite : URI du document source ou message. %URI;S : texte de style barr (dconseill, DTD transitoire)SAMP : exemple de sortie de programme, scripts, etc.SCRIPT : instructions de scriptcharset : jeu de caractres de la ressource lie. %Charset;defer : lagent utilisateur peut interrompre lexcution du script.(defer)language : nom de langage de script prdfini (dconseill). CDATAsrc : URI dun script externe. %URI;type : type de contenu du langage de script (obligatoire).%ContentType;SELECT : slecteur doptiondisabled : indisponible dans ce contexte. (disabled)500 LE GUIDE COMPLETAnnexesChapitre 12multiple : la valeur par dfaut est une slection simple. (multiple)name : nom du champ. CDATAonblur : llment a perdu le focus. %Script;onfocus : llment a obtenu le focus. %Script;size : lignes visibles. NUMBERtabindex : position dans lordre de tabulation. NUMBERonchange : la valeur de llment a t modifie. %Script;SMALL : texte en style diminuSPAN : conteneur de langue/style gnriqueSTRIKE : texte barr (dconseill, DTD transitoire)STRONG : emphase forteSTYLE : informations de stylemedia : conu pour lemploi avec ces mdias. %MediaDesc;type : type de contenu du langage de style (obligatoire).%ContentType;SUB : indiceSUP : exposantTABLE : tableaualign : 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 tableaualign : alignement (dconseill). (left | center | right |justify | char)char : caractre dalignement, par exemple char=:. %Character;lments et attributs HTML 4.01 Chapitre 12501LE GUIDE COMPLETcharoff : dcalage pour le caractre dalignement. %Length;valign : alignement vertical dans les cellules. (top | middle | bottom |baseline)TD : cellule de donnes de tableauabbr : 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. NUMBERheaders : liste dID des cellules den-tte. IDREFSheight : hauteur de la cellule (dconseill). %Length;nowrap : suppression du retour la ligne automatique (dconseill).(nowrap)rowspan : nombre de lignes fusionnes dans une cellule. NUMBERscope : 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 multiplesaccesskey : touche daccs rapide. %Character;cols : nombre de colonnes (obligatoire). NUMBERdisabled : indisponible dans ce contexte. (disabled)name : nom. #IMPLIEDonblur : llment a perdu le focus. %Script;onchange : la valeur de llment a t modifie. %Script;onfocus : llment a obtenu le focus. %Script;onselect : du texte a t slectionn. %Script;readonly : lecture seule. (readonly)rows : nombre de lignes (obligatoire). NUMBERtabindex : position dans lordre de tabulation. NUMBERTFOOT : pied de tableaualign : 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 COMPLETAnnexesChapitre 12TH : cellule den-tte de tableauabbr : abrviation pour les cellules den-tte. %Text;align : alignement (dconseill). (left | center | right |justify | char)axis : liste spare par des virgules den-ttes apparents. CDATAbgcolor : 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. NUMBERheaders : liste des ID des cellules den-tte. IDREFSheight : hauteur des cellules (dconseill). %Length;nowrap : suppression du passage automatique la ligne (dconseill).(nowrap)rowspan : nombre de lignes fusionnes par cellule. NUMBERscope : 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 tableaualign : 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 documentTR : ligne de tableaualign : 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 fixeU : texte soulign (dconseill, DTD transitoire)lments et attributs HTML 4.01 Chapitre 12503LE GUIDE COMPLETUL : liste non ordonne (liste puces)compact : rduction de lespace entre lments (dconseill).(compact)type : style de puces (dconseill). %ULStyle;VAR : instance de variable ou argument de programmeAttributs HTML 4.01Aabbr : Abrviation pour cellule de rubrique. %Text;. lments TD etTH.acceptcharset : liste des jeux de caractres reconnus. %Charsets;.lment FORM.accept : liste de types MIME pour chargement dun fichier sur leserveur. %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, DTDtransitoire). %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, DTDtransitoire). %TAlign;. lment TABLE.align : alignement (dconseill, DTD transitoire). (left | center |right). lment HR.align : alignement du texte (dconseill, DTD transitoire). (left |center | right | justify). lments DIV, H1, H2, H3, H4, H5, H6,P.align : alignement (dconseill). (left | center | right |justify | char). lments COL, COLGROUP, TBODY, TD, TFOOT, TH,THEAD, TR.alink : couleur des liens slectionns (dconseill, DTD transitoire).%Color;. lment BODY.alt : brve description (dconseill, DTD transitoire). %Text;.lment APPLET.alt : brve description. %Text;. lments AREA, IMG.504 LE GUIDE COMPLETAnnexesChapitre 12alt : brve description. CDATA. lment INPUT.archive : liste darchives spares par des virgules (dconseill, DTDtransitoire). CDATA. lment APPLET.archive : liste dURI spars par des espaces. CDATA. lmentOBJECT.axis : liste des rubriques concernes spares par des virgules. CDATA.lments TD, TH.Bbackground : mosaque de textures pour larrire-plan du document(dconseill, DTD transitoire). %URI;. lment BODY.bgcolor : couleur darrire-plan des cellules (dconseill, DTDtransitoire). %Color;. lment TABLE.bgcolor : couleur darrire-plan des ranges (dconseill, DTDtransitoire). %Color;. lment TR.bgcolor : couleur darrire-plan des cellules (dconseill, DTDtransitoire). %Color;. lments TD,TH.bgcolor : couleur darrire-plan du document (dconseill, DTDtransitoire). %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.Ccellpadding : espacement lintrieur des cellules. %Length;.lment TABLE.cellspacing : espacement entre les cellules. %Length;. lmentTABLE.char : caractre dalignement, par exemple char=:. %Character;.lments COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR.charoff : dcalage du caractre dalignement. %Length;. lmentsCOL, 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;. lmentsBLOCKQUOTE, Q.cite : informations sur la raison du changement. %URI;. lments DEL,INS.class : liste de classes spares par des espaces. CDATA. Tous leslments sauf BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT,STYLE et TITLE.lments et attributs HTML 4.01 Chapitre 12505LE GUIDE COMPLETclassid : identifie une implmentation %URI;. lment OBJECT.clear : contrle lcoulement du texte (dconseill, DTDtransitoire).(left | all | right | none). lment BR.code : fichier 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, DTDtransitoire). %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) (DTDFrameset). %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, DTDtransitoire).(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.Ddata : 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 lmentssauf APPLET, BASE, BASEFONT, BDO, BR, FRAME, FRAMESET, IFRAME,PARAM, SCRIPT.dir : directionnalit (obligatoire). (ltr | rtl). lment BDO.disabled : indisponible dans ce contexte. (disabled). lmentsBUTTON, INPUT, OPTGROUP, OPTION, SELECT, TEXTAREA.506 LE GUIDE COMPLETAnnexesChapitre 12Eenctype : type dencodage. %ContentType;. lment FORM.Fface : 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;. lmentTABLE.frameborder : bordures de cadre ou non ? (1 | 0). lments FRAME,IFRAME.Hheaders : 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.Iid : identifiant unique au document. ID. Tous les lments sauf BASE,HEAD, HTML, META, SCRIPT, STYLE, TITLE.ismap : utiliser une image cliquable ct serveur. (ismap). lmentsIMG, INPUT.Llabel : utiliser dans les menus hirarchiques. %Text;. lmentOPTION.label : utiliser dans les menus hirarchiques (obligatoire). %Text;.lment OPTGROUPlang : code de langue. %LanguageCode;. Tous les lments saufAPPLET, BASE, BASEFONT, BR, FRAME, FRAMESET, IFRAME, PARAM,SCRIPT.lments et attributs HTML 4.01 Chapitre 12507LE GUIDE COMPLETlanguage : nom de langage de script prdfini (dconseill, DTDtransitoire). CDATA. lment SCRIPT.link : couleur des liens (dconseill, DTD transitoire). %Color;.lment BODY.longdesc : lien vers une description longue (en complment delattribut alt). %URI;. lment IMG.longdesc : lien vers une description longue (en complment delattribut title) (DTD Frameset). %URI;. lments FRAME, IFRAME.Mmarginheight : 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). lmentSELECT.Nname : 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. lmentMAP.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 ? (DTDFrameset). (noresize). lment FRAME.noshade : (dconseill, DTD transitoire). (noshade). lment HR.508 LE GUIDE COMPLETAnnexesChapitre 12nowrap : suppression de la csure (dconseill, DTD transitoire).(nowrap). lments TD, TH.Oobject : fichier 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;. lmentsINPUT, SELECT, TEXTAREA.onclick : le bouton dun pointeur a t cliqu. %Script;. Tous leslments 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 lmentssauf 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;. Tousles 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 saufAPPLET, 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;. Tousles 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.lments et attributs HTML 4.01 Chapitre 12509LE GUIDE COMPLETonmouseout : 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 leslments 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.Pprofile : dictionnaire de mta-informations nomm. %URI;. lmentHEAD.prompt : message dinvite (dconseill, DTD Transitoire). %Text;.lment ISINDEX.RReadonly : 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.Sscheme : slectionner une forme de contenu. CDATA. lment META.scope : porte des cellules de rubrique. %Scope;. lments TD, TH.scrolling : barres de dfilement ou non (DTD Frameset). (yes | no510 LE GUIDE COMPLETAnnexesChapitre 12| auto). lments FRAME, IFRAME.selected : prslection. (selected). lment OPTION.shape : contrle linterprtation des coordonnes. %Shape;. lmentAREA.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. lmentCOLGROUP.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;. lmentsFRAME, IFRAME.src : URI de limage incorporer (obligatoire). %URI;. lment IMG.standby : message montrer pendant le chargement. %Text;. lmentOBJECT.start : numro commenant la squence (dconseill, DTDtransitoire). NUMBER. lment OL.style : indications de style associes. %StyleSheet;. Tous leslments sauf BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT,STYLE, TITLE.summary : objet/structure pour sortie vocale. %Text;. lment TABLE.Ttabindex : 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.lments et attributs HTML 4.01 Chapitre 12511LE GUIDE COMPLETtype : type de contenu pour lattribut data. %ContentType;. lmentOBJECT.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.Uusemap : utiliser une image cliquable ct client. %URI;. lments IMG,INPUT, OBJECT.Vvalign : Alignement vertical dans les cellules. (top | middle |bottom | baseline). lments COL, COLGROUP, TBODY, TD, TFOOT,TH, THEAD, TR.value : spcifier 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, DTDtransitoire). NUMBER. lment LI.valuetype : comment interprter la valeur ? (dconseill, DTDtransitoire). (DATA | REF | OBJECT). lment PARAM.version : une constante (dconseill, DTD transitoire). CDATA.lment HTML.vlink : couleur des liens visits (dconseill, DTD transitoire).%Color;. lment BODY.vspace : gouttire verticale (dconseill, DTD transitoire). %Pixels;.lments APPLET, IMG, OBJECT.512 LE GUIDE COMPLETAnnexesChapitre 12Wwidth : largeur (dconseill, DTD transitoire). %Length;. lment HR.width : largeur du cadre (DTD transitoire). %Length;. lmentIFRAME.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 : spcification de la largeur de colonne. %MultiLength;.lment COL.width : largeur par dfaut des lments COL contenus.%MultiLength;. lment COLGROUP.width : largeur (dconseill, DTD transitoire). NUMBER. lment PRE.12.3. Compatibilit XHTML/HTMLComme XHTML est une application XML, certaines habitudesparfaitement lgales dans le HTML 4 fond sur SGML doivent treamendes.Rdaction correcte des documentsLa rdaction correcte est un nouveau concept introduit par XML. Ilsignifie essentiellement quun lment doit toujours possder une balisede fin ou tre crit selon une forme particulire (voir ci-dessous). Enoutre, tous les lments doivent tre imbriqus et non se chevaucher.Tableau 12.2 : La rdaction correcte CORRECT INCORRECTlments imbriqus lments se chevauchantceci est un paragrapheavec emphase.ceci est un paragrapheavec emphase.Compatibilit XHTML/HTML Chapitre 12513LE GUIDE COMPLETNoms des lments et des attributs enminusculesLes documents XHTML doivent employer la casse minuscules pourtous les noms dlment HTML et les noms dattribut. Cette diffrenceest ncessaire, car XML est sensible la casse ( et sont desbalises diffrentes).Balises de fin obligatoiresDans le HTML 4 fond sur SGML, il est possible domettre la balise defin de certains lments, llment suivant crant une balise de finimplicite. Cette omission nest plus autorise dans le XHTML fond surXML. Tous les lments autres que ceux dclars dans la DTD commeEMPTY doivent possder une balise de fin.Tableau 12.3 : XHTML : balise de fin obligatoireCORRECT INCORRECTlments termins lments non terminsCeci est unparagraphe. Ceciest un autreparagraphe.Ceci est unparagraphe.Ceci est unautre paragraphe.Les lments vides doivent toujours possder une balise de fin ou labalise de dbut se terminer avec />. Par exemple, ou.Tableau 12.4 : lments videsCORRECT INCORRECTbalises vides termines balises vides non termines Vous devez placer un espacement avant le / et > de fin des lmentsvides, par exemple , et . Utilisez galement une syntaxe minimale pour leslments vides, par exemple , comme syntaxe alternative de qui est autoris par XML, car cela donne des rsultatsinattendus avec certains agents utilisateurs.514 LE GUIDE COMPLETAnnexesChapitre 12En cas toutefois doccurrence vide dun lment dont le modle decontenu nest pas EMPTY (par exemple, un titre ou un paragraphe vide),nutilisez pas la forme minimise : utilisez et non .Encodage de caractresPour spcifier lencodage de caractres dans le document, utilisez laspcification de lattribut dencodage dans la dclaration xml (parexemple ) et unedclaration meta http-equiv (par exemple ). La valeur de lattribut dencodage de linstruction de traitement xmlest prioritaire.Remarques sur les lmentslments script et styleEn XHTML, les lments script et style sont dclars commepossdant un contenu de type #PCDATA. Ainsi, < et & seront-ils traitscomme le dbut dun balisage, et les entits comme < et &seront-elles reconnues comme des rfrences dentits par le processeurXML, soit respectivement < et &. Emballer le contenu des lmentsscript ou style lintrieur dune section marque CDATA vitera latransformation de ces entits.Les sections CDATA sont reconnues par le processeur XML etapparaissent 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 descommentaires. Par consquent, la pratique historique de cacher sesscripts et ses feuilles de style au sein dun commentaire pour rendre lesdocuments compatibles avec les anciens navigateurs nest pasCompatibilit XHTML/HTML Chapitre 12515LE GUIDE COMPLETconseille : elle ne fonctionnera pas comme attendu dans les mises enuvre bases sur XML.lment isindexNe mettez pas plus dun lment isindex dans le head dundocument. Llment isindex est abandonn en faveur de llmentinput.Remarques sur les attributsXML ne supporte pas la minimisation des attributs. La pairevaleur/attribut doit tre crite au complet. Les noms dattributs tels quecompact et checked ne peuvent pas tre pris comme lments sansque leur valeur soit spcifie.Tableau 12.5 : Valeur obligatoireCORRECT INCORRECTattributs non minimiss attributs minimiss Quelques agents utilisateurs HTML sont toutefois incapablesdinterprter les attributs boolens quand ils apparaissent dans leurforme complte (non minimise), tels que requis par XML 1.0. Notezque ce problme naffecte pas les agents utilisateurs compatibles avecHTML 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, mmecelles qui semblent tre numriques.Tableau 12.6 : Guillemets impratifsCORRECT INCORRECTvaleurs dattributs entre guillemets valeurs dattributs sans les guillemets 516 LE GUIDE COMPLETAnnexesChapitre 12Dans les valeurs dattributs, les agents utilisateurs teront lesespacements de dbut et de fin des valeurs dattributs et dresseront unesquence dun ou plusieurs caractres despacement (tels que les retoursde lignes) un unique espacement intermots (un caractredespacement ASCII pour les critures occidentales).vitez les retours de ligne et les caractres despacement multiples ausein des valeurs dattributs. Ils seront traits illogiquement par les agentsutilisateurs.Quand une valeur dattribut contient une perluette, lattribut doit treexprim comme une rfrence dentit du caractre (par exemple&). Par exemple, quand lattribut href de llment a pointe versun script CGI qui accepte des paramtres, il doit tre exprim commececi :http://my.site.dom/cgi-bin/myscript.pl?class=guest&name=userplutt que comme a :http://my.site.dom/cgi-bin/myscript.pl?class=guest&name=user.Attributs id et nameHTML 4 a dfini lattribut name pour les lments a, applet, form,frame, iframe, img et map. HTML 4 a galement introduit lattributid. Ces deux attributs ont t conus pour tre utiliss comme desidentificateurs partiels.En XML, les identificateurs partiels sont de type ID, et il ne peut y avoirquun unique attribut ID par lment. En XHTML 1.0, lattribut id estaussi dfini de type ID. Pour sassurer que les documents XHTML 1.0sont des documents XML correctement structurs, les documentsXHTML 1.0 doivent utiliser lattribut id quand lidentificateur partielest dfini, mme sur les lments qui possdent historiquement aussi unattribut name.En XML, un URI qui termine par un identificateur partiel de la forme#foo ne se rfre pas aux lments possdant un attribut name="foo",mais aux lments possdant un attribut dfini de type ID, soit lattributid de HTML 4. Beaucoup de clients HTML existants ne maintiennentpas lutilisation des attributs de type ID de cette manire, donc desvaleurs identiques doivent tre fournies pour les deux attributs afindassurer des compatibilits ascendante et descendante maximales (parexemple, ...).Compatibilit XHTML/HTML Chapitre 12517LE GUIDE COMPLETgalement, depuis que lensemble des valeurs lgales dfinies pour lesattributs 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 estcontraint de manire ce quil ne puisse pas avoir dautres valeurs quecelles de type ID, ou comme la production Name en XML 1.0 Section2.5, production 5. Malheureusement, cette contrainte ne peut pas treexprime dans les DTD XHTML 1.0. cause de ces changements, laplus grande prcaution est de rigueur lors de la conversion de vosdocuments HTML existants. Les valeurs de ces attributs doivent treuniques lintrieur dun document, valides, et toute rfrence cesidentificateurs 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 versionssuivantes.Attributs lang et xml:langUtilisez les deux attributs lang et xml:lang lorsque vous spcifiez lelangage dun lment. La valeur de lattribut xml:lang est prioritaire.Exclusions SGMLSGML permet au rdacteur dune DTD dexclure la prsence de certainslments lintrieur dun lment. Une telle interdiction (appele exclusion ) nest pas possible en XML.Par exemple, la DTD HTML 4 stricte interdit lembotement dunlment a dans un autre lment a quelque profondeur que ce soit. Ilnest pas possible de dfinir ce type dinterdiction en XML. Mme sicette interdiction ne peut pas tre dfinie dans la DTD, certains lmentsne devraient pas tre embots.Instructions de traitementVrifiez que les instructions de traitement sexcutent sur les agentsutilisateurs. Si la dclaration XML nest pas incluse dans un document,le document peut uniquement employer les jeux de caractres par dfautUTF-8 ou UTF-16.518 LE GUIDE COMPLETAnnexesChapitre 12Modle Objet de Document et XHTMLLa Recommandation de Modle Objet de Document niveau 1 dfinit lesinterfaces du Modle Objet de Document pour XML et HTML 4. LeModle Objet de Document du HTML 4 spcifie que les noms deslments et des attributs HTML sont retourns en casse majuscules .Le Modle Objet de Document XML spcifie que les noms des lmentset des attributs sont retourns dans la casse spcifie. En XHTML 1.0,les noms des lments et des attributs sont spcifis dans la casse minuscules . Cette diffrence apparente peut tre fixe de deuxmanires :j Les applications qui accdent des documents XHTML distribusavec le type de mdia Internet text/html via le DOM peuventutiliser le DOM HTML et sappuyer sur des noms dlments etdattributs retourns en majuscules par ces interfaces.j Les applications qui accdent des documents XHTML distribusavec le type de mdia Internet text/html ouapplication/xml peuvent galement utiliser le DOM XML.Les noms des lments et des attributs sont renvoys en casse minuscules . Quelques lments XHTML peuvent ou nonapparatre dans larbre dobjets, car ils sont facultatifs dans lemodle de contenu (par exemple llment tbody lintrieurdun tableau table). Cela se produit parce quen HTML 4quelques lments pouvaient tre minimiss et leurs balises dedbut et de fin pouvaient tre toutes les deux omises (unefonctionnalit SGML). Ce nest pas possible en XML. Plutt quede demander aux auteurs de documents dinsrer des lmentshors contexte, XHTML a rendu facultatifs les lments. Lesapplications ont besoin de sadapter en respectant cela.Feuilles de style imbriques (CSS) et XHTMLLa Recommandation des feuilles de style imbriques niveau 2 dfinit lesproprits appliques larbre danalyse grammaticale du documentHTML ou XML. Les diffrences dans lanalyse produiront diffrentsrsultats sonores ou visuels, selon les slecteurs utiliss. Les indicateurssuivants rduisent cet effet pour des documents distribus sansmodification des deux types de mdias :j Les feuilles de style CSS pour le XHTML doivent employer desnoms dlments et dattributs de casse minuscules .Compatibilit XHTML/HTML Chapitre 12519LE GUIDE COMPLETj Dans les tableaux, llment tbody sera dduit par le parseurdun agent utilisateur HTML, mais pas par le parseur dun agentutilisateur XML. Par consquent, vous devez toujours ajouterexplicitement un lment tbody sil se rfre un slecteur CSS.j Au sein de lespace de noms XHTML, les agents utilisateursreconnaissent lattribut id comme un attribut de type ID. Parconsquent, les feuilles de style doivent pouvoir continuer employer la syntaxe raccourcie # du slecteur mme si lagentutilisateur ne lit pas la DTD.j Au sein de lespace de noms XHTML, les agents utilisateursreconnaissent lattribut class. Par consquent, les feuilles destyle doivent pouvoir continuer employer la syntaxe raccourcie . du slecteur.j Les CSS dfinissent des rgles de conformit diffrentes pour lesdocuments HTML et XML. Les rgles HTML sappliquent auxdocuments XHTML distribus en tant que HTML, les rglesXML aux documents XHTML distribus comme XML.DTD XHTMLComme pour HTML, XHTML existe en trois parfums : strict,transitoire et jeux dencadrement. Ces trois versions sont respectivementdclares comme suit :La variante frameset reprend tous les balises et attributs de la variantetransitional. Deux balises ont t rajoute : frameset et frame.Diffrences entre strict et transitionalLanalyse des diffrences permet de traduire facilement un documentnon conforme, ou conforme HTML 4.01 transitional, en documentXHTML 1.0 strict. La variante strict oblige une sparation du contenu etde la prsentation. Cela implique donc la suppression de tous leslments et attributs de mise en forme, et lobligation de passer par lesCSS.520 LE GUIDE COMPLETAnnexesChapitre 12Le Tableau B.1 prsente les lments devenus obsoltes en XHTMLstrict et leurs alternatives.Tableau 12.7 : lments obsoltes en XHTML strictlment Alternativeframeset,frameUtilisez la variante frameset du XHTMLiframe Utilisez la variante transitional du XHTMLfont,basefontUtilisez les styles CSS font et ses drivs :fontfamily, fontsize, fontweight, etc.u Style textdecoration : underline;s, strike Style textdecoration : linethrough;menu, dir Ces balises ont en fait la mme fonction que ul ; seulelapparence par dfaut change. Remplacez-les par uneliste ul et modifiez lapparence avec les stylesliststyle et leurs drivs (liststyletype,etc.), et ventuellement margin ou padding.center Le style textalign : center; mettre surllment parent pour centrer des lments de type enligne. Sur les lments de type bloc, les stylessuivants : marginleft : auto; marginright :auto;isindex lment inputapplet lment objectLe Tableau suivant prsente les attributs devenus obsoltes en XHTMLstrict et leurs alternatives.Tableau 12.8 : Attributs obsoltes en XHTML strictAttribut lments concerns AlternativeAlign div, p, h1 h6, hr,object, img, input,legend, table,captionStyle textalign surllment parent pour alignerdes lments de type enligne. Sur des lments detype bloc, les stylessuivants : marginleft,marginright.Compatibilit XHTML/HTML Chapitre 12521LE GUIDE COMPLETTableau 12.8 : Attributs obsoltes en XHTML strictAttribut lments concerns Alternativebackground body Style backgroundimage,qui peut tre employconjointement avec les stylesbackgroundposition etbackgroundrepeat pourpositionner et dfinir larptition de limage de fond.Il est possible dutiliser cesstyles sur pratiquement tousles lments.bgcolor body, table, tr, td,thStyle backgroundcolorborder object, img Style borderclear Br Style clearcompact Ul, ol, dl Jouer sur les styles marginou paddingheight Td, th Style heighthspace,vspaceobject, img Style marginlanguage script Aucun. Lattribut typesuffit : scripttype="text/javascript".link, alink,vlinkbody Dfinissez un style par dfautsur llment a ainsi que surles pseudo-classes :link ,:visited et :active.name img, form Utilisez lattribut idNoshade hr Ensemble des styles border, en particulierborderstyle.Nowrap th, td Style whitespace :nowrap;Size hr Style heightstart Ol Utilisez les styles pour grerdes compteurstarget base, link, a, area,formAucun522 LE GUIDE COMPLETAnnexesChapitre 12Tableau 12.8 : Attributs obsoltes en XHTML strictAttribut lments concerns Alternativetext body Style colortype ul, ol, li Style liststylevalue li Utilisez les styles pour grerdes compteurswidth hr, pre, td, th Style widthRemarquez par ailleurs que, au sein des lments form, noscript etblockquote , il ne peut plus y avoir dlments de type en ligne.Pour convertir rapidement et de faon correcte un document HTML endocument au format XHTML, servez-vous de HTML Tidy ou delditeur/navigateur Amaya.12.4. DTD et XMLXML a recours un fichier nomm DTD (Document Type Definition,dfinition de document type) pour vrifier quun document XMLrespecte une syntaxe donne. Une DTD constitue une grammaire quipermet de vrifier la conformit du document XML. La norme XMLnimpose pas lutilisation dune DTD pour un document XML, mais elleimpose en revanche le respect exact des rgles de base de la normeXML.La terminologie XML emploie les dfinitions suivantes :j Document bien form pour un document qui ne comporte pas deDTD mais respecte les exigences de la spcification.j Document valide pour un document qui se conforme strictementaux rgles dune DTD.Une DTD peut tre dfinie de 2 faons :j De faon interne : la grammaire est incluse au sein mme dudocument.j De faon externe : soit en appelant un fichier qui contient lagrammaire partir dun fichier local, soit en y accdant par sonURL.DTD et XML Chapitre 12523LE GUIDE COMPLETCest cette dernire solution qui est adopte par les fichiers HTML :HTML 4 tant fond sur XML, il repose sur des DTD. Vous lavez vulors de lcriture de pages Web, puisque tout fichier HTML dbute enprincipe par la spcification de la DTD employe :La prhistoire du dveloppement de sites Web a fait croire denombreux concepteurs que le HTML pouvait scrire de manire assezlibre, le navigateur se chargeant de rattraper les btises et dafficher lapage tant bien que mal.Cest videmment totalement faux. Cela ntait d quau simple fait queles agents utilisateurs de lpoque taient non validants, incapables degrer correctement et totalement les spcifications des langages Web.Cest pourquoi un concepteur doit encore se battre pour fairefonctionner 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 personnedevant produire du code (XML, (X)HTML, etc.) valide. Une DTDconstitue une rfrence beaucoup plus rapide consulter que les longuesspcifications publies par le W3C. Elle indique clairement ce que lenavigateur est en droit dattendre.Dclaration dun lmentPour pouvoir crer un document XML, il est utile dans un premiertemps de dfinir les lments qui peuvent tre employs, et plusexactement les informations que vous souhaitez utiliser.La dfinition dun lment rpond la syntaxe suivante :Le paramtre modle reprsente soit un type de donnes prdfini, soitune rgle dutilisation de llment. Les types prdfinis utilisables sontprsents dans le Tableau D.1.Tableau 12.9 : Types prdfinis pour un lmentType prdfini DescriptionANY Llment peut contenir tout type de donnes524 LE GUIDE COMPLETAnnexesChapitre 12Tableau 12.9 : Types prdfinis pour un lmentType prdfini DescriptionEMPTY Llment ne contient pas de donnes spcifiques#CDATA Le contenu nest pas interprt par lagent utilisateur#PCDATA Llment doit contenir une chane de caractres. Cecontenu est interprt par lagent utilisateur.Autrement dit, un lment avec un contenu de type #PCDATA (parsedcharacter data) verra ce contenu interprt par le navigateur, les balisesventuelles tant traites comme telles, tandis quavec #CDATA lecontenu est considr comme une simple chane de caractres...Ainsi un lment nomm titre contenant un type #PCDATA seradclar comme suit dans la DTD :Ecriture de #PCDATALe mot-cl #PCDATA doit imprativement figurer entre parenthses.Vous obtiendrez sinon une erreur du parseur.Cet lment pourra tre crit de la faon suivante dans le documentXML :Bible C++Il est galement possible de dfinir des rgles dutilisation : les lmentsXML quun lment peut ou doit contenir. Cette syntaxe se fait laidede notations spcifiques, prsentes dans le Tableau D.2 :Tableau 12.10 : Oprateurs des rgles dutilisation dun lmentOprateur Exemple Signification+ a+ Llment a doit tre prsent au minimum une fois* a* Llment a peut tre prsent plusieurs fois (ouaucune)? a? Llment a est facultatif.| a|b Les lments a ou b peuvent tre prsentsDTD et XML Chapitre 12525LE GUIDE COMPLETTableau 12.10 : Oprateurs des rgles dutilisation dun lmentOprateur Exemple Signification, a,b Llment a doit tre prsent et suivi de llmentb() (a,b)+ Regroupement dlments en vue de leur appliquerles autres oprateurs. Ici, la prsence dunlment a suivi dun lment b est obligatoire.Vous pouvez ainsi crer la dclaration suivante dans une DTD :Cette dclaration peut aboutir un document XML du style :La Bible C++Micro Application Horstamn C, Budd T. 2004www.microapp.com ou bien :La Bible C++Micro Application Horstamn C, Budd T. 2004Dclaration dattributsVous pouvez ajouter des proprits un lment particulier en luiaffectant un attribut, cest--dire une paire cl/valeur. Avec XML, lasyntaxe de dfinition dun attribut est la suivante :type reprsente le type de donne de lattribut. Il peut tre :j Littral : vous affectez une chane de caractres un attribut. Vousle dclarez ainsi laide du mot-cl CDATA.526 LE GUIDE COMPLETAnnexesChapitre 12j numration : permet de dfinir une liste de valeurs possiblespour un attribut donn, afin de limiter le choix de lutilisateur. Lasyntaxe de ce type dattribut est :j Pour dfinir une valeur par dfaut, faites suivre lnumration parla valeur dsire place entre guillemets :j Atomique : permet de dfinir un identifiant unique pour chaquelment grce au mot-cl ID.Chacun de ces types dattributs peut tre suivi dun mot-cl particulierqui permet de spcifier le niveau de ncessit de lattribut :j #IMPLIED : lattribut est facultatif.j #REQUIRED : lattribut est obligatoire.j #FIXED : lattribut possde une valeur par dfaut sil nest pasdfini. Il doit tre immdiatement suivi de la valeur place entreguillemets.Une dclaration dattribut peut ainsi se prsenter comme ceci :niveau(debutant|intermediaire|expert)"expert" >Llment livre possde deux attributs IDlivre et niveau. Le premierattribut est de type atomique : cest un identifiant unique obligatoire.Lattribut niveau peut tre dbutant, intermdiaire ou expert, cettedernire valeur tant affecte par dfaut.Dclaration de notationsXML permet la dfinition dune application par dfaut lancer pourouvrir des documents non XML encapsuls dans le code XML. Il estainsi possible dassocier les images JPG au programme Paint Shop Pro(psp.exe) grce la syntaxe suivante :DTD et XML Chapitre 12527LE GUIDE COMPLETDclaration dentitsXML permet de crer des entits, cest--dire de dclarer un groupedlments sous un nom afin de ne pas avoir rcrire ces derniersplusieurs fois dans la DTD sils se rptent, dans le mme esprit que lesmacros dans les diteurs de texte. Le recours des entits dans undocument XML permet une meilleure lisibilit, un meilleur contrle ducontenu et amliore la facilit de mise jour.XML possde plusieurs types dentits : les entits gnrales, les entitsparamtres et les entits caractres.Entits gnralesLes entits gnrales servent dfinir des lments pouvant tresubstitus dans le corps du document XML (mme sils sont dfinis ausein de la DTD et non du document XML lui-mme). La syntaxe duneentit gnrale est la suivante :Il est par exemple possible de dclarer lentit gnrale suivante dans laDTD :Les entits dfinies dans la DTD peuvent ainsi tre utilises dans le codeXML en les appelant avec la syntaxe suivante :&nom__entite;La dclaration prcdente pourra donc donner un document XML dustyle :La Bible C++Micro Application Horstamn C, Budd T. 2004www.@&site;Le parseur transformera automatiquement chacune des entits contenuesdans le code XML en chane de caractres :La Bible C++Micro Application Horstamn C, Budd T. 528 LE GUIDE COMPLETAnnexesChapitre 122004www.microapp.comLes entits gnrales peuvent aussi tre contenues dans un fichierextrieur (afin dtre utilises par plusieurs DTD, par exemple). Ellesportent alors le nom dentits externes. La syntaxe dune entit externeest la suivante :Dans lexemple suivant, le contenu du fichier niv.txt (situ dans le mmerpertoire que la DTD) sera insr dans le fichier XML chaque foisque lentit ∋ sera rencontre :Entits paramtresUne entit paramtre permet demployer des entits dans les DTDelles-mmes. La syntaxe est la suivante :Le nom de lentit doit toutefois respecter certaines rgles :j Commencer par une lettre ou un trait de soulignement (underscore_).j tre compos uniquement de lettres, de chiffres, de tirets (), detraits de soulignement (_), de points (.) ou du caractre deuxpoints (:).Voici un exemple de dclaration dentit paramtre :niveau(debutant|intermediaire|expert) "expert">Il est galement possible (comme pour les entits gnrales) de dfinirune entit paramtre externe grce la syntaxe suivante :La DTD fichier.dtd sera un fichier comportant la dclarationdentit paramtre :DTD et XML Chapitre 12529LE GUIDE COMPLETEntits caractresLes entits caractres sont des caractres rservs du XML reprsentssous forme dentits gnrales afin de pouvoir insrer ces caractresrservs dans le document XML. Les principales entits caractres sontprsentes dans le Tableau D.3.Tableau 12.11 : Principales entits caractreEntit caractre Reprsentation& &< >' " "Il est galement possible de dfinir des entits caractres pour nimportequel caractre en utilisant le code hexadcimal du caractre :Par exemple :Mme si cette annexe peut sembler succincte, elle devrait vouspermettre de mieux comprendre les DTD des spcifications HTML 4.01et XHTML 1.12.5. Slecteurs CSSLa version 3 des slecteurs CSS (http://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html) propose des slecteursnombreux et trs sophistiqus, capables de rpondre dsormais pratiquement toutes les situations. Les slecteurs sont classs dans letableau suivant par ordre dapparition dans les versions CSS, afin demontrer lvolution.530 LE GUIDE COMPLETAnnexesChapitre 12Tableau 12.12 : Evolution des slecteurs CSS de la version 1 la version 3Motif Signification CCSE Un lment de type E 1E:link/visited Un lment E dune ancre hypertexte dont lacible na pas encore t visite (:link) oula t (:visited)1E::firstline Le premire ligne mise en forme dunlment E1E::firstletter La premire letttre mise en forme dunlment E1E.warning Un lment E dont la classe est warning .Le langage du document spcifie le mode dedtermination de la classe.1E#monid Un lment E dont lID est monid . 1E F Un lment F descendant dun lment E 1E:active/hover/focus Un lment E pendant certaines actions delutilisateur1 et 2* Nimporte quel lment 2E[attribut] Un lment E avec un attribut attribut 2E[attribut="valeur"] Un lment E avec un attribut attribut dont la valeur est valeur 2E[attribut~="valeur"] Un lment E avec un attribut attribut dont la valeur est une liste de valeursspares par des virgules dont lune estgale valeur 2E:firstchild Un lment E, premier enfant de son parent 2E:lang(fr) Un lment E en langue fr . Le langagedu document spcifie le mode dedtermination de la langue2E::before Contenu gnr avant un lment E 2E::after Contenu gnr aprs un lment E 2E > F Un lment F enfant dun lment E 2E + F Un lment F immdiatement prcd parun lment E2E[attribut^="valeur"] Un lment E avec un attribut attribut dont la valeur commence exactement par lachane valeur 3Slecteurs CSS Chapitre 12531LE GUIDE COMPLETTableau 12.12 : Evolution des slecteurs CSS de la version 1 la version 3Motif Signification CCSE[attribut$="valeur"] Un lment E dont la valeur de lattribut attribut se termine exactement par lachane valeur 3E[attribut*="valeur"] Un lment E dont la valeur de lattribut attribut contient la sous-chane valeur 3E[hreflang|="en"] Un lment E dont lattribut hreflang contient une liste spare par des tirets quicommence ( gauche) par en 3E:root Un lment E racine du document 3E:nthchild(n) Un lment E, nime enfant de son parent 3E:nthlastchild(n) Un lment E, nime enfant de son parent enpartant du dernier3E:nthoftype(n) Un lment E, nime descendant de ce type 3E:nthlastoftype(n) Un lment E, nime descendant de ce type partir du dernier3E:lastchild Un lment E, nime dernier enfant de sonparent3E:firstoftype Un lment E, premier descendant de cetype3E:lastoftype Un lment E, dernier descendant de cetype3E:onlychild Un lment E, seul enfant de son parent 3E:onlyoftype Un lment E, seul descendant de ce type 3E:empty Un lment E dpourvu denfant (y compristout nud texte)3E:target Un lment E cible de lURI 3E:enabled/disabled Un lment dinterface utilisateur E activ oudsactiv3E:checked Un lment dinterface utilisateur E coch(bouton doption ou case cocher)3E::selection La portion dun lment E actuellementslectionne/mise en surbrillance parlutilisateur3E:not(s) Un lment E qui ne correspond pas auslecteur simple s3E ~ F Un lment F prcd par un lment E 3532 LE GUIDE COMPLETAnnexesChapitre 12Comme le montre ce tableau, les possibilits denrichissement duncontenu laide dune feuille de style sont dsormais extrmementriches. CSS permet en outre de combiner laide doprateurs lesslecteurs simples, ce qui largit encore le champ des possibilits.12.6. Ressources WebDe nombreuses autres ressources sont prsentes sur le Web : il estfortement recommand dy accder, car les ressources en ligne sontactualises plus frquemment que ne peut ltre cet ouvrage.SpcificationsSpcification HTML 4.01 : www.w3.org/TR/html401 (anglais), www.la-grange.net/w3c/html4.01/cover.html (franais).Spcification du Modle Objet de Document (DOM) : www.w3.org/TR/REC-DOM-Level-1/Recommandation XHTML 1.0 : www.w3.org/TR/2002/REC-xhtml1-20020801/(anglais), www.la-grange.net/w3c/xhtml1/ (franais).Site Web Unicode : www.unicode.org/Outils de cration WebLogiciel commerciauxWebExpert : http://softwares.visicommedia.com/fr/products/webexpert/overview.htmlAdobe Golive : www.adobe.fr/products/golive/main.htmlNamo Web Editor : www.namo.com/products/webeditor.phpHotDog Professional 7.0.1 : www.sausage.com/WebFast : www.internetspirit.com/Logiciels gratuits1st Page 2000 : www.evrsoft.com/1stpage2.shtmlAmaya : www.w3.org/Amaya/Mozilla Composer : www.archilinux.org/mozilla/composer.htmlTlchargement de la suite Mozilla : www.mozilla-europe.org/fr/Netscape Composer : http://wp.netscape.com/communicator/composer/v4.0/Ressources Web Chapitre 12533LE GUIDE COMPLETNvu : http://frenchmozilla.sourceforge.net/nvu/ Le site principal anglais estwww.nvu.com Un tutoriel trs complet couvrant linstallation, laconfiguration et lutilisation de Nvu (fond sur la version 0.9) estgalement propos sur le site de Framasoft (www.framasoft.net/article2656.html).SoThink HTML Editor (CutePage) : www.sothink.com/htmleditor/NavigateursInternet Explorer : www.microsoft.com/france/internet/produits/ie/default.mspxNetscape 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.htmOpera : www.opera.com/Camino : www.mozilla-europe.org/fr/Lynx : un excellent tutoriel en franais peut tre trouv ladressehttp://dominique.guebey.club.fr/tekno/lynx/index.htm La page officielle est http://lynx.browser.org/pwWebSpeak : une version de dmonstration de ce navigateur texte-parole peut tre trouve ladresse www.prodworks.comImagesFonds dcran : www.atelier-duotang.com/tuiles/modeles/fonds.php?page=1Ulead SmartSaver : www.ulead.com/webutilities/frwhere.htmPaint 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, version1.10, M. Stokes, M. Anderson, S. Chandrasekar et R. Motta, 5 novembre1996. www.w3.org/Graphics/Color/sRGBSites de gifs animsdgif.legif.com/www.yatoula.com/www.icone-gif.com/www.chez.com/gif/534 LE GUIDE COMPLETAnnexesChapitre 12www.01gif.com/gif.webgratuit.com/diteurs dimages animesMicrosoft Gif Animator (gratuit) : www.zdnet.fr/telecharger/windows/fiche/0,39021313,11010272s,00.htmA Smaller GIF (28 $) : www.peda.com/smaller/download.htmlGif.gIf.giF (28 $) : www.peda.com/ggg/download.htmlUlead GIF Animator 5 (49 $) : www.ulead.comAnimated Shop/Paint Shop Pro (29/129 $) : www.jasc.com/products/paintshoppro/Feuilles de styleSpcification CSS2 : www.w3.org/TR/REC-CSS2/cover.html#minitocProprits des feuilles de style CSS2 : www.w3.org/TR/REC-CSS2/propidx.htmlSpcifications sur les rgles dhritage CSS2 : www.w3.org/TR/REC-CSS2/cascade.htmlLe 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.htmlScriptsJavaScriptPour 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 codeJavaScript, 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 endroito poser des questions et obtenir les informations les plus fraches surJavaScript.Ressources Web Chapitre 12535LE GUIDE COMPLETUne foire aux questions (FAQ) JavaScript peut tre trouve ladressehttp://idm.internet.com/faq/js-faq.shtmlUne excellente ressource JavaScript est situe ladresse www.webreference.com/javascriptJScriptLa page officielle du crateur Microsoft est http://msdn.microsoft.com/library/default.asp?url=/library/en-us/script56/html/js56jslrfjscriptlanguagereference.aspVous trouverez dautres exemples aux adresses www.asp-fr.net/jscript/ etwww.pageresource.com/jscript/ (entre autres).Vous pouvez trouver des milliers de scripts JavaScript ladressewww.javascripts.comECMA-Scriptwww.ecma-international.org/publications/standards/Ecma-262.htmVBScriptLa page officielle du crateur Microsoft se trouve ladresse http://msdn.microsoft.com/library/default.asp?url=/library/en-us/script56/html/vtorivbscript.aspVous 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).JavaDe nombreuses ressources de script sont disponibles ladresse www.irt.org/ Ce site propose dailleurs des ressources sur pratiquement tous lessujets abords dans ce livre.De nombreuses autres ressources Java, parmi lesquelles des applets,peuvent tre trouves ladresse www.developer.com/java/CookiesLa foire aux questions (FAQ) Unofficial Cookie se trouve ladressewww.cookiecentral.com/unofficial_cookie_faq.htm536 LE GUIDE COMPLETAnnexesChapitre 12Modules complmentairesShockwave : www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlashAdobe Acrobat Reader : www.adobe.fr/products/acrobat/readstep2.htmlRealPlayer : http://france.real.com/player/?&src=ZG.fr.idx,ZG.fr.rp.rp.hd.defRessources MIDI : www.midi.comQuickTime : www.apple.com/quicktime/download/win.htmlLogiciels FTPCuteFTP : www.cuteftp.com/cuteftp/LeechFTP : http://stud.fh-heilbronn.de/~jdebis/leechftp/downloads.html. Ceproduit, dont il existe une version franaise, va prochainement treremplac par BitBeamer, du mme auteur.WS- FTP 95 : nombreux sites, dont www.sharewarejunkies.com/8zwd7/ws_ftp_95_le.htmFileZilla : 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=57www.jetelecharge.com/softs-49-1.phphttp://telecharger.presence-pc.com/categorie.asp?num=43&page=1et bien dautres encoreRessources Web Chapitre 12537LE GUIDE COMPLETGlossaireAAccessibilit : Procurer un accs universel un site Web laide denimporte quel dispositif entre-sortie comme : reconnaissance vocale,lecteurs dcran ou interprteurs braille, dispositifs de pointage nonstandard et TTY.ActiveX : Technique propritaire Microsoft permettant au navigateurWeb dincorporer et de contrler des applications dans une page Web.Adresse IP : Numro unique utilis par les ordinateurs afin desidentifier sur Internet. Les utilisateurs se connectant par modemtlphonique possdent souvent des adresses IP dynamiques, afin deminimiser le nombre dIP disponibles.Alignement : Positionnement du contenu dune page par rapport auxmarges : gauche, droite ou centr.Animation : Graphisme multiples images, un fichier Shockwave ouune applet danimation Java semblant sanimer lcran.API (Application Programming Interface) : Dans un serveur Web, unenvironnement de programmation permettant la rdaction deprogrammes intgrs pour des scripts ct serveur ou autres tches duserveur.Applet : Miniprogramme, gnralement crit en Java, qui excute uneapplication contenue dans une page Web.Application : Programme indpendant qui possde un but particulier. Unprogramme JavaScript, une applet Java ou mme un ensemble de pagesWeb peuvent constituer une application.Architecture : Combinaison dun microprocesseur et du matrielidentifiant un modle dordinateur (x86, SPARC, Macintosh, etc.).Archive : Un ou plusieurs fichiers renfermant dautres fichiers dans unbut de sauvegarde ou de rfrence ultrieure.ASCII : Donnes en texte pur, ni codes ni compresses.Aspect : Combinaison des couleurs de document, des images et desoutils de navigation confrant un site une image homogne.540 LE GUIDE COMPLETGlossaireChapitre 13Assistant : Petit programme, le plus souvent incorpor un autreprogramme, automatisant une tche complexe ou guidant travers lestapes successives dun concept peu familier.Attribut : Influe sur un lment HTML. Un attribut dtermine lesproprits dun lment.Attribut (dclaration d) : En XML, une dclaration dattribut dfinit lafaon dont les attributs peuvent tre utiliss et dans quels lments.Auditive (feuille de style) : Feuille de style en cascade (CSS) contenantdes proprits spcifiques aux navigateurs Web audio.Autorisation : Permission de lire, dcrire ou dexcuter des fichiersaccorde des individus, des groupes ou des utilisateurs anonymes. Voiraussi droit daccs.Authentification de base : Nom dutilisateur et/ou mot de passe exigspour pouvoir accder un fichier ou un rpertoire, sans que latransaction (mot de passe compris) soit forcment crypte.Bbackground : Utilis comme attribut pour llment BODY, il spcifielimage darrire-plan utiliser. En tant que proprit de feuille de style,il dtermine la couleur darrire-plan de llment dfini.Balise : Chane de caractres dbutant par < et finissant par >, qui ouvreou ferme un lment HTML.Balise (diteur de type) : diteur affichant lcran les balises HTMLalors que vous ditez votre page et possdant des raccourcis pourfaciliter linsertion des diffrentes balises.Bande passante : Taux maximal de transfert dun lien.Barre doutils : Ensemble de boutons et dicnes dun programmedonnant accs aux outils et fonctionnalits de celui-ci.Base de donnes : Un ou plusieurs fichiers rassemblant des donnesindividuelles, telles que les noms dun carnet dadresses ou les produitsdun catalogue.Chapitre 13541LE GUIDE COMPLETBarre de navigation : Partie dune page Web donnant accs auxdiffrentes pages et/ou actions possibles sur un site Web.Bien form : Terme appliqu un document respectant la spcification laquelle il fait rfrence (XML surtout).Binaire : Donnes codes ou compresses, telles que des images, desarchives, des programmes ou tout fichier non ASCII.Bloc (lment) : lment HTML qui insre un saut de ligne automatiqueavant sa balise douverture et aprs sa balise de fermeture.BODY : Corps du document : partie qui renferme le contenu visible dunepage.Bote de dialogue : Fentre indpendante qui apparat pour poser unequestion, ou servir dalerte ou davertissement lutilisateur. Une botede dialogue exige en gnral une rponse avant dtre ferme.Bordure : Ligne ou frontire autour dun lment tel quun tableau ouune image.Bouton (aspect) : Transformer une image en lui donnant lapparencedun bouton cliquable .CCache : Emplacement du disque dur o le navigateur stocke les fichierstemporaires.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 descaractres et symboles utiliss dans un document. Par exemple,lalphabet japonais utilise un jeu diffrent de celui de lalphabet delEurope de lOuest.Casse (sensibilit la) : Diffrence entre majuscules et minuscules.Cellule : Case individuelle dun tableau.542 LE GUIDE COMPLETGlossaireChapitre 13CGI (Common Gateway Interface) : Interface de programmation quipermet un utilisateur Web anonyme dexcuter un programme (tel unscript Perl) sur le serveur.Champ (de formulaire) : lment individuel qui rcupre une saisie delutilisateur.Chiffrage : Fait de crypter les donnes afin quelles ne puissent tre luessans lapplication dun algorithme de dchiffrage prcis.Classe : Slecteur de feuille de style permettant dappliquer unedfinition de style nimporte quel lment en utilisant lattributfacultatif class.Client : Partie utilisateur dune connexion rseau. Lordinateur ou leprogramme 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 toutdocument. Vrifiez toujours les droits dauteurs et contraintesdutilisation avant dutiliser un quelconque clip art.Code : Instructions sous-jacentes destines lordinateur. Le codesource HTML nest pas compil et peut facilement tre consult.Codec : Code sous-jacent qui permet la lecture dun fichier dun formatprcis. Essentiellement employ pour les fichiers son, image et vido. Lamajorit des codecs usuels sont intgrs aux logiciels concerns, mais ilpeut tre loccasion ncessaire de tlcharger un codeccomplmentaire.Colonne : Affichage vertical de donnes dans un tableau.Commentaire : Chane de caractres de type texte non affiche par lenavigateur Web.Compatibilit inter navigateurs : Rendre un site Web compatible avec laplupart, sinon tous les navigateurs Web, en gnral en nutilisant que lesstandards Web.Compteur : Script ou SSI (Server Side Include) comptant et affichant lenombre de touches reues par la page active.Chapitre 13543LE GUIDE COMPLETCompression : Utilisation dun algorithme pour rduire la taille dunfichier par limination des donnes redondantes. Largement employpour les fichiers image.Concepteur : Professionnel du Web qui organise, rdige ou met enuvre un site Web.Contenu : Texte, images et fichiers multimdias placs dans une pageWeb.Contenu (notation du) : Pratique consistant dcrire tout contenupotentiellement agressif ou drangeant dans un lment META ou uncommentaire afin de procurer un contrle parental sur lexprience Webdes enfants.Contextuel (lment) : lment procurant des informations quant lasignification de llment marqu, et non uniquement sur la faon dont ildoit tre affich.Cookie : Petit fichier qui stocke de petits bouts dinformations afindaider les concepteurs de sites les rendre plus interactifs ou pourpermettre une personnalisation du site.Couleurs de document : Couleurs du fond, du texte et des lienshypertextes utiliss dans un document, tels quils sont dfinis dans unlment (souvent BODY) ou dans une feuille de style.Courriel : Courrier lectronique. Message envoy rapidement etsimplement sur Internet, laide du protocole SMTP (Standard MailTransfer Protocol), grce un logiciel de messagerie lectronique.DDfilement : Utilisation des touches de direction du clavier ou des barresde dfilement pour afficher les informations hors cran en raison deslimites imposes par la taille de lcran, mais appartenant au documentcourant.Dfinition (liste de) : Liste HTML possdant deux types de membres : leterme et sa dfinition.Descripteur de mdia : Dans une feuille de style, le type de lagentutilisateur qui va afficher la page Web.544 LE GUIDE COMPLETGlossaireChapitre 13Document Type Declaration (DOCTYPE) : Le DTD est un documentdfinissant la faon dont les lments HTML doivent tre affichs, ainsique les attributs correspondant ces lments.DOM (Document Object Model) : Le Modle Objet de Document est unmoyen de nommer les objets dun document afin de pouvoir les utiliserdans un script.Donne : Information, gnralement transmise ou stocke dans unordinateur.Droit daccs : Permission de lire, dcrire ou dexcuter des fichiers,accorde des individus, des groupes ou des utilisateurs anonymes.Dynamique (HTML) ou DHTML : Rend HTML dynamique et modifiable laide de langages de script et du DOM. Dsormais dconseill.EECMAScript : Tentative de normalisation du langage de script employavec HTML. Correspond un tronc commun entre JavaScript etJScript.Elment : Conteneur HTML qui possde une signification particulirepour un document.Elment (dclaration) : En XML, dclarer un lment et son utilisationdans le DTD.Email : Voir courriel.En ligne : Fait dtre connect Internet. En HTML, caractrisegalement un lment qui sinsre la suite du prcdent et avant lesuivant sans insertion de saut de ligne.En-tte HTTP : Information envoye automatiquement avec undocument Web lors du transfert HTTP. Il peut contenir le nom du fichier,sa date, sa taille, ainsi que toute information mentionne dans deslments META.Enfant (lment) : Tout lment inclus dans un autre lment HTML.Chapitre 13545LE GUIDE COMPLETEntit (dclaration) : En XML, dclarer un objet comme devant treremplac par un fichier 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 unprogramme de PAO ou la publication Internet. En HTML, certainscaractres sont interprts, comme les retour-chariot, les tabulations etles espaces excdentaires.Exposant : Texte flottant au-dessus de la ligne normale de texte.FFAI : Fournisseur daccs Internet. Correspond langlo-saxon ISP(Internet Service Provider).FAQ (Foire aux questions ou Frequently Asked Questions) : Un fichierdaide se prsentant sous la forme dune suite de questions/rponses.Favoris : Ensemble de fichiers utiliss par Internet Explorer pourenregistrer les adresses des sites frquemment visits. Correspond auxsignets Netscape/Firefox.Feuille de style : Fichier ou partie de document Web dcrivant la faondafficher des lments HTML individuels dans un navigateur Web.Firefox : La nouvelle gnration du navigateur Web Mozilla.Formulaire : En HTML, un lment permettant aux utilisateurs de saisirdes donnes traites par la suite via un script ct client ou unprogramme CGI.Frquentation : Le nombre et le type des visites sur un site.Frameset : Jeu dencadrement qui apparat dans un navigateur et permetde visualiser simultanment plusieurs pages Web.FTP (File Transfer Protocol) : Protocole standard pour le transfert defichiers en tous sens sur un rseau.Fonction : En programmation, un fragment de programme renfermantune srie dinstructions, pouvant ensuite tre appel ou utilis plusieurs reprises dans le programme.546 LE GUIDE COMPLETGlossaireChapitre 13GGadget : Objet miniature offrant diverses fonctionnalits. Cest le nomdonn par Google ses widgets.GIF : Format de fichier graphique bien adapt aux images simples.Glisser-dposer : Fait de cliquer sur un objet avec le bouton gauche,puis de dplacer la souris en laissant le bouton enfonc et de dposerensuite lobjet (en relchant le bouton) un autre emplacement delcran.Google : lorigine un simple mais trs performant moteur derecherche, aujourdhui un groupe qui propose de nombreux produits etsolutions 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 lapartie graphique dun programme qui, le plus souvent laide defentres et de botes de dialogue, permet de contrler ce programme. Paropposition aux programmes de type texte, interface ligne decommande, souvent plus difficile apprendre et utiliser.HHeadings : En HTML, les headings (en-ttes) constituent un moyen tantvisuel que structurel dorganiser et de prsenter un document.HEAD : lment dun document qui renferme des informations sur lapage, mais pas de contenu visible.Hit : Terme anglophone qui correspond une visite sur un site.Hbergement Web : Fait davoir recours un serveur Web quiappartient une tierce personne pour rendre un site Web disponible surInternet. Votre hbergeur est gnralement votre FAI.Hte : Nom dun ordinateur ou dun programme sur un domaine,comme le www de www.domain.com ou local2 dans local2.domain.comChapitre 13547LE GUIDE COMPLETHTML (Hypertext Markup Language) : Ensemble des lments identifisqui indique lagent utilisateur comment afficher ces lments et lesinformations dune page Web.HTTP (Hypertext Transfer Protocol) : Protocole employ par lesordinateurs lors du transfert de documents Web (http://).IIcne : Petite image aidant la navigation ou apportant une significationaccrue au texte.ID : Slecteur de feuilles de style devant tre unique lintrieur dunepage Web, et pouvant utiliser nimporte quel style.Image cliquable : Une mme image comportant plusieurs lienshypertextes.Imbriquer : Placer un lment HTML lintrieur dun autre lment.Frquemment utilis pour des lments identiques, tels que listes ettableaux. 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 unchamp de formulaire.Interactivit : Accepter des saisies utilisateur et y rpondre de faondynamique.Internationalisation : Rendre un site accessible dautres langues etcultures. galement nomm localisation.Internet : Rseau international et publiquement disponible dordinateursutilisant des protocoles standard rseau pour communiquer et transfrerdes informations.Internet Explorer : Le navigateur Web Microsoft intgr aux systmesdexploitation Windows.Intranet : Rseau priv interne, souvent plac labri dun pare-feu.548 LE GUIDE COMPLETGlossaireChapitre 13ISP (Internet Service Provider) : Fournisseur daccs Internet (FAI) : lasocit ou lorganisation qui procure laccs Internet un individu ou une socit.JJava : Langage de programmation complet et compatible entre plates-formes 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 fichiers concerns et dautresinformations telles que lheure, la date et ladresse IP de chaque client.JPEG : Format de fichier graphique particulirement adapt aux imagescomplexes (photographies).JScript : Implmentation Microsoft de JavaScript : JScript et JavaScriptne sont pas 100 % compatible entre eux.LLibre (source) : Tout programme technique ou bibliothque dont le codesource est librement disponible sous forme non compile, gnralementafin de permettre le dveloppement par des programmeurs individuels.Lien hypertexte : Mot, expression ou image utilisant une marque HTMLqui en fait un lien cliquable . En cliquant sur un lien hypertexte,lutilisateur voit son navigateur Web ouvrir la ressource correspondantau lien.Lien (vrification de) : Utilisation dun outil Web pour vrifier tous lesliens dune page Web et sassurer quils sont valides.Ligne : Donnes affiches horizontalement dans un tableau.Ligne (lment) : lment nentranant pas de saut de ligne ni de rupturede paragraphe lors de sa fermeture.Localisation : Rendre le site accessible une langue ou une cultureparticulire.Chapitre 13549LE GUIDE COMPLETMMasqu (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 demessagerie.Marge Espace autour de lextrieur dun lment.META : lment HTML procurant des informations complmentairestelles quen-ttes HTTP, date de rafrachissement ou dexpiration defichiers, noms des auteurs, mots-cls et tout autre contenu possible.Mthode (de formulaire) : Faon dont les donnes du formulaire sonttransmises au serveur : GET ou PUT.Modle : Document prconu dans lequel il suffit de remplir lesblancs pour obtenir un document utile et agrable.Module complmentaire : Application tierce installe dans une autreapplication comme programme intgr, tels Shockwave ou AcrobatReader. galement nomm plug-in.Mot de passe : Mot, expression ou chane de caractres secretspermettant de vrifier que vous tes celui que vous dclarez tre.Moteur de recherche : Site Web ou programme dressant le catalogue etindexant les sites Web, puis autorisant les utilisateurs rechercher unsite particulier laide dun mot-cl, dune description ou dautrescritres.Mozilla : Prcurseur de Netscape Navigator, et maintenant unmouvement pour les navigateurs source libre, qui a notamment crFirefox et Thunderbird.Multimdia : Combinaison quelconque de textes, graphismes, fichiersaudio ou vido et pages de ralit virtuelle.NNavigateur Web : Programme informatique utilis par un internaute pourvisualiser une page Web.550 LE GUIDE COMPLETGlossaireChapitre 13Navigation : Outils, visuels ou autre, que procure un site Web pour queles utilisateurs puissent se dplacer sur le site.Netscape Communicator : Ensemble de navigation Web dvelopp etdistribu par Netscape Corporation.name : En HTML, attribut optionnel qui permet normalement nimporte quel lment de figurer dans un script.Nom dutilisateur : Nom qui permet didentifier un compte utilisateur enligne. Une adresse lectronique revt souvent la formenomutilisateur@nomhote.domaine.com.Nom de domaine : Identifiant unique sur Internet permettant laconnexion un ordinateur individuel.Nom rserv : En programmation, un mot qui ne peut tre employcomme variable ou nom de fonction parce quil possde dj unesignification particulire dans le langage de programmation.Non ordonne (liste) : Liste puces.Non proportionnelle (police) : Police de caractres conservant unespacement constant quelle que soit la largeur relle de la lettre : ceciest une police non proportionnelle.Non standard (navigateur Web) : Navigateur Web ne respectant pasHTML 4, ou par extension affichant une page Web dune faonsensiblement diffrente des navigateurs les plus courants, Firefox etMicrosoft Internet Explorer.Note de fin : Note ou commentaire plac la fin dun document.Note de pied de page : Note ou commentaire plac la fin dune pageWeb.OObjet : lment numr dans le Modle Objet de Document (DOM),utilis ou manipul par un script ct client.Objet incorpor : Tout fichier (le plus souvent multimdia) utilisantllment OBJECT pour tre plac dans un document Web.Chapitre 13551LE GUIDE COMPLETOpen source : Voir source libre.Ordonne (liste) : Liste numrote.PPage Web : Page individuelle rdige en HTML.Palette : Ensemble des couleurs disponibles dans tout programmeddition graphique.Pare-feu : Combinaison de matriel et de logiciels place entre deuxrseaux (par exemple, un rseau interne et Internet) afin de limiter lestransactions ce qui est autoris.Parent (lment) : lment renfermant ou contrlant (dans un script) unautre lment.Passage la ligne : Ce qui se passe lorsque lextrmit dun texte atteintla limite droite de lespace de visualisation, dans une fentre ou unezone de saisie.Perl : Langage de programmation non compil aussi simple querpandu, utilis pour les scripts CGI.Pixel : Plus petit lment adressable dun cran.Plate-forme : Combinaison de larchitecture (matriel) et du systmedexploitation (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 aucoin suprieur gauche de lcran (positionnement absolu) ou par rapport dautres objets (positionnement relatif).Prfrences : Dans un navigateur Web, le menu utilis pour dfinir lescouleurs de police, la page de dmarrage, les identits de messagerie etde groupes de discussion, les dispositifs de scurit et autres options.552 LE GUIDE COMPLETGlossaireChapitre 13Prsentation : Positionnement visuel des paragraphes de texte, dimageset dautres lments dun document.Propritaire : Technique ou programme au dveloppement trs ferm.Une licence doit tre acquise par tout utilisateur potentiel dune telletechnique propritaire. Ces techniques ne sont valides par aucun comitde standardisation.Proxy (serveur) : Serveur effectuant la connexion votre place, puisrenvoyant le rsultat. Souvent utilis dans des coupe-feu et pourprocurer des services de cache de grands rseaux.RRemplissage : Espace entre la bordure dun lment (sil en possdeune) et le contenu de llment (texte, image ou fichier incorpor).Rseau : Ensemble dordinateurs relis laide de protocoles rseauidentiques, tels que TCP/IP (pour Internet).Rsolution : Nombre de pixels, exprim en largeur x hauteur, pouvanttre affichs par un cran.RGB (valeurs) : Valeurs respectives de rouge, vert et bleu dfinissant unecouleur en HTML.SSans serif (police) : Polices comme Arial et Helvetica, dpourvuesde serifs, les petites lignes en bas des bras et des jambes des lettres (lepied dun l , par exemple).Script : Petit programme pouvant effectuer un nombre illimitdinstructions.Scripting : Application dun script un lment HTML dans un scriptct client tel que JavaScript.Scuris (serveur) : Serveur Web utilisant SSL (Secure Socket Layer) ouune autre mthode de codage pour protger tous les changes dedonnes entre lui et ses clients.Chapitre 13553LE GUIDE COMPLETScurit (zones de) : Dans Microsoft Internet Explorer, une zone descurit 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 depetites 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 etgnralement maintenu par un individu ou un groupe.Surveiller : Conserver une veille constante sur la disponibilit, le tempsde rponse et le trafic dun site Web.Serveur : Dans une transaction rseau, le serveur gre de nombreusesconnexions manant de nombreux ordinateurs diffrents, pour transfrerles informations dun endroit un autre.SGML (Standard Generalized Markup Language) : Mthode de descriptionde langages balises devant procurer une information visuelle,structurale et syntaxique du contenu dun document. Ne sapplique pasforcment au Web, ni mme un document lectronique.Signet : Avec Netscape et Firefox, un site frquemment visit dont vousenregistrez lURL dans un fichier sur votre disque. Lquivalent dunFavori Internet Explorer.Signet interne : En HTML, un lien hypertexte menant vers unedestination interne la page.Sortie (output) : Donnes ou rsultat renvoy aprs quun utilisateur ademand une information un serveur Web. Se rfre gnralement une requte.Source : Voir code.Spcifique navigateur : lment et/ou fonctionnalit ne fonctionnantque sur une famille de navigateurs et nappartenant pas aux standardsInternet.Spam : Pourriel. Message lectronique non sollicit, en gnral denature commerciale, envoy des gens nayant rien demand et nesouhaitant pas les recevoir.554 LE GUIDE COMPLETGlossaireChapitre 13Spcification : Description de la mise en uvre dune technique. Laspcification HTML dcrit la mise en uvre prconise de HTML dansun navigateur Web afin que les auteurs Web puissent sen servirefficacement.SSI (Server-Side Includes) : Mthode ct serveur qui permet linclusionde donnes, fichiers et informations dans une page Web avant leuraffichage dans le navigateur Web.SSL (Secure Sockets Layer) : Standard de scurit pour lescommunications 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 auxautres programmes.Style (proprit) : Caractristique individuelle dun lment HTMLmodifi ou dfini laide dune feuille de style externe ou interne, ou delattribut style.Style (slecteur) : Attribut HTML (ID ou class) appliquant desproprits de style llment contenant lattribut sans changerllment.Submit (bouton) : Champ de formulaire envoyant les donnes duformulaire vers un script.Syntaxe : Faon particulire de rdiger le code source afin quil soitcomprhensible par un ordinateur.TTableau : Quadrillage permettant dafficher des donnes plusefficacement en lignes et en colonnes. galement utilis dans un simplebut de prsentation.TCP/IP (Transmission Control Protocol/Internet Protocol) : Utilissconjointement, ils constituent la forme primaire de transmission dedonnes sur Internet. IP dfinit le format des paquets de donnesenvoys tandis que TCP gre le rassemblement des paquets larrive etla rcupration des donnes perdues.Chapitre 13555LE GUIDE COMPLETTlchargement (download) : Transfert des donnes depuis unordinateur distant sur votre propre ordinateur.Tlchargement (upload) : Transfert de donnes ou de fichiers de votreordinateur local vers un ordinateur distant.Texte (diteur de type) : diteur demandant la saisie manuelle de tousles codes HTML.Texte seul (navigateur) : Navigateur Web qui naffiche que du texte : pasdimage, de contenu multimdia ni mme souvent de tableaux.Thunderbird : Le nouveau logiciel de messagerie open source deMozilla.Touche (hit) : Accs vers une page Web. Correspond en gnral unaccs vers la page elle-mme, pas vers les images quelle contient.Trafic : Portion de bande passante utilise par le rseau un momentprcis. Un trafic important sur votre serveur signifie de nombreusestouches, mais galement des connexions ralenties.TWAIN (compatible) : Scanner, camra, appareil photo ou tout autredispositif dentre compatible avec le standard TWAIN.UUnicode : Le systme de codification de caractres permettant lemploilectronique de toutes les langues mondiales.URI (Uniform Resource Identifier) : Connu auparavant sous le nomdURL, cest lemplacement dun document ou dun fichier sur Internet.URL (Uniform Resource Locator) : Adresse didentification duneressource Internet (le plus souvent une page Web).Url (codification) : Mthode de codification de caractres spciaux tellesles barres obliques (slashes) dans une adresse URL afin quun serveur,ou un autre programme, puisse les comprendre.Utilisateur : Individu accdant un site Web ou utilisant un programme.556 LE GUIDE COMPLETGlossaireChapitre 13Uuencode : Connu initialement sous le nom de UNIX-to-UNIX Copy,cest une faon de transformer un fichier binaire en texte dans le but dele transfrer laide dun programme texte seul, tel un client demessagerie lectronique.VValeur : Dans un lment HTML, les attributs possdent le plus souventune valeur qui modifie le comportement de llment.Validation : Excuter un programme pour sassurer que le code HTMLutilis dans une page Web correspond bien au standard HTML 4 duW3C.Valide : Terme appliqu un document qui respecte scrupuleusement laDTD laquelle il fait rfrence (XML principalement).Variable : Dans un programme ou un script, un emplacement nomm odes donnes peuvent tre stockes et rcupres selon les besoins desprogrammes.VBScript : Un langage de script conu par Microsoft similaire par sasyntaxe Visual Basic.Vignette : Image rduite en taille, qui acclre le tlchargement. Utilispour les catalogues dimages et les aperus. galement nomme miniature .WW3C (World Wide Web Consortium) : le groupe de travail sur lesstandards lorigine des recommandations Web tels HTML, CSS etXML.WebTV : Technique en dveloppement permettant aux utilisateurs desurfer sur Internet laide dune tlvision plutt que dun ordinateur.Widget : Contraction de windows gadget correspondant un dispositifgraphique affich lcran. Ce terme est dsormais rserv un objetminiature, gnralement programm en JavaScript, qui accomplit desfonctions particulires.Chapitre 13557LE GUIDE COMPLETWorld Wide Web ou WWW : Ensemble des ressources Web prsentes surInternet.WYSIWYG (What You See Is What You Get) : Tel cran, tel crit : diteurdans lequel vous ditez un document tout en pouvant lexaminer souslaspect exact quil aurait sous un navigateur.XXML (eXtensible Markup Language) : Sur-ensemble de HTML autorisantlapplication de diffrentes dfinitions de types de document (DTD) une page Web.XSL : Feuilles de style en XML.558 LE GUIDE COMPLETGlossaireChapitre 13Index!!DOCTYPE ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471st Page 2000 .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31AA Smaller Gif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208A, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59, 492Abbr, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441ABBR, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151, 492Accept, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341Accept-charset, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340Accessibilit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438Accesskey, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366ACRONYM, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151, 492Action, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340ADDRESS, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147, 492Adobe Acrobat Reader . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455Adobe Golive .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29Agent utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42AJAX (Asynchronous Javascript And XML) .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412Align, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66, 94, 102Alignercellule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102paragraphe de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67tableau .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94Alink, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177Alt, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196, 440Amaya .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32, 82Animated Shop 3 .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208Appareil photo numrique .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235Applet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424, 492APPLET, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155, 426AREA, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210, 492Attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23abbr . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441accept . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341accept-charset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340accesskey .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366action .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340align .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66, 94alt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196, 440axis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452bgcolor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184560 LE GUIDE COMPLETIndexChapitre 14char . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132charoff . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132charset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140codebase .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166, 177cols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226de llment IMG ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224de llment OBJECT ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233, 426de llment FRAME ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258dir . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461, 464disabled .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368enctype .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340, 374face .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166frameborder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258headers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194href . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213, 305HTTP-EQUIV ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419id .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62, 140, 269, 287ismap .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222lang .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140, 145, 457link, vlink et alink .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177longdesc .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259marginwidth et marginheight . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258media .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291, 305method .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340, 370name .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50, 62, 257, 340nohref . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220noresize .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258readonly .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369rel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304rows .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247scope .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441scrolling .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258shape .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214size .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165span .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124src . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148, 281summary .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93, 128, 439tabindex .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363target . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177Index Chapitre 14561LE GUIDE COMPLETtitle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196, 304type .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74, 76, 226, 287, 305, 343, 386usemap .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231width .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104, 124, 194Axis, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452BB, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164, 493Background, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187Balise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22BASE, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264, 493BASEFONT, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165, 493BDO, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463, 493Bgcolor, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184BIG, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164, 493Bloc-notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34BLOCKQUOTE, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143, 493BODY, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53, 493Border, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95BR, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65, 493BUTTON, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350, 494CCalculatrice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182CAPTION, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93, 494Caractreencodage de .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157langues et jeux de .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465non affichable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163spciaux .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154, 159Casse, sensibilit la . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24Cellpadding, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99Cellspacing, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99CENTER ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 494CGI (Common Gateway Interface) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415Char, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132Charoff, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132Charset, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465Citationcrer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143imbriquer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145Cite, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143562 LE GUIDE COMPLETIndexChapitre 14CITE, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143, 155, 494Class, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140CNIL (Commission Nationale Informatique et Libert) . . . . . . . . . . . . . . . . . . . . . . . . . . . 375Code sourceafficher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52CODE, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152, 494Codebase, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226COL, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122, 494COLGROUP, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122, 494Color, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166, 177Cols, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247Colspan, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107CommentaireHTML ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390SGML ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389VBScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390Composer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33CompteGoogle Analytics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478Content, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50Cookie .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416Corell Draw ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180Couleurajouter une page Web .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177modifier dans un lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183modifier dans un tableau .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184modifier le schma de .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178modifier pour une cellule de tableau .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184noms et valeurs RGB ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177prcautions prendre .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184Crerbloc de texte comme pr-formatt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141citation .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143commentaire HTML ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177GIF anim .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199image .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190image cliquable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214image darrire-plan .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187jeu dencadrement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245lien hypertexte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59ligne horizontale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136liste puce .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75liste de dfinitions .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76liste ordonne .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73Index Chapitre 14563LE GUIDE COMPLETlistes imbriques .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79notation mathmatique .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169page daccueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47paragraphe de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57saut de ligne .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65tableau .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89tableau cellules fusionnes .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107titre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54CSS (Cascading Style Sheet) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18, 280proprits de botes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311proprits de texte et de police .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310slecteur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282CutePage (voir SoThink) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36DData, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226DD, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76, 495DEL ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495DFN, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155, 495DHTML (Dynamic HyperText Markup Language) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19DIR .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495Dir, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461, 464Disabled, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368DIV, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140, 288, 495DL, lement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76, 495DOCTYPE, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245DOM (Document Object Model) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395DOM2 (Document Object Model level 2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20Donne (partager entre des cadres) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269Dpi (dots per inch) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29DT, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76, 495DTD (Document Type Definition) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16EECMAScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19, 412Editeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281st Page .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31Adobe Golive .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29Amaya .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32Composer Mozilla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33Dreamweaver MX 2004 .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29564 LE GUIDE COMPLETIndexChapitre 14FrontPage Express . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33FrontPage) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29HotDog .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30Namo WebEditor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30NotePad .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34Nvu .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35SoThink .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36Web Fast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31WebExpert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30Word .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31WYSIWYG (What You See Is What You Get) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28Elment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22A ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59ABBR ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151ACRONYM ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151ADDRESS ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147APPLET ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155, 426AREA ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210B .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164BASE ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264BASEFONT ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165BDO ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463BIG ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164BLOCKQUOTE ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143BODY ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53BR ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65BUTTON ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350CITE .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143, 155CODE ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152de type bloc .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23de type ligne .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23DFN ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155DIV ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140, 288DL ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76DOCTYPE ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47, 245EM ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149EMBED ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430FIELDSET et LEGEND ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360FONT ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165, 183FORM ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339FRAME ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248FRAMESET ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245HEAD ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49Hn .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54HR ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136HTML ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48Index Chapitre 14565LE GUIDE COMPLETI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164IFRAME ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271IMG ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155, 191INPUT ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343ISINDEX ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350KBD ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152LABEL ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357LINK ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303MAP ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210META ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50, 157, 280, 305, 386NOFRAMES ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246, 270, 453NOSCRIPT .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388OBJECT ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155, 224, 269, 426, 455OL ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73P .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57PARAM ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429parent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23PRE ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141Q ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143S .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164SCRIPT .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383SELECT ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352SMALL ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164SMP ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152SPAN ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140, 288STRIKE ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164STRONG ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24STYLE ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282SUB ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167SUP ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167TABLE ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90TD ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90TEXTAREA ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356TITLE ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49TR ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90TT .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164U ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164UL ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75VAR ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155EM, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149, 495EMBED, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430Encodage de caractres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157Enctype, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340, 374Entits de caractres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160Evnements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390566 LE GUIDE COMPLETIndexChapitre 14FFace, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166Feuille de stylesalternative .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304auditive .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328en cascade .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323externe, crer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294hritage .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323interne, crer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282principales proprits CSS .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309proprits de botes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311FIELDSET, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360, 495Filezilla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475Firefox .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39FONT, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165, 183, 495For, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358FORM, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339, 495Format HTML ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49Formulaireajout dune structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360bouton daction .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348bouton doption .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346bouton de soumission graphique .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347bouton de soumission ou de rinitialisation .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346boutons .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350case cocher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345commande cache .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348commandes en lecture seule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369commandes inactives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368et focus .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362menu .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352saisie de mot de passe .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344saisie de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343soumettre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370touches daccs rapide .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366traitement des donnes .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373traiter laide dun script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415zone de texte de saisie multilignes .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356Frame (voir Jeu dencadrement) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244Frame, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95FRAME, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248, 496Frameborder, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258Frameset (voir Jeu dencadrement) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244FRAMESET, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245, 496Frquentation, suivre la . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478Index Chapitre 14567LE GUIDE COMPLETFrontPage .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29FrontPage Express . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33FTP (File Transfer Protocole) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474GGet, mthode HTTP ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371Gif gIf giF .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208Google Analytics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478compte .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478HHEAD, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49, 496Headers, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441Height, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194Hritagedes attributs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130feuille de styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323Hn, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54, 496HotDog .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30HR, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136, 496Href, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213, 305HTML ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496commentaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137dfinition .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12diteur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48lments structuraux de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155vnements intrinsques .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49HTTP (HyperText Transfer Communication Protocol) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60HTTP-EQUIV, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419II, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164, 496Id, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62, 140, 269, 287IETF (Internet Engineering Task Force) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12IFRAME, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271, 497Imageanime .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198darrire-plan, inclure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187568 LE GUIDE COMPLETIndexChapitre 14insrer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190rduire la taille des fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237rduire la taille physique .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234IMG, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155, 191, 497Index.html .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247INPUT, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343, 497INS .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 498Instruction!DOCTYPE ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47document.write . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384Internationalisation .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 456Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39ISINDEX, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350, 498Ismap, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222JJava (diffrences avec Java script) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397compatibilit avec les navigateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407diffrences avec Java .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425proprits de document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406Jeu dencadrement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244accessibilit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453cadre cible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261cible par dfaut des liens .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264conflits de noms .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263contenu de remplacement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270imbriquer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265noms rservs .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262partage de donnes .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269JVM (Java Virtual Machine) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455KKBD, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152, 498LLABEL, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357, 498Lang, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140, 145, 457valeurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459LEGEND, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360, 498Lgende de tableau .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93Index Chapitre 14569LE GUIDE COMPLETLI, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73, 498Lien hypertexte, crer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59Link, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177LINK, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303, 498Liste puce, crer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75de dfinitions, crer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76imbrique, crer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79ordonne, crer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73Listingaccueil.html v. 2.7.1 .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252audit.css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333barrenav.html 2.7.1 .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251citations imbriques .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146date2.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402lment CODE ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151, 153lment MAP restitu .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230lments ABBR et ACRONYM ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151lments OBJECT et EMBED ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430exemple MathML ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172extrait de la section HEAD de la page daccueil de MicroApplication .. . . . . . . 53extrait du code du fichier listesimbriques2.html .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87famille.html (version 1.4.1) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92fonction Get_Cookie .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420index.html v.2.7.1 .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250index.html v.2.7.2 .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256listes imbriques .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80notations scientifiques en texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169pageacc1_0.html. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57pageacc1_3_2.html .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64pageacc1_3_3.html .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68Pageacc_v1_3_3.html .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46position.html .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318position0.html .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316region.html version 1.4.2 .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110region.html version 3.8.1 .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298region_erreurs.html .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120romeo.html .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329styleaudit.css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329styleaudit2.css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332STYLEDIVSPAN.html .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289tailles de police .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166visuel.css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333Localisation .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 456Longdesc, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259Lynx .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41570 LE GUIDE COMPLETIndexChapitre 14MMAP, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210, 499Marginheight, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258Marginwidth, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258Masquer (les donnes de script aux agents utilisateurs) . . . . . . . . . . . . . . . . . . . . . . . . . . . 389Mathmatiques, afficher en HTML ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169MathML ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171Media, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291, 305@media, rgle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305, 332MENU ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 499META, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50, 157, 280, 305, 386, 499Method, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340Microsoft Gif Animator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204Modle MVC (Model-View-Controller) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279Modifierapparence du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164couleur dune cellule de tableau .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184couleur du texte dans un lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183couleurs dun tableau .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184marges dun paragraphe .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148police .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165schma de couleurs de la page .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178site pour ladapter plusieurs langues .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 456styles affichs par le navigateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325Module complmentaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227, 454Mosaic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12Mozilla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39Multiple, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353MVC (Model-View-Controller), modle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279NName, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50, 62, 257, 340Namo WebEditor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30Navigateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39activer ou dsactiver les scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384afficher le code source .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52compatibilit JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39Lynx .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41modifier les styles affichs .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325Mosaic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12Mozilla/Firefox .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39Opera .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39Index Chapitre 14571LE GUIDE COMPLETSafari . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39Navigator, objet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410NOFRAMES, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246, 270, 453, 499Nohref, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220Noresize, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258NOSCRIPT, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388, 499NotePad (voir Bloc-notes) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34Numro de version .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63Nvu .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35OOBJECT, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155, 224, 269, 426, 455, 499Objet navigator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410OL, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73, 499Opera .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39OPTGROUP, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354, 500OPTION, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353, 500PP, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57, 500Page daccueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47Paint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180Paint Shop Pro .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180, 239Paragraphealigner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67crer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57modifier les marges .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148PARAM, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429, 500PhotoShop .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180Plug-ins (voir Module complmentaire) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156Popup (voir Fentre surgissante) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404Post, mthode HTTP ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371PRE, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141, 500Prcaution avec les couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184Proprits CSS .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310PwWebSpeack .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467PwWebspeak .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453QQ, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143, 500572 LE GUIDE COMPLETIndexChapitre 14RReadonly, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369Rfrence de caractre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154entit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160numrique .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159Rgle @media .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305, 332Rel, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304Rsolution .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236Rows, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247Rowspan, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107Rules, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95SS, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164, 500Safari . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39SAMP ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500Saut de ligne, crer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65Scope, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441SCRIPT .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500 action unique .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381activer ou dsactiver dans le navigateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384CGI (Common Gateway Interface) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415cookie .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416ct client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380ct serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380ECMAScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412vnements intrinsques HTML ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397masquer les donnes aux agents utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389rptitif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382traitement de formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415VBScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413SCRIPT, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383, 500Scrolling, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258SELECT, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352, 500Slecteur CSS .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282Sensibilit la casseHTML ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24XHTML ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24SGML (Standard Generalized Markup Language) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12Shape, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214Shockwave .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455Index Chapitre 14573LE GUIDE COMPLETSite Webhbergement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473publier sur le Web .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472suivre la frquentation .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466Size, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165SMALL, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164, 501SmartSaver 3.0 .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239SMP, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152SoThink HTML Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36Span, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124SPAN, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140, 288, 501Src, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191, 257Start, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74STRIKE, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164, 501STRONG, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149, 501Style, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148, 281STYLE, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282, 501masquer le contenu .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292SUB, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167, 501Summary, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93, 128, 439SUP, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167, 501TTabindex, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363TABLE, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90, 501Tableauaccessibilit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441aligner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94aligner une cellule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102attributs de bordure et de rgles de llment TABLE ... . . . . . . . . . . . . . . . . . . . . . . . . 96bordures et rgles, attributs border, frame et rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95calcul du nombre de colonnes .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129cellules manquantes et cellules se recoupant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117colonne, lment TD ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90crer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89en-tte de colonne .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93fixer la largeur des colonnes .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104fusionner des cellules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107hritage des attributs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130imbriquer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127lgende de tableau, lment CAPTION ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93ligne, lment TR ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90mise en forme, attributs char et charoff . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132574 LE GUIDE COMPLETIndexChapitre 14modifier la couleur dune cellule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184modifier le schma de couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184regrouper des colonnes .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122regrouper des lignes .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121taille et structure des cellules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98Tabulation (ordre de) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363Target, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261TBODY, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121, 501TD, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90, 502Test du site Web .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466Text, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177TEXTAREA, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356, 502Textelments structuraux .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155modifier lapparence .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164modifier la couleur du texte dans un lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183structurer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149TFOOT, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121, 502TH, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93, 503The Gimp .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180, 216THEAD, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121, 503Tim Berners-Lee .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12Title, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196, 304TITLE, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49, 503Titre, crer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54TR, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90, 503TT, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164, 503Type, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74, 76, 226, 287, 305, 343, 386UU, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164, 503UL ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 504Ulead Gif Animator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204UNICODE ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461Urchin.js, bibliothque JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479UrchinTracker(), fonction JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479URI (Universal Resource Identifier) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59URL (Universal Resource Locator) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59Usemap, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231Index Chapitre 14575LE GUIDE COMPLETVValign, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102Value, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74VAR, lment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155, 504VBScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413Version, numro de .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63Vlink, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177WW3C (World Wide Web Consortium) .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12Web Fast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31WebExpert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30WebFTP .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474Width, attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104, 124, 194Word .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31WS_FTP95 LE ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476XXHTML (eXtensible HyperText Markup Language) . . . . . . . . . . . . . . . . . . . . . . . . . . . 16, 21XML (eXtensible Markup Language) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17Compos en France par Jouve11, bd de Sbastopol - 75001 ParisIndexChapitre 14