En este módulo se introduce el lenguaje HTML, esencial para crear páginas web. HTML es un lenguaje con su propio vocabulario (etiquetas) y gramática (reglas), cuyo aprendizaje requiere práctica constante.

El contenido del modulo se centra en tres objetivos principales: comprender la estructura básica o "esqueleto" de una página web, aprender a crear listas para organizar la información y, lo más importante, dominar la creación de enlaces o hipervínculos, que definen la esencia de la web como hipertexto.

Aunque se puede usar un editor de texto simple como el Bloc de notas, se introducirá un editor especializado que facilita y agiliza la escritura del código con menos errores.

📖 Presentación

El desarrollo web es la programación necesaria para construir aplicaciones y sitios web, y se diferencia claramente del diseño web. Mientras que el diseño se centra en la apariencia visual —tipografía, colores, proporciones y elementos gráficos— y suele realizarse con herramientas como Photoshop o GIMP, el desarrollo implica la creación de la parte funcional, tanto en el cliente como en el servidor.

En la parte cliente se utilizan tecnologías como HTML, CSS, JavaScript y el DOM, mientras que en la parte servidor se emplean lenguajes como PHP, ASP, JSP o Perl para gestionar bases de datos y generar contenidos dinámicos. Además, el desarrollo debe garantizar la seguridad del producto final.

El diseñador necesita creatividad e intuición, mientras que el desarrollador requiere lógica y técnica. Los datos laborales muestran que existen más puestos y mayores salarios para desarrolladores que para diseñadores.

El proceso de creación de un sitio web incluye fases como contacto inicial, planificación, contenido, diseño, desarrollo y lanzamiento. Aunque todas son importantes, en aplicaciones web complejas el desarrollo requiere la mayor parte del esfuerzo. En definitiva, diseño y desarrollo son actividades complementarias y esenciales para el éxito de un proyecto web.

📖 El desarrollo web

En esta lección, Olga Carreras destaca la importancia de prototipar aplicaciones web antes de su diseño gráfico e implementación. El prototipado permite definir objetivos, necesidades de usuarios, requisitos del proyecto y arquitectura de información, evitando malentendidos y reduciendo costes y tiempos de desarrollo.

Se distinguen planos (blueprints o diagramas de flujo), que muestran la estructura y navegación de la aplicación, y maquetas, que representan la organización e interacción a nivel de página. Estas últimas pueden ser de baja fidelidad, como bocetos rápidos (sketching) o wireframes con inventario de contenidos y notas sobre comportamiento, o de alta fidelidad, como mockups dinámicos en HTML que simulan procesos interactivos.

El prototipado facilita la comunicación con el cliente, la detección temprana de problemas y la realización de pruebas de usabilidad, asegurando aplicaciones más comprensibles, accesibles y ajustadas a las necesidades de los usuarios.

Carreras recomienda recursos como libros de Jesse James Garrett y Bill Buxton, artículos especializados y glosarios de usabilidad. Concluye con cinco consejos básicos: sencillez y claridad, uso de blanco y negro, representación proporcional de bloques de contenido, aplicación de pautas de usabilidad y accesibilidad, y diseño centrado en el usuario.

📖 Prototipado: wireframes, mockups y prototipos

Tim Berners-Lee, considerado el padre de la Web, desarrolló HTML a partir de SGML en 1990, creando así el lenguaje básico para estructurar documentos web. Las primeras versiones de HTML no fueron estandarizadas y carecían de elementos esenciales como tablas y formularios. En 1993 surgió HTML+ con estas novedades, aunque nunca se estandarizó, y generó curiosidades como las etiquetas <figure> y <caption> y la posibilidad de ecuaciones matemáticas, que luego inspiraron MathML.

En 1994 se fundó el W3C, encargado de estandarizar la Web. HTML 2.0, publicado en 1995, fue el primer estándar formal, seguido por HTML 3.2 en 1997 y HTML 4.01 en 1999. La estricta reformulación XHTML 1.0 basada en XML no tuvo éxito debido a su complejidad.

En 2004, WHATWG, junto con W3C, desarrolló HTML5, más flexible y adaptado a las necesidades reales, incorporando mejoras y corrigiendo limitaciones de versiones anteriores. HTML5, en 2013 recomendado como candidata, sentó las bases para futuras versiones y consolidó un lenguaje de marcado universal y accesible para la creación de páginas web modernas.

📖 Historia de HTML

En esta lección se presentan los conceptos básicos del lenguaje HTML. Explica que HTML se utiliza para definir la estructura y el contenido de las páginas web, pero no su presentación visual. Se introducen las tres tecnologías fundamentales de la Web: HTML, URL y HTTP, y se menciona que HTML está desarrollado por el W3C.

