HTML5/CSS3/Responsive : créer des pages Web

Présentation
Intervenants
Prochaines sessions
Pré-inscription

Dans cette formation, vous apprendrez à créer des pages web statiques côté client avec les standards HTML5 et CSS3.

Contenu

Introduction

Vue d’ensemble de la création de contenu pour le WebStandard 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
Travaux pratiques :
- Structure HTML de la page
- Ajout de contenus simples
- Mise en place de liens de navigation entres les pages

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
Travaux pratiques : Organisation sémantique des pages HTML avec les bonnes balises

Concepts d’accessibilité numérique

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

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

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

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

Responsive web Design

Principes fondamentaux
Utilisation des « media queries »
Critères d’adaptation (width, height, device-width, orientation, etc.)
Points de ruptures et grilles
Viewport et zoom
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 »

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 »

Mise en forme avancée en CSS3

Sélecteurs CSS3
- Pseudo classes
- Pseudo éléments
Variables CSS
Transformations et transitions
Travaux pratiques : Mise en forme du menu de navigation

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

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

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

Compétences visées

Créer une page HTML avec des éléments simples (texte, images, listes, liens)
Mettre en forme le contenu de la page en CSS
Définir des règles de positionnement du contenu
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

Méthodologie

Depuis votre domicile ou votre entreprise, vous rejoignez un environnement de formation en ligne, à l’aide de votre ordinateur, tout en étant éloigné.e physiquement du/de la formateur.trice et des autres participant.e.s. Vous êtes en totale immersion avec le groupe et participez à la formation dans les mêmes conditions que le présentiel.

En début et en fin de formation, vous réalisez une auto-évaluation de vos connaissances et compétences en lien avec les objectifs de la formation. L’écart entre les deux évaluations permet ainsi de mesurer vos acquis.

Public & Prérequis

Cette formation s’adresse aux intégrateur.trice.s web, web designers, rédacteur.trice.s web, concepteur.trices/développeur.euse.s et ne nécessite aucun prérequis.

Titre obtenu

Vous recevez une attestation de suivi de cours CPI Formations à la fin de cette formation, pour autant que votre taux de présence atteigne 80%.

Intervenant

Intervenant.e de la formation

Professionnel.le de l'informatique et de la pédagogie

Intervenant.e de la formation

Professionnel.le de l'informatique et de la pédagogie

La formation est animée par un.e professionnel.le 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/Elle est en veille technologique permanente et possède plusieurs années d’expérience sur les produits, technologies et méthodes enseignés. Il/Elle est présent.e auprès des stagiaires pendant toute la durée de la formation.