Séance 1 — Ma première page web

Se repérer dans l’ordinateur, et afficher quelque chose dans le navigateur

  • Retrouver où sont mes fichiers et ouvrir un dossier dans VS Code
  • Utiliser 4 commandes du terminal sans paniquer
  • Écrire une page HTML et la voir dans le navigateur

1. Deux mots de vocabulaire

Avant tout, mettons les mots sur les choses.

Mot Ce que c’est Exemple
Fichier Un document. Il a un nom et une extension index.html
Extension Ce qui est après le point. Elle dit quel type de fichier c’est .html, .css, .js
Dossier Une boîte qui contient des fichiers (et d’autres dossiers) web101
Chemin L’adresse d’un fichier dans l’ordinateur Documents/web101/index.html
AvertissementTrois règles pour vos noms de fichiers et de dossiers
  1. Pas d’espace → ma page.html ❌ ma-page.html ✅
  2. Pas d’accent, pas de cédille → présentation.html ❌ presentation.html ✅
  3. Tout en minuscules → Index.HTML ❌ index.html ✅

Ce n’est pas de la coquetterie : sur un serveur web, Index.html et index.html sont deux fichiers différents. Beaucoup de bugs incompréhensibles viennent de là.

2. Créer son dossier de travail

Étape 1 — Le dossier web101

On va créer un seul dossier pour tout le semestre, et on ne le déplacera plus.

Windows

  1. Ouvrez l’Explorateur de fichiers (icône dossier jaune dans la barre des tâches)
  2. Cliquez sur Documents dans la colonne de gauche
  3. Clic droit dans la zone blanche → Nouveau → Dossier
  4. Nommez-le web101 puis Entrée

macOS

  1. Ouvrez le Finder
  2. Cliquez sur Documents
  3. Menu Fichier → Nouveau dossier
  4. Nommez-le web101 puis Entrée

Vous venez de créer le dossier Documents/web101. C’est votre maison pour tout le semestre.

Étape 2 — Ouvrir ce dossier dans VS Code

Lancez Visual Studio Code, puis :

  • Menu Fichier → Ouvrir le dossier… (File → Open Folder…)
  • Sélectionnez Documents/web101
  • Cliquez sur Sélectionner un dossier
  • Si VS Code demande « Faites-vous confiance aux auteurs… », répondez Oui, je fais confiance

Sur la gauche apparaît l’explorateur avec le titre WEB101. Il est vide, c’est normal.

ImportantLe point le plus important de la séance

Dans VS Code, on n’ouvre jamais un fichier tout seul. On ouvre toujours le dossier.

Pourquoi ? Parce que VS Code a besoin de voir tout le dossier pour retrouver vos images, vos fichiers CSS, etc. Si vous ouvrez juste index.html, la moitié des choses ne marchera pas et vous ne comprendrez pas pourquoi.

3. Le terminal : 4 commandes, pas une de plus

Le terminal, c’est la même chose que l’explorateur de fichiers, mais en tapant au lieu de cliquer. C’est tout. Il n’y a rien de magique.

Ouvrez-le dans VS Code : menu Terminal → Nouveau terminal (ou Ctrl+ù sur Windows, Ctrl+ù sur Mac).

Un panneau s’ouvre en bas, avec une ligne qui finit par > ou $. C’est l’invite de commande : le terminal vous dit « je t’écoute ».

Les 4 commandes

Commande Ça veut dire Ce que ça fait
pwd print working directory Où suis-je ? Affiche le dossier courant
ls list Qu’y a-t-il ici ? Liste les fichiers du dossier courant
cd nom-du-dossier change directory Entrer dans un dossier
cd .. Remonter au dossier parent

Étape 3 — Essayer les 4 commandes

Tapez ceci dans le terminal, une ligne à la fois, en appuyant sur Entrée après chaque ligne :

pwd

→ Vous devez voir un chemin qui se termine par web101.

ls

→ Rien ne s’affiche : le dossier est vide. C’est normal.

mkdir essai
ls

