Introdução à Tecnologia Web

Transcrição

1 Introdução à Tecnologia Web HTML HyperText Markup Language XTML extensible HyperText Markup Language Elementos da Seção do Corpo Tabelas Formulários Professor Alan Cleber Borim

2 Índice. Seção de Corpo Tabelas <table>... 3 Seção de Corpo Tabelas Linhas e Células: <th><td>... 4 Seção de Corpo Tabelas Título da Tabela: <caption>... 6 Seção de Corpo Tabelas Agrupamento de informações: <thead>, <tfoot>, <tbody>... 7 Seção de Corpo Formulários: <form> </form>... 8 Seção de Corpo Formulários Campos de entrada: <input>... 9 Seção de Corpo Formulários Seleção: <select>, <option> Seção de Corpo Formulários Caixa de Texto: <textarea>... 11

3 Seção de Corpo Tabelas <table> class, id, style, title, border, cellspacing, cellpadding, summary, width Tabelas são utilizadas para tabular conteúdo, antigamente eram utilizadas também para definição de estrutura de layout, o que ficou em desuso com a introdução do Tableless. A tag <table> define todas as informações que farão algum efeito sobre todas as células da tabela, como por exemplo, espaçamento entre as células (cellspacing), preenchimento interno das células (cellpadding) espessura da borda (border) e a largura da tabela (width) Exemplo de uso. <table border="1" cellpadding="5" cellspacing="3" width="50%"> No exemplo ao lado nada será mostrado pois nenhuma célula foi inserida ou algum conteúdo de visualização da tabela foi apresentado. O que pode-se visualizar é que a tabela que for criada com essa linha terá uma borda de 1 pixel um preenchimento interno de 5 pixels, um espaçamento externo de 3 pixels e uma largura de 50% da tela. 3

4 Seção de Corpo Tabelas Linhas e Células: <th><td> class, id, style, title, align, valign, colspan, rowspan O complexo de uma tabela está em sua definição visual, pois muitos se confundem ao falar em tabelas, utilizando o termo Linhas e Colunas, o que em HTML deve ser corrigido para Linhas e Células Exemplo de uso. <table border="1" cellpadding="5" cellspacing="3" width="50%"> <td>célula 1</td> <td>célula 2</td> <td>célula 3</td> <td>célula 4</td> A tag <th> é utilizada para atribuir um cabeçalho à coluna da tabela o que acarreta em uma mudança na fonte utilizada, como mostrado no exemplo a seguir. 4

5 <table border="1" cellpadding="5" cellspacing="3" width="50%"> <th>titulo 1</th> <th>titulo 2</th> <td>célula 1</td> <td>célula 2</td> <td>célula 3</td> <td>célula 4</td> Quando há a necessidade de se mesclar células para obter um visual mais de mais fácil entendimento ou de melhor apresentação deve-se utilizar os atributos, colspan e rowspan, conforme o exemplo abaixo. <table border="1" cellpadding="5" cellspacing="3" width="50%"> <th colspan="2">titulo 1 mesclado</th> <td rowspan="2">célula 1 Mesclada</td> <td>célula 2</td> <td>célula 3</td> 5

6 Seção de Corpo Tabelas Título da Tabela: <caption> class, id, style, title É a tag responsável por criar um título para a tabela utilizada, sem a necessidade de outros elementos para facilitar a apresentação deste título. Exemplo de uso. <table border="1" cellpadding="5" cellspacing="3" width="50%"> <caption>título da tabela com caption</caption> <th>titulo 1</th> <th>titulo 2</th> <td>célula 1</td> <td>célula 2</td> <td>célula 3</td> <td>célula 4</td> Nota-se que o título da tabela está localizado no topo de todo conteúdo, centralizado com a tabela, isso tudo com uma única tag. 6

7 Seção de Corpo Tabelas Agrupamento de informações: <thead>, <tfoot>, <tbody> class, id, style, title, align, valign Para uma melhor utilização do CSS e também da visualização do seu conteúdo, o HTML possui as tags de agrupamento de informações <thead> - Que assume o controle do cabeçalho da tabela <tfoot> - Que assume o controle do rodapé da tabela <tbody> - Que assume o controle do corpo da tabela Exemplo de uso. <table border="1" cellpadding="5" cellspacing="3" width="50%"> <thead> <th>meses</th> <th>lucros</th> </thead> <tfoot> <td>soma</td> <td>$180</td> </tfoot> <tbody> <td>fevereiro</td> <td>$100</td> <td>março</td> <td>$80</td> </tbody> Note que o bloco responsável pelo rodapé aparece antes do bloco do corpo da tabela, dessa forma o navegador pode interpretar o rodapé antes de receber todo o conteúdo, garantindo assim a integridade da estrutura da tabela. 7

8 Seção de Corpo Formulários: <form> </form> class, id, style, title, method, action A tag <form> é usada para criar o bloco responsável por controlar os campos de um formulário. Um formulário pode conter elementos de entrada como campos de texto, caixas de checagem, botões de rádio entre outros, como por exemplo caixa de texto e caixa de seleção, em resumo, um formulário é utilizado para passar dados para o servidor. <title>uso de formulários</title> <form action="ação"> Primeiro Nome: <input type="text" name="primeironome" value="joao" /><br /> Sobrenome: <input type="text" name="sobrenome" value="silva" /><br /> <input type="submit" value="enviar" /> </form> Ao clicar no botão Enviar, o navegador irá obter todos os dados inseridos nos campos do formulário e executar a ação contida no atributo action, que pode ser outra página de programação, um endereço de e- mail e etc. 8

9 Seção de Corpo Formulários Campos de entrada: <input> class, id, style, title, name, value, maxlength, size A tag input detém o controle da maioria dos campos de formulário como a seguir: type= text type= chackbox type= radio type= file type= password type= submit type= image type= buttom Cada um, como se pode ver, possui um valor de referência e uma ação, para os campos de texto, e senha os valores maxlength e size são usados para controlar a quantidade máxima de caracteres possíveis no campo e o tamanho do campo em quantidade de caracteres. 9

10 Seção de Corpo Formulários Seleção: <select>, <option> class, id, style, title, name, size, value, multiple A tag select controla o bloco de opções de seleção e a tag option é o objeto de seleção, conforme exemplo a seguir: <title>uso de formulários</title> <form action="ação"> <select> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="mercedes">mercedes</option> <option value="audi">audi</option> </select> </form> Quando se tem apenas a tag select sem maiores opções o campo de seleção aparece como sendo apenas uma linha e um botão para apresentar as opções, porém com os atributos size e multiple essa visualização é modificada. 10

11 <title>uso de formulários</title> <form action="ação"> <select size="3" multiple="multiple"> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="mercedes">mercedes</option> <option value="audi">audi</option> </select> </form> Quando a seleção é marcada como multiple, ao clicar nas opções em junção com o botão Ctrl do teclado, múltiplas opções podem ser selecionadas. Seção de Corpo Formulários Caixa de Texto: <textarea> class, id, style, title, name, rols, cols A tag textarea insere uma caixa de texto semelhante ao text, porém com mais linhas de texto: <title>uso de formulários</title> <form action="ação"> <textarea rows="5" cols="50"> Todas as informações que deseja mostrar na caixa de texto devem ficar aqui. </textarea> </form> Neste exemplo a caixa de texto é apresentada com a visualização de 5 linhas por 50 colunas de caracteres. 11