Aprenda HTML - Parte 4

LISTAS I

São realmente notáveis as possibilidades que o HTML nos oferece em questão de tratamento de texto.
Não se limitam ao que vimos até agora, pois vão ainda mais longe. Vários exemplos disso são as listas,
que servem para numerar e definir elementos, os textos pré-formatados e os cabeçalhos ou os títulos.
As listas são utilizadas para citar, numerar e definir objetos. Também são utilizadas correntemente para
deslocar o começo da linha para a direita.
Podemos distinguir três tipos de listas:
· Listas desordenadas
· Listas ordenadas

· Listas de definição
Veremos agora detalhadamente uma por uma:

Listas desordenadas
São delimitadas pelas etiquetas <ul> e </ul> (unordered list). Cada um dos elementos da lista é citado por
meio de uma etiqueta <li> (sem fechamento, ainda que exista nenhum inconveniente em colocá-lo).
Então, fica assim:
<p>Países do mundo</p>
<ul>
<li>Brasil</li>
<li>Espanha</li>
<li>Austrália</li>
</ul>
O resultado:
Países do mundo
· Brasil
· Espanha
· Austrália
Podemos definir o tipo de marcador empregado para cada elemento. Para isso devemos especificá-lo por
meio do atributo type incluído dentro da etiqueta de abertura <ul>, se queremos que o estilo seja válido
para toda a lista, ou dentro da etiqueta <li> se queremos especificar um só elemento. A sintaxe é do
seguinte tipo:
<ul type="tipo de marcador">
E o tipo de marcador pode ser um dos seguintes:
Circle
Disc
Square

Nota: Em alguns navegadores não funciona a opção de mudar o tipo de marcador e por mais
que nos empenhemos, sempre sairá a bolinha preta.
Em caso de que não funcione, sempre podemos construir a lista à mão com o marcador que
quisermos, utilizando as tabelas do HTML. Veremos mais adiante como trabalhar com tabelas.
Vamos ver um exemplo de lista com um quadrado ao invés de uma bolinha e, no último elemento,
colocaremos um círculo. Para isso, vamos colocar o atributo type na etiqueta <ul>, que irá afetar todos os
elementos da lista.
<ul type="square">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li type="circle">Elemento 4</li>
</ul>
Que tem como resultado:
_ Elemento 1
_ Elemento 2
_ Elemento 3
o Elemento 4

LISTAS II

Continuamos estudando as listas do HTML, que nos possibilita criar estruturas atrativas para
apresentar a informação.

Listas ordenadas
Neste caso, usaremos as etiquetas <ol> (ordered list) e seu fechamento. Cada elemento será
igualmente precedido de sua etiqueta <li>.
Como exemplo:
<p>Regras de comportamento no trabalho</p>
<ol>
<li>O chefe sempre tem a razão</li>
<li>Em caso de dúvida, aplicar a regra 1</li>
</ol>
O resultado é:
Regras de comportamento no trabalho
1. O chefe sempre tem a razão
2. Em caso de dúvida aplicar a regra 1
Do mesmo modo das listas desordenadas , as listas ordenadas oferecem a possibilidade de modificar o
estilo. Concretamente, nos é possível especificar o tipo de numeração empregado escolhendo entre
números (1,2,3...), letras (a,b,c...) e suas maiúsculas (A,B,C...) e números romanos em suas versões
maiúsculas (I,II,III...) e minúsculas (i,ii,iii...).
Para realizar tal seleção temos de utilizar, como para o caso anterior, o atributo type, o qual será situado
dentro da etiqueta <ol>. Neste caso, os valores que o atributo pode tomar são:
1 Para ordenar por números
a Por letras do alfabeto
A Por letras maiúsculas do alfabeto
i Ordenação por números romanos em minúsculas
I Ordenação por números romanos em maiúsculas
<p>Ordenamos por números</p>
<ol type="1">
<li>Elemento 1</li>
<li>Elemento 2</li>
</ol>
<p>Ordenamos por letras</p>
<ol type="a">
<li>Elemento a</li>
<li>Elemento b</li>
</ol>
<p>Ordenamos por números romanos começando pelo 10</p>
<ol type="i"start="10">
<li>Elemento x&li;/li>
<li>Elemento xi&li;/li>
</ol>
O resultado:
Ordenamos por números
1. Elemento 1
2. Elemento 2
Ordenamos por letras
a. Elemento a
b. Elemento b
Ordenamos por números romanos começando pelo 10
i. Elemento x
ii. Elemento xi

LISTAS III

Terminamos o assunto das listas estudando as listas de definição. Veremos também a combinação de
listas.

Listas de definição
Cada elemento é apresentado junto com sua definição. A definição principal é <dl> e </dl> (definition list).
As etiquetas do elemento e sua definição são <dt> (difinition term) e <dd> (definition definition)
respectivamente.
Aqui lhe propomos um código que poderá clarear este sistema:
<p>Dicionário da Língua Portuguesa</p>
<dl>
<dt>Açougue</dt>
<dd>Estabelecimento onde se vendem carnes frescas</dd>
<dt>Colheita</dt>
<dd>Ato de colher os produtos agrícolas</dd>
</dl>
O efeito produzido:
Dicionário da Língua Portuguesa
Açougue
Estabelecimento onde se vendem carnes frescas
Colheita
Ato de colher os produtos agrícolas
Observe que em cada linha <dd> está deslocada da direção da esquerda. Este tipo de etiquetas é usado
muitas vezes com o propósito de criar textos mais ou menos deslocados da direção da esquerda.
O código:
<dl>
<dd>Primeiro nível de deslocamento
<dl>
<dd>Segundo nível de deslocamento
<dl>
<dd>Terceiro nível de deslocamento
</dl>
</dl>
</dl>
O resultado:
Primeiro nível de deslocamento
Segundo nível de deslocamento
Terceiro nível de deslocamento

Combinando listas
Nada nos impede de utilizar todas estas etiquetas de forma combinada como vimos em outros casos.
Dessa forma, podemos conseguir listas mistas como, por exemplo:
<p>Cidades do mundo</p>
<ul>
<li>Brasil
<ol>
<li>Rio de Janeiro
<li>Salvador
</ol>
<li>Espanha
<ol>
<li>Madrid
<li>Barcelona
</ol>
</ul>
Dessa forma criamos uma lista como esta:
Cidades do mundo
· Brasil
1. Rio de Janeiro
2. Salvador
· Espanha
1. Madrid
2. Barcelona