Aula Macedonia


Curso Acelerado de HTML


Artículo realizado por
Fernando Rodríguez.





Capítulo 4.
Presentemos todo más elegantemente: Las Listas.

Hasta ahora, hemos visto lo suficiente como para poder sacar texto de diferente color por pantalla, sin embargo, se echaba en falta, una forma de poder hacer listas ordenadas con las que estructurar nuestra información.
¿Un ejemplo?. Pues muy fácil, imaginar que quereis poner un menú, lógicamente, deberá de tener diferentes opciones, pues bien, gracias a las facilidades que nos ofrecen las listas, podremos mostrar dichas opciones, en pantalla, numeradas, marcadas, etc. ¿Qué no?, pues echar un vistazo al ejemplo que viene a continuación para que os aclareis un poco más acerca de que van las listas que vamos a explicar:

Menú 1.
  1. Opción Primera.
  2. Opción Segunda.
Menú 2.
  • Opción Primera.
  • Opción Segunda.


Cómo podeis ver, las listas nos permiten presentar texto de forma extructurada, siendo muy útiles cuando queremos hacer menús, listar índices, etc. Bien, una vez visto lo que es el concepto de lista, pasamos a materia.

Listas Numeradas.

Este tipo de lista es aquella que tiene sus componentes ordendados por un número indicativo. El ejemplo lo tenemos más arriba, en el Menú1. Con este tipo de lista, podemos hacer que el navegador vaya generando los números de los elementos que componen dicha lista, por nosotros. Esto nos puede ahorrar, en muchos casos, bastante tiempo.
Para poder llevar a cabo la implementación de dicha lista, deberemos de utilizar la directiva <OL> con su correspondiente </OL>, ahora bien, dentro de dicha directiva, deberemos de poner el texto a listar, pero este, ha de ir encerrado en otra directiva, que es <LI>, esto es, <LI> elemento de la lista </LI>. Cómo lo mejor es ver esto con un ejemplo, os voy a poner el código necesario para generar una lista igual a la generada para el Menú 1 (ejemplo de arriba).

Menú 1.
<OL>
<LI> Opción Primera </LI>
<LI> Opción Segunda </LI>
</OL>


Como podeis ver, este tipo de listas no tienen ningún misterio. Bueno, para ser sinceros, sí tienen un secretito, y es que si despues de la instrucción <OL> poneis type igualado a un tipo de caracter de comienzo, la lista, en lugar de mostrar números, mostrará los componentes ordenados en función del caracter insertado. Así, si queremos que salga ordenada, nuestra lista, por las letras del abecedario pondríamos <OL type=a>, el resto sería igual.
Como nota curiosa, si quereis sacar los listados en números romanos, no teneis más que poner <OL type=I>.

Listas Marcadas.

Bien, este tipo de lista es idéntico al anterior, salvo que en lugar de ir poniendo los componentes de la lista con un identificador de ordenación, simplemente ponemos una marca, un punto. Como podeis observar más arriba, el Menu 2, es una lista de este tipo. El código necesario para generar este tipo de lista, sería igual que el del anterior, salvo que la directiva <OL> cambia a <UL>.
Lo mejor será que ponga el código necesario para generar la lista del ejemplo del Menú 2, ahí va:

Menú 1.
<UL>
<LI> Opción Primera </LI>
<LI> Opción Segunda </LI>
</UL>

Creo que sobran más explicaciones. ¡A por el siguiente tipo de lista!

Listas de Definiciones.

Este tipo de lista nos va a permitir, generar estupendos formatos de texto en donde poner una explicación, una definción o similares. Sin ir más lejos son las que utilizamos para poner las explicaciones en la sección de "Bájate algo interesante". Para que no te confundas, lo mejor será que veas un ejemplo de una lista de este tipo y después te explico cómo hacer ese mismo ejemplo, ¿ok?, pues vamos:

Encabezamiento1
Toooodo el texto que nos habla acerca del encabezamiento. Como puedes observar, ¡es genial para hacer comentarios breves, definiciones y similares!
Encabezamiento2
Bueno, pues aquí tenemos otro título más.

Bueno, ¿Convencido de que puede sernos de utilidad en el futuro?, bien, pues vamos a ver como narices se hace eso.
La implementación de este tipo de listas es prácticamente igual que las dos anteriores. Aquí también necesitamos una directiva general al estilo de <OL> y <UL>, esta directiva va a ser <DL> y su correspondiente </DL>. Como ya habrás adivinado, dentro deberá de ir el cuerpo, al igual que en las dos listas ya vistas, sin embargo, aquí deberemos de definir, para un elemento, dos cuerpo distintos, uno para poner el texto que va en la zona del encabezamiento y otro para poner texto que acompañara a dicho encabezamiento.
El encabezamiento se codifica con <DT> Encabezamiento </DT> y el texto que lo define con <DD> texto </DD>. Lógicamente primero irá <DT> y despues <DD>.
Bueno, mejor vamos a ver el código del ejemplo.

<DL>
<DT>Encabezamiento1</DT>
<DD>Toooodo el texto que nos habla acerca del encabezamiento.
Como puedes observar, ¡es genial para hacer comentarios breves,
definiciones y similares!</DD>
<DT>Encabezamiento2</DT>
<DD>Bueno, pues aquí tenemos otro título más.</DD>
</DL>




AULA MACEDONIA
a
MACEDONIA Magazine