→ mkdir (make directory) a créé un dossier, et ls l’affiche maintenant. Regardez à gauche : essai est aussi apparu dans l’explorateur de VS Code.

cd essai
pwd

→ Le chemin se termine maintenant par web101/essai : vous êtes entré dans le dossier.

cd ..
pwd

→ Vous êtes remonté dans web101.

AstuceTrois astuces qui changent la vie
  1. Tab complète les noms. Tapez cd es puis Tab : le terminal écrit essai pour vous. Utilisez-le systématiquement, ça évite les fautes de frappe.
  2. ↑ rappelle la commande précédente. Pas besoin de tout retaper.
  3. Le terminal est bavard. Quand il affiche du rouge, il ne vous gronde pas : il vous explique ce qui ne va pas. Lisez le message, même s’il est en anglais.

À toi de jouer — Exercice 1.1

Dans le terminal, en partant de web101 :

  1. Créez un dossier seance01
  2. Entrez dedans
  3. Vérifiez que vous êtes bien au bon endroit
  4. Remontez dans web101
mkdir seance01
cd seance01
pwd
cd ..

4. Ma première page HTML

Ce qu’est le HTML

Le HTML décrit le contenu d’une page : « ça, c’est un titre », « ça, c’est un paragraphe », « ça, c’est une image ».

Il fonctionne avec des balises :

<h1>Bonjour</h1>
  • <h1> : balise ouvrante, elle dit « ici commence un grand titre »
  • Bonjour : le contenu
  • </h1> : balise fermante (avec le /), elle dit « ici finit le grand titre »

C’est comme une paire de parenthèses : ce qu’on ouvre, on le referme.

Étape 4 — Créer le fichier

  1. Dans VS Code, survolez le titre WEB101 dans l’explorateur de gauche
  2. Cliquez sur l’icône Nouveau fichier (une feuille avec un +)
  3. Tapez index.html puis Entrée

Le fichier s’ouvre, vide.

NotePourquoi index.html ?

index.html est le nom conventionnel de la page d’accueil. Quand un navigateur arrive sur un dossier de site web, c’est le fichier qu’il ouvre automatiquement. Prenez l’habitude tout de suite.

Étape 5 — Le squelette

Recopiez exactement ceci :

index.html
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Ma première page</title>
  </head>
  <body>
    <h1>Bonjour !</h1>
    <p>Je viens de créer ma première page web.</p>
  </body>
</html>

Puis enregistrez : Ctrl+S (macOS Cmd+S).

AvertissementVS Code écrit des choses tout seul, et c’est déroutant

Quand vous tapez <h1>, VS Code ajoute automatiquement </h1>. Le curseur se place entre les deux.

👉 Ne retapez pas la balise fermante, sinon vous obtenez <h1>Bonjour</h1></h1> et votre page devient bizarre.

Si votre code part en vrille :

  • Annuler : Ctrl+Z (autant de fois que nécessaire)
  • Remettre au propre (indentation) : Shift+Alt+F
    macOS Shift+Option+F

Prenez le réflexe de formater après chaque modification. Un code bien indenté est un code où l’on voit ses erreurs.

À quoi sert chaque ligne ?

Ligne Rôle
<!DOCTYPE html> « Cette page est du HTML moderne ». Toujours en première ligne
<html lang="fr"> Tout le document. lang="fr" = la page est en français
<head> Les informations sur la page. Invisible dans le navigateur
<meta charset="UTF-8" /> « Les accents sont autorisés ». Sans ça : é au lieu de é
<title> Le texte affiché dans l’onglet du navigateur
<body> Le contenu visible de la page. C’est ici qu’on travaille
Note<head> ≠ <body>
  • <head> = la fiche d’identité de la page (ce que le navigateur doit savoir)
  • <body> = ce que l’humain voit

Si vous écrivez un titre dans le <head>, il ne s’affichera pas. C’est l’erreur n°1 des débutants.

5. Voir sa page dans le navigateur

Étape 6 — Live Server

Si vous ne l’avez pas encore installé : voir la procédure (30 secondes).

