Links - Índice   
   Links   

        O principal poder da linguagem HTML vem de sua capacidade de interligar parte de um texto e imagens a outros documentos. Os navegadores exibem em destaque estas áreas, colocando os textos de cores diferentes e sublinhados e as figuras com borda de cor diferente.
        Estes pontos chaves são denominados links ou hipertextos.

        A marcação <a> define o ponto de partida dos links e é denominada âncora. Para incluir uma âncora em seu documento deve-se proceder da seguinte forma:
1. Inicie a âncora com <a (há um espaço depois de a)
2. Digite o parâmetro href="nome_do_arquivo">
3. Insira o texto (para links clicados em uma texto) que vai funcionar como âncora para o documento seguinte ou insira o tag de colocação de imagens que você aprendeu no item anterior (para links clicados em uma imagem) na figura que você quer que funcione como âncora.
4. Digite </a> para finalizar o texto que serve de link e depois continue o seu texto normalmente.

Exemplo de link com texto:

<html>
<head>
<title>Título</title>
</head>
<body>
<h2>Exemplo de links com texto</h2>
Este exemplo mostra como usar links com texto.<br>
<a href="documento1.html">Clique aqui</a> para ir ao documento 1.
</body>
</html>

Olhe como fica:
- O texto "Clique aqui" serve como âncora para o arquivo "documento1.html", que é um outro arquivo dentro de sua página.


Exemplo de link com figura:

<html>
<head>
<title>Título</title>
</head>
<body>
<h2>Exemplo de links com figuras</h2>
Este exemplo mostra como elaborar links com figuras.<br>
Clique na imagem para entrar:<p>
<a href="documento1.html"><img src="imagem1.jpg"></a>
</body>
</html>

Olhe como fica:
- Ao clicar na figura dos corações (que é a imagem1.jpg), o visitante da página irá para o documento1.html, dentro de sua página.

Dica importante (borda azul):

Você pode perceber que se colocar uma figura como link, desta maneira mostrada no exemplo, ela irá ficar contornada com uma borda azul (que é a default, pode ser de qualquer cor, dependendo da cor que você atribui aos links - veremos cores mais tarde). Para excluir esta borda e deixar apenas a figura, você deve colocar dentro da tag de inserção de links o atributo border, utilizando o valor zero. No exemplo anterior, para que a figura de corações ficasse sem esta borda azul, a tag deveria ficar assim:

<a href="documento1.html"><img src="imagem1.jpg" border=0></a>

   Links para outros sites   

        Para inserir no seu site algum link para outro site qualquer deve-se seguir o mesmo critério do item anterior em links, bastando colocar, ao invés do nome do documento html, o endereço da página para qual você quer que o visitante vá clicando no texto ou na imagem.

Exemplo:

<a href="http://www.oocities.org/barroco_brasil/index.html">Clique aqui</a> para ir à uma página sobre o Barroco Brasileiro.

Ao clicar no texto "Clique aqui", o visitante irá para a página index.html do site referido.
Nunca se esqueça que qualquer destas tags devem estar sempre dentro da tag <body> que determina o início da página. Antes da tag <body> vem apenas o título.

Dica importante (abrir link em outro navegador):

        Quando alguém clicar em um link no seu site, automaticamente a sua página será fechada, dando lugar à referida no link. Se você quiser que o visitante, quando clicar no link, abra um outro navegador para abrir o outro site, deixando o seu site aberto também é só usar o atributo target="main" junto à tag a href. Quando você usá-lo, poderá fazer com que a pessoa não feche a sua página para ir a um outro site, podendo visitar a sua simultaneamente.

No exemplo anterior, se você quisesse que o visitante abrisse a página sobre o Barroco Brasileiro em outo navegador, só deveria colocar o atributo target, como explicado anteriormente, e ficaria assim:

<a href="http://www.oocities.org/barroco_brasil/index.html" target="main">Clique aqui</a> para ir à uma página sobre o Barroco Brasileiro.


   Links para e-mail   

        Para inserir no seu site um link para a sua caixa de e-mail, é só utilizar o parâmetro "mailto" juntamente com a tag href de inserção de links. Assim, quando o visitante clicar no link, automaticamente abrirá uma nova mensagem em seu programa de e-mail com o seu endereço eletrônico, pronto para enviar uma mensagem a você, dono do site. Você deve prosseguir da seguinte forma:

<a href="mailto:seu_email@seu_provedor.com.br">Clique aqui</a> para enviar um e-mail.

Clicando no texto "Clique aqui", o visitante poderá mandar um e-mail para você.
Nunca se esqueça que estas tags devem estar sempre dentro da tag <body> que determina o início da página. Antes desta tag vem apenas o título.

   Links para pontos de uma página   

        As vezes criamos uma página muito grande, com vários itens. E é viável colocar links no início da página, para os vários itens que seguem ao decorrer da mesma (olhe por exemplo esta página. Existem vários subtítulos e os respectivos links lá em cima da página). Assim estaremos fazendo ligações entre diferentes trechos de um documento. Este recurso é principalmente usado na geração de índices de conteúdo no início de uma página.
        O passo para se criar links deste tipo é:
     1. Defina o "ponto de partida", criando um link para um outro ponto da página, atribuindo a este ponto um nome qualquer (no exemplo ponto1), precedido do caracter #, da seguinte forma:

        Veja o início da <a href="#ponto1">segunda sessão</a>

        2. Defina o "ponto de chegada", atribuindo a ele o mesmo nome que colocou no ponto de partida, deste modo:

        Esta <a name="ponto1">segunda sessão trata de ...