Tema 10: Aprendizaje a través de eLearning

HTML y CSS: fundamentos del desarrollo web front-end

HTML (HyperText Markup Language) es el lenguaje de marcado que estructura el contenido de las páginas web. No es un lenguaje de programación: es declarativo y estático; carece de estructuras de control, variables o lógica, por lo que NO es dinámico (el dinamismo lo aportan JavaScript o el servidor). CSS (Cascading Style Sheets) es el lenguaje que diseña la interfaz gráfica de usuario: separa la presentación del contenido, controlando color, tipografía, maquetación y diseño visual.

Estructura del documento HTML

Según el HTML Living Standard de WHATWG, la declaración <!DOCTYPE html> debe aparecer en la primera línea, antes del elemento raíz <html>. Le siguen <head> (metadatos) y <body> (contenido visible). La declaración es obligatoria: si se omite, los navegadores tienden a usar un modo de representación distinto (el llamado quirks mode), incompatible con algunas especificaciones. Además, salvo casos especiales (un documento iframe srcdoc o un título aportado por un protocolo de nivel superior), el <head> debe contener exactamente un elemento <title>. Un documento HTML5 mínimo y válido es, por tanto, <!DOCTYPE html><html><head><title>EducaData</title></head><body><div id="alumnos"></div></body></html>. Ni <!HTML5> es una declaración de tipo de documento válida ni <container> es un elemento de HTML (el contenedor genérico es <div>).

Elementos semánticos de HTML5

HTML5 introdujo etiquetas semánticas que describen el significado del contenido, mejorando accesibilidad y SEO:

Otras etiquetas nuevas de HTML5 incluyen <nav>, <header>, <footer> y <figure>. En cambio, elementos de presentación como <basefont> o <font> NO son soportados en HTML5 (se sustituyen por CSS).

Elementos de texto (text-level semantics)

El elemento <abbr> representa una abreviatura o acrónimo. Comparte nivel semántico (contenido de frase) con <em>, <strong>, <small> y <var>. Su comportamiento por defecto es presentarse en línea con el texto circundante; el estilo predeterminado varía entre navegadores (algunos lo muestran con un subrayado de puntos y otros no). Su atributo title ofrece una descripción completa de la abreviatura (se muestra como tooltip). El elemento <b> pone texto en negrita sin marcarlo como importante (a diferencia de <strong>).

Enlaces e imágenes

El hiperenlace se crea con la etiqueta <a> y su atributo href. Envolviendo una imagen con un ancla se convierte la imagen en enlace:

<a href="https://www.boe.es"><img src="foto.jpg" alt="Acceso al BOE"/></a>

Esto muestra la imagen foto.jpg como hipervínculo a la página indicada. El atributo alt proporciona texto alternativo (accesibilidad).

La etiqueta <base target="..."> define el destino por defecto de todos los enlaces de la página: target="_blank" abre el contenido en una nueva ventana o pestaña, mientras que target="_self" lo abre dentro del mismo marco en que se hizo clic.

Formatos de imagen recomendados para web: JPG/JPEG, PNG, GIF, SVG, WebP. BMP NO es recomendado (sin compresión eficiente).

Listas

• <ol> crea listas ordenadas (numeradas); <ul>, listas no ordenadas; ambas usan <li> para cada ítem.

• <dl> define una lista de descripción (términos <dt> y sus descripciones <dd>).

<ol>

<li>Cafe</li>

<li>Té</li>

<li>Leche</li>

</ol>

Formularios: el elemento <input>

<input> crea controles interactivos de formulario para recibir datos del usuario. Su atributo type toma por defecto el valor text. Atributos y tipos relevantes:

• type="file": cargar/subir archivos.

• type="checkbox": permite elegir más de un elemento a la vez.

• autofocus: hace que el control reciba el cursor (foco) al cargar la página.

• autocomplete="on": el navegador predice y autocompleta el valor según entradas previas del usuario.

• pattern: define una expresión regular que valida el texto introducido (p. ej. exigir entre 10 y 16 caracteres A-Z mayúsculas).

Para limitar la longitud de lo que escribe el usuario en un campo de texto (text, email, password, search, tel, url) se usa el atributo maxlength, que fija el número máximo de caracteres que se pueden introducir; su pareja es minlength. Por ejemplo, <input type="email" maxlength="100"> impide que la dirección de correo pase de 100 caracteres. No hay que confundirlo con size, que solo indica el ancho visible del control (cuántos caracteres se ven a la vez), ni con max, que fija el valor máximo en controles numéricos o de fecha (number, range, date) y no se aplica a la longitud de un texto. El atributo length no existe en <input>.

