As âncoras servem para passar rapidamente de um sitio para o outro, ligar a outros locais. Tanto podem ser internas como externas. São também chamadas de hiperlinks, hiperligações ou links.

Aqui temos um link normal que está direcionado para uma página HTML chamada link. Iria dar erro, porque não iria encontrar tal página, pois não existe.

1. <a href="links.html">Exemplo</a>

Mas temos de ter a noção de caminhos relativos e caminhos absolutos.

Caminhos Relativos

Quando construímos um site, criamos uma pasta onde colocamos todos os ficheiros do mesmo. Poderemos criar uma pasta para imagens mas na pasta principal colocamos os ficheiros HTML.

Neste caso, o caminho relativo, se estivermos no index.html e colocarmos um link para links.html não necessitará mais nada no caminho do que o que já está no exemplo anterior.

Se quisermos linkar a uma imagem, esta estará na pasta imagens colocamos:

1. <a href="imagens/imagem01.jpg">Link para a imagem 01</a>

No caso de estarmos dentro de alguma pasta, por exemplo, se tivermos um ficheiro HTML dentro da pasta imagens (não será boa ideia por questões de organização), e queremos linkar alguma coisa na pasta principal:

1. <a href="../index.html">Link para a página principal</a>

E se estivermos dentro de mais pastas, para sair é sempre com ../, se necessitarmos de sair de mais do que uma pasta adicionarmos mais um ../ ficará: ../../index.html, ou sair e entrar noutra pasta: ../pasta01/outro_ficheiro.html.

Caminhos Absolutos

Caminhos absolutos, são os caminhos que dizemos o caminho todo desde o início, mas isto poderá causar erros ou criar confusão. Quando estamos no nosso computador e temos uma pasta no Desktop, o caminho que vemos até lá poderá ser algo do género: C:\Documents and Settings\Toshiba Portegé M200\Desktop e isto quando não colocamos dentro de pastas e mais pastas, ficará um caminho enorme. No entanto nem é este que vamos utilizar.

Temos de ter em conta que o site para as outras pessoas verem estará online. Para isso necessitamos de um servidor de alojamento, tanto existem grátis como a pagantes e com muito mais espaço e outras propriedades Isso ficará para outro artigo. Os caminhos absolutos podem variar, tanto podem ser, por exemplo num servidor grátis (sendo cliente): http://clientes.netvisao.pt/nome_do_cliente/imagens/imagem01.jpg como pode ser, num alojamento próprio: http://margarida.net/public_html/imagens/imagem01.jpg. Estes caminhos são utilizados, quando não nos encontramos dentro destes servidores, não são uteis para links dentro das nossas páginas, para os menus e imagens.

Também quando queremos linkar a uma página externa, tendo ela ou não o www, temos de colocar http:// ou isto assumirá que está dentro do nosso servidor e virá colado o nosso link, pelo que não funcionará o que queremos. Exemplo: um link para o google.pt.

1. <a href="http://google.pt">Google.pt</a>

Ou

1. <a href="http://www.google.pt">Google.pt</a>

Mas não poderá ser:

1. <a href="www.google.pt">Google.pt</a>

Senão ficará, no meu caso: http://margarida.net/www.google.pt , o que não é a mesma coisa de http://www.google.pt nem existe.

Dentro destas tags, podemos incluir o target, este poderá ser:

• _blank
• _self
• _parent
• _top

Portanto poderá ficar target="_blank" se quisermos que o link abra numa página nova.

1. <a href="www.google.pt" target="_blank">Google.pt</a>

target="_self" para o link abrir na mesma página.

1. <a href="www.google.pt" target="_self">Google.pt</a>

target="_parent" é util na utilização de frames, quando utilizado um frameset dentro de outro, se não existir nenhum frameset "parent" que será o de fora, ele actuará como o target="_top"

1. <a href="www.google.pt" target="_parent">Google.pt</a>

target="_top" para o link abrir na mesma página por cima do que possa existir. Util para links que se encontram dentro de frames ou iframes, no caso do target="_self" ele iria abrir dentro dessas frames ou iframes, com o target="_top" abre na mesma página, na sua totalidade.

1. <a href="www.google.pt" target="_top">Google.pt</a>

Na utilização de frames ou iframes, para linkar de uma frame para outra, o target desse link terá o nome da frame para onde queremos abrir o link.

1. <a href="links.html" target="nome_da_frame">Links</a>

A frame terá de ter o name="conteudo".

1. <frameset cols="20%,*">
2. <frame src="menu.html" name="menu">
3. <frame src="conteudo.html" name="conteudo">
4. </frameset>

Deverá ser utilizado também um titulo ao link para sabermos do que se trata e títulos que identifiquem mesmo o que é, nem que seja apenas o titulo da página em si, o que fica excluído aqueles "Clique aqui". Isto tanto no título como no nome que vai aparecer no link.

1. <a href="links.html" target="nome_da_frame" title="Links">Links</a>

Aqui fica também um exemplo de um link para um e-mail. Vai abrir de forma diferente dependendo do que o utilizador tem definido como e-mail de predefinição: por exemplo, Outlook ou Gmail.

1. <a href="mailto:nome@dominio.com">E-mail</a>

Neste caso também não é muito util utilizar "Clique aqui", convem voltar a dizer qual é o e-mail que o utilizador pode clicar, pois nem todos utilizam esses programas para ler e enviar e-mails e terão necessidade de o copiar e colar noutro sitio.

Âncoras internas

Podemos ter um link para outra página na mesma página definindo o name da âncora no sitio onde queremos ir:

1. <a name="ancora01">Âncora 01</a>

E o código que conterá o link para esse texto com a âncora, terá que conter um cardinal como no exemplo:

1. <a href="#ancora01">Âncora 01</a>

Este post foi escrito em Sunday, February 18th, 2007 às 2:13 am e encontra-se na categoria HTML-XHTML. Podes seguir qualquer comentário a esta entrada a partir dos RSS 2.0 feed. Podes deixar um comentário, ou trackback do teu próprio site.