Séance 2 - Créer un mini-site HTML/CSS

1. Objectif de la séance

Durée prévue : environ 50 minutes

La séance précédente t’a permis de créer une page HTML simple. Aujourd’hui, on passe à une activité plus proche d’un vrai site : plusieurs fichiers HTML, un menu, des liens internes et un fichier CSS commun.

Tu vas apprendre à...
organiser un dossier de site web.

Tu vas créer...
3 pages : accueil, galerie, contact.

Tu vas manipuler...
les liens, les images, les classes CSS et le menu.

Tu vas rendre...
un PDF avec tes réponses et ton code.

Important : cette séance contient moins de copie et plus de création. Tu dois tester très souvent dans le navigateur.

2. Cours : comment fonctionne un mini-site ?

A. Une page web ou un site web ?

Une page web est souvent un fichier qui se termine par .html. Un site web est un ensemble de pages reliées entre elles par des liens.

Exemple : un site de 3 pages peut contenir les fichiers suivants :

mon_site/
├── index.html
├── galerie.html
├── contact.html
├── style.css
└── images/
    └── banniere.svg

index.html est généralement la page d’accueil.
galerie.html est une deuxième page du site.
contact.html est une troisième page du site.
style.css contient l’apparence commune : couleurs, marges, menu, cartes.
Le dossier images contient les images utilisées par le site.

B. Les liens internes

Un lien interne permet de passer d’une page du site à une autre. On utilise la balise <a> et l’attribut href.

<a href="galerie.html">Voir la galerie</a>

Dans cet exemple, quand on clique sur le texte, le navigateur ouvre le fichier galerie.html.

C. Le menu de navigation

Dans un mini-site, on place souvent un menu identique sur toutes les pages. Cela permet au visiteur de ne jamais être bloqué.

<nav>
  <a href="index.html">Accueil</a>
  <a href="galerie.html">Galerie</a>
  <a href="contact.html">Contact</a>
</nav>

D. Une structure plus propre

Pour organiser une page, on peut utiliser des balises qui donnent un rôle aux différentes parties :

Balise	Rôle
`<header>`	En-tête de la page : titre du site, bannière.
`<nav>`	Menu de navigation.
`<main>`	Contenu principal de la page.
`<section>`	Bloc de contenu sur un thème précis.
`<footer>`	Pied de page : auteur, date, sources.

E. Le CSS commun

Chaque page HTML peut utiliser le même fichier CSS grâce à cette ligne placée dans le <head> :

<link rel="stylesheet" href="style.css">

Une classe CSS sert à appliquer le même style à plusieurs éléments. Dans le HTML, on écrit par exemple :

<section class="carte">
  <h2>Mon titre</h2>
  <p>Mon texte.</p>
</section>

Dans le CSS, on écrit le nom de la classe avec un point :

.carte {
  background: white;
  border-radius: 12px;
  padding: 16px;
}

3. Questions de compréhension

Réponds avec des phrases courtes. Ces réponses seront ajoutées automatiquement au PDF final.

Q1. Quel est le nom habituel de la page d’accueil d’un site ?

Q2. Dans le dossier du site, à quoi sert le fichier style.css ?

Q3. Quelle balise permet de créer un lien cliquable ?

Q4. Dans <a href="galerie.html">Galerie</a>, quelle est la destination du lien ?

Q5. À quoi sert la balise <nav> ?

Q6. Si une image s’appelle banniere.svg et se trouve dans le dossier images, que doit-on écrire dans src ?

Q7. Dans le CSS, comment écrit-on le nom de la classe carte ?

Q8. Pourquoi est-il pratique d’utiliser le même fichier CSS pour plusieurs pages ?

4. Activité principale : créer ton mini-site de A à Z

Choisis un thème simple : un sport, un jeu vidéo, un animal, une ville, un métier, un film, un livre, une passion, ou une présentation du collège.

Thème choisi

Étape 1 - Créer le dossier du site

Sur ton ordinateur, crée un dossier nommé mini_site_prenom.
Dans ce dossier, crée un sous-dossier nommé images.
Place une image dans le dossier images. Tu peux utiliser une image libre de droits ou l’image fournie par le professeur.
Note bien le nom exact de ton image, avec son extension : .jpg, .png ou .svg.

Nom du fichier image utilisé

Étape 2 - Créer la page d’accueil `index.html`

