Aller au contenu

Dm Evaluation Web

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 :

<!--
    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

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.