Aller au contenu

Laboratoire semaine 2

Consignes

Ce laboratoire vous permet de vous familiariser avec:

  • La structure d'un projet web
  • Le squelette HTML et les méta-données
  • Mise en pratique des balises HTML telles que : Titres, paragraphes, listes, images, liens cliquables
  • Un site à plus d'une page

Durée: 3h, finir l'énoncé avant la prochaine période de laboratoire

⚠️ Important: Le questionnaire à la fin de ce laboratoire compte pour 2% de la session. Prenez votre temps car vous avez un seul essai.

Structure d'un projet web

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, 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 et recette.html

    1. Nouveau -> Document texte
    2. Renommer en changeant le nom complet pour index.html et recette.html

  3. Dans laboratoire2, créer le dossier img suivant :

    Dossiers

  4. Télécharger les images

    On vous fourni ici des images libres de droits d'auteur.

    ➡️ Télécharger les images

    Extraire les images et les copier dans le dossier img de votre projet web laboratoire2.

    Lab2

  5. Ouvrir le dossier de projet dans VS Code.

    Fichier -> Ouvrir le dossier..

    Ouvrir

    Ouvrir

  6. Assurez-vous que votre projet contient tout le contenu créé

    Projet

Le HTML

Nous allons débuter par l'écriture du HTML dans nos deux pages.

Ceci inclut :

  • l'ajout des informations de la page à inscrire dans le <head>
  • l'ajout de contenu de page à inscrire dans le <body>

Page index.html

  1. Dans index.html coller le squelette HTML suivant 

    <!doctype html>

<html lang="fr"> 

    <head>
        <meta charset="utf-8">
    </head>

    <body>

    </body>

</html>

    Information

    • doctype : version du HTML que le navigateur doit utiliser
    • html : balise de la page web
    • head : métadonnées descriptives de la page (non visibles sur la page web)
    • charset="utf-8" : demande au navigateur d'utiliser les caractères latins pour l'affichage
    • body : contenu visible de la page web

  2. À l'aide des notes de cours, compléter la section <head> pour ajouter :

    • Votre nom d'auteur
    • Le titre de la page qui apparaîtra sur l'onglet du navigateur
    • Une description de la page (ce peut être court comme "Page index du laboratoire 2")
    • Un icône de favoris qui apparaîtra sur l'onglet du navigateur (l'icône se trouve dans les images téléchargées et se nomme 16x16_info.ico)

    Résultat dans le navigateur :

    Icon

    Sauvegarder

    Il faut sauvegarder les modifications si on veut voir les résultats visibles dans le navigateur.

    Le raccourci au clavier est "CTRL + S".

  3. Validez votre code régulièrement à l'aide du validateur pour corriger les erreurs au fur et à mesure...

    Validateur de HTML

Passons à la section <body>.

  1. Créer deux liens cliquables internes pour la navigation sur le site.

    ➡️ Aide sur les liens cliquables

    ➡️ Résultat :

    Liens

  2. Après les deux liens, utiliser la bonne balise pour ajouter une ligne séparatrice horizontale après les liens cliquables (revoir le laboratoire 1 au besoin)

  3. Après la ligne séparatrice, utiliser la balise d'image pour faire afficher l'image nommée heading.jpg

    ⚠️ ATTENTION !!!

    L'image se situe dans le sous-dossier img de votre laboratoire2.

    On doit donc dire à la page HTML d'aller dans ce dossier pour trouver l'image.

    Le chemin à indiquer dans src est donc "img/heading.jpg" .

    ➡️ Aide sur les images

  4. Ensuite, utiliser la balise de titre de niveau 1 pour afficher le titre :

    Aux meilleures recettes

  5. Sauvegarder et vérifier le contenu de votre page.

    Vous devriez déjà avoir les éléments suivants sur votre page :

    lab2

Pour le reste de la page, voici une image qui indique les éléments qui la composent.

