Parfait
Christophe LHTML5 et CSS 3 Maîtrisez les standards de la création de sites web (3e édition)
1 avis
Ce guide sur HTML5 et CSS3 s'adresse aux développeurs web désireux de créer des sites modernes selon les bonnes pratiques. Avec des exemples concrets et des captures d'écran, vous apprendrez progressivement la conception de sites sémantiques, l'utilisation des éléments HTML et CSS courants, ainsi que les techniques de mise en forme et de mise en page. Découvrez également les microdonnées, les techniques de mise en page flexbox et grid, ainsi que les animations CSS pour dynamiser vos créations...
Consulter des extraits du livre en ligne
Aperçu du livre papier
- Niveau Initié à Confirmé
- Nombre de pages 510 pages
- Parution avril 2024
- Niveau Initié à Confirmé
- Parution avril 2024
Ce livre sur le langage HTML5 et les feuilles de styles CSS 3, langages fondateurs dans la création de sites web, s’adresse aux développeurs qui souhaitent disposer des connaissances nécessaires pour créer et faire évoluer des sites web dans le respect des bonnes pratiques.
Le livre est rédigé de façon à permettre un apprentissage progressif des éléments HTML et des propriétés CSS les plus couramment utilisés. Il n’a pas pour objectif de présenter l’ensemble des syntaxes mais uniquement celles couramment exploitées dans la création de sites web modernes. Les exemples de code présentés par l’auteur sont illustrés par des captures d’écran afin que le lecteur puisse se faire une idée de l’affichage obtenu.
Dans la première partie du livre, l’auteur donne les informations nécessaires pour bien appréhender la conception de site web. Il présente les spécifications techniques du HTML et des CSS, le rôle essentiel des navigateurs et leur compatibilité avec les éléments HTML et les propriétés CSS, ainsi que les bonnes pratiques de conception de sites web pour obtenir des contenus sémantiques bien conçus.
Dans la deuxième partie, le lecteur apprend à concevoir la structure des pages web avec des éléments HTML sémantiques dédiés. Il étudie ensuite les éléments qui permettent d’insérer du texte, des liens, des tableaux, des images, des formulaires, sans oublier des contenus multimédias. Un chapitre est consacré aux Microdata permettant d’obtenir un site sémantique et d’optimiser son référencement.
La troisième partie permet au lecteur d’exploiter les CSS afin de mettre en forme et de mettre en page un site web. Il y apprend la syntaxe des CSS et des sélecteurs puis étudie les notions d’héritage et de cascade. Ensuite, il découvre comment mettre en forme chaque composant d’une page web : le texte, les images, les formulaires ainsi que les boîtes conteneurs. Les nouvelles techniques de mise en page avec les modules Flexbox et Grid sont détaillées dans un chapitre dédié et la conception des sites Responsive est également abordée. L’auteur termine avec l’étude des modules CSS dédiés aux animations pour dynamiser des pages web.
Le livre est rédigé de façon à permettre un apprentissage progressif des éléments HTML et des propriétés CSS les plus couramment utilisés. Il n’a pas pour objectif de présenter l’ensemble des syntaxes mais uniquement celles couramment exploitées dans la création de sites web modernes. Les exemples de code présentés par l’auteur sont illustrés par des captures d’écran afin que le lecteur puisse se faire une idée de l’affichage obtenu.
Dans la première partie du livre, l’auteur donne les informations nécessaires pour bien appréhender la conception de site web. Il présente les spécifications techniques du HTML et des CSS, le rôle essentiel des navigateurs et leur compatibilité avec les éléments HTML et les propriétés CSS, ainsi que les bonnes pratiques de conception de sites web pour obtenir des contenus sémantiques bien conçus.
Dans la deuxième partie, le lecteur apprend à concevoir la structure des pages web avec des éléments HTML sémantiques dédiés. Il étudie ensuite les éléments qui permettent d’insérer du texte, des liens, des tableaux, des images, des formulaires, sans oublier des contenus multimédias. Un chapitre est consacré aux Microdata permettant d’obtenir un site sémantique et d’optimiser son référencement.
La troisième partie permet au lecteur d’exploiter les CSS afin de mettre en forme et de mettre en page un site web. Il y apprend la syntaxe des CSS et des sélecteurs puis étudie les notions d’héritage et de cascade. Ensuite, il découvre comment mettre en forme chaque composant d’une page web : le texte, les images, les formulaires ainsi que les boîtes conteneurs. Les nouvelles techniques de mise en page avec les modules Flexbox et Grid sont détaillées dans un chapitre dédié et la conception des sites Responsive est également abordée. L’auteur termine avec l’étude des modules CSS dédiés aux animations pour dynamiser des pages web.
Avant-propos
- Introduction
L’évolution des spécifications
- Une brève histoire du Web
- Les travaux d’élaboration des spécifications
- L’évolution du HTML
- L'avènement du WHATWG
- L’évolution des CSS
Les navigateurs
- L’évolution des navigateurs
- Les outils de développement
- La compatibilité des navigateurs
Les bonnes pratiques
- Séparer le contenu de la mise en forme
- Utiliser une structure sémantique
- Optimiser le code et organiser vos fichiers
- Un exemple d’une page bien formée
- Valider le code de vos pages
Les éléments HTML
- Bien utiliser le HTML
- Les balises et les contenus
- Les attributs des éléments
- Le bon usage de la syntaxe
- L’imbrication des éléments
- Les commentaires
La structure des pages
- La structure générale des pages web
- La déclaration doctype
- L’élément <html></html>
- L'élément <head></head>
- 1. Les éléments enfant de l’en-tête
- 2. Les éléments <meta>
- 3. L’élément <title></title>
- 4. L’élément <base>
- 5. L’élément <link>
- 6. L’élément <style></style>
- 7. L’élément <script></script>
- L’élément <body></body>
- Exemple d’une structure simple
Les conteneurs sémantiques
- Bien utiliser les conteneurs sémantiques
- L'élément <div></div>
- L'élément <span></span>
- L'élément <header></header>
- L'élément <footer></footer>
- L'élément <aside></aside>
- L'élément <nav></nav>
- L’élément <main></main>
- L’élément <section></section>
- L'élément <article></article>
- L'élément <search></search>
- L’affichage des éléments de structure
- Deux exemples de structure sémantique de page
- 1. Une structure sémantique simple
- 2. Une structure sémantique plus élaborée
- Un exemple de structure sémantique d'un article
Les conteneurs de texte
- Bien utiliser les conteneurs de texte
- Les attributs de langue et de direction du texte
- Les titres
- Les paragraphes
- Les citations
- Les listes
- 1. Les différents types de liste
- 2. Les listes non ordonnées
- 3. Les listes ordonnées
- 4. L’attribut <value> de <li></li></value>
- 5. Les listes de définitions
- Les adresses
- Le texte préformaté
- Les données numériques
- Les lignes horizontales
La mise en forme sémantique du texte
- Utiliser une mise en forme sémantique
- Insérer des caractères spéciaux
- L’emphase forte
- L’emphase simple
- Mettre en gras et en italique
- L’indice et l’exposant
- Le souligné
- Le barré
- Réduire la taille de caractères
- Les titres d’œuvres et les citations courtes
- Les insertions et suppressions
- Le retour à la ligne
- D’autres'mises en forme sémantiques
Les éléments d’interaction
- Afficher des détails
- Utiliser une boîte de dialogue
- Afficher une valeur dans un graphique
- 1. Avec une barre dans un intervalle
- 2. Avec une barre de progression
Les liens
- Insertion de liens pour lier les pages
- La structure des liens
- Les liens vers des pages
- Les liens internes
- Le contexte d’ouverture du lien
- Les relations des liens
- Les liens vers les messageries
- Les liens de téléchargement
- Des liens en image
- La mise en forme initiale
Les tableaux
- La bonne utilisation des tableaux
- La structure des tableaux
- Les lignes
- Les cellules
- La fusion des cellules
- Le titre
- Les groupes de colonnes
- 1. Regrouper des colonnes
- 2. Cibler des colonnes
- Les tableaux structurés
- La mise en forme initiale
Les images
- Bien exploiter les images
- Comprendre les formats de compression
- 1. Compresser les images
- 2. Le format GIF
- 3. Le format JPEG
- 4. Le format PNG
- Insérer des images avec l’élément <img>
- 1. L’utilisation des images
- 2. L’attribut src
- 3. L’attribut alt
- 4. Les attributs width et height
- 5. Les attributs srcset et size
- Insérer des illustrations avec l’élément <figure></figure>
- 1. L’utilisation des illustrations
- 2. L’élément <figure></figure>
- 3. L’élément <figcaption></figcaption>
- 4. La mise en forme initiale
Les formulaires
- La présence des formulaires dans les pages web
- La structure des formulaires
- 1. Le formulaire
- 2. Les étiquettes
- 3. Grouper des champs
- 4. Les attributs communs
- Les champs de texte
- 1. La saisie de texte
- 2. Les champs de texte simples
- 3. Les champs de texte pour les mots de passe
- 4. Les champs de texte multilignes
- Les listes de valeurs
- Les boutons radio à choix unique
- Les cases à cocher à choix multiple
- D’autres types de champs avec <input>
- Les aides à la saisie
- 1. Les objectifs
- 2. La consigne de saisie
- 3. Activer un champ
- 4. L’auto-complétion
- 5. Rendre un champ obligatoire
- 6. Les saisies autorisées
- Les boutons d’action
- Un exemple complet de formulaire
- 1. Le code complet du formulaire
- 2. Le formulaire
- 3. Les boutons radio
- 4. Les champs de texte
- 5. Le champ numérique
- 6. Le champ d’adresse mail
- 7. Le champ de date
- 8. La liste déroulante
- 9. Les cases à cocher
- 10. Les boutons d’action
- Les propriétés initiales d'affichage des éléments des formulaires
Le multimédia
- La présence du multimédia
- Les formats et les codecs
- L’insertion d’une vidéo
- 1. L’élément <video></video>
- 2. La source de la vidéo
- 3. Les contrôles
- 4. Précharger la vidéo
- 5. Afficher une image d’ouverture
- 6. Spécifier les dimensions
- 7. Proposer plusieurs sources
- 8. Jouer en boucle et désactiver le son
- L’insertion d’un fichier audio
Le Web sémantique avec Microdata
- L’état des lieux du Web sémantique
- L’objectif de Microdata
- 1. La norme et les schémas
- 2. Les attributs
- Le schéma pour les personnes
- 1. Définir l’utilisation de Microdataavec itemscope
- 2. Indiquer le schéma utilisé avec itemtype
- 3. Spécifier les propriétésavec itemprop
- Imbriquer des schémas
- 1. Pourquoi imbriquer des schémas ?
- 2. Les deux schémas nécessaires
- 3. Faire référence à un élément
Intégrer les styles CSS
- Le rôle des CSS
- Les styles intégrés dans un élément HTML
- Les styles définis dans la page
- Les styles définis dans un fichier .css
- Les styles importés
Définir les styles CSS
- La structure d’une règle de style
- 1. La terminologie des CSS
- 2. Définir une règle de style
- 3. Les règles de nommage
- Les unités de mesure
- 1. L’utilisation des unités de mesure
- 2. Les valeurs initiale et héritée
- 3. Les valeurs numériques
- 4. Les unités de longueur
- 5. Les valeurs calculées
- La notation des couleurs
- 1. Utiliser les couleurs
- 2. La notation nominative
- 3. La notation hexadécimale
- 4. Les notations RGB et RGBA
- 5. Les notations HSL et HSLA
- Les commentaires
- Les sélecteurs
- 1. L’objectif des sélecteurs
- 2. Le sélecteur universel
- 3. Les sélecteurs de type
- 4. Les sélecteurs de classe
- 5. Les sélecteurs de classe de type
- 6. Les sélecteurs d’identification
- 7. Les sélecteurs d’attribut
- 8. Les sélecteurs de pseudo-classes
- a. Utiliser les pseudo-classes
- b. Les pseudo-classes dynamiques des liens
- c. Les pseudo-classes dynamiques des actions utilisateurs
- d. La pseudo-classe d’ancre
- e. La pseudo-classe de langue
- f. Les pseudo-classes d’état
- g. Les pseudo-classes de structure
- h. La pseudo-classe de négation
- 9. Les sélecteurs de pseudo-éléments
- a. Le pseudo-élément de premièreligne
- b. Le pseudo-élément de premièrelettre
- c. Les pseudo-éléments de contenu
- 10. Les combinaisons de sélecteurs
- a. Les sélecteurs combinés
- b. Les combinaisons descendantes
- c. Les combinaisons d’enfants
- d. Les combinaisons de frères immédiats
- e. Les combinaisons de frères
- 1. La notion d’héritage
- 2. La spécificité des sélecteurs
- a. Le calcul de la spécificité dessélecteurs
- b. Un exemple des spécificités dessélecteurs
- a. Les priorités dans la cascade
- b. Les conflits dans la cascade
Les styles pour les polices de caractères
- Le module CSS 3 pour les polices de caractères
- Les polices de caractères
- 1. Choisir une police de caractères
- 2. Les familles de caractères génériques
- 3. Déclarer une police de caractères
- 4. Embarquer une police de caractères
- La taille des caractères
- 1. Les tailles par défaut
- 2. Modifier la taille des caractères
- La mise en forme des caractères
- 1. La graisse des caractères
- 2. L’italique des caractères
- 3. La chasse des caractères
- 4. Les petites capitales des caractères
- La syntaxe raccourcie
- Le module CSS 4 pour les polices de caractères
Les styles pour le texte
- L’application des styles
- La couleur du texte
- Les décorations
- 1. Le module CSS
- 2. Les lignes pour le texte
- 3. Les lignes décoratives
- 4. Les ombres portées
- La mise en forme du texte
- 1. Le module CSS
- 2. Le changement de casse
- 3. Les espaces entre les caractères et les mots
- 4. Les espaces blancs
- 5. Les alignements du texte
- 6. Le retrait de première ligne
- 7. La césure des fins de ligne
- D'autres propriétés pour le texte
- 1. L’interligne
- 2. Le texte en excès
- Le module CSS 4 pour la mise en forme du texte
Les styles pour les conteneurs de texte
- Les titres, les paragraphes et les citations
- Les listes
- 1. Les éléments des listes et les styles
- 2. Les styles d’énumération
- 3. L’énumération avec une image
- 4. La position du symbole
- 5. La syntaxe raccourcie
- Les tableaux
- 1. Le texte dans les tableaux
- 2. La bordure du tableau
- 3. Les bordures des cellules
- 4. L’espace interne des cellules
- 5. Les cellules vides
- 6. Le titre du tableau
- Les formulaires
- 1. La mise en forme du texte des champs
- 2. Les états actif et inactif des objets
- 3. Les champs obligatoires
- 4. La largeur des étiquettes et des champs
- 5. Mettre en forme le focus des champs
Les styles pour les boîtes
- Le concept du modèle de boîte
- Les affichages des boîtes
- 1. Les différents types d’affichage
- 2. L’affichage en bloc
- 3. L’affichage en ligne
- 4. Changer le type d’affichage
- Les marges externes
- 1. La marge globale et les marges différenciées
- 2. Les syntaxes raccourcies
- Les bordures
- Les remplissages internes
- La largeur et la hauteur des boîtes
- 1. Les dimensions du contenu
- 2. Les dimensions d’affichage
- Les arrière-plans
- 1. La couleur d’arrière-plan
- 2. Les images d’arrière-plan
- 3. Les dégradés de couleurs
- 4. L’opacité des boîtes
- Les coins arrondis des boîtes
- Les ombres portées des boîtes
La mise en page à l'aide des boîtes
- Les objectifs
- Le positionnement des boîtes
- 1. Les positions des boîtes
- 2. La position relative
- 3. La position absolue
- 4. La position fixe
- Le flottement des boîtes
- 1. Habiller une image
- 2. Interdire le flottement
- La superposition des boîtes
- La mise en page en affichage tableau
- Le débordement des boîtes
- La visibilité des boîtes
Le Responsive Web Design
- Le développement responsive
- Les requêtes de média
- 1. Les critères
- 2. La syntaxe
- 3. Les valeurs minimales et maximales
- 4. Les opérateurs logiques
- La taille des écrans
- Un exemple de mise en page responsive
- 1. Le site initial
- 2. Le site responsive
Créer des mises en page modernes
- Les objectifs
- Utiliser le module CSS Flexible Box Layout
- 1. La mise en page flexible
- 2. Les conteneurs flexibles
- a. Le conteneur avec un affichage flex
- b. Le conteneur avec un affichage inline-flex
- 3. Le flux des éléments enfants
- a. Définir la direction
- b. Contrôler le flux des élémentsenfants en ligne
- c. Contrôler le flux des élémentsenfants en bloc
- 4. Aligner les éléments enfants flexibles
- a. Les alignements sur l’axe principal horizontal
- b. Les alignements sur l’axe principal vertical
- c. Les alignements sur l’axe secondaire vertical
- d. Les alignements sur l’axe secondaire horizontal
- e. Les alignements et le passage à la ligne
- 5. Les propriétés des enfants flexibles
- a. Appliquer des propriétés individuelles
- b. Modifier l’ordre d’affichage des enfants
- c. Modifier l’alignement des enfants
- d. Autoriser l’agrandissement des enfants
- e. Autoriser le rétrécissement desenfants
- f. Définir la largeur des enfants
- g. La syntaxe raccourcie des propriétésindividuelles
- 6. Créer une mise en page plein écranet responsive
- a. Les affichages obtenus
- b. La structure flexible de la mise en page
- c. Les propriétés pour l’élément<body></body>
- d. Les propriétés pour l’élément<main></main>
- e. Les propriétés CSS pour la miseen forme générale
- f. La mise en page responsive
- g. Le code complet de l’exemple
- 1. La mise en page en grille
- 2. Connaître le vocabulaire des grilles
- 3. Comprendre la structure des grilles
- a. Le conteneur de la grille
- b. Déclarer des colonnes
- c. Déclarer des lignes
- d. Utiliser la syntaxe raccourcie
- e. Appliquer d’autres unités
- f. Insérer des gouttières
- g. Mettre en forme le conteneur
- a. Placer les enfants dans la grille
- b. Placer les enfants dans les lignes
- c. Exploiter la numérotation des lignes
- d. Nommer les lignes de la grille
- e. Nommer des zones de la grille
- f. Aligner les cellules dans la grille
- a. Les affichages responsives
- b. La structure HTML de la grille
- c. Les styles CSS en Mobile First
- d. La requête de média pour les écransdes tablettes
- e. La requête de média pour les grands écrans
- f. Le code complet de la grille responsive
Les modules d’animation
- Les modules CSS
- Les transformations
- 1. La fonction et le point de référence
- 2. Le déplacement
- 3. La mise à l’échelle
- 4. La rotation
- 5. La déformation
- 6. Appliquer toutes les transformations
- Les transitions
- 1. Créer des transitions
- 2. Créer un déplacement horizontal
- 3. Créer un déplacement horizontalet vertical
- Les animations
- 1. Créer des animations
- 2. Créer un déplacement infini
- 3. Créer un formulaire animé
Des modules CSS pour les graphistes
- Des modules en devenir
- Les masques
- 1. Le module CSS
- 2. Créer un masque
- L'habillage du texte
- 1. Le module CSS
- 2. Créer un habillage
Les feuilles de style pour l’impression
- L’impression des pages web
- Les feuilles de style spécifiques
- 1. Les liaisons aux fichiers CSS
- 2. Les requêtes de média
- Les propriétés globales des pages
- Les polices de caractères
- Les éléments non imprimés
- Les ruptures de lecture
- 1. Les sauts de page
- 2. Les lignes solidaires
- 3. Les veuves et les orphelines
- Les liens hypertextes
Christophe AUBRY
Responsable pédagogique dans un centre de formation et formateur sur les technologies Web et les Arts graphiques pendant plus de quinze ans, Christophe AUBRY est aujourd'hui dirigeant de la société netPlume spécialisée dans la rédaction pédagogique et la création de sites internet. Auteur de nombreux livres et vidéos aux Editions ENI (HTML/CSS, RWD, WordPress, Drupal, Joomla…), il reste au fait des nouveautés concernant la conception des sites web en effectuant une veille technologique régulière. Il est également le créateur de la chaîne YouTube LaTeX et la plume.
En savoir plus