2.1 – Structurer le HTML

🏆 Compétence cible

C2 – Interface utilisateur web statique et adaptable (27h – Niveau 1)
L’apprenant doit être capable de créer des pages web statiques structurées et ergonomiques, en respectant les standards du HTML et en posant les bases de l’accessibilité et du responsive design.

🧩 Micro-compétence

2.1 – Structurer le HTML (11h)
Construire et organiser la structure d’un site web à l’aide des balises HTML, en créant des formulaires accessibles et en appliquant les principes de sémantique pour optimiser le code.

📝 Description de l’autoformation

Cette autoformation a pour objectif de permettre aux apprenants de maîtriser les bases du HTML en construisant des pages web correctement structurées. Elle introduit les balises essentielles, la création de formulaires accessibles, et les bonnes pratiques de code sémantique pour améliorer la lisibilité et le référencement naturel.
Au terme de cette autoformation, l’apprenant sera capable de produire des pages HTML valides, organisées et conformes aux standards du web.

UA 2.1.1 – Structurer une page HTML

  1. 🎯 Objectif global

    • Apprendre à créer la structure de base d’une page web en utilisant les balises HTML fondamentales (texte, images, tableaux, listes).

  2. 📚 Liste des chapitres

    • Chapitre 1 : Structure de base d’une page HTML (1h).
    • Chapitre 2 : Balises de texte, images, médias, tableaux et listes (2h).

  3. 📄 Livrable attendu

    • Créer une page HTML contenant un titre, un paragraphe, une image, une liste et un tableau, avec un code correctement indenté et valide W3C.

  4. 🧪 Grilles d’évaluation

    • Niveau 1 : Identifier et utiliser les balises HTML basiques.
    • Niveau 2 : Organiser correctement une page web en respectant la structure HTML.
    • Niveau 3 : Produire une page complète et validée selon les standards.

UA 2.1.2 – Créer des formulaires accessibles

  1. 🎯 Objectif global

    • Créer des formulaires HTML complets et accessibles, respectant les bonnes pratiques d’accessibilité.

  2. 📚 Liste des chapitres

    • Chapitre 3 : Inputs, labels et groupes de champs (2h).
    • Chapitre 4 : Validation et accessibilité (2h).

  3. 📄 Livrable attendu

    • Réaliser un formulaire de contact (nom, e-mail, message) avec labels associés et un message d’erreur pour la validation des champs.

  4. 🧪 Grilles d’évaluation

    • Niveau 1 : Utiliser correctement les balises de formulaire.
    • Niveau 2 : Mettre en place un formulaire structuré et lisible.
    • Niveau 3 : Intégrer des notions d’accessibilité et de validation.

UA 2.1.3 – Produire un code HTML sémantique et optimisé

  1. 🎯 Objectif global

    • Comprendre et appliquer les principes de sémantique HTML pour améliorer le référencement et la lisibilité du code.

  2. 📚 Liste des chapitres

    • Chapitre 5 : Balises sémantiques et SEO (2h).
    • Chapitre 6 : Validation W3C et bonnes pratiques (2h).

  3. 📄 Livrable attendu

    • Produire une page web en utilisant des balises sémantiques (header, nav, section, article, footer) et valider le code via l’outil W3C.

  4. 🧪 Grilles d’évaluation

    • Niveau 1 : Reconnaître les balises sémantiques.
    • Niveau 2 : Structurer un document avec les bonnes pratiques de sémantique.
    • Niveau 3 : Optimiser la page pour le SEO et la conformité W3C.