extrait html 5

5/23/2018 Extrait HTML 5

1/20

R o d o l p h e R i m e l

Prface de Raphal Goetter

HTML 5Une rfrence pourle dveloppeur webHTML 5 CSS 3 JavaScript DOM W3C & WhatWG

Drag & drop Audio/vido Canvas Golocalisation Hors ligne

Web Sockets Web Storage API File Microformats


2/20

Rodolphe Rimel

Ingnieur spcialis dansles rseaux et applications,Rodolphe Rimelest avecRaphal Goetterle cofondateurdAlsacrations.com.Il combine de nombreux

talents en alliant uneexpertise des diffrentslangages du Web(HTML et CSS, JavaScript)et des comptencesen programmation(PHP, MySQL, jQuery,Perl, C), en administrationde systmes et serveurs(Linux) mais aussien graphisme (Flash,Photoshop, Illustrator,Inkscape). Il est lauteurdu mmento MySQL 5aux ditions Eyrolles,dun DVD de formation sur

jQuery, et a crit le lecteurFlash Dewplayer.

HTML 5 intgre enfin dans sa conception larchitecture trois piliers quest HTML pour la structure,CSS 3 pour lapparence et JavaScript pour linteractivit. Le dveloppeur web pourra ainsi consoliderson savoir-faire sur une base normalise, et proposer au sein de sites performants et accessibles descontenus tant multimdias (animations, audio et vido) quinteractifs (formulaires, glisser-dposer, etc.).

Concevoir des sites riches, performants et accessibles avec HTML 5

Ce livre fait la lumire sur les spcifications ardues de HTML 5 dont il explore lensemble des nouveauts. Non sansavoir rappel son histoire mouvemente au W3C et au WhatWG, lauteur explique au fil des chapitres commentconcevoir des sites et applications web performants et accessibles, et y incorporer des lments mdias (audio,vido), crer des zones de dessin int ractives et des animations avec Canvas, exploiter les microformats pour unbalisage smantique.

Il dtaille pas pas les interfaces de programmation pour la gestion des fichiers, la golocalisation, la prise encharge du glisser-dposer (drag&drop), et explique comment stocker des donnes locales, communiquer en tempsrel ou procder des changes interdocuments grce aux API avances Web Storage, Web Sockets et WebMessaging. Il aborde enfin les Web Workers, permettant dexcuter du JavaScript en multithread, et les bases de

donnes (Indexed DatabaseetWeb SQL Database)ainsi quun cache dapplication pour une excution hors-ligne.Trs illustr, riche en conseils et bonnes pratiques, louvrage se complte dune rfrence sur JavaScript et sur lagestion du DOM. Des annexes disponibles en ligne offrent un rappel sur les CSS et un chapitre exhaustif sur ARIAet laccessibilit.

Au sommaireHTML 5 et les standards du WebSyntaxe Outils Encodage Bonnes pratiques Prise en charge par les navigateurs lments et attributs HTML 5Doctype Mta informations Liens Listes Contenu externe Tableaux Scripting

Attributs globaux Formulaires (Web Forms) Microformats (Microdata) Audio et vido Graphismes avecCanvasSVG API HTML 5Golocalisation Gestion de fichiers avec lAPI File Glisser-dposer (drag & drop)changes interdocuments (Web Messages)vnements envoys par le serveur (Server Sent Events)JavaScripten multitche (Web Workers)Stockage local (Web Storage)Communication temps-rel (Web sockets)Bases dedonnes Applications hors ligne DOM et Selectors Annexes en lignesFeuilles de styles CSSAccessibilit et Aria.

@

Complments en ligne

Tlchargez sur le site des ditions Eyrolles et sur le site de lauteur les annexes

sur les feuilles de style CSS et laccessibilit (ARIA). Retrouvez-y les tableaux de prise en charge par navigateur mis jour. Code diteur : G12982

ISBN : 978-2-212-12982-3

Conception:NordCompo

qui sadresse cet ouvrage ?

Aux dveloppeurs web, intgrateurs qui souhaitent mettre en uvre les nouvelles API de HTML 5et moderniser leurs bonnes pratiques de dveloppement web ; Aux designers web qui souhaitent dcouvrir toutes les possibilits que leur offre HTML 5 ; tous ceux qui souhaitent acqurir une mthodologie cohrente de dveloppement web, combinant qualit etaccessibilit.

HTML 5Une rfrence pour le dveloppeur web

e


3/20

HTML 5Une rfrencepour le dveloppeur web


4/20

Ouvrages sur le dveloppement web

I. CANIVET. Bien rdiger pour le Web. Stratgie de contenu pouramliorer son rfrencement.

N12883, 2edition, 2011, 540 pages.

A. BOUCHER. Ergonomie web.Pour des sites web efficaces.N13215, 3edition, paratre 2011, 380 pages.

R. GOETTER. CSS avances.Vers HTML5 et CSS3.N12826, 2011, 400 pages.

R. GOETTER. CSS 2 : pratique du design web.

N12461, 3edition, 2009, 340 pages.R. GOETTER. Mmento CSS.

N12542, 2edition, 2009, 14 pages.

R. GOETTER. Mmento XHTML.N12541, 2edition, 2009, 14 pages.

D. CEDERHOLM. CSS 3 pour les Web designers.N12987, 2011, 132 pages (A Book Apart).

J. KEITH, prface de J. ZELDMAN. HTML 5 pour les Web Designers.

N12861, 2010, 90 pages (A Book Apart).

F. DAOUSTetD. HAZAL-MASSIEUX. Relever le dfi du Web mobile.Bonnes pratiques de conception et de dveloppement.

N12828, 2011, 300 pages.

J. CHABLE, D. GUIGNARD, E. ROBLESetN. SOREL. Programmation Android.

N12587, 2010, 486 pages.

E. SARRION. XHTML/CSS et JavaScript pour le Web mobile.

Dveloppement iPhone et Android avec et iUI et XUI.N12775, 2010, 274 pages.

J. STARK. Applications iPhone avec HTML, CSS et JavaScript.Conversion en natifs avec PhoneGap.

N12745, 2010, 190 pages.

P. CHATELIER. Objective-C pour le dveloppeur avanc.Le langage iPhone/iPad et Mac OS X pour les dveloppeurs

C++/Java/C#.

N12751, 2010, 240pages.

E. DASPETetC. PIERREDEGEYER. PHP 5 avanc.N12369, 5edition, 2008, 804 pages (Collection Blanche).

P. BORGHINO, O. DASINI, A. GADAL. Audit et optimisation MySQL 5.N12634, 2010, 282 pages

R. RIMEL. Mmento MySQL.N12720, 2edition 2010, 14 pages.

