Links páginas e caminhos

Neste capítulo você vai ligar duas páginas e reconhecer caminhos relativos.

Seu ponto de partida

Estude depois do capítulo 02. O exemplo deste capítulo é 03-links-caminhos, no pacote que acompanha o volume. Copie a pasta inicio para um diretório de prática e preserve o original. A raiz do exemplo é a referência concluída desta etapa. Sua cópia permite experimentar sem perder a referência.

Abra index.html da cópia com dois cliques. Edite o mesmo arquivo num editor de texto simples. Abrir no disco não publica a página.

Como praticar

Leia a explicação e digite ou confira o código indicado. Mude uma coisa. Antes de conferir, anote sua previsão. Salve, recarregue e compare. Se não acontecer o esperado, investigue o erro antes de avançar. Cada experiência parte dos valores da referência. Depois de conferir, desfaça somente a mudança desse experimento antes de começar a próxima lição. Você pode parar depois de uma lição e retomar mais tarde.

Um link tem destino e texto

A cria um link. Href é um atributo que informa o destino. O texto entre abertura e fechamento explica aonde o link leva. Não use Clique aqui quando Palestrantes descreve melhor a ação.

A nova página palestrantes.html está na mesma pasta que index.html. Por isso o caminho usa apenas seu nome. As duas páginas são completas e podem ser abertas separadamente.

Faça no seu exemplo

Confira a navegação em index.html.

<a href="palestrantes.html">Palestrantes</a>

Mude uma coisa e preveja

Troque somente o texto do link por Conheça as palestrantes.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

O rótulo muda; o clique continua abrindo a mesma página.

Se não acontecer

Se ocorrer arquivo não encontrado, confira a grafia do href e a extensão do arquivo.

Mostre a página atual

Aria-current=“page” identifica o link da página atual. O atributo deve acompanhar a página aberta; não marque todos os itens. Mais tarde usaremos CSS para reforçar a indicação visual.

Copiar um cabeçalho para outra página exige revisar title, h1 e o item atual. A referência de cada etapa contém os valores corretos para você comparar.

Faça no seu exemplo

Compare nav nas duas páginas.

<a href="index.html" aria-current="page">Início</a>
<a href="palestrantes.html">Palestrantes</a>

Mude uma coisa e preveja

Na página de palestrantes, confira qual link tem aria-current.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

Somente Palestrantes está marcado nessa página.

Se não acontecer

Se Início permanecer marcado, você copiou a navegação sem atualizar o estado da página.

O caminho começa onde está o arquivo

Um caminho relativo é resolvido a partir do arquivo que o usa. Uma imagem dentro de assets/imagens precisa desse percurso no HTML. Em CSS, o caminho de uma imagem começa na pasta do arquivo CSS, não na pasta do HTML.

Evite caminhos absolutos do seu computador, como C:\Users. Eles não funcionam na cópia de outra pessoa. Espaços e acentos em nomes de recursos podem ser usados, mas os nomes simples fornecidos reduzem erros de digitação.

Faça no seu exemplo

Veja a árvore de arquivos desta etapa.

index.html
palestrantes.html
assets/
  stylesheets/
    main.css

Mude uma coisa e preveja

Numa cópia, troque somente o href por palestrante.html, sem s.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

O link falha porque o arquivo tem outro nome. Restaure o destino.

Se não acontecer

Não tente resolver renomeando vários arquivos ao mesmo tempo. Compare primeiro nome real e href.

A captura mostra um trecho da referência concluída. Abra e percorra o exemplo para conferir o restante. Experimentos temporários podem produzir outra aparência; restaure os valores indicados antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia do exemplo. Tente aplicar o que aprendeu antes de consultar os comentários.

1. Abra as duas páginas e volte ao início.

2. Explique href e texto do link.

3. Marque corretamente o item atual de cada página.

Respostas comentadas

Compare sua explicação e o que realmente aconteceu. Outra solução pode funcionar se cumprir o objetivo e preservar o acesso ao conteúdo.

1. Os caminhos relativos ligam os arquivos da mesma pasta.

2. Href define destino; o texto comunica esse destino.

3. Cada nav tem um único aria-current=“page”.

Quando seguir

Você percorre os links e encontra a causa de um caminho errado. Se ainda precisa de ajuda, repita a experiência pequena antes de avançar.

O arquivo completo

Referência do exemplo 03-links-caminhos, 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>Conferência de Estilos</title>
<link rel="stylesheet" href="assets/stylesheets/main.css">
</head>
<body>
<a class="pular" href="#conteudo">Pular para o conteúdo</a>
<header><h1>Conferência de Estilos</h1><p>Pequenos passos para aprender HTML &amp; CSS.</p><nav aria-label="Principal"><a href="index.html" aria-current="page">Início</a> <a href="palestrantes.html">Palestrantes</a> </nav></header>
<main id="conteudo" tabindex="-1"><section aria-labelledby="sobre"><h2 id="sobre">Sobre o evento</h2><p>Um evento fictício para aprender fazendo.</p></section></main>
<footer><p>Conferência fictícia. Exercício local.</p></footer>
</body>
</html>

assets/stylesheets/main.css

:focus-visible { outline: 3px solid #b04d00; outline-offset: 3px; }
.pular { position: absolute; left: -10000px; }
.pular:focus { position: static; display: block; padding: 1rem; background: white; }