¿Quieres aprender de HTML?, Entra! - 3ª Parte

8:51 in

Listas Desordenadas 


[align=center]Supongamos que queremos mostrar en nuestra página web un pedido, porejemplo una lista de las películas que hemos adquirido recientemente, las que nos gustaría comprar, o quizás es Navidad y nos gustaría realizar una lista con nuestros buenos deseos de todos los años.

HTML tiene unas posibilidades limitadas a la hora del tratamiento del texto. Las listas se usan para citar, numerar y definir cosas . Podemos clasificar las listas en tres tipos:

1. Listas desordenadas
2. Listas Ordenadas
3. Listas de Definición


Listas Desordenadas

Están englobadas por las etiquetas <ul>...</ul> (unordered list). Cada uno de los elementos de la lista comenzará con una etiqueta <li>, que puede o no llevar su correspondiente </li> de cierre.
Veamos un ejemplo:
<p> Lenguajes en Internet </p>
<ul>
<li> Inglés 50% </li>
<li> Español 10 % </li>
<li> Francés 10% </li>
</ul>
Esto nos mostrará:



Atributos de la etiqueta <ul>

La etiqueta <ul> dispone una serie de atributos, con los cuales es posible configurar el aspecto que va a tener la lista.

type="circle / disc / square". Define la viñeta a emplear en la lista. El parámetro tipopuede tomar los valores:
circle: punto redondeado negro y relleno
disc: línea círcular
square: cuadro relleno

Ejemplo (1)
<p> Lenguajes en Internet </p>
<ul type="circle">
<li> Inglés 50% </li>
<li> Español 10 % </li>
<li> Francés 10% </li>
</ul>
Esto nos mostrará:



Ejemplo (2)
<p> Lenguajes en Internet </p>
<ul type="square">
<li> Inglés 50% </li>
<li> Español 10 % </li>
<li> Francés 10% </li>
</ul>
Esto nos mostrará:




Importante: En algunos navegadores no funciona la opcián de cambiar el tipo de viñeta a mostrar y por mucho que lo intentemos, siempre saldrá el redondel negro. [/align]

[align=center][/align]

 Listas Ordenadas 

Están delimitadas por las etiquetas <ol> y </ol> (ordered list). Al igual que las desordenadas cada uno de los elementos de la lista comenzará con una etiqueta <li>, que puede o no llevar su correspondiente </li> de cierre.

Veamos un ejemplo:
<p> Ciudades del Mundo <p>
<ol>
<li> NewYork </li>
<li> Tokio </li>
<li> Shangai </li>
</ol>
Esto nos mostrará:



Atributos de la etiqueta <ol>
La etiqueta <ol> dispone una serie de atributos, con los cuales es posible configurar la apariencia que va a tener la lista. Los más importantes son:

(1) type="1 / a / A / i / I ": define el tipo de secuenciador a usar en la lista. Los secuenciadores en una lista van en su orden natural lógico. El atributo tipo puede tomar los valores:
type="1" - Para ordenar por números - Este el valor que tiene type por defecto
type="a" - Numerar por letras minúsculas del alfabeto
type="A" - Clasificar por letras mayúsculas del alfabeto
type="i" - Numerar por números romanos en minúsculas
type="I" - Ordenación por números romanos en mayúsculas

Veamos algunos ejemplos:



(2) start="n": donde n es el valor con el que comenzará la lista. Los valores del parámetro "n" son números enteros a partir de 1. Si se omite este atributo la lista comenzará por el número 1.

 Listas de Definición 

Están englobadas por las etiquetas <dl> y </dl> (definition list). La etiquetas del elemento a definir es <dt> (definition term) y su correspondiente definición son <dd>.(definition definition). 
Las etiquetas <dt> y <dl> no tienen pareja de cierre, pero la etiqueta padre <dl> sedebe cerrar siempre con su correspondiente pareja </dl>.

Veamos un ejemplo para aclarar esto un poco más:
<p>Diccionario Oxford </p>
<dl>
<dt>footstep
<dd> Seguirle los pasos a alguíen
<dt>misplace
<dd>perder algo transitoriamente
</dl> 
El efecto producido:



Obsérvese que la etiqueta <dd> desplaza hacia la izquierda el texto al cual acompañan. Siendo estas etiquetas usadas algunas veces para desplazar textos a la izquierda.

Ejemplo:

<dl>
<dd> 1 Primer punto
<dl>
<dd> 1.1 Desplazado hacia la izquierda
<dl>
<dd>1.1.1 Mas desplazado hacia la izquierda
</dl>
</dl>
</dl> 
Mostrándonos:

 Atributos de listas 

Estos atributos son comunes a todos los tipos de listas, No Ordenadas, Ordenadas y de Definición .

Title="Comentario". Muestra un comentario, o título al colocar el puntero o cursor del ratón sobre la lista. Se suele utilizar para explicar el propósito de la lista. El uso de este atributo está desaconsejado puesto que los mensajes emergentes en pantallasuelen molestar al usuario.

Ejemplo:
<ul title="El inglés al alcance de todos ">
<li>Footstep </li>
<li> Misplace </li>
<li> Shaman </li>
</ul>
Se muestrará:



dir="ltr / rtl". Establece el sentido de los elementos de la lista, pudiendo ser ltr (left to right) de izquierda a derecha o rtl (right to left) de derecha a izquierda. Por defecto tiene el valor ltr, que es el que tiene el inglés y el resto de idiomas occidentales. El valor rtl se usa en lenguas como la Japonesa y árabe en los que su escritura fluye de derecha a izquierda.

Vamos a ver un ejemplo de este tipo, con

<ol dir= "rtl">:
<li> primer elemento
<li> segundo elemento
<li> tercer elemento
</ol>

Visualización en el navegador:



lang="idioma". Especificación del idioma del contenido de los textos de la lista. Los posibles valores son abreviaturas comunes del idioma usado.
Ejemplos:"es" (español),"en" (inglés),"en-US"( la variación estadounidense del inglés) y "it" (italiano).

[align=center][/align]

 Anidando Listas 

HTML también no plantea la posibilidad de anidar listas. Esta opción nos puede ser muyútil, puesto que nos permite obtener listas mixtas.

Vease el siguiente ejemplo:
<p> Deportes <p>
<ul>
<li> Deportes de pelota
<ol>
<li> Fútbol
<li> Baloncesto
<li> Balon mano
</ol>
<li> Atletismo
<ol>
<li> Maraton
<li> 10.000 metros
<li> Relevos
</ol>
</ul>