HTML5 et CSS3 : faites évoluer le design de vos sites web

Auteur(s) :

Aubry, Christophe (1963-....) Découvrir l'auteur

Résumé

Pour maîtriser les langages fondateurs que sont le HTML et le CSS, la nouvelle syntaxe, les nouveaux éléments de structure sémantique du HTML et les nouveaux sélecteurs, ainsi que la mise en forme du texte et les conteneurs de CSS3. Avec un accès gratuit à la version numérique. ©Electre 2019

Éditeur(s)
- Éditions ENI
Date
- cop. 2019
Notes
- Contient un "flashcode" permettant d'accéder à un contenu via Internet
Langues
- Français
Description matérielle
- 1 vol. (448 p.) : ill. ; 22 cm
Collections
- Objectif web
Sujet(s)
ISBN
- 978-2-409-01851-0
Indice
- 681.226 HTML, CSS, XML, XSLT
Quatrième de couverture
- HTML5 et CSS3
  Faites évoluer le design de vos sites web
  Pour les designers web, la conception des sites web passe par la maîtrise des langages fondateurs que sont l'HTML (HyperText Markup Language) et les CSS (Cascading Style Sheets). Les dernières versions de ces deux langages, d'HTML5 et les CSS3, vont faire évoluer la manière de concevoir vos sites web en vous offrant de nouvelles possibilités de structure, de mise en page et de mise en forme.
  Ce livre s'adresse aux concepteurs de sites web et aux designers web ayant déjà la connaissance de l'HTML 4 et des CSS 2.1, qui veulent faire évoluer leurs créations et créer des sites web intégrant ces nouveaux standards.
  Dans la partie consacrée à l'HTML5, vous étudierez la nouvelle syntaxe, les nouveaux éléments de structure sémantique (en-tête, section, navigation...) et les formulaires interactifs.
  Dans celle consacrée aux CSS3, vous apprendrez à utiliser les nouveaux sélecteurs, la mise en forme du texte et les conteneurs (ombre portée, coins arrondis, dégradés, bordures en motif...).
  Vous découvrirez le fort potentiel des nouveaux effets de transformation, de transition et d'animation et l'insertion native du multimédia (audio et vidéo).
  Un chapitre est consacré au design adaptatif (Responsive Web Design) qui permet d'adapter vos sites web aux différents supports de diffusion (écrans d'ordinateur, tablettes et smartphones).
  Enfin, nous aborderons une nouveauté des CSS3 : l'utilisation du module Flexbox qui va révolutionner la conception des sites web en facilitant la création de mises en page évoluées et responsives. Nous terminerons par des modules CSS en devenir et très prometteurs pour le design de vos pages web : la mise en page avec les grilles, l'utilisation des masques et l'habillage du texte par des images.
