HTML5 et CSS3 Faites évoluer le design de vos sites web (3e édition)

Transcription

1 Introduction A. La création de sites web 18 B. Les langages 18 C. Le livre Pour les designers web Le contenu 18 Chapitre 1 : L évolution du HTML et des CSS A. Rapide historique de l Internet 22 B. L évolution du HTML Les travaux du W3C Le HyperText Markup Language L évolution avec le XHTML Les dissidents du WHATWG L avènement du HTML Les documents HTML5 du W3C Peut-on utiliser le HTML5? Interprétation du HTML5 par les anciens navigateurs Ce livre et l évolution du HTML5 37 C. L évolution des CSS L apparition des CSS L utilité des CSS Les versions des CSS L avènement des CSS L arrivée des CSS4 39 1/21

2 Chapitre 2 : La nouvelle syntaxe HTML5 A. La doctype La syntaxe en HTML 4 et XHTML La syntaxe en HTML5 42 B. Le document HTML La syntaxe en XHTML La syntaxe en HTML5 43 C. L encodage des caractères La syntaxe en HTML4 et XHTML La syntaxe en HTML5 43 D. Les scripts 44 E. Les styles CSS 44 F. La syntaxe des éléments L objectif Les guillemets Les éléments avec la seule balise d ouverture Les éléments à balise de fermeture optionnelle La casse Les attributs booléens Les éléments HTML, HEAD et BODY La syntaxe à adopter 47 G. Les éléments obsolètes 47 H. Les éléments redéfinis 48 I. Les attributs obsolètes 48 2/21

3 J. Les nouveaux éléments L élément <time> L élément <mark> L élément <meter> Les éléments <details> et <summary> L élément <wbr> L élément <bdi> L élément <progress> Les éléments liés aux langues asiatiques Les éléments <figure> et <figcaption> 53 K. Les modèles de contenu des éléments 53 L. L affichage des éléments En HTML En HTML5 55 Chapitre 3 : Les éléments de structure HTML5 A. Les éléments de structure en HTML Les boîtes <div> La «divite» Un contenu non sémantique 59 B. Les éléments de structure en HTML Les nouveaux éléments de structure L élément <header> L élément <footer> L élément <nav> L élément <section> L élément <article> L élément <aside> 61 3/21

4 8. L élément <main> Les boîtes <div> 62 C. L attribut sémantique role 63 D. Exemples de structure HTML Une structure simple Une structure plus élaborée La structure d un article 66 E. Les techniques de mise en page 66 Chapitre 4 : Évoluer vers les CSS3 A. L état des lieux L évolution des modules Afficher les spécifications 73 B. Les préfixes des navigateurs L implémentation des propriétés Les navigateurs et les CSS Un préfixeur JavaScript 75 C. L interprétation des CSS3 par les navigateurs Quelles propriétés utiliser? When can I use css3test 79 Chapitre 5 : Les nouveaux sélecteurs CSS3 A. Les sélecteurs CSS L objectif 82 4/21

5 2. Les sélecteurs Les pseudo-classes Les pseudo-éléments Les groupes de sélecteurs 83 B. Les nouveaux sélecteurs CSS3 83 C. Le sélecteur adjacent général 84 D. Le sélecteur d attribut L objectif Des liens vers une adresse Des liens de téléchargement 86 E. La pseudo-classe d ancre L objectif La mise en place L utilisation 88 F. Les pseudo-classes de structure L objectif La racine de la page Le dernier élément enfant Les éléments enfants Les derniers éléments enfants Les premiers et derniers éléments d un type donné Les premiers éléments d un type donné Les éléments seuls Les éléments seuls d un type donné Les éléments vides Tous les éléments sauf celui spécifié 100 Chapitre 6 : La mise en forme CSS3 des boîtes 5/21

6 A. Les nouvelles propriétés CSS3 104 B. La largeur des boîtes Avec les CSS Avec les CSS3 105 C. Le débordement du contenu 106 D. Les couleurs d arrière-plan Le module des couleurs Le mode TSL Le mode TSL transparent Le mode RVB transparent Un éditeur RGBA en ligne La transparence 111 E. L état des lieux des arrière-plans et des bordures 111 F. Les coins arrondis Des coins identiques Des coins arrondis différents Des ellipses dans les coins Les générateurs en ligne 115 G. Les bordures fantaisistes La syntaxe du W3C Un générateur en ligne 118 H. Les ombres portées L état des lieux Créer une ombre portée Différents exemples d ombres portées Appliquer plusieurs ombres portées 122 6/21

7 5. Les générateurs en ligne 123 I. Les dégradés L état des lieux Les dégradés linéaires Les dégradés radiaux Les dégradés répétitifs Les générateurs en ligne 129 J. Les arrière-plans multiples L objectif Un exemple simple 133 K. Les autres propriétés d arrière-plan Les propriétés L origine d une image Rogner une image La taille de l arrière-plan 138 L. Des générateurs CSS3 en ligne L objectif WestCIV CSS 3.0 Maker CSS3 Generator CSS3 Playground CSS3 Generator Layer Style 145 M. Exemple d un tableau aux coins arrondis L objectif La structure du tableau La mise en forme du tableau Les cellules du tableau Les cellules d en-tête L arrondi des cellules 150 7/21

