diff --git a/web/tp/DM_Evaluation_Web.md b/web/tp/DM_Evaluation_Web.md new file mode 100644 index 0000000..43da22d --- /dev/null +++ b/web/tp/DM_Evaluation_Web.md @@ -0,0 +1,230 @@ +## 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 (`

`) et un menu de navigation `