Las listas

¡Cielos! ¡Llevamos ya siete capítulos de Edición Extremadamente Simple de HTML! Hoy tenemos ante nosotros todo el fascinante mundo de las listas. O sea, nuevas y estimulantes maneras de mostrar la interesantisima información de nuestras peichs al mundo entero. (¿no es emocionante?)

Las listas (hay quién las llama Indices) son uno de los elementos mas usados a la hora de formatear la información porque:

Pues, sin mas dilación, vamos a empezar con esto de las listas. La lista mas elemental es la que no tiene ningún tipo de numeración, solo tiene unas marcas que, en principio, son iguales para todos los elementos de esta (aunque luego veremos como cambiar esto). Esta marca por defecto puede variar según el navegador que uses, aunque, generalmente, es un punto. La lista se construye según la siguiente estructura:

<UL>
<LI> Primer elemento </LI>
<LI> Segundo elemento </LI>
<LI> Tercer elemento </LI>
...
</UL>

Donde <UL></UL> son los tags que acotan a toda la lista y <LI></LI> acotan a cada elemento de esta.

Antes hemos dicho que, en principio, la marca es igual para todos los elementos de la lista, y que esta depende del navegador.
Sin embargo, se puede cambiar esto mediante la opción TYPE=, que puede tomar los valores DISC, CIRCLE o SQUARE, que fuerzan la representación de la marca como un círculo negro, un círculo vacío y un cuadrado respectivamente. ¿que en qué tag se usa esta opción? Pues se puede usar en los dos. Si lo pones en la forma <UL TYPE=CIRCLE>, todos los elementos de la lista serán círculos negros, y si lo haces de la forma <LI TYPE=CIRCLE>, solo se aplicará a ese elemento y a los que le sigan después.

Nota Importante: Lo anterior es el caso teórico e ideal. Por misteriosas razones, Explorer de Microsoft no reconocerá los valores de TYPE= si están escritos en mayuscula, solo si lo están en minuscula. Opera, otro navegador, si los reconoce, pero solo aplica el valor asignado en <LI TYPE= tipo> al elemento en cuestión, y no a los siguientes. Para que veas que no todo es color de rosa en el mundo del HTML

Para ver esto de las listas mas claro, vamos a ver un ejemplillo (Por lo expuesto en la nota anterior, los valores de TYPE= se han puesto en minuscula):

<HTML> <HEAD> <TITLE> EJEMPLO DE LISTA </TITLE> </HEAD> <BODY> <FONT SIZE=+1><B>EJEMPLO DE LISTA</B></FONT> <UL> <LI> Primer elemento </LI> <LI> Segundo elemento </LI> <LI TYPE=square > Elemento con cuadradito </LI> <LI> Sigue habiendo cuadradito (supongo) </LI> <LI> Otro elemento </LI> <LI TYPE=circle> Elemento con círculo vacio</LI> <LI> Último elemento </LI> </UL> </BODY> </HTML>

Si el universo de las listas terminase aquí, yo tendría que trabajar menos para hacer este curso de Edición Extremadamente Simple de HTML, pero la cosa esta de las listas sería poco útil. Pero como aun hay más, yo trabajo y esto sigue.

El siguiente tipo de lista es la lista numerada, se construye casi igual que la anterior, pero con el tag que englo ba a toda la lista distinto:

<OL>
<LI> Primer elemento </LI>
<LI> Segundo elemento </LI>
<LI> Tercer elemento </LI>
...
</OL>

O sea, que solo hemos cambiado el tag <UL></UL> por <OL></OL>. La diferencia con la anterior es que en esta, en lugar de una marca, cada elemento se indica con su número de orden (1 para el primero, 2 para el sgundo, ect). Además, tú no tienes que preocuparte por saber por recordar que número tienes que poner en la línea, eso ya lo hace el navegador.

¿Y si no quieres empezar por el número uno? Pues para eso tienes el atributo START=, que se aplica a <OL> y toma como valor el número por el que quieres empezar a contar. (Si pones <OL START=3>, el primer elemento llevaría el número 3, el segundo el 4 ...ect)

Pero también tenemos opcion TYPE= para esta lista. En este caso puede adoptar los valores 1, i, I, a y A. El valor 1 (que es el que tiene por defecto) hace que la lista se numere como hemos dicho antes (1,2,3,4,5,6...), el valor i hace que se numere en números romanos en minúscula (i,ii,iii,iv,v,vi...) al iguál que hace el valor I, pero en mayúscula (I,II,III,IV,V,VI...), el valor a hace que se marquen los elementos con letras (a,b,c,d,e,f...) y A, como te estás imaginando, hace lo mismo, pero en letras mayúsculas (A,B,C,D,E,F...). El atributo TYPE=, iguál que antes, se puede aplicar tanto a <OL> como a <LI>. (Uses la opción TYPE= que uses, el valor de START= siempre será numérico, o sea, que si quieres una lista numerada por letras minúsculas que empiece por la letra b, deberás poner <OL START=2 TYPE=a> ¿Entendido?)

Otro tipo de lista que puede ser muy útil es la llamada lista de descripciones o de definiciones. Se la llama así porque se asemeja a la disposición de las palabras y sus definiciones en muchos diccionaros (y se suele utilizar para eso). Para que lo veas mas claro, esto de abajo es una lista de definiciones:

Vale, perfecto, muy bonito, pero ¿Como se hace esto? Pues de la siguiente forma:

<DL>
<DT>Primer elemento</DT>
<DD>Primera definición/DD>
<DT>Segudo elemento</DT>
<DD>Segunda definición</DD>
...
</DL>

Como puedes ver, <DL></DL> engloba a toda la lista, <DT></DT> indica cada elemento y <DD></DD> cada definición.

Existen, además, otros dos tipos de listas que, además de tener una apariencia muy variable según el navegador, cada vez se usan menos (de hecho, el W3C las considera como "a extinguir").

La primera es la lista de directorio, en la que elementos deberían ordenarse horizontalmente en líneas, y en tu navegador se ven de esta forma:

<DIR>
<LI>Primer elemento</LI>
<LI>Segundo elemento</LI>
<LI>Tercer elemento</LI>
<LI>Cuarto elemento</LI>
...
</DIR>

Este tipo de lista tiene DOS problemas: El primero es que practicamente ningun navegador la presenta como debiera, si no que la utilizan como si fuera una lista desordenada. Y segundo, que el W3C (Los que dicen como tiene que ser el HTML) la considera "Deprecated", o sea, que están planeando retirarla del estandard del HTML.

En definitiva, que mejor te lo piensas dos veces y no la usas, para eso ya tienes otras formas de lista.

Lo mismo te digo del último tipo de lista, la lista de menu, que se usa de esta forma:

<MENU>
<LI>Primer elemento</LI>
<LI>Segundo elemento</LI>
<LI>Tercer elemento</LI>
...
</MENU>

Y que, a efectos practicos, se representa igual que una lista desordenada. Mejor no la uses.

Bueno, para terminar solo me queda decirte que dentro de una lista (concretamente, dentro de <LI>...<LI> )se puede poner casi cualquier otro elemento de HTML, esto incluye otra lista, lo que te daría una lista "en escalera", experimentalo, verás que las listas se pueden transformar en un elemento crucial en tus paginas Web. Nos vemos en el capítulo 8.

CAPITULO 7(Las listas)

CAPITULO 7
(Las listas)