C. PORTENEUVE. Bien dvelopper pour le Web 2.0.Bonnes pratiques Ajax.N12391, 2edition, 2008, 674 pages.

J.-M. DEFRANCE. Premires applications Web avec Ajax, jQuery et PHP.N12672, 2010, 474 pages.

A. VANNIEUWENHUYZE. Programmation Flex 4.N12725, 2edition, 2010, 604 pages.

G. SWINNEN. Apprendre programmer avec Python 3.N12708, 2edition, 2010, 410 pages.

Autres ouvrages

X. TANNIER. Se protger sur Internet. Conseils pour la vie en ligne.N12774, 2010, 232 pages.

A. BOUCHER. Ergonomie web illustre.60 sites la loupe.N12695, 2010, 302 pages (Design & Interface).

A. BOUCHER. Mmento Ergonomie web.N12698, 2edition, 2010, 14 pages.

E. SLOM. Mmento Sites web.Les bonnes pratiques.N12802, 3edition, 2010, 18 pages.

M.-V. BLOND, O. MARCELLINetM. ZERBIB. Lisibilit des sites web.Des choix typographiques au design dinformation.N12426, 2009, 326 pages.

W. LIDWELL, K. HOLDENetJ. BUTLER. Principes universels du design.N12862, 2011, 272 pages.

O. ANDRIEU. Russir son rfrencement web.N12868, 3edition, 2011, 462 pages.

T. PARISOT. Russir son blog professionnel.Image, communication et influence la porte de tous.N12768, 2edition, 2010, 322 pages.

F.-X. etL. BOIS. WordPress 3 pour le blogueur efficace.N12829, 2011, 358 pages.

M. BLANCHARD. Magento.Russir son site e-commerce.N12515, 2010, 352 pages.

Y. BRAULT, prface dE.PLENEL. Concevoir et dployer ses sitesweb avec Drupal 6 et 7.

N12780, 2edition, 2010, 420 pages.

V. ISAKSENetT. TARDIF. Joomla et Virtuemart.Russir sa boutique en ligne.

N12487, 2edition, 2009, 336 pages.

N. CHU. Russir un projet de site web.N12742, 6edition, 2010, 256 pages.

V. MESSAGERROTA. Gestion de projet agile.Avec Scrum, Lean, eXtreme Programming...

N12750, 3edition, 2010, 272 pages.

CHEZLEMMEDITEUR


5/20

HTML 5Une rfrence

pour le dveloppeur web

R o d o l p h e R i m e l

Prface de Raphal Goetter


6/20

DITIONS EYROLLES61, bd Saint-Germain75240 Paris Cedex 05

www.editions-eyrolles.com

En application de la loi du 11 mars 1957, il est interdit de reproduire intgralement ou partiellement leprsent ouvrage, sur quelque support que ce soit, sans autorisation de lditeur ou du Centre Franais dExploitationdu Droit de Copie, 20, rue des Grands-Augustins, 75006 Paris. Groupe Eyrolles, 2011, ISBN : 978-2-212-12982-3


7/20

Nous connaissons tous HTML plus ou moins intimement. Lorsque nous naviguons surInternet ou que nous crivons nos pages web, il reste fidle nos cts, malgr les pri-pties et dboires quil a subis. Cest quil en a connu des aventures ! Les derniers arrivs

tels que Adobe Flash ou Microsoft Silverlight pensaient lavoir enterr, en vain... On leretrouvait parfois sous les doux sobriquets de DHTML ou de Web 2.0 . Cr lorigine pour tisser des liens et vhiculer du contenu de manire universelle, il se voyaitdnatur dans ses fonctions primaires, comme lont montr ses tableaux de mise enpage, aujourdhui diaboliss. dire vrai et en y regardant de prs, HTML a toujours tl, endossant loyalement son rle dossature indispensable du Web.

ses dbuts, sa mission se limitait structurer des contenus basiques, essentielle-

ment textuels et scientifiques, ordonns de faon rigoureusement linaire et assez peuexcitante, il faut lavouer. Puis, au fur et mesure de lvolution des usages des inter-nautes, HTML se diversifie, se renforce et sadapte. Parfois avec un peu de retard surles besoins, et malgr les batailles que se livrent les navigateurs.

La quatrime mouture de HTML, finalise en 1998 la prhistoire du Web, peut-on dire , parat bien dsute aujourdhui, treize annes plus tard. Il sagit pourtantde la plus rcente version finalise ayant reu ladoubement officiel du W3C. Ce

gigantesque retard accumul durant ces dix dernires annes tend enfin se combler,petit petit, grce au dveloppement et limplantation de la version 5 du langage,tant attendue. Aux bons et loyaux services de HTML 4, se substituent de riches uni-

vers adapts aux besoins et usages dun Web moderne, vari, rapide et mobile.

Nouvelles balises, nouvelles technologies, formulaires avancs, outils multimdias,adaptation aux supports nomades et applications performantes : autant de nouveauxmondes offerts par ce nouvel opus en voie dadoption. Mme si HTML 5, sorte de

nouveau Web 2.0 , est cens annoncer le Web de lavenir, dans la pratique, sesfonctionnalits rpondent tout simplement aux attentes des internautes. Lusager

Prface


8/20

HTML 5- Une rfrence pour le dveloppement web

Groupe Eyrolles, 2005VI

peut enfin profiter de la lecture audio ou vido sans plug-in additionnel, trouver un

htel ou un emploi proches grce la golocalisation (qui pose certes quelques ques-tions de privaut), bnficier de support hors-ligne lorsque sa connexion estdfaillante ou quil se dplace, profiter de fonctions de glisser-dposer, de stockageintelligent ou des web-workers, ces travailleurs de lombre qui permettent dacclrerles performances en paralllisant le traitement des ressources.

Pensez que la version prcdente tait finalise depuis plus de dix ans ! La patiencede nous autres concepteurs web avait atteint ses limites ; elle se voit enfin rcom-

pense. De grands sites tels que Google, Yahoo!, Twitter, Myspace, Kelkoo, Youtubeou encore Dailymotion intgrent dores et dj une multitude dapplications stablesde HTML 5, mais les grands bnficiaires en sont bien sr les sites web pour pri-phriques mobiles qui peuvent dj exploiter nativement des fonctionnalits tellesque ladaptation automatique des designs aux diffrentes tailles dcran.

HTML a bien mri. La version 5 sannonce comme une ressource exaltante quiexploitera vritablement les possibilits technologiques contemporaines. Cela inclut

la puissance des connexions internet, les priphriques mobiles (smartphones ettablettes) ainsi que le multimdia. Il tait temps. Et il est lheure prsent de rvolu-tionner nos habitudes dinternautes et de concepteurs de sites web.

