Listas: ordenadas e não ordenadas
Crie listas numeradas e com marcadores
Listas: ordenadas e não ordenadas é uma aula grátis de HTML for Kids no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML for Kids, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML for Kids inclui 4 aulas no total.
Listas ordenadas e não ordenadas
Boas-vindas à próxima lição! Hoje, vamos aprender a criar listas em HTML. As listas ajudam a organizar as informações e facilitam a leitura.
O que são listas?
As listas são uma ótima maneira de agrupar itens relacionados. O HTML tem dois tipos principais de listas:
- Listas ordenadas: os itens são numerados (1, 2, 3...).
- Listas não ordenadas: os itens aparecem com marcadores.
Vamos aprender a criar os dois tipos!
Criando uma lista ordenada
Uma lista ordenada é criada usando a etiqueta <ol>. Cada item da lista é adicionado usando a etiqueta <li> (item da lista).
Exemplo:
<ol>
<li>Wake up</li>
<li>Eat breakfast</li>
<li>Go to school</li>
</ol>
Criando uma lista não ordenada
Uma lista não ordenada é criada usando a etiqueta <ul>. Cada item é adicionado usando a etiqueta <li>, assim como nas listas ordenadas.
Exemplo:
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
Listas aninhadas
Você pode criar uma lista dentro de outra lista. Isso é chamado de lista aninhada. Você pode aninhar listas ordenadas e não ordenadas umas dentro das outras.
Exemplo:
<ul>
<li>Fruits
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrots</li>
<li>Spinach</li>
</ul>
</li>
</ul>
Listas com descrições
O HTML também permite criar listas de descrição usando as tags <dl>, <dt> e <dd>:
<dl>: Define a lista.<dt>: Define o termo (título).<dd>: Define a descrição.
Exemplo:
<dl>
<dt>HTML</dt>
<dd>The language used to create web pages.</dd>
<dt>CSS</dt>
<dd>The language used to style web pages.</dd>
</dl>Adicionando estilo às listas
Você pode usar CSS para alterar a aparência das suas listas. Por exemplo, pode alterar o tipo de marcadores ou números.
Exemplo:
<style>
ul {
list-style-type: square; /* Changes bullets to squares */
}
ol {
list-style-type: upper-roman; /* Changes numbers to Roman numerals */
}
</style>
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul>
<ol>
<li>First Step</li>
<li>Second Step</li>
</ol>
Experimente você mesmo
Vamos criar uma página da Web simples com listas ordenadas e não ordenadas. Veja um exemplo:
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists</title>
</head>
<body>
<h1>My To-Do List</h1>
<h2>Morning Routine</h2>
<ol>
<li>Wake up</li>
<li>Brush my teeth</li>
<li>Have breakfast</li>
</ol>
<h2>Shopping List</h2>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
</ul>
</body>
</html>
Muito bem!
Parabéns! Você aprendeu a criar listas ordenadas e não ordenadas, listas aninhadas e listas de descrição. Essas são ótimas ferramentas para organizar informações nas suas páginas da Web. Na próxima lição, aprenderemos a adicionar links para conectar diferentes páginas e sites. Prepare-se para se divertir ainda mais!
Perguntas Frequentes
A aula “Listas: ordenadas e não ordenadas” é grátis?
Sim — o texto completo de “Listas: ordenadas e não ordenadas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML for Kids, atualize para CoddyKit PRO. O curso de HTML for Kids inclui 4 aulas no total.
O que vou aprender em “Listas: ordenadas e não ordenadas”?
Crie listas numeradas e com marcadores Você pratica HTML for Kids com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML for Kids?
Nenhuma experiência prévia é necessária. HTML for Kids no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Listas: ordenadas e não ordenadas”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML for Kids?
Sim. Cada aula de HTML for Kids inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Títulos e parágrafos
- Listas: ordenadas e não ordenadas
- Links: conectando a Web
- Imagens: adicionando imagens à sua página