Séance 2 — HTML : le contenu de la page

Titres, listes, liens et images

  • Utiliser les 8 balises qui servent tous les jours
  • Comprendre ce qu’est un attribut
  • Mettre une image et un lien dans une page

0. On reprend

Ouvrez VS Code sur le dossier web101, créez un fichier seance02.html et recopiez le squelette :

seance02.html
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Séance 2</title>
  </head>
  <body>
    <h1>Séance 2</h1>
  </body>
</html>

Lancez Live Server et placez le navigateur à côté de VS Code.

AstuceRaccourci : le squelette en 2 caractères

Dans un fichier .html vide, tapez ! puis Tab. VS Code écrit tout le squelette d’un coup. Ça s’appelle Emmet.

Vérifiez quand même le résultat et corrigez lang="en" en lang="fr".

1. Les titres

Il existe 6 niveaux de titres, du plus gros au plus petit :

<h1>Titre principal de la page</h1>
<h2>Grande partie</h2>
<h3>Sous-partie</h3>
ImportantDeux règles à respecter
  1. Un seul <h1> par page. C’est le titre de la page, comme le titre d’un livre.
  2. On ne saute pas de niveau. Après un <h1> vient un <h2>, pas un <h3>.

Les titres servent à structurer, pas à faire du gros texte. Pour faire du gros texte, on utilisera le CSS (séance 3).

Étape 1 — Structurer une page

Dans le <body>, écrivez :

seance02.html
<body>
  <h1>Mon carnet de recettes</h1>

  <h2>Entrées</h2>
  <p>Des idées simples pour commencer un repas.</p>

  <h2>Desserts</h2>
  <p>Le meilleur pour la fin.</p>
</body>

Enregistrez et regardez : le navigateur affiche déjà une hiérarchie.

2. Les paragraphes et le texte

<p>Un paragraphe de texte.</p>
<p>Un texte avec un mot <strong>important</strong> et un mot <em>en italique</em>.</p>
Balise Effet Sens
<p> Un bloc de texte paragraph
<strong> En gras « ce mot est important »
<em> En italique « on insiste sur ce mot »
<br /> Retour à la ligne break
AvertissementLe navigateur ignore vos retours à la ligne

Si vous écrivez dans votre fichier :

<p>Ligne un
Ligne deux</p>

le navigateur affiche Ligne un Ligne deux sur la même ligne. Il « écrase » tous les espaces et retours à la ligne du code.

Pour vraiment aller à la ligne, il faut le dire avec <br /> — ou, mieux, faire deux paragraphes.

3. Les listes

Deux sortes de listes. Elles se ressemblent beaucoup, ne les confondez pas.

<ul>
  <li>Orange</li>
  <li>Pomme</li>
  <li>Fraise</li>
</ul>

ul = unordered list (liste non ordonnée). L’ordre n’a pas d’importance.

<ol>
  <li>Casser les œufs</li>
  <li>Ajouter la farine</li>
  <li>Mélanger</li>
</ol>

ol = ordered list (liste ordonnée). L’ordre compte : c’est une recette, une procédure.

NoteCe qu’il faut retenir
  • <ul> ou <ol> = le contenant (la liste elle-même)
  • <li> = un élément de la liste (list item)
  • Les <li> vont toujours à l’intérieur d’un <ul> ou d’un <ol>
  • Les numéros 1. 2. 3. sont ajoutés par le navigateur : ne les tapez pas !

Exercice 2.1

Sous le titre Desserts, ajoutez :

  • une liste à puces de 3 desserts que vous aimez
  • puis un <h3> intitulé Recette du gâteau au yaourt
  • puis une liste numérotée de 4 étapes
seance02.html
<h2>Desserts</h2>
<p>Le meilleur pour la fin.</p>

<ul>
  <li>Tarte aux pommes</li>
  <li>Mousse au chocolat</li>
  <li>Gâteau au yaourt</li>
</ul>

<h3>Recette du gâteau au yaourt</h3>
<ol>
  <li>Verser le yaourt dans un saladier</li>
  <li>Ajouter le sucre et la farine</li>
  <li>Mélanger</li>
  <li>Cuire 30 minutes à 180 °C</li>
</ol>

4. Les attributs

Jusqu’ici nos balises étaient « nues ». On peut leur ajouter des informations supplémentaires : ce sont les attributs.

<html lang="fr">
      └┬─┘ └┬┘
       │    └── la valeur, toujours entre guillemets
       └─────── le nom de l'attribut

