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.
- Opción Primera.
- 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>