listas

Prévia do material em texto

www.tiexpert.net – O ponto de encontro do estudante de TI
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>item 1</LI>
 <LI>item 2</LI>
http://www.tiexpert.net/ver.php?page=155 Página 1
www.tiexpert.net – O ponto de encontro do estudante de TI
 <UL TYPE="square">
 <LI>Sub-item 1</LI>
 <LI>Sub-item 2</LI>
 </UL>
 <LI>item 3</LI>
 </UL>
 <LI>tópico B</LI>
 <UL TYPE="disc">
 <LI>item 1</LI>
 <UL>
 <LI>Sub-item 1</LI>
 <LI>Sub-item 2</LI>
 <LI>Sub-item 3</LI>
 </UL>
 </UL>
 </OL>
</OL>
...
O que resultaria em:
I. Seção I 
A. tópico A 
 Item 1 
 Item 2 
 Sub-item 1 
 Sub-item 2 
 Item 3 
B. tópico B 
 Item 1 
 Sub-item 1 
 Sub-item 2 
 Sub-item 3
Autor: Denys William Xavier
Este artigo está sob Licença Creative Commons
Para ver uma cópia desta licença, visite http://creativecommons.org/licenses/by-nc-sa/2.5/br/
ou envie uma carta para Creative Commons, 171 Second Street, Suite 300, San Francisco, California 94105, USA.
http://www.tiexpert.net/ver.php?page=155 Página 2