Ayuda ejercicios unidad 3: Aspecto de la página. Estilos básicos

Solución

Para modificar página hasta que quede como la del ejemplo, sigue estos pasos:

Abre el bloc de notas, desde Inicio → Todos los programas → Accesorios → Bloc de notas.
Ve al menú Archivo y pulsa en Abrir...
Ve hasta la carpeta donde está la página platosemana.html creada en el ejercicio anterior.
Como no se ve, haz clic en el desplegable a la derecha del nombre y cámbialo a Todos los archivos.
Selecciona el archivo y pulsa Abrir.

En la cabecera de la página, añade la siguiente etiqueta para insertar el estilo en la página:

<html>
 <head>
 <title>Plato de la semana</title>
   <style type="text/css">

   </style>
 </head>
 <body>
 <h1>Plato de la semana</h1>
 ...

Dentro, redefinimos el estilo de las etiquetas que queremos cambiar:

...
  <style type="text/css">
   body {
      background-color: #FFF9EF;
      font-family: Arial, sans-serif;
      color: #585858;
   }
   h1 {
      background-color: #FFDB8F;
      font-size: 140%;
      padding-left:5px;
   }
   h2 {
      font-style: italic;
      font-family: Verdana, Geneva, sans-serif;
      color: #6F9DBE;
   }
  </style>
...

A continuación, define las siguientes clases:

...
  <style type="text/css">
...
   .info {
      font-style: italic;
      color: #678090;
   }
   .instrucciones {
      font-weight: bold;
      color: #678090;
   }
   .listado {
      margin-left:30px;
   }
  </style>
...

Para acabar, hay que aplicar las clases a los elementos correpsondientes, con el atributo class

...
  <body>
    <h1>Plato de la semana</h1>
    <h2>Berenjenas fritas</h2>
    <p><span class="info">Comensales</span>: 4 personas  </p>
    <p><span class="info">Tiempo de reparaci&oacute;n</span>: 10 minutos</p>
    <p><span class="info">Tiempo de cocci&oacute;n</span>: 12 minutos</p>
    <p><span class="instrucciones">Ingredientes</span>: </p>
    <p class="listado">4 berenjenas.</br />
        Sal.</br />
        Pimienta.</br />
        4 cucharadas de harina y aceite.</p>
    <p><span class="instrucciones">Preparaci&oacute;n</span>:</p>
    <p class="listado">Lavar las berenjenas.</br />
        Cortarlas en rodajas.</br />
        Espolvorearlas con sal.</br />
        Dejar que suelten el agua durante 30 minutos.</br />
        Enharizarlas, ponerlas a freir durante 5 minutos en aceite bien caliente.</p>
  </body>
...

En la siguiente unidad, volveremos a utilizar este archivo.

Cursos Informática Gratuitos

Síguenos en: Facebook Sobre aulaClic Política de Cookies