HyperFluxCMS

Fast. Flexible. Free.

HyperFluxCMS

Inserindo listas

Como organizar items em listas no HyperCode

publicado 01/01/2025 15:12, atualizado 14/04/2026 23:17

Muitas vezes você pode querer organizar seu texto em listas. Ingredientes de uma receita ou passos para realizar determinada tarefa, por exemplo.

Listas são elementos muito importantes em documentos, web sites, etc. O HyperCode oferece uma maneira simples de lidar com elas.

Existem dois tipos de linhas suportadas pelo HyperCode. Listas Ordenadas e Listas Não Ordenadas.

Listas Ordenadas são aquelas em que o itens devem seguir uma determinada hordem. Por exemplo, o passo-a-passo para preparar uma receita ou para obter um documento em um órgão público. Listas Ordenadas possuem em cada item um identificador de sequência, que normalmente é um número inteiro, mas também pode ser letras, por exemplo.

Listas Não Ordenadas são aquelas cujos itens não precisam seguir uma sequência determinada. Pode ser uma lista de compras, os itens opcionais de um carro, as vantagens de se utilizar determinado sistema de software, etc. Essas listas normalmente usam "bolinhas" para identificar cada item.

O fato de uma lista ser "não ordenada" não significa que ela vai aparecer para o leitor de sua postagem com os itens em ordem aleatória ou bagunçada. Eles vão aparecer exatamente na ordem que você definir. Apenas a forma de apresentação é diferente, usando "bolinhas" ou algo similar em vez de números ou letras.

Se você estiver criando uma lista Ordenada, o HyperCode oferece uma funcionalidade bem interessante. Imagine que você escreveu uma lista ordenada com 100 itens, numerados de 1 a 100.

De repente você percebe que tem que inserir um novo item na posição 20. E o item que estava na posição 20 passa a ir para a posição 21, o que estava na posição 21 vai para a 22, e assim até chegar ao item 100 indo para a posição 101.

Se você não usou a Tag de Lista Ordenada do HyperCode, e tinha escrito os números de cada item manualmente, um por um, terá que mudar todos manualmente do 20 até o 100.

Agora imagine se a lista tivesse 1000 itens.

Usando a Tag de Lista Ordenada do HyperCode, você não precisa (E NÃO DEVE) digitar o número em cada item. Isso é feito automaticamente. Se você precisar inserir um item na posição 20, todos os outros dali para a frente já aparecerão com novos números.

O mesmo vale para o caso de você decidir apagar uma linha.

Para se criar uma lista em HyperCode, se inicia com a tag respectiva, [ol], (de Ordered List) para lista ordenada, e [ul], (de Unordered List), para lista não ordenada.

Depois, cada item da lista, seja qual for o tipo dela, é listado com a tag [li], de list item, o conteúdo do texto do item, e seu respectivo fechamento [/li] ou [/].

Para terminar a lista, se fecha com a tag de fechamento correspondente ao tipo de lista aberto: listas abertas com [ol] são encerradas com [/ol] e listas abertas com [ul] são encerradas com [/ul]. Ou [/] para fechar qualquer uma das duas.

Tag [li]: Item de Lista

Indica o início de um item da lista. Serve tanto para listas ordenadas como não ordenadas.

Depois da tag [li] se insere o texto do item, e depois se fecha o item com [/li] ou [/].

Tag [ul]: Lista Não Ordenada

Indica o início de uma sequência de itens de uma Lista Não Ordenada.

Depois disso os itens serão listados usando [li]conteúdo[/li]. Ao final da lista, se fecha a tag [ul] usando [/ul] ou simplesmente [/] e a lista estará pronta.

Exemplo:

Comprar:
[ul]
[li]pão[/]
[li]queijo[/]
[li]leite[/]
[li]macarrão[/]
[/ul]

que é exibido assim:

Comprar:

  • pão
  • queijo
  • leite
  • macarrão

Tag [ol]: Lista Ordenada

Indica o início de uma sequência de itens de uma Lista Ordenada.

Depois disso os itens serão listados usando [li]conteúdo[/li]. Ao final da lista, se fecha a tag [ol] usando [/ol] ou simplesmente [/] e a lista estará pronta.

Exemplo:

Como preparar um misto quente:
[ol]
[li]Ligue a sanduicheira[/]
[li]Pegue duas fatias de pão de forma[/]
[li]Reserve uma delas[/]
[li]Em cima da outra, coloque uma fatia de presunto[/]
[li]Sobre o presunto, coloque uma fatia de queijo[/]
[li]Cubra com a fatia de pão que você reservou[/]
[li]Coloque sobre a chapa da sanduicheira e feche-a[/]
[li]Espere por cerca de 2 minutos[/]
[li]Tire da sanduicheira com cuidado[/]
[li]Sirva quente[/]
[/ol]

que é exibido assim:
Como preparar um misto quente:

  1. Ligue a sanduicheira
  2. Pegue duas fatias de pão de forma
  3. Reserve uma delas
  4. Em cima da outra, coloque uma fatia de presunto
  5. Sobre o presunto, coloque uma fatia de queijo
  6. Cubra com a fatia de pão que você reservou
  7. Coloque sobre a chapa da sanduicheira e feche-a
  8. Espere por cerca de 2 minutos
  9. Tire da sanduicheira com cuidado
  10. Sirva quente

Como a maioria tas Tags HyperCode, ol, ul e li aceitam opcionalmente as propriedades class, style e id para personalizações adicionais da exibição e comportamento. Veja Class, Style, id