HTML5 Para Crianças - Listas
As listas em HTML permitem-nos agrupar um conjunto de items relacionados uns com os outros. Há 3 tipos de listas que podemos usar: listas ordenadas, listas não ordenadas e listas descritivas.
- As listas ordenadas usam uma sequência para indicar a ordem dos elementos da lista. Por exemplo, se criares uma lista com os capítulos de um livro, vais querer apresentá-los pela ordem que eles aparecem no livro.
- As listas não ordenadas não têm uma sequência definida. Podes usar este tipo para criar, por exemplo, uma lista de compras no supermercado, visto que não vais comprar os artigos de que precisas por uma ordem pré-definida.
- As listas descritivas permitem usar um elemento HTML para o nome do item da lista e outro para a sua descrição, de modo a que possam ter estilos diferentes.
Para criares listas em HTML tens de usar pelo menos 2 elementos:
- A lista
- O(s) item(s) da lista
Listas Ordenadas
As tags que te permitem criar uma lista ordenada são:
<ol>para a lista (abreviatura de ordered list)<li>para o item da lista (abreviatura de list item)
E criá-la é muito simples. Basta abrires a lista <ol>, colocares os items lá dentro <li>Item 1</li> e fechares a lista </ol>.
De seguida vou fazer uma lista ordenada com o que tenho que fazer quando vou colocar gasóleo no carro. É ordenada porque tenho que dar estes passos por esta ordem.
<ol> <li>Dirijo-me à bomba onde quero abastecer</li> <li>Estaciono à frente da bomba</li> <li>Desligo o motor do carro</li> <li>Saio do carro</li> <li>Abro a tampa do depósito</li> <li>Abasteço</li> <li>Fecho a tampa do depósito</li> <li>Pago o gasóleo</li> <li>Entro no carro</li> <li>Ligo o motor</li> <li>Saio das bombas de gasolina</li> </ol>
Repara que eu não escrevi nenhum número neste código. No entanto, vê o resultado dele.
Sim, eu sei, faltaram muitos passos pelo meio! Não abri a porta do carro para sair, não tirei a carteira do bolso para pagar, etc. Mas tu percebeste a ideia. :-)
A numeração decimal, que vês acima e que foi adicionada pelo navegador quando interpretou o código HTML, é o tipo de sequência padrão que os navegadores usam para as listas ordenadas, mas é possível alterá-la tanto em CSS como em HTML. O mais habitual é fazê-lo usando CSS, mas em HTML é possível fazê-lo adicionando ao elemento <ol> o atributo type, que pode ter os seguintes valores:
1- sequências em números decimais (é aquele que vês no meu exemplo anterior)a- sequências ordenadas alfabeticamente, com letras minúsculasA- sequências ordenadas alfabeticamente, com letras maiúsculasi- sequências em números romanos com letras minúsculasI- sequências em números romanos com letras maiúsculas
Vou deixar aqui 2 exemplos. Um usando o valor A e outro usando o valor I.
<ol type="A"> <li>Minecraft</li> <li>Fortnite</li> <li>CS:GO</li> </ol> <ol type="I"> <li>Minecraft</li> <li>Fortnite</li> <li>CS:GO</li> </ol>
Listas Não Ordenadas
Para criares uma lista não ordenada, fazes exactamente a mesma coisa, mas em vez de usares a tag <ol> que representa uma lista ordenada, usas a tag <ul> que representa uma lista não ordenada (unordered list).
<p>As modalidades desportivas que eu já pratiquei foram:</p> <ul> <li>Natação</li> <li>Ginástica</li> <li>Karaté</li> <li>Ténis</li> <li>Crossfit</li> </ul>
Nota como nesta lista não há uma sequência porque isso não é relevante. Não interessa a ordem por que as modalidades aparecem. Eu apenas quero mostrar uma lista de desportos que já pratiquei. Por essa razão, em vez de números ou letras sequenciais, o HTML coloca apenas as bolinhas antes de cada elemento da lista.
Listas Descritivas
Como referi acima, na introdução a este capítulo, as listas descritivas (ou listas de definições como eram designadas antes do HTML5) usam 3 elementos:
<dl>- é a tag que cria a lista (description list)<dt>- é a tag que cria o nome dos items da lista (data term)<dd>- é a tag que cria a descrição dos items da lista (data definition ou data description)
Parece esquisito mas vais ver que é fácil com este exemplo que te vou dar. Para este exemplo, vou escrever o mesmo que escrevi aqui já em cima numa lista não ordenada, mas vou usar uma lista descritiva.
<dl> <dt>dl</dt> <dd>é a tag que cria a lista (<i>description list</i>)</dd> <dt>lt</dt> <dd>é a tag que cria o nome dos items da lista (<i>data term</i>)</dd> <dt>dd</dt> <dd>é a tag que cria a descrição dos items da lista (<i>data definition</i>)</dd> </dl>
O resultado não é especialmente cativante mas mais à frente, quando começarmos a aprender CSS, vais aprender a alterar estas listas de modo a que sejam apresentadas de maneiras completamente diferentes.
Listas Dentro de Listas
Agora que já sabes criar listas, deixa-me dizer-te que é possível criar listas dentro de listas ou, como se diz em Inglês, nested lists. O procedimento é igual ao que usamos para criar listas de 1 só nível, mas tens de ter em atenção que as novas listas são colocadas dentro de um item da lista principal e não dentro da própria lista principal.
Hum! Não percebi nadinha!
Ok, é justo. Vou dar-te um exemplo e ficas já a perceber.
<p>Lista de compras</p>
<ul>
<li>Detergente para a loiça</li>
<li>Manteiga</li>
<li>Carne
<ul>
<li>Peito de frango</li>
<li>Coxas de peru</li>
</ul>
</li>
<li>Leite</li>
<li>Fruta
<ul>
<li>Maçãs</li>
<li>Laranjas</li>
</ul>
</li>
</ul>
Neste exemplo usei listas não ordenadas para o nível principal e para o segundo nível, mas podes misturar tipos de listas e até podes criar mais níveis de listas.
Para veres um exemplo de uma lista com 3 níveis, podes olhar para o índice deste tutorial.
Antes de terminarmos este capítulo, vamos meter mãos à obra para fazermos uma revisão.
No teu editor de texto, cria um novo ficheiro chamado pagina3.html, na mesma pasta em que criaste os dois anteriores, e coloca aquelas tags que temos que colocar em todos os ficheiros HTML. Depois, logo a seguir à tag que abre o <body>, cria uma nova lista, não ordenada, com os links para as tuas páginas. NOTA: Não te esqueças de colocar o valor no elemento<title> e de criares um <h1> para saberes em que página estás quando a visualizas.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>A minha Terceira Página</title>
</head>
<body>
<h2>Menu</h2>
<ul>
<li><a href="pagina.html">Página 1</a></li>
<li><a href="pagina2.html">Página 2</a></li>
<li><a href="pagina3.html">Página 3</a></li>
</ul>
<h1>A minha Terceira Página</h1>
</body>
</html>
Agora copia o bloco de código onde tens a lista, para as outras duas páginas, e coloca-o logo a seguir ao <body>, como fizemos na página 3. Assim:
...
<body>
<h2>Menu</h2>
<ul>
<li><a href="pagina.html">Página 1</a></li>
<li><a href="pagina2.html">Página 2</a></li>
<li><a href="pagina3.html">Página 3</a></li>
</ul>
...
</body>
</html>
Se tiveres feito tudo bem, acabaste de criar um menu para o teu site. Sim, porque 3 páginas já podem ser consideradas um site. :-)
Agora descansa um bocadinho porque não deves estar muito tempo seguido a olhar para o ecrã. Os teus olhos estiveram muito tempo a focar para perto, por isso, vai até à janela e olha para longe. Experimenta olhar uns minutos para o horizonte e para objectos que estejam longe ti.
Quando voltares, vamos passar ao Capítulo 5 - Tabelas, mas não tenhas pressa porque eu vou estar cá quando voltares.