Licao 6 - Listas

<1> <2> <3> <4> <5> <6> <7> <8> <9> <10> <11> <12> <13> <14> <15> <16>

Li��o 6 - Listas

Listas s�o usadas para apresentar �tens de informa��o em um formato f�cil para ler. De fato, existe uma lista bem aqui, no pr�ximo par�grafo.

Objetivos

	Identificar c�digos HTML para criar listas ordenadas, n�o-ordenadas e aninhadas.
	Incluir diferentes tipos de listas em um documento HTML e ver as altera��es em um browser WWW.

Li��o

Listas HTML

Muitas p�ginas WWW apresentam listas de �tens - podem ser �tens precedidos de "bullets" (ditas n�o ordenadas) ou uma lista sequencialmente numerada (ordenada). Estas listas s�o facilmente formatadas em HTML, e podem ser aninhadas (listas de listas) para definir, por exemplo, uma hierarquia. Listas tamb�m s�o �teis para criar �ndices ou tabelas de conte�dos de uma s�rie de documentos ou cap�tulos.

Listas N�o-ordenadas

Listas N�o-ordenadas, ou r�tulos ul (de unordered list), s�o aquelas que aparecem como uma lista de �tens com bullets ou marcadores na frente. As marcas (bolinhas, checks, ...) que aparecer�o depender�o da vers�o do browser WWW e da fonte especificada para mostrar texto normal.

Aqui est� um exemplo de uma lista n�o-ordenada:

Minha lista n�o ordenada:

	Item 1
	Item 2
	Item 3

E aqui est� o c�digo HTML para produzir este formato:


     Minha lista n�o ordenada:

     <ul>

     <li>  Item 1

     <li>  Item 2

     <li>  Item 3

     </ul>

Os r�tulos <ul> marcam o in�cio e o fim de uma lista, e o <li> indica cada item da lista.

Listas Ordenadas

Listas ordenadas s�o aquelas onde o browser numera sucessivamente cada item da lista, come�ando de "1". A �nica diferen�a entre uma lista n�o ordenada e uma ordenada � o r�tulo de defini��o de lista que passa de ul para ol. Usando o exemplo acima:

Minha lista n�o ordenada:

Item 1
Item 2
Item 3

E este � o c�digo HTML para produzir esta lista:


     Minha lista n�o ordenada:

     <ol>

     <li>   Item 1

     <li>   Item 2

     <li>   Item 3

     </ol>

Listas Aninhadas

Listas ordenadas e Listas n�o-ordenadas podem ter diferentes n�veis, cada um ser� apropriadamente identado pelo browser WWW. A �nica preocupa��o ser� garantir que cada lista est� corretamente terminada e a ordem de aninhamento est� correta. Aqui est� um exemplo de uma lista n�o ordenada com subn�veis de outras listas:

Lista N�o-ordenada Aninhada

Este � o primeiro item

Este � um segundo item

Este � o primeiro sub-item do segundo item

	E este � um sub-item de um sub-item
	Perdido?

Este � o segundo sub-item do segundo item

Este � o terceiro sub-item do segundo item

Este � o terceiro item

E este � o c�digo HTML que produziu o formato acima:


     Lista N�o-ordenada Aninhada

     <ul>

     <li>Este � o primeiro item

     <li>Este � um segundo item

     <ul>

     <li> Este � o primeiro sub-item do segundo item

     <ul>

     <li> E este � um sub-item de um sub-item

     <li> Perdido?

     </ul>

     <li> Este � o segundo sub-item do segundo item

     <li> Este � o terceiro sub-item do segundo item

     </ul>

     <li>Este � o terceiro item

     </ul>

Listas aninhadas - misturando tudo

Uma Lista Ordenada pode incluir uma Lista N�o-ordenada aninhada:

Lista Ordenada Aninhada

Este � o primeiro item

Este � um segundo item

	Este � o primeiro sub-item do segundo item E este � um sub-item de um sub-item E este outro sub-item de um sub-item Perdido?
	Este � o segundo sub-item do segundo item
	Este � o terceiro sub-item do segundo item

Este � o terceiro item

E este � o c�digo HTML. Note que o HTML foi identado para tornar a leitura mais f�cil:


     Lista Ordenada Aninhada

     <ol>

        <li>Este � o primeiro item

        <li>Este � um segundo item

           <ul>

              <li> Este � o primeiro sub-item do segundo item

                 <ol>

                    <li> E este � um sub-item de um sub-item

                    <li> E este outro sub-item de um sub-item

                    <li> Perdido?

                 </ol>

              <li> Este � o segundo sub-item do segundo item

              <li> Este � o terceiro sub-item do segundo item

           </ul>

        <li>Este � o terceiro item

     </ol>

Colocando listas em seu documento HTML

Usando os r�tulos de listas, voc� acrescentar� uma lista ordenada e uma n�o-ordenada � sua p�gina Joinville I.

Re-abra sua �rea de trabalho.

Abra seu documento HTML no editor.

Sob o header Atra��es Tur�sticas, usaremos uma lista n�o-ordenada para apresentar alguns dos principais locais para visita��o tur�stica de Joinville. V� para esta se��o do documento.

