HTML5 / CSS3 – Créer des pages Web Responsives
Réf. T448-004
- (Télé)-Présentiel
INCLUS AVEC NOS FORMATIONS* : 3 mois d’accès à la Bibliothèque Numérique ENI.
*Offre valable pour toute inscription aux sessions inter-entreprises réalisée entre le 10/10/2022 et le 30/06/2023 inclus.
Dans cette formation, vous apprendrez à créer des pages Web statiques côté client avec les standards HTML5 et CSS3. Vous étudierez également les différentes approches d'adaptation de l'interface graphique et de l'ergonomie en fonction de l'appareil utilisé (smartphone, tablette, PC).
- Mon Compte Formation (CPF)
Objectifs
- Créer une page HTML avec des éléments simples (texte, images, listes, liens)
- Mettre en forme le contenu de la page en CSS
- Créer des menus de navigation
- Créer et mettre en forme des formulaires de saisie
- Créer et mettre en forme un tableau de données
- Intégrer du contenu multimédia
- Intégrer les bonnes pratiques de conception pour créer des pages Web accessibles
- Utiliser les différentes techniques CSS de positionnement et dimensionnement pour adapter la présentation aux différents appareils (smartphone, tablette, PC
Certification
Cette formation prépare au passage de la certification Créer et mettre en forme des pages web (HTML5 et CSS3)
Suite à la formation, une mise en pratique approfondie de plusieurs mois est nécessaire pour garantir un bon résultat à l'examen.
La certification donne accès aux métiers de :
- Concepteur/Développeur
- Intégrateur Web
- Rédacteur Web
- Web Designer
Pré-requis
Aucun
Public
Intégrateur Web, Web Designer, Concepteur/Développeur
Programme de la formation
Introduction (1 heure)
- 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 (2 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, titres, listes, images
- Mise en place de liens de navigation entres les pages
Mise en page à l’aide d’éléments conteneur (2 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 (3 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 (3 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 (2 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
Mise en forme avancée en CSS3 (4 heures)
- Sélecteurs CSS3
- Pseudo classes
- Pseudo éléments
- Variables CSS
- Transformations
- Transitions
- Animations
- Éléments graphiques SVG
- Travaux pratiques :
- Mise en forme du menu de navigation
Création de formulaire HTML5 (1 heure)
- 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
Responsive Web Design (4 heures)
- 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
- Responsive Web Design et accessibilité numérique
- 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” (3 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”
Formation avec un formateur, qui peut être suivie selon l’une des 3 modalités ci-dessous :
1 – Dans la salle de cours en présence du formateur.
2 – Dans l’une de nos salles de cours immersives, avec le formateur présent physiquement à distance. Les salles immersives sont équipées d’un système de visio-conférence HD et complétées par des outils pédagogiques qui garantissent le même niveau de qualité.
3 – Depuis votre domicile ou votre entreprise. Vous rejoignez un environnement de formation en ligne, à l’aide de votre ordinateur, tout en étant éloigné physiquement du formateur et des autres participants. Vous êtes en totale immersion avec le groupe et participez à la formation dans les mêmes conditions que le présentiel. Pour plus d’informations : Le téléprésentiel – notre solution de formation à distance.
Le nombre de stagiaires peut varier de 1 à 12 personnes (5 à 6 personnes en moyenne), ce qui facilite le suivi permanent et la proximité avec chaque stagiaire.
Chaque stagiaire dispose d’un poste de travail adapté aux besoins de la formation, d’un support de cours et/ou un manuel de référence au format numérique ou papier (pour les sessions inter-entreprises, dans le cas où le support de cours officiel est en anglais, nous offrons en complément, s’il existe, un ouvrage de référence des Editions ENI au format numérique rédigé en français).
Pour une meilleure assimilation, le formateur alterne tout au long de la journée les exposés théoriques, les démonstrations et la mise en pratique au travers d’exercices et de cas concrets réalisés seul ou en groupe.
En début et en fin de formation, les stagiaires réalisent une auto-évaluation de leurs connaissances et compétences en lien avec les objectifs de la formation. L’écart entre les deux évaluations permet ainsi de mesurer leurs acquis.
En complément, pour les stagiaires qui le souhaitent, certaines formations peuvent être validées officiellement par un examen de certification. Les candidats à la certification doivent produire un travail personnel important en vue de se présenter au passage de l’examen, le seul suivi de la formation ne constitue pas un élément suffisant pour garantir un bon résultat et/ou l’obtention de la certification.
Pour certaines formations certifiantes (ex : ITIL, Prince2, DPO, …), le passage de l’examen de certification est inclus et réalisé en fin de formation. Les candidats sont alors préparés par le formateur au passage de l’examen tout au long de la formation.
Feuille de présence, émargée par demi-journée par chaque stagiaire et le formateur ;
Evaluation qualitative de fin de formation, qui est ensuite analysée par l’équipe pédagogique ENI ;
Attestation de fin de formation, remise au stagiaire en main propre ou par courrier électronique.
La formation est animée par un professionnel de l'informatique et de la pédagogie, dont les compétences techniques, professionnelles et pédagogiques ont été validées par des certifications et/ou testées et approuvées par les éditeurs et/ou notre équipe pédagogique. Il est en veille technologique permanente et possède plusieurs années d'expérience sur les produits, technologies et méthodes enseignés. Il est présent auprès des stagiaires pendant toute la durée de la formation.
Formations associées
- TOP FORMATION
- NOUVEAU
Le développement web client avec HTML5 et CSS3
27 h
Tarif : 990 € HT
- TOP FORMATION
WordPress – Créer et gérer le contenu d’un site Web
2 jour(s) - 14 h
Tarif : 1 150 € HT
- TOP FORMATION
Développer des applications HTML5 Responsives avec JavaScript et ....
5 jour(s) - 35 h
Formation
intra-entreprise
sur devis
