lunes, 24 de febrero de 2020

PRACTICA: Hacer este formato manejando imágenes y los conocimientos adquiridos

Visualización del archivo patatas-fritas.html en Google Chrome, donde se hace uso de una imagen y dos listas.


Escribir el código de los archivos "patatas-fritas.html" y "estilos.css", teniendo en cuenta las siguientes indicaciones:
  • Todos los estilos están especificados en el archivo "estilos.css".
  • El tipo de letra utilizado en todo el documento es Verdana.
  • El tamaño de la imagen es 300 x 225 píxeles.
En la siguiente tabla se indican los colores y tamaños de los diferentes elementos que aparecen en la página web:
ElementosColor del textoTamaño
h1#33320px
h2#66616px
p
li
#00012px

estilos.css"

body {font-family:verdana;}
h1 {color:#333; font-size:20px;} 
h2 {color:#666; font-size:16px;} 
p, li {color:#000; font-size:12px;}

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Receta de patatas fritas</title>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
    <h1>Patatas fritas</h1>
    <p>Receta de patatas fritas caseras.</p>
    <img src="imagenes/patatas-fritas.jpg" width="300" height="225" alt="Patatas fritas con ajos.">
    <h2>Ingredientes</h2>
    <ul>
      <li>3 ó 4 patatas (300g.)</li>
      <li>4 dientes de ajo</li>
      <li>Aceite de oliva</li>
      <li>Sal</li>
    </ul>
    <h2>Elaboración (Pasos)</h2>
    <ol>
      <li>Calentar aceite en una sartén.</li>
      <li>Añadir las patatas cortadas, la sal y los ajos.</li>
      <li>Freír al gusto.</li>
      <li>Servir en plato.</li>
    </ol>
    <hr>
  </body>
</html>


No hay comentarios:

Publicar un comentario

ACTIVIDADES DEL 30 DE MARZO AL 3 DE ABRIL

Enviar vía e-mail bitácora personal (individual) de lo realizado sobre Proyecto de Sitio Web que se esta trabajando. Esta bitácora debe se...