Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colabora��o.
Os doadores receber�o material que n�o consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais HTML - 7
Tutorial para Criar Listas Ordenadas

Neste tutorial veremos como criar algumas listas ordenadas, utilizando alguns tipos de ordena��o.
Lista ordenada HTML ou lista numerada exibe elementos em formato numerado. A tag HTML ol � usada para lista ordenada. Podemos usar a lista ordenada para representar itens em formato de ordem num�rica ou alfab�tica, ou qualquer formato em que uma ordem seja enfatizada. Pode haver diferentes tipos de lista numerada:
a) Num�rico (1, 2, 3)
b) Romano mai�sculo (I II III)
c) Romano Pequeno (i ii iii)
d) Alfabeto Mai�sculo (A B C)
e) Alfabeto Min�sculo (a b c)
Para representar diferentes listas ordenadas, existem 5 tipos de atributos na tag <ol>.

Tipo "1" Este � o tipo padr�o. Nesse tipo, os itens da lista s�o numerados com n�meros.

Tipo "I" Nesse tipo, os itens da lista s�o numerados com n�meros romanos mai�sculos.

Tipo "i" Nesse tipo, os itens da lista s�o numerados com n�meros romanos min�sculos.

Tipo "A" Nesse tipo, os itens da lista s�o numerados com letras mai�sculas.

Tipo "a" Nesse tipo, os itens da lista s�o numerados com letras min�sculas.

Exemplo 1: Uso do Tipo "1":
Vejamos um exemplo simples de uma lista ordenada. Este � o tipo padr�o, onde os itens da lista s�o numerados com n�meros.
<!DOCTYPE html> <html> <body> <ol> <li>HTML</li> <li>Java</li> <li>JavaScript</li> <li>Python</li> <li>PHP</li> <li>SQL</li> </ol> </body> </html>
Veja na imagem abaixo o resultado desse c�digo depois de executado:

Exemplo 2: Uso do Tipo "I":
Vejamos um exemplo para exibir a lista com algarismos romanos mai�sculos.
<!DOCTYPE html> <html> <body> <ol type="I"> <li>HTML</li> <li>Java</li> <li>JavaScript</li> <li>PHP</li> <li>Python</li> <li>SQL</li> </ol> </body> </html>
Veja na imagem abaixo o resultado desse c�digo depois de executado:

Exemplo 3: Uso do Tipo "i":
Vejamos um exemplo para exibir a lista com algarismos romanos min�sculos.
<!DOCTYPE html> <html> <body> <ol type="i"> <li>HTML</li> <li>Java</li> <li>JavaScript</li> <li>PHP</li> <li>Python</li> <li>SQL</li> </ol> </body> </html>
Veja na imagem abaixo o resultado desse c�digo depois de executado:

Exemplo 4: Uso do Tipo "A":
Vejamos um exemplo para exibir a lista com letras mai�sculas.
<!DOCTYPE html> <html> <body> <ol type="A"> <li>HTML</li> <li>Java</li> <li>JavaScript</li> <li>PHP</li> <li>Python</li> <li>SQL</li> </ol> </body> </html>
Veja na imagem abaixo o resultado desse c�digo depois de executado:

Exemplo 5: Uso do Tipo "a":
Vejamos um exemplo para exibir a lista com letras mai�sculas.
<!DOCTYPE html> <html> <body> <ol type="a"> <li>HTML</li> <li>Java</li> <li>JavaScript</li> <li>PHP</li> <li>Python</li> <li>SQL</li> </ol> </body> </html>
Veja na imagem abaixo o resultado desse c�digo depois de executado:

O atributo Start:
O atributo start � usado com a tag ol para especificar de onde come�ar os itens da lista.
<ol type="1" start="5">: Mostrar� valores num�ricos come�ando com "5".
<ol type="A" start="5">: Mostrar� letras mai�sculas come�ando com "E".
<ol type="a" start="5">: Mostrar� letras min�sculas come�ando com "e".
<ol type="I" start="5">: Mostrar� o valor romano mai�sculo come�ando com "V".
<ol type="i" start="5">: Mostrar� o valor romano em min�sculas come�ando com "v".
Vejamos um Exemplo:
<!DOCTYPE html> <html> <body> <ol type="i" start="5"> <li>HTML</li> <li>Java</li> <li>JavaScript</li> <li>PHP</li> <li>Python</li> <li>SQL</li> </ol> </body> </html>
Veja na imagem abaixo o resultado desse c�digo depois de executado:

<< Tutorial para Criar Formul�rios
Tutorial para Criar Listas Desordenadas >>