En este módulo se profundiza en la creación de páginas web correctas. Tras haber aprendido los conceptos básicos, ahora se abordan aspectos esenciales como el uso adecuado del juego de caracteres y la validación del código HTML.

También se incorporan nuevos elementos: se enseñará a crear tablas para organizar datos tabulados y a insertar imágenes en una página web. Más adelante, se introducirán otros recursos multimedia, como la integración de vídeos.

Finalmente, se presentarán las principales novedades que trae consigo HTML5, la versión más reciente de este lenguaje.

El objetivo es consolidar conocimientos y ampliar las posibilidades de diseño y funcionalidad de las páginas web.

📖 Presentación

En esta lección se aborda el uso del juego de caracteres en páginas web. Se explica que, aunque parece un tema simple, suele generar muchos problemas al mover archivos entre sistemas, al instalar programas o al visualizar documentos y páginas.

Se destacan distintos juegos de caracteres como ASCII, ISO-8859-1, Latin1, Latin9 y UTF-8, siendo este último —en su versión sin BOM— la mejor opción, ya que permite mezclar idiomas y alfabetos sin inconvenientes. En caso de no poder usarlo, se recomienda ISO-8859-1 o, si se necesita el símbolo del euro, ISO-8859-15.

El mensaje principal es claro: siempre se debe usar el mismo juego de caracteres en todos los componentes de un proyecto web (HTML, CSS, JavaScript, PHP, bases de datos y servicios externos) para evitar inconsistencias. Finalmente, se muestran las formas de declarar el juego de caracteres en HTML4, XHTML y HTML5, donde este último lo simplifica notablemente.

La lección concluye con dos consejos esenciales: emplear un único juego de caracteres en todo lo que se haga y, siempre que sea posible, utilizar UTF-8 sin BOM.

📖 HTML: juego de caracteres

En esta lección se explican los problemas que puede generar el uso incorrecto del juego de caracteres y la importancia de utilizar UTF-8 sin BOM.

El BOM (Byte Order Mark) es una marca de 3 bytes al inicio de un archivo que indica el orden de los bytes. Aunque en UTF-8 no es necesario, algunos programas como PHP5 lo interpretan mal, provocando errores como espacios invisibles al incluir ficheros.

A través de ejemplos en Notepad++, se muestra cómo detectar el BOM con un editor hexadecimal y cómo convertir los archivos a UTF-8 sin BOM para evitar problemas. Se aclara la diferencia entre “Codificar” (aplica a nuevo contenido) y “Convertir” (transforma todo el fichero), recomendando siempre la conversión.

También se destaca que el juego de caracteres declarado en el HTML debe coincidir con la codificación real del archivo; de lo contrario, aparecerán errores en la visualización de caracteres especiales, como vocales acentuadas.

En conclusión, para trabajar correctamente con PHP y páginas web, es fundamental guardar los archivos en UTF-8 sin BOM y asegurarse de la coherencia entre la declaración del charset y la codificación física del fichero.

📖 HTML: el juego de caracteres y los editores de texto

En esta lección se explica el uso de tablas en HTML. Una tabla está formada por filas <tr> y celdas <td>, y puede enriquecerse semánticamente con <th> para cabeceras, caption para títulos y agrupaciones de filas (<thead>, <tbody>, <tfoot>) o de columnas (<colgroup>, <col>). Además, los atributos colspan y rowspan permiten combinar celdas, mientras que span en colgroup y col extiende columnas.

Se destacan las etiquetas básicas (<table>, <tr>, <td>) como suficientes para comenzar, aunque el uso de elementos adicionales facilita la organización y la aplicación de estilos con CSS. El autor ofrece tres recomendaciones: usar tablas solo para datos y no para maquetar páginas, revisar cuidadosamente la combinación de celdas para evitar errores, y aprovechar la agrupación de filas y columnas para simplificar el diseño posterior.

La lección invita a practicar con ejemplos y consultar recursos como W3Schools o comunidades de desarrollo web. Se insiste en que HTML se aprende con la práctica, y se motiva a los estudiantes a experimentar con las tablas propuestas en el curso.

📖 HTML: tablas

En esta lección se aborda el uso de las imágenes en las páginas web dentro del curso “Introducción al desarrollo web”. Explica la etiqueta <img>, sus atributos obligatorios (src y alt, este último fundamental para la accesibilidad), sus atributos opcionales (width, height, longdesc, ismap y usemap) y advierte sobre el uso de atributos obsoletos que deben sustituirse por CSS.

Se destacan los principales formatos gráficos soportados por los navegadores: GIF (limitado a 256 colores, con transparencia simple y animaciones), JPG (muy popular por su compresión con pérdidas y gran reducción de tamaño) y PNG (creado para la Web, con compresión sin pérdidas y alta calidad, aunque con mayor peso).

