Tabelas. Tabelas. Iniciando a construção... Atributos <table> Tag <table></table> 05/04/2011

Tamanho: px

Começar a partir da página:

Download "Tabelas. Tabelas. Iniciando a construção... Atributos <table> Tag <table></table> 05/04/2011"

Letícia Palmeira Salgado
5 Há anos
Visualizações:

1 INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DA PARAÍBA CAMPUS CAMPINA GRANDE 1 2 Tabelas INTERNET BÁSICA: EXTENSIBLE HYPERTEXT MARKUP LANGUAGE XHTML PARTE 3 Largamente suportado(browser); Controlar aspectos de formatação; Posicionar elementos e objetos na página; 50 Português 30 Matemática 40 Geografia 30 Rhavy Maia Guedes rhavymaia@gmailcom Tabelas Iniciando a construção 3 4 Linha x Coluna Coluna Cabeçalho Para construir tabelas são necessários alguns passos, inicializando pela estrutura básica: Linha 50 Português 30 Matemática 40 Geografia 30 Célula Esboçar a tabela: Linhas, Colunas, Cabeçalhos Tag Atributos 5 6 Definir a estrutura geral de uma tabela; <head> </head> align left, center, right bgcolor #xxxxxx, nome da cor cellpadding cellspacing 1

2 Tag Atributos 7 8 Definir as linhas; <head> </head> align right, left, center, justify, char bgcolor #xxxxxx, nome da cor valign top, middle, bottom, baseline Tag Atributos 9 10 Definir as células do cabeçalho; Negrito e centralizado s align right, left, center, justify, char bgcolor #xxxxxx, nome da cor height width valign top, middle, bottom, baseline colspan e rowspan - Aguardem sensacionais revelações Tag Atributos Definir as células de dados; s align right, left, center, justify, char bgcolor #xxxxxx, nome da cor height width valign top, middle, bottom, baseline colspan e rowspan - Continuem aguardando 2

3 Colspan Exemplo 13 Definir quantas colunas uma célula poderá abranger (extensão); Por padrão um célula corresponde a uma coluna: td;, colspan= valor <td colspan= 2 > s Rowspan Exemplo Definir quantas linhas uma célula poderá abranger (extensão); Por padrão um célula corresponde a uma linha;, rowspan= valor <td rowspan= 2 > s Formulário Definição Construção Campos HTML provê de componentes gráficos de interface que possibilitam a interação do usuário com o documento (página); Campos que permitem a entrada de informação; 3

19 20 Os dados coletados exibidos por esses componentes são

Web; Servidores (Container Web); A Aplicação Web processa toda

outra* página HTML 21 22 O navegador carrega o formulário O usuário

as informações e, caso necessário, devolve ao usuário Inicialmente

4 19 20 Os dados coletados exibidos por esses componentes são posteriormente utilizados por programas que residem no servidor Web; Servidores (Container Web); A Aplicação Web processa toda informação enviada pelo formulário e responde para o usuário uma outra* página HTML O navegador carrega o formulário O usuário entra com as informações 1 2 Tag <form> O servidor processa as informações e, caso necessário, devolve ao usuário Inicialmente você deve definir a tag <form>; Determina o início e o fim de um formulário 3 <form> 4

Atributos <form> Atributos <form> 25 26 action Define o caminho no servidor do script ou do programa que processa os dados do formulário method Método utilizado para envio de dados ao servidor POST

5 Atributos <form> Atributos <form> action Define o caminho no servidor do script ou do programa que processa os dados do formulário method Método utilizado para envio de dados ao servidor POST GET target Tipo de janela do browser que vai retornar uma resposta do servidor ao cliente sobre a execução do formulário <form action= wwwifpbedubr/cadastrophp method= POST target= _self > Enviando Tag <input> Hey headfirstlabscom meu usuário clicou no botão de submissão do formulário Eu tenho que enviar um formulário de dados Vou lhe enviar via POST E a aplicação responsável é a contestphp Pode mandar! Tou pronto! Especifica vários campos dentro de um formulário; Recebe diversos atributos que definem o tipo de campo (botão, caixa de texto); <form action= wwwheadfirstlabscom/contestphp method= POST target= _self > Tag <input> Atributos <input> type Define o tipo do campo que será renderizado Tipo text password hidden radio checkbox button submit Descrição Campo de texto simples Campo de texto para digitação de texto Campo com nome e valor, mas não é exibido Botões rádio Caixa de verificação Botão 3D Botão para envio de informação para o servidor reset Botão para limpar todos os componentes do formulário 5

Atributos <input> Atributos <input> 31 32 name Define o nome do componente; Importante para o tratamento da informação no lado servidor value Valor padrão do campo <form action= cadastrophp method=

