Contenido del curso
Listas y Enlaces
Formularios y Tablas
Contenido Multimedia
Accesibilidad Web Y SEO
Proyecto final
Configura VS Code y crea tu primer HTML
Resumen
Aprender cómo crear tu primer archivo HTML empieza por dos herramientas básicas: un editor de texto y un navegador. Con esta combinación vas a escribir código, verlo renderizado en tiempo real y entender la estructura mínima que todo sitio web necesita para funcionar.
¿Qué herramientas necesitas para empezar a programar en HTML?
Antes de escribir una sola línea, prepara tu entorno de trabajo. Solo necesitas dos cosas y ambas son gratuitas.
- VS Code como editor de texto. Lo descargas desde su sitio oficial eligiendo tu sistema operativo y sigues los pasos del instalador [00:14].
- Un navegador para visualizar tu código y usar el inspector de elementos, la herramienta que te permite ver cómo se renderiza tu HTML y hacer debugging en tiempo real [00:48].
La combinación editor más navegador es la fórmula ganadora: escribes en uno, visualizas en el otro y corriges errores con feedback inmediato.
¿Qué es el inspector de elementos? Es una herramienta del navegador que te muestra el HTML renderizado de una página. Sirve para detectar errores, probar cambios y entender cómo se construye un sitio.
¿Cómo organizar carpetas y archivos para un proyecto HTML?
La estructura de tu proyecto importa tanto como el código. Un buen orden te evita problemas cuando crece la cantidad de archivos.
Dentro de tu carpeta principal, crea subcarpetas por módulo y por clase. Por ejemplo: una carpeta llamada uno-fundamentos-html y dentro otra llamada clase-uno-fundamentos-estructura-basica [02:10].
Al nombrar carpetas y archivos sigue tres reglas que te van a salvar de errores futuros:
- No uses acentos, porque los sistemas de archivos no los leen bien.
- No uses espacios, porque las terminales no los reconocen al invocar archivos.
- Usa guion medio, guion bajo o camel case (primera letra de cada palabra en mayúscula).
Dentro de tu carpeta de clase, crea el archivo index.html. La extensión .html es la que le indica al editor que vas a escribir HTML y activa la ayuda semántica [03:30].
¿Cuál es la estructura básica de un documento HTML5?
VS Code tiene un atajo poderoso para generar el esqueleto inicial. Escribes el símbolo de admiración ! y presionas tab: aparece toda la estructura base lista para trabajar [04:05].
Esa estructura tiene partes que conviene entender línea por línea, porque después vas a construirlas tú mismo.
¿Qué significa la etiqueta DOCTYPE html?
La línea <!DOCTYPE html> le avisa al navegador que el documento usa HTML5, la versión más reciente del lenguaje. Versiones anteriores como HTML 4 o 3 ya están deprecadas, así que siempre trabaja con HTML5 para tener acceso a las últimas etiquetas [04:50].
¿Para qué sirven las etiquetas html, head y body?
Aquí entra una regla fundamental: las etiquetas contenedoras abren y cierran. La de cierre lleva un slash (/) y todo lo que va entre apertura y cierre es el contenido [05:30].
<html lang="en">envuelve todo el documento e indica el idioma del contenido. Si ponesen, el navegador detecta inglés y puede ofrecer traducción automática con Google Translator a quienes naveguen desde otro idioma [07:20].<head>contiene instrucciones para el navegador: cómo cargar el proyecto, qué estilos aplicar, qué reglas seguir. Nada de lo que va aquí se ve en pantalla.<body>contiene todo lo visible. Lo que escribas aquí es lo que tus visitantes van a ver.
¿Dónde se escribe el contenido visible de una página HTML? Dentro de la etiqueta
<body>. Todo lo que esté fuera del body, como el head, son instrucciones internas para el navegador.
¿Qué hacen las etiquetas meta dentro del head?
Las meta tags son configuraciones invisibles pero críticas. Sin ellas, tu página puede verse rota.
¿Por qué necesitas meta charset UTF-8?
La etiqueta <meta charset="UTF-8"> permite que el navegador renderice caracteres especiales y emojis [08:40]. Si escribes en español y omites esta línea, los acentos y la letra ñ aparecen como símbolos raros. Cada carácter especial tiene un código y sin UTF-8 el navegador no sabe traducirlo.
¿Qué hace meta name viewport en móviles?
Hoy gran parte del tráfico web viene de dispositivos móviles, y esta etiqueta controla cómo se ve tu página en pantallas pequeñas [10:05].
width=device-widthle dice al navegador que use el ancho real del dispositivo, sea celular o tablet.initial-scale=1carga la página sin zoom inicial, para que se vea exactamente como la diseñaste.
¿Para qué sirve la etiqueta title?
El contenido de <title> es el texto que aparece en la pestaña del navegador. Es lo primero que ven los buscadores y los usuarios al abrir tu sitio [11:00].
¿Cómo escribir tus primeras etiquetas de contenido en el body?
Ahora viene la parte visible. Dentro del <body> vamos a colocar dos etiquetas básicas:
html
<h1>Hola, mundo</h1> <p>Es mi primer sitio web</p>La etiqueta <h1> es un título principal, la jerarquía más alta de encabezados. La etiqueta <p> define un párrafo de texto [11:40].
Para ver tu trabajo en el navegador, da clic derecho sobre el archivo index.html y selecciona Open with Live Server. La URL se carga desde tu local y al abrir el inspector vas a ver cómo el código del editor se refleja exactamente en el navegador [06:20].
Con esto ya tienes la base: estructura, etiquetas, configuración y un primer contenido visible. ¿Qué etiqueta vas a probar primero después del clásico Hola, mundo?
