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:

Visita la página oficial: https://code.visualstudio.com/
Descarga la versión correspondiente a tu sistema operativo
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:

Presiona Ctrl+K Ctrl+T (o Cmd+K Cmd+T en Mac)
Selecciona entre los temas disponibles (Dark+, Light+, etc.)
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:

Abre la configuración con Ctrl+, (o Cmd+, en Mac)
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:

Crea una carpeta para tu proyecto
Abre esa carpeta en VS Code (File > Open Folder)
Crea un nuevo archivo con extensión .html
Escribe ! y presiona Tab para generar la estructura básica
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.

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:

Abre Visual Studio Code
Haz clic en el icono de Extensiones en la barra de actividad (o presiona Ctrl+Shift+X)
En el cuadro de búsqueda, escribe "Live Server"
Localiza la extensión desarrollada por "Ritwick Dey" (suele ser la primera opción)
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:

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

Personalizar el navegador

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

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

Configurar rutas personalizadas

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

Abre la configuración de VS Code
Busca "liveServer.settings.root"
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:

Configura tu compilador para generar archivos CSS en la carpeta del proyecto
Live Server detectará los cambios en los archivos CSS generados
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

Guarda tu progreso

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

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:

Crea la estructura de carpetas:

mi-sitio/
├── css/
├── js/
└── images/

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>

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í... */

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

Comenzar gratis

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

⭐⭐⭐⭐⭐

4.9/5 valoración

Entorno para desarrollar HTML

Editores de código para HTML: Visual Studio Code

¿Qué es Visual Studio Code?

Instalación de Visual Studio Code

Interfaz principal de VS Code

Funcionalidades clave para desarrollo HTML

Emmet: Abreviaciones para HTML

Autocompletado inteligente

Navegación rápida

Personalización para desarrollo HTML

Temas de color

Configuración del editor

Atajos de teclado esenciales

Trabajando con múltiples archivos

Integración con Git

Depuración de HTML

Conclusión práctica

Instalación de extensión Live Server para desarrollo

¿Qué es Live Server?

Instalación de Live Server

Uso básico de Live Server

Iniciar el servidor

Detener el servidor

Características avanzadas

Cambiar el puerto predeterminado

Personalizar el navegador

Configurar rutas personalizadas

Solución de problemas comunes

El servidor no inicia

La recarga automática no funciona

Problemas con rutas relativas

Integración con otros flujos de trabajo

Uso con preprocesadores CSS

Desarrollo responsive

Ventajas para el desarrollo HTML

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

Guarda tu progreso

Cómo abrir la consola de desarrollador

En Google Chrome

En Mozilla Firefox

En Microsoft Edge

En Safari (Mac)

Principales pestañas y sus funciones

Pestaña Elements/Inspector

Pestaña Console

Pestaña Network/Red

Pestaña Sources/Fuentes

Pestaña Application/Aplicación

Pestaña Performance/Rendimiento

Pestaña Memory/Memoria

Pestaña Accessibility/Accesibilidad

Herramientas adicionales útiles

Uso práctico para desarrollo HTML

Archivos HTML y estructura de carpetas básica

Anatomía de un archivo HTML

Estructura básica de carpetas

Convenciones de nomenclatura

Estructura para proyectos más complejos

Rutas de archivo en HTML

Rutas relativas

Rutas absolutas desde la raíz del sitio

Archivos especiales

Ejemplo práctico: Creando un proyecto desde cero

Consideraciones para el desarrollo

Buenas prácticas adicionales

Aprendizajes de esta lección

Completa HTML y certifícate

Asistente IA

Ejercicios

Certificados