Table des matières

Sommaire Web

IDE VSCode - Préparer un projet de site Web

[Mise à jour le 12/9/2023]

1. Visual Studio Code

Visual Studio Code est un éditeur de code source léger, mais puissant, disponible pour Windows, macOS et Linux. Il est livré avec un support intégré pour JavaScript, TypeScript et Node.js et possède des extensions pour d'autres langages (tels que Arduino, C++, C#, Java, Python, PHP, Go etc.) et des runtimes (.NET et Unity) .

L'interface utilisateur

Comme beaucoup d'autres éditeurs, VS Code présente un explorateur sur la gauche de son interface montrant tous les fichiers et dossiers auxquels vous avez accès, un éditeur sur la droite, montrant le contenu des fichiers que vous avez ouverts.

Cette interface est divisée en cinq zones :

Chaque fois que vous chargez un projet dans VS Code, il apparaît dans le même état que lors de sa dernière fermeture. Le dossier, la disposition et les fichiers ouverts sont conservés.

2. Projet de site Web

Le logiciel et ses extensions étant installés sur votre PC, vous allez découvrir son utilisation à travers l'activité développée dans la suite du document. Nous nous fixons l'objectif suivant :

Préparer VS Code à un projet de site Web. C'est à dire : créer l'arborescence des dossiers d'un projet et concevoir les templates .html et .css .

Cahier des charges

On souhaite organiser les dossiers du projet comme sur la copie d'écran ci-dessous.

Étape 1 : créer un dossier
Avec l'IDE VS Code, un projet de site Web doit être contenu dans un dossier.
Étape 2 : placer le dossier dans Visual Studio Code

Étape 3 : créer les sous-dossiers

Étape 4 : Créer les fichiers

Étape 5 : Créer la structure de la page Web

*.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 
</body>
</html>
*.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Nom Prénom</title>
    <link rel="stylesheet" type="text/css" href="styles/style.css" />
</head>
<body>
    <h1>La page Web de votre_prénom votre_nom</h1>
    <h2>Elève de votre_classe à PEM</h2>
</body>
</html>
Étape 6 : Positionner les fenêtres dans l'éditeur
Lorsque la taille de l'écran le permet, il est pratique de disposer, en côte à côte, au moins deux fenêtres dans l'éditeur.

Exemple : travail simultané sur les fichiers index.html et style.css.

*.css
body {
    color: blue;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
 
h1 {
    font-size: large;
}
 
h2 {
    font-size: medium;
}