HTML5 et CSS3 - Maîtriser HTML5 et CSS3 pour créer des pages Web Responsives

Référence : 18782-180625-6-HTM

Infos pratiques

  • Durée : 5 jours soit 35 heures
  • Population visée : Ouvrier – Employé – Employé qualifié – Cadre – Cadre supérieur
  • Public concerné : Toute personne souhaitant apprendre à créer des pages Web côté client avec les standards HTML5 et CSS3

Programme

Objectifs pédagogiques

A l’issue de cette formation, l’apprenant sera capable de :

  • Construire des pages Web en HTML5 ;
  • Habiller et mettre en forme des pages Web avec CSS3 ;
  • Créer des formulaires avancés ;
  • Créer des tableaux de données ;
  • Créer des menus de navigation ;
  • Intégrer du contenu multimédia ;
  • Utiliser les différentes techniques CSS de positionnement et dimensionnement pour adapter la présentation aux différents appareils (smartphone, tablette, PC).

Pré-requis

  • Avoir une expérience de programmation, quel que soit le langage d'origine.

Objectifs opérationnels et contenu de la formation

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

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

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

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

Structure fluide et positionnement

  • Unités avancées : %, vh, vw, calc()
  • Dimensionnement fluide et marges
  • Positionnements relatifs et absolus
  • Habillage et débordements

Mise en forme avancée en CSS3

  • Sélecteurs CSS3
  • Pseudo classes
  • Pseudo éléments
  • Variables CSS
  • Transformations
  • Transitions
  • Animations
  • Éléments graphiques SVG

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

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

Intégration du contenu multimédia

  • Ajouter des images
  • Intégrer des documents audio et vidéo
  • Configurer le composant de contrôle de la lecture

Responsive Web Design

  • Introduction
  • Principes fondamentaux
  • Approche Mobile First
  • Penser grilles fluides
  • Résolutions d'écrans et Media Queries
  • Résolutions et densités des principaux smartphones et tablettes
  • Viewport et Zoom
  • Critères d'adaptation (width, height, device-width, orientation, etc.)
  • Points de ruptures et grilles
  • Résolution des images

Positionnement à base de " Flexbox "

  • 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

  • Création d'un site Web par étapes en respectant l'enchainement des modules théoriques
  • Structure HTML de la page
  • Ajout de contenus simples, titres, listes, images
  • Mise en place de liens de navigation entres les pages
  • Ajout d'un tableau de données HTML
  • Création d'un formulaire HTML
  • Insertion de contenus multimédia, vidéo et audio
  • Mise en forme du site Web en CSS
  • Mise en forme des éléments texte
  • Mise en page et positionnement des contenus
  • Création d'un bandeau d'en-tête
  • Mise en forme du menu de navigation
  • Habillage du tableau de données
  • Mise en forme du formulaire
  • Conception de pages Responsives en utilisant les principales techniques CSS : structure fixe, structure fluide à base de " Flexbox ", structure fluide à l'aide de " Media Queries "

Méthodes et moyens

  • Explications théoriques suivies de pratiques guidées puis mises en autonomie
  • 1 vidéoprojecteur par salle
  • 1 ordinateur par stagiaire

Méthodes d’évaluation des acquis

  • Exercices de synthèse et d’évaluation
  • Evaluation de fin de stage

Profil formateur

Nos formateurs sont certifiés à l’issue d’un parcours organisé par nos soins. Ils bénéficient d’un suivi de compétences aussi bien au niveau technique que pédagogique.

Support stagiaire

  • Support papier ou électronique (dématérialisé)
  • Les exercices d’accompagnement peuvent être récupérés sur clef USB