Archivo

Entradas Etiquetadas ‘elementos html’

TUTORIAL HTML: 10. LISTA DE ELEMENTOS

martes, 21 de julio de 2009 Sin comentarios

Podemos organizar nuestro texto haciendo uso de las llamadas listas de elementos, que consisten en esas enumeraciones utilizando números, letras o simplemente puntos para separar los diferentes apartados a tratar. Existen tres tipos:

  • Numeradas
  • Sin numerar
  • De definición

1. -Listas numeradas:

Cada elemento va precedido por un número. 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> .

Ejemplo:

http://img98.imageshack.us/img98/857/dibujoolc.png

Si queremos utilizar letras para ordenar nuestra lista (por defecto siempre utiliza HTML números), debemos añadir a la etiqueta <ol> el atributo type con los siguientes valores:

http://img140.imageshack.us/img140/9986/dibujolud.png

Ejemplos

http://img140.imageshack.us/img140/9665/dibujoamf.jpg

Si queremos empezar nuestra lista por cualquier otro número o letra (que no sean el 1 o la «a»), deberemos indicarlo con el atributo start.

http://img229.imageshack.us/img229/8554/dibujoybl.png

2.- Listas sin numerar.

En ellas, cada elemento va precedido por un «bullet» o punto. Se utiliza la etiqueta <ul></ul> para delimitar la lista, y <li> para indicar cada uno de los elementos.

Ejemplo:

http://img229.imageshack.us/img229/9330/dibujogsc.png

Con el parámetro type podemos indicar la forma del «bullet». Los valores de type pueden ser disc (disco) , circle (círculo vacío) o square (cuadrado). Si no indicamos nada, apacerá por defecto el disco.

Ejemplo:

http://img136.imageshack.us/img136/3681/dibujohuhfxh.png

3.- Listas de definición

Las listas de definición se tratan de listas a dos niveles. Es decir, muestran los elementos tipo glosario o diccionario. Sirven para distinguir entre una palabra a definir y su definición. Para este tipo de lista se utiliza la etiqueta <dl></dl> . El elemento marcado como palabra a definir viene marcado por la etiqueta <dt> , y la definición por la etiqueta <dd> .

http://img268.imageshack.us/img268/5283/dibujodeu.png

Listas de varios niveles o Listas anidadas

Podemos construir listas anidadas, es decir, listas que incluyen otras listas.

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».

http://img216.imageshack.us/img216/9625/dibujoczt.png

Ir a la barra de herramientas