Langages de description Html & Css

Mini-Projet

Ce mini-projet est un « tutoriel » qui vous conduira à construire un site web pas à pas.
Il vous permettra de manipuler les différentes balises Html et propriétés Css abordées dans le cours et dans les exercices pour progresser.

Le dossier contenant le site réalisé sera à compresser au format .zip puis à renommer sous la forme NOM_Prenom_projet_HTML-CSS.zip, où NOM et Prenom sont correctement remplacés (pas d'accent, pas d'espace, majuscules aux emplacements signalés).
Ce dossier compressé sera à rendre via la rubrique correspondante de l'ENT du lycée.

Rappel : Logiciels indispensables

Pour concevoir des pages Html et des feuilles Css, on utilisera deux types de logiciels :

Un éditeur de texte avec coloration syntaxique

Sous Windows, nous conseillons Notepad++.

Les captures d'écran et aides seront réalisées à partir de ce logiciel car le système d'exploitation Windows pose souvent des problèmes à cause de sa manière d'encoder les caractères.

Sous Linux, nous conseillons Geany.

Un navigateur internet

Quel que soit votre système d'exploitation, nous conseillons Firefox.

Critères d'évaluation

Contenu et ergonomie du site web

  1. Le site est « portable » : il s'ouvre correctement depuis n'importe quel support, sous n'importe quel système d'exploitation.
  2. Le site comporte plusieurs pages.
  3. Chaque page comporte un en-tête rappelant le thème du site et le titre principal de la page consultée.
  4. Chaque page comporte un menu qui permet de passer de page en page, avec des noms explicites.

Codage Html des pages

  1. Distinction correcte entre les balises <head> et <body> ainsi que sur leur contenu.
  2. Les balises nécessaires (titres, paragraphes, listes, images, etc.) sont bien identifiées et utilisées.
  3. Les paragraphes sont bien distingués, il n'y a pas d'abus de sauts à la ligne.
  4. Les fichiers .html sont (globalement) valides W3C : http://validator.w3.org/#validate_by_input.

Maîtrise de l'arborescence

  1. Les fichiers sont bien organisés, regroupés dans des dossiers. La première page est clairement identifiée et accessible.
  2. Les liens du menu, permettant de passer de page en page, sont valides.
  3. Les images et illustrations s'affichent correctement.
  4. La même mise en forme (l'apparence) s'applique à toutes les pages. Seule la page d'accueil peut différer.

Mise en forme par le Css

  1. Toutes les pages du site ne font appel qu'à un unique fichier de mise en forme .css commun.
  2. Les propriétés et sélecteurs Css sont corrects du point de vue de la syntaxe (accolades, deux points, point-virgule).
  3. Le site est « agréable » à consulter. Les propriétés Css concernent d'autres éléments que la couleur ou les bordures et diffèrent de la mise en forme du site « tutoriel ».
  4. Le fichier .css est valide W3C : https://jigsaw.w3.org/css-validator/#validate_by_input.

Plan de travail