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?
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. |
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>
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.
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:
<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"
.
<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>
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:
<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.
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:
<li>Apresenta��o
mude ela de modo que fique desta forma:
<li><A HREF="#apresentacao">Apresenta��o</A>
<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>
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>
Crie �ncoras nomeadas para os cabe�alhos de seu pr�prio documento WWW e construa um �ndice que ir� referenciar estas sub-se��es.
Links gr�ficos.