HTML - exemplos de links locais (na mesma página)

Os links com destino para o mesmo documento são úteis quando o usuário tem interesse em pular a leitura da página direto para um ponto desejado no mesmo documento, sem ter que ler todo o documento e este 'ponto' pode estar antes ou depois da posição atual de 'leitura' do documento corrente.

Curiosamente a tag para criar um link chama-se anchor ou âncora em português porque define um ponto fixo no documento que poderá ser o destino de outros links proporcionando um deslocamento preciso de um ponto A para um ponto B do documento.

Quando estamos num documento e desejamos ir para outro documento mas num ponto específico dele podemos colocar na url de destino o nome da página de destino e o nome do link de destino. Sendo assim o documento atual será substituído pelo documento de destino e o documento de destino será aberto justamente no ponto determinado pelo link. Esse é o assunto de outro documento Links para a Mesma Pagina (Locais) e Paginas Externas.html

Note que um link é definido por 2 itens : Um item que aponta e outro item que determina um destino. Note que os 2 devem estar 'casados', ou seja, um consiga identificar o outro, para que funcionem perfeitamente.

Dica: Este conhecimento é básico de HTML. Guarde na memória esta definição. Ela é muito cobrada nas entrevistas dos desenvolvedores de sites.

Apontando para a própria página corrente

Você pode criar um link com href="#". Para o browser esse link irá apontar para a página corrente, ou seja, a página corrente será recarregada, no seu topo. Não é muito útil a menos que a página corrente seja uma página dinâmica que seja atualizada constantemente.

Definindo o destino do link local

<a name="um"><h3>1.introdução</h3></a>

A propridade name da tag anchor indica o destino do link.

Definindo Link local que aponta para um ponto do documento corrente

<a href="#um">Isto é um link local</a>

O link local é definido pelo parâmetro href com # indicando que é na página corrente e os caracteres a seguir do caractere # apontam para o destino que será o parâmetro 'name' da tag de destino .

Resumindo : Os links locais são definidos pelo name da tag e no href do link colocamos # seguindo do nome da tag de destino.

Exemplos:

No exemplo abaixo há uma referencia cruzada de links, ou seja, há 2 links um apontando para o outro.

<a name="voltatres" href="#tres">3.prática </a>
<a name="tres" href="#voltatres"><h3>3.prática</h3></a>




Exemplos de utilização de links

No exemplo abaixo temos 3 links apontando para 3 pontos deste documento. O primeiro aponta para #um, o segundo aponta para #dois e o terceiro aponta para #tres e tem o parâmetro name="voltatres" e, sendo assim, é o destino de outro link neste documento.

De um clique nas opções acima para acessar o texto correspondente

estas linhas estão aqui apenas para separar os links
estas linhas estão aqui apenas para separar os links
estas linhas estão aqui apenas para separar os links
estas linhas estão aqui apenas para separar os links
estas linhas estão aqui apenas para separar os links
estas linhas estão aqui apenas para separar os links
estas linhas estão aqui apenas para separar os links
estas linhas estão aqui apenas para separar os links
estas linhas estão aqui apenas para separar os links

Destino #um

1.introdução

usar um editor html é fundamental para se ter produtividade. este é o primeiro link. estas linhas estão aqui apenas para separar os links
estas linhas estão aqui apenas para separar os links
estas linhas estão aqui apenas para separar os links
estas linhas estão aqui apenas para separar os links

Destino #dois

2.conceitos básicos

este é o segundo link da página. estas linhas estão aqui apenas para separar os links
estas linhas estão aqui apenas para separar os links
estas linhas estão aqui apenas para separar os links
estas linhas estão aqui apenas para separar os links

Destino #tres

3.prática

este link é de duplo sentido. o próprio título é usado para voltar ao
item de menu que o chamou. de um clique no título "3.prática e o menu inicial
é exibido novamente.
estas linhas estão aqui apenas para separar os links
estas linhas estão aqui apenas para separar os links
estas linhas estão aqui apenas para separar os links
estas linhas estão aqui apenas para separar os links


Importante : Ao clicar em um link é acrescentado no history do browser a url de origem para que possa voltar a essa página clicando na seta à esquerda do browser.