HTML sémantique

Se connecter pour s'inscrire

Votre progression

Continuez pour débloquer la suite !
0 / 0 étapes complétées 0
%

Syllabus

  1. Description

  2. Objectifs

  3. Validations de compétences

  4. Public cible

    Aucun public cible spécifié pour ce module.

  5. Besoins techniques

  6. Prérequis

    • Aucun prérequis

  7. Niveau

  8. Historique du module

    Aucune action enregistrée

  1. 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

  2. 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

  3. Ressources Supplémentaires

Atelier guidé

Construire une page sémantique, formulaire robuste et navigation clavier à partir d’un besoin réel.

  1. Structure : créer une page avec header, navigation, main, sections et footer sans dépendre des div.
  2. Formulaire : associer labels, messages d’erreur, focus et validation côté serveur.
  3. Validation : vérifier le HTML, les liens, les images et les états clavier avec un outil adapté.

Restitution de l’atelier

  • Une page HTML sémantique.
  • Un formulaire avec états d’erreur et de succès.
  • Un rapport de validation et d’accessibilité.
Validation : La page est lisible sans image, utilisable au clavier et validée sans erreur bloquante.

Exercices, examens et projets

Exercice

Atelier HTML

Construire une page sémantique et accessible.

Obligatoire Consulter
Examen

Examen HTML

Évaluer balises, sémantique, formulaires et accessibilité.

Obligatoire Consulter
Projet

Projet HTML

Produire une page complète en respectant les standards.

Livrables :

  • HTML
  • Accessibilité
Obligatoire Consulter