Listas

Existen tres tipos de listas, numeradas, sin numerar y de definición.


Las listas numeradas representarán los elementos de la lista numerando cada uno de ellos segun el lugar que ocupan en la lista. Para este tipo de lista se utiliza la etiqueta <ol></ol> . Cada uno de los elementos de la lista irá precedido de la etiqueta <li> . La etiqueta <ol> puede llevar los siguientes parámetros :


start="num"
Indica que número será el primero de la lista. Si no se indica se entiende que empezará por el número 1.


type="tipo"
Indica el tipo de numeración utilizada. Si no se indica se entiende que será una lista ordenada numéricamente.


Los tipos posibles son :


1 = Numéricamente. (1,2,3,4,… etc.)

a = Letras minúsculas. (a,b,c,d,… etc.)

A = Letras mayúsculas. (A,B,C,D,… etc.)

i = Numeros romanos en minúsculas. (i.ii,iii,iv,v,… etc.)

I = Números romanos en mayúsculas. (I,II,III,IV,V,… etc.)


Ejemplo Resultado
<ol>

<li> España </li>

<li> Francia </li>

<li>
Italia </li>

<li> Portugal </li>

</ol>
  1. España
  2. Francia
  3. Italia
  4. Portugal
<ol type="A">

<li> España <li>

<li> Francia <li>

<li> Italia <li>

<li> Portugal <li>

</ol>
  1. España
  2. Francia
  3. Italia
  4. Portugal
Las listas sin numerar representan los elementos de la lista con un "topo" o marca que antecede a cada uno de ellos.




Se utiliza la etiqueta <ul></ul> para delimitar la lista, y <li> para indicar cada uno de los elementos.




La etiqueta <ul> puede contener el parámetro type que indica la forma del "topo" o marca que antecede a cada elemento de la lista. Los valores de type pueden ser disk , circle o square , con lo que el topo o marca puede ser un disco, un circulo o un cuadrado.


Ejemplo Resultado
<ul type="disk">

<li> España </li>

<li> Francia </li>

<li> Italia </li>

<li> Portugal </li>

</ul>
  • España
  • Francia
  • Italia
  • Portugal
<ul type="square">

<li> España </li>

<li> Francia </li>

<li> Italia </li>

<li> Portugal </li>

</ul>
  • España
  • Francia
  • Italia
  • Portugal
Las listas de definición muestran los elementos tipo Diccionario, o sea, término y definición. Se utiliza para ellas la etiqueta <dl></dl> . El elemento marcado como término se antecede de la etiqueta <dt> , el marcado como definición se antecede de la etiqueta <dd> .


Ejemplo Resultado
<dl>

<dt> WWW </dt>

<dd> Abreviatura de World Wide Web </dd>

<dt> FTP </dt>

<dd> Abreviatura de File Transfer Protocol </dd>

<dt> IRC </dt>

<dd> Abreviatura de Internet Relay Chat </dd>

</dl>
WWW
Abreviatura de World Wide Web
FTP
Abreviatura de File Transfer Protocol
IRC
Abreviatura de Internet Relay Chat
Existen otros dos tipos de listas menos comunes. Las listas de Menú o Directorio se comportan igual que las listas sin numerar.

La lista de Menú utiliza la etiqueta <menu></menu> y los elementos se anteceden de <li> El resultado es una lista sin numerar mas "compacta" es decir, con menos espacio interlineal entre los elementos.

La lista de Directorio utiliza la etiqueta <dir></dir> y los elementos se anteceden de <li> . Los elementos tienen un limite de 20 caracteres.

Todas las listas se pueden "anidar", es decir incluir una lista dentro de otra, con lo que se consigue una estructura tipo "indice de materias".


Ejemplo Resultado
<ul type="disk">

<li> Buscadores

<ul>

<li>
Yahoo </li>

<li>
Ole </li>

<li>
Lycos </li>

</ul>

</li>

<li> Links

<ul>

<li> Microsoft </li>

<li>
IBM </li>

</ul>

</li>

</ul>
  • Buscadores
    • Yahoo
    • Ole
    • Lycos
  • Links
    • Microsoft
    • IBM

Practicar con esta lección

Capítulo anterior:

Atributos del Texto

Capítulo siguiente:

Imágenes

Leave A Comment?