Premiers pas en CSS et HTML

Book description

Choisissez la simplicité et l'élégance du couple HTML et CSS 
pour créer vos sites web avec style et panache !

  • Séparez mise en forme CSS et contenu HTML pour plus de simplicité et de souplesse ;
  • Changez sans peine la charte graphique de votre site ;
  • Apprenez à écrire une feuille de style CSS pour une présentation homogène ;
  • Comprenez le HTML : l'imbrication, la hiérarchie des éléments et balises ;
  • Enrichissez vos pages : mise en forme et alignement du texte et des images, marges et positionnement des blocs ;
  • Insérez des images, sons, vidéos et animations Flash ;
  • Spécifiez des styles destinés aux terminaux mobiles : Android, iPhone, Windows Phone...

Cette quatrième édition tient compte de l'évolution des standards (HTML 5 et CSS 3) et des navigateurs. Depuis les notions de base, elle vous conduit jusqu'à la mise en place d'un site complet, adapté aux écrans d'ordinateur comme aux smartphones, grâce à deux

En annexes : Codage des principales couleurs - Spécificités des navigateurs Mozilla Firefox, Internet Explorer, Chrome, Safari, Opéra - Aide-mémoire des propriétés CSS 2 et 3.


Au sommaire

  • Introduction au XHTML et aux feuilles de style CSS
  • L'essentiel du XHTML
  • Nouveautés du HTML5
  • Ecriture des feuilles de style
  • Propriétés de mise en forme
  • Positionnement des blocs
  • Principales nouveautés des CSS 3
  • Exemples de sites web
  • Un site web pour les mobiles
  • Différents types de média
  • A. Couleurs
  • B. Comportement des principaux navigateurs
  • C. Résumé des propriétés CSS
  • D. Références bibliographiques et sites web

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

Product information

  • Title: Premiers pas en CSS et HTML
  • Author(s): Francis Draillard
  • Release date: January 2012
  • Publisher(s): Eyrolles
  • ISBN: 9782212133387