HTML, as listas

Nesta lição veremos como, através de especiais tags, é possível criar listas de texto numeradas ou com marcadores.

Nesta lição, veremos como, através de tags especiais, é possível criar listas de texto numeradas ou com marcadores.
Vejamos agora, num breve exemplo, a diferença entre uma lista com marcadores e uma numerada:

Lista com marcadores:
• Primeiro texto
• Segundo texto
• Terceiro texto

Lista numerada:
1. Primeiro texto
2. Segundo texto
3. Terceiro texto
Feita esta premissa, vejamos como criar as nossas listas.
As listas são divididas em Listas ordenadas e Listas não ordenadas.
As listas ordenadas são caracterizadas por uma lista numerada, portanto podemos dizer que as listas numeradas são listas ordenadas.
Pelo contrário, as listas com marcadores são definidas como listas não ordenadas.

Listas ordenadas (Numeradas):
para criar este tipo de listas utiliza-se a tag ol (Order list) que indica precisamente ao navegador que se trata de uma lista ordenada, em adição à tag li (List item) que representa o parágrafo da lista.

Eis então a sintaxe de uma lista ordenada:

Listas não ordenadas (Listas com marcadores):
Ao contrário da anterior, esta lista não é caracterizada por uma numeração definida e ordenada, mas apenas por um ponto de referência.
Neste caso, em vez de ol, é usado ul (Unordered list), sempre associado à tag li, pois, neste caso também, trata-se de uma lista.

Aqui está a sintaxe para criar esta lista:

Note o ponto da lista.
Se quisermos substituir o clássico ponto para definir a lista, por um pequeno círculo, usaremos o atributo type juntamente com a tipologia do ponto, que no nosso caso se torna um círculo definido como circle.
Aqui está, então, a nossa lista com marcadores usando um círculo:

Se depois quisermos um quadrado como pontuação, usamos a definição square:

As listas serão muito úteis para definir listas e menus de navegação.

Pubblicato in HTML & CSS