Tema 6tos. años "Listas en HTML"

Listas en HTML

Listas desordenadas.

Las listas originalmente están pensadas para citar, numerar y definir cosas a través de características. Se utilizan para mucho más que enumerar una serie de puntos, en realidad son un recurso muy interesante para poder maquetar elementos diversos.

Son delimitadas por las etiquetas <ul> y </ul> (unordered list). Cada uno de los elementos de la lista es citado por medio de una etiqueta <li> (sin cierre, aunque no hay inconveniente en colocarlo). La cosa queda así:

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

<ul>

            <li>México

            <li>Argentina

            <li>Canadá

</ul>

El resultado:

Países del mundo

México

Argentina

Canadá

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 le 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

§ square

೦ disc

Ejemplo:

<ul type="square">

<li>Elemento 1

<li>Elemento 2

<li>Elemento 3

<li type="circle">Elemento 4

</ul>

Listas ordenadas

Las listas ordenadas sirven también para presentar información, en diversos elementos o items, con la particularidad que éstos estarán predecidos de un número o una letra para enumerarlos, siempre por un orden.

Para realizar las listas ordenadas usaremos las etiquetas <ol> (ordered list) y su cierre. Cada elemento será igualmente indicado por la etiqueta <li>, que ya vimos en las listas desordenadas.

Pongamos un ejemplo:

<p>Reglas para lograr el éxito</p>

<ol>

<li>Mente abierta

<li>Corazón humilde

</ol>

El resultado es:

Reglas de comportamiento en el trabajo

Mente abierta

Corazón humilde

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

Puede que en algún caso deseemos comenzar nuestra enumeración por un número o letra que no tiene por qué ser necesariamente el primero de todos.

Para solventar esta situación, podemos utilizar un segundo atributo, start, que tendra como valor un número. Este número, que por defecto es 1, corresponde al valor a partir del cual comenzamos a definir nuestra lista.

Para el caso de las letras o los números romanos, el navegador se encarga de hacer la traducción del número a la letra correspondiente.

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>