Do editor ao navegador
Até aqui você digitou HTML em células da plataforma. Uma página de verdade mora num arquivo no seu computador, e vale saber criá-lo, abri-lo e inspecioná-lo.
Estudar esta lição interativa →Tudo o que você escreveu até aqui rodou dentro de uma célula desta plataforma. Mas ninguém visita uma página dentro de uma célula: a página de verdade é um arquivo que o navegador abre. Se você nunca criou um, o primeiro passo parece um mistério (onde escrever? como abrir?), e a resposta é bem mais simples do que parece: um editor de texto, um arquivo com a extensão certa e um duplo clique.
1. Crie uma pasta
Por exemplo, meu-site, em um lugar fácil de achar (Documentos ou Área de Trabalho). Tudo da sua página vai morar nela: o HTML, as imagens e, nos próximos cursos, o CSS e o JavaScript.
2. Crie o index.html
index.htmlNum editor de código (o Visual Studio Code é gratuito e muito usado; o Bloco de Notas também serve), cole o esqueleto da lição anterior e salve com o nome index.html. O nome index.html é o que os servidores abrem por padrão quando alguém visita a pasta de um site.
3. Cuidado com a extensão
O arquivo precisa terminar em .html. O Windows costuma esconder as extensões e, no Bloco de Notas, é fácil salvar como index.html.txt sem perceber: nesse caso o navegador mostra o código como texto em vez de desenhar a página. Ative a exibição de extensões nas opções do Explorador de Arquivos.
4. Salve em UTF-8
É a codificação que o meta charset UTF-8 promete. O Visual Studio Code já salva assim por padrão; no Bloco de Notas, confira o campo Codificação na janela Salvar como. Foi disso que falamos no aviso dos acentos quebrados (ação).
5. Abra no navegador
Dê um duplo clique no arquivo, ou arraste-o para uma janela do navegador. O endereço começa com file:// porque a página está sendo lida direto do seu disco, sem internet.
6. Edite, salve, recarregue
Mude o texto no editor, salve (Ctrl+S) e volte ao navegador apertando F5 (ou Ctrl+R). Esse ciclo de três passos é o dia a dia de quem programa para a web.
Criar pasta, arquivo e extensão e abrir as ferramentas do navegador (F12) são passos de computador; no celular eles são trabalhosos ou nem existem. Você não precisa parar: faça a lição no próprio editor da plataforma. Toque em Playground (botão no topo da tela), escolha a aba HTML + JS, cole o esqueleto da lição anterior e aperte Rodar. Ele faz o papel do index.html e do navegador ao mesmo tempo.
O que muda: não há arquivo salvo no seu aparelho nem recarregar com F5 (você edita e roda de novo); o title não aparece na prévia, então mude o texto do h1 para ver o efeito; e as ferramentas do desenvolvedor ficam para quando você tiver um computador. O que continua valendo: a ideia de que a página é um arquivo, o caminho relativo das imagens e o cuidado com maiúsculas e minúsculas. Os exercícios corrigidos do curso você faz normalmente no celular; só a lição de publicação, que pede enviar arquivos a um serviço de hospedagem, costuma ser bem mais simples num computador.
Uma pasta de site costuma ter este formato: o index.html na raiz e uma subpasta img/ com as imagens. Para usar uma imagem, o src descreve o caminho a partir do arquivo HTML: <img src="img/foto.jpg" alt="...">. Isso se chama caminho relativo. Se o HTML estiver numa subpasta e a imagem na pasta de cima, use ../img/foto.jpg (o ../ sobe um nível). Um endereço completo, como https://exemplo.com/foto.jpg, é um caminho absoluto e funciona de qualquer lugar, mas depende de o outro site continuar no ar.
Se a imagem não aparece, confira três coisas: a pasta (o arquivo está mesmo em img/?), a extensão (.jpg não é .jpeg nem .png) e as letras maiúsculas. Seu computador pode aceitar Foto.JPG como se fosse foto.jpg, mas muitos servidores diferenciam as duas, e a imagem some só depois de publicada. Adote o hábito de usar sempre minúsculas, sem espaços nem acentos nos nomes de arquivo (use meu-perfil.jpg).
Com a página aberta, aperte F12 (ou Ctrl+Shift+I) para abrir as ferramentas do desenvolvedor. Três abas resolvem a maior parte dos mistérios do início: Elements mostra o HTML como o navegador o montou (é lá que se vê o head sendo fechado sozinho, de que falamos na lição anterior); Console lista os erros e avisos; Network mostra cada arquivo pedido e marca em vermelho o que não foi encontrado, como uma imagem com caminho errado.
O W3C mantém um validador gratuito (o Nu HTML Checker, em validator.w3.org/nu) onde você cola o código ou envia o arquivo e recebe a lista de erros: tag sem fechamento, atributo que não existe, título pulando de nível. Rode-o na sua página de perfil antes de dar o projeto por concluído. Nem todo aviso é um erro grave, mas ler cada um é um ótimo treino.
Abrir o arquivo com duplo clique só mostra a página para você. Para outras pessoas a verem, ela precisa ser publicada em um servidor, o que faremos no fim do projeto deste curso. E, mais adiante, quando o JavaScript pedir dados com fetch, os navegadores costumam bloquear leituras de arquivos locais (file://): aí entra um servidor local simples. Por enquanto, o duplo clique basta.