🌐

Apprends le HTML !

Le langage magique pour créer des pages web

Débutant Complet Amusant

C'est quoi le HTML ?

Le HTML (HyperText Markup Language) est le langage utilisé pour créer toutes les pages que tu vois sur internet ! Il fonctionne grâce à des balises : des petites étiquettes qui entourent le contenu pour expliquer au navigateur comment l'afficher.

Une balise s'écrit entre des chevrons < >. La plupart ont une ouverture et une fermeture :

<balise>  mon contenu  </balise>   ← remarque le / pour fermer

La structure d'une page

Toute page HTML commence avec cette structure de base. C'est comme le squelette de ta page !

<!DOCTYPE html>
<html>
  <head>
    <title>Ma super page !</title>
  </head>
  <body>
    <!-- Tout ce que tu vois va ici -->
  </body>
</html>

💡<head> contient les infos invisibles (titre, paramètres). <body> contient tout ce que le visiteur voit à l'écran !

<header> — L'en-tête

La balise <header> représente le haut de ta page. On y met le titre du site, un logo, et le menu de navigation.

<header>
  <h1>Mon Super Site 🌟</h1>
  <nav>
    <a href="accueil.html">Accueil</a>
    <a href="contact.html">Contact</a>
  </nav>
</header>

💡La balise <nav> regroupe les liens de navigation. C'est une bonne habitude de les mettre ensemble !

<footer> — Le pied de page

La balise <footer> représente le bas de ta page. On y met les droits d'auteur, des liens utiles, ou les coordonnées du site.

<footer>
  <p>© 2024 Mon Super Site. Tous droits réservés.</p>
  <p>
    <a href="contact.html">Nous contacter</a>
  </p>
</footer>

Visualise ta page

Voilà comment une page bien structurée s'organise avec header, main et footer :

Résultat dans le navigateur

🌟 Mon Super Site

AccueilÀ proposContact

<main> — Le contenu principal
Tout le contenu s'écrit ici : articles, images, listes...

Les titres : <h1> à <h6>

Pour écrire des titres, on utilise les balises h1 à h6. h1 est le plus grand, h6 le plus petit.

<h1>Titre principal (le plus grand)</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>

Résultat dans le navigateur

Titre principal (le plus grand)

Sous-titre

Sous-sous-titre

Le paragraphe : <p>

Pour écrire du texte normal, on utilise la balise <p> (pour "paragraphe"). Chaque paragraphe est séparé automatiquement.

<p>Bonjour ! Je suis un paragraphe.</p>
<p>Et moi, je suis un autre paragraphe !</p>

Résultat dans le navigateur

Bonjour ! Je suis un paragraphe.

Et moi, je suis un autre paragraphe !

Les liens : <a>

La balise <a> crée un lien cliquable. Elle a besoin d'un attribut href pour savoir où aller !

<a href="https://www.google.com">
  Clique ici pour aller sur Google
</a>

Résultat dans le navigateur

Clique ici pour aller sur Google

💡href est un attribut : une information supplémentaire écrite à l'intérieur de la balise ouvrante.

Les images : <img>

La balise <img> affiche une image. Elle n'a pas de balise fermante ! Deux attributs importants :

src="..."L'adresse de l'image

alt="..."Description si l'image ne charge pas

<img src="chat.jpg" alt="Un joli chat">

Les listes : <ul> et <ol>

Deux types de listes. Chaque élément s'écrit avec <li>.

Liste à puces (ul)

<ul>
  <li>Chat</li>
  <li>Chien</li>
</ul>

Liste numérotée (ol)

<ol>
  <li>D'abord</li>
  <li>Ensuite</li>
</ol>

Résultat dans le navigateur

Chat
Chien

D'abord
Ensuite

Mettre en forme le texte

Quelques balises pour changer l'apparence des mots :

<strong>texte en gras</strong>
<em>texte en italique</em>
<br>  ← saut de ligne (pas de balise fermante)
<hr>  ← ligne horizontale (pas de balise fermante)

Résultat dans le navigateur

texte en gras
texte en italique

← une ligne séparatrice

Exemple complet

Voilà à quoi ressemble une vraie page HTML en mettant tout ensemble !

<!DOCTYPE html>
<html>
  <head>
    <title>Ma page</title>
  </head>
  <body>

    <header>
      <h1>Bienvenue ! 🌟</h1>
      <nav>
        <a href="accueil.html">Accueil</a>
      </nav>
    </header>

    <main>
      <p>Je m'appelle <strong>Lucas</strong> et j'apprends le HTML.</p>
      <h2>Mes animaux préférés</h2>
      <ul>
        <li>Les dauphins</li>
        <li>Les pandas</li>
      </ul>
    </main>

    <footer>
      <p>© 2024 Ma page</p>
    </footer>

  </body>
</html>

<header>En haut — logo, titre, menu

<nav>Les liens de navigation

<main>Le contenu principal

<footer>En bas — infos, droits d'auteur

Pourquoi bien imbriquer les balises ?

Les balises HTML s'ouvrent et se ferment. Quand une balise est à l'intérieur d'une autre, on dit qu'elle est imbriquée. Il faut toujours fermer la balise intérieure avant la balise extérieure. Si tu ne le fais pas, le navigateur ne comprend plus ta page !

Bonne imbrication ✓

<ul>

<li> Chien </li>

</ul>

Mauvaise imbrication ✗

<ul>

<li> Chat </ul> ← erreur !

</li> ← trop tard

⚠ Règle d'or : la dernière balise ouverte est toujours la première fermée. Comme des poupées russes — tu refermes d'abord la plus petite à l'intérieur !

✦

Le raccourci magique : formater son code

Quand ton code devient long, un raccourci clavier peut tout remettre en ordre en une seconde. Dans VS Code (l'éditeur le plus utilisé) :

Shift+Alt+F

Formater tout le fichier automatiquement

Tab

Décaler une ligne à droite (indenter)

Shift+Tab

Revenir à gauche (désindenter)

Avant Shift+Alt+F (illisible)

<ul><li>Chat</li><li>Chien</li></ul>

Après Shift+Alt+F (lisible !)

<ul>
  <li>Chat</li>
  <li>Chien</li>
</ul>

💡 Regarder l'indentation, c'est la façon la plus rapide de savoir quelle balise est à l'intérieur de quelle autre. Plus une ligne est décalée à droite, plus elle est profondément imbriquée !

Tu as lu tout le cours ? Bravo ! 🎉
Il est maintenant temps de mettre en pratique ce que tu as appris.

Passer aux exercices →

Exercice 1 : retrouver les balises manquantes
Exercice 2 : indenter du code avec Tab et Shift+Alt+F