A continuación, veamos qué estructura debería tener tu sitio de prueba. Las cosas más comunes que tendrás en cualquier proyecto de sitio web que crees son un archivo de índice HTML y directorios para contener imágenes, archivos de estilo y archivos de script. Crea estos ahora:

1. index.html: Este archivo generalmente tendrá el contenido de tu página de inicio, es decir, el texto y las imágenes que las personas ven cuando visitan tu sitio por primera vez. Usando tu editor de texto, crea un nuevo archivo llamado index.html y guárdalo dentro de tu directorio pruebasitio.
2. Directorio images: Este directorio contendrá todas las imágenes que utilices en tu sitio. Crea un directorio llamado images, dentro de tu directorio pruebasitio.
3. Directorio styles: Este directorio contendrá el código CSS que se utiliza para aplicar estilo al contenido (por ejemplo, configurar el texto y los colores de fondo). Crea un directorio llamado styles, dentro de tu directorio pruebasitio.
4. Directorio scripts: Este directorio contendrá todo el código JavaScript utilizado para agregar funcionalidad interactiva a tu sitio (por ejemplo, botones que cargan datos cuando se hace clic en ellos). Crea un directorio llamado scripts, dentro de tu directorio pruebasitio.

Rutas de archivo

Para que los archivos se comuniquen entre sí, debes proporcionar una ruta de archivo entre ellos, básicamente una ruta, para que un archivo sepa dónde está otro. Para demostrarlo, insertaremos un poco de HTML en nuestro archivo index.html y haremos que muestre la imagen que elegiste en el artículo ¿Cómo se verá tu sitio web?

1. Copia la imagen que elegiste anteriormente en tu directorio images.
2. Abre tu archivo index.html e inserta el siguiente código en el archivo exactamente como se muestra. Por ahora, no te preocupes por lo que significa todo esto; veremos las estructuras con más detalle más adelante en la serie.

1. La línea <img src="" alt="Mi imagen de prueba"> es el código HTML que inserta una imagen en la página. Necesitamos decirle al HTML dónde está la imagen. La imagen está dentro del directorio _images_, que está en el mismo directorio que index.html. Para recorrer la estructura del archivo desde index.html hasta nuestra imagen, la ruta del archivo que necesitamos es images/nombre-archivo-imagen. Por ejemplo, nuestra imagen se llama firefox-icon.png, por lo que la ruta del archivo es images/firefox-icon.png.
2. Inserta la ruta del archivo en tu código HTML entre las comillas dobles del código src="".
3. Guarda tu archivo HTML, luego cárgalo en tu navegador web (haz doble clic en el archivo). ¡Deberías ver tu nueva página web mostrando tu imagen!

Algunas reglas generales para las rutas de archivo:

• Para vincular a un archivo destino en el mismo directorio que el archivo HTML de invocación, simplemente usa el nombre del archivo, p. ej. miimagen.jpg.
• Para hacer referencia a un archivo en un subdirectorio, escribe el nombre del directorio delante de la ruta, más una barra inclinada, p. ej. subdirectorio/miimagen.jpg.
• Para vincular a un archivo destino en el directorio arriba del archivo HTML que lo invoca, escribe dos puntos. Por ejemplo, si index.html estuviera dentro de un subdirectorio de pruebasitio y miimagen.jpg estuviera dentro de pruebasitio, puedes hacer referencia a miimagen.jpg desde index.html utilizando ../miimagen.jpg.
• Los puedes combinar tanto como desees, por ejemplo, ../subdirectorio/otrosubdirectorio/miimagen.jpg.

Por ahora, esto es todo lo que necesitas saber.

¿Qué más se debería hacer?

Eso es todo por ahora. La estructura de tu directorio debería verse así: