pcdicasHTML
Para visualizar corretamente configurar a tela para 1024 x 768 pixels

Listas

A linguagem HTML contém elementos que permitem criar listas de definições, listas ordenadas ou não.

1. Listas Não Ordenadas


Uma lista não ordenada contém vários itens marcados todos com o mesmo símbolo (normalmente um círculo pequeno ou um quadrado pequeno.)

- No menu "Formatar", clicar em "Listas" e clicar em "Com marcadores"

Para criar uma lista não ordenada usa-se o elemento <ul> ("unordered list.") Dentro desse elemento os vários itens são criados com o elemento <li> ("list item.").

Esta é a codificação:

<ul>
<li>sala 1</li>
<li>sala 2</li>
</ul>

Este é o aspecto que aparece no navegador:


É importante notar que dentro de uma lista não ordenada podemos colocar parágrafos, quebras de linha, imagens, outras listas, etc...

2. Listas Ordenadas


Uma lista ordenada contém vários itens numerados e é criada com o elemento <ol> ("ordered list.") Os itens da lista definem-se com o elemento <li> ("list item.")

- No menu "Formatar", clicar em "Listas" e clicar em "Numerada".

Esta é a codificação:
<ol>
<li>Sala 1</li>
<li>Sala 2</li>
</ol>

Este é o aspecto que aparece no navegador:
  1. Sala 1
  2. Sala 2

Dentro de uma lista ordenada podemos colocar parágrafos, quebras de linha, imagens, outras listas, etc.


3. Listas de Definições

Uma lista de definições não é constituída por uma série de itens mas por termos acompanhados das descrições de seus significados.

As listas de definições criam-se com o elemento <dl> ("definition list.") O nome de cada termo fica dentro de um elemento <dt> ("definition term") e a sua descrição fica num elemento <dd> ("definition description".)

Esta é a codificação:

<dl>
<dt>Sala 1</dt>
<dd>Sala do LabInfo destinada a uso individual pelos estudantes</dd>

<dt>Sala 2</dt>
<dd>Sala do LabInfo destinada prioritariamente a aulas.</dd>
</dl>

Este é o aspecto que aparece no navegador:
Sala 1
Sala do LabInfo destinada a uso individual pelos estudantes
Sala 2
Sala do LabInfo destinada prioritariamente a aulas.

Dentro de um elemento <dd> podemos colocar parágrafos, quebras de linha, imagens, outras listas, etc.


Outras opções

a. Posicionar o cursor em um local conveniente do texto e
clicar no menu Inserir / Linha horizontal - "Horizontal Line"

b. Posicionar o cursor em um local conveniente do texto e
clicar no menu Inserir / Caracteres e símbolos
clicar no botão Caracter
e inserir um símbolo especial.

Exercícios

2.4. No Kompozer use uma das páginas anteriores ou crie uma nova e, em algum ponto da página,
usar a opção Linha horizontal / "Horizontal Line". Salvar em html / htm2-4.html

2.5. Use uma das hps anteriores ou crie uma nova e, em algum ponto do texto, insira uma lista

a. com marcadores. Salvar o arquivo resultante como html / htm2-5a.html.
b. numerada. Salvar o arquivo resultante como html / htm2-5b.html.
c. de definições. Salvar o arquivo resultante como html / htm2-5c.html.




Este "site", destinado prioritariamente aos alunos de Fátima Conti,
pretende auxiliar quem esteja começando a se interessar por internet,
segue as regras da FDL (Free Documentation Licence),
computadores e programas, estando em permanente construção.
Sugestões e comentários são bem vindos.
Se desejar colaborar, clique aqui.
Agradeço antecipadamente.

Deseja enviar essa página?


Se você usa um programa de correio eletrônico devidamente configurado e tem
um e-mail pop3, clique em "Enviar página" (abaixo) para abrir o programa.
Preencha o endereço do destinatário da mensagem.
E pode acrescentar o que quiser.
(Se não der certo, clique aqui para saber mais).

Enviar página

Se você usa webmail copie o endereço abaixo

http://www.ufpa.br/dicas/htm/htm-outr.htm


Acesse a página do seu provedor. Abra uma nova mensagem.
Cole o endereço no campo de texto.
Preencha o endereço do destinatário.
E também pode acrescentar o que quiser.

Última alteração: 23 abr 2012