Lab 1 — Ma première page HTML

Énoncé du lab 1 de Programmation Frontend 1 : Ma première page HTML.
Auteur

Dr. El Hadji Bassirou TOURÉ · DMI/FST/UCAD

NoteInformations pratiques
Type Lab guidé
Séance S2 — premier Lab du semestre
Prérequis Lab 0 (environnement OK) + CM1 (notions HTML)
Validation Page d’accueil affichée avec Live Server + tag v0.1 sur GitHub
Rapport 1-2 pages : ce que j’ai fait + difficultés + lien repo
NoteObjectifs du Lab

À la fin de ce Lab, vous aurez :

  1. Créé le fichier index.html dans votre repo jang-afrig
  2. Écrit la structure HTML complète de la page d’accueil
  3. Utilisé les balises h1, h2, p, strong, em
  4. Construit une liste imbriquée pour présenter les modes de jeu
  5. Construit un tableau (palmarès) avec th et td
  6. Ajouté un lien et une image (drapeau africain)
  7. Posé le tag v0.1 sur GitHub
  8. Rédigé votre rapport de Lab

Avant de coder

Rappel : le CM1 et le Lab 0

Au CM1, vous avez vu :

  • Une page web = HTML (structure) + CSS (déco) + JS (comportement)
  • Une page HTML a un <head> (invisible) et un <body> (visible)
  • Les balises essentielles : titres (h1-h6), paragraphes, listes, tableaux, liens, images

Au Lab 0, vous avez :

  • Installé VS Code + Live Server + Git
  • Créé votre repo GitHub jang-afrig
  • Cloné ce repo sur votre ordinateur
  • Fait un premier cycle Git complet

Aujourd’hui, on combine les deux : on écrit une vraie page HTML dans le repo, on la voit dans le navigateur, on la pousse sur GitHub avec un tag de version.

Ce qu’on va construire concrètement

La page d’accueil de Jàng Afrig en HTML brut. Pas de CSS (la page sera moche, c’est normal — on s’occupera du style aux Labs 3 et 4). Pas de JavaScript (la page ne fera rien d’interactif — on s’en occupe à partir du Lab 5).

Voici ce que la page contiendra :

  • Un titre principal Jàng Afrig avec un sous-titre
  • Un paragraphe de présentation
  • La liste des modes de jeu (capitales, drapeaux, langues, voisins, chrono) avec des sous-éléments
  • Un tableau « Palmarès des champions » (5 lignes fictives)
  • Une image (drapeau de l’Union Africaine, ou un drapeau de votre choix)
  • Un lien vers le repo GitHub du projet
ImportantPas de panique si c’est moche

À la fin du Lab, votre page ressemblera à un document Word de 1990 : texte noir sur fond blanc, sans mise en forme. C’est normal et c’est voulu. On apprend à structurer avant d’apprendre à décorer. La beauté arrive aux Labs 3 et 4 (CSS).

Préparer son espace de travail

Ouvrir VS Code dans le repo

Dans votre terminal, allez dans votre dossier cours-web/jang-afrig et ouvrez VS Code :

cd ~/cours-web/jang-afrig
code .

VS Code s’ouvre avec votre repo dans l’Explorateur à gauche. Vous devez voir au moins :

  • README.md (créé automatiquement par GitHub au Lab 0)
  • index.html (créé par vous au Lab 0 avec le « Hello »)

Faire le ménage dans index.html

Ouvrez index.html (clic dans l’Explorateur). Vous voyez le code « Hello » que vous aviez écrit au Lab 0.

Effacez tout le contenu pour repartir d’une feuille blanche. On va le réécrire pas à pas.

AstucePourquoi tout effacer ?

On aurait pu modifier le fichier petit à petit, mais pour bien intégrer la structure HTML, c’est mieux de la réécrire de zéro. À la deuxième page que vous écrirez dans votre vie, vous saurez la taper sans réfléchir.

