Aller au contenu

Laboratoire semaine 2

Consignes

Ce laboratoire vous permet de vous familiariser avec:

  • La structure d'un projet web
  • Des méta-données de l'en-tête
  • Mise en pratique des balises HTML vues en classe
  • Introduction au CSS

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

Important:

Partie 1 doit être complétée et validée par le professeur dans la période de laboratoire. Ceci couvre le travail prévu à la semaine 2 et compte pour 2%.

Partie 2 est une introduction au CSS. Vous pouvez le faire en-dehors des heures de laboratoire.

Barème de correction

La partie 1 de 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 Le projet respecte la structure exigée 2 pts
Présentation du code HTML Code clair et bien organisé 2 pts
Code validé par le validateur Aucune erreur détectée par le validateur 2 pts
Information de la section <head> En-tête complet et sans erreur 2 pts
Contenu Tous les éléments demandés sont présents 2 pts
Navigation fonctionnelle Les liens cliquables fonctionnent tous 2 pts

Préparation : le projet

Nous allons créer la bonne structure d'un projet web.

Cette structure sera réutilisée partout en web (vos cours ainsi que sur le marché du travail).

📝 À faire :

Dans votre espace de travail personnel (OneDrive), aller dans votre dossier Interfaces Web, puis :

  1. Créer un dossier intitulé laboratoire2

    ⚠️ Sans espace, sans majuscule ! Le web déteste les espaces, les accents et les caractères spéciaux!

  2. Dans ce nouveau dossier, créer deux nouveaux fichiers

    • index.html
    • info.html

  3. Dans laboratoire2, créer deux dossiers :

    • images
    • styles

    Vous avez donc un dossier qui contient maintenant :

    Lab2

  4. Ouvrir le dossier de projet Laboratoire2 dans VS Code.

    Fichier -> Ouvrir le dossier..

    Ouvrir

    Ouvrir

Nous sommes prêts à commencer.

Partie 1 : Le HTML

