par Draillard, Francis
Éditions Eyrolles
-
-
Disponible - 681.226 DRA
Niveau 3 - Informatique
Résumé
Présentation de la technique des feuilles de styles CSS, des nouvelles normes HTML5 et CSS3, ainsi que des dernières évolutions des navigateurs. Avec un rappel de l'emploi des balises HTML, de l'insertion de contenus multimédias et des exemples de réalisations. ©Electre 2022
- Éditeur(s)
-
Date
- DL 2022
-
Notes
- CSS = Cascading style sheets ; HTML = Hypertext markup language
-
Langues
- Français
-
Description matérielle
- 1 vol. (XXI-681 p.) : illustrations en noir et blanc ; 20 x 15 cm
- Collections
- Sujet(s)
-
ISBN
- 978-2-416-00730-9
-
Indice
- 681.226 HTML, CSS, XML, XSLT
-
Quatrième de couverture
-
Premiers pas en CSS 3 & HTML 5
9e éd.
Des bases HTML 5 et CSS 3 aux fonctions de styles avancées, utilisez les meilleurs outils pour créer un site performant et l'adapter aux mobiles !
- Bases : l'essentiel du HTML 5 et la structure d'une page, imbrication et hiérarchie des balises
- Multimedia : images, sons et vidéos dans vos pages
- HTML 5 avancé : options pour le texte, formulaires de contact et contrôle de la saisie
- Principe de CSS : règles CSS et feuilles de styles, présentation homogène et facilement modifiable
- Mise en forme : présentation du texte et placement des blocs, mise en page avec les méthodes grid et flexbox
- CSS 3 avancées : dégradés, traitement d'images, transformations et animations
- Synthèse : modèles et exemples complets de pages, adaptation aux tablettes et smartphones
Cette neuvième édition prend en compte les dernières évolutions des standards HTML 5 et CSS 3.
Annexes : Applications pratiques, galerie d'images, menu simple et déroulant, bandeau animé • Spécificités des navigateurs • Aide-mémoire des propriétés CSS et choix des couleurs • Références web et bibliographiques
-
-
Tables des matières
-
Premiers pas en CSS 3 et HTML 5
9e éditions
Francis Draillard
Éditions Eyrolles
- 1. Introduction au HTML et aux feuilles de styles CSS1
- Signification de HTML et CSS2
- Principes de base pour une page web3
- Choix sensé des balises HTML3
- Adaptation aux navigateurs3
- Accessibilité4
- L'apparence, fonction du thème et du public concerné5
- Polices de caractères5
- En résumé, quelques sentiments liés aux couleurs6
- Homogénéité du site7
- Principes d'une bonne écriture HTML/CSS : donner du sens au codage8
- Titre de page8
- Mise en gras ou en italique8
- Liste de liens hypertextes (menu)9
- Intérêt des feuilles de styles10
- 2. L'essentiel du HTML13
- Principe des balises14
- Évolution de la norme HTML15
- Succession des normes HTML15
- La philosophie du HTML 516
- Évolution et compatibilité16
- Pragmatisme et tolérance17
- Premières règles d'écriture HTML17
- Règles pour les noms des fichiers17
- Règles d'écriture des balises en HTML18
- Structure d'une page HTML20
- Espaces, sauts de ligne et commentaires invisibles21
- Principales balises HTML23
- Un exemple pour commencer23
- Les deux premières balises25
- En-tête25
- Corps de la page27
- Paragraphes et titres27
- Mise en forme commune à une partie du texte28
- Principales mises en forme29
- Italique et gras29
- Exposant et indice30
- Annotations en petite taille de caractères31
- Citation avec retrait32
- Trait de séparation horizontal33
- Liens hypertextes33
- Les listes37
- Listes à puces ou numérotées37
- Listes de définitions40
- Tableaux41
- Création d'un tableau HTML41
- Fusionner des cellules44
- Insertion d'images46
- Formats d'images de base46
- Meilleure compression des images47
- La balise image48
- Dimensionner une image49
- Une icône sur l'onglet50
- Contenus audio et vidéo52
- Formats de fichiers audio et vidéo52
- Insertion d'un son ou d'une vidéo54
- Exemples d'utilisation55
- « Pistes complémentaires » pour les contenus audio et vidéo57
- Des blocs pour structurer les pages57
- Sections de base d'une page58
- Sous-sections de type < div>59
- Deux catégories d'éléments62
- Éléments en ligne62
- Éléments de type bloc63
- Hiérarchie des éléments : l'héritage65
- Hiérarchie des blocs imbriqués et juxtaposés65
- Termes hiérarchiques utilisés en HTML/CSS67
- Héritage des propriétés de style67
- Validation du code HTML69
- 3. Aller plus loin en HTML 573
- Davantage de signification pour le texte74
- Balises spécifiques pour le texte74
- Surlignage de mots74
- Mesures comprises entre deux bornes74
- Dates et heures75
- Texte barré76
- Coupure des mots trop longs77
- Autres balises de texte79
- Des éléments modifiables80
- Éléments déplaçables dans la page80
- Contenus modifiables81
- Blocs spécifiques82
- Une page dans un cadre82
- Des détails sur demande83
- Options pour les images et affichage dynamique84
- Image, légende et texte associé84
- Plusieurs formats pour une image avec <picture> et <source>86
- Liens sur différentes parties d'une image (zonage)87
- Affichage dynamique (<canvas>)90
- Indicateur de progression (<progress>)93
- Formulaires de contact93
- Balise formulaire94
- Regroupement de parties de formulaire95
- Les étiquettes95
- Zones de texte simples96
- Zones de texte sur plusieurs lignes97
- Boutons radio, à choix unique97
- Cases à cocher98
- Listes déroulantes98
- Boutons d'effacement et d'envoi100
- Fichier d'envoi du formulaire101
- Fonctionnement du fichier envoi.php103
- Contrôle plus précis des formulaires104
- Balise form 104 Contrôle des balises input105
- Types d'entrées spécifiques105
- Attributs des balises input107
- Balises input utilisées pour la saisie108
- Balises input en forme de bouton110
- Autres balises de formulaire111
- Listes d'options modifiables111
- Barre de progression113
- Affichage du résultat d'un calcul114
- Quelques attributs pour les éléments de formulaire115
- Attributs communs à plusieurs balises de formulaire115
- Zones de saisie à plusieurs lignes116
- À utiliser et à tester117
- 4. Écriture des feuilles de styles121
- Définition d'une règle de style122
- Principe122
- Exemple de règle de style122
- Commentaires123
- Emplacement des styles123
- Feuille de styles interne124
- Feuille de styles externe124
- Styles en ligne126
- Sélecteurs de styles127
- Comme au théâtre127
- Sélecteur simple128
- Classe129
- Une catégorie de balises129
- Une même classe pour plusieurs types de balises131
- Identifiant131
- Identifiant sans nom de balise133
- Différence entre classe et identifiant134
- Pseudo-classes134
- Pseudo-classes pour les liens hypertextes135
- Premier ou dernier élément d'un conteneur136
- Pseudo-éléments136
- Règle associée à plusieurs sélecteurs138
- Hiérarchie des sélecteurs139
- Hiérarchie précise des sélecteurs139
- Imbrication directe139
- Juxtaposition140
- Sélecteur universel140
- Ordre de priorité des styles141
- Règle de style prioritaire141
- Degré de priorité d'une règle de style142
- Application144
- Valeurs, tailles et couleurs145
- Héritage de propriété145
- Unités de taille145
- Unités de taille courantes145
- Autres unités de taille147
- Tailles calculées148
- Codage des couleurs150
- Noms de couleurs150
- Code RVB150
- Toutes les couleurs sont « sûres »151
- Des outils en ligne pour les couleurs152
- Paramétrage des valeurs152
- Regroupement de propriétés à l'aide de « raccourcis »154
- Exemple de page avec feuille de styles interne155
- 5. Propriétés de mise en forme161
- Principales propriétés pour le texte162
- Mise en forme des caractères162
- Choix des polices162
- Taille de police164
- Couleur du texte164
- Texte en gras166
- Italique167
- Soulignement et autres « décorations »167
- Majuscules et minuscules169
- Petites majuscules170
- Interligne minimum171
- Raccourci pour la mise en forme de caractères172
- Ombrage du texte173
- Alignements du texte175
- Alignement horizontal du texte175
- Retrait de première ligne176
- Décalage vers le haut ou le bas177
- Arrière-plans, bordures et effets de contour178
- Bordures179
- Style de bordure179
- Styles de bordure pour chaque côté180
- Épaisseur de bordure180
- Épaisseur de bordure pour chaque côté181
- Couleur de bordure181
- Couleur de bordure pour chaque côté182
- Raccourci pour toutes les propriétés de bordure .182
- Raccourci des propriétés de bordure pour chaque côté183
- Contour superposé à un élément184
- Couleur de fond et effets de contour185
- Couleur d'arrière-plan185
- Des coins arrondis !186
- Ombrage des blocs188
- Images d'arrière-plan189
- Définition d'une image d'arrière-plan190
- Répétition ou non de l'image d'arrière-plan190
- Alignement de l'image d'arrière-plan191
- Fixation de l'image d'arrière-plan193
- Origine du positionnement de l'image de fond194
- Étendue de l'arrière-plan195
- Dimension de l'image d'arrière-plan195
- Raccourcis pour les arrière-plans197
- Plusieurs images d'arrière-plan198
- Marges, dimensions et type d'affichage199
- Marges externes et internes199
- Marges externes autour d'un élément199
- Raccourci pour les marges externes201
- Marges internes d'un bloc201
- Raccourci pour les marges internes202
- Dimensions d'un bloc203
- Largeur fixe pour un bloc ou une image203
- Hauteur fixe pour un bloc ou une image204
- Dimensions globales des blocs205
- Largeur et hauteur totales d'un bloc206
- Largeur et hauteur minimales209
- Largeur et hauteur maximales209
- Blocs de dimensions modifiables211
- Différents modes d'affichage d'un élément212
- Changement de type d'élément212
- Affichage ou non d'un élément214
- Affichage des débordements214
- Listes à puces ou numérotées215
- Type de puce ou de numérotation215
- Utilisation d'une image comme puce216
- Position de la puce217
- Raccourci pour toutes les propriétés de liste218
- Les tableaux219
- Largeur fixe ou variable des colonnes ou du tableau219
- Recouvrement des bordures219
- Espacement entre les bordures des cellules220
- Contour des cellules vides222
- Position du titre du tableau223
- Alignement vertical des cellules223
- 6. Positionnement des blocs227
- Position des éléments228
- Flux normal des éléments228
- Principe du positionnement des blocs228
- Types de position possibles229
- Position normale229
- Position relative, absolue ou fixe229
- Position flottante230
- Utilisation des différents types de positionnement230
- Élément dans le flux (position normale)231
- Position relative231
- Position absolue231
- Position fixe231
- Élément flottant232
- Type de positionnement d'un bloc233
- Décalages indiquant la position d'un bloc233
- Niveau d'empilement des blocs234
- Transformation en bloc flottant235
- Pas d'éléments flottants sur le côté235
- Délimitation des blocs237
- Exemples de positionnement239
- Image du haut (nuages)241
- Image de l'arbre en position absolue241
- Sous-titre « En images » en position relative242
- Centrage horizontal du titre243
- Titre latéral fixé sur l'écran243
- Position de la galerie d'images244
- Images côte à côte245
- Multicolonnage247
- Nombre et largeur des colonnes247
- Espacement des colonnes248
- Trait de séparation des colonnes249
- Équilibrage des colonnes251
- Titre sur plusieurs colonnes251
- La flexbox pour répartir des blocs252
- Un bloc conteneur de type flex253
- Propriétés flexbox appliquées au conteneur255
- Type flexbox pour un élément255
- Direction et axe principal des blocs256
- Retour à la ligne des blocs257
- Raccourci flex-flow pour la direction et les débordements258
- Alignement sur l'axe principal259
- Alignement sur l'axe perpendiculaire261
- Répartition sur l'axe perpendiculaire264
- Propriétés flexbox appliquées aux items flex267
- Alignement spécifique d'un bloc267
- Agrandissement automatique des blocs269
- Réduction automatique des blocs273
- Dimensions de base avant agrandissement ou réduction des blocs278
- Raccourci flex à privilégier281
- Ordre des blocs281
- Deux applications pratiques de la flexbox284
- Un menu sur toute la largeur284
- Alignement de cadres dans une page285
- Mise en page avec la méthode grid289
- Quelques définitions pour la méthode grid290
- Unités de mesure pour la méthode grid291
- L'unité flexible fr292
- Fonctions et mots-clés associés aux dimensions292
- Propriétés de base de la méthode grid294
- Définition des colonnes294
- Définition des rangées301
- Mise en page utilisant les noms des blocs303
- Raccourci pour la mise en page309
- Espacement des rangées et des colonnes d'une grille311
- Positionnement et dimensions des items grid314
- Propriétés de début et de fin d'une zone de grille314
- Raccourcis pour le placement vertical et horizontal318
- Raccourci grid-area pour le positionnement320
- Affichage d'informations sur une grille322
- Répartition et alignement des items grid324
- Alignement horizontal et vertical des blocs dans une grille325
- Dimensions par défaut et remplissage d'une grille334
- Largeurs et hauteurs implicites dans une grille334
- Ordre de remplissage d'une grille336
- Raccourci général grid339
- Méthodes grid et flexbox347
- 7. Fonctions avancées, transformations et animations357
- Des fonctions avancées pour nos pages358
- Propriétés provisoires et préfixes359
- Test de la reconnaissance d'une propriété360
- Réinitialisation des propriétés d'un élément362
- Effets graphiques, couleurs et transparence364
- Niveau d'opacité364
- Codage RCBA des couleurs364
- Codages HSL et HSLA des couleurs367
- Dégradés de couleurs368
- Dégradé linéaire369
- Dégradé radial370
- Dégradés répétitifs372
- Des filtres pour les images372
- Fonctions avancées pour le texte376
- Polices et options spécifiques pour les caractères377
- Une police originale avec @font-face377
- Étirement des caractères381
- Uniformisation de la taille des polices382
- Espacement entre les lettres383
- Espacement entre les mots384
- Alignement de la dernière ligne d'un paragraphe385
- Conservation des espaces et sauts de ligne saisis386
- Affichages automatiques, compteurs et guillemets387
- Affichage automatique d'un contenu387
- Guillemets à utiliser388
- Réinitialisation d'un compteur389
- Incrémentation d'un compteur389
- Direction d'écriture390
- Orientation des lignes d'écriture390
- Sens de l'écriture391
- Écriture bidirectionnelle392
- Coupure des mots et des lignes393
- Coupures de mots en fin de ligne394
- Marqueur de ligne tronquée395
- Coupure des mots trop longs396
- Mise en forme en présence de saut de ligne396
- Ergonomie, navigation et curseur398
- Navigation au clavier398
- Apparence d'un élément398
- Couleur d'éléments de formulaire activés399
- Couleur du curseur 400 Modification du curseur de la souris401
- Mode de sélection du texte402
- Contour et habillage personnalisés403
- Des images en guise de bordures404
- Zone visible d'un élément408
- Habillage spécifique d'un élément410
- Contour d'habillage personnalisé411
- Marge autour de la forme d'habillage414
- Habillage associé à une forme d'image415
- Habillage suivant le niveau de transparence416
- Transformations géométriques418
- Propriété de transformation419
- Fonctions de transformation 2D420
- Fonctions de transformation 3D421
- Le Web s'anime en CSS 3423
- Liens internes animés423
- Les transitions425
- Les animations433
- Sélecteurs avancés pour les règles de styles443
- Sélecteurs de base444
- Imbrication directe et voisinage446
- Balises directement imbriquées446
- Juxtaposition de balises447
- Sélecteur de voisinage447
- Sélection sur les attributs448
- Attribut existant ou ayant une valeur donnée448
- Attribut sélectionné sur une partie de son contenu450
- Pseudo-classes452
- Pseudo-classes générales452
- Pseudo-classes pour les éléments de formulaire455
- Pseudo-élément463
- Les CSS, toujours en évolution467
- 8. Exemples de sites web471
- Structure d'une page web472
- Code HTML de base473
- Créer des pages de base à menu horizontal ou vertical478
- Page de base avec menu horizontal479
- Page de base avec menu vertical483
- Exemples concrets avec images de fond et dégradés CSS 3487
- Une grande image pour toute la page487
- Site sur deux colonnes, avec image de fond et dégradés CSS497
- 9. Un site web pour les mobiles507
- Les contraintes du Web mobile508
- Adaptation de la mise en page509
- Le sélecteur @media510
- Responsive et media queries CSS 3512
- Un exemple pour commencer512
- Syntaxe des media queries513
- Application aux navigateurs mobiles517
- Image modifiable suivant la taille d'écran518
- Adaptation pratique d'un site pour le Web mobile520
- Modifier un site existant pour l'adapter aux mobiles520
- Adaptation d'une page aux mobiles523
- 10. Différents types de médias539
- Types de médias540
- Média paginé : styles CSS pour l'impression541
- Gestion des veuves543
- Gestion des orphelines543
- Saut de page avant544
- Saut de page après544
- Coupure par un saut de page545
- Dimensions d'une page546
- Sélecteur de page546
- Référence à un typé de page547
- Rotation d'image548
- Résumé des propriétés pour média paginé549
- Média sonore : fonctions audio CSS 3550
- Configuration du son et de la voix552
- Signaux sonores et pauses553
- Résumé des propriétés pour média sonore555
- A. Quelques applications pratiques561
- Centrage d'éléments à l'intérieur des blocs562
- Centrage horizontal562
- Centrage horizontal d'éléments en ligne562
- Centrage horizontal de blocs563
- Centrage vertical564
- Centrage vertical d'éléments en ligne564
- Centrage vertical de blocs566
- Astuces pour les titres568
- Mise en forme ajustée à la largeur du titre568
- Placement d'un titre sur une image570
- Disposition d'images et de blocs572
- Habillage d'une image par du texte572
- Image dans un cercle574
- Zoom d'une image au passage de la souris576
- Galerie d'images578
- Blocs côte à côte584
- Menu fixe et déroulant responsive587
- Menu horizontal adaptatif588
- Menu déroulant responsive594
- Animation des menus598
- Bandeau d'en-tête animé607
- Défilement d'images608
- Défilement d'images avec un titre614
- Défilement d'images avec un titre animé617
- B. Comportement des principaux navigateurs525
- Test des pages sur plusieurs navigateurs626
- Interprétation du HTML et des propriétés CSS629
- Tests de base des standards CSS 2 et CSS 3629
- Test détaillé de notre navigateur pour les CSS 3630
- Vérification simple de l'effet d'une propriété631
- Normes et navigateurs632
- Préfixe pour les propriétés provisoires633
- Règles CSS fonction des propriétés reconnues633
- Comportement des navigateurs courants635
- C. Résumé des propriétés css et couleurs641
- Propriétés classées par catégorie642
- Propriétés de mise en forme (chapitre 5)643
- Principales propriétés pour le texte643
- Arrière-plan, bordures et effets de contour644
- Marges, dimensions et types d'affichage645
- Listes à puces ou numérotées646
- Les tableaux646
- Positionnement des blocs (chapitre 6)647
- Position des éléments647
- Multicolonnage647
- La flexbox pour répartir les blocs648
- Mise en page avec la méthode grid648
- Fonctions avancées, transformations et animations (chapitre 7)650
- Réinitialisation650
- Effets graphiques, couleurs et transparence650
- Fonctions avancées pour le texte650
- Ergonomie, navigation et curseur651
- Mode de sélection du texte651
- Contour et habillage personnalisés651
- Transformations géométriques652
- Le Web s'anime en CSS652
- Choix et listes de couleurs654
- Harmonisation des couleurs654
- Les 16 couleurs de base656
- Liste de toutes les couleurs nommées658
- D. Références bibliographiques et sites web669
- Bibliographie670
- Sites web utiles670
- Index 673
-
-
Origine de la notice:
- Electre
-
Disponible - 681.226 DRA
Niveau 3 - Informatique
