Premiers pas en CSS et HTML

Table of contents

1. Couverture
2. Page de titre
3. Copyright
4. Avant-propos
5. Table des matières
6. 1. INTRODUCTION AU HTML ET AUX FEUILLES DE STYLE CSS
   1. Signification de HTML et CSS
   2. Principes de base pour une page web
      1. Choix sensé des balises HTML
      2. Adaptation aux navigateurs
      3. Accessibilité
      4. L’apparence, fonction du thème et du public concerné
         1. Polices de caractères
         2. En résumé, quelques sentiments liés aux couleurs
      5. Homogénéité du site
   3. Principes d’une bonne écriture HTML/CSS : donner du sens au codage
      1. Titre de page
      2. Mise en gras ou en italique
      3. Liste de liens hypertextes (menu)
   4. Intérêt des feuilles de style
7. 2. L’ESSENTIEL DU HTML/XHTML
   1. Principe des balises
   2. Évolution de la norme HTML
   3. Premières règles d’écriture HTML
      1. Règles pour les noms des fichiers
      2. Règles d’écriture des balises en HTML et XHTML
      3. Structure d’une page HTML
      4. Espaces, sauts de ligne et commentaires invisibles
   4. Principales balises HTML
      1. Un exemple pour commencer
         1. Les deux premières balises
         2. En-tête
         3. Corps de la page
      2. Paragraphes et titres
      3. Mise en forme commune à une partie du texte
      4. Principales mises en forme
      5. Italique et gras
         1. Exposant et indice
         2. Annotations en petite taille de caractères
         3. Citation avec retrait
      6. Liens hypertextes
      7. Les listes
      8. Listes à puces ou numérotées
         1. Listes de définitions
      9. Tableaux
         1. Création d’un tableau HTML
         2. Fusionner des cellules
      10. Insertion d’images
          1. La balise image
          2. Dimensionner une image
      11. Objets multimédias
          1. Animation Flash
          2. Vidéo
      12. Sauts, lignes et caractères spéciaux
      13. Formulaires
          1. Balise formulaire
          2. Regroupement de parties de formulaire
          3. Les étiquettes
          4. Zones de texte simples
          5. Zones de texte sur plusieurs lignes
          6. Boutons radio, à choix unique
          7. Cases à cocher
          8. Listes déroulantes
          9. Boutons d’effacement et d’envoi
          10. Fichier d’envoi du formulaire
      14. Une page dans un cadre
      15. Autres balises de texte
   5. Deux catégories d’éléments : blocs et en ligne/niveau texte
      1. Éléments en ligne ou de niveau texte
      2. Éléments de type bloc
   6. Hiérarchie des éléments : l’héritage
      1. Hiérarchie des blocs imbriqués et juxtaposés
         1. Termes hiérarchiques utilisés en HTML/CSS
      2. Héritage des propriétés de style
   7. Compléments sur les balises d’en-tête
   8. Balise DOCTYPE
   9. Balise meta et codage en utf-8
   10. Autres balises d’en-tête
   11. Validation du code HTML
8. 3. NOUVEAUTÉS DU HTML
   1. Orientations du HTML 5
      1. Évolution et compatibilité
      2. Un en-tête simplifié
   2. Blocs et sections en HTML 5
      1. Sections de base d’une page
      2. Sous-sections de type <div>
      3. Des détails sur demande
      4. Attributs supplémentaires pour les blocs
         1. Personnalisation des listes numérotées
         2. Éléments déplaçables dans la page
   3. Davantage de signification pour le texte
      1. Nouvelles balises de texte HTML 5
         1. Surlignage de mots
         2. Mesures comprises entre deux bornes
         3. Dates et heures
         4. Les balises <b>, <i> et <s> sont de retour
         5. Coupure des mots trop longs
      2. De nouveaux attributs pour le texte
         1. Contenus modifiables
         2. Liens hypertextes
   4. Images, sons, vidéos et animations
      1. Images, photos et figures
      2. Contenus audio et vidéo
      3. Animations de type Flash
      4. Images dynamiques
         1. La balise canvas
         2. Indicateur de progression
   5. Contrôle précis des formulaires
      1. Balise form
      2. Contrôle des balises input
         1. Nouveaux types d’entrées
         2. Attributs des balises input
      3. Nouvelles balises de formulaire
         1. Listes d’options modifiables
         2. Affichage du résultat d’un calcul
      4. Nouveaux attributs pour les éléments de formulaire
         1. Rattachement à un autre élément
         2. Zones de saisie à plusieurs lignes
   6. À utiliser progressivement
