HOME PAGE JAVASCRIPT
Botões Cálculos Datas Essenciais Janelas Flutuantes Menus
HTML CSS FLASH PHP ASP GERADORES CORES MISCELANEA Contato  






Hiperlinks

Um hyperlink é uma conexão de uma página para outro destino (endereço), geralmente outra página da Web, mas pode ser também uma figura, um endereço de correio eletrônico, um arquivo ou um programa.
Em um navegador da Web, as marcas de hipertexto são exibidas como hiperlink - palavras ou áreas interativas especialmente formatadas na tela, nas quais o visitante do site pode clicar para saltar para outra página, exibir uma figura, visitar outro site ou iniciar um download. Esse método de passar de página para página tornou-se conhecido como "surfar na Web".

Para criar um hiperlink usamos o comando formado pelo par de TAGS <a> </a> com a seguinte sintaxe:
<a href="destino">texto ou figura ou elemento</a>


Hyperlink de texto é uma palavra ou frase, que foi atribuída a um URL de destino. Neste caso o visitante do site pode clicar em qualquer lugar da palavra ou frase para exibir seu destino.
exemplo: <a href="http://www.kithomepage.com/kit/tutorial/html/texto.php">Texto</a>
resultado:  Texto


Hyperlink de figura é uma figura que foi atribuída a um URL de destino. Neste caso, o visitante do site pode clicar em qualquer parte da figura para exibir seu destino. A parte destacada em verde é responsável pela exibição da figura e a parte em magenta é o destino ao se clicar na figura apresentada.
exemplo: <a href="destino"><img  src="URL de origem da figura"></a>

Resultado:


Hyperlink de elemento - também é possível envolver qualquer elemento entre as tags <a href="destino"></a> para criar um hiperlink estilizado.
<a href="destino">elemento</a>


Quando se cria um hiperlink (http://servidor/caminho/nomedoarquivo) o destino é codificado como um localizador de recursos uniforme (URL).
Um URL contém o local, o caminho e o nome de arquivo em um servidor Web ou rede. O URL também identifica o protocolo que vai processar o arquivo, como HTTP,FTP etc.. como mostrado a seguir:


A primeira parte de um URL é o protocolo, que informa a um navegador qual serviço da Internet deverá ser usado para transferir o documento. Um protocolo é separado do restante do URL por dois pontos.
Exemplos de protocolos mais utilizados:
a) ftp - os servidores FTP são depósitos de arquivos, tais como, documentos, sons, figuras, programas de computador etc..
b) mailto - indica transporte de correio eletrônico.
c) http - obtém informações dos servidores da Web. Este é talvez o protocolo mais comum que você irá encontrar ao surfar na Web.
d) https - cria uma conexão com um servidor da Web seguro, e depois criptografa todas as solicitações de páginas e informações.

A segunda parte, que aparece à direita do protocolo, identifica o servidor no qual o documento se encontra armazenado. Observe que você tem de separar o protocolo do servidor Web com duas barras.

A terceira parte define a localização exata do documento, isto é, identifica as pastas ou subdiretórios que contém a página ou arquivo. Se uma página ou arquivo estiver armazenado na pasta raiz de um servidor, seu URL não possuirá um caminho.

A quarta parte de um URL é o nome do arquivo. Se não incluir o nome do arquivo específico, o  navegador procura por uma página padrão (default.htm ou index.htm).

Após o nome do arquivo, um URL HTTP pode ter um indicador, conhecido também como âncora, que direciona o usuário para a uma parte específica da página. Os indicadores são precedidos pelo sinal numérico # (ou jogo da velha), exemplo: http://www.kithomepage.com/kit/tutorial/html/plano_de_fundo.php#legibilidade.
Outro parâmetro que se pode utilizar após o nome do arquivo é o ponto de interrogação ? que indica informações sobre consultas que deverão ser repassadas a um servidor da Web.


Caminho Absoluto e caminho relativo
Um URL absoluto contém um endereço completo, com o protocolo, o servidor Web, o caminho e o nome do arquivo.

