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 epequenina tag com um elemento e um atributo suficiente para voc construir links para ondequiser. A seguir um exemplo de link para o site HTML.net:

Exemplo 1:

Aqui um link para HTML.net

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 .

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:

Aqui um link para a pagina 2

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

Exemplo 3:

Lio 8: Links - HTML.net http://pt-br.html.net/tutorials/html/lesson8.php

1 de 4 04/02/2014 16:36

Aqui um link para a pagina 2

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

Exemplo 4:

Aqui um link para a pagina 1

"../" 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:

Cabealho 1

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:

Link para o cabealho 1

Tudo fica claro com um exemplo:

Exemplo 5:

Link para cabealho 1

Link para cabealho 2

Lio 8: Links - HTML.net http://pt-br.html.net/tutorials/html/lesson8.php

2 de 4 04/02/2014 16:36

Cabealho 1

Texto texto texto texto

Cabealho 2

Texto texto texto texto

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:

Enviar e-mail para nobody em HTML.net

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.

Lio 8: Links - HTML.net http://pt-br.html.net/tutorials/html/lesson8.php

3 de 4 04/02/2014 16:36

>

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:

HTML.net

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 8: Links - HTML.net http://pt-br.html.net/tutorials/html/lesson8.php

4 de 4 04/02/2014 16:36