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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70875{{"Lista Não Ordenada em HTML"}} html/head_elems -.-> lab-70875{{"Lista Não Ordenada em HTML"}} html/lists_desc -.-> lab-70875{{"Lista Não Ordenada em HTML"}} html/layout -.-> lab-70875{{"Lista Não Ordenada em HTML"}} html/doc_flow -.-> lab-70875{{"Lista Não Ordenada em HTML"}} html/inter_elems -.-> lab-70875{{"Lista Não Ordenada em HTML"}} html/custom_attr -.-> lab-70875{{"Lista Não Ordenada em HTML"}} end

Configurando 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>

Criando 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>

Adicionando 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>

Aplicando 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.

Lista Não Ordenada em HTML