lunes, 2 de mayo de 2022

Enlaces HTML

 
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.

Nota: Un enlace no tiene que ser texto. ¡Un enlace puede ser una imagen o cualquier otro elemento HTML!

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>

El texto del enlace es la parte que será visible para el lector.

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 ventana


        Ejemplo

        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

        Un enlace local (un enlace a una página dentro del mismo sitio web) se especifica con una URL relativa (sin la parte "https://www"):

        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>
        Propina: Obtenga más información sobre JavaScript en nuestro Tutorial de JavaScript.


        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>
        Puede leer más sobre las rutas de archivo en el capítulo Rutas de archivo HTML.
        Resumen del capítulo

        • Usar el elemento para definir un vínculo<a>
        • Usar el atributo para definir la dirección del vínculohref
        • Utilice el atributo para definir dónde abrir el documento vinculadotarget
        • 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


        Imágenes HTML

        Las imágenes pueden mejorar el diseño y la apariencia de una página web. Ejemplo < img  src ="pic_trulli.jpg"  alt ="Itali...

        Política de Privacidad
        Este sitio utiliza cookies de Google para analizar el tráfico a este sitio. La información sobre su uso de nuestro sitio se comparte con Google para ese propósito. Acepto Más información