Projetista Digital

Olá Pessoal,

Para complementar o assunto LINKS e IMAGENS, vamos aprender a manipular o caminho dos arquivos a serem linkados ou inseridos em nossas páginas. É um assunto importante, e usuários iniciantes costumam ter alguma dificuldade. Por isso tenham atenção e pratiquem bastante.

Caminho relativo X Caminho absoluto

Podemos classificar os caminhos de arquivos em dois tipos: absoluto e relativo. O caminho absoluto utiliza toda a estrutura de pastas e diretórios, desde a raiz, para montar a URL do arquivo. Seria algo como:

C:/Documents and Settings/All Users/Meus Documentos/sites/site/home.html

Por questões de praticidade e flexibilidade, não usamos esse tipo de caminho para montar links internos, ou seja, aqueles que apontam para páginas e arquivos dentro do nosso próprio servidor. O caminho absoluto é usado em URL’s que apontem para arquivos dentro de outro servidor. Veja um exemplo:

http://www.google.com.br ou http://www.google.com.br/intl/pt-BR_br/images/logo.gif

Já os caminhos relativos são aqueles que tomam o próprio documento HTML como referência para encontrar outros artigos. Nos caminhos relativos, partimos do documento onde criamos o link, inserimos a imagem etc., e vamos navegando pela estrutura de pastas até achar o documento a ser linkado / inserido. Usamos caminhos relativos sempre que precisamos referenciar arquivos dentro do nosso próprio servidor: imagens, vídeos, links internos etc.

Vamos estudar no decorrer desse tutorial como trabalhar com caminhos relativos. Imaginemos que exista a seguinte de estrutura de pastas e arquivos:

• Site
  • IMAGENS
    • logo.jpg
    • foto.jpg
  • CLIENTES
  • FLASH
  • home.html
  • perfil.html
  • servicos.html
  • contato.html
• Site2
  • IMAGENS2
    • logo2.jpg
    • foto2.jpg
  • CLIENTES2
  • FLASH2
  • home2.html
  • perfil3.html
  • servicos4.html
  • contato5.html

Linkando arquivos na mesma pasta

Eu preciso criar um link para me levar da página HOME.HTML para CONTATO.HTML. Como eu faria isso?

1

<a href="contato.html" title="Ir para a página de contato">Contato</a>

Como HOME e CONTATO são arquivos dentro da mesma pasta, para estabelecer um link entre eles basta especificar o nome do arquivo e sua extensão.

Linkando arquivos em pastas diferentes

Agora, como eu faria para inserir a imagem LOGO.JPG na página HOME? A primeira coisa que vocês devem perceber: o arquivo LOGO.JPG está na pasta IMAGENS, logo para acessá-la precisarei especificar a pasta IMAGENS no meu caminho de arquivo. Veja como ficará:

1

<img src="IMAGENS/logo.jpg" alt="Logomarca do site X" title="Logomarca do site X" />

Para especificar uma ou mais pastas necessárias para se chegar a um arquivo, basta colocar o nome das pastas e subpastas (respeitando o uso de caixa alta e caixa baixa) separados por “/”. Ficaria algo assim: PASTA/SUBPASTA1/SUBPASTA2/arquivo.jpg.

Essa estrutura é usada tanto em links, quanto em imagens, ou qualquer outra situação onde seja necessário estabelecer um caminho para um arquivo qualquer (dentro de pastas e subpastas).

Linkando arquivos em níveis diferentes

No exemplo anterior, tanto a pasta IMAGENS, quanto o arquivo HOME.HTML estão no mesmo nível, por assim dizer. Percebam que ambos se encontram dentro da mesma pasta: SITE. Por esse motivo podemos acessar diretamente a pasta IMAGENS. Porém, como eu poderia linkar a página HOME2.HTML, dentro do arquivo HOME.HTML? Os dois arquivos estão em níveis diferentes: HOME está dentro da pasta SITE; HOME2 está na pasta SITE2.

Sempre que precisarmos subir um nível, ou seja sair da nossa pasta atual, e ir para uma pasta um nível acima (do mesmo modo que navegamos pelas pastas e diretórios do Windows), basta escrever “../” no caminho do arquivo. Veja como ficará o nosso link:

1

<a href="../Site2/home2.html" title="Link para o site2">Ir para o site 2</a>

Se for necessário subir três níveis de pastas, basta usar três “../”: ../../../PASTA/arquivo.html. Trabalhar com caminhos de arquivos não é difícil ou complicado, exige apenas um pouco de atenção para a hierarquia de arquivos e pastas no site. É normal se enrolar na contagem de pastas, quando precisamos subir vários níveis, e com a prática você irá se acostumar e errar cada vez menos. Uma dica importante: sempre que você errar um caminho com vários níveis, tente adicionar ou retirar “../”, para verificar se você não errou na contagem de pastas.

Bem, por hoje é só pessoal! Próximo tutorial abordará o assunto TABELAS. Até lá.

Abraços,
Diego.