Entorno para desarrollar HTML

Intermedio
HTML
HTML
Actualizado: 01/05/2025

¡Desbloquea el curso completo!

IA
Ejercicios
Certificado
Entrar

Editores de código para HTML: Visual Studio Code

Cuando empezamos a desarrollar páginas web con HTML, contar con un editor de código adecuado marca una gran diferencia en nuestra productividad y experiencia de aprendizaje. Visual Studio Code (VS Code) se ha convertido en uno de los editores más populares para el desarrollo web por su equilibrio entre simplicidad y potencia.

¿Qué es Visual Studio Code?

Visual Studio Code es un editor de código gratuito y de código abierto desarrollado por Microsoft. A diferencia de un simple bloc de notas, VS Code ofrece características específicas para facilitar la escritura de código HTML:

  • Resaltado de sintaxis: Colorea automáticamente las etiquetas, atributos y contenido HTML para mejorar la legibilidad.
  • Autocompletado inteligente: Sugiere etiquetas y atributos mientras escribes.
  • Formato automático: Organiza tu código para mantenerlo limpio y legible.

Instalación de Visual Studio Code

La instalación de VS Code es sencilla y está disponible para Windows, macOS y Linux:

  1. Visita la página oficial: https://code.visualstudio.com/
  2. Descarga la versión correspondiente a tu sistema operativo
  3. Ejecuta el instalador y sigue las instrucciones en pantalla

Interfaz principal de VS Code

Al abrir VS Code por primera vez, te encontrarás con una interfaz limpia y organizada:

![Interfaz de VS Code]

Los elementos principales son:

  • Barra de actividad: Situada en el extremo izquierdo, permite cambiar entre diferentes vistas (explorador de archivos, búsqueda, extensiones, etc.)
  • Explorador de archivos: Muestra los archivos y carpetas de tu proyecto
  • Editor: Área central donde escribirás y editarás tu código HTML
  • Barra de estado: En la parte inferior, muestra información útil como el tipo de archivo y la codificación

Funcionalidades clave para desarrollo HTML

VS Code incluye varias características que facilitan específicamente el desarrollo con HTML:

Emmet: Abreviaciones para HTML

Emmet es una herramienta integrada en VS Code que permite escribir HTML rápidamente mediante abreviaciones. Por ejemplo, escribiendo ! y presionando Tab, obtendrás una estructura HTML5 completa:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Otras abreviaciones útiles:

  • div.container + Tab → <div class="container"></div>
  • ul>li*3 + Tab → Crea una lista con 3 elementos
  • header+main+footer + Tab → Crea estas tres etiquetas consecutivas

Autocompletado inteligente

VS Code ofrece sugerencias contextuales mientras escribes código HTML:

  • Completa automáticamente nombres de etiquetas
  • Sugiere atributos válidos para cada etiqueta
  • Cierra automáticamente las etiquetas abiertas

Navegación rápida

Para moverse eficientemente por el código HTML:

  • Ctrl+Click (o Cmd+Click en Mac) sobre una etiqueta para saltar a su definición
  • Alt+Z para activar/desactivar el ajuste de línea
  • Ctrl+/ para comentar/descomentar líneas de código

Personalización para desarrollo HTML

VS Code permite personalizar tu entorno para adaptarlo a tus necesidades:

Temas de color

Puedes cambiar el esquema de colores para reducir la fatiga visual:

  1. Presiona Ctrl+K Ctrl+T (o Cmd+K Cmd+T en Mac)
  2. Selecciona entre los temas disponibles (Dark+, Light+, etc.)
  3. También puedes instalar temas adicionales desde la tienda de extensiones

Configuración del editor

Para optimizar VS Code para HTML, puedes ajustar algunas configuraciones:

  1. Abre la configuración con Ctrl+, (o Cmd+, en Mac)
  2. Busca y ajusta configuraciones como:
  • editor.wordWrap: Actívalo para evitar el desplazamiento horizontal
  • editor.tabSize: Define el número de espacios por tabulación
  • html.format.wrapLineLength: Establece la longitud máxima de línea

Atajos de teclado esenciales

