Leçon 5 : Des listes et des liens – La base d’un vrai mini-site web !

Des menus, des pages qui se connectent entre elles ! C‘est exactement ce qu’on trouve partout sur le web. C’est l’essence de l’internet.

par Daniel Alouidor

Dans les leçons précédentes, tu as appris à écrire du texte, afficher des titres, insérer des images et même créer un lien vers Wikipédia ou YouTube. Mais si tu veux créer un vrai site avec plusieurs pages, comme un site de recettes, de jeux, de Pokémon ou de tes BD préférées… il te faut deux ingrédients : des listes (parce qu’un site sans liste, c’est comme une pizza sans fromage) et des liens entre pages, pour passer de “Accueil” à “À propos” ou “Contact”.

Aujourd’hui, tu vas apprendre à faire tout ça. Et c’est pas compliqué, promis.

1. Les listes : organisons ce bazar !

Tu veux écrire une recette ? Une liste de tes jeux préférés ? Ton top 5 des mêmes les plus éclatés ? Tu as besoin de listes HTML !

Les deux types de listes :

✅ Liste non ordonnée (<ul>)

C’est une liste à puces (rond, carré, etc.)
Idéale pour dire “j’aime ça, ça, et ça…”

<ul>
  <li>Les lasagnes</li>
  <li>Les jeux vidéo</li>
  <li>Faire semblant de travailler</li>
</ul>

Résultat :

• Les lasagnes
• Les jeux vidéo
• Faire semblant de travailler

???? Liste ordonnée (<ol>)

C’est une liste avec des numéros. Parfait pour un classement, un top 3 ou une recette.

<ol>
  <li>Allumer le four</li>
  <li>Mélanger les œufs</li>
  <li>Oublier les œufs dans le four</li>
</ol>

Résultat :

1. Allumer le four
2. Mélanger les œufs
3. Oublier les œufs dans le four (oups )

???? Bonus drôle : des listes dans des listes !

Tu peux mettre une liste dans une autre, un peu comme une boîte de bonbons dans une boîte de chocolats.

<ul>
  <li>Mes animaux préférés
    <ul>
      <li>Les lamas</li>
      <li>Les canards</li>
      <li>Les chats bizarres ????‍????</li>
    </ul>
  </li>
</ul>

???? 2. Créer plusieurs pages et les relier ensemble

Tu veux un site avec plusieurs pages, comme un vrai site web ? Facile ! Voilà comment on fait :

Étape 1 : Crée de nouveaux fichiers

Dans ton dossier MonPremierSite, crée trois fichiers HTML :

• index.html → ta page d’accueil
• a-propos.html → une page “À propos de moi”
• contact.html → une page pour dire “coucou”

Étape 2 : Mets du contenu simple dans chaque page

index.html :

<h1>Bienvenue sur mon site !</h1>
<p>Tu veux en savoir plus ? Clique ci-dessous ????</p>
<ul>
  <li><a href="a-propos.html">À propos de moi</a></li>
  <li><a href="contact.html">Me contacter</a></li>
</ul>

a-propos.html :

<h1>À propos de moi</h1>
<p>Je suis Alex. Je collectionne les gommes et je construis des sites web bizarres.</p>
<p><a href="index.html">Retour à l’accueil</a></p>

contact.html :

<h1>Contacte-moi</h1>
<p>Tu peux me trouver sur Discord : Alex#1998</p>
<p><a href="index.html">Retour à l’accueil</a></p>

Récapitulation facile

Élément HTML	À quoi ça sert ?
<ul>	Liste non ordonnée (puces)
<ol>	Liste ordonnée (nombres)
<li>	Élément de liste
<a href="...">	Lien vers une autre page ou un site

Défi créatif du jour

Crée un mini-site de 3 pages :qui comprend une page d’accueil avec une liste de tes jeux préférés, une page “À propos” où tu parles de toi, et une page “Contact” avec un lien vers ton TikTok, Insta ou juste un emoji rigolo. Puis, relie-les entre elles avec des liens comme un vrai pro !

Prochain article…

Dans la leçon 6, on va parler d’un truc TRÈS important : comment organiser ses fichiers et dossiers proprement, pour éviter d’avoir des images perdues, des liens qui ne marchent pas, et un site qui ressemble à un sac de chaussettes sales. Ainsi, tu vas devenir un(e) vrai·e pro du rangement web.

Daniel Alouidor

N’oublie pas de réviser :

Leçon 1 : Bonne nouvelle : je vais t’apprendre à créer ton site web … gratis!

Leçon 2 : Création site web facile – Rencontre avec HTML et CSS

Leçon 3 : Création de site web – Prépare ton atelier de super codeur !

Leçon 4 ; Les balises HTML les plus cools pour construire ta page web