Listas

      Una forma sencilla de organizar la información en una página web es facilitarla en forma de listas. Éstas pueden ser de tres tipos:

  1. Listas desordenadas (sin numerar)
  2. Listas ordenadas (numeradas)
  3. Listas de definición

     Es posible, también, anidar una lista dentro de otra, independientemente del tipo de lista que se trate.


Listas desordenadas (sin numerar)

      Las listas desordenadas (unordered list) se utilizan para enumerar elementos (items) que no tengan un orden determinado, por lo que los elementos de la lista no irán precedidos por un número. La lista desordenada quedará encerrada entre las etiquetas <ul></ul>.

      Dentro de las etiquetas que marcan la lista desordenada es necesario ir incluyendo los elementos de la lista (list items), que se escribirán entre las etiquetas <li></li>, de la siguiente manera:

<ul>
   <li>primer elemento</li>
   <li>segndo elemento</li>
   <li>y asi sucesivamente</li>
</ul>

     El resultado es el siguiente:


Listas ordenadas (susceptibles de ser numeradas)

      Las listas ordenadas (ordered list) permiten enumerar elementos de forma numerada. Se marcan con la etiqueta <ol></ol>, indicándose dentro los elementos de la lista entre las etiquetas <li></li> como en el caso de las lsitas desordenadas. Un ejemplo puede ser el siguiente:

<ol>
   <li>primer elemento</li>
   <li>segndo elemento</li>
   <li>y asi sucesivamente</li>
</ol>

que da la siguiente lista numerada:

  1. primer elemento
  2. segundo elemento
  3. y asi sucesivamente

Listas de definición

     Las lista de definición (definition list) se utilizan para dar definicones de términos. En estas definiciones será preciso dar primero el término a definir (definition term), que se escribe entre las etiquetas <dt></dt>, y después hay que dar la definición propiamente dicha (difinition definition), que se escribe entre las etiquetas <dd></dd>.

     Veamos como se codifica una lista de definición en el siguiente ejemplo:

<dl>
   <dt>Primer termino</dt>
   <dd>Definicion del primer termino</dd>
   <dt>Segundo termino</dt>
   <dd>Definicion del segundo termino</dd>
   <dt>Otro termino</dt>
   <dd>Otra definicion y asi todas las necesarias</dd>
</dl>

     Este código da como resultado:

Primer termino
Definicion del primer termino
Segundo termino
Definicion del segundo termino
Otro termino
Otra definicion y asi todas las necesarias

Ejemplo práctico.

Copia el siguiente código y guardaló con el nombre prueba3listas.htm:

<html>

<head>
<title>Prueba 3 - Listas HTML </title>
</head>

<body>
<h2>Ejemplo de lista ordenada:</h2>
<ol>
   <li>primer elemento</li>
   <li>segndo elemento</li>
   <li>y asi sucesivamente</li>
</ol>

El resultado que deberías obtener con este código es este.


Tablas