Aucun

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)

Votre formateur

Votre formateur est un professionnel de l'informatique et de la pédagogie. Il possède plusieurs années d'expérience sur les produits enseignés et est en veille permanente pour suivre leurs évolutions.

Déroulement de votre formation

• Avant votre formation : Avec l'un de nos conseillers formation, vous choisissez la formation adaptée à votre niveau et à vos objectifs.

• Pendant votre formation : En présentiel ou à distance, vous intégrez un groupe restreint qui facilite le partage et les échanges entre les participants et avec votre formateur. Pour une meilleure assimilation, le formateur privilégie la pédagogie inclusive et l'enseignement par la pratique au travers d'exercices et de cas concrets réalisés seul(e) ou en groupe.

• Après votre formation (en option à l'achat, consultez-nous) : Accès à la bibliothèque numérique pendant 1 an. Vous continuez à vous former en accédant en illimité à plus de 1200 livres et vidéos.

HTML5 / CSS3 - Créer des pages Web responsives

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”

Une formation réussie est une formation certifiée !

Validez et mettez en valeur les compétences acquises Créer et mettre en forme des pages web (HTML5 et CSS3). Enregistrée au Répertoire Spécifique et validée par les autorités compétentes, elle garantit un haut niveau de qualité et de reconnaissance.

Les atouts d'une formation certifiée

• Bénéficier d'une reconnaissance professionnelle et officielle de votre montée en compétence
• Reconnaître vos acquis et sécuriser votre parcours professionnel
• Faciliter votre mobilité professionnelle dans et en dehors de votre entreprise

Une formation ne s'arrête pas à la certification

Votre formateur sera à votre écoute pour vous conseiller sur votre prochaine formation : mise à jour de vos compétences, approfondissement, formation avec un formateur, formation à un autre logiciel…

Se former, c'est progresser à chaque moment de sa vie !

Nos formations sont accessibles aux personnes en situation de handicap. Afin de nous permettre d'organiser le déroulement de la formation dans les meilleures conditions possibles en effectuant les aménagements nécessaires, contactez-nous.