Stephen Build ← Roadmap
0/0
Roadmap des Builders · Étape 1 sur 7

Le HTML le squelette

Le HTML décrit ce qu'il y a sur une page : des titres, du texte, des images, des liens, des formulaires. À la fin de ce tuto, t'auras écrit ta première vraie page, à la main.

Durée 3 à 5 jours Niveau zéro Projet ta page « Qui suis-je » Mis à jour

À la fin, tu sauras

Les missions

Fais-les dans l'ordre, dans le même fichier. Tape le code au lieu de le copier : c'est en l'écrivant que tes doigts l'apprennent. Coche chaque mission quand ta page marche.

Mission 0

Il te faut deux outils gratuits.

  1. Un navigateur : Chrome ou Firefox.
  2. Un éditeur de code : installe VS Code.
  3. Dans VS Code, ouvre l'onglet Extensions (Ctrl + Maj + X, ou ⌘ + Maj + X sur Mac) et installe Live Server : il recharge ta page à chaque sauvegarde.
  4. Crée un dossier mon-site, ouvre-le dans VS Code (Fichier → Ouvrir le dossier) et crée-y index.html.
Erreur fréquente

Sur Windows, le fichier peut s'appeler en fait index.html.txt. Active « Extensions de noms de fichiers » dans l'explorateur.

Résultat attendu
VS Code, panneau de gauche
MON-SITE
└── index.html

Le fichier est vide pour l'instant, c'est normal.

Mission 1

Toute page commence par ce squelette. Tape-le à la main dans index.html :

index.html
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ma première page</title>
  </head>
  <body>
    <h1>Salut, moi c'est Alex</h1>
    <p>Ceci est ma toute première page web.</p>
  </body>
</html>

Clic droit dans le fichier → Open with Live Server.

  • <!DOCTYPE html> : c'est du HTML moderne.
  • <html lang="fr"> : la page entière, en français.
  • <head> : les infos sur la page. Rien ne s'y affiche.
  • <body> : ce qui s'affiche. Une balise s'ouvre <p> et se ferme </p>.
À toi

Change le titre et le texte, sauvegarde (Ctrl + S) : la page se met à jour toute seule.

Résultat attendu
index.html

Et dans l'onglet du navigateur : « Ma première page ». Le texte est en police à empattements (Times), c'est le style par défaut.

Mission 2

Le HTML dit ce qu'est le texte, pas à quoi il ressemble.

index.html
<h1>Salut, moi c'est Alex</h1>
<p>J'apprends à coder des sites, <strong>en partant de zéro</strong>.</p>

<h2>Ce que j'aime</h2>
<p>Le vélo, les jeux vidéo, et <em>beaucoup</em> trop de café.</p>

<h2>Ce que je veux construire</h2>
<p>Un site pour la boulangerie de ma rue.</p>
  • <h1> à <h6> : les titres, du plus important au moins important. Un seul <h1> par page.
  • <p> : un paragraphe.
  • <strong> : important (gras). <em> : insistance (italique).
Erreur fréquente

Prendre un <h3> parce qu'il est « plus petit ». Le niveau, c'est la place dans le plan, pas la taille. La taille, c'est le CSS.

Résultat attendu
index.html
Mission 3

Un lien, c'est la balise <a> avec une adresse dans href.

index.html
<!-- Lien vers un autre site, ouvert dans un nouvel onglet -->
<a href="https://developer.mozilla.org/fr/" target="_blank">La doc MDN</a>

<!-- Lien vers une autre page de ton site -->
<a href="contact.html">Me contacter</a>

<!-- Image : src = le fichier, alt = sa description -->
<img src="images/moi.jpg" alt="Alex, souriant, devant un vélo">
  • Crée un dossier images dans mon-site avec une photo renommée moi.jpg.
  • <img> ne se ferme pas : elle n'a pas de contenu.
  • alt est lu par les lecteurs d'écran et s'affiche si l'image ne charge pas. Décris ce qu'on voit.
Erreur fréquente

L'image ne s'affiche pas ? C'est le chemin. Vérifie le dossier, l'extension (.jpg ou .jpeg ?) et les majuscules : Moi.JPG n'est pas moi.jpg.

