Tutorial: tu primera página web con HTML y CSS

En este tutorial vas a crear tu primera página web desde cero, sin frameworks ni herramientas complicadas: solo un editor de texto y un navegador. Sí, en serio, es así de fácil. No, no necesitas un doctorado.

Paso 1: crea la carpeta del proyecto

Crea una carpeta llamada mi-primera-pagina y abre un archivo nuevo llamado index.html. Ponerle nombre a una carpeta: nivel de dificultad, cero.

Paso 2: escribe la estructura básica

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Mi primera página</title>
    <link rel="stylesheet" href="estilos.css" />
  </head>
  <body>
    <h1>¡Hola, mundo!</h1>
    <p>Esta es mi primera página web.</p>
  </body>
</html>

Guarda el archivo y ábrelo con doble clic: ya tienes una página web funcionando en tu navegador. Felicidades, técnicamente ya eres "desarrollador web" (no le digas esto a nadie en una entrevista de trabajo todavía).

Paso 3: agrega estilos

Crea un archivo estilos.css en la misma carpeta:

body {
  font-family: sans-serif;
  background-color: #0e1e25;
  color: #ffffff;
  text-align: center;
  padding: 4rem;
}

h1 {
  color: #00e5bf;
}

Recarga la página en el navegador: deberías ver el fondo oscuro y el título en color verde azulado. Si ves otra cosa, no entres en pánico: revisa que guardaste el archivo (a todos nos ha pasado, no juzgamos).

Paso 4: agrega una imagen y un enlace

<img src="https://placekitten.com/300/200" alt="Un gato" />
<p>
  Aprende más en
  <a href="https://developer.mozilla.org/es/">MDN Web Docs</a>.
</p>

¿Qué acabas de aprender?

• Cómo estructurar una página con HTML.
• Cómo conectar un archivo CSS para darle estilo.
• Cómo agregar imágenes y enlaces.

En el próximo tutorial vamos a darle vida a esta página con JavaScript, porque una página bonita pero muda es simplemente... un póster caro.