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

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 "

Concepteur : ENI SERVICES - Diffuseur : Groupe Arkesys