Ouvre ton éditeur de texte.
Crée un nouveau fichier.
Enregistre-le dans ton dossier avec le nom exact : index.html.
Recopie le code ci-dessous, puis adapte les textes à ton thème.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Mon mini-site</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Titre de mon mini-site</h1>
    <p>Une phrase d'accueil pour présenter le thème.</p>
  </header>

  <nav>
    <a href="index.html">Accueil</a>
    <a href="galerie.html">Galerie</a>
    <a href="contact.html">Contact</a>
  </nav>

  <main>
    <section class="carte">
      <h2>Pourquoi ce thème ?</h2>
      <p>Écris ici 3 ou 4 phrases pour expliquer ton choix.</p>
    </section>

    <section class="carte">
      <h2>Trois informations importantes</h2>
      <ul>
        <li>Information 1</li>
        <li>Information 2</li>
        <li>Information 3</li>
      </ul>
    </section>
  </main>

  <footer>
    <p>Mini-site réalisé par Prénom Nom - Classe</p>
  </footer>
</body>
</html>

Après chaque modification : enregistre le fichier, puis actualise le navigateur.

Étape 3 - Tester la page

Ouvre le dossier mini_site_prenom.
Double-clique sur index.html.
La page doit s’ouvrir dans le navigateur.
Si rien ne s’affiche correctement, vérifie le nom du fichier et les balises fermantes.

Étape 4 - Créer les pages `galerie.html` et `contact.html`

Dans l’éditeur, ouvre index.html.
Utilise Enregistrer sous pour créer galerie.html.
Modifie le contenu : cette page doit présenter une image et une courte description.
Refais la même chose pour créer contact.html.
Vérifie que le menu fonctionne sur les trois pages.

Exemple de contenu à ajouter dans galerie.html :

<section class="carte">
  <h2>Ma galerie</h2>
  <img src="images/banniere.svg" alt="Image de mon thème">
  <p>Cette image représente mon thème car...</p>
</section>

Exemple de contenu à ajouter dans contact.html :

<section class="carte">
  <h2>Sources et contact</h2>
  <p>Voici les sources utilisées pour créer mon mini-site.</p>
  <ol>
    <li>Source 1</li>
    <li>Source 2</li>
  </ol>
</section>

Étape 5 - Créer le fichier `style.css`

Dans ton éditeur, crée un nouveau fichier.
Enregistre-le dans le même dossier que les pages HTML avec le nom exact : style.css.
Recopie le CSS ci-dessous.
Modifie ensuite au moins trois valeurs : couleur de fond, couleur du titre, largeur de l’image, arrondis, marges...

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f1f5f9;
  color: #1e293b;
}

header {
  background: #2563eb;
  color: white;
  text-align: center;
  padding: 30px;
}

nav {
  background: #0f172a;
  text-align: center;
  padding: 12px;
}

nav a {
  color: white;
  text-decoration: none;
  margin: 0 12px;
  font-weight: bold;
}

nav a:hover {
  color: #facc15;
}

main {
  width: 85%;
  margin: 20px auto;
}

.carte {
  background: white;
  padding: 18px;
  margin-bottom: 18px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

img {
  max-width: 100%;
  border-radius: 12px;
}

footer {
  background: #0f172a;
  color: white;
  text-align: center;
  padding: 15px;
}

5. Missions d’amélioration

Quand ton site fonctionne, choisis au moins 4 missions dans la liste.

Changer les couleurs du site en fonction du thème. Ajouter une image sur la page galerie. Ajouter une liste à puces ou une liste numérotée. Ajouter un lien externe vers une source fiable. Modifier l’apparence des liens quand la souris passe dessus. Créer une deuxième classe CSS, par exemple .important. Personnaliser le pied de page avec ton nom, ta classe et la date. Tester le menu sur les trois pages.

Explique 3 modifications CSS que tu as réalisées. Quelle difficulté as-tu rencontrée ? Comment l’as-tu corrigée ?

6. Travail à rendre en PDF sur l’ENT

Complète les champs ci-dessous, colle ton code, puis clique sur le bouton. Une fenêtre d’impression s’ouvrira : choisis Enregistrer au format PDF, puis envoie le PDF sur l’ENT.

Nom et prénom

Classe

Titre de ton mini-site En 4 ou 5 phrases, présente ton mini-site. Colle ici le code de ta page index.html. Colle ici un extrait important de galerie.html ou contact.html. Colle ici ton fichier style.css. Bilan personnel : qu’as-tu appris aujourd’hui ?

7. Espace professeur

Le corrigé est protégé par un code.

Code professeur

Corrigé rapide

Q1 : index.html.
Q2 : il contient l’apparence du site : couleurs, marges, polices, menu...
Q3 : <a>.
Q4 : galerie.html.
Q5 : elle contient le menu de navigation.
Q6 : images/banniere.svg.
Q7 : .carte.
Q8 : cela évite de recopier le style dans chaque page et permet de modifier tout le site rapidement.

Critères de réussite

Le dossier du site est bien organisé.
Les trois pages existent et s’ouvrent dans le navigateur.
Le menu fonctionne depuis chaque page.
Le fichier CSS est relié et modifie réellement l’apparence.
L’élève a personnalisé le contenu et pas seulement recopié.