Você está na página 1de 12

HTML ofrece a los autores varios mecanismos para especificar listas de informacin.

Todas las listas


deben contener uno o ms objetos de lista. Las listas pueden contener:

Informacin no ordenada.
Informacin ordenada.
Definiciones.
La lista anterior, por ejemplo, es una lista no ordenada, creada con el elemento UL:

<UL>
<LI>Informacin no ordenada.
<LI>Informacin ordenada.
<LI>Definiciones.
</UL>
Una lista ordenada, creada por medio del elemento OL, debera contener informacin para la cual debe
ponerse nfasis en el orden, como en una receta de cocina:

Mezcle los ingredientes secos ntimamente.
Vierta los ingredientes lquidos.
Remueva durante 10 minutos.
Hornee durante una hora a 300 grados.
Las listas de definiciones, creadas por medio del elemento DL, consisten generalmente en una serie de
parejas trmino/definicin (si bien las listas de definiciones pueden tener otras aplicaciones). Por
ejemplo, se podra usar una lista de definiciones en la publicidad de un producto:

Menor coste
La nueva versin de este producto cuesta mucho menos que la versin anterior!
Ms fcil de usar
Hemos cambiado el producto para que sea mucho ms fcil de usar!
Seguro para los nios
Puede dejar a sus hijos solos en una habitacin con este producto y no se harn dao (no lo
garantizamos).
Esto se define en HTML como sigue:

<DL>
<DT><STRONG>Menor coste</STRONG>
<DD>La nueva versin de este producto cuesta mucho menos que la versin anterior!
<DT><STRONG>Ms fcil de usar</STRONG>
<DD>Hemos cambiado el producto para que sea mucho ms fcil de usar!
<DT><STRONG>Seguro para los nios</STRONG>
<DD>Puede dejar a sus hijos solos en una habitacin con este producto
y no se harn dao (no lo garantizamos).
</DL>
Las listas pueden adems estar anidadas, pudiendo usarse al mismo tiempo tipos diferentes de listas,
como en el ejemplo siguiente, que es una lista de definiciones que contiene una lista no ordenada (los
ingredientes) y una lista ordenada (los pasos a seguir):

Ingredientes:
100 g de harina
10 g de azcar
1 taza de agua
2 huevos
sal, pimienta
Pasos a seguir:
Mezcle los ingredientes secos ntimamente.
Vierta los ingredientes lquidos.
Remueva durante 10 minutos.
Hornear durante una hora a 300 grados.
Notas:
Puede aadir uvas para mejorar la receta.
La presentacin exacta de los tres tipos de listas depende del agente de usuario. Desaconsejamos a los
autores el uso de listas nicamente con el fin de dar sangra al texto. ste es un aspecto estilstico que se
se resuelve apropiadamente con hojas de estilo.

10.2 Listas no ordenadas (UL), listas ordenadas (OL) y objetos de lista (LI)

<!ELEMENT UL - - (LI)+ -- lista no ordenada -->
<!ATTLIST UL
%attrs; -- %coreattrs, %i18n, %events --
>
<!ELEMENT OL - - (LI)+ -- lista ordenada -->
<!ATTLIST OL
%attrs; -- %coreattrs, %i18n, %events --
>
Etiqueta inicial: obligatoria, Etiqueta final: obligatoria

<!ELEMENT LI - O (%flow;)* -- objeto de lista -->
<!ATTLIST LI
%attrs; -- %coreattrs, %i18n, %events --
>
Etiqueta inicial: obligatoria, Etiqueta final: opcional

Definiciones de atributos

type = informacin de estilo [CI]
Desaprobado. Este atributo especifica el estilo de un objeto de lista. Los valores disponibles son para los
agentes de usuario visuales. Los valores posibles se describen ms abajo (junto con la informacin sobre
las diferencias entre maysculas y minsculas).
start = number [CN]
Desaprobado. Slo para OL. Este atributo especifica el nmero del primer objeto de una lista ordenada.
El nmero inicial por defecto es el "1". Obsrvese que si bien el valor de este atributo es un entero, el
rtulo correspondiente puede no ser numrico. As, por ejemplo, cuando el estilo de objeto de lista es
de letras latinas maysculas (A, B, C, ...), start=3 significa "C". Cuando el estilo es de numerales romanos
en minsculas, start=3 significa "iii", etc.
value = number [CN]
Desaprobado. Slo para LI. Este atributo establece el nmero del objeto de lista actual. Obsrvese que si
bien el valor de este atributo es un entero, el rtulo correspondiente puede no ser numrico (vase el
atributo start).
compact [CI]
Desaprobado. Si est establecido, este atributo booleano indica a los agentes de usuario visuales que
representen la lista de un modo ms compacto. La interpretacin de este atributo depende del agente
de usuario.
Atributos definidos en otros lugares

