Éditeur de code

Créer une première page

1. 01

   Ouvrez l’onglet du fichier index.html.

2. 02

   Collez le HTML ci-dessous dans l’éditeur.

3. 03

   Le titre Hello apparaît dans « Aperçu ». L’aperçu se met à jour peu après l’arrêt de la saisie.

4. 04

   Ouvrez style.css et ajoutez le CSS ci-dessous. Le titre devient bleu.

5. 05

   Ouvrez script.js et ajoutez le JavaScript ci-dessous. Le titre devient It works.

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 id="greeting">Hello</h1>
  <script src="script.js"></script>
</body>
</html>

h1 { color: blue; }

document.querySelector("h1").textContent = "It works";

Le projet initial contient index.html, style.css et script.js. Le HTML doit référencer les fichiers CSS et JavaScript, comme dans cet exemple. Créer ces fichiers ne suffit pas pour que le navigateur les utilise.

Vérifier l’aperçu et la console

La zone « Aperçu » affiche la page produite par vos fichiers. Elle utilise index.html s’il existe, sinon le premier fichier HTML du projet. Les références locales aux fichiers CSS et JavaScript sont résolues à partir des dossiers du projet.

Ouvrez « Console » pour lire les messages et les erreurs de l’aperçu. Vous pouvez écrire console.log("Preview ready") dans votre JavaScript pour y afficher un message. Saisissez 2 + 3 dans le champ de la console, puis appuyez sur Entrée pour évaluer l’expression dans l’aperçu.

L’aperçu exécute du JavaScript destiné au navigateur. Il ne lance pas de serveur, n’installe pas de paquets et n’exécute ni Python, ni PHP, ni Java, ni d’autres langages côté serveur. Le choix d’un type de fichier permet d’en écrire le contenu, sans garantir que le navigateur puisse l’exécuter.

Le code s’exécute dans un cadre d’aperçu séparé, soumis aux restrictions du navigateur. Les scripts externes, les images et les requêtes réseau de votre code peuvent tout de même contacter d’autres sites. N’exécutez que du code dont vous comprenez les effets.

Ajouter, renommer et supprimer des fichiers

Cliquez sur « Ajouter un fichier », choisissez un type de fichier et saisissez un nom. L’extension choisie est ajoutée automatiquement. Si ce nom existe déjà, un numéro est ajouté pour éviter d’écraser le fichier existant.

Ouvrez un fichier par son onglet ou son nom dans « Dossiers et fichiers ». Les onglets affichent les fichiers du dossier sélectionné. Le bouton plus à côté d’un dossier permet d’y créer un fichier ou un sous-dossier.

Cliquez sur le crayon à côté du fichier pour le renommer. Entrée ou un clic hors du champ enregistre le nom, tandis qu’Échap annule la modification. Conservez l’extension du fichier, par exemple .css.

La croix sur l’onglet supprime le fichier après confirmation. Elle ne se contente pas de masquer l’onglet ouvert. Téléchargez une sauvegarde avant de supprimer un travail dont vous pourriez encore avoir besoin.

Renommer ou déplacer un fichier ne modifie pas les références dans le HTML. Si vous déplacez style.css dans un dossier assets, remplacez sa référence par assets/style.css. Une référence incorrecte peut empêcher le chargement des styles ou du script dans l’aperçu.

Organiser les fichiers en dossiers

Ouvrez le navigateur de dossiers pour parcourir le projet. Dépliez un dossier pour voir son contenu et sélectionnez-le pour afficher les onglets de ses fichiers. « Nouveau dossier » crée un dossier dans celui qui est sélectionné.

Glissez un fichier ou un dossier sur un autre dossier pour le déplacer. Sur un écran tactile, maintenez l’élément appuyé avant de le faire glisser. Un dossier ne peut pas être déplacé dans lui-même ni dans l’un de ses sous-dossiers.