Se recomienda consultar documentación sobre HTML5 y versiones anteriores (HTML4 y XHTML) para comprender las diferencias y familiarizarse con distintas prácticas. Para aprender de manera práctica, se sugiere el sitio W3Schools.

HTML se organiza en elementos, formados por una etiqueta inicial y otra final, que pueden contener atributos y contenido, incluyendo texto u otros elementos. Los elementos se pueden anidar respetando ciertas reglas. Entre las etiquetas esenciales se encuentran <html>, <head>, <title>, <body>, <h1>-<h6>, <p>, <strong> y <em>, que permiten estructurar la página, definir encabezados, párrafos y resaltar o enfatizar texto.

Se enfatiza la importancia de la práctica constante para aprender HTML y se recuerda que este conocimiento es fundamental para crear páginas web sencillas, sentando las bases para avanzar en tecnologías web adicionales como CSS y JavaScript.

📖 HTML: conceptos básicos (parte 1)

En esta lección se explica que HTML se utiliza para estructurar el contenido de las páginas web, como texto, imágenes o vídeos, pero no para definir su apariencia visual.

Se revisa la composición básica de una página web: elementos con etiquetas de apertura y cierre. Se presentan las secciones principales: <html> que envuelve todo, <head> para metadatos y <title> para el título de la página, y <body> para el contenido visible. Sergio enfatiza la importancia de cerrar correctamente las etiquetas y ofrece consejos prácticos para no olvidarlas.

La lección guía al estudiante a crear su primera página web usando el Bloc de notas, un editor sencillo, antes de pasar a programas más avanzados en futuras lecciones.

📖 HTML: conceptos básicos (parte 2)

En esta lección se explica cómo continuar editando una página web utilizando Notepad++, un editor de texto gratuito y ligero para Windows con funciones avanzadas como coloreado de sintaxis, autocompletado de etiquetas y soporte para distintos juegos de caracteres. El programa permite abrir archivos rápidamente desde el menú contextual “Edit with Notepad++” y facilita el cierre automático de etiquetas mediante el plugin TextFX. También se destacan herramientas como el emparejamiento de etiquetas, la numeración de líneas y la visualización de información del archivo, como el formato de salto de línea y el juego de caracteres UTF-8.

Sergio muestra cómo añadir y etiquetar contenido en HTML, enfatizando textos y utilizando negrita, y explica el uso del autocompletado de etiquetas y atributos para agilizar la escritura del código. Finalmente, enseña cómo previsualizar la página web en navegadores instalados desde Notepad++ mediante el menú “Ejecutar”.

📖 HTML: conceptos básicos (parte 3)

En este lección se explican los conceptos básicos de HTML y se ofrecen consejos prácticos para los principiantes. Se revisan aspectos fundamentales del vocabulario y la gramática de HTML, destacando la importancia de cerrar siempre las etiquetas y mantener un correcto orden de anidamiento. Se recomienda escribir las etiquetas en minúsculas y siempre encerrar los valores de los atributos entre comillas.

También se aconseja utilizar únicamente letras del alfabeto inglés, números, guiones y guiones bajos en los nombres de archivos, y emplear las extensiones “.htm” o “.html”. Se sugieren recursos adicionales como vídeos sobre errores frecuentes en títulos de páginas, artículos de Wikipedia, tutoriales de W3Schools y el HTML/Training del W3C, para profundizar el aprendizaje.

Finalmente, se proponen ejercicios prácticos: aprender las etiquetas necesarias para listas y crear una página web tipo currículo. Se enfatiza que HTML define la estructura y contenido de la web, mientras que la presentación se aborda con CSS. La lección busca que los estudiantes comprendan la sintaxis de HTML, conozcan sus reglas universales y sepan dónde encontrar documentación oficial para futuras consultas.

📖 HTML: conceptos básicos (parte 4)

En esta lección se explica cómo crear listas en HTML, tanto en HTML4 como HTML5. Existen tres tipos de listas: no ordenadas <ul>, ordenadas <ol> y de descripción <dl>. Las listas no ordenadas muestran elementos con símbolos sin importar el orden, mientras que las listas ordenadas usan números o letras y permiten atributos como start, type y reversed para controlar la numeración. Las listas de descripción asocian términos <dt> con sus definiciones <dd>, normalmente utilizadas para glosarios o diccionarios.

También se aborda la creación de listas anidadas, donde una lista puede contener otra lista, permitiendo combinaciones de diferentes tipos y niveles de anidamiento. Finalmente, se menciona que el estilo de las listas no debe cambiarse con atributos HTML obsoletos, sino usando CSS. La lección proporciona ejemplos prácticos del código HTML y su resultado visual para cada tipo de lista, subrayando la importancia de la estructura y la presentación correcta en el desarrollo web.