Tables des matières
- - HTML5 et CSS3
  - Faites évoluer le design de vos sites web
  - Introduction
  - A. La création de sites web18
  - B. Les langages18
  - C. Le livre18
  - 1. Pour les designers web18
  - 2. Le contenu18
  - Chapitre 1 : L'évolution du HTM et des CSS
  - A. Rapide historique de l'Internet22
  - B. L'évolution du HTML24
  - 1. Les travaux du W3C24
  - 2. Le HyperText Markup Language24
  - 3. L'évolution avec le XHTML25
  - 4. Les dissidents du WHATWG26
  - 5. l'avènement du HTML528
  - 6. Les documents HTML5 du W3C28
  - 7. Peut-on utiliser le HTML5 ?32
  - 8. Interprétation du HTML5 par les anciens navigateurs33
  - 9. Ce livre et l'évolution du HTML538
  - C. L'évolution des CSS39
  - 1. L'apparition des CSS39
  - 2. L'utilité des CSS39
  - 3. Les versions des CSS39
  - 4. L'avènement des CSS339
  - 5. L'arrivée des CSS440
  - Chapitre 2 : La nouvelle syntaxe HTML5
  - A. La doctype42
  - 1. La syntaxe en HTML4 et XHTML 1.042
  - 2. La syntaxe en HTML542
  - B. Le document HTML43
  - 1. La syntaxe en XHTML 1.043
  - 2. La syntaxe en HTML543
  - C. L'encodage des caractères43
  - 1. La syntaxe en HTML4 et XHTML 1.043
  - 2. La syntaxe en HTML543
  - D. Les scripts44
  - E. Les styles CSS44
  - F. La syntaxe des éléments44
  - 1. L'objectif44
  - 2. Les guillemets44
  - 3. Les éléments avec la seule balise d'ouverture45
  - 4. Les éléments à balise de fermeture optionnelle45
  - 5. La casse45
  - 6. Les attributs booléens45
  - 7. Les éléments HTML, HEAD et BODY46
  - 8. La syntaxe à adopter47
  - G. Les éléments obsolètes47
  - H. Les éléments redéfinis48
  - I. Les attributs obsolètes48
  - J. Les nouveaux éléments48
  - 1. L'élément <time>49
  - 2. L'élément <mark>49
  - 3. L'élément <meter>49
  - 4. Les éléments <details> et <summary>50
  - 5. L'élément <wbr>51
  - 6. L'élément <bdi>52
  - 7. L'élément <progress>52
  - 8. Les éléments liés aux langues asiatiques52
  - 9. Les éléments <figure> et <figcaption>53
  - 10. Les attributs srcset et sizes pour l'élément img53
  - 11. L'élément dialog55
  - K. Les modèles de contenu des éléments57
  - L. L'affichage des éléments58
  - 1. En HTML458
  - 2. En HTML559
  - Chapitre 3 : Les éléments de structure HTML562
  - A. Les éléments de structure en HTML462
  - 1. Les boîtes <div>62
  - 2. La « divite »63
  - 3. Un contenu non sémantique63
  - B. Les éléments de structure en HTML564
  - 1. Les nouveaux éléments de structure64
  - 2. L'élément <header>64
  - 3. L'élément <footer>64
  - 4. L'élément <nav>64
  - 5. L'élément <section>65
  - 6. L'élément <article>65
  - 7. L'élément <aside>65
  - 8. L'élément <main>65
  - 9. Imbrication des éléments <header> et <footer>66
  - 10. Les boîtes <div>67
  - C. L'attribut sémantique role67
  - D. Exemples de structure HTML569
  - 1. Une structure simple69
  - 2. Une structure plus élaborée70
  - 3. La structure d'un article71
  - E. Les techniques de mise en page71
  - Chapitre 4 : Évoluer vers les CSS3
  - A. L'état des lieux74
  - 1. L'évolution des modules74
  - 2. Afficher les spécifications78
  - B. Les préfixes des navigateurs79
  - 1. L'implémentation des propriétés79
  - 2. Les navigateurs et les CSS379
  - 3. Un préfixeur JavaScript80
  - C. L'interprétation des CSS3 par les navigateurs82
  - 1. Quelles propriétés utiliser ?82
  - 2. When can I use82
  - 3. css3test85
  - Chapitre 5 : Les nouveaux sélecteurs CSS3
  - A. Les sélecteurs CSS288
  - 1. La déclaration des CSS88
  - 2. Les sélecteurs88
  - 3. Les pseudo-classes89
  - 4. Les pseudo-éléments89
  - 5. Les groupes de sélecteurs89
  - B. Les nouveaux sélecteurs CSS390
  - C. Le sélecteur adjacent général90
  - D. Le sélecteur d'attribut91
  - 1. L'objectif91
  - 2. Des liens vers une adresse e-mail91
  - 3. Des liens de téléchargement92
  - E. La pseudo-classe d'ancre93
  - 1. L'objectif93
  - 2. La mise en place93
  - 3. L'utilisation94
  - F. Les pseudo-classes de structure95
  - 1. L'objectif95
  - 2. La racine de la page95
  - 3. Le dernier élément enfant95
  - 4. Les éléments enfants97
  - 5. Les derniers éléments enfants102
  - 6. Les premiers et derniers éléments d'un type donné102
  - 7. Les premiers éléments d'un type donné104
  - 8. Les éléments seuls104
  - 9. Les éléments seuls d'un type donné105
  - 10. Les éléments vides106
  - 11. Tous les éléments sauf celui spécifié106
  - Chapitre 6 : La mise en forme CSS3 des boîtes
  - A. Les nouvelles propriétés CSS3110
  - B. La largeur des boîtes110
  - 1. Avec les CSS 2.1110
  - 2. Avec les CSS3111
  - C. Le débordement du contenu112
  - D. Les couleurs d'arrière-plan114
  - 1. Le module des couleurs114
  - 2. Le mode TSL114
  - 3. Le mode TSL transparent115
  - 4. Le mode RVB transparent115
  - 5. Un éditeur RGBA en ligne116
  - 6. La transparence117
  - E. L'état des lieux des arrière-plans et des bordures117
  - F. Les coins arrondis118
  - 1. Des coins identiques118
  - 2. Des coins arrondis différents118
  - 3. Des ellipses dans les coins119
  - 4. Les générateurs en ligne121
  - G. Les bordures fantaisistes122
  - 1. La syntaxe du W3C122
  - 2. Un générateur en ligne124
  - H. Les ombres portées125
  - 1. L'état des lieux125
  - 2. Créer une ombre portée125
  - 3. Différents exemples d'ombres portées126
  - 4. Appliquer plusieurs ombres portées128
  - 5. Les générateurs en ligne129
  - I. Les dégradés131
  - 1. L'état des lieux131
  - 2. Les dégradés linéaires131
  - 3. Les dégradés radiaux133
  - 4. Les dégradés répétitifs134
  - 5. Les générateurs en ligne135
  - J. Les arrière-plans multiples138
  - 1. L'objectif138
  - 2. Un exemple simple139
  - K. Les autres propriétés d'arrière-plan140
  - 1. Les propriétés140
  - 2. L'origine d'une image141
  - 3. Rogner une image142
  - 4. La taille de l'arrière-plan144
  - L. Des générateurs CSS3 en ligne146
  - 1. L'objectif146
  - 2. WestCIV146
  - 3. CSS 3.0 Maker147
  - 4. CSS3 Playground148
  - 5. CSS3 Generator149
  - 6. Layer Style150
  - M. Exemple d'un tableau aux coins arrondis151
  - 1. L'objectif151
  - 2. La structure du tableau152
  - 3. La mise en forme du tableau153
  - 4. Les cellules du tableau154
  - 5. Les cellules d'en-tête154
  - 6. L'arrondi des cellules155
  - 7. Le survol des lignes156
  - N. Exemple d'ombre sur la page156
  - Chapitre 7 : Le HTML5 et les CSS3 pour le texte
  - A. Les éléments de texte obsolètes160
  - 1. La spécification HTML5160
  - 2. Les éléments inutilisés et confus160
  - 3. La mise en forme du texte160
  - B. Les éléments de texte redéfinis161
  - 1. La spécification HTML5161
  - 2. L'élément <b>162
  - 3. L'élément <strong>162
  - 4. L'élément <i>163
  - 5. L'élément <em>163
  - 6. L'élément <small>163
  - 7. L'élément <cite>163
  - 8. L'élément <dl>163
  - 9. L'élément <ol>164
  - 10. L'élément <hr>164
  - 11. L'élément <a>164
  - 12. L'élément <s>164
  - 13. L'élément <u>164
  - C. La mise en colonne du texte avec les CSS3165
  - D. La mise en forme du contenu avec les CSS3170
  - 1. Le module CSS3170
  - 2. Les propriétés reconnues170
  - 3. Les propriétés non reconnues171
  - 4. La coupure des mots171
  - 5. La césure172
  - 6. La césure et le débordement174
  - E. La décoration du texte avec les CSS3175
  - 1. Le module CSS175
  - 2. Les lignes de décoration176
  - 3. Les propriétés de ligne non reconnues176
  - 4. L'emphase du texte178
  - 5. L'ombre portée sur le texte178
  - F. Les polices de caractères avec les CSS3180
  - 1. Le module CSS180
  - 2. Les familles de caractères180
  - 3. La graisse des caractères180
  - 4. La largeur des caractères180
  - 5. Les styles des caractères180
  - 6. La taille des caractères181
  - 7. Ajuster la taille des caractères183
  - 8. Les polices de caractères184
  - 9. La règle @font-face185
  - 10. Les polices web en ligne187
  - 11. Les propriétés avancées190
  - Chapitre 8 : Le HTML5 et les CSS3 pour les formulaires
  - A. L'objectif192
  - B. Les méthodes d'envoi192
  - C. L'élément (...)form(...)192
  - D. Les groupes de champs192
  - E. Les nouveaux champs194
  - 1. L'affichage des nouveaux champs194
  - 2. Le champ pour les e-mails194
  - 3. Le champ pour les numéros de téléphone194
  - 4. Le champ pour les URL195
  - 5. Les champs pour les dates et les heures195
  - 6. Le champ pour les valeurs numériques196
  - 7. Les réglettes avec curseur197
  - 8. Les champs de recherche197
  - 9. Le champ de saisie suggérée197
  - 10. Le choix d'une couleur198
  - 11. Les clés publiques199
  - F. La validation des formulaires199
  - 1. La validation côté client199
  - 2. Rendre un champ obligatoire199
  - 3. Les saisies autorisées199
  - G. Les expressions régulières200
  - 1. Des lettres autorisées200
  - 2. Un intervalle de lettres autorisées201
  - 3. Des lettres autres que201
  - 4. La casse des lettres202
  - 5. La condition ou202
  - 6. Des mots autorisés202
  - 7. Autoriser des chiffres202
  - 8. Un nombre limité de caractères203
  - 9. Les saisies multiples203
  - 10. Les paramètres spéciaux204
  - H. Aider l'utilisateur dans le formulaire204
  - 1. L'aide à la saisie204
  - 2. Activer un champ205
  - 3. Le remplissage automatique205
  - 4. Redimensionner un champ206
  - I. Des pseudo-classes pour les formulaires207
  - 1. Les objectifs des pseudo-classes207
  - 2. Le formulaire et les styles207
  - 3. L'utilisation209
  - 4. Une autre pseudo-classe210
  - 5. Les champs requis et optionnels210
  - 6. La mise en forme du : focus211
  - J. La validation des saisies211
  - 1. Objectif211
  - 2. Le formulaire212
  - 3. La mise en forme du formulaire212
  - 4. Les champs non valides213
  - 5. Les messages d'erreur214
  - 6. Les champs valides216
  - 7. Les valeurs hors limites217
  - K. Un premier exemple simple de formulaire218
  - 1. L'objectif218
  - 2. La structure du formulaire219
  - 3. Les styles généraux220
  - 4. Le fond de la page220
  - 5. Le formulaire220
  - 6. Les étiquettes221
  - 7. Les champs de saisie222
  - 8. Le champ multiligne223
  - 9. Le focus sur les champs224
  - 10. Le bouton d'envoi224
  - L. Un deuxième exemple très sobre de formulaire225
  - 1. L'objectif225
  - 2. La structure initiale de formulaire226
  - 3. L'ombre portée du formulaire226
  - 4. L'effet de pointillés227
  - 5. Le titre du formulaire228
  - 6. Les filets décoratifs228
  - 7. Les champs de saisie229
  - 8. Le bouton de connexion231
  - 9. L'utilisation du bouton232
  - 10. Les autres liens232
  - 11. Le rendu final233
  - M. Un exemple interactif de formulaire233
  - 1. L'objectif233
  - 2. La structure initiale du formulaire235
  - 3. Les options supplémentaires235
  - 4. Le bouton d'envoi236
  - 5. Le message de confirmation236
  - 6. Les styles généraux236
  - 7. La mise en forme du formulaire237
  - 8. Les étiquettes238
  - 9. Les champs de saisie238
  - 10. La liste déroulante239
  - 11. Le bouton d'envoi240
  - 12. La gestion des options241
  - 13. L'affichage initial241
  - 14. Afficher les options242
  - 15. Masquer les options243
  - 16. Le message de confirmation243
  - N. Un dernier exemple élaboré de formulaire244
  - 1. L'objectif244
  - 2. La structure du formulaire246
  - 3. Les objets HTML5246
  - 4. Le code complet du formulaire248
  - 5. L'affichage brut250
  - 6. La mise en forme générale251
  - 7. La mise en forme du formulaire251
  - 8. La mise en forme des différentes parties252
  - 9. La mise en forme des items de liste254
  - 10. La mise en forme des étiquettes254
  - 11. Les champs de type <input>255
  - 12. Le bouton d'envoi du formulaire256
  - O. Créer des boutons avec des symboles257
  - 1. L'objectif257
  - 2. Le formulaire257
  - 3. Créer la classe des boutons258
  - 4. Le pseudo-élément : : before258
  - 5. Le contenu du pseudo-élément : : before259
  - 6. Appliquer les classes259
  - 7. L'affichage du formulaire260
  - 8. D'autres exemples similaires260
  - P. Les générateurs de boutons en ligne260
  - 1. L'objectif260
  - 2. CSS3 Button261
  - 3. CSS3 Button Generator262
  - 4. CSS Drive Button Generator263
  - Chapitre 9 : Les transformations CSS3
  - A. L'état des lieux et l'objectif266
  - B. La transformation266
  - 1. La propriété266
  - 2. Le point de référence266
  - C. Le déplacement267
  - 1. Sur les deux axes267
  - 2. Sur un seul axe268
  - D. La mise à l'échelle268
  - 1. La mise à l'échelle proportionnelle268
  - 2. La mise à l'échelle non proportionnelle269
  - 3. La mise à l'échelle dans une seule direction269
  - E. La rotation269
  - F. La déformation270
  - 1. La déformation sur les deux axes270
  - 2. La déformation sur un seul axe270
  - G. Appliquer toutes les transformations271
  - H. Les générateurs en ligne272
  - 1. CSS 3.0 Maker272
  - 2. CSS3 Generator272
  - 3. WestCIV273
  - I. Exemple d'un menu273
  - 1. L'objectif273
  - 2. La structure du menu273
  - 3. La mise en forme274
  - 4. L'affichage274
  - J. Exemple d'une galerie de Polaroid274
  - 1. L'objectif274
  - 2. La structure de la galerie275
  - 3. La mise en forme de la galerie275
  - 4. La mise en forme des photos276
  - 5. La transformation276
  - 6. L'affichage277
  - K. Exemple de relief sur une image278
  - 1. L'objectif278
  - 2. La photo279
  - 3. Les ombres sous la photo279
  - Chapitre 10 : Les transitions CSS3
  - A. L'état des lieux et l'objectif284
  - B. Mettre en place les transitions284
  - 1. Les transitions284
  - 2. Les propriétés CSS285
  - C. Effectuer une transition de déplacement287
  - 1. L'objectif287
  - 2. Le code nécessaire287
  - 3. Les propriétés de la transition287
  - 4. Le rendu288
  - D. Les autres propriétés des transitions288
  - 1. La cinétique288
  - 2. La démarrage de la transition290
  - 3. La syntaxe courte290
  - 4. Les transitions multiples290
  - E. Les générateurs en ligne292
  - 1. CSS3 Generator292
  - 2. CSS 3.0 Maker293
  - 3. Créer vos courbes de Bézier294
  - F. Exemple d'un menu interactif294
  - 1. L'objectif294
  - 2. La mise en forme du menu294
  - 3. Les transitions295
  - 4. L'affichage296
  - G. Exemple d'un diaporama interactif296
  - 1. L'objectif296
  - 2. La structure du diaporama296
  - 3. Les transformations297
  - 4. Les transitions298
  - 5. L'affichage299
  - H. Exemple de menu à tiroirs300
  - 1. L'objectif300
  - 2. La structure du menu301
  - 3. La mise en forme du menu302
  - 4. La mise en forme des tiroirs303
  - 5. L'affichage initial304
  - 6. Les transitions304
  - 7. L'affichage305
  - 8. Des menus « flashy »306
  - I. Exemple d'accordéon306
  - 1. L'objectif306
  - 2. La structure de l'accordéon306
  - 3. La mise en forme de l'accordéon307
  - 4. La mise en forme des zones d'affichage de l'accordéon308
  - 5. L'affichage308
  - Chapitre 11 : Les animations CSS3
  - A. L'état des lieux et l'objectif312
  - B. La construction d'une animation312
  - C. Un simple déplacement313
  - 1. L'objectif313
  - 2. La structure313
  - 3. L'animation314
  - 4. L'affichage315
  - D. Une rotation et une transparence316
  - 1. L'objectif316
  - 2. La structure316
  - 3. L'animation316
  - 4. L'affichage317
  - E. Un formulaire qui clignote317
  - 1. L'objectif317
  - 2. La structure du formulaire317
  - 3. La mise en forme318
  - 4. L'animation318
  - 5. L'affichage319
  - F. Une fenêtre modale319
  - 1. L'objectif319
  - 2. Le bouton319
  - 3. La fenêtre modale320
  - 4. Le bouton de fermeture321
  - 5. Masquer le corps de la page323
  - 6. L'animation à l'ouverture323
  - 7. Déclencher l'animation d'ouverture324
  - 8. Appliquer le masque324
  - 9. L'animation de fermeture324
  - 10. Déclencher l'animation de fermeture325
  - 11. Le code complet325
  - 12. L'affichage de la page328
  - Chapitre 12 : Le multimédia : audio et vidéo
  - A. L'état des lieux332
  - 1. Insérer du multimédia332
  - 2. Les formats et les codecs pour le Web332
  - B. Insérer de l'audio334
  - 1. L'élément audio334
  - 2. Les contrôles audio334
  - 3. L'apparence du lecteur audio334
  - 4. Les attributs pour l'audio335
  - 5. La source de l'audio335
  - 6. Créez vos contrôles336
  - 7. Les anciens navigateurs337
  - C. Insérer de la vidéo337
  - 1. L'élément vidéo337
  - 2. Les attributs pour la vidéo337
  - 3. L'apparence du lecteur vidéo338
  - 4. Les formats vidéo339
  - 5. Convertir les vidéos339
  - Chapitre 13 : Le design web adaptatif
  - A. L'état des lieux et l'objectif342
  - B. Les requêtes de média342
  - 1. L'objectif342
  - 2. Avec le HTML4 et les CSS 2.1342
  - 3. Les critères des requêtes de média CSS3343
  - 4. La syntaxe des requêtes de média344
  - 5. Les valeurs minimales et maximales344
  - 6. Les opérateurs logiques345
  - C. La taille des écrans345
  - 1. La problématique actuelle345
  - 2. La taille du viewport346
  - 3. Les zooms à l'écran348
  - 4. La taille et l'émulation des écrans349
  - D. Les grilles fluides355
  - 1. Les techniques355
  - 2. Un exemple simple356
  - 3. Un exemple d'un site simple358
  - 4. Réaliser un design adaptatif simple363
  - E. Des images adaptatives367
  - 1. Le débordement des images367
  - 2. Imposer une largeur maximale369
  - F. Créer du design adptatif371
  - 1. Les deux stratégies371
  - 2. Concevoir un site adaptatif372
  - 3. D'autres exemples de design adaptatif373
  - G. Le site Food Sense373
  - 1. Les affichages373
  - 2. La structure principale376
  - 3. Le viewport379
  - 4. L'affichage pour les grands écrans379
  - 5. L'affichage pour les tablettes381
  - 6. L'affichage pour les smartphones384
  - Chapitre 14 : La mise en page Flexbox
  - A. Les objectifs390
  - B. Les propriétés pour le conteneur Flexbox391
  - 1. Le conteneur391
  - 2. La direction de l'affichage392
  - 3. Le passage à la ligne ou à la colonne394
  - 4. La propriété en syntaxe courte396
  - 5. Les alignements et les centrages dans l'axe principal396
  - 6. Les alignements et les centrages dans l'axe secondaire398
  - 7. L'alignement et passage à la ligne401
  - C. Les propriétés pour les items Flexbox404
  - 1. L'ordre d'affichage404
  - 2. L'alignement d'un item Flexbox406
  - 3. L'agrandissement des items Flexbox407
  - 4. La réduction des items Flexbox408
  - 5. L'indication de taille des items410
  - 6. La propriété en syntaxe courte411
  - D. Réalisation d'une mise en page Flexbox412
  - 1. Les objectifs412
  - 2. Le conteneur principal414
  - 2. L'en-tête414
  - 4. La barre de navigation415
  - 5. La partie principale416
  - 6. Les sidebars416
  - 7. La partie centrale rédactionnelle418
  - 8. Le pied de page419
  - 9. Le code complet420
  - E. Réalisation d'une mise en page Flexbox responsive424
  - 1. Les objectifs424
  - 2. La règle @media424
  - 3. La barre de navigation424
  - 4. L'affichage de la partie principale425
  - 5. L'affichage dans les sidebars425
  - 6. Les règles CSS pour une page responsive427
  - Chapitre 15 : Des modules CSS3 en devenir
  - A. L'évolution des modules CSS430
  - B. La mise en page avec une grille430
  - C. Utiliser des masques433
  - D. Créer un habillage de texte436
  - Index441
Origine de la notice:
- Electre