Cette rvolution nest dailleurs pas sans rappeler celle opre dans mon domaine deprdilection, celui des feuilles de styles CSS, autre univers en refonte depuis la ver-sion CSS 3. En tant que designer web et pour avoir rdig quelques ouvrages sur lesfeuilles de style CSS, je peux comprendre et partager lenthousiasme de Rodolphe

ainsi que celui de la communaut de dveloppeurs en pleine bullition.Si la symbiose entre HTML et CSS semblait parfaite sur le papier lun sattachant structurer linformation (balises, smantique), lautre lui donner forme (esth-tique, positionnements) je ne vous apprendrai pas que les deux ont longtemps tmal imbriqus : lon ctoyait frquemment les styles de mise en forme au cur deslments et balises HTML, bien que ce ne ft pas leur place attitre et que cela nuist laccessibilit et la compatibilit des documents produits.

lre de HTML 5 et CSS 3, le couple accde une nouvelle dimension et de nou-veaux pouvoirs. Les interactions entre les deux langages nont jamais t aussipuissantes : sparation fond-forme renforce grce une pluralit de nouvellesbalises smantiques (, , , , etc.), gestion desmdias et priphriques mobiles, prise en charge dmultiplie des formulaires (via lanotion de formulaire valide, invalide, incomplet), etc.

Cette imbrication va au-del dune simple association de langages, une vritable philo-

sophie de conception sen dgage : par HTML 5 , on entend dsormais HTML 5
http://app/CahiersTitres.pdfhttp://app/CahiersTitres.pdfhttp://app/CahiersTitres.pdfhttp://app/CahiersTitres.pdf


9/20

Groupe Eyrolles, 2005 VII

Prface

combin CSS 3 et JavaScript . Une avance considrable pour le Web qui comble

enfin de faon extraordinaire les attentes des designers et intgrateurs CSS.Mme le dernier retardataire, Microsoft, suit le mouvement avec entrain voire zle fait dautant plus notable quil ntait pas coutumier du fait. En tmoignent les pre-mires moutures de Windows 8 et dInternet Explorer 10, que nous avons pu voir enavant-premire.

Le mouvement est en marche, la rvolution ne fait que commencer...

Mais revenons ce livre. HTML 5 se compose en pratique des langages HTML +CSS + JavaScript, autant de domaines dans lesquels lauteur excelle.

Tout dabord, cet ouvrage approche lexhaustivit, compte-tenu des spcifications encours dvolution. Mticuleux, Rodolphe na pu se restreindre moins de 600 pagesde contenus, codes et illustrations. Lannexe en ligne sur laccessibilit, notamment,mriterait dtre lue par tout professionnel du Web.

Ensuite, il ne contient pas dapproximation, et lauteur ne prend aucune libert avecles standards. Chaque partie est teste, moult fois vrifie et valide avant de figurerdans louvrage.

Enfin, il est agrable lire, parsem dun humour que lon pourrait qualifier de laRodolphe et quil manie avec beaucoup de justesse.

Ce qui mamne dire un mot de lauteur : Rodolphe Rimel manie avec une dsinvol-ture naturelle les logiciels de graphisme et dimage, les animations Flash, il connat les

arcanes de langages tels que jQuery, Ajax, PHP, MySQL, ladministration de serveursweb et matrise encore bien dautres jargons informatiques. Son curriculum vitaedbordeallgrement de rfrences en webdesign et dveloppement, et se distingue par la publica-tion dun DVD dapprentissage sur jQuery, du fameux lecteur Flash estampill Dewplayer et dun mmento sur MySQL prcdemment publi chez Eyrolles. Ceportrait ne serait pas complet sans voquer ses videntes qualits de photographe ama-teur et dhumoriste tourment via son carnet personnel blup.fr. Tant de perfection et de

diversit la fois suscitent lenvie pour le commun des mortels que je suis. Ds queRodolphe touche un clavier dordinateur, il semble que tout lui russit, infailliblement,et merveille. Et le voil prsent qui sattaque HTML 5 !

Je suis sr que vous trouverez bien dautres qualits son livre.

Bonne lecture.

Raphal Goetter, fondateur [email protected]


10/20


11/20

Ce livre est le fruit de longs mois de travail, de recherches, dexprimentations, de dis-sections des spcifications toujours en mouvement, de pittoresques rencontres debogues, de discussions avec mes collgues. Jespre quil sera utile au plus grand nombre

de lecteurs et quil rpandra autour de lui autant de plaisir que jai eu lcrire.

Avertissement et conventionsLa spcification HTML est un document qui dpasse les 800 pages, et qui fait rfrence de nombreux autres grce la magie des liens hypertextes. Il est crit dans un langage

peu distrayant, condens, trs technique, la destination dun public trs spcialis.Cet ouvrage se veut didactique et pratique. Il ne couvre pas toutes les mentions, excep-tions, et prcisions de la spcification, qui ncessiteraient 23 volumes diffrents et unenouvelle tagre ct de votre bureau. Cest pourquoi son objectif est daller lessentiel.

Jai choisi de faire rfrence aux lments HTML en les notant principalement entant que balises, cest--dire entre les caractres infrieur < et suprieur > ,pour faciliter la lecture et lappropriation du code.

Voici par exemple un lment

qui correspond un paragraphe. Fondamentale-ment, un lment comprend une balise ouvrante

et une balise fermante
,ventuellement des attributs et du contenu. Il sagit aussi dune entit mixte qui est la fois prsente dans le code HTML, dans le DOM, et laquelle on peut faire rf-rence en JavaScript et en CSS. On peut donc la dcrire de multiples faons selon lecontexte. Jespre que les puristes me pardonneront ce trope.
Enfin, cet ouvrage ne traite pas de web design en gnral, ni de graphisme, ni desfeuilles de style CSS ( lexception des nouveauts CSS 3 mentionnes au sein deschapitres).

Avant-propos


12/20


Groupe Eyrolles, 2005X

Codes sourceLes exemples de code sont rdigs en franais avec quelques soupons danglais, lan-gage de prdilection pour le Web. Ils doivent tre adapts vos besoins qui peuvent

varier grandement selon le contexte de dveloppement. Certains exemples figurantdans un chapitre ne reprendront pas ncessairement toutes les recommandations pr-sentes dans les exemples prcdents par souci de simplicit et de lisibilit. Il vousappartiendra de faire vos choix, au regard des tenants et aboutissants de vos projets.

