PRÁCTICA FINAL HTML-CSS

En el fichero comprimido PF1Av-LMSGI.zip encontrarás todos los ficheros necesarios para

realizar la práctica:

css fichero estilos.css para colocar las propiedades de estilo que indica el enunciado. Ten en
cuenta que debes utilizar los selectores de los diferentes elementos para indicar las propiedades.

imgs con las imágenes necesarias para diseñar la página.

index.html fichero .html para colocar el código html correspondiente según el enunciado.

La estructura de la página será: (html: 2 puntos)

- Una cabecera que contendrá un <h1> con el título de la página y un logo (en html)
- Una barra de navegación que contendrá una lista no numerada con los enlaces del menú de
navegación. Y un menú desplegable en la opción lenguajes, con las opciones: HTML5, CSS3,
JAVASCRIPT y JSON.
- En el contenido de la página habrá tres artículos. Cada uno contendrá una cabecera con una
imagen y un <h2> con el título del artículo. También contendrá un párrafo de texto.
- Un pie de página que contendrá un párrafo de texto.

Estilos:
1.- Intrucciones de inicialización. (0,25 puntos)

2.- Cuerpo: (0,25 puntos)

- Margen interno superior 20px.
- Texto alineado al centro.
- Color de fondo:#E6E6E6

3.- Página: (1,25 puntos)

- Tendrá un ancho de 960px.
- Los márgenes superior e inferior serán de 0px, mientras que el izquierdo y derecho serán
automáticos.
- El texto estará alineado a la izquierda.
- Para el efecto de bordes redondeado que tiene la página utilizar un radio de 20px. Ten en cuenta
la compatibilidad con los navegadores principales. Deberemos indicarlo en varios elementos.
- Aplicar también una sombra de color gris con los siguientes valores: 5px 10px 8px. Ten en
cuenta la compatibilidad con los navegadores principales.

4.- Cabecera: (1 punto)

- La fuente courier de color negro y tamaño 1.1em y en cursiva.
- El borde inferior tendrá 6px, será negro y de estilo sólido.
- El color de fondo será blanco.
- Al h1 de header le pondremos unos márgenes internos superior e inferior de 20px y izquierdo y
derecho de 100px.
- La imagen del logo. Deberá estar posicionada a 15px a la izquierda y 15px arriba.

1
5.- Barra de navegación: (1 punto)
- El color de fondo: #FFFFCC
- Tendrá un borde inferior 1px, color #8C8C8C y de estilo sólido.
- Aplicar también un margen interno de 5px arriba y abajo y 15px izquierda y derecha.

Estilo de los elementos:

- Sin viñetas, margen interno de 5px arriba y abajo y 40 izquierda y derecha.
- Texto: verdana, de 20 px de tamaño y negrita.
- cursor por defecto.

Para los enlaces:

- Quitar el subrayado. Color: #006666
- Color de la fuente cuando el ratón está sobre ellos #00B3B3

Menú desplegable: (2 puntos)

Estilos del menú desplegable:

- Color de fondo del contenedor: lightgrey;

- Poner un borde de 1px de color negro sólido.

Estilos de los elementos del menú desplegable (enlaces):

- Tienen un margen interno de 6px arriba y abajo y 3px izquierda y derecha.

- texto: arial, sans-serif de 1em de grosor y negrita. Color negro.
- Quitar el subrayado.
- Color de la fuente cuando el ratón está sobre ellos #006666.
- Los elementos ocupan un ancho de 125px.

6.- Contenido de la página: (0.25 puntos)

- Color de fondo: lightgrey
- Ancho: 100%

7.- Elementos article: (0.75 puntos)

- Ancho de 275px. Alto: 400px
- Borde de 1px color lightgray y estilo sólido.
- Color de fondo white.
- Texto alineado al centro.
- Los márgenes externos serán de 14px.
- Los márgenes internos los configuraremos de la siguiente forma: izquierdo 6px, derecho de 7px
y superior 5px, inferior 22px.

Cabecera del artículo:

Borde inferior de 1 px, color #003333 sólido
Imagen: Ancho: 240px. Alto:180px.

2
Encabezado (h2)
Margen interno de 10px.

Artículo de la izquierda: (0,25 puntos)

- Utilizar selector.
- Aplicar el siguiente estilo de texto al artículo: verdana,sans-serif y 1em de tamaño;

Artículo central: (0,25 puntos)

- Utilizar selector.
- Aplicar el siguiente estilo de texto al artículo: verdana,sans-serif y 1.25em de tamaño;

Artículo de la derecha: (0,25 puntos)

- Utilizar selector.
- Aplicar el siguiente estilo de texto al artículo: verdana,sans-serif y 1.5em de tamaño;

8.- Pie de la página: (0,5 puntos)

Texto: tamaño 1em, color negro. Alineación centrada.
Color de fondo: #00B3B3
Borde superior de 6px de grosor de color negro sólido.
Margen interno superior e inferior de 15px y 0px izquierda y derecha.

- Validar el código html y css para que esté libre de errores.

La aparición de errores supondrá restar1 punto por la no validación de html y 1 punto por la no
validación de css, del total de la práctica.

- Comprimir todos los ficheros generados en un fichero con el nombre:

NomAlum-PF1aEv.zip

- Realizar la entrega de la práctica al moodle.