Listas

Um efeito muito utilizado em qualquer documento é a caracterização de listas.

Em HTML/XHTML, é possível utilizar dois tipos de listas as listas ordenadas e as não ordenadas.

Listas Não Ordenadas

Listas não ordenadas são determinadas pela tag UL.

Listas não ordenadas são marcadas com caracteres simbólicos como círculos, quadrados e discos.

O formato da lista é definido pelo atributo TYPE que pode ser:

• circle: círculo;
• square: quadrado;
• disc: disco.

Todo item de uma lista fica enclausurado na tag LI.

...
<UL TYPE="circle">
  <LI>Lista com círculo</LI>
</UL>
<UL TYPE="square">
  <LI>Lista com quadrado</LI>
</UL>
<UL TYPE="disc">
  <LI>Lista com disco</LI>
</UL>
...

• Lista com círculo

• Lista com quadrado

• Lista com disco

Listas Ordenadas

Listas ordenadas são determinadas pela tag OL.

Listas ordenadas são marcadas com caracteres como números, letras e algarismos romanos.

O formato da lista é definido pelo atributo TYPE que pode ser:1AaIi

• 1: lista numerada;
• A: lista com letras maiúsculas;
• a: lista com letras minúsculas;
• I: lista com algarismos romanos usando caracteres maiúsculos
• i: lista com algarismos romanos usando caracteres minúsculos

Assim como a lista não ordenada, todo item da lista fica enclausurado na tag LI. A diferença é que não precisamos nos preocupar com a sequência, pois isso o próprio browser se encarrega de cuidar.

Tanto a tag OL quanto a tag UL são aninháveis, ou seja, uma pode existir dentro da outra. Nesses casos conseguimos um efeito em cascata com vários ítens. Veja o exemplo abaixo:

...
<OL type="I">
  <LI>Seção I</LI>
  <OL type="A">
    <LI>tópico A</LI>
    <UL TYPE="disc">
      <LI>Ítem 1</LI>
      <LI>Ítem 2</LI>
      <UL TYPE="square">
        <LI>Sub-ítem 1</LI>
        <LI>Sub-ítem 2</LI>
      </UL>
      <LI>Ítem 3</LI>
    </UL>
    <LI>tópico B</LI>
    <UL TYPE="disc">
      <LI>Ítem 1</LI>
      <UL>
        <LI>Sub-ítem 1</LI>
        <LI>Sub-ítem 2</LI>
        <LI>Sub-ítem 3</LI>
      </UL>
    </UL>
  </OL>
</OL>
...

O que resultaria em:

1. Seção I
1. tópico A
• Ítem 1
• Ítem 2
• Sub-ítem 1
• Sub-ítem 2
• Ítem 3
2. tópico B
• Ítem 1
• Sub-ítem 1
• Sub-ítem 2
• Sub-ítem 3

Autor: Denys William Xavier
Este artigo está sob Licença Creative Commons.

Gostou? Indique nosso site!

Este artigo foi lido 4584 vezes

Páginas Relacionadas