Cómo crear tu primera página web con HTML y CSS (paso a paso)

Por /

En este tutorial vas a crear tu primera página web desde cero: una tarjeta de presentación con un nombre, una breve descripción, las tecnologías que estás aprendiendo y dos botones. Solo necesitas HTML y CSS, y no hace falta experiencia previa: cada línea de código está explicada.

Si todavía no tienes claro qué son HTML y CSS o en qué se diferencian, te conviene leer antes HTML y CSS: qué son y para qué sirven. Aquí pasamos directamente a la práctica.

Tarjeta de presentación terminada con HTML y CSS: avatar con iniciales, nombre, descripción, etiquetas y dos botones
Este es el resultado que tendrás al terminar el tutorial.

Qué necesitas antes de empezar

Dos cosas, y las dos son gratuitas:

  • Un editor de código. Te recomiendo Visual Studio Code, pero sirve cualquiera, incluso el Bloc de notas.
  • Un navegador web: Chrome, Firefox, Edge o Safari.

No hace falta instalar nada más ni conectarse a internet: la página funcionará directamente desde tu ordenador.

Paso 1: crea la carpeta y los dos archivos

Crea una carpeta nueva en tu ordenador llamada mi-tarjeta. Dentro, crea dos archivos vacíos:

  • index.html: contendrá la estructura y el contenido de la página.
  • estilos.css: contendrá el diseño.
mi-tarjeta/
├── index.html
└── estilos.css

El nombre index.html no es casual: es el archivo que los servidores web buscan por defecto como página principal. Acostúmbrate a usarlo desde el principio.

Cuidado en Windows: si creas los archivos con el Bloc de notas, Windows puede guardarlos como index.html.txt sin que lo veas, porque oculta las extensiones. Para comprobarlo, abre el Explorador de archivos y activa la opción «Extensiones de nombre de archivo» en el menú Vista (en Windows 11 está dentro de Vista → Mostrar).

Paso 2: la estructura básica de HTML

Abre index.html en tu editor y escribe esto:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi tarjeta de presentación</title>
</head>
<body>

</body>
</html>

Esta es la estructura que tiene cualquier página web. Línea a línea:

  • <!DOCTYPE html> le dice al navegador que es un documento HTML moderno.
  • <html lang="es"> envuelve toda la página e indica que el contenido está en español, algo que usan los buscadores y los lectores de pantalla.
  • <head> contiene información sobre la página que no se muestra directamente en ella.
  • <meta charset="UTF-8"> permite mostrar bien tildes, eñes y otros caracteres especiales.
  • <meta name="viewport" ...> hace que la página se adapte al ancho de los móviles. Sin ella, el móvil mostraría la página como un ordenador en miniatura.
  • <title> es el texto que aparece en la pestaña del navegador.
  • <body> contendrá todo lo que sí se ve en la página.

Guarda el archivo y ábrelo con doble clic. Verás una página en blanco, pero con «Mi tarjeta de presentación» en la pestaña del navegador. Es la señal de que todo va bien.

Paso 3: añade el contenido de la tarjeta

Ahora escribe el contenido dentro de <body>, entre la etiqueta de apertura y la de cierre:

<main class="tarjeta">

  <div class="avatar">ZV</div>

  <h1>ZarVas</h1>
  <p class="rol">Estudiante de Ingeniería Telemática</p>

  <p class="bio">
    Empecé a programar en la universidad y ahora comparto lo que aprendo
    para ayudar a quien está empezando desde cero.
  </p>

  <h2>Lo que estoy aprendiendo</h2>
  <ul class="aprendiendo">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>

  <div class="enlaces">
    <a href="https://easycodeblog.com">Mi blog</a>
    <a href="mailto:tucorreo@ejemplo.com">Escríbeme</a>
  </div>

</main>

Qué hace cada elemento:

  • <main> agrupa el contenido principal de la página. Le damos class="tarjeta" para poder darle estilo después desde el CSS.
  • <div class="avatar"> es una caja genérica. Aquí contiene las iniciales, que luego convertiremos en un círculo.
  • <h1> es el título principal. Cada página debería tener solo uno.
  • <p> es un párrafo. Los dos párrafos tienen clases distintas (rol y bio) porque tendrán estilos diferentes.
  • <h2> es un subtítulo, de un nivel inferior a <h1>.
  • <ul> y <li> crean una lista: ul es la lista y cada li es uno de sus elementos.
  • <a href="..."> crea un enlace. El valor de href indica adónde lleva; con mailto: se abre el programa de correo.

Cambia el nombre, la descripción y los enlaces por los tuyos. Guarda y recarga el navegador con F5:

