Laboratoire semaine 1¶

Consignes

Ce laboratoire vous permet de vous familiariser avec :

les laboratoires informatique
les outils de travail du cours d'Interfaces Web et de Logique de programmation
vos premiers pas avec le HTML

Ces outils seront aussi réutilisés dans le cadre d'autres cours tout au long de vos études.

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 avant la fin du cours.

Quelques informations importantes¶

Connexion¶

On utilise les informations d'Omnivox pour se connecter aux ordinateurs du laboratoire.

Code utilisateur : #DA

Mot de passe : le même qu'Omnivox

Lorsqu'on change notre mot de passe Omnivox, notre mot de passe d'accès aux ordinateur change aussi.

Bureau¶

Vocabulaire important :

Bureau

Explorateur de fichiers¶

File Explorer

Ton OneDrive est un espace de stockage dans le cloud de Microsoft. Il est donc accessible de partout, en te connectant à ton compte du Cégep.

File Explorer

OneDrive¶

OneDrive est un espace de stockage en ligne accessible de partout avec Internet et votre compte du Cégep.

Comment y accéder

Dans le laboratoire :

OneDrive

De chez toi :

Accès par Omnivox
Accès par office.com
Accès par l'application OneDrive (à télécharger https://www.microsoft.com/fr-ca/microsoft-365/onedrive/download )

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.

Elle sera à lire en devoir.

Exercice¶

Exercice

Ouvrir Visual Studio Code
Créer un nouveau dossier de travail en suivant les étapes :
- Aller dans l'explorateur de fichiers Windows
- Dans OneDrive, créer un dossier intitulé "Interfaces"
- Ouvrir le dossier puis créer un dossier intitulé "labo1"
- Ouvrir le dossier labo1 puis créer un document texte intitulé "index.txt"
Ouvrir le nouveau dossier labo1 dans VS Code à l'aide du bouton Ouvrir un dossier
Renommer le fichier texte pour qu'il devienne une page HTML (une page web)

On peut maintenant commencer à écrire notre code HTML à l'intérieur de ce fichier.

Voici un premier petit code HTML que vous pouvez copier-coller (Ctrl+C / Ctrl+V) dans votre fichier :

<!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 le fichier.

Ne pas oublier de sauvegarder soit à l'aide du menu Fichier -> Enregistrer ou avec le raccourci-clavier Ctrl + S afin de voir les modifications dans la page web.
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.
3. Ensuite, aller dans l'explorateur de fichiers où se trouve votre fichier HTML.
4. Faire un double-clic sur le fichier pour l'ouvrir dans le navigateur
  
  Votre page HTML est maintenant ouverte 2 fois dans votre navigateur.
  
  Vous avez donc deux méthodes pour ouvrir un fichier HTML dans le navigateur.
  
  Ces deux méthodes ont une différence principale sur la mise à jour de la page dans le navigateur... comme nous allons le voir avec les prochaines étapes.

Revenir dans Visual Studio Code et modifier le code pour ajouter du code supplémentaire. Vous pouvez copier-coller le code suivant en supprimant d'abord le code existant dans votre page :

    <!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.

Remarquez comment la page ouverte avec Live Server s'est mise à jour automatiquement. C'est à cela que sert Live Server.

Mais la page ouverte manuellement avec un double-clic n'est pas à jour.

Pour la mettre à jour, il faut appuyer sur F5 au clavier. F5 rafraîchit la page.

Voilà la différence principale entre les deux méthodes.

Il existe une autre différence importante que nous verrons lorsque nous utiliserons des images dans nos pages web.
Fermer la page qui a été ouverte manuellement et conserver celle qui a été ouverte avec Live Server.
Sur votre page HTML dans le navigateur appuyer sur F12 au clavier.

Ceci ouvre les outils pour développeur.

Aller dans l'inspecteur (aussi appelé Éléments dans Edge).

Nous pouvons y voir le code de la page et lorsqu'on passe la souris sur une balise, cette portion de la page est mise en évidence.

Ces outils sont très utiles pour déboguer une page HTML et détecter les anomalies.

Nous les utiliserons beaucoup pendant la session.
Dans un autre onglet du navigateur, ouvrir l'adresse https://validator.dinf.ca/

Ceci est un outil de validation du code.
Insérer votre code pour la validation
Lancer la validation

Nous obtenons ici un avertissement pour indiquer qu'il manque une langue.

En effet, le navigateur ne sait pas trop comment afficher les textes, s'il y a des accents ou des caractères spéciaux, car nous ne lui indiquons pas que notre page est en français.

Corriger

Pour corriger cet avertissement, ajouter la langue du texte dans la balise <html> comme suit :

<!doctype html>

<html lang="fr"> <!-- Ajouter la langue dans la balise 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>

Après cette correction, il n'y a plus d'erreur dans le code quand on valide le document.

À chaque laboratoire, vous serez appelés à valider votre code et corriger les erreurs et avertissements.

Le navigateur affiche la page même s'il y a des erreurs de code... mais nous allons apprendre à bien coder.

"Du code qui fonctionne n'est pas nécessairement du bon code."

Ajouts à la page web¶

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 d'interchanger le début du code uniquement et de ne pas effacer le reste du code...

<!doctype html>

<html lang="fr">

<head>
    <meta charset="utf-8">
    <title>Page 1, labo 1</title>
    <meta name="author" content="NOM DE L'AUTEUR">
</head>

À la suite de quoi 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

Ajouts¶

Le contenu d'une page web qu'on veut afficher à nos utilisateurs 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="img/image.png">`

Étapes

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

<img alt="joueur" src="gamer.png">

Sauvegarder.

Vous obtenez le résultat suivant sur la page :
Dans le HTML, après le deuxième paragraphe <p> et avant </body>, ajouter un titre de niveau 2 avec la ligne suivante :

<h2>Gallerie d'image de maisons</h2>
Sous la ligne de titre que nous venons d'ajouter, ajouter une ligne de code par image pour chacune des 4 images de maison.

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.

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

Questionnaire de laboratoire¶

Il y aura des questionnaires de laboratoire à compléter pendant quelques laboratoires de la session.

Ces questionnaires vous permettront de cumuler jusqu'à 10% des points de la session.

Ils vous permettent aussi de réviser la matière et de vous préparer aux quiz théoriques.

Il est donc important de les remplir lorsque demandé. Ceci peut être fait en devoir, de la maison.

Pour se connecter au questionnaire :

Code utilisateur : noDA@cegeplevis.ca (exemple : 1234567@cegeplevis.ca)