8 7. Le survol des lignes 151 N. Exemple d ombre sur la page 151 Chapitre 7 : Le HTML5 et les CSS3 pour le texte A. Les éléments de texte obsolètes La spécification HTML Les éléments inutilisés et confus La mise en forme du texte 154 B. Les éléments de texte redéfinis La spécification HTML L élément <b> L élément <strong> L élément <i> L élément <em> L élément <small> L élément <cite> L élément <dl> L élément <ol> L élément <hr> L élément <a> L'élément <s> L'élément <u> 158 C. La mise en colonne du texte avec les CSS3 158 D. La mise en forme du contenu avec les CSS Le module CSS Les propriétés reconnues Les propriétés non reconnues La coupure des mots 163 8/21

9 5. La césure La césure et le débordement 166 E. La décoration du texte avec les CSS Le module CSS Les lignes de décoration Les propriétés de ligne non reconnues L'emphase du texte L'ombre portée sur le texte 171 F. Les polices de caractères avec les CSS Le module CSS Les familles de caractères La graisse des caractères La largeur des caractères Les styles des caractères La taille des caractères Ajuster la taille des caractères Les polices de caractères La Les polices web en ligne Les propriétés avancées 183 G. La typographie avancée L état des lieux D autres propriétés 184 Chapitre 8 : Le HTML5 et les CSS3 pour les formulaires A. L objectif 186 B. Les méthodes d envoi 186 9/21

10 C. L élément <form> 186 D. Les nouveaux champs L affichage des nouveaux champs Le champ pour les s Le champ pour les numéros de téléphone Le champ pour les URL Les champs pour les dates et les heures Le champ pour les valeurs numériques Les réglettes avec curseur Les champs de recherche Le champ de saisie suggérée Le choix d une couleur Les clés publiques 192 E. La validation des formulaires La validation côté client Rendre un champ obligatoire Les saisies autorisées 192 F. Les expressions régulières Des lettres autorisées Un intervalle de lettres autorisées Des lettres autres que La casse des lettres La condition ou Des mots autorisés Autoriser des chiffres Un nombre limité de caractères Les saisies multiples Les paramètres spéciaux 197 G. Aider l utilisateur dans le formulaire L aide à la saisie /21

11 2. Activer un champ Le remplissage automatique Redimensionner un champ 199 H. Des pseudo-classes pour les formulaires Les objectifs des pseudo-classes Le formulaire et les styles L utilisation Une autre pseudo-classe Les champs requis et optionnels La mise en forme du :focus 204 I. La validation des saisies Objectif Le formulaire La mise en forme du formulaire Les champs non valides Les messages d erreur Les champs valides Les valeurs hors limites 210 J. Un premier exemple simple de formulaire L objectif La structure du formulaire Les styles généraux Le fond de la page Le formulaire Les étiquettes Les champs de saisie Le champ multiligne Le focus sur les champs Le bouton d envoi 217 K. Un deuxième exemple très sobre de formulaire L objectif /21

12 2. La structure initiale du formulaire L ombre portée du formulaire L effet de pointillés Le titre du formulaire Les filets décoratifs Les champs de saisie Le bouton de connexion L utilisation du bouton Les autres liens Le rendu final 226 L. Un exemple interactif de formulaire L objectif La structure initiale du formulaire Les options supplémentaires Le bouton d envoi Le message de confirmation Les styles généraux La mise en forme du formulaire Les étiquettes Les champs de saisie La liste déroulante Le bouton d envoi La gestion des options L affichage initial Afficher les options Masquer les options Le message de confirmation 236 M. Un dernier exemple élaboré de formulaire L objectif La structure du formulaire Les objets HTML Le code complet du formulaire L affichage brut /21

13 6. La mise en forme générale La mise en forme du formulaire La mise en forme des différentes parties La mise en forme des items de liste La mise en forme des étiquettes Les champs de type <input> Le bouton d envoi du formulaire 249 N. Créer des boutons avec des symboles L objectif Le formulaire Créer la classe des boutons Le pseudo-élément ::before Le contenu du pseudo-élément ::before Appliquer les classes L affichage du formulaire D autres exemples similaires 253 O. Les générateurs de boutons en ligne L objectif CSS3 Button CSS3 Button Generator CSS Drive Button Generator CSS Button Me 257 Chapitre 9 : Les transformations CSS3 A. L état des lieux et l objectif 260 B. La transformation La propriété Le point de référence /21

14 C. Le déplacement Sur les deux axes Sur un seul axe 262 D. La mise à l échelle La mise à l échelle proportionnelle La mise à l échelle non proportionnelle La mise à l échelle dans une seule direction 263 E. La rotation 263 F. La déformation La déformation sur les deux axes La déformation sur un seul axe 265 G. Appliquer toutes les transformations 265 H. Les générateurs en ligne CSS 3.0 Maker CSS3 Generator WestCIV 267 I. Exemple d un menu L objectif La structure du menu La mise en forme L affichage 268 J. Exemple d une galerie de Polaroid L objectif La structure de la galerie La mise en forme de la galerie La mise en forme des photos /21

