Criando Listas HTML – aula 5

Seugue abaixo como criar listas utilizando html, tem o código e o resultado:

Lista Numerada (ordenada) :

<ol>
        <li>Item 01</li>
        <li>Item 02</li>
        <li>Item 03</li>
        <li>Item 04</li>
        <li>Item 05</li>
        <li>Item 06</li>

</ol>

Fica assim:

1. Item 01
2. Item 02
3. Item 03
4. Item 04
5. Item 05
6. Item 06

Lista Não-numerada (Não-ordenada) :

<ul>
        <li>Item 01</li>
        <li>Item 02</li>
        <li>Item 03</li>
        <li>Item 04</li>
        <li>Item 05</li>
        <li>Item 06</li>

</ul>

Fica assim:

• Item 01
• Item 02
• Item 03
• Item 04
• Item 05
• Item 06

Lista de Glossário:

<DL> Indica o início de uma lista em forma de um glossário
<DT>Termo a ser definido
<DD>Definição do termo

<dl>
          <dt>O que faz a tag UL ?</dt>
                  <dd>Cria uma lista com marcadores</dd>
          <dt>O que faz a tag OL ?</dt>
                  <dd>Cria uma lista ordenada utilizando números<dd>
</dl>

Fica assim:

O que faz a tag UL ?

Cria uma lista com marcadores

O que faz a tag OL ?

Cria uma lista ordenada utilizando números

 Misturando:

<dl>
<dt>Termo a ser definido</dt>
<dd>Definição do termo</dd>
         <ol>
                 <li>Item numerado 01</li>
                <li>Item numerado 02</li>
                       <ul>
                               <li>Item não ordenado (marcadores)</li>
                       </lu>
               <li>Item numerado 03</li>
         </ol>
<dt>Termo à definir</dt>
<dd>Definição do termo</dd>
</dl>

Fica assim: 

Termo a ser definido

Definição do termo

1. Item numerado 01
2. Item numerado 02
   • Item não ordenado (marcadores) 
3. Item numerado 03

Termo à definir

Definição do termo

Bom, é isso, essas listas vão ser muito úteis quando forem desenvolver páginas utilizando css, utilizadas muito para criação de menus.

Jair Alievi