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¶

Ouvrir l'explorateur de fichiers
Ouvrir ton OneDrive en cliquant sur le dossier ayant ton numéro de DA

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
Créer un nouveau dossier intitulé "Interfaces Web" (nous l'utiliserons toute la session)
Ouvrir le nouveau dossier (double-clic dessus)
Créer un nouveau dossier intitulé Laboratoire1
Ouvrir le nouveau dossier
Créer un nouveau Document texte intitulé "index.txt"

Dosser vs Fichier

Un dossier est un classeur de fichiers.

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

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>
    </body>
</html>

Sauvegarder et fermer le fichier

Pour sauvegarder :
- Option 1 : Fichier --> Enregistrer
- Option 2 : Ctrl + S au clavier
Ouvrir Omnivox et vous connecter

Lien : https://cegeplevis.omnivox.ca/intr/
Ouvrir Mes fichiers pour accéder à votre OneDrive en ligne

Validez que vos dossiers et fichier index.txt sont bien visibles dans votre OneDrive en ligne.

Bon à savoir

Vous pouvez accéder à votre OneDrive de chez vous de cette manière !

Ensuite, il suffit de télécharger les fichiers à travailler, puis de les redéposer dans votre OneDrive par la suite.

Au Cégep, on ne travaille pas en ligne, mais dans l'explorateur de fichiers qui a un lien direct vers votre espace de stockage.

L'outil Visual Studio Code¶

IMPORTANT

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

Ouvrir VSCode
Utiliser le menu Fichier (ou File en anglais) pour ouvrir le dossier laboratoire1 que vous venez de créer
Renommer le fichier texte pour qu'il devienne une page HTML (une page web)

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>
    </body>
</html>

Lancer le fichier dans le navigateur :
1. Faire un clic droit dans la page de code HTML
2. Choisir l'option Open with Live Server
  
  --> Ceci ouvre la page dans le navigateur par défaut.
  
  Vous y verrez le titre, une ligne et le paragraphe.
  
  Vous avez une première page web !

Revenir dans Visual Studio Code et modifier le code.

Comparez votre code à celui-ci et ajoutez ce qui est nouveau :

    <!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 d'ajouter des paragraphes dans la page HTML. 
            </p>
        </body>
    </html>

Sauvegarder.
Revenez dans votre navigateur sur la page déjà ouverte.

Remarquez comment la page ouverte avec Live Server s'est mise à jour automatiquement. C'est à cela que sert Live Server.
Revenir dans VSCode et créer un nouveau fichier dans le laboratoire1 et le nommer balises.html.

Dans le nouveau fichier, copie-colle le code suivant (il sera expliqué en classe) :

<!doctype html>

<html>
    <head>
        <title>Mon premier exercice HTML</title>
    </head>

    <body>

    </body>
</html>

Dans l'espace entre <body> et </body>, écris un titre

Mon premier exercice

Revois le code de la page index pour savoir comment écrire un titre.
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.

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.

Sous les titres, ajoute le commentaire suivant :


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

Revois le code de la page index pour savoir comment ajouter une ligne.
Après la ligne, ajouter un paragraphe et y inscrire votre nom.
Sauvegarder (sauvegarder souvent!!)
Ouvrir la page dans le navigateur.

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

Autre méthode pour ouvrir la page web¶

On peut ouvrir une page dans le navigateur même si Live Server n'est pas installé .

Fermer VSCode
Aller dans l'explorateur de fichiers où se trouve votre fichier HTML dans laboratoire 1.
Faire un double-clic sur le fichier pour l'ouvrir dans le navigateur

Votre page HTML est maintenant ouverte dans votre navigateur.

Vous avez donc deux méthodes pour ouvrir un fichier HTML dans le navigateur.

Très utile si Live Server n'est pas disponible ou rencontre un problème.

Mise à jour

Lorsque la page est ouverte dans le navigateur et qu'on veut voir les modifications sauvegardées, on la met à jour à l'aide du rafraîchissement de page ou la touche F5 au clavier.

Ajouts à index.html¶

Nous allons ajouter du contenu dans notre page HTML.

Dans index.html ajouter les informations suivantes :

Modifier le début du code pour :

assurez-vous de modifier le début du code uniquement et de conserver la partie qui commence par <body>...

<!doctype html>

<html lang="fr"> <!-- Indiquer la langue du texte de la page -->

<head>
    <title>Test de l'index</title>   <!-- Changer le titre de la page -->
    <meta name="author" content="NOM DE L'AUTEUR"> <!-- Ajouter le nom de l'auteur de la page -->
</head>

À la suite de ça, on conserve le reste du code que vous avez déjà, soit :

<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 d'ajouter des paragraphes dans la page HTML. 
    </p>
</body>
</html>

Modifier le nom de l'auteur en insérant votre nom à la place de NOM DE L'AUTEUR

Vous aurez toujours à identifier vos travaux ainsi dans le cours.

Ajouts¶

Le contenu d'une page web visible dans le navigateur doit être écrit entre l'ouverture et la fermeture de la balise <body>.

C'est là que vous avez déjà un titre <h1>, deux paragraphes <p> et deux lignes séparatrices <hr>.

Voici les balises HTML que nous allons utiliser dans la page à créer plus bas :

Balise	Description	Exemple
`<h1>` à `<h6>`	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>`
`<hr>`	Insère une ligne horizontale.	`Section 1 d'une page.` `<hr>` `Section 2 après une division.`
`<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>`
`<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="image.png">`

Étapes

Télécharger le dossier zip suivant : contenu_lab1.zip
Ouvrir le zip et copier-coller les images dans votre dossier laboratoire1.
Dans le HTML, après <body> et avant <h1>, nous allons ajouter une image avec la ligne suivante :

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

Sauvegarder.

Vous obtenez le résultat suivant sur la page :
Important
- alt : description de l'image
- src : fichier de l'image
Dans le HTML, après le deuxième paragraphe <p> et avant </body>, ajouter un titre de niveau 2 tel que vu précédemment avec les balises de titre :

Titre : Les navigateurs
Sous la ligne de titre que nous venons d'ajouter:
- 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 :

Labo1

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.

Ouvrir le site web suivant : https://validator.dinf.ca/
Sélectionner le mode de validation "Text input".
Copier-coller la totalité de votre code HTML dans l'espace prévue.
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>

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

Une balise ne peut être ouverte à l'intérieur d'une autre - ne peut être son enfant
Assurez-vous de corriger toutes les erreurs
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

Questionnaire de révision¶

Répondre au questionnaire de révision pour vous aider à réviser la matière de la semaine 1.

Questionnaire de révision à télécharger

Ce questionnaire sera corrigé en classe au prochain cours.

Laboratoire semaine 1¶

L'ordinateur¶

Exercice¶

L'outil Visual Studio Code¶

Exercice¶

Autre méthode pour ouvrir la page web¶

Ajouts à index.html¶

Ajouts¶

Valider le code HTML¶

Questionnaire de révision¶

Terminé! ¶