10 Listas

10.1 Introdução às listas

• Informação não ordenada
• Informação ordenada
• Definições

A lista anterior, por exemplo, é uma lista não ordenada, definida através do elemento UL:

<UL>
<LI>Informação não ordenada
<LI>Informação ordenada
<LI>Definições
</UL>

Uma lista ordenada, definida através do elemento OL, deverá conter informações referentes aos elementos enfatizantes da respectiva ordem, como por exemplo nesta receita:

1. Misturar por completo os ingredientes a seco.
2. Adicionar os ingredientes líquidos.
3. Mexer ininterruptamente durante 10 minutos.
4. Levar ao forno e deixar cozinhar uma hora a 300 graus.

As listas de definição, criadas através do elemento DL, consistem geralmente numa série de pares terminológicos termo/definição (embora possam as listas de definição ter uma outra aplicação). Poder-se-á usar uma lista de definição, por exemplo, para se fazer publicidade a um determinado produto:

Redução dos custos

A nova versão deste produto custa significativamente menos do que a versão anterior!

De fácil utilização

Nós alterámos o produto de forma a que você o possa usar mais facilmente!

Não representa qualquer risco para as crianças

Você poderá deixar os seus filhos sózinhos na sala, sem temer que eles se possam aleijar (no entanto, sem garantia).

definido no HTML como:

<DL>
<DT><STRONG>Redução dos custos</STRONG>
<DD>A nova versão deste produto custa significativamente menos do que a versão anterior!

<DT><STRONG>De fácil utilização</STRONG>
<DD>Nós alterámos o produto de forma a que você o possa usar mais facilmente!
<DT><STRONG>Não representa qualquer risco para as crianças</STRONG>
<DD>Você poderá deixar os seus filhos sózinhos na sala,
sem temer que eles se possam aleijar (no entanto, sem garantia).
</DL>

As listas poderão ainda ser integradas num documento, podendo ainda usar-se conjuntamente diferentes tipos de listas. O exemplo que se segue baseia-se numa lista de definição, contendo uma lista não ordenada (os ingredientes) e uma lista ordenada (o procedimento):

Os ingredientes:

• 100 g. de farinha
• 10 g. de açucar
• 1 copo de água
• 2 ovos
• sal e pimenta

O procedimento:

1. Primeiro, misturar bem os ingredientes a seco.
2. Adicionar os ingredientes líquidos.
3. Mexer ininterruptamente durante 10 minutos.
4. Levar ao forno e deixar cozinhar uma hora a 300 graus.

Notas:

Poder-se-á improvisar um pouco, adicionando-se algumas passas de uva.

A apresentação exacta dos três tipos de listas depende em muito do agente. Nós aconselhamos os autores a não usarem as listas unicamente como forma de fazer sobressaír o texto. Este é um pormenor estilístico e mais propriamente processado através das folhas de estilo.

10.2 Listas não ordenadas (UL), Listas ordenadas (OL) e os itens ou tópicos nelas contidos (LI)

<!ELEMENT UL - - (LI)+                 -- lista não ordenada -->
<!ATTLIST UL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >
<!ELEMENT OL - - (LI)+                 -- lista ordenada -->
<!ATTLIST OL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

"tag" de abertura: requerida
"tag" de encerramento: requerida

<!ELEMENT LI - O (%flow;)*             -- item ou tópico contido na lista -->
<!ATTLIST LI
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

"tag" de abertura: requerida
"tag" de encerramento: opcional

As listas ordenadas e as listas não ordenadas são-nos apresentadas de uma forma idêntica, com a excepção dos agentes visuais numerarem os itens contidos nas listas ordenadas. Os agentes poderão apresentar esses números de várias maneiras. As listas não ordenadas não são numeradas.

Ambos os tipos de lista são constituídos por sequências de itens, os quais são definidos pelo elemento LI (cuja "tag" de encerramento poderá ser omitida).

<UL>
   <LI> ... primeiro item contido na lista...
   <LI> ... segundo item contido na lista...</em>
   ...
</UL>

<UL>
     <LI> ... Nível um, número um...
     <OL>
        <LI> ... Nível dois, número um...
        <LI> ... Nível dois, número dois...
        <OL start="10">
           <LI> ... Nível três, número um...
        </OL>
        <LI> ... Nível dois, número três...
     </OL>
     <LI> <em>... Nível um, número dois...</em>
</UL>

<ol>
<li value="30"> torna este item no número 30.
<li value="40"> torna este item no número 40.
<li> torna este item no número 41.
</ol>

<!-- listas de definição - DT para o termo, DD para a sua definição -->

<!ELEMENT DL - - (DT|DD)+              -- lista de definição -->
<!ATTLIST DL
  %attrs;                              -- %coreattrs, %i18n, 
%events --
  >

<!ELEMENT DT - O (%inline;)*           -- definição do termo -->
<!ELEMENT DD - O (%flow;)*             -- descrição da definição -->
<!ATTLIST (DT|DD)
  %attrs;                              -- %coreattrs, %i18n, 
%events --
  >

  
<DL>
  <DT>Dweeb
  <DD>pessoa jovem e dinâmica que poderá amadurecer
    e tornar-se num <EM>banana</EM> ou num <EM>idiota</EM>

  <DT>Hacker
  <DD>um programador inteligente

  <DT>banana
  <DD>tecnicamente brilhante, mas socialmente inapto.

</DL>

<DL>
   <DT>Carácter
   <DT>Carácter
   <DD> personalidade inerente a um determinado
              indivíduo. O espírito ou a alma da coisa.
   <DD> símbolo tipográfico ou em branco;
              letra, vogal ou consoante;
              símbolo;
</DL>

<STYLE type="text/css">
OL.withroman { list-style-type: lower-roman }
</STYLE>
<BODY>
<OL class="withroman">
<LI> Passo um ...
<LI> Passo dois ...
</OL>
</BODY>

<DL>
  <DT>Dweeb
  <DD>pessoa jovem e dinâmica que ao amadurecer se poderá
    tornar num <EM>banana</EM> ou num <EM>idiota</EM>

  <DT>Hacker
  <DD>um programador inteligente

  <DT>Banana
  <DD>tecnicamente brilhante, mas socialmente um zero à esquerda.
</DL>

Dweeb
       pessoa jovem e dinâmica que ao amadurecer poderá tornar-se num Banana ou num Idiota
Hacker
       um programador inteligente 
Banana
       pessoa brilhante do ponto de vista técnico, mas socialmente um zero à esquerda.