Primeros pasos

Antes de escribir HTML con soltura, conviene entender qué es exactamente lo que estamos editando, cómo se convierte en una página que el navegador muestra, y cómo se conecta con CSS. En esta lección cubrimos esos primeros pasos: crear y abrir un archivo HTML, las tres formas de incluir CSS, y una herramienta que te ayudará siempre: el inspector del navegador.

Qué es un archivo HTML

Un archivo HTML es, en esencia, un archivo de texto plano. No hay ninguna magia oculta: es texto, con extensión .html en lugar de .txt. Cualquier editor capaz de guardar texto sin formato es suficiente para escribir HTML.

La distinción importante es entre texto plano y texto con formato. Un archivo de Word (.docx) no es texto plano: contiene instrucciones de formato, imágenes incrustadas, metadatos... todo mezclado. Un archivo HTML, en cambio, es solo caracteres: el navegador lo lee, interpreta las etiquetas, y decide cómo presentarlo.

Para escribir HTML tienes varias opciones:

El Bloc de Notas de Windows, el Editor de texto de macOS, gedit o el editor de texto de la distribución linux de turno, funcionan perfectamente. Son lo más básico, pero sirven.
Editores como Visual Studio Code, Notepad++ o Sublime Text son más cómodos: resaltan el código en colores, detectan errores, y ofrecen autocompletado. VS Code es gratuito y actualmente el más usado.

Nota: Evita usar procesadores de texto como Word para escribir HTML. Aunque puedas teclear las etiquetas, el archivo resultante no será texto plano y el navegador no lo interpretará correctamente.

Si trabajas en un ordenador compartido o prefieres no instalar nada todavía, CodePen (codepen.io) es una herramienta online donde escribes HTML, CSS y JavaScript directamente en el navegador y el resultado aparece al instante. No necesitas crear archivos ni abrirlos por separado. Es una buena opción para experimentar y seguir los ejemplos de este manual sin instalar nada.

Crear, guardar y abrir una página

El proceso completo, desde cero hasta ver algo en el navegador, tiene tres pasos:

Crea el archivo: abre tu editor, escribe el código HTML (o copia el ejemplo de más abajo) y guárdalo con extensión .html, por ejemplo, prueba.html. Elige una carpeta para tus experimentos y guarda ahí todo.
Comprueba la extensión: algunos sistemas operativos ocultan las extensiones. Si tu archivo se llama prueba.html.txt, el navegador no lo reconocerá como HTML. Asegúrate de que el nombre termina en .html y no en .txt.
Ábrelo en el navegador: arrastra el archivo hasta la ventana del navegador, o usa el menú Archivo > Abrir archivo (o el atajo de teclado Ctrl+O / Cmd+O). No necesitas internet: todo funciona en local.

Para comprobarlo, crea un archivo con este contenido mínimo:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mi primera página</title>
</head>
<body>
  <h1>Hola, mundo</h1>
  <p>Esto es un párrafo.</p>
</body>
</html>

La línea <meta name="viewport"> es nueva respecto a la lección anterior. Le indica al navegador móvil que use el ancho real del dispositivo en lugar de simular una pantalla de escritorio. Sin ella, la página se vería en miniatura en el móvil. Es una línea que conviene incluir desde el principio en todas tus páginas.

Guárdalo, ábrelo en el navegador, y deberías ver el título "Hola, mundo" y el párrafo debajo. El texto "Mi primera página" aparecerá en la pestaña del navegador. Si algo no se muestra bien, lo más probable es que haya un error tipográfico en alguna etiqueta, o que el archivo no tenga la extensión correcta.

Cuando estés listo para que tu página sea visible en internet, necesitarás un servicio de alojamiento web. Plataformas como GitHub Pages, Netlify o Vercel ofrecen opciones gratuitas para publicar páginas estáticas. Pero no te preocupes por eso ahora: primero aprende a crear páginas y pruébalas en tu ordenador.

Una nota sobre CSS en estas primeras lecciones

CSS puede aplicarse al HTML de varias formas. La recomendada en proyectos reales es un archivo externo separado, pero en estas primeras lecciones usaremos CSS directamente en cada etiqueta, mediante el atributo style:

