Pular para o conteúdo
murad.guide

Introdução Completa à Web

Capítulo 12

Juntando o visual no blog

5 min de leitura 919 palavras 2 gravuras

O blog da Casa da Restinga já tem HTML: início, sobre, cinco textos fictícios. Neste capítulo o visual entra sem reescrever os textos. Você liga um CSS, escolhe cor, espaço e um mapa de página.

O exemplo está em exemplos/12-visual-blog/. Natal, cafeteria fictícia. Este volume tem 23 capítulos. Parte do HTML do capítulo 06.

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

O HTML continua; o CSS chega

No head de index.html e de sobre.html:

<link rel="stylesheet" href="estilos.css">

O caminho é relativo ao HTML. Se o CSS está na mesma pasta, o nome do arquivo basta.

Não copie os cinco posts para um arquivo novo “mais bonito”. O exercício é o mesmo blog com cara.

Abra exemplos/12-visual-blog/index.html. Sem o link, a página volta ao texto cru. Com o link, a casa aparece.

Mude uma coisa. Renomeie o href para estilo.css (sem s). Preveja a página sem pintura. Recarregue e confira. Depois restaure.

Erro comum: href="/estilos.css" com barra na frente. No disco local, esse caminho procura a raiz do computador ou do servidor, não a pasta do blog.

Marca, fundo e tipo

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  background: #f4efe6;
  color: #212121;
}

.marca {
  font-size: 2rem;
  color: #0d5c63;
  text-align: center;
}

Fonte do sistema: Georgia (ou Times) para o blog, sem pedir arquivo na internet. A cor de fundo da casa é areia. O verde-água é a marca.

lang="pt-BR" já estava no HTML. O CSS não substitui isso.

Mude uma coisa. Troque o fundo do body por #ffffff. Preveja uma folha mais fria. Recarregue. Se a marca sumir no branco, o contraste caiu: volte.

Erro comum: font-family: "uma fonte que não existe". O navegador cai no padrão. Sempre deixe uma genérica no fim: serif ou sans-serif.

Cabeçalho e navegação

Grid na página. Flex no menu. Hover sublinha o link. Foco ganha anel de 3px.

.pagina {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  grid-template-areas:
    "marca"
    "menu"
    "miolo"
    "rodape";
}

.menu {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
}

.menu a:hover { text-decoration: underline; }
.menu a[aria-current="page"] { font-weight: bold; }
.menu a:focus-visible {
  outline: 3px solid #0d5c63;
  outline-offset: 2px;
}

Os destinos index.html e sobre.html já existem. Não invente um terceiro menu que aponta para a web.

Blog da Restinga: HTML do volume 06 com CSS de marca, menu e artigos

Mude uma coisa. No item da página atual, tire aria-current. Preveja o negrito sumir. Recarregue e confira. Depois coloque de volta.

Erro comum: text-decoration: none em todos os a e nenhum outro sinal de link. O hover some, o visitado some, resta um texto que não parece clicável.

Artigos, datas e imagens

Cada post já é um article. O CSS só afasta, não troca a tag.

.blog-post {
  background: #fff;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-radius: 4px;
}

.blog-post img {
  display: block;
  max-width: 100%;
  height: auto;
}

.blog-post .data {
  color: #585858;
  font-size: 0.9rem;
}

max-width: 100% impede a foto de estourar o artigo no telefone. height: auto mantém a proporção.

Os alt já descrevem a cena fictícia (varanda, xícara, duna). Não apague o alt para “ficar limpo”.

Mude uma coisa. Comente max-width: 100%. Encolha a janela. Preveja a imagem empurrar o texto para o lado. Recarregue e confira. Restaure.

Erro comum: width: 800px fixo na foto. Em tela estreita a página ganha rolagem horizontal.

Lista de posts e a página Sobre

A home empilha artigos. A página Sobre é uma coluna só: história fictícia da casa, sem biografia real.

Se quiser duas colunas nos posts só quando houver espaço:

@media (min-width: 48rem) {
  .lista-posts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

Abaixo de 48rem, uma coluna. O HTML não muda.

Não use float para essa lista. É layout de página (ou de região): Grid.

Mude uma coisa. Troque 48rem por 80rem. Preveja as duas colunas só em telas muito largas. Recarregue, encolha, confira.

Erro comum: duas colunas fixas sem media query. No telefone os dois artigos ficam com 200px e o texto quebra a cada palavra.

Conferir antes de achar pronto

Abra o início e o Sobre. Clique os dois sentidos do menu. O aria-current deve acompanhar a página.

Tab pelo skip-link até o miolo. O anel de 3px aparece.

Zoom 200%. O texto não pode sumir atrás do cabeçalho. Tela estreita (cerca de 320px de largura): uma coluna, menu que quebra linha se precisar (flex-wrap: wrap).

Arquivo no disco: HTML + CSS. Página no navegador: o visual. Teste em 127.0.0.1. Publicação pública não é pedida.

Mude uma coisa. No Sobre, apague o link do CSS. Preveja o texto cru de novo. Recarregue. Religue o arquivo.

Erro comum: editar só o index.html e esquecer o sobre.html. As duas páginas precisam do mesmo estilos.css.

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

Atividades

  1. O link do CSS vai no head ou no footer? Por quê?
  2. Por que o menu usa Flex e a lista de posts, em tela larga, usa Grid?
  3. O que max-width: 100% evita na foto do post?
  4. Como você sabe, pelo teclado, em qual item do menu está?

Respostas comentadas

  1. No head, para o navegador achar o visual cedo. No footer a página pisca sem estilo.
  2. Menu é uma fileira de peças (componente). Lista de posts em duas colunas é região da página.
  3. A imagem maior que a coluna. Sem isso, a foto empurra a página para o lado.
  4. Pelo anel de :focus-visible (cerca de 3px) e, na página atual, por aria-current="page".

Referências