Modularizacion – Modulo de HiperTexto

Elemento <a></a>

Este elemento sirve para situar “enlaces” en nuestro documento, los enlaces son la parte principal de los documentos html, xhtml, etc. Ya que gracias a ellos se pueden realizar las conexiones o encadenamientos entre documentos, facilitando así la navegación entre los documentos de forma cómoda y eficaz. La etiqueta que se utiliza es a, la cual viene del termino ingles “anchor”, es decir “ancla”. Los enlaces que se insertan en un documento, no tienen porque apuntar o señalar a un documento xhtml o html, ya que pueden señalar también a una imagen, a otro servidor, a un archivo de texto, o cualquier tipo de archivo que bien sea soportado por el navegador para su visualización en el mismo o bien para su descarga desde el navegador.

[ad#468x60aec2009mime]

Estructura de un enlace

El siguiente ejemplo muestra un enlace utilizando la etiqueta correspondiente, el cual apunta a una página web.

<a href=”http://www.aprendoencasa.com”>Cursos Online</a>

En el ejemplo anterior en primer lugar encontramos la apertura del elemento a e incluido dentro de esta etiqueta se encuentra el primer atributo del elemento, en este caso el atributo es href, el cual contiene la URL del elemento que se quiere enlazar, a continuación encontramos el cierre de la etiqueta de inicio y el texto “Cursos Online” el cual es el que se vera en el navegador y al pulsar sobre el mismo iremos al lugar que especifica href, a este texto descriptivo que aparece en el enlace se le denomina “texto del ancla” (“anchor text”). Por ultimo encontramos la etiqueta de cierre del elemento a. Esta no es la única estructura de un en enlace pero si una de las más básicas, más adelante se trataran mas tipos de estructuras según donde apunten o señalen.

¿Qué es una URL?

En el apartado anterior se ha comentado el termino URL, el cual significa Uniform Resource Locator, o lo que es lo mismo Localizador Uniforme de Recursos, el URL es un conjunto de caracteres con un formato estándar que se utiliza para nombrar recursos por su localización. Existe un URL único para cada uno de los recursos disponibles en internet. Es decir el URL permite diferencia cada uno de los recursos en internet individualmente, de esta forma el navegador es capaz de localizarla y visualizar correctamente.

El URL esta formado por una combinación del ordenador que proporciona el recurso, el directorio o carpeta donde se encuentra, el nombre del archivo y el protocolo que se ha de utilizar para recuperar los datos. La sintaxis general de una URL seria la siguiente:

Protocolo://servidor/ruta

Supongamos la siguiente URL:

http://www.aprendoencasa.com/index.php

El protocolo “http://” es el proceso que ha de seguir el programa navegador para acceder al recurso, en este ejemplo el protocolo seria http (hipertext transfer protocol), si fuera una pagina segura como la de un banco, ayuntamiento, etc el protocolo tambien podria ser https:// el cual indica que es el mismo protocolo anterior con cifrado, es decir dependiendo del recurso se utiliza un protocolo u otro. A continuación se encuentra el servidor, el cual se puede indicar mediante su ip o su dns (nombre), en este caso el servidor que seria basicamente el ordenador donde se encuentra ubicado el recurso es www.aprendoencasa.com , y por ultimo se encuentra en la URL la ruta que dependiendo de donde se encuentre ubicado el recurso en el servidor podra ser mas o menos complejo. En este caso se esta accediendo a la pagina index.php, la cual se encuentra en el directorio o carpeta raiz del servidor.

[ad#386x280aec2009]

Enlaces relativos y absolutos

Los enlaces pueden hacer referencia a recursos ubicados en el propio servidor o en un servidor distinto, según esto se podrian calificar como internos y externos, pero tambien pueden ser relativos o absolutos. Supongamos que estamos situados en la siguiente pagina: http://www.aprendoencasa.com/index.php y queremos crear un enlace a esta otra pagina http://www.aprendoencasa.com/cursos/windows.php . el siguiente ejemplo muestra como podria quedar un enlace de tipo relativo:

<a href=”cursos/windows.php”>Curso de Windows</a>

Mientras que si el enlace fuera de tipo absoluto seria el siguiente:

<a href=”http://www.aprendoencasa.com/cursos/windows.php”>Curso de Windows</a>

En el primer caso referente al enlace relativo, al estar situados en la pagina principal http://www.aprendoencasa.com/ , para realizar la referencia al recurso simplemente se especifica como ruta el directorio donde se encuentra el mismo y el nombre del recurso, se omite el servidor ya que se toma por defecto que se esta situado en dicha posición. Por el contrario el segundo ejemplo especifica la ruta completa al servidor y al recurso. En ambos casos el enlace funcionaria perfectamente, de hecho algunos buscadores recomiendan que los enlaces sean absolutos ya que eso facilita la indexación del recurso en los buscadores.

Enlaces a correo electrónico

En el caso anterior se comentaba como realizar un enlace bien absoluto o relativo a una pagina web, si el caso fuera realizar un enlace a una dirección de correo electrónico el atributo href cambia ya que se ha de especificar el protocolo a utilizar y la dirección de correo a la cual se quiere enlazar. El ejemplo siguiente muestra como seria un enlace a una dirección de correo:

<a href=”mailto:formacion@aprendoencasa.com”>formacion@aprendoencasa.com</a>

Como se puede observar el protocolo a utilizar en este caso cambia ya que se utiliza mailto, el cual hará que al pulsar sobre el enlace se abra el programa de correo electrónico dependiendo de la configuración de su sistema. También se ha de comentar que se recomienda utilizar como texto a visualizar en el navegador la misma dirección de correo a la cual se enlaza en vez de un texto descriptivo, de esta forma si el navegador no pudiera representar el enlace, el usuario que ve el enlace puede saber cual es la dirección de correo. Por otra parte actualmente y debido al correo basura (spam), no es recomendable enlazar a direcciones de correo, ya que existen programas que se encargan de recorrer paginas en busca de estas direcciones y posteriormente realizar envíos de correo basura. Alternativas a utilizar un enlace a direcciones de correo serian simplemente visualizar la dirección sin enlace o representarla con una imagen que contenga el texto de la dirección de correo.

Enlaces a la misma pagina

Otro tipo de enlace es el que sirve para acceder a recursos ubicados dentro de la misma pagina, este tipo de enlaces viene determinado por tener dos partes diferenciadas en la construcción del mismo. Por una parte existe lo que se denomina marca, que básicamente es situar un enlace que representa una marca en los lugares del documento a los que se quiere acceder, se ha de comentar que lógicamente esta marca no es visible para el usuario, de esta forma el creador del recurso puede establecer posiciones en la pagina, sobre todo si esta es extensa, lo que permite crear una especie de índice con enlaces para acceder a las posiciones. Para crear una marca se utiliza el atributo id o name de la etiqueta a. el ejemplo siguiente muestra una marca que se situaría por ejemplo al principio del documento:

<a id=”Inicio”>Inicio documento</a>

También se puede utilizar la representación corta de la etiqueta, quedando la marca anterior de la siguiente forma:

<a id=”Inicio”/>Inicio documento

Con el enlace anterior se establece una marca de posición (ancla), la cual es accesible a través de un enlace en cualquier parte del documento, supongamos que al final del documento queremos establecer un enlace al inicio del mismo, el enlace a crear seria el siguiente:

<a href=”#Inicio”>Inicio documento</a>

Como se puede observar el atributo href, hace referencia a la marca creada anteriormente, y para indicar que es una marca en el propio documento se antepone el símbolo #.

Atributos

La etiqueta a dispone de varios atributos que se puede utilizar junto a la misma. Uno de ellos es el atributo title, el cual sirve para especificar una descripción del enlace sobre el que apunta la etiqueta a, la mayoría de navegadores utilizan este atributo de forma que al pasar el ratón por encima del enlace, automáticamente se muestra un letrero el cual visualiza el texto que se haya escrito en el atributo title, el siguiente ejemplo muestra un enlace con el atributo:

<a href=”http://www.google.es” title=”Buscador Google”>Google</a>

Otros atributos disponibles son rev y rel, los cuales se utilizan para definir el tipo de relación existente entre el enlace y el recurso al cual esta apuntando el mismo, en el ejemplo siguiente se muestra el uso del atributo rel, el cual expresa la relación del enlace con el siguiente documento de la serie:

<a href=”http://www.aprendoencasa.com/pagina2.php” title=”Segundo capitulo” rel=”next”>Segundo capitulo</a>

Los valores posibles para los atributos rel y rev vienen definidos en la especificación del w3c para el lenguaje xthml, algunos posibles valores para los mismos serian los siguientes:

Alternate : especifica una versión alternativa del documento.

start : indica que es el primer recurso de una colección de los mismos.
next : siguiente recurso al actual.
prev : recurso anterior al actual.

up : referencia al recurso superior en una estructura jerárquica de los mismos.
contents: referencia a un recurso que sirve como tabla de contenidos.
index: indica un recurso que provee un índice.
glossary: referencia a un recurso que provee un glosario de términos.
copyright: referencia la declaración de derechos del recurso.
chapter: indica un recurso que es un capitulo de una colección.
section: referencia un recurso que pertenece a una sección en una colección.
subsection : referencia una sub sección dentro de una colección.
appendix: referencia un apéndice en una colección.
help: indica que el recurso enlaza a un recurso que ofrece ayuda.
icon: referencia a un recurso que representa un icono.

Si desea comprobar todos los posibles valores para estos atributos puede consultar la pagina del consorcio W3C.

Hay un caso especial de valor para el atributo rel, el cual se denomina nofollow, que es un valor que actualmente es muy popular debido al auge de los blogs. Este valor fue propuesto por los buscadores para indicar que el enlace que lo tenga puesto no debe ser considerado para el calculo del posicionamiento en los resultados de búsqueda de los buscadores. El objetivo primordial de este valor es la lucha contra los spammers que insertan sus propios enlaces en los blogs que permiten comentarios para promocionar sus sitios web.

[ad#386x280aec2009]

El siguiente ejemplo muestra una pagina en la cual se muestra el código correspondiente a enlaces de diferente tipo:

<!DOCTYPE html PUBLIC “-//W3C//DTD XTHML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”es” xml:lang=”es”>
<html>
<head>
<title>Practica para a – www.aprendoencasa.com</title>
</head>
<body>
<h2>Creación de marca de inicio de pagina</h2>
<a id=”Principio” name=”Principio”></a>
<h2>Enlace relativo a la pagina de inicio del sitio</h2>
<a href=”/”>Inicio</a>
<h2>Enlace absoluto a una pagina concreta</h2>
<a href=”http://www.aprendoencasa.com/” title=”Pagina inicial del portal de formacion”>Inicio del sitio</a>
<h2>Enlace a una dirección de correo electrónico</h2>
<a href=”mailto://formacion@aprendoencasa.com” title=”Solicite más información en esta dirección de correo electrónico”>Más información por Email</a>
<h2>Enlace relativo a otra pagina</h2>
<a href=”ejemplos/ejemplo2.htm” title=”Segundo ejemplo” rel=”next”>Segundo ejemplo de pagina</a>
<h2>Enlace a una dirección de FTP</h2>
<a href=”ftp://ftp.aprendoencasa.com/cursos/windows.zip” title=”Archivo comprimido del curso de Windows”>Windows en formato zip</a>
<h2>Enlace con atributo nofollow</h2>
<a href=http://cursos.aprendoencasa.com title=”Cursos y trucos” rel=”nofollow”>Trucos y cursos</a>
<h2>Enlace a la marca de inicio creada anteriormente</h2>
<a href=”#Inicio” title=”volver al principio de la pagina”>Principio de la página</a>
</body>
<html>

El resultado final al abrir el documento en su navegador seria el que se muestra en la siguiente imagen:

enlaces

La etiqueta corresponde a un elemento de línea, con lo cual no se producen saltos en los párrafos al finalizar las etiquetas. A continuación se muestran las características del elemento <a> (ancla):

Elemento
<a> … </a>
Atributos comunes
Atributos básicos, de internacionalización (i18n), eventos y foco.
Atributos específicos
name=”texto” , este atributo permite especificar un nombre para ser enlazado desde otros enlaces.
Href=”url” , indica la url del recurso al cual se quiere enlazar.
Hreflang=”código_lenguaje” , código de idioma del recurso al que se enlaza.
Type=”tipo de recurso” , permite especificar el tipo del recurso al que se enlaza.
Rel=”tipo de relación” , especifica la relación del recurso actual con el recurso que se quiere enlazar.
Rev=”tipo de relación” , especifica la relación del recurso enlazado con el documento actual.
Charset=”conjunto de caracteres” , especifica la codificación del recurso enlazado.
Tipo de elemento
Elemento en línea
Descripción
Permite crear enlaces a recursos de diferente tipo.
Modulo al que pertenece la etiqueta
Modulo de Hipertexto

Etiquetas de Technorati: ,,,,

[ad#klikir468x60]

[ad#privalia468x60]

Enviar comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

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

ACEPTAR
Aviso de cookies