Tutoriel HTML

Prérequis

Pour comprendre ce TP, il est nécessaire comprendre le concept d'arborescence de fichiers.

Prenez le temps de l'aborder en cliquant sur le lien si vous n'êtes pas à l'aise, sinon vous serez perdu.

Où travailler?

Pour commencer, nous allons créer un dossier de travail en utilisant l'explorateur de fichiers de votre système d'exploitation. L'arborescence dépend de votre système, veuillez sélectionner l'onglet correspondant :

Ouvrez l'Explorateur de fichiers en cliquant sur l'icône de dossier dans la barre des tâches ou en appuyant sur Windows + E.

../_images/explorer.png

Naviguez vers le dossier Documents dans la barre latérale gauche.

Créez un nouveau dossier pour le cours :

  1. Clic droit dans la zone vide

  2. Sélectionnez Nouveau > Dossier

  3. Nommez-le linfo1002

Dans ce dossier linfo1002, créez un sous-dossier pour chaque TP :

  1. Double-cliquez sur linfo1002 pour y entrer

  2. Clic droit > Nouveau > Dossier

  3. Nommez-le tp1

Il est important de toujours bien organiser ses dossiers, et travailler dans une arborescence appropriée. Évitez à tout prix de travailler dans des fichiers individuels placés sur le bureau ou dans le dossier Téléchargements.

Installation de Visual Studio Code

Visual Studio Code (VSCode) est un éditeur de code gratuit et puissant que nous utiliserons tout au long du cours.

  1. Téléchargez VSCode depuis https://code.visualstudio.com/

  2. Exécutez l'installateur téléchargé

  3. Suivez les instructions d'installation (acceptez les options par défaut)

Désactiver GitHub Copilot

GitHub Copilot est un assistant d'IA intégré à VSCode qui peut générer du code automatiquement. Dans le cadre de ce cours, vous devez le désactiver pour apprendre à écrire du code par vous-même.

Si Copilot est installé dans votre VSCode :

  1. Ouvrez VSCode

  2. Allez dans Extensions (icône de carrés dans la barre latérale gauche, ou Ctrl+Shift+X / Cmd+Shift+X)

  3. Recherchez "GitHub Copilot"

  4. Si l'extension est installée, cliquez sur Désactiver ou Désinstaller

  5. Recherchez également "GitHub Copilot Chat" et désactivez/désinstallez cette extension aussi

  6. Pour masquer la barre secondaire à droite : allez dans Affichage > Apparence > Barre latérale secondaire (ou View > Appearance > Secondary Side Bar), ou utilisez le raccourci Ctrl+Alt+B

Avertissement

L'utilisation de Copilot ou d'autres outils d'IA pour générer du code est interdite dans ce cours. L'objectif est d'apprendre les fondamentaux par vous-même.

Créer un Workspace VSCode

Un workspace (espace de travail) VSCode permet de regrouper vos fichiers et de conserver vos paramètres pour un projet.

  1. Ouvrez VSCode

  2. Cliquez sur Fichier > Ouvrir le dossier... (ou File > Open Folder...)

  3. Naviguez vers votre dossier Documents/linfo1002/tp1 et sélectionnez-le

  4. Pour sauvegarder ce workspace : Fichier > Enregistrer l'espace de travail sous... et sauvegardez-le dans votre dossier linfo1002

Vous pouvez maintenant créer et éditer des fichiers directement depuis VSCode.

Créer une page web

Dans VSCode, créez un nouveau fichier HTML :

  1. Dans l'explorateur de fichiers de VSCode (panneau gauche), cliquez droit et sélectionnez Nouveau fichier

  2. Nommez-le tutoriel.html

Pour visualiser votre page HTML dans un navigateur, vous pouvez :

  • Faire un clic droit sur le fichier dans l'explorateur de votre OS et choisir "Ouvrir avec" > votre navigateur

  • Ou glisser-déposer le fichier dans une fenêtre de navigateur

Attention, si vous modifiez votre fichier tutoriel.html, vous devez recharger la page dans votre navigateur pour voir les modifications.

1) Métadonnées

Commençons par voir le squelette d'une page HTML.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

Comme vous l'avez vu au cours, tout fichier HTML commence par la chaîne de caractère <!DOCTYPE html>. Ensuite, le début et la fin du document sont marqués par la balise <html>. La balise <head> délimite l'entête du document. Le contenu du fichier se trouve à l'intérieur de la balise <body>.

Pour ce premier exercice, il vous est demandé d'ajouter les métadonnées suivantes au document :

  • Le titre du document (vous pouvez choisir)

  • L'encodage : utf-8

  • L'auteur (vous)

  • Des mots-clefs (HTML, tutoriel)

2) Sections et Paragraphes

Dans ce deuxième exercice, il vous est demandé d'ajouter les sections et paragraphes suivants :

  • Première section

    • Un premier paragraphe

  • Une deuxième section

    • Un deuxième paragraphe

    • Une sous-section

      • Un paragraphe pour la sous-session

Si vous ne savez plus comment créer un paragraphe, revoyez la page du syllabus Structure d'une page HTML.

3) Liens

Ajoutez un lien vers le site web de l'UCLouvain à votre page. Comme vue au cours, cette tâche peut se faire au travers d'une balise particulière.

Si vous ne savez plus comment créer un lien, revoyez la page du syllabus Liens.

4) Style

En utilisant l'attribut style dans les différentes balises, mettez des couleurs dans votre document de la façon suivante :

  • Première section

    • Un premier paragraphe -> rouge

  • Une deuxième section

    • Un deuxième paragraphe -> bleu

    • Une sous-section

      • Un paragraphe pour la sous-session -> choisir la police courier

Si vous ne savez plus comment créer un style, revoyez la page du syllabus Style.

5) CSS

Ajouter manuellement un attribut style pour chaque entrée n'est pas très pratique. Pour cet exercice, il vous est demandé d'utiliser un fichier CSS que vous pouvez appeler style.css. Dans ce fichier, vous devez indiquer que toutes les sections sont en bleu, les sous-sections en rouge et les paragraphes en vert. De plus, la police de tous les paragraphes doit être verdana et la couleur de fond de votre site doit-être rose.

Si vous ne savez plus comment faire une feuille de style CSS, revoyez la page du syllabus Les feuilles de style.

6) Images

Ajouter une image de chat à votre document HTML, assurez-vous qu'elle soit libre de droit. Celle-ci doit se trouver tout en haut de votre document.

Si vous ne savez plus comment ajouter une image, revoyez la page du syllabus Images.

7) Final

Vous devez à présent avoir une page HTML fonctionnelle. Malheureusement, elle n'est pas très jolie. Dans cette phase finale, votre objectif est de la rentre plus attrayante.

  • Remplacer le contenu des sections et paragraphes par une présentation de vous

  • Remplacer l'image par une photo de vous ou une image qui vous plait

  • Ajoutez une nouvelle image comme arrière-plan

  • Ajoutez un pied-de-page à votre document

Vous pouvez également faire toutes autres modifications qui vous plaisent. Attention, dans la prochaine étape, votre page sera accessible par les autres étudiants, gardez cela à l'esprit en faisant votre page

Allez à la section Chapitre 3 : Phase 0 du projet.