Agora, entre o c�digo HTML para criar uma lista como a abaixo: (Dica: agora � um bom momento para praticar "copy & paste", a menos que voc� goste de digitar)


<ul>

<li>Alameda Brustlein. Conhecida por Rua das Palmeiras, leva ao Pal�cio dos Pr�ncipes.

     Tem o nome em homenagem a Frederico Brustlein, que as plantou em 1873. As sementes

     foram trazidas em 1867 por Louis Niemeyer, quando em visita ao Jardim Bot�nico do

     Rio de Janeiro. A palmeira bifurcada � um caso rar�ssimo. As palmeiras foram tombadas

     pelo SPHAN em 1982.

<li>Casa da Cultura - Galeria Municipal de Artes "Victor Kursancew".

<li>Casa da Mem�ria do Imigrante - Cemit�rio dos Imigrantes. Tombado pelo patrim�nio

     Hist�rico e Art�stico Nacional. Informa��es sobre a hist�ria da cidade, audiovisual

     e documenta��o na Casa da Mem�ria.

<li>Casa "Fritz Alt". Antiga resid�ncia do artista, exp�e obras de arte e objetos de

     pessoal do conhecido escultor joinvilense, autor de diversos monumentos (Imigrantes -

     Pra�a da Bandeira).

<li>Expoville. Play-Ground, Centro Comercial e Choperia. 

<li>Mirante. Torre no alto do Morro da Boa Vista, a 250 metros de altura. Vista

     panor�mica de Joinville de 360 graus e da Ba�a de S�o Francisco.

<li>Museu Arqueol�gico de Sambaqui. Exp�e didaticamente elementos culturais do 

     "Homem do Sambaqui", sua alimenta��o e t�cnica, costumes est�ticos e funer�rios,

     sua arte escult�ria em pedra.

<li>Museu de Fundi��o. Acervo constitu�do por cerca de 700 �tens, incluindo livros,

     documentos, fotografias, ferramentas, equipamentos, pe�as art�sticas, esp�cies 

     mineral�gicas, etc.

<li>Museu Nacional de Imigra��o e Coloniza��o. Exp�e mobili�rio hist�rico, cole��o

     de m�quinas de escrever, de costura, armas, rel�gios, teares, prensa de tipiti, 

     carro�as, carruagens, etc.

</ul>

Agora usaremos uma lista ordenada para apresentar os principais Hot�is e Shopping Centers de Curitiba. Sob o cabe�alho Servi�os de Hotelaria e Divers�o, digite o seguinte: (lembre-se do copy & paste)




- Hot�is



<ol>

<li>Hotel Bourbon *****

<li>Hotel Mabu **** 

<li>Hotel Elo ***

<li>Hotel San Martin ***

<li>Hotel Del Rey ***

<li>Hotel Rochelle ***

<li>Hotel Cervantes **

</ol>

<p>



- Shopping Centers

 

<ol>

<li>Shopping Mueller 

<li>Shopping Center Novo Batel

<li>Shopping Jardim das Américas

<li>Shopping Champagnat

<li>Shopping Direto da F�brica

<li>Shopping Curitiba

<li>Shopping Cristal Plaza

</ol>

<p>

Alterar o texto sobre os Museus no cabe�alho Atra��es Tur�sticas para inserir uma lista aninhada, destacando o endere�o e o hor�rio de visita��o. Primeiro abaixo do "Museu Arqueol�gico do Sambaqui":


<ul>

<li>Endere�o e hor�rio de visita��o: 

   <ul>

     <li> Rua Dona Francisca, 600 - Fone: (047) 433.0114 

     <li> 3� a domingo, das 09:00 �s 12:00 e das 14:00 �s 18:00 horas, inclusive feriados. 

   </ul>  

</ul>

Fa�a o mesmo com o "Museu de Fundi��o":


<ul>

<li>Endere�o e hor�rio de visita��o:

  <ul>

    <li> Rua Albano Schmidt, 333 - Fone: (047) 432.0133

    <li> 2� a 6� feira, das 09:00 �s 11:30 e das 14:00 �s 17:00 horas.

  </ul>

</ul>

E agora com o "Museu Nacional de Imigra��o e Coloniza��o":


<ul>

<li>Endere�o e hor�rio de visita��o:

  <ul>

    <li> Rua Rio Branco, 229 - Fone: (047) 433.3736

    <li> 3� a 6� feira, das 09:00 �s 17:30 horas; s�bados, domingos e feriados,

        das 14:00 �s 18:30 horas.

  </ul>

</ul>

Salve seu arquivo HTML e Recarrege em seu browser.

Revis�o

Como empregar listas em um documento WWW?
Quais s�o os r�tulos para listas ordenadas, n�o-ordenadas e �tens de lista?
Como criar uma lista como sub-item de outra?
Extra - Quais s�o os caracteres usados pelo seu browser para listas n�o-ordenadas, at� o quinto n�vel de aninhamento?
Extra II - O que acontece se o r�tulo li for usado fora do contexto de uma lista?

Pr�tica Independente

Experimente mudar a lista ordenada que voc� criou para uma n�o-ordenada. Misture uma lista ordenada dentro de uma n�o-ordenada, ou vice-versa.

A seguir...

Fazendo mais do que textos - acrescentando gr�ficos na sua p�gina.