Ajout DM évaluation HTML5 & CSS avec contraintes anti-triche
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
230
web/tp/DM_Evaluation_Web.md
Normal file
230
web/tp/DM_Evaluation_Web.md
Normal file
@@ -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** (`<h3>`) 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
|
||||
<!--
|
||||
NOM : ...............
|
||||
Prenom : ............
|
||||
Numero : ....
|
||||
Theme choisi : ..............
|
||||
A = ... (couleur de fond : ........)
|
||||
B = ... (nombre d'images : ....)
|
||||
C = ... (element supplementaire : ............)
|
||||
D = ... (fusion tableau : ...........)
|
||||
-->
|
||||
```
|
||||
|
||||
Ce commentaire doit apparaitre **juste apres** `<!DOCTYPE html>` et **avant** `<html>`.
|
||||
|
||||
---
|
||||
|
||||
### 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 :
|
||||
|
||||
- `<header>` : contient le titre du site (`<h1>`) et un menu de navigation `<nav>`
|
||||
- Le `<nav>` contient une liste `<ul>` avec des liens vers vos 2 pages
|
||||
- `<main>` : contient le contenu principal
|
||||
- `<footer>` : contient votre nom, votre classe et l'annee
|
||||
|
||||
### 2. Contenu principal (5 points)
|
||||
|
||||
Le `<main>` doit contenir :
|
||||
|
||||
- Un titre `<h2>` presentant votre sujet
|
||||
- Au moins **3 paragraphes** de texte **ecrit par vous** (pas de lorem ipsum, pas de copie de Wikipedia ou d'un autre site). Le texte doit montrer que vous connaissez votre sujet.
|
||||
- Au moins **2 mots** mis en valeur avec `<strong>` et **2 mots** avec `<em>`
|
||||
- Au moins **1 image** avec un attribut `alt` pertinent
|
||||
- Au moins **1 lien externe** vers un site en rapport avec votre theme
|
||||
|
||||
### 3. Contrainte C (2 points)
|
||||
|
||||
Vous devez integrer l'element supplementaire correspondant a votre **contrainte C** (voir tableau ci-dessus). Il peut etre place dans la page 1 ou la page 2, a vous de choisir l'emplacement le plus logique.
|
||||
|
||||
---
|
||||
|
||||
## Page 2 : page2.html — Page secondaire
|
||||
|
||||
### 4. Navigation coherente (1 point)
|
||||
|
||||
- Le **meme menu de navigation** (`<header>` + `<nav>`) que la page 1.
|
||||
- Le meme `<footer>`.
|
||||
|
||||
### 5. Un tableau de donnees (4 points)
|
||||
|
||||
La page 2 doit contenir un **tableau** (`<table>`) :
|
||||
|
||||
- Au moins **4 lignes** et **3 colonnes**
|
||||
- Une ligne d'en-tete avec `<th>`
|
||||
- Un titre de tableau avec `<caption>`
|
||||
- Du contenu **en rapport avec votre theme**
|
||||
- La fusion de cellules correspondant a votre **contrainte D** (`colspan` ou `rowspan`)
|
||||
|
||||
Un paragraphe sous le tableau doit commenter ou expliquer les donnees presentees.
|
||||
|
||||
### 6. Contenu supplementaire (1 point)
|
||||
|
||||
La page 2 doit aussi contenir au moins **1 image** et **1 paragraphe** en plus du tableau.
|
||||
|
||||
---
|
||||
|
||||
## Mise en forme CSS : style.css (3 points)
|
||||
|
||||
Votre fichier CSS unique, lie aux 2 pages avec `<link>`, doit contenir au minimum :
|
||||
|
||||
1. **Couleur de fond** du `body` correspondant a votre **contrainte A**.
|
||||
2. **Couleur de texte** definie sur le `body` (au choix, mais lisible sur votre fond).
|
||||
3. Une **`font-family`** avec au moins une police de secours (ex : `Arial, sans-serif`).
|
||||
4. Les titres `<h1>` en **`text-transform: uppercase`**.
|
||||
5. Les paragraphes en **`text-align: justify`**.
|
||||
6. Le menu `<nav>` : elements affiches **en ligne** (horizontal), liens **sans soulignement** par defaut, changement d'apparence au **survol** (`:hover`).
|
||||
7. Le **tableau** : bordures visibles (`border-collapse: collapse`), `padding` dans les cellules, en-tetes `<th>` avec une couleur de fond differente.
|
||||
8. Les **images** : `max-width: 100%` pour eviter tout debordement.
|
||||
9. Le contenu de la page doit etre **centre horizontalement** avec une largeur maximale (entre 800px et 1000px, avec `margin: auto`).
|
||||
|
||||
---
|
||||
|
||||
## Bareme recapitulatif
|
||||
|
||||
| Critere | Points |
|
||||
|---------|:------:|
|
||||
| Structure semantique (header, nav, main, footer) | /4 |
|
||||
| Contenu de la page 1 (paragraphes personnels, mise en valeur, image, lien) | /5 |
|
||||
| Element supplementaire (contrainte C) | /2 |
|
||||
| Navigation coherente sur les 2 pages | /1 |
|
||||
| Tableau (en-tete, caption, fusion, contenu) | /4 |
|
||||
| Contenu supplementaire page 2 | /1 |
|
||||
| CSS (fond, texte, typo, nav, tableau, images, centrage) | /3 |
|
||||
| **Total** | **/20** |
|
||||
|
||||
**Malus possibles :**
|
||||
|
||||
| Infraction | Malus |
|
||||
|------------|:-----:|
|
||||
| Contraintes personnalisees (A, B, C, D) non respectees | **-5** |
|
||||
| Texte copie (lorem ipsum, Wikipedia, IA...) | **-3** |
|
||||
| Pas de fichier CSS externe | **-2** |
|
||||
| Commentaire d'identification absent ou incorrect | **-2** |
|
||||
| Fichiers mal organises | **-1** |
|
||||
|
||||
---
|
||||
|
||||
## Exemples de calcul
|
||||
|
||||
**Eleve numero 7 :**
|
||||
- A = 7 mod 3 = **1** -> fond `#d6e5e3` (vert pale)
|
||||
- B = 7 mod 4 = **3** -> 6 images minimum
|
||||
- C = 7 mod 5 = **2** -> un deuxieme tableau
|
||||
- D = 7 mod 2 = **1** -> fusion verticale (`rowspan`)
|
||||
|
||||
**Eleve numero 12 :**
|
||||
- A = 12 mod 3 = **0** -> fond `#f4f1de` (beige)
|
||||
- B = 12 mod 4 = **0** -> 3 images minimum
|
||||
- C = 12 mod 5 = **2** -> un deuxieme tableau
|
||||
- D = 12 mod 2 = **0** -> fusion horizontale (`colspan`)
|
||||
|
||||
**Eleve numero 23 :**
|
||||
- A = 23 mod 3 = **2** -> fond `#e8dff5` (lavande)
|
||||
- B = 23 mod 4 = **3** -> 6 images minimum
|
||||
- C = 23 mod 5 = **3** -> un sommaire avec liens ancres
|
||||
- D = 23 mod 2 = **1** -> fusion verticale (`rowspan`)
|
||||
|
||||
---
|
||||
|
||||
## Conseils
|
||||
|
||||
- Commencez par ecrire **tout le HTML** avant de toucher au CSS.
|
||||
- Testez **regulierement** dans votre navigateur (F5 pour rafraichir).
|
||||
- Utilisez **F12** (outils de developpement) pour debugger votre CSS.
|
||||
- Verifiez vos contraintes **avant de rendre** votre travail.
|
||||
|
||||
---
|
||||
|
||||
## Licence
|
||||
|
||||
**Auteur** : Florian Mathieu
|
||||
**Licence** : [CC BY-NC-SA 4.0](http://creativecommons.org/licenses/by-nc-sa/4.0/)
|
||||
|
||||
Ce document est mis a disposition selon les termes de la Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Memes Conditions 4.0 International.
|
||||
Reference in New Issue
Block a user