Listas
|
-
Uma parte importante do HTML são as listas. O uso de listas numa página
é uma forma fácil de torná-la mais interessante e legível,
além de melhorar a estética.
-
As listas podem ser
- Não ordenadas
- Ordenadas
- De definições
-
Listas não ordenadas
-
Fazem-se assim
- Começa-se com <UL> e acaba-se com </UL>
- Antes de cada item que faz parte da lista usa-se <LI>
- Esta lista tinha dois items, este é o terceiro.
- UL são as iniciais de Unordered List, LI as de
List Item (pensei que gostasse de saber).
- Este item é o quinto, e não fazia falta nenhuma!
- E que tal um exemplo? Sim? O.K.
|
|
Código |
Resultado |
|
<UL>
<LI>Item um
<LI>Item dois
<LI>Etc.
</UL>
|
|
-
A bolinha pode ser modificada, inclusive para um quadrado, mas o resultado disso está
dependente do Browser que fôr utilizado. Basta alterar o <UL>
inicial para <UL TYPE=circle> ou <UL TYPE=disc> ou ainda
<UL TYPE=square>. Experimente...
Com o Netscape resulta, com o MS Internet Explorer não
(pelo menos nas versões testadas).
Listas ordenadas
- Práticamente iguais às anteriores, mas
- Começa-se com <OL> e acaba-se com </OL>
- Em vez de bolinhas agora são números. Já tinha reparado?
- Os items são automaticamente numerados (também se usa <LI>
para cada um).
- OL são as iniciais de Ordered List, não resisti a dizer isto.
- Este item é o quinto, e continua a não fazer falta nenhuma!
- Pelo sim pelo não, segue-se um exemplo!
|
|
Código |
Resultado |
|
<OL>
<LI>Item um
<LI>Item dois
<LI>Etc.
</OL>
|
- Item um
- Item dois
- Etc.
|
-
Em vez de numerais árabes podem-se utilizar romanos: <OL TYPE=I>
numera com I, II, III, IV, etc. <OL TYPE=i> numera com i, ii, iii, iv, ...
Se preferir use <OL TYPE=A> para ter letras em vez de
números (A, B, C, etc.).
O seu sentido estético inclina-se para as minúsculas?
experimente <OL TYPE=a>.
Listas de definições
- São as melhores, mas também as mais complicadas.
Não há bela sem senão, pelos vistos...
- Começa-se com <DL> e acaba-se com </DL>
- Os items têm duas partes, o termo a definir e a respectiva definição.
- Para cada termo a definir começa-se com <DT>
- Antes de cada definição usa-se <DD>
- Quinto item. Juro que não torno. Sério!
- Nada impede que um termo tenha mais que uma definição,
ou que não tenha nenhuma.
- As traduções respectivas são mais ou menos óbvias,
não vale a pena estar a dizê-las.
- Exemplo:
|
|
Código |
Resultado |
|
<DL>
<DT>Termo um
<DD>Definição respectiva
<DT>Termo dois
<DD>Respectiva definição
<DT>Etc.
</DL>
|
- Termo um
- Definição respectiva
- Termo dois
- Respectiva definição
- Etc.
|
O nome lista de definições é enganador, há
muita página que mais não é que uma longa lista destas.
Esta página, por exemplo.
Um pouco de imaginação e de cuidado e pode-se melhorar muito o
aspecto de uma página transformando-a numa lista de definições.
Notas & Acrescentos
-
- Nada impede que se use uma lista dentro de outra lista,
dentro de outra lista, ad infinitum. É o que estamos a fazer agora,
com um pouco de exagero, confesso.
- Houve uma coisa que eu não disse. As listas podem ter um cabeçalho,
ou título. Não fica nada de especial. Se quizer experimentar faça assim:
Entre a indicação de que vai começar a lista (<UL>,
<OL> ou <DL>) e o primeiro item, insira
<LH>AquiVaiUmTituloQualquer</LH>.
Se está curiosa/o porque é que estes dois parágrafos não
têm bolinha no início, é porque são o título de uma lista
sem items, inserida na lista principal; afinal isto sempre serve para alguma coisa...
- Infelizmente os Browsers divergem na interpretação das listas.
Em pequenos pormenores, mas é aborrecido. Esta lista, por exemplo:
- No Netscape aparecem bolas ocas e quadrados.
- No MS Internet Explorer são só bolas a cheio.
- Os alinhamentos do princípio dos items também são diferentes entre
um e outro.
- A existência, ou não, de linhas em branco entre o texto normal e as listas, idem.
- E o pior é que de versão para versão do mesmo Browser
há coisas que variam.
|
