HTML - tutorial

Tutoriais » HTML » Links »

Links

Atributos Links
Os links possibilitam a ligação de arquivos. Através de um clique o usuário visita outros sites, faz downloads, abre imagens, etc.
O tag utilizado é o <a></a>.

href = "url"
Indica para onde o link será apontado.

target = "_blank"
Abre uma nova janela do navegador.

Abaixo está um link para o site AltaVista. Quando este link for acionado, abrirá uma nova janela do navegador.

<a href= "http://www.altavista.com" target="_blank" >AltaVista</a>

Âncoras
A âncora marca um determinado local da página html e posteriormente cria-se um link para o mesmo.

<a name="nomeancora"></a>
O comando acima marca o local de uma âncora.

<a href="#nomeancora">Clique Aqui</a>
Em um determinado local, insira o link para âncora.

Notas:
1) Quando se usa os links para 'Avançar' na navegação de páginas o Browser vai colocando as páginas visitas em uma 'Lista' que é usada quando se usa o botão Retornar (Back).
Agora vamos supor que você faça uma página com um Link redundante.....
Por exemplo, imagine um site com um menu e 6 sub-páginas, todas no mesmo nível de menu. As páginas são longas e você quer deixar o seu site mais elegante e funcional. Por isso você coloca uma chamada ao menu ao fim de cada página. Na pilha de páginas visitadas do Browser pode acontecer de ficar uma lista nesta forma:
Menu
Página 1
Menu
Página 2
Menu
Página 3
Menu
Página 4
Menu
Página 5
Menu
Página 6
Um navegador experiente sabe que isso pode até ser limitando da navegação (se a máquina não tiver muitos recursos de memória para montar esta lista). Daí ele deseja usar botão voltar (back) do Browser para esvaziar a lista e daí vai ter que voltar de página à página. Para evitar isso podemos colocar um link que diretamente acesse a função do browser que faz o retorno da página.
A função dos Browsers que fazem isso é a função HistoryGo() e passando o parmetro -1 para esta função podemos fazer o 'salto para trás'.
O trecho do programa que poderia usar esta função seria assim:

<a href='javascript:history.go(-1)'><img src='NOMEDAIMAGEM' border=0></a>

2) Podemos querer montar e atualizar um menu com uma certa frequência. Um site é algo muito dinâmico, a inclusão de páginas pode ser algo um pouco trabalhoso em termos de programação, pois todos os links devem ser verificados. Além disso menus extensos podem complicar a leitura das páginas.
Que bom seria se pudessemos 'esconder' um menu e deixar ao usuário a escolha de abri-lo e escolher um item. Os sistemas de janelas permmitem justamente isso. Mas como usar isso em código HTML?
Veja um trecho do código desta mesma página que monta o menu do lado esquerdo:

<form>
<select size='1' onChange='location = options[selectedIndex].value'>
<option value='html.htm' selected>Escolha um Item</option>
<option value='index.php' >Introdução</option>
<option value='basico.htm'>Básico</option>
<option value='texto.htm'>Texto</option>
<option value='links.htm'>Links</option>
<option value='imagem.htm'>Img/Linha</option>
<option value='tabela.htm'>Tabela</option>
<option value='form.htm'>Formulário</option>
<option value='frame.htm'>Frame</option>
<option value='./html_refresh.htm'>Refresh</option>
</select>
</form>

Aqui vemos que a cada item do menu cascata existe uma página HTML associada.
Será que se colocarmos uma URL completa o comando funcionaria?
Tente, isso faz parte de um aprendizado!

Na última instrução vemos o uso de referência relativa, o uso do ./ diz que a navegação é em relação ao diretório ou pasta onde a página está posicionada.
Hum..... então podemos usar este menu para linkar páginas em diferentes pastas do mesmo provedor?
Tente, você já sabe o resto da frase!
:)