Projetista Digital

Olá Pessoal,

Continuando com o tema listas em XHTML, vamos tratar hoje de listas mistas (lista com subníveis). Até agora vimos como criar listas de um único nível, porém podemos explorar ainda mais o recurso de listas seja criando subníveis, ou mesclando listas ordenadas com não-ordenadas.

Listas mistas não-ordenadas

Quando criamos subníveis em listas ordenadas, os itens de níveis inferiores são apresentados com um marcador diferenciado e um certo recuo em relação aos itens de nível superior. Veja o código abaixo:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<h4>Lista não-ordenada simples</h4>   <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>   <h4>Lista mista não-ordenada</h4>   <ul> <li>Item 1</li> <li>Item 2 <ul> <li>Item 2.1</li> <li>Item 2.2</li> <li>Item 2.3</li> </ul> </li> <li>Item 3</li> </ul>

Resultado:

Lista não-ordenada simples

• Item 1
• Item 2
• Item 3

Lista mista não-ordenada

• Item 1
• Item 2
  • Item 2.1
  • Item 2.2
  • Item 2.3
    • Item 2.3.1
    • Item 2.3.2
• Item 3

Para criar listas mistas ou aninhadas basta adicionar uma nova lista dentro de um elemento <li>. A cada nível adicionado percebemos um recuo em relação ao nível anterior; percebe-se também que os marcadores mudam: no primeiro nível temos um bolinha preenchida; no segundo nível temos uma bolinha vazia; no terceiro nível em diante temos um quadrado. Podemos criar listas com N níveis, dependendo apenas da nossa necessidade. Com essa marcação podemos criar menus dropdown (aqueles onde passamos o mouse por cima de um item para abrir um submenu). Aprenderemos, inclusive, a construir esse tipo de menu com CSS. É só seguir o blog!

Listas mistas ordenadas

Podemos também criar listas aninhadas usando ordenação. Veja o caso de uma lista mista ordenada:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<h4>Lista ordenada simples</h4>
 
<ol>
<li>Alunos</li>
<li>Professores</li>
<li>Carros</li>
</ol>
 
<h4>Lista mista não-ordenada</h4>
 
<ol>
<li>Alunos
<ol>
<li>José</li>
<li>João</li>
<li>Maria</li>
</ol>
</li>
<li>Professores
<ol>
<li>Diego</li>
<li>Marcelo</li>
<li>Mike</li>
</ol>
</li>
<li>Carros
<ol>
<li>Palio</li>
<li>Gol</li>
<li>Uno</li>
</ol>
</li>
</ol>

Resultado:

Lista ordenada simples

1. Alunos
2. Professores
3. Carros

Lista mista não-ordenada

1. Alunos
   1. José
   2. João
   3. Maria
2. Professores
   1. Diego
   2. Marcelo
   3. Mike
3. Carros
   1. Palio
   2. Gol
   3. Uno

Como vocês podem perceber a numeração reinicia quando criamos subníveis, ou seja, nada de 2.1, 2.2, 2.3 etc. Não há como fazer esse tipo de alteração.

Listas mistas ordenadas e não-ordenadas

Para finalizar o post veremos como misturar listas ordenadas e não-ordenadas. Observe o código abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<h4>Lista ordenada seguida de uma não-ordenada</h4>
 
<ol>
<li>Alunos
<ul>
<li>José</li>
<li>João</li>
<li>Maria</li>
</ul>
</li>
<li>Professores
<ul>
<li>Diego</li>
<li>Marcelo</li>
<li>Mike</li>
</ul>
</li>
<li>Carros
<ul>
<li>Palio</li>
<li>Gol</li>
<li>Uno</li>
</ul>
</li>
</ul>
 
<h4>Lista não-ordenada seguida de uma ordenada</h4>
<ul>
<li>Alunos
<ol>
<li>José</li>
<li>João</li>
<li>Maria</li>
</ol>
</li>
<li>Professores
<ol>
<li>Diego</li>
<li>Marcelo</li>
<li>Mike</li>
</ol>
</li>
<li>Carros
<ol>
<li>Palio</li>
<li>Gol</li>
<li>Uno</li>
</ol>
</li>
</ul>

Resultado:

Lista ordenada seguida de uma não-ordenada

1. Alunos
   • José
   • João
   • Maria
2. Professores
   • Diego
   • Marcelo
   • Mike
3. Carros
   • Palio
   • Gol
   • Uno

Lista não-ordenada seguida de uma ordenada

• Alunos
  1. José
  2. João
  3. Maria
• Professores
  1. Diego
  2. Marcelo
  3. Mike
• Carros
  1. Palio
  2. Gol
  3. Uno

Bem pessoal, com isso finalizamos o assunto LISTAS XHTML. No próximo tutorial falaremos sobre links e atributos. Bom estudo e até lá.

Forte abraço,
Diego.

Olá Pessoal,

Continuando com nosso minicurso, vamos tratar hoje do assunto LISTAS. O uso de listas em páginas web é muito mais comum do que imaginamos: menus, galerias de fotos, notícias e vídeos etc. Sempre que precisarmos agrupar conteúdo de forma ordenada ou não, e apresentá-lo sob a forma de uma listagem, usaremos listas. Qualquer designer, desenvolvedor ou programador de interfaces que deseja trabalhar livremente com menus e outras interfaces web, aplicando efeitos CSS e uma marcação XHTML válida e acessível, tem como obrigação conhecer a fundo o uso de listas. Dentro do XHTML podemos trabalhar com três tipos de listas: ordenadas, não-ordenadas e definições. Dentro desse tutorial trabalharemos apenas com os dois tipos mais utilizados, que irão atender a totalidade dos seus trabalhos atuais e futuros: listas com ordenação e sem ordenação.