Le code complet de la page HTML (en-tte et pied de page, proprits de style) nesera, la plupart du temps, pas prsent, car semblable dune page lautre, mais vous leretrouverez dans les chapitres initiaux et les fichiers tlcharger. Il en sera de mmepour les feuilles de style CSS associes la prsentation des documents HTML. Lescodes source affichent une fracheur maximum au moment de la rdaction.

CONVENTION HTML 5 ou HTML5 ?

Les spcifications officielles prnent labsence despace entre le numro de version et le nom du langage.Nous avons prfr pour lheure conserver lespace encore quelque temps, pour plusieurs raisons. La vritest que HTML 5 ne serait pas l, sil ny avait dabord eu HTML 4, si essentielle soit leur diffrence. Dautrepart, il nous semblait prmatur de confrer demble HTML 5 le privilge rserv aux seuls noms propresou marques. Voyons encore en HTML 5 le rsultat dune dmarche rationnelle qui a son histoire.

COMPLMENTSENLIGNE Annexes en ligne sur CSS et laccessibilit (ARIA) et tableaux de priseen charge mis jour

Vous trouverez sur le site daccompagnement du livre des ressources et complments, notamment troisannexes indispensables, mises disposition gratuitement :

lannexe A, qui fait un point, au moment de la mise sous presse de louvrage, sur les Fonctionnalits modifies et obsoltes entre HTML 4 et HTML 5 ;

lannexe B, qui donne un prcieux rappel sur les Feuilles de style CSS ; lannexe C, enfin, quil faudrait mettre entre les mains de tout dveloppeur web, et qui vous guide

dans la cration de sites accessibles, conformes la spcification ARIA : Accessibilit et ARIA .

Vous trouverez galement en ligne lindex de louvrage mais aussi, sur le site de lauteur, la mise jourdes tableaux de prise en charge par les navigateurs.

B http://html5.blup.fr/B http://www.editions-eyrolles.com/

Quant aux illustrations utilises dans cet ouvrage, elles sont issues de Fotolia avec leur permission. Lesphotos des dmonstrations, des exemples et des captures dcran ont t ralises par lauteur.

B http://www.fotolia.com


13/20

Groupe Eyrolles, 2005 XI

Avant-propos

propos de lauteurInitialement ingnieur rseaux et tlcoms, jai bifurqu quelque peu lissue de mestudes vers ma passion relle, qui avait dbut bien avant cela lorsque javais tent depercer plusieurs mystres : celui de mon modem RTC qui produisait des bruits tranges ; celui de mon modem cble qui clignotait bien souvent orange ; celui de la premire version de Flash qui ma valu un stage exprimental auprs de

mon propre fournisseur daccs ; celui de toutes les invocations magiques telles quIRC, NTTP et IPX qui

cachaient un Nouveau Monde dsormais en pril.

cette poque mode nostalgie on sobre en dbit, mais pas en GIF anims, lesgants du Web Google, Dailymotion, YouTube, Wikipdia, Facebook nexistaientpas. Point de Chatroulette, diPhone ou de Twitter lhorizon. Les CMS se comp-taient sur les doigts dune seule main. Cela nen faisait pas pour autant un monde

moins fabuleux mode nostalgie off.Comme beaucoup dautres passionns, je dois tout ce que jai appris la veille techno-logique quotidienne que permet Internet, les changes sur les forums, la lecture delivres en franais ou en anglais, la vie en agence web, la cration de projets exprimen-taux, les recherches effectues pour crire des articles publis sur Alsacrations.com.

Bien quintress par mes tudes menes leur terme, je me suis aperu que la confi-guration de routeurs (et dautres protocoles qui gravitaient dans chaque couche du

modle OSI) tait bien moins rjouissante que les sances de , cest--dire la ralisation de sites esthtiques et vraiment utiles mes semblables. Parailleurs, je pouvais apprendre en une journe ce que lon nous inculquait luniversiten un mois et qui tait par moments dpass ou superftatoire nentendez pas lquil y avait de super ftes, mais que les applications concrtes se faisaient dsirer.

Parmi mes comptences figurent les langages du Web JavaScript, CSS, et bien heu-reusement HTML ; mais aussi PHP, MySQL, Perl, C et tout ce qui concerneladministration de systmes et serveurs Linux. Au-del du code, je manie galementle graphisme avec Flash, Photoshop, Illustrator, Inkscape pour concevoir de bellesinterfaces ergonomiques et de rares Lolcats.

Je mintresse aussi la gographie, lhistoire, lastronomie, pour me changer les idesdepuis que le rayonnement dun cran illumine mon quotidien.

Jai publi prcdemment cet ouvrage un Mmento MySQL aux ditions Eyrolles

et un DVD dapprentissage pour le langage jQuery/Ajax.


14/20


Groupe Eyrolles, 2005XII

propos dAlsacrations

Alsacreations.com, site communautaire dapprentissage des standards web, a tfond par Raphal Goetter en 2003. Il a vu sa popularit grandir danne en anneavec la publication de nombreux tutoriels qui dfendaient parfois en avance sur leurtemps une conception web propre et conforme aux normes.

Pour participer ce mouvement, et aprs avoir sympathis autour dune tarte flambeavec Raphal, jai rdig des articles, des actualits, dvelopp le forum et dautresfonctionnalits pour la communaut.

Cest avec plaisir que nous nous sommes associs en 2006 pour lancer Alsacrea-tions.fr, lagence web, afin de mettre en pratique ce que nous dfendions et de pou-

voir en faire notre mtier. Nous nous attachons ne pas utiliser des termes comme Web 2.0 , rationalisation de process et buzz viral .

Notre petite quipe sest toffe progressivement mais srement, avec des collabora-teurs de qualit en qui je place toute ma confiance. Aujourdhui, je conduis et dve-loppe avec eux des projets pour des clients au niveau national et international.

RemerciementsCet ouvrage naurait pu voir le jour sans le soutien de tous ceux qui mentourent auquotidien. Je remercie tout particulirement...

Mes parents, pour tout ce quils mont apport durant ma jeunesse et mes tudes,pour tous les recoins du monde quils mont fait dcouvrir : mon pre qui nous aquitts durant lcriture et qui je dois beaucoup ; ma mre qui a toujours t pr-sente et attentionne pour moi.

Sarah, pour sa patience de tous les jours, ses relectures, ses muffins dlicieux, et lajoie de vivre quelle insuffle notre couple.

Raphal Goetter, pour ses conseils aviss, ses jeux de mots indits et sa confiancesereine dans laventure de notre agence web.Simon Kern, Philippe Vayssire, et Geoffrey Crofte, pour leur professionnalisme etla rjouissante ambiance quils instaurent dans notre quipe, mme aprs de longues

journes.

