Lista HTML

21/03/2013

1

Olá galera,

como crio uma lista de itens no HTML ?
Responder

Posts

21/03/2013

Joel Rodrigues

Olá.
Existem basicamente três tipos de lista na HTML:
1) Listas ordenadas
2) Listas não ordenadas
3) Listas de definição

Essas listas são formadas a partir das tags <ol>, <ul> e <dl>, respectivamente.
Responder

21/03/2013

Joel Rodrigues

Para facilitar o entendimento, vejamos por partes.
Lista ordenada:
<ol>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ol>

Nesse caso, os itens serão numerados em ordem crescente, de cima para baixo.
Cada item é represento por um par de tags <li></li>.
Responder

21/03/2013

Joel Rodrigues

Lista NÃO ordenada:
<ul>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ul>

Nesse caso, os itens terão apenas marcadores, mas não serão numerados.
Cada item também é representado por um par de tags <li></li>.
Repare que a diferença dessa para a anterior é apenas a tag <ul> ao invés da <ol>.
Responder

21/03/2013

Joel Rodrigues

Por fim, a lista de definição. Esta é usada para apresentar um item e uma definição para ele.
Por exemplo, em um dicionário temos o vocábulo e sua definição.
A estrutura é a seguinte:
<dl>
<dt>Texto 1</dt>
<dd>Definição do texto 1</dd>

<dt>Texto 2</dt>
<dd>Definição do texto 2</dd>

<dt>Texto 2</dt>
<dd>Definição do texto 2</dd>
</dl>
Responder

21/03/2013

Joel Rodrigues

Dicas:
as tags tem seus significados que, em alguns momentos de dúvida, podem nos ajudar:
- OL: Ordered List
- UL: UNordered List
- LI: List Item
- DL: Definition List
- DT: Definition - Text
- DD: Definition - Definition

É comum, para quem está começando, ter dúvida sobre quais tags usar. Esses pequenos detalhes podem ajudar nessas situações.
Qualquer dúvida, é só falar.
Responder

21/03/2013

Joaquim C.

Poxa Joel,

que grande ajuda tu me deu agora em.

Deixa eu te encomodar mais um pouco.

Tem como eu mesclar estas listas, tipo misturar uma ordenada

com desordenada e assim sucessivamente ?

Responder

21/03/2013

Joel Rodrigues

Tem sim, assim como com a maioria dos elementos HTML.
Você pode fazer com que cada item de uma lista seja outra lista. Para isso, basta botar uma lista completa dentro das tags <li> e </li>. Veja um exemplo:
<ul>
	<li>Este é um item comum (1)</li>
	<li>
		<ol>
			<li>Item 1 da sublista 1</li>
			<li>Item 2 da sublista 1</li>
		</ol>
	</li>
	<li>Este é outro item comum (2)</li>
	<li>
		<ol>
			<li>Item 1 da sublista 2</li>
			<li>Item 2 da sublista 2</li>
		</ol>
	</li>
</ul>

Nesse caso temos uma lista não ordenada com itens mesclados. Alguns itens são comuns (apenas texto) e outro são uma sublista.
Caso tenha dúvida, pode falar.
Boa sorte.
Responder

21/03/2013

Joaquim C.

Show

de bola Joel, ja fiz umas brincadeiras

aqui maneira com este conceito de lista.
Responder

21/03/2013

Joel Rodrigues

É legal brincar com as tags pra ver o que dá pra fazer. É uma boa forma de aprender.
Responder

30/03/2013

Joel Rodrigues

Bom, como a dúvida foi sanada, estou encerrando o tópico. Qualquer coisa, é só falar.
Abraço.
Responder
×
+1 DevUP
Acesso diário, +1 DevUP
Parabéns, você está investindo na sua carreira