Execute HTML, CSS e JS Online

Escreva páginas da web completas com HTML, CSS e JavaScript — tudo em um editor.

Introdução

As páginas da web modernas são construídas com três tecnologias principais: HTML para estrutura, CSS para estilo e JavaScript para interatividade. Nosso executor de código on-line oferece suporte a todos os três em um único editor: escreva uma página da Web completa e veja-a renderizada instantaneamente.

Como escrever HTML, CSS e JS juntos

Em nosso HTML Code Runner, você escreve um documento HTML completo que inclui CSS e JavaScript embutidos. Veja como eles funcionam juntos:

  • HTML — Defina a estrutura e o conteúdo da sua página
  • CSS — Adicione estilos usando tags
  • JavaScript — Adicione interatividade usando tags

Exemplo: HTML, CSS e JavaScript combinados

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

O que você pode construir

  • Formulários interativos com validação
  • Páginas de destino animadas
  • Painéis de visualização de dados
  • Protótipos de jogos
  • Arte e animações CSS
  • Aplicativos conectados à API (busca dados externos)

Dicas para código multilíngue

  • Coloque CSS no para evitar FOUC (flash de conteúdo sem estilo)
  • Coloque JavaScript no final de ou use defer
  • Use o painel de saída do console para depurar erros de JavaScript
  • Teste designs responsivos redimensionando a janela do seu navegador

Perguntas frequentes

Sim. Use tags de link para CSS e tags de script com atributos src para carregar recursos externos de CDNs.

Sim. Inclua o link Bootstrap CDN na seção principal do HTML e todas as classes Bootstrap funcionarão na visualização.

Sim. Inclua a tag de script jQuery CDN e você poderá usar a sintaxe jQuery em seu código.

Recursos relacionados