Los enlaces se encuentran en casi todas las páginas web. Los enlaces permiten a los usuarios hacer clic en su camino de una página a otra.
Enlaces HTML - Hipervínculos
Los enlaces HTML son hipervínculos.
Puede hacer clic en un enlace y saltar a otro documento.
Enlaces HTML - Sintaxis
La etiqueta HTML define un hipervínculo. Tiene la siguiente sintaxis:
<a>
<a href="url">link text</a>
El atributo más importante del elemento es el atributo href
, que indica el destino del enlace.<a>
Al hacer clic en el texto del enlace, se enviará al lector a la dirección URL especificada.
Ejemplo
En este ejemplo se muestra cómo crear un vínculo a TodoInformación:
<a href="https://todoinfoinfo.blogspot.com/">Visit todoinfoinfo.blogspot.com!</a>
De forma predeterminada, los enlaces aparecerán de la siguiente manera en todos los navegadores:
- Un enlace no visitado está subrayado y en azul
- Un enlace visitado está subrayado y morado
- Un enlace activo está subrayado y en rojo
Propina: Los enlaces, por supuesto, se pueden diseñar con CSS, ¡para obtener otro aspecto!
Vínculos HTML: el atributo de destino
De forma predeterminada, la página vinculada se mostrará en la ventana actual del navegador. Para cambiar esto, debe especificar otro destino para el vínculo.
El atributo especifica dónde abrir el documento vinculado.target
El atributo puede tener uno de los siguientes valores:target
_self
- Por defecto. Abre el documento en la misma ventana/pestaña en la que se hizo clic en él_blank
- Abre el documento en una nueva ventana o pestaña_parent
- Abre el documento en el marco padre_top
- Abre el documento en todo el cuerpo de la ventanaEjemplo
Utilice target="_blank" para abrir el documento vinculado en una nueva ventana o pestaña del navegador:
<a href="https://todoinfoinfo.blogspot.com/" target="_blank">Visit todoinfoinfo.blogspot.com!</a>
URL absolutas frente a URL relativas
Los dos ejemplos anteriores utilizan una URL absoluta (una dirección web completa) en el atributo.href
Ejemplo
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>
Enlaces HTML - Usar una imagen como enlace
Para usar una imagen como enlace, simplemente coloque la etiqueta dentro de la etiqueta:<img>
<a>
Ejemplo
<a href="default.asp">
<img src="smile.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Enlace a una dirección de correo electrónico
Utilice dentro del atributo para crear un enlace que abra el programa de correo electrónico del usuario (para permitirle enviar un nuevo correo electrónico): mailto:
href
Ejemplo
<a href="mailto:someone@example.com">Send email</a>
Botón como enlace
Para usar un botón HTML como enlace, debe agregar algo de código JavaScript.
JavaScript le permite especificar lo que sucede en ciertos eventos, como un clic en un botón:
Ejemplo
<button onclick="document.location='default.asp'">HTML Tutorial</button>
Títulos de enlaces
El atributo especifica información adicional sobre un elemento. La información se muestra con mayor frecuencia como texto de información sobre herramientas cuando el mouse se mueve sobre el elemento.title
Ejemplo
<a href="https://todoinfoinfo.blogspot.com/html/" title="Go to todoinfoinfo.blogspot.com HTML section">Visit our HTML Tutorial</a>
Más información sobre las URL absolutas y las URL relativas
Ejemplo
Utilice una URL completa para enlazar a una página web:
<a href="https://todoinfoinfo.blogspot.com/html/default.asp">HTML tutorial</a>
Ejemplo
Vínculo a una página ubicada en la carpeta html del sitio web actual:
<a href="/html/default.asp">HTML tutorial</a>
Ejemplo
Vínculo a una página ubicada en la misma carpeta que la página actual:
<a href="default.asp">HTML tutorial</a>
Resumen del capítulo
- Usar el elemento para definir un vínculo
<a>
- Usar el atributo para definir la dirección del vínculo
href
- Utilice el atributo para definir dónde abrir el documento vinculado
target
- Utilice el elemento (dentro) para utilizar una imagen como enlace
<img>
<a>
- Utilice el esquema dentro del atributo para crear un vínculo que abra el programa de correo electrónico del usuario
mailto:
href
Etiquetas de enlace HTML
Tag Description
- <a> Defines a hyperlink