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 - 8
Tutorial para Criar Listas Desordenadas

Neste tutorial veremos como criar algumas listas desordenadas, utilizando alguns tipos de ordena��o.
Lista HTML n�o ordenada ou lista com marcadores exibe elementos em formato de marcadores. Podemos usar uma lista n�o ordenada onde n�o precisamos exibir itens em nenhuma ordem espec�fica. A tag HTML ul � usada para a lista n�o ordenada. Pode haver 4 tipos de lista com marcadores:
1) disco
2) c�rculo
3) quadrado
4) Nenhum
Para representar diferentes listas ordenadas, existem 4 tipos de atributos na tag <ul>.

Tipo "disc" Este � o estilo padr�o. Nesse estilo, os itens da lista s�o marcados com marcadores.

Tipo "circle" Nesse estilo, os itens da lista s�o marcados com c�rculos.

Tipo "square" Nesse estilo, os itens da lista s�o marcados com quadrados.

Tipo "none" Nesse estilo, os itens da lista n�o s�o marcados.

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

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

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

Exemplo 4: Uso do Tipo "none":
Vejamos um exemplo para exibir a lista sem nenhum tipo de s�mbolo.
<!DOCTYPE html> <html> <body> <ul type="none"> <li>HTML</li> <li>Java</li> <li>JavaScript</li> <li>PHP</li> <li>Python</li> <li>SQL</li> </ul> </body> </html>
Veja na imagem abaixo o resultado desse c�digo depois de executado:

<< Tutorial para Criar Listas Ordenadas
Tutorial para Criar um �udio Player >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino