Tu primera página web con HTML y CSS

Toda página web se apoya en dos lenguajes: HTML, que dice qué hay (un título, un párrafo, una imagen, un enlace), y CSS, que dice cómo se ve (colores, tamaños, márgenes). No son lenguajes de programación en sentido estricto, porque no toman decisiones, pero son el primer paso natural para crear cosas en la web. Para empezar solo necesitas un editor de texto y el navegador que ya tienes.

La estructura de un documento HTML

HTML usa etiquetas entre los signos < y >. Casi todas tienen apertura y cierre: <p> abre un párrafo y </p> lo cierra. Crea una carpeta llamada mi-web y, dentro, un archivo llamado index.html con este contenido:

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Mi primera web</title>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
    <h1>Hola, soy Ana</h1>
    <p>Esta es mi primera página web.</p>
    <img src="foto.jpg" alt="Una foto mía en la montaña">
    <a href="https://developer.mozilla.org/es/">Aprende más en MDN</a>
  </body>
</html>

• <!doctype html> indica al navegador que es HTML moderno.
• <head> contiene información sobre la página que no se muestra: la codificación (utf-8, para que salgan bien la ñ y las tildes), el título de la pestaña y el enlace a la hoja de estilos.
• <body> contiene lo que se ve.
• El atributo alt de la imagen describe la foto para quien no puede verla, por ejemplo con un lector de pantalla. No lo dejes vacío si la imagen aporta información.

Haz doble clic en index.html y se abrirá en tu navegador. Si cambias algo, guarda y recarga la página con F5.

Las etiquetas que más vas a usar

Usa cada etiqueta por su significado, no por su aspecto: un título es un <h2> aunque quieras que se vea pequeño. El aspecto se cambia con CSS, y así los buscadores y los lectores de pantalla entienden tu página.

Dar estilo con CSS

Crea en la misma carpeta un archivo estilos.css:

body {
  font-family: system-ui, sans-serif;
  max-width: 40rem;
  margin: 2rem auto;
  padding: 0 1rem;
  line-height: 1.6;
  color: #1f2937;
}

h1 {
  color: #0f766e;
}

img {
  max-width: 100%;
  border-radius: 8px;
}

Cada bloque tiene un selector (a qué elementos se aplica: body, h1, img) y unas declaraciones propiedad: valor;. La regla max-width: 100% de la imagen evita que se salga de la pantalla en el móvil. Guarda, recarga y verás el cambio.

Herramientas del navegador

Pulsa F12 (o clic derecho > Inspeccionar) para abrir las herramientas para desarrolladores. Puedes seleccionar cualquier elemento de la página, ver qué reglas CSS le afectan y probar cambios en directo sin tocar tus archivos. Es la mejor forma de entender por qué algo no se ve como esperabas.

Errores típicos al empezar

• La imagen no aparece: la ruta de src no coincide con el nombre real del archivo. Ojo con mayúsculas y extensiones (foto.JPG no es foto.jpg en muchos servidores).
• Salen símbolos raros en lugar de tildes: falta <meta charset="utf-8"> o el archivo no está guardado en UTF-8.
• El CSS no se aplica: revisa que el href del <link> coincide con el nombre del archivo y que no falta ningún ; o }.
• Colores poco legibles: comprueba el contraste entre texto y fondo con nuestro selector de colores con contraste.

Cuando tu página esté lista, puedes añadirle interactividad con JavaScript y publicarla gratis en internet.