Curso de Extensão em HTML – PUCRS
Profs. Fabiano Hessel e Leticia Leite
3. Listas
Você pode criar uma lista de itens afim de mostrar um conjunto de elementos
sem uma ordem particular, como por exemplo uma lista de produtos ou de sites
Web.
Listas não Numeradas – Listas Numeradas – Listas Intercaladas - Listas de
Definições
Para criar uma lista não numerada, siga os seguintes passos:
1. colocar o marcador de início de lista <UL>;
2. para cada item da lista, coloque a marcação de início de item <LI>.
Observe que não é necessário colocar a marcação de final de item
</LI>;
3. para finalizar a lista, coloque o marcador de fim de lista </UL>.
Exemplo :
<UL>
<LI> Arroz
<LI> Feijão
<LI> Massa
</UL>
O navegador Web irá mostrar a lista de itens. Cada elemento da lista será
precedido de um ponto (•). Você pode modificar o estilo do ponto. Para tanto,
você deve utilizar o comando TYPE = ?, no marcador de início de lista, trocando ?
pelo estilo de ponto que você deseja utilizar:
(° ) círculo (circle)
(• ) disco (disc)
(<) quadrado (square)
Exemplo :
<UL TYPE=square>
<LI> Arroz
<LI> Feijão
<LI> Massa
</UL>
Tarefa: Inserir em sua página Web uma lista não numerada. Utilizar os
diferentes estilos de pontos.
Curso de Extensão em HTML – PUCRS
Profs. Fabiano Hessel e Leticia Leite
Listas Numeradas
Para criar uma lista numerada você deve:
1. colocar o marcador de início de lista <OL>;
2. para cada item da lista, coloque a marcação de início de item <LI>.
Observe que não é necessário colocar a marcação de final de item
</LI>;
3. para finalizar a lista, coloque o marcador de fim de lista </OL>.
Exemplo :
<OL>
<LI> Arroz
<LI> Feijão
<LI> Massa
</OL>
Assim como nas listas não numeradas, você pode modificar o estilo do
número colocado antes de cada item da lista. Para tanto, basta colocar o comando
TYPE = ?, no marcador de início de lista, trocando ? pelo estilo de ponto que você
deseja utilizar:
Estilo do número
A
a
I
i
1
Resultado
A, B, C
a, b, c
I, II, III
i, ii, iii
1, 2, 3
Exemplo :
<OL TYPE=A>
<LI> Arroz
<LI> Feijão
<LI> Massa
</OL>
As listas numeradas começam automaticamente em 1, mas você pode
modificar este parâmetro afim de iniciar uma lista por um outro número. Para
tanto, você deve utilizar o comando START = ?, no marcador de início de lista,
trocando ? pelo número desejado.
Curso de Extensão em HTML – PUCRS
Profs. Fabiano Hessel e Leticia Leite
Exemplo :
<OL START=4>
<LI> Arroz
<LI> Feijão
<LI> Massa
</OL>
Tarefa: Inserir em sua página Web uma lista numerada. Utilizar os diferentes
estilos de números e modificar o número inicial da lista.
Listas Intercaladas
As listas podem ser intercaladas, criando sub-itens, afim de desenvolver um
ponto de uma lista.
Exemplo :
<OL>
<LI> Lista de frutas
<OL TYPE=A>
<LI> maçã
<LI> banana
</OL>
<LI> Lista de verduras
<OL TYPE=A>
<LI> tomate
<LI> cenoura
</OL>
</OL>
Observação: você pode criar uma lista intercalada não numerada ou, ainda,
criar uma lista que contenha partes numeradas e partes não numeradas.
Tarefa: Inserir em sua página Web uma lista intercalada. Utilizar tanto listas
numeradas como não numeradas. Utilize também os diferentes estilos de
numeração.
Lista de Definições
É possível criar uma lista de definições afim de apresentar termos e suas
definições. Este tipo de lista convém perfeitamente a glossários, por exemplo.
Para iniciar a lista você deve utilizar o tag <DL>, em seguida, para cada termo da
lista você deve utilizar o tag <DT>. A definição associada ao termo deve iniciar
com a tag <DD>. Para finalizar a lista utilize o tag </DL>.
Curso de Extensão em HTML – PUCRS
Profs. Fabiano Hessel e Leticia Leite
Exemplo :
<DL>
<DT> Anti-vírus
<DD> Programa capaz de detectar vírus em computadores.
<DT> Bit
<DD> Menor unidade de informação em um computador.
</DL>
Tarefa: Inserir em sua página Web uma lista de definições.
Tarefa: Re-fazer a tarefa anterior utilizando as facilidades do 1st Page. Dica:
utilize o menu Lists na barra de ferramentas.
Caracteres Especiais
Você pode, também, inserir símbolos especiais, como por exemplo: <, >, &,
 ou . Algumas opções:
- &lt ou &#60; para representar <
- &gt ou &#62; para representar >
- &amp ou &#38; para representar &
- &quot ou &#34;para representar "
- &reg ou&#174; para representar 
- &copy ou&#169; para representar 
Uma lista completa dessas notações especiais pode ser obtida no CERN,
em: http://www.w3.org/hypertext/WWW/MarkUp/ISOlat1.html
Tarefa: Inserir em sua página Web um texto com pelo menos 10 caracteres
especiais diferentes.
Tarefa: Re-fazer a tarefa anterior utilizando as facilidade do 1st Page. Dica:
utilizar a opção  da barra de ferramentas.
Endereços
Você pode criar um link que permite aos leitores da sua página Web enviar
um e-mail para um endereço específico. Este link pode ser criado tanto a partir de
uma imagem como a partir de um texto. O procedimento é semelhante para
ambos. Para tanto você deve utilizar o tag: <A HREF=“mailto:?”> antes do texto
ou da imagem, substituindo ? pelo endereço eletrônico do destinatário. Após o
texto ou a imagem você deve colocar o comando </A>.
Exemplo :
<A HREF =“mailto:[email protected]”> entre em contato </A>
Curso de Extensão em HTML – PUCRS
Profs. Fabiano Hessel e Leticia Leite
Tarefa: Inserir em sua página Web um link para seu endereço de e-mail.
Tarefa: Coloque novamente um link para seu endereço de e-mail, porém
utilize os recursos do 1st Page. Dica: Utilize a opção no menu standard.
Também é possível utilizar o tag <ADDRESS> para ressaltar o endereço de
contato. Assim, você pode utilizar este comando para destacar o seu endereço
postal, por exemplo. Após inserir o texto desejado, você deve finalizar o tag com
</ADDRESS>.
Exemplo :
<ADDRESS>
Fulano de tal
Av. Sem nome, 001
90000-000 Terra do Nunca
</ADDRESS>
Tarefa: a- Inserir o seu endereço postal na sua página. b- Como você faria
para que o resultado final fosse igual ao do exemplo acima?
Download

3. Listas