Dominar algunos atajos de teclado mejorará significativamente tu velocidad de desarrollo:

  • Ctrl+S: Guardar archivo
  • Ctrl+Space: Activar sugerencias
  • Alt+Shift+F: Formatear documento
  • Ctrl+F: Buscar en el archivo actual
  • Ctrl+H: Buscar y reemplazar
  • Ctrl+P: Navegación rápida entre archivos

Trabajando con múltiples archivos

En proyectos HTML reales, trabajarás con múltiples archivos HTML, CSS y JavaScript:

  • Puedes dividir el editor (Split Editor) arrastrando una pestaña hacia los lados
  • Utiliza Ctrl+Tab para cambiar entre archivos abiertos
  • El explorador de archivos te permite organizar y navegar por la estructura de carpetas

Integración con Git

VS Code incluye integración con Git que facilita el control de versiones:

  • El icono de Git en la barra de actividad muestra cambios pendientes
  • Puedes realizar commits, pulls y pushes directamente desde el editor
  • Las diferencias entre versiones se muestran visualmente

Depuración de HTML

Para identificar problemas en tu código HTML:

  • VS Code resalta en rojo los errores de sintaxis
  • Al pasar el cursor sobre un error, muestra una descripción del problema
  • La validación de HTML está integrada y proporciona sugerencias de mejora

Conclusión práctica

Visual Studio Code ofrece un equilibrio ideal entre simplicidad para principiantes y potencia para desarrolladores avanzados. Para empezar a trabajar con HTML, simplemente:

  1. Crea una carpeta para tu proyecto
  2. Abre esa carpeta en VS Code (File > Open Folder)
  3. Crea un nuevo archivo con extensión .html
  4. Escribe ! y presiona Tab para generar la estructura básica
  5. Comienza a añadir tu contenido HTML

Con estas herramientas básicas, estarás listo para comenzar a desarrollar páginas web HTML de manera eficiente y profesional.

¿Te está gustando esta lección?

Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.

Progreso guardado
Asistente IA
Ejercicios
Iniciar sesión gratis

Más de 25.000 desarrolladores ya confían en CertiDevs

Instalación de extensión Live Server para desarrollo

Cuando desarrollamos páginas web con HTML, es fundamental poder visualizar nuestros cambios de forma inmediata. La extensión Live Server para Visual Studio Code nos proporciona esta capacidad, creando un servidor local que actualiza automáticamente el navegador cada vez que guardamos modificaciones en nuestros archivos.

¿Qué es Live Server?

Live Server es una extensión gratuita para VS Code que crea un servidor de desarrollo local con capacidad de recarga automática. Entre sus principales ventajas encontramos:

  • Recarga en tiempo real: Actualiza el navegador automáticamente al guardar cambios
  • Servidor local: Ejecuta tu página web en un entorno similar al de producción
  • Compatibilidad con múltiples navegadores: Funciona con Chrome, Firefox, Edge y otros navegadores modernos
  • Soporte para proyectos complejos: Gestiona correctamente recursos como CSS, JavaScript e imágenes

Instalación de Live Server

Instalar Live Server en VS Code es un proceso sencillo que podemos completar en pocos pasos:

  1. Abre Visual Studio Code
  2. Haz clic en el icono de Extensiones en la barra de actividad (o presiona Ctrl+Shift+X)
  3. En el cuadro de búsqueda, escribe "Live Server"
  4. Localiza la extensión desarrollada por "Ritwick Dey" (suele ser la primera opción)
  5. Haz clic en el botón Instalar

![Instalación de Live Server]

Una vez completada la instalación, verás una notificación de confirmación y la extensión aparecerá en tu lista de extensiones instaladas.

Uso básico de Live Server

Después de instalar Live Server, puedes comenzar a utilizarlo de inmediato:

Iniciar el servidor

Existen varias formas de iniciar Live Server:

  • Haz clic en el botón Go Live que aparece en la barra de estado (esquina inferior derecha)
  • Haz clic derecho sobre un archivo HTML en el explorador y selecciona "Open with Live Server"
  • Haz clic derecho dentro del editor de un archivo HTML y selecciona "Open with Live Server"
  • Usa el atajo de teclado Alt+L Alt+O (en Windows/Linux) o Cmd+L Cmd+O (en Mac)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
