Aprende HTML y CSS desde cero

HTML marca cada parte del contenido con etiquetas: <h1> para el título principal, <p> para un párrafo… Casi todas se abren y se cierran, y lo que va dentro es el contenido.

Toda página tiene el mismo esqueleto: <!DOCTYPE html>, la etiqueta <html> con el idioma, un <head> con datos que no se ven (como el título de la pestaña) y un <body> con lo que sí se ve.

Los atributos añaden información a una etiqueta. Un enlace <a> necesita href con la dirección; una imagen <img> necesita src con el archivo y alt con una descripción para quien no puede verla.

Las listas se hacen con <ul> (con viñetas) u <ol> (numeradas), y cada elemento va en un <li>.

CSS son reglas con un selector (a qué elementos afecta) y unas declaraciones propiedad: valor; entre llaves. Por ejemplo, h1 { color: navy; } pone azul marino todos los títulos <h1>.

Lo habitual es escribir el CSS en un archivo aparte, estilos.css, y enlazarlo desde el <head> con <link>. Así una sola hoja da estilo a todas tus páginas.

Con el atributo class marcas los elementos que quieres tratar igual, y en CSS los seleccionas con un punto: .aviso. Un mismo elemento puede tener varias clases.

Cada elemento es una caja con contenido, relleno interior (padding), borde (border) y margen exterior (margin). Con box-sizing: border-box el ancho que indicas incluye el relleno y el borde, y es más fácil de calcular.

Un formulario recoge datos con campos <input>, <select> o <textarea>. El atributo type cambia el teclado y la validación: email, number, date…

Cada campo necesita una etiqueta <label> unida a él con for e id: así el lector de pantalla la anuncia y, al pulsar el texto, se activa el campo.

Con display: flex en un contenedor, sus hijos se colocan en fila (o en columna con flex-direction: column). justify-content los reparte en esa dirección y align-items los alinea en la otra.

gap pone separación entre ellos sin tener que usar márgenes. Flexbox es ideal para barras de menú, botones en fila o centrar algo.

Una web adaptable se ve bien en cualquier pantalla. Lo primero es la etiqueta <meta name="viewport"> en el <head>; sin ella, el móvil muestra la página como en un ordenador, en miniatura.

Las consultas de medios (@media) aplican reglas solo a partir de cierto ancho. Lo más cómodo es diseñar primero para móvil y añadir cambios para pantallas grandes.

Grid coloca elementos en filas y columnas a la vez. Con grid-template-columns defines las columnas; la unidad fr reparte el espacio libre.

La combinación repeat(auto-fit, minmax(200px, 1fr)) crea tantas columnas como quepan, de al menos 200 px, sin escribir ninguna consulta de medios.

Las propiedades personalizadas (variables CSS) empiezan por -- y se leen con var(). Defínelas en :root y cambia todo el diseño tocando un solo valor.

La consulta prefers-color-scheme: dark detecta si la persona usa el tema oscuro del sistema; basta con redefinir ahí las variables de color.

Usa la etiqueta que describe el contenido: <header>, <nav>, <main>, <article>, <footer>, <button> para acciones… Los buscadores y los lectores de pantalla entienden mejor la página y el teclado funciona sin trucos.

Revisa que el texto tenga contraste suficiente con el fondo (las pautas WCAG piden al menos 4,5:1 en texto normal) y, cuando esté lista, publícala gratis con un servicio como GitHub Pages.