id, class (identificadores a nivel de documento)
lang (informacin sobre el idioma), dir (direccin del texto)
title (ttulo del elemento)
style (informacin de estilo en lnea)
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout,
onkeypress, onkeydown, onkeyup (eventos intrnsecos)
Las listas ordenadas y las no ordenadas se representan de idntica manera, excepto en que los agentes
de usuario visuales numeran los objetos de las listas ordenadas. Los agentes de usuario pueden
presentar estos nmeros de diferentes formas. Las listas no ordenadas no se numeran.

Ambos tipos de lista se componen de secuencias de objetos de lista definidos por el elemento LI (cuya
etiqueta final puede omitirse).

Este ejemplo ilustra la estructura bsica de una lista.

<UL>
<LI> ... primer objeto de lista...
<LI> ... segundo objeto de lista...
...
</UL>
Las listas pueden adems estar anidadas:

EJEMPLO DESAPROBADO:
<UL>
<LI> ... Nivel uno, nmero uno...
<OL>
<LI> ... Nivel dos, nmero uno...
<LI> ... Nivel dos, nmero dos...
<OL start="10">
<LI> ... Nivel tres, nmero uno...
</OL>
<LI> ... Nivel dos, nmero tres...
</OL>
<LI> ... Nivel uno, nmero dos...
</UL>
Detalles sobre el orden de los nmeros. En las listas ordenadas, no es posible reanudar
automticamente la numeracin de una lista donde acab una lista anterior, as como tampoco ocultar
la numeracin para un objeto de la lista. Sin embargo, los autores pueden inicializar el nmero de un
objeto de la lista estableciendo su atributo value. La numeracin de los objetos de lista subsiguientes
contina a partir del nuevo valor. Por ejemplo:

<ol>
<li value="30"> hace que ste sea el objeto de lista nmero 30.
<li value="40"> hace que ste sea el objeto de lista nmero 40.
<li> hace que ste sea el objeto de lista nmero 41.
</ol>
10.3 Listas de definiciones: los elementos DL, DT y DD

<!-- listas de definiciones - DT para el trmino, DD para su definicin -->

<!ELEMENT DL - - (DT|DD)+ -- lista de definiciones -->
<!ATTLIST DL
%attrs; -- %coreattrs, %i18n, %events --
>
Etiqueta inicial: obligatoria, Etiqueta final: obligatoria

<!ELEMENT DT - O (%inline;)* -- trmino definido -->
<!ELEMENT DD - O (%flow;)* -- descripcin de la definicin -->
<!ATTLIST (DT|DD)
%attrs; -- %coreattrs, %i18n, %events --
>
Etiqueta inicial: obligatoria, Etiqueta final: opcional

Atributos definidos en otros lugares

id, class (identificadores a nivel de documento)
lang (informacin sobre el idioma), dir (direccin del texto)
title (ttulo del elemento)
style (informacin de estilo en lnea)
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout,
onkeypress, onkeydown, onkeyup (eventos intrnsecos)
Las listas de definiciones slo difieren levemente de los otros tipos de listas, en que los objetos de lista
consisten en dos partes: un trmino y una descripcin. El trmino viene dado por el elemento DT y est
restringido a contenido en lnea. La descripcin viene dada por un elemento DD que contiene contenido
en bloque.

Aqu tenemos un ejemplo:


<DL>
<DT>Dweeb
<DD>persona joven y excitable que puede madurar y convertirse
en un <EM>Nerd</EM> o en un <EM>Geek</EM>

<DT>Hacker
<DD>un programador inteligente

<DT>Nerd
<DD>tcnicamente brillante pero socialmente intil

