-Concevoir et développer des applications Web en HTML5 et CSS3
-Mettre en place et valider la structure des pages Web
-Ecriture de feuilles de style avec CSS3
-Rendre les pages Web responsive design
-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
Travaux pratiques
Découverte des possibilités du HTML5 et des outils de développement
– Vue d’ensemble des balises HTML
– Attributs HTML et Evénements
– Structure du document HTML
– Eléments d’entête
Travaux pratiques
Création et validation d’un document HTML5.
– Eléments de section
– Eléments de titres
– Eléments de navigation
– Eléments génériques
Travaux pratiques
Mise en œuvre des éléments conteneurs
– Création et intégration d’une feuille de style CSS
– Sélecteurs CSS simples
– Héritage et cascades
– Couleurs et Unités de mesures : px, in, %, em
Travaux pratiques
Création d’une feuille de style
– 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
Travaux pratiques
Mise en forme du contenu de la page HTML
– Unités avancées : %, vh, vw, calc()
– Dimensionnement fluide et marges
– Positionnements relatifs et absolus
– Habillage et débordements
Travaux pratiques
Gestion du positionnement
– Sélecteurs CSS3
– Variables CSS
– Transformations
– Transitions
– Animations
– Éléments graphiques SVG
Travaux pratiques
Mise en œuvre de la mise en forme avancée de CSS3
– 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
Travaux pratiques
Création d’un formulaire
– 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 dans une page web
– Ajouter des images
– Intégrer des documents audios et vidéos
– Configurer le composant de contrôle de la lecture
Travaux pratiques
Ajout d’un élément multimédia
– Principes fondamentaux
– 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
Travaux pratiques
Rendre les pages web responsive design
– Axe principal et axe transversal
– Répartition et alignement des éléments
– Dimensions de base, agrandissements et réductions
– Ordonnancement des éléments
Travaux pratiques
Mise en page modulaire et adaptée en responsive design
– Le principe de Grilles « Grid ».
– Réaliser une mise en page par bloc.
– Positionnement de chacun des blocs sur la page.
– Changement de la disposition et de la taille des blocs parents en fonction de la taille de l’écran de l’internaute.
Travaux pratiques
Mise en page modulaire et adaptée en responsive design.
Référence : WEB017
Type de Stage : Pratique
Durée : 4 jours
Développeurs Web. Chefs de
projet Web
Aucune connaissance particulière