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.

Continúa por Bloques.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.