</head>
<body>
    <h1>Hello World!</h1>
    <!-- Edita este texto y guarda para ver la recarga automática -->
</body>
</html>

Al iniciar Live Server con este archivo, se abrirá automáticamente tu navegador predeterminado mostrando la página.

Detener el servidor

Para detener Live Server:

  • Haz clic en el botón Port: 5500 (o el puerto que esté usando) en la barra de estado
  • Usa el atajo de teclado Alt+L Alt+C (en Windows/Linux) o Cmd+L Cmd+C (en Mac)

Características avanzadas

Live Server ofrece varias opciones de configuración que puedes personalizar según tus necesidades:

Cambiar el puerto predeterminado

Por defecto, Live Server utiliza el puerto 5500, pero puedes cambiarlo:

  1. Abre la configuración de VS Code (Ctrl+,)
  2. Busca "liveServer.settings.port"
  3. Establece el número de puerto que prefieras

Personalizar el navegador

Puedes configurar qué navegador se abrirá al iniciar Live Server:

  1. Abre la configuración de VS Code
  2. Busca "liveServer.settings.CustomBrowser"
  3. Selecciona entre las opciones disponibles (chrome, firefox, edge, etc.)

Configurar rutas personalizadas

Si tu proyecto tiene una estructura específica, puedes configurar rutas personalizadas:

  1. Abre la configuración de VS Code
  2. Busca "liveServer.settings.root"
  3. Establece la ruta relativa a la carpeta raíz de tu proyecto (por ejemplo, "/src")

Solución de problemas comunes

A veces pueden surgir algunos inconvenientes al usar Live Server:

El servidor no inicia

Si Live Server no inicia correctamente:

  • Verifica que no haya otro servidor usando el mismo puerto
  • Comprueba que el archivo que intentas abrir tenga extensión .html
  • Reinicia VS Code y vuelve a intentarlo

La recarga automática no funciona

Si la página no se actualiza automáticamente:

  • Asegúrate de guardar los cambios (Ctrl+S)
  • Verifica que estás editando archivos dentro de la carpeta del proyecto
  • Comprueba que no hay errores en la consola de VS Code

Problemas con rutas relativas

Si las imágenes o archivos CSS no se cargan correctamente:

  • Usa rutas relativas a la raíz del proyecto (comenzando con /)
  • Configura correctamente el parámetro "liveServer.settings.root"

Integración con otros flujos de trabajo

Live Server se integra perfectamente con otros aspectos del desarrollo web:

Uso con preprocesadores CSS

Si trabajas con SASS, LESS u otros preprocesadores:

  1. Configura tu compilador para generar archivos CSS en la carpeta del proyecto
  2. Live Server detectará los cambios en los archivos CSS generados
  3. El navegador se actualizará automáticamente

Desarrollo responsive

Live Server facilita el desarrollo responsive:

  • Puedes abrir la página en múltiples navegadores simultáneamente
  • Todos los navegadores se actualizarán al guardar cambios
  • Utiliza las herramientas de desarrollo del navegador para probar diferentes tamaños de pantalla

Ventajas para el desarrollo HTML

Utilizar Live Server en tu flujo de trabajo de desarrollo HTML ofrece numerosas ventajas:

  • Ahorro de tiempo: Elimina la necesidad de actualizar manualmente el navegador
  • Entorno realista: Ejecuta el código en un servidor web real, no solo como archivo local
  • Depuración más eficiente: Visualiza inmediatamente el resultado de tus cambios
  • Compatibilidad con AJAX: Permite probar solicitudes AJAX que no funcionarían con archivos locales
  • Desarrollo más fluido: Mantiene tu atención en el código, no en cambiar entre aplicaciones

Con Live Server instalado y configurado, estás listo para comenzar a desarrollar páginas HTML de manera más eficiente, viendo tus cambios reflejados instantáneamente en el navegador.

Cómo abrir la consola de desarrollador en el navegador y qué pestañas tiene

La consola de desarrollador es una herramienta esencial para cualquier persona que trabaje con HTML. Esta potente utilidad integrada en los navegadores modernos te permite inspeccionar, depurar y analizar el código de tus páginas web en tiempo real.

Cómo abrir la consola de desarrollador

