Ce support sur le langage HTML5 et les feuilles de styles CSS 3, langages fondateurs de la création de sites web, s’adresse aux concepteurs et designers qui souhaitent maîtriser ces langages standards pour créer et personnaliser des sites web. Le support débute par une présentation de l’évolution et de l’usage des standards du Web selon le W3C et le WHATWG avant d’aborder la syntaxe HTML avec les éléments constitutifs des pages web et les attributs des balises. Le chapitre suivant traite des...
Ce support sur le langage HTML5 et les feuilles de styles CSS 3, langages fondateurs de la création de sites web, s’adresse aux concepteurs et designers qui souhaitent maîtriser ces langages standards pour créer et personnaliser des sites web.
Le support débute par une présentation de l’évolution et de l’usage des standards du Web selon le W3C et le WHATWG avant d’aborder la syntaxe HTML avec les éléments constitutifs des pages web et les attributs des balises.
Le chapitre suivant traite des conteneurs sémantiques qui vont permettre de structurer efficacement les pages web. Tous les éléments constitutifs utilisés pour le texte sont ensuite étudiés ainsi que les tableaux et les formulaires. Pour illustrer et animer de manière efficace vos pages web, vous verrez ensuite comment y intégrer des médias : les images mais aussi les vidéos et l’audio.
Dans la deuxième partie de ce support, vous apprendrez à exploiter les feuilles de styles (CSS) afin de parfaire la mise en page et la mise en forme des pages web. Tous les éléments de syntaxe des CSS sont abordés : les règles, les unités, les valeurs, les couleurs et les déclarations. Les principaux sélecteurs sont détaillés à l’aide d’exemples précis. Vous verrez également l’application des styles basée sur les notions de cascade et d’héritage.
Vous exploiterez les styles pour concevoir des mises en page structurées avec des boîtes et vous verrez comment leur appliquer des styles de mise en forme : marges, remplissage, bordures, largeur, hauteur, arrière-plan… La mise en forme des contenus repose sur de nombreux exemples permettant de mettre en forme les caractères, le texte, les tableaux, les formulaires et les colonnes.
La mise en page des sites modernes utilise les boîtes flexibles (CSS Flexible Box Layout) et les grilles de mise en page (CSS Grid Layout). Ces techniques sont étudiées en détail et illustrées de nombreux exemples. Enfin, pour terminer, le Responsive Web Design, ou mise en page adaptative, vous permettra de concevoir des sites web qui seront correctement affichés quel que soit le support : ordinateur, tablette ou smartphone.
Vous aurez ainsi tous les éléments nécessaires pour concevoir et/ou personnaliser des sites web modernes et attractifs.
Introduction
La création des sites web
Les langages du Web
Une brève histoire d'Internet
L'évolution de l'HTML
L'évolution des CSS
L’interprétation des CSS3 par les navigateurs
Les CSS spécialisées
1. Les pages web à imprimer
2. Les modules pour les graphistes
3. L’accessibilité des sites web
Le document HTML
Les objectifs
Les éléments HTML
Les attributs des balises
La déclaration du type de document
L'élément <html></html>
L'élément <head></head>
1. Les éléments enfants de l’en-tête
2. Les éléments <meta>
3. L’élément <title></title>
4. L’élément <link>
5. L’élément <style></style>
6. L’élément <script></script>
L’élément <body></body>
Les commentaires
Exemple d'une structure d'une page web
Les conteneurs de structure
Les objectifs
L'élément <main></main>
L'élément <header></header>
L'élément <footer></footer>
L'élément <aside></aside>
L'élément <nav></nav>
L’élément <section></section>
L'élément <article></article>
L'élément <search></search>
L'élément <div></div>
L'élément <span></span>
Une structure sémantique simple
Les conteneurs pour le texte
Les objectifs
Les attributs usuels
1. L’attribut de langue
2. L’attribut 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 des items ordonnés
5. Les listes de définitions
Les adresses
Le texte préformaté
Les liens
1. La structure des liens
2. Les liens vers des pages
3. Les liens internes
4. L’ouverture des liens
5. Les relations des liens
6. Les liens de messagerie
7. Les liens de téléchargement
8. Les liens en image
Les lignes horizontales
La mise en forme sémantique du texte
Les objectifs
Les caractères spéciaux
Les emphases
1. L’emphase forte
2. L’emphase simple
L'indice et l'exposant
Le souligné et le barré
Les insertions et suppressions
Le retour à la ligne
D'autres mises en forme sémantiques
Les tableaux
Les objectifs
La structure des tableaux
Les lignes
Les cellules
La fusion des cellules
Le titre du tableau
Les groupes de colonnes
1. Regrouper des colonnes
2. Cibler les colonnes à grouper
Les tableaux structurés
Les formulaires
Les objectifs
L'intégration des formulaires
La structure des formulaires
1. Le formulaire
2. Les étiquettes
3. Les champs regroupés
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
Les cases à cocher
D’autres types de champs
Les aides à la saisie
1. Les objectifs
2. La consigne de saisie
3. L’activation d’un champ
4. L’auto-complétion
5. Les champs obligatoires
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 de l’adresse e-mail
7. Le champ de date
8. La liste déroulante
9. Les cases à cocher
10. Les boutons d’action
Les médias
Les objectifs
Les images et les formats
Les images avec l'élément <img>
1. L’attributs scr
2. L’attribut alt
3. Les attributs width et height
4. Les attributs srcset et size
Les illustrations avec l’élément <figure></figure>
1. L’élément <figure></figure>
2. L’élément <figcaption></figcaption>
Le multimédia, les formats et les codecs
La vidéo
1. L’élément <vidéo></vidéo>
2. Les contrôles
3. La vidéo préchargée
4. Une image d’ouverture
5. Des dimensions spécifiées
6. Des sources multiples
7. La boucle et le son désactivé
L'audio
Les feuilles de styles
Les objectifs
La structure des règles de styles
1. La terminologie
2. Les règles de styles
3. Les règles de nommage des sélecteurs
Les unités et les valeurs
1. Les unités de mesure
2. Les valeurs calculées
La notation des couleurs
1. La notation nominative
2. La notation hexadécimale
3. Les notations RGB et RGBA
4. Les notations HSL et HSLA
Les commentaires
La déclaration des styles
1. Les styles intégrés dans les éléments
2. Les styles définis dans la page
3. Les styles définis dans un fichier .css
4. Les styles importés
Les sélecteurs usuels
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
Les sélecteurs de pseudo-classes
1. L’utilisation des pseudo-classes
2. Les pseudo-classes dynamiques des liens
3. Les pseudo-classes dynamiques des actions utilisateurs
4. La pseudo-classe d’ancre
5. La pseudo-classe de langue
6. Les pseudo-classes d’état
Les sélecteurs de pseudo-éléments
1. Le pseudo-élément de premièreligne
2. Le pseudo-élément de premièrelettre
Les combinaisons de sélecteurs
1. Les sélecteurs combinés
2. Les combinaisons descendantes
3. Les combinaisons d’enfants
4. Les combinaisons de frères immédiats
5. Les combinaisons de frères
L’application des styles
1. La notion d’héritage
2. La spécificité des sélecteurs
3. La notion d’importance
4. La notion de cascade
5. L’ordre d’application des styles
Les boîtes de mise en page
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
Les boîtes flottantes
1. L’habillage des images
2. Le flottement interdit
Les boîtes superposées
Le débordement des boîtes
La visibilité des boîtes
Les styles pour les boîtes
Les objectifs
Le concept du modèle de boîte
L'affichage des boîtes
1. Les principes
2. Un exemple d’affichage changé
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
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
Les ombres portées
Les styles pour le texte
Les objectifs
Les styles pour les caractères
1. Les polices de caractères génériques
2. Les polices de caractères embarquées
3. La taille des caractères
4. D’autres mises en forme de caractères
Les styles pour le texte
1. Les couleurs
2. Les lignes de décoration
3. Les ombres portées
4. Le changement de casse
5. Les espaces entre les caractères et les mots
6. Les alignements du texte
7. Le retrait de première ligne
8. La césure en fin de ligne
9. L’interligne
Les styles pour les listes
1. Les énumérations
2. L’énumération avec une image
3. La position du symbole
4. La syntaxe raccourcie
Les styles pour les tableaux
1. La bordure du tableau
2. Les bordures des cellules
3. L’espace interne des cellules
4. Les cellules vides
5. Le titre du tableau
Les styles pour les formulaires
1. Les états actif et inactif des objets
2. Les champs obligatoires
3. La largeur des étiquettes et des champs
4. La mise en forme du focus des champs
Les styles pour les colonnes
1. Les colonnes de texte
2. La mise en place des colonnes
3. Des images dans les colonnes
Les boîtes flexibles
Les objectifs
Les conteneurs flexibles
1. Les différents types de conteneurs
2. Le conteneur avec un affichage flex
3. Le conteneur avec un affichage inline-flex
Le flux des éléments enfants
1. La direction principale
2. Le contrôle du flux des élémentsenfants en ligne
3. Le contrôle du flux des élémentsenfants en bloc
Les alignements des enfants flexibles
1. Les alignements sur l’axe principal horizontal
2. Les alignements sur l’axe principal vertical
3. Les alignements sur l’axe secondaire vertical
4. Les alignements sur l’axe secondaire horizontal
5. Les alignements et le passage à la ligne
Les propriétés des enfants flexibles
1. Les propriétés individuelles
2. L’ordre d’affichage des enfants
3. L’alignement des enfants
4. L’agrandissement des enfants
5. Le rétrécissement des enfants
6. La largeur des enfants
7. La syntaxe raccourcie des propriétésindividuelles
Une mise en page plein écran et responsive
1. Les affichages obtenus
2. La structure flexible de la mise en page
3. Les propriétés pour l’élément<body></body>
4. Les propriétés pour l’élément<main></main>
5. Les propriétés CSS pour la miseen forme générale
6. La mise en page responsive
7. Le code complet de l’exemple
Les grilles de mise en page
Les objectifs
Le vocabulaire des grilles
1. Les principaux termes
2. Un exemple simple
La structure des grilles
1. Le conteneur de la grille
2. La déclaration des colonnes
3. La déclaration des lignes
4. La syntaxe raccourcie
5. L’utilisation d’autres unités
6. L’insertion de gouttières
7. La mise en forme du conteneur
Les positions des éléments dans la grille
1. Les positions des enfants dans la grille
2. Les positions des enfants dans les lignes
3. L’utilisation de la numérotation des lignes
4. Les lignes nommées de la grille
5. Les zones nommées de la grille
6. L’alignement des cellules dans la grille
Une mise en page responsive avec une grille
1. Les affichages responsives
2. La structure HTML de la grille
3. Les styles CSS en Mobile First
4. La requête de média pour les écransdes tablettes
5. La requête de média pour les grands écrans
6. Le code complet de la grille responsive
Le Responsive Web Design
Les objectifs
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
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
