HTML · Leçon 1

Ma première page

Le HTML décrit le contenu d'une page avec des balises. Le navigateur les lit et les affiche.

Une balise, c'est quoi ?

Une balise entoure un contenu pour lui donner un sens : <p> = paragraphe, <h1> = grand titre…

<p>Bonjour !</p>
└┬┘└───┬───┘└─┬┘
 │     │      └─ balise fermante (avec un /)
 │     └──────── contenu
 └────────────── balise ouvrante

Modifie le code à gauche : le résultat à droite se met à jour tout seul.

Certaines balises n'ont pas de contenu, donc pas de fermeture : <br> (retour à la ligne), <hr> (trait), <img> (image).

Les attributs

Un attribut ajoute une information à une balise. Il s'écrit dans la balise ouvrante : nom="valeur".

Dans <img src="chat.png" alt="Un chat">, combien y a-t-il d'attributs ?

  1. 1
  2. 2
  3. 3

src et alt. img est le nom de la balise, pas un attribut.

Le squelette d'une page

Tout fichier HTML complet suit ce modèle. Lis les commentaires <!-- ... --> : ils ne s'affichent pas.

<head>

Informations pour le navigateur : titre, encodage, liens vers le CSS…

<body>

Le contenu affiché : textes, images, liens…

Et sur ton ordinateur ? Pour l'instant, tout se passe dans le navigateur. La partie VS Code t'explique comment installer un éditeur et créer tes propres fichiers.

Complète le squelette

  • Donne à l'onglet le titre Mon profil.
  • Ajoute un <h1> avec ton prénom dans le body.
  • Ajoute un paragraphe <p> qui dit ce que tu aimes.
IndiceLe texte de l’onglet se trouve dans la balise <title>, à l’intérieur du <head>.
IndiceTout ce qui est visible va entre <body> et </body> : d’abord un <h1>, puis un <p>.
IndiceLe squelette complété ressemble à ça :
<title>Mon profil</title>
...
<body>
  <h1>Ton prénom</h1>
  <p>J'aime ...</p>
</body>

Bien imbriquer ses balises

Les balises s'emboîtent comme des poupées russes : la dernière ouverte est la première fermée.

<p>Du texte <strong>important</strong></p>   ✓ correct
<p>Du texte <strong>important</p></strong>   ✗ croisé

On indente (décale) le code pour voir les niveaux d'un coup d'œil : un enfant est décalé de 2 espaces par rapport à son parent.

Chasse aux bugs

Ce code contient 3 erreurs. Le navigateur essaie de deviner, mais il faut les corriger !

IndiceCompare chaque balise ouvrante avec sa balise fermante : portent-elles le même nom ? Sont-elles fermées dans le bon ordre ?
IndiceLigne 1 : <h1> doit se fermer par </h1>. Ligne 2 : la dernière balise ouverte (strong) doit être fermée la première.
IndiceLigne 3 : le paragraphe n’est jamais fermé. La ligne 2 corrigée donne :
<p>J'ai visité <strong>Lyon</strong></p>

Où place-t-on le contenu visible de la page ?

  1. Dans <head>
  2. Dans <body>
  3. Dans <title>

Le head contient les informations « techniques » ; le body tout ce que l'on voit.

À retenir