Cómo hacer una página web en HTML y CSS desde cero: 7 pasos

Para hacer una página web en HTML y CSS desde cero, necesitas crear dos archivos en una misma carpeta: index.html para el contenido y estilos.css para el diseño. Después los conectas con una etiqueta link, abres la página en un navegador y compruebas cómo se adapta a móvil. Aquí tienes un ejemplo funcional con cabecera, presentación, tres tarjetas y pie de página. El código de esta guía se ha ejecutado realmente en Chromium y las capturas muestran el resultado del ejemplo, no pantallas inventadas.

No necesitas comprar alojamiento para aprender los primeros pasos: puedes practicar localmente en tu equipo. Publicar el sitio para otras personas será una fase diferente. Si todavía no has elegido si usar HTML, WordPress o un constructor visual, visita primero nuestra guía general para hacer una página web. Este tutorial se centra en escribir los archivos manualmente y entender por qué funcionan.

Qué necesitas para crear una página en HTML

HTML define la estructura y el significado de los elementos: títulos, párrafos, enlaces y secciones. CSS añade tipografía, colores, espacios y distribución. Para este ejemplo basta un editor de texto sencillo y un navegador actualizado. MDN Web Docs, la documentación educativa de Mozilla, recomienda comenzar con un proyecto pequeño antes de introducir interactividad y despliegues más complejos.

Puedes usar un editor de código como Visual Studio Code, pero este tutorial no depende de una versión concreta ni exige instalar extensiones. Lo importante es guardar archivos de texto con las extensiones correctas. Si tu sistema oculta las extensiones, comprueba que no hayas creado accidentalmente index.html.txt o estilos.css.txt.

La carpeta del proyecto

Crea una carpeta llamada, por ejemplo, mi-primera-web. Dentro estarán index.html y estilos.css. En este ejemplo ambos archivos están en el mismo nivel, por lo que la referencia desde HTML es simplemente href="estilos.css". Si los colocas en carpetas distintas, tendrás que ajustar la ruta.

Para practicar es conveniente evitar nombres de archivos con espacios y caracteres especiales. No es una prohibición técnica, pero simplifica las rutas y reduce errores al empezar. La explicación de rutas y manejo de archivos de MDN puede ayudarte a entender dónde buscar si una hoja CSS no aparece.

Cómo hacer una página web en HTML y CSS en 7 pasos

Paso 1. Crea el archivo index.html

Abre tu editor, crea un archivo nuevo y guárdalo como index.html. La estructura básica empieza con <!doctype html>, sigue con la etiqueta <html lang="es">, contiene la cabecera <head> y finalmente el contenido visible dentro de <body>. No confundas la cabecera técnica head con el encabezado visual header.

En head colocamos el conjunto de caracteres UTF-8, el título que muestra la pestaña del navegador y la etiqueta viewport para que la visualización en pantallas pequeñas tenga el tamaño esperado. MDN explica que los elementos HTML deben estar correctamente anidados: una etiqueta abierta dentro de otra se cierra antes de cerrar el elemento exterior.

Paso 2. Añade contenido organizado y accesible

Dentro de body crea un encabezado con el nombre del sitio, un menú con tres enlaces, una sección de presentación y otra para los proyectos. Usa un único título principal h1 y organiza las demás secciones con h2 y h3. Esta estructura ayuda a los lectores y a las tecnologías de asistencia a comprender el contenido.

El menú utiliza enlaces a identificadores de la misma página, como href="#proyectos" y id="proyectos". De este modo, al pulsar el enlace se accede a esa sección sin abrir otra URL. El contacto del ejemplo usa hola@example.com, una dirección de demostración que debes sustituir por una dirección real antes de publicar.

Paso 3. Copia el HTML funcional

Este es el archivo HTML completo del ejemplo que se ha probado en el navegador. Pégalo en index.html y guarda los cambios. Es un sitio educativo de una sola página, con estructura semántica y sin scripts de terceros. Los nombres, textos y proyectos son de demostración; modifícalos para tu caso.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Un pequeño sitio de ejemplo hecho con HTML y CSS.">
  <title>Mi primer sitio web</title>
  <link rel="stylesheet" href="estilos.css">
