Como Criar Sites | Aprenda grátis como fazer seu site

O link (ligação) é uma parte vital para o funcionamento da internet, ele conecta uma página a outra, e podemos acessar uma página com apenas um clique. Nesse post vou explicar como fazer um link de uma página a outra, de uma página para ela mesma e explicar alguns atributos da tag <a>.

A tag <a> é a tag utilizada para criar um link em uma página, o nome da tag é a inicial de anchor (âncora), que é o termo utilizado na maioria da literatura. Para criar um link para esse site, utilizamos a tag <a> como a seguir:

<a href="http://www.comocriarsites.com" title="o melhor blog de como criar sites">Como Criar Sites</a>

E o resultado dessa linha é:

Como Criar Sites

Atributos de Link – Tag <a> (href – Hypertext Reference, title e target)

O atributo que diz para onde o link aponta (para onde o usuário vai quando o link é clicado), é o href. O valor do atributo href é o endereço do site ao qual o link aponta.Você pode ver isso no exemplo acima, onde esse blog é para onde o link aponta, logo o endereço dele é o valor do atributo href do link. Mais abaixo veremos que podemos ter outros valores no atributo href.

Você pode colocar o atributo title da tag <a> para fazer o efeito de aparecer o valor desse atributo quando o mouse ficar em cima do link, dando uma descrição do destino do link para o usuário. No exemplo acima também colocamos o atributo title, e o valor dele é a descrição do site. Se você parar o mouse em cima do link de exemplo acima, ele mostrará o valor do atributo title. O atributo title também serve para outro propósito, que é para as máquinas de buscas saberem do que se trata o destino do link, podendo dar algum tipo de tratamento para essa descrição, como palavras chaves para a máquina de busca indexar melhor o site destino do link.

O atributo target define um alvo para o link ser aberto. Um alvo pode ser uma janela (nova ou já aberta) ou um frame (nas versões mais recentes de sites, frames não são mais utilizados). Para abrir o link em uma nova janela, utilize como valor do atributo target, o _blank.

<a href="http://www.comocriarsites.com" target="_blank">Como Criar Sites</a>

O atributo target não é mais padrão, segundo as normal da W3C no padrão strict. No padrão transitional ainda é permitido o seu uso. Para saber um pouco mais sobre os padrões e como coloca-los no seu site, acesse O que é e para que serve o DOCTYPE ou DTD (Document Type Definition).

Link Estático e Dinâmico

O que chamamos de link estático é o link que tem no seu atributo href o endereço completo do site destino. Os exemplos acima tem essa característica, o endereço completo. Para ligar (linkar) páginas que estejam no mesmo domínio, podemos fazer referência dinâmica, e chamamos de link dinâmico. O link dinâmico conta como início o diretório que a página que possui o link está, e para referenciar outra página no mesmo diretório, podemos colocar somente o nome da outra página no atributo href.

<a href="pagina2.html">página no mesmo diretório</a>

No exemplo acima, estamos linkando (ligando) a página2.html da nossa página, que tem que estar no mesmo diretório.

Nós podemos chamar páginas que estão em diretórios distintos, acima ou abaixo. Para fazer um link dinâmico de uma página que está no diretório exemplo, a uma página que está no diretório exemplo/teste, fazemos:

<a href="teste/pagina2.html">página em um diretório abaixo</a>

Para fazer um link dinâmico de uma página que está no diretório exemplo/teste, a uma página que está no diretório exemplo, fazemos:

<a href="../pagina2.html">página em um diretório acima</a>

Nós podemos também fazer combinações de páginas acima e abaixo, como acessar uma página que está em um outro diretório no mesmo nível que o diretório atual:

<a href="../teste2/pagina2.html">página em outro diretório do mesmo nível</a>

Link com Texto e com Imagens

Nos exemplos acima nós vimos vários links, mas todos eles sempre estão com um texto para ser clicado, mas um link pode ser uma imagem também. Para um link ser imagem, nós temos que simplesmente colocar uma imagem dentro da tag <a>.

