No. 13 de 22 de articulos. HTML5

Enlaces

La etiqueta <a>, sirve para definir y crear un hiperenlace, el cual permite realizar enlaces del documento web con otros documentos o recursos disponibles.

Por defecto los navegadores suelen visualizar los enlaces con una serie de colores predefinidos, aunque estos se pueden cambiar.

Los enlaces no visitados se visualizan normalmente con el color azul, los enlaces visitados con el color purpura y por último los enlaces activos mediante el color rojo.

Por defecto al pulsar sobre un enlace, el contenido al cual se está accediendo se ha de mostrar en la misma ventana del navegador, sustituyendo el documento web actual por el que se quiere acceder.

La sintaxis para esta etiqueta con todos sus atributos es la siguiente:

<a href=”valor” hreflang=”valor” media=”valor” rel=”valor” target=”valor” type=”valor”>Texto enlace</a>

Entre los atributos a destacar que tiene la etiqueta se encuentran los siguientes:

href: este atributo permite establecer la URL en la que se encuentra el documento el cual se quiere enlazar, con el documento web. Se puede especificar una URL absoluta, relativa o un ancla “enlace” en el mismo documento.

Si se realiza un enlace en el mismo documento a un objeto concreto se ha de utilizar como identificador del objeto el nombre del mismo que se haya proporcionado mediante el atributo “id”.

Las posibles formas de sintaxis para definir esta etiqueta con el atributo href son las siguientes:

<a href=”URL Absoluta”>Texto del enlace</a>
<a href=”URL Relativa”>Texto del enlace</a>
<a href=”Marcador en el mismo documento”>Texto del enlace</a>

hreflang: este atributo permite establecer el lenguaje del documento que se está enlazando, aunque no realiza ninguna función especial en los navegadores, puede ser utilizado por los motores de búsqueda para establecer el idioma.

La sintaxis para definir esta etiqueta con el atributo hreflang es la siguiente:

<a href=”URL” hreflang=”Código de lenguaje” ></a>

El código de lenguaje se puede consultar utilizando la siguiente dirección de internet:

http://www.w3schools.com/tags/ref_language_codes.asp

rel: el atributo sirve para especificar la relación existente entre el documento web y el documento con el que se está realizando el enlace. El atributo es obligatorio y se ha de incluir.

La sintaxis para definir esta etiqueta con el atributo rel es la siguiente:

<link href=”URL” hreflang=”Código Lenguaje” rel=”valor”></link>

Entre los posibles valores que se pueden aplicar al atributo rel se encuentran los siguientes:

Rel Descripción
alternate Especifica la relación del documento con una versión alternativa del mismo. (Impresora, Espejo, Traducida, Etc.)
author Especifica la relación del enlace con el autor del documento con el que se enlaza.
bookmark Especifica la URL que se utiliza como dirección permanente para los marcadores de los programas navegadores.
help Especifica que el enlace tiene relación con un documento de ayuda.
license Especifica que el enlace es a la información de copyright sobre el documento web.
next Especifica que el documento web, es parte de una serie de documentos, e indica que el documento que enlaza es el siguiente en la serie.
prefetch Sirve para especificar desde el documento web que se está cargando, cual es el próximo documento web que se ha de cargar, de esta forma el navegador solicita una petición de cache, cargándose posteriormente la página más rápidamente.
prev Especifica que el documento web, es parte de una serie de documentos, e indica que el documento que enlaza es el anterior en la serie.
search Especifica que el enlace es a la utilidad de búsqueda en el documento.
nofollow Utilizado normalmente para especificar a los motores de búsqueda que no han de seguir el enlace.
noreferrer Especifica que no se han de enviar referencias sobre la procedencia del enlace.
tag Establece una etiqueta o palabra clave para el documento actual.

type: Sirve para especificar el tipo MIME[1] del documento con el que se está realizando el enlace. Se pueden consultar los tipos mime en la siguiente dirección:

