Información sobre la tarea
La entrega será en formato PDF. Leer Entrega y presentación de tareas.
La tarea se calificará con una nota de APTO (10) o NO APTO (0).
Duración actividades obligatorias: 7 horas.
RA2. Crea interfaces web homogéneos definiendo y aplicando estilos.
Actividades
A continuación, se muestran las actividades a realizar.
(Voluntaria) Menú cafetería en freeCodeCamp
Hacer el apartado “Aprende CSS básico construyendo un menú de cafetería” del curso Diseño Web Responsivo.
📷 Cuando termines todos los pasos, haz una captura de tu perfil público y añade el enlace de tu perfil. En mi caso este es mi perfil público.
Marcadores de colores en freeCodeCamp
Hacer el apartado “Aprenda los colores de CSS construyendo un conjunto de marcadores de colores” del curso Diseño Web Responsivo.
📷 Cuando termines todos los pasos, haz una captura de tu perfil público y añade el enlace de tu perfil.
Formularios en freeCodeCamp
Hacer el apartado “Aprende formularios HTML construyendo un formulario de registro” del curso Diseño Web Responsivo.
📷 Cuando termines todos los pasos, haz una captura de tu perfil público y añade el enlace de tu perfil.
Modelo de cajas en freeCodeCamp
Hacer el apartado “Aprende el Modelo de Cajas de CSS construyendo una pintura de Rothko” del curso Diseño Web Responsivo.
📷 Cuando termines todos los pasos, haz una captura de tu perfil público y añade el enlace de tu perfil.
Color de fondo
A partir del siguiente documento HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* Escribe tu código CSS aquí */
</style>
</head>
<body>
<div id="pie"></div>
</body>
</html>
Queremos conseguir con CSS que elemento con ID pie tenga las siguientes características:
- Relleno superior e inferior de
0.5em. - Relleno derecho e izquierdo de
0em. - Margen superior de
1em. - Bordes superior e inferior de tipo sólido, de 1 píxel de grosor y de color
#C5C5C5. - Fondo de color
#F8F8F8. - Altura de
3em.
¿El relleno se pinta con el color de fondo?
📸 Haz una o varias capturas para demostrar que ha realizado esta tarea.
Anterior y siguiente
En esta tarea esta prohibido usar Flex o Grid.
A partir del siguiente código:
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio de Flotar y Posicionamiento</title>
<style type="text/css"></style>
</head>
<body>
<div>« Anterior Siguiente »</div>
</body>
</html>
Debes determinar las reglas CSS que pondrías en el elemento style, con las clases, identificadores y elementos que creas necesarios y modificar el código para que el resultado sea lo más parecido posible a la siguiente imagen:
Puedes utilizar del artículo Posicionamiento en CSS para llevar a cabo esta actividad.
📸 Haz una o varias capturas para demostrar que ha realizado esta tarea.
(Voluntaria) Anterior y siguiente con Grid o Flex
Si ya has trabajado con Flex y/o Grid, realiza la tarea anterior pero ahora utilizando cualquiera de estos dos displays.
Tabla
Copia el siguiente código en tu editor de Visual Studio Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ejercicio de cambio de apariencia a tablas con CSS</title>
<style type="text/css">
</style>
</head>
<body>
<table>
<caption>Distancias planetarias</caption>
<thead>
<tr>
<th>Planeta</th>
<th>Distancia desde la Tierra</th>
<th>Web</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">Astronomía Gobierno de España</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Venus</td>
<td>108 Millones de Kilómetros</td>
<td><a href="https://es.wikipedia.org/wiki/Venus_(planeta)">Web Venus</a></td>
</tr>
<tr>
<td>Saturno</td>
<td>1.281 Millones de Kilómetros</td>
<td><a href="https://es.wikipedia.org/wiki/Saturno_(planeta)">Web Saturno</a></td>
</tr>
<tr>
<td>Urano</td>
<td>2.720 Millones de Kilómetros</td>
<td><a href="https://es.wikipedia.org/wiki/Urano_(planeta)">Web Urano</a></td>
</tr>
<tr>
<td>Neptuno</td>
<td>4.504 Millones de Kilómetros</td>
<td><a href="https://es.wikipedia.org/wiki/Neptuno_(planeta)">Web Neptuno</a></td>
</tr>
</tbody>
</table>
</body>
</html>
Una vez descargado el código puedes abrirlos con tu navegador. Verás que el resultado es el que se muestra en la imagen siguiente:
Tabla sin CSS
Tendrás que editar el código y determinar las reglas CSS necesarias para que el resultado sea lo más parecido posible al de la siguiente imagen (Nota: Aunque no sale en la imagen, el puntero está sobre la primera fila, por eso se ve de color amarillo):
Resultado final de la tabla
Puedes utilizar del artículo CSS con tablas y listas para llevar a cabo esta actividad.
📸 Haz una o varias capturas para demostrar que ha realizado esta tarea.
(Voluntaria) Web TofoFP
Realiza una web lo más parecida a la siguiente:
La tabla de colores empleada es la siguiente:
Instrucciones para la realización del portal:
- Ancho cabecera: 920px, con padding superior, izquierda y derecha de 20px.
- Las opciones del menú están programadas como una lista. Cada opción es un hiperenlace cuyo color de fondo cambia al pasar el ratón por encima
- Columna izquierda: ancho de 220px.
- Columna central : 480px, padding left 20px.
- Columna derecha: 180px, padding left 20px.
- Pie de página: 960px de ancho.
- Fijarse en los bordes de las cajas, de la página principal y del pie de página.
📸 Haz una o varias capturas para demostrar que ha realizado esta tarea.