Passo 1 de 8
Distinguir a estrutura comum do conteúdo de cada página
Identifique o que deve permanecer consistente nas três páginas do clube de leitura e o que muda conforme a finalidade de cada uma.
Trilha de aprendizado · Nível 7 · Tutorial 2
Ao concluir, você será capaz de montar as páginas de um pequeno site a partir de uma base comum, integrando os recursos de HTML já aprendidos conforme a necessidade de cada conteúdo.
Distinguir a estrutura comum do conteúdo de cada página
Identifique o que deve permanecer consistente nas três páginas do clube de leitura e o que muda conforme a finalidade de cada uma. 2 min
Escolher recursos pela finalidade do conteúdo
Escolha os recursos de cada página do clube de leitura pela informação ou tarefa que eles apoiam, preservando os cuidados de acessibilidade. 2 min
Montar a página-base
Crie e abra a página inicial do clube de leitura no seu computador, separando a estrutura reutilizável do conteúdo de apresentação. 3 min
Adaptar a base para os outros documentos
Crie a agenda e o contato preservando as regiões compartilhadas e ajustando títulos, conteúdo e referências. 3 min
Integrar textos, imagem e tabela
Complete a apresentação e a agenda com recursos adequados a cada finalidade, preservando a estrutura compartilhada. 4 min
Integrar o formulário sem quebrar associações
Complete a página de contato preservando as relações entre campos, rótulos, instruções e agrupamentos, sem confundir a interface com um serviço de envio. 3 min
Manter as regiões compartilhadas em sincronia
Atualize uma informação comum nas três páginas sem sobrescrever os conteúdos e caminhos próprios de cada arquivo. 2 min
Revisar e concluir a montagem do site
Revise as três páginas no editor e no navegador e registre as adaptações que mantêm o site consistente. 3 min
Passo 1 de 8
Identifique o que deve permanecer consistente nas três páginas do clube de leitura e o que muda conforme a finalidade de cada uma.
Vamos aplicar o mapa e o inventário a um clube de leitura fictício. Esta síntese será nossa referência; você não precisa recuperar arquivos anteriores.
Exemplo
As três páginas oferecem a navegação Início → Agenda → Contato, com esses rótulos, nessa ordem e levando às mesmas páginas.
O cabeçalho identifica o clube, a navegação conecta as páginas e o rodapé traz a informação institucional comum. Essas regiões permanecem consistentes. Já o conteúdo principal atende à finalidade de cada página.
Use o mapa e o inventário para fazer as associações.
Toque em um item e depois no par correspondente.
A região main continua sendo o conteúdo principal em todas as páginas, mas seu conteúdo muda. Consistência semântica mantém funções e referências reconhecíveis; não exige textos iguais nem a mesma quantidade de seções.
Exemplo
Início pode ter as seções “Sobre o clube” e “Como participar”, enquanto Agenda reúne os próximos encontros em uma única seção. Ambas continuam consistentes se preservarem a identidade do site e a navegação combinada.
“Para manter o site consistente, a Agenda deve repetir toda a apresentação do clube no conteúdo principal antes de mostrar os encontros.”
Passo 2 de 8
Escolha os recursos de cada página do clube de leitura pela informação ou tarefa que eles apoiam, preservando os cuidados de acessibilidade.
Pergunte: o que o usuário precisa compreender ou fazer nesta página? Cada recurso deve contribuir para essa finalidade, não apenas demonstrar variedade de HTML.
Exemplo
A agenda deve permitir comparar datas, horários e livros de vários encontros, sem inscrição. Qual composição você escolheria com base apenas nesse requisito?
Ao selecionar os recursos, preserve o que permite compreendê-los:
Dica
Páginas consistentes não precisam conter os mesmos recursos. A composição acompanha a finalidade de cada conteúdo.
A tarefa é preencher nome, e-mail e mensagem. Alguém sugere acrescentar a tabela de encontros e uma foto genérica só para repetir os recursos das outras páginas. Em duas ou três frases, diga o que manteria, por quê e qual cuidado de acessibilidade preservaria.
Escreva pelo menos 30 caracteres (0/30).
Passo 3 de 8
Crie e abra a página inicial do clube de leitura no seu computador, separando a estrutura reutilizável do conteúdo de apresentação.
No seu computador, crie uma pasta chamada clube-de-leitura para esta atividade. No seu editor, copie o documento completo abaixo e salve-o nessa pasta como index.html, em UTF-8.
Esta será a página inicial e a referência estrutural para os outros documentos. Por enquanto, ela contém apenas a apresentação textual do clube.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Apresentação | Clube de Leitura</title>
</head>
<body>
<a href="#conteudo">Pular para o conteúdo principal</a>
<header>
<p><strong>Clube de Leitura</strong></p>
<nav>
<ul>
<li><a href="index.html">Início</a></li>
<li><a href="encontros/agenda.html">Agenda</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</header>
<main id="conteudo" tabindex="-1">
<h1>Conheça o clube</h1>
<p>Reunimos pessoas que gostam de ler e conversar sobre livros. A cada encontro, compartilhamos impressões e descobrimos novas leituras.</p>
<section id="como-participar">
<h2>Como participar</h2>
<p>Escolha um encontro na agenda e venha compartilhar suas impressões sobre a leitura. Se tiver dúvidas, consulte a página de contato.</p>
</section>
</main>
<footer>
<p>Clube de Leitura — um espaço para compartilhar histórias.</p>
</footer>
</body>
</html>Dica
Agenda e Contato já aparecem na navegação, mas seus arquivos serão criados no próximo passo. É esperado que esses dois links ainda não abram as páginas nesta pasta nova.
Abra seu index.html no navegador. A aba deve mostrar “Apresentação | Clube de Leitura”. Na página, observe a sequência: link de salto, cabeçalho com navegação, apresentação do clube e rodapé.
A aparência padrão do navegador é suficiente aqui: o objetivo é estabelecer a ordem e a função das regiões, não um acabamento visual.
Volte ao editor e localize estas duas partes:
header com a nav e o footer.main.A região main faz parte da estrutura, mas seu conteúdo será próprio de cada página. Ao ampliar a apresentação, insira os novos blocos dentro do main existente; não crie um segundo main.
Dica
Este arquivo será uma referência para cópia manual. Os documentos criados a partir dele serão independentes: alterar a base não atualizará as cópias automaticamente.
Com seu arquivo aberto no navegador e no editor, responda em poucas frases:
Se algo não apareceu como esperado, descreva o que observou.
Escreva pelo menos 40 caracteres (0/40).
Passo 4 de 8
Crie a agenda e o contato preservando as regiões compartilhadas e ajustando títulos, conteúdo e referências.
No seu computador, crie a pasta encontros dentro de clube-de-leitura. Salve uma cópia de index.html como encontros/agenda.html e adapte-a conforme o documento completo abaixo, sem alterar o arquivo inicial.
Atualize juntos o title, o h1 e o conteúdo do main. Preserve o texto e a marcação do cabeçalho e do rodapé. Como a agenda fica em uma subpasta, ajuste os caminhos da navegação para manter os mesmos destinos, rótulos e ordem.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Agenda | Clube de Leitura</title>
</head>
<body>
<a href="#conteudo">Pular para o conteúdo principal</a>
<header>
<p><strong>Clube de Leitura</strong></p>
<nav>
<ul>
<li><a href="../index.html">Início</a></li>
<li><a href="agenda.html">Agenda</a></li>
<li><a href="../contato.html">Contato</a></li>
</ul>
</nav>
</header>
<main id="conteudo" tabindex="-1">
<h1>Agenda de encontros</h1>
<p>Acompanhe as leituras e os horários das conversas do clube.</p>
<p><a href="#proximos-encontros">Consultar os próximos encontros</a></p>
<section id="proximos-encontros">
<h2>Próximos encontros</h2>
<p>Os encontros são dedicados à troca de impressões sobre os livros escolhidos.</p>
</section>
</main>
<footer>
<p>Clube de Leitura — um espaço para compartilhar histórias.</p>
</footer>
</body>
</html>A seção como-participar da base deu lugar a proximos-encontros. O novo link interno usa exatamente #proximos-encontros. Ao renomear ou substituir uma seção, revise também os links que apontam para ela; não deixe referências a destinos removidos.
Dica
Mantenha id="conteudo" no main e href="#conteudo" no link de salto. Essa relação continua fazendo sentido em cada página. O mesmo ID pode aparecer em arquivos diferentes; ele não pode identificar dois elementos dentro do mesmo documento.
Em encontros/agenda.html, complete o link para o arquivo contato.html, que está ao lado de index.html. Use o caminho relativo mais direto, sem aspas:
<a href="___">Contato</a>
A seção da agenda tem id="proximos-encontros". Complete o link para ela no mesmo documento. Inclua o sinal #, sem aspas:
<a href="___">Consultar os próximos encontros</a>
Salve outra cópia de index.html como contato.html, na pasta clube-de-leitura, ao lado do arquivo inicial. Adapte-a conforme o documento completo abaixo.
O conteúdo de apresentação, incluindo a seção como-participar, sai do main. Entram o título e a introdução de contato. Os campos serão integrados depois; agora, salve os dois novos documentos.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contato | Clube de Leitura</title>
</head>
<body>
<a href="#conteudo">Pular para o conteúdo principal</a>
<header>
<p><strong>Clube de Leitura</strong></p>
<nav>
<ul>
<li><a href="index.html">Início</a></li>
<li><a href="encontros/agenda.html">Agenda</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</header>
<main id="conteudo" tabindex="-1">
<h1>Contato</h1>
<p>Este espaço é destinado a dúvidas e sugestões sobre o clube de leitura.</p>
</main>
<footer>
<p>Clube de Leitura — um espaço para compartilhar histórias.</p>
</footer>
</body>
</html>Dica
contato.html e index.html estão na mesma pasta, por isso podem usar os mesmos caminhos na navegação. Já a agenda usa ../index.html para chegar ao Início. Essa diferença preserva a consistência: o destino continua sendo a página inicial.
Compare os novos arquivos no seu editor e responda em poucas frases:
title e no h1 de contato.html?index.html no contato e ../index.html na agenda, sem quebrar a consistência?Escreva pelo menos 30 caracteres (0/30).
Passo 5 de 8
Complete a apresentação e a agenda com recursos adequados a cada finalidade, preservando a estrutura compartilhada.
Vamos acrescentar uma figura à apresentação e uma tabela à agenda. Trabalhe dentro do main existente de cada arquivo, preservando os títulos, o link de salto, o cabeçalho, a navegação e o rodapé.
clube-de-leitura, crie a pasta imagens, ao lado de index.html, e coloque a imagem nela.O exemplo a seguir usa leitura.jpg, com 640 × 480 pixels. Adapte esses valores ao seu arquivo real; não troque apenas a extensão para tentar mudar o formato.
Em index.html, insira o bloco abaixo depois do parágrafo que começa com “Reunimos pessoas que gostam de ler” e antes da seção “Como participar”. Não substitua esses textos nem acrescente outro main.
<figure>
<img src="imagens/leitura.jpg"
alt="Livro aberto sobre uma mesa, ao lado de um caderno."
width="640" height="480">
<figcaption>Registrar impressões durante a leitura ajuda a preparar a conversa sobre a obra.</figcaption>
</figure>Dica
Atualize src, width e height conforme sua imagem. Escreva um alt que descreva a informação visual relevante e adapte a legenda ao contexto. No exemplo, o alt descreve a cena; a legenda relaciona a cena à preparação para o encontro, sem repetir a descrição.
Salve e atualize a página no seu navegador. Dentro do conteúdo principal, você deve encontrar: “Conheça o clube”, introdução, imagem com legenda e “Como participar”. A imagem deve aparecer junto ao texto e à legenda correspondentes.
Abra encontros/agenda.html. Dentro da seção intitulada “Próximos encontros”, insira a tabela abaixo logo após o parágrafo “Os encontros são dedicados à troca de impressões sobre os livros escolhidos.”
Preserve a seção, seu identificador e o link interno que já aponta para ela, sem renomear nem alterar essa relação. Os dados abaixo fazem parte do exemplo fictício do clube.
<table>
<caption>Leituras de setembro a novembro de 2026</caption>
<thead>
<tr>
<th scope="col">Data</th>
<th scope="col">Horário</th>
<th scope="col">Obra</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">12/09/2026</th>
<td>15h</td>
<td>Dom Casmurro</td>
</tr>
<tr>
<th scope="row">10/10/2026</th>
<td>15h</td>
<td>O cortiço</td>
</tr>
<tr>
<th scope="row">14/11/2026</th>
<td>15h</td>
<td>Triste fim de Policarpo Quaresma</td>
</tr>
</tbody>
</table>Dica
O h2 da seção continua subordinado ao h1 da agenda. Mantenha o caption e os cabeçalhos com scope: a tabela precisa continuar relacionando cada data ao horário e à obra, não apenas parecer uma grade.
Salve e abra ou atualize a agenda no navegador. Na seção, o título e o texto de contexto devem aparecer antes da tabela. Consulte a linha de 10/10/2026: ela deve indicar 15h e “O cortiço”. A navegação e o rodapé devem permanecer como estavam.
Com as duas páginas abertas no seu navegador, relate em poucas frases:
Se algo não apareceu como esperado, descreva o resultado observado.
Escreva pelo menos 60 caracteres (0/60).
Passo 6 de 8
Complete a página de contato preservando as relações entre campos, rótulos, instruções e agrupamentos, sem confundir a interface com um serviço de envio.
Na página de contato, a introdução, as instruções e o formulário entram no main existente. Incorpore o bloco de conteúdo, não outro documento completo: nada de acrescentar um segundo main ou colocar um form dentro de outro.
Dica
Se renomear o id de um campo, atualize o for do rótulo correspondente. Se renomear o id de uma instrução, atualize o aria-describedby que aponta para ela.
Renomear identificadores não exige mudar name: preserve o nome de envio quando a informação continuar sendo a mesma. Mantenha também os agrupamentos, as restrições e os textos que explicam essas restrições.
Ao adaptar um bloco, o campo passou a ter id="contato-email" e sua instrução passou a ter id="contato-email-ajuda". A informação coletada continua sendo o e-mail, antes identificado para envio por name="email".
Associe cada atributo à configuração que preserva essas relações.
Toque em um item e depois no par correspondente.
No seu editor, abra contato.html. Preserve o title já adaptado, o h1 de contato, as tags do main com seus atributos e as regiões compartilhadas.
Substitua o conteúdo provisório abaixo do h1, dentro do main, pelo bloco completo a seguir. Se houver um formulário provisório, remova-o antes da substituição. Confira se os novos identificadores não aparecem em outro elemento do documento.
<p>Este espaço é destinado a dúvidas e sugestões sobre o clube de leitura.</p>
<p>Este é um formulário demonstrativo, sem envio nesta atividade.
Use apenas dados fictícios. Todos os campos são obrigatórios.</p>
<form>
<fieldset>
<legend>Identificação para contato</legend>
<p>
<label for="contato-nome">Nome (obrigatório)</label>
<input type="text" id="contato-nome" name="nome" required>
</p>
<p id="contato-email-ajuda">
Use um e-mail fictício, como ana@example.com.
</p>
<p>
<label for="contato-email">E-mail (obrigatório)</label>
<input type="email" id="contato-email" name="email"
aria-describedby="contato-email-ajuda" required>
</p>
</fieldset>
<p id="contato-mensagem-ajuda">
Escreva uma dúvida ou sugestão fictícia, de 10 a 500 caracteres.
</p>
<p>
<label for="contato-mensagem">Mensagem (obrigatória)</label>
<textarea id="contato-mensagem" name="mensagem"
rows="5" minlength="10" maxlength="500"
aria-describedby="contato-mensagem-ajuda" required></textarea>
</p>
</form>Atenção
O exemplo não inclui botão de envio. Nesta atividade, apenas monte e preencha os campos com dados fictícios; não tente enviar. As restrições permanecem no código, mas sua conferência durante o envio não faz parte desta etapa.
Montar o formulário não cria processamento nem armazenamento de mensagens.
Salve contato.html e abra ou atualize a página no navegador. Confira a sequência: título, introdução, instruções e campos. Clique no rótulo “E-mail (obrigatório)”: o campo correspondente deve receber o foco.
Preencha com Ana Exemplo, ana@example.com e a mensagem “Sugiro uma conversa sobre contos brasileiros.” Não realize envio.
Registre onde você inseriu o formulário, o resultado do clique no rótulo e uma associação que conferiu no código. Explique também por que a página ainda não representa um serviço de contato funcionando. Se algo não saiu como esperado, descreva o problema.
Escreva pelo menos 60 caracteres (0/60).
Passo 7 de 8
Atualize uma informação comum nas três páginas sem sobrescrever os conteúdos e caminhos próprios de cada arquivo.
A página-base continua sendo uma referência de manutenção, mas os arquivos são independentes. Alterar o rodapé de index.html não modifica as cópias. Para atualizar uma informação compartilhada, repita a alteração em cada documento, sem substituir as partes específicas.
Exemplo
O link “Contato” usa href="contato.html" em index.html e href="../contato.html" em encontros/agenda.html. Ambos mantêm o mesmo destino e rótulo. Compare as regiões compartilhadas pela função e pelo conteúdo esperado, preservando também a ordem da navegação.
Você atualizou o texto institucional do rodapé em index.html. Ele deve aparecer em todo o site. Qual é o próximo passo?
index.html e localize o <footer> da página, fora do <main>.encontros/agenda.html e contato.html.<p>Clube de leitura — encontros para compartilhar histórias e descobertas.</p>Dica
Nesta mudança, não altere <main>, títulos ou links. A apresentação com imagem, a agenda com tabela e o contato com formulário devem continuar distintos.
Compare os trechos no editor. Em quais arquivos você atualizou o rodapé? Cite uma diferença de conteúdo principal ou de caminho de link que preservou.
Passo 8 de 8
Revise as três páginas no editor e no navegador e registre as adaptações que mantêm o site consistente.
Resumo
Use esta síntese do mapa e do inventário como referência para encerrar a montagem.
Salve os três arquivos e abra cada um no navegador. Leia as páginas: a apresentação, a agenda e o contato estão distintos e completos conforme a síntese anterior?
Depois, compare os arquivos no editor:
Corrija o que encontrar, salve e atualize as páginas no navegador.
Dica
Na agenda, o link para a página inicial usa ../index.html; no contato, usa index.html. O destino é o mesmo. Já o ID do main pode se repetir entre arquivos diferentes, mantendo o destino do link de salto em cada página.
Com base nos seus arquivos, escreva um relato curto com:
Escreva pelo menos 100 caracteres (0/100).
Você concluiu a montagem quando as três páginas atendem ao mapa e ao inventário, preservando as regiões compartilhadas e suas diferenças necessárias.
Esta leitura no navegador e comparação no editor não equivalem a uma validação completa nem a uma auditoria de acessibilidade. O formulário continua demonstrativo, sem processamento ou armazenamento de mensagens. A complementação e as verificações do site continuam nas próximas etapas da trilha.
Parabéns! Você concluiu: Integrar conteúdos em páginas consistentes
Tutorial concluído! Use seu relato como registro das adaptações e da consistência entre as páginas.
Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 10 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks
