Taller

>> Taller >> Curso de HTML by BenKo >> Cap. 4, Listas.

Lección 4

Listas

---

En este capítulos veremos cómo se hacen las listas de viñetas y las numeradas. Empezaremos con lo más sencillo: las de viñetas. Para ello usamos la etiqueta <UL> para marcar el inicio de la lista, una o varias etiquetas <LI> por cada elemento de la lista y la etiqueta de cierre </UL> para marcar el fin de la lista.

<UL>

<LI>Item 1

<LI>Item 2

</UL>

• Item 1
• Item 2

Ahora bien, la etiqueta <UL> tiene un parámetro, que se llama TYPE e indica el tipo de viñeta que se usará. TYPE puede tener los siguientes valores:

• DISC: El valor por defecto. Un punto relleno.
• CIRCLE: Un punto sin rellenar (un círculo).
• SQUARE: Un cuadrado.

Además, podemos anidar y combinar varios tipos de listas, así:

<UL TYPE="square">

	<LI>Item 1

	<LI>Item 2

	<UL TYPE="disc">

		<LI>Item 1

		<LI>Item 2

	</UL>

	<UL TYPE="circle">

		<LI>Item 1

		<LI>Item 2

	</UL>

</UL>

• Item 1
• Item 2
  • Item 1
  • Item 2
  • Item 1
  • Item 2

---

 

Las listas numeradas son parecidas a las de viñetas, pero se forman con la etiqueta <OL>.

<OL>

<LI>Item 1

<LI>Item 2

</OL>

1. Item 1
2. Item 2

La etiqueta <OL> también tiene el parámetro TYPE, que puede tomar los siguientes valores:

1: Por defecto. Lista numerada con números decimales.

a: Numeración con letras minúsculas.

A: Numeración con letras mayúsculas.

i: Numeración romana con minúsculas.

I: Numeración romana con mayúsculas.

 

También podemos anidar listas numeradas:

<OL TYPE="A">

	<LI>Item 1

	<LI>Item 2

	<OL TYPE="I">

		<LI>Item 1

		<LI>Item 2

		<OL TYPE="1">

			<LI>Item 1

		</OL>

	</OL>

	<OL TYPE="a">

		<LI>Item 1

	</OL>

	<OL TYPE="i">

		<LI>Item 1

		<LI>Item 2

	</OL>

</OL>

 

1. Item 1
2. Item 2
   1. Item 1
   2. Item 2
      1. Item 1
   1. Item 1
   1. Item 1
   2. Item 2

 

Además, la etiqueta <OL> tiene otro parámetro, que es START. Con esto definimos el número por el que queremos que empiece a contar.

<OL TYPE="I" START="4">

<LI>Honrarás a papi y a mami

<LI>Hummm...¿Cuál seguía?

</OL>

4. Honrarás a papi y a mami
5. Hummm...¿Cuál seguía?

 

---

 

Y con esto acabamos el capítulo. ¿Ejercicio? Puedes poner los links de links.html en una lista de viñetas o hacer un ránking con las webs que más te gustan. También puedes poner en home.html las secciones en una lista (aunque por ahora sólo hay una sección, pronto habrá mas y tendremos que ordenarlas de alguna manera, ¿no?).

 

P' atrás | Principio | P' alante