Um URL relativo tem uma ou mais partes ausentes. As informações ausentes são obtidas da página que contém o URL.
Por exemplo: se você quiser colocar um link para uma outra página dentro do mesmo diretório, você não precisa colocar todo o endereço como http://www.kithomepage.com/kit/tutorial/html/letreiro_digital.php ,  basta apenas colocar o nome do arquivo letreiro_digital.php
Exemplo:
<a href="letreiro_digital.php">Letreiros digitais</a>

É comum as páginas de uma Web usarem URLs relativos contendo apenas um caminho parcial e um nome do arquivo.

Exemplos:

para andar um diretório a frente:
<a href="diretorio1/nomedoarquivo.htm">elemento</a>


para andar dois diretórios a frente:
<a href="diretorio1/diretorio2/nomedoarquivo.htm">elemento</a>

Se o arquivo se encontrar em um ou mais diretórios anteriores, usa-se o parâmetro "../" tantas vezes quantos forem os diretórios. Exemplos

um diretório anterior:
<a href="../nomedoarquivo.htm">elemento</a>


dois diretórios anteriores:
<a href="../../nomedelfile.htm">elemento</a>




Quadro de destino
- Como fazer um link abrir em outra janela?
É possível que você queira colocar um link em sua página que abra em uma outra janela para que o visitante não saia do seu site, por exemplo, colocar um link para uma página fora do site. Basta incluir um atributo "target" (alvo), assim:
<a href="http://www.musicasitalianas.com" target="_blank" >Musicas Italianas</a>

Os atributos possíveis são:
_blank - Cria uma nova janela de navegador e carrega o URL dentro dela.
_self - carrega o URL no mesmo quadro ou janela atual .
_top - define o quadro de destino como sendo a janela inteira do navegador removendo todos os framesets.
_parent - remove o frameset atual e carrega o URL em seu lugar.
A ausência deste parâmetro define o quadro de destino do hyperlink para a quadro de destino padrão da página atual. Esta é uma configuração recomendada.


Um hiperlink também pode abrir programa de e-mail e tem a seguinte sintaxe:

<a href="mailto:seuemail@seuprovedor.com.br">texto figura ou elemento</a>

Neste caso quando o visitante clicar no link apresentado (texto figura ou elemento), será aberto a tela de nova mensagem do sistema de e-mail padrão do usuário, possibilitando criar uma mensagem de correio eletrônico endereçada ao seu através de correio eletrônico.
Obs: Nem todos os navegadores da Web oferecem suporte a hyperlinks para endereços de correio eletrônico.  


Indicadores na página
Um indicador é um local ou texto selecionado em uma página. Usa-se indicador como destino para um hyperlink. Por exemplo, para exibir um determinado tópico de uma página, adicione um hyperlink com o indicador como seu destino. Quando o visitante do site clica no hyperlink, a parte relacionada da página é exibida.
Envolva o elemento que servirá de hiperlink com o seguinte código destacado na cor vermelha:

<a href="#nomequalquer">Elemento</a>
Obs:  no hiperlink o nome deve ser precedido pelo sinal numérico # (ou jogo da velha)

e coloque o indicador  <a name="nomequalquer"></a>  na parte que se deseja exibir.

Exemplo prático: O que é hyperlink
No exemplo acima o texto "O que é hyperlink" foi envolvido com o código que servirá de hiperlink:
<a href="#topo">"O que é hyperlink"</a>

e o indicador foi colocado ao lado do titulo HIPERLINKS ao alto desta página conforme mostrada abaixo

<a name="topo"></a><b>HIPERLINKS</b></h3>

Repare que o nome do indicador "topo" é igual ao do destino em href="#topo". Você pode usar qualquer palavra, porém devem ser iguais e no hiperlink o nome deve ser precedido pelo sinal numérico #.


Na caixa de Teste on-line abaixo você poderá configurar e testar um hiperlink com os vários parâmetros acima. Para hiperlinks de imagens utilize um endereço de qualquer imagem da Internet (URL completo) ou utilize o endereço a seguir:  /kit/tutorial/html/images/brasil2.gif

Teste on-line: