Enlaces locales (a una página del mismo sitio web)

Este tipo de enlaces permiten crear vínculos entre páginas del mismo sitio. La sintaxis no diferirá de lo ya explicado hasta el momento:

<a href="ruta-destino"> texto o imagen </a>

'ruta-destino' será una página/imagen/archivo que estará ubicado en nuestro servidor.

La estructura de todos los archivos que conforman el sitio web estará jerarquizada en una serie de carpetas: una para las páginas HTML, otra para las imágenes, otra para los archivos Javascript, otra con archivos de configuración...

Ejemplo 1

El siguiente ejemplo muestra la estructura de carpetas para el sitio www.luiscanada.com:

Supóngase que nos encontramos en la página www.luiscanada.com/cursos/parrafos.html y consideremos los siguientes ejemplos:

1.- Ir a la página 'listas.html': <a href="listas.html"> Click para ir a las listas </a>

2.- Ir a la página 'ejemplo1.html': <a href="ejemplos/ejemplo1.html"> Ver el ejemplo </a>

3.- Ir a la página 'index.html' de la carpeta 'otros': <a href="../otros/index.html"> Ir a otros </a>

1.- Si la página destino se encuentra en la misma carpeta que la página origen (parrafos.html) bastará con utilizar el nombre directamente.

2.- Si la página está en una subcarpeta de la página origen se deberá especificar la ruta completa desde el punto de partida hasta llegar a la página destino.

3.- Si la página destino se encuentra en una carpeta no incluida ni incluyente de la página origen, deberá retrocederse los niveles necesarios mediante '../' hasta llegar a una carpeta que contenga a la página destino y, a partir de ahí, proceder como en el punto 2.

Ejemplo 2

Enlace desde index.html hacia yyy.html: <a href="seccion1/paginas/yyy.html"> Ir de index a yyy </a>

Enlace desde xxx.html hacia yyy.html: <a href="../seccion1/paginas/yyy.html"> Ir de xxx a yyy</a>

Enlace desde yyy.html hacia xxx.html: <a href="../../seccion2/xxx.html"> Ir del yyy a xxx</a>

Enlazando a una sección concreta de otra página del mismo sitio

Los enlaces locales pueden a su vez apuntar ya no a la página en sí sino más concretamente a una sección específica. Este tipo de enlaces resultan ser un híbrido de interno y local. La sintaxis será del tipo:

<a href="pagina-destino.html#seccion-destino"> contenido </a>

En el código anterior se estaría enlazando a la sección 'seccion-destino' de la página 'pagina-destino.html'. Dicha página se encontraría en la misma carpeta que la página de origen.