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.

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>

Compruebe que 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 cuando 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>

Enlace a ejercicio Ficheros (1) A-1

ERROR (no puede mostrarse el objeto)

Ficheros (1) - A-2

Mejore el programa anterior añadiendo las etiquetas mínimas para que el carácter ¡ se vea corrrectamente (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>

Enlace a ejercicio Ficheros (1) A-2

ERROR (no puede mostrarse el objeto)

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>

Enlace a ejercicio Ficheros (1) A-3

ERROR (no puede mostrarse el objeto)

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>

Enlace a ejercicio Ficheros (1) B-1

ERROR (no puede mostrarse el objeto)

Ficheros (1) - B-2

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

Enlace a ejercicio Ficheros (1) B-2

ERROR (no puede mostrarse el objeto)

Ficheros (1) - B-3

Amplie 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
<!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>

Enlace a ejercicio Ficheros (1) B-3

ERROR (no puede mostrarse el objeto)

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" type="text/css" 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%;
}