Bitacora de Deadelius logo

martes, 9 de octubre de 2012

Apuntes de HTML: Las listas (Parte 1)


Vuelta a la publicación, hoy retomo la primera parte de las listas en la cual explico que tipo de listas existen en HTML y como se puede utilizar, también explicare para que podremos usar las listas.

En este post intentare explicar lo mas detalladamente posible lo que son las listas ordenadas y desordenadas y comentare los elementos de representación visual que poseen cada uno de los tipos de listas para poder ser diferenciadas y para ofrecer un método por el cual el usuario se oriente mejor por la lista.


Listas Ordenadas

Son aquellas listas que se pueden numerar normalmente se utilizan para crear índices, numeraciones de artículos o listar cualquier elemento en un orden especifico, la sintaxis es la que viene a continuación:
     <ol>
        <li>Elemento Numero Uno</li>
        <li>Elemento Numero Dos</li>
        <li>Elemento Numero Tres</li>
     </ol>
Como se puede observar se empieza abriendo una etiqueta <ol> (Ordened List), a continuación se listan los elementos con la etiqueta <li> (List Item), cada elemento deberá iniciarse con una etiqueta abierta de  <li> y acabar por una etiqueta de cierre </li>, en el ejemplo anterior vemos que por el numero de etiquetas de apertura se han listado tres elementos, para finalizar la lista ordenada esta debe ser cerrada con la etiqueta de cierre </ol>.


Listas Desordenadas

Son aquellas que como su nombre indica están pensadas para cosas desordenadas es decir un listado de elementos que no siguen un orden, suele utilizarse y muy a menudo como método para crear menus o listados de elementos que no necesitan un orden para tener sentido, la sintaxis es la siguiente:
      <ul>
        <li>Inicio</li>
        <li>Sobre Mi</li>
        <li>Software</li>
        <li>Contacto</li>
      </ul>
Al igual que las listas ordenadas estas comienzan con una etiqueta de apertura pero en este caso la etiqueta es <ul> (Unordener List), a continuación se listan los elementos que se deseen, como se vio en el apartado anterior, en el ejemplo vemos cuatro elementos de un menú, para finalizar se cierra la lista con la etiqueta de cierre </ul>.


Elementos de representación visual de cada tipo de lista

A simple vista las listas son interpretadas por el navegador de forma igual, pero es que aquí no acaba la cosa puesto que existen elementos característicos de cada tipo de lista que nos ayudan a poder diferenciarlas y a darles un aspecto mas acorde con su nombre, vamos a verlos a continuación.

Elementos de representación visual de las listas desordenadas:
Para las listas desordenadas contamos con tres elementos decorativos por así decir que nos ayudan a dar una representacion mas visual a nuestras listas estos son disc(disco), circle(circulo) y square(cuadrado) y se asignan a cada <li> por medio de la propiedad type veamos como:
      <ul>
        <li type="disc">Inicio</li>
        <li type="circle">Sobre Mi</li>
        <li type="square">Software</li>
      </ul>
Como podemos observar hemos dado un tipo a cada uno, si escribiésemos ese código en nuestro html, nuestro navegador interpretaría los type y pondría a la izquierda de cada uno un icono, en este caso al primero le pondría un disco, al segundo un circulo, y al tercero un cuadrado, animense a probarlo!

Elementos de representación visual de las listas ordenadas:
Para las listas ordenadas contamos con algunos elementos mas que el las listas desordenadas cinco en concreto que nos ayudaran a organizar nuestras listas son los siguientes: type="1"(Se representa la lista en números arábigos), type="a"(Se representa la lista en orden alfabético y en minúscula), type="A"(Se representa la lista en orden alfabético y en mayúscula), type="i"(Se representa la lista en números romanos y en minúscula), type="I"(Se representa la lista en números romanos y en mayúscula)
      <ol>
        <li type="1">Orden numérico arábigo</li>
        <li type="1">Orden numérico arábigo</li>
        <li type="1">Orden numérico arábigo</li>
      </ol>

      <ol>
        <li type="a">Orden alfabético minúscula</li>
        <li type="a">Orden alfabético minúscula</li>
        <li type="a">Orden alfabético minúscula</li>
      </ol>

      <ol>
        <li type="A">Orden alfabético mayúscula</li>
        <li type="A">Orden alfabético mayúscula</li>
        <li type="A">Orden alfabético mayúscula</li>
      </ol>

      <ol>
        <li type="i">Orden numérico romano minúscula</li>
        <li type="i">Orden numérico romano minúscula</li>
        <li type="i">Orden numérico romano minúscula</li>
      </ol>

      <ol>
        <li type="I">Orden numérico romano mayúscula</li>
        <li type="I">Orden numérico romano mayúscula</li>
        <li type="I">Orden numérico romano mayúscula</li>
      </ol>    
Poco queda que decir después del ejemplo, solo deciros que para comprobar como se ven en un navegador incrustéis este código en vuestro html y lo ejecutéis, así podréis ver el comportamiento del atributo type dependiendo del valor que se le asigne.

Para finalizar solo advertiros de que los elementos de representación de las listas con el atributo type esta en desuso por lo que se recomienda asignar estos elementos de representación mediante hojas de estilo CSS, no obstante para probar como se ve en un navegador se pueden utilizar sin problema ninguno, sin mas me despido recordado a la gente que cualquier inquietud acerca de este tema no dude en preguntármela a través de comentarios o bien por medio de formulario que se encuentra en la opción de menú contacto.