Objectif
Les élèves devront créer un site web pour un événement fictif (ex. : un festival, une conférence, une exposition). Ce site comportera plusieurs pages HTML liées entre elles, et chaque page devra inclure une feuille de style CSS commune.
Trame du projet
- Structure du projet :
- Un dossier principal pour le projet (par exemple
site-evenement/). - À l’intérieur de ce dossier, les fichiers suivants :
index.html(Page d’accueil)programme.html(Page décrivant le programme de l’événement)contact.html(Page de contact)style.css(Feuille de style commune)
- Un dossier principal pour le projet (par exemple
- Tâches à accomplir :
- Page d’accueil (
index.html) :- Créer une page d’accueil avec le nom de l’événement, une courte description et une image (par exemple, une photo représentant l’événement).
- Lier cette page aux autres pages (programme et contact) via un menu de navigation.
- Page Programme (
programme.html) :- Créer une page contenant une liste du programme de l’événement (par exemple, horaires, intervenants, activités).
- Ajouter des liens pour chaque session/activité qui mènent à des informations supplémentaires si nécessaire.
- Page Contact (
contact.html) :- Créer une page avec des informations de contact (adresse, téléphone, email).
- Ajouter un formulaire de contact simple (nom, email, message).
- Feuille de style CSS (
style.css) :- Créer une feuille de style qui sera liée à toutes les pages HTML.
- Le style doit inclure des règles pour la mise en page, la couleur de fond, les polices, la navigation, et le formulaire de contact.
- Page d’accueil (
- Instructions détaillées :
- HTML :
- Pour chaque page, assurez-vous que la structure HTML est correcte (déclaration DOCTYPE, balises
<html>,<head>,<body>). - Lier les pages HTML entre elles avec des liens internes (
<a href="programme.html">Programme</a>, etc.). - Inclure un formulaire de contact avec des champs de saisie comme
<input>,<textarea>, et un bouton de soumission. - Ajouter des images et des vidéos pertinentes à chaque page en utilisant les balises
<img>et<video>.
- Pour chaque page, assurez-vous que la structure HTML est correcte (déclaration DOCTYPE, balises
- CSS :
- Utiliser des sélecteurs pour appliquer des styles aux éléments de chaque page.
- Ajouter des règles de style pour les liens (
<a>). - Appliquer un design cohérent à travers les pages (par exemple, couleurs, typographie, espacements).
- HTML :
Exemple de structure des fichiers :
site-evenement/
│
├── index.html
├── programme.html
├── contact.html
├── style.css
└── images/
├── logo.jpg
└── evenement.jpg
Résumé :
Les élèves doivent créer les trois pages HTML (index.html, programme.html, contact.html), et les relier entre elles à l’aide de liens de navigation. Ils devront aussi inclure une feuille de style commune (style.css) et structurer chaque page selon les indications données (header, footer, sections).
