Exécutez HTML, CSS et JS En ligne

Écrivez des pages Web complètes avec HTML, CSS et JavaScript, le tout dans un seul éditeur.

Introduction

Les pages Web modernes sont construites avec trois technologies de base : HTML pour la structure, CSS pour le style et JavaScript pour l'interactivité. Notre programme d'exécution de code en ligne prend en charge les trois dans un seul éditeur : écrivez une page Web complète et voyez-la rendue instantanément.

Comment écrire du HTML, du CSS et du JS ensemble

Dans notre HTML Code Runner, vous rédigez un document HTML complet qui inclut CSS et JavaScript en ligne. Voici comment ils fonctionnent ensemble :

  • HTML : définissez la structure et le contenu de votre page
  • CSS — Ajoutez des styles à l'aide des balises
  • JavaScript — Ajoutez de l'interactivité à l'aide des balises

Exemple : HTML, CSS et JavaScript combinés

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; text-align: center; padding: 2rem; }
    button { padding: 0.8rem 2rem; font-size: 1.1rem; cursor: pointer; }
    #counter { font-size: 3rem; margin: 1rem; color: #6C5CE7; }
  </style>
</head>
<body>
  <h1>Click Counter</h1>
  <div id="counter">0</div>
  <button onclick="count()">Click Me</button>
  <script>
    let n = 0;
    function count() {
      n++;
      document.getElementById('counter').textContent = n;
    }
  </script>
</body>
</html>

Ce que vous pouvez construire

  • Formulaires interactifs avec validation
  • Pages de destination animées
  • Tableaux de bord de visualisation de données
  • Prototypes de jeux
  • Art et animations CSS
  • Applications connectées à l'API (récupérer des données externes)

Conseils pour le code multilingue

  • Mettez CSS dans le pour éviter le FOUC (flash de contenu non stylé)
  • Mettez JavaScript à la fin de ou utilisez différer
  • Utiliser le panneau de sortie de la console pour déboguer les erreurs JavaScript
  • Testez les conceptions réactives en redimensionnant la fenêtre de votre navigateur

Foire aux questions

Oui. Utilisez des balises de lien pour les balises CSS et de script avec des attributs src pour charger des ressources externes à partir de CDN.

Oui. Incluez le lien Bootstrap CDN dans votre section d'en-tête HTML et toutes les classes Bootstrap fonctionneront dans l'aperçu.

Oui. Incluez la balise de script jQuery CDN et vous pourrez utiliser la syntaxe jQuery dans votre code.

Ressources connexes