Premiers pas en CSS3 et HTML5

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