Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de HTML

HTML: lenguaje básico para crear páginas web

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

4. Listas (II)

4.2 Listas ordenadas

Sintaxis de las listas ordenadas

En las listas ordenadas sus elementos llevan un número o letra que las ordena. Toda la lista va encerrada dentro de la etiqueta <ol> ... </ol>, y al igual que en las listas no ordenadas, cada elemento de la lista está delimitado por la etiqueta <li> ...</li>. Veamos un ejemplo:

<p>Principales ciudades de España</p>
<ol>
   <li>Madrid</li>
   <li>Barcelona</li>
   <li>Valencia</li>
   <li>Sevilla</li>
</ol>

En el navegador este código lo veremos así:

Principales ciudades de España

1. Madrid
2. Barcelona
3. Valencia
4. Sevilla

Estilo de las listas ordenadas

Podemos modificar el indicador del orden en este tipo de listas mediante el atributo type. Así podemos conseguir que el orden lo marquen los números (1, 2, 3,...); las letras mayúsculas o minúsculas (a, b, c, ...), (A, B, C, ...); o los números romanos en mayusculas o en minúsculas (I, II; III; ...), (i, ii, iii, ...).

para ello utilizaremos el atributo type=" " con los siguientes valores:

• type="1": listas con números: (1, 2, 3, ...)
• type="a": listas con letras minúsculas: (a, b, c, ...)
• type="A": listas con letras mayúsculas: (A, B, C, ...)
• type="I": listas con números romanos en mayúsculas: (I, II, III, ...)
• type="i": listas con números romanos en minúsculas: (i, ii, iii, ...)

Por defecto el navegador muestra siempre la primera opción (type="1"). El atributo type=" " puede llevarlo tanto la etiqueta <ol> como la etiqueta <li>. Cuando lo lleva la etiqueta <ol> el cambio de estilo afecta a toda la lista, y cuando lo lleva la etiqueta <li>, el cambio de estilo afecta solo a esa etiqueta.

El estilo de las listas ordenadas también puede modificarse mediante código CSS, con el cual además hay otras opciones.

En la siguiente página de ejemplo se muestran los tipos de listas numeradas que hemos visto:

Ver página de ejemplo.

Modificar el principio de la lista

En ocasiones nos interesa que el número del principio de la lista no sea el uno (1), sino empezar por otro número. Para ello usaremos el atributo start="num". El valor de este atributo será siempre un número: el número por el que empieza la lista. Aunque la lista esté en letras o en números romanos, pondremos siempre el número correspondiente, y el programa ya se encargará de traducirlo al que le corresponda. Ejemplo:

Código HTML:

<ol type "A" start="5" >
   <li>Zaragoza</li>
   <li>Bilbao</li>
   <li>Málaga</li>
   <li>La Coruña</li>
</ol>

En el navegador lo veremos así:

5. Zaragoza
6. Bilbao
7. Málaga
8. La Coruña

En la siguiente plágina veremos las listas de definición y las listas anidadas.

Otras listas.

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com