Ambiente e primeira página

Este capítulo abre o volume. Você vai criar uma pasta, escrever um arquivo HTML e ver o resultado no navegador. O projeto das próximas etapas é a Oficina do Farol, um espaço cultural fictício no Alto da Sé, em Olinda. Os nomes, os horários e os endereços são inventados.

O exemplo desta etapa está em exemplos/01-ambiente/. Copie a pasta para praticar. Não edite o zip. Estude, mude uma coisa, recarregue e confira. CSS entra no capítulo 4.

Trabalhe na cópia inicio desta etapa. Leia e digite o código indicado; mude apenas uma coisa. Antes de recarregar, escreva o resultado que espera. Depois compare com a referência completa ao lado. Se algo falhar, confira primeiro o arquivo salvo e o caminho aberto.

O que você vai aprender

• Separar pasta, editor e navegador.
• Distinguir arquivo no disco, página na janela e teste em 127.0.0.1.
• Salvar como index.html, sem .txt no fim.
• Montar DOCTYPE, html com idioma, head e body.
• Escrever o primeiro título e o primeiro parágrafo da Oficina.

Pasta, editor e navegador

Uma pasta guarda os arquivos do site. Crie uma só para esta prática, por exemplo oficina-do-farol.

O editor mostra o texto do arquivo. No Windows, o Bloco de Notas serve. Um editor com coloração de código ajuda a ver tags, mas não é obrigatório hoje.

O navegador lê o arquivo e desenha a página. Chrome, Edge ou Firefox bastam. Você não precisa de internet para abrir um arquivo do seu disco.

Três programas, um mesmo arquivo. O Explorador lista o nome. O editor mostra as instruções. O navegador mostra o resultado.

Pare e experimente. Abra exemplos/01-ambiente/index.html no editor e no navegador ao mesmo tempo. O texto do h1 deve ser o mesmo nos dois. Se o navegador mostrar outra coisa, você abriu outro arquivo.

Arquivo, página e 127.0.0.1

O arquivo vive no disco. O caminho parece com B:\...\01-ambiente\index.html.

A página é o que a pessoa vê na janela. Ela existe só depois que o navegador lê o arquivo.

127.0.0.1 é o endereço desta máquina. Um servidor local entrega a pasta como se fosse um site, sem publicar na internet. A barra fica http://127.0.0.1:.... Abrir com dois cliques usa file://. Os dois caminhos são de estudo. Nenhum deles publica.

Até o capítulo 11, dois cliques no index.html bastam. Quando o volume pedir servidor, use só 127.0.0.1, nunca 0.0.0.0.

Erro comum: achar que abrir no navegador já colocou a página na internet. A barra file:// ou 127.0.0.1 prova o contrário. Publicar é outro passo, e é opcional.

O nome do arquivo

Salve a página inicial como index.html. Esse nome é o costume da web: se a visitante abre a pasta, o servidor procura index.html primeiro.

No Windows, o Explorador às vezes esconde a extensão. O arquivo vira index.html.txt. O navegador então trata o conteúdo como texto cru: as tags aparecem na tela.

Ative “Extensões de nome de arquivo” no Explorador. O nome final precisa terminar em .html, sem .txt depois.

Outro tropeço: salvar como “Documento de texto” e só mudar o ícone. Confira o tipo no Explorador. Se ainda for texto, use Salvar como e escolha Todos os arquivos.

O documento HTML

HTML é a linguagem que marca o papel de cada pedaço: um título, um parágrafo, um link. Uma tag é o nome entre < e >. A de fechamento começa com /.

Todo arquivo deste volume começa assim:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Oficina do Farol</title>
  </head>
  <body>
    <h1>Oficina do Farol</h1>
    <p>Espaço cultural fictício no Alto da Sé, em Olinda.</p>
  </body>
</html>

<!DOCTYPE html> avisa que o documento é HTML. Sem isso, o navegador entra num modo antigo e alguns detalhes quebram.

lang="pt-BR" diz o idioma. O navegador e o leitor de tela usam essa pista para acentos e pronúncia.

O head guarda o que a pessoa não vê como conteúdo: o título da aba, o conjunto de caracteres e o viewport. charset="utf-8" preserva ç, ã e é. O viewport evita que o celular mostre a página como um cartaz minúsculo.

O body guarda o que aparece na janela.

Um atributo acrescenta informação na tag de abertura. Em lang="pt-BR", o nome é lang e o valor fica entre aspas.

A primeira página da Oficina

O h1 é o assunto da página. O p é um parágrafo. Hoje só esses dois elementos no body.

O exemplo pronto já traz esse texto. Dê dois cliques em exemplos/01-ambiente/index.html. Você deve ver o título e o parágrafo com a aparência padrão do navegador.

CSS ainda não entra. Sem folha de estilos a página continua legível. O capítulo 4 liga um arquivo styles.css.

Pare e experimente. Troque só o texto do parágrafo para citar xilogravura. Salve. Antes de recarregar, anote o que deve mudar e o que deve permanecer. Recarregue. O título e a aba devem continuar iguais.

Se nada mudar, você editou outra cópia ou o navegador está com uma versão antiga. Confira o caminho na barra de endereços. Recarregue com a tecla F5.

Não use dados pessoais. Lia Nogueira, a Rua do Farol e os horários das oficinas são fictícios.

Quando o texto e o title estiverem estáveis, avance. O capítulo 2 coloca cabeçalho, rodapé e o skip-link. A pasta desta etapa permanece como retrato do começo: um h1 e um p.

Atividades

1. Qual a diferença entre o arquivo no disco e a página no navegador?
2. O que a barra file:// ou 127.0.0.1 prova sobre publicação?
3. Por que index.html.txt aparece como texto e não como página?
4. No exemplo 01-ambiente, qual atributo declara o idioma e onde ele fica?

Respostas comentadas

1. O arquivo é o texto salvo na pasta. A página é o desenho que o navegador faz depois de ler esse texto. Sem abrir no navegador, o arquivo continua só no disco.
2. A página está só nesta máquina. Ninguém na internet a vê. Publicar exige outro passo, tratado mais adiante.
3. A extensão real é .txt. O navegador não interpreta as tags. Ative as extensões e remova o .txt final.
4. lang="pt-BR" na tag html. Sem ele, o navegador assume outro idioma.

Referências

• Primeiros passos em HTML
• Elemento html
• Elemento head

O arquivo completo

Referência do exemplo 01-ambiente, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!DOCTYPE html>

<html lang="pt-BR">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>Oficina do Farol</title>
<style>body{overflow-wrap:anywhere}img,input,textarea,select,iframe{max-width:100%}img{height:auto}fieldset,.cartao{min-width:0}pre{max-width:100%;overflow:auto}:focus-visible{outline:3px solid #005fcc;outline-offset:3px}.atalho-conteudo{position:absolute;left:.5rem;top:-6rem;background:white;color:#172f50;padding:.5rem;z-index:999}.atalho-conteudo:focus{top:.5rem}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}</style></head>
<body><a class="atalho-conteudo" href="#conteudo">Pular para o conteúdo</a>
<main id="conteudo" tabindex="-1">
<h1>Oficina do Farol</h1>
<p>Espaço cultural fictício no Alto da Sé, em Olinda. Oficinas de cerâmica, xilogravura e fotografia.</p>
</main>
</body>
</html>