Existen varias formas de acceder a las herramientas de desarrollo, dependiendo del navegador que utilices:

En Google Chrome

  • Método con atajo de teclado: Presiona F12 o Ctrl+Shift+I (Windows/Linux) o Cmd+Option+I (Mac)
  • Método con menú: Haz clic en el menú (tres puntos verticales) → Más herramientas → Herramientas para desarrolladores
  • Método con clic derecho: Haz clic derecho en cualquier elemento de la página → Inspeccionar

En Mozilla Firefox

  • Método con atajo de teclado: Presiona F12 o Ctrl+Shift+I (Windows/Linux) o Cmd+Option+I (Mac)
  • Método con menú: Haz clic en el menú (tres líneas horizontales) → Más herramientas → Herramientas para desarrolladores web
  • Método con clic derecho: Haz clic derecho en cualquier elemento → Inspeccionar elemento

En Microsoft Edge

  • Método con atajo de teclado: Presiona F12 o Ctrl+Shift+I
  • Método con menú: Haz clic en el menú (tres puntos horizontales) → Más herramientas → Herramientas para desarrolladores
  • Método con clic derecho: Haz clic derecho en la página → Inspeccionar

En Safari (Mac)

  • Habilitar herramientas de desarrollo: Primero debes activarlas en Preferencias → Avanzado → Mostrar menú Desarrollo
  • Método con atajo de teclado: Presiona Cmd+Option+I
  • Método con menú: Haz clic en Desarrollo → Mostrar inspector web

Principales pestañas y sus funciones

La consola de desarrollador está organizada en varias pestañas, cada una con funciones específicas para ayudarte en diferentes aspectos del desarrollo web:

Pestaña Elements/Inspector

Esta es probablemente la pestaña más utilizada para trabajar con HTML:

  • Muestra el DOM (Document Object Model) completo de la página
  • Permite inspeccionar cualquier elemento HTML haciendo clic en él
  • Facilita la edición en vivo del HTML (haciendo doble clic en un elemento)
  • Muestra los estilos CSS aplicados a cada elemento
  • Incluye una herramienta de selección de elementos (icono de cursor en la esquina superior izquierda)
<!-- Ejemplo de código HTML que podrías inspeccionar -->
<div class="container">
    <h1 id="title">Mi página web</h1>
    <p>Este párrafo puede ser inspeccionado en la pestaña Elements</p>
</div>

Al seleccionar el elemento <h1> en la pestaña Elements, podrás ver todos los estilos aplicados, su posición en el DOM y modificar sus propiedades temporalmente.

Pestaña Console

La consola es fundamental para depurar código y ver mensajes:

  • Muestra errores, advertencias e información generados por la página
  • Permite ejecutar código JavaScript directamente
  • Registra los resultados de las funciones console.log(), console.error(), etc.
  • Ofrece autocompletado para comandos y propiedades
  • Incluye filtros para mostrar solo ciertos tipos de mensajes

Por ejemplo, si tu HTML contiene un error como una etiqueta mal cerrada, verás un mensaje en la consola. También puedes usar la consola para probar código:

// Prueba esto en la consola
document.querySelector('h1').style.color = 'red';

Pestaña Network/Red

Esta pestaña te permite monitorizar todas las solicitudes de red que realiza tu página:

  • Muestra todas las peticiones HTTP (HTML, CSS, JavaScript, imágenes, etc.)
  • Indica el tiempo de carga de cada recurso
  • Permite ver cabeceras, parámetros y respuestas de cada solicitud
  • Incluye opciones para simular conexiones lentas (throttling)
  • Facilita la depuración de problemas de carga de recursos

Es especialmente útil para identificar recursos que tardan demasiado en cargar o que generan errores:

<!-- Si esta imagen no se carga correctamente -->
<img src="imagen-que-no-existe.jpg" alt="Imagen de ejemplo">

En la pestaña Network verás una solicitud fallida (código 404) para este recurso.

Pestaña Sources/Fuentes

Esta pestaña te permite examinar y depurar el código fuente de tu página:

  • Muestra todos los archivos que componen tu sitio web
  • Permite establecer puntos de interrupción (breakpoints) en el código JavaScript
  • Facilita la depuración paso a paso del código
  • Incluye un editor de código integrado
  • Ofrece herramientas para monitorizar variables durante la ejecución