Finalmente, se explican los mapas de imagen, que permiten definir zonas activas dentro de una imagen para enlazar a otras páginas. Estas zonas se crean con figuras geométricas básicas —rectángulos, círculos y polígonos— mediante la etiqueta <area>. Los mapas de imagen pueden servir para crear menús, dividir portadas de sitios web o representar mapas interactivos.

📖 HTML: imágenes

En esta lección se explica la importancia de validar el código HTML en el desarrollo web. El HTML, como cualquier lenguaje, tiene reglas gramaticales y sintácticas que deben cumplirse para asegurar que las páginas se visualicen correctamente. Desde su creación por Tim Berners-Lee en 1990, HTML ha evolucionado, existiendo actualmente versiones como HTML 4.01, XHTML 1.0 y HTML5. La versión utilizada se indica mediante la instrucción DOCTYPE al inicio del código.

La validación permite detectar errores que podrían afectar la visualización en distintos navegadores. Existen herramientas gratuitas y de pago, siendo la más recomendable el validador oficial del W3C, que permite comprobar páginas mediante URL, archivos o código copiado. Otros validadores útiles son Web Design Group y validator.nu.

En esta lección se demuestra la validación con tres sitios web: el del curso, la Universidad de Alicante y La Moncloa, mostrando cómo identificar errores y advertencias. Se recomienda corregir siempre los errores en orden, empezando por el primero, ya que muchos problemas se resuelven automáticamente. Validar una página es rápido y sencillo, y es fundamental para garantizar la calidad y compatibilidad del contenido web.

📖 HTML: validación del código

En esta lección se explican los primeros pasos con HTML5. Tras la evolución de HTML desde su creación en 1990, y tras XHTML, el W3C desarrolló HTML5, que mantiene la mayoría de etiquetas de HTML4, aunque algunas quedaron obsoletas, otras cambiaron y se añadieron nuevas.

Aunque HTML5 aún estaba en desarrollo al momento de grabar, con la versión de septiembre de 2014 casi finalizada, ya se puede empezar a usar, pero con precaución, porque no todos los navegadores soportan todas sus características. Sitios como HTML5Test y Can I use? permiten comprobar la compatibilidad. Por ejemplo, el control <input type="date"> funciona en Chrome y Opera, pero no en Firefox, IE ni Safari.

Para aprender HTML5, es recomendable conocer también HTML4 y XHTML, usando recursos como “Dive into HTML5”, HTML5Doctor y W3Schools. Este conocimiento es clave para ser un profesional del desarrollo web.

📖 HTML5: introducción

HTML5 es la quinta versión del lenguaje de marcado HTML, fundamental para la creación de páginas web. Permite estructurar contenido, incluir imágenes y vídeos, y añade nuevas etiquetas y atributos que aumentan la capacidad semántica. HTML se desarrolla bajo el World Wide Web Consortium desde 1994, evolucionando desde HTML 2.0 hasta XHTML 1.0 y actualmente HTML5.

El desarrollo web moderno combina HTML con CSS, DOM y JavaScript, creando DHTML para páginas interactivas. Tecnologías como AJAX, XML, JSON y XHR permiten aplicaciones dinámicas en el navegador. HTML5 engloba estas tecnologías y añade nuevas funcionalidades: el canvas para dibujo y juegos, SVG para gráficos vectoriales, geolocalización, caché y almacenamiento local con bases de datos SQLLite, y web workers para ejecución paralela de scripts.

La compatibilidad depende del navegador, y sitios como When can I use, findmebyIP y The HTML5 Test ayudan a evaluar soporte. Para aprender más sobre HTML5 y sus posibilidades, se recomienda HTML5 Rocks de Google, que ofrece ejemplos y tutoriales prácticos.

En conjunto, HTML5 y su familia de tecnologías permiten crear aplicaciones web más interactivas, eficientes y avanzadas, ampliando significativamente las capacidades de la Web moderna.

📖 HTML5: ¿Qué es HTML5?

En esta lección se explica cómo actualizar la estructura de las páginas web de versiones antiguas de HTML a HTML5 usando elementos semánticos. En HTML tradicional, el abuso de <span> (spanmania) y <div> (divitis) era común, generando código difícil de mantener. HTML5 introduce etiquetas específicas para cada región de una página: <header> para cabecera, <nav> para menús de navegación, <aside> para información adicional, <main> para el contenido principal, <article> para entradas o artículos, <figure> y <figcaption> para imágenes y títulos, y <footer> para el pie de página.

El uso correcto de estas etiquetas mejora la semántica, accesibilidad y mantenimiento del código. Diagramas de flujo, como los de HTML5Doctor, ayudan a elegir la etiqueta más adecuada según la función de cada sección. Transformar una página antigua a HTML5 es sencillo: basta con identificar la función de cada región y aplicar la etiqueta correspondiente.

