TP HTML – Les Saveurs de Jojo

TP HTML – Les Saveurs de Jojo ?

? Les Saveurs de Jojo

TP Interactif HTML

Construis un vrai site e-commerce de plats camerounais, étape par étape

Les bases

Structure & Listes

Liens & Images

Tableaux

Les bases du HTML

On pose les fondations de la boutique "Les Saveurs de Jojo" ?️

? La structure d'une page HTML

Tout fichier HTML commence toujours par la même structure de base. C'est comme la fondation d'une maison : sans elle, rien ne tient debout !

Voici les balises indispensables et leur rôle :

<!DOCTYPE html>  <html lang="fr">  <head> <meta charset="UTF-8"> <title>Les Saveurs de Jojo ?</title> </head>  <body>  </body> </html>

? Retiens : <head> = les coulisses (invisible) | <body> = la scène (visible).

?️ Rendu dans le navigateur

Lorsque tu ouvres ce fichier dans Chrome ou Firefox, tu ne verras aucun texte sur la page — le body est vide ! Mais si tu regardes l'onglet du navigateur, tu liras :

Les Saveurs de Jojo ? ← c'est la balise <title>

Tout ce qui est dans <head> s'affiche à part, jamais dans la page elle-même.

✏️ Exercice – Crée ton fichier de départ EX 1/8

Ouvre un éditeur de texte (Notepad, VS Code…), crée un fichier boutique.html et tape (ou colle) la structure ci-dessus.

? Ta mission :
Change le texte du <title> par :
"Les Saveurs de Jojo – Plats camerounais"

? Bravo Chef !

Tu viens de créer le squelette complet d'une vraie page web ! La balise <title> contrôle le nom qui s'affiche dans l'onglet du navigateur. C'est aussi ce que Google affiche dans ses résultats de recherche. Un bon titre = plus de visiteurs dans ta boutique ! ?

? Les titres : <h1> jusqu'à <h6>

HTML propose 6 niveaux de titres, du plus grand (<h1>) au plus petit (<h6>). Pense à une table des matières de livre !

<h1>Les Saveurs de Jojo ?</h1>  <h2>Nos plats du jour</h2>  <h3>Ndolé au poisson fumé</h3>

?️ Rendu dans le navigateur

Le navigateur applique automatiquement des tailles différentes :

Les Saveurs de Jojo ?

Nos plats du jour

Ndolé au poisson fumé

Tu n'as écrit aucun style : c'est le navigateur qui choisit la taille et le gras par défaut pour chaque niveau.

✏️ Exercice – Ajoute les titres de la boutique EX 2/8

Dans le <body> de ton fichier, ajoute :

? Ta mission :
Un <h1> → "Les Saveurs de Jojo ?"
Un <h2> → "Nos plats traditionnels"
Un <h3> → "Plats du jour"

? Tu parles maintenant au navigateur !

Les balises <h1> à <h6> créent une hiérarchie visuelle. Règle d'or : un seul <h1> par page — c'est le titre roi ?. Google s'en sert pour comprendre le sujet principal de ta page.

? Paragraphes <p>, gras <b>, italique <i>, saut <br>

Pour écrire du texte courant, on utilise ces balises :

<p> Bienvenue dans notre boutique de plats camerounais. </p>  <p> Le <b>Ndolé</b> est préparé avec des <i>feuilles amères</i>. </p>  <p> Livraison rapide.<br> Paiement sécurisé. </p>

?️ Rendu dans le navigateur

Bienvenue dans notre boutique de plats camerounais.

Le Ndolé est préparé avec des feuilles amères.

Livraison rapide.
Paiement sécurisé.

? <b> = gras | <i> = italique | <br> = saut de ligne (orpheline, sans </br>)

✏️ Exercice – Décris ta boutique EX 3/8

Sous tes titres, ajoute du texte de présentation.

? Ta mission :
Écris un <p> de bienvenue.
Dans ce paragraphe, mets en gras le mot "Cameroun" et en italique "Les Saveurs de Jojo".
Utilise <br> pour séparer l'adresse fictive de la boutique sur deux lignes.

? Tu cuisines du HTML !

Le <p> crée un bloc avec de l'espace automatique avant et après. Le <br> est une balise orpheline : elle n'a pas de fermeture, elle dit juste au navigateur "passe à la ligne ici". Parfait pour les adresses, les paroles de makossa ? ou n'importe quoi qui nécessite une coupure sans créer un nouveau paragraphe.

Séance 1 / 4

Structure & Listes

On organise le catalogue de plats ?

?️ Les conteneurs : <div> et <span>

