Esegui HTML, CSS e JS online

Scrivi pagine web complete con HTML, CSS e JavaScript, tutto in un unico editor.

Introduzione

Le pagine web moderne sono realizzate con tre tecnologie fondamentali: HTML per la struttura, CSS per lo stile e JavaScript per l'interattività. Il nostro code runner online li supporta tutti e tre in un unico editor: scrivi una pagina web completa e visualizzala immediatamente.

Come scrivere insieme HTML, CSS e JS

Nel nostro HTML Code Runner, scrivi un documento HTML completo che include CSS e JavaScript in linea. Ecco come lavorano insieme:

  • HTML: definisci la struttura e il contenuto della tua pagina
  • CSS: aggiungi stili utilizzando i tag
  • JavaScript: aggiungi interattività utilizzando i tag

Esempio: combinazione HTML, CSS e JavaScript

<!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>

Cosa puoi costruire

  • Moduli interattivi con convalida
  • Pagine di destinazione animate
  • Dashboard di visualizzazione dei dati
  • Prototipi di giochi
  • Grafica e animazioni CSS
  • Applicazioni connesse all'API (recupera dati esterni)

Suggerimenti per il codice multilingue

  • Inserisci CSS nel per evitare FOUC (flash di contenuto senza stile)
  • Inserisci JavaScript alla fine di o utilizza defer
  • Utilizza il pannello di output della console per eseguire il debug degli errori JavaScript
  • Prova i design reattivi ridimensionando la finestra del browser

Domande frequenti

SÌ. Utilizza tag di collegamento per CSS e tag di script con attributi src per caricare risorse esterne dai CDN.

SÌ. Includi il collegamento CDN Bootstrap nella sezione head HTML e tutte le classi Bootstrap funzioneranno nell'anteprima.

SÌ. Includi il tag dello script CDN jQuery e potrai utilizzare la sintassi jQuery nel tuo codice.

Risorse correlate