Listas

P a t r o c i n a d o    p o r :

Con frecuencia se usan listas en los documentos. El lenguaje HTML incorpora unas listas con viñetas sencillas o también letras o números. Para dar más vistosidad a las páginas, se suelen emplear también imágenes que se colocan delante de cada párrafo. Vamos a ver algunas de las posibilidades que tenemos.

Listas con viñetas desordenadas

He aquí el ejemplo más sencillo de una de estas listas:

escribimos en html se verá como
<ul>
<li>Primer término de la lista
<li>Segundo término
<li>Tercer término
</ul>
  • Primer término de la lista
  • Segundo término
  • Tercer término

Como ves, la lista se declara con la etiqueta <UL> y finaliza con el cierre de la misma </UL>. También podemos modificar las viñetas por medio del atributo TYPE= circle, disc o square (círculo, disco o cuadrado) y añadir sublistas.

escribimos en html se verá como
<ul>
<li type= disc>Primer término de la lista
<ul>
<li>Sublista
<li>Otro elemento
</ul>
<li type=circle>Segundo término
<li type=square>Tercer término
</ul>
  • Primer término de la lista
    • Sublista
    • Otro elemento
  • Segundo término
  • Tercer término

Otro atributo interesante es compact para reducir el espacio entre los elementos

Listas con viñetas ordenadas

Estas listas se caracterizan porque aparecen números o ciertos caracteres que ordenan sus elementos. La etiqueta usada es <OL> junto con su correspondiente de cierre </OL>. El atributo TYPE toma ahora los valores 1, a, A, i, I. Un ejemplo de estas listas es el siguiente

escribimos en html se verá como
<ol type=i>
<li >Primer término de la lista
<li >Segundo término
<li>Tercer término
<li>Cuarto
<li>Quinto
</ol>
  1. Primer término de la lista
  2. Segundo término
  3. Tercer término
  4. Cuarto
  5. Quinto

Listas de definición

Estas listas se forman con el elemento que se define y su definición. Las etiquetas son <DL> y </DL> para la lista y <dt> y <dd> para los elementos y sus definiciones. Un ejemplo:

 

escribimos en html se verá como
<dl>
<dt >Término 1º
<dd>Definición del elemento 1º
<dt>Término 2º
<dd>Definición del elemento 2º
<dt>Término 3º
<dd>Definición del elemento 3º
</dl>
Término 1º
Definición del elemento 1º
Término 2º
Definición del elemento 2º
Término 3º
Definición del elemento 3º