Lenguajes de marcas

¡Comienza tu aventura en HTML y ahora en CSS! En este examen vas a disfrutar demostrando que
conoces las principales etiquetas de HTML y que sabes aplicarles reglas de estilo con CSS. Si se te ha

🕒
olvidado alguna, no te preocupes, no te detengas y continúa con el siguiente apartado y si al final te
sobra tiempo , vuelve a intentarlo, ¿ok? Lee con detenimiento cada apartado y la ayuda
correspondiente. ¡Vamos allá!

Recuerda que puedes usar las páginas w3schools, MDN web docs y las cheat sheets como apoyo.

Se debe entregar un fichero comprimido de nombre ApellidosNombre.rar (o similar) con la

estructura de carpetas que hayas creado.

Realiza una página web como la de la imagen de la página 3, que tenga un formulario.
Deberás crear dos hojas de estilo distintas para aplicarle a la misma página y que modifique el
formulario para que presente los dos aspectos que se muestran en las páginas 3 y 4. El formulario
NO TIENE QUE FUNCIONAR.

Además deberás de tener en cuenta las siguientes instrucciones:

● El resultado debe ser lo más parecido posible, pero no hace falta que sea perfecto, no
pierdas tiempo con detalles pequeños, déjalos para el final si sobra tiempo.

● Puedes seleccionar los colores con el plug-in ColorZilla, disponible para Firefox y Chrome.

● El HTML debe ser el mismo, pero debes tener 2 CSS, la diferencia entre uno y otro es
únicamente el formulario, el resto permanece igual.

● El botón CONTÁCTENOS cambia de color a blanco con letras negras cuando se pasa por
encima.

● Los enlaces del menú deben ir a páginas externas distintas (que se abren en ventanas
nuevas) y no modifican su aspecto, aunque se pulsen.

● Utiliza las imágenes proporcionadas en el archivo comprimido.

● No olvides usar las etiquetas semánticas, los selectores, pseudo-selectores y

pseudo-elementos, etc. donde sea posible y/o necesario.

● Debes usar la fuente Bebas Neue para el texto junto al formulario, debes cargarla desde
Google Fonts.

Página 1 | 4
● Debes usar la fuente Fredericka the Great para el título de la página, debes cargarla
desde disco, el fichero está en el archivo comprimido .

● El resto del texto es Arial.

● En la galería de imágenes, debes rellenar el título de las impares en negro, para esta tarea
no puedes usar clases CSS, ni identificadores, debes hacerlo con pseudo-clases.

● Añade a la galería de imágenes una transición o animación al pasar sobre ellas. Puedes
elegir la que quieras, pero el efecto debe ser visible claramente.

Página 2 | 4
Página 3 | 4
Página 4 | 4