Link para Texto na Mesma Página


Sabe quando você está escrevendo um texto grande e quer fazer referência a alguma parte do seu texto, mas não sabe como levar o leitor até lá sem que ele procure.
Pois é ontem aprendi como colocar um link onde a página desce ou sobe automaticamente até o texto indicado no link.

Para os webmasters isso é mamão com açúcar, mas para mim foi um super achado. Posso aplicar este recurso em tutoriais extensos onde quero que a pessoa volte numa explicação sem que ela tenha que procurar. O simples fato de ter que procurar a explicação faz com que a pessoa se desinteresse de ler o tutorial e com isso não aprende.

Então vamos lá:

» Você também pode usar este recurso para indicar para voltar ao topo da página.

♦ Estas tags abaixo indicam onde você vai levar o seu leitor:
<a name="nome_da_Ancora">Você escreve entre estas tags.</a>
» Devem estar localizadas onde você quer que o leitor chegue.

♦ Este comando abaixo indica o link para chegar no local que você determinou anteriormente:
<a href="#nome_da_Ancora">Voltar para o começo</a>

♦ Vou exemplificar para você entender melhor, veja o texto abaixo:

<a name="loremipsum">1. Lorem ipsum </a>consequat concludaturque mea in, ei nostro convenire duo, wisi quas electram mel te. Eam cu hinc reprehendunt. Usu eu alienum euripidis, ut lorem homero civibus eum. Mei ne mazim democritum, tation sanctus suavitate in has, atqui omittantur ut vim. Disputationi consequuntur delicatissimi in sit, vitae pertinax consetetur te nec.

2. In sed ipsum deseruisse disputationi, per at sapientem philosophia. Tale delicatissimi et est, at posse utinam pro. Dicat maluisset eu nec. Cum quodsi apeirian accommodare ex, mel cu quodsi consulatu efficiantur, ex veniam mollis integre mea. Pri amet falli viderer ei, tempor option scriptorem in eos.

3. An quo stet <a name="minimum">minimum,</a> regione tritani eligendi mel et. Qui choro essent no. Cu has rebum ullum interpretaris, et enim appareat concludaturque cum. Harum nostrud vulputate pri no, ei adhuc clita fastidii vim. Te fugit quidam pri, his dolorum suscipit facilisis ea.

4. Dictas fuisset senserit nam te, vix ut scripta facilisis posidonium, ei amet adolescens consequuntur usu. Ei eirmod vocibus temporibus eos, kasd habeo feugiat id has, decore consul feugait an nec. At vel rebum propriae imperdiet, ne iudico epicuri philosophia ius. Dicant postulant an sea, puto adhuc mea at, dicunt evertitur est no. His quis melius option at, saepe congue antiopam ei cum, his probo iusto dolore at. Alii iisque aliquip cu pro, his eu homero rationibus dissentiet.

5. Dicit noluisse splendide et ius, ei nostrud pericula persecuti quo, ea agam zzril labores eum. Populo propriae incorrupte ius ne, eam lucilius cotidieque an. Eum illud tractatos deterruisset ne, quo ea errem choro viderer. Et sed dicta commodo, meis falli sit cu, populo commune voluptaria ei per. Ne veri sale malorum pri, mea sanctus prodesset ne, adhuc congue assueverit eam eu. Unum quaeque voluptatum pri te, sonet nostro probatus usu cu, mea ludus tibique vulputate id.

6. Nec id probo quodsi incorrupte. Ius no harum lucilius contentiones. Erant nostrum et mea, sit accusam mediocrem vulputate ea, doming scriptorem mei ex. Sea elitr discere accumsan cu, in nec audiam eloquentiam. Malis omnes argumentum in eos.

7. Usu ei quod torquatos assueverit, vel eu commune persecuti. Tollit munere doctus pro id, id error gloriatur philosophia sed, deserunt explicari nec ex. Sed te iusto signiferumque, his eu iusto nostrum, partem aliquam facilisis ei ius. <a href="#minimum">Clique aqui para Voltar ao Parágrafo 3</a>Cu qui meis exerci ornatus, mel cibo modus quaestio et, ex prima quodsi habemus vis. Nec in enim primis deterruisset, pro ei quem malorum volutpat. Eu vel brute invidunt.

8. Ex velit nobis quo, no possit legimus nominati ius. Simul dissentias cum te, pericula periculis complectitur in vis. Mel malis elitr propriae ut, atqui assum nominavi est in, vim salutatus splendide et. Te est iuvaret denique lucilius, vocibus expetendis quo in, at sed decore delicata percipitur. Eum prima propriae concludaturque id, et duo tation ullamcorper. Qui alii dolorem imperdiet an, alia repudiare reprimique ea qui, dico adipisci interesset eam in. Everti instructior in qui, nec et ignota aliquyam.

<a href="#loremipsum">Clique aqui para Voltar ao 1ºParágrafo</a>


♦ Agora o texto com o recurso aplicado:

1. Lorem ipsum consequat concludaturque mea in, ei nostro convenire duo, wisi quas electram mel te. Eam cu hinc reprehendunt. Usu eu alienum euripidis, ut lorem homero civibus eum. Mei ne mazim democritum, tation sanctus suavitate in has, atqui omittantur ut vim. Disputationi consequuntur delicatissimi in sit, vitae pertinax consetetur te nec.