15 5. La transformation L affichage 271 K. Exemple de relief sur une image L objectif La photo Les ombres sous la photo 273 Chapitre 10 : Les transitions CSS3 A. L état des lieux et l objectif 278 B. Mettre en place les transitions Les transitions Les propriétés CSS 279 C. Effectuer une transition de déplacement L objectif Le code nécessaire Les propriétés de la transition Le rendu 282 D. Les autres propriétés des transitions La cinétique Le démarrage de la transition La syntaxe courte Les transitions multiples 285 E. Les générateurs en ligne CSS3 Generator CSS 3.0 Maker Créer vos courbes de Bézier /21

16 F. Exemple d un menu interactif L objectif La mise en forme du menu Les transitions L affichage 290 G. Exemple d un diaporama interactif L objectif La structure du diaporama Les transformations Les transitions L affichage 294 H. Exemple de menu à tiroirs L objectif La structure du menu La mise en forme du menu La mise en forme des tiroirs L affichage initial Les transitions L affichage Des menus «flashy» 301 I. Exemple d accordéon L objectif La structure de l accordéon La mise en forme de l accordéon La mise en forme des zones d affichage de l accordéon L affichage 303 Chapitre 11 : Les animations CSS3 16/21

17 A. L état des lieux et l objectif 306 B. La construction d une animation 307 C. Un simple déplacement L objectif La structure L animation L affichage 310 D. Une rotation et une transparence L objectif La structure L animation L affichage 311 E. Un formulaire qui clignote L objectif La structure du formulaire La mise en forme L animation L affichage 313 F. Une fenêtre modale L objectif Le bouton La fenêtre modale Le bouton de fermeture Masquer le corps de la page L animation à l ouverture Déclencher l animation d ouverture Appliquer le masque L animation de fermeture /21

18 10. Déclencher l animation de fermeture Le code complet L affichage de la page 323 Chapitre 12 : Le multimédia : audio et vidéo A. L état des lieux 326 B. Insérer de l audio L élément audio Les contrôles audio L apparence du lecteur audio Les attributs pour l audio Les formats audio Créez vos contrôles Les anciens navigateurs 330 C. Insérer de la vidéo L élément video Les attributs pour la vidéo L apparence du lecteur vidéo Les formats vidéo Convertir les vidéos 333 Chapitre 13 : Le design web adaptatif A. L état des lieux et l objectif 336 B. Les requêtes de média L objectif Avec le HTML4 et les CSS Les critères des requêtes de média CSS /21

19 4. La syntaxe des requêtes de média Les valeurs minimales et maximales Les opérateurs logiques Des requêtes pour différents supports 340 C. La taille des écrans La problématique actuelle La taille du viewport Les zooms à l écran La taille et l'émulation des écrans 345 D. Les grilles fluides Les techniques Un exemple simple Un exemple d un site simple Réaliser un design adaptatif simple Des grilles adaptatives 362 E. Des images adaptatives Le débordement des images Imposer une largeur maximale 363 F. Créer du design adaptatif Les deux stratégies Concevoir un site adaptatif D autres exemples de design adaptatif 368 G. Le site Food Sense Les affichages La structure principale Le viewport L affichage pour les grands écrans L affichage pour les tablettes L affichage pour les smartphones /21

20 Chapitre 14 : La mise en page Flexbox A. Les objectifs 384 B. Les propriétés pour le conteneur Flexbox Le conteneur La direction de l'affichage Le passage à la ligne ou à la colonne La propriété en syntaxe courte Les alignements et les centrages dans l'axe principal Les alignements et les centrages dans l'axe secondaire L'alignement et passage à la ligne 395 C. Les propriétés pour les items Flexbox L'ordre d'affichage L'alignement d'un item Flexbox L'agrandissement des items Flexbox La réduction des items Flexbox L'indication de taille des items La propriété en syntaxe courte 405 D. Réalisation d'une mise en page Flexbox Les objectifs Le conteneur principal L'en-tête La barre de navigation La partie principale Les sidebars La partie centrale rédactionnelle Le pied de page Le code complet 414 E. Réalisation d'une mise en page Flexbox responsive Les objectifs /21

21 2. La La barre de navigation L'affichage de la partie principale L'affichage dans les sidebars Les règles CSS pour une page responsive 421 Chapitre 15 : Les autres modules CSS3 A. D'autres modules CSS3 424 B. Les modules terminés (Completed) Le module des couleurs Le module des noms de domaine Le module des styles en ligne 424 C. Les modules stables (Stable) Le module des règles conditionnelles Le module des unités Le module de la cascade et de l'héritage 425 D. Les modules en test (Testing) Le module pour la synthèse vocale Le module pour les types d'écriture Le module des formes d'habillage Le module des masques d'image Le module des compteurs Le module des partitions des pages Le module des compositions et des mélanges Le module de la syntaxe CSS Le module de l'interface utilisateur Le module des formes d'interface 426 Index /21