HTML5 et CSS3 : maîtrisez les standards de la création de sites web

Auteur(s) :

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

Résumé

Conçu comme un manuel, ce livre passe en revue le HTML5.2, les feuilles de style avec l'avancée des CSS3 en termes de présentation des pages web et quelques éléments de JavaScript. Avec la version en ligne offerte. ©Electre 2020

Éditeur(s)
- Éditions ENI
Date
- C 2020
Notes
- La couv. porte en plus : "Version en ligne offerte ! pendant 1 an"
- Contient un "flashcode" permettant d'accéder à un contenu via Internet
Langues
- Français
Description matérielle
- 1 vol. (502 p.) : illustrations en noir et blanc ; 22 x 18 cm
Collections
- Ressources informatiques
Sujet(s)
ISBN
- 978-2-409-02756-7
Indice
- 681.226 HTML, CSS, XML, XSLT
Quatrième de couverture
- HTML5 et CSS3
  Maîtrisez les standards de la création de sites web
  Ce livre sur le langage HTML5 (en version 5.2 au moment de l'écriture) et les feuilles de styles CSS3, langages fondateurs dans la création de sites web, s'adresse aux développeurs qui souhaitent disposer des connaissances nécessaires pour créer et faire évoluer des sites web dans le respect des bonnes pratiques.
  Le livre est rédigé de façon à permettre un apprentissage progressif des éléments HTML et des propriétés CSS les plus couramment utilisés. Il n'a pas pour objectif de présenter l'ensemble des syntaxes mais uniquement celles couramment exploitées dans la création de sites web modernes. Les exemples de code présentés par l'auteur sont illustrés par des captures d'écran afin que le lecteur puisse se faire une idée de l'affichage obtenu.
  Dans la première partie du livre, l'auteur donne les informations nécessaires pour bien appréhender la conception de site web. Il présente les spécifications techniques du HTML et des CSS (les fameuses recommandations proposées par le W3C), le rôle essentiel des navigateurs et leur compatibilité avec les éléments HTML et les propriétés CSS, ainsi que les bonnes pratiques de conception de sites web pour obtenir des contenus sémantiques bien conçus.
  Dans la deuxième partie, le lecteur apprend à concevoir la structure des pages web avec des éléments HTML sémantiques dédiés. Il étudie ensuite les éléments qui permettent d'insérer du texte, des liens, des tableaux, des images, des formulaires, sans oublier des contenus multimédias. Un chapitre est consacré aux Microdata permettant d'obtenir un site sémantique et d'optimiser son référencement.
  La troisième partie permet au lecteur d'exploiter les CSS afin de mettre en forme et de mettre en page un site web. Il y apprend la syntaxe des CSS et des sélecteurs puis étudie les notions d'héritage et de cascade. Ensuite, il découvre comment mettre en forme chaque composant d'une page web : le texte, les images, les formulaires ainsi que les boîtes conteneurs. Les nouvelles techniques de mise en page avec les modules Flexbox et Grid sont détaillées dans un chapitre dédié et la conception des sites Responsive est également abordée. L'auteur termine avec l'étude des modules CSS dédiés aux animations pour dynamiser des pages web.
Tables des matières
- - HTML5 et CSS3
  - Maîtrisez les standards de la création de sites web
  - 2e édition
  - Avant-propos
  - Partie 1 : Aborder la conception des sites web
  - Chapitre 1-1
  - L'évolution des spécifications
  - 1. Une brève histoire du Web19
  - 2. Les travaux d'élaboration des spécifications20
  - 3. L'évolution du HTML21
  - 4. L'évolution des CSS22
  - Chapitre 1-2
  - Les navigateurs
  - 1. L'évolution des navigateurs25
  - 2. Les outils de développement26
  - 3. La compatibilité des navigateurs26
  - Chapitre 1-3
  - Les bonnes pratiques
  - 1. Séparer le contenu de la mise en forme29
  - 2. Utiliser une structure sémantique30
  - 3. Optimiser le code et organiser vos fichiers30
  - 4. Un exemple d'une page bien formée31
  - 5. Valider le code de vos pages34
  - Partie 2 : L'HTML 5.2
  - Chapitre 2-1
  - Les éléments HTML
  - 1. Bien utiliser le HTML35
  - 2. Les balises et les contenus36
  - 3. Les attributs des éléments37
  - 4. Le bon usage de la syntaxe38
  - 5. L'imbrication des éléments39
  - 6. Les commentaires40
  - Chapitre 2-2
  - La structure des pages
  - 1. La structure générale des pages web41
  - 2. La déclaration doctype42
  - 3. L'élément <html>42
  - 4. L'élément <head>42
  - 4.1 Les éléments enfant de l'en-tête42
  - 4.2 Les éléments <meta>43
  - 4.3 L'élément <title>44
  - 4.4 L'élément <link>44
  - 4.5 L'élément <style>44
  - 4.6 L'élément <script>45
  - 5. L'élément <body>45
  - 6. Les propriétés d'affichage45
  - 7. Exemple d'une structure simple46
  - Chapitre 2-3
  - Les conteneurs sémantiques
  - 1. Bien utiliser les conteneurs sémantiques47
  - 2. L'élément <div>48
  - 3. L'élément <span>48
  - 4. L'élément <header>49
  - 5. L'élément <footer>50
  - 6. L'élément <aside>50
  - 7. L'élément <nav>50
  - 8. L'élément <main>51
  - 9. L'élément <section>51
  - 10. L'élément <article>51
  - 11. L'affichage des éléments de structure51
  - 12. Deux exemples de structure sémantique de page52
  - 12.1 Une structure sémantique simple52
  - 12.2 Une structure sémantique plus élaborée53
  - 13. Un exemple de structure sémantique d'un article54
  - Chapitre 2-4
  - Les conteneurs de texte
  - 1. Bien utiliser les conteneurs de texte57
  - 2. Les attributs de langue et de direction du texte57
  - 3. Les titres58
  - 4. Les paragraphes61
  - 5. Les citations62
  - 6. Les listes63
  - 6.1 Les différents types de liste63
  - 6.2 Les listes non ordonnées64
  - 6.3 Les listes ordonnées65
  - 6.4 L'attribut de <li>67
  - 6.5 Les listes de définitions68
  - 7. Les adresses69
  - 8. Le texte préformaté70
  - 9. Les lignes horizontales71
  - Chapitre 2-5
  - La mise en forme sémantique du texte
  - 1. Utiliser une mise en forme sémantique73
  - 2. Insérer des caractères spéciaux73
  - 3. L'emphase forte75
  - 4. L'emphase simple76
  - 5. Mettre en gras et en italique76
  - 6. L'indice et l'exposant77
  - 7. Le souligné77
  - 8. Le barré78
  - 9. Réduire la taille de caractères79
  - 10. Les titres d'oeuvres et les citations courtes79
  - 11. Les insertions et suppressions80
  - 12. Le retour à la ligne81
  - 13. D'autres mises en forme sémantiques82
  - Chapitre 2-6
  - Les éléments d'interaction
  - 1. Afficher des détails83
  - 2. Utiliser une boîte de dialogue84
  - Chapitre 2-7
  - Les liens
  - 1. Insertion de liens pour lier les pages89
  - 2. La structure des liens89
  - 3. Les liens vers des pages90
  - 4. Les liens internes91
  - 5. Le contexte d'ouverture du lien93
  - 6. Les relations des liens94
  - 7. Les liens vers les messageries94
  - 8. Les liens de téléchargement95
  - 9. Des liens en image95
  - Chapitre 2-8
  - Les tableaux
  - 1. La bonne utilisation des tableaux97
  - 2. La structure des tableaux97
  - 3. Les lignes98
  - 4. Les cellules98
  - 5. La fusion des cellules100
  - 6. Le titre102
  - 7. Les groupes de colonnes103
  - 7.1 Regrouper des colonnes103
  - 7.2 Cibler des colonnes104
  - 8. Les tableaux structurés106
  - Chapitre 2-9
  - Les images
  - 1. Bien exploiter les images109
  - 2. Comprendre les formats de compression110
  - 2.1 Compresser les images110
  - 2.2 Le format GIF110
  - 2.3 Le format JPEG111
  - 2.4 Le format PNG111
  - 3. Insérer des images avec l'élément <img>112
  - 3.1 L'utilisation des images112
  - 3.2 L'attribut src112
  - 3.3 L'attribut alt113
  - 3.4 Les attributs width et height114
  - 3.5 Les attributs srcset et size114
  - 4. Insérer des illustrations avec l'élément < figure>116
  - 4.1 L'utilisation des illustrations116
  - 4.2 L'élément <figure>117
  - 4.3 L'élément <figcaption>117
  - Chapitre 2-10
  - Les formulaires
  - 1. La présence des formulaires dans les pages web121
  - 2. La structure des formulaires122
  - 2.1 Le formulaire122
  - 2.2 Les étiquettes123
  - 2.3 Grouper des champs124
  - 2.4 Les attributs communs125
  - 3. Les champs de texte126
  - 3.1 La saisie de texte126
  - 3.2 Les champs de texte simples126
  - 3.3 Les champs de texte pour les mots de passe126
  - 3.4 Les champs de texte multilignes127
  - 4. Les listes de valeurs128
  - 5. Les boutons radio à choix unique130
  - 6. Les cases à cocher à choix multiple131
  - 7. D'autres types de champs avec <input>132
  - 8. Les aides à la saisie132
  - 8.1 Les objectifs132
  - 8.2 La consigne de saisie133
  - 8.3 Activer un champ134
  - 8.4 L'auto-complétion134
  - 8.5 Rendre un champ obligatoire135
  - 8.6 Les saisies autorisées135
  - 9. Les boutons d'action138
  - 10. Un exemple complet de formulaire140
  - 10.1 Le code complet du formulaire140
  - 10.2 Le formulaire142
  - 10.3 Les boutons radio142
  - 10.4 Les champs de texte143
  - 10.5 Le champ numérique143
  - 10.6 Le champ d'adresse mail144
  - 10.7 Le champ de date145
  - 10.8 La liste déroulante146
  - 10.9 Les cases à cocher147
  - 10.l0 Les boutons d'action148
  - Chapitre 2-11
  - Le multimédia
  - 1. La présence du multimédia149
  - 2. Les formats et les codées149
  - 3. L'insertion d'une vidéo151
  - 3.1 L'élément <video>151
  - 3.2 La source de la vidéo151
  - 3.3 Les contrôles152
  - 3.4 Précharger la vidéo153
  - 3.5 Afficher une image d'ouverture154
  - 3.6 Spécifier les dimensions154
  - 3.7 Proposer plusieurs sources154
  - 3.8 Jouer en boucle et désactiver le son155
  - 4. L'insertion d'un fichier audio155
  - Chapitre 2-12
  - Le Web sémantique avec Microdata
  - 1. L'état des lieux du Web sémantique157
  - 2. L'objectif de Microdata158
  - 2.1 La norme et les schémas158
  - 2.2 Les attributs159
  - 3. Le schéma pour les personnes160
  - 3.1 Définir l'utilisation de Microdata avec itemseope160
  - 3.2 Indiquer le schéma utilisé avec itemtype160
  - 3.3 Spécifier les propriétés avec itemprop161
  - 4. Imbriquer des schémas162
  - 4.1 Pourquoi imbriquer des schémas ?162
  - 4.2 Les deux schémas nécessaires163
  - 4.3 Faire référence à un élément165
  - Partie 3 : Les CSS3
  - Chapitre 3-1
  - intégrer les styles CSS
  - 1. Le rôle des CSS167
  - 2. Les styles intégrés dans un élément HTML168
  - 3. Les styles définis dans la page169
  - 4. Les styles définis dans un fichier .css170
  - 5. Les styles importés172
  - Chapitre 3-2
  - Définir les styles CSS
  - 1. La structure d'une règle de style173
  - 1.1 La terminologie des CSS173
  - 1.2 Définir une règle de style174
  - 1.3 Les règles de nommage175
  - 2. Les unités de mesure176
  - 2.1 L'utilisation des unités de mesure176
  - 2.2 Les valeurs initiale et héritée176
  - 2.3 Les valeurs numériques177
  - 2.4 Les unités de longueur177
  - 2.5 Les valeurs calculées178
  - 3. La notation des couleurs179
  - 3.1 Utiliser les couleurs179
  - 3.2 La notation nominative179
  - 3.3 La notation hexadécimale180
  - 3.4 Les notations RGB et RGBA181
  - 3.5 Les notations HSL et HSLA182
  - 4. Les commentaires183
  - 5. Les sélecteurs184
  - 5.1 L'objectif des sélecteurs184
  - 5.2 Le sélecteur universel184
  - 5.3 Les sélecteurs de type185
  - 5.4 Les sélecteurs de classe185
  - 5.5 Les sélecteurs de classe de type186
  - 5.6 Les sélecteurs d'identification187
  - 5.7 Les sélecteurs d'attribut188
  - 5.8 Les sélecteurs de pseudo-classes190
  - 5.8.1 Utiliser les pseudo-classes190
  - 5.8.2 Les pseudo-classes dynamiques des liens190
  - 5.8.3 Les pseudo-classes dynamiques des actions utilisateurs192
  - 5.8.4 La pseudo-classe d'ancre193
  - 5.8.5 La pseudo-classe de langue196
  - 5.8.6 Les pseudo-classes d'état197
  - 5.8.7 Les pseudo-classes de structure198
  - 5.8.8 La pseudo-classe de négation208
  - 5.9 Les sélecteurs de pseudo-éléments210
  - 5.9.1 Le pseudo-élément de première ligne210
  - 5.9.2 Le pseudo-élément de première lettre211
  - 5.9.3 Les pseudo-éléments de contenu212
  - 5.10 Les combinaisons de sélecteurs214
  - 5.10.1 Les sélecteurs combinés214
  - 5.10.2 Les combinaisons descendantes214
  - 5.10.3 Les combinaisons d'enfants215
  - 5.10.4 Les combinaisons de frères immédiats217
  - 5.10.5 Les combinaisons de frères219
  - 6. L'application des styles220
  - 6.1 La notion d'héritage220
  - 6.2 La spécificité des sélecteurs222
  - 6.2.1 Le calcul de la spécificité des sélecteurs222
  - 6.2.2 Un exemple des spécificités des sélecteurs223
  - 6.3 La notion d'importance226
  - 6.4 La notion de cascade228
  - 6.4.1 Les priorités dans la cascade228
  - 6.4.2 Les conflits dans la cascade230
  - 6.5 L'ordre d'application des styles231
  - 7. La version 4 des sélecteurs231
  - Chapitre 3-3
  - Les styles pour les polices de caractères
  - 1. Le module CSS 3 pour les polices de caractères233
  - 2. Les polices de caractères233
  - 2.1 Choisir une police de caractères233
  - 2.2 Les familles de caractères génériques234
  - 2.3 Déclarer une police de caractères234
  - 2.4 Embarquer une police de caractères236
  - 3. La taille des caractères237
  - 3.1 Les tailles par défaut237
  - 3.2 Modifier la taille des caractères238
  - 4. La mise en forme des caractères243
  - 4.1 La graisse des caractères243
  - 4.2 L'italique des caractères245
  - 4.3 La chasse des caractères245
  - 4.4 Les petites capitales des caractères245
  - 5. La syntaxe raccourcie246
  - 6. Le module CSS 4 pour les polices de caractères247
  - Chapitre 3-4
  - Les styles pour le texte
  - 1. L'application des styles249
  - 2. La couleur du texte250
  - 3. Les décorations250
  - 3.1 Le module CSS250
  - 3.2 Les lignes pour le texte251
  - 3.3 Les lignes décoratives252
  - 3.4 Les ombres portées253
  - 4. La mise en forme du texte254
  - 4.1 Le module CSS254
  - 4.2 Le changement de casse255
  - 4.3 Les espaces entre les caractères et les mots256
  - 4.4 Les espaces blancs257
  - 4.5 Les alignements du texte259
  - 4.6 Le retrait de première ligne260
  - 4.7 La césure des fins de ligne261
  - 5. D'autres propriétés pour le texte263
  - 5.1 L'interligne263
  - 5.2 Le texte en excès264
  - 6. Le module CSS 4 pour la mise en forme du texte266
  - Chapitre 3-5
  - Les styles pour les conteneurs de texte
  - 1. Les titres, les paragraphes et les citations267
  - 2. Les listes267
  - 2.1 Les éléments des listes et les styles267
  - 2.2 Les styles d'énumération268
  - 2.3 L'énumération avec une image270
  - 2.4 La position du symbole271
  - 2.5 La syntaxe raccourcie273
  - 3. Les tableaux273
  - 3.1 Le texte dans les tableaux273
  - 3.2 La bordure du tableau274
  - 3.3 Les bordures des cellules275
  - 3.4 L'espace interne des cellules276
  - 3.5 Les cellules vides276
  - 3.6 Le titre du tableau277
  - 4. Les formulaires278
  - 4.1 La mise en forme du texte des champs278
  - 4.2 Les états actif et inactif des objets279
  - 4.3 Les champs obligatoires281
  - 4.4 La largeur des étiquettes et des champs283
  - 4.5 Mettre en forme le focus des champs284
  - Chapitre 3-6
  - Les styles pour les boîtes
  - 1. Le concept du modèle de boîte287
  - 2. Les affichages des boîtes288
  - 2.1 Les différents types d'affichage288
  - 2.2 L'affichage en bloc289
  - 2.3 L'affichage en ligne291
  - 2.4 Changer le type d'affichage292
  - 3. Les marges externes294
  - 3.1 La marge globale et les marges différenciées294
  - 3.2 Les syntaxes raccourcies296
  - 4. Les bordures296
  - 5. Les remplissages internes298
  - 6. La largeur et la hauteur des boîtes299
  - 6.1 Les dimensions du contenu299
  - 6.2 Les dimensions d'affichage301
  - 7. Les arrière-plans306
  - 7.1 La couleur d'arrière-plan306
  - 7.2 Les images d'arrière-plan307
  - 7.3 Les dégradés de couleurs310
  - 7.4 L'opacité des boîtes312
  - 8. Les coins arrondis des boîtes314
  - 9. Les ombres portées des boîtes315
  - Chapitre 3-7
  - La mise en page à l'aide des boîtes
  - 1. Les objectifs319
  - 2. Le positionnement des boîtes320
  - 2.1 Les positions des boîtes320
  - 2.2 La position relative321
  - 2.3 La position absolue322
  - 2.4 La position fixe324
  - 3. Le flottement des boîtes325
  - 3.1 Habiller une image325
  - 3.2 Interdire le flottement327
  - 4. La superposition des boîtes330
  - 5. La mise en page en affichage tableau332
  - 6. Le débordement des boîtes334
  - 7. La visibilité des boîtes337
  - Chapitre 3-8
  - Le Responsive Web Design
  - 1. Le développement responsive339
  - 2. Les requêtes de média339
  - 2.1 Les critères339
  - 2.2 La syntaxe341
  - 2.3 Les valeurs minimales et maximales341
  - 2.4 Les opérateurs logiques342
  - 3. La taille des écrans342
  - 4. Un exemple de mise en page responsive343
  - 4.1 Le site initial343
  - 4.2 Le site responsive346
  - Chapitre 3-9
  - Créer des mises en page modernes
  - 1. Les objectifs351
  - 2. Utiliser le module CSS Flexible Box Layout352
  - 2.1 La mise en page flexible352
  - 2.2 Les conteneurs flexibles353
  - 2.2.1 Le conteneur avec un affichage flex353
  - 2.2.2 Le conteneur avec un affichage inline-flex355
  - 2.3 Le flux des éléments enfants356
  - 2.3.1 Définir la direction356
  - 2.3.2 Contrôler le flux des éléments enfants en ligne359
  - 2.3.3 Contrôler le flux des éléments enfants en bloc361
  - 2.4 Aligner les éléments enfants flexibles363
  - 2.4.1 Les alignements sur l'axe principal horizontal363
  - 2.4.2 Les alignements sur l'axe principal vertical365
  - 2.4.3 Les alignements sur l'axe secondaire vertical369
  - 2.4.4 Les alignements sur l'axe secondaire horizontal372
  - 2.4.5 Les alignements et le passage à la ligne375
  - 2.5 Les propriétés des enfants flexibles379
  - 2.5.1 Appliquer des propriétés individuelles379
  - 2.5.2 Modifier l'ordre d'affichage des enfants379
  - 2.5.3 Modifier l'alignement des enfants381
  - 2.5.4 Autoriser l'agrandissement des enfants382
  - 2.5.5 Autoriser le rétrécissement des enfants384
  - 2.5.6 Définir la largeur des enfants386
  - 2.5.7 La syntaxe raccourcie des propriétés individuelles387
  - 2.6 Créer une mise en page plein écran et responsive388
  - 2.6.1 Les affichages obtenus388
  - 2.6.2 La structure flexible de la mise en page390
  - 2.6.3 Les propriétés pour l'élément <body>391
  - 2.6.4 Les propriétés pour l'élément <main>391
  - 2.6.5 Les propriétés CSS pour la mise en forme générale392
  - 2.6.6 La mise en page responsive393
  - 2.6.7 Le code complet de l'exemple394
  - 3. Utiliser le module CSS Grid Layout396
  - 3.1 La mise en page en grille396
  - 3.2 Connaître le vocabulaire des grilles397
  - 3.3 Comprendre la structure des grilles403
  - 3.3.1 Le conteneur de la grille403
  - 3.3.2 Déclarer des colonnes403
  - 3.3.3 Déclarer des lignes405
  - 3.3.4 Utiliser la syntaxe raccourcie406
  - 3.3.5 Appliquer d'autres unités407
  - 3.3.6 Insérer des gouttières408
  - 3.3.7 Mettre en forme le conteneur411
  - 3.4 Positionner les éléments dans la grille413
  - 3.4.1 Placer les enfants dans la grille413
  - 3.4.2 Placer les enfants dans les lignes417
  - 3.4.3 Exploiter la numérotation des lignes420
  - 3.4.4 Nommer les lignes de la grille423
  - 3.4.5 Nommer des zones de la grille424
  - 3.4.6 Aligner les cellules dans la grille428
  - 3.5 Créer une mise en page responsive avec une grille432
  - 3.5.1 Les affichages responsives432
  - 3.5.2 La structure HTML de la grille435
  - 3.5.3 Les styles CSS en Mobile First436
  - 3.5.4 La requête de média pour les écrans des tablettes439
  - 3.5.5 La requête de média pour les grands écrans442
  - 3.5.6 Le code complet de la grille responsive443
  - Chapitre 3-10
  - Les modules d'animation
  - 1. Les modules CSS447
  - 2. Les transformations448
  - 2.1 La fonction et le point de référence448
  - 2.2 Le déplacement450
  - 2.3 La mise à l'échelle451
  - 2.4 La rotation453
  - 2.5 La déformation453
  - 2.6 Appliquer toutes les transformations455
  - 3. Les transitions456
  - 3.1 Créer des transitions456
  - 3.2 Créer un déplacement horizontal457
  - 3.3 Créer un déplacement horizontal et vertical460
  - 4. Les animations461
  - 4.1 Créer des animations461
  - 4.2 Créer un déplacement infini463
  - 4.3 Créer un formulaire animé466
  - Chapitre 3-11
  - Des modules CSS pour les graphistes
  - 1. Des modules en devenir469
  - 2. Les masques469
  - 2.1 Le module CSS469
  - 2.2 Créer un masque470
  - 3. L'habillage du texte473
  - 3.1 Le module CSS473
  - 3.2 Créer un habillage473
  - Chapitre 3-12
  - Les feuilles de styles pour l'impression
  - 1. L'impression des pages web477
  - 2. Les feuilles de style spécifiques478
  - 2.1 Les liaisons aux fichiers CSS478
  - 2.2 Les requêtes de média478
  - 3. Les propriétés globales des pages479
  - 4. Les polices de caractères480
  - 5. Les éléments non imprimés480
  - 6. Les ruptures de lecture481
  - 6.1 Les sauts de page481
  - 6.2 Les lignes solidaires482
  - 6.3 Les veuves et les orphelines482
  - 7. Les liens hypertextes483
  - Index485
Origine de la notice:
- Electre