Você sabe o que eu amo? Listas.

Você já fez uma lista de tarefas
ou de compras?

Já leu uma lista em uma página web como:

"As 10 caras de cachorros mais ridículas"?

Eu aposto que sim, porque o
mundo está cheio de listas.

O HTML nos dá algumas 'tags'
para fazermos listas,

e vamos praticar, fazendo

uma lista de razões pelas quais os coelhos
são grandes animais de estimação.

Para começar uma lista com marcadores,

devemos começar com a tag "< ul >".

O que significa "< ul >" e o que ela faz?

Aposto que você pode adivinhar o que o "l"
representa 'lista' (List).

O "u", é um pouco mais complicado, 
ele representa 'não ordenada' (Unordered),

isso significa que o navegador não
numerará os itens da lista

Ele só vai adicionar pequenas marcações.

Para ver o que quero dizer, 
vamos adicionar o primeiro item,

"Eles são peludos".
(They're Furry)

Viu o pequeno círculo no lado?

Isso é um marcador.

Agora, o que você acha 
que "< li >" significa?

O "l" é de lista, e o "i" é de item,
ou seja, item da lista (List Item).

Sempre que quisermos adicionar
um item

precisamos adicionar um 
novo "< li >" sob o "< ul >".

Cada "< ul >" deve ter pelo menos
um "< li >" sob ela,

porque uma lista sem itens é muito chato.

Vamos adicionar um pouco mais,

"Grandes ouvintes"
(Great listeners) e...,

"Come todas as suas sobras de cenouras"
(Eat all your leftover carrots)

Esta deve ser uma lista
bastante convincente.

Não sei quem não ia querer um coelho
depois de ler isso.

Eu não numerei esta lista

porque eu não acho que uma das razões

seja mais importante do que a outra,

mas tem um monte de vezes que queremos 
fazer listas numeradas.

Como, se quiséssemos fazer uma

Uma lista com os 
"Os três coelhos mais famosos".

Para começar a nossa lista numerada,

vamos usar um "< ol >" 
em vez de um "< ul >".

Já descobriu o que significa "< ol >"?

Dica: é só cortar a primeira

letra do significado de "< ul >".

Isso mesmo, ele significa
"lista ordenada" (Ordened List).

Ele diz que um navegador deve numerar

automaticamente cada novo item.

No entanto, ainda usamos "< li >" para
adicionar novos itens

dentro da lista.

Vamos colocar
Pernalonga(Bugs Bunny)

temos "Tambor" (Thumper),

e, claro, não podemos esquecer do
"Coelhinho da Páscoa" (Easter Bunny).

O interessante das listas numeradas

é que o navegador toma conta
da numeração por nós.

Então se reorganizarmos, excluir
ou adicionar novos itens

ele sempre atualiza os
números corretamente.

Aí você me diz

que não conhece "Tambor" (Thumper).

Em primeiro lugar, só vou dizer que você

deve assistir o filme "Bambi".

Mas, vou mover contra minha vontade

"Tambor"(Thumper) para a parte inferior.

Agora, o pobre "Tambor" (Thumper)
é o número três.

Agora você tem tudo o que precisa
para fazer listas.

Vá em frente e faça uma lista de tudo.

Traduzido por [ Fernando dos Reis] Revisado por [Valter Bigeli]