Cours HTML et CSS · Module 11: Outils de développement
Projet final - Page de musée avec un workflow complet
Dans cette leçon6
Tu connais déjà chaque outil séparément : les DevTools, Emmet, le validateur, les balises meta, l'optimisation, les polices et l'hébergement. Le véritable savoir-faire d'un programmeur consiste pourtant à les utiliser ensemble et dans un ordre fixe - du dossier vide jusqu'au lien que tu peux envoyer au monde entier. Il est temps de combiner tout ce que tu as appris dans ce module ! Tu vas créer une page complète pour le musée de l'Égypte antique, en utilisant tous les outils et toutes les techniques que tu as découverts :
Les exigences du projet :
1. Balises meta et SEO
- Des balises meta correctes : charset, viewport, description, author, theme-color
- Un favicon (link rel="icon")
- Les balises meta Open Graph (og:title, og:description, og:image, og:type)
2. Structure HTML
- Des balises sémantiques : header, nav, main, section, article, aside, footer
- Une hiérarchie des titres correcte (h1 -> h2 -> h3)
- Des commentaires qui décrivent les sections
3. Optimisation des images
- Les attributs width et height sur toutes les images
- Le lazy loading sur les images situées sous le premier écran
- L'élément picture avec le format WebP
4. Web Fonts
- Une police de Google Fonts (par ex. Cinzel pour les titres)
- Un preconnect vers le serveur de polices
- Une pile de polices (font stack) avec des polices de secours
- font-display: swap
5. CSS
- Les variables CSS (Custom Properties)
- Un CSS Reset
- Un design responsive
6. Performance
- Un code CSS minimal
- Des formats d'image adaptés
- Preconnect et preload
Un plan de travail étape par étape
Les exigences disent ce qui doit être construit. Voici l'ordre dans lequel je te recommande de le construire - chaque étape s'appuie sur la précédente :
- Le squelette - crée les dossiers css, images et fonts ainsi que le fichier index.html, génère le squelette du document dans ton éditeur avec l'abréviation Emmet
!et passe tout de suitelangà"fr". - La section head - ajoute les balises meta, le favicon, Open Graph et les polices, dans l'ordre vu dans ce module.
- Le contenu - construis des sections sémantiques avec une hiérarchie de titres continue et décris-les avec des commentaires.
- Les images - donne-leur des dimensions, ajoute
loading="lazy"sous le premier écran et des versions WebP dans<picture>. - Les styles - commence par le reset et les variables, puis passe à la typographie, à la mise en page et aux media queries.
- Le contrôle qualité - le validateur, Lighthouse et les DevTools.
- La publication - GitHub Pages ou Netlify, et pour finir un lien pour ton mentor.
La section head du projet
C'est dans la section <head> que se retrouvent la plupart des exigences. Voici à quoi peut ressembler sa version complète - dans l'ordre que tu connais grâce aux leçons sur les balises meta et sur les polices :
1<head>
2 <meta charset="UTF-8">
3 <meta name="viewport" content="width=device-width, initial-scale=1.0">
4 <title>Musée de l'Égypte antique</title>
5 <meta name="description" content="Expositions, billets et histoire des pharaons.">
6 <meta name="author" content="Ton nom">
7 <meta name="theme-color" content="#1a1a2e">
8 <link rel="icon" href="favicon.ico">
9 <meta property="og:title" content="Musée de l'Égypte antique">
10 <meta property="og:description" content="Découvre les secrets des pyramides.">
11 <meta property="og:image" content="https://ton-login.github.io/musee/og.jpg">
12 <meta property="og:url" content="https://ton-login.github.io/musee/">
13 <meta property="og:type" content="website">
14 <link rel="preconnect" href="https://fonts.googleapis.com">
15 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
16 <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap" rel="stylesheet">
17 <link rel="stylesheet" href="css/style.css">
18</head>L'encodage et le viewport sont en haut, suivis du titre et des descriptions, de l'icône, d'Open Graph avec des adresses complètes et, pour finir, des polices et de ta feuille de style. Les chemins vers l'icône et vers la feuille de style sont relatifs, ils fonctionneront donc aussi dans un sous-dossier sur GitHub Pages. Remplace les adresses og:image et og:url par les tiennes dès que tu auras publié la page.
Les vérifications avant l'envoi
Avant d'envoyer le lien, fais le tour de la page comme un chef de chantier. Colle le code dans le validateur du W3C et corrige toutes les erreurs - la page doit passer la validation sans aucune erreur. Lance Lighthouse dans une fenêtre de navigation privée et lis ses conseils. Dans le panneau Network, vérifie qu'aucun fichier ne se termine par une erreur 404 et que les images en lazy loading ne se téléchargent qu'au moment où tu fais défiler la page. Pour finir, rétrécis la fenêtre à la largeur d'un téléphone, car le responsive fait lui aussi partie des exigences.
Les faux pas les plus fréquents
Ces faux pas passent facilement inaperçus dans ton propre projet - vérifie-les avant que ton mentor ne le fasse :
lang="en"laissé par le modèle d'Emmet sur une page en français,loading="lazy"sur l'image principale du premier écran,- des chemins commençant par une barre oblique, qui se terminent par une erreur 404 sur GitHub Pages,
og:imageindiqué sous forme de chemin relatif au lieu d'une adresse complète,- l'absence de
crossoriginsur le preconnect vers fonts.gstatic.com.
Une fois le projet envoyé, tu refermeras le dernier module de l'Égypte antique. Avec cet atelier, tu peux partir vers les mondes suivants - les mêmes outils t'accompagneront en JavaScript et en React.
Pratique
Étudie l'exemple ci-dessous et crée ta propre page en t'en inspirant :
Code de cette leçon : index.html
1<!DOCTYPE html>
2<html lang="fr">
3<head>
4 <!-- Encodage et responsivité -->
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
8 <!-- Title et meta description -->
9 <title>Ancient Egypt Museum | Page d'accueil</title>
10 <meta name="description" content="Ancient Egypt Museum - expositions, billets en ligne, histoire des pharaons et des pyramides.">
11 <meta name="author" content="Mohamed">
12 <meta name="theme-color" content="#1a1a2e">
13
14 <!-- Favicon -->
15 <link rel="icon" type="image/png" sizes="32x32"
16 href="https://placehold.co/32x32/d4af37/1a1a2e?text=E">
17
18 <!-- Open Graph -->
19 <meta property="og:title" content="Ancient Egypt Museum">
20 <meta property="og:description" content="Découvre les secrets des pyramides et des pharaons. Billets en ligne.">
21 <meta property="og:image" content="https://placehold.co/1200x630/d4af37/1a1a2e?text=Egypt+Museum">
22 <meta property="og:url" content="https://egypt-museum.com">
23 <meta property="og:type" content="website">
24
25 <!-- Google Fonts -->
26 <link rel="preconnect" href="https://fonts.googleapis.com">
27 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
28 <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Lora:wght@400;700&display=swap"
29 rel="stylesheet">
30
31 <link rel="stylesheet" href="style.css">
32</head>
33<body>
34 <!-- =============================
35 HEADER - Navigation
36 ============================= -->
37 <header>
38 <div class="header-inner">
39 <h1>Ancient Egypt Museum</h1>
40 <nav aria-label="Navigation principale">
41 <ul>
42 <li><a href="#exhibitions">Expositions</a></li>
43 <li><a href="#gallery">Galerie</a></li>
44 <li><a href="#visit">Visite</a></li>
45 <li><a href="#contact">Contact</a></li>
46 </ul>
47 </nav>
48 </div>
49 </header>
50
51 <!-- =============================
52 MAIN - Contenu principal
53 ============================= -->
54 <main>
55 <!-- Section hero -->
56 <section class="hero">
57 <img src="https://placehold.co/1200x400/d4af37/1a1a2e?text=Wielka+Pyramid+in+Giza"
58 alt="Panorama des pyramides de Gizeh au coucher du soleil"
59 width="1200" height="400" loading="eager">
60 <h2>Découvre les secrets d'une civilisation antique</h2>
61 </section>
62
63 <!-- Section expositions -->
64 <section id="exhibitions">
65 <h2>Expositions actuelles</h2>
66
67 <article class="exhibition-card">
68 <img src="https://placehold.co/600x300/8b6914/f5f1e3?text=Skarby+Tutanchamona"
69 alt="Le masque d'or de Toutânkhamon"
70 width="600" height="300" loading="lazy">
71 <div class="card-content">
72 <h3>Les trésors de Toutânkhamon</h3>
73 <p>Plus de 5000 artefacts provenant du tombeau
74 du jeune pharaon.</p>
75 <a href="#visit" class="btn">Acheter un billet</a>
76 </div>
77 </article>
78
79 <article class="exhibition-card">
80 <img src="https://placehold.co/600x300/3d2914/d4af37?text=Mumie+Krolewskie"
81 alt="Exposition de momies royales"
82 width="600" height="300" loading="lazy">
83 <div class="card-content">
84 <h3>Les momies royales</h3>
85 <p>Les secrets de la momification et les momies
86 de pharaons conservées.</p>
87 <a href="#visit" class="btn">Acheter un billet</a>
88 </div>
89 </article>
90 </section>
91
92 <!-- Section informations -->
93 <section id="visit">
94 <h2>Visite</h2>
95 <div class="info-grid">
96 <div class="info-box">
97 <h3>Horaires d'ouverture</h3>
98 <p>Lun-Ven : 9h00 - 17h00</p>
99 <p>Sam-Dim : 10h00 - 18h00</p>
100 </div>
101 <div class="info-box">
102 <h3>Billets</h3>
103 <p>Plein tarif : 45 €</p>
104 <p>Tarif réduit : 25 €</p>
105 <p>Tarif famille : 100 €</p>
106 </div>
107 </div>
108 </section>
109 </main>
110
111 <!-- =============================
112 FOOTER
113 ============================= -->
114 <footer>
115 <nav aria-label="Liens du pied de page">
116 <ul>
117 <li><a href="/privacy">Politique de confidentialité</a></li>
118 <li><a href="/sitemap">Plan du site</a></li>
119 </ul>
120 </nav>
121 <p>© 2024 Ancient Egypt Museum</p>
122 </footer>
123</body>
124</html>Souviens-toi : une pyramide ne se construit pas d'un seul bloc - c'est un ordre de travail constant, du plan jusqu'au contrôle qualité, qui transforme un tas de pierres en un édifice fait pour durer des millénaires.
Tu as repéré une erreur dans cette leçon ?