Aller au contenu principal

Création d'un site Web

🎯 Objectif​

Ce projet a pour objectif la création d'un site web par l'utilisation des langages HTML et CSS. Des contraintes techniques seront à respecter mais toute liberté est donnée quant au sujet abordé par le site (dans les limites imposées par la legislation française). Vous serez évalués sur le respect des contraintes techniques et votre maîtrise des langages HTML et CSS.

Attention

Il s'agit d'un travail personnel, ce projet est donc à réaliser individuellement.

📄 1. Pages imposées​

Votre site web devra contenir au minimum 3 pages dont obligatoirement les deux pages suivantes :

Page d'accueil​

C'est la page principale d'un site web. Son fichier doit être nommé index.html

Page « À propos »​

C'est une page dédiée à la présentation de l'auteur du site (vous), par exemple :

  • Nom, prénom
  • Une photo (vous-même ou un avatar)
  • Votre classe
  • Vos spécialités
  • Votre souhait d'études supérieures et/ou de métier
  • Vos centres d'intérêt
  • ...

Cette page contiendra également un court résumé du sujet traité par votre site. Son fichier doit être nommé a-propos.html

📁 2. Organisation des fichiers​

L'arborescence des fichiers de votre site devra respecter l'organisation suivante :

nom_prenom_siteweb
├── css
│   └── style.css
├── images
│   ├── image1.jpg
│   ├── image2.jpg
│   └── ...
├── index.html
└── a-propos.html

🏷️ 3. Éléments HTML et propriétés CSS obligatoires​

Vous êtes libres d'utiliser tous les éléments et propriétés CSS qui vous sembleront nécessaires. Cependant, vous devrez obligatoirement faire usage des éléments et propriétés listés ci-après.

Éléments HTML​

ÉlémentBalisesCommentaire
Titre niveau 1<h1></h1>Un seul par page.
Présent sur toutes les pages
Titre niveau 2 (sous-titre)<h2></h2>
Paragraphe<p></p>
Fort<strong></strong>
Emphase<em></em>
Image<img src="" alt="" />Ne pas oublier l'attribut alt.
Pas d'images externes. Toutes les images doivent être enregistrées dans le répertoire images
Lien hypertexte<a href="url"></a>Penser à la navigation entre les pages.
Vous devez avoir au moins un lien externe.
Liste à puces (ou numérotée)<ul><li></li></ul>
<ol><li></li></ol>
Tableau<table></table>
Titre<title></title>Présent sur toutes les pages
Métadonnée description<meta name="description" content="" />Présent sur toutes les pages
Liens vers ressource CSS<link rel="stylesheet" href="" />Présent sur toutes les pages

Propriétés CSS​

Style / SélecteurPropriété CSSCommentaire
Couleur du textecolor
Couleur du fondbackground
Alignement du textetext-alignPratique pour centrer des images par exemple
LargeurwidthUsage facultatif mais pratique pour redimensionner les images
Sélecteur de balise-Exemple : h1 { ... }
Sélecteur de classe-Exemple : .ma-classe { ... } (ne pas oublier le .)

☑️️ 4. Validation du code​

Le code HTML de chaque page Web doit être indenté de façon à ce qu'on puisse bien identifier l'ouverture et la fermeture des balises.

Le code HTML devra être vérifié en chargeant chacune de vos pages sur le site W3C Markup Validation Service. Il ne devra comporter aucune erreur.

Le code CSS devra également être vérifié en le chargeant sur un autre site W3C CSS Validation Service.

📦 5. Rendu du projet​

Vous déposerez dans l'ENT, selon la date indiquée par votre enseignant, une archive ZIP de votre dossier contenant l'ensemble des fichiers du site. Pour rappel, le dossier à compresser sera nommé nom_prenom_siteweb. L'archive zip sera nommée nom_prenom_siteweb.zip.

📚 6. Ressources​