Hyperlinks
Recurso amplamente utilizado em HTMLs é o hyperlink. Ele serve para ligar um documento à outro na Web. Basicamente, ele será composto pelo endereço de outro documento e, ao ser clicado, levará você ao endereço referenciado por ele. Existem duas maneiras de usar hyperlinks nos seus documentos, com textos ou com imagens.
O texto aparecerá sublinhado e o cursor do mouse ficará diferente ao passar por cima dele. As imagens terão o mesmo efeito de mudança de cursor.
Primeiramente ensinaremos a criar links com texto. Eles podem ser criados com a tag "<a href="endereço para onde quer redirecionar">", que deve ser fechada com "</a>". O conteúdo entre a tag será o texto que deverá ser clicado para que o navegador redirecione. Pode ser qualquer coisa que você quiser, mas recomenda-se usar alguma coisa intuitiva.
A Internet originalmente pretendia usar hyperlinks em abundância, quando seu conteúdo ainda era basicamente composto por textos científicos e documentos. O aumento da velocidade de transferência e o início do uso de imagens e meios multimídia na rede ofuscaram um pouco seu propósito original. Um exemplo para o uso de hyperlinks com texto seria:
<a href="http://www.google.com">Google</a>
Um recurso que pode ser útil se você quiser redirecionar a pessoa mas manter a sua própria página aberta é adicionar o atributo "target="_blank"" à sua tag "<a>". O resultado é que ao clicar no link, uma nova janela do navegador abrirá com o endereço desejado. Note o exemplo abaixo:
<a href="http://www.google.com" target="_blank">Google</a>
Agora vamos mostrar como você cria um hyperlink usando uma imagem ao invés do texto. O processo é bem semelhante.
<a href="http://www.google.com"><img border="0" src="http://www.google.com.br/intl/pt-BR/logos/Logo_25wht.gif" /></a>
No lugar do texto inserimos uma imagem e ela automaticamente se transforma na âncora responsável por ligar o documento à outro.
Vamos aproveitar esse exemplo para darmos mais uma explicação, como inserir imagens. Você deve ter percebido que usamos uma tag diferente logo acima: "<img />". Ela tem seus atributos que serão mostrados em breve. Ela serve exatamente para inserir imagens no documento HTML, servindo tanto para buscar imagens no computador local ou na rede. No nosso caso, usamos para buscar na Internet, mas isso é indiferente, o navegador trata qualquer um dos casos muito bem.
Para explicar como funciona o mecanismo de usar imagens que estão no computador local, devemos entender dois conceitos antes, o de caminho relativo e o de caminho absoluto.
O caminho absoluto indica a localização do arquivo no computador a partir do diretório raiz. Por exemplo, um arquivo chamado "foo.bar" que está dentro da pasta home do usuário Joao tem caminho absoluto "/home/Joao/foo.bar" ou o arquivo de configuração padrão de grande parte dos Xorg tem caminho absoluto "/etc/X11/xorg.conf".
O conceito de caminho relativo distancia-se do de absoluto na medida em que não é possível determinar o caminho do arquivo sem saber a pasta em que se está no momento.
Outra diferença é que torna-se mais complicado acessar um arquivo que esteja em uma pasta que está numa pasta que não descende da que você está na árvore de diretórios. Para dizermos o caminho relativo de um arquivo "foo.bar" que está na mesma pasta em que estamos no momento, podemos dizer que é "foo.bar". Suponhamos agora a seguinte estrutura de pastas:
Partindo da pasta arquivos, o caminho relativo do arquivo "foto1.jpg" é "fotos/foto1.jpg" enquanto o de "texto2.txt" é "/textos/texto2.txt". Dessa maneira, o arquivo "tema1.tem" do projeto1 terá como caminho relativo "projetos/projeto1/tema1.tem". Até aí não existem muitas complicações, mas é necessário conhecer um pouco sobre como trabalhar com arquivos que estão em pastas que estão em níveis superiores. Isso exigirá o uso de "..". Quando você estiver na pasta projeto1 e quiser saber o caminho relativo do arquivos "prazos_dos_projetos.txt"deverá ter em mente que este arquivo encontra-se em um nível superior na árvore de diretórios com relação à qual você está no momento. Isso quer dizer que você deve retroceder um nível para só então poder chamar o arquivo desejado, e exatamente para isso será necessário o uso de "..". Como solução, estando na pasta projeto1, o caminho relativo será "../prazos_dos_projetos.txt".
Quando for necessário retroceder mais níveis ainda, você precisará usar mais "..". Por exemplo, imagine-se agora no diretório "projeto2" e deseja saber o caminho relativo para o arquivo "praia3.jpg". Ele será "../../fotos/fotos_na_praia/praia3.jpg". Os primeiros ".." te colocarão no diretório "projetos" e o segundo no "arquivos". Deste ponto em diante você segue os passos de como se estivesse apenas buscando em sub-diretórios.
Dada essa longa explicação, prosseguiremos na parte de imagens no computador local. Fica bem simples se o princípio acima estiver entendido pelo aluno. Para adicionar uma imagem que esteja na mesma pasta do seu documento HTML apenas coloque
<img src="nome_da_imagem" />
Caso ela esteja numa subpasta:
<img src="nome_da_subpasta/nome_da_imagem" />
E, finalmente, se ela estiver em pastas que não descendem da que você estiver:
<img src="../nome_da_pasta/nome_da_imagem" />
Você pode descer quantos níveis quiser até encontrar sua imagem, mas é recomendado, caso sua imagem esteja em lugares que não sejam o próprio caminho ou uma subpasta, que você utilize o caminho absoluto. Em geral, quando se está fazendo páginas de grande porte, é comum armazenar todas as imagens em subpastas do caminho onde se encontra o documento HTML. Dessa maneira, o uso de caminhos relativos se torna muito mais ágil e facilita imensamente no caso de ser necessário uma mudança de servidor ou da pasta onde se encontram os arquivos, isso porque quando for completada a operação, nenhum caminho precisará ser consertado no seu código.
