Abrir o Mirante e reconhecer o percurso

Neste capítulo você vai abrir a página e conferir uma mudança de texto. O objetivo é terminar uma tarefa pequena e conferir seu resultado no Mirante do Mucuripe.

Seu ponto de partida

Comece aqui. Você precisa conseguir abrir e editar HTML e ligar uma folha CSS. O README indica onde aprender essas habilidades se ainda faltarem. Use o exemplo 01-primeiro-passo do pacote anexo e copie inicio/ para uma pasta de prática fora do original. A raiz do exemplo é a referência completa desta etapa. Você não precisa copiar arquivos da etapa anterior.

Abra index.html da sua cópia no navegador e o mesmo arquivo num editor de texto simples. Para mídia, ferramenta de conferência e JSON, use o teste HTTP local explicado no README. Abrir ou testar não publica a página.

Como praticar

Leia a explicação e digite ou confira o código indicado. Mude uma coisa. Anote sua previsão antes de salvar e recarregar. Compare o resultado e investigue o erro antes de avançar. Ao terminar cada experiência, restaure somente a mudança indicada, para que a próxima parta dos valores da referência. Você pode parar depois de uma lição.

Um resultado antes de outro conceito

O Mirante já está completo para esta primeira tarefa. Ele descreve um espaço cultural fictício em Fortaleza. Abra a referência e veja o título, a agenda e as orientações. Depois trabalhe na cópia de inicio. Um arquivo HTML descreve o conteúdo; o navegador interpreta essa descrição. O editor de texto mostra os caracteres que você pode alterar. O navegador não salva automaticamente uma mudança feita no editor. Você precisa salvar e recarregar. Nenhuma dessas ações publica a página. Neste volume, escolha uma mudança visível antes de estudar outra propriedade.

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. Confira o trecho no seu contexto antes de mudar.

<h1>Mirante do Mucuripe</h1>

Mude uma coisa e preveja

Troque somente o conteúdo do h1 por Mirante em prática.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O título grande muda. A agenda e as orientações continuam com o mesmo texto.

Se não acontecer

Confira se salvou a cópia que está aberta no navegador. Não altere o nome da tag nem a referência original.

Arquivo e caminho têm papéis diferentes

Index.html está no disco. Quando aberto com dois cliques, seu endereço começa com file. A folha CSS também está no disco e o link aponta para assets/styles.css. Esse caminho começa na pasta do HTML. Assets é uma pasta de recursos. Um nome absoluto como B:/minha-pasta pode funcionar nesta máquina e quebrar em outra. Por isso os exemplos usam caminhos relativos. Mantenha a pasta inteira ao copiar. Um navegador pode mostrar HTML mesmo quando não encontrou CSS; isso não significa que todos os recursos abriram corretamente.

Faça na sua cópia

Confira o link da folha CSS no head. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

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

Mude uma coisa e preveja

Numa cópia, troque somente styles.css por styles-inexistente.css.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O conteúdo permanece, mas a apresentação da folha desaparece. Reponha styles.css e confira a volta do estilo.

Se não acontecer

Se o estilo continuar, confira a cópia e recarregue. Não mova arquivos para esconder o caminho errado; corrija o link.

Reconhecer a extensão antes de avançar

A extensão informa o tipo de arquivo: .html para a página, .css para regras de aparência. No Windows, o explorador pode esconder extensões conhecidas. Ative a exibição de extensões antes de salvar seus próprios arquivos. Um arquivo index.html.txt ainda é texto com extensão .txt. O nome visto no editor e o nome real no disco precisam coincidir. Use um editor de texto simples ou um editor de código gratuito; não salve HTML pelo Word. Word serve para estudar e editar o capítulo, não para substituir o arquivo executável.

Faça na sua cópia

Veja o nome real do arquivo na pasta da cópia. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

index.html
assets/styles.css

Mude uma coisa e preveja

Mude somente uma frase da descrição do Mirante e salve o mesmo index.html.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

A frase muda no navegador. O arquivo permanece .html e não surge outra cópia .txt.

Se não acontecer

Se o navegador mostrar código ou não abrir a página, confira a extensão e o programa usado para salvar.

A captura mostra uma parte da referência. Abra o exemplo para conferir a página inteira. Uma experiência temporária pode produzir outra aparência; restaure os valores antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia da base. Tente primeiro; depois compare seus resultados com os comentários.

1. Altere uma frase e explique o que precisou fazer para vê-la no navegador.

