(S5) Mission 1 - Site Web HTML

Votre mission

Votre objectif

Développer le site Web du festival musical de votre choix en utilisant que du HTML, sans CSS ni JavaScript.

Vous travaillez pour un important festival de musique (celui de votre choix!) et compte tenu de la situation actuelle, le site qui était planifié ne peut être utilisé. On doit revenir à une version en HTML simple du site prévu.

On vous mandate donc de développer, individuellement, le site web du festival en n’utilisant que du HTML!

Détail

Structure de dossiers

Créez un dossier nommé TP1_1234567, dans lequel vous remplacez 1234567 par votre numéro de DA.

Créez un dossier nommé images à l'intérieur du dossier TP1_1234567, dans lequel vous placerez toutes vos images. Ne placez que les images utiles à vos pages web.

Votre structure devrait ressembler à celle-ci:

TP1_1234567/
├── index.html
├── ... autres pages HTML
└── images/
    ├── image1.png
    ├── image2.jpg
    └── ...

Structure du site

1. Vous devez inclure une barre de navigation contenant:
   • Un lien vers votre page principale (la page index). Cette balise <a> devrait inclure une image (votre logo)
   • Des liens vers vos autres pages
   • Vous pouvez créer votre barre de navigation dans un des fichiers, et ensuite la copier/coller dans les autres fichiers
2. Vous devez inclure un pied de page (footer) à chaque fin de page incluant:
   • Votre nom
   • Une façon de vous contacter via votre adresse courriel du Cégep
   • Un copyright © de votre festival fictif
   • Un lien Retour en haut permettant de revenir au haut de la page
3. Vous devez utiliser une gamme de balises différentes dans vos pages, et non seulement des <br> et des <p> par exemple
   • Organisez votre contenu avec les balises les plus courantes vues en classe : h1, p, strong, ul, a, img, etc.
   • Vous pouvez également utiliser d'autres balises, même si elles n'ont pas été vues en classe, mais n'utilisez pas de CSS ni de JavaScript
4. Vous devez utiliser les balises de structure autant que possible: header, nav, section, article, etc.
5. Le texte inclus dans vos pages ne doit pas être de simples copier-coller du texte trouvé sur d'autres sites web.
   • Le texte doit être original
   • L'utilisation d'une intelligence artificielle comme ChatGPT n'est pas considérée comme du texte ou code original.
6. Chaque page doit contenir un titre principal h1 et une balise title unique

attention

Il ne doit pas y avoir de CSS, de Bootstrap ou de JavaScript intégrés au HTML, seulement du HTML.

Détail des pages

Vous devrez développer les pages suivantes:

• 🏠 Page d'accueil et présentation du festival
• 📆 Page pour la programmation (l'horaire)
• 🎤 Page pour la présentation des artistes
• 🎫 Page pour la billetterie
• ℹ️ Page d'informations générales

🏠 Page d'accueil index.html

Créez une page index.html qui constituera votre page d'accueil.

1. La page doit contenir un titre principal avec le nom du festival
2. Une image représentant l'événement doit être présente avec le slogan de l'événement (figure)
3. Insérez une description de l'événement. Utilisez une description sommaire, les pages subséquentes contiendront du contenu plus détaillé.
4. Affichez les dates du festival sur 3 jours (inventez des dates. IMPORTANT: le festival est sur 3 jours)
5. Affichez le lieu (peut être fictif ou un vrai lieu)

📆 Page pour la programmation (horaire)

Créez un fichier .html spécifiquement pour cette page.

1. Le festival comporte deux scènes et est étalé sur 3 jours et comporte au moins 6 artistes. Pour chaque jour et chaque scène, affichez l'horaire sous forme de tableau.
   • Heure (ex.: 19h00)
   • Artiste (ex.: Metallica)
   • Durée (ex.: 90 min)
2. Vous devez ajouter une table des matières au sommet de la page qui utilise les ancres (liens #) pour naviguer vers chaque journée individuellement

🎤 Page pour les artistes

Créez un fichier .html spécifiquement pour cette page sur laquelle vous affichez les informations sur au moins 6 artistes.

1. Pour chaque artiste, vous devez afficher:
   • Le nom de l'artiste ou du groupe
   • Une image
   • Une description de l'artiste ou du groupe
   • Membres du groupe
   • Le genre de musique
2. Vous devez ajouter une table des matières au sommet de la page qui utilise les ancres (liens #) pour naviguer vers chaque artiste individuellement
3. La page doit inclure au moins une Video YouTube intégrée (iframe) pour un des artistes (il peut y en avoir plus)

🎫 Page pour la billetterie

Créez un fichier .html spécifiquement pour cette page sur laquelle vous afficherez les prix et un formulaire de "commande de billets".

1. Affichez sous forme de tableau les prix (vous pouvez inventer des prix) pour les passes
   • Passe un jour
   • Passe deux jours
   • Passe trois jours
   • Passe VIP
2. Incluez un formulaire permettant de "commander" des billets. Évidemment, le formulaire ne fera pas d'action en tant que telle. Le formulaire doit contenir les champs suivants:
   • Prénom
   • Nom
   • Adresse courriel
   • Nombre de billets
   • Une sélection avec boutons radio pour choisir entre les différentes passes (1 jour, 2 jours, etc.)
   • Un champ texte multiligne pour entrer "demandes spéciales ou commentaires"
   • Une case à cocher "Je ne suis pas un robot"
   • Un bouton pour soumettre le formulaire, bien qu'aucune action réelle ne soit associée au formulaire.

ℹ️ Page informations générales

Créez un fichier .html spécifiquement pour cette page sur laquelle vous afficherez des informations générales sur le festival.

La page doit comprendre:

1. Une description du festival
2. Le lieu (ex.: Parc Jean-Drapeau)
3. Une carte Google Maps du lieu intégrée à la page (iframe) (vous pouvez prendre n'importe quel grand parc par exemple pour trouver le lieu sur Google Maps)
4. Informations de contact des organisateurs
   • Courriel (votre courriel du cégep)
   • Téléphone (fictif)
5. Une section FAQ (questions fréquentes) utilisant details/summary comprenant au moins 4 questions/réponses.
   • Vous pouvez inventer des questions / réponses (ex.: comment s'y rendre, heure d'ouverture du site, etc.)

Modalités de remise

• Remis par Léa
• Remis avant le 25 septembre 2025 23:59
• Faites une archive Zip de votre répertoire TP1_1234567 contenant tous les fichiers et déposez-le sur Léa.

Grille d'évaluation

Critère	Points
Page d'accueil	15%
Page de programmation (horaire)	15%
Page des artistes	15%
Page de la billetterie	15%
Page informations générales	10%
Barre de navigation	10%
Pied de page	5%
Utilisation de balises appropriées et diversifiées	10%
Qualité générale du site, de sa structure et du HTML	5%