Laboratoire semaine 3

Consignes

Ce laboratoire vous permet de vous familiariser avec:

• Structure d'une page web
• Mise en page CSS

Vous pouvez faire ce travail en équipe de 2 si vous le souhaitez.

Important:

Ce travail doit être complété dans la période de laboratoire de 3 heures.

Barème de correction

Ce travail est corrigée en laboratoire, avant la fin de la période de laboratoire de 3 heures.

Critère	Description	Points
Structure du projet	Structure du projet respectée	1 pt
Présentation du code HTML	Code clair et bien organisé	1 pt
Présentation du code CSS	Code clair et bien organisé	1 pt
Code HTML et CSS validé par le validateur	Aucune erreur détectée par le validateur	2 pts
Présentation finale de la page	Tous les styles sont présents	2 pts
Défi de la fin	Le défi est complété correctement	1 pt

Notes de cours importantes

Dans les notes de cours de la semaine 3 :

• Liste d'attributs de style
• Trucs de base très utiles au laboratoire

Le projet

1. Créer un nouveau dossier nommé Laboratoire3 dans ton dossier Interfaces Web.

2. Télécharger le projet associé à ton groupe :

   • Groupe 3 - Lundi 8h00
   • Groupe 4 - Mercredi 12h00
   • Groupe 2 - Vendredi 8h00
   • Groupe 1 - Vendredi 13h00

3. Extraire le contenu du zip téléchargé dans ton dossier de laboratoire.

   🔐 Le mot de passe pour extraire le contenu vous sera donné au début du laboratoire.

4. Copier-coller les images de ton laboratoire 2 dans le sous-dossier images du laboratoire 3.

---

Le projet téléchargé contient le modèle du projet à compléter selon l'énoncé fourni.

Tu auras à suivre l'énoncé fourni pour :

• Copier les éléments du laboratoire 2 au bon endroit dans ce projet
• Compléter la mise en page CSS

---

Palette de couleurs

Pour trouver une palette de couleurs harmonieuse avec votre sujet :

1. Aller sur le site Beithi : https://www.beithi.com/fr/outils
2. Ouvrir l’outil nommé « Extraire les couleurs d’une image »
3. Glisser l’image principale de ton sujet dans l’outil

Ceci donne une liste de couleurs principales dans l’image.

Utiliser ces couleurs pour la mise en page demandée dans les prochaines étapes.

Présentation du code HTML

Des règles de présentation du code sont exigées dans le cours pour faciliter la lecture.

Pour ce laboratoire, assurez-vous que :

• Vous avez appliqué le formatage de document par défaut (option Format document de VSCode)
• Vous avez espacé vos blocs de code d'une ligne vide
• Vos balises sont bien fermées au bon endroit
• Vous avez une seule balise par ligne

Liste des règles et standards avec exemple

Présentation du code CSS

Assurez-vous que votre code CSS suit les standards d'écriture.

1. Faire un clic droit dans le code CSS et choisir l'option (Mettre le document en forme OU en anglais Format document)

   Ceci applique les espacements et indentations de base

2. L'ordre d'écriture doit suivre l'ordre du HTML :

   • de la première balise à la dernière
   • du plus générique au plus spécifique

Validation

Valider le code pour s'assurer de ne pas laisser d'erreur dans le HTML.

1. Valider le HTML : https://validator.w3.org/#validate_by_input

2. Valider le CSS : https://jigsaw.w3.org/css-validator/#validate_by_input

3. Copier-coller votre code dans l'espace prévue.

4. Utiliser le bouton Check pour vérifier les erreurs

5. Assurez-vous de corriger toutes les erreurs

Correction en laboratoire

⚠️ Faire corriger le travail par le professeur avant la fin de la période de laboratoire.

Si vous ne faites pas valider avant la fin du laboratoire, vous ne pourrez être noté pour le travail.

Si vous manquez de temps, il est préférable de faire noter une partie du travail que rien du tout !