•  
     

HTML - Listas

Listas Ordenadas

Para abrir uma lista ordenada utilize a tag <ol>:

Código: Selecionar todos

<ol>Definição da lista</ol>


A tag <li> adiciona os termos da lista:

Código: Selecionar todos

<li>Primeiro termo da lista</li>


Salve o exemplo abaixo como listasol.html e veja como fica:

Código: Selecionar todos

<html>
<head>
<title>Acemprol.com</title>
</head>
<body>
<h1>Lista ordenada</h1>
<ol>
<li>Item 1
<li>item 2
<li>item 3</li>
</body>
</html>


Atributos para a tag <ol>:

Especifica o número do primeiro item:

Código: Selecionar todos

<ol start="5">


Os itens são espeficicados por letras:

Código: Selecionar todos

<ol type="A">

 
Listas não ordenadas:

Para abrir uma lista não ordenada utilize a tag <ul>:

Código: Selecionar todos

<ul>Intens da lista</ul>


Utilize a tag <li> para adicionar os itens da lista:

Código: Selecionar todos

<ul>
<li>Item 1
<li>Item 2
<li>Item 3
</li>
</ul>


Atributos para listas não ordenadas:

Indica o símbolo a ser utilizado:

Código: Selecionar todos

<ul type="Símbolo"


Os itens são demarcados por um quadrado:

Código: Selecionar todos

<ul type="square"


Os itens são descritos por uma bola preta:

Código: Selecionar todos

<ul type="disc">


Os itens são demarcados por uma bola branca:

Código: Selecionar todos

<ul type="circle">


Faça um teste, salve o exemplo como Listasul.html e veja como fica cada item:

Código: Selecionar todos

<html>
<head>
<title>Acemprol.com</title>
</head>
<body>
<h1>Lista não ordenada</h1>
<p>Bola preta</p>
<ul type="disc"> 
<li>Teste 1
<li>Teste 2 
<li>Teste 3
</li> 
</ul>   
<p>Bola branca</p>
<ul type="circle"> 
<li>Teste 1
<li>Teste 2
<li>Teste 3
</li> 
</ul>  
<p>Quadrado preto</p>
<ul type="square"> 
<li>Teste 1 
<li>Teste 2
<li>Teste 3
</li>  
</ul>
</body>
</html>

 

Código: Selecionar todos

<html>
<head>
<title>Acemprol.com</title>
</head>
<body>
<h1>Lista não ordenada</h1>
<p>Bola preta</p>
<ul type="disc">
<li>Teste 1
<li>Teste 2
<li>Teste 3
</li>
</ul>   
<p>Bola branca</p>
<ul type="circle">
<li>Teste 1
<li>Teste 2
<li>Teste 3
</li>
</ul> 
<p>Quadrado preto</p>
<ul type="square">
<li>Teste 1
<li>Teste 2
<li>Teste 3
</li> 
</ul>
</body>
</html>


Imagem