Prácticas con CSS y Bootstrap
Aplicaciones Telemáticas
Grado en Ingeniería Telemática, 2021-2022
Escuela Técnica Superior de Ingeniería de Telecomunicación
Universidad Rey Juan Carlos


Práctica 2.0. Fichero con la memoria de prácticas

Prepara un fichero de nombre ~/at/practica02.md y contesta en él este apartado y todos los posteriores (excepto cuando la memoria de prácticas te pida que escribas un fichero distinto)

Práctica 2.1. Análisis de selectores

Observa los siguientes ejemplos de código html con css y explica por qué cada línea tiene el formato que tiente.

Ejemplo 1

Ejemplo 2

Ejemplo 3

Ejemplo 4.

Práctica 2.2. Uso de selectores

En esta práctica escribirás un fichero HTML con reglas CSS, similar a los ejemplos de la práctica anterior.

  1. Prepara un fichero HTML llamado ~/at/practica02/ej22.html

    y define en él al menos 5 reglas CSS para probar los distintos tipos de selector que vimos en clase (los que aparecen en las transparencias).

    Escribe en el fichero HTML diversos elementos donde se apliquen las reglas. Para cada regla, debe haber

  2. Explica brevemente en el fichero ~/at/practica02.md cada uno de los casos.

  3. Comprueba con el W3C validator que tu código no provoca avisos ni errores.

Práctica 2.3. Atributos del texto

Prepara un fichero HTML llamado

~/at/practica02/ej230.html

que contenga al menos 6 cajas de prueba, donde el texto tenga distintos atributos relacionados con alineación, subrayado, tamaño y estilo. Hazlo usando clases.

Práctica 2.4. Atributos de los bordes

Prepara un fichero HTML llamado

~/at/practica02/ej240.html

que contenga al menos 4 párrafos de prueba, donde los bordes de cada caja tengan distintos atributos relacionados con ancho, estilo y color. Hazlo usando clases. Añade imagen de fondo al menos a un elemento.

Práctica 2.5. Horario

En este ejercicio empezarás a usar la rejilla de Bootstrap.

Recuerda que es necesario que revises este documento con el W3C validator, como todos los de la asignatura.

Práctica 2.6. Rejilla de Bootstrap

Escribe un fichero ~/at/practica02/grid.html que, basado en Bootstrap, tenga la siguiente estructura:

xxxxxxxx xxxx
xxxx xxxx xxxx
xxxx xxxx xxxx
xxxx xxxx xxxx
xxx xxx xxx xxx
  

Esto es,

El contenido será texto de prueba. En las filas de el medio deberá haber al menos 4 imágenes (en total). Usa el tipo de contenedor y el tipo de cuadrícula que creas más oportuno.

Práctica 2.7. CV

Prepara una versión de tu currículum en HTML usando Bootstrap 5 y su rejilla. Ponle color mediante CSS. El fichero se llamará ~/at/practica02/cv.html Incluye todas tus asignaturas aprobadas con su calificación. Si por motivos de privacidad prefieres no incluir datos personales reales en este ejercicio, puedes hacer una versión imaginaria (irónica, sarcástica o simplemente falsa), con tal de que quede claro que no es real.

Práctica 2.8. Carousel

Prepara un carrusel de Bootstrap en un fichero con nombre ~/at/practica02/carousel.html

Práctica 2.9. Formularios Bootstrap

Práctica 2.10. Landing Page

Prepara una landing page con Bootstrap. Su nombre será ~/at/practica02/landing.html y todos los ficheros que necesite estarán dentro de ~/at/practica02/. Organiza los ficheros en subdirectorios como te parezca conveniente.