Taller de Adobe Dreamweaver: Lista

¡Aló, Aló, amiguillos! ¿Como les va? Bienvenidos a otra clase de Adobe Dreamweaver/HTML. ¿La esperaron con ansiedad? Espero que sí. Hoy veremos el uso de listas; cómo son, sus diferentes tipos y las diversas aplicaciones que les podemos dar.

Tal vez lean por ahí (googleando), sobre ciertas propiedades de las listas que acá no nombramos. Estas propiedades no las he explicado porque están desactualizadas. Ya no se usan y pronto desaparecerán del lenguaje HTML como propiedades válidas. ¡Hay que mantenerse siempre actualizados con los estándares!

Partes de una lista

Las diferentes partes de una lista son, el tag o etiqueta que la define, y sus etiquetas contenidas.

Toda lista debe tener al menos un ítem (etiqueta contenida) que es el que realmente se verá en nuestro navegador.

Tipos de lista

Tenemos el tipo de lista UL, que son las listas desordenadas.

Este tipo de listas contiene a etiquetas LI que van a representar cada ítem en su interior.

Las etiquetas UL tienen la característica de que cada uno de sus ítems contenidos están antecedidos por un círculo (este se puede cambiar) que lo va a definir como ítem de lista.

Acá en la imagen, podemos ver los distintos tipos de visualización de listas desordenadas que tenemos: square, circle, y disc; que los podemos setear en el atributo Type de la lista.

Otro tipo de lista son las OL, que son las listas ordenadas.

Estas listas, a diferencia de las anteriores, en vez del círculo, cuadrado o disco, que tienen las UL, van a estar ordenadas por numeración o alfabéticamente.

Es así que tenemos:

Type 1:
Van ordenadas numéricamente de 1 a la cantidad de ítems que tengamos.

Type a:
Van ordenadas alfabéticamente de la “a” a la “z” en minúsculas.

Type A:
Van ordenadas alfabéticamente de la “A” a la “Z” en mayúsculas.

Type i:
Van ordenadas en números romanos (en minúsculas).

Type I:
Van ordenadas en números romanos (en mayúsculas).

Y el tercer tipo de listas, son las listas de definición, DL.

Como podemos ver las DL nos permiten poner una “especie” de título (DT) para el cual daremos una definición (DD).

No tiene mucha ciencia, cada uno le encontrará uso en algún momento (recuerden usar cada tipo de etiqueta según corresponda, que para eso están creadas).

Para qué más sirven las listas

Otro uso muy común que tienen las listas, más allá de hacer una lista de ítems común es, por ejemplo, la de crear menúes o barras de navegación en paginas web (obviamente).

Las listas se pueden anidar unas dentro de otras, entonces, creando una lista principal con diferentes términos y luego en cada uno poniendo otra lista, podríamos generar un menú desplegable (aplicando algunos estilos que veremos más adelante).

Esto se los nombro por arriba, y no lo voy a explicar ahora, porque un menú desplegable con listas, será una de las primeras cosas que hagamos como ejemplo cuando veamos estilos, así que ¡¡¡A despreocuparse, que en algunas clases más tendrán sus menusitos a todo color!!! :p

Otro uso puede ser el de un índice, o un navegador de una página larga mediante anclas (tags <a> ¿Recuerdan? Ya lo vimos).

De todos modos, el uso que le puedan dar a una lista, o a cualquier elemento, esta dado por lo que se les ocurra a ustedes en el momento y, a riesgo de sonar reiterativo, siempre recuerden que si van a usar un elemento para hacer “x” cosa y ya hay uno que está específicamente creado para eso, usen este último en lugar del anterior.

No reinventen elementos por el simple hecho de no querer ver cómo funciona otro o porque les quede más cómodo usar uno que se les ocurra.

Acostúmbrense a trabajar con propiedad que es la mejor manera de ser un buen maquetador de páginas web.

Conclusión

Bueno, hoy vimos que son las listas, sus propiedades, tipos y algunos usos.

Más adelante veremos otros usos más divertidos que los que pusimos recién, pero que requieren de conocimientos que al día de hoy, puede que no tengan.

Traten después de leer esta clase, o durante, o cuando estén aplicando lo que aprendan en ella, de revisar la barra insert de Dw, que ahí tienen “accesos directos” a tipos de listas y sus contenidos (ya lo vimos en clases anteriores).

¡Hasta la próxima!