Pastas, nomes e caminhos

Este capítulo ensina a nomear arquivos e a apontar de um para o outro. O site da Oficina Costeira, coletivo fictício de design em João Pessoa, ganha pasta assets de verdade. O exemplo correspondente é 05-pastas-nomes-caminhos, no pacote que acompanha o volume.

Este volume tem 52 capítulos. Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

O que você vai aprender

• Nomear em minúsculas, com hífen, sem espaço.
• Entender por que Linux na publicação quebra o que o Windows perdoa.
• Organizar assets/stylesheets e assets/imagens.
• Escrever caminhos relativos, ../ e absoluto.
• Evitar caminho com / inicial em file://.
• Conferir o caminho na barra depois de cada clique.

Regras de nome na Web

Todo arquivo e toda pasta do site seguem três regras.

1. Só minúsculas, inclusive a extensão: .html, .css, .svg.
2. Sem espaço. Separe palavras com hífen: farol-da-restinga.html.
3. Só letras sem acento, números, hífen e o ponto da extensão.

Sublinhado _ funciona, mas o hífen separa palavras melhor para busca. Evite.

Exceções convencionais, fora do HTML da Oficina: README.md e LICENSE. No conteúdo do site, não use.

Errado: Foto Capa.JPG, página 1.html, Main.CSS. Certo: capa.jpg, projetos.html, main.css.

Por que minúsculas e sem espaço

Windows trata Foto.jpg e foto.jpg como o mesmo arquivo. Muitos servidores de publicação usam Linux, que trata os dois como arquivos diferentes.

No disco do aluno a imagem abre. Na publicação pública, o src em minúsculas não acha Foto.jpg. Padronize minúsculas desde o primeiro save.

Espaço na URL vira %20. Ninguém quer escrever isso à mão. Hífen evita o problema.

Erro comum: espaço invisível no fim do nome. Ligue caracteres invisíveis no editor. Renomeie.

A pasta raiz e o que entra em assets

A raiz do site é a pasta que contém o index.html da home. No exemplo, 05-pastas-nomes-caminhos.

Convenção deste volume:

index.html
projetos.html
equipe.html
agenda.html
contato.html
assets/
  stylesheets/main.css
  imagens/marca.svg
  javascript/
  midia/

CSS em assets/stylesheets. Imagens em assets/imagens. Não misture tudo na raiz. Não edite um “framework” de terceiros se o volume pedir arquivo próprio: aqui o CSS da Oficina é main.css.

O index.html da home precisa ficar na raiz. Subpasta inicio/index.html muda a URL e quebra o hábito do servidor.

Caminho relativo: mesmo andar ou descer

Relativo parte do arquivo que contém o link.

Do index.html para projetos.html, os dois na raiz:

<a href="projetos.html">Projetos</a>

Do index.html para o CSS:

<link rel="stylesheet" href="assets/stylesheets/main.css">

Do index.html para a marca:

<img src="assets/imagens/marca.svg" alt="Marca da Oficina Costeira, sol e linha de costa">

./projetos.html é o mesmo que projetos.html. O ponto atual é implícito.

Copie o head abaixo. Mude só o caminho do CSS para um nome errado, por exemplo assets/stylesheets/nao-existe.css. Preveja: a página perde o estilo. Recarregue. Confira. Depois restaure main.css.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Início — Oficina Costeira</title>
    <link rel="stylesheet" href="assets/stylesheets/main.css">
  </head>
  <body>
    <h1>Oficina Costeira</h1>
    <p>Coletivo fictício de design em João Pessoa.</p>
    <p><a href="projetos.html">Projetos</a></p>
  </body>
</html>

Subir pasta com ../

../ sobe um nível. ../../ sobe dois.

Se um dia existir projetos/farol-da-restinga.html, o CSS da raiz fica:

<link rel="stylesheet" href="../assets/stylesheets/main.css">

E o link de volta à home:

<a href="../index.html">Início</a>

Conte os degraus. Cada pasta extra pede um ../.

Caminho absoluto na Internet inclui protocolo e domínio:

<a href="https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files">Arquivos na MDN</a>

Caminho que começa com / é relativo à raiz do domínio. Em file:// aponta para o disco. Nos exemplos, evite / no início.

file://, 127.0.0.1 e publicação

Arrastar index.html para o navegador usa file://. Caminhos relativos simples funcionam. /assets/stylesheets/main.css não aponta para a pasta do site.

Teste em 127.0.0.1 simula o servidor. Aí / significaria a raiz que o Python está servindo, se você usasse essa forma. Este volume prefere relativos ao arquivo, para o exemplo abrir dos dois jeitos.

Publicação pública copia a mesma árvore. Se o nome quebra no Linux, a imagem some só depois do envio. Teste minúsculas agora.

Erro comum: src="Marca.SVG" no HTML e arquivo marca.svg no disco. No Windows passa. No servidor, some.

Onde o caminho aparece

Você escreve caminho em:

• href de a e de link
• src de img
• url() no CSS, relativo ao arquivo CSS, não ao HTML

Se o CSS está em assets/stylesheets/main.css e a imagem em assets/imagens/marca.svg:

.brand {
  background-image: url("../imagens/marca.svg");
}

Do CSS, sobe de stylesheets para assets e desce para imagens.

Abra o exemplo. Quebre de propósito o href da marca. Recarregue. A imagem falha. Corrija uma coisa. Recarregue. Confira.

Atividades

1. Por que Farol da Restinga.html é um nome ruim neste volume?
2. Do index.html na raiz, qual o href de assets/stylesheets/main.css?
3. Por que /assets/imagens/marca.svg falha em file://?
4. No exemplo, mude só um caminho de imagem. O que você previu e o que a página mostrou?

Respostas comentadas

1. Tem espaços, maiúsculas e acento no hábito de quem digita títulos. A URL ficaria frágil. Use farol-da-restinga.html.
2. assets/stylesheets/main.css — desce para assets, depois stylesheets.
3. A barra inicial pede a raiz do servidor. Sem servidor, a raiz é o disco, não a pasta da Oficina Costeira.
4. Caminho errado: imagem quebrada (ícone de erro). Caminho certo: a marca volta. O HTML no disco mudou; a janela só depois do recarregar.

Referências

• Lidar com arquivos
• O que é uma URL
• Elemento link
• Elemento img

O arquivo completo

Referência do exemplo 05-pastas-nomes-caminhos, reproduzida aqui para que você possa conferir sem sair da página.

assets/javascript/simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",event=>{event.preventDefault();document.querySelector("#retorno").textContent="Simulação concluída. Nada foi enviado ou guardado.";});}