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


Cambios en el documento

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

Prepara un fichero de nombre ~/at/practica02.txt 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

Obseva 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.txt 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 párrafos de prueba, donde el texto tenga distintos atributos relacionados con alineación, subrayado, tamaño y estilo.

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. 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.

El código no debe generar ningún error ni warning, ni en W3C validator ni en bootlint (excepto el relativo a X-UA-Compatible)

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.

El código no debe generar ningún error ni warning, ni en W3C validator ni en bootlint (excepto el relativo a X-UA-Compatible)

Práctica 2.7. Paneles, botones, navs

En este ejercicio harás una prueba sencilla con navs, paneles y botones.

Escribe tres ficheros HTML llamados

~/at/practica02/nav1.html

~/at/practica02/nav2.html

~/at/practica02/nav3.html

Cada uno de ellos debe tener un panel, texto de prueba y al menos un par de botones. Los botones no harán ninguna función. Desde cada una de estas páginas se deberá poder navegar hasta las otras dos, usando un nav (del tipo que prefieras).

El código no debe generar ningún error ni warning, ni en W3C validator ni en bootlint (excepto el relativo a X-UA-Compatible)

Práctica 2.8. Dropdown

Ahora usarás un menú desplegable de Bootstrap.

  1. Crea un fichero

    ~/at/practica02/nav10.html que sea, inicialmente, una copia de ~/at/practica02/nav1.html.

  2. Haz lo mismo con nav20.html y nav30.html a partir de nav2.html y nav3.html, respectivamente.

  3. Modifica nav10.html, nav20.html y nav30.html para que naveguen entre ellos.

  4. Haz lo necesario para que cuando el usuario se encuentre en nav30.html, en el nav aparezca un menú desplegable con tres opciones, apuntando a tus prácticas 2.4, 2.5 y 2.6 respectivamente.

Práctica 2.9. Formularios Bootstrap

Práctica 2.10. Carousel

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

Práctica 2.11. 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.