TP HTML – GeniusAuto

GeniusAuto – Agence Automobile

? TP Pratique · HTML + CSS

GENIUSAUTO

Construis le site web d'une agence de location et vente de voitures, du HTML brut au CSS maîtrisé.

⏱️ 5 séances progressives

? HTML + CSS de A à Z

? Cours guidés + Exercices

Structure HTML

CSS – Bases

Mise en page

Couleurs & Typo

Finitions

Structure HTML de l'agence

On bâtit le squelette du site GeniusAuto avant toute mise en forme ?️

DOCTYPE & html head / body Titres h1–h3 Paragraphes Listes Images & liens Tableau

? 1.1 · Squelette HTML de base HTML

Tout site web commence par la même structure de base. Pense à une voiture : avant de peindre la carrosserie, il faut le châssis. Le HTML, c'est le châssis !

HTML

<!DOCTYPE html>  <html lang="fr">  <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GeniusAuto – Location & Vente de voitures</title> </head>  <body>  </body> </html>

?️ Rendu dans le navigateur

→ Page blanche… mais l'onglet affiche : GeniusAuto – Location & Vente de voitures

Le body est vide pour l'instant. Seul le <title> est visible — dans l'onglet du navigateur et dans les résultats Google.

? La balise <meta viewport> est cruciale pour les mobiles. Sans elle, ton site s'affichera tout zoomé sur un téléphone. Toujours l'inclure !

✏️ Exercice – Crée geniusauto.html EX 1 / 10

Ouvre un éditeur (VS Code, Notepad++…), crée un fichier geniusauto.html et tape la structure ci-dessus.

? Ta mission :
Adapte le <title> en : "GeniusAuto – Votre agence automobile de confiance"
Ouvre le fichier dans Chrome → observe l'onglet.

? Le moteur est démarré !

Tu viens de créer le châssis de ton site. La balise <title> contrôle ce que Google affiche dans les résultats de recherche. C'est aussi le premier contact entre ton agence et un futur client !

? 1.2 · Header, Nav, Main, Footer – Balises sémantiques HTML

HTML5 introduit des balises sémantiques qui donnent du sens à la structure. Au lieu de mettre des div partout, on utilise des balises qui décrivent leur rôle :

HTML

<body>  <header> <h1>? GeniusAuto</h1> <p>Location & Vente de véhicules</p> </header>  <nav> <ul> <li><a href="#">Accueil</a></li> <li><a href="#vehicules">Nos véhicules</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav>  <main> <section id="vehicules"> <h2>Nos véhicules disponibles</h2> </section> </main>  <footer> <p>© 2025 GeniusAuto. Tous droits réservés.</p> </footer> </body>

?️ Rendu dans le navigateur

? GeniusAuto

Location & Vente de véhicules

Nos véhicules disponibles

Sans CSS : texte brut, liens bleus soulignés. L'étape 2 va tout changer !

? <header>, <nav>, <main>, <footer>, <section> sont des balises sémantiques. Elles fonctionnent comme des <div> mais Google et les lecteurs d'écran comprennent leur rôle. Toujours les préférer aux div.

? 1.3 · Fiches véhicules avec article + tableau des tarifs HTML

Chaque voiture aura sa propre fiche. On utilise la balise <article> pour chaque véhicule, et un <table> pour les tarifs.

HTML

<article> <img src="https://picsum.photos/seed/car1/400/250" alt="Toyota Corolla – berline familiale" width="400" > <h3>Toyota Corolla 2023</h3> <ul> <li>Catégorie : <b>Berline</b></li> <li>Carburant : <b>Hybride</b></li> <li>Boîte : <b>Automatique</b></li> <li>Places : <b>5</b></li> </ul> <p>Prix location : <strong>25 000 FCFA / jour</strong></p> <a href="mailto:contact@geniusauto.cm">Réserver</a> </article>  <table> <thead> <tr> <th>Véhicule</th> <th>Catégorie</th> <th>Prix / jour</th> <th>Disponibilité</th> </tr> </thead> <tbody> <tr> <td>Toyota Corolla</td> <td>Berline</td> <td>25 000</td> <td>✅ Disponible</td> </tr> <tr> <td>Mercedes GLC</td> <td>SUV Premium</td> <td>75 000</td> <td>✅ Disponible</td> </tr> <tr> <td>Renault Clio</td> <td>Citadine</td> <td>18 000</td> <td>❌ Réservée</td> </tr> </tbody> </table>

