Onde está esse arquivo afinal?

Sempre que você coloca uma imagem, uma folha de estilo ou um link em HTML, o navegador precisa saber onde encontrar aquele arquivo.

É aí que entram os caminhos de arquivo.

Exemplo simples

Carregando...

Aqui o navegador procura foto.jpg na mesma pasta do arquivo HTML.

Caminho relativo

Carregando...

Isso indica que a imagem está dentro da pasta images.

Subindo uma pasta

Carregando...

O .. significa “voltar uma pasta”.

Exemplo com CSS externo

Carregando...

Por que isso costuma dar erro?

Porque basta errar uma pasta, um nome de arquivo ou uma extensão para o navegador não achar nada.

E ele não costuma fazer milagre. Se o caminho estiver errado, a imagem some e o CSS finge que nunca ouviu falar de você.

Portanto, sempre confira:

• nome do arquivo;
• extensão;
• nome das pastas;
• posição do HTML em relação ao recurso.