La lección incluye ejemplos prácticos de cada región y destaca cómo HTML5 soluciona limitaciones de versiones anteriores, como la relación entre imágenes y sus títulos.

📖 HTML5: de HTML4 a HTML5

En esta lección se presentan las nuevas funcionalidades de HTML5 para formularios. HTML5 introduce elementos y controles nativos que permiten validar datos sin JavaScript, mejorando la compatibilidad entre navegadores, ahorrando tiempo y ancho de banda, y ofreciendo una experiencia más intuitiva al usuario. Entre las mejoras destacan campos con sugerencias, calendarios interactivos y selección de colores.

Se analizan los nuevos tipos de <input>: url, tel, email, number, color, search, range, datetime, datetime-local, date, month, week y time. Cada tipo permite una validación automática y atributos específicos, como min, max, value o step, para facilitar su uso y personalización. Además, los dispositivos móviles optimizan la entrada de datos mostrando teclados adaptados según el tipo de campo, con accesos directos en iPhone y configuraciones predeterminadas en Android.

Aunque no todos los navegadores soportan completamente estos tipos de input, se pueden usar de forma segura, ya que en navegadores no compatibles se comportan como campos de texto normales. La compatibilidad sigue evolucionando hasta que HTML5 se convirtió en recomendación oficial del W3C en 2014.

📖 HTML5: Nuevas funcionalidades en formularios (parte 1)

En esta lección se explican las nuevas funcionalidades de HTML5 para formularios. HTML5 incorpora elementos y atributos nativos que facilitan la gestión de formularios sin depender de JavaScript, mejorando la compatibilidad entre navegadores y la experiencia del usuario. Entre los atributos destacados se incluyen autocomplete (control del autocompletado), autofocus (coloca el foco automáticamente en un campo), min, max y step (definen rangos y pasos para valores numéricos), pattern (valida entradas con expresiones regulares), Placeholder (muestra pistas o ejemplos en los campos) y required (campos obligatorios).

Estos atributos permiten formularios más intuitivos y seguros, mostrando calendarios, paletas de colores y validaciones automáticas. La compatibilidad de HTML5 varía según el navegador, por lo que se recomienda consultar fuentes de referencia y realizar pruebas.

Además, se aborda brevemente Modernizr, una librería que detecta compatibilidad de navegadores con HTML5 y CSS3, y los Polyfills, que permiten suplir funcionalidades no soportadas. Esto optimiza el desarrollo y asegura la funcionalidad en distintos navegadores.

📖 HTML5: Nuevas funcionalidades en formularios (parte 2)

En esta lección se explica que HTML5 permite gestionar formularios de manera nativa sin depender de JavaScript, lo que mejora la compatibilidad entre navegadores y ahorra tiempo y ancho de banda.

Se explica la estructura básica de un documento HTML5, incluyendo DOCTYPE, elementos <html>, <head> y <body>, así como la importancia de lang, charset y title. Se introduce el uso de etiquetas como <h1> para encabezados, <p> para párrafos y <form> para formularios.

Se muestran distintos tipos de campos de entrada <input>, incluyendo text, password, tel, email, url, number, date, color, search, range, así como agrupaciones radio y checkbox. Cada campo se ejemplifica con atributos como placeholder, autofocus, autocomplete, required, pattern, min, max y step, explicando su funcionamiento y la interacción con el navegador.

En esta lección se resaltan buenas prácticas de accesibilidad, como la asociación explícita de etiquetas y controles según WCAG 2.0. Finalmente, se revisa cómo cada elemento se visualiza y funciona en Google Chrome, mostrando validaciones automáticas, selección de valores y comportamiento de campos agrupados.

📖 HTML5: Ejemplo de formulario

En esta lección se explica la importancia de escribir código HTML correcto. HTML es el lenguaje estándar para estructurar y presentar contenido web, desarrollado por el W3C. Sin embargo, muchos sitios presentan problemas de visualización en diferentes navegadores, especialmente con Internet Explorer 6, que fue durante años el peor navegador por su falta de cumplimiento de estándares.

Un ejemplo ilustrativo es la web del Colegio de Ingenieros de Caminos, que mostraba el aviso “Optimizado para Internet Explorer 6”, lo que resulta un error, ya que este navegador obligó a miles de desarrolladores a invertir tiempo en compatibilidad innecesaria. Incluso Microsoft lanzó en 2011 la campaña “The Internet Explorer 6 Countdown” para promover su abandono.

Los problemas de visualización pueden deberse a fallos en los navegadores, diferencias de compatibilidad, soporte incompleto de nuevas etiquetas o errores en el código HTML. Las tres primeras causas dependen de fabricantes y usuarios, pero la última es responsabilidad de los desarrolladores.