Christophe Mattera, pour son coup de pouce lpoque o je ntais quunpadawan.


15/20

Table des matires

CHAPITRE1Une brve histoire du Webet de ses standards....................... 1

Un successeur pour HTML 4 et XHTML 2

Le rle du W3C . . . . . . . . . . . . . . . . . . . 8Une maturation rigoureuse... . . . . . . . . 8 mais peu vloce . . . . . . . . . . . . . . . 9

Le rle du WhatWG . . . . . . . . . . . . . . . 10Les fondements de lvolution . . . . . . . . 11

En quoi consiste rellement HTML 5 ? . . . 12Diffrences depuis HTML 4.01et XHTML 1.x . . . . . . . . . . . . . . . . 13

HTML5 = HTML + JavaScript + CSS (3) ? . . 14Pourquoi des standards pour le Web ? . 15

CHAPITRE2HTML en seconde langue ........... 17

La syntaxe HTML 5 . . . . . . . . . . . . . . . 19Rappel sur les balises . . . . . . . . . . . . . 19

Imbrications et types de contenu . . . . . . 20Structure gnrale dun document HTML . 22Attributs . . . . . . . . . . . . . . . . . . . . . 23Les commentaires . . . . . . . . . . . . . . . 24

Lencodage des caractres . . . . . . . . . . . 25Le type MIME . . . . . . . . . . . . . . . . . . . 26Comment le navigateur dtermine-t-illencodage descaractres et le type MIME? . 27HTML 5 ou XHTML 5 ? . . . . . . . . . . . 28

Forme HTML . . . . . . . . . . . . . . . . 28Forme XHTML . . . . . . . . . . . . . . . 28

Ce que vous savez sur XHTMLest probablement faux . . . . . . . . . . . . 29Du vrai XHTML 5 . . . . . . . . . . . . . 29

Les bons outils . . . . . . . . . . . . . . . . . . . . 32Pour diter . . . . . . . . . . . . . . . . . . . 32Pour tester et dboguer . . . . . . . . . . . 33

Virtualisez ! . . . . . . . . . . . . . . . 34Mozilla Firefox . . . . . . . . . . . . . 34Google Chrome . . . . . . . . . . . . . 35Safari . . . . . . . . . . . . . . . . . . . . 36Opera . . . . . . . . . . . . . . . . . . . . 36Internet Explorer . . . . . . . . . . . . 37

Consoles JavaScript pour les API HTML 5 . 37La validation . . . . . . . . . . . . . . . . . . . . . 38Rappels sur les styles CSS . . . . . . . . . . . . 39Rappels sur JavaScript . . . . . . . . . . . . . . 42

Frameworks JavaScript . . . . . . . . . . . 43O placer ? . . . . . . . . . . . . . 43

Publier un site en ligne . . . . . . . . . . . . . . 44Choisir un hbergeur web . . . . . . . . . 44Utiliser un client FTP . . . . . . . . . . . . 45Choisir un langage serveuret un systme de gestion de contenu . . 45

Le protocole HTTP . . . . . . . . . . . . . . . . 47Requtes et en-ttes . . . . . . . . . . . . . 48

Bonnes pratiques . . . . . . . . . . . . . . . . . . 51Organisation du code . . . . . . . . . . . . 51

Organisation des fichiers . . . . . . . . . . 51Optimisations en vue des performances 51
http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/


16/20


Groupe Eyrolles, 2004XIV

CHAPITRE3

Navigateurs et support............... 53Panorama des navigateurs webet moteurs de rendu . . . . . . . . . . . . . . . . 54Prise en charge de HTML 5 . . . . . . . . . . 55Bibliothques de dtectionet de modernisation . . . . . . . . . . . . . . . . 56

Modernizr . . . . . . . . . . . . . . . . . . . 56html5shim (ou html5shiv) . . . . . . . . 58

Frameworks HTML . . . . . . . . . . . . . . . 59

CHAPITRE4lments et attributs HTML 5 .... 63

Modles de contenu . . . . . . . . . . . . . . . 65Le doctype avant tout . . . . . . . . . . . . . . 66

Rappel des prcdents doctypes . . . . . 67

lments racines et mta-informations . . 68 . . . . . . . . . . . . . . . . . . . . . 68manifest . . . . . . . . . . . . . . . . . . 69

. . . . . . . . . . . . . . . . . . . . . 70 . . . . . . . . . . . . . . . . . . . . . . 72 . . . . . . . . . . . . . . . . . . . . . 72

. . . . . . . . . . . . . . 73 . . . . . . . . . . . . . 74 . . . . . . . . . . . 75

. . . . . . . . . . . . . . . . . . . . . . 76 . . . . . . . . . . . . . . . . . . . . . . 77

media . . . . . . . . . . . . . . . . . . . 79 . . . . . . . . . . . . . . . . . . . . . . 80

href . . . . . . . . . . . . . . . . . . . . . 80target . . . . . . . . . . . . . . . . . . . 80

. . . . . . . . . . . . . . . . . . . . . 80Groupement . . . . . . . . . . . . . . . . . . . . 81 . . . . . . . . . . . . . . . . . . . . . . . 81 . . . . . . . . . . . . . . . . . . . . . . 83

Liens . . . . . . . . . . . . . . . . . . . . . . . . . . 83 . . . . . . . . . . . . . . . . . . . . . . . . 83

href et hreflang . . . . . . . . . . . . . 84rel . . . . . . . . . . . . . . . . . . . . . . 86id et ancres . . . . . . . . . . . . . . . . 86target . . . . . . . . . . . . . . . . . . . 87

download . . . . . . . . . . . . . . . . . 88Liens et blocs . . . . . . . . . . . . . . . 88

Sections et titres . . . . . . . . . . . . . . . . . . . 89Le cas Internet Explorer . . . . . . . . 93Le cas Internet Explorersans JavaScript . . . . . . . . . . . . . 96Le cas Internet Explorersans JavaScript, bis . . . . . . . . . . . 97

. . . . . . . . . . . . . . . . . . . . 97

. . . . . . . . . . . . . . . . . . . . . 99 . . . . . . . . . . . . . . . . . . . 100 . . . . . . . . . . . . . . . . . . . . 102 . . . . . . . . . . . . . . . . . . . . . 103 . . . . . . . . . . . . . . . . . . . . 104 . . . . . . . . . . . . . . . . . . . 106 . . . . . . . . . . . . . . . . . 106

Hirarchie des lments de sectionset outline . . . . . . . . . . . . . . . . . 108

. . . . . . . . . . . . . . . . . . . 112Listes . . . . . . . . . . . . . . . . . . . . . . . . . 113

