HTML5 / CSS3 / Responsive – Créer des pages Web

Introduction (0.5 heure)

• Vue d’ensemble de la création de contenu pour le WebStandard 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 (1.5 heures)

• 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 (1.5 heures)

• 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 (1 heure)

• 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 (2 heures)

• 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 (2 heures)

• 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 (1.5 heures)

• 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

Responsive Web Design (3 heures)

• Principes fondamentaux
• Utilisation des « media queries »
• Critères d’adaptation (width, height, device-width, orientation, etc.)
• Points de ruptures et grilles
• Viewport et Zoom
• Travaux pratiques :
  • Conception de pages Responsives
  • Utilisation d’une structure fixe
  • Utilisation d’une structure fluide à l’aide de “Media Queries”

Positionnement à base de “Flexbox” (2 heures)

• Affichage “Flexbox”
• Axe principal et axe transversale
• Répartition et alignement des éléments
• Dimensions de base, agrandissements et réductions
• Ordonnancement des éléments
• Travaux pratiques :
  • Utilisation d’une structure fluide à l’aide de “Flexbox”

Mise en forme avancée en CSS3 (2 heures)

• Sélecteurs CSS3
  • Pseudo classes
  • Pseudo éléments
• Variables CSS
• Transformations et Transitions
• Travaux pratiques :
  • Mise en forme du menu de navigation

Création de formulaire HTML5 (2 heures)

• 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 (1 heure)

• 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 (1 heure)

• 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