Busca en el BLOG

lunes, 17 de diciembre de 2018

HIPERVÍNCULOS EN HTML.

¿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

https://www.youtube.com/c/pablitoinformatico  https://www.pablitoinformatico.net http://www.pablitoinformatico.net/ https://blog.pablitoinformatico.net


No hay comentarios:

Publicar un comentario