6 Atributos <input> Atributos <input> name Define o nome do componente; Importante para o tratamento da informação no lado servidor value Valor padrão do campo <form action= cadastrophp method= post target= _self > <input type= text name= usuario value= > <input type= submit name= enviar value= Enviar > Tag <select></select> Tag <option> Exibe um menu com várias opções para o usuário escolher; Trabalha em conjunto com a tag <select> Conjunto de opções; <form action= cadastrophp method= post target= _self > Casado <select> <option>sim</option> <option>não</option> </select> Atributos <select></select> Atributos <option></option> name Nome do componente Alfanumérico size multiple Define a quantidade de linhas Se o valor for 1, funciona como combobox, se for n(quantidade de <option>) funciona como uma listbox Define que mais uma opção pode ser selecionada por vez, isto é, atribui uma múltipla seleção Numérico Vazio value selected Atribui um valora opção Seleciona a opção desejada Alfanumérico Vazio 6

Tag <textarea></textarea> Atributos <textarea></textarea> 37 38 Exibe uma caixa de texto em tamanho maior <form action= cadastrophp method= POST target= _self > <textarea> Texto </textarea> name Nome

7 Tag <textarea></textarea> Atributos <textarea></textarea> Exibe uma caixa de texto em tamanho maior <form action= cadastrophp method= POST target= _self > <textarea> Texto </textarea> name Nome do componente Alfanumérico cols rows wrap Número de colunas, define sua largura Número de linhas, define sua altura Define se a linha de texto é quebrada ou não, e como deve ser quebrada Numérico Numérico off, virtual, physical Frames Frames Definição Construção Permite dividir uma página da internet em outras, na mesma página; Diferentes arquivos HTML compõe a mesma página; Divide o espaço da janela do navegador em colunas e/ou linhas e controlando o seu tamanho; Determina quantas serão as subdivisões e como será sua distribuição na tela Frames Atenção com Frames Composições (Organização): Controlar bem a navegação; Um frame poderá acionar outro frame e assim por diante então é necessário ter controle das chamadas; Verificar a usabilidade da página web quando adicionado o frame; 7

8 43 Atenção com Frames O W3C não recomenda a utilização de Frame 44 Inicializando a construção Inicializa definindo a configuração da estrutura; Particularidade: Não existe a tag ; Tag <frameset> <head> </head> <frameset> Inicializando a construção Atributos <frameset> 45 Caso o navegador não suporte frame: Tag <noframes></noframes> <head> </head> <frameset> <noframes> Esta página usa frames, mas o seu browser não consegue visualizar! </noframes> 46 cols* rows* Especifica a quantidade e o tamanho das colunas Especifica a quantidade e o tamanho das linhas Pixels, %, * Pixels, %, * border Largura da borda Pixels framespacing bordercolor Distância entre os quadros do frame Especifica a cor da borda entre os frames Pixels cor *Optar pela inserção de colunas ou linhas Atributos <frameset> Atributos <frameset> 47 cols Exemplo: O restante do espaço será utilizado 48 rows Exemplo: <frameset cols= 25%,*,25% > <frame src= frame_ahtm > <frame src= frame_bhtm > <frame src= frame_chtm > <frameset rows= 25%,* > <frame src= frame_ahtm > <frame src= frame_bhtm > 8

49 Atributos <frameset> border, framespacing Exemplo: <frameset border= 0 framespacing= 0 rows= 25%,* > <frame src= frame_ahtm > <frame src= frame_bhtm > 50 Adicionando quadros Até agora só foi

9 49 Atributos <frameset> border, framespacing Exemplo: <frameset border= 0 framespacing= 0 rows= 25%,* > <frame src= frame_ahtm > <frame src= frame_bhtm > 50 Adicionando quadros Até agora só foi definido a estrutura (configuração); Falta inserir os quadros em particular; Tag <frame> <frameset cols= 25%,50%,25% > <frame src= frame_ahtm > <frame src= frame_bhtm > <frame src= frame_chtm > 51 Atributos <frame></frame> src frameborder Especifica o endereço, URL, do documento a ser exibido no quadro Determina se haverá ou não borda ao redor do quadro URL name Define o nome do quadro Valor noresize marginheight marginwidth scrolling Indica que o quadro não será redimensionado caso o página seja Determina a distância entre a margem superior e inferior do quadro Determina a distância entre as margens direita e esquerda do quadro Define se o quadro terá barra de rolagem 0(no), 1(yes) Pixels Pixels 0(no), 1(yes), auto 52 Atributos <frame></frame> src, name, frameborder, scrolling, noresize: <frameset rows = 90,* > <frame src= cimahtm name= cima scrolling= no frameborder= no noresize > <frame src= conteudohtm name= conteudo frameborder= no > 53 Dúvidas Perguntas? 9

Documentos relacionados

Tabelas. Tabelas. Iniciando a construção... Atributos <table> Tag <table></table> 05/06/2011

Tabelas. Tabelas. Iniciando a construção... Atributos <table> Tag <table></table> 05/06/2011 INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DA PARAÍBA CAMPUS CAMPINA GRANDE 1 2 Tabelas INTERNET BÁSICA: EXTENSIBLE HYPERTEXT MARKUP LANGUAGE XHTML PARTE 3 Largamente suportado(browser); Controlar