Home Importante! História Tutorial HTML Glossário Faqs Buscadores Sinapse
Fóruns ASCII Cores JavaScript CSS Links Novidades Browsers Conclusão
  T u t o r i a l   D H T M L / C S S   E d a u r e l i o
            2 0 0 -  2 0 0 4
Listas
UL, OL
    |____ LI
DL
  |__DT
        |__ DD

Outra forma de estruturar um documento HTML é a utilização de listas. Elas funcionam como um sumário, um menu ou um resumo do conteúdo do documento. Existem dois tipos de listas, as Não ordenadas, que contêm uma série de itens sem numeração, e as Ordenadas, que atribuem um número ou letra para cada elemento da lista.

 

NÃO ORDENADA   <UL atributos> ... </UL>

UL (Unordered List) é o comando usado para gerar lista não ordenada. Ele deve envolver o primeiro e o último item da lista.

Pode conter: <LI>
Utilizado dentro de: <LI>, <DD>, <BODY>, <FORM>, <BLOCKQUOTE>, <TD>, <CENTER>

Atributo opcional:

type=disc, circle ou square.

Estrutura de uma lista típica:
<UL type=square>
<LI> Primeiro item da lista
<LI> Segundo item da lista
<UL>
<LI> Primeiro sub-item do segundo item
<LI> Segundo sub-item do segundo item
</UL>
<LI> Terceiro item da lista
</UL>
  • Primeiro item da lista
  • Segundo item da lista
    • Primeiro sub-item do segundo item
    • Segundo sub-item do segundo item
  • Terceiro item da lista

 

ORDENADA   <OL atributos> ... </OL>

OL (Ordered List) - Consiste no comando para a lista ordenadaa de itens com números, letras maiúscula ou minúscula e algarismos romanos.

Pode conter: <LI>
Utilizado dentro de: <LI>, <DD>, <BODY>, <FORM>, <BLOCKQUOTE>, <TD>, <CENTER>

Atributos opcionais:

TYPE=tipo-de-numeração, onde tipo-de-numeração descreve o formato de numeração empregado na lista. Pode ser de letras:

type=A - Alfabeto maiúsculas;
type=a - Alfabeto minúsculas;
type=I - Algarismos romanos maiúsculos;
type=i - Algarismos romanos minúsculos ou
type=1 - numeração (default).

START=valor, onde valor é o número no qual se inicia a contagem de numeração. Por exemplo: start=8 iniciaria a contagem a partir de 8, viii, VIII, H ou h, dependendo do valor do atributo type.

 Estrutura de uma lista típica:
<OL TYPE=I START=8>
   <LI> Primeiro item da lista
   <LI> Segundo item da lista
   <OL type=a>
     <LI> Primeiro sub-item do segundo item
     <LI> Segundo sub-item do segundo item
   </OL>
   <LI> Terceiro item da lista
</OL>
  1. Primeiro item da lista
  2. Segundo item da lista
    1. Primeiro sub-item do segundo item
    2. Segundo sub-item do segundo item
  3. Terceiro item da lista

 

<LI atributos> ... </LI>

LI (List Item), item de lista. O descritor de fechamento é opcional (em geral não é utilizado).

Pode conter: outro nível de listas (<UL>, <OL>, <DL>), texto, elementos de formatação de caracteres, blocos, <A>, <IMG>, <BR>

Utilizado dentro de: <UL>, <OL>

 

<DL atributos> ... </DL>

Listas de definições.

Pode conter: <DT>, <DD>
Utilizado dentro de: <LI>, <DD>, <BODY>, <FORM>, <BLOCKQUOTE>, <TD>, <CENTER>

Atributos:

compact; é opcional. Especifica uma formatação compacta (que utiliza menos espaço vertical)

 Estrutura de uma lista de definições:
<DL>
   <DT> Termo 1 <DD> Definições 1
   <DT> Termo 2 <DD> Definições 2
   <DL compact>
      <DT> sub-termo 1 <DD> Definições 2.1
      <DT> sub-termo 2 <DD> Definições 2.2
   </DL>
   <DT> Termo 3 <DD> Definições 3
</DL>

 

Termo 1
Definições 1
Termo 2
Definições 2
sub-termo 1
Definições 2.1
sub-termo 2
Definições 2.2
Termo 3
Definições 3

 

<DT atributos> ... </DT>

Marca o termo a ser definido. O descritor de fechamento é opcional e em geral não é utilizado.

Pode conter: texto, elementos de formatação de caracteres, <A>, <IMG>, <BR>
Utilizado dentro de: <DL>

 

<DD atributos> ... </DD>

Marca a definição do termo. O descritor de fechamento é opcional e em geral não é utilizado.

Pode conter: listas (<UL>, <OL>, <DL>, texto, elementos de formatação de caracteres, blocos, <A>, <IMG>, <BR>
Utilizado dentro de: <DL>

 

USANDO FIGURAS COMO MARCADORES

A combinação do comando <BLOCKQUOTE> com alguns gifs pode criar efeitos de marcação elaborados, também. Exemplo:

<BLOCKQUOTE>
<IMG SRC="imagens/blue_ball.gif" ALIGN="middle"> - Capítulo I<BR>
<BLOCKQUOTE>
<IMG SRC="imagens/green_ball.gif" ALIGN="middle"> - Parágrafo<BR>
<BLOCKQUOTE>
<IMG SRC="imagens/yellow_ball.gif" ALIGN="middle"> - Texto<BR>
</BLOCKQUOTE>
</BLOCKQUOTE>
 
<IMG SRC="imagens/blue_ball.gif" ALIGN="middle"> - Capítulo II<BR>
<BLOCKQUOTE>
<IMG SRC="imagens/green_ball.gif" ALIGN="middle"> - Parágrafo<BR>
<BLOCKQUOTE>
<IMG SRC="imagens/yellow_ball.gif" ALIGN="middle"> - Texto<BR>
</BLOCKQUOTE>
</BLOCKQUOTE>
 
<IMG SRC="imagens/blue_ball.gif" ALIGN="middle"> - Capítulo III<BR>
<BLOCKQUOTE>
<IMG SRC="imagens/green_ball.gif" ALIGN="middle"> - Parágrafo<BR>
<BLOCKQUOTE>
<IMG SRC="imagens/yellow_ball.gif" ALIGN="middle"> - Texto<BR>
</BLOCKQUOTE>
</BLOCKQUOTE>
</BLOCKQUOTE>

- Capítulo I
- Parágrafo
- Texto
- Capítulo II
- Parágrafo
- Texto
- Capítulo III
- Parágrafo
- Texto

Home Importante! História Tutorial HTML Glossário Faqs Buscadores Sinapse
Fóruns ASCII Cores JavaScript CSS Links Novidades Browsers Conclusão
© Free Copyright - edaurelio@hotmail.com - Arquivo atualizado em 04/11/04