Retour
Module 1 : Découvrir le Web et HTML
1.1 — Comment fonctionne le Web Aperçu
1.2 — Installer son environnement de travail
🛠️ Projet 1 — Hello World
Module 2 : Structure d'une page HTML5
2.1 — Anatomie d'une page HTML5 Aperçu
🛠️ Projet 2 — Structure complète
Module 3 : Balises de texte — Titres, paragraphes et listes
3.1 — Hiérarchie des titres et paragraphes Aperçu
3.2 — Listes à puces et numérotées
🛠️ Projet 3 — Article structuré
Module 4 : Liens hypertextes et navigation
4.1 — La balise a (anchor) Aperçu
🛠️ Projet 4 — Mini-site 3 pages
Module 5 : Images et multimédia
5.1 — Images et attributs Aperçu
🛠️ Projet 5 — Page multimédia
Module 6 : Tableaux
6.1 — Créer des tableaux Aperçu
🛠️ Projet 6 — Tableau de données
Module 7 : Formulaires HTML
7.1 — Créer un formulaire Aperçu
🛠️ Projet 7 — Formulaire de contact
Module 8 : Formulaires avancés et validation HTML5
8.1 — Validation HTML5 native Aperçu
🛠️ Projet 8 — Formulaire d'inscription
Module 9 : Sémantique HTML5
9.1 — Les balises sémantiques Aperçu
🛠️ Projet 9 — Page sémantique
Module 10 : Accessibilité web et ARIA
10.1 — WCAG et ARIA Aperçu
🛠️ Projet 10 — Audit accessibilité
Module 11 : SEO — Bases du référencement
11.1 — Les fondamentaux du SEO Aperçu
🛠️ Projet 11 — Optimisation SEO
Module 12 : Iframes et intégration externe
12.1 — Utiliser les iframes Aperçu
🛠️ Projet 12 — Page avec intégrations
Module 13 : SVG et Canvas
13.1 — SVG inline Aperçu
🛠️ Projet 13 — Logo SVG
Module 14 : Site multi-pages
14.1 — Architecture d'un site Aperçu
🛠️ Projet 14 — Site 5 pages
Module 15 : Hébergement et mise en ligne
15.1 — Mettre en ligne gratuitement Aperçu
🛠️ Projet 15 — Publication en ligne
Module 16 : Projet final — Site vitrine HTML5
16.1 — Site vitrine complet Aperçu

Le reste de la formation est réservé aux inscrits.

S'inscrire gratuitement
Module 2 : Structure d'une page HTML5 Aperçu gratuit

2.1 — Anatomie d'une page HTML5

📋 Objectifs d'apprentissage

  • Identifier les 3 zones : DOCTYPE, head, body
  • Comprendre les balises du head (title, meta, link)
  • Utiliser les métadonnées (charset, viewport, description)
🏗️ Anatomie d'une page HTML5 <!DOCTYPE html> <head> <meta charset="UTF-8"> <title> <link> <body> <h1> <p> <img> (tout ce qui s'affiche)</body> </html>

Les 3 zones obligatoires

ZoneContenuVisible ?
<!DOCTYPE html>Déclaration HTML5Non
<head>Métadonnées, titre, CSS, scriptsNon (sauf <title>)
<body>Tout le contenu visibleOui

Les métadonnées essentielles

<meta charset="UTF-8">                     ← Encodage (accents, emojis)
<meta name="viewport" content="width=device-width, initial-scale=1">  ← Mobile
<meta name="description" content="Description pour Google">
<title>Titre de l'onglet</title>

⚠️ Erreur fréquente

Oublier la balise viewport. Sans elle, votre site s'affiche comme sur un écran d'ordinateur sur mobile (zoomé, illisible). Ajoutez-la systématiquement.

Ceci est un aperçu gratuit.
Voir la formation complète