. . . . . . . . . . . . . . . . . . . . . . . 114 . . . . . . . . . . . . . . . . . . . . . . . 115 . . . . . . . . . . . . . . . . . . . . . . . 116 . . . . . . . . . . . . . . . . . . . . . . . 117

. . . . . . . . . . . . . . . . . . . . . . . 119 . . . . . . . . . . . . . . . . . . . . . . 119Texte . . . . . . . . . . . . . . . . . . . . . . . . . 120

. . . . . . . . . . . . . . . . . . . . . . . 120 . . . . . . . . . . . . . . . . . 121 . . . . . . . . . . . . . . . . . . . . . . . 123

cite . . . . . . . . . . . . . . . . . . . . . 123 . . . . . . . . . . . . . . . . . . . . . . 123 . . . . . . . . . . . . . . . . . . . . 124 . . . . . . . . . . . . . . . . . . . . . . 125 . . . . . . . . . . . . . . . . . . . . . . . 125 . . . . . . . . . . . . . . . . . . . . . . . . 127 . . . . . . . . . . . . . . . . . . . . . 128 . . . . . . . . . . . . . . . . . . . . . . 128 . . . . . . . . . . . . . . . . . . . . . 129

. . . . . . . . . . . . . . . . . . . . . 130 . . . . . . . . . . . . . . . . . . . . . . 131
http://app/CahiersTitres.pdfhttp://app/CahiersTitres.pdfhttp://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://app/CahiersTitres.pdfhttp://app/CahiersTitres.pdfhttp://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/


17/20

Table des matires

Groupe Eyrolles, 2004 XV

. . . . . . . . . . . . . . . . . . . . . 131 . . . . . . . . . . . . . . . . . . . . 132 . . . . . . . . . . . . . . . . . . . . . 133 . . . . . . . . . . . . . . . . . . . . . 133 . . . . . . . . . . . . . . . . . . . . 134

datetime . . . . . . . . . . . . . . . . 135pubdate . . . . . . . . . . . . . . . . . 136

. . . . . . . . . . . . . . . . . . . . . . 137
. . . . . . . . . . . . . . . . . . . . . . 138

. . . . . . . . . . . . . . . . . . . . . 139 . . . . . . . . . . . . . . . . . . . . . . 139 . . . . . . . . . . . . . . . . . . . . . . 140 . . . . . . . . . . . . . . . . . . . . . . . 141 . . . . . . . . . . . . . . . . . . . . . 142 . . . . . . . . . . . . . . . . . . . . 143 . . . . . . . . . . . . . . . . . . . . 144 . . . . . . . . . . . . . . . . . . . . . . 145 . . . . . . . . . . . . . . . . . . . . . . 146 . . . . . . . . . . . . . . . . . . . . . 147 . . . . . . . . . . . . . . . . . . . . . 147

Contenu embarqu . . . . . . . . . . . . . . . 148 . . . . . . . . . . . . . . . . . . . . . 148

Formats de compression dimages . . 148Bref comparatif visuel . . . . . . . . 150

Usage des images en HTML . . . 151src . . . . . . . . . . . . . . . . . . . . . 152alt . . . . . . . . . . . . . . . . . . . . 153width, height . . . . . . . . . . . . . 155usemap . . . . . . . . . . . . . . . . . 156ismap . . . . . . . . . . . . . . . . . . 156Liens sur images . . . . . . . . . . . 157Positionnement des images . . . . 158

. . . . . . . . . . . . . . . . . . . . . 159 . . . . . . . . . . . . . . . . . . . . . 161 . . . . . . . . . . . . . . . . . . . 163 . . . . . . . . . . . . . . . . 166 . . . . . . . . . . . . . . . . . . . 167

src . . . . . . . . . . . . . . . . . . . . . 168width, height . . . . . . . . . . . . . 168

sandbox . . . . . . . . . . . . . . . . 169srcdoc . . . . . . . . . . . . . . . . . . 170seamless . . . . . . . . . . . . . . . . 171

. . . . . . . . . . . . . . . . . . . 171Imbrications avec et lments mdia . . . . . . . . . . . 173

. . . . . . . . . . . . . . . . . . . . 174Le cas de Flash . . . . . . . . . . . . . 176

. . . . . . . . . . . . . . . . . . . . 177 . . . . . . . . . . . . . . . . . . . . 178 . . . . . . . . . . . . . . . . . . . . 178 . . . . . . . . . . . . . . . . . . . 179

. . . . . . . . . . . . . . . . . . . . 179 . . . . . . . . . . . . . . . . . . . 179Donnes tabulaires . . . . . . . . . . . . . . . 180

. . . . . . . . . . . . . . . . . . . . . 180 . . . . . . . . . . . . . . . . . . . . 183 . . . . . . . . . . . . . . . . . . . . . 183 . . . . . . . . . . . . . . . . . . . . 184 . . . . . . . . . . . . . . . . . . . . . . . 186 . . . . . . . . . . . . . . . . . . . . . . . 187 . . . . . . . . . . . . . . . . . . . . . . . 189 . . . . . . . . . . . . . . . . . . . 190 . . . . . . . . . . . . . . . . . . 191 . . . . . . . . . . . . . . . . . . . . . . 193

lments interactifs . . . . . . . . . . . . . . . 195 . . . . . . . . . . . . . . . . . . . . 195

type . . . . . . . . . . . . . . . . . . . . 195label . . . . . . . . . . . . . . . . . . . . 196 . . . . . . . . . . . . . . . . . 197 . . . . . . . . . . . . . . . . . . . 199 . . . . . . . . . . . . . . . . . 202 . . . . . . . . . . . . . . . . . . . 202

Scripting . . . . . . . . . . . . . . . . . . . . . . . 202 . . . . . . . . . . . . . . . . . . . . 202

Script externe la page HTML . . 204Excution asynchrone . . . . . . . . 205Excution diffre . . . . . . . . . . . 205

. . . . . . . . . . . . . . . . . . . 205Attributs HTML globaux . . . . . . . . . . 206

accesskey . . . . . . . . . . . . . . . . . . . 207class . . . . . . . . . . . . . . . . . . . . . . . 208

contextmenu . . . . . . . . . . . . . . . . 209contenteditable . . . . . . . . . . . . . . 210
http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/


18/20


Groupe Eyrolles, 2004XVI

data- . . . . . . . . . . . . . . . . . . . . . 211dir . . . . . . . . . . . . . . . . . . . . . . . 212draggable . . . . . . . . . . . . . . . . . . 213dropzone . . . . . . . . . . . . . . . . . . 213hidden . . . . . . . . . . . . . . . . . . . . 213id . . . . . . . . . . . . . . . . . . . . . . . . 214itemid, itemref, itemscope, itemtype,itemprop . . . . . . . . . . . . . . . . . . 215lang . . . . . . . . . . . . . . . . . . . . . . 215

