Front-end com Vue 3

Aparência

Listas (<ul>, <ol>, <li>) ​

Listas Ordenadas e Não Ordenadas ​

Listas são elementos essenciais na construção de páginas web, usadas para organizar informações de maneira clara e acessível. O HTML oferece duas principais formas de listas: ordenadas e não ordenadas, cada uma com sua própria tag e propósito.

  • Listas Não Ordenadas (<ul>): Usadas quando a ordem dos itens não é importante. Os itens em uma lista não ordenada são geralmente marcados com símbolos de pontuação, como bolinhas (bullets), e representam um grupo de itens de igual importância.
  • Listas Ordenadas (<ol>): Utilizadas quando os itens precisam ser apresentados em uma sequência específica. Os itens em uma lista ordenada são automaticamente numerados pelo navegador, indicando uma ordem ou sequência lógica.

Ambos os tipos de listas utilizam a tag <li> (List Item) para marcar cada item individual dentro da lista.

Exemplo Prático: Criação de Listas Ordenadas e Não Ordenadas ​

Lista Não Ordenada (Tópicos Importantes da Aula):

html
<ul>
  <li>Introdução ao HTML</li>
  <li>Tags fundamentais</li>
  <li>Estrutura básica de uma página</li>
</ul>

Lista Ordenada (Passos Para Criar uma Página Web):

html
<ol>
  <li>Definir a estrutura com HTML</li>
  <li>Adicionar estilos com CSS</li>
  <li>Implementar interatividade com JavaScript</li>
</ol>

  1. Lista de Tópicos da Aula:

    • Crie uma lista não ordenada com os principais tópicos abordados na aula.
    • Utilize a tag <ul> para a lista e <li> para cada tópico.

  2. Lista de Links Úteis:

    • Crie uma lista ordenada com links úteis para aprender mais sobre HTML.
    • Utilize a tag <ol> para a lista e <li> para cada link. Dentro de cada <li>, use a tag <a href="URL">Nome do Link</a> para adicionar os links.

Exemplo:

html
<ul>
  <li>Estrutura do HTML</li>
  <li>Importância do CSS</li>
  <li>Funções do JavaScript</li>
</ul>

<ol>
  <li>
    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML"
      >Documentação HTML na MDN</a
    >
  </li>
  <li>
    <a href="https://www.w3schools.com/html/">Tutoriais HTML no W3Schools</a>
  </li>
</ol>

Esta atividade não só reforça a compreensão sobre como criar listas em HTML, mas também pratica a organização de informações de maneira lógica e acessível, uma habilidade essencial no desenvolvimento web.

Você pode usar a Documentação HTML na MDN e o W3Schools para encontrar informações adicionais sobre HTML e aprofundar seus conhecimentos.