## Evaluation HTML5 & CSS
**Specialite NSI - Premiere**
À rendre pour le mardi 10 Mars 2026.
---
## Consignes generales
- Ce DM est **individuel**. Toute copie entre eleves sera sanctionnée par un 0.
- Vous devez rendre un **dossier compresse (.zip)** contenant tous vos fichiers (HTML, CSS, images).
- Votre site doit fonctionner en local (double-clic sur index.html).
- **Pas de JavaScript**. Uniquement HTML et CSS.
- Votre CSS doit etre dans un **fichier externe** (`style.css`).
---
## Sujet libre avec contraintes personnalisees
Vous devez realiser un **mini-site de 2 pages** sur le **theme de votre choix** (film, serie, sport, jeu video, artiste, science, cuisine, voyage...).
Cependant, chaque eleve a des **contraintes techniques uniques** determinees par son **numero dans la liste de classe**. Le non-respect de ces contraintes entraine un **malus de 5 points**. Et j'insiste là dessus.
---
### Etape 1 : Calculez vos contraintes
Prenez votre **numero dans la liste de classe** et calculez :
**A = reste de la division de votre numero par 3**
| A | Couleur de fond de votre `body` |
|:-:|--------------------------------|
| 0 | `#f4f1de` (beige) |
| 1 | `#d6e5e3` (vert pale) |
| 2 | `#e8dff5` (lavande) |
**B = reste de la division de votre numero par 4**
| B | Nombre minimum d'images sur l'ensemble du site |
|:-:|------------------------------------------------|
| 0 | 3 images |
| 1 | 4 images |
| 2 | 5 images |
| 3 | 6 images |
**C = reste de la division de votre numero par 5**
| C | Element obligatoire supplementaire |
|:-:|-----------------------------------|
| 0 | Une liste **ordonnee** de minimum 5 elements |
| 1 | Une liste **non ordonnee** de minimum 5 elements |
| 2 | Un **deuxieme tableau** (dans la page de votre choix, au moins 3 lignes et 2 colonnes) |
| 3 | Un **lien ancre** : un sommaire cliquable en haut de page qui renvoie vers les sections de la page |
| 4 | Un **troisieme niveau de titre** (`
`) utilise au moins 3 fois dans le site |
**D = reste de la division de votre numero par 2**
| D | Contrainte sur le tableau principal |
|:-:|-------------------------------------|
| 0 | Le tableau doit contenir une fusion **horizontale** (`colspan`) |
| 1 | Le tableau doit contenir une fusion **verticale** (`rowspan`) |
---
### Etape 2 : Fiche d'identite
**En tout premier dans votre fichier `index.html`, ajoutez ce commentaire HTML :**
```html
```
Ce commentaire doit apparaitre **juste apres** `` et **avant** ``.
---
### Structure des fichiers attendue
```
DM_NOM_Prenom/
index.html
page2.html
style.css
images/
(vos images)
```
---
## Page 1 : index.html — Page d'accueil
### 1. Structure semantique (4 points)
Votre page doit utiliser les balises semantiques HTML5 :
- `` : contient le titre du site (`