La forme est toujours la même :

nom="valeur"

Un attribut se met dans la balise ouvrante, après le nom de la balise, séparé par une espace. Une balise peut avoir plusieurs attributs :

<img src="chat.jpg" alt="Un chat qui dort" />
AvertissementLes 3 erreurs classiques sur les attributs 
<img src=chat.jpg />        <!-- ❌ guillemets oubliés -->
<img src = "chat.jpg" />    <!-- ❌ espaces autour du = -->
<img "src"="chat.jpg" />    <!-- ❌ guillemets autour du nom -->
<img src="chat.jpg" />      <!-- ✅ -->

5. Les liens

<a href="https://fr.wikipedia.org">Aller sur Wikipédia</a>
  • <a> = anchor (ancre). C’est la balise du lien.
  • href = hypertext reference. Où va le lien.
  • Entre les balises : le texte cliquable.

Trois sortes de liens

<!-- 1. Vers un autre site -->
<a href="https://developer.mozilla.org">La doc MDN</a>

<!-- 2. Vers une autre page de mon site -->
<a href="portrait.html">Mon portrait</a>

<!-- 3. Ouvrir dans un nouvel onglet -->
<a href="https://fr.wikipedia.org" target="_blank">Wikipédia</a>
NoteLien externe vs lien interne
  • Si href commence par https:// → le navigateur va sur un autre site
  • Sinon → il cherche un fichier dans votre dossier

Donc href="portrait.html" ne marche que si portrait.html est dans le même dossier que la page courante.

6. Les images

<img src="chat.jpg" alt="Un chat roux endormi sur un canapé" />
Attribut Rôle
src source : quel fichier afficher
alt alternative : une description en mots de l’image
Importantalt n’est pas optionnel

Le texte alt est lu à voix haute par les logiciels utilisés par les personnes aveugles, et s’affiche si l’image ne charge pas. Une image sans alt est une image invisible pour une partie des visiteurs.

Décrivez ce qu’on voit : alt="Un chat roux endormi", pas alt="image".

Note<img /> se ferme tout seul

Certaines balises n’ont pas de contenu, donc pas de balise fermante. On les écrit avec un / à la fin :

<img src="…" alt="…" />
<br />
<meta charset="UTF-8" />

Il n’existe pas de </img>.

Étape 2 — Mettre une vraie image

Une image doit être dans votre dossier pour que le navigateur la trouve.

  1. Trouvez une image sur internet, clic droit → Enregistrer l’image sous…
  2. Enregistrez-la dans Documents/web101 sous le nom photo.jpg (respectez les 3 règles : pas d’espace, pas d’accent, minuscules !)
  3. Dans VS Code, vérifiez qu’elle apparaît bien dans l’explorateur de gauche
  4. Ajoutez dans votre page :
seance02.html
<img src="photo.jpg" alt="Décrivez ici ce qu'on voit" />

Si l’image est immense, ne vous inquiétez pas : on réglera ça en CSS à la séance 3.

Avertissement« Mon image ne s’affiche pas » : les 3 causes
  1. Le nom ne correspond pas exactement. Photo.JPG ≠ photo.jpg. Vérifiez lettre par lettre, extension comprise.
  2. L’image n’est pas dans le bon dossier. Elle doit être à côté du .html.
  3. Vous avez copié une adresse de site. Un src qui commence par C:\Users\... ne marchera jamais.

7. Ranger la page

Une page bien construite se découpe en 3 grandes zones :

<body>
  <header>
    <h1>Mon carnet de recettes</h1>
  </header>

  <main>
    <h2>Entrées</h2>
    <p>…</p>
  </main>

  <footer>
    <p>Page réalisée par Camille — 2026</p>
  </footer>
</body>
Balise Zone
<header> Le haut de la page : titre, logo, menu
<main> Le contenu principal (une seule fois par page)
<footer> Le bas de page : auteur, mentions, contact

Ces balises ne changent rien visuellement pour l’instant. Elles servent à organiser — pour vous, pour Google, et pour les logiciels de lecture d’écran. Elles seront très utiles en séance 4.

8. À toi de jouer

Exercice 2.2 — Un lien vers votre propre page

Dans seance02.html, ajoutez un lien vers le fichier portrait.html créé en séance 1, avec le texte « Voir mon portrait ».

Puis, dans portrait.html, ajoutez un lien de retour vers seance02.html.

Vérifiez que vous pouvez naviguer entre les deux pages dans le navigateur.

