Enlaces HTML

En este tutorial usted aprenderá cómo crear enlaces a otras páginas en HTML.

Crear enlaces en HTML

Un enlace o hipervínculo es una conexión de un recurso web a otro. Los enlaces permiten a los usuarios moverse sin problemas de una página a otra, en cualquier servidor en cualquier parte del mundo.

Un enlace tiene dos extremos, llamados anclajes. El enlace comienza en el anclaje de origen y apunta al anclaje de destino, que puede ser cualquier recurso web, por ejemplo, una imagen, un clip de audio o video, un archivo PDF, un documento HTML o un elemento dentro del documento en sí, etc.

De forma predeterminada, los enlaces aparecerán de la siguiente manera en la mayoría de los navegadores:

• Un enlace no visitado está subrayado y azul.
• Un enlace visitado está subrayado y morado.
• Un enlace activo está subrayado y en rojo.

Sin embargo, puede sobrescribir esto usando CSS. Obtén más información sobre los enlaces de estilo.

Sintaxis de enlaces HTML

Los enlaces se especifican en HTML utilizando la etiqueta <a>.

Un enlace o hipervínculo puede ser una palabra, un grupo de palabras o una imagen.

Cualquier cosa entre la etiqueta <a> de apertura y la etiqueta </a> de cierre se convierte en la parte del enlace que el usuario ve y hace clic en un navegador. Aquí están algunos ejemplos de los enlaces:

<a href="https://www.google.com/">Google Search</a><a href="https://www.tutorialrepublic.com/">Tutorial Republic</a><a href="images/kites.jpg"> <img src="kites-thumb.jpg" alt="kites"></a>

El href atributo especifica el destino del enlace. Su valor puede ser una URL absoluta o relativa.

Una URL absoluta es la URL que incluye cada parte del formato de URL, como el protocolo, el nombre de host y la ruta del documento, por ejemplo, https://www.google.com/, https://www.example.com/form.php, etc. Mientras, las direcciones URL relativas son rutas relativas a la página, por ejemplo, contact.html, images/smiley.png, etc. Una URL relativa nunca incluye el prefijo http:// o https://.

Establecer los destinos para Enlaces

El atributo target indica al navegador dónde abrir el documento vinculado. Hay cuatro destinos definidos, y cada nombre de destino comienza con un carácter de subrayado (_) :

• _blank — Abre el documento vinculado en una nueva ventana o pestaña.
• _parent — Abre el documento vinculado en la ventana principal.
• _self — Abre el documento vinculado en la misma ventana o pestaña que el documento de origen. Este es el valor predeterminado, por lo que no es necesario especificar explícitamente este valor.
• _top — Abre el documento vinculado en la ventana completa del navegador.

Pruebe el siguiente ejemplo para comprender cómo funciona básicamente el objetivo del enlace:

<a href="/about-us.php" target="_top">About Us</a><a href="https://www.google.com/" target="_blank">Google</a><a href="images/sky.jpg" target="_parent"> <img src="sky-thumb.jpg" alt="Cloudy Sky"></a>

Creación de anclajes de marcadores

También puede crear anclajes de marcadores para permitir a los usuarios saltar a una sección específica de una página web. Los marcadores son especialmente útiles si tienes una página web muy larga.

Crear marcadores es un proceso de dos pasos: primero agregue el atributo id en el elemento donde desea saltar, luego use el valor del atributo id precedido por el signo hash (#) como valor del atributo href de la etiqueta <a>, como se muestra en el siguiente ejemplo:

<a href="#sectionA">Jump to Section A</a><h2>Section A</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

Crear enlaces de descarga

También puede crear el enlace de descarga de archivos exactamente de la misma manera que colocar enlaces de texto. Simplemente apunte la URL de destino al archivo que desea que esté disponible para su descarga.

En el siguiente ejemplo hemos creado los enlaces de descarga para archivos ZIP, PDF y JPG.

<a href="downloads/test.zip">Download Zip file</a><a href="downloads/masters.pdf">Download PDF file</a><a href="downloads/sample.jpg">Download Image file</a>