✏️ Exercice – Construis la page complète GeniusAuto EX 2 / 10

? Ta mission :
Dans ton fichier geniusauto.html, construis :
1. Un <header> avec le nom de l'agence et un slogan
2. Un <nav> avec 4 liens (Accueil, Véhicules, Tarifs, Contact)
3. Un <main> avec 3 <article> de voitures (chacun avec image, h3, ul de caractéristiques, prix et lien "Réserver")
4. Un <table> de tarifs avec 5 véhicules
5. Un <footer> avec les infos de contact

?️ La carrosserie est posée !

Tu viens de construire la structure sémantique complète du site. <article> signifie "contenu autonome, réutilisable" — parfait pour des fiches produit. <section> groupe des contenus liés thématiquement. La différence : un <article> peut exister seul (on pourrait le copier dans un autre contexte), une <section> non.

Séance 1 / 5 — Structure HTML

CSS – Les bases de la mise en forme

On peint et habille le site GeniusAuto ?

Lier CSS au HTML Sélecteurs color & background font-size & font-family margin & padding border

? 2.1 · Lier une feuille de style CSS au fichier HTML CSS

Le CSS peut être écrit de 3 manières. Pour un projet professionnel, on utilise toujours un fichier séparé (.css) lié dans le <head>.

HTML – dans <head>

