Enlaces locales

Cómo construir enlaces en HTML cuyo destino sean otras páginas dentro del mismo sitio web.

Como hemos dicho, un sitio web esta constituido de páginas interconexas, que se relacionan mediante enlaces de hipertexto. Para abordar el estudio dividimos la materia por los distintos tipos de enlaces que nos podemos encontrar, atendiendo al tipo de destino. En el capitulo anterior vimos cómo enlazar distintas secciones dentro de una misma página.

En este artículo nos pondremos con otros tipos de enlaces, a los que hemos llamado "Enlaces locales". Se trata de un tipo de enlace mucho más común en el día a día del desarrollo. De hecho, es el tipo de enlace que más se produce en lo general. Estos enlaces locales nos permiten relacionar distintos documentos HTML que componen un sitio web. Gracias a los enlaces locales podremos convertir varias páginas sueltas en un sitio web completo, compuesto de varios documentos.

Para crear este tipo de enlaces, hemos de usar la misma etiqueta A que ya conocemos, de la siguiente forma:

<a href="archivo.html">contenido</a>

Rutas de los enlaces

Hacer un enlace en si no es para nada complejo. No requiere muchas explicaciones con lo que ya conocemos del manual de HTML, sin embargo hay que abordar con detalle un tema importante: las rutas de los enlaces. Como rutas nos referimos al destino del enlace, o sea, lo que ponemos en el atributo "href" y es importante que nos paremos aquí porque nos puede dar algunos problemas al desarrollar, sobre todo para las personas que puedan tener menos experiencia en el trabajo con el ordenador.

Por regla general, para una mejor organización, los sitios suelen estar ordenados por directorios. Estos directorios suelen contener diferentes secciones de la página, imágenes, scripts, estilos... Es por ello que en muchos casos no nos valdrá con especificar el nombre del archivo, sino que tendremos que especificar además el directorio en el que nuestro archivo.html esta alojado.

Nota: Si habéis trabajado con MS-DOS o Linux por línea de comandos no tendréis ningún problema para comprender el modo de funcionamiento. Tan solo, para los usuarios de Windows hay que tener cuidado en usar la barra "/" en lugar de la contrabarra "", pues las contrabarras usadas en Windows para separar componentes de la ruta no se deben usar nunca al especificar rutas en HTML.

Para aquellos que no saben como mostrar un camino de un archivo, aquí van una serie de indicaciones que os ayudaran a comprender la forma de expresarlos. No resulta difícil en absoluto y con un poco de practica lo haréis prácticamente sin pensar.

  1. Hay que situarse mentalmente en el directorio en el que se encuentra la página donde vamos a crear el enlace.
  2. Si la página destino está en el mismo directorio que el archivo desde donde vamos a enlazar podemos colocar simplemente el nombre del archivo de destino, ya que no hay necesidad de cambiar de directorio.
  3. Si la página de destino está en una carpeta o subdirectorio interior al directorio donde está el archivo de origen, hemos de marcar la ruta enumerando cada uno de los directorios por los que pasamos hasta llegar al archivo de destino, separándolos por el símbolo barra "/". Al final obviamente, escribimos el nombre del archivo destino.
  4. Si la página destino se encuentra en un directorio padre (superior al de la página del enlace), hemos de escribir dos puntos y una barra "../" tantas veces como niveles subamos en la arborescencia hasta dar con el directorio donde esta emplazado el archivo destino.
  5. Si la página se encuentra en otro directorio no incluido ni incluyente del archivo origen, tendremos que subir como en la regla 3 por medio de ".." hasta encontrar un directorio que englobe el directorio que contiene a la página destino. A continuación haremos como en la regla 2. Escribiremos todos los directorios por los que pasamos hasta llegar al archivo.

Se verá mejor enseguida con unos ejemplos.

Imagina que tienes la siguiente estructura de carpetas y archivos. La que aparece en la siguiente imagen.

Estructura de directorios de web ejemplo

1) Para hacer un enlace desde index.html hacia yyy.html:

<a href="seccion1/paginas/yyy.html">ir a yyy.html</a>

2) Para hacer un enlace desde xxx.html hacia yyy.html:

<a href="../seccion1/paginas/yyy.html">Ir (también) a yyy.html</a>

3) Para hacer un enlace desde yyy.html hacia xxx.html:

