Laboratório de Lista Não Ordenada em HTML - Aprenda HTML

Introdução

A tag ul em HTML é usada para criar uma lista não ordenada, onde os itens são tipicamente renderizados como uma lista com marcadores. Este laboratório irá guiá-lo sobre como criar uma lista não ordenada usando HTML e fornece exemplos da sintaxe e uso da tag ul.

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 a Estrutura do Documento HTML

Crie um arquivo index.html em uma nova pasta de projeto e abra o arquivo em um editor de código.

Crie a estrutura básica de um documento HTML adicionando as tags html, head e body. Dentro da tag head, adicione a tag title e defina o título do documento como "HTML Unordered List Lab".

<!doctype html>
<html>
  <head>
    <title>HTML Unordered List Lab</title>
  </head>
  <body>
    <!-- Adicione conteúdo aqui -->
  </body>
</html>

Criar uma Lista Não Ordenada Usando a tag ul

Dentro da tag body, crie uma lista não ordenada usando a tag ul. Para adicionar itens à lista, use a tag li dentro da tag ul.

<ul>
  <li>Este é o primeiro item da lista</li>
  <li>Este é o segundo item da lista</li>
  <li>Este é o terceiro item da lista</li>
</ul>

Adicionar Atributos à Tag ul

A tag ul não possui atributos específicos, mas suporta atributos globais e de evento. Aqui está um exemplo de como adicionar o atributo class à tag ul.

<ul class="my-list">
  <li>Este é o primeiro item da lista</li>
  <li>Este é o segundo item da lista</li>
  <li>Este é o terceiro item da lista</li>
</ul>

Aplicar Estilo CSS à Tag ul

Para estilizar a tag ul, você pode usar CSS. No exemplo a seguir, estamos definindo list-style-type como 'square' e adicionando margens.

<style>
  ul {
    list-style-type: square;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 50px;
  }
</style>

<ul class="my-list">
  <li>Este é o primeiro item da lista</li>
  <li>Este é o segundo item da lista</li>
  <li>Este é o terceiro item da lista</li>
</ul>

Aninhando Listas Não Ordenadas

Você pode aninhar uma lista não ordenada dentro de outra lista não ordenada, colocando outra tag <ul> dentro de uma tag <li>. Aqui está um exemplo de uma lista não ordenada aninhada.

<ul>
  <li>Este é o primeiro item na lista pai</li>
  <li>
    Este é o segundo item na lista pai
    <ul>
      <li>Este é um item aninhado</li>
      <li>Este é outro item aninhado</li>
    </ul>
  </li>
  <li>Este é o terceiro item na lista pai</li>
</ul>

Resumo

Neste laboratório, você aprendeu como criar uma lista não ordenada usando a tag ul em HTML. Você também aprendeu como adicionar atributos e estilos CSS à tag ul. Lembre-se que a tag ul é usada para criar uma lista de itens com marcadores. A tag ul requer a tag de abertura e fechamento, e os itens da lista devem ser adicionados usando a tag li dentro da tag ul. Você pode aninhar uma lista não ordenada dentro de outra lista não ordenada, colocando outra tag ul dentro de uma tag li.