Abrir a Vitrine e reconhecer o percurso

Neste capítulo você vai abrir a página, alterar um texto e distinguir arquivo, navegador e cópia de prática. O projeto de estudo é a Vitrine da Aurora, um espaço cultural fictício no Recife.

Seu ponto de partida

Você já sabe abrir HTML e ligar uma folha CSS. Se ainda faltar essa base, use um curso introdutório de HTML e CSS antes. O exemplo deste capítulo é 01-abrir-vitrine, no pacote que acompanha o volume. Trabalhe sobre uma cópia da pasta inicio/ e preserve o original; a versão de referência fica na raiz do exemplo.

Abra index.html da cópia no navegador e o mesmo arquivo num editor de texto. Abrir ou testar não publica a página.

Como praticar

Leia, confira o código, mude uma coisa, preveja, salve, recarregue e confira. Investigue o erro antes de avançar. Ao terminar cada experiência, restaure a mudança pedida quando o capítulo indicar.

Um resultado antes de outro conceito

A Vitrine da Aurora já abre nesta etapa. É um espaço cultural fictício no Recife. Abra a referência, leia o título e a lista de obras. Depois trabalhe na cópia de inicio. O HTML descreve o conteúdo; o navegador mostra a página; o editor guarda o que você digita. Salvar e recarregar não publica nada.

Faça na sua cópia

Em index.html, localize o título principal. A implementação completa está no pacote de exemplos que acompanha este volume.

<h1>Vitrine da Aurora</h1>

Mude uma coisa e preveja

Troque somente o texto do h1 por Vitrine em prática.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O título grande muda. O restante da página permanece.

Se não acontecer

Confira se salvou a cópia aberta no navegador. Não renomeie a tag.

Arquivo e caminho

O link da folha CSS aponta para assets/styles.css a partir da pasta do HTML. Caminhos relativos viajam com a pasta. Um caminho absoluto de outra máquina quebra. Se o CSS não carregar, o HTML ainda aparece — isso não prova que tudo está certo.

Faça na sua cópia

Confira o link da folha no head. A implementação completa está no pacote de exemplos que acompanha este volume.

<link rel="stylesheet" href="assets/styles.css">

Mude uma coisa e preveja

Na cópia, troque styles.css por styles-inexistente.css.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O conteúdo permanece; a apresentação some. Restaure o nome correto.

Se não acontecer

Recarregue a cópia certa. Corrija o href; não mova pastas para esconder o erro.

Copiar inicio, não a referência

Cada pasta de exemplo tem a referência pronta e a subpasta inicio. Você pratica na cópia de inicio. Assim a referência continua disponível para comparar.

Faça na sua cópia

Veja a estrutura da pasta do exemplo. A implementação completa está no pacote de exemplos que acompanha este volume.

index.html
assets/styles.css
inicio/

Mude uma coisa e preveja

Altere uma frase da introdução só na sua cópia de inicio.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

Só a cópia muda. A referência permanece igual.

Se não acontecer

Se as duas mudaram, você editou o arquivo errado. Feche e abra o caminho de inicio.

Atividades

Faça na cópia. Não olhe as respostas antes de tentar.

1. Explique com suas palavras o objetivo: abrir a página, alterar um texto e distinguir arquivo, navegador e cópia de prática.
2. Faça uma mudança diferente da lição e diga o que esperava versus o que viu.
3. Em tela estreita (cerca de 320px) ou zoom 200%, anote o que ainda funciona e o que aperta.

Critério de avanço

Você avança quando abrir a página, alterar um texto e distinguir arquivo, navegador e cópia de prática.

Respostas comentadas

Atividade 1

O objetivo amarra a etapa ao resultado visível na Vitrine; sem isso a propriedade fica solta.

Atividade 2

Prever antes de recarregar mostra se você entendeu a regra ou só imitou o código.

Atividade 3

Layout de estudo precisa sobreviver a zoom e tela estreita; anotar falhas evita avançar no escuro.