Aller au contenu

Laboratoire semaine 4

Consignes

Ce laboratoire vous permet de vous familiariser avec:

  • Structurer une page HTML.
  • Appliquer une image de fond.
  • Appliquer des couleurs de fond semi transparentes.
  • Centrer un bloc horizontalement et verticalement.
  • Organiser des éléments avec Flexbox.
  • Modifier l'apparence d'un lien au survol.
  • Créer un menu de navigation sticky.

Vous pouvez faire ce travail en équipe de 2 si vous le souhaitez. Inscrivez le nom des deux coéquipiers dans la balise d'auteur dans ce cas.

Important:

Faire corriger ce que vous avez réussi à faire pendant le laboratoire.

S'il n'y a pas eu correction en laboratoire avant de quitter, aucune remise ne sera acceptée et la note de 0 sera attribuée pour la totalité du travail.

Mise en situation

Vous avez reçu la maquette d'une page Web qui doit être intégrée dans un site fonctionnel.

Votre rôle est de transformer cette maquette en une page Web en utilisant HTML et CSS.

Vous disposez d'une partie du code de départ. Toutefois, plusieurs éléments devront être ajoutés ou complétés par vous.

Le projet

⚠ Le projet téléchargé contient :

  • une feuille HTML (.html)
  • une feuille CSS (.css)
  • des images (.png ou .jpg)
  • une police de caractères (.ttf)
  • Un fichier qui illustre la page à produire (.docx)

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

  2. Extraire le contenu du zip téléchargé dans ton espace de travail.

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

  3. Compléter le <head>

    HEAD

    Compléter la section <head> du HTML pour ajouter :

    • Auteur
    • Lien vers feuille de styles

Procédure

  1. Utiliser l'énoncé pour compléter le code et créer la page demandée
  2. Faire corriger ce que vous avez complété avant la fin du laboratoire
  3. Compléter et remettre sur LÉA avant le prochain laboratoire (date limite indéquée sur LÉA)

Correction

⚠️ Faire corriger avant la fin de la période de laboratoire.

S'il n'y a pas eu correction avant de quitter, aucune remise ne sera acceptée et la note de 0 sera attribuée.

Barème

Critère Description Points
Correction en classe 1 point par bloc complété 5 pts
Remise du projet Tout est complété 1 pt
Présentation du code remis Code clair et bien organisé 1 pt
Code remis validé Aucune erreur détectée par le validateur 1 pt

Présentation du code

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

Remise sur LÉA

La remise se fait sur LÉA à l'aide d'un fichier ZIP.

Voici comment faire une remise :

  1. Compresser votre dossier principal de projet avec tout son contenu :

    Remise

    ❗️ Validez que votre fichier ZIP contient tout le contenu de votre dossier avec :

    • Pages HTML
    • dossier d'images
    • dossier de styles

  2. Faire la remise sur LÉA :

    1. Se connecter sur Omnivox

    2. Aller dans LÉA

      Remise

    3. Trouver le cours d'Interfaces Web

    4. Cliquer sur Travaux et remises

      Remise

    5. Cliquer sur le travail à remettre - Laboratoire 4

    6. Effectuer la remise du travail

✅ Lorsque la page est rafraîchie, un crochet vert apparaîtra à côté du travail pour indiquer que la remise a bien fonctionnée.

ATTENTION

Toujours garder une copie de votre travail au cas où la remise n'aurait pas bien fonctionné!