Conteúdo imagens e uma segunda página

Neste capítulo você vai organizar uma página de leitura e navegar entre duas páginas com uma imagem local.

Seu ponto de partida

Continue depois do capítulo 03. Abra pacote de exemplos/04-conteudo-imagens. Copie inicio para uma pasta de prática. Abra index.html da cópia no navegador e no editor.

A raiz do exemplo é a referência pronta. Inicio fornece o HTML desta etapa e o CSS no estado anterior. Você modifica sua cópia e compara com a referência. Até o capítulo 11, dois cliques bastam; abrir no disco não publica a página.

Como praticar

Leia e confira as linhas indicadas. Mude uma coisa. Anote sua previsão, salve e recarregue. Compare com a explicação. Se não funcionar, investigue o erro antes de seguir. Pare e retome quando precisar; não é necessário decorar as propriedades.

Organize o conteúdo por assunto

O Caderno CSS agora tem uma seção chamada Minha rotina. Section reúne conteúdo de um mesmo assunto, aqui identificado por h2. Uma lista ordenada usa ol; cada item fica em li. A ordem importa porque representa uma sequência de estudo.

Article serve para um conteúdo que faz sentido como unidade, como um texto de consulta. Não é necessário trocar todos os recipientes por section ou article. Use a marca que descreve o conteúdo.

Você vai encontrar também strong e em no exemplo. Strong indica importância; em indica ênfase. A aparência padrão costuma ser negrito e itálico, mas a função vem do HTML. Se a necessidade for apenas visual, use CSS.

O Simple.css fornece estilos para esses elementos. Seu trabalho é primeiro organizar o conteúdo e depois observar a aparência recebida.

Faça no seu exemplo

Em index.html, localize a seção já preparada e compare com o bloco. Para praticar a digitação, substitua a seção existente pelo bloco completo.

<section aria-labelledby="rotina">
  <h2 id="rotina">Minha rotina</h2>
  <ol>
    <li>Ler a proposta.</li>
    <li>Mudar uma coisa.</li>
    <li>Conferir no navegador.</li>
  </ol>
</section>

Mude uma coisa e preveja

Troque apenas o texto do segundo item por Prever o resultado.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Salve e recarregue. Confira a ordem dos três itens e o título da seção.

Resultado esperado neste teste: O segundo item deve mudar; a lista continuará numerada.

Se não acontecer

Não escreva números manualmente dentro de cada li. A numeração é produzida pela lista ol.

Mostre uma imagem que está na pasta

A imagem deste exercício é uma captura real da página do capítulo anterior. Ela mostra o texto e a nota que você já construiu. Usar uma captura do projeto ajuda a comparar resultado e código sem acrescentar uma ilustração que não explica nada.

Img coloca a imagem na página. Src informa o caminho. Alt descreve a informação visual quando a imagem não é vista. Figure agrupa a imagem e sua legenda; figcaption contém essa legenda visível.

O caminho imagens/03-resultado.png é relativo ao arquivo HTML. Ele procura a pasta imagens ao lado de index.html. A grafia do nome precisa coincidir, inclusive maiúsculas e minúsculas num servidor que as distingue.

Não use a legenda como única alternativa à imagem. A legenda pode explicar o contexto; alt precisa permitir entender o que a figura mostra.

Faça no seu exemplo

Localize a figure existente em index.html. A imagem e a pasta já acompanham o exemplo. Substitua o bloco existente se quiser digitá-lo.

<figure>
  <img src="imagens/03-resultado.png"
       alt="Página de estudo com apresentação e nota de borda lateral">
  <figcaption>Uma etapa anterior do Caderno CSS.</figcaption>
</figure>

Mude uma coisa e preveja

Troque somente a legenda por Meu primeiro teste de espaçamento.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Depois faça um teste de erro: escreva um nome inexistente em src, recarregue e observe a alternativa textual. Restaure o caminho do bloco.

Resultado esperado neste teste: A imagem deve permanecer igual, com uma nova legenda abaixo.

Se não acontecer

Uma imagem quebrada normalmente indica caminho errado ou arquivo ausente. Não tente corrigir src mudando a cor pelo CSS.

Navegue entre duas páginas

O exemplo inclui index.html e pratica.html. São dois arquivos completos na mesma pasta. O menu usa links para navegar entre eles. A é o elemento de link; href indica o destino.

Aria-current=“page” identifica a página atual para tecnologias assistivas e também permite que o Simple.css a apresente de forma diferente. Em index.html, Início é a página atual. Em pratica.html, Prática é a página atual.