<div> est une boîte invisible qui regroupe des éléments. C'est le tiroir du HTML. <span> fait pareil mais reste dans le flux du texte (inline).

<div> <h3>Ndolé ?</h3> <p> Le plat national du <span>Cameroun</span>. </p> </div>  <div> <h3>Eru ?</h3> <p>Légumes du Sud-Ouest avec viande fumée.</p> </div>

?️ Rendu dans le navigateur

Sans CSS, une <div> est invisible. Tu verras juste chaque fiche l'une sous l'autre :

Ndolé ?
Le plat national du Cameroun.

Eru ?
Légumes du Sud-Ouest avec viande fumée.

L'encadré et la ligne de séparation ci-dessus, c'est moi qui les ai ajoutés pour que tu visualises. En réalité le navigateur n'affiche aucun cadre autour des <div>. C'est le CSS qui donnera du style plus tard ! ?

? Règle : seuls, <div> et <span> ne font rien visuellement. Leur puissance arrive avec le CSS.

✏️ Exercice – Fiches produits avec <div> EX 4/8

Dans ton fichier, après le paragraphe de bienvenue, structure 3 plats dans des div séparées.

? Ta mission :
Crée 3 <div> pour :
• Le Ndolé
• Le Koki
• Le Poulet DG

Chaque div contient un <h3> (nom du plat) et un <p> (description). Utilise <span> pour entourer le prix dans chaque description.

? Tu viens de créer des vraies fiches produit !

Chaque <div> est un conteneur de bloc : il prend toute la largeur et passe à la ligne. Le <span> reste inline : il s'insère dans une phrase sans la couper. Idéal pour cibler un prix, une couleur ou un mot spécifique ! ?

? Les listes : <ul>, <ol> et <li>

HTML propose deux types de listes :

• <ul> → liste à puces (Unordered List)

• <ol> → liste numérotée (Ordered List)

Chaque élément est un <li> (List Item) :

<ul> <li>Ndolé au poisson fumé ?</li> <li>Eru avec water fufu ?</li> <li>Poulet DG aux légumes ?</li> </ul>  <ol> <li>Choisir votre plat</li> <li>Passer la commande</li> <li>Livraison à domicile ?</li> </ol>

?️ Rendu dans le navigateur

ul → puces

Ndolé au poisson fumé ?
Eru avec water fufu ?
Poulet DG aux légumes ?

ol → numéros

Choisir votre plat
Passer la commande
Livraison à domicile ?

Le navigateur ajoute les puces et les numéros automatiquement. Tu n'as pas besoin d'écrire "1.", "2."... il le fait pour toi ! ?

✏️ Exercice – Menu et étapes de commande EX 5/8

On enrichit la boutique avec deux listes.

? Ta mission :
1. Sous les fiches produits, ajoute une <ul> intitulée "Nos spécialités" avec 5 plats camerounais.

2. En dessous, ajoute une <ol> intitulée "Comment commander ?" avec 4 étapes.

? Ton catalogue prend forme !

La <ul> affiche des puces rondes par défaut — pour les listes sans ordre particulier. La <ol> numérote automatiquement — pour les étapes où l'ordre compte. Et si tu supprimes un <li> au milieu, les numéros se réajustent tout seuls ! Magique ?

Séance 2 / 4

Liens & Images

On rend la boutique vivante et visuelle ?

? Les liens hypertextes : <a>

La balise <a> (anchor = ancre) crée un lien cliquable. L'attribut href indique la destination.

<a href="https://www.example.com"> Voir notre partenaire </a>  <a href="https://www.example.com" target="_blank" > Nouvel onglet </a>  <a href="contact.html"> Nous contacter </a>  <a href="mailto:jojo@saveurs.cm"> Envoyer un email à Jojo </a>

?️ Rendu dans le navigateur