Dans seance02.html :

seance02.html
<a href="portrait.html">Voir mon portrait</a>

Dans portrait.html :

portrait.html
<a href="seance02.html">Retour au carnet de recettes</a>

Les deux fichiers sont dans le même dossier web101, donc il suffit d’écrire le nom du fichier.

Exercice 2.3 — Lire du code

Sans l’écrire dans VS Code, dessinez sur une feuille ce que le navigateur affiche :

<h2>Animaux</h2>
<ol>
  <li>Chien</li>
  <li>Chat</li>
</ol>
<p>Mon <strong>préféré</strong> est le <em>chat</em>.</p>

Animaux

  1. Chien
  2. Chat

Mon préféré est le chat.

Points d’attention :

  • <ol> produit des numéros (1., 2.), pas des puces
  • <h2> est un titre : gros et en gras, sur sa propre ligne
  • <strong> et <em> sont à l’intérieur du paragraphe : ils ne coupent pas la ligne

Exercice 2.4 — Corriger 4 erreurs

Ce code contient 4 erreurs. Trouvez-les et écrivez la version corrigée.

<h1>Ma page<h1>
<ul>
  <li>1. Premier point
  <li>2. Deuxième point</li>
</ul>
<img src=photo.jpg>
<a>https://fr.wikipedia.org</a>
<h1>Ma page</h1>
<ul>
  <li>Premier point</li>
  <li>Deuxième point</li>
</ul>
<img src="photo.jpg" alt="Une photo" />
<a href="https://fr.wikipedia.org">Wikipédia</a>

Les erreurs :

  1. <h1>Ma page<h1> → la fermeture s’écrit </h1>
  2. Le premier <li> n’est pas fermé, et les numéros 1. 2. sont écrits à la main : dans une liste, c’est le navigateur qui numérote (et ici c’est un <ul>, donc ce seront des puces)
  3. <img src=photo.jpg> → il manque les guillemets, l’attribut alt, et la balise doit s’auto-fermer avec />
  4. <a>https://…</a> → l’adresse doit être dans l’attribut href, et le texte entre les balises est le texte cliquable

Exercice 2.5 — Ma page « Ma ville » (le gros exercice)

Créez ma-ville.html. La page doit contenir, dans cet ordre :

  1. Un <header> avec un <h1> : le nom d’une ville que vous aimez
  2. Un <main> contenant :
    • un <h2> « Pourquoi j’aime cette ville » suivi de deux paragraphes
    • un <h2> « Trois choses à voir » suivi d’une liste à puces de 3 lieux
    • une image de la ville, avec un alt correct
    • un lien vers la page Wikipédia de la ville, qui s’ouvre dans un nouvel onglet
  3. Un <footer> avec votre prénom
ma-ville.html
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Ma ville</title>
  </head>
  <body>
    <header>
      <h1>Marseille</h1>
    </header>

    <main>
      <h2>Pourquoi j'aime cette ville</h2>
      <p>
        Marseille est au bord de la mer, et on peut se baigner presque toute
        l'année.
      </p>
      <p>Il y fait beau, et les gens sont accueillants.</p>

      <h2>Trois choses à voir</h2>
      <ul>
        <li>Le Vieux-Port</li>
        <li>Les calanques</li>
        <li>Notre-Dame de la Garde</li>
      </ul>

      <img src="marseille.jpg" alt="Le Vieux-Port de Marseille au coucher du soleil" />

      <p>
        <a href="https://fr.wikipedia.org/wiki/Marseille" target="_blank">
          En savoir plus sur Wikipédia
        </a>
      </p>
    </main>

    <footer>
      <p>Page réalisée par Camille</p>
    </footer>
  </body>
</html>

Notez que le lien est placé dans un <p> : c’est plus propre, car <a> est un élément « en ligne » qui doit vivre dans un bloc de texte.

9. Fiche mémo

Les 8 balises indispensables

<h1> … <h6>                    Titres (un seul h1 !)
<p>                            Paragraphe
<strong> / <em>                Important / insisté
<ul> + <li>                    Liste à puces
<ol> + <li>                    Liste numérotée
<a href="…">texte</a>          Lien
<img src="…" alt="…" />        Image
<header> <main> <footer>       Zones de la page

La forme d’un attribut

<balise nom="valeur">contenu</balise>

Guillemets obligatoires · pas d’espace autour du =

Les balises qui n’ont pas de fermeture

<img /> · <br /> · <meta />

10. Avant la prochaine séance