Lancer Live Server

Avant de coder, lancez Live Server pour voir le résultat en direct :

  1. Clic droit sur index.html dans l’Explorateur
  2. Open with Live Server

Votre navigateur s’ouvre sur une page vide (puisqu’on a tout effacé). Laissez le navigateur ouvert à côté de VS Code.

ImportantLe rituel du développeur

Pendant tout le Lab, vous travaillerez avec :

  • VS Code à gauche de l’écran
  • Le navigateur à droite

À chaque fois que vous enregistrez (Ctrl+S), la page se rafraîchit toute seule. Vous voyez le résultat instantanément.

Étape 1 : Le squelette HTML

On commence par poser le squelette de toute page HTML. Tapez (ou copiez) ce code dans index.html :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Jàng Afrig</title>
    </head>
    <body>
    </body>
</html>

Enregistrez (Ctrl+S). Regardez le navigateur : il est toujours vide visuellement, mais l’onglet affiche désormais « Jàng Afrig ». ✓

AstucePourquoi vide visuellement ?

Tout ce que vous écrivez dans <head> est invisible. Le <body> est encore vide. Donc rien à afficher. C’est attendu.

Ce qui se passe ligne par ligne :

Ligne Rôle
<!DOCTYPE html> « Je suis du HTML5 moderne »
<html lang="fr"> Démarre la page, langue française
<meta charset="UTF-8"> Permet les accents (à, é, ç) et le Jàng
<title>Jàng Afrig</title> Texte de l’onglet du navigateur
<body></body> La zone visible, vide pour l’instant
AvertissementLe caractère « à » de Jàng

Sans <meta charset="UTF-8">, le mot « Jàng » risque de s’afficher comme « Jng » ou « J0ng ». Cette ligne est obligatoire dès qu’on a des accents (donc tout le temps en français).

Étape 2 : Titre et présentation

On va maintenant remplir le <body>. Ajoutez entre <body> et </body> :

<h1>Jàng Afrig</h1>
<h2>Apprendre l'Afrique, un pays à la fois</h2>

<p>
    Bienvenue sur <strong>Jàng Afrig</strong>, un quiz géographique sur les
    <strong>54 pays africains</strong>. Choisissez un mode de jeu, répondez à
    10 questions, et battez votre meilleur score !
</p>

<p>
    Le mot <em>jàng</em> signifie <em>«&nbsp;apprendre, étudier&nbsp;»</em>
    en wolof. Le projet est développé dans le cadre du cours
    <strong>Fondamentaux du Web</strong> en L1 DUT1-Info à l'UCAD.
</p>

Enregistrez. Le navigateur affiche maintenant un grand titre « Jàng Afrig », un sous-titre « Apprendre l’Afrique…», et deux paragraphes. ✓

AstuceL’entité  

&nbsp; est un espace insécable (qui ne se coupe pas en fin de ligne). On l’utilise avant les guillemets français (« texte »), les deux-points, les points-virgules. Pas obligatoire, mais joli.

Étape 3 : La liste des modes de jeu

C’est ici qu’on va utiliser une liste imbriquée : une liste principale des modes, et pour chaque mode, une sous-liste avec une description courte.

Ajoutez à la suite, dans le <body> :

<h2>Les modes de jeu</h2>

<ul>
    <li>
        <strong>Capitales</strong>
        <ul>
            <li>Identifier la capitale d'un pays africain</li>
            <li>Exemple : « Quelle est la capitale du Mali ? »</li>
        </ul>
    </li>
    <li>
        <strong>Drapeaux</strong>
        <ul>
            <li>Reconnaître le drapeau d'un pays</li>
            <li>Exemple : « À quel pays appartient ce drapeau ? »</li>
        </ul>
    </li>
    <li>
        <strong>Langues</strong>
        <ul>
            <li>Associer une langue à un pays</li>
            <li>Exemple : « Dans quel pays parle-t-on le swahili ? »</li>
        </ul>
    </li>
    <li>
        <strong>Voisins</strong>
        <ul>
            <li>Compter les pays frontaliers</li>
            <li>Exemple : « Combien de voisins a l'Algérie ? »</li>
        </ul>
    </li>
    <li>
        <strong>Chrono</strong>
        <ul>
            <li>Maximum de bonnes réponses en 60 secondes</li>
        </ul>
    </li>
