Bruce Lee dijo una vez: “Hasta que no domines los enlaces ancla en HTML y CSS, no dominarás el desarrollo front-end”.
Está bien, estoy bromeando, Bruce Lee no dijo eso. Pero sigue siendo un poco cierto. Los enlaces de anclaje (anclajes de URL) son a menudo lo primero que los aspirantes a desarrolladores aprenden a usar, pero hay más que aprender que simplemente crear hipervínculos de una página a otra. Así que comencemos nuestro camino hacia la maestría…
¿Qué es un enlace de anclaje en HTML?
Cuando hablamos del enlace ancla, nos referimos al elemento HTML . Como sabe, lo usa principalmente para vincular a otras páginas web, pero también puede usarlo para vincular direcciones de correo electrónico, números de teléfono o incluso archivos en su disco duro local.
Entonces, ¿por qué se llama ‘ancla’ y no ‘enlace’ como lo llamaría una persona normal?
Bueno, es porque originalmente se inventó como una forma de saltar entre diferentes partes del mismo documento (enlace interno en HTML). Usaría la etiqueta no solo para crear el enlace, sino también para identificar la parte del página a la que está enlazando. Así como un ancla real impide que un barco se mueva, la etiqueta del ancla detuvo el movimiento de la ventana.
Hoy en día, no necesita usar la etiqueta a como un ‘punto de parada’; puede hacerlo si lo desea, pero también puede vincular a cualquier elemento con un atributo de identificación (más sobre esto más adelante).
Cómo agregar el ancla de URL en HTML
El atributo clave del elemento ancla es href. Usas esto para indicar dónde quieres que vaya el enlace:
<a href="https://alvarotrigo.com/">AlvaroTrigo.com</a>
El texto entre las etiquetas de apertura y cierre es el texto en el que las personas realmente hacen clic, conocido como texto de anclaje.
A continuación se muestran algunos ejemplos HTML de enlace de anclaje (anclaje de URL):
¿Cómo vincular a una parte específica de una página HTML?
Los ejemplos anteriores crean un ancla de URL a una página web diferente. Sin embargo, como mencioné anteriormente, también puede usar anclajes de URL para enlaces internos en páginas HTML.
Para hacer eso, simplemente agregue un atributo de identificación al elemento al que desea vincular (que generalmente sería un encabezado, pero puede ser cualquier cosa), y utilícelo en el atributo href del ancla:
<a href="#another-section">I'm linking from here</a><h2 id="another-section">I'm linking to here</h2>
Tenga en cuenta que debe poner un # en el href del ancla, pero no en la identificación del objetivo.
A continuación se muestra un ejemplo de enlace interno para que pueda ver cómo se ve en acción:
Enlace de anclaje a la parte superior de la página
Bien, esto funciona según lo previsto. Pero, ¿y si nuestro visitante quiere volver a la cima? ¿Deberíamos dejar que se desplacen completamente hacia arriba? Podríamos… pero hagámoslo fácil para ellos y agreguemos otro enlace ancla que los lleve a la parte superior de la página.
Para hacer esto, usamos exactamente el mismo proceso que antes. Solo necesitamos encontrar el elemento más alto en nuestra página, el div del área de texto en este caso, y agregarle una identificación:
<div class="text-area" id="top">
Luego simplemente lo enlazamos como de costumbre:
<a href="#top">Back to top</a>
Obtenemos esto:
Por el momento, el enlace solo teletransporta a las personas a la nueva ubicación. Sería genial si, en cambio, la página se desplazara gradualmente hacia abajo hasta su destino.
No solo es posible, sino que también es bastante fácil de lograr con jQuery:
Puede encontrar instrucciones detalladas sobre cómo hacer esto aquí: jQuery smooth scroll.
Desplazamiento de enlace de anclaje CSS
Sin embargo, una cosa. ¿Observe cómo cuando nos desplazamos hacia abajo en la parte inferior de la página, terminamos sin espacio entre nuestro destino y la parte superior de la ventana gráfica? Está completamente al ras.
Esto no se ve muy bien, por lo que deberíamos agregar un pequeño desplazamiento sobre nuestro destino, para darle un poco de espacio para respirar. Para hacer eso, podemos simplemente esto buen truco de Chris Coyier:
#lorem-ipsum::before {
display: block;
content: " ";
margin-top: -20px;
height: 20px;
visibility: hidden;
pointer-events: none;
}El ::antes es un pseudo-elementoserá el primer elemento secundario de la cosa a la que lo adjunte, en este caso, nuestro encabezado de destino con la identificación de #lorem-ipsum.
Al darle una altura al pseudoelemento y convertirlo en un elemento de bloque, nos aseguramos de que cualquier elemento hermano aparecerá en una nueva línea debajo de él. Al establecer un margen superior negativo, lo desplazamos hacia arriba en la misma cantidad, lo que cancela la altura para que nuestra visualización no se vea afectada. Sin embargo… en lo que se refiere a , ¡esa altura aún existe! Entonces, el objetivo del enlace está en realidad 20 px por encima del elemento.
¡Te dije que era un truco!
URL Anchor CSS – Estilo de sus enlaces
OK – puedes hacer que tus enlaces hagan algo. Ahora pensemos en el aspecto visual. ¿Cómo se puede cambiar la apariencia de los enlaces ancla?
Fácil, simplemente seleccione un elemento en su CSS y agregue el estilo que desee. Por ejemplo, el color del enlace de anclaje predeterminado es azul, o #0000ee. Si quisiera cambiar eso, simplemente usaría:
a {
color: #ee7700;
}Esto le daría enlaces naranjas.
Aquí hay algunas otras formas comunes en las que puede personalizar sus enlaces de anclaje con CSS…
Anclaje de URL Subrayado CSS
Muchos sitios se deshacen del subrayado en sus enlaces ancla. Puedo ver la lógica aquí: creo que todos los usuarios de Internet saben que el texto de diferentes colores suele ser un enlace, y muchas personas piensan que los enlaces se ven mejor sin el subrayado.
En CSS, subraya (o no) usando la propiedad de decoración de texto, por lo que podemos seleccionar un elemento y establecerlo en ninguno:
a {
text-decoration: none;
}Vamos a probarlo y ver cómo se ve:
¿Qué opinas? ¿Mejor o peor? Te dejaré hacer esa llamada en tus propios proyectos. Personalmente, creo que el texto se ve más limpio sin él… pero también creo que el subrayado es útil. Elimina toda confusión: “este es un enlace, 100% seguro, no hay dudas al respecto”. Me pregunto si hay un término medio aquí…
Enlace de anclaje Hover CSS
Si queremos, podemos orientar nuestro CSS de enlace de anclaje para que surta efecto solo cuando el visitante pasa el cursor sobre el enlace. Es fácil, solo use a: hover en el CSS.
Entonces, si desea eliminar el subrayado del enlace, pero hacer que vuelva a aparecer cuando las personas pasen el mouse sobre él, usaría esto:
a {
text-decoration: none;
}a:hover {
text-decoration: underline;
}
El resultado:
¡Ok, me gusta! paso a paso se va armando nuestra pagina.
Anclaje de URL Color visitado
Anteriormente hablamos sobre cambiar el color del enlace.
Pero como sabes, los enlaces cambian a un color diferente si has visitado ese destino antes. Lo habrás visto en nuestro ejemplo anterior: cuando vuelves a la parte superior, el enlace original ahora es morado: #551A8B, para ser precisos. Ese es el color predeterminado para los enlaces visitados.
Si desea cambiar eso, simplemente use a:visited:
a:visited {
color: #7B0706;
}Esto lo haría marrón.
Convertir una imagen en un enlace en HTML
Su texto de anclaje no tiene que ser texto. ¡Puede ser cualquier elemento!
Es bastante común usar una imagen como enlace, por ejemplo, para apuntar a una versión de tamaño completo de la imagen. Entonces, ¿cómo se vincula una imagen? Fácil, simplemente coloque su elemento dentro de :
<a href="#top" id="to-top"><img src="https://i.imgur.com/LOUIXcd.jpg" alt="Back to top" /></a>
Lo bueno aquí es que si el enlace de la imagen se rompe, aparecerá el texto alternativo. Entonces, el respaldo es solo un enlace de texto ordinario y en pleno funcionamiento. Aquí hay un ejemplo:
Relleno de enlace de anclaje
Para que sus enlaces de anclaje sean aún más visibles para sus visitantes, es posible que desee agregar un pequeño relleno alrededor de ellos. Y tu primer pensamiento, me imagino, sería hacer esto:
a {
padding: 10px;
}Si hace esto, encontrará que el relleno solo aparece a la izquierda y a la derecha del enlace de anclaje, así:
Esto sucede porque es un elemento en línea y todos los elementos en línea se comportan de esta manera. Si eso es lo que quieres, ¡genial! ¡Ya terminaste!
Pero si desea que el relleno aparezca en los cuatro lados del ancla, solo necesita convertirlo en un elemento de bloque en línea:
a {
display: inline-block;
padding: 10px;
}Esto se aplica a todos los elementos en línea, por lo que es útil conocerlo. El resultado se muestra a continuación: efectivamente, aumenta la altura de línea de cualquier línea en la que se encuentre un enlace:
¡Buen trabajo mejorando tus habilidades de Anchor Link!
OK, +100 XP para ti – ¡ahora sabes cómo crear y diseñar tus enlaces ancla!
Entonces, la pregunta ahora es, ¿cuál es el siguiente paso en su viaje? He aquí una idea… ¿por qué no intentar crear un sitio de página completa? Ya sabes a qué tipo me refiero: donde la página web se divide en segmentos de página completa y te desplazas hacia abajo para moverte entre ellos. Son comúnmente utilizados por estudios de diseño y marcas de renombre, y su cartera se verá increíble (como estos) si tiene algunos de estos en ellos.
¿Pero no son realmente difíciles de hacer? Bueno, pueden serlo, si decides hacer uno desde cero. Pero hay una manera más fácil: use una biblioteca JS llamada fullPage.js.
fullPage.js es una solución plug-and-play fácil de usar para crear sitios de página completa. Hay un montón de diferentes fondos, efectos de transición y animaciones que puedes activar muy fácilmente. Otra cosa interesante es que fullPage se integra perfectamente con WordPress: muchos de sus clientes potenciales (o clientes de empleadores potenciales) usarán WordPress, por lo que tener una manera de hacer que su trabajo se destaque del resto será una gran ventaja. ¡Y fullPage es así!
Echa un vistazo: fullPage.js
Sobre el Autor:
warren davies es un desarrollador front-end con sede en el Reino Unido.
Puedes encontrar más de él en https://warrendavies.net
