Documentos, links e midia

Trabalhe numa cópia da pasta inicio/ desta etapa. Ela já abre ou executa com as instruções do README. Leia o código, mude uma coisa e anote sua previsão antes de recarregar. Compare com a referência na pasta da etapa. Se nada mudar, confira a extensão do arquivo, o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo são experiências separadas; a pasta de referência contém o programa completo desta etapa.

O site da Biblioteca da Ribeira deixa de ser uma carta solta. Você marca header, nav, main e footer, liga páginas com a href e descreve a fachada com img e alt. Vídeo e áudio entram só como ideia: o exemplo não obriga arquivos pesados.

Trabalhe em 06-documentos-links-e-midia. Abra index.html, siga o menu, mude um href ou um alt, preveja, recarregue e confira. Os livros Maré Alta e Caderno do Cais continuam fictícios.

Arquivos no disco. Páginas no navegador. Teste em 127.0.0.1. Publicação seria copiar o conjunto. O formulário de contato valida e mostra uma confirmação na própria página, sem enviar.

O que você vai aprender

• Estruturar a página com header, nav, main e footer.
• Criar links internos com o atributo href.
• Marcar a página atual com aria-current="page".
• Usar img com alt útil.
• Entender video e audio sem depender de um servidor público.

Anatomia da página

header agrupa marca e menu. nav envolve os links principais. main é o conteúdo único daquela URL. footer fecha com o aviso de estudo.

Essa divisão não é enfeite. Quem usa leitor de tela salta entre marcos. O skip-link aponta para id="conteudo" no main.

Links

A tag a precisa do atributo href. Sem href, não há destino. href="acervo.html" procura o arquivo na mesma pasta.

Texto do link deve fazer sentido fora da frase. Evite “clique aqui”. Prefira “Acervo”.

aria-current="page" no item da página atual evita dúvida no menu.

Imagem

src é o caminho. alt descreve. Largura no HTML é palpite; o CSS da pasta limita max-width.

Erro comum: src="ribeira-fachada.png" apontando para um arquivo que ficou em outra pasta. No disco o HTML abre; a figura não. Em 127.0.0.1 o servidor responde 404 para a imagem. Publicar com o mesmo caminho quebrado também falha.

Várias páginas, um site

O exemplo tem index.html, acervo.html, agenda.html, contato.html e obrigado.html. Cada arquivo é uma página. O menu é que as amarra.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Início — Biblioteca da Ribeira</title>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
    <a class="skip" href="#conteudo">Pular para o conteúdo</a>
    <header class="site-header">
      <p><a href="index.html">Biblioteca da Ribeira</a></p>
      <nav aria-label="Principal">
        <ul>
          <li><a href="index.html" aria-current="page">Início</a></li>
          <li><a href="acervo.html">Acervo</a></li>
          <li><a href="agenda.html">Agenda</a></li>
          <li><a href="contato.html">Contato</a></li>
        </ul>
      </nav>
    </header>
    <main id="conteudo">
      <h1>Biblioteca da Ribeira</h1>
      <p>Acervo comunitário fictício no bairro da Ribeira, Recife.</p>
      <p><img src="ribeira-fachada.png" width="800" alt="Desenho da fachada fictícia da biblioteca"></p>
    </main>
    <footer>
      <p>Conteúdo fictício para estudo. Nada é enviado a um servidor público.</p>
    </footer>
  </body>
</html>

A pasta do volume traz o CSS e as outras páginas. Use-as como referência; não invente um menu pela metade.

Vídeo e áudio, só o conceito

As tags video e audio apontam para arquivos de mídia e podem ter controls. Sem o arquivo no disco, o controle aparece vazio.

Não hospede vídeo de terceiros sem licença. Nesta etapa, a fachada em PNG basta. Um video local se testaria em 127.0.0.1 como qualquer outro arquivo.

Disco, HTTP local e publicação

Clique em Acervo pelo file:// e os relativos ainda funcionam se todos os HTML estiverem juntos. Em http://127.0.0.1:8765/exemplos/06-documentos-links-e-midia/ o mesmo vale, já via HTTP. Publicar exige enviar todos os HTML, o CSS e as imagens. Faltar um href quebra o menu no ar também.

Atividades

1. O que falta a um a sem atributo href?
2. Por que o alt da fachada não deve ser imagem1.png?
3. O formulário em contato.html envia o recado para a internet?

Respostas comentadas

1. O destino. Sem href o texto não é um link de verdade.
2. O alt descreve o que a imagem mostra. O nome do arquivo não ajuda quem não vê a figura.
3. Não. O apoio pronto cancela o envio e mantém a confirmação no navegador. É demonstração de marcação, não cadastro.