Listas HTML: Crie e Estilize com Facilidade

Introdução

Neste laboratório, os participantes explorarão a criação e estilização de listas HTML, com foco em diferentes tipos de listas e seus atributos. O laboratório guia os alunos na construção de várias estruturas de listas, incluindo listas ordenadas com numeração numérica e alfabética, listas não ordenadas com estilos de marcadores personalizados e listas de descrição com múltiplas entradas.

Os participantes começarão configurando uma estrutura de documento HTML5 padrão e construirão progressivamente exemplos de listas complexas, aprendendo a usar tags como <ol>, <ul>, <li> e <dl> para criar layouts de listas semânticos e visualmente atraentes. Ao experimentar com atributos de lista e estruturas de listas aninhadas, os alunos adquirirão habilidades práticas em design de listas HTML e entenderão como aprimorar a organização do conteúdo da 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 94%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Configurar a Estrutura do Documento HTML

Nesta etapa, você aprenderá como criar a estrutura básica do documento HTML para sua demonstração de listas. Documentos HTML têm uma estrutura padrão que fornece a base para o conteúdo da web.

Abra o WebIDE e navegue até o diretório ~/project. Crie um novo arquivo chamado lists.html clicando com o botão direito no explorador de arquivos e selecionando "Novo Arquivo".

Agora, vamos criar a estrutura básica do documento HTML5. Digite o seguinte código no arquivo lists.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Lists Example</title>
  </head>
  <body>
    <!-- We'll add our lists here in the next steps -->
  </body>
</html>

Vamos detalhar os componentes-chave desta estrutura HTML:

<!DOCTYPE html> declara que este é um documento HTML5
<html lang="en"> é o elemento raiz com especificação de idioma
<head> contém metadados sobre o documento
<meta charset="UTF-8"> garante a codificação de caracteres adequada
<meta name="viewport"> ajuda com o design responsivo
<title> define o título da página exibido na aba do navegador
<body> é onde o conteúdo principal será colocado

A saída de exemplo em um navegador web mostraria uma página em branco com o título "HTML Lists Example" na aba do navegador.

Notas: Saiba mais sobre Como visualizar arquivos HTML no WebIDE.

Criar Lista Ordenada com Tipos Numéricos e Alfabéticos

Nesta etapa, você aprenderá como criar listas ordenadas em HTML usando as tags <ol> (lista ordenada) e <li> (item de lista). Listas ordenadas numeram automaticamente seus itens e podem ser personalizadas com diferentes estilos de numeração.

Abra o arquivo lists.html que você criou na etapa anterior. Dentro da tag <body>, adicione o seguinte código para criar diferentes tipos de listas ordenadas:

<h2>Numeric Ordered List (Default)</h2>
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

<h2>Alphabetic Ordered List</h2>
<ol type="a">
  <li>First alphabetic item</li>
  <li>Second alphabetic item</li>
  <li>Third alphabetic item</li>
</ol>

<h2>Uppercase Alphabetic Ordered List</h2>
<ol type="A">
  <li>First uppercase item</li>
  <li>Second uppercase item</li>
  <li>Third uppercase item</li>
</ol>

<h2>Roman Numeral Ordered List</h2>
<ol type="i">
  <li>First roman numeral item</li>
  <li>Second roman numeral item</li>
  <li>Third roman numeral item</li>
</ol>

Vamos detalhar os diferentes tipos de listas:

A lista ordenada padrão usa numeração numérica (1, 2, 3)
type="a" cria numeração alfabética minúscula (a, b, c)
type="A" cria numeração alfabética maiúscula (A, B, C)
type="i" cria numeração romana minúscula (i, ii, iii)

A saída de exemplo em um navegador web mostraria quatro listas ordenadas diferentes com seus respectivos estilos de numeração.

Implementar Lista Não Ordenada com Diferentes Estilos de Marcadores

Nesta etapa, você aprenderá como criar listas não ordenadas em HTML usando as tags <ul> (lista não ordenada) e <li> (item de lista). Listas não ordenadas usam diferentes estilos de marcadores para exibir itens de lista sem ordenação numérica ou alfabética.

Abra o arquivo lists.html e adicione o seguinte código após as listas ordenadas anteriores:

<h2>Default Unordered List (Bullet Points)</h2>
<ul>
  <li>First bullet point</li>
  <li>Second bullet point</li>
  <li>Third bullet point</li>
</ul>

<h2>Disc Marker Style</h2>
<ul type="disc">
  <li>Disc marker item</li>
  <li>Another disc marker item</li>
  <li>Third disc marker item</li>
</ul>

<h2>Circle Marker Style</h2>
<ul type="circle">
  <li>Circle marker item</li>
  <li>Another circle marker item</li>
  <li>Third circle marker item</li>
</ul>

<h2>Square Marker Style</h2>
<ul type="square">
  <li>Square marker item</li>
  <li>Another square marker item</li>
  <li>Third square marker item</li>
