Un ejemplo de página web, con el código a la vista.
Esta misma página es el ejemplo. Abajo están sus piezas sueltas —encabezado, botones, tarjetas, formulario, precios y pie— en HTML y CSS listos para copiar y pegar en la tuya. Sin librerías, sin frameworks, sin nada que instalar.
El esqueleto mínimo
Todo lo demás va adentro de esto. Si arrancás un archivo index.html desde cero, copiá este bloque primero.
Guardalo como index.html, abrilo con doble clic y ya tenés una página funcionando en tu navegador. No hace falta ningún programa especial: sirve el Bloc de notas.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>El titulo de mi pagina</title> <meta name="description" content="Una descripcion breve, de una o dos lineas."> </head> <body> <h1>Hola</h1> <p>Mi primera pagina.</p> </body> </html>
Barra de navegación
Se queda pegada arriba cuando bajás, y esconde el menú en pantallas chicas.
<header class="barra">
<a href="/">Mi Marca</a>
<nav>
<a href="#">Inicio</a>
<a href="#">Servicios</a>
<a href="#">Contacto</a>
</nav>
</header>
<style>
.barra{
position:sticky; top:0;
display:flex; align-items:center; gap:1rem;
padding:.9rem 1.25rem;
background:#fff; border-bottom:1px solid #dde1e7;
}
.barra nav{ margin-left:auto; display:flex; gap:1.25rem; }
.barra a{ color:#5a6472; text-decoration:none; }
.barra a:hover{ color:#2f6fed; }
@media (max-width:640px){ .barra nav{ display:none; } }
</style>
Portada con título y botones
Lo primero que se ve. Una frase que explique qué hacés, un párrafo corto y dos botones.
Diseñamos sitios que cargan rápido
Sin plantillas infladas ni plugins de más. Tu página, el código justo y nada que sobre.
<div class="portada">
<h1>Disenamos sitios que cargan rapido</h1>
<p>Sin plantillas infladas ni plugins de mas.</p>
<a class="boton" href="#contacto">Pedir presupuesto</a>
<a class="boton secundario" href="#precios">Ver precios</a>
</div>
<style>
.portada{ padding:4rem 1.25rem; }
.portada h1{ font-size:clamp(1.9rem,5vw,3rem); line-height:1.15; margin:0 0 1rem; }
.portada p{ color:#5a6472; max-width:60ch; margin:0 0 1.75rem; }
.boton{
display:inline-block; padding:.7rem 1.4rem; margin-right:.5rem;
border-radius:10px; background:#2f6fed; color:#fff;
text-decoration:none; font-weight:600; border:1px solid transparent;
}
.boton.secundario{ background:transparent; color:#15181d; border-color:#dde1e7; }
</style>
Tarjetas en grilla
Se acomodan solas: tres por fila en escritorio, una debajo de otra en el teléfono. No hace falta escribir nada para el celular.
Rápido
Sin librerías externas. La página pesa lo que pesa el texto.
Adaptable
Se ve bien en teléfono, tablet y escritorio sin trabajo extra.
Editable
Es un archivo de texto. Lo abrís, lo cambiás, lo guardás.
<div class="tarjetas">
<div class="tarjeta">
<h3>Rapido</h3>
<p>Sin librerias externas.</p>
</div>
<div class="tarjeta">
<h3>Adaptable</h3>
<p>Se ve bien en cualquier pantalla.</p>
</div>
<div class="tarjeta">
<h3>Editable</h3>
<p>Es un archivo de texto.</p>
</div>
</div>
<style>
.tarjetas{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
gap:1rem;
}
.tarjeta{
border:1px solid #dde1e7; border-radius:10px;
padding:1.25rem; background:#fff;
}
.tarjeta h3{ margin:0 0 .4rem; }
.tarjeta p{ margin:0; color:#5a6472; }
</style>
Tabla de precios
Tres columnas, con una resaltada. El botón queda siempre abajo aunque los planes tengan distinta cantidad de puntos.
<div class="precios">
<div class="plan">
<span class="etiqueta">Basico</span>
<div class="precio">$0<small>/mes</small></div>
<ul><li>Una pagina</li><li>Formulario</li></ul>
<a class="boton" href="#">Empezar</a>
</div>
<div class="plan destacado"> ... </div>
<div class="plan"> ... </div>
</div>
<style>
.precios{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:1rem;
}
.plan{
border:1px solid #dde1e7; border-radius:10px; padding:1.5rem;
background:#fff; display:flex; flex-direction:column;
}
.plan.destacado{ border-color:#2f6fed; box-shadow:0 0 0 3px #e8efff; }
.plan .precio{ font-size:2.1rem; font-weight:700; margin:.35rem 0; }
.plan ul{ list-style:none; padding:0; margin:1rem 0 1.4rem; }
.plan li::before{ content:"\2713"; color:#2f6fed; margin-right:.5rem; }
.plan .boton{ margin-top:auto; text-align:center; }
</style>
Tabla de datos
Con desplazamiento lateral en pantallas chicas, para que no rompa el ancho de la página.
| Etiqueta | Para qué sirve | Ejemplo |
|---|---|---|
<h1> | El título principal. Uno solo por página. | Título de la nota |
<p> | Un párrafo de texto. | Este mismo renglón |
<a> | Un enlace a otra página. | Leer más |
<img> | Una imagen. | Una foto |
<div class="tabla-envoltorio">
<table>
<thead>
<tr><th>Etiqueta</th><th>Para que sirve</th></tr>
</thead>
<tbody>
<tr><td>h1</td><td>El titulo principal</td></tr>
<tr><td>p</td><td>Un parrafo</td></tr>
</tbody>
</table>
</div>
<style>
.tabla-envoltorio{ overflow-x:auto; }
table{ border-collapse:collapse; width:100%; min-width:440px; }
th,td{ text-align:left; padding:.65rem .8rem; border-bottom:1px solid #dde1e7; }
th{ background:#f6f7f9; font-size:.82rem; text-transform:uppercase; color:#5a6472; }
</style>
Formulario de contacto
El HTML del formulario es la parte fácil. Para que el mensaje llegue a tu correo necesitás algo que lo reciba: un servicio externo, o un archivo PHP en tu servidor.
<form class="formulario" action="https://formsubmit.co/tu@correo.com" method="POST">
<div class="campo">
<label for="nombre">Nombre</label>
<input id="nombre" name="nombre" type="text" required>
</div>
<div class="campo">
<label for="correo">Correo</label>
<input id="correo" name="correo" type="email" required>
</div>
<div class="campo">
<label for="mensaje">Mensaje</label>
<textarea id="mensaje" name="mensaje" rows="4" required></textarea>
</div>
<button class="boton" type="submit">Enviar</button>
</form>
<style>
.formulario{ display:grid; gap:.9rem; max-width:440px; }
.campo{ display:grid; gap:.3rem; }
.campo label{ font-size:.87rem; font-weight:600; }
.campo input, .campo textarea{
font:inherit; padding:.6rem .75rem;
border:1px solid #dde1e7; border-radius:8px;
}
.campo input:focus, .campo textarea:focus{
outline:2px solid #2f6fed; outline-offset:1px; border-color:transparent;
}
</style>
Modo claro y oscuro
Esta página cambia sola según cómo tengas configurado el sistema. Se logra definiendo los colores como variables y redefiniéndolas una vez.
Probalo: cambiá el tema de tu sistema operativo entre claro y oscuro, y volvé a esta pestaña.
:root{
--fondo:#ffffff;
--texto:#15181d;
--borde:#dde1e7;
--acento:#2f6fed;
}
@media (prefers-color-scheme:dark){
:root{
--fondo:#12151a;
--texto:#e8eaee;
--borde:#2b313b;
--acento:#6c9bff;
}
}
body{ background:var(--fondo); color:var(--texto); }
.tarjeta{ border:1px solid var(--borde); }
a{ color:var(--acento); }
Lo que va en el encabezado
No se ve, pero es lo que leen Google y las redes sociales cuando alguien comparte tu enlace.
El title es lo que aparece como titular en los resultados de búsqueda. La description, el renglón gris de abajo. Escribilos pensando en quien va a hacer clic.
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Titulo de la pagina, hasta 60 caracteres</title> <meta name="description" content="Una o dos lineas que resuman de que trata."> <link rel="canonical" href="https://midominio.com/"> <meta property="og:type" content="website"> <meta property="og:title" content="Titulo para redes sociales"> <meta property="og:description" content="Descripcion para redes sociales."> <meta property="og:image" content="https://midominio.com/portada.jpg"> <meta property="og:url" content="https://midominio.com/">