La tarjeta de presentación solo con HTML, sin CSS: texto negro sobre fondo blanco y lista con viñetas
Así se ve la página solo con HTML, antes de añadir el CSS.

El resultado no es bonito, y es normal. HTML solo define qué hay en la página y en qué orden. El aspecto (colores, tamaños, posiciones) es trabajo de CSS.

Paso 4: conecta el archivo CSS

Para que la página use estilos.css, añade esta línea dentro de <head>, justo después de <title>:

<link rel="stylesheet" href="estilos.css">

El atributo href indica dónde está el archivo. Como index.html y estilos.css están en la misma carpeta, basta con el nombre. Si el CSS estuviera en una subcarpeta llamada css, escribirías href="css/estilos.css".

Truco para comprobar que funciona: escribe en estilos.css la regla body { background-color: red; }, guarda y recarga. Si el fondo se vuelve rojo, el archivo está bien conectado. Si no cambia nada, revisa el nombre del archivo y la ruta. Después, borra esa línea.

Paso 5: da estilo a la tarjeta

Ahora sí, el diseño. Escribe estas reglas en estilos.css, empezando por la página en general:

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e8eef3;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1f2a37;
}

Una regla CSS tiene un selector (a qué elementos se aplica; aquí, body) y, entre llaves, una serie de propiedades con sus valores. La clave de esta regla es display: flex, que activa Flexbox, un sistema para colocar elementos. Con justify-content y align-items centramos la tarjeta en horizontal y en vertical, y min-height: 100vh hace que la página ocupe toda la altura de la ventana (vh significa «altura de la ventana»).

Ahora, la tarjeta y el círculo de las iniciales:

.tarjeta {
  width: 100%;
  max-width: 380px;
  margin: 24px;
  padding: 32px;
  background-color: #ffffff;
  border: 1px solid #cdd8e2;
  border-radius: 16px;
  text-align: center;
}

.avatar {
  width: 88px;
  height: 88px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background-color: #1d4ed8;
  color: #ffffff;
  font-size: 32px;
  font-weight: bold;
  line-height: 88px;
}

El punto delante de tarjeta indica que es una clase: .tarjeta se aplica al elemento que tiene class="tarjeta". Algunos detalles importantes:

  • max-width: 380px limita el ancho de la tarjeta, mientras que width: 100% le permite estrecharse en pantallas pequeñas.
  • border-radius redondea las esquinas. Con un valor de 50% en un elemento cuadrado, obtienes un círculo.
  • margin: 0 auto 16px pone 0 de margen arriba, auto a los lados (lo que centra el elemento) y 16 píxeles abajo.
  • Dar a line-height el mismo valor que la altura del círculo centra verticalmente las iniciales.

Por último, los textos y la lista de tecnologías:

h1 {
  margin: 0;
  font-size: 28px;
}

.rol {
  margin: 4px 0 20px;
  color: #1d4ed8;
  font-weight: 600;
}

.bio {
  line-height: 1.6;
  color: #4b5563;
}

h2 {
  margin: 24px 0 12px;
  font-size: 16px;
}