Ensuite :

  • Clic droit sur index.html dans l’explorateur de gauche
  • Open with Live Server

Votre navigateur s’ouvre sur http://127.0.0.1:5500/index.html et affiche votre page. 🎉

AstuceLe super-pouvoir de Live Server

Laissez la fenêtre du navigateur à côté de VS Code (moitié / moitié).

Maintenant, à chaque fois que vous enregistrez (Ctrl+S), la page se recharge toute seule. Vous voyez votre modification instantanément.

C’est la bonne façon de travailler : modifier → enregistrer → regarder, en boucle, toutes les 20 secondes.

Étape 7 — La boucle magique

  1. Dans index.html, remplacez Bonjour ! par votre prénom
  2. Ctrl+S
  3. Regardez le navigateur : ça a changé tout seul

Refaites-le 3 fois avec des textes différents. Cette boucle, c’est 90 % du métier.

6. À toi de jouer

Exercice 1.2 — Un deuxième paragraphe

Ajoutez un deuxième paragraphe sous le premier, qui dit « J’apprends le développement web. »

index.html
<body>
  <h1>Bonjour !</h1>
  <p>Je viens de créer ma première page web.</p>
  <p>J'apprends le développement web.</p>
</body>

Exercice 1.3 — Changer l’onglet

Faites en sorte que l’onglet du navigateur affiche Page de Camille (remplacez par votre prénom).

Attention : ce n’est pas dans le <body>.

C’est la balise <title>, dans le <head> :

index.html
<head>
  <meta charset="UTF-8" />
  <title>Page de Camille</title>
</head>

Exercice 1.4 — Retrouver l’erreur

Cette page ne s’affiche pas correctement. Trouvez les 2 erreurs sans la recopier dans VS Code : lisez-la.

casse.html
<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Mon site</title>
  </head>
  <body>
    <h1>Mes vacances<h1>
    <p>C'était très bien.</p>
  </body>
</html>

  1. <h1>Mes vacances<h1> : la balise de fin s’écrit </h1>, avec un slash. Ici on a ouvert deux fois un titre au lieu d’en fermer un. Résultat : tout le reste de la page devient un énorme titre.

    <h1>Mes vacances</h1>

  2. Il manque <meta charset="UTF-8" /> dans le <head>. Le mot C'était risque de s’afficher Cétait.

    <head>
  <meta charset="UTF-8" />
  <title>Mon site</title>
</head>

Exercice 1.5 — Une page à vous, en autonomie

Créez un nouveau fichier portrait.html dans web101, et faites une page qui contient :

  • Dans l’onglet : Portrait
  • Un grand titre avec votre prénom
  • Un paragraphe qui dit dans quelle ville vous habitez
  • Un paragraphe qui dit ce que vous aimez faire

Ouvrez-la avec Live Server pour vérifier.

portrait.html
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Portrait</title>
  </head>
  <body>
    <h1>Camille</h1>
    <p>J'habite à Palaiseau.</p>
    <p>J'aime le basket et la musique.</p>
  </body>
</html>

Une fois Live Server lancé, l’adresse dans le navigateur devient http://127.0.0.1:5500/portrait.html. Si vous voyez encore l’ancienne page, changez la fin de l’adresse à la main.

7. Fiche mémo

Le terminal

pwd            # où suis-je ?
ls             # qu'y a-t-il ici ?
cd dossier     # entrer dans un dossier
cd ..          # remonter
mkdir dossier  # créer un dossier

Tab = compléter · ↑ = commande précédente

Le squelette HTML (à savoir écrire de mémoire)

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Titre de l'onglet</title>
  </head>
  <body>
    <h1>Grand titre</h1>
    <p>Un paragraphe.</p>
  </body>
</html>

Les raccourcis VS Code

Action Windows macOS
Enregistrer Ctrl+S Cmd+S
Annuler Ctrl+Z Cmd+Z
Formater Shift+Alt+F Shift+Opt+F

Les 3 règles des noms de fichiers

Pas d’espace · pas d’accent · tout en minuscules

8. Avant la prochaine séance