Curso de HTML5 e CSS3 – 5a. Aula – Listas

Listas 

O HTML suporta três tipos de listas: ordenadas, não ordenadas e de definição; que já eram suportados na versão anterior.

As listas não ordenadas são criadas fazendo-se uso do marcador <ul> </ul>, e dos elementos <li> </li>. Este tipo de lista, por padrão, pode apresentar três tipos de marcadores: um circulo vazio (circle) , um circulo cheio (disc ) e um quadrado (square). Assim como pode possuir vários níveis, ou seja, uma lista dentro da outra.

Uma das principais diferencias das listar não ordenadas para as listas ordenadas, é que nestas ultimas, os elementos que “numerados”, e neste caso utilizamos o marcador <ol> </ol>  e para definição de cada item usamos o <li> </li> . O tipo de numeração pode ser alterado com o uso de CSS e esta forma podemos ter listas ordenadas onde os elementos são representados utilizando a notação: (i) arábica, (ii) alfabética,  (iii)  romano a e etc.

Já as listas de definição podem ser utilizadas na definição de termos,  e neste caso o marcador geral é o <dl> </dl> , o que identifica o texto a ser definido é o <dt> </dt>  e a definição dos termos é feita através do <dd> </dd> .

Lista não ordenada

HTML-ICON-13

Para construir uma lista não ordenada devemos utilizar o elemento <ul>, e para cada elemento da lista utilizamos o elemento <li>. Por padrão, cada elemento da lista é marcada por um pequeno circulo preenchido. Observem o trecho de código abaixo:

Quando carregamos o código acima, em  uma navegador, devemos obter algo semelhante à:

HTML5-Aula05-01-Listas
HTML5 – Aula05 -Listas 01

 

HTML-ICON-14O simbolo utilizando para identificar cada elemento pode ser modificado utilizando-se o atributo list-style-type do CSS, este atributo aceita os seguintes valores: circle, square e none;

Listas Ordenadas

Para construir uma lista ordenada devemos utilizar o elemento <ol>, e assim como na lista não ordenada, para cada item utilizamos o elemento <li>, por padrão, cada elemento é numerado de 1 à “n”. A seguir temos o exemplo de um código que podemos utilizar para gerar uma lista ordenada.

O exemplo acima deve gerar algo semelhante à imagem abaixo:

HTML5-Aula05-02-Listas
HTML5 – Aula05 – Listas 02

HTML-ICON-15

O símbolo utilizando para cada identificar cada elemento pode ser modificado utilizando-se o atributo list-style-type do CSS, este atributo aceita os seguintes valores: decimal, decimal-leading-zero, lower-alpha, lower-latin, lower-roman.

Lista de Descrição

As listas de descrição, são listas de termos com as suas devidas descrições. O elemento <dl> é utilizado para definir a lista de descrição, dt para definir o termo (ou o nome) e <dd> para definir a descrição do termo. Observe o exemplo abaixo:

Quando interpretado por um navegador, o exemplo pode gerar  a seguinte lista de descrição:

HTML5-Aula05-03-Listas
HTML5 – Aula05 – Listas 03

HTML-ICON-16

Listas Encadeadas

Podemos construir listas compostas de outras listas, neste caso devemos adicionar o elemento de marcação da lista dentro do um dos elemento <li>. Um exemplo simples desta técnica pode ser observado logo abaixo: 

Uma lista encadeada por ter a aparência da imagem abaixo:

HTML5-Aula05-04-Listas
HTML5 – Aula05 – Listas 04

HTML-ICON-17

Os elementos de uma listas podem conter vários tipo de objetos, como por exemplo imagens, links, videos, audio e outros.

Listas Horizontais

As listas podem ser estilizadas, utilizando o CSS, de várias formas distintas, uma muito utilizada são as listas onde os itens são dispostos horizontalmente, nesta disposição as listas geralmente são utilizadas na construção de menus. Suponha que temos o seguinte código:

Quando renderizado por um navegador o exemplo acima deve produzir algo semelhante à imagem abaixo, que está longe de ser uma lista horizontal

HTML5-Aula05-05-Listas
HTML5 – Aula05 – Listas 05

Já que na lista anterior, cada elemento é um hyperlink, podemos utilizar este conjunto de elementos para compor o menu do nosso site, mas para isto devemos estilizar a lista para que seus elementos sejam posicionados horizontalmente. Podemos utilizar o seguinte código CSS para aplicar o estilo desejado

Quando aplicamos essas regras CSS à lista, ela passa a ter uma estrutura muito semelhante ao um menu de um site. Para aplicar as regras à nossa lista precisamos ajustar o atributo id da tag <ul> para assumir o valor “menu

Quando o navegador interpreta o nosso código ele produzirá algo semelhante à:

HTML5-Aula05-06-Listas
HTML5 – Aula05 – Listas 06

 

Com isto finalizamos nosso breve estudo sobre as listas suportadas pelo HTML5