Listas y viñetas

El leguaje HTML permite también insertar en la pantalla varios tipos de listas. Para ello se vale de los tags <UL> y <OL>. El primero crea listas en las cuales cada elemento comienza con una viñeta, el segundo crea listas ordenadas, en las cuales cada elemento comienza con un número. La directiva <LI> indica comienzo de elemento. Aunque no es necesario cerrarla (</LI>), siempre hay que cerrar la lista (</UL> o </OL>).

Estos que vienen ahora son los tipos de lista más simples que hay.
 

Código fuente.

Resultado. 


<UL> <!--- Lista normal --->
   <LI>Homer.
   <LI>Marge.
   <LI>Bart.
   <LI>Lisa.
   <LI>Maggie.
</UL>
  • Homer.
  • Marge.
  • Bart.
  • Lisa.
  • Maggie. 

<OL> <!--- Lista ordenada --->
   <LI>Homer.
   <LI>Marge.
   <LI>Bart.
   <LI>Lisa.
   <LI>Maggie.
</OL>
  1. Homer.
  2. Marge.
  3. Bart.
  4. Lisa.
  5. Maggie.

Se puede alojar una lista dentro de otra lista. Es lo que se conoce como "listas anidadas". Estas listas anidadas pueden ser de ambos tipos.
 

Código fuente.

Resultado. 


<UL> <!--- Lista normal --->
   <LI>La familia.
   
   <UL> <!--- Lista normal anidada --->
      <LI>Homer.
      <LI>Marge.
      <LI>Bart.
      <LI>Lisa.
      <LI>Maggie.
   </UL>

<LI>Los amigos.
   
   <OL> <!--- Lista ordenada anidada --->
      <LI>Moe.
      <LI>Barnie.
      <LI>Karl.
      <LI>Lennie.
   </OL>

</UL>
  • La familia.
    • Homer.
    • Marge.
    • Bart.
    • Lisa.
    • Maggie.
  • Los amigos.
    1. Moe.
    2. Apu.
    3. Karl.
    4. Lennie.

Obviamente, en las listas, también se pueden colocar enlaces dentro de las listas.
 

Código fuente.

Resultado. 


<UL>
   <LI><A HREF="homer.htm"><B>Homer.</B></A>
   <LI>Marge.
   <LI><A HREF="bart.htm"><B>Bart.</B></A>
   <LI>Lisa.
   <LI>Maggie.
</UL>

 

alt64@alt64.org

Página principal del curso
Página principal de Alt+64