Un poco de historia

La web es mucho más joven que Internet, y las dos nacieron en contextos muy distintos: una en el ámbito militar y universitario estadounidense, la otra en un laboratorio de física europeo.

• 1969ARPANET. El Departamento de Defensa de EE. UU. conecta cuatro universidades en red. El primer mensaje, enviado de la UCLA al Instituto de Investigación de Stanford, iba a ser «LOGIN», pero el sistema se colgó tras las dos primeras letras: «LO».
• 1983Nace Internet. ARPANET adopta el protocolo TCP/IP, el «idioma común» que permite que redes distintas se entiendan entre sí. Ese mismo año aparece el DNS, el sistema de nombres de dominio.
• 1989La propuesta. Tim Berners-Lee, informático del CERN (Ginebra), propone un sistema para compartir documentos enlazados entre investigadores. Su jefe anotó en la portada: «vago, pero emocionante».
• 1990–91Nace la web. Berners-Lee crea las tres piezas que todavía usamos: HTML (el lenguaje de las páginas), HTTP (cómo se piden y envían) y URL (cómo se localizan). También el primer navegador y el primer servidor. En agosto de 1991 la web se abre al público.
• 1993La web es de todos. El CERN libera la tecnología sin patentes ni licencias. Aparece Mosaic, el primer navegador con imágenes junto al texto, y la web se dispara.
• 1994El W3C. Berners-Lee funda el World Wide Web Consortium para definir los estándares de la web y que funcione igual en todos los navegadores.
• 1995–2001La guerra de los navegadores. Netscape e Internet Explorer compiten añadiendo cada uno sus propias etiquetas. Las webs funcionaban en uno y se rompían en otro: de ahí la importancia de los estándares.
• 2004Web 2.0. El usuario deja de sólo leer y pasa a crear contenido: blogs, wikis, redes sociales.
• 2007–hoyLa web en el bolsillo. Con el iPhone y los smartphones, la mayoría de las visitas pasan a hacerse desde el móvil. En 2014 se publica HTML5, el estándar que usamos en clase.

Curiosidad: la primera página web de la historia sigue online, restaurada por el CERN, en info.cern.ch. Es sólo texto y enlaces: así empezó todo.

Internet no es la web

Se usan como sinónimos, pero no lo son:

• Internet es la red: millones de ordenadores conectados en todo el mundo mediante cables (muchos, submarinos), fibra óptica, antenas y satélites. Es la infraestructura, como la red de carreteras.
• La web (World Wide Web) es uno de los servicios que funcionan sobre Internet: el conjunto de páginas enlazadas que visitas con un navegador. Es uno de los tipos de vehículo que circulan por esas carreteras.

Por Internet circulan muchas otras cosas que no son la web: el correo electrónico, WhatsApp, los videojuegos online, las videollamadas o el streaming de Spotify.

Antes de la web: cómo viajaban los datos

Durante los años setenta y ochenta, Internet ya se usaba, sobre todo en universidades y centros de investigación, pero no había páginas web ni navegadores. La información viajaba con otros servicios, cada uno con su propio programa y casi siempre en sólo texto, escribiendo órdenes en un terminal (también llamado consola o línea de comandos): una ventana en la que se escriben instrucciones y el ordenador responde también con texto. Todavía existe: en Windows se llama «Símbolo del sistema» o «Terminal», y en Mac, «Terminal».

Así se descargaba un archivo con FTP. No había botones ni imágenes: había que conocer la dirección del servidor y escribir cada orden.

$ ftp ftp.universidad.edu
Connected to ftp.universidad.edu.
Name: anonymous
230 Login successful.
ftp> cd /pub/articulos
ftp> get informe.txt
226 Transfer complete.

La gran novedad de la web fue unir en un mismo sitio documentos de cualquier servidor, enlazados entre sí, y poder recorrerlos haciendo clic, sin memorizar órdenes ni direcciones.

Idea clave: Internet existía veinte años antes que la web. Tim Berners-Lee no inventó Internet: inventó una forma de publicar y enlazar documentos usando Internet.

Qué es un navegador

Un navegador es el programa con el que visitamos las páginas web: Chrome, Safari, Firefox, Edge… Es el «cliente» de la web, y hace tres cosas cada vez que escribes una dirección o pulsas un enlace:

1. Pide la página al servidor donde está guardada.
2. Recibe los archivos: el HTML, el CSS, las imágenes, el JavaScript…
3. Los interpreta y los dibuja en la pantalla: lee el código y lo convierte en la página que ves. A esto se le llama renderizar.

Es decir: tú escribes código (texto), y el navegador lo convierte en una página visual e interactiva. Por eso, para comprobar tu trabajo, siempre lo abrirás en un navegador.

Navegador no es buscador

Es una confusión muy habitual:

• Un navegador es un programa instalado en tu ordenador o tu móvil: Chrome, Safari, Firefox, Edge.
• Un buscador es una página web que sirve para encontrar otras páginas: Google, Bing, DuckDuckGo.

Puedes usar el buscador Google desde el navegador Firefox, o el buscador DuckDuckGo desde Chrome. Que Google haga también un navegador (Chrome) es lo que lleva a confundirlos.

Un poco de historia

• 1990WorldWideWeb. El primero, creado por Tim Berners-Lee en un ordenador NeXT. Servía para ver y también para editar páginas.
• 1991Line Mode Browser. Un navegador de sólo texto que funcionaba en cualquier terminal, para que más gente pudiera acceder.
• 1993Mosaic. El primero que mostraba imágenes junto al texto y era fácil de instalar. Hizo popular la web.
• 1994Netscape Navigator. Creado por parte del equipo de Mosaic. Durante unos años fue el más usado.
• 1995Internet Explorer. El de Microsoft, incluido en Windows. Su rivalidad con Netscape fue la «guerra de los navegadores».
• 2003–2008Safari, Firefox y Chrome. Los navegadores modernos. Chrome, de Google, es hoy el más usado del mundo.

Por qué una web puede verse distinta en cada navegador

Cada navegador tiene su propio motor de renderizado, la parte que convierte el código en página: Chrome y Edge usan uno llamado Blink, Safari usa WebKit y Firefox usa Gecko. Todos siguen los mismos estándares del W3C, pero a veces interpretan algún detalle de forma ligeramente distinta, o tardan más en incorporar una novedad.

Truco: prueba siempre tus webs en al menos dos navegadores (por ejemplo, Chrome y Safari o Firefox) y en un móvil. Y si tienes dudas sobre si una propiedad nueva de CSS funciona en todos, la web Can I use te lo dice.

Cliente y servidor

Toda visita a una web es una conversación entre dos ordenadores:

• El cliente es quien pide: tu navegador (Chrome, Firefox, Safari…) en tu ordenador o móvil.
• El servidor es quien responde: un ordenador encendido las 24 horas, conectado a Internet, que guarda los archivos de la web (HTML, CSS, imágenes…) y los sirve a quien los pida.

Esto es lo que ocurre, en menos de un segundo, cada vez que escribes una dirección:

1. 1Escribes la direcciónen el navegador y pulsas Intro.
2. 2DNStraduce el nombre del dominio a la dirección IP del servidor.
3. 3Peticiónel navegador pide el archivo al servidor mediante HTTP.
4. 4Respuestael servidor envía el HTML, y luego el CSS, las imágenes…
5. 5Renderizadoel navegador interpreta el código y dibuja la página.

Pruébalo paso a paso:

Cada respuesta del servidor lleva un código de estado que indica cómo ha ido. Algunos que te encontrarás:

• 200 — todo bien, aquí tienes el archivo.
• 301 — esta página se ha mudado a otra dirección (redirección).
• 404 — no encontrado: el archivo no existe. El error más famoso de la web.
• 500 — error interno: algo ha fallado en el servidor.

La página 404

Cuando alguien pide una dirección que no existe, el servidor responde con un 404 y muestra una página de error. Si no has preparado ninguna, sale la del propio servidor: un texto sin el diseño de tu web y sin ninguna forma de volver a ella. Por eso las webs cuidadas diseñan su propia página 404.

Una buena página 404:

• Explica qué ha pasado con palabras sencillas, sin tecnicismos y sin culpar a quien la visita.
• Mantiene el aspecto de la web: la misma cabecera, el mismo menú, los mismos colores.
• Ofrece una salida: un enlace a la portada, un buscador o las secciones principales.
• Puede tener personalidad: un poco de humor o una animación convierten un error en un momento agradable. Muchas marcas la aprovechan para mostrar su estilo.

Como ejemplo, aquí tienes la página 404 de estos apuntes ↗.

Truco: para tener tu propia 404 basta con crear un archivo llamado 404.html en la carpeta principal de la web. GitHub Pages y Netlify lo usan automáticamente. En otros servidores, como los de muchos hostings, hay que indicarlo en un archivo de configuración llamado .htaccess, con la línea ErrorDocument 404 /404.html.

Ojo: cuando abres un .html con doble clic desde tu carpeta, no hay servidor: el navegador lee el archivo directamente de tu disco. Por eso la barra de direcciones muestra file:/// en lugar de https://. Para practicar es suficiente, pero nadie más puede verlo.

Direcciones: IP, dominios y DNS

Cada dispositivo conectado a Internet tiene una dirección IP, un número que lo identifica, por ejemplo 192.0.2.15. Es como su número de teléfono. Pero nadie se aprende números de memoria, así que usamos nombres.

• El dominio es el nombre fácil de recordar: escueladeartedezaragoza.com. Es como el nombre de un contacto en tu agenda.
• El DNS (Domain Name System) es la agenda: un sistema mundial que traduce cada dominio a la IP del servidor correspondiente.

Las partes de una URL

La URL es la dirección completa de un archivo concreto en la web. Tomemos esta:

https://www.escueladeartedezaragoza.com/estudios/index.html

Nota práctica: Aunque técnicamente www es un subdominio, en el diseño web actual no lo tratamos como tal. Consideramos "subdominios" a las palabras que crean secciones independientes y exclusivas (como aula.eillana.es).

En el día a día, al nombre más la extensión (escueladeartedezaragoza.com) se le llama simplemente dominio.

Truco: si una URL termina en una carpeta (/estudios/) en vez de en un archivo, el servidor busca dentro un archivo llamado index.html. Por eso la página principal de una web siempre se llama así.

Hosting y publicación

Para que una web sea visible para cualquiera, hacen falta dos cosas que se contratan por separado (aunque muchas empresas venden ambas):

• Un dominio, que se registra a través de un registrador pagando una cuota anual. Los .es los gestiona en España la entidad pública Red.es.
• Un hosting (alojamiento): espacio en un servidor donde se suben los archivos de la web. Se paga normalmente al mes o al año.

Después, el dominio se «apunta» al servidor del hosting mediante el DNS, y los archivos se suben al servidor (por FTP, desde un panel web o con herramientas como Git).

HTTP y HTTPS

HTTP es el protocolo con el que navegador y servidor se comunican. HTTPS es lo mismo, pero cifrado: nadie que esté entre medias (por ejemplo, en una wifi pública) puede leer ni modificar lo que se envía. Es lo que indica el candado de la barra de direcciones. Hoy es obligatorio en la práctica: los navegadores marcan como «No seguro» las webs sin HTTPS.

Publicar gratis tus prácticas

Para proyectos personales y de clase no hace falta pagar. Estos servicios alojan webs de HTML, CSS y JavaScript gratis, con HTTPS incluido y una dirección propia:

• GitHub Pages — tu web en tu-usuario.github.io. Ideal para empezar un portfolio.
• Netlify — basta con arrastrar la carpeta del proyecto a su web para publicarla.

Idea clave: una web es sólo una carpeta con archivos. «Publicarla» es copiar esa carpeta a un ordenador que está siempre encendido y conectado, y ponerle un nombre.

Qué es HTML

