Aller au contenu

Laboratoire semaine 1

Consignes

Ce laboratoire vous permet de vous familiariser avec :

  • les outils du Cégep et du cours
  • vos premiers pas avec le HTML

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

✔️ N'hésitez pas à lever la main si vous avez besoin d'aide ou si vous avez des questions.

✔️ Si vous terminez plus tôt, il est possible de quitter la classe.

L'ordinateur

Lorsque vous êtes connectés sur un ordinateur, vous vous trouvez d'abord sur le Bureau.

Bureau

Lorsque vous utilisez le raccourcis clavier (les touches du clavier) Windows + E, vous ouvrez l'explorateur de fichiers.

File Explorer

📝 Exercice

  1. Ouvrir l'explorateur de fichiers

  2. Ouvrir ton OneDrive en cliquant sur le dossier ayant ton numéro de DA

    File Explorer

    OneDrive

    Avec ton compte du Cégep, tu as accès à de l'espace de stockage sur le cloud. C'est ton OneDrive.

    Tout ce que tu y sauvegardes est accessible de partout avec un accès Internet.

    ➡️ Voir comment y accéder de la maison

  3. Créer un nouveau dossier intitulé "Interfaces Web" (nous l'utiliserons toute la session)

    File Explorer

  4. Ouvrir le nouveau dossier (double-clic dessus)

  5. Créer un nouveau dossier intitulé Laboratoire1

  6. Ouvrir le nouveau dossier

  7. Créer un nouveau Document texte intitulé "index.txt"

    VS Code

    Dosser vs Fichier

    Un dossier est un classeur de fichiers.

    Un fichier est un document qui contient les informations à sauvegarder (texte, images, code, etc.).

  8. Ouvrir le fichier texte

    Dans le fichier texte, copier-coller le bloc suivant :

    <!doctype html>
<html>
    <head>
        <title>Test de l'index</title>
    </head>

    <body>
        <h1>Ceci est le titre qui apparaît sur la page web</h1>
        <hr> 
        <p>
            La balise hr permet de créer une ligne séparatrice sur une page web, comme on le voit entre le titre et ce paragraphe.
        </p>
        <hr> 
        <p>
            La balise p permet de créer un paragraphe avec retour de ligne avant et après le texte.
        </p>
    </body>
</html>

  9. Sauvegarder et fermer le fichier

    Pour sauvegarder :

    • Option 1 : Fichier --> Enregistrer
    • Option 2 : Ctrl + S au clavier

  10. Renommer le fichier

    À partir de l'explorateur de fichiers :

    • Clic droit sur le fichier texte
    • Option "Renommer"
    • Donner le nom "index.html"

    ⚠️ Un message s'affiche : Êtes-cous sûr de vouloir modifier l'extension du fichier ? (passer de .txt à .html)

    ✔️ Répondre oui !

  11. Tester la page web

    À partir de l'explorateur de fichiers : faire un double-clic sur le fichier index.html.

    La page saffiche dans le navigateur par défaut (Chrome).

L'outil Visual Studio Code

Bon à savoir

➡️ La page d'Introduction à VS Code explique le fonctionnement de l'outil et propose des trucs et astuces pour travailler efficacement.

Vous pourrez vous y référer si vous éprouvez des difficultés.

Exercice

📝 Exercice

  1. Ouvrir VSCode

    VSCode

  2. Utiliser le menu Fichier (ou File en anglais) pour ouvrir le dossier laboratoire1 que vous venez de créer

    VS Code

  3. Ouvrir le fichier dans VSCode et vérifiez que le code est bien visible : 

    <!doctype html>
<html>
    <head>
        <title>Test de l'index</title>
    </head>

    <body>
        <h1>Ceci est le titre qui apparaît sur la page web</h1>
        <hr> 
        <p>
            La balise hr permet de créer une ligne séparatrice sur une page web, comme on le voit entre le titre et ce paragraphe.
        </p>
        <hr> 
        <p>
            La balise p permet de créer un paragraphe avec retour de ligne avant et après le texte.
        </p>
    </body>
</html>

  4. Lancer le fichier dans le navigateur à partir de VSCode :

    1. Faire un clic droit dans la page de code HTML

    2. Choisir l'option Open with Live Server

      VS Code

      --> Ceci ouvre la page dans le navigateur par défaut.

  5. Revenir dans VSCode et créer un nouveau fichier dans le laboratoire1 et le nommer balises.html.

    new file

  6. Dans le nouveau fichier:

    1. inscrire un point d'exclamation (!)
    2. sélectionner le point d'exclamation simple dans la liste qui apparaît

    New

    ✔️ Ceci crée un squelette HTML

  7. Dans l'espace entre <body> et </body>, écris un titre qui apparaît sur la page web

    Mon premier exercice

    Revois le code de la page index pour savoir comment écrire un titre qui apparaît sur la page web.

  8. Sous le titre, ajoute un paragraphe :

    Ceci est mon tout premier paragraphe en HTML. J'apprends à utiliser les balises de base.

    Revois le code de la page index pour savoir comment écrire un paragraphe.

  9. Sous le paragraphe, teste les 5 autres niveaux de titre :

    <h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>

    Note : les niveaux de titres représentent les niveaux d'importance.

  10. Sous les titres, ajoute le commentaire suivant :

    <!-- Ceci est un commentaire : il ne s’affiche pas dans la page. On s'en sert pour garder des points de repaire ou pour se garder des notes explicatives dans le code -->

  11. Après le commentaire, ajoute une ligne séparatrice

    Revois le code de la page index pour savoir comment ajouter une ligne.

  12. Après la ligne, ajouter un paragraphe et y inscrire ton nom.

  13. Sauvegarder (sauvegarder souvent!!)

  14. Ouvrir la page dans le navigateur.

    Assurez-vous que la page montre bien tout les éléments du code - sauf le commentaire !

    Lab1

Autres ajouts

Étapes

  1. Télécharger le dossier zip suivant : contenu_lab1.zip

  2. Ouvrir le zip et copier-coller les images dans votre dossier laboratoire1.

  3. Dans le HTML, avant le titre <h1>, ajouter l'image "Website"

    <img alt="texte website stylé" src="website.png">

    Sauvegarder.

    Vous obtenez le résultat suivant sur la page :

    Lab1

    Important

    • alt : description de l'image
    • src : fichier de l'image

  4. Dans le HTML, sous votre nom :

    • ajouter 1 ligne de code d'image (vous pouvez copier-coller la précédente)
    • modifier la description et le nom de fichier pour afficher l'image des navigateurs

Le résultat de votre page devrait être :

Lab1

⚠️ Quand on développe en Web, il ne faut pas oublier de sauvegarder souvent et de valider le résultat dans le navigateur à chaque étape pour être sûr que tout est bon.

Valider le code HTML

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 la totalité de votre code HTML de la dernière page dans l'espace prévue.

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

    Quelques erreurs qui pourraient apparaître :

    Balise ouverte, mais jamais fermée OU balise à l'extérieur de la zone <body> Stray tag

    Une balise est fermée, mais une autre a été ouverte et doit être fermée avant Unclosed tag

    Une balise ne peut être ouverte à l'intérieur d'une autre - ne peut être son enfant Child unallowed

  4. Assurez-vous de corriger toutes les erreurs

  5. Faire valider par le prof :

    • La confirmation qu'il ne reste plus d'erreur
    • Le résultat final

Validation

Vous aurez à valider tous vos projets pour s'assurer qu'aucune erreur n'est encore présente.

Bon code

Vos fichiers de la maison

Pour accéder à tes fichiers de la maison, il existe 3 méthodes : Accéder à mes fichiers

Testons la méthode Omnivox :

  1. Connecte-toi à Omnivox

  2. Va dans "Mes fichiers"

  3. Assure-toi que tous tes fichiers du laboratoire sont présents

C'est fini ?

✔️ As-tu fait valider ton travail par le prof ?
✔️ As-tu vérifié que tes fichiers sont bien accessibles vis Omnivox ?

👏 Bravo, tu as terminé! 👏

Lorsque tu as terminé un laboratoire avant la fin de la période, tu peux quitter ou rester en laboratoire pour travailler sur tes autres cours.