Editor Online para Código HTML 5 (HTML, JavaScript and CSS)

Editor e Interpretador de Código HTML 5 (HTML, JavaScript and CSS) para Navegador

Ferramenta online para interpretação e execução de código HTML 5 (HTML, JavaScript and CSS) no navegador, sem instalação de programas adicionais. O processamento do código fornecido é local, no navegador. Assim, o código escrito não enviado para um servidor remoto.

Esta página é fornecida como uma conveniência para primeiros passos em programação. Caso você planeje programar em JavaScript, você deve configurar um ambiente de programação para a linguagem, como descrito aqui. Alternativamente, você pode usar o console embutido por um navegador moderno (como Firefox), como descrito aqui.

O editor integrado para escrita de código-fonte utiliza CodeMirror (versão 6). CodeMirror permite escolher entre as licenças MIT e GPL3. Neste caso, minha opção é pela licença MIT.

Instruções

Para criar seu programa, escreva o código na caixa de texto fornecida. Para executar o código criado, aperte o botão Executar. Você também pode usar o atalho Ctrl Enter ou o atalho Shift Enter para executar o código usando o teclado.

Por conveniência, a saída de console.log() é apresentada em Saída do Programa. Você também pode visualizá-la usando o console (terminal) de seu navegador (teclado de atalho: F12; como descrito aqui).

Configurações para o Editor

O editor possui algumas configurações:

• Indentar código usando TAB?: Caso a opção seja marcada, TAB indentará o código em um nível e Shift TAB "desindentará" de um nível (removerá um nível de indentação).

  A opção está desabilitada por padrão por uma questão de acessibilidade. TAB e Shift TAB podem ser usadas para navegar em uma página usando teclado, alterando entre campos e opções no navegador.

  Caso a opção seja habilitada, a navegação não será possível normalmente. Para fazê-la, pode-se usar, respectivamente, ESC TAB (ESC, depois TAB) e ESC Shift TAB (ESC, depois Shift TAB).

• Recarregar código automaticamente após alterações?: Caso a opção seja marcada, o código será executado automaticamente após alguns momentos quando você modificar os valores para HTML ou CSS do código-fonte. O código JavaScript não será executado automaticamente (para evitar as mensagens de alerta em caso de erros).

• Avançado: habilitar modo Vim?: Opção experimental. Esta opção não é recomendada para iniciantes.

  Caso a opção seja marcada, a edição de texto usará o estilo modal de edição de texto adotado pelo editor Vim.

  A funcionalidade utiliza Codemirror-vim, com licença MIT.

Programa