tabindex . . . . . . . . . . . . . . . . . . . . 216title . . . . . . . . . . . . . . . . . . . . . . . 218spellcheck . . . . . . . . . . . . . . . . . . 219style . . . . . . . . . . . . . . . . . . . . . . 220

Relations des liens . . . . . . . . . . . . . . . . 221Quelques relations notables . . . . . . . 222

nofollow . . . . . . . . . . . . . . . . . 222noreferrer . . . . . . . . . . . . . . . 223prefetch . . . . . . . . . . . . . . . . 224first, last, prev, next, up . . . . . . 225

Attributs vnements . . . . . . . . . . . . . 225

CHAPITRE5Les formulaires (Web Forms)... 231

et ses variantes . . . . . . . . . . . . 233

text . . . . . . . . . . . . . . . . . . . . . . . 235password . . . . . . . . . . . . . . . . . . . 236tel . . . . . . . . . . . . . . . . . . . . . . . 236url . . . . . . . . . . . . . . . . . . . . . . . 238email . . . . . . . . . . . . . . . . . . . . . 239search . . . . . . . . . . . . . . . . . . . . 240hidden . . . . . . . . . . . . . . . . . . . . . 241radio . . . . . . . . . . . . . . . . . . . . . . 242checkbox . . . . . . . . . . . . . . . . . . . 243button . . . . . . . . . . . . . . . . . . . . . 244reset . . . . . . . . . . . . . . . . . . . . . . 244submit . . . . . . . . . . . . . . . . . . . . . 245image . . . . . . . . . . . . . . . . . . . . . 245file . . . . . . . . . . . . . . . . . . . . . . . 246date . . . . . . . . . . . . . . . . . . . . . . 249

time . . . . . . . . . . . . . . . . . . . . . 250datetime . . . . . . . . . . . . . . . . . . . 250

datetime-local . . . . . . . . . . . . . . . 251month . . . . . . . . . . . . . . . . . . . . 252

week . . . . . . . . . . . . . . . . . . . . . 253number . . . . . . . . . . . . . . . . . . . . 254range . . . . . . . . . . . . . . . . . . . . . 254color . . . . . . . . . . . . . . . . . . . . . . 255 . . . . . . . . . . . . . . . . . . . 256

Autres lments de formulaire . . . . . . . . 257 . . . . . . . . . . . . . . . . . . . 257

. . . . . . . . . . . . . . . . . . . . 258 . . . . . . . . . . . . . . . . . . . . 259 . . . . . . . . . . . . . . . . . . 260 . . . . . . . . . . . . . . . . . . . . 261 . . . . . . . . . . . . . . . . . . . 262 . . . . . . . . . . . . . . . . . . . 264 . . . . . . . . . . . . . . . . . . 266 . . . . . . . . . . . . . . . . . . . . 268

Construction de formulaires . . . . . . . . . 270 . . . . . . . . . . . . . . . . . . . . . 270 . . . . . . . . . . . . . . . . . . . 272 . . . . . . . . . . . . . . . . . . . . 273 . . . . . . . . . . . . . . . . . . . . . 274

Attributs communs pourles lments de formulaire . . . . . . . . . . . 276

Quelques nouveaux attributs HTML 5 . . . 278placeholder . . . . . . . . . . . . . . . 278autofocus . . . . . . . . . . . . . . . . . 279autocomplete . . . . . . . . . . . . . . 279required . . . . . . . . . . . . . . . . . 279multiple . . . . . . . . . . . . . . . . . 279dirname . . . . . . . . . . . . . . . . . 280pattern . . . . . . . . . . . . . . . . . . 280min, max, step . . . . . . . . . . . . . 280

Une touche de style . . . . . . . . . . . . . . . 281Prise en charge . . . . . . . . . . . . . . . . . . . 283

CHAPITRE6Les microformats (microdata)... 285

Principe des microformats :

vers le Web smantique . . . . . . . . . . . . 286Les prmices . . . . . . . . . . . . . . . . . 288
http://app/CahiersTitres.pdfhttp://app/CahiersTitres.pdfhttp://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://app/CahiersTitres.pdfhttp://app/CahiersTitres.pdfhttp://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/


19/20

Table des matires

Groupe Eyrolles, 2004 XVII

Microdata la rescousse . . . . . . . . . . . 290Attributs globaux et vocabulaires . . . 291

itemscope . . . . . . . . . . . . . . . . 291itemtype . . . . . . . . . . . . . . . . . 291Vocabulaires . . . . . . . . . . . . . . 292itemprop . . . . . . . . . . . . . . . . 294itemid . . . . . . . . . . . . . . . . . . 295itemref . . . . . . . . . . . . . . . . . . 296

API DOM Microdata . . . . . . . . . . 297

document.getItems() . . . . . . . . . 298itemType, itemRef, itemId . . . . 299properties . . . . . . . . . . . . . . . . 300properties.namedItem() . . . . . . . 300itemValue . . . . . . . . . . . . . . . 300

Rich Snippets . . . . . . . . . . . . . . . . . . . 302

CHAPITRE7

Audio et Vido .......................... 305Conteneurs, codecs, licences et support . 307

Vido . . . . . . . . . . . . . . . . . . . . . 309Theora . . . . . . . . . . . . . . . . . 309WebM . . . . . . . . . . . . . . . . . . 310H.264 . . . . . . . . . . . . . . . . . . 310

Audio . . . . . . . . . . . . . . . . . . . . . 311

MP3 (Mpeg-1 Audio Layer 3) . . 311AAC (Advanced Audio Coding) . 312Vorbis . . . . . . . . . . . . . . . . . . 312

Les balises media . . . . . . . . . . . . . . . . 313 . . . . . . . . . . . . . . . . . . . . . . . 315 . . . . . . . . . . . . . . . . . . . . . . . 315 . . . . . . . . . . . . . . . . . . . . . . . 316 . . . . . . . . . . . . . . . . . . . . . . . . 317

Attributs pour . . . . . . . . . . 318Attributs pour et . . . . . 319

src . . . . . . . . . . . . . . . . . . . . . . . 319width et height . . . . . . . . . . . . . . . 319controls . . . . . . . . . . . . . . . . . . . . 319poster . . . . . . . . . . . . . . . . . . . . . 319autoplay . . . . . . . . . . . . . . . . . . . . 320

preload . . . . . . . . . . . . . . . . . . . . 320loop . . . . . . . . . . . . . . . . . . . . . . 321

