Cours

HTML & CSS Leçon 1

Ta première page web

Ce qu'est le HTML, comment s'écrit une balise, et le squelette que toute page web doit avoir.

15 min

À la fin de cette leçon, tu sauras

  • Expliquer ce que fait le HTML dans une page web
  • Écrire une balise ouvrante et une balise fermante
  • Construire le squelette minimal d'une page

Le HTML, c'est quoi ?

Quand tu ouvres un site, ton navigateur reçoit un fichier texte écrit en HTML (HyperText Markup Language). Ce n'est pas un langage de programmation : il ne calcule rien. Il sert à dire au navigateur ce qu'est chaque morceau de la page : ceci est un titre, ceci est un paragraphe, ceci est une image.

Pour ça, on entoure le texte avec des balises.

Une balise, comment ça s'écrit

La plupart des balises vont par deux : une balise ouvrante et une balise fermante, qui a un / en plus. Ce qui est entre les deux est le contenu.

<p>Ceci est un paragraphe.</p>
<h1>Ceci est le titre principal</h1>

Le nom entre les chevrons < > indique le type de contenu : p pour paragraphe, h1 pour le titre de niveau 1. Si tu oublies la balise fermante, le navigateur essaie de deviner où ça s'arrête, et le résultat est souvent bizarre.

Le squelette d'une page

Toute page HTML suit la même structure. Tu la recopieras au début de chaque nouveau fichier :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Le titre de l'onglet</title>
  </head>
  <body>
    <h1>Bonjour !</h1>
    <p>Ceci est ma première page.</p>
  </body>
</html>
  • <!DOCTYPE html> prévient le navigateur que c'est du HTML moderne.
  • <html lang="fr"> entoure toute la page et précise la langue.
  • <head> contient les informations sur la page, invisibles dans la page elle-même : l'encodage des caractères (utf-8, pour que les accents s'affichent bien) et le <title>, le texte affiché dans l'onglet.
  • <body> contient tout ce qui s'affiche à l'écran.

Astuce : les espaces au début des lignes (l'indentation) ne changent rien à l'affichage. Ils servent à toi, pour voir d'un coup d'œil quelle balise est à l'intérieur de quelle autre.

Les balises toutes seules

Quelques balises n'ont pas de contenu, donc pas de balise fermante. C'est le cas de <meta> dans l'exemple. On en verra d'autres, comme <img> pour les images.

À toi de jouer

Complète le squelette pour obtenir une vraie page :

  • un titre d'onglet dans <title> ;
  • un titre principal <h1> qui contient le mot « Bonjour » ;
  • au moins un paragraphe <p> sous le titre.

Le résultat s'affiche à droite pendant que tu tapes, et chaque consigne se coche toute seule.

index.html
Résultat
  • L'onglet a un titre dans <title>
  • La page a un titre <h1> qui contient « Bonjour »
  • La page a au moins un paragraphe <p> rempli
Bloqué ? Voir une solution 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Ma première page</title>
  </head>
  <body>
    <h1>Bonjour tout le monde</h1>
    <p>Je découvre le HTML.</p>
  </body>
</html>

Quiz

1À quoi sert le HTML ?
2Laquelle de ces balises fermantes est correcte ?
3Où s'écrit le texte affiché dans l'onglet du navigateur ?