Links Para Navegar Dentro da Mesma Página

Ruy Miranda

A navegação dentro da mesma página é extremamente útil, em especial em páginas muito grandes.

Como fazer links para navegar na mesma página?

Os links para navegação dentro das páginas têm particularidades e são muito úteis na didática e na otimização. Link de navegação dentro de uma página é aquele que conduz a um outro lugar dentro da própria página. Podem também abrir logo depois do link. Eles são particularmente úteis nas páginas muito longas ou que apresentam certa diversidade nas informações.

Links que conduzem a outro lugar – Vamos começar com um exemplo. Você pode ver que há uma lista de perguntas no topo da página. Cada pergunta é um link. Quando clicamos num desses links, caímos na pergunta de novo – ela é repetida e, em seguida vem a resposta. Depois da reposta vem outro link cujo texto é: Voltar ao Topo. Clicando nele voltamos à primeira pergunta no topo.

Agora vejamos o código fonte para entender o funcionamento. A primeira pergunta está assim no código:

<a href="#Que">O que é otimização de sites?</a>

Depois de definir as características da fonte, vem o endereço <a href="#Que"> e por fim o texto da âncora, que é “O que é otimização de sites?”.

Quando descemos no código até a resposta a essa pergunta, encontramos o seguinte: <a name="Que" id="Que"></a> - vemos aqui que o nome da âncora é exatamente igual ao que aparece na pergunta no topo, e que aqui foi chamado de “Que”. Não importa o nome, o que importa é que sejam iguais. Entretanto é conveniente usar nomes que se correlacionam com o assunto. Ainda nessa âncora vemos a repetição do seu nome em id. Alguns navegadores não suportam esta informação e o melhor é que a âncora seja simplesmente: <a name="Que"></a>.

Para facilitar ainda mais a navegação, coloquei outro link semelhante com o texto de “Voltar ao Topo”. Ele tem as mesmas características, ou seja,: <a href="#Top">Voltar aoTopo</a>. E para cair exatamente no lugar, coloquei antes da primeira pergunta da lista do topo, a âncora: <a name="Top" id="Top"></a>. A âncora pode ser mais afastada da pergunta – basta que coloquemos depois dela.

Observe que todas as perguntas do topo são repetidas antes das respostas. Isso tem por finalidade facilitar a exploração da página. Ao invés de clicar nas perguntas do topo, o visitante pode preferir percorrer a área de perguntas e respostas.

Você pode fazer uso diferente desses links para exprimir melhor o que deseja.

Link que abre no mesmo lugar – É possível fazer a resposta ou informação abrir logo após a pergunta ou questão. Para isso se usa uma complexa combinação de informações por css. Quando clicamos na pergunta, a resposta aparece logo abaixo. Clicamos de novo na pergunta, a informação desaparece. A vantagem desta sistema é fazer páginas mais curtas. A desvantagem é que muita gente não percebe que deve clicar no texto e fica sem a informação.

Pop Ups – Um pop up é também um link que abre uma janela na mesma página. Nessa janela colocamos a informação desejada. Para fazer pop ups, clique <a href=http://www.otimizacao-sites-busca.com/criar-pop-ups/gerador.htm target=”_blank”>aqui</a>.

Junho/2011