TPI 1 - HTML - Aula 7 - Listas

TPI 1 - HTML - Aula 7 - Listas

As listas nos ajudam a organizar a página. Como no Word, você pode usar as listas numeradas e não numeradas e ainda pode usar as listas de definição, que fazem a indentação do texto automaticamente.

LISTA NÃO NUMERADA

A lista não numerada tem a seguinte sintaxe :

<ul type="tipo"> <li> Primeiro item <li> Segundo item <li> Terceiro item </ul>onde :

UL = UN-NUMERED LIST

Define que está usando lista não numerada.

TYPE = TIPO

Define o tipo a ser usado : circle, disc (padrão) ou square

LI = LIST ITEM

Item da Lista, para cada item a ser inserido use o LI, é como se fosse o ENTER no Word.

Veja Resultado Abaixo

• Primeiro Item da Lista
• Segundo Item da Lista
• Terceiro Item da Lista
• Quarto Item da Lista

LISTA NUMERADA

A lista numerada tem a seguinte sintaxe :

<ol type="tipo" start="n"> <li> Primeiro item <li> Segundo item <li> Terceiro item </ol>onde :

OL = ORDERED LIST

Define que está usando lista numerada.

TYPE = TIPO

Define o tipo a ser usado : Numeros Cardinais (1,2,3,4,5..) - Romanos (I, II, III, IV, V ...) ou (i,ii,iii,iv,v...) - Letras (A, B, C, D, E ...) ou (a, b, c, d, e ...)

LI = LIST ITEM

Item da Lista, para cada item a ser numerado use o LI, é como se fosse o ENTER no Word.

START = INICIO

Deve ser ignorado se quiser iniciar a lista do 1, I, i, A ou a. Caso queira que ele inicie no número 5 utilize start="5", se for letra utilize também o número 5 pois ele irá iniciar na letra V ou E.

Abaixo um exemplo iniciando em Algarismo Romando no item 5.

<ol type="I" start="5"> <li> Primeiro Item da Lista <li> Segundo Item da Lista <li>Terceiro Item da Lista <li> Quarto Item da Lista </ol>

que resulta :

5. Primeiro Item da Lista
6. Segundo Item da Lista
7. Terceiro Item da Lista
8. Quarto Item da Lista

Abaixo um exemplo do Alfabeto iniciando o no item 1=A.

<ol type="A"> <li> Primeiro Item da Lista <li> Segundo Item da Lista <li>Terceiro Item da Lista <li> Quarto Item da Lista </ol>

que resulta :

1. Primeiro Item da Lista
2. Segundo Item da Lista
3. Terceiro Item da Lista
4. Quarto Item da Lista

Abaixo um exemplo simples.

<ol> <li> Primeiro Item da Lista <li> Segundo Item da Lista <li>Terceiro Item da Lista <li> Quarto Item da Lista </ol>

que resulta :

1. Primeiro Item da Lista
2. Segundo Item da Lista
3. Terceiro Item da Lista
4. Quarto Item da Lista

LISTA DE DEFINIÇÃO

As listas de definição são utilizadas quando queremos explicar algo. A lista de definição tem a seguinte sintaxe :

<dl> <dt> Defina o Termo <dd> Primeiro termo a ser definido dentro da lista <dt> Defina o segundo Termo <dd> Defina aqui o segundo termo na lista qu estamos testando </dl>

onde :

DL - DEFINE LIST

Inicio da lista de definição

DT - DEFINE TERM

Termo a ser definido, aqui vai o texto ou palavra a ser definida

DD - DEFINE DATA

Dados da Definição - aqui você explica o que significa o termo que você quer definir. Se você prestou atenção até aqui nas aulas, tudo que está de cor laranja é a TAG DT, e tudo o que está com a margem mais à direita e na cor ciano é a TAG DD.

Veja o exemplo abaixo :

<dl> <dt> Defina o Termo <dd> Primeiro termo a ser definido dentro da lista <dt> Defina o segundo Termo <dd> Defina aqui o segundo termo na lista qu estamos testando </dl>

Que produz :

DEFINA O TERMO

Primeiro termo a ser definido dentro da lista

DEFINA O SEGUNDO TERMO

Defina aqui o segundo termo na lista qu estamos testando