HTML - Enlaces e hipervinculos

  »   HTML  »   Tutorial HTML - Enlaces e hipervinculos

El atributo href nombra la conexión hacia otra página web. En realidad es el lugar donde será dirigido el usuario cuando haga click en el enlace o link HTML.

Los links pueden ser:

  • enlaces internos - hacia lugares especificos desde la página(anclas)
  • enlaces locales - hacia otras páginas desde el mismo dominio
  • enlaces globales - hacia otros dominios, fuera de la página web
htmlInterno - href="#nombredelancla"
Local - href="../img/foto.jpg"
Global - href="http://www.tutorialehtml.com/"

HTML - Enlaces de texto

Para fijar el comienzo y el fin de un ancla se puede usar <a> y con su etiqueta de cierre </a>. Escoge el tipo de atributo que necesites, despues escribelo dentro de la etiqueta. El atributo "href" define la pagina que se abrira al pinchar en enlace.

Ejemplo:
html<a href="http://www.tutorialehtml.com/">Tutoriales HTML</a>

Demo

El atributo title

Ya hemos hablado sobre el atributo title, que se puede usar con muchas otras etiquetas. Pero el title de un enlace tiene un especial significado para los enlaces y en especial los enlaces globales. Alguna ves los enlaces desde web externas hacia tu web no tienen mucho texto para describir tu web o simplemente ponen "pincha aqui". El atributi title es muy importante en estos casos en particular, pudiendo proporcionar una (muy) breve descripcion sobre tu pagina.

Pasa con el raton por encima de texto de abajo

html<a href="http://www.tutorialehtml.com/" title="Aprende mas sobre el lenguaje HTML">Click aqui</a>

Demo

HTML - El atributo target

El atributo target le indica al navegador si este necesita abrir una nueva página en una nueva ventana o en la misma ventana.

target="_blank"Abre una nueva ventana
_self"Abre una página en la misma ventana
_parent"Abre una nueva página en la ventana padre del link
_top"OAbre la ventana en el mismo navegador, cancelando todos los frames

El siguiente ejemplo muestra cómo una nueva página puede ser abierta en una ventana del navegador. De esta manera podemos permanecer en la página del tutorial y abrir una nueva página de navegación.

html<a href="http://www.google.com/" target="_blank" >Google </a>

Demo

HTML - Anclas

Es utilizado para vincular dos secciones de la misma página. Así que necesitamos darle un nombre a esas secciones, pero para esto es necesario darle un vistazo al siguiente ejemplo.

html<h1>HTML - Hipertexto de referencia / href<a name="top"></a></h1>

<h2>HTML - Links de texto<a name="text"></a></h2>

<h2>HTML - Texto E-mail<a name="email"></a> </h2>

Demo

HTML - Hipertexto de referencia / href

HTML - Links de texto

HTML - Texto E-mail

Despues de aplicar un name a los elementos de arriba, vamos a tener que crear los enlaces que van a unirlos.
html<a href="#top">Ir al principio</a>
<a href="#text">Aprende sobre links de texto</a>
<a href="#email">Aprende sobre direcciones e-mail</a>

Demo

HTML - Link de E-mail

Hacer un vínculo de E-mail es muy simple. Si quieres que alguien te escriba un email la mejor manera será poner a su dispocisión un link con tu email y un tema preetablecido.

html<a href="mailto:someone@exemple.com?subject=Questions">Enviar preguntas por correo</a>

Demo

En caso de que el tema no sea suficiente y desees agregar algo mas al contenido del email, puedes hacerlo con la ayuda del siguiente código:
html<a href="mailto:someone@exemple.com?subject=Questions&body=Escribe aquí si tienes preguntas" >Enviar preguntas por correo</a>

Demo

HTML - Links de descarga

Un link de descarga es igual que un link normal de texto. El problema surge cuando queremos descargar una fotografía. La mejor solución es utilizar una miniatura con un link, pero hablaremos mas sobre este problema en la siguiente lección.

html<a href="http://www.tutorialehtml.com/htmlT/text.zip">Descargar documento de texto</a>

HTML - Links de suscripcion a youtube

Cuando vemos un video en una pagina de youtube, normalmente tenemos el boton para suscribirnos, justo al lado. Pero que pasa cuando el video se inserta en nuestra propia web. Podemos simular un boton muy parecido de la siguiente forma. Sientete libre de hacer click para ver como funciona.

html<a href="https://www.youtube.com/channel/UCpGSnR65YSFi9mdNPCQSJyA?sub_confirmation=0" target="_blank">Suscribete al canal</a>

Demo

HTML - Link por defecto/link base

Usa la etiqueta "base" en el interior del elemento <head> para establecer un link base. Esto es necesario en caso de que tengas un link en algún lugar el cual no funciona o en caso de que el destino no exista más. El link base envia al usuario hacia la dirección especifica. Normalmente, envia al usuario a la página de inicio, pero también se acepta otra página, eventualmente una página hecha con este proposito.

html<head>
	<base href="http://www.tutorialehtml.com/">
</head>