Prácticas con CSS y Bootstrap
Desarrollo de Aplicaciones Telemáticas, 2023-2024
Grado en Ingeniería en Tecnologías de la Telecomunicación
Grado en Ingeniería en Sistemas de Telecomunicación
Escuela de Ingeniería de Fuenlabrada
Universidad Rey Juan Carlos


Cambios en el documento

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

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 ~/dat/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 ~/dat/practica02.md cada uno de los casos.

  3. Recuerda que, como siempre, tienes que comprobar con el W3C validator que tu código no provoca avisos ni errores. Sin necesidad de que el enunciado lo pida explícitamente.

Práctica 2.3. Atributos del texto

Prepara un fichero HTML llamado

~/dat/practica02/ej23.html

que contenga al menos 6 párrafos 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 las cajas

Prepara un fichero HTML llamado

~/dat/practica02/ej24.html

que contenga al menos 4 cajas de prueba, con distintos atributos relacionados con color, borde y márgenes. Hazlo usando clases. El color del texto también deberá ser adecuado, aunque solo sea blanco o negro. Añade imagen de fondo al menos a un elemento. Selecciona los colores usando algún generador de paletas como https://coolors.co.

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 ~/dat/practica02/grid.html que, basado en Bootstrap, tenga la siguiente estructura:

xxxxxxxxxxxx
xxx xxx xxx xxx
xxx xxx xxx xxx
xxx xxx xxx xxx
xxxx xxxx xxxx

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á ~/dat/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 ~/dat/practica02/carousel.html

Práctica 2.9. Formularios Bootstrap

Práctica 2.10. Landing Page

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