Links
Autor: Renato Sena | Publicado: 2011-03-09T17:54:00-08:00

Nesta lição você aprenderá como construir links entre páginas.   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.   Exemplo 1:&lt;a href="http://www.rdtutoriais.blogspot.com/"&gt;Aqui um link para RD Tutoriais;/a&gt;Será renderizado no navegador assim:Aqui um link para RD TutoriaisO elemento a refere-se a "anchor" - âncora . O atribuito href é abreviação para "hypertext reference" - referência a hypertexto - e especifica o destino do link - que normalmente é um endereço na Internet ou um arquivo.No exemplo acima o atributo href tem o valor "http://www.rdtutoriais.blogspot.com", que é o endereço completo do site RD tutoriais 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 &lt;/a&gt;.Como são os links entre minhas próprias páginas?   Se você quer construir links entre páginas de um mesmo website você  não precisa escrever o endereço completo de cada página (URL). Por  exemplo, se você tem duas páginas  (vamos chamá-las de pagina1.htm e  pagina2.htm) e salvou as duas em um mesmo diretório você constrói um  link de uma para a outra usando somente o nome do arquivo no link.  Nestas condições, um link da página1.htm para a pagina2.htm é como  mostrado abaixo:    Exemplo 2:&lt;a href="page2.htm"&gt;Aqui um link para a pagina 2&lt;/a&gt;Se a pagina2 for colocada em um subdiretório (chamado de "subdiretorio"), o link é como mostrado abaixo:Aqui um link para a pagina 2Exemplo 3:&lt;a href=&quot;subdiretorio/pagina2.htm&quot;&gt;Aqui um link para a pagina 2&lt;/a&gt;Por outro lado, um link da pagina2 no "subdiretorio" para a pagina1 é como mostrado a seguir:Exemplo 4:&lt;a href="../pagina1.htm"&gt;Aqui um link para a pagina 1&lt;/a&gt;"../" aponta para o diretório a um nível acima do arquivo onde foi feito o link. Seguindo o mesmo princípio você pode apontar para dois (ou mais) níveis acima, escrevendo "../../".Você entendeu? Como alternativa você pode usar sempre o endereço completo do arquivo (URL).Como são os links dentro de uma mesma página?Você pode criar links internos, dentro da própria página - por exemplo, uma tabela de conteúdos ou índice com links para cada um dos capítulos em uma página. Tudo o que você precisa é usar o atributo id e o símbolo "#".Use o atributo id para marcar o elemento que é o destino do link. Por exemplo:&lt;h1 id="heading1"&gt;Cabeçalho 1&lt;/h1&gt;Você agora pode criar um link que leve àquele elemento usando o símbolo "#" no atributo do link. O símbolo "#" informa ao navegador para ficar na mesma página que está. O símbolo "#" deve ser seguido pelo valor atribuido a id para onde o link vai. Por exemplo:&lt;a href="#heading1"&gt;Link para o cabeçalho 1&lt;/a&gt;Tudo fica claro com um exemplo:Exemplo 5:&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;&lt;a href="#heading1"&gt;Link para cabeçalho 1&lt;/a&gt;&lt;/p&gt;&lt;p&gt;&lt;a href="#heading2"&gt;Link para cabeçalho 2&lt;/a&gt;&lt;/p&gt;&lt;h1 id="heading1"&gt;Cabeçalho 1&lt;/h1&gt;&lt;p&gt;Texto texto texto texto&lt;/p&gt;&lt;h1 id="heading2"&gt;Cabeçalho 2&lt;/h1&gt;&lt;p&gt;Texto texto texto texto&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;Será renderizado no navegador assim:Link para cabeçalho 1Link para cabeçalho 2Cabeçalho 1Texto texto texto textoCabeçalho 2Texto texto texto texto(Nota: O nome de um atributo id deve começar com uma letra)   Posso criar link para mais alguma coisa?   Você pode criar link para um endereço de  e-mail. Isto é feito de modo semelhante aos links para documentos.   Exemplo 6:&lt;a href="rdtutoriais@hotmail.com"&gt;Enviar e-mail para RD Tutoriais&lt;/a&gt;Será renderizado no navegador assim:Enviar e-mail para RD TutoriaisA única diferença é que no lugar do endereço do documento você escreve mailto:  seguido pelo endereço de e-mail. Quando o link é clicado o programa de  e-mail padrão do usuário é aberto com o endereço do link já digitado na  linha para destinatário. Mas, atenção, isto só irá funcionar se o  usuário tiver um programa de e-mail instalado na sua máquina. Faça uma  experiência com este tipo de link clicando no exemplo acima.   Existem outros atributos que eu deva conhecer?   Par criar links você  sempre usa o atributo href. Adicionalmente você pode usar um title (título)  para seu link:   Exemplo 7:&lt;a href="http://www.rdtutoriais.blogspot.com" title="Visite RD Tutoriais e aprenda HTML"&gt;RD Tutoriais&lt;/a&gt;Será renderizado no navegador assim:RD TutoriaisO atributo title é usado para fornecer uma breve descrição do link. Se você - sem clicar no link - colocar o cursor do mouse sobre o link, vai aparecer o texto "Visite o site RD Tutoriais.blogspot.com e aprenda HTML".