Caminhos de ficheiro HTML

Já consegue escrever páginas com títulos, parágrafos e comentários. Sites reais raramente vivem num único ficheiro. Imagens, outras páginas, folhas de estilo e scripts ficam em pastas ao lado do seu HTML — e o HTML tem de apontar corretamente para eles. Esses ponteiros são caminhos de ficheiro. Se o caminho estiver errado, o ficheiro pode existir no disco e o navegador mesmo assim mostrar uma imagem partida ou uma ligação morta. Dominar caminhos é uma das competências mais práticas do HTML inicial: sem elas, o markup “certo” parece falhar sem motivo aparente.

O que é um caminho de ficheiro?

Um caminho de ficheiro é o endereço que o navegador usa para ir buscar outro ficheiro. Normalmente escreve-o em atributos como src (imagens, scripts, multimédia) e href (ligações, folhas de estilo e muitos recursos relacionados). O caminho não é decoração. É uma instrução: “procura aqui.” Quando a instrução está errada, o pedido falha mesmo que as etiquetas de markup pareçam impecáveis. Pense no caminho como um mapa: diz ao navegador quais pastas atravessar e que nome de ficheiro abrir no fim do percurso.

Resposta direta

Use um caminho relativo quando o ficheiro alvo viaja com as pastas do projeto — por exemplo images/logo.png a partir de uma página na mesma pasta pai, ou ../images/logo.png a partir de uma página um nível mais fundo. Use um caminho absoluto de raiz que começa com / quando o site está alojado e todas as páginas devem partilhar o mesmo caminho a partir da raiz do site. Use um URL completo (https://…) quando o ficheiro vive noutro anfitrião ou CDN. Principiantes devem dominar primeiro os caminhos relativos, porque as pastas de prática local dependem deles. Depois de compreender a árvore de pastas, raiz e URL tornam-se escolhas naturais em vez de atalhos confusos.

Relativo vs absoluto num relance

Um mapa pequeno de projeto

Imagine uma pasta chamada project. Dentro dela tem:

• index.html (página inicial)
• about.html (mesma pasta que a página inicial)
• uma pasta images contendo logo.png
• uma pasta pages contendo contact.html
  O hábito importante é este: pergunte sempre qual ficheiro HTML está a editar antes de escrever src ou href. A mesma imagem precisa de caminhos relativos diferentes a partir de páginas diferentes. Se editar index.html e depois contact.html sem repensar o ponto de partida, é fácil copiar um caminho que funcionava noutro sítio e partir a imagem. Trabalhe sempre a partir da localização do ficheiro atual na árvore.

Caminhos relativos a partir da pasta do projeto

A partir de index.html ou about.html, images e pages são pastas filhas. Não precisa de ../ para as alcançar. O navegador começa na pasta do HTML atual e entra nos nomes que escrever, um segmento de cada vez.

Porque estes valores funcionam

• images/logo.png significa “entrar na pasta images ao lado deste ficheiro HTML e depois abrir logo.png”
• pages/contact.html significa “entrar em pages e depois abrir contact.html”
• about.html significa “outro ficheiro na mesma pasta que a página atual”
• O texto alt não é um caminho; é texto acessível quando a imagem não pode ser mostrada
  Se o logótipo faltar no navegador, verifique a ortografia, o nome real da pasta e se guardou o HTML na pasta que pensa ter usado. Um espaço extra, uma letra maiúscula diferente ou um ficheiro guardado numa pasta “cópia” ao lado do projeto verdadeiro são causas frequentes. Confirme também que a extensão do ficheiro de imagem corresponde exatamente ao que escreveu no atributo.

Caminhos relativos a partir de uma subpasta

contact.html vive dentro de pages/. A partir daí, images/ não é filha de pages/. Fica ao lado de pages/ sob project/. Tem de subir um nível com ../ e depois entrar em images/. Sem esse passo de subida, o navegador procura uma pasta images dentro de pages, que neste mapa não existe.

Como ler ../

• ../ significa “subir para a pasta pai”
• ../images/logo.png significa “subir até project/, depois entrar em images/logo.png”
• ../index.html significa “subir até project/, depois abrir index.html”
• Escrever images/logo.png a partir de contact.html procura pages/images/logo.png, que não existe neste mapa
  Este único erro — esquecer ../ a partir de uma subpasta — causa uma grande parte dos relatórios de “imagem partida” em projetos de principiantes. Pode encadear ../../ para subir dois níveis, mas só o faça se a árvore de pastas realmente exigir isso. Cada ../ extra muda o destino; mais ../ do que o necessário também parte o caminho.

Caminhos absolutos de raiz e URLs completos

Um caminho absoluto de raiz começa com / e resolve-se a partir da raiz do site num servidor web real, não a partir da pasta atual. Um URL completo inclui o protocolo e o domínio. URLs completos são normais para ficheiros de terceiros. Caminhos absolutos de raiz são úteis em sites alojados quando muitas páginas devem partilhar um caminho estável, independentemente da profundidade da pasta de cada página.

Ficheiros locais vs raízes alojadas

Quando abre um ficheiro HTML diretamente a partir do disco (file://…), muitas vezes não existe uma raiz real de website. Um caminho como /images/logo.png pode não corresponder à pasta no seu computador da mesma forma que corresponderá num servidor. Para a prática local de principiantes, prefira caminhos relativos que coincidem com as pastas reais. Depois de o site estar alojado, os caminhos absolutos de raiz tornam-se mais fiáveis entre páginas. Em resumo: relativo para pastas de treino no disco; raiz ou URL quando o modelo de alojamento o justifica.

Prática: caminhos a partir de um mapa de pastas

A pasta shop contém:

• home.html
• uma pasta assets com hero.jpg
• uma pasta help com faq.html
  Faça isto no editor:

1. Em home.html, adicione um img que carregue hero.jpg com um caminho relativo.
2. Em help/faq.html, adicione um img que carregue o mesmo ficheiro usando ../.
3. A partir de faq.html, adicione uma ligação relativa de volta a home.html.
4. Abra ambas as páginas no navegador e confirme que a imagem e a ligação funcionam.
5. Parta de propósito um caminho, atualize, veja a falha e depois corrija — esse feedback treina o olho mais depressa do que só ler.
   Respostas relativas esperadas neste mapa: assets/hero.jpg a partir de home.html; ../assets/hero.jpg e ../home.html a partir de faq.html. Se a imagem aparecer numa página e falhar na outra, o problema quase de certeza é o ponto de partida relativo, não o ficheiro hero.jpg em si.

Erros de caminho que partem páginas

• Escrever images/logo.png a partir de uma subpasta quando o caminho correto precisa de ../images/logo.png
• Errar a ortografia do nome do ficheiro ou da pasta, ou desencontrar maiúsculas e minúsculas em anfitriões que tratam Logo.PNG e logo.png como ficheiros diferentes
• Usar \ do Windows em caminhos web — prefira / nos atributos HTML
• Colocar um caminho de disco como C:\site\img.png em src ou href numa página web normal
• Copiar um caminho de raiz /images/... para um projeto que só abre como ficheiro local e assumir que se comporta como um site alojado
• Ligar a contact.html quando o ficheiro vive realmente em pages/contact.html
• Mudar pastas no Explorer/Finder e esquecer de atualizar todos os caminhos que apontavam para a disposição antiga
  Cada um destes erros produz o mesmo sintoma externo: o pedido falha. A correção começa sempre por localizar o ficheiro HTML que está a editar e recontar o caminho a partir dessa pasta.

Resumo

• Os caminhos de ficheiro dizem ao navegador onde vivem os ficheiros ligados para src, href e atributos semelhantes
• Os caminhos relativos resolvem-se a partir da pasta do ficheiro HTML atual
• ../ sobe uma pasta num caminho relativo; use-o quando o alvo fica acima do ficheiro atual
• Os caminhos absolutos de raiz começam com /; os URLs completos incluem protocolo e domínio
• Combine o estilo de caminho com a disposição: relativo para prática local do projeto, raiz/URL quando o modelo de alojamento os exige
• Caminhos partidos são uma das razões mais comuns para imagens e ligações “misteriosamente” falharem
• Decida sempre o caminho a partir do ficheiro que está a editar, não a partir da memória de outra página