Evolution MM

Formations à l'informatique
Découvrez la différence ENI

Lien accueil

Téléchargez le Calendrier des formations

Nantes, Rennes, Niort, Nice, Paris

Rechercher
Rechercher une formation
 

Maîtriser HTML5 et CSS3 pour créer des pages Web Responsives

Formation éligible au CPF

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

Cette formation prépare au passage de l'examen " Certification IT - Développement de sites Web avec le langage de balises HTML et des feuilles de style CSS - HTML5 et CSS3 ".

Public :

  • Développeurs, architectes techniques, chefs de projet, concepteurs Web, intégrateurs Web, graphistes.

Objectifs :

  • 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).

Pré-requis :

  • Maîtriser l'outil informatiques et les usages du Web.

Contenu pédagogique

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 "


Modalité et moyens pédagogiques, techniques et d'encadrement

  • Formation avec un formateur, dans une salle dédiée à la formation, équipée d'un vidéoprojecteur, d'un tableau blanc et d'une solution de visio-conférence dans le cas des formations suivies en in-classTM (présentiel à 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. La répartition du temps entre la théorie et la pratique est mentionnée dans le plan de cours.

Modalités d'évaluation des acquis

  • L'évaluation des acquis se fait tout au long de la formation au travers des différents travaux dirigés et travaux pratiques réalisés par le stagiaire.
  • En complément, pour les stagiaires qui le souhaitent, certaines formations peuvent être validées officiellement par un examen de certification. Pour les formations concernées, l'examen est mentionné dans la zone " Commentaire " du programme de formation. Les candidats doivent produire un travail personnel important en vue de se présenter au passage de l'examen, le seul suivi de la formation ne constituant pas un élément suffisant pour garantir un bon résultat et/ou l'obtention de la certification.

Moyens de suivi d'exécution et appréciation des résultats

  • 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 notre équipe pédagogique ;
  • Attestation de fin de formation, remise au stagiaire en main propre ou par courrier électronique.

Qualification du formateur

  • 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.
Durée : 5 jour(s)
Tarif : 2 490 € (HT)
Réf : T448-004

Dates des sessions

Nantes (44) 21/10/19 Rennes (35) 21/10/19 Paris (75) 21/10/19 Niort (79) 21/10/19 Nice (06) 21/10/19 in-class™