HTML: Listas, Tabelas e Formulrios

CST Sistemas para Internet Marx Gomes Van der Linden

( Material baseado no original de Marcelo Jos Siqueira Coutinho de Almeida )

Listas

Listas de itens so bastante teis para a exibio ordenada de elementos em um determinado texto:

Relaes ndices Definies

http://marx.vanderlinden.com.br/

Estrutura Bsica

Todas as listas so formadas a partir de duas partes:

Um cdigo que define o tipo da lista Um cdigo que define o tipo de item

http://marx.vanderlinden.com.br/

Listas Ordenadas

http://marx.vanderlinden.com.br/

Tipos de Listas

Existem trs tipos de listas:

OL (Ordered List) UL (Unordered List) DL (Definition List)

http://marx.vanderlinden.com.br/

Lista Ordenada

Usada quando se deseja apresentar uma relao de elementos e estes tm que obedecer a uma ordem:

ndice de tpicos Relao de vencedores de um concurso Seqncia de tarefas a serem realizadas

http://marx.vanderlinden.com.br/

Listas Ordenadas

Como criar

Inserir <OL> para marcar o incio da lista Inserir <LI> no incio da linha seguinte para definir o item da lista Logo aps escrever o elemento da lista Opcionalmente, inserir </LI> ao final de cada linha Repetir o processo para cada elemento Inserir </OL> para marcar o final da lista

http://marx.vanderlinden.com.br/

Listas Ordenadas

<OL> <LI> Jos Gregrio </LI> <LI> Maria Matilde Sampaio </LI> <LI> Antnio da Silva </LI> <LI> Incio Xavier Couto </LI> </OL>

http://marx.vanderlinden.com.br/

Listas No-Ordenadas

Usadas quando a ordem dos elementos no importante.

Lista dos integrantes de um grupo Relao dos professores de um curso

http://marx.vanderlinden.com.br/

Listas No-Ordenadas

Como criar

Inserir <UL> para marcar o incio da lista Inserir <LI> no incio da linha seguinte para definir o item da lista Logo aps escrever o elemento da lista Repetir o processo para cada elemento Inserir </UL> para marcar o final da lista

http://marx.vanderlinden.com.br/

10

Listas No-Ordenadas

<UL> <LI> Motor </LI> <LI> Chassis </LI> <LI> Pneus </LI> <LI> Direo </LI> </UL>

http://marx.vanderlinden.com.br/

11

Listas No-Ordenadas

http://marx.vanderlinden.com.br/

12

Lista de Definies

til quando queremos associar um conceito ou termo a uma definio ou descrio maiores.

Glossrio ndices Remissivos

http://marx.vanderlinden.com.br/

13

Lista de Definies

http://marx.vanderlinden.com.br/

14

Lista de Definies

Como criar

Inserir <DL> para marcar o incio da lista Inserir <DT> no incio da linha seguinte para marcar o incio da definio Inserir <DD> no incio da linha seguinte para marcar a descrio da definio Repetir o processo para cada elemento Inserir </DL> para marcar o final da lista

http://marx.vanderlinden.com.br/

15

Lista de Definies
<DL> <DT> Filosofia </DT> <DD> Reflexo sobre as causas primeiras de tudo o que existe. </DD> <DT> Gnosticismo </DT> <DD> Sistema teolgico e filosfico cujos sectrios se arrogavam um conhecimento sublime da natureza e os atributos divinos. </DD> </DL>
http://marx.vanderlinden.com.br/ 16

Listas Aninhadas

UL OL
http://marx.vanderlinden.com.br/ 17

Listas Aninhadas
<UL> <LI>So Paulo <OL> <LI> Santo Andr </LI> <LI> So Bernardo </LI> <LI> So Caetano </LI> </OL> </LI> <LI>Paraba <OL> <LI> Lagoa Seca </LI> <LI> Lagoa de Roa </LI> <LI> Lagoa de Dentro </LI> </OL> </LI> http://marx.vanderlinden.com.br/ </UL> Lista do Nvel 1 (mais externo)

Lista do Nvel 2 (mais interno)

18

Tabelas

Tabelas so muito importantes porque permitem organizar os dados a fim de possibilitar uma melhor visualizao Oramentos Folha de pagamento Notas de alunos

http://marx.vanderlinden.com.br/

19

Importante

Tabelas NO devem ser usadas para organizar o layout da pgina.

Padres Usabilidade Acessibilidade Separao entre layout e contedo

Para isso, usaremos CSS

http://marx.vanderlinden.com.br/

