Laboratorio 1 de DEW, sesión 2: Hojas de estilo

Estilo azul

A partir de la página ej1 se pretende diseñar una hoja de estilos externa para obtener este resultado. A destacar:

El fondo empleado, que, siendo el aspecto más sencillo de conseguir, debería servir como prueba de que la carga del estilo funciona.
Las modificaciones aplicadas en todos los niveles de encabezamiento.
La definición de una clase nota aplicada a los primeros párrafos
Algunos elementos sueltos, como la lista de definiciones y la tabla.

Incorporar tipografía

En este nuevo apartado se pretende aplicar la tipografía Roboto Condensed a todos los párrafos. Para ello necesitamos consultar los detalles en Google Fonts, destacando:

Un buscador y un sistema de selección para encontrar la tipografía deseada
Una vez desplegada la página sobre Roboto Condensed, pulsamos en Select this font, dando lugar a una especie de carro de la compra, que informa sobre cómo usarlo.
- Elegimos la alternativa relacionada con @import porque solo requiere cambiar el código del CSS

Ejercicio de examen (aspecto sin CSS)

Escribe una página XHTML5 completa como la mostrada. Los detalles necesarios son:

En este ejercicio prescindimos de hojas de estilo.
ejHTML-Rec1718 actúa como título y como contenido a destacar en el cuerpo del documento.
La viñeta precedida por "Texto:" tiene una longitud de 17 caracteres, pero únicamente admite que se escriban hasta 12. Está asociada a la variable t.
La viñeta precedida por "Color:" tiene las siguientes 7 entradas: Green, Blue, Brown, DarkRed, Gold, Orange y Red.
- Cada una es un identificador de color y pueden seleccionarse varios de ellos.
- Se muestran 4 simultáneamente.
- El valor asociado a cada caso son las 2 primeras letras (p.ej. la cadena "Gr" para el caso "Green").
- Esta viñeta está asociada a la variable c.
La marca, o su ausencia, colocada junto a "Validar?" se reflejará en la variable v.
El botón Enviar debe activar el CGI con url http://a.b.c/d por el método POST.

Resultado: ejHTML-Rec1718.html

Ejercicio de examen (página con CSS)

Escribe una página XHTML5 COMPLETA, incluyendo la cabecera, como la que se muestra, respetando los siguientes requisitos:

Todo el texto, salvo las palabras div y span, emplea una tipografía llamada Lato, accesible mediante el URL https://fonts.googleapis.com/css?family=Lato
Las palabras div y span se muestran como texto monoespaciado ( pero no <tt>!).
Debe referenciar una hoja de estilos llamada st1.css, que también debe ser desarrollada.
Hay un div con identificador d1, y un span de la clase s1.
Pueden observarse cuatro colores: blanco, negro, un color oscuro (maroon) y otro claro (lightblue).
Observarás un fondo y borde en la lista.

Resultado: Ejercicio de examen (página con CSS)

Sesiones de Jose Ramon