Projet HTML + CSS — Correction d'exercices

Voici des propositions de solutions en mode console (via readline()). N’hésite pas à les adapter.

#1 — Structure du projet

Crée une structure avec Header (Logo+Menu), Main (2 Sections) et Footer.

Voir le corrigé
<body>
  <header>
    <h1>Mon Site</h1>
    <nav>...</nav>
  </header>
  <main>
    <section><h2>À propos</h2>...</section>
    <section><h2>Services</h2>...</section>
  </main>
  <footer>Contact</footer>
</body>

#2 — Formulaire de contact

Intègre un formulaire complet (Nom, Email, Message) dans la section contact.

Voir le corrigé
<form>
  <input type="text" placeholder="Nom" required>
  <input type="email" placeholder="Email" required>
  <textarea placeholder="Message"></textarea>
  <button>Envoyer</button>
</form>

#3 — Galerie d'images

Crée une grille d'images simple (sans CSS complexe, juste la structure).

Voir le corrigé
<div class="galerie">
  <img src="1.jpg" alt="Img 1">
  <img src="2.jpg" alt="Img 2">
  <img src="3.jpg" alt="Img 3">
</div>

#4 — Navigation interne

Ajoute des ancres pour naviguer entre les sections 'À propos' et 'Contact'.

Voir le corrigé
<nav>
  <a href="#about">À propos</a>
  <a href="#contact">Contact</a>
</nav>

<section id="about">...</section>
<section id="contact">...</section>

#5 — Intégration média

Ajoute une carte Google Maps (iframe) dans le footer.

Voir le corrigé
<footer>
  <iframe src="https://www.google.com/maps/embed?..." width="100%" height="200"></iframe>
</footer>
Besoin d'aide ?
Tuteur Virtuel
Bonjour ! Je suis votre tuteur virtuel. Comment puis-je vous aider avec ce cours aujourd'hui ?
Historique des conversations
Chargement...