Site hosted by Angelfire.com: Build your free website today!

Menu De Html

listas en html

Las posibilidades que nos ofrece el HTML en cuestión de tratamiento de texto son realmente notables. No se limitan a lo visto hasta ahora, sino que van más lejos todavía. Varios ejemplos de ello son las listas, que sirven para enumerar y definir elementos, los textos preformateados y las cabeceras o títulos.

Las listas son utilizadas para citar, numerar y definir objetos. También son utilizadas corrientemente para desplazar el comienzo de línea hacia la derecha.

Podemos distinguir tres tipos de listas:

Listas desordenadas
Listas ordenadas
Listas de definición

Las veremos detenidamente una a una.

<b>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, aunque no hay inconveniente en colocarlo). La cosa queda así:

ejemplo

<p>Países del mundo</p>
<ul>
<li>Argentina<br>
<li>Perú <br>
<li>Chile <br>
</ul><br>

asi se verá

Países del mundo

  • Argentina
  • Perú
  • Chile

Podemos definir el tipo de viñeta empleada para cada elemento. Para ello debemos especificarlo por medio del atributo type incluido dentro de la etiqueta de apertura <ul>, si queremos que el estilo sea válido para toda la lista,o dentro le la etiqueta <li> si queremos hacerlo específico de un solo elemento. La sintaxis es del siguiente tipo:

<ul type="tipo de viñeta">

donde tipo de viñeta puede ser uno de los siguientes:

circle
disc
square

en este ejemplo cambiaremos la viñeta de circulo a cuadrado ,y el ultimo lo colocaremos circular.

<ul type="square">

<li>Elemento 1
<li>Elemento 2
<li>Elemento 3
<li type="circle">Elemento 4
</ul>

así se verá:

  • Elemento 1
  • Elemento 2
  • Elemento 3
  • Elemento 4

listas ordenadas

En este caso usaremos las etiquetas <ol> (ordered list) y su cierre. Cada elemento sera igualmente precedido de su etiqueta <li>.

Pongamos un ejemplo:

<p>Reglas de comportamiento en el trabajo</p> <ol> <br>
<li>El jefe siempre tiene la razón<<br>
<li>En caso de duda aplicar regla 1 <br>
</ol><br>

asi se verá:

Reglas de comportamiento en el trabajo


  1. El jefe siempre tiene la razón
  2. En caso de duda aplicar regla 1

Del mismo modo que para las listas desordenadas, las listas ordenadas ofrecen la posibilidad de modificar el estilo. En concreto nos es posible especificar el tipo de numeración empleado eligiendo entre números (1, 2, 3...), letras (a, b, c...) y sus mayúsculas (A, B, C,...) y números romanos en sus versiones mayúsculas (I, II, III,...) y minúsculas (i, ii, iii,...).

Para realizar dicha selección hemos de utilizar, como para el caso precedente, el atributo type, el cual será situado dentro de la etiqueta <ol>. Los valores que puede tomar el atributo en este caso son:

1 Para ordenar por números
a Por letras del alfabeto
A Por letras mayúsculas del alfabeto
i Ordenación por números romanos en minúsculas
I Ordenación por números romanos en mayúsculas

Puede que en algún caso deseemos comenzar nuestra enumeración por un número o letra que no tiene por qué ser necesariamente el primero de todos. Para solventar esta situación, podemos utilizar un segundo atributo, start, que tendra como valor un número. Este número, que por defecto es 1, corresponde al valor a partir del cual comenzamos a definir nuestra lista. Para el caso de las letras o los números romanos, el navegador se encarga de hacer la traducción del número a la letra correspondiente.

el siguiente ejemplo ordena por numero:

<p>Ordenamos por numeros</p>
<ol type="1">
<li>Elemento 1
<li> Elemento 2
</ol>

asi se verá:

Ordenamos por numeros

  1. Elemento 1
  2. Elemento 2

otro ejemplo

<p>Ordenamos por letras</p>
<ol type="a">
<li>Elemento a
<li> Elemento b
</ol>

así se verá

Ordenamos por letras

  1. Elemento a
  2. Elemento b

ejemplo de numeracion romana empezando por x

<p>Ordenamos por números romanos empezando por el 10</p>
<ol type="i" start="10">
<li>Elemento x
<li> Elemento xi
</ol>

el resultado es:

Ordenamos por números romanos empezando por el 10

  1. Elemento x
  2. Elemento xi


atras siguiente indice