This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Utiliza Listas



Si vemos el documento original nos daremos cuenta que la sección “¿Sabías Qué?” contiene una lista con viñetas. En nuestro código, sin embargo, hemos escrito esta lista como si fueran párrafos individuales, lo cual no es del todo correcto.

Listas en HTML
 
En HTML se utilizan tres elementos para crear listas: <ol> (ordered list), <ul> (unordered list) y <li> (list item). 
 
Copia este código en un archivo HTML y ábrelo con el browser:
 
Cómo convertirte en Zombie:
<ol>
    <li>Encuentra la colonia de zombies más cercana.</li>
    <li>Deja que los zombies te ataquen.</li>
    <li>Empieza a perseguir humanos.</li>
</ol>


Cómo Ahorrar Luz Eléctrica:
<ul>
    <li>Cierra la pluma al lavarte los dientes o afeitarte</li>
    <li>Riega al anochecer para evitar pérdidas por evaporación</li>
    <li>No uses las duchas de las playas, es un lujo superfluo e innecesario</li>
</ul>
 
Como puedes observar en el ejemplo, <ol> es utilizado para crear listas ordenadas, donde el orden de los elementos es importante. Por defecto, los navegadores enumeran cada uno de los <li> que estén dentro de un <ol>.
 
En cambio, <ul> es utilizado para listas no ordenadas, donde el orden no es crucial. Por defecto, los browsers le asignan viñetas a cada uno de los <li> que estén dentro de un <ul>.
 
Si modificamos la sección de “¿Sabías Qué?” para utilizar listas en vez de párrafos, debemos obtener este resultado.
 
Tómate el tiempo necesario para modificar el documento que elegiste en la primera tarea y colocarle listas donde lo necesite. Cuando termines, pasa a la siguiente tarea.

Task Discussion