Html >> Caminhos relativos e absolutos

Caminhos absolutos:

A estrutura dos endereços de Internet seguem uma hierarquia similar à dos sistemas de arquivos do seu computador. Primeiro, temos o domínio, como www.site.com. Depois, vemos a estrutura de diretórios e o nome dos arquivos, com sua extensão, como www.site.com/folder/file.htm

Caminhos “absolutos” são aqueles feitos com o endereço de internet completo, incluindo a declaração do protocolo "http://".

Caminhos absolutos são usados principalmente quando precisamos criar um link para um site, imagem ou arquivo em domínio diferente de nosso site, visto que nessa situação não temos como informar o caminho relativo ao local atual da página onde estaremos inserindo o caminho absoluto.

Exemplo de uso na tag <a> ... </a>:

<a href="http://www.site.com/lol/page1.html">Há pegadinha do malandro</a>

Exemplo de uso na tag <img>:

<img src="http://www.jotajota.com/jota.jpg">

Caminhos relativos:

Caminhos “relativos” são aqueles que declaram o destino tendo como referência o diretório atual do arquivo onde estamos e o diretório para o qual o caminho aponta. Nos exemplos abaixo, instruimos o browser a procurar pela página “page1.htm” e pelo arquivo "imagem.jpg" no mesmo site e diretório da página em que estabelecemos os caminhos:

Exemplo de uso nas tags <a>...</a> e <img>:

<a href="page1.html">Go now!</a>
<img src="imagem.jpg">

Arquivos em pastas inferiores: Caso você tenha um arquivo guardado em outra pasta no seu site, você poderá acessá-lo de acordo com sua posição em relação a pasta em que o arquivo esta:

<a href="minhapasta/page1.html">Go now!</a>
<img src="minhapasta/imagem.jpg">

Arquivos em pastas superiores: Às vezes, o arquivo de seu site que você quer linkar está em uma pasta a cima da pasta do arquivo atual. Se você está editando a página http://www.site.com/sol/page1.html, e você quer linkar de forma relativa para http://www.site.com/promotion/sale.html, você precisa subir um nível de pasta (com o comando “../”), e a partir dele entrar na pasta “promotion”para linkar o arquivo. Exemplo:

<a href="../promotion/sale.html">Go now!</a>
<img src="../promotion/produto.jpg">

Se você estiver em um nível bem inferior, como http://www.site.com/sol/lua/estrela/page1.html, e quiser fazer esse mesmo link, será preciso subir mais dois níveis, Exemplo:

<a href="../../../promotion/sale.html">Go now!</a>
<img src="../../../promotion/produto.jpg">

Obs: Use caminhos absolutos para arquivos em outros sites e camihos relativos para arquivos dentro do seu próprio site.