HTML

Informations Générales

1. Durée : ~ 40h
2. Format : Cours en présentiel / En ligne (en fonction des besoins)
3. Objectifs :
   1. Comprendre les bases du HTML et son rôle dans le développement web.
   2. Savoir structurer et créer une page web avec du contenu sémantique.
   3. Maîtriser les balises HTML les plus couramment utilisées.
   4. Apprendre les bonnes pratiques de développement (accessibilité, performance, maintenance).
4. Prérequis : Aucun prérequis technique particulier. Une connaissance de base de l’utilisation d’un ordinateur est recommandée.
5. Méthode d'enseignement :
   1. Exposés théoriques
   2. Exercices pratiques
   3. Projets de groupe
   4. Évaluations régulières

Contenu du Cours

1. Structure et contenu d'une page HTML

   1. Les balises de structure essentielles
      1. <html>, <head>, <body>
      2. Le DOCTYPE et l’encodage des caractères
      3. Structure hiérarchique d’une page HTML
   2. Les titres et paragraphes
      1. Balises de titres (<h1> à <h6>)
      2. Balises de texte (<p>, <br>, <hr>)
   3. Les listes et les tableaux
      1. Listes ordonnées (<ol>) et non ordonnées (<ul>)
      2. Listes imbriquées et éléments de liste (<li>)
      3. Création de tableaux avec <table>, <tr>, <td>, <th>
   4. Exercice pratique : Structurer une page avec des titres, des paragraphes, des listes et un tableau

2. Liens, images et médias

   1. Les liens hypertexte
      1. Création de liens avec <a>
      2. Attributs des liens (href, target, title)
      3. Liens internes et externes, liens vers des fichiers
   2. Les images dans HTML
      1. Utilisation de <img>
      2. Attributs des images (src, alt, width, height)
      3. Optimisation des images pour le web (formats, poids, SEO)
   3. Insertion de médias
      1. Intégration de vidéos avec <video>
      2. Intégration d'audio avec <audio>
      3. Utilisation d’iframes pour intégrer des contenus externes
   4. Exercice pratique : Ajouter des liens et des images dans une page

3. Les formulaires HTML

   1. Introduction aux formulaires
      1. L’utilité des formulaires dans une page web
      2. Création de formulaires avec <form>, <input>, <label>, <textarea>
   2. Les différents types de champs
      1. Champs texte, mot de passe, email, boutons radio, cases à cocher, menus déroulants
      2. Le bouton de soumission avec <button> et <input type="submit">
   3. Accessibilité et validation des formulaires
      1. Attributs required, placeholder, autofocus
      2. Validation côté client (pattern, types spécifiques)
   4. Exercice pratique : Créer un formulaire de contact complet

4. Sémantique et accessibilité

   1. Les balises sémantiques
      1. Utilisation des balises <header>, <footer>, <nav>, <section>, <article>, <aside>
      2. Importance de la sémantique pour le SEO et l’accessibilité
   2. Accessibilité des contenus HTML
      1. L’importance des attributs alt, aria, role
      2. Bonnes pratiques pour rendre les pages web accessibles à tous
   3. Exercice pratique : Structurer une page sémantiquement correcte et accessible

5. Les bonnes pratiques de développement

   1. Introduction à Git et GitHub
      1. Versionner un projet HTML avec Git
      2. Créer un repository sur GitHub et y pousser un projet
   2. Validateurs HTML et SEO
      1. Utiliser des outils comme le validateur W3C pour valider le code
      2. Introduction au référencement naturel (SEO)
   3. Exercice pratique : Créer un projet Git, valider un document HTML, et l’héberger sur GitHub Pages

6. Projet final

   1. Projet pratique : Créer un site web complet avec plusieurs pages
      1. Les étudiants devront concevoir un petit site en HTML (structure, formulaires, images, liens, etc.)
      2. Application des bonnes pratiques vues durant le cours
   2. Critères d’évaluation :
      1. Respect des consignes
      2. Utilisation correcte des balises HTML
      3. Accessibilité et bonnes pratiques
      4. Qualité de la documentation et des commits Git

Ressources Supplémentaires

• MDN Web Docs (HTML)
• W3Schools (HTML Tutorial)
• HTML Validator (W3C)