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.

transition hace que un cambio de estilo ocurra poco a poco en vez de golpe, por ejemplo, al pasar el ratón por un botón. Indicas qué propiedad cambia, cuánto dura y con qué curva (ease, linear…).

Para movimientos más elaborados, @keyframes define los pasos de una animación y animation la aplica. Respeta a quien pide menos movimiento en su sistema: dentro de @media (prefers-reduced-motion: reduce) desactiva o suaviza las animaciones.

position cambia cómo se coloca un elemento. relative lo desplaza respecto a su sitio normal y, sobre todo, sirve de referencia para sus hijos con absolute, que se colocan con top, right, bottom y left dentro de él (perfecto para una etiqueta de «Nuevo» en la esquina de una tarjeta).

sticky deja un elemento en su sitio hasta que, al hacer scroll, llega a la posición indicada y se queda pegado (como una cabecera); fixed lo fija a la ventana. z-index decide qué queda encima cuando se solapan.

Las pseudoclases seleccionan elementos según su estado o su posición: :hover (el ratón encima), :focus-visible (enfocado con el teclado), :nth-child(2n) (los pares), :first-child, :disabled… Evitan tener que añadir clases a mano.

Los pseudoelementos, con dos puntos dobles, crean partes que no existen en el HTML: ::before y ::after añaden contenido decorativo con content, y ::placeholder da estilo al texto de ejemplo de un campo.

Las tablas son para datos en filas y columnas, no para maquetar. Un <caption> explica qué contiene la tabla, <thead> agrupa la fila de títulos y cada título es un <th>, no un <td>.

Con scope="col" o scope="row", el lector de pantalla sabe si un <th> es el título de una columna o de una fila, y al recorrer cada celda anuncia a qué título pertenece.

Una foto enorme en un móvil gasta datos y hace lenta la página. Con srcset ofreces la misma imagen en varios tamaños y, con sizes, dices qué ancho ocupará; el navegador descarga la más adecuada para cada pantalla.

Pon siempre width y height (el navegador reserva el hueco y la página no salta al cargar), alt con lo que muestra la imagen y loading="lazy" en las que están más abajo, para que no se descarguen hasta que vayan a verse.