E10

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

≈ 90 min de lecturaDES

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 gratis

Crea tu cuenta gratuita para 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.

Crear cuenta gratis Ya tengo cuenta