Mas Informacion
Crear enlaces a puntos concretos de una página
Un suscritor me ha preguntado cómo crear un enlace para que se dirija a un punto en concreto de una página, en lugar de abrirla en su inicio. ¡Veamos cómo!
¿Cómo dices?
Por defecto, cuando enlazaos una página, esta se abre en su inicio, o sea, la parte superior. Esto pasa siempre. Pero imaginemos que queremos enlaza un “punto en concreto”. Por ejemplo, en un artículo de la wikipedia, un apartado que está en medio de la página, para que los que vayan ahí no tengan que hacer scroll desplazándose, hasta encontrar ese punto.
Os pongo un ejemplo. Si yo enlazo el tutorial Un proyecto de principio a fin tal cual, podréis comprobar que si hacéis clic vais al principio del artículo. Pero si quiero dirigiros a un punto en concreto del mismo, por ejemplo, “Fase de Pruebas”, puedo hacerlo así. O incluso podría hacer un enlace al final de este tutorial.
Conseguir esto en realidad es muy simple, veamos los dos pasos que tenemos que seguir:
Primer paso, crear la “ancla”
El primer paso es crear la “ancla”. La ancla (anchor) es el punto de destino. Dónde queremos ir a parar. Eso lo hacemos fácilmente introduciendo el atributo “id” a cualquier elemento. Por ejemplo, en el ejemplo que os he dicho antes, el destino era el H2 “Fase de pruebas”. Con lo que editaremos el código para pasar de esto:
Fase de pruebas
A esto:
Fase de pruebas
Este parámetro “id” lo podemos colocar donde queramos. En un
, un
, un
Con ese elemento, aunque no se muestre nada visualmente en la página, tenemos una ancla (de ahí la “a”) preparada para ser enlazada. Y precisamente a eso vamos ahora. A enlazar.
Segundo paso, crear el enlace
Si el primer paso era simple, el segundo aún lo es más. Sólo tenemos que crear un enlace como haríamos normalmente, con el detalle de añadir un cuadradillo (hashtag) al final, seguido del identificador (id) que hemos creado antes. Así pues, una vez más, con el ejemplo anterior, en lugar de usar la URL:
Usaremos la siguiente:
De esta forma, le estaremos diciendo que se dirija directamente a ese punto. ¿Fácil verdad? Incluso en el caso que queramos dirigirnos a una parte en concreto de la misma página en la que estamos, sólo nos hace falta colocar el hashtag con el ID, y nada más. O sea, que para enlazar el final de esta página, en lugar de usar esta URL:
Puedo hacerlo así:
#fin
Y funcionará igual, ya que por defecto los navegadores buscarán ese ID en la página en la que nos encontramos. ¡Menos es más!
Resumen y conclusión
Para enlazar directamente una sección o apartado de una URL, primero debemos crear un punto de destino con el atributo “id”, y luego debemos enlazarlo con el símbolo de hashtag (#) seguido de ese mismo identificador.
Si queréis saber más y mejor sobre estos truquillos, así como de marketing online, os aconsejo echar un vistazo a todos los cursos que tenéis disponibles. Si os suscribís tendréis acceso completo a todos de forma inmediata, entre ellos el curso de CSS o el curso de creación de plugins para WordPress.
Para cualquier duda, ya sabéis que me podéis contactar a través de la pestaña de soporte de la Intranet de suscriptor, y estaré encantado de resolverla con tutoriales como este. ¡Nos vemos en el siguiente! 🙂