</head>
<body>
  <header class="cabecera">
    <a class="marca" href="#inicio">Mi primera web</a>
    <nav aria-label="Navegación principal">
      <a href="#acerca">Acerca de</a>
      <a href="#proyectos">Proyectos</a>
      <a href="mailto:hola@example.com">Contacto</a>
    </nav>
  </header>
  <main id="inicio">
    <section class="portada">
      <p class="eyebrow">UN EJEMPLO REAL · HTML + CSS</p>
      <h1>Hola, estoy creando mi primera página web</h1>
      <p>Una web pequeña, legible y adaptable a cualquier pantalla.</p>
      <a class="boton" href="#proyectos">Ver proyectos</a>
    </section>
    <section id="acerca" class="seccion">
      <h2>Acerca de mí</h2>
      <p>Estoy aprendiendo a dar estructura con HTML y estilo con CSS. Este sitio demuestra cómo funcionan juntos.</p>
    </section>
    <section id="proyectos" class="seccion">
      <h2>Mis proyectos</h2>
      <div class="tarjetas">
        <article class="tarjeta"><span aria-hidden="true">✏️</span><h3>Proyecto de escritura</h3><p>Organizo mis ideas en una página sencilla.</p></article>
        <article class="tarjeta"><span aria-hidden="true">🌿</span><h3>Proyecto de naturaleza</h3><p>Guardo notas de mis paseos favoritos.</p></article>
        <article class="tarjeta"><span aria-hidden="true">📷</span><h3>Proyecto de fotos</h3><p>Preparo una pequeña galería personal.</p></article>
      </div>
    </section>
  </main>
  <footer>© 2026 · Ejemplo educativo · Hecho con HTML y CSS</footer>
</body>
</html>

La etiqueta nav lleva una descripción accesible. Cada tarjeta se ha creado con article porque representa un elemento independiente de la sección de proyectos. Los emojis son decorativos y se han marcado como ocultos para lectores de pantalla. No se han añadido imágenes externas, formularios de recopilación de datos ni elementos que requieran JavaScript.

Paso 4. Crea el archivo estilos.css

En la misma carpeta, crea estilos.css. El CSS comienza con estilos generales y luego contiene clases como .cabecera, .portada y .tarjetas. La regla de box-sizing: border-box simplifica el cálculo del tamaño de los elementos. La clase .tarjetas usa CSS Grid para repartir las tarjetas en tres columnas cuando hay espacio suficiente.

El color verde y el botón claro son decisiones de diseño del ejemplo; no son requisitos de HTML. Puedes cambiar paleta, tamaño de letra o separaciones. Para aprender qué hace una regla CSS, modifica una propiedad a la vez y recarga la página para observar la diferencia.