La etiqueta obsoleta keygen (generación de claves) admitía en su atributo keytype los valores rsa (por defecto), dsa y ec.

Almacenamiento local

HTML5 aporta Web Storage. El objeto window.localStorage guarda datos localmente en el navegador sin fecha de expiración (persisten al cerrar el navegador), frente a sessionStorage, que dura la sesión.

CSS: selectores y formas de inclusión

La función principal de CSS es diseñar la interfaz gráfica de usuario. Para dar estilo a todos los elementos con class="fondoGris", se usa en la hoja de estilos el selector de clase .fondoGris (punto + nombre de clase) y se modifican sus propiedades.

Especificidad de los selectores

Cuando varias reglas afectan al mismo elemento, gana la de mayor especificidad, que se expresa con tres columnas ID-CLASE-TIPO:

• ID (#cabecera): suma 1-0-0 por cada identificador.

• CLASE: suma 0-1-0 por cada selector de clase (.aviso), de atributo ([type="radio"]) o pseudoclase (:hover, :required, :nth-of-type()).

• TIPO: suma 0-0-1 por cada selector de tipo o elemento (p, input) y por cada pseudoelemento (::before).

Así, input:required combina un selector de tipo y una pseudoclase y su especificidad es 0-1-1; #form input vale 1-0-1.

Existen tres formas de añadir CSS: inline (atributo style en el elemento), internal (bloque <style> en el <head>) y external (fichero .css enlazado con <link>).

Preprocesadores CSS: Sass, Less y Stylus amplían CSS con variables, anidamiento y mixins, compilándose a CSS estándar.

Bootstrap

Bootstrap es un framework de desarrollo web front-end cuya función es dar estilo y diseño a la página y facilitar la creación de aplicaciones web responsive de manera rápida y sencilla. Está construido con CSS y JavaScript. Se incluye enlazando su CSS por CDN, por ejemplo:

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'>

Para la barra de navegación se emplea el elemento HTML <nav> con la clase .navbar.

Accesibilidad web (WAI-W3C)

La WAI (Web Accessibility Initiative) del W3C publica las pautas de accesibilidad:

• WCAG (Web Content Accessibility Guidelines): accesibilidad del contenido. La versión 2.1 se organiza en directrices agrupadas bajo cuatro principios: Perceptible, Operable, Comprensible y Robusto (POUR).

• ATAG (Authoring Tool Accessibility Guidelines): pautas de accesibilidad para las herramientas de autor.

• UAAG: pautas para agentes de usuario (navegadores).

Para que la estructura del contenido llegue a quien usa un lector de pantalla, el criterio de conformidad 1.3.1 Información y relaciones (nivel A) de WCAG 2.1 exige que la información, la estructura y las relaciones que se transmiten mediante la presentación puedan determinarse por software o estén disponibles como texto. Entre sus técnicas suficientes está usar elementos semánticos de HTML para identificar las regiones de la página: <header>, <nav>, <main> (el contenido principal), <section>, <footer>… crean implícitamente regiones (landmarks) a las que el lector de pantalla puede saltar directamente. Una estructura hecha solo con <div> y clases, o definida únicamente con estilos CSS, es puramente visual y no se puede determinar por software; y maquetar con tablas <table> es usar marcado estructural que no representa relaciones reales del contenido, uno de los fallos documentados de ese criterio.

Existen herramientas de evaluación automática de accesibilidad (WAVE, aXe, TAW, Lighthouse). Un nombre inventado como "Webcr" NO es una herramienta de evaluación real.

Fuentes

• HTML Living Standard, WHATWG — https://html.spec.whatwg.org/multipage/

• HTML Standard, 4.5 Text-level semantics (abbr, em, strong, small, var) — https://html.spec.whatwg.org/multipage/text-level-semantics.html

• MDN Web Docs, <keygen> (keytype: rsa/dsa/ec) — https://developer.mozilla.org/en-US/docs/Web/HTML/Element/keygen

• MDN Web Docs, <input> — https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

• MDN Web Docs, Window.localStorage — https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

• W3C Cascading Style Sheets (CSS) — https://www.w3.org/Style/CSS/

• W3C Web Accessibility Initiative (WAI): WCAG, ATAG — https://www.w3.org/WAI/standards-guidelines/

• Bootstrap, documentación oficial — https://getbootstrap.com/