Ambiente e o que vamos construir

Este capítulo abre o percurso. Você vai preparar pasta, editor e navegador e ver a primeira página da Casa da Restinga, cafeteria fictícia em Natal. Este volume tem 23 capítulos. Hoje o objetivo é só chegar no arquivo certo e conferir o resultado na janela.

O exemplo desta etapa está em exemplos/01-ambiente/. Copie a pasta para praticar. Não edite o zip. Os nomes, o cardápio e o endereço são inventados. Não use dados pessoais.

Trabalhe na cópia inicio da etapa. Leia e digite o código; mude uma coisa. Antes de recarregar, anote sua previsão. Depois confira com a referência completa. Se nada mudar, confira o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo podem ser digitados no console; o exemplo completo mostra a aplicação daquela etapa.

O que você vai aprender

• Separar pasta, editor e navegador.
• Distinguir arquivo no disco, página na janela, teste em 127.0.0.1 e publicação.
• Salvar como index.html, sem .txt no fim.
• Entender o papel de HTML, CSS e JavaScript neste volume.
• Abrir o primeiro título da Casa da Restinga.

Pasta, editor e navegador

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

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. Visual Studio Code é gratuito e funciona neste volume. 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.

Leia o exemplo. Copie a pasta. Mude uma coisa. Preveja o que deve mudar. Recarregue. Confira.

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.

Copie a pasta do exemplo para um lugar seu, por exemplo a Área de Trabalho. Edite a cópia. O zip e a pasta original do volume ficam como referência. Se a prática quebrar, você compara com o original.

No editor, use fonte monoespaçada se puder. Tags e texto comum ficam mais fáceis de contar. Tema claro ou escuro é gosto. O navegador não lê o tema do editor.

Não precisa de conta, de plugin pago nem de internet para este capítulo. Pasta, editor e navegador bastam.

Arquivo, página, 127.0.0.1 e publicação

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.

Publicação é outro passo. É colocar o site num endereço que outras pessoas alcançam. Abrir no disco não publica. Servir em 127.0.0.1 também não publica.

Até o JavaScript simples, 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.

Quando o volume pedir servidor, um comando possível no PowerShell, na pasta curso, é:

python -m http.server 8771 --bind 127.0.0.1 --directory curso

A barra do navegador fica http://127.0.0.1:8771/exemplos/01-ambiente/. Encerre com Ctrl+C. Não use --bind 0.0.0.0. Esse endereço entregaria a pasta na rede.

Hoje você ainda pode só dar dois cliques. O servidor entra quando um exercício precisar dele. Os dois jeitos lêem o mesmo arquivo no disco.

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.

Pare e experimente. No Explorador, veja o nome completo do arquivo do exemplo. Deve terminar em .html. Se aparecer .txt, o navegador não vai montar a página.

HTML, CSS e JavaScript

Este volume ensina as três linguagens da página. Cada uma tem um trabalho.

HTML marca o conteúdo e a estrutura. Título, parágrafo, link e imagem nascem aqui. HTML não “roda” como um programa. O navegador lê as tags e monta o documento.

CSS descreve a aparência. Cor, tamanho, espaço e layout. Sem CSS, a página continua legível com o visual padrão do navegador.

JavaScript acrescenta comportamento. Clique, cálculo, mensagem na tela. Muita página boa não precisa de JavaScript. Neste volume ele entra depois do HTML e do CSS.

Pense numa cafeteria. HTML é o balcão, as mesas e o cardápio. CSS é a cor da parede e o tamanho da letra. JavaScript é o sino que toca quando o pedido fica pronto.

O capítulo 2 começa as tags. O capítulo 7 liga CSS. JavaScript espera a série 4.

O mapa curto das 23 capítulos: começo (esta); HTML até o blog (02 a 06); CSS até o checkout (07 a 13); JavaScript (14 a 18); DOM e calculadora (19 e 20); JSON, fetch e o jogo Palavras da Restinga (21 e 22); bibliotecas, Git e próximos passos (23). PHP não entra neste volume.

Você não precisa decorar o mapa. Serve para saber que o blog de hoje não é o site final. Cada pasta de exemplo é um retrato daquele momento.

A primeira página da Casa

Todo arquivo deste volume começa com um esqueleto. Copie este bloco para o index.html da sua pasta de prática:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Casa da Restinga</title>
  </head>
  <body>
    <h1>Casa da Restinga</h1>
    <p>Cafeteria fictícia em Natal, entre a duna e o mar.</p>
  </body>
</html>

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

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.

CSS ainda não entra. Sem folha de estilos a página continua legível.

Pare e experimente. Troque só o texto do parágrafo para citar o bolo de caju. 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. Confira o caminho na barra de endereços. Recarregue com a tecla F5.

O title aparece na aba. O h1 aparece no miolo. Os dois podem ter o mesmo texto. Não precisam. Trocar um não troca o outro automaticamente.

