Listas

28/09/2010

Você usa listas para criar menus simples ou organização de temas e textos em sua página.

O HTML permite definir três categorias distintas de listas:
- Ordenadas,
- Sem ordenação
- E uma especial, chamada lista de definição.

- Listas Ordenadas
As listas ordenadas são numeradas e só usam um bullet (marca de · ) para demarcar cada uma das linhas.

Em listas ordenadas, o navegador se encarrega de colocar os números que referenciam cada lista. Uma lista ordenada deve ser envolvida pelo par <OL> ... </OL>.

Exemplo 1:

<OL>
<LI> Primeiro item de uma lista ordenada
<LI> Segundo item de uma lista ordenada
<LI> Terceiro item de uma lista ordenada
</OL>

Produz o seguinte resultado:

1. Primeiro item de uma lista ordenada
   
2. Segundo item de uma lista ordenada
   
3. Terceiro item de uma lista ordenada
   

- Listas sem Ordenação
Em listas não ordenadas é utilizado algum símbolo gráfico. Este tipo de lista será envolvido pelo par <UL> ... </UL>.

Para que o interpretador distinga um trecho de texto de uma lista deverá ser colocado no início de cada linha a diretiva <LI>, não havendo a necessidade de fechar esta tag com </LI>. Alguns exemplos:

Exemplo 2:

<UL>
<LI> Primeiro item de uma lista não ordenada
<LI> Segundo item de uma lista não ordenada
<LI> Terceiro item de uma lista não ordenada
</UL>

Produz o seguinte resultado:

• Primeiro item de uma lista não ordenada
  
• Segundo item de uma lista não ordenada
  
• Terceiro item de uma lista não ordenada
  

- Listas Encadeadas
O próximo exemplo será de uma lista encadeada. Você pode encadear tantas listas quantas quiser, desde que envolva cada nível de encadeamento com <OL> ... </OL> ou <UL> ... </UL>.

<OL>
<LI> Primeiro item de uma lista encadeada.
<LI> Segundo item de uma lista encadeada.
<UL>
<LI> Terceiro item de uma lista encadeada.
<LI> Quarto item de uma lista encadeada.
</UL>
<LI> Quinto item de uma lista encadeada.
</OL>

Produz o seguinte resultado:

1. Primeiro item de uma lista encadeada.
2. Segundo item de uma lista encadeada.
   • Terceiro item de uma lista encadeada.
   • Quarto item de uma lista encadeada.
3. Quinto item de uma lista encadeada.

A numeração de listas ordenadas obedece ao nível de encadeamento das respectivas linhas.

Não é preciso usar a tag <P> para forçar quebras de linha, pois os comandos <UL> e <OL> forçam uma quebra de linha automaticamente.

Você pode incluir tags após cada tag de lista como uma tag para definir a fonte e o tamanho da letra ou a cor. Você pode combinar estas tags. Você também pode colocar links em cada lista, bastando apenas usar a tag de link logo após a tag de lista. Veja o exemplo:

<OL>
<LI><a href="#"> Primeiro item de uma lista ordenada com link </a>
<LI> Segundo item de uma lista ordenada sem link
<LI><a href="#"> Terceiro item de uma lista ordenada com link </a></OL>

O resultado é:

1. Primeiro item de uma lista ordenada com link
2. Segundo item de uma lista ordenada sem link
3. Terceiro item de uma lista ordenada com link