Home-theater-designers
Cada site que você usa depende de HTML. Enquanto os desenvolvedores da web precisam de habilidades em JavaScript, Python, CSS e scripts do lado do servidor, HTML mantém tudo junto.
Sem HTML, não há web, então você precisa saber como criá-lo e editá-lo. Em vez de configurar um sistema de teste de código HTML em seu computador, é mais simples testar o código em um navegador.
Seja mexendo em pequenos trechos de HTML ou em projetos completos de sites, um editor de HTML online é o ideal.
Por que você deve usar um editor de HTML online
Usar um editor de HTML baseado em navegador faz muito sentido em vez de algo como o Notepad ++ pelos seguintes motivos:
- Editores de HTML online executados diretamente em seu navegador da web
- Teste seu código HTML online --- veja se o código funciona conforme o esperado
- Veja visualizações da web em tempo real --- as atualizações de visualização conforme você edita
- Simplifique o seu fluxo de trabalho - sem mais salvar, carregar no navegador, voltar para o editor e repetir
- Independente de plataforma --- eles são executados em qualquer dispositivo com conexão à web.
Este último ponto é muito importante. Isso significa que você pode desenvolver uma página da web tão facilmente em um PC quanto um Chromebook. Você pode até usar um tablet Android ou um computador de $ 50 como o Raspberry Pi.
A codificação HTML é um portal acessível e direto para a compreensão da programação e do desenvolvimento. Você precisa testar constantemente seu código HTML --- nada melhor do que resultados ao vivo na janela do seu navegador?
Vejamos alguns dos melhores editores de HTML online disponíveis atualmente.
1 CodePen
CodePen é um 'ambiente de desenvolvimento social' para desenvolvedores web, o que basicamente significa que é um editor online com recursos de colaboração. Ele oferece um layout simples. Você encontrará um painel para HTML, um painel para CSS e um painel para JavaScript, mais um para visualização em tempo real. Todos os tamanhos de painel podem ser ajustados arrastando as bordas.
Você pode criar 'Canetas', que são como playgrounds individuais para ajustar o código da web. Múltiplas canetas podem ser agrupadas em coleções.
Embora a inscrição para uso básico seja gratuita, Canetas Particulares e Coleções exigem um Conta Pro . Isso começa em US $ 8 / mês e inclui hospedagem de ativos, temas incorporáveis, colaboração em tempo real e acesso ao IDE de desenvolvimento web completo da CodePen.
Muitas pessoas consideram o CodePen o melhor editor de HTML online. Experimente para ver se ele atende às suas necessidades.
2 JSFiddle
JSFiddle é basicamente o que parece: uma caixa de areia onde você pode mexer com JavaScript. Você provavelmente sabe que JavaScript anda de mãos dadas com HTML e CSS. Isso significa que, com o JSFiddle, você pode editar todos os três de uma vez com a interface de edição do JSFiddle.
Se quiser, você pode ignorar o JavaScript completamente.
O que é bom sobre o JSFiddle é que você pode adicionar Solicitações Externas na barra lateral. Isso permite que você inclua arquivos JavaScript e CSS externos para aprimorar seu HTML. Também é útil o botão Tidy, que limpa automaticamente a indentação do seu código, enquanto clicar em Colaborar permite a colaboração online em tempo real.
A única desvantagem é que você deve clicar no botão Executar para atualizar o painel de visualização.
3 JSBin
Considere JSBin como uma alternativa mais simples e limpa para JSFiddle. Você pode editar qualquer combinação de HTML, CSS e JavaScript apenas alternando os painéis com a barra de ferramentas superior. Para obter o máximo de flexibilidade, você também pode alternar o painel de visualização e um painel do console, conforme necessário.
como transferir dados de computador para computador
Mas enquanto o JSFiddle permite vincular recursos externos de CSS e JavaScript, o JSBin limita você a bibliotecas JavaScript predefinidas. A seleção é boa, variando de jQuery a React a Angular e muito mais.
Embora o JSBin seja gratuito e não exija uma conta, você precisará de um Conta Pro para recursos avançados. Isso inclui caixas privadas, incorporações personalizadas, hospedagem de ativos, sincronização do Dropbox e URLs personalizados para páginas publicadas por meio do JSBin.
Quatro. Liveweave
Liveweave é visualmente semelhante aos editores anteriores, com uma interface de usuário agradável. Como o JSFiddle, o Liveweave permite a colaboração em tempo real e, como o JSBin, permite vincular recursos de terceiros predefinidos como o jQuery.
Mas também possui alguns recursos exclusivos. O Lorem Ipsum Generator cria texto de espaço reservado na posição atual do cursor. O CSS Explorer fornece uma ferramenta WYSIWYG para criar estilos CSS e o Color Explorer ajuda a selecionar cores perfeitas. Enquanto isso, o Editor de vetores permite que você crie gráficos vetoriais para o seu site.
ok google eu quero ouvir
5 HTMLhouse
HTMLhouse é uma boa opção se você só se preocupa com HTML (ou seja, sem CSS ou JavaScript). Limpo e mínimo, é dividido verticalmente com edição à esquerda e visualização em tempo real à direita.
Útil é a capacidade de publicar seu HTML e compartilhá-lo de forma privada (via URL privada) ou publicamente (adicionado a Página de navegação do HTMLhouse ) É simples, mas eficaz, que é exatamente onde um editor de HTML online entra em ação e se destaca.
Observe que o HTMLhouse foi criado e é mantido pelo pessoal da Write.as , uma ferramenta de escrita online sem distrações. Lembre-se disso se você planeja escrever o conteúdo do seu próprio site.
6 HTMLG
Outra opção HTMLG segue o mesmo padrão de uso de código e painéis de visualização para HTML. No entanto, essa ferramenta não inclui CSS e JavaScript no mesmo projeto unificado. Em vez disso, se quiser editá-los, você precisará abrir uma nova guia e editá-los como projetos separados.
Isso o torna ideal para ajustes de HTML puro e código de teste em seu navegador; menos ainda se você quiser incorporar edições CSS.
Observe que há um limite de 300 palavras se você estiver testando páginas da web inteiras com HTMLG. Para aumentar isso, você pode se inscrever para a versão premium sem anúncios, a partir de apenas US $ 5,80 por mês.
7 Dabblet
Oferecendo uma visão ligeiramente diferente dos editores de HTML online, o Dabblet divide a tela em dois, em vez de três / quatro painéis. Portanto, você tem uma visão para HTML e Resultado e uma visão separada (mas vinculada) para CSS e Resultado.
Isso oferece mais espaço, dando uma visão mais clara do código e da visualização. Além disso, o validador embutido w3.org HTML e CSS destaca todos os problemas.
Se você precisa de um espaço livre na área de trabalho para testar o código do seu site, este pode ser o melhor editor de HTML para você.
Use os melhores editores de HTML online para aprimorar suas habilidades
Se sua única exposição ao HTML é o que você aprendeu há uma década, agora é a hora de atualizá-lo. HTML5 lançado em 2014 e introduziu um punhado de novos padrões e recursos. Não sabe por onde começar? Confira esses novos elementos HTML5 essenciais.
Quer aprender boas práticas em design e desenvolvimento de web em HTML5? Verifique estes sites com exemplos de codificação de HTML de qualidade . Você também deve dar uma olhada nessas outras ferramentas para atualizar suas habilidades de desenvolvimento web.
Compartilhado Compartilhado Tweet O email 15 Comandos do Prompt de Comando do Windows (CMD) que você deve conhecerO prompt de comando ainda é uma ferramenta poderosa do Windows. Aqui estão os comandos CMD mais úteis que todo usuário do Windows precisa saber.
Leia a seguir Tópicos relacionados- Programação
- Editor de texto
- Desenvolvimento web
- Editores WYSIWYG
- HTML5
- Scripting
Editor adjunto de segurança, Linux, DIY, programação e explicação técnica e produtor de podcasts realmente úteis, com vasta experiência em suporte de desktop e software. Um colaborador da revista Linux Format, Christian é um mexedor de Raspberry Pi, amante de Lego e fã de jogos retro.
Mais de Christian CawleyAssine a nossa newsletter
Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!
Clique aqui para se inscrever