Programación Web - HTML (IV) - [ LISTAS ]

Listas ordenadas, desordenadas, etc.

En HTML tenemos unas etiquetas que nos permiten definir listas de elementos.
Estas tienen un sin fin de utilidades y muchas veces se las utilizan con anclas, como si fuesen submenues de la misma pagina que se esta viendo, algo así como un cuadro de contenido.

Veamos un ejemplo:

Diferentes tipos de Listas en HTML

Como puede observarse en la imagen existen varios tipos de listas.
La primera se denomina lista sin orden o lista desordenadas, la segunda se denomina lista ordenada y finalmente la tercera se denomina lista de definición.

El código de la primer lista es el siguiente:

Lista Desordenada:

<ul>
   <li>Elemento 1</li> 
   <li>Elemento 2</li> 
   <li>Elemento 3</li>
</ul>  

Como puede verse hay una etiqueta que funciona como grupo que es el <ul> (Unordered List) y dentro cada elemento se determina con un <li> (List Item)

El código de la segunda lista es el siguiente:

Lista Ordenada:


<ol>
   <li>Elemento 1</li> 
   <li>Elemento 2</li> 
   <li>Elemento 3</li>
</ol>  

Como puede verse hay una etiqueta que funciona como grupo que es el <ol> (Ordered List) y dentro cada elemento se determina con un <li> (List Item)
A diferencia de la lista desordenada esta lista posee al lado de cada elemento un numero correlativo que las mantiene ordenadas.


El código de la tercer lista es el siguiente:

Lista de Definición:

<dl>
   <dt>Termino 1</dt>
      <dd>Definicion 1</dd>
   <dt>Termino 2</dt> 
      <dd>Definicion 2</dd>
</dt>  

La lista de definición es utilizada para definir diferentes términos como podría hacerlo un diccionario.
Para utilizarlas primero debemos agruparlas dentro de un <dl> (Definition List). Cada termino a definir va dentro de un <dt> (Definition Term) y a su vez cada descripción va dentro de un <dd> (Definition Description).

Símbolos delante de las Listas


Lo que veremos a continuación ya ha caído en desuso sin embargo como aun no veremos CSS se los explicaré para darle mas estilo a las listas.
Tanto las listas ordenadas <ol> como las listas desordenadas <ul> poseen un atributo llamado "Type" que permiten determinar el símbolo que representará a cada elemento. A continuación veremos unos ejemplos para las listas ordenadas:

Símbolos en Listas Ordenadas

Como puede verse hay distintos tipos de símbolos a continuación veremos los códigos respectivos:

A la etiqueta <ol> debe anexarse el atributo "type" quedando de la siguiente forma:

<ol type="">

Dentro de las comillas ("") debe escribirse el valor que tendrá el atributo a saber:

Para que el orden sea dado por números (1,2,3...) debe usarse el valor "1" [Este es el default, de quererlo no es necesario usar el Type] .
Para que el orden sea dado por letras mayúsculas (A,B,C...) debe usarse el valor "A". 
Para que el orden sea dado por letras minúsculas (a,b,c...) debe usarse el valor "a". 
Para que el orden sea dado por números romanos [en mayúscula] (I,II,III...) debe usarse el valor "I".  
Para que el orden sea dado por números romanos [en minúscula] (i,ii,iii...) debe usarse el valor "i". 

Ejemplos:
Números:                <ol type="1">
Letras Mayúsculas:  <ol type="A">
Letras Minúsculas:   <ol type="a"> 
N. Romanos Mayus: <ol type="I"> 
N. Romanos Minus:  <ol type="i">

Ahora bien, las listas desordenadas también pueden tener sus propios símbolos, veamos un ejemplo visual para luego aprender el código:

Símbolos en Listas Desordenadas

Como se puede ver las listas desordenadas tienen menos valores posibles sin embargo para lo que representan son bastante pintorescos.
Veamos el código en HTML para cada caso:



A la etiqueta <ul> debe anexarse el atributo "type" quedando de la siguiente forma:

<ul type="">

Dentro de las comillas ("") debe escribirse el valor que tendrá el atributo a saber:

Para que los símbolos sean círculos llenos debe usarse el valor "disc" [Este es el default, de quererlo no es necesario usar el Type] .
Para que los símbolos sean cuadrados llenos debe usarse el valor "square". 
Para que los símbolos sean círculos vacíos debe usarse el valor "circle". 


Ejemplos:
Círculos Llenos:       <ul type="disc">
Cuadrados Llenos:  <ul type="square">
Círculos vacíos:       <ul type="circle"> 


Bien hasta aquí llegamos con las listas, continuaremos la próxima entrega con nuevos y viejos temas del universo HTML.