HTML – Uso de Hipervinculos – Enlaces (links)

En este video-tutorial os explico como utilizar los hipervinculos (tambien llamados hiperenlaces, enlaces, vinculos o links), de las 3 formas más usuales, pero antes vamos a  explicar que son.

El hiperenlace, es un elemento web que se utiliza para llamar a otros recursos, es decir, podemos enlazar a otras webs o partes de estas, archivos, correo, etc… Es una parte fundamental de una página web, ya que de esta manera podemos darle más dinamismo y organización a la misma.

Una caracteristica, (si no se ha utilizado css) es que suele venir subrayado y de color azul cuando el link no ha sido visitado o subrayado y púrpura cuando si lo ha sido. Si se pone el ratón por encima y está bien parametrizado, posiblemente aparezca un título (title) como texto informativo.

Cabe decir que los hipervinculos o enlaces, no son exclusivos para html o para la web.

Una vez dejado claro que son y como funcionan los hipervinculos, vamos al tutorial.

Empezamos creando un link a una página externa, en este caso utilizamos:

<a href=”http://www.vertutoriales.com”>Ver Videotutoriales para aprender HTML</a>

recordar usar el http:// para que no tenga problemas y sepa que el enlace va hacia el exterior. En el ejemplo utilizamos el parametro target. Target puede tomar varios valores, pero los más usados son _self y _blank, el primer valor es para que la web a la que llama, se abra en la misma ventana. El segundo valor es para que abra una nueva ventana del navegador.

Si no ponemos el http://, se tomará como principio, la raiz de la carpeta desde donde se llama, de esta manera, poniendo

<a href=”tutorial.html”>Ver pagina de tutorial para aprender HTML</a>

<a href=”tutorial.zip”>Descargar tutorial para aprender HTML</a>

En el primer ejemplo, llamaría al archivo tutorial.html que debe de estar alojado en la misma carpeta o en la ruta que se le indique (./tutoriales/tutorial.html abriría en una subcarpeta), lo cual abriría la nueva página en el navegador. En el segundo ejemplo, hace exactamente lo mismo, llamar a tutorial.zip, pero en este caso al ser un archivo, el navegador lo tomaría como una descarga, y lanzaría el asistente de descarga de archivos.

El siguiente ejemplo que se vé en el videotutorial es:

<a href=”mailto:tutor@dkreativo.es”>Mandar correo al tutor del tutorial</a>

Esta etiqueta con el parametro mailto: sirve para mandar una orden a nuestro gestor de correo que tengamos instalado, así podemos facilitar el envio de un correo electrónico al visitante.

Ya para terminar, los dos últimos ejemplos del videotutorial:

<a href=”#tutorial”>Ir a ver el tutorial</a>

<a name=”tutorial”>Tutorial</a>

En este caso, se utiliza la etiqueta <a> para llamar a una parte de la página en la que estamos, el primer ejemplo es donde aparecerá el enlace, y la segunda debemos ponerla donde queramos que se posicione el navegador.

Me quedaría por explicar como utilizar vinculos con imagenes, y lo voy a poner aquí ya que en el videotutorial no lo explico por que lo introduciré en el uso de imágenes y elementos gráficos en html. Os pongo el ejemplo para que veais que no tiene ninguna complicación:

<a href=”link.html”><img  src=”imagen.jpg” ></a>

Como veis la única diferencia es que en vez de poner el texto de la etiqueta, utilizamos una imagen. No tiene más dificultad.

Ya para terminar, recordaros que este es el videotutorial nº3 de HTML, que teneis una pequeña iniciación de HTML, el uso de tablas, y alguna documentación sobre etiquetas y colores.

Ya sabeis que si teneis alguna duda, podeis dejar un comentario y os resolveré la duda lo más rapido posible.

Un saludo!