<p style="color: green; font-weight: bold;">Este párrafo es verde y negrita.</p>

Es lo que se llama CSS inline o en línea. No es la forma recomendada para proyectos reales porque mezcla contenido y presentación, pero tiene una ventaja didáctica: el efecto de cada propiedad queda visible justo al lado del elemento al que afecta, sin necesidad de abrir un archivo externo. Más adelante dedicaremos una lección completa a las distintas formas de enlazar CSS correctamente.

El inspector de elementos

Puedes aprender mucho mirando cómo están hechas las páginas que ya existen. En cualquier navegador puedes hacer click derecho sobre una página y seleccionar Ver código fuente. No es trampa; es exactamente lo que hace todo el mundo. El problema es que las páginas modernas suelen tener mucha complejidad y el código resultante no siempre es fácil de leer: verás miles de líneas de HTML comprimido, clases con nombres crípticos y scripts entrelazados con el contenido. Sigue siendo útil para hacerse una idea, pero no te desanimes si al principio parece ininteligible.

Para eso existe el inspector. Se abre con F12, o haciendo click derecho y seleccionando Inspeccionar, y es bastante más potente que el código fuente: en lugar de mostrarte el HTML tal como fue escrito, te muestra el DOM, es decir, la estructura que el navegador ha construido a partir de ese HTML. Y a su lado, los estilos CSS que se están aplicando a cada elemento en ese momento.

Lo interesante es que puedes editarlo en tiempo real: cambiar colores, tamaños, márgenes, y ver el efecto al instante, sin modificar ningún archivo. Es un laboratorio de experimentos integrado en el navegador.

Algunas cosas que el inspector te permite hacer:

Ver exactamente qué etiqueta HTML corresponde a cada elemento de la página.
Comprobar qué reglas CSS se están aplicando, y cuáles han sido anuladas por otras más específicas.
Ver el modelo de caja de cualquier elemento: su contenido, padding, borde y margen, representados visualmente.
Simular cómo se verá la página en distintos tamaños de pantalla (modo responsive).
Probar cambios de CSS sin arriesgar el archivo real.

Acostúmbrate a tenerlo abierto mientras trabajas. Cuando algo no se vea como esperas, el inspector suele revelar el motivo en segundos.

Nota: Los cambios que hagas en el inspector son temporales: desaparecen en cuanto recargas la página. Sirven para experimentar y entender, no para guardar trabajo.

Tu proyecto

A lo largo de este manual construirás una página web completa, añadiendo algo nuevo en cada lección. Empieza aquí:

Crea una carpeta en tu ordenador. Llámala proyecto o como prefieras.
Dentro, crea un archivo nuevo y guárdalo como proyecto.html.
Escribe la estructura que has visto en esta lección. En el <body>, añade un <h1> con tu nombre y un <p> con tu profesión o una frase corta sobre ti.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tu nombre</title>
</head>
<body>
  <h1>Tu nombre</h1>
  <p>Arquitecta. Madrid.</p>
</body>
</html>

Abre el archivo en el navegador. Luego abre el inspector (F12), localiza el <h1> en el panel de elementos y comprueba qué estilos le aplica el navegador por defecto. Es el punto de partida: de momento no se ve gran cosa, pero es tuyo.

Recapitulación

En esta lección hemos visto:

Un archivo HTML es texto plano con extensión .html. Cualquier editor funciona; CodePen es una alternativa online si no puedes instalar software.
Para ver el resultado, basta con abrir el archivo en un navegador. No se necesita servidor ni conexión a internet.
<meta name="viewport" content="width=device-width, initial-scale=1"> es necesario para que la página se vea bien en móvil. Inclúyelo desde el principio en todas tus páginas.
En estas primeras lecciones usaremos CSS inline (atributo style) para mantener los ejemplos autocontenidos. Más adelante veremos la forma correcta de enlazar una hoja de estilos externa.
El inspector del navegador (F12) es tu mejor aliado para entender qué hace el navegador con tu código y por qué.

En la próxima lección: entraremos en el texto y el formato: encabezados, párrafos, énfasis, y las etiquetas que dan estructura semántica al contenido.

Apuntes sobre Html2