Résultat attendu
index.html

Les liens sont bleus et soulignés, tous sur la même ligne que l'image : sans CSS, ces balises se suivent comme des mots. Ta vraie photo s'affiche à la place du dessin gris.

Mission 4

À puces quand l'ordre ne compte pas, numérotée quand il compte.

index.html
<h2>Mes outils</h2>
<ul>
  <li>VS Code</li>
  <li>Chrome</li>
  <li>Beaucoup de patience</li>
</ul>

<h2>Mon plan</h2>
<ol>
  <li>Apprendre le HTML</li>
  <li>Apprendre le CSS</li>
  <li>Faire mon premier site</li>
</ol>

<ul> (unordered list) ou <ol> (ordered list), et chaque élément dans un <li>.

Résultat attendu
index.html
Mission 5

Une vraie page a des zones, et le HTML a une balise pour chacune.

index.html
<body>
  <header>
    <h1>Alex</h1>
    <nav>
      <ul>
        <li><a href="#apropos">À propos</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="apropos">
      <h2>À propos</h2>
      <p>J'apprends à coder des sites.</p>
    </section>

    <section id="contact">
      <h2>Contact</h2>
      <p>Le formulaire arrive à la mission suivante.</p>
    </section>
  </main>

  <footer>
    <p>© 2026 Alex</p>
  </footer>
</body>
  • <header> : le haut de la page. <nav> : le menu.
  • <main> : le contenu principal, un seul par page.
  • <section> : un bloc thématique, avec son titre. <footer> : le bas de page.
  • href="#contact" fait défiler jusqu'à l'élément qui a id="contact".
Demande à l'IA
Explique-moi la différence entre une div et une section en HTML, avec un exemple concret pour chacune. Ne me donne pas de CSS.
Résultat attendu
index.html

Visuellement, rien ne change, mais Google et les lecteurs d'écran comprennent ta page. Clique sur « Contact » dans l'aperçu.

Mission 6

Remplace le paragraphe de la section contact par :

index.html
<form>
  <label for="nom">Ton nom</label>
  <input id="nom" name="nom" type="text" required>

  <label for="email">Ton email</label>
  <input id="email" name="email" type="email" required>

  <label for="message">Ton message</label>
  <textarea id="message" name="message" rows="5"></textarea>

  <button type="submit">Envoyer</button>
</form>
  • <label for="email"> est relié au champ qui a id="email". Clique sur le texte, le curseur va dans le champ.
  • type="email" : le navigateur vérifie qu'il y a un @.
  • required : impossible d'envoyer si le champ est vide.
Normal que rien ne parte

Le message ne part nulle part. Pour l'envoyer, il faut du JavaScript ou un service externe : ça viendra plus tard.

Résultat attendu
index.html

Tout est collé, c'est normal sans CSS. Clique sur « Envoyer » avec un champ vide : le navigateur te bloque.

Mission 7

Deux réflexes que tu garderas toujours.

  1. Inspecter : clic droit sur un élément de ta page → Inspecter (ou F12). Survole les balises : la zone correspondante s'allume.
  2. Valider : copie tout ton code dans le validateur du W3C. Corrige jusqu'à zéro erreur.
Demande à l'IA
Voici une erreur du validateur W3C : [colle l'erreur]. Explique-moi ce qu'elle veut dire et comment la trouver dans mon code, sans corriger le code à ma place.
Résultat attendu
Validateur W3C
Document checking completed. No errors or warnings to show.

Le message vert du validateur.

Le projet

Ta page « Qui suis-je »

Avec tout ce que t'as appris, construis une page qui te présente, dans un nouveau dossier, sans regarder les exemples. Si tu bloques, retourne voir la mission concernée, puis referme-la. Pas de style pour l'instant : la page sera moche, c'est normal. Tu la rendras belle à l'étape 2.

Ton projet est validé quand :

Bonus

Crée une deuxième page projets.html, et relie les deux pages entre elles avec le menu.

Pour aller plus loin

Étape 1 bouclée ?

Si ta page coche tous les critères, t'as le squelette. Prochaine étape : l'habiller avec le CSS.

Étape 2 : Le CSS →