MDN will be in maintenance mode on Thursday September 21st, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

Un sitio web consta de varios archivos: archivos de texto, código, hojas de estilo, contenido multimedia, y así sucesivamente. Cuando estás construyendo un sitio web, primero necesitas organizar todos estos archivos en tu ordenador local utilizando cierta lógica, asegúrate de que estos archivos pueden comunicarse entre sí, y de que todos tus contenidos están correctos antes de subirlos a un servidor. Manejo de Archivos analiza algunas cuestiones que debes de tener en cuenta para que puedas establecer una estructura de archivos coherente para tu sitio web.

¿En qué lugar de tu ordenador debería estar tu sitio Web?

Cuando estás trabajando en un sitio web local en tu propio ordenador, debes mantener todos los archivos relacionados en una sola carpeta que refleja la estructura de archivos de la página web publicada en el servidor. Esta carpeta puede ubicarse en cualquier lugar que quieras, pero debes ponerlo en algún lugar donde puedas encontrarlo fácilmente, tal vez en el escritorio, en la carpeta de inicio, o en la raíz de tu disco duro.

  1. Elije un lugar donde almacenar tu proyecto Web. Ahí, crea una nueva carpeta llamada proyectos_web (o similar). Es ahí donde ubicarás todos tus proyectos Web.
  2. Dentro de esta primera carpeta, crea otras carpetas para almacenar tu primer proyecto Web. Lo llamaremos: sitio-prueba (o algo más imaginativo).

Mayúsculas, minúsculas y espacios

Notarás que en este artículo, te dimos la tarea de crear tus carpetas con los nombres completamente en minúsculas y sin espacios. Esto es porque:

  1. Muchas computadoras, particularmente servidores, son sensibles a mayúsculas y minúsculas . Por ejemplo, si pones una imagen en tu sitio asi: sitio-prueba/MiImagen.jpg, y luego en un archivo diferente tratas de invocarla como sitio-prueba/miimagen.jpg, ésta no se mostrará.

  2. Los Navegadores, servidores Web y los lenguajes de programación no manejan bien los espacios en blanco. Por ejemplo, si usas espacios en el nombre de archivo, algunos sistemas podrían creer que en realidad se trata de dos nombres de archivo. Algunos servidores reemplazan el espacio en los nombres con "%20" (código para el espacio en las URIs), rompiendo todos tus enlaces. Es mejor separar las palabras con guiones, en lugar de guiones bajos: mi-archivo.html contra mi_archivo.html.

Por estas razones, es mejor que tengas como hábito escribir el nombre de tus archivos y carpetas en minúsculas y sin espacios, al menos hasta que entiendas bien cada cosa que haces, y así te evitarás algunos problemas.

¿Qué estructura deberá tener tu Sitio Web?

Ahora, veamos qué estructura deberia tener nuestro sitio de prueba. Las cosas más comunes que tendremos en cualquier proyecto de sitio web que creamos son un archivo HTML índice y carpetas que contienen imágenes, archivos de estilo y archivos de script. Vamos a crear estos ahora:

  1. index.html: Este archivo contendrá generalmente el contenido de tu página web inicial, es decir, el texto y las imágenes que la gente ve cuando accede por primera vez a tu sitio. Usando el editor de texto, crea un nuevo archivo llamado index.html y guárdarlo justo dentro de tu carpeta sitio-prueba.
  2. Carpeta images: Esta carpeta almacenará todas las imágenes que vas a usar en tu sitio. Crea una carpeta llamada images dentro de tu carpeta sitio-prueba.
  3. Carpeta styles: Esta carpeta tendrá todos tus códigos CSS usados para darle estilo a tus contenidos (por ejemplo, establecer el color de tus textos y de fondos). Crea una carpeta llamada styles, dentro de tu carpeta sitio-prueba.
  4. Carpeta scripts: Esta carpeta tendrá todos tus códigos JavaScript usados para darle interactividad y funcionalidad a tu sitio (por ejemplo. botones que cargan datos cuando hacen clic). Crea una carpeta llamada scripts, dentro de tu carpeta sitio-prueba.

Nota: En ordenadores con Windows, podrías tener problemas al ver el nombre de los archivos, porque Windows tiene una opción molesta llamada Ocultar las extensiones de archivo para tipos de archivo conocidos que por defecto está activada. Generalmente puedes desactivarlo por medio del Explorador, ve a Opciones de Carpeta... pestaña Ver, desactiva la casilla Ocultar las extensiones de archivo para tipos de archivo conocidos, Luego clic en Aceptar. Para mayor información específica sobre la versión de tu Windows, ¡has una búsqueda en la Web!

Ruta de Archivos

Para hacer que los archivos se comuniquen entre sí, tienes que proporcionarles una ruta entre ellos básicamente es como un archivo se comunica con otro. Para demostrar esto, vamos a insertar un poco de HTML en nuestro archivo index.html, y hacer que se vea la imagen que eligió en el artículo "¿Cuál será la apariencia de tu sitio Web?"

  1. Copia la imagen que seleccionaste antes dentro de tu carpeta images.
  2. Abre su archivo index.html, e inserta la siguiente línea en el archivo exactamente como se muestra. Por ahora no te preocupes de lo que esto significa — más adelante veremos las estructuras con más detalle en la serie.
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>My test page</title>
      </head>
      <body>
        <img src="" alt="My test image">
      </body>
    </html> 
  3. La línea <img src="" alt="My test image"> es un código HTML que inserta una imagen dentro de nuestra página. Necesitamos decirle a nuestro HTML dónde está la imagen. La imagen esta dentro de la carpeta images, que está en el mismo directorio que el archivo index.html. Para llamar la imagen desde tu archivo HTML, necesitarás ponerle como ruta images/nombre_archivo_imagen. Por ejemplo, la imagen se llama firefox-icon.png, entonces la ruta será images/firefox-icon.png.
  4. Inserta la ruta del archivo dentro del código HTML entre las comillas del código src="".
  5. Guarda tu archivo, ahora carga tu página en el navegador (doble click en el archivo). ¡Deberías ver tu nueva página mostrando tu imagen!

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

Algunas reglas generales para la ruta de Archivos:

  • Para enlazar un archivo que esta en la misma carpeta que el archivo HTML, solamente usa el nombre del archivo, Ejemplo. mi-imagen.jpg.
  • Para hacer referencia a una subcarpeta, escribe en la ruta: primero el nombre de la carpeta y le agregas una diagonal, Ejemplo. carpeta/mi-imagen.jpg.
  • Para enlazar un archivo que está en el directorio anterior al que contiene al archivo HTML, deberás escribir dos puntos (..). Asi por ejemplo, si index.html está dentro de una subcarpeta de sitio-prueba y mi-imagen.png está dentro de sitio-prueba, podrías referenciar tu archivo mi-imagen.png desde index.html usando ../mi-imagen.png.
  • Puedes hacer muchas combinaciones así como, Por Ejemplo: ../subcarpeta/otra-subcarpeta/mi-imagen.png.

Por ahora, eso es todo lo que necesitas saber.

Nota: El sistema de archivos de Windows tiende a usar la diagonal invertida (\), no la diagonal normal (/), Por Ejemplo. C:\windows. Esto no es importante para HTML — aunque desarrolles tus sitios web en Windows deberás usar diagonales normales (/) en tu código.

¿Qué más hay que hacer?

Por ahora es todo. Tu estructura de carpetas debería verse algo así:

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

Etiquetas y colaboradores del documento

 Última actualización por: israel-munoz,