Interface de contrle et vnements . . . . 321Contrler la lecture . . . . . . . . . . 323Surveiller les vnements . . . . . . 323

Crer une interface graphique personnalise 325Dtecter les erreurs de lecture . . . . 330

Dtection du support avec canPlayType() . 331Solution de repli avec Flash et Java . . 333

Plein cran . . . . . . . . . . . . . . . . . . 334Aller plus loin avec les API . . . . . . . 335

Prise en charge de et par les navigateurs : comment choisir ? . . 336Librairies et lecteurs . . . . . . . . . . . . . . . 338

CHAPITRE8Dessin avec Canvas ................... 339

Llment . . . . . . . . . . . . . . . 341Base de dpart et contexte graphique . 342Coordonnes . . . . . . . . . . . . . . . . . 342

Formes gomtriques . . . . . . . . . . . . . . 344Chemins . . . . . . . . . . . . . . . . . . . . . . . 345

beginPath() et closePath() . . . . . . . . 346moveTo() et lineTo() . . . . . . . . . . . 347fill() et stroke() . . . . . . . . . . . . . . . . 348rect() . . . . . . . . . . . . . . . . . . . . . . 348

arcTo() . . . . . . . . . . . . . . . . . . . . . 349arc() . . . . . . . . . . . . . . . . . . . . . . . 350bezierCurveTo() . . . . . . . . . . . . . . 351quadraticCurveTo() . . . . . . . . . . . . 352

Styles de traits, remplissages et couleurs . . 353Dgrads . . . . . . . . . . . . . . . . . . . . . . 354

Transformations et tats du contexte . . . 356

save() et restore() . . . . . . . . . . . . . . 358Images . . . . . . . . . . . . . . . . . . . . . . . . 360Pixels . . . . . . . . . . . . . . . . . . . . . . . . . 362

Crer des pixels . . . . . . . . . . . . . . . 364Lire des pixels . . . . . . . . . . . . . . . . 365Modifier des pixels . . . . . . . . . . . . . 367

Motifs et sprites . . . . . . . . . . . . . . . . . . 370Texte . . . . . . . . . . . . . . . . . . . . . . . . . 375

Ombrages . . . . . . . . . . . . . . . . . . . . . . 377Transparence, compositions et masques . 379
http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/


20/20


Groupe Eyrolles, 2004XVIII

Transparence gnrale . . . . . . . . . . 379Compositions . . . . . . . . . . . . . . . . 380Masques . . . . . . . . . . . . . . . . . . . 382

Contrle clavier et souris . . . . . . . . . . . 385Souris . . . . . . . . . . . . . . . . . . . . . 386Clavier . . . . . . . . . . . . . . . . . . . . 389

Animation et jeux . . . . . . . . . . . . . . . . 391Jeux . . . . . . . . . . . . . . . . . . . . . . 394

Vido et audio . . . . . . . . . . . . . . . . . . 395

Prise en charge . . . . . . . . . . . . . . . . . . 397Librairies . . . . . . . . . . . . . . . . . . . . . . 399Et la 3D ? . . . . . . . . . . . . . . . . . . . . . . 400Et le graphisme vectoriel (SVG) ? . . . . . 401

Cration au format SVG . . . . . . . . 402Inclusion HTML . . . . . . . . . . . . . 403Syntaxe . . . . . . . . . . . . . . . . . . . . 405Support . . . . . . . . . . . . . . . . . . . . 406Alternatives et librairies . . . . . . . . . 406

CHAPITRE9Golocalisation.......................... 407

Principe . . . . . . . . . . . . . . . . . . . . . . . 409Les mains dans le code . . . . . . . . . . . . . 410

Dclencher la localisation . . . . . . . . 411

Travailler avec la positionet les coordonnes . . . . . . . . . . . . . 412Gestion des erreurs . . . . . . . . . . . . 413Options supplmentaires . . . . . . . . 414Utiliser une carte . . . . . . . . . . . . . . 416

Prise en charge de lAPI Geolocationpar les navigateurs . . . . . . . . . . . . . . . . 418

Alternative avec geo-location-javascript . . 419CHAPITRE10Interactions avec les fichiers(File API)...................................... 421

Principe . . . . . . . . . . . . . . . . . . . . . . . 422Fonctionnement . . . . . . . . . . . . . . . . . 423

vnement onchange . . . . . . . . . . . 424Recueillir les informationsdes fichiers slectionns . . . . . . . . . 425

Lire des fichiers avec FileReader . . . . . . 426Utiliser Canvas . . . . . . . . . . . . . . . 430CreateObjectURL . . . . . . . . . . . . . 432

Upload simple avec PHP . . . . . . . . . . . 433Upload avec XMLHttpRequest 2 . . . . . 434

FormData . . . . . . . . . . . . . . . . . . . 436Drag & Drop . . . . . . . . . . . . . . . . . . . 439Et bientt, crire des fichiers,accder au systme . . . . . . . . . . . . . . . . 440

Prise en charge . . . . . . . . . . . . . . . . . . . 440CHAPITRE11Gestion du glisser-dposer(Drag & Drop)............................ 441

Principe . . . . . . . . . . . . . . . . . . . . . . . 442vnements et attributs mis en uvre . . 443

Glisser... . . . . . . . . . . . . . . . . . . . . . . . 444Lattribut draggable . . . . . . . . . . . . 444Un zeste de CSS . . . . . . . . . . . . . . 445

Dposer! . . . . . . . . . . . . . . . . . . . . . . 447Lattribut dropzone . . . . . . . . . . . . . . 448Les vnements dragenter et dragleave . . . 449Lvnement dragover . . . . . . . . . . . . . 449

Linterface DataTransfer . . . . . . . . . . . 451Lvnement dragstart . . . . . . . . . . . 452

effectAllowed et dropEffect . . . . . 452setData() . . . . . . . . . . . . . . . . . . . 453Lvnement drop et getData() . . . . . 454Lvnement dragend . . . . . . . . . . . 456Aller plus loin . . . . . . . . . . . . . . . . 456Script complet . . . . . . . . . . . . . . . . 456

Glisser-dposer de fichiers . . . . . . . . . . 458Dpt depuis le systme (drag-in) . . . 458En symbiose avec FileReaderet Data URI . . . . . . . . . . . . . . . . . 460Dpose dlmentshors du navigateur (drag-out) . . . . . . 464

Prise en charge du glisser-dposer . . . . . 466
http://app/CahiersTitres.pdfhttp://app/CahiersTitres.pdfhttp://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://app/CahiersTitres.pdfhttp://app/CahiersTitres.pdfhttp://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/http://0.0.0.0/

extrait html 5

Documents