HTML5: Enlaces

Los enlaces se encuentran en casi todas las páginas web. Los enlaces permiten a los usuarios hacer clic en el 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.
Cuando mueva el mouse sobre un enlace, la flecha del mouse se convertirá en una pequeña mano.
Nota: un enlace no tiene que ser texto. Puede ser una imagen o cualquier otro elemento HTML.

Enlaces HTML - Sintaxis

En HTML, los enlaces se definen con la etiqueta <a>. La sintaxis es la siguiente:

  <a href="url">link text</a>

  <a href="https://aprendedesarrollo-web.blogspot.com.es">Visita nuestra web</a>

El atributo href especifica la dirección de destino (https://aprendedesarrollo-web.blogspot.com.es) del enlace.
El texto del enlace es la parte visible (Visita nuestra web).
Al hacer clic en el texto del enlace, se lo enviará a la dirección especificada.

Enlaces locales

El ejemplo anterior usó una URL absoluta (una dirección web completa).
Se especifica un enlace local (enlace al mismo sitio web) con una URL relativa (sin http: // www ....).

  <a href="html_images.asp">Imagen HTML</a>

Colores de enlace HTML

Por defecto, un enlace aparecerá así (en todos los navegadores):

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

Puedes cambiar los colores predeterminados, usando CSS:

  <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>

Enlaces HTML: el atributo de destino

El atributo target especifica dónde abrir el documento vinculado.
El atributo target puede tener uno de los siguientes valores:
  • _blank: abre el documento vinculado en una nueva ventana o pestaña
  • _self: abre el documento vinculado en la misma ventana / pestaña en la que se hizo clic (es el valor predeterminado)
  • _parent: abre el documento vinculado en el marco principal
  • _top: abre el documento vinculado en todo el cuerpo de la ventana
  • framename: abre el documento vinculado en un marco con nombre
Este ejemplo abrirá el documento vinculado en una nueva ventana / pestaña del navegador:

  <a href="https://aprendedesarrollo-web.blogspot.com.es" target="_blank">Visita nuestra web</a>

Consejo: si su página web está bloqueada en un marco, puede usar target = "_ top" para salir del marco:

  <a href="https://aprendedesarrollo-web.blogspot.com.es" target="_top">Visita nuestra web</a>

Enlaces HTML - Imagen como enlace

Es común usar imágenes como enlaces:

  <a href="mi_web.html">
    <img src="smiley.gif" alt="HTML tutorial">
  </a>

Títulos de enlace

El atributo title especifica información adicional sobre un elemento. La información se muestra con más frecuencia como un texto de información sobre herramientas cuando el mouse se mueve sobre el elemento.

  <a href="https://aprendedesarrollo-web.blogspot.com.es" title="Ir a la web">Visita nuestra web</a>

Enlaces HTML - Crear un marcador

Los marcadores HTML se utilizan para permitir a los lectores saltar a partes específicas de una página web.
Los marcadores pueden ser útiles si su página web es muy larga.
Para hacer un marcador, primero debe crear el marcador y luego agregarle un enlace.
Cuando se hace clic en el enlace, la página se desplazará a la ubicación con el marcador.

Ejemplo

Primero, crea un marcador con el atributo id:

  <h2 id="C4">Capítulo 4</h2>

Luego, agregue un enlace al marcador ("Saltar al Capítulo 4"), desde dentro de la misma página:

  <a href="#C4">Saltar al capítulo 4</a>

O bien, agregue un enlace al marcador ("Saltar al Capítulo 4"), desde otra página:

  <a href="html_demo.html#C4">Saltar al capítulo 4</a>

Enlaces Externos

Las páginas externas se pueden referenciar con una URL completa o con una ruta relativa a la página web actual.
Este ejemplo usa una URL completa para vincular a una página web:

  <a href="https://aprendedesarrollo-web.blogspot.com.es" title="Ir a la web">Visita nuestra web</a>

Este ejemplo vincula a una página ubicada en la carpeta html en el sitio web actual:

  <a href="/html/default.asp">HTML tutorial</a>

Este ejemplo vincula 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

  • Usa el elemento <a> para definir un enlace.
  • Usa el atributo href para definir la dirección del enlace.
  • Usa el atributo target para definir dónde abrir el documento vinculado.
  • Usa el elemento <img> (dentro de <a>) para usar una imagen como enlace.
  • Usa el atributo id (id = "value") para definir marcadores en una página.
  • Usa el atributo href (href = "# value") para vincular al marcador.

¡Ponte a prueba con ejercicios!

Comentarios

Publicar un comentario

Entradas populares de este blog

HTML5: Elementos de bloque HTML y elementos en línea

Cada elemento HTML tiene un valor de visualización predeterminado según el tipo de elemento que sea. El valor de visualización predeterminado para la mayoría de los elementos es bloque o en línea. Elementos de nivel de bloque Un elemento de nivel de bloque siempre comienza en una nueva línea y ocupa todo el ancho disponible (se extiende hacia la izquierda y hacia la derecha todo lo que puede). Esto es un elemento de bloque  <div>   < div > Hello < /div > Elementos a nivel de bloque en HTML: < address > < article > < aside > < blockquote > < canvas > < dd > < div > < dl > < dt > < fieldset > < figcaption > < figure > < footer > < form > < h1 > - < h6 > < header > < hr > < li > < main > < nav > < noscript > < ol > < output > < p > < pre > < se...
Leer más

HTML5: Iframes

Un iframe se usa para mostrar una página web dentro de una página web. Sintaxis iframe Un iframe HTML se define con la etiqueta  <iframe> :   < iframe  src =" URL " > < /iframe > El atributo  src  especifica la URL (dirección web) de la página de marco en línea. Iframe - Establecer altura y ancho Use los atributos  height  y  width  para especificar el tamaño del iframe. Los valores de los atributos se especifican en píxeles de forma predeterminada, pero también pueden estar en porcentaje (como "80%").   < iframe  src ="demo_iframe.htm"  height ="200"  width ="300" > < /iframe > O puede usar CSS para establecer el alto y el ancho del iframe:   < iframe  src ="demo_iframe.htm"  style ="height:200px;width:300px;" > < /iframe > Aunque lo más idoneo es establecer tanto el alto como el ancho mediante código CSS externo. Iframe - Eliminar el borde ...
Leer más

HTML5: Estilos HTML - CSS

Imagen
Estilo HTML con CSS CSS significa Hojas de Estilo en Cascada. CSS describe cómo los elementos HTML se mostrarán en la pantalla, papel o en otros medios. CSS ahorra mucho trabajo. Puede controlar el diseño de múltiples páginas web a la vez. CSS se puede agregar a los elementos HTML de 3 maneras: En línea: utilizando el atributo de estilo en elementos HTML. Interno: utilizando un elemento  <style>  en la sección <head> Externo: utilizando un archivo CSS externo. La forma más común de agregar CSS es mantener los estilos en archivos CSS separados. Sin embargo, aquí utilizaremos el estilo en línea e interno, porque es más fácil de demostrar y más fácil de probar. Aprenderemos mucho más sobre CSS en un futuro tutorial más adelante. CSS en línea Un CSS en línea se usa para aplicar un estilo único a un solo elemento HTML. Un CSS en línea usa el atributo de estilo de un elemento HTML. Este ejemplo establece el color del texto del elemento  <h1...
Leer más

HTML5: Comentarios

Las etiquetas de comentarios se utilizan para insertar comentarios en el código fuente HTML. Etiquetas de comentarios HTML Puede agregar comentarios a su fuente HTML usando la siguiente sintaxis:   <!-- Escribe tu comentario aqui --> Observe que hay un signo de admiración (!) En la etiqueta de apertura, pero no en la etiqueta de cierre. Nota: el navegador no muestra los comentarios, pero pueden ayudarlo a documentar su código fuente HTML. Con los comentarios, puede colocar notificaciones y recordatorios en su HTML:   <!-- Esto es un comentario -->   < p > Esto es un párrafo. < /p >   <!-- Recuerda añadir más información aquí --> Los comentarios también son excelentes para la depuración de HTML, ya que puede comentar las líneas de código HTML, una a la vez, para buscar errores:   <!-- Do not display this at the moment   <img border="0" src="pic_mountain.jpg" alt="Mountain">   --> ¡Ponte a...
Leer más