http://www.luiscanada.
com/manualHTML/manual-xhtml-luis-
canada.pdf Listas desordenadas
Las listas desordenadas son también las más usadas. Se delimitan por
las etiquetas <ul> y </ul> (UL = Unordered List), y cada uno de los
atributos se citará mediante la etiqueta <li> y
</li> (LI = List Item).
Este tipo de listas no siguen ningún orden lógico.
Un ejemplo sería el siguiente:
<h1>Países del mundo</h1>
<ul>
<li>Australia</li>
<li>España</li>
<li>Brasil</li>
</ul>
Listas dentro de listas (SUBLISTAS)
Una anidación de listas consiste en crear la misma estructura de una
lista (ordenada o desordenada) dentro de un ítem de lista del primer
nivel.
Esto quiere decir que integraremos una etiqueta <ul> con sus
respectivos ítems de listas dentro de una etiqueta <li>.
Podemos crear tantos niveles como queramos siguiendo bien la
estructura lógica de las
listas, como en el siguiente ejemplo.
<h1>Países del mundo</h1>
<ul>
<li>Australia</li>
<li>España
<ul>
<li>Zaragoza</li>
<li>Sevilla</li>
<li>Lleida</li>
</ul>
</li>
<li>Brasil</li>
</ul>
El atributo TYPE para listas
desordenadas
Podemos definir el tipo de viñeta empleada para cada elemento. Para
ello debemos especificarlo por medio del atributo type incluido
dentro de la etiqueta de apertura <ul> (<ul type="tipo de
viñeta">), si queremos que el estilo sea válido para toda la lista,o
dentro le la etiqueta <li> (<li type="tipo de viñeta">) si
queremos hacerlo específico de un solo elemento.
A continuación se definen los posibles valores de TYPE para listas
desordenadas:
circle
disc (es el valor que se toma por defecto)
square
Vamos a ver un ejemplo de lista con un cuadrado en lugar de la
clásica viñeta redondeada.
Además, en el último elemento colocaremos un círculo. Para ello
vamos a colocar el atributo type en la etiqueta <ul>, con lo que
afectará a todos los elementos de la lista:
<ul type="square">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li type="circle">Elemento 4</li>
</ul>
El resultado será el siguiente:
Elemento 1
Elemento 2
Elemento 3
o Elemento 4
PRÁCTICA: Confeccionar una página HTML que contenga una lista
no ordenada con cuatro
lenguajes de programación populares. Agregar al principio un título
de segundo nivel.
Listas ordenadas
Las lista ordenadas se utilizan para seguir un orden lógico. Estas listas
se delimitarán por <ol> y </ol> (OL = Ordered List). Los tags para
definir los items no variarán de las listas ordenadas (<li> y </li>).
Un ejemplo sería el siguiente:
<h1>Lista de países con más población</h1>
<ol>
<li>China</li>
<li>India</li>
<li>EE.UU</li>
</ol>
Listas dentro de listas (SUBLISTAS)
El concepto es el mismo que para las listas desordenadas:
<h1>Lista de países con más población</h1>
<ol>
<li>China</li>
<li>India
<ol>
<li>Damán</li>
<li>Pondicheri</li>
<li>Orisa</li>
</ol>
</li>
<li>Brasil</li>
</ol>
Combinando listas ordenadas y
desordenadas
Es posible combinar listas ordenadas y no ordenadas sin ningún tipo
de impedimento:
<h1>Lista de la compra</h1>
<ol>
<li>Leche</li>
<li>Frutas
<ul>
<li>Manzana</li>
<li>Pera</li>
<li>Melocotón</li>
</ul>
</li>
<li>Carne y pescado</li>
</ol>
El atributo TYPE para listas ordenadas
Las listas ordenadas no sólo se pueden ordenar con números.
También se pueden utilizar letras y numeración romana tanto en
mayúsculas como minúsculas. Para esto se utiliza el atributo TYPE
del elemento <ol> con los siguientes valores, entrecomillados:
type="1" : Para listas ordenadas con números (1, 2, 3...). Es el valor
que se toma por defecto.
type="A" : Para listas ordenadas con letras mayúsculas (A, B, C...)
type="a" : Para listas ordenadas con letras minúsculas (a, b, c...)
type="I" : Para listas ordenadas con numeración romana (I, II, III, IV,
V...)
type="i" : Para listas ordenadas con numeración romana minúscula
(i, ii, iii, iv, v...)
El formato será el siguiente:
<ol type="a">...</ol>
<ol type="A">...</ol>
<ol type="i">...</ol>
<ol type="I">...</ol>
El atributo START para listas ordenadas
Puede que en algún caso deseemos comenzar nuestra
enumeración por un número o letra que no tiene por qué ser
necesariamente el primero de todos. Para solventar esta
situación, podemos utilizar un segundo atributo, start, que tendrá
como valor un número.
Este número, que por defecto es 1, corresponde al valor a partir del
cual comenzamos a definir nuestra lista. Para el caso de las letras o
los números romanos, el navegador se encarga de hacer la traducción
del número a la letra correspondiente. Véanse los siguientes
ejemplos:
Caso 1: <ol start="4">...</ol>
Caso 2: <ol type="A" start="3">...</ol>
Caso 3: <ol type="i" start="4">...</ol>
Caso 4: <ol type="I" start="9">...</ol>
Caso 1: lista numerada, empezando por 4 (recordar que el atributo
type por defecto es la
numeracion común).
Caso 2: lista alfabética, empezando por C.
Caso 3: lista románica en minúsculas, empezando por IV.
Caso 4: lista románica en mayúsculas, empezando por IX.
Listas de definición
Cada elemento es presentado junto con su definición, como si de un
diccionario se tratase.
Estas listas se delimitan por <dl> y </dl> (definition list). La
etiquetas del elemento y su definición son <dt> (definition term) y
<dd> (definition definition) respectivamente. Véase el ejemplo:
<h1>Diccionario de la RAE</h1>
<dl>
<dt>Animal</dt>
<dd>Ser orgánico que vive, siente y se mueve por su propio
impulso</dd>
<dt>Persona</dt>
<dd>Perteneciente al hombre, propio de él</dd>
</dl>
PRÁCTICA: Confeccionar una lista de definición con 3 conceptos
relacionados con "programas
para Windows" y, para cada uno de ellos, hacer una breve
descripción.
