HTML: Listas, Tabelas e Formulários CST Sistemas para Internet Marx Gomes Van der Linden ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida )
Listas Listas de itens são bastante úteis para a exibição ordenada de elementos em um determinado texto: Relações Índices Definições http://marx.vanderlinden.com.br/ 2
Estrutura Básica Todas as listas são formadas a partir de duas partes: Um código que define o tipo da lista Um código que define o tipo de item http://marx.vanderlinden.com.br/ 3
Listas Ordenadas http://marx.vanderlinden.com.br/ 4
Tipos de Listas Existem três tipos de listas: OL (Ordered List) UL (Unordered List) DL (Definition List) http://marx.vanderlinden.com.br/ 5
Lista Ordenada Usada quando se deseja apresentar uma relação de elementos e estes têm que obedecer a uma ordem: Índice de tópicos Relação de vencedores de um concurso Seqüência de tarefas a serem realizadas http://marx.vanderlinden.com.br/ 6
Listas Ordenadas Como criar Inserir <OL> para marcar o início da lista Inserir <LI> no início da linha seguinte para definir o item da lista Logo após 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/ 7
Listas Ordenadas <OL> <LI> José Gregório </LI> <LI> Maria Matilde Sampaio </LI> <LI> Antônio da Silva </LI> <LI> Inácio Xavier Couto </LI> </OL> http://marx.vanderlinden.com.br/ 8
Listas Não-Ordenadas Usadas quando a ordem dos elementos não é importante. Lista dos integrantes de um grupo Relação dos professores de um curso http://marx.vanderlinden.com.br/ 9
Listas Não-Ordenadas Como criar Inserir <UL> para marcar o início da lista Inserir <LI> no início da linha seguinte para definir o item da lista Logo após 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 Não-Ordenadas <UL> <LI> Motor </LI> <LI> Chassis </LI> <LI> Pneus </LI> <LI> Direção </LI> </UL> http://marx.vanderlinden.com.br/ 11
Listas Não-Ordenadas http://marx.vanderlinden.com.br/ 12
Lista de Definições É útil quando queremos associar um conceito ou termo a uma definição ou descrição maiores. Glossário Índices Remissivos http://marx.vanderlinden.com.br/ 13
Lista de Definições http://marx.vanderlinden.com.br/ 14
Lista de Definições Como criar Inserir <DL> para marcar o início da lista Inserir <DT> no início da linha seguinte para marcar o início da definição Inserir <DD> no início da linha seguinte para marcar a descrição da definição Repetir o processo para cada elemento Inserir </DL> para marcar o final da lista http://marx.vanderlinden.com.br/ 15
Lista de Definições <DL> <DT> Filosofia </DT> <DD> Reflexão sobre as causas primeiras de tudo o que existe. </DD> <DT> Gnosticismo </DT> <DD> Sistema teológico e filosófico cujos sectários 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>São Paulo <OL> <LI> Santo André </LI> <LI> São Bernardo </LI> <LI> São Caetano </LI> </OL> </LI> <LI>Paraíba <OL> <LI> Lagoa Seca </LI> <LI> Lagoa de Roça </LI> <LI> Lagoa de Dentro </LI> </OL> </LI> </UL> Lista do Nível 1 (mais externo) Lista do Nível 2 (mais interno) http://marx.vanderlinden.com.br/ 18
Tabelas Tabelas são muito importantes porque permitem organizar os dados a fim de possibilitar uma melhor visualização Orçamentos Folha de pagamento Notas de alunos http://marx.vanderlinden.com.br/ 19
Importante Tabelas NÃO devem ser usadas para organizar o layout da página. Padrões Usabilidade Acessibilidade Separação entre layout e conteúdo Para isso, usaremos CSS http://marx.vanderlinden.com.br/ 20
Introdução 1999 2000 2001 2002 2003 Salários 1.200.000 1.500.000 1.000.000 1.500.000 1.300.000 Marketing 300.000 350.000 200.000 400.000 200.000 Pesquisa 500.000 300.000 140.000 220.000 150.000 Total 2.000.000 2.150.000 1.340.000 2.120.000 1.650.000 http://marx.vanderlinden.com.br/ 21
Estrutura de uma Tabela Define a tabela Definem as células de dados <table>...</table> <td>...</td> <tr>...</tr> Definem as linhas Obs: as células de cabeçalho usam as tags <th>..</th> http://marx.vanderlinden.com.br/ 22
Criando uma Tabela Simples Inserir <TABLE> inserir <TR> para definir o início da linha Inserir <TD> para definir uma célula da linha Inserir os dados da linha Inserir </TD> para concluir a célula da linha Repetir a seqüência 3 a 5 para cada célula 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> PREÇO </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> Linha 1 Linha 2 Linha 3 Linha 4 Linha 5 http://marx.vanderlinden.com.br/ 24
Criando uma Tabela Simples http://marx.vanderlinden.com.br/ 25
Expandindo Células Através de várias colunas A célula deve ocupar o espaço de várias colunas <TD COLSPAN=n> Onde n corresponde ao número de colunas sobre as quais a célula deve se expandir. http://marx.vanderlinden.com.br/ 26
Expandindo Células <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 Células http://marx.vanderlinden.com.br/ 28
Expandindo Células Através de várias linhas <TD ROWSPAN=n> Onde n corresponde ao número de linhas. Nesse caso, quando o valor de n=1 deve-se reduzir uma célula na linha abaixo (<TD> e </TD>) http://marx.vanderlinden.com.br/ 29
Expandindo Células <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 Células http://marx.vanderlinden.com.br/ 31
Pading, Spacing Padding Espaço entre o conteúdo e a borda da célula Spacing Espaço entre uma célula e outra http://marx.vanderlinden.com.br/ 32
Pading, Spacing Atributos HTML que se referem à apresentação Equivalentes em CSS não são 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 Formulário Um formulário é composto basicamente por três partes principais: A definição do formulário Os elementos do formulário O botão que aciona o envio do formulário 35
Criando um Formulário Os tags <FORM> e </FORM> definem o início e o fim do formulário <FORM> pode ter dois atributos: ACTION: define onde a ação ocorrerá, ou seja, quem irá processar o formulário. METHOD: define como o formulário será enviado. Pode ser de duas maneiras: GET e POST.. 36
Criando um Formulário Um formulário pode ter um nome NAME= nome do formulário Dentro do formulário coloca-se os campos Cada campo também deve ter um nome. 37
Criando um Formulário <FORM ACTION= http://www.site.com/ scripts/insere.php METHOD= POST > GET é o método default. POST permite enviar mais dados e estes não aparecem na janela de endereços do Browser. 38
Elementos de um Formulário Área de Texto <TEXTAREA NAME= nome do campo Opcionalmente pode-se definir o número de linhas e de colunas da área de texto: ROWS=n e COLS=n > Caso necessário, digite um texto que sempre aparecerá na área de texto ao ser carregada. Esse texto não será formatado. </TEXTAREA> 39
Elementos de um Formulário <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 Formulário 41
Elementos de um Formulário Elementos de Entradas Text Password Radio Checkbox Submit Reset 42
Elementos de um Formulário Text > <INPUT TYPE= text NAME= nome Opcionalmente, digite VALUE= valor inicial Opcionalmente, digite SIZE=n Opcionalmente, digite MAXLENGTH 43
Elementos de um Formulário <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 Formulário 45
Elementos de um Formulário 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 Formulário Radio Permite que opções sejam apresentadas ao usuário através de botões Apenas um será selecionado por vez Comportamento ou exclusivo 48
Elementos de um Formulário <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 > Rússia 49
50
Elementos de um Formulário Radio Se quiser que um valor apareça inicialmente escolhido deve-se defini-lo como CHEKED Se o atributo value não for configurado a palavra on será enviada por script. <INPUT TYPE= radio NAME= conjunto VALUE= 4 CHECKED> Rússia 51
Elementos de um Formulário Checkbox Também permite que opções sejam apresentadas ao usuário através de botões Mais de uma opçaõ pode ser selecionado por vez Comportamento E 52
Elementos de um Formulário <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 > Rússia 53
54
Elementos de um Formulário Select Também exibe um conjunto de opções mas de forma diferente. <SELECT NAME= nome Opcionalmente, SIZE=n Opcionalmente, MULTIPLE > <OPTION VALUE= valor > nome da opção para cada opção. </SELECT> 55
Elementos de um Formulário <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 Formulário 57
Elementos de um Formulário Submit É o meio pelo qual o formulário é enviado ao servidor. Aciona o browser para que ele colete os dados, construa os pacotes HTTP e os envie através uma conexão TCP. 58
Elementos de um Formulário <INPUT TYPE="SUBMIT" NAME="nome" VALUE="rótulo"> 59
Elementos de um Formulário Reset Limpa o Formulario Cada campo volta ao seu valor default <INPUT TYPE=RESET NAME=name VALUE= rótulo > 60
61