2. Provoque e recupere um caminho CSS errado somente na cópia.

3. Explique a diferença entre abrir o capítulo Word e abrir o exemplo HTML.

Respostas comentadas

Compare o que você previu com o que observou. Uma solução diferente pode funcionar se mantiver o conteúdo e a tarefa acessíveis.

1. Salvar escreve a alteração no disco; recarregar faz o navegador ler a versão salva. Uma aba aberta não conhece automaticamente a edição.

2. Um nome inexistente tira a apresentação da folha, sem apagar o conteúdo HTML. Restaurar o href recupera o recurso.

3. O capítulo explica o percurso e é editável no Word. O exemplo é código executável interpretado pelo navegador; os dois têm funções diferentes.

Quando seguir

Você abre a cópia, altera um texto e reconhece o arquivo que produziu o resultado. Se ainda houver dúvida, repita somente a experiência que precisa esclarecer.

O arquivo completo

Referência do exemplo 01-primeiro-passo, 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 name="viewport" content="width=device-width, initial-scale=1">
<title>Mirante do Mucuripe | Prática de front-end</title><link rel="stylesheet" href="assets/styles.css"></head>
<body><a class="pular" href="#conteudo">Pular para o conteúdo</a>
<header><p>Um pouco além do Webdev</p><h1>Mirante do Mucuripe</h1><p class="ficticio">Espaço cultural fictício em Fortaleza.</p>
<nav aria-label="Nesta página"><a href="#sobre">Sobre</a><a href="#agenda">Agenda</a><a href="#visitar">Orientações</a></nav></header>
<main id="conteudo" tabindex="-1"><section class="hero" aria-labelledby="sobre"><h2 id="sobre">Um lugar para aprender e criar</h2><p>O Mirante do Mucuripe reúne leitura, oficinas e conversas em Fortaleza.</p><p>Esta página é uma prática de curso. Não representa um espaço real.</p></section><section aria-labelledby="agenda"><h2 id="agenda">Agenda de prática</h2><p>Horários inventados, sem reserva ou inscrição real.</p><div class="cards"><article class="card"><h3>Leitura às 10h</h3><p>Escolha um texto curto e converse sobre ele.</p></article><article class="card"><h3>Oficina às 14h</h3><p>Experimente uma mudança pequena no seu projeto.</p></article></div></section><section aria-labelledby="visitar"><h2 id="visitar">Antes de visitar</h2><p>Local fictício em Fortaleza. A descrição é apenas um exercício, sem endereço real.</p><ul><li>Leia o horário na agenda.</li><li>Confira a descrição da atividade.</li></ul></section></main><footer><p>Mirante do Mucuripe. Conteúdo fictício para estudo.</p></footer>
</body></html>

assets/styles.css

* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; background: #fbf8f0; color: #173d40;
  font-family: Arial, sans-serif; font-size: 1rem; line-height: 1.65; }
header, main, footer { max-width: 64rem; margin-inline: auto; padding: 1.25rem; }
header { background: #e6eee9; border-bottom: 3px solid #235b5b; }
h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.2; }
h2, h3 { line-height: 1.3; }
a { color: #175b65; text-underline-offset: .2em; }
p { max-width: 65ch; }
nav a { display: inline-block; margin: .25rem .7rem .25rem 0; }
:focus-visible { outline: 3px solid #a33e10; outline-offset: 3px; }
.pular { position: absolute; top: -8rem; left: 1rem; background: white; padding: .7rem; z-index: 10; }
.pular:focus { top: .5rem; }
section { margin-block: 2rem; scroll-margin-top: 1rem; }
.ficticio { font-weight: bold; color: #713014; }
img, video { max-width: 100%; height: auto; }
audio { max-width: 100%; }
figure { margin: 1rem 0; }
figcaption { font-size: .95rem; }
button, input, textarea { font: inherit; }
input, textarea { display: block; width: 100%; max-width: 32rem; padding: .6rem;
  border: 2px solid #627b7b; border-radius: .3rem; background: white; color: #173d40; }
button { padding: .6rem 1rem; border: 2px solid #235b5b; border-radius: .35rem;
  background: #235b5b; color: white; cursor: pointer; margin: .3rem .3rem .3rem 0; }
button:disabled { cursor: default; opacity: .65; }
[hidden] { display: none !important; }
.card, li { overflow-wrap: anywhere; }
pre { overflow-x: auto; }