Conceptos básicos y fundamentos de HTML y CSS.

Calificación: A (Sobresaliente).

Licencia: Creative Commons Atribución Compartir Igual 4.0 Internacional (BY-SA).

---

Esta actividad constaba de dos partes, la primera teórica y la segunda, práctica.

Encargo.

En la parte teórica había que responder a las siguientes cuestiones:

1. Explica brevemente las razones por las que es importante separar el código del diseño.
2. Explica brevemente qué son las pseudoclases y los pseudoelementos. Explica y pon un ejemplo práctico del uso de 3 pseudoclases y 3 pseudoelementos.
3. Explica de forma breve qué es y cómo funciona el mecanismo en cascada en el lenguaje CSS. ¿Cómo indicarías que una regla debe de prevalecer siempre en caso de conflicto?
4. 1.Explica para qué sirven las propiedades font-family y @font-face.
   2. Escribe un ejemplo de código de cómo aplicarías la propiedad font-family a un párrafo que tenga un tamaño de letra 0.8em, un estilo itálica, justificación completa y que utilice las fuentes Arial, Helvetica, sans-serif.
   3. Escribe un ejemplo de código de cómo usarías la fuente AMARANTH en una web utilizando la propiedad @font-face

La parte práctica consistía en pasar una imagen .png a HTML y CSS.

Información complementaria.

A esta primera actividad le acabé dedicando mucho más tiempo del que había creído que necesitaría por las siguientes razones:

En la parte teórica, aunque a priori eran cosas que sabía, me encontré con que explicarlas por escrito no me era tan fácil como había pensado.

En la parte práctica, no era tan importante que el resultado visual fuera exactamente igual al modelo como hacer un buen marcado HTML y usar correctamente el CSS. Concretamente se pedía:

Al crear el documento HTML, deberás utilizar las mejores técnicas de marcado explicadas en el material docente de la asignatura consiguiendo un marcado estructural y semántico apropiado.

Además, había que añadir al documento con las respuestas de la parte teórica una explicación de todo el código html y css utilizado. Eso fue a lo que más tiempo dediqué.

Por otra parte, procuré generar un código lo más limpio y legible posible.

Destacaría además que, en la búsquedad de la excelencia, utilicé Schema para el marcado de microdatos, marqué los cambios de idioma, la fecha con la etiqueta <time>, las abreviaturas, etc.

Arte Final.

Dejo aquí el enlace al repositorio de github con el código completo y la imagen de partida en alta calidad.

Dejo aquí también el informe (383 KB) que acompañaba a mi trabajo.