Lista HTML

Front-end

21/03/2013

Olá galera,

como crio uma lista de itens no HTML ?
Joaquim C.

Joaquim C.

Curtidas 1

Melhor post

Joel Rodrigues

Joel Rodrigues

21/03/2013

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>
GOSTEI 1

Mais Respostas

Joel Rodrigues

Joel Rodrigues

21/03/2013

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.
GOSTEI 0
Joel Rodrigues

Joel Rodrigues

21/03/2013

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>.
GOSTEI 0
Joel Rodrigues

Joel Rodrigues

21/03/2013

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>.
GOSTEI 0
Joel Rodrigues

Joel Rodrigues

21/03/2013

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.
GOSTEI 0
Joaquim C.

Joaquim C.

21/03/2013

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 ?

GOSTEI 0
Joel Rodrigues

Joel Rodrigues

21/03/2013

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.
GOSTEI 0
Joaquim C.

Joaquim C.

21/03/2013

Show

de bola Joel, ja fiz umas brincadeiras

aqui maneira com este conceito de lista.
GOSTEI 0
Joel Rodrigues

Joel Rodrigues

21/03/2013

É legal brincar com as tags pra ver o que dá pra fazer. É uma boa forma de aprender.
GOSTEI 0
Joel Rodrigues

Joel Rodrigues

21/03/2013

Bom, como a dúvida foi sanada, estou encerrando o tópico. Qualquer coisa, é só falar.
Abraço.
GOSTEI 0
POSTAR