HTML (HyperText Markup Language, lenguaje de marcado de hipertexto) es el lenguaje con el que se escribe el contenido de una página web. No es un lenguaje de programación, sino de marcado: sirve para marcar cada parte del contenido y decir qué es (un título, un párrafo, una imagen, un enlace…).

Un archivo HTML es un archivo de texto normal con extensión .html. Se escribe con un editor de código (en clase usamos Visual Studio Code) y se abre con cualquier navegador.

<h1>Mi primera web</h1>
<p>Hola, mundo.</p>

Los tres lenguajes de la web

El navegador sólo entiende tres lenguajes, que trabajan juntos y tienen cada uno su función:

• HTML (el esqueleto): estructura y significado del contenido.
• CSS (la piel y la ropa): apariencia, colores, tipografías, tamaños y distribución.
• JavaScript (el movimiento): comportamiento e interactividad.

Ojo: HTML no decide cómo se ve algo. Un <h1> no es «texto grande», es «el título principal de la página». El tamaño lo pondremos después con CSS.

No es la única forma de hacer una web

Eso no significa que todas las webs se escriban a mano con estos tres lenguajes. Hay muchas otras formas de crearlas:

• Gestores de contenido (CMS) como WordPress: se crea y edita la web desde un panel, sin tocar código. Una gran parte de las webs del mundo están hechas así.
• Lenguajes de servidor como PHP, Python o JavaScript con Node.js: generan las páginas en el servidor en el momento en que alguien las pide (por ejemplo, tu perfil en una red social o el carrito de una tienda).
• Frameworks y librerías como React, Vue o Astro: herramientas que ayudan a construir webs grandes y complejas a partir de piezas reutilizables.
• Herramientas visuales (no-code) como Webflow, Framer o Wix: se diseña arrastrando elementos, como en un programa de maquetación.

Idea clave: da igual con qué herramienta se haga la web; lo que acaba llegando al navegador es siempre HTML, CSS y JavaScript. Por eso aprenderlos bien es la base de todo lo demás: te permite entender, retocar y arreglar cualquier web, la haya hecho quien la haya hecho.

El hipertexto

La H y la T de HTML vienen de hipertexto, y es la idea sobre la que se construye toda la web. Un hipertexto es un texto que contiene enlaces a otros textos, de forma que el lector puede saltar de uno a otro y decidir su propio recorrido.

• Un libro se lee de forma lineal: empieza en la primera página y termina en la última, en el orden que eligió el autor.
• Un hipertexto se lee de forma no lineal: está formado por fragmentos (nodos) unidos por enlaces, y cada lector elige el camino. Dos personas pueden leer la misma web en un orden completamente distinto.

Cuando los nodos no son sólo texto, sino también imágenes, sonido o vídeo, se habla de hipermedia. La web actual es, en realidad, un enorme hipermedia.

Antes de los ordenadores

La idea de leer saltando de un sitio a otro es mucho más antigua que la web: las notas a pie de página, las referencias de una enciclopedia («véase también…») o los libros de «elige tu propia aventura» ya lo hacían en papel. Un ejemplo muy conocido en literatura es Rayuela (1963), de Julio Cortázar, que incluye un «tablero de dirección» para leer los capítulos en un orden distinto al de la numeración.

De la idea a la web

• 1945El Memex. El ingeniero Vannevar Bush imagina, en el artículo As We May Think, una máquina en forma de escritorio que guardaría documentos y permitiría unirlos con «rastros» asociativos, igual que funciona la memoria. Nunca se construyó, pero inspiró a todos los que vinieron después.
• 1965Nace la palabra. Ted Nelson acuña el término hipertexto y dedica décadas a su Proyecto Xanadu, un sistema de documentos enlazados que, aunque nunca llegó a completarse, anticipó muchas ideas de la web.
• 1968«La madre de todas las demos». Douglas Engelbart presenta en público un sistema con enlaces entre documentos, ventanas, videoconferencia y un invento nuevo para moverse por la pantalla: el ratón.
• 1987HyperCard. Apple incluye en sus ordenadores un programa para crear «pilas» de tarjetas enlazadas con texto, imágenes y sonido. Fue el primer contacto con el hipertexto para millones de personas.
• 1989–91La web. Tim Berners-Lee une el hipertexto con Internet: los documentos enlazados ya no están en un solo ordenador, sino repartidos por todo el mundo. Para ello crea HTML (el lenguaje de hipertexto) y HTTP (el protocolo de transferencia de hipertexto).

El hipertexto en HTML

En HTML, todo el hipertexto descansa en una sola etiqueta: <a>, el enlace, que veremos a fondo en «Texto y enlaces». Sin ella, una web sería sólo un montón de documentos sueltos.

<p>Lee más sobre la <a href="historia.html">historia de la web</a>.</p>

El texto del enlace se ve subrayado y de otro color, y al pulsarlo saltas a otro documento. Pruébalo: en estos apuntes te lleva al apartado de historia de «Cómo funciona la web».

Idea clave para diseñar: en una web no controlas el orden de lectura. Mucha gente no entra por la portada, sino directamente a una página interior desde Google o desde un enlace compartido. Por eso cada página debe entenderse por sí sola y dejar claro dónde estás y adónde puedes ir. Diseñar esos caminos es lo que se conoce como arquitectura de la información y diseño de navegación.

Herramientas: editores de código y WYSIWYG

Como un archivo HTML es sólo texto, en teoría se podría escribir con el Bloc de notas. En la práctica se usan programas pensados para ello. Hay dos grandes enfoques.

Editores de código

Son programas para escribir código a mano, viendo exactamente cada etiqueta. No «dibujan» la página: el resultado se ve en el navegador. Lo que los hace tan útiles frente a un editor de texto normal:

• Resaltado de sintaxis: cada parte del código (etiquetas, atributos, valores, texto) sale de un color, y así se lee mucho mejor y se detectan errores de un vistazo.
• Autocompletado: al empezar a escribir una etiqueta, el editor te sugiere cómo terminarla y la cierra por ti.
• Atajos y abreviaturas como Emmet, que genera bloques enteros de código a partir de unas pocas letras (el ! + Tab que verás después).
• Extensiones para añadir funciones: vista previa que se recarga sola al guardar, formateo automático, revisión de errores…

En clase usamos Visual Studio Code (VS Code), que es gratuito, funciona en Windows, Mac y Linux, y es hoy el editor más usado. Otros conocidos son Sublime Text o los editores que vienen integrados en algunas webs, como CodePen, que permiten probar código sin instalar nada.

Truco: tres extensiones de VS Code muy útiles para empezar: Spanish Language Pack (pone el programa en español), Live Server (abre tu web en el navegador y la recarga sola cada vez que guardas) y Prettier (ordena y sangra el código automáticamente). Se instalan desde el icono de los cuatro cuadrados de la barra lateral.

Ver la presentación «Trabajar con VS Code» ↗