20

Introduo
1999
Salrios Marketing Pesquisa Total

2000

2001
1.000.000 200.000 140.000 1.340.000

2002
1.500.000 400.000 220.000 2.120.000

2003
1.300.000 200.000 150.000 1.650.000

1.200.000 1.500.000 300.000 500.000 350.000 300.000

2.000.000 2.150.000

http://marx.vanderlinden.com.br/

21

Estrutura de uma Tabela

Define a tabela Definem as clulas de dados

<table>...</table>

<td>...</td>

<tr>...</tr> Definem as linhas

http://marx.vanderlinden.com.br/ 22 Obs: as clulas de cabealho usam as tags <th>..</th>

Criando uma Tabela Simples

Inserir <TABLE> inserir <TR> para definir o incio da linha Inserir <TD> para definir uma clula da linha Inserir os dados da linha Inserir </TD> para concluir a clula da linha Repetir a seqncia 3 a 5 para cada clula Inserir </TR> para concluir a linha Repetir passos 2 a 7 para cada linha seguinte Inserir </TABLE>
http://marx.vanderlinden.com.br/ 23

Criando uma Tabela Simples

<TABLE> <TR> <TH> PRODUTO </TH> <TH> PREO </TH> </TR> <TR> <TD> MOUSE </TD> <TD> 10,00 </TD> </TR> <TR> <TD> TECLADO </TD> <TD> 70,00 </TD> </TR> <TR> <TD> SCANNER </TD> <TD> 490,00 </TD> </TR> <TR> <TD> MONITOR </TD> <TD> 4.000,00 </TD> </TR> </TABLE>
http://marx.vanderlinden.com.br/

Linha 1 Linha 2 Linha 3 Linha 4 Linha 5

24

Criando uma Tabela Simples

http://marx.vanderlinden.com.br/

25

Expandindo Clulas

Atravs de vrias colunas

A clula deve ocupar o espao de vrias colunas <TD COLSPAN=n>
Onde n corresponde ao nmero de colunas sobre as quais a clula deve se expandir.

http://marx.vanderlinden.com.br/

26

Expandindo Clulas
<tr> <td colspan=2> produto </td> </tr> <tr> <td> mouse </td> <td> 10,00 </td> </tr> <tr> <td> teclado </td> <td> 70,00 </td> </tr>
http://marx.vanderlinden.com.br/ 27

Expandindo Clulas

http://marx.vanderlinden.com.br/

28

Expandindo Clulas

Atravs de vrias linhas

<TD ROWSPAN=n>
Onde n corresponde ao nmero de linhas.

Nesse caso, quando o valor de n=1 deve-se reduzir uma clula na linha abaixo (<TD> e </TD>)

http://marx.vanderlinden.com.br/

29

Expandindo Clulas
<tr><td colspan=2> produto </td> </tr> <tr><td> mouse </td> <td> 10,00 </td> </tr> <tr><td> teclado </td> <td> 70,00 </td> </tr> <tr><td rowspan="2"> scanner </td> <td> 490 </td></tr> <tr><td> 4000 </td></tr>
http://marx.vanderlinden.com.br/ 30

Expandindo Clulas

http://marx.vanderlinden.com.br/

31

Pading, Spacing

Padding Espao entre o contedo e a borda da clula Spacing Espao entre uma clula e outra

http://marx.vanderlinden.com.br/

32

Pading, Spacing

Atributos HTML que se referem apresentao Equivalentes em CSS no so bem suportados pelo Internet Explorer 6 cellpadding, cellspacing

<table cellpadding="15" cellspacing="15"> <tr> <td>CELL 1</td> <td>CELL 2</td> </tr> <tr> <td>CELL 3</td> <td>CELL 4</td> </tr> </table>
http://marx.vanderlinden.com.br/ 33

Exemplo

34

Criando um Formulrio

Um formulrio composto basicamente por trs partes principais: A definio do formulrio Os elementos do formulrio O boto que aciona o envio do formulrio

35

Criando um Formulrio

Os tags <FORM> e </FORM> definem o incio e o fim do formulrio <FORM> pode ter dois atributos: ACTION: define onde a ao ocorrer, ou seja, quem ir processar o formulrio. METHOD: define como o formulrio ser enviado. Pode ser de duas maneiras: GET e POST..

36

Criando um Formulrio

Um formulrio pode ter um nome NAME=nome do formulrio Dentro do formulrio coloca-se os campos Cada campo tambm deve ter um nome.

37

