TIPOS DE LISTAS

La forma de crear listas difiere ligeramente de los elementos HTML vistos hasta ahora, ya que consta de dos pasos. Primero hay que definir el tipo de lista y después deben insertarse cada uno de los elementos de lista.

Los dos tipos de listas que se pueden colocar son:

• <ul></ul> listas desordenadas , van precedidas por un símbolo.
• <ol></ol> listas ordenadas, van precedidas por un número ordinal.

Al crear una lista deberemos indicar su inicio y su fin (etiqueta de inicio y cierre). Para empezar la lista usaremos la instrucción de inicio de la etiqueta de esa lista.

Existe una etiqueta para cada tipo distinto de lista, por ejemplo, para crear una lista no ordenada será necesario usar la etiqueta UL (su instrucción de inicio será <UL>). Una vez hemos abierto la lista deberemos insertar, como hemos dicho antes, cada uno de los elementos de lista. Para ello usaremos una nueva etiqueta (o dos en algún caso) que dependerá del tipo de lista. En el caso de la lista no ordenada los elementos se introducen con la etiqueta de una única instrucción LI, por ejemplo:

<ul>
          <li>Internet Explorer 8</li>
          <li>FireFox 3</li>
          <li>Google Chrome 13</li>
</ul>

El ejemplo anterior originaría que se mostrara así:

• Internet Explorer 8
• FireFox 3
• Google Chrome 13

 

Un atributo TYPE se colocará en la etiqueta <UL> y por lo tanto afectará a toda la lista. Este TYPE tiene tres variantes que 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.

Un ejemplo de como se implementa el atributo TYPE es:

<ul type="disc">
          <li>Soy una lista desordenada tipo disco.</li>
</ul>

<ul type="square">
          <li>Soy una lista desordenada tipo square.</li>
        </ul>

Te aconsejo que copies el anterior código y observa sus diferencias.

LISTAS ORDENADAS <OL>

Este tipo de listas numera los elementos de lista en el orden en el que se han introducido en el código HTML. La numeración se realiza con números empezando por el 1.
Este tipo de listas queda delimitado por la etiqueta <OL>...</OL> (OL: Ordered List, Lista ordenada), y cada elemento se inserta, al igual que en el caso de listas no ordenadas, con la etiqueta <LI>.

<OL>
          <li>Internet Explorer 8</li>
          <li>FireFox 3</li>
          <li>Google Chrome 13</li>
</OL>

El ejemplo anterior originaría que se mostrara así:

1. Internet Explorer 8
2. FireFox 3
3. Google Chrome 13

Esta etiqueta tambien tiene un atributo el TYPE, con el podemos especificar el símbolo de la lista. Te presento los 5 tipos posibles de TYPE.

Como hemos mencionado son 5 los tipos útiles de numeración para las listas ordenadas.

TYPE2	ESTILOS DE NUMERACIÓN
	TIPOS	EJEMPLO
1	Números árabes	1,2,3,...
a	Alfabeto en minúsculas	a,b,c,...
A	Alfabeto en mayúsculas	A,B,C,...
i	Número romano en minúsculas	i,ii,iii,...
I	Número romano en mayúsculas	I,II,III,...

Para poder modificar el atributo, introduce su valor como en el ejemplo:

<ol type="a">
  <li>...</li>
</ol>

El navegador automáticamente numera los elementos de lista. Si en algún momento queremos insertar un nuevo elemento entre los existentes usando, de nuevo <li> se realiza automáticamente una renumeración de los elementos de la lista.

Si bien las listas que hemos creado hasta ahora comenzaban siempre por 1 (o por a, A, i, I, según el tipo de numeración) podemos modificar esto con el atributo START. Con este atributo podemos elegir porqué número (o letra) comenzará el primer elemento de lista.

Esto suele ser útil cuando tenemos que partir una lista en dos porque queremos insertar algo en medio y queremos retomar la numeración después. Este atributo tiene como valores posibles todos los números naturales (1, 2, 3, ...). EJEMPLO

<ol type="a" start="3">
  <li>Yo comienzo por el "c"</li>
</ol>

El código se vería así:

3. Yo comienzo por el "c"

El atributo START no puede ser usado de manera independiente en cada elemento de lista, LI. Si embargo si que existe otro atributo que nos permitirá cambiar el número que precede a cada elemento de lista: VALUE.

Este atributo funciona de manera muy similar a START, toma como valor un número natural y lo convierte al tipo de numeración que usa esa lista. Por ejemplo podríamos crear una lista con numeración romana impar de la siguiente manera:

<ol type="i">
    <li value=1> Soy el primer impar.
    <li value=3> Soy el segundo impar.
    <li value=5> Soy el tercer impar.