.aprendiendo {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.aprendiendo li {
  padding: 4px 12px;
  border: 1px solid #1d4ed8;
  border-radius: 999px;
  font-size: 14px;
}

list-style: none quita las viñetas de la lista, y con display: flex sus elementos se colocan en fila en lugar de uno debajo de otro. gap define la separación entre ellos. El selector .aprendiendo li se lee como «los li que están dentro de .aprendiendo».

Paso 6: botones, efecto al pasar el ratón y versión móvil

Faltan los enlaces, que queremos que parezcan botones:

.enlaces {
  margin-top: 28px;
  display: flex;
  gap: 12px;
}

.enlaces a {
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  background-color: #1d4ed8;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}

.enlaces a:hover {
  background-color: #1e3a8a;
}

text-decoration: none quita el subrayado de los enlaces y flex: 1 hace que los dos botones se repartan el espacio a partes iguales. :hover es una pseudoclase: sus estilos solo se aplican mientras el ratón está encima del elemento, en este caso oscureciendo el azul.

Y un último detalle para móviles:

@media (max-width: 420px) {
  .tarjeta {
    padding: 24px;
  }

  .enlaces {
    flex-direction: column;
  }
}

Una media query aplica estilos solo cuando se cumple una condición; aquí, que la pantalla mida 420 píxeles de ancho o menos. En ese caso reducimos el relleno de la tarjeta y colocamos los botones uno debajo del otro, porque en una pantalla estrecha no caben bien uno al lado del otro.

Para probarlo sin móvil, pulsa F12 en el navegador y activa la vista de dispositivo (el icono de un móvil y una tableta, en la parte superior de las herramientas de desarrollador).

Tarjeta de presentación en la pantalla de un móvil, con los dos botones uno debajo del otro
La misma tarjeta en la pantalla de un móvil.

El código completo

Si algo no te funciona, compara tu código con la versión completa de los dos archivos:

index.html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi tarjeta de presentación</title>
  <link rel="stylesheet" href="estilos.css">
</head>
<body>

  <main class="tarjeta">

    <div class="avatar">ZV</div>

    <h1>ZarVas</h1>
    <p class="rol">Estudiante de Ingeniería Telemática</p>

    <p class="bio">
      Empecé a programar en la universidad y ahora comparto lo que aprendo
      para ayudar a quien está empezando desde cero.
    </p>

    <h2>Lo que estoy aprendiendo</h2>
    <ul class="aprendiendo">
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>

    <div class="enlaces">
      <a href="https://easycodeblog.com">Mi blog</a>
      <a href="mailto:tucorreo@ejemplo.com">Escríbeme</a>
    </div>

  </main>

</body>
</html>

estilos.css

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e8eef3;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1f2a37;
}

.tarjeta {
  width: 100%;
  max-width: 380px;
  margin: 24px;
  padding: 32px;
  background-color: #ffffff;
  border: 1px solid #cdd8e2;
  border-radius: 16px;
  text-align: center;
}

.avatar {
  width: 88px;
  height: 88px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background-color: #1d4ed8;
  color: #ffffff;
  font-size: 32px;
  font-weight: bold;
  line-height: 88px;
}

h1 {
  margin: 0;
  font-size: 28px;
}

.rol {
  margin: 4px 0 20px;
  color: #1d4ed8;
  font-weight: 600;
}

.bio {
  line-height: 1.6;
  color: #4b5563;
}

h2 {
  margin: 24px 0 12px;
  font-size: 16px;
}

.aprendiendo {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.aprendiendo li {
  padding: 4px 12px;
  border: 1px solid #1d4ed8;
  border-radius: 999px;
  font-size: 14px;
}

.enlaces {
  margin-top: 28px;
  display: flex;
  gap: 12px;
}

.enlaces a {
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  background-color: #1d4ed8;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}

.enlaces a:hover {
  background-color: #1e3a8a;
}

@media (max-width: 420px) {
  .tarjeta {
    padding: 24px;
  }

  .enlaces {
    flex-direction: column;
  }
}

Errores comunes al crear tu primera página web

  • El archivo se llama index.html.txt. Ocurre en Windows cuando las extensiones están ocultas (lo viste en el paso 1). El navegador abrirá el archivo como texto plano en lugar de como página web.
  • Los estilos no se aplican. Casi siempre es la ruta: el nombre del archivo en href no coincide exactamente (las mayúsculas también cuentan) o los dos archivos no están en la misma carpeta.
  • Olvidar el punto en las clases. En CSS, tarjeta { } busca una etiqueta <tarjeta>, que no existe. Lo correcto es .tarjeta { }.
  • Dejar una llave sin cerrar. Una } olvidada puede hacer que todas las reglas que van detrás dejen de funcionar.
  • No guardar antes de recargar. El navegador muestra la última versión guardada del archivo, no lo que tienes en pantalla en el editor.

Practica: personaliza tu tarjeta

  1. Cambia el color principal. El azul #1d4ed8 aparece en varias reglas: sustitúyelo por otro color en todas ellas. Verás que repetir el mismo valor en tantos sitios es incómodo; CSS tiene una solución para eso que veremos más adelante.
  2. Pon una foto en lugar de las iniciales. Sustituye el div del avatar por <img src="foto.jpg" alt="Tu nombre" class="avatar"> y añade display: block; y object-fit: cover; a la regla .avatar.
  3. Añade una sección «Proyectos» con un <h2> y una lista de enlaces.
  4. Añade un tercer botón (por ejemplo, a tu perfil de GitHub) y comprueba cómo se ve en la vista móvil.

Siguiente paso

Tu tarjeta ya se ve bien, pero es estática: no reacciona a nada de lo que haga el usuario. Para añadir interactividad, como un botón que cambie entre modo claro y oscuro, necesitarás JavaScript. Si quieres saber qué es y qué puedes hacer con él, sigue con Qué es JavaScript y para qué sirve.

Y si quieres consultar todas las etiquetas HTML y propiedades CSS disponibles, la referencia más completa en español es MDN Web Docs: su referencia de elementos HTML y su documentación de CSS.

Siguiente paso de la ruta

Qué es JavaScript y para qué sirve

También te puede interesar

ZarVas

Estudiante de Ingeniería Telemática y creador de Easy Code Blog. Escribo las guías que me habría gustado encontrar cuando empecé a programar. Conoce más sobre mí

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio