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:

  1. Abre el bloc de notas, desde InicioTodos los programasAccesoriosBloc de notas.
  2. Ve al menú Archivo y pulsa en Abrir...
  3. Ve hasta la carpeta donde está la página platosemana.html creada en el ejercicio anterior.
  4. Como no se ve, haz clic en el desplegable a la derecha del nombre y cámbialo a Todos los archivos.
  5. Selecciona el archivo y pulsa Abrir.
  6. 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> ...
  7. 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> ...
  8. 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> ...
  9. 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.

Inicio





Página inicial  Cursos Informática Gratuitos

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


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.