acarpio_Practica1

Primera práctica de lenguaje de marcas.

1. La web en general
2. Index.html
3. Audios
4. Videos
5. Tablas
6. Guía de rúbrica

1- La web en general

Al no ser responsive depende del navegador y de la resolución de pantalla se puede ver raro. Yo lo he hecho con y para microsoft edge.

Por si acaso aquí un video de como la veo yo:

video_pagina.mp4

Para mover los elementos principales de sitio, en alguna de las páginas he utilizado position:float y una clase llamada .limpiarflotadores con clear:both como propiedad para poder alinearlos sin que sea responsive.

Primero hice este esqueleto para luego colocar cada cosa:

2 - Index.html

Página principal de la web, es la que más cosas tiene.

• Nav
  • Logo con URL a la web del centro.
  • Titulo animado.
  • Enlaces de navegación a las otras webs con :hover.
  • Float + clear para posicionar los elementos.
• Main
  • Un pequeño texto explicativo estilizado.
  • Parte principal dividida en tres columnas (cada columna y la foto central tienen un :hover para aplicar un efecto.:
    • Columna 1 con texto
    • Columna 2 con foto
    • Columna 3 con texto.
  • Parrafo explicativo estilizado + imagen colocado con position: relative.
  • Footer que luego he copiado en cada página con enlaces con :hover, imagenes con :hover que se encienden al pasar el ratón por encima y adress con mailto.

3 - Audios

Tiene una lista de audios con un encabezado diferente cada uno, y el contenedor de audio posicionado en el centro.

4 - Vídeos

• Fondo de página.
• Cuatro contenedores de video con mute loop, autoplay y controls.
• Posicionados con position relative.
• Un pequeño texto debajo de cada video.

5 - Tablas

La misma tabla del ejercicio original pero algo más grande y estilizada con diferentes selectores.

6 - Guía de rúbrica

He intentado incluir un poco de todo de lo que pide la rúbrica de la actividad, algunos ejemplos de selectores del código (no todos):

Selector descendente

Reglas @

Selector de hijos (padre)

Pseudoelemento

Pseudoclase

Algunos elementos tienen efectos al pasar el ratón por encima con :hover, como las columnas de la página principal, los iconos del footer, los enlaces del nav etc. El párrafo de debajo de las columnas tiene un pseudoelemento ::selection para darle un efecto a la hora de seleccionar arrastrando el texto.

Animaciones de nav y titulo inspirados en:

https://www.youtube.com/watch?v=1G7kQ_EC_V4

https://www.youtube.com/watch?v=yefgBA1CecI