9. 4. ÉCRITURE DES FEUILLES DE STYLE
   1. Définition d’une règle de style
      1. Principe
      2. Exemple de règle de style
      3. Commentaires
      4. Emplacement des styles
   2. Feuille de style interne
   3. Feuille de style externe
   4. Styles en ligne
   5. Sélecteurs de style
      1. Comme au théâtre
      2. Sélecteur simple
      3. Classe
         1. Une catégorie de balises
         2. Une même classe pour plusieurs types de balises
      4. Identifiant
         1. Identifiant sans nom de balise
         2. Différence entre classe et identifiant
      5. Pseudo-classes
         1. Pseudo-classes pour les liens hypertextes
         2. Autres pseudo-classes
      6. Pseudo-éléments
      7. Règle associée à plusieurs sélecteurs
      8. Regroupement de propriétés à l’aide de « raccourcis »
      9. Hiérarchie des sélecteurs
      10. Hiérarchie précise des sélecteurs
          1. Imbrication directe
          2. Juxtaposition
      11. Sélecteur d’attribut […]
      12. Sélecteur universel *
   6. Ordre de priorité des styles
      1. Règle de style prioritaire
      2. Degré de priorité d’une règle de style
      3. Application
   7. Valeurs, tailles et couleurs
      1. Héritage de propriété
      2. Unités de taille
         1. Unités de taille fixe
         2. Unités de taille relatives (conseillées)
         3. Tailles définies par mots-clés
      3. Codage des couleurs
         1. Noms de couleurs
         2. Code RVB
         3. Couleurs «sûres »
   8. Exemple de page avec feuille de style interne
10. 5. PROPRIÉTÉS DE MISE EN FORME
    1. Mise en forme des caractères
       1. Choix des polices
       2. Taille de police
       3. Couleur du texte
       4. Texte en gras
       5. Italique
       6. Soulignement et autres « décorations »
       7. Majuscules et minuscules
       8. Petites majuscules
       9. Surlignage de lettres
       10. Décalage vers le haut ou le bas
       11. Raccourci pour la mise en forme de caractères
    2. Paragraphes et blocs de texte
       1. Alignement horizontal du texte
       2. Retrait de première ligne
       3. Interligne minimum
       4. Espacement entre les lettres
       5. Espacement entre les mots
       6. Conservation des espaces et sauts de ligne saisis
       7. Modification du curseur de la souris
       8. Affichage automatique d’un contenu
       9. Guillemets à utiliser
       10. Réinitialisation d’un compteur
       11. Incrémentation d’un compteur
       12. Sens de l’écriture
       13. Écriture bidirectionnelle
    3. Bordures
       1. Style de bordure
       2. Styles de bordure pour chaque côté
       3. Épaisseur de bordure
       4. Épaisseur de bordure pour chaque côté
       5. Couleur de bordure
       6. Couleur de bordure pour chaque côté
       7. Raccourci pour toutes les propriétés de bordure
       8. Raccourci des propriétés de bordure pour chaque côté
       9. Contour superposé à un élément
    4. Images et couleurs d’arrière-plan
       1. Couleur d’arrière-plan
       2. Image d’arrière-plan
       3. Répétition ou non de l’image d’arrière-plan
       4. Alignement de l’image d’arrière-plan
       5. Fixation de l’image d’arrière-plan
       6. Raccourcis pour les arrière-plans
    5. Listes à puces ou numérotées
       1. Type de puce ou de numérotation
       2. Utilisation d’une image comme puce
       3. Position de la puce
       4. Raccourci pour toutes les propriétés de liste
    6. Les tableaux
       1. Largeur fixe ou variable des colonnes ou du tableau
       2. Recouvrement des bordures
       3. Espacement entre les bordures de cellules
       4. Contour des cellules vides
       5. Position du titre du tableau
       6. Alignement sur la virgule
       7. Alignement vertical des cellules
