Éditeur HTML et Exécuteur de Code en Ligne avec Aperçu en Direct
Écrivez du HTML, CSS et JavaScript et voyez la page se mettre à jour pendant que vous tapez. Gratuit, sans inscription.
Édition locale — les ressources externes peuvent envoyer des données
Espace de travail de l'éditeur HTML
PrêtModifications en attenteExécution…Aperçu mis à jourMis à jour avec des erreursAperçu non mis à jourExécution automatique en pauseLa page a mis trop de temps à charger, l'aperçu n'a donc pas été mis à jour. Vérifiez la présence d'une boucle infinie, puis appuyez sur Exécuter.La page a tenté d'ouvrir une autre adresse. La navigation est bloquée dans l'aperçu, la version précédente est donc toujours affichée.Votre code dépasse 2 Mo, ce qui est trop volumineux pour être prévisualisé ou sauvegardé dans ce navigateur. Téléchargez-le et ouvrez-le plutôt dans Phoenix Code.L'exécution automatique est désactivée pour le code de plus de 1 Mo. Appuyez sur Exécuter pour mettre à jour l'aperçu.La dernière exécution ne s'est pas terminée, possiblement à cause d'une boucle infinie. L'exécution automatique est en pause : corrigez le code, puis appuyez sur Exécuter.La sortie de la console de votre page apparaîtra ici.Éditeur de code index.htmlÉditeur de code style.cssÉditeur de code script.jsCe fichier est très volumineux, la coloration syntaxique et la saisie semi-automatique sont donc désactivées pour préserver la vitesse de frappe.Code copié en tant que fichier HTML unique.Impossible de copier. Téléchargez plutôt index.html, ou sélectionnez le code et copiez-le.Code copié. Dans Phoenix Code, fermez l'écran d'accueil s'il s'affiche, remplacez index.html par votre page copiée, enregistrez, et ouvrez l'Aperçu en direct.Copier le code pour continuerOuvrir Phoenix CodeCopie du code…Votre code a été modifié. Copiez-le à nouveau avant de continuer.index.html téléchargé, avec votre CSS et JavaScript inclus.Impossible de créer le téléchargement. Utilisez plutôt Copier tout.Fichiers de démarrage restaurés.Ce navigateur n'enregistre pas votre brouillon. Téléchargez votre code pour le conserver.alert() de votre pageconfirm() a retourné false dans l'aperçuprompt() a retourné null dans l'aperçuLes requêtes réseau telles que fetch sont bloquées dans l'aperçu.Les liens ne s'ouvrent pas dans l'aperçu :La soumission de formulaire est bloquée dans l'aperçu. Gérez l'événement submit dans script.js pour tester votre formulaire.Les fenêtres pop-up sont bloquées dans l'aperçu.Impossible de charger :La sortie de la console a été limitée pour maintenir la réactivité de l'aperçu.La page a signalé une erreur inconnue.Arrêt d'une boucle qui s'est exécutée pendant plus d'une seconde sans pause. Elle pourrait ne jamais se terminer.Aperçu en direct de votre page
HTML, CSS & JavaScriptVotre brouillon est enregistré dans ce navigateur
Prêt
Le CSS et le JS se chargent automatiquementÉchap, puis Tab, quitte l'éditeur
Appuyez sur Contrôle ou Commande plus Entrée pour exécuter. Lorsque Tab insère une indentation, appuyez sur Échap puis sur Tab pour déplacer le focus hors de l'éditeur.
Aperçu en direct
Votre page s'affichera ici
Saisissez du texte dans l'éditeur ou appuyez sur Exécuter pour en faire le rendu.
Console
Comment créer un fichier HTML
Un fichier HTML est un fichier de texte brut enregistré avec l'extension .html. Pour en créer un, ouvrez un éditeur de texte, saisissez le squelette de page ci-dessous, enregistrez le fichier sous le nom index.html, et ouvrez-le dans un navigateur. La page de démarrage dans l'éditeur ci-dessus contient déjà ce squelette, vous pouvez donc aussi l'éditer là et appuyer sur Télécharger.
Ouvrez un éditeur de texte brut : Bloc-notes sur Windows, TextEdit sur Mac (choisissez d'abord Format, puis Convertir au format texte), ou un éditeur de code tel que Phoenix Code ou VS Code (Fichier, puis Nouveau fichier).
Saisissez le squelette HTML : la ligne doctype, puis les balises html, head et body, avec un titre dans head et votre texte dans body. Copiez l'exemple ci-dessous pour commencer.
Enregistrez-le sous le nom index.html. Dans le Bloc-notes, définissez d'abord le Type de fichier sur Tous les fichiers, sinon le fichier deviendra index.html.txt et s'ouvrira en tant que texte brut au lieu d'une page web. N'importe quel nom fonctionne tant qu'il se termine par .html et ne contient pas d'espaces.
Ouvrez le fichier : double-cliquez dessus et votre navigateur affichera la page. Pour créer un fichier HTML sans rien enregistrer sur votre ordinateur, collez le squelette dans l'éditeur ci-dessus et appuyez sur Télécharger.
Les mêmes étapes s'appliquent à toutes les formulations de la question. Créer un fichier HTML, créer un document HTML ou démarrer un nouveau fichier .html revient à saisir ce squelette et à l'enregistrer avec l'extension .html.
<!doctype html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, world</h1>
<p>This is my first web page.</p>
</body>
</html>
Exécuter du HTML, CSS et JavaScript en ligne
Cet éditeur HTML en ligne vous fournit trois fichiers, index.html, style.css et script.js, avec un aperçu en direct à côté. Saisissez ou collez du code et la page s'exécute automatiquement, ou appuyez sur Exécuter (Ctrl/Cmd + Entrée) pour l'exécuter immédiatement. Il fait ce que les gens recherchent dans un compilateur HTML ou un exécuteur de code, bien que rien ne soit compilé : votre navigateur effectue le rendu du HTML, applique le CSS et exécute le JavaScript exactement comme il le ferait pour une vraie page web.
Un éditeur HTML en temps réel avec aperçu en direct
L'aperçu se met à jour environ une demi-seconde après que vous ayez arrêté de taper. Chaque nouvelle version se charge en arrière-plan et ne remplace l'ancienne que lorsqu'elle est prête. Basculez entre les largeurs responsive, bureau, tablette et mobile pour vérifier une mise en page. Ouvrez la console pour la sortie de console.log et les erreurs JavaScript ; cliquez sur un fichier et une ligne lorsqu'un emplacement est disponible.
Tester du code HTML dans un bac à sable privé
Cet éditeur traite votre code et enregistre votre brouillon dans votre navigateur. Il ne téléverse pas votre code. L'aperçu bloque les liens, les soumissions de formulaires, les pop-ups, fetch et XMLHttpRequest. Les scripts, feuilles de style, images et polices HTTPS peuvent toujours se charger. Le code et les bibliothèques que vous exécutez peuvent envoyer des données via ces ressources, y compris le contenu de la page. Exécutez uniquement du code de confiance.
Comment exécuter un fichier HTML
Collez votre HTML dans index.html, ou modifiez la page de démarrage. Mettez le CSS dans style.css et le JavaScript dans script.js ; ils sont ajoutés automatiquement à la page.
Regardez l'aperçu se mettre à jour pendant que vous tapez, ou appuyez sur Exécuter (Ctrl/Cmd + Entrée).
Ouvrez la console pour vérifier les erreurs. Cliquez sur l'emplacement d'une erreur pour accéder à cette ligne.
Téléchargez index.html pour obtenir un fichier unique avec votre CSS et JavaScript inclus. Ouvrez-le dans n'importe quel navigateur, ou dans Phoenix Code pour continuer à développer.
Éditeur HTML en ligne ou Phoenix Code ?
Cette page est conçue pour des expérimentations rapides et l'apprentissage. Quand une page devient un projet, Phoenix Code est un éditeur de code gratuit et open-source pour le développement web. Il fonctionne dans votre navigateur sur web.phcode.dev et en tant qu'application de bureau pour Windows, Mac et Linux.
Fonctionnalité
Cet éditeur en ligne
Phoenix Code
Fichiers
index.html, style.css et script.js
Projets entiers, avec des dossiers et un nombre illimité de fichiers
Aperçu
Aperçu en direct en bac à sable sur cette page
Aperçu en direct qui surligne l'élément que vous modifiez
Sauvegarde
Un brouillon dans ce navigateur, et un fichier HTML à télécharger
Vos fichiers, sauvegardés dans votre dossier de projet
Aide au codage
Saisie semi-automatique et une console
Suggestions de code, Emmet et validation HTML, plus Git dans l'application de bureau
Coût
Gratuit, sans inscription
Édition Community gratuite, avec des fonctionnalités Phoenix Pro en option
Questions sur l'éditeur HTML
Comment exécuter du code HTML en ligne ?
Collez votre code dans index.html. L'aperçu l'exécute automatiquement lorsque vous arrêtez de taper, ou vous pouvez appuyer sur Exécuter ou Ctrl/Cmd + Entrée pour l'exécuter immédiatement. Le CSS de style.css et le JavaScript de script.js sont ajoutés à la page pour vous.
Est-ce un compilateur HTML ?
Le HTML n'est pas compilé. Les gens recherchent un compilateur HTML ou un exécuteur de code quand ils veulent voir ce que fait leur code, et c'est ce que cet éditeur montre : votre navigateur effectue le rendu du HTML et exécute le JavaScript directement. Les erreurs JavaScript apparaissent dans la console ; la validité du HTML et du CSS n'est pas vérifiée.
Puis-je utiliser des frameworks CSS et des bibliothèques JavaScript ?
Oui. Liez-les depuis une URL https, par exemple un lien CDN Bootstrap ou Tailwind dans index.html. Les requêtes réseau effectuées par votre propre code, telles que fetch ou XMLHttpRequest, sont bloquées dans l'aperçu.
Est-ce gratuit et faut-il un compte ?
Il est gratuit et ne requiert aucun compte. Cet outil ne téléverse pas votre code. Le code et les ressources externes que vous exécutez peuvent contacter d'autres serveurs et envoyer des données. Un brouillon est conservé dans ce navigateur pour que vous puissiez y revenir.
Comment sauvegarder mon code ou continuer à travailler dans Phoenix Code ?
Téléchargez index.html pour enregistrer un seul fichier avec votre CSS et JavaScript inclus, ou utilisez Copier tout. Pour continuer dans Phoenix Code, sélectionnez Copier le code pour continuer, puis Ouvrir Phoenix Code une fois la copie réussie. Fermez l'écran d'accueil s'il s'affiche, ouvrez index.html dans un projet, remplacez son contenu par la page copiée, enregistrez, et ouvrez l'Aperçu en direct. Votre code n'est pas transféré automatiquement.
Quel est le meilleur éditeur HTML gratuit pour Windows, Mac ou Linux ?
Le meilleur est celui qui correspond à votre façon de travailler. Phoenix Code est un éditeur HTML gratuit et open-source pour Windows, Mac et Linux qui fonctionne également dans le navigateur. C'est le successeur d'Adobe Brackets et il intègre l'Aperçu en direct, les suggestions de code et Emmet.
Comment créer un fichier index.html ?
Créez un nouveau fichier de texte brut, collez-y le squelette HTML et enregistrez-le sous le nom exact index.html. Dans le Bloc-notes, définissez le Type de fichier sur Tous les fichiers pour qu'il ne devienne pas index.html.txt. Les serveurs web ouvrent d'abord index.html, c'est pourquoi la page d'accueil d'un site utilise ce nom. Dans cet éditeur, le fichier de démarrage s'appelle déjà index.html, donc appuyer sur Télécharger vous en donnera un.
Dernière mise à jour :
Créez le site entier dans Phoenix Code
Travaillez avec des projets entiers et l'Aperçu en direct dans l'édition Community gratuite. Phoenix Pro ajoute l'édition visuelle du texte, des images et des styles. L'application de bureau inclut un essai Pro de 7 jours ; l'édition Community reste gratuite ensuite.