Enlaces en HTML (VI)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Tipos de enlaces (I).-

Podemos clasificar los links según el destino al que nos lleven al pinchar sobre ellos, clasificación que además sigue el proceso histórico de la etiqueta <A>, tal como explicamos someramente el el capítulo introductorio de este manual. De acuerdo pués con este concepto podemos estudiar:

* Enlaces dentro de una misma página:

Podemos usar la etiqueta <A> para implementar enlaces que nos lleven a diferentes partes o secciones de la página en que están incluidos, pudiendo con ellos navegar dentro de una página. Este tipo de enlaces recibe el nombre genérico de anchors o anclas, y para establecerlos necesitamos crear dos elementos diferentes.

Por un lado, necesitamos fijar el punto de la página donde va a ir el enlace, cosa que conseguimos escribiendo en ese punto la siguiente etiqueta:

<A NAME="nombre_anclaje">texto/imagen_de_referencia</A>

Y por otro lado, necesitamos crear el texto o imagen que nos va a llevar al punto definido anteriormente, lo que conseguimos mediante el código:

<A HREF="#nombre_anclaje">texto_explicativo</A>

OJO: Notad la almohadilla (#) justo antes del nombre del anclaje. Hay que ponerla siempre en este tipo de enlaces.

Una consideración: si fijamos un anclaje introduciendo dentro de las etiquetas <A>...</A> un texto o imagen de referencia, estos presentarán el aspecto normal de un enlace (azul subrayado, con borde, etc), cosa que no nos puede interesar por chocar con el diseño de la página. Incluso puede ser que no deseemos que aparezca ningún elemento diferenciador visible en el punto de anclaje. Esto se resuelve fácilmente, ya que podemos escribir la pareja de etiquetas de enlace sin ningún elemento en su interior, de la forma:

<A NAME="nombre_anclaje"></A>

Vamos a ver un ejemplo. Establecemos en esta página un anclaje en el inicio de la misma, justo al lado del título del capítulo, y lo hacemos mediante una pareja de etiquetas sin contenido de referencia interior, para que el usuario no vea nada que le indique de antemano que ahí hay un anclaje. El código a usar será:

<a name="inicio"></a>
Tipos de enlaces.-

Y ahora, en el punto en que nos encontramos de la página, introducimos el enlace que nos lleva al anclaje, mediante:

<a href="#inicio">Ir al inicio</a>

que no da:

Ir al inicio

Si pulsáis sobre este enlace veréis que nos lleva justo a donde está el anclaje, de tal forma que si hay suficiente contenido en la página, ese punto aparecerá justo en la primera línea de contenido de la ventana del navegador.

Podemos usar tantos anclajes como necesitemos en una página, teniendo siempre la precaución de dar un nombre diferente (valor de la propiedad NAME) a cada uno de ellos. Por este método podemos por ejemplo construir un índice inicial en nuestra página, que nos lleve directamente a las diferentes secciones de la misma.

* Enlaces a otra página de nuestro sitio web:

Aunque los anclajes pueden ayudarnos a navegar por una página, necesitamos también crear enlaces que nos permitan acceder a otras páginas de nuestro sitio web, para poder así navegar entre ellas. En este caso no hace falta establecer un anclaje de referencia, bastando con usar las etiquetas de un enlace simple:

<A HREF="ruta_pagina" .....>texto_descriptivo</A>

donde ruta_pagina es la ruta local de acceso a la página según la estructura de directorios del servidor.

Normalmente tendremos estructurado nuestro sitio web en una serie de carpetas: una o varias para las páginas web, una para las imágenes, otra para los ficheros JavaScript, etc.

Si la página a la que queremos acceder se encuentra en la misma carpeta que la que hace la llamada ( en la que estamos situando el enlace), bastará con poner su nombre completo directamente como ruta:

<a href="enlaces_5.html" target="_blanck">página anterior</a>

que no da:

página anterior

Si la página se encuentra en una subcarpeta de la que contiene a la actual, la forma de acceso será HREF="subcarpeta/pagina". Como ejemplo, mirad primero en la siguiente imagen mi estructura de directorios local:

En este entorno, si esta página está en la carpeta "enlaces" y quiero llamar a una página que está dentro de la subcarpeta "ejemplos", el código a emplear será:

<a href="ejemplos/ejemplo_1.html" target="_blank">ejemplo 1</a>

que nos da:

ejemplo 1

Si la página a enlazar se encuentra en una carpeta a un nivel superior en la jerarquía del sitio, el enlace será del tipo:

<A HREF="../carpeta/pagina.html">pagina 1</A>

etc, etc. Deberemos usar un conjunto de caracteres "../" por cada nivel que queramos subir en la jerarquía de carpetas. Normalmente, si usáis un editor HTML como Homesite, FrontPage o Dreamweaver, cuando establezcáis un enlace a otra de vuestras páginas él se encargará de poneros la ruta correcta.