Sei sulla pagina 1di 6

Captulo 5.

Listas
En ocasiones, es posible agrupar determinadas palabras o frases en un conjunto de elementos que tienen ms significado de forma conjunta. El men de navegacin de un sitio web por ejemplo est formado por un grupo de palabras. Aunque cada palabra por separado tiene sentido, de forma conjunta constituyen el men de navegacin de la pgina, por lo que su significado conjunto es mayor que por separado. El lenguaje H !" define tres tipos diferentes de listas para agrupar los elementos# listas no ordenadas $se trata de una coleccin simple de elementos en la que no importa su orden%, listas ordenadas $similar a la anterior, pero los elementos estn numerados y por tanto, importa su orden% y listas de definicin $un conjunto de t&rminos y definiciones similar a un diccionario%.

5.1. Listas no ordenadas


"as listas no ordenadas son las ms sencillas y las que ms se utili'an. (na lista no ordenada es un conjunto de elementos relacionados entre s) pero para los que no se indica un orden o secuencia determinados. "a etiqueta <ul> encierra todos los elementos de la lista y la etiqueta <li> cada uno de sus elementos. Etiqueta <ul> Atributos comunes bsicos, internacionali'acin y eventos Atributos propios * Tipo de elemento +loque Descripcin ,e emplea para definir listas no ordenadas Etiqueta <li> Atributos bsicos, internacionali'acin y eventos comunes Atributos propios * Tipo de elemento +loque ,e emplea para definir los elementos de las listas $ordenadas y no Descripcin ordenadas% El siguiente cdigo H !" muestra un ejemplo sencillo de lista no ordenada#
<html> <head><title>Ejemplo de etiqueta UL</title></head> <body> <h1>Men</h1> <ul> <li>Inicio</li> <li>Noticias</li> <li>A t!culos</li> <li>"ontacto</li> </ul>

</body> </html>

Fi ura 5.1 Ejemplo de uso de la etiqueta ul El navegador por defecto muestra los elementos de la lista tabulados y con una peque-a vi-eta formada por un c)rculo negro. .omo ya se sabe, el aspecto con el que se muestran los elementos de las listas se puede modificar mediante las /ojas de estilos .,,.

5.!. Listas ordenadas


"as listas ordenadas son casi id&nticas a las listas no ordenadas, salvo que en este caso los elementos relacionados se muestran siguiendo un orden determinado. .uando se crea por ejemplo una lista con las instrucciones de un producto, es importante el orden en el que se reali'a cada paso. .uando se muestra un )ndice o tabla de contenidos en un libro, es importante el orden de cada elemento del )ndice. En todos estos casos, la lista ms adecuada es la lista ordenada, que se define mediante la etiqueta <ol>. "os elementos de la lista se definen mediante la etiqueta <li>, la misma que se utili'a en las listas no ordenadas. Etiqueta <ol> Atributos comunes bsicos, internacionali'acin y eventos Atributos propios * Tipo de elemento +loque Descripcin ,e emplea para definir listas ordenadas El siguiente cdigo H !" muestra un ejemplo sencillo de lista ordenada#
<html> <head><title>Ejemplo de etiqueta #L</title></head> <body> <h1>Inst ucciones</h1> <ol> <li>Enchu$a co ectamente</li>

<li>"omp oba cone%iones</li> <li>Encende el apa ato</li> </ol> </body> </html>

Fi ura 5.! Ejemplo de uso de la etiqueta ol El navegador muestra la lista de forma muy parecida a las listas no ordenadas, salvo que en este caso no se emplean vi-etas grficas en los elementos, sino que se numeran de forma consecutiva. El tipo de numeracin empleada tambi&n se puede modificar aplicando /ojas de estilos .,, a los elementos de la lista.

5.". Listas de de#inicin


"as listas de definicin apenas se utili'an en la mayor)a de pginas H !". ,u funcionamiento es similar al de un diccionario, ya que cada elemento de la lista est formado por t&rminos y definiciones. "a etiqueta <dl> crea la lista de definicin y las etiquetas <dt> y <dd> definen respectivamente el t&rmino y la descripcin de cada elemento de la lista. Etiqueta <dl> Atributos comunes bsicos, internacionali'acin y eventos Atributos propios * Tipo de elemento +loque Descripcin ,e emplea para definir listas de definicin Etiqueta <dt> Atributos bsicos, internacionali'acin y eventos comunes Atributos propios * Tipo de elemento +loque ,e emplea para definir los t&rminos de los elementos de una lista de Descripcin definicin Etiqueta <dd> Atributos bsicos, internacionali'acin y eventos

Etiqueta <dd> comunes Atributos propios * Tipo de elemento +loque ,e emplea para indicar las definiciones de los elementos de una lista Descripcin de definicin El siguiente cdigo H !" muestra un ejemplo sencillo de lista de definicin#
<html> <head><title>Ejemplo de etiqueta &L</title></head> <body> <h1>Metalen'uajes</h1> <dl> <dt>()ML</dt> <dd>Metalen'uaje pa a la de$inici*n de ot os len'uajes de ma cado</dd> <dt>+ML</dt> <dd>Len'uaje basado en ()ML y que se emplea pa a desc ibi datos</dd> <dt>,((</dt> <dt>)ML</dt> <dt>+-.ML</dt> <dt>(/)</dt> <dt>+UL</dt> <dd>Len'uajes de i0ados de +ML pa a dete minadas aplicaciones</dd> </dl> </body> </html>

Fi ura 5." Ejemplo de uso de la etiqueta dl "os navegadores formatean las listas de definicin de forma similar a las otras listas, tabulando la definicin y alineando a la i'quierda los t&rminos. Aunque no es /abitual, cada t&rmino puede tener asociada ms de una definicin y cada definicin puede tener asociada varios t&rminos. Ejercicio 0 1eterminar el cdigo H !" que corresponde a la siguiente lista anidada simple

Fi ura 5.$ Ejemplo de lista anidada simple de dos niveles 2er solucin Ejercicio 3 1eterminar el cdigo H !" que corresponde a la siguiente lista anidada compleja

Fi ura 5.5 Ejemplo de lista anidada compleja de dos niveles 2er solucin

Potrebbero piacerti anche