Objectifs pédagogiques
- Créer une page HTML avec des éléments simples (texte, images, listes, liens)
- Mettre en forme le contenu de la page en CSS
- Définir des règles de positionnement du contenu
- Créer et mettre en forme des formulaires de saisie
- Créer et mettre en forme un tableau de données
- Intégrer du contenu multimédia
- Intégrer les bonnes pratiques de conception pour créer des pages Web accessibles
Prérequis
Aucun.
Programme détaillé
Introduction
- Vue d’ensemble de la création de contenu pour le Web
- Standard du W3C
- Langages HTML, CSS & JavaScript
- Organisation d’un site web
- Principaux navigateurs et niveau de compatibilités aux nouveautés HTML5 et CSS3
- Outils de création de contenu pour le Web
Notions fondamentales du langage HTML5
- Syntaxe XML
- Vue d’ensembles des balises HTML
- Attributs XML, HTML et Evénements
- Structure du document HTML
- Eléments d’entête
- Travaux pratiques :
- Structure HTML de la page
- Ajout de contenus simples
- Mise en place de liens de navigation entres les pages
Mise en page à l’aide d’éléments conteneur
- Eléments de section
- Eléments de titres
- Eléments de navigation
- Eléments générique
- Travaux pratiques :
- Organisation sémantique des pages HTML avec les bonnes balises
Concepts d’accessibilité numérique
- Qu’est-ce qu’une page ou un site Web « accessible » ?
- Les outils associés
- Bonnes pratiques de construction HTML des pages
- La sémantique des éléments
- Les attributs fondamentaux pour l’accessibilité
- Travaux pratiques :
- Adaptation des pages réalisées pour les rendre accessibles
Notions de base de la mise en forme en CSS
- Création et intégration d’une feuille de style CSS
- Sélecteurs CSS simple
- Héritage et cascades
- Couleurs et Unités de mesures : px, in, %, em
- Travaux pratiques :
- Création d’une feuille de style
- Application de la feuille de style aux différentes pages
Intégration et mise en forme de contenus simples
- Gestion du texte, des paragraphes et des listes
- Gérer les espaces et les sauts de lignes
- Polices embarquées
- Présentation multicolonnes
- Affichage en ligne ou en bloc
- Dimensions et marges
- Bordures et Fonds
- Images de fond et dégradées
- Travaux pratiques :
- Mise en forme des éléments texte
- Mise en page et positionnement des contenus
Structure fluide et positionnement
- Unités avancées : %, vh, vw, calc()
- Dimensionnement fluide et marges
- Positionnements relatifs et absolus
- Habillage et débordements
- Travaux pratiques :
- Création d’un bandeau d’en-tête
Mise en forme avancée en CSS3
- Sélecteurs CSS3
- Pseudo classes
- Pseudo éléments
- Variables CSS
- Transformations
- Transitions
- Animations
- Éléments graphiques SVG
- Travaux pratiques :
- Mise en forme du menu de navigation
Création de formulaire HTML5
- Structurer le formulaire avec les éléments Form, FieldSet et Label
- Ajouter des éléments Input
- Créer des listes de valeurs pour les éléments Input
- Afficher des informations avec les éléments Output, Progress et Meter
- Mettre en forme et valider un formulaire
- Ajouter des boutons de contrôle
- Considérations d’accessibilité numérique sur les formulaires
- Description des champs
- Navigation au clavier
- Travaux pratiques :
- Ajout de formulaire HTML
- Organisation des champs
- Mise en forme du formulaire avec CSS
Création de tableau
- Elément Table
- Eléments ligne et cellules
- Groupes de lignes et de colonnes
- Fusionner des cellules
- Mise en forme d’un tableau
- Travaux pratiques :
- Ajout d’un tableau de données HTML
- Habillage du tableau avec CSS
Intégration du contenu multimédia
- Ajouter des images
- Intégrer des documents audios et vidéos
- Configurer le composant de contrôle de la lecture
- Problématiques d’accessibilité sur le contenu multimédia
- Comment décrire le contenu ?
- Les éléments et attributs essentiels
- Travaux pratiques :
- Insertion de contenus multimédia, vidéo et audio dans une page