Las listas <li> ...



Elemento de lista <li>

 

Cada uno de los elementos de una lista ha de insertarse entre las etiquetas <li> y </li>.

Por ejemplo, para insertar en una lista los siguientes elementos:

  • Perro
  • Gato
  • Periquito

Habría que escribir:

...
<li>
Perro</li>
<li>
Gato</li>
<li>
Periquito</li>
...

Todos los elementos de la lista deberán encontrarse entre las etiquetas que indiquen si la lista es desordenada (con viñetas) u ordenada (numerada) como veremos a continuación.

 

Lista desordenada <ul>

 

Para que una lista sea desordenada, sus elementos deberán encontrarse entre las etiquetas <ul> y </ul>.

A través del atributo type es posible elegir el tipo de viñeta, que puede ser circle (círculo), disc (disco) o square (cuadrado).

Por ejemplo, para insertar la siquiente lista:

  • Perro
  • Gato
  • Periquito

Habría que escribir:

<ul type="circle">
<li>
Perro</li>
<li>
Gato</li>
<li>
Periquito</li>
</ul>

 

Lista ordenada <ol>

 

Para que una lista sea ordenada, sus elementos deberán encontrarse entre las etiquetas <ol> y </ol>.

A través del atributo type es posible elegir el tipo de numeración, que puede ser 1 (números), a (letras minúsculas), A (letras mayúsculas), i (numeros romanos en minúsculas) o I (números romanos en mayúsculas).

Por ejemplo, para insertar la siquiente lista:

  1. Perro
  2. Gato
  3. Periquito

Habría que escribir:

<ol type="i">
<li>
Perro</li>
<li>
Gato</li>
<li>
Periquito</li>
</ol>

 

Anidar listas

 

Es posible anidar listas dentro de otras. Estas listas pueden ser tanto desordenadas como ordenadas.

Por ejemplo, para insertar la siquiente lista:

  1. Lunes
    • Ingles
    • Frances
  2. Martes
    1. Ingles
      1. Correccion de ejercicios
      2. Proponer ejercicios

Habría que escribir:

<ol>
<li>
Lunes
<ul
type="square">
<li>
Ingles</li>
<li>
Frances</li>
</ul>
</li>
<li>
Martes
<ol>
<li>
Ingles</li>
<ol
type="A">
<li>
Correccion de ejercicios</li>
<li>
Proponer ejercicios </li>
</ol>
</li>
</ol>
</li>
</ol>

Empezamos por la lista ordenada (la más externa) <ol>, esta lista tiene dos elementos <li>Lunes y <li>Martes.

El elemento Lunes contiene una lista desordenada con tipo cuadrado <ul type="square"> que tiene dos elementos <li>Ingles</li> y <li>Frances</li>.

El elemento Martes contiene una lista ordenada de un sólo elemento <li>Ingles</li> elemento que contiene a su vez una lista desordenada de tipo letras mayúsculas <ol type="A"> con los dos elementos <li>Correccion de ejercicios</li> y <li>Proponer ejercicios </li>

 

 

   Inicio 


.