L i s t a s

Listas.

HTML proporciona una etiqueta que permite generar en los documentos Web un listado, al cual se permite configurar una numeración o viñetas para sus elementos.

Las listas en html son clasificadas en dos tipos:

1. Listas Ordenadas

2. Listas No Ordenadas.

Listas Ordenadas.

Son aquellas cuyos elementos estas denotados por una secuencia numérica o alfabética.

Listas No ordenadas.

Son aquellas que denotas a sus elementos con un tipo de viñeta.

Listas

Ordenadas

Listas OrdenadasLas listas ordenadas son iniciadas con la etiqueta <ol> y finalizadas con su complemento de fin de listas </ol>.

Sintaxis.

<ol>

Elementos de la lista.

</ol>

Atributos.

Atributo Operación Valores

type Indica la familia de símbolos que su utilizaran para numerar a los

elementos de la lista

1 (default) → números arábigos

i → números romanos (minúsculas)

I → números romanos (mayúsculas)

a → alfabeto minúsculas

A → Alfabeto mayúsculas.

start El valor inicial de la numeración Compatible con el tipo de numeración

Elementos de una lista.Para agregar elementos a una lista se debe utilizar la etiqueta <li> delimitando a cada elemento.

Sintaxis.

<li> Elemento de Lista </li>

Atributos.

Atributo Operación Valores

type Indica la familia de símbolos que su utilizaran para numerar a los

elementos de la lista

Para listas ordenadas

Mismos valores que en <ol>

start El valor para el primer elementos de la lista.

Valido solo para listas ordenadas

Compatible con el tipo de numeración

Listas ordenadas (sin atributos)Por default se contempla a la familia de números

arábigos (1, 2,3, …) para la numeración.

Configuración familia de numeración

En este caso se utiliza el atributo type para configurar una familia de numeración para la lista. Para este caso particular se elige la familia de números romanos en

minúsculas.

Para configurar un tipo de numeración se utiliza el atributo type de la etiqueta <ol>

Configurando inicio de numeraciónPara configurar un valor de inicio para la numeración se utiliza el atributo start de la etiqueta <ol>

En este caso configuramos un tipo de numeración “romano minusculas”, con un valor de inicio en “7”

Configuración desde elementos de listaTambién se puede configurar el tipo de numeración para cada uno de los elementos de la lista mediante el atributo type de la etiqueta <li>.

Configuracion del tipo de numeracion desde los elementos de una lista.

Listas

No ordenadas

Listas no ordenadasLas listas no ordenadas son iniciadas con la etiqueta <ul> y finalizadas con su complemento de fin de listas </ul>.

Sintaxis.

<ul>

Elementos de la lista.

</ul>

Atributo Operación Valores

type Indica el tipo de viñeta que se utiliza para denotar a los

elementos de la lista.

disc

Circle

square

Atributos.

Listas no ordenadasLa viñeta predefinida para una lista no ordenada es un circulo con fondo oscuro.

Lista no ordenada con la viñeta predefinida.

Configurando viñetasPara configurar la viñeta para una lista no ordenada se utiliza el atributo type de la etiqueta <ul>.

Este ejemplo configura una viñeta cuadrada a una lista no ordenada

Configurando viñetasTambién se puede configurar el tipo de viñeta para cada elemento de la lista.

Este ejemplo configura un tipo de viñeta diferente para cada elemento de la lista.