HTML5 Poalummer 2 LED Ur Le Webdesign

HTML5
pour le Webdesign
Conception
Mise en uvre des CSS3
Intgration des mdias
Dveloppement JavaScript
Bill Sanders
Sanders prelims.indd 3
07/09/2012 15:43:28
Cet ouvrage est la traduction

en langue franaise, par Dunod diteur, de louvrage
Smashing HTML5
de Bill Sanders
Copyright 2011 William B. Sanders
All rights reserved. Authorised translation from the English
language edition published by John Wiley & Sons Limited.
Responsibility for the accuracy of the translation rests solely
with Dunod Editeur and is not the responsibility of the John
Wiley & Sons Limited. No part of this book may be reproduced in any form without the written permission of the original copyright holder, John Wiley & Sons Limited.
Toutes les marques cites dans cet ouvrage sont des

marques dposes par leurs propritaires respectifs.
Couverture : Rachid Mara
Dunod, Paris, 2012, pour la traduction franaise

ISBN 978-2-10-058897-8
Sanders prelims.indd 4
07/09/2012 15:43:28
Table des matires
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
propos de lauteur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Remerciements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Premire partie Le langage du Web

Chapitre 1 Introduction HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
11
1.1
11
Utilisation des balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Dunod Toute reproduction non autorise est un dlit.
1.1.1
Incorporation des nouveaux lments HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . .
13
1.1.2
Utilisation des balises des versions prcdentes de HTML . . . . . . . . . . . . . . . . . . .
16
1.1.3
Renoncement ou remplacement des balises abandonnes . . . . . . . . . . . . . . . . . . . .
20
Choix dun navigateur pour interprter HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . .
21
1.2
1.2.1
Mozilla FireFox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
22
1.2.2
Google Chrome . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
23
1.2.3
Opera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
24
1.2.4
Apple Safari . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
26
1.2.5
Microsoft Internet Explorer 9 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
27
1.2.6
Prvisualisation dafchages diffrents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
27
vous de jouer ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
28
1.3
IV
HTML5 pour le webdesign
Chapitre 2 Balises HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
31
2.1
32
Analyse syntaxique du code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.1.1
HTML5 et les chiers connexes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
32
2.1.2
Fichiers fonctionnant avec le Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
35
Fonctionnement des balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
35
2.2
2.2.1
Balise HTML de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
36
2.2.2
Description de la page avec des balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
36
2.2.3
Identication des parties dune balise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
38
2.2.4
Rle de la balise de commentaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
40
2.3
Balises imbriques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
43
2.4
vous de jouer ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
45
Chapitre 3 Balises de texte et un peu de CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
47
3.1
47
Principes de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.1.1
Un peu plus dorganisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
49
3.1.2
Rchir la structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
50
3.2
Renforcement de la structure HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
53
3.3
Ajout de style un texte laide de CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
56
3.3.1
Stylage des lments HTML5 avec des proprits CSS3 . . . . . . . . . . . . . . . . . . . .
56
3.3.2
Cration de classes et dID CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
64
vous de jouer ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
68
Chapitre 4 Valeurs des couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
69
4.1
69
3.4
Couleur RGB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.1.1
Utilisation des noms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
70
4.1.2
Pourcentages RGB et HSL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
71
4.1.3
Paramtrage RGB avec des entiers dcimaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
74
4.1.4
Paramtrage avec des valeurs hxadcimales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
75
4.2
Ajout de transparence la couleur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
78
4.3
Cration dun modle de couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
80
4.3.1
partir dune couleur de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
81
4.3.2
partir dune image. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
81
Intgration de la palette de couleurs la page Web . . . . . . . . . . . . . . . . . . . . . . . .
82
4.4
Table des matires
4.5
84
vous de jouer ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Deuxime partie Conception de pages et de sites Web

Chapitre 5 Organisation de la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
89
5.1
Sommet dun document HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
89
5.1.1
Dnition de la base de rfrence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
90
5.1.2
Description du site avec des mtadonnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
91
5.1.3
Savoir quand on a besoin dun script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
93
5.2
Utiliser les sections dans sa conception. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
95
5.3
Organisation des contenus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
98
5.3.1
Paragraphes, divisions et listes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
99
5.3.2
Regroupement sans fracture. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
103
5.3.3
Figures et lgendes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
105
Organisation des chiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
107
5.4.1
Organisation et rfrencement des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
107
5.4.2
Rfrence absolue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
108
5.4.3
Rfrence relative . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
108
vous de jouer ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
111
Chapitre 6 Afchage des donnes dans des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . .
113
6.1
Proprits de tableaux CSS3 pour HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
113
6.2
Tableaux et donnes tabulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
116
Bases dun tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
117
Stylage dun tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
118
6.3.1
Ajout de bordures avec CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
118
6.3.2
Mise en vidence des donnes avec des couleurs de fond . . . . . . . . . . . . . . . . . . . .
120
Tableaux complexes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
123
6.4.1
Utilisation des attributs rowspan et colspan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
123
6.4.2
Mise en pratique dans des tableaux. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
125
vous de jouer ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
128
5.4
5.5
6.2.1
6.3
6.4
6.5
VI
Chapitre 7 Tout sur les liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
131
7.1
131
Llment Link et ses principaux attributs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.1.1
Feuilles de styles alternatives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
132
7.1.2
Icnes de liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
135
7.1.3
Prchargement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
135
7.1.4
Autres attributs link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
137
Liens de pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
137
7.2
7.2.1
Attribut rel en dtail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
137
7.2.2
Ancres de page et ID . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
141
7.2.3
Target . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
144
Utilisation des iframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
145
7.3
7.3.1
Imbrication de pages Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
146
vous de jouer ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
148
Chapitre 8 Stratgies de navigation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
151
8.1
151
7.4
Concepts de navigation Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
8.1.1
Navigation de concepteur et navigation dutilisateur . . . . . . . . . . . . . . . . . . . . . . .
152
8.1.2
Navigation globale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
153
8.1.3
Menus droulants et navigation globale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
157
8.2
Utilisation de JavaScript pour appeler une page lie . . . . . . . . . . . . . . . . . . . . . . .
160
8.3
Maintenir la cohrence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
162
8.3.1
Navigation verticale et horizontale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
163
8.3.2
Application de pseudo-classes CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
164
8.3.3
Mcanisme HTML5 de la navigation verticale . . . . . . . . . . . . . . . . . . . . . . . . . . . .
165
8.3.4
Utilisation dicnes pour la navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
168
Sites page Web unique avec des Iframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
169
8.4
8.4.1
Lien vers une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
170
8.4.2
Ralisation et utilisation dicnes servant de vignettes . . . . . . . . . . . . . . . . . . . . . .
170
8.4.3
Utilisation diframes sur des terminaux mobiles . . . . . . . . . . . . . . . . . . . . . . . . . . .
173
vous de jouer ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
174
8.5
Table des matires
VII
Troisime partie Multimdia : images, sons et vidos

Chapitre 9 Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
177
9.1
Introduction aux chiers image HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
177
9.1.1
Les formats et les pixels ont de limportance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
178
9.1.2
Prservation des calques dans les images Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
180
Tailles des chiers graphiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
182
Utilisation dapplications graphiques pour modier la taille des chiers image . . .
184
Placement des images et cration de pages Web exibles . . . . . . . . . . . . . . . . . . .
191
9.3.1
Placement des images avec lattribut align . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
191
9.3.2
Taille dimage exible avec un peu de JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . .
193
9.3.3
Application pour les chiers SVG dynamiques partir de chiers CS5 Adobe
Illustrator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
196
vous de jouer ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
199
Chapitre 10 Son . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
201
10.1 Introduction la gestion des contenus audio en HTML5 . . . . . . . . . . . . . . . . . . .
201
10.1.1 Autoplay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
202
10.1.2 Controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
202
10.1.3 Preload . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
203
10.1.4 Boucle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
205
10.2 Prise en charge de laudio par les navigateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
205
10.3 Source la rescousse : plan B . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
206
10.3.1 Attribut type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
206
10.3.2 Paramtre codec du type de la source . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
207
10.4 Cration de chiers audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
208
10.4.1 Enregistreur de son de Windows 7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
208
10.5 Effets sonores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
210
10.5.1 Sons de transition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
211
10.5.2 Intgration deffets sonores une page Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
212
10.6 vous de jouer ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
215
Chapitre 11 Vido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
217
11.1 Cration dune page HTML5 avec de la vido . . . . . . . . . . . . . . . . . . . . . . . . . . . .
218
9.2
9.2.1
9.3
9.4
VIII
11.2 Compatibilit vido des navigateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
221
11.2.1 Conversion de chiers WebM avec Miro Video Converter . . . . . . . . . . . . . . . . . .
222
11.2.2 Conversion au format 3GP avec Adobe Media Encoder CS5 . . . . . . . . . . . . . . .
222
11.3 Cration de vidos pour le Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
225
11.3.1 Webcams . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
225
11.3.2 Petits camscopes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
226
11.3.3 Camscopes standard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
226
11.3.4 Logiciels de capture vido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
227
11.4 Attributs des balises video et source . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
228
11.4.1 Src . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
228
11.4.2 Poster . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
229
11.4.3 Preload . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
230
11.4.4 Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
230
11.4.5 Autoplay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
231
11.4.6 Controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
231
11.4.7 Width et Height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
232
11.5 vous de jouer ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
233
Quatrime partie Balises HTML5 dynamiques et un soupon de

JavaScript
Chapitre 12 Introduction JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
237
12.1 Insertion de JavaScript dans des pages HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . .
237
12.1.1 JavaScript dans des chiers externes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
238
12.1.2 Fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
239
12.1.3 Gestionnaires dvnements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
240
12.2 Utilisation du DOM. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
243
12.2.1 Fonctionnement du DOM avec les pages et JavaScript . . . . . . . . . . . . . . . . . . . . .
244
12.2.2 Les lments HTML5 et le DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
246
12.3 Stockage des valeurs temporaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
248
12.3.1 Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
248
12.3.2 Tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
252
12.3.3 Objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
253
12.4 vous de jouer ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
256
Table des matires
IX
259
13.1 Introduction canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
260
13.1.1 Implmentation dun simple canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
262
13.1.2 Images et ombres dans les canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
269
13.2 Cration de dessins complexes avec des canvas . . . . . . . . . . . . . . . . . . . . . . . . . . .
274
13.2.1 Lignes et mouvement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
276
13.2.2 Courbes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
280
13.3 vous de jouer ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
286
Chapitre 14 Ajout de formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
289
14.1 Ajout dun formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
289
14.1.1 Attributs gnraux dun formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
291
14.1.2 Le formulaire comme partie du DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
296
14.2 Les diffrentes sortes de saisie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
298
14.2.1 Lattribut list, le type URL et les datalist . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
299
14.2.2 Boutons radio et cases cocher : lments de saisie faciles slectionner . . . . . .
303
14.2.3 Slectionneur de date . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
307
14.3 vous de jouer ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
309
Chapitre 15 Incorporation dobjets et stockage dinformations . . . . . . . . . . . . . . . .
311
15.1 Geolocation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
311
15.1.1 Trouver la latitude et la longitude . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
312
15.1.2 Rcupration de la carte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Chapitre 13 Amlioration des sites avec les canvas . . . . . . . . . . . . . . . . . . . . . . . . . . .
313
15.1.3 Exploitation des proprits de lobjet geolocation et du plug-in Google Earth . . .
316
15.2 Stockage en HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
317
15.2.1 Stockage de session . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
318
15.2.2 Stockage local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
321
15.3 Ajout et ajustement dobjet sur des pages Web HTML5 . . . . . . . . . . . . . . . . . . . .
325
15.3.1 Ajout dun objet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
326
15.3.2 Ajustement des objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
327
15.4 vous de jouer ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
328
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
329
Introduction
Cet ouvrage est ddi Jacob Sanders.
En 1992, je suis parti la dcouverte dInternet (on ne parlait pas encore de surf
ce moment-l) avec un programme qui utilisait le protocole Gopher. Je me trouvais
El Paso, au Texas, et jtais capable de consulter les horaires de chemin de fer entre
Londres et Cambridge en Angleterre. cette poque, cela tenait du miracle et ctait
incroyable.
Je ne pensais pas que lon ferait mieux que Gopher sur Internet, et peu de temps
aprs cela est apparu le navigateur Mosaic et le World Wide Web. Netscape Navigator
a rapidement supplant Mosaic et jai dcouvert HTML. Jtais capable de visualiser
du texte et des images et je pouvais en plus passer dune page Web une autre. En peu
de temps, je me suis dbrouill pour crer mes propres pages Web laide dun diteur
de texte et du nouveau langage de balisage, HTML. Des types du service informatique
me crrent un serveur et je me suis lanc dans laventure.
Pendant un moment, ctait comme sil sortait peu prs tous les ans une nouvelle
version de HTML. CSS et JavaScript rent leur apparition et de plus en plus de
navigateurs devinrent disponibles. Les progrs taient continus, mais aprs HTML4
(qui incluait XHTML), les choses ont sembl stagner. Ces heures sombres de HTML
ont dur de 2000 jusqu 2008. Puis le W3C (World Wide Web Consortium) publia un
document de travail sur HTML5 en 2008. Pourtant aprs la publication de la norme
HTML5 sous une forme provisoire, les choses volurent trs lentement jusqu ce que
je mette la main sur un navigateur HTML5. Lquipe de dveloppement des standards
a travaill mthodiquement et projetait dimplmenter la version dnitive de la

norme dans les navigateurs en 2012 !
Puis un jour en 2009 ou en 2010, jai entendu parler dune version bta dun navigateur qui prenait en charge HTML5, ou tout du moins certaines de ses fonctionnalits.
En 2010, plusieurs navigateurs taient compatibles HTML5, notamment les navigateurs pour les priphriques mobiles. Des blogs comme www.smashingmagazine.com
publirent des articles sur HTML5 et mme si tout ntait pas prt, HTML5 tait bien
l ! HTML5 stait chapp du zoo et ctait la course pour produire des navigateurs
HTML5. Nous tions ofciellement rentrs dans la priode de renaissance de HTML.
Lexcitation tait de retour !
HTML5 est un sujet si vaste que jai d choisir une thmatique centrale qui englobe
lessence du langage de balisage sans tomber dans une encyclopdie de rfrence
o jaurais tent de tout dcrire sans rien expliquer. Naturellement, les nouvelles
fonctionnalits devaient tre le sujet central de louvrage, mais elles napparaissent
quassocies avec dautres balises et les lecteurs qui dcouvraient HTML pour la
premire fois avaient besoin de notions fondamentales. Je devais aussi laisser de ct
les lments abandonns et montrer comment les lments conservs et les nouveaux
lments travaillent de concert. De plus CSS3 et JavaScript jouent un rle important,
mais ils ne sont abords que dans la mesure o ils ont un lien avec HTML5. Jai donc
pris la dcision de diviser HTML5 pour le webdesign en quatre parties qui constituent
lessentiel de HTML5.
Partie I : Le langage du Web

La premire partie de louvrage dbute par ltude des diffrents navigateurs compatibles HTML5 (y compris les navigateurs mobiles) et donne des pistes pour dmarrer
avec cette nouvelle version de HTML. Elle traite aussi des mthodes de travail avec
les diffrents types de chiers et de leur organisation pour que la cration des pages
Web et des sites seffectue rationnellement. Elle explique comment utiliser les balises
(lments) HTML5 avec les diffrents attributs que lon peut leur assigner. Vous
apprendrez aussi exploiter les styles CSS3. la n de la premire partie, vous saurez
utiliser la couleur et les diffrents codes couleurs avec HTML5 et intgrer des modles
de couleurs vos sites pour les amliorer.
Partie II : Conceptions de pages et de sites Web

La deuxime partie tudie en dtail la cration des pages Web et des sites Web.
une certaine poque, la seule proccupation des concepteurs et des dveloppeurs
concernait la manire dont une page safchait sur lcran dun ordinateur, puis tout
coup, les utilisateurs de tlphones mobiles ont commenc consulter des pages
Web et il a fallu revoir les stratgies de conception pour inclure les utilisateurs de
priphriques mobiles. Tout au long de ce livre, vous verrez des pages Web afches
sur des tlphones mobiles comme liPhone ou les tlphones Android. Outre les
copies dcran de navigateurs sous Windows 7 et Macintosh OS X, vous verrez donc
Introduction
des pages afches dans des navigateurs mobiles comme Mini Opera et Safari, ainsi
que dautres navigateurs mobiles dont vous ne souponnez mme pas lexistence.
Partie III : Multimdia : images, sons et vidos

Seul le chapitre 9 qui traite des images couvre un mdia qui tait dj disponible
dans les versions prcdentes de HTML. En revanche, les deux autres chapitres qui
traitent de laudio et de la vido constituent des nouveauts en HTML5. Certains
formats vido sont relativement nouveaux et ont t dvelopps pour tre utiliss
sur le Web. Tous les navigateurs HTML5 nutilisent pas les mmes formats vido,
mais heureusement, HTML5 possde les structures pour vrier les formats vido et
trouver ceux qui sont compatibles avec un navigateur donn. Outre les lments pour
la gestion de laudio et de la vido, jtudie galement dans cette partie les nouveaux
attributs HTML5 qui optimisent lemploi des mdias sur le Web.
Partie IV : Balises HTML5 dynamiques et un soupon de JavaScript

Llment canvas constitue lune des fonctionnalits les plus attendues de HTML5,
mais pour en tirer le meilleur parti, vous devez la fois matriser JavaScript et CSS3.
Dans cette partie, vous apprenez donc sufsamment de JavaScript associ au DOM
(Document Object Model) HTML5 pour travailler efcacement avec lobjet canvas et
CSS3. De la mme manire, HTML5 offre plusieurs nouveaux attributs de formulaires,
mais comme avec la plupart des formulaires, ils ont besoin dassistance pour traiter
linformation. Grce JavaScript, vous allez apprendre enregistrer les donnes
des formulaires dans les nouveaux objets de stockage en HTML5. Jtudie aussi les
nouveaux objets geolocation et leurs proprits pour vous montrer comment votre
page Web peut automatiquement charger une carte base sur les coordonnes de
votre position (latitude et longitude). Vous trouverez dans cette quatrime partie une
quantit de nouveauts qui ajouteront de nombreuses fonctionnalits vos sites.
propos de lauteur
Bill Sanders est lun des enseignants fondateurs de lUniversit de dveloppement

et de conception Web multimdia dHartford. Il y enseigne HTML5, la conception
dinterface et dinformation, CSS3, Flash, ActionScript 3.0, ASP.NET, C#, PHP et
la vido en streaming. Il a crit de nombreux livres sur la programmation Internet,
notamment sur JavaScript et les modles de conception ActionScript 3.0. Il rside
la campagne dans le Connecticut.
Remerciements
Jai pris conscience de lintrt immdiat de HTML5 grce Michael Wilson, Zach
Dunn et Nick Greeneld qui ont attir mon attention sur cette technologie. Ils mont
aussi prsent lquipe de Smashing Magazine et mont initi quelques tendances
mergentes. Chris Webb de chez Wiley ma aid dnir les orientations du livre et,
avec Margot Hutchinson de chez Waterside Productions, il ma permis de naliser cet
ouvrage. Ellie Scott de chez Wiley ma assist dans la prise en compte des nombreux
dtails qui aboutissent la cration dun livre. Elizabeth Kuball, qui est une correctrice
talentueuse, a clari et allg ma prose, alors que Harvey Chute, en tant que relecteur
technique, sest assur que tout le code fonctionnait correctement et ma propos
des suggestions damlioration. Pour nir, je souhaite remercier mes collgues de
lUniversit de dveloppement et de conception Web multimdia dHartford, John
Gray et Brian Dorn, qui mont aid quand jen avais besoin, notamment ce jour
critique o un point-virgule manquant avait fait des ravages dans un programme.
PREMIRE PARTIE
Le langage du Web
1
Introduction HTML5
Objectif
Ce chapitre est une prsentation gnrale des nouveauts de HTML5 (lments

ajouts, conservs et supprims). Pour le moment, la proccupation majeure reste
de trouver des navigateurs qui fonctionnent avec HTML5, de connatre ceux qui
sont en dveloppement et qui promettent une compatibilit HTML5 ainsi que la
manire dont ils ont commenc implmenter HTML5. Nous allons aussi tudier
les nouveaux navigateurs qui sont spciquement dvelopps pour les terminaux
mobiles, de manire ce que vous puissiez galement tester les pages HTML5 sur
ces priphriques. Pour commencer, tlchargez tous les navigateurs HTML5 tudis
dans ce chapitre de telle sorte que vous puissiez savoir ce que les utilisateurs verront
quand ils liront une page Web HTML5 que vous aurez cre.
1.1 UTILISATION DES BALISES

La plupart du contenu dInternet est cr en HTML (HyperText Markup Language).
Vous seriez sans doute surpris dapprendre que plusieurs applications que vous utilisez
quotidiennement (par exemple votre traitement de texte) ont aussi t cres avec
des langages de balisage. Cependant, comme pour tous les langages informatiques, on
ne voit en HTML que le contenu et pas le langage sous-jacent. Le langage fonctionne
comme la structure dun btiment : vous savez quelle se trouve sous la peinture et
les cloisons, mais vous ne pouvez pas la voir. Dans ce livre, je vais exposer en pleine
lumire le langage HTML et vous montrer comment lutiliser pour crer vos propres
structures.
12
Chapitre 1. Introduction HTML5
Si vous tes familier des versions prcdentes de HTML et XHTML, vous serez
capable dadapter vos connaissances HTML5. Et si vous tes totalement novice en
matire de HTML, vous trouverez HTML5 assez simple. Au fond, tout ce que vous
avez faire, cest de placer vos contenus entre une balise douverture et une balise de
fermeture, que lon appelle un conteneur, et qui stylera votre texte ou afchera vos
images et vos mdias sur la page Web. La gure 1.1 illustre le concept de conteneur :
Figure 1.1 Conteneurs en HTML5.
Par exemple, la ligne suivante :

<h1>Ceci est crit en gros.</h1>
dit linterprteur de votre navigateur de crer un texte crit en gros qui ressemble
ceci :
Ceci est crit en gros.

Le texte lintrieur des signes < > constitue le code. Dans cet exemple, h1 est
le code pour crire en gros. Les signes infrieur et suprieur disent o le conteneur
commence (<h1>) et o il se termine (</h1>). Tout ce qui se trouve lintrieur du
conteneur est congur avec la taille et le style de la balise, qui sont intgrs dans la
balise ou bien crs laide de CSS3.
Pour apprhender HTML5, le plus simple et le plus amusant est de crer de petits
exemples. Il vous suft pour cela de saisir le code qui est fourni dans ce chapitre dans
un diteur de texte comme le Bloc-notes si vous tes sous Windows ou bien TextEdit
si vous tes sur Mac. Enregistrez le chier avec lextension .html, puis ouvrez-le dans
un navigateur HTML5. Pour ouvrir une page Web, dmarrez votre navigateur et
slectionnez la commande Fichier Ouvrir chier (ou Ouvrir), et dsignez le nom
du chier (vous pouvez aussi faire un double-clic sur licne du chier pour ouvrir la
plupart des chiers HTML).
13
1.1 Utilisation des balises
1.1.1 Incorporation des nouveaux lments HTML5

Une balise est compose dun lment et dattributs. La balise est identie par son
lment, par exemple <h1> o h1 est llment. Quand on parle de balise, on fait en
gnral rfrence son lment, mais une balise est en fait constitue de son lment
et dattributs. Les attributs sont les diffrentes caractristiques ou les proprits dun
lment que lon peut coder pour modier le contenu du conteneur de la balise. Pour
le moment, nous allons simplement parler des lments, si bien que jutiliserai les
termes balise et lment de manire interchangeable.
An de vous donner un aperu des nouveaux lments en HTML5, le tableau 1.1
liste tous les nouveaux lments ainsi quune courte description de chacun dentre
eux. Tout au long de cet ouvrage, je donnerai de nombreux exemples et expliquerai
comment utiliser ces lments.
Tableau 1.1 Nouveaux lments en HTML5
lment
Description
Composition indpendante et autosuffisante au sein dun document
<aside>
Contenu indirectement li au contenu de larticle
<audio>
Conteneur de contenu sonore
<canvas>
Conteneur de contenu graphique
<command>
Commande que lutilisateur peut invoquer
<datalist>
Gnre une liste quand il est utilis avec llment <input> et son nouvel
attribut de liste
<details>
<article>
Fournit les dtails dun lment
<embed>
Plug-in ou contenu interactif externe
<figcaption>
Balise de lgende pour llment figure
<figure>
Contient un groupe de mdias et leur lgende
<footer>
Conteneur pour un pied de page dune section ou dune page
<header>
Conteneur pour un titre dune section ou dune page
<hgroup>
Titre de section avec plusieurs lments h1 h6 dun document
<keygen>
Reprsentation du contrle de gnrateur de paires de cls
14
Tableau 1.1 (suite)

<mark>
Chane de caractres dans un document, marque ou surligne pour tre

rfrence dans un autre document
<meter>
Conteneur pour une plage connue de valeurs (par exemple, utilisation du

disque)
<nav>
Reprsentation dune section dun document conue pour la navigation
<output>
Dfinit la progression dune tche de toute sorte
<progress>
Reprsentation de la progression dune tche (comme le pourcentage

complet dune opration de tlchargement)
<rp>
Indicateur en annotation Ruby (un langage de programmation) pour dfinir

ce quil faut afficher dans les navigateurs qui ne prennent pas en charge
llment <ruby>
<rt>
Marque le composant texte Ruby dune annotation Ruby
<ruby>
lment pour les annotations Ruby
<section>
Identificateur de thme pour le regroupement de contenus
<source>
Conteneur pour plusieurs spcifications de ressources de mdias
<summary>
Information sur un lment <details>
<time>
Conteneur pour un horodatage
<video>
lment pour chaner un fichier vido
<wbr>
Reprsentation dune possibilit de saut de ligne pour guider la csure de

mots longs ou de chanes de caractres
Certains des nouveaux lments, comme <video> et <audio> ajoutent des contenus
multimdias au HTML et reprsentent une avance importante de HTML. Dautres,
comme <ruby>, sont assez spcialiss et moins que vous nayez besoin de certains
caractres asiatiques, vous nutiliserez probablement pas cet lment.
Un grand nombre de ces nouvelles balises ont pour caractristique de travailler en
conjonction avec CSS3 ou JavaScript. Cependant, la plupart des nouveaux lments
fonctionnent toujours de manire autonome. Quand on ajoute un style ou certaines
fonctionnalits intressantes, il se peut que lon doive utiliser des rudiments de CSS3
15
ou de JavaScript, mais vous navez pas apprendre la totalit du langage JavaScript

ou mme CSS3 pour en proter.
Par exemple, le script suivant utilise le nouvel lment <datalist> qui ntait pas
disponible dans les versions prcdentes de HTML. Saisissez le code suivant dans
un diteur de texte, enregistrez-le dans un chier nomm Datalist.html, ouvrez-le
dans un navigateur et vous verrez comment il facilite la saisie des donnes (le chier
Datalist.html se trouve aussi dans les chiers de ce chapitre).
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Datalist</title>
</head>
<body>
<body>
<p>
<label> Quel langage suivant souhaitez-vous apprendre ?<br />
<input type="text" name="web" list="lang">
<datalist id="lang">
<option value="HTML5">
<option value="JavaScript">
<option value="jQuery">
<option value="ActionScript 3.0">
<option value="Java">
</datalist>
</label>
<br />
</p>
</body>
</html>
Quand on ouvre le chier dans le navigateur Opera, on obtient une liste droulante
comme celle qui est illustre la gure 1.2.
Figure 1.2 Utilisation de la balise <datalist> dans un navigateur Opera.
la diffrence des anciennes versions de HTML, lutilisateur voit safcher une

liste doptions.
16
1.1.2 Utilisation des balises des versions prcdentes de HTML

Mme si vous tes familier avec HTML4 (ou des versions plus anciennes de HTML),
vous serez surpris par le nombre dlments HTML que vous ne savez pas utiliser
ou dont vous navez jamais entendu parler auparavant. Par exemple, que signie la
balise <q> ? Quand est-elle utilise ? Si vous tes novice en HTML, nessayez pas de
mmoriser tous les lments du tableau 1.2, mais parcourez-le pour avoir une ide
gnrale des balises disponibles.
Tableau 1.2 Balises des versions prcdentes de HTML et conserves en HTML5
Balise
Description

Commentaire
<!DOCTYPE>
Type de document (un seul en HTML5)
<a>
Hyperlien vers une page ou une zone de page
<abbr>
Abrviation
<address>
Conteneur pour une adresse
<area>
Zone cliquable lintrieur dune image
<b>
Texte gras
<base>
URL de base pour tous les liens dune page
<bdo>
Direction daffichage du texte
<blockquote>
Bloc de texte
<body>
Dbut dun lment body
<br>
Saut de ligne
<button>
Bouton cliquable
<caption>
Lgende de tableau
<cite>
Conteneur pour une citation
<code>
Format de listing de code informatique
<col>
Dfinit les attributs des colonnes de tableau
<colgroup>
Conteneur pour les groupes de colonnes de tableau
<dd>
Conteneur pour une valeur de llment <dt>
<del>
Conteneur pour du texte supprim
<dfn>
Reprsentation de la dfinition dun terme
<div>
Dmarcation de division dun document
17
Tableau 1.2 (suite)

<dl>
En-tte dune liste dassociations
<dt>
Spcification dun nom dans un groupe nom-valeur (liste de descriptions)
<em>
Texte en emphase
<fieldset>
Conteneur pour un ensemble de contrles de formulaire
<form>
Conteneur pour un formulaire (en gnral avec des lments input)
<h1> to <h6>
Titre de niveau 1 6
<head>
Conteneur pour le premier code tre interprt par le navigateur
<hr>
Rgle horizontale (ligne)
<html>
Conteneur pour un document HTML
<i>
Texte en italique
<iframe>
Frame avec un cadre local (sous-fentre)
<img>
Conteneur image
<input>
Champ de saisie dans un conteneur de formulaire
<ins>
Conteneur pour dlimiter du texte insr dans un paragraphe
<kbd>
Conteneur pour la saisie au clavier de lutilisateur
<label>
Reprsentation dune lgende dans linterface utilisateur
<legend>
Titre dans un cadre de fieldset
<li>
Indicateur dlment de liste
<link>
Rfrence de ressource (par exemple, CSS)
<map>
Conteneur dimage cliquable
<mark>
Texte dans un contexte marqu pour du texte dans un contexte diffrent
<menu>
Conteneur pour une liste de commandes
<meta>
Conteneur pour des informations meta
<object>
Conteneur pour un objet incorpor (par exemple, un fichier SWF)
<ol>
Liste numrote
<optgroup>
Option de regroupement dlments dans une liste doptions
<option>
Conteneur pour des options individuelles dune liste droulante
<p>
Bloc de paragraphe
<param>
Paramtres de plug-in
<pre>
Format de texte prformat
18
Tableau 1.2 (suite)

<q>
Texte encadr par des guillemets
<samp>
Extrait de code informatique
<script>
Conteneur pour script CSS, JavaScript ou un autre type reconnu
<select>
Liste slectionnable
<small>
Texte affich en petit
<span>
Section dun document
<strong>
Texte enrichi qui ressemble au texte gras
<style>
Conteneur pour dfinition de style
<sub>
Texte en indice
<sup>
Texte en exposant
<table>
Dfinition de tableau
<tbody>
Dmarcation pour un bloc de lignes dun corps de tableau
<td>
Cellule de tableau
<textarea>
Conteneur de zone de texte
<tfoot>
Reprsentation dun bloc de lignes de synthses de colonnes dun tableau
<th>
Format den-tte de tableau
<thead>
Reprsentation dun bloc de ligne de synthses de colonnes dun en-tte

de tableau
<title>
Titre du document
<tr>
Dmarcation dune ligne de tableau
<ul>
Liste non ordonne
<var>
Style de variable dans une formule
La plupart des lments ayant le mme nom en HTML4 sont identiques en

HTML5, mais certains ont une signication lgrement diffrente. Les rgles de
certaines balises ont aussi t modies. Par exemple, dans la cration des tableaux, la
balise pour spcier une ligne, <tr>, ne ncessite plus une balise de fermeture </tr>.
Certains attributs dlments ont galement chang. Au fur et mesure que vous
apprendrez les nouvelles caractristiques de HTML5, vous constaterez quun grand
nombre dlments anciens ont de nouvelles caractristiques. Le script HTML de
19
tableau suivant fournit un nouvel exemple danciens lments. Saisissez ce texte dans
un diteur et enregistrez-le sous le nom NouveauAncienTableau.html, et ouvrez-le dans
le navigateur Opera.
<!DOCTYPE HTML>
<html>
<head>
<title>Tableau</title>
</head>
<body>
<table>
<caption>
=Types dlments=
</caption>
<thead>
<tr>
<th> Type
<th> Texte
<th> Image
<tbody>
<tr>
<th> Interface
<td> saisie de texte
<td> bouton
<tr>
<th> Liens
<td> soulign
<td> icone
</table>
</body>
</html>
La gure 1.3 illustre laspect du tableau.
Figure 1.3 Tableau cr en HTML5.
En gnral, on nutilise pas les tableaux pour mettre en forme du texte. Au lieu
de cela, les tableaux sont utiliss pour formater des donnes, comme celles dune base
de donnes ou des donnes cres dynamiquement par un autre programme tel que
JavaScript. En HTML5, cependant, les tableaux utiliss conjointement avec CSS3
offrent de meilleures possibilits de mise en forme quavec les versions prcdentes de
HTML et CSS.
20
1.1.3 Renoncement ou remplacement des balises abandonnes

Le dernier ensemble de balise (voir le tableau 1.3) semblera familier ceux qui
connaissent HTML4 et les prcdentes versions de HTML. Les balises suivantes
ont t abandonnes parce quelles posaient un certain nombre de problmes, ou elles
ont t remplaces par dautres structures qui grent mieux ce quelles faisaient.
Si vous tes novice en HTML, vous pouvez jeter un coup dil cette liste pour
avoir une ide de ce quil faut viter. En travaillant avec HTML, vous trouverez de
nombreux exemples sur le Web, et vous les incorporerez probablement dans votre
propre code. Cependant, dans la mesure o HTML5 est tellement nouveau, vous
constaterez que la plupart du code HTML a t cr avec danciennes versions qui
peuvent contenir des balises obsoltes et il faudra les remplacer par les nouvelles
structures.
Tableau 1.3 Balises abandonnes
Balise supprime
Supprime ou remplace
<acronym>
Remplace par <abbr>
<applet>
Remplace par <object>
<basefont>
Mieux gre par CSS
<bgsound>
Remplace par <audio>
<big>
Mieux gre par CSS
<blink>
Supprime en HTML5
<center>
Mieux gre par CSS
<dir>
Remplace par <ul>
<font>
Supprime en HTML5
<frame>
Supprime en HTML5
<frameset>
Supprime en HTML5
<isindex>
Remplace par <form>
<marquee>
Supprime en HTML5
<multicol>
Supprime en HTML5
<nobr>
Supprime en HTML5
<noframes>
Supprime en HTML5
<noscript>
Uniquement conforme la syntaxe HTML
<s>
Mieux gre par CSS
<spacer>
Supprime en HTML5
21
1.2 Choix dun navigateur pour interprter HTML5
Tableau 1.3 (suite)

<strike>
Mieux gre par CSS
<tt>
Mieux gre par CSS
<u>
Mieux gre par CSS
<center> est lune des balises les plus courantes qui ait t abandonne, mais il est
facile de centrer du texte avec un peu de code CSS, comme lillustre lexemple suivant.
Saisissez ce texte dans un diteur et enregistrez-le sous le nom CentrezMoi.html, puis
ouvrez-le dans un navigateur Web.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 {
text-align:center;
}
</style>
<title>Centrage avec CSS</title>
</head>
<body>
<h1>Les titres peuvent tre centrs</h1>
</body>
</html>
Quand vous testerez le code dans votre navigateur, vous verrez :
Les titres peuvent tre centrs

Cela peut sembler reprsenter beaucoup de travail pour obtenir un simple titre
centr, mais les pages sont gnralement courtes et vous pouvez centrer nimporte quel
titre avec une balise <h1> car vous avez modi le comportement de la balise. Vous
pouvez modier nimporte quelle balise avec CSS (nous en apprendrons plus sur CSS3
au chapitre 3, mais vous lavez dj utilis si vous voyez le titre au milieu de la page).
1.2 CHOIX DUN NAVIGATEUR POUR INTERPRTER

HTML5
Si vous voulez lancer une discussion anime avec des dveloppeurs HTML5, il suft
de poser la question suivante : Quel est le meilleur navigateur ? . Mais le plus
important nest pas le navigateur quutilisent les autres dveloppeurs, mais bien celui
des visiteurs de votre site Web. En gnral, les dveloppeurs utilisent le meilleur
22
navigateur jusqu ce quil en apparaisse un autre encore plus performant que celui
qui est employ par la moyenne des utilisateurs du Web. Si vous voulez que les gens
qui visitent votre site aient la meilleure exprience possible, essayez de dterminer
le navigateur quils utilisent majoritairement. Il est encore prfrable quand on
dveloppe des logiciels pour soi-mme ou un client de tester ses pages Web sur la
totalit des principaux navigateurs et au moins sur les deux plateformes principales,
Macintosh et Windows. Il existe aussi des navigateurs sous Linux, mais trs peu de
personnes utilisent leur systme Linux pour naviguer sur le Web.
Si lon examine les principaux navigateurs qui prennent en charge HTML5,
la plupart peuvent tre utiliss sous Windows ou Macintosh, mais il arrive quun
navigateur ncessite un systme dexploitation rcent. Dans ces conditions, si vous
avez un systme dexploitation ancien, assurez-vous que les prrequis du navigateur
sont compatibles avec votre systme dexploitation.
Il y a plusieurs annes, Microsoft a arrt le dveloppement dInternet Explorer (IE)
pour Macintosh, alors quApple a dvelopp une version Windows de son navigateur
Safari. Trois diteurs de logiciels, Google, Mozilla et Opera, ne dveloppent pas de
systmes dexploitation pour ordinateur, mais crent en revanche des navigateurs.
Dans cette section, je vais prsenter Firefox, Chrome, Opera, Safari et IE9.
Gardez lesprit que les fonctionnalits des navigateurs voluent avec le temps.
Ce que je dcris ici reprsente donc lactualit au moment o jai crit ces lignes, mais
cela a pu changer quand vous lirez ce livre.
1.2.1 Mozilla FireFox

Mozilla plonge ses racines dans le premier navigateur conu par Netscape, nomm
Netscape Navigator, qui est sorti au dbut des annes 1990. Il mettait en scne une
mascotte qui ressemblait la crature du lm Godzilla. Mosaic tait un navigateur
dvelopp lUniversit de lIllinois, qui devint plus tard Netscape Navigator. La
combinaison de Mosaic et de Godzilla donna Mozilla, qui est actuellement une socit
but non lucratif, la Fondation Mozilla. Firefox est le principal navigateur de Mozilla
qui prend en charge HTML5.
Outre le support des deux systmes dexploitation Windows et Macintosh, Firefox
prend galement en charge Linux. Si Linux nest pas considr comme un systme
dexploitation important pour les ordinateurs domestiques, il lest en revanche pour
les serveurs. Firefox est disponible gratuitement sur tous les systmes dexploitation.
La gure 1-4 illustre une copie dcran dune application HTML5 dans Firefox.
Vous noterez que la barre dadresse (la fentre o vous avez saisi lURL du chier
HTML) fait rfrence file:///C:... au lieu dune adresse http://. Cela est d
au fait que la page rside sur votre ordinateur. Vous pourrez aussi constater que la
page parat diffrente si elle est afche dans un environnement Windows que si elle
safche sur un Macintosh, quand bien mme il sagit du mme navigateur (la page
afche nest quun exemple et ne slectionne pas le navigateur votre place).
23
Figure 1.4 Mozilla Firefox.
1.2.2 Google Chrome

Google, clbre pour son moteur de recherche et ses cartes, a dvelopp son propre
navigateur, Chrome, en ayant ds le dbut comme proccupation la compatibilit
HTML5. Chrome est disponible gratuitement pour les systmes tournant sous Apple,
Windows et Linux. La gure 1.5 illustre exactement la mme page sur le mme
ordinateur que celle de la gure 1.4 (essayez de voir si vous dtectez les diffrences).
Mis part les diffrences de styles des deux navigateurs, il peut tre difcile de voir
les diffrences de la page. Avec une page simple, les diffrences subtiles naffecteront
pas laspect de la page Web, mais si vos pages sont plus grandes et plus complexes, de
petites diffrences peuvent apparatre.
Adobe propose un outil de dveloppement, Browserlab (disponible la page
https://browserlab.adobe.com), qui permet de voir laspect dune page Web dans
diffrents navigateurs en mme temps. Browserlab peut tre excut directement

partir dAdobe Dreamweaver CS5, mais vous pouvez aussi vous rendre sur la page Web
de Browserlab. An de visualiser un peu mieux les diffrences, comparons lexemple
24
Figure 1.5 Google Chrome affichant la mme page HTML5 que celle illustre la figure 1-4.
de page Web dans Firefox sur un Macintosh avec un ordinateur sous Windows 7 et
excutant Google Chrome. La gure 1.6 illustre laspect de la comparaison cte cte.
La diffrence est due en partie la manire dont Windows et Mac OS afchent le
texte et linterface utilisateur. Browserlab propose un autre mode dafchage appel
Pelure doignon qui superpose les deux captures dcran an de mieux voir o le texte
et linterface utilisateur apparaissent. La gure 1.7 illustre cette diffrence.
Plus la pelure doignon apparat oue, plus grandes sont les diffrences dafchage
de la page Web. la gure 1.7, vous pouvez constater que lafchage est trs ou,
ce qui signie que des diffrences importantes existent entre les navigateurs et les
systmes dexploitation.
1.2.3 Opera
Quand jai examin le navigateur Opera lpoque o je commenais tester diffrents
navigateurs, il semblait avoir les meilleures fonctionnalits HTML5. De plus, Opera
a un navigateur spcial, Opera Mini 5, que vous pouvez tlcharger gratuitement sur
votre terminal mobile. HTML5 fonctionne bien sur les terminaux mobiles, comme
25
Figure 1.6 Comparaisons de navigateurs dans Adobe Browserlab.
Figure 1.7 Affichage en mode Pelure doignon de navigateurs superposs.
vous pouvez le constater la gure 1.8, qui afche lexemple de page Web sur un
iPhone excutant le navigateur mobile dOpera.
Des versions compltes du navigateur Opera sont galement disponibles sous
Windows, Macintosh et Linux. Quand on cre des pages Web, on doit les planier pour
diffrentes tailles de terminaux. Comme vous pouvez le voir, lexemple dapplication
26
Figure 1.8 Navigateur Opera Mini 5.
que nous avons utilis fonctionne aussi bien sur un terminal mobile que sur un cran
dordinateur.
1.2.4 Apple Safari

Apple a dvelopp le navigateur Safari pour Macintosh et Windows ainsi que sur
les terminaux mobiles. des ns de comparaison, la gure 1.9 illustre laspect de
lapplication exemple sur Mobile Safari, le navigateur dvelopp par Apple pour
liPhone. Comparez cette copie dcran avec celle dOpera Mini 5 de la gure 1.8.
Figure 1.9 Navigateur Mobile Safari.
Tout comme il y a peu de diffrences entre lapparence des pages Web visualises
sur un ordinateur de bureau ou un portable, vous ne devriez pas voir beaucoup de
diffrences entre les afchages des divers navigateurs pour terminaux mobiles. Cest
27
une excellente chose ! Les dveloppeurs Web perdent beaucoup de temps tenter de
sassurer que leurs pages safchent de manire identique sur les diffrents navigateurs
et les diffrentes plateformes. Avec une implmentation commune de HTML5, cela
ne devrait plus tre un problme. Des fonctionnalits, comme la possibilit douvrir
des onglets, ou dautres caractristiques qui facilitent la navigation sur le Web, sont
intressantes pour autant que limplmentation de HTML5 par le navigateur soit
ralise selon les spcications dnies par le World Wide Web Consortium (W3C).
1.2.5 Microsoft Internet Explorer 9

Selon Microsoft, le navigateur IE9 est totalement compatible avec la norme HTML5.
La gure 1.10 illustre la page de test afche dans IE9.
Figure 1.10 Internet Explorer 9.
1.2.6 Prvisualisation daffichages diffrents

Comme vous lavez constat, les pages Web peuvent tre afches sur un certain
nombre de navigateurs et de systmes dexploitation diffrents. Les dveloppeurs Web
ont donc besoin de prendre en compte les caractristiques des terminaux sur lesquels
leurs pages seront visualises, comme un ordinateur de bureau ou bien un tlphone
mobile. Supposons que vous dveloppiez pour iPhone et iPad (ou nimporte quel autre
terminal mobile ou tablette) ; si vous pouvez prvisualiser votre travail cte cte,
vous serez en mesure de faire des comparaisons. Adobe Dreamweaver, un outil de
dveloppement de page Web, permet dafcher plusieurs terminaux de dimensions
diffrentes en mme temps (voir la gure 1.11).
Vous pouvez modier les dimensions du terminal. Par exemple, un Motorola
Droid afche un cran de 854 x 480 alors quun Sony VAIO UX afche un cran
28
Figure 1.11 Affichage dcrans multiples dans Adobe Dreamweaver.
de 1024 x 600. Lafchage dcrans multiples vous aide concevoir votre page et
loptimiser en fonction de vos diffrents utilisateurs. Trouver le meilleur compromis
est un art, mais la tche sera moins pnible si vous connaissez autant que possible
votre public et le matriel quil utilise pour visualiser les pages.
1.3 VOUS DE JOUER !

Pour commencer en douceur, ce premier exemple vous permet dajouter des informations sur vous-mme. Ne vous inquitez pas si vous ne comprenez pas tout (et
mme si vous ne comprenez rien). Vous devez remplacer les valeurs textuelles dans les
zones encadres par deux signes gal (=) qui se suivent et inscrire des informations
personnelles. Enregistrez cette page sur votre ordinateur sous le nom EnRoute1.html
(vous trouverez galement ce programme dans les chiers qui accompagnent cet
ouvrage).
1.3 vous de jouer !
29
<!DOCTYPE HTML>
<html>
<head>
body {
background-color:blanchedAlmond;
color:saddleBrown;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
margin-left:20px;
}
h1, h2 {
font-family:"Arial Black", Gadget, sans-serif;
color:midnightBlue;
}
h1 {
text-align:center;
}
h3 {
background-color:goldenrod;
color:ghostwhite;
font-size:11px;
font-family:"Arial";
}
</style>
<title>La roue</title>
</head>
<body>
<h1> ==Votre nom== : Le pro du dveloppement Web HTML5</h1>
<h2> ==Nom de votre socit== fournit des services Web complets</h2>
<ul>
<li>==Service 1==</li>
<li>==Service 2== </li>
</ul>
<h3> Tous les services sont garantis. Notre service contentieux est
joignable : ==URL o la plainte doit tre envoye== . </h3>
</body>
</html>
Testez cette page dans un navigateur et vriez quelle safche comme prvu.
Vous pouvez aussi regarder lafchage sur diffrents navigateurs (noubliez pas que les
navigateurs sont gratuits) et sur votre terminal mobile. Si vous voulez faire plus de
modications, rendez-vous la page suivante :
www.w3.org/TR/css3-color/#svg-color
Vous y trouverez une liste de noms de couleurs que vous pourrez utiliser avec
HTML5. Essayez de changer dans le code le nom des couleurs en choisissant des
couleurs qui vous plaisent.
2
Balises HTML5
Objectif
Les programmeurs classient les langages informatiques en langages de bas niveau
qui sont trs proches du langage binaire de lordinateur et en langages de haut
niveau qui sont proches du langage naturel. La version 5 du HyperText Markup
Language (HTML5) est un langage de trs haut niveau. Cependant, la premire
version de HTML avait trs peu de mots pour dcrire ce que les dveloppeurs et
les concepteurs dsiraient. Au fur et mesure de la croissance du Web, les exigences
sur HTML ont progress. Grce aux CSS (Cascading Style Sheet) et JavaScript,
les concepteurs ont pu amliorer la qualit des pages Web, mais il manquait encore
beaucoup de choses.
La cration des pages Web a t facilite par la sortie de plug-ins qui taient capables
dexcuter des langages comme Java et des applications ralises en Flash. En fait, la
plupart des navigateurs embarquaient la dernire version du plug-in pour Flash de
telle sorte que les utilisateurs pouvaient visualiser les pages cres avec Flash et Flash
Builder (Flex).
Les dveloppeurs Web en voulaient cependant toujours plus et souhaitaient excuter
HTML et CSS en mode natif partir du navigateur. Les diteurs de navigateurs
ajoutaient tranquillement JavaScript des fonctionnalits qui taient ncessaires
pour travailler avec les nouveaux lments de HTML5. Avec les nouvelles versions
de chaque navigateur, non seulement HTML5 tait implment totalement, mais
ctait aussi le cas de JavaScript et CSS3. Ce chapitre explique comment les diffrents
lments de HTML5 fonctionnent et comment ils se combinent avec CSS3 et
JavaScript.
32
Chapitre 2. Balises HTML5
2.1 ANALYSE SYNTAXIQUE DU CODE

Tt ou tard, vous entendrez lexpression analyse syntaxique du code (Ndt : en anglais,
on emploie le terme parsing pour dsigner lanalyse syntaxique ; le programme qui
ralise cette opration est appel parser ; comme le terme anglais est beaucoup plus
court, il est parfois utilis tel quel en franais et on parlera volontiers dun programme
qui parse un chier XML) propos des navigateurs et de HTML5, CSS3 et JavaScript.
Tout cela signie que le navigateur lit le code et linterprte pour raliser ce quon lui
dit de faire. Cest comme un interprte qui parle franais et russe : linterprte analyse
le russe de telle manire que le locuteur franais le comprenne et il analyse le franais
de telle sorte que le locuteur russe le comprenne. proprement parler, lanalyseur
est une partie de linterprteur du navigateur, mais pour des raisons pratiques, on se
reprsente lanalyseur comme tant impliqu dans la traduction des balises utilises
dans le chier Web.
Pour analyser correctement HTML5, deux choses sont ncessaires : vous devez
crire le code proprement et votre navigateur doit linterprter correctement. Cest
la raison pour laquelle les normes sont importantes. Fondamentalement, les normes
garantissent que lorsque vous crivez du code HTML5 selon les rgles tablies, votre
code ralise ce qui est prvu sur tous les navigateurs et tous les ordinateurs. En utilisant
HTML5, CSS3 et JavaScript avec les navigateurs que nous avons tudis au chapitre 1,
vous ne devriez pas avoir de mauvaises surprises sils sont totalement compatibles
HTML5.
Paradoxalement, les normes autorisent une grande part de crativit chez les
dveloppeurs et les concepteurs. Si vous voulez que votre page agisse dune certaine
manire en suivant les normes utilises par les navigateurs qui interprtent vos
crations, elle aura laspect attendu et se comportera comme prvu. Si vous-mme ou
le navigateur ne respectez pas les normes, votre crativit tombera leau (ce qui nest
bien entendu pas notre souhait).
2.1.1 HTML5 et les fichiers connexes

Pour crer un chier HTML5, comme cela a t vu au chapitre 1, il suft denregistrer
le code laide dun diteur de texte tel que le Bloc-notes (Windows) ou TextEdit
(Mac) et dutiliser lextension .html la n du nom du chier (MaPage.html, par
exemple). Lextension .html est importante car elle est reconnue en tant que page
Web et seul un navigateur peut lanalyser. Vous constaterez aussi que seul un petit
nombre dautres types de chiers sont reconnus par linterprteur du navigateur. Voici
les extensions les plus courantes que vous rencontrerez :
.jpg (chier graphique JPEG)
.gif (chier graphique GIF)
.png (chier graphique PNG)
.svg (chier graphique SVG)
.css (Cascading Style Sheet)
.js (chier JavaScript)
2.1 Analyse syntaxique du code
33
Parmi ces chiers, les plus importants sont les chiers graphiques car les outils
que vous utilisez pour vos images peuvent les enregistrer automatiquement sous des
formats diffrents que ceux employs pour le Web. Par exemple, Adobe Photoshop
enregistre automatiquement les chiers au format .psd, et Adobe Illustrator au format
.ai. Aucun de ces deux formats de chier graphique ne peut tre utilis avec ces pages
Web. Cependant, la plupart des outils de cration graphique peuvent enregistrer les
chiers dans les formats .jpg, .gif, ou .png si vous utilisez la commande Enregistrer
sous la place de la commande Enregistrer. Quand on utilise la commande Enregistrer
sous, on peut slectionner un format particulier parmi une liste de formats disponibles.
Rglage des paramtres dextension de fichier par dfaut sous Windows
Par dfaut, Windows 7 (et les versions prcdentes) masque les extensions de fichier.
Cela procure une apparence plus propre des noms de fichiers, mais si vous devez
choisir entre un fichier graphique ayant une extension .psd et un fichier ayant une
extension .png, vous devez pouvoir visualiser son extension. Voici comment procder :
Ouvrez le panneau de configuration.
Choisissez Apparence et personnalisation Options des dossiers Cliquez
sur longlet Affichage.

Dsactivez la case cocher Masquer les extensions des fichiers dont le type est
connu (voir la figure).
Figure 2.1 Dsactivation sous Windows de loption Masquer les extensions des fichiers
dont le type est connu.
34
Vous serez prsent capable de voir toutes les extensions de fichier. Ainsi, quand
vous voulez charger un fichier graphique, vous saurez sil sagit dun fichier .png, .jpg
ou .gif en regardant simplement le nom du fichier affich lcran.
Rglages des paramtres de TextEdit sur votre Mac
Si TextEdit sur votre Mac a ses paramtres par dfaut, vous risquez davoir des
problmes quand vous enregistrerez des fichiers au format HTML. Cela est d au
fait que le type de fichier par dfaut dans lequel TextEdit enregistre ses fichiers est
le format Rich Text Format (.rtf) et non pas le format texte (.txt). Au format .rtf,
votre texte est enregistr avec un autre code qui nest pas compatible avec les pages
Web. Voici ce que vous devez faire pour rgler ce problme :
Ouvrez TextEdit.
Dans le menu TextEdit, au sommet de lcran, choisissez Prfrences. La bote
de dialogue Prfrences apparat.

Slectionnez le bouton radio Format Texte (voir la figure).
Figure 2.2 Modification de loption Format RTF en Format Texte dans TextEdit.
prsent, quand vous crez une page HTML5 dans TextEdit, votre fichier est enregistr
par dfaut au format .txt et vous pouvez le modifier en format .html en utilisant la
commande Enregistrer sous.
2.2 Fonctionnement des balises
35
2.1.2 Fichiers fonctionnant avec le Web

Si vous tes nophyte dans lcriture des pages Web, vous devez dabord apprendre
reconnatre les chiers qui fonctionnent avec les pages Web. Par dfaut, HTML5
reconnat lextension .html et les extensions des trois types de chiers graphiques
que nous avons vus plus haut (.jpg, .png, et .gif). Vous verrez cependant parfois des
rfrences des chiers .css. Il sagit de chiers CSS externes, au format CSS3 ou des
versions plus anciennes. Il existe aussi des chiers JavaScript dots de lextension .js
qui peuvent tre rfrencs par une page Web.
Les navigateurs qui analysent les chiers HTML analysent galement les chiers
CSS et JavaScript. En fait, certains chiers HTML contiennent du code CSS et
JavaScript crit directement au milieu de balises HTML. Quand vous voyez la balise
<script>, vous constaterez la prsence dun script JavaScript ou CSS dans le conteneur
de script (entre la balise douverture <script> et la balise de fermeture </script>). Le
dveloppeur peut choisir de placer le code CSS et JavaScript dans des chiers externes
et de le charger avec la balise <link> pour le code CSS et la balise <script> pour le
code JavaScript.
Par exemple, le code suivant charge le chier externe .css joliStyle.css :
<link rel="stylesheet" type="text/css" href="joliStyle.css" />
Avec JavaScript, le chier externe .js est appel partir du conteneur <script>
plutt qu lintrieur dune balise <link>. Le code suivant charge un chier JavaScript
nomm faitMiracle.js :
<script language="JavaScript" src="faitMiracle.js" />
Cet ouvrage se concentre sur HTML5, mais vous aurez absolument besoin de CSS3
pour mettre en forme vos pages si bien que nous ltudierons galement. La plupart
du temps, vous verrez du code CSS incorpor dans du code HTML. Au chapitre 3,
vous en apprendrez plus sur lutilisation de CSS3 avec HTML5. Le chapitre 12 aborde
lutilisation de JavaScript avec les balises HTML5 et vous apprendrez exactement
crer et utiliser JavaScript avec HTML5.
2.2 FONCTIONNEMENT DES BALISES

Quand on crit du code en HTML5, on a besoin de savoir quels lments utiliser pour
obtenir ce que lon souhaite. Comme nous lavons vu au chapitre 1, on peut modier
la taille et lapparence dune police en utilisant la balise <h1>. Pour commencer, vous
nallez pas modier les balises avec une CSS. Quand on utilise <h1>, on peut sattendre
obtenir le mme texte crit en gros caractres toutes les fois (avec une CSS vous
pouvez modier la balise pour quelle afche du texte en petits caractres de couleur
verte si vous le souhaitez, mais il faudra attendre le chapitre 3 pour apprendre raliser
cela).
36
En bref, vos balises fonctionnent en divisant la page en sections qui commencent

par une balise douverture <lment> et se terminent par une balise de fermeture
</lment>. Vous pouvez crire toutes les pages HTML5 que vous voulez avec cette
mthode sans ajouter grand-chose dautre et vos pages fonctionneront parfaitement.
Naturellement, vous allez vouloir crer des pages un peu plus sophistiques et montrer
au navigateur de quoi vous tes capable, mais la plupart du temps vous allez vous
contenter dcrire des balises. Nous allons donc commencer par nous focaliser sur le
conteneur de base HTML5.
2.2.1 Balise HTML de base

Si vous tes familier de HTML4 et de la description du type de document, vous savez
dj que vous pouvez ajouter des informations dtailles qui indiquent au navigateur
quoi il doit sattendre. Ainsi, la premire balise que vous avez besoin de prendre
en compte nest pas vritablement une balise HTML, mais une balise qui dit au
navigateur que vous crivez en HTML5 et que vous nutilisez pas une des nombreuses
versions de HTML4 ou de XHTML. Voici cette balise :
<!DOCTYPE HTML>
Cest tout ! Il ny a rien de compliqu, mais cela annonce simplement au navigateur

quil doit sattendre un document de type HTML5. Chaque page Web que vous crez
doit commencer par cette balise, et vous navez pas besoin dune balise de fermeture.
Le point dexclamation (!) indique quil ne sagit pas dune balise HTML, mais de
quelque chose dun peu diffrent.
2.2.2 Description de la page avec des balises

Juste aprs la premire balise qui dit au navigateur ce quoi il peut sattendre,
on commence avec un conteneur HTML (tout ce qui est compris entre la balise
douverture et la balise de fermeture). Cette balise annonce le dbut du code HTML
qui se termine quand le navigateur rencontre la balise de fermeture. La balise de
fermeture HTML se trouve la n de chaque page HTML.
Aprs llment HTML on trouve le conteneur <head>. Vous pouvez vous reprsenter cette portion de la page comme une zone de maintenance. Tout ce qui se trouve
dans cette partie sera charg en premier, que ce soit ou non utilis dans le reste de
la page HTML. Pour commencer, tout ce qui va dans la zone head constitue le titre
de la page. Le titre apparat au sommet de la page Web quand on lexcute. Voici un
exemple de titre :
<title>Seriously Sweet Page</title>
Ce titre apparat dans les onglets et la fentre de la page. Si vous nen mettez
pas, vous obtiendrez un titre vide ou bien un titre par dfaut. La gure 2-1 illustre
lapparition du titre dans diffrents navigateurs.
37
Comme vous pouvez le voir, le titre Seriously Sweet Page apparat en diffrents
endroits sur les quatre principaux navigateurs. Sur certains, il apparat au sommet
de la fentre et sur longlet, sur dautres uniquement au sommet de la fentre, ou
bien encore uniquement sur longlet. Cela aide lutilisateur trouver sa page quand
plusieurs pages sont ouvertes simultanment (ou bien tout simplement rappeler
lutilisateur quelle page il consulte). On trouve beaucoup dautres contenus dans le
conteneur <head>, comme du code CSS et JavaScript, mais pour le moment, retenez
seulement quil faut inclure un titre.
Ensuite, la balise <body> dlimite le dbut du contenu de la page. Comme son

nom lindique (body signie corps en anglais), il sagit de la partie principale de toute
page Web, et seul le contenu lintrieur du conteneur <body> est visible sur la page.
Entre les lments douverture et de fermeture, on place tout ce que lon veut afcher
sur la page. Lensemble de balises suivant doit se trouver sur chaque page que vous
crez (vous pouvez en fait aussi lutiliser comme modle et lenregistrer quelque part
de manire le rutiliser plus tard pour ne pas avoir commencer avec une page de
code vide).
Figure 2.3 Le titre apparat sur les pages Web et les onglets.
<!DOCTYPE HTML>
<html>
<head>
<title>Le titre se place ici</title>
</head>
<body>
38
Le contenu se place ici : Ma page vraiment chouette

</body>
</html>
Au fur et mesure que vous progresserez dans la lecture de cet ouvrage, vous
rencontrerez de plus en plus dlments de structure inclure dans vos pages. Les
quelques lignes prcdentes vous permettent cependant de commencer crer vos
pages Web.
2.2.3 Identification des parties dune balise

Jusqu prsent, jai utilis les termes balise et lment plus ou moins de manire
interchangeable. Vous devez cependant noter quun lment nest quune partie de la
balise. Chaque balise comporte des attributs et les attributs ont des valeurs. Il est donc
prfrable de dnir une balise dans les termes suivants :
lment : le nom
Attribut : certaines caractristiques de llment
Valeurs : tat ou condition de lattribut
La gure 2.2 illustre les trois parties dune balise.
Figure 2.4 Parties dune balise.
Le nombre dattributs diffre en fonction des lments.

Selon llment, diffrentes sortes dattributs sont disponibles et en fonction de
lattribut, on peut appliquer plusieurs types de valeur. En rgle gnrale, on emploie des
guillemets pour encadrer les valeurs, y compris les nombres. Voici quelques exemples :
<form action="http://localhost/php/phpversion.php" method="post">
<input type="text" width="120" hidden="false">
<input type="submit" value="A lattaque">
Vous devez tre trs prudent dans le choix de ce que vous placez entre guillemets.
Par exemple, value="A lattaque" est autoris car attaque est un guillemet simple
(apostrophe). Cependant la valeur ""A lattaque," dit-il" ne fonctionnerait pas
car il y a deux paires de guillemets doubles.
39
Attribut language
Lattribut language (lang) nest pas utilis moins de crer des pages dans une autre
langue que langlais. La liste suivante fournit les valeurs dattribut dautres langues
dans lesquelles vous pouvez crire des pages Web :
Allemand : "de"
Arabe : "ar"
Chinois (mandarin) : "cmn"
Espagnol : "es"
Franais : "fr"
Hbreu : "he"
Hindi : "hi"
Japonais : "ja"
Portugais : "pt"
Russe : "ru"
la diffrence de certains attributs, lattribut lang peut prendre un trs grand

nombre de valeurs. Pour obtenir une liste complte de ces valeurs, consultez la
page www.iana.org/assignments/language-subtag-registry.
Un problme classique se produit quand vous avez une page qui contient une
rfrence entre guillemets sur deux parties diffrentes de la page. Au sein dun
paragraphe, on peut placer autant de guillemets que lon souhaite et ils safcheront
sur la page. Cependant, il nest possible dassigner quune seule paire de guillemets
la valeur dun attribut. Examinez le script suivant :
<!DOCTYPE HTML>
<html>
<head>
<title>Soyez attentif avec les guillemets</title>
</head>
<body>
<p>We read Emily Dickinsons "Wild nights! Wild nights!"<p/>
<input type="text" size="50" value="Emily Dickinsons Wild nights! Wild
nights!">
</body>
</html>
Dans le conteneur <p>, les guillemets identient le nom dun pome. Si le mme
texte sert de valeur un attribut, vous ne pouvez utiliser que des apostrophes
(guillemets simples) pour dlimiter le nom du pome. La gure 2.3 illustre lafchage
de la page dans un navigateur.
Quand vous assignez des valeurs des attributs, noubliez pas demployer des
guillemets pour la totalit de la valeur et dutiliser des apostrophes pour mettre en relief
des sections lintrieur de la valeur. Dune manire gnrale, vous vous faciliterez la
tche si vous vitez dutiliser des apostrophes quand vous assignez des valeurs des
attributs.
40
Figure 2.5 Utilisation des guillemets dans les pages et les attributs HTML5.
2.2.4 Rle de la balise de commentaire

Le rle de la balise de commentaire est daider le dveloppeur communiquer avec les
autres dveloppeurs, mais aussi dindiquer lobjectif de la page. Une page bien conue
contient des informations sur ce que fait la page, sur ce qui pourrait tre ajout ou
modi, ainsi que toute sorte dinformation qui aide les dveloppeurs examinant le
script dune page Web voir de quoi il retourne rapidement.
La balise de commentaire se compose en ralit de deux balises : une balise de
dbut et une balise de n. la diffrence des autres balises, la balise de commentaire
ne comporte pas de texte qui permette de lidentier. Le script suivant montre
lemplacement des commentaires et explique ce quils font.
<!DOCTYPE HTML>
<html>
<head>
<title>Utilisation des commentaires dans votre code</title>
</head>
<body>
<h2>Les commentaires sont important</h2>

Les commentaires aident vous souvenir et montrent aux autres votre projet de
conception de page.<br/>
Voici diffrentes utilisations :
<h5>1. Expliquer aux autres ce que vous faites.</h5>

<h5>2. Fournir des indications spcifiques sur les balises utiliser.</h5>

<h5>3. Lister les valeurs hexadcimales de votre palette de couleurs.</h5>

<h5>4. Ne pas oublier de recharger lordinateur portable.</h5>

<h5>5. Vous faire garder lesprit quil y a une vie aprs lordinateur.</h5>
41


</body>
</html>
Comme vous pouvez le voir quand vous chargez la page, aucun des commentaires
nest visible dans le navigateur, mais ds que vous retournez dans votre diteur de texte,
ils sont bien prsents. Vous pouvez mettre nimporte quel texte dans un conteneur de
commentaire et il napparatra pas.
On utilise souvent la balise de commentaire pour supprimer temporairement des
balises que lon utilisera plus tard. Ainsi, au lieu de supprimer les balises, il vous suft
de les encadrer par des balises de commentaire et de tester votre page pour voir si vous
la prfrez sans les balises en question. Si vous pensez que le rsultat est meilleur dans
sa forme originale, il ny a qu supprimer les balises de commentaire. Si la page parat
mieux sans les balises mises en commentaire, vous pouvez supprimer dnitivement
les balises devenues inutiles.
Supposons, par exemple que vous vous posiez la question de savoir si une page que
vous concevez pour un client est plus allchante avec un sous-titre et une note de bas
de page. Voici le code original code avec le sous-titre :
<!DOCTYPE HTML>
<html>
<head>
<title>Mise en commentaire</title>
</head>
<body>
<header>
<h1>Restaurant Chez Joe</h1>
<h2>*A survcu a toutes les inspections sanitaires depuis 2005</h2>
</header>
<section>
Joe cuisine les meilleurs repas du quartier ! La nourriture est dlicieuse et
bon march !
</section>
<footer>
<h6>*La table du bobo, dition 2010</h6>
</footer>
</body>
</html>
La gure 2.4 illustre le rsultat dans un navigateur.

Aprs avoir rchi la conception, vous suggrez au propritaire du restaurant, qui
est assez er de sa critique gastronomique, que le message commercial serait peut-tre
mieux peru si le sous-titre et la note taient supprims. Mais au lieu de supprimer
compltement les balises, vous les mettez simplement en commentaire de la manire
suivante :
<!DOCTYPE HTML>
<html>
<head>
42
Figure 2.6 Conception originale.
<title>Mise en commentaire</title>
</head>
<body>
<header>
<h1>Restaurant Chez Joe</h1>

</header>
<section>
Joe cuisine les meilleurs repas du quartier ! La nourriture est dlicieuse et
bon march !
</section>
<footer>

</footer>
</body>
</html>
Quand utiliser (et ne pas employer) des balises de commentaire

En gnral, on nutilise pas suffisamment les commentaires dans une page Web. Parfois,
quelques commentaires suffisent, et si une page nen a besoin que de quelques-uns,
il est inutile den rajouter. Dautres fois, la page a besoin de beaucoup plus de
commentaires quelle nen contient. Le nombre de commentaires ncessaires dpend
totalement de la taille et de lampleur du projet Web et du nombre de dveloppeurs
qui y sont impliqus.
Il arrive cependant que certains dveloppeurs se laissent emporter et produisent
tellement de commentaires que le code HTML devient illisible. Une page comportant
un long commentaire aprs chaque balise est contre-productive et nuit la lecture du
code. Si une page ncessite un grand nombre de commentaires, placez-les tous dans
un seul conteneur, ce qui permettra ensuite aux autres dveloppeurs de voir le code
HTML et de comprendre la manire dont il est utilis.
Une fois que vous avez effectu les changements en mettant en commentaire les
balises non souhaites, vous pouvez apprcier le rsultat (voir la gure 2.5).
43
2.3 Balises imbriques
Figure 2.7 Page avec le code mis en commentaire.
Si le client prfre quand mme la version originale, il vous suft de supprimer

les balises de commentaires pour retrouver la page dans son tat antrieur. Si vous
voulez tester plusieurs apparences diffrentes, vous pouvez aussi utiliser la balise de
commentaire.
2.3 BALISES IMBRIQUES

Quand on cre une page HTML, on peut imbriquer les balises, cest--dire que lon
peut placer un conteneur HTML5 lintrieur dun autre conteneur. En fait, jai
dj fait cela dans ce livre. Voici la rgle respecter : ajoutez une balise de n
lintrieur dun conteneur avant la balise de n du conteneur. Si vous crivez une
balise lintrieur dun autre conteneur de balise, assurez-vous de fermer le conteneur
interne avant de fermer le conteneur externe. Les exemples suivants vous permettront
de mieux comprendre :
Dans lexemple suivant, la balise <h1> ferme le conteneur externe <section> :

<section>
<h1>Gnial !
</section>
</h1>
Mais elle devrait tre comme ceci :

<section>
<h1>Gnial !</h1>
</section>
Ici, la balise <body> ferme le conteneur externe <html>. Le conteneur <h3> est
correct.
44
<html>
<body>Vraiment intressant
<h3>Noubliez pas de voter !</h3>
</html>
</body>
Voici la bonne version :

<html>
<body> Vraiment intressant
<h3> Noubliez pas de voter!</h3>
</body>
</html>
Ici, la balise <header> est ferme avant que la balise <nav> ne soit ferme :
<header>
<nav>
<a href="html5.org">HTML5</a> |
<a href="css3.org">CSS3</a>> |
<a href="php.net">PHP</a>
</header>
<footer>
<a href="html5.org">HTML5</a> |
<a href="css3.org">CSS3</a>> |
</nav>
</footer>
la place, il faut utiliser deux ensembles de conteneurs <nav> : un pour le header

et un autre pour le footer :
<header>
<nav>
<a href="html5.org">HTML5</a>
<a href="css3.org">CSS3</a> |
</nav>
</header>
<footer>
<nav>
<a href="html5.org">HTML5</a>
<a href="css3.org">CSS3</a> |
</nav>
</footer>
|

|

Parfois, quand on teste une page HTML5, on a un rsultat imprvu, voire rien du
tout. En ce cas, la premire chose vrier est limbrication des balises.
Si vous vous interrogez sur le sens du code , il sagit dun espace inscable
(le point-virgule fait partie de la balise). Vous pouvez vous reprsenter simplement ce
2.4 vous de jouer !
45
caractre comme un espace qui encadre la barre verticale (|) utilise pour sparer les
liens. Dans votre navigateur, vous verrez :
HTML5 | CSS3 | PHP
Quand on place du code lintrieur de balises <nav>, on peut facilement lidentier
comme du code de navigation. Cependant, comme toutes les autres balises, vous devez
faire attention aux rgles dimbrication utilises en HTML5.
2.4 VOUS DE JOUER !
La page HTML suivante comporte des erreurs qui ont besoin dtre corriges. Elle
commence par plusieurs balises qui sont vides ou partiellement compltes. L o cela
est ncessaire, vous devez ajouter les bonnes balises ou complter le texte. Parfois,
vous devrez fermer un conteneur qui a t ouvert (<balise>) ou bien en ouvrir un qui
a t ferm (</balise>). Et assurez-vous que les balises sont correctement imbriques
(Indice : la premire balise nest pas une balise HTML, mais une balise spciale qui
commence par un point dexclamation !).
<!
>
<html lang= >
<head>

body {
background-color:#F8AC00;
color:#29272a;
font-size:12px;
margin-left:20px;
}
h1 {
color:#29272A;
}
h2 {
text-indent:10px;
color:#0B0B0D;
background-color:#E27107;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
header {
text-align:center;
}
</style>
<title>==???===</title>
<
>
<body>
<header>
< >Mes prfrences</h1>
</header>
46
<section>
<h2>Ma musique prfre</h2>
==????==<br/>
==????==<br/>
==????==<br/>
< >Mes films prfrs</h2>
==????==<br/>
==????==<br/>
==????==<br/>
<h2>Mes ordinateurs prfrs</h2>
==????==<br/>
==????==<br/>
==????==<br/>
<h2>Mes missions prfres</h2>
==????==<br/>
==????==<br/>
==????== <br/>
<
>
<
>
<h5>Je ne suis pas responsable de mes gots. Cest prendre ou laisser. <
>
</footer>
</body>
</html>
Cet exercice devrait vous aider faire attention aux dtails dans lesquels, comme
chacun le sait, le diable se niche...
3
Balises de texte et un peu de
CSS3
Objectif
Une page Web est diffrente des pages que vous saisissez dans votre traitement
de texte. Les pages Web sont conues pour des crans dordinateurs, quil sagisse
dun ordinateur de bureau, dun portable ou mme dun terminal mobile. Une page
Web ne safche pas sur une feuille de papier au format A4, mais sur un dispositif
dafchage bien plus dynamique. La premire chose laquelle il faut donc penser est
laspect de la page sur un cran numrique.
3.1 PRINCIPES DE BASE

Avant de pouvoir grer du texte sur une page Web, il faut prendre en considration
ses lments fondamentaux qui incluent trois types dactions :
Afchage de texte,
Chargement et afchage dimages,
Liens vers dautres pages.
Pour afcher du texte, il suft de le saisir sur la page dans le conteneur. Vous pouvez
le styler avec la balise <h> comme nous lavons vu dans les chapitres prcdents, mais
le texte de base a seulement besoin dtre prsent au sein dune balise <body>.
Le chargement et lafchage des images utilisent la balise <img> avec le format
suivant :
48
Chapitre 3. Balises de texte et un peu de CSS3
<img src=nomImage.png>
Vous pouvez uniquement utiliser les chiers .jpg, .png ou .gif avec llment img.
Lattribut src fait rfrence la source de limage. Llment img a dautres attributs,
mais le seul attribut indispensable pour afcher une image sur la page est src pour que
le chier puisse tre localis.
Dans cet ouvrage, le terme URL est souvent employ pour faire rfrence
lemplacement dun chier, quel que soit le type de chier impliqu. URL, qui est
lacronyme dUniform Resource Locator (localisateur de ressource uniforme), est un
protocole standard pour trouver et utiliser diffrents types de chiers.
Enn, un lien vers une autre page utilise le format suivant :
<a href=autrePage.html>Lien vers une page</a>
La balise href renvoie la rfrence hypertexte de la page chane, ou exprim

en termes plus simples, son adresse. Comme pour lemplacement de la source dune
image, vous verrez que le terme URL est aussi utilis pour ladresse du lien.
Avant de continuer, vous devez encore savoir une autre chose : la dclaration du
type de document (<!DOCTYPE HTML>) de la toute premire ligne est importante et
il ne faut pas loublier. Il ne faut cependant pas non plus oublier la dclaration du
type dencodage des caractres. Il est utilis pour indiquer au navigateur Web le jeu
de caractres quil doit employer, comme lalphabet de A Z, les caractres hbreux,
les caractres japonais, les caractres cyrilliques ou tout autre jeu de caractres. Il
existe plusieurs manires de dnir le jeu de caractres, mais ce livre utilise le format
suivant :
<meta http-equiv=Content-Type content=text/html; charset=UTF-8>
Vous devez toujours spcier lencodage des caractres. Bien que lutilisation de
la balise <meta> soit un peu contraignante, vous pouvez copier cette ligne et la coller
dans toutes vos pages Web. Si vous ne le faites pas, vous vous exposez des problmes
de scurit, ce qui nest bien entendu pas souhaitable.
Il est toujours possible de bricoler la hte une page Web, mais le rsultat
est souvent dcevant et les visiteurs de votre site risquent de ne jamais y revenir.
Examinons une page Web sans structure mais qui en contient cependant les lments
fondamentaux :
<!DOCTYPE HTML>
<html>
<head>
<title>Principes de base</title>
</head>
<body>
Ceci est du texte. Il ny a pas besoin de balise pour crire du texte.
49
3.1 Principes de base
<a href=autrePage.html> Cliquez ici pour une autre page </a>

<img src=logo.png>
</body>
</html>
Comme vous pouvez le voir la gure 3.1, tout est en dsordre. Limage apparat
au milieu de la page, au-dessus du lien (texte soulign en bleu), ce qui nest gure
conforme aux usages.
Figure 3.1 lments de base dune page Web.
Quand on cre une page Web, les liens doivent tre organiss selon un systme
de navigation qui est cens faciliter la consultation du site. Dans la page illustre la
gure 3.1, le lien qui est perturb par limage semble faire partie du texte plutt que
dun systme de navigation.
3.1.1 Un peu plus dorganisation
Une des conventions de base de la conception Web est de placer le logo dans le
coin suprieur gauche de la page. De plus, les pages Web placent les liens de manire
organise selon un systme cohrent de navigation. En ajoutant deux balises de plus,
vous pouvez amliorer lorganisation de vos pages :
<br> : Gnre un saut de ligne
<wbr> : Gnre un saut de ligne conditionnel
Un saut de ligne (<br>) force un retour la ligne du texte. Vous pouvez vous le
reprsenter comme un espace unique entre les lignes, ou si vous tes de la vieille cole,
comme un retour de chariot. HTML5 a ajout quelque chose de nouveau qui sappelle
opportunit de saut de ligne. Il arrive que lon ait de trs longs mots, notamment dans
les URL ou les adresses lectroniques. Llment wbr ne force pas de saut de ligne,
mais vous pouvez placer la balise <wbr> lendroit o vous souhaiteriez que le mot
soit coup au cas o il devrait ltre si la page est redimensionne. Cette prise en
compte est particulirement importante pour les terminaux mobiles car ils ont des
crans de petite taille. Par exemple, supposons que vous ayez une trs longue URL qui
est afche sous cette forme :
www.chezjoerestaurantgastronomiquepanoramique.com
50
Si le lien nest pas dcoup, et si la page est redimensionne, vous aurez un grand
trou dans le texte ou bien le mot sera dcoup un endroit qui nest pas souhaitable.
La balise <wbr> vous aide dcouper le texte l o vous le souhaitez. Examinez le
script suivant (SautsDeBase.html dans les chiers de ce chapitre), qui utilise les deux
balises de saut de ligne :
<!DOCTYPE HTML>
<html>
<head>
<title>Ajout de sauts de ligne</title>
</head>
<body>
<img src="logo.png"><br>
Ceci est du texte. Il ny a pas besoin de balise pour crire du texte.<br>
<br>
Il dit, "Il y a parfois de trs longs mots dont on souhaite sassurer quils
sont coups au bon endroit. Par exemple, si vous avez une trs longue URL
comme
www.chez<wbr>joe<wbr>restaurant<wbr>gastronomique<wbr>panoramique<wbr>.com, et
que vous tes oblig de dcouper lURL, il est souhaitable que la coupure ne se
fasse pas nimporte comment."<br><br>
Il dit, "Il y a parfois de trs longs mots dont on souhaite sassurer quils
sont coups au bon endroit. Par exemple, si vous avez une trs longue URL
comme www.chezjoerestaurantgastronomiquepanoramique.com, et que vous tes
oblig de dcouper lURL, il est souhaitable que la coupure ne se fasse pas
nimporte comment."<br><br>
<a href="autrePage.html"> Cliquez ici pour une autre page </a>
</body>
</html>
En ajoutant les deux balises de saut de ligne, la page a un bien meilleur aspect. Le
paragraphe qui nutilise pas la balise <wbr> a un trou lemplacement o lURL longue
na pas t dcoupe. La gure 3.2 illustre laspect de la page.
Bien que cela ne soit toujours pas parfait, cest dj bien mieux que la page originale,
mme si deux nouveaux paragraphes ont t ajouts. Limage se situe dans le coin
suprieur gauche (comme cest le cas pour la plupart des logos), les paragraphes sont
spars par des sauts de ligne et dans le premier paragraphe qui emploie une URL
longue, les sauts seffectuent aux endroits spcis par la balise <wbr>.
3.1.2 Rflchir la structure

Il est dsormais temps dentamer une rexion sur la structure de vos pages Web.
En ajoutant du texte, des images et des liens, la page gagne en fonctionnalits et en
contenu. Vous devez donc commencer rchir des choses comme les titres, la
navigation et le positionnement (qui va bien au-del du logo dans le coin gauche).
Commencez par tablir une maquette simple. Utilisez une feuille pour coucher sur
le papier vos ides et raliser un croquis de votre page Web (prenez pour linstant du
papier et non pas un logiciel graphique). La gure 3.3 illustre un exemple.
51
3.1 Principes de base
Figure 3.2 Ajout de sauts de ligne.
Figure 3.3 Croquis de la structure de votre site.
En vous basant sur les balises que nous avons tudies jusqu prsent, serez-vous
capable de crer une page partir de votre croquis ? Le seul attribut qui manque est
celui qui permet dhabiller le texte autour de limage. Lattribut align de llment img
ralisera cela. Dans cet exemple, limage sera gauche et le texte sera droite, si bien
que la ligne suivante fera laffaire :
52
<img src=kid.png alt=kid align=left>
Vous avez peut-tre remarqu que lattribut alt a galement t inclus. Cet attribut
permet aux utilisateurs de savoir quoi sattendre si limage met du temps se charger.
Ainsi, avec quelques balises et lajout dun attribut, le prochain script cre
parfaitement une page qui correspond la structure du croquis ralis la gure 3.3.
Comme vous le constaterez dans le code suivant (Maquette2Web.html disponible
dans les chiers de ce chapitre), jai utilis un signe dise (#) la place dune vritable
URL dans les liens de navigation. Le signe dise joue le rle dun emplacement rserv
quand vous travaillez sur la structure ; il fonctionne exactement comme une vritable
URL sauf quil ne va nulle part et ne provoque pas de message derreur.
<!DOCTYPE HTML>
<html>
<head>
<title>De la maquette la page Web</title>
</head>
<body>
<img src="logo.png" alt="logo"><br>
<a href="#">Jouets</a> | <a href="#">Vtements</a> | <a
href="#">Sports</a> <br>
<br>
Le paradis des enfants<br>
<br>
<img src="kid.png" alt="kid" align="left"> Les enfants, cest une affaire
srieuse. Ils ont besoin de jouets qui soient la fois srs et ducatifs. Les
jouets doivent tre amusants tout en dveloppant la crativit des enfants. Il
ny a pas de raison de sacrifier la scurit pour privilgier lamusement. Les
enfants ont besoin de beaucoup dhabits car ils grandissent si rapidement. Et
ils ont besoin de pratiquer une activit physique pour combattre lobsit et
toutes les maladies qui y sont lies. <br>
<br>
<a href="#">Jouets</a> | <a href="#">Vtements</a> | <a
href="#">Sports</a>
</body>
</html>
Notez que nous navons utilis aucun des lments H voqus dans les deux
prcdents chapitres. Cela est d au fait que je les traite de manire dtaille dans
la prochaine section. La gure 3.4 illustre bien le fait que la page se rapproche
troitement du croquis de la gure 3.3.
prsent, la page Web illustre la gure 3.4 a plus de structure que nimporte
lequel des exemples prcdents. Les barres de navigation au sommet et en bas de la
page sont pratiques pour lutilisateur, mais elles mriteraient peut-tre dtre centres
sur la page. La barre de navigation suprieure devrait tre centre au sommet de la
page, juste ct du logo. Le texte qui est coinc contre limage pourrait tre un peu
dcal et, bien entendu, le titre devrait tre dans un style diffrent (taille et police de
caractres). Le site est galement assez ennuyeux, ce qui est paradoxal tant donn
3.2 Renforcement de la structure HTML5
53
Figure 3.4 Structure de base dune page. David Sanders
quil est conu pour des enfants. Mais comme la structure est en constante progression,
vous pourrez rgler tous ces dtails au fur et mesure que vous apprendrez utiliser
dautres techniques pour amliorer le style.
3.2 RENFORCEMENT DE LA STRUCTURE HTML5

Dans la section prcdente, nous avons tudi llment wbr qui est nouveau en
HTML5. Cette section va examiner en dtail lutilisation des balises familires <h..>
et de certaines balises associes qui servent structurer du texte. Nous avons vu
comment dmarrer en crant la main une bauche de la page souhaite pour ensuite
limplmenter dans un script HTML5. Le fait de partir dune bauche concrte pour
passer un plan densemble des blocs facilite la comprhension de la manire dont
HTML5 est organis en blocs. Nous commencerons par examiner le bloc de texte,
sujet que nous avons dj abord dans les deux premiers chapitres avec les balises <h1>,
<h2>, et les autres lments h. La gure 3.5 illustre lorganisation en blocs.
54
Figure 3.5 Organisation des blocs de texte.
En termes dorganisation de la page, la mise en page des diffrents niveaux

dlments h est ralise par la balise HTML5 <hgroup>. Examinez par exemple la page
Web suivante (HelementOrg.html disponible dans les chiers du chapitre) qui reprend
un texte du philosophe Wittgenstein (qui semblait crire avec des balises h en 1918
quand il a rdig le Tractatus Logico-Philosophicus) :
<!DOCTYPE HTML>
<html>
<head>
<title>Tractatus logico-Philosophicus</title>
</head>
<body>
<h1>Tractatus logico-Philosophicus</h1>
<h1>by Ludwig Wittgenstein</h1>
<hgroup>
<h2>1 The world is all that is the case.</h2>
<h3>1.1 The world is the totality of facts, not of things.</h3>
<h4>1.11 The world is determined by the facts, and by their being all the
facts.</h4>
<h4>1.12 For the totality of facts determines what is the case, and also
whatever is not the case.</h4>
<h4>1.13 The facts in logical space are the world.</h4>
3.2 Renforcement de la structure HTML5
55
<h3>1.2 The world divides into facts.</h3>

<h4>1.21 Each item can be the case or not the case while everything else
remains the same.</h4>
</hgroup>
</body>
</html>
Si lon regarde la page Web, on peut voir o les diffrents lments h attribuent
des tailles diffrentes chaque partie, mais on ne voit pas les indentations que
Wittgenstein a utilises dans son manuscrit original. La gure 3.6 illustre la page Web
sur un tlphone mobile (quoi que vous pensiez de Wittgenstein, son style fonctionne
merveille sur les crans des terminaux mobiles).
Figure 3.6 Mise en page dun plan laide de balises <h> sur iPhone.
Si vous examinez le manuscrit original de Wittgenstein, vous constaterez que son

style dcriture utilisait un plan indent qui apparaissait sous la forme suivante :
1 The world is all that is the case.
1.1 The world is the totality of facts, not of things.
1.11 The world is determined by the facts, and by their being all the facts.
1.12 For the totality of facts determines what is the case, and also whatever is not the
case.
On peut rgler cela si lon veut en ajoutant des indentations aux balises <h..>. On
pourrait faire a en ajoutant des marges laide de CSS3 comme vous le verrez dans
la section suivante. Le but des lments h et <hgroup> nest cependant pas de dnir
des indentations, mais de faciliter la structuration en niveaux hirarchiques. La balise
56
<hgroup> dnit la balise <h..> de niveau le plus lev dans le conteneur hgroup en
tant qulment de plan. Par exemple, puisque Wittgenstein a entirement hirarchis

le Tractatus Logico-Philosophicus, lutilisation de llment hgroup sur luvre complte
produirait exactement le plan qui gure dans le rsum de luvre.
1 The world is all that is the case.
2 What is the case a fact is the existence of states of affairs.
3 A logical picture of facts is a thought.
4 A thought is a proposition with a sense.
5 A proposition is a truth-function of elementary propositions. (An elementary
proposition is a truth-function of itself.)
6 The general form of a truth-function is [p, E, N(E)]. This is the general form of a
proposition.
7 What we cannot speak about we must pass over in silence.
Llment hgroup est li lalgorithme de hirarchisation de HTML5, et bien quil
soit peu probable que vous lutilisiez pour des crivains tels que Wittgenstein, il est
utile pour vous aider rchir votre page en termes de structure au sein dune
page HTML5. Vous pouvez vous reprsenter la balise <hgroup> comme un masque qui
couvrirait dautres lments h qui seraient dessous llment de niveau le plus lev
dans le conteneur hgroup. Dans notre exemple, les lments h3 et h4 ne sont masqus
que si llment h2 est reconnu comme faisant partie du plan.
3.3 AJOUT DE STYLE UN TEXTE LAIDE DE CSS3

Dans cet ouvrage, quand nous ferons rfrence la norme Cascading Style Sheet, il
sagira de CSS3. Cela est d au fait que HTML5 et CSS3 ont des relations troites,
mais comme pour les autres lments tudis dans ce livre, il y a un hritage qui a t
intgr dans les versions les plus rcentes de HTML et CSS. Tout comme en HTML5,
il y a un mlange dancien et de moderne dans CSS3. Dans ces conditions, si vous
tes familier des anciennes versions de CSS et que vous voyez les mmes proprits
en CSS3, considrez quil sagit dune fonctionnalit qui a t maintenue.
3.3.1 Stylage des lments HTML5 avec des proprits CSS3

Dans les chapitres 1 et 2, vous avez vu des exemples de CSS3, mais je ne vous ai
fourni aucune explication sur la manire dajouter un nouveau style un lment
existant. Nous allons ici mettre laccent sur lajout de style aux lments h. Dans les
trois chapitres suivants, nous irons bien plus loin dans lutilisation de CSS3, mais pour
linstant nous allons tudier les bases de lincorporation de CSS3 dans HTML5.
Toute feuille de styles peut tre ajoute de trois manires diffrentes :
Vous pouvez utiliser la balise <style> pour dnir les proprits des lments de
la page HTML5.
3.3 Ajout de style un texte laide de CSS3
57
Vous pouvez utiliser des feuilles de styles externes qui sont des chiers texte o
lon stocke des styles que lon veut rutiliser.

La plupart des dveloppeurs et des concepteurs professionnels prfrent les feuilles
de styles CSS3 externes car la mise au point des styles prend beaucoup de temps.
Quand on veut faire une modication de la conception dun site Web, on peut
raliser la modication de plusieurs pages qui utilisent une feuille de styles externe
en changeant uniquement la feuille de styles. Cest bien plus efcace que davoir
modier les attributs <style> de chaque page Web individuelle.
Vous pouvez aussi ajouter des styles sans recourir une feuille de styles en utilisant
des styles en ligne. Un style en ligne est similaire la technique Brisez la glace en
cas durgence ! . Une belle page a forcment une feuille de styles intgre, mais il
arrive parfois que des changements doivent soprer en urgence et au lieu de modier
la feuille de styles, on cre le style avec une balise.
Feuilles de styles incorpores
Une feuille de styles incorpore nest que lajout dune feuille de styles directement
dans le script HTML5. Dans la balise <head> de la page, ajoutez la feuille de styles
avec un conteneur <style>. Placez llment que vous voulez styler dans le conteneur
de style, puis ajoutez les valeurs la proprit styler. La gure 3.7 indique le format
gnral.
Figure 3.7 Feuille de styles incorpore.
Chaque lment a un ensemble unique de proprits et chaque proprit a des

valeurs qui peuvent tre assignes. Quand on change la valeur de la proprit, cette
valeur apparat dans le texte lintrieur du conteneur de llment. Si vous modiez
la couleur du texte en rouge, alors tout le texte lintrieur du conteneur de llment
sera afch en rouge. Le script suivant (CSS3polices.html disponible dans les chiers
du chapitre) propose un exemple.
58
<!DOCTYPE HTML>
<html>
<head>
body {
background-color:#fbf7e4;
margin-left:20px;
color:#8e001c;
}
h1 {
background-color:#8E001C;
color:#e7e8d1;
text-align:center;
}
h2 {
background-color:#424242;
color:#d3ceaa;
margin-left:5px;
}
</style>
<title>CSS3-Feuille de styles incorpore</title>
</head>
<body>
<h1>Ceci est un grand titre</h1>
<h2> Voici le deuxime titre</h2>
Le corps du texte est styl avec une marge gauche et une police particulire
qui est en couleur. Vous noterez que la couleur de fond du titre stend sur
toute la largeur de la page. Vous remarquerez aussi quun espace inscable (&
nbsp;) donne au deuxime titre, h2, une lgre indentation de telle sorte quil
reste " lintrieur" de la couleur de fond. On na pas ce problme avec le
titre h1 car il est centr.
</body>
</html>
La gure 3.8 illustre le rsultat de la page style.

Vous devez tre conscient que quand on utilise des feuilles de styles, on doit faire
attention aux petits dtails, comme ajouter deux accolades, sparer la proprit de ses
valeurs avec le caractre deux-points, et terminer chaque valeur de proprit par un
point-virgule. Si votre feuille de styles CSS3 ne fonctionne pas comme elle le devrait,
vriez tous ces petits dtails de syntaxe.
Quand on utilise des couleurs de fond, elles se propagent souvent sur la totalit de
la page. Certains lments en ligne comme <span> peuvent tre utiliss pour contenir
la couleur de fond dans le texte qui est styl. Avec les couleurs de fond qui sont
justies gauche ou droite, il faudra ajouter un espace inscable ( ) pour que
la couleur de fond ne dteigne pas sur toute la page.
59
Figure 3.8 Texte styl avec CSS3.
Feuilles de styles externes

Avec toutes les combinaisons de styles diffrents (auxquelles il faut ajouter les
variations des formats dcran des ordinateurs, des portables et des terminaux mobiles),
vous devez prendre en compte le fait que la cration dune bonne feuille de styles
ou dun ensemble de feuilles de styles peut reprsenter un travail considrable. En
enregistrant votre cration CSS3 dans un chier texte, vous pouvez rutiliser votre
feuille de styles aussi souvent que vous le souhaitez. De plus, vous pouvez copier vos
CSS incorpores et les coller facilement dans un chier texte pour lenregistrer dans
un chier .css.
Prenons par exemple une palette de couleurs avec un jeu de couleurs qui fait partie
de la charte graphique dun de vos clients, Mighty Smite Web Development (cela
a pour consquence que vous ne pouvez utiliser que le jeu de couleurs qui vous a
t fourni). Vous commencez avec les couleurs suivantes qui font partie de la charte
graphique de lentreprise :
#3C371E, #8C5F26, #BCA55F, #F2CC6E, #F26205
La couleur de fond doit tre #F2CC6E. Vous navez pas savoir ce quest cette
couleur et vous devez vous contenter de savoir que lentreprise a dcid que ce serait
la couleur de fond, les concepteurs soccupant du reste.
On vous a de plus signi que lentreprise souhaitait une version qui safche la
fois sur un tlphone et sur un ordinateur de bureau. Cela signie que vous allez avoir
besoin de deux feuilles de styles diffrentes. Vous vous proccuperez plus tard de savoir
comment le navigateur sait que lutilisateur afche la page sur un ordinateur ou sur un
tlphone.
Seule la balise suivante est ncessaire :
<link rel=stylesheet type=text/css href=mightySmiteSmall.css />
60
Cette balise va dans le conteneur <head> o la balise <style> allait avec le code
CSS3. Le code CSS3 se trouve prsent dans un chier spar. Vous noterez que
la balise <link> contient un attribut href avec la valeur mightySmiteSmall.css. Il
sagit du nom du chier CSS3 (que vous trouverez dans les chiers de ce chapitre). La
mention Small indique quelle est conue pour les terminaux mobiles. Il faudra crer
un autre chier CSS3, mightySmiteLarge.css, pour les ordinateurs qui ne sont pas des
terminaux mobiles.
Pour crer un chier CSS3, il suft de saisir le code CSS3 dans un diteur de texte
ou dans une application de dveloppement Web et de supprimer les balises <style>.
Le code suivant illustre lexemple que nous allons utiliser :
@charset UTF-8;
/* CSS Document */
/*3C371E,8C5F26,BCA55F,F2CC6E,F26205 */
body
{
background-color:#F2CC6E;
font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;
color:#8C5F26;
font-size:11px;
max-width:480px;
}
h1
{
color:#BCA55F;
background-color:#3C371E;
font-family:Arial Black, Gadget, sans-serif;
text-align:center;
}
h2
{
color:#F26205;
font-family:Lucida Sans Unicode, Lucida Grande, sans-serif
}
h3
{
color:#3C371E;
font-family:Tahoma, Geneva, sans-serif;
}
La premire ligne indique au navigateur quil sagit dun jeu de caractres UTF-8 et
les deux lignes suivantes sont des lignes de commentaires. Elles diffrent des lignes de
commentaires en HTML5, mais elles fonctionnent de manire identique. La deuxime
ligne de commentaire est un moyen pratique de mmoriser la palette de couleurs et
peut gagner du temps lors de la dnition de la feuille de styles.
Pour tester cette version mobile du code CSS3, nous utilisons le chier HTML5
ExternalSmall.html qui est disponible avec les chiers de ce chapitre :
<!DOCTYPE HTML>
<html>
<head>
61
<link rel=stylesheet type=text/css href=mightySmiteSmall.css />

<title>Mighty Smite Sofware Test Sheet</title>
</head>
<body>
<h1>Mighty Smite Software Conglomorate</h1>
<h2>This is an h2 head</h2>
<h3>Heres an h3 head</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut abore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco aboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est aborum.
</body>
</html>
Tous les styles du chier CSS3 sont utiliss an de tester leur apparence et le corps
du texte commenant par Lorem ipsum est un texte de remplissage qui est utilis
pour avoir une ide de laspect des blocs de texte (a doit tre un bon texte puisquon
lutilise depuis le seizime sicle).
Dans la dnition du chier CSS3, le seul paramtre qui cible spciquement les
terminaux mobiles est lattribut width de llment body. Il est paramtr 480 px
car cest la largeur de lcran de liPhone qui est utilis pour les tests. Cependant,
en fonction de la manire dont les utilisateurs tiennent en main leur tlphone, ils
peuvent obtenir des rsultats diffrents. Les gures 3.9 et 3.10 illustrent lapparence
de la page quand le tlphone est tenu dans des positions diffrentes.
Diffrences des densits de pixels

Quand on cre des pages Web pour des crans dont la taille varie de 30 pouces
3 pouces, on ne peut pas se contenter de prendre seulement en compte le nombre
de pixels sur les plans vertical et horizontal. Dans lexemple de feuille de styles externe
CSS3, la largeur est dfinie 480 par le code max-width:480px; pour un iPhone dont
la rsolution horizontale est de 480 pixels. Cependant, quand on excute lapplication
sur un tlphone mobile, le texte peut apparatre soit trop gros soit trop petit. Que se
passe-t-il ?
On a tendance penser les rsolutions dcran en termes de nombre de pixels (plus
il y a de pixels, meilleure est la rsolution). Si vous dfinissez votre cran en 1680
x 1050, il a par consquent une rsolution plus leve que si vous le paramtrez
une rsolution de 1024 x 768. Cependant, la rsolution dpend en fait du nombre
de pixels par rapport la taille de la zone daffichage. La densit des pixels, qui est le
nombre de pixels de la zone daffichage et qui se mesure en pixels par pouce (PPI) est
plus importante que le nombre total de pixels. Si vous dveloppez votre page Web
sur un cran classique dordinateur, la densit de pixels se situe aux alentours de 100,
mais votre terminal mobile a probablement une beaucoup plus grande densit de
pixels. Par exemple, mon iPhone 3GS a une densit de pixels de 132 et une rsolution
de 480 x 320. Si je change pour un iPhone 4, ma densit de pixels sera de 326 et la
rsolution sera de 960 x 640. Les tlphones ont cependant tous les deux un cran
de 3 pouces et demi. La rsolution de liPhone 4S est double de celle de liPhone 3GS
62
et sa densit mesure en PPI est pratiquement 2 fois et demi suprieure. Pour ma

page Web, cela signifie quavec un paramtre de largeur de 480 elle ne saffichera
que sur la moiti de lcran dun iPhone 4 mme si elle remplit la largeur de lcran
dun iPhone 3GS.
Cependant, comme je ralise mes dveloppements sur un ordinateur ayant un cran
de 20 pouces avec une densit de 99 PPI, le mieux que je puisse faire est une
estimation de lapparence de mes pages sur les diffrents terminaux mobiles. Je peux
estimer laspect dune page Web sur un tlphone mobile en changeant la taille de la
fentre du navigateur, mais au bout du compte, pour voir rellement ce que donnera
la page Web HTML5, il faut la visualiser sur le terminal mobile cible.
Figure 3.9 Style pour un tlphone tenu verticalement.
De nombreux terminaux mobiles autorisent lafchage des pages Web verticalement ou horizontalement. Dans ces conditions, quand jlabore un chier CSS3
pour un priphrique mobile, jai tendance dnir la largeur avec la valeur de la
largeur de lcran tenu horizontalement. Vous vous apercevrez cependant rapidement
que les diffrents navigateurs fonctionnement diffremment. Ainsi le navigateur
Safari sur liPhone afche la page dans une page minuscule et illisible qui doit tre
redimensionne, le navigateur Opera Mini (voir les gures 3.9 et 3.10) sur le mme
iPhone utilisant la mme taille dcran afche la page immdiatement dans une taille
optimale, que le tlphone soit tenu horizontalement ou verticalement.
63
Figure 3.10 Style dfini pour un tlphone tenu horizontalement.
Style en ligne
La troisime mthode pour ajouter du code CSS3 un document consiste simplement

crer un attribut style un lment qui rednit le contenu du conteneur de
llment. Par exemple, le code suivant (CSS3EnLigne.html disponible dans les chiers
du chapitre) comporte des modications de styles dans le conteneur <div> et le
deuxime conteneur <p> :
<!DOCTYPE HTML>
<html>
<head>
<title>CSS3 en ligne</title>
</head>
<body>
<div style="font-family:Verdana, Geneva,
sans-serif;font-size:24px;background-color:yellow;color:navy;">Ceci est
important !</div>
<p>Mais ceci... pas tant que cela</p>
<p style="font-size:10px;font-family:sans-serif;">Et vous pouvez ignorer
cela....
</body>
</html>
La gure 3.11 illustre le rsultat du test de la page Web dans un navigateur. Gardez
lesprit quil ny a pas dajout de style la deuxime ligne.
Lutilisation dun style CSS3 en ligne peut se rvler trs prcieuse quand votre
chier externe CSS3 ne possde pas le style adquat pour raliser quelque chose
dindispensable sur une page Web. En gnral, il est prfrable dutiliser les styles en
ligne la fois avec parcimonie et discernement. Cela est particulirement vrai quand
on collabore avec dautres dveloppeurs et concepteurs qui travaillent sur une feuille
de styles commune.
64
Figure 3.11 CSS3 en ligne.
3.3.2 Cration de classes et dID CSS3

Les classes et les ID CSS3 permettent dtendre un style nimporte quel lment. Par
exemple, supposons que vous ayez une fonctionnalit que vous ne souhaitiez ajouter
qu quelques lments, comme une surbrillance jaune. Si vous dnissez une couleur
de fond dune div ou dun lment p en jaune, tout le texte de ces deux conteneurs
sera en jaune, ce qui nest pas ce que vous dsirez. En revanche, si vous avez une classe
qui dnit une couleur de fond jaune, vous navez plus qu assigner cette classe un
lment pour le mettre en surbrillance.
Classes CSS3
On cre des classes de styles presque de la mme manire que les styles dlments.
Les dnitions avec le point (.) utilises pour crer une classe en CSS3 sont des
tiquettes que lon dnit au lieu dutiliser des noms dlments. La gure 3.12 montre
comment crer une dnition de classe CSS3.
Figure 3.12 Cration dune dfinition de classe.
Comme vous pouvez le constater, la dnition du point se place l o va le nom de

llment. Le reste est identique aux dnitions CSS3 des lments. Limplmentation
dun style de classe est cependant un peu diffrente car il peut tre utilis dans presque
nimporte quelle balise dlment.
65
Pour voir comment on peut utiliser un texte en surbrillance, le plus pratique est
demployer llment en ligne span. La balise <span> peut tre ajoute au milieu dun
lment de bloc et ne modie que cette partie du contenu du conteneur span sans
changer le reste du bloc. Pour ajouter une classe un lment, on utilise le format
suivant :
<element class=myClass>
Vous noterez que le nom de la classe ninclut pas le point de la dnition. Le point
nest utilis que dans la dnition du style pour faire comprendre lanalyseur que le
mot est une classe et non pas un lment. Le programme suivant (SpanClass.html
disponible dans les chiers du chapitre) fournit un exemple de la manire dont on
peut utiliser la classe avec la balise <span>.
<!DOCTYPE HTML>
<html>
<head>
<style type=text/css>
body {
background-color:#F93;
}
.highlight {
background-color:yellow;
}
div {
font-family:Comic Sans MS, cursive;
font-size:18px;
}
h1 {
font-family:Arial Black, Gadget, sans-serif;
color:#930;
text-align:center;
font-size:20px;
}
</style>
<title>Halloween Highlight</title>
</head>
<body>
<h1>Halloween Party!</h1>
<div>You are invited to a Halloween Party on <span class=highlight>Saturday,
October 29</span>. Costumes are <span class=highlight><i>de
rigueur</i></span>.</div>
</body>
</html>
Quand on teste le programme, on saperoit que les deux parties du texte

lintrieur des conteneurs <span> sont affectes. La gure 3.13 illustre le rsultat dans
un navigateur Opera Mini sur un iPhone (en haut) et dans un navigateur Chrome sur
un Mac (en bas).
Sur les deux crans, on voit clairement que la classe CSS3 nomme highlight
fonctionne parfaitement. Cependant, dans le navigateur Opera Mini, la police dnie
66
Figure 3.13 Style dfini dans une classe dun conteneur <span> sur un priphrique mobile
(en haut) et sur un ordinateur (en bas).
ne safche pas et elle nest pas en italique (dans Safari, la police est afche en
italique, mais ce nest pas celle qui est dnie).
ID CSS3
Un ID CSS3 est dni presque exactement de la mme manire quune classe, sauf
quil utilise un signe dise (#) au lieu dun point (.) dans la dnition. De plus, en
assignant un ID, on utilise ID au lieu de class pour spcier quel ID utiliser avec un
lment. On peut mme utiliser des ID et des classes avec le mme lment. La balise
suivante est ainsi parfaitement correcte :
<p ID=ceci class=cela>
Tous les deux peuvent slectionner des styles et lID fournit un ID unique pour le
paragraphe.
67
LID a quelques diffrences majeures par rapport une classe. Une classe et un
ID peuvent tre utiliss comme slecteurs de feuille de styles, mais un ID a dautres
limitations et fonctionnalits :
Un ID ne peut tre utilis quune seule fois dans un document.
Un ID peut servir dancre (voir le chapitre 7).
Un ID peut agir comme rfrence de script, ce qui est important pour JavaScript.
Un ID peut tre utilis comme nom dans un lment dobjet dclar.
Un ID peut tre utilis par des agents pour traiter des informations lors de la
traduction dun document HTML.
Tant que vous nutiliserez pas JavaScript ou dautres langages, vous nexploiterez
que les deux premires fonctionnalits de cette liste. Quoi quil en soit, si vous prenez
garde ces diffrences, vous minimiserez les problmes sur vos pages Web et les autres
vous considreront comme un pro. Lexemple suivant (IDCSS3.html disponible dans
les chiers de ce chapitre) illustre lutilisation dun ID avec CSS3 :
<!DOCTYPE HTML>
<html>
<head>
#littleHead {
background-color:#9FC;
font-size:16px;
}
#javascript {
/* rouge */
color:#cc0000;
}
#php {
/* bleu */
color:#009;
}
#actionscript {
/* vert */
color:#063;
}
</style>
<title>Utilisation des ID</title>
</head>
<body>
<div id="littleHead">Tout ce que vous avez toujours voulu<br>
savoir sur les variables :</div>
<p id="javascript"> Les variables JavaScript nont pas tre assignes un
type de donnes.</p>
<p id="php"> Les variables PHP peuvent avoir un type de donnes grce au
typage implicite.</p>
<p id="actionscript"> Les variables ActionScript doivent tre assignes un
type de donnes.</p>
</body>
</html>
68
lexamen de ce code, on peut se demander ce que signient les marques slashastrisque (/* ... */). Il sagit en fait de commentaires pour CSS3. lintrieur dun
conteneur <style> et dans une feuille de styles externe, ils fonctionnent exactement
comme les marques de commentaires  en HTML5. La gure 3.14 montre le
rsultat du programme.
Figure 3.14 ID sur une page Web.
Si vous avez une longue page Web avec des discussions sur JavaScript, PHP et
ActionScript, lutilisateur va devoir faire dler la fentre pour trouver le sujet qui
lintresse. En utilisant les ID, on peut crire lURL pour quelle intgre le paragraphe
exact que lutilisateur tente de localiser. Par exemple, lURL suivante va aller
directement sur le paragraphe qui traite de PHP : www.smashingHTML5.com/myIDs#php.
La mention #php qui a t ajoute appelle le paragraphe spcique ayant lID php.
3.4 VOUS DE JOUER !

Ce chapitre a trait de nombreuses notions et vous allez pouvoir rinvestir votre
apprentissage. Voici deux exercices :
1. Vous pouvez amliorer votre conception ! Aprs avoir dmarr la cration
dune page Web en utilisant diffrents lments h, la page que vous avez obtenue
et qui est illustre la gure 3.4 a besoin dtre amliore. Pour une page qui est
destine des enfants, elle manque de couleurs et les polices sont ennuyeuses.
De plus, le texte est coll limage. En utilisant CSS3, pouvez-vous amliorer
la conception de cette page ?
2. Aidez ce pauvre Wittgenstein ! La page Web illustre la gure 3.6 afche
luvre de Wittgenstein sans les indentations. En utilisant CSS3 et la proprit
margin-left, voyez si vous pouvez rgler ces lments h de telle sorte que tous
les lments soient prsents.
Amusez-vous bien et apprciez la souplesse que procure CSS3.
4
Valeurs des couleurs
Objectif
Jusqu prsent, nous avons vu plusieurs exemples dutilisation des codes de couleurs,
mais moins que vous ne compreniez ce que vous lisez, vous avez d avoir
limpression davoir affaire un langage cod. Dans certains exemples, on a utilis
des noms de couleurs, mais il ne sagissait pas des couleurs de base, et il devient
ncessaire de comprendre la manire dont les couleurs sont gres en CSS3. Cela
vous permettra davoir accs des millions de couleurs plutt qu quelques-unes.
4.1 COULEUR RGB

Si vous avez dj mlang des couleurs, ne serait-ce quavec les doigts sur une aquarelle,
vous savez ce qui se produit. Sur un cran dordinateur, les lumires de couleur rouge,
vert et bleu (RVB en franais) se mlangent pour gnrer des couleurs diffrentes. Par
exemple, si vous mlangez en quantit gale du rouge et du vert, vous obtenez du
jaune.
Pour obtenir des couleurs sur les pages Web, on mlange diffrentes valeurs en
utilisant des nombres entiers, hexadcimaux ou bien des pourcentages. CSS3 possde
aussi un nombre limit de noms de couleurs que vous pouvez employer tout en vous
servant des autres mthodes de dnition des couleurs. HTML5 et CSS3 ont des
lments trs sophistiqus, comme llment canvas, qui amliore considrablement
la gestion des couleurs et des images par rapport aux versions prcdentes de HTML.
Ces techniques avances ncessitent un peu de JavaScript et nous les dtaillerons au
chapitre 13. Pour linstant, nous allons commencer par les bases.
70
Chapitre 4. Valeurs des couleurs
4.1.1 Utilisation des noms

Une des expriences les plus tranges avec HTML5 et CSS3 est lutilisation dun jeu
de noms pour les couleurs. Il existe la base un ensemble de 16 couleurs standard qui
sont listes dans le tableau 4.1.
Tableau 4.1 Noms des couleurs standard
Noms des couleurs standard
Aqua
Black
Blue
Fuchsia
Gray
Green
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow
En utilisant les rudiments de HTML5 que vous avez appris jusqu prsent, vous
pouvez facilement crer un graphique qui afche toutes les couleurs (dans la section
vous de jouer ! la n de ce chapitre, vous allez devoir recrer ce tableau). La
gure 4.1 illustre laspect de cette palette de couleurs sur une page Web.
Figure 4.1 Couleurs standard CSS3 sur une page Web.
partir de cette base-l, vous pouvez inclure 131 autres noms qui semblent avoir
t choisis au hasard. Ils font tous partie dun ensemble cr dans les annes 1980
et qui se nommait X11. Ils ont t adopts par les premiers navigateurs et ont t
conservs par la suite. Dans la documentation ofcielle du W3C, ils sont lists dans la
rubrique SVG (Scalable Vector Graphics) et ils proviennent tous du jeu original X11.
La liste complte peut tre consulte ladresse :
www.w3.org/TR/SVG/types.html#ColorKeywords
Si tous ces noms nont pas t lists ici, cest parce quen gnral les concepteurs
et les dveloppeurs ne les utilisent pas. Les concepteurs considrent que 131 noms
limitent trop leur palette et quen plus, le choix a t fait en dpit du bon sens. Des
noms de couleurs comme papayawhip et mistyrose ne parlent pas vraiment des
4.1 Couleur RGB
71
artistes. De la mme manire, les dveloppeurs pensent que les valeurs utilises ne
correspondent pas un ensemble mathmatique comme les bonnes vieilles couleurs
du Web qui suivent une logique numrique standard (bien entendu, si vous voulez
vous amuser, vous pouvez inclure les couleurs darkkhaki et ghostwhite dans la palette
de couleurs de vos pages Web). Dans les sections suivantes, vous verrez comment crer
la couleur exacte que vous voulez en choisissant parmi un million de combinaisons
possibles.
4.1.2 Pourcentages RGB et HSL

Quand on mlange des couleurs, on utilise parfois des quantits de peinture exprimes
en pourcentage. Un certain pour cent de rouge, de vert et de bleu va donner une
couleur prcise. Lors de la dnition des couleurs en CSS3, on peut utiliser des
pourcentages de deux manires diffrentes. On peut dabord assigner une valeur de
couleur en utilisant le format suivant :
rgb(r%,g%,b%);
La premire valeur est le pourcentage de rouge, la seconde le pourcentage

de vert et la troisime le pourcentage de bleu. Par exemple, le paramtre
rgb(43.9%,50.2%,56.5%) gnre la couleur utilise par lquipe de baseball Los
Angeles Dodgers. Laddition des trois pourcentages produisant un total suprieur 100
pour cent, vous comprenez donc que le pourcentage est un pourcentage de la couleur
elle-mme et non pas sa proportion dans le mlange. Comme vous pouvez le constater,
on peut tre trs prcis car les valeurs peuvent inclure des fractions de pourcentages.
Le script suivant (RGBpourcent.html disponible dans les chiers du chapitre) montre
comment utiliser cette assignation de couleur dans une page HTML5 :
<!DOCTYPE HTML>
<html>
<head>
body {
background-color:rgb(43.9%,50.2%,56.5%);
}
h1 {
background-color:rgb(11.8%,56.5%,100%);
color:rgb(100%,100%,100%);
font-style:italic;
text-align:center;
}
</style>
<title>Bleu Dodger</title>
</head>
<body>
<h1>Los Angeles Dodgers<br>
72
(Anciennement de Brooklyn)</h1>
</body>
</html>
Quand on excute la page, les couleurs safchent prcisment comme cela a t

demand (le rsultat est illustr la gure 4.2).
Figure 4.2 Dfinition de couleurs avec des pourcentages RGB.
La deuxime mthode pour assigner des couleurs laide de pourcentages est

dutiliser le modle HSL (hue saturation lightness, en franais TSL pour teinte saturation
luminance). Le gros avantage de HSL est que la clart est symtrique. Cela facilite la
mise au point des couleurs.
Si lon se reprsente un cercle de couleurs de 360 degrs comme une boussole, on
slectionne une teinte. Au sommet ( 0 pour cent), on trouve les rouges. Si lon se
dplace dans le sens des aiguilles dune montre, 30 pour cent, les teintes virent au
rouge orang. 60 pour cent, elles deviennent jaunes. Et ainsi de suite tout autour
du spectre de couleurs jusqu ce que lon atteigne 360 pour cent (ou 0 pour cent)
o lon retrouve les teintes rouges. Pour les concepteurs qui comprennent le spectre
de couleurs, cela facilite le choix des couleurs. Pour crer une couleur plus claire, on
augmente la valeur de la lumire et on diminue la valeur de la lumire pour faire une
teinte plus fonce. Supposons par exemple que lon tente dobtenir la bonne nuance
de rouge. On commence par lassignation de couleur suivante :
hsl(0,100%,50%);
Vous noterez que la premire valeur nest pas un pourcentage. Cela est d au fait
que les valeurs sont comprises entre 0 et 359 (les 360 degrs dun cercle ; noubliez pas
que 0 et 360 reprsentent le mme point du cercle). En augmentant ou en diminuant
la lumire (le troisime paramtre), on peut rendre la couleur plus claire ou plus
fonce, ce qui est bien plus intuitif que de modier les pourcentages RGB. Le script
HTML5/CSS3 suivant (CouleurHSL.html disponible dans les chiers du chapitre)
montre comme il est facile de diminuer et daugmenter la valeur de la lumire pour
obtenir exactement la bonne teinte de rouge.
73
4.1 Couleur RGB
<!DOCTYPE HTML>
<html>
<head>
.redBase {
color:hsl(0, 100%, 50%);
}
.redDarker {
color:hsl(0, 100%, 25%);
}
.redLighter {
color:hsl(0, 100%, 75%);
}
</style>
<title>Assignation de couleur HSL</title>
</head>
<body>
<h1 class="redBase">Rouge de base</h1>
<h1 class="redDarker">Rouge fonc</h1>
<h1 class="redLighter">Rouge lger</h1>
</body>
</html>
Quand on utilise HSL pour la premire fois, il faut se rappeler le rle que jouent
lombre et la lumire du soleil sur les couleurs. Ce processus de mise au point est plus
facile pour les concepteurs qui sont habitus ces notions. La gure 4.3 montre les
diffrentes teintes de rouge obtenues.
Figure 4.3 HSL facilite la mise au point des nuances.
Les concepts de nuance et de lumire sont faciles comprendre, mais la notion

de saturation peut se rvler plus dlicate. Fondamentalement, la saturation est la
quantit de couleur dune couleur donne. Une saturation de 100 pour cent est la
couleur dune intensit totale dune teinte sous une lumire donne, alors quavec un
pourcentage infrieur la couleur parat plus fade. Pour toutes les couleurs, une lumire
mdiane sera grise quand la saturation est de 0 pour cent. Il arrive que des couleurs
dcolores soient prfrables comme celle dun jean dlav.
74
4.1.3 Paramtrage RGB avec des entiers dcimaux

Il existe un deuxime moyen de mlanger des couleurs laide de valeurs RGB : il suft
dinsrer des valeurs comprises entre 0 et 255 (soit un total de 256 valeurs puisque
lon compte le 0) la place des pourcentages employs dans lexemple prcdent. La
valeur 256 reprsente le nombre de combinaisons possibles avec un nombre stock sur
deux octets (16 bits). En dautres termes, le systme est bas sur la manire dont un
ordinateur stocke et traite linformation. Avec un ensemble de trois valeurs comprises
entre 0 et 255, on peut gnrer 16 777 216 combinaisons. La technologie des couleurs
est cependant bien plus complexe que ce quil nous est possible den dire ici et
les traitements de couleurs modernes permettent de gnrer des couleurs encore
meilleures. Nous nous contenterons dafrmer ici que lon peut gnrer un trs grand
nombre de couleurs avec ces combinaisons de rouge, vert et bleu. Voici le format pour
assigner une valeur de couleur :
rgb(integerR, integerG, integerB);
Par exemple, voici le jaune qui est un mlange de rouge et de vert :

rgb(255,255,0);
Cela nest pas aussi intuitif que HSL, mais au bout dun moment, on commence
avoir une bonne sensation des mlanges bass sur 256 valeurs plutt que sur des
pourcentages. Lexemple suivant (CouleurDec.html disponible dans les chiers du
chapitre) illustre une implmentation simple.
<!DOCTYPE HTML>
<html>
<head>
body {
/* Couleur de fond rouge */
background-color:rgb(255,0,0);
}
h1 {
/* Grand texte en jaune */
color:rgb(255,255,0);
font-size:36px;
font-weight:bold;
}
h2 {
/*Texte en bleu + fond gris */
color:rgb(0,0,255);
background-color:rgb(150,150,150);
}
</style>
<title>Couleurs dcimales</title>
</head>
4.1 Couleur RGB
75
<body>
<h1> Grand titre en jaune</h1>
<h2> Titre en bleu avec un fond gris</h2>
</body>
</html>
La seule diffrence entre lutilisation de RGB avec des valeurs de 0 255 et

des valeurs exprimes en pourcentage relve de la perception. Vous pouvez penser
tre plus prcis avec des couleurs exprimes en 256 valeurs plutt quavec une plage
dune centaine de valeurs, mais cela nest pas le cas parce que lon peut utiliser des
fractions avec les assignations en pourcentage. Lemploi de la notation en pourcentage
ou la notation sur 256 valeurs nest quune question de prfrences personnelles. La
gure 4.4 illustre le rsultat laide du navigateur Opera Mini sur un iPhone.
Figure 4.4 Couleurs mlanges laide de valeurs exprimes avec des entiers dcimaux.
Comme vous pouvez le voir la gure 4.4, le terminal mobile nafche pas la police
Arial Black, mais il na pas de problme avec les couleurs. Assurez-vous de contrler
lafchage des polices et des autres effets sur un terminal mobile si cela est essentiel
pour votre site. Rappel : la plupart des ordinateurs ont un ensemble de polices et de
styles bien plus complet que les terminaux mobiles, mme si cette diffrence risque de
sestomper avec le temps.
4.1.4 Paramtrage avec des valeurs hxadcimales

Dans les chapitres prcdents, vous avez vu lassignation de couleurs laide de
valeurs contenant des caractres alphanumriques (un caractre alphanumrique est
un caractre qui peut tre un chiffre ou une lettre). Par exemple, la valeur 6F001C
gnre un rouge trs fonc. Si on dcompose cette valeur, on peut voir quil sagit
simplement dun mlange de rouge, de vert et de bleu. Mais pour comprendre ce qui
se passe, on doit en savoir un peu plus sur les systmes de numration informatiques.
Nous sommes habitus compter laide dun systme dcimal. On utilise les
valeurs de 0 9 (dix chiffres), et une fois que tous les chiffres sont utiliss, on
76
recommence avec un nombre deux chiffres (1 et 0) que lon appelle dix . Comme
vous le savez peut-tre, les ordinateurs sont bass sur un systme de commutateurs
deux tats (On et Off). En remplaant On par 1 et Off par 0, on peut crire un code
bas sur un systme binaire ; au lieu davoir dix chiffres, on en a seulement deux, 0 et
1. Le tableau 4.2 liste les valeurs de 0 15 crites en binaire, en dcimal et en base 16,
que lon appelle galement systme hexadcimal.
Tableau 4.2 Systme de numration
Binaire
Dcimal
Hexadcimal
10
11
100
101
110
111
1000
1001
1010
10
1011
11
1100
12
1101
13
1110
14
1111
15
Chacune des valeurs binaires sappelle un bit (0 ou 1), et un groupe de huit bits
sappelle un octet. Dans le tableau 4.2, la plus grande valeur binaire est exprime dans
un nombre de 4 bits. La plus grande valeur dun octet est donc exprime sous la forme
dun nombre de 8 bits, soit 11111111. Quand on compare les valeurs dcimales et
hexadcimales de ce nombre, on voit quelque chose dintressant, comme cela est
illustr dans le tableau 4.3.
Comme vous pouvez le voir dans le tableau 4.3, la valeur hexadcimale FF est la
valeur la plus leve pour un nombre de deux chiffres ; de la mme manire, la valeur
binaire 11111111 est la valeur la plus leve dun octet, alors que le nombre dcimal
77
4.1 Couleur RGB
Tableau 4.3 Valeurs dun octet

Binaire
11111111
Dcimal
255
Hexadcimal
FF
est sur trois chiffres et ne reprsente aucune limite. En dautres termes, le systme
dcimal nest pas trs symtrique avec le systme de numration binaire, ce qui nest
pas le cas du systme hexadcimal.
Comme vous le savez, le systme RGB dassignation des entiers aux valeurs de
couleurs utilise des valeurs de 0 255. En utilisant des valeurs hexadcimales, on
na besoin que de nombres deux chiffres (en fait des entiers hexadcimaux) pour
reprsenter la totalit des 256 valeurs, ce qui est plus propre et favorise lutilisation de
lhexadcimal dans le systme dassignation des valeurs de couleurs.
En utilisant six valeurs hexadcimales (deux pour le rouge, deux pour le vert et
deux pour le bleu), on peut assigner nimporte quelle valeur de couleur. Ainsi la valeur
6F001C doit tre dcompose de la manire suivante :
Rouge : 6F
Bleu : 00
Vert : 1C
Le fait de shabituer lhexadcimal peut prendre un peu de temps, mais une

fois que cela est fait, il est facile dajouter des valeurs de couleurs grce ce systme.
Vous pouvez vous le reprsenter de la mme manire que les entiers dcimaux RGB,
mais au lieu dutiliser les valeurs de 0 255, on emploie les nombres de 00 FF.
Lexemple suivant (PaletteHexa.html disponible dans les chiers de ce chapitre)
montre lutilisation de couleurs codes en hexadcimal.
<!DOCTYPE HTML>
<html>
<head>
/* Palette -- On nutilise que ces couleurs !
69675C, 69623D,ECE8CF, E8D986,
B5AA69
gray, olive, cream, dark cream, khaki */
body {
font-family:"Comic Sans MS", cursive;
background-color:#ECE8CF;
color:#69675C;
}
h1 {
color:#B5aa60;
background-color:#E8D986;
text-align:center;
}
h2 {
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
78
color:#b5aa69;
}
</style>
<title>Palette avec des valeurs hexadcimales</title>
</head>
<body>
<h1> Style avec une palette de couleurs</h1>
<h2> Dsert lautomne</h2>
lautomne, quand lair se rafrachit, le dsert commence se parer dun
ensemble de nuances plus chaudes.
</body>
</html>
Cet exemple utilise une palette de couleurs et place simplement les valeurs de
couleurs dans un commentaire au sein du conteneur <style> de telle sorte quil puisse
tre visualis quand on assemble la page Web. La gure 4.5 illustre le rsultat.
Figure 4.5 Palette de couleurs codes en hexadcimal.
Les couleurs appartiennent un ensemble de couleurs qui cre une certaine

atmosphre. Celle-ci, appele Dsert lautomne, est cense reprsenter une palette
de couleurs qui exprime lambiance qui rgne cette saison dans le dsert.
4.2 AJOUT DE TRANSPARENCE LA COULEUR

La transparence, ou opacit variable, est lune des nouvelles fonctionnalits que lon
rencontre sur les navigateurs qui sont compatibles HTML5. Un objet totalement
opaque lcran empche de voir tout ce qui se trouve derrire lui, alors quun objet
totalement transparent permet de voir tout ce qui se trouve dessus, comme sil tait
en verre. La valeur utilise pour dcrire le niveau dopacit est exprime dans une
proprit dont la plage varie entre 0 et 1. Que lon utilise le systme de couleur RGB
ou HSL, cette valeur est le quatrime paramtre qui ne peut malheureusement pas
tre en hexadcimal. Par exemple, rgba(255,0,0, 0.5) gnre du rouge avec 50 pour
cent dopacit. De la mme manire, hsla(120, 100%, 50%, 0.3) cre du vert avec
30 pour cent dopacit (ou 70 pour cent de transparence).
4.2 Ajout de transparence la couleur
79
Dans la quatrime partie de cet ouvrage, je traite des diffrents moyens dajouter de
la profondeur vos pages avec la balise <canvas> de telle sorte que lorsque lon empile
des objets les uns sur les autres, on peut mieux voir pourquoi lajout de la transparence
est important. Mais pour linstant, vous avez besoin de quelque chose que vous pouvez
placer sous les blocs de texte an quils puissent tre visualiss au travers dun bloc
de texte transparent. La mthode la plus facile est de placer un objet darrire-plan
en utilisant la proprit background-image. Lextrait de code suivant illustre cette
technique :
body { background-image:url(fichierImage.png); }
Vous pouvez utiliser nimporte quel chier .jpg, .gif ou .png comme image de
fond. Dans notre exemple, trois cercles de couleur rouge, verte et bleue sont utiliss
comme arrire-plan et on trouve au sommet de la page du texte <h1> avec 50 pour cent
dopacit pour montrer leffet que les diffrentes couleurs ont quand elles sont afches
au travers dun objet transparent. Le code suivant (Transparence.html disponible dans
les chiers de ce chapitre) utilise la fois les formats rgba() et hsla().
<!DOCTYPE HTML>
<html>
<head>
body {
background-image:url(rgbBalls.png);
}
.transRed {
color:rgba(255, 0, 0, .5);
}
.transGreen {
color:rgba(0, 255, 0, .5);
}
.transBlue {
color:hsla(240, 100%, 50%, .5);
}
.transBackground
{
background-color:hsla(120, 100%, 50%, .5);
}
</style>
<title>Transparence/Opacit</title>
</head>
<body>
<h1 class="transRed">Testing 123, Testing 123, Testing 123</h1>
<h1 class="transGreen">Testing 123, Testing 123, Testing 123</h1>
<h1 class="transBlue">Testing 123, Testing 123, Testing 123</h1>
<h1 class="transBackground">Testing 123, Testing 123, Testing 123</h1>
</body>
</html>
Le rsultat est illustr la gure 4.6 ; comme vous pouvez le constater, le texte
et larrire-plan transparents permettent limage de fond dtre vue au travers.
80
Quand une couleur est transparente, elle prend la couleur sous-jacente. En pareil
cas, il faut donc faire attention harmoniser la couleur sous-jacente et la couleur de
recouvrement (en ce sens, la gure 4.6 illustre bien les raisons pour lesquelles on utilise
rarement des images darrire-plan car elles mettent en dsordre lcran et dtruisent
toute sensibilit du texte).
Figure 4.6 Texte transparent par-dessus des images.
4.3 CRATION DUN MODLE DE COULEURS

Si vous tes un concepteur, vous pensez sans doute quil est difcile de choisir sa
palette de couleurs parmi tous ces nombres. Si vous tes un dveloppeur, vous vous
posez peut-tre la question de savoir si les couleurs que vous allez utiliser vont bien
ensemble. Ces deux questions ont la mme rponse : Kuler. Kuler est un site o lon
peut saisir une couleur cl (couleur de base) et laide de diffrents algorithmes, Kuler
dtermine les couleurs qui sont compatibles et afche les informations des valeurs
de couleurs en dcimal et hexadcimal. Les crateurs peuvent saisir nimporte quelle
couleur quils veulent employer et Kuler gnre tous les calculs ; les dveloppeurs
peuvent saisir nimporte quelle valeur et Kuler gnre le modle de couleurs.
Kuler est disponible ladresse http://kuler.adobe.com. Il ncessite
un plug-in Flash (qui est dj intgr la plupart des navigateurs) et si
votre navigateur nen dispose pas, vous pouvez le tlcharger gratuitement
www.adobe.com/products/flashplayer. Vous pouvez aussi tlcharger un widget
Kuler qui fonctionne sur votre ordinateur.
4.3 Cration dun modle de couleurs
81
4.3.1 partir dune couleur de base
Pour crer un modle de couleurs avec Kuler, on commence avec une couleur de base
puis on teste diffrents algorithmes pour gnrer des modles de couleurs. Ensuite, on
slectionne un algorithme pour afcher diffrentes manires dassocier les couleurs.
Les rgles qui sont bases sur la thorie des couleurs permettent de choisir entre les
paramtres suivants : analogue, monochromatique, triade, complmentaire, compos,
teintes, ou personnalis. La dernire catgorie est pour les concepteurs qui utilisent
leurs talents artistiques pour gnrer une palette (les dveloppeurs ne sont pas non
plus oublis car ils ont des algorithmes automatiques). La gure 4.7 illustre un exemple
typique de modle de couleurs gnr partir dune couleur de base laide de
lalgorithme analogue.
Figure 4.7 Modle de couleurs gnr partir dune couleur de base.
4.3.2 partir dune image

Outre la cration dune palette de couleurs partir dune couleur de base, vous pouvez
aussi charger une image et Kuler gnre automatiquement un modle de couleurs bas
sur la couleur de limage importe.
82
Mauvaises combinaisons de couleurs

Afin de voir les diffrences entre un bon modle de couleurs et une mauvaise
combinaison, nous allons observer un exemple. Louvrage de Leslie Cabarga, The
Designers Guide to Color Combinations, contient un chapitre sur les mauvaises couleurs.
La figure suivante montre quoi ressemblent deux pages Web identiques avec un
modle de couleurs bas sur une photo et un modle bas sur un exemple de
mauvaise couleur issu du livre de Cabarga.
Limage de gauche utilise les couleurs gnres partir de la photo, ce qui nest pas
le cas de limage de droite, do une mauvaise combinaison.
Figure 4.8 Bonne et mauvaise couleur.
Quand on utilise une image, on peut modier le modle de couleurs en choisissant

plusieurs ambiances : color, brillant, attnu, profond et sombre. Tous les modles de
couleurs peuvent tre enregistrs et quand ils sont chargs, ils conservent toutes les
informations dont vous avez besoin pour saisir les donnes relatives aux couleurs dans
une page Web HTML5.
4.4 INTGRATION DE LA PALETTE DE COULEURS LA

PAGE WEB
Le fait davoir une palette de couleurs ne signie pas que votre page sera jolie, ni mme
harmonieuse du point de vue des couleurs. Avec la mme palette, certaines couleurs
vont mieux ensemble que dautres. Par exemple, un arrire-plan en ton moyen peut ne
pas fournir le contraste ncessaire pour les autres tons moyens, si bien quune couleur
sombre ou claire peut constituer un meilleur choix. La gure 4.8 montre la palette de
couleurs dveloppe partir dun logo qui sera utilise comme palette de la page.
Les valeurs hexadcimales des quatre couleurs sont rappeles pour mmoire en
commentaire dans le code CSS3 au sommet de la page HTML5. Le script suivant
4.4 Intgration de la palette de couleurs la page Web
83
Figure 4.9 Palette de couleurs base sur un logo.
(ColeursPalette.html disponible dans les chiers du chapitre) emploie les couleurs

de telle sorte quelles fonctionnent avec le logo et le reste de la page.
<!DOCTYPE HTML>
<html>
<head>
/* 027333,7FA646,D9B448,F2DFA7 */
body {
margin-left:1em;
background-color:#F2DFA7;
color:#027333;
font-size:11px;
}
h1 {
color:#7FA646;
}
h2 {
color:#7FA646;
background-color:#D9B448;
}
div
{
text-align:center;
}
a {
font-family:Arial, Helvetica, sans-serif;
text-align:center;
font-size:10px;
text-decoration:none;
color:#F2DFA7;
}
a:hover {
color:#D9B448;
}
</style>
<title>Couleurs compatibles</title>
</head>
<body>
<div><nav>
<a href="#"> Lien 1 | </a>
84
<a href="#"> Lien 2 | </a>

<a href="#"> Lien 3 </a>
</nav> </div>
<img src="Sandlightlogo.gif" alt="Logo" align="left">
<header><h1> Bienvenue</h1></header>
<br><br>
<article>
<h2> Prsentation...</h2>
Sandlight Productions est une entreprise de dveloppement qui se spcialise
dans les technologies HTML5/CSS3, le streaming vido, les terminaux mobiles,
le e-learning, ActionScript 3.0, Flash et PHP.
</article>
<br>
<footer><div>
<nav>
<a href="#"> Lien 1 | </a>
<a href="#"> Lien 2 | </a>
<a href="#"> Lien 3 </a>
</nav>
</div></footer>
</body>
</html>
Le script CSS3 utilise la proprit a:hover pour modier la proprit quand la

souris passe sur un lien. Dans la dnition CSS3 de la balise <a>, text-decoration
est initialis none, ce qui signie que le lien du texte ne sera pas soulign. Le
soulignement tant absent, il est ncessaire dalerter lutilisateur de la prsence dun
lien, do lutilisation de la proprit hover. En modiant lgrement la couleur du
texte du lien, on montre effectivement lutilisateur que la souris se trouve sur un
lien. La couleur initiale et la couleur de survol font toutes les deux parties de la palette.
Dans la dnition de la page, vous devez donc vous souvenir quil ny a pas que les
balises <body> et <h> qui utilisent la palette de couleurs.
Cette conception particulire est centre sur les priphriques mobiles, mais elle
safche correctement sur les ordinateurs (voir la gure 4.9) et les tablettes.
Bien entendu, votre page sera toujours plus jolie si vous pouvez vous offrir les
services dun concepteur Web. Les dveloppeurs peuvent toutefois amliorer laspect
de leurs pages en accordant de lattention aux combinaisons de couleurs.
4.5 VOUS DE JOUER !

Les deux exercices suivants devraient vous amuser et vous apprendre plein de choses :
1. Reproduction du tableau des couleurs standard : La Figure 4.1 illustre une
image avec des couleurs standard. Le premier d consiste voir si vous pouvez
reproduire la page Web qui afche ces couleurs. Voici deux indices pour vous
permettre de commencer :
Dnissez chaque couleur nomme en tant que classe dans le conteneur
<style> avec la mme couleur pour les couleurs de texte et darrire-plan.
85
4.5 vous de jouer !
Figure 4.10 Modle de couleurs appliqu une page.
.aqua { color:aqua; background-color:aqua; }
Pour ce faire, on peut utiliser la balise <span> pour assigner les classes au
contenu du conteneur <span>.
<h3> <span class=aqua>COLORNAME</span><span class=black>COLORNAME

</span><span class=blue>COLORNAME</span><span class=fuchsia>COLORNAME
</span> <h3>
2. Votre photo sur une page Web ! Il y a trois tapes raliser :

Prenez une photo numrique de vous-mme.
Chargez cette photo dans Kuler et crez une palette de couleurs.
Crez une page Web avec votre photo en utilisant la palette de couleurs
cre avec Kuler.
DEUXIME PARTIE
Conception
de pages et
de sites Web
5
Organisation de la page
Objectif
Un grand nombre des nouvelles balises HTML5 sont des balises organisationnelles.
Dans les chapitres prcdents, nous en avons utilis quelques-unes, mais nous ne
les avons pas vraiment expliques. Ce chapitre tudie en dtail lorganisation des
pages HTML5 laide de CSS3 et la manire dont il faut apprhender ce processus
organisationnel. On ne peut comprendre certains lments quune fois quon a
commenc utiliser JavaScript, mais si vous dnissez votre page en suivant les
recommandations HTML5, votre page sera parfaitement oprationnelle quand vous
commencerez y ajouter un peu de JavaScript.
5.1 SOMMET DUN DOCUMENT HTML5

Les quatre premiers chapitres de ce livre expliquent comment utiliser les informations
au-dessus de la balise <body>. Le code au-dessus de la balise <body> najoute pas de
contenu la page Web, mais il inuence laspect de la page et informe le navigateur
quil sagit dune page Web et lui indique son type. La gure 5.1 illustre lorganisation
gnrale de la premire partie dune page Web.
La balise <html> est llment racine et on peut y inclure un attribut de langue.
On trouve ensuite au sein du conteneur <head> les mtadonnes. Figurent galement
dans le conteneur <head> les lments de script qui seront brivement dcrits dans
cette section et expliqus en dtail dans la quatrime partie de cet ouvrage.
Mis part dans les scripts CSS3, nous navons pas plac jusqu prsent beaucoup
de balises dans la section head de nos exemples de documents HTML5. La balise
90
Chapitre 5. Organisation de la page
Figure 5.1 Organisation du sommet dune page Web.
<meta> a de nombreuses utilisations, mais nous ne lavons employe pour linstant que
pour spcier le jeu de caractres. Nous verrons dautres utilisations de cette balise
dans ce chapitre.
5.1.1 Dfinition de la base de rfrence

Dans un site Web typique, on a en gnral plusieurs pages diffrentes qui sont relies
les unes aux autres, ce qui constitue un systme de navigation. Si lon dnit une
balise <base> dans la section head de la page avec un lien vers une URL, on peut
faire rfrence aux autres pages par rapport cette page de base. Par exemple, les
deux scripts suivants (Base.html et PremiereBase.html disponibles dans les chiers
du chapitre) ont des liens lun vers lautre, mais il sagit de liens relatifs par rapport
la base qui est dnie dans le conteneur head.
<!DOCTYPE HTML>
<html>
<head>
<base href="http://www.sandlight.com/html5/smashing/">
body {
background-color:#FCC;
}
</style>
<title>Base daccueil</title>
</head>
5.1 Sommet dun document HTML5
91
<body>
<h1>Ceci est la base daccueil</h1>
<a href="PremiereBase.html">Premire base</a>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<base href="http://www.sandlight.com/html5/smashing/">
body {
background-color:#FC0;
}
</style>
<title>Premire base</title>
</head>
<body>
<h1>Ceci est la premire base</h1>
<a href="Base.html">Base daccueil</a>
</body>
</html>
Que se passe-t-il ici ? La balise <base> dit au navigateur comment rsoudre

toutes les rfrences aux autres documents du chier HTML, comme dans
lancre <a href=Base.html>. Le navigateur saura chercher le document
Base.html dans lemplacement spci dans la balise <base>, savoir
http://www.sandlight.com/html5/smashing/.
5.1.2 Description du site avec des mtadonnes

Jusqu prsent, nous avons utilis la balise <meta> pour tablir que votre site utilise le
jeu de caractres UTF-8, mais cet lment peut faire bien dautres choses. Il faut se
reprsenter llment meta comme une balise multitche. Lun des attributs les plus
importants de llment meta est la paire name et contents. En dnissant lattribut
name keywords, on peut spcier le contenu de son site de telle sorte que les moteurs
de recherche pourront lindexer. Ainsi, les internautes qui cherchent des produits ou
des services seront orients vers votre site. Supposons, par exemple, que votre site
comporte des liens vers des blogs et dautres sites sur les niches pour chiens. Votre
balise meta pourrait ressembler ceci :
<meta name=keywords content=niches, barrires pour chien, barrire
antifugue>
Chaque valeur de lattribut content, qui doit tre spare par une virgule, est cense
dcrire le contenu de votre site. Ces balises, qui sont faciles dnir, permettent
dorienter les utilisateurs vers votre site.
92
La balise <meta> a un autre attribut trs intressant : http-equiv. En lui attribuant

la valeur Refresh, on peut automatiquement actualiser une page, voire changer
son contenu. Par exemple, vous pouvez afcher automatiquement les photos dun
diaporama sur votre site. Voici la syntaxe de lutilisation de Refresh :
<meta http-equiv="Refresh" content="[secs]">
Lexemple suivant actualise (recharge) la page toutes les 30 secondes :

<meta http-equiv="Refresh" content="30">
Vous pouvez non seulement recharger la mme page, mais vous pouvez aussi
recharger des pages diffrentes. Si vous voulez charger une squence de pages, vous
pouvez dnir la balise meta de la manire suivante an de lui assigner une URL aprs
une demi-seconde :
<meta http-equiv="Refresh" content=".5; URL=pg2.html">
Vous noterez que la valeur en secondes et lURL gurent lintrieur de la mme

paire de guillemets. Le code HTML5 suivant lance une srie de pages qui continuent
sactualiser jusquau chargement de la page daccueil :
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Refresh" content=".5; URL=pg2.html">
<title>Image 1</title>
</head>
<body>
<img src="one.png" alt="one">
</body>
</html>
Aprs le chargement de la page initiale, on a la squence suivante, chaque page se

chargeant lune aprs lautre :
Page 2 : <meta http-equiv="Refresh" content=".5; URL=pg3.html">
Page 5 : <meta http-equiv="Refresh" content=".5; URL=Accueil.html">
La page daccueil, Accueil.html, naura pas de valeur Refresh dans la balise

<meta>. En fait, en dehors des lments meta avec lattribut Content-Type, il ny
aura pas dautres balises meta (si la page daccueil reboucle sur la premire page, le
rechargement des pages ne sarrte jamais).
93
5.1 Sommet dun document HTML5
5.1.3 Savoir quand on a besoin dun script

Plus on utilise HTML5, plus on a besoin de scripts pour tirer le meilleur parti de ses
pages Web. JavaScript est le langage de script qui est utilis le plus couramment avec
HTML5. Votre navigateur dispose dun interprteur JavaScript, tout comme il en a
un pour dcoder HTML5. Fort heureusement, JavaScript est facile apprendre et on
peut se contenter den crire que de courts extraits, si bien que mme ceux qui ne sont
pas dveloppeurs y arrivent.
Pour inclure un script JavaScript, il suft dajouter une balise au dbut de la page :
<script type="text/javascript">
Le programme JavaScript vient se placer dans le conteneur <script>. Le code

suivant HTML5 (BaliseScript.html disponible dans les chiers de ce chapitre)
montre combien il est facile dapprendre JavaScript.
<!DOCTYPE HTML>
<html>
<head>
alert("Je sais faire du JavaScript !");
</script>
<title>Un avant-got de JavaScript</title>
</head>
<body>
Page Web normale....
</body>
</html>
Quand on teste ce petit programme, on voit safcher une bote de dialogue

(illustre la gure 5.2).
Figure 5.2 Bote de dialogue JavaScript.
Vous noterez que la bote de dialogue JavaScript se charge avant le contenu de la

page Web. Cela est d au fait que le conteneur head se charge en premier. Si vous
avez un programme JavaScript plus labor qui sera utilis dans une page HTML5, il
94
est ncessaire de le tester sur diffrents navigateurs et galement de le placer dans un

chier JavaScript externe. La gure 5.3 illustre une bote de dialogue similaire charge
dans Safari sur un iPhone et vous pouvez clairement voir que la page Web associe au
code HTML5 na pas t charge.
Ds que lutilisateur clique sur le bouton OK, la page Web se charge. Pendant ce
temps, on peut voir les chiers du rpertoire en arrire-plan sur lcran du terminal
mobile. En outre, vous remarquerez que la bote de dialogue afche le domaine o se
trouve JavaScript. Certains navigateurs, comme Google Chrome, vrient dabord si
lutilisateur accepte le code JavaScript issu du site en question avant dafcher la bote
de dialogue.
Figure 5.3 Chargement dune bote de dialogue avant la page Web.
Comme pour les feuilles de styles, les programmes JavaScript peuvent tre chargs
partir de chiers externes. Cependant, au lieu dutiliser llment link, les chiers
JavaScript sont chargs laide de llment script, comme dans lexemple suivant :
<script type="text/javascript" src="programmeJS.js"></script>
Les chiers JavaScript comportent lextension .js, alors que les chiers CSS3 ont
lextension .css.
Dans la quatrime partie de ce livre, vous verrez quil est intressant dutiliser
JavaScript avec la balise <canvas> et dautres lments HTML5. De plus, les balises
<script> et le code JavaScript peuvent tre ajouts en plein au milieu du script
HTML5. Il y a cependant un avantage placer le code JavaScript dans le conteneur
head, car il est charg en premier, avant la page Web.
5.2 Utiliser les sections dans sa conception
95
5.2 UTILISER LES SECTIONS DANS SA CONCEPTION
Les sections sont lune des modications majeures de HTML5 par rapport aux
anciennes versions de HTML. Avant HTML5, on pouvait facilement reprsenter
des sections avec llment body et des balises <h>. En HTML5, on peut envisager une
page avec des sections et des sous-sections. Si lon agrandit le contexte, une page Web
est un article, et comme dans un article de magazine, on peut trouver diffrentes
sections qui constituent les blocs de larticle. La gure 5.4 fournit une vue densemble
des sections dune page HTML5.
Figure 5.4 Sections composant une page.
En examinant la gure 5.4, on peut voir diffrents blocs dinformation, mais les
balises utilises nont en gnral pas de capacit intrinsque structurer visuellement
linformation. Les balises <h>, qui sont des lments de section, permettent assurment
dafcher le texte dans des tailles diffrentes, mais les autres balises de section servent
tout autant organiser la page qu en spcier laspect visuel.
Voici une liste dlments de section :
Body
Section
96
Nav
Article
Aside
H1 . . . H6
Hgroup
Header
Footer
Address
Llment body est la racine des sections, tout comme llment html est la racine
de la page. Au cours des prcdents chapitres, nous avons dj rencontr plusieurs
lments de section qui vous sont ainsi devenus familiers, mais le script suivant va
vous aider comprendre comment les utiliser conjointement (ArticleStructure.html
qui est disponible dans les chiers du chapitre).
<!DOCTYPE HTML>
<html>
<head>
<title>Sections</title>
</head>
<body>
<article>
<header>
<h1>Pilots and Planes</h1>
<p><q>I never left one up there. </q><i>Ace Davis</i></p>
</header>
<nav><a href=#> Safety</a> | <a href=#>Check Lists</a> | <a
href=#>Landings</a></nav>
<section>
<h2>Flying Stories by Real Pilots</h2>
<h3>...and other cures for insomnia.</h3>
<section>
<h4>Short Final</h4>
<p>As we were on short final, control cleared the Maule for immediate
takeoff, which it did in about 15 feet of runway at an airspeed of 20 mph. It
filled my windshield as I approached stall speed. After realizing its mistake,
the tower instructed the Maule to loop, and we were able to land without
incident.</p>
</section>
<section>
<h4>Thermal on Takeoff</h4>
<p>Taking off from Gila Bend, Arizona, with the ambient temperature of
130 F, we encountered a strong thermal at the end of the runway, which took
our Cessna 177b to 15,000 feet in 12 seconds flat, at which time we leveled
off and proceeded to New Mexico via the jet stream, setting a new speed
record.</p>
</section>
</section>
<aside>
<h2>Truthful Pilot Found!</h2>
5.2 Utiliser les sections dans sa conception
97
<p>Emily Rudders, a pilot in Moose Bite, Vermont, was recently found to be

the only truthful pilot in existence. When asked to relate her most exciting
flying adventure, Emily replied, <q>I aint never flew no airplane. I jus
shoot at em when they fly over and bother the moose.</q></p>
</aside>
<footer>
<address>
Contact us at:<a href=www.aopa.org>AOPA</a>
</address>
</footer>
</article>
</body>
</html>
Le but des sections est de diviser la page en parties cohrentes. Il sagit dun
ensemble organis dlments qui peuvent tre utiliss pour de la mise en forme, mais
ce nest pas leur objectif principal. Pour formater un paragraphe ou un groupe de
paragraphes, la norme W3C encourage lemploi de la balise <div>.
La gure 5.5 illustre lafchage du script prcdent dans un navigateur. Bien que
la mise en page ne soit pas particulirement attirante, elle se rvle fonctionnelle.
Larticle est consacr aux pilotes et la navigation arienne. Le titre de larticle
annonce le sujet (les pilotes et les avions) et offre une citation dun pilote en utilisant
une balise <q>. Aprs le titre, la premire section traite dhistoires de pilotage. Deux
autres balises <section> sont imbriques lintrieur de la premire section an de
sparer deux histoires.
Une section sur la vracit des histoires de pilotes davion est place dans un
conteneur dlment spar aside. la gure 5.4, vous avez peut-tre remarqu que
llment aside tait plac dans une colonne spare, mais en soi llment aside est
une rfrence la signication de la page, et il ne sagit donc pas dun lment de mise
en forme en tant que tel.
Pourquoi lorganisation en sections est importante

Vous pensez peut-tre que vous pouvez composer une page sans vous embter avec
les balises de section. Cela est vrai, mais en coulisse de votre belle page Web, il y a un
moteur qui peut rfrencer diffrentes parties de votre page. Connus sous le nom de
Document Object Model (DOM), les diffrents regroupements que vous avez dfinis
avec les lments de section peuvent tre traits comme une hirarchie dobjets en un
flux de donnes bien organises circulant sur Internet. En prtant attention au modle
organisationnel de HTML5, tout le monde sera content : vos pages Web, Internet, et
mme lunivers !
la n de larticle se trouve un pied de page. Les lments footer peuvent en

fait aller nimporte o, y compris lintrieur des conteneurs dlments individuels
section et aside. Un lment footer agit comme un lment organisationnel de
fermeture des lments de la section. Au sein du pied de page, il y a un lment
address avec un lien vers une URL en rapport avec larticle.
98
Figure 5.5 Page organise avec des sections.
En examinant la page illustre la gure 5.5 et son code, vous pouvez voir la
signication de la page apparatre dans les balises de section. Comme nous lavons
dj dit, il ne sagit pas ici de mise en forme, mais bien dorganiser le sens de la page.
5.3 ORGANISATION DES CONTENUS

Quand vous avez un plan dorganisation gnral, il est souhaitable de mettre en ordre
les contenus au sein des diffrentes sections. la gure 5.4, vous avez vu que plusieurs
des lments de section contenaient des lments de regroupement, comme les balises
<p>. Les lments de regroupement constituent lemplacement idal pour lajout des
styles CSS3, ce qui nest pas le cas des lments de section. Nous allons ici tudier les
principaux lments qui vous aideront organiser vos pages Web.
5.3 Organisation des contenus
99
5.3.1 Paragraphes, divisions et listes

Les balises <p> et <div> taient largement employes dans les pages HTML pour
les regroupements et les styles. Si ces balises sont toujours importantes, vous devez
cependant garder lesprit quelles ne servent plus intgrer les contenus dans des
sections sur la page, mais regrouper les diffrentes parties dune section. Par exemple,
lextrait de code suivant montre comment on utilisait ces deux balises avant HTML5 :
<div>
<h1>Les choses importantes de la vie</h1>
<p>
<h2>Trouver le vritable amour</h2>
</p>
<p>
<h2>Choisir un bon mtier</h2>
</p>
<p>
<h2>Trouver une place de parking</h2>
</p>
</div>
Ce code fonctionne parfaitement en HTML5, mais il est prfrable de lorganiser

en utilisant les lments qui conviennent le mieux pour cette tche. Lapproche
suivante est par consquent meilleure :
<header>
<h1>Les choses importantes de la vie</h1>
</header>
<section>
<h2>Trouver le vritable amour</h2>
<h2>Choisir un bon mtier</h2>
<h2>Trouver une place de parking</h2>
</section>
Quand on visualise la page Web, le rsultat des deux versions du code est identique,
mais il est plus judicieux demployer le code HTML5 avec les nouveaux lments de
section.
La question suivante est de savoir o lon peut utiliser les lments p et div.
En fait, il nest pas souhaitable demployer abondamment ces balises, mme si elles
peuvent se rvler pratiques quand on veut ajouter un lment de style ou un autre
attribut au milieu dune balise <article> ou <section>. Examinez le code suivant
(UtilisationDiv.html qui est disponible dans les chiers du chapitre).
<!DOCTYPE HTML>
<html>
<head>
body {
color:#0C6;
100
background-color:#FFC;
}
.girls {
background-color:pink;
}
.boys {
background-color:powderblue;
}
</style>
<title>Prnoms des enfants</title>
</head>
<body>
<article>
<header>
<h1>Prnoms des enfants</h1>
</header>
<section>
<div class="girls">
<h2> Filles</h2>
<ul>
<li>Olivia</li>
<li>Prune</li>
<li>Emilie</li>
</ul>
</div>
</section>
<section>
<div class="boys">
<h2> Garons</h2>
<ul>
<li>Jacques</li>
<li>Richard</li>
<li>John</li>
</ul>
</div>
</section>
</body>
</html>
La gure 5.6 illustre le rsultat, mais le point important est que la balise <div>
na t employe que pour fournir les couleurs de fond des deux diffrents lments
<section>.
Comme vous pouvez le voir dans le listing, llment div a permis lemploi de
deux styles de couleur de fond diffrents dans les conteneurs section sans avoir
ajouter de classes la balise <section>. Vous devez cependant garder lesprit que
dans lensemble <p> et <div> sont des lments plus gnriques et que vous devez
privilgier les lments qui dcrivent le mieux le contenu de votre page Web.
Outre lutilisation de la balise <div> pour le regroupement et le stylage, on peut
aussi employer les listes pour faire ressortir les donnes. HTML5 utilise toujours les
balises <ul> pour regrouper les prnoms des lles et des garons, mais il existe une
diffrence subtile, mais importante entre les listes ordonnes (<ol>) et les listes non
ordonnes (<ul>).
101
Figure 5.6 Utilisation de la balise <div> pour le stylage.
Lutilisation de ces listes dpend du contexte. Par exemple, lors de la coupe du

monde de football en 2010 en Afrique du sud, les quipes de lAllemagne, des Pays-Bas,
de lEspagne et de lUruguay taient qualies. Si lon voulait lister ces quipes au
dbut de la comptition, on pouvait utiliser une liste non ordonne. la n de la
comptition, on pouvait employer une liste ordonne pour afcher le rsultat nal.
La page Web suivante (liste.html qui est disponible dans les chiers du chapitre)
rete ces diffrents regroupements en fonction du contexte et de la signication qui
est attache au contexte.
<!DOCTYPE HTML>
<html>
<head>
/*20268C,0C080C,2F8C2B,F27507,F20505 */
body {
background-color:#2F8C2B;
color:#0C080C;
}
h2 {
color:#20268C;
}
h3 {
}
ol {
}
102
ul {
}
</style>
<title>Liste ordonne et non ordonne</title>
</head>
<body>
<h2> Coupe du monde 2010</h2>
<h3>Dbut</h3>
<ul>
<li>Espagne</li>
<li>Pays-Bas</li>
<li>Allemagne</li>
<li>Uruguay</li>
</ul>
<h3>Fin</h3>
<ol>
<li>Espagne</li>
<li>Pays-Bas</li>
<li>Allemagne</li>
<li>Uruguay</li>
</ol>
</body>
</html>
Comme vous pouvez le constater la gure 5.7, la signication du groupe au

dbut de la coupe du monde na pas de hirarchie car il ne sagit que dune liste de
quatre quipes participant cette coupe. Cependant, la n de la coupe, lordre a de
limportance de telle sorte que la liste ordonne est la plus approprie.
Figure 5.7 Les listes ordonnes et non ordonnes ont des significations diffrentes.
103
Vous noterez galement que les deux diffrentes sortes de listes ont des couleurs de
fond diffrentes qui ont t ajoutes avec CSS3. Cela signie que lorsque lon emploie
des lments de regroupement, on peut galement accentuer le rassemblement du
contenu par lutilisation des couleurs, comme cela a t illustr dans les gures 5.6 et
5.7.
5.3.2 Regroupement sans fracture

La balise <hr> est lun des lments de regroupement quil nest pas souhaitable
dutiliser, hormis pour le regroupement de len-tte avec le reste de la page, quand cela
est ncessaire. Llment hr (qui signie horizontal rule, cest--dire rgle horizontale)
nest quune ligne, mais il doit tre utilis judicieusement et avec parcimonie. Prenons,
par exemple, lextrait suivant du pome Kubla Khan de Samuel Taylor Coleridge :
In Xanadu did Kubla Khan
A stately pleasure-dome decree:
Where Alph, the sacred river, ran
Through caverns measureless to man
Down to a sunless sea.
So twice ve miles of fertile ground
With walls and towers were girdled round;
And there were gardens bright with sinuous rills,
Where blossomed many an incense-bearing tree;
And here were forests ancient as the hills,
Enfolding sunny spots of greenery.

But oh! that deep romantic chasm which slanted
Down the green hill athwart a cedarn cover!
A savage place! as holy and enchanted
As eer beneath a waning moon was haunted
By woman wailing for her demon-lover!
Les trois strophes sont spares par un simple espace double, ainsi que le titre.
Cependant, si des balises <hr> sont insres, comme dans le listing suivant (HR.html
qui est disponible dans les chiers du chapitre), vous constaterez que le rsultat est
assez diffrent et dnature le sens du pome.
<!DOCTYPE HTML>
<html>
<head>
104
<style type=text/css>
/*A1A680,D9D7BA,D90404,8C0303,590202 */
body {
background-color:#A1A680;
color:#590202;
font-family:Palatino Linotype, Book Antiqua, Palatino, serif;
font-size:8px;
}
h4 {
background-color:#D9D7BA;
color:#8C0303;
}
</style>
<title>Trop de balises HR</title>
</head>
<body>
<header>
<h4> Kubla Khan</h4>
</header>
<article>
<hr>
In Xanadu did Kubla Khan<br>
A stately pleasure-dome decree:<br>
Where Alph, the sacred river, ran<br>
Through caverns measureless to man<br>
Down to a sunless sea.<br>
<hr>
So twice five miles of fertile ground<br>
With walls and towers were girdled round;<br>
And there were gardens bright with sinuous rills,<br>
Where blossomed many an incense-bearing tree;<br>
And here were forests ancient as the hills,<br>
Enfolding sunny spots of greenery.<br>
<hr>
But oh! that deep romantic chasm which slanted<br>
Down the green hill athwart a cedarn cover!<br>
A savage place! as holy and enchanted<br>
As eer beneath a waning moon was haunted<br>
By woman wailing for her demon-lover! </article>
</body>
</html>
Comme vous pouvez le voir, les balises <hr> sont toutes au sein de llment
article, alors que le titre fait partie de llment header. La gure 5.8 montre que
les lignes horizontales ne clarient pas le sens du pome et ont plutt tendance le
fragmenter.
Quand votre page comporte une division importante, une ligne horizontale peut
tre approprie, mais il faut alors ajouter un style CSS3 pour allger llment
hr de telle sorte quil apporte une note subtile (on peut notamment ajouter de
la transparence). Les bons concepteurs savent utiliser les lignes horizontales avec
modration, alors que les nophytes peuvent trs facilement mettre la pagaille dans
leurs pages Web en abusant des balises <hr>.
105
Figure 5.8 Les lignes horizontales peuvent fragmenter la signification.
5.3.3 Figures et lgendes

Lutilisation combine en HTML5 des balises <figure> et <figcaption> est trs
frustrante. En plaant un lment figcaption lintrieur dun conteneur dlment
figure, on peut lgitimement prsupposer quils forment un objet unique pour la mise
en forme et la conception. Llment figcaption est considr comme un enfant de
llment figure quand figcaption est imbriqu lintrieur dun lment figure.
Cependant, cela ne signie pas quils apparatront ensemble sur la page. En fait,
lalignement dune gure avec sa lgende peut se rvler dlicat.
Dans les mises en forme CSS3 plus sophistiques, la gure et sa lgende peuvent
tre traites comme un objet avec une relation parent-enfant. Ce nest pas parce
figure et figcaption font partie des lments de regroupement de HTML5 que
cela signie quils sont mis en forme conjointement sur la page. Au contraire, cela
signie quils peuvent tre rfrencs comme un ux unique du contenu principal
de la page. Vous devez donc travailler prudemment quand vous utilisez ensemble
ces deux lments, comme cela est illustr dans le programme HTML5 suivant
(Figure_legende.html qui est disponible dans les chiers du chapitre) o la lgende
rfrence une image stylise.
106
<!DOCTYPE HTML>
<html>
<head>
/* 732D3F,A66879,D9C3B0,260101,F2F2F2 */
body {
background-color:#D9C3B0;
color:#732D3F;
font-size:11px;
}
aside {
margin-left:260px;
}
h1 {
background-color:#F2F2F2;
color:#A66879;
text-align:center;
}
figcaption {
color:#A66879;
}
img {
margin:5px;
}
</style>
<title>Regroupement dune figure et de sa lgende</title>
</head>
<body>
<header>
<h1>Souvenirs de Baja</h1>
</header>
<article>
<figure> <img src="PuntaBufeo250.png" alt="Punta Bufeo"><br>
<figcaption> Piste datterrissage sur la plage de Punta
Bufeo </figcaption>
</figure>
<section>
<p>Les meilleures destinations de Baja ne sont accessibles quen 4x4 ou
bien en petit avion. Les plages y sont immacules, dsertes et spacieuses. La
<i>mer de Cortez</i> (appele aussi <i>golfe de Baja</i> et la <i>mer
Vermillion</i>) sont dun bleu transparent.</p>
</section>
</article>
</body>
</html>
Vous pouvez commencer rchir aux lments et leurs descendants. Dans ce

cas, llment figcaption est un descendant de llment figure. La gure 5.9 illustre
la lgende sous limage, les deux tant lintrieur dun conteneur <figure>.
5.4 Organisation des fichiers
107
Comme vous pouvez le voir clairement la gure 5.9, llment <figcaption> est
styl diffremment, mme sil sagit dun descendant du conteneur <figure>. Cependant, vous ne pouvez pas prsupposer quun lment figcaption sera correctement
positionn, comme cest le cas la gure 5.9, simplement parce que cest un enfant de
llment figure quil lgende.
Figure 5.9 Figure et figcaption utiliss avec une image.
5.4 ORGANISATION DES FICHIERS

Avec un site Web simple, lorganisation des chiers est facile. Au fur et mesure
que la complexit dun site saccrot, particulirement si plusieurs dveloppeurs et
concepteurs sont impliqus dans le projet, il faut organiser le site en rpertoires spars
et parfois mme en serveurs spars. Dans cette section, vous allez tudier plusieurs
problmes organisationnels et apprendre grer lagencement des chiers et leur accs.
5.4.1 Organisation et rfrencement des images

Un site Web typique comporte un ou plusieurs dossiers (rpertoires) consacrs aux
chiers image ou aux types de chiers image. Jusqu prsent, dans la plupart des
exemples de ce livre, nous navons pas utilis des dossiers spars pour les images et les
pages HTML5 qui les chargent ; au lieu de cela, toutes les images taient places dans
le mme rpertoire que les chiers HTML5. Quand on a un grand nombre de pages
108
Web et dimages charger, il est plus efcace dorganiser le site avec des rpertoires
spars pour les diffrents groupes de chiers. La manire dont on organise ses images
dpend dun certain nombre de facteurs. Voici quelques exemples de classications en
rpertoires et sous-rpertoires :
Classications formelles (Animaux > Mammifres > Rongeurs)
Sujet (Vacances > Destinations > Logement > Affaires emporter)
Processus (Ptisserie > Fabrication de la pte > Prchauffage du four > Temps
de cuisson)
Quel que soit le modle organisationnel choisi, vous devez comprendre comment
accder vos images. Toutes les rfrences aux images sont absolues ou relatives.
5.4.2 Rfrence absolue

Toute rfrence une image seffectue par le biais dune URL, quil sagisse dun listing
complet de ladresse ou simplement du nom du chier. Une adresse absolue commence
par http:// et comprend le chemin complet du chier HTML5. Voici, par exemple,
une adresse absolue dun chier :
http://www.smashinghtml5.com/organization/graphics/faces.html
Quel que soit lemplacement partir duquel cette URL est appele, le chier
nomm la n de lURL est reconnu. Cela est identique avec une rfrence source
(src) une image. Si votre code comporte le lien suivant, il chargera le chier
nose.png quel que soit lemplacement de la page Web qui rfrence limage :
<img src="http://www.smashinghtml5.com/organization/graphics/nose.png">
Mme si la page Web qui rfrence limage est sur un serveur totalement diffrent,
ladresse absolue fonctionne.
Lavantage de lemploi des adresses absolues est que vous navez pas vous
proccuper si une page gure bien sur votre site Web. Vous navez pas non plus vous
proccuper si elle gure sur le mme serveur. Ce type dorganisation nest cependant
pas optimal et les longues URL ne sont pas faciles grer.
5.4.3 Rfrence relative

Une rfrence relative est relative par rapport la position de la page appelante sur
le site Web ou sa base qui a t dnie. Sur votre ordinateur, votre page Web a
une position file au lieu dune position http. Par exemple, ladresse suivante est la
position absolue du chier somePage.html sur mon ordinateur :
"file:///Macintosh HD/Users/billsanders/Desktop/HTML5/somePage.html"
5.4 Organisation des fichiers
109
Si jai une image dans le dossier HTML5/, je peux utiliser son adresse relative pour
lappeler partir de somePage.html. Par exemple, si jai un chier anyGraphic.png
dans le dossier HTML5, je peux utiliser simplement la rfrence relative suivante :
<img src="anyGraphic.png">
Mais si je veux organiser mes images dans un dossier spar appel images,
lintrieur du dossier HTML5, jutiliserai alors ladresse relative :
<img src="images/anyGraphic.png">
Vous pouvez crer autant de niveaux relatifs que vous le souhaitez, chaque niveau
tant spar par un slash (/). Par exemple, on peut imaginer une arborescence plus
complexe :
<img src="images/animaux/chiens/SaintBernard/monToutou.png">
Si lon peut faire rfrence des niveaux infrieurs, on peut aussi accder aux
niveaux suprieurs. Supposons par exemple que lon dispose du chemin suivant et que
la page HTML5 soit dans le rpertoire dossierBase :
dossierHaut/dossierMilieu/dossierBase
Pour accder une image situe dans le rpertoire dossierMilieu, il faut utiliser la
syntaxe suivante :
<img src=".../anyGraphic.png">
Si limage est dans le rpertoire dossierHaut, il faut utiliser le format suivant :
<img src="../../anyGraphic.png">
On na pas besoin de nommer le dossier cible dans lequel se situe la page Web
appelante, mais on utilise les caractres ../ successifs jusqu ce que lon atteigne le
niveau dsir. Cela signie que lon peut remonter au niveau souhait et redescendre
vers une autre branche. Dans lexemple suivant, on remonte jusquau rpertoire
dossierHaut, puis lintrieur de dossierHaut on redescend jusquau dossier qui
contient les images pour atteindre limage cible :
<img src="../../images/anyGraphic.png">
La gure 5.10 fournit une illustration gnrique de laccs aux ressources situes
dans des dossiers de niveaux infrieurs et suprieurs.
Comme cela a t not dans la section Dnition de la base de rfrence , plus
haut dans ce chapitre, votre position relative peut tre dnie un emplacement qui
110
Figure 5.10 Chemins relatifs.
est diffrent de celui o se situe le chier. Examinez, par exemple, les deux pages Web
suivantes (Terre.html et Alien.html qui sont disponibles dans les chiers du chapitre).
La premire appelle la seconde sur un serveur diffrent ; cependant, comme la base de
la premire page est dnie sur le second serveur, lappel est relatif. Le premier chier,
qui se nomme Terre.html, est situ sur le domaine smashingHTML5.com dans le dossier
smashing. Sa base est pourtant dnie smashingHTML5.net dans le dossier smashing.
Il est donc possible dutiliser une URL relative pour accder au chier Alien.html sur
un serveur totalement diffrent.
Base dnie sur un serveur diffrent
<!DOCTYPE HTML>
<html>
<head>
<base href="http://www.sandlight.net/html5/smashing/"><meta
http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Terre</title>
</head>
<body>
<h1>Ici la terre</h1>
<a href="Alien.html">Mise feu !</a>
</body>
</html>
Page Web sur un serveur diffrent

<!DOCTYPE HTML>
<html>
<head>
<title>Plante Smashing</title>
</head>
<body>
<h1>Page dun serveur alien</h1>
</body>
</html>
Mme si le domaine de la premire page (Terre.html) est smashingHTML5.com, la

base est dnie smashingHTML5.net. Cela a pour effet quun lien relatif Alien.html,
qui rside sur smashingHTML5.net, est ralis sans avoir utiliser une adresse absolue.
5.5 vous de jouer !
111
5.5 VOUS DE JOUER !

Dans la premire section de ce chapitre, vous avez vu comment utiliser ltat Refresh
pour changer automatiquement des pages. Pour vous amuser avec les animations
et ltat Refresh, jetez un coup dil sur le lien relatant les travaux dEadweard
Muybridge :
http://138.23.124.165/collections/permanent/object_genres/
photographers/muybridge/contents.html#
Muybridge est intressant car en 1878 il a russi crer des lms en utilisant une
srie de photographies. Luniversit Riverside de Californie a conserv les travaux de
Muybridge et les a mis en ligne en utilisant des chiers GIF anims. Pour voir comment
on peut raliser des animations en utilisant le rafrachissement des pages, tlchargez
lun des chiers GIF anims de la collection Muybridge partir du lien ci-dessus et
extrayez les douze photographies individuelles du chier GIF. Vous pouvez extraire
ces images avec Adobe Photoshop, Adobe Fireworks, et plusieurs autres programmes
(cherchez extraire images GIF anim dans un moteur de recherche pour trouver
de nombreuses faons de rcuprer les images individuelles. Si vous avez un Mac, vous
pouvez utiliser lapplication Prvisualisation et simplement faire glisser les images
individuelles dans un dossier spar).
Une fois que vous avez extrait les chiers GIF individuels, concevez votre
animation en utilisant ltat Refresh avec llment meta dans la section <head> de
votre programme. Pour commencer, utilisez le script HTML5 suivant (an1.html qui
est disponible dans les chiers du chapitre).
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Refresh" content="0.1; URL=an2.html">
<title>Image 1</title>
</head>
<body>
<img src="an1.png" alt="one">
</body>
</html>
Les chiers GIF individuels ont t sauvegards sous la forme de chier .png et
renomms an1.png jusqu an12.png (le prxe an signie animation). De la mme
manire, les douze chiers HTML ont t nomms en utilisant le prxe an, de
an1.html an12.html. Une fois que vous aurez termin, vous obtiendrez un cheval
qui avance au pas. Si vous liez la douzime page la premire, le cheval narrte pas
de se dplacer.
6
Affichage des donnes dans
des tableaux
Objectif
Aux dbuts de HTML, llment table tait utilis pour la majeure partie de la mise
en forme des pages. Lavnement de CSS a introduit un nouvel ensemble de rgles
de mise en forme et llment table a t abandonn comme outil de mise en forme,
ce qui tait justi. Cependant, CSS3 a rintroduit certains types spciques de
mise en forme, si bien que les tableaux, mme sils ne sont toujours pas des outils
gnriques de mise en forme, ont dsormais des fonctions intressantes pour afcher
des ensembles de donnes et pour grer la mise en forme gnrique CSS3.
Ce chapitre tudie les nouvelles proprits CSS3 que vous pouvez utiliser pour
accomplir des mises en pages gnrales, mais il se concentre principalement sur
lafchage des donnes tabulaires. Les donnes tabulaires ne sont rien dautre que des
donnes disposes dans un tableau pour en faciliter la lecture et pas spcialement des
structures de mise en page.
6.1 PROPRITS DE TABLEAUX CSS3 POUR HTML5

Dans une dclaration du W3C (World Wide Web Consortium), lorganisme ofciel
qui dnit les standards du Web et notamment HTML5, il est stipul de manire
catgorique que les tableaux ne doivent pas tre utiliss pour faciliter la mise en
page . Puis, dans une note qui suit cet avertissement, le mme document indique
quil y a de nombreuses alternatives lutilisation des tableaux HTML pour la mise
en page, et notamment le positionnement CSS et le modle de tableau CSS .
114
Chapitre 6. Affichage des donnes dans des tableaux
Cela signie quen gnral, les lments table ne doivent pas tre utiliss pour la
mise en page, si ce nest pour les donnes tabulaires. Cependant, si vous avez besoin
de mettre en page des tableaux, il faut utiliser les proprits de tableaux CSS3.
Cet avertissement est d au fait que lorsque CSS est sorti, toutes les mises en page
taient censes tre ralises laide de CSS. An de ne pas dissuader les concepteurs
et les dveloppeurs dutiliser les proprits de tableaux CSS3, le W3C a ajout cette
note. Si vous avez respect cette mise en garde et navez pas utilis les lments table
dans vos mises en page, nous vous conrmons que les proprits de tableaux CSS3
sont parfaites pour la conception, jusqu un certain point.
An dexaminer les fonctionnalits CSS3, la premire tape consiste tudier
les valeurs de la proprit CSS3 display : table et table-cell. Cette proprit peut
tre envisage comme une instruction de mise en page dont les valeurs organisent la
disposition de lafchage. Il peut tre utile de se reprsenter la proprit table comme
un grand conteneur et la proprit table-cells comme les cellules individuelles de
ce conteneur. Pour les conceptions plus sophistiques, table-cells se rapproche de
llment table et de tous les problmes qui lui sont inhrents. Il convient donc de
lutiliser pour les applications simples o il suft de quelques colonnes pour raliser
une tche peu complexe.
La syntaxe CSS3 pour dnir lafchage utilise des classes prdnies, une classe
utilisateur, ou un ID. On assigne la proprit display une simple valeur table ou
table-cell. Voici un exemple (avec une dnition de style) :
.story {
display: table;
}
.col1 {
display: table-cell;
width: 250px;
padding-right: 20px;
color:#cc0000;
}
La classe story dnit simplement la proprit display en tant que table. La

classe col1, que vous pouvez placer lintrieur du tableau, est afche en tant
que table-cell, et il est utile de se la reprsenter en tant que telle. Le code suivant
(AfficheTableau.html disponible dans les chiers du chapitre) montre comment
dnir une conception qui peut tre utilise pour afcher du texte et des images dans
deux colonnes.
<!DOCTYPE HTML>
<html>
<head>
body {
font-size:12px;
}
h1 {
6.1 Proprits de tableaux CSS3 pour HTML5
115

width:520px;
text-align:center;
color:#005500;
}
.story {
display: table;
}
.col1 {
width: 250px;
padding-right: 20px;
color:#cc0000;
}
.col2 {
width: 250px;
color:blue;
}
</style>
<title>Tableau avec la proprit Display</title>
</head>
<body>
<header>
<h1>Coupe du monde de football 2010</h1>
<div class="col1"><img src="cupImages/us.gif"></div>
<div class="col2"><img src="cupImages/england.gif"></div>
</header>
<br>
<article class="story">
<section class="col1">Pendant la coupe du monde de football 2010 en Afrique
du sud, chaque pays tait reprsent par une quipe. Lquipe des tats-Unis
tait compose de joueurs venant dtats o lon joue au football depuis une
quarantaine dannes car ce sport nest pas aussi populaire aux USA que dans le
reste du monde. Quoi quil en soit, lquipe des USA a bien jou et termin
premire de sa poule.</section>
<section class="col2">Le Royaume-Uni tait lune des rares nations tre
reprsente par plusieurs pays pendant la coupe du monde. LAngleterre qui
tait reprsente par le drapeau de Saint Georges (et non pas lUnion Jack) est
arrive galit avec les tats-Unis dans la premire phase de la coupe.
Comme les USA, lAngleterre sest qualifie pour le second tour, mais nest pas
arrive passer le tour suivant.</section>
</article>
</body>
</html>
La classe story est un conteneur pour ordonner diffrentes sections qui on assigne
les classes col1 ou col2. Cependant, les classes col1 et col2 nont pas tre places
dans un tableau. Vous noterez que les deux images (places dans deux classes diffrentes
table-cell) sont dnies avec des balises <div> au sein dun conteneur <header>. Elles
sont ensuite utilises une nouvelle fois lintrieur du conteneur <article> qui a
t assign la classe story (table). Les deux sections ont t dnies en tant que
proprits display de col1 et col2, et bien quelles ne soient pas visibles dans les
116
conteneurs des deux images, vous pouvez voir que le texte de couleur diffrente aide
diffrencier leur tat. La gure 6.1 illustre le rsultat attendu dans un navigateur.
Figure 6.1 Utilisation de la proprit CSS3 display avec la valeur table.
Comme vous pouvez le constater la gure 6.1, lutilisation de table-cells est un

moyen simple de dnir plusieurs colonnes. Quand on dveloppe des sites Web plus
sophistiqus, il est souhaitable demployer des dnitions display CSS3 plus avances
qui vont au-del de table et table-cells, mais la proprit table de CSS3 est toujours
disponible quand vous en avez besoin.
6.2 TABLEAUX ET DONNES TABULAIRES

Tout en gardant lesprit quil ne faut pas utiliser les balises standard table pour la
conception des sites Web, nous allons tudier dans cette section la manire demployer
des tableaux pour afcher des donnes tabulaires. Les donnes tabulaires peuvent
reprsenter nimporte quoi, des ensembles de nombres jusquaux images, en passant
par du texte descriptif. Si vous avez dj command quelque chose en ligne, il y a
de grandes chances pour que les articles aient t lists dans un format tabulaire.
Habituellement, on trouve une description de larticle, le numro de larticle et son
prix.
La cl des donnes tabulaires est quelles sont reprsentes sous la forme de lignes
et de colonnes an dafcher les informations selon des catgories courantes. De plus,
lobjectif dun tableau est de clarier linformation, de telle sorte que lutilisateur puisse
trouver ce dont il a besoin.
6.2 Tableaux et donnes tabulaires
117
6.2.1 Bases dun tableau

Les lments de base dun tableau sont :
Le tableau lui-mme, <table>
Les lignes du tableau, <tr>
Les cellules du tableau, <td>
Les en-ttes du tableau, <th>
En gnral, une lgende de tableau <caption> est utilise au sommet du tableau.

Un tableau clair se compose habituellement de titres de lignes de colonnes nettement
identis. La cellule en haut gauche du tableau est souvent laisse vide, de telle sorte
que la premire colonne na pas den-tte, mais la norme indique quaucune cellule ne
doit tre vide. Cest la raison pour laquelle la cellule du coin de TableauDeBase.html
contient l/c an de combler lespace. Lexemple suivant illustre les lments de base
dun tableau simple. Les lignes et les colonnes ont des titres et les cellules de donnes
reprsentent les donnes places dans les lignes et les colonnes tiquetes.
<!DOCTYPE HTML>
<html>
<head>
<title>Tableau de base</title>
</head>
<body>
<table>
<caption>
Lignes et colonnes dun tableau
</caption>
<tr>
<td>l/c
<th>Colonne 1
<th>Colonne 2
<th>Colonne 3
<tr>
<th>Ligne 1
<td>donnes a
<td>donnes b
<td>donnes c
<tr>
<th>Ligne 2
<td>donnes x
<td>donnes y
<td>donnes z
</table>
</body>
</html>
Un des aspects les plus intressants des balises de tableau est que les balises de
fermeture sont optionnelles, et il ny a aucune recommandation en la matire. Il est
important de mettre en forme le code de telle sorte que les lignes ressortent clairement
an de pouvoir identier clairement la structure du tableau. Si lon ninclut pas
118
les balises de fermeture des cellules, le code parat bien plus lisible, ce qui est une
excellente chose. Nous allons donc abandonner les balises de fermeture des cellules,
moins quelles naient un rel intrt pour la clart du listing. La gure 6.2 illustre le
rsultat du programme dans un navigateur.
Figure 6.2 Tableau de base.
Vous noterez qualors que la balise <th> provoque lafchage du texte en gras, ce
nest pas le cas de la balise <caption>. Ce problme peut tre rgl avec CSS3 qui
permet aussi damliorer le reste du tableau. Mais pour linstant, vous navez besoin de
comprendre que les lments de base des tableaux.
6.3 STYLAGE DUN TABLEAU

On nutilise pas les tableaux pour des tches de stylage gnral, mais cela ne signie
pas que lon doit ignorer les styles des tableaux. Il y a une bonne nouvelle en HTML5 :
les bordures des tableaux ne sont pas prsentes par dfaut, comme ctait le cas dans
les versions prcdentes de HTML. En fait, lattribut de bordure de tableau nest
plus support en HTML5. Si vous voulez encadrer les cellules, vous devez le faire
vous-mme en utilisant CSS3. Selon de nombreux concepteurs, il faut raliser les
bordures avec beaucoup de soin, sinon il vaut mieux y renoncer.
6.3.1 Ajout de bordures avec CSS3

Edward Tufte, qui est un concepteur renomm, met en garde contre lutilisation
des bordures qui peuvent perturber larrire-plan de telle sorte que les donnes
deviennent illisibles. Bien que les bordures sparent clairement les donnes tabulaires,
des bordures visibles sment la confusion entre les donnes, ce qui empche de les
discerner facilement. An de voir ce que Tufte veut dire, saisissez le script suivant
(MauvaisesBordures.html disponible dans les chiers du chapitre) et examinez le
rsultat.
<!DOCTYPE HTML>
<html>
<head>
6.3 Stylage dun tableau
119
table {
width:400px;
border-style:groove;
border-width:thick;
border-color:#FF5C19;
color:#C00;
font-size:10px;
}
caption {
font-size:24px;
color:hsl(17, 60%, 40%);
padding:12px;
}
td, th {
border-style:solid;
border-width:thin;
border-color:#000;
}
</style>
<title>Bordures aveuglantes</title>
</head>
<body>
<table>
<caption>
Les animaux de la ferme
</caption>
<tr>
<td>§
<th>Poule
<th>Chvre
<th>Oie
<tr>
<th>Cri
<td>Caqutement
<td>Bgutement
<td>Criaillement
<tr>
<th>Petit
<td>Poussin
<td>Chevreau
<td>Oison
</table>
</body>
</html>
La gure 6.3 illustre le rsultat, mais avant de la regarder, examinez le code CSS3
soigneusement. La valeur &#167 est le code de caractre dun symbole saisi en utilisant
son code plutt que le clavier. Tous les caractres UTF-8 peuvent tre saisis de cette
manire et certains symboles, comme les signes suprieur (>) et infrieur (<),
doivent tre saisis avec cette mthode ; dans le cas contraire, lanalyseur les interprte
120
comme faisant partie dune balise. Jetez prsent un coup dil la gure 6.3 pour
voir la page avec ses bordures.
Figure 6.3 Les bordures peuvent nuire la clart des donnes.
Quand on tente de lire les diffrents lments de donnes, les bordures gnent.
Pour rgler ce problme, il suft dajouter de lespace autour du texte des cellules. Pour
ce faire, on modie le style des lments td et th de la manire suivante :
td, th {
height:50px;
border-style:solid;
border-width:thin;
border-color:#000;
padding:20px;
}
Nous avons simplement modi la hauteur de la cellule et lespace entre la bordure

et le texte (padding). Comme vous pouvez le constater la gure 6.4, ces diffrences
sont signicatives.
En ajoutant cet espace autour des donnes, les valeurs des cellules apparaissent
bien plus clairement. Les cellules ne sont pas trs jolies, mais il est facile de rgler le
problme : il suft de les supprimer !
6.3.2 Mise en vidence des donnes avec des couleurs de fond

Au dbut de lhistoire de linformatique, les ordinateurs imprimaient sur du papier
dont la couleur de fond alternait an de discriminer facilement les enregistrements
individuels (dans ce contexte, les lignes et les enregistrements sont des synonymes).
Comme vous avez pu le constater, des bordures paisses autour de chaque cellule
nuisent la clart des donnes. Cest la raison pour laquelle les anciennes imprimantes
utilisaient des couleurs de fond diffrentes. Au lieu de sparer les enregistrements par
des bordures, il faut donc envisager dutiliser des couleurs de fond diffrentes (voir le
programme LignesEnCouleur.html disponible dans les chiers du chapitre).
121
6.3 Stylage dun tableau
Figure 6.4 Ajout despace dans les cellules dun tableau.
<!DOCTYPE HTML>
<html>
<head>
td {
width:70px;
}
body {
font-size:10px;
}
caption {
font-size:12px;
font-weight:500;
color:#360;
background-color:hsla(113, 46%, 91%, 1);
}
.money {
text-align:right;
}
table {
background-color:#FFC;
}
.alt1 {
background-color:hsla(113, 46%, 91%, .8);
}
</style>
<title>Sparation des couleurs</title>
</head>
122
<body>
<table>
<caption>
Comptabilit
</caption>
<tr>
<th>Nom
<th>N de compte
<th>Montant
<tr class="alt1">
<td>Joe Doaks
<td>ID065212
<td class="money">$92.83
<tr>
<td>Jane Franco
<td>ID034986
<tr class="alt1">
<td>Fernando Rodriguez
<td>ID019921
<tr>
<td>Benny Jet
<td>ID073456
</table>
</body>
</html>
Par dfaut, llment td justie le texte gauche, ce qui est souhaitable dans la
plupart des cas. Cependant, avec des nombres dcimaux, il est prfrable dutiliser une
justication droite. Cest la raison pour laquelle une des classes de la feuille de styles
comprend une classe money qui justie droite les donnes nancires.
La totalit du tableau a une teinte jaune clair comme couleur de fond, mais cette
couleur naffecte pas les donnes du conteneur <caption> ; cest la raison pour laquelle
llment caption possde une couleur de fond compatible avec celle du tableau.
Bien que le tableau soit relativement petit, il a t optimis pour un afchage sur des
terminaux mobiles, si bien que le texte est dni 10 px (10 px est assez proche dun
texte afch dans une police en corps 10). La gure 6.5 illustre le rsultat.
En utilisant une couleur avec une opacit infrieure 100 pour cent (cest--dire
avec un peu de transparence), le vert qui alterne est lgrement mlang avec le
jaune clair qui sert de couleur de fond. La couleur de fond du titre est identique au
vert qui alterne dans les lignes, mais il a une opacit 100 pour cent et vous pouvez
constater quil a une teinte lgrement diffrente. Les lments th ont hrit de la
couleur de fond du tableau, mais servent dtiquettes de colonnes sans aucune autre
forme dajustement.
Les largeurs des cellules sont dnies de manire absolue (70 px) car la largeur
rete le fait que le tableau est optimis pour la lecture sur un terminal mobile. Cela
a pour effet que les noms peuvent occuper deux lignes sans nuire la lisibilit du
tableau.
6.4 Tableaux complexes
123
Figure 6.5 Alternance des couleurs dans les lignes dun tableau.
6.4 TABLEAUX COMPLEXES

Quand on parle de tableaux complexes, cela signie que les tableaux sont difciles
comprendre. En fait, les tableaux complexes sont des solutions des problmes
pineux. Si vous utilisez des tableaux pour organiser des donnes en provenance dune
base de donnes, il y a de grandes chances pour que vous puissiez employer un tableau
standard avec des lignes et des colonnes de taille identique.
Quand on commence utiliser des tableaux pour afcher des donnes qui viennent
de toutes parts, on rencontre des situations qui vont perturber le bel ensemble de lignes
et de colonnes et il faudra alors raliser des ajustements.
An de comprendre les tableaux complexes, vous devez apprhender le concept

de cellule. Un tableau nest rien de plus quune collection de cellules ordonnes en
lignes et en colonnes. Lintersection dune colonne et dune ligne reprsente la cellule.
En HTML5, on cre des cellules en utilisant les balises <td> et <th>. La gure 6.2, plus
haut dans ce chapitre, illustre des cellules de base organises en lignes et colonnes.
6.4.1 Utilisation des attributs rowspan et colspan

Pour modier les caractristiques par dfaut dune cellule dune intersection entre
une ligne et une colonne, vous devez utiliser les attributs dun lment td, rowspan
et/ou colspan. On assigne chaque attribut un entier positif qui tend une cellule an
quelle couvre plusieurs lignes ou plusieurs colonnes. La gure 6.6 illustre un tableau
standard compos de cellules de taille identique et un autre tableau dont certaines
cellules ont t tendues.
La gure 6.6 montre que la premire cellule de la deuxime ligne (Row 2) du
tableau du bas occupe lespace de trois cellules de la deuxime ligne du tableau du
haut. Dans la cinquime colonne du tableau du bas, les lignes 1 et 2 ont t runies en
une seule cellule. Vous constaterez que le tableau du haut compte dix cellules alors que
le tableau du bas nen comporte que sept. Quand on code des tableaux avec rowspan
124
Figure 6.6 Tableau compos de cellules de taille identique et tableau utilisant les attributs
rowspan et colspan.
et colspan, on utilise moins de balises <td> (voir le programme RowSpanColSpan.html

disponible dans les chiers du chapitre).
<!DOCTYPE HTML>
<html>
<head>
caption {
color:#C60;
}
table {
}
td, tr {
border-style:solid;
border-width:thin;
border-color:#ccc;
width:120px;
padding:5px;
}
</style>
<title>Colspan et Rowspan</title>
</head>
<body>
<table>
<caption>
Rowspan et Colspan
</caption>
<tr>
125
<td rowspan="2">Ligne A et Ligne B

<td>Colonne 2a
<td>Colonne 3a
<td>Colonne 4a
<tr>
<td>Colonne 2b
<td>Colonne 3b
<td>Colonne 4b
<tr>
<td>Ligne C
<td>Colonne 2c
<td colspan="2">Colonne 3c et Colonne 4c
</table>
</body>
</html>
Cet exemple utilise une bordure lgrement grise de manire mieux visualiser
lemploi des attributs rowspan et colspan, mme si vous navez pas besoin dune
bordure pour vous en servir. En fait, sil ny a pas de bordures, il peut tre difcile de
distinguer les regroupements de cellules, si bien quelles sont plutt utiles dans ce cas
de gure. La gure 6.7 illustre le tableau avec deux regroupements de cellules.
Figure 6.7 Ajout de regroupements de cellules vertical et horizontal.
Vous pouvez constater que le tableau de la gure 6.7 comporte 10 cellules, alors
quun tableau de 4 par 3 en comporterait 12. De la mme manire, dans le listing,
vous pouvez voir dix balises <td>. Les attributs colspan et rowspan peuvent tre un
peu dlicats comprendre, mais si vous vous les reprsentez en termes de fusion de
cellules, ils sont plus faciles apprhender.
6.4.2 Mise en pratique dans des tableaux

Quand on cre des tableaux complexes avec colspan et rowspan, lexercice peut
sembler futile car une application pratique ne parat pas si vidente. Vous pouvez
galement envisager lensemble du problme avec CSS3 sans utiliser les lments ou
les attributs de la balise table. Lexercice suivant repose sur un scnario simple, mais
raliste, o la fusion des cellules est une solution pratique.
126
Supposons quune socit de dveloppement Web souhaite grer ses projets en

utilisant des tableaux an den mesurer ltat davancement. Lquipe de production
est divise en diffrents groupes qui reprsentent chacun une ligne du tableau :
Coordination (1)
Conception (4)
Interaction (2)
Dveloppement du frontal (3)
Test (2)
Chaque projet comprend quatre colonnes :

Tche accomplir par le groupe
Nom du projet
Constitution des membres de lquipe
chance de la tche
Cela devrait tre sufsamment simple pour tre comprhensible et sufsamment

complexe pour tre utile. Lironie de la ralisation de ce tableau rside dans lajout des
fusions lendroit o il ny a quun seul lment dans la cellule. Cela semble heurter
le bon sens car la colonne des membres de lquipe aura plusieurs lignes lintrieur
des autres cellules qui ont un attribut rowspan de la taille du nombre de membres dans
lquipe. Le programme suivant (PlanningProjet.html disponible dans les chiers du
chapitre) illustre la manire dont cela est ralis.
<!DOCTYPE HTML>
<html>
<head>
/* F2F0E6,595443,A6A08D,3A3F59,8D91A6 */
caption {
color:#3A3F59;
}
table {
background-color:#F2F0E6;
padding:5px;
border-collapse:collapse;
}
td, tr {
padding-right:8px;
font-size:11px;
border-collapse:collapse;
}
.bluish {
background-color:#8D91A6;
}
.brownish {
background-color:#A6A08D;
}
</style>
<title>Suivi de projet</title>
</head>
<body>
<table>
<caption>
Planning de projet
</caption>
<tr>
<th>Tche
<th>Projet
<th>quipe
<th>chance
<tr class="bluish">
<td>Coordination
<td>Cold Fire
<td>Emma Peel
<td>21-01-2012
<tr class="brownish">
<td rowspan="4">Conception
<td rowspan="4">Cold Fire
<td>Sancho Panza
<td rowspan="4">01-10-2011
<td>John Watson
<td>Edward McMahon
<td>Vanna White
<tr class="bluish">
<td rowspan="2">Interaction
<td rowspan>Garth Algar
<td rowspan="2">12-11-2011
<tr class="bluish">
<td> John McIntyre
<td rowspan="3">Dveloppement<br>
du frontal
<td>Barney Rubble
<td rowspan="3">15-12-2011
<td>Ethel Mertz
<td>Paul Schaffer
<tr class="bluish">
<td rowspan="2">Test
<td rowspan>Louise Sawyer
<td rowspan="2">15-01-2012
<tr class="bluish">
<td>Andy Richer
</table>
</body>
</html>
127
128
Fondamentalement, les balises <td> qui incluent un attribut rowspan sont celles
qui doivent tre sufsamment larges pour accueillir le nombre de membres de lquipe
qui seront sur la mme ligne. La gure 6.8 illustre le rsultat dans un navigateur.
La chose la plus importante quil faut se rappeler propos des tableaux est quils
doivent tre utiliss judicieusement. Il ne sagit pas doutils gnriques de mise en
page, mais vous pouvez utiliser CSS3 pour concevoir laspect des donnes tabulaires
afches dans des lments table. En conclusion, vous devez absolument utiliser
CSS3 pour les donnes tabulaires, les tableaux et le contenu non tabulaire.
Figure 6.8 Utilisation de lattribut rowspan dans un tableau.
6.5 VOUS DE JOUER !

La gure 6.9 illustre le rsultat nal de lexercice qui vous est propos. Le tableau
comporte des en-ttes en haut et en bas, et les couleurs de fond des lignes ont une
opacit de 20 pour cent et 40 pour cent. Le but du jeu est de dupliquer ce tableau en
utilisant HTML5 et CSS3.
Vous pouvez bien entendu adapter ce tableau en modiant les rgions, les villes, les
quipes et les lieux visiter, lessentiel tant de prserver laspect du tableau illustr
la gure 6.9.
129
6.5 vous de jouer !
Figure 6.9 Saurez-vous relever ce dfi ?
7
Tout sur les liens
Objectif
Outre lafchage de textes et dimages, lintrt majeur des pages Web rside dans
la possibilit de charger dautres pages. En utilisant des pages Web, les gens (ce qui
inclut les concepteurs et les dveloppeurs) ont tendance penser quils vont quelque
part ou quils obtiennent quelque chose. On fournit mme aux utilisateurs des cartes
des sites et des outils de navigation, ce qui peut leur faire penser quils ont entrepris
une sorte de voyage (les problmes de navigation, qui sont importants, seront traits
au chapitre 8).
Ce chapitre est consacr la manire dont les liens chargent dautres pages Web,
et la manire dont on les utilise pour accder dautres feuilles de styles. Nous
tudierons aussi les diffrents attributs qui sont lis au chargement des pages, les
dtails de laccs une page, et les proprits CSS3 utilises pour styler les liens et
grer des fonctionnalits interactives.
7.1 LLMENT LINK ET SES PRINCIPAUX ATTRIBUTS

Le principal lment de lien est llment a, raison pour laquelle la majeure partie de
ce chapitre lui sera consacre. Cependant, avant daborder cet lment, nous allons
tudier la balise <link>. Elle charge galement des pages, et mme si les chiers chargs
avec llment link ne peuvent pas tre visualiss, cette fonctionnalit de chargement
de donnes est importante et mrite dtre comprise pour lutiliser au mieux.
Les attributs employs la fois par les balises <a> et <link> partagent des
caractristiques avec tous les autres lments HTML5, si bien quils peuvent tre
traits comme nimporte quel autre attribut HTML5. Cependant, les attributs utiliss
132
Chapitre 7. Tout sur les liens
par les lments de lien ont tendance se focaliser sur le chargement des chiers
(.html, .css et .js) plutt que sur lapparence.
Llment link lui-mme fait partie du contenu des mtadonnes et se trouve
lintrieur du conteneur head, au sommet de la page Web. Au chapitre 3, vous avez
vu comment utiliser link pour charger des chiers CSS externes. Dans la premire
section, je vais vous montrer comment dnir votre page Web pour quelle soit capable
de charger des feuilles de styles indpendantes.
7.1.1 Feuilles de styles alternatives

An de rendre accessibles les pages Web au plus grand nombre, les nouveaux navigateurs HTML5 disposent de menus droulants qui leur permettent de slectionner
plus dune feuille de styles. Avec la balise <link> et lattribut rel dni alternate
stylesheet, on peut inclure autant de feuilles de styles que lon souhaite et lutilisateur
peut slectionner celle quil prfre. Voici un aperu de la syntaxe gnrale :
<link rel="stylesheet" type="text/css" href="defaut.css" title="Dfaut">
<link rel="alternate stylesheet" type="text/css" href="autre.css"
title="Alternative">
La valeur ref alternate stylesheet est une entit qui est diffrente de la valeur
alternate que je traiterai dans la section suivante. Vous pouvez charger autant de
feuilles de styles que vous voulez, mais lutilisateur ne peut slectionner quune feuille
de styles alternative, et pas une feuille de styles normale.
Pour voir comment les feuilles de styles alternatives fonctionnent, lexemple suivant commence par deux feuilles diffrentes qui se nomment chaud.css et froid.css.
Ensuite, le code de la page Web cre le code qui charge la feuille de style par dfaut
(chaud.css), et lutilisateur peut ensuite permuter entre les deux feuilles de styles.
Thme de couleurs chaudes
@charset "UTF-8";
/* CSS Document */
body {
/*FFE0A3,7F7D78,FFFAF0,7F7052,CCC8C0 */
font-size:11;
background-color:#FFFAF0;
color:#7F7052;
}
h1 {
color:#CCC8C0;
text-align:center;
}
h2 {
background-color:#7F7D78;
color:#FFE0A3;
}
7.1 Llment Link et ses principaux attributs
133
Thme de couleurs froides

@charset "UTF-8";
/* CSS Document */
body {
/*056CF2,0F88F2,52B5F2,85D3F2,F2F2F2 */
font-size:11;
color:#056CF2;
}
h1 {
color:#52B5F2;
text-align:center;
}
h2 {
background-color:#85D3F2;
color:#0F88F2;
}
Les deux thmes utilisent un code CSS3 identique, mis part les valeurs des
couleurs. La page Web suivante (FeuillesDeStylesAlternatives.html disponible
dans les chiers du chapitre) utilise deux chiers CSS externes avec un chier par
dfaut (stylesheet) et un chier alternatif (alternate stylesheet) :
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="chaud.css" title="Affichage chaud
(par dfaut)">
<link rel="alternate stylesheet" type="text/css" href="froid.css"
title="Paysage froid">
<title>Feuilles de styles externes alternatives</title>
</head>
<body>
<h1>Chaud et froid</h1>
<h2> Passez du chaud au froid </h2>
Pour permuter, slectionner Afficher (ou Affichage) > Style (ou Style de la
page) partir du menu du navigateur et choisissez le style que vous dsirez.
Utilisez pour commencer Opera ou FireFox, et testez ensuite dautres
navigateurs HTML5.
</body>
</html>
Le reste des manipulations accomplir seffectue dans le navigateur. La gure 7.1

illustre le paramtrage par dfaut dans le navigateur Opera avec le menu de slection
des feuilles de styles.
Comme vous pouvez le voir la gure 7.1, le menu Afcher > Style indique le
nom de la feuille de styles CSS3 par dfaut Afchage chaud (par dfaut). Si lon
veut basculer sur la feuille de styles alternative, il suft de slectionner Paysage froid.
134
Figure 7.1 Affichage du thme de couleurs chaudes dans le navigateur Opera.
La gure 7.2 illustre la slection de la feuille de styles alternative dans le navigateur

Firefox.
Figure 7.2 Permutation de feuilles de styles dans Firefox.
7.1 Llment Link et ses principaux attributs
135
Dans Firefox, le menu de slection des feuilles de styles est lgrement diffrent,
mais comme dans Opera, il offre aux utilisateurs la possibilit de changer les styles de
manire dynamique sils le souhaitent.
7.1.2 Icnes de liens

Lattribut rel qui sert assigner des feuilles de styles peut aussi tre utilis pour dnir
une petite icne an de reprsenter la page. Les icnes peuvent tre assignes
lattribut rel avec la syntaxe suivante :
<link rel="icon" href="graphic.png" sizes="32x32"/>
Dans les versions prcdentes de HTML, la valeur de lattribut tait shortcut

icon, mais icon fonctionne galement.
Lexemple suivant (IconeLien.html disponible dans les chiers du chapitre) inclut

galement plusieurs balises <meta>. Ces balises contiennent des informations sur la
page qui seront utilises par les moteurs de recherche, et bien que cela soit toujours
utile, ceci nest pas ncessaire pour dnir le lien vers une icne.
<!DOCTYPE HTML>
<html>
<head>
<meta name="application-name" content="HTML5, CSS3"/>
<meta name="description" content="HTML5 Icne lien"/>
<meta name="application-url" content="IconeLien.html"/>
<link rel="icon" href="Ancre.png" sizes="32x32"/>
<title>Icne de page</title>
</head>
<body>
Icne de lien
</body>
</html>
Lors des tests dafchage de licne dans cinq navigateurs diffrents (Safari,
Chrome, Opera, Firefox et Internet Explorer), seuls Opera et Firefox taient capables
dafcher licne. Vous noterez galement que les navigateurs des terminaux mobiles
nafchent pas non plus licne. La gure 7.3 indique lemplacement o les icnes
apparaissent (une petite ancre verte) dans les navigateurs Opera et Firefox.
Pour la cration de licne, jai utilis un chier .png dni avec la taille par dfaut
de 32 x 32 pixels. Vous pouvez utiliser dautres tailles, mais les limites ne sont pas
claires (il faut cependant que la hauteur et la largeur de limage soient identiques).
7.1.3 Prchargement
HTML5 a introduit une nouvelle valeur pour lattribut rel de llment link :
prefetch. Supposons que vous ayez une page qui soit un peu lourde car elle contient
136
Figure 7.3 Affichage des icnes dans Firefox et Opera.
de grandes images, des contenus vido ou audio. Avant que les utilisateurs naillent
sur cette page, ne serait-il pas intressant de prcharger la page (les images et tout le
reste) de telle sorte que quand ils cliquent sur le lien, tout le contenu soit dj prt ?
Cest la raison dtre du prchargement (que lon appelle aussi prefetching). Quand
le navigateur est au repos, le prchargement lui donne quelque chose faire. Par
exemple, le code suivant utilise le prefetching pour charger une vido :
<link rel="prefetch" href="Test.mov">
Ainsi, quand lutilisateur va sur la page qui contient la vido, elle a dj commenc
se charger ou elle peut mme stre charge compltement et tre prte tre lue.
Voici quelques autres exemples :
<link
<link
<link
<link
href
<link
rel="prefetch" href="monkeys.html">
rel="prefetch" href="monsterTrucksFull.png">
rel="prefetch" href="http://www.sandlight.com">
rel="prefetch alternate stylesheet" ="http://wherever.org/fall.css">
rel="prefetch" href="Vacances.mp4" title="Vacances dt">
Avant de commencer envisager dutiliser la valeur prefetch sur chaque page qui
est lie une page lourde , vous devez rchir la probabilit quont les utilisateurs
de visiter cette page en question. Par exemple, supposons que vous conceviez un site
Web pour un grand magasin et que les utilisateurs puissent slectionner plusieurs
images de produits. Si la page Web prcharge toutes les images, cela va surcharger
inutilement lordinateur de lutilisateur. Ainsi, au lieu dobtenir une rponse rapide,
7.2 Liens de pages
137
on risque au contraire de ralentir le processus cause de toutes les images prcharges

qui sont en mmoire.
Pour optimiser le prchargement, vous devez organiser vos pages de telle sorte
que les liens vers une page lourde aient un chemin qui limite le prchargement. Les
pages qui incluent des mdias qui ncessitent un temps consquent de chargement ne
doivent tre accessibles que par un nombre limit de chemins.
7.1.4 Autres attributs link

Parmi les autres attributs link, on peut lister :
href : pointe sur des feuilles de styles et des icnes externes.
media : spcie le type de mdia pour link (screen, PDF, print) ; si aucune valeur
nest assigne, la valeur par dfaut est all .

hreflang : fournit la langue dune ressource ( titre purement informatif).
type : identie le type du contenu du chier, comme text/css ou les types
MIME.
sizes : spcie les dimensions dune icne, comme 32x32, 48x48, et dautres
tailles utilises pour les images employes en tant quicnes.
title : a une relle valeur quand on utilise des feuilles de styles alternatives,
sinon cet attribut est purement informatif.
Comme vous lavez constat dans les exemples utilisant lattribut rel, ces autres
attributs sont souvent employs conjointement avec rel.
7.2 LIENS DE PAGES

Llment a en HTML5, ainsi que dans les versions prcdentes de HTML, est lun des
lments cls du langage. Son utilisation principale est de charger une page laide
de lattribut href. Sans lattribut href, la balise <a> peut servir de placeholder, mais
dans la pratique, llment a est vritablement une combinaison de llment et de
lattribut. Cest pourquoi on a tendance se le reprsenter sous la forme a href ou
<a href> plutt que sous la forme de llment individuel a. Cette section tudie les
nuances de llment a en se concentrant sur lattribut href, mais on va commencer
par lutilisation de lattribut rel avec llment a.
7.2.1 Attribut rel en dtail

Lattribut rel nest pas li qu llment link, et alors que la plupart des valeurs rel
assignes link sappliquent aussi aux lments a et area, seul un sous-ensemble
sera tudi ici. Vous trouverez ci-dessous la liste complte des valeurs applicables
lattribut rel de llment a :
alternate
138
archives
author
bookmark
external
first
help
index
last
license
next
nofollow
noreferrer
prev
search
sidebar
tag
up
Parmi celles-ci, un certain nombre sert lorganisation de la navigation et nous

les aborderons en dtail au chapitre 8. Par exemple, index, first, last, prev et next
(entre autres) font tous rfrence lordre de navigation. Jen parle ici de telle sorte
que lorsque nous tudierons la navigation dans son ensemble au chapitre 8, vous serez
dj familier de ces concepts. Dautres valeurs assignes lattribut rel de llment a
concernent lidentication de certaines caractristiques, comme lauteur du lien ou
un lien daide, sujet par lequel nous allons commencer.
Relations avec lauteur

Parfois, une page Web comprend lauteur de la page de manire ce que lon puisse le
contacter. Pour faciliter lidentication, une valeur author peut tre assigne au lien.
Dans de telles situations, il est courant dutiliser un lien mailto: dans une assignation
href. Par exemple, le listing suivant (LienAuteur.html disponible dans les chiers du
chapitre) utilise la valeur author avec le lien mailto:.
<!DOCTYPE HTML>
<html>
<head>
/* FFF8E3,CCCC9F,33332D,9FB4CC,DB4105 */
body {
font-size:11px;
background-color:#CCCC9F;
color:#33332D;
}
h1 {
7.2 Liens de pages
139
background-color:#33332D;
color:#9FB4CC;
text-align:center;
}
h2 {
background-color:#DB4105;
color:#FFF8E3;
}
a {
font-size:9px;
color:#DB4105;
}
</style>
<title>Auteur</title>
</head>
<body>
<header>
<h1>Tout sur HTML5</h1>
</header>
<article>
<header>
<h2> En cela repose la sagesse des anciens </h2>
</header>
<section> Whoaaa !―<em>La sagesse des anciens ?</em>―C est une
lourde responsabilit ! Pourquoi pas―<em>Le mieux que je puisse faire
depuis 2010 ?</em>
<p> Au fait, qui a crit cette chose ?</p>
<h3>Il la fait !↓</h3>
<footer>
<nav><a href="mailto:bill@billzplace.net" rel="author">Bill
Sanders</a></nav>
</footer>
</section>
</article>
</body>
</html>
En crant le lien de ladresse lectronique de lauteur, llment a est styl et il se

dbarrasse du soulignement qui est le style par dfaut des liens. Cette couleur discrte
se remarque bien et, dans une certaine mesure, toute la page est conue pour attirer
lattention de lutilisateur sur le lien. Comme vous pouvez le constater la gure 7.4,
quand le curseur de la souris survole le lien, ladresse lectronique de lauteur apparat
dans un encadr.
Llment cite peut tre confondu avec la valeur author assigne lattribut rel
dun lment a. Tout dabord, cite est un lment indpendant ; de plus, il met en
italique le contenu dun conteneur cite. Par exemple, lextrait suivant illustre la
manire dont les deux mots-cls sont utiliss dans le mme paragraphe :
<p>La plupart des citations peuvent se trouver dans luvre de <a
href="http://www.willieS.com" rel="author">William Shakespeare</a>, notamment
140
le clbre livre de rfrence, <cite>Camford s Complete Works of the

Bard</cite>.</p>
Figure 7.4 Utilisation dun lien de ladresse lectronique de lauteur.
Ce code gnre le texte suivant :

La plupart des citations peuvent se trouver dans luvre de William Shakespeare,
notamment le clbre livre de rfrence, Camfords Complete Works of the Bard.
Comme vous pouvez le constater, quand on place ce code dans une page Web,
la valeur author est informative et llment cite modie lapparence du texte.
certains gards, les deux sont informatifs en ce sens o chacun attire lattention sur le
contenu, lun dans le code et lautre lcran.
Types de liens hirarchiques et squentiels

Vous pouvez organiser vos liens en utilisant la fois des types de liens hirarchiques
et squentiels. Les valeurs rel hirarchiques comprennent index et up. La valeur up
fait rfrence au niveau suprieur dans la hirarchie et index fait rfrence au sommet
de la hirarchie. Par exemple, le code suivant fait rfrence un rpertoire qui est
sommet de la hirarchie, trois niveaux au-dessus de la page appelante :
<a href="/" rel="index up up up">Accueil</a>
Le chemin de cet exemple est exprim en rfrenant la fois le niveau dindex et

le nombre de niveaux up.
Les types de liens squentiels comprennent first, last, next et prev, chaque
mot-cl tant relatif une page au sein dune squence. Par exemple, le code suivant
va la page suivante par rapport la page de la squence :
<a href="page4.html" rel="next">Page 4</a>
7.2 Liens de pages
141
Limplmentation de ces types de liens est diffrente selon les navigateurs et il est
prfrable de les utiliser avec llment link an de planier lorganisation dun site
par rapport une page donne plutt que de relier directement une page avec un
lment a.
7.2.2 Ancres de page et ID

Outre le lien direct sur une page, vous pouvez faire un lien sur un emplacement
spcique dune page. Pour ce faire, on peut assigner une ancre une balise de la page
en utilisant lattribut name. Par exemple, le code suivant sautera lemplacement de
la page en cours o se trouve le nom developpeur :
<a href="#developpeur">Dveloppeurs</a>
Pour dnir la cible avec une ancre, il suft dassigner une balise le nom de
lancre de la manire suivante :
<div name="developpeur">
Quand on teste la technique de lancre sur les navigateurs HTML5, on saperoit

quil y a des erreurs. Les navigateurs HTML5 semblent avoir adopt cette technique
en utilisant exclusivement CSS3 pour crer des ID. Lexemple suivant (IDAncre.html
disponible dans les chiers du chapitre) montre comment utiliser les ID en tant
quancres :
<!DOCTYPE HTML>
<html>
/*D4CBA0,BD4A14,804130,4F3C33,6D7F59*/
body {
background-color:#D4CBA0;
color:#804130;
}
h1 {
color:#4F3C33;
background-color:#BD4A14;
text-align:center;
}
h2 {
color:#6D7F59;
}
h3 {
margin-left:15px;
color:#4F3C33;
}
a {
font-size:11px;
142
color:#BD4A14;
}
nav {
text-align:center;
}
#fsquirell { };
#cats { };
#dogs { };
</style>
<head>
<title>Ancres</title>
</head>
<body>
<article>
<header>
<nav><a href="#fsquirrel">cureuils volants</a> | <a
href="#chats">Chats</a> | <a href="#chiens">Chiens</a></nav>
<h1>Soins animaliers</h1>
Si vous ntes pas intress par les cureuils volants, vous pouvez
slectionner les ancres "Chat" ou "Chien" pour aller directement votre sujet
de prdilection. </header>
<section ID="fsquirrel">
<header>
<h2>Bien-tre des cureuils volants</h2>
</header>
<h3>Hangars</h3>
<h3>Pistes datterrissage</h3>
<h3>Formation au vol</h3>
<h3>Nourriture</h3>
<h3>Bagages (ces cureuils en ont beaucoup...)</h3>
</section>
<section ID="chats">
<header>
<h2>Bien-tre des chats</h2>
</header>
<h3>Panires</h3>
<h3>Grattoirs</h3>
<h3>Litires</h3>
<h3>Nourriture</h3>
<h3>Souris en peluche</h3>
</section>
<section ID="chiens">
<header>
<h2>Bien-tre des chiens</h2>
</header>
<h3>Niches</h3>
<h3>Promenades</h3>
<h3>Dressage</h3>
<h3>Nourriture</h3>
<h3>Balles en mousse</h3>
</section>
<footer>
<nav><a href="#fsquirrel">cureuils volants</a> | <a
href="#chats">Chats</a> | <a href="#chiens">Chiens</a></nav>
143
7.2 Liens de pages
</footer>
</body>
</html>
Quand on utilise des ID CSS3 la place dancres sur des terminaux mobiles, on
trouve que la conception nest pas trop contraignante eu gard la petite taille de
lcran. Comme vous pouvez le voir la gure 7.5, les ancres facilitent la navigation
sur la page dun terminal mobile.
la gure 7.5, lcran de gauche illustre la page initiale sur un navigateur Opera
Mini. Quand on clique sur le lien Chiens, la page se positionne directement sur
linformation relative aux chiens. Vous remarquerez que le menu se situe la fois au
sommet et au bas de la page. En gnral, si votre page est sufsamment longue pour
ncessiter des ID pour se dplacer, il est prfrable davoir un menu en haut et en bas
de la page. Si la page est trs longue, vous pouvez fournir un ID llment nav puis
lier chaque section au menu.
Si vous voulez dnir directement un lien vers un ID ou une ancre, vous pouvez
simplement ajouter #nom_ID lURL. Par exemple, si vous voulez crer sur votre site
(ou mme sur un autre site) un lien direct sur les informations relatives aux chats, il
suft de crer le lien suivant :
<a href="http://my.domain.com/IDAncre.html#chats">
Figure 7.5 Utilisation dID la place dancres.
Si lon est dans le mme rpertoire, il suft dcrire :

<a href="IDAncre.html#chats">
144
Au chapitre 8, vous verrez comment utiliser les ID et les ancres lors de la

planication dune stratgie de navigation.
7.2.3 Target
Jusqu prsent, tous les liens remplaaient la page appelante par une nouvelle page qui
tait charge dans la fentre du navigateur. Vous pouvez cependant utiliser lattribut
target avec la balise <a> pour modier la faon dont une page apparat (on appelle cela
le contexte de navigation). Il existe plusieurs contextes de navigation avec lattribut
target :
_self remplace la page en cours ; cest le comportement par dfaut si aucun
contexte de navigation nest prcis.

_blank ouvre la nouvelle page dans une nouvelle fentre de navigateur, ce qui
cre un nouveau contexte de navigation.

_parent ouvre une nouvelle page dans le document parent de la page en
cours. Le document parent est en gnral la fentre du navigateur qui a provoqu
louverture de la page en cours.
_top ouvre la nouvelle page dans la totalit de la fentre du navigateur.
Ces contextes de navigation sont assigns de la manire suivante :
<a href="somePage.html" target="_blank">
La barre de soulignement (underscore) dans le nom de tous les contextes de

navigation est obligatoire, ce qui signie que le code suivant ne fonctionnera pas :
target =blank
Dans les versions prcdentes de HTML, les lments frame et frameset, qui
taient abondamment utiliss, pouvaient tous les deux tre utiliss comme valeurs de
lattribut target. De la mme manire, les contextes de navigation _parent et _top
taient utiliss pour ouvrir une page dans un cadre diffrent. En HTML5, la principale
utilisation de lattribut target consiste slectionner le contexte _blank par rapport
au comportement par dfaut _self.
Nouveaux contextes de navigation dans les navigateurs pour ordinateur personnel

Quand on utilise lattribut target de llment a pour crer un contexte de navigation
_blank sur un ordinateur, la page actuelle reste lcran et la page demande
apparat dans une nouvelle fentre de navigateur ou un nouvel onglet. Le programme
suivant (LienVersCible.html disponible dans les chiers du chapitre) est une simple
illustration de la manire dont cela fonctionne.
<!DOCTYPE HTML>
<html>
<head>
7.3 Utilisation des iframes
145
h1 {
color:#060;
}
a {
color:#900;
}
h3 {
}
</style>
<title>Ouvre une nouvelle page</title>
</head>
<body>
<header>
<h1>Page originale</h1>
</header>
<nav>
<h3><a href="http://www.w3.org" target="_blank">World Wide Web</a></h3>
</nav>
</body>
</html>
En fonction des paramtres du navigateur, la nouvelle page peut apparatre dans

un nouvel onglet au lieu dune fentre spare. Vous pouvez dplacer longlet pour
crer une fentre spare de telle sorte que les deux pages puissent tre visualises de
manire simultane.
Nouveaux contextes de navigation dans les navigateurs pour terminal mobile

Quand une page Web utilise un contexte de navigation _blank sur un priphrique
mobile, on na pas la possibilit de visualiser plusieurs pages la fois dans une seule
fentre. Au lieu de cela, la page appelante est traite comme une page prcdente
(dans Opera Mini) laquelle on peut accder en appuyant sur la che de retour ou
par toute autre mthode. Le navigateur Safari de liPhone possde une icne dans le
coin infrieur droit qui indique le nombre de pages actuellement charges. Quand
lutilisateur tape sur cette icne, il peut visualiser jusqu huit pages dans une fentre
o il a la possibilit de les faire glisser pour les afcher squentiellement. La gure 7.6
illustre ce fonctionnement sur le navigateur Safari de liPhone.
Si la page est ouverte en utilisant un contexte de navigation _blank dans Safari
mobile, elle ne possde pas de lien de retour comme dans le navigateur Opera Mini ;
cependant, elle est ouverte dans une nouvelle fentre de navigateur en mme temps
que la page appelante.
7.3 UTILISATION DES IFRAMES

Llment iframe dclare un cadre insr (iframe est labrviation de inline frame que
lon traduit en gnral par cadre insr). En utilisant des cadres insrs, vous pouvez
146
Figure 7.6 Affichage de plusieurs pages dans Safari sur un iPhone.
charger dautres pages Web ou dautres mdias au sein dune seule page Web. Llment
reprsente ce que lon appelle un contexte de navigation imbriqu. La section
Target de ce chapitre a trait des diffrents contextes de navigation en termes
de fentres et donglets diffrents, mais un contexte de navigation imbriqu se produit
quand une page est imbrique lintrieur dune autre page. Fondamentalement, une
balise <iframe> place une page Web lintrieur dune autre page Web.
On peut se poser la question de lintrt dune telle fonctionnalit alors quil suft
douvrir une nouvelle fentre ou un autre onglet. Cela permet en fait aux utilisateurs
davoir une ide de ce quil y a dans ces pages pour quils puissent ensuite sy rendre
sils trouvent leur contenu pertinent.
On peut aussi utiliser les iframes pour placer des vignettes graphiques sur une page,
et ainsi permettre de slectionner diffrentes vignettes an dafcher limage dans sa
taille relle. Vous pouvez ainsi crer une seule page Web o lutilisateur peut visualiser
plusieurs images diffrentes et slectionner les liens graphiques qui afchent limage
sur la mme page, sans quil soit ncessaire dutiliser JavaScript ou Ajax.
7.3.1 Imbrication de pages Web

Llment HTML5 iframe possde plusieurs attributs, dont certains sont nouveaux en
HTML5, mais pour commencer, vous avez uniquement besoin de connatre la balise
7.3 Utilisation des iframes
147
de base et la manire dont elle fonctionne. Le code suivant constitue le squelette

dune balise <iframe> avec une page Web imbrique :
<iframe src="http://www.w3.org"></iframe>
Cette balise place simplement la page Web source dans le coin suprieur gauche
de la page appelante. An de mieux comprendre les options de la balise iframe, le
programme suivant (iframe.html disponible dans les chiers du chapitre) embarque
deux pages Web diffrentes lintrieur dune page Web et ajoute plusieurs attributs
que vous pouvez voir.
<!DOCTYPE HTML>
<html>
<head>
/*657BA6,F2EDA2,F2EFBD,F2DCC2,D99379*/
body {
background-color:#F2EDA2;
}
h1 {
color:#657BA6;
}
</style>
<title>Iframe</title>
</head>
<body>
<!DOCTYPE HTML>
<html>
<body>
<article>
<header>
<h1>Avant iframes</h1>
</header>
<section>
<iframe name="info" width="480", height="320" sandbox="allow-same-origin"
seamless src="http://www.smashingmagazine.com"></iframe>
<iframe name="info2" width="480", height="320" sandbox seamless
src="http://www.w3.org"></iframe>
</section>
<footer>
<h1>Aprs iframes</h1>
</footer>
</article>
</body>
</html>
</body>
</html>
Dans les deux balises <iframe>, vous pouvez voir plusieurs attributs, dont certains
ont dj t utiliss avec dautres lments. Llment iframe lui-mme possde les
sept attributs suivants (plus les attributs HTML5 globaux) :
148
src
srcdoc
name
sandbox
seamless
width
height
Les attributs srcdoc, sandbox et seamless sont nouveaux. Lors de la rdaction

de cet ouvrage, lattribut srcdoc navait pas encore t implment dans un seul des
navigateurs tests, mais quand il le sera, il permettra lafchage dun chier source
texte/HTML avec des informations spciques pour liframe. Lattribut sandbox, qui
est implment dans le navigateur Google Chrome, est utilis pour restreindre, des
ns de scurit, les types de contenu et les fonctionnalits qui sont disponibles dans
un iframe. Lattribut seamless na pas encore t implment non plus, mais quand
il le sera, tous les liens seront ouverts dans le contexte de navigation parent et non
pas dans le contexte de navigation imbriqu ( lintrieur de liframe). Les anciens
navigateurs et les navigateurs HTML5 qui ne les ont pas encore implments ignorent
tous ces nouveaux attributs iframe. Par consquent, vous pouvez ajouter les attributs
aux balises <iframe> pour prendre de bonnes habitudes de telle sorte que lorsquils
seront disponibles, ils puissent amliorer la scurit de vos pages Web. La gure 7.7
illustre la manire dont les pages imbriques apparaissent sur lcran dun ordinateur.
Les titres h1 avant et aprs les pages imbriques ne sont pas soumis au style CSS3
de la page parente. Vous pouvez aussi voir que chaque page est lintrieur dune page
(avant et aprs linsertion des deux autres pages Web).
Si vous examinez le code, vous verrez que les dimensions (320 x 480) suggrent
que la rsolution dafchage a t optimise pour un priphrique mobile. Quand
on teste le code sur un terminal mobile, liframe souvre cependant pour afcher la
totalit des pages imbriques. Comme il ny a pas de barres de dlement sur les
terminaux mobiles, la seule alternative pour afcher la totalit du contenu des pages
imbriques consiste donc leur permettre de dler horizontalement et verticalement
lintrieur de liframe. De prime abord, cela peut sembler contraire ce qui est prvu
pour lutilisation des iframes sur les terminaux mobiles, mais vous verrez au chapitre 8,
comment les iframes peuvent tre employs comme des sites Web page unique
optimiss pour les navigateurs mobiles.
7.4 VOUS DE JOUER !

La conception dun site Web peut se rvler trs amusante et lun des ds relever
consiste ce que tous les liens fonctionnement parfaitement de concert. Dans le
prochain chapitre, vous allez tudier les stratgies de navigation, mais pour le moment,
vous devez vous entraner prparer toute une srie de liens et dicnes. Voici votre
travail :
7.4 vous de jouer !
149
Figure 7.7 Imbrication de pages Web au sein dune mme page Web.
1. Crez trois pages Web dans lesquelles vous inclurez plusieurs sections avec des
titres et des sous-titres, de telle sorte que lutilisateur devra faire dler lcran
pour voir les sections du bas.
2. Sur chacune des pages Web, dnissez un lien vers une icne (voir Icnes de
liens dans ce chapitre). Cest vous de choisir si vous voulez que chaque page
ait une icne diffrente ou bien quil y ait une icne de site qui soit identique
pour toutes les pages.
3. Crez deux feuilles de styles diffrentes CSS3 (externes) et proposez un accs
ces feuilles de styles alternatives sur tous les pages (voir Feuilles de styles
alternatives dans ce chapitre).
4. Crez une troisime feuille de styles qui ne contiendra que des ID qui seront
utiliss la place dancres. Placez un ID dans chaque section de vos pages.
5. Pour nir, crez des liens sur chacune des trois pages qui renverront aux deux
autres pages et sur tous les ID de chaque page.
6. Prenez le temps de raliser cet exercice. Vous pouvez crer des pages sur
nimporte quel sujet et il ny a pas de raison de se prendre au srieux ( moins
que vous ne pensiez une application pour un client !). Vous navez donc pas
vous proccuper du contenu et vous avez carte blanche pour exprimer votre
crativit.
8
Stratgies de navigation
Objectif
On dsigne habituellement le parcours dun site Web sous le terme de navigation, et
HTML5 accrdite cela en proposant une balise <nav>. La navigation reste simple
quand les sites le sont, mais nimporte quel site Web peut virtuellement tre expos
une navigation inadapte. De la mme manire, une bonne navigation peut rendre
convivial le site le plus complexe et permettre lutilisateur de trouver tout ce quil
recherche.
Dans la mesure o ce livre est consacr HTML5, ce chapitre va vous montrer
comment dnir diffrents systmes de navigation avec les lments spciques de
HTML5. Mais avant de rentrer dans les dtails, vous devez comprendre quelques
concepts gnraux de la navigation Web.
8.1 CONCEPTS DE NAVIGATION WEB

Quand ils rchissent la navigation, les concepteurs Web prennent en considration
les lments suivants :
Conception de linterface : Jennifer Tidwell dcrit parfaitement la conception
dinterfaces pour le Web dans son ouvrage Designing Interfaces. La plupart des
processus et des modles que traite Tidwell dans son livre sont tudis dans ce
chapitre, mais je nai pas la prtention dtre aussi profond et exhaustif sur ce
sujet ; cest la raison pour laquelle si vous souhaitez obtenir plus dinformation
sur la conception dinterfaces, vous ne devez pas hsiter consulter son livre.
152
Chapitre 8. Stratgies de navigation
Conception de linformation : Edward Tufte, grand spcialiste de la conception
de linformation, a montr comment diffrents types dinformations peuvent

tre prsents de telle sorte quils soient plus facilement assimilables. En ce qui
concerne la conception de la navigation Web, il a introduit lide que linformation est linterface. En dautres termes, la navigation est de linformation
dispose de telle sorte que les utilisateurs puissent trouver ce quils cherchent.
Les concepts de Tidwell ou de Tufte ne peuvent pas tre rsums dans une jolie
dnition. On peut parler dinteraction comme dune rponse une autre action,
comme quand deux personnes sont en train de discuter. Il sagit dinteraction sociale
et cest quelque chose que nous faisons tout le temps (y compris linteraction par le
biais dun ordinateur, comme dans le cas du chat). Le mme concept sapplique au
traitement dune page Web qui peut tre considre comme une personne. Lutilisateur
fait quelque chose et la page Web rpond partir dun ensemble ni de choix que le
concepteur a cr. Plus le concepteur soigne son travail, plus lutilisateur se sentira
laise. Lobjectif de toute conception dinteraction qui se respecte est de tenter de
crer un environnement dinteraction confortable.
8.1.1 Navigation de concepteur et navigation dutilisateur

La conception de navigation comporte un nombre presque inni de possibilits, et il
est souhaitable de dterminer un parcours navigationnel qui permette aux utilisateurs
de se dplacer facilement. La premire chose que vous devez vous demander est de
savoir quel sera lutilisateur typique de votre site. Ensuite, vous devez vous persuader
que vous ne reprsentez pas lutilisateur lambda de votre site. Jennifer Tidwell en
fait dailleurs sa maxime en matire de conception dinterface : Connaissez vos
utilisateurs car ils ne vous ressemblent pas ! . On peut ajouter deux corollaires cette
maxime :
Meilleur est le concepteur, plus il y a de risques que linterface soit mauvaise.
Les dveloppeurs excellents conoivent presque toujours de pitres interfaces.
Dans ces conditions, si vous aspirez devenir un bon concepteur ou un bon

dveloppeur, vous allez probablement concevoir de mauvaises interfaces, moins que
vous ny fassiez attention. Voici pourquoi : les bons concepteurs se concentrent sur
laspect de la page, et pas sur la facilit de dplacement des utilisateurs sur lensemble
du site. Les concepteurs veulent montrer leur crativit, ce qui est une bonne chose,
mais quand cela empche les utilisateurs de naviguer dune page une autre, cela
constitue un problme.
Lune des pires interfaces utilisateur jamais conues est celle du site Web du MoMA,
le muse dart moderne de New York. La navigation est base sur une pile de cubes
dpourvus de libells. Les utilisateurs sont censs positionner leur souris sur chaque
cube pour que le libell de larticle point apparaisse. Pour que le site du MoMA
fonctionne, il a pourtant fallu une programmation labore. Le code aurait sans doute
ravi nimporte quel dveloppeur, mais il a conduit la catastrophe car, comme le
concepteur, le dveloppeur a pens ses talents de codeur et non pas lutilisateur du
8.1 Concepts de navigation Web
153
site. Afcher le nom du lien quand la souris survole un cube ncessite des comptences
en programmation quun concepteur ne possde pas forcment. Si vous voulez crer un
systme de navigation franchement mauvais, il ne vous reste donc plus qu associer
le meilleur concepteur et le meilleur dveloppeur !
Est-il possible dtre un bon concepteur et/ou un bon dveloppeur tout en crant
de bonnes interfaces ? Assurment, mais vous devez y rchir. Vous devez adopter le
point de vue de lutilisateur typique de votre site Web. Qui sont vos utilisateurs ? Est-ce
que ce sont des enfants ou des adultes ? Votre public est-il plutt fminin ou masculin,
ou bien quitablement rparti ? Quelle est sa moyenne dge ? Quel est le style de
lutilisateur ? Sagit-il dhommes daffaire ? Si tel est le cas, quelle est leur activit et
quelle place occupent-ils au sein de leur entreprise ? Est-ce quils sont dirigeants ou
bien employs ? Vous devez dterminer qui sont vos utilisateurs (car vous savez dj
qui vous tes).
Si vous tes un concepteur et que vous crez un site Web pour dautres concepteurs
Web, voulez-vous leur montrer quel bon concepteur vous tes ou bien comment
ils peuvent devenir de meilleurs concepteurs ? De la mme manire, si vous tes
un dveloppeur et que vous crez un site pour dautres dveloppeurs, vous voulez
absolument leur montrer du code qui leur permettra damliorer leurs comptences en
programmation. Les dveloppeurs veulent voir du code, alors que ce nest pas le cas
des concepteurs qui sont plus intresss par les outils et les techniques de conception
(les concepteurs adorent bien entendu le code CSS3 !). Vous devez donc travailler
votre projet de navigation en gardant toujours lesprit ce qui est souhaitable pour
vos utilisateurs.
Le meilleur moyen de savoir si votre interface est correcte consiste la tester avec
des utilisateurs reprsentatifs. Si vous crez un site ducatif pour des coliers, il faut
le tester avec des coliers. De la mme manire, si vous vendez des produits de haute
couture des femmes aises, il nest pas souhaitable de faire tester votre navigation
par des adolescentes. Cela vous prendra un peu plus de temps, mais vous aurez un bien
meilleur site si vous testez votre site avec le type de public qui lutilisera.
Le fait de connatre vos utilisateurs ne signie que vous pouvez vous dispenser de
soigner la conception et dutiliser des technologies sophistiques. Cela signie que
vous devez imaginer ce quils vont penser de votre site. Vous nallez pas changer vos
utilisateurs et vous devez donc raliser le site pour eux, et non pas pour vous. Si le site
ne leur convient pas, ils ny retourneront pas.
8.1.2 Navigation globale

La navigation globale dans les pages Web fait rfrence aux grandes catgories de
navigation qui peuvent tre places sur chacune des pages dun site Web. La navigation
globale aide les utilisateurs toujours savoir o ils se trouvent sur un site, ainsi, quel
que soit lendroit o ils sont alls, ils ont toujours porte de clic une feuille de route
qui leur est familire.
Si vous projetez un voyage qui vous mne de la Californie jusqu la cte est des
tats-Unis, vous allez emprunter les grandes autoroutes qui permettent de traverser les
154
diffrents tats. Ces autoroutes peuvent tre considres comme les lments globaux
dun priple de 5 000 kilomtres qui permet de relier les deux ctes. Cependant, vous
serez oblig demprunter quelques routes secondaires pour vous connecter au grand
rseau autoroutier.
De la mme manire, dans la navigation globale, vous devez prendre en compte la
navigation entre les liens principaux. Par exemple, supposons que vous ayez un trs
grand site avec une navigation globale dcompose en trois catgories :
Animal
Vgtal
Minral
Il est possible dorganiser les liens de cette navigation globale en crant sur chaque
page la structure suivante :
Animal | Vgtal| Minral
Mais lintrieur de ces catgories gnrales, vous allez avoir besoin de catgories
plus spciques. Par exemple, supposons quun utilisateur veuille trouver une race
particulire de chien : un Saint-Bernard. Un concepteur pourrait proposer le chemin
suivant :
Animal
Mammifre
Chien
Race
Saint Bernard
Chaque sous-menu ayant de nombreux choix, il nous faut examiner les lments
disponibles en HTML5 pour grer ces chemins de navigation dans le cadre dune
navigation globale.
Utilisation des listes en navigation globale

Pour implmenter la navigation globale, il est possible dutiliser des listes. Examinez,
par exemple, le script suivant (NavigationParListe.html disponible dans les chiers
du chapitre) qui utilise la navigation globale et la navigation locale.
<!DOCTYPE HTML>
<html>
<head>
/* 3C514C,98AB98,D3DFD3,A6A47D,8C1616 */
body {
color:#3C514C;
background-color:#D3DFD3;
}
h3 {
color:#8C1616;
155
background-color:#A6A47D
}
a {
color:#8C1616;
font-size:11px;
}
</style>
<title>Navigation par listes</title>
</head>
<body>
<nav> <a href="#">Animal</a> | <a href="#">Vgtal</a> | <a
href="#">Minral</a> |
<ul>
<h3> Animaux</h3>
<li><a href="#">Mammifres</a></li>
<li><a href="#">Poissons</a></li>
<li><a href="#">Oiseaux</a></li>
<ul>
<h3> Mammifres</h3>
<li><a href="#">Chiens</a></li>
<li><a href="#">Chats</a></li>
<li><a href="#">Autres</a></li>
<ul>
<h3> Chiens</h3>
<li><a href="#">Golden Retriever</a></li>
<li><a href="#">Setter irlandais</a></li>
<li><a href="#">Berger allemand</a></li>
<li><a href="#">Saint Bernard</a></li>
</ul>
</ul>
</ul>
</nav>
</body>
</html>
En vous contentant dtudier le code, vous allez sans doute vous rendre compte
que ce type de systme de navigation va rapidement submerger la page. La gure 8.1
illustre le rsultat mme quand le nombre de choix possibles a t considrablement
rduit.
Avec un cran sufsamment grand et des choix abrgs comme ceux que nous
avons utiliss dans notre exemple, on peut envisager davoir un systme de navigation
avec des balises <ul>, mais ce systme de listes est totalement irraliste dans le cas de
terminaux mobiles. La gure 8.2 montre comment la navigation occupe la totalit de
la fentre sur un tlphone mobile.
Comme vous pouvez le constater clairement la gure 8.2, il est ncessaire
denvisager un autre systme de navigation de telle sorte que les rubriques puissent
tre visualises. En fait, ce systme de navigation ressemble plus la carte du site, sujet
que jaborderai plus tard dans ce chapitre, et il ne peut donc pas tre utilis comme
navigation globale.
156
Figure 8.1 Navigation par liste.
Figure 8.2 La navigation par liste occupe toute la zone daffichage sur un priphrique mobile.
157
8.1.3 Menus droulants et navigation globale

Si lon veut exprimenter une autre approche de la navigation globale laide de liens
textuels, il est possible dutiliser des lments qui offrent plus dinformations dans un
espace plus petit, notamment la balise <select>. Llment select afche le premier
lment dune liste doptions qui peuvent tre vues uniquement quand lutilisateur
clique sur la fentre qui apparat. La syntaxe comprend une balise <select> avec une
balise <option> imbrique au sein du conteneur select. Chaque conteneur option
contient un objet qui est visible quand souvre le menu droulant. Lextrait de code
suivant indique la syntaxe de base :
<select id="animaux" name="global1">
<option value="chevaux">Chevaux</option>
<option value="chiens">Chiens</option>
...
</select>
Cela peut constituer un moyen pratique de placer tous les liens dun site dans
un petit emplacement et de sen servir comme menu global. Vous pouvez imbriquer
autant de balises <option> lintrieur du conteneur <select> que vous le souhaitez.
An de voir comment cela peut sorganiser dans un systme de navigation globale,
le script HTML5 suivant (NavSelect.html disponible dans les chiers du chapitre)
illustre un exemple simple.
<!DOCTYPE HTML>
<html>
<head>
<title>Menu droulant</title>
</head>
<nav>
<label for="animals">Animaux </label>
<select id="animals" name="global1">
<option value="horses">Chevaux</option>
<option value="dogs">Chiens</option>
<option value="cats">Chats</option>
<option value="rabbits">Lapins</option>
<option value="raccons">Ratons laveurs</option>
</select>
<label for="vegetables">Lgumes </label>
<select id="vegetables" name="global2">
<option value="carrots">Carottes</option>
<option value="squash">Courges</option>
<option value="peas">Petits pois</option>
<option value="rice">Riz</option>
<option value="potatoes">Pommes de terre</option>
</select>
<label for="minerals">Mineraux </label>
<select id="minerals" name="global3">
<option value="tin">tain</option>
<option value="gold">Or</option>
<option value="copper">Cuivre</option>
158
<option value="iron">Fer</option>
<option value="mercury">Mercure</option>
</select>
</nav>
<body>
</body>
</html>
Avec toutes ces balises HTML5, vous vous attendez sans doute une page Web de
taille importante, mais la gure 8.3 montre que cela prend trs peu despace.
Le code HTML5 na pas de code CSS3 pour mettre en forme le texte, et comme
vous pouvez le constater, la police par dfaut du corps du texte est une police avec
empattement alors que la police par dfaut du menu est une police sans empattement.
Quand on utilise CSS3 pour styler, on travaille avec la balise <select> pour attribuer
le style et non pas la balise <option>. Si vous stylez llment option, vous pouvez
styler la famille de police avec dexcellents rsultats, mais les autres formes de stylages
sont imprvisibles entre les diffrents navigateurs.
Figure 8.3 Affichages des choix dun menu avec la balise <select>.
Si les catgories apparaissent un peu supercielles, vous pouvez ajouter plus de

dtails dans un format hirarchique en utilisant la balise <optgroup>. Avec chaque
balise, on ajoute un nouveau sous-groupe. Vous pouvez imbriquer les sous-groupes sur
plusieurs niveaux si vous le souhaitez. Le listing suivant (OptionGroup.html disponible
dans les chiers du chapitre) montre lutilisation de llment optgroup avec les balises
<select> et <option>.
<!DOCTYPE HTML>
<html>
<head>
select {
background-color:#F2EFBD;
color:#657BA6;
font-family: Verdana, Geneva, sans-serif;
}
</style>
<title>Menu droulant stratifi</title>
</head>
<nav>
159
<label for="animals">Animaux</label>
<select id="animals" name="global1">
<optgroup label="Chiens">
<option value="hounds">Chien de meute</option>
<option value="work">Chien de travail</option>
<option value="terrier">Terriers</option>
</optgroup>
<optgroup label="Chevaux">
<option value="race">Pur-sang</option>
<option value="work">Cheval de trait</option>
<option value="show">Cheval de parade</option>
</optgroup>
<optgroup label="Lapins">
<option value="pets">Lapin domestique</option>
<option value="pests">Lapin nuisible</option>
<option value="easter">Lapin de Pques</option>
</optgroup>
</select>
</nav>
<body>
</body>
</html>
Lafchage des titres des catgories gnres par llment optgroup diffre selon
les navigateurs. La gure 8.4 illustre les diffrents aspects du mme menu sur plusieurs
navigateurs.
Figure 8.4 Utilisation de la balise <optgroup>.
Parmi les cinq navigateurs tests, seuls Firefox et Internet Explorer mettent en
italique les titres optgroup et conservent la combinaison des couleurs quand le menu
souvre. Les autres navigateurs nafchent la bonne combinaison de couleurs que
lorsque le menu est ferm.
160
8.2 UTILISATION DE JAVASCRIPT POUR APPELER UNE

PAGE LIE
Tout systme de navigation globale a besoin dun moyen dappeler diffrentes pages
Web et les menus droulants ont besoin dun moyen dappeler un lment slectionn.
Jusqu prsent, la balise <a> nous avait donn satisfaction pour la gestion des liens,
mais vous avez probablement remarqu que les menus droulants navaient pas de
liens. La balise <select> doit fonctionner avec llment form (qui est tudi en dtail
au chapitre 14) et une fonction JavaScript (le chapitre 12 fournit des informations
sur lutilisation de JavaScript). Du point de vue de HTML5, lextrait de code suivant
fournit les lments essentiels connatre :
<form name="menuNow">
<label for="animals">Animals</label>
<select id="animals" name="global1" onChange="optionMenu()">
<option value="animals/horses.html">Chevaux</option>
<option value="animals/dogs.html">Chiens</option>
Les noms des lments form et select sont importants car JavaScript les utilise
comme chemin vers loption slectionne (si vous tes familier avec les tableaux, les
options sont toutes traites comme des lments de tableaux).
Le code JavaScript est plac dans un chier spar car si vous voulez lutiliser dans
un systme de navigation globale, il nest pas souhaitable de le rcrire sur chaque
page. Le code JavaScript suivant doit tre enregistr dans un chier texte nomm
globMenu.js.
function optionMenu()
{
var choice = document.menuNow.global1.selectedIndex;
var urlNow = document.menuNow.global1.options[choice].value;
window.location.href = urlNow;
}
Cela rete le DOM (Document Object Model) HTML5. Le document est la page
Web, menuNow est le nom de llment form, global1 est le nom de llment select,
et selectedIndex est loption slectionne. Comme selectedIndex est un nombre
compris entre 0 et le nombre doptions de la balise <select> du conteneur, il peut tre
utilis pour choisir llment de tableau (option) qui est slectionn. Quelle que soit
la valeur stocke, loption est passe la variable nomme urlNow. Par exemple, la
ligne suivante a une URL relative gale animals/dogs.html :
<option value="animals/dogs.html">Dogs</option>
La dernire ligne du code JavaScript, window.location.href = urlNow, a la mme

fonction que le code HTML5 suivant :
8.2 Utilisation de JavaScript pour appeler une page lie
161
<a href="animals/dogs.html">
Dans ce contexte, une fonction JavaScript diffrente devrait tre crite pour
chaque balise <select> car la fonction utilise une rfrence spcique cette balise
(global1). Un code JavaScript plus sophistiqu pourrait tre dvelopp an dutiliser
des variables pour les diffrents noms des lments, mais la fonction employe ici est
relativement courte et plus facile implmenter.
Pour tester cet exemple, crez des pages Web simples ayant les noms suivants :
horses.html
dogs.html
cats.html
rabbits.html
raccoons.html
Les pages Web peuvent tre minimalistes et ne contenir que leur nom. Puis, dans
le mme rpertoire, saisissez le code HTML5 suivant (NavSelectJS.html disponible
dans les chiers du chapitre).
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="globMenu.js" />
<title>Menu droulant</title>
</head>
<body>
<article>
<header>
<nav>
<form name="menuNow">
<label for="animals">Animaux</label>
<select id="animals" name="global1" onChange="optionMenu()">
<option value="animals/horses.html">Chevaux</option>
<option value="animals/dogs.html">Chiens</option>
<option value="animals/cats.html">Chats</option>
<option value="animals/rabbits.html">Lapins</option>
<option value="animals/raccoons.html">Ratons laveurs</option>
</select>
<label for="vegetables">Lgumes</label>
<select id="vegetables" name="global2">
<option value="carrots">Carottes</option>
<option value="squash">Courges</option>
<option value="peas">Petits pois</option>
<option value="rice">Riz</option>
<option value="potatoes">Pommes de terre</option>
</select>
<label for="minerals">Mineraux</label>
<select id="minerals" name="global3">
<option value="tin">tain</option>
<option value="gold">Or</option>
162
<option value="copper">Cuivre</option>
<option value="iron">Fer</option>
<option value="mercury">Mercure</option>
</select>
</form>
</nav>
</header>
</article>
</body>
</html>
Testez la page en utilisant Google Chrome ou Opera car lpoque de la rdaction

de ce livre, ctaient les deux seuls navigateurs avoir implment cet aspect de
HTML5.
Pour le moment, nous ne ferons rien des deux autres menus droulants, mais
la n du chapitre, nous verrons comment les complter avec quelques ajouts dans le
chier JavaScript.
8.3 MAINTENIR LA COHRENCE

Lune des caractristiques les plus importantes dun bon systme de navigation est la
cohrence. Lutilisateur doit tre capable de savoir o trouver le systme de navigation,
quelle que soit la page quil est en train de consulter. Si une page a le systme de
navigation au sommet et que sur le mme site ce nest pas le cas de la page suivante,
les utilisateurs seront perdus. On trouve dans lessai de Ralph Waldo Emerson, La
conance en soi , une maxime sur la cohrence qui est trs souvent mal cite. En ne
citant quune partie de la rexion dEmerson, de nombreuses personnes croient tort
que la cohrence est une mauvaise chose. Voici cette clbre citation errone : ...
la cohrence est le diablotin des petits esprits... , alors que la citation complte est :
Une cohrence mal pense est le diablotin des petits esprits, adore par les petits
hommes dtat, les petits philosophes et les petits thologiens. Avec cohrence, une
grande me na tout simplement plus rien faire. Emerson na en fait jamais dit que
la cohrence tait une mauvaise chose, car cest la cohrence mal pense qui est le
problme, pas la cohrence.
En matire de navigation, la cohrence est essentielle et vous devez par tous les
moyens viter la cohrence mal pense. En dautres termes, il ne faut pas installer un
mauvais systme de navigation puis le dupliquer sous le prtexte que cela est cohrent.
Sil y a cohrence, vous navez pas rinventer le systme de navigation chaque
nouvelle page. Une grande me aurait diffrentes cohrences selon les publics et les
types de sites, mais lintrieur dun mme site, il faut que la cohrence soit constante.
Dans ses travaux sur le regroupement des lments, Jennifer Tidwell voque
lutilisation des codes couleurs pour les sections, an daider les utilisateurs se reprer.
En employant des couleurs, on peut ajouter de la clart la navigation globale. Les
trois catgories globales qui ont t slectionnes pour la navigation (animal, vgtal
et minral) constituent un bon exemple de cohrence multiple (chaque menu est
cohrent avec les autres menus). Pour la catgorie animale, vous pouvez utiliser des
163
8.3 Maintenir la cohrence
tons de marron, pour la catgorie vgtale, des tons de vert et pour la catgorie
minrale des tons argents. La gure 8.5 illustre un exemple de navigation globale o
les diffrentes pages ont un modle de couleurs qui les diffrencie les unes des autres,
tout en les plaant dans les groupes appropris.
Figure 8.5 Navigation globale et regroupement par couleur.
la gure 8.5, vous noterez que la navigation globale incorpore la palette de

couleurs des catgories respectives. Ce serait un bel exemple de cohrence mal pense
si les modles de couleurs taient identiques, alors que dans cet exemple, la navigation
globale est cohrente et chaque page est cohrente avec les autres pages de la mme
catgorie.
8.3.1 Navigation verticale et horizontale
Outre lutilisation du plan horizontal du haut et du bas de la page, les concepteurs

dinterface rservent aussi souvent une portion du ct de la page Web pour la
navigation. La gure 8.6 illustre la conception gnrale de cette approche.
Figure 8.6 Navigation verticale et horizontale.
Quand on utilise les plans horizontal et vertical, il est possible de voir simultanment tous les liens globaux et les liens de la rubrique en cours. Une grande partie
164
de la zone dafchage est prise par le systme de navigation, mais avec les crans de
grande taille qui deviennent la norme sur les ordinateurs, cela ne constitue pas un
problme. Avec les tablettes comme liPad qui ont des crans plus petits, cela prend de
lespace sur la zone dafchage utile, mais il ny a rien de catastrophique. En revanche,
sur les tlphones mobiles, particulirement en mode dafchage vertical, lespace du
contenu est considrablement rduit.
Pour crer une zone de liens verticaux avec HTML5, on a simplement besoin de
dnir une page sur deux colonnes en dessous de la zone gnralement rserve au
logo et la barre de navigation globale.
8.3.2 Application de pseudo-classes CSS3

Quand on gre des systmes de navigation plus complexes, il est souhaitable de crer
des pseudo-classes CSS3. Il sagit de dnitions de classes qui sont ajoutes un
lment. Pour la navigation, les quatre pseudo-classes suivantes sont importantes car
elles sont associes la balise <a> :
link
visited
hover
active
Chacune de ces classes a la mme mise en forme que pour dautres lments, mais
elle est dclare avec le nom de llment spar par le caractre deux-points. Par
exemple, lextrait de code suivant illustre le stylage de la pseudo-classe hover :
a:hover
{
color:#A69055;
}
Quand ce code est ajout une feuille de styles, et lorsque la souris survole le lien
(balise <a>), il modie la couleur de la dnition hover. Bien entendu, les couleurs
dnies pour la balise <a> doivent tre diffrentes de celles de hover, mais vous
pouvez ajouter lintention de lutilisateur des signaux subtils ou agrants que le texte
constitue un lien. De la mme manire, vous pouvez changer dautres caractristiques
en utilisant les pseudo-classes. Les exemples suivants vous donneront quelques ides :
<!DOCTYPE HTML>
<html>
<head>
a {
font-size:11px;
}
a:link {
165
color:#cc0000;
}
a:hover {
font-size:14px;
}
a:visited {
color:#00cc00;
}
a:active {
background-color:#ffff00;
}
</style>
<title>Pseudo-classes en liens</title>
</head>
<body>
<a href="#">Cliquez ici</a>
</body>
</html>
Quand on utilise des pseudo-classes pour la navigation, il est souhaitable de ne

pas perdre de vue lutilisateur. Lajout deffets bizarres laide de pseudo-classes peut
tre amusant, mais vous devez vous poser la question de savoir si ces effets vont
aider les utilisateurs ou bien les perturber. Si vous pouvez ajouter un effet que les
utilisateurs associent la prise de dcision, il est alors probable que cet effet sera utile.
Par exemple, on peut agrandir la police quand la souris passe sur un lien, ce qui est
une ide reprise du dock du Macintosh o les icnes sagrandissent quand la souris
les survole. Cependant, vous devez vous demander si le fait de modier la couleur
dun lien ou bien de changer la taille de la police dun lien est une bonne ide. Est-ce
que cela constitue rellement une aide pour lutilisateur ? Vous devez aussi tester ces
modications sur diffrents navigateurs et voir si les rsultats sont cohrents. Noubliez
pas que ce nest pas parce que vous pouvez modier lapparence dun lien que cela
signie que vous devez le faire.
8.3.3 Mcanisme HTML5 de la navigation verticale

La partie la plus importante de la cration dune section verticale utiliser pour la
navigation de votre site est le dcoupage dune portion de la page o lon puisse
placer les liens. Cet exemple utilise la balise <aside> pour dlimiter la navigation
verticale. Mais comme il sagit de navigation, la balise <nav> est aussi utilise de
telle sorte que toute rfrence JavaScript au DOM (Document Object Model) puisse
reconnatre la section comme une section utilise pour la navigation. Le listing suivant
(VerticalHorizontal.html disponible dans les chiers du chapitre) montre comment
raliser cela.
<!DOCTYPE HTML>
<html>
<head>
166
/*141919,2D2B21,A69055,C9B086,FFB88C -- Art japonais*/
body {
color:#2D2B21;
background-color:#C9B086;
font-size:12px;
}
.content {
display:table-cell;
width:600px;
padding:15px;
}
aside {
display:table-cell;
width:100px;
background-color:#FFB88C;
padding-right:5px;
}
h1 {
font-family:Papyrus;
color:#2D2B21;
text-align:center;
}
h2 {
color:#A69055;
}
a {
font-size:10px;
color:#141919;
}
a:hover {
color:#A69055;
}
.centerNav {
text-align:center;
}
.indentNav {
margin-left:15px;
}
</style>
<title>Web Services gogo</title>
</head>
<body>
<img src="designLogo.png" width="64" height="66" align="left">
<nav class="centerNav"> <a href="#">Conception graphique</a> | <a
href="#">Dveloppement</a> | <a href="#">Conception
dinterface</a> | <a href="#">Architecture de sites</a></nav>
<header>
<h1>Web Services honorables</h1>
</header>
<aside>
<nav class="indentNav"> <a href="#">Aperu gnral</a><br>
<br>
167
<a href="#">Navigation</a><br>
<br>
<a href="#">Abonnement RSS</a><br>
<br>
<a href="#">Iframes</a><br>
<br>
<a href="#">Styles de navigation CSS3</a><br>
<br>
<a href="#">Mesures daudience</a><br>
<br>
<a href="#">Tests de qualit</a><br>
<br>
<a href="#">Ajout doptions mobiles</a><br>
<br>
</nav>
</aside>
<section class="content">
<header>
<h2>Conception dinterface</h2>
</header>
Web Services honorables peut concevoir toutes vos interfaces. Vous pouvez
choisir dans la liste suivante les services que vous dsirez.
<ul>
<li>Interfaces simples de liens textuels</li>
<li>Menus droulants</li>
<li>Liens avec des boutons</li>
<li>Liens avec des listes de donnes</li>
<li>Navigation dans des Iframes</li>
</ul>
Slectionnez lun des liens du menu de gauche pour obtenir plus
dinformations. Assurez-vous galement de consulter nos services de conception
graphique, de dveloppement et darchitecture dans le menu situ en haut de la
page.</section>
</body>
</html>
Quand on excute ce programme, on peut voir que la prsentation est claire bien
quelle offre une grande varit de choix lutilisateur. La navigation globale en haut
de la page offre la totalit des choix principaux, puis sur chaque page lintrieur dune
collection globale, les utilisateurs peuvent choisir des options spciques pour chaque
rubrique slectionne. La gure 8.7 illustre le rsultat dans un navigateur HTML5 sur
lcran dun ordinateur.
Quand on visualise la mme page sur un priphrique mobile, lespace occup sur la
gauche, o le menu vertical a t plac, pousse le contenu vers le bas. Les utilisateurs
doivent ainsi faire dler un peu plus le contenu. Vous noterez aussi que le menu
horizontal en haut de la page est resserr si bien quil tient prsent sur trois lignes.
La gure 8.8 illustre le rsultat sur un tlphone mobile.
Pour les priphriques mobiles, des barres de navigation horizontale deux niveaux
(qui ne poussent pas le contenu en dessous de la zone dafchage) semblent prfrables.
Comme vous pouvez le voir en comparant les gures 8.7 et 8.8, la barre de navigation
horizontale tient sur trois lignes sur le tlphone mobile sans occuper pour autant
trop de place. En revanche, la barre de navigation verticale repousse le contenu (y
168
Figure 8.7 Choix de navigation horizontale et verticale.
compris la barre de navigation elle-mme) et le force descendre en dessous de la

zone dafchage.
8.3.4 Utilisation dicnes pour la navigation

Il est aussi possible dutiliser des chiers graphiques (JPEG, PNG ou GIF) pour crer
des liens vers dautres pages. Lemploi dimages pour les liens peut aider les utilisateurs
trouver rapidement ce quils cherchent. Par exemple, une che vers la droite ou
vers la gauche peut tre rapidement identie comme un lien vers la page suivante ou
la page prcdente. De telles images transcendent les diffrentes langues et parlent
un public plus large. De la mme manire, les jeunes enfants comprennent souvent
plus facilement certains symboles que certains mots.
La syntaxe pour utiliser des images an didentier les liens est la mme que pour
les liens textuels. Cependant, au lieu de placer du texte dans un conteneur <a>, on
utilise une rfrence une image. Lextrait de code suivant illustre la syntaxe de base :
<a href="page2.html"><img src="flecheDroite.jpg"></a>
Les utilisateurs voient licne dune che et cliquent dessus au lieu de cliquer sur
un message textuel. Souvent, les concepteurs utilisent la fois du texte et une image
pour crer un lien vers une autre page, comme dans lexemple suivant :
<a href="page2.html"><img src="flecheDroite.jpg">Page suivante</a>
8.4 Sites page Web unique avec des Iframes
169
Figure 8.8 Menus verticaux et horizontaux sur un terminal mobile.
Certains concepteurs crent aussi des icnes qui incorporent du texte, comme cela
est illustr la gure 8.9.
Figure 8.9 Image de lien avec du texte.
Il y a un avantage utiliser du texte graphique : le concepteur peut utiliser

nimporte quelle police sans craindre que lutilisateur ne dispose pas de cette police
sur son systme. Les symboles graphiques avec du texte favorisent la navigation car ils
sont faciles reprer et comprendre.
8.4 SITES PAGE WEB UNIQUE AVEC DES IFRAMES

Reprsentez-vous un site Web comme une zone de chargement. Quand on clique sur
un lien, on charge une autre page (des images et tout le reste). Parfois, on ne souhaite
170
charger quune seule chose, ce qui gagnerait du temps car lutilisateur naurait pas
charger ou recharger la totalit de la page. Si vous connaissez quelques rudiments de
JavaScript et dAjax, vous pouvez raliser cela, mais quen est-il si lon se contente de
HTML5 ? Cela est possible !
Cette section tudie la manire dont on fait un lien vers une image et on modie
limage dans un iframe. Quand on cre des applications conues spciquement pour
des priphriques mobiles, on souhaite utiliser le moins de bande passante possible. En
modiant une seule chose sur une page Web, le terminal mobile na besoin de charger
ou recharger quun seul lment, si bien que le temps de rponse est plus rapide.
8.4.1 Lien vers une image

Gnralement, quand on voque lajout dune image sur une page, on pense la balise
<img>. Aprs tout, cette balise est ce que lon utilise pour placer des images sur une
page Web. Pourtant, on peut aussi utiliser la balise <a href> pour charger une image.
Au lieu dassigner un chemin de page Web href, on peut tout aussi bien lui assigner
une image. Par exemple, la ligne de code suivante charge une page vide avec une
image :
<a href=="myGraphic.jpg">Mon image</a>
Quand lutilisateur clique sur le texte du lien, la page en cours disparat et limage
apparat dans le coin suprieur gauche de la nouvelle page.
Le fait de placer une image dans un lment iframe fonctionne comme si lon
plaait une page Web dans un iframe (voir le chapitre 7). Le lien pointe vers la cible
lintrieur de liframe au lieu de pointer vers une autre page Web. Cela signie que
la page Web en cours reste en place et que limage souvre dans liframe.
Le script suivant utilise des icnes pour la navigation, mais au lieu de passer une
autre page, la navigation place une image diffrente dans la zone dafchage principale
(un iframe). En ralisant des versions miniatures des images afcher (que lon appelle
des vignettes), les utilisateurs voient dabord leur slection dans la conception de la
navigation. Cela signie que les vignettes guident lutilisateur vers lafchage en plein
cran.
8.4.2 Ralisation et utilisation dicnes servant de vignettes

An de prparer lapplication, il faut dabord crer les versions en pleine taille des
images, puis les vignettes associes. Les images et les vignettes doivent toutes tre de
la mme taille. Dans lexemple suivant, les images ont une taille de 250 x 312 pixels,
et les vignettes de 63 x 79 pixels. Les vignettes doivent tre sufsamment petites pour
servir de bouton de navigation, mais aussi sufsamment grandes pour que lutilisateur
ait une ide de laspect de limage en pleine taille. Vous remarquerez que les dimensions
de liframe sont identiques celles des images en pleine taille. Une fois que les images
sont ralises, elles sont places dans des rpertoires spars (un rpertoire pour les
171
vignettes, nomm thumbs, et un autre pour les images, nomm portraits). Le listing
NavigationIFrame.html est disponible dans les chiers du chapitre.
<!DOCTYPE HTML>
<html>
<head>
/*F2CF8D,401E01,F2AA6B,8C3503,F28D52*/
body {
background-color:#F2CF8D;
color:#401E01;
font-size:11px;
}
h1 {
font-family:"Harrington", Arial, sans-serif;
font-size:36px;
color:#8C3503;
margin-left:10px;
}
h4 {
color:#8C3503;
margin-left:86px;
}
aside {
margin-left:10px;
}
h5 {
margin-right:40px;
}
</style>
<title>Navigation Iframe</title>
</head>
<body>
<!DOCTYPE HTML>
<html>
<body>
<article>
<header>
<h1>Portrait Studio</h1>
</header>
<aside>
<iframe name="fullSize" width="250", height="312" seamless
src="portraits/man.jpg"></iframe>
</aside>
<section>
<nav> <a href="portraits/man.jpg" target="fullSize"><img
src="thumbs/thumbMan.jpg"></a> <a href="portraits/woman.png"
target="fullSize"><img src="thumbs/thumbWoman.png"></a> <a
href="portraits/boy.jpg" target="fullSize"><img src="thumbs/thumbBoy.jpg"></a>
<a href="portraits/girl.png" target="fullSize"><img
src="thumbs/thumbGirl.png"></a>
<h4>Selectionnez un portrait</h4>
</nav>
172
</section>
<section>
<h5> Toutes les crations sont de <b>Mo Digli Anni</b>, artiste peu connu
habitant Spunky Puddle, dans lOhio. En cliquant sur les boutons des vignettes,
vous pouvez envoyer limage dans une fentre de visualisation plus grande.</h5>
</section>
</article>
</body>
</html>
Quand on teste lexemple, on voit le portrait dun homme puis les quatre vignettes
reprsentant un homme, une femme, un garon et une lle en dessous de limage
lintrieur de liframe. La gure 8.10 illustre la page afche sur lcran dun ordinateur.
Comme vous pouvez le constater la gure 8.10, on demande lutilisateur de
cliquer sur les boutons des vignettes pour voir les diffrents portraits. Linterface est
assez intuitive et lutilisateur sait ce qui lattend quand il clique sur lun des boutons
graphiques. Lintrt de la chose est que seule limage du portrait slectionn est
charge dans liframe et non pas la totalit dune nouvelle page avec tous les boutons
graphiques et les autres composantes de la page.
Figure 8.10 Images utilises pour la navigation.
173
8.4.3 Utilisation diframes sur des terminaux mobiles

Quand on teste lapplication sur un priphrique mobile, le rsultat dpend du
navigateur HTML5 utilis. La gure 8.11 illustre le navigateur Opera Mini sur la
gauche ; comme vous pouvez le constater, le texte en dessous de limage est mis en
forme de telle sorte quil soit lisible. Pourtant, pendant les tests, le navigateur Opera
Mini semblait recharger la totalit de la page quand chaque bouton tait slectionn.
Limage de droite sur la gure 8.11 reprsente le navigateur mobile Safari. Le texte
en bas ne respecte pas la mise en forme CSS3 et continue au-del de la bordure droite
de lcran. Pour autant, les images dans liframe fonctionnent parfaitement et quand
on clique sur une vignette, limage en pleine taille se charge sans recharger la totalit
de la page.
Figure 8.11 Des navigateurs mobiles diffrents grent le texte diffremment.
Plusieurs sites de rseaux sociaux et sites commerciaux utilisent des applications

similaires. Par exemple, les photographes professionnels utilisent des vignettes de leurs
photographies sur lesquelles on peut cliquer pour visualiser les images en pleine taille.
De la mme manire, les sites de rseaux sociaux utilisent des pages semblables pour
afcher et charger les images des amis sans avoir recharger la page.
Comme les priphriques mobiles ont une zone dafchage rduite, lutilisation des
iframes facilite la navigation. Il peut tre assez difcile de cliquer sur de petits liens
textuels, mais comme vous pouvez le voir sur les deux copies dcran de terminaux
mobiles de la gure 8.11, les boutons graphiques sont faciles voir et il est facile de
cliquer dessus pour charger limage en taille relle ou tout autre type de contenu dans
lespace de liframe.
174
8.5 VOUS DE JOUER !

Ce chapitre prsente deux ds diffrents :
D JavaScript : le premier d consiste achever le chanage JavaScript de
la section Utilisation de JavaScript pour appeler une page lie . La page

HTML5 nomme NavSelectJS.html comporte trois balises diffrentes <select>
(pour les animaux, les vgtaux et les minraux). Seule la balise <select> pour
les animaux contient une fonction vnementielle JavaScript. En ajoutant
deux fonctions supplmentaires au chier JavaScript (globMenu.js) qui sont
similaires la premire fonction, mais avec un nom diffrent, vous devriez tre
capable de crer des fonctions pour les balises <select> des menus pour les
vgtaux et les minraux (en fait, il suft de copier et de coller deux fois la
fonction originale, puis de simplement modier le nom de la fonction). Ensuite,
il faut ajouter lattribut OnChange aux deux autres balises <select>. Les deux
autres balises <select> ont les noms global2 et global3 que vous pouvez ajouter
aux fonctions JavaScript (vous noterez lemplacement de global1 dans le chier
original JavaScript). Ne vous inquitez pas si vous narrivez pas raliser cet
exercice car si vous ne connaissez pas JavaScript, cela risque dtre difcile.
D Iframe : Vous pouvez placer autant dlments iframe sur une page que
vous le voulez. Supposons que vous vouliez comparer diffrents ensembles
dobjets (des voitures, des habits ou des tlphones mobiles). Admettons que
vous construisiez un site pour comparer diffrents modles de voitures (par
exemple, des Ford et des Toyota). Les Ford apparaissent dans liframe de gauche
et les Toyota dans celui de droite. En dessous de chaque iframe, il y a des
liens qui afchent diffrents types de voitures (conomique, berline, hybride,
camionnette, 4x4). Chaque marque comporte des liens pour chaque type de
voiture si bien que vous pouvez les comparer. Votre tche consiste crer un tel
site avec le contenu de votre choix. Edward Tufte recommande vivement que
les informations comparatives soient prsentes de telle sorte que les utilisateurs
puissent les visualiser sur le mme cran.
Ces deux ds, qui utilisent les notions qui ont t tudies dans ce chapitre,
peuvent tre mis en pratique dans de nombreuses applications.
TROISIME PARTIE
Multimdia :
images, sons
et vidos
9
Images
Objectif
Une des caractristiques les plus intressantes de HTML5 est sa capacit utiliser
les chiers SVG (Scalable Vector Graphics). Ceux qui se servent de programmes
comme Adobe Illustrator pour crer des dessins vectoriels peuvent enregistrer leurs
chiers au format .svg et les placer directement sur leurs pages Web. Comme les
chiers .svg sont des images au format vectoriel, on peut agrandir ou rtrcir les
images sans perte de rsolution, ce qui nest pas le cas avec les chiers bitmap. Pour
autant, il est toujours possible dutiliser vos images favorites au format bitmap (.jpg,
.gif ou .png) pour les afchages statiques.
Ce chapitre tente de clarier lutilisation des images sur le Web en tudiant les
principaux types dimages que lon peut utiliser, la manire de les placer l o on
le souhaite sur la page Web, et leur optimisation pour un usage sur le Web. Par
ncessit, une grande partie de ce chapitre utilise des applications graphiques que
vous ne possdez peut-tre pas. Parmi ces applications, on peut citer Adobe Illustrator,
Adobe Photoshop et Adobe Fireworks. Vous pouvez cependant les remplacer par
dautres applications, comme Microsoft Paint ou Corel Draw. Enn, pour les dessins
et les photographies, vous allez devoir compter sur vos propres talents artistiques et
vos capacits utiliser les logiciels graphiques ( la rigueur, vous pouvez tlcharger
sur le Web des images libres de droits dans le format de chier dont vous avez besoin).
9.1 INTRODUCTION AUX FICHIERS IMAGE HTML5

La vrit premire des chiers graphiques sur le Web est quils ont un poids. Dans
le contexte dune page HTML5, cela signie que la taille ou le poids dune image se
178
Chapitre 9. Images
mesure au nombre de pixels quelle contient. En gnral, les images de grande taille
en haute dnition contiennent plus de pixels. La taille des images a une consquence
sur le Web : les images les plus lourdes mettent plus de temps circuler sur Internet
et se charger dans une page HTML. Si vous vous tes dj trouv dans la situation
de celui qui regarde xement son cran en attendant le chargement dune page Web
contenant une image de taille importante, vous savez combien cela est frustrant et peut
provoquer des clics incontrls pour actionner le bouton Prcdent du navigateur.
Si vous arrivez comprendre les subtilits des diffrents types de chiers graphiques
et optimiser leur taille, vous tirerez le meilleur parti des images sur vos pages, la
fois en termes daspect et de temps de chargement.
9.1.1 Les formats et les pixels ont de limportance

Ce qui compte le plus sur un cran, cest laspect dune image. Lapparence dune
image dpend en grande partie de la rsolution de lcran. Plus la rsolution dun
moniteur ou dun priphrique mobile est importante, meilleur sera laspect de limage.
De plus, une image contenant plus dinformations paratra meilleure quune image
contenant moins dinformations. Cela signie aussi quune image qui occupe plus de
place lcran va ncessiter plus dinformations quune image plus petite et mettra par
consquent plus de temps se charger.
Pour bien comprendre comment crer de belles images qui ne consomment pas
trop de bande passante et qui se chargent rapidement, il faut tudier les diffrents
types de formats graphiques du Web. Les quatre sous-sections suivantes fournissent un
aperu de chacun des formats.
Format SVG (Scalable Vector Graphics)

Les images vectorielles sont des dessins crs en utilisant des formules mathmatiques
qui spcient des points et tracent ensuite des lignes entre ces points. Les images
au format bitmap (en mode point) placent des bits colors diffrents endroits. Par
exemple, si vous dessinez une ligne droite dans une image vectorielle, lordinateur
prend le Point A et le Point B puis trace une ligne entre ces deux points. La mme
ligne trace dans une image au format bitmap spcie tous les points an de placer
tous les bits qui composent la ligne (cette explication simplie lexcs le processus,
mais elle fournit une ide gnrale de la diffrence entre une image vectorielle et une
image bitmap).
Comme les images vectorielles utilisent des formules, elles ne sont pas pixellises
quand on change leur taille, ce qui nest pas le cas des images bitmap. Imaginez une
ligne de 100 pixels de long que lon veut agrandir en une ligne de 400 pixels de long.
Avec une image vectorielle, il suft de modier la distance entre les deux points. Avec
une image bitmap, il faut ajouter 300 pixels. Si vous tentez de modier une ligne au
format bitmap sur une page Web en faisant passer sa largeur de 100 pixels 400 pixels,
cela va tirer la ligne originale pour quelle atteigne une largeur de 400 pixels et cest
la raison pour laquelle on verra les pixels.
9.1 Introduction aux fichiers image HTML5
179
Lautre caractristique importante des chiers au format SVG est que lon peut
modier diffrents aspects de limage dynamiquement. Avec JavaScript, vous pouvez
prendre un chier .svg afch sur une page Web et le changer de manire dynamique,
non pas en permutant des gures, mais en modiant un paramtre. Heureusement,
certains outils rcemment sortis facilitent la cration de zones spares modier
et gnrent le code ncessaire pour effectuer ces modications (voir la section
Application pour les chiers SVG dynamiques partir de chiers CS5 Adobe
Illustrator plus loin dans ce chapitre).
Format GIF (Graphic Information Format)

Lavantage des chiers GIF est quils peuvent produire des chiers de taille trs rduite
et quils prennent en charge la transparence de larrire-plan. En grande partie, cela est
d au fait quils ne peuvent grer que 256 couleurs et quils obtiennent la transparence
en dsactivant lune des couleurs. Lensemble des couleurs, connu sous le nom de
couleurs web-safe , est bas sur le fait que les chiers GIF ne peuvent grer que
256 couleurs. Ce format est extrmement limitatif pour les concepteurs qui veulent
une plus grande palette de couleurs, et il nest pas recommand pour les photos
numriques autres que celles en noir et blanc avec des niveaux de gris limits.
Les chiers GIF peuvent tre anims. Si un chier GIF anim est charg, il fait
dler squentiellement les images qui le composent, ce qui donne limpression dune
animation. En raison du fait quun GIF anim est stock en un seul chier, il peut
tre charg directement dans une page HTML5 avec la balise <img>. En gnral, les
chiers GIF anims sont relativement courts, sinon lensemble des chiers lintrieur
du GIF anim serait trop grand pour permettre un chargement rapide.
Outre le nombre limit de couleurs disponibles pour la cration dimages au format

GIF, CompuServe et Unisys dtiennent un brevet sur ce format et revendiquent le
paiement dune licence dutilisation. Plutt que de risquer dtre poursuivis, la plupart
des dveloppeurs privilgient simplement dautres formats graphiques.
Format JPEG (Joint Photographic Experts Group)

La plupart des photos numriques sur le Web utilisent le format JPEG. De la mme
manire, toute image complexe avec plusieurs couleurs et teintes privilgie le format
JPEG pour prserver laspect voulu par le photographe ou lartiste. Cela a pour
consquence que la plupart des images des sites Web qui proposent des services ou des
produits sont au format JPEG. Les chiers JPEG ont tendance tre plus grands que
les chiers GIF, mais avec laccroissement de la bande passante sur Internet, la taille
nest plus aussi problmatique quautrefois.
Le format JPEG ne prend pas en charge la transparence comme les chiers GIF, et
il na pas non plus de format anim. De plus, les chiers JPEG utilisent ce que lon
appelle la compression avec perte, ce qui peut rduire la dlit de limage. Compare
la compression sans perte qui implique une rplication exacte des donnes originales,
la compression avec perte est plus considre comme une approximation des donnes
originales qui composent limage.
180
Chapitre 9. Images
La norme JPEG est un format open source qui ne ncessite loctroi daucune
licence. Il faut cependant noter que certaines fonctionnalits des images au format
JPEG sont brevetes et peuvent ncessiter une licence, mais ces caractristiques ne
sont pas incluses dans la plupart des chiers JPEG si bien que les dveloppeurs et les
concepteurs peuvent utiliser librement le format JPEG.
Format PNG (Portable Network Graphics)

Le format PNG a t dvelopp pour partie comme une alternative au format GIF qui
est brevet et ncessite une licence. Lautre motivation concernait aussi la volont
davoir plus de 256 couleurs et un afchage sans perte. Le format PNG prend aussi en
charge la transparence et un canal alpha.
Pendant un certain temps, tous les navigateurs ne prenaient pas en charge le format
PNG et certains dveloppeurs ne lutilisaient pas en dpit de ses nombreux avantages.
Mais ce temps est rvolu et tous les navigateurs qui supportent HTML5 prennent en
charge le format PNG. Cela a pour consquence que tout dveloppeur ou concepteur
HTML5 peut utiliser des chiers PNG sans crainte que le navigateur ne puisse les
charger.
9.1.2 Prservation des calques dans les images Web

Lun des principaux avantages des chiers PNG est quils prservent les calques.
Les concepteurs qui utilisent des outils comme Adobe Illustrator, Adobe Fireworks
et Adobe Photoshop organisent leurs images en calques. La lgende dune image
constitue une simple application des calques. Par exemple, supposons que vous ayez
une photographie que vous avez lgende et enregistre au format JPEG, comme cela
Aprs avoir termin limage et lavoir enregistre au format JPEG, vous vous
apercevez que vous vous tes tromp de lgende (il ne sagit pas dune marguerite,
mais dune gloire du matin). En raison du fait que le chier est enregistr au format
JPG, le calque avec la lgende Daisy na pas t prserv. Quand vous allez modier le
chier, vous constaterez que la lgende est fusionne avec le reste de limage.
Avec un chier PNG, non seulement les calques sont prservs, mais si lon
utilise un arrire-plan transparent, il slectionne larrire-plan de la page Web, et la
transparence est galement conserve. La gure 9.2 montre que la simple permutation
des calques rgle le problme de lgende et offre un arrire-plan transparent.
Avec les images comportant plusieurs calques, lenregistrement de limage nale
Web au format PNG conomisera du temps lors de ldition. Dans cet exemple particulier, leffacement de la lgende errone dans le chier JPEG et son remplacement
par la bonne lgende dans lespace en dessous de limage nest pas une tche trop
difcile, mais avec des images plus complexes qui comprennent plusieurs calques, les
concepteurs nont pas refaire la totalit de limage et ils peuvent se contenter de
modier juste un calque.
Le seul problme fcheux dans la prservation des calques des chiers PNG est
que cela accrot la taille du chier. Le chier JPEG ne pse que 33 Ko, alors que le
9.1 Introduction aux fichiers image HTML5
181
Figure 9.1 Image JPEG avec une lgende intgre.
Figure 9.2 Fichier PNG avec un calque prserv et un arrire-plan transparent (illustr dans
un diteur graphique).
chier PNG en fait 225. Nous verrons cependant dans la section suivante comment
conserver les calques tout en rduisant la taille du chier, de manire avoir quand
mme un chier qui se charge rapidement.
182
Chapitre 9. Images
9.2 TAILLES DES FICHIERS GRAPHIQUES

tant donn les diffrentes sortes de chiers graphiques du Web qui peuvent tre
chargs, la tentation est grande dutiliser le format qui a la plus petite taille de chier.
Dans certains cas, ce sera effectivement lattitude adopter, mais quand votre site
a besoin dune qualit trs leve, lastuce consiste tudier comment obtenir la
meilleure qualit en utilisant le moins de bande passante. moins que vous nutilisiez
le format SVG, rappelez-vous laxiome de base du Web concernant les images bitmap :
Ne changez jamais les dimensions dune image bitmap avec les attributs HTML5 au sein
dun lment.
Vous pouvez modier loisir les dimensions dune image avec une application
graphique comme Adobe Photoshop ou Microsoft Paint, mais quand on change la
taille dune image bitmap avec des attributs HTML5 tels que width et height, cela
provoque, particulirement quand on tente dagrandir un objet, une pixellisation
de lobjet ou son crasement. La gure 9.3 montre trois images GIF, et vous pouvez
constater que limage agrandie a des bords dentels et que les pixels commencent
apparatre sous la forme de petites botes.
Figure 9.3 Fichier GIF agrandi avec des attributs HTML5.
La gure du milieu est limage originale avec ses dimensions originales. Si lon avait
utilis un outil graphique pour agrandir limage, elle napparatrait pas avec des bords
dentels. Vous pouvez constater la gure 9.4 que le mme phnomne se produit
avec des photos numriques.
Limage originale est lextrme gauche alors que limage agrandie montre des
bords dentels et commence se brouiller. Limage lextrme droite est si petite
quil est difcile de distinguer les dtails et de dterminer si elle est crase (les pixels
9.2 Tailles des fichiers graphiques
183
ont tendance se tordre). Utilisez le programme suivant (DistortionImage.html

disponible dans les chiers du chapitre) pour tester vos propres images.
<!DOCTYPE HTML>
<html>
<head>
<title>Distortion dune image Web</title>
</head>
<body>

<img src="photo.jpg" width="100" height="127">

<img src="photo.jpg" width="400" height="508">

<img src="photo.jpg" width="50" height="63.5">
</body>
</html>
Figure 9.4 Photo numrique JPG agrandie et rtrcie avec des attributs HTML5.
Pour trouver la largeur et la hauteur dune image, utilisez la souris pour slectionner
le chier et :
184
Chapitre 9. Images
Sous Windows, faites un clic droit et slectionnez Proprits Dtails puis
lisez les valeurs Largeur et Hauteur. Vous pouvez trouver les dimensions dun
chier image en plaant le pointeur de la souris sur le chier.
Sous Mac OS X, faites un Ctrl + clic sur le chier image et slectionnez Obtenir
les informations. Dans la section Plus dinformations, afchez les Dimensions
qui indiquent Largeur x Hauteur.
La plupart des outils Web, comme Dreamweaver, fournissent des informations
sur les dimensions des images. De la mme manire, pratiquement tous les diteurs
graphiques afchent les dimensions des images quand un chier est charg.
9.2.1 Utilisation dapplications graphiques pour modifier la taille des fichiers

image
Quand on voque la taille dune image, on fait rfrence deux notions diffrentes :
Les dimensions de limage, cest--dire son nombre de points (largeur x hau-
teur) ;
Le nombre doctets du chier.
Normalement, le contexte permet de prciser de quelle acception il sagit quand
on parle de taille dune image, mais la plupart du temps, le terme taille fait rfrence
au nombre doctets du chier, alors que le terme dimensions fait rfrence la taille
de limage lcran.
Adobe Photoshop est une application couramment utilise pour retoucher la taille
et la qualit des images. De plus, Photoshop fournit des informations visuelles que
les concepteurs et les dveloppeurs peuvent utiliser pour dcider du pourcentage de
compression que limage peut supporter avant que son apparence ne se dgrade. Les
gures 9.5 et 9.9 illustrent ce processus (les gures 9.6 9.8 montrent des informations
sur les chiers et la manire dont elles apparaissent sur une page Web).
Modification de la taille des fichiers JPEG

Si lon commence par un trs gros chier TIFF qui doit tre converti en un chier
PNG, JPEG ou GIF, le processus ddition du chier dmarre par trois niveaux de
qualit : maximum, moyen et bas. La gure 9.5 illustre le chier original TIFF et trois
chiers JPEG.
Le chier original TIFF situ dans le coin suprieur gauche pse prs dun demimgaoctet et il doit donc tre considrablement allg et converti en un format lisible
par les navigateurs HTML5. La gure dans le coin suprieur droit est au format JPEG
en qualit maximale (100). La gure dans le coin infrieur gauche est en basse qualit
(2), et celle du coin infrieur droit est en qualit moyenne (60). Le plus petit chier
Web ne pse que 8,6 Ko et le plus grand fait 127,1 Ko. Un rapide coup dil montre
trs peu de diffrences entre ces deux images.
185
Figure 9.5 Affichage dune image et de sa taille sous quatre formes diffrentes.
Pour se faire une ide plus prcise, les deux chiers extrmes en termes de qualit
Web sont enregistrs sur le disque, puis (sur un Macintosh) on visualise la taille de
chaque chier (voir la gure 9.6).
Si lon examine la gure 9.6, on saperoit que les deux chiers ont les mmes
dimensions (432 x 343), mais que lun pse 12 Ko alors que lautre en fait 139 Ko. Les
tudes sur la perception ont montr que lexamen des diffrences minimes a tendance
les attnuer, alors que les diffrences extrmes apparaissent clairement ; cest la
raison pour laquelle quand on commence faire des ajustements sur les images, il est
prfrable de commencer par les grandes diffrences. La gure 9.7 illustre deux chiers
sur une page Web.
Comme vous pouvez le voir, limage de qualit la plus basse ( gauche) et limage de
qualit la plus leve ( droite) sont trs similaires. Avec dautres images sur une page
Web, des diffrences de qualit pourraient apparatre, mais avec les caractristiques
de celles qui sont illustres la gure 9.7, la rduction de la taille ne modie pas
tellement lapparence sur le Web.
186
Chapitre 9. Images
Figure 9.6 Affichage des proprits des fichiers image.
Figure 9.7 Fichiers JPEG en haute qualit et en basse qualit sur une page Web.
On peut constater une plus grosse diffrence avec des photos numriques au format
JPEG. la gure 9.8, la photo de gauche est en qualit la plus basse (8 Ko) et celle
de droite est en qualit la plus leve (115 Ko).
Les diffrences entre les deux photos sont minimes, mais la diffrence en kilooctets
est assez importante (8 Ko contre 115 Ko). Sur un cran dordinateur, limage de
gauche de la gure 9.8 a une dnition plus pauvre autour des bords, mais si la majeure
partie du public dun site Web a une trs faible bande passante disponible, la rduction
de la taille des chiers JPEG ne rduira pas de manire signicative la qualit des
images.
187
Figure 9.8 Photos numriques au format JPEG en qualit basse et leve.
Limage de la gure 9.8 a t prise avec une webcam, et des photos numriques
prises par un appareil dot dun capteur de grande qualit montreraient beaucoup plus
de dtails qui seraient susceptibles dtre perdus avec la perte dinformations induite
par la rduction de la taille des chiers. Mais les photos numriques en trs haute
rsolution doivent tre rduites considrablement si lon veut sen servir pour le Web.
Un bon clairage conomise la bande passante
Quel que soit le type dappareil photo que vous utilisez, une image bien claire
paratra toujours meilleure quune image mal claire. Tout ce que lon voit (et votre
appareil photo voit) est la rexion de la lumire sur les objets. Si vous accordez un
peu dattention lclairage de votre sujet, vos photos numriques seront meilleures.
Vous navez pas besoin de la lumire dun studio pour prendre de bonnes photos,
mais en ajoutant correctement de la lumire vous pourrez supprimer plus dinformations du chier tout en conservant une qualit sufsante pour lafcher sur le Web.
Voici quelques conseils :
1. Utilisez un clairage indirect. Si vous prenez des photos quand il y a un ciel
nuageux, les photos seront en gnral meilleures. Cela est d au fait que les
nuages diffusent la lumire (avez-vous dj vu ces photos o les malheureux
sujets plissent les yeux face au soleil ? Non seulement ils font une drle de
tte, mais les photos sont surexposes). Pour les photos dintrieur, dirigez une
lumire sur un papier blanc et faites-la rchir sur le sujet. Une feuille de
papier aluminium fait trs bien laffaire pour diffuser la lumire.
2. Utiliser la lumire naturelle si possible. Si vous prenez des photos dintrieur,
ouvrez les rideaux et les stores pour laisser pntrer la lumire naturelle.
188
Chapitre 9. Images
Modification de la taille des fichiers PNG et GIF

Si lon aborde maintenant la modication de la taille des chiers PNG et GIF, les
diffrences ont tendance tre plus signicatives en ce qui concerne la rduction de
la taille des chiers et les informations qui sont de ce fait supprimes. Examinez la
gure 9.9, et vous verrez immdiatement que les diffrents paramtres jouent sur les
niveaux de qualit.
la gure 9.9, les deux images du haut sont des chiers GIF et les deux images
du bas des chiers PNG. Quand les chiers GIF sont rduits, ils perdent des couleurs.
Limage en haut gauche na que 32 couleurs et celle de droite en a 256 (ce qui nest
pas non plus norme). Si lon compare la taille des deux chiers GIF, celui de gauche
fait la moiti de celui de droite. Comparez cela aux diffrents niveaux de qualit des
chiers JPEG utiliss la gure 9.5.
Les deux chiers PNG sont libells PNG-24 (image de gauche avec des couleurs
codes sur 24 bits) et PNG-8 (image de droite avec des couleurs codes sur 8 bits).
Le format PNG-8 na que 128 couleurs, alors que le format PNG-24 peut grer des
millions de couleurs. En bref, le format PNG-24 est de qualit suprieure.
Figure 9.9 Modification de la taille des fichiers PNG et GIF.
189
Modification de la taille des fichiers SVG

la diffrence des images bitmap, la modication de la taille des chiers au format
SVG est simple et ne change pas laspect de limage. Le code suivant de la page Web
illustre un chier .svg de 500 x 400 afch en diffrentes tailles qui sont dtermines
par les attributs width et height. Le script suivant (SVG.html disponible dans les
chiers du chapitre) nutilise quun seul chier .svg et lafche dans diffrentes tailles
sans aucune distorsion.
<!DOCTYPE HTML>
<html>
<head>
<title>Test SVG</title>
</head>
<body style="background-color:#BAD9CB" >

<img src="logo500x400.svg" width=100 height=80>
<img src="logo500x400.svg" width=300 height=240><br>

</body>
</html>
Au cours de la rdaction de ce livre, Firefox nutilisait pas la balise <img> avec les
chiers .svg, mais ncessitait la place lemploi de la balise <object> (le navigateur
Opera quant lui fonctionne avec les deux formats). La gure 9.10 illustre le rsultat
et vous pouvez voir que le logo parat identique, quelle que soit la taille dans laquelle
il est afch.
Niveaux de gris avec Internet Explorer

Il est intressant de noter quand on travaille sur les tailles des chiers que lon peut
utiliser une proprit CSS spciale qui nest reconnue que par Internet Explorer. Certains concepteurs emploient des niveaux de gris pour rduire la taille de leurs images
ou pour leffet des nuances de gris. Si vous voulez tester cette option intressante dans
Microsoft Internet Explorer, vous pouvez crire un bout de code CSS pour convertir
des chiers en couleur en niveaux de gris. Il suft pour cela dutiliser lextrait de code
suivant dans une dnition de style :
190
Chapitre 9. Images
Figure 9.10 Image SVG modifie sans distorsion en changeant des attributs.
img {
filter:gray;
}
</style>
La gure 9.11 illustre une image en couleur (voir la gure 9.8) qui est transforme
en niveaux de gris uniquement par lutilisation de code CSS.
Grce cette technique, vous pouvez voir rapidement laspect de limage en
niveaux de gris avant de modier limage. Si vous mettez jour un site et que vous
souhaitez visualiser les images en niveaux de gris, vous pouvez ajouter le code CSS
et tester dabord avec Internet Explorer. Si vous voulez diminuer la taille des chiers
tout en conservant une certaine qualit, vous pouvez passer vos images couleur JPEG
en niveaux de gris, ce qui divisera leur taille par deux.
9.3 Placement des images et cration de pages Web flexibles
191
Figure 9.11 Utilisation du filtre CSS de niveaux de gris dInternet Explorer.
9.3 PLACEMENT DES IMAGES ET CRATION DE PAGES

WEB FLEXIBLES
La balise <img> est la balise qui est majoritairement utilise pour afcher des images et
bien que CSS3 soit loutil principal pour positionner correctement les choses sur une
page Web, vous pouvez cependant utiliser certains attributs de la balise <img> pour le
faire. Cette section tudie les options de placement du texte sur une page Web et la
manire dutiliser certains attributs de la balise <img>.
9.3.1 Placement des images avec lattribut align

Nous allons commencer ltude du placement en examinant lattribut align de la
balise <img>. Son principal avantage rside dans le fait quil ny a pas de moyen plus
facile de positionner rapidement une image par rapport un texte. Le script suivant
(PlacementImage.html disponible dans les chiers du chapitre) illustre le procd.
<!DOCTYPE HTML>
<html>
<head>
/*048ABF,049DBF,F2F2F2,595959,0D0D0D*/
192
Chapitre 9. Images
body {
color:#0D0D0D;
}
h1 {
color:#595959;
background-color:#049DBF;
text-align:center;
}
h2 {
color:#048ABF;
}
</style>
<title>Placement simple</title>
</head>
<body>
<article>
<header>
<h1>La gym du dveloppeur Web</h1>
</header>
<section>
<header>
<h2>Sance dentranement du dveloppeur</h2>
</header>
<figure> <img src="webDeveloper.gif" width="250" height="263"
align="left"> </figure>
Vous y avez dj pens. Nest-ce pas le moment de faire vos balises ?
Dveloppez vos lments et vos attributs HTML5 la Salle de gym du Web. Une
fois que vous serez chauff, vous pourrez ajouter une petite balise
<canvas> et vous lancer dans une bonne sance de CSS3. La salle est
ouverte tous les jours et 24 heures sur 24 ; de plus, elle est accessible
partir de nimporte quel endroit de la plante ! Tous vos amis sont l et ils
ont mme ajout des vidos leurs pages Web ! Vous aussi, vous pouvez le
faire ! Ne laissez pas passer un autre jour pour raliser votre rve de
devenir un dveloppeur Web. Commencez maintenant ! </section>
</article>
</body>
</html>
Le placement droite ou gauche de limage est simple car il suft dassigner les
valeurs "right" ou "left" lattribut align. La gure 9.12 illustre le placement de
limage la fois gauche et droite.
la gure 9.12, la page de droite parat correcte, mais la page de gauche serre
le texte trop prs de limage. Vous noterez galement que la page est totalement
dpendante de la taille et des paramtres de page de lutilisateur. En dautres termes,
lutilisation de lattribut align pour le placement des images peut ruiner laspect de
vos pages. La gure 9.13 illustre deux autres afchages de la mme page qui nont pas
le mme aspect.
la gure 9.13, limage de gauche afche un texte dissmin sur toute la page,
alors que limage de droite, qui est visualise sur un tlphone mobile, montre que le
193
Figure 9.12 Placement des images avec lattribut align.
texte ne safche que sur une largeur dun mot, la totalit du texte napparaissant pas
dans la zone dafchage.
Figure 9.13 Diffrents affichages dune mme page.
9.3.2 Taille dimage flexible avec un peu de JavaScript

Au chapitre 12, vous comprendrez mieux ce qui se passe, mais jai besoin dans cette
section de JavaScript pour vous montrer comment vos pages peuvent devenir plus
exibles en afchant des images de taille diffrente. JavaScript a une proprit appele
navigator.appVersion. Quand cette proprit est place dans un script, vous pouvez
rcuprer des informations sur le matriel qui est utilis pour charger la page Web.
Si vous dterminez que la page est charge sur un priphrique mobile, vous pouvez
charger une image plus petite au lieu de charger sur la page Web une image en pleine
taille.
Pour faire fonctionner cela, nous allons prendre le mme chier GIF que celui qui
a t utilis pour la cration de la page Web originale de la prcdente section, et nous
allons crer une autre image plus petite qui fera peu prs un tiers de limage originale.
Crez un dossier que vous nommerez flexImages, et placez-y les deux chiers GIF
194
Chapitre 9. Images
que vous nommerez WebDeveloper.gif pour le plus grand et lilWebDeveloper.gif

pour le plus petit. Saisissez ensuite le programme suivant (ImageTailleFlexible.html
disponible dans les chiers du chapitre) et enregistrez-le dans le rpertoire qui contient
le dossier flexImages.
<!DOCTYPE HTML>
<html>
<head>
var envir=navigator.appVersion;
envir=envir.substring(5,11);
var imageNow=new Image();
var showNow;
function showImage()
{
if(envir=="iPhone" || envir=="(iPhon")
{
showNow="flexImages/lilWebDeveloper.gif";
}
else
{
showNow="flexImages/WebDeveloper.gif";
}
imageNow.src=showNow;
document.pix.src=imageNow.src;
}
</script>
/*048ABF,049DBF,F2F2F2,595959,0D0D0D*/
body {
color:#0D0D0D;
}
h1 {
color:#595959;
background-color:#049DBF;
text-align:center;
}
h2 {
color:#048ABF;
}
img {
padding:5px;
}
</style>
<title>Taille flexible</title>
</head>
<body onLoad="showImage()">
<article>
<header>
<h1>La gym du dveloppeur Web</h1>
</header>
195
<section>
<header>
<h2>Sance dentranement du dveloppeur</h2>
</header>
<figure> <img src="flexImages/WebDeveloper.gif" name="pix" align="left">
</figure>
Vous y avez dj pens. Nest-ce pas le moment de faire vos balises ?
Dveloppez vos lments et vos attributs HTML5 la Salle de gym du Web. Une
fois que vous serez chauff, vous pourrez ajouter une petite balise
<canvas> et vous lancer dans une bonne sance de CSS3. La salle est
ouverte tous les jours et 24 heures sur 24 ; de plus, elle est accessible
partir de nimporte quel endroit de la plante ! Tous vos amis sont l et ils
ont mme ajout des vidos leurs pages Web ! Vous aussi, vous pouvez le
faire ! Ne laissez pas passer un autre jour pour raliser votre rve de
devenir un dveloppeur Web. Commencez maintenant ! </section>
</article>
</body>
</html>
Commencez par tester le programme sur votre ordinateur. Vous devriez voir
exactement le mme rsultat que celui qui est illustr la gure 9.12. Essayez ensuite
ce programme sur un priphrique mobile : au lieu de voir safcher une grande image
qui pousse le texte sur le ct, vous voyez une image plus petite qui est encadre
parfaitement par le texte, comme le rsultat obtenu sur votre ordinateur. Cela est d
au fait que la page Web a t capable dutiliser JavaScript pour dterminer si la page
tait charge sur un iPhone ou sur une autre plateforme.
Placez la page Web ainsi que le dossier contenant les deux images dans le mme
rpertoire sur un serveur. Quand vous testez cette page, on dirait quelle a t faite
pour un iPhone, mais en fait elle a t faite pour iPhone ou pour nimporte quel autre
priphrique. Grce au code JavaScript, vous pouvez vraiment tendre les possibilits
de HTML5.
Le code JavaScript utilis dans cet exemple minimaliste peut tre expliqu de la
manire suivante :
On place le contenu de navigator.appVersion dans une variable nomme envir
(abrviation denvironnement).
Comme navigator.appVersion gnre une description longue, on ne rcupre
que la partie des rsultats qui nous intresse et on regarde si elle contient
iPhone ou non.
On cre un nouvel objet image appele imageNow.
On initialise une variable nomme showNow (que nous utiliserons dans la
fonction).
On cre une fonction qui demande : Sagit-il dun environnement diPhone ?
Si tel est le cas, on utilise la petite image. Dans le cas contraire, on utilise
la grande image (il y a une bizarrerie dans Opera Mini : JavaScript retourne
"(iPhon" quand on extrait les six premiers caractres de navigator.appVersion ;
le code doit donc demander sil trouve les deux valeurs, "(iPhon" ou "iPhone"),
ce qui montre le ct accommodant de JavaScript).
196
Chapitre 9. Images
Figure 9.14 Affichage dune petite image pour un tlphone mobile.
Bien entendu, il y a beaucoup plus de modles de priphriques mobiles et il vous

faudra adapter le code JavaScript pour ajouter dautres modles en plus de liPhone,
mais la logique reste la mme (il vous faudra simplement un peu plus de JavaScript).
Au fait, si vous navez jamais travaill avec JavaScript, ne soyez pas tonn de
ne pas comprendre le code de la page Web. Cette dmonstration na pour but que
dillustrer ce qui peut tre fait avec JavaScript. Lavenir du Web passe par lintgration
de nombreuses plateformes diffrentes de navigation et cette petite dmonstration
nest quun avant-got de ce que vous pouvez raliser (si vous tre un programmeur
JavaScript chevronn, vous pouvez crer quelque chose dun peu plus lgant !).
9.3.3 Application pour les fichiers SVG dynamiques partir de fichiers CS5
Adobe Illustrator
Adobe Illustrator CS5 (en abrg AI) possde une nouvelle fonctionnalit, Adobe
Illustrator CS5 HTML5 Pack, qui est disponible http://labs.adobe.com. Cette
fonctionnalit est conue pour permettre aux graphistes utilisant AI de convertir
facilement leurs chiers .ai en chiers .svg contenant des parties qui peuvent tre
197
modies dynamiquement avec HTML5. Pour vous donner une ide de la manire
dont cela fonctionne, lexemple suivant commence avec une image simple dans AI.
Elle possde deux calques et sur lun des calques, le concepteur dsire une couleur
variable qui puisse tre code en HTML5. Le calque auquel on va donner une
caractristique variable est slectionn et afch dans le panneau Apparence (voir la
gure 9.15).
Figure 9.15 La couleur de remplissage est dfinie comme une variable dans Adobe Illustrator
CS5.
Le (X) de la gure 9.15 indique que la couleur de remplissage (Fill) est une variable
qui peut tre modie avec HTML5. An de pouvoir modier cette caractristique (la
couleur de remplissage dans ce cas), AI gnre le code pour le chier SVG qui peut
tre visualis et/ou modi pendant la conversion du chier .ai en chier .svg. Au
cours du processus de conversion, le concepteur clique sur le bouton Afcher le code
SVG, et trouve le nom du calque qui possde une caractristique variable. Dans cet
exemple, voici le code spcique SVG :
<g id="Button">
<ellipse fill="param(SVGID_2__FillColor) #A35563" cx="50" cy="50" rx="40"
ry="40.5"/>
</g>
Lidentiant ayant la valeur Button est le nom du calque dans AI. La valeur param,
SVGID_2__FillColor, est gnre automatiquement par AI.
Pour exploiter les informations SVG dans un programme HTML5, le chier .svg
doit tre rfrenc dans un lment <object> et le paramtre dune balise <param>.
Le chier JavaScript Param.js est aussi gnr automatiquement par AI et doit tre
charg dans conteneur <head> an que Firefox analyse correctement le code. Le code
suivant (AI2svg.html disponible dans les chiers du chapitre) fonctionne avec les
navigateurs Firefox, Safari, Chrome et Opera, mais il existe certaines diffrences
dafchage.
198
Chapitre 9. Images
<!DOCTYPE HTML>
<html>
<head>
<script src="Param.js"></script>
<title>AI -> SVG</title>
</head>
<body>
<article>
<section>
<figure>
<object type="image/svg+xml" data="butnBkground.svg">

</object>
</figure>
<figure>
<object type="image/svg+xml" data="butnBkground.svg">
<param name="SVGID_2__FillColor" value="#cc0000" />
</object>
</figure>
</section>
</article>
</body>
</html>
An dillustrer la squence du processus, la gure 9.16 illustre le chier original AI

et le rsultat de lafchage dans Opera quand la page AI2svg.html se charge.
Figure 9.16 Le fichier original AI est transform en un fichier au format SVG avec une couleur
de remplissage variable.
Les chiers Param.js et .svg doivent tre dans le mme dossier que la page HTML5,
tout comme les feuilles de styles externes CSS3 et les chiers graphiques sont censs
se trouver dans le mme dossier que le code HTML5 qui les appelle, ou bien dans le
9.4 vous de jouer !
199
chemin spci par le code HTML5. Ce qui est intressant dans cette technique, cest
que les concepteurs et les dveloppeurs peuvent se concentrer sur les balises HTML5
alors quAdobe Illustrator CS5 soccupe de la gnration du code JavaScript et des
noms des paramtres. Bien entendu, cela implique que les concepteurs sachent utiliser
les images vectorielles et crent des fonctionnalits dynamiques dans leurs images AI.
9.4 VOUS DE JOUER !

Le premier exercice est une chasse au trsor Web. Vous pouvez trouver de nombreux
outils gratuits sur le Web qui peuvent tre utiliss pour modier la taille dune image
( la fois ses dimensions et son poids en octets). Mme si vous disposez dAdobe
Photoshop ou de Microsoft Paint, explorez le Web pour trouver une application qui
fonctionne sur votre ordinateur (vous pouvez mme en trouver plusieurs si vous le
souhaitez).
Prenez un chier graphique qui ne soit pas au format JPEG, PNG ou GIF. Vous
pouvez, par exemple, trouver un chier .tif ou .tiff (il peut sagir dune photo
numrique ou dun dessin, voire une combinaison des deux). Ralisez ensuite les
tapes suivantes :
1. Convertissez le chier dans les formats JPEG, PNG et GIF.
2. Vous avez prsent quatre chiers : le chier original et les trois formats Web.
3. Faites une copie de tous les chiers graphiques Web en les nommant de telle
sorte que le nom du chier indique quil sagit dune qualit basse.
4. Par exemple, si vous avez un chier nomm voiture.jpg, copiez-le en le
nommant voitureBasse.jpg.
5. En utilisant lapplication graphique que vous avez dniche sur le Web, crez
une version en qualit suprieure et une version en qualit basse de chacun
des trois types de chiers.
6. En utilisant HTML5 et CSS3, crez une page Web comportant trois lignes.
Sur le ct gauche placez les images en qualit suprieure et sur le ct droit,
placez les images en qualit basse.
7. Entre toutes les images, placez un texte de remplissage de votre choix.
8. Vous pouvez chercher sur Internet le clbre texte de remplissage lorem ipsum.
La gure 9.17 illustre le format gnral de la page Web.
Cet exercice a deux objectifs :
Vous entraner placer du texte autour dimages en utilisant les techniques
CSS3 que vous avez apprises prcdemment car lemploi de lattribut align de
la balise <img> a de srieuses limites.
Faire passer lide que toutes les modications sur les images doivent tre
ralises avec un logiciel graphique avant dassembler votre page Web.
200
Chapitre 9. Images
Figure 9.17 Affichage des diffrentes sortes et qualits dimages avec du texte.
Ceux qui dsirent exploiter les images vectorielles peuvent tester Adobe Illustrator
CS5 HTML5 Pack. Si vous ne possdez pas Adobe Illustrator CS5, vous pouvez
tlcharger gratuitement une version dvaluation valable 30 jours. Tentez de crer
des parties variables dans une conception AI en utilisant plusieurs calques avec des
noms qui deviendront les noms des ID du paramtre que vous modierez.
10
Son
Objectif
Lajout de sons aux pages Web permet aux dveloppeurs de crer une large palette
de sites Web. Les sites qui jouent de la musique, qui fournissent un contenu ducatif
ou bien qui ajoutent des effets sonores tendent les possibilits de ce que lon peut
raliser avec HTML5. Ce chapitre tudie la manire de prparer des sons pour le
Web et leur utilisation pour rendre vos pages Web sonores.
Vous apprendrez travailler avec les diffrents attributs et paramtres de la balise
<audio>. Vous verrez aussi comment les diffrents navigateurs grent le son et les
diffrents chiers sonores. Comme pour les images, des programmes spcialiss sont
disponibles pour crer des chiers audio et les modier. Aprs avoir tudi les
lments et les attributs HTML5 de base, ce chapitre vous montrera donc comment
crer des sons pour vos sites Web.
10.1 INTRODUCTION LA GESTION DES CONTENUS

AUDIO EN HTML5
La balise <audio> est lune des nouvelles balises HTML5 les plus intressantes. Grce
elle, vous pouvez jouer des chiers audio sur les haut-parleurs de votre ordinateur
ou bien dans les couteurs dun priphrique mobile. Voici la syntaxe de base pour
slectionner un chier audio jouer :
<audio src="jazz.mp3"></audio>
202
Chapitre 10. Son
Lattribut src fonctionne de la mme manire que pour une balise <img> : il sagit
dune rfrence la source du chier. Mais pour couter le chier audio, on a besoin
dattributs.
10.1.1 Autoplay
Lattribut autoplay se passe dexplication. Ds que la page se charge, le chier sonore
commence tre jou. Avant dajouter lattribut autoplay, il est souhaitable de
sassurer que lutilisateur est bien daccord pour couter les sons que vous jouez. Si
vous voulez faire fuir vos utilisateurs, le plus sr moyen est davoir un son continu qui
est jou automatiquement. Ce souci mis part, le script suivant (AudioBasique.html
disponible dans les chiers du chapitre) montre comment crer une page simple qui
commence jouer de la musique ds quelle est charge :
<!DOCTYPE HTML>
<html>
<head>
<title>Audio de base</title>
</head>
<body>
Le son est entre les lignes<br>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <br>
<audio src="jazz.wav" autoplay></audio>
<br>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - </body>
</html>
Vous pouvez tester ce script avec nimporte quel navigateur, except Google
Chrome car cest le seul qui ne reconnat pas les chiers sonores au format .wav.
Utilisez la place un chier .mp3 ou .ogg pour tester Chrome.
10.1.2 Controls
Comme nous vous lavons fait remarquer, si votre son (musique, effets sonores,
conversation, etc.) ennuie les utilisateurs, ils ne reviendront pas sur votre site. Dans ces
conditions, comment faire pour contrler le son ? Le moyen le plus simple est dajouter
lattribut controls. Comme pour autoplay, vous navez pas fournir de valeur et il
suft de linclure la balise <audio> pour quil apparaisse automatiquement. Testez le
programme suivant (Controles.html disponible dans les chiers du chapitre) :
<!DOCTYPE HTML>
<html>
/* 694703,A83110,E89F06,F5D895,B3CF83 */
10.1 Introduction la gestion des contenus audio en HTML5
203
body {
background-color:#B3CF83;
color:#694703;
}
h1 {
font-family:Braggadocio, "Arial Black";
color:#A83110;
}
</style>
<head>
<title>Contrles</title>
</head>
<body>
<article>
<header>
<h1>Veille Jazz</h1>
</header>
<section>
<p>Cliquez sur le triangle pour dmarrer la musique : </p>
<audio src="mists.ogg" controls></audio>
<p>Le symbole des deux barres verticales (||) arrte la musique.</p>
</section>
</article>
</body>
</html>
Quand vous excutez ce programme, assurez-vous dutiliser un navigateur compatible avec le chier audio (employez un chier .wav si le type de chier .ogg ne
fonctionne pas avec votre navigateur). En fonction du type de navigateur utilis, vous
verrez que les contrles sont diffrents. La gure 10.1 illustre laspect des diffrents
navigateurs (Google Chrome est prsent alors que la musique est en cours de lecture).
La barre de contrle audio est classique et le bouton de dmarrage en forme de
triangle se situe gauche, alors que le bouton de contrle du volume se situe droite.
Le bouton stop/pause fonctionne de manire identique sur tous les navigateurs, mais
les graphismes sont uniques (ces diffrences ne plairont sans doute pas aux concepteurs
qui tentent de crer des pages avec un contenu audio totalement compatible avec tous
les navigateurs).
Le fait de donner une certaine forme de contrle aux utilisateurs est essentiel.
Le navigateur Chrome offre une belle grosse barre qui permet lutilisateur de voir
clairement o il en est de lcoute du chier audio. Pour les contenus pdagogiques,
la barre verticale que vous pouvez voir dans le navigateur Chrome la gure 10.1 est
importante car ltudiant peut revenir en arrire pour rcouter certaines parties dune
leon qui sont difciles comprendre.
10.1.3 Preload
Lattribut preload de la balise <audio> peut se rvler important car il commence
le prchargement du contenu audio avant quil ne soit jou. De cette manire,
204
Chapitre 10. Son
Figure 10.1 Utilisation des contrles dun lecteur audio.
lutilisateur na pas se tourner les pouces en attendant le chargement du chier

audio une fois quil a cliqu sur la touche de lecture. Dans sa forme la plus simple,
lattribut preload na pas besoin de valeur et doit tre appel de la manire suivante :
<audio src="Shadows.wav" preload controls></audio>
Quand on emploie le prchargement, on peut utiliser lautoplay, mais je ne suis pas

certain que cela soit trs logique. Lautoplay dmarre la lecture de laudio ds que la
page est charge, alors que le prchargement est utilis pour charger un chier audio
avant que la commande de lecture ne soit dclenche.
Vous pouvez assigner des valeurs lattribut preload :
none : cette valeur peut sembler trange, mais certains navigateurs peuvent tre
paramtrs pour prcharger automatiquement les chiers audio. Si lutilisation

dun chier audio particulier est peu probable, le dveloppeur peut dcider de
ne pas utiliser de ressources Internet et assigne donc la valeur none lattribut
preload.
metadata : tous les chiers audio (et vido) contiennent des mtadonnes
comme la dure ou dautres donnes que lauteur du contenu audio place dans
10.2 Prise en charge de laudio par les navigateurs
205
le chier. Quand lutilisation dun chier audio est incertaine, il est cependant
raisonnable de charger les mtadonnes car cela consomme peu de ressources
Internet.
auto : si lattribut preload est prsent, il prcharge automatiquement les
informations du chier audio. Lassignation auto agit simplement comme un
rappel que le chier va tre prcharg (cest comme si lon navait assign
aucune valeur lattribut preload).
Plus votre public sera vari, plus vous aurez de contenus audio sur vos pages Web,
ce qui rendra souhaitable lutilisation des options de lattribut preload.
10.1.4 Boucle
Quand on veut quun son se rpte indniment, on utilise une boucle. Cela a
lavantage que vous pouvez prendre un morceau de musique relativement court et le
rpter de telle manire quil apparatra comme une composition complte. De cette
manire, vous minimisez lutilisation des ressources Internet et disposez dune musique
en continu. La syntaxe dutilisation est similaire celle des autres attributs qui agissent
comme des interrupteurs : ils sont actifs ou inactifs. Voici un exemple :
<audio src="Shadows.wav" autoplay loop></audio>
Cette ligne porte en elle les germes de sa propre destruction. Pour de multiples
raisons, les utilisateurs ont tendance vouloir dsactiver le son. Vous pouvez utiliser
JavaScript pour raliser cela, mais il est plus simple dajouter lattribut controls et de
laisser lutilisateur dsactiver le son. Cependant, certains concepteurs, juste titre, ne
souhaitent pas incorporer la barre de contrle dans leurs pages Web car ils pensent
quune jolie musique fait partie intgrante de la conception. Dans ce cas, il faut songer
laborer une routine JavaScript pour dsactiver la musique. Mme si le morceau de
musique est magnique, sa rptition incessante sapparente du lavage de cerveau,
ce qui est interdit par la Convention de Genve.
10.2 PRISE EN CHARGE DE LAUDIO PAR LES

NAVIGATEURS
Au moment de la rdaction de cet ouvrage, jai test diffrents formats audio et je
nai pas russi trouver un seul format qui soit pris en charge par tous les navigateurs
HTML5. Le tableau 10.1 illustre la rpartition.
Comme vous pouvez le voir, le seul format audio qui est presque pris en charge par
tous les navigateurs est le format .wav. La bonne nouvelle est que les chiers .wav sont
largement disponibles et que vous pouvez trouver pratiquement nimporte quel son
dans ce format. Mais si une partie signicative de votre public prfre le navigateur
Google Chrome, vous allez avoir besoin dun plan B.
206
Chapitre 10. Son
Tableau 10.1 Navigateurs et prise en charge des formats audio

Navigateur
MP3
WAV
OGG
Chrome
Oui
Non
Oui
Firefox
Non
Oui
Oui
Internet Explorer 9
Oui
Non
Non
Opera
Non
Oui
Non
Safari
Oui
Oui
Non
10.3 SOURCE LA RESCOUSSE : PLAN B

Habituellement, si vous avez dterminer quel navigateur fonctionne avec quelles
ressources, vous devez faire appel JavaScript. Heureusement, HTML5 possde un
lment qui propose diffrents formats audio et laisse le navigateur choisir celui qui
est compatible.
La balise <source> peut tre place lintrieur du conteneur <audio> en indiquant
la source et lURL de la ressource audio au sein de la balise <source>. Supposons que
vous exploitiez un site Web qui hberge des contenus audio pdagogiques. Au lieu
de dire chaque utilisateur quil doit employer un certain type de navigateur, il vous
suft de disposer des chiers audio pour tous les navigateurs possibles et de laisser le
navigateur slectionner ceux qui lui conviennent. Admettons par exemple que vous
afchiez la troisime leon sur une page Web. Lextrait de code suivant fournit une
slection de chiers quaucun navigateur ne pourrait refuser :
<audio controls>
<source src="lecon3.ogg">
<source src="lecon3.mp3">
<source src="lecon3.wav">
</audio>
La corve davoir crer plusieurs versions des chiers audio risque dtre fastidieuse, mais mme si vous programmez cela en JavaScript, vous aurez besoin de
plusieurs versions des mdias (au chapitre 9, rappelez-vous quil nous a fallu plusieurs
versions des chiers graphiques pour les plateformes mobiles et non mobiles et que nous
avons utilis JavaScript pour savoir quelle page devait tre afche sur un iPhone).
10.3.1 Attribut type

Quand on dnit plusieurs types diffrents de sources audio an de sassurer que les
navigateurs HTML5 pourront les lire, on peut amliorer le processus en ajoutant
lattribut type la balise <source>. Linformation de lattribut type dit au navigateur
sil doit tenter de charger le chier, comme dans lextrait suivant :
10.3 Source la rescousse : plan B
207
<source src="mists.ogg" type="audio/ogg">
Linclusion de lattribut type sert gagner du temps. Linterprteur du navigateur lit

la ligne et dtermine sil pourra ou non jouer le type de chier indiqu. Sil ne peut pas
le jouer, il ne sembtera pas essayer de le faire. Supposons par exemple que vous ayez
le choix de passer deux examens : lun sur HTML5 et lautre en physique quantique.
moins que vous nayez une formation en physique quantique, vous nallez mme
pas gaspiller votre temps passer cet examen, alors que vous allez tenter votre chance
avec le devoir sur HTML5. Il en va de mme avec lattribut type. Quand il voit le
type et dtermine quil ne peut pas le jouer, il nessaye mme pas.
Si lattribut type nest pas prcis, le navigateur va tenter de charger le contenu
audio, et sil narrive pas le jouer, il va poursuivre avec la balise <source> suivante et
tenter de la jouer.
Lextrait suivant liste tous les types :
<audio controls>
<source src="lecon3.ogg" type="audio/ogg">
<source src="lecon3.mp3" type="audio/mpeg">
<source src="lecon3.wav" type="audio/wav">
</audio>
Toutes les valeurs doivent tre des types MIME valides. Les types valides suivent
la rgle media-type dnie dans les spcications W3C de HTML5. Lattribut type
est optionnel, mais si votre site a un trac important, il vous aidera supprimer tout
appel inutile. Si vous voulez creuser cette question, vous devez aussi vous pencher sur
le paramtre codec qui est expliqu dans la section suivante.
10.3.2 Paramtre codec du type de la source

En gnral, si vous saisissez une valeur pour lattribut type, le type gnral est la
seule information que vous avez fournir. Cependant, quand plusieurs codecs sont
disponibles, vous devez ajouter les codecs que le navigateur sait lire. Encore une fois,
la spcication du codec ne va pas permettre au navigateur daccder un certain
codec sil nest pas capable de le lire. Au contraire, cela fournit une information au
navigateur de telle sorte que sil ne peut pas le lire, il ne tentera mme pas de le
faire. Cest comme un vendeur de journaux qui demanderait : Que voulez-vous ?
Nous avons des journaux en franais, en anglais et en espagnol. Si vous savez lire le
franais et langlais, vous pouvez choisir des journaux dans ces langues, mais si vous
ne lisez pas lespagnol, vous nallez pas tenter de lire un journal dans cette langue.
Avant de dtailler le paramtre codec, nous allons expliquer ce que cest. Le
terme codec est une combinaison des mots compression et dcompression, ce qui
signie que quand on parle de codec, on dcrit la manire dont un chier est encod
(habituellement compress) et dcod (dcompress pour quil puisse tre lu).
Le type de codec, mme si les types de chiers sont identiques, peut tre diffrent.
An dacclrer le processus qui dtermine si le chier peut tre lu, lajout du paramtre
208
Chapitre 10. Son
codec permet de ltrer les types de codecs que le navigateur ne sait pas lire. Par
exemple, tous les chiers .ogg suivants ont des codecs diffrents :
<source src="songFest.ogg" type="audio/ogg; codecs=vorbis">
<source src="songFest.spx" type="audio/ogg; codecs=speex">
<source src="audio.oga" type="audio/ogg; codecs=flac">
Vous devez donc vous souvenir que les codecs et les types de chiers sont deux
choses diffrentes. Si vos pages Web peuvent utiliser des informations compltes sur
les codecs dun chier, il est prfrable de le faire. Dans le cas contraire, certains
navigateurs peuvent tenter de jouer un son pour nir par trouver que le codec est
incompatible.
Certains types de chiers audio possdent une large gamme de codecs. Lextrait
de code suivant illustre des codecs typiques pour tous les chiers sonores HTML5 qui
peuvent tre lus par les navigateurs HTML5 :
<audio controls>
<source src="sound.ogg" type="audio/ogg; codecs=vorbis">
<source src="jazz.mp3" type="audio/mpeg; codecs=mp3">
<source src="Shadows.wav" type="audio/wav; codecs=wav">
</audio>
Lextrait ci-dessus nafche pas tous les codecs possibles de tous les types audio,
mais il reprsente les principaux types de codecs utiliss sur Internet.
10.4 CRATION DE FICHIERS AUDIO

Windows 7 et Macintosh OS X incluent tous les deux des programmes que vous pouvez
utiliser pour vos propres chiers audio. Ils sont intgrs votre ordinateur et moins
que vous ne les ayez supprims, ils sont prts enregistrer du son.
Les versions prcdentes de Windows possdaient une application denregistrement
du son, mais elles avaient un aspect diffrent de celle qui est utilise dans cet exemple.
Lapplication Magntophone qui faisait partie de Windows XP enregistrait les chiers
au format .wav de telle sorte quils taient prts pour les pages Web, mais la nouvelle
version du Magntophone qui est livre avec Windows 7 nenregistre les chiers quau
format .wma, ce qui ncessite une conversion pour que les chiers soient reconnus par
les navigateurs HTML5.
10.4.1 Enregistreur de son de Windows 7

La premire chose faire quand on ralise un enregistrement est de dnir le
type de microphone. La plupart des ordinateurs qui tournent sous Windows 7 ont
un microphone intgr et vous pouvez donc lutiliser. Dans le cas contraire, vous
devez brancher un microphone et vous assurer quil est correctement congur.
Habituellement, votre ordinateur peut trouver les pilotes audio dont il a besoin,
10.4 Cration de fichiers audio
209
mais certains microphones sont livrs avec des pilotes que vous devez installer (les
instructions dinstallation sont fournies avec le microphone).
Pour choisir un microphone, utilisez le chemin suivant : Panneau de conguration
> Matriel et audio > Grer les priphriques audio. Quand la fentre Son souvre,
slectionnez longlet Enregistrement, et vous verrez une liste de priphriques denregistrement disponibles, comme ceux qui sont illustrs la gure 10.2.
Vos priphriques denregistrement peuvent tre diffrents, mais en gnral vous
avez au moins le choix entre microphone interne ou microphone ligne entre. Aprs
avoir fait votre choix, cliquez sur le bouton OK, et vous tes maintenant prt ouvrir
lapplication Magntophone.
partir du menu Dmarrer, slectionnez Tous les programmes > Accessoires

> Magntophone (si vous excutez Windows XP, choisissez Tous les programmes >
Accessoires > Divertissement > Magntophone). La gure 10.3 illustre laspect du
Magntophone quand il est prt enregistrer (en haut) et quand il est en train
denregistrer (en bas).
Figure 10.2 Slection du priphrique denregistrement sous Windows 7.
Quand vous tes prt dmarrer lenregistrement, cliquez sur le point rouge et
commencez parler. Au fur et mesure que vous parlez, vous allez voir une barre
verte qui apparat ct du chronomtre. Si cette barre ne se dplace pas quand vous
parlez, cela signie que votre microphone ne fonctionne pas correctement. Dans le
210
Chapitre 10. Son
Figure 10.3 Application Magntophone sous Windows 7.
cas contraire, vous allez voir la barre verte se dplacer au fur et mesure que vous
parlez. Quand vous avez termin, cliquez sur le bouton Arrt de lenregistrement
(un carr bleu ; dans lapplication Magntophone sous Windows XP, le bouton Arrt
de lenregistrement est un rectangle noir juste ct du point rouge qui dmarre
lenregistrement).
Quand on clique sur le bouton Arrt de lenregistrement, une nouvelle fentre
Enregistrer sous souvre et vous pouvez slectionner le rpertoire o vous voulez sauvegarder votre enregistrement audio. Comme nous lavons dj mentionn, Windows 7
ne permet denregistrer quau format .wma (Windows Media Audio). Si vous utilisez
la version Windows XP, slectionnez Enregistrer ou Enregistrer sous pour ouvrir une
bote de dialogue et sauvegarder le chier au format .wav (et pas .wma !).
Conversion des fichiers
Si vous utilisez des fichiers audio pour des publics varis, vous allez avoir besoin dune
de ces deux applications :
Un diteur de sons qui enregistre les fichiers audio dans les formats .wav, .mp3 ou
.ogg.
Un programme de conversion. Une simple recherche sur le Web vous en offrira
plusieurs. Par exemple, si vous utilisez le Magntophone de Windows 7, vous aurez
besoin dun programme pour convertir le format .wma en .mp3, .wav ou .ogg. En
gnral, le processus est assez simple, quil sagisse dun Mac ou dun PC.
Une grande varit de programmes de conversion est disponible, mais on peut en
trouver pour Windows 7 http://software-download.name/audio-converter-windows7/. Pour Mac, jai test Switch Sound File Converter (http://download.cnet.com/SwitchAudio-Converter/3000-2140_4-10703967.html) et je lai trouv facile utiliser ; il
convertit les fichiers sonores Mac classiques (comme les fichiers .aiff) en fichiers
audio reconnus par les navigateurs HTML5. Effectuez une recherche sur le Web et
vous trouverez beaucoup dautres convertisseurs pour Windows et Mac.
10.5 EFFETS SONORES

Il y a tellement deffets sonores sur le Web, quils soient gratuits ou payants, que
vous trouverez toujours leffet sonore que vous recherchez. Le meilleur endroit pour
dmarrer sa qute est FlashKit (www.flashkit.com/soundfx). Mme si ce site est
10.5 Effets sonores
211
consacr Flash, il met votre disposition plus de 7 000 effets sonores gratuits et libres
de droits. Vous pouvez de plus les tlcharger au format .wav ou .mp3, si bien quils
sont prts tre utiliss sur une page Web HTML5. Si vous effectuez une recherche
sur le Web, vous pouvez trouver pratiquement nimporte quel effet sonore.
Si vous voulez enregistrer vos propres effets sonores, vous pouvez utiliser de simples
bruits domestiques et lapplication denregistrement de votre ordinateur. Par exemple,
un chien qui aboie, le bruit dun avion, ou nimporte quel autre son que vous pouvez
enregistrer (soyez cependant prudent avec la musique qui nest pas libre de droits).
10.5.1 Sons de transition

Un son interactif subtil, mais efcace, peut tre utilis pour ajouter un composant
audio aux transitions de pages. Dans un monde tactile de boutons, dinterrupteurs et
de poignes de porte, nos actions impliquent souvent des sons. Vous pouvez faire la
mme chose avec vos liens Web. Accomplissez les tapes suivantes pour crer une
transition simple :
1. Allez www.flashkit.com/soundfx.
2. Slectionnez Sound FX dans le menu de la page daccueil.
3. Slectionnez Interfaces > Clicks partir de la catgorie Interfaces.
4. Slectionnez un son de clic qui vous plaise.
5. Vous pouvez choisir leffet qui vous plat, mais assurez-vous simplement que sa
dure est courte.
6. Tlchargez les versions .wav et .mp3.
7. Renommez les chiers en click.wav et click.mp3.
8. Placez les chiers .mp3 et .wav dans un dossier.
9. Dans ce dossier, placez les pages suivantes (SonTransition.html et SonOuverture.html disponibles dans les chiers du chapitre).
Page de dmarrage sans son
<!DOCTYPE HTML>
<html>
<head>
a {
color:#cc0000;
font-size:24px;
}
</style>
<title>Son de transition</title>
</head>
<body>
212
Chapitre 10. Son
<a href="SonOuverture.html">Cliquez pour aller sur la page suivante</a>

</body>
</html>
Un son est jou quand la page souvre

<!DOCTYPE HTML>
<html>
<head>
body {
color:#cc0000;
font-size:24px;
}
</style>
<title>Son louverture</title>
</head>
<body>
<audio preload autoplay>
<source src="click.wav" >
<source src="click.mp3" >
</audio>
Cette page clique.
</body>
</html>
Enregistrez les pages HTML5 dans le mme dossier que les chiers sonores. Testez
les pages HTML5 avec plusieurs navigateurs. Quand on clique sur le lien, cela ouvre
une page Web et la balise <audio> avec lattribut autoplay doit jouer un son de clic
juste aprs le chargement de la page. Lide est que le son se joue presque en mme
temps que le clic, comme si ctait le clic sur le lien qui avait produit le son. Si la page
met un peu trop de temps se charger, le son de clic se produit quand la page safche,
ce qui nest pas leffet dsir.
Au moment de la rdaction de cet ouvrage, les navigateurs Opera et Firefox sur
Macintosh ne fonctionnaient pas quand lattribut type tait ajout la balise <source>,
mais cela marchait avec Safari et Chrome. Cependant, quand lattribut type tait
omis, les pages Web fonctionnaient parfaitement avec tous les navigateurs HTML5
pour Macintosh. Lors des tests sous Windows 7, les dernires versions de Firefox et de
Safari ne gnraient pas de son, mais Opera et Chrome fonctionnaient (cest la raison
pour laquelle les dveloppeurs Web vieillissent vite). HTML5 est encore jeune et de
nombreuses fonctionnalits sont encore en dveloppement, mais il est possible quau
moment o vous lirez ce livre ces problmes soient rsolus.
10.5.2 Intgration deffets sonores une page Web

Il peut tre difcile de dclencher des effets sonores quand vous le souhaitez si vous
nutilisez pas lattribut controls. Avec HTML5, le seul moyen de dclencher un son
est de placer une page dans un iframe et de jouer le chier audio automatiquement.
213
10.5 Effets sonores
Avec JavaScript, on dispose de solutions bien plus lgantes, mais lutilisation diframe
est fonctionnelle.
Les quatre pages HTML5 suivantes sont composes dune page qui charge les trois
autres pages dans un iframe. Quand chaque page se charge, elle joue un effet sonore :
un aboiement, un cri et une explosion. Lutilisateur voit liframe passer la couleur du
bouton du haut-parleur sur lequel il a cliqu et entend leffet sonore, sans quune ligne
de JavaScript nait t utilise. La gure 10.4 illustre ce que lutilisateur voit quand il
clique sur licne du haut-parleur bleu.
Figure 10.4 Dclenchement de sons grce des liens vers un iframe.
Vous aurez besoin de tlcharger (ou de crer) trois sons, chacun tant enregistr
la fois au format .wav et .mp3. Utilisez des effets sonores de courte dure et quand
vous cliquerez sur chaque bouton, le son sera jou quand la page sera charge dans
liframe. La page charge ne comporte rien dautre quun son et, pour les besoins de la
dmonstration, elle a une couleur darrire-plan qui correspond la couleur de licne
du haut-parleur. Placez toutes les pages et les six chiers sonores dans le mme dossier
(les chiers suivants sont disponibles dans les chiers du chapitre : SonIFrame.html,
son1.html, son2.html, son3.html).
Une page avec un iframe appelle dautres pages avec des effets sonores
<!DOCTYPE HTML>
<html>
<head>
h3 {
color:#cc0000;
}
</style>
<title>Sons dans un iFrame</title>
</head>
<body>
214
Chapitre 10. Son
<article>
<header>
<h3>Testeur de sons</h3>
<iframe name="ifSound" width="125" height="10"></iframe>
</header>
<section> <a href="son1.html" target="ifSound"><img src="Redspeaker.gif"
width="40" height="40"></a> <a href="son2.html" target="ifSound"><img
src="Greenspeaker.gif" width="40" height="40"></a> <a href="son3.html"
target="ifSound"><img src="Bluespeaker.gif" width="40" height="40"> </a>
</section>
</article>
</body>
</html>
Page avec un aboiement et un fond rouge

<!DOCTYPE HTML>
<html>
<head>
body {
background-color:#cc0000;
}
</style>
<title>Son 1 : Rouge</title>
</head>
<body>
<audio autoplay>
<source src="dog.wav" >
<source src="dog.mp3" >
</audio>
</body>
</html>
Page avec un cri et un fond vert

<!DOCTYPE HTML>
<html>
<head>
body {
}
</style>
<title>Son 2 : Vert</title>
</head>
<body>
<audio autoplay>
<source src="scream.wav" >
<source src="scream.mp3" >
</audio>
</body>
</html>
10.6 vous de jouer !
215
Page avec une explosion et un fond bleu

<!DOCTYPE HTML>
<html>
<head>
body {
background-color:#0000cc;
}
</style>
<title>Son 3 : Bleu</title>
</head>
<body>
<audio autoplay>
<source src="boom.wav" >
<source src="boom.mp3" >
</audio>
</body>
</html>
Assurez-vous de tester ces pages sur diffrents navigateurs HTML5. Essayez aussi
de crer vos propres sons (vous pouvez embaucher votre chien, votre chat et un
perroquet).
10.6 VOUS DE JOUER !

Lexercice consiste crer une bande dessine parlante. Pensez une histoire simple
qui peut tre raconte en quatre cases. Chaque case comportera un dessin (ou une
photo numrique), mais pas de texte. Quand lutilisateur clique sur chaque case, un
enregistrement audio lit le texte que lon pourrait trouver dans une bande dessine.
Vous devez utiliser un iframe pour dclencher chacun des quatre enregistrements, et
chaque case sera un bouton qui reliera la page au chier audio correspondant. Vous
pouvez utiliser des images clip art pour les cases si vous le souhaitez et vous pouvez
amliorer lhistoire avec des effets sonores qui accompagneront le texte audio qui est lu.
11
Vido
Objectif
La vido est lune des fonctionnalits les plus importantes qui ont t rajoutes
HTML5. Si vous avez dj frquent YouTube, vous tes conscient de la puissance
quexerce la vido sur le Web. De la mme manire, cela fait des annes que les
utilisateurs dAdobe Flash ont incorpor des vidos dans leurs programmes, si bien
que la vido sur le Web nest pas vraiment une nouveaut. Pourtant, les nouvelles
fonctionnalits de HTML5 permettent daccder une vido directement partir
dune page Web, et cest quelque chose que HTML navait pas t capable de faire
dans ses prcdentes versions sans un lien vers un chier Flash (.swf) ou tout autre
chier binaire qui diffusait la vido indpendamment des balises places dans le
chier HTML.
Il faut cependant apporter ici une prcision importante : la vido que vous afchez
sur votre page Web nest pas vritablement une vido diffuse en streaming ; il sagit
en fait dun type de tlchargement progressif. Au fur et mesure que la vido est
tlcharge partir du serveur Web, elle est afche par la page Web, si bien que le
dbit nest pas garanti. En fait, la plupart des vidos cres par les adeptes de Flash
appartiennent trs probablement ce type de vido. Pour le moment, la diffusion de
la vido en streaming ncessite un serveur de vido streaming tel quAdobe Flash
Media Server. On peut cependant sattendre des dveloppements de vritable
streaming au fur et mesure que la vido HTML5 va gagner en popularit.
Si vous avez lu le chapitre 10, vous retrouverez certaines balises que nous avons dj
tudies, comme la balise <source>, mais avec une orientation sur le chargement et
la lecture de vidos.
218
Chapitre 11. Vido
11.1 CRATION DUNE PAGE HTML5 AVEC DE LA VIDO

Pour commencer travailler sur la vido, il vous faut un chier vido. Vous pouvez en
crer un sur votre ordinateur ou bien en tlcharger un sur le Web. Toute la question
est de savoir le type de chier vido qui convient. Il est plus facile de sy retrouver dans
la Tour de Babel que dans tous les codecs vido, si bien que cette section va commencer
par le plus courant de tous les formats vido actuels, H.264. En tant que format vido,
on dsigne habituellement H.264 sous le nom de MPEG-4 (lextension de chier est
.mp4). Ce format vido a gagn en popularit car il sagit du premier format vido en
haute dnition pour le Web. La plupart des gens lont dabord rencontr sur le Web
sous la forme de chiers Flash (.f4v ), et les rsultats taient bien meilleurs que les
prcdentes vidos pour le Web.
Sans surprise, la balise principale qui est utilise pour la vido se nomme <video>.
Tout comme pour une image ou un chier audio, le premier attribut dont vous
avez besoin est une source et lattribut src est utilis pour identier la source. La
cration de pages Web intgrant de la vido est donc trs simple. Le listing suivant
(VideoSimple.html disponible dans les chiers du chapitre) afche une vido de base
dans une page Web HTML5.
<!DOCTYPE HTML>
<html>
<head>
<title>Vido simple</title>
</head>
<body>
<video src="mbAux1small.mp4" controls preload="auto"></video>
</body>
</html>
Pour tester ce chier, vous aurez besoin du navigateur Safari sur Macintosh car
pendant lcriture de cet ouvrage, ctait le seul navigateur qui fonctionnait avec ce
type de vido.
Si vous excutez le programme sous Safari, vous devez attendre de voir apparatre
une image avant de lancer la vido. Quand limage apparat, cela signie que la vido
est prte et vous pouvez cliquer sur la che pour jouer la vido. La gure 11.1 illustre
la vido en pause.
Bien videmment, il est souhaitable que votre vido puisse tre lue sur plus dun
navigateur car sinon vous allez perdre beaucoup dutilisateurs. Heureusement, HTML5
a un moyen simple de rsoudre ce problme. Au sein dun conteneur <video>, vous
pouvez ajouter autant de balises <source> que vous le souhaitez. Lattribut source (src)
est dplac dans la balise <source>. Si vous placez plusieurs balises <source> dans un
conteneur <video>, le navigateur va examiner les chiers vido et slectionner celui
quil sait jouer puis le jouer automatiquement. Sil sait jouer plus dun type de format
vido, le navigateur commence jouer le premier quil reconnat et ignore tout le
reste. Tout ceci peut tre ralis en HTML5 sans avoir recours JavaScript. Lextrait
11.1 Cration dune page HTML5 avec de la vido
219
de code suivant montre la syntaxe de base pour accder aux chiers vido de cette
manire :
<video>
<source
<source
<source
<source
</video>
src="someVid.3gp">
src="someVid.mp4">
src="someVid.ogv">
src="someVid.webm">
Figure 11.1 Affichage dune vido simple dans le navigateur Safari.
Bien quil existe de nombreux formats vido diffrents, nous nous concentrerons
dans ce chapitre sur lutilisation des formats suivants :
H.264 : .mp4 et .mov
OGG : .ogv
WebM : .webm
3GP : .3gp
Pendant la rdaction de cet ouvrage (et sans doute lavenir) dautres formats
deviendront compatibles avec diffrents navigateurs, mais pour le moment, grce
la balise <source>, vous pouvez facilement rfrencer plusieurs navigateurs diffrents.
220
Chapitre 11. Vido
Par exemple, le code suivant (SimpleVideoSource.html disponible dans les chiers du

chapitre) joue le mme chier vido sur tous les navigateurs tests, y compris deux
navigateurs mobiles.
<!DOCTYPE HTML>
<html>
<head>
<title>Vido slective</title>
</head>
<body>
<video controls preload="auto">
<source src="multiformats/mbAux1.3gp">
<source src="multiformats/mbAux1small.mp4">
<source src="multiformats/setAux.ogv">
<source src="multiformats/mbAux1small.webm">
</video>
</body>
</html>
Quand jai test ce programme avec diffrents navigateurs et sous plusieurs plateformes, tous les navigateurs ont t capables de trouver un format vido compatible et
de jouer la fois la vido et le son. La gure 11.2 illustre la vido lue dans le navigateur
Safari mobile sur un iPhone.
Figure 11.2 Vido lue sur un iPhone.
11.2 Compatibilit vido des navigateurs
221
La qualit de la lecture tait assez constante sur tous les navigateurs. Sur les
navigateurs Safari et Perfect Browser pour iPhone, la qualit de la vido tait plutt
bonne et elle sest surtout charge rapidement.
11.2 COMPATIBILIT VIDO DES NAVIGATEURS

Deux problmes trs diffrents doivent tre traits quand on parle de la compatibilit
vido avec HTML5. Le premier est tout simplement de savoir quel navigateur
fonctionne avec quel format vido. Jutilise le terme format vido pour dsigner
une combinaison de conteneurs vido (lemballage dans lequel la vido est en fait
incluse) et de codecs (technologie de codage et de dcodage) laquelle on se rfre
principalement par lextension qui est associe ces chiers. Techniquement, les
choses sont plus complexes et il nous faudrait beaucoup plus de place pour tre
exhaustif sur le sujet, mais pour exploiter la vido, vous avez besoin de reconnatre
les diffrents chiers par leur extension et de savoir avec quel navigateur ils sont
compatibles.
Laissons les experts faire leur travail
Les technologues semblent passer leur temps chercher savoir pourquoi les
diffrentes socits ont choisi tel format particulier de vido. Les entreprises comme
Apple, Microsoft, Google, Opera, Adobe et Mozilla ont choisi les formats de fichier
pour des raisons de proprit intellectuelle, de droit dutilisation, de licence, et pour
des motifs financiers, mais aussi parce que lintgration de cette technologie faisait
partie dautres projets. La seule chose qui doit vous intresser est de savoir ce qui
fonctionne pour vos sites Web et comment vous allez limplmenter. Laissez les
questions mtaphysiques aux experts !
Pour le moment, il est risqu daller au-del de ce qui a t test et approuv.

Jestime cependant que nous pouvons examiner quatre types diffrents de conteneurs
de chiers et de codecs et utiliser les quatre formats que nous avons lists au dbut du
chapitre. Le format de conteneur 3GP est li au format MPEG-4, mais il sagit en fait
dun format H.263, et il a t principalement adopt pour les priphriques mobiles
comme liPhone. Le tableau 11.1 liste la matrice de compatibilit des principaux
navigateurs avec diffrents formats vido.
la lecture de ce tableau de compatibilit, il est vident quil faut apprendre
convertir les diffrents formats, ce qui sera le sujet de la prochaine section. La
conversion doit dabord intervenir entre le type de chier utilis par le systme
denregistrement (une camra ou une application de partage dcran) ou le logiciel
ddition vido. Le second type de conversion intervient entre la vido totalement
prpare pour le Web et les types de chiers possibles pour les pages HTML5. Une fois
que tous les types de chiers ncessaires sont prts, il ne vous reste plus qu les placer
dans des balises <source> dun conteneur <video>.
222
Chapitre 11. Vido
Tableau 11.1 Navigateurs et formats vido pris en charge

Navigateur
H.264
OGG
WebM
3GP
Chrome
Non
Oui
Oui
Non
Firefox
Non
Oui
Inconnu
Non
Internet
Explorer 9
Non
Non
Non
Oui
Opera
Non
Oui
Oui
Non
Safari
Oui
Non
Non
Oui
Safari Mobile
Non
Non
Non
Oui
11.2.1 Conversion de fichiers WebM avec Miro Video Converter

De tous les formats de chier tests, seul Opera fonctionne avec le format WebM.
Cependant, plusieurs autres entreprises qui dveloppent des navigateurs sont aussi
impliques dans le projet WebM, et il se pourrait qu lavenir ce format devienne plus
important quil ne lest actuellement. Vous trouverez de plus amples informations sur
WebM en consultant le site Web du projet WebM ladresse www.webmproject.org.
Miro Video Converter est un programme de conversion qui fonctionne avec le
format WebM. Il est simple utiliser et fournit de nombreuses options de conversion,
et pas seulement pour le format WebM. La gure 11.3 illustre la conversion dun
chier MP4 en chier WebM dans Miro Video Converter.
Miro Video Converter est disponible gratuitement www.mirovideoconverter.com.
Le processus de conversion commence par le chargement du chier convertir dans
une fentre centrale, puis il suft ensuite de cliquer sur le bouton Convert. Cest trs
simple et intuitif.
Pour les chiers .ogv, slectionnez Theora dans le menu puis cliquez sur le bouton
Convert. Le chier converti a lextension .theora.ogv, mais en supprimant .theora,
vous pouvez parfaitement le lire uniquement avec lextension .ogv. En convertissant
un chier .mp4 en chier .ogv, la taille est passe de 54 Mo 11 Mo !
11.2.2 Conversion au format 3GP avec Adobe Media Encoder CS5

Adobe Media Encoder CS5 (AME) offre de nombreux avantages pour la conversion
des chiers au format 3GP qui est destin aux priphriques mobiles. Lencodeur est
livr avec diffrents produits Adobe, et pour cet ouvrage, je lai test avec Adobe
Premier en ditant des chiers MP4 gnrs par une camra numrique HD (haute
dnition).
Outre la possibilit de convertir des chiers au format 3GP, AME permet galement
de raliser certains travaux ddition de base. La fonction la plus importante est la
rduction des dimensions de la vido et, par consquent, de la taille du chier et de
11.2 Compatibilit vido des navigateurs
223
Figure 11.3 Conversion de fichiers laide de Miro Video Converter.
la quantit de temps ncessaire la diffusion sur Internet. Cela est particulirement

crucial pour les priphriques mobiles.
La gure 11.4 illustre un chier qui a t sauvegard nativement en 720 x 480,
puis a t ensuite rduit en 320 x 212. Typiquement, les vidos sont formates dans
un ratio 4:3, mais le format HD de la camra utilisait un ratio 16:9, si bien que les
dimensions taient plus larges que ce qui est prvu pour une vido cre avec une
webcam intgre un ordinateur. Quand on prpare une vido pour le Web, cest
un problme important quil faut prendre en compte. De la mme manire, quand
on dnit les attributs width et height dune balise <video>, il ne faut pas oublier de
modier les dimensions.
Comme vous pouvez le voir la gure 11.4, AME fournit de nombreuses informations sur le chier. Dans le volet de gauche, il afche le chier sur lequel on travaille.
Quand la conversion est termine, AME offre diffrents formats dafchage
gnrique. Par exemple, la gure 11.5 illustre le rsultat attendu sur un priphrique
mobile avec un afchage horizontal.
224
Chapitre 11. Vido
Figure 11.4 Conversion de fichiers avec Adobe Media Encoder.
Figure 11.5 Affichage vido dans Adobe Device Central.
En examinant la gure 11.5, on a une excellente ide de laspect de la vido sur le

priphrique cible. Adobe Device Central offre plusieurs afchages diffrents de telle
sorte que lon peut optimiser la vido avant de la placer sur le Web.
11.3 Cration de vidos pour le Web
225
11.3 CRATION DE VIDOS POUR LE WEB

Avant dtudier les nombreux attributs de llment video, cette section traite le
problme global de la cration des vidos et de leur enregistrement sur lordinateur. Si
ltendue des types vido disponibles pour le Web est large, la cration et le stockage
des vidos regroupent aussi de nombreux aspects. Nous nous contenterons dans le
cadre de cet ouvrage daborder les quatre moyens suivants de produire de la vido :
Webcams
Petits camscopes
Camscopes standard
Logiciel de capture vido
Nous allons tudier comment rcuprer la production de la camra pour la

transformer en un chier qui puisse tre utilis immdiatement ou converti en un
chier compatible avec HTML5.
11.3.1 Webcams
Aujourdhui, la plupart des ordinateurs portables sont livrs avec une webcam intgre,
et il en va de mme de nombreux ordinateurs de bureau. Pour les ordinateurs qui nen
sont pas pourvus, il existe de nombreux modles que lon peut facilement connecter
via le port USB.
Pour les utilisateurs de Windows 7, le meilleur logiciel pour raliser des vidos
laide de la webcam est lutilitaire qui est livr par le fabricant de la webcam. Par
exemple, Logitech et Creative, deux socits qui fabriquent des webcams, livrent
dexcellents logiciels qui enregistrent et stockent les chiers vido qui peuvent tre
convertis pour un usage sur le Web. Vous pouvez aussi ajouter des effets spciaux aux
vidos avec ces logiciels.
Avec Windows 7 et Windows Vista, vous pouvez aussi tlcharger
gratuitement la nouvelle version de Microsoft Movie Maker ladresse :
http://explore.live.com/windows-live-movie-maker.
la diffrence de
Windows XP, qui est livr avec Windows Live Movie Maker, vous devez tlcharger
le logiciel ddition de lms sur le site de Microsoft si vous avez Windows 7 ou
Windows Vista.
Les ordinateurs Apple Macintosh sont en gnral livrs avec des webcams iSight.
Les ordinateurs portables iMac et MacBook ont des webcams intgres au sommet de
lcran. Les modles qui ne sont pas livrs avec des webcams peuvent brancher une
webcam iSight sur le port USB ou Firewire.
Pour la cration des vidos, on peut utiliser lapplication Photo Booth qui est
livre avec les Mac. Tous les chiers pris avec Photo Booth sont enregistrs au format
QuickTime avec lextension .mov. Ils sont en fait au format MP4, et si vous modiez
lextension de .mov en .mp4, ils sont galement reconnus comme des chiers vido.
226
Chapitre 11. Vido
Les webcams sont utiles pour certains types de projets vido. Pour les vidos
ducatives pour le Web, lenseignant peut sasseoir face la webcam et faire son cours
pour ensuite diffuser la vido son public. La ralisation de pages Web en HTML5
prenant en charge une prsentation vido rend la cration de didacticiels aussi simple
que la ralisation de toute prsentation similaire nayant pas t conue pour un usage
sur le Web.
11.3.2 Petits camscopes

Le principal inconvnient des webcams pour raliser des vidos qui puissent tre
incorpores en HTML5 est quelles sont relies un ordinateur, quelles soient
intgres ou bien relies par un port USB ou Firewire. Cela rend lutilisation mobile
des webcams problmatique, mme pour des ordinateurs portables extrmement lgers.
Il existe des webcams sans l, mais elles ont un rayon daction limit et sont
plus onreuses. Plusieurs solutions alternatives que lon peut emporter partout sont
pourtant disponibles. Les plus courantes sont les camras qui sont intgres aux
tlphones mobiles. Les tlphones mobiles employs pendant les manifestations
qui ont suivi les lections iraniennes en 2009 ont fourni au monde entier des
tmoignages sur les reprsailles du gouvernement contre ceux qui dnonaient les
fraudes lectorales. Comme les journalistes occidentaux taient empchs de couvrir
les vnements la suite des lections, linformation a t produite par des tlphones
mobiles dont les vidos ont t diffuses sur YouTube et annonces via Twitter.
Il existe aujourdhui une nouvelle gnration de petits camscopes HD qui sont
parfaitement portables et qui enregistrent la vido sur une mmoire ash. Par exemple,
la camro Flip Mino HD avec ses dimensions de 10 cm x 5 cm x 1,60 cm (H x L x
P) est plus petite que de nombreux tlphones mobiles. La gure 11.6 prsente une
camra Flip typique personnalise avec un logo dentreprise.
Outre Flip, il existe des camras HD fabriques par Kodak (Pocket Video). Les
camras Flip et Kodak enregistrent sur de la mmoire ash et il nest donc pas
ncessaire davoir une cassette numrique ou une carte mmoire ash externe. Ces
camras sont livres avec des logiciels ddition vido limits et enregistrent la vido
au format H.264 sur les PC et les Macintosh.
La qualit de la vido est aussi leve que celle de camscopes plus grands, plus
lourds et plus chers. Ces camras ont t conues ds le dpart pour tre utilises pour
la cration de vidos pour les sites de rseaux sociaux comme Facebook et YouTube ;
cela a pour consquence que le format de sortie des chiers natifs est prvu pour tre
afch avec des lments vido HTML5.
11.3.3 Camscopes standard

Par standard, on entend ici les camscopes portatifs avec des caractristiques comme
un objectif capable de zoomer, le stockage sur des cassettes numriques, la prise
en charge de cartes mmoire ash et dautres fonctionnalits qui peuvent tre
embarques sur des plateformes plus grandes. La gamme des camscopes sest largie
11.3 Cration de vidos pour le Web
227
Figure 11.6 Les petits camscopes HD sont adapts pour le Web.
tel point quelle stend des matriels peu chers utiliss pour des enregistrements
en famille jusquaux camras professionnelles qui sont employes par des ralisateurs
indpendants.
Comme pour les petits camscopes, les camscopes standard ont des connecteurs
USB ou Firewire. Ces connecteurs peuvent tre relis directement aux logiciels
ddition vido comme Adobe Premier, Apple Final Cut ou Vegas. La vido dite
peut ensuite tre enregistre dans un format qui peut tre utilis par les navigateurs
HTML5.
11.3.4 Logiciels de capture vido

Les logiciels de capture vido considrent votre cran comme un enregistreur vido et
le microphone qui est reli votre ordinateur comme un microphone denregistreur
vido. Camtasia est, par exemple, un logiciel de capture vido extrmement rpandu.
Il est facile utiliser et possde plusieurs fonctionnalits pour zoomer, faire des
panoramiques et plus gnralement pour simuler lusage dun camscope braqu sur
votre cran. La gure 11.7 illustre les contrles de base du logiciel.
Fondamentalement, Camtasia ncessite simplement que lutilisateur slectionne
lcran et le microphone, puis clique sur le bouton Rec (voir la gure 11.7). Disponible
pour Windows 7 et Macintosh OS X, cest un logiciel qui est largement utilis par
les formateurs et les enseignants qui ont besoin que les utilisateurs suivent ce qui se
passent lcran.
Apple Quick-Time Player intgre aussi une application de capture vido qui
enregistre automatiquement les chiers au format .mov (.mp4), ce qui les rend prts
tre utiliss sur un site Web HTML5. Le processus denregistrement est extrmement
228
Chapitre 11. Vido
Figure 11.7 Les logiciels de capture vido permettent denregistrer en direct tout ce qui se
passe sur votre cran.
facile et une fois que lon a slectionn le microphone, lopration se droule en une
seule tape.
11.4 ATTRIBUTS DES BALISES VIDEO ET SOURCE

Plusieurs attributs des balises <video> et <source> sont essentiels pour assurer le succs
du dploiement de la vido en HTML5. Une fois que vous avez cr, dit et converti
vos vidos pour le Web, ltape suivante consiste les placer sur la page Web. Cette
section tudie les attributs suivants de llment video :
src
poster
preload
loop
autoplay
controls
width et height
Ces attributs de la balise <video> sont traits de concert avec la balise <source>
car tous les navigateurs ne lisent pas les mmes types de chiers si bien que plusieurs
sources diffrentes doivent tre listes. La balise <source> permet aux navigateurs de
choisir quel chier vido est compatible avec leurs propres fonctions dafchage vido
(voir le dbut du chapitre).
11.4.1 Src
Lattribut type fait partie de la balise <source>. Comme nous lavons montr au dbut
du chapitre, lattribut src est utilis pour slectionner un chier vido lire. Si le
navigateur ne peut pas lire le chier, il passe au chier suivant de la liste des sources.
An dacclrer ce processus, lattribut type permet au navigateur de savoir quel type
de chier est en attente de lecture et il contient un paramtre MIME qui dit quel
codec est utilis. Cela empche le navigateur de charger le chier puis de se rendre
compte quil ne peut pas le lire. Au lieu de cela, il dtermine partir de lattribut type
si le chier vido est compatible.
11.4 Attributs des balises video et source
229
<source src="fileName.ext" type="video/type; codecs=c1, c2">
Lassignation du type peut tre faite avec ou sans le codec. Si vous ne connaissez
pas le codec, vous pouvez laisser cette information en blanc et compter sur le type
pour laisser le navigateur dterminer sil peut lire le chier. Si vous connaissez le
codec ou les codecs, vous pouvez en placer plusieurs dans la liste dassignation. Si
vous ntes pas sr, il est prfrable de laisser la liste des codecs vide. Le programme
suivant (TypeVideoSource.html disponible dans les chiers du chapitre) illustre les
assignations des types pour les quatre principales sortes de chiers vido utilisables sur
le Web.
<!DOCTYPE HTML>
<html>
<head>
<title>Vido slective</title>
</head>
<body>
<video controls preload="auto">
<source src="mbAux1.3gp" type="video/3gpp; codecs=mp4v.20.8">
<source src="mbAux1small.mp4" type="video/mp4; codecs=mp4v.20.8 ">
<source src="mbAux1small.ogv" type="video/ogg; codecs=theora, vorbis" >
<source src="mbAux1small.webm" type="video/webm; codecs=vorbis,vp8" >
</video>
</body>
</html>
Pour dterminer le type et le codec dun chier, on trouve plusieurs programmes sur
le Web. MediaInfo, qui est disponible gratuitement pour les systmes dexploitation
Windows, Macintosh, et plusieurs versions de Linux peut tre tlcharg ladresse
http://mediainfo.sourceforge.net/en.
11.4.2 Poster
Lattribut poster est utilis avec les grandes vidos et les connexions Internet lentes.
Il est simple utiliser et si vous savez que votre vido sera longue charger lcran,
lattribut poster donne lutilisateur quelque chose voir pendant quil attend. Voici
un extrait de code qui illustre la syntaxe dutilisation :
<video poster="message.png">
<source src="multiformats/mbAux1.mp4" type="video/mp4">
</video>
Vous noterez que lattribut poster gure dans la balise <video> mme si toutes les
informations concernant le chier se trouvent dans la balise <source>. Il ny a pas de
conit entre les attributs de la balise video et ceux de la balise source.
230
Chapitre 11. Vido
11.4.3 Preload
Il semblerait naturel dinclure lattribut preload de la balise <video> sur toutes les pages
Web qui utilisent de la vido. Ainsi, ds que la page se charge, la vido commence se
charger. Cela peut tre important pour une page qui ne comporte quune seule vido
qui est la caractristique principale de la page. Mais sil sagit dune partie secondaire
de la page, ou si plusieurs vidos sont prsentes sur la page, le prchargement peut
absorber toutes les ressources. Cet attribut est donc utile, mais il doit tre employ
judicieusement. Voici sa syntaxe dutilisation :
<video preload="auto">
<source src="mbAux1small.webm" type="video/webm; codecs=vorbis,vp8 " >
</video>
On peut assigner plusieurs valeurs lattribut preload et elles sont identiques aux
valeurs de lattribut preload pour les chiers audio.
none : cette valeur peut sembler trange, mais certains navigateurs peuvent tre
paramtrs pour prcharger automatiquement les chiers vido. Si lutilisation

dun chier vido particulier est peu probable, le dveloppeur peut dcider de
ne pas utiliser de ressources Internet et assigne donc la valeur none lattribut
preload.
metadata : tous les chiers vido contiennent des mtadonnes comme la dure
ou dautres donnes que lauteur du contenu vido place dans le chier. Quand
lutilisation dun chier vido est incertaine, il est cependant raisonnable de
charger les mtadonnes car cela consomme peu de ressources Internet.
auto : si lattribut preload est prsent, il prcharge automatiquement les
informations du chier vido. Lassignation auto agit simplement comme un
rappel que le chier va tre prcharg (cest comme si lon navait assign
aucune valeur lattribut preload).
Plus votre public sera vari, plus vous aurez de contenus vido sur vos pages Web,
ce qui rendra souhaitable lutilisation des options de lattribut preload.
11.4.4 Loop
Une boucle vido est quelque chose que vous devez planier soigneusement de peur de
voir fuir tous vos utilisateurs. Une boucle implique que la mme vido va recommencer
depuis le dbut ds quelle se termine. Voici un exemple dutilisation :
<video loop controls>
<source src="phantom.3gp">
</video>
Vous noterez que dans lextrait ci-dessus, on a inclus un attribut controls, ce qui
permet lutilisateur darrter la vido sil le souhaite. Si vous dnissez une boucle
avec un autoplay et incorporez le tout sur une page, vous risquez de perdre beaucoup
11.4 Attributs des balises video et source
231
dutilisateurs. Si vous crez une publicit en boucle, ne vous attendez pas ce que les
visiteurs soient attirs par le service ou le produit dont vous faites la publicit ; ils le
remarqueront, mais ce nest pas une bonne mthode.
Il y a un certain type de boucle, qui est plus frquent en musique quen vido,
qui peut tre utile. Si la vido est sufsamment courte et ne comporte pas de grands
mouvements, une boucle peut consommer trs peu de ressources et rutiliser la mme
vido qui sera stocke dans le cache. Une dmonstration dun processus ou mme une
publicit qui est ennuyeuse peut tre utilise de cette faon-l.
11.4.5 Autoplay
Comme lattribut loop, lattribut autoplay doit tre utilis bon escient quand il est
employ avec la vido. Lattribut autoplay est une combinaison de prchargement
et de dmarrage automatique de la vido. La syntaxe est un interrupteur et il suft
dintgrer autoplay dans la balise <video> pour que la vido dmarre.
<video poster="wait.jpg" autoplay>
<source src="phantom.3gp">
</video>
Dans lextrait ci-dessus, lutilisateur na aucun moyen pour arrter la lecture de la

vido, mais sil ny a pas dattribut loop, la vido ne sera lue quune fois et sarrtera.
Si la page est cense ntre rien dautre quune vido, il est assez prudent dutiliser
autoplay sans contrleur. Vous noterez aussi que lextrait de code comporte un attribut
poster pour avertir lutilisateur quil va se passer quelque chose, au cas o la vido
serait longue charger. Dans le contexte dun site Web utilisant autoplay, assurez-vous
dinclure un lien vers la page suivante au cas o lutilisateur ne souhaite pas voir la
vido plus dune fois.
11.4.6 Controls
Lattribut controls gnre un panneau de contrle graphique sous la vido qui permet
lutilisateur daccomplir les fonctions suivantes :
Dmarrer la vido,
Arrter la vido,
Couper le son de la vido,
Contrler le volume de la vido,
Indiquer la position,
Avancer ou reculer.
Lattribut controls est un interrupteur qui est implment de la manire suivante :

<video controls>
<source src="multiformats/mbAux1small.webm">
</video>
232
Chapitre 11. Vido
Limplmentation du contrle diffre dun navigateur lautre (comme pour le

contrle audio). La gure 11.8 illustre lafchage de la mme vido dans les navigateurs
Opera et Chrome.
Figure 11.8 Navigateurs Opera (gauche) et Chrome (droite) affichant un contrle vido.
Les diffrences dans les contrles relvent principalement du style, mais comme
vous pouvez le voir dans la comparaison des navigateurs Opera et Chrome, Opera
afche la position de la vido en cours de lecture par rapport la dure totale, alors
que Chrome nafche que la position en cours de la vido.
11.4.7 Width et Height

Les attributs width et height sont trs importants pour la vido. Les navigateurs
utilisent les valeurs width et height comme des indices pour afcher la vido. Plus
les valeurs seront proches des valeurs de la taille relle de la vido, meilleure sera sa
lecture. Lextrait de code suivant indique la syntaxe :
<video width="352" height="288">
<source src="multiformats/mbAux1small.ogv">
</video>
La plupart des vidos conservent un ratio 4:3, comme la rsolution 320 x 240 ;
cependant, avec la vido HD, le ratio est diffrent et ldition modie parfois les
dimensions dune vido. Vous pouvez slectionner un chier vido et regarder ses
proprits, mais on ne vous donne pas toujours ses dimensions. Par exemple, sous
Mac OS X, les informations sur les dimensions des chiers .ogv et .webm ne sont pas
fournies quand on demande lafchage des proprits, alors que les dimensions dune
vido au format MPEG4 sont parfaitement afches.
233

Cet exercice ncessite une camra vido dont la qualit importe peu. Si vous avez
dj assist une prsentation ralise avec Microsoft PowerPoint, vous savez que
lorsque le confrencier parle, il afche diffrentes diapositives contenant du texte et
des images. Dans le cadre de cet exercice, pensez quelque chose que vous aimeriez
apprendre quelquun. En utilisant une combinaison dimages, de vido et de texte,
crez une prsentation Web de trois pages. Quand lutilisateur se dplace dune page
lautre, il y a une vido sur chaque page qui dmarre automatiquement, mais un
contrleur est prsent sur la page pour pouvoir arrter la vido ou exercer dautres
fonctionnalits. Incluez une image pour illustrer le sujet et du texte pour expliquer le
contenu de la prsentation. Vous pouvez vous assoir face une webcam pour raliser
la vido.
QUATRIME PARTIE
Balises HTML5
dynamiques et un
soupon de JavaScript
12
Introduction JavaScript
Objectif
JavaScript est un langage de programmation Web que lon peut utiliser avec HTML5.
Il sert accder certaines parties des pages Web crites en HTML5 et permet
dautres choses que lon ne peut tout simplement pas raliser sans JavaScript. Ce
chapitre prsente les fonctionnalits de base qui vont tre utilises spciquement
avec les lments HTML5.
JavaScript est considr comme un langage de script car il est interprt par le
navigateur quand la page Web est charge ; le script nest donc pas compil et
stock sur lordinateur en tant que chier binaire. Limplmentation de JavaScript
peut lgrement varier dun navigateur lautre, mais comme JavaScript respecte
la norme ECMAScript (ECMA-262), ces diffrences ne sont pas normes et je ne
traiterai dans ce chapitre que les aspects de JavaScript que lon peut utiliser avec
HTML5.
Vous noterez pour nir que JavaScript et Java nont rien en commun. JavaScript
nest pas une version interprte de Java. Si vous voulez trouver sur le Web des
informations complmentaires propos de JavaScript, il ne vous servira donc rien
de rechercher des renseignements sur Java.
12.1 INSERTION DE JAVASCRIPT DANS DES PAGES

HTML5
Les programmes JavaScript sont placs dans len-tte dune page Web car cest cette
partie de la page qui se charge en premier, si bien quelle est prte quand le reste
238
Chapitre 12. Introduction JavaScript
de la page se charge. Les programmes JavaScript agissent en grande partie comme

les scripts CSS3, et comme eux, ils peuvent tre placs ailleurs que dans len-tte
de la page. Pour des raisons de simplicit, je me limiterai dans ce chapitre placer
tout le code JavaScript dans len-tte. titre dexemple, testez le programme suivant
(PremierJS.html disponible dans les chiers du chapitre).
<!DOCTYPE HTML>
<html>
<head>
document.write("Une conversation avec HTML5 va sengager
brivement....");
</script>
<title>Premier programme JavaScript</title>
</head>
<body>
</body>
</html>
Quand on teste ce programme, on voit du texte sur la page et rien dautre. Llment
important pour comprendre la relation entre HTML5 et JavaScript se situe dans la
fonction : document.write(). Document fait rfrence la page Web, et write() est
une mthode qui dit la page Web ce quelle doit faire. En loccurrence, write() dit
au programme dcrire le texte entre guillemets sur la page Web.
12.1.1 JavaScript dans des fichiers externes

Tout comme pour les chiers CSS3, vous pouvez crer des programmes JavaScript
dans des chiers texte et les enregistrer. Lextension .js est utilise pour identier les
chiers JavaScript. Par exemple, le programme JavaScript suivant ne se compose que
dune seule ligne :
document.write("Cela provient dun fichier externe... ");
Enregistrez-le sous le nom JSexterne.js dans un chier au format texte. Saisissez

ensuite le programme HTML5 suivant et enregistrez-le dans le mme dossier que le
programme JSexterne.js. Llment important de la page est la balise <script> qui
est utilise pour spcier le programme JavaScript utiliser.
<!DOCTYPE HTML>
<html>
<head>
<script src="JSexterne.js"></script>
<title>JavaScript externe</title>
</head>
<body>
</body>
12.1 Insertion de JavaScript dans des pages HTML5
239
Quand la page Web souvre, on voit le contenu de linstruction document.write().

La mthode write() est une fonction intgre qui attend une ligne de texte quelle
afche lcran. Dans ce cas, le texte provient dun chier externe, mais on aurait pu
tout aussi bien incorporer le texte dans le script dune page Web.
12.1.2 Fonctions
Les fonctions JavaScript sont des packages de code qui sont excuts quand ils sont
appels par la page Web. Lavantage des fonctions est que lon peut les utiliser pour
rassembler du code et effectuer des modications pour ajouter un nouveau contenu.
La fonction intgre write() requiert seulement que lon saisisse du texte pour quelle
lafche dans le document (la page Web). Vous ntes pas oblig dexploiter les
fonctions intgres et vous pouvez parfaitement crer les vtres. Par exemple, le
programme suivant est un chier JavaScript externe avec une fonction simple qui
ouvre une bote de dialogue alert() (il sagit dune fonction utilisateur qui emploie
une fonction intgre). Enregistrez le programme JavaScript suivant sous le nom de
fonction.js :
// Document JavaScript
var prenom="Bill";
function bonjour(nom)
{
alert("Bonjour " + nom);
}
bonjour(prenom)
Toutes les fonctions sont suivies de parenthses. Si cela est ncessaire, le dveloppeur peut ajouter un paramtre entre parenthses. Dans notre exemple, le paramtre
sappelle nom. Quand la fonction est appele, le dveloppeur place un nom, un
nombre ou toute autre information souhaite dans lespace du paramtre nom. Dans
notre exemple, on assigne la valeur Bill une variable nomme prenom. la n
du programme, la ligne bonjour(prenom) appelle la fonction en plaant la variable
dans le paramtre. La fonction passe la valeur de la variable la fonction alert()
lintrieur de la fonction bonjour(), si bien que lon peut sattendre voir apparatre
lcran une bote de dialogue au lancement du programme. Le code HTML5 suivant
(fonctionJS.html disponible dans les chiers du chapitre) appelle le programme
JavaScript qui appelle la fonction.
<!DOCTYPE HTML>
<html>
<head>
<script src="fonction.js"></script>
<title>Fonction externe</title>
</head>
<body>
</body>
</html>
240
Ce programme JavaScript sexcute ds que la page se charge. La section suivante

illustre un usage plus labor des fonctions JavaScript en raison de leur capacit
attendre quon les appelle en cas de besoin.
12.1.3 Gestionnaires dvnements

La relle puissance de JavaScript coupl HTML5 se rvle mieux quand le programme attend que lutilisateur fasse quelque chose pour excuter un script. Par
exemple, si lutilisateur clique sur quelque chose, vous pouvez lancer nimporte quel
programme JavaScript. On utilise pour cela un gestionnaire dvnements HTML5.
La page dtecte un type daction (un vnement) et possde une fonction intgre
qui reconnat cet vnement.
HTML5 reconnat un grand nombre dvnements. Certains se produisent automatiquement, comme quand la page se charge. Dautres vnements se produisent
quand lutilisateur fait quelque chose avec la souris ou le clavier. Le tableau 12.1 liste
un chantillon de quelques gestionnaires dvnements.
Tableau 12.1 chantillon de gestionnaires dvnements HTML5
Gestionnaires dvnements
onchange
onclick
ondbleclick
ondrag
ondragend
ondragenter
ondragleave
ondragover
ondragstart
ondrop
onkeydown
onkeypress
onkeyup
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
onmousewheel
onpause
onplay
onplaying
onprogress
onloadstart
onload
Voici la syntaxe gnrique de tous les vnements qui sont lis des lments :
<lment vnement= "FonctionJavascript()">
Par exemple,
<body onLoad = "annonceQuelquechose()">
utilise llment body avec le gestionnaire dvnement onLoad pour dclencher

une fonction JavaScript nomme annonceQuelquechose().
Dtection dvnements varis

Pour voir comment les gestionnaires dvnements fonctionnent avec JavaScript, le
programme suivant (DetectionClic.html disponible dans les chiers du chapitre)
possde trois gestionnaires dvnements diffrents et trois fonctions JavaScript
diffrentes qui sont lances automatiquement par les vnements. Le premier ouvre
12.1 Insertion de JavaScript dans des pages HTML5
241
une bote de dialogue quand la page se charge, le second se dclenche quand on clique
sur la ligne du haut et le troisime afche une bote de dialogue quand on fait un
double-clic sur le deuxime lien.
<!DOCTYPE HTML>
<html>
<head>
h1, h2 {
}
a {
color:#060;
}
</style>
function detectLoaded()
{
alert("La page est charge.");
}
function detectClick()
{
alert("Vous avez cliqu sur un lien.");
}
function detectDoubleClick()
{
alert("Vous avez fait un double-clic sur un lien.");
}
</script>
<title>Event Handler</title>
</head>
<body onLoad="detectLoaded()">
<hgroup>
<h1> <a href="#" onClick="detectClick()">Cliquez sur ceci</a></h1>
<h2> <a href="#" onDblClick="detectDoubleClick()">Faites un double-clic
sur ceci</a></h2>
</hgroup>
</body>
</html>
Les fonctions JavaScript peuvent effectuer tout ce quon leur demande de faire, ce
qui permet de communiquer avec les utilisateurs. Vous pouvez ainsi leur donner des
instructions, leur proposer des options, les mettre en garde, etc.
Gestion des lments

Dans la zone clic du programme prcdent, la balise de lien <a> est utilise pour
dnir le gestionnaire dvnements, laide de la syntaxe suivante :
<a href="#" onClick="GestionnairevnementClick()">
242
Ce type de code na rien de nouveau en HTML5. Il est utilis ici pour une simple
raison : quand la souris passe au-dessus du texte lintrieur de la balise <a>, le curseur
est modi de telle sorte que lutilisateur sait quil est au-dessus dun lien.
Cependant, vous pouvez dnir un gestionnaire dvnements pour nimporte quel
lment. Par exemple, examinez la page Web suivante (ClicP.html disponible dans
les chiers du chapitre).
<!DOCTYPE HTML>
<html>
<head>
p {
color:#FF0;
background-color:#00F;
font-size:24px;
text-align:center;
font-weight:bold;
}
</style>
function showArticle()
{
alert("Vous venez de cliquer dans un conteneur <article>");
}
function showHeader()
{
alert("Vous venez de cliquer dans un conteneur <header>");
}
function showP()
{
alert("Vous venez de cliquer dans un conteneur <P>");
}
</script>
<title>OnClick dans un lment</title>
</head>
<body>
<article onClick="showArticle()">
<header onClick="showHeader()">
<h1>Ceci est un lment H1 dans len-tte</h1>
</header>
<section>
<p onClick="showP()">Cliquez sur ce paragraphe</p>
Voici simplement du texte dans le conteneur article. Cliquez ici juste
pour voir ce que se passe.</section>
</article>
</body>
</html>
En tudiant le programme ci-dessus, vous remarquerez peut-tre que certains

vnements sont incorpors lintrieur dautres lments qui ont galement des
gestionnaires dvnements. Par exemple, tous les lments sont lintrieur de
la balise <article>. Que va-t-il se passer si lon clique sur le paragraphe qui a
243
12.2 Utilisation du DOM
un gestionnaire dvnements ? Ou bien sur llment <header> ? Vont-ils ragir

llment interne ou llment externe ? Regardez attentivement les deux copies
dcran de la gure 12.1.
Figure 12.1 Gestionnaires dvnements imbriqus.
Dans la copie dcran du haut, ds que lutilisateur clique sur la ligne Cliquez
sur ce paragraphe, lvnement est noti dans une bote de dialogue. Ensuite, quand
lutilisateur clique sur le bouton OK de la bote de dialogue, une seconde bote apparat
et lui indique quil a aussi cliqu sur un conteneur <article>. Il faut apprhender
les vnements en les remontant, en commenant par le niveau le plus bas de la
hirarchie des lments puis en montant jusquau niveau le plus lev.
12.2 UTILISATION DU DOM

Le DOM (Document Object Model) pour HTML5 reprsente une arborescence.
la base (la racine) de chaque page Web ou document se trouve la balise <html>, et
les autres lments de la page sont des branches de larbre. JavaScript utilise le DOM
pour manipuler les pages Web et aller au-del des possibilits quoffre HTML5 tout
seul. La totalit de larborescence du DOM est une reprsentation du document qui
rside dans la mmoire de lordinateur.
244
Quand on accde une partie du DOM, cest en rfrenant un lment de larborescence. On accde chaque lment de larborescence dans lordre hirarchique, en
commenant par document. Les diffrents lments dune page Web sont les diffrentes
proprits ou mthodes (fonctions intgres) du document spares par un point (.).
Par exemple,
document.forms.fred;
accde un formulaire nomm fred au sein dun document. Voici quoi ressemble
le balisage HTML5 :
<form name= "fred">
Parfois, vous verrez une fonction intgre qui ralise dans le document quelque
chose de ce genre :
document.write("Cela vient directement du Document");
qui afche du texte lcran. Vous noterez aussi que la racine window possde
plusieurs fonctions intgres qui sont utiles pour manipuler les zones dafchage dune
page Web.
12.2.1 Fonctionnement du DOM avec les pages et JavaScript

An de mieux comprendre la manire dont le DOM fonctionne avec les pages et
JavaScript, il est utile de voir ce qui peut tre fait avec la fentre dune page Web (la
partie de votre page Web qui est afche). Le programme suivant (OuverturePage.html
disponible dans les chiers du chapitre) montre comment charger une nouvelle fentre
partir du document en cours, tout en laissant la page actuelle en place.
<!DOCTYPE HTML>
<html>
<head>
a {
color:#cc0000;
font-size:24px;
}
header {
text-align:center;
}
</style>
function someOtherWindow()
{
window.open("AutreFenetre.html","ow","width=400,height=200");
}
</script>
245

<title>Ouverture dune autre page</title>
</head>
<body>
<header> <a href="#" onClick="someOtherWindow()">Cliquez pour ouvrir une
nouvelle fentre</a> </header>
</body>
</html>
Cette page ncessite une seconde page qui souvre en tant que fentre spare.
Le programme suivant (AutreFenetre.html disponible dans les chiers du chapitre)
provoque louverture dune page et, en mme temps, la fermeture de la fentre ouverte
grce un script bas sur le DOM.
<!DOCTYPE HTML>
<html>
<head>
h1,h4 {
color:#930;
}
a {
color:#cc0000;
text-align:center;
}
</style>
function shutItDown()
{
window.close();
}
</script>
<title>Autre fentre</title>
</head>
<body>
<h1>Cette fentre contient un message important...</h1>
<h4>Attendez que je trouve de quoi il sagit...</h4>
<a href="#" onClick="shutItDown()">Fermez la fentre !</a>
</body>
</html>
La gure 12.2 illustre le rsultat quand la page Web ouvre une seconde fentre.
Jusqu prsent dans cet ouvrage, quand une page tait chane une autre page,
la page en cours disparaissait ds que lutilisateur cliquait sur un lien. Grce ce petit
bout de code JavaScript, vous pouvez dsormais parler directement la page et
lui dire que vous voulez ouvrir une nouvelle fentre dune taille bien prcise, tout en
laissant la fentre en cours ouverte.
246
Figure 12.2 Ouverture dune deuxime fentre.
12.2.2 Les lments HTML5 et le DOM

An de mieux comprendre comment travailler avec le DOM en HTML5, je vais
vous montrer que certains nouveaux lments ncessitent des rfrences au DOM
lintrieur des balises elles-mmes. Parmi ces nouveaux lments, on peut citer la balise
<output>. Au cours de la rdaction de cet ouvrage, Opera tait le seul navigateur
avoir implment compltement ce nouvel lment et il faudra donc dabord le tester
avec ce navigateur. Avant de lincorporer pleinement votre site, testez-le avec tous
les autres navigateurs car <output> peut se rvler trs utile et devenir un lment cl
de HTML5.
Quand on utilise la balise <output>, on peut placer les rsultats dun calcul
directement sur la page Web. On na pas crer de fonction JavaScript ni mme
de script, mais le code au sein dune balise <output> doit suivre les mmes rgles DOM
quen JavaScript. Le conteneur output ne ncessite pas de contenu entre les balises
douverture et de fermeture, mais tous les calculs doivent tre effectus dans la balise
<output> elle-mme.
Llment output fonctionne conjointement avec la balise <form> qui est traite
en dtail au chapitre 14, mais nous nous concentrons pour linstant sur la structure
du DOM dans lemploi de la balise <output>. Le script suivant (CalculTTC.html
disponible dans les chiers du chapitre) montre comment incorporer cet lment dans
une page HTML5 fonctionnelle.
<!DOCTYPE HTML>
<html>
<head>
/*042B45,FFC54F,FFE6BF,E8A5B5,FF0A03*/
body {
247

background-color:#FFE6BF;
color:#042B45;
}
input {
background-color:#FFE6BF;
}
h1 {
color:#E8A5B5;
background-color:#042B45;
text-align:center;
}
h3 {
color:#FFC54F;
background-color:#FF0A03;
}
</style>
<title>Simple calcul</title>
</head>
<body>
<header>
<h1>Calculatrice TTC</h1>
</header>
<form>
<input name=cout type=number>
Cot HT<br>
<input name=taxe type=number>
Taxe--Saisissez une valeur dcimale (par ex. : 0.196)<br>
<h3> Total =
<output onforminput="value = cout.valueAsNumber * taxe.valueAsNumber +
cout.valueAsNumber"></output>
</h3>
</form>
</body>
</html>
La balise <form> ne comporte aucune information au-del de sa propre balise. Pour

cette application, elle na besoin de rien. Dans le conteneur <form>, il y a deux champs
de saisie nomms cout et taxe. Dans le contexte du DOM, chaque champ est un objet
dot de certaines proprits, dont lune est valueAsNumber. Quel que soit le caractre
numrique prsent dans le champ de saisie, il est trait comme un nombre et non
pas comme du texte. valueAsNumber est une proprit de la balise <input> et cest le
type number qui a t utilis dans cet exemple (nous aurions pu utiliser une valeur
text pour le champ de saisie et obtenir le mme rsultat avec la balise <output>). Le
champ de saisie number a un contrle de type spinner (qui permet dincrmenter
ou de dcrmenter), mais les valeurs du champ de saisie ne sont pas automatiquement
converties en donnes numriques. La gure 12.3 illustre le rsultat de la page Web
dans un navigateur Opera (le seul navigateur HTML5 qui implmentait le gestionnaire
dvnements onFormInput au moment de la rdaction de cet ouvrage).
Vous noterez le fonctionnement du gestionnaire dvnements onFormInput.
Quand linformation est saisie dans le formulaire, le rsultat est calcul puis afch.
Au dpart, le rsultat afche NaN (Not a Number, ceci nest pas un nombre) car le
248
taux de la taxe est nul, ce qui provoque un rsultat non numrique. Cependant, ds
que le taux de la taxe est saisi, le rsultat devient un nombre.
Figure 12.3 Utilisation de la balise <output> pour calculer dans le navigateur Opera.
12.3 STOCKAGE DES VALEURS TEMPORAIRES

Dans ce bref aperu de JavaScript, nous avons dj tudi de grandes choses et vous ne
devez donc pas vous inquiter si vous navez pas tout compris. Le travail avec le DOM
est la chose la plus importante que vous devez retenir sur lutilisation de JavaScript
dans le contexte de HTML5. Dans cette section, je vais vous montrer comment les
donnes sont stockes temporairement dans la mmoire de lordinateur quand on
consulte une page Web. Les utilisateurs peuvent saisir des donnes en cliquant sur un
bouton, une case cocher, un bouton radio ou un lien, ou bien en utilisant le clavier
(tout ceci a un rapport avec ce qui se passe avec le DOM, croyez-moi !).
An dutiliser les informations que lutilisateur peut saisir, JavaScript a les moyens
de les stocker en mmoire pour les rutiliser ultrieurement au cours de la session. En
examinant les diffrentes structures de JavaScript, vous pouvez comprendre comment
cela se passe.
12.3.1 Variables
Une variable est quelque chose qui change (elle varie). Vous pouvez vous reprsenter
une variable comme une bote avec une tiquette dessus. Par exemple, vous pouvez
avoir une bote avec une tiquette TlphoneMobile . Dans la bote, vous ne
pouvez placer quune seule chose. Vous pouvez modier le contenu de la bote,
ce que lon appelle la valeur de la bote. Si vous avez un iPhone dans votre bote
TlphoneMobile, vous pouvez lenlever et placer un iPhone diffrent (un modle
plus rcent) ou bien un autre tlphone, comme un tlphone Android. prsent, la
12.3 Stockage des valeurs temporaires
249
bote a une valeur diffrente. La paire tiquette-valeur (ou paire nom-valeur) est la
combinaison de ltiquette de la variable et de sa valeur actuelle.
Vous navez pas placer le nom dun tlphone mobile dans votre bote TlphoneMobile. Vous pouvez en fait y mettre ce que vous voulez : un talkie-walkie ou
un lphant rose. Vous pouvez mme assigner nimporte quelle valeur de nimporte
quel type cette variable, y compris une autre variable. Cest cependant une bonne
habitude dutiliser des noms de variables qui peuvent tre associs au contenu que
lon assigne la variable. Par exemple, si vous ralisez un site Web qui sera utilis
pour saisir des prix et des taxes (comme ctait le cas dans la section prcdente Les
lments HTML5 et le DOM ), il parat logique dutiliser des noms de variables tels
que cout et taxe .
Pour crer une variable, il suft de fournir un nom et de lui assigner une valeur,
comme dans lexemple suivant :
billVar="Livr par la variable de Bill.";
alert(billVar);
qui cre une variable nomme billVar dont la valeur est Livr par la variable
de Bill. Quand la variable est place dans la fonction alert, vous noterez quelle nest
pas encadre par des guillemets.
Types de donnes
Quand on assigne des valeurs une variable JavaScript, on peut assigner nimporte quel
type puis changer de type. Commenons dabord par donner une ide des diffrents
types de donnes qui sont disponibles. La liste suivante fournit une brve description
de chacun des types :
1. String : trait comme du texte, en gnral entre guillemets ;
2. Number : nombre (entier ou rel) qui peut tre soumis des oprateurs
mathmatiques ;
3. Boolean : type de donnes deux tats (true ou false, 0 ou 1) ;
4. Function : ensemble doprations JavaScript contenues dans un module ;
5. Object : collection de proprits encapsules (variables/tableaux) et de
mthodes (fonctions).
Vous avez dj vu la manire dont les variables string fonctionnent. Quand on
place des nombres dans une variable string, ils sont traits comme du texte et non
pas comme des nombres. Par exemple, la chane suivant traite 123 exactement
comme rue Molire , cest--dire du texte.
adresse="123 rue Molire";
De la mme manire, si lon utilise les assignations suivantes, on obtient toujours

du texte larrive :
250
premierNombre="123";
secondNombre="7";
total=premierNombre + secondNombre;
document.write(total);
Au lieu dafcher 130 , le rsultat afche 1237 . Essayez ensuite le code

suivant :
premierNombre=123;
secondNombre=7;
document.write(total);
prsent, le rsultat afche 130 comme prvu quand on ajoute des nombres.
Quand loprateur plus (+) est utilis avec du texte (on appelle cela une concatnation), les chanes de caractres sont simplement mises bout bout. Si lon place
nimporte quel type de texte dans une liste de nombres ajouter et quun seul des
nombres soit du texte, tout le reste est considr comme du texte et sera par consquent
concatn.
Mlange de diffrents types de variables

Le programme suivant (VariableSimple.html disponible dans les chiers du chapitre)
utilise tous les diffrents types de donnes. Vous devez regarder attentivement les
diffrents types de donnes pour dterminer les rsultats attendus. Les commentaires
dans le code devraient vous aider identier tous les types de donnes JavaScript.
<!DOCTYPE HTML>
<html>
<head>
/*BAD9CB,048C3F,7BA651,F2BE5C,F2A950 */
body {
background-color:#BAD9CB;
color:#048C3F;
}
</style>
function advertisement()
{
billVar="Livr par la variable de Bill.";
return billVar;
}
//Variable avec une fonction
popUpAd=advertisement();
document.write(popUpAd);
//Variable avec du code HTML5
cr="<br>";
document.write(cr);
// Variable string
adresse=" rue Molire";
251
// Variable Boolean
var destin=true;
// Variable string
recherche="Vais-je trouver le vrai bonheur dans HTML5 ? La rponse est : ";
// Variables avec des nombres
fun=100;
maison=23;
// Calcul avec des variables
funPlusMaison=fun + maison;
// Ajout de variable string et number (concatnation)
montreAdresse=funPlusMaison + adresse;
browser=navigator.platform;
document.write(montreAdresse);
document.write(cr);
document.write(recherche);
document.write(destin);
document.write(cr);
document.write(browser);
</script>
<title>Variable simple</title>
</head>
<body>
</body>
</html>
En fonction du type dordinateur que vous utilisez, la valeur de la variable browser

sera diffrente. La page a t excute la fois sur un ordinateur tournant sous
Windows 7 et un Macintosh pour voir comme une variable peut varier. La gure 12.4
illustre le rsultat diffrent du mme programme.
Figure 12.4 Affichage de diffrents types dordinateur lcran.
252
La valeur de la variable navigator.platform est un objet. Lobjet navigator a une

proprit platform qui indique sur quel type dordinateur le navigateur sexcute. En
testant le programme sous Windows 7 (la copie dcran du haut de la gure 12.4)
avec un systme dexploitation 64-bits, le rsultat afche Win32. Cela est d au fait
que les navigateurs tests taient en 32-bits, y compris une version rcente dInternet
Explorer 9. Le rsultat MacIntel (copie dcran du bas de la gure 12.4) provient dun
ordinateur Macintosh avec un processeur Intel afch sur un navigateur Safari.
12.3.2 Tableaux
Une variable ne peut avoir quune seule valeur la fois. Cette valeur peut tre le
rsultat dun calcul bas sur la combinaison de plusieurs valeurs, mais une fois quelle
est stocke lintrieur dune variable, elle devient unique. Pour illustrer cela, voici
un exemple extrait de la prcdente section sur les variables :
premierNombre=123;
secondNombre=7;
La variable nomme total est la somme des deux premires variables et il sagit
dune entit unique. Cela serait galement vrai si les deux variables avaient t
concatnes. Vous devez donc simplement retenir que les variables ne peuvent
contenir quune seule valeur la fois. La gure 12.5 fournit une illustration graphique
de la diffrence entre les variables et les tableaux.
Figure 12.5 Stockage de donnes dans des variables et des tableaux.
Comme vous pouvez le voir la gure 12.5, il ny a quun seul lment stock dans
la variable nomme Amour, mais le tableau choses contient beaucoup de... choses. On
appelle chacune des donnes stockes avec le nom du tableau suivi dun numro entre
crochets. Ainsi, choses[1] dsigne une ancre et choses[2] une calculatrice.
Certaines applications ncessitent quil y ait plusieurs valeurs dans un seul objet,
ce qui facilite laccs et le stockage des donnes. Chaque valeur du tableau sappelle
253
un lment et on rfrence chaque lment par un numro. Les numros du tableau

sont une suite squentielle commenant par zro (0) (voir la gure 12.5). Supposons
que lon ait un tableau nomm fruit. On peut lui assigner des valeurs de la manire
suivante :
<!DOCTYPE HTML>
<html>
<head>
fruit=new Array();
fruit[0]="framboises";
fruit[1]="pches";
fruit[2]="pommes";
fruit[3]="prunes";
document.write(fruit[1]);
var monFruit=fruit.pop();
document.write("<br>" +monFruit + "<br>");
document.write(fruit.length);
</script>
<title>Tableau 1</title>
</head>
</html>
Le rsultat du programme prcdent est lafchage lcran des mots pches ,

prunes et 3 . Le mot pches a t extrait du tableau grce un numro
et plac dans une fonction dafchage lcran. Puis en utilisant la mthode pop(),
llment au sommet du tableau a t plac dans une variable nomme monFruit et
afch lcran. La mthode pop() a supprim un lment du tableau pour le placer
dans la variable monFruit, si bien que le tableau ne comporte plus que trois lments.
La proprit length indique le nombre dlments du tableau. Chaque lment du
tableau fonctionne exactement comme une variable, la seule diffrence tant quil
fait partie dun objet plus grand, le tableau.
12.3.3 Objets
Le dernier type de donnes utilis pour stocker les valeurs est un objet. Tous les objets
sont similaires aux tableaux en ce sens o ils peuvent contenir plusieurs valeurs, mais
ils ont plusieurs proprits intgres. Ces proprits ont des valeurs xes (appeles
constantes) ou des valeurs qui changent en fonction des circonstances. Si lon reprend
un extrait du programme de la section prcdente, on peut afcher la longueur du
tableau :
...
document.write("<br>");
La valeur de fruit.length est gale 4 car la longueur dun tableau est toujours
suprieure dune unit au numro du dernier lment dun tableau en raison du fait
que la numrotation des lments commence zro.
254
On appelle mthodes certaines proprits des objets. Une mthode est une fonction
qui ralise quelque chose qui a un rapport avec lobjet. Par exemple, lobjet tableau
comporte une mthode pop() qui retourne le dernier lment dun tableau. Grce
cette mthode, on peut assigner une variable une mthode dobjet, tout comme
on peut assigner une variable une fonction. Reprenons nouveau le programme de
la section prcdente. Cette fois-ci, on assigne la variable monFruit fruit.pop().
Cela signie que ce qui se trouve au sommet de la pile du tableau est supprim, mais
si lon utilise une assignation de variable, llment supprim est assign la variable,
comme lindique lextrait suivant :
...
var monFruit=fruit.pop();
document.write("<br>" + monFruit + "<br>");
Quand on teste le programme de la section prcdente, on constate que le dernier

lment ajout a la valeur prunes (cest ce qui est afch lcran). La longueur du
tableau nest plus 4, mais 3 prsent car la mthode pop() a supprim un lment
du tableau (au fait, var devant la variable monFruit est un mot-cl optionnel qui sert
dclarer une variable, mais cela permet de distinguer la variable des lments du
tableau dans ce listing).
Cration de vos propres objets

Si lon cre ses propres objets, on peut avoir une ide de la manire dont les objets
fonctionnent dans le DOM. An de clarier les choses, nous pouvons dire prsent
que les proprits dun objet dsignent en gnral la fois ses proprits et ses
mthodes, mais quand on veut tre plus spcique et voquer les parties individuelles
dun objet, on distingue bien les proprits (certaines caractristiques de lobjet) des
mthodes (les fonctions associes lobjet).
La cration des objets est similaire la dclaration des variables et leur assignation
de valeurs. Lobjet en lui-mme est une sorte de base doprations pour raliser toute
une srie de choses diffrentes ayant des caractristiques diffrentes. La premire tape
de la cration dun objet consiste simplement utiliser un nom et le mot-cl new. Par
exemple, le code suivant dclare un objet nomm Additionneur :
Additionneur=new Object();
Ensuite, pour ajouter une proprit, il faut trouver un nouveau nom et lui assigner
une valeur. Le nom de lobjet et sa proprit sont spars par un point (.). Par exemple,
la code suivant ajoute une proprit nomme premierNombre et lui assigne la valeur 4 :
Additionneur.premierNombre=4;
Tout comme avec une variable, vous pouvez modier la valeur premierNombre et
lui assigner une autre valeur.
255
Lajout dune mthode (une fonction) est tout aussi facile, mais au lieu dutiliser
une fonction nomme, on utilise une fonction anonyme. Par exemple, le code suivant
ajoute la valeur de deux proprits de lobjet Additionneur et envoie le rsultat
lcran :
Additionneur.total=function()
{
document.write(this.premierNombre + this.secondNombre);
}
Le mot-cl this est une rfrence lobjet Additionneur. Cest comme si lon
crivait Additionneur.premierNombre. Vous noterez aussi que le mot-cl function()
na pas de nom, ce qui en fait une fonction anonyme.
Il est temps prsent de rassembler le tout pour voir comment cela fonctionne
(voir le programme ObjetUtilisateur.html qui est disponible dans les chiers du
chapitre) :
<!DOCTYPE HTML>
<html>
<head>
Additionneur=new Object();
//Proprits de lobjet
Additionneur.premierNombre=4;
Additionneur.secondNombre=66;
//Mthode de lobjet
Additionneur.total=function()
{
document.write(this.premierNombre + this.secondNombre);
}
//Dclenchement de la mthode !
Additionneur.total();
</script>
<title>Objet simple</title>
</head>
</html>
Vous noterez que la mthode Additionneur.total() utilise la mthode document.write() (vous pouvez dtecter les mthodes en JavaScript en cherchant les
parenthses). Vous noterez aussi que pour dclencher une mthode, il suft de lister le
nom de lobjet suivi du nom de la mthode. Quand on teste le programme, on constate
que le rsultat est le total des deux proprits.
Retour sur le DOM et les objets du navigateur

Ce chapitre a trait un grand nombre de notions trs rapidement. En fait, la dernire
section est le premier pas vers la programmation oriente objets (POO). Ne vous
inquitez pas si vous navez pas tout compris car lobjectif est de vous familiariser avec
lutilisation du DOM en HTML5. Si vous comprenez prsent les termes comme
proprits et mthodes, ils ne vous paratront plus trangers.
256
Au fur et mesure que nous dcouvrons les nouvelles fonctionnalits de HTML5,

vous serez plus laise avec la terminologie et vous comprendrez mieux ce qui se
passe. En dautres termes, il sera plus facile dapprendre. Cela ne signie pas quil
faut devenir un programmeur expert en POO pour comprendre tout ceci, mais que
quelques notions de base en POO vous aideront comprendre le DOM et les objets
du navigateur qui se rvlent pratiques quand on utilise des lments comme canvas.
Tout au long de cet ouvrage, vous avez rencontr des objets qui appartiennent au
navigateur et que je nai pas tudis en tant que tels. Le navigateur possde des objets
qui sont importants pour travailler avec HTML5, notamment les objets suivants :
History
Location
Navigator
Screen
Window
Par exemple, dans la section Types de donnes de ce chapitre, vous avez

vu comment la proprit navigator.platform tait utilise pour trouver le type
dordinateur sur lequel le programme sexcutait.
Le DOM HTML5 a beaucoup plus dobjets et le plus utilis est la proprit
Document. La liste des objets est identique la liste des lments si bien quune liste de
tous les objets du DOM est une liste de tous les lments plus dautres objets qui sont
utiliss conjointement avec le DOM. Par exemple, les objets suivants font partie du
DOM HTML5 mais ils ne sont pas exactement des lments :
Document
Event
Image
Link
Meta
Nous avons vu certains de ces objets dans des balises. Par exemple, lobjet image se
trouve dans les balises <img> et ses proprits sont similaires aux attributs de llment
img. Dautres objets, comme document, sont impliqus dans le DOM en ce sens o une
page Web est un document. Lobjet event est employ dans la gestion des vnements
avec des mthodes comme onClick. Pour le reste, il sagit dlments avec lesquels
vous devez tre familier, mais au lieu davoir des attributs dune balise, vous devez vous
attendre trouver des proprits avec des noms identiques et des fonctions qui sont
quivalentes certains attributs.

Les sources de donnes sont importantes comprendre et pour mieux apprhender
ces notions il faut les pratiquer en utilisant diffrents types. Voici le d relever :
257
1. Choisissez une phrase, par exemple Tous les objets sont composs de
proprits et de mthodes .
2. Assignez cette chane de caractres une variable et utilisez
document.write() pour lafcher lcran.
3. Dcomposez cette phrase en plusieurs mots et placez chaque mot dans les
lments dun tableau, puis avec la mthode array.pop() et document.write()
afchez tous les mots de la phrase lcran pour ne former quun seul
message.
4. Pour nir, crez un objet avec une proprit dont le contenu est la phrase
que vous avez choisie. Crez une mthode pour la proprit qui afche la
phrase lcran.
13
Amlioration des sites avec
les canvas
Objectif
La balise <canvas> (en anglais, canvas signie canevas, mais aussi toile de tableau)
constitue lun des ajouts les plus importants de HTML5. Grce elle, vous pouvez
dessiner ce que vous voulez sur une page HTML5, avec simplement deux attributs,
width et height. Llment canvas est cependant implment dans ce que lon
pourrait appeler un style DOM (Document Object Model ; voir le chapitre 12
o le DOM a t dcrit en dtail). Fondamentalement, un style DOM implique
lcriture du code JavaScript ncessaire avec des rfrences des objets ainsi qu
leurs mthodes et proprits.
Si ce genre de discours vous inquite, relaxez-vous. Tout au long de cet ouvrage, les
balises HTML5 (les lments) ont utilis des attributs et les attributs ne sont que
des proprits dlments. Pour lessentiel, lcriture de code JavaScript se rsume
lassignation de valeurs des proprits, et comme vous savez dj assigner des
valeurs des attributs (par exemple height="200"), il ny a rien de bien nouveau
dans lcriture de cette sorte de code.
JavaScript emploie une sorte de POO allge . Le DOM reprsente une programmation oriente objets (POO) car il ny a que des rfrences des objets et
leurs proprits. En adoptant un JavaScript au style similaire (cration dobjets puis
assignation de proprits et de mthodes), votre code va beaucoup ressembler aux
expressions extraites du DOM.
260
Chapitre 13. Amlioration des sites avec les canvas
13.1 INTRODUCTION CANVAS

Dans la mesure o llment canvas est une partie cruciale de HTML5 qui ne
fonctionne quavec des navigateurs compatibles HTML5, la premire chose faire
consiste avertir les utilisateurs quils ont besoin dun navigateur HTML5. Il existe
plusieurs mthodes pour dterminer si la balise canvas peut fonctionner avec un
navigateur, mais le moyen le plus simple et le plus informatif (pour lutilisateur) est de
placer un message dans le conteneur <canvas>. Seuls les utilisateurs ne disposant pas
de navigateurs compatibles HTML5 verront le texte dans le conteneur. Par exemple,
la ligne suivante afche un message davertissement tout en restant invisible pour les
utilisateurs qui ont des navigateurs HTML5 :
<canvas id="colorScheme" width="600" height="100" >Vous avez <i>vraiment</i>
besoin de vous procurer un navigateur compatible HTML5 si vous voulez profiter
des <b>canvas !</b></canvas>
La gure 13.1 illustre ce qui apparat quand on ouvre la page avec la balise <canvas>
sur une version ancienne du navigateur Internet Explorer.
Figure 13.1 Message affich par un navigateur qui nest pas compatible HTML5.
Quand on excute ce mme programme sur la version 9 dInternet Explorer, on

dcouvre le rsultat illustr la gure 13.2 : le dessin canvas apparat, mais pas le
message.
Figure 13.2 Canvas sur un navigateur HTML5.
13.1 Introduction canvas
261
On pourrait crire quelque chose de plus sophistiqu, mais le message est sufsamment explicite pour que lon sen contente. Si vous avez un navigateur HTML5, tout
se passe correctement et si tel nest pas le cas, lutilisateur est averti par un message (il
est souhaitable dadapter le message votre public).
Avant de se lancer dans la cration de vos propres dessins, nous allons tudier une
autre manire de grer les utilisateurs qui nont pas de navigateur HTML5. Outre
lajout de texte, vous pouvez aussi intgrer des photos ou nimporte quoi dautre dans
le conteneur <canvas>. Par exemple, le script suivant (PhotoCanvas.html disponible
dans les chiers du chapitre) offre une alternative une prsentation plus sophistique
dune photo laide de canvas.
<!DOCTYPE HTML>
<html>
<head>
body {
color:#0FC;
}
img {
padding-top:10px;
padding-bottom:10px;
}
</style>
<title>Pcheur en herbe</title>
</head>
<body>
<body onLoad="CanvasMaster.showCanvas()">
<canvas id="photo" width="300" height="272" >Cher visiteur, si vous voyez ce
message, cela signifie que vous navez pas de navigateur HTML5 (mais vous
pouvez voir la photo et sa lgende).<br>
<figure> <img src="fisherkid.jpg" width="300" height="272" alt="kid
fishing"/><br>
<figcaption>Pcheur en herbe</figcaption>
</figure>
</canvas>
</body>
</html>
Non seulement lutilisateur qui ne possde pas de navigateur HTML5 obtient le

message davertissement, mais ce dernier est afch dans le style qui est dni en CSS3.
Lutilisateur est aussi capable de visualiser la fois la photo et sa lgende, comme cela
Si vous utilisez un navigateur HTML5, le programme prcdent afche un grand
cran vide de couleur verte qui ne contient rien. Dans ces conditions, assurez-vous,
quand vous employez une alternative pour les utilisateurs qui nont pas de navigateur
HTML5, davoir un vritable contenu dans la balise canvas.
262
Figure 13.3 Affichage dun message alternatif pour les navigateurs non compatibles HTML5.
David Sanders
13.1.1 Implmentation dun simple canvas

Quand on travaille avec Adobe Dreamweaver pour crer une page HTML5, on peut
prvisualiser la page en mode Cration pour avoir une ide du rsultat lcran.
Cependant, si vous avez un conteneur <canvas>, vous ne pourrez visualiser que son
contour. Cette silhouette fournit un excellent aperu visuel de la manire dont canvas
alloue une certaine partie de la page pour afcher les images, mme si elle apparat
sous la forme dun rectangle vide.
Fondamentalement, on dmarre par un lment canvas vide qui est dni par
les attributs largeur (width) et hauteur (height) de la balise <canvas>. Si vous vous
reprsentez la premire tape de cration dun canvas sur votre page Web comme le
fait de tendre une toile sur un cadre, cela vous aidera visualiser le processus.
Explication du quadrillage
Pour exploiter avec succs les canvas, vous devez comprendre comment fonctionnent
le quadrillage et le systme de coordonnes cartsiennes. Le coin suprieur gauche
reprsente la position 0,0 de la page. Quand on se dplace vers la droite, la premire
valeur augmente. Si vous vous dplacez de 15 pixels droite, la valeur passe 15,0
(cest laxe des x). Si vous vous dplacez vers le bas, la seconde valeur (laxe des y)
augmente. Si vous descendez de 20 pixels, la position passe alors 15,20. Supposons
que vous vouliez utiliser cette position comme point de dpart pour crer un carr de
100 pixels de ct. Cela aide de visualiser la position et la taille par rapport la page
263
Web avec le quadrillage, mais on a une ide plus claire de limage que lon cre sans le
quadrillage. En fait, les deux systmes sont utiles.
Prparation du trac du canvas

Nous sommes maintenant prts remplir la bote vide et nous avons besoin de
JavaScript pour ce faire. La seule chose que lon fait avec la balise <canvas> cest
de dcrire la zone o lon place limage laide dun contexte de rendu et dun ID de
rfrence. Nous allons commencer par faire simple et notre premier dessin sera cr
par la balise suivante :
<canvas id="redHot" width="100" height="100" >
Cela doit vous paratre assez familier. Les attributs width et height ont une valeur
de 100 pixels, et le nom de lobjet canvas a t dni redHot (jai dj trait de
la balise de fermeture </canvas> et du message dans le conteneur). Tout le reste du
travail nest que de la programmation JavaScript communiquant avec le DOM.
Comme je lai mentionn plus haut, je vais tenter de simplier les choses en
utilisant un peu de POO dans le code JavaScript pour reter la structure de
programmation du DOM. La premire tche consiste donc crer un objet et il
existe une mthode pour ce faire :
CanvasMaster=new Object();
CanvasMaster.showCanvas=function()...
Comme vous lavez vu au chapitre 12, il y a ici une dnition dun objet et de
sa mthode (une fonction qui va appeler les oprations JavaScript quand cela sera
ncessaire).
Ensuite, le programme a besoin dun moyen pour accder au nud DOM du canvas.
Il sagit de la partie du DOM qui a le canvas ainsi que les proprits et mthodes lies
au canvas. La premire tape consiste crer un objet qui contient le nud du DOM.
Plutt que de penser assigner un nud une variable, reprsentez-vous la cration
dune instance dun objet qui a les proprits et les mthodes de lobjet canvas.
canvasNow = document.getElementById("redHot");
Cette ligne cre un objet qui contient lobjet canvas nomm redHot.
Une fois que lon a une instance dun objet canvas, le programme a besoin dun
contexte de rendu. Le seul contexte pratiquement disponible se nomme 2d, ce qui
laisse supposer un contexte de rendu en deux dimensions. Lobjet canvas (canvasNow)
possde une mthode nomme getContext() pour obtenir le contexte de rendu.
contextNow = canvasNow.getContext( 2d);
Linstance du contexte de rendu se nomme contextNow et possde les mthodes et

les proprits du contexte de rendu 2d.
264
Ralisation du dessin
Avant dtudier la ralisation du dessin, vous vous posez peut-tre des questions sur
les objets canvasNow et contextNow. Sagit-il rellement de variables ? Aprs tout, on
peut assigner des objets des variables. Cest en effet une manire de se reprsenter
les choses, mais les objets sont assigns aux variables avec leurs propres mthodes et
proprits. Ne sagit-il donc pas plutt dinstances dobjets ? Quand on assigne un
nombre rel une variable, il sagit avant tout dun nombre. On peut raliser des
calculs avec la variable comme on le ferait avec un nombre littral. Au lieu dergoter
pour savoir si les structures de programme sont en fait des variables ou des objets,
traitez-les simplement comme des objets (tout comme les variables avec du texte ou
des nombres peuvent tre traites comme des variables de type string ou number).
On va dabord assigner une couleur au dessin. Vous pouvez utiliser lune des
techniques de cration de couleur que nous avons dcrites au chapitre 4. Cet exemple
emploie le format hexadcimal :
contextNow.fillStyle = #cc0000;
La proprit fillStyle ne sert que pour la couleur de remplissage et non pas pour
le trait (le contour) de lobjet.
La couleur de remplissage a ensuite besoin dune forme remplir. Pour remplir un
rectangle, on utilise la syntaxe suivante :
contextNow.fillRect(5,20,100,100);
La gure 13.4 explique chaque dtail de la ligne de code en la dcomposant.
Figure 13.4 Dtails de la mthode fillRect().
Les deux premires valeurs placent le dessin dans la zone du canvas (et non pas
sur la totalit de la page Web) et les deux dernires valeurs spcient la largeur et la
hauteur du rectangle.
Pour nir, il faut remplir le rectangle avec la couleur spcie, ce qui est accompli
par la ligne suivante :
contextNow.fill();
265
Peu importe le nombre doprations qui sont dnies, une seule mthode fill()
soccupe de tous les remplissages qui sont dnis dans une mthode plus grande.
Maintenant que toutes les pices sont en place, il faut les assembler dans un
programme HTML5. Le listing suivant (SimpleCarre.html disponible dans les chiers
du chapitre) contient la totalit du script :
<!DOCTYPE html>
<html>
<head>
<script language="javascript">
CanvasMaster.showCanvas=function()
{
canvasNow = document.getElementById("redHot");
contextNow.fillStyle = #cc0000; // couleur en hexadcimal
contextNow.fillRect(5,20,100,100); // x, y, largeur, hauteur
contextNow.fill();
}
</script>
body {
font-family:Verdana;
color:#cc0000;
}
</style>
<title>Carr rouge</title>
</head>
<figure>
<canvas id="redHot" width="100" height="100" > Vous avez manqu le carr
rouge ! Adoptez un navigateur HTML5 ! </canvas>
<figcaption> <br/>
Carr rouge </figcaption>
</figure>
</body>
</html>
Comme vous pouvez le voir, le programme inclut du code CSS3 et une simple
lgende avec les balises appropries <figure> et <figcaption> qui encadrent la balise
<canvas>. Le rsultat de ce script est illustr la gure 13.5.
Vous noterez aussi que ce script contient un message pour les utilisateurs qui
nont pas de navigateur HTML5, mais comme la gure 13.5 illustre limage canvas, le
navigateur nafche pas le contenu du conteneur <canvas>.
Ralisation de plusieurs dessins

Maintenant que vous avez vu comment crer un simple dessin, je vais vous montrer
comment en crer plusieurs. Et pendant que nous y sommes, nous en proterons
pour tester cela sur un priphrique mobile pour voir comme la balise <canvas> et
JavaScript fonctionnent dans un environnement mobile.
266
Figure 13.5 Simple canvas saffichant dans le navigateur Opera.
Le script suivant (TortillaFlat.html disponible dans les chiers du chapitre) est

trs similaire au script utilis pour crer le carr rouge de la gure 13.5, mais quand
on dessine plusieurs objets, leur position devient plus importante, comme le script
suivant le montre :
<!DOCTYPE html>
<html>
<head>
//Valeurs du modle couleurs colles ici : 8C6E37,BFA380,593723,736055,261F1E
{
canvasNow = document.getElementById("totillaHues")
// couleur en hexadcimal
contextNow.fillStyle = #8C6E37;
// x, y, largeur, hauteur
// premire couleur
contextNow.fillStyle = #BFA380;
contextNow.fillRect(105,20,100,100); // deuxime couleur
contextNow.fillStyle = #593723;
contextNow.fillRect(205,20,100,100); // troisime couleur
contextNow.fillStyle = #736055;
contextNow.fillRect(305,20,100,100); // quatrime couleur
contextNow.fillStyle = #261F1E ;
contextNow.fillRect(405,20,100,100); // cinquime couleur
contextNow.fill(); // on remplit tout !
}
</script>
body {
color:#570026;
267
}
</style>
<title>Tortilla Flat !</title>
</head>
<figure>
<canvas id="totillaHues" width="500" height="120" > Pas de
vous ! Adoptez un navigateur HTML5... rapidement ! </canvas>
<figcaption> <br/>
Tortilla Flat
</figcaption>
</figure>
</body>
</html>
tortillas pour
Les paramtres importants de ce script sont les deux premiers de la mthode

fillRect(). Il sagit des positions x et y, sachant que deux carrs ne peuvent pas
occuper le mme espace. Les carrs sont aligns sur une ligne horizontale, si bien que
la seule chose laquelle vous devez veiller est la valeur x dans la mesure o la position
verticale restera identique.
Une fois que toutes les mthodes fillStyle() et fillRect() ont t dnies, les
dessins nont besoin que dune seule mthode fill() pour safcher tous ensemble.
La gure 13.6 illustre le rsultat de la gure dans le navigateur mobile Safari sur un
iPhone.
Figure 13.6 Plusieurs dessins affichs dans un navigateur mobile.
Limage de la gure 13.6 vous semblera peut-tre familire car au chapitre 4, le

programme de dnition de modles de couleurs Adobe Kuler avait une apparence
similaire et les couleurs utilises dans le programme ont dailleurs t dveloppes
avec ce logiciel.
268
Ajout de traits et suppression de dessins

Il existe deux mthodes supplmentaires qui sont associes au trac de rectangles :
strokeRect() et clearRect(). Ces deux mthodes ont des paramtres similaires la
mthode fillRect() ( savoir x, y, width, height). Elles fonctionnent de manire
identique dans la mesure o elles utilisent le mme systme pour spcier les zones
pour lajout de traits ou la suppression des dessins.
Le programme suivant (TraitEtSuppression.html disponible dans les chiers du
chapitre) montre comment on peut ajouter trois mthodes un objet CanvasMaster,
que je nommerai ajouterTraits(), perforer() et raz(). La premire mthode dessine
un cadre lintrieur de la zone du canvas, la seconde perce un trou au milieu du
rectangle, et la troisime supprime tout ce qui existe dans la zone dnie.
<!DOCTYPE html>
<html>
<head>
//couleurs: 595241,B8AE9C,FFFFFF,ACCFCC,8A0917
{
canvasNow = document.getElementById("strokeAndChomp");
contextNow.fillStyle = #ACCFCC;
contextNow.fill();
}
CanvasMaster.ajouterTraits=function()
{
contextNow.strokeStyle= #595241;
contextNow.strokeRect(7,22,91,76);
}
CanvasMaster.raz=function()
{
contextNow.clearRect(5,20,100,100);
}
CanvasMaster.perforer=function()
{
contextNow.clearRect(40,45,30,30);
}
</script>
body {
color:#8A0917;
background-color:#B8AE9C;
}
a {
color:#595241;
margin-left:16px;
}
</style>
<title>Trait et suppression</title>
269
</head>
<article>
<figure>
<canvas id="strokeAndChomp" width="100" height="100" > Passez un
navigateur HTML5 ! </canvas>
<figcaption> <br/>
Carr </figcaption>
</figure>
<section>
<p><a href="#" onClick="CanvasMaster.ajouterTraits()">Ajouter des
traits</a></p>
</section>
<section>
<p><a href="#" onClick="CanvasMaster.raz()">Effacer le carr</a></p>
</section>
<section>
<p><a href="#" onClick="CanvasMaster.perforer()">Perforer le carr</a></p>
</section>
<section>
<p><a href="#" onClick="CanvasMaster.showCanvas()">Redessiner le
carr</a></p>
</section>
</article>
</body>
</html>
Cette page est mise en forme pour un terminal mobile. Elle a t teste avec le
navigateur Opera Mini sur un iPhone, comme cela est illustr la gure 13.7.
Un carr bleu apparat lors du chargement initial. Quand on clique sur le lien
Ajouter des traits, un cadre apparat lintrieur de limage originale. Si vous ajoutez
plus de traits, vous constaterez que le trait spaissit. Quand on clique sur le lien
Perforer le carr, un petit carr apparat au centre du carr bleu. Le lien Effacer le
carr supprime la fois limage et les traits. Si vous cliquez sur le lien Ajouter des traits
aprs avoir supprim le carr bleu, vous ne verrez que le cadre sans le rectangle bleu.
13.1.2 Images et ombres dans les canvas

Lune des fonctionnalits les plus simples et les plus amusantes des canvas consiste
les utiliser avec des images que lon a charges. La gure 13.3 illustre un exemple
typique dimage que lon peut charger sur une page Web avec la balise <img>. Lusage
de cette balise est parfait, mais on peut la rendre encore plus intressante avec la balise
<canvas>.
Chargement dune image dans un canvas

Pour charger une image, quil sagisse dun chier GIF, PNG ou JPEG, il faut un objet
Image qui soit cr avec JavaScript. Au sein de la mthode utilise pour crer un
contexte de rendu, on risque que lutilisateur voit une page vide lemplacement
de limage charge, moins que lon ne dispose dun vnement qui indique que le
270
Figure 13.7 Ajout de traits et suppression de tout ou partie dun rectangle.
chier a t charg. Heureusement, cest plutt simple faire avec le gestionnaire

dvnements onLoad, comme le montre lextrait de code suivant :
...
pic = new Image();
pic.onload = function()
{
contextNow.drawImage(pic,10,10);
}
pic.src = imageName.jpg ;
...
La mthode de contexte de rendu drawImage() possde trois paramtres :

La rfrence au chier qui est charg : dans cet exemple, ltiquette pic est la
rfrence du chier qui est utilis.

La position x et y : cest un peu plus compliqu que dutiliser la balise <img>,
mais pas tant que cela, et cette mthode permet de placer limage o lon veut
lintrieur des paramtres du canvas.
La source de limage : on ajoute la source de limage au sein de la mthode qui
cre le contexte de rendu, ce qui ne diffre pas de lidentication employe par
llment img.
271
Ajout dune ombre porte

Lajout dune ombre porte une image donne un aspect tridimensionnel la page.
Le contexte de rendu a quatre paramtres pour dnir les proprits de lombre :
shadowColor="couleur";
shadowOffsetX=valeur horizontale;
shadowOffsetY=valeur verticale;
shadowBlur=valeur de flou;
La couleur peut tre assigne en utilisant lune des mthodes tudies au chapitre 4.
Le dcalage de lombre par rapport limage dpend de la grandeur que vous souhaitez
pour lombre. Testez diffrentes valeurs en commenant par une valeur proche de
5. Dans lexemple suivant, chaque paramtre de dcalage est initialis 10 an de
fournir sufsamment dombre pour que limage se dtache de lcran sans pour autant
craser limage. Enn, la valeur de ou peut tre suprieure ou infrieure en fonction
des valeurs de dcalage et de la quantit de ou que vous souhaitez. Avec de grandes
valeurs de dcalage, il faut une grande valeur de ou.
Pour que lombre produise un effet sur limage, toutes les proprits de lombre
doivent tre saisies avant lcriture de la mthode drawImage(). Cest tout ce quil
y a lieu de faire. Lautre partie JavaScript ncessaire pour dnir le contexte de
rendu du canvas est trs similaire aux dessins de la section prcdente. Le code
suivant (OmbrePhoto.html disponible dans les chiers du chapitre) charge une image
et lencadre avec une ombre porte :
<!DOCTYPE html>
<html>
<head>
//couleurs: F4F1BC,736F36,BFB95A
{
canvasNow = document.getElementById("picFrame");
pic = new Image();
{
contextNow.shadowColor =#BFB95A;
contextNow.shadowOffsetX=10;
contextNow.shadowOffsetY=10;
contextNow.shadowBlur=4;
}
pic.src = fisherkid.jpg ;
}
</script>
body {
color:#736F36;
272
background-color:#F4F1BC;
}
</style>
<title>Photo encadre</title>
</head>
<article>
<figure>
<canvas id="picFrame" width="340" height="300" > Vous avez manqu une
photo parce que vous navez pas de navigateur HTML5. </canvas>
<figcaption> <br/>
Photo avec une ombre porte</figcaption>
</figure>
</article>
</body>
</html>
Avant de placer vos propres images, vriez leur taille et la taille que la balise
<canvas> a rserve. Dans cet exemple, il y avait sufsamment de place pour limage
(une photographie) et lombre porte. La gure 13.8 illustre le rsultat dans le

navigateur Opera.
Les combinaisons de couleurs utilises avec limage sont importantes. Vous
constaterez que certaines couleurs fonctionnent mieux que dautres. Celles utilises
la gure 13.8 sont un ensemble monochromatique bas sur les couleurs de limage.
Comme vous pouvez le voir, lombre donne limpression que la photo se soulve de
lcran.
Comparez limage de la gure 13.3 celle de la gure 13.8. la gure 13.3, on
voit ce qui se passe avec les navigateurs qui ne sont pas compatibles HTML5 ; la
gure 13.8, on voit ce dont est capable HTML5. Pour les navigateurs qui ne sont pas
compatibles HTML5, vous pouvez quand mme ajouter la mme image et le modle
de couleurs sans lombre porte.
Travail avec les filtres

Avant de passer des formes complexes, jetons un coup dil lutilisation des ltres
pour ajouter des teintes aux images. Internet est une immense bibliothque de photos
et de dessins libres de droits et vous pouvez utiliser votre moteur de recherche favori
pour trouver des images (rappelez-vous cependant que toutes les images que lon
trouve en ligne ne sont pas libres de droits et assurez-vous que vous avez la permission
dutiliser les images que vous trouvez). De nombreux dessins sont en noir et blanc et
peuvent crer un contraste austre avec les autres lments dune page. Pour intgrer
ce type dimage, on peut ajouter un ltre en crant une forme colore partiellement
transparente et en la plaant au-dessus de limage. Avec canvas, ce processus est assez
simple et le point important se trouve dans la ligne suivante :
context.fillStyle = rgba(rn, gn, bn, alpha);
Au lieu demployer une valeur hexadcimale, le code utilise un codage RGB avec
un canal alpha (rgba()) qui contrle la transparence. Le dernier paramtre est
273
Figure 13.8 Image et ombre porte avec la balise <canvas>. David Sanders
une valeur comprise entre 0 et 1. Plus la valeur est leve, plus limage sera opaque.
En utilisant une valeur infrieure 1, vous pouvez contrler le degr dopacit. Le
reste de la forme correspond aux dimensions de limage et le ltre est positionn sur le
mme espace.
Pour intgrer une image au reste de la page, il est souhaitable dajouter une teinte
en utilisant la couleur de fond. Le programme suivant (ImageFiltree.html disponible
dans les chiers du chapitre) ajoute dabord limage puis dessine un objet rectangulaire
par-dessus dot dune couleur de remplissage transparente.
<!DOCTYPE html>
<html>
<head>
//couleurs: F26A4B,F2D091=rgb(242,208,145)
{
canvasNow = document.getElementById("filterFrame");
pic = new Image();
{
contextNow.fillStyle = rgba(242, 208, 145, .6);
contextNow.fill();
274
}
pic.src = dance.gif;
}
</script>
body {
color:#F26A4B;
background-color:#F2D091;
}
</style>
<title>Filtre dimages</title>
</head>
<article>
<figure>
<canvas id="filterFrame" width="472" height="306" > Vous avez rat la
danse ! Installez un navigateur HTML5 ! </canvas>
<figcaption> <br/>
Image filtre</figcaption>
</figure>
</article>
</body>
</html>
Vous noterez que la squence charge dabord limage puis place le dessin au-dessus
en utilisant lextrait suivant :
contextNow.fillStyle = rgba(242, 208, 145, .6);
contextNow.fill();
Si le dessin est ajout en premier, limage repose dessus et il ny a pas deffet de

ltre. Grce lajout dun ltre, limage sintgre mieux la page, comme lillustre la
gure 13.9.
Avec Adobe Photoshop ou tout logiciel de retouche graphique similaire, vous
pourriez ajouter le ltre limage et charger limage ltre avec une balise standard
<img>, mais lutilisation de canvas et de HTML5 permet deffectuer les modications
sans logiciel supplmentaire.
13.2 CRATION DE DESSINS COMPLEXES AVEC DES

CANVAS
Les formes les plus simples sont des rectangles, ce qui va trs bien pour tracer des carrs
et des rectangles, et vous pouvez dj faire beaucoup de choses avec des botes avant
davoir besoin de lignes et de courbes. Cette section tudie les lments de dessin
complexe suivants qui font partie de lobjet canvas (le terme context fait rfrence au
nom de lobjet du contexte de rendu).
13.2 Cration de dessins complexes avec des canvas
275
Figure 13.9 Image filtre se fondant dans larrire-plan.
context.beginPath()
context.moveTo(x, y)
context.closePath()
context.lineTo(x, y)
context.quadraticCurveTo(cpx, cpy, x, y)
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
context.arcTo(x1, y1, x2, y2, radius)
context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
context.rect(x, y, w, h)
context.fill()
context.stroke()
context.clip()
context.isPointInPath(x, y)
Le fait de savoir comment utiliser ces mthodes avec une balise <canvas> ne vous
garantit pas un rsultat honorable. Le reste de ce chapitre dtaille la plupart de ces
mthodes. Vous devriez tre capable de crer de nombreuses formes diffrentes aprs
avoir achev la lecture de ce chapitre.
276
13.2.1 Lignes et mouvement

Le meilleur moyen de commencer rchir lutilisation des outils de canvas pour
dessiner est de virtualiser tous les dessins sur un quadrillage, comme nous lavons
fait avec les rectangles. Cependant, tant donn la relative complexit du dessin
libre, mme avec des lignes droites, il faut partir des images sur un quadrillage. La
gure 13.10 illustre deux dessins qui peuvent tre crs laide de lignes droites.
Figure 13.10 Images sur un quadrillage.
Ce quadrillage contient des carrs de 20 pixels sur 20 pixels. Si vous prenez un

crayon et une feuille de papier quadrill (ou si vous activez le quadrillage sur un
programme de dessin), vous pouvez rpliquer les images de la gure 13.10. Si lon
commence par limage de gauche de la gure 13.10, on peut recrer le dessin en
accomplissant les tapes suivantes :
Placer le crayon la position 40,20 sur le quadrillage.
Pour raliser cela avec un canvas, utiliser context.beginPath()
context.moveTo(40,20). Il sagit du point de dpart.
et
Tracer une ligne partir du point de dpart jusqu approximativement 72,
20 pour le haut de la poigne de la valise.

Utiliser context.lineTo(72,20) pour lquivalent canvas.
Dplacer le crayon vers le bas jusqu 72, 38.
Utiliser context.lineTo(72,38) pour un dessin canvas.
Continuer de cette manire jusqu ce que le contour de la valise soit termin.
Pour dessiner lintrieur de la poigne, slectionner le crayon, se dplacer
lemplacement o lon veut commencer dessiner lintrieur de la poigne.
Avec canvas, utiliser context.moveTo(x,y) pour commencer une nouvelle
position puis utiliser context.lineTo(x,y) pour terminer. On na cependant
pas rutiliser context.beginPath().
277
Dans un dessin au crayon, ds que le dessin est termin, on dispose du
contour de la valise. Avec canvas, il faut inclure context.stroke() pour ajouter

les lignes.
Quand on arrive lavant-dernier point du dessin, on peut utiliser la mthode
context.closePath() pour aller au point de dpart, et cest la technique qui a t
utilise dans le programme. Le script suivant (SimpleDessinTrait.html disponible
dans les chiers du chapitre) fournit toutes les tapes.

<!DOCTYPE html>
<html>
<head>
//couleurs: 8C6E37,BFA380
{
canvasNow = document.getElementById("simpleDraw");
contextNow.beginPath();
contextNow.moveTo(40,20);
contextNow.lineTo(72,20);
contextNow.closePath();
contextNow.stroke();
}
</script>
body {
color:#000000;
}
</style>
<title>Image trace avec des lignes</title>
</head>
<article>
<figure>
<canvas id="simpleDraw" width="90" height="80" > Vous avez rat un super
dessin car vous navez pas de navigateur HTML5.</canvas>
<figcaption> <br/>
Picasso est pass par l</figcaption>
</figure>
278
</article>
</body>
</html>
La gure 13.11 illustre le rsultat attendu (si vous avez travaill avec vos propres
coordonnes, votre dessin est probablement meilleur).
Figure 13.11 Image dessine laide dun canvas.
Jusquici tout va bien, mais la valise originale est de couleur marron et il va donc
nous falloir de la couleur. Pour ajouter de la couleur, on utilise la mme technique
que pour les rectangles : context.fillStyle ="couleur". Les mthodes de dessin
complexe incluent context.fill() pour remplir un contour, si bien quen remplaant
context.stroke() par context.fill(), et en ajoutant une mthode fillStyle le tour
est jou. La gure 13.12 illustre le rsultat.
Figure 13.12 Limage est remplie en couvrant la poigne.
En examinant la gure 13.12, on constate que le contour et la couleur sont corrects,

et quil ny a plus de poigne, mais un bloc la place. Quand une srie de mthodes
de dessin sont utilises sans commencer un nouveau chemin et quensuite la mthode
context.fill() est appele, elle remplit jusquau dbut du chemin. Cela a pour
rsultat que tout est rempli et non pas seulement les parties dsires.
279
Pour rgler ce problme, deux mthodes context.fill() sont employes : une la

n du premier trac de la valise et lautre la n du trac de la poigne. Le premier
trac est rempli en marron et le second trac est rempli en blanc. En outre, un second
context.beginPath() est ajout la n du trac de la poigne. Le programme suivant
(SimpleDessinTraitRempli.html disponible dans les chiers du chapitre) contient
tout le code ncessaire rvis pour gnrer limage correctement remplie.
<!DOCTYPE html>
<html>
<head>
//couleurs: 960, fff, 000
{
canvasNow = document.getElementById("briefCase");
contextNow.fillStyle ="#960";
contextNow.fill();
contextNow.fillStyle ="#fff";
contextNow.fill();
}
</script>
body {
color:#000;
}
</style>
<title>Dessin rempli</title>
</head>
<article>
<figure>
<canvas id="briefCase" width="90" height="80" > Vous avez rat un super
dessin car vous navez pas de navigateur HTML5.</canvas>
<figcaption> <br/>
Picasso est pass par l</figcaption>
280
</figure>
</article>
</body>
</html>
Quand on teste cette version modie, les rsultats sont trs proches du dessin
original. Comparez la gure 13.10 avec la gure 13.13 pour voir comme limage
gnre par programme est proche de loriginale.
Vous pouvez utiliser les lignes pour dessiner tout ce qui ne contient pas des courbes.
Dans la section suivante, nous allons voir comment ajouter des courbes vos outils
artistiques canvas.
Figure 13.13 Version finale du dessin de la valise.
13.2.2 Courbes
La ralisation de courbes, mme avec des outils de dessin, est plus dlicate que le trac
de lignes droites. Pour comprendre comment raliser des courbes, je dbuterai cette
section par une discussion sur les arcs et les mthodes canvas du DOM qui permettent
de les crer. Nous ferons un peu de gomtrie, mais pas trop (il est vraiment ncessaire
de comprendre un peu de gomtrie, mais rassurez-vous, cela reste trs basique).
La premire chose quil faut comprendre, cest la diffrence entre les degrs et
les radians. La plupart des gens savent quun cercle fait 360 degrs. Sur une rose des
vents, 360 ou 0 degr (midi) reprsente le nord. Quand on se dplace dans le sens
des aiguilles dune montre de 90 degrs (3 heures), la boussole pointe vers lest ;
180 degrs (6 heures), elle pointe vers le sud, et 270 degrs (9 heures), elle pointe
vers louest.
Vous devez cependant utiliser des radians la place des degrs, si bien que tous les
degrs doivent tre convertis en radians. Pour ce faire, utilisez la formule suivante :
Radians = (PI 180) degrs
Admettons que vous vouliez connatre les radians pour le plein ouest (9 heures),
270 degrs :
281
Radians = (3.14159265 180) = 0.01745329251994

Radians = 0.01745329251994 270
Radians = 4.71238898
On peut raliser la mme chose en multipliant simplement les degrs par
0,01745329251994 ou bien en crivant en JavaScript :
radians = (Math.PI/180)* degrs;
Vous trouverez aussi beaucoup de calculatrices en ligne qui feront les conversions
votre place.
Arcs
La mthode DOM canvas pour dessiner des arcs sappelle context.arc(). Cette
mthode comporte plusieurs paramtres qui ont besoin dtre compris individuellement, mais aussi les uns par rapport aux autres :
x,y : centre du cercle
radius : rayon du cercle
startAngle : point de dpart de larc exprim en radians
endAngle : point darrive de larc exprim en radians
anticlockwise : boolen (true reprsente le sens contraire des aiguilles dune
montre et false le sens des aiguilles dune montre)
Je trouve utile dimaginer soit une rose des vents, soit une horloge avec les quatre
points cardinaux et les heures et degrs : nord (midi ou 0 degr), est (3 heures ou
90 degrs), sud (6 heures ou 180 degrs) et ouest (9 heures ou 270 degrs). Voici un
exemple dinstruction dun arc complet :
contextNow.arc(150,100,50,six,0,true);
Cet arc a son centre x = 150 et y = 100, et un rayon de 50. Langle de dpart est
dni 6, qui est une variable que nous avons cre pour reprsenter la position de
6 heures ou 180 degrs. La valeur de la variable a t convertie en radians. Les degrs
et les radians ont la mme valeur la position de midi (0), qui est dans notre exemple
langle darrive. Pour nir, larc est dni true, ce qui signie quil est trac dans le
sens contraire des aiguilles dune montre.
Le programme suivant est utilis pour exprimenter diffrents arcs. Quatre variables
(12, 3, 6 et 9) sont dnies en radians et correspondent aux positions sur une
horloge. Certaines instructions sont mises en commentaires, mais elles seront utilises
ultrieurement.
<!DOCTYPE HTML>
<html>
<head>
282
{
canvasNow = document.getElementById("beHappy");
// RADCON = (Math.PI/180) ;
RADCON=0.01745329251994;
twelve=0;
three = RADCON * 90;
six = RADCON * 180;
nine = RADCON * 270;
contextNow.arc(125,100,50,six,twelve,true);
//contextNow.closePath();
//contextNow.fill()
}
</script>
body {
color:#cc0000;
}
</style>
<title>Sourire</title>
</head>
<figure>
<canvas id="beHappy" width="300" height="200" > Vous ne voyez pas de sourire
car vous navez pas de navigateur HTML5 !</canvas>
<figcaption>
<p>Le rectangle reprsente les limites du canvas</p>
</figcaption>
</figure>
</body>
</html>
La variable RADCON est une constante ( 180), si bien que tous les degrs ont t
dnis en radians en multipliant leur valeur par RADCON. Comme nous lavons signal,
les noms des variables reprsentent les positions sur une horloge. De plus, un rectangle
autour de la zone o larc est dessin reprsente les limites de la largeur et de la hauteur
de la balise <canvas>. La gure 13.14 illustre le rsultat.
Le point de dpart de larc est gauche et il se dplace dans le sens contraire des
aiguilles dune montre jusquau point darrive sur la droite. Modiez la ligne suivante :
283
en :
contextNow.arc(125,100,50,six,twelve,false);
Figure 13.14 Arc ralis avec un canvas.
Cela modie le sens du trac qui passe du sens contraire des aiguilles dune montre
au sens des aiguilles dune montre ; cela constitue une belle diffrence, comme vous le
constaterez si vous testez le programme.
Ensuite, en utilisant le mme programme, revenez sa version originale en
modiant nouveau cette ligne :
Supprimez ensuite les lignes de commentaire (//) de la ligne suivante :

//contextNow.closePath();
Et testez nouveau le programme. Cette dernire modication remplit larc.

Supprimez le commentaire de la ligne suivante :
//contextNow.fill()
pour quelle devienne :

contextNow.fill()
284
Et mettez en commentaire la ligne suivante pour quelle apparaisse comme ceci :

//contextNow.stroke()
Quand toutes les modications sont termines, votre arc ressemble prsent une
bouilloire, comme cela est illustr la gure 13.15.
Figure 13.15 Arc avec un chemin ferm et rempli.
Le seul moyen dapprendre rellement travailler avec des arcs est de sentraner.
Utilisez le script de cette section pour tester diffrentes choses.
Cercles et dgrads
Jusqu prsent, nous navons utilis quun seul type de remplissage, le remplissage
plein. Dans cette section, vous allez voir comment crer un cercle en utilisant un arc
et en le remplissant avec un dgrad.
La cration des cercles est facile avec la mthode context.arc(). Les paramtres
du radian sont 0 et Math.PI*2. Le paramtre du sens des aiguilles dune montre est
gal false (cest l toute lastuce). Lexemple suivant cre un grand cercle qui est
rempli par un dgrad, an quil ressemble un coucher de soleil :
contextNow.arc(200,200,150,0,Math.PI*2,false);
La cration dun remplissage en dgrad, la fois linaire et radial est

trs simple. La premire tape consiste utiliser la mthode DOM canvas
context.createLinearGradient(). La mthode attend quatre paramtres : x0, y0, x1,
y1. Le remplissage en dgrad va de x0 x1 et de y0 y1. Un dgrad strictement
linaire de la gauche vers la droite aurait une valeur unique de x1, et le reste serait gal
0. Un dgrad de haut en bas aurait une valeur en y0 ou y1, avec le reste gal 0.
Pour
dnir
les
couleurs du dgrad, on utilise la mthode

gradient.addColorStop() qui attend deux paramtres. Le premier est un nombre
285
compris entre 0 et 1 et le deuxime est la couleur. Quand les paramtres sont dnis,
on assigne le dgrad context.fillStyle. Lextrait de code suivant illustre les
tapes accomplir pour ajouter un remplissage en dgrad :
sunsetGradient=contextNow.createLinearGradient(0, 0, 0,379);
sunsetGradient.addColorStop(0, "yellow");
sunsetGradient.addColorStop(1, "#cc0000")
contextNow.fillStyle = sunsetGradient;
Dans cet exemple particulier, le dgrad est vertical. La premire couleur, le

jaune, est au sommet et la deuxime couleur, le rouge, est en bas. Le script suivant
(CoucherSoleil.html disponible dans les chiers du chapitre) rassemble tous ces
lments et cre un coucher de soleil.
<!DOCTYPE HTML>
<html>
<head>
{
canvasNow = document.getElementById("sunset");
sunsetGradient=contextNow.createLinearGradient(0, 0, 0,379);
sunsetGradient.addColorStop(0, "yellow");
sunsetGradient.addColorStop(1, "#cc0000")
contextNow.fillStyle = sunsetGradient;
contextNow.arc(200,200,150,0,Math.PI*2,false);
contextNow.fill()
}
</script>
body {
color:#cc0000;
}
</style>
<title>Coucher de soleil</title>
</head>
<figure>
<canvas id="sunset" width="400" height="400" > Vous ne pourrez pas admirer
ce magnifique coucher de soleil car vous navez pas de navigateur
HTML5</canvas>
<figcaption>
<p>Coucher de soleil</p>
</figcaption>
</figure>
</body>
</html>
286
Quand on teste la page, on voit un grand cercle avec un dgrad qui vire du jaune
au rouge. Vous pouvez aussi utiliser la mme technique de dgrad avec dautres formes.
La gure 13.16 illustre le rsultat.
Figure 13.16 Cercle avec un remplissage en dgrad.
On peut encore raliser plein dautres choses avec des canvas, et lune des
meilleures caractristiques de ces images cres avec des objets du DOM par rapport
aux images bitmap, cest quelles consomment trs peu de bande passante. Nous
navons cependant que survol ltude de ce nouvel lment HTML5 qui est extrmement puissant.

Le travail avec canvas est tellement exaltant et tellement vari quil est difcile de
savoir par o commencer. Je vous propose donc de tester les mini-projets suivants pour
exprimenter ce nouvel lment en HTML5 :
la gure 13.13, on voit deux objets : une valise et une maison. Essayez de
dessiner la maison en employant les mthodes utilises pour la cration de la

valise.
Prenez une image encadre et superposez une autre image pour quelle apparaisse
dans le cadre (ce projet ncessite de xer les tailles du cadre et de limage de
telle sorte que limage puisse rentrer dans le cadre).
287
Trouvez ou crez une photo numrique et superposez un coucher de soleil au-
dessus (vous pouvez aussi crer une image avec un autre type de dgrad et la
superposer sur une photo numrique ou une autre image. Que diriez-vous dun
ltre en dgrad ?).
14
Ajout de formulaires
Objectif
Lune des fonctionnalits les plus importantes de toute page Web est sa capacit
dinteraction avec une personne. Dans le jargon informatique, il y a une souscatgorie appele interface homme-machine qui traite les humains comme un autre
type dinterface tel quune imprimante, une cl USB ou une webcam. Cela ne
dshumanise pas les gens qui utilisent un ordinateur, mais au contraire cela traite les
gens comme quelque chose quils ne sont pas et ceci vous posera des problmes un
moment ou un autre. Ce chapitre montre comment ajouter des formulaires et traiter
les personnes comme des personnes.
14.1 AJOUT DUN FORMULAIRE

Les formulaires se dcomposent vritablement en deux parties (et parfois mme plus
dans certains cas). La premire partie est la balise <form> qui dnit un conteneur pour
diffrentes sortes de saisies. Voici la forme que peut prendre un formulaire typique :
Dbut du formulaire
Champ de saisie n 1
Champ de saisie n 2
Champ de saisie n 3
Champ de saisie n 4
Fin du formulaire
290
Chapitre 14. Ajout de formulaires
Quand on tudie les formulaires, il faut vraiment distinguer le formulaire et ses

attributs des champs de saisie et de leurs attributs. Avec les formulaires HTML5, vous
allez trouver une quantit de nouveaux attributs et dlments.
Le programme suivant (DegresEnRadians.html disponible dans les chiers du
chapitre) est un exemple dun simple convertisseur de degrs en radians (voir le
chapitre 13 pour des exemples pratiques dutilisation du convertisseur). Il suft de
saisir les degrs que vous voulez convertir et lquivalent en radians safchera.
<!DOCTYPE HTML>
<html>
<head>
FormMaster=new Object();
FormMaster.resolveForm=function()
{
const RADCON=Math.PI/180;
degreesNow=document.converter.degrees.value;
radiansNow=degreesNow * RADCON;
document.converter.radians.value=radiansNow;
}
</script>
/*048ABF,049DBF,F2F2F2,595959,0D0D0D */
h3 {
color:#595959;
}
body {
color:#049DBF;
background-color:#0D0D0D;
}
</style>
<title>Convertisseur de degrs en radians</title>
</head>
<body >
<article>
<header>
<h3>Convertisseur de degrs en radians</h3>
</header>
<section>
<form name=converter>
Saisissez des degrs :<br>
<input type=number name=degrees required >
<br>
Radians :<br>
<input type=number name=radians>
<br>
<input type=submit name=submit value="Convertir en radians"
onClick="FormMaster.resolveForm()">
</form>
</section>
14.1 Ajout dun formulaire
291
</article>
</body>
</html>
Si vous tes dj familier des formulaires HTML, vous savez que ce formulaire est
diffrent car il possde une saisie numrique qui traite les entres comme des nombres
rels et non pas comme du texte qui doit tre converti en nombres par JavaScript.
Cette fonctionnalit ntait pas disponible dans les prcdentes versions de HTML.
La gure 14.1 illustre les contrles spinner qui apparaissent dans Opera quand les
pages Web utilisent une saisie numrique.
Figure 14.1 Saisie de nombres pour des calculs et des conversions.
Comme vous pouvez le voir dans ce chapitre, il y a beaucoup de nouveauts et

lutilisation de JavaScript va vous permettre de tirer le meilleur parti des formulaires
HTML5. Cela devrait vous inciter mettre jour tous vos navigateurs en HTML5.
14.1.1 Attributs gnraux dun formulaire

Un formulaire comporte plusieurs attributs qui ont un impact sur chacun des lments
de saisie du conteneur form, mais nous allons dabord nous concentrer sur les attributs
suivants du formulaire :
accept-charset
action
autocomplete
enctype
method
name
novalidate
292
target
La plupart de ces attributs sont rarement utiliss et certains nont de sens que lorsquon travaille avec des programmes comme PHP et ASP.NET o lon communique
avec une base de donnes. Nous allons cependant tous les examiner.
Accept-charset, enctype et novalidate

Lattribut accept-charset, sil est spci, assigne en gnral la valeur utf-8 comme
encodage des caractres des donnes du formulaire. Cela signie quil traite toutes les
donnes saisies comme tant encodes en utf-8. Une instruction simple comme la
suivante est sufsante :
<form name=monformulaire accept-charset=utf-8>
Si aucun encodage de caractres nest spci, on suppose alors quil est inconnu
et on utilise lencodage par dfaut. Quand on utilise plusieurs encodages, chaque
encodage est spar par un espace en HTML5, alors que dans les versions prcdentes
de HTML le sparateur tait une virgule ou un point-virgule.
La plupart du temps, lattribut enctype est laiss vide et il utilise le paramtre par
dfaut. Lattribut enctype possde trois mots-cls et trois tats (mot-cl/tat) :
application/x-www-form-urlencoded (par dfaut)
multipart/form-data
text/plain
Un formulaire peut tre dni pour accepter le texte clair, ce qui donne lassignation suivante :
<form enctype="text/plain">
Pour la plupart cependant, il sagit dun autre attribut qui nest pas inclus dans la
balise <form>. Cela est d au fait que la valeur par dfaut (urlencoded) est celle qui
est privilgie.
Lattribut novalidate est un boolen utilis dans la validation du formulaire ; il
bloque la validation des donnes saisies par lutilisateur pendant leur soumission. Cela
peut conomiser du temps, mais cela peut aussi conduire des cafouillages. Parfois
un simple formulaire ou un formulaire ouvert (les donnes soumises sont inconnues)
ne se valide pas parce quil y a des problmes de validation qui sont inconnus. Si cet
attribut est prsent dans la balise form, les lments soumis ne seront pas valids :
<form nonvalidate>
Cela bloque effectivement la validation des lments soumis.

Les attributs boolens formnovalidate et required reprsentent une meilleure
solution et ils peuvent tre placs dans les lments individuels de saisie. Par exemple,
293
le formulaire suivant na pas de validation pour un bouton dannulation et le prnom

nest pas obligatoire bien que le nom le soit.
<form name=monformulaire accept-charset=utf-8>
Prnom :
<input type=text name=prenom >
<br>
Nom :
<input type=text name=nom required>
<br>
<input type=submit name=submit value="Envoyer les informations ! ">
<input type=submit formnovalidate name=cancel value="Annuler">
</form>
Vous nutiliserez sans doute pas trs souvent les attributs accept-charset, enctype
et novalidate, mais les attributs de llment input pour grer la non validation et la
saisie des donnes obligatoires peuvent se rvler pratiques.
Autocomplete
autocomplete est un attribut de formulaire assez simple, mais qui est important. Il
possde deux tats, on et off, et sa valeur par dfaut est on. Fondamentalement, si vous
ne voulez pas activer la saisie semi-automatique, il suft simplement de lui attribuer la

valeur off. La saisie semi-automatique peut parfois tre gnante et si tel est le cas, il
suft dajouter la ligne suivante :
<form autocomplete="off">
Quand cet attribut est off, les mots qui sont rutiliss ne safcheront pas. Par
exemple, si vous avez chang dadresse lectronique, votre ancienne adresse peut
safcher automatiquement dans les champs de saisie de ladresse lectronique si
lattribut autocomplete nest pas dni off.
Name et target
Lattribut name est lun des attributs les plus importants du formulaire car il est utilis
par le DOM pour lidentier. En tant que proprit de lobjet document, il peut tre
rfrenc soit comme lment de tableau (par exemple forms[0]), soit par son nom.
Dun point de vue pratique, il est plus facile de faire rfrence un formulaire et ses
sous-formulaires par leur nom.
En plus de lattribut name, les formulaires ont un attribut global, id. Les deux
attributs ont des noms. Dans le DOM, la rfrence se fait sur lattribut name, mais
lintrieur dun document Web unique (une page), dautres lments peuvent identier
le formulaire grce une rfrence lID du formulaire. Il y a de plus une nouvelle
fonctionnalit de HTML5 qui permet au formulaire enfant dexister en dehors du
conteneur <form> et davoir un attribut de formulaire qui le relie nimporte quel
formulaire de la page. Par exemple, llment de saisie de texte suivant fait partie du
formulaire dont lid est ralph.
294
<input type=text form=ralph
name=maison>
Llment de saisie de texte peut se situer nimporte o sur la page, ce qui signie
que les concepteurs nont pas mettre tous les champs de saisie en un mme lieu.
Testez le script suivant (FormID.html disponible dans les chiers du chapitre) avec le
navigateur Opera (qui a implment cette nouvelle fonctionnalit).
<!DOCTYPE HTML>
<html>
<head>
{
favorite = document.formName.favURL.value;
personName=document.formName.person.value;
message= "Le site Web favori de " + personName + " est " +favorite;
document.formName.output.value=message;
}
</script>
h3 {
color:#97CCA6;
}
body {
color:#EFF09E;
background-color:#AB1F33;
}
</style>
<title>Champs de saisie distants</title>
</head>
<body >
<article>
<header>
<h3>ID connecter</h3>
</header>
<section> Quel est votre site Web favori ?<br>
<label>Site favori :
<input type=url form=formID name=favURL>
</label>
</section>
<section>
<blockquote> Cette section reprsente une coupure entre le premier champ
de saisie (qui ncessite une URL) et le reste du formulaire auquel le
formulaire dURL appartient. Cela laisse plus de latitude aux concepteurs dans
la gestion dun site interactif. </blockquote>
</section>
<section>
<form name=formName id=formID>
<label>Quel est votre nom ?
<input type=text name=person>
</label>
295
<br>
Rsultat :<br>
<textarea name=output cols=50 rows=5></textarea>
<br>
<input type=submit name=submit value="On rassemble les morceaux"
</form>
</section>
</article>
</body>
</html>
Vous noterez qu lintrieur du conteneur <form> avec les attributs name=formName

et id=formID il y a un seul lment de saisie, une balise <textarea> et un bouton de
soumission. Plus important encore, vous remarquerez que llment de saisie ayant
lattribut name=favURL se situe en dehors du conteneur <form>, mais il sassigne
lui-mme lID du formulaire sur la page, formID. En HTML5, il est trait comme sil
tait lintrieur du conteneur <form>. La gure 14.2 montre que les donnes saisies
dans llment de saisie de type url (name=favURL) sont slectionnes par le DOM du
code JavaScript comme faisant partie du mme formulaire que le reste des lments
de saisie du formulaire appartenant au formulaire nomm formName.
Figure 14.2 La saisie peut tre place en dehors du conteneur du formulaire.
296
Vous navez donc plus prsent vous proccuper de lemplacement o vous

mettez vos formulaires de saisie. Tant que lon assigne aux lments de saisie lID du
formulaire, ils sont traits comme sils taient lintrieur du conteneur du formulaire.
Lattribut target fait rfrence au contexte de navigation du formulaire aprs
la soumission du formulaire. Si aucune valeur nest assigne lattribut target, le
contexte de navigation est le mme que si la valeur _self est assigne lattribut
target. Les autres contextes de navigation sont _blank, _parent ou _top. Le contexte
de navigation _blank est assez utile quand on rcupre des informations dun script
ct serveur qui remplacent le contenu de la page appelante par son propre contenu.
Le fait dutiliser _blank permet aux utilisateurs de voir la fois la page appelante et
les informations de la page appele.
14.1.2 Le formulaire comme partie du DOM

Bien que le DOM soit gnralement abord comme une organisation de nuds, il
peut aussi tre dcrit en termes dobjets (aprs tout, il y a bien le mot objet en plein
au milieu du DOM !). An de voir la manire dont les formulaires et les champs de
saisie sont organiss dans le DOM, vous pouvez utiliser les rfrences JavaScript aux
diffrentes parties dun formulaire. Le DOM rfrence les lments du formulaire sous
la forme dun tableau au sein dun document. Les lments de saisie lis au formulaire
sont les lments de tableau du formulaire, le premier nud sappelant elements[0]
(on est dans un systme de numrotation o le premier lment commence zro).
De la mme manire, la numrotation des formulaires commence zro et le premier
formulaire du document se nomme forms[0] (Note : les lments et les formulaires
sont au pluriel, mme si le nom des balises <element> et <form> est au singulier).
Pour vous aider distinguer les parties dune organisation DOM, le simple script
suivant (IDNom.html disponible dans les chiers du chapitre) montre les diffrentes
manires de rfrencer le mme objet dans un document contenant des formulaires.
Il est prfrable de rfrencer un formulaire par son nom dobjet et de proprit et
les diffrentes combinaisons ne sont prsentes ici qu des ns de dmonstration. Ce
programme utilise galement plusieurs types de saisie.
<!DOCTYPE HTML>
<html>
<head>
{
alpha = document.motherShip.elements[0].value;
beta = document.forms[0].secondInput.value;
gamma = document.motherShip.thirdInput.value;
delta = document.forms[0].elements[3].value;
epsilon = document.motherShip.fifthInput.value;
const cr="\n";
message=alpha+cr+beta+cr+gamma+cr+delta+cr+epsilon;
document.motherShip.output.value=message;
297
}
</script>
h3 {
color:#677E52;
}
body {
color:#89725B;
background-color:#B0CC99;
}
</style>
<title>DOM et formulaires</title>
</head>
<body >
<article>
<header>
<h3>DOM, le formulaire et les noeuds</h3>
</header>
<form name=motherShip>
<input type=number name=firstInput>
Numro<br>
<input type=email name=secondInput>
Courriel<br>
<input type=text name=thirdInput>
Texte<br>
<input type=text name=fourthInput>
Texte<br>
<input type=url name=fifthInput>
URL<br>
<textarea cols="15" rows="6" name=output></textarea>
<input type=button value="Envoyer au DOM"
</form>
</section>
</article>
</body>
</html>
Quand on teste le programme, on saisit le texte et les nombres appropris, puis

on clique sur le bouton Envoyer au DOM. Dans le programme JavaScript, vous
noterez que tant que les noms des lments ou les noms des nuds sont utiliss,
les informations saisies sont envoyes dans la zone de texte qui est utilise comme
fentre de sortie. La gure 14.3 illustre le rsultat attendu.
Les contenus sont rcuprs via les chemins du DOM et placs dans des variables
puis envoys llment <textarea> pour tre afchs. Une constante (const
cr="\n") est insre entre les cinq lments pour placer un caractre de contrle
qui force un retour la ligne.
298
Figure 14.3 Saisies de lutilisateur affiches sur la page.
14.2 LES DIFFRENTES SORTES DE SAISIE

Lune des principales nouvelles fonctionnalits de HTML5 est lajout de diffrents
types dattributs de saisie. De plus, ces diffrents attributs de saisie fonctionnent avec
les priphriques mobiles. Par exemple, si lon utilise un type de saisie email ou url,
un clavier spcial avec un point (.) et le sufxe .com apparat quand on commence
saisir des donnes dans un formulaire sur certains terminaux mobiles.
Avec les nouveaux types de saisie, il y a des attributs supplmentaires qui modient
la manire dont la page interagit avec les utilisateurs. Sur les 29 attributs de saisie, 11
sont nouveaux en HTML5. Comme pour les nouveaux types de saisie, il est ncessaire
dapprendre utiliser ces attributs. Comme il y a de nombreux types de saisie et
dattributs, je les ai rassembls en deux tableaux. Le tableau 14.1 liste les valeurs des
diffrents types que lon peut utiliser et le tableau 14.2 liste tous les attributs.
Au cours de lcriture de ce livre, tous ces types navaient pas t implments
par les principaux navigateurs, mais comme il est prvu terme une implmentation
complte de la nouvelle norme HTML5, nayez pas peur de tester de votre ct les
diffrents types. Le tableau 14.2 liste les attributs gnraux des diffrents lments de
saisie.
299
14.2 Les diffrentes sortes de saisie
Tableau 14.1 Types des lments de saisie HTML5. *Nouveau en HTML5.

Type
Fonctionnalit
Type
Fonctionnalit
Bouton de
commande
checkbox
Slection
color
Palette de couleurs
date*
Slectionneur de
date
datetime*
Slectionneur de
date
datetime-local*
Slectionneur de
date
email
Adresse lectronique file
Envoi de fichier
hidden
Masqu
image
Coordonnes
dimage
month*
Slectionneur de
date
number*
Valeur numrique
password
Masque le mot de
passe
radio
Slection
range*
Plage de nombres
reset
Efface les entres
search*
Mots de recherche
submit
Envoie les donnes

du formulaire
tel
Numro de
tlphone
text
Valeur string
time*
Slectionneur de
date
url*
Adresse Web
week*
button
Slectionneur de
date
Les prochaines sections tudient les diffrents regroupements dlments et dattributs de formulaires tant donn le grand nombre de combinaisons possibles. La
premire section couvre lutilisation de llment datalist avec list et les attributs de
form. Comme pour toutes les sections suivantes, celle-ci rassemble un grand nombre
de fonctionnalits tout en se concentrant sur les fonctionnalits importantes qui sont
lobjet de la discussion.
14.2.1 Lattribut list, le type URL et les datalist

Lattribut list est lun des nouveaux attributs qui peut tre utilis avec des formulaires.
Au dbut de ce chapitre, jai insist sur le fait que les applications Web devaient tre
300
Tableau 14.2 Attributs des lments de saisie. *Nouveau en HTML5.

Attribut
Fonctionnalit
Attribut
Fonctionnalit
accept
Type de fichier
accept
alt
Indice de
chargement de
fichier
autocomplete*
Saisie
semi-automatique
autofocus*
Place le focus sur un

champ
checked
tat slectionn
disabled
Inutilisable
form*
Dfinit lID du
formulaire
formaction*
Substitution
formenctype*
Substitution
formmethod*
Substitution
formnovalidate*
Substitution
formtarget*
Substitution
height*
Hauteur en pixels
list*
Suggestion de liste
de donnes
max*
Valeur maximale
maxlength
Longueur maximale
min*
Valeur minimale
multiple
Valeurs multiples
name
Nom DOM
pattern*
Expression rgulire
placeholder*
Disparat la saisie
readonly
Saisie impossible
required*
Champ obligatoire
size
Nombre de
caractres visibles
src
Source
step*
Nombre dtapes
type
Type de saisie
value
Valeurs assignes
width*
Largeur en pixels
conviviales et interactives. Il est donc prfrable de minimiser le travail de saisie de

lutilisateur dans un formulaire. Lattribut list fournit une liste de suggestions dans
un lment de saisie et les utilisateurs peuvent slectionner partir de la liste ou bien
saisir une rponse. Lattribut list est en fait une rfrence une balise <datalist>
qui est situe ailleurs sur la page Web. De plus, si lon place le conteneur <datalist>
au sein dun conteneur <form>, les lments <input> aprs la liste de donnes ne
safchent pas sur la page. Dans ces conditions, il faut fournir un attribut ID dans la
balise <datalist> et lassigner lattribut list de la balise <input>. La liste de donnes
301
est stocke en dehors du conteneur <form>, mais elle est connecte via lID de la liste
de donnes.
Affichage dun choix dans une fentre de message
Dans cet exemple simple, on dnit un champ de saisie o lutilisateur tape ou

slectionne une URL. Une fois que lURL est entre, lutilisateur clique sur le bouton
Afcher votre URL et une bote de dialogue afche ladresse. Le script suivant
(DataList.html disponible dans les chiers du chapitre) montre comment assembler
toutes les pices.
<!DOCTYPE HTML>
<html>
<head>
{
place=document.traveler.getURL.value;
alert(place);
}
</script>
h3 {
color:#B9121B;
}
body {
color:#4C1B1B;
background-color:#FCFAE1;
}
</style>
<title>List et Datalist</title>
</head>
<body >
<article>
<header>
<h3>List et Datalist</h3>
</header>
<section>
<datalist id=favoriteSites>
<option value="http://www.smashingmagazine.com/" label="Smashing">
<option value="http://www.sandlight.com/" label="Sandlight">
</datalist>
</section>
<section>
<form name=traveler>
<label>Saisissez lun de vos sites favoris :</label>
<br>
<input type=url list=favoriteSites name=getURL>
<br>
<input type=submit value="Afficher votre URL"
302
</form>
</section>
</article>
</body>
</html>
En examinant le script, vous vous demandez peut-tre ce que lattribut label fait
dans la balise <option> du conteneur <datalist>. Il ny a pas dattribut label dans
les lments form ou input (voir les tableaux 14.1 et 14.2) car cet attribut se trouve
dans la balise <option>. Bien que cela paraisse vident, quand on ouvre la page, on
voit non seulement les URL, mais aussi le libell dans la fentre de saisie des URL.
Cela sexplique car la balise <input type=url> contient une rfrence aux options de
la liste de donnes via lattribut list du balisage de llment input.
Pendant la rdaction de ce livre, la liste de donnes ne safchait que sous Opera
(Windows 7 ou Mac OS X).
Dans le champ de saisie, on peut voir les slections disponibles dans la liste de
donnes (il y a aussi un libell pour chaque adresse). Quand lutilisateur fait une
slection, elle apparat dans le champ de saisie. Enn, le rsultat de la saisie est pass
la fonction JavaScript qui lafche dans une bote de dialogue (vous noterez que la
bote de dialogue du navigateur Opera afche aussi le domaine).
Le point important de ce processus est que les utilisateurs nont pas saisir les URL.
Toute personne qui a dj saisi une adresse de site Web a commis une faute de frappe
un moment donn. La liste de donnes oriente le choix de lutilisateur et facilite sa
saisie.
lment de Datalist sur priphrique mobile et clavier pour URL

Mes tests de lapplication avec le navigateur Mini Opera sur iPhone ont rvl que la
liste de donnes napparaissait pas. Dautres tests avec la version mobile de Safari ont
montr que cela ne marchait pas non plus sous Safari.
Cependant, au cours de ces tests, un clavier unique pour les nouveaux types
dlments de saisie url et email est apparu. Le navigateur mobile Safari reconnat les
champs de saisie typs url et email et, quand ils sont utiliss, il afche un clavier qui
inclut un point (.) et le sufxe .com, plus quelques autres touches qui sont couramment
employes pour la saisie des URL et des adresses lectroniques. La gure 14.4 illustre
les navigateurs Safari mobile (gauche) et Mini Opera (droite) cte cte afchant le
programme de liste de donnes sur le mme iPhone. Si vous regardez soigneusement,
vous pourrez voir les diffrences.
Un navigateur mobile qui reconnat que la saisie attend une URL ou une adresse
lectronique est important car cela signie quil prend en considration lutilisateur.
Avec ce clavier spcial, les utilisateurs nont pas jongler autant entre les claviers
alphabtique et numrique.
303
Figure 14.4 Clavier spcifique pour la saisie dune URL sur un priphrique mobile (gauche)
et clavier mobile standard (droite).
14.2.2 Boutons radio et cases cocher : lments de saisie faciles

slectionner
Si vous utilisez des boutons radio et des cases cocher avec des programmes externes
qui accdent des bases de donnes ou qui ralisent dautres types dopration ct
serveur, cela est trs simple du ct HTML5. Il suft dutiliser un bouton qui envoie les
donnes et tout est transfr au serveur pour que ces programmes grent les donnes.
En raison du fait que le script suivant renvoie les donnes saisies un objet
<textarea> de la page, ces donnes doivent tre contrles en utilisant JavaScript
avec une petite boucle pour voir dabord si lattribut checked est gal true ou
false. Si llment est slectionn, le script ajoute ensuite la valeur une proprit
FormMaster nomme this.countVal (cest comme une variable, mais on garde le style
de programmation DOM et on assigne la valeur un objet). Quand cest termin,

seules les valeurs slectionnes sont envoyes dans la fentre de rsultat. Le script
suivant (qui est un peu long) (BoutonsCases.html disponible dans les chiers du
chapitre) ralise toutes ces tches.
<!DOCTYPE HTML>
<html>
<head>
{
this.countVal="";
this.topCount=document.checkRadio.length-2;
304
for(var count=0;count < this.topCount;count++)

if(document.checkRadio.elements[count].checked)
{
this.countVal+=document.checkRadio.elements[count].value+"\n";
}
document.checkRadio.outNow.value=this.countVal;
}
</script>
/* 735840,733119,BF5D39,352D1B,C0B787 */
body {
background-color:#C0B787;
color:#733119;
font-size:12px;
margin-left:20px;
}
h1 {
color:#733119;
}
h2 {
color:#BF5D39;
}
h3 {
color:#BF5D39;
}
#dataEntry {
display:table;
}
#lang {
display:table-cell;
width:200px;
}
#out {
display:table-cell;
width:300px;
}
aside {
display:table-cell;
width:250px;
}
</style>
<title>Cliquez pour choisir</title>
</head>
<body>
<article>
<header>
<h1>Slections</h1>
</header>
<div id="dataEntry">
<div id="lang">
<section>
<h2>Langages Web</h2>
<form name=checkRadio>
<label>
305
<input type=checkbox name=html value="HTML5" checked>

HTML5</label><br>
<label>
<input type=checkbox name=css value="CSS3">
CSS3</label><br>
<label>
<input type=checkbox name=js value="JavaScript">
JavaScript</label><br>
<label>
<input type=checkbox name=php value="PHP">
PHP5</label><br>
<label>
<input type=checkbox name=asp value="ASP.NET">
ASP.NET</label><br>
<label>
<input type=checkbox name=action value="ActionScript 3.0">
ActionScript 3.0</label>
</section>
</div>
<section>
<aside>
<h2>Spcialits</h2>
<fieldset>
<legend> Web </legend>
<label>
<input type=radio name=work value="Conception graphique">
Conception </label><br>
<label>
<input type=radio name=work value="Conception dinterface">
Conception dinterface </label><br>
<label>
<input type=radio name=work value="Frontal">
Dveloppement de frontal </label><br>
<label>
<input type=radio name=work value="Back-end">
Dveloppement de back-end</label><br>
</fieldset>
</aside>
</section>
</div>
<section>
<div id="out">
<fieldset>
<legend>Fentre de rsultat</legend>
<textarea name=outNow rows=10 cols=40 ></textarea>
</fieldset>
</div>
</section>
<section>
<div>
<p>
<input type=button name=getEm value="Transmission des slections"
</p>
</div>
</section>
</form>
306
</div>
</article>
</body>
</html>
Bien que ce programme soit un peu long, la majeure partie est du code de mise
en forme si bien quil est de taille convenable et facilite la tche des utilisateurs. La
balise <fieldset> a t utilise pour mettre en vidence un groupe de boutons et pour
encapsuler la fentre de rsultat. Cest une balise essentielle quand on veut regrouper
des lments. La balise <legend> permet de placer une tiquette dans le rectangle qui
encadre lensemble des champs. La gure 14.5 illustre le rsultat attendu.
Figure 14.5 Cases cocher et bouton radio.
Quand on excute le programme pour la premire fois, on voit que la case cocher
HTML5 a dj t slectionne. Cela est d au fait que lattribut checked a t ajout
la balise. Il sagit dun boolen, mais on na pas lui assigner la valeur true ou false.
Aprs le chargement de la page, examinez ce qui se passe quand vous cliquez dessus.
La fentre de rsultat abrite toutes les valeurs qui ont t assignes aux cases
cocher et aux boutons radio. Dans une vritable application, ces donnes seraient
envoyes dans une base de donnes.
307
14.2.3 Slectionneur de date

Nous terminerons ce chapitre par un dernier attribut de saisie qui est simple
implmenter, mais qui procure des rsultats impressionnants. Le nouvel attribut
date de llment input est puissant et facile inclure dans un formulaire. Plusieurs
nouveaux attributs de date et dheure ont t ajouts llment input, mais seul
lattribut date est tudi ici. Le programme suivant (Calendrier.html disponible
dans les chiers du chapitre) montre comment utiliser cet attribut et rcuprer
linformation.
<!DOCTYPE HTML>
<html>
<head>
{
alert(document.calendar.dateNow.value);
}
</script>
<title>Date</title>
</head>
<body >
<form name=calendar>
<input name=dateNow type="date" onChange="FormMaster.resolveForm()">
</form>
</body>
</html>
Avec simplement cette petite balise dans le conteneur form, vous tes capable
de crer un programme de calendrier complet. Vous pouvez utiliser le gestionnaire
dvnements onChange pour capturer la date slectionne dans le calendrier. La
gure 14.6 illustre lapplication dans le navigateur Opera (le seul prsent qui
fonctionne avec ce nouvel attribut de saisie) sous Windows 7.
Dans cette implmentation particulire, ds que lutilisateur fait son choix, une
bote de dialogue souvre et afche la date slectionne, comme cela est illustr la
gure 14.7.
Le but est ici de montrer comme il est facile de passer la valeur de la date
slectionne. De telles donnes pourraient tre stockes dans une base de donnes
pour un systme de rservation en ligne.
La petite fentre derrire la bote de dialogue montre la date slectionne sans quil
y ait besoin de beaucoup de programmation. Ce nouvel attribut va vraiment faciliter
la vie des utilisateurs quand ils veulent choisir une date. Si vous avez dj expriment
ce genre de systme pour rserver un avion ou un htel, vous savez comme cet outil
est apprciable. Le problme est que pour le moment seul le navigateur Opera la
implment.
308
Figure 14.6 Une simple balise fournit un calendrier en ligne.
Figure 14.7 Passage de la valeur de la date JavaScript.
309

Le plat de rsistance de ce chapitre a t la manire dutiliser le DOM pour accder
aux informations dun formulaire, grce la syntaxe de base suivante :
document.formulaire.lment.valeur
Vous devez utiliser JavaScript pour accder aux donnes qui sont en gnral passes
un programme ct serveur comme PHP, ColdFusion ou ASP.NET. Pour simuler
ce comportement, les exemples de ce chapitre ont utilis un bouton de commande
qui dclenchait un programme JavaScript an denvoyer les rsultats dans une balise
<textarea> o lon pouvait voir ce qui aurait t normalement envoy une base de
donnes. Voici les ds que vous aurez relever :
Imaginez un magasin en ligne qui vend une gamme de produits (au moins cinq)
ou fournit des services (au moins cinq), par exemple un magasin dinformatique
ou bien un service de conception de sites Web.
Concevez une interface o les utilisateurs entrent leur nom, leur adresse
lectronique, une URL, leur adresse complte, un nom dutilisateur et un mot
de passe. La saisie doit tre la plus simple possible pour lutilisateur. Faites tester
le formulaire par quelquun qui ne la jamais vu auparavant.
Les utilisateurs slectionnent ensuite plusieurs produits ou services.
Les slections de lutilisateur sont ensuite afches dans une balise <textarea>
avec leur prix individuel HT et TTC.
Le programme gnre aussi une tiquette dexpdition qui se contentera dtre
afche dans un objet <textarea> et qui ne sera donc pas imprime.
Essayez dutiliser le maximum dlments de saisie et dattributs qui ont t tudis

dans ce chapitre.
15
Incorporation dobjets et
stockage dinformations
Objectif
Pendant des annes, les utilisateurs ont t capables de raliser des choses remarquables sur le Web grce diffrentes sortes de plug-ins chargs dans le navigateur.
Dune manire gnrale, deux plug-ins principaux sont installs avec la plupart des
navigateurs : Adobe Flash Player et Java.
Certaines des nouvelles fonctionnalits de HTML5 marchent mieux avec des plugins spciaux ou via une URL qui exploite la nouvelle fonctionnalit. Parmi ces
nouveaux objets HTML5, lobjet geolocation permet de raliser des choses trs
intressantes et cest celui que nous tudierons en premier. Ensuite, nous examinerons
comment Flash fonctionne avec HTML5.
15.1 GEOLOCATION
Lobjet geolocation fait partie de lobjet navigation du DOM HTML5. Il permet
notamment de trouver plus ou moins prcisment lemplacement o vous vous
trouvez. Les attributs les plus importants de lobjet geolocation sont latitude et
longitude. Grce ces valeurs, vous pouvez charger une carte dun emplacement si
vous connaissez ses coordonnes.
La cration dune page HTML qui montre aux utilisateurs leur latitude et leur
longitude est parfaite, mais les navigateurs HTML5 sont aussi capables de charger une
carte sur un site Web avec Google Maps. Voici lURL qui permet de raliser cela :
312
Chapitre 15. Incorporation dobjets et stockage dinformations
" http://maps.google.com/maps?hl=en&ie=UTF8&ll= " + latitude + ", " +

longitude + "&spn=0.054166,0.110378&z=13&output=embed"
Les variables latitude et longitude contiennent les valeurs des coordonnes.

Lastuce consiste donc trouver les valeurs de latitude et de longitude pour les insrer
au bon endroit.
15.1.1 Trouver la latitude et la longitude

Que ce soit sur votre tlphone mobile ou votre ordinateur, lobtention de ces valeurs
ncessite du code JavaScript dont voici la syntaxe de base :
navigator.geolocation.getCurrentPosition(uneFonction);
Pour ltrer les navigateurs qui ne reconnaissent pas lobjet geolocation, il suft
dutiliser la technique suivante :
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(uneFonction);
}
else
{
alert("Geolocation nest pas reconnu !")
}
Cela permet davertir les utilisateurs que leur navigateur ne prend pas en charge
lobjet geolocation.
La fonction appele pour obtenir les informations de positionnement doit inclure
un paramtre qui stocke ces informations. En utilisant des objets et des mthodes,
lappel de fonction est ralis de la manire suivante :
...
navigator.geolocation.getCurrentPosition(LocationMaster.lookUpPosition);
...
Ceci rcupre la mthode qui retourne les valeurs demandes :

LocationMaster=new Object();
LocationMaster.lookUpPosition=function(position)
{
this.latNow=position.coords.latitude;
this.longNow=position.coords.longitude;
...
Vous remarquerez que le paramtre position est similaire une variable qui stocke
les valeurs de latitude et de longitude. Il ne sagit pas dune proprit de lobjet
geolocation (cords.latitude et cords.longitude sont les proprits ; cest moi qui ai
15.1 Geolocation
313
choisi le nom position car je le trouve plus descriptif que NainTracassin , par
exemple, mais vous pouvez utiliser le nom que vous voulez).
Une fois que les valeurs sont assignes au paramtre de lobjet, elles font partie
de lobjet LocationMaster grce lemploi du mot-cl this. Les proprits latNow et
longNow stockent les valeurs comme sil sagissait de variables, la seule diffrence tant
quelles font partie de lobjet.
15.1.2 Rcupration de la carte

La page HTML5 qui travaille avec JavaScript ne ralise quune seule chose : rcuprer
les coordonnes. Lobtention de la carte par la suite nest quune simple affaire
dinsertion de ces valeurs dans la requte de carte. Ainsi, pour terminer la mthode, le
programme utilise la ligne suivante :
document.getElementById("mapHolder").src =
"http://maps.google.com/maps?hl=en&ie=UTF8&ll=" + this.latNow + "," +
this.longNow + "&spn=0.054166,0.110378&z=13&output=embed";
Vous trouverez une nouvelle mthode dans le cur du DOM HTML5 : getElementById. Dans cet exemple, lID est celui dun lment iFrame, la carte tant lobjet
source, tout comme une image est charge grce lidentication de sa source :
<img src="monImage.jpg">
La seule diffrence est que lendroit o la carte est charge est spci par lID de
liFrame et non pas par la page par dfaut.
Placement de la carte sur la page Web

Tout autre chargement aprs que la page ait t charge ne peut pas tre dpos
nimporte o sur la page. La balise <iframe> peut tre un emplacement cible situ en
dehors du document principal. Le fait dutiliser <iframe> sans attribut produit une
fentre dafchage relativement petite, mais lide est de montrer quavec quelques
balises et un peu de code JavaScript jarrive afcher une carte sur la page.
On rassemble le tout sur une page simple

Jai test tous les grands navigateurs sous Windows 7 et Macintosh OS X, et le programme suivant (MiniGeolocalisation.html disponible dans les chiers du chapitre)
reprsente un bon point de dpart dune page qui afche une carte proche de lendroit
o se trouve lutilisateur.
<!DOCTYPE html >
<html>
<head>
/* BF7F6C,FFDDAE,B59D7B,40372B,E6C79C */
314
body {
color:#40372B;
background-color:#FFDDAE;
}
h3 {
color:#BF7F6C;
}
</style>
<script>
LocationMaster=new Object();
LocationMaster.lookUpPosition=function(position)
{
this.latNow=position.coords.latitude;
this.longNow=position.coords.longitude;
document.getElementById("mapHolder").src =
"http://maps.google.com/maps?hl=en&ie=UTF8&ll=" + this.latNow + "," +
this.longNow + "&spn=0.054166,0.110378&z=13&output=embed";
}
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(LocationMaster.lookUpPosition);
}
else
{
alert("Essayez un navigateur HTML5 diffrent car celui-ci ne
fonctionne pas avec lobjet geolocation.");
}
</script>
<title>Carte minimale</title>
</head>
<body>
<article>
<header>
<h3>Votre emplacement</h3>
</header>
<section>
<iframe id="mapHolder"> </iframe>
</section>
<section>
<p> Cet exemple dutilisation de la golocalisation et de Google Maps
est trs simple. Il a t test avec les principaux navigateurs et les
navigateurs mobiles. </p>
</section>
</article>
</body>
</html>
Quand vous testerez cette page Web, prenez dabord la dernire version du
navigateur Firefox. Essayez ensuite avec Google Chrome et Opera. Avec Safari, qui
reconnat lobjet geolocation, jai t incapable de charger la carte dans lobjet iframe.
Ironiquement, quand jai test ce code sur le navigateur Safari mobile de liPhone, cela
fonctionnait parfaitement. La gure 15.1 illustre le programme avec Internet Explorer
sous Windows 7.
15.1 Geolocation
315
Figure 15.1 Outil geolocation utilis pour trouver la longitude et la latitude avec Google Maps.
Vous pouvez dplacer la carte dans liframe avec la souris et, sur les navigateurs
Safari et Perfect sur un iPhone, avec les doigts. Cependant, sur les navigateurs mobiles,
liframe et limage sont agrandies par un glissement vers le bas.
Adaptation de la page pour un terminal mobile
Pour rendre la page plus pratique pour les utilisateurs mobiles, jai procd quelques
ajustements an de changer lorientation de la carte en modiant l<iframe> de la
manire suivante :
<section>
<iframe id="mapHolder" width="240" height="320"> </iframe>
</section>
On a prsent une orientation verticale et la carte est plus facile lire. La

gure 15.2 illustre le programme sur un iPhone avec les navigateurs Perfect (gauche)
et Safari (droite). En bas de la page, il y a des instructions pour agrandir limage sans
dplacer la carte en dehors de liframe.
La gure 15.2 illustre cela en tirant la page vers lextrieur et loin de la carte (copie
dcran de gauche) ; les utilisateurs mobiles peuvent agrandir la carte de manire
pouvoir la lire facilement (copie dcran de droite).
316
Figure 15.2 Carte dans un environnement mobile.
15.1.3 Exploitation des proprits de lobjet geolocation et du plug-in

Google Earth
Voici une liste complte des proprits de lobjet geolocation qui peuvent fournir de
nombreuses informations :
latitude : coordonnes gographiques en degrs
longitude : coordonnes gographiques en degrs
altitude : hauteur en mtres
accuracy : niveau de prcision en mtres des coordonnes de latitude et
longitude
altitudeaccuracy : niveau de prcision en mtres de laltitude
heading : direction du dplacement du priphrique hte en degrs (pertinent
sur un priphrique mobile)

speed : vitesse du priphrique hte en mtres par seconde (pertinent sur un
priphrique mobile)
Si vous disposez dun tlphone mobile, vous pouvez, par exemple, tester lorientation et la vitesse en voiture, si ce nest pas vous qui conduisez ! Toutes les proprits
de geolocation peuvent tre envoyes un formulaire pour tre afches si vous le
souhaitez. Si vous utilisez ces informations sur un priphrique mobile, vous aurez
besoin dun serveur open-socket ou dun frquent rafrachissement de page.
15.2 Stockage en HTML5
317
Il est galement possible demployer geolocation avec le plug-in Google Earth. La

gure 15.3 illustre une version modie de la page Web de base avec le plug-in qui
permet de gnrer un afchage en 3D de la zone cartographie.
Vous pouvez mettre jour lexemple de page Web avec les mmes dimensions en
donnant la balise <iframe> les attributs suivants : width=500 height=400. Il suft
ensuite de cliquer sur loption Earth au sommet de la carte ; si votre navigateur a
le plug-in, il afchera une vue en 3D. Dans le cas contraire, on vous proposera de
tlcharger le plug-in et de linstaller sur le navigateur.
Figure 15.3 Vue en 3D de la zone cartographie avec le plug-in Google Earth.
15.2 STOCKAGE EN HTML5

Quand on voque le stockage de donnes dans le navigateur de lutilisateur, on pense
dabord aux cookies, puis viennent en gnral lesprit les bases de donnes et les
programmes comme PHP et ASP.NET. Le DOM HTML5 possde cependant un objet
de stockage qui peut tre utilis dans quatre contextes diffrents :
Stockage de session,
Stockage global,
Stockage local,
Stockage de base de donnes.
318
Tous les navigateurs ne supportent pas tous ces contextes de stockage, mais au fur
et mesure que les navigateurs sont mis jour, ils incluent de plus en plus de contextes.
Au moment de la rdaction de cet ouvrage, Safari, Chrome et Opera prenaient en
charge tous les contextes sauf le stockage global ; Firefox prenait en charge tous les
contextes, sauf le stockage de base de donnes.
Le stockage est ralis laide de paires cl/valeur, la cl tant un identiant dune
valeur donne (la cl ressemble une variable avec un libell et une valeur assigne).
Les deux sections suivantes expliquent comment fonctionnent le stockage de session
et le stockage local. Je laisse de ct le stockage global et le stockage de base de
donnes car pour le moment ils sont moins bien implments.
15.2.1 Stockage de session

Le stockage de session permet aux utilisateurs de stocker des donnes dune seule
page Web tant que cette page Web est visualise. Ds que lutilisateur quitte la page,
toutes les donnes stockes sont perdues. Pour les jeux interactifs, les programmes de
calculatrice ou tout autre type de page qui a besoin dun stockage temporaire, vous
pouvez utiliser le stockage de session.
Pour commencer, vous devez examiner les mthodes qui permettent dassigner des
valeurs aux proprits du stockage de session puis de les rcuprer. Voici la syntaxe de
base pour stocker une valeur :
sessionStorage.setItem("nomCl", valeur);
La cl doit tre une chane de caractres (type string), alors que la valeur peut
tre de nimporte quel type de donnes acceptable (numrique, texte, boolen, objet,
fonction). Le code suivant fournit quelques assignations valides :
this.maCle="deuximeCle"; //Nom de cl assign une proprit
function bonjour()
//Fonction avec une valeur de retour
{
return "Salut !";
}
jill="Mon nom est Jill"; //Variable
//Assignation de valeurs aux cls
sessionStorage.setItem("premiereCle",88);
//Nombre (numrique littral)
sessionStorage.setItem(this.maCle,true ); //Boolen
sessionStorage.setItem("troisiemeCle",bonjour() ); //Fonction
sessionStorage.setItem("quatriemeCle","Mon nom est Jack" ); //String littrale
sessionStorage.setItem("cinquiemeCle",jill ); //Variable
Comme vous pouvez le voir, on peut utiliser des variables pour les cls et leurs
valeurs. Tant que la variable (ou la proprit) est une donne de type string, elle peut
tre utilise comme cl (vous pouvez mme utiliser une fonction qui retourne une
valeur string comme cl).
Une fois que vous avez stock les donnes, vous avez besoin dun moyen de les
rcuprer grce une mthode. Voici la syntaxe gnrale pour obtenir les donnes
319
stockes (il faut connatre le nom de la cl de chaque valeur que lon souhaite
rcuprer).
sessionStorage.getItem(("nomCl");
Vous pouvez vous reprsenter le nom de la cl comme sil sagissait dun nom de
variable : si vous connaissez le nom de la variable, vous pouvez retrouver sa valeur. Les
noms de cls fonctionnent de la mme manire.
Le programme suivant (StockageSession.html disponible dans les chiers du

chapitre) fournit une illustration simple de la manire de travailler avec le stockage de
session. Cela vous rappellera probablement le travail avec les variables car les valeurs
survivent tant que lon ne change pas de page.
<!DOCTYPE HTML>
<html>
<head>
StorageMaster=new Object();
//Set values
StorageMaster.setPositions=function()
{
sessionStorage.setItem("firstBase",document.players.firstBase.value );
sessionStorage.setItem("secondBase",document.players.secondBase.value );
sessionStorage.setItem("thirdBase",document.players.thirdBase.value );
}
//On rcupre les valeurs
StorageMaster.getFirst=function()
{
playerName=sessionStorage.getItem("firstBase");
alert(playerName + " joue premire base");
}
StorageMaster.getSecond=function()
{
playerName=sessionStorage.getItem("secondBase");
alert(playerName +" joue seconde base");
}
StorageMaster.getThird=function()
{
playerName=sessionStorage.getItem("thirdBase");
alert(playerName+ " est assign la troisime base");
}
</script>
/*323F14,EBD4B2,273A4B,D49756,790007 */
body {
background-color:#EBD4B2;
color:#273A4B;
}
h2 {
background-color:#273A4B;
color:#D49756;
text-align:center;
320
}
h3 {
color:#323F14;
}
fieldset {
color:#790007
}
#playerTable {
display:table;
}
#getPlayer {
display:table-cell;
width:250px;
}
</style>
<title>Stockage</title>
</head>
<body>
<article>
<header>
<hgroup>
<h2>Entraneur de baseball</h2>
<h3>Assignation des joueurs :</h3>
</hgroup>
</header>
<section>
<form name=players>
<input type=text name=firstBase placeholder="Premire base">
Premire base<br>
<input type=text name=secondBase placeholder="Deuxime base">
Deuxime base<br>
<input type=text name=thirdBase placeholder="Troisime base">
Troisime base<br>
<input type=button onClick="StorageMaster.setPositions()" value="Assignation
des positions">
</section>
<br>
<div ID="playerTable">
<section ID="getPlayer">
<fieldset>
<legend>Qui joue quoi ?</legend>
<input type=button onClick="StorageMaster.getFirst()" value="Qui est en
premire base ?">
<br>
<input type=button onClick="StorageMaster.getSecond()" value="Qui est en
deuxime base ?">
<br>
<input type=button onClick="StorageMaster.getThird()" value="Qui est en
troisime base ?">
<br>
</fieldset>
</form>
</section>
</div>
</body>
</html>
321
Quand on charge la page pour la premire fois, on voit un nouvel attribut HTML5
dans les champs de saisie de texte. Il sagit de textes de substitution qui sont cods de
la manire suivante :
< input type=text name=thirdBase placeholder="Troisime base">
Ds que lutilisateur commence saisir une valeur, ils disparaissent immdiatement.

Testez ce programme et saisissez trois valeurs dans les champs, puis cliquez sur le bouton
Assignation des positions. Ceci a pour effet de dnir les valeurs de stockage de session.
Pour retrouver les valeurs stockes, il suft de cliquer sur lun des boutons de la
zone Qui joue quoi ? . La gure 15.4 illustre le rsultat attendu.
Si vous tentez de rcuprer les donnes avant davoir cliqu sur le bouton
Assignation des positions, vous obtiendrez une valeur null dans la bote de dialogue.
Si vous quittez la page et y revenez, vous obtiendrez aussi des valeurs null tant que
vous naurez pas rassign les positions des joueurs.
Figure 15.4 Donnes stockes et affiches dans une bote de dialogue.
15.2.2 Stockage local

La principale diffrence entre le stockage de session et le stockage local est que le
stockage local conserve les donnes. Les utilisateurs peuvent quitter le site, teindre
leur ordinateur, revenir le lendemain, et les donnes seront toujours l. Le stockage
local fonctionne comme les cookies, mais certaines diffrences sont importantes :
Les cookies disposent dun trs faible espace de stockage, alors que le stockage
local a bien plus despace.
322
Les cookies sont retransmis automatiquement chaque requte du serveur, ce
qui nest pas le cas du stockage local ; cela signie que le stockage local demande
beaucoup moins de travail au serveur et au navigateur. Le stockage local nest
transmis que si lon en fait la demande.
Vous verrez que le stockage local et le stockage de session utilisent les mmes
mthodes pour dnir les valeurs et les rcuprer, si bien que vous navez apprendre
la syntaxe quune seule fois. Lexemple suivant (StockageLocal.html disponible dans
les chiers du chapitre) montre comment stocker, retrouver et effacer les donnes du
stockage local.
<!DOCTYPE HTML>
<html>
<head>
StorageMaster=new Object();
//Dfinition des valeurs
StorageMaster.setRegistration=function()
{
this.hobbyNow="";
this.topCount=document.loisirs.elements.length;
for(var count=0;count < this.topCount;count++)
{
if(document.loisirs.elements[count].checked)
{
this.hobbyNow=document.loisirs.hobby[count-2].value;
}
}
localStorage.setItem("uNom",document.loisirs.userName.value);
localStorage.setItem("uHobby",this.hobbyNow);
localStorage.setItem("uVille",document.loisirs.ville.value);
}
//Rcupration des valeurs
StorageMaster.getReg=function()
{
userProfile="Profil Utilisateur :\n";
nomNow=localStorage.getItem("uNom")+"\n";
hobbyNow=localStorage.getItem("uHobby")+"\n";
villeNow=localStorage.getItem("uVille")+"\n";
fileLength=localStorage.length + " lments dans le profil";
this.profile=userProfile+nomNow+hobbyNow+villeNow+fileLength;
document.getElementById("profile").innerHTML = this.profile;
}
StorageMaster.clearReg=function()
{
localStorage.clear();
alert("Stockage local effac");
}
</script>
/*962D3E,343642,979C9C,F2EBC7,348899 */
body {
background-color:#F2EBC7;
color:#962D3E;

}
h2 {
color:#979C9C;
}
fieldset {
color:#348899;
}
#hobbyTable {
display:table;
}
#getHobby {
display:table-cell;
width:275px;
}
#profile {
display:table-cell;
background-color: #979C9C;
padding: 3px;
width:150px;
font-size:14px;
}
</style>
<title>Stockage</title>
</head>
<body>
<article>
<header>
<h2>Enregistrement des loisirs</h2>
</header>
<section>
<form name="loisirs">
<input name=userName placeholder="Nom SVP">
Nom<br>
<div id="hobbyTable">
<section id="getHobby">
<fieldset>
<legend>Quel est votre loisir favori ?</legend>
<label>
<input type=radio name=hobby value="voyage">
Voyage</label>
<br>
<label>
<input type=radio name=hobby value="lecture">
Lecture</label>
<br>
<label>
<input type=radio name=hobby value="thtre">
Thtre</label>
<br>
<label>
<input type=radio name=hobby value="danse">
Danse</label>
<br>
<label>
323
324
<input type=radio name=hobby value="frisbee">

Frisbee</label>
<br>
</fieldset>
</section>
</div>
<input type=text name=ville placeholder="Ville">
Ville<br>
<input type=button onClick="StorageMaster.setRegistration()"
value="Enregistrer">
<input type=button onClick="StorageMaster.getReg()" value="Trouver infos">
<input type=button onClick="StorageMaster.clearReg()" value="Effacer les
donnes">
</form>
</section>
<br>
<pre id="profile"></pre>
</body>
</html>
On a ajout cet exemple lutilisation de boutons radio pour transmettre les

donnes stocker. Les boutons radio sont importants car ils facilitent le choix des
utilisateurs. Cela demande un peu plus de travail pour obtenir les informations
correctes des boutons radio et des cases cocher, mais cela illustre la maxime du
Web qui prtend que plus le dveloppeur travaille, plus lutilisateur a la tche facile.
Vous noterez aussi que le stockage local est li au navigateur, ce qui signie que
chaque navigateur a son propre stockage. Dans ces conditions, si vous stockez des
donnes en utilisant le navigateur Safari, le navigateur Chrome ne peut donc pas y
accder. La gure 15.5 illustre une page charge dans le navigateur Firefox qui a stock
des donnes grce au stockage local. Quand le mme programme est charg dans le
navigateur Opera et tente de rcuprer les donnes stockes, il obtient pour toute
rponse la valeur null.
Figure 15.5 Accs aux donnes du stockage local.
15.3 Ajout et ajustement dobjet sur des pages Web HTML5
325
Vous remarquerez aussi que quand on charge le programme la premire fois, on ne

voit pas la fentre de rsultat, mais juste une ligne grise sous les boutons. Ds que
lon clique sur le bouton Trouver infos, les informations apparaissent lemplacement
de la ligne grise. Ceci est luvre dun peu de code CSS3 et du DOM HTML5.
Commencez par dnir lID suivant dans le code CSS3 :
#profile {
display:table-cell;
background-color: #979C9C;
padding: 3px;
width:150px;
font-size:14px;
}
En utilisant la ligne JavaScript suivante :

document.getElementById("profile").innerHTML = this.profile;
les informations stockes dans this.profile sont envoyes la page Web o la

balise suivante a t place :
<pre id="profile"></pre>
Avant HTML5, envoyer une page Web des donnes de manire dynamique sans
recharger la page tait bien plus complexe. Cependant, pour certains programmes
comme Adobe Flash CS6, cest assez facile, comme nous allons le voir dans la
prochaine section.
15.3 AJOUT ET AJUSTEMENT DOBJET SUR DES PAGES

WEB HTML5
Quand la premire version de HTML est sortie, elle ne pouvait pas faire grandchose si bien que les dveloppeurs ont commenc utiliser des programmes comme
Java et Flash qui offraient des fonctionnalits absentes de HTML. La plupart de ces
restrictions ne sont plus dactualit aujourdhui grce HTML5, mais mme si HTML5
en fait beaucoup plus que les prcdentes versions de HTML, les dernires versions de
Flash et de Java sont toujours bien suprieures.
Il est prvisible quAdobe Flash CS6 et HTML5 vont travailler de concert, en
dpit du fait que liPhone et liPad ne prennent pas en charge le lecteur Flash. Lun
des grands mrites de Flash, cest quil assure de la cohrence entre les diffrentes
plateformes et les diffrents navigateurs. Mme si les diteurs de navigateurs ont des
versions diffrentes du DOM HTML et des ides diffrentes sur la meilleure faon
dimplmenter CSS et JavaScript, le plug-in Flash a longtemps assur une cohrence
326
de prsentation entre les plateformes et les navigateurs. Cest la raison pour laquelle
les concepteurs et les dveloppeurs ont utilis Flash.
15.3.1 Ajout dun objet

Pour vous donner une ide de la manire dont on incorpore un objet en HTML5, jai
cr une animation simple dtoile lante en Flash. La gure 15.6 illustre cette petite
animation dans la fentre de conception.
Figure 15.6 Animation Flash.
Vous pouvez placer lanimation sur une page Web de plusieurs manires diffrentes,
mais le plus simple est de la publier en Flash, ce qui gnre automatiquement une
page Web avec une rfrence au chier binaire qui est stock dans le format .swf.
Dans les navigateurs quips du plug-in Flash (ce qui est le cas de pratiquement tous
les navigateurs), le code suivant (EtoileFilante.html disponible dans les chiers du
chapitre) illustre lobjet empaquet dans une page HTML5.
<!DOCTYPE HTML>
<html>
<head>
<title>Etoile filante</title>
<style type="text/css" media="screen">
html, body { height:100%; background-color: #ffffff;}
body { margin:0; padding:0; overflow:hidden; }
#flashContent { width:100%; height:100%; }
</style>
</head>
<body>
<div id="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="300"
height="200" id="ShootingStar" align="middle">
<param name="movie" value="ShootingStar.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
15.3 Ajout et ajustement dobjet sur des pages Web HTML5
327
<param name="play" value="true" />

<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />

<object type="application/x-shockwave-flash" data="ShootingStar.swf"
width="300" height="200">
<param name="movie" value="ShootingStar.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />

<a href="http://www.adobe.com/go/getflash">
<img
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Get Adobe Flash player" />
</a>

</object>

</object>
</div>
</body>
</html>
15.3.2 Ajustement des objets

La balise <object> est llment cl HTML5. Plusieurs paramtres ont t inclus,
mais ils peuvent tous tre modis pour mieux correspondre votre site. Par exemple,
cest le blanc (#ffffff) qui a t dni comme couleur de fond, mais vous pouvez
en changer pour quelle saccommode votre site. De la mme manire, vous pouvez
modier tous les styles CSS que vous souhaitez.
Un autre programme, appel Flex ou Flash Builder, permet aussi de gnrer des
chiers .swf. Pour ajouter un chier .swf son propre code, le dveloppeur HTML5
na qu insrer le code gnr automatiquement par Flash et Flash Builder. En utilisant
un programme trs puissant nomm ActionScript 3.0, les dveloppeurs sont galement
capables de crer des programmes aussi performants que ceux qui sont crits dans des
langages aussi rputs que Java et C++.
328

Jespre que vous allez apprcier ce d qui met en scne la fois le nouvel objet
geolocation et le stockage local en HTML5. Comme vous lavez vu dans ce chapitre,
tout ce dont vous avez besoin pour placer une carte Google Map sur votre page
Web ce sont la latitude et la longitude de lemplacement. Lobjet geolocation
gnre ces valeurs pour vous en HTML5 en fonction de votre position. Si vous
avez un priphrique mobile, vous pouvez gnrer cette information dans plusieurs
emplacements diffrents. Sinon, vous pouvez aller sur un programme de cartographie
en ligne, saisir une adresse et obtenir ainsi les coordonnes de lemplacement souhait.
Voici le d que vous avez relever :
Rcuprez la longitude et la latitude de cinq emplacements diffrents.
Saisissez la longitude et la latitude dans un objet de stockage local (localStorage).
Dnissez cinq boutons qui appelleront un programme JavaScript qui chargera
cinq cartes la demande.

Fondamentalement, vous allez crer une page Web qui charge des cartes de
nimporte quel emplacement que vous aurez choisi. Vous ne devriez pas avoir besoin
de plus de JavaScript que le peu qui a t tudi dans ce chapitre.
Index
Symboles
paramtres 281
3GP 219
arcTo 275
A
a 137
aside 97, 165
attribut 13, 38
language 39
audio 201
accept-charset 292
application Magntophone 208
actualisation
boucle 205
automatique 92
contrles 202
addColorStop 284
conversion des chiers 210
address 97
cration de chiers 208
Adobe Device Central 224
effets sonores 210
Adobe Illustrator CS5 HTML5 Pack 196
formats 206
Adobe Media Encoder CS5 222
lecture automatique 202
afchage
MP3 206
sur des terminaux diffrents 27
OGG 206
align 51, 191
prchargement 203
alternate stylesheet 132
prise en charge par les navigateurs
altitude 316
205
analyse syntaxique 32
sons de transition 211
ancre
source 218
page 141
type 206
animation
WAV 206
Flash 326
WMA 208
anticlockwise 275
audio
apostrophe 39
balise 201
Apple Quick-Time Player 227
Apple Safari 26
source 206
a href 137
arc
330
auteur
identication 138
author 138
autocomplete 293
attribut de saisie 300
autoplay 202, 231
avec le prchargement 204
B
balise 12, Voir aussi lment
attribut 38
de commentaire 40
lment 38
fonctionnement 35
identication des parties 38
imbrication 43
valeur 38
bande passante
optimisation avec des iframes 170
base 90
beginPath 275
bezierCurveTo 275
_blank 144
blocs de texte
organisation 53
body 37, 96
boolean 249
bordure
tableau 118
boucle
audio 205
vido 230
bouton radio 303
br 49
Browserlab 23
mode Pelure doignon 24
C
cadre insr Voir iframe
calendrier
insertion dans un formulaire 307
calque 197
prservation 180
camscope
de taille rduite 226
standard 226
Camtasia 227
canvas 259
ajout dune ombre porte 271
ajout de couleurs 278
ajout de traits 268
arcs 281
attributs 262
cercle 284
chargement dune image 269
couleur de remplissage 264
courbes 280
cration de dessins complexes 274
dgrad 284
objet 263
ombre autout dune image 269
point de dpart 276
prparation du trac 263
quadrillage 262
ralisation de plusieurs dessins 265
simple 262
suppression de dessins 268
travail avec les ltres 272
capture vido 227
caractre
encodage 48
carte
afchage 313
Google Maps 311
sur un terminal mobile 315
case cocher 303
cellule 123
extension 123
cercle 284
chemin
relatif 110
Chrome 23
cite 139
331
Index
classe
cration en CSS3 64
CSS3 64
utilisation avec la balise <span> 65
clearRect 268
closePath 275, 277
code
analyse syntaxique 32
code de caractre 119
codec 207
dtermination 229
cohrence
navigation 162
color
type de saisie 299

colspan 123
commentaire 40
conseils dutilisation 42
suppression temporaire 41
compatibilit
chiers graphiques 33
compression
avec perte 179
concatnation 250
constante 253
conteneur 12
content 91
contexte de navigation 144
assignation 144
imbriqu 146
navigateur mobile 145
contexte de rendu 263, 270
paramtres 271
controls 202, 231
conversion
au format 3GP 222
au format WebM 222
chiers vido 222
couleur
avec des valeurs hexadcimales 75
HSL 72
mauvaise combinaison 82
modle 80
noms standard 70
palette 82
RGB 69
SVG 70
transparence 78
utilitaire Kuler 80
couleur de fond
propagation 58
tableau 120
createLinearGradient 284
CSS3 56
ajout de style 56
classe 64
commentaires 68
cration dun chier 60
dnition de tableau 114
exemple de texte styl 57
ID 64, 141
lignes de commentaires 60
pseudo-classes 164
D
datalist 15, 300, 302
sur priphrique mobile 302

date

type de saisie 299
dclaration
de type de document 48
dgrad 284
degr
conversion en radian 280
densit
pixels 61
dessin
assignation de couleurs 264
ralisation 264
utilisation dun quadrillage 276
dise 66
URL de remplacement 52
display 114
332
div
extension
afchage sous Windows 33
compatible Web 32
emploi de styles 100

utilisation 99
DOCTYPE 36
document
F
type 36
fentre
Document 256
ouverture partir dune page Web
Document Object Model 97, Voir DOM
245
DOM 160, 165, 243
feuille de styles
lments HTML5 246
ajout une page 56
fonctionnement avec JavaScript 244
alternative 132
style 259
changement dynamique 133
donnes
en fonction du terminal 60
stockage temporaire 248
externe 57, 59
donnes tabulaires 116
incorpore 57
drawImage 270
par dfaut 133
Dreamweaver
chier
afchage dcrans multiples 27
extensions 32
chier graphique 33
E
taille 182
chiers
cran
compatibles Web 35
rsolution 61
organisation 107
lment 13, 38
fieldset 306
organisation des niveaux 54
figcaption 105
stylage avec un proprit CSS3 56
gure
tableau 253
alignement avec sa lgende 105
lments
figure 105
abandonns en HTML5 20
fill 265
hrits des versions prcdentes de
HTML 16
fillRect 264, 267
nouveaux en HTML5 13
fillStyle 264
email 298
ltre
encodage
ajout une image 272
caractres 48
Firefox 22
enctype 292
first 140
endAngle 275
Flash 325
environnement
ajout dune animation sur une page
326
dtermination 195
Flash Builder 327
espace inscable 58
Flex 327
vnement 240
333
Index
fonction
anonyme 255
JavaScript 239
paramtre 239
footer 97
form 289
formnovalidate 292
formulaire
ajout 289
attribut id 293
attribut name 293
attributs gnraux 291
enfant 293
insertion dun slecteur de date 307
liste de suggestions 300
partie du DOM 296
rferencement des objets 296
regroupement dlments 306
saisie de nombres 291
saisie en dehors du conteneur 295
function 249
geolocation 311
proprits 316
utilisation avec Google Earth 317
gestionnaire dvnements 240
imbriqu 243
getElementById 313
GIF 179
anim 111, 179
modication de la taille des chiers
188
Google Chrome 23
Google Earth 317
Google Maps 311
Graphic Information Format Voir GIF
guillemet
utilisation 39
H
h
ajout de style 56
H.264 218, 219
head 36, 60, 89
height 232
canvas 263
hexadcimal
valeur de couleur 76
hgroup 54, 56
hover 84
hr 103
abus 104
href 48, 137
hreflang 137
HSL 72
HTML
versions prcdentes 16
HTML5
choix dun navigateur 21
chiers connexes 32
notication de lincompatibilit
lutilisateur 260
nouveaux lments 13
http-equiv 92
HyperText Markup Language
Voir HTML
I
icon 135
icne
servant de vignette 170
icne de lien 135
ID
ancre 141
CSS3 64, 66, 143
diffrences par rapport une classe
67
exemple dutilisation 67
IE9 Voir Internet Explorer 9
334
iframe 145, 169, 170

attributs nouveaux 148
page Web imbrique 147
priphrique mobile 148
sur des terminaux mobiles 173
image
bitmap 178
chargement 47
chargement avec href 170
chargement dans un iframe 170
compression 184
dtermination des dimensions 183
dimensions 184
format GIF 179
format JPEG 179
format PNG 180
format SVG 178
modication de la taille du chier
184
modication des dimensions 182
placement 191
positionnement du texte autour 51
rfrencement 107
taille 177, 182, 184
taille exible 193
vectorielle 178
imbrication
balises 43
img 47
index 140
indexation 91
Internet Explorer
niveaux de gris 189
Internet Explorer 9 27
iPad 27
iPhone 27
extension 94, 238

chier externe 94, 238
fonctions 239
intgration HTML5 237
jeu de caractres 60
dnition 48
Joint Photographic Experts Group
Voir JPEG
JPEG 179
184
justication 122
K
Kuler 80
partir dune couleur de base 81
partir dune image 81
L
lang 39
langue 39
last 140
latitude 311
length 253
lien 48, 131, 137
hirarchique 140
squentiel 140
vers une image 170
lineTo 275
link
attributs 131, 137
list

liste
J
JavaScript 93
appel dune page lie 160
dtermination du terminal utilis
193
sous-groupe 158
liste non ordonne 100
liste ordonne 100
LocationMaster 313
longitude 311
335
Index
M
mailto 138
media 137
MediaInfo 229
meta 48, 91
mots-cls 91
mtadonnes 89
mthode 254
ajout un objet 255
microphone
paramtrage 209
Microsoft Movie Maker 225
Miro Video Converter 222
moveTo 275
Mozilla Firefox 22
MP3 206
MPEG-4 218
N
name 141, 293
nav 143, 165
navigateur
compatibilit vido 221
compatible HTML5 21
dtection de lordinateur utilis 252
chiers lisibles 32
notication de lincompatibilit
HTML5 260
objets 255
prvisualisation 27
prise en charge de laudio 205
slection des feuilles de styles 133
test de compatibilit avec
Browserlab 23
navigation
concepts 151
globale 153
horizontale 163
menus droulants 157
pseudo-classes CSS3 164
stratgies de conception 152
utilisation dicnes 168

utilisation des couleurs 162
utilisation des listes 154
verticale 163
mcanimse HTML5 165
navigation 311
Navigator 256
navigator.appVersion 193
navigator.platform 252
&nbsp 58
new 254
next 140
novalidate 292
nuance de gris 189
number 249
number
type de saisie 299
O
object 249
object 327
objet 253
ajout sur une page Web 326
ajustement sur la page 327
cration 254
mthodes 254
proprits 254
OGG 206, 219
ol 100
ombre
proprits 271
onClick 241
ondbleclick 240
onFormInput 247
onLoad 240, 270
Opera 24
optgroup 158
diffrences entre les navigateurs 159
option 157, 158
organisation
en blocs 53
output 246
336
P
padding 120
page
actualisation automatique 92
liens 137
modication automatique 92
organisation 49
structure 50
page Web
chargement partiel 170
imbrication 146
intgration deffets sonores 212
intgration dune vido 218
lecture de chiers vido 219
organisation 90
organise avec des sections 98
sections 95
palette
intgration la page Web 82
paramtre 239
_parent 144
parsing Voir Analyse syntaxique
pattern

photo
clairage 187
Photo Booth 225
Photoshop 184
pixel
densit 61
pixellisation 182
placeholder 321
PNG 180
188
prservation des calques 180
POO 255
pop 253, 254
Portable Network Graphics Voir PNG
position
dtermination 312
poster 229
PPI 61
prchargement 135, 203
prefetch 135
prefetching Voir prchargement
preload 203, 230
paramtres 204, 230
prev 140
principes de base 47
programmation
multiplateforme 193
programmation oriente objets Voir POO
proprit
ajout un objet 254
Q
quadraticCurveTo 275
quadrillage 276
QuickTime 225
R
radian
diffrence avec un degr 280
range
type de saisie 299

rfrence
absolue 108
base 91
relative 108
Refresh 92, 111
rel
attribut 137
required 292
rsolution 61
densit des pixels 61
RGB 69
avec des entiers dcimaux 74
pourcentage 71
rowspan 123
337
Index
S
Safari 26
saisie
adresse lectronique 298
attributs des lments 300
semi-automatique 293
types 298
types des lments 299
URL 298
sandbox 148
saut de ligne
conditionnel 49
opportunit 49
Scalable Vector Graphics Voir SVG
script 94, 238
seamless 148
search
stockage
de session 318
local 321
types en HTML5 317
string 249
strokeRect 268
structuration
en niveaux hirarchiques 55
structure
page Web 50
style
ajout avec CSS3 56
en ligne 57, 63
syntaxe de la dnition 57
style 56, 57
stylesheet 133
SVG 70, 178
code spcique 197
chiers dynamiques 196
189
modication dynamique 197
type de saisie 299

section 95
but 97
lments 95
imbrication 97
select 157, 158
T
selectedIndex 160
table 114, 117
_self 144
table-cells 114
site Web
tableau 19, 252
indexation 91
bordures 118
organisation des chiers 107
complexe 123
page unique avec des Iframes 169
couleurs de fond 120
test de linterface par des utilisateurs
CSS3 113
153
diffrence avec une variable 252
sizes 137
lment 253
son Voir audio
lments de base 117
source
exemple pratique 125
attributs 228
lgende 117
balise 206, 218
mise en garde du W3C 113
type 206
stylage 118
span 58
tablette
src 228
afchage 27
srcdoc 148
target 144, 296
startAngle 275
td 117, 120, 122, 123
338
variable 248
tlphone
positions diffrentes 61
diffrence avec un tableau 252
problmes de rsolution dcran 61
mlange de diffrents types 250
terminal mobile
type de donnes 249
afchage 27
video
problmes dafchage 61
attributs 228
textarea 297
balise 218
texte
vido 218
habillage par une image 51
3GP 219
styl avec CSS3 57
boucle 230
TextEdit
contrle des dimensions 232
rglages des paramtres par dfaut 34
contrles 231
th 117, 120, 122, 123
conversion de chiers 222
this 255
cration pour le Web 225
Tidwell, Jennifer 151
dtermination du codec 229
time
Flash 218
type de saisie 299
format 4/3 223
title 137
formats pris en charge par les
_top 144
navigateurs 222
tr 117
H.264 218, 219
transparence 78
haute dnition 218
TSL Voir HSL
MPEG-4 218
Tufte, Edward 152
OGG 219
type 137
ratio dafchage 232
attribut 206
streaming 217
codec 207
WebM 219
type de document
vignette 170
dclaration 48
dans un iframe 146
type de donnes 249
U
ul 100
up 140
url 298
URL 48
remplacement par # 52
urlencoded 292
WAV 206
wbr 49
webcam 225
WebM 219
width 61, 232
canvas 263
WMA 208
V
valeur
emploi des guillemets 38
X
X11 70

HTML5 Poalummer 2 LED Ur Le Webdesign

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML5 Poalummer 2 LED Ur Le Webdesign

Hochgeladen von

Copyright:

Verfügbare Formate

HTML5

Cet ouvrage est la traduction

Toutes les marques cites dans cet ouvrage sont des

Couverture : Rachid Mara

Dunod, Paris, 2012, pour la traduction franaise

Table des matires

Premire partie Le langage du Web

Utilisation des balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Dunod Toute reproduction non autorise est un dlit.

Incorporation des nouveaux lments HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . .

Utilisation des balises des versions prcdentes de HTML . . . . . . . . . . . . . . . . . . .

Renoncement ou remplacement des balises abandonnes . . . . . . . . . . . . . . . . . . . .

Choix dun navigateur pour interprter HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . .

Microsoft Internet Explorer 9 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Prvisualisation dafchages diffrents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

HTML5 pour le webdesign

Chapitre 2 Balises HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Analyse syntaxique du code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

HTML5 et les chiers connexes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Fichiers fonctionnant avec le Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Fonctionnement des balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Balise HTML de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Description de la page avec des balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Identication des parties dune balise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Rle de la balise de commentaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Chapitre 3 Balises de texte et un peu de CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Un peu plus dorganisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Renforcement de la structure HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Ajout de style un texte laide de CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Stylage des lments HTML5 avec des proprits CSS3 . . . . . . . . . . . . . . . . . . . .

Cration de classes et dID CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Chapitre 4 Valeurs des couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Utilisation des noms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Pourcentages RGB et HSL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Paramtrage RGB avec des entiers dcimaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Paramtrage avec des valeurs hxadcimales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Ajout de transparence la couleur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Cration dun modle de couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

partir dune couleur de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

partir dune image. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Intgration de la palette de couleurs la page Web . . . . . . . . . . . . . . . . . . . . . . . .

Table des matires

Deuxime partie Conception de pages et de sites Web

Sommet dun document HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Dnition de la base de rfrence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Description du site avec des mtadonnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Savoir quand on a besoin dun script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Utiliser les sections dans sa conception. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Organisation des contenus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Paragraphes, divisions et listes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Regroupement sans fracture. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Organisation des chiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Organisation et rfrencement des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Chapitre 6 Afchage des donnes dans des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . .

Proprits de tableaux CSS3 pour HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Tableaux et donnes tabulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Bases dun tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Stylage dun tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Ajout de bordures avec CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Mise en vidence des donnes avec des couleurs de fond . . . . . . . . . . . . . . . . . . . .

Utilisation des attributs rowspan et colspan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Mise en pratique dans des tableaux. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Dunod Toute reproduction non autorise est un dlit.