Erro comum: editar o arquivo, não salvar e recarregar. O navegador mostra a versão antiga do disco. Ctrl+S no editor, depois F5 na janela.

Não use dados pessoais neste parágrafo. “Rua das Dunas, 48” e “bolo de caju” são do enredo. Seu endereço e seu telefone ficam fora.

Como estudar daqui para frente

O ciclo é sempre o mesmo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

Ler o capítulo. Copiar o exemplo para uma pasta sua. Mudar só um detalhe. Escrever o que você espera ver. Recarregar a janela. Conferir se a previsão bateu.

Se a previsão falhar, pare. Não acrescente mais uma mudança. Confira o arquivo no disco, o caminho na barra e se salvou.

Este volume não compara você com outras pessoas. Cada capítulo fecha um objetivo. A Casa da Restinga cresce um retrato por vez: blog, checkout, calculadora e o jogo Palavras da Restinga.

Quando o texto e o title desta etapa estiverem estáveis, avance. A pasta 01-ambiente permanece como retrato do começo: um h1 e um p.

Não publique os exercícios. Não exponha servidor em 0.0.0.0. Não invente um e-mail real no exemplo.

Quando travar, leia de novo o capítulo curto. Mude uma coisa só. Se ainda falhar, compare sua cópia com exemplos/01-ambiente/. A referência do volume deve abrir. A sua prática é que você altera.

Dúvida de tag ou de atributo: a documentação da MDN em português é a consulta deste volume. Os links ficam no fim de cada capítulo. Não copie um trecho longo de terceiros para a página da Casa. Reescreva o texto da cafeteria com as suas palavras do enredo.

Travar faz parte. Uma página que abre já é avanço. A próximo capítulo acrescenta tags em cima deste esqueleto.

Antes de avançar, confira de novo a barra. Se aparecer file:// ou 127.0.0.1, a Casa está só nesta máquina. Se aparecer um endereço de internet que não é este computador, você saiu do modo de estudo. Volte para o arquivo local.

O index.html desta etapa deve ter um h1 e um p. Não acrescente menu, CSS nem script ainda. O retrato curto ajuda a comparar com o blog do capítulo 6.

Se o Explorador mostrar “Documento de texto” e o navegador listar as tags, você não está vendo uma página. Corrija o nome, salve de novo e abra o arquivo novo. A aba antiga pode permanecer aberta com a versão errada: feche-a.

O servidor local não substitui salvar. Sem gravar o arquivo, 127.0.0.1 entrega a versão antiga do disco.

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
• Elemento body
• Como a web funciona

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>Ambiente e o que vamos construir — Casa da Restinga</title>
<style>body{overflow-wrap:anywhere}img,input,textarea,select{max-width:100%}img{height:auto}fieldset,main{min-width:0}pre{max-width:100%;overflow:auto}:focus-visible{outline:3px solid #005fcc;outline-offset:3px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}</style></head>
<body>
<a class="skip" href="#conteudo">Pular para o conteúdo</a>
<header>
<div class="wrap">
<a class="brand" href="index.html">Casa da Restinga</a>
<nav aria-label="Principal">
<ul>
<li><a aria-current="page" href="index.html">Início</a></li>
<li><a href="sobre.html">Sobre</a></li>
</ul>
</nav>
</div>
</header>
<main class="wrap" id="conteudo" tabindex="-1">
<h1>Casa da Restinga</h1>
<p>Cafeteria fictícia em Natal. Esta é a etapa 01.</p>
<p><a href="#">Link de estudo</a></p>
</main>
<footer>
<div class="wrap">
<p>Casa da Restinga — Natal. Conteúdo fictício. Nada é enviado a um servidor.</p>
</div>
</footer>
</body>
</html>

assets/stylesheets/main.css

*,
*::before,
*::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, ul { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; }
body {
  font-family: "Segoe UI", Tahoma, sans-serif;
  line-height: 1.5;
  color: #1a2a2c;
  background: #f7f3ea;
}
a { color: #0d5c63; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid #c45c26;
  outline-offset: 3px;
}
.skip { position: absolute; left: -999px; }
.skip:focus { left: 0.5rem; top: 0.5rem; background: #fff; padding: 0.4rem 0.7rem; z-index: 2; }
.wrap { width: min(44rem, calc(100% - 2rem)); margin-inline: auto; }
header { background: #0d5c63; color: #fff; padding: 1rem 0; }
header a { color: #fff; }
.brand { font-weight: 700; text-decoration: none; }
nav ul { list-style: none; display: flex; gap: 1rem; margin-top: 0.5rem; }
nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.2em; }
main { padding: 1.5rem 0 3rem; }
footer { border-top: 1px solid #ddd4c4; padding: 1rem 0; font-size: 0.95rem; }
article { margin: 1.25rem 0; padding-bottom: 1rem; border-bottom: 1px solid #ddd4c4; }