Entrainement TP — enligneici

Objectifs

Structurer une page HTML sémantique (header, main, sections, footer).
Mettre en page avec variables CSS, grille responsive et media queries.
Implémenter un bouton « mode sombre » en JavaScript (classe dark + persistance).
Insérer des médias via une zone de pièces jointes et soigner l’accessibilité (attribut alt).

Accès élève : enligneici.fr/sandbox_eleve.php puis sélectionner l’activité.

Compétences visées

Produire une page web structurée et valide.
Utiliser une grille responsive et gérer la lisibilité (contrastes, tailles).
Programmer une interaction simple côté client (toggle de classe, stockage local).
Tester et corriger (console, erreurs courantes).

Pré-requis

Balises HTML de base, attribut alt.
Sélecteurs CSS, classes, variables CSS (--var).
Écouteurs d’événements JS, classList.toggle(), localStorage.

Équipement

Navigateurs récents, accès au bac à sable.
Quelques images libres ou personnelles (via pièces jointes).

Consignes élèves (atelier)

Créer la structure : <header>, <main> avec section « Héro » et section « Galerie », puis <footer>.
Ajouter un titre clair et une description (2–4 phrases) du lieu choisi.
Insérer au moins 2 images via Pièces jointes puis le bouton Insérer. Renseigner l’attribut alt.
Mettre en place la galerie responsive (2–3 colonnes selon la largeur) et utiliser des variables CSS pour les couleurs.
Programmer un bouton « Mode sombre » qui ajoute/enlève la classe dark sur la page et mémorise le choix.
Tester l’aperçu, corriger les erreurs console, vérifier la lisibilité.
Enregistrer régulièrement, puis Envoyer la copie à la fin.

Critères d’évaluation

HTML clair et sémantique ; alt images renseignés.
CSS : variables, grille responsive, lisibilité (contrastes, taille).
JS : mode sombre fonctionnel et persistant ; console propre.
Autonomie, soin et respect des consignes.

Ressources

Astuces

Commencer simple, puis améliorer l’aspect visuel.
Soigner les légendes de galerie avec <figure> et <figcaption>.
Prévoir un contraste suffisant pour le mode sombre.

Annexes (starters rapides)

Starter HTML

<header class="container">
  <h1>Carte de lieu</h1>
  <button id="toggle-dark" type="button" class="btn">Mode sombre</button>
</header>

<main class="container">
  <section class="hero">
    <h2>Mon lieu</h2>
    <p>Décris en quelques phrases ce qui rend ce lieu intéressant.</p>
    <!-- Insérer une image principale via Pièces jointes -->
  </section>

  <section>
    <h3>Galerie</h3>
    <div class="gallery">
      <!-- <figure><img src="..." alt="..."><figcaption>...</figcaption></figure> -->
    </div>
  </section>
</main>

<footer class="container">
  <small>© Votre nom — Projet scolaire</small>
</footer>

Starter CSS

:root{
  --bg:#0f1320; --fg:#e8eef7; --card:#161b22; --line:#273349;
  --accent:#4da3ff; --paper:#ffffff; --ink:#111; --gap:14px; --radius:14px;
}
:root.dark{ --paper:#0e1116; --ink:#f1f5ff; --bg:#0b0e16; --fg:#e6ecf8; --card:#121824; --line:#22304a; --accent:#7ab6ff; }

*{box-sizing:border-box} html,body{margin:0}
body{font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;background:var(--bg);color:var(--fg)}
img{max-width:100%;display:block;border-radius:10px}
.container{max-width:980px;margin:auto;padding:16px}
.btn{background:var(--accent);color:#001427;border:none;border-radius:10px;padding:8px 12px;font-weight:600;cursor:pointer}
header.container{display:flex;align-items:center;justify-content:space-between}
.hero{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:12px 0}
.gallery{display:grid;gap:var(--gap);grid-template-columns:repeat(3,1fr);margin-top:10px}
.gallery figure{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:10px}
.gallery figcaption{opacity:.9;margin-top:6px;font-size:.95rem}
footer.container{border-top:1px solid var(--line);margin-top:24px;padding-top:12px}
@media (max-width:900px){ .gallery{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .gallery{grid-template-columns:1fr} }

Starter JS

// Bascule clair/sombre + persistance
const root = document.documentElement;
const saved = localStorage.getItem('pref-theme'); if (saved === 'dark') root.classList.add('dark');
document.getElementById('toggle-dark').addEventListener('click', () => {
  root.classList.toggle('dark');
  localStorage.setItem('pref-theme', root.classList.contains('dark') ? 'dark' : 'light');
});