Listas HTML: Crie Listas Não Ordenadas e Ordenadas

Introdução

Listas HTML são uma parte fundamental do desenvolvimento web, usadas para agrupar e organizar itens relacionados. Elas tornam o conteúdo mais legível e acessível. Existem dois tipos principais de listas:

Listas Não Ordenadas (<ul>): Usadas quando a ordem dos itens não importa. Geralmente são exibidas com marcadores (bullet points).
Listas Ordenadas (<ol>): Usadas quando a ordem dos itens é importante. Geralmente são exibidas com números.

Neste laboratório, você aprenderá a criar ambos os tipos de listas, adicionar itens a elas e até mesmo criar sublistas aninhadas para construir estruturas mais complexas. Ao final, você terá uma única página HTML demonstrando esses tipos de listas.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 93%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Criar tag ul para lista não ordenada

Nesta etapa, você criará uma lista não ordenada. Listas não ordenadas são definidas com a tag <ul> e são usadas para itens onde a sequência não é importante.

Primeiro, localize o arquivo index.html no explorador de arquivos no lado esquerdo do WebIDE. Clique nele para abri-lo no editor.

Dentro do <body> do seu arquivo index.html, adicione uma lista não ordenada vazia colocando as tags <ul> e </ul> logo após o título <h1>.

Seu arquivo index.html agora deve se parecer com isto:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul></ul>
  </body>
</html>

Após adicionar o código, salve o arquivo. Você pode visualizar suas alterações mudando para a aba Web 8080. Neste momento, você não verá nenhum item de lista, pois ainda não adicionamos nenhum.

Adicionar tags li dentro de ul para itens de lista

Nesta etapa, você adicionará itens à lista não ordenada. Cada item em uma lista é definido com a tag <li> (list item). Essas tags <li> devem ser colocadas dentro da tag pai <ul>.

Vamos adicionar três itens à nossa lista de compras. Modifique seu arquivo index.html para incluir "Milk", "Bread" e "Cheese" como itens de lista.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>
  </body>
</html>

Salve o arquivo e mude para a aba Web 8080 para ver suas alterações. Agora você deve ver uma lista com marcadores (bulleted list) com os três itens de supermercado.

Criar tag ol para lista ordenada

Nesta etapa, você criará uma lista ordenada. Listas ordenadas são definidas com a tag <ol> e são usadas quando a ordem dos itens é importante, como em uma receita ou uma lista de tarefas (to-do list). O navegador numerará automaticamente os itens.

Vamos adicionar uma nova seção para uma lista de tarefas. No seu arquivo index.html, adicione um novo título <h2>To-Do List</h2> e uma lista ordenada vazia <ol></ol> abaixo da lista não ordenada existente.

Seu arquivo index.html agora deve conter ambas as estruturas de lista:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>

    <h2>To-Do List</h2>
    <ol></ol>
  </body>
</html>

Salve o arquivo e verifique a prévia na aba Web 8080. Você verá o novo título, mas a lista ordenada estará vazia por enquanto.

Adicionar tags li dentro de ol para itens numerados

Nesta etapa, você adicionará itens à sua nova lista ordenada. Assim como nas listas não ordenadas, você usa a tag <li> para definir cada item. O navegador cuidará da numeração automaticamente.

Vamos adicionar três tarefas à nossa lista de tarefas. Edite o arquivo index.html e coloque os seguintes elementos <li> dentro das suas tags <ol>.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>

    <h2>To-Do List</h2>
    <ol>
      <li>Pay bills</li>
      <li>Walk the dog</li>
      <li>Go to the gym</li>
    </ol>
  </body>
</html>

Salve o arquivo e atualize a aba Web 8080. Agora você verá uma lista numerada mostrando suas três tarefas.

Aninhar ul dentro de ol para sublistas

Nesta etapa, você aprenderá a criar listas aninhadas, também conhecidas como sublistas. Isso é útil para detalhar um item de lista em pontos menores e relacionados. Você pode aninhar uma lista (<ul> ou <ol>) dentro de um elemento <li>.

Vamos adicionar mais detalhes à tarefa "Go to the gym". Adicionaremos uma lista não ordenada aninhada para especificar as atividades de treino. Para fazer isso, coloque um novo bloco <ul> dentro do elemento <li>Go to the gym</li>.

Atualize seu arquivo index.html com o seguinte código:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>

    <h2>To-Do List</h2>
    <ol>
      <li>Pay bills</li>
      <li>Walk the dog</li>
      <li>
        Go to the gym
        <ul>
          <li>Treadmill</li>
          <li>Weights</li>
        </ul>
      </li>
    </ol>
  </body>
</html>

Salve o arquivo e visualize-o na aba Web 8080. Você verá uma sublista com marcadores, indentada sob o item "Go to the gym". Isso demonstra como você pode criar estruturas de conteúdo mais complexas e organizadas.

Resumo

Parabéns por completar o laboratório!

Neste laboratório, você aprendeu os fundamentos da criação de listas em HTML. Você conseguiu com sucesso:

Criar uma lista não ordenada (<ul>) para itens sem uma ordem específica.
Criar uma lista ordenada (<ol>) para itens onde a sequência é importante.
Usar a tag de item de lista (<li>) para adicionar itens a ambos os tipos de listas.
Criar uma lista aninhada para construir uma estrutura hierárquica.

Listas são uma ferramenta crucial para organizar conteúdo e melhorar a legibilidade de suas páginas web. Agora você pode usá-las efetivamente em seus futuros projetos web.