<link rel="stylesheet" href="style.css" >  <style> body { background: #f5f5f7; } </style>  <h1 style="color: red;">GeniusAuto</h1>

⭐ Pour ce TP, utilise la Méthode 2 (balise <style> dans le head) pour rester sur un seul fichier. En production, préfère la Méthode 1 avec un style.css séparé.

? 2.2 · Sélecteurs CSS – Cibler les bons éléments CSS

Un sélecteur CSS indique à qui s'applique un style. Il y a 3 types fondamentaux :

CSS

/* Sélecteur de balise : cible TOUS les h1 */ h1 { color: #e63946; font-size: 2.5rem; } /* Sélecteur de classe : cible tous les éléments avec class="carte" */ .carte { background: #ffffff; border: 1px solid #ddd; } /* Sélecteur d'identifiant : cible UN SEUL élément avec id="hero" */ #hero { background: #0d0d0f; color: #ffffff; } /* Combinaison : tous les <a> DANS un <nav> */ nav a { color: #f4a629; text-decoration: none; }

?️ Comment ça s'applique

balise → cibler tous les éléments du même type (ex : tous les <h1>)

.classe → cibler plusieurs éléments différents qui partagent un style (ex : toutes les cartes voiture)

#id → cibler UN seul élément unique (ex : le bandeau principal)

nav a → cibler les liens à l'intérieur de la nav seulement

⚠️ Un id ne doit apparaître qu'une seule fois par page. Pour répéter un style, utilise toujours une class !

? 2.3 · Le modèle de boîte : margin, padding, border CSS

Chaque élément HTML est une boîte. Cette boîte a 4 couches :

CSS

.carte-voiture { /* PADDING : espace INTÉRIEUR (entre le contenu et la bordure) */ padding: 20px; /* BORDER : la bordure visible */ border: 2px solid #dde0ec; border-radius: 12px; /* coins arrondis */ /* MARGIN : espace EXTÉRIEUR (entre cet élément et ses voisins) */ margin: 16px; /* BACKGROUND : couleur ou image de fond */ background: #ffffff; }

?️ Schéma du modèle de boîte

MARGIN (espace extérieur)

BORDER

PADDING (espace intérieur)

CONTENU

✏️ Exercice – Style de base pour GeniusAuto EX 3 / 10

? Ta mission :
Ajoute une balise <style> dans ton <head> et applique :
1. body → background #f7f8fc, font-family sans-serif, margin 0
2. header → background #0d0d0f, color #fff, padding 2rem
3. h1 dans le header → color #e63946, font-size 2.5rem
4. nav ul → list-style none, display flex, gap 1.5rem, padding 0
5. nav a → color #f4a629, text-decoration none

? La peinture est appliquée !

Tu viens d'utiliser les 3 types de sélecteurs ! body et h1 sont des sélecteurs de balise. nav ul est un sélecteur combiné : il cible les <ul> qui se trouvent DANS un <nav>. Ça évite d'affecter tous les <ul> de la page !

Séance 2 / 5 — CSS Bases

Mise en page avec Flexbox

On aligne les cartes voitures comme dans un vrai site ?

display: flex flex-direction justify-content align-items flex-wrap gap width & max-width

? 3.1 · Flexbox – Aligner les éléments horizontalement CSS

Flexbox est le système d'alignement CSS le plus utilisé. Il suffit d'ajouter display: flex à un conteneur pour que ses enfants s'alignent en ligne.

CSS

/* Le conteneur des cartes voitures */ .grille-voitures { display: flex; /* Active Flexbox */ flex-wrap: wrap; /* Retour à la ligne si manque de place */ gap: 24px; /* Espace entre les cartes */ justify-content: center;/* Centre les cartes */ padding: 2rem; } /* Chaque carte voiture */ .carte-voiture { width: 300px; /* Largeur fixe de chaque carte */ background: #fff; border-radius: 16px; overflow: hidden; /* Cache ce qui dépasse */ box-shadow: 0 4px 20px rgba(0,0,0,0.08); } /* L'image prend toute la largeur de la carte */ .carte-voiture img { width: 100%; /* 100% de la largeur du parent */ height: 200px; object-fit: cover; /* Recadre sans déformer */ display: block; } /* Zone de texte de la carte */ .carte-voiture .infos { padding: 1.2rem; }

HTML – À ajouter dans <main>

<div class="grille-voitures"> <article class="carte-voiture"> <img src="https://picsum.photos/seed/car1/400/250" alt="Toyota Corolla" > <div class="infos"> <h3>Toyota Corolla</h3> <p>Berline · Hybride · 5 places</p> <p><strong>25 000 FCFA</strong> / jour</p> </div> </article>  </div>

?️ Rendu avec Flexbox

Toyota Corolla
Berline · Hybride
25 000 FCFA/j

Mercedes GLC
SUV · Diesel
75 000 FCFA/j

Renault Clio
Citadine · Essence
18 000 FCFA/j

3 cartes alignées côte à côte grâce à display: flex. Si l'écran est trop petit, flex-wrap: wrap les fera passer à la ligne.

?️ 3.2 · Centrer le contenu avec max-width et margin: auto CSS

Pour que le contenu reste centré et lisible même sur grand écran, on utilise max-width combiné à margin: auto.

CSS

/* Conteneur général : limite la largeur et centre */ .conteneur { max-width: 1100px; /* Jamais plus large que 1100px */ margin: 0 auto; /* 0 haut/bas, auto gauche/droite = centré */ padding: 0 1.5rem; /* Respiration sur les côtés */ } /* Section héro (bannière d'accueil) */ .hero { background: linear-gradient(135deg, #0d0d0f 60%, #1a1a1f); color: #fff; padding: 5rem 2rem; text-align: center; }

✏️ Exercice – Grille de voitures et mise en page générale EX 4 / 10

? Ta mission :
1. Ajoute la classe class="grille-voitures" au <div> qui contient tes articles
2. Ajoute la classe class="carte-voiture" à chaque <article>
3. Entoure le contenu des sections d'un <div class="conteneur">
4. En CSS, crée les règles .grille-voitures et .carte-voiture comme vu dans le cours
5. Stylise aussi le tableau : table { width: 100%; border-collapse: collapse; } et td, th { padding: 12px; border: 1px solid #dde0ec; }

? Le showroom est ouvert !

La magie de display: flex : en ajoutant juste cette propriété au parent, ses enfants directs s'alignent automatiquement en ligne. flex-wrap: wrap est le filet de sécurité : si l'écran est trop petit, les cartes passent à la ligne. Et object-fit: cover sur l'image, c'est comme "zoom et recadre" — l'image remplit son cadre sans se déformer !

Séance 3 / 5 — Mise en page

Couleurs, Typographie & Variables CSS

On crée l'identité visuelle de GeniusAuto ?️

Variables CSS Couleurs hex/rgb Google Fonts font-weight line-height text-transform letter-spacing

? 4.1 · Variables CSS – La palette de l'agence CSS

Les variables CSS permettent de définir les couleurs de GeniusAuto une seule fois et de les réutiliser partout. Si tu changes la couleur principale, tout le site se met à jour !

CSS

/* :root = la racine de la page. Variables disponibles partout */ :root { --couleur-principale: #e63946; /* Rouge GeniusAuto */ --couleur-sombre: #0d0d0f; /* Noir profond */ --couleur-or: #f4a629; /* Or accent */ --couleur-fond: #f7f8fc; /* Gris clair */ --couleur-texte: #1a1a2e; /* Presque noir */ --rayon-bordure: 12px; /* Coins arrondis globaux */ } /* UTILISATION des variables avec var() */ header { background: var(--couleur-sombre); color: #fff; } h1 { color: var(--couleur-principale); } .btn-reserver { background: var(--couleur-principale); }

⭐ Les variables CSS commencent toujours par -- et s'utilisent avec var(). Si tu veux changer la couleur de GeniusAuto de rouge en bleu, tu changes une seule ligne dans :root et tout le site se met à jour !

✍️ 4.2 · Typographie – Intégrer Google Fonts CSS

La typographie donne le caractère d'un site. Google Fonts propose des centaines de polices gratuites à intégrer en 2 étapes :

HTML – dans <head>, avant <style>

<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;900&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet" >

CSS – Étape 2 : appliquer les polices

/* Police de titre : Barlow Condensed (impactante, automobile) */ h1, h2, h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; letter-spacing: -0.5px; text-transform: uppercase; } /* Police de corps : DM Sans (lisible, moderne) */ body { font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.7; /* 1.7× la taille de la police = lisible */ } /* Prix mis en avant */ .prix { font-size: 1.4rem; font-weight: 700; color: var(--couleur-principale); }

?️ Rendu typographique

GENIUSAUTO

NOS VÉHICULES DISPONIBLES

Location et vente de véhicules haut de gamme. Parc automobile régulièrement renouvelé, service clientèle disponible 7j/7.

25 000 FCFA / jour

✏️ Exercice – Identité visuelle de GeniusAuto EX 5 / 10

? Ta mission :
1. Intègre Google Fonts (Barlow Condensed + DM Sans) dans ton <head>
2. Ajoute les variables CSS dans :root {}
3. Applique Barlow Condensed aux titres et DM Sans au body
4. Stylise les prix avec la classe .prix (rouge, gras, grande taille)
5. Ajoute text-transform: uppercase sur les titres h1, h2

?️ GeniusAuto a son identité !

Les variables CSS dans :root, c'est comme la charte graphique d'une marque : toutes les couleurs au même endroit. line-height: 1.7 signifie que l'interligne est 1,7 fois la taille de la police — la règle typographique pour que le texte soit confortable à lire. En dessous de 1.4, ça "serre" trop !

Séance 4 / 5 — Couleurs & Typo

Finitions : effets, hover & boutons

On ajoute la touche finale qui rend le site vivant ✨

:hover transition cursor: pointer Boutons CSS box-shadow opacity transform: scale

?️ 5.1 · Pseudo-classe :hover – Réagir au survol CSS

La pseudo-classe :hover s'applique automatiquement quand la souris survole un élément. C'est le CSS qui rend le site "vivant" !

CSS

/* Carte au repos */ .carte-voiture { transition: all 0.3s ease; /* Animation douce de 0.3s */ cursor: pointer; /* Curseur main au survol */ } /* Carte au survol : légèrement soulevée */ .carte-voiture:hover { transform: translateY(-6px); /* Monte de 6px */ box-shadow: 0 12px 40px rgba(0,0,0,0.15); } /* Lien au survol */ nav a:hover { color: var(--couleur-principale); text-decoration: underline; } /* Image de carte au survol : légèrement zoomée */ .carte-voiture img { transition: transform 0.4s ease; } .carte-voiture:hover img { transform: scale(1.05); /* Zoom 5% */ }

? transition doit être sur l'état de repos (pas sur :hover). Sinon l'animation n'est douce qu'à l'entrée, pas à la sortie du survol !

? 5.2 · Créer des boutons CSS professionnels CSS

Un bouton HTML de base est moche. Le CSS le transforme en vrai composant interactif :

CSS

/* Bouton principal "Réserver" */ .btn-reserver { display: inline-block; background: var(--couleur-principale); color: #ffffff; padding: 0.75rem 1.8rem; border-radius: 8px; font-weight: 700; font-size: 0.9rem; text-decoration: none; /* Pas de soulignement */ text-transform: uppercase; letter-spacing: 1px; transition: all 0.2s ease; cursor: pointer; border: none; } .btn-reserver:hover { background: #c0242e; /* Rouge plus foncé au survol */ transform: translateY(-2px); box-shadow: 0 6px 20px rgba(230,57,70,0.4); } /* Bouton secondaire "Voir détails" */ .btn-details { display: inline-block; background: transparent; color: var(--couleur-principale); border: 2px solid var(--couleur-principale); padding: 0.7rem 1.6rem; border-radius: 8px; font-weight: 600; text-decoration: none; transition: all 0.2s ease; } .btn-details:hover { background: var(--couleur-principale); color: #fff; }

?️ Rendu des boutons

Réserver Voir détails

Survole les boutons dans ton navigateur pour voir l'effet :hover. C'est la transition CSS qui crée l'animation douce.

✏️ Exercice – Boutons, hover et footer EX 6 / 10

? Ta mission :
1. Remplace les liens <a>Réserver</a> par <a class="btn-reserver">Réserver</a>
2. Ajoute les styles .btn-reserver et .btn-reserver:hover en CSS
3. Ajoute transition: all 0.3s ease sur .carte-voiture
4. Ajoute .carte-voiture:hover { transform: translateY(-6px); }
5. Stylise le footer : fond sombre (#0d0d0f), texte blanc, centré, padding 2rem

✨ Le site est vivant !

La transition est la propriété CSS la plus satisfaisante : elle transforme n'importe quel changement d'état en animation fluide. translateY(-6px) déplace l'élément de 6px vers le haut sans affecter la mise en page — c'est l'effet "carte qui se soulève" qu'on voit sur tous les grands sites e-commerce. C'est du CSS pur, sans une ligne de JavaScript !

? 5.3 · Bonus – Code final complet GeniusAuto HTML + CSS

Voici la structure finale de référence pour ton fichier geniusauto.html :

HTML – Structure finale geniusauto.html

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GeniusAuto – Agence Automobile</title> <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;900&family=DM+Sans:wght@400;600&display=swap" rel="stylesheet"> <style> /* Variables */ :root { --rouge: #e63946; --noir: #0d0d0f; --or: #f4a629; --fond: #f7f8fc; } /* Base */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'DM Sans', sans-serif; background: var(--fond); } h1,h2,h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; } /* Header */ header { background: var(--noir); color: #fff; padding: 2rem; } header h1 { font-size: 3rem; color: var(--rouge); text-transform: uppercase; } /* Nav */ nav { background: #1a1a1f; padding: 1rem 2rem; } nav ul { list-style: none; display: flex; gap: 2rem; } nav a { color: var(--or); text-decoration: none; font-weight: 600; } nav a:hover { color: var(--rouge); } /* Grille */ .grille { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; padding: 3rem 2rem; } .carte { width: 300px; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.08); transition: all .3s ease; } .carte:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.14); } .carte img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform .4s ease; } .carte:hover img { transform: scale(1.05); } .carte .infos { padding: 1.2rem; } .carte h3 { font-size: 1.3rem; text-transform: uppercase; margin-bottom: .4rem; } .carte .prix { font-size: 1.3rem; font-weight: 700; color: var(--rouge); margin: .5rem 0; } /* Bouton */ .btn { display: inline-block; background: var(--rouge); color: #fff; padding: .7rem 1.5rem; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: 1px; transition: all .2s ease; } .btn:hover { background: #c0242e; transform: translateY(-2px); } /* Tableau */ table { width: 100%; border-collapse: collapse; margin: 2rem; } th, td { padding: 12px 16px; border: 1px solid #dde0ec; text-align: left; } thead { background: var(--noir); color: #fff; } tr:nth-child(even) { background: #f7f8fc; } /* Zébrure */ /* Footer */ footer { background: var(--noir); color: rgba(255,255,255,.6); text-align: center; padding: 2rem; margin-top: 3rem; } </style> </head> <body> <header> <h1>? GeniusAuto</h1> <p>Votre agence automobile de confiance</p> </header> <nav> <ul> <li><a href="#">Accueil</a></li> <li><a href="#vehicules">Véhicules</a></li> <li><a href="#tarifs">Tarifs</a></li> <li><a href="mailto:contact@geniusauto.cm">Contact</a></li> </ul> </nav> <main> <section id="vehicules"> <div class="grille"> <article class="carte"> <img src="https://picsum.photos/seed/car1/400/250" alt="Toyota Corolla"> <div class="infos"> <h3>Toyota Corolla 2023</h3> <p>Berline · Hybride · 5 places</p> <p class="prix">25 000 FCFA / jour</p> <a href="mailto:contact@geniusauto.cm" class="btn">Réserver</a> </div> </article>  </div> </section> </main> <footer> <p>© 2025 GeniusAuto · Tous droits réservés</p> </footer> </body> </html>

? Exercice Final – GeniusAuto version complète EX FINAL

? Ta mission finale :
Assemble tout ce que tu as appris en un site geniusauto.html complet avec :

✅ Structure HTML sémantique (header, nav, main, footer)
✅ 4 fiches véhicules avec image, caractéristiques, prix et bouton
✅ Tableau de tarifs avec 5 véhicules et zébrure (tr:nth-child(even))
✅ Variables CSS dans :root
✅ Google Fonts intégrées
✅ Grille Flexbox pour les cartes
✅ Effets hover sur les cartes et les boutons
✅ Footer sombre avec copyright

Bonus : Ajoute une section "Nos services" avec une liste des avantages de l'agence.

? GENIUS AUTO EST EN LIGNE !

Tu as maîtrisé HTML + CSS de A à Z en 5 séances ! Voici ce que chaque séance t'a appris :

Séance 1 → HTML structure : le squelette sans lequel rien n'existe
Séance 2 → CSS bases : sélecteurs, couleurs, le modèle de boîte
Séance 3 → Flexbox : aligner des éléments comme un pro
Séance 4 → Variables CSS + Google Fonts : l'identité visuelle
Séance 5 → Hover + transitions + boutons : le site qui vit

La prochaine étape ? CSS Grid pour des mises en page encore plus puissantes, puis CSS Media Queries pour rendre le site 100% responsive ! ?

???

TP Complet — GeniusAuto est prêt !

5 séances, HTML + CSS maîtrisés, un vrai site d'agence automobile construit de zéro.

✅ Structure sémantique HTML5 ✅ header · nav · main · footer ✅ article · section · table ✅ Sélecteurs CSS ✅ Modèle de boîte ✅ Flexbox ✅ Variables CSS ✅ Google Fonts ✅ :hover & transition ✅ Boutons CSS ✅ object-fit · box-shadow

Séance 5 / 5 — Finitions