:root { color-scheme: light; font-family: system-ui, -apple-system, sans-serif; color: #1c3431; background: #f7faf7; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; line-height: 1.6; }
a { color: inherit; }
.cabecera { display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; padding: 1rem max(5vw, 24px); background: white; border-bottom: 1px solid #dde9e2; }
.marca { font-weight: 800; font-size: 1.2rem; text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: 1.3rem; }
nav a { font-size: .95rem; text-decoration: none; }
nav a:hover { text-decoration: underline; }
.portada { background: linear-gradient(135deg,#1e6354,#376f68); color: white; padding: 6rem max(5vw,24px); }
.portada h1 { max-width: 860px; line-height: 1.1; font-size: clamp(2.5rem,5vw,4.4rem); margin: .4rem 0 1rem; }
.portada p { max-width: 650px; font-size: 1.12rem; }
.eyebrow { font-size: .75rem !important; font-weight: bold; letter-spacing: .13em; }
.boton { display: inline-block; color: #21433b; background: #f6df98; padding: .75rem 1.2rem; border-radius: 10px; text-decoration: none; font-weight: 700; margin-top: .7rem; }
.boton:focus-visible, a:focus-visible { outline: 3px solid #f5b53f; outline-offset: 4px; }
.seccion { padding: 3.5rem max(5vw,24px); max-width: 1200px; margin: auto; }
h2 { font-size: 2rem; margin: 0 0 .75rem; }
.tarjetas { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin-top: 1.5rem; }
.tarjeta { border: 1px solid #d2e2d9; border-radius: 15px; background: white; padding: 1.6rem; }
.tarjeta span { font-size: 1.8rem; }
.tarjeta h3 { margin: .8rem 0 .4rem; }
.tarjeta p { margin: 0; }
footer { text-align: center; background: #e8f0eb; padding: 1.8rem 1rem; }
@media (max-width: 650px) { .cabecera { flex-direction: column; align-items: flex-start; } nav { gap: .8rem; } .portada { padding: 3.5rem 24px; } .tarjetas { grid-template-columns: 1fr; } }

Paso 5. Conecta los archivos y comprueba los estilos

Dentro del elemento head del HTML hay una etiqueta <link rel="stylesheet" href="estilos.css">. Esta ruta indica que el navegador debe leer el archivo CSS de la misma carpeta. Según MDN, primeros pasos con CSS, una forma sencilla de verificar la conexión consiste en cambiar temporalmente el color de un título y observar si la página se actualiza.

En nuestro ejemplo el CSS asigna fondo claro, un bloque principal verde, un botón de color crema y tarjetas con borde fino. Si solamente ves texto sin diseño, comprueba que estilos.css exista y que el nombre coincida exactamente con la ruta del link. También puedes revisar la consola de desarrollador del navegador para localizar un error de carga del archivo.

Paso 6. Haz que el diseño se adapte al móvil

El CSS incluye @media (max-width: 650px). Cuando el ancho de la ventana es de 650 píxeles o menos, la cabecera pasa de disposición horizontal a vertical y las tarjetas dejan de formar tres columnas para colocarse una debajo de otra. El título principal utiliza clamp() para ajustar su tamaño de manera gradual.

No basta con reducir el tamaño del texto: prueba que las columnas, los botones y los enlaces continúen siendo utilizables. La regla grid-template-columns: 1fr es la responsable de que cada tarjeta ocupe su propia fila en una pantalla estrecha. Si introduces imágenes en el futuro, añade dimensiones y alternativas descriptivas en el atributo alt.

Paso 7. Prueba los enlaces y revisa el resultado

Abre index.html en tu navegador y comprueba que se vea el título, el botón y las tres tarjetas. Haz clic en «Ver proyectos» para comprobar que el ancla lleva a la sección correspondiente. Después estrecha la ventana o utiliza las herramientas de visualización móvil. Si algo se desborda horizontalmente, identifica qué elemento está fijando un ancho demasiado grande.

El ejemplo de este artículo se cargó en Chromium con HTML y CSS reales. Se evaluó el diseño a 1366 píxeles de escritorio y 390 píxeles de móvil: tres columnas de tarjetas en el primero, una en el segundo y sin desbordamiento horizontal en el ancho móvil. El entorno de pruebas no permite abrir directamente archivos file://, así que para las capturas se cargó el mismo HTML y se aplicó la hoja CSS desde el contenido local en el navegador. Esto verifica el renderizado de los estilos, pero no sustituye comprobar la ruta de archivos en tu equipo.

Cómo interpretar las capturas del ejemplo

La primera imagen interior muestra la página de ejemplo renderizada en un navegador de escritorio. La segunda enseña la sección de proyectos con tarjetas en una cuadrícula real de CSS. La tercera presenta la adaptación de la página a 390 píxeles. Son capturas del código que aparece en el artículo, recortadas y enmarcadas para facilitar su lectura, no una interfaz creada mediante IA ni una captura de WordPress, Wix o un proveedor de hosting.

La imagen destacada es una composición editorial hecha a partir de la captura auténtica. Es útil para presentar el tutorial, pero no debe confundirse con una plantilla profesional completa. La prueba se limita al ejemplo local; no hemos subido el proyecto a un servidor público ni hemos simulado una publicación que no haya sucedido.

Cómo publicar la página cuando esté lista

Mientras los archivos están en tu ordenador, la página solo es accesible allí. Para que otra persona pueda verla necesitas colocar los archivos en un alojamiento web o utilizar un servicio adecuado para sitios estáticos. Asegúrate de subir tanto index.html como estilos.css, respetando sus nombres y rutas. Si subes solo el HTML, el sitio puede quedarse sin estilos.

La documentación de MDN sobre publicación de un sitio web explica opciones como GitHub Pages para proyectos sencillos. No todos los servicios permiten los mismos dominios, límites o condiciones, por lo que debes consultar las instrucciones actuales del proveedor que elijas. Este tutorial no afirma haber creado una cuenta ni haber publicado el sitio en uno de esos servicios.

Antes de compartir el enlace público, reemplaza los textos de ejemplo, elimina el correo ficticio y comprueba todos los enlaces. Si vas a usar datos de contacto de terceros, fotografías de personas o formularios, revisa también los permisos y la información de privacidad que corresponda. Para conocer opciones de dominio y alojamiento, consulta la guía general de creación de páginas web.

Errores habituales al hacer una web con HTML y CSS

Guardar los archivos con una extensión equivocada

Un archivo llamado index.html.txt puede abrirse como texto en lugar de mostrar una web. Revisa la extensión real y, si tu sistema oculta extensiones, activa su visualización. Haz lo mismo con estilos.css.

Romper la ruta entre HTML y CSS

Si la hoja CSS está dentro de una carpeta css, el atributo href debe apuntar a css/estilos.css. La ruta del ejemplo solo funciona si ambos archivos están al mismo nivel. No uses una ruta absoluta de tu ordenador para una futura publicación web.

Cerrar mal etiquetas o colocar elementos en el lugar equivocado

La sintaxis HTML admite elementos anidados, pero exige un orden correcto de cierre. Si un título o un párrafo aparece de manera extraña, revisa qué etiquetas has abierto y cerrado. La guía de sintaxis básica de MDN muestra ejemplos de anidación y atributos.

Diseñar solo pensando en pantallas grandes

Tres tarjetas que quedan bien en el ordenador pueden ser difíciles de leer si se mantienen apretadas en un móvil. Prueba distintas anchuras y añade reglas de diseño adaptable. No ocultes contenido importante por falta de espacio sin valorar antes una alternativa de distribución.

Confundir un sitio local con una publicación pública

Ver la página en tu navegador no significa que otras personas puedan entrar. Una URL que comienza con file:// o un servidor local sigue perteneciendo a tu entorno. La publicación real necesita un servicio accesible desde internet y una comprobación posterior.

Preguntas frecuentes

¿Se puede hacer una web solo con HTML sin CSS?

Sí, HTML permite estructurar texto, enlaces y otros elementos. Sin embargo, si quieres controlar colores, espacios y distribución, CSS resulta útil. El ejemplo combina ambos archivos para enseñar cómo colaboran.

¿Necesito saber JavaScript para empezar?

No. Puedes publicar una página informativa sencilla con HTML y CSS. JavaScript será útil para interacciones más avanzadas, pero no hace falta añadirlo si todavía estás aprendiendo la estructura básica.

¿Cuántos archivos necesita el ejemplo?

Dos: index.html y estilos.css, guardados en la misma carpeta. El HTML contiene el contenido, y el CSS establece la apariencia. Podrías dividir el proyecto en más archivos más adelante.

¿Cómo puedo comprobar que el diseño es responsive?

Abre las herramientas de desarrollo de tu navegador o cambia el ancho de la ventana. Observa si el menú, los párrafos y las tarjetas siguen siendo legibles. En nuestro ejemplo se comprobó una vista de escritorio de 1366 píxeles y una vista móvil de 390 píxeles.

¿HTML y CSS sirven para crear una tienda online?

Son tecnologías fundamentales de la web, pero una tienda real exige más componentes, como gestión de productos, pedidos, pagos y seguridad. No presentes este ejemplo informativo como si fuera un sistema de comercio electrónico listo para usar.

¿Qué diferencia hay con una página hecha en WordPress?

Con HTML y CSS controlas directamente los archivos del sitio. WordPress es un sistema de gestión de contenidos que incorpora panel de administración, plantillas y otras funciones. Son caminos distintos, por lo que una guía sobre WordPress no debe copiar los pasos de este tutorial de archivos estáticos.

Fuentes y alcance de la prueba

La estructura de los archivos y los conceptos se han contrastado con MDN: tu primer sitio web, sintaxis básica de HTML, introducción a CSS y publicación de sitios estáticos. El código, los textos de demostración y las capturas son originales. La prueba real se limitó al navegador Chromium en entorno local con HTML y CSS aplicados; no se atribuyen a herramientas de terceros ni se afirma haber publicado un dominio de ejemplo.