HTML - Criando e manipulando link âncora

Conhecer HTML não é uma obrigação de nenhum blogueiro e não deve ser o foco de todos nós, mas compreender que todo blog tem em sua estrutura códigos HTML é sim uma obrigação de todos nós blogueiros. Sempre gostei de editar eu mesmo o modelo de blog que uso e compartilhar meus feitos em páginas webs e por isso passei a estudar e entender mais a área.

Pra você que gosta de HTML esta dica poderá ser usada até dentro de artigos como este que você está lendo ou em páginas estáticas (recurso do Blogger, WordPress e outras plataformas). Ele é conhecido como âncora e serve basicamente como um link tradicional (aquele que ajuda o leitor a navegar pelas páginas do seu blog) só que seu diferencial é que ele link conteúdo na mesma página e não em outra página como estamos habituados a ver.

USANDO LINK ÂNCORA?
Sua estrutura se parece com a estrutura do link que conhecemos:

<a href=”http://www.arrumablog.com/#texto_final”>

O que vai mudar é o uso do caractere # e onde vai o complemento dele:

Texto texto, <a href=”#texto_final”>texto</a>

Isso indica ao navegador que o link está dentro do documento.

Você pode usar um link âncora e coloca-lo em qualquer lugar do seu blog, até mesmo fora da página, mas você tem que conhecer muito bem seu link âncora. Um exemplo disso são os comentários no Blogger (e em algumas plataformas):
Link para uma postagem:

http://www.arrumablog.com/2012/08/eu-ainda-confio-na-blogosfera-e-internet.html

Link para os comentários quando clicado da página inicial:

http://www.arrumablog.com/2012/08/eu-ainda-confio-na-blogosfera-e-internet.html#comment-form

RESUMINDO: Link âncora funciona no mesmo documento e em outros locais (páginas web) desde que se conheça o link por completo.

Um bom exemplo prático é o Media Kit do Arruma Blog

COMO UTILIZÁ-LO?
Entenda que este recurso é muito útil para textos grandes, acessibilidade e outras particularidades.

1 - Edite seu texto normalmente.
2 - Localize as partes que terão as âncoras.
3 – Insira um link pelo painel sem selecionar nenhum palavra e coloque um caractere # seguido do nome da âncora em uma palavra OU mude para a edição em HTML e cole um código parecido


<a href=”#NOME”> </a>

4 – Se existir mais de uma âncora, anote todas para não se perder ou ter que fazer um trabalho cansativo.
5 – Vá até o topo do seu artigo ou da página e escreva os textos que serão linkados às ancoras como se fosse um ‘menu’.
6 – Agora selecione a palavra e insira um hiperlink, mas não coloque links que comece com HTTP se você estiver linkando um conteúdo que está na mesma página. Use apenas se o link estiver em outra página.
Para os casos de link em partes do texto, podemos usar um código assim:

<a href=”#NOME”> </a>


Para outros locais usaremos o modelo:

http://www.arrumablog.com/2012/08/eu-ainda-confio-na-blogosfera-e-internet.html#comment-form

Se no Blogger der algum erro quando clicar no link, então recomendo que escreva ou edite a URL do texto do topo com o HTTP e o endereço completo do seu blog como se fosse o modelo aí em cima.

NOTA
Vale lembrar que para linkar informações do mesmo documento, usamos apenas #NOME e para outros documentos usamos todo o endereço do site E da página como por exemplo .HTML para depois colocar o #NOME