Escrevo essa publicação na intenção de ajudar aos iniciantes na arte do HTML. Não é muito simples encontrar alguma referência completa sobre isso na internet em português do Brasil. Aí, eu, na minha qualidade de educador, resolvi fazer isso.
Primeiro precisamos deixar claro que podemos usar as palavras ‘pasta’ e/ou ‘diretório’ para dizer a mesma coisa. Você que está lendo já deve saber o que é uma pasta: uma subdivisão de uma memória armazenadora de arquivos para facilitar o acesso humano a estes arquivos. Normalmente identificada e apontada com um nome de fácil assimilação. Por exemplo, a pasta ‘músicas’ provavelmente terá dentro dela arquivos de sons: mp3, ogg, wav.
As referências a outro arquivo, em HTML e outros sistemas de apontamento, podem ser do tipo relativas ou absolutas. São relativas quando consideradas a partir da localização do arquivo que está as chamando. E são absolutas quando consideradas a partir de um outro ponto inicial comumente conhecido. Para entender melhor, vamos considerar a localização do banheiro de uma casa. Se simplificarmos bem, podemos indicar a localização do banheiro a partir da entrada da rua (seria a indicação de localização absoluta) ou podemos indicar a localização do banheiro a partir do local onde estamos (seria a indicação de localização relativa). Assim, para se chegar ao banheiro, podemos ter:
ReferÊncia relativa
Entre na porta da esquerda.
Referência absoluta
Entre na casa, siga o corredor, suba a escada a direita, entre no quarto e entre na porta da direita.
As referências absolutas e relativas podem ficar mais complexas ou simples de acordo com o ponto de partida onde se está. Acima vimos um exemplo onde a referência relativa parece mais simples que a absoluta. Abaixo teremos um exemplo de como isso fica diferente quando temos que ir para a lavanderia da casa.
ReferÊncia relativa
Saia do quarto, desça a escada, vire a esquerda, siga o corredor e entre a direita.
Referência absoluta
Entre na casa, entre na porta a esquerda.
Agora vamos ver isso acontecendo com apontamentos de localização de arquivos.
Vou fazer uma aproximação do tipo de memória que o computador precisa acessar para o tipo de memória que nós gostaríamos de acessar na internet. A localização de pedaços de memória nos computadores é chamada de endereço. E tanto nós, usuários, quanto o processador do computador precisa saber o endereço das memórias que deseja-se acessar. Para o computador não tem problema isso ser uma coisa complicada como por exempo 00FF0F0017AFF5B001. Mas para nós humanos isso é ruim de interpretar e lembrar. Por isso os endereços de memórias nos foram simplificados.
Vamos considerar uma pasta de trabalho. Uma pasta no drive principal do computador chamada ‘Meu site’. O endereço completo desta pasta no drive principal do computador seria C:/inicio/meu usuário/meus trabalhos/meu site. Mas isso não nos importa muito. Só é necessário que estejamos familiarizados com a maneira como os arquivos são localizados dentro de uma estrutura de pastas no computador.
Dentro desta pasta ‘meu site’ tem um arquivo html. Podemos chamá-lo de index.html. Também tem uma pasta chamada ‘antigas’ e uma pasta chamada ‘recentes’. E dentro de cada uma destas pastas tem um arquivo HTML chamado ‘inicio.html’. Além de tudo isso, dentro da pasta ‘meu site’ temos uma pasta chamada ‘imagens’ e uma pasta ‘css’. Não vou descrever a estrutura inteira de arquivos porque fica muito mais fácil olhando para a imagem. Veja a representação gráfica de tudo.
Tendo nossa estrutura de arquivos, podemos navegar entre eles com referências entre um e outro. Todas as referências que faremos agora serão relativas. Adiante trabalharemos com referências absolutas.
Considerando que com nossos navegadores estamos no documento inicial do site, ‘index.html’, dentro de nossa pasta principal, que é a ‘meu site’. Se neste documento index.html eu precisar navegar para o documento ‘index_antigas.html’ que está na pasta ‘antigas’, preciso fazer o link da seguinte maneira.
<a href="antigas/index_antigas.html">clique aqui para ver as antigas</a>.Estando neste documento, se eu quiser voltar para o documento anterior, uso o link assim:
<a href="../index.html">clique aqui para voltar</a>.Repare nos pontos. Esta é a forma de apontarmos para um documento que está um nível abaixo do que estamos navegando.
Agora, estando em ‘index.html’, desejo fazer um link para a o documento que está dentro de ‘recentes’ e dentro de ‘melhores’. Para fazer isso, a partir do ‘index.html’, pode-se fazer assim:
<a href="recentes/melhores/index_melhores.html">clique aqui para ver os melhores e mais recentes</a>.Estando no documento ‘index_melhores.html’, se eu quiser apontar para a página ‘index.html’ preciso colocar duas vezes os pontos de saída da pasta no caminho que vou apontar. Então, o endereço relativo ficaria assim:
<a href="../../index.html">clique aqui para voltar ao início</a>.Da mesma forma, se dentro da página ‘index_melhores.html’ eu quiser usar uma imagem que está na pasta ‘imagens’, preciso endereçar desta maneira a solicitação.
<img src="../../imagens/circulo.jpg">Agora vamos ver como estes apontamentos ficariam para endereçamentos absolutos. Isso apenas funciona se eu estiver hospedando meus arquivos em um servidor web. Eu posso estar funcionando o servidor no meu próprio computador, localmente, ou eu posso ter enviado os arquivos para uma pasta remota em um computador remoto onde esteja funcionando um servidor web. Vamos supor que este servidor web esteja preparado para responder no endereço http://www.teste.edu.br. Então teríamos a mesma estrutura de arquivos anterior, mas que respondem neste endereço.
Para fazermos a mesma chamada para o arquivo ‘index.html’ de forma absoluta, usamos a âncora assim:
<a href="http://www.teste.edu.br/index.html">Ir para a página inicial.</a>Para chamar a página ‘index_antigas.html’ que está dentro da pasta ‘antigas’, o apontamento ficaria assim:
<a href="http://www.teste.edu.br/antigas/index_antigas.html">Ver as páginas antigas.</a>E para eu usar uma imagem dentro de qualquer uma das páginas desta estrutura eu posso chamar no endereço da pasta de imagens.
<img src="http://www.teste.edu.br/imagens/leite.png">Algumas observações agora:
- a maioria dos servidores web está configurada para sempre apresentar o arquivo ‘index.html’ dentro de cada pasta solicitada se nenhum outro arquivo for determinado. Assim, tanto de forma relativa quanto absoluta, se você tivesse um arquivo chamado ‘index.html’ dentro da pasta ‘melhores’, por exemplo, para apontá-lo você poderia apenas apontar a pasta onde ele está. Assim:
<a href="http://www.teste.edu.br/recentes/melhores">Clique aqui</a>. - quando configuramos um servidor web em nosso próprio computador de trabalho, a maioria das vezes o primeiro documento apresentado pode ser chamado no endereço ‘localhost’.
- De maneira relativa, para apontarmos para o arquivo ‘index.html’ que está na raiz, podemos fazer um link apenas para “/”. Assim:
<a href="/">Voltar para o início</a> - Normalmente a navegação de um site acontece misturando-se chamadas relativas e absolutas – então não precisa se ater a apenas um tipo. As referências cruzadas são uma riqueza da internet. Quanto mais referências coerentes fazemos em um documento, melhor a qualidade dele.
