HTML

Listas

Podemos distinguir tres tipos de listas: • Listas desordenadas • Listas ordenadas • Listas de definición

Listas desordenadas.- Son delimitadas por las etiquetas <ul> y </ul> (unordered list). Cada uno de los elementos de la lista es citado por medio de una etiqueta <li> (sin cierre). Ejemplo:

<p>Países del mundo</p> <ul>

<li>Argentina <li>Perú <li>Chile

</ul>

Listas desordenadas

Atributos de las etiqueta <ul> </ul>Type: Define el tipo de viñeta de cada elemento.Si queremos hacerlo específico de un solo elemento lo escribiremos dentro de la etiqueta <li>. La sintaxis es del siguiente tipo:

<ul type="tipo de viñeta">donde tipo de viñeta puede ser una de las siguientes: circle, disc, square.

Style: Cambia el color de la lista con viñetas.Parámetro

style="Color: nombrecolor". la siguiente línea de código aplica una viñeta de tipo cuadrada, con color de texto y viñeta azul.

<ul type="square" style="color: Blue“>

Listas II: Listas ordenadas

Listas ordenadas, en este caso usaremos las etiquetas <ol> (ordered list) y su cierre. Cada elemento será igualmente precedido de su etiqueta <li>.Type=tipo Indica el tipo de numeración utilizada. Si no se indica se entiende que será lista ordenada numéricamente.Los tipos posibles son :

1 = Numéricamente. (1,2,3,4,... etc.)a = Letras minúsculas. (a,b,c,d,... etc.)A = Letras mayúsculas. (A,B,C,D,... etc.)i = Números romanos en minúsculas. (i.ii,iii,iv,v,.. etc.)I = Números romanos mayúsculas. (I,II,III,IV,... etc.)

<ol type=“I" style="color: Blue” start=“5”>

Listas III: Listas de definición

Cada elemento es presentado junto con su definición. La etiqueta principal es <dl> y </dl> (definition list). Las etiquetas del elemento y su definición son <dt> (definition term) y <dd> (definition definition) respectivamente.

Ejemplo<p>PARTES DE LA COMPUTADORA</p> <dl> <dt>Pantalla: <dd>Dispositivo de salida de la computadora<dt>Teclado:<dd>Dispositivo de entrada de la computadora</dl>

Anidando listas

Permite crear listas de una forma anidada. De esta forma, podemos conseguir listas mixtas como por ejemplo: <p>Ciudades del mundo</p> <ul>

<li>Argentina <ol>

<li>Buenos Aires <li>Bariloche

</ol><li>Uruguay

<ol> <li>Montevideo

<li>Punta del Este</ol> </ul>

Práctica