<1> <2> <3> <4> <5> <6> <7> <8> <9> <10> <11> <12> <13> <14> <15> <16>

<8a> <8b> <8c> <8d> <8e>

Li��o 8d - Links para se��es de uma p�gina

 

Voc� aprendeu at� o momento como fazer links para outros documentos, sejam eles criados por voc� ou encontrados em outros s�tios Internet. E agora, se voc� quiser conectar em uma se��o particular de um documento?

Objetivos

  Criar um marcador de refer�ncia invis�vel para uma se��o particular em um arquivo HTML
  Criar um link hipertexto que ir� conectar em uma se��o particular do arquivo HTML
  Criar um link hipertexto que ir� conectar em uma se��o particular de um outro arquivo HTML
  Criar um �ndice hipertexto para uma p�gina HTML.

 

Li��o

Uma �ncora Nomeada

Uma �ncora nomeada � um marcador de refer�ncia invis�vel para uma se��o particular em um documento HTML. Ela pode ser usada para fazer um link para uma se��o diferente dentro da mesma p�gina ou para uma se��o marcada em outra p�gina.

Por exemplo, nesta p�gina que voc� est� vendo pode-ses criar uma marca invis�vel, chamada "verifique", que refer�ncia o cabe�alho "Verifique seu trabalho". Ent�o escrevemos um link que conecta com esta se��o do documento. Quando voc� clicar sobre este link para aquela �ncora nomeada, o seu browser WWW ir� deslocar a p�gina, de modo que o cabe�alho anteriormente referenciado fique no topo da tela do browser.

Este � um exemplo que confirma que isto � poss�vel. V� para Verifique seu trabalho e quando chegar l� procure por um link que trar� voc� devolta para esta se��o.

A sintaxe para criar uma �ncora nomeada �:


     <A NAME="nome">Texto que ser� referenciado</A> 

ou para criar a �ncora que voc� acessou atrav�s do link logo acima:


     <A NAME="verifica">Verifique seu trabalho</A>

Escrevendo um link para uma �ncora nomeada

Se voc� quiser criar um link hipertexto, veja li��o 8a. Para criar uma �ncora nomeada, use esta sintaxe:


     <A HREF="#xxxxx">Texto para atuar como hipertexto</A>

ou para criar o link que fez com que voc� fosse para a se��o l� em baixo:

 

     V� para  <A HREF="#verifica">Verifique seu trabalho</A>

 

O s�mbolo "#" instrui o browser WWW para que ele procure por uma �ncora nomeada chamada "xxxxx" atrav�s do documento HTML. Quando voc� seleciona ou clica sobre o hipertexto, o browser tr�s a parte do documento que cont�m a �ncora nomeada para o topo da tela.

Adicionando �ncoras nomeadas � Li��o Joinville I

Agora n�s iremos criar um �ndice para a p�gina Joinville I. Este �ndice ir� aparecer no topo desta p�gina. As entidades do �ndice ser�o os cabe�alhos que n�s j� criamos anteriormente. Cada um ir� atuar como um link hipertexto para uma se��o particular da nossa li��o.

O primeiro passo � criar uma �ncora nomeada para cada um dos cabe�alhos das se��es da nossa p�gina Joinville I:

  1. Abra o arquivo da li��o anterior.
  2. Localize o cabe�alho "Apresenta��o". O texto que voc� tinha anteriormente era:
    
    <h2><img src="bal_red.gif"> Apresenta��o</h2>
    
    

    Agora voc� deve mud�-lo para:

    
    <h2><img src="bal_red.gif"><A NAME="apresentacao"> Apresenta��o</A></h2>
    
    

    Nota: Voc� apenas marcou a linha que cont�m o cabe�alho "Apresenta��o" com um marcador de refer�ncia invis�vel, a �ncora nomeada "apresentacao".

  3. De forma semelhante, mude todos os cabe�alhos das outras se��es do documento:
    
    <h3><img src="bal_red.gif"><A NAME="localizacao"> Localiza��o</A></h3>
    
    
    
    <h3><img src="bal_red.gif"><A NAME="historia"> Hist�ria</A></h3>
    
    
    
    <h2><img src="bal_red.gif"><A NAME="eventos"> Eventos</A></h2>
    
    
    
    <h2><img src="bal_red.gif"><A NAME="distancias"> Dist�ncias Rodovi�rias</A></h2>
    
    
    
    <h2><img src="mir.gif"><A NAME="atracoes"> Atra��es Tur�sticas</A></h2>
    
    
    
    <h2><img src="bal_red.gif"><A NAME="atrativos"> Atrativos Naturais</A></h2>
    
    
    
    <h2><img src="bal_red.gif"><A NAME="servicos"> Servi�os de Hotelaria e Divers�o</A></h2>
    
    
    
    <h2><img src="bal_red.gif"><A NAME="surfando"> Surfando pela Internet</A></h2>
    
    
  4. Se voc� clicar na op��o Reload do menu, voc� n�o ir� notar nenhuma mudan�a. Os r�tulos de �ncoras nomeadas que voc� acrescentou s�o invis�veis para o usu�rio.