Utiliser les bonnes balises HTML pour créer les éléments.

Cliquer sur l'image pour en avoir une version plus grande

lab2

Validation

⚠️ Valider le code HTML avec le validateur : https://validator.w3.org/#validate_by_input

Corriger les erreurs s'il y en a !

Page recette.html

Dans VSCode, changer de fichier pour recette.html.

  1. Copier-coller le code de la page index dans la page recette.

  2. Sur la page recette, supprimer tout le code qui se trouve entre <body> et </body>.

  3. Le contenu de la page recette est le suivant :

    ➡️ Textes à copier-coller

    ➡️ Image de la page complète

    Étapes

    Utiliser les bonnes balises pour afficher sur la page les éléments suivants :

    1. Les mêmes deux liens internes de navigation que la page index
    2. Une ligne séparatrice

    3. Une image qui est sur le web... dont la source (src) est "https://images.ricardocuisine.com/services/recipes/496x670_9693.jpg"

      ⚠️ NE PAS TÉLÉCHARGER L'IMAGE!

      Aide sur les images

    4. Titre de niveau 1 : Biscuits au thé matcha

    5. Titre de niveau 2 : Ingrédients
    6. Une liste à puces pour la liste des ingrédients (Page d'aide sur les listes)
    7. Un titre de niveau 2 : Préparation
    8. Une liste numérotée pour les étapes de préparation
    9. Un paragraphe pour la note
    10. Une ligne séparatrice
    11. Un lien externe vers la page web de la recette originale : "https://www.ricardocuisine.com/recettes/9693-biscuits-au-the-matcha"
Validation

⚠️ Valider le code HTML avec le validateur : https://validator.w3.org/#validate_by_input

Corriger les erreurs s'il y en a !

L'apparence des pages

Vos pages ne contiennent que du contenu, sans mise en page.

Nous allons améliorer légèrement cela.

  1. Dans votre dossier de projet, ajouter un nouveau dossier nommé css

    Lab2

  2. Télécharger les fichiers suivants et les placer dans le dossier css de votre projet :

    Feuille de styles à télécharger pour index.html

    Feuille de styles à télécharger pour recette.html

    Comment faire :

    1. Clic droit sur le lien
    2. Option Enregistrer le lien sous...
    3. Sauvegarder dans le dossier css de votre projet

  3. Revenir dans votre projet sous VS Code

  4. Dans la section <head> de la page index.html :

    1. ajouter la ligne HTML nécessaire pour faire le lien etre le HTML et le CSS.

      ➡️ Notes de cours, section "3- Lien vers la feuille de style"

    2. Le fichier css pour la page index se nomme styles_index.css

  5. Valider que votre page web a maintenant l'apparence suivante :

    Lab2

  6. Dans la section <head> de la page recette.html :

    1. ajouter la ligne HTML nécessaire pour faire le lien etre le HTML et le CSS.

    2. Le fichier css pour la page recette se nomme styles_recette.css

  7. Valider que votre page web a maintenant l'apparence suivante :

    Lab2

Validation

Valider votre code HTML des deux pages une dernière fois à l'aide du validateur .

➡️ https://validator.w3.org/#validate_by_input

Corriger les erreurs s'il y en a.

➡️ Faites valider la version finale par le prof.

Questionnaire de révision

Ce questionnaire compte pour 2% de la session.

Vous avez presque 2 semaines pour le compléter. La date limite est vendredi le 12 septembre 2025 à 23h00.

Vous avez droit à tout (notes de cours, internet, un ami, etc.) pour y répondre.

Chaque étudiant doit le compléter à l'aide de son compte pour avoir une note.

➡️ Compléter le questionnaire de la semaine 2

Rappel

Pour se connecter :

Utilisateur : #DA@cegeplevis.ca

Mot de passe : votre mot de passe Omnivox

Terminé!

👏 Bravo! Vous avez terminé le deuxième laboratoire !