Criando um Formulrio
<FORM ACTION=http://www.site.com/ scripts/insere.php METHOD=POST>

GET o mtodo default. POST permite enviar mais dados e estes no aparecem na janela de endereos do Browser.

38

Elementos de um Formulrio

rea de Texto <TEXTAREA NAME=nome do campo Opcionalmente pode-se definir o nmero de linhas e de colunas da rea de texto: ROWS=n e COLS=n > Caso necessrio, digite um texto que sempre aparecer na rea de texto ao ser carregada. Esse texto no ser formatado. </TEXTAREA>
39

Elementos de um Formulrio
<FORM NAME=MEUFORM ACTION=..\scripts\teste.php METHOD=POST> <B> Digite sua mensagem: </B> <BR> <TEXT AREA NAME=area1 ROWS=10 COLS=20> Nessa rea aparecer um texto default se for colocado um... </TEXTAREA> </FORM>
40

Elementos de um Formulrio

41

Elementos de um Formulrio

Elementos de Entradas

Text Password Radio Checkbox Submit Reset

42

Elementos de um Formulrio

Text

<INPUT TYPE=text NAME=nome Opcionalmente, digite VALUE=valor inicial Opcionalmente, digite SIZE=n Opcionalmente, digite MAXLENGTH >

43

Elementos de um Formulrio
<FORM NAME=MEUFORM METHOD=POST> <B> Login: </B> <BR> <INPUT TYPE="text" NAME=nome SIZE=15 MAXLENGTH=20> <P> <B> Senha: </B> <BR> <INPUT TYPE="text" NAME=nome SIZE=15 MAXLENGTH=20> </FORM>
44

Elementos de um Formulrio

45

Elementos de um Formulrio

Password

Troca-se apenas o text por password A sintaxe empregada a mesma Apenas esconde o texto sendo digitado

<INPUT TYPE=password NAME=nome SIZE=15 MAXLENGTH=20>

46

47

Elementos de um Formulrio

Radio Permite que opes sejam apresentadas ao usurio atravs de botes Apenas um ser selecionado por vez Comportamento ou exclusivo

48

Elementos de um Formulrio
<INPUT TYPE=radio NAME=conjunto VALUE=1> Brasil <INPUT TYPE=radio NAME=conjunto VALUE=2> EUA <INPUT TYPE=radio NAME=conjunto VALUE=3> Inglaterra <INPUT TYPE=radio NAME=conjunto VALUE=4> Rssia

49

50

Elementos de um Formulrio

Radio

Se quiser que um valor aparea inicialmente escolhido deve-se defini-lo como CHEKED

Se o atributo value no for configurado a palavra on ser enviada por script.

<INPUT TYPE=radio NAME=conjunto VALUE=4 CHECKED> Rssia

51

Elementos de um Formulrio

Checkbox Tambm permite que opes sejam apresentadas ao usurio atravs de botes Mais de uma opa pode ser selecionado por vez Comportamento E

52

Elementos de um Formulrio
<INPUT TYPE=checkbox NAME=conjunto VALUE=1> Brasil <INPUT TYPE=checkbox NAME=conjunto VALUE=2> EUA <INPUT TYPE=checkbox NAME=conjunto VALUE=3> Inglaterra <INPUT TYPE=checkbox NAME=conjunto VALUE=4> Rssia 53

54

Elementos de um Formulrio

Select Tambm exibe um conjunto de opes mas de forma diferente. <SELECT NAME=nome Opcionalmente, SIZE=n Opcionalmente, MULTIPLE > <OPTION VALUE=valor> nome da opo para cada opo. </SELECT>
55

Elementos de um Formulrio
<SELECT NAME="sel1 MULTIPLE> <OPTION NAME="A"> ANA </OPTION> <OPTION NAME="B"> BETA </OPTION> <OPTION NAME="C"> CARLOTA </OPTION> <OPTION NAME="D"> DENISE </OPTION> <OPTION NAME="E SELECTED> ELBA </SELECT>

56

Elementos de um Formulrio

57

Elementos de um Formulrio

Submit o meio pelo qual o formulrio enviado ao servidor. Aciona o browser para que ele colete os dados, construa os pacotes HTTP e os envie atravs uma conexo TCP.

58

Elementos de um Formulrio
<INPUT TYPE="SUBMIT" NAME="nome" VALUE="rtulo">

59

Elementos de um Formulrio

Reset Limpa o Formulario Cada campo volta ao seu valor default

<INPUT TYPE=RESET NAME=name VALUE=rtulo>

60

61