Cómo hacer una página web con HTML y CSS (proyecto completo) | We.Inc
Crea una web completa de una página con HTML y CSS: estructura, cabecera, portada, secciones, formulario de contacto, pie, diseño adaptable y publicación, con vista previa en vivo.
Cómo hacer una página web con HTML y CSS
Crea una carpeta con dos archivos de texto plano: index.html para el contenido y styles.css para el aspecto. Empieza index.html con la estructura estándar (doctype, html, head, body), enlaza la hoja de estilos en el head, añade una cabecera, las secciones principales y un pie, y abre el archivo en un navegador. Sube la carpeta a cualquier hosting estático para publicarla.
El proyecto completo en seis pasos
Paso
Archivo
Qué añades
1. Esqueleto
doctype, html lang, head con charset, viewport y title
2. Estructura
header, nav, main con secciones, footer
3. Contenido
Encabezados, párrafos, una imagen con texto alternativo, un formulario
4. Estilo
Fuente, colores, espaciado, un ancho de contenido centrado
5. Maquetación
Flexbox para la cabecera, grid para las tarjetas, una media query
6. Publicación
Ambos
Sube la carpeta a un hosting estático
Este es el proyecto entero, no solo el primer archivo. Vas a crear la página de un pequeño negocio desde una carpeta vacía hasta un diseño adaptable, y el constructor de abajo te permite escribir tu propio nombre y tus datos y ver cómo se actualiza la página terminada. Cada fragmento está completo, así que puedes copiar los dos archivos finales y abrirlos al momento.
Crea una carpeta nueva en tu ordenador y dentro crea index.html y styles.css con cualquier editor de texto plano.
Rellena los campos del constructor de abajo para dar forma a la página y copia los dos archivos generados en tu carpeta.
Haz doble clic en index.html para abrirlo en el navegador. Edita, guarda y recarga para ver cada cambio.
Lee las secciones de cada paso para entender qué hace cada parte del código y poder cambiarlo con seguridad.
Cuando estés satisfecho, publica la carpeta con una de las opciones de hosting del final.
Usa un editor de código como VS Code en lugar de un procesador de textos, que añade un formato que los navegadores no pueden leer.
Ponle a la página de inicio el nombre index.html. La mayoría de los hostings sirven ese archivo automáticamente cuando alguien visita la dirección de la carpeta.
Usa nombres de archivo en minúsculas y sin espacios, por ejemplo about-us.html, porque muchos servidores distinguen mayúsculas de minúsculas.
Comprueba tu trabajo en la barra de dispositivos de las herramientas para desarrolladores del navegador con un ancho estrecho de teléfono antes de publicar.
Pasa la página por un validador HTML. Detecta etiquetas sin cerrar que los navegadores corrigen en silencio.
Preguntas frecuentes
¿Tengo que pagar algo para hacer una web en HTML?
No. Escribir los archivos solo requiere un editor de texto y un navegador, ambos gratuitos. Varios hostings estáticos tienen planes gratuitos para sitios pequeños; un nombre de dominio propio suele ser el único coste si lo quieres.
¿Por qué necesito la etiqueta meta viewport?
Sin ella, los navegadores de los teléfonos maquetan la página a un ancho de escritorio y la encogen, así que el texto queda diminuto. width=device-width les indica que usen el ancho real de la pantalla, que es lo que hace que las media queries funcionen bien.
¿Una web solo con HTML puede tener formulario de contacto?
El HTML dibuja el formulario, pero algo tiene que recibir el envío. En un hosting estático, apunta el action del formulario a un servicio de gestión de formularios o a la función de formularios integrada de tu hosting. Un enlace mailto: es la alternativa más sencilla.
¿Cómo añado más páginas?
Crea otro archivo, como about.html, con la misma cabecera y el mismo pie, enlázalo con <a href="about.html">About</a> y comparte un único styles.css entre ellos. Cada página debe tener su propio title y su propio h1.
¿Debería usar un framework?
No para un primer sitio. El HTML y CSS sencillos cargan rápido, no necesitan compilación y te enseñan lo que cualquier framework genera por debajo. Recurre a un framework cuando necesites componentes compartidos entre muchas páginas o un comportamiento propio de una aplicación.
Las etiquetas semánticas cumplen una función real
header, nav, main, section y footer no son solo nombres más ordenados para div. Los lectores de pantalla los presentan como landmarks entre los que se puede saltar, y los buscadores los usan para distinguir el contenido principal de los menús repetidos.
Usa un h1 para el tema de la página y un h2 para cada sección. El esquema de encabezados debería leerse como un índice si lo listas por separado.
Un diseño pensado primero para teléfonos
Escribe como base el diseño de una columna para teléfono, ya que los bloques se apilan en vertical por sí solos. Después añade una media query con min-width para activar las columnas cuando haya espacio.
Limita el ancho de lectura con max-width en un contenedor y céntralo con margin-inline: auto. Las líneas se mantienen cómodas en pantallas anchas sin reglas adicionales.
Publicar tu carpeta
Un hosting estático sirve tus archivos tal cual, que es todo lo que necesita un sitio en HTML y CSS. Las opciones habituales te permiten arrastrar la carpeta a un panel o conectar un repositorio Git para que cada push actualice el sitio en vivo.
Después de subirlo, abre la dirección pública en tu teléfono, haz clic en cada enlace y envía el formulario una vez para confirmar que te llega.
Paso 1: el esqueleto de la página
Toda página HTML empieza con las mismas pocas líneas. El doctype mantiene los navegadores en modo estándar, lang indica a los lectores de pantalla en qué idioma hablar y la etiqueta viewport hace que los teléfonos usen su ancho real.
Punto de partida de index.html
Guárdalo, ábrelo en un navegador y ya tienes una página válida con título en la pestaña.
Pasos 2 y 3: estructura y contenido
Dentro de body, un header contiene el nombre y el menú, main contiene las secciones y un footer cierra la página. El resultado en vivo de abajo aún no tiene estilos, lo que demuestra lo legible que es un buen HTML por sí solo.
Cabecera, portada, tarjetas, formulario de contacto y pie
Edita el texto y el resultado se actualiza. Fíjate en las etiquetas del formulario: al hacer clic en una etiqueta se enfoca su campo.
Pon esto en styles.css junto a index.html. Define una tipografía legible, una columna centrada, una cabecera con flex y una cuadrícula de tarjetas que pasa a tres columnas en pantallas más anchas.
La hoja de estilos completa
Envuelve el interior de header, main y footer en <div class="wrap"> para centrar el contenido, como hace el resultado del constructor.
Paso 6: publicar
Formas de poner en línea una carpeta estática
Opción
Ideal para
Qué haces
Hosting estático de arrastrar y soltar
Tu primer sitio
Sube la carpeta desde el panel del hosting
Hosting estático conectado a Git
Sitios que seguirás editando
Haz push a un repositorio; el hosting vuelve a desplegar
Hosting web compartido
Sitios que también necesitan correo o PHP
Sube los archivos con el gestor de archivos o por SFTP a la carpeta pública
Un creador de sitios web
Saltarte el código por completo
Describe el sitio y edítalo de forma visual
Panadería del Puerto
Pan de masa madre recién hecho, horneado antes del amanecer.
Pan de masa madre de campo
Centeno con semillas
Bollería de fin de semana
Construye tu página
Escribe el nombre de tu negocio, tu eslogan y tres productos. La vista previa y los dos archivos se actualizan mientras escribes, listos para copiar.