outils:vscode:web [WebGEPEM]

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
[[web:accueilweb|{{ :iconemaison.jpg?nolink&25|Sommaire Web}}]]

==== IDE VSCode - Préparer un projet de site Web ====
[Mise à jour le 8/9/2026]

  * **Lien**
    * **Site** <html><a href="https://code.visualstudio.com/" target="_blank"> Visual Studio Code</a></html> 

  * **Lecture connexe**
    * Installation du logiciel : voir les **généralités** sur le [[outils:vscode:accueilvscode|Wiki VSCode]]

----


=== 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**

<callout type="primary" icon="true">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.</callout>
{{ :arduino:uivscode.jpg?nolink |}}

Cette interface est divisée en cinq zones :
  * **La barre d'activité** (Activity Bar) est située à l'extrême gauche. Cette barre vous permet de passer d'une vue à l'autre et vous fournit des indicateurs contextuels supplémentaires, tels que le nombre de changements sortants lorsque Git est activé.
  * **La barre latérale** (Side Bar) contient des vues différentes comme l'explorateur pour vous aider tout en travaillant sur votre projet.
  * **L’éditeur** (Editor Groups) – C’est la zone principale pour éditer vos fichiers. Vous pouvez ouvrir jusqu'à trois éditeurs côte à côte.
  * **Les panneaux** (Pannels) permettent d’afficher différents panneaux sous la zone de l'éditeur pour des informations de sortie ou de débogage, des erreurs et des avertissements, ou un terminal intégré. Le panneau peut également être déplacé vers la droite pour plus d'espace vertical.
  * **La barre d’état** (Status Bar) donne des informations sur le projet ouvert et les fichiers que vous modifiez.

<callout type="primary" icon="true">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.</callout>

=== 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 :

<callout type="warning" icon="true">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 .</callout>

----

**Cahier des charges**

On souhaite organiser les dossiers du projet comme sur la copie d'écran ci-dessous. 
{{ :web:cdcsite.png?nolink |}}

----

== Étape 1 : créer un dossier ==
    * Effectuez un clic droit dans le dossier **www** de votre compte sur le NAS_SIN et créez un dossier (**Nouveau** -> **Dossier**) que vous nommerez **//MonSitedeTest//**.
<callout type="primary" icon="true">Avec l'IDE VS Code, un **projet** de site Web doit être contenu dans un **dossier**.</callout>

== Étape 2 : placer le dossier dans Visual Studio Code ==
  * Ouvrez **VSCode** en cliquant sur l'icône {{:arduino:vscodeico.png?nolink&25|}} présente dans la **barre des tâches** du bureau.  
  * Dans le menu, sélectionnez **Fichier -> Ouvrir le dossier** et entrez le chemin d'accès à **//MonSitedeTest//**.
    * __Exemple__  
{{ :outils:vscode:bdialoguedossier.png?nolink |}}
  * Sélectionez **//MonSitedeTest//** et cliquez sur {{:outils:vscode:bpselec.png?nolink|}} et autoriser un éventuel message de sécurité
  * Le dossier doit apparaître dans VSCode comme ci-dessous.

== Étape 3 : créer les sous-dossiers ==
  * Dans la **barre d'activité**, cliquez sur l'icône **Explorateur** si celui-ci n'apparaît pas comme ci-dessous. {{ :outils:vscode:explorateur.png?nolink |}}

  * Cliquez sur l'icône "//nouveau dossier//" représentée ci-dessous et nommez-le //img//.
{{ :web:dossiervscode.png?nolink |}}

  * La fenêtre de l'**explorateur** doit ressembler à la copie d'écran ci-dessous.
{{ :web:dossier2vscode.png?nolink |}}

  * Répétez l'opération pour les autres dossiers du cahier des charges.

== Étape 4 : Créer les fichiers ==
  * Cliquez sur l'icône "//nouveau fichier//" représentée ci-dessous et nommez-le //index.html//.
{{ :web:fichiervscode.png?nolink |}}

  * Ajoutez le fichier //style.css// dans le répertoire //styles//.

  * La fenêtre de l'**explorateur** doit ressembler à la copie d'écran ci-dessous.
{{ :outils:vscode:sitedetest.png?nolink |}}

== Étape 5 : Créer la structure de la page Web ==
  * Sélectionnez le fichier **index.html** dans l'explorateur.

  * Entrez le texte "html" dans la fenêtre de l'éditeur et sélectionnez **html:5** comme ci-dessous.
{{ :web:html5.png?nolink |}}

     * La page //index.html// se remplit avec le squelette de code suivant.
<code html *.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>
</code>

  * Vous êtes prêt à créer votre page. Modifiez ce code comme ci-dessous. Faites un clic-droit dans la page et sélectionnez "//**Mettre le document en forme**//".

<code 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>
</code>

== Étape 6 : Positionner les fenêtres dans l'éditeur ==
<callout type="tip" icon="true">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.</callout>

//Exemple// : travail simultané sur les fichiers index.html et style.css. 
  * Cliquez sur l'icône "fractionner l'éditeur..." {{:outils:fractionner.png?nolink|}} en haut et à droite de l'éditeur.

  * Faites glisser les fichiers index.html et style.css pour que votre écran ressemble à la copie ci-dessous
{{ :outils:vscode:enteteprojet.png?nolink |}}

  * Ajoutez le code suivant dans style.css
<code css *.css>
body {
    color: blue;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

h1 {
    font-size: large;
}

h2 {
    font-size: medium;
}
</code>

  * Faites un clic droit dans la page CSS et sélectionnez "//**Mettre le document en forme**//".L'éditeur devrait ressembler à la copie ci-dessous.
{{ :outils:vscode:prepaprojet.png?nolink |}}

  * Faites un clic droit dans la page HTML et sélectionnez "//**Open in default Browser**//". Votre page s'ouvre dans un navigateur et présente le texte comme sur la copie d'écran ci-dessous.
{{ :outils:vscode:resultatmsdt.png?nolink |}}