Pour les designers web, la conception des sites web passe par la maîtrise des langages fondateurs que sont l'HTML (HyperText Markup Language) et les CSS (Cascading Style Sheets). Les dernières versions de ces deux langages, l'HTML5 et les CSS3, vont faire évoluer la manière de concevoir vos sites web en vous offrant de nouvelles possibilités de structure, de mise en page et de mise en forme.
Ce support s'adresse aux concepteurs de sites web et aux designers...
Pour les designers web, la conception des sites web passe par la maîtrise des langages fondateurs que sont l'HTML (HyperText Markup Language) et les CSS (Cascading Style Sheets). Les dernières versions de ces deux langages, l'HTML5 et les CSS3, vont faire évoluer la manière de concevoir vos sites web en vous offrant de nouvelles possibilités de structure, de mise en page et de mise en forme.
Ce support s'adresse aux concepteurs de sites web et aux designers web ayant déjà la connaissance de l'HTML 4 et des CSS 2.1, qui veulent faire évoluer leurs créations et créer des sites web intégrant ces nouveaux standards.
Dans la partie consacrée à l'HTML5, vous étudierez la nouvelle syntaxe, les nouveaux éléments de structure sémantique (en-tête, section, navigation...) et les formulaires interactifs.
Dans celle consacrée aux CSS3, vous apprendrez à utiliser les nouveaux sélecteurs, la mise en forme du texte et les conteneurs (ombre portée, coins arrondis, dégradés, bordures en motif...).
Vous découvrirez le fort potentiel des nouveaux effets de transformation, de transition et d'animation et l'insertion native du multimédia (audio et vidéo).
Un chapitre est consacré au design adaptatif (Responsive Web Design) qui permet d'adapter vos sites web aux différents supports de diffusion (écrans d'ordinateur, tablettes et smartphones).
Enfin, nous aborderons une nouveauté des CSS3 : l'utilisation du module Flexbox qui va révolutionner la conception des sites web en facilitant la création de mises en page évoluées et responsives. Nous terminerons par des modules CSS en devenir et très prometteurs pour le design de vos pages web : la mise en page avec les grilles, l'utilisation des masques et l'habillage du texte par des images.
Introduction
A. La création de sites web
B. Les langages
C. Le livre
1. Pour les designers web
2. Le contenu
Chapitre 1 : L’évolution du HTML et des CSS
A. Rapide historique de l’Internet
B. L’évolution du HTML
1. Les travaux du W3C
2. Le HyperText Markup Language
3. L’évolution avec le XHTML
4. Les dissidents du WHATWG
5. L’avènement du HTML5
6. Les documents HTML5 du W3C
7. Peut-on utiliser le HTML5 ?
8. Interprétation du HTML5 par les anciens navigateurs
9. Ce livre et l’évolution du HTML5
C. L’évolution des CSS
1. L’apparition des CSS
2. L’utilité des CSS
3. Les versions des CSS
4. L’avènement des CSS3
5. L’arrivée des CSS4
Chapitre 2 : La nouvelle syntaxe HTML5
A. La doctype
1. La syntaxe en HTML 4 et XHTML 1.0
2. La syntaxe en HTML5
B. Le document HTML
1. La syntaxe en XHTML 1.0
2. La syntaxe en HTML5
C. L’encodage des caractères
1. La syntaxe en HTML4 et XHTML 1.0
2. La syntaxe en HTML5
D. Les scripts
E. Les styles CSS
F. La syntaxe des éléments
1. L’objectif
2. Les guillemets
3. Les éléments avec la seule balise d’ouverture
4. Les éléments à balise de fermeture optionnelle
5. La casse
6. Les attributs booléens
7. Les éléments HTML, HEAD et BODY
8. La syntaxe à adopter
G. Les éléments obsolètes
H. Les éléments redéfinis
I. Les attributs obsolètes
J. Les nouveaux éléments
1. L’élément <time>
2. L’élément <mark>
3. L’élément <meter>
4. Les éléments <details> et <summary>
5. L’élément <wbr>
6. L’élément <bdi>
7. L’élément <progress>
8. Les éléments liés aux langues asiatiques
9. Les éléments <figure> et <figcaption>
10. Les attributs srcset et sizes pour l'élément img
11. L'élément dialog
K. Les modèles de contenu des éléments
L. L’affichage des éléments
1. En HTML4
2. En HTML5
Chapitre 3 : Les éléments de structure HTML5
A. Les éléments de structure en HTML4
1. Les boîtes <div>
2. La « divite »
3. Un contenu non sémantique
B. Les éléments de structure en HTML5
1. Les nouveaux éléments de structure
2. L’élément <header>
3. L’élément <footer>
4. L’élément <nav>
5. L’élément <section>
6. L’élément <article>
7. L’élément <aside>
8. L’élément <main>
9. Imbrication des éléments <header> et <footer>
10. Les boîtes <div>
C. L’attribut sémantique role
D. Exemples de structure HTML5
1. Une structure simple
2. Une structure plus élaborée
3. La structure d’un article
E. Les techniques de mise en page
Chapitre 4 : Évoluer vers les CSS3
A. L’état des lieux
1. L’évolution des modules
2. Afficher les spécifications
B. Les préfixes des navigateurs
1. L’implémentation des propriétés
2. Les navigateurs et les CSS3
3. Un préfixeur JavaScript
C. L’interprétation des CSS3 par les navigateurs
1. Quelles propriétés utiliser ?
2. When can I use
3. css3test
Chapitre 5 : Les nouveaux sélecteurs CSS3
A. Les sélecteurs CSS2
1. La déclaration des CSS
2. Les sélecteurs
3. Les pseudo-classes
4. Les pseudo-éléments
5. Les groupes de sélecteurs
B. Les nouveaux sélecteurs CSS3
C. Le sélecteur adjacent général
D. Le sélecteur d’attribut
1. L’objectif
2. Des liens vers une adresse e-mail
3. Des liens de téléchargement
E. La pseudo-classe d’ancre
1. L’objectif
2. La mise en place
3. L’utilisation
F. Les pseudo-classes de structure
1. L’objectif
2. La racine de la page
3. Le dernier élément enfant
4. Les éléments enfants
5. Les derniers éléments enfants
6. Les premiers et derniers éléments d’un type donné
7. Les premiers éléments d’un type donné
8. Les éléments seuls
9. Les éléments seuls d’un type donné
10. Les éléments vides
11. Tous les éléments sauf celui spécifié
Chapitre 6 : La mise en forme CSS3 des boîtes
A. Les nouvelles propriétés CSS3
B. La largeur des boîtes
1. Avec les CSS 2.1
2. Avec les CSS3
C. Le débordement du contenu
D. Les couleurs d’arrière-plan
1. Le module des couleurs
2. Le mode TSL
3. Le mode TSL transparent
4. Le mode RVB transparent
5. Un éditeur RGBA en ligne
6. La transparence
E. L’état des lieux des arrière-plans et des bordures
F. Les coins arrondis
1. Des coins identiques
2. Des coins arrondis différents
3. Des ellipses dans les coins
4. Les générateurs en ligne
G. Les bordures fantaisistes
1. La syntaxe du W3C
2. Un générateur en ligne
H. Les ombres portées
1. L’état des lieux
2. Créer une ombre portée
3. Différents exemples d’ombres portées
4. Appliquer plusieurs ombres portées
5. Les générateurs en ligne
I. Les dégradés
1. L’état des lieux
2. Les dégradés linéaires
3. Les dégradés radiaux
4. Les dégradés répétitifs
5. Les générateurs en ligne
J. Les arrière-plans multiples
1. L’objectif
2. Un exemple simple
K. Les autres propriétés d’arrière-plan
1. Les propriétés
2. L’origine d’une image
3. Rogner une image
4. La taille de l’arrière-plan
L. Des générateurs CSS3 en ligne
1. L’objectif
2. WestCIV
3. CSS 3.0 Maker
4. CSS3 Playground
5. CSS3 Generator
6. Layer Style
M. Exemple d’un tableau aux coins arrondis
1. L’objectif
2. La structure du tableau
3. La mise en forme du tableau
4. Les cellules du tableau
5. Les cellules d’en-tête
6. L’arrondi des cellules
7. Le survol des lignes
N. Exemple d’ombre sur la page
Chapitre 7 : Le HTML5 et les CSS3 pour le texte
A. Les éléments de texte obsolètes
1. La spécification HTML5
2. Les éléments inutilisés et confus
3. La mise en forme du texte
B. Les éléments de texte redéfinis
1. La spécification HTML5
2. L’élément <b>
3. L’élément <strong>
4. L’élément <i>
5. L’élément <em>
6. L’élément <small>
7. L’élément <cite>
8. L’élément <dl>
9. L’élément <ol>
10. L’élément <hr>
11. L’élément <a>
12. L'élément <s>
13. L'élément <u>
C. La mise en colonne du texte avec les CSS3
D. La mise en forme du contenu avec les CSS3
1. Le module CSS3
2. Les propriétés reconnues
3. Les propriétés non reconnues
4. La coupure des mots
5. La césure
6. La césure et le débordement
E. La décoration du texte avec les CSS3
1. Le module CSS
2. Les lignes de décoration
3. Les propriétés de ligne non reconnues
4. L'emphase du texte
5. L'ombre portée sur le texte
F. Les polices de caractères avec les CSS3
1. Le module CSS
2. Les familles de caractères
3. La graisse des caractères
4. La largeur des caractères
5. Les styles des caractères
6. La taille des caractères
7. Ajuster la taille des caractères
8. Les polices de caractères
9. La règle @font-face
10. Les polices web en ligne
11. Les propriétés avancées
Chapitre 8 : Le HTML5 et les CSS3 pour les formulaires
A. L’objectif
B. Les méthodes d’envoi
C. L’élément <form>
D. Les groupes de champs
E. Les nouveaux champs
1. L’affichage des nouveaux champs
2. Le champ pour les e-mails
3. Le champ pour les numéros de téléphone
4. Le champ pour les URL
5. Les champs pour les dates et les heures
6. Le champ pour les valeurs numériques
7. Les réglettes avec curseur
8. Les champs de recherche
9. Le champ de saisie suggérée
10. Le choix d’une couleur
11. Les clés publiques
F. La validation des formulaires
1. La validation côté client
2. Rendre un champ obligatoire
3. Les saisies autorisées
G. Les expressions régulières
1. Des lettres autorisées
2. Un intervalle de lettres autorisées
3. Des lettres autres que
4. La casse des lettres
5. La condition ou
6. Des mots autorisés
7. Autoriser des chiffres
8. Un nombre limité de caractères
9. Les saisies multiples
10. Les paramètres spéciaux
H. Aider l’utilisateur dans le formulaire
1. L’aide à la saisie
2. Activer un champ
3. Le remplissage automatique
4. Redimensionner un champ
I. Des pseudo-classes pour les formulaires
1. Les objectifs des pseudo-classes
2. Le formulaire et les styles
3. L’utilisation
4. Une autre pseudo-classe
5. Les champs requis et optionnels
6. La mise en forme du :focus
J. La validation des saisies
1. Objectif
2. Le formulaire
3. La mise en forme du formulaire
4. Les champs non valides
5. Les messages d’erreur
6. Les champs valides
7. Les valeurs hors limites
K. Un premier exemple simple de formulaire
1. L’objectif
2. La structure du formulaire
3. Les styles généraux
4. Le fond de la page
5. Le formulaire
6. Les étiquettes
7. Les champs de saisie
8. Le champ multiligne
9. Le focus sur les champs
10. Le bouton d’envoi
L. Un deuxième exemple très sobre de formulaire
1. L’objectif
2. La structure initiale du formulaire
3. L’ombre portée du formulaire
4. L’effet de pointillés
5. Le titre du formulaire
6. Les filets décoratifs
7. Les champs de saisie
8. Le bouton de connexion
9. L’utilisation du bouton
10. Les autres liens
11. Le rendu final
M. Un exemple interactif de formulaire
1. L’objectif
2. La structure initiale du formulaire
3. Les options supplémentaires
4. Le bouton d’envoi
5. Le message de confirmation
6. Les styles généraux
7. La mise en forme du formulaire
8. Les étiquettes
9. Les champs de saisie
10. La liste déroulante
11. Le bouton d’envoi
12. La gestion des options
13. L’affichage initial
14. Afficher les options
15. Masquer les options
16. Le message de confirmation
N. Un dernier exemple élaboré de formulaire
1. L’objectif
2. La structure du formulaire
3. Les objets HTML5
4. Le code complet du formulaire
5. L’affichage brut
6. La mise en forme générale
7. La mise en forme du formulaire
8. La mise en forme des différentes parties
9. La mise en forme des items de liste
10. La mise en forme des étiquettes
11. Les champs de type <input>
12. Le bouton d’envoi du formulaire
O. Créer des boutons avec des symboles
1. L’objectif
2. Le formulaire
3. Créer la classe des boutons
4. Le pseudo-élément ::before
5. Le contenu du pseudo-élément ::before
6. Appliquer les classes
7. L’affichage du formulaire
8. D’autres exemples similaires
P. Les générateurs de boutons en ligne
1. L’objectif
2. CSS3 Button
3. CSS3 Button Generator
4. CSS Drive Button Generator
Chapitre 9 : Les transformations CSS3
A. L’état des lieux et l’objectif
B. La transformation
1. La propriété
2. Le point de référence
C. Le déplacement
1. Sur les deux axes
2. Sur un seul axe
D. La mise à l’échelle
1. La mise à l’échelle proportionnelle
2. La mise à l’échelle non proportionnelle
3. La mise à l’échelle dans une seule direction
E. La rotation
F. La déformation
1. La déformation sur les deux axes
2. La déformation sur un seul axe
G. Appliquer toutes les transformations
H. Les générateurs en ligne
1. CSS 3.0 Maker
2. CSS3 Generator
3. WestCIV
I. Exemple d’un menu
1. L’objectif
2. La structure du menu
3. La mise en forme
4. L’affichage
J. Exemple d’une galerie de Polaroid
1. L’objectif
2. La structure de la galerie
3. La mise en forme de la galerie
4. La mise en forme des photos
5. La transformation
6. L’affichage
K. Exemple de relief sur une image
1. L’objectif
2. La photo
3. Les ombres sous la photo
Chapitre 10 : Les transitions CSS3
A. L’état des lieux et l’objectif
B. Mettre en place les transitions
1. Les transitions
2. Les propriétés CSS
C. Effectuer une transition de déplacement
1. L’objectif
2. Le code nécessaire
3. Les propriétés de la transition
4. Le rendu
D. Les autres propriétés des transitions
1. La cinétique
2. Le démarrage de la transition
3. La syntaxe courte
4. Les transitions multiples
E. Les générateurs en ligne
1. CSS3 Generator
2. CSS 3.0 Maker
3. Créer vos courbes de Bézier
F. Exemple d’un menu interactif
1. L’objectif
2. La mise en forme du menu
3. Les transitions
4. L’affichage
G. Exemple d’un diaporama interactif
1. L’objectif
2. La structure du diaporama
3. Les transformations
4. Les transitions
5. L’affichage
H. Exemple de menu à tiroirs
1. L’objectif
2. La structure du menu
3. La mise en forme du menu
4. La mise en forme des tiroirs
5. L’affichage initial
6. Les transitions
7. L’affichage
8. Des menus « flashy »
I. Exemple d’accordéon
1. L’objectif
2. La structure de l’accordéon
3. La mise en forme de l’accordéon
4. La mise en forme des zones d’affichage de l’accordéon
5. L’affichage
Chapitre 11 : Les animations CSS3
A. L’état des lieux et l’objectif
B. La construction d’une animation
C. Un simple déplacement
1. L’objectif
2. La structure
3. L’animation
4. L’affichage
D. Une rotation et une transparence
1. L’objectif
2. La structure
3. L’animation
4. L’affichage
E. Un formulaire qui clignote
1. L’objectif
2. La structure du formulaire
3. La mise en forme
4. L’animation
5. L’affichage
F. Une fenêtre modale
1. L’objectif
2. Le bouton
3. La fenêtre modale
4. Le bouton de fermeture
5. Masquer le corps de la page
6. L’animation à l’ouverture
7. Déclencher l’animation d’ouverture
8. Appliquer le masque
9. L’animation de fermeture
10. Déclencher l’animation de fermeture
11. Le code complet
12. L’affichage de la page
Chapitre 12 : Le multimédia : audio et vidéo
A. L’état des lieux
1. Insérer du multimédia
2. Les formats et les codecs pour le Web
B. Insérer de l’audio
1. L’élément audio
2. Les contrôles audio
3. L’apparence du lecteur audio
4. Les attributs pour l’audio
5. La source de l’audio
6. Créez vos contrôles
7. Les anciens navigateurs
C. Insérer de la vidéo
1. L’élément video
2. Les attributs pour la vidéo
3. L’apparence du lecteur vidéo
4. Les formats vidéo
5. Convertir les vidéos
Chapitre 13 : Le design web adaptatif
A. L’état des lieux et l’objectif
B. Les requêtes de média
1. L’objectif
2. Avec le HTML4 et les CSS 2.1
3. Les critères des requêtes de média CSS3
4. La syntaxe des requêtes de média
5. Les valeurs minimales et maximales
6. Les opérateurs logiques
C. La taille des écrans
1. La problématique actuelle
2. La taille du viewport
3. Les zooms à l’écran
4. La taille et l'émulation des écrans
D. Les grilles fluides
1. Les techniques
2. Un exemple simple
3. Un exemple d’un site simple
4. Réaliser un design adaptatif simple
E. Des images adaptatives
1. Le débordement des images
2. Imposer une largeur maximale
F. Créer du design adaptatif
1. Les deux stratégies
2. Concevoir un site adaptatif
3. D’autres exemples de design adaptatif
G. Le site Food Sense
1. Les affichages
2. La structure principale
3. Le viewport
4. L’affichage pour les grands écrans
5. L’affichage pour les tablettes
6. L’affichage pour les smartphones
Chapitre 14 : La mise en page Flexbox
A. Les objectifs
B. Les propriétés pour le conteneur Flexbox
1. Le conteneur
2. La direction de l'affichage
3. Le passage à la ligne ou à la colonne
4. La propriété en syntaxe courte
5. Les alignements et les centrages dans l'axe principal
6. Les alignements et les centrages dans l'axe secondaire
7. L'alignement et passage à la ligne
C. Les propriétés pour les items Flexbox
1. L'ordre d'affichage
2. L'alignement d'un item Flexbox
3. L'agrandissement des items Flexbox
4. La réduction des items Flexbox
5. L'indication de taille des items
6. La propriété en syntaxe courte
D. Réalisation d'une mise en page Flexbox
1. Les objectifs
2. Le conteneur principal
3. L'en-tête
4. La barre de navigation
5. La partie principale
6. Les sidebars
7. La partie centrale rédactionnelle
8. Le pied de page
9. Le code complet
E. Réalisation d'une mise en page Flexbox responsive
1. Les objectifs
2. La règle @media
3. La barre de navigation
4. L'affichage de la partie principale
5. L'affichage dans les sidebars
6. Les règles CSS pour une page responsive
Chapitre 15 : Des modules CSS3 en devenir
A. L'évolution des modules CSS
B. La mise en page avec une grille
C. Utiliser des masques
D. Créer un habillage de texte
Index
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.
Editions ENI Livres | Vidéos | e-Formations
