Configura VS Code y crea tu primer HTML

Contenido del curso

No sé dónde empezar

Fundamentos de HTML

Listas y Enlaces

Formularios y Tablas

Contenido Multimedia

Accesibilidad Web Y SEO

Proyecto final

17
Portafolio en HTML semántico accesible
08:01 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0013:48

Configura VS Code y crea tu primer HTML

Curso de HTML

Clase 3 de 17

Clase 3 / 17

Recursos

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 pones en, 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-width le dice al navegador que use el ancho real del dispositivo, sea celular o tablet.
initial-scale=1 carga 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?

Jesus Chapa

Hace 8 meses

Lista de extensiones de HTML para aprender en Visual Studio Code

Estas son las que todo principiante debe instalar primero para no perder la paciencia:

Live Server: Es la más famosa. Te permite abrir tu archivo HTML en el navegador con un solo clic y, cada vez que guardas un cambio, la página se actualiza automáticamente. Ya no tienes que darle a F5 cada dos segundos.
Auto Close Tag: En HTML, casi todo lo que se abre se debe cerrar. Esta extensión pone automáticamente la etiqueta de cierre (ej. escribes <div> y ella escribe </div>).
Auto Rename Tag: Si cambias una etiqueta de apertura (por ejemplo, decides que un <h2> ahora sea un <h1>), esta extensión cambia automáticamente la etiqueta de cierre correspondiente. ¡Ahorra muchísimos errores!

Prettier - Code Formatter: Es el estándar de la industria. Con un atajo de teclado, acomoda todo tu código (espacios, sangrías, saltos de línea) para que se vea perfecto.
Bracket Pair Colorizer (ya integrado): Aunque ya viene en las versiones nuevas de VS Code, asegúrate de que esté activo. Pone colores a los paréntesis y llaves para que sepas dónde empieza y dónde termina cada sección.
vscode-icons: Cambia los iconos aburridos de las carpetas por iconos reales (el logo de HTML5, el de CSS, etc.). Ayuda mucho a identificar tus archivos visualmente.
HTML CSS Support: Te ayuda con el autocompletado. Si tienes una clase en tu archivo CSS, esta extensión te la sugiere cuando la estás escribiendo en tu HTML.
Color Highlight: Si escribes un código de color (como #ff0000), la extensión subraya el texto con ese color exacto para que sepas qué tono estás usando sin tener que adivinar.