Lins e Âncoras
Autor: Blogger Utilidades | Publicado: 2012-03-04T16:42:00-03:00

Links são os elementos diagramáticos que diferenciam um documento Web de um impresso.URL (Uniform Resource Locator ou Localizador Uniforme de Recursos), é um protocolo de comunicação associado a um endereço virtual que identifica um documento em um computador qualquer.A URL pode ser relativa ou absoluta.URL RELATIVA&nbsp;= Pode ser usada para fazer referência a um arquivo que esteja no mesmo servidor do documento atual.URL ABSOLUTA = É usada para fazer referência a um arquivo que esteja em algum outro servidor.Formato geral de um endereço HTML:
protocolo://dominio/arquivo
Protocolo = É utilizado na Internet para acessar um recurso computacional ligado na rede.Domínio = É o endereço Internet da página a ser acessada.Arquivo = É o nome do documento ou arquivo que se esteja tentando acessar.
Protocolos Internet Mais Comuns

  http://  acesso às páginas Web 
  ftp://  acesso a arquivos contendo programas 
  gopher://  servidores de arquivos e informações 
  telnet://  conexão a hosts remotos 
  wais://  acesso a servidores WAIS 
  news:  acesso a grupos de notícias 
  mailto:  acesso a caixas postais eletrônicas 

Para estabelecer ligações internas em uma página, você precisa criar uma âncora no início de cada tópico que será referenciado por uma ligação (link). Esta âncora é um ponto de referência ou endereço que será acessado por um link. Uma âncora é usada dentro de um documento para marcar o início de uma seção do documento. Essa âncora recebe um nome que será mencionado pelo link que a acessará.
O elemento A

A tag &lt;a&gt; possui mais de uma função, ela pode ser usada tanto para sinalizar um link para algum documento, quanto para definir uma posição que será o destino de algum outro link (âncora).

Atributos para A

HREF = Permite fazer uma referência a algum outro documento, que deve receber &nbsp;o valor da URL do documento que se deseja referenciar.
NAME = Em um documento muito grande, dividido em seções distintas, este atributo permite que se especifique exatamente a parte do documento a que o link levará o usuário.
TARGET = Especifica o carregamento de um link em uma janela de destino. Esse atributo pode assumir como parâmetros: _top que carrega o link na mesma janela e _blank que carrega o link em uma outra janela.
MAILTO = Abre o programa de correio eletrônico com o destinatário da mensagem já definido pela tag.

Modificando a Cor dos Links

As cores dos links podem ser mudadas utilizando-se os seguintes atributos dentro da tag &lt;body&gt;:

  link="rrggbb"  define a cor a ser utilizada em textos que  representam hiperlinks para outros documentos ou seções do mesmo texto 
  vlink="rrggbb"  define a cor de links visitados 
  alink="rrggbb"  define a cor do link enquanto o mouse está  pressionado sobre ele 

Exercícios

1) link1.html&lt;html&gt;&lt;head&gt;&lt;title&gt;Links&lt;/title&gt;&lt;/head&gt;&lt;body bgcolor="white" text="#000000"&gt;Esta página se chama "Link 1".&lt;br&gt;Esta página utiliza o parâmetro "_top".&lt;br&gt;Para ir à página "Link 2", clique na URL abaixo:&lt;br&gt;&lt;br&gt;&lt;a href="link2.html" target="_top"&gt;Clicando aqui, vou para a página "Link 2"&lt;/a&gt;&lt;/body&gt;&lt;/html&gt;
2) link2.html&lt;html&gt;&lt;head&gt;&lt;title&gt;Link 2&lt;/title&gt;&lt;/head&gt;&lt;body bgcolor="white" text="#000000" link="pink" vlink="green" alink="red"&gt;Esta é a página "Link 2".&lt;br&gt;Esta página utiliza o parâmetro "_blank".&lt;br&gt;Para ir à página "Link 3", clique na URL abaixo:&lt;br&gt;&lt;br&gt;&lt;a href="link3.html" target="_blank"_&gt;Clicando aqui, vou para a página "Link 3"&lt;/a&gt;&lt;/body&gt;&lt;/html&gt;
3) link3.html&lt;html&gt;&lt;head&gt;&lt;title&gt;Link 3&lt;/title&gt;&lt;/head&gt;&lt;body bgcolor="white" text="#000000" link="green" vlink="blue"alink="magenta"&gt;Esta é a última página.&lt;br&gt;Esta página se chama "Link 3".&lt;br&gt;Com o atributo "mailto", você pode colocar uma opção na sua página para que as pessoas enviem um e-mail à você.&lt;br&gt;&lt;br&gt;&lt;a href="mailto:e_mail@dominio.com.br"&gt;Clique aqui para enviar um e-mail&lt;/a&gt;&lt;br&gt;&lt;br&gt;&lt;a href="link1.html" target="alvo"&gt;Para voltar a página "Link 1" com o parâmetro "_blank", clique aqui.&lt;/a&gt;&lt;br&gt;&lt;br&gt;&lt;/body&gt;&lt;/html&gt;
4) link4.html&lt;html&gt;&lt;head&gt;&lt;title&gt;Name&lt;/title&gt;&lt;/head&gt;&lt;body bgcolor="white" text="#000000" link="red" vlink="gray" alink="yellow"&gt;&lt;a name="topo"&gt;&lt;/a&gt;Esta é uma página muito grande e por isso está dividida em capítulos. Este é o "topo" da página.&lt;br&gt;&lt;br&gt;&lt;a href="#cap1"&gt;Clique aqui para ir ao Capítulo 1&lt;/a&gt;&lt;br&gt;&lt;a href="#cap2"&gt;Clique aqui para ir ao Capítulo 2&lt;/a&gt;&lt;br&gt;&lt;a href="#cap3"&gt;Clique aqui para ir ao Capítulo 3&lt;/a&gt;&lt;br&gt;&lt;a href="#cap4"&gt;Clique aqui para ir ao Capítulo 4&lt;/a&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;a name="cap1"&gt;Este é o Capítulo 1&lt;/a&gt;&lt;br&gt;&lt;a href="#topo"&gt;Clicando aqui você tem a opção de voltar ao topo da página&lt;/a&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;a name="cap2"&gt;Este é o Capítulo 2&lt;/a&gt;&lt;br&gt;&lt;a href="#topo"&gt;Clicando aqui você tem a opção de voltar ao topo da página&lt;/a&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;a name="cap3"&gt;Este é o Capítulo 3&lt;/a&gt;&lt;br&gt;&lt;a href="#topo"&gt;Clicando aqui você tem a opção de voltar ao topo da página&lt;/a&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;a name="cap4"&gt;Este é o Capítulo 4&lt;/a&gt;&lt;br&gt;&lt;a href="#topo"&gt;Clicando aqui você tem a opção de voltar ao topo da página&lt;/a&gt;&lt;/body&gt;&lt;/html&gt;