¿Que es un hipervínculo?.
Los hipervínculos, vínculos, enlaces, links o hiperenlaces son las relaciones que se establecen entre una parte de la web y otra que puede ser dentro de la misma página, hacia otra parte de la web o de internet. Estos enlaces pueden dirigirse desde imagenes y texto hacia documentos, fotos, documentos, descargas, envío de correo electrónico.
¿Como usar los hipervínculos en HTML?.
Para usar los hipervinculos en HTML se usa la etiqueta <a> </a>, también es válido para HTML5. La etiqueta <a> tiene varios atributos, los más usados son Href y Target. Estos enlaces pueden ser de tres tipos:
- Enlaces internos: Son los que dirigen a una parte concreta de una misma página web, hacia el principio o el final de la mismo por ejemplo. Un enlace interno quedaría de la sigueinte manera: <a href="#ancladelaweb">. El ancla web hace referencia al punto donde se activa el hipervínculo y el destino del mismo. <a name="Inicio_Web">Inicio</a> --> <a href="#Inicio_Web">Texto del enlace</a>. En rojo aparecen el ancla de destino e inicio.
- Enlaces globales: Son aquellos que dirigen hacia internet, fuera de nuestra web, es decir a otros dominios. <a href="http://www.sylcon.net>Visita mi web</a>.
- Enlaces locales: Son aquellos que apuntan a distintas partes de nuestra propia web o dominio. <a href="../index.html>Texto del enlace<a/>
Atributos de etiquetas <a> de hipervínculos HTML.
Los atributos más conocidos como ya hemos dicho antes son href y target. Target tiene varias opciones pero la más utilizada es _blank que hace que nuestros links se abran en una nueva ventana o pestaña del explorador. <a href="http://www.sylcon.net/" target="_blank">Visita nuestra Web</a>. Con href podemos también podemos generar enlaces de descarga y correo.
- Enlace de correo email: <a href="mailto:info@sylcon.net">Enviame un correo</a>
- Enlace de descarga: <a href="https://www.sylcon.net/tutoriales/tutorial.pdf>Descarga aquí el tutorial>/a>
Existen más etiquetas y funcionalidades, si quereis saber más os dejaré enlaces a web que profundizan más en este tema.
Hipervínculos desde imágenes.
Todos los enlaces que hemos visto hasta ahora son enlaces que apuntan desde un texto de la web. <a href="http//:www.sylcon.net/">Texto del hipervínculo</a>. Si quisieramos que el elemento que enlazara fuera una imagen solo tendriamos que colocar entre <a> y </a> dicha imagen. <a href="direccion"><img src="tu imagen" border="0"></a>.
Para terminar comentaros que otro atributo muy utilizado es el title, con el conseguimos que nos aparezca una frase al pasar el cursor por encima del hipervínculo. <a href="http://www.sylcon.net/" title="Mantenimiento informático">Sylcon Microsystem</a>
Hipervínculos a carpetas superiores de mi web.
Casi se me olvida, cuando tenemos varias carpetas en nuestro sitio web y queremos enlazar a contenido que está en carpetas superiores debemos hacer lo siguiente: <a href="../index.html" target="_blank">Empresa</a>. Si hubiera más carpetas quedaría de la siguiente manera: <a href="../html/index.html" target="_blank">Empresa</a>
Más info en estas web tutorialehtml y htmlquick
PIF