En varios artículos de Linea de Código hemos visto la importancia de los enlaces dentro de la World Wide Web y en particular dentro de la creación de páginas web HTML. Lo más normal suele ser el enlazar una página con otra. De esta forma, una vez que pulsemos en el enlace, nos posicionaremos en el principio de la página enlazada. Pero puede ser que lo que nos interese sea llevar al usuario a una parte en concreto del nuevo documento.
HTML nos proporciona un mecanismo mediante el cual podemos enlazarnos a una parte en concreto de la página.
Para ello lo primero que tenemos que hacer es definir un ancla (queda más bonito en ingles… anchor). Este será un punto de una página al cual querremos crear, posteriormente, un enlace.
Para crear un ancla utilizaremos el elemento A de HTML y en especial su atributo name.
<a name="tema1"></a>Tema 1
En nuestro ejemplo hemos definido un ancla al que le hemos llamado «tema1». Ya que la parte en la que está posicionado dentro del documento sería la relativa al «Tema 1».
Recuerda que el nombre que le pongamos al ancla es muy importante, ya que será el mismo que tendremos que utilizar a la hora de realizar el enlace.
Una vez definido el ancla, lo siguiente será el realizar en enlace a dicho ancla. El elemento que necesitaremos en este caso es el mismo que para realizar el ancla, es decir, A. Si bien, ahora utilizaremos el atributo href. Atributo que se utiliza para indicar la URL del enlace.
Para crear un enlace al ancla, el valor del atributo href será el nombre de la página web que contenga el ancla, seguido de una almohadilla (#) y del nombre que le dimos al ancla.
De esta manera el enlace al «Tema 1» será de la siguiente forma:
<a href="#tema1">Enlace al Tema 1</a>
En este caso, antes de la almohadilla no hemos puesto ningún nombre de página. Ya que hemos asumido que el enlace y el ancla se encuentran dentro de la misma página. Si, por ejemplo, el ancla estuviese dentro de la página «historia.html», nuestro enlace a la parte concreta de la página quedaría de la siguiente forma:
<a href="historia.html#tema1">Enlace al Tema 1</a>
José Mª Ferre
Necesito que un enlace vaya a una parte de otro fichero, y que me lea un parte de ese documento, pero solo una parte
Pongo a href la direccdión correpondiente con # y en el otro fichero a y el nombre
Pero sale el fichero entero
Aire acondicionado
Muy buen aporte
Elizabeth Romero Fuerte
Buenas tardes. Tengo mi sitio en la plataforma wix y no encuentro la forma de colocar un enlace hacia un renglon específico de wikipedia, si en la barra de dirección agrego un enlace, se va al principio del archivo y no al renglón que quiero. Ya probe con la almoadilla y me remite al principio del documento y no a un parrafo específico. Saludos cordiales
Víctor Cuervo
Buenas, tienes que ver si la página de la Wikipedia tiene un enlace concreto dentro de la página. Eso sucede si tiene un índice. Por ejemplo si miras en la página https://en.wikipedia.org/wiki/Java_(programming_language) puedes ver que hay un índice y que los enlaces son de la forma: https://en.wikipedia.org/wiki/Java_(programming_language)#Automatic_memory_management
Ves que al final hay una almohadilla y luego un nombre. Al utilizar esta forma te irás al sitio concreto de la página de la wikipedia.
Espero que te ayude.
Saludos.
diseño web
genial , muchas gracias !
Anxo Varela
Hola. Muy bien explicado, muchas gracias por compartirlo.
Tengo una pregunta… ¿y si quiero que al abrir una página la lectura se sitúe automáticamente en un ancla determinada de la página y no al principio?
Víctor Cuervo
Sería añadiendo la almohadilla.
Espero te sirva.
Saludos.
Juan Roman Lopez
Como le daria estilos al div al que voy a redireccionar?
Pues tengo un menu fijo y no se logra observar la div completa!
Ayuda!
Jesus
te amo
Crear Página Web Barcelona
Gracias por la ayuda ;)
Saludos desde Barcelona!!
Bozz
Muy buena información
Víctor Cuervo
Gracias por tu comentario. Nos alegra mucho saber que te ha gustado.
Saludos.
Claudio Rigollet
Super me funciono perfecto gracias…. y si la explicacion es clarita..
Saludos.
Víctor Cuervo
Gracias por el comentario Claudio.
Saludos.
rosa
muy bueno, me encanta esto de subir arriba o ir abajo, estaba tiempo buscando como hacerlo. gracias.
luis
Hola Gracias por tu ayuda, quisiera saber como hacerlo con una animación de que se mire que baje hasta esa parte, gracias
Slotrhop
Hola, muchas gracias por la información, me ha sido de mucha utilidad. Aunque debo estar haciendo algo mal ya que, al crear ambos enlaces, sí que logro derivar al usuario a la página que sirve de ancla, pero en esta se genera un nuevo link que al clicar sobre él redirecciona a «https://www.blogger.com/null» y aparece el mensaje de error 404 «Not found». Como se trata de diferentes páginas, en la primera estoy utilizando el elemento Enlace al Tema 1 y en el ancla Tema 1. En principio no había problema pero cuando pasan unas horas se genera el nuevo link que redirecciona a error… ¿podrías ayudarme?
Jose Costa Ros
Hola,
Agradecer la información, algo tan simple y me ha servido de mucho. Muy útil.
Un saludo!
Víctor Cuervo
José, Nos alegramos de saber que te ha servido y nos da ánimos para seguir.
Saludos.
tomas
Acabo de implementar en mi sitio web este sistema… Realmente impecable. Millón de gracias!!
Leo
Me pasa que cuando quiero que me envie a la parte de comentarios de un post, este envia la noticia para arriba y no logro verla., si me envia a la parte de los omentarios pero estos se muestran en el TOP del «content» hablando como lo tengo estructurado en CSS y la noticia desaparece. Que creen que pueda estar sucediendo?
Daniel Miranda Juarez
Buen dia , tengo un problema para visualizar unos archivos … al empezar a abrir dice que la pagina es de Frames … este es el link .
me pueden apoyar en como poder abrir los registros son resultados de laboratorio .
Gracias por su ayuda.
Kleyberjk
Hoooooo me desenrredaste la vida gracias es sencillo poro me estaba comiendo yo uso nvu es un editor html muy bueno lo recomiendo ya trae para hacer esto pero gracias a esto lo descubri
lineadecodigo
Gracias a ambos. Espero que los artículos sigan siendo de utilidad. Estos comentarios me dan muchos ánimos para seguir publicando.
Y Epifanio, cualquier cosa que pueda ayudar para sus explicaciones, no dude en pedirla. Encantado publicaría al respecto.
Epifanio Tintinago
Sencilla, fácil y práctica. Sigo leyendo sus explicaciones con interés. Soy maestro y uilizo sus explicaciones. Remito además a mis alumnos a este boletín.
GILBERTO REYES BARRERA
LA EXPLICACION ES DIDACTICAMENTO CORRECTA Y MUY CLARA