Pular para o conteúdo
murad.guide

Introdução Completa à Web

Capítulo 5

Organizar, head e meta

7 min de leitura 1.226 palavras 2 gravuras

Este capítulo junta dois trabalhos. Primeiro, agrupar o conteúdo da Casa da Restinga com caixas nomeadas. Depois, completar o head de cada arquivo. A cafeteria é fictícia e fica em Natal. Este volume tem 23 capítulos. O exemplo está em exemplos/05-organizar-head/.

O HTML no disco descreve a estrutura. O navegador monta a página. Abrir com dois cliques usa file://. Servir em 127.0.0.1 continua sendo só esta máquina. Nada disso publica.

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

Um bloco que se explica

Imagine um recado no mural da casa: título, data, foto e texto. Tudo isso é um bloco. Uma caixa envolve o bloco para ele viajar junto.

<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 acordar.</p>
</article>

article diz: este pedaço faria sentido sozinho. div também agrupa, mas não leva esse significado. Os dois funcionam. article ajuda quem volta ao código depois.

Sem classe, o bloco já aparece. Com classe, você lê o HTML e sabe o papel de cada pedaço. CSS ainda não pintou nada. O rótulo já vale.

Pare e experimente. Tire o article e deixe os filhos soltos no body. Recarregue. O visual muda pouco. No editor, o post deixa de ser um pacote. Recoloque a caixa.

Classes não pintam ainda. Elas nomeiam. Quando o CSS chegar, .post e .titulo-post já existem. Mudar o nome depois obriga a mudar HTML e CSS juntos. Escolha um nome que você ainda entenda na semana que vem.

O ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

Classes em série, o mesmo formato

Quando o formato se repete, copie a estrutura. Mude só o conteúdo. Três recados, três article com as mesmas classes.

<section class="mural">
  <h2>Recados do balcão</h2>
  <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 acordar.</p>
  </article>
  <article class="post">
    <h2 class="titulo-post">Leite de coco no espresso</h2>
    <p class="meta">Tomé Alves · 11 de março</p>
    <p>Quem pede coco recebe a xícara e o jarro à parte.</p>
  </article>
</section>

O h2 da seção é o título do mural. Cada post também tem h2. No capítulo 6 você ajusta a hierarquia da home. Hoje o ponto é o pacote repetível.

Não existe um jeito mágico de nomear classe. post e titulo-post bastam se você entender amanhã. Evite abc e box1.

Posts agrupados numa seção com as mesmas classes

O menu é uma lista de destinos. nav marca o papel. ul e li listam os links.

<nav aria-label="Principal">
  <ul>
    <li><a href="index.html">Início</a></li>
    <li><a href="sobre.html">Sobre</a></li>
  </ul>
</nav>

href="sobre.html" é relativo ao arquivo atual. Os dois arquivos precisam estar na mesma pasta. Sem a barra inicial, o navegador procura o vizinho. Com /sobre.html, ele procuraria na raiz do site publicado — o que ainda não existe.

Maiúsculas importam no servidor. Sobre.html não é sobre.html. No Windows o clique às vezes engana. Confira o nome no Explorador.

Erro comum: ligar href="/sobre.html" e achar que o arquivo da pasta abre. Em file:// esse caminho quase sempre falha.

Pare e experimente. Mude o href para Sobre.html com S maiúsculo. Recarregue e clique. Anote o que aconteceu. Restaure o nome igual ao arquivo.

aria-label="Principal" nomeia este nav. Se um dia existir menu no rodapé, o segundo ganha outro rótulo. Sem rótulo, o leitor de tela anuncia só “navegação” duas vezes.

Não precisa dar classe a tudo. O nav único pode viver sem classe. Os posts repetidos ganham classe porque o formato se copia.

O esqueleto do documento

Todo arquivo deste volume usa o mesmo osso:

<!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>
    <!-- conteúdo visível -->
  </body>
</html>

<!DOCTYPE html> pede o HTML atual. html é a raiz. lang="pt-BR" declara o idioma. head guarda metadados. body guarda o que a pessoa vê.

Nada de h1 no head. Nada de title no meio do body no lugar da aba. Cada um tem sua prateleira.

Copie este esqueleto de projeto em projeto. Ser explícito evita o navegador “adivinhar” charset ou viewport.

O que o head faz

meta charset="utf-8" preserva ç, ã, é e emoji. Sem essa linha, o acento pode virar símbolo quebrado. Sempre UTF-8 neste volume.

O viewport pede ao celular para usar a largura do aparelho. Sem ele, a página aparece como um cartaz minúsculo.

title é o texto da aba. Também vira o nome do resultado de busca, se um dia a página for pública. Hoje ela não é pública.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sobre — Casa da Restinga</title>
</head>

O title da home e o da página Sobre devem diferir. A visitante lê a aba e sabe onde está.

Se o charset faltar, o ç de “cafeteria” pode virar símbolo quebrado, conforme o palpite do navegador. Não deixe o palpite decidir. Declare UTF-8.

