Desarrollo Web con HTML5: Fundamentos, Tecnologías, Seguridad y Contenido Incrustado

1. Página Web, Sitio Web e Internet

1. Página web (WWW): sistema de información de recursos interconectados, consultables a través de Internet. Internet es la infraestructura global de comunicación entre redes y dispositivos; la Web es el sistema de información que funciona sobre Internet.
Evolución: Web 1.0 estática, de solo lectura · Web 2.0 social e interactiva (los usuarios crean contenido) · Web 3.0 semántica e inteligente (datos interconectados, personalización, IA).
Estándares (reglas para desarrollar de forma consistente): compatibilidad, interoperabilidad, accesibilidad, consistencia y evolución tecnológica. El W3C desarrolla estándares como HTML, CSS, accesibilidad, Web APIs y arquitectura. Permiten que los navegadores interpreten los documentos, establecen reglas comunes, facilitan sitios interoperables, el mantenimiento y la evolución.
Sitio Web: conjunto organizado de recursos y páginas relacionadas, accesibles a través de una misma dirección (páginas, imágenes, videos, CSS, scripts, formularios, documentos, datos).
Estructura de página: header (logo/título) · Navigation (menú) · Main/Article (contenido) · Sidebar (contenido secundario) · Footer (créditos, datos legales, contacto).

mi-sitio/
├── index.html   → página principal
├── paginas/     → páginas adicionales
├── css/         → estilos
├── js/          → scripts
├── img/         → imágenes
└── documentos/  → PDF y otros

Frontend: lo que el usuario ve y usa (interfaz, contenido, presentación e interacción). Backend: servidor; procesa la información, aplica la lógica, gestiona usuarios y se comunica con la base de datos.
Arquitectura: Usuario → Navegador → Servidor(es) → Código (lógica) → Base de datos.
Diseño web: planificar la presentación, organización y experiencia; información clara, organizada, fácil y coherente. Elementos: estructura, jerarquía visual, tipografía, color, imágenes, espaciado, navegación, consistencia, usabilidad y accesibilidad.
Tecnologías: HTML estructura y contenido · CSS presentación visual · JavaScript comportamiento e interacción · PHP lado del servidor · MySQL base de datos relacional (almacena y administra información). El desarrollo web consiste en integrar varias tecnologías.

2. Tipos de Sitios, Herramientas y Seguridad

Los sitios se clasifican por: cómo se genera el contenido, tipo de interacción, funcionalidad, tecnología y forma de actualización.

Flujo de trabajo: Escribir → Ejecutar → Probar → Depurar.
Editor de código: escribe y modifica código (HTML, CSS, PHP, JS, configuración); es un "bloc de notas avanzado". Ej.: VS Code, Notepad++, Sublime Text.
Navegador: accede, visualiza e interactúa con páginas; interpreta HTML, aplica CSS, ejecuta JS, muestra la interfaz, se comunica con servidores e incluye herramientas para desarrolladores.
Servidor local: programa o equipo en tu red que actúa como servidor web; permite desarrollar y probar antes de publicar.
phpMyAdmin: administra bases de datos MySQL mediante una interfaz web. MySQL Workbench: diseño, administración y desarrollo de bases de datos MySQL.
Seguridad: las aplicaciones manejan usuarios, contraseñas, datos personales, académicos, financieros y transacciones. OWASP (Open Worldwide Application Security Project) es una comunidad que busca mejorar la seguridad del software y es referencia para identificar y prevenir vulnerabilidades. Riesgos principales: validación insuficiente, autenticación deficiente, control de acceso, protección de datos, inyección de código, mala configuración y mal manejo de errores.

3. HTML5: Estructura

HTML = HyperText Markup Language: lenguaje de marcado para estructurar el contenido (títulos, párrafos, enlaces, imágenes, secciones, tablas, formularios, etc.).

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi primera página</title>
</head>
<body>
  <h1>¡Hola mundo!</h1>
  <p>Esta es mi primera página web.</p>
</body>
</html>

<script>: incorpora código, conecta archivos JS, agrega comportamiento, responde a eventos y modifica el contenido dinámicamente.

<script>console.log('Prueba de Script');</script>

Semántica: <header> encabezado de página o sección · <nav> enlaces de navegación principal · <main> contenido principal y único · <section> sección temática · <article> contenido independiente (ej. una noticia) · <aside> contenido lateral o secundario (buscador, publicidad) · <footer> pie con información de cierre.

4. Tablas y Formularios

<table>: datos tabulares; contiene filas <tr>, encabezados <th> y celdas <td>.
<caption> título o descripción breve (justo después de <table>) · <thead> filas de encabezados de columna · <tbody> cuerpo de datos · <tfoot> resumen, totales o notas.
Combinar celdas: colspan="n" ocupa varias columnas · rowspan="n" ocupa varias filas.
scope (en <th>, para accesibilidad y lectores de pantalla): col columna · row fila · colgroup grupo de columnas · rowgroup grupo de filas.

<form>: recopila datos del usuario y los envía a un servidor o los procesa.
action: URL de envío (si se omite, se procesa en la misma página).
method: GET añade los datos a la URL (visibles), para búsquedas o consultas no sensibles · POST envía los datos en el cuerpo (no visibles), para información sensible o cambios en la base de datos.
Elementos: <label> texto del campo; su atributo for se asocia con el id del campo (accesibilidad) · <input> campo versátil que cambia según su type · <select> lista desplegable (con <option>) · <textarea> texto multilínea · <button> submit (enviar), reset (reiniciar), button (acción personalizada con JS).

Atributos de entrada: name nombre del campo · id identificador único · value valor predeterminado o enviado · checked seleccionado por defecto.

5. Contenido Incrustado

Recurso externo o multimedia dentro del HTML (imágenes, audio, video, documentos y contenido externo mediante iframe).

<img> — src ubicación · alt texto alternativo · width ancho · height alto

<img src="imagenes/logo.jpg" alt="Logo del sitio web">

<audio> — controls (controles), loop (repetir), muted (silenciado), autoplay (intenta reproducirse solo)

<audio controls>
  <source src="audio/podcast.mp3" type="audio/mpeg">
  Tu navegador no admite audio HTML.
</audio>

<video> — controls, loop, muted, autoplay, height, width, poster (imagen de portada)

<video controls width="600">
  <source src="videos/proyecto.mp4" type="video/mp4">
  Tu navegador no admite video HTML.
</video>

<embed> (documentos) — src (ubicación), type (tipo de archivo), width, height

<embed src="documento.pdf" type="application/pdf" width="100%" height="1200px" />

<iframe> (contenido externo)

<iframe src="https://www.example.com" width="600" height="400" title="Sitio web externo"></iframe>