Web.HTML.Listas.
Con las listas se puede ordenar elementos para facilitar su lectura y ser más agradable a la vista. Existen 3 tipos de listas:
- Desordenadas.
- Ordenadas.
- Descripción.
Desordenadas.
Se agrega con la etiqueta <ul>, de la siglas Unordered List y se añade cada elemento con <li>. Un ejemplo:
<!DOCTYPE html>
<html>
<body><h2>Lista desordenada</h2><ul>
<li>Café</li>
<li>Té</li>
<li>Leche</li>
</ul></body>
</html>
Se le puede dar estilos a los elementos de las listas:
<!DOCTYPE html>
<html>
<body><h2>Lista Desordenada</h2><ul style="list-style-type:disc">
<li>Café</li>
<li>Té</li>
<li>Leche</li>
</ul></body>
</html>
La propiedad list-style-type tiene más opciones:
- disc. Cada elemento tiene el efecto de un disco.
- circle. Cada elemento tiene el efecto de un círculo.
- square. Cada elemento tiene el efecto de un cuadrado.
- none. No le da efecto alguno a los elementos de la lista.
Lista Ordenada.
Se agrega con la etiqueta <ol>, de las siglas Ordered List y se añade cada elemento con <li>. Un ejemplo:
<!DOCTYPE html>
<html>
<body><h2>Lista Ordenada</h2><ol>
<li>Café</li>
<li>Té</li>
<li>Leche</li>
</ol></body>
</html>
Se lo puede dar estilos a los elementos de la lista:
<!DOCTYPE html>
<html>
<body><h2>Lista Ordenada</h2><ol type="1">
<li>Café</li>
<li>Té</li>
<li>Leche</li>
</ol></body>
</html>
La propiedad type se utiliza para darle estilo a cada elemento de lista. Existen más estilos:
- 1. Utiliza números para ordenar la lista. Es la opción por defecto si no se le indica nada.
- A. Utiliza letras mayúsculas para ordenar la lista.
- a. Utiliza letras minúsculas para ordenar la lista.
- I. Utiliza números romanos en mayúsculas para ordenar la lista.
- i. Utiliza números romanos en minísculas para ordenar la lista.
Listas de Descripción.
Se agrega con la etiqueta <dl>, de las siglas Description List. Se añade cada elemento con <dt> y su descripción con <dd>. Un ejemplo:
<!DOCTYPE html>
<html>
<body><h2>Lista de Descripción</h2><dl>
<dt>Coffee</dt>
<dd>- Café con leche</dd>
<dt>Milk</dt>
<dd>- Leche con galletas</dd>
</dl></body>
</html>
Y si quiero meter una lista dentro de otra, ¿Como lo hago?
<!DOCTYPE html>
<html>
<body><h2>Lista de Descripción</h2>
<ul>
<li>Café</li>
<ul>
<li>Café con leche</li>
<li>Manchado de café</li>
<li>Cortado</li>
</ul>
<li>Tea</li>
<li>Leche</li>
</ul>
</body>
</html>
Basta con ir anidando una lista dentro de otra, se puede hacer tantas como se quiera.