El W3C ofrece un validador que permite comprobar la corrección del código. Sin embargo, muchos programadores no lo usan, confiando en que los navegadores corrijan errores de forma automática, lo que puede generar resultados inconsistentes.

📖 HTML5: ¿Por qué es importante escribir código correcto? (1/3)

En esta lección se explica la importancia de escribir código HTML correcto. A través de cinco ejemplos muestra cómo pequeños errores pueden afectar de manera distinta la visualización de una página web en navegadores como Firefox, Chrome, Internet Explorer y Opera.

El primer ejemplo presenta una etiqueta de negrita sin cerrar, lo que provoca que todo el texto posterior aparezca en negrita en todos los navegadores. El segundo sustituye esa etiqueta por CSS, donde Firefox y Chrome corrigen el error automáticamente, mientras que Internet Explorer y Opera mantienen el fallo.

El tercer ejemplo trata una comilla sin cerrar en el atributo rel de un enlace a una hoja CSS: Firefox muestra la página, pero Chrome y Opera no muestran nada, e Internet Explorer ignora la hoja de estilo. En la variante de este ejemplo, al añadir otro atributo, los navegadores interpretan el error cerrando automáticamente, pero la hoja CSS no se aplica.

El último ejemplo muestra un valor incorrecto en el atributo size de un input: Firefox y Chrome lo interpretan como “3”, mientras que Internet Explorer y Opera asignan el valor por defecto.

La lección concluye subrayando que escribir código correcto evita resultados impredecibles en distintos navegadores.

📖 HTML5: ¿Por qué es importante escribir código correcto? (2/3)

En esta lección se concluye una serie dedicada a la importancia de escribir código HTML correcto. En las primeras partes se mostró cómo errores en el código provocan que las páginas web se visualicen de forma diferente en distintos navegadores, a través de pruebas realizadas en Firefox, Chrome, Internet Explorer y Opera.

La clave de estas diferencias está en el Document Object Model (DOM), una recomendación del W3C que define la estructura lógica de los documentos HTML y XML. El DOM representa las páginas como árboles de nodos, lo que permite a los navegadores interpretar y mostrar el contenido.

Se presentan varios ejemplos de errores comunes, como etiquetas sin cerrar o atributos mal escritos. Estos casos muestran que, mientras algunos navegadores corrigen automáticamente los errores, otros generan interpretaciones distintas del DOM, lo que altera la visualización de las páginas.

En conclusión, un código HTML correcto garantiza que todos los navegadores construyan un mismo DOM y muestren la página de forma coherente. De lo contrario, cada navegador puede producir resultados diferentes.

📖 HTML5: ¿Por qué es importante escribir código correcto? (3/3)

En esta lección se analiza la migración de un sitio web a un nuevo juego de caracteres. Antes de esta lección, se recomienda consultar las lecciones sobre el juego de caracteres y los editores de texto, donde se aconseja usar UTF-8 sin BOM, que permite mezclar textos en cualquier idioma y evita problemas de codificación.

Si un sitio web funciona correctamente y no necesita otros alfabetos ni conexión con servicios externos con distinta codificación, se puede continuar usando ISO-8859-1 sin problemas. Migrar no es necesario y UTF-8 es solo recomendable para nuevas páginas.

ISO-8859-1 ahorra espacio frente a UTF-8. La conversión masiva de codificación es sencilla en Linux o Mac, y en Windows puede hacerse con editores como Notepad++.

📖 HTML: ¿migrar a un nuevo juego de caracteres?

Esta lección explica la relación entre XML, HTML y XHTML. XHTML es una reformulación de HTML 4 bajo las reglas más estrictas de XML, lo que aporta rigor, mejor procesamiento y mantenimiento, y supuso un primer paso hacia la web semántica. Publicado en 2000, se planteó como sucesor de HTML, pero su evolución se estancó en 2009, cuando el W3C decidió abandonar XHTML 2 y centrar sus esfuerzos en HTML5, desarrollado junto al WHATWG.

Aunque no está muerto, XHTML sigue presente en millones de sitios y herramientas, y HTML5 se concibe con dos sintaxis: una basada en HTML y otra en XHTML. La lección destaca las diferencias clave entre HTML y XHTML: uso obligatorio de minúsculas en etiquetas y atributos, cierre explícito de todos los elementos, valores de atributos siempre entre comillas, prohibición de minimizar atributos y sensibilidad a mayúsculas en valores predefinidos. Además, en XHTML el contenido de script y style requiere CDATA o ficheros externos.

En conclusión, XHTML es una aplicación de XML que impone mayor disciplina que HTML, y conocer estas diferencias es esencial para un desarrollo web correcto y compatible con los estándares.

📖 XML: HTML y XHTML