</ul>

Enregistrez. Vous voyez maintenant la liste à puces avec, sous chaque mode, une sous-liste indentée. ✓

ImportantIndentation : votre meilleur ami

Notez comme le code est indenté : chaque niveau de liste imbriquée est décalé de 4 espaces. Pour l’ordinateur, ça ne change rien. Pour vous (et pour quiconque relit votre code), c’est indispensable pour comprendre la structure.

VS Code indente automatiquement quand vous appuyez sur Tab.

Étape 4 : Le tableau des champions

On va maintenant ajouter un tableau avec un faux palmarès. Les vrais scores arriveront au Lab 10 (avec localStorage), pour l’instant on hardcode des données.

Ajoutez à la suite :

<h2>Palmarès des champions</h2>

<p>Les meilleurs scores enregistrés (données fictives pour le moment) :</p>

<table>
    <tr>
        <th>Rang</th>
        <th>Pseudo</th>
        <th>Mode</th>
        <th>Score</th>
        <th>Date</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Fatou</td>
        <td>Capitales</td>
        <td>10/10</td>
        <td>15 mars 2026</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Moussa</td>
        <td>Drapeaux</td>
        <td>9/10</td>
        <td>12 mars 2026</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Aminata</td>
        <td>Capitales</td>
        <td>9/10</td>
        <td>10 mars 2026</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Cheikh</td>
        <td>Voisins</td>
        <td>8/10</td>
        <td>8 mars 2026</td>
    </tr>
    <tr>
        <td>5</td>
        <td>Awa</td>
        <td>Langues</td>
        <td>8/10</td>
        <td>5 mars 2026</td>
    </tr>
</table>

Enregistrez. Le tableau apparaît, sans bordures (le navigateur les cache par défaut — on les verra au Lab 3 avec CSS). ✓

AstuceTableau sans bordures ?

Sans CSS, un tableau HTML s’affiche sans aucune bordure. C’est le comportement standard depuis HTML5. Au Lab 3, deux lignes de CSS suffiront à dessiner de jolies bordures et alterner les couleurs des lignes.

Étape 5 : Image et lien

Préparer le dossier images

Dans votre repo, on va mettre les images dans un sous-dossier images/ pour ranger.

  1. Dans l’Explorateur de VS Code, clic droit sur le dossier racine
  2. New Folder
  3. Nommez-le : images

Récupérer une image de drapeau

Choisissez un drapeau parmi ceux-ci :

Téléchargez le drapeau de votre choix : clic droit sur le lien \(\to\) Enregistrer la cible sous \(\to\) choisissez le dossier images/ de votre repo, nommez le fichier drapeau.png.

Insérer l’image et le lien

Ajoutez à la suite dans <body> :

<h2>À propos de Jàng Afrig</h2>

<p>
    <img src="images/drapeau.png" alt="Drapeau africain" width="200">
</p>

<p>
    Le code source du projet est disponible sur GitHub :
    <a href="https://github.com/votre-username/jang-afrig">
        github.com/votre-username/jang-afrig
    </a>
</p>

<p>
    Données fournies par
    <a href="https://restcountries.com">REST Countries</a>,
    une API libre et gratuite sur les pays du monde.
</p>

Remplacez votre-username par votre vrai username GitHub. Enregistrez. ✓

AvertissementL’attribut alt n’est pas optionnel

