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:
htmlInterno - href="#nombredelancla"
Local - href="../img/foto.jpg"
Global - href="http://www.tutorialehtml.com/"
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>
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>
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>
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>
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>
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>
html<a href="mailto:someone@exemple.com?subject=Questions&body=Escribe aquí si tienes preguntas" >Enviar preguntas por correo</a>
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>
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>
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>