O viewport não “deixa a página bonita no celular”. Ele evita o zoom-out clássico. Layout estreito de verdade vem com CSS, mais adiante.

Início da referência desta etapa no navegador local

O ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir. Mude só o title da home para “Restinga”. Recarregue. A aba deve mudar. O h1 do body deve permanecer.

Duas páginas na mesma pasta

Crie index.html e sobre.html na mesma pasta. Em cada uma, o esqueleto completo. Em cada uma, um link para a outra.

Na home:

<p><a href="sobre.html">Sobre a casa</a></p>

Na Sobre:

<p><a href="index.html">Voltar ao início</a></p>

Abra index.html com dois cliques ou por 127.0.0.1. Clique o link. A segunda página deve abrir. Se a barra mostrar file:// ou 127.0.0.1, você ainda está nesta máquina. Publicar é outro passo, e não é deste capítulo.

Pare e experimente. Mova sobre.html para uma subpasta e não atualize o href. Clique. O link deve quebrar. Volte o arquivo para a mesma pasta.

O capítulo 6 enche essas duas páginas: cinco posts fictícios da cafeteria na home e um texto sobre a casa, não sobre a sua vida.

Não use dados pessoais. Iara Dantas, Tomé Alves e a Rua das Dunas são inventados.

O arquivo no disco é o HTML. A página é o que a janela mostra depois do clique. 127.0.0.1 entrega a pasta local. Publicação colocaria esses dois arquivos num endereço de outras pessoas. Este volume não publica.

Se o link Sobre abrir uma página em branco, confira se o segundo arquivo tem body com conteúdo. Esqueleto sem miolo é só aba e fundo.

Atividades

  1. Qual a diferença de papel entre div e article num post?
  2. O que um href="sobre.html" procura, e o que um href="/sobre.html" procura?
  3. Por que charset e viewport ficam no head e não no body?
  4. No exemplo 05-organizar-head, os arquivos index.html e sobre.html estão na mesma pasta? Como o link prova isso?

Respostas comentadas

  1. Os dois agrupam. article marca um bloco autônomo. div é caixa genérica, sem esse significado.
  2. O primeiro procura o vizinho na pasta do arquivo atual. O segundo procura na raiz do site. Em estudo local, o segundo costuma falhar.
  3. São metadados. Dizem ao navegador como ler e exibir o documento. Não são conteúdo visível da cafeteria.
  4. Sim. O clique troca de página sem sair da pasta do exemplo. Se o arquivo faltasse, o navegador mostraria erro de arquivo não encontrado.

Referências

O arquivo completo

Referência do exemplo 05-organizar-head, 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 content="width=device-width, initial-scale=1" name="viewport"/>
<title>Organizar, head e meta — Casa da Restinga</title>
<style>body{overflow-wrap:anywhere}img,input,textarea,select{max-width:100%}img{height:auto}fieldset,main{min-width:0}pre{max-width:100%;overflow:auto}:focus-visible{outline:3px solid #005fcc;outline-offset:3px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}</style></head>
<body>
<a class="skip" href="#conteudo">Pular para o conteúdo</a>
<header>
<div class="wrap">
<a class="brand" href="index.html">Casa da Restinga</a>
<nav aria-label="Principal">
<ul>
<li><a aria-current="page" href="index.html">Início</a></li>
<li><a href="sobre.html">Sobre</a></li>
</ul>
</nav>
</div>
</header>
<main class="wrap" id="conteudo" tabindex="-1">
<h1>Casa da Restinga</h1>
<p>Cafeteria fictícia em Natal. Esta é a etapa 05.</p>
<p><a href="#">Link de estudo</a></p>
</main>
<footer>
<div class="wrap">
<p>Casa da Restinga — Natal. Conteúdo fictício. Nada é enviado a um servidor.</p>
</div>
</footer>
</body>
</html>

assets/stylesheets/main.css

*,
*::before,
*::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, ul { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; }
body {
  font-family: "Segoe UI", Tahoma, sans-serif;
  line-height: 1.5;
  color: #1a2a2c;
  background: #f7f3ea;
}
a { color: #0d5c63; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid #c45c26;
  outline-offset: 3px;
}
.skip { position: absolute; left: -999px; }
.skip:focus { left: 0.5rem; top: 0.5rem; background: #fff; padding: 0.4rem 0.7rem; z-index: 2; }
.wrap { width: min(44rem, calc(100% - 2rem)); margin-inline: auto; }
header { background: #0d5c63; color: #fff; padding: 1rem 0; }
header a { color: #fff; }
.brand { font-weight: 700; text-decoration: none; }
nav ul { list-style: none; display: flex; gap: 1rem; margin-top: 0.5rem; }
nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.2em; }
main { padding: 1.5rem 0 3rem; }
footer { border-top: 1px solid #ddd4c4; padding: 1rem 0; font-size: 0.95rem; }
article { margin: 1.25rem 0; padding-bottom: 1rem; border-bottom: 1px solid #ddd4c4; }