http://www.iana.org/assignments/media-types

La sintaxis para definir esta etiqueta con el atributo types es la siguiente:

<a type=”ValorMime”>Texto del enlace</a>

Entre los tipos se puede encontrar el de hoja de estilos como es “text/css”, o el de texto plano “text/plain”, etc.

media: este atributo se ha modificado bastante en esta última versión del lenguaje, y aunque nos centraremos posteriormente más en el mismo, inicialmente servirá para indicar el tipo de dispositivo para el cual se está realizando el enlace.

La sintaxis para definir esta etiqueta con el atributo media es la siguiente:

<a href=”valor” hreflang=”valor” rel="Valor" type="Valor” media="valor">Texto Enlace</a>

Entre los posibles valores de dispositivos que encontramos para el atributo media, se encuentran los siguientes:

Media Descripción
all Valor por defecto, especifica todo tipo de dispositivos.
aural Sirve para especificar que el dispositivo para el que se enlaza es un sintetizador de voz.
braille Especifica un dispositivo de tipo braille.
handhelp Especifica un dispositivo de mano, de pantalla pequeña o ancho de banda limitado.
projection Especifica un dispositivo de tipo projector.
print Especifica un dispositivo de impresión.
screen Especifica un dispositivo de pantalla de pc.
tty Especifica un dispositivo de tipo teletipo, que utiliza caracteres de tamaño fijo.
tv Especifica un dispositivo de tipo televisión.

Como se ha indicado anteriormente el atributo tiene muchas más opciones en las que se profundizaran en las mismas a lo largo del desarrollo del temario.

target: el atributo permite especificar el destino por defecto para todos los enlaces y formularios del documento web.

La sintaxis para definir la etiqueta con el atributo target es la siguiente:

<a href=”valor”” target=”valor”>Texto del enlace</a>

Entre los posibles valores que se le pueden aplicar al atributo target, encontramos los siguientes:

target Descripción
_blank Especifica que el destino sea una nueva ventana del navegador, o una nueva pestaña.
_self Por defecto. Abre el destino en el mismo lugar donde se haya realizado el clic.
_parent Abre el destino en un marco asociado.
_top Abre el destino ocupando todo el cuerpo de la ventana.
framename Abre el destino en el marco del cual se especifica el nombre.

Los siguientes ejemplos muestran el uso de la etiqueta <a> en conjunto con los atributos comentados anteriormente, se muestra el uso de la etiqueta realizando enlaces dentro del propio documento, a documentos externos html y a recursos externos como pueden ser archivos de imagen, pdf, email, etc. Lógicamente para que su funcionamiento sea adecuado los recursos a los cuales se enlaza han de existir.

Enlaces internos en el documento
<!DOCTYPE HTML>
<html>
<head>
<title>Ejemplos Etiqueta a</title>
<meta charset="utf-8" />
<meta name="author" content="Jose Saez"/>
<meta name="description" content="Ejercicios y prácticas"/>
</head>
<body>
<p>Ejercicios de programación HTML5</p>
<p>
<a href="#Parrafo1">Enlace Al Primer Párrafo</a><br/>
<a href="#Parrafo2">Enlace Al Segundo Párrafo</a><br/>
<a href="#Parrafo3">Enlace Al Tercero Párrafo</a><br/>
</p>
<p id="Parrafo1">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos espécimen. No sólo sobrevivió 500 años, sino que también ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenían pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</p>
<p id="Parrafo2">Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo insertándole humor y cosas por el estilo).</p>
<p id="Parrafo3">Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raíces en una pieza clásica de la literatura del Latín, que data del año 45 antes de Cristo, haciendo que este adquiera más de 2000 años de antigüedad. Richard McClintock, un profesor de Latín de la Universidad de Hampden-Sydney en Virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos textos del latín, descubrió la fuente indudable. Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por Cícero, escrito en el año 45 antes de Cristo. Este libro es un tratado de teoría de éticas, muy popular durante el Renacimiento. La primera linea del Lorem Ipsum, "Lorem ipsum dolor sit amet..", viene de una línea en la sección 1.10.32</p>
<p><a href="http://aprendoencasa.com">Visite Aprendoencasa.com</a></p>
</body>
</html>

