HTML & CSS

Objectif de Formation

À l’issue de cette formation, le participant sera capable de créer et mettre en ligne un site web statique complet en utilisant HTML pour structurer le contenu et CSS pour le mettre en forme, en travaillant dans un environnement de développement local professionnel.

Objectifs Opérationnels

Après cette formation, les participants seront capables de :

OO1 — Être capable de configurer un environnement de développement local (éditeur de code + serveur WAMPServer) et d’organiser la structure de fichiers d’un projet web.
OO2 — Être capable de produire un document HTML valide en utilisant les balises structurelles essentielles (titres, paragraphes, listes, liens, images, tableaux, formulaires) et en respectant les règles de balisage.
OO3 — Être capable d’appliquer des styles CSS à un document HTML en maîtrisant les sélecteurs, le modèle de boîte, la typographie, les couleurs et les unités de mesure.
OO4 — Être capable de construire la mise en page d’une page web en utilisant les techniques de positionnement CSS (Flexbox) pour créer des mises en page à colonnes et des composants courants (navigation, cartes, pied de page).
OO5 — Être capable de produire un site web statique multi-pages complet, structuré en HTML et mis en forme avec une feuille de style CSS externe, et de l’afficher dans un navigateur via le serveur local.

Public

Toute personne souhaitant s’initier aux bases du développement web pour créer ses propres pages web ou mieux comprendre le fonctionnement des sites internet.

Prérequis

Informatique : Savoir utiliser un ordinateur, naviguer sur le web et gérer des fichiers et dossiers (créer, renommer, déplacer).
Langue : Compréhension de base de la langue française (lecture et écriture).
Aucune connaissance en programmation requise.

Durée

21 heures — 6 sessions de 3h30 (durée et rythme ajustables selon les besoins du commanditaire).

Contenu

Voir le programme

Module 1 : Environnement de travail et introduction au web (OO1)

Comment fonctionne le web : navigateur, serveur, requête HTTP — explications accessibles
Différences entre HTML, CSS et JavaScript : rôle de chacun
Installer et configurer un éditeur de code (VS Code ou Notepad++)
Installer et configurer WAMPServer comme serveur local
Organiser la structure de fichiers d’un projet web : dossiers, conventions de nommage
Créer et afficher son premier fichier HTML dans le navigateur

Module 2 : Les bases du HTML (OO2)

Concepts d’hypertexte et de balisage : balises ouvrantes, fermantes, auto-fermantes
Structure d’un document HTML : <!DOCTYPE> <html> <head> <body>
Balises de texte : titres (<h1> à <h6>), paragraphes, gras, italique, citations
Listes à puces et listes numérotées
Liens hypertextes : liens internes, externes et ancres
Insertion d’images : attributs src, alt, dimensions

Module 3 : HTML avancé — tableaux, formulaires et sémantique (OO2)

Créer et structurer un tableau HTML : <table>, <tr>, <td>, <th>, fusion de cellules
Créer un formulaire HTML : champs texte, email, case à cocher, liste déroulante, bouton
Balises sémantiques HTML5 : <header>, <nav>, <main>, <section>, <article>, <footer>
Exercice pratique : page HTML complète avec navigation, contenu structuré et formulaire de contact

Module 4 : Les bases du CSS (OO3)

Différence entre structure (HTML) et style (CSS)
Modes d’intégration du CSS : inline, interne, feuille de style externe (bonne pratique)
Syntaxe CSS : sélecteurs, propriétés, valeurs
Sélecteurs essentiels : élément, classe, identifiant, pseudo-classes (:hover, :focus)
Propriétés typographiques : police, taille, couleur, graisse, interligne
Couleurs et arrière-plans : codes hexadécimaux, RGB, dégradés simples
Le modèle de boîte (box model) : margin<, padding, border, width, >height
Unités de mesure : px, %, em, rem

Module 5 : Mise en page CSS avec Flexbox (OO4)

Comprendre le flux normal d’une page et les limites du positionnement classique
Introduction à Flexbox : conteneur et éléments flexibles
Propriétés Flexbox essentielles : flex-direction, justify-content, align-items, flex-wrap
Créer une mise en page à colonnes avec Flexbox
Construire des composants courants : barre de navigation, cartes, pied de page
Exercice pratique : mise en page complète d’une page d’accueil avec Flexbox

Module 6 : Projet de synthèse — site web statique complet (OO5)

Conception et organisation du projet : structure de fichiers, plan des pages
Développement d’un site multi-pages (accueil, page de contenu, formulaire de contact)
Mise en forme globale avec une feuille CSS externe : typographie, couleurs, mise en page
Vérification et correction du code HTML et CSS
Affichage et test du site dans le navigateur via WAMPServer
Présentation du projet devant le groupe et feedback du formateur

Délai d’accès

La formation est accessible 15 jours après la prise de contact initiale.

Modalités d’accès

3 étapes préalables à la mise en œuvre des formations :

Prise de contact et renseignements
Analyse du besoin et adaptation de l’offre
Formalisation et planification

Méthodes et Moyens Mobilisés

Méthodes mobilisées

Formation par la pratique : chaque notion est immédiatement codée et visualisée dans le navigateur. Les participants construisent progressivement leur site web tout au long de la formation, du premier fichier HTML jusqu’au projet de synthèse final. Les erreurs sont analysées collectivement comme levier d’apprentissage.

Moyens

Intervenant : Formateur Professionnel
Matériel : Paperboard, vidéoprojecteur, wifi, mise à disposition des PC portables
Ressources Pédagogiques : Supports PDF, fichiers de départ fournis par le formateur et accès à la documentation MDN Web Docs

Modalités d’évaluation

Positionnement amont : Questionnaire d’auto-évaluation envoyé avant la formation pour identifier le niveau de chaque participant et adapter le rythme de progression.
Évaluations en cours de formation : Exercices pratiques de codage corrigés à chaque module avec feedback individualisé du formateur à l’aide d’une grille critériée (validité du code, rendu visuel, respect des bonnes pratiques).
Bilan de fin de formation : Projet de synthèse au module 6 — le participant produit et présente un site web statique multi-pages fonctionnel développé en HTML et CSS, couvrant l’ensemble des objectifs opérationnels (OO1 à OO5).

À l’issue de la formation : remise d’une attestation d’assiduité et de compétences acquises individuelle mentionnant les objectifs atteints.

Coordination Pédagogique et Suivi

Référent pédagogique : Olivier Ledanois — olivier.ledanois@gmail.com — 0692 61 27 86
Suivi inter-séances : Disponibilité par email entre les sessions (délai de réponse : 24h ouvrées).
Feuilles d’émargement : Signées par session par chaque participant et le formateur.
Bilan pédagogique : Compte-rendu transmis au commanditaire dans les 5 jours suivant la dernière session.

Accessibilité PSH

Les salles de formation proposées sont accessibles aux personnes en situation de handicap (PMR), garantissant ainsi un cadre inclusif et adapté à tous les participants. Des aménagements spécifiques peuvent être étudiés sur demande afin de répondre aux besoins particuliers.

Recueil de la Satisfaction

Questionnaire de satisfaction stagiaire remis en fin de dernière session.
Questionnaire de satisfaction commanditaire transmis dans les 15 jours suivant la formation.
Les résultats sont archivés et analysés pour l’amélioration continue de l’offre de formation.

Tarif

À partir de 900 €

Création

01/02/2025

MAJ

Mai 2025