Deux actions permettent de supprimer un dossier. « Supprimer le dossier » supprime le dossier et déplace son contenu à la racine du projet. « Supprimer le dossier et son contenu » supprime aussi les fichiers et sous-dossiers, après saisie de DELETE. Le dossier racine ne peut pas être supprimé.

Sur un grand écran, « Épingler en fenêtre flottante » garde le navigateur de dossiers accessible pendant l’édition. La commande de réduction replie la fenêtre et « Fermer » la ferme.

Séparer le travail en projets

« Projets » ouvre vos projets enregistrés. Sélectionnez-en un pour reprendre le travail, ou choisissez « Créer un projet » et saisissez un nom. Le crayon permet de renommer un projet et la commande de suppression le retire après confirmation.

Les projets sont enregistrés dans ce navigateur, sur cet appareil. L’indicateur de sauvegarde montre si les dernières modifications sont enregistrées. Cet enregistrement ne téléverse pas le projet vers un compte et ne crée pas de fichier de sauvegarde sur votre ordinateur.

« Exporter en ZIP » télécharge le projet actuel avec ses fichiers et dossiers. Gardez cette copie avant d’effacer les données du navigateur, de changer d’appareil ou de faire des modifications que vous pourriez vouloir annuler. L’éditeur actuel ne permet pas de restaurer un projet à partir d’un ZIP.

Partir d’un exemple fonctionnel

Sur ordinateur, « Modèles » propose les exemples « Jeu du serpent », « Calculatrice » et « Application de dessin ». Choisir un modèle crée un projet séparé avec ses propres fichiers HTML, CSS et JavaScript. Vos projets existants restent dans la liste.

Testez l’aperçu, modifiez une petite partie du code et vérifiez le résultat. Vous verrez plus facilement quel fichier agit sur chaque partie de la page.

Donner plus de place à l’éditeur

Sur ordinateur, « Disposition » permet de choisir la disposition. Faites glisser les séparateurs disponibles pour redimensionner les panneaux, ou utilisez leurs commandes de réduction et d’agrandissement. Le téléphone utilise une disposition compacte de l’éditeur et de l’aperçu, sans le sélecteur de disposition de la version ordinateur.

« Mode concentration » fait partie de la disposition de l’éditeur. Échap ferme les boîtes de dialogue, mais ne quitte pas ce mode. Utilisez à nouveau son bouton pour en sortir.

Améliorer la lisibilité du code

Dans « Paramètres », vous pouvez régler le thème de l’éditeur, les numéros de ligne, le retour à la ligne, la fermeture automatique des balises et des parenthèses, ainsi que la surbrillance de la ligne active. « Système » suit le réglage de votre appareil. « Sombre » et « Clair » imposent le thème choisi.

La section « Police » permet de choisir une police et une taille de 12 à 24 pixels. « Indentation » règle la largeur des tabulations sur deux, quatre ou huit espaces. Ces préférences sont conservées dans le navigateur.

« Supprimer toutes les données de l’éditeur » est une action distincte dans « Paramètres ». Elle supprime tous les projets, fichiers, données enregistrées, statistiques et préférences. Pour confirmer, vous devez saisir DELETE. Exportez d’abord les projets que vous souhaitez conserver.

Utiliser le clavier

Si le résultat ne s’affiche pas

Si l’aperçu est vide, vérifiez que le projet contient un fichier HTML avec du contenu visible. Si la page s’affiche sans styles ou sans les interactions attendues, vérifiez les noms et les chemins des fichiers référencés, y compris les éventuelles fautes de frappe.

Ouvrez « Console » pour consulter les erreurs JavaScript. Une erreur peut interrompre l’exécution des instructions suivantes dans le script. L’éditeur ne corrige pas automatiquement le code.

Si l’indicateur de sauvegarde ne revient pas à « Enregistré », gardez la page ouverte et exportez le projet avant de la recharger. La navigation privée, les restrictions de stockage ou l’effacement des données du site peuvent rendre les projets enregistrés indisponibles par la suite.