HTML5 - Listas encadeadas
Aprendendo HTML 5
Listas Encadeadas
Listas encadeadas nada mais são que listas dentro de listas.
Mas por que colocar uma lista dentro de outra?
Diferente de textos "produzidos" em processadores de texto (Editores de Texto x Processadores de Texto), não conseguimos apenas dar um "tab" na lista e criar outro nível nela.Assim, sempre que desejarmos mais de um nível em uma lista teremos listas encadeadas.
O exemplo:
Para hoje trabalharemos com uma lista não ordenada com três níveis.
No exemplo pode-se observar que os Cursos estão organizados por período, nome do curso e duração.
Primeiro a lista dos períodos:
<body>
<h1>Cursos</h1>
<ul>
<li>Matutino</li>
<li>Vespertino</li>
<li>Noturno</li>
</ul>
</body>
Cada um dos períodos é um item da lista.
Agora vamos incluir um curso Matutino:
<ul>
<li>Matutino
<ul>
<li>Análise e Desenvolvimento de Sistemas</li>
</ul>
</li>
<li>Vespertino</li>
<li>Noturno</li>
</ul>
Observe que incluimos uma lista dentro do item (<li>) do Matutino. Vamos fazer isso para os demais cursos.
<ul>
<li>Matutino
<ul>
<li>Análise e Desenvolvimento de Sistemas</li>
<li>Licenciatura em Matemática</li>
<li>Mecatrônica Indústrial</li>
</ul>
</li>
<li>Vespertino
<ul>
<li>Técnico em Informática Integrado</li>
<li>Técnico em Mecânica Integrado</li>
</ul>
</li>
<li>Noturno
<ul>
<li>Técnico em Informática</li>
<li>Técnico em Mecânica</li>
<li>Técnico em Mecatrônica</li>
</ul>
</li>
</ul>
E como resultado:
Para encerrar vamos inserir mais um nível na lista. Vamos inserir o tempo de duração de cada um dos cursos:
<ul>
<li>Matutino
<ul>
<li>Análise e Desenvolvimento de Sistemas
<ul>
<li>6 semestres</li>
</ul>
</li>
<li>Licenciatura em Matemática
<ul>
<li>8 semestres</li>
</ul>
</li>
<li>Mecatrônica Indústrial
<ul>
<li>6 semestres</li>
</ul>
</li>
</ul>
</li>
<li>Vespertino
<ul>
<li>Técnico em Informática Integrado
<ul>
<li>4 anos</li>
</ul>
</li>
<li>Técnico em Mecânica Integrado
<ul>
<li>4 anos</li>
</ul>
</li>
</ul>
</li>
<li>Noturno
<ul>
<li>Técnico em Informática</li>
<li>Técnico em Mecânica</li>
<li>Técnico em Mecatrônica</li>
</ul>
</li>
</ul>
E, finalmente, temos nossa página completa:
Acesse o HTML completo aqui.
Até a próxima.
Comentários
Postar um comentário