Leçon 2 / 12
Leçon 02 · ~20 min · Partie 1 — HTML

Ta première page HTML

Pourquoi cette leçon est importante

Tu sais ce qu'est HTML. Maintenant on pratique. Tu vas créer ta première vraie page web — qu'on peut ouvrir dans le navigateur.

Avant d'ajouter du contenu, il faut connaître le "squelette" de base. Toute page HTML commence par la même structure. Comme les fondations d'une maison : toujours là, peu importe la maison.

Le squelette minimal d'une page HTML

Voici la structure à recopier pour chaque nouvelle page. Mémorise-la. Elle ne change pas.

HTML — structure de base complète 
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Ma première page</title>
</head>
<body>
  <h1>Bonjour le monde !</h1>
  <p>Ma toute première page web.</p>
</body>
</html>

Ça peut sembler compliqué au premier regard. Chaque ligne a sa raison. On regarde ça ensemble.

Explication ligne par ligne

<!DOCTYPE html>

C'est la toute première ligne. Ce n'est pas une balise HTML — c'est une déclaration. Elle dit au navigateur : "ce fichier est du HTML5, le standard actuel."

Sans cette ligne, certains navigateurs peuvent afficher ta page bizarrement. Mets-la toujours. C'est une habitude à prendre maintenant.

<html lang="fr">

Cette balise enveloppe tout le contenu de ta page. C'est la boîte principale. Toutes les autres balises sont à l'intérieur.

L'attribut lang="fr" dit que ta page est en français. Ça aide les lecteurs d'écran (pour malvoyants) à utiliser la bonne voix. Ça aide aussi Google à comprendre ta page. Page en anglais → lang="en".

<head>

Le <head> contient des infos sur la page. Pas ce que le visiteur voit — plutôt les données techniques. C'est comme les coulisses d'un spectacle : invisibles, mais indispensables.

Dans le <head>, on met par exemple :

  • <meta charset="UTF-8"> — dit au navigateur comment lire les caractères. Sans ça, les accents (é, à, ç…) s'affichent comme des symboles bizarres. Toujours l'inclure.
  • <title>Ma première page</title> — le texte dans l'onglet du navigateur. C'est aussi ce qui apparaît dans les résultats Google. Donne un titre clair à chaque page.

<body>

Tout ce que le visiteur voit va ici. Textes, images, liens, vidéos, formulaires — tout dans le <body>.

Tu passeras 99% de ton temps dans le <body>.

💡

Règle simple : dans le <head>, les infos techniques (invisibles). Dans le <body>, le contenu visible.

Créer ton premier fichier HTML

On crée un vrai fichier sur ton ordinateur. Tu as besoin d'un éditeur de code. On recommande Visual Studio Code (VS Code) — gratuit et très bien fait.

✅

Si tu n'as pas encore VS Code, télécharge-le sur code.visualstudio.com. Gratuit. Windows, Mac et Linux.

Étapes pour créer ta première page :

  1. Ouvre Visual Studio Code.
  2. Crée un nouveau fichier : Fichier → Nouveau fichier.
  3. Nomme-le index.html (File → Save As → tape "index.html").
  4. Tape le squelette ci-dessus. Astuce : tape juste ! puis appuie sur Tab — VS Code génère tout le squelette automatiquement.
  5. Enregistre : Ctrl+S (Windows) ou Cmd+S (Mac).
  6. Double-clique sur le fichier depuis ton explorateur de fichiers. Il s'ouvre dans le navigateur.

Ta première page web existe. Elle s'affiche dans le navigateur comme un vrai site. La seule différence : elle est sur ton ordinateur, pas encore sur internet.

✅

Nomme toujours ta page d'accueil index.html. C'est une règle universelle du web. Quand quelqu'un visite ton site, le serveur cherche ce fichier en premier. Autre nom → ça ne marche pas.

L'indentation : garder son code lisible

Dans le squelette, certaines lignes sont décalées vers la droite. Ce décalage s'appelle l'indentation.

L'indentation ne change rien à l'affichage. Le navigateur s'en fiche. Mais elle rend ton code beaucoup plus lisible pour toi et les autres. Quand tu auras des centaines de lignes, tu seras content de l'avoir fait.

Convention : utilise 2 espaces par niveau. Quand une balise est "à l'intérieur" d'une autre, décale de 2 espaces.

HTML — bien indenté (facile à lire) 
<body>
  <!-- 2 espaces : on est "dans" body -->
  <h1>Titre</h1>
  <p>Paragraphe</p>
</body>
⚠️

Attention ! N'utilise pas Word ou LibreOffice pour écrire du HTML. Ces logiciels ajoutent du formatage invisible qui casse tout. Utilise toujours un éditeur de code comme VS Code.

Les commentaires HTML

Un commentaire, c'est du texte que le navigateur ignore. Il n'apparaît pas sur la page. C'est une note pour toi.

Pourquoi en écrire ? Pour expliquer ton code. Dans 6 mois, quand tu le reliras, tu seras content de voir tes notes. Tu peux aussi désactiver une partie du code sans la supprimer.

HTML 
<!-- Ceci est un commentaire. Il ne s'affiche pas sur la page. -->
<p>Ceci est visible sur la page.</p>

<!-- Ce paragraphe est temporairement désactivé :
<p>Ce texte n'apparaît pas.</p>
-->

Un commentaire commence par <!-- et finit par -->. Tout ce qu'il y a entre est ignoré par le navigateur.

// à toi de jouer

Complète ta première page

Le squelette est prêt. Ajoute un titre <h1>, deux paragraphes <p> et un commentaire dans le <body>. Change le contenu du <title> et regarde l'onglet changer.

Éditeur live
HTML
Résultat
// à retenir
  • Toute page HTML valide commence par <!DOCTYPE html>.
  • <html lang="fr"> enveloppe tout. L'attribut lang indique la langue.
  • <head> = informations techniques (invisibles). <body> = contenu visible.
  • Le <title> s'affiche dans l'onglet du navigateur et dans Google.
  • Toujours <meta charset="UTF-8"> pour les accents et caractères spéciaux.
  • Nomme ta page d'accueil index.html — convention universelle.
  • Indente ton code pour qu'il reste lisible. 2 espaces par niveau.
  • Les commentaires s'écrivent <!-- comme ça --> et sont invisibles.