Tutorial / Exercício de Listas em html

Lista ordenada ou numerada - Explicação

O estilo de lista ordenada, também conhecido por lista numerada, insere ao lado esquerdo de cada nova informação, um algarismo do sistema numérico cardinal,ou do sistema numérico romano, ou ainda, um carácter do sistema alfabético, classificando estas informações, como itens ordenados em uma lista.

O formato produzido na utilização de uma lista ordenada é idêntico a inserção do recurso de numeração, disponível em alguns editores de textos, como por exemplo, no Microsoft Word.

Sintaxe utilizada para a inserção de listas ordenadas:

• <ol> - Tag utilizada para abertura da lista ordenada (OL = Ordered List).
• <li> - Tag utilizada para a inserção de cada novo item da lista.
• </ol> - Tag utilizada para o fechamento da lista ordenada.

A tag <li> deverá ser inserida antes de cada novo item da lista, a fim de lhe atribuir um índice de classificação seqüencial, e o seu fechamento com </li> ao término da descrição.

Atributo (type):

O atributo (type) na lista ordenada, é utilizado para definir qual sistema de ordenação entre os disponíveis deverá ser aplicado aos itens da lista. As formas possíveis são:
Type="1" – Algarismos do sistema numérico cardinal (1, 2, 3 etc.)
Type="i" – Algarismos em minúscula do sistema numérico romano (i, ii, iii etc.)
Type="I" - Algarismos em maiúscula do sistema numérico romano (I, II, III etc.)
Type="a" – Caracteres em minúscula do sistema alfabético (a, b, c etc.)
Type="A" - Caracteres em maiúscula do sistema alfabético (A, B, C etc.)

Atributo (start):

O atributo (start) define o ponto de partida para a classificação dos itens de uma lista ordenada. A sua utilização é feita da seguinte forma:

Start="*" – O sinal (*) deverá ser substituído por um número que será tomado como referência para o início da classificação em uma lista ordenada.

Exemplos da utilização do atributo (start):

• Quando (type="1") e (start="0"), a classificação será iniciada no número 0 (valor aplicado apenas quando for usado o sistema cardinal para a classificação).
• Quando (type="A") e (start="11"), a classificação será iniciada no caracter K.
• Quando (type="I") e (start="10"), a classificação será iniciada no algarismo romano X.
• Tanto o atributo (type) como o (start), deverão ser inseridos dentro da tag <ol>, definindo um mesmo estilo para todos os itens da lista.

Atividade com Lista ordenada ou numerada

1) Crie uma página com o nome "lista1.html". Essa página terá o seguinte modelo de lista ordenada:

2) Agora, com base na atividade (1), crie outro arquivo denominado lista2.html. Essa lista deve ser numerada, com os mesmos estados acima descritos, porém ao invés de iniciar a numeração com número (1..2..3) a lista deve iniciar com letra (a..b..c, ou A..B..C).

3) Faça outro arquivo denominado lista3.html. Essa lista deve ser o mesmo conteúdo da atividade (1), tendo como numerador o algarismo romano, iniciando do vigésimo algarismo.

Lista desordenada ou não numerada - Explicação

O estilo de lista desordenada, também conhecido por não numerada, insere um símbolo gráfico (bullet) ao lado esquerdo de cada uma das informações, a fim de identificá–las individualmente como itens de uma lista. O resultado apresentado por este estilo de lista é idêntico ao efeito produzido na inserção do recurso de marcadores, disponível em alguns editores de textos, como por exemplo, no Microsoft Word.

Sintaxe utilizada para a inserção de listas desordenadas:
<ul> - Tag utilizada para abertura da lista desordenada (UL = Unordered List).
<li> - Tag utilizada para a inserção de cada novo item da lista.
</ul> - Tag utilizada para o fechamento da lista desordenada.

A tag <li> deverá ser inserida antes de cada novo item da lista, e seu fechamento com </li> ao término da descrição.

Atributo (type):

O atributo (type) é utilizado para definir qual símbolo gráfico (bullet) entre os três disponíveis deverá ser inserido juntamente com os itens da lista. Os valores possíveis são:
Type="disc" – Insere um círculo preenchido.
Type="circle" – Insere um círculo vazio.
Type="square" – Insere um quadrado preenchido.

O atributo (type) poderá ser usado tanto com a tag <ul> (definindo o símbolo para todos os itens da lista), quanto com a tag <li> personalizando apenas os itens desejados.

Atividade com Lista desordenada ou não numerada

4) Crie uma página com o nome "lista4.html". Essa página terá o seguinte modelo de lista desordenada:

5) Com base no arquivo do exercício (4), monte duas novas páginas: lista5.html, contendo a lista com o tipo "disc", e lista6.html, contendo a lista do tipo "circle".

FINALIZAÇÃO DA ATIVIDADE:

Agora que você concluiu os 6 arquivos (lista1.html, lista2.html, lista3.html, lista4.html, lista5.html, lista6.html), envie esses arquivos para seu endereço de url (Dúvida clique aqui), e no seu arquivo index.html (Dúvida clique aqui), adicione um hiperlink para cada uma das páginas (lista1.html, lista2.html, lista3.html, lista4.html, lista5.html, lista6.html).

Exemplo de linha com o código html de hiperlink no seu index.html:

<html>

 <head><title> Desenvolvimento de Aplicações </title></head>

 <body bgcolor="#33ccdd">

  <center><h1> Elias Pereira Santos </h1></center>

  <center>

  <img src="imagens\perfil.jpg" width="200" heigth="300">

  </center>

  <p>

  <a href="lista1.html">Lista Ordenada 1 dos Estados Brasileiros </a>

  <!-- a linha acima está fazendo o link para o arquivo lista1.html -->

  <!-- este arquivo deve estar na raiz de sua URL, junto com o seu -->

  <!-- arquivo index.html -->

 </body>

</html>

Observando o modelo acima, acrescente em seu index as demais páginas para a devida visualização, lembrando que todas devem ser enviadas para seu servidor web.