HTML 5, CSS 3, Responsive - Création de pages Web
Coder des pages web adaptables et structurées
Concevoir des pages web accessibles, fluides, et adaptables à tous les écrans avec HTML5 et CSS3.
Apprenez à structurer votre contenu via les balises sémantiques HTML5 (formulaires, audio/vidéo), à le styliser avec les fonctionnalités CSS3 modernes (flexbox, media queries, sélecteurs avancés), à intégrer des composants interactifs et à garantir une expérience responsive, esthétique et conforme aux standards d’accessibilité.
Est incluse dans cette formation, la certification EDITIONS ENI ® Créer et mettre en forme des pages Web (HTML5 et CSS3) - RS6959. Date d’enregistrement de la certification : 25 janvier 2023. Date d’échéance de la certification : 25 janvier 2026.
- Décrire la structuration d'une page HTML 5
- Ajouter des styles CSS aux éléments d'une page
- Utiliser les blocs et les tableaux
- Créer des formulaires avec Web Forms 2
- Tester les nouveautés HTML 5 et CSS 3
- Exploiter les "media queries" pour s'adapter aux tailles d'écran
- Expliquer la philosophie des framemorks HTML / CSS pour le développement responsive.
Coder des pages web en HTML/CSS, organiser les contenus, appliquer des styles, et concevoir un affichage responsive adapté à tous les supports.
Compétences attestées par la certification
- Créer une page Web à l'aide des balises du HTML5 afin de rendre sa lecture accessible à tous types d'utilisateurs, y compris ceux en situation de handicap
- Mettre en forme une page Web et ses éléments HTML5 afin de respecter la maquette graphique définie par l'entreprise en utilisant les règles de mise en forme et de positionnement du CSS3
- Adapter l'affichage d'une page Web aux différents supports (ordinateur, smartphone, tablette...) en utilisant les règles de "media queries" pour optimiser sa lecture sur différents appareils
- Concevoir et développer des formulaires (formulaire d'inscription, formulaire de paiement...) utilisables par tout type d'utilisateurs, y compris ceux en situation de handicap pour recueillir des informations (textes, fichiers...) au moyen de balises adéquates du HTML5 et en respectant les recommandations de sécurité fournies par les instances officielles (OWASP, ANSII...)
- Animer avec du contenu dynamique (vidéo, audio, animation...), une page Web en vue de sa consultation par tout type d'utilisateurs, y compris ceux en situation de handicap, en utilisant les balises avancées du HTML5 et les propriétés du CSS3 pour améliorer l'expérience utilisateur.
Pour visualiser le détail de la certification enregistrée au RS.
Webmasters, concepteurs Web, développeurs et chefs de projets techniques.
Savoir utiliser un clavier et une souris.
Les terminaux
Types de terminaux (mobile, tablette, tv, liseuse...) et leur résolution
Périphériques, OS, navigateurs
Le marché mobile et parts de marché
Standards HTML, HTML 5, CSS 3 (API, sélecteurs...)
Structure d'une page
Tags principaux
Simplification avec HTML 5
Les éléments et leurs placements
Travaux pratiques (à titre indicatif) : Création d'une page Web simple
Balises structurantes
Blocs div et span
Listes
Tableaux
iFrames
Travaux pratiques (à titre indicatif) : Création d'un menu à partir d'une liste à puces, création d'un tableau de contacts, affichage d'un fichier PDF dans une page Web
Web Forms 2
Champs de saisie
Listes déroulantes
Bouton Radio
Champ Date
Placeholder
Slider
Validation automatique
Travaux pratiques (à titre indicatif) : Création et validation d'un formulaire de saisie d'informations d'un contact
HTML 5
Balises sémantiques
Audio et vidéo
Travaux pratiques (à titre indicatif) : Affichage d'un élément audio et vidéo, structuration d'une page Web avec les éléments (Header, Nav, Section, Article, Footer)
Styles CSS
Syntaxe des sélecteurs CSS
Pseudo-sélecteurs
Principales propriétés CSS
Règles CSS
Frameworks CSS
Travaux pratiques (à titre indicatif) : Analyse du site Zen Garden, Mise en forme avec CSS, Mise en forme d'un tableau et d'un formulaire avec Bootstrap
Structure des éléments
Le modèle de boîte
Eléments "block" et "inline"
La propriété display
Padding, marges et bordures
Travaux pratiques (à titre indicatif) : Mise en forme d'une page Web avec les propriétés CSS : padding et margin
Positionnement
Positionnement
Dans le flux
Absolu et relatif
Fixé
Flottant
Travaux pratiques (à titre indicatif) : utilisation des propriétés CSS position (Left, Top, Float, Clear)
CSS 3
Nouveaux sélecteurs
Fonts, couleurs et bordures
Positionnement en colonnes
Présentation des "media queries"
Travaux pratiques (à titre indicatif) : utilisation des propriétés CSS (Les ombrages, Les dégradés de couleurs, Les angles arrondis, Les Flex Box, Mise en forme selon le type de média)
Présentation des "media queries"
Adaptation des CSS aux caractéristiques du terminal
Règles conditionnelles (orientation, device-width...)
JavaScript et les anciens navigateurs
Réglage complémentaire de rendu visuel (viewport)
Travaux pratiques (à titre indicatif) : Utilisation des "media queries" pour s'adapter à différents hardwares
Principes de grilles fluides, fixes
Conception classique versus conception selon une grille
Importance des blocs, approche contenu / contenant
Unités de mesure (%, em, px), mode Retina
Eviter les débordements et les points de rupture
Principe des box, layout avec CSS 3
Travaux pratiques (à titre indicatif) : Test de différents types de grille
Frameworks et librairies responsives
Détecter les ressources avec "Modernizr"
Librairies de substitution (less, CSS 3 PIE...)
Frameworks CSS 960 Grid, HTML 5 Boilerplate, Bootstrap, Foundation, Skeleton, 320
Travaux pratiques (à titre indicatif) : Installation de Bootstrap et test de différentes grilles selon des tailles d'écrans différentes
Les fondamentaux de l'accessibilité numérique
Le RGAA (Référentiel Général d'Amélioration de l'Accessibilité) : définition d'un site Web "accessible"
Les outils dédiés
Bonnes pratiques de construction HTML des pages
La sémantique des éléments
Les attributs fondamentaux pour l'accessibilité
Travaux pratiques (à titre indicatif) : Adaptation des pages réalisées pour les rendre accessibles
Certification (en option, hors inscription via le CPF)
Prévoir l'achat de la certification en supplément (ne concerne pas les inscriptions via le CPF pour lesquelles la certification est incluse)
L'examen (en français) sera passé le dernier jour, à l'issue de la formation et s'effectuera en ligne
La durée moyenne est de 1h00
Plusieurs dispositifs de financement sont accessibles via les OPCO (Opérateurs de Compétences), organismes agréés par le ministère du Travail dont le rôle est d’accompagner, collecter et gérer les contributions des entreprises au titre du financement de la formation professionnelle.
Pour plus d’information, une équipe de gestionnaires SKOLAE Formation spécialisée vous accompagne dans le choix de vos formations et la gestion administrative.
Modalités d'évaluation : évaluation en 3 phases :
Pendant la formation : un bilan journalier effectué par l'intervenant.
À chaud : à la fin de la formation, un bilan qualité pour mesurer l’atteinte des objectifs.
À froid : à J + 3 mois, une évaluation du transfert des acquis en situation professionnelle.
Matériel et/ou logiciels nécessaires pour suivre cette formation :
Formation en présentiel : les ordinateurs sont équipés des logiciels nécessaires au suivi de cette formation.
Formation en distanciel : il est recommandé de se munir d'un double écran. Droits d'administrateur ouverts afin de permettre des installations logiciel pendant la formation. Filezilla installé. Visual Studio Code installé ou autre éditeur de code avec lequel vous seriez familier. S'il y a lieu, des accès logiciel pourront être créés par Pyramyd et vous seront communiqués en formation.
Équipe pédagogique et techniques pédagogiques :
Un consultant expert de la thématique et une équipe pédagogique en support du stagiaire pour toute question en lien avec son parcours de formation.
Alternance de théorie, de démonstrations par l’exemple et de mise en pratique grâce à de nombreux exercices individuels ou collectifs.
Exercices, études de cas et cas pratiques rythment cette formation.
Ressources pédagogiques :
Un support de formation présentant l'essentiel des points vus durant la formation et proposant des éléments d'approfondissement est téléchargeable sur notre plateforme.
