Diseñado para ofrecer algunas ideas sobre como los archivos (documentos HTML (lenguaje de marcas hipertextual), imágenes, etc.) pueden ser distribuidos entre los directorios y cómo los recursos pueden referirse unos a otros desde esas diferentes ubicaciones. También haremos una pequeña referencia acerca de cómo los archivos son ubicados en el servidor.
La forma en que se organiza un sitio web depende en gran medida de su tipo y de la forma en que prefieras hacerlo, pero aquí proporcionaremos algunos modelos que puedes usar para organizar tu sitio web y hacer de cada actualización un trabajo más sencillo. Nuestra recomendación es que crees un directorio principal en tu computadora que contendrá a todos los archivos y subdirectorios del sitio, que posteriormente podrás subir tal como está al servidor.
La primera cosa en que debes pensar es que poner todos los archivos en el directorio raíz puede resultar acertado para un sitio con 5 páginas y 3 imágenes. Pero si debes manejar 20 páginas y 200 imágenes, ese modelo de organización puede tornarse en un problema serio. De modo que lo que puedes hacer, es comenzar a agrupar los archivos de alguna forma y ubicarlos en diferentes directorios para hacer tu sitio un poco más sencillo de administrar y actualizar.
Por ejemplo, digamos que tienes un sitio donde muestras tus ilustraciones: una colección de 5 imágenes diseñadas por ti mismo. Después de pensarlo por un momento, decides que construirás una página para mostrar las imágenes, mas la página de inicio y la página de contacto. Esto suma un total de 3 páginas y 5 imágenes. Como no es mucho, puedes crear esta estructura de directorio que mantendrá a tus archivos bien organizados:
Así es que, has construido tu estructura de directorios con el directorio raíz y su subdirectorio "img", has puesto todas las imágenes en el directorio "img" y todos los documentos HTML en el raíz. Esto funciona bien por los próximos 6 meses durante los cuales continúas creando más ilustraciones. De pronto tienes 100 imágenes y comienzas a darte cuenta de que la estructura de directorios se vuelve obsoleta habiendo ubicado ya cien archivos en un solo directorio.
En este punto, puedes vivir en el desorden o puedes adoptar una nueva estructura de directorios. Por ejemplo, puedes dividir tus imágenes en grupos temáticamente: flores, gente, animales, fantasía y surrealismo. De este modo puedes mostrar todas las imágenes correspondientes a una misma categoría en una sola página (teniendo en cuenta que las imágenes son lo suficientemente pequeñas como para no hacer que la carga de la página dure una eternidad).
Ahora puedes poner cada imagen en su directorio correspondiente, lo cual resultará en un promedio de 20 imágenes por directorio. Y estos directorios pueden aún ser subdivididos (por ejemplo, el directorio "animales" puede contener un subdirectorio llamado "aves").
Justo cuando estabas feliz con tu sitio, tus amigos vienen a pedirte que les des la oportunidad de mostrar sus trabajos en tu sitio, lo cual te resulta una magnífica idea. Pero nuevamente, ¿cómo organizas toda esta información de manera que no termine convirtiéndose en un desastre? bueno, una buena idea es usar el modelo anterior exactamente como está, pero para cada uno de los artistas que expondrá sus trabajos en el sitio. Esto resultará en un directorio para cada artista conteniendo sus imágenes y documento administrados en subdirectorios.
Ahora, puedes continuar agregando y agregando subdirectorios a cada uno de los directorios de los artistas, y combinando estructuras. Nota que esta estructura también puede aplicarse a las secciones de un sitio web en lugar de artistas. Puedes crear la estructura de directorios que mejor te parezca, el objetivo es que te sientas confortable administrando y actualizando los archivos.
Una vez que has elegido la estructura de directorios, puedes comenzar a construir los vínculos. Para construir un vínculo necesitas conocer la dirección del recurso al cual vincularás, de manera que puedas rellenar el atributo "href".
Antes que nada, debes comprender que el directorio "raíz" será representado en los vínculos por la dirección URL (localizador uniforme de recursos) o directorio principal del sitio. Usando ejemplos genéricos, un directorio raíz puede ser representado por "http://www.midominio.com" si tienes tu propio nombre de dominio, o por "http://www.servidor.com/misitio" si no. Esto convertirá la dirección "raíz/img/imagen1.jpg" en "http://www.midominio.com/img/imagen1.jpg" (si eres propietario del nombre de dominio).
Existen dos formas de construir un vínculo: usando URLs completas o usando URIs (identificador uniforme de recursos) relativas (ver Definicion de URI y URL). La forma más simple es usando URL completas. De este modo, simplemente escribes toda la ruta sin tener en cuenta desde dónde estás refiriendo al recurso de destino. Por ejemplo, para referirse al documento con la biografía de Isaac en el tercer ejemplo de estructuras de directorios deberías escribir "http://www.midominio.com/artistas/isaac/bio.html" sin importar desde dónde estás vinculando (es decir, el directorio donde se encuentra el documento conteniendo el vínculo).
Esta forma de vincular funciona bien para vínculos hacia recursos externos (Ubicados en computadoras diferentes) o internamente si posees un nombre de dominio propio, que piensas mantener así, pero supone que decides cambiar tu nombre de dominio o cambiar de un servidor gratuito (http://www.servidorgratuito.com/misitio) a uno pago donde puedes tener un nombre de dominio propio (http://www.midominio.com). Puedes ver fácilmente que tendrás que corregir todos los vínculos, reemplazando el nombre de dominio viejo por el nuevo.
Para evitar este inconveniente puedes hacer uso de URIs relativas. Una URI relativa es parte de una URL completa, y puede ser considerada como la ruta que debes recorrer (a través de los directorios) para ir desde el documento vinculante hasta el recurso de destino. Para hacerlo más claro, demos unos ejemplos basados en el tercer ejemplo de Estructuras de directorios.
Digamos que quieres poner un vínculo a la biografía de Isaac en el documento "artistas.html". Como el documento referente se encuentra ubicado en el directorio "raíz", Comenzaremos desde ahí:
Ahora ya tenemos la ruta. La única cosa que nos queda para obtener la URI relativa, es separar todas estas partes con barras, lo que da como resultado: "artistas/isaac/bio.html". Y ahí tienes el valor de "href".
Tal vez te estés preguntando: ¿cómo voy hacia atrás? la forma de ir hacia atrás es usando el directorio especial "..", que representa al directorio "padre" de un directorio dado. Así que cuando sea que necesites construir una URI relativa y necesites ir "hacia atrás" al directorio anterior, debes usar el directorio "..". Veamos un ejemplo en el que necesitamos insertar un vínculo en mi biografía apuntando a la biografía de Isaac. Una vez más, como el documento referente está ubicado en el directorio "yo", comenzaremos desde ahí.
Después de separar con barras, obtenemos la URI relativa: "../isaac/bio.html".
Existen algunas cosas básicas que debes considerar antes de mover los archivos al servidor. La primera es que debes saber cuál de los directorios en tu servidor actúa como "raíz" para toda la estructura pública de directorios (contenedor de los archivos que podrán ser accedidos por el público). En la mayoría de los servidores gratuitos el directorio raíz es fácil de identificar, porque es el directorio superior, lo que significa que no puedes ir mas arriba desde ahí. Pero cuando pagas un servidor, usualmente tiene una estructura de directorios diferente donde el subdirectorio "public_html" actúa como raíz para tu sitio web. De todos modos, si no puedes identificar qué directorio es el "público", deberías pedir soporte al proveedor del servicio.
La otra cosa a tener en cuenta es qué archivos son considerados por tu servidor como archivos índice (index). Un archivo índice es aquel que se muestra cuando la petición no especifica ningún archivo (por ejemplo, "http://www.midominio.com/" o "http://www.midominio.com/estacarpeta/"). Los archivos índices varían de acuerdo con el servidor pero la mayoría de ellos considera "index.htm" y "index.html" como archivos índice, lo cual es suficiente para comenzar.