</DL>
Aqu tenemos un ejemplo con trminos y definiciones mltiples:

<DL>
<DT>Center
<DT>Centre
<DD> A point equidistant from all points
on the surface of a sphere.
<DD> In some field sports, the player who
holds the middle position on the field, court,
or forward line.
</DL>
Otra aplicacin de DL es, por ejemplo, dar formato a un dilogo, de modo que cada DT identifica al
hablante, y cada DD contiene sus palabras.

10.3.1 Representacin visual de las listas

Nota. Lo que sigue es una descripcin informativa del comportamiento de algunos agentes de usuario
visuales al dar formato a las listas. Las hojas de estilo permiten un mejor control sobre formato de las
listas (p.ej., su numeracin, convenciones dependientes del idioma, sangras, etc.).

Los agentes de usuario visuales suelen sangrar la listas anidadas segn su nivel de anidamiento.

Tanto para OL como para UL, el atributo type especifica las opciones de representacin para los agentes
de usuario visuales.

Para el elemento UL, los valores posibles del atributo type son disc (disco), square (cuadrado), y circle
(crculo). El valor por defecto depende del nivel de anidamiento de la lista actual. Estos valores no
distinguen entre maysculas y minsculas.

El modo en que se presenta cada valor depende del agente de usuario. Los agentes de usuario deberan
intentar presentar un "disc" como un pequeo crculo relleno, un "circle" como un pequeo crculo
vaco, y un "square" como un pequeo cuadrado vaco.

Un agente de usuario grfico podra hacer las siguientes representaciones:

Una posible representacin de un discopara el valor "disc"
Una posible representacin de un crculopara el valor "circle"
Una posible representacin de un cuadradopara el valor "square"

Para el elemento OL, los valores posibles del atributo type se resumen en la siguiente tabla (la diferencia
entre maysculas y minsculas es importante):

Tipo Estilo de numeracin
1 nmeros arbigos 1, 2, 3, ...
a alfabtica en minsculas a, b, c, ...
A alfabtica en maysculas A, B, C, ...
i nmeros romanos en minsculas i, ii, iii, ...
I nmeros romanos en maysculas I, II, III, ...
Obsrvese que el atributo type est desaprobado y que los estilos de las listas deberan especificarse
mediante hojas de estilo.

Por ejemplo, usando CSS se puede especificar que el estilo de los nmeros de los objetos de lista de una
lista numerada debera ser numerales romanos en minsculas. En el extracto de a continuacin, todos
los elementos OL que pertenezcan a la clase "conromanos" tendrn numerales romanos delante de los
objetos de la lista.

<STYLE type="text/css">
OL.conromanos { list-style-type: lower-roman }
</STYLE>
<BODY>
<OL class="conromanos">
<LI> Paso uno ...
<LI> Paso dos ...
</OL>
</BODY>
La representacin de una lista de definiciones tambin depende del agente de usuario. El ejemplo:

<DL>
<DT>Dweeb
<DD>persona joven y excitable que puede madurar y convertirse
en un <EM>Nerd</EM> o un <EM>Geek</EM>

<DT>Hacker
<DD>un programador inteligente

<DT>Nerd
<DD>tcnicamente brillante pero socialmente intil
</DL>
podra representarse como sigue:

Dweeb
persona joven y excitable que puede madurar y convertirse en un Nerd o un Geek
Hacker
un programador inteligente
Nerd
tcnicamente brillante pero socialmente intil
10.4 Los elementos DIR y MENU

DIR y MENU estn desaprobados.

Vase el DTD Transicional para su definicin formal.

Atributos definidos en otros lugares

id, class (identificadores a nivel de documento)
lang (informacin sobre el idioma), dir (direccin del texto)
title (ttulo del elemento)
style (informacin de estilo en lnea)
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout,
onkeypress, onkeydown, onkeyup (eventos intrnsecos)
El elemento DIR fue diseado para crear listas multicolumna de directorios. El elemento MENU fue
diseado para listas de men de una sola columna. Ambos elementos tienen la misma estructura que
UL, y nicamente vara su representacin. En la prctica, un agente de usuario representar una lista DIR
o MENU exactamente igual que una lista UL.

Recomendamos encarecidamente usar UL en lugar de estos elementos.

Você também pode gostar