</ol>

Listas de glosario.

Este tipo de listas es usada, como su nombre indica, para crear glosarios, es decir listas de definiciones o de descripciones. El principio y final de este tipo de listas se delimitan con la etiqueta <DL>...</DL > (DL: Definition List, Lista de definición). La inserción de elemento es ligeramente distinta a la del resto de listas ya que no se usa la etiqueta <<LI>>. Esto es así porque en este caso cada uno de los elementos de lista está compuesta de dos partes:

• La palabra que queremos definir: para insertar la palabra usaremos la etiqueta <DT> que proviene de Definition Term (Término de definición). Esta nueva etiqueta funciona de forma muy similar a <LI> y la instrucción de fin (</DT>) es igualmente optativa.
• La definición o descripción de esa palabra: una vez indicada la palabra es hora de poner su definición. Para ello usamos otra nueva etiqueta: <DD> cuyas siglas significan Definition Descriptión (parte de la definición que contiene la descripción). La definición suele ser un párrafo y será mostrado por los navegadores sangrado con respecto al texto anterior.

Un ejemplo sería:

<dl>
  <dt>SGML</dt>
  <dd>Metalenguaje para la definición de otros lenguajes de marcado</dd>
 
  <dt>XML</dt>
  <dd>Lenguaje basado en SGML y que se emplea para describir datos</dd>
 
  <dt>RSS</dt>
  <dt>GML</dt>
  <dt>XHTML</dt>
  <dt>SVG</dt>
  <dt>XUL</dt>
  <dd>Lenguajes derivados de XML para determinadas aplicaciones</dd>
</dl>

Son muy poco utilizadas este tipo de selectores o etiquetas.

Vistos todos los tipos de listas se nos puede plantear una pregunta: ¿Se puede incluir una lista dentro de otra?. La respuesta es SI.

El lenguaje HTML permite insertar unas listas dentro de otras ya sean del mismo o de distinto tipo. A esta posibilidad se le llama anidamiento de listas y la forma de realizarlo es incluir todo el código de una lista dentro de uno de los elementos de la otra.

En el siguiente ejemplo combinaremos algunos de los ejemplos anteriores para dar lugar a un listado con varios listas anidadas unas dentro de otras:

 <MENU> 
 <LI>Un nuevo Internet: IPv6
 <LI>El WWW cobra vida: ha llegado el HTML dinámico
 <LI>Qué ordenador comprarse:
 	<OL> 
 		<LI>CPU rápida. Con las siguientes características:
			<UL> 
				<LI>Procesador Pentium 166
				<LI>CD-ROM 8x
				<LI>Tarjeta de sonido 16 bits
				<LI>Tarjeta de vídeo con 2 Mb
			</UL> 
		<LI>Impresora a color de buena definición.
		<LI>Altavoces y cámara de vídeo.
		<LI>Escaner color.
		<LI>Módem de velocidad 28K o superior.
	</OL> 
</MENU>

Si quieres ver como queda, puedes copiar el código en tu página WEB

DEBERÁS DE SUBIR LOS ARCHIVOS DE UNO EN UNO.

ACTIVIDAD 7.

  Crea una página nueva y guárdala con el nombre de hobbys.html
  En ella vas a crear 3 listas desordenadas de las películas que has visto en los últimos meses.
  Cada una de las listas tendrá que tener al menos el nombre de 4 películas.

ACTIVIDAD 8.

Puedes usar como base el archivo anterior que has mandado  en 
la actividad 7. Recuerda se llamaba hobbys.html
Una vez abierto el archivo lo guardas con el nombre de hobbys2.html y en 
él, vas a crear una lista ordenada, dándole prioridad a las películas.
Puedes usar el atributo TYPE que quiereas.

ACTIVIDAD 9.

Puedes usar como base el archivo anterior que has mandado  en 
la actividad 8. Recuerda se llamaba hobbys2.html
Una vez abierto el archivo lo guardas con el nombre de hobbys3.html y en 
él, vas a crear al final una nueva lista. 
Esta lista será ordenada dándole VALORES IMPARES Y APLICANDO EL ATRIBUTO VALUE 
a las películas. 

ACTIVIDAD 10.

Crea un nuevo archivo al que llamarás definicion.html
En él, crearás una lista de dificiones que incluyan:
HTML, PROTOCOLO IP, ESTANDAR CSS. 

ACTIVIDAD 11.

Solo nos queda generar una lista anidada. Para ello crear el archivo
listaanidada.html en él deberás de crear un listado de los alumnos por año y curso.
Introduce al menos 4 alumnos por cursos.
La estructura será algo parecida a esto