Páginas

▼

terça-feira, agosto 05, 2008

Como criar listas numeradas

HTML está para a blogosfera assim como o inglês está para o mundo, todos sabem que precisam aprender, mas são poucos os que se lembram de estudar. Pensando nisso, resolvi voltar a escrever posts sobre a linguagem para ir ensinando em doses homeopáticas e não traumatizar ninguém.

Este post eu resolvi fazer porque tenho visto na web (não apenas em blogs) muitas listas numeradas sendo criadas "na unha", assim:

1. Arroz<BR>
2. Feijão<BR>
3. Carne<br>
4. Batata<br>
6. Beterraba<br>
7. Alface<BR>
9. Limão<br>
10. Leite

Os problemas de se criar uma lista assim:

  • Estético - Somente os números ficam alinhados, as linhas de texto não.
  • Cansativo - Você tem que digitar número por número, correndo maior risco de errar (observe que no exemplo acima pulei os ítens 5 e 8).
  • Refazer - Se você errar/pular/excluir algum ítem terá que fazer toda a lista novamente.

O jeito ideal de se fazer uma lista numerada é:

Código Resultado
<ol>
<li> Arroz
<li> Feij&atilde;o
<li> Carne
<li> Batata
<li> Beterraba
<li> Alface
<li> Limão
<li> Leite
</ol>
  1. Arroz
  2. Feijão
  3. Carne
  4. Batata
  5. Beterraba
  6. Alface
  7. Limão
  8. Leite

Numa lista numerada, você pode utilizar os seguintes atributos dentro da tag <ol>:

start
Como mostrado no exemplo acima, start serve para indicar de qual valor a lista deve começar. Se você não colocar, a lista começa do padrão, que é, obviamente, 1.
<ol start='99'>
<li>Exemplo</li>
<li>de lista</li>
</ol>
  1. Exemplo
  2. de lista
type
Se você não quiser usar a numeração padrão, que é em algarismos arábicos, também pode escolher outra.
Alfabeto
maiúsculo
<ol type='A'>
<li>Exemplo</li>
<li>de lista</li>
</ol>
  1. Exemplo
  2. de lista
Alfabeto
minúsculo
<ol type='a'>
<li>Exemplo</li>
<li>de lista</li>
</ol>
  1. Exemplo
  2. de lista
Números
romanos
maiúsculos
<ol type='I'>
<li>Exemplo</li>
<li>de lista</li>
</ol>
  1. Exemplo
  2. de lista
Números
romanos
minúsculos
<ol type='i'>
<li>Exemplo</li>
<li>de lista</li>
</ol>
  1. Exemplo
  2. de lista

Leia também:



Pix meutedio arroba mail ponto com

às
Continue lendo sobre: ,

Um comentário:

  1. Anônimo5/1/09 20:52

    ola..não sei como vim parar aqui na sua página, vim na verdade pela busca do google, estou atraz de alguns códigos por ai, mas não pude deixar de reparar nestes pequenos códigos seus, são intereçantes, já conhecia alguns deles, mas gostei da forma que vc se expressou com eles, muito bom post, nota 10...abraços

    ResponderExcluir

Todos os comentários são moderados pela autora do blog.