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