Toujours mettre un alt sur chaque <img>. Pour vos camarades qui utilisent un lecteur d’écran (cécité, déficience visuelle), c’est leur seule façon de « voir » l’image. C’est aussi utile si l’image ne se charge pas (lien cassé, connexion lente).

Vérification : ce que doit afficher la page

À ce stade, votre page doit ressembler à ce schéma (en plus brut sans style) :

Jàng Afrig
Apprendre l’Afrique, un pays à la fois

Bienvenue sur Jàng Afrig, un quiz géographique sur les 54 pays africains…Les modes de jeu

  • Capitales

    • Identifier la capitale d’un pays africain
    • Exemple : « Quelle est la capitale du Mali ? »

  • Drapeaux…

  • Langues…

Palmarès des champions

Rang Pseudo Mode Score Date
1 Fatou Capitales 10/10 15 mars 2026
2 Moussa Drapeaux 9/10 12 mars 2026
…

À propos de Jàng Afrig

[Image du drapeau choisi]

Le code source du projet est disponible sur GitHub :
{.underline}

ImportantAspect attendu

Tout est noir, sur fond blanc, sans bordure de tableau, sans couleurs ni mise en page. C’est volontaire. La page est structurée, pas décorée. CSS arrive bientôt.

Si quelque chose ne s’affiche pas comme attendu

  • Page totalement blanche : vérifiez que vous avez bien enregistré (Ctrl+S) et que Live Server tourne.
  • Caractères bizarres (Jng au lieu de Jàng) : vérifiez la ligne <meta charset="UTF-8">.
  • L’image ne s’affiche pas : vérifiez le chemin (images/drapeau.png) et que le fichier est bien dans le bon dossier.
  • La sous-liste n’apparaît pas : vérifiez que le <ul> imbriqué est bien à l’intérieur d’un <li>, pas entre deux <li>.

Exercices d’application

NoteTrois mini-exercices à faire dans l’ordre

Exercice 1 — Une 6e ligne au tableau

Ajoutez une ligne supplémentaire au tableau du palmarès, avec :

  • Rang : 6
  • Pseudo : votre prénom
  • Mode : un mode de votre choix
  • Score : un score de votre choix
  • Date : aujourd’hui

Exercice 2 — Un mode de jeu supplémentaire

Inventez un 6e mode de jeu et ajoutez-le à la liste des modes (avec sous-liste de 1 ou 2 lignes pour le décrire). Idées : « Monnaies », « Superficie », « Population »…Exercice 3 — Une section « Contact »

Ajoutez en bas de la page une section :

  • Un titre <h2>Contact</h2>
  • Un paragraphe avec votre nom complet, votre filière (DUT1-Info), votre email étudiant
  • Un lien mailto vers votre email : <a href="mailto:vous@exemple.sn">vous@exemple.sn</a>

Bonus (si vous avez fini en avance) : ajoutez 2 ou 3 drapeaux supplémentaires dans la section « À propos », côte à côte. Vous verrez qu’ils s’affichent les uns en dessous des autres. C’est normal, on règlera ça avec Flexbox au Lab 4.

Aide-mémoire

Les balises vues dans ce Lab

Balise Rôle
<!DOCTYPE html> Déclaration HTML5 (toujours en première ligne)
<html lang="fr"> Racine de la page, langue
<head> Métadonnées (invisibles)
<meta charset="UTF-8"> Encodage des caractères (accents)
<title> Texte de l’onglet
<body> Contenu visible
<h1> …<h6> Titres (un seul <h1> par page)
<p> Paragraphe
<strong> Texte important (gras par défaut)
<em> Mise en valeur (italique par défaut)
<ul> / <ol> / <li> Listes non ordonnée / ordonnée / élément
<table> / <tr> / <th> / <td> Tableau / ligne / cellule en-tête / cellule
<a href="..."> Lien hypertexte
<img src="..." alt="..."> Image (auto-fermante)