</ul>

Vamos explorar os diferentes estilos de marcadores de lista não ordenada:

A lista não ordenada padrão usa marcadores de ponto sólido
type="disc" cria marcadores circulares sólidos (padrão)
type="circle" cria marcadores circulares vazios
type="square" cria marcadores quadrados sólidos

A saída de exemplo em um navegador web mostraria quatro listas não ordenadas diferentes com seus respectivos estilos de marcadores.

Design de Lista de Descrição Personalizada com Múltiplas Entradas

Nesta etapa, você aprenderá como criar listas de descrição em HTML usando as tags <dl> (lista de descrição), <dt> (termo de descrição) e <dd> (detalhes da descrição). Listas de descrição são perfeitas para exibir pares chave-valor ou termos com suas explicações.

Abra o arquivo lists.html e adicione o seguinte código após os exemplos de lista anteriores:

<h2>Programming Languages Description List</h2>
<dl>
  <dt>HTML</dt>
  <dd>A markup language for creating web pages</dd>

  <dt>CSS</dt>
  <dd>A styling language used to design web page appearance</dd>

  <dt>JavaScript</dt>
  <dd>A programming language that adds interactivity to web pages</dd>
</dl>

<h2>Contact Information Description List</h2>
<dl>
  <dt>Name</dt>
  <dd>John Doe</dd>

  <dt>Email</dt>
  <dd>john.doe@example.com</dd>

  <dt>Phone</dt>
  <dd>+1 (555) 123-4567</dd>
</dl>

Pontos-chave sobre listas de descrição:

<dl> define toda a lista de descrição
<dt> representa o termo ou nome
<dd> fornece a descrição ou detalhes
Múltiplas tags <dd> podem ser usadas para um único <dt>
Útil para glossários, metadados e apresentações chave-valor

A saída de exemplo em um navegador web mostraria duas listas de descrição com termos e suas descrições correspondentes.

Experimentar com Atributos de Lista e Estruturas de Lista Aninhadas

Nesta etapa, você explorará técnicas avançadas de lista, criando listas aninhadas e usando atributos de lista adicionais. Listas aninhadas permitem que você crie conteúdo hierárquico, enquanto os atributos podem ajudá-lo a personalizar a aparência e o comportamento da lista.

Abra o arquivo lists.html e adicione o seguinte código após os exemplos de lista anteriores:

<h2>Nested Unordered List</h2>
<ul>
  <li>
    Main Category 1
    <ul>
      <li>Subcategory 1.1</li>
      <li>Subcategory 1.2</li>
    </ul>
  </li>
  <li>
    Main Category 2
    <ul>
      <li>Subcategory 2.1</li>
      <li>Subcategory 2.2</li>
    </ul>
  </li>
</ul>

<h2>Nested Ordered List with Start Attribute</h2>
<ol start="5">
  <li>
    First main item
    <ol type="a">
      <li>First nested item</li>
      <li>Second nested item</li>
    </ol>
  </li>
  <li>
    Second main item
    <ol type="a">
      <li>Third nested item</li>
      <li>Fourth nested item</li>
    </ol>
  </li>
</ol>

<h2>Mixed Nested List</h2>
<ul>
  <li>
    Web Development
    <ol>
      <li>HTML</li>
      <li>
        CSS
        <ul>
          <li>Flexbox</li>
          <li>Grid</li>
        </ul>
      </li>
      <li>JavaScript</li>
    </ol>
  </li>
</ul>

Conceitos-chave demonstrados:

Listas aninhadas podem ser criadas colocando uma nova lista dentro de um item de lista
As listas podem ser misturadas (não ordenadas dentro de ordenadas, ou vice-versa)
O atributo start permite alterar o número inicial de uma lista ordenada
O atributo type pode ser usado para alterar a numeração ou os estilos de marcador em listas aninhadas

A saída de exemplo em um navegador web mostraria três estruturas de lista aninhadas diferentes com vários estilos e hierarquias.

Resumo

Neste laboratório, os participantes aprenderam a criar e estilizar listas HTML usando várias técnicas. O laboratório começou estabelecendo uma estrutura de documento HTML5 padrão, demonstrando elementos essenciais como as tags DOCTYPE, html, head e body, com foco em metadados e codificação de caracteres adequados.

Os exercícios práticos cobriram a criação de diferentes tipos de listas ordenadas e não ordenadas, incluindo estilos de lista numéricos e alfabéticos. Os participantes exploraram atributos de lista e estruturas de lista aninhadas, ganhando experiência prática no design de conteúdo HTML estruturado com marcação semântica. O laboratório forneceu uma introdução abrangente aos elementos de lista HTML, permitindo que os alunos organizassem e apresentassem informações de forma eficaz em documentos web.

Criar Listas HTML com Diferentes Estilos