Listas Ordenadas

Chamamos de listas ordenadas aquelas cuja a informação é apresentada seguindo uma dada ordem. Normalmente os itens desse tipo de lista são apresentados com numeradores, letras ou algarismos romanos. Para iniciarmos uma lista ordenada é preciso utilizar a tag <ol></ol>. Cada item da lista é marcado pelo elemento <li></li>. Veja o código abaixo:

1
2
3
4
5
6

<h4>Listas Ordenadas</h4>
<ol>
<li>Misture os ingredientes</li>
<li>Bata no liquidificador</li>
<li>Asse por 40 minutos</li>
</ol>

Resultado:

Listas Ordenadas

1. Misture os ingredientes
2. Bata no liquidificador
3. Asse por 40 minutos

Percebam que cada item da lista possui sua própria marcação <li></li>. Se a sua lista possuir dez itens teremos um elemento <li> para cada um deles, ou seja dez elementos <li></li>. Sendo assim, a seguinte marcação não atenderia a nossa necessidade:

1
2
3
4
5
6

<h4>Listas Ordenadas</h4>
<ol>
<li>Misture os ingredientes
Bata no liquidificador
Asse por 40 minutos</li>
</ol>

Resultado:

Listas Ordenadas

1. Misture os ingredientes
   Bata no liquidificador
   Asse por 40 minutos

Erros comuns entre iniciantes

É um erro comum entre iniciantes marcar apenas um elemento <li>, criando listas de apenas um único item. Por isso repito: cada elemento de uma lista deve possuir sua própria marcação <li>. Outro erro bastante comum é marcar itens de lista sem iniciar a lista propriamente dita, ou seja, criar elementos <li> sem antes marcar o elemento <ol>. Essa marcação estaria errada:

1
2
3
4
5
6
7
8
9
10
11

<h4>Marcação errada</h4>
 
<li>Misture os ingredientes</li>
<li>Bata no liquidificador</li>
<li>Asse por 40 minutos</li>
 
<h4>Outra marcação errada</h4>
 
<ol>
<p>Escrevendo um parágrafo</p>
</ol>

Além do erro mencionado acima, podemos ver um terceiro erro bem comum: escrever diretamente qualquer outro elemento além de um <li> dentro de uma lista. Uma lista só pode conter ITENS, ou seja tags <li></li>. Qualquer outra tag deve ser escrita dentro dos elementos <li></li>, sob pena de escrever uma marcação inválida. Veja como ficará o código acima, quando escrito corretamente:

1
2
3
4
5
6
7
8
9
10
11
12
13

<h4>Marcação correta</h4>
 
<ol>
<li>Misture os ingredientes</li>
<li>Bata no liquidificador</li>
<li>Asse por 40 minutos</li>
</ol>
 
<h4>Outra marcação correta</h4>
 
<ol>
<li><p>Escrevendo um parágrafo</p></li>
</ol>

Resultado:

Marcação correta

1. Misture os ingredientes
2. Bata no liquidificador
3. Asse por 40 minutos

Outra marcação correta

1. Escrevendo um parágrafo

Listas não-ordenadas

Existem listas cuja informação não necessita de ordenação, essas listas são chamadas de não-ordenadas. Os itens desse tipo de lista não apresentam numeradores ou qualquer outro elemento que remeta a idéia de ordem, seus marcadores são, normalmente, glifos (umas bolinhas pretas como essa abaixo).

• Exemplo do marcador de uma lista não-ordenada

A tag que define uma lista não-ordenada é <ul></ul>, e seus elementos são marcados por <li></li> (assim como nas listas ordenadas). Tudo o que foi dito acima sobre listas ordenadas e erros de marcação, também é válido para listas não-ordenadas. Entre ambos os tipos de listas temos diferenças apenas do tipo de marcador e a questão da ordenação, de resto o funcionamento é o mesmo para ambas as listas. Vejamos a marcação de uma lista não-ordenada:

1
2
3
4
5
6
7
8
9

<h4>Lista não-ordenada</h4>
 
<ul>
<li>Maisena</li>
<li>Ovos</li>
<li>Leite</li>
<li>Farinha</li>
<li>Fermento</li>
</ul>

Resultado:

Lista não-ordenada

• Maisena
• Ovos
• Leite
• Farinha
• Fermento

Sobre a obrigatoriedade da tag de fechamento </li>

Alguns de vocês devem estar se perguntando: “mas é obrigatório fechar a tag </li>?” Sim, é obrigatório. “Ah! Mas eu aprendi há alguns anos que não era preciso”, ou então “Eu li em outro site que não preciso fechar a tag”… É o seguinte: no HTML antigo e velho de guerra, realmente não era obrigatório o fechamento da tag. Já no XHTML é necessário fechar tudo quanto é tag, mesmo elementos vazios. Aliás, falamos disso no primeiro tutorial.

O XHTML é uma versão reformulada do HTML velho, seguindo as regras sintáticas de XML. E XML exige fechamento de TODAS as tags, por isso o XHTML exige também. Então a marcação é inválida (ainda que alguns navegadores interpretem corretamente):

1
2
3
4
5
6
7
8
9

<h4>Marcação inválida</h4>
 
<ul>
<li>Maisena
<li>Ovos
<li>Leite
<li>Farinha
<li>Fermento
</ul>

Pessoal, ainda temos bastante conteúdo sobre listas e esse tutorial já está enorme. Vou dividí-lo em duas partes, então amanhã falaremos sobre listas mistas ou aninhadas (uma lista dentro da outra, criando níveis diferentes de listas). Até lá!!!

Forte abraço,
Diego.