Premiers pas en CSS3 et HTML5 Catégorie: LivresÉtiquette: HTML et CSSSujet: HTML et CSSPublié: 2022Édition: 9Une bonne introduction à HTML et CSS. Ouvrir le livre Fermer Avant-propos Table des matières Chapitre 1. Introduction au HTML et aux feuilles de styles CSS Signification de HTML et CSS Principes de base pour une page web Choix sensé des balises HTML Adaptation aux navigateurs Accessibilité L’apparence, fonction du thème et du public concerné Polices de caractères En résumé, quelques sentiments liés aux couleurs Homogénéité du site Principes d’une bonne écriture HTML/CSS : donner du sens au codage Titre de page Mise en gras ou en italique Liste de liens hypertextes (menu) Intérêt des feuilles de styles Chapitre 2. L’essentiel du HTML Principe des balises Évolution de la norme HTML Succession des normes HTML La philosophie du HTML 5 Évolution et compatibilité Pragmatisme et tolérance Premières règles d’écriture HTML Règles pour les noms des fichiers Règles d’écriture des balises en HTML Structure d’une page HTML Espaces, sauts de ligne et commentaires invisibles Principales balises HTML Un exemple pour commencer Les deux premières balises En-tête Corps de la page Paragraphes et titres Mise en forme commune à une partie du texte Principales mises en forme Italique et gras Exposant et indice Annotations en petite taille de caractères Citation avec retrait Trait de séparation horizontal Liens hypertextes Les listes Listes à puces ou numérotées Listes de définitions Tableaux Création d’un tableau HTML Fusionner des cellules Insertion d’images Formats d’images de base Meilleure compression des images La balise image Dimensionner une image Une icône sur l’onglet Contenus audio et vidéo Formats de fichiers audio et vidéo Insertion d’un son ou d’une vidéo Exemples d’utilisation « Pistes complémentaires » pour les contenus audio et vidéo Des blocs pour structurer les pages Sections de base d’une page Sous-sections de type <div> Deux catégories d’éléments Éléments en ligne Éléments de type bloc Hiérarchie des éléments : l’héritage Hiérarchie des blocs imbriqués et juxtaposés Termes hiérarchiques utilisés en HTML/CSS Héritage des propriétés de style Validation du code HTML Chapitre 3. Aller plus loin en HTML 5 Davantage de signification pour le texte Balises spécifiques pour le texte Surlignage de mots Mesures comprises entre deux bornes Dates et heures Texte barré Coupure des mots trop longs Autres balises de texte Des éléments modifiables Éléments déplaçables dans la page Contenus modifiables Blocs spécifiques Une page dans un cadre Des détails sur demande Options pour les images et affichage dynamique Image, légende et texte associé Plusieurs formats pour une image avec <picture> et <source> Liens sur différentes parties d’une image (zonage) Affichage dynamique (<canvas>) Indicateur de progression (<progress>) Formulaires de contact Balise formulaire Regroupement de parties de formulaire Les étiquettes Zones de texte simples Zones de texte sur plusieurs lignes Boutons radio, à choix unique Cases à cocher Listes déroulantes Boutons d’effacement et d’envoi Fichier d’envoi du formulaire Fonctionnement du fichier envoi.php Contrôle plus précis des formulaires Balise form Contrôle des balises input Types d’entrées spécifiques Attributs des balises input Balises input utilisées pour la saisie Balises input en forme de bouton Autres balises de formulaire Listes d’options modifiables Barre de progression Affichage du résultat d’un calcul Quelques attributs pour les éléments de formulaire Attributs communs à plusieurs balises de formulaire Zones de saisie à plusieurs lignes À utiliser et à tester Chapitre 4. Écriture des feuilles de styles Définition d’une règle de style Principe Exemple de règle de style Commentaires Emplacement des styles Feuille de styles interne Feuille de styles externe Styles en ligne Sélecteurs de styles Comme au théâtre Sélecteur simple Classe Une catégorie de balises Une même classe pour plusieurs types de balises Identifiant Identifiant sans nom de balise Différence entre classe et identifiant Pseudo-classes Pseudo-classes pour les liens hypertextes Premier ou dernier élément d’un conteneur Pseudo-éléments Règle associée à plusieurs sélecteurs Hiérarchie des sélecteurs Hiérarchie précise des sélecteurs Imbrication directe Juxtaposition Sélecteur universel * Ordre de priorité des styles Règle de style prioritaire Degré de priorité d’une règle de style Application Valeurs, tailles et couleurs Héritage de propriété Unités de taille Unités de taille courantes Autres unités de taille Tailles calculées Codage des couleurs Noms de couleurs Code RVB Toutes les couleurs sont « sûres » Des outils en ligne pour les couleurs Paramétrage des valeurs Regroupement de propriétés à l’aide de « raccourcis » Exemple de page avec feuille de styles interne Chapitre 5. Propriétés de mise en forme Principales propriétés pour le texte Mise en forme des caractères Choix des polices Taille de police Couleur du texte Texte en gras Italique Soulignement et autres « décorations » Majuscules et minuscules Petites majuscules Interligne minimum Raccourci pour la mise en forme de caractères Ombrage du texte Alignements du texte Alignement horizontal du texte Retrait de première ligne Décalage vers le haut ou le bas Arrière-plans, bordures et effets de contour Bordures Style de bordure Styles de bordure pour chaque côté Épaisseur de bordure Épaisseur de bordure pour chaque côté Couleur de bordure Couleur de bordure pour chaque côté Raccourci pour toutes les propriétés de bordure Raccourci des propriétés de bordure pour chaque côté Contour superposé à un élément Couleur de fond et effets de contour Couleur d’arrière-plan Des coins arrondis ! Ombrage des blocs Images d’arrière-plan Définition d’une image d’arrière-plan Répétition ou non de l’image d’arrière-plan Alignement de l’image d’arrière-plan Fixation de l’image d’arrière-plan Origine du positionnement de l’image de fond Étendue de l’arrière-plan Dimension de l’image d’arrière-plan Raccourcis pour les arrière-plans Plusieurs images d’arrière-plan Marges, dimensions et type d’affichage Marges externes et internes Marges externes autour d’un élément Raccourci pour les marges externes Marges internes d’un bloc Raccourci pour les marges internes Dimensions d’un bloc Largeur fixe pour un bloc ou une image Hauteur fixe pour un bloc ou une image Dimensions globales des blocs Largeur et hauteur totales d’un bloc Largeur et hauteur minimales Largeur et hauteur maximales Blocs de dimensions modifiables Différents modes d’affichage d’un élément Changement de type d’élément Affichage ou non d’un élément Affichage des débordements Listes à puces ou numérotées Type de puce ou de numérotation Utilisation d’une image comme puce Position de la puce Raccourci pour toutes les propriétés de liste Les tableaux Largeur fixe ou variable des colonnes ou du tableau Recouvrement des bordures Espacement entre les bordures des cellules Contour des cellules vides Position du titre du tableau Alignement vertical des cellules Chapitre 6. Positionnement des blocs Position des éléments Flux normal des éléments Principe du positionnement des blocs Types de position possibles Position normale Position relative, absolue ou fixe Position flottante Utilisation des différents types de positionnement Élément dans le flux (position normale) Position relative Position absolue Position fixe Élément flottant Type de positionnement d’un bloc Décalages indiquant la position d’un bloc Niveau d’empilement des blocs Transformation en bloc flottant Pas d’éléments flottants sur le côté Délimitation des blocs Exemples de positionnement Image du haut (nuages) Image de l’arbre en position absolue Sous-titre « En images » en position relative Centrage horizontal du titre Titre latéral fixé sur l’écran Position de la galerie d’images Images côte à côte Multicolonnage Nombre et largeur des colonnes Espacement des colonnes Trait de séparation des colonnes Équilibrage des colonnes Titre sur plusieurs colonnes La flexbox pour répartir des blocs Un bloc conteneur de type flex Propriétés flexbox appliquées au conteneur Type flexbox pour un élément Direction et axe principal des blocs Retour à la ligne des blocs Raccourci flex-flow pour la direction et les débordements Alignement sur l’axe principal Alignement sur l’axe perpendiculaire Répartition sur l’axe perpendiculaire Propriétés flexbox appliquées aux items flex Alignement spécifique d’un bloc Agrandissement automatique des blocs Réduction automatique des blocs Dimensions de base avant agrandissement ou réduction des blocs Raccourci flex à privilégier Ordre des blocs Deux applications pratiques de la flexbox Un menu sur toute la largeur Alignement de cadres dans une page Mise en page avec la méthode grid Quelques définitions pour la méthode grid Unités de mesure pour la méthode grid L’unité flexible fr Fonctions et mots-clés associés aux dimensions Propriétés de base de la méthode grid Définition des colonnes Définition des rangées Mise en page utilisant les noms des blocs Raccourci pour la mise en page Espacement des rangées et des colonnes d’une grille Positionnement et dimensions des items grid Propriétés de début et de fin d’une zone de grille Raccourcis pour le placement vertical et horizontal Raccourci grid-area pour le positionnement Affichage d’informations sur une grille Répartition et alignement des items grid Alignement horizontal et vertical des blocs dans une grille Dimensions par défaut et remplissage d’une grille Largeurs et hauteurs implicites dans une grille Ordre de remplissage d’une grille Raccourci général grid Méthodes grid et flexbox Chapitre 7. Fonctions avancées, transformations et animations Des fonctions avancées pour nos pages Propriétés provisoires et préfixes Test de la reconnaissance d’une propriété Réinitialisation des propriétés d’un élément Effets graphiques, couleurs et transparence Niveau d’opacité Codage RGBA des couleurs Codages HSL et HSLA des couleurs Dégradés de couleurs Dégradé linéaire Dégradé radial Dégradés répétitifs Des filtres pour les images Fonctions avancées pour le texte Polices et options spécifiques pour les caractères Une police originale avec @font-face Étirement des caractères Uniformisation de la taille des polices Espacement entre les lettres Espacement entre les mots Alignement de la dernière ligne d’un paragraphe Conservation des espaces et sauts de ligne saisis Affichages automatiques, compteurs et guillemets Affichage automatique d’un contenu Guillemets à utiliser Réinitialisation d’un compteur Incrémentation d’un compteur Direction d’écriture Orientation des lignes d’écriture Sens de l’écriture Écriture bidirectionnelle Coupure des mots et des lignes Coupures de mots en fin de ligne Marqueur de ligne tronquée Coupure des mots trop longs Mise en forme en présence de saut de ligne Ergonomie, navigation et curseur Navigation au clavier Apparence d’un élément Couleur d’éléments de formulaire activés Couleur du curseur Modification du curseur de la souris Mode de sélection du texte Contour et habillage personnalisés Des images en guise de bordures Zone visible d’un élément Habillage spécifique d’un élément Contour d’habillage personnalisé Marge autour de la forme d’habillage Habillage associé à une forme d’image Habillage suivant le niveau de transparence Transformations géométriques Propriété de transformation Fonctions de transformation 2D Fonctions de transformation 3D Le Web s’anime en CSS 3 Liens internes animés Les transitions Les animations Sélecteurs avancés pour les règles de styles Sélecteurs de base Imbrication directe et voisinage Balises directement imbriquées Juxtaposition de balises Sélecteur de voisinage Sélection sur les attributs Attribut existant ou ayant une valeur donnée Attribut sélectionné sur une partie de son contenu Pseudo-classes Pseudo-classes générales Pseudo-classes pour les éléments de formulaire Pseudo-élément Les CSS, toujours en évolution Chapitre 8. Exemples de sites web Structure d’une page web Code HTML de base Créer des pages de base à menu horizontal ou vertical Page de base avec menu horizontal Page de base avec menu vertical Exemples concrets avec images de fond et dégradés CSS 3 Une grande image pour toute la page Site sur deux colonnes, avec image de fond et dégradés CSS Chapitre 9. Un site web pour les mobiles Les contraintes du Web mobile Adaptation de la mise en page Le sélecteur @media Responsive et media queries CSS 3 Un exemple pour commencer Syntaxe des media queries Application aux navigateurs mobiles Image modifiable suivant la taille d’écran Adaptation pratique d’un site pour le Web mobile Modifier un site existant pour l’adapter aux mobiles Adaptation d’une page aux mobiles Chapitre 10. Différents types de médias Types de médias Média paginé : styles CSS pour l’impression Gestion des veuves Gestion des orphelines Saut de page avant Saut de page après Coupure par un saut de page Dimensions d’une page Sélecteur de page Référence à un type de page Rotation d’image Résumé des propriétés pour média paginé Média sonore : fonctions audio CSS 3 Configuration du son et de la voix Signaux sonores et pauses Résumé des propriétés pour média sonore Annexe A. Quelques applications pratiques Centrage d’éléments à l’intérieur des blocs Centrage horizontal Centrage horizontal d’éléments en ligne Centrage horizontal de blocs Centrage vertical Centrage vertical d’éléments en ligne Centrage vertical de blocs Astuces pour les titres Mise en forme ajustée à la largeur du titre Placement d’un titre sur une image Disposition d’images et de blocs Habillage d’une image par du texte Image dans un cercle Zoom d’une image au passage de la souris Galerie d’images Blocs côte à côte Menu fixe et déroulant responsive Menu horizontal adaptatif Menu déroulant responsive Animation des menus Bandeau d’en-tête animé Défilement d’images Défilement d’images avec un titre Défilement d’images avec un titre animé Annexe B. Comportement des principaux navigateurs Test des pages sur plusieurs navigateurs Interprétation du HTML et des propriétés CSS Tests de base des standards CSS 2 et CSS 3 Test détaillé de notre navigateur pour les CSS 3 Vérification simple de l’effet d’une propriété Normes et navigateurs Préfixe pour les propriétés provisoires Règles CSS fonction des propriétés reconnues Comportement des navigateurs courants Annexe C. Résumé des propriétés CSS et couleurs Propriétés classées par catégorie Propriétés de mise en forme (chapitre 5) Principales propriétés pour le texte Arrière-plan, bordures et effets de contour Marges, dimensions et types d’affichage Listes à puces ou numérotées Les tableaux Positionnement des blocs (chapitre 6) Position des éléments Multicolonnage La flexbox pour répartir les blocs Mise en page avec la méthode grid Fonctions avancées, transformations et animations (chapitre 7) Réinitialisation Effets graphiques, couleurs et transparence Fonctions avancées pour le texte Ergonomie, navigation et curseur Mode de sélection du texte Contour et habillage personnalisés Transformations géométriques Le Web s’anime en CSS Choix et listes de couleurs Harmonisation des couleurs Les 16 couleurs de base Liste de toutes les couleurs nommées Annexe D. Références bibliographiques et sites web Bibliographie Sites web utiles Index