Aula de HTML – Âncoras, Links e Bookmarks

Ao navegar pela internet, o usuário se depara com palavrass geralmente escritas em azul e sublinhadas, sobre as quais o cursor assume formato de uma mãozinha. Clicando neste local levará as informações diferentes, podendo esta se encontrar:

- Em outro local da mesma página;
- Em outra página no mesmo site;
- Em outro site, que pode estar em um lugar totalmente diferente do globo;

Esta poderosa capacidade de conexão de idéias através de links é proporcionada pela linguagem HTML através do marcador Âncora de hipertexto, representado por <A></A>. Dentro deste marcador é preciso colocar a referência do arquivo destino, que se dá através do atributo HREF.

Exemplo:

<A HREF=“referência ao arquivo destino“> texto ou imagem origem</A>

Observe que o texto ou imagem que servirá para o link aparecendo em destaque na página deverá vir entre o par de marcadores <A></A>.

Exemplo de link para outra página no mesmo site

Obs: Nos exemplos citados as URLS são apenas exemplos e não iram funcionar se clicado. É bom lembrar também que as URLS estão dentro de aspas (” “). Isso significa que o servidor vai considerar a diferença entre maiúscula e minúscula no momento da localização do arquivo. Se o arquivo outrapagina.html, por exemplo, estivesse gravado no servidor como OutraPagina.html, o documento não seria localizado e o usuário seria notificado com uma mensagem de erro.

<a href=“outrapagina.html“>Clique aqui</a>

Exemplo de link a partir de uma imagem

<a href=“outrapagina.html“><img src=“carro.jpg” border=“0″></a>
Repare que a foto fica com uma borda azul. Isso acontece porque quando se usa uma imagem como link esta recebe automaticamente uma borda na cor padrão dos links, neste caso azul. Para tirar a borda é só acrescentar o atributo border=“0″ no marcador <IMG>

Exemplo de link de download de arquivo

<a href=“arquivo.zip“>Clique para baixar</a>

Exemplo de link para e-mail

<a href=“mailto:seue-mail@seuprovedor.com.br“>Fale Conosco </a>

Exemplo de link para o mesmo diretório:

Nem sempre é necessário colocar uma URL completa em um link. É possível indicar apenas o nome do diretório e deixar que o navegador se encarregue de indicar qual a página principal ou index. Quando um link apontar para uma página armazenada no mesmo diretório, não é necessário colocar o endereço da máquina. Se o documento estiver no mesmo diretório, basta indicar o nome do arquivo. Diretório para quem não sabe são as pastas. Cada pasta é um diretório.
<a href=“local.html“> Localização</a>

Se o documento estiver em um subdiretório diferente de onde está o arquivo que
contém o link, é preciso indicá-lo.

Exemplo:

<a href=“clientes/local.html“> Localização</a>
Se o documento estiver em um diretório fora do atual. Vai ser preciso retroceder a indicação, para isso usa-se o ../ (dois ponto e barra).

Exemplo:

<a href=“../local.html“> Localização</a>

Pode se usar o ../ (dois ponto e barra) quantas vezes for necessário. Ficando assim:
“../../../arquivo”

BOOKMARKS

Existem situações onde os links podem levar a locais diferentes dentro da mesma página. Neste caso é conhecido como BOOKMARKS. Além de se especificar a referência ao arquivo destino dentro do marcador âncora, é preciso determinar os locais da página que servirão de destino para o link. Isto é feito da seguinte maneira:

- Cada local destino de um link dentro da página recebe um marcador âncora sendo que é atribuído um nome a este marcador;
- O link que irá levar até este marcador precisa referenciá-lo dentro do atributo HREF.

Exemplo:

Âncora dentro da página local.html:

<a id=“rodape“></a>

Observe que a âncora acima não aparece no browser. Ela fica invisível. Pode ser usado tanto o atributo ID e NAME para especificar o nome da âncora Link da página principal.html:

<a href=“local.html#rodape“>Clique para ver o rodapé da página local.html </a>

É possível criar um BOOKMARKS para ir até o topo da página. Só é necessário
referenciar o # (jogo da velha).

Exemplo:

<a href=“#“> »ir ao topo </a>

Deixe um comentário