11 LISTAS EN EL LENGUAJE HTML

LISTAS EN EL LENGUAJE HTML

  
En muchas ocasiones nos puede interesar disponer de una lista de
elementos en una página web, para mostrar contenidos de forma 
ordenada. En HTML existen 3 tipos de listas:

*Lista no numerada: Son una sucesión de elementos o ítems sin
enumerar para ello utilizaremos la etiqueta <ul> y su cierre </ul>
para indicar el comienzo y fin de la lista no ordenada (Unordered
List). Dicha etiqueta encerrará los diferentes elementos (List ítem)
indicados por la etiqueta <li> y su cierre </li>

Podemos usar el atributo type para indicar el símbolo a emplear para
cada elemento, sus posibles valores son "circle" ,"disc"
(valor por defecto),  o "square":

<ul type="circle">
<li>Disco duro</li>
<li>Memoria</li>
</ul>

Aquí abajo veremos como se muestra las etiquetas y atributos.

• Disco duro
• Memoria

Lista numerada: Son una sucesión de elementos o ítems enumerados. Utilizaremos la etiqueta <ol> y su cierre </ol> para indicar el comienzo y fin de la lista ordenada (Ordered List). Dicha etiqueta encerrará sus diferentes elementos (List Ítem) indicados por la etiqueta 
<li> y su cierre </li>
 <ol type”A”> 
<li>Disco duro</li> 
<li>Memoria RAM</li>
 <li>Pantalla</li> 

Aquí abajo veremos como se muestra las etiquetas y atributos.

1. Disco duro

• Memoria RAM

• Pantalla

Al igual que las listas no numeradas, admiten el atributo type para indicar el tipo de numeración utilizada, siendo los posibles valores: -“A” para utilizar letras mayúsculas. -“a” para letras minúsculas. -“I” para números romanos en mayúscula -“i” para números romanos en minúscula. -“1” para números árabes. (valor por defecto) Se puede modificar el número con el que comenzará la lista numerada a través de su atributo Start e incluso modificarlo en mitad de la lista con el atributo value. 
<ol start=”3″> <li>Disco duro</li> <li>Memoria RAM </li> <li value=”20″>Pantalla</li> <li>Teclado</li> <li>Tarjeta de red</li> </ol>

 Aquí abajo veremos como se muestra las etiquetas y atributos.

3. Disco duro

• Memoria RAM

• Pantalla

• Teclado

• Tarjeta de red

Lista de definiciones: Se utilizan para mostrar una sucesión de definiciones (normalmente en diccionarios web o textos legales). Para ello se utilizan las siguientes etiquetas: <dl> y </dl> : Indica el comienzo y fin de la lista de definiciones <dt> y </dt> : Encierra el término que se va a definir (normalmente suele destacarse tabulando la definición) <dd> y </dd> : Encierra a la definición. 
<dl> <dt>Casa:</dt> <dd>Construcción con el fin de ser habitada.</dd> <dt>Edificio:</dt> <dd> 

Aquí abajo veremos como se muestra las etiquetas y atributos.

Casa:

           Construcción con el fin de ser habitada.

Edificio:

Construcción en varios niveles de altura.

Las listas pueden anidarse, para ello basta con introducir una etiqueta de lista dentro de una etiqueta  

	<ol type="A">
	<li>Dispositivos Magnéticos:
	<ul type="square">
	<ul type="square">
	<li>Disco Duro</li>
	</ul>
	</ul>
	<p>&nbsp;</li>
	<li>Disquete</li>
	</ol>
	</ol>
	<ul>
	<li>Dispositivos Ópticos
	<ul type="circle">
	<ul type="circle">
	<li>CD-ROM</li>
	</ul>
	</ul>
	<p>&nbsp;</li>
	<li>DVD</li>
	</ul>

Aquí abajo veremos como se muestra las etiquetas y atributos.

1. Dispositivos Magnéticos:
   • Disco Duro
2. Disquette

• Dispositivos Ópticos
  • CD-ROM
• DVD