recherche

Recherche

espace stagiaire

Espace stagiaire

Nous contacter
 

Catalogue de formations

HTML5 / CSS3 Maîtriser HTML5 et CSS3 pour créer des pages Web Responsives Mixte : présentiel / à distance

Dernière mise à jour : 30/08/2024

Vous souhaitez apprendre à créer des pages web statiques avec les standards HTML5 et CSS3 ? Vous êtes au bon endroit !

M'inscrire à la formation

Ajouter au panier

Public visé

  • Toute personne souhaitant apprendre à créer des pages Web statiques côté client avec les standards HTML5 et CSS3

Prérequis

  • Avoir une expérience de programmation, quel que soit le langage d'origine

Objectifs de la formation

A l'issue de cette formation, l'apprenant sera capable de :

  • Construire des pages Web en HTML5 ;
  • Habiller et mettre en forme des pages Web avec CSS3 ;
  • Créer des formulaires avancés ;
  • Créer des tableaux de données ;
  • Créer des menus de navigation ;
  • Intégrer du contenu multimédia ;
  • Utiliser les différentes techniques CSS de positionnement et dimensionnement pour adapter la présentation aux différents appareils (smartphone, tablette, PC)

Contenu de la formation

visuel

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

Compétences acquises à l'issue de la formation

  • Construire des pages Web en HTML5
  • Habiller et mettre en forme des pages Web avec CSS3
  • Créer des formulaires avancées
  • Créer des menus de navigation
  • Utiliser les différentes techniques CSS de positionnement et dimensionnement pour adapter la présentation aux différents appareils (smartphone, tablette, PC)
  • Parcourir et modifier la structure d'une page en JavaScript
  • Gérer des évènements utilisateurs
  • Intégrer à une application web des appels à des services Web REST et WebSockets en JavaScript

Modalités pédagogiques

  • Explications théoriques suivies de pratiques guidées puis de mises en autonomie.
  • Exercices autonomes et réguliers pour assurer l'assimilation

Moyens et supports pédagogiques

Votre formation a lieu en présentiel :

  • 1 vidéoprojecteur par salle
  • 1 ordinateur

 

Votre formation se déroule à distance avec :

  • 1 ordinateur
  • 1 connexion Internet
  • 1 adresse e-mail valide
  • 1 équipement audio (micro et enceintes ou casque)
  • 1 Webcam (facultatif – dans l'idéal)
  • 1 deuxième écran (facultatif – dans l'idéal)

 

Votre formation se déroule sur notre plate-forme de formation avec :

  • 1 ordinateur
  • 1 connexion Internet
  • 1 adresse e-mail valide
  • 1 équipement audio (micro et enceintes ou casque - facultatif)

 

Support stagiaire :

À l'issue de la formation, les exercices et travaux pratiques réalisés, leurs corrigés ainsi qu'un support de cours dématérialisé sera fourni à chaque stagiaire par e-mail ou via la plate-forme FOAD.

Modalités d'évaluation et de suivi

L'acquisition des compétences de la formation se fait à travers le suivi du formateur tout au long de la formation (séquences synchrones et asynchrones). Elle s'appuie également sur la réalisation d'exercices et de TP. Enfin, des quiz s'ajoutent aux différents outils de validation de l'acquisition des compétences visées. Une évaluation est systématiquement réalisée par chaque stagiaire, à l'issue de la formation.

Profil du formateur

Nos formateurs sont certifiés à l'issue d'un parcours organisé par nos soins. Ils bénéficient d'un suivi de maintien et d'évolution de leurs compétences aussi bien au niveau technique que pédagogique.
Chacun de nos formateurs a bénéficié d'une formation spécifique à l'animation de classe virtuelle et à l'utilisation des solutions de formation à distance du Groupe ARKESYS.

Informations sur l'accessibilité

Cette formation est accessible à toute personne en situation de handicap. Notre référent handicap prendra contact avec les stagiaires concernés pour adapter l'animation à leurs besoins et rendre l'apprentissage accessible à tous. Enfin, nos centres de formation sont accessibles aux personnes à mobilité réduite.

Prochaines Sessions

  • Aucune formation INTER-ENTREPRISE n'est programmée pour le moment. Contactez-nous via le formulaire ou par téléphone au 04.37.24.36.78 afin de connaitre les dates possibles ou les autres modalités d'inscription.

Dans la même catégorie

Partager cette formation

Notre nouveau catalogue est en cours de déploiement. Aussi, pour connaître tous nos indicateurs, veuillez nous contacter directement.

 

Catalogue de formation propulsé par Dendreo,
logiciel de gestion pour les OF