Elementos HTML II

Las Listas

En HTML es posible representar elementos en forma de listas donde se podrán incluir cualquiera de los elementos HTML e incluso listas anidadas, es decir, listas dentro de listas. El uso de listas es muy sencillo y cuenta con una gran versatilidad. El lenguaje HTML nos permite crear tres tipos distintos de listas:

• Listas no numeradas
• Listas numeradas
• Listas de definiciones

Lista no numeradas: <UL> {UL: Unordered List}

Como el nombre indica, este tipo de listas permite especificar una serie de elementos sin un orden predeterminado, precedidos de una marca o viñeta que nosotros mismos podemos definir. Para la definición de los límites de la lista utilizaremos las etiquetas <UL>.... </UL>, y para determinar cada uno de los elementos que la componen usaremos la etiqueta <LI>.

El formato de la lista no enumerada es el siguiente:

<UL type="disk">
<LH>Título de la lista</LH>
        <LI>Primer elemento
        <LI>Segundo elemento
    <LI>Tercer elemento
</UL>

El atributo type se utiliza para especificar el tipo de viñeta que precederá cada elemento de la lista y puede ser: “disk” (disco), “circle” (círculo) ó “square” (cuadrado).

Listas numeradas: <OL> {OL: Ordered List}

Tipo de listas utilizadas cuando queremos especificar una serie de elementos numerados según el orden que aparecen en la lista. Los límites de este tipo de listas son representados por las etiquetas <OL>.... </OL>.

El formato de la lista numerada es el siguiente:

<OL>
<LH>Título de la lista</LH>
        <LI>Primer elemento
        <LI>Segundo elemento
     <LI>Tercer elemento
</OL>

La lista numerada cuenta con el atributo start para poder indicar el número con que va a empezar la lista, si este es diferente de 1. El atributo type se utiliza para especificar el tipo de numeración de la lista. Lo valores posibles para type son:


A: Letras mayúsculas (A, B, C, ...)
a: Letras minúsculas (a, b, c, ...)
I: Números romanos en mayúsculas (I, II, III, IV, ...)
i: Números romanos en minúsculas (i, ii, iii, iv, ...)
1: Numéricamente (1, 2, 3, 4, ....) (Esta es la numeración por defecto y no es necesario indicarla)

Listas de definición: <DL> {DL: Definition List}

Son listas que nos permite describir una serie de términos y con sus respectivas definiciones. Para este tipo de listas se utiliza la etiqueta <DL>.... </DL> para enmarcar su inicio y fin. Para especificar los términos utilizamos la etiqueta <DT> y para especificar las definiciones que les corresponde a cada término utilizamos la etiqueta <DD>.

El formato de la lista de definición es el siguiente:

<DL>
<LH>Título de la lista</LH>
     <DT>Término 1
     <DD>Definición 1
     <DT>Término 2
     <DD>Definición 2
     <DT>Término n
     <DD>Definición n
</DL>

Ejemplos de Listas

Ahora veamos algunos ejemplos de listas en acción:

<ul type="circle"> <lh><b>Redes Sociales:</b></lh> <li>Facebook <li>Google+ <li>Twitter </ul>	Redes Sociales: Facebook Google+ Twitter
<ol type="a"> <lh>Contenido CMS</lh> <li>Joomla <li>Wordpress <li>TYPO3 </ol>	Contenido CMS Joomla Wordpress TYPO3
<lh>Abreviaturas y Significado:</lh> <dt>HTML <dd>HyperText Markup Language <dt>CSS <dd>Cascading Style Sheets </dl>	Abreviaturas y Significado: HTML HyperText Markup Language CSS Cascading Style Sheets
<ol> <lh>Bebidas:</lh> <li>Café <li>Té <li>Jugo <ul type="square"> <li>Narajan <li>Piña <li>Limón </ul> <li>Leche </ol>	Bebidas: Café Té Jugo Naranja Piña Limón Leche