Logotipo de Aprende Gratis.

HTML - Lección 6: Listas en HTML

Cuando necesitamos presentar en un texto una serie de conceptos o ideas utilizamos listas. Las listas pueden ser ordenadas o no serla. Las que no son ordenadas, a cada término se le antepone un círculo negro. Las ordenadas tienen un número en cada término.

En la imagen 8 se puede apreciar las dos clases de listas: las ordenadas y las desordenadas.Lo característico es que las ordenadas lo están por la representación de números.

En la imagen se usa los cinco primeros días de la semana.

Listas de los días de la semana ordenadas y desordenadas
Figura 8. Podemos hacer listas de textos
ordenados o desordenados

Para hacer una lista desordenada utilizaremos la etiqueta <ul>. Dentro de ésta ira cada elemento de la lista encerrado en la etiqueta <li>. Veamos el siguiente código:

<body>

  <ul>  <!-- establecemos la lista -->
    <li>Patatas</li>    <!-- primer elemento -->
    <li>Tomates</li>    <!-- segundo elemento -->
    <li>Lentejas</li>   <!-- tercer elemento -->
    <li>Lechuga</li>    <!-- cuarto elemento -->
    <li>Avellanas</li>  <!-- quinto elemento -->
  </ul>
  
</body>

Lo primero que se ha hecho es implementar la lista por medio de la etiqueta <ul>; posteriormente, y a través de la etiqueta <li>, se ha establecido cada elemento de la lista encerrándo el texto correspondiente en la misma. Para cambiar la lista a una ordenada basta con sustituir la etiqueta <ul> por la etiqueta <ol>.

También tenemos la posibilidad de hacer esquemas con tan solo anidar listas. Anidar quiere decir meter una lista dentro de otra. Vemos el siguiente código y lo comentamos:

<ol> <!-- establecemos la lista principal -->

  <!-- primer elemento de la lista principal -->
  <li>Bebidas

    <!-- anidamos una lista dentro de "bebidas" -->
    <ul>
      <li>Refrescos</li>
      <li>Zumos</li>
    </ul>
  
  </li>

  <!-- segundo elemento de la lista principal -->
  <li>Bollería
  
    <!-- anidamos otra lista dentro de "bollería" -->
    <ul>
      <li>Bizcochos</li>
      <li>Magdalenas</li>
    </ul>
  
  </li>
</ol>
 

En primer lugar se ha implementado una lista principal; una ordenada. Esta lista principal tiene dos elementos: bebidas y bollería. Para anidar tan solo hemos escrito una nueva lista dentro de la etiqueta <li> de los dos elementos de la lista principal principal.

esquema de bebidas y bollería mediantes listas anidadas
Figura 9. Podemos hacer esquemas anidando
listas dentro de otras.

Ir a:


Aprende Gratis 2017 © Mario Raja | página web responsive.