Neste capítulo você vai abrir um HTML e mudar um título sem precisar programar.

Seu ponto de partida

Comece aqui. Não é necessário saber programar. O exemplo deste capítulo é 01-primeira-pagina, no pacote que acompanha o volume. Copie a pasta inicio para um diretório de prática e preserve o original. A raiz do exemplo é a referência concluída desta etapa. Sua cópia permite experimentar sem perder a referência.

Abra index.html da cópia com dois cliques. Edite o mesmo arquivo num editor de texto simples. Abrir no disco não publica a página.

Como praticar

Leia a explicação e digite ou confira o código indicado. Mude uma coisa. Antes de conferir, anote sua previsão. Salve, recarregue e compare. Se não acontecer o esperado, investigue o erro antes de avançar. Cada experiência parte dos valores da referência. Depois de conferir, desfaça somente a mudança desse experimento antes de começar a próxima lição. Você pode parar depois de uma lição e retomar mais tarde.

Abra uma página que já funciona

HTML descreve o conteúdo de uma página. Um navegador lê essa descrição e apresenta títulos, parágrafos e links. Você começa com um arquivo completo para poder fazer uma mudança e conferir imediatamente.

Copie inicio para uma pasta de prática. Não trabalhe dentro do ZIP. Abra index.html com dois cliques. Depois abra esse mesmo arquivo num editor de texto simples. O editor mostra a descrição; o navegador mostra o resultado. Nenhuma dessas ações publica seu exercício.

Faça no seu exemplo

No index.html da sua cópia, localize o título principal.

<h1>Conferência de Estilos</h1>

Mude uma coisa e preveja

Troque somente Conferência de Estilos por Minha primeira conferência.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

O título grande muda ao salvar e recarregar; o restante permanece.

Se não acontecer

Se nada mudar, confira o caminho da cópia. O navegador pode estar aberto na referência enquanto você edita outro arquivo.

Uma tag marca o papel do conteúdo

Uma tag é uma marca entre sinais de menor e maior. H1 identifica o título principal. A abertura

inicia esse título;

A referência já tem uma estrutura acessível. Não é preciso decorar todas as marcas para mudar um parágrafo. Vamos conhecer essa estrutura na próximo capítulo.

Faça no seu exemplo

Localize o primeiro parágrafo dentro de main.

<p>Um evento fictício para aprender fazendo.</p>

Mude uma coisa e preveja

Troque somente a frase por Aprendi a mudar um parágrafo.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

A frase muda no corpo da página; o título permanece.

Se não acontecer

Não apague a barra da tag de fechamento. Restaure a linha completa se o conteúdo seguinte parecer fazer parte do mesmo parágrafo.

Confira nome e extensão

Index.html é o nome convencional da página inicial. A extensão .html permite reconhecer o tipo do arquivo. Num editor de texto, salvar como texto pode acrescentar .txt sem ficar visível no explorador. Mostre as extensões dos arquivos antes de avançar.

O documento deve ser texto simples em UTF-8. Não use Word para editar o código: o Word serve para estudar os capítulos, não para salvar esta página.

Faça no seu exemplo

No explorador, ative a exibição das extensões e confira o nome.

index.html

Mude uma coisa e preveja

Crie uma cópia de teste com nome teste.html.txt e tente abri-la. Preserve index.html.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

A extensão final é .txt; ela não identifica a mesma página HTML. Apague somente a cópia de teste quando terminar.

Se não acontecer

Se o explorador esconder a extensão, não renomeie às cegas. Primeiro exiba o nome completo.

A captura mostra um trecho da referência concluída. Abra e percorra o exemplo para conferir o restante. Experimentos temporários podem produzir outra aparência; restaure os valores indicados antes de comparar.

Código completo da primeira página

<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Conferência de Estilos</title>
<link rel="stylesheet" href="assets/stylesheets/main.css">
</head>
<body>
<a class="pular" href="#conteudo">Pular para o conteúdo</a>
<header>
<h1>Conferência de Estilos</h1>
<p>Pequenos passos para aprender HTML &amp; CSS.</p>
</header>
<main id="conteudo" tabindex="-1">
<section aria-labelledby="sobre">
<h2 id="sobre">Sobre o evento</h2>
<p>Um evento fictício para aprender fazendo.</p>
</section>
</main>
<footer>
<p>Conferência fictícia. Exercício local.</p>
</footer>
</body>
</html>

Atividades para fazer antes das respostas

Use uma nova cópia do exemplo. Tente aplicar o que aprendeu antes de consultar os comentários.

1. Mude o título e preserve o parágrafo.

2. Acrescente um segundo parágrafo completo.

3. Explique por que não editar HTML no Word.

Respostas comentadas

Compare sua explicação e o que realmente aconteceu. Outra solução pode funcionar se cumprir o objetivo e preservar o acesso ao conteúdo.

1. Edite apenas o texto entre h1 e /h1.

2. Use uma nova linha

   Outra frase fictícia.

   .

3. O código deve ser texto simples; o capítulo Word é material de leitura.

Quando seguir

Você sabe qual arquivo editou e vê a mudança no navegador. Se ainda precisa de ajuda, repita a experiência pequena antes de avançar.

O arquivo completo

Referência do exemplo 01-primeira-pagina, 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>Conferência de Estilos</title>
<link rel="stylesheet" href="assets/stylesheets/main.css">
</head>
<body>
<a class="pular" href="#conteudo">Pular para o conteúdo</a>
<header><h1>Conferência de Estilos</h1><p>Pequenos passos para aprender HTML &amp; CSS.</p></header>
<main id="conteudo" tabindex="-1"><section aria-labelledby="sobre"><h2 id="sobre">Sobre o evento</h2><p>Um evento fictício para aprender fazendo.</p></section></main>
<footer><p>Conferência fictícia. Exercício local.</p></footer>
</body>
</html>

assets/stylesheets/main.css

:focus-visible { outline: 3px solid #b04d00; outline-offset: 3px; }
.pular { position: absolute; left: -10000px; }
.pular:focus { position: static; display: block; padding: 1rem; background: white; }