Html, las listas

En esta lección veremos cómo, a través de «etiquetas«, es posible crearlistas de texto numeradas o con viñetas.

En esta lección veremos cómo, a través de etiquetas especiales, es posible crear listas de texto numeradas o con viñetas.
Veamos ahora, en un breve ejemplo, la diferencia entre una lista con viñetas y una numerada:

Lista con viñetas:
• Primer texto
• Segundo texto
• Tercer texto

Lista numerada:
1. Primer texto
2. Segundo texto
3. Tercer texto
Hecha esta premisa, veamos cómo crear nuestras listas.
Las listas se dividen en Listas ordenadas y Listas no ordenadas.
Las listas ordenadas se caracterizan por una lista numerada, así que podemos decir que las listas numeradas son listas ordenadas.
Por el contrario, las listas con viñetas se definen como listas no ordenadas.

Listas ordenadas (Numeradas):
para crear este tipo de listas se utiliza la etiqueta ol  (Order list) que indica precisamente al navegador que se trata de una lista ordenada, además de la etiqueta li (List item) que representa el elemento de la lista.

He aquí la sintaxis de una lista ordenada:

Listas desordenadas (Listas con viñetas):
a diferencia de la anterior, esta lista no se distingue por una numeración definida y ordenada, sino solo por un punto de referencia.
En este caso, en lugar de ol se utiliza ul (Unordered lis) siempre asociado a la etiqueta li, ya que también en este caso se trata de una lista.

Aquí también está la sintaxis para crear esta lista:

Observe el punto de lista.
Si queremos sustituir el punto clásico para determinar la lista, por un pequeño círculo, utilizaremos el atributo type unido a la tipología del punto, que en nuestro caso se convierte en un círculo definido con ‘circle’.
Aquí está entonces nuestra lista con viñetas utilizando un círculo:

Si luego queremos un cuadrado como puntuación, utilizamos la definición ‘square’:

Las listas le serán muy útiles para definir listas y menús de navegación.

Pubblicato in HTML & CSS