11. 6. POSITIONNEMENT DES BLOCS
    1. Marges et dimensions d’un bloc
       1. Marges externes autour d’un bloc
       2. Raccourci pour les marges externes
       3. Marges internes d’un bloc
       4. Raccourci pour les marges internes
       5. Largeur fixe pour un bloc ou une image
       6. Hauteur fixe pour un bloc ou une image
       7. Largeur et hauteur totales d’un bloc
       8. Largeur et hauteur minimales
       9. Largeur et hauteur maximales
    2. Position des éléments
       1. Flux normal des éléments
       2. Principe du positionnement des blocs
       3. Types de position possibles
          1. Position normale
          2. Position relative, absolue ou fixe
          3. Position flottante
       4. Utilisation des différents types de positionnement
          1. Élément dans le flux (position normale)
          2. Position relative
          3. Position absolue
          4. Position fixe
          5. Élément flottant
       5. Type de positionnement d’un bloc
       6. Décalages indiquant la position d’un bloc
       7. Niveau d’empilement des blocs
       8. Transformation en bloc flottant
       9. Pas d’éléments flottants sur le côté
       10. Affichage ou non d’un élément
       11. Affichage des débordements
       12. Zone visible d’une boîte
       13. Changement de type d’élément
    3. Délimitation des blocs
    4. Exemples de positionnement
       1. Image du haut (nuages)
       2. Image de l’arbre en position absolue
       3. Sous-titre « En images » en position relative
       4. Centrage horizontal du titre
       5. Titre latéral fixé sur l’écran
       6. Position absolue pour la galerie d’images
       7. Images côte à côte en position flottante
    5. Centrage d’éléments à l’intérieur des blocs
       1. Centrage horizontal
          1. Centrage horizontal d’éléments en ligne
          2. Centrage horizontal de blocs
       2. Centrage vertical
          1. Centrage vertical d’éléments en ligne
          2. Centrage vertical de blocs
          3. Exemple de centrage vertical
12. 7. PRINCIPALES NOUVEAUTÉS DES CSS
    1. Du relief pour nos pages
    2. Nouveaux types de sélecteurs
       1. Sélecteur de voisinage
       2. Sélection sur les attributs
          1. Attribut existant ou ayant une valeur donnée
          2. Attribut sélectionné sur une partie de son contenu
          3. Attribut commençant par…
          4. Attribut se terminant par…
          5. Attribut contenant…
       3. Pseudo-classes
          1. Élément ou attribut différent de…
          2. Pseudo-classes pour les éléments de formulaire
          3. Distinction des éléments inclus dans un bloc
    3. Codes couleurs et niveaux de transparence
       1. Niveau d’opacité
       2. Codage RGBA des couleurs
       3. Codages HSL et HSLA des couleurs
    4. De nouveaux effets pour le texte
       1. Style d’écriture
          1. Étirement des caractères
       2. Une police originale avec @font-face
       3. Ombrage du texte
       4. Présentation et ergonomie
          1. Apparence d’un élément
          2. Marqueur de ligne tronquée
          3. Coupure des mots trop longs
    5. Des bordures plus variées
       1. Nouvelles lignes d’encadrement
       2. Des images en guise de bordures
       3. Enfin, des coins arrondis !
       4. Des ombres pour nos boîtes
       5. Espacement pour encadrement double
       6. Dimensions des blocs
       7. Dimensions globales des blocs
       8. Blocs de dimensions modifiables
    6. Couleurs et images de fond
       1. Plusieurs images d’arrière-plan
       2. Placement et étendue des images d’arrière-plan
       3. Fixation de l’image d’arrière-plan
       4. Dégradés de couleur
          1. Dégradé linéaire
          2. Dégradé radial
          3. Dégradés répétitifs
    7. Multicolonnage
       1. Nombre et largeur de colonnes
       2. Espacement des colonnes
       3. Trait de séparation des colonnes
       4. Équilibrage des colonnes
       5. Titre sur plusieurs colonnes
    8. Transformations géométriques
       1. Propriété de transformation
       2. Fonctions de transformation 2D
       3. Fonctions de transformation 3D
    9. Le Web s’anime en CSS 3
       1. Les transitions
       2. Les animations
    10. Les CSS 3 : bientôt et déjà !
