Projet - Consignes#

But: Créer un site web sur une personnalité, un livre ou un hobby / une passion.

Le site doit être composé de:

  • Une page contenant plusieurs sections accessibles depuis un menu (index.html).

  • Un fichier CSS (style.css).

Marche à suivre#

Le document Word et les fichiers de votre site doivent toujours être sauvegardés dans le dossier partagé sur OneDrive nommé PRENOM projet html.

Avant la création du site#

  1. Définissez les différents parties de votre sujet que vous allez aborder.

  2. Complétez, si nécessaire, les sources déjà trouvées (au minimum 5).

  3. Lisez les sources et faites des résumés dans le document Word.

  4. Réfléchissez à la structure et au design du site:

    • Quel est le public cible?

    • Quelles seront les différentes sections?

    • Quel style aura votre site?

Préparation de l'environnement de travail#

Cette partie sera faite pas à pas ensemble en classe.

  1. Sur OneDrive, créez un dossier nommé classe-prenom-projet-web.

  2. Installez VSCode en suivant les instustructions.

  3. Ouvrez Visual Studio Code.

  4. Sur la page de bienvenue, sélectionnez Ouvrir un dossier... ou cliquez sur Fichier -> Ouvrir le dossier... afin d'ouvrir le dossier du projet créé précédemment.

  5. Dans le dossier classe-prenom-projet-web, créez:
    - un fichier index.html
    - un fichier style.css
    - un dossier images

Pour visualiser votre travail, ouvrez le fichier index.html.

Début avec le site Web#

  1. Commencez par la page de contenu (index.html) sans vous souciez du CSS.

  2. Séparez le contenu qui se trouvera dans index.html de la mise en page et du style qui se trouvera dans style.css.

Conseils#

  1. Toutes les images de votre site doivent être importées dans le dossier images.

  2. Soignez l'indentation des fichiers pour faciliter la lecture.

  3. Commentez vos fichiers HTML avec <!-- --> ou vos fichiers CSS avec /** **/.

  4. Notez toutes les références (sites visités et images téléchargées) au fur et à mesure.

  5. Soignez la grammaire et l'orthographe.

  6. Consultez régulièrement la grille d'évaluation.

Sources#

Les sources doivent être indiquées dans la section Références, dernière section de votre menu et avoir la même présentation que les exemples ci-dessous.

Exemples#

Livres:

NAVARRO, Morgane, PATINO, Bruno. 9 secondes, la civilisation du poisson rouge. Marcinelle : Dupuis, 2026.

Documents web:

BLANK, Caroline. "HTML et CSS", 2026. Consulté le 14 février 2026. https://informatique.t-doc.org/1re/html-css/index.html.

Vidéos:

TAIEB, John. Comment fonctionne un site web? Youtube, 2016. https://www.youtube.com/watch?v=C4nWUvFBMX0

Images:

https://new.cscfr.ch/index.php/fr/notre-college/nos-batiments

Règlement concernant l'utilisation de l'intelligence artificielle et du Web#

  1. Il est interdit d'utiliser l'IA pour générer du code HTML, CSS et JavaScript.

  2. Il est autorisé de rechercher sur le Web des exemples pour "styliser" votre page, mais la source doit être explicitement mentionnée en commentaire dans le fichier index.html ou style.css.

  3. Il est autorisé d'utiliser l'IA pour résumé du contenu, mais celui-ci doit être mentionné avec la balise [IA-RES].

  4. Il est autorisé d'utiliser l'IA pour générer du contenu, mais celui-ci doit être mentionné avec la balise [IA-GEN].

  5. Il est autorisé d'utiliser l'IA pour reformuler et/ou corriger un texte que vous avez rédigé, mais celui-ci doit être mentionné avec la balise [IA-PARA].

Dans les balises [IA-...], remplacez "IA" par l'outil d'intelligence artificielle utilisé, par exemple [Copilot-...] ou [ChatGPT-...].

Toutes les parties qui ne respecterons pas le règlement ci-dessus seront ignorées lors de l'évaluation du projet.

Rendu du projet#

Le projet est à rendre pour le vendredi 11 décembre à 15h45.

Le rendu doit se faire de la manière suivante:

  1. Sélectionnez votre dossier de projet classe-prenom-projet-web qui se trouve sur OneDrive.

  2. Générez un fichier compressé (.zip):
    - faites un clic droit sur le dossier
    - choisissez envoyer vers/Dossier compressé
    - vérifiez que la classe et le prénom sont notés dans le nom du fichier .zip

  3. Envoyez le fichier via mail (outlook).