→ Voir notre partenaire (même onglet) → Nouvel onglet (s'ouvre ailleurs) → Nous contacter (page locale) → Envoyer un email à Jojo (ouvre ta messagerie)

Par défaut le navigateur souligne les liens en bleu. Mais ça peut être changé complètement avec le CSS !

✏️ Exercice – Menu de navigation EX 6/8

Toute boutique a besoin d'un menu de navigation en haut de page !

? Ta mission :
En haut de ton <body>, avant le <h1>, ajoute une <ul> avec 4 <li> contenant chacun un lien <a> :

• Accueil → href="#"
• Nos plats → href="#plats"
• Livraison → href="#livraison"
• Contact → href="mailto:jojo@saveurs.cm"

? Un vrai menu de navigation !

Le href="#" est un lien "vide" — il mène nulle part, pratique pendant la construction. Le href="#plats" est une ancre interne : si tu ajoutes id="plats" à un élément de ta page, le clic fera défiler jusqu'à lui. Et mailto: ouvre directement l'app email — zéro JavaScript nécessaire ?

?️ Les images : <img>

La balise <img> affiche une image. Deux attributs sont obligatoires :

• src : chemin vers l'image (source)

• alt : texte alternatif (accessibilité + SEO)

<img src="ndole.jpg" alt="Plat de Ndolé camerounais" >  <img src="https://picsum.photos/300/200" alt="Photo du Ndolé" width="300" height="200" >

?️ Rendu dans le navigateur

← Voilà ce que produit la balise
<img src="..." alt="...">

Si l'image ne charge pas,
le texte alt s'affiche à la place.

⚠️ L'attribut alt est crucial : il est lu par les lecteurs d'écran pour les malvoyants ET par Google Images pour indexer ta photo.

✏️ Exercice – Illustre tes fiches plats EX 7/8

Ajoutons une image à chaque fiche produit.

? Ta mission :
Dans chacune de tes 3 <div> de plats, ajoute une balise <img> avant le <h3>.

Pour la source, utilise une image de placeholder :
https://picsum.photos/seed/NOM/300/200
(remplace NOM par le nom du plat pour avoir une image différente).

N'oublie pas le alt qui décrit le plat !

? Ta boutique ressemble à un vrai site !

<img> est la 2ème grande balise orpheline (avec <br> et <meta>). Elle n'a pas de balise fermante car elle est le contenu, elle n'en entoure pas.

Le alt c'est le héros silencieux du web. Si un malvoyant visite ta boutique avec un lecteur d'écran, c'est lui qui dit ce qu'il y a à voir. Google Images le lit aussi pour indexer tes photos ! ?

Séance 3 / 4

Les Tableaux HTML

On affiche les tarifs façon pro ?

? Structure d'un tableau : <table>

Un tableau HTML, c'est des lignes et des colonnes. Voici les balises :

• <table> → le tableau entier

• <thead> → l'en-tête (noms des colonnes)

• <tbody> → le corps (les données)

• <tr> → une ligne (Table Row)

• <th> → cellule d'en-tête (gras et centrée automatiquement)

• <td> → cellule de données normale

<table>  <thead> <tr> <th>Plat</th> <th>Ingrédient principal</th> <th>Prix (FCFA)</th> </tr> </thead>  <tbody> <tr> <td>Ndolé ?</td> <td>Feuilles amères</td> <td>2 500</td> </tr> <tr> <td>Eru ?</td> <td>Légumes waterleaf</td> <td>3 000</td> </tr> </tbody> </table>

?️ Rendu dans le navigateur

Sans CSS, le navigateur affiche le tableau sans bordures :

Plat	Ingrédient principal	Prix (FCFA)
Ndolé ?	Feuilles amères	2 500
Eru ?	Légumes waterleaf	3 000

Les bordures que tu vois ici, je les ai ajoutées avec du CSS inline pour la lisibilité. En HTML pur, le tableau est sans bordure. Avec border-collapse: collapse en CSS, on fusionne les bordures doubles en une seule ?

✏️ Exercice – Le tableau des prix EX 8/8

On ajoute une section "Nos tarifs" à la boutique.

? Ta mission :
Crée un <table> avec 4 colonnes :
Plat | Région | Temps de prépa | Prix FCFA

Remplis 5 lignes avec des plats camerounais de ton choix.
Utilise bien <thead>, <tbody>, <th> et <td>.

? GRAND CHEF HTML – Bravo !

Tu viens de maîtriser la structure la plus complexe du TP ! Un tableau HTML c'est comme un sandwich :

<table> = le pain extérieur ?
<thead> / <tbody> = les couches ?
<tr> = chaque tranche ?
<td> = chaque ingrédient individuel ?

Le <th> est spécial : il dit au navigateur ET à Google que c'est un titre de colonne. Il affiche le texte en gras et centré automatiquement ?

? Bonus – Fusionner des cellules : colspan & rowspan

Une cellule peut s'étaler sur plusieurs colonnes ou plusieurs lignes :

<td colspan="2"> Plats du Centre et du Littoral </td>  <td rowspan="3"> Spécial Weekend </td>  <tfoot> <tr> <td colspan="3">Livraison offerte à partir de 10 000 FCFA</td> </tr> </tfoot>

? Essaie : ajoute un <tfoot> à ton tableau avec un message de livraison gratuite !

???