Aller au contenu

Laboratoire semaine 2

Consignes

Ce laboratoire vous permet de vous familiariser avec:

  • La structure d'un projet web
  • Le squelette HTML
  • Les liens cliquables
  • Un site à plus d'une page

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

Important: Le questionnaire 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 apprendre à créer la bonne structure d'un projet web qui sera réutilisé partout en web (tous vos cours ainsi que sur le marché du travail).

Dans votre espace de travail personnel (OneDrive) :

  1. Créer un dossier intitulé laboratoire2

    ⚠️ Sans espace, sans majuscule !

  2. Dans ce nouveau dossier, créer le dossier img suivants :

    Dossiers

  3. Ajouter un fichier index.html

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

    Dossiers

  4. Télécharger les images

    On vous fourni ici des images libres de droits d'auteur, car nous n'avons pas le droit d'utiliser le contenu d'un site existant !

    ➡️ Télécharger les images

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

    Lab2

Ouvrir le dossier de projet dans VS Code.

Dans VS Code, ouvrir le dossier du projet :

Ouvrir

Ouvrir

Section <head> : métadonnées cachées

  1. Copier le squelette HTML suivant dans votre page index.html

    Remarque

    Le texte que nous allons utiliser est en anglais, c'est pourquoi l'attribut dans la balise <html> est lang="en".

    <!doctype html>

<html lang="en"> 

    <head>
        <meta charset="utf-8">
        <title>Laboratoire 2</title>
        <meta name="author" content="VOTRE NOM COMPLET ICI">
    </head>

    <body>

    </body>

</html>

    Information

    • doctype : version du HTML
    • html : la page web
    • head : métadonnées descriptives de la page (non visibles sur la page web)
    • body : contenu visible de la page web

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

    • Votre nom au bon endroit
    • La balise qui permet de fournir une description de la page (ce peut être court comme "Page index du laboratoire 2 du cours d'Interfaces Web")

    ➡️ Notes de cours sur la section <head> pour savoir comment écrire ces informations.

    ➡️ Voir la section "L'icône de favoris" et ajouter dans la section <head> le lien vers l'icône disponible dans votre dossier img de votre projet

    Résultat dans le navigateur :

    Icon

Section <body> : contenu visible

L'ordre d'écriture du HTML est très important.

Voici un extrait de la page d'accueil d'Apple :

Lab2

On lit une page web de gauche à droite et de haut en bas.

Ainsi, l'ordre des éléments de la page est le suivant :

Lab2

Nous allons reproduire le contenu de cette page, sans la mise en page.

Description des balises HTML que nous allons utiliser dans cette page :

Balise
 Description Exemple
<h1> ou <h2> Balise de titre. <h1> étant le plus important. Les balises de titre <h1> à <h6> doivent être fermées pour indiquer où se termine le titre dans la page HTML. <h1>Bienvenue sur ma page</h1>
<p> Crée un paragraphe. Le paragraphe insère automatiquement un retour de ligne avant et après le texte qu'il contient. <p> Mon paragraphe contient plusieurs lignes et doit être fermé afin d'indiquer où il se termine dans la page HTML.</p>
<br> Pour faire un retour de ligne dans un paragraphe. <p>La première ligne d'un paragraphe.<br>La ceusième ligne d'un paragraphe.</p>
<img> Permet d'insérer une image dans la page HTML.
L'attribut alt permet d'indiquer une description de l'image dans l'éventualité où cette dernière ne pourrait pas être affichée.
L'attribut src permet d'indiquer la source de l'image - donc où elle se trouve sur le disque.		 <img alt="Une image" src="img/image.png">
<a> Permet de créer un lien cliquable (aussi appelé un hyperlien).
L'attribut href permet d'indiquer la destination, c'est-à-dire à quel endroit le lien mène.
Ce qui est visible sur la page et cliquable pour l'utilisateur doit être écrit entre la balise d'ouverture et la balise de fermeture.		 <a href="https://www.microsoft.com/"> Microsoft </a>

⚠️ Écrire tout le code de la page entre l'ouverture <body> et la fermeture </body> !

Recréer le contenu à l'aide des balises connues et données plus haut.

Sur l'image plus haut, on retrouve le contenu suivant :

ordre Élément Texte affiché sur la page
1 Titre de niveau 1 <h1> iPhone
2 Paragraphe qui contient un retour de ligne entre les deux lignes de texte. <p> avec un <br> Our most powerful cameras yet.
Ultrafast chips. And USB-C.
3 Lien cliquable menant à l'adresse
https://www.apple.com/iphone/		 Learn more
4 Lien cliquable menant à l'adresse
https://www.apple.com/shop/buy-iphone		 Shop iPhone
5 Image "iphones" de votre dossier images Texte alternatif : iphones
6 Titre de niveau 2 <h2> iPad Pro
7 Paragraphe Unbelievably thin. Incredibly powerful.
8 Lien cliquable menant à l'adresse
https://www.apple.com/ipad-pro/		 Learn more
9 Lien cliquable menant à l'adresse
https://www.apple.com/shop/buy-ipad/ipad-pro		 Buy
10 Image "ipad" de votre dossier images Texte alternatif : iPad
11 Titre de niveau 2 Apple Intelligence
12 Paragraphe AI for the rest of us.
13 Paragraphe Coming in beta this fall.
14 Lien cliquable menant à l'adresse
https://www.apple.com/apple-intelligence/		 Learn more
15 Lien cliquable menant à l'adresse
https://www.apple.com/105/media/us/apple-intelligence/2024/05be55cf-0af7-4356-8420-f83e72fdfe6f/films/product/apple-intelligence-product-tpl-us-2024_16x9.m3u8		 Watch the film
16 Image "solutions" de votre dossier images Texte alternatif : Apple Intelligence - stay tuned

