Editores e Ferramentas HTML - Tutorial Gratuito Online

No capítulo anterior, aprendemos que HTML é uma linguagem de marcação usada para criar páginas web. Ao criar páginas web, você precisará das seguintes ferramentas e programas:

um editor de texto ou HTML para escrever e editar o código-fonte,
um navegador para verificar os resultados,
um validador — um programa especial que verifica a validade ou a correção sintática do código-fonte.

Vamos falar sobre cada um deles em detalhes.

Editores HTML

Existem vários editores profissionais que desenvolvedores web utilizam para programar. No entanto, nem todo editor consegue atender a todas as suas necessidades. Assim, um bom editor HTML deve ter as seguintes funcionalidades:

destaque de sintaxe — exibir o texto, especialmente o código-fonte, em diferentes cores e fontes,
suporte a abas — manter várias páginas web abertas em abas ao mesmo tempo,
verificação de erros em documentos HTML,
dobramento de código — ocultar grandes fragmentos de código para exibir apenas um resumo ou a primeira linha.

Os editores HTML mais populares são os listados abaixo:

Visual Studio Code — gratuito e de código aberto, é a recomendação padrão mais comum. Funciona no Windows, macOS e Linux. Seu ponto forte é o ecossistema de extensões: adicione o Prettier para formatar seu código automaticamente, o Live Preview (ou Live Server) para ver as alterações no navegador em tempo real, e o IntelliSense integrado para autocompletar tags e atributos.
Sublime Text — escolha este para máxima velocidade. Ele abre instantaneamente e permanece responsivo mesmo com arquivos muito grandes, o que o torna popular para edições rápidas. É um software pago, mas pode ser avaliado gratuitamente, e funciona nas três principais plataformas.
Notepad++ — um editor leve e gratuito, exclusivo para Windows. No macOS ou Linux, uma opção leve equivalente é o editor integrado (TextEdit no macOS, gedit/nano no Linux), ou simplesmente use o VS Code multiplataforma.
WebStorm — uma IDE completa da JetBrains. É um software pago (por assinatura) e mais pesado que os editores acima, mas inclui suporte avançado a refatoração, depuração e frameworks, o que o torna adequado para projetos maiores.

Se você está apenas começando e quer evitar configurações, pode usar o Bloco de Notas (Windows) ou o TextEdit (macOS) para escrever seu primeiro arquivo. No entanto, esses editores básicos não possuem destaque de sintaxe, por isso recomendamos começar com um editor gratuito que ofereça esse recurso, como o Visual Studio Code (qualquer plataforma) ou o Notepad++ (Windows). Assim que tiver um editor, aprenda a estrutura básica de um documento HTML antes de continuar.

Seu primeiro arquivo HTML

Os passos abaixo usam o Bloco de Notas do Windows porque ele está instalado em todas as máquinas Windows e não requer configuração. A mesma ideia se aplica a qualquer editor: escreva o código, salve-o com a extensão .html e abra-o em um navegador.

Passo 1. Abra o Bloco de Notas

Pressione a tecla Windows, digite Notepad e pressione Enter. (No macOS, abra o TextEdit e mude para o modo de texto simples via Formatar → Tornar Texto Simples.)

Passo 2. Escreva seu código

Escreva ou copie o HTML abaixo.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Simple example</h1>
    <p>Some text you want to show here</p>
  </body>
</html>

Experimente Você Mesmo »

Quando aberto em um navegador, este código renderiza uma página com o título "Simple example" em texto grande e negrito, seguido pelo parágrafo "Some text you want to show here".

Passo 3. Salve o documento HTML

Vá em File no menu do Bloco de Notas e escolha Save As. Dê um nome ao seu documento usando a extensão de arquivo .htm ou .html. (Recomendamos usar a extensão .html.) Certifique-se de definir a codificação como UTF-8 e defina o menu suspenso Save as type como All Files para evitar que o Windows adicione a extensão .txt. Salve o arquivo em uma pasta dedicada que você criará antecipadamente para armazenar todos os seus documentos HTML.

Passo 4. Verifique o arquivo HTML no navegador

Abra seu arquivo HTML em um navegador (clique com o botão direito no arquivo e escolha Open with). Você deverá ver o título e o parágrafo do código acima.

Navegador

Você precisará de um navegador para verificar arquivos HTML. Para começar, qualquer navegador como Google Chrome, Opera ou Firefox será suficiente, mas mais adiante você precisará de todos eles. O motivo é que cada navegador tem seu próprio mecanismo de renderização, e você precisará testar seu código em cada um deles. Os navegadores modernos também incluem Ferramentas do Desenvolvedor integradas (pressione F12 ou clique com o botão direito em um elemento e escolha Inspecionar). O DevTools permite inspecionar o HTML e o CSS de qualquer elemento em tempo real, ajustar estilos e ver o resultado imediatamente, e ler o Console, onde o navegador reporta erros e avisos de JavaScript. É a maneira mais rápida de descobrir por que uma página não aparece ou se comporta como o esperado. Para testes entre navegadores, você pode usar serviços online ou máquinas virtuais conforme seu projeto cresce.

Validador

Uma parte essencial do processo de desenvolvimento de páginas web é verificar a validade do código HTML. Validadores, programas ou serviços especiais podem ser usados para verificar a validade ou a correção sintática de um fragmento de código ou documento.

O serviço online mais comum é o validator.w3.org. Digite o URL de uma página web (ou cole seu código diretamente), e o serviço o verifica em relação ao padrão HTML. O resultado é uma lista de mensagens: Erros (em vermelho) sinalizam código que viola o padrão, como uma tag não fechada ou o nome de um elemento com erro de ortografia; Avisos (em amarelo) indicam coisas que são tecnicamente permitidas, mas não recomendadas. Se não houver problemas, você recebe uma mensagem verde confirmando que o documento é válido. Corrigir erros do validador é um bom hábito, pois a marcação inválida pode ser renderizada de forma inconsistente entre os navegadores.

Para verificar a validade de arquivos locais, você pode usar validadores online ou linters integrados em editores modernos como o Visual Studio Code. Alguns editores também oferecem verificação de sintaxe em tempo real enquanto você digita.

Prática

Quais dos seguintes editores HTML este capítulo recomenda? (Selecione todos que se aplicam)