Adicionando Links para uma �ncora Nomeada no Mesmo Documento

Agora n�s iremos criar um �ndice que ir� aparecer no in�cio da p�gina, logo ap�s a apresenta��o da li��o Joinville I. N�s iremos usar uma lista desordenada (veja li��o 6 para mais detalhes em listas) para criar o �ndice:

  1. Logo abaixo do texto que fala sobre a li��o Joinville I acrescente o seguinte texto:
    
    <hr>
    
    <b>Nesta li��o...</b>
    
    <ul><i>
    
    <li>Apresenta��o 
    
    <ul>
    
       <li>Localiza��o 
    
       <li>Hist�ria 
    
    </ul>
    
    <li>Eventos
    
    <li>Dist�ncias Rodovi�rias
    
    <li>Atra��es Tur�sticas 
    
    <li>Atrativos Naturais
    
    <li>Servi�os de Hotelaria e Divers�o
    
    <li>Surfando pela Internet
    
    </ul></i>
    
    

    Nota: O �ndice est� entre duas r�guas, definidas pelo r�tulo <hr>. O estilo it�lico � usado para as entidades texto. Neste ponto n�s temos apenas o texto das entidades do �ndice. A seguir, iremos adicionar o HTML necess�rio para tornar estes links ativos.

  2. Salve e recarregue a p�gina no browser WWW

Finalmente, queremos fazer com que cada �tem da lista atue como um link hipertexto para outra se��o do nosso documento. Para fazer isso, iremos usar uma varia��o do link b�sico visto anteriormente na li��o 8a.

Ao inv�s de apontar para outro arquivo, iremos apontar para uma das �ncoras nomeadas do nosso arquivo. Indicamos uma �ncora nomeada usando o s�mbolo "#" precedendo o marcador de refer�ncia:

  1. Abra o seu arquivo desta li��o e localize o primeiro �tem da lista da se��o de �ndice. Esta linha tem esta cara:
    
    <li>Apresenta��o 
    
    

    mude ela de modo que fique desta forma:

    
    <li><A HREF="#apresentacao">Apresenta��o</A>     
    
    
  2. Agora voc� tem condi��es de mudar todos as outras �ncoras. A sess�o ficar� assim:
    
    <hr>
    
    <b>Nesta li��o...</b>
    
    <ul><i>
    
    <li><A HREF="#apresentacao">Apresenta��o</a> 
    
    <ul>
    
       <li><A HREF="#localizacao">Localiza��o</a> 
    
       <li><A HREF="#historia">Hist�ria</a> 
    
    </ul>
    
    <li><A HREF="#eventos">Eventos</a>
    
    <li><A HREF="#distancias">Dist�ncias Rodovi�rias</a>
    
    <li><A HREF="#atracoes">Atra��es Tur�sticas</a> 
    
    <li><A HREF="#atrativos">Atrativos Naturais</a>
    
    <li><A HREF="#servicos">Servi�os de Hotelaria e Divers�o</a>
    
    <li><A HREF="#surfando">Surfando pela Internet</a>
    
    </ul></i>
    
    
  3. Salve e recarregue a sua p�gina no browser WWW. Quando voc� clicar em um �tem do �ndice, o browser ir� mostrar a se��o associada no topo da tela.

Adicionando Links para uma �ncora Nomeada em Outro Documento

Voc� pode criar um link que aponta para uma se��o em outro documento HTML, marcado por uma �ncora nomeada. A sintaxe �:


     <A HREF=arquivo.html#NAME>Texto do link</A>

Um exemplo de uso deste tipo de recurso � a apresenta��o da p�gina de �ndice.

Para a contru��o deste link foi usada a seguinte sintaxe:


     <A HREF="index.htm#indice">�ndice</A>

 

Verifique seu trabalho


Volte para o in�cio da sess�o

 

Revis�o

  1. Como identificar uma �ncora nomeada ?
  2. Quais s�o os passos para se criar um �ndice para diferentes se��es em um documento?
  3. Como modificar um link para conectar com uma �ncora nomeada em outro documento HTML ?

Pr�tica independente

Crie �ncoras nomeadas para os cabe�alhos de seu pr�prio documento WWW e construa um �ndice que ir� referenciar estas sub-se��es.

 

A seguir....

Links gr�ficos.

 

Página Inicial | Índice |