Escolar Documentos
Profissional Documentos
Cultura Documentos
k19 k02 Desenvolvimento Web Com HTML Css e Javascript
k19 k02 Desenvolvimento Web Com HTML Css e Javascript
9 de abril de 2013
Sumrio
Sobre a K19
Seguro Treinamento
Termo de Uso
Cursos
Introduo
1.1 Client Side e Server Side . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.2 HTML, CSS e Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1
1
2
HTML
2.1 Estrutura Bsica . . . . . . .
2.2 Exerccios de Fixao . . . .
2.3 Exerccios Complementares
2.4 Semntica HTML . . . . . .
2.5 Pargrafos . . . . . . . . . . .
2.6 Exerccios de Fixao . . . .
2.7 Exerccios Complementares
2.8 Cabealhos . . . . . . . . . .
2.9 Exerccios de Fixao . . . .
2.10 Exerccios Complementares
2.11 Links . . . . . . . . . . . . . .
2.12 Exerccios de Fixao . . . .
2.13 Exerccios Complementares
2.14 ncoras . . . . . . . . . . . .
2.15 Exerccios de Fixao . . . .
2.16 Exerccios Complementares
2.17 Imagens . . . . . . . . . . . .
2.18 Exerccios de Fixao . . . .
2.19 Exerccios Complementares
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
www.facebook.com/k19treinamentos
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
3
3
4
5
5
6
7
7
8
9
11
11
12
13
13
14
16
16
17
18
i
S UMRIO
2.20
2.21
2.22
2.23
2.24
2.25
2.26
2.27
2.28
2.29
2.30
2.31
2.32
3
CSS
3.1
3.2
3.3
3.4
3.5
3.6
3.7
3.8
3.9
3.10
3.11
3.12
3.13
3.14
ii
Tabelas . . . . . . . . . . . .
Exerccios de Fixao . . . .
Exerccios Complementares
Listas . . . . . . . . . . . . .
Exerccios de Fixao . . . .
Exerccios Complementares
Exerccios de Fixao . . . .
Exerccios Complementares
Exerccios de Fixao . . . .
Exerccios Complementares
Formulrio . . . . . . . . . .
Exerccios de Fixao . . . .
Exerccios Complementares
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
18
22
23
23
25
26
27
28
29
30
30
37
37
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
39
42
43
44
47
48
48
49
51
58
60
61
65
66
69
JavaScript
4.1 Declarando e inicializando variveis em JavaScript
4.2 Operadores . . . . . . . . . . . . . . . . . . . . . . . .
4.3 Controle de fluxo . . . . . . . . . . . . . . . . . . . .
4.4 Exerccios de Fixao . . . . . . . . . . . . . . . . . .
4.5 Exerccios Complementares . . . . . . . . . . . . . .
4.6 Funes JavaScript . . . . . . . . . . . . . . . . . . .
4.7 Objetos JavaScript . . . . . . . . . . . . . . . . . . . .
4.8 Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.9 Exerccios de Fixao . . . . . . . . . . . . . . . . . .
4.10 Exerccios Complementares . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
71
71
71
74
75
77
79
80
81
82
83
.
.
.
.
.
.
.
85
85
89
92
92
94
96
96
Exerccios de Fixao . . . .
Estrutura de uma regra CSS
Tipos de seletores . . . . . .
Exerccios de Fixao . . . .
Cores em CSS . . . . . . . . .
Unidades de medida . . . .
Principais propriedades CSS
Exerccios de Fixao . . . .
Box model . . . . . . . . . .
A propriedade display . . . .
Exerccios de Fixao . . . .
Posicionando elementos . .
Exerccios de Fixao . . . .
Desafios . . . . . . . . . . . .
A Javascript Avanado
A.1 Objetos . . . . . . . . . . . .
A.2 Exerccios de Fixao . . . .
A.3 Exerccios Complementares
A.4 Funes . . . . . . . . . . . .
A.5 Exerccios de Fixao . . . .
A.6 Exerccios Complementares
A.7 Arrays . . . . . . . . . . . . .
ii
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
www.k19.com.br
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
iii
S UMRIO
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
105
105
106
106
107
109
109
110
112
113
115
117
118
119
121
C HTML5
C.1 article . .
C.2 section . .
C.3 header . .
C.4 footer . .
C.5 nav . . . .
C.6 aside . . .
C.7 figure . .
C.8 figcaption
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
123
124
124
125
125
126
126
127
127
D CSS3
D.1 Bordas arredondadas
D.2 Sombras . . . . . . . .
D.3 Transformaes . . .
D.4 Fontes no CSS3 . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
129
129
130
136
138
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
141
141
142
143
144
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Quizzes
147
G Respostas
www.facebook.com/k19treinamentos
149
iii
S UMRIO
iv
iv
www.k19.com.br
S UMRIO
Sobre a K19
A K19 uma empresa especializada na capacitao de desenvolvedores de software. Sua equipe
composta por profissionais formados em Cincia da Computao pela Universidade de So Paulo
(USP) e que possuem vasta experincia em treinamento de profissionais para rea de TI.
O principal objetivo da K19 oferecer treinamentos de mxima qualidade e relacionados s principais tecnologias utilizadas pelas empresas. Atravs desses treinamentos, seus alunos se tornam
capacitados para atuar no mercado de trabalho.
Visando a mxima qualidade, a K19 mantm as suas apostilas em constante renovao e melhoria, oferece instalaes fsicas apropriadas para o ensino e seus instrutores esto sempre atualizados
didtica e tecnicamente.
www.facebook.com/k19treinamentos
S UMRIO
Seguro Treinamento
Na K19 o aluno faz o curso quantas vezes quiser!
Comprometida com o aprendizado e com a satisfao dos seus alunos, a K19 a nica que possui o Seguro Treinamento. Ao contratar um curso, o aluno poder refaz-lo quantas vezes desejar
mediante a disponibilidade de vagas e pagamento da franquia do Seguro Treinamento.
As vagas no preenchidas at um dia antes do incio de uma turma da K19 sero destinadas ao
alunos que desejam utilizar o Seguro Treinamento. O valor da franquia para utilizar o Seguro Treinamento 10% do valor total do curso.
www.k19.com.br
S UMRIO
Termo de Uso
Termo de Uso
Todo o contedo desta apostila propriedade da K19 Treinamentos. A apostila pode ser utilizada
livremente para estudo pessoal . Alm disso, este material didtico pode ser utilizado como material
de apoio em cursos de ensino superior desde que a instituio correspondente seja reconhecida pelo
MEC (Ministrio da Educao) e que a K19 seja citada explicitamente como proprietria do material.
proibida qualquer utilizao desse material que no se enquadre nas condies acima sem
o prvio consentimento formal, por escrito, da K19 Treinamentos. O uso indevido est sujeito s
medidas legais cabveis.
www.facebook.com/k19treinamentos
S UMRIO
S
TO
EN
AM
EIN
TREINAMENTOS
TR
EIN
AM
EN
TO
TR
www.k19.com.br/cursos
www.k19.com.br
CAPTULO
I NTRODUO
Durante muito tempo, a ideia de desenvolvimento web ficou associada apenas a construo de
pginas que possuam somente o intuito de oferecer aos usurios o acesso a um determinado contedo. Porm, com a popularizao da internet, novas necessidades foram surgindo em diversas
reas.
Na rea de entretenimento, cada vez mais jogos online foram aparecendo. Diversas redes sociais
ganharam foras graas grande interatividade permitida entre os usurios. Gravadoras de msica
passaram a vender seus ttulos atravs de canais especializados. No meio corporativo, as empresas
passaram a adotar sistemas web para controlar as suas tarefas administrativas. Enfim, necessidades
antes inexistentes surgiram em uma velocidade muito grande. Muitos sites deixaram de ser simples
pginas para se tornarem verdadeiras aplicaes.
H cerca de 15 anos, era muito comum que um nico desenvolvedor fosse responsvel por todo
o desenvolvimento de uma aplicao web. Essa pessoa era chamada de webmaster. Com o passar do
tempo, o papel do webmaster como era conhecido foi desaparecendo. A complexidade e volume de
trabalho para o desenvolvimento de uma aplicao web se tornaram muito grande para apenas uma
pessoa ou at mesmo para um grupo pequeno de desenvolvedores (webmasters).
Hoje, a funo de webmaster ainda existe mas com um papel um pouco diferente. Geralmente,
esse profissional apesar de possuir bons conhecimentos nas diversas tecnologias utilizadas apenas
gerencia o desenvolvimento que realizado por outros profissionais.
Como as tarefas antes de responsabilidade do webmaster foram delegadas a outros profissionais,
naturalmente, apareceram algumas especializaes. Essas especializaes podem ser classificadas
em dois grupos: desenvolvedores front-end e back-end. Em geral os desenvolvedores front-end so
responsveis pela interface com a qual os usurios interagem enquanto os desenvolvedores backend so responsveis pelo funcionamento interno das aplicaes.
I NTRODUO
back-end.
www.k19.com.br
CAPTULO
HTML
Quando acessamos uma pgina web, estamos interessados na informao contida nessa pgina.
Essa informao pode estar na forma de texto, imagem ou vdeo. Em geral, o contedo de uma pgina web definido com a linguagem HTML (HyperText Markup Language). HTML uma linguagem
de marcao originalmente proposta por Tim Berners-Lee no final da dcada de 1980. O objetivo do
Tim Barners-Lee era criar um mecanismo simples que pudesse ser utilizado por qualquer pessoa que
quisesse disseminar documentos cientficos.
Desde sua proposta at os dias de hoje, a linguagem HTML sofreu diversas alteraes. A cada
verso, novos recursos so adicionados e problemas corrigidos. A verso mais atual da especificao
da linguagem HTML a 5. Essa verso ainda no foi finalizada, ela est na fase de trabalho em progresso (working draft). Porm, j existem navegadores implementando alguns dos novos recursos
do HTML5.
As especificaes da linguagem HTML so publicadas pelo World Wide Web Consortium mais
conhecido por sua sigla W3C. Alm do HTML, o W3C tambm responsvel por linguagens como o
XML, o SVG e pela interface DOM (Document Object Model), por exemplo.
Estrutura Bsica
Um documento HTML composto por elementos que possuem uma tag, atributos, valores e
possivelmente filhos que podem ser um texto simples ou outros elementos. Cada elemento deve
obrigatoriamente possuir uma tag e ela deve ser definida entre parnteses angulares (< e >). Veja o
exemplo:
1
2
3
4
5
6
7
8
9
www.facebook.com/k19treinamentos
HTML
No exemplo acima, temos um elemento HTML representado pela tag p e um texto simples Ol
Mundo! filho desse elemento.
Exerccios de Fixao
Na pasta Desktop do seu usurio, crie uma nova pasta com o seu primeiro nome. Dentro dessa
pasta, crie um diretrio chamado html. Para facilitar, utilize apenas letras minsculas em todas as
pastas e arquivos que criarmos durante o curso.
1
Agora, utilizando um editor de texto, crie um novo arquivo chamado ola-mundo.html e salve-o
dentro da pasta html. Em seguida, insira o seguinte cdigo dentro do arquivo ola-mundo.html:
2
1
2
3
4
5
6
7
8
9
www.k19.com.br
HTML
Exerccios Complementares
Crie uma pgina HTML que exiba o nome deste curso duas vezes.
Semntica HTML
De acordo com a especificao da linguagem HTML, cada elemento possui um propsito bem
definido. Para o funcionamento correto das pginas de uma aplicao web, fundamental respeitar
o propsito de cada elemento e utiliz-lo nas condies corretas. Muitos autores utilizam o termo
semntica HTML ao se referirem ao uso correto dos elementos da linguagem HTML. Por exemplo:
1
2
3
4
5
6
7
8
9
No exemplo acima, utilizamos o elemento p para definir um pargrafo. De acordo com a especificao da linguagem HTML, esse elemento deve ser utilizado justamente para definir pargrafos.
Portanto, ele foi aplicado corretamente. Agora, vejamos outro exemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Dessa vez, utilizamos o elemento address. De acordo com a especificao, o elemento address
www.facebook.com/k19treinamentos
HTML
deve ser utilizado para fornecer informaes de contato dos autores do documento ou da maior parte
do documento. Normalmente, esse elemento aparece no incio ou no final das pginas.
Se observarmos o exemplo mais atentamente, trata-se de uma pgina do site do Jonas (repare
no ttulo da pgina). O autor da pgina o Jonas e no o Rafael ou o Marcelo. Portanto, o elemento
address foi aplicado incorretamente. Alm disso, devemos evitar o uso desse elemento para informar endereos postais a menos que essas informaes sejam relevantes para o documento.
Pargrafos
Os pargrafos dentro de um documento HTML, em geral, so definidos atravs do elemento p.
Uma das principais caractersticas desse elemento que ele ocupa horizontalmente todo o espao
definido pelo elemento pai. Esse o comportamento dos elementos de bloco que discutiremos com
mais detalhes posteriormente.
Por enquanto, o importante sabermos que, devido ao comportamento de bloco do elemento p,
o navegador ajustar o texto do pargrafo largura do elemento pai realizando todas as quebras de
linha necessrias. Caso seja necessrio forar uma quebra de linha, podemos utilizar a elemento br.
Confira o exemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
www.k19.com.br
HTML
Exerccios de Fixao
1
2
3
4
5
6
7
8
9
10
11
12
13
Exerccios Complementares
www.facebook.com/k19treinamentos
HTML
Crie um documento HTML e force uma quebra de linha em qualquer parte de um pargrafo.
Dica: utilize o site www.lipsum.com para gerar um texto fictcio.
2
Cabealhos
Assim como em um livro, uma pgina HTML pode conter uma hierarquia de ttulos para estabelecer uma diviso de seu contedo. Para conseguirmos realizar essa tarefa devemos utilizar as tags
de cabealho h1, h2, h3, h4, h5 e h6.
Os sufixos numricos de 1 a 6 indicam o nvel do ttulo dentro da hierarquia de ttulos do documento. Veja o exemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
www.k19.com.br
HTML
Perceba que cada nvel possui um tamanho diferente de fonte. Esse tamanho determinado pelo
navegador e pode ser alterado atravs de regras CSS que veremos posteriormente.
Devemos utilizar os cabealhos com cautela, pois eles so utilizados como parmetros de ranqueamento da pgina por diversos buscadores como Google, Yahoo e Bing, por exemplo. O uso
correto das tags de cabealho faz parte das tcnicas de SEO (Search Engine Optimization) que, como
o prprio nome j indica, so tcnicas que ajudam a melhorar o ranqueamento de pginas dentro
dos buscadores.
De acordo com as tcnicas de SEO devemos tomar os seguintes cuidados ao utilizarmos as tags
de cabealhos:
Utilizar apenas uma tag <h1> por pgina.
Utilizar no mximo duas tags <h2> por pgina.
Exerccios de Fixao
4
Crie um novo documento HTML chamado cabecalhos-1.html com o contedo abaixo na pasta
html. Em seguida, abra esse arquivo em um navegador.
www.facebook.com/k19treinamentos
HTML
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
10
< head >
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
< title > K02 - Desenvolvimento Web com HTML , CSS e Javascript </ title >
</ head >
< body >
< h1 > K02 - Desenvolvimento Web com HTML , CSS e Javascript </ h1 >
<p > Atualmente , praticamente todos os sistemas corporativos possuem
interfaces web . Para quem deseja atuar no mercado de desenvolvimento
de software , obrigatrio o conhecimento das linguagens : HTML , CSS
e JavaScript . </ p >
<p > Essas linguagens so utilizadas para o desenvolvimento da camada de
apresentao das aplicaes web . </ p >
< h2 >Pr - requisitos </ h2 >
<p > Familiaridade com algum sistema operacional ( Windows / Linux / Mac OS X ) </ p >
<p > Lgica de programao </ p >
< h2 > Agenda </ h2 >
< h3 > Aos domingos </ h3 >
<p > xx / xx / xxxx das 08:00 s 14:00 </ p >
<p > xx / xx / xxxx das 14:00 s 20:00 </ p >
< h3 > Aos sbados </ h3 >
Imagine que voc possua um site de culinria no qual voc disponibiliza algumas receitas. Crie
uma pgina com uma receita fictcia utilizando cabealhos para organizar contedo. Utilize quantos
nveis de ttulo achar necessrio.
5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
10
www.k19.com.br
11
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
HTML
<p > Utilize um recipiente que permita o macarro ficar totalmente submerso
na gua . </ p >
<p > Quando ouvir o bip no saia correndo . O microondas no ir explodir ,
pois o bip significa que o macarro est pronto . </ p >
< h3 > No fogo </ h3 >
<p > Ferva a gua em uma panela . </ p >
<p > Insira o macarro e cozinhe - o por 3 minutos </ p >
< h4 > Ponto importante </ h4 >
<p > Utilize uma panela que permita o macarro ficar totalmente submerso
na gua . </ p >
<p > No se distraia com a televiso ou qualquer outra coisa . Voc poder
queimar a sua refeio </ p >
</ body >
</ html >
Cdigo HTML 2.11: receita.html
Exerccios Complementares
Utilizando as tags de cabealho, crie uma pgina HTML que exiba hierarquicamente o nome e
uma curiosidade de alguns continentes, pases, estados (provncias) e cidades.
3
Utilizando as tags de cabealho, crie uma pgina de um produto e suas especificaes, observaes e ou comentrios. Utilize quantos nveis de ttulo achar necessrio.
4
Links
Normalmente, um site formado por um conjunto de pginas que esto interligadas de alguma
forma. Para permitir que um usurio navegue de uma pgina para outra, devemos utilizar os links.
Um link pode fazer a ligao de uma pgina para outra do mesmo site (link interno) ou para uma
pgina de outro site (link externo).
Para criarmos um link, devemos utilizar a tag a. Porm, essa tag sem atributos no criar nenhum
link interno ou externo. Para que um link seja criado, devemos, no mnimo, utilizar o atributo href
com o caminho relativo ou absoluto de uma outra pgina. Veja o exemplo:
1
2
3
4
5
6
7
8
9
10
11
www.facebook.com/k19treinamentos
11
HTML
12
Alm do atributo href, podemos utilizar o atributo target para informar onde o documento
deve ser aberto. Os possveis valores para o atributo target so:
_blank - em uma nova janela ou aba
_self - na mesma janela ou frame do documento que contm o link
_parent - em um frame que seja o pai do frame no qual o link se encontra
_top - na mesma janela do documento que contm o link
Ao testar os valores acima, logo percebemos que _self e _top possuem o mesmo comportamento se a pgina que contm o link no estiver em um frame. Caso o link esteja em um frame e
com o valor _top no atributo target, o link ser aberto na janela na qual o frame se encontra. Se o
valor for _self, o link ser aberto no prprio frame.
Dentro de uma nica pgina podemos ter diversos frames e, s vezes, queremos que um link de
um determinado frame seja aberto em outro. Para realizarmos tal tarefa devemos inserir como o
valor do atributo target o nome do frame no qual o link ser aberto.
O comportamento padro de um link abrir o documento na mesma pgina ou frame caso o
atributo target no seja utilizado.
1
2
3
4
5
6
7
8
9
10
11
Importante
Ao longo da evoluo do HTML, a tag frame foi caindo em desuso at que no HTML5 foi
totalmente retirada da especificao. Contudo a grande maioria dos navegadores ainda
interpretam a tag corretamente mesmo dentro de um documento HTML5. Porm, devemos
nos lembrar que ainda estamos num momento de transio para o HTML5. Logo, para evitar
problemas no futuro, evite o uso da tag frame ao mximo.
Exerccios de Fixao
12
www.k19.com.br
13
1
2
3
4
5
6
7
8
9
10
11
12
HTML
< html >
< head >
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
< title > Exemplo de uso da tag a com o atributo target </ title >
</ head >
< body >
<p > <a href = " http :// www . k19 . com . br " target = " _blank " > Link externo </ a > </ p >
<p > <a href = " pagina2 . html " target = " _self " > Link interno </ a > </ p >
<p > <a href = " pagina2 . html " target = " _top " > Link interno </ a > </ p >
<p > <a href = " pagina2 . html " > Link interno </ a > </ p >
</ body >
</ html >
Cdigo HTML 2.16: pagina1.html
1
2
3
4
5
6
7
8
9
Exerccios Complementares
Crie vrios links em uma pgina e para cada link escolha um target diferente. Crie tambm
quantas pginas de destino forem necessrias (caso seja necessrio).
5
Pesquise na internet como criar um iframe dentro de um documento HTML. Em seguida, crie
uma pgina com alguns links e um iframe. Crie tambm alguns links na pgina contida no iframe.
Para cada link em ambas as pginas, utilize valores diferentes para o atributo target e observe os
resultados.
6
ncoras
Alm de criar links para outras pginas, podemos criar links para uma determinada seo dentro
da prpria pgina na qual o link se encontra ou dentro de outra pgina. Esse recurso chama-se
ancoragem, pois as sees para as quais queremos criar um link devem possuir uma ncora.
Para criarmos uma ncora devemos utilizar novamente a tag a, porm sem o atributo href. Dessa
vez utilizaremos o atributo name para identificar a seo atravs de um nome.
O link tambm muda levemente, pois agora ao invs de passar somente o nome do arquivo da
pgina como valor do atributo href devemos passar o nome da seo prefixada com o caractere #.
1
2
3
www.facebook.com/k19treinamentos
13
HTML
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
14
< title > Exemplo de uso da tag a como ncora </ title >
</ head >
< body >
<p > <a href = " # mais_info " > Veja mais informaes </ a > </ p >
<p > <a href = " pagina2 . html # outra_ancora " > ncora em outra pgina </ a > </ p >
...
...
...
<a name = " mais_info " > Mais informaes </ a >
<p >
...
...
...
</ p >
</ body >
</ html >
Cdigo HTML 2.22: Exemplo de uso da tag a como ncora
Lembre-se
At a verso 4 do HTML e no XHTML, a especificao dizia para utilizarmos o atributo
name da tag a para criarmos as ncoras. Porm, no HTML5, a recomendao do W3C
que o atributo id seja utilizado para tal propsito. Desenvolvedores mais preocupados
em estar sempre atualizados podem ficar tranquilos e utilizar somente o atributo id ao invs do
name, pois os navegadores mais modernos conseguem interpretar o uso de ambos os atributos
em qualquer verso do HTML.
Exerccios de Fixao
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
14
www.k19.com.br
15
21
22
23
24
25
HTML
<a name = " sobre " > Sobre o texto dessa pgina </ a >
<p >O texto dessa pgina foi gerado atravs do site :
<a href = " http :// www . lipsum . com / " > http :// www . lipsum . com / </ a > </ p >
</ body >
</ html >
Cdigo HTML 2.23: ancora-pagina1.html
Crie um novo arquivo chamado ancora-pagina2.html na pasta html com um ncora chamada
outra_ancora. Dica: insira um contedo suficientemente grande para que a barra de rolagem vertical do navegador aparea e coloque a ncora no final da pgina.
8
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Crie um novo link no arquivo ancora-pagina1.html que aponte para ncora outra_ancora do
arquivo ancora-pagina2.html.
9
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
www.facebook.com/k19treinamentos
15
HTML
21
22
23
24
25
26
16
<a name = " sobre " > Sobre o texto dessa pgina </ a >
<p >O texto dessa pgina foi gerado atravs do site :
<a href = " http :// www . lipsum . com / " > http :// www . lipsum . com / </ a > </ p >
</ body >
</ html >
Cdigo HTML 2.25: ancora-pagina1.html
Exerccios Complementares
Crie dois documentos HTML. No primeiro crie um link que aponte para o site da K19 e tambm
coloque um texto qualquer. Em qualquer ponto deste texto, crie uma ncora. No segundo documento crie um link que aponte para a ncora criada no primeiro documento, coloque tambm um
link qualquer ou um texto.
7
8
Dentro de um documento HTML crie trs links. Dois devem apontar para ncoras de pginas
externas e o ltimo link deve aparecer no final da pgina e apontar para uma ncora no topo da
prpria pgina.
Imagens
Certamente, os sites na internet seriam muito entediantes se no fosse possvel adicionar imagens ao contedo das pginas. Como no queremos que as nossas pginas fiquem muito montonas, neste captulo, utilizaremos a tag img para melhorar um pouco a aparncia das pginas com
algumas imagens.
A tag img possui o atributo src que utilizaremos para informar qual imagem queremos carregar
dentro de um documento HTML. O valor do atributo pode ser o caminho absoluto ou relativo de
uma imagem.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
16
www.k19.com.br
17
23
24
25
26
27
28
29
30
31
32
33
34
35
HTML
<p >
< img src = " http :// www . k19 . com . br / css / img / k11 - logo - large . png " / >
K11 - Orientao a Objetos em Java
</ p >
<p >
< img src = " http :// www . k19 . com . br / css / img / k12 - logo - large . png " / >
K12 - Desenvolvimento Web com JSF2 e JPA2
</ p >
...
...
...
</ body >
</ html >
Cdigo HTML 2.29: Exemplo de uso da tag img
Exerccios de Fixao
Crie um documento HTML em um arquivo chamado imagem.html na pasta html que contenha
alguns elementos IMG.
10
1
2
3
4
5
www.facebook.com/k19treinamentos
17
HTML
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
18
< body >
< h1 > K19 Treinamentos </ h1 >
< img src = " http :// www . k19 . com . br / css / img / main - header - logo . png " / >
Exerccios Complementares
Tabelas
Suponha que voc esteja desenvolvendo o site de uma empresa e precisa apresentar alguns relatrios em pginas HTML. Considere que os dados desses relatrios so obtidos de planilhas eletrnicas. Da surge a necessidade de definir dados de forma tabular em HTML.
Para resolver esse problema, podemos utilizar o elemento table do HTML. Esse elemento permite apresentar um conjunto de dados na forma de tabelas. Veja o exemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
18
www.k19.com.br
19
24
25
26
27
28
29
30
31
32
33
34
35
HTML
</ tr >
< tr >
< td > Mitsubishi </ td >
< td > Lancer </ td >
< td > 2012 </ td >
</ tr >
< tr >
< td colspan = " 3 " > ltima atualizao : 06/2012 </ td >
</ tr >
</ table >
</ body >
</ html >
Cdigo HTML 2.32: Exemplo de uso da tag table
Perceba que a tag table no utilizada sozinha. Ela necessita de pelo menos um ou mais elementos tr que, por sua vez, necessitam de pelo menos um ou mais elementos th ou td.
O que significam essas tags?
tr - define uma linha da tabela
th - define uma clula de cabealho
td - define uma clula
Existe uma outra forma de criar a mesma tabela:
1
www.facebook.com/k19treinamentos
19
HTML
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
20
< head >
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
< title > Exemplo de uso da tag table </ title >
</ head >
< body >
< h1 > Carros </ h1 >
20
www.k19.com.br
21
HTML
Repare que visualmente no mudou absolutamente nada. Alm disso, apareceram mais algumas
tags: thead, tfoot e tbody.
O que significam essas tags?
thead - define o cabealho da tabela
tfoot - define o rodap da tabela
tbody - define o corpo da tabela
Por que complicar? Qual o motivo da existncia dessas tags?
A tag thead, assim como a tfoot, servem para agrupar as linhas de cabealho e de rodap,
respectivamente.
O cdigo fica mais claro.
Facilita a aplicao de estilos CSS (atravs do seletor de elemento)
Pode permitir que o contedo do corpo da tabela possua rolagem*.
Ao imprimir a pgina com uma tabela muito extensa, pode permitir que o cabealho e rodap
sejam replicados em todas as pginas*.
* Esses recursos podem existir ou no, pois os desenvolvedores de navegadores podem decidir
no implement-los. Esses recursos so sugestes da especificao.
www.facebook.com/k19treinamentos
21
HTML
22
Outros dois atributos importantes para a construo de tabelas so colspan e rowspan que podem ser aplicados nos elementos td e th.
Como podemos observar nos exemplos dados, o atributo colspan faz com que a clula ignore o
nmero de colunas definidas em seu valor. Analogamente, o atributo rowspan faz o mesmo, porm
com linhas.
Exerccios de Fixao
Crie uma pgina HTML em um arquivo chamado tabela.html na pasta html que contenha uma
tabela de acordo com a imagem abaixo:
11
As linhas vermelhas foram colocadas na imagem apenas para facilitar a visualizao do problema.
1
2
3
4
5
6
7
8
9
22
www.k19.com.br
23
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
HTML
< th > Marca </ th >
< th > Modelo </ th >
< th > Ano </ th >
</ tr >
</ thead >
< tfoot >
< tr >
< td colspan = " 3 " > ltima atualizao : 06/2012 </ td >
</ tr >
</ tfoot >
< tbody >
< tr >
< td rowspan = " 2 " > Toyota </ td >
< td > Corolla </ td >
< td > 2010 </ td >
</ tr >
< tr >
< td > Camry </ td >
< td > 2011 </ td >
</ tr >
< tr >
< td rowspan = " 3 " > Honda </ td >
< td > Civic </ td >
< td > 2004 </ td >
</ tr >
< tr >
< td > Fit </ td >
< td > 2012 </ td >
</ tr >
< tr >
< td > City </ td >
< td > 2011 </ td >
</ tr >
< tr >
< td > Mitsubishi </ td >
< td > Lancer </ td >
< td > 2012 </ td >
</ tr >
</ tbody >
</ table >
</ body >
</ html >
Cdigo HTML 2.34: tabela.html
Exerccios Complementares
Listas
Em um documento HTML podemos ter trs tipos de listas e cada uma delas deve ser utilizada de
acordo com a sua semntica, ou seja, voc deve escolher um tipo de lista para cada situao.
Os trs tipos possveis de listas so:
www.facebook.com/k19treinamentos
23
HTML
24
Lista de definio - utilizada para exibir definies de termos. Funciona como nos dicionrios,
no qual temos uma palavra e em seguida o seu significado.
Lista sem ordem - utilizada para exibir qualquer contedo sem ordenao.
Lista de definio
Para criarmos uma lista de definio devemos utilizar a tag dl. O elemento dl deve possuir pelo
menos um elemento filho dt seguido de um elemento dd. Um item em uma lista de definio
composto por um par de elementos dt e dd.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
24
www.k19.com.br
25
HTML
Exerccios de Fixao
Crie um documento HTML em um arquivo chamado restaurante.html na pasta html que contenha o cardpio de um restaurante com os nomes dos seus pratos e uma breve descrio sobre os
mesmos.
12
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
www.facebook.com/k19treinamentos
25
HTML
22
23
24
26
</ dl >
</ body >
</ html >
Exerccios Complementares
Crie um documento HTML que contenha uma lista de alguns pontos tursticos do Brasil de que
voc tenha conhecimento e cite algumas atraes do mesmo.
11
Lista ordenada
Para criarmos uma lista ordenada, devemos utilizar a tag ol. O elemento ol deve possuir pelo
menos um elemento filho li.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
26
www.k19.com.br
27
HTML
Exerccios de Fixao
13 Crie um documento HTML em um arquivo chamado manual.html na pasta html que contenha
um manual que explica passo-a-passo o uso de um caixa eletrnico para a operao de saque.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
www.facebook.com/k19treinamentos
27
HTML
28
Exerccios Complementares
Crie um documento HTML que contenha um manual que explique passo-a-passo a instalao,
manuteno ou manuseio de um aparelho eletrnico.
12
Para criarmos uma lista sem ordem, devemos utilizar a tag ul. O elemento ul deve possuir pelo
menos um elemento filho li.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
28
www.k19.com.br
29
HTML
Exerccios de Fixao
Crie um documento HTML em um arquivo chamado lista-curso.html na pasta html que contenha a lista dos cursos da Formao Bsica da K19.
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
www.facebook.com/k19treinamentos
29
HTML
30
Exerccios Complementares
Crie um documento HTML que contenha a lista dos cursos da Formao Desenvolvedor Java da
13
K19.
Formulrio
Para trazermos um pouco mais de interatividade para as nossas pginas, podemos utilizar os
elementos de formulrio. Esses elementos recebem algum tipo de entrada do usurio, seja atravs
de um clique ou digitando algum valor.
A tag input
A tag input permite que o elemento que a contenha assuma diversas formas dependendo do seu
atributo type. O atributo type pode receber os seguintes valores:
text - cria uma caixa de texto de uma linha.
password - cria uma caixa de texto de uma linha escondendo os caracteres digitados.
checkbox - cria uma caixa que assume dois estados: checado e "deschecado". Em conjunto
com o atributo name possvel que se crie um grupo de checkboxes no qual um ou mais checkboxes seja "checado".
radio - cria uma caixa que assume dois estados: checado e "deschecado". Em conjunto com
o atributo name possvel que se crie um grupo de radios no qual apenas um radio seja "checado".
button - cria um boto. Atravs do atributo value definimos o texto do boto.
submit - cria um boto para o envio do formulrio. Atravs do atributo value definimos o texto
do boto.
file - cria um boto que, ao ser clicado, abre uma caixa de dilogo para a escolha de um arquivo
no computador do usurio.
reset - cria um boto que descarta todas as alteraes feitas dentro de um formulrio. Atravs
do atributo value definimos o texto do boto.
image - cria um boto para o envio do formulrio. Dese ser utilizado em conjunto com o atributo src para que uma imagem de fundo seja utilizada no boto.
hidden - cria um elemento que no fica visvel para o usurio, porm pode conter um valor
que ser enviado pelo formulrio.
Existem outros valores possveis para o atributo type, porm eles fazem parte da especificao
do HTML5 e nem todos os navegadores suportam tais valores.
1
2
3
4
5
6
30
www.k19.com.br
31
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
HTML
< form action = " pagina . html " method = " get " >
<p >
text :
< input type = " text " / >
</ p >
<p >
password :
< input type = " password " / >
</ p >
<p >
checkboxes :
< input type = " checkbox " name = " checkgroup " / >
< input type = " checkbox " name = " checkgroup " / >
< input type = " checkbox " name = " checkgroup " / >
</ p >
<p >
radios :
< input type = " radio " name = " checkgroup " / >
< input type = " radio " name = " checkgroup " / >
< input type = " radio " name = " checkgroup " / >
</ p >
<p >
button :
< input type = " button " value = " Boto " / >
</ p >
<p >
submit :
< input type = " submit " value = " Enviar " / >
</ p >
<p >
file :
< input type = " file " / >
</ p >
<p >
reset :
< input type = " reset " value = " Descartar alteraes " / >
</ p >
<p >
image :
< input
type = " image " src = " http :// www . k19 . com . br / css / img / main - header - logo . png " / >
</ p >
<p >
hidden :
< input type = " hidden " value = " valor escondido " / >
</ p >
</ form >
</ body >
</ html >
www.facebook.com/k19treinamentos
31
HTML
32
A tag select
A tag select permite ao usurio escolher um ou mais itens de uma lista. O atributo multiple,
quando presente, informa ao navegador que mais de um item pode ser selecionado.
A lista de itens deve ser informada atravs de elementos option. Tais elementos devem ser filhos
diretos ou indiretos de elementos select. Alm disso, cada item pode conter o atributo chamado
value para informar o valor associado a uma determinada opo.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
32
www.k19.com.br
33
23
24
25
26
27
28
29
30
31
HTML
< option
< option
< option
< option
</ select >
</ p >
</ form >
</ body >
</ html >
Caso exista a necessidade de agrupar as opes de um elemento select, podemos utilizar o elemento optgroup em conjunto com o atributo label. Veja o exemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
www.facebook.com/k19treinamentos
33
HTML
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
34
< option value = " curitiba " > Curitiba </ option >
</ optgroup >
</ select >
</ p >
<p >
Selecione uma ou mais categorias de produtos ( mantenha a tecla
" control " ( ou " command " no Mac ) pressionada para escolher mais de uma
categoria ) :
< select multiple = " multiple " >
< optgroup label = " De mesa " >
< option value = " desktops " > Desktops </ option >
</ optgroup >
< optgroup label = " Portteis " >
< option value = " notebooks " > Notebooks </ option >
< option value = " tablets " > Tablets </ option >
< option value = " celulares " > Celulares </ option >
</ optgroup >
</ select >
</ p >
</ form >
</ body >
</ html >
Cdigo HTML 2.47: Exemplo de uso da tag select
A tag textarea
A tag textarea exibe uma caixa de texto na qual o usurio poder inserir um texto qualquer. A
diferena para a tag input com o atributo type com o valor text que a tag textarea permite a
insero de textos mais longos e com quebras de linha.
34
www.k19.com.br
35
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
HTML
< html >
< head >
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
< title > Exemplo de uso da tag textarea </ title >
</ head >
< body >
< form action = " pagina . html " method = " get " >
<p >
textarea :
< textarea >
</ textarea >
</ p >
</ form >
</ body >
</ html >
Cdigo HTML 2.48: Exemplo de uso da tag textarea
A tag label
Em alguns dos exemplos anteriores foram inseridos textos ao lado dos elementos de formulrio
apresentados. Podemos pensar nesses textos como rtulos de cada elemento e exatamente para
esse fim que devemos utilizar a tag label do HTML.
Alm de servir como rtulo, a tag label auxilia o usurio a interagir com os elementos do formulrio. Utilizando o atributo for podemos fazer com que um elemento do formulrio receba o foco.
Veja o exemplo:
1
www.facebook.com/k19treinamentos
35
HTML
2
3
4
5
6
7
8
9
10
11
12
13
14
36
Repare que o atributo for da tag label deve conter um valor igual ao do atributo id do elemento
que desejamos focar.
A tag form
Desde o momento em que comeamos a falar sobre os elementos de formulrio utilizamos a tag
form, porm no falamos nada sobre ela. A tag form ir definir, de fato, o nosso formulrio. Todos
os elementos de formulrio que vimos anteriormente devem ser filhos diretos ou indiretos de um
elemento com a tag form para que os dados vinculados a esses elementos sejam enviados.
O papel do formulrio enviar os dados contidos nele para algum lugar, mas para onde? O atributo action quem diz para onde os dados de um formulrio deve ser enviado. Alm disso, devemos
36
www.k19.com.br
37
HTML
informar a maneira como queremos que esses dados sejam enviados, ou seja, se queremos que eles
sejam enviados atravs de uma requisio do tipo GET ou POST (mtodos de envio definidos no
protocolo HTTP).
Exerccios de Fixao
Crie um documento HTML em um arquivo chamado formulario.html na pasta html com diversos elementos de formulrio e para cada elemento crie um rtulo. Cada rtulo deve focar o elemento
de formulrio correspondente.
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Exerccios Complementares
Em um documento HTML, crie um formulrio que utilize as tags input, select, label e textarea.
Tente utilizar todos os tipos do elemento input vistos neste captulo.
14
www.facebook.com/k19treinamentos
37
HTML
38
38
www.k19.com.br
CAPTULO
CSS
At o momento, utilizamos os elementos HTML sem modificar a forma de exibio dos mesmos.
Nos exemplos mostrados no Captulo 2, os elementos foram exibidos com a formatao padro definida pelo navegador utilizado.
A formatao padro pode variar de navegador para navegador. Em geral, os navegadores tentam
seguir as sugestes do W3C. Mas, algumas vezes, erros de interpretao da especificao ou erros de
implementao podem ocorrer. Alm disso, o W3C pode apenas sugerir, ele no possui o poder de
obrigar que todos os navegadores tenham o mesmo comportamento. Portanto, uma boa prtica
formatarmos cada elemento para que o efeito visual seja o mesmo em todos os navegadores. E esse
no o nico motivo, pois na grande maioria das vezes, desejamos aplicar em nossas pginas um
design nico, com a identidade visual da nossa empresa ou cliente.
Os elementos HTML possuem alguns atributos para formatarmos a sua aparncia. Porm, alm
de serem limitados, o uso desses atributos esto caindo em desuso. Inclusive, existem elementos
cuja nica funo alterar a aparncia de um texto, por exemplo. Contudo, esses elementos tambm
caram em desuso e provavelmente no estaro nas prximas especificaes do HTML.
Para alterarmos o aspecto visual dos elementos do HTML, o W3C recomenda que utilizemos o
CSS (Cascading Style Sheets - Folhas de Estilo em Cascata). Atualmente o CSS encontra-se em sua
terceira verso. Porm, nem todos os navegadores implementaram todos os novos recursos.
Podemos aplicar o CSS de trs formas em um documento HTML:
Definindo as propriedades CSS diretamente no elemento HTML atravs do seu atributo style.
Definindo as regras CSS dentro de um elemento com a tag style.
Definindo as regras CSS em arquivo parte do documento HTML.
Mas o que so essas regras e propriedades? Como elas so definidas?
Propriedade CSS uma caracterstica visual de um elemento HTML. J a regra um conjunto de
propriedades definidas para um elemento ou para um grupo de elementos HTML.
Vamos ver um exemplo de aplicao das propriedades CSS diretamente em um elemento HTML:
1
2
3
4
5
6
7
8
9
10
www.facebook.com/k19treinamentos
39
CSS
40
style, estamos utilizando a abordagem CSS inline. Essa prtica no recomendada, pois dessa
forma no possvel reaproveitar o cdigo CSS, alm de dificultar a leitura do cdigo HTML.
Vamos ver agora a aplicao das regras CSS utilizando a tag style:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Cdigo HTML 3.2: Exemplo de aplicao das regras CSS atravs da tag style
40
www.k19.com.br
41
CSS
Figura 3.2: Exemplo de aplicao das regras CSS atravs da tag style
Como vimos anteriormente, tambm podemos definir as regras CSS em um arquivo parte. Com
esse arquivo em mos, dentro de um documento HTML, para indicarmos qual o arquivo que contm
as regras CSS, devemos utilizar a tag link. Veja o exemplo:
1
2
3
4
5
6
7
8
9
10
11
Cdigo HTML 3.3: Exemplo de aplicao das regras CSS atravs de um arquivo
1
2
3
4
p {
font - size : 40 px ;
color : # ff0000 ;
}
www.facebook.com/k19treinamentos
41
CSS
42
Perceba que o efeito foi o mesmo de quando aplicamos as regras CSS atravs da tag style. Isso
se deve ao fato de estarmos utilizando a mesma regra. O que mudamos foi apenas onde a definimos.
Exerccios de Fixao
Dentro da pasta com o seu nome utilizada no captulo anterior, crie uma subpasta chamada
css. Novamente para facilitar, utilize apenas letras minsculas em todas as pastas e arquivos que
criarmos durante esse captulo.
1
1
2
3
4
5
6
7
8
9
10
42
www.k19.com.br
43
11
12
13
14
15
16
17
CSS
</ style >
</ head >
< body >
<p > Um pargrafo formatado </ p >
<p > Outro pargrafo formatado </ p >
</ body >
</ html >
3 Para organizar melhor o contedo e a formatao da pgina criada no exerccio anterior, crie um
arquivo CSS chamado regras-de-formatacao.css na pasta css.
1
2
3
4
5
p {
font - weight : bold ;
font - size : 20 px ;
color : #0000 FF ;
}
1
2
3
4
5
6
7
8
9
10
11
43
CSS
44
Seletor
Corpo
p
}
{
font-size: 40px;
Propriedade
Podemos ler a regra acima da seguinte forma: ser atribudo o valor 40px propriedade font-size
em todos os elementos que forem selecionados pelo seletor p.
No exemplo acima, utilizamos aquilo que chamamos de seletor de tipo. Todos os elementos
p recebero as propriedades definidas no corpo da regra.
Tipos de seletores
Na linguagem CSS existem diversos tipos de seletores, sendo os principais:
Seletor universal
Seletor de tipo
Seletor de descendentes
Seletor de filhos
Seletor de irmo adjacente
Seletor de atributos
Seletor de id
Seletor de classe
Seletor universal
O seletor universal seleciona todos os elementos de um documento HTML.
No exemplo a seguir, faremos com que todos os elementos tenham margem igual a 0px.
1
2
3
* {
margin : 0 px ;
}
Cdigo CSS 3.3: Usando o seletor universal
44
www.k19.com.br
45
CSS
Seletor de tipo
O seletor de tipo seleciona todos os elementos com tag igual ao tipo indicado na declarao da
regra CSS.
No exemplo a seguir, selecionaremos todos os elementos que possuem a tag textarea.
1
2
3
textarea {
border : 1 px solid red ;
}
Cdigo CSS 3.4: Usando o seletor de tipo
Seletor de descendentes
Chamamos de seletor de descendentes a seleo de um ou mais elementos fazendo o uso de outros seletores separados por espaos. Um espao indica que os elementos selecionados pelo seletor
sua direita so filhos diretos ou indiretos dos elementos selecionados pelo seletor sua esquerda.
No exemplo a seguir iremos selecionar todos os elementos que possuem a tag input e que sejam
filhos diretos ou indiretos de elementos com a tag p.
1
2
3
p input {
border : 1 px solid red ;
}
Cdigo CSS 3.5: Usando o seletor de descendentes
Seletor de filhos
Chamamos de seletor de filhos a seleo de um ou mais elementos fazendo o uso de outros seletores separados pelo caractere >. Um caractere > indica que os elementos selecionados pelo seletor
sua direita so filhos diretos dos elementos selecionados pelo seletor sua esquerda.
No exemplo a seguir iremos selecionar todos os elementos que possuem a tag a e que sejam filhos
diretos de elementos com a tag p.
1
2
3
p > a {
color : green ;
}
Cdigo CSS 3.6: Usando o seletor de filhos
label + input {
color : green ;
www.facebook.com/k19treinamentos
45
CSS
3
46
}
Cdigo CSS 3.7: Usando o seletor de irmo adjacente
Seletor de atributos
O seletor de atributos seleciona um ou mais elementos que possuam o atributo ou o atributo
juntamente com o seu valor da mesma forma como indicada pelo seletor na declarao da regra
CSS. Os atributos so informados dentro de colchetes [].
No exemplo abaixo iremos selecionar todos os elementos que possuam o atributo name igual a
cidade.
1
2
3
*[ name = cidade ] {
font - weight : italic ;
}
Cdigo CSS 3.8: Usando o seletor de atributos
Se desejarmos tambm podemos informar apenas o atributo. No exemplo a seguir iremos selecionar todos os elementos com a tag img que possuam o atributo title.
1
2
3
img [ title ] {
width : 100 px ;
}
Cdigo CSS 3.9: Usando o seletor de atributos
Seletor de id
O seletor de id seleciona um nico elemento cujo atributo id possui o valor indicado pelo seletor
na declarao da regra CSS.
No exemplo abaixo iremos selecionar o elemento cujo atributo id possui o valor cidade. Repare
que o seletor de id comea com o caractere #.
1
2
3
# cidade {
font - weight : bold ;
}
Cdigo CSS 3.10: Usando o seletor de id
Seletor de classe
O seletor de classe seleciona todos os elementos cujo atributo class possui o valor indicado pelo
seletor na declarao da regra CSS.
No exemplo abaixo iremos selecionar todos os elementos cujo atributo class possui o valor
. titulos {
font - size : 40 px ;
}
Cdigo CSS 3.11: Usando o seletor de classe
46
www.k19.com.br
47
CSS
Exerccios de Fixao
Para testar o funcionamento de alguns seletores, crie um documento html em um arquivo chamado seletores.html. Alm disso, defina algumas regras de formatao em um arquivo CSS chamado
seletores.css. Salve esses arquivos na pasta css.
5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
* {
font - family : Monaco , DejaVu Sans Mono , monospace ;
}
h1 {
color : blue ;
}
h3 {
font - size : 20 px ;
}
p > a {
font - weight : bold ;
text - decoration : none ;
}
# main - menu {
font - size : 18 px ;
list - style : none ;
padding : 0 px ;
}
# main - menu li {
display : inline ;
margin : 0 50 px 0 0;
}
# main - menu li a {
www.facebook.com/k19treinamentos
47
CSS
30
31
32
33
34
35
36
37
48
border : 2 px solid #0000 ff ;
text - decoration : none ;
}
. selected {
background - color : blue ;
color : white ;
}
Cdigo CSS 3.12: formatando-pagina.css
Cores em CSS
Tradicionalmente, as cores podem ser definidas de trs formas diferentes: pelo nome da cor, pelo valor hexadecimal associado cor ou atravs da funo rgb(). Nem todas as cores possuem um nome.
Por isso, normalmente, utilizamos a forma hexadecimal ou a funo rgb().
Uma cor definida em hexadecimal da seguinte forma: #RRGGBB. Onde RR, GG e BB podem variar
de 00 a FF e representam os componentes vermelho, verde e azul de uma cor.
Para definir uma cor utilizando a funo rgb(), necessrio passar como argumento as quantidades de vermelho, verde e azul necessrias para formar a cor desejada. Essas quantidade podem
ser expressas na escala de 0 a 255 ou em porcentagem. Veja os exemplos abaixo:
1
2
Mais Sobre
Em CSS3, h mais trs funes para definir uma cor: rgba(), hsl() e hsla().
A funo hsl() define as cores atravs da matiz, saturao e luminosidade (hue, saturation e lightness). Essa funo possui trs parmetros hsl(H, S, L). Onde H pode variar de
0 a 360, S e L de 0% a 100%.
As funes rgba(R, G, B, A) e hsla(H, S, L, A) possuem um ltimo parmetro que significa a opacidade da cor (alpha). Esse valor varia de 0 a 1 com passo de 0.1.
Unidades de medida
Em CSS possumos diversas unidades de medida como podemos verificar na listagem abaixo:
in - polegada.
cm - centmetro.
mm - milmetro.
em - tamanho relativo ao tamanho de fonte atual no documento. 1em igual ao tamanho da
fonte atual, 2em o dobro do tamanho da fonte atual e assim por diante.
ex - essa unidade igual altura da letra "x"minscula da fonte atual do documento.
48
www.k19.com.br
49
CSS
body {
background - attachment : fixed ;
background - color : # dddddd ;
background - image : url ( http : // www . k19 . com . br / css / img / main - header - logo . png ) ;
background - position : left top ;
background - repeat : repeat ;
}
div {
background : # dddddd url ( http : // www . k19 . com . br / css / img / main - header - logo . png )
no - repeat center center fixed ;
}
Cdigo CSS 3.14: Propriedades de background
Propriedades de texto
color - define a cor do texto.
direction - define a direo do texto.
letter-spacing - define o espaamento entre as letras do texto.
line-height - define a altura das linhas de um texto.
text-align - define o alinhamento horizontal do texto.
text-decoration - define uma "decorao"ou efeito para um texto.
text-indent - define a identao da primeira linha de um bloco de texto.
text-transform - define a capitalizao do texto.
vertical-align - define o alinhamento vertical do texto.
white-space - define como os espaos do texto sero tratados.
www.facebook.com/k19treinamentos
49
CSS
50
p {
color : green ;
direction : rtl ;
letter - spacing : 10 px ;
line - height : 30 px ;
text - align : right ;
text - decoration : blink ;
text - indent : 50 px ;
text - transform : uppercase ;
vertical - align : middle ;
white - space : nowrap ;
word - spacing : 30 px ;
}
Cdigo CSS 3.15: Propriedades de texto
Propriedades de fonte
font-family - define a famlia de fontes a ser utilizada.
font-size - define o tamanho da fonte.
font-style - define o estilo de fonte.
font-variant - define se a fonte ser utilizada no formato small-caps ou no.
font-weight - define a espessura dos traos de uma fonte.
font - define todas as propriedades de fonte em uma nica linha.
1
2
3
4
5
6
7
8
9
10
11
p {
font - family : sans - serif , serif , monospace ;
font - size : 14 px ;
font - style : italic ;
font - variant : small - caps ;
font - weight : bold ;
}
a {
font : italic small - caps bold 14 px /20 px sans - serif , serif , monospace ;
}
Cdigo CSS 3.16: Propriedades de fonte
Propriedades de lista
list-style-image - define qual ser o indicador de item da lista.
list-style-position - define se o indicador de item da lista ser exibido do lado de dentro ou de
fora do elemento do item.
list-style-type - define qual o tipo de indicador de item ser usado na lista.
list-style: define todas as propriedades de lista em uma nica linha.
1
2
3
4
5
50
ul {
list - style - image : url ( http : // www . k19 . com . br / css / img / box - dot - orange . png ) ;
list - style - position : inside ;
list - style - type : disc ;
}
www.k19.com.br
51
6
7
8
9
10
CSS
ol {
list - style : square outside
url ( http : // www . k19 . com . br / css / img / box - dot - orange . png ) ;
}
Cdigo CSS 3.17: Propriedades de lista
Propriedades de tabela
border-collapse - faz com que as bordas das clulas no fiquem duplicadas quando estas possurem bordas.
1
2
3
4
5
6
table {
border - collapse : collapse ;
}
table , th , td {
border : 1 px solid blue ;
}
Cdigo CSS 3.18: Propriedades de tabela
Propriedades de dimenso
width - define a largura de um elemento.
min-width - define a largura mnima de um elemento.
max-width - define a largura mxima de um elemento.
height - define a altura de um elemento.
min-height - define a altura mnima de um elemento.
max-height - define a altura mxima de um elemento.
1
2
3
4
5
6
7
8
9
10
11
div {
width : 300 px ;
height : 300 px ;
}
h1 {
min - width : 10 px ;
max - width : 300 px ;
min - height : 10 px ;
max - height : 300 px ;
}
Cdigo CSS 3.19: Propriedades de dimenso
Exerccios de Fixao
A partir de agora, o nosso objetivo formatar a pgina principal do blog da K19. Ao trmino dos
exerccios, essa pgina deve ficar igual ilustrao abaixo.
6
www.facebook.com/k19treinamentos
51
CSS
52
O primeiro passo criar o documento HTML com o contedo desejado. Faa um arquivo chamado index.html na pasta css com o seguinte contedo.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
52
www.k19.com.br
53
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
CSS
</ div >
< div id = " main - content " >
< h1 > Primeiro post no Blog da K19 ! </ h1 >
< div id = " blog - content " >
<p >
Lorem ipsum dolor sit amet , consectetur adipiscing elit .
Integer convallis pharetra nibh , in rhoncus dolor convallis eu .
Mauris iaculis odio ut nunc scelerisque luctus sit amet quis purus .
Morbi venenatis cursus tellus , non ultricies libero interdum nec .
Etiam in imperdiet velit . Pellentesque feugiat felis ac mi tempor
et semper lacus luctus . Morbi eu nunc dui , ac ullamcorper lorem .
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae ;
</ p >
< table >
< thead >
< tr >
< th > Integer </ th >
< th > Proint </ th >
< th > Nunc </ th >
</ tr >
</ thead >
< tbody >
< tr >
< td class = " first - col " > Donec id massa </ td >
< td > Vestibulum eget </ td >
< td > Quisque venenatis magna vitae </ td >
</ tr >
< tr >
< td class = " first - col " > Etiam a sollicitudin </ td >
< td > Quisque venenatis </ td >
< td > Nam tempus tincidunt posuere </ td >
</ tr >
< tr >
< td class = " first - col " > Etiam sit </ td >
< td > Praesent felis </ td >
< td > Vestibulum nunc magna </ td >
</ tr >
< tr >
< td class = " first - col " > Cras eros est </ td >
< td > Mauris rhoncus </ td >
< td > Donec eget porttitor ipsum </ td >
</ tr >
< tr >
< td class = " first - col " > Morbi vel erat </ td >
< td > Pellentesque feugiat </ td >
< td > Praesent aliquam , nunc nec placerat </ td >
</ tr >
</ tbody >
</ table >
<p >
Nunc in risus odio , mollis sollicitudin sem . Vivamus hendrerit
eros sed mauris bibendum elementum . Nullam cursus dictum sem ,
ut semper dolor cursus eu . Donec id massa quis libero mattis
iaculis . Cras in luctus velit . Quisque id nisi nunc , sed mollis
mi . Mauris sit amet purus libero , ut dignissim tellus . Aenean
ac risus massa . Mauris lacinia tempus orci , nec pellentesque metus
fringilla quis .
</ p >
< ul >
< li >
Integer vitae aliquet ligula . Etiam a sollicitudin orci . Nam tempus
tincidunt posuere .
</ li >
< li >
www.facebook.com/k19treinamentos
53
CSS
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
54
Proin consectetur justo nisl , nec scelerisque est . Morbi nec
urna sit amet arcu tincidunt pretium eu id libero . Ut quis ligula
velit . Praesent aliquam , nunc nec placerat vestibulum , nisi eros
rutrum erat , vel imperdiet nisi dui at metus . Nam mollis magna quis
ligula dignissim .
</ li >
< li >
Duis augue diam , iaculis quis egestas id , placerat vitae turpis .
</ li >
</ ul >
</ div >
</ div >
< div id = " side - content " >
<a id = " ad " href = " # " >
< img src = " publicidade . png "
alt = " Propaganda da Pizzaria K19 com a imagem de uma pizza ao fundo "
title = " Pizzaria K19 " / >
</ a >
< form id = " contact - form " action = " # " >
< h3 > Contato </ h3 >
< div >
< label for = " contact - form - name " > Nome </ label >
< input id = " contact - form - name " type = " text " name = " nome " / >
</ div >
< div >
< label for = " contact - form - email " >E - mail </ label >
< input id = " contact - form - email " type = " text " name = " nome " / >
</ div >
< div >
< label for = " contact - form - message " > Mensagem </ label >
< textarea id = " contact - form - message " > </ textarea >
</ div >
< div >
< input id = " contact - form - newsletter " type = " checkbox " name = " newsletter " / >
< label
for = " contact - form - newsletter " > Deseja receber a nossa newsletter ? </ label >
</ div >
< input type = " submit " value = " Enviar " / >
</ form >
</ div >
< div id = " footer " >
& copy ; Copyright 2013. K19 Treinamentos .
</ div >
</ div >
</ body >
</ html >
Cdigo HTML 3.7: k19-blog.html
8
Para definir a formatao da pgina que desejamos criar, faa um arquivo chamado blog.css na
pasta css com o seguinte contedo.
54
* {
www.k19.com.br
55
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
CSS
font - family : arial , sans - serif ;
}
body {
white - space : nowrap ;
}
# blog {
width : 980 px ;
}
# logo - link {
text - decoration : none ;
}
# logo - link img {
vertical - align : bottom ;
}
# main - menu {
list - style : none ;
}
# main - menu li a {
background : # cecece ;
color : #333333;
text - decoration : none ;
}
# main - menu li a . selected {
background : #074 f83 ;
color : # ffffff ;
}
# main - content {
vertical - align : top ;
width : 660 px ;
color : #666666;
white - space : normal ;
}
# main - content h1 {
background : #074 f83 ;
color : # ffffff ;
font - size : 24 px ;
}
# blog - content > table {
width : 100%;
}
# blog - content > table th {
color : # ffffff ;
background : #5 f5f5f ;
}
# blog - content > table td {
background : # dddddd ;
color : #333333;
}
# blog - content > table td . first - col {
background : # a9a9a9 ;
}
# blog - content ul {
list - style - image : url ( list - bullet . png ) ;
}
# side - content {
www.facebook.com/k19treinamentos
55
CSS
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
56
vertical - align : top ;
}
# contact - form {
text - align : right ;
}
# contact - form h3 {
font - size : 18 px ;
color : #074 f83 ;
text - align : left ;
}
# contact - form div {
text - align : left ;
}
# contact - form label {
font - size : 14 px ;
vertical - align : middle ;
color : #666666;
}
# contact - form input ,
# contact - form textarea {
width : 288 px ;
font - size : 18 px ;
}
# contact - form textarea {
height : 100 px ;
}
# contact - form input [ type = checkbox ] {
width : auto ;
}
# contact - form input [ type = submit ] {
background : #074 f83 ;
color : # ffffff ;
text - transform : uppercase ;
font - size : 14 px ;
width : auto ;
}
# footer {
font - size : 12 px ;
color : #999999;
text - align : center ;
}
Cdigo CSS 3.20: blog.css
www.k19.com.br
57
CSS
57
CSS
58
Linhas 109 a 115: Definimos, atravs das propriedades background, color, text-transform
e font-size, a cor do fundo, a cor da fonte, o tipo de letra, o tamanho da fonte e largura do
boto de envio do formulrio de contato.
Linhas 117 a 121: Definimos, atravs das propriedades font-size, color e text-align, que o
o texto do rodap ter fonte de tamanho 12px, cor #999999 e alinhamento centralizado.
Box model
O termo box model utilizado para explicar o comportamento visual dos elementos HTML, pois podemos imaginar que cada elemento em uma pgina est envolvido por uma caixa. Essa caixa possui
trs partes: uma margem interna (padding), uma borda (border) e uma margem externa (margin).
contedo
Um erro muito comum quando estamos comeando a aprender CSS que nos esquecemos de
considerar as dimenses das margens internas e externas no clculo das dimenses de um elemento.
Vamos pensar no seguinte caso: suponha que voc possua um espao de 300px para encaixar
um contedo dentro da sua pgina. Voc poderia incluir no HTML um elemento com a tag div e a
seguinte regra CSS:
1
2
3
4
5
6
div {
width : 300 px ;
padding : 10 px ;
margin : 10 px ;
border : 1 px solid green ;
}
Cdigo CSS 3.21: Exemplo de uso incorreto das dimenses de um elemento
Num primeiro momento pode parecer que tudo est correto, porm ao abrir a pgina voc perceber que seu elemento est ultrapassando o limite dos 300px. Isso ocorre porque devemos incluir
58
www.k19.com.br
59
CSS
div {
width : 258 px ;
padding : 10 px ;
margin : 10 px ;
border : 1 px solid green ;
}
59
CSS
60
A propriedade display
Todo elemento possui uma propriedade CSS chamada display que afeta a maneira como tal
elemento ser posicionado na tela. Essa propriedade pode assumir diversos valores, sendo os principais:
block - o elemento que tiver a propriedade display: block far com que o prximo elemento seja posicionado logo abaixo e ter a largura definida pelo atributo width ou herdar
a largura do elemento que o contm. Chamamos esse tipo de elemento de elemento de bloco.
Um elemento de bloco pode conter elementos de bloco, elementos inline e elementos inlineblock.
inline - o elemento que tiver a propriedade display: inline far com que outros elementos
inline (ou inline-block) ao seu redor sejam posicionados um do lado do outro, na ordem em
que foram criados em um documento HTML. Chamamos esse tipo de elemento de elemento
inline. Um elemento inline s pode conter outros elementos inline.
inline-block - o elemento que tiver a propriedade display: inline-block far com que outros elementos inline (ou inline-block) ao seu redor sejam posicionados um do lado do outro,
na ordem em que foram criados em um documento HTML. Chamamos esse tipo de elemento
de elemento inline-block. Um elemento inline-block pode conter elementos de bloco, elementos inline e outros elementos inline-block.
Durante a aplicao do CSS em uma pgina HTML muitas vezes temos a necessidade de inserir
ou remover alguns elementos HTML afim de obtermos o resultado desejado. Isso perfeitamente
normal. Contudo, em algumas situaes esse simples remanejamento dos elementos HTML no o
suficiente.
Em alguns momentos temos a necessidade de que um elemento de bloco se comporte como um
elemento inline e vice-versa. Para atingirmos esse objetivo devemos utilizar a propriedade display,
como nos exemplos a seguir:
60
www.k19.com.br
61
1
2
3
CSS
div {
display : inline ;
}
Cdigo CSS 3.23: Elemento de bloco se comportando como inline
1
2
3
span {
display : block ;
}
Cdigo CSS 3.24: Elemento inline se comportando como bloco
Num primeiro momento temos a falsa impresso de que podemos utilizar essa propriedade livremente sem nos preocuparmos com os valores originais da propriedade display dos elementos
HTML.
De acordo com a especificao do HTML, elementos inline no podem conter elementos de
bloco. J elementos de bloco podem conter tanto elementos inline assim como elementos de bloco.
Portanto, no primeiro exemplo, ao fazermos um div se comportar como um elemento inline, esse
div no poder conter elementos de bloco. Devemos prestar ateno nesse tipo de detalhe quando
estivermos alterando as propriedades CSS de um elemento HTML.
Por outro lado, no segundo exemplo, apesar de fazermos um span se comportar como um elemento de bloco, no poderemos fazer com que ele contenha elementos de bloco ou inline-block.
Isso se deve ao fato de que antes de qualquer regra CSS ser aplicada o documento j teria um erro de
validao. Alterar a propriedade display de um elemento no significa que podemos desobedecer
as regras estabelecidas na especificao do HTML.
Exerccios de Fixao
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Continuando o exerccio anterior, altere o arquivo blog.css conforme as linhas destacadas abaixo:
* {
margin : 0;
padding : 0;
font - family : arial , sans - serif ;
}
body {
white - space : nowrap ;
}
# blog {
width : 980 px ;
margin : 0 auto ;
}
# header {
border - bottom : 1 px solid #074 f83 ;
margin : 0 0 20 px 0;
}
# logo - link {
text - decoration : none ;
}
www.facebook.com/k19treinamentos
61
CSS
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
62
62
www.k19.com.br
63
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
CSS
background : #5 f5f5f ;
}
# blog - content > table td {
background : # dddddd ;
color : #333333;
}
# blog - content > table td . first - col {
background : # a9a9a9 ;
}
# blog - content ul {
list - style - image : url ( list - bullet . png ) ;
margin : 0 0 0 30 px ;
}
# side - content {
display : inline - block ;
margin : 0 0 0 20 px ;
vertical - align : top ;
}
# ad {
display : block ;
margin : 0 0 20 px 0;
}
# contact - form {
text - align : right ;
}
# contact - form h3 {
font - size : 18 px ;
color : #074 f83 ;
text - align : left ;
border - bottom : 1 px solid #999999;
margin : 0 0 10 px 0;
padding : 0 0 5 px 0;
}
# contact - form div {
margin : 0 0 10 px 0;
text - align : left ;
}
# contact - form label {
font - size : 14 px ;
vertical - align : middle ;
color : #666666;
}
# contact - form input ,
# contact - form textarea {
display : block ;
border : 1 px solid #999999;
padding : 5 px ;
margin : 4 px 0 0 0;
width : 288 px ;
font - size : 18 px ;
}
# contact - form textarea {
height : 100 px ;
}
# contact - form input [ type = checkbox ] {
display : inline ;
width : auto ;
}
www.facebook.com/k19treinamentos
63
CSS
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
64
Linhas 2 a 3: Definimos para todos os elementos, atravs das propriedades margin e padding,
as margens externas e internas, respectivamente.
Linha 13: Definimos, atravs da propriedade margin, a margem externa do contedo do blog.
As margens da esquerda e direita sero calculadas automaticamente.
Linhas 16 a 19: Definimos, atravs das propriedades border-bottom e margin, a borda inferior
do cabealho, assim como suas margens externas.
Linha 26: Definimos, atravs da propriedade margin, as margens externas da imagem do logo.
Linha 32: Definimos, atravs da propriedade display, a forma de exibio do menu principal.
Linhas 35 a 38: Definimos, atravs das propriedades display e margin, a forma de exibio e
as margens externas dos itens menu principal.
Linhas 41 a 42: Definimos, atravs das propriedades display e padding, a forma de exibio e
as margens internas dos links do menu principal.
Linhas 47 a 48: Definimos, atravs das propriedades border-top-left e border-top-right,
bordas arredondadas na parte superior esquerda e direita, respectivamente dos links do menu
principal (propriedades do CSS3).
Linha 57: Definimos, atravs da propriedade display, a forma de exibio do contedo principal.
Linha 65: Definimos, atravs da propriedade padding, a margem interna dos cabealhos nvel
1 do contedo principal.
Linha 72: Definimos, atravs da propriedade padding, a margem interna do contedo do blog.
Linha 76: Definimos, atravs da propriedade margin, a margem externa dos pargrafos filhos
do contedo do blog.
Linha 80: Definimos, atravs da propriedade border-collapse, a maneira como as bordas
adjacentes das tabelas filhas do contedo do blog devem se comportar.
Linhas 81 a 82: Definimos, atravs das propriedades border e margin, a borda e margem externa das tabelas filhas do contedo do blog.
64
www.k19.com.br
65
CSS
Linhas 86 a 90: Definimos, atravs das propriedades border e padding, a borda e margem
interna dos ttulos das colunas e clulas das tabelas filhas do contedo do blog.
Linha 108: Definimos, atravs da propriedade margin, as margens externas das listas do contedo do blog.
Linhas 112 a 113: Definimos, atravs das propriedades display e margin, a forma de exibio
e as margens externas do contedo lateral.
Linhas 117 a 120: Definimos, atravs das propriedades display e margin, a forma de exibio
e as margens externas da publicidade.
Linhas 130 a 132: Definimos, atravs das propriedades border-bottom, margin e padding, a
borda inferior e as margens externa e interna dos cabealhos nvel 3 do formulrio de contato.
Linha 136: Definimos, atravs da propriedade margin, a margem externa dos elementos DIV
do formulrio de contato.
Linhas 148 a 151: Definimos, atravs das propriedades display, border, margin e padding, a
forma de exibio, as bordas e as margens externas e internas dos elementos input e textarea
do formulrio de contato.
Linha 161: Definimos, atravs da propriedade display, a forma de exibio dos checkboxes
do formulrio de contato.
Linhas 166 a 169: Definimos, atravs das propriedades display, border, margin e padding, a
forma de exibio, as bordas e as margens externas e internas do boto de envio do formulrio
de contato.
Linhas 178 a 180: Definimos, atravs das propriedades border-top, margin e padding, a borda
superior e as margens externa e interna do rodap.
Posicionando elementos
Para posicionar um elemento dentro de um documento HTML o CSS possui os seguintes atributos:
position - define o tipo de posicionamento.
top - define a distncia do topo do elemento em relao a outro elemento ou em relao a
janela.
left - define a distncia do lado esquerdo do elemento em relao a outro elemento ou em
relao a janela.
bottom - define a distncia da base do elemento em relao a outro elemento ou em relao a
janela.
right - define a distncia do lado direito do elemento em relao a outro elemento ou em relao a janela.
Ao posicionarmos um elemento utilizando os atributos acima devemos nos lembrar que o sistema de coordenadas dentro de um documento HTML possui a coordenada (0,0) no canto superior esquerdo de um elemento ou da janela. Tambm devemos nos lembrar que se definirmos uma
distncia para o atributo left, no devemos utilizar o atributo right. A mesma ideia vale para os
atributos top e bottom.
www.facebook.com/k19treinamentos
65
CSS
66
Posicionamento esttico
Este tipo de posicionamento, em geral, no precisa ser definido, pois o tipo de posicionamento
padro de todos os elementos. O posicionamento esttico definido atravs do atributo position
com o valor static e no afetado pelos atributos top, bottom, left e right.
Posicionamento fixo
Um elemento com posicionamento fixo posicionado em relao janela do navegador. definido atravs do atributo position com o valor fixed e sua posio definida pelos atributos top,
bottom, left e/ou right.
Todos os elementos posicionados fixamente no mudam de posio mesmo quando ocorrer uma
rolagem vertical ou horizontal.
Posicionamento relativo
Um elemento com posicionamento relativo posicionado em relao sua posio original.
definido atravs do atributo position com o valor relative e sua posio definida pelos atributos
top, bottom, left e/ou right.
Posicionamento absoluto
Um elemento com posicionamento absoluto posicionado em relao um elemento ancestral ou janela do navegador. definido atravs do atributo position com o valor absolute e sua
posio definida pelos atributos top, bottom, left e/ou right.
Quando nenhum dos ancestrais de um elemento posicionado absolutamente define um tipo de
posicionamento, o posicionamento absoluto ocorre em relao janela do navegador. Para que ele
ocorra em relao a um ancestral, o elemento ancestral deve definir um posicionamento relativo, por
exemplo.
Exerccios de Fixao
10
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
66
Continuando o exerccio anterior, altere o arquivo blog.css conforme as linhas destacadas abaixo:
* {
margin : 0;
padding : 0;
font - family : arial , sans - serif ;
}
body {
white - space : nowrap ;
}
# blog {
width : 980 px ;
margin : 0 auto ;
}
# header {
position : relative ;
border - bottom : 1 px solid #074 f83 ;
www.k19.com.br
67
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
CSS
margin : 0 0 20 px 0;
}
# logo - link {
text - decoration : none ;
}
# logo - link img {
margin : 20 px 40 px 20 px 20 px ;
vertical - align : bottom ;
}
# main - menu {
list - style : none ;
display : inline - block ;
}
# main - menu li {
display : inline - block ;
margin : 0 10 px 0 0;
}
# main - menu li a {
display : block ;
padding : 8 px 10 px 5 px 10 px ;
background : # cecece ;
color : #333333;
text - decoration : none ;
border - top - left - radius : 5 px ; /* CSS3 */
border - top - right - radius : 5 px ; /* CSS3 */
}
# main - menu li a . selected {
background : #074 f83 ;
color : # ffffff ;
}
# main - content {
display : inline - block ;
vertical - align : top ;
width : 660 px ;
color : #666666;
white - space : normal ;
}
# main - content h1 {
padding : 10 px ;
background : #074 f83 ;
color : # ffffff ;
font - size : 24 px ;
}
# blog - content {
padding : 20 px ;
}
# blog - content > p {
margin : 0 0 20 px 0;
}
# blog - content > table {
border - collapse : collapse ;
border : 1 px solid #5 f5f5f ;
margin : 0 0 20 px 0;
width : 100%;
}
# blog - content > table th ,
# blog - content > table td {
www.facebook.com/k19treinamentos
67
CSS
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
68
68
border : 1 px solid #5 f5f5f ;
padding : 10 px 5 px ;
}
# blog - content > table th {
color : # ffffff ;
background : #5 f5f5f ;
}
# blog - content > table td {
background : # dddddd ;
color : #333333;
}
# blog - content > table td . first - col {
background : # a9a9a9 ;
}
# blog - content ul {
list - style - image : url ( list - bullet . png ) ;
margin : 0 0 0 30 px ;
}
# side - content {
display : inline - block ;
margin : 0 0 0 20 px ;
vertical - align : top ;
}
# ad {
display : block ;
margin : 0 0 20 px 0;
}
# contact - form {
text - align : right ;
}
# contact - form h3 {
font - size : 18 px ;
color : #074 f83 ;
text - align : left ;
border - bottom : 1 px solid #999999;
margin : 0 0 10 px 0;
padding : 0 0 5 px 0;
}
# contact - form div {
margin : 0 0 10 px 0;
text - align : left ;
}
# contact - form label {
font - size : 14 px ;
vertical - align : middle ;
color : #666666;
}
# contact - form input ,
# contact - form textarea {
display : block ;
border : 1 px solid #999999;
padding : 5 px ;
margin : 4 px 0 0 0;
width : 288 px ;
font - size : 18 px ;
}
# contact - form textarea {
height : 100 px ;
www.k19.com.br
69
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
CSS
}
# contact - form input [ type = checkbox ] {
display : inline ;
width : auto ;
}
# contact - form input [ type = submit ] {
margin : 10 px 0 0 0;
border : none ;
padding : 10 px 20 px ;
display : inline ;
background : #074 f83 ;
color : # ffffff ;
text - transform : uppercase ;
font - size : 14 px ;
width : auto ;
}
# footer {
margin : 40 px 0 0 0;
padding : 10 px 0 0 0;
border - top : 1 px solid #999999;
font - size : 12 px ;
color : #999999;
text - align : center ;
}
# login - area {
position : absolute ;
top : 0 px ;
right : 0 px ;
padding : 4 px 0;
}
# login - area a {
color : #074 F83 ;
}
Cdigo CSS 3.26: blog.css
Desafios
1
Observe a pgina inicial da K19. Utilizando todos os seus conhecimentos em CSS, faa uma
pgina que siga a mesma estrutura da pgina inicial da K19. No se preocupe com as cores e imagens,
no lugar das imagens da K19 voc pode usar uma imagem qualquer e escolher livremente as cores
que desejar.
www.facebook.com/k19treinamentos
69
CSS
70
70
www.k19.com.br
CAPTULO
J AVA S CRIPT
Para que possamos criar uma pgina que possua um comportamento e oferecer aos nossos usurios um site mais interativo e dinmico, com certeza trabalharemos com a linguagem JavaScript.
Um cdigo JavaScript pode ser inserido em um documento HTML de duas formas: colocando o
cdigo JavaScript como filho de um elemento com a tag script ou utilizando o atributo src de um
elemento com a tag script no qual devemos passar o caminho relativo ou absoluto para um arquivo
que contenha o cdigo JavaScript.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var
var
var
var
var
numero = 0;
numeroComCasasDecimais = 1.405;
texto = Varivel com um texto ;
outroTexto = " Outra varivel com um texto " ;
valorBooleano = true ;
Cdigo Javascript 4.1: Declarando e inicializando variveis em JavaScript
Operadores
Para manipular os valores das variveis de um programa, devemos utilizar os operadores oferecidos pela linguagem de programao adotada. A linguagem JavaScript possui diversos operadores
e os principais so categorizados da seguinte forma:
Aritmtico (+, -, *, /, %)
www.facebook.com/k19treinamentos
71
J AVA S CRIPT
72
Aritmtico
Os operadores aritmticos funcionam de forma muito semelhante aos operadores na matemtica. Os operadores aritmticos so:
Soma +
Subtrao Multiplicao *
Diviso /
Mdulo %
1
2
3
4
5
6
7
8
var
var
var
var
var
x =
x =
x =
umMaisUm = 1 + 1;
tresVezesDois = 3 * 2;
quatroDivididoPor2 = 4 / 2;
seisModuloCinco = 6 % 5;
x = 7;
x + 1 * 2;
x - 4;
x / (6 - 2 + (3*5) /(16 -1) ) ;
//
//
//
//
umMaisUm = 2
tresVezesDois = 6
quatroDivididoPor2 = 2
seisModuloCinco = 1
// x = 9
// x = 10
// x = 2
Importante
O mdulo de um nmero x , na matemtica, o valor numrico de x desconsiderando
o seu sinal (valor absoluto). Na matemtica expressamos o mdulo da seguinte forma:
| 2| = 2.
Em linguagens de programao, o mdulo de um nmero o resto da diviso desse nmero por
outro. No exemplo acima, o resto da diviso de 6 por 5 igual a 1. Alm disso, lemos a expresso
6%5 da seguinte forma: seis mdulo cinco.
Importante
As operaes aritmticas em JavaScript obedecem as mesmas regras da matemtica
com relao precedncia dos operadores e parnteses. Portanto, as operaes so
resolvidas a partir dos parnteses mais internos at os mais externos, primeiro resolvemos as
multiplicaes, divises e os mdulos. Em seguida, resolvemos as adies e subtraes.
Atribuio
Nas sees anteriores, j vimos um dos operadores de atribuio, o operador = (igual). Os operadores de atribuio so:
Simples =
Incremental +=
72
www.k19.com.br
73
J AVA S CRIPT
Decremental -=
Multiplicativa *=
Divisria /=
Modular %=
1
2
3
4
5
6
var valor = 1;
valor += 2;
valor -= 1;
valor *= 6;
valor /= 3;
valor %= 3;
//
//
//
//
//
//
valor
valor
valor
valor
valor
valor
=
=
=
=
=
=
1
3
2
12
4
1
var valor = 1;
valor = valor +
valor = valor valor = valor *
valor = valor /
valor = valor %
//
//
//
//
//
//
2;
1;
6;
3;
3;
valor
valor
valor
valor
valor
valor
=
=
=
=
=
=
1
3
2
12
4
1
Como podemos observar, os operadores de atribuio, com exceo do simples (=), reduzem a
quantidade de cdigo escrito. Podemos dizer que esses operadores funcionam como atalhos para
as operaes que utilizam os operadores aritmticos.
Relacional
Muitas vezes precisamos determinar a relao entre uma varivel ou valor e outra outra varivel
ou valor. Nessas situaes, utilizamos os operadores relacionais. As operaes realizadas com os
operadores relacionais devolvem valores booleanos. Os operadores relacionais so:
Igualdade ==
Diferena !=
Menor <
Menor ou igual <=
Maior >
Maior ou igual >=
1
2
3
4
5
6
7
8
var
var
t =
t =
t =
t =
t =
t =
valor = 2;
t = false ;
( valor == 2) ;
( valor != 2) ;
( valor < 2) ;
( valor <= 2) ;
( valor > 1) ;
( valor >= 1) ;
//
//
//
//
//
//
t
t
t
t
t
t
=
=
=
=
=
=
true
false
false
true
true
true
www.facebook.com/k19treinamentos
73
J AVA S CRIPT
74
Lgico
A linguagem JavaScript permite verificar duas ou mais condies atravs de operadores lgicos.
Os operadores lgicos devolvem valores booleanos. Os operadores lgicos so:
E lgico &&
OU lgico ||
1
2
3
4
5
6
7
&&
&&
||
||
&&
valor
valor
valor
valor
valor
> 20;
> 30;
> 20;
< 20;
== 30;
//
//
//
//
//
teste
teste
teste
teste
teste
=
=
=
=
=
true
false
true
false
true
Controle de fluxo
if e else
O comportamento de uma aplicao pode ser influenciado por valores definidos pelos usurios.
Por exemplo, considere um sistema de cadastro de produtos. Se um usurio tenta adicionar um
produto com preo negativo, a aplicao no deve cadastrar esse produto. Caso contrrio, se o preo
no for negativo, o cadastro pode ser realizado normalmente.
Outro exemplo, quando o pagamento de um boleto realizado em uma agncia bancria, o sistema do banco deve verificar a data de vencimento do boleto para aplicar ou no uma multa por
atraso.
Para verificar uma determinada condio e decidir qual bloco de instrues deve ser executado,
devemos aplicar o comando if.
1
2
3
4
5
if ( preco < 0) {
alert ( O preo do produto no pode ser negativo ) ;
} else {
alert ( Produto cadastrado com sucesso ) ;
}
Cdigo Javascript 4.7: Comando if
O comando if permite que valores booleanos sejam testados. Se o valor passado como parmetro para o comando if for true, o bloco do if executado. Caso contrrio, o bloco do else
executado.
O parmetro passado para o comando if deve ser um valor booleano, caso contrrio o cdigo
no compila. O comando else e o seu bloco so opcionais.
while
Em alguns casos, necessrio repetir um trecho de cdigo diversas vezes. Suponha que seja necessrio imprimir 10 vezes na pgina a mensagem: Bom Dia. Isso poderia ser realizado colocando
74
www.k19.com.br
75
J AVA S CRIPT
Se ao invs de 10 vezes fosse necessrio imprimir 100 vezes, j seriam 100 linhas iguais no cdigo
fonte. muito trabalhoso utilizar essa abordagem para solucionar esse problema.
Atravs do comando while, possvel definir quantas vezes um determinado trecho de cdigo
deve ser executado pelo computador.
1
2
3
4
5
6
var contador = 0;
while ( contador < 100) {
document . writeln ( Bom Dia ) ;
contador ++;
}
Cdigo Javascript 4.9: Comando while
A varivel contador indica o nmero de vezes que a mensagem Bom Dia foi impressa na tela.
O operador ++ incrementa a varivel contador a cada rodada.
O parmetro do comando while tem que ser um valor booleano. Caso contrrio, ocorrer um
erro na execuo do script.
for
O comando for anlogo ao while. A diferena entre esses dois comandos que o for recebe
trs argumentos.
1
2
3
Exerccios de Fixao
Crie uma pasta chamada javascript na sua pasta de exerccios. Crie uma pgina HTML vinculada
a um arquivo JavaScript, que imprima na pgina o seu nome 100 vezes. Salve os documentos na pasta
javascript e em seguida abra o arquivo HTML no navegador.
1
1
2
3
4
5
6
7
8
www.facebook.com/k19treinamentos
75
J AVA S CRIPT
1
2
3
4
76
2 Crie uma pgina HTML vinculada a um arquivo JavaScript que imprima na pgina os nmeros de
1 at 100. Salve esses arquivos na pasta javascript e em seguida abra o arquivo HTML no navegador.
1
2
3
4
5
6
7
8
1
2
3
4
Crie um documento HTML vinculado a um documento JavaScript que percorra todos os nmeros de 1 at 100. Para os nmeros mpares, deve ser impresso um *, e para os nmeros pares, deve
ser impresso dois **. Veja o exemplo abaixo:
3
*
**
*
**
*
**
Salve os documentos na pasta javascript e em seguida abra o arquivo html no navegador.
1
2
3
4
5
6
7
8
1
2
76
www.k19.com.br
77
3
4
5
6
7
8
9
10
J AVA S CRIPT
if ( resto == 1) {
document . writeln ( * ) ;
} else {
document . writeln ( ** )
}
document . writeln ( < br / > )
}
Cdigo Javascript 4.13: imprime-padrao-1.js
4 Crie um documento HTML vinculado a um documento JavaScript que percorra todos os nmero
de 1 at 100. Para os nmeros mltiplos de 4, imprima a palavra PI, e para os outros, imprima o
prprio nmero. Veja o exemplo abaixo:
1
2
3
PI
5
6
7
PI
1
2
3
4
5
6
7
8
9
10
Exerccios Complementares
www.facebook.com/k19treinamentos
77
J AVA S CRIPT
78
Crie um documento HTML vinculado a um documento JavaScript que percorra todos os nmeros de 1 at 60. Para os nmeros multiplo de, 3 imprima "**"; Para o restante imprima "*".
3
Crie um documento HTML vinculado a um documento JavaScript que imprima todos os nmeros de 1 at 80 e imprimir * no lugar de todos os nmeros mltiplos de 4 e 7.
4
*
**
***
****
*****
6
Crie um documento HTML vinculado a um documento JavaScript que imprima na tela vrios
tringulos de *. Observe o padro abaixo.
*
**
***
****
*
**
***
****
www.k19.com.br
79
J AVA S CRIPT
Funes JavaScript
Uma funo JavaScript uma sequncia de instrues JavaScript que sero executadas quando
voc cham-la atravs do seu nome.
function imprimeOlaMundo () {
document . writeln ( Ol Mundo ! ) ;
document . writeln ( < br / > ) ;
}
Cdigo Javascript 4.22: Definindo uma funo
imprimeOlaMundo () ;
Cdigo Javascript 4.25: Chamando uma funo
www.facebook.com/k19treinamentos
79
J AVA S CRIPT
80
Objetos JavaScript
Qualquer desenvolvedor acostumado com linguagens orientadas a objetos como Java e C# pode
estranhar um pouco a forma como trabalhamos com objetos em JavaScript. Apesar do JavaScript
ser uma linguagem de script baseada em prottipos, ela oferece suporte programao orientada a
objetos. Portanto, muitos dos conhecimentos que um desenvolvedor tenha adquirido com Java ou
C# com relao a orientao a objetos pode ser reaproveitado ao se programar em JavaScript.
Criando um objeto
Existe mais de uma maneira de se criar um objeto em JavaScript. A maneira mais simples podemos acompanhar no cdigo abaixo:
1
2
3
4
5
6
7
8
9
10
11
12
13
Outra maneira de se criar um objeto utilizando a notao literal mais conhecida como JSON
(JavaScript Object Notation):
1
2
3
4
5
80
var contaBancaria = {
numero : 1234 ,
saldo : 1000 ,
deposita : function ( valor ) {
if ( valor > 0) {
www.k19.com.br
81
6
7
8
9
10
11
12
J AVA S CRIPT
this . saldo += valor ;
}
else {
alert ( Valor invlido ! ) ;
}
}
}
Cdigo Javascript 4.29: Criando um objeto utilizando a notao literal
Arrays
Os arrays em JavaScript so objetos e, portanto, possuem atributos e mtodos para nos ajudar na
manipulao de seus dados.
Declarando um array
Podemos declarar um array de trs maneiras: atravs do prottipo Array sem parmetros, atravs do prottipo Array com parmetros e atravs da forma literal.
1
2
3
4
5
6
7
8
Mtodos do array
Um array possui diversos mtodos para nos auxiliar nas tarefas mais comuns quando trabalhamos com arrays. Os m todos so:
concat() - concatena dois ou mais arrays e retorna uma cpia ro** resultado.
indexOf() - procura por um objeto dentro do array e retorna o ndice caso o encontre.
join() - concatena todos os elementos de um array em uma string.
lastIndexOf() - procura, de trs para frente, por um objeto dentro array e retorna o ndice caso
o encontre.
pop() - remove o ltimo objeto de um array e retorna o objeto removido.
push() - adiciona um objeto no final do array e retorno o novo tamanho do array.
reverse() - inverte a ordem dos objetos de um array.
shift() - remove o primeiro objeto de um array e retorna o objeto removido.
slice() - seleciona parte de um array e retorna um copia da parte selecionada.
sort() - ordena os objetos de um array.
splice() - adiciona e/ou remove objetos de um array.
toString() - converte um array em uma string e retorna o resultado.
www.facebook.com/k19treinamentos
81
J AVA S CRIPT
82
Exerccios de Fixao
5
Crie um documento HTML vinculado a um documento JavaScript que armazene 10 nmeros
inteiros em um array. Preencha todas as posies do array com valores sequenciais e em seguida
imprima-os na tela. Em seguida, escolha duas posies aleatoriamente e troque os valores de uma
posio pelo da outra. Repita essa operao 10 vezes. Ao final, imprima o array novamente.
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
i
=
=
=
Crie um documento HTML vinculado a um documento JavaScript que armazene 10 nmeros inteiros em um array. Preencha todas as posies do array com valores aleatrios e em seguida
imprima-os na tela. Aps imprimir o array, ordene o array do menor valor para o maior. Ao final,
imprima o array ordenado.
6
82
www.k19.com.br
83
1
2
3
4
5
6
7
8
J AVA S CRIPT
< html >
< head >
< title > Ordena do nmero menor para o maior </ title >
< script type = " text / javascript " src = " ordena . js " > </ script >
</ head >
< body >
</ body >
</ html >
Cdigo HTML 4.15: ordena.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Exerccios Complementares
Crie um documento HTML vinculado a um documento JavaScript que crie um array com 10
nmeros sequenciais do tipo int. Feito isso, escolha duas posies deste array e aleatoriamente
troque os valores dessas duas posies. Repita essa troca 15 vezes. No final, imprima esse array.
8
www.facebook.com/k19treinamentos
83
J AVA S CRIPT
84
84
www.k19.com.br
APNDICE
J AVASCRIPT AVANADO
Objetos
Um objeto um conjunto de propriedades. Toda propriedade possui nome e valor. O nome de
uma propriedade pode ser qualquer sequncia de caracteres. O valor de uma propriedade pode ser
qualquer valor exceto undefined. Podemos adicionar uma nova propriedade a um objeto que j
existe. Um objeto pode herdar propriedades de outro objeto utilizando a ideia de prototype.
Criando Objetos
Um objeto pode ser criado de forma literal. Veja o exemplo a seguir.
1
2
Um objeto pode se relacionar com outros objetos atravs de propriedades. Observe o cdigo
abaixo.
1
2
3
4
5
6
var formacao_java = { sigla : " K10 " , nome : " Formao Desenvolvedor Java " ,
cursos : [
{ sigla : " K11 " , nome : " Orientao a Objetos em Java " } ,
{ sigla : " K12 " , nome : " Desenvolvimento Web com JSF2 e JPA2 " } ,
]
};
Cdigo Javascript A.2: Criando um objeto associado a outro
var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
console . log ( curso . sigla ) ;
console . log ( curso [ " sigla " ]) ;
var sigla = " sigla " ;
console . log ( curso [ sigla ]) ;
Cdigo Javascript A.3: Recuperando o valor de uma propriedade
85
J AVASCRIPT AVANADO
1
2
3
4
5
6
7
86
var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
curso . sigla = " K12 " ;
curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " ;
console . log ( curso . sigla ) ;
console . log ( curso . nome ) ;
Cdigo Javascript A.4: Alterando o valor de uma propriedade
Referncias
Os objetos so acessados atravs de referncias
1
2
3
4
5
6
7
8
9
10
11
12
13
var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
// copiando uma referncia
var x = curso ;
x . sigla = " K12 " ;
x . nome = " Desenvolvimento Web com JSF2 e JPA2 " ;
// imprime K12
console . log ( curso . sigla ) ;
// imprime Desenvolvimento Web com JSF2 e JPA2
console . log ( curso . nome ) ;
Cdigo Javascript A.5: Referncia
Prottipos
Podemos criar um objeto baseado em outro objeto existente (prottipo). Para isso, podemos
utilizar a propriedade especial __proto__. Observe o cdigo abaixo.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Tambm podemos utilizar o mtodo create de Object para criar objetos baseados em objetos
existentes. Veja o exemplo abaixo.
1
2
3
4
5
6
7
86
www.k19.com.br
87
8
9
10
11
12
13
14
J AVASCRIPT AVANADO
novo_curso = Object . create ( curso ) ;
// imprime K11
console . log ( novo_curso . sigla ) ;
// imprime Orientao a Objetos em Java
console . log ( novo_curso . nome ) ;
Cdigo Javascript A.7: Criando objetos com Object.create()
Se uma propriedade for adicionada a um objeto, ela tambm ser adicionada a todos os objetos
que o utilizam como prottipo.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
var novo_curso = Object . create ( curso ) ;
curso . carga_horaria = 36;
// imprime K11
console . log ( novo_curso . sigla ) ;
// imprime Orientao a Objetos em Java
console . log ( novo_curso . nome ) ;
// imprime 36
console . log ( novo_curso . carga_horaria ) ;
Cdigo Javascript A.8: Adicionando uma propriedade em um objeto que utilizado como prottipo
Por outro lado, se uma propriedade for adicionada a um objeto, ela no ser adicionada no prottipo desse objeto.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
var novo_curso = Object . create ( curso ) ;
novo_curso . carga_horaria = 36;
// imprime K11
console . log ( curso . sigla ) ;
// imprime Orientao a Objetos em Java
console . log ( curso . nome ) ;
// imprime undefined
console . log ( curso . carga_horaria ) ;
Cdigo Javascript A.9: Adicionando uma propriedade em um objeto
Se o valor de uma propriedade de um objeto for modificado, os objetos que o utilizam como
prottipo podem ser afetados.
1
2
3
4
5
6
7
8
9
10
11
var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
var novo_curso = Object . create ( curso ) ;
curso . sigla = " K12 " ;
curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " ;
// imprime K12
console . log ( novo_curso . sigla ) ;
// imprime Desenvolvimento Web com JSF2 e JPA2
www.facebook.com/k19treinamentos
87
J AVASCRIPT AVANADO
12
88
Por outro lado, alteraes nos valores das propriedades de um objeto no afetam o prottipo
desse objeto.
1
2
3
4
5
6
7
8
9
10
11
12
var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
var novo_curso = Object . create ( curso ) ;
novo_curso . sigla = " K12 " ;
novo_curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " ;
// imprime K11
console . log ( curso . sigla ) ;
// imprime Orientao a Objetos em Java
console . log ( curso . nome ) ;
Cdigo Javascript A.11: Modificando o valor de uma propriedade de um objeto
Considere um objeto que foi construdo a partir de um prottipo. Se o valor de uma propriedade
herdada do prottipo for alterada nesse objeto, ela se torna independente da propriedade no prottipo. Dessa forma, alteraes no valor dessa propriedade no prottipo no afetam mais o valor dela
no objeto gerado a partir do prottipo.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
var novo_curso = Object . create ( curso ) ;
novo_curso . sigla = " K12 " ;
novo_curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " ;
curso . sigla = " K21 " ;
curso . nome = " Persistncia com JPA2 e Hibernate " ;
// imprime K12
console . log ( novo_curso . sigla ) ;
// imprime Desenvolvimento Web com JSF2 e JPA2
console . log ( novo_curso . nome ) ;
Cdigo Javascript A.12: Sobrescrevendo uma propriedade
var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
// imprime K11
console . log ( curso . sigla ) ;
delete curso . sigla ;
// imprime undefined
console . log ( curso . sigla ) ;
Cdigo Javascript A.13: Removendo uma propriedade
88
www.k19.com.br
89
J AVASCRIPT AVANADO
var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
// imprime true
console . log ( " sigla " in curso ) ;
// imprime false
console . log ( " carga_horaria " in curso ) ;
Cdigo Javascript A.14: Verificando a existncia de uma propriedade
Exerccios de Fixao
Aps o console ter sido habilitado, podemos executar o cdigo Javascript conforme a figura abaixo.
www.facebook.com/k19treinamentos
89
J AVASCRIPT AVANADO
90
Crie objetos com propriedades chamadas sigla e nome. Imprima o valor dessas propriedades
atravs do console.log do Firebug.
2
1
2
3
4
5
6
7
var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
console . log ( curso . sigla ) ;
console . log ( curso . nome ) ;
var curso2 = { sigla : " K12 " , nome : " Desenvolvimento Web com JSF2 e JPA2 " };
console . log ( curso2 . sigla ) ;
console . log ( curso2 . nome ) ;
Cdigo Javascript A.15: Criando dois objetos
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
var novo_curso = Object . create ( curso ) ;
// imprime K11
console . log ( novo_curso . sigla ) ;
// imprime Orientao a Objetos em Java
console . log ( novo_curso . nome ) ;
Cdigo Javascript A.17: Prottipo
Adicione uma propriedade em um objeto utilizado como prottipo e verifique que essa propriedade ser adicionada nos objetos criados a partir desse prottipo.
5
1
2
3
4
5
6
7
90
var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
var novo_curso = Object . create ( curso ) ;
curso . carga_horaria = 36;
// imprime K11
www.k19.com.br
91
8
9
10
11
12
13
14
J AVASCRIPT AVANADO
console . log ( novo_curso . sigla ) ;
// imprime Orientao a Objetos em Java
console . log ( novo_curso . nome ) ;
// imprime 36
console . log ( novo_curso . carga_horaria ) ;
Cdigo Javascript A.18: Prottipo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Adicione uma propriedade em um objeto e verifique que o prottipo desse objeto no afetado.
var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
var novo_curso = Object . create ( curso ) ;
novo_curso . carga_horaria = 36;
// imprime K11
console . log ( curso . sigla ) ;
// imprime Orientao a Objetos em Java
console . log ( curso . nome ) ;
// imprime undefined
console . log ( curso . carga_horaria ) ;
Cdigo Javascript A.19: Prottipo
Altere o valor de uma propriedade de um objeto utilizado como prottipo e verifique que essa
alterao afetar os objetos criados a partir desse prottipo.
7
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
var novo_curso = Object . create ( curso ) ;
// imprime K11
console . log ( novo_curso . sigla ) ;
// imprime Orientao a Objetos em Java
console . log ( novo_curso . nome ) ;
curso . sigla = " K12 " ;
curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " ;
// imprime K12
console . log ( novo_curso . sigla ) ;
// imprime Desenvolvimento Web com JSF2 e JPA2
console . log ( novo_curso . nome ) ;
Cdigo Javascript A.20: Prottipo
8
Reescreva em um objeto as propriedades herdadas de um prottipo e verifique que alteraes
nos valores dessas propriedades no prottipo no afetam mais os valores delas nesse objeto.
1
2
3
4
var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
var novo_curso = Object . create ( curso ) ;
www.facebook.com/k19treinamentos
91
J AVASCRIPT AVANADO
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
92
Exerccios Complementares
Crie objetos para as formaes da K19 com as propriedades sigla e nome da formao. Atravs
do console .log do FireBug, depois imprima o valor.
1
Crie um objeto com algumas propriedades. Dentro desse objeto crie um outro objeto sendo ele
um prottipo. Crie tambm propriedades nesse novo objeto. Imprima todas as propriedades criadas
e faa alteraes nos valores das propriedades no prottipo para que afetem os valores delas.
3
Funes
As funes em JavaScript so objetos. Voc pode armazen-las em variveis, arrays e outros objetos. Elas podem ser passadas como argumento ou devolvidas por outra funo. Veja o exemplo
abaixo.
1
2
3
92
www.k19.com.br
93
J AVASCRIPT AVANADO
Mtodo
Quando uma funo faz parte de um objeto, ela chamada de mtodo. Para executar um mtodo,
devemos utilizar a referncia de um objeto e passar os parmetros necessrios. Observe o cdigo
abaixo.
1
2
3
4
5
6
7
8
9
var conta = {
saldo : 0 ,
deposita : function ( valor ) {
this . saldo += valor ;
}
}
conta . deposita (100) ;
console . log ( conta . saldo ) ;
Cdigo Javascript A.27: Mtodo
Apply
Uma funo pode ser associada momentaneamente a um objeto e executada atravs do mtodo
apply.
1
2
3
4
5
6
7
8
9
10
Arguments
Os argumentos passados na chamada de uma funo podem ser recuperados atravs do array
Arguments. Inclusive, esse array permite que os argumentos excedentes sejam acessados.
1
2
3
4
5
6
7
8
9
10
11
12
13
Exceptions
Quando um erro identificado no processamento de uma funo, podemos lanar uma exception para avisar que chamou a funo que houve um problema.
www.facebook.com/k19treinamentos
93
J AVASCRIPT AVANADO
1
2
3
4
5
6
7
8
9
10
11
12
13
94
var conta = {
saldo : 0 ,
deposita : function ( valor ) {
if ( valor <= 0) {
throw {
name : " ValorInvalido " ,
message : " Valores menores ou iguais a 0 no podem ser depositados "
}
} else {
this . saldo += valor ;
}
}
}
Cdigo Javascript A.30: Exceptions
Na chamada do mtodo deposita(), podemos capturar um possvel erro com o comando try-catch.
1
2
3
4
5
6
try {
conta . deposita (0) ;
} catch ( e ) {
console . log ( e . name ) ;
console . log ( e . message ) ;
}
Cdigo Javascript A.31: Exceptions
Exerccios de Fixao
Crie uma funo que multiplicar dois nmeros recebidos como parmetro e devolve o resultado.
1
2
3
10
1
2
11
1
2
3
4
5
6
var conta = {
saldo : 0 ,
deposita : function ( valor ) {
this . saldo += valor ;
}
}
Cdigo Javascript A.34: deposita()
94
www.k19.com.br
95
J AVASCRIPT AVANADO
12
1
2
13
Crie uma funo que soma todos os argumentos passados como parmetro.
1
2
3
4
5
6
7
8
9
14
1
2
3
15
1
2
3
4
5
6
7
8
9
10
11
12
13
Altere a lgica do mtodo deposita() para evitar que valores incorretos sejam depositados.
var conta = {
saldo : 0 ,
deposita : function ( valor ) {
if ( valor <= 0) {
throw {
name : " ValorInvalido " ,
message : " Valores menores ou iguais a 0 no podem ser depositados "
}
} else {
this . saldo += valor ;
}
}
}
Cdigo Javascript A.38: Exceptions
16
17
95
J AVASCRIPT AVANADO
1
2
3
4
5
6
96
try {
conta . deposita (0) ;
} catch ( e ) {
console . log ( e . name ) ;
console . log ( e . message ) ;
}
Cdigo Javascript A.40: Capturando excees com try-catch
Exerccios Complementares
Crie uma funo que faa a operao de diviso e aps isso execute a funo divisao().
Crie uma funo para a operao saque em um caixa eletrnico. Fique atento com as excees.
Feito isso, execute o mtodo saque().
5
6
Crie uma funo que multiplique todos os argumentos passados como parmetro. Aps isso,
execute a funo com os seguintes nmeros: 3, 6, 2, 8.
Arrays
Javascript prov um objeto com caractersticas semelhantes a um array. Para criar o objeto array,
podemos cri-lo de forma literal.
1
2
3
4
5
6
7
8
Percorrendo um Array
Para percorrer um array, podemos utilizar o comando for.
1
2
3
4
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " , " K31 " , " K32 " ];
for ( var i = 0; i < cursos . length ; i ++) {
console . log ( cursos [ i ]) ;
}
Cdigo Javascript A.45: for
Adicionando Elementos
Para adicionar um elemento ao final do array, podemos utilizar a propriedade length.
96
www.k19.com.br
97
1
2
3
4
5
J AVASCRIPT AVANADO
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " , " K31 " , " K32 " ];
cursos [ cursos . length ] = " K01 " ;
for ( var i = 0; i < cursos . length ; i ++) {
console . log ( cursos [ i ]) ;
}
Cdigo Javascript A.46: Adicionando elementos ao final do array com length
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " , " K31 " , " K32 " ];
cursos . push ( " K01 " ) ;
for ( var i = 0; i < cursos . length ; i ++) {
console . log ( cursos [ i ]) ;
}
Cdigo Javascript A.47: Adicionando elementos atravs do mtodo push
Removendo Elementos
O mtodo delete() permite remover elementos de um array.
1
2
3
4
5
6
7
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " , " K31 " , " K32 " ];
delete cursos [0];
for ( var i = 0; i < cursos . length ; i ++) {
console . log ( cursos [ i ]) ;
}
Cdigo Javascript A.48: Delete
O mtodo delete() deixa uma posio indefinida no array. Para corrigir este problema, o array
tem o mtodo splice(). O primeiro parmetro desse mtodo indica qual o primeiro elemento que
desejamos remover. O segundo indica quantos elementos deve ser removidos a partir do primeiro.
1
2
3
4
5
6
7
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " , " K31 " , " K32 " ];
cursos . splice (0 ,2) ;
for ( var i = 0; i < cursos . length ; i ++) {
console . log ( cursos [ i ]) ;
}
Cdigo Javascript A.49: Utilizando o mtodo splice()
Concatenando Arrays
O mtodo concat() permite concatenar dois arrays.
1
2
3
4
5
6
7
8
www.facebook.com/k19treinamentos
97
J AVASCRIPT AVANADO
98
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ];
var curso = cursos . pop () ;
console . log ( curso ) ;
Cdigo Javascript A.52: Removendo o ltimo elemento
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ];
cursos . push ( " K23 " ) ;
for ( var i = 0; i < cursos . length ; i ++) {
console . log ( cursos [ i ]) ;
}
Cdigo Javascript A.53: Adicionando um elemento na ltima posio
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ];
cursos . reverse () ;
for ( var i = 0; i < cursos . length ; i ++) {
console . log ( cursos [ i ]) ;
}
Cdigo Javascript A.54: Invertendo os elementos de um array
98
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ];
var curso = cursos . shift () ;
console . log ( " Elemento removido : " + curso ) ;
www.k19.com.br
99
6
7
8
9
J AVASCRIPT AVANADO
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ];
var formacao_java = cursos . slice (0 ,2) ;
for ( var i = 0; i < formacao_java . length ; i ++) {
console . log ( formacao_java [ i ]) ;
}
Cdigo Javascript A.56: Copiando um trecho de um array
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ];
cursos . splice (2 ,3 , " K31 " ," K32 " ) ;
for ( var i = 0; i < cursos . length ; i ++) {
console . log ( cursos [ i ]) ;
}
Cdigo Javascript A.57: Substituindo elementos de uma array
var cursos = [ " K12 " ," K21 " ," K22 " ," K23 " ];
cursos . unshift ( " K11 " ) ;
for ( var i = 0; i < cursos . length ; i ++) {
console . log ( cursos [ i ]) ;
}
Cdigo Javascript A.58: Adicionando um elemento na primeira posio
www.facebook.com/k19treinamentos
99
J AVASCRIPT AVANADO
3
100
var curso = " K12 - Desenvolvimento Web com JSF2 e JPA2 " ;
console . log ( curso . slice (0 ,3) ) ;
Cdigo Javascript A.60: Recuperando um Trecho de uma String
var curso = " K12 - Desenvolvimento Web com JSF2 e JPA2 " ;
var aux = curso . split ( " -" ) ;
console . log ( aux [0]) ;
console . log ( aux [1]) ;
Cdigo Javascript A.61: Dividindo uma string
Exerccios de Fixao
18
1
2
3
4
5
6
7
8
19
1
2
3
4
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " , " K31 " , " K32 " ];
for ( var i = 0; i < cursos . length ; i ++) {
console . log ( cursos [ i ]) ;
}
Cdigo Javascript A.63: for
20
100
www.k19.com.br
101
1
2
3
4
5
6
7
J AVASCRIPT AVANADO
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " , " K31 " , " K32 " ];
cursos [ cursos . length ] = " K01 " ;
for ( var i = 0; i < cursos . length ; i ++) {
console . log ( cursos [ i ]) ;
}
Cdigo Javascript A.64: Adicionando elementos ao final do array com length
21
1
2
3
4
5
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " , " K31 " , " K32 " ];
cursos . push ( " K01 " ) ;
for ( var i = 0; i < cursos . length ; i ++) {
console . log ( cursos [ i ]) ;
}
Cdigo Javascript A.65: Adicionando elementos atravs do mtodo push
22
1
2
3
4
5
6
7
8
23
1
2
3
4
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ];
var curso = cursos . pop () ;
console . log ( curso ) ;
Cdigo Javascript A.67: Removendo o ltimo elemento
24
1
2
3
4
5
6
7
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ];
cursos . push ( " K23 " ) ;
for ( var i = 0; i < cursos . length ; i ++) {
console . log ( cursos [ i ]) ;
}
Cdigo Javascript A.68: Adicionando um elemento na ltima posio
25
101
J AVASCRIPT AVANADO
1
2
3
4
5
6
7
102
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ];
cursos . reverse () ;
for ( var i = 0; i < cursos . length ; i ++) {
console . log ( cursos [ i ]) ;
}
Cdigo Javascript A.69: Invertendo os elementos de um array
26
1
2
3
4
5
6
7
8
9
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ];
var curso = cursos . shift () ;
console . log ( " Elemento removido : " + curso ) ;
for ( var i = 0; i < cursos . length ; i ++) {
console . log ( cursos [ i ]) ;
}
Cdigo Javascript A.70: Removendo o primeiro elemento
27
1
2
3
4
5
6
7
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ];
var formacao_java = cursos . slice (0 ,2) ;
for ( var i = 0; i < formacao_java . length ; i ++) {
console . log ( formacao_java [ i ]) ;
}
Cdigo Javascript A.71: Copiando um trecho de um array
28
1
2
3
4
5
6
7
var cursos = [ " K12 " ," K21 " ," K22 " ," K23 " ];
cursos . unshift ( " K11 " ) ;
for ( var i = 0; i < cursos . length ; i ++) {
console . log ( cursos [ i ]) ;
}
Cdigo Javascript A.72: Adicionando um elemento na primeira posio
29
1
2
3
4
5
var curso = " K12 - Desenvolvimento Web com JSF2 e JPA2 " ;
var aux = curso . split ( " -" ) ;
console . log ( aux [0]) ;
console . log ( aux [1]) ;
Cdigo Javascript A.73: Dividindo uma string
102
www.k19.com.br
103
J AVASCRIPT AVANADO
Exerccios Complementares
Crie dois arrays e imprima no console do Firebug o tamanho deles e tambm imprimir todos os
elementos deste array linha a linha.
7
Crie um array com alguns valores e depois faa com que adicione um elemento no final do array
utilizando a propriedade length.
8
Altere o arquivo do exerccio anterior para adicionar elemento no final do array utilizando o
mtodo push().
9
10
11
Crie um array contendo alguns elementos e remova o ltimo elemento atravs do mtodo
pop().
12
Utilizando o arquivo do exerccio anterior, adicione um elemento no final do array atravs do
mtodo push().
13
Crie um array com alguns elementos e inverta a ordem dos elementos com o mtodo reverse().
Utilizando o arquivo do exerccio anterior, adicione novamente o elemento removido que estava
na primeira posio do array atravs do mtodo unshift().
15
Crie um array contendo alguns elementos e faa uma cpia de um determinado trecho do desse
array utilizando o mtodo slice().
16
17
Crie uma varivel contendo uma string e divida o contedo utilizando o mtodo slipt().
www.facebook.com/k19treinamentos
103
J AVASCRIPT AVANADO
104
104
www.k19.com.br
APNDICE
J Q UERY
Introduo
jQuery uma biblioteca de funes JavaScript. Ela foi desenvolvida para simplificar e diminuir a
quantidade de cdigo JavaScript.
As principais funcionalidades da biblioteca JavaScript jQuery so:
Caso voc no queira fazer o download do arquivo js do jQuery, possvel utilizar a url de alguma empresa que hospede o arquivo jQuery e permita o uso pblico. Empresas como o Google e
Microsoft proveem endereos para a utilizao da biblioteca jQuery.
1
2
3
4
www.facebook.com/k19treinamentos
105
J Q UERY
1
2
106
3
4
Sintaxe
A sintaxe da biblioteca jQuery permite facilmente selecionar elementos HTML e executar alguma
ao sobre eles.
A sintaxe bsica para executar uma ao sobre determinados elementos : $(seletor).acao().
O smbolo $ um mtodo de fabricao para criar o objeto jQuery;
O (seletor) serve para consultar e encontrar os elementos HTML;
A acao() define a operao jQuery que ser executada nos elementos.
Mais Sobre
O mtodo de fabricao um padro de projeto de criao.
Para saber
mais sobre padres de projeto, confira a apostila de Design Patterns da
K19 atravs do endereo http://www.k19.com.br/downloads/apostilas/java/
k19-k51-design-patterns-em-java.
Exemplos:
1
2
3
4
5
6
7
Seletores
Os seletores do jQuery permitem manipular um conjunto de elementos ou um apenas elemento
HTML.
O jQuery suporta os seletores CSS existentes mais os seus prprios seletores. Para conferir os
seletores CSS existentes, acesse: http://www.w3.org/community/webed/wiki/CSS/Selectors.
Para selecionar um conjunto ou apenas um elemento HTML, a sintaxe utilizada contm o prefixo
www.k19.com.br
107
J Q UERY
Exemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Exerccios de Fixao
1
2
3
4
5
6
7
8
9
10
11
12
www.facebook.com/k19treinamentos
107
J Q UERY
13
108
Altere o arquivo seletores.html para que os campos cuja classe curso tenha o valor igual a
K19.
4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Altere o exerccio anterior, para selecionar os elementos cujo atributo name comece com a palavra formacao seguida de trao (-).
5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14
108
www.k19.com.br
109
J Q UERY
Exerccios Complementares
Crie um outro arquivo HTML chamado seletores-2.html na pasta seletores. Utilize a biblioteca JavaScript JQuery e adicione no mnimo 5 nomes com 5 classes.
1
Altere o arquivo seletores-2.html para que os campos cuja classe "Gerente"mude para um
valor igual a "Instrutor da K19".
2
Altere o arquivo seletores-2.html para selecionar os elementos cujo atributo name comece
com vogais.
3
4
Altere o arquivo seletores-2.html para selecionar todos os elementos <input> e atribua o
valor "K19".
Eventos
Os eventos so mtodos que so chamados quando o usurio interage com o navegador.
Para registrar os eventos, podemos utilizar os seletores do jQuery visto na seo anterior.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
No exemplo acima, registramos todos os elementos <li> com o evento de clique. Quando o usurio clicar no elemento <li>, devemos definir uma funo que ser chamada, a esta funo damos o
nome de funo de callback.
1
www.facebook.com/k19treinamentos
109
J Q UERY
110
function () {
alert ( " Elemento li clicado : " + $ ( this ) . text () ) ; $
}
Cdigo Javascript B.4: Funo de callback
Evento
$(document).ready(funo de
callback...)
$(seletor).click(funo de
callback...)
$(seletor).dblclick(funo
de callback...)
$(seletor).focus(funo de
callback...)
$(seletor).change(funo de
callback...)
Descrio
A funo de callback chamada quando o DOM carregado por completo
A funo de callback ser chamada quando o usurio
clicar no elementos selecionados
A funo de callback ser chamada quando o usurio
clicar 2X (duas) vezes nos elementos selecionados
A funo de callback ser chamada quando o foco estiver nos elementos selecionados
A funo de callback ser chamada quando o usurio
alterar o valor dos elementos selecionados
Exerccios de Fixao
Crie uma pasta eventos dentro da pasta com o seu nome que foi criada na rea de Trabalho.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
110
www.k19.com.br
111
J Q UERY
Altere o arquivo eventos.html para adicionar o evento de clique aos elementos <li>. Quando
o usurio clicar dever ser mostrado uma mensagem de alerta com o contedo do elemento clicado.
9
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Altere o exerccio anterior para mostrar a mensagem de alerta aps o usurio efetuar um duplo
clique.
10
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
www.facebook.com/k19treinamentos
111
J Q UERY
112
Altere o exerccio anterior e altere o contedo de todos os elementos <li> aps o carregamento
completo do DOM.
11
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Altere o arquivo eventos.html e adicione uma caixa de seleo de cursos. Caso o usurio escolha
um curso, mostre uma mensagem de alerta indicando o curso escolhido.
12
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Exerccios Complementares
112
www.k19.com.br
113
J Q UERY
Crie um outro arquivo HTML chamado eventos-2.html na pasta eventos, utilizando a biblioteca JavaScript JQuery. Nesse arquivo, crie uma lista ordenada contendo o nome das formaes
da K19.
5
Altere o arquivo eventos-2.html para adicionar o evento de clique aos elementos <li>. Com
esse evento, mostre o alerta com a mensagem do contedo do elemento clicado.
6
Altere o arquivo eventos-2.html para adicionar o evento de alerta aps o duplo clique no elemento selecionado.
7
No arquivo eventos-2.html, faa as alteraes necessrias para que contenha uma caixa de
seleo das formaes da K19. Quando uma formao for escolhida, mostre uma mensagem de
alerta indicando o nome da formao desejada.
8
Efeitos
A biblioteca jQuery contm vrios mtodos para adicionar animao para a pgina web.
hide e show.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
www.facebook.com/k19treinamentos
113
J Q UERY
114
jQuery Toggle
O mtodo jQuery Toggle altera a visibilidade dos elementos atravs dos mtodos show e hide.
Elementos visveis so ocultados e elementos ocultados tornam-se visveis.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
jQuery Fade
O jQuery fade altera a opacidade dos elementos HTML. Os mtodos fade do jQuery so trs:
$(seletor).fadeIn(speed,callback)
$(seletor).fadeOut(speed,callback)
$(seletor).fadeTo(speed,opacidade,callback)
O primeiro parmetro speed aceita os seguintes valores: "slow", "fast", "normal"ou milissegundos.
O parmetro callback define a funo que ser chamada aps o evento de slide terminar.
O parmetro de opacidade do mtodo fadeTo define em porcentagem a opacidade do elemento
HTML.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
114
www.k19.com.br
115
18
19
20
21
22
23
24
25
26
J Q UERY
jQuery Slide
O jQuery Slide permite alterarmos a altura dos elementos HTML. O jQuery Slide tem 3 (trs)
mtodos:
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
O primeiro parmetro speed aceita os seguintes valores: "slow", "fast", "normal"ou milissegundos.
O parmetro callback define a funo que ser chamada aps o evento de slide terminar.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Exerccios de Fixao
www.facebook.com/k19treinamentos
115
J Q UERY
116
13
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Altere o arquivo efeitos.html e adicione botes para ocultar e mostrar os elementos <li> da
pgina.
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
16
116
Altere o exerccio anterior e adicione um boto que mostra os elementos <li> ocultos e oculta os
www.k19.com.br
117
J Q UERY
Altere o exerccio anterior para ocultar e mostrar os elementos <li> atravs dos mtodos do
jQuery que alteram a opacidade.
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Exerccios Complementares
www.facebook.com/k19treinamentos
117
J Q UERY
118
Altere o exerccio anterior e acrescente um boto para diminuir a opacidade dos elementos <li>
para 0.2.
9
10
Altere o arquivo efeitos.html para ocultar e mostrar os elementos alterando a altura deles.
Altere o arquivo efeitos.html e adicione um boto que oculta os elementos <li> visveis e
mostra os elementos <li> ocultos. Para mostrar e ocultar, utilize o mtodo do jQuery que altera a
altura dos elementos.
11
12
Crie um outro arquivo HTML na pasta efeitos e crie uma lista ordenada com as formaes da
K19. Faa as alteraes necessrias para adicionar botes para ocultar e mostrar os elementos que
esto no <li>.
No arquivo criado anteriormente, altere os elementos <li> para ocultar e mostrar atravs do
mtodo de fade-in/fade-out.
13
HTML
A biblioteca jQuery contm mtodos para alterar e manipular os elementos HTML da pgina.
Para alterar o contedo dos elementos HTML da pgina, podemos usar o mtodo html().
1
118
www.k19.com.br
119
J Q UERY
Para adicionar o contedo antes ou depois dos elementos HTML, podemos utilizar os mtodos
after() e before().
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Para uma lista completa de mtodos para manipular e alterar elementos HTML com o jQuery,
acesse http://api.jquery.com/category/manipulation/.
Exerccios de Fixao
18
19
1
2
3
4
5
6
7
8
9
10
11
12
13
www.facebook.com/k19treinamentos
119
J Q UERY
120
Altere o arquivo html.html e adicione um boto alterar o contedo do elemento <p> para Treinamentos da K19.
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
21 Altere o arquivo html.html e adicione botes para adicionar contedo antes e depois do contedo do elemento <p>.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
22
1
2
3
4
5
6
7
8
9
10
120
Altere o exerccio anterior para adicionar o contedo antes e depois do elemento <p>.
<! DOCTYPE html >
< html >
< head >
< style >
p { background : green ; }
</ style >
< script src = " http :// code . jquery . com / jquery - latest . js " > </ script >
</ head >
< body >
<p > Cursos K19 </ p >
www.k19.com.br
121
11
12
13
14
15
16
17
18
19
20
J Q UERY
Exerccios Complementares
14
Crie um outro arquivo HTML chamado html-2.html na pasta html contendo a biblioteca
JavaScript JQuery. Nesse arquivo, coloque um elemento contendo uma frase qualquer. Aps isso,
adicione um boto para alterar o contedo desse elemento para "K19 Treinamentos."
Faa alteraes no arquivo do exerccio anterior para criar dois botes que quando clicados
adicionam um texto como contedo. Crie um antes e outro depois do elemento criado. Dica: no
necessrio apagar o boto criado anteriormente.
15
16
Altere no arquivo html-2.html para adicionar o contedo antes e depois do elemento <p>.
www.facebook.com/k19treinamentos
121
J Q UERY
122
122
www.k19.com.br
APNDICE
HTML5
O HTML5 uma linguagem utilizada para apresentar e estruturar o contedo de pginas web.
Trata-se da quinta verso da linguagem HTML e com ela vieram diversas mudanas como novas tags,
novos atributos e novas APIs. As diferenas com relao verso anterior no ficam presas apenas
quilo que novo, pois muito daquilo que j existia tambm foi alterado. Algumas tags tiveram sua
semntica alterada e algumas propriedades deixaram de existir, por exemplo.
Com relao a sintaxe do HTML5, podemos seguir o padro do HTML ou do XHTML, porm no
podemos mistur-los em um mesmo documento.
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
10
<? xml version = " 1.0 " encoding = " ISO -8859 -1 " ? >
<! DOCTYPE html >
< html xmlns = " http :// www . w3 . org /1999/ xhtml " >
< head >
< meta charset = " ISO -8859 -1 " / >
</ head >
< body >
...
</ body >
</ html >
Cdigo HTML C.2: Exemplo de um documento HTML5 utilizando a sintaxe XHTML
Lembre-se
A linha destacada no exemplo do uso da sintaxe XHTML necessria apenas quando
o encode do documento for diferente de UTF-8. Quando o encode for UTF-8 o W3C
recomenda que essa linha seja omitida.
Importante
Documentos HTML5 que utilizarem a sintaxe HTML devero ser transmitidos com o
Content-Type text/html enquanto que os que utilizarem a sintaxe XHTML devero
ser transmitidos com o Content-Type application/xhtml+xml.
www.facebook.com/k19treinamentos
123
HTML5
124
article
Representa uma composio independente em um documento, pgina ou aplicao e que , a
princpio, independentemente distribuvel ou reutilizvel. Pode ser um post de um frum, artigo de
uma revista ou jornal, post de um blog, comentrio enviado por um usurio, widget interativo ou
qualquer item independente de contedo.
Quando encontramos elementos article aninhados, os elementos article internos representam um contedo que esteja relacionado ao contedo do ancestral article mais prximo. Por exemplo, elementos article internos podem representar os comentrios de um post de um blog Neste
caso o post do blog seria o elemento article ancestral mais prximo.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
section
Representa uma seo genrica de um documento. Neste contexto, uma seo o agrupamento
de um contedo dentro de um tema que, normalmente, possui um cabealho.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
124
www.k19.com.br
125
22
23
24
25
HTML5
</ article >
</ section >
</ body >
</ html >
Cdigo HTML C.4: section.html
header
O elemento header utilizado para definir um contedo de introduo ou de navegao. Normalmente encontramos elementos de cabealho (h1
h6), em seu contedo. importante lembrar
que, apesar de geralmente ser empregado no comeo da pgina, seu uso pode ser feito tambm em
diferentes sees do mesmo documento.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
footer
Representa o rodap do ancestral de seccionamento mais prximo. muito comum encontrarmos em seu contedo informaes sobre a seo a qual ele pertence como quem a escreveu, links
relacionados ao contedo da seo e informaes legais, por exemplo.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
www.facebook.com/k19treinamentos
125
HTML5
20
21
22
23
126
nav
A tag nav representa uma seo da pgina que contm links para outras pginas ou para outras
partes do documento, ou seja, uma seo com links de navegao.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
aside
O elemento aside representa uma seo que consiste em um contedo que esteja tangencialmente relacionado ao contedo que est sua volta. Essa seo frequentemente representada
como uma coluna lateral em relao ao contedo principal de uma pgina.
1
2
3
4
5
6
7
8
9
10
11
12
13
126
www.k19.com.br
127
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
HTML5
</ nav >
</ header >
< section >
< h1 > Meus Posts </ h1 >
...
</ section >
< aside >
< h1 > Posts relacionados </ h1 >
...
</ aside >
< footer >© ;2013 K19 Treinamentos . </ footer >
</ body >
</ html >
Cdigo HTML C.8: aside.html
figure
Representa um contedo que auto-suficiente e tipicamente referenciado como uma unidade
singular do fluxo principal do documento. Opcionalmente o contedo pode possuir uma legenda.
Pode ser utilizado para exibir ilustraes, diagramas, fotos, vdeos, cdigos fonte, etc, que so referenciados no contedo principal do documento, porm podem, sem afetar o fluxo do documento,
ser removidas do contedo principal e colocadas, por exemplo, como anotaes no canto da pgina
ou em forma de apndice.
figcaption
A tag figcaption deve ser filha de um elemento figure e representa a legenda para o resto do
contedo do elemento pai. Alm disso, a tag figcaption deve aparecer como primeira ou ltima
filha de um elemento figure.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
www.facebook.com/k19treinamentos
127
HTML5
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
128
Sed sed quam nisi , cursus sodales metus . Curabitur dapibus , massa sed sollicitudin viverra ,
odio justo dignissim metus , vel tempor turpis neque id erat . Aenean fermentum ultricies
ante a luctus . </ p >
< figure >
< img src = " # " title = " Aenean fermentum " alt = " Mauris convallis , leo sollicitudin " >
< figcaption > Figura 3 b . Curabitur dapibus , massa sed sollicitudin . </ figcaption >
</ figure >
<p > Mauris fermentum lorem nec nisi euismod elementum . Aenean nec magna dolor , vel fermentum
turpis . Mauris convallis , leo sollicitudin egestas malesuada , nunc est ultrices enim , eget
varius odio felis et velit . Sed ac lorem nibh , ut convallis ante . </ p >
</ section >
128
www.k19.com.br
APNDICE
CSS3
A terceira verso da especificao do CSS, normalmente referida como CSS3, traz novos recursos
que facilitar a vida dos desenvolvedores front-end.
Criar bordas arredondadas, aplicar sombra ou rotacionar elementos HTML e usar fontes diferentes em textos sempre foi uma tarefa trabalhosa que, quando possvel resolver apenas em cdigo,
necessitava muito cdigo JavaScript ou gambiarras em CSS.
Neste captulo iremos abordar algumas das novas propriedades introduzidas pelo CSS3. Devemos nos lembrar que, assim como o HTML5, a especificao do CSS3 ainda no foi concluda, portanto qualquer recurso do CSS3 deve ser usado com cuidado para evitar resultados inesperados em
diferentes navegadores.
Bordas arredondadas
A propriedade CSS border-radius responsvel por aplicar bordas arredondadas em um elemento HTML.
1
2
3
4
5
6
7
8
9
10
11
# main {
border - radius : 10 px ;
}
# menu {
border - radius : 10 px 20 px ;
}
# side {
border - radius : 40 px 30 px 20 px 10 px ;
}
Cdigo CSS D.1: Propriedade border-radius
No exemplo acima, o elemento #main ter bordas arredondadas com 10 pixels de raio nos quatro
cantos.
O elemento #menu ter bordas arredondadas com 10 pixels de raio no canto superior esquerdo,
assim como no canto inferior direito. No canto superior direito e no canto inferior esquerdo o elemento ter bordas arredondadas com 20 pixels de raio.
O elemento #side ter bordas arredondadas com 40 pixels de raio no canto superior esquerdo,
30 pixels de raio no canto superior direito, 20 pixels de raio no canto inferior direito e 10 pixels no
canto inferior esquerdo.
Alm da propriedade border-radius, o CSS3 nos oferece as propriedades da lista abaixo para
ajustar o raio da borda de cada um dos cantos de um elemento de maineira independente:
www.facebook.com/k19treinamentos
129
CSS3
130
# content {
border - top - left - radius : 10 px ;
border - top - right - radius : 20 px 10 px ; /* 20 px na horizontal e 10 px na vertical */
}
Cdigo CSS D.2: Propriedades border-top-left-radius e border-top-right-radius
20px
10px
10px
#content
Figura D.1: Exemplo de borda com raios diferentes
Sombras
No CSS3 existem dois tipos de sombras: a sombra que aplicada caixa do elemento e a sombra
que aplicada no texto de um elemento.
box-shadow
A propriedade box-shadow responsvel por aplicar uma sombra na parte externa ou interna
da caixa de um elemento. A caixa limitada pelo retngulo definido pela borda do elemento
de acordo com o box model. Alm disso, o valor da propriedade pode ser definido de diversas maneiras. Confira a ilustrao abaixo na qual mostramos como atribuir um valor para a propriedade
box-shadow.
130
www.k19.com.br
131
CSS3
Deslocamento horizontal
#a {
}
#a
Deslocamento vertical
Deslocamento horizontal
Desfocamento
#b {
}
#b
Deslocamento vertical
Deslocamento horizontal
#c {
}
Desfocamento
Propagao
#c
Deslocamento vertical
Os valores para os deslocamentos vertical e horizontal podem assumir valores negativos fazendo
com que a sombra seja projetada para cima e para a esquerda.
Observe no cdigo CSS abaixo valores aplicados na propriedade box-shadow.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#a {
box - shadow : 10 px 10 px #000000;
}
#b {
box - shadow : 10 px 10 px 10 px #000000;
}
#c {
box - shadow : 10 px 10 px 0 10 px #000000;
}
#d {
box - shadow : -10 px -10 px #000000;
}
www.facebook.com/k19treinamentos
131
CSS3
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
132
#e {
box - shadow : -10 px -10 px 10 px #000000;
}
#f {
box - shadow : -10 px -10 px 0 10 px #000000;
}
#g {
box - shadow : 0 0 10 px #000000;
}
#h {
box - shadow : 0 0 10 px 10 px #000000;
}
Cdigo CSS D.3: Exemplos de uso da propriedade box-shadow para sombra externa
As regras para a aplicao da sombra interna so as mesmas da sombra externa. A nica diferena
que devemos comear a atribuio do valor com a palavra inset.
132
www.k19.com.br
133
CSS3
Deslocamento horizontal
#a {
}
Deslocamento vertical
#a
Deslocamento horizontal
#b {
}
Deslocamento vertical
#b
Desfocamento
Deslocamento horizontal
#c {
}
Deslocamento vertical
#c
Propagao
Observe no cdigo CSS abaixo valores aplicados na propriedade box-shadow para criar sombras
internas.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#a {
box - shadow : inset 10 px 10 px #000000;
}
#b {
box - shadow : inset 10 px 10 px 10 px #000000;
}
#c {
box - shadow : inset 10 px 10 px 0 10 px #000000;
}
#d {
box - shadow : inset -10 px -10 px #000000;
}
#e {
box - shadow : inset -10 px -10 px 10 px #000000;
www.facebook.com/k19treinamentos
133
CSS3
19
20
21
22
23
24
25
26
27
28
29
30
31
134
}
#f {
box - shadow : inset -10 px -10 px 0 10 px #000000;
}
#g {
box - shadow : inset 0 0 10 px #000000;
}
#h {
box - shadow : inset 0 0 10 px 10 px #000000;
}
Cdigo CSS D.4: Exemplos de uso da propriedade box-shadow para sombra interna
text-shadow
Para aplicarmos uma sombra no texto de um elemento devemos utilizar a propriedade text-shadow.
O seu funcionamento muito semelhante ao da propriedade box-shadow, exceto pelo fato que no
podemos criar uma sombra interna e no existe o parmetro de propagao da sombra.
1
2
3
4
134
#a {
text - shadow : 10 px 10 px # ff0000 ;
}
www.k19.com.br
135
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
CSS3
#b {
text - shadow : 10 px 10 px 10 px # ff0000 ;
}
#c {
text - shadow : -10 px -10 px # ff0000 ;
}
#d {
text - shadow : -10 px -10 px 10 px # ff0000 ;
}
#e {
text - shadow : 0 0 10 px # ff0000 ;
}
Cdigo CSS D.5: Exemplos de uso da propriedade text-shadow para sombra de texto
Mais Sobre
As propriedades box-shadow e text-shadow podem receber valores para definir mais
de uma sombra. Para isso devemos separar os valores por vrgula. Observe o exemplo:
box-shadow:
www.facebook.com/k19treinamentos
135
CSS3
136
Transformaes
No CSS3 foram introduzidas algumas funes para realizar as transformaes de translado, escalonamento, distoro e rotao nos elementos de uma pgina HTML. Essas funes so utilizadas
em conjunto com a propriedade transform do CSS3.
translate()
O resultado da aplicao da funo translate(m, n) semelhante ao resultado obtido ao mover
um elemento atravs do atributo position com o valor relative. Ao utilizar a funo translate(m,
n) um elemento transladado a m unidades de medida da esquerda e n unidades de medida do topo.
136
www.k19.com.br
137
CSS3
transform: translate( m , n );
Original
Transladado
scale()
A funo scale(m, n) escalonar as dimenses de um elemento. O escalonamento ser aplicado sobre a largura a uma taxa definida por m e sobre a altura a uma taxa definida por n. Caso a
funo seja chamada com apenas um parmetro, a mesma taxa ser aplicada na altura e largura do
elemento.
transform: scale( m , n );
Original
w* m
Escalonado
w
h
h* n
rotate()
A funo rotate(m) rotacionar um elemento em torno do seu ponto de origem. O valor de m
deve ser dado em graus, voltas ou grado.
www.facebook.com/k19treinamentos
137
CSS3
138
transform: rotate( m );
Original
m
Rotacionado
skew()
A funo skew(m, n) distorcer um elemento em relao aos eixos x e y. m e n definem as distores aplicadas nos eixos x e y respectivamente. Os valores de m e n devem ser dados em graus, voltas
ou grado.
transform: skew( m , n );
Original
Destorcido
Fontes no CSS3
Antes do CSS3 os webdesigners estavam limitados a utilizarem apenas as fontes disponveis nos
computadores dos usurios. Quando era necessrio utilizar alguma fonte diferente o webdesigner
precisava recorrer a alguma tcnica como Cufn (Custom Font) ou sIFR (Scalable Inman Flash Replacement).
Durante muito tempo essas tcnicas foram amplamente utilizadas por trazerem uma liberdade
muito maior para os designers no momento da elaborao da parte artstica de uma pgina. Porm,
essa flexibilidade tinha o seu preo: exigiam um pouco mais de processamento e/ou o uso de plugins
de terceiros no momento da renderizao da pgina. Alm disso, tais tcnicas no apresentavam
138
www.k19.com.br
139
CSS3
resultados muito satisfatrios quando era necessrio exibir uma grande quantidade de texto com a
fonte escolhida.
@font-face
A regra @font-face nos permite ativar automaticamente uma fonte quando ela necessria. A
fonte pode estar um arquivo local (mquina do usurio) ou remoto (servidor). Veja o exemplo abaixo.
1
2
3
4
5
6
7
8
@font - face {
font - family : NomeDaFonte ;
src : url ( nome - da - fonte . eot ) ;
src : url ( nome - da - fonte . eot ?# iefix ) format ( embedded - opentype ) ,
url ( nome - da - fonte . woff ) format ( woff ) ,
url ( nome - da - fonte . ttf ) format ( truetype ) ,
url ( nome - da - fonte . svg # webfontregular ) format ( svg ) ;
}
Cdigo CSS D.6: font-face.css
Os formatos de fontes para os quais os navegadores oferecem suporte variam de navegador para
navegador. Por isso, o cdigo do exemplo acima possui diversas declaraes para a mesma fonte.
Cada declarao vlida para um grupo diferente de navegadores.
Linhas 3 4: Internet Explorer 6 9. ?#iefix um Hack CSS para que no Internet Explorer 6 o
restante do valor atribudo propriedade src seja ignorado. Alm disso, o charactere # desse
Hack CSS evita que falhas devido ao excesso de caracteres possam ocorrer.
Linha 5: formato utilizado por todas as verses dos navegadores mais modernos. o formato
recomendado pelo W3C.
Linha 6: formato aceito nos navegadores Firefox, Chrome, Safari e Opera. Usado tambm nos
navegadores padro dos sistemas Android e iOS.
Linha 7: formato aceito no navegador padro dos sistemas iOS mais antigos.
A funo url() deve ser utilizada quando queremos utilizar uma fonte que est armazenada
remotamente (no servidor). Caso queiramos carregar uma fonte disponvel na mquina do usurio,
devemos utilizar a funo local(), passando como parmetro o nome da fonte desejada.
1
2
3
4
@font - face {
font - family : NomeDaFonte ;
src : local ( nome - da - fonte ) ;
}
Cdigo CSS D.7: font-face-local.css
Para utilizarmos as fontes definidas na regra @font-face devemos utilizar a propriedade font-family
dentro de uma regra CSS.
1
2
3
4
5
6
7
8
9
10
@font - face {
font - family : MinhaFonteBacana ;
src : url ( minha - fonte - bacana . eot ) ;
src : url ( minha - fonte - bacana . eot ?# iefix ) format ( embedded - opentype ) ,
url ( minha - fonte - bacana . woff ) format ( woff ) ,
url ( minha - fonte - bacana . ttf ) format ( truetype ) ,
url ( minha - fonte - bacana . svg # webfontregular ) format ( svg ) ;
}
p {
www.facebook.com/k19treinamentos
139
CSS3
11
12
140
font - family : MinhaFonteBacana ;
}
Cdigo CSS D.8: font-family.css
140
www.k19.com.br
APNDICE
Propriedades de tabela
border-spacing
A propriedade border-spacing define a distncia entre as bordas das clulas de uma tabela,
assim como a distncia entre a borda de uma clula e a borda da prpria tabela. Veja o exemplo
abaixo.
1
2
3
4
table {
border - collapse : separate ;
border - spacing : 10 px ;
}
Cdigo CSS E.1: border-spacing
Tambm podemos definir valores diferentes para o espaamento horizontal e vertical, como podemos verificar no exemlo a seguir.
1
2
3
4
table {
border - collapse : separate ;
border - spacing : 10 px 20 px ;
}
Cdigo CSS E.2: border-spacing
caption-side
A propriedade caption-side define em que posio a legenda de uma tabela dever aparecer.
Por padro, a propriedade caption-side possui o valor top, fazendo com que a legenda fique na
parte superior da tabela. O valor bottom faz com que a legenda fique na parte inferior da tabela. Veja
o exemplo abaixo.
1
2
3
caption {
caption - side : bottom ;
}
Cdigo CSS E.3: caption-side
empty-cells
A propriedade empty-cells define se uma clula vazia da tabela deve ser exibida ou no. Por
padro, a propriedade empty-cells possui o valor show. Para que uma clula vazia no seja exibida
devemos atribuir o valor hide. Veja o exemplo abaixo.
www.facebook.com/k19treinamentos
141
142
...
< table >
< tr >
< th > Nome </ th >
< th >E - mail </ th >
</ tr >
< tr >
< td > Jonas </ td >
< td > jonas@k19 . com . br </ td >
</ tr >
< tr >
< td > Jundy </ td >
< td > </ td >
</ tr >
</ table >
...
Cdigo HTML E.1: empty-cells.html
1
2
3
4
5
6
7
8
9
table {
border : 1 px solid black ;
border - collapse : separate ;
empty - cells : hide ;
}
table th , table td {
border : 1 px solid black ;
}
Cdigo CSS E.4: empty-cells.css
Propriedades de borda
As bordas de um elemento podem ser definidas de maneira simplificada atravs da propriedade
border. Porm, se desejarmos podemos utilizar as variantes da propriedade border para definir
cada caracterstica das bordas. Veja o exemplo abaixo.
1
2
3
4
5
6
7
8
9
div {
border : 1 px solid red ;
}
p {
border - width : 1 px ;
border - style : solid ;
border - color : red ;
}
Cdigo CSS E.5: Propriedade border e suas variantes
Ao utilizarmos as variantes podemos definir valores diferentes para cada um dos lados do elemento. Veja o exemplo a seguir.
1
2
3
4
5
p {
border - width : 1 px 2 px 3 px 4 px ;
border - style : solid dotted double dashed ;
border - color : red blue green yellow ;
}
Cdigo CSS E.6: Variantes da propriedade border com valores diferentes para cada lado do elemento
142
www.k19.com.br
143
...
<a href = " http :// www . k19 . com . br " > K19 Treinamentos </ a >
...
Cdigo HTML E.2: content.html
1
2
3
4
a : after
{
content : " ( clique para conhecer a empresa ) " ;
}
Cdigo CSS E.7: content.css
No exemplo acima, o texto do link aps a renderizao da pgina seria: K19 Treinamentos (clique para conhecer a empresa).
www.facebook.com/k19treinamentos
143
144
counter-increment e counter-reset
A propriedade counter-increment incrementa um ou mais valores de um contador. Essa propriedade normalmente trabalha em conjunto com as propriedades counter-reset e content. Veja
o exemplo abaixo:
1
2
3
4
5
6
7
8
9
10
11
12
body {
counter - reset : secao ;
}
h1 {
counter - reset : subsecao ;
}
h2 : before {
counter - increment : subsecao ;
content : counter ( secao ) " . " counter ( subsecao ) " " ;
}
Cdigo CSS E.8: counter-increment
Repare que no exemplo acima a funo counter() do CSS foi utilizada para obtermos os valores
dos contadores secao e subsecao. Alm disso, observe que temos uma regra para o elemento h1
que zera o contador subsecao atravs da propriedade counter-reset. Portanto, toda vez que um
elemento h1 aparecer no cdigo HTML o contador subsecao ser zerado.
Propriedades de posicionamento
float
A propriedade float faz com que um elemento tenha um posicionamento flutuante em relao
ao contedo ao seu redor. Essa propriedade pode assumir os valroes right, left e none. Veja o exemplo
abaixo.
1
2
3
img {
float : right ;
}
Cdigo CSS E.9: float
No exemplo acima, qualquer elemento que for definido no cdigo HTML aps um elemento img
ser posicionado esquerda da imagem. Isso se deve ao fato da imagem estar flutuando direita
do contedo.
clear
O elemento com a propriedade clear faz com que os elementos com a propriedade float definidos anteriormente a ele no cdigo HTML percam o comportamento de elementos flutuantes.
Se a propriedade assumir o valor left, apenas os elementos com float: left perdero o comportamento flutuante. Se a propriedade assumir o valor right, apenas os elementos com float:
right perdero o comportamento flutuante.
Alm dos valores left e right, a propriedade clear pode assumir o valor both, o que far com
que os elementos anterirormente definidos com a propriedade float: left e/ou float: right
144
www.k19.com.br
145
...
< img src = " imagem . jpg " / >
<p > Texto de exemplo </ p >
<p class = " clear " > Outro texto </ p >
...
Cdigo HTML E.3: clear.html
1
2
3
4
5
6
7
img {
float : right ;
}
p . clear {
clear : both ;
}
Cdigo CSS E.10: clear.css
cursor
A propriedade cursor, define o tipo do cursor que ser mostrado quando se passa o mouse por
cima de um elemento. A propriedade pode assumir os seguintes valores: auto, crosshair, default, eresize, help, move, n-resize, ne-resize, nw-resize, pointer, progress, s-resize, se-resize, sw-resize, text,
w-resize e wait. Veja o exemplo abaixo.
1
2
3
div {
cursor : text ;
}
Cdigo CSS E.11: cursor
overflow
A propriedade overflow define o que deve acontecer quando o contedo for maior que o limite
da caixa do elemento que o contm. Os valores que a propriedade pode assumir so:
visible (padro): o contedo do elemento exibido mesmo que ele ultrapasse os limites do
elemento no qual est contido.
hidden: a parte excedente do contedo no ficar visvel.
scroll: no elemento aparecero barras de rolagem.
auto: no elemento aparecero barras de rolagem para que seja possvel ver todo o contedo,
caso o contedo seja maior que o elemento.
Veja o exemplo abaixo:
1
2
3
4
5
div {
width :150 px ;
height :150 px ;
overflow : scroll ;
}
www.facebook.com/k19treinamentos
145
146
visibility
A propriedade visibility define se um elemento est visvel ou no, podendo assumir os valores visible, hidden ou collapse, sendo o ltimo vlido apenas para elementos de tabela.
Ao utilizar a propriedade visibility com o valor hidden, repare que apesar do elemento no
ser exibido seu espao continua sendo ocupado.
1
2
3
h2 {
visibility : hidden ;
}
Cdigo CSS E.13: visibility
z-index
A propriedade z-index especifica a ordem de empilhamento de um elemento. O elemento com
um valor maior de empilhamento, sempre estar na frente de um elemento com menor valor. Essa
propriedade somente vlida para elementos posicionados atravs da propriedade position com
os valores absolute, relative ou fixed. Veja o exemplo abaixo.
1
2
3
4
5
6
7
8
9
10
11
12
img {
position : absolute ;
left :0 px ;
top :0 px ;
z - index : 1;
}
img . layer1 {
top : 2 px ;
left : 2 px ;
z - index : 2;
}
Cdigo CSS E.14: z-index
146
www.k19.com.br
APNDICE
Q UIZZES
Quiz 1
Considere uma pgina HTML contendo um <div> com largura (width) 200px, margem
interna (padding) 10px e borda de 3px. Visualmente, qual o espao horizontal ocupado por
esse elemento?
a) 200px
b) 203px
c) 210px
d) 213px
e) 226px
De acordo com o Box Model do CSS visto no Captulo 3, ao atribuirmos margens internas e bordas em um elemento com largura definida fazemos com que, visualmente, a largura ocupada por
esse elemento seja a soma das propriedades width, padding-left, padding-right, borderleft e border-right. Como utilizamos a propriedade padding com o valor 10px para definir
as margens internas, podemos considerar que temos 10px nas propriedades padding-left e
padding-right. A mesma idia se aplica propriedade border, portanto temos border-left
e border-right com 3px cada.
Fazendo a soma temos: 200px (width) + 10px (padding-left) + 10px (padding-right) + 3px (borderleft) + 3px (border-right) = 226px
Portanto o espao horizontal visualmente ocupado pelo elemento de 226px.
www.facebook.com/k19treinamentos
147
QUIZZES
148
148
www.k19.com.br
APNDICE
R ESPOSTAS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
www.facebook.com/k19treinamentos
149
R ESPOSTAS
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
150
1
2
3
4
150
www.k19.com.br
151
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
R ESPOSTAS
</ head >
< body >
< h1 > Cafeteira - K19 </ h1 >
< h2 > Gosto Doce </ h2 >
< h3 > Recursos </ h3 >
<p > Prtico , uso de capsulas </ p >
<p > Dois tipos : quente e frio </ p >
<p > Faz seu expresso em poucos segundos </ p >
<p > Mais de 10 sabores </ p >
<p > Silencioso </ p >
< h3 > Observaes </ h3 >
<p > Verificar a quantidade de gua no reservatrio </ p >
<p > Verificar o led para a inicializao </ p >
<p > Desligar aparelho aps uso </ p >
<p > Sempre limpar corretamente o suporte para a capsula </ p >
< h4 > Itens relacionados </ h4 >
<p > Capuccino - 16 capsulas </ p >
<p > Expresso - 16 capsulas </ p >
<p > Expresso Intenso - 8 capsulas </ p >
<p > Caneca K19 - 300 ml </ p >
</ body >
</ html >
Cdigo HTML 2.13: produto.html
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
www.facebook.com/k19treinamentos
151
R ESPOSTAS
12
152
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
152
www.k19.com.br
153
8
9
10
11
12
13
14
15
16
17
R ESPOSTAS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
1
2
3
4
5
6
7
8
9
10
11
www.facebook.com/k19treinamentos
153
R ESPOSTAS
12
13
14
15
16
17
154
<p >
Logo K19
< img src = " http :// www . k19 . com . br / app / webroot / css / img / main - header - logo . png " / >
</ p >
</ body >
</ html >
Cdigo HTML 2.31: exercicio-imagens.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
154
www.k19.com.br
155
54
55
56
57
R ESPOSTAS
</ tbody >
</ table >
</ body >
</ html >
Cdigo HTML 2.35: exercicio-tabela.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
www.facebook.com/k19treinamentos
155
R ESPOSTAS
156
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
156
www.k19.com.br
157
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
R ESPOSTAS
< input
< label
< input
< label
</ div >
type = " radio " name = " sexo " id = " sexo - m " / >
for = " sexo - m " > Masculino </ label >
type = " radio " name = " sexo " id = " sexo - f " / >
for = " sexo - f " > Feminino </ label >
1
2
3
4
5
6
7
8
1
2
3
4
5
6
www.facebook.com/k19treinamentos
157
R ESPOSTAS
158
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
158
www.k19.com.br
159
1
2
3
4
5
6
7
R ESPOSTAS
< html >
< head >
< title > Imprimir * entre os numeros multiplos de 4 e 7 </ title >
< script type = " text / javascript " src = " imprime -* - no - lugar - multiplo4e7 . js " > </ script > < / head >
< body >
</ body >
</ html >
Cdigo HTML 4.9: imprime-*-no-lugar-multiplo4e7.html
1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
1
2
3
4
5
6
var linha = * ;
for ( var contador = 1; contador <= 10; contador ++) {
document . writeln ( linha ) ;
document . writeln ( < br / > ) ;
linha += * ;
}
Cdigo Javascript 4.19: imprime-padrao-3.js
1
2
3
4
www.facebook.com/k19treinamentos
159
R ESPOSTAS
5
6
7
8
160
1
2
3
4
5
6
7
8
9
10
11
var linha = * ;
for ( var contador = 1; contador <= 8; contador ++) {
document . writeln ( linha ) ;
document . writeln ( < br / > ) ;
var resto = contador % 4;
if ( resto == 0) {
linha = * ;
} else {
linha += * ;
}
}
Cdigo Javascript 4.20: imprime-padrao-4.js
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var penultimo = 0;
var ultimo = 1;
document . writeln ( penultimo ) ;
document . writeln ( < br / > ) ;
document . writeln ( ultimo ) ;
document . writeln ( < br / > ) ;
for ( var contador = 0; contador < 28; contador ++) {
var proximo = penultimo + ultimo ;
document . writeln ( proximo ) ;
document . writeln ( < br / > ) ;
penultimo = ultimo ;
ultimo = proximo ;
}
Cdigo Javascript 4.21: imprime-padrao-5.js
160
www.k19.com.br
161
1
2
3
4
5
6
7
8
R ESPOSTAS
< html >
< head >
< title > Embaralhando Array </ title >
< script type = " text / javascript " src = " embaralha - array . js " > </ script >
</ head >
< body >
</ body >
</ html >
Cdigo HTML 4.16: embaralha-array.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
z
=
=
=
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
9
www.facebook.com/k19treinamentos
161
R ESPOSTAS
10
11
12
13
14
15
16
17
18
19
162
1
2
3
4
5
6
7
var formacao = { sigla : " K00 " , nome : " Formao Bsica " };
console . log ( formacao . sigla ) ;
console . log ( formacao . nome ) ;
var formacao_2 = { sigla : " K10 " , nome : " Formao Desenvolvedor Java " };
console . log ( formacao_2 . sigla ) ;
console . log ( formacao_2 . nome ) ;
Cdigo Javascript A.22: formacao-1
1
2
3
4
5
6
7
8
9
10
11
var formacao = { sigla : " K00 " , nome : " Formao Bsica " };
console . log ( formacao . sigla ) ;
console . log ( formacao . curso ) ;
var x = formacao ;
x . sigla = " K00 " ;
x . nome = " Formao Bsica " ;
console . log ( formacao . sigla ) ;
console . log ( formacao . nome ) ;
Cdigo Javascript A.23: formacao-2
1
2
3
4
5
6
7
8
162
var formacao = { sigla : " K20 " , nome : " Formao Desenvolvedor Java Avanado " };
var nova_formacao = Object . create ( curso ) ;
nova_formacao . sigla = " K30 " ;
nova_formacao . nome = " Formao Desenvolvedor . NET " ;
console . log ( formacao . sigla ) ;
www.k19.com.br
163
9
R ESPOSTAS
console . log ( formacao . nome ) ;
Cdigo Javascript A.24: prototipo
1
2
3
4
5
6
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var conta = {
saldo : 0 ,
saque : function ( valor ) {
if ( conta . saldo < 600) {
throw {
message : " Saldo insuficiente . "
}
} else if ( valor <= 0) {
throw {
message : " Valores menores ou iguais a 0 no podem ser sacados . "
}
} else {
this . saldo -= valor ;
}
try {
conta . saque (0) ;
} catch ( e ) {
console . log ( e . name ) ;
console . log ( e . message ) ;
}
}
}
conta . saque (600)
console . log ( conta . saque ) ;
Cdigo Javascript A.42: saque()
1
2
3
4
www.facebook.com/k19treinamentos
163
R ESPOSTAS
5
6
7
8
9
10
11
12
13
164
multiplicacao *= arguments [ x ];
}
return multiplicacao ;
}
var resultado = multiplicacao (3 , 6 , 2 , 8) ;
console . log ( resultado ) ;
Cdigo Javascript A.43: mutiplicacao-2()
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
var formacoes = [ " K10 " , " K20 " , " K30 " , " K40 " ];
formacoes [ formacoes . length ] = " K00 " ;
for ( var x = 0; x < formacao . length ; x ++) {
console . log ( cursos [ x ]) ;
}
Cdigo Javascript A.75: formacoes-array
1
2
3
4
5
6
7
var formacoes = [ " K10 " , " K20 " , " K30 " , " K40 " ];
formacoes . push ( " K00 " ) ;
for ( var x = 0; x < formacao . length ; x ++) {
console . log ( cursos [ x ]) ;
}
Cdigo Javascript A.76: metodo-push()
164
www.k19.com.br
165
R ESPOSTAS
1
2
3
4
5
6
7
8
1
2
3
4
var formacoes = [ " K00 " , " K10 " , " K20 " , " K30 " , " K40 " ];
var formacoes = formacoes . pop () ;
console . log ( formacoes ) ;
Cdigo Javascript A.78: metodo-pop()
1
2
3
4
5
6
7
8
9
10
var formacoes = [ " K00 " , " K10 " , " K20 " , " K30 " , " K40 " ];
var formacoes = formacoes . pop () ;
console . log ( formacoes ) ;
formacoes . push ( " K40 " ) ;
for ( var x = 0; formacoes . length ; x ++) {
console . log ( formacoes [ x ]) ;
}
// highlights !!
1
2
3
4
5
6
7
var letras = [ " a " , " b " , " c " , " d " , " e " ];
letras . reverse () ;
for ( var x = 0; x < letras . length ; x ++) {
console . log ( letras [ x ]) ;
}
Cdigo Javascript A.80: metodo-reverse()
www.facebook.com/k19treinamentos
165
R ESPOSTAS
166
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var letras = [ " a " , " b " , " c " , " d " , " e " ];
letras . reverse () ;
for ( var x = 0; x < letras . length ; x ++) {
console . log ( letras [ x ]) ;
}
var letras = letras . shift () ;
console . log ( " Elemento removido : " + letras ) ;
for ( var x = 0; x < letras . length ; x ++) {
console . log ( letras [ x ]) ;
}
Cdigo Javascript A.81: metodo-shift()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var letras = [ " a " , " b " , " c " , " d " , " e " ];
letras . reverse () ;
for ( var x = 0; x < letras . length ; x ++) {
console . log ( letras [ x ]) ;
}
var letras = letras . shift () ;
console . log ( " Elemento removido : " + letras ) ;
for ( var x = 0; x < letras . length ; x ++) {
console . log ( letras [ x ]) ;
}
letras . unshift ( " e " ) ;
for ( var x = 0; x < letras . length ; x ++) {
console . log ( letras [ x ]) ;
}
Cdigo Javascript A.82: metodo-unshift()
1
2
3
4
5
6
166
var formacoes = [ " K00 " , " K10 " , " K20 " , " K30 " , " K40 " ];
var formacoes
www.k19.com.br
167
7
R ESPOSTAS
}
Cdigo Javascript A.83: metodo-slice()
1
2
3
4
5
1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
9
10
11
12
13
14
www.facebook.com/k19treinamentos
167
R ESPOSTAS
168
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
168
www.k19.com.br
169
12
13
14
15
16
17
18
19
R ESPOSTAS
< li >
< li >
< li >
< li >
</ ul >
</ div >
</ body >
</ html >
K10
K20
K30
K40
Formao
Formao
Formao
Formao
Desenvolvedor
Desenvolvedor
Desenvolvedor
Desenvolvedor
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Formao
Formao
Formao
Formao
Formao
www.facebook.com/k19treinamentos
169
R ESPOSTAS
19
20
21
22
23
170
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
170
www.k19.com.br
171
18
19
20
21
22
23
24
25
26
27
28
R ESPOSTAS
< button id = " mostrar " > Mostrar </ button >
< button id = " ocultar " > Ocultar </ button >
< button id = " fadeto " > FadeTo </ button >
</ div >
< script >
$ ( " # mostrar " ) . click ( function () { $ ( " li " ) . fadeIn ( " slow " ) ; }) ;
$ ( " # ocultar " ) . click ( function () { $ ( " li " ) . fadeOut ( " slow " ) ; }) ;
$ ( " # fadeto " ) . click ( function () { $ ( " li " ) . fadeTo ( " slow " , 0.2) ; }) ;
</ script >
</ body >
</ html >
Cdigo HTML B.30: efeitos.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
1
2
3
4
5
6
7
8
9
10
11
www.facebook.com/k19treinamentos
171
R ESPOSTAS
12
13
14
15
16
17
18
19
20
21
22
23
24
172
< li > K32 - Desenvolvimento Web com ASP . NET MVC </ li >
< li > K11 - Java e Orientao a Objetos </ li >
< li > K12 - Desenvolvimento Web com JSF2 e JPA2 </ li >
</ ul >
</ div >
< div >
< button id = " mostrar - ocultar " > Mostrar / Ocultar </ button >
</ div >
< script >
$ ( " # mostrar - ocultar " ) . click ( function () { $ ( " li " ) . slideToggle ( " slow " ) ; }) ;
</ script >
</ body >
</ html >
Cdigo HTML B.32: efeitos.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
1
2
3
4
5
6
7
8
172
www.k19.com.br
173
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
R ESPOSTAS
< ul >
< li > K00 - Formao Bsica </ li >
< li > K10 - Formao Desenvolvedor Java </ li >
< li > K20 - Formao Desenvolvedor Java Avanado </ li >
< li > K30 - Formao Desenvolvedor . NET </ li >
< li > K40 - Formao Desenvolvedor Android </ li >
</ ul >
</ div >
< div >
< button id = " mostrar - ocultar " > Mostrar / Ocultar </ button >
</ div >
< script >
$ ( " # mostrar - ocultar " ) . click ( function () {
$ ( " li " ) . toggle ( " slow " ) ;}) ;
</ script >
</ body >
</ html >
Cdigo HTML B.34: efeitos-2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
www.facebook.com/k19treinamentos
173
R ESPOSTAS
17
18
19
20
21
22
23
174
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
174
www.k19.com.br