O cabeçalho, a área principal e o rodapé continuam diretamente dentro de body. Algumas regras do Simple.css usam essa relação. Um recipiente novo envolvendo tudo poderia mudar a correspondência desses seletores.

As duas páginas referenciam os mesmos arquivos simple.css e custom.css. Uma alteração na personalização pode aparecer nas duas, sem copiar as regras para cada HTML.

Faça no seu exemplo

Compare o menu existente em index.html com o bloco. Em pratica.html, o atributo aria-current fica no link Prática.

<nav aria-label="Navegação principal">
  <a href="index.html" aria-current="page">Início</a>
  <a href="pratica.html">Prática</a>
</nav>

Mude uma coisa e preveja

Troque o texto do link Prática por Oficina nas duas páginas, mantendo o href.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Clique para ir e voltar. Depois pressione Tab até chegar ao link e Enter para ativá-lo. Confira que somente o link da página atual está marcado.

Resultado esperado neste teste: O nome visível muda, mas o destino continua sendo pratica.html.

Se não acontecer

Se renomear o arquivo, precisa atualizar todos os links que apontam para ele. Trocar apenas o texto do link não renomeia o arquivo.

A captura mostra um trecho da referência concluída. Role a página do exemplo para conferir o restante. Os testes temporários podem apresentar outra aparência; restaure os valores indicados antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia do exemplo. Estas atividades são para aplicar o que aprendeu; tente antes de ler o comentário.

1. Altere a legenda e mantenha a imagem funcionando.
2. Crie um link de pratica.html para index.html.
3. Por que trocar h2 por h1 só para aumentar a fonte prejudica a organização?

Respostas comentadas

Compare seu resultado e sua explicação. Um ajuste diferente pode funcionar, desde que cumpra a tarefa sem cortar conteúdo nem retirar acesso.

1. Modifique figcaption e preserve src. Legenda e endereço têm funções diferentes.

2. Use Voltar ao início, dentro do conteúdo de pratica.html.

3. O nível identifica a posição do título no conteúdo. Ajuste o tamanho pelo CSS e mantenha h2 para a seção.

Quando seguir

Você navega nas duas páginas por teclado e consegue corrigir o caminho da imagem. Se ainda precisa de ajuda para isso, repita o teste pequeno antes de avançar.

Consulta opcional

Os links abaixo aprofundam este assunto. Você não precisa lê-los para realizar a prática com os arquivos locais. Créditos da origem e licenças ficam no README.

• Referência 1
• Referência 2

O arquivo completo

Referência do exemplo 04-conteudo-imagens, 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>Caderno CSS | Curso de CSS</title>
  <link rel="stylesheet" href="simple.css">
<link rel="stylesheet" href="custom.css">
  
</head>
<body>
  <a class="pular" href="#conteudo">Pular para o conteúdo</a>
  <header>
    <h1>Caderno CSS</h1>
    <p>Pequenos passos para aprender CSS.</p>
    <nav aria-label="Navegação principal">
  <a href="index.html" aria-current="page">Início</a>
  <a href="pratica.html">Prática</a>
</nav>
  </header>
  <main id="conteudo" tabindex="-1">
    <h2>Meu ponto de partida</h2>
<p class="apresentacao">Um lugar para estudar uma coisa por vez.</p>
<p class="nota">Leia, mude uma coisa e confira o resultado.</p>
<section aria-labelledby="rotina"><h2 id="rotina">Minha rotina</h2>
<ol><li><strong>Ler</strong> a proposta.</li><li>Mudar <em>uma coisa</em>.</li><li>Conferir no navegador.</li></ol></section>
<figure><img src="imagens/03-resultado.png"
alt="Página de estudo com apresentação e nota de borda lateral">
<figcaption>Uma etapa anterior do Caderno CSS.</figcaption></figure>

  </main>
  <footer>
    <p>Material fictício para estudo local.</p>
  </footer>
</body>
</html>

custom.css

/* Personalizações do Caderno CSS. Preserve simple.css. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.pular {
  position: absolute;
  left: -10000px;
}
.pular:focus {
  position: static;
}

/* Capítulo 01 */
h1 { font-style: italic; }

/* Capítulo 02 */
.nota { border-left: 4px solid var(--accent); padding-left: 1rem; }
.apresentacao { font-weight: normal; }
.apresentacao { font-weight: bold; }

/* Capítulo 03 */
.apresentacao { line-height: 1.7; font-size: 1.1rem; }
.nota { padding: 1rem; margin-block: 2rem; width: 30rem; max-width: 100%; }

/* Capítulo 04 */