Professional Documents
Culture Documents
PARA PROGRAMAO DE
INTERFACES WEB
ESTRUTURA DA APRESENTAO
HTML BSICO
Language
Tags - os elementos de
marcao
Forma geral:
<tagIncio>texto</tagFim>
Tags - os elementos de
marcao
Estrutura de um documento
HTML
<html>
Cabealho
<head>
<title>Primeiro documento</title>
<meta name="author" content=Andreia Alcntara">
<meta name="keywords" content=exemplo">
<meta name="description content=Exemplo do curso>
</head>
Corpo
<body>
<P>Al, mundo!
</body>
</html>
Os atributos de body
bgcolor=#RRGGBB
text="# RRGGBB "
link="# RRGGBB "
vlink="# RRGGBB "
alink="# RRGGBB "
background=urlIma
gem
Cor de fundo
Cor do texto
Cor de links no
visitados
Cor de links visitados
Cor de links ativados
Imagem de fundo
o </p> opcional
Cabealhos
<H1>Heading
<H2>Heading
<H3>Heading
<H4>Heading
<H5>Heading
<H6>Heading
1</H1>
2</H2>
3</H3>
4</H4>
5</H5>
6</H6>
11
O atributo align
Alinha o elemento correspondente
esquerda: align=left
centralizado: align=center
direita: align=right
Exemplo:
<p align=center>pargrafo centralizado</p>
12
Formatao fsica
<u> </u>
- texto em negrito
- texto em itlico
- texto sublinhado
13
O elemento font
Atributos
face=tipo da fonte
size=tamanho da fonte
color=#RRGGBB
14
Criando listas
No ordenada
reas de interesse:
<ul>
<li>Java</li>
<li>UML</li>
<li>HTML</li>
</ul>
Ordenada
Anlise e Projeto OO - Atividades
<ol>
<li>Anlise de casos de uso</li>
<li>Projeto da arquitetura</li>
<li>Projeto de casos de uso</li>
<li>Projeto de subsistemas</li>
</ol>
15
Acentuao e caracteres
especiais
Alguns editores substituem os caracteres
acentuados por seus respectivos cdigos
Exemplos:
- ®
< - <
- ©
> - >
& - &
1/
- ¼
16
src=URL da imagem
alt=descrio da imagem
border=tamanho da borda
align=posicao da imagem
width=largura em pixels
height=altura em pixels
<a href=http://www.cin.ufc.br/~guest5/saude/
target=sistema>Disque Sade</a>
18
19
Tabelas em HTML
Estrutura geral
<table border=2>
<tr>
<td>1a linha, 1a
<td>1a linha, 2a
</tr>
<tr>
<td>2a linha, 1a
<td>2a linha, 2a
</tr>
</table>
coluna</td>
coluna</td>
coluna</td>
coluna</td>
20
Atributos de tabelas
Existem atributos especficos do elemento table
exemplo: border=2
21
Os atributos colspan e
rowspan
Atributos de td, que fazem uma clula ocupar
mais de uma coluna ou mais de uma linha
O efeito deles pode ser simulado com o uso de
tabelas aninhadas
22
Especificando o tamanho
com width
O atributo width pode ser usado para
especificar:
23
Formulrios
Criados com o tag <form> </form>
No podem ser aninhados
Estrutura geral
<form name=idFormulario method=GET ou POST
action=URL>
campos do formulrio
botes
</form>
24
Submisso de formulrios
O que acontece quando submetemos um
formulrio?
Submisso de formulrios
Envio dos dados ao servidor Web
ambiente
programa
26
Validao de formulrios
Validao bsica feita pelo browser, atravs
da execuo de JavaScript em determinados
eventos
entrada/sada do campo
submisso do formulrio
carga da pgina
sada da pgina
clique em objeto, link
Campos de formulrios
campos texto
campos de senha
campos escondidos
radio buttons
check boxes
botes
simples
de submisso
de cancelamento (reset)
reas de texto
28
29
Radio buttons
Um conjunto de radio buttons tm todos
o mesmo atributo name
Para selecionar previamente um deles,
usa-se o atributo checked
<input type="radio" name="sexo"
value="F" checked>Feminino<br>
<input type="radio" name="sexo"
value="M">Masculino
30
Check boxes
Para selecionar previamente um deles,
usa-se o atributo checked
<p>Hobbies:<br>
<input type="checkbox" name="hobbies"
value=1">Fotografia<br>
<input type="checkbox" name="hobbies"
value=2" checked>Cinema<br>
<input type="checkbox" name="hobbies"
value=3" checked>Maracatu</p>
31
reas de texto
Para campos texto maiores que 1 linha
<p>Descrio:<br>
<textarea name="descricao" rows="4 cols="20">
Digite o motivo do cancelamento
</textarea></p>
32
Botes
<input type=button"
value=Incluir">
<input type=button"
value=Alterar">
<input type=button"
value=Remover">
Listas (combo-boxes)
Criadas atravs dos tags select e option
<select name="profissao" size="3">
<option value="1">Arquiteto</option>
<option value="2">Designer</option>
<option value="3">Engenheiro</option>
<option value="4">Mdico</option>
<option value="5">Veterinrio</option>
</select>
34
Listas (combo-boxes)
Pode-se permitir a seleo de mais de uma
opo com o atributo multiple
Pode-se selecionar previamente alguma opo
com o atributo selected
35
Apache:
Tomcat:
ou
IIS:
/usr/local/apache/htdocs/xxx
/tomcat/webapps/ROOT/xxx
/tomcat/webapps/xxx
c:\inetpub\wwwroot\xxx
ESTILO DA APRESENTAO
CASCADING STYLE SHEETS
37
Qual a diferena?
38
A propriedade
que se deseja
formatar.
O valor que
se deseja dar
propriedade.
41
abaixo.
<html>
<head>
44
contedo.
Permite a ligao de vrios documentos HTML
mesma folha de estilos.
Permite maior controle sobre os estilos.
Permite maior facilidade na mudana da folha
de estilos.
45
Alguns Estilos
Fontes: font-family, font-size, font-weight
Bordas: border-bottom, border-top, border-left
Margens: margin-left, margin-right, margin-top
Cores: background-color, color
46
47
COMPORTAMENTO DA APRESENTAO
JAVASCRIPT
48
Javascript
Permite interagir com o usurio na mquina
cliente
Com Javascript possvel:
Principais caractersticas da
linguagem
Sintaxe similar ao Java
Sensvel a caixa (mas no em todos os
browsers)
Pode ser usado sem declarao prvia
de variveis
O ; no final dos comandos opcional
50
Exemplo Bsico
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>JavaScript Bsico</title>
</head>
<body>
Esta linha est escrita em HTML<p>
<script language="JavaScript">
</body>
</html>
51
53
JavaScript - Variveis
Variveis
Identificao de variveis
54
JavaScript - Variveis
Tipo
Arrays
55
JavaScript - Variveis
Declaraes
var x= 10;
var y= "11";
var z= '11';
Caracteres especiais
\n - newline
\f - form feed
\r - carriage return
\"
\t - tab
\b - backspace
\\
\'
56
JavaScript - Operadores
Operadores
+
*
/
%
++
--
concatenao, adio
subtrao
multiplicao
diviso
resto da diviso
incremento (como em C)
decremento
57
JavaScript - Operadores
Comparao e lgicos
<
>
==
!=
<=
>=
&&
||
menor que
maior que
igual
diferente
menor ou igual
maior ou igual
E lgico
OU lgico
58
JavaScript - Operadores
Atribuio
=
+=
Atribuio
Soma ou concatenao e atribuio
-=
Subtrao e atribuio
*=
Multiplicao e atribuio
/=
Diviso e atribuio
%=
Resto e atribuio
59
JavaScript - Objetos
Objetos do DOM (Document Object
Model)
Objetos Especiais
Date
String
Math
Global
Number
Boolean
Array
Object
61
document
frames
document
anchors
history
document
applets
body
navigator
plugins
location
embeds
event
filters
screen
forms
images
Legenda
links
object
plugins
collection
scripts
styleSheets
62
JavaScript - Objetos
window
image[1]
image[0]
document
body
form[0].nome
form[0].email
63
64
cdigo
</script>
65
Utilizando o pseudo-protocolo
Javascript
Cdigo JavaScript pode ser includo em
URLs, tal como abaixo:
<a href:javascript:alert(Realizando validao
dos dados); validaDados
(document.frmCad);>Clique aqui para
validar os dados</a>
67
Captura e tratamento de
eventos
Os elementos em HTML geram eventos
Alguns eventos so:
Validao de formulrios
<script language="JavaScript">
function validaForm (form)
{
if form.campo.value==null || form.campo.value.length == 0) {
form.campo.focus();
return false;
} else
return true;
}
</script>
...
<form action="resp.jsp" method="POST" name="formulario"
onSubmit="return validaForm(this);">
<input type="text" name="campo"></input>
</form>
69
Captura e tratamento de
eventos
Um evento pode ser associado a
chamada de uma funo em Javascript
<input type=button onClick=verificaLimite();>
70