Projeto: blog da Restinga

Este capítulo fecha o HTML do primeiro retrato. Você vai montar o blog da Casa da Restinga, cafeteria fictícia em Natal, com index.html e sobre.html. Este volume tem 23 capítulos. O exemplo está em exemplos/06-blog/.

Cinco posts falam da casa, do cardápio e da rotina do balcão. Nenhum post fala da sua vida. Os nomes são inventados. CSS ainda espera o capítulo 7: o visual preto e branco está certo.

Trabalhe na cópia inicio da etapa. Leia e digite o código; mude uma coisa. Antes de recarregar, anote sua previsão. Depois confira com a referência completa. Se nada mudar, confira o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo podem ser digitados no console; o exemplo completo mostra a aplicação daquela etapa.

O que você vai aprender

• Ligar home e Sobre na mesma pasta.
• Escrever título, intro e menu na home.
• Publicar cinco posts fictícios com título, autoria, data e texto.
• Contar a casa na página Sobre, sem biografia pessoal.
• Conferir links, alt e o caminho na barra.

Duas páginas, um site

O blog deste volume tem dois arquivos. index.html é a home. sobre.html apresenta a cafeteria. Os dois usam o mesmo esqueleto: DOCTYPE, html lang="pt-BR", head com charset e viewport, body com menu e miolo.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Casa da Restinga</title>
  </head>
  <body>
    <header>
      <p><a href="index.html">Casa da Restinga</a></p>
      <nav aria-label="Principal">
        <ul>
          <li><a href="index.html">Início</a></li>
          <li><a href="sobre.html">Sobre</a></li>
        </ul>
      </nav>
    </header>
    <main id="conteudo">
      <!-- miolo desta página -->
    </main>
  </body>
</html>

Copie o esqueleto para os dois arquivos. Mude o title de cada um. O da Sobre pode ser Sobre — Casa da Restinga.

