Este temario no se imprime

El temario de LaPlazaFija se estudia en la web, sección a sección, con tu progreso al lado. Si quieres practicar en papel, usa el cuadernillo de Simulacros oficiales: está hecho para imprimirse, con el formato del examen real.

E10

Desarrollo web (HTML/CSS/JS, WebSockets, Node.js, PHP)

DES

Desarrollo web de principio a fin: estructura HTML, presentación con CSS3, JavaScript ES6, asincronía y WebSockets, y backend con Node.js y PHP.

Objetivos

Al terminar este tema sabrás: (1) estructurar un documento con HTML5 semántico y conocer las diferencias con XHTML; (2) aplicar CSS3 (selectores, especificidad, modelo de caja, Flexbox y Grid, diseño responsivo); (3) programar en JavaScript ES6 (tipos, let/const, ámbito, funciones flecha, clases, módulos, manipulación del DOM y eventos); (4) manejar la asincronía (callbacks, promesas, async/await, event loop) y la comunicación en tiempo real con WebSockets frente a HTTP/AJAX; y (5) situar el desarrollo de backend con Node.js y PHP, sus modelos de ejecución y usos típicos.

⚠ Cae en examen. E10 es de los temas más preguntados del teórico (6,3%) y aparece en el práctico con fragmentos de código HTML/CSS/JS/PHP a interpretar. Mezcla preguntas conceptuales (qué es el DOM, cliente vs servidor) con memorísticas (etiquetas, propiedades CSS, métodos de array ES6) y de salida de código.

Sección 1 · HTML y XHTML: estructura del documento

1.1 HTML5 y el documento mínimo

HTML (HyperText Markup Language) es el lenguaje de marcado que estructura el contenido web; no es un lenguaje de programación (no tiene lógica ni variables). El estándar vivo lo mantiene WHATWG (HTML Living Standard). Documento mínimo:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Título</title>
  </head>
  <body>
    <h1>Hola</h1>
  </body>
</html>

<!DOCTYPE html>: declara HTML5 y activa el modo estándar del navegador (sin él, quirks mode).
<head>: metadatos (charset, viewport, <title>, <link> a CSS, <meta>), no se muestra.
<body>: contenido visible.

1.2 Elementos semánticos (HTML5)

HTML5 sustituye los <div> genéricos por etiquetas con significado, clave para accesibilidad y SEO:

Etiqueta	Significado	Etiqueta	Significado
`<header>`	Cabecera	`<nav>`	Navegación
`<main>`	Contenido principal (único)	`<article>`	Contenido autónomo
`<section>`	Sección temática	`<aside>`	Contenido lateral
`<footer>`	Pie	`<figure>`/`<figcaption>`	Imagen + leyenda

Elementos en línea (<span>, <a>, <strong>, <em>, <img>) vs de bloque (<div>, <p>, <h1>, <ul>): distinción básica que también gobierna el CSS (display).

1.3 Formularios y multimedia

Formularios: <form action method>, <input> (tipos HTML5: email, date, number, range, color…), <label>, <select>, <textarea>, <button>. Atributos de validación: required, pattern, min/max.
Métodos de envío: GET (parámetros en la URL, idempotente, cacheable) vs POST (en el cuerpo, para datos que modifican estado). (Ver E5 para HTTP.)
Multimedia nativa: <audio>, <video>, <canvas> (dibujo por script), <svg> (vectorial).

1.4 XHTML frente a HTML

XHTML es HTML reformulado como XML bien formado (W3C, 2000). Reglas estrictas que HTML5 relaja:

	XHTML	HTML5
Etiquetas	En minúsculas obligatorio	Insensible a mayúsculas
Cierre	Todas las etiquetas cierran (`<br/>`)	Algunas opcionales (`<br>`, `<li>`)
Atributos	Siempre entrecomillados y con valor	Más flexible
Anidamiento	Estricto, bien formado	Tolerante a errores
Análisis	Como XML (un error rompe la página)	Tolerante

💡 Ejemplo. En XHTML, <IMG SRC=foto.jpg> es inválido: debe ser <img src="foto.jpg" alt="" />. HTML5 lo acepta. XHTML aporta rigor (útil para procesado automático), pero HTML5 se impuso por su tolerancia.

Sigue leyendo cuando abramos

Apúntate a la lista de espera y te avisamos en cuanto abramos: podrás leer los temas de muestra completos, guardar tu progreso y entrenar con tests del formato real. Te quedan 8 secciones de este tema por delante.