Es particularmente útil cuando necesitas entender cómo se ejecuta tu código JavaScript o depurar problemas complejos.

Pestaña Application/Aplicación

Esta pestaña te ayuda a gestionar el almacenamiento del lado del cliente:

  • Permite inspeccionar y modificar cookies
  • Muestra el contenido del almacenamiento local (localStorage) y sesión (sessionStorage)
  • Facilita la gestión de la caché del navegador
  • Permite examinar bases de datos del lado del cliente (IndexedDB)
  • Incluye información sobre service workers y manifiestos de aplicaciones web

Es especialmente útil cuando trabajas con aplicaciones web que almacenan datos en el navegador.

Pestaña Performance/Rendimiento

Esta pestaña te permite analizar el rendimiento de tu página web:

  • Registra y analiza la actividad de la página durante un período de tiempo
  • Muestra información detallada sobre el tiempo de carga y renderizado
  • Identifica cuellos de botella en el rendimiento
  • Ofrece sugerencias para mejorar la velocidad
  • Incluye líneas de tiempo detalladas de la actividad del navegador

Es fundamental cuando necesitas optimizar el rendimiento de tu sitio web.

Pestaña Memory/Memoria

Esta pestaña te ayuda a identificar problemas de memoria en tu aplicación:

  • Permite tomar instantáneas del uso de memoria
  • Ayuda a detectar fugas de memoria (memory leaks)
  • Muestra qué objetos están consumiendo más memoria
  • Facilita la comparación entre diferentes estados de la aplicación

Es especialmente útil para aplicaciones web complejas que pueden tener problemas de rendimiento relacionados con la gestión de memoria.

Pestaña Accessibility/Accesibilidad

Esta pestaña te ayuda a evaluar la accesibilidad de tu página web:

  • Realiza auditorías automáticas de accesibilidad
  • Muestra el árbol de accesibilidad de la página
  • Identifica problemas como contraste insuficiente o falta de etiquetas
  • Ofrece sugerencias para mejorar la accesibilidad

Es fundamental para asegurar que tu sitio web sea accesible para todos los usuarios, incluidos aquellos con discapacidades.

Herramientas adicionales útiles

Además de las pestañas principales, las herramientas de desarrollo incluyen otras funcionalidades útiles:

  • Modo responsive: Te permite simular diferentes tamaños de pantalla y dispositivos
  • Emulación de dispositivos: Simula condiciones específicas de dispositivos móviles
  • Lighthouse: Realiza auditorías de rendimiento, accesibilidad, SEO y mejores prácticas
  • Herramienta de selección de colores: Permite identificar y copiar colores de la página
  • Simulación de ubicación: Permite probar funcionalidades basadas en geolocalización

Uso práctico para desarrollo HTML

Durante el desarrollo de páginas HTML, la consola de desarrollador te será útil para:

  • Identificar errores de sintaxis en tu código HTML
  • Probar cambios de estilo antes de implementarlos en tu código
  • Verificar la estructura del DOM y asegurarte de que es correcta
  • Comprobar la carga de recursos externos como imágenes o scripts
  • Depurar problemas de visualización en diferentes tamaños de pantalla
  • Analizar la accesibilidad de tu página para diferentes usuarios

Por ejemplo, si estás trabajando en un formulario HTML y no se envía correctamente, puedes usar la consola para identificar errores:

<form id="contact-form">
    <input type="text" name="name" placeholder="Nombre">
    <input type="email" name="email" placeholder="Email">
    <button type="submit">Enviar</button>
</form>

En la consola, podrías verificar si hay errores de JavaScript o problemas con los eventos del formulario, y en la pestaña Network podrías comprobar si la solicitud se está enviando correctamente.

La consola de desarrollador es una herramienta indispensable que te acompañará durante todo tu aprendizaje y carrera como desarrollador web, permitiéndote crear páginas HTML más robustas y libres de errores.

Archivos HTML y estructura de carpetas básica

Cuando comenzamos a desarrollar proyectos web con HTML, es fundamental organizar nuestros archivos y carpetas de manera estructurada y lógica. Una buena organización no solo facilita nuestro trabajo, sino que también mejora la mantenibilidad del proyecto a largo plazo.

