Listas en HTML
Las listas son unos elementos que nos permiten crear viñetas dentro del documento HTML. Los tipos de listas que tenemos son:
Listas Ordenadas
Las listas ordenadas nos sirven para presentar los elementos numerados de las listas. Para poder llevar esto acabo utilizaremos la etiqueta <OL> lista </OL>. Dentro de la lista, cada ítem de ella ira precedido de la etiqueta <LI>, esto sucederá en todos los tipos de listas.
Un ejemplo seria:
<OL>
<LI> Juan
<LI> Pilar
<LI> Héctor
<LI> Sara
</OL>
El resultado de ese código sería:
- Juan
- Pilar
- Héctor
- Sara
<LH> Nombre de la lista </LH>
Dentro de las listas ordenadas, podemos escoger el tipo de numeración que queremos, podemos elegir entre:
- Letras (a, b, c,...)
- Letras en mayúscula (A, B, C,...)
- Números decimales (1, 2, 3,...)
- Números romanos (i, ii, iii,...)
- Números romanos en mayúscula (I, II, III,...)
<OL TYPE=a>
<LI> Juan
<LI> Pilar
<LI> Héctor
<LI> Sara
</OL>
En pantalla visualizaríamos:
- Juan
- Pilar
- Héctor
- Sara
START = numero, será
el numero en el que empezara la lista.
SKIP = numero, avanzará la lista en
cantidades de numero.
CONTINUE, indíca que continua la lista
en el numero de la anterior lista del documento.
Dentro de cada ítem podemos indicar que haya un salto hasta el
numero x. Esto lo haremos mediante el parámetro: VALUE=numero.
Este comando ira situado detrás de la etiqueta LI.
Veamos el siguiente ejemplo:
<OL TYPE = I START = 2>
<LH> Nombres de personas </LH>
<LI> Pilar
<LI> Héctor
<LI VALUE = 9> Maria
<LI> Víctor
</OL>
El resultado en pantalla sería el siguiente:
- Pilar
- Héctor
- Sara
- Víctor
Listas Desordenadas
Las listas desordenadas nos sirven para presentar los
elementos de la lista en diferentes líneas, antecedidos de un ítem o grafico,
más conocido como viñeta. Para poder llevar esto acabo utilizaremos la etiqueta
<UL> lista </UL>.
Dentro de la lista, cada ítem de ella ira precedido de la etiqueta <LI>,
como vimos anteriormente.
Un ejemplo seria:
<UL>
<LI> F.C. Barcelona
<LI> R. Madrid
<LI> Betis Balompie
<LI> At. Madrid
</UL>
El resultado que saldría por pantalla sería el siguiente:
- F.C. Barcelona
- R. Madrid
- Betis Balompié
- At. Madrid
<LH> Nombre de la lista </LH>
Los ítem que precederán a los elementos de la lista los especificaremos
mediante el parámetro TYPE = tipo situado
detrás de la etiqueta UL.
Los tipos que tenemos dentro de las listas desordenadas son:
- Círculos (circle)
- Discos (disc), al fin y al cabo son círculos rellenos.
- Cuadrados (square)
Un ejemplo de la utilización del tipo seria:
<UL TYPE = square>
<LI> F.C. Barcelona
<LI> R. Madrid
<LI> Betis Balompié
<LI> At. Madrid
</UL>
El resultado del código sería:
- F.C. Barcelona
- R. Madrid
- Betis Balompié
- At. Madrid
<UL>
<LI type = square> F.C. Barcelona
<LI type = disc> R. Madrid
<LI type = circle> Betis Balompié
<LI type = disc> At. Madrid
</UL>
La representación del código sería:
- F.C. Barcelona
- R. Madrid
- Betis Balompié
- At. Madrid
PLAIN, lo que hace es eliminar
el ítem (dibujito) que nos aparece delante de cada nombre de la lista.
COMPACT, reduce el espacio entre los elementos
de la lista.
WRAP = ( horizontal | vertical ), nos permite
disponer de los elementos de forma horizontal o vertical.
Veamos el siguiente ejemplo:
<UL TYPE = square COMPACT>
<LH> Nombres de equipos de
fútbol </LH>
<LI type = circle> F.C. Barcelona
<LI> R. Madrid
<LI> Betis Balompié
<LI type = disc> At. Madrid
</UL>
En pantalla veríamos:
- F.C. Barcelona
- R. Madrid
- Betis Balompié
- At. Madrid
Listas de definiciones
Para poder crear una lista de definiciones usamos la lista <DL>
lista </DL>.
¿Que entendemos por lista de definiciones?. Pues un ejemplo muy claro es el
de un diccionario, por ejemplo nos sirve para hablar de términos y dar su definición.
La estructura de una lista de definición es:
<DL>
<DH> Titulo de la lista </DH>
<DT>Nombre del termino
<DD> Definición del termino
</DL>
Un ejemplo de la utilización de listas de definición sería el siguiente:
<DL>
<DH> Siglas de Organizaciones </DH>
<DT>HP</DL>
<DD> Hewlett Packard
<DT>UVI
<DD> Unidad de Vigilancia Intensiva
<DT>CEE
<DD> Comunidad Económica Europea
Mediante este código visualizaríamos por pantalla:
- HP
- Hewlett Packard
- UVI
- Unidad de Vigilancia Intensiva
- CEE
- Comunidad Económica Europea
<DL COMPACT>
<DH> Siglas de Organizaciones </DH>
<DT>HP
<DD> Hewlett Packard
<DT>UVI
<DD> Unidad de Vigilancia Intensiva
<DT>CEE
<DD> Comunidad Económica Europea
</DL>
Mediante este código visualizaríamos por pantalla:
- HP
- Hewlett Packard
- UVI
- Unidad de Vigilancia Intensiva
- CEE
- Comunidad Económica Europea
Menús
Ciertamente son parecidas a las listas desordenadas, incluso
puede que no lleguemos a percibir la diferencia, aunque los términos aparecen
más compactos. Cada ítem o elemento aparece en una línea diferente.
El código sería como el que sigue:
<MENU>
<LI> Primer elemento
<LI> Segundo elemento
</MENU>
Un ejemplo de su utilización sería:
<MENU>
<LI> Color Rojo
<LI> Color Verde
<LI> Color Magenta
</MENU>
En pantalla veríamos:
Lista de Directorios
La lista de directorio se utiliza para presentar elementos de
más de 20 caracteres cada uno. Los elementos se representan en columnas, normalmente
de 24 caracteres de ancho.
La estructura a seguir es la siguiente:
<DIR>
<LI> Primer elemento
<LI> Segundo elemento
</DIR>
Un ejemplo de utilización sería:
<DIR>
<LI> A-H <LI> I-M
<LI> M-R <LI> S-Z
</DIR>
En pantalla veríamos:
