====== Desarrollo Web Lección 3 - Listas ====== ===== Listas Simples ===== ==== Objetivo ==== En este ejercicio, creará una lista con viñetas y una lista numerada y aprenderá algunas reglas de formato específicas de la lista. ==== Configuración ==== * Abra una nueva pestaña [[https://jsfiddle.net/|jsfiddle]]. * Complete la sección HTML con encabezados para 'Receta', 'Ingredientes' y 'Método'.

Receta de panqueques

Ingredientes

Método

 ==== Lista Numerada ==== * Veamos primero el Método. La mayoría de las recetas muestran el método como una lista numerada, ya que es importante realizar los pasos en orden.

Método

  1. Mezclar ingredientes
  2. Vierta la mezcla en el molde
  3. Cocine 1 minuto por cada lado
  4. Servir
 * Ejecute el código ahora y vea que el navegador coloca automáticamente un número al comienzo de cada línea, comenzando con '1'. *
    significa 'lista ordenada'. * Cada elemento de la lista se designa con la etiqueta
  1. , que significa 'elemento de lista'. * Parece que olvidamos calentar la sartén primero. Agreguemos este paso antes de verter la mezcla.

    Método

    1. Mezclar ingredientes
    2. Calentar sartén
    3. Vierta la mezcla en el molde
    4. Cocine 1 minuto por cada lado
    5. Servir
     * ¿Qué notas cuando ejecutas el código? Los números cambian automáticamente de modo que 'calentar sartén' se convierte en el número '2' y todo lo que sigue se incrementa. ==== Lista de Viñetas ==== * Ahora veamos los ingredientes. No importa el orden de los ingredientes, por lo que no suelen estar numerados.

    Ingredientes

    • 100 g de harina
    • 2 huevos
    • 300 ml de leche
     * Ejecute el código y vea que en lugar de un número, tenemos un punto (o viñeta) delante de cada elemento. * Es tan fácil como esto crear una lista. Ahora veamos qué podemos hacer para cambiar su apariencia. ==== CSS ==== * Agregue el siguiente atributo de estilo a la etiqueta