Práctica obligatoria dos HTML-CSS
1 Instrucciones generales.............................................1 4 Degradados...............................................................2
2 Elementos semánticos...............................................2 5 Bordes.......................................................................3
3 Selectores..................................................................2 6 Sombras.....................................................................3
1 Instrucciones generales
En el ejercicio anterior creamos la página web sin usar ninguna de las nuevas características que nos
aportan tanto HTML5 como CSS3.
A continuación, mejoraremos la semántica de nuestra página utilizando los nuevos elementos de
HTML5, y también mejoraremos su aspecto gracias a las nuevas funcionalidades de CSS3.
No olvidéis pasar el validador tanto a los html como a los csss antes de efectuar la
entrega.
Al finalizar el ejercicio, la página debe quedar así:
1/3
2 Elementos semánticos
En primer lugar, vamos a utilizar los nuevos elementos semánticos de HTML5 en nuestra página web
del curso, para ello sustituiremos los elementos <div> sin contenido semántico, por los elementos
adecuados de HTML5 excepto <div id=”page”>.
Debes usar los siguientes elementos en los lugares adecuados de la página [Link] del ejercicio
anterior: <header>, <nav>, <article>, <footer>, <main>, <small> y <address>.
Evidentemente, al cambiar los elementos utilizados los estilos dejarán de funcionar correctamente,
por lo tanto, debes cambiar la hoja de estilos para que la página se muestre tal y como se mostraba
antes de usar los nuevos elementos.
3 Selectores
• Debes eliminar todos los atributos class e id de la página html y hacer que la hoja de estilos
siga funcionando correctamente. El único id que permanecerá será el del elemento page
(necesitarás utilizar algunos de los nuevos selectores de html5 vistos en el tema).
• En el siguiente ejercicio, le aplicaremos un degradado de fondo a la imagen que aparece en
el <article> de javascript. Debes utilizar un selector de atributo para seleccionar esta imagen.
4 Degradados
En primer lugar, eliminaremos todas las texturas utilizadas en los fondos de los elementos
correspondientes: old_map.png, [Link], [Link] .
Para sustituir estas texturas, utilizaremos lo siguiente:
• Como fondo del <body> pondremos un degradado de arriba abajo que se iniciará con el color
rgb(227, 76, 38) y acabará con el color rgb(240, 101, 41). Para evitar un problema que
surge en algunos navegadores cuando tenemos altas resoluciones de pantalla, pondremos el
color de fondo del elemento <html> a blanco.
• En la barra de navegación, pondremos un degradado de arriba abajo iniciando en el color
rgb(213, 186, 50) y finalizando en el color rgb(255, 218, 62). Ahora el color de la fuente de
los enlaces será blanco y cuando se pase el ratón por encima será orange.
• En la sección de contenidos <main> pondremos el color de fondo blanco.
También pondremos degradados en la cabecera y en el pie de la página:
• En la cabecera, pondremos un degradado de arriba abajo iniciando en el color #0170B9 y
finalizando en el color #27AADE.
• En el pie, utilizaremos el mismo degradado, pero en este caso irá de abajo arriba.
Finalmente, pondremos un degradado como fondo de la imagen del <article> de javascript (hemos
obtenido el selector de la imagen en el punto anterior). El degradado tendrá las siguientes
características:
• Será un degradado radial.
• Se iniciará en el centro de la imagen.
2/3
• Tendrá la forma de un círculo.
• Comenzará con el color #ffffff y la posición 0%.
• Acabará con el color #cecece y la posición 200%.
5 Bordes
• Para el efecto de bordes redondeado que tiene la página utilizaremos un radio de 20px (en
este caso, deberemos indicarlo en varias partes de más de un elemento para que tome el
aspecto que podéis ver en la imagen [Link] ).
• En los elementos <article> debes conseguir el efecto que se muestra en la imagen
[Link] utilizando la imagen mó[Link] para los bordes. Ten en cuenta que también
deberás modificar los márgenes de los elementos.
6 Sombras
• Para la sombra de la página utilizaremos 10px para los desplazamientos y la difuminación y
gray para el color.
• Para la sombra de los textos de los elementos <h2> utilizaremos 2px para los
desplazamientos, 2px para la difuminación y gray para el color.
3/3
