Como tú ya sabes, los enlaces son una parte vital de las páginas Web. Los enlaces, links en inglés, te permiten moverte sin problemas desde una página a otra. Es decir, navegar entre páginas. También te permiten obtener más información sobre un tema determinado.
Hay diferentes tipos de enlaces que debes conocer si deseas aprender HTML. Vamos a concentrarnos, primero, en el cuerpo del documento HTML. Todo lo que se encuentra entre las etiquetas <body> y </body>. Existen los siguientes tipos de enlaces o vínculos:
- Enlaces normales o de texto
- Enlaces en imagen
- Enlaces a direcciones de correo electrónico
- Marcadores de posición o enlaces de anclaje
Enlaces regulares o de texto
El tipo más común de enlace es el enlace de texto. Son textos que se presentan en un color y con algún atributo distinto del del resto del texto, por defecto con atributo subrayado y color azul, y te permiten visitar un recurso vinculado.
Para crear un enlace de texto simple, utiliza la etiqueta <a> siguiendo esta sintaxis:
<a href="URL de página que desea vincular">texto del enlace</a>
¿Qué significa esta sintaxis?
- La etiqueta <a> abre el elemento de enlace.
- El atributo href indica el destino del enlace.
- El “texto del enlace” podría ser cualquier cosa, desde una simple descripción de la página vinculada a algo así como “haga clic aquí” o “visitar la página.”
- La etiqueta </a> cierra el elemento.
Por ejemplo:
<a href="http://www.google.com">Ir a Google</a>
se mostraría en la página web como:
Al hacer clic en el enlace te llevará a http://www.google.com
Ten en cuenta que la URL de destino no tiene que ser una página HTML o una página Web. Un enlaces podría llevarte a un archivo de imagen, a un documento de Word, a un archivo PDF, o incluso a un archivo de audio, video o cualquier otro archivo multimedia.
Enlaces imagen
A veces, desearás usar una imagen en lugar de un enlace de texto. Esto también es posible. Para usar una imagen como enlace, utiliza la siguiente sintaxis:
<a href="URL"><img src = "imagen.jpg" alt = "texto alternativo de la imagen"></a>
En tu página, la imagen llamada “imagen.png” enlazará con la URL que hayas indicado en el atributo href.
El texto alternativo, es un texto que se mostrará, en el que caso que la imagen no sea accesible. Además ayuda a los motores de búsqueda a clasificarla. Por ejemplo:
<a href="http://www.google.com"><img src = "google.jpg" alt="Ir a Google"></a>
que en una página web se mostraría así:
Esto parace bastante sencillo. Pero si lo que necesitas es agregar dos o más enlaces a una sola imagen ¿Cómo se hace?
Para ello necesitamos crear un mapa de imagen. Un mapa de imagen sería una imagen que tiene varias zonas con enlaces diferentes. Por ejemplo, si dispones de la imagen de una cara y desea vincular los ojos a una página llamada ojo.html y la nariz a nariz.html, tienes que crear un mapa de imagen.
Para crear un mapa de imagen, necesitas obtener las coordenadas de los puntos calientes. Los puntos calientes son las áreas de la imagen en las que se puede hacer clic. Para obtener las coordenadas, se puede usar cualquier software de procesamiento de imágen o por ejemplo la herramienta en línea Poor Person’s Image Mapper .
Una vez que conoces las coordenadas, podrás insertar un mapa de imágenes en tu página, utilizando la siguiente sintaxis:
<img src="cara.jpg" usemap = #cara> <map name=cara> <area shape=rect coords=0,0,129,129 href="ojo.html"> <area shape=rect coords=130,130,159,159 href="nariz.html"> </map>
En este mapa de imagen, al hecer clic en el área rectangular dentro de las coordenadas (0, 0) y (129, 129) se enlazará a la página ojo.html.
Del mismo modo, al hacer clic en el área rectangular dentro de las coordenadas (130, 130) y (159, 159) se enlazará a la página nariz.html.
Hay otras formas que puede utilizar:
<area shape=circle coords=0,0,129,129 href="url">
y
<area shape=polygon coords= 0,0,129,129 .., xn,yn Href="url">
Enlaces a direcciones de correo electrónico
En lugar de a una URL, imagen, vídeo o cualquier otro tipo de archivo similar, pueden crearse, también, vínculos o enlaces a direcciones de correo electrónico.
Un vínculo de correo electrónico abre el cliente predeterminado de correo electrónico del usuario (ThunderBird, Outlook, Apple Mail, etc) e inicia un nuevo mensaje con la dirección de correo electrónico especificada en el campo Para:. Si también se ha especificado un tema, el campo Asunto: también se rellenará automáticamente.
Para ello, utilice la siguiente sintaxis:
<a href="mailto:you@yourdomain.com?Subject=Creación de un vínculo de correo electrónico"> ¡Envíame un e-mail </a>
En tu página, esta se mostrará como
Al hacer clic en ese enlace, se abrirá el cliente de correo electrónico para escribir un nuevo mensaje. En el campo Para, verá: “tu@tudominio.com” y en el campo Asunto: “Creación de un vínculo de correo electrónico”.
Enlaces de anclaje (Anchor links)
Hay momentos en los que necesitarás crear enlaces a diferentes partes de la misma página web. Por ejemplo, si la página es muy larga, puedes desear colocar un enlace, que desde un punto de la misma, te lleve al principio de la página.
Una buena manera de crear un vínculo que lleve a los usuarios a un punto específico de la misma página es mediante la creación de enlaces de anclaje. Para ello, primero debes crear un marcador con el atributo “id”.
Por ejemplo, si deseáramos crear un enlace, que nos llleve, desde esta posición, al primer párrafo de este artículo, añadiríamos el marcador, al primer párrafo, de la siguiente forma:
<a id="principio">Como usted ya sabe, los enlaces son una parte vital de las páginas Web. Los enlaces, links en inglés, le permiten moverse sin problemas desde una página a otra. Es decir, navegar entre páginas. También le permite obtener más información sobre un tema determinado.</a>
y añadiremos el enlace desde el que queremos acceder así:
<a href="#principio">Ir al principio de la página</a>
que quedará de la siguiente forma:
Al hacer clic sobre el enlace, éste te llevará directamente al primer párrafo de este artículo. No olvides añadir el signo # antes del nombre del marcador al crear el enlace.
Colores de los enlaces
Cuando mueves el ratón sobre un enlace, generalmente ocurren dos cosas:
- El cursor del ratón se convierte en una pequeña mano
- El color del enlace cambia
Por defecto, un enlace se muestra con los siguientes colores (en todos los navegadores):
- Un enlace no visitado se muestra subrayado y de color azul
- Un enlace visitado se muestra subrayado y de color púrpura
- Un enlace activo se muestra subrayado y de color rojo
Se pueden cambiar los colores por defecto, mediante estilos. Por ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
</head>
<body>
Puedes cambiar los colores por defecto de los enlaces
<a href="http://www.google.com" target="_blank">Ir a Google</a>
</body>
</html>
Este ejemplo, mostrará el enlace no visitado de color verde (green), sin subrayar. Una vez visitado será de color rosa (pink) sin subrayar. Cuando se coloque el ratón sobre él, se mostrará de color rojo (red) y subrayado (undeline). Y por último si el enlace se encuentra activo, será de color amarillo (yellow) y subrayado (underline).
Otras consideraciones al crear enlaces:
1. Indicar dónde se abrirá el recurso vinculado.
Ten en cuenta, que al crear el enlace, puedes especificar dónde se abriría un recurso vinculado, que puede ser en:
- La misma página (por defecto).
- En una nueva ventana, en cuyo caso tendrías que añadir el atributo: target = “_ blank” al código del enlace.
- Si estás trabajando con marcos (frames), hay también atributos que te permitirán especificar en qué marco se abriría el enlace.
target = “_ self” abrirá el enlace en el mismo marco en el que se ha hecho clic.
target = “_ parent” abrirá la página vinculada en el marco padre.
target = “_ xyz” abriría la página vinculada en el marco llamado “xyz”.
Por ejemplo, si deseas crear un enlace a google.com y deseas que el vínculo se abra en una ventana nueva, el código a utilizar sería el siguiente:
<a href="http://www.google.com/contactar.html" target="_blank">Ir a Google</a>
2. El uso de URLs absolutas o relativas en los enlaces.
Las URL absolutas especifican la dirección URL completa, es decir:
<a href="http://www.tudominio.com/contactar.html">Contactar</a>
Este tipo de URLs se utiliza generalmente cuando se está vinculando a otro sitio web en otro dominio.
En las URLs relativas, no se especifica la parte de dominio, la URL indicará un path relativo, por ejemplo:
<a href="contactar.html">Contactar</a>
En este caso, la página contactar.html, se encuentra en la misma ubicación, que la página que contiene el enlace.
Esto tipo de enlaces se utiliza generalmente cuando se está vinculando a páginas dentro de su propio dominio.
Entradas relacionadas
Codificación HTML (conjuntos de caracteres)- HTML para principiantes (parte 22): Entidades HTML
- HTML para principiantes (parte 21) Diseño web responsivo
- HTML para principiantes (parte 20): Diseño de columnas
3 maneras de optimizar el CRO (tasa de conversión) de tu web.
El Arte de la Caligrafía. 40 fuentes gratis para Escritores Creativos.
Hola,
Yo llevo tiempo intentando hacer u popup que me abra una zona especifica de otra pagina que no es mia… por ejemplo: le doy a mi enlace y se me abre una ventana pequeña donde me sale la pagina web de un periodico, pero a la mitad de la pagina no arriba del todo, donde ponga noticias locales… no se si me explico bien.
Gracias.
En el popup podrías colocar un iframe en la mitad del mismo y cargar en él la página externa.