Maîtriser HTML5 et CSS3 pour créer des pages Web Responsives par ENI SERVICE

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
1- Pseudo classes
1- 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
1- Principes fondamentaux
1- Approche Mobile First
1- Penser grilles fluides
- Résolutions d'écrans et Media Queries
1- Résolutions et densités des principaux smartphones et tablettes
1- Viewport et Zoom
1- Critères d'adaptation (width, height, device
- width, orientation, etc.)
1- Points de ruptures et grilles
1- 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
1- Structure HTML de la page
1- Ajout de contenus simples, titres, listes, images
1- Mise en place de liens de navigation entres les pages
1- Ajout d'un tableau de données HTML
1- Création d'un formulaire HTML
1- Insertion de contenus multimédia

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).