Tipos de Enlace – Parte II

Enlaces Locales

Ahora revisaremos los enlaces locales, los cuales se hacen entre páginas del mismo proyecto o sitio web.

Para realizar un enlace a una página que se encuentra en el mismo directorio se pueden utilizar dos tipos de referencias:

  • Referencias absolutas y
  • Referencias relativas.

Referencias absolutas

En las referencias absolutas se indica la dirección completa del documento que deseamos enlazar. Por ejemplo: tenemos un proyecto que se llama Mi_Proyecto y que tiene la siguiente estructura y se encuentra en el disco C: de mi computadora.

archivosruta
Estructura del proyecto con carpetas y sub-carpetas

Y queremos hacer un enlace con la página torio.html. Podemos utilizar referencias absolutas utilizando la siguiente sintaxis:

<a href=”C:\Users\Luis\Documents\Mi_Proyecto\carpeta_A0\carpeta_A0_2\torio.html“><h2>Torio</h2></a>

Donde Torio es el texto de enlace a la página torio.html.

Si Mi_Proyecto fuese un sitio web, en lugar de C: debería utilizar http:\\ y el resto de la ruta de acceso:

<a href=”http:\\Mi_Proyecto.com\carpeta_A0\carpeta_A0_2\torio.html“><h2>Torio</h2></a>

En la siguiente grafica se muestra un enlace a una página local utilizando referencia absoluta.

enlaceabsoluto.1
Fragmento de documento html con referencia absoluta

Esto produce la siguiente salida en el navegador:

enlaceabsoluto-2
Salida del navegador con enlace creado con referencia absoluta.

Aparece el texto Torio, en color y subrayado. Al hacer clic se realizará un enlace con el documento torio.html y aparecerá la información contenida en el mismo. Existe una forma más simple de realizar enlaces cuando el documento a enlazar está en el mismo directorio, y es utilizando referencias relativas.

 

Referencias Relativas

En lugar de utilizar la dirección de toda la ruta, se utiliza una dirección referenciada a partir del documento que origina el enlace. Para más información ver el artículo: Referencias a archivos.

La regla general es que debemos subir de nivel en la ruta hasta encontrar una carpeta que incluya una ruta hacia abajo hasta el archivo que queremos enlazar.

El ejemplo más sencillo es cuando el archivo de enlace y el de destino están en la misma carpeta.

En este caso la referencia seria simplemente:

<a href=”nombre del archivo”>Contenido</a>

Por ejemplo, tenemos dos documentos sodio.html y potasio html que están en la misma carpeta y deseamos hacer un enlace desde sodio a potasio.

enlacerel-1
Enlace de dos documentos que se encuentran en la misma carpeta. sodio.html y potasio.html.

En este caso el enlace se haría en el documento sodio y se vería así:

<a href=”potasio.html”>Potasio</a>

enlacerel-2
Fragmento de documento con enlace a un documento ubicado en la misma carpeta.

En el ejemplo anterior donde hacíamos un enlace al documento torio que se encuentra en una carpeta que esta un nivel arriba de indexA.html tendríamos la siguiente estructura:

<a href=”..\ \carpeta_A0_2\torio.html”><h2>Torio</h2></a>

En este caso ..\ se utiliza para indicar que se está subiendo un nivel en la ruta, y a partir de allí se describe la ruta hacia abajo hasta el archivo separando cada carpeta con un \.

Esta forma de expresar la referencia es mucho más compacta y genera el mismo resultado.

enlacerel-3
Diagrama que muestra la ruta de enlace desde indexA.html a torio.html.
enlacerel-4
Fragmento de documento del enlace a torio,html
enlaceabsoluto-2
Apariencia del enlace creado.
enlacerel-5
Documento que aparece al hacer clic en el enlace creado.

 

 

 

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s