Preparando o ambiente: pasta, terminal e o arquivo .html

Nesta aula

Uma pasta, uma janela de texto e um arquivo. É todo o ambiente que você precisa.

Programador gosta de complicar o ambiente: dezenas de programas, configurações, extensões. Para o que vamos fazer, basta uma pasta bem nomeada, um terminal que você sabe abrir, e entender o que é um arquivo .html. Nesta aula você monta isso e termina com a primeira página aberta no navegador, escrita pela IA e lida por você.

• Ao final, você vai saber abrir o terminal e entrar na pasta do projeto em qualquer sistema.
• Vai entender o que é um arquivo .html e por que o navegador consegue mostrá-lo sem internet.
• Vai sair com uma página "olá" gerada pela IA, aberta no navegador e modificada por você.

A pasta do projeto

Tudo o que você criar no curso vai morar numa única pasta. Isso não é preciosismo: é o que define o que a IA enxerga. Quando você abre o Claude Code dentro de meu-projeto, ele vê o que está ali e nada mais. Se abrir na pasta "Documentos", ele vê os seus contratos, planilhas e fotos. Não queremos isso.

Três regras para a pasta:

• Nome sem espaço e sem acento. site-padaria, orcamento-oficina, fila-clinica. Espaço e acento funcionam na maioria dos casos, mas causam erro chato em terminal e em hospedagem. Evite desde o começo.
• Um lugar fácil de achar. Dentro de Documentos, ou direto na pasta do usuário. Anote o caminho.
• Só arquivos do projeto. O projeto.txt da aula 1 fica. Planilha de clientes, não.

O terminal sem medo

O terminal é uma janela onde você digita comandos em vez de clicar. Parece coisa de filme, mas você vai usar três comandos no curso inteiro. Abrir:

• Windows: aperte a tecla Windows, digite "Terminal" (ou "PowerShell") e abra. Alternativa mais fácil: no Explorador de Arquivos, abra a pasta do projeto, clique com o botão direito num espaço vazio e escolha "Abrir no Terminal". Assim ele já abre dentro da pasta.
• Mac: aperte Command + Espaço, digite "Terminal" e abra.
• Linux: procure "Terminal" no menu de aplicativos, ou Ctrl + Alt + T na maioria das distribuições.

Os três comandos

O cd é o mais importante. Depois de abrir o terminal, você digita cd, um espaço e o caminho da pasta, e aperta Enter. O terminal passa a "estar" naquela pasta. Se errar o nome, ele avisa que a pasta não existe: corrija e tente de novo. No Windows, o caminho costuma ser algo como cd Documentos\site-padaria (barra invertida); no Mac e no Linux, cd Documentos/site-padaria.

No Cursor, esse passo é o "abrir pasta" no menu. Ele já entende que aquela é a pasta do projeto, e o terminal, quando você precisar, abre dentro dela também.

O que é um arquivo .html

Um site é feito de arquivos de texto. O principal deles termina em .html. Se você abrir um .html no Bloco de Notas, vê texto comum com marcações entre sinais de menor e maior, as chamadas tags. O navegador lê essas marcações e desenha a página. Um exemplo mínimo:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <title>Padaria do Bairro</title>
</head>
<body>
  <h1>Olá, bem-vindo à Padaria do Bairro</h1>
  <p>Pão quente das 6h às 20h, todos os dias.</p>
  <a href="https://wa.me/5581900000000">Fale com a gente no WhatsApp</a>
</body>
</html>

Leia sem pressa. Quase tudo se explica sozinho:

• <title> é o nome que aparece na aba do navegador.
• <h1> é o título principal. <p> é um parágrafo. <a href="..."> é um link, e o endereço vai dentro das aspas.
• Toda tag que abre (<p>) fecha com barra (</p>). O conteúdo fica entre as duas.
• <head> guarda informações sobre a página; <body> guarda o que aparece na tela.
• charset="utf-8" é o que faz acento e cedilha aparecerem certos. Se um dia a sua página mostrar "é" no lugar de "é", é isso que está faltando.

Você não precisa decorar. Precisa reconhecer: quando a IA disser "coloquei o telefone num parágrafo abaixo do título", você abre o arquivo, procura o <h1>, e o <p> logo depois é o lugar. É esse nível de leitura que o curso pede.

Por que o navegador abre isso sem internet? Porque o arquivo está no seu disco. Duplo clique no index.html, e o navegador mostra a página com um endereço que começa com file://. Ninguém mais vê. É o ambiente de teste perfeito. Publicar, colocar num endereço que outras pessoas acessam, é assunto da aula 6.

Por que "index"

Por convenção, o arquivo index.html é a porta de entrada do site: quando alguém acessa o endereço sem apontar um arquivo, o servidor entrega o index.html. Por isso a página inicial se chama assim. Outras páginas podem ter qualquer nome, como cardapio.html ou contato.html.

A conversa com o código: pedir, olhar, ajustar

Agora junta tudo. Com o terminal dentro da pasta e o Claude Code aberto, o pedido para a primeira página fica assim:

Repare no formato do pedido: contexto (padaria em Recife), conteúdo (o que a página diz), requisitos (o que pode e o que não pode) e um pedido de explicação no fim. Esse último item é o que transforma a IA em professora: ela escreve e explica. Leia a explicação sempre.

A ferramenta vai pedir permissão para criar o arquivo. Aprove. Depois, abra a pasta, dê duplo clique no index.html e olhe no navegador. Se ficou diferente do que imaginava, descreva a diferença: "o botão do WhatsApp ficou pequeno demais no celular, aumente". Um ajuste por pedido. Quando terminar, abra o arquivo no editor e leia, procurando as tags que você acabou de conhecer.