<a href="http://www.comocriarsites.com"><img src="img/imagem_teste.png" border="0"></a>

O exemplo acima mostra como colocar um link com imagem. Podemos notar que dentro da tag <img> colocamos o atributo border=”0″, isso é porque por padrão, quando uma imagem é colocada como link, ela exibe uma borda, e com esse atributo fica somente a imagem normal.

Link para a mesma Página

Um link pode ter o seu destino na mesma página que está sendo exibida no navegador, ou indicar um certo ponto em uma outra página. Para fazer isso temos que identificar o ponto ao qual queremos que o link aponte e coloque o identificador desse ponto no atributo href do nosso link. Vamos ao exemplo:

<h2 id="indice">Índice</h2>

<a href="#topico1">Tópico 1</a><br>
<a href="#topico2">Tópico 2</a><br>
<a href="#topico3">Tópico 3</a><br>
<a href="#topico4">Tópico 4</a><br>
<a href="#topico5">Tópico 5</a><br>
<br>
<h2 id="topico1">Tópico 1</h2>
...
<a href="#indice">Voltar ao Índice</a>
<br><br>
<h2 id="topico2">Tópico 2</h2>
...
<a href="#indice">Voltar ao Índice</a>
<br><br>
<h2 id="topico3">Tópico 3</h2>
...
<a href="#indice">Voltar ao Índice</a>
<br><br>
<h2 id="topico4">Tópico 4</h2>
...
<a href="#indice">Voltar ao Índice</a>
<br><br>
<h2 id="topico5">Tópico 5</h2>
...
<a href="#indice">Voltar ao Índice</a>

Para ver esse exemplo funcionando acesse Exemplo de Links Internos como Índice.

Nesse exemplo criamos um índice para a nossa página, e quando o usuário clicar nos itens do índice, ele vai ser levado direto para os tópicos correspondentes. Não tem muitos segredos aqui, somente que cada tópico vai ter um identificador único, que pode ser qualquer nome, ou o nome do tópico para melhor representar, e o atributo href dos links tem os identificadores com um jogo da velha na frente, como valor.

Pode notar no exemplo também que após cada tópico tem outro link para retornar ao índice, para melhorar a navegação do usuário.

No nosso exemplo funcionando, também há links para outra página, com identificador de onde quer que seja mostrado essa outra página. Isso também é simples, basta colocar no atributo href o endereço da página a ser acessada, seguido de jogo da velha e o identificador da parte onde se quer mostrar.

<a href="outra_pagina.html#topico1">Tópico 1 na outra página</a>

Link para Arquivo

Um link também pode ser apontado para um arquivo, na verdade ele é sempre apontado para um arquivo, só que quando esse arquivo é uma página da web, nós dizemos que o link aponta para um página, mas podemos facilmente fazer um link para um arquivo, só precisamos colocar no atributo href da tag <a> o endereço do arquivo.

<a href="http://www.comocriarsites.com/arquivos/backup.zip">Download Arquivo</a>

No exemplo acima estamos fazendo um link para um arquivo .zip (zipado). Ao clicar no link o usuário vai ter a opção de abrir o arquivo ou salvar o arquivo.

Link para Email

Um outro tipo de link é o link para email, esse não é um modo elegante de fazer o usuário enviar email para o dono do site ou o administrador, mas na falta de algum script para envio de email por formulário esse resolve.

Para fazer um link para email, nós colocamos a palavra mailto, seguido de dois pontos (:), seguido do email ao qual vai ser enviado a mensagem, caso o usuário clique.

<a href="mailto:gerente@comocriarsites.com">Envie um email para mim</a>

No exemplo acima, ao clicar no link, vai abrir o gerenciador de email padrão do usuário (Thunder Bird, Outlook, …) já com o email para ser enviado, só precisando o usuário digitar a mensagem.