HTML 5 et CSS 3 : 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.

Éditeur(s)
- Edition ENI
Date
- 2024
Langues
- Français
Description matérielle
- 1 vol. (510 p.) : ill. ; 22 cm
Collections
- Ressources informatiques
Sujet(s)
- Feuilles de style en cascade
- HTML (langage de balisage)
ISBN
- 978-2-409-04450-2
Indice
- 681.226 HTML, CSS, XML, XSLT
Quatrième de couverture
- HTML5 et CSS 3
  Maîtrisez les standards de la création de sites web
  Ce livre sur le langage HTML5 et les feuilles de styles CSS 3, 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, 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 CSS 3
  - Maîtrisez les standards de la création de sites web
  - 3e édition
  - Christophe Aubry
  - 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'avènement du WHATWG22
  - 5. L'évolution des CSS24
  - 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 : Le HTML5
  - 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 <base>44
  - 4.5 L'élément <link>44
  - 4.6 L'élément <style>45
  - 4.7 L'élément <script> -45
  - 5. L'élément <body>46
  - 6. 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'élément <search>51
  - 12. L'affichage des éléments de structure52
  - 13. Deux exemples de structure sémantique de page52
  - 13.1 Une structure sémantique simple52
  - 13.2 Une structure sémantique plus élaborée53
  - 14. Un exemple de structure sémantique d'un article55
  - 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 listes64
  - 6.1 Les différents types de liste64
  - 6.2 Les listes non ordonnées64
  - 6.3 Les listes ordonnées65
  - 6.4 L'attribut <value> de <li>67
  - 6.5 Les listes de définitions68
  - 7. Les adresses69
  - 8. Le texte préformaté71
  - 9. Les données numériques72
  - 10. Les lignes horizontales73
  - Chapitre 2-5
  - La mise en forme sémantique du texte
  - 1. Utiliser une mise en forme sémantique75
  - 2. Insérer des caractères spéciaux75
  - 3. L'emphase forte77
  - 4. L'emphase simple78
  - 5. Mettre en gras et en italique79
  - 6. L'indice et l'exposant79
  - 7. Le souligné80
  - 8. Le barré81
  - 9. Réduire la taille de caractères82
  - 10. Les titres d'oeuvres et les citations courtes83
  - 11. Les insertions et suppressions84
  - 12. Le retour à la ligne85
  - 13. D'autres mises en forme sémantiques86
  - Chapitre 2-6
  - Les éléments d'interaction
  - 1. Afficher des détails87
  - 2. Utiliser une boîte de dialogue88
  - 3. Afficher une valeur dans un graphique91
  - 3.1 Avec une barre dans un intervalle91
  - 3.2 Avec une barre de progression92
  - Chapitre 2-7
  - Les liens
  - 1. Insertion de liens pour lier les pages93
  - 2. La structure des liens93
  - 3. Les liens vers des pages94
  - 4. Les liens internes95
  - 5. Le contexte d'ouverture du lien97
  - 6. Les relations des liens98
  - 7. Les liens vers les messageries98
  - 8. Les liens de téléchargement99
  - 9. Des liens en image99
  - 10. La mise en forme initiale100
  - Chapitre 2-8
  - Les tableaux
  - 1. La bonne utilisation des tableaux101
  - 2. La structure des tableaux101
  - 3. Les lignes102
  - 4. Les cellules102
  - 5. La fusion des cellules104
  - 6. Le titre106
  - 7. Les groupes de colonnes107
  - 7.1 Regrouper des colonnes107
  - 7.2 Cibler des colonnes108
  - 8. Les tableaux structurés110
  - 9. La mise en forme initiale112
  - Chapitre 2-9
  - Les images
  - 1. Bien exploiter les images113
  - 2. Comprendre les formats de compression114
  - 2.1 Compresser les images114
  - 2.2 Le format GIF114
  - 2.3 Le format JPEG115
  - 2.4 Le format PNG115
  - 3. Insérer des images avec l'élément <img>116
  - 3.1 L'utilisation des images116
  - 3.2 L'attribut src116
  - 3.3 L'attribut ait117
  - 3.4 Les attributs width et height118
  - 3.5 Les attributs srcset et size118
  - 4. Insérer des illustrations avec l'élément <figure>120
  - 4.1 L'utilisation des illustrations120
  - 4.2 L'élément <figure>120
  - 4.3 L'élément <figcaption>121
  - 4.4 La mise en forme initiale123
  - Chapitre 2-10
  - Les formulaires
  - 1. La présence des formulaires dans les pages web125
  - 2. La structure des formulaires126
  - 2.1 Le formulaire126
  - 2.2 Les étiquettes127
  - 2.3 Grouper des champs128
  - 2.4 Les attributs communs129
  - 3. Les champs de texte130
  - 3.1 La saisie de texte130
  - 3.2 Les champs de texte simples130
  - 3.3 Les champs de texte pour les mots de passe130
  - 3.4 Les champs de texte multilignes131
  - 4. Les listes de valeurs132
  - 5. Les boutons radio à choix unique134
  - 6. Les cases à cocher à choix multiple135
  - 7. D'autres types de champs avec <input>136
  - 8. Les aides à la saisie137
  - 8.1 Les objectifs137
  - 8.2 La consigne de saisie137
  - 8.3 Activer un champ138
  - 8.4 L'auto-complétion138
  - 8.5 Rendre un champ obligatoire139
  - 8.6 Les saisies autorisées139
  - 9. Les boutons d'action142
  - 10. Un exemple complet de formulaire144
  - 10.1 Le code complet du formulaire144
  - 10.2 Le formulaire146
  - 10.3 Les boutons radio146
  - 10.4 Les champs de texte147
  - 10.5 Le champ numérique147
  - 10.6 Le champ d'adresse mail148
  - 10.7 Le champ de date148
  - 10.8 La liste déroulante150
  - 10.9 Les cases à cocher151
  - 10.10 Les boutons d'action151
  - 11. Les propriétés initiales d'affichage des éléments des formulaires152
  - Chapitre 2-11
  - Le multimédia
  - 1. La présence du multimédia153
  - 2. Les formats et les codecs153
  - 3. L'insertion d'une vidéo155
  - 3.1 L'élément <video>155
  - 3.2 La source de la vidéo155
  - 3.3 Les contrôles156
  - 3.4 Précharger la vidéo157
  - 3.5 Afficher une image d'ouverture158
  - 3.6 Spécifier les dimensions158
  - 3.7 Proposer plusieurs sources158
  - 3.8 Jouer en boucle et désactiver le son159
  - 4. L'insertion d'un fichier audio159
  - Chapitre 2-12
  - Le Web sémantique avec Microdata
  - 1. L'état des lieux du Web sémantique161
  - 2. L'objectif de Microdata162
  - 2.1 La norme et les schémas162
  - 2.2 Les attributs163
  - 3. Le schéma pour les personnes164
  - 3.1 Définir l'utilisation de Microdata avec itemscope164
  - 3.2 Indiquer le schéma utilisé avec itemtype164
  - 3.3 Spécifier les propriétés avec itemprop165
  - 4. Imbriquer des schémas166
  - 4.1 Pourquoi imbriquer des schémas ?166
  - 4.2 Les deux schémas nécessaires167
  - 4.3 Faire référence à un élément169
  - Partie 3 : Les CSS 3
  - Chapitre 3-1
  - Intégrer les styles CSS
  - 1. Le rôle des CSS171
  - 2. Les styles intégrés dans un élément HTML172
  - 3. Les styles définis dans la page173
  - 4. Les styles définis dans un fichier .css174
  - 5. Les styles importés176
  - Chapitre 3-2
  - Définir les styles CSS
  - 1. La structure d'une règle de style177
  - 1.1 La terminologie des CSS177
  - 1.2 Définir une règle de style178
  - 1.3 Les règles de nommage179
  - 2. Les unités de mesure180
  - 2.1 L'utilisation des unités de mesure180
  - 2.2 Les valeurs initiale et héritée180
  - 2.3 Les valeurs numériques181
  - 2.4 Les unités de longueur181
  - 2.5 Les valeurs calculées183
  - 3. La notation des couleurs183
  - 3.1 Utiliser les couleurs183
  - 3.2 La notation nominative184
  - 3.3 La notation hexadécimale185
  - 3.4 Les notations RGB et RGBA186
  - 3.5 Les notations HSL et HSLA187
  - 4. Les commentaires188
  - 5. Les sélecteurs188
  - 5.1 L'objectif des sélecteurs188
  - 5.2 Le sélecteur universel189
  - 5.3 Les sélecteurs de type189
  - 5.4 Les sélecteurs de classe190
  - 5.5 Les sélecteurs de classe de type191
  - 5.6 Les sélecteurs d'identification192
  - 5.7 Les sélecteurs d'attribut192
  - 5.8 Les sélecteurs de pseudo-classes194
  - 5.8.1 Utiliser les pseudo-classes194
  - 5.8.2 Les pseudo-classes dynamiques des liens195
  - 5.8.3 Les pseudo-classes dynamiques des actions utilisateurs197
  - 5.8.4 La pseudo-classe d'ancre198
  - 5.8.5 La pseudo-classe de langue201
  - 5.8.6 Les pseudo-classes d'état202
  - 5.8.7 Les pseudo-classes de structure203
  - 5.8.8 La pseudo-classe de négation213
  - 5.9 Les sélecteurs de pseudo-éléments215
  - 5.9.1 Le pseudo-élément de première ligne215
  - 5.9.2 Le pseudo-élément de première lettre216
  - 5.9.3 Les pseudo-éléments de contenu217
  - 5.10 Les combinaisons de sélecteurs219
  - 5.10.1 Les sélecteurs combinés219
  - 5.10.2 Les combinaisons descendantes219
  - 5.10.3 Les combinaisons d'enfants220
  - 5.10.4 Les combinaisons de frères immédiats222
  - 5.10.5 Les combinaisons de frères224
  - 6. L'application des styles225
  - 6.1 La notion d'héritage225
  - 6.2 La spécificité des sélecteurs227
  - 6.2.1 Le calcul de la spécificité des sélecteurs227
  - 6.2.2 Un exemple des spécificités des sélecteurs228
  - 6.3 La notion d'importance231
  - 6.4 La notion de cascade233
  - 6.4.1 Les priorités dans la cascade233
  - 6.4.2 Les conflits dans la cascade235
  - 6.5 L'ordre d'application des styles236
  - 7. La version 4 des sélecteurs236
  - Chapitre 3-3
  - Les styles pour les polices de caractères
  - 1. Le module CSS 3 pour les polices de caractères239
  - 2. Les polices de caractères239
  - 2.1 Choisir une police de caractères239
  - 2.2 Les familles de caractères génériques240
  - 2.3 Déclarer une police de caractères240
  - 2.4 Embarquer une police de caractères242
  - 3. La taille des caractères244
  - 3.1 Les tailles par défaut244
  - 3.2 Modifier la taille des caractères244
  - 4. La mise en forme des caractères250
  - 4.1 La graisse des caractères250
  - 4.2 L'italique des caractères ...251
  - 4.3 La chasse des caractères252
  - 4.4 Les petites capitales des caractères252
  - 5. La syntaxe raccourcie253
  - 6. Le module CSS 4 pour les polices de caractères254
  - Chapitre 3-4
  - Les styles pour le texte
  - 1. L'application des styles255
  - 2. La couleur du texte256
  - 3. Les décorations256
  - 3.1 Le module CSS256
  - 3.2 Les lignes pour le texte257
  - 3.3 Les lignes décoratives258
  - 3.4 Les ombres portées259
  - 4. La mise en forme du texte260
  - 4.1 Le module CSS260
  - 4.2 Le changement de casse261
  - 4.3 Les espaces entre les caractères et les mots262
  - 4.4 Les espaces blancs263
  - 4.5 Les alignements du texte265
  - 4.6 Le retrait de première ligne266
  - 4.7 La césure des fins de ligne267
  - 5. D'autres propriétés pour le texte269
  - 5.1 L'interligne269
  - 5.2 Le texte en excès270
  - 6. Le module CSS 4 pour la mise en forme du texte272
  - Chapitre 3-5
  - Les styles pour les conteneurs de texte
  - 1. Les titres, les paragraphes et les citations273
  - 2. Les listes273
  - 2.1 Les éléments des listes et les styles273
  - 2.2 Les styles d'énumération274
  - 2.3 L'énumération avec une image276
  - 2.4 La position du symbole277
  - 2.5 La syntaxe raccourcie279
  - 3. Les tableaux279
  - 3.1 Le texte dans les tableaux279
  - 3.2 La bordure du tableau280
  - 3.3 Les bordures des cellules281
  - 3.4 L'espace interne des cellules282
  - 3.5 Les cellules vides282
  - 3.6 Le titre du tableau283
  - 4. Les formulaires284
  - 4.1 La mise en forme du texte des champs284
  - 4.2 Les états actif et inactif des objets285
  - 4.3 Les champs obligatoires287
  - 4.4 La largeur des étiquettes et des champs289
  - 4.5 Mettre en forme le focus des champs290
  - Chapitre 3-6
  - Les styles pour les boîtes
  - 1. Le concept du modèle de boîte293
  - 2. Les affichages des boîtes294
  - 2.1 Les différents types d'affichage294
  - 2.2 L'affichage en bloc296
  - 2.3 L'affichage en ligne297
  - 2.4 Changer le type d'affichage298
  - 3. Les marges externes301
  - 3.1 La marge globale et les marges différenciées301
  - 3.2 Les syntaxes raccourcies302
  - 4. Les bordures303
  - 5. Les remplissages internes304
  - 6. La largeur et la hauteur des boîtes305
  - 6.1 Les dimensions du contenu305
  - 6.2 Les dimensions d'affichage307
  - 7. Les arrière-plans312
  - 7.1 La couleur d'arrière-plan312
  - 7.2 Les images d'arrière-plan313
  - 7.3 Les dégradés de couleurs316
  - 7.4 L'opacité des boîtes318
  - 8. Les coins arrondis des boîtes320
  - 9. Les ombres portées des boîtes321
  - Chapitre 3-7
  - La mise en page à l'aide des boîtes
  - 1. Les objectifs325
  - 2. Le positionnement des boîtes326
  - 2.1 Les positions des boîtes326
  - 2.2 La position relative327
  - 2.3 La position absolue328
  - 2.4 La position fixe330
  - 3. Le flottement des boîtes331
  - 3.1 Habiller une image331
  - 3.2 Interdire le flottement333
  - 4. La superposition des boîtes336
  - 5. La mise en page en affichage tableau338
  - 6. Le débordement des boîtes340
  - 7. La visibilité des boîtes343
  - Chapitre 3-8
  - Le Responsive Web Design
  - 1. Le développement responsive345
  - 2. Les requêtes de média345
  - 2.1 Les critères345
  - 2.2 La syntaxe347
  - 2.3 Les valeurs minimales et maximales347
  - 2.4 Les opérateurs logiques348
  - 3. La taille des écrans348
  - 4. Un exemple de mise en page responsive349
  - 4.1 Le site initial349
  - 4.2 Le site responsive352
  - Chapitre 3-9
  - Créer des mises en page modernes
  - 1. Les objectifs357
  - 2. Utiliser le module CSS Flexible Box Layout358
  - 2.1 La mise en page flexible358
  - 2.2 Les conteneurs flexibles359
  - 2.2.1 Le conteneur avec un affichage flex359
  - 2.2.2 Le conteneur avec un affichage inline-flex361
  - 2.3 Le flux des éléments enfants362
  - 2.3.1 Définir la direction362
  - 2.3.2 Contrôler le flux des éléments enfants en ligne365
  - 2.3.3 Contrôler le flux des éléments enfants en bloc367
  - 2.4 Aligner les éléments enfants flexibles369
  - 2.4.1 Les alignements sur l'axe principal horizontal369
  - 2.4.2 Les alignements sur l'axe principal vertical371
  - 2.4.3 Les alignements sur l'axe secondaire vertical375
  - 2.4.4 Les alignements sur l'axe secondaire horizontal378
  - 2.4.5 Les alignements et le passage à la ligne381
  - 2.5 Les propriétés des enfants flexibles385
  - 2.5.1 Appliquer des propriétés individuelles385
  - 2.5.2 Modifier l'ordre d'affichage des enfants385
  - 2.5.3 Modifier l'alignement des enfants387
  - 2.5.4 Autoriser l'agrandissement des enfants388
  - 2.5.5 Autoriser le rétrécissement des enfants390
  - 2.5.6 Définir la largeur des enfants392
  - 2.5.7 La syntaxe raccourcie des propriétés individuelles393
  - 2.6 Créer une mise en page plein écran et responsive394
  - 2.6.1 Les affichages obtenus394
  - 2.6.2 La structure flexible de la mise en page396
  - 2.6.3 Les propriétés pour l'élément <body>397
  - 2.6.4 Les propriétés pour l'élément <main>397
  - 2.6.5 Les propriétés CSS pour la mise en forme générale398
  - 2.6.6 La mise en page responsive399
  - 2.6.7 Le code complet de l'exemple400
  - 3. Utiliser le module CSS Grid Layout402
  - 3.1 La mise en page en grille402
  - 3.2 Connaître le vocabulaire des grilles403
  - 3.3 Comprendre la structure des grilles410
  - 3.3.1 Le conteneur de la grille410
  - 3.3.2 Déclarer des colonnes410
  - 3.3.3 Déclarer des lignes411
  - 3.3.4 Utiliser la syntaxe raccourcie413
  - 3.3.5 Appliquer d'autres unités413
  - 3.3.6 Insérer des gouttières415
  - 3.3.7 Mettre en forme le conteneur418
  - 3.4 Positionner les éléments dans la grille419
  - 3.4.1 Placer les enfants dans la grille419
  - 3.4.2 Placer les enfants dans les lignes423
  - 3.4.3 Exploiter la numérotation des lignes427
  - 3.4.4 Nommer les lignes de la grille429
  - 3.4.5 Nommer des zones de la grille431
  - 3.4.6 Aligner les cellules dans la grille435
  - 3.5 Créer une mise en page responsive avec une grille439
  - 3.5.1 Les affichages responsives439
  - 3.5.2 La structure HTML de la grille442
  - 3.5.3 Les styles CSS en Mobile First443
  - 3.5.4 La requête de média pour les écrans des tablettes446
  - 3.5.5 La requête de média pour les grands écrans449
  - 3.5.6 Le code complet de la grille responsive450
  - Chapitre 3-10
  - Les modules d'animation
  - 1. Les modules CSS453
  - 2. Les transformations454
  - 2.1 La fonction et le point de référence454
  - 2.2 Le déplacement456
  - 2.3 La mise à l'échelle457
  - 2.4 La rotation459
  - 2.5 La déformation459
  - 2.6 Appliquer toutes les transformations461
  - 3. Les transitions462
  - 3.1 Créer des transitions462
  - 3.2 Créer un déplacement horizontal463
  - 3.3 Créer un déplacement horizontal et vertical466
  - 4. Les animations467
  - 4.1 Créer des animations467
  - 4.2 Créer un déplacement infini469
  - 4.3 Créer un formulaire animé472
  - Chapitre 3-11
  - Des modules CSS pour les graphistes
  - 1. Des modules en devenir475
  - 2. Les masques475
  - 2.1 Le module CSS475
  - 2.2 Créer un masque476
  - 3. L'habillage du texte479
  - 3.1 Le module CSS479
  - 3.2 Créer un habillage480
  - Chapitre 3-12
  - Les feuilles de style pour l'impression
  - 1. L'impression des pages web485
  - 2. Les feuilles de style spécifiques486
  - 2.1 Les liaisons aux fichiers CSS486
  - 2.2 Les requêtes de média487
  - 3. Les propriétés globales des pages487
  - 4. Les polices de caractères488
  - 5. Les éléments non imprimés489
  - 6. Les ruptures de lecture489
  - 6.1 Les sauts de page489
  - 6.2 Les lignes solidaires490
  - 6.3 Les veuves et les orphelines490
  - 7. Les liens hypertextes491
  - Index 493
Origine de la notice:
- BPI