Ojo: nunca escribas HTML con Word, Pages o Google Docs. Son procesadores de texto: añaden formato invisible y cambian las comillas rectas (") por comillas tipográficas (“ ”), que el navegador no entiende, y el código deja de funcionar.

Editores WYSIWYG

WYSIWYG son las siglas de What You See Is What You Get, «lo que ves es lo que obtienes». Son programas en los que la página se diseña de forma visual, colocando y arrastrando elementos como en InDesign, y el programa escribe el código por ti.

• Los primeros fueron programas como Dreamweaver o FrontPage, muy populares a finales de los noventa y en los dos mil.
• Hoy esta idea vive en herramientas como Webflow, Framer o Wix, y en el editor de bloques de WordPress.
• Los procesadores de texto como Word también son WYSIWYG: lo que ves en pantalla es lo que sale impreso.

¿Cuál es mejor?

Idea clave: no son enemigos. Muchos profesionales usan herramientas visuales a diario. Pero en este curso escribimos el código a mano porque es la única forma de entender qué está pasando. Quien sabe HTML y CSS usa mejor cualquier herramienta visual, y sabe arreglarla cuando no hace lo que quiere.

Archivos y carpetas

Una web es, en el fondo, una carpeta con archivos. Antes de escribir código conviene organizarla bien, porque los enlaces y las imágenes dependen de que cada archivo esté donde tiene que estar y se llame como tiene que llamarse.

mi-web/
├── index.html
├── contacto.html
├── css/
│   └── estilos.css
└── img/
    └── logo.png

• index.html es siempre la página principal. Es el archivo que el servidor entrega cuando alguien entra en la dirección de la web sin indicar ninguna página.
• Cada página de la web es un archivo .html distinto.
• Los estilos y las imágenes se guardan en sus propias carpetas para no mezclarlo todo.

Cómo nombrar los archivos

• Todo en minúsculas.
• Sin espacios: usa guiones para separar palabras.
• Sin tildes, eñes ni símbolos (?, #, %, &…).
• Nombres cortos que describan el contenido.

Ojo: en tu ordenador, Foto.jpg y foto.jpg pueden parecer el mismo archivo, pero en la mayoría de servidores son dos archivos distintos. Es el motivo más habitual de que una web funcione en clase y aparezca con imágenes rotas al publicarla.

Truco: activa la opción de ver las extensiones de los archivos. En Windows: Explorador → Ver → Extensiones de nombre de archivo. En Mac: Finder → Ajustes → Avanzado → Mostrar todas las extensiones. Así evitarás guardar sin querer un index.html.txt.

Estructura básica

Todos los documentos HTML parten de la misma estructura mínima. Es la plantilla que escribirás al empezar cualquier página:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primera web</title>
  </head>
  <body>
    <!-- Aquí va todo lo que se ve en la página -->
  </body>
</html>

Qué hace cada parte:

• <!DOCTYPE html> — avisa al navegador de que el documento es HTML moderno (HTML5). Va siempre en la primera línea.
• <html lang="es"> — envuelve todo el documento. El atributo lang indica el idioma, lo que ayuda a los lectores de pantalla y a los buscadores.
• <head> — información sobre la página que no se ve en ella: codificación, título de la pestaña, enlaces a CSS…
• <meta charset="UTF-8"> — permite usar tildes, eñes y cualquier carácter sin que salgan símbolos raros.
• <meta name="viewport"…> — hace que la página se adapte bien a la pantalla del móvil.
• <title> — el texto que aparece en la pestaña del navegador y en los resultados de Google.
• <body> — todo el contenido visible de la página.

Truco: en VS Code, escribe ! en un archivo .html vacío y pulsa Tab. Se genera esta estructura automáticamente (luego cambia lang="en" por lang="es").

Las etiquetas <meta>

Las etiquetas <meta> van en el <head> y dan información sobre la página: no se ven en ella, pero las leen el navegador, los buscadores y las redes sociales. Son elementos vacíos y casi todas tienen la forma name="…" content="…".

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Estudio Ebro · Diseño gráfico en Zaragoza</title>
  <meta name="description" content="Identidad visual, carteles y webs para marcas pequeñas. Mira nuestros proyectos y escríbenos.">
  <meta name="author" content="Estudio Ebro">
</head>

Así aparecería en Google: el <title> es el enlace azul y la description, el texto de debajo.

Al compartir el enlace: Open Graph

Cuando pegas un enlace en WhatsApp, Instagram o LinkedIn, aparece una tarjeta con una imagen, un título y una descripción. Esa tarjeta se define con las etiquetas Open Graph, que empiezan por og: y usan property en lugar de name:

<meta property="og:title" content="Estudio Ebro · Diseño gráfico">
<meta property="og:description" content="Identidad visual, carteles y webs para marcas pequeñas.">
<meta property="og:image" content="https://estudioebro.com/img/compartir.jpg">

Truco: en tus webs, cuida sobre todo el <title>, la description y la imagen de og:image. Es lo primero que verá quien reciba tu enlace o te busque en Google. La dirección de og:image tiene que ser completa, empezando por https://.

Elementos y etiquetas

El contenido se marca con etiquetas. Casi todas van por parejas: una de apertura y otra de cierre, que lleva una barra /. Todo el conjunto (apertura, contenido y cierre) se llama elemento.

<a href="https://www.w3.org/">Visita el W3C</a>

• <a> es la etiqueta de apertura y </a> la de cierre.
• Visita el W3C es el contenido.
• href="…" es un atributo: información extra sobre el elemento. Se escribe dentro de la etiqueta de apertura, con la forma nombre="valor".

Elementos vacíos

Algunos elementos no tienen contenido y, por tanto, no llevan etiqueta de cierre. Toda su información va en los atributos:

<img src="foto.jpg" alt="Atardecer en el Ebro">
<br>
<meta charset="UTF-8">

Anidación

Los elementos se pueden meter unos dentro de otros. La regla es sencilla: lo último que se abre es lo primero que se cierra, como unas cajas dentro de otras.

Mal (las etiquetas se cruzan):

<p>Esto es <strong>muy importante</p></strong>

Bien:

<p>Esto es <strong>muy importante</strong></p>

Comentarios

Sirven para dejar notas en el código. El navegador los ignora, pero cualquiera puede verlos en el código fuente, así que no guardes nada privado en ellos.

<!-- Esto es un comentario: el navegador no lo muestra -->

Espacios y saltos de línea

El navegador ignora los espacios y saltos de línea de más: los junta todos en un solo espacio. Este código se ve en una sola línea, como «Hola, mundo.»:

<p>Hola,

        mundo.</p>

Para separar bloques de texto se usan elementos distintos (un párrafo nuevo, por ejemplo). <br> sólo se usa para saltos de línea que forman parte del contenido, como los versos de un poema o las líneas de una dirección postal. Para separar cosas visualmente se usa CSS.

Elementos de bloque y en línea

• Los elementos de bloque empiezan en una línea nueva y ocupan todo el ancho disponible: <h1>, <p>, <header>, <div>…
• Los elementos en línea van dentro del texto y sólo ocupan lo que mide su contenido: <a>, <strong>, <em>, <span>…

<p>
  Esto es un párrafo con un <a href="contacto.html">enlace</a>
  y una palabra <strong>importante</strong>.
</p>

Por norma general, los elementos en línea van dentro de los de bloque, y no al revés. Esta distinción será muy importante cuando empecemos a maquetar con CSS.

Buenas prácticas

• Sangra el código: cada elemento que va dentro de otro, un nivel más a la derecha. Así se ve de un vistazo qué contiene qué.
• Escribe las etiquetas y los atributos en minúsculas.
• Pon siempre los valores de los atributos entre comillas dobles.
• Cierra siempre las etiquetas que llevan cierre, aunque el navegador a veces lo perdone.

Sin sangría:

<header>
<h1>Mi web</h1>
<p>Bienvenida</p>
</header>

Con sangría:

<header>
  <h1>Mi web</h1>
  <p>Bienvenida</p>
</header>

Truco: en VS Code, Mayús + Alt + F (en Mac, Mayús + Option + F) ordena y sangra el documento automáticamente. Y para saber si tu HTML tiene errores, pégalo en el validador del W3C: te dirá qué falla y en qué línea.

Idea clave: elige cada etiqueta por lo que significa, no por cómo se ve. Es lo que se llama HTML semántico, y hace que tu web sea más accesible y se posicione mejor en los buscadores. En el siguiente apartado verás cómo aplicarlo a la página entera.

Estructura semántica

Casi todas las webs tienen las mismas zonas: una cabecera, un menú, el contenido principal, a veces una columna lateral y un pie. HTML tiene una etiqueta para cada una, de modo que el código dice qué es cada parte de la página.

Así quedaría el <body> de la web de un estudio de diseño:

<body>
  <header>
    <h1>Estudio Ebro</h1>
    <nav>
      <a href="index.html">Inicio</a>
      <a href="proyectos.html">Proyectos</a>
      <a href="contacto.html">Contacto</a>
    </nav>
  </header>

  <main>
    <section>
      <h2>Proyectos recientes</h2>
      <article>
        <h3>Identidad para una cafetería</h3>
        <p>Logotipo, carta y señalética.</p>
      </article>
      <article>
        <h3>Cartel para un festival</h3>
        <p>Ilustración y tipografía.</p>
      </article>
    </section>
  </main>

  <aside>
    <p>¿Tienes un proyecto? Escríbenos.</p>
  </aside>

  <footer>
    <p>Estudio Ebro · Zaragoza</p>
  </footer>
</body>

Antes y ahora: de HTML 4 a HTML5

Estas etiquetas llegaron con HTML5. Antes, las páginas se construían sólo con cajas <div>, y cada persona les ponía el nombre que quería con id o class.

La página es la misma, pero en la de la izquierda sólo una persona sabe qué es cada caja. En la de la derecha, el propio código lo dice: lo entienden el navegador, los lectores de pantalla y los buscadores. Si encuentras tutoriales o webs antiguas llenas de <div id="...">, ya sabes de dónde vienen.

¿Por qué no usar <div> para todo? Porque estas etiquetas:

• Ayudan a las personas que usan lectores de pantalla, que pueden saltar directamente al menú o al contenido principal.
• Ayudan a los buscadores a entender qué es lo importante de la página.
• Hacen el código más fácil de leer, para ti y para quien trabaje después con él.

Ojo: estas etiquetas no cambian nada visualmente. Sin CSS, una página hecha con <header> y <footer> se ve exactamente igual que una hecha con <div>. La diferencia está en el significado, no en el aspecto.

Escribir más rápido: Emmet

Ahora que conoces las etiquetas, puedes escribirlas mucho más rápido. VS Code trae Emmet: escribes una abreviatura, pulsas Tab y se convierte en código.

Las clases (.) y los id (#) los verás en «Fundamentos de CSS». Emmet usa los mismos símbolos que los selectores de CSS.

Los símbolos se combinan. Esta abreviatura crea un menú completo:

nav>ul>li*3>a

<nav>
  <ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</nav>

Ojo: si al pulsar Tab no pasa nada, mira la barra de estado, abajo a la derecha: tiene que poner HTML. Emmet sólo funciona en archivos .html guardados con esa extensión.

Encabezados y párrafos

HTML tiene seis niveles de encabezado, de <h1> (el más importante) a <h6> (el menos importante). Funcionan como el índice de un libro: título, capítulos, apartados, subapartados…

El texto normal va en párrafos con <p>. Cada párrafo es un bloque: empieza en una línea nueva y deja un espacio antes y después.

<h1>Guía de tipografía</h1>

<h2>Familias tipográficas</h2>
<p>Las tipografías se agrupan en familias según su forma.</p>

<h3>Con serifa</h3>
<p>Tienen remates en los extremos de los trazos.</p>

<h3>Sin serifa</h3>
<p>Sus trazos terminan sin remates.</p>

<h2>Cómo combinarlas</h2>
<p>Una buena regla es no usar más de dos familias.</p>

Si quitáramos todo el texto y dejáramos sólo los encabezados, quedaría el índice de la página:

• h1Guía de tipografía
  • h2Familias tipográficas
    • h3Con serifa
    • h3Sin serifa
  • h2Cómo combinarlas

Reglas de los encabezados

• Un solo <h1> por página: el título principal.
• No te saltes niveles: después de un <h2> viene un <h3>, no un <h4>.
• No elijas el nivel por el tamaño. Si un <h2> te parece demasiado grande, se cambia con CSS, no usando un <h4>.
• No uses encabezados para destacar texto que no es un título. Para eso está el formato de texto (siguiente apartado).

Ojo: las personas que usan lectores de pantalla navegan saltando de encabezado en encabezado, igual que tú echas un vistazo a los titulares. Si la jerarquía está mal, se pierden.

Formato de texto

Dentro de un párrafo se pueden marcar palabras o frases para darles un significado especial. Son elementos en línea.

<p>Entrega la práctica <strong>antes del viernes</strong>.</p>
<p>El nombre <em>tipografía</em> viene del griego.</p>
<p>La fórmula del agua es H<sub>2</sub>O y el área se mide en m<sup>2</sup>.</p>

¿Con HTML o con CSS?

La negrita y la cursiva se pueden poner de dos formas, y cada una tiene su función. La pregunta es: ¿quieres decir algo o sólo que algo se vea de una manera?

• Con HTML (<strong>, <em>), cuando la marca tiene significado dentro del texto: una advertencia importante, una palabra que dirías con otra entonación. Los lectores de pantalla lo anuncian y los buscadores lo entienden.
• Con CSS (font-weight, font-style), cuando es una decisión de diseño que no cambia el sentido: todos los pies de foto en cursiva, los nombres del menú en negrita. Lo verás en Tipografía.

<p>Entrega la práctica <strong>antes del viernes</strong>.</p>

.pie-foto {
  font-style: italic;
}

Y se pueden combinar: <strong> dice que algo es importante, pero su aspecto lo decide el CSS. Puede salir en el color de la marca en lugar de en negrita.

Ojo: existen también <b> e <i>, que se ven igual que <strong> y <em> pero no indican importancia ni énfasis. Si dudas, usa <strong> y <em> para el significado, y CSS para el aspecto.

Saltos de línea y separadores

<br> (break) fuerza un salto de línea dentro de un mismo bloque de texto. Es un elemento vacío. Úsalo sólo cuando el salto forma parte del contenido: los versos de un poema, las líneas de una dirección postal, una firma.

<p>
  Escuela de Arte de Zaragoza<br>
  Calle Ejemplo, 1<br>
  50001 Zaragoza
</p>

Lo que no hay que hacer es usar <br> para separar párrafos o dejar espacio. Para separar bloques se usan párrafos distintos, y el espacio entre ellos se controla con CSS (margin, «Fundamentos de CSS»):

<p>Primer párrafo.</p>
<br><br>
<p>Segundo párrafo, más separado.</p>

<hr> (horizontal rule) es otro elemento vacío que marca un cambio de tema entre dos bloques de contenido: una escena nueva en un relato, otro asunto dentro de un artículo. El navegador lo dibuja como una línea horizontal.

<p>…y así terminó el primer proyecto.</p>

<hr>

<p>Un año después, el estudio recibió un encargo muy distinto…</p>

Su aspecto se cambia con CSS, porque en realidad es un borde. Por ejemplo, una línea discontinua verde:

hr {
  border: none;
  border-top: 1px dashed #96B7C6;
  margin: 2rem 0;
}

Ojo: como pasa con los encabezados, <hr> tiene significado: «aquí cambia el tema». Si sólo quieres una línea decorativa, por ejemplo bajo un título, hazla con un borde en CSS (border-bottom), no con <hr>.

Citas

Para citar un fragmento largo de otra fuente se usa <blockquote>, que es un elemento de bloque. Para una cita corta dentro de una frase, <q>, que añade las comillas automáticamente.

<blockquote>
  <p>Menos, pero mejor.</p>
</blockquote>
<p>— Dieter Rams</p>

Listas

Las listas agrupan elementos relacionados. Cada elemento de la lista va dentro de un <li> (list item).

Lista sin orden: <ul>

Cuando el orden de los elementos no importa. Se muestra con viñetas.

<ul>
  <li>Lápiz</li>
  <li>Goma</li>
  <li>Cuaderno de bocetos</li>
</ul>

Lista ordenada: <ol>

Cuando el orden sí importa: pasos, instrucciones, rankings. Se numera automáticamente, así que si añades o quitas un paso no tienes que renumerar nada.

<ol>
  <li>Abocetar la idea</li>
  <li>Digitalizar el boceto</li>
  <li>Elegir la paleta de color</li>
</ol>

Listas anidadas

Una lista puede ir dentro de otra. La lista interior va dentro del <li>, antes de cerrarlo:

<ul>
  <li>Diseño gráfico
    <ul>
      <li>Identidad</li>
      <li>Editorial</li>
    </ul>
  </li>
  <li>Diseño web</li>
</ul>

Lista de definiciones: <dl>

Para parejas de término y descripción, como un glosario. <dt> es el término y <dd> su definición.

<dl>
  <dt>Kerning</dt>
  <dd>Ajuste del espacio entre dos letras concretas.</dd>
  <dt>Interlineado</dt>
  <dd>Distancia entre las líneas de un texto.</dd>
</dl>

Truco: los menús de navegación suelen escribirse como una lista de enlaces, porque eso es lo que son. Con CSS se quitan las viñetas y se colocan en horizontal.

<nav>
  <ul>
    <li><a href="index.html">Inicio</a></li>
    <li><a href="proyectos.html">Proyectos</a></li>
    <li><a href="contacto.html">Contacto</a></li>
  </ul>
</nav>

Enlaces

Los enlaces son lo que convierte un montón de páginas sueltas en una web. Se crean con <a> (de anchor, ancla) y el atributo href, que indica el destino.

<a href="contacto.html">Escríbenos</a>

Enlaces externos: rutas absolutas

Para enlazar a otra web se escribe la URL completa, con https://. Es una ruta absoluta: funciona desde cualquier sitio.

<a href="https://www.w3schools.com/" target="_blank" rel="noopener">W3Schools</a>

• target="_blank" abre el enlace en una pestaña nueva. Úsalo sólo para enlaces externos, y con moderación.
• rel="noopener" es una medida de seguridad: impide que la página nueva pueda controlar la tuya. Ponlo siempre junto a target="_blank".

Enlaces internos: rutas relativas

Para enlazar a otra página de tu propia web se usa una ruta relativa: el camino desde el archivo en el que estás hasta el archivo de destino. Imagina esta web:

mi-web/
├── index.html
├── contacto.html
├── img/
│   └── logo.png
└── proyectos/
    ├── cartel.html
    └── revista.html

• Si el archivo está en la misma carpeta, basta con su nombre.
• Para entrar en una carpeta, se escribe su nombre seguido de /.
• Para salir de la carpeta actual y subir un nivel, se escribe ../.

Ojo: nunca enlaces tus propias páginas con rutas de tu ordenador como C:\Users\Ana\Desktop\mi-web\contacto.html. En tu ordenador funcionará, pero en cuanto publiques la web o la abras en otro equipo, el enlace estará roto.

Enlaces dentro de la misma página

Se puede enlazar a una parte concreta de una página. El destino necesita un id (un nombre único en la página) y el enlace apunta a él con #:

<!-- El destino: cualquier elemento con un id -->
<section id="precios">
  <h2>Precios</h2>
</section>

<!-- El enlace: # seguido del id -->
<a href="#precios">Ver precios</a>

<!-- También a una sección de otra página -->
<a href="servicios.html#precios">Ver precios</a>

Otros tipos de enlace

<a href="mailto:hola@estudioebro.es">hola@estudioebro.es</a>
<a href="tel:+34976000000">976 00 00 00</a>
<a href="img/portfolio.pdf" download>Descarga mi portfolio</a>

• mailto: abre el programa de correo con la dirección ya escrita.
• tel: en el móvil, permite llamar con un toque.
• download descarga el archivo en vez de abrirlo.

Idea clave: el texto del enlace debe decir adónde lleva. «Descarga el programa de la asignatura» es un buen enlace; «haz clic aquí» no, porque fuera de contexto no significa nada (y muchas personas recorren la página saltando de enlace en enlace).

Caracteres especiales

Algunos caracteres tienen un significado especial en HTML. Por ejemplo, si escribes <p> en un texto, el navegador creerá que es una etiqueta. Para mostrarlos tal cual se usan entidades: códigos que empiezan por & y terminan en ;.

<p>En HTML, los párrafos se escriben con &lt;p&gt;.</p>
<p>Diseño &amp; Comunicación</p>
<p>&copy; 2026 Estudio Ebro</p>

Ojo: las tildes, la ñ, los signos de apertura (¿, ¡) y casi cualquier otro símbolo se escriben directamente, siempre que tengas <meta charset="UTF-8"> en el <head>. Y no uses   para separar cosas: los espacios se controlan con CSS.

Imágenes

Las imágenes se insertan con <img>, un elemento vacío: no tiene contenido ni etiqueta de cierre, toda la información va en sus atributos.

<img
  src="img/cartel-festival.jpg"
  alt="Cartel del festival: un saxofón amarillo sobre fondo azul"
  width="800"
  height="1200">

• src (source) — la ruta al archivo. Funciona igual que en los enlaces: relativa para tus imágenes, absoluta para imágenes de otras webs.
• alt — el texto alternativo: describe la imagen para quien no puede verla. Es obligatorio.
• width y height — el ancho y el alto originales del archivo, en píxeles y sin unidades. Ver la nota de abajo.

¿El tamaño va en HTML o en CSS?

En los dos, pero cada uno tiene un trabajo distinto, y es fácil confundirlos.

• Los atributos width y height de HTML indican las medidas reales del archivo. No deciden a qué tamaño se ve la imagen: le dicen al navegador su proporción (si es horizontal, vertical, cuadrada…) antes de descargarla, para que le reserve el hueco.
• CSS decide a qué tamaño se muestra la imagen en pantalla.

¿Por qué hace falta reservar el hueco? Las imágenes tardan más en llegar que el texto. Si el navegador no sabe cuánto van a ocupar, pinta primero el texto y, cuando llega la imagen, lo empuja todo hacia abajo de golpe. Seguro que te ha pasado: vas a pulsar un enlace y, justo en ese momento, la página salta y pulsas otra cosa. Google tiene en cuenta estos saltos al valorar la calidad de una web.

Mal: usar los atributos para hacer la imagen más pequeña.

<!-- La foto mide 2000 × 1500 px, pero quiero que se vea a 300 px -->
<img src="img/taller.jpg" alt="Alumnos trabajando en el taller" width="300" height="225">

Se ve pequeña, sí, pero el navegador descarga igualmente los 2000 px de la foto, y en una pantalla estrecha la imagen no se adapta. Si la imagen sólo se va a ver pequeña, lo correcto es reducir el archivo (con Squoosh, por ejemplo).

Bien: las medidas reales en HTML y el tamaño en pantalla en CSS.

<!-- En HTML: las medidas reales del archivo -->
<img src="img/taller.jpg" alt="Alumnos trabajando en el taller" width="2000" height="1500">

/* En CSS: el tamaño al que se ve */
img {
  max-width: 100%;
  height: auto;
}

Esta regla de CSS la usarás en todas tus webs. max-width: 100% hace que la imagen nunca sea más ancha que el espacio que la contiene (por ejemplo, la pantalla del móvil), y height: auto recalcula el alto para que no se deforme. Lo veremos con calma en «Fundamentos de CSS».

Truco: para saber cuánto mide una imagen, en Windows haz clic derecho → Propiedades → Detalles; en Mac, ábrela con Vista Previa y ve a Herramientas → Ajustar tamaño. Squoosh también te lo muestra al abrirla.

Cómo escribir un buen alt

El texto alternativo lo leen los lectores de pantalla, aparece si la imagen no carga y lo usan los buscadores para entender qué hay en ella. Piensa: ¿qué contarías de esta imagen por teléfono?

• Describe lo importante, en una frase breve. No empieces con «Imagen de…»: ya se sabe que es una imagen.
• Si la imagen contiene texto (un cartel, un logotipo), incluye ese texto.
• Si la imagen es puramente decorativa (una textura, un adorno), deja el alt vacío: alt="". Así los lectores de pantalla la saltan. Vacío no es lo mismo que no ponerlo.

Formatos de imagen

Imágenes con pie de foto

Cuando una imagen va acompañada de un texto que la explica, se agrupan con <figure> y <figcaption>:

<figure>
  <img
    src="img/revista-portada.jpg"
    alt="Portada de la revista con una tipografía de gran tamaño"
    width="1200"
    height="1600">
  <figcaption>Portada del número 3 de la revista, 2026.</figcaption>
</figure>

Carga diferida

Con loading="lazy", el navegador no descarga la imagen hasta que el usuario se acerca a ella al hacer scroll. Muy útil en galerías y portfolios con muchas imágenes. No lo uses en las imágenes que se ven nada más entrar en la página.

<img src="img/proyecto-final.jpg" alt="…" width="1600" height="900" loading="lazy">

Ojo: una foto recién sacada de la cámara o del móvil puede medir 4000 píxeles de ancho y pesar 5 MB; en una web rara vez necesitas más de 2000 px. Antes de subir una imagen, redúcela y comprímela: lo ideal es que la mayoría pesen menos de 200–300 KB. Una herramienta gratuita y sencilla es Squoosh.

Vídeo, audio y contenido incrustado

Vídeo

<video
  src="video/animacion-logo.mp4"
  poster="img/animacion-portada.jpg"
  width="1280"
  height="720"
  controls>
  Tu navegador no puede reproducir este vídeo.
</video>

• controls muestra los botones de reproducir, pausa, volumen…
• poster es la imagen que se ve antes de darle a reproducir.
• El texto de dentro sólo aparece en navegadores que no pueden reproducir vídeo.
• Con autoplay muted loop el vídeo se reproduce solo, en bucle y sin sonido, como un GIF. Los navegadores sólo permiten la reproducción automática si el vídeo está silenciado.

Audio

<audio src="audio/entrevista.mp3" controls></audio>

Contenido de otras webs: <iframe>

Un <iframe> es una ventana dentro de tu página que muestra otra web. Así se insertan vídeos de YouTube o Vimeo, mapas de Google Maps, presentaciones, etc. No hace falta escribirlo a mano: estas plataformas lo generan desde su botón Compartir → Insertar.

<iframe
  src="https://www.youtube-nocookie.com/embed/CODIGO_DEL_VIDEO"
  title="Entrevista con la ilustradora"
  width="560" height="315"
  allowfullscreen>
</iframe>

Truco: los vídeos pesan muchísimo. Para vídeos largos, súbelos a YouTube o Vimeo e insértalos con un <iframe>: ellos se encargan de servirlos rápido y en la calidad adecuada a cada conexión. Guarda <video> para clips cortos, como una animación de logotipo.

Tablas

Las tablas sirven para mostrar datos organizados en filas y columnas: horarios, precios, comparativas, resultados… Vamos a construir una paso a paso, de la más sencilla a la más completa.

1. Una tabla sencilla: filas y celdas

Para empezar bastan tres etiquetas:

• <table> es la tabla entera.
• <tr> es una fila (table row).
• <td> es una celda con un dato (table data).

Las tablas se escriben fila a fila: cada <tr> contiene sus celdas, de izquierda a derecha. Esta tabla tiene tres filas y dos columnas:

<table>
  <tr>
    <td>Photoshop</td>
    <td>Retoque de imagen</td>
  </tr>
  <tr>
    <td>Illustrator</td>
    <td>Dibujo vectorial</td>
  </tr>
  <tr>
    <td>Figma</td>
    <td>Diseño de interfaces</td>
  </tr>
</table>

Fíjate: todas las filas tienen que tener el mismo número de celdas. Si a una le falta una, la tabla se descuadra. En los resultados de este apartado hemos añadido bordes para que veas cada celda. Sin CSS, el navegador no dibuja ninguna línea.

2. Celdas de encabezado: <th>

Para que se entienda qué es cada columna, la primera fila lleva títulos. En lugar de <td> se usa <th> (table header). El navegador la muestra en negrita, y los lectores de pantalla la anuncian como título de la columna.

<table>
  <tr>
    <th>Programa</th>
    <th>Para qué sirve</th>
  </tr>
  <tr>
    <td>Photoshop</td>
    <td>Retoque de imagen</td>
  </tr>
  <tr>
    <td>Illustrator</td>
    <td>Dibujo vectorial</td>
  </tr>
</table>

3. Título y partes: <caption>, <thead> y <tbody>

Una tabla completa se organiza en partes:

• <caption> es el título de la tabla. Va justo después de abrir <table>.
• <thead> agrupa la fila (o filas) de encabezado.
• <tbody> agrupa las filas de datos.

<thead> y <tbody> no cambian el aspecto por sí solos, pero ordenan el código y permiten dar estilo a cada parte con CSS: en el resultado de abajo, por ejemplo, la cabecera tiene un fondo gris.

<table>
  <caption>Programas de diseño</caption>
  <thead>
    <tr>
      <th>Programa</th>
      <th>Para qué sirve</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Photoshop</td>
      <td>Retoque de imagen</td>
    </tr>
    <tr>
      <td>Illustrator</td>
      <td>Dibujo vectorial</td>
    </tr>
  </tbody>
</table>

4. Unir celdas: colspan y rowspan

A veces una celda tiene que ocupar más de un hueco, como una clase que dura dos horas en un horario:

• colspan="2" hace que una celda ocupe dos columnas: se estira a lo ancho.
• rowspan="2" hace que una celda ocupe dos filas: se estira hacia abajo. En la fila siguiente hay que escribir una celda menos, porque ese hueco ya está ocupado.

En este horario, «Taller» ocupa dos horas (rowspan) y «Tutorías», los dos días (colspan). Fíjate también en que la columna de la hora usa <th>: es el título de cada fila.

<table>
  <caption>Horario de Programación 1.º</caption>
  <thead>
    <tr>
      <th>Hora</th>
      <th>Lunes</th>
      <th>Miércoles</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>9:00</th>
      <td>Teoría</td>
      <td rowspan="2">Taller</td>
    </tr>
    <tr>
      <th>10:00</th>
      <td>Práctica</td>
    </tr>
    <tr>
      <th>11:00</th>
      <td colspan="2">Tutorías</td>
    </tr>
  </tbody>
</table>

Ojo: hace años las tablas se usaban para maquetar páginas enteras (columnas, menús…). Hoy eso es un error: las tablas son sólo para datos. La maquetación se hace con CSS, como veremos en «Layout».

Qué es CSS y cómo se añade

CSS (Cascading Style Sheets, hojas de estilo en cascada) es el lenguaje que define el aspecto de una web: colores, tipografías, tamaños, espacios y la colocación de cada elemento. HTML dice qué es cada cosa; CSS dice cómo se ve.

La regla CSS

Un archivo CSS es una lista de reglas. Cada regla dice «a estos elementos, aplícales estos estilos»:

h1 {
  color: #546D78;
  font-size: 32px;
}

• h1 es el selector: a qué elementos se aplica la regla.
• Entre llaves { } van las declaraciones, cada una terminada en punto y coma.
• Cada declaración tiene una propiedad (color), dos puntos y un valor (#546D78).

Tres formas de añadir CSS

1. En línea, con el atributo style en una etiqueta. Sólo afecta a ese elemento.

<p style="color: red;">Texto en rojo</p>

2. Interno, dentro de una etiqueta <style> en el <head>. Sólo afecta a esa página.

<head>
  <style>
    p { color: red; }
  </style>
</head>

3. Externo, en un archivo .css aparte que se enlaza desde el <head> con <link>. Es la forma recomendada.

<head>
  <meta charset="UTF-8">
  <title>Mi web</title>
  <link rel="stylesheet" href="css/estilos.css">
</head>

Con una hoja externa, todas las páginas de la web comparten el mismo archivo de estilos: si cambias el color de los títulos en estilos.css, cambia en toda la web a la vez. Además, el HTML queda limpio, sólo con contenido.

Comentarios

/* Esto es un comentario en CSS */
/* ---------- Cabecera ---------- */

Ojo: en CSS los comentarios se escriben con /* */, no con <!-- --> como en HTML. Son útiles para dividir la hoja de estilos en secciones y encontrar cada cosa rápido.

Selectores

El selector indica a qué elementos se aplica una regla. Estos son los que usarás el 90 % de las veces; en 2º verás los selectores avanzados.

Selector de elemento

El nombre de la etiqueta, sin < >. Se aplica a todos los elementos de ese tipo.

p {
  line-height: 1.6;
}

Selector de clase

Una clase es un nombre que tú inventas y pones a los elementos que quieras con el atributo class. En CSS se escribe con un punto delante. Es el selector más usado, porque permite dar estilo a elementos concretos y reutilizarlo tantas veces como haga falta.

<p class="destacado">Inscripciones abiertas hasta el viernes.</p>
<p>Un párrafo normal.</p>
<p class="destacado aviso">Se pueden poner varias clases separadas por espacios.</p>

.destacado {
  font-weight: bold;
  color: #546D78;
}

Selector de id

Un id identifica a un único elemento de la página: no puede haber dos elementos con el mismo id. En CSS se escribe con una almohadilla.

<header id="cabecera">…</header>

#cabecera {
  background: #F7F6F2;
}

¿Clase o id? Para dar estilos, usa clases casi siempre: se pueden repetir y combinar. Reserva los id para los enlaces internos (#seccion, «Texto y enlaces») y para JavaScript.

Agrupar selectores

Si varias reglas comparten estilos, se separan los selectores con comas:

h1, h2, h3 {
  font-family: Georgia, serif;
}

Selector descendiente

Dos selectores separados por un espacio: «los a que estén dentro de un nav». Así puedes dar a los enlaces del menú un estilo distinto al del resto, sin poner clases a todos.

nav a {
  text-decoration: none;
}

Pseudoclases: estados

Seleccionan un elemento cuando está en un estado concreto. Se escriben con dos puntos.

a {
  color: #546D78;
}

a:hover {
  color: #DA8A2F;
  text-decoration: underline;
}

Truco: pon a las clases nombres que digan qué es el elemento, no cómo se ve. .aviso es mejor que .texto-rojo: si mañana el aviso pasa a ser naranja, el nombre seguirá teniendo sentido. Escríbelos en minúsculas y con guiones, como los archivos.

Cascada, herencia y especificidad

A menudo, varias reglas intentan dar estilo al mismo elemento. ¿Cuál gana? CSS lo decide con tres mecanismos. Entenderlos te ahorrará muchas horas de «¿por qué no se aplica mi estilo?».

La cascada: gana la última

Si dos reglas con el mismo selector chocan, gana la que está más abajo en el código. De ahí el nombre: los estilos caen en cascada, de arriba abajo.

p { color: blue; }
p { color: green; }   /* gana esta: va después */

La especificidad: gana la más concreta

Si los selectores son distintos, gana el más específico, aunque esté más arriba:

<p class="nota" id="aviso">¿De qué color soy?</p>

#aviso   { color: red; }    /* id: gana */
.nota    { color: green; }
p        { color: blue; }

1. El atributo style en línea gana a todo lo demás.
2. Después, los selectores con id.
3. Después, los de clase y pseudoclase.
4. Y por último, los de elemento.

Sólo cuando dos selectores tienen la misma especificidad decide el orden (la cascada).

La herencia: los hijos se parecen a los padres

Algunas propiedades, sobre todo las de texto (color, font-family, font-size, line-height…), pasan automáticamente de un elemento a los que contiene. Por eso basta con definirlas una vez en el body:

body {
  font-family: Arial, sans-serif;
  color: #21231F;
}
/* Todos los párrafos, títulos, enlaces… heredan
   esta tipografía y este color sin escribirlo otra vez */

Las propiedades de la caja (border, padding, margin, background…) no se heredan: si pusieras un borde al body, no aparecería un borde alrededor de cada párrafo.

Ojo: verás que existe !important, que obliga a que una declaración gane siempre. Evítalo: es como gritar en una discusión. Funciona, pero luego hace falta gritar más fuerte para cambiar nada. Si un estilo no se aplica, busca la causa con el inspector (clic derecho → Inspeccionar): en el panel Estilos verás las reglas que pierden tachadas.

Colores y unidades

Formas de escribir un color

El mismo color se puede escribir de varias formas. Todas estas son el color de acento de esta web:

Fíjate: aquí vemos cómo se escriben los colores en CSS. La teoría del color digital (RGB, CMYK, profundidad de color…) la tienes a fondo en Medios Informáticos I, «Teoría del color».

Cómo se lee un color hexadecimal

Los seis caracteres se leen de dos en dos, de izquierda a derecha: los dos primeros son el rojo, los dos del centro el verde y los dos de la derecha del todo el azul. Es el mismo orden que en rgb(). Por ejemplo, el color de acento de esta web:

• ¿Por qué hay letras? El sistema hexadecimal cuenta con 16 símbolos en lugar de 10: del 0 al 9 y después de la A (10) a la F (15). Así, con sólo dos caracteres se escribe cualquier valor del 0 al 255.
• Cada pareja es un byte: 00 es 0 (nada de ese color) y FF es 255 (el máximo). El primer carácter vale 16 veces más que el segundo: 6D es 6 × 16 + 13 = 109.
• Algunos ejemplos: #FF0000 es rojo puro (todo rojo, nada de verde ni de azul), #000000 es negro, #FFFFFF es blanco y, cuando los tres pares son iguales, como en #808080, sale un gris.
• Forma corta: si cada pareja tiene los dos caracteres iguales, se puede escribir con tres: #FF0000 es lo mismo que #F00.
• Con transparencia: a veces verás ocho caracteres, como #546D7880. La pareja añadida al final es la opacidad: 00 es transparente y FF opaco (80 es más o menos la mitad).

.boton {
  color: white;                       /* nombre */
  background: #546D78;                /* hexadecimal */
  border-color: rgb(84, 109, 120);    /* RGB */
  outline-color: hsl(198, 18%, 40%);  /* HSL */
}

.capa {
  background: rgba(0, 0, 0, 0.5);     /* negro al 50 % de opacidad */
}

Ojo: que un texto se lea bien no depende sólo del gusto: el contraste entre el texto y el fondo debe ser suficiente para que lo lean personas con baja visión o con el móvil al sol. Compruébalo con el inspector de Chrome (al hacer clic en un color te muestra el contraste) o con el comprobador de contraste de WebAIM.

Unidades de medida: absolutas y relativas

Las medidas de CSS son de dos tipos:

• Absolutas: miden siempre lo mismo, sea cual sea la pantalla. La de la web es el píxel (px). Existen también cm, mm y pt, pero sólo tienen sentido al imprimir.
• Relativas: dependen de otra cosa, como el tamaño de letra, el elemento que las contiene o la ventana. Si eso cambia, la medida cambia con ello.

Mira la diferencia en dos contenedores de distinto ancho: la barra de 200px mide lo mismo en los dos; la del 50% siempre ocupa la mitad.

Más sobre vw y vh. Vienen de viewport width y viewport height. El viewport es la zona del navegador donde se ve la página, sin contar la barra de direcciones ni las pestañas. Imagina que la divides en 100 columnas iguales: cada una mide 1vw. Si la divides en 100 filas, cada una mide 1vh.

• En una ventana de 1200px de ancho, 1vw = 12px, 50vw = 600px y 100vw = 1200px.
• En un móvil de 400px de ancho, 1vw = 4px, así que 50vw = 200px.
• Si la ventana mide 800px de alto, 100vh = 800px: el elemento ocupa exactamente una pantalla de alto.

La diferencia con % es la referencia: 50% es la mitad del elemento que lo contiene; 50vw es la mitad de la ventana, esté donde esté el elemento.

html {
  font-size: 16px;       /* tamaño base: 1rem = 16px */
}
h1 {
  font-size: 2.5rem;     /* 2,5 × 16 = 40px */
  margin-bottom: 1rem;   /* 16px */
}
.contenedor {
  width: 90%;            /* el 90 % del ancho de su padre */
  max-width: 1100px;     /* pero nunca más de 1100px */
}
.portada {
  height: 100vh;         /* toda la altura de la pantalla */
}

Idea clave: en una web no sabes en qué pantalla se va a ver: un móvil, un portátil, un monitor enorme. Por eso, a diferencia del diseño para imprimir, se trabaja sobre todo con medidas relativas (rem, %, vw), que se adaptan, y se limitan con max-width para que nada crezca demasiado.

El modelo de caja

Es el concepto más importante de CSS: todo elemento es una caja rectangular, aunque no lo parezca. Un párrafo, un enlace, una imagen, el body… Cada caja tiene cuatro capas, de dentro hacia fuera. En el dibujo, cada capa es una franja de color, con los mismos colores que usa el inspector del navegador (el grosor de cada franja no está a escala):

• Contenido (content) — el texto, la imagen… Su tamaño se controla con width y height.
• Relleno (padding) — el espacio interior, entre el contenido y el borde. Toma el color de fondo del elemento.
• Borde (border) — la línea que rodea el relleno: la franja amarilla del dibujo. Se define con grosor, estilo y color: 2px solid black.
• Margen (margin) — el espacio exterior, que separa la caja de las demás. Siempre es transparente.

.tarjeta {
  width: 300px;
  padding: 20px;
  border: 2px solid #21231F;
  margin: 30px;
}

Valores para cada lado

padding y margin aceptan de uno a cuatro valores. Cuando son cuatro, van en el sentido de las agujas del reloj empezando por arriba:

padding: 10px;                 /* los cuatro lados */
padding: 10px 20px;            /* arriba y abajo | izquierda y derecha */
padding: 10px 20px 30px 40px;  /* arriba | derecha | abajo | izquierda */

margin-top: 40px;

box-sizing: border-box

Por defecto, width mide sólo el contenido, y el relleno y el borde se suman. La tarjeta de arriba no mide 300px de ancho, sino 300 + 20 + 20 + 2 + 2 = 344px. Es poco intuitivo, así que casi todas las webs empiezan su CSS con esta regla, que hace que width incluya el relleno y el borde:

*, *::before, *::after {
  box-sizing: border-box;
}

Bloque y en línea, otra vez

¿Recuerdas los elementos de bloque y en línea de «Introducción a HTML»? Su comportamiento se controla con la propiedad display:

• display: block — ocupa todo el ancho y empieza en una línea nueva. Acepta width, height y márgenes en todas las direcciones.
• display: inline — va dentro del texto. Ignora width, height y los márgenes de arriba y abajo.
• display: inline-block — va dentro del texto, pero acepta medidas como un bloque. Ideal para botones.
• display: none — oculta el elemento por completo.

Imágenes que se adaptan

Esta es la regla que te prometimos en «Multimedia y tablas». Hace que ninguna imagen sea más ancha que su contenedor y que mantenga su proporción:

img {
  max-width: 100%;
  height: auto;
  display: block;
}

Truco: en el inspector de Chrome, al seleccionar un elemento, la pestaña Calculado (Computed) muestra su caja con las medidas reales de contenido, relleno, borde y margen. Al pasar el ratón sobre cada capa, se ilumina en la página. Es la mejor forma de entender por qué algo ocupa más de lo que esperabas.

Alinear y centrar

Antes de maquetar con Flexbox y Grid («Layout»), ya puedes alinear y centrar casi todo con dos propiedades. La clave es saber qué quieres mover: el contenido de una caja o la caja entera.

El texto y lo que va en línea: text-align

text-align se pone en el contenedor y alinea todo lo que va en línea dentro de él: el texto, los enlaces, las imágenes y los botones con display: inline-block. La caja no se mueve; se mueve lo que hay dentro.

.aviso {
  text-align: center;
}

Una caja entera: margin: 0 auto

Un bloque ocupa todo el ancho, así que no hay nada que centrar… hasta que le das un ancho. Con un width o un max-width y márgenes laterales automáticos, el espacio que sobra se reparte a partes iguales a cada lado.

.contenedor {
  max-width: 1100px;
  margin: 0 auto;  /* 0 arriba y abajo, «automático» a los lados */
}

Ojo: sin ancho, margin: 0 auto no hace nada, porque el bloque ya ocupa todo el espacio. Y no funciona con elementos en línea: para esos está text-align.

Una imagen

Una imagen va en línea, así que tiene dos formas de centrarse: con text-align: center en su contenedor, o convirtiéndola en bloque y dándole márgenes automáticos.

img.centrada {
  display: block;
  margin: 0 auto;
}

¿Y en vertical?

Centrar en vertical es otra historia. En un botón o una etiqueta basta con poner el mismo padding arriba y abajo. Para centrar algo dentro de una caja con altura, o colocar varias cosas en fila, la herramienta es Flexbox, que veremos en «Layout».

Idea clave: text-align mueve lo que hay dentro de la caja; margin: 0 auto mueve la caja.

Bordes

Grosor, estilo y color

En el tema anterior vimos que el borde es una de las capas del modelo de caja. La propiedad border lo define con tres valores, en cualquier orden: el grosor, el estilo y el color. Sin estilo, el borde no se ve.

.tarjeta {
  border: 2px solid #21231F;
  /*      grosor  estilo  color */
}

• solid — línea continua.
• dashed — discontinua, de rayas.
• dotted — de puntos.
• double — doble línea (necesita al menos 3px de grosor para que se vea).
• groove y ridge — un surco hundido o un relieve, como una moldura.
• inset y outset — la caja entera parece hundida o en relieve, como los botones de los programas antiguos.
• none — sin borde. Útil para quitar el que trae un elemento por defecto.

Ojo: los cuatro estilos con efecto de volumen (groove, ridge, inset y outset) necesitan un borde grueso para notarse, y el navegador calcula las luces y las sombras a partir del color, así que con colores muy oscuros apenas se ven. Hoy se usan poco porque dan un aspecto anticuado, pero conviene reconocerlos.

Un solo lado

Con border-top, border-right, border-bottom y border-left se pone borde sólo en un lado. Es muy útil para subrayados decorativos o para destacar bloques, como los avisos de estos apuntes:

.titulo {
  border-bottom: 3px solid #546D78;
}

.cita {
  border-left: 4px solid #96B7C6;
  padding-left: 1rem;
}

Cada parte también se puede escribir por separado, lo que permite cambiar sólo una de ellas, por ejemplo el color en un :hover:

.caja {
  border-width: 2px;
  border-style: dashed;
  border-color: #546D78;
}

Un color para cada lado

border-color, border-width y border-style aceptan de uno a cuatro valores, igual que padding y margin: en el sentido de las agujas del reloj, empezando por arriba.

.caja {
  border-style: solid;
  border-width: 6px;
  border-color: #546D78 #DA8A2F #96B7C6 #21231F;
  /*            arriba  derecha  abajo   izquierda */
}

Fíjate: en las esquinas, los bordes de dos lados se juntan en diagonal. Con bordes muy gruesos se ve claramente en la primera caja.

Contorno: outline

outline se escribe igual que border, pero se dibuja por fuera de la caja y no ocupa espacio, así que no mueve nada al aparecer. Los navegadores lo usan para marcar el elemento seleccionado con el teclado. Si cambias su aspecto, nunca lo elimines del todo: quien navega con el teclado se quedaría sin saber dónde está.

a:focus-visible {
  outline: 2px solid #546D78;
  outline-offset: 3px;  /* separación entre el elemento y el contorno */
}

Fondos, esquinas y sombras

Color de fondo

Cualquier caja puede tener un color de fondo con background (o background-color). El fondo ocupa el contenido y el relleno, hasta el borde; el margen siempre queda transparente.

.aviso {
  background: #E0E0E0;
  padding: 1rem;
}

Esquinas redondeadas: border-radius

.tarjeta {
  border-radius: 8px;
}

.avatar {
  border-radius: 50%;     /* en una caja cuadrada, un círculo */
}

Sombras: box-shadow

Una sombra se define con su desplazamiento horizontal y vertical, el difuminado y el color. Las sombras más elegantes son suaves: poco desplazamiento, mucho difuminado y un color muy transparente.

.tarjeta {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* horizontal | vertical | difuminado | color */
}

Degradados

Un degradado se crea con linear-gradient(): la dirección (en grados o con palabras como to right) y dos o más colores.

.portada {
  background: linear-gradient(135deg, #546D78, #96B7C6);
}

Imágenes de fondo

A diferencia de <img>, una imagen de fondo es decorativa: no tiene alt y no forma parte del contenido. Úsala para texturas o portadas con texto encima, nunca para imágenes que aporten información.

.portada {
  background-image: url("../img/portada.jpg");
  background-size: cover;      /* cubre toda la caja, recortando si hace falta */
  background-position: center;
}

La ruta es relativa al archivo CSS, no al HTML. Por eso, si el CSS está en la carpeta css, hay que salir con ../ para llegar a img.

Fondos que se repiten: patrones

Por defecto, si la imagen de fondo es más pequeña que la caja, el navegador la repite como un mosaico hasta llenarla. Eso sirve para crear fondos continuos a partir de una pieza pequeña, como un azulejo:

.fondo {
  background-image: url("../img/patron.png");
  background-repeat: repeat;
  background-size: 60px;
}

• background-repeat decide cómo se repite: repeat (en las dos direcciones), repeat-x (sólo en horizontal), repeat-y (sólo en vertical) o no-repeat (una sola vez).
• background-size fija el tamaño de cada pieza: cuanto más pequeña, más tupido el patrón.

También se pueden crear patrones sólo con CSS, sin ninguna imagen, repitiendo degradados pequeños:

.lunares {
  background-color: #F7F6F2;
  background-image: radial-gradient(#546D78 2px, transparent 2px);
  background-size: 20px 20px;
}

.rayas {
  background: repeating-linear-gradient(45deg, #D3DBDE 0 10px, #F7F6F2 10px 20px);
}

.cuadricula {
  background-color: #FFFFFF;
  background-image:
    linear-gradient(#D3DBDE 1px, transparent 1px),
    linear-gradient(90deg, #D3DBDE 1px, transparent 1px);
  background-size: 24px 24px;
}

Si no quieres dibujarlos tú, en Hero Patterns y Pattern Monster tienes cientos de patrones gratuitos: eliges colores y tamaño, y copias el código.

Ojo: un patrón detrás de un texto tiene que ser muy suave, con poco contraste entre sus colores. Si se ve demasiado, el texto deja de leerse.

Varios fondos a la vez

Una caja puede tener varios fondos separados por comas: el primero queda encima. Es muy útil para oscurecer una foto con un degradado semitransparente y que el texto blanco se lea bien sobre ella:

.portada {
  background:
    linear-gradient(rgba(33, 35, 31, 0.6), rgba(33, 35, 31, 0.6)),
    url("../img/portada.jpg") center / cover;
  color: white;
}

Tipografía

En la web, la mayor parte del diseño es texto. Cuidar la tipografía es la forma más rápida de que una página parezca profesional.

Elegir la fuente: font-family

Se escribe una lista de fuentes separadas por comas. El navegador usa la primera que encuentre; si el usuario no la tiene, pasa a la siguiente. La lista siempre termina con una familia genérica, por si no tiene ninguna:

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
}

• serif — con remates (como Georgia o Times).
• sans-serif — sin remates (como Arial o Helvetica).
• monospace — todas las letras miden lo mismo de ancho (como la del código de estos apuntes).

Los nombres con espacios van entre comillas.

Fuentes web: Google Fonts

Si sólo usas las fuentes del sistema, tu web dependerá de lo que tenga instalado cada usuario. Con las fuentes web, la tipografía se descarga junto con la página y se ve igual en todas partes. El catálogo gratuito más usado es Google Fonts:

1. Busca una fuente y elige los pesos que vas a usar (por ejemplo, 400 y 700).
2. Pulsa Get embed code y copia las etiquetas <link> en el <head>, antes de tu hoja de estilos.
3. Usa la fuente en tu CSS con su nombre.

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/estilos.css">
</head>

body {
  font-family: "Inter", sans-serif;
}

Ojo: cada peso y cada estilo es un archivo que hay que descargar. Elige sólo los que vayas a usar (normalmente dos o tres) y no más de dos familias por web. Y si publicas una web real en Europa, ten en cuenta que cargar las fuentes desde los servidores de Google envía la IP del visitante a Google. Por eso muchas webs las descargan y las sirven desde su propio servidor; Google Fonts permite descargarlas con el botón Download.

Tamaño, peso e interlineado

body {
  font-size: 1rem;
  line-height: 1.6;
  color: #21231F;
}

h1 {
  font-size: 2.5rem;
  font-weight: 700;         /* 400 = normal, 700 = negrita */
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.etiqueta {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
}

article p {
  max-width: 65ch;          /* líneas de unos 65 caracteres */
}

Idea clave: las reglas de la tipografía impresa siguen valiendo en pantalla. Texto de lectura de al menos 16px, interlineado de 1,5 a 1,7, líneas de 45 a 75 caracteres (con max-width en ch) y alineado a la izquierda: el texto justificado en web deja «ríos» de espacio porque el navegador no divide bien las palabras.

Variables CSS

En una web, el mismo color o la misma fuente se repiten decenas de veces. Si un día decides cambiar el verde por un azul, tendrías que buscarlo y cambiarlo en todos los sitios. Las variables (o propiedades personalizadas) resuelven esto: guardas el valor una vez, con un nombre, y lo usas donde quieras.

Definirlas

Se definen dentro de :root (que equivale a todo el documento) y su nombre empieza siempre por dos guiones:

:root {
  --color-principal: #546D78;
  --color-texto: #21231F;
  --color-fondo: #F7F6F2;
  --fuente-titulos: Georgia, serif;
  --espacio: 1.5rem;
}

Usarlas

Para usar una variable, se escribe su nombre dentro de var():

body {
  color: var(--color-texto);
  background: var(--color-fondo);
}

h1, h2 {
  font-family: var(--fuente-titulos);
  color: var(--color-principal);
}

.boton {
  background: var(--color-principal);
  padding: var(--espacio);
}

Ahora, cambiando --color-principal en una sola línea, cambian los títulos, los botones y todo lo que lo use. Es la versión en código de los estilos de color y de párrafo de InDesign: defines el sistema una vez y lo aplicas en todas partes.

Transiciones

Sin transiciones, los cambios de estilo (por ejemplo, en :hover) son instantáneos y bruscos. Una transición hace que el cambio ocurra de forma gradual.

.boton {
  background: #546D78;
  transition: background 0.3s ease;
}

.boton:hover {
  background: #21231F;
}

Fíjate en dónde va la transition: en .boton, el estado normal, y no en .boton:hover.

• .boton se aplica siempre, con el ratón encima o no. Si la transición está ahí, el cambio es suave al poner el ratón y también al quitarlo.
• .boton:hover se aplica sólo mientras el ratón está encima. Si la transición está ahí, el cambio es suave al entrar, pero al quitar el ratón la transición desaparece con el :hover y el botón vuelve de golpe.

Compruébalo: pasa el ratón por los dos botones y retíralo.

La transición tiene tres partes:

• Qué propiedad cambia: background, color, transform… (o all, aunque es mejor ser concreto).
• Cuánto dura: 0.3s. Para la interfaz, entre 0,15 y 0,4 segundos: más rápido no se nota, más lento parece que la web va lenta.
• La curva de aceleración: ease (por defecto, natural), ease-out (frena al final), linear (velocidad constante, suele parecer mecánica).

Transformaciones: transform

Mueven, escalan o giran un elemento sin afectar al resto de la página. Son las propiedades más fluidas de animar.

• translateY(-6px) — lo desplaza (aquí, 6px hacia arriba).
• scale(1.05) — lo agranda un 5 %.

.tarjeta {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tarjeta:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

Idea clave: el movimiento debe ayudar: indicar que algo se puede pulsar, que algo ha cambiado o de dónde viene un elemento. Si sólo decora, mejor poco y sutil. Una web en la que todo se mueve cansa y parece menos profesional, no más.

El formulario y sus etiquetas

Los formularios recogen información del usuario: un contacto, una inscripción, una búsqueda, una compra… Todo va dentro de un <form>.

<form action="https://formspree.io/f/TU_CODIGO" method="post">
  <label for="nombre">Nombre</label>
  <input type="text" id="nombre" name="nombre" required>

  <label for="correo">Correo electrónico</label>
  <input type="email" id="correo" name="correo" required>

  <label for="tipo">Tipo de proyecto</label>
  <select id="tipo" name="tipo">
    <option>Identidad</option>
    <option>Web</option>
    <option>Editorial</option>
  </select>

  <label for="mensaje">Mensaje</label>
  <textarea id="mensaje" name="mensaje" rows="5"></textarea>

  <button type="submit">Enviar</button>
</form>

En este tema veremos una a una las piezas de ese formulario, y alguna más.

<form>: el contenedor

Envuelve todos los campos. Sus dos atributos principales deciden qué pasa al pulsar «Enviar»:

• action — la dirección a la que se envían los datos (un servidor o un servicio como Formspree).
• method — cómo se envían: get los añade a la dirección, a la vista (buscar.html?q=carteles), y se usa en buscadores; post los envía ocultos, y se usa en contactos, inscripciones y todo lo que lleve datos personales.

<label>: el nombre de cada campo

Todo campo necesita su <label>, el texto que dice qué se pide. Hay dos formas de unirlo a su campo:

<!-- 1. Con for e id, que deben coincidir -->
<label for="ciudad">Ciudad</label>
<input type="text" id="ciudad" name="ciudad">

<!-- 2. Metiendo el campo dentro del label -->
<label>
  <input type="checkbox" name="boletin"> Quiero recibir el boletín
</label>

Pruébalo: haz clic en la palabra «Ciudad» o en el texto del boletín, no en el campo. Se activa igual. Eso facilita pulsar en el móvil, y además los lectores de pantalla leen el <label> para decir qué se pide en cada campo.

Campos para escribir

<input>: los campos de una línea

Es el campo más usado. Es un elemento vacío (no tiene etiqueta de cierre), y su atributo type decide qué tipo de dato recoge. Elegir bien el tipo es importante: en el móvil, cada uno muestra el teclado adecuado (con @ para el correo, numérico para el teléfono…) y el navegador comprueba algunos datos automáticamente. Pruébalos en la última columna:

<textarea>: texto largo

Para mensajes, comentarios o cualquier texto de varias líneas. A diferencia de <input>, tiene etiqueta de apertura y de cierre, y lo que haya entre las dos aparece escrito dentro. Con rows se indica cuántas líneas se ven, y con maxlength, el máximo de caracteres.

<label for="comentario">Cuéntanos tu proyecto</label>
<textarea id="comentario" name="comentario" rows="4" maxlength="500"></textarea>

Campos para elegir

<select> y <option>: el desplegable

Un <select> es un menú desplegable, y cada <option> es una de sus opciones. Es útil cuando hay muchas opciones (países, provincias, tallas) y no caben a la vista.

• El texto entre <option> y </option> es lo que se ve; el atributo value es lo que se envía. Si no hay value, se envía el texto.
• selected marca la opción que aparece elegida al cargar.
• Una primera opción con value="" y disabled sirve de instrucción («Elige una opción») sin que se pueda enviar como respuesta.
• <optgroup label="…"> agrupa opciones bajo un título.

<label for="provincia">Provincia</label>
<select id="provincia" name="provincia" required>
  <option value="" disabled selected>Elige una provincia</option>
  <optgroup label="Aragón">
    <option value="HU">Huesca</option>
    <option value="TE">Teruel</option>
    <option value="Z">Zaragoza</option>
  </optgroup>
  <optgroup label="Cataluña">
    <option value="B">Barcelona</option>
    <option value="L">Lleida</option>
  </optgroup>
</select>

Con el atributo multiple, el desplegable se convierte en una lista en la que se pueden elegir varias opciones (con Ctrl/Cmd + clic). Es poco cómodo, sobre todo en el móvil: para elegir varias cosas suelen funcionar mejor unas casillas checkbox.

¿Desplegable o botones de opción? Si hay pocas opciones (hasta cinco o seis), usa radio: se ven todas de un vistazo, sin abrir nada. Si hay muchas, usa <select>.

Casillas y botones de opción: checkbox y radio

Los botones radio de un mismo grupo deben compartir el mismo name: así el navegador sabe que sólo se puede marcar uno. Cada uno lleva un value distinto, que es lo que se envía. Para agrupar campos relacionados se usa <fieldset>, con <legend> como título del grupo.

<fieldset>
  <legend>¿Cómo prefieres que te contactemos?</legend>

  <input type="radio" id="por-correo" name="contacto" value="correo" checked>
  <label for="por-correo">Por correo</label>

  <input type="radio" id="por-telefono" name="contacto" value="telefono">
  <label for="por-telefono">Por teléfono</label>
</fieldset>

<input type="checkbox" id="acepto" name="acepto" required>
<label for="acepto">Acepto la política de privacidad</label>

El atributo checked deja una opción marcada al cargar. Úsalo en los radio para proponer la opción más habitual, pero nunca en la casilla de aceptar la privacidad: la ley exige que la marque la propia persona.

Botones y atributos

<button>: los botones

Su atributo type decide qué hacen:

• type="submit" — envía el formulario. Es el valor por defecto dentro de un <form>.
• type="reset" — borra todo lo escrito. Úsalo con cuidado: es muy fácil pulsarlo sin querer y perderlo todo.
• type="button" — no hace nada por sí solo. Se usa con JavaScript, como verás en Programación II.

<button type="submit">Enviar</button>
<button type="reset">Borrar</button>

Recuerda el name: es el nombre con el que llega cada dato al recibir el formulario. Sin name, el dato no se envía, aunque el campo se vea y se pueda rellenar.

Atributos útiles

<label for="programa">Programa favorito</label>
<input list="programas" id="programa" name="programa">
<datalist id="programas">
  <option value="Figma">
  <option value="Illustrator">
  <option value="Photoshop">
</datalist>

Ojo: HTML sólo dibuja el formulario. Para que los datos lleguen a algún sitio hace falta un servidor que los reciba (con PHP, por ejemplo), y eso queda fuera de este curso. Para una web estática hay servicios gratuitos como Formspree o los formularios de Netlify, que reciben los datos y te los envían por correo: basta con poner su dirección en el atributo action.

Dar estilo a un formulario

Los campos de un formulario tienen un aspecto por defecto que cambia de un navegador a otro y que rara vez encaja con tu diseño. Con lo que ya sabes del modelo de caja, los bordes y las transiciones, puedes darles el tuyo:

label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
}

input, select, textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid #C9C7C0;
  border-radius: 6px;
  font: inherit;
}

input:focus, select:focus, textarea:focus {
  border-color: #546D78;
  outline: 2px solid #546D78;
  outline-offset: 1px;
}

button {
  padding: 0.7rem 1.4rem;
  border: none;
  border-radius: 6px;
  background: #546D78;
  color: white;
  font: inherit;
  cursor: pointer;
}

• font: inherit: por defecto, los campos y los botones no usan la tipografía de la página. Con esta línea la heredan.
• width: 100%: los campos ocupan todo el ancho disponible. Funciona bien gracias a box-sizing: border-box, que viste en «Fundamentos de CSS».
• :focus: marca el campo en el que se está escribiendo. Puedes cambiar su aspecto, pero nunca lo quites sin poner otro: quien usa el teclado necesita ver dónde está.
• accent-color: cambia de una vez el color de las casillas, los botones de opción y los controles deslizantes, por ejemplo accent-color: #546D78;.

El flujo normal

Layout es la distribución de los elementos en la página: qué va arriba, qué va al lado de qué, cuántas columnas hay. Si CSS era la piel y la ropa, el layout es la pose: cómo se coloca cada parte del cuerpo.

Sin ningún CSS, los elementos se colocan siguiendo el flujo normal, que ya conoces de «Introducción a HTML»:

• Los elementos de bloque se apilan uno debajo de otro, cada uno ocupando todo el ancho.
• Los elementos en línea se colocan uno al lado de otro, dentro del texto, y saltan de línea cuando no caben.

El flujo normal sirve para textos, pero no para poner un logotipo a un lado y el menú al otro, ni para hacer una galería de tres columnas. Para eso CSS tiene dos herramientas: Flexbox y Grid.

Un poco de historia: antes de que existieran Flexbox (hacia 2012) y Grid (2017), las columnas se hacían con trucos: tablas («Multimedia y tablas») o una propiedad llamada float, pensada en realidad para que el texto rodease las imágenes. Si buscas tutoriales antiguos, los encontrarás. Hoy no hace falta ninguno de los dos.

Flexbox

Flexbox coloca elementos en una sola dirección: en fila o en columna. Es ideal para menús, cabeceras, botones con icono, tarjetas en fila o para centrar cualquier cosa.

Se aplica al contenedor (el padre), y afecta a sus hijos directos:

<div class="contenedor">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

.contenedor {
  display: flex;
  gap: 8px;
}

Con sólo display: flex, los hijos dejan de apilarse y se ponen en fila. gap añade espacio entre ellos (sin márgenes ni cálculos).

Los dos ejes

Flexbox trabaja con dos ejes. El eje principal es la dirección de la fila (horizontal, por defecto). El eje cruzado es el perpendicular (vertical). Con flex-direction: column se intercambian.

• justify-content reparte los elementos en el eje principal.
• align-items los alinea en el eje cruzado.

justify-content: repartir a lo largo

.contenedor {
  display: flex;
  justify-content: space-between;
}

align-items: alinear a lo alto

.contenedor {
  display: flex;
  align-items: center;
}

Centrar cualquier cosa

Durante años, centrar algo en vertical fue uno de los grandes quebraderos de cabeza de CSS. Con Flexbox son tres líneas:

.portada {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Ejemplos de uso real

Un menú horizontal a partir de la lista de enlaces de «Texto y enlaces»:

<nav>
  <ul class="menu">
    <li><a href="index.html">Inicio</a></li>
    <li><a href="proyectos.html">Proyectos</a></li>
    <li><a href="contacto.html">Contacto</a></li>
  </ul>
</nav>

.menu {
  display: flex;
  gap: 24px;
  list-style: none;  /* quita las viñetas */
  padding: 0;
}

Una cabecera con el logotipo a la izquierda y el menú a la derecha:

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Otras propiedades útiles

• flex-direction: column — los elementos van en columna en vez de en fila.
• flex-wrap: wrap — si no caben en una fila, saltan a la siguiente (por defecto se encogen para caber todos).
• flex: 1 — se pone en los hijos: hace que crezcan para repartirse el espacio sobrante.

.tarjeta {
  flex: 1;
}

Truco: el inspector de Chrome muestra una etiqueta flex junto a cada contenedor flexible. Al hacer clic en ella, dibuja los huecos y los ejes sobre la página. Y para practicar jugando, prueba Flexbox Froggy: ayudas a unas ranas a llegar a sus nenúfares escribiendo Flexbox.

Grid

Grid coloca elementos en dos direcciones a la vez: filas y columnas. Es una retícula, la misma idea que usas al maquetar en InDesign, pero en el navegador. Ideal para galerías, tarjetas y la estructura general de la página.

.galeria {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

• display: grid convierte el contenedor en una retícula.
• grid-template-columns define las columnas: una medida por columna.
• gap es el espacio entre celdas, el medianil de la retícula.
• No hace falta definir las filas: se crean solas según los elementos que haya.

La unidad fr

fr (fracción) es una unidad propia de Grid: reparte el espacio disponible en partes. 1fr 1fr 1fr son tres columnas iguales; 2fr 1fr, dos columnas en las que la primera mide el doble.

grid-template-columns: 200px 1fr;        /* columna fija + el resto */
grid-template-columns: 2fr 1fr;          /* la primera, el doble que la segunda */
grid-template-columns: repeat(4, 1fr);   /* cuatro columnas iguales */

Que un elemento ocupe varias celdas

.destacado {
  grid-column: span 2;
}

Galería que se adapta sola

Esta es probablemente la línea de CSS más útil para un portfolio. Crea tantas columnas como quepan, cada una de al menos 150px, y reparte el espacio sobrante entre ellas. Sin media queries: si la pantalla se estrecha, las columnas bajan solas a la fila siguiente.

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

Pruébalo: estrecha la ventana del navegador y mira cómo cambian las columnas de la caja de arriba.

Plantillas con nombre: grid-template-areas

Grid permite «dibujar» la estructura de la página con palabras. ¿Recuerdas el esquema de la estructura semántica de «Introducción a HTML»? Así se construye de verdad:

<body>
  <header>…</header>
  <main>…</main>
  <aside>…</aside>
  <footer>…</footer>
</body>

body {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-areas:
    "cabecera cabecera"
    "principal lateral"
    "pie      pie";
  gap: 16px;
}

header { grid-area: cabecera; }
main   { grid-area: principal; }
aside  { grid-area: lateral; }
footer { grid-area: pie; }

Cada cadena de texto es una fila de la retícula, y cada palabra, una celda. Repetir un nombre hace que esa zona ocupe varias celdas. Para cambiar la disposición, basta con cambiar el «dibujo».

Truco: igual que con Flexbox, el inspector de Chrome tiene una etiqueta grid que dibuja las líneas de la retícula sobre la página. Para practicar: Grid Garden, un juego en el que riegas un huerto con CSS Grid.

Posicionamiento

Flexbox y Grid reparten el espacio entre los elementos: ninguno se pone encima de otro. Pero hay cosas que no se pueden hacer así: una etiqueta en la esquina de una imagen, un texto sobre una foto, una cabecera que se queda arriba al hacer scroll o un botón que flota en una esquina. Para eso está la propiedad position.

Cuando un elemento tiene una posición distinta de static, se coloca con top, right, bottom y left: la distancia a cada lado.

Superponer: relative + absolute

Un elemento con absolute deja de ocupar espacio (los demás actúan como si no existiera) y se coloca respecto al antepasado más cercano que tenga position. Por eso casi siempre van en pareja: el padre lleva relative para ser la referencia, y el hijo lleva absolute para colocarse dentro de él.

<article class="tarjeta">
  <img src="img/cartel.jpg" alt="Cartel del festival">
  <span class="etiqueta">Nuevo</span>
  <h3>Cartel para un festival</h3>
</article>

.tarjeta {
  position: relative;   /* el padre: la referencia */
}

.etiqueta {
  position: absolute;   /* el hijo: se coloca respecto al padre */
  top: 12px;
  right: 12px;
}

Si se te olvida el relative en el padre, la etiqueta se colocará respecto a la página entera y acabará en una esquina de la pantalla. Es el error más habitual.

Quedarse en pantalla: sticky y fixed

sticky deja el elemento en su sitio hasta que, al hacer scroll, llega a la distancia indicada con top; a partir de ahí se queda pegado. Es la forma de hacer una cabecera que siempre está visible:

header {
  position: sticky;
  top: 0;              /* se queda pegada al llegar arriba del todo */
  background: white;   /* sin fondo, el contenido se vería por detrás */
  z-index: 10;
}

fixed coloca el elemento respecto a la ventana, así que nunca se mueve. Así está hecho el botón para volver arriba de estos apuntes:

.volver-arriba {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

¿Quién queda encima? z-index

Cuando dos elementos se superponen, queda delante el que aparece después en el HTML. Para cambiar el orden se usa z-index: un número, y el más alto queda delante, como el orden de las capas en Photoshop. Sólo funciona en elementos con position (y en hijos de Flexbox o Grid).

Ojo: no maquetes la página con position: absolute y coordenadas. Puede parecer cómodo, porque colocas cada cosa donde quieres como en InDesign, pero en cuanto cambia el tamaño de la pantalla todo se descoloca y se monta. La regla: para colocar y alinear, Flexbox y Grid; position sólo para superponer o fijar elementos concretos.

¿Flexbox o Grid?

No compiten: se complementan, y en una misma página se usan los dos. Una regla sencilla para decidir:

Idea clave: Grid para la estructura de la página y para todo lo que tenga columnas; Flexbox para colocar cosas en fila dentro de cada parte. Por ejemplo: la página con Grid (cabecera, contenido, lateral y pie), y dentro de la cabecera, el logo y el menú con Flexbox.

Diseño responsive

Una web responsive (adaptable) se ve bien en cualquier pantalla: un móvil, una tableta, un portátil o un monitor enorme. No se hacen varias versiones de la web: es una sola, con un mismo HTML, cuyo CSS cambia la distribución según el ancho disponible.

Ya tienes casi todas las piezas:

• La etiqueta <meta name="viewport"> de «Introducción a HTML», sin la cual el móvil muestra la web en miniatura.
• Las medidas relativas de «Fundamentos de CSS» (%, rem, vw) y max-width.
• Las imágenes adaptables: max-width: 100%.
• Layouts flexibles con Flexbox y Grid, como la galería con auto-fit.

La pieza que falta son las media queries.

Media queries

Una media query es una condición: «aplica estos estilos sólo si la pantalla cumple esto». La más usada comprueba el ancho:

/* Móvil */
.galeria {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Desde 600px */
@media (min-width: 600px) {
  .galeria {
    grid-template-columns: 1fr 1fr;
  }
}

/* Desde 1000px */
@media (min-width: 1000px) {
  .galeria {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Las reglas de dentro de @media (min-width: 600px) sólo se aplican si la ventana mide 600px o más. Por debajo, se ignoran. Ese ancho en el que el diseño cambia se llama punto de ruptura (breakpoint).

Primero el móvil (mobile first)

Fíjate en el orden del ejemplo: primero se escriben los estilos para el móvil, fuera de cualquier media query, y después se van añadiendo cambios para pantallas cada vez más grandes con min-width. Es la forma recomendada de trabajar:

• El diseño de móvil suele ser el más sencillo (una sola columna), así que es más fácil ir añadiendo que ir quitando.
• Te obliga a decidir qué es lo importante, porque en una pantalla pequeña no cabe todo.
• Hoy, la mayoría de las visitas a una web se hacen desde el móvil.

Así quedaría la estructura con áreas del apartado anterior, en versión mobile first:

/* Móvil */
body {
  display: grid;
  gap: 16px;
}

/* Pantallas anchas */
@media (min-width: 800px) {
  body {
    grid-template-columns: 3fr 1fr;
    grid-template-areas:
      "cabecera cabecera"
      "principal lateral"
      "pie      pie";
  }
  header { grid-area: cabecera; }
  main   { grid-area: principal; }
  aside  { grid-area: lateral; }
  footer { grid-area: pie; }
}

En el móvil, la columna lateral pasa debajo del contenido principal. Estrecha la ventana para verlo en la caja de arriba.

¿Dónde poner los puntos de ruptura?

Hay tantos tamaños de pantalla que no tiene sentido perseguir dispositivos concretos. Lo correcto es poner un punto de ruptura donde tu diseño se rompe: estrecha la ventana poco a poco y, cuando algo empiece a verse mal (líneas de texto demasiado largas, columnas demasiado estrechas…), ahí va una media query. Como orientación, muchas webs usan valores cercanos a 600px, 900px y 1200px.

Truco: para ver tu web como en un móvil sin tener uno a mano, abre el inspector (F12) y pulsa el icono del móvil y la tableta, o Ctrl + Mayús + M (en Mac, Cmd + Mayús + M). Podrás elegir modelos de móvil o arrastrar el borde para probar cualquier ancho. Aun así, pruébala siempre también en un móvil de verdad.