Curso HTML con VS Code: proyectos

Un proyecto de HTML en VS Code deja de ser un solo archivo cuando añade estilos, imágenes y una segunda página. En este recorrido organizarás esas piezas, probarás una ruta que funciona y otra que falla, y terminarás con una navegación que puedes abrir desde una carpeta local.

Organiza los archivos antes de enlazarlos

Crea una carpeta de proyecto con index.html, styles.css y una subcarpeta images. Abre la carpeta completa en VS Code para ver los nombres en un mismo árbol. Enlaza la hoja de estilos desde el head con href="styles.css". Para una imagen dentro de images, usa una ruta como images/portada.jpg. Ambas rutas se interpretan desde la ubicación del documento HTML.

mi-proyecto/
  index.html
  styles.css
  images/
    portada.jpg

Abre index.html en el navegador y verifica que aparecen el texto, los estilos y la imagen. Si falla solo uno de ellos, el resto de la página te confirma que el archivo HTML correcto se abrió. Eso reduce la búsqueda a una ruta, un nombre o el contenido de un recurso.

Compara un camino correcto con uno roto

Escribe temporalmente src="portada.jpg" en la imagen. El navegador buscará junto a index.html, no dentro de images, y la imagen faltará. Restaura src="images/portada.jpg" y comprueba el cambio. Haz la misma prueba con la hoja de estilos. No se trata de memorizar una cadena exacta, sino de poder deducir desde qué archivo se calcula cada ruta.

Cuando un recurso no cargue, abre las herramientas de desarrollo y mira la dirección que intentó solicitar el navegador. Compárala con el árbol real de archivos. Evita mover carpetas al azar: una corrección deliberada de la ruta enseña más y no rompe otros enlaces. Mantén nombres simples y consistentes para que otra persona pueda seguir el proyecto.

Añade una segunda página

Crea sobre.html al lado de index.html. En la navegación de la primera página añade un enlace a sobre.html; en la segunda, uno de vuelta a index.html. Abre ambas rutas, activa los enlaces con teclado y comprueba que no dependes de una extensión del editor para navegar. Si la segunda página usa la misma hoja de estilos y está en la misma carpeta, puede enlazar styles.css con la misma ruta relativa.

Como entrega final, comprime o copia la carpeta completa a otro lugar y abre allí index.html. Si las rutas son relativas y los archivos viajan juntos, la navegación y las imágenes deben conservarse. Si algo falla, el nuevo lugar revela una dependencia oculta, como una ruta absoluta a tu ordenador. Esta prueba prepara el proyecto para publicarse más adelante sin confundir contenido, diseño y ubicación física de archivos.

También conviene comprobar la codificación de cada documento. Si una página nueva muestra mal las tildes, compara su declaración meta charset y cómo se guardó el archivo. Copia una palabra con acento de la primera página a la segunda y recarga ambas. La diferencia puede revelar un archivo guardado con otra codificación, no un error de CSS. Este tipo de diagnóstico ahorra tiempo porque dirige la búsqueda a la capa correcta.

Por último, revisa cada enlace desde la página en que aparece. Una ruta que funciona en index.html puede necesitar otro prefijo si más adelante mueves sobre.html a una subcarpeta. La ruta relativa no es una propiedad global del proyecto: tiene un punto de partida concreto. Dibuja ese punto en el árbol de archivos antes de corregir un enlace roto.