HTML5 et CSS3 Michel Martin
Pearson Education France a apporté le plus grand soin à la réalisation de ce livre afin de vous fournir une information complète et fiable. Cependant, Pearson Education France n assume de responsabilités, ni pour son utilisation, ni pour les contrefaçons de brevets ou atteintes aux droits de tierces personnes qui pourraient résulter de cette utilisation. Les exemples ou les programmes présents dans cet ouvrage sont fournis pour illustrer les descrip tions théoriques. Ils ne sont en aucun cas destinés à une utilisation commerciale ou professionnelle. Pearson Education France ne pourra en aucun cas être tenu pour responsable des préjudices ou dommages de quelque nature que ce soit pouvant résulter de l utilisation de ces exemples ou programmes. Tous les noms de produits ou marques cités dans ce livre sont des marques déposées par leurs pro priétaires respectifs. Publié par Pearson Education France 47 bis, rue des Vinaigriers 75010 PARIS Tél. : 01 72 74 90 00 www.pearson.fr Avec la contribution technique de Ihèb Ben Romdhane Réalisation pao : Léa B ISBN : 978-2-7440-2477-1 Copyright 2011 Pearson Education France Tous droits réservés Aucune représentation ou reproduction, même partielle, autre que celles prévues à l article L. 122-5 2 et 3 a) du code de la propriété intellectuelle ne peut être faite sans l autorisation expresse de Pearson Education France ou, le cas échéant, sans le respect des modalités prévues à l article L. 122-10 dudit code.
Table des matières Introduction 1 Pourquoi HTML5 et CSS3? 3 Compatibilité avec les navigateurs 4 Principales différences entre HTML5 et ses prédécesseurs 6 À propos de l auteur 7 1 Les bases du HTML5/CSS3 9 Déclaration de type de document (DTD) 10 Syntaxes HTML et XHTML 11 Jeux de caractères 14 Définir la langue dans un document HTML5 15 Structure d un document HTML5 16 Valider du code HTML5 19 Styles CSS dans les balises 21 Feuille de styles interne 22 Feuille de styles externe 24 Éléments, sélecteurs, propriétés et valeurs CSS 25 Sélecteurs CSS 2.1 26 Sélecteurs CSS3 28 id ou class? 30 Pseudo-classes et pseudo-éléments 31 Unités CSS 34
IV HTML5 et CSS3 2 Ossature d un document HTML5 37 Nouvelle organisation des documents 37 Sections et niveaux de titre 44 hgroup 48 address 49 3 Mise en forme d un document HTML5 avec CSS3 51 Utiliser des polices exotiques 51 Polices libres de droits et multinavigateur 58 Couleur et image d arrière-plan 62 Gradient linéaire 64 Plusieurs couleurs dans un gradient linéaire 68 Gradient radial 71 Plusieurs couleurs dans un gradient radial 75 Utiliser un gradient pour masquer une image 77 Fonctions RGBA() et HSLA() 80 Regrouper des éléments 84 Positionner en flux 87 Mettre en page avec la propriété display 89 Rendu inline-block 93 Design à deux colonnes 96 Design à trois colonnes dont deux flottantes 99 Design à trois colonnes 102 Design à trois colonnes de même hauteur 103 Multicolonnage, la nouvelle vague CSS3 107 4 Textes et polices 113 Éléments redéfinis dans HTML5 113 Éléments nouveaux du HTML5 117
Table des matières V Afficher les caractères accentués correctement, première méthode 120 Afficher les caractères accentués correctement, seconde méthode 122 5 Regroupement du contenu 125 Nouvelles techniques de regroupement de contenu 125 Concept de boîte 126 Différents styles de listes HTML 128 Choisir le style d une liste 130 Des images à la place des puces 132 Des images centrées à la place des puces 134 Légendage 136 Texte non proportionnel 140 Citations 142 Rupture thématique 144 6 Les éléments interactifs 147 Versions résumée et étendue d un texte 147 Éléments éditables 148 Des menus en quelques lignes HTML5 150 7 Liens hypertextes 153 Différents types de liens hypertextes 153 Liens hypertextes en HTML5 154 Mettre en forme des liens hypertextes 156 8 Coins arrondis et ombres 159 Boîte à coins arrondis, ancienne méthode 159 Boîte à coins arrondis, méthode CSS3 162
VI HTML5 et CSS3 Mise en page CSS3 avec arrondis 167 Ombre portée autour d une image, ancienne technique 170 Ombrage CSS3 sur un élément 172 Ombrage de texte en CSS3 176 Ombrage de texte dans Internet Explorer 178 Effets sur du texte dans Internet Explorer 181 Mise en page CSS3 avec arrondis et ombrages 185 9 Transformations 2D 189 Translations 189 Rotations 192 Définir le centre de la transformation 195 Changements d échelle 198 Inclinaison 201 Matrices 203 10 Transitions 207 Modification progressive d une propriété 208 Animer une transformation 210 Déclencher une animation en JavaScript 212 11 Menus 215 Menu vertical élémentaire 215 Menu vertical graphique 217 Menu horizontal élémentaire avec display : inline-block 221 Menu horizontal avec border-radius 223 Menu déroulant 228 Menu déroulant avec effets 233
Table des matières VII 12 Les formulaires 237 Éléments dédiés aux formulaires 237 placeholder 244 autofocus 245 Validation de données 249 Labels implicites et explicites 252 Aligner les éléments d un formulaire 254 Arrondir les angles des éléments d un formulaire 256 Modifier l allure d un bouton avec un style 258 13 Les tableaux 263 Bordures autour des cellules 263 Bordures séparées ou fusionnées 266 Espacer les cellules 266 Ajouter une légende à un tableau 268 Mettre en forme des cellules vides 270 Mettre en forme des adjacents et des enfants 272 Habiller un tableau 274 Arrière-plan des cellules 277 Différencier les lignes paires des lignes impaires 279 Aligner dans les cellules 282 Accessibilité des tableaux complexes 284 Info-bulles dans un tableau 288 Mise en forme CSS3 sophistiquée 290
VIII HTML5 et CSS3 14 Événements et gestion événementielle 293 Bases de la gestion événementielle 293 Événements liés à la fenêtre 295 Événements liés au clavier 297 Événements liés à la souris 298 Événements liés aux formulaires 301 Événements liés aux médias 303 Stockage local de données 306 15 Éléments graphiques et multimédias 311 audio 311 video 314 canvas 318 Méthodes de tracé 2D dans un canevas 321 Images dans un canevas 327 Texte dans un canevas 332 Effets spéciaux dans un canevas 334 Graphiques vectoriels SVG 338 16 HTML5 avancé 341 Barres de progression 341 MathML et HTML5 345 WAI-ARIA et HTML5 349 Microformats 352 Media Queries 357 Pour aller plus loin 360 Index 361