Dans la page index.html :

  1. Utiliser le raccourci ! (point d'exclamation) pour créer le squelette de la page.

  2. Changer la langue de la page de anglaise "en" à française "fr"

  3. Utiliser les notes de cours pour compléter la section <head> comme suit :

    • Modifier le titre d'onglet pour Laboratoire 2
    • Indiquer votre nom complet dans la balise d'auteur (inscrire les deux noms si vous travaillez en équipe)

  4. Copier-coller le squelette dans votre page info.html

🛠️ Dans la section <body> des deux pages HTML (le contenu des pages), ajouter les balises nécessaires pour obtenir le contenu demandé dans le document du sujet de votre laboratoire.

Le sujet

⚠️ Chaque groupe d'étudiants aura un sujet différent pour le laboratoire.

Voici le document à télécharger par groupe :

🔐 Le mot de passe pour ouvrir votre document de sujet vous sera donné au début du laboratoire.

Les balises HTML

N'oublie pas que la section nommée Balises HTML ainsi que dans Semaine 2 des notes de cours tu trouveras une description des balises HTML.

Présentation du code

Des règles de présentation du code seront 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

Validation

Nous allons valider le code de la page pour s'assurer de ne pas laisser d'erreur dans le HTML.

  1. Ouvrir le site web suivant : https://validator.w3.org/#validate_by_input

  2. Copier-coller votre code HTML de chaque page (une à la fois) dans l'espace prévue.

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

  4. Assurez-vous de corriger toutes les erreurs

Correction en laboratoire

⚠️ Faire corriger vos deux pages HTML 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.

Partie 2 : La mise en page - introduction au CSS

Cette partie vous permet d'appliquer des premiers styles de mise en page.

Cette partie ne sera pas corrigée, mais vous prépare au prochain laboratoire.

Faites-la avant le prochain laboratoire, car celui-ci se basera sur le projet complété.

Styles de base

  1. Dans le dossier styles de votre projet, créer un fichier base.css

  2. Dans le fichier base.css, faire une copie du code suivant :

    Note : ce code sera expliqué la semaine prochaine.

    body {
background-color: #f8eccf;
color: #2F3640;
font-family: Arial, sans-serif;
max-width: 900px;
margin: auto;
padding: 2rem;
border: 0.3rem solid #DDB892;
border-radius: 1rem;
}

h1 {
    color: #2E6F57;
    text-align: center;
    background-color: #FFF8EA;
    padding: 2rem;
    border: 0.3rem solid #DDB892;
    border-radius: 1rem;
}

h2 {
    color: #4E9F9D;
}

h3{
    background-color : #F2C879;
    border-radius: 1rem;
    width:fit-content;
    padding:1rem;
}

p,
ul, 
ol {
    line-height: 2;
}

ul li {
    color: #b47a40;
    list-style-type: square;
}

ol li {
    color: #b47a40;
    list-style-type: upper-roman;
}

a {
    color: #26cdb7;
    text-decoration: none;
}

img {
    border: 0.3rem solid #DDB892;
    border-radius: 1rem;
    max-width: 100%;
}

@media screen and (min-width:900px)
{
    img{
        max-width: 30%;
    }
}

  3. Dans le <head> de vos deux pages HTML, ajouter la ligne nécessaire pour lier votre fichier CSS aux pages web.

    Aide dans les notes sur la rubrique du squelette HTML

  4. Sauvegarder et valider dans le navigateur que les styles de base sont appliqués.

Styles à compléter

Pour compléter et adapter les styles de votre page à votre sujet, vous aurez besoin d'une IA générative telle que Copilot ou ChatGPT

L'IA pour un thème de couleurs

Nous allons utiliser l'IA générative pour obtenir une palette de couleurs adaptée à notre sujet.

Une IA générative (Copilot, chatGPT, Claude, etc.) est une IA qui peut créer du contenu à partir d'un instruction textuelle.

Copilot et chatGPT n'exigent pas de se créer de comtpe, je vous conseille donc d'utiliser l'un de ces derniers.

Comment écrire une demande à l'IA générative :

  • Lui donner un rôle

    Exemple : Agis en tant que [rôle attendu de l'IA]

  • Lui donner un objetif clair

    Exemple : Crée [ce dont tu as besoin] pour [comment l'information sera utilisée].

  • Lui indiquer le résultat attendu

    Exemple : Fourni l'information sous forme de [format de ce que tu as besoin] qui contient [information à présenter]

Exemple d'une demande pour ce travail :

Agis en tant que graphiste spécialisé en web. Crée une palette de couleurs saisissante et mémorable pour un site d'adoption d'animaux fantastiques. Mon animal est un phénix-lion de couleurs rouge et or. Fourni un tableau indiquant les couleurs en code hexadécimal et sur quels éléments de la page tu suggères de les appliquer.

  1. Modifiez cette requête pour obtenir une palette de couleurs adaptée à votre sujet.

  2. Au début de votre fichier CSS, insérer un commentaire pour coller une copie de votre requête formulée à l'IA.

    /*On utilise la barre oblique suivie de l'astérisque pour créer un commentaire en CSS. Ce dernier doit aussi se terminer avec l'astérisque suivi de la barre oblique*/
Modification du CSS

⚠️ En conservant le code tel que fourni, modifier uniquement les couleurs.

✔️ Suivez la palette de couleurs fournie par l'IA et modifiez les styles fournis pour créer une page adaptée à votre sujet

✔️ Assurez-vous que le tout est harmonieux et lisible, faites des ajustements au besoin

❗ Remarquez comment les images changent de taille lorsqu'on modifie la taille du navigateur... essayez de comprendre pourquoi ! 🤓

Présentation du code

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

  3. Les requêtes média TOUJOURS à la fin

Validation

Pour valider le code CSS :

  1. Ouvrir le site web suivant : https://jigsaw.w3.org/css-validator/#validate_by_input

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

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

  4. Assurez-vous de corriger toutes les erreurs