13. 8. EXEMPLES DE SITES WEB
    1. Structure d’une page web
    2. Code HTML de base
    3. Créer des pages de base à menu horizontal ou vertical
       1. Page de base avec menu horizontal
       2. Page de base avec menu vertical
    4. Insérer les images de fond de nos sites
       1. Une grande image pour toute la page
       2. Site contenant plusieurs images de fond
14. 9. UN SITE WEB POUR LES MOBILES
    1. Les contraintes du Web mobile
    2. Des feuilles de style spécifiques
       1. Sélection en fonction du type d’écran
       2. Une sélection plus précise en CSS 3
          1. Syntaxe de sélection de média
          2. Application aux navigateurs mobiles
    3. Les règles de conception pour mobiles
    4. Adaptation pratique d’un site pour le Web mobile
       1. Ajouter une version pour mobile à un site existant
       2. Adaptation d’une page aux mobiles
       3. Page d’accueil et menu pour mobiles
15. 10. DIFFÉRENTS TYPES DE MÉDIAS
    1. Types de médias
    2. Média paginé : styles CSS 2 et CSS 3 pour l’impression
       1. Gestion des veuves
       2. Gestion des orphelines
       3. Saut de page avant
       4. Saut de page après
       5. Coupure par un saut de page
       6. Dimensions d’une page
       7. Sélecteur de page
       8. Référence à un type de page
       9. Paramétrage des images
          1. Rotation d’image
          2. Options de remplissage de la page par une image
          3. Positionnement d’une image sur la page
    3. Média sonore : fonctions audio CSS 3
16. A. COULEURS
    1. Les 16 couleurs de base
    2. Couleurs sûres
    3. Liste de toutes les couleurs nommées
17. B. COMPORTEMENT DES PRINCIPAUX NAVIGATEURS
    1. Test des pages sur plusieurs navigateurs
    2. Adaptations pour les anciens navigateurs
       1. Balises HTML conditionnelles
    3. Règles de style en fonction des navigateurs
       1. Règles de style pour Internet Explorer 6 et versions antérieures
       2. Règles de style pour Internet Explorer 7 seul
    4. Propriétés de styles affectées à un navigateur
    5. Compensation en JavaScript
    6. Interprétation du HTML et des propriétés CSS 2
       1. Principaux défauts des anciennes versions d’Internet Explorer
          1. Problèmes liés à Internet Explorer 6
          2. Problèmes liés à Internet Explorer 7
       2. Test complet des anciens navigateurs
    7. Interprétation des propriétés CSS 3
       1. Nouveaux sélecteurs CSS 3
       2. Polices et couleurs
       3. Propriétés CSS 3
18. C. RÉSUMÉ DES PROPRIÉTÉS CSS
    1. Propriétés communes aux normes CSS 2 et CSS 3
       1. Propriétés d’affichage
    2. Principales propriétés spécifiques aux CSS 3
    3. Styles pour les médias paginés et sonores
       1. Média paginé
       2. Média sonore
    4. Propriétés classées par catégories
       1. Propriétés communes aux CSS 2 et CSS 3
       2. Propriétés spécifiques aux CSS 3
       3. Médias paginés et sonores
19. D. RÉFÉRENCES BIBLIOGRAPHIQUES ET SITES WEB
    1. Bibliographie
    2. Sites web utiles
20. INDEX