Ficheros - Ejercicios (1)

Estos ejercicios corresponden a lo explicado en la lección Ficheros.

Se pueden consultar unas posibles soluciones.

En todos estos ejercicios se trata de crear un fichero con el contenido que se muestra en los ejemplos. Como el contenido es html, es conveniente que el fichero se abra automáticamente en el navegador para ver el resultado, aunque se aconseja ver el código fuente html del resultado en el navegador para comprobar que no hay errores.

A. ¡Hola, mundo!, sin estilo

Ficheros (1) - A-1

Escriba un programa que genere una página web que salude al mundo. Es suficiente con poner la etiqueta <p>.

<p>Hola, mundo!</p>

El resultado se mostrará automáticamente en el navegador:

ERROR (no puede mostrarse el objeto)
Enlace externo

Nota: En Windows, si añade un carácter que no está en el código ASCII original (por ejemplo, la exclamación inicial ¡), se muestran además otros caracteres (en este caso, Â). Este problema ocurre porque el navegador no sabe que el juego de caracteres del fichero es UTF-8 y lo muestra como si fuera ASCII.

<p>¡Hola, mundo!</p>

Ficheros (1) - A-2

Mejore el programa anterior añadiendo las etiquetas mínimas para que el carácter ¡ se vea correctamente (aunque el html de esa página siga sin ser válido).

<html>
<head>
  <meta charset="utf-8">
</head>

<body>
  <p>¡Hola, mundo!</p>
</body>
</html>

El resultado se mostrará automáticamente en el navegador:

ERROR (no puede mostrarse el objeto)
Enlace externo

Ficheros (1) - A-3

Mejore el programa anterior añadiendo las etiquetas necesarias para conseguir una página válida y que se vea correctamente en dispositivos móviles.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Ejercicio Ficheros (1) A-3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <p>¡Hola, mundo!</p>
</body>
</html>

El resultado se mostrará automáticamente en el navegador:

ERROR (no puede mostrarse el objeto)
Enlace externo

B. ¡Hola, mundo!, con estilo

Ficheros (1) - B-1

Escriba un programa que genere un programa que muestre un saludo y que el color de fondo de la página sea un color elegido al azar.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Ficheros (1) B-1</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body style="background-color: hsl(303, 100%, 50%)">
  <p>¡Hola, mundo!</p>
</body>
</html>

El resultado se mostrará automáticamente en el navegador:

ERROR (no puede mostrarse el objeto)
Enlace externo

Ficheros (1) - B-2

Amplíe el programa anterior de manera que el saludo se muestre a un tamaño también elegido al azar entre 200% y 800% (con valores múltiplos de 100).

Nota: Para que el tamaño se muestre correctamente en el navegador, tenga en cuenta que el carácter porcentaje (%) debe estar unido al valor numérico, sin espacios.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Ficheros (1) - B-2</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body style="background-color: hsl(166, 100%, 50%)">
  <p style="font-size: 400%">¡Hola, mundo!</p>
</body>
</html>

El resultado se mostrará automáticamente en el navegador:

ERROR (no puede mostrarse el objeto)
Enlace externo

Ficheros (1) - B-3

Amplíe el programa anterior de manera que el saludo se muestre con un tipo de letra elegido al azar entre las cuatro familias serif, sans-serif, monospace y cursive.

Ayuda
  • Para elegir una de las familias al azar, se puede:
    • utilizar la función choice() de la biblioteca random, o bien
    • utilizar la función randrange() de la biblioteca random y después con un if ... elif ... else ... elegir una familia dependiendo del valor obtenido.con el randrange()
<!DOCTYPE html
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Ficheros (1) - B-3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body style="background-color: hsl(65, 100%, 50%)">
  <p style="font-family: monospace; font-size: 800%">¡Hola, mundo!</p>
</body>
</html>

El resultado se mostrará automáticamente en el navegador:

ERROR (no puede mostrarse el objeto)
Enlace externo

Ficheros (1) - B-4

Mejore el programa anterior haciendo que el programa genere dos ficheros: la página web y la hoja de estilo.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Ficheros (1) - B-4</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="ficheros-1-b-4.css">
</head>

<body>
  <p>¡Hola, mundo!</p>
</body>
</html>

body {
    background-color: hsl(155, 100%, 50%);
}

p {
    font-family: monospace;
    font-size: 662%;
}