1 Introdução à Programação para WEB Gleison Medeiros Links, tabelas e formulários.
42
1 Introdução à Programação para WEB Gleison Medeiros Links, tabelas e formulários
Transcript of 1 Introdução à Programação para WEB Gleison Medeiros Links, tabelas e formulários.
1
Introdução à Programaçãopara WEB
Gleison Medeiros
Links, tabelas e formulários
2
Links• Hyperlinks ou simplesmente links conectam /
vinculam / ligam / apontam páginas e outros recursos na WEB
• São a razão de ser do hipertexto, pois nos permitem “navegar” pela WEB
• Para criar links em HTML são necessárias 3 coisas:– O endereço ou referência para onde o link deve
“apontar”
– Algum texto ou imagem que descreva o link
– O uso da tag <a>...</a> (anchor) que cria uma ligação e pode ser “clicada”
3
LinksNavegação horizontal: entre páginas páginas e/ou entre outros objetos (arquivos texto, imagens, etc).
Navegação vertical: vínculo dentro de uma página (não necessariamente a mesma).
Página 1Link
Página 1Link
Página 2Link
Página 2Link
Página 3Link1Link2
Página 3Link1Link2Link
#destino
Link
#destino
Página 1Link
Página 1Link
Página 2
#destino
Página 2
#destino
4
Links• <a href=“url”> Descrição do link </a>
– <a>..</a> cria uma ligação e pode ser “clicada”
– href é o endereço, caminho ou referência para onde o link deve “apontar”
– href semelhante ao atributo src da tag <img/>. Caso o endereço seja absoluto, lembre-se de usar sempre o http://
– Entre as duas tags temos um texto de descrição. Pode ser outra construção HTML
• Ex. de links usando endereços absolutos: – <a href=“http://www.greenpeace.org.br/ ”>Green Peace</a> Endereço absoluto para uma página na WEB
– <a href=“e:\minha_pagina.html ”>???</a>
5
Links• Ex. de links com endereços relativos:
– <a href=“alomundo.html”>Alô mundo</a>
Considerando a página alomundo.html dentro do mesmo diretório
– <a href=“praticas/alomundo.html”>Alô mundo</a>
Considerando a página alomundo.html dentro de um diretório práticas
– <a href=“../alomundo.html”>Alô mundo</a>
Considerando a página alomundo.html dentro de um diretório anterior ao diretório atual
6
Prática• Crie no seu diretório uma página chamada
praticas.html com links para pelo menos 5 práticas anteriormente feitas
• Ao lado de cada link, coloque uma descrição do que foi usado para a prática em questão:
• Use sua imaginação: fontes, cores e outros são livres!
7
Links• Usando o tributo name, pode-se navegar verticalmente
dentro de uma página
• name define um “destino” dentro de uma página
• Utilizando outro link com o href apontando para o destino definido, o browser “desloca” a página
• Dados pessoais• Endereço
Dados pessoais:xxxyyy....
Endereço:Rua A, no. 22
• Dados pessoais• Endereço
Dados pessoais:xxxyyy....
Endereço:Rua A, no. 22<a name=“end”>Endereço:</a><a name=“end”>Endereço:</a>
<a href=“#end”>Endereço</a><a href=“#end”>Endereço</a>
8
Links• Cores nos links: para mudar as cores padrões
podemos declarar 3 atributos na tag body:
– link = “cor” : cor do link normal
– vlink = “cor”: cor do link visitado
– alink = “cor”: cor do link ativado (clicado com o mouse em cima)
• Ex: <body link=“blue” vlink=“red” alink= “green”>
9
Prática• Crie uma página chamada cursos.html semelhante à
página abaixo usando links com navegação vertical para navegar pelos 4 cursos e subir a página para o topo
10
Prática• Modifique a página pizza.html para utilizar links:
– Na seção: fontes, transforme os links enumerados em links normais
– Na seção de tipos, faça com que cada um dos tipos seja um link para a imagem ampliada da pizza (presentes no diretório indicado).
– Transforme em link também o endereço na parte inferior da página (http://www.pizzaonline.com.br)
– Modifique as cores dos links (normal, visitado e ativado) para a cor marrom
Lembre-se: é sempre uma boa prática utilizar uma pasta/diretório para as imagens
11
Tabelas• Construções que permitem agrupar texto, imagem, links e
até mesmo outras tabelas em suas células
• Elementos presentes em uma tabela:– bordas
– linhas e colunas formando as células
– eventualmente células expandidas
• Servem também como elemento de controle e layout em páginas web (em desuso)
linhas
Colunas
12
Tabelas• Tabelas definindo o layout:
• Hoje usam-se combinações de tags div em vez de table. Acesse o site http://tableless.com.br/aprenda/faq/
cabeçalho
rodapé
conteúdo
13
Tabelas• Basicamente usam-se 3 tags duplas: table (tabela), tr
(table row) e td (table data)
• Definição hierárquica:<table>
<tr>
<td>....
</td>
<td>....
</td>
</tr>
<tr>
...</tr>
</table>
linhacolunas
14
Tabelas• Exemplo:
<html>....
<table border = "1"> <tr> <td>linha 1, coluna 1</td> <td>linha 1, coluna 2</td> </tr> <tr> <td>linha 2, coluna 1</td> <td>linha 2, coluna 2</td> </tr> </table>....</html>
15
Tabelas• <table>: tag dupla que define a tabela. Principais
atributos:
– bgcolor: cor de fundo da tabela
– border: largura da borda em pixels.
– bordercolor: cor das bordas
– width e height: largura e altura da tabela em pixels ou %.
– align: alinha a tabela em relação ao navegador. Valores: “center”, “left”, “right”
– background: imagem como “preenchimento” da tabela.
– cellspacing: distância em pixels entre a borda e o conteúdo
– cellpadding: distância em pixels entre as borda de células adjacentes
16
Tabelas• <tr>: tag dupla que define uma linha dentro de
<table>.
• Principais atributos:
– valign: alinhamento vertical. Valores: “top”, “middle”, “bottom”
– align, bgcolor, width, height, background: mesmos valores de <table>
• <td>: tag dupla que define uma coluna dentro de <tr>. Podem–se ter várias colunas dentro de uma linha.
• Principais atributos:
– align, valign, bgcolor, width, height, background: os mesmos valores da tag <table>
17
Tabelas• Exemplo:
18
Prática• Altere a página pizza.html trocando as listas dos
sabores por uma tabela com as seguintes formatações:
– Duas linhas e quatro colunas
– Cellspacing e cellpadding: 10 pixels
– Alinhamento centralizado
19
Prática• Altere a página pizza.html para que seu conteúdo esteja
envolvido em uma tabela com:– 3 linhas
– Alinhamento centralizado
– Largura de 80%
– Cellspacing e cellpadding de 10 pixels
– Cor de fundo branca
• A imagem do topo deve ficar em uma célula (sugestão: mude a imagem para a imagem topo1.jpg)
• O conteúdo deve ficar na linha do meio
• A última linha deve conter o rodapé (www.pizzao nline.com.br)
• Coloque como fundo do body a imagem fundo_listras.jpg
Ilustração no próximo slide
20
Prática 12Linha 1,coluna 1(cabeçalho)
Linha 2,coluna 1(corpo)
Linha 3,coluna 1(rodapé)
topo1.jpg
fundo_listras.jpg
21
Tabelas• Pode ser necessário expandir uma célula ocupando o
local de outras
• Essa combinação, expansão ou mesclagem de células é obtida usando-se os atributos colspan e rowspan da tag <td>
Ex:
22
Tabelas• colspan (column span): faz com que uma célula ocupe o
um número de células especificado. As células que forem ocupadas pela expansão devem ser retiradas.
23
Tabelas• rowspan: faz com que uma célula se expanda por linhas
ao invés de colunas.
24
Tabelas• Crie um arquivo chamado automoveis.html e nele crie
uma tabela semelhante à tabela abaixo com células mescladas:
• Tabela baseada na existente na página:http://www.ime.usp.br/~glauber/html/tabelas.htm
Tabelas• Prática para o Final de Semana (quem sabe pode
valer pontos).
25
26
Formulários
27
Formulários• Metáforas baseadas nos formulários de papel para
preenchimento de inscrições, pedidos, cadastros
• São responsáveis pela interação entre um usuário e o servidor
• O resultado do preenchimento de um formulário é o envio dos dados para um servidor que suporte programação para a web dinâmica
[email protected]=drr&822K
servidor
Login ok!Login ok!
28
Formulários• Alguns campos/componentes de formulários são:
– Texto (text):
– Senha:
– Texto longo (textarea):
– Múltipla escolha (checkbox):
– Escolha única (radio):
– Caixas de seleção (select):
– Botões (buttons):
– Campos ocultos
29
Formulários• Criando formulários
<html>....
<form action = “http://...” method = “post”>
</form>
....</html>
Campos ou componentes
30
Formulários• <form>: tag dupla que deve “envolver” todos os
campos. Principais atributos:
– action: URL da página do script que executará a “ação”
• Ex: www.teste.com.br/cadastro.php
– method: especifica como os dados dos formulários são passados para a página de scripts. Valores:
• get : dados são concatenados com a url.
Ex: www.teste.com.br/cadastro.php?nome=ely&cod=3rt55W
• post: dados são enviados no corpo do formulário na mensagem HTTP
31
Formulários - Texto e de senha• <input/>: tag simples que define uma entrada de
dados. Principais atributos:– name: nome da caixa de texto
– type: identifica o tipo de entrada. Valores: text para texto simples e password para campos de senha
– maxlength: número máximo de caracteres possíveis do campo
– value: valor inicial (opcional)
• Ex:<form>
Nome: <input type= “text” name = “txt_nome” maxlength= “20” value= “Digite seu nome aqui”/> <br/>
Senha: <input type= “password” name = “pwd_senha” maxlength= “10”/>
</form>
32
Formulários - Múltipla escolha• <input/>: novamente uma tag input. Atributos:
– name: nome do campo
– type: deve ser checkbox
– value: Valor do campo (obrigatório)
– checked: define se o checkbox está marcada
• Ex:
<form ...>
<input type = “checkbox” name = “ckb_hobbies” value = “pescar” />Pescar <br/>
…
<input type = “checkbox” name = “ckb_hobbies” value = “dancar” checked = “checked”/>Dançar
</form>
33
Formulários - Escolha única• <input/>: novamente uma tag input. Atributos:
– name: nome do campo
– type: deve ser radio
– value: valor do campo (obrigatório)
– checked: define se a seleção está marcada
• Ex: <form action = “” method = “post”>
<input type= “radio” name= “rdb_sexo” value= “m”/>Masculino<br/>
<input type= “radio” name= “rdb_sexo” value= “f”/>Feminino<br/>
</form>
Funcionam em conjunto se tiverem o mesmo valor para o atributo name
Marcando um, o outro é desmarcado
34
Formulários – Texto longo• Texto longo ou com várias linhas
• <textarea>: Tag dupla. Atributos:
– name: nome do campo
– rows: número de linhas
– cols: número de colunas (caracteres por linha)
• Ex:
<form action = “” method = “post”>
<textarea cols = “100” rows = “5” name = “txt_comentarios”>
Digite aqui seu comentário
</textarea>
</form>
35
Formulários - Caixas de seleção• <select> : tag dupla que representa um contêiner de
opções. Seu padrão é no formato combo-box. Atributos:
– name: nome do campo
– size: caso seja maior que 1 o componente será exibido em forma de lista
• <option/> : tag simples que representa cada item.
– selected: define se a “seleção está selecionada”
– value: o valor de cada option.
• Ex: (tag form omitida)<select name = “slt_estado”> <option value = “ce”/> Ceará … <option value = “pi” selected = “selected”/> Piauí </select>
36
Formulários – Botões de ação• <input> novamente uma tag input. Atributos:
– name: nome do campo
– type: deve ser submit para enviar ou reset para restaurar o estado original dos campos do formulário
– value: Texto que é exibido no botão
• Ex:
<form action = “” method = “post”>
<input type= “submit” name = “btn_entrar” value = “Entrar”/>
<input type= “reset” name = “btn_limpar” value = “Limpar”/>
</form>
37
Formulários: id x name• O atributo name dos campos de formulário está
em desuso
• Atualmente usa-se um atributo id com valor igual ao do atributo name sob a recomendação XHTML
• O atributo id é muito utilizado como identificador único e é usado em outros WebStandards
• Por motivos didáticos, foi omitido o uso do id, mas quando estivermos utilizando JavaScript faremos um uso mais intenso desse atributo
38
Prática• Crie uma página para cadastros de leitores do
Pizza On Line conforme a ilustração abaixo e coloque um link para a mesma na página pizza.html
• Use o layout em tabelas e a figura de fundo da página fundo_listras.jpg
• Atente aos outros detalhes como cores e figuras e demais imagens
• Seja criativo, ouse!!!
Ilustração no próximo slide
39
Prática• Ilustração com bordas nas tabelas:
40
Prática• Ilustração sem bordas:
41
Prática• Crie uma página chamada busca.html e nela crie um
formulário para realizar uma busca no Google.
• Configuração do formulário(valores que o google exige):
– action = "http://www.google.com/search"
– method = "get"
– Caixa de texto com o nome: “q”
– Atributos do Input Pesquisar na WEB: id="all", name="lr"
– Atributos do Input Pesquisar Páginas em Português: id="il", name="lr", value="lang_pt"
• Os demais detalhes podem ser personalizados
• Ilustração no próximo slide
42
Prática
