Listas - Índice   

   Listas não numeradas   

        Para criar uma lista não numerada em html é muito simples. A tag para inserção de uma lista é <ul> e cada item da lista deve aparecer com a tag <li>. Iremos partir logo para o exemplo, que assim fica fácil entender.
        Para elaborar uma lista não numerada deve-se prosseguir da seguinte forma:

1. Comece com a marcação de início de listas <ul>
2. Insira a marcação <li> antes de cada item da lista (não é necessário fechar a notação com </li> pois o parâmetro <li> refere-se somente a um item de cada vez)
3. Encerre com a marcação de final de lista </ul>.

        Um exemplo de elaboração de listas não numeradas:

<html>
<head>
<title>Título</title>
</head>
<body>
<h2>Exemplo de listas não numeradas</h2>
Este exemplo mostra como elaborar uma lista não numerada. Vamos listar frutas:<br>
<ul>
<li>Maçã
<li>Banana
<li>Uva
<li>Abacate
</ul>
</body>
</html>

E fica deste jeito:

        É importante lembrar que cada marcação <li> pode conter vários parágrafos, em casos de textos grandes em listas.


   Listas numeradas   

        Uma lista numerada (ou ordenada) é semelhante a uma lista não numerada, exceto porque se usa a marcação <ol> no lugar de <ul>. Cada item da lista deve aparecer com a tag <li>, da mesma forma como é feito nas listas não numeradas.
        Vamos elaborar uma lista numerada semelhante à mostrada acima:

<html>
<head>
<title>Título</title>
</head>
<body>
<h2>Exemplo de listas não numeradas</h2>
Este exemplo mostra como elaborar uma lista não numerada. Vamos listar frutas:<br>
<ol>
<li>Maçã
<li>Banana
<li>Uva
<li>Abacate
</ol>
Este é um texto para mostrar a eficiência da tag de fechamento. Perceba que como fechamos a lista, este texto não é mostrado como item.
</body>
</html>



   Listas intercaladas   

        As listas intercaladas são bem semelhantes às não numeradas e as numeradas. Elas produzem itens secundários dentro de itens principais, ou seja, criam uma lista dentro da outra. Pode-se inclusive ter um parágrafo, intercalando com uma lista que contenha um único item.
        Exemplo de lista intercalada não numerada (colocadas só a marcações de lista, sem as marcações básicas, mostradas anteriormente em vários exemplos):

<ul>
<li>Alguns Estados da região sul do Brasil:
    <ul>
    <li>Rio Grande do Sul
    <li>Santa Catarina
    </ul>
<li>Alguns Estados da Região Nordeste do Brasil:
    <ul>
    <li>Pernambuco
    <li>Ceará
    <li>Bahia
    </ul>
</ul>

Colocando as marcações anteriores de html, head e título, estas marcações darão origem a este exemplo:



   Listas de definições   

        Uma lista de definições normalmente consiste em alternar um termo e atribuir a ele uma definição. Como se mostrasse um título e embaixo a sua explicação. Usa-se quando temos vários itens e queremos explicá-los. Os navegadores geralmente mostram o termo em uma linha e a definição em outra linha, com outro alinhamento.
        Para criar uma lista de definições são usadas marcações um pouco diferentes das anteriores. A tag de iniciação de uma lista de definições é <dl>, para cada novo termo é usado <dt> e para as definições <dd>. Você pode colocar várias definições para um mesmo termo, para isso basta colocar outra marcação <dd> antes de colocar a marcação de termo <dt> novamente.
        Observe a lista de definições usada para um dicionário inglês/português:

<html>
<head>
<title>Título</title>
</head>
<body>
<h2>Exemplo de lista de definições</h2>
<dl>
<dt>PERNICIOUS
<dd>Nocivo, pernicioso, maligno (adj.)
<dt>PHONE
<dd>Telefone (subs.), telefonar (ver.)
<dd>* BOOTH - Cabine telefônica (subs.)
<dd>* BOX - Cabine telefônica (subs.)
<dd>* CALL - Telefonema, ligada (subs.)
<dt>PHOTOGRAPH
<dd>Fotografia(subs.), fotografar (ver.)
</dl>
Este é um texto fora da lista.
</body>
</html>