Aller au contenu principal

Module HTML.11 – Projet HTML

Objectif​

Créer une page HTML complète, sémantique, accessible et optimisée pour valider toutes les compétences HTML acquises.

Théorie​

Spécifications du projet​

Application : Site web professionnel complet

Créer un site multi-pages avec toutes les fonctionnalités HTML apprises.

Spécifications du projet​

Fonctionnalités requises​

1. Structure HTML5 complète

  • Doctype HTML5
  • Métadonnées complètes (charset, viewport, SEO)
  • Structure sémantique (<header>, <nav>, <main>, <footer>)

2. Navigation

  • Menu de navigation accessible
  • Liens internes entre pages
  • Liens externes sécurisés
  • Skip links

3. Contenu riche

  • Titres hiérarchiques (h1-h6)
  • Paragraphes avec mise en forme sémantique
  • Listes (ul, ol, dl)
  • Tableaux accessibles
  • Images avec alt descriptifs
  • Vidéo/audio si approprié

4. Formulaires

  • Formulaire de contact complet
  • Validation HTML5
  • Labels accessibles
  • Groupes de champs (fieldset)

5. Accessibilité

  • WCAG AA conforme
  • ARIA approprié
  • Navigation clavier
  • Contraste des couleurs

6. Performance

  • HTML valide (W3C)
  • Structure optimisée
  • Images optimisées
  • Préchargement si nécessaire

Structure du projet​

Pages à créer :

projet-html/
├── index.html          # Page d'accueil
├── about.html          # À propos
├── services.html       # Services
├── contact.html        # Contact
├── css/
│   └── style.css      # Styles de base
└── images/
    └── (images optimisées)

Guide de développement​

Étape 1 : Structure de base (2h)

  • Créer toutes les pages avec structure HTML5
  • Métadonnées complètes
  • Navigation de base

Étape 2 : Contenu (3h)

  • Ajouter le contenu sur chaque page
  • Utiliser toutes les balises apprises
  • Images avec alt

Étape 3 : Formulaires (2h)

  • Formulaire de contact complet
  • Validation HTML5
  • Accessibilité

Étape 4 : Accessibilité (2h)

  • ARIA approprié
  • Navigation clavier
  • Contraste
  • Tests avec WAVE

Étape 5 : Optimisation (1h)

  • Validation HTML
  • Performance
  • Structure propre

Étape 6 : Finalisation (1h)

  • Tests complets
  • Corrections
  • Documentation

Critères d'évaluation​

Structure (25%) :

  • HTML5 valide
  • Structure sémantique
  • Métadonnées complètes

Contenu (25%) :

  • Utilisation appropriée des balises
  • Images avec alt
  • Formulaires complets

Accessibilité (25%) :

  • WCAG AA
  • Navigation clavier
  • ARIA approprié

Performance (15%) :

  • HTML optimisé
  • Images optimisées
  • Validation W3C

Code propre (10%) :

  • Indentation
  • Commentaires
  • Organisation

Exercice - Développement​

Page d'accueil (index.html)​

Contenu :

  • Header avec logo et navigation
  • Section hero avec titre principal
  • Section "À propos" avec texte et image
  • Section "Services" avec liste
  • Section "Témoignages" avec citations
  • Footer avec liens et mentions légales

Éléments à inclure :

  • <header>, <nav>, <main>, <footer>
  • <section> pour chaque partie
  • Images avec <figure> et <figcaption>
  • Citations avec <blockquote>
  • Liste de services

Page À propos (about.html)​

Contenu :

  • Titre de page
  • Section histoire
  • Section équipe (tableau)
  • Section valeurs (liste de description)

Éléments à inclure :

  • Tableau accessible avec <thead>, <tbody>
  • <dl> pour les valeurs
  • Images de l'équipe

Page Services (services.html)​

Contenu :

  • Liste des services
  • Tableau comparatif
  • Formulaire de demande de devis

Éléments à inclure :

  • Liste ordonnée/non ordonnée
  • Tableau avec fusion de cellules
  • Formulaire avec validation

Page Contact (contact.html)​

Contenu :

  • Formulaire de contact complet
  • Informations de contact
  • Carte (iframe Google Maps si possible)

Éléments à inclure :

  • Formulaire avec tous les types d'input
  • Validation HTML5
  • Fieldset et legend
  • Labels accessibles

Validation finale​

Checklist :

  • Toutes les pages ont une structure HTML5 valide
  • Métadonnées complètes (charset, viewport, SEO)
  • Navigation accessible sur toutes les pages
  • Un seul <h1> par page
  • Toutes les images ont un alt descriptif
  • Formulaires avec labels et validation
  • Tableaux accessibles (caption, scope, th)
  • Structure sémantique complète
  • ARIA approprié
  • Navigation clavier fonctionnelle
  • Contraste WCAG AA
  • HTML valide (W3C Validator)
  • Performance optimisée
  • Code propre et commenté

Tests :

  1. W3C Validator : 0 erreurs
  2. WAVE : 0 erreurs
  3. Navigation clavier : fonctionnelle
  4. Lighthouse : Score > 90
  5. Contraste : WCAG AA

Ressources​

Si vous êtes bloqué :

  • Revisitez les modules précédents
  • Documentation MDN : developer.mozilla.org/html
  • Validateur W3C : validator.w3.org
  • WAVE : wave.webaim.org

Bonnes pratiques :

  • Code organisé
  • Commentaires appropriés
  • Structure sémantique
  • Accessibilité prioritaire

Objectif final​

Créer un site web HTML complet qui démontre :

  • Maîtrise de la structure HTML5
  • Utilisation appropriée de toutes les balises
  • Accessibilité conforme WCAG AA
  • Performance optimisée
  • Code professionnel et maintenable

Validation : Vous avez terminé HTML quand votre site est fonctionnel, accessible, valide et utilise toutes les fonctionnalités apprises.

Félicitations ! Vous avez terminé l'apprentissage complet du HTML. Vous êtes maintenant capable de créer des sites web professionnels, accessibles et performants.