2. In sed ipsum deseruisse disputationi, per at sapientem philosophia. Tale delicatissimi et est, at posse utinam pro. Dicat maluisset eu nec. Cum quodsi apeirian accommodare ex, mel cu quodsi consulatu efficiantur, ex veniam mollis integre mea. Pri amet falli viderer ei, tempor option scriptorem in eos.

3. An quo stet minimum, regione tritani eligendi mel et. Qui choro essent no. Cu has rebum ullum interpretaris, et enim appareat concludaturque cum. Harum nostrud vulputate pri no, ei adhuc clita fastidii vim. Te fugit quidam pri, his dolorum suscipit facilisis ea.

4. Dictas fuisset senserit nam te, vix ut scripta facilisis posidonium, ei amet adolescens consequuntur usu. Ei eirmod vocibus temporibus eos, kasd habeo feugiat id has, decore consul feugait an nec. At vel rebum propriae imperdiet, ne iudico epicuri philosophia ius. Dicant postulant an sea, puto adhuc mea at, dicunt evertitur est no. His quis melius option at, saepe congue antiopam ei cum, his probo iusto dolore at. Alii iisque aliquip cu pro, his eu homero rationibus dissentiet.

5. Dicit noluisse splendide et ius, ei nostrud pericula persecuti quo, ea agam zzril labores eum. Populo propriae incorrupte ius ne, eam lucilius cotidieque an. Eum illud tractatos deterruisset ne, quo ea errem choro viderer. Et sed dicta commodo, meis falli sit cu, populo commune voluptaria ei per. Ne veri sale malorum pri, mea sanctus prodesset ne, adhuc congue assueverit eam eu. Unum quaeque voluptatum pri te, sonet nostro probatus usu cu, mea ludus tibique vulputate id.

6. Nec id probo quodsi incorrupte. Ius no harum lucilius contentiones. Erant nostrum et mea, sit accusam mediocrem vulputate ea, doming scriptorem mei ex. Sea elitr discere accumsan cu, in nec audiam eloquentiam. Malis omnes argumentum in eos.

7. Usu ei quod torquatos assueverit, vel eu commune persecuti. Tollit munere doctus pro id, id error gloriatur philosophia sed, deserunt explicari nec ex. Sed te iusto signiferumque, his eu iusto nostrum, partem aliquam facilisis ei ius. Clique aqui para Voltar ao Parágrafo 3Cu qui meis exerci ornatus, mel cibo modus quaestio et, ex prima quodsi habemus vis. Nec in enim primis deterruisset, pro ei quem malorum volutpat. Eu vel brute invidunt.

8. Ex velit nobis quo, no possit legimus nominati ius. Simul dissentias cum te, pericula periculis complectitur in vis. Mel malis elitr propriae ut, atqui assum nominavi est in, vim salutatus splendide et. Te est iuvaret denique lucilius, vocibus expetendis quo in, at sed decore delicata percipitur. Eum prima propriae concludaturque id, et duo tation ullamcorper. Qui alii dolorem imperdiet an, alia repudiare reprimique ea qui, dico adipisci interesset eam in. Everti instructior in qui, nec et ignota aliquyam. Clique aqui para Voltar ao 1º Parágrafo


» Note que o local onde você quer indicar deve ter o mesmo nome de Âncora para que o link funcione.Clique aqui para Voltar aos Códigos das Tags

Fonte: Aprendi esta dica no Fórum Webmasters Online

Obs: Se o blogger interpretar o link para a edição do seu post, peça para editar o post e retire o link automático do blogger e atualize enquanto estiver no formato HTML. Porque se voltar para "Escrever" o blogger irá reverter para um link dele mesmo.
Link para Texto na Mesma Página Link para Texto na Mesma Página Reviewed by Áurea on 12/20/2014 Rating: 5

12 comentários:

  1. eu utilizo a função ancora na minha página de ajuda :)

    ResponderExcluir
  2. eu conhecia a função mas não sabia usar..
    valeu a dica!!
    Abçs
    @henriquesantos

    ResponderExcluir
  3. oi... tentei usar não deu certo !!! uso o blogger

    ResponderExcluir
  4. Valeu pelas dicas. Mas o blogger realmente dificulta as coisas. Cada vez que vou editar o texto, preciso refazer todas as "interpretações" que o blogger faz dentro da página. Ou seja, se preciso editar uma letra do texto, preciso refazer TODOS os links dentro da página, SEMPRE!!!

    Existe alguma dica para evitar que isso aconteça?

    ResponderExcluir
  5. Muito bom, vlw msm kra ajudo bastante hehehehe fazia um tempinho que eu não utilizava HTML.

    ResponderExcluir
  6. Muito obrigado. me ajudou muito, foi muito bem explicado. Mersone.Com

    ResponderExcluir
  7. Perfeito.. exatamente o que eu precisa. Muito obrigada. E o Blogger aceitou direitinho...

    ResponderExcluir
  8. Uma dica muito bacana, Aurea!!
    Vim lhe desejar um excelente 2015!! Felicidades para você e sua família!!
    Beijus,

    ResponderExcluir
    Respostas
    1. Obrigada Luma,
      Também desejo a você e sua família um 2015 abençoado com tudo de bom!
      Bjks

      Excluir
    2. Olá Aurea, obrigado por compartilhar esse recurso, estou iniciando o meu novo blog (https://vizive.com.br) e vou aplicar essas dicas!!! Aliás, tem várias dicas bem bacanas por aqui!!! Valeu!

      Excluir
    3. Obrigada Roberto,
      Fico feliz que esteja gostando das dicas do blog!
      É sempre bem vindo aqui!

      Excluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.