Listas en HTML

Listas Ordenadas: OL

También  llamadas  listas  numeradas  son  aquellas  en  las  que  cada  elemento  tiene  delante  un número que indica el orden del elemento dentro del conjunto de la lista.

La marca para crear una lista ordenada es <OL>.... </OL>. Son obligatorias las etiquetas de comienzo y fin de estas marcas.

Cada  elemento  de  la  lista  ordenada  se  identifica  escribiéndolo  dentro  de  la  marca  <LI>  ....</LI>.

Con la marca LI no es necesario introducir un retorno de carro detrás de cada elemento de la lista.

Es  posible  especificar  el  tipo  de  numeración  que  se  dará  (números  arábigos,  números romanos, letras, etc.), por defecto se sigue la numeración árabe.

Pongamos un ejemplo:

<p>Reglas de comportamiento en el trabajo</p>

<ol>

<li>El jefe siempre tiene la razón

<li>En caso de duda aplicar regla 1

</ol>

El resultado es:

1.El jefe siempre tiene la razón

2.En caso de duda aplicar la regla 1

Del mismo modo que para las listas desordenadas, las listas ordenadas ofrecen la posibilidad de modificar el estilo. En concreto nos es posible especificar el tipo de numeración empleado eligiendo entre números (1, 2, 3...), letras (a, b, c...) y sus mayúsculas (A, B, C,...) y números romanos en sus versiones mayúsculas (I, II, III,...) y minúsculas (i, ii, iii,...).

Para realizar dicha selección hemos de utilizar, como para el caso precedente, el atributo type, el cual será situado dentro de la etiqueta OL. Los valores que puede tomar el atributo en este caso son: 

 1 Para ordenar por números

a Por letras del alfabeto

A Por letras mayúsculas del alfabeto

 i Ordenación por números romanos en minúsculas

 I Ordenación por números romanos en mayúsculas

Ejemplo usando este tipo de atributos:

<p>Ordenamos por números</p>

<ol type="1">

<li>Elemento 1

<li> Elemento 2

</ol>

<p>Ordenamos por letras</p>

<ol type="a">

<li>Elemento a

<li> Elemento b

</ol>

<p>Ordenamos por números romanos empezando por el 10</p>

<ol type="i" start="10">

<li>Elemento x

<li> Elemento xi

</ol>

El resultado: 

Listas desordenadas: UL

También llamadas listas no numeradas son listas en las que no es necesario numerar de alguna manera los elementos que la componen, sino que cada elemento tiene delante un símbolo (un punto, un cuadrado, etc...). La forma de especificar una lista desordenada es mediante la marca <UL>. Las etiquetas de comienzo y fin de esta marca son obligatorias.

Cada elemento de la lista se identifica mediante la marca <LI>. La etiqueta de fin para la marca <LI> se puede omitir

También es posible en las listas desordenadas especificar el símbolo que va a aparecer delante de cada elemento de la lista.

Las listas desordenadas también pueden ser anidadas una dentro de otra.

Ejemplo:

<p>Países del mundo</p>

<ul>

               <li>Argentina</li>

               <li>Perú</li>

               <li>Chile</li>

</ul>

El resultado:

Países del mundo

·         Argentina

·         Perú

·         Chile

Podemos definir el tipo de viñeta empleada para cada elemento. Para ello debemos especificarlo por medio del atributo type incluido dentro de la etiqueta de apertura UL, si queremos que el estilo sea válido para toda la lista o dentro de la etiqueta LI si queremos hacerlo específico de un solo elemento. La sintaxis es del siguiente tipo: 

<ul type="tipo de viñeta">

Donde tipo de viñeta puede ser uno de los siguientes:

• circle
• disc
• square

Vamos a ver un ejemplo de lista con un cuadrado en lugar de un redondel, y en el último elemento colocaremos un círculo. Para ello vamos a colocar el atributo type en la etiqueta UL, con lo que afectará a todos los elementos de la lista. 

           <ul type="square"> 

<li>Elemento 1

<li>Elemento 2

<li>Elemento 3

<li type="circle">Elemento 4

</ul>

Que tiene como resultado: 

Listas de definición: DL

A diferencia de los dos tipos anteriores de listas, las listas de definición, se utilizan para presentar la información sin marcas, números, sino que utiliza los sangrados de los párrafos.

Las listas de definición están constituidas por términos y su subsiguiente definición.

La forma de implementar las listas de definición es con la marca <DL> de la siguiente forma:

<DL>

<DT> Nombre del termino

<DD> Definición del término

</DL>

Cada término de la lista de definición se indica con la marca <DT> y no sangrará, mientras que la descripción del término se indica con la marca <DD> y sangrará hacia la derecha para resaltarla del término.

Antes y después de la descripción de cada palabra clave, las listas de definición incorporan un retorno de carro.

Las listas de definición también pueden anidarse.

Ejemplo:

<p>Diccionario de la Real Academia</p>

<dl>

               <dt>Brujula

               <dd>Señórula montada en una escóbula

               <dt>Oreja

               <dd>Sesenta minutejos

</dl>

Efecto producido:

Anidando listas

Nada nos impide utilizar todas estas etiquetas de forma anidada como hemos visto en otros casos. De esta forma, podemos conseguir listas mixtas como por ejemplo:

<p>Ciudades del mundo</p> 

<ul> 

               <li>Argentina 

               <ol> 

               <li>Buenos Aires 

               <li>Bariloche 

               </ol> 

               <li>Uruguay 

               <ol> 

               <li>Montevideo 

               <li>Punta del Este 

        </ol> 

</ul>

De esta forma creamos una lista como esta: