Listas ordenadas #html

Una lista es una estructura que engloba un conjunto de elementos que la componen. Será ordenada si se quiere establecer un orden concreto.

Ejemplo de lista ordenada:

  1. Primer elemento
  2. Segundo elemento
  3. Tercer elemento

La lista ordenada se representa por la etiqueta <ol> y </ol> y los elementos que componen la lista se representan por la etiqueta <li> y </li>.

Veamos con un ejemplo una lista ordenada para conocer su sintaxis:

Abre el documento html con el navegador, obtendrás lo siguiente:

Resumiendo:

  • La lista empieza por la marca <ol> y su correspondiente marca de cerrado es </ol>.
  • En su interior cada elemento tiene la marca de comienzo <li> y la marca de fin de item </li>.

Para recordar el nombre de estos elementos HTML:

  • <ol> viene de la palabra ordered list.
  • <li> viene de la palabra list item.

Además de todo lo anterior la etiqueta <ol> admite varios atributos:

  • start: establece en qué número empieza la lista.
  • reversed: invierte el orden.
  • type: indica qué tipo de numeral se va a utilizar
    • 1: números
    • a: letras minúsculas
    • A: letras mayúsculas
    • I: números romanos
    • i: números romanos en minúscula

Modifica el ejemplo anterior de la siguiente forma y analiza que ha cambiado:

Vamos a modificarlo de nuevo introduciendo el atributo reversed y analizalo:

ACTIVIDAD

Confecciona una página web de título “Lista ordenada” que muestre los cuatro países con mayor población del planeta (busca esa información en Internet) teniendo en cuenta las siguientes condiciones:

  • Pon como título de segundo nivel (h2) “Países con mayor población”.
  • Lista ordenada de los países con la numeración en letras minúsculas (a, b, c y d).
  • Debajo de la lista debe aparecer la suma de habitantes de esos países en negrita.

Guarda el documento con extensión html y observa el resultado abriéndolo con el navegador.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s