Lección : Actividades

Actividad 3-1 (Lista de la compra)

Usa una lista para anotar que debes comprar en el supermercado. Si hay alguna fruta, cambia el color del <li> por el color de esa fruta. Para ello deberás crear estilos, usando clases, por cada color que necesites para después aplicarlo en el HTML.

Ejemplo.

<style>

.rojo {
    color: rojo;
}

</style>

<ul>
    <li>Agua</li>
    <li class="rojo">manzanas</li>
    <li>Galletas</li>
</ul>

Actividad 3-2 (Libertad creativa)

A partir del siguiente HTML añade colores, o cualquier otro estilo que has visto en los ejemplos, para darle un aspecto más atractivo. Tienes libertad creativa.

Ejemplo.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mis vacaciones</title>
</head>
<body>
    <h1>Isla del Tenerife</h1>
    <h2>Subiendo a un volcán</h2>
    <p>Mis amigos y yo nos propusimos subir andando hasta la cima del volcán más alto de España: el Teide. El calor nos abraso y a los pocos minutos vaciamos todas las cantimploras. A la hora siguiente notamos como las lagartijas nos perseguían con cierta distancia mientras se relamian los labios. Parecía que esa noche iban a cenar caliente.</p>
    <p>Otra hora más tarde uno de mis amigos se torció el tobillo y decidimos abandonarlo a su suerte. Nunca más supimos de él, esperemos que esté en un sitio mejor.</p>
    <p>La siguiente hora notamos la ausencia del oxígeno. Respirábamos porque teníamos el hábito. Dos más cayeron en el olvido.</p>
    <p>La última hora notamos un poco de hambre de tanto andar. Optamos por el canivalismo.</p>
    <p>Solo quedé yo. ¡Qué vistas! Hasta podía ver la isla de Gran Canaria. Valió la pena cada zancada, camiseta escurrida, agujetas en las piernas y perdidas humanas. Estaba a tanta altura que casi podía tocar las estrellas con la punta de mis dedos. Era la oportunidad de maravillarme del volcan y encontrar nuevos amigos.</p>
</body>
</html>

Actividad 3-3 (¿De que color es Pluton?)

Busca en los ejemplos el <p> con la id Pluton. ¿De que color es el texto? ¿Por qué?

Actividad 4-1 (Historia de Kodak)

A partir del siguiente texto.

Eastman Kodak Company (popularmente conocida como Kodak) es una compañía multinacional fundada el año 1892 en los Estados Unidos dedicada al diseño, producción y comercialización de equipamiento fotográfico. Durante más de cien años ha sido una empresa muy conocida por sus cámaras y películas fotográficas y actualmente está reorientando su actividad hacia dos mercados principales: la fotografía digital y la impresión digital, aunque hay pocas veces en que se orienta a la fotografía analógica en la actualidad. Desde 2020 comercializa además productos farmacéuticos. 

Logra la siguiente web.

4-1

Actividad 4-2 (Cuestionario para una agencia de viajes)

Crea un formulario con 3 preguntas para saber cual sería el mejor destino. Usa para las respuestas radio o checkbox y un botón para “Enviar” las respuestas. Algunas ideas:

  • ¿Eres más de montaña o de playa?
  • ¿Te gusta el calor?
  • ¿Cual es tu continente favorito?

Actividad 4-3 (Creando un sencillo blog)

Crea el siguiente HTML y añade el CSS necesario para que se asemeje lo máximo posible. Eres libre que usar cualquier texto mientras mantengas la estructura. Evita todo aquello que no sepas realizar.

Blog

Imagen completa

Actividad 5-1 (Moby Dick)

A partir del prólogo de Moby Dick, crea una web usando los siguientes estilos en su diseño.

  • font-size
  • font-style
  • font-width
Moby Dick

Herman Melville

Prólogo

Vivimos tiempos en que los hombres pueden arponear impunemente a las ballenas. A despecho de todos los ecologistas del mundo, las localizan por medio del radar, consiguen incluso algunas veces la complicidad de un hidroavión y luego, para dar muerte al enorme mamífero que emerge a lo lejos, tienen suficiente ya con apretar el gatillo desde la cubierta del barco homicida. Ni siquiera les tiembla el pulso.

Hubo otras épocas, sin embargo, en las que no lo tuvieron tan fácil. Los marineros embarcaban entonces en incómodos veleros, arriaban precipitadamente los botes, remaban sin descanso hacia donde estaba la ballena y, cuando la tenían a tiro, lanzaban los crueles arpones y confiaban en su buena suerte.

Actividad 5-2 (Alineando la ballena)

  • Separa las letras del título: Moby Dick.
  • Separa un poco el nombre del autor y su apellido.
  • Convierte el título del capítulo, Prólogo, en mayúsculas.
  • Justifica el texto del capítulo.

Actividad 5-3 (Sobre la ballena)

  • Cuando mi cursor se coloque sobre el título, debe cambiar su estilo a cursiva y cambiar su color a azul.
  • El título del capítulo debe convertirse en negrita y en rojo.

Actividad 5-4 (Personaliando la ballena)

  1. Descarga 2 tipografías diferentes, una para el título y otra para el texto.
  2. Carga en el CSS ambas fuentes con @font-face.
  3. Crea un par de clases para cada fuente y aplica sobre el HTML donde corresponda.

Actividad 5-5 (Siguiendo a la ballena)

A partir del siguiente texto…

Aquellas cacerías, sin embargo, acababan muchas veces en tragedia. Fue en uno de esos lances, por ejemplo, donde el enigmático protagonista de esta novela, el capitán Ahab, perdió una pierna, la sustituyó por otra de marfil y concibió un odio mortal hacia aquella colosal ballena blanca y solitaria que sembraba el terror por mares sin civilizar.

Lo que deberíamos hacer ahora, sin embargo, es determinar las razones de ese odio inextinguible. Seamos cautos y no aventuremos hipótesis precipitadas. Puede que la mutilación de Ahab no tuviese nada que ver porque todos sabemos que hay odios que encuentran sus más secretas motivaciones mucho más allá de las cosas que han sucedido en este mundo y que actúan sobre nosotros a nivel inconsciente.

Logra la siguiente Web.

Ejercicio 5-5

Imagen completa

¿Te ayudo?

Comprame un café
  • 1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
  • 2 cafés: Respondo a una duda en los comentarios.
  • 4 cafés: Te corrijo una actividad y te envío feedback.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario