Configurando o ambiente: editor de código e navegador

Antes de escrever qualquer HTML, você precisa de duas ferramentas básicas no seu computador: um lugar para escrever o código e um lugar para visualizar o resultado. A boa notícia é que ambas são gratuitas, leves e fáceis de instalar.

O que você vai precisar

Pense no desenvolvimento web como cozinhar. Para cozinhar, você precisa de dois ambientes: a cozinha — onde você prepara os ingredientes — e a mesa — onde você vê e experimenta o resultado final.

No desenvolvimento web:

• A cozinha é o seu editor de código
• A mesa é o seu navegador

Simples assim. Vamos conhecer cada um.

O editor de código

Um editor de código é como um Bloco de Notas turbinado. Ele foi criado especificamente para quem escreve código e oferece recursos que tornam o trabalho muito mais fácil e agradável.

Por que não usar o Bloco de Notas?

Tecnicamente, você poderia escrever HTML no Bloco de Notas — e funcionaria. Mas seria como cortar um bife com uma colher: dá para fazer, mas existe uma ferramenta muito melhor para isso.

Editores de código oferecem recursos como:

• Coloração de sintaxe — cada parte do código ganha uma cor diferente, tornando muito mais fácil identificar tags, atributos e conteúdo
• Indentação automática — o editor organiza o recuo do código automaticamente
• Autocompletar — começa a digitar uma tag e o editor sugere o restante
• Detecção de erros — avisa quando algo está errado antes mesmo de você abrir o navegador
• Extensões — pequenos complementos que adicionam funcionalidades extras

Visual Studio Code — o editor mais popular

O editor mais usado por desenvolvedores web no mundo hoje é o Visual Studio Code, conhecido carinhosamente como VS Code. Ele foi criado pela Microsoft, é completamente gratuito e funciona no Windows, no macOS e no Linux.

Como instalar o VS Code:

1. Acesse o site oficial: code.visualstudio.com
2. Clique no botão de download para o seu sistema operacional
3. Abra o instalador baixado e siga os passos na tela
4. Pronto — o VS Code está instalado!

Deixando o VS Code ainda mais poderoso

Após instalar o VS Code, existe uma extensão essencial para quem está aprendendo HTML: o Live Server.

O que é o Live Server?

O Live Server cria um servidor local no seu computador e atualiza a página no navegador automaticamente toda vez que você salva o arquivo. Sem precisar ficar apertando F5 o tempo todo.

É como ter um assistente que, toda vez que você escreve algo no código, já vai correndo até a mesa e atualiza o prato para você ver o resultado.

Como instalar o Live Server:

1. Abra o VS Code
2. Clique no ícone de Extensões na barra lateral esquerda (parece quatro quadrados)
3. Na barra de pesquisa, digite Live Server
4. Clique em Install na extensão de Ritwick Dey
5. Pronto!

Para usar, basta clicar com o botão direito no seu arquivo .html e selecionar "Open with Live Server".

O navegador

O navegador é o programa que lê o seu arquivo HTML e transforma o código em uma página visual. Você provavelmente já tem um instalado no seu computador.

Os principais navegadores são:

Qual navegador usar?

Para desenvolver, a recomendação é o Google Chrome ou o Mozilla Firefox. Ambos possuem as melhores ferramentas de desenvolvedor — recursos que permitem inspecionar o código, identificar erros e entender como a página está sendo renderizada.

💡 Não importa qual navegador você prefere para uso pessoal. Durante o desenvolvimento, use um que tenha boas DevTools. O Chrome é o mais popular entre desenvolvedores.

As Ferramentas de Desenvolvedor (DevTools)

Todo navegador moderno possui um conjunto de ferramentas chamado DevTools (Ferramentas de Desenvolvedor). É como um raio-X da sua página — você consegue ver exatamente o que está acontecendo por baixo do que aparece na tela.

Para abrir as DevTools:

• Windows/Linux: pressione F12 ou Ctrl + Shift + I
• macOS: pressione Cmd + Option + I

Você vai usar muito essa ferramenta ao longo dos seus estudos. Ao abrir o DevTools, você verá o código HTML da página, os estilos CSS aplicados e outros detalhes técnicos. Por enquanto, explore com curiosidade — mas não se preocupe em entender tudo agora.

Criando e abrindo seu primeiro arquivo HTML

Com o VS Code e o navegador instalados, vamos criar seu primeiro arquivo HTML e abri-lo:

Passo 1 — Crie uma pasta para o projeto

Organize seus projetos desde o início. Crie uma pasta no seu computador chamada, por exemplo, meus-projetos-html.

Passo 2 — Abra a pasta no VS Code

1. Abra o VS Code
2. Vá em File → Open Folder (ou Arquivo → Abrir Pasta)
3. Selecione a pasta que você criou

Passo 3 — Crie um arquivo HTML

1. No painel lateral do VS Code, clique no ícone de novo arquivo
2. Nomeie o arquivo como index.html
3. Pressione Enter

💡 Por que index.html? Por convenção, o arquivo principal de qualquer site se chama index.html. Quando você acessa um site sem especificar um arquivo, o servidor automaticamente procura e serve o index.html.

Passo 4 — Escreva o código inicial

No VS Code, com o arquivo index.html aberto, digite ! e pressione Tab. O VS Code vai gerar automaticamente a estrutura básica de um documento HTML para você — um atalho do Emmet, uma ferramenta já incluída no editor.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Altere o lang="en" para lang="pt-BR" e o conteúdo do <title> para o nome da sua página. Adicione um <h1> dentro do <body>:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minha primeira página</title>
</head>
<body>
    <h1>Olá, mundo! Meu HTML está funcionando!</h1>
</body>
</html>

Passo 5 — Abra no navegador

• Com o Live Server: clique com o botão direito no arquivo e selecione "Open with Live Server"
• Sem o Live Server: clique duas vezes no arquivo .html na sua pasta — ele vai abrir no navegador padrão do sistema

Se aparecer o texto "Olá, mundo! Meu HTML está funcionando!" na tela, parabéns — seu ambiente está configurado e pronto! 🎉

Resumindo