Validation

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

Si ce validateur ne fonctionne pas, voici une autre option interne au Cégep : https://validator.dinf.ca/#textarea

À la fin, votre page devrait avoir l'apparence suivante :

¸Lab2

Apparence

Votre page ne contient que du contenu, sans aucun élément de mise en page ou d'apparence.

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

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

    Lab2

  2. Télécharger le fichier suivant et le placer dans le dossier css de votre projet : Feuille de style à télécharger

    1. Clic droit sur le lien
    2. Option Enregistrer la cible du 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, 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"

  5. Valider que votre page web se met à jour dans le navigateur et a maintenant l'apparence suivante :

Lab2

Si votre page apparaît comme sur l'image, alors la feuille CSS s'applique bien sur votre page! 👏

Une seconde page

Nous allons voir ici un bon exemple de division du HTML (contenu uniquement) et du CSS (apparence et mise en page).

Vous allez créer une seconde page dans votre projet web.

  1. Dans VSCode, ajouter un fichier HTML dans votre projet :

    Lab2

    Nommer le nouveau fichier "html_vs_css.html".

    ⚠️ Aucun espace dans les noms de fichiers web.

    Résultat :

    Lab2

    ⚠️ Assurez-vous d'avoir le même résultat avant de poursuivre!

  2. Insérer le squelette HTML dans la nouvelle page :

    <!doctype html>

<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title>Laboratoire 2 - Page 2</title>
        <meta name="author" content="VOTRE NOM ICI">
        <link rel="icon" href="img/16x16_info.ico">
    </head>

    <body>

    </body>

</html>
    3. Inscrire votre nom comme auteur.

Lorsqu'on regarde le début de la page web de la XBox Series X, on voit les éléments suivants :

Lab2

Page source : XBox Series X

  1. Dans votre page 2, créer les éléments identifiés dans l'image (pas d'image à insérer)

    1. Paragraphe
    2. Titre de niveau 1
    3. Paragraphe

    4. Lien cliquable

      URL pour l'attribut href : https://www.microsoft.com/fr-ca/store/configure/Xbox-Series-X-2TB-Galaxy-Black-Special-Edition/8smbrt7wmfp9

    Résultat :

    Lab2

  2. Télécharger le fichier suivant et le placer dans le dossier css de votre projet : Feuille de style à télécharger

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

  3. Dans la section <head> de la page, ajouter la balise nécessaire pour lier la feuille de styles à cette page.

Résultat final :

Lab2

On sépare donc le contenu de l'apparence pour :

  • Simplifier le code
  • Faciliter les mises à jour
  • Aider au travail d'équipe et la séparation du travail

Une troisième page

Nous allons pratiquer quelques nouvelles notions.

Pour cette troisième page, aucun contenu ne vous est fourni.

Vous avez à créer une page avec le contenu de votre choix en suivant les directives données.

  1. Ajouter une 3e page HTML dans votre projet.

    Lab2

  2. Insérer le squelette HTML et modifier le nom d'auteur

  3. Trouver une recette sur Internet (biscuits, sushis, beignes, salade, peu importe)

  4. Sur votre page HTML, créer les éléments suivants :

    1. Image : Image de votre recette

      ✔️ Donnez la source src vers l'image en ligne, sans la télécharger.

      Lab2

    2. Titre de niveau 1 : nom de la recette

    3. Ligne horizontale
    4. Titre de niveau 2 : Section "Ingrédients"

    5. Liste à puces : liste des ingrédients

      Exemple simple sur MDN

    6. Ligne horizontale

    7. Titre de niveau 3 : Section "Préparation"
    8. Paragaphes (un paragraphe par étape) : Préparation de la recette

Exemple de résultat :

Lab2

  1. Dans le dossier css de votre projet, créer un nouveau fichier recette.css

    Lab2

  2. Dans le nouveau fichier, copier-coller le code suivant :

    img{
    float:left;
    margin-right: 3rem;
}

  3. Dans le HTML, ajouter le lien nécessaire vers cette feuille de style.

Résultat final :

Lab2

Notre projet web contient maintenant 3 pages.

Sur un vrai site web, nous aurions des liens de navigation pour se déplacer d'une page à l'autre.

Nous allons donc créer une navigation pour nos 3 pages.

  1. Revenir sur index.html

  2. Au début de la page, tout de suite après la balise <body>, insérer les trois liens internes :

    Notes de cours sur les liens internes

    • Accueil : mène vers la page index.html
    • XBox : mène vers la page XBox
    • Recette : mène vers votre page de Recette

  3. Copier-coller ces trois liens sur les deux autres pages HTML, au début de la page, c'est-à-dire tout de suite après la balise <body>

⚠️ Remarquez comment l'apparence des liens est différente d'une page à l'autre...

Lab2

Ceci est causé par les feuilles de style différentes.

Nous verrons comment avoir des styles communs et des styles séparés dans les prochains cours.

Validation

Valider votre code HTML et CSS dans le validateur.

➡️ https://validator.dinf.ca/#textarea

Corriger les erreurs s'il y en a.

➡️ Faites valider par le prof.

Questionnaire de révision

Ce questionnaire compte pour 2% de la session.

Vous avez une semaine pour le compléter. La date limite est dimanche le 8 septembre.

Vous pouvez attendre d'avoir eu le cours théorique 2 avant de remplir le questionnaire.

Vous pouvez vous entraider, mais 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 !