Listas en HTML
Listas desordenadas.
Las listas
originalmente están pensadas para citar, numerar y definir cosas a través de
características. Se utilizan para mucho más que enumerar una serie de puntos,
en realidad son un recurso muy interesante para poder maquetar elementos
diversos.
Son delimitadas por
las etiquetas <ul> y </ul> (unordered list). Cada uno de los
elementos de la lista es citado por medio de una etiqueta <li> (sin
cierre, aunque no hay inconveniente en colocarlo). La cosa queda así:
<p>Países del
mundo</p>
<ul>
<li>México
<li>Argentina
<li>Canadá
</ul>
El resultado:
Países del mundo
México
Argentina
Canadá
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>,
si queremos que el estilo sea válido para toda la lista,o dentro le la etiqueta
<li> si queremos hacerlo específico de un solo elemento. La sintaxis es
del siguiente tipo:
<ul
type="tipo de viñeta">
donde tipo de
viñeta puede ser uno de los siguientes:
Ÿ circle
§ square
೦ disc
Ejemplo:
<ul
type="square">
<li>Elemento
1
<li>Elemento
2
<li>Elemento
3
<li
type="circle">Elemento 4
</ul>
Listas ordenadas
Las listas
ordenadas sirven también para presentar información, en diversos elementos o
items, con la particularidad que éstos estarán predecidos de un número o una
letra para enumerarlos, siempre por un orden.
Para realizar las
listas ordenadas usaremos las etiquetas <ol> (ordered list) y su cierre.
Cada elemento será igualmente indicado por la etiqueta <li>, que ya vimos
en las listas desordenadas.
Pongamos un
ejemplo:
<p>Reglas
para lograr el éxito</p>
<ol>
<li>Mente
abierta
<li>Corazón
humilde
</ol>
El resultado es:
Reglas de
comportamiento en el trabajo
Mente abierta
Corazón humilde
Del mismo modo que
para las listas desordenadas, las listas ordenadas ofrecen la posibilidad de
modificar el estilo. En concreto nos es posible especificar el tipo de
numeración empleado eligiendo entre números (1, 2, 3...), letras (a, b, c...) y
sus mayúsculas (A, B, C,...) y números romanos en sus versiones mayúsculas (I,
II, III,...) y minúsculas (i, ii, iii,...).
Para realizar dicha
selección hemos de utilizar, como para el caso precedente, el atributo type, el
cual será situado dentro de la etiqueta <ol>. Los valores que puede tomar
el atributo en este caso son:
1 Para ordenar por números
a Por letras del alfabeto
A Por letras mayúsculas del alfabeto
i Ordenación por números romanos en
minúsculas
I Ordenación por números romanos en
mayúsculas
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 tendra 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.
Ejemplo usando este
tipo de atributos:
<p>Ordenamos
por números</p>
<ol
type="1">
<li>Elemento
1
<li> Elemento
2
</ol>
<p>Ordenamos
por letras</p>
<ol
type="a">
<li>Elemento
a
<li> Elemento
b
</ol>
<p>Ordenamos
por números romanos empezando por el 10</p>
<ol
type="i" start="10">
<li>Elemento
x
<li> Elemento
xi
</ol>
