HTML5 et CSS3 Maîtrisez les standards de la création de sites web (2e édition)

Christophe AUBRY

Ce support sur le langage HTML5 (en version 5.2 au moment de l'écriture) et les feuilles de styles CSS3, 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 support est rédigé de façon à permettre un apprentissage progressif des éléments HTML et des...

Aperçu du livre papier

Niveau Initié à Confirmé
Nombre de pages 396 pages
Parution février 2021

Niveau Débutant à Initié
Parution février 2021

Présentation

Ce support sur le langage HTML5 (en version 5.2 au moment de l'écriture) et les feuilles de styles CSS3, 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 support 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 support, 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 (les fameuses recommandations proposées par le W3C), 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.

Table des matières

L’évolution des spécifications

1. Une brève histoire du Web
2. Les travaux d’élaboration des spécifications
3. L’évolution du HTML
4. L’évolution des CSS

Les navigateurs

1. L’évolution des navigateurs
2. Les outils de développement
3. La compatibilité des navigateurs

Les bonnes pratiques

1. Séparer le contenu de la mise en forme
2. Utiliser une structure sémantique
3. Optimiser le code et organiser vos fichiers
4. Un exemple d’une page bien formée
5. Valider le code de vos pages

Les éléments HTML

1. Bien utiliser le HTML
2. Les balises et les contenus
3. Les attributs des éléments
4. Le bon usage de la syntaxe
5. L’imbrication des éléments
6. Les commentaires

La structure des pages

1. La structure générale des pages web
2. La déclaration doctype
3. L’élément <html>
4. L'élément <head>
1. 4.1 Les éléments enfant de l’en-tête
2. 4.2 Les éléments <meta>
3. 4.3 L’élément <title>
4. 4.4 L’élément <link>
5. 4.5 L’élément <style>
6. 4.6 L’élément <script>
5. L’élément <body>
6. Les propriétés d'affichage
7. Exemple d’une structure simple

Les conteneurs sémantiques

1. Bien utiliser les conteneurs sémantiques
2. L'élément <div>
3. L'élément <span>
4. L'élément <header>
5. L'élément <footer>
6. L'élément <aside>
7. L'élément <nav>
8. L’élément <main>
9. L’élément <section>
10. L'élément <article>
11. L’affichage des éléments de structure
12. Deux exemples de structure sémantique de page
1. 12.1 Une structure sémantique simple
2. 12.2 Une structure sémantique plus élaborée
13. Un exemple de structure sémantique d'un article

Les conteneurs de texte

1. Bien utiliser les conteneurs de texte
2. Les attributs de langue et de direction du texte
3. Les titres
4. Les paragraphes
5. Les citations
6. Les listes
1. 6.1 Les différents types de liste
2. 6.2 Les listes non ordonnées
3. 6.3 Les listes ordonnées
4. 6.4 L’attribut de <li>
5. 6.5 Les listes de définitions
7. Les adresses
8. Le texte préformaté
9. Les lignes horizontales

La mise en forme sémantique du texte

1. Utiliser une mise en forme sémantique
2. Insérer des caractères spéciaux
3. L’emphase forte
4. L’emphase simple
5. Mettre en gras et en italique
6. L’indice et l’exposant
7. Le souligné
8. Le barré
9. Réduire la taille de caractères
10. Les titres d’œuvres et les citations courtes
11. Les insertions et suppressions
12. Le retour à la ligne
13. D'autres mises en forme sémantiques

Les éléments d’interaction

1. Afficher des détails
2. Utiliser une boîte de dialogue

Les liens

1. Insertion de liens pour lier les pages
2. La structure des liens
3. Les liens vers des pages
4. Les liens internes
5. Le contexte d’ouverture du lien
6. Les relations des liens
7. Les liens vers les messageries
8. Les liens de téléchargement
9. Des liens en image

Les tableaux

1. La bonne utilisation des tableaux
2. La structure des tableaux
3. Les lignes
4. Les cellules
5. La fusion des cellules
6. Le titre
7. Les groupes de colonnes
1. 7.1 Regrouper des colonnes
2. 7.2 Cibler des colonnes
8. Les tableaux structurés

Les images

1. Bien exploiter les images
2. Comprendre les formats de compression
1. 2.1 Compresser les images
2. 2.2 Le format GIF
3. 2.3 Le format JPEG
4. 2.4 Le format PNG
3. Insérer des images avec l’élément <img>
1. 3.1 L’utilisation des images
2. 3.2 L’attribut src
3. 3.3 L’attribut alt
4. 3.4 Les attributs width et height
5. 3.5 Les attributs srcset et size
4. Insérer des illustrations avec l’élément <figure>
1. 4.1 L’utilisation des illustrations
2. 4.2 L’élément <figure>
3. 4.3 L’élément <figcaption>

Les formulaires

1. La présence des formulaires dans les pages web
2. La structure des formulaires
1. 2.1 Le formulaire
2. 2.2 Les étiquettes
3. 2.3 Grouper des champs
4. 2.4 Les attributs communs
3. Les champs de texte
1. 3.1 La saisie de texte
2. 3.2 Les champs de texte simples
3. 3.3 Les champs de texte pour les mots de passe
4. 3.4 Les champs de texte multilignes
4. Les listes de valeurs
5. Les boutons radio à choix unique
6. Les cases à cocher à choix multiple
7. D’autres types de champs avec <input>
8. Les aides à la saisie
1. 8.1 Les objectifs
2. 8.2 La consigne de saisie
3. 8.3 Activer un champ
4. 8.4 L’auto-complétion
5. 8.5 Rendre un champ obligatoire
6. 8.6 Les saisies autorisées
9. Les boutons d’action
10. Un exemple complet de formulaire
1. 10.1 Le code complet du formulaire
2. 10.2 Le formulaire
3. 10.3 Les boutons radio
4. 10.4 Les champs de texte
5. 10.5 Le champ numérique
6. 10.6 Le champ d’adresse mail
7. 10.7 Le champ de date
8. 10.8 La liste déroulante
9. 10.9 Les cases à cocher
10. 10.10 Les boutons d’action

Le multimédia

1. La présence du multimédia
2. Les formats et les codecs
3. L’insertion d’une vidéo
1. 3.1 L’élément <video>
2. 3.2 La source de la vidéo
3. 3.3 Les contrôles
4. 3.4 Précharger la vidéo
5. 3.5 Afficher une image d’ouverture
6. 3.6 Spécifier les dimensions
7. 3.7 Proposer plusieurs sources
8. 3.8 Jouer en boucle et désactiver le son
4. L’insertion d’un fichier audio

Le Web sémantique avec Microdata

1. L’état des lieux du Web sémantique
2. L’objectif de Microdata
1. 2.1 La norme et les schémas
2. 2.2 Les attributs
3. Le schéma pour les personnes
1. 3.1 Définir l’utilisation de Microdata avec itemscope
2. 3.2 Indiquer le schéma utilisé avec itemtype
3. 3.3 Spécifier les propriétés avec itemprop
4. Imbriquer des schémas
1. 4.1 Pourquoi imbriquer des schémas ?
2. 4.2 Les deux schémas nécessaires
3. 4.3 Faire référence à un élément

Intégrer les styles CSS

1. Le rôle des CSS
2. Les styles intégrés dans un élément HTML
3. Les styles définis dans la page
4. Les styles définis dans un fichier .css
5. Les styles importés

Définir les styles CSS

1. La structure d’une règle de style
1. 1.1 La terminologie des CSS
2. 1.2 Définir une règle de style
3. 1.3 Les règles de nommage
2. Les unités de mesure
1. 2.1 L’utilisation des unités de mesure
2. 2.2 Les valeurs initiale et héritée
3. 2.3 Les valeurs numériques
4. 2.4 Les unités de longueur
5. 2.5 Les valeurs calculées
3. La notation des couleurs
1. 3.1 Utiliser les couleurs
2. 3.2 La notation nominative
3. 3.3 La notation hexadécimale
4. 3.4 Les notations RGB et RGBA
5. 3.5 Les notations HSL et HSLA
4. Les commentaires
5. Les sélecteurs
1. 5.1 L’objectif des sélecteurs
2. 5.2 Le sélecteur universel
3. 5.3 Les sélecteurs de type
4. 5.4 Les sélecteurs de classe
5. 5.5 Les sélecteurs de classe de type
6. 5.6 Les sélecteurs d’identification
7. 5.7 Les sélecteurs d’attribut
8. 5.8 Les sélecteurs de pseudo-classes
  1. 5.8.1 Utiliser les pseudo-classes
  2. 5.8.2 Les pseudo-classes dynamiques des liens
  3. 5.8.3 Les pseudo-classes dynamiques des actions utilisateurs
  4. 5.8.4 La pseudo-classe d'ancre
  5. 5.8.5 La pseudo-classe de langue
  6. 5.8.6 Les pseudo-classes d’état
  7. 5.8.7 Les pseudo-classes de structure
  8. 5.8.8 La pseudo-classe de négation
9. 5.9 Les sélecteurs de pseudo-éléments
  1. 5.9.1 Le pseudo-élément de première ligne
  2. 5.9.2 Le pseudo-élément de première lettre
  3. 5.9.3 Les pseudo-éléments de contenu
10. 5.10 Les combinaisons de sélecteurs
  1. 5.10.1 Les sélecteurs combinés
  2. 5.10.2 Les combinaisons descendantes
  3. 5.10.3 Les combinaisons d’enfants
  4. 5.10.4 Les combinaisons de frères immédiats
  5. 5.10.5 Les combinaisons de frères
6. L’application des styles
1. 6.1 La notion d’héritage
2. 6.2 La spécificité des sélecteurs
  1. 6.2.1 Le calcul de la spécificité des sélecteurs
  2. 6.2.2 Un exemple des spécificités des sélecteurs
3. 6.3 La notion d’importance
4. 6.4 La notion de cascade
  1. 6.4.1 Les priorités dans la cascade
  2. 6.4.2 Les conflits dans la cascade
5. 6.5 L’ordre d’application des styles
7. La version 4 des sélecteurs

Les styles pour les polices de caractères

1. Le module CSS 3 pour les polices de caractères
2. Les polices de caractères
1. 2.1 Choisir une police de caractères
2. 2.2 Les familles de caractères génériques
3. 2.3 Déclarer une police de caractères
4. 2.4 Embarquer une police de caractères
3. La taille des caractères
1. 3.1 Les tailles par défaut
2. 3.2 Modifier la taille des caractères
4. La mise en forme des caractères
1. 4.1 La graisse des caractères
2. 4.2 L’italique des caractères
3. 4.3 La chasse des caractères
4. 4.4 Les petites capitales des caractères
5. La syntaxe raccourcie
6. Le module CSS 4 pour les polices de caractères

Les styles pour le texte

1. L’application des styles
2. La couleur du texte
3. Les décorations
1. 3.1 Le module CSS
2. 3.2 Les lignes pour le texte
3. 3.3 Les lignes décoratives
4. 3.4 Les ombres portées
4. La mise en forme du texte
1. 4.1 Le module CSS
2. 4.2 Le changement de casse
3. 4.3 Les espaces entre les caractères et les mots
4. 4.4 Les espaces blancs
5. 4.5 Les alignements du texte
6. 4.6 Le retrait de première ligne
7. 4.7 La césure des fins de ligne
5. D'autres propriétés pour le texte
1. 5.1 L'interligne
2. 5.2 Le texte en excès
6. Le module CSS 4 pour la mise en forme du texte

Les styles pour les conteneurs de texte

1. Les titres, les paragraphes et les citations
2. Les listes
1. 2.1 Les éléments des listes et les styles
2. 2.2 Les styles d'énumération
3. 2.3 L'énumération avec une image
4. 2.4 La position du symbole
5. 2.5 La syntaxe raccourcie
3. Les tableaux
1. 3.1 Le texte dans les tableaux
2. 3.2 La bordure du tableau
3. 3.3 Les bordures des cellules
4. 3.4 L'espace interne des cellules
5. 3.5 Les cellules vides
6. 3.6 Le titre du tableau
4. Les formulaires
1. 4.1 La mise en forme du texte des champs
2. 4.2 Les états actif et inactif des objets
3. 4.3 Les champs obligatoires
4. 4.4 La largeur des étiquettes et des champs
5. 4.5 Mettre en forme le focus des champs

Les styles pour les boîtes

1. Le concept du modèle de boîte
2. Les affichages des boîtes
1. 2.1 Les différents types d'affichage
2. 2.2 L'affichage en bloc
3. 2.3 L’affichage en ligne
4. 2.4 Changer le type d'affichage
3. Les marges externes
1. 3.1 La marge globale et les marges différenciées
2. 3.2 Les syntaxes raccourcies
4. Les bordures
5. Les remplissages internes
6. La largeur et la hauteur des boîtes
1. 6.1 Les dimensions du contenu
2. 6.2 Les dimensions d'affichage
7. Les arrière-plans
1. 7.1 La couleur d'arrière-plan
2. 7.2 Les images d’arrière-plan
3. 7.3 Les dégradés de couleurs
4. 7.4 L'opacité des boîtes
8. Les coins arrondis des boîtes
9. Les ombres portées des boîtes

La mise en page à l'aide des boîtes

1. Les objectifs
2. Le positionnement des boîtes
1. 2.1 Les positions des boîtes
2. 2.2 La position relative
3. 2.3 La position absolue
4. 2.4 La position fixe
3. Le flottement des boîtes
1. 3.1 Habiller une image
2. 3.2 Interdire le flottement
4. La superposition des boîtes
5. La mise en page en affichage tableau
6. Le débordement des boîtes
7. La visibilité des boîtes

Le Responsive Web Design

1. Le développement responsive
2. Les requêtes de média
1. 2.1 Les critères
2. 2.2 La syntaxe
3. 2.3 Les valeurs minimales et maximales
4. 2.4 Les opérateurs logiques
3. La taille des écrans
4. Un exemple de mise en page responsive
1. 4.1 Le site initial
2. 4.2 Le site responsive

Créer des mises en page modernes

1. Les objectifs
2. Utiliser le module CSS Flexible Box Layout
1. 2.1 La mise en page flexible
2. 2.2 Les conteneurs flexibles
  1. 2.2.1 Le conteneur avec un affichage flex
  2. 2.2.2 Le conteneur avec un affichage inline-flex
3. 2.3 Le flux des éléments enfants
  1. 2.3.1 Définir la direction
  2. 2.3.2 Contrôler le flux des éléments enfants en ligne
  3. 2.3.3 Contrôler le flux des éléments enfants en bloc
4. 2.4 Aligner les éléments enfants flexibles
  1. 2.4.1 Les alignements sur l'axe principal horizontal
  2. 2.4.2 Les alignements sur l’axe principal vertical
  3. 2.4.3 Les alignements sur l’axe secondaire vertical
  4. 2.4.4 Les alignements sur l’axe secondaire horizontal
  5. 2.4.5 Les alignements et le passage à la ligne
5. 2.5 Les propriétés des enfants flexibles
  1. 2.5.1 Appliquer des propriétés individuelles
  2. 2.5.2 Modifier l'ordre d'affichage des enfants
  3. 2.5.3 Modifier l’alignement des enfants
  4. 2.5.4 Autoriser l’agrandissement des enfants
  5. 2.5.5 Autoriser le rétrécissement des enfants
  6. 2.5.6 Définir la largeur des enfants
  7. 2.5.7 La syntaxe raccourcie des propriétés individuelles
6. 2.6 Créer une mise en page plein écran et responsive
  1. 2.6.1 Les affichages obtenus
  2. 2.6.2 La structure flexible de la mise en page
  3. 2.6.3 Les propriétés pour l'élément <body>
  4. 2.6.4 Les propriétés pour l'élément <main>
  5. 2.6.5 Les propriétés CSS pour la mise en forme générale
  6. 2.6.6 La mise en page responsive
  7. 2.6.7 Le code complet de l'exemple
3. Utiliser le module CSS Grid Layout
1. 3.1 La mise en page en grille
2. 3.2 Connaître le vocabulaire des grilles
3. 3.3 Comprendre la structure des grilles
  1. 3.3.1 Le conteneur de la grille
  2. 3.3.2 Déclarer des colonnes
  3. 3.3.3 Déclarer des lignes
  4. 3.3.4 Utiliser la syntaxe raccourcie
  5. 3.3.5 Appliquer d’autres unités
  6. 3.3.6 Insérer des gouttières
  7. 3.3.7 Mettre en forme le conteneur
4. 3.4 Positionner les éléments dans la grille
  1. 3.4.1 Placer les enfants dans la grille
  2. 3.4.2 Placer les enfants dans les lignes
  3. 3.4.3 Exploiter la numérotation des lignes
  4. 3.4.4 Nommer les lignes de la grille
  5. 3.4.5 Nommer des zones de la grille
  6. 3.4.6 Aligner les cellules dans la grille
5. 3.5 Créer une mise en page responsive avec une grille
  1. 3.5.1 Les affichages responsives
  2. 3.5.2 La structure HTML de la grille
  3. 3.5.3 Les styles CSS en Mobile First
  4. 3.5.4 La requête de média pour les écrans des tablettes
  5. 3.5.5 La requête de média pour les grands écrans
  6. 3.5.6 Le code complet de la grille responsive

Les modules d’animation

1. Les modules CSS
2. Les transformations
1. 2.1 La fonction et le point de référence
2. 2.2 Le déplacement
3. 2.3 La mise à l'échelle
4. 2.4 La rotation
5. 2.5 La déformation
6. 2.6 Appliquer toutes les transformations
3. Les transitions
1. 3.1 Créer des transitions
2. 3.2 Créer un déplacement horizontal
3. 3.3 Créer un déplacement horizontal et vertical
4. Les animations
1. 4.1 Créer des animations
2. 4.2 Créer un déplacement infini
3. 4.3 Créer un formulaire animé

Des modules CSS pour les graphistes

1. Des modules en devenir
2. Les masques
1. 2.1 Le module CSS
2. 2.2 Créer un masque
3. L'habillage du texte
1. 3.1 Le module CSS
2. 3.2 Créer un habillage

Les feuilles de style pour l’impression

1. L’impression des pages web
2. Les feuilles de style spécifiques
1. 2.1 Les liaisons aux fichiers CSS
2. 2.2 Les requêtes de média
3. Les propriétés globales des pages
4. Les polices de caractères
5. Les éléments non imprimés
6. Les ruptures de lecture
1. 6.1 Les sauts de page
2. 6.2 Les lignes solidaires
3. 6.3 Les veuves et les orphelines
7. Les liens hypertextes
Index

Auteur

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.