Utilizamos listas para mostrar una sucesión de elementos que guardan relación entre ellos. Podemos distinguir entre listas ordenadas (orderer list) que se crean con la etiqueta <ol> y listas sin ordenar o desordenadas (unorderer list), que utilizan con la etiqueta <ul>. Ambas listas deben de contener una serie de elementos de lista (list items), delimitados por las etiquetas <li></li>. La diferencia entre ambas, es que el navegador al mostrarlas las enumera en el caso de las listas ordenadas, mientras que en las desordenadas muestra viñetas. Aunque se utilizan menos, también veremos las listas de definición <dl>
La ventaja de utilizar estos tipos de listas de HTML frente a las estructuras de listas que podríamos crear nosotros mismos es que es más fácil trabajar con ellas y que el navegador ya realiza unas acciones de formato por defecto, como insertar los números de la ordenación, las viñetas, los saltos de línea, etc. Luego mediante hojas de estilo podemos personalizar el formato. Junto a párrafos y encabezados, las listas son uno de los elementos más empleados para insertar texto en una web.
En este vídeo puedes ver lo más fundamental de esta unidad:
La etiqueta <ul> define una lista desordenada. Entre la etiqueta de apertura y la de cierre se incluyen los elementos de la lista con la etiqueta <li>.
Por ejemplo:
<ul> <li>Plátanos</li> <li>Naranjas</li> <li>Manzanas</li> </ul>
Produce este resultado:
Estilo
Por defecto, delante de cada elemento se pone un disco o punto negro. Podemos cambiar este marcador (o viñeta) modificando el atributo list-style-type con hojas de estilo.
Para listas desordenadas, los valores más usuales son:
none: No muestra ningún marcador.disc: Muestra un punto negro. Es el valor por defecto.circle: Un círculo vacío.square: Un cuadrado.Por ejemplo, si aplicamos este estilo ul { list-style-type: square } a la lista anterior, obtendremos este resultado:
También podemos establecer una imagen en lugar de un tipo de marcador, mediante el atributo list-style-image con el valor url(ruta_imagen).
Por ejemplo: <ol style="list-style-image: url(comunes/greenball.gif)">
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.