Pular para o conteúdo
murad.guide

As Três Camadas

Capítulo 3

Listas, links e imagens

4 min de leitura 733 palavras 2 gravuras

Este capítulo liga as páginas da Oficina e mostra uma foto com texto alternativo. O exemplo está em exemplos/03-listas-links/. Abra index.html, oficinas.html e clique em cada item do menu.

Um link é um endereço clicável. Uma lista agrupa itens. Uma imagem é um arquivo à parte: o HTML só aponta para ele.

Trabalhe na cópia inicio desta etapa. Leia e digite o código indicado; mude apenas uma coisa. Antes de recarregar, escreva o resultado que espera. Depois compare com a referência completa ao lado. Se algo falhar, confira primeiro o arquivo salvo e o caminho aberto.

O que você vai aprender

Listas com e sem ordem

ul é lista não ordenada: a ordem dos itens não é o ponto. ol é lista ordenada: o primeiro passo vem antes do segundo. li é cada item.

<ul>
  <li>Cerâmica no terreiro</li>
  <li>Xilogravura na casa de farinha</li>
  <li>Fotografia ao entardecer</li>
</ul>
<ol>
  <li>Escolha a oficina.</li>
  <li>Chegue dez minutos antes.</li>
  <li>Leve roupa que possa sujar.</li>
</ol>

Não use lista só para recuar texto. Não monte um menu com div empilhados se o que você tem é um conjunto de destinos.

Lista não ordenada e lista ordenada lado a lado

Pare e experimente. Em oficinas.html, troque a ol dos passos por ul. Recarregue. Os números somem. A ordem dos passos ainda importa no texto; a marcação deixou de dizer isso. Recoloque a ol.

A tag a cria o link. O atributo href diz para onde ele leva. Sem href, o texto não aponta para lugar nenhum.

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

Caminho relativo parte do arquivo atual. oficinas.html é o vizinho na mesma pasta. Caminho absoluto na web começa com https://. Para e-mail, mailto: — use um endereço inventado.

O texto do link deve fazer sentido sozinho. Evite “clique aqui”. Prefira “Oficinas” ou “Horário da cerâmica”.

Erro comum: escrever Oficinas.html com O maiúsculo enquanto o arquivo se chama oficinas.html. No seu Windows o clique pode funcionar. Num servidor o link quebra. Copie o nome do arquivo.

Âncoras na mesma página

Uma âncora salta para um elemento com id. O href começa com #.

<ul>
  <li><a href="#ceramica">Cerâmica</a></li>
  <li><a href="#xilo">Xilogravura</a></li>
</ul>
<h2 id="ceramica">Cerâmica</h2>
<p>Tigelas, pratos e um forno elétrico seguro.</p>
<h2 id="xilo">Xilogravura</h2>
<p>Matrizes de madeira e tinta à base d'água.</p>

O skip-link do capítulo 2 é uma âncora: href="#conteudo". O id não se repete na mesma página.

Pare e experimente. Em oficinas.html, clique em Fotografia. A página deve rolar até o h2 correspondente. Se nada acontecer, o id e o href não combinam letra por letra.

Imagem com caminho e alt

img não tem tag de fechamento. src é o caminho do arquivo. alt descreve a imagem para quem não a vê. Se a imagem for só enfeite, alt="" — mas as fotos da Oficina descrevem a cena.

<figure>
  <img src="imagens/oficina-ceramica.png" alt="Bancada de cerâmica com tigelas de barro ainda úmidas." width="800" height="500">
  <figcaption>Oficina de cerâmica — imagem ilustrativa do curso.</figcaption>
</figure>

O caminho imagens/oficina-ceramica.png parte do HTML: entra na pasta imagens e procura esse arquivo. ../ sobe um nível. Não invente uma pasta que não existe.

Do HTML até o arquivo da imagem pelo caminho relativo

Maiúsculas importam. Oficina-Ceramica.PNG não é o mesmo nome de oficina-ceramica.png.

Erro comum: o src aponta para um arquivo na pasta do editor, ou para C:\Users\.... No navegador da outra pessoa esse caminho não existe. Use caminho relativo à pasta do site.

Se a imagem não aparece, o HTML ainda está lá. O navegador só não achou o arquivo. Confira o nome, a pasta e o src antes de mexer no alt.

width e height no img avisam o tamanho e reduzem o pulo do layout. Eles não substituem o CSS. O alt continua obrigatório quando a foto informa.

Pare e experimente. Em index.html, mude só o src para imagens/nao-existe.png. Recarregue. A foto some; o alt deve continuar disponível. Restaure o nome certo.

Atividades

  1. Quando escolher ol em vez de ul na página Oficinas?
  2. O que um href="#foto" pede ao navegador?
  3. Por que src="C:\fotos\ceramica.png" falha em outro computador?
  4. No exemplo 03-listas-links, qual alt descreve a foto da home?

Respostas comentadas

  1. Nos passos (“escolha, chegue, leve”). A ordem importa. A lista de nomes das oficinas pode ser ul.
  2. Procurar o elemento com id="foto" nesta página e rolar até ele.
  3. Esse caminho só existe na máquina de quem escreveu. O site precisa de um caminho relativo à pasta do HTML.
  4. “Bancada de cerâmica com tigelas de barro ainda úmidas.” — ou o texto equivalente no img da home.

Referências