Anatomía de un archivo HTML

Un archivo HTML es simplemente un archivo de texto con extensión .html (o en algunos casos .htm). Estos archivos contienen el marcado que define la estructura y contenido de nuestras páginas web.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primera página</title>
</head>
<body>
    <h1>¡Hola mundo!</h1>
    <p>Este es mi primer documento HTML.</p>
</body>
</html>

Cada archivo HTML representa generalmente una página individual de nuestro sitio web. El archivo principal suele llamarse index.html, ya que los servidores web lo buscan automáticamente cuando se accede a un directorio sin especificar un archivo concreto.

Estructura básica de carpetas

Para proyectos pequeños o medianos, una estructura de carpetas bien organizada podría ser:

mi-proyecto/
│
├── index.html          # Página principal
├── about.html          # Página "Acerca de"
├── contact.html        # Página de contacto
│
├── css/                # Carpeta para archivos CSS
│   ├── styles.css      # Estilos principales
│   └── normalize.css   # Estilos de normalización
│
├── js/                 # Carpeta para archivos JavaScript
│   └── main.js         # Código JavaScript principal
│
├── images/             # Carpeta para imágenes
│   ├── logo.png
│   ├── banner.jpg
│   └── icons/          # Subcarpeta para iconos
│       ├── menu.svg
│       └── search.svg
│
└── fonts/              # Carpeta para fuentes personalizadas (si es necesario)
    └── opensans.woff2

Esta estructura sigue algunas convenciones importantes:

  • Archivos HTML en la raíz: Los archivos HTML principales se colocan en el directorio raíz para facilitar el acceso y las URL limpias.
  • Separación por tipo de recurso: Los diferentes tipos de archivos (CSS, JavaScript, imágenes) se organizan en carpetas separadas.
  • Nombres descriptivos: Tanto los archivos como las carpetas tienen nombres que describen claramente su contenido o función.

Convenciones de nomenclatura

Adoptar convenciones de nomenclatura coherentes mejora significativamente la organización:

  • Usa minúsculas: Los servidores web pueden distinguir entre mayúsculas y minúsculas, por lo que imagen.jpg y Imagen.jpg serían tratados como archivos diferentes.
  • Evita espacios: Utiliza guiones (mi-archivo.html) o guiones bajos (mi_archivo.html) en lugar de espacios.
  • Sé descriptivo pero conciso: Los nombres deben indicar el contenido o propósito del archivo sin ser excesivamente largos.
  • Usa extensiones adecuadas: .html para HTML, .css para CSS, .js para JavaScript, etc.

Estructura para proyectos más complejos

Para sitios web más grandes, podríamos expandir nuestra estructura:

proyecto-grande/
│
├── index.html
├── pages/              # Carpeta para páginas adicionales
│   ├── about/
│   │   ├── index.html  # Permite URL más limpias (about/ en lugar de about.html)
│   │   └── team.html
│   ├── products/
│   │   ├── index.html
│   │   ├── product1.html
│   │   └── product2.html
│   └── contact/
│       └── index.html
│
├── assets/             # Todos los recursos estáticos
│   ├── css/
│   ├── js/
│   ├── images/
│   ├── fonts/
│   └── videos/
│
└── docs/               # Documentación del proyecto (si es necesario)
    └── guidelines.md

Esta estructura utiliza el enfoque de carpetas con index.html, que permite URLs más limpias y organizadas. Por ejemplo, en lugar de midominio.com/about.html, podríamos tener midominio.com/about/.

Rutas de archivo en HTML

Cuando enlazamos recursos en nuestros archivos HTML, debemos entender cómo funcionan las rutas relativas y absolutas:

Rutas relativas

Las rutas relativas se basan en la ubicación del archivo HTML actual:

<!-- Desde index.html en la raíz -->
<link rel="stylesheet" href="css/styles.css">
<img src="images/logo.png" alt="Logo">

<!-- Desde pages/about/index.html -->
<link rel="stylesheet" href="../../css/styles.css">
<img src="../../images/logo.png" alt="Logo">

Rutas absolutas desde la raíz del sitio

