3 - LISTAS
CONCEPTOS BÁSICOS SOBRE HTML
Listas
2
Permiten agrupar determinadas palabras o frases en un
conjunto de elementos que tienen más significado de forma
conjunta.
El lenguaje HTML define tres tipos diferentes de listas para
agrupar los elementos:
listas no ordenadas: se trata de una colección simple de
elementos en la que no importa su orden
listas ordenadas: similar a la anterior, pero los elementos
están numerados y por tanto, importa su orden
listas de definición: un conjunto de términos y definiciones
similar a un diccionario
Listas: Ejemplos
3
Listas: Ejemplos
4
Listas no ordenadas
5
Conjunto de elementos relacionados entre sí pero para
los que no se indica un orden o secuencia determinados.
La etiqueta <ul> encierra todos los elementos de la lista
y la etiqueta <li> cada uno de sus elementos.
Listas no ordenadas
6
Listas no ordenadas: Ejemplo
7
Figura 5.1. Ejemplo de uso de la etiqueta ul
Listas no ordenadas
8
Figura 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. El aspecto con el que se muestran los elementos de las
listas se puede modificar mediante las hojas de estilos CSS.
Listas ordenadas
9
Las 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.
Se define mediante la etiqueta <ol>. Los elementos de la
lista se definen mediante la etiqueta <li>, la misma que se
utiliza en las listas no ordenadas.
Listas ordenadas
10
Listas ordenadas: Ejemplo
11
Ejemplo de uso de la etiqueta ol
Listas ordenadas
12
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 gráficas en
los elementos, sino que se numeran de forma consecutiva. El tipo de
numeración empleada también se puede modificar aplicando hojas de
estilos CSS a los elementos de la lista.
Listas de definición
13
Funcionamiento similar al de un diccionario
Cada elemento de la lista está formado por términos y
definiciones
La etiqueta <dl> crea la lista de definición y las etiquetas
<dt> y <dd> definen respectivamente el término y la
descripción de cada elemento de la lista.
Listas de definición
14
Listas de definición
15
Listas de definición: Ejemplo
16
Ejemplo de uso de la etiqueta dl
Listas de definición EJERCICIO 8
17
EJERCICIO 9
Ejemplo de uso de la etiqueta dl
Los navegadores formatean las listas de definición de forma similar a
las otras listas, tabulando la definición y alineando a la izquierda los
términos. Aunque no es habitual, cada término puede tener asociada
más de una definición y cada definición puede tener asociada varios
términos.