En este ejercicio se realiza el enlace con tres identificadores, situados en cada uno de los párrafos mediante el atributo global “id”, para realizar los enlaces como valor del atributo href, se ha de especificar el id asignado a cada párrafo precedido del símbolo “#”.

El resultado que se ha de obtener ha de ser similar al que se muestra en la siguiente imagen:

image

 

Enlaces a documentos web externos relativos y absolutos

Al definir los enlaces, se puede especificar la ruta absoluta a los mismos, o una ruta relativa teniendo en cuenta el documento actual. En el siguiente ejemplo se muestra el uso de dichas rutas mostrando enlaces, a sitios web que se encuentran fuera del lugar donde está almacenado el documento y otros enlaces que muestran rutas relativas desde la posición actual del documento a otros documentos ubicados en el mismo sitio de alojamiento.

 

<!DOCTYPE HTML>

<html>
<head>
<title>Ejemplos Etiqueta a</title>
<meta charset="utf-8" />
<meta name="author" content="Jose Saez"/>
<meta name="description" content="Ejercicios y prácticas"/>
</head>
<body>
<p>Ejercicios de programación HTML5</p>
<p>Enlace a documento web situado en un sitio externo</p>
<p><a href="http://aprendoencasa.com">Visite Aprendoencasa.com</a></p>
<p>Enlaces a buscadores externos</p>
<p><a href="http://www.google.es" title="Buscador Google">Buscador Google</a></p>
<p><a href="http://www.bing.es" title="Buscador Bing">Buscador Bing</a></p>
<p>Enlaces a documentos con rutas relativas</p>
<p><a href="./imagenes/imagen1.jpg">Imagen 1</a></p>
<p><a href="../documentos/pdfs/texto1.pdf">Texto 1</a></p>
<p><a href="./paginas/segunda.html">Siguiente Página</a></p>
</body>
</html>

El resultado del ejercicio ha de ser similar al que se muestra en la imagen siguiente:

image

Enlaces a correo electrónico, ftp

El siguiente ejemplo muestra el uso de realiza un enlace a una dirección de correo electrónico, aunque el enlace sea a una dirección de correo electrónico, para que el mensaje sea enviado se requiere que el usuario realice esta acción, ya que este tipo de enlaces abren el programa de correo electrónico para enviar el mensaje. Los desarrolladores web suelen emplear formularios para el envío de mensajes de correo, con programación en lenguajes como php, asp, javascript, etc.

<!DOCTYPE HTML>
<html>
<head>
<title>Ejemplos Etiqueta a</title>
<meta charset="utf-8" />
<meta name="author" content="Jose Saez"/>
<meta name="description" content="Ejercicios y prácticas"/>
</head>
<body>
<p>Ejercicios de programación HTML5</p>
<p>El siguiente ejemplo muestra el uso de enlaces a correo electronico</p>
<p>Para enviar un mensaje a <a href="mailto:formacion@aprendoencasa" title="envio de email">formacion@aprendoencasa.com</a></p>
<p>Para acceder a una dirección de ftp</p>
<p>El siguiente <a href="ftp://ftp.aprendoencasa.com/archivo.zip">enlace</a> , accede a un archivo en un servidor ftp.</p>
</body>
</html>

El resultado ha de ser similar al que se muestra en la siguiente imagen:

image

 

 


[1] Multipurpose Internet Mail Extensions o MIME (en español “extensiones multipropósito de correo de internet”) son una serie de convenciones o especificaciones dirigidas al intercambio a través de Internet de todo tipo de archivos (texto, audio, vídeo, etc.) de forma transparente para el usuario.

Navegacion SeriesAnterior en la serie...Siguiente en la serie...

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies