Installation de VSCode
Nous recommandons d’utiliser l’éditeur de texte VSCode . Il est disponible sur tous les principaux systèmes d’exploitation (Windows, macOS, Linux), facile d’utilisation et grandement personnalisable. Si vous préférez une alternative totalement Open-Source, tournez-vous plutôt vers VSCodium .
Si vous n’avez pas encore VSCode, téléchargez-le maintenant, car vous en aurez besoin pour le prochain chapitre. Nous allons faire un tour rapide de ses fonctionnalités.
À l’heure où j’écris ces lignes, l’éditeur est en version 1.88, il est possible que les captures d’écran ci-dessous varient légèrement à l’avenir. Lors de la première ouverture, l’application devrait ressembler à ceci. Choisissez la palette de couleur que vous préférez et passez à la suite :
Lors de l’étape suivante, l’application vous proposera d’installer une extension d’aide pour certains langages de programmation. Nous allons choisir HTML CSS Support dans la colonne de gauche :
Les étapes suivantes présentent les différentes fonctionnalités de l’éditeur. Parcourez-les si vous souhaitez en apprendre plus, ou cliquez sur Mark Done pour passer ces étapes. L’interface devrait maintenant ressembler à ceci :
Pour terminer, nous allons passer la langue de l’interface en français. VSCode possède une fonctionnalité de recherche centrale qui permet d’accéder rapidement à n’importe quelle section du logiciel. Elle est accessible depuis le raccourci CTRL+SHIFT+P (⌘CMD+SHIFT+P sur Mac).
Utilisez ce raccourci, et recherchez language > Configure Display Language > français > puis redémarrez l’application.
Création d’un projet
Un projet Web est simplement composé d’une série de fichiers HTML et CSS, contenus dans un dossier. Je crée donc un dossier sur mon bureau et l’appelle decouverte-vscode. Notez ici que je n’utilise pas d’espace ni de caractère spécial. Évitez les tant que possible dans vos noms de dossier et de fichiers, car ils posent parfois problème.
Faites un glisser-déposer de ce dossier dans VSCode. L’interface devrait à présent ressembler à ceci :
Nous pouvons nous faire confiance ! Si vous ne souhaitez pas revoir cet avertissement, cochez Faire confiance à tous les auteurs bla, bla, puis cliquez sur Oui, je fais confiance aux auteurs.
Création de fichiers
Nous allons à présent créer notre premier document HTML. Pour cela, clic-droit dans la colonne de gauche de l’interface, puis choisissez Nouveau fichier… > Renseignez page-1.html comme nom de fichier > ENTRÉE↵ :
Vous remarquerez qu’un nouveau fichier est apparu dans le dossier decouverte-vscode créé à l’étape précédente. Un double-clic sur ce fichier ouvrira votre navigateur, et affichera une page blanche. Votre navigateur ouvrira par défaut tous les fichiers .html.
Même si celle-ci n’est pas très impressionnante pour le moment, nous venons de créer notre première page Web ! Une page Web consiste en un fichier texte, généralement au format .html. Le navigateur, lui, interprète ce fichier pour l’afficher à l’écran.
Créons un second fichier, et appelons le page-2.html. Vous remarquerez que ces fichiers, en plus d’apparaitre dans la colonne de gauche, s’ouvrent sous la forme d’onglet au sommet de l’écran. Il est possible de scinder l’écran en deux pour afficher deux fichiers simultanément. Pour cela, faites un glisser-déposer de l’onglet page-2.html n’importe où sur la droite de la fenêtre de VSCode :
Il est possible de scinder verticalement l’écran plus d’une fois, mais aussi horizontalement, en déplaçant l’onglet vers le haut ou le bas de l’écran.
Terminons notre découverte de l’interface de l’éditeur VSCode par la fonctionnalité de recherche accessible via le raccourci CTRL+P (⌘CMD+P sur macOS). Ce raccourci ouvrira un menu permettant d’accéder rapidement à n’importe quel fichier du projet. Cela sera indispensable une fois que notre projet aura atteint des dizaines de fichiers répartis dans plusieurs dossiers :
Les raccourcis classiques sont également disponibles (remplacez CTRL par ⌘CMD sur macOS) :
- CTRL+C : Copier le texte sélectionné
- CTRL+X : Couper le texte sélectionné
- CTRL+V : Coller le texte copié
- CTRL+S : Sauvegarder le fichier
- CTRL+Z : Annuler une modification
- CTRL+SHIFT+Z : Annuler une annulation
- CTRL+N : Nouveau fichier
- CTRL+O : Ouvrir un fichier
Quelques raccourcis supplémentaires, avec le curseur de texte placé dans le fichier :
- HOME ou END : Déplacer le curseur au début ou à la fin de la ligne
- SHIFT+← ou SHIFT+→ : Sélectionner le texte vers l’arrière ou l’avant
- SHIFT+HOME ou SHIFT+END : Sélectionner le texte jusqu’au début ou la fin de la ligne
- ALT+↑ ou ALT+↓ : Déplacer la ligne vers le haut ou le bas
- ALT+clic-gauche : En maintenant ALT enfoncé, puis en cliquant à plusieurs emplacements du texte, place plusieurs curseurs de texte afin de saisir plusieurs lignes simultanément
Résumé
Félicitations ! Vous avez franchi la première étape pour devenir un·e développeur·euse Web ! J’espère que ce premier chapitre vous a permis d’acquérir une compréhension de base du fonctionnement de VSCode et de la manière dont les pages HTML fonctionnent.
Ce tutoriel a couvert une bonne partie de ce qui deviendra votre routine de développement, assurez-vous d’être à l’aise avec tout cela avant de passer à la suite. Nous vous encourageons à jouer avec le projet d’exemple, à créer de nouveaux fichiers et à naviguer de l’un à l’autre. L’utilisation d’un bon éditeur de texte vous permettra de gagner du temps, que vous pourrez investir dans ce qui compte vraiment, apprendre !
Maintenant que nous avons un éditeur de texte approprié, nous pouvons commencer à coder de vraies pages Web. Nous commencerons par explorer les éléments HTML les plus courants au cours des prochains chapitres, puis nous aborderons la mise en page à travers CSS.