HTML

Se connecter pour s'inscrire

Votre progression

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

Le langage de balisage standard pour les pages Web

  1. Description

    Maîtrisez les bases du HTML5, le langage fondamental du web, et apprenez à structurer sémantiquement le contenu de vos pages web. Ce cours complet vous guidera à travers les concepts essentiels du HTML moderne, des balises de base aux éléments sémantiques avancés. À travers des exercices pratiques et des projets concrets, vous acquerrez les compétences nécessaires pour créer des sites web bien structurés, accessibles et optimisés pour le référencement. Parfait pour les débutants, cette formation vous fournira des bases solides pour poursuivre votre apprentissage du développement web front-end.

  2. Objectifs

  3. Validations de compétences

    • QCM
      QCM comprenant des questions sur les principes fondamentaux étudiés. Les étudiants devront sélectionner la réponse correcte parmi les options proposées.
    • Étude de cas
      Proposer une étude de cas dans laquelle les étudiants doivent analyser une situation spécifique liée aux concepts étudiés. Inviter les étudiants à repérer les principes applicables, à recommander des outils et des technologies appropriés, et à expliquer les bénéfices escomptés de l'adoption dans cette situation spécifique.
    • Exercices pratiques
      Organisation d’exercices pratiques où les étudiants peuvent mettre en œuvre les concepts étudiés. Évaluation de la capacité des étudiants à mettre en place les solutions proposées.
    • Présentation orale
      Demander aux étudiants de préparer une courte présentation orale sur un sujet lié au contenu du cours. Ils devront expliquer le concept, les principes clés, les outils pertinents et les avantages de l'adoption des solutions proposées. Évaluer leur compréhension du sujet, leur capacité à communiquer efficacement et à présenter des informations de manière claire et concise.
    • Projet
      La validation des compétences s'effectue à travers un projet professionnel simulé. Les apprenants, répartis en équipes, devront mener à bien une mission data complète incluant :

      • Une répartition des rôles (architecte, data engineer, analyste...)
      • Des livrables techniques avec stack imposée
      • Des deadlines serrées
      • Une soutenance professionnelle (20 min max)

      La présentation devra :

      1. Couvrir l'ensemble des concepts clés du module
      2. Démontrer la maîtrise technique via une démo opérationnelle
      3. Communiquer de manière claire et convaincante

  4. Public cible

    • Débutants: Personnes découvrant le domaine ou ayant peu d'expérience.
    • Intermédiaires: Personnes ayant déjà une expérience de base dans le domaine.
    • Experts: Personnes expérimentées cherchant à approfondir leurs connaissances.
    • Étudiants: Étudiants en formation initiale.
    • Professionnels: Professionnels en activité cherchant à se former.
    • En reconversion: Personnes en reconversion professionnelle.

  5. Besoins techniques

    • Ordinateur fonctionnel
      Un ordinateur en bon état de fonctionnement, capable d’exécuter les logiciels nécessaires au cours.
    • Accès à Internet
      Connexion Internet stable pour accéder aux ressources en ligne, visioconférences et plateformes pédagogiques.
    • Ordinateur avec 8 Go de RAM
      Ordinateur équipé d’au moins 8 Go de mémoire vive pour un usage bureautique avancé ou développement léger.
    • Navigateur web moderne
      Google Chrome, Mozilla Firefox, Microsoft Edge, Safari ou autre navigateur à jour.
    • Environnement de développement
      IDE ou éditeur de texte adapté (Visual Studio Code, PyCharm, Eclipse, etc.), selon le langage étudié.

  6. Prérequis

    • Aucun prérequis

  7. Niveau

    Tous niveaux

  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

Exercice d'application

Réaliser une mise en pratique contrôlée des notions du module.

Obligatoire Consulter
Examen

Examen de fin de module

Vérifier la maîtrise des notions essentielles du module.

Obligatoire Consulter
Projet

Projet de synthèse

Produire une solution complète et la présenter avec ses choix techniques.

Livrables :

  • Code source
  • README
  • Démonstration
Obligatoire Consulter