Aller au contenu
M04 · A. Créer une page web en HTML

Produire du HTML avec Visual Studio Code

Installer et prendre en main VS Code, ouvrir un dossier de projet, gagner du temps avec Emmet et les raccourcis, et choisir les extensions utiles au développement web.

1Situer

Écrire une page dans le Bloc-notes, c'est possible, mais pénible : pas de couleurs, pas d'aide, il faut recharger le navigateur à chaque modification. Les développeurs utilisent un éditeur de code. Visual Studio Code est gratuit, léger, et c'est celui que vous retrouverez dans la plupart des entreprises.

2Comprendre

Emmet : une abréviation devient du code
VOUS TAPEZ ul>li*3 ul > li*3 parentdedans× 3 Tab VS CODE ÉCRIT <ul>   <li></li>   <li></li>   <li></li> </ul> <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Document</title> </head> <body> </body> </html>

Dans un fichier .html, on tape une abréviation : ul>li*3.

1 / 4

Visual Studio Code (VS Code) est un éditeur de code gratuit, édité par Microsoft, disponible sur Windows, macOS et Linux (code.visualstudio.com).

Prise en main

  • Fichier > Ouvrir le dossier : on ouvre toujours le dossier du projet, pas un fichier isolé.
  • L’explorateur (à gauche) montre les fichiers ; on crée index.html, style.css, un dossier images.
  • La coloration syntaxique et la complétion évitent les fautes de frappe.
  • Le terminal intégré (Ctrl + ù) sert plus tard pour Git, npm, Python…

Emmet : écrire vite

Emmet est intégré à VS Code. On tape une abréviation, puis Tab :

AbréviationRésultat
!squelette HTML5 complet
p<p></p>
ul>li*3une liste de 3 éléments
div.carte<div class="carte"></div>
a:link<a href="http://"></a>

Raccourcis utiles

RaccourciAction
Ctrl + Senregistrer
Ctrl + /commenter / décommenter
Alt + ↑ / ↓déplacer la ligne
Alt + Maj + ↓dupliquer la ligne
Alt + Maj + Fformater le document
Ctrl + Hrechercher et remplacer

Extensions recommandées

On les installe depuis l’icône Extensions (Ctrl + Maj + X) :

  • Live Server : recharge la page à chaque enregistrement ;
  • Prettier : formate le code automatiquement ;
  • Auto Rename Tag : renomme les balises par paires ;
  • French Language Pack : interface en français.

N’en installez pas trente : chaque extension ralentit un peu l’éditeur.

Exemple simple

Le stylo et l'atelier

On peut écrire une lettre avec un stylo. Mais pour fabriquer un meuble, on veut un atelier avec les bons outils sous la main. VS Code est l'atelier du développeur : coloration, complétion, terminal, extensions.

Exemple simple

Emmet, l'abréviation qui écrit pour vous

Tapez ! puis Tab dans un fichier .html vide : VS Code écrit tout le squelette de la page. Tapez ul>li*3 puis Tab : une liste de trois éléments apparaît.

ul>li*3   →   <ul>
                <li></li>
                <li></li>
                <li></li>
              </ul>

3Manipuler

Classez chaque élément : est-ce une extension à installer, ou une fonction déjà intégrée à VS Code ? Cliquez ensuite sur « Vérifier ».
Live Server : recharge la page dans le navigateur à chaque enregistrement
Emmet : ! puis Tab écrit le squelette HTML
Prettier : remet le code en forme proprement
Le terminal intégré (Ctrl + ù)
French Language Pack : l'interface en français
Ctrl + / : mettre une ligne en commentaire
Auto Rename Tag : renomme la balise fermante en même temps que l'ouvrante
Alt + Maj + ↓ : dupliquer la ligne

4Pratiquer

Exercice 1 · Mettre en place son projet

Listez dans l'ordre les étapes pour démarrer un site dans VS Code : du dossier vide à la page affichée dans le navigateur avec Live Server.

Voir le corrigé
1. Créer un dossier mon-site sur le disque
2. VS Code : Fichier > Ouvrir le dossier > mon-site
3. Nouveau fichier : index.html
4. Taper ! puis Tab (squelette Emmet), écrire le contenu
5. Enregistrer (Ctrl + S)
6. Clic droit > Open with Live Server : la page s'ouvre
   et se recharge à chaque enregistrement

Exercice 2 · Abréviations Emmet

Que produisent ces abréviations Emmet ? (1) h1+p ; (2) nav>a*4 ; (3) div.carte ; (4) section#menu

Voir le corrigé
1. <h1></h1><p></p>                     (+ : frères)
2. <nav> avec 4 liens <a></a> dedans    (> : enfant, * : répéter)
3. <div class="carte"></div>            (. : classe)
4. <section id="menu"></section>        (# : identifiant)

Exercice 3 · Rechercher et remplacer

Dans un fichier, le nom du restaurant « La Sardine » apparaît 25 fois et doit devenir « Le Port ». Quel raccourci utilisez-vous ?

Voir le corrigé
Ctrl + H : rechercher et remplacer dans le fichier
(Ctrl + Maj + H pour tout le dossier du projet).

5Vérifier

1. Que fait l'extension Live Server ?
2. Dans VS Code, que donne ! suivi de Tab dans un fichier .html ?
3. Pourquoi ouvrir un dossier plutôt qu'un fichier seul ?