Do código à prévia: experimente textos, cores e layouts no navegador.
HTML, estilos e scripts podem ficar no mesmo documento. A prévia automática usa HTML/CSS; JavaScript exige ativação nas opções.
👁️ Atualize para ver seu HTML aqui.
·
Trocar uma cor, ajustar um espaço e ver o resultado ajuda a entender como HTML e CSS trabalham juntos. Este HTML viewer oferece o código e a prévia lado a lado, com modos separados para concentrar a atenção em um deles. O exemplo inicial já vem pronto para você editar.
Comece pelo título do cartão ou pela cor do botão. Depois compare a largura disponível com a referência de celular. Copie o código para seu projeto ou baixe um arquivo quando quiser continuar fora daqui. Nada precisa ser publicado para fazer essas experiências.
HTML organiza o conteúdo: títulos, parágrafos, listas e botões. CSS define como essa estrutura aparece, incluindo cores, tamanhos, espaçamento e distribuição. JavaScript acrescenta comportamento, como mudar uma mensagem quando alguém clica. Separar esses papéis facilita descobrir o que ajustar.
No exemplo, edite primeiro o texto do título. Depois procure a regra do botão no bloco de estilos e altere sua cor. A interação de clique depende da opção JavaScript, que começa desligada. Se está dando os primeiros passos, veja como começar a programar do zero para organizar o aprendizado sem tentar dominar tudo ao mesmo tempo.
A fonte é o texto que você escreveu. A prévia é o documento que o navegador constrói a partir dela. Esses dois formatos não são sempre iguais: o parser pode completar elementos ou reorganizar marcação que ficou incompleta. Por isso, uma página aparecer não significa que todas as tags e atributos estão corretos.
O painel conserva sua fonte para copiar e baixar. A preparação da prévia retira alguns elementos de navegação e aplicação externa, sem reescrever o que está no editor. Se a apresentação divergir do projeto final, confira a estrutura, as classes e os recursos usados antes de procurar uma falha no CSS.
Quando o layout sair do esperado, reduza o trecho até sobrar o componente que precisa testar. Confira se a classe citada no CSS é a mesma do elemento e se existe uma regra mais específica alterando o resultado. Observe também margens, preenchimento interno e largura do contêiner.
Teste uma alteração por vez: primeiro o conteúdo, depois o espaço e então a distribuição. O exemplo foi pensado para esse exercício. Você pode desfazer etapas da sessão e comparar o efeito de uma mudança, em vez de substituir o documento inteiro sem saber qual regra fez diferença.
O seletor permite usar a largura disponível ou referências de 390, 768 e 1.024 pixels CSS. Uma largura fixa pode precisar de rolagem dentro do painel, especialmente quando o editor ocupa só metade da página. A largura informada pertence ao documento da prévia, não a um modelo específico de aparelho.
Compare um título longo, o preenchimento do cartão e o espaço entre elementos. Se houver media queries, observe em qual largura elas passam a valer. Uma simulação visual não substitui abrir o projeto no celular: fontes disponíveis, teclado, toque e outros detalhes do ambiente também influenciam o uso.
A abertura aceita arquivos HTML em UTF-8 até o limite indicado. Se o arquivo não puder ser lido, a fonte atual continua no editor. Antes de substituir um trecho importante, copie ou baixe uma versão. As etapas de Desfazer ajudam na sessão, mas não formam um histórico permanente.
O download inclui o texto original com identificação UTF-8, para reduzir ambiguidades de codificação. Ele não incorpora imagens, fontes ou folhas de estilo externas. Se sua página depende desses arquivos, mantenha a estrutura do projeto e confira os caminhos quando levar o HTML para outro lugar.
Esta ferramenta é prática para componentes e experiências visuais. Quando o projeto exigir servidor, acesso autenticado, integração de APIs ou pacotes que precisam de compilação, use um ambiente apropriado. Copiar um exemplo que depende de uma biblioteca não instala essa biblioteca no navegador.
Para escrever conteúdo em marcação simples e gerar HTML, o Editor Markdown relacionado abaixo tem outra finalidade. Para conferir tamanho de textos, use o Contador de Caracteres. Escolher a ferramenta pelo formato de entrada evita tentar resolver um problema de estrutura com um contador ou um problema de conteúdo com regras de estilo.
É um editor HTML online para escrever código e conferir a aparência no navegador. Você pode testar trechos ou documentos com HTML e CSS, comparar larguras e baixar um arquivo. O exemplo inicial permite começar pelas cores, textos e espaços antes de montar uma página maior.
Escreva o HTML e coloque os estilos em um bloco style no mesmo código. A prévia automática de HTML/CSS atualiza após uma pausa na digitação. Você também pode usar Atualizar prévia. O código fica em uma área separada da visualização, sem alterar os estilos do site onde a ferramenta está aberta.
Sim, por escolha nas opções da prévia. Ao ativar JavaScript, a atualização automática fica desligada: você executa somente ao clicar em Atualizar prévia ou usar Ctrl/Command + Enter. A prévia continua sem acesso direto à página principal. Execute apenas código que você conhece; um laço longo pode travar a aba.
Ative Permitir recursos HTTPS nas opções e atualize a prévia. Para scripts externos, ative também JavaScript. Recursos externos podem fazer requisições a terceiros. URLs relativas não têm a mesma base do seu projeto, então prefira URLs HTTPS completas. A ferramenta não instala dependências nem oferece um servidor de desenvolvimento.
O módulo edita e prepara a prévia no navegador, sem enviar o código a uma API ou salvá-lo em histórico. Recursos externos podem ser solicitados se você permitir. JavaScript ativado pode tentar navegar a própria prévia; por isso não há promessa de ausência total de conexões para código executável. Outros componentes do site têm suas próprias políticas.
Use Abrir HTML e escolha um arquivo .html ou .htm em UTF-8 de até 256 KiB. O arquivo é lido no navegador. Se houver código próprio no editor, a substituição pede confirmação. Arquivo grande, inválido ou com outra codificação é recusado sem apagar o trabalho atual.
O download contém o código original do editor em UTF-8 com marcador de codificação. A prévia aplica restrições a scripts, navegação e recursos que não são adicionadas ao arquivo. Ao abrir o HTML fora do painel, essas permissões da prévia não se aplicam. Confira o código antes de publicar ou abrir arquivos de terceiros.
Escolha a largura de 390 px ou outra referência no seletor da prévia. O painel mostra o conteúdo naquela largura, com rolagem interna quando necessário. Isso ajuda a verificar media queries e quebras, mas não simula o sistema, o toque, a densidade ou todas as características de um aparelho real.
A prévia desativa navegação de links para fora do documento, envio de formulários, pop-ups e páginas incorporadas. Links para âncoras do próprio documento podem funcionar. Para testar um site completo, autenticação ou envio de dados, use um ambiente de desenvolvimento próprio. A fonte original não é alterada por essas restrições.
Não é um validador de conformidade. O navegador pode corrigir marcação incompleta e ainda mostrar uma página, então aparência correta não prova que o código segue o padrão. Use um verificador de HTML e as ferramentas de desenvolvimento para investigar estrutura, acessibilidade e comportamento no projeto final.
Use Desfazer e Refazer nas opções de edição. A ferramenta guarda até vinte etapas nesta aba, com limite de tamanho para cada cópia. Isso ajuda na edição atual, mas não substitui um arquivo salvo. Ao fechar a página, não conte com recuperação automática do trabalho.
PHP precisa de servidor e não é executado aqui. JSX, pacotes e ferramentas de build também não são convertidos automaticamente. Um e-mail pode ser inspecionado como HTML, mas o resultado no navegador não reproduz as regras de cada cliente de e-mail. Teste o formato no ambiente onde será usado.
