You are on page 1of 4

Lio 8: Links - HTML.

net

http://pt-br.html.net/tutorials/html/lesson8.php

Lio 8: Links
Nesta lio voc aprender como construir links entre pginas.

O que eu preciso para construir um link?


Para construir um link voc usa o que tem usado at agora para codificar HTML: uma tag. Uma simples e
pequenina tag com um elemento e um atributo suficiente para voc construir links para onde
quiser. A seguir um exemplo de link para o site HTML.net:

Exemplo 1:

<a href="http://www.html.net/">Aqui um link para HTML.net</a>

Ser renderizado no navegador assim:


Aqui um link para HTML.net
O elemento a refere-se a "anchor" - ncora . O atribuito href abreviao para "hypertext reference" referncia a hypertexto - e especifica o destino do link - que normalmente um endereo na Internet ou um
arquivo.
No exemplo acima o atributo href tem o valor "http://www.html.net", que o endereo completo do site
HTML.net e chamado de URL (Uniform Resource Locator). Notar que "http://" deve sempre ser incluido
nas URLs. A frase "Aqui um link para HTML.net" o texto mostrado no navegador como link. Lembre-se de
fechar a tag com um </a>.

Como so os links entre minhas prprias pginas?


Se voc quer construir links entre pginas de um mesmo website voc no precisa escrever o endereo
completo de cada pgina (URL). Por exemplo, se voc tem duas pginas (vamos cham-las de pagina1.htm
e pagina2.htm) e salvou as duas em um mesmo diretrio voc constri um link de uma para a outra usando
somente o nome do arquivo no link. Nestas condies, um link da pgina1.htm para a pagina2.htm como
mostrado abaixo:

Exemplo 2:

<a href="page2.htm">Aqui um link para a pagina 2</a>

Se a pagina2 for colocada em um subdiretrio (chamado de "subdiretorio"), o link como mostrado abaixo:

Exemplo 3:

1 de 4

04/02/2014 16:36

Lio 8: Links - HTML.net

2 de 4

http://pt-br.html.net/tutorials/html/lesson8.php

<a href="subdiretorio/pagina2.htm">Aqui um link para a pagina 2</a>

Por outro lado, um link da pagina2 no "subdiretorio" para a pagina1 como mostrado a seguir:

Exemplo 4:

<a href="../pagina1.htm">Aqui um link para a pagina 1</a>

"../" aponta para o diretrio a um nvel acima do arquivo onde foi feito o link. Seguindo o mesmo princpio
voc pode apontar para dois (ou mais) nveis acima, escrevendo "../../".
Voc entendeu? Como alternativa voc pode usar sempre o endereo completo do arquivo (URL).

Como so os links dentro de uma mesma pgina?


Voc pode criar links internos, dentro da prpria pgina - por exemplo, uma tabela de contedos ou ndice
com links para cada um dos captulos em uma pgina. Tudo o que voc precisa usar o atributo id e o
smbolo "#".
Use o atributo id para marcar o elemento que o destino do link. Por exemplo:

<h1 id="heading1">Cabealho 1</h1>

Voc agora pode criar um link que leve quele elemento usando o smbolo "#" no atributo do link. O smbolo
"#" informa ao navegador para ficar na mesma pgina que est. O smbolo "#" deve ser seguido pelo valor
atribuido a id para onde o link vai. Por exemplo:

<a href="#heading1">Link para o cabealho 1</a>

Tudo fica claro com um exemplo:

Exemplo 5:

<html>
<head>
</head>
<body>
<p><a href="#heading1">Link para cabealho 1</a></p>
<p><a href="#heading2">Link para cabealho 2</a></p>

04/02/2014 16:36

Lio 8: Links - HTML.net

3 de 4

http://pt-br.html.net/tutorials/html/lesson8.php

<h1 id="heading1">Cabealho 1</h1>


<p>Texto texto texto texto</p>
<h1 id="heading2">Cabealho 2</h1>
<p>Texto texto texto texto</p>
</body>
</html>

Ser renderizado no navegador assim (clique nos dois links):

Link para cabealho 1


Link para cabealho 2

Cabealho 1
Texto texto texto texto

Cabealho 2
Texto texto texto texto

(Nota: O nome de um atributo id deve comear com uma letra)

Posso criar link para mais alguma coisa?


Voc pode criar link para um endereo de e-mail. Isto feito de modo semelhante aos links para
documentos.

Exemplo 6:

<a href="mailto:nobody@html.net">Enviar e-mail para nobody em HTML.net</a>

Ser renderizado no navegador assim:

Enviar e-mail para nobody em HTML.net

A nica diferena que no lugar do endereo do documento voc escreve mailto: seguido pelo endereo
de e-mail. Quando o link clicado o programa de e-mail padro do usurio aberto com o endereo do link
j digitado na linha para destinatrio. Mas, ateno, isto s ir funcionar se o usurio tiver um programa de
e-mail instalado na sua mquina. Faa uma experincia com este tipo de link clicando no exemplo acima.

04/02/2014 16:36

Lio 8: Links - HTML.net

4 de 4

http://pt-br.html.net/tutorials/html/lesson8.php

Existem outros atributos que eu deva conhecer?


Par criar links voc sempre usa o atributo href. Adicionalmente voc pode usar um title (ttulo) para seu
link:

Exemplo 7:

<a href="http://www.html.net/" title="Visite HTML.net e aprenda HTML">HTML.net</a>

Ser renderizado no navegador assim:

HTML.net

O atributo title usado para fornecer uma breve descrio do link. Se voc - sem clicar no link - colocar o
cursor do mouse sobre o link, vai aparecer o texto "Visite o site HTML.net e aprenda HTML".

<< Lio 7: Atributos

Lio 9: Imagens >>

04/02/2014 16:36

You might also like