Las listas se definen de forma muy sencilla: se dice dónde empieza la lista, dónde empieza cada linea y dónde acaba la lista. Los etiquetas usadas en cada término deben estar al principio de la línea.
El elemento LI indenta el párrafo y es un elemento de bloque, siempre comienza en una nueva línea y ocupa todo el ancho disponible, es decir se extiende hacia la izquierda y la derecha hasta donde puede.
HTML soporta varios tipos de listas que pueden ser anidados unos con otras y deben estar en el cuerpo BODY del documento.
Se trata de una lista numerada, en orden de importancia. Cada elemento se define con una etiqueta LI (List Item).
<OL> <LI>Click en el botón URL. <LI>Escribe la dirección que quieres ver. <LI>Enter para ver la página Web. </OL>
Ordena la lista en forma compacta.
<OL COMPACT> <LI>Primer elemento de la lista <LI>Segundo elemento de la lista <LI>Tercer elemento de la lista </OL>
Ya no tiene ningún efecto en la mayoría de navegadores.
Define el tipo de identificador de los elementos de la lista.
| Valor | Resultado |
|---|---|
| 1 | 1, 2, 3 ... (por omisión) |
| A | A, B, C ... |
| a | a, b, c ... |
| I | I, II, III ... |
| i | i, ii, iii ... |
En CSS debes usar list-style-type: upper-roman; para obtener mismo efecto. Otros valores: none|decimal|decimal-leading-zero|lower-roman|upper-roman|lower-greek|lower-latin|upper-latin|armenian|georgian|lower-alpha|upper-alpha|inherit
<OL TYPE=a> <LI>Primer elemento de la lista <LI>Segundo elemento de la lista <LI>Tercer elemento de la lista </OL>
Indica en qué valor empezará la lista según TYPE.
<OL START=5> <OL START=E> <OL START=IV>
Indica en qué valor especifico de un elemento según TYPE. Afecta al elemento actual y posteriores.
<OL> <LI>Primero <LI VALUE=4>Segundo <LI>Tercero </OL>
Este etiqueta es usado para definir una lista de términos, cada uno precedido por una marca (bullet). Cada elemento de la lista empieza con la etiqueta LI (List Item)
<UL> <LI>Primer elemento de la lista <LI>Segundo elemento de la lista <LI>Tercer elemento de la lista </UL>
Ordena la lista en forma compacta.
<UL COMPACT> <LI>Primer elemento de la lista <LI>Segundo elemento de la lista <LI>Tercer elemento de la lista </UL>
Ya no tiene ningún efecto en la mayoría de navegadores.
Define el tipo de identificador de los elementos de la lista.
| Valor | Resultado |
|---|---|
| disc | disco (por omisión) |
| circle | circulo |
| square | cuadrado |
En CSS debes usar list-style-type: square; para obtener mismo efecto. Otros valores: none|disc|circle|square|inherit
<OL TYPE=a> <LI>Primer elemento de la lista <LI>Segundo elemento de la lista <LI>Tercer elemento de la lista </OL>
Se trata de una lista de términos a los que se les adjunta su definición. Con <DT> se pone el término a definir y con <DD> la definición del término.
<DL> <DT>WWW<DD>Word Wide Web <DT>SGML<DD>Standard Generalized Markup Language. <DT>HTML<DD>Hypertext Markup Language. <DT>URL<DD>Uniform Resource Locator. <DT>URI<DD>Uniform Resource Identifier. <DT>MIME<DD>Multipurpose Internet Mail Extensions <DT>BROWSER<DD>Herramienta usada para visualizar documentos HTML. </DL>
Ordena la lista en forma compacta.
<DL COMPACT> <DT>Primer<DD>elemento de la lista <DT>Segundo<DD>elemento de la lista <DT>Tercer<DD>elemento de la lista </DL>
Ya no tiene ningún efecto en la mayoría de navegadores.
<OL> <LI>Primero - primero <OL TYPE=a> <LI>Primero - segundo <OL TYPE=i> <LI>Primero - tercero <LI>Segundo - tercero <LI>Tercero - tercero </OL> <LI>Segundo - segundo <LI>Tercero - segundo </OL> <LI>Segundo - primero <LI>Tercero - primero </OL>
Así se ve una lista numerada anidada...
<UL> <LI>Frutas <UL> <LI>Rojas <UL> <LI>Fresa <LI>Cereza </UL> <LI>Verdes <UL> <LI>Tuna <LI>Uva </UL> <LI>Amarillas <UL> <LI>Mango <LI>Limón </UL> </UL> <LI>Verduras <UL> <LI>Rojas <UL> <LI>Tomates <LI>Rabanos </UL> <LI>Blancos <UL> <LI>Nabos <LI>Coliflor </UL> <LI>Amarillas <UL> <LI>Paprika <LI>Zapallo </UL> </UL> </UL>
Así se ven las listas no numerada anidadas...
Es importante notar que en el caso del elemento UL los tipos de marcacion de elemento varian segun anidacion de forma automatica.
<DL> <DT>Perro<DD>Animal de cuatro patas que ladra. <DT>Gato<DD>Animal de cuatro patas que maúlla y se lleva muy mal con el perro. <DT>Pájaro<DD>Animal que vuela, está recubierto de plumas y le gusta comer al gato. </DL>
Así se ve un glosario...
<DL> <DD>Manzana <DD>Plátano <DD>Uva </DL>
Así se ve el truco...