Pour écrire du code, il faut un logiciel qui n’ajoute rien dans votre dos. Voici ce qu’est un éditeur de code, lesquels sont gratuits, et comment écrire votre premier fichier HTML.
Un IDE est un éditeur de code. C’est un peu comme Word ou LibreOffice pour le traitement de texte, mais pour écrire du code.
Le sigle vient de l’anglais Integrated Development Environment, « environnement de développement intégré ». Au sens strict, un IDE fait bien plus qu’éditer du texte : il compile, il cherche les erreurs, il lance les programmes. Les logiciels de cette leçon sont plutôt des éditeurs de code, mais tout le monde dit « IDE ».
Sa grande particularité : il n’ajoute absolument rien dans le fichier que vous ne puissiez pas voir. Ce que vous tapez est exactement ce qui est enregistré, caractère par caractère.
Un traitement de texte, lui, enregistre bien plus que votre texte : la police, la taille, les marges, la mise en page. Ces informations sont invisibles à l’écran, mais elles sont dans le fichier, et le navigateur ne saurait pas quoi en faire.
On ne peut donc pas écrire du code avec :
Le Bloc-notes de Windows est un cas à part. Il enregistre bien du texte brut, donc il fonctionne, mais il ne vous aide en rien.
Un éditeur de code fait aussi gagner beaucoup de temps : il colore le code pour le rendre lisible, il complète les balises à votre place, et il signale certaines erreurs avant même que vous ouvriez la page.
Demandez à la classe qui a déjà un éditeur de code installé, et lequel.
Voici les éditeurs de code les plus répandus. Tous s’utilisent gratuitement. Vous en avez peut-être déjà un sur votre ordinateur.
| Éditeur | Prix | Windows | Mac | Linux | |
|---|---|---|---|---|---|
 |
Visual Studio Code | gratuit | oui | oui | oui |
 |
VSCodium | gratuit, open source | oui | oui | oui |
 |
Zed | gratuit, open source | oui | oui | oui |
 |
Geany | gratuit, open source | oui | oui | oui |
 |
Notepad++ | gratuit, open source | oui | non | non |
 |
Sublime Text | payant, essai gratuit sans limite | oui | oui | oui |
VSCodium est une version de Visual Studio Code sans le suivi d’utilisation que Microsoft y ajoute. Sublime Text est payant, mais on peut l’utiliser gratuitement aussi longtemps qu’on veut : il affiche seulement, de temps en temps, une fenêtre qui invite à l’acheter.
Je vous propose d’installer Visual Studio Code, souvent appelé VS Code. Vous n’êtes pas obligé·e.
Je l’ai choisi parce qu’il est gratuit, disponible sur Windows, Mac et Linux, et que c’est de loin le plus utilisé. Vous le retrouverez en entreprise, et dans la plupart des tutoriels que vous lirez.
Vous pouvez en utiliser un autre. Vous pouvez aussi installer VS Code alors que vous en avez déjà un, pour suivre la suite de la leçon pas à pas.
L’extension, c’est la fin du nom d’un fichier, après le point : .txt, .html, .jpg. Elle dit au système ce que contient le fichier.
Windows et Mac la cachent par défaut. Or, si vous ne la voyez pas, vous croirez renommer un fichier en liste.html alors qu’il s’appellera en réalité liste.html.txt. Affichez-la avant de continuer :
Créez un dossier pour ce cours, par exemple sur le bureau.
Dans VS Code, choisissez Fichier, puis Nouveau fichier texte, et tapez cette liste :
En autonomie
30min
Ma liste de courses
- Pain
- Fromage
- Tomates
Enregistrez-la dans votre dossier sous le nom liste.txt.
Glissez liste.txt dans la fenêtre de votre navigateur.
Il l’affiche tel quel, avec ses retours à la ligne : pour lui, c’est du texte brut, il n’a rien à interpréter.
Dans VS Code, choisissez Fichier, puis Enregistrer sous, et nommez le fichier liste.html.
Avant d’ouvrir le fichier, demandez à la classe ce que va afficher le navigateur.
Glissez liste.html dans le navigateur. Tout s’affiche sur une seule ligne :
Ma liste de courses - Pain - Fromage - Tomates
En HTML, le navigateur ignore les retours à la ligne et les espaces en trop. Ce ne sont pas eux qui structurent la page, ce sont les balises.
Dans VS Code, remplacez le contenu de liste.html par la même liste, avec les balises de la leçon précédente :
<h1>Ma liste de courses</h1>
<ul>
<li>Pain</li>
<li>Fromage</li>
<li>Tomates</li>
</ul>
Enregistrez, puis rechargez la page dans le navigateur, avec la touche F5 ou Cmd + R sur Mac.
Cette fois, vous voyez un titre et une vraie liste à puces. Votre premier fichier HTML fonctionne. Il lui manque encore le squelette que toute page doit avoir : c’est l’objet de la leçon suivante.