Volver a la portada de Duiops
Volver al
Web de Duiops


Portada | Fundamentos del HTML | Enlazando las páginas | Enlaces relativos

 

La sintaxis del HTML ] Haciendo documentos HTML ] Formateando el texto ] Añadiendo listas ] Enlazando las páginas ] Tablas ] Marcos ] Formularios ]

 


Atrás Arriba Siguiente

 

Enlaces relativos

Imagina a varias personas dentro de distintas habitaciones en una casa, y tú estás dentro de ella. Si quieres decir dónde está cada una de ellas, no hace falta decir el domicilio completo con la habitación, basta el nombre de esta última.

Los enlaces relativos nos permiten enlazar páginas situadas en un mismo servidor. Estos archivos pueden estar en el mismo directorio o cada uno de ellos en un directorio distinto. En todo caso, hay métodos para enlazar más relativamente que absolutamente estos últimos archivos.

Si estás pensando enlazar una página con otra dentro de un sitio WEB y ambas residen en un mismo directorio, debes de poner un valor a HREF como el siguiente:

Pulsa <A HREF="intro.htm">aquí</A> para ir la introducción del curso de HTML

Pulsa aquí para ir la introducción del curso de HTML

Las cosas se complican un poco cuando quieres enlazar un documento en otro directorio dentro del mismo servidor. Vamos a suponer que tenemos en nuestro directorio pincipal un directorio llamado ejemplos donde tenemos situado un archivo llamado ej1.htm. Hay que situar el código que se indica a continuación:

NOTA: Los siguientes 3 enlace es sólo ejemplos, no llevan a ninguna página real

Pulsa <A HREF="ejemplos/ej1.htm">aquí</A> para ver un ejemplo

Pulsa aquí para ver un ejemplo.

El navegador buscará el archivo ej1.htm dentro del directorio ejemplos.

Imagina que es lo contrario, que estás en el directorio ejemplos y que quieres poner un enlace a una página situada en el directorio principal. Hay que poner dos puntos seguidos .. por cada directorio que queramos subir.

Pulsa <A HREF="../index.htm">aquí</A> para volver a la página principal

Pulsa aquí para volver a la página principal

Ambos tipos pueden combinarse. Imagina que estamos en el directorio ejemplos, y que queremos enlazar una página llamada prueba1.htm situada en un directorio llamado pruebas situado al mismo nivel de ejemplos, es decir, subdirectorio del directorio principal. El código para enlazarlo sería:

Pulsa <a HREF="../pruebas/prueba1.htm">aquí</A> para ver el primer ejemplo

Pulsa aquí para ver el primer ejemplo.

Vamos a hacer un ejercicio para que te sientas cómodo con los enlaces relativos.

  1. En tu ordenador, crea un directorio y llámalo web.
  2. Ábrelo, y crea dentro un subdirectorio llamado articulos.
  3. Crea un página web con lo siguiente

  4. <HTML>
    <HEAD>
    <TITLE>Ejemplo de link relativo</TITLE>
    </HEAD>
    <body>

    Esta página aparecerá en el directorio raíz. Si quieres poner un enlace a una página colocada en el subdirectorio artículos, deberias usar un enlace relativo.

    </body>
    </HTML>


  5. Guarda este archivo en el directorio web y llámalo inicio.htm.

Ahora ya tienes una página de inicio dentro del directorio web. Tienes que hacer el enlace relativo del ejercicio.

  1. Abre tu editor HTML

    Codifica la siguiente página:

  2. <HTML>
    <HEAD>
    <TITLE>Ejemplo de artículo</TITLE>
    </HEAD>
    <body>

    Esta página aparecerá en el directorio artículos.

    </body>
    </HTML>


  3. Guarda esta página como articulo1.htm en el directorio articulos.

 

Ahora vamos a añadir un enlace al documento original.

  1. Abre el archivo inicio.htm en tu editor.
  2. Añade la línea de código que se ve en este listado.

  3. <HTML>
    <HEAD>
    <TITLE>Ejemplo de link relativo</TITLE>
    </HEAD>
    <body>

    Esta página aparecerá en el directorio raíz. Si quieres poner un enlace a una página colocada en el subdirectorio artículos, deberias usar un enlace relativo.

    Si haces <A HREF="articulos/articulo1.htm">clic en este link</A> se cargará la página. Este es un ejemplo de link relativo.

    </body>
    </HTML>


  4. Guarda el archivo.

Comprueba tu link en el navegador. Debería cargar articulo1.htm (si ya tenías la página index.htm cargada en el navegador, tienes que pulsar el botón "actualizar")

Si quieres poner un enlace para que vuelva al inicio, haz lo siguiente.

  1. Abre el archivo articulo1.htm en tu editor.
  2. Añade el siguiente enlace relativo.

  3. <HTML>
    <HEAD>
    <TITLE>Ejemplo de artículo</TITLE>
    </HEAD>
    <body>

    Esta página aparecerá en el directorio artículos.

    <P>Si haces <A href="../inicio.htm">clic</A> aquí volverás a la página de inicio. También esto es un link relativo.

    </body>
    </HTML>


  4. Guarda el archivo, y prueba el enlace.

Los links relativos son simples y potentes. Hay que usar siempre esta forma de enlace cuando estés dentro de un mismo servidor, a no ser que quieras poner un enlace a otro sitio de Internet. Aquí tienes la página inicio.htm con una línea de ejemplo añadida de un enlace absoluto.

<HTML>
<HEAD>
<TITLE>Ejemplo de link relativo</TITLE>
</HEAD>
<body>

Esta página aparecerá en el directorio raíz. Si quieres poner un enlace a una página colocada en el subdirectorio artículos, deberias usar un enlace relativo.

<P>Si haces <A href="articulos/articulo1.htm">clic en este link</A> se cargará la página. Este es un ejemplo de link relativo.

<P>Si quieres visitar el web de AMD, sólo tienes que hacer <A href="http://www.amd.com">clic</A> aquí.

</body>
</HTML>

 

NOTA

Cuando dos sitios web contienen un enlace uno al otro y viceversa, se dice que tienen enlaces recíprocos o un intercambio de enlaces. Este concepto es importante porque promociona el tráfico web entre los dos sitios, y es un aspecto muy importante en la mercadotecnia de los mismos (mira el capítulo "Mercadotecnia de los sitios web").

 

Atrás Arriba Siguiente


 © 1997-2009 Duiops (http://www.duiops.net)
 Prohibida la reproducción parcial o total de los textos o las imágenes.

 Para comentarios, usar las direcciones e-mail de contacto