📖 HTML: listas

En esta lección se explica cómo crear enlaces en páginas web. Los enlaces son elementos fundamentales de la Web, ya que permiten la navegación entre nodos de información mediante hipertexto. Un nodo contiene información accesible, los enlaces conectan nodos y los anclajes son los puntos de activación de los enlaces.

Existen dos tipos de enlaces: intradocumentales, que apuntan a un punto dentro del mismo documento, y extradocumentales, que enlazan con otras páginas o documentos. Para definir un enlace se utiliza la etiqueta <a> y el atributo href, mientras que el destino puede marcarse con id o, antiguamente, con name. En las URLs, se especifica el protocolo, las credenciales, el servidor, el puerto, la ruta y el nombre del recurso.

Finalmente, se ofrecen consejos prácticos: escribir nombres de ficheros en minúsculas, evitar caracteres extraños y espacios en nombres, y usar rutas relativas adecuadas para que los enlaces funcionen correctamente al publicar la web.

📖 HTML: enlaces

En esta lección se explica que para programar la parte cliente de una práctica en HTML, CSS y JavaScript no se necesita un editor especial: se puede usar desde el Bloc de notas hasta Notepad++, que él recomienda por ser gratuito y configurable. Señala que el editor es solo una herramienta y que lo importante es el conocimiento del desarrollador, no el software.

Advierte sobre problemas comunes al guardar archivos en Windows o Mac, como extensiones incorrectas o configuraciones por defecto que impiden ver correctamente la página en un navegador. Recomienda siempre verificar la configuración de guardado y buscar soluciones en la web si surge algún problema.

Se ejemplifica con un caso de un alumno que no podía abrir su archivo en Mac, y cómo, tras ajustar la configuración de TextEdit, logró visualizar la página correctamente.

La conclusión principal es que, aunque los sistemas operativos y editores sean distintos, los problemas pueden ser similares y la clave está en aprender a resolverlos de manera autónoma, buscando soluciones y entendiendo el funcionamiento del código, más que depender del editor.

📖 HTML: problemas con los editores

En esta lección se explican tres errores comunes al aprender HTML. El primero es el mal uso de los saltos de línea. En HTML, los saltos normales no afectan la visualización; se deben usar solo <br> para contenido que realmente requiere un salto, como poemas o direcciones, evitando separar contenido de manera artificial.

El segundo error son los espacios en blanco. En HTML, múltiples espacios se muestran como uno solo, por lo que no deben emplearse espacios adicionales para maquetar texto; esto debe resolverse con CSS.

El tercer error está relacionado con las referencias de caracteres. HTML permite insertar caracteres especiales mediante referencias con nombre, decimales o hexadecimales. Estas no son necesarias si se usa el juego de caracteres correcto, como UTF-8, aunque son útiles para representar símbolos que no se incluyen directamente.

Además, se enfatiza la importancia de separar contenido y presentación, usando etiquetas y CSS de manera adecuada, evitando malas prácticas que complican la lectura del código. Finalmente, se recomiendan recursos como W3Schools y se recuerda que la correcta codificación y referencias de caracteres facilitan la accesibilidad y mantenimiento de las páginas web.

📖 HTML: tres errores típicos

En esta lección se explica cómo avanzar desde un boceto o mockup hacia un prototipo visual detallado de una web. Marina Gutiérrez, diseñadora gráfica, describe que el prototipo permite definir dimensiones, color, tipografía, composición y posición de los elementos, simulando el contenido final y optimizando la estética y funcionalidad del diseño. Recomienda trabajar con software de edición de imágenes o vectorial, preferiblemente con soporte para capas, medición precisa y edición de imágenes, para explorar todas las posibilidades creativas.

Antes de diseñar, es fundamental buscar inspiración en diversas fuentes y conceptualizar la idea considerando la temática de la web, las tendencias del mercado y el público objetivo. Establecer una paleta de colores básica y recolectar los elementos gráficos necesarios —imágenes, tipografías, iconos y material del cliente— asegura coherencia y estilo en el prototipo. La elección de tipografías debe priorizar legibilidad, adaptabilidad y significado, contribuyendo a la identidad del diseño.

Marina sugiere trabajar de lo general a lo particular, organizar los elementos en capas y carpetas, y evitar abusar de colores, tipografía o efectos innecesarios. Optimizar el tiempo, establecer prioridades y mantener una carpeta organizada con prototipos y versiones editables facilita el proceso. Así, se consigue un prototipo visual más cercano al diseño final, funcional y coherente.

📖 Prototipos visuales de alta fidelidad