Programação
 › Algoritmo  › C/C++  › Java
Web
 › HTML/XHTML  › JavaScript  › PHP
Sistema Operacional
 › Comandos de DOS  › Windows  › Linux  › Mac/BSD
Office
 › Word / Writer  › Excel / Calc
Áreas do Site
 › Download  › Fórum  › Blog
Recomendamos
Computadores e Informática em Lisboa
TI Expert » Programação » Web » HTML/XHTML » Listas Ordenadas e Não Ordenadas - tags UL, OL e LI

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
Características - tag UL (texto - lista não ordenada)
uso HTML 4.01 <UL><LI>...</LI></UL>
XHTML <UL><LI>...</LI></UL>
HTML 5 <UL><LI>...</LI></UL>
Formatação Padrão estilo de marcação disco
compensação à esquerda 40px
visualização bloco
Atributos Aceitos id, class, lang , dir, title, style
Eventos Possíveis onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Fonte: w3.org
Características - tag OL (texto - lista ordenada)
uso HTML 4.01 <OL><LI>...</LI></OL>
XHTML <OL><LI>...</LI></OL>
HTML 5 <OL><LI>...</LI></OL>
Formatação Padrão estilo de marcação decimal
compensação à esquerda 40px
visualização bloco
Atributos Aceitos id, class, lang , dir, title, style
Eventos Possíveis onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

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

Faça o download da versão em PDF Indique nosso site Gostou?
Indique nosso site!
Este artigo foi
lido 148242 vezes
Bookmark e Compartilhe

Páginas Relacionadas

Enquete
O Google Chrome OS irá desbancar o Microsoft Windows 7?
» ProgramaçãoAlgorítmo | C/C++ | Java

» WebHTML/XHTML | JavaScript | PHP

» Sistema OperacionalComandos de DOS | Windows | Linux | Mac/BSD

» OfficeWord/Wirter | Excel/Calc

» Áreas do SiteDownloads | Fórum | Blog