Curso completo de HTML - Extensiones a las listas (I)

Listas no ordenadas

Para aumentar el control sobre la apariencia de las listas no numeradas o no ordenadas se introdujo un nuevo atributo: TYPE. Con él podremos cambiar el tipo de viñeta de los elementos de la lista. Los tipos de viñetas disponibles son:

• TYPE="Circle": El símbolo es un círculo, es decir, una circunferencia no rellena.

• TYPE="Square": La viñeta es un cuadrado.

• TYPE="Disk": Similar a Circle, pero ahora la circunferencia si está rellena. Este tipo es el que aparecía por defecto cuando no usábamos el atributo TYPE.

Quizá al lector que haya practicado con anidamiento de listas le resulten familiares estos tipos de viñetas. Si recordamos al anidar listas el tipo de viñeta de cada nivel de anidamiento era distinto. Pero ahora nosotros tendremos libertad para elegir cuando debe usarse cada uno.

Veamos algunos ejemplos. El primero de ellos será una lista de tipo Disk. En él se muestra un listado de algunos de los principales navegadores, y el código usado es:

 <UL TYPE="circle">
 
  <LI>
  Ms Internet Explorer
  <LI>
  Netscape Navigator
  <LI>
  Opera
  <LI>
  Lynx
 
  </UL>
 
       

Si queremos hacer esta misma lista pero con viñetas cuadradas tendremos que escribir:

 <UL TYPE="square">
 
  <LI>
  Ms Internet Explorer
  <LI>
  Netscape Navigator
  <LI>
  Opera
  <LI>
  Lynx
 
  </UL>
 
       

En la figura 7.7 podemos ver ambos ejemplos junto con un tercero que se obtiene no usando el atributo TYPE o usándolo con el valor TYPE="disc".

En la figura 7.8 vemos estos tres ejemplos de nuevo, pero esta vez visualizándolos con Netscape Navigator.

Es importante apreciar que no existen prácticamente diferencias, quizá la única sea la variación de tamaño de los símbolos de algunas viñetas.

Hasta ahora hemos usado el atributo TYPE en la etiqueta que definía el tipo de lista, es decir, en la etiqueta UL. De esta forma el cambio en el tipo de viñeta afectaba a todos los elementos de lista. Sin embargo también puede usarse en la etiqueta LI, y de esta forma conseguimos que el cambio de viñeta sólo afecte a un elemento de lista concreto. La mejor manera de ver este efecto es con un ejemplo y por ello vamos a retomar el primero de los tres vistos antes pero cambiando el tipo de viñeta del navegador Lynx. Esto podría servirnos en un ejemplo real para indicar que este navegador es un navegador en modo texto, mientras que los demás son navegadores gráficos. El código que debemos usar es:

 <UL TYPE="circle">
 
  <LI>
  Ms Internet Explorer
  <LI>
  Netscape Navigator
  <LI>
  Opera
  <LI TYPE="disc">
  Lynx
 
  </UL>
 
       

En la figura 7.9 podemos ver el resultado.

Con esto podemos dar por terminadas las novedades de las listas no ordenadas, pasemos a las ordenadas.