Conferir e guardar uma entrega limpa

Neste capítulo você vai testar uma cópia extraída e distinguir arquivo, teste local e publicação.

Seu ponto de partida

Estude depois do capítulo 17. O exemplo deste capítulo é 18-conferencia-entrega, 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.

Abrir um arquivo não é publicar

Dois cliques abrem a página no disco. Um servidor em 127.0.0.1 oferece um teste somente nesta máquina. Publicação torna conteúdo disponível num serviço público e exige outra decisão. Este volume termina com arquivos de estudo funcionais, sem publicar exercícios.

Para testar mídia e legendas com HTTP, abra o terminal na raiz da cópia e use Python se já disponível. Não é necessário para começar a estudar HTML; é uma opção de conferência estática na etapa final.

Faça no seu exemplo

No terminal da raiz da cópia, execute o comando; não o escreva no HTML.

python -m http.server 8768 --bind 127.0.0.1

Mude uma coisa e preveja

Abra http://127.0.0.1:8768/ e compare com o arquivo no disco.

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

Recarregue e confira

O conteúdo é o mesmo; o endereço e a forma de pedir os recursos mudaram. Encerre com Ctrl+C.

Se não acontecer

Se Python não existir, continue pelo arquivo para HTML e CSS. O README explica a opção sem tornar instalação um obstáculo ao primeiro exercício.

Teste erro e sucesso

Uma conferência útil inclui um caminho errado restaurado, formulário vazio e válido, mídia com alternativa, tabela estreita e teclado. Teste o mesmo fluxo após mover a pasta. Isso encontra dependências acidentais.

Não diga que está pronto só porque a página inicial abriu. As outras páginas e recursos também fazem parte do projeto.

Faça no seu exemplo

Use a sequência de revisão.

Cinco páginas
Links e recursos locais
Formulário vazio e válido
Teclado, tela estreita e zoom 200%

Mude uma coisa e preveja

Extraia outra cópia e faça uma simulação válida com dados fictícios.

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

Recarregue e confira

O retorno continua local e nada é enviado ou registrado.

Se não acontecer

Se a cópia pedir um arquivo da pasta antiga, corrija o caminho relativo e repita o teste.

Guarde só o que o aluno precisa

O ZIP essencial contém README e curso: capítulos, exemplos, imagens e manifesto. Não inclui .trabalho, scripts internos, backups ou relatórios de conferência. Não existe website neste volume.

Dentro dos exemplos, publique apenas recursos de um projeto deliberadamente preparado para isso em outro momento; capítulos e arquivos internos não são uma publicação automática. Aqui tudo permanece fictício e local.

Faça no seu exemplo

Confira o conteúdo do pacote.

HTML-CSS-curso/
  README.md
  curso/

Mude uma coisa e preveja

Abra um DOCX e o exemplo final depois de extrair o ZIP.

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

Recarregue e confira

As imagens estão incorporadas no capítulo e os exemplos usam recursos locais.

Se não acontecer

Não tente abrir o capítulo ou praticar dentro de um ZIP sem extrair: isso pode criar caminhos temporários e impedir salvar.

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.

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. Explique arquivo, HTTP local e publicação.

2. Liste dois erros que você testou e restaurou.

3. Confira o que fica fora do ZIP.

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. São formas distintas de acessar e disponibilizar conteúdo. 127.0.0.1 não publica o exercício.

2. Por exemplo, caminho errado e formulário inválido, ambos com correção conferida.

3. .trabalho, backups e conferência interna ficam fora.

Quando seguir

Você abre a cópia extraída e comprova seu percurso. Se ainda precisa de ajuda, repita a experiência pequena antes de avançar.

O arquivo completo

Referência do exemplo 18-conferencia-entrega, 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><nav aria-label="Principal"><a href="index.html" aria-current="page">Início</a> <a href="palestrantes.html">Palestrantes</a> <a href="programacao.html">Programação</a> <a href="local.html">Local</a> <a href="inscricao.html">Inscrição</a> </nav></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><p class="aviso">Evento fictício. Não há inscrições reais.</p><section class="destaques" aria-label="Destaques"><article class="cartao"><h2>Aprender</h2><p>Um passo por vez.</p></article><article class="cartao"><h2>Praticar</h2><p>Uma mudança para conferir.</p></article></section><section class="hero" aria-labelledby="participe"><h2 id="participe">Uma ideia por experiência</h2><p>14 de setembro. Recife. Evento fictício.</p></section><section aria-labelledby="beneficios"><h2 id="beneficios">O que você encontra</h2><ul class="beneficios"><li>Explicações curtas</li><li>Exemplos para alterar</li><li>Tempo para conferir</li></ul><h2>Seu percurso de prática</h2><ol><li>Abra a página.</li><li>Mude uma coisa.</li><li>Confira o resultado.</li></ol></section></main>
<footer><p>Conferência fictícia. Exercício local.</p></footer>
</body>
</html>

assets/simulacao.js

const form = document.querySelector('#inscricao');
const button = document.querySelector('#simular');
const status = document.querySelector('#retorno');
button.disabled = false;
form.addEventListener('submit', event => {
  event.preventDefault();
  status.textContent = 'Simulação concluída. Nada foi enviado ou gravado.';
  status.focus();
});
form.addEventListener('reset', () => { status.textContent = ''; });