HOME PAGE JAVASCRIPT
Botões Cálculos Datas Essenciais Janelas Flutuantes Menus
HTML CSS FLASH PHP ASP GERADORES CORES MISCELANEA Contato  






Listas

A formatação exata de uma lista depende do navegador do visitante do site

Para criar listas são empregados os seguintes comandos:

<ul></ul>  abre e fecha uma lista não numerada
<ol></ol>
abre e fecha uma lista numerada
<li></li>
abre e fecha cada item da lista

Obs: as tags de fechamento das listas e dos itens, que outrora eram indispensáveis, hoje se tornaram opcionais. Por medida de segurança, no sentido de que todos os Navegadores interpretem a formatação da tabela corretamente, é aconselhável continuar a usá-las.

Tipos de listas

Ponto

Sintaxe: <ul type="disc">
                 <li>Texto</li>
               </ul>

Exemplo: para criar uma lista entre com texto e click "Adicionar a lista"



      Quadrado

      Sintaxe:  <ul type="square">
                        <li>Texto</li>
                        <li>Texto</li>
                    </ul>


      Círculo

      Sintaxe: <ul type="circle">
                      <li>Texto</li>
                      <li>Texto</li>
                   </ul>
       


      Figuras

      Sintaxe:  <ul imagesrc="Origem da imagem">
                       <li>exemplo</li>
                       <li>exemplo</li>
                    </ul>

      Exemplo:
      <ul imagesrc="../../images/pasta.gif">
      <li>exemplo</li>
      <li>exemplo</li>
      </ul>

      Resultado:

    exemplo
    exemplo

      Numeradas

      Sintaxe: <ol type="X">
                      <li>Texto</li>
                      <li>Texto</li>
                   </ol>

      onde X pode assumir os seguintes valores: 
      I (Lista com marcadores em Romanos Maiúsculos)
      i (Romanos Minúsculos)
      A (Letras Maiúsculas)
      a (Letras Minúsculas)


      Exemplo com marcadores em romanos maiúsculos: 
      <ol type="I">
             <li>Texto</li>
             <li>Texto</li>
      </ol>

      Resultado:

      1. Texto

      2. Texto


      E a Lista com números normais 1, 2, 3 etc...? Como fazer?
      Quando não se inclui o parâmetro type="X" os navegadores atribuem valor padrão (default), que é o de números decimais.
      Exemplo:
      <ol>
           <li>Texto</li>
           <li>Texto</li>
      </ol>

      Resultado:

      1. Texto

      2. Texto


      Estrutura

      É possível criar uma lista de vários níveis em um formato de estrutura, conforme exemplo a seguir:

      1. Texto

        1. Texto

          1. Texto

            1. Texto

              Texto

               

      A sintaxe utilizada no exemplo acima foi::
      <ol>
         <li>Texto
            <ol>
               <li type="I">Texto
                  <ol>
                     <li type="A">Texto
                        <ol>
                           <li type="a">Texto
                              <ol>
                                 <li type="i">Texto
                                    <ul imagesrc="Origem da figura"><li>Texto</li>
                                    </ul>
                                 </li>
                              </ol>
                           </li>
                        </ol>
                     </li>
                  </ol>
               </li>
            </ol>
         </li>
      </ol>


      Outros Atributos das listas

      Start=X - para iniciar a contagem a partir de X. Se a lista for numerada e X for igual a 3, a numeração é iniciada a partir daí. Se a lista for de letras é iniciada em C ou c. Se for de números romanos maiúsculos é iniciada em em III e minúsculos em iii.

      Exemplo com lista padrão, ou seja, números decimais:
             <ol start="4">  indicação que a lista deve começar a partir do quarto elemento.
                  <li>texto</li>
                  <li>texto</li>
             </ol>

      Resultado:

      1. texto

      2. texto

      Value=X - muda a numeração da lista a partir de uma tag li

      Exemplo com lista de letras maiúsculas:
            <ol type="A">
                  <li>primeira</li>
                  <li>segunda</li>
                   <li value="8">oitava</li>  indicando uma mudança para o oitavo elemento (H)
            </ol>

      Resultado:

      1. prima

      2. segunda

      3. oitava


    Na caixa de Teste on-line abaixo você poderá criar e testar uma lista.

    Teste on-line: