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>

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:

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>

 

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>
  1. Honrarás a papi y a mami
  2. 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