Creación de Hipervínculos
Los hipervínculos son elementos básicos muy importantes dentro de HTML ya que nos permite enlazar los diferentes documentos y lograr la navegación que nuestra información requiere, para utilizarlos tenemos el elemento <a> el cual posee los siguientes atributos:
- href: Especifica la dirección o URL del recurso o elemento al que queremos enlazar.
- hreflang: Nos deja determinar el idioma del recurso enlazado.
- media: determina el dispositivo al cual está dirigido el contenido enlazando, esta propiedad es nativa del HTML5.
- rel: Establece el tipo de relación que se tiene con el documento enlazado.
- target: Indica el objetivo en el cual el contenido debe ser mostrado.
- type: Especifica el MIME del recurso enlazado como por ejemplo: image/gif o text/html.
Crear un Hipervínculo externo
Para crear un hipervínculo que nos lleve a un recurso externo en el atributo href debemos iniciar el enlace con http:// de esta forma cuando hagamos click sobre el enlace el navegador cargará la página solicitada.
<!DOCTYPE HTML> <html> <head> <meta name="description" content="Ejemplo Hiperlink"/> </head> <body> I like <a href="http://en.wikipedia.org/wiki/Apples">apples</a> and <a href="http://en.wikipedia.org/wiki/Orange_(fruit)">oranges</a>. </body> </html>
Crear un Hipervínculo relativo
Si nuestro hipervínculo no inicia con http:// entonces el navegador lo interpreta buscando dentro de nuestro directorio local por un recurso que coincida con lo que hayamos enlazado.
<!DOCTYPE HTML> <html> <head> <title>Relativo</title> </head> <body> You can see other fruits I like <a href="fruitlist.html">here</a>. </body> </html>
Crear un hipervínculo interno
Existen ocasiones en las cuales necesitamos incorporar elementos que nos faciliten la navegación dentro de la misma página debido a lo extenso de la misma, para ello podemos utilizar enlaces internos, para lograr esto nos valdremos del atributo id de los tags de forma que al hacer click sobre el hipervínculo nos ubique el tag con el id referenciado, en caso que no exista un id que coincida el navegador deberá buscar el atributo name que coincida.
<!DOCTYPE HTML> <html> <head> <title>Interno</title> </head> <body> Enlace interno <a href="#interno">Click</a>. <p id="interno"> Aquí el contenido interno </p> </body> </html>
El atributo target
Este atributo nos permite elegir dónde vamos a mostrar el recurso enlazado, por defecto al hacer click veremos el contenido en la ventana activa, sin embargo no siempre queremos este comportamiento, veamos las opciones disponibles:
- _blank: Especifica que el nuevo documento abra en una nueva ventana o pestaña.
- _parent: Abre el documento en la ventana padre.
- _self: Abre el documento en la ventana actual, este es el comportamiento por defecto.
- _top: Abre el documento en una ventana completa independientemente de los frames que puedan existir.
- <frame>: Abre el nuevo documento en el frame indicado.
<!DOCTYPE HTML> <html> <head> <meta name="description" content="Ejemplo Hiperlink"/> </head> <body> I like <a href="[url="http://en.wikipedia.org/wiki/Apples"]http://en.wikipedia.org/wiki/Apples[/url]" target = “_blank”>apples</a> and <a href="[url="http://en.wikipedia.org/wiki/Orange_(fruit"]http://en.wikipedia.org/wiki/Orange_(fruit[/url])" target = “_self”>oranges</a>. </body> </html>
Con lo que pudimos ver en este tutorial ya podemos generar diferentes tipos de hipervínculos que nos permitirán tener un control mayor sobre nuestra página y poder construir la navegación adecuada al estándar HTML5.