Le squelette à connaître par cœur

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Titre de la page</title>
    </head>
    <body>
        <!-- contenu visible ici -->
    </body>
</html>
ImportantLe réflexe à acquérir

Quand vous créez un nouveau fichier HTML dans VS Code, tapez html:5 puis Tab. VS Code génère automatiquement le squelette pour vous (c’est l’autocomplétion Emmet, intégrée).

Routine Git de fin de Lab

C’est le moment de sauvegarder votre travail et de marquer cette version. Vous l’avez fait au Lab 0, on refait pareil.

Les commandes à enchaîner

Dans le terminal intégré de VS Code (Ctrl+`) :

git status
git add .
git commit -m "v0.1 : page d'accueil HTML brut"
git push
git tag v0.1
git push --tags

Vérification

  1. Allez sur https://github.com/votre-username/jang-afrig
  2. Vous devez voir index.html et le dossier images/
  3. Cliquez sur l’onglet Tags (ou Releases) en haut
  4. Le tag v0.1 doit apparaître ✓
ImportantPourquoi un tag ?

Un tag Git est une étiquette qu’on pose sur une version précise du projet. Si vous travaillez 6 mois plus tard sur le projet et que vous voulez retrouver l’état exact à la fin du Lab 1, il vous suffit de faire git checkout v0.1. Vous y êtes.

Rapport à produire

AvertissementRapport du Lab 1 — obligatoire

À la fin de ce Lab, produisez un rapport court de 1 à 2 pages maximum.

Format du fichier :

  • PDF, Markdown (.md) ou Word
  • Nom : rapport-lab-1-NOM-Prenom.pdf
    (ex. rapport-lab-1-DIOP-Fatou.pdf)
  • Déposer dans le sous-dossier rapports/ de votre repo GitHub

Contenu obligatoire (4 sections) :

  1. Ce que j’ai fait (½ page) : page d’accueil créée, balises utilisées, exercices d’application complétés.
  2. Difficultés rencontrées (¼ page) : ce qui m’a bloqué (image qui ne s’affiche pas, structure de liste imbriquée, encodage…).
  3. Comment j’ai résolu ces difficultés (¼ page) : recherche, aide d’un camarade, essais et erreurs.
  4. Lien vers mon repo GitHub avec le tag v0.1 :
    ex. https://github.com/fatou-diop/jang-afrig/releases/tag/v0.1

Ton attendu : honnête et direct. Si quelque chose n’a pas marché du premier coup, dites-le. L’erreur fait partie de l’apprentissage.

Résumé et transition

Ce que vous avez accompli

  • Créé une vraie page HTML structurée ✓
  • Maîtrisé le squelette HTML5 (DOCTYPE, head, body) ✓
  • Utilisé titres, paragraphes, mise en forme inline ✓
  • Construit une liste imbriquée (modes de jeu) ✓
  • Construit un tableau (palmarès) ✓
  • Inséré une image et des liens ✓
  • Posé le tag v0.1 sur GitHub ✓

Ce qu’on fera au Lab 2

  • Découvrir les balises sémantiques HTML5 (header, nav, main, section, footer)
  • Construire les 5 pages de Jàng Afrig (Accueil, Quiz, Résultat, Mes Scores, À propos)
  • Ajouter des formulaires (saisie du pseudo, sélection du mode)
  • Lier les pages entre elles avec des liens internes
  • Tag v0.2
AstuceAvant le Lab 2

Lisez le PDF du Lab 2 que le prof vous a distribué. Aucun code à produire chez vous. Si vous avez du temps, vous pouvez parcourir la documentation des formulaires HTML sur MDN :
https://developer.mozilla.org/fr/docs/Learn/Forms

Lab 1 — Terminé ✓
Vous avez écrit votre première vraie page HTML.
La structure est posée. Place à la décoration et à l’interactivité.
Rendez-vous au Lab 2 !

Pour cette séance

Le cours

À lire en ligne

Retour au sommet