Lista Ordenada em HTML: Aprenda a Criar Listas Ordenadas

Introdução

Em HTML, podemos criar uma lista ordenada usando a tag <ol>. A lista ordenada é uma lista de itens numerados em uma ordem específica. A tag <ol> é usada para criar a lista ordenada e a tag <li> é usada para definir cada item na lista.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

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 100%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Configurar o arquivo HTML

Nesta etapa, criaremos um arquivo HTML básico e configuraremos a tag <ol>. Abra o arquivo "index.html" e digite o seguinte código:

<!doctype html>
<html>
  <head>
    <title>Ordered list Example</title>
  </head>
  <body>
    <h1>Ordered List Example</h1>
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
    </ol>
  </body>
</html>

Adicionar mais itens à lista

Nesta etapa, adicionaremos mais itens à lista ordenada. Para fazer isso, basta adicionar mais tags <li> entre as tags de abertura e fechamento <ol>:

<!doctype html>
<html>
  <head>
    <title>Ordered list Example</title>
  </head>
  <body>
    <h1>Ordered List Example</h1>
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ol>
  </body>
</html>

Alterar o tipo de número

Nesta etapa, alteraremos o tipo de numeração usado na lista ordenada. Por padrão, a lista ordenada usa numeração decimal. No entanto, podemos alterá-la para outros tipos de numeração, como algarismos romanos ou letras. Para alterar o tipo de numeração, use o atributo type na tag <ol>. Por exemplo:

<!doctype html>
<html>
  <head>
    <title>Ordered list Example</title>
  </head>
  <body>
    <h1>Ordered List Example</h1>
    <ol type="I">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ol>
  </body>
</html>

No código acima, definimos o atributo type como I, que representa algarismos romanos maiúsculos.

Começar a numeração a partir de um número específico

Nesta etapa, alteraremos o número inicial dos itens da lista ordenada. Por padrão, o primeiro item na lista ordenada começa com "1". No entanto, podemos alterá-lo para começar a partir de um número específico. Para alterar o número inicial, use o atributo start na tag <ol>. Por exemplo:

<!doctype html>
<html>
  <head>
    <title>Ordered list Example</title>
  </head>
  <body>
    <h1>Ordered List Example</h1>
    <ol start="3">
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ol>
  </body>
</html>

No código acima, definimos o atributo start como 3, o que significa que o primeiro item na lista ordenada será numerado como "3".

Resumo

Neste laboratório, aprendemos como criar uma lista ordenada em HTML usando a tag <ol>. Também aprendemos como adicionar itens à lista, alterar o tipo de numeração e iniciar a numeração a partir de um número específico. Com este conhecimento, podemos criar listas com aparência profissional em nossas páginas web.