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
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 11 12 Definir as células de dados; s 40 40 align right, left, center, justify, char bgcolor #xxxxxx, nome da cor height width valign top, middle, bottom, baseline colspan e rowspan - Continuem aguardando 2
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 50 14 <td colspan= 2 > s 40 40 Rowspan Exemplo 15 16 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 18 17 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 posteriormente utilizados por programas que residem no servidor Web; Servidores (Container Web); O navegador carrega o formulário 1 21 22 O usuário entra com as informações O servidor processa as informações e, caso necessário, devolve ao usuário 2 3 Tag <form> Atributos <form> 23 24 Inicialmente você deve definir a tag <form>; Determina o início e o fim de um formulário <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 GET POST target Tipo de janela do browser que vai retornar uma resposta do servidor ao cliente sobre a execução do formulário 4
Atributos <form> Tag <input> 25 26 <form action= cadastrophp method= POST target= _self > Especifica vários campos dentro de um formulário; Recebe diversos atributos que definem o tipo de campo (botão, caixa de texto); Tag <input> Atributos <input> 27 28 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 Atributos <input> Atributos <input> 29 30 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 > 5
Tag <select></select> Tag <option> 31 32 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> 33 34 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 Tag <textarea></textarea> Atributos <textarea></textarea> 35 36 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 6
Frames 38 37 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 39 40 Composições (Organização): Controlar bem a navegação; Um frame poderá acionar outro frame e assim por diante; Verificar a usabilidade da página web quando adicionado o frame; Atenção Inicializando a construção 41 42 O W3C não recomenda a utilização de Frame Inicializa definindo a configuração da estrutura; Particularidade: Não existe a tag ; Tag <frameset> <head> </head> <frameset> 7
43 Inicializando a construção 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> 44 Atributos <frameset> 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 Distância entre os quadros do frame Pixels Atributos <frameset> Atributos <frameset> 45 cols Exemplo: O restante do espaço será utilizado 46 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 /> 47 Atributos <frameset> border, framespacing Exemplo: <frameset border= 0 framespacing= 0 rows= 25%,* > <frame src= frame_ahtm /> <frame src= frame_bhtm /> 48 Adicionando quadros Até agora só foi definido a estrutura (configuração); Falta inserir os quadros em particular; Tag <frame></frame> <frameset cols= 25%,50%,25% > <frame src= frame_ahtm /> <frame src= frame_bhtm /> <frame src= frame_chtm /> 8
49 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 50 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 > 51 Dúvidas Perguntas? 9