Bienvenidos al Ejercicio Global del Curso

El texto superior está con tipo de letra Palatino Linotype y es un encabezado. De hecho, hay que hacer constar que el texto por defecto del sitio web es Palatino Linotype.

Todo lo que estás viendo usa como base una tabla (mediante la etiqueta <table>) y dentro se habrán insertado varias filas y/o celdas.

Para que se considere, todo este contenido está ocupando un total del 65% del ancho de la página. Los porcentajes superior, inferior, izquierdo y derecho que se ven de margen son, respectivamente, 5%, 5%, 30% y 5%.

El fondo está fijo. Para ello, lo mejor es poner la siguiente regla en CSS: background-attachment: fixed;

Seguro que lo consigue ...

El texto del párrafo, por defecto, está justificado. Los títulos (etiquetas hx) están todos centrados. El texto del cuerpo de la página web es, en cualquier caso, Arial. El padding de los encabezados es 5% (izquierda y derecha), el de los párrafos es 10% (izquierda y derecha) y el de las listas es del 15% (izquierda y derecha).

... y otras muchas cosas que es importante considerar ...

Hay que tener en cuenta las siguientes restricciones:

  • Uno, las listas, como no son párrafos, tienen el texto por defecto de la página, es decir, Palatino Linotype
  • Además, están justificadas. Esto quiere decir que como el padding es superior al de los párrafos, ocurrirá que aparecerá todo perfectamente justificado, pero se verá visualmente que está por dentro del texto justificado de cada uno de los párrafos.
  • Esta lista no numerada emplea una imagen suministrada que es add.png
  • Para hacer lo anterior, debes incluir las siguientes instrucciones con una regla que afecta a esta lista: list-style:url(add.png);

Tenga en cuenta respecto al fondo de la página las siguientes consideraciones:

  • La imagen de fondo ocupa toda la pantalla
  • La parte central (donde se encuentra este texto) tiene un margen superior e inferior del 5%. Además, como puede comprobarse, no está centrado. Ocupa el 65% del ancho total, siendo el espacio de la izquierda del 30% y el de la derecha del 5%
  • Esta lista no numerada emplea una imagen suministrada que es next.png
  • Para hacer lo anterior, debes incluir las siguientes instrucciones en una regla que afecta a esta lista list-style-image:url("next.png");

Y si le gusta el café ... esta imagen seguro que es sugerente

Y si pulsa sobre la imagen o sobre este enlace, será dirigida a la web https://www.w3c.es