Listas
As listas são formas de
estruturar documentos em forma de sumário, menu ou resumo de conteúdo. São
muito boas na hora da criação menus ou tópicos de uma página HTML. Existem dois
tipos de listas: as ordenadas e as não ordenadas. As listas ordenadas obedecem
a uma ordem numérica, e as não ordenadas não obedecem a nenhuma ordem.
LISTAS
ORDENADAS
Para definirmos uma lista
ordenada, utilizamos a tag <OL> </OL>que determina o marcador
ordenado para a nossa lista. Para definir os itens da lista por sua vez
utilizamos o marcador <LI></LI>.
Sintaxe:
<ol>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
</ol>
Podemos escolher o tipo de
marcador de nossa lista, podendo ser numérico (1,2,3), romano, (I, II, III) ou
caracter (a, b, c). Para isso utilizamos o atributo type na tag
<OL></OL>.
Sintaxe:
<ol type=”1”>
<li> Item 1 </li>
<li> Item 2 </li>
</ol>
<ol type=”I”>
<li> Item 1 </li>
<li> Item 2 </li>
</ol>
<ol type=”a”>
<li> Item 1 </li>
<li> Item 2 </li>
</ol>
Exemplo Prático:
LISTAS
NÃO ORDENADAS
Para definirmos uma lista não
ordenada, precisamos utilizar a tag <UL></UL>. Para definir os
itens da lista por sua vez utilizamos o marcador <LI></LI>.
Sintaxe:
<ul>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
</ul>
Podemos escolher o tipo de
marcador de nossa lista, podendo ser um quadrado ou um círculo.
Sintaxe:
<ul type=”circle”>
<li> Item 1 </li>
<li> Item 2 </li>
</ul>
<ul type=”square”>
<li> Item 1 </li>
<li> Item 2 </li>
</ul>
<ul type=”disk”>
<li> Item 1 </li>
<li> Item 2 </li>
</ul>
Exemplo Prático:
Lista de Definição
Uma lista de
definição é utilizada quando existem diversos tópicos curtos acompanhados de
alguma descrição para o mesmo. Uma lista de definição é composta de três tags
básica: <dl>, <dt>, <dd>, onde a tag <dl> delimita a
área da lista, <dt> define um tópico e <dd> define a descrição do
tópico.
Sintaxe:
<dl>
<dt> Tópico 1
<dd> Definição do Tópico 1</dd>
<dd> Definição do Tópico 1</dd>
<dd> Definição do Tópico 1</dd>
</dt>
<dt> Tópico 2
<dd> Definição do Tópico 2</dd>
<dd> Definição do Tópico 2</dd>
<dd> Definição do Tópico 2</dd>
</dt>
</dl>
Exemplo Prático:
Nenhum comentário:
Postar um comentário