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 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. |
| 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.
<!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="https://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:
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="https://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:
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:
Gracias por vuestra visita, espero veros de nuevo, un saludo…!!!
