10. Las listas


Muchas veces necesitaremos crear un listado de terminos o palabras y poder asignarles unas características comunes a todas ellas. Para poder hacer esto tenemos unas etiquetas específicas que nos permitiran crearlas. Tenemos tres tipos difrentes de listas:

  1. Listas desordenadas <ul>
  2. Listas ordenadas <ol>
  3. Listas de definición <dl>

 

Las listas desordenadas las creamos con la etiqueta <ul>...</ul> y despues para añadirle elementos tenemos las etiquetas <li>...</li>

Atributos opcionales

  • type: Con este atributo especificamos el tipo de viñeta que queremos que tenga nuestra lista.
    • <ul type="square">
    •  <ul type="circle">
    • <ul type="disc">
  • compact (compacto): Especifica que las lista debe ser más pequeña de lo normal.

 

Atributos estandar

  • accesskey: Especifica un atajo de teclado apra acceder a un elemento.
  • class: Especifica un nombre de clase de un elemento.
  • dir: Especifica la dirección del texto para el contenido de un elemento.
  • id: Especifica un identificador único para un elemento.
  • lang: Especifica un código de idioma para el contenido en un elemento.
  • style: Especifica un estilo en línea de un elemento.
  • tabindex: Especifica el orden de tabulación de un elemento.
  • xml:lang: Especifica un código de idioma para el contenido de un elemento en los documentos xhtml.

 

Los atributos de eventos

Las listas son compatibles con los siguientes atributos de eventos:

  • onblur: Secuencia de comandos para ser ejecutado cuando un elemento pierde el foco
  • onclick: Secuencia de comandos para ser ejecutado cuando se pulsa sobre el enlace
  • ondbclick: Secuencia de comandos para ser ejecutado cuando se hace doble click en el enlace.
  • OnFocus: Secuencia de comandos para ser ejecutado cuando un elemento obtiene el foco.
  • onmousedown: Script que se ejecuta cuando se pulsa sobre el enlace.
  • onmousemove: Script que se ejecuta cuando el puntero del ratón se mueve.
  • onmouseout: Script que se ejecutará cuando el puntero del ratón se mueve fuera de un enlace.
  • onmouseover: Script que se ejecutará cuando el puntero del ratón se mueve sobre un enlace.
  • onmouseup: Script que se ejecutará cuando el botón del ratón es liberado.
  • onkeydown: Script que se ejecuta cuando se pulsa una tecla.
  • onkeypress: Script que se ejecuta cuando se pulsa una tecla y se suelta.
  • onkeyup: Script que se ejecuta cuando se suelta una tecla.

 

Ejemplo de una lista desordenada:

<ul type="square" class="lista">

<li> elemento 1 </li>

<li> elemento 2 </li>

<li> elemento 3 </li>

<li> elemento 4 </li>

</ul> 

Las listas ordenadas se crean igual que las desordenadas, lo único que cambia es la etiqueta con las que creamos. Ahora en vez de  <ul>...</ul>, vamos a utilizar <ol>.....</ol>  y despues para añadirle elementos tenemos las etiquetas <li>...</li>, igual que en las listas desordenadas.

Atributos opcionales

  • type: Con este atributo especificamos el tipo de viñeta que queremos que tenga nuestra lista.
    • <ul type="1"> Se ordena mediante números.
    •  <ul type="a"> Se ordena mediante letras en minúscula.
    • <ul type="A"> Se ordena mediante letras en mayúscula.
    • <ul type="i"> Se ordena mediante números romanos en letra minúscula.
    • <ul type="I"> Se ordena mediante números romanos en letra mayúscula.
  • start:  Mediante este atributo le indicamos en que número va a comenzar los elementos de nuestra lista.

<ol start="5">

  • compact (compacto): Especifica que las lista debe ser más pequeña de lo normal.

 

Atributos estandar

  • Son iguales que los de las listas desordenadas

 

Los atributos de eventos

  • Son iguales que las listas desordenadas

 

Ejemplo de una lista ordenada:

<ul type="A" start="5" class="lista">

<li> elemento 1 </li>

<li> elemento 2 </li>

<li> elemento 3 </li>

<li> elemento 4 </li>

</ul> 

Por último ya solo nos queda ver las listas de definición. Estas si son diferentes. Para crearlas utilizamos las etiquetas <dl>....</dl>, y para los terminos tenemos dos etiquetas, <dt> para el término a definir y <dd> para la definición. 

Este tipo de listas tienen los mismos atributos generales y de eventos que los otros dos tipos de listas.

Veamos un ejemplo de como se crea una lista de definición:

<dl>

<dt>termino 1</dt>

<df>definicion 1</df>

<dt>termino 2</dt>

<df>definicion 2</df>

<dt>termino 3</dt>

<df>definicion 3</df>

<dt>termino 4</dt>

<df>definicion 4</df>

</dl>

Task Discussion