📘 Chapitre 1 – Structure de base d’une page HTML

1. 🎯 Objectif pédagogique

Être capable de créer la structure minimale d’une page web valide en HTML5, comprenant les sections essentielles (doctype, balises <html>, <head>, <body>), et d’y insérer un titre, un paragraphe et une image.

2. 📚 Concepts abordés

Balise <!DOCTYPE html> et structure HTML5
Balises racines : <html>, <head>, <body>
Métadonnées : <meta>, <title>
Balises de contenu de base : <h1>, <p>, <img>
Notion de code valide et indentation

3. 🧠 Explication théorique

Une page web est un document texte interprété par un navigateur. Pour que le navigateur comprenne correctement le contenu, il doit respecter une structure standard. L’entête (<head>) contient les informations invisibles par l’utilisateur : titre de la page, encodage (UTF-8), liens vers des fichiers CSS ou JS. La balise <body> contient tout le contenu visible : titres, paragraphes, images, listes, etc.

Exemple minimal :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma première page</title>
  </head>
  <body>
    <h1>Bienvenue sur ma page</h1>
    <p>Ceci est un premier paragraphe.</p>
  </body>
</html>

4. 🛠 Tutoriel pratique

Résumé du travail : Créer un fichier index.html avec une structure de base en HTML5, contenant un titre, un paragraphe et une image.

Arborescence du projet :

mon_projet/
└── index.html
└── assets/
    └── image.jpg

Étape 1 : Créer la structure HTML

Créer un fichier index.html et ajouter le squelette suivant :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page d’accueil</title>
  </head>
  <body>
  </body>
</html>

Étape 2 : Ajouter du contenu

Dans la balise <body>, insérez un titre, un paragraphe et une image :

<h1>Bonjour le monde</h1>
<p>Ceci est mon premier paragraphe HTML.</p>
<img src="assets/image.jpg" alt="Une image d’exemple">

5. 🧾 Résumé et points-clés

Chaque page HTML doit commencer par <!DOCTYPE html>.
<head> gère les informations invisibles, <body> affiche le contenu.
Utilisez toujours des balises correctement fermées et un code indenté pour la lisibilité.