CursosEmpresasBlogLiveConfPrecios

Configuración de VSCode y estructura HTML5 básica

Clase 3 de 17 • Curso de HTML

Contenido del curso

Tomar examen
Resumen

Crear tu primer sitio en HTML5 es más simple de lo que parece. Aquí verás cómo configurar VSCode, usar el navegador con el inspector de elementos, generar la estructura base con un atajo y renderizar tu primer Hola mundo con buenas prácticas. Todo paso a paso y con conceptos clave explicados de forma clara.

¿Cómo preparar las herramientas para HTML con VSCode y navegador?

Para escribir y visualizar código necesitas dos piezas: un editor de texto y un navegador. El editor recomendado es VSCode. El navegador es esencial porque ahí verás cómo se renderiza el HTML y porque incluye el inspector de elementos.

  • Instala VSCode y ábrelo. Sigue el instalador según tu sistema operativo.
  • Usa un navegador moderno con inspector de elementos. Te permitirá ver el HTML real y debuggear con feedback en tiempo real.
  • Crea una carpeta raíz llamada "Curso HTML". Allí guardarás todo el contenido, clase por clase.
  • Dentro, crea "uno_Fundamentos_HTML" para el módulo y luego "clase uno" como subcarpeta.
  • Evita acentos y espacios en nombres. Usa guion medio, guion bajo o camel case.
  • En "clase uno", crea el archivo index.html.

¿Para qué sirve el inspector de elementos?

El inspector muestra el árbol real de etiquetas: html, head y body. Permite identificar errores, probar cambios rápidos y entender qué se está renderizando. Es clave para debuggear y para recibir feedback en tiempo real antes de llevar los cambios al editor.

¿Qué incluye la estructura básica de HTML5 y por qué importa?

En index.html puedes generar la base con un atajo: escribe ! y presiona tab. Esto crea el esqueleto HTML5 con etiquetas contenedoras que abren y cierran. Es importante comprender cada línea para que después te enfoques en el contenido dentro de body.

<!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>
  • Las etiquetas contenedoras se abren y se cierran con slash. El contenido va dentro del par.
  • Todo lo visible en el navegador está dentro de body. Lo de head son instrucciones para el navegador.

¿Qué hacen doctype html y el atributo lang?

  • <!DOCTYPE html\> le indica al navegador: esto es **HTML5**. Así usas el estándar vigente y sus etiquetas.
  • En defines el idioma del contenido. El navegador puede ofrecer traducción automática si tu idioma local difiere, por ejemplo con Google Translator mediante un pequeño prompt.

¿Qué hace meta charset y meta viewport?

  • habilita caracteres especiales y emojis. Sin esto, acentos y símbolos pueden verse como códigos extraños.
  • mejora la visualización en dispositivos móviles. Usa el ancho real del dispositivo y evita un zoom inicial que distorsione el diseño.

¿Dónde va el contenido visible: body?

Todo lo que agregues dentro de body se renderiza. El head aloja reglas y metadatos: estilos, configuración del documento y el title, que define el texto de la pestaña del navegador.

¿Cómo crear y visualizar tu primer HTML: h1 y párrafo?

Abre index.html con Open with Live Server desde el clic derecho en el explorador de archivos. Verás en la URL que se sirve desde local, con la ruta de tus carpetas y el index.html. En el inspector podrás verificar doctype, html, head y body.

Agrega contenido dentro de body:

<body>
  <h1>Hola mundo</h1>
  <p>Es mi primer sitio web.</p>
</body>

Buenas prácticas y recordatorios.

  • Guarda y revisa en el navegador para ver cómo se renderiza el cambio.
  • Verifica en el inspector que h1 y p aparezcan dentro de body.
  • Cambia el title para ajustar el texto de la pestaña.
  • Usa el atajo ! + tab para generar la estructura base rápidamente.
  • Nombres de archivos y carpetas sin acentos ni espacios. Usa guion medio, guion bajo o camel case.
  • Recuerda que las etiquetas contenedoras se cierran con slash.
  • Mantén meta charset="UTF-8" y meta viewport para compatibilidad y móviles.
  • Usa el inspector para debuggear errores y aplicar correcciones informadas.

¿Tienes dudas o quieres compartir cómo nombraste tus carpetas y qué viste en el inspector? Deja un comentario y seguimos construyendo juntos.