Abra a home com dois cliques (file://) ou em 127.0.0.1. Clique Sobre. Volte. Se a barra ainda mostra este computador, você não publicou.

Erro comum: salvar os dois arquivos em pastas diferentes. O href="sobre.html" procura o vizinho. Sem vizinho, o clique quebra.

O ciclo deste capítulo é o do volume inteiro: ler → copiar → mudar uma coisa → prever → recarregar → conferir. Não escreva os cinco posts de uma vez sem abrir a janela. Escreva um, recarregue, depois copie o molde.

A home apresenta a casa

No main da home, um h1 com o nome da casa. Em seguida, dois parágrafos curtos: o que é o lugar e onde fica, tudo fictício.

<main id="conteudo">
  <h1>Casa da Restinga</h1>
  <p>Cafeteria fictícia em Natal, entre a duna e o mar.</p>
  <p>Torrada cedo, bolo de caju à tarde, vento na mesa da janela.</p>
</main>

Não escreva “eu nasci em…” nem o seu telefone. A narradora do blog é a casa, não você.

O menu já aponta para Sobre. Confira o aria-label no nav. Se houver dois menus depois, o rótulo distingue um do outro.

Leia. Copie. Mude uma coisa. Preveja. Recarregue. Confira. Troque só o segundo parágrafo. O h1 e a aba devem permanecer.

Cinco posts, o mesmo molde

Abaixo da intro, uma section com os posts. Cada post é um article. Cinco artigos, cinco histórias da cafeteria.

Molde:

<article class="post">
  <h2 class="titulo-post">Título do recado</h2>
  <p class="meta">Autoria · data</p>
  <img src="imagens/foto.png" alt="Descrição da cena.">
  <p>Primeiro parágrafo.</p>
  <p>Segundo parágrafo.</p>
</article>

Título, autoria, data e texto são obrigatórios. Imagem é bem-vinda se o arquivo existir na pasta. alt descreve a cena. Não use foto sua.

As cinco pautas deste volume:

1. A torrada das seis — Iara Dantas, 10 de março.
2. Bolo de caju da terça — Tomé Alves, 11 de março.
3. A mesa da janela — Bia Lacerda, 12 de março.
4. Leite de coco no espresso — Iara Dantas, 13 de março.
5. Playlist da Praia do Meio — Tomé Alves, 14 de março.

Copie o molde cinco vezes. Mude título, meta e parágrafos. Não cole lorem ipsum se você puder escrever duas frases sobre o café.

O texto de cada recado

Escreva em pt-BR, frases curtas. Dois parágrafos por post bastam. Exemplo do primeiro:

<article class="post">
  <h2 class="titulo-post">A torrada das seis</h2>
  <p class="meta">Iara Dantas · 10 de março</p>
  <p>O forno acende antes da Rua das Dunas acordar. A primeira fornada sai com cheiro de manteiga e milho.</p>
  <p>Quem chega no abrir leva a fatia ainda quente. A casa não existe fora deste curso, mas o recado vale como treino.</p>
</article>

Segundo: a terça é dia de bolo de caju. Tomé corta fatias largas. A casca carameliza. Sobrou uma fatia no balcão até o meio-dia, só no recado.

Terceiro: a mesa 4 pega o vento da duna. Bia descreve o caderno que as visitas esquecem. Ninguém reserva com dados reais.

Quarto: leite de coco vai à parte. Iara não mistura na máquina. Quem pede espresso com coco recebe xícara e jarro.

Quinto: de manhã toca um samba baixo e um forró antigo. Tomé escreve a lista do dia no verso do cardápio. Praia do Meio entra no título, não no GPS da aluna.

Dois parágrafos por post. Se quiser um terceiro, que seja sobre a casa, não sobre a sua rotina. Sem lorem ipsum em latim se o enredo do café já cobre o recado.

Pare e experimente. Inverta a data dos posts 1 e 2. Recarregue. Só o texto da meta deve mudar. Restaure se quiser a ordem combinada.

A página Sobre é da casa

sobre.html não é o seu currículo. É a ficha fictícia da cafeteria.

<main id="conteudo">
  <h1>Sobre a Casa da Restinga</h1>
  <p>A Casa da Restinga é uma cafeteria inventada para este curso. Fica numa Rua das Dunas que não existe no mapa.</p>
  <p>Iara Dantas cuida do espresso. Tomé Alves cuida do forno. Bia Lacerda escreve os recados do mural.</p>
  <h2>O que a casa já fez neste enredo</h2>
  <ul>
    <li>Abriu às sete num feriado de São João imaginário.</li>
    <li>Serviu bolo de caju até acabar a forma.</li>
    <li>Emprestou um caderno à mesa da janela.</li>
  </ul>
  <p><a href="index.html">Voltar aos recados</a></p>
</main>

A lista é de feitos da casa, não da aluna. Sem escola real, sem emprego real, sem foto pessoal.

O h1 desta página é “Sobre a Casa da Restinga”. Não repita o h1 da home palavra por palavra se o assunto mudou. A aba também muda.

Conferir antes de avançar

Checklist desta etapa:

• Os dois arquivos abrem.
• Cada um tem lang="pt-BR", charset e viewport.
• A home tem intro e cinco article.
• Cada post tem título, autoria, data e pelo menos um parágrafo.
• Sobre fala da casa, com uma lista.
• Os links de ida e volta funcionam.
• Imagens, se existirem, têm alt e caminho relativo.

O ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir. Quebre de propósito o href de Sobre. Clique. A página não deve abrir. Restaure.

Se uma imagem não aparece, o HTML ainda está no disco. O navegador não achou o arquivo. Confira pasta, nome e maiúsculas.

file:// e 127.0.0.1 são estudo. Publicar o blog viria depois, e não pede dado real. O capítulo 7 começa a pintar este retrato com CSS.

Conte no editor: um h1 na home, cinco article, um link para Sobre. Na Sobre, um h1 próprio e o link de volta. Se faltar um post, copie o molde. Se sobrar um h1 no meio dos recados, troque por h2.

Atividades

1. Quantos arquivos HTML este retrato exige, e qual o papel de cada um?
2. O que cada post precisa ter, no mínimo?
3. Por que a página Sobre não deve contar a sua biografia?
4. No exemplo 06-blog, o clique em Sobre usa caminho relativo ou absoluto? Como você prova?

Respostas comentadas

1. Dois: index.html (home com intro e posts) e sobre.html (ficha da cafeteria).
2. Título, autoria, data e o texto do recado. Imagem é extra, com src e alt.
3. O projeto é fictício. Dados pessoais não entram no exercício nem num arquivo que alguém possa zipar depois.
4. Relativo: sobre.html na mesma pasta. A barra de endereço permanece nesta máquina e o arquivo vizinho abre.

Referências

• Estrutura de um documento HTML
• Elemento article
• Criar hiperlinks
• Imagens no HTML

O arquivo completo

Referência do exemplo 06-blog, reproduzida aqui para que você possa conferir sem sair da página.

assets/stylesheets/main.css

/* CSS entra no capítulo 07 */