Comienzan con una barra (/) y son relativas a la raíz del sitio web:

<!-- Funciona desde cualquier archivo del proyecto -->
<link rel="stylesheet" href="/css/styles.css">
<img src="/images/logo.png" alt="Logo">

Esta opción es más robusta cuando trabajamos con múltiples niveles de carpetas, pero requiere que el sitio se sirva desde la raíz de un dominio o servidor.

Archivos especiales

Algunos archivos tienen propósitos específicos en un proyecto web:

  • index.html: Página principal o página de inicio de cada directorio.
  • favicon.ico: Icono que aparece en la pestaña del navegador (normalmente se coloca en la raíz).
  • robots.txt: Indica a los motores de búsqueda qué partes del sitio pueden indexar.
  • .htaccess: Configura opciones del servidor Apache (si corresponde).
  • 404.html: Página personalizada para errores "no encontrado".

Ejemplo práctico: Creando un proyecto desde cero

Veamos cómo crear un proyecto básico paso a paso:

  1. Crea la estructura de carpetas:
mi-sitio/
├── css/
├── js/
└── images/
  1. Crea el archivo index.html en la carpeta raíz:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Sitio Web</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header>
        <h1>Bienvenido a Mi Sitio</h1>
        <nav>
            <ul>
                <li><a href="index.html">Inicio</a></li>
                <li><a href="about.html">Acerca de</a></li>
                <li><a href="contact.html">Contacto</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section>
            <h2>Contenido principal</h2>
            <p>Esta es la página de inicio de mi sitio web.</p>
            <img src="images/welcome.jpg" alt="Imagen de bienvenida">
        </section>
    </main>
    
    <footer>
        <p>&copy; 2023 Mi Sitio Web</p>
    </footer>
    
    <script src="js/main.js"></script>
</body>
</html>
  1. Crea un archivo CSS básico en la carpeta css:
/* css/styles.css */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

header, main, footer {
    padding: 20px;
}

/* Más estilos aquí... */
  1. Crea un archivo JavaScript básico en la carpeta js:
// js/main.js
document.addEventListener('DOMContentLoaded', function() {
    console.log('El documento está listo');
    // Más código aquí...
});

Consideraciones para el desarrollo

Al trabajar con esta estructura, ten en cuenta:

  • Consistencia: Mantén la misma estructura en todo el proyecto.
  • Escalabilidad: Diseña pensando en el crecimiento futuro del sitio.
  • Rutas relativas vs. absolutas: Elige el enfoque que mejor se adapte a tu proyecto.
  • Control de versiones: Si usas Git, considera crear un archivo .gitignore para excluir archivos temporales o de configuración personal.

Buenas prácticas adicionales

  • Separa estructura, presentación y comportamiento: Mantén el HTML (estructura), CSS (presentación) y JavaScript (comportamiento) en archivos separados.
  • Organiza por componentes: Para proyectos más grandes, considera organizar archivos por componentes o funcionalidades en lugar de por tipo de archivo.
  • Documenta la estructura: Para equipos, incluye un archivo README que explique la organización del proyecto.
  • Optimiza recursos: Considera tener carpetas separadas para recursos originales y optimizados (por ejemplo, images/original/ e images/optimized/).

Con esta estructura básica de archivos y carpetas, tendrás una base sólida para desarrollar tus proyectos HTML de manera organizada y profesional, facilitando tanto el desarrollo inicial como el mantenimiento futuro.

Aprendizajes de esta lección

  • Conocer las características y configuración básica de Visual Studio Code para desarrollo HTML.
  • Instalar y utilizar la extensión Live Server para recarga automática y servidor local.
  • Aprender a abrir y utilizar la consola de desarrollador en navegadores para depuración.
  • Entender la estructura básica de archivos y carpetas en proyectos HTML.
  • Aplicar buenas prácticas en la organización y nomenclatura de archivos web.

Completa HTML y certifícate

Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.

Asistente IA

Resuelve dudas al instante

Ejercicios

Practica con proyectos reales

Certificados

Valida tus conocimientos

Más de 25.000 desarrolladores ya se han certificado con CertiDevs

⭐⭐⭐⭐⭐
4.9/5 valoración