← Retour aux formations

Développement Web & No-Code

HTML5, initiation : acquérir les bases de la création d'une page web

Débutant
Développement Web & No-Code

À propos de cette formation

Cette formation d'une journée initie les participants aux fondamentaux du langage HTML et à ses évolutions jusqu'à HTML5. Elle couvre la structure type d'un document, les principales balises sémantiques, la création de tableaux et de formulaires, et les premières notions d'accessibilité numérique. Une approche résolument pratique, orientée mise en œuvre immédiate du langage dans un éditeur de code.

Objectifs de la formation

  • check_circleConstruire une structure de document HTML5 accessible et valide
  • check_circleMaîtriser les balises sémantiques essentielles
  • check_circleCréer la structure d'une page web avec navigation
  • check_circleCréer la structure d'un formulaire simple
  • check_circleComprendre les enjeux de l'accessibilité numérique au travers des référentiels AccessiWeb et WCAG

Programme détaillé

Module 1 — Présentation du langage HTML5

  • Rappels sur les bases du web
  • Histoire du HTML jusqu'à HTML5
  • Les trois types fondamentaux : éléments, balises et attributs HTML
  • Démonstration : affichage du code source de pages HTML5 et présentation du validateur W3C

Module 2 — Structure d'un document HTML

  • Le Doctype, le <head> et le <body>
  • Les balises sémantiques et génériques
  • Les attributs HTML
  • Exercice : construction de la structure de base d'un document HTML

Module 3 — L'en-tête d'un document HTML

  • La balise <title>
  • Les balises <meta> : description et http-equiv
  • Les balises <link>, <script> et <style>
  • L'encodage et le type MIME
  • Exercice : construction du <head> et aperçu du <title> dans les résultats d'un moteur de recherche

Module 4 — Le corps d'un document HTML

  • Balises sémantiques : <header>, <footer>, <main>, <section>, <nav>, <article>
  • Balises block : <h>, <p>, <ul>, <li>, <div>...
  • Balises inline : <a>, <img>, <span>...
  • Le lien et l'attribut alt
  • Autres balises sémantiques : <blockquote>, <cite>...
  • Le commentaire HTML
  • Exercice : structuration d'une page web standard

Module 5 — Afficher des données tabulaires

  • La balise <table> et ses attributs (height, width, border)
  • Les balises <tr>, <td>, <th>, <tbody>, <thead>, <tfoot>
  • Les attributs scope et summary pour l'accessibilité
  • Exercice : réalisation d'une page avec un tableau simple

Module 6 — Principales balises de formulaires

  • La balise <form> et ses attributs method et action
  • Les balises <label> et <input>
  • Les attributs name et id
  • Exercice : réalisation d'un formulaire simple

Module 7 — L'accessibilité numérique

  • Définition de l'accessibilité numérique et cadre légal
  • Le référentiel AccessiWeb
  • Les Web Content Accessibility Guidelines (WCAG)
  • Panorama des outils d'audit disponibles
  • Exercice : audit d'une page web avec l'outil Wave et l'extension Opquast

Prérequis

Utiliser régulièrement Internet.