<a href="../../seccion2/xxx.html">Ir ahora a xxx.html</a>

Enlazar con una página diferente, pero en una sección interna

Los enlaces locales pueden, a su vez, apuntar ya no a la página en general sino más precisamente a una sección concreta. Este tipo de enlaces resultan ser un híbrido de interno y local. La sintaxis es de este tipo:

<a href="archivo.html#seccion">contenido</a>

Como para los enlaces internos, en este caso hemos de marcar la sección con un ancla:

<a name="seccion"></a>

Hasta aquí todo lo que necesitas saber sobre enlaces dentro del mismo sitio web. Aunque aún nos quedan por ver otros tipos de enlaces. En el siguiente artículo analizaremos los enlaces externos, los enlaces a direcciones de correo y los que llevan a archivos para descarga.

Autor

Rubén Alvarez

Rubén es doctor en química y programador aficionado con experiencia en PHP.

Compartir

Comentarios

Tino

01/6/2004
Hola!!
En primer felicitaros por la magnífica página que teneis!Gracias a ella estoy aprendiendo mucho.
Y en segundo lugar decir que no entiendo muy bien lo de los enlaces locales....no como funcionan,sino que si tienes el enlace dentro del mismo directorio yo le tengo que poner toda la ruta("c:documents&settings...")
para que salte desde la pag. principal.Debe haber alguna manera más sencilla,verdad!?Me podría ayudar alguién.Es que no encuentro la forma de hacerlo.
Gracias y saludos a todos.

PAUL

23/5/2005
hola amigo primero felicitarlos por el manual y despues al grano este es algo muy tonto pues es que tngo problemas para ubicar archivos imagenes y esas cosas para hacer un enlace me pues aver si me hacen el favor y me dicen como se podria colocar esta direccion en html:
C:Documents and SettingsAll Users.WINDOWSDocumentosMis imágenesImágenes de muestra.jpeg y asi lo mismo para un archivo .zip o de otro tipo gracias les agradeceria la ayuda
ah soy nuevo en esto asi que por eso tan tonta pregunta

Lorenzo de Jesus

09/8/2005
Mi comentario seria es que esta muy bien la página web, porque tiene la informacion necesaria que deseo los felicito de mi parte a los autores de esta web.

atte

lorenzo de jesus

nagui

03/3/2006
guau me parecio ese manual muy chevere pues yo tengo ganas de aprender a diseñar en web y creo que lo sitado por este fue super. para los que me quieran ayudar en mi formacion please escribanme chaooo
desde galapa atlantico colombia

EVARISTO

21/11/2009
ENLACES
BUEN ARTÍCULO.Comprendí, pero aún me fallan los enlaces.

raper10

19/10/2010
tengo una duda de enlaces locales
me esta costando trabajo entender el punto numero 3 y el 4 de los consejos si fuera posible me podrias explicar un poco mas detallado grs.

pd. excelente sitio web y excelente monotematico

John Edward Torres Páez

08/6/2013
Inserción de imagenes
Estimados amigos gracias por su guia
Dios los Bendiga
C&D

SO-JUM

19/5/2015
Atributo target
Hola!!! soy DardoyHuracan ( el que va lento pero sigue erre que erre) enhorabuena por vuestro sitio que es una caña , estoy con los enlaces y descubierto el atributo target que sirve para que cuando naveguen por el pedazo web que estoy haciendo se abra el contenido en otra página por ejemplo

<a target="_blank" href="enamorado de Desarrolloweb">COntenido</a>

Espero no haberme equivocao , saludos a todos!!!

DuendeHidroponico

31/1/2016
Enlaces internos y Notepad++
Hola!
He tenido un problema tonto pero quiero compartirlo por si alguien esta aprendiendo HTML y le pasa algo parecido.
Si usáis Notepad++ no hace falta que guardéis los archivos con extensión HTML porque Notepad++ ya se encarga de ello siempre y cuando uséis como lenguaje predeterminado HTML .Si lo hacéis de manera manual cuando escribáis la ruta acordaros de como hacerla:
"nombre del archivo.html.html" y si lo hemos guardado sin especificar html sería asi "nombre del archivo.html"
Parece una tontería pero Notepad++ siempre le da extensión a un archivo de manera automática en base al lenguaje que hayamos elegido no sé si otros editores hacen lo mismo ( con el Bloc de notas esto no pasa) .

Saludos a todos !