Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
14 de junho de 2015
As apostilas atualizadas esto disponveis em www.k19.com.br
Sumrio
ii
Sobre a K19
Seguro Treinamento
Termo de Uso
Cursos
ii
Introduo
1.1 Sites e Aplicaes Web . . . . . . . . . . . . . . . . . .
1.2 Navegadores e Dispositivos . . . . . . . . . . . . . . .
1.3 Web Servers e HTTP . . . . . . . . . . . . . . . . . . . .
1.4 Domnios e endereos IP . . . . . . . . . . . . . . . . .
1.5 DNS (Domain Name System) . . . . . . . . . . . . . .
1.6 Servios de Hospedagem . . . . . . . . . . . . . . . . .
1.7 SEO (Search Engine Optimization) . . . . . . . . . . .
1.8 Arquitetura Web . . . . . . . . . . . . . . . . . . . . . .
1.9 Ativando o IIS e ASP Classic no Windows 7 . . . . . .
1.10 Instalao do Apache HTTP Server no Ubuntu 13.04
1.11 Apache HTTP Server no Mac OS X Mountain Lion . .
1.12 Resumo do Captulo . . . . . . . . . . . . . . . . . . . .
1.13 Prova . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
1
1
2
3
5
9
10
11
11
12
16
16
17
18
HTML
2.1 Introduo . . . . . . . . . . . . . . . . .
2.2 Estrutura Bsica . . . . . . . . . . . . . .
2.3 Editores HTML . . . . . . . . . . . . . . .
2.4 Ferramentas de Desenvolvimento Web
2.5 Exerccios de Fixao . . . . . . . . . . .
2.6 Semntica HTML . . . . . . . . . . . . .
2.7 Ttulos . . . . . . . . . . . . . . . . . . . .
2.8 Exerccios de Fixao . . . . . . . . . . .
2.9 Pargrafos . . . . . . . . . . . . . . . . . .
2.10 Character Entities . . . . . . . . . . . . .
2.11 Exerccios de Fixao . . . . . . . . . . .
2.12 Texto . . . . . . . . . . . . . . . . . . . . .
2.13 Exerccios de Fixao . . . . . . . . . . .
2.14 Listas . . . . . . . . . . . . . . . . . . . .
2.15 Exerccios de Fixao . . . . . . . . . . .
2.16 Iframes . . . . . . . . . . . . . . . . . . .
2.17 Links . . . . . . . . . . . . . . . . . . . . .
2.18 Exerccios de Fixao . . . . . . . . . . .
2.19 ncoras . . . . . . . . . . . . . . . . . . .
2.20 Exerccios de Fixao . . . . . . . . . . .
2.21 Imagens . . . . . . . . . . . . . . . . . . .
2.22 URLs absolutas e relativas . . . . . . . .
2.23 Exerccios de Fixao . . . . . . . . . . .
2.24 Tabelas . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
21
21
21
25
25
25
32
34
35
38
39
40
41
52
58
62
68
69
70
71
72
75
76
77
78
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
www.k19.com.br
iii
S UMRIO
2.25
2.26
2.27
2.28
2.29
2.30
2.31
2.32
2.33
2.34
2.35
2.36
2.37
2.38
2.39
2.40
2.41
2.42
2.43
2.44
2.45
2.46
2.47
2.48
2.49
2.50
2.51
2.52
2.53
2.54
2.55
Exerccios de Fixao . . . . . . . . . . .
Formulrios . . . . . . . . . . . . . . . .
Exerccios de Fixao . . . . . . . . . . .
Caixas de entrada especficas . . . . . .
Exerccios de Fixao . . . . . . . . . . .
Checkboxes e Radios . . . . . . . . . . .
Seleo de cores . . . . . . . . . . . . . .
Exerccios de Fixao . . . . . . . . . . .
Botes . . . . . . . . . . . . . . . . . . . .
Exerccios de Fixao . . . . . . . . . . .
Drop-down list . . . . . . . . . . . . . . .
Exerccios de Fixao . . . . . . . . . . .
Fieldset . . . . . . . . . . . . . . . . . . .
Exerccios de Fixao . . . . . . . . . . .
Autocomplete . . . . . . . . . . . . . . .
Exerccios de Fixao . . . . . . . . . . .
Campos ou botes desabilitados . . . .
Campos fixos . . . . . . . . . . . . . . . .
Exerccios de Fixao . . . . . . . . . . .
Validao . . . . . . . . . . . . . . . . . .
Exerccios de Fixao . . . . . . . . . . .
Partes de um documento HTML . . . .
Diviso de contedo . . . . . . . . . . .
Exerccios de Fixao . . . . . . . . . . .
Agrupando elementos . . . . . . . . . .
Erro: Fechamento inadequado das tags
Erro: Imagens sem texto alternativo . .
Erro: Criar listas com o elemento br . .
Exerccios Complementares . . . . . . .
Resumo do Captulo . . . . . . . . . . . .
Prova . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
83
85
91
93
96
99
100
100
103
105
106
108
109
110
111
112
112
113
114
115
116
117
123
123
124
124
124
125
125
133
135
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
3.15
3.16
Box Model . . . . . . . . .
Regras . . . . . . . . . . .
Aplicando CSS ao HTML
Comentrios . . . . . . .
Chrome DevTools . . . .
Exerccios de Fixao . .
Cores . . . . . . . . . . .
Unidades de medida . .
Backgrounds . . . . . . .
Exerccios de Fixao . .
Textos . . . . . . . . . . .
Exerccios de Fixao . .
Fontes . . . . . . . . . . .
Exerccios de Fixao . .
Listas . . . . . . . . . . .
Exerccios de Fixao . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
141
141
143
144
145
145
150
154
155
156
163
164
170
171
176
177
178
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
www.facebook.com/k19treinamentos
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
iii
S UMRIO
3.17
3.18
3.19
3.20
3.21
3.22
3.23
3.24
3.25
3.26
3.27
3.28
3.29
3.30
3.31
3.32
3.33
3.34
3.35
3.36
3.37
3.38
3.39
3.40
3.41
3.42
3.43
3.44
3.45
3.46
3.47
3.48
3.49
3.50
3.51
3.52
3.53
4
iv
iv
Bordas . . . . . . . . . . . . . . . . . .
Exerccios de Fixao . . . . . . . . .
Outline . . . . . . . . . . . . . . . . .
Exerccios de Fixao . . . . . . . . .
Sombras . . . . . . . . . . . . . . . . .
Exerccios de Fixao . . . . . . . . .
Margens . . . . . . . . . . . . . . . . .
Exerccios de Fixao . . . . . . . . .
Altura e Largura . . . . . . . . . . . .
Exerccios de Fixao . . . . . . . . .
Display e Visibilidade . . . . . . . . .
Exerccios de Fixao . . . . . . . . .
Opacidade . . . . . . . . . . . . . . .
Exerccios de Fixao . . . . . . . . .
Posicionamento . . . . . . . . . . . .
Exerccios de Fixao . . . . . . . . .
Overflow e clip . . . . . . . . . . . . .
Exerccios de Fixao . . . . . . . . .
Transformaes . . . . . . . . . . . .
Exerccios de Fixao . . . . . . . . .
Transies . . . . . . . . . . . . . . .
Exerccios de Fixao . . . . . . . . .
Animaes . . . . . . . . . . . . . . .
Exerccios de Fixao . . . . . . . . .
Seletores . . . . . . . . . . . . . . . .
Exerccios de Fixao . . . . . . . . .
Media Queries . . . . . . . . . . . . .
Exerccios de Fixao . . . . . . . . .
Sprites . . . . . . . . . . . . . . . . . .
Exerccios de Fixao . . . . . . . . .
Gradientes (Contedo Extra) . . . . .
Herana (Contedo Extra) . . . . . .
box-sizing (Contedo Extra) . . . . .
Design Responsivo (Contedo Extra)
Exerccios Complementares . . . . .
Resumo do Captulo . . . . . . . . . .
Prova . . . . . . . . . . . . . . . . . . .
JavaScript
4.1 Aplicando JavaScript ao HTML
4.2 Carregamento . . . . . . . . . .
4.3 Chrome DevTools . . . . . . . .
4.4 Exerccios de Fixao . . . . . .
4.5 Variveis . . . . . . . . . . . . .
4.6 Operadores . . . . . . . . . . . .
4.7 Controle de fluxo . . . . . . . .
4.8 Exerccios de Fixao . . . . . .
4.9 Objetos . . . . . . . . . . . . . .
4.10 Exerccios de Fixao . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
179
184
185
187
188
190
191
194
195
196
197
200
201
202
203
207
209
211
213
215
217
221
222
225
228
232
238
241
242
243
244
248
249
249
253
295
297
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
305
305
305
306
308
312
312
319
320
324
328
www.k19.com.br
S UMRIO
4.11
4.12
4.13
4.14
4.15
4.16
4.17
4.18
4.19
4.20
4.21
4.22
4.23
4.24
4.25
4.26
4.27
4.28
4.29
5
Funes . . . . . . . . . . . . . . .
Exerccios de Fixao . . . . . . .
Arrays . . . . . . . . . . . . . . . .
Strings . . . . . . . . . . . . . . . .
Exerccios de Fixao . . . . . . .
DOM - Document Object Model
Exerccios de Fixao . . . . . . .
Eventos . . . . . . . . . . . . . . .
Exerccios de Fixao . . . . . . .
Web Storage . . . . . . . . . . . .
Exerccios de Fixao . . . . . . .
History . . . . . . . . . . . . . . .
Exerccios de Fixao . . . . . . .
Geolocalizao . . . . . . . . . . .
Exerccios de Fixao . . . . . . .
Alarmes (Contedo Extra) . . . .
Exerccios Complementares . . .
Resumo do Captulo . . . . . . . .
Prova . . . . . . . . . . . . . . . . .
jQuery
5.1 Introduo . . . . . . . . . .
5.2 Exerccios de Fixao . . . .
5.3 Eventos . . . . . . . . . . . .
5.4 Exerccios de Fixao . . . .
5.5 Seletores . . . . . . . . . . .
5.6 Exerccios de Fixao . . . .
5.7 Efeitos e Animaes . . . . .
5.8 Exerccios de Fixao . . . .
5.9 Manipulao . . . . . . . . .
5.10 Exerccios de Fixao . . . .
5.11 Mais mtodos . . . . . . . .
5.12 AJAX . . . . . . . . . . . . . .
5.13 Exerccios de Fixao . . . .
5.14 Exerccios Complementares
5.15 Resumo do Captulo . . . . .
5.16 Prova . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
334
336
338
341
342
350
352
353
358
360
361
362
363
365
365
366
367
368
370
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
375
375
376
379
382
385
392
393
394
396
403
406
408
410
411
417
418
A Projeto
421
A.1 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421
B Quizzes
435
C Respostas
437
www.facebook.com/k19treinamentos
S UMRIO
vi
vi
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 tornam-se
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
I NTRODUO
Navegadores e Dispositivos
2
www.k19.com.br
I NTRODUO
As pessoas acessam sites e aplicaes web atravs de navegadores (browsers) como Chrome,
Firefox, Internet Explorer e Safari. Normalmente, esses navegadores possuem algumas diferenas
na forma de exibir as pginas web aos usurios. Antigamente, essas diferenas eram maiores. Com
o passar do tempo, os navegadores ficaram cada vez mais parecidos nesse aspecto. Contudo, os
desenvolvedores web ainda devem tomar cuidado com essas diferenas.
Figura 1.3: ndice de utilizao dos navegadores em Outubro de 2013 (fonte http://gs.statcounter.com/)
I NTRODUO
www.k19.com.br
I NTRODUO
web solicitada, o navegador a exibe para ns. As mensagens de requisio e resposta trocadas entre
o navegador e o web server so definidas pelo protocolo HTTP.
Requisio HTTP
Resposta HTTP
HTTP/1.1 200 OK
Date: Mon, 23 May 2014 22:38:34 GMT
Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)
Last-Modified: Wed, 08 Jan 2014 23:11:55 GMT
Content-Type: text/html; charset=UTF-8
Content-Length: 131
Connection: Keep-Alive
<html>
<head>
<title>K19 - Treinamentos</title>
</head>
<body>
K02 - Desenvolvimento Web com HTML, CSS e JavaScript
</body>
</html>
Considere um site ou uma aplicao web implantado em um Web Server que est conectado a
uma rede. A princpio, qualquer navegador executando em um dispositivo conectado a essa rede
pode realizar requisies a esse Web Server.
Alguns softwares especializados so utilizados para administrar os sites e as aplicaes web implantadas nos Web Servers. Os principais so o Apache HTTP Server da Apache Software Foundation e o Internet Information Services (IIS) da Microsoft.
Domnios e endereos IP
Os dispositivos conectados a uma rede so identificados atravs de endereos formados por
sequncias de nmeros. Esses endereos so chamados de endereos IP. Em uma Intranet, quem
controla os endereos IP dos dispositivos conectados a prpria organizao que administra essa Intranet. Por outro lado, os endereos IP dos dispositivos conectados Internet so gerenciados pelos
provedores de acesso (ISP).
www.facebook.com/k19treinamentos
I NTRODUO
A princpio, para acessar uma pgina de um site ou de uma aplicao web, devemos conhecer o
endereo IP do Web Server que contm esse site ou essa aplicao web. Atualmente, o endereo IP do
Web Server onde o site da K19 est implantado 184.72.247.119. Podemos utilizar esse endereo IP
para acessar as pginas do site da K19. O endereo IP 200.144.183.244 est vinculado a um dos Web
Servers onde o site da USP est implantado. Tambm podemos acessar as pginas do site da USP
utilizando diretamente esse endereo IP. Analogamente, podemos acessar as pginas da Wikipdia
utilizando o endereo IP 208.80.152.130.
www.k19.com.br
I NTRODUO
Se voc tiver uma memria muito boa pode decorar os endereos IP dos sites que acessa com
maior frequncia. Mas, para maior parte das pessoas, seria impossvel decorar tantos nmeros. Para
resolver esse problema, os endereos IP so associados a domnios. Veja alguns exemplos de domnios.
www.k19.com.br
www.usp.br
www.wikipedia.org
As pessoas conseguem decorar ou deduzir os domnios bem mais facilmente do que os endereos
IP.
www.facebook.com/k19treinamentos
I NTRODUO
H uma outra vantagem importante dos domnios sobre os endereos IP. Em alguns casos, o endereo IP de um Web Server precisa ser alterado. Geralmente, essa modificao ocorre por motivos
tcnicos. Supondo que essa mudana ocorra, quem estiver acessando esse Web Server atravs do
endereo IP antigo no conseguir mais acess-lo dessa forma. Por outro lado, quem estiver acessando esse Web Server atravs do domnio dele poder continuar acessando da mesma forma pois
esse domnio pode ser facilmente associado ao novo endereo IP.
8
www.k19.com.br
I NTRODUO
I NTRODUO
10
H diversos servidores DNS que so pblicos. Eis uma lista com alguns deles.
OpenDNS (208.67.222.222 e 208.67.220.220)
Google Public DNS (8.8.8.8 e 8.8.4.4)
Level3 (209.244.0.3 e 209.244.0.4)
Servios de Hospedagem
Uma organizao pode possuir computadores atuando como Web Servers em sua prpria infraestrutura ou na infraestrutura de empresas especializadas. Em determinadas situaes, a primeira
possibilidade mais conveniente.
Por exemplo, normalmente, as instituies bancrias preferem manter os seus sites e as suas
aplicaes web em Web Servers dentro da sua prpria infraestrutura. Essa abordagem permite um
controle maior da comunicao entre essas instituies e os seus clientes. Mas, ela exige grandes
investimentos. Para garantir que os seus Web Servers estejam sempre funcionando, essas instituies
bancrias mantm profissionais 24 horas por dia 7 dias por semana (24/7). Caso contrrio, os sites
ou as aplicaes web dessas instituies podem ficar fora do ar e gerar grandes prejuzos.
Por outro lado, muitas vezes, mais conveniente manter os Web Servers de uma organizao na
infraestrutura de uma empresa especializada. Dessa forma, a responsabilidade de mant-los funcionando delegada essa empresa. Essa abordagem, geralmente, diminui os custos. Contudo, o
controle delegado a uma outra empresa. O servio oferecido por essas empresas denominado
servio de hospedagem. Eis uma lista de empresas que oferecem esse tipo de servio.
Amazon
Localweb
10
www.k19.com.br
11
I NTRODUO
UOL
Arquitetura Web
Vamos utilizar um diagrama para apresentar uma viso geral da arquitetura web.
www.facebook.com/k19treinamentos
11
I NTRODUO
12
Observe que o diagrama foi dividido em duas partes: client side e server side. Alguns profissionais se especializam no client side e outros no server side. Outra denominao possvel para client
side front-end e para server side back-end.
Por exemplo, um web designer deve ter bons conhecimentos do client side. Por outro lado, um
programador web deve ter bons conhecimentos do server side.
Geralmente, os web designers no precisam ter conhecimento do server side mas t-lo pode ser
til. Por outro lado, os programadores web precisam conhecer razoavelmente bem o client side.
Nesse treinamento, estamos interessados especificamente no client side.
www.k19.com.br
13
I NTRODUO
www.facebook.com/k19treinamentos
13
I NTRODUO
14
www.k19.com.br
15
I NTRODUO
www.facebook.com/k19treinamentos
15
I NTRODUO
16
Configurao do Userdir
Configure o userdir do Apache HTTP Server seguindo passos abaixo.
sudo a2enmod userdir
16
www.k19.com.br
17
I NTRODUO
Resumo do Captulo
No h um critrio exato para diferenciar o que um site e o que uma aplicao web.
IP.
17
I NTRODUO
10
18
11
Organizaes de grande porte costuma implantar os seus sites e as suas aplicaes web em Web
Servers dentro da sua prpria infraestrutura. Por outro lado, organizaes menores, normalmente,
preferem contratam empresas especializadas no servio de hospedagem.
12
13
Podemos dividir a arquitetura web em duas partes: client side e server side.
Prova
18
www.k19.com.br
19
I NTRODUO
Minha Pontuao
Pontuao Mnima:
www.facebook.com/k19treinamentos
Pontuao Mxima:
19
I NTRODUO
20
20
www.k19.com.br
CAPTULO
HTML
Introduo
Quando acessamos uma pgina web, estamos interessados na informao contida nessa pgina.
Essa informao pode estar na forma de texto, imagem ou vdeo. 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, a previso que ela se torne a
verso recomendada no final de 2014. Porm, os navegadores j implementam diversos recursos do
HTML5. A especificao est disponvel no endereo http://www.w3.org/TR/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
Basicamente, um documento HTML composto por elementos hierarquicamente organizados.
Para inserir um elemento em um documento HTML, devemos utilizar as tags correspondentes a
esse elemento. As tags so definidas com parnteses angulares (< e >). Os elementos podem possuir
atributos e contedo. Os atributos so formados por nome e valor. Normalmente, os valores dos
atributos so definidos dentro de aspas dupla e o contedo dos elementos um texto ou outros
elementos.
www.facebook.com/k19treinamentos
21
HTML
22
Declarao do tipo de documento
<!DOCTYPE html>
Tag de abertura do elemento html
<html lang=pt-br>
Nome de atributo
<head>
Valor de atributo
<body>
Mais Sobre
A especificao do HTML5 define duas sintaxes distintas para produzir documentos
HTML. A primeira denominada sintaxe HTML e a segunda denominada sintaxe
XHTML. A maior parte dos autores recomendam a utilizao da sintaxe HTML. Nos exemplos
e nos exerccios dessa apostila, a preferncia ser pela sintaxe HTML.
Mais Sobre
De acordo com a especificao da linguagem HTML, alguns elementos so denomina-
22
www.k19.com.br
23
HTML
dos Normal Elements. Esses elementos so abertos com uma tag e fechados com
outra tag. Por exemplo, o elemento p um Normal Element. Observe a utilizao da tag de
abertura e da tag de fechamento do elemento p.
1 <p > K02 - Desenvolvimento Web com HTML , CSS e JavaScript </ p >
Mais Sobre
H tambm elementos denominados Void Elements. Esses elementos no possuem
contedo. Na sintaxe HTML, esses elementos so abertos e fechados com apenas uma
tag com ou sem o caractere /. Um exemplo de Void Element o elemento br.
1 <p >
2
K01 - Lgica de Programao < br >
3
K02 - Desenvolvimento Web com HTML , CSS e JavaScript < br / >
4
K03 - SQL e Modelo Relacional
5 </ p >
Os Void Elements so: area, base, br, col, embed, hr, img, input, keygen, link, meta,
param, source, track, wbr.
Na sintaxe XHTML, os Void Elements podem ser abertos e fechados na mesma tag ou em tags
separadas. Contudo, o caractere / obrigatrio.
1 <p >
2
K01 - Lgica de Programao < br / >
3
K02 - Desenvolvimento Web com HTML , CSS e JavaScript < br > </ br >
4
K03 - SQL e Modelo Relacional
5 </ p >
<!DOCTYPE>
Para um navegador exibir corretamente uma pgina web, devemos informar explicitamente o
tipo do documento. O tipo do documento informado com a declarao <!DOCTYPE>. Quando
conveniente, discutiremos as principais diferenas entre os tipos de documentos mais importantes.
Veja a declarao <!DOCTYPE> para os principais tipos de documentos.
1 <! DOCTYPE html >
Cdigo HTML 2.4: HTML 5
1 <! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.01// EN "
2
" http :// www . w3 . org / TR / html4 / strict . dtd " >
Cdigo HTML 2.5: HTML 4.01 Strict
1 <! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.01 Transitional // EN "
2
" http :// www . w3 . org / TR / html4 / loose . dtd " >
Cdigo HTML 2.6: HTML 4.01 Transitional
1 <! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.01 Frameset // EN "
www.facebook.com/k19treinamentos
23
HTML
2
24
" http :// www . w3 . org / TR / html4 / frameset . dtd " >
Cdigo HTML 2.7: HTML 4.01 Frameset
1 <! DOCTYPE html PUBLIC " -// W3C // DTD XHTML 1.0 Transitional // EN "
2
" http :// www . w3 . org / TR / xhtml1 / DTD / xhtml1 - transitional . dtd " >
Cdigo HTML 2.8: XHTML 1.0 Transitional
1 <! DOCTYPE html PUBLIC " -// W3C // DTD XHTML 1.0 Frameset // EN "
2
" http :// www . w3 . org / TR / xhtml1 / DTD / xhtml1 - frameset . dtd " >
Cdigo HTML 2.9: XHTML 1.0 Frameset
1 <! DOCTYPE html PUBLIC " -// W3C // DTD XHTML 1.1// EN "
2
" http :// www . w3 . org / TR / xhtml11 / DTD / xhtml11 . dtd " >
Cdigo HTML 2.10: XHTML 1.1
<html>
Os elementos HTML, com exceo do DOCTYPE, devem ser inseridos no contedo do elemento
html. Esse elemento aberto com a tag <html>, fechado com a tag </html> e deve conter exatamente um elemento head seguido de exatamente um elemento body.
Diversos autores recomendam a utilizao do atributo lang. Esse atributo indica a lngua utilizada no documento HTML ou na maior parte dele. Algumas ferramentas de leitura ou de traduo
de texto podem utilizar esse atributo para descobrir facilmente em qual lngua os textos contidos no
documento HTML ou na maior parte dele foram escritos.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
...
5
</ head >
6
< body >
7
...
8
</ body >
9 </ html >
<head>
A principal funo do elemento head agrupar informaes sobre o documento HTML (metainformao). So exemplos de metainformaes: o encoding, a taxa de atualizao, o autor, a descrio
e as palavras chaves do documento HTML.
1 < head >
2
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
3
< meta http - equiv = " refresh " content = " 30 " >
4
< meta name = " author " content = " Rafael Cosentino " >
5
< meta name = " description " content = " Cursos de Java e . NET " >
6
< meta name = " keywords " content = " curso java , curso C # " >
7 </ head >
O elemento head aberto e fechado pelas tags <head> e </head> respectivamente. Obrigatoriamente, salvo algumas poucas excees, o corpo do head deve conter exatamente uma ocorrncia do
elemento title. Esse elemento define o ttulo do documento HTML.
24
www.k19.com.br
25
HTML
<body>
O contedo de uma pgina web deve ser definido no corpo do elemento body. Por exemplo,
podemos inserir no corpo do body cabealhos, textos, listas, tabelas, entre outros componentes.
Esse elemento aberto pela tag <body> e fechado pela tag </body>.
1 < body >
2
< h1 > K02 - Desenvolvimento Web com HTML , CSS e JavaScript </ h1 >
3 </ body >
Comentrios
Podemos adicionar comentrios em um documento HTML dentro das tags <!-- e -->. Os comentrios so ignorados pelos navegadores.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
<! - - corpo do head -->
5
</ head >
6
< body >
7
<! - - corpo do body -->
8
</ body >
9 </ html >
Editores HTML
Documentos HTML podem ser criados em qualquer editor de texto bsico. Contudo, para ganhar produtividade, podemos utilizar ferramentas com mais recursos. H diversas opes de editores HTML, alguns gratuitos outros pagos. Nesse treinamento, utilizaremos o Netbeans como editor
HTML. Na verdade, o Netbeans oferece muito mais recursos alm do editor HTML. Contudo, agora,
no estamos interessados nesses outros recursos. Voc pode obter gratuitamente o Netbeans no endereo https://netbeans.org/.
Exerccios de Fixao
www.facebook.com/k19treinamentos
25
HTML
26
Importante
No Windows, utilizando o IIS (Internet Information Services) como Web Server, voc
deve salvar o projeto html em C:\inetpub\wwwroot. Lembre-se que necessrio
instalar o IIS conforme vimos anteriormente.
Importante
No Ubuntu, utilizando o Apache HTTP Server como Web Server, voc deve salvar o projeto html em /home/<USUARIO>/public_html. Lembre-se que necessrio instalar e configurar o Apache HTTP Server como vimos anteriormente.
26
www.k19.com.br
27
HTML
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao1.zip
27
HTML
28
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao2.zip
4
Utilize o Chrome DevTools ou o Firebug para analisar e modificar os elementos do documento
HTML.
28
www.k19.com.br
29
HTML
www.facebook.com/k19treinamentos
29
HTML
30
30
Utilize o Chrome DevTools ou o Firebug para analisar a requisio HTTP e a resposta HTTP.
www.k19.com.br
31
HTML
www.facebook.com/k19treinamentos
31
HTML
32
Semntica HTML
As placas de sinalizao so fundamentais para manter a ordem no trnsito. Cada placa possui
um significado especfico. A utilizao equivocada das placas de trnsito pode causar problemas
como colises de veculos.
Considere um cruzamento no qual proibido virar a esquerda ou a direita (exemplo: Av. Rebouas com Av Brasil ou Av. Prof. Francisco Morato com Av. Vital Brasil). Nesse cruzamento, o
funcionrio encarregado de instalar as placas de trnsito decidiu utilizar a sinalizao abaixo.
Essa sinalizao est totalmente equivocada. Ela indica a existncia de obstculos na pista que
obrigam a passagem dos veculos pelo lado direito ou pelo lado esquerdo. O motorista que conhece
o significado correto dessa placa pode decidir virar direita ou esquerda e sofrer uma coliso. Para
no gerar confuso o funcionrio poderia utilizar a placa abaixo.
Para manter a organizao no trnsito, a semntica(significado) das sinalizaes deve ser respeitada. Analogamente, no desenvolvimento web, fundamental respeitar o significado dos elementos
HTML.
32
www.k19.com.br
33
HTML
De acordo com a especificao da linguagem HTML, a maior parte dos elementos possuem 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.
No exemplo abaixo, 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.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Exemplo de uso correto da semntica HTML </ title >
6
</ head >
7
< body >
8
<p > Este um texto para mostrar o significado da tag p . </ p >
9
</ body >
10 </ html >
Cdigo HTML 2.17: Exemplo de uso correto da semntica HTML
Dessa vez, utilizamos o elemento address. De acordo com a especificao, esse elemento deve
ser utilizado para fornecer informaes de contato dos autores ou donos 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 relacionadas ao autor ou dono do documento.
www.facebook.com/k19treinamentos
33
HTML
34
Ttulos
Assim como em um livro, uma pgina web pode conter uma hierarquia de ttulos para estabelecer
uma diviso do seu contedo. Para inserir ttulos em uma pgina web, devemos utilizar os elementos
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 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Exemplo de ttulos </ title >
6
</ head >
7
< body >
8
< h1 > Ttulo 1 </ h1 >
9
< h2 > Ttulo 2 </ h2 >
10
< h3 > Ttulo 3 </ h3 >
11
< h4 > Ttulo 4 </ h4 >
12
< h5 > Ttulo 5 </ h5 >
13
< h6 > Ttulo 6 </ h6 >
14
</ body >
15 </ html >
Observe que os ttulos no foram exibidos lado a lado e sim um embaixo do outro. Geralmente,
os navegadores exibem os ttulos como blocos. Por padro, esses blocos ocupam todo o espao horizontal do elemento onde os ttulos esto contidos. No exemplo, os ttulos esto contidos no corpo
da pgina. Portanto, ocupam todo o espao horizontal da pgina. Esse o comportamento padro
dos block-level elements. Utilizando as ferramentas de desenvolvimento do Chrome, podemos visualizar claramente esses blocos.
34
www.k19.com.br
35
HTML
Geralmente, os navegadores utilizam tamanhos diferentes de fonte para cada ttulo. No existe
um padro de tamanho e de fonte entre os navegadores. Em outras palavras, os ttulos de uma pgina
web podem ser exibidos de maneiras diferentes em navegadores distintos. Para padronizar a exibio
dos ttulos, podemos aplicar as regras CSS.
Devemos utilizar os ttulos com cautela, pois eles so usados como critrio de ranqueamento
por buscadores como Google, Yahoo e Bing. O uso correto dos elementos de ttulo fortemente recomendado pelos especialistas em SEO (Search Engine Optimization). Para utiliz-los corretamente,
devemos respeitar basicamente as seguintes regras.
Manter a ordem lgica dos ttulos. Um elemento h2 deve ser precedido de um elemento h1.
Um elemento h3 deve ser precedido de um elemento h2. E assim sucessivamente.
O ttulo de uma seo deve descrever bem o contedo dela.
Exerccios de Fixao
Crie um novo documento HTML chamado titulos.html com o contedo abaixo no projeto html
em Site Root.
6
www.facebook.com/k19treinamentos
35
HTML
36
6
</ head >
7
< body >
8
< h1 > K02 - Desenvolvimento Web com HTML , CSS e Javascript </ h1 >
9
10
<p > Atualmente , praticamente todos os sistemas corporativos possuem
11
interfaces web . Para quem deseja atuar no mercado de desenvolvimento
12
de software , obrigatrio o conhecimento das linguagens : HTML , CSS
13
e JavaScript . </ p >
14
15
<p > Essas linguagens so utilizadas para o desenvolvimento da camada de
16
apresentao das aplicaes web . </ p >
17
18
< h2 >Pr - requisitos </ h2 >
19
20
< ul >
21
< li > Familiaridade com algum sistema operacional ( Windows / Linux / Mac OS X ) </ li >
22
< li > Lgica de programao </ li >
23
</ ul >
24
25
< h2 > Agenda </ h2 >
26
27
< h3 > Aos domingos </ h3 >
28
29
< ul >
30
< li > 10/11/2013 das 08:00 s 14:00 </ li >
31
< li > 23/02/2014 das 14:00 s 20:00 </ li >
32
</ ul >
33
34
< h3 > Aos sbados </ h3 >
35
36
< ul >
37
< li > 15/03/2014 das 08:00 s 14:00 </ li >
38
< li > 26/04/2014 das 14:00 s 20:00 </ li >
39
</ ul >
40
</ body >
41 </ html >
Cdigo HTML 2.20: titulos.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao6.zip
Utilize o Chrome DevTools ou o Firebug para analisar os elementos que formam o documento
HTML, a requisio HTTP e a resposta HTTP.
8
Imagine que voc possua um site de culinria no qual voc disponibiliza algumas receitas. Crie
uma pgina com uma receita fictcia utilizando ttulos para organizar contedo. Utilize quantos nveis de ttulo achar necessrio. Para isso, adicione um arquivo chamado receita.html no projeto
html em Site Root.
36
www.k19.com.br
37
HTML
5
< title > Como preparar um delicioso macarro instantneo em 6 min . </ title >
6
</ head >
7
< body >
8
< h1 > Como preparar um delicioso macarro instantneo em 6 min . </ h1 >
9
10
<p > Com esta receita voc se tornar um profissional na arte de
11
preparar um macarro instantneo . </ p >
12
13
< h2 > Ingredientes </ h2 >
14
15
< ul >
16
< li > Macarro instantneo da sua marca favorita </ li >
17
< li > 600 ml de gua </ li >
18
</ ul >
19
20
< h2 > Modo de preparo </ h2 >
21
22
< h3 > No micro - ondas </ h3 >
23
24
<p > Coloque o macarro instantneo em um recipiente com 600 ml de gua e
25
programe o micro ondas para 6 minutos . Aperte o boto iniciar ou
26
equivalente . </ p >
27
28
< h4 > Dicas </ h4 >
29
30
< ul >
31
< li >
32
Utilize um recipiente que permita o macarro ficar totalmente
33
submerso na gua .
34
</ li >
35
< li >
36
Quando ouvir o bip , no saia correndo . O micro ondas no explodir .
37
O bip significa que o macarro est pronto .
38
</ li >
39
</ ul >
40
41
< h3 > No fogo </ h3 >
42
43
<p >
44
Coloque o macarro instantneo em uma panela com 600 ml de gua e
45
leve ao fogo por 3 minutos .
46
</ p >
47
48
< h4 > Dicas </ h4 >
49
50
< ul >
51
< li >
52
Utilize uma panela que permita o macarro ficar totalmente
53
submerso na gua .
54
</ li >
55
< li >
56
No se distraia com a televiso ou qualquer outra coisa .
57
Voc poder queimar a sua refeio
58
</ li >
59
</ ul >
60
</ body >
61 </ html >
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao8.zip
www.facebook.com/k19treinamentos
37
HTML
38
Utilize o Chrome DevTools ou o Firebug para analisar os elementos que formam o documento
HTML, a requisio HTTP e a resposta HTTP.
Pargrafos
Os pargrafos de uma pgina web so definidos atravs do elemento p. Assim como os ttulos,
normalmente, os navegadores definem os pargrafos como block-level elements. Dessa forma, por
padro, eles ocupam horizontalmente todo o espao do elemento pai.
Os navegadores ajustam os textos dos pargrafos largura do elemento pai. As quebras de linha
necessrias so inseridas automaticamente. Os espaos excedentes definidos em um documento
HTML entre as palavras de um pargrafo so desconsiderados pelos navegadores na exibio das
pginas web. Analogamente, as quebras de linha presentes no documento HTML tambm so desconsideradas pelos navegadores.
Caso seja necessrio forar uma quebra de linha entre duas palavras contidas em um pargrafo,
podemos utilizar o elemento br. Quando um pargrafo contm palavras muito longas, os navegadores podem ter dificuldades para ajustar as quebras de linha. Podemos indicar explicitamente com o
elemento wbr, como as palavras podem ser quebradas. Veja o exemplo abaixo.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Exemplo de pargrafos </ title >
6
</ head >
7
< body >
8
< h1 > Exemplo de pargrafos </ h1 >
9
<p >
10
Este
pargrafo
serve para demonstrar a
insero
11
automtica
das
quebras
de
linha .
12
13
Observe tambm que
os espaos
excedentes
contidos
14
no
documento
HTML
entre as palavras
15
desse pargrafo
so
desconsiderados
16
17
18
na exibio da
pgina web .
19
20
As
quebras de
linha
tambm
so
21
desconsideradas .
O navegador
ajusta o
texto
22
desse
pargrafo
ao espao
horizontal
do
23
corpo
d
pgina .
24
</ p >
25
26
<p >
27
Neste pargrafo mostramos a insero de uma quebra de linha forada .
28
< br > Percebeu ? < br > Alm disso , podemos indicar ao navegador como quebrar
29
palavra otorrino < wbr > laringo < wbr > logista otorrino < wbr > laringo < wbr > logista
30
otorrino < wbr > laringo < wbr > logista otorrino < wbr > laringo < wbr > logista
31
otorrino < wbr > laringo < wbr > logista otorrino < wbr > laringo < wbr > logista
32
otorrino < wbr > laringo < wbr > logista otorrino < wbr > laringo < wbr > logista
33
otorrino < wbr > laringo < wbr > logista .
34
</ p >
35
</ body >
36 </ html >
38
www.k19.com.br
39
HTML
Character Entities
Para inserir determinados caracteres em um documento HTML, devemos utilizar o cdigo do
caractere desejado. A utilizao desses cdigos evita problemas de encoding na exibio das pginas
web. Voc pode conhecer esses caracteres e os seus respectivos cdigos atravs do seguinte endereo
http://dev.w3.org/html5/html-author/charref. Esses caracteres so conhecidos como Character Entities ou HTML Entities. Veja o exemplo a seguir.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Exemplo de character entities </ title >
6
</ head >
7
< body >
8
< h1 > Exemplo de character entities </ h1 >
9
< ul >
10
< li > & starf ; & bigstar ; &# x02605 ; ★ </ li >
11
< li > & phone ; &# x0260E ; ☎ </ li >
12
< li > & female ; &# x02640 ; ♀ </ li >
13
< li > & sung ; &# x0266A ; ♪ </ li >
14
</ ul >
15
</ body >
16 </ html >
www.facebook.com/k19treinamentos
39
HTML
40
Exerccios de Fixao
10
Crie um novo documento HTML chamado paragrafos.html no projeto html em Site Root.
40
www.k19.com.br
41
HTML
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao10.zip
11
12
Crie um novo documento HTML chamado character-entities.html no projeto html em Site
Root.
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao12.zip
13
Texto
Texto pr-formatado
Como vimos, os navegadores desconsideram os espaos excedentes entre as palavras contidas
em um documento HTML assim como desconsideram as quebras de linha. Contudo, possvel inserir texto formatado com quantos espaos e quebras de linha desejarmos atravs do elemento pre.
O texto contido no contedo de um elemento pre exibido com todos os espaos e quebras de linha
inseridos no documento HTML. Alm disso, os navegadores costumam utilizar fonte mono espaada
para mostrar esse texto.
www.facebook.com/k19treinamentos
41
HTML
42
Assim como os ttulos e os pargrafos, normalmente, os navegadores definem os textos prformatados como block-level element. Dessa forma, por padro, eles ocupam todo o espao horizontal do elemento pai.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
fonte
Cdigo
Para adicionar cdigos em um documento HTML, devemos utilizar o elemento code. Normalmente, esse elemento utilizado para definir cdigos escritos em alguma linguagem de programao. Normalmente, os navegadores utilizam fonte mono espaada para exibir o contedo desse elemento.
Diferentemente dos ttulos, dos pargrafos e dos textos pr-formatados, normalmente, os navegadores definem os cdigos como inline-level elements. Dessa forma, por padro, os cdigos
ocupam horizontalmente somente o espao necessrio.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Exemplo de cdigos </ title >
42
www.k19.com.br
43
HTML
6
</ head >
7
< body >
8
< h1 > Exemplo de cdigos </ h1 >
9
<p >
10
Em Java , utilizamos o cdigo < code > System . out . println ( " K19 " ) ; </ code >.
11
Em C # , utilizamos o cdigo < code > System . Console . WriteLine ( " K19 " ) ; </ code >.
12
</ p >
13
</ body >
14 </ html >
Cdigo HTML 2.27: Exemplo de cdigo
Elemento i
A especificao da linguagem HTML 5 no muito precisa na definio da semntica do elemento i. Ela indica a utilizao desse elemento para definir nomes cientficos, termos tcnicos, expresses idiomticas em outras lnguas, transliteraes, pensamentos. Esse elemento tambm pode
ser utilizado para determinar textos que devem ser lidos com voz ou humor alterado. Dessa forma,
os sintetizadores de voz podem fazer a leitura do texto de forma mais adequada. Normalmente, os
navegadores definem o i como inline-level element e exibem o seu contedo em itlico.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Exemplo de utilizao do elemento i </ title >
6
</ head >
7
< body >
8
< h1 > Exemplo de utilizao do elemento i </ h1 >
9
< ul >
10
< li > Porquinho - da - ndia ou <i > Cavia porcellus </ i > </ li >
11
< li > <i > Backup </ i >( cpia de segurana ) </ li >
12
< li > <i > shoot the breeze </ i >( bater papo ou jogar conversa fora ) </ li >
13
< li > <i > Moskv </ i >( transliterao da palavra Moscou em russo ) </ li >
14
< li > <i > Se no sabes , aprende ; se j sabes , ensina . </ i > ( Confcio ) </ li >
15
</ ul >
16
</ body >
17 </ html >
Cdigo HTML 2.28: Exemplo de utilizao do elemento i
www.facebook.com/k19treinamentos
43
HTML
44
Elemento b
A especificao da linguagem HTML 5 no muito precisa na definio da semntica do elemento b. Ela indica, por exemplo, a utilizao desse elemento para definir as palavras chave do resumo de um documento e o nome do produto em texto de avaliao. Normalmente, os navegadores
definem o b como inline-level element e exibem o contedo em negrito.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Exemplo de utilizao do elemento b </ title >
6
</ head >
7
< body >
8
< h1 > Exemplo de utilizao do elemento b </ h1 >
9
<p >
10
Atualmente , praticamente todos os <b > sistemas corporativos </ b >
11
possuem <b > interfaces web </ b >. Para quem deseja atuar no mercado
12
de <b > desenvolvimento de software </ b > , obrigatrio o conhecimento
13
das linguagens : <b > HTML </ b > , <b > CSS </ b > e <b > JavaScript </ b >.
14
</ p >
15
</ body >
16 </ html >
Cdigo HTML 2.29: Exemplo de utilizao do elemento b
44
www.k19.com.br
45
HTML
www.facebook.com/k19treinamentos
45
HTML
46
Citaes
Podemos definir citaes longas ou curtas com os elementos blockquote e q respectivamente.
Por padro, o elemento blockquote exibido como elemento de bloco e o elemento q exibido
como elemento de linha. Esses dois elementos possuem o atributo cite que deve ser utilizado para
indicar a fonte da citao.
Tambm podemos citar, com o elemento cite, ttulos de trabalhos, livros, msicas, filmes, programas de TV, peas de teatro, entre outros. Por padro, esse elemento exibido como elemento de
linha.
Normalmente, os navegadores definem o blockquote como block-level element. Por outro lado,
o q e o cite, normalmente, so definidos como inline-level elements.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Exemplo de citaes </ title >
6
</ head >
7
< body >
8
< h1 > Exemplo de citaes </ h1 >
9
< blockquote cite = " http :// en . wikipedia . org / wiki / Computer " >
10
<p >
11
A computer is a general purpose device that can be programmed
12
to carry out a set of arithmetic or logical operations . Since a
13
sequence of operations can be readily changed , the computer
14
can solve more than one kind of problem .
15
</ p >
16
17
<p >
18
Conventionally , a computer consists of at least one processing
19
element , typically a central processing unit ( CPU ) and some form
20
of memory . The processing element carries out arithmetic and
21
logic operations , and a sequencing and control unit that can
22
change the order of operations based on stored information .
23
Peripheral devices allow information to be retrieved from an
24
external source , and the result of operations saved and retrieved .
25
</ p >
26
</ blockquote >
27
46
www.k19.com.br
47
HTML
28
<p >
29
Nelson Rodrigues disse :
30
<q cite = " http :// pt . wikipedia . org / wiki / Nelson_Rodrigues " >
31
O adulto no existe . O homem um menino perene
32
</ q >.
33
</ p >
34
35
<p >
36
A pea < cite >A mulher sem pecado </ cite > de Nelson Rodrigues estreou
37
em 1941 no Rio de Janeiro .
38
</ p >
39
</ body >
40 </ html >
Cdigo HTML 2.32: Exemplo de citaes
Abreviaes
Podemos definir abreviaes com o elemento abbr. Por padro, esse elemento exibido como
elemento de linha. O atributo title desse elemento utilizado para definir um tooltip. Normalmente,
os navegadores definem esse elemento como inline-level element
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Exemplo de abreviaes </ title >
6
</ head >
7
< body >
8
< h1 > Exemplo de abreviaes </ h1 >
9
<p >
10
O < abbr title = " Instituto de Matemtica e Estatstica " > IME </ abbr >
11
uma das unidades da < abbr title = " Universidade de So Paulo " > USP </ abbr >.
12
</ p >
13
</ body >
14 </ html >
Cdigo HTML 2.33: Exemplo de abreviaes
www.facebook.com/k19treinamentos
47
HTML
48
Definies
Podemos inserir definies em um documento HTML com o elemento dfn. Por padro, esse
elemento exibido como elemento de linha. Normalmente, os navegadores definem o dfn como
inline-level element
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Exemplo de definies </ title >
6
</ head >
7
< body >
8
< h1 > Exemplo de definies </ h1 >
9
<p >
10
Um < dfn > pingado </ dfn > um copo de caf com um pouco de leite . < br >
11
Uma < dfn > bomba de chocolate </ dfn > um doce de padaria feito com
12
massa de farinha de trigo com recheio cremoso e cobertura de chocolate .
13
</ p >
14
</ body >
15 </ html >
Cdigo HTML 2.34: Exemplo de definies
48
www.k19.com.br
49
HTML
Alteraes
Em alguns casos, importante informar que o texto de um documento HTML sofreu alteraes.
Um texto que foi acrescentado em um documento HTML deve ser definido com o elemento ins.
Um texto que no faz mais parte do documento deve ser definido com o elemento del. Um texto
que deixou de ser correto, preciso ou relevante deve ser definido com o elemento s. Por padro,
esses elementos so exibidos como elementos de linha. Normalmente, os navegadores definem esses
elementos como inline-level elements.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Exemplo de alteraes </ title >
6
</ head >
7
< body >
8
< h1 > Exemplo de alteraes </ h1 >
9
<p >
10
Natal a capital do Rio Grande do Norte . < ins > Sua fundao foi
11
em 25 de dezembro de 1599. </ ins > < del >A rea total dessa cidade
12
167 ,263 km < sup >2 </ sup > </ del >. <s > De acordo com o IBGE , a populao
13
dessa cidade de 774.230 habitantes . </ s > De acordo com o IBGE a
14
populao dessa cidade de 803.739 habitantes .
15
</ p >
16
</ body >
17 </ html >
Cdigo HTML 2.35: Exemplo de alteraes
Os elementos ins e del possuem os atributos cite e datetime. O atributo cite deve ser utilizado
para indicar a URL de um documento com as justificativas da alterao. O atributo datetime deve
ser utilizado para informar quando ocorreu a alterao.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Exemplo de alteraes </ title >
6
</ head >
7
< body >
8
< h1 > Exemplo de alteraes </ h1 >
9
<p >
10
Natal a capital do Rio Grande do Norte . < ins cite = " ins - explicacao . html "
11
datetime = " 2013 -10 -15 T22 :55:03 Z " > Sua fundao foi em 25 de dezembro de
www.facebook.com/k19treinamentos
49
HTML
50
12
1599. </ ins > < del cite = " del - explicacao . html " datetime = " 2013 -10 -10 T17 :43:07 Z " >A
13
rea total dessa cidade 167 ,263 km < sup >2 </ sup > </ del >. <s > De acordo com o
14
IBGE , a populao dessa cidade de 774.230 habitantes . </ s > De acordo com o
15
IBGE a populao dessa cidade de 803.739 habitantes .
16
</ p >
17
</ body >
18 </ html >
Data e hora
O elemento time permite que datas e horrios sejam definidos em um documento HTML. H
duas formas de utilizar esse elemento. A primeira definir a data e o horrio desejado no contedo do elemento time. A segunda definir a data e o horrio desejado no valor do atributo datetime. Nessas duas opes, as datas e os horrios devem ser escritos seguindo o formato definido na
especificao da linguagem HTML (http://www.w3.org/TR/html5/text-level-semantics.html#
the-time-element). Quando utilizamos o atributo datetime, o contedo do elemento time no precisa seguir um formato especfico. Normalmente, os navegadores definem o time como inline-level
element.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Exemplo de datas e horas </ title >
6
</ head >
7
< body >
8
< h1 > Exemplo de datas e horas </ h1 >
9
< ul >
10
< li > < time > 2010 -08 </ time > </ li >
11
< li > < time > 1984 -10 -30 </ time > </ li >
12
< li > < time > 12 -25 </ time > </ li >
13
< li > < time > 09:00 </ time > </ li >
14
< li > < time > 2013 -12 -25 23:59 </ time > </ li >
15
< li > < time datetime = " 2010 -08 " > Fundao da K19 </ time > </ li >
16
< li > < time datetime = " 1984 -10 -30 " > Aniversrio do Rafael </ time > </ li >
17
< li > < time datetime = " 12 -25 " > Natal </ time > </ li >
18
< li > < time datetime = " 09:00 " > Horrio de Entrada </ time > </ li >
19
< li > < time datetime = " 2013 -12 -31 23:59:59 " > Ano Novo 2014 </ time > </ li >
20
</ ul >
21
</ body >
22 </ html >
50
www.k19.com.br
51
HTML
Texto marcado
O elemento mark permite que determinados trechos de um texto sejam marcados. Normalmente, os navegadores definem o mark como inline-level element.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Exemplo de texto marcado </ title >
6
</ head >
7
< body >
8
< h1 > Exemplo de texto marcado </ h1 >
9
<p >
10
< mark > Java </ mark > e < mark >C # </ mark > so linguagens de programao
11
< mark > orientadas a objeto </ mark >.
12
</ p >
13
</ body >
14 </ html >
Cdigo HTML 2.38: Exemplo de texto marcado
www.facebook.com/k19treinamentos
51
HTML
52
Exerccios de Fixao
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
fonte
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao14.zip
15
16
Crie um novo documento HTML chamado codigo.html no projeto html em Site Root.
52
www.k19.com.br
53
HTML
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao16.zip
17
18
Crie um novo documento HTML chamado i.html no projeto html em Site Root.
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao18.zip
19
20
Crie um novo documento HTML chamado b.html no projeto html em Site Root.
www.facebook.com/k19treinamentos
53
HTML
54
15
</ body >
16 </ html >
Cdigo HTML 2.42: b.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao20.zip
21
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao22.zip
23
54
www.k19.com.br
55
HTML
9
<p >
10
O < strong > Brasil </ strong > o nico
11
pas que ganhou < em > cinco vezes </ em >
12
a < strong > copa do mundo de futebol </ strong >.
13
</ p >
14
</ body >
15 </ html >
Cdigo HTML 2.44: texto-importante-enfatizado.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao24.zip
25
26
Crie um novo documento HTML chamado citacoes.html no projeto html em Site Root.
www.facebook.com/k19treinamentos
55
HTML
56
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao26.zip
27
28
Crie um novo documento HTML chamado abreviacoes.html no projeto html em Site Root.
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao28.zip
29
30
Crie um novo documento HTML chamado definicoes.html no projeto html em Site Root.
56
www.k19.com.br
57
HTML
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao30.zip
31
32
Crie um novo documento HTML chamado alteracoes.html no projeto html em Site Root.
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao32.zip
33
34
Crie um novo documento HTML chamado data-hora.html no projeto html em Site Root.
www.facebook.com/k19treinamentos
57
HTML
58
15
< li > < time
16
< li > < time
17
< li > < time
18
< li > < time
19
< li > < time
20
</ ul >
21
</ body >
22 </ html >
datetime = " 2010 -08 " > Fundao da K19 </ time > </ li >
datetime = " 1984 -10 -30 " > Aniversrio do Rafael </ time > </ li >
datetime = " 12 -25 " > Natal </ time > </ li >
datetime = " 09:00 " > Horrio de Entrada </ time > </ li >
datetime = " 2013 -12 -31 23:59:59 " > Ano Novo 2014 </ time > </ li >
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao34.zip
35
36
Crie um novo documento HTML chamado mark.html no projeto html em Site Root.
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao36.zip
37
Listas
A linguagem HTML define trs tipos distintos de listas.
Lista de descries
58
www.k19.com.br
59
HTML
Lista de descries
Para criar uma lista de descries, devemos utilizar o elemento dl. Essas listas so formadas
por termos ou nomes e as suas respectivas descries. Os termos ou nomes so definidos com o
elemento dt. As descries so definidas com o elemento dd. Normalmente, os navegadores definem
todos esses elementos como block-level elements.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Exemplo de lista de descries </ title >
6
</ head >
7
< body >
8
< h1 > Exemplo de lista de descries </ h1 >
9
< dl >
10
< dt > K01 - Lgica de Programao </ dt >
11
< dd >
12
Conhecimentos em Lgica de Programao o pr - requisito fundamental
13
para que uma pessoa consiga aprender qualquer Linguagem de Programao ...
14
</ dd >
15
< dt > K02 - Desenvolvimento Web com HTML , CSS e JavaScript </ dt >
16
< dd >
17
Atualmente , praticamente todos os sistemas corporativos possuem
18
interfaces web . Para quem deseja atuar no mercado de desenvolvimento ...
19
</ dd >
20
< dt > K03 - SQL e Modelo Relacional </ dt >
21
< dd >
22
Como as aplicaes corporativas necessitam armazenar dados fundamental
23
que os desenvolvedores possuam conhecimentos sobre persistncia de dados .
24
</ dd >
25
</ dl >
26
</ body >
27 </ html >
Cdigo HTML 2.51: Exemplo de lista de descries
www.facebook.com/k19treinamentos
59
HTML
60
60
www.k19.com.br
61
HTML
10
11
< ul >
12
< li > Conhecimento de algum sistema operacional ( Windows / Linux / MacOS X ) </ li >
13
< li > Lgica de programao </ li >
14
</ ul >
15
</ body >
16 </ html >
Cdigo HTML 2.53: Exemplo de lista sem ordem
Listas aninhadas
Uma lista pode ser definida dentro de outra lista. Quando listas sem ordem so aninhadas, normalmente, os navegadores alternam o marcadores dos itens.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Exemplo de listas aninhadas </ title >
6
</ head >
7
< body >
8
< h1 > Exemplo de listas aninhadas </ h1 >
9
< h2 > Continentes </ h2 >
10
< ul >
11
< li >
12
Europa
13
< ul >
14
< li > Portugual </ li >
15
< li > Frana </ li >
16
< li > Alemanha </ li >
17
</ ul >
18
</ li >
19
< li >
20
sia
21
< ul >
22
< li > Japo </ li >
23
< li > China </ li >
24
< li > ndia </ li >
25
</ ul >
26
</ li >
27
</ ul >
28
< h2 > Cronograma da minha viagem </ h2 >
29
< ol >
30
< li >
31
Europa
www.facebook.com/k19treinamentos
61
HTML
62
32
< ol >
33
< li > Portugual </ li >
34
< li > Frana </ li >
35
< li > Alemanha </ li >
36
</ ol >
37
</ li >
38
< li >
39
sia
40
< ol >
41
< li > Japo </ li >
42
< li > China </ li >
43
< li > ndia </ li >
44
</ ol >
45
</ li >
46
</ ol >
47
</ body >
48 </ html >
Cdigo HTML 2.54: Exemplo de listas aninhadas
Exerccios de Fixao
38
Crie um novo documento HTML chamado lista-descricoes.html no projeto html em Site Root.
62
www.k19.com.br
63
HTML
5
< title > Exemplo de lista de descries </ title >
6
</ head >
7
< body >
8
< h1 > Exemplo de lista de descries </ h1 >
9
< dl >
10
< dt > K01 - Lgica de Programao </ dt >
11
< dd >
12
Conhecimentos em Lgica de Programao o pr - requisito fundamental
13
para que uma pessoa consiga aprender qualquer Linguagem de Programao ...
14
</ dd >
15
< dt > K02 - Desenvolvimento Web com HTML , CSS e JavaScript </ dt >
16
< dd >
17
Atualmente , praticamente todos os sistemas corporativos possuem
18
interfaces web . Para quem deseja atuar no mercado de desenvolvimento ...
19
</ dd >
20
< dt > K03 - SQL e Modelo Relacional </ dt >
21
< dd >
22
Como as aplicaes corporativas necessitam armazenar dados fundamental
23
que os desenvolvedores possuam conhecimentos sobre persistncia de dados .
24
</ dd >
25
</ dl >
26
</ body >
27 </ html >
Cdigo HTML 2.55: lista-descricoes.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao38.zip
39
40
Crie um novo documento HTML chamado lista-com-ordem.html no projeto html em Site Root.
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao40.zip
www.facebook.com/k19treinamentos
63
HTML
41
64
42
Crie um novo documento HTML chamado lista-sem-ordem.html no projeto html em Site Root.
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao42.zip
43
44
Crie um novo documento HTML chamado listas-aninhadas.html no projeto html em Site Root.
64
www.k19.com.br
65
HTML
20
sia
21
< ul >
22
< li > Japo </ li >
23
< li > China </ li >
24
< li > ndia </ li >
25
</ ul >
26
</ li >
27
</ ul >
28
< h2 > Cronograma da minha viagem </ h2 >
29
< ol >
30
< li >
31
Europa
32
< ol >
33
< li > Portugual </ li >
34
< li > Frana </ li >
35
< li > Alemanha </ li >
36
</ ol >
37
</ li >
38
< li >
39
sia
40
< ol >
41
< li > Japo </ li >
42
< li > China </ li >
43
< li > ndia </ li >
44
</ ol >
45
</ li >
46
</ ol >
47
</ body >
48 </ html >
Cdigo HTML 2.58: listas-aninhadas.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao44.zip
45
46
Crie um novo documento HTML chamado restaurante.html no projeto html em Site Root.
www.facebook.com/k19treinamentos
65
HTML
66
21
Aliche , parmeso e rodelas de tomate .
22
</ dd >
23
</ dl >
24
</ body >
25 </ html >
Cdigo HTML 2.59: restaurante.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao46.zip
47
48
Crie um novo documento HTML chamado manual.html no projeto html em Site Root.
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao48.zip
49
50
Crie um novo documento HTML chamado cursos.html no projeto html em Site Root.
66
www.k19.com.br
67
HTML
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > K00 - Formao Bsica - K19 Treinamentos </ title >
6
</ head >
7
< body >
8
< h1 > K00 - Formao Bsica </ h1 >
9
10
< ul >
11
< li > K01 - Lgica de Programao </ li >
12
< li > K02 - Desenvolvimento Web com HTML , CSS e JavaScript </ li >
13
< li > K03 - SQL e Modelo Relacional </ li >
14
</ ul >
15
</ body >
16 </ html >
Cdigo HTML 2.61: cursos.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao50.zip
51
52
Crie um novo documento HTML chamado formacoes.html no projeto html em Site Root.
www.facebook.com/k19treinamentos
67
HTML
68
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao52.zip
53
Iframes
Um documento HTML pode conter outros documentos HTML. Para adicionar um documento
HTML dentro de outro, devemos utilizar o elemento iframe. Esse elemento possui o atributo src.
Esse atributo indica o caminho absoluto ou relativo de um documento HTML. O contedo do elemento iframe utilizado pelos navegadores que no oferecem suporte a esse elemento. Normalmente, o iframe definido pelos navegadores como inline-level element.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Exemplo de frames </ title >
6
</ head >
7
< body >
8
< h1 > Exemplo de frames </ h1 >
9
< iframe src = " http :// www . k19 . com . br " >
10
Esse navegador no suporta o elemento <i > iframe </ i >.
11
</ iframe >
12
< iframe src = " http :// www . usp . br " >
13
Esse navegador no suporta o elemento <i > iframe </ i >.
14
</ iframe >
15
</ body >
16 </ html >
Cdigo HTML 2.63: Exemplo de frames
68
www.k19.com.br
69
HTML
Importante
No incio do crescimento da Internet, um grande nmero de sites utilizavam iframes.
Hoje em dia, os especialistas em design web no recomendam mais utilizao desse
recurso. Ento, evite a utilizao de iframes.
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.
Basicamente, um link faz 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 o elemento a. Esse elemento possui um atributo chamado href. O valor desse atributo indica o caminho relativo ou absoluto de uma outra pgina. Normalmente, o a definido pelos navegadores como inline-level element.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Exemplo de links </ title >
6
</ head >
7
< body >
8
< ul >
9
< li >
10
<a href = " pagina2 . html " > Exemplo de link com caminho relativo </ a >
11
</ li >
12
< li >
13
<a href = " outros / pagina3 . html " > Outro exemplo de link com caminho relativo </ a >
14
</ li >
15
< li >
16
<a href = " http :// www . k19 . com . br " > Exemplo de link com caminho absoluto </ a >
17
</ li >
18
</ ul >
19
</ body >
20 </ html >
Cdigo HTML 2.64: Exemplo de links
www.facebook.com/k19treinamentos
69
HTML
70
Alm do atributo href, podemos utilizar o atributo target para informar onde o destino de um
link deve ser aberto.
_blank: Abre o destino do link em uma nova janela ou aba.
_self: Abre o destino do link na mesma janela ou no mesmo frame que exibe o documento que
contm o link.
_parent: Abre o destino do link na janela ou no frame onde est contido o frame que exibe o
documento que contm o link.
_top: Abre o destino do link na janela que ancestral do frame que exibe o documento que
contm o link.
Um link com target _self possui o mesmo comportamento de um link com target _top se esses
links estiverem em um documento HTML que no esteja dentro de outro documento HTML.
Dentro de um documento HTML com diversos frames, podemos definir que o destino de um
determinado link deve ser aberto em um determinado frame. Para realizarmos tal tarefa, o valor do
atributo target deve ser o nome do frame onde o destino do link deve ser aberto.
Por padro, o destino de um link aberto na mesma pgina ou frame onde ele est contido. Em
outras palavras, se o atributo target no for definido explicitamente, o padro o comportamento
do _self.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Exemplo de uso da tag a com o atributo target </ title >
6
</ head >
7
< body >
8
< ul >
9
< li >
10
<a href = " pagina1 . html " target = " _blank " > Abre em outra janela ou aba </ a >
11
</ li >
12
< li >
13
<a href = " pagina2 . html " target = " _self " > Abre na mesma janela ou aba </ a >
14
</ li >
15
< li >
16
<a href = " pagina3 . html " > Abre na mesma janela ou aba </ a >
17
</ li >
18
</ ul >
19
</ body >
20 </ html >
Cdigo HTML 2.65: Exemplo de links com target
Exerccios de Fixao
54
Crie dois arquivos chamados links-origem.html e links-destino.html dentro do projeto html
em Site Root.
70
www.k19.com.br
71
HTML
5
< title > Exemplo de links - origem </ title >
6
</ head >
7
< body >
8
< h1 > Exemplo de links - origem </ h1 >
9
< ul >
10
< li > <a href = " http :// www . k19 . com . br " target = " _blank " > Link externo </ a > </ li >
11
< li > <a href = " links - destino . html " target = " _self " > Link interno </ a > </ li >
12
< li > <a href = " links - destino . html " target = " _top " > Link interno </ a > </ p >
13
< li > <a href = " links - destino . html " > Link interno </ a > </ li >
14
</ ul >
15
</ body >
16 </ html >
Cdigo HTML 2.66: links-origem.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao54.zip
55
ncoras
Alm de criar links para outras pginas, podemos criar um link para uma determinada seo
de um documento HTML. Esse recurso chamado de ancoragem. O primeiro passo para utilizar
esse recurso identificar a seo que ser o destino desse link. Essa identificao realizada com o
atributo id. O id um atributo global, ou seja, todos os elementos possuem esse atributo. O segundo
passo criar os links utilizando os identificadores das sees de acordo com a sintaxe do exemplo a
seguir. Observe a utilizao do caractere #.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Exemplo de ncoras </ title >
6
</ head >
7
< body >
8
< h1 > Exemplo de ncoras </ h1 >
9
< ul >
10
< li >
11
<a href = " # brasil " > Brasil </ a >
www.facebook.com/k19treinamentos
71
HTML
72
12
</ li >
13
< li >
14
<a href = " # historia " > Histria </ a >
15
</ li >
16
< li >
17
<a href = " # geografia " > Geografia </ a >
18
</ li >
19
< li >
20
<a href = " # demografia " > Demografia </ a >
21
</ li >
22
< li >
23
<a href = " http :// pt . wikipedia . org / wiki / Brasil # Economia " > Economia </ a >
24
</ li >
25
</ ul >
26
27
< h2 id = " brasil " > Brasil </ h2 >
28
...
29
30
< h3 id = " historia " > Histria </ h3 >
31
...
32
33
< h3 id = " geografia " > Geografia </ h3 >
34
...
35
36
< h3 id = " demografia " > Demografia </ h3 >
37
...
38
</ body >
39 </ html >
Cdigo HTML 2.68: Exemplo de ncoras
Exerccios de Fixao
72
www.k19.com.br
73
HTML
Crie um documento HTML chamado ancoras1.html no projeto html em Site Root. Adicione
um link para uma seo dentro desse documento. Dica: insira contedo suficiente para que a barra
de rolagem vertical do navegador aparea.
56
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao56.zip
57
Crie um novo arquivo chamado ancoras2.html no projeto html em Site Root. Identifique uma
seo com o nome ok. Dica: insira contedo suficiente para que a barra de rolagem vertical do
navegador aparea.
58
www.facebook.com/k19treinamentos
73
HTML
74
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao58.zip
59
Crie um novo link no arquivo ancora1.html que aponte para ncora ok do arquivo ancoras2.html.
74
www.k19.com.br
75
HTML
36
<a href = " http :// www . lipsum . com / " > http :// www . lipsum . com / </ a >
37
</ p >
38
</ body >
39 </ html >
Cdigo HTML 2.71: ancoras1.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao59.zip
60
Imagens
Certamente, os sites seriam muito entediantes se no fosse possvel adicionar imagens ao contedo das pginas. Podemos adicionar imagens em documento HTML com o elemento img. Esse
elemento possui um atributo chamado src. Esse atributo indica o caminho absoluto ou relativo da
imagem que queremos adicionar. Normalmente, o img definido pelos navegadores como inlinelevel element.
O elemento img possui um atributo obrigatrio chamado alt. Esse atributo define um texto alternativo que pode ser utilizado, por exemplo, se houver um problema ao carregar a imagem ou por
softwares de leitura de tela.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Exemplo de imagens </ title >
6
</ head >
7
< body >
8
< h1 > K19 Treinamentos </ h1 >
9
< img src = " http :// www . k19 . com . br / css / img / main - header - logo . png " alt = " K19 " / >
10
11
< h2 > Cursos </ h2 >
12
< ul >
13
< li >
14
< img src = " http :// www . k19 . com . br / css / img / k01 - logo - large . png " alt = " K01 " / >
15
K01 - Lgica de Programao
16
</ li >
17
< li >
18
< img src = " http :// www . k19 . com . br / css / img / k02 - logo - large . png " alt = " K02 " / >
19
K02 - Desenvolvimento Web com HTML , CSS e JavaScript
20
</ li >
21
< li >
22
< img src = " http :// www . k19 . com . br / css / img / k03 - logo - large . png " alt = " K03 " / >
23
K03 - SQL e Modelo Relacional
24
</ li >
25
< li >
26
< img src = " http :// www . k19 . com . br / css / img / k11 - logo - large . png " alt = " K11 " / >
27
K11 - Orientao a Objetos em Java
28
</ li >
29
< li >
30
< img src = " http :// www . k19 . com . br / css / img / k12 - logo - large . png " alt = " K12 " / >
www.facebook.com/k19treinamentos
75
HTML
76
31
K12 - Desenvolvimento Web com JSF2 e JPA2
32
</ li >
33
</ ul >
34
</ body >
35 </ html >
Cdigo HTML 2.72: Exemplo de imagens
Tambm podemos definir um tooltip para uma imagem com o atributo title.
1 < img src = " http :// www . k19 . com . br / css / img / main - header - logo . png " alt = " K19 " title = " K19 " / >
Cdigo HTML 2.73: Exemplo de imagens
76
www.k19.com.br
77
HTML
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > URLs absolutas e relativas </ title >
6
</ head >
7
< body >
8
< img src = " imagens / k19 - logo . png " alt = " K19 " >
9
<a href = " paginas / cursos . html " > Cursos </ a >
10
</ body >
11 </ html >
Cdigo HTML 2.74: http://www.k19.com.br/index.html
Podemos definir uma URL base para as imagens e os links adicionados em um documento HTML
com URLs relativas. A URL base definida no valor do atributo href do elemento base. Esse elemento
deve ser adicionado no contedo do elemento head.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< base href = " http :// www . k19 . com . br / site " >
6
< title > URLs absolutas e relativas </ title >
7
</ head >
8
< body >
9
< img src = " imagens / k19 - logo . png " alt = " K19 " >
10
<a href = " paginas / cursos . html " > Cursos </ a >
11
</ body >
12 </ html >
Cdigo HTML 2.76: www.k19.com.br/index.html
Exerccios de Fixao
www.facebook.com/k19treinamentos
77
HTML
78
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao61.zip
62
Tabelas
Suponha que voc esteja desenvolvendo o site de uma empresa e precisa apresentar alguns relatrios em documentos HTML. Considere que os dados desses relatrios so obtidos a partir de
planilhas. Da surge a necessidade de exibir dados de forma tabular em pginas web.
Para resolver esse problema, podemos utilizar o elemento table. Esse elemento permite apresentar dados de forma tabular. As linhas de uma tabela so definidas com o elemento tr, as clulas
78
www.k19.com.br
79
HTML
de ttulos com o elemento th e as clulas de dados com o elemento td. Os elementos th e td possuem um atributo chamado colspan e outro chamado rowspan. O colspan define quantas colunas
uma clula deve ocupar e o rowspan define quantas linhas uma clula deve ocupar. Normalmente,
o table definido pelos navegadores como block-level element.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Exemplo de tabela </ title >
6
</ head >
7
< body >
8
< h1 > Carros </ h1 >
9
< table >
10
< tr >
11
< th > Marca </ th >
12
< th > Modelo </ th >
13
< th > Ano </ th >
14
</ tr >
15
< tr >
16
< td > Toyota </ td >
17
< td > Corolla </ td >
18
< td > 2010 </ td >
19
</ tr >
20
< tr >
21
< td > Honda </ td >
22
< td > Civic </ td >
23
< td > 2011 </ td >
24
</ tr >
25
< tr >
26
< td > Mitsubishi </ td >
27
< td > Lancer </ td >
28
< td > 2012 </ td >
29
</ tr >
30
< tr >
31
< td colspan = " 3 " > ltima atualizao : 06/2012 </ td >
32
</ tr >
33
</ table >
34
</ body >
35 </ html >
www.facebook.com/k19treinamentos
79
HTML
80
Para melhorar a semntica das tabelas, podemos definir explicitamente o cabealho, o corpo e o
rodap de uma tabela atravs dos elementos thead, tbody e tfoot respectivamente.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Exemplo de tabela </ title >
6
</ head >
7
< body >
8
< h1 > Carros </ h1 >
9
10
< table >
11
< thead >
12
< tr >
13
< th > Marca </ th >
14
< th > Modelo </ th >
15
< th > Ano </ th >
16
</ tr >
17
</ thead >
18
< tfoot >
19
< tr >
20
< td colspan = " 3 " > ltima atualizao : 06/2012 </ td >
21
</ tr >
22
</ tfoot >
23
< tbody >
24
< tr >
25
< td > Toyota </ td >
26
< td > Corolla </ td >
27
< td > 2010 </ td >
28
</ tr >
29
< tr >
30
< td > Honda </ td >
31
< td > Civic </ td >
32
< td > 2011 </ td >
33
</ tr >
34
< tr >
35
< td > Mitsubishi </ td >
36
< td > Lancer </ td >
37
< td > 2012 </ td >
38
</ tr >
39
</ tbody >
40
</ table >
41
</ body >
42 </ html >
80
www.k19.com.br
81
HTML
Repare que visualmente no mudou absolutamente nada. Alm disso, apareceram mais alguns
elementos: thead, tfoot e tbody.
Qual a semntica desses elementos?
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 desses elementos?
O elemento thead, assim como o 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)
Os navegadores podem utilizar barras de rolagem para exibir o contedo de uma tabela longa.
Essa caracterstica no obrigatria.
Na impresso de uma tabela longa, a ferramenta utilizada pode replicar o cabealho e o rodap
em todas as pginas. Essa caracterstica no obrigatria.
Ttulos
Tambm podemos definir um ttulo para uma tabela atravs do elemento caption. Esse elemento
deve ser o primeiro filho do elemento table.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Exemplo de ttulo de tabela </ title >
6
</ head >
7
< body >
8
< table >
9
< caption > Carros </ caption >
10
...
11
</ table >
12
</ body >
www.facebook.com/k19treinamentos
81
HTML
82
Agrupando colunas
Podemos dividir as colunas de uma tabela em grupos. Normalmente, o principal motivo para
estabelecer essa diviso poder depois definir formataes especficas para cada grupo de colunas.
Para dividir em grupos as colunas de uma tabela, devemos utilizar os elementos colgroup e col. O
atributo span do elemento col define a quantidade de colunas de um determinado grupo.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Exemplo de agrupamento de colunas </ title >
6
</ head >
7
< body >
8
< h1 > Carros </ h1 >
9
10
< table >
11
< colgroup >
12
<! - - Agrupando a primeira e a segunda coluna -->
13
< col span = " 2 " style = " background - color : gray " >
14
<! - - Agrupando apenas a terceira coluna -->
15
< col style = " background - color : yellow " >
16
</ colgroup >
17
...
18
</ table >
19
</ body >
20 </ html >
82
www.k19.com.br
83
HTML
Exerccios de Fixao
Crie uma pgina HTML em um arquivo chamado tabela.html no projeto html em Site Root que
contenha uma tabela de acordo com a imagem abaixo:
63
As linhas vermelhas foram colocadas na imagem apenas para facilitar a visualizao do problema.
www.facebook.com/k19treinamentos
83
HTML
84
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao63.zip
64
www.k19.com.br
85
HTML
http://localhost/~<USUARIO>/html/public_html/tabela.html.
65
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao65.zip
66
Formulrios
Alguns sites e praticamente todas as aplicaes web necessitam obter informaes enviadas pelos usurios. Por exemplo, considere uma empresa que deseja receber os pedidos dos seus clientes
atravs do seu site. O site dessa empresa precisa oferecer alguma forma de interao que possibilite
o recebimento de dados fornecidos pelos usurios.
Para tornar os sites e as aplicaes web mais interativos, podemos utilizar formulrios. Atravs
dos formulrios, os usurios podem enviar informaes aos Web Servers.
Para criar um formulrio, devemos utilizar o elemento form. Esse elemento possui um atributo
chamado action. O valor desse atributo indica para qual endereo os dados do formulrio sero
enviados.
1 < form action = " pagina . html " >
2 ...
3 </ form >
Os formulrios so compostos por caixas de texto, checkboxes, radios, caixas de seleo, botes,
entre outros componentes. Provavelmente, voc reconhecer diversos desses componentes na imawww.facebook.com/k19treinamentos
85
HTML
86
gem abaixo.
Caixas de texto
Geralmente, os formulrios possuem uma ou mais caixas de texto. As caixas de texto so adicionadas nos documentos HTML atravs do elemento input. Esse elemento possui um atributo chamado type. Para definir uma caixa de texto, o valor do atributo type deve ser text. Normalmente, o
input definido pelos navegadores como inline-level element.
1 < input type = " text " >
www.k19.com.br
87
HTML
O formulrio acima possui duas caixas de texto. Nas duas, o atributo name foi definido. Quando
as caixas forem preenchidas e o formulrio enviado, os dados desse formulrio so adicionados na
requisio HTTP.
Observe na imagem abaixo que os valores preenchidos nas caixas de texto so enviados como
parmetros na URL da requisio HTTP. Os nomes dos parmetros so exatamente os nomes definidos nas caixas de texto com o valor do atributo name. Note tambm que os valores dos parmetros
ficam expostos na barra de endereo do navegador.
www.facebook.com/k19treinamentos
87
HTML
88
Muitas vezes, no adequado exibir os valores dos atributos na barra de endereo dos navegadores. Podemos ocultar esses valores adicionando o atributo method com o valor post no elemento
form. Esse atributo aceita apenas dois valores: get e post. Ele define o tipo de requisio HTTP que
o navegador deve realizar para enviar o formulrio. Nas requisies do tipo GET, os parmetros so
adicionados na URL da requisio. Nas requisies do tipo POST, os parmetros so adicionados no
contedo da requisio.
88
www.k19.com.br
89
HTML
Rtulos
Nos formulrios, os rtulos so fundamentais para informar aos usurios quais dados devem ser
preenchidos. Para adicionar um rtulo, devemos utilizar o elemento label. Os textos dos rtulos so
definidos no contedo desse elemento.
www.facebook.com/k19treinamentos
89
HTML
90
Para melhorar a acessibilidade dos documentos HTML, os rtulos devem ser explicitamente associados aos campos dos formulrios. Para estabelecer esse vnculo, o primeiro passo identificar
os campos atravs do atributo id. O segundo passo definir o atributo for do elemento label com o
identificador do campo correspondente ao rtulo.
1 < label for = " nome_id " > Nome : </ label >
2 < input type = " text " name = " nome " id = " nome_id " >
Placeholders
Como vimos, os rtulos so utilizados para informar aos usurios quais dados devem ser preenchidos nos formulrios. Alm dos rtulos, podemos utilizar placeholders para dar dicas ou exemplos
do contedo que desejamos em cada caixa de entrada. Um placeholder criado atravs do atributo
placeholder do elemento input.
1 < label for = " nome_id " > Nome : </ label >
2 < input id = " nome_id " type = " text " name = " nome " placeholder = " Digite o seu nome aqui " >
1 < label for = " nome_id " > Nome : </ label >
2 < input id = " nome_id " type = " text " name = " nome " placeholder = " Rafael Cosentino " >
Botes de submit
Para adicionar um boto de submit em um formulrio, podemos utilizar o elemento input com
type igual a submit. Esse tipo de boto envia os dados do formulrio para o Web Server. Os textos
desses botes so definidos com o atributo value.
1 < input id = " botao_id " type = " submit " value = " enviar " >
90
www.k19.com.br
91
HTML
Exerccios de Fixao
Se voc estiver utilizando o Ubuntu, crie um arquivo chamado parametros.php no projeto html
em Site Root.
67
Se voc estiver utilizando o Windows, crie um arquivo chamado parametros.asp no projeto html
em Site Root.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Parmetros </ title >
6
</ head >
7
< body >
8
< h1 > Parmetros </ h1 >
www.facebook.com/k19treinamentos
91
HTML
92
9
< ul >
10
<%
11
dim Params , ArrayOfParams
12
If Request . Form < > " " And Request . QueryString < > " " Then
13
Params = Request . Form & " & " & Request . QueryString
14
ElseIf Request . Form < > " " Then
15
Params = Request . Form
16
Else
17
Params = Request . QueryString
18
End If
19
20
ArrayOfParams = Split ( Params , " & " )
21
22
For Each Param In ArrayOfParams
23
Response . Write ( " <li > " )
24
Response . Write ( Param )
25
Response . Write ( " </ li > " )
26
Next
27
%>
28
</ ul >
29
</ body >
30 </ html >
Cdigo HTML 2.94: parametros.asp
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao67.zip
Crie um arquivo chamado formulario-basico.html no projeto html em Site Root com o seguinte
contedo.
68
Importante
No Windows, altere o cdigo acima substituindo o trecho parametros.php pelo
trecho parametros.asp.
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao68.zip
69
92
93
HTML
http://localhost/html/public_html/formulario-basico.html.
Utilize o Chrome DevTools ou o Firebug para verificar os parmetros enviados atravs do formulrio. Chame o instrutor caso tenha alguma dvida.
Caixas de busca
Assim como as caixas de texto, as caixas de busca so adicionadas nos formulrio com o elemento
input. A diferena que o valor do atributo type deve ser search ao invs de text.
1 < input id = " keywords_id " name = " keywords " type = " search " >
As caixas de busca devem ser utilizadas para coletar palavras chave que sero utilizadas em algum tipo de pesquisa. A princpio no h nenhuma diferena prtica entre as caixas de texto e as
caixas de busca. Contudo, essa diferenciao adiciona valor semntico aos documentos HTML e
possibilita, por exemplo, que os navegadores diferenciem visualmente esses dois tipos de caixas.
Caixas de nmeros
Para coletar dados numricos, podemos utilizar caixas especficas para nmeros. No HTML5, h
dois tipos de caixas para esse propsito. Os dois so definidos com o elemento input. O valor do
atributo type number para o primeiro tipo e range para o segundo tipo.
1 < input id = " numero1_id " name = " numero1 " type = " number " >
2 < input id = " numero2_id " name = " numero2 " type = " range " >
Esses dois tipos de componentes devem ser utilizados para coletar valores de sequncias numricas pr-definidas. A principal diferena entre eles que o primeiro (type=number) deve oferecer um mecanismo preciso para os usurios selecionarem o valor desejado enquanto o segundo
(type=range) no possui essa obrigao. A imagem a seguir mostra uma possvel forma dos navegadores exibirem essas caixas.
www.facebook.com/k19treinamentos
93
HTML
94
Para definir a sequncia dos nmeros que podem ser selecionados pelos usurios, podemos utilizar os atributos min, max e step. Por exemplo, para coletar um nmero da sequncia {0; 0,2; 0,4;
0,6; 0,8; 1}, os valores dos atributos min, max e step devem ser 0, 1 e 0.2 respectivamente.
1 < input id = " numero1_id " type = " number " name = " numero1 " min = " 0 " max = " 1 " step = " 0.2 " >
2 < input id = " numero2_id " type = " range " name = " numero2 " min = " 0 " max = " 1 " step = " 0.2 " >
A usabilidade das pginas web melhora com a utilizao dessas caixas. Por exemplo, a configurao do teclado dos celulares ou tablets pode ser alterada de acordo com o tipo de caixa de entrada.
Nas caixas de email, o caractere @ pode ser adicionado ao teclado. Nas caixas de telefone, o teclado
no precisa conter as letras do alfabeto. Nas caixas de url, teclas especiais como .com ou www
podem ser adicionadas ao teclado.
www.k19.com.br
95
HTML
datetime: Utilizado para coletar data (dia, ms e ano) e hora (hora, minuto, segundo e frao
de segundo) com fuso horrio em UTC.
datetime-local: Utilizado para coletar data (dia, ms e ano) e hora (hora, minuto, segundo e
frao de segundo) sem fuso horrio.
month: Utilizado para coletar data composta por ms e ano sem fuso horrio.
time: Utilizado para coletar hora (hora, minuto, segundo e frao de segundo) sem fuso horrio.
week: Utilizado para coletar data composta por semana e ano sem fuso horrio.
A criao desses componentes permite que os navegadores melhorem a usabilidade das pginas
web. A forma de exibio das caixas de datas e horas pode facilitar o processo de preenchimento
dos formulrios. Inclusive, os navegadores podem exibir esses componentes de formas diferentes de
acordo com o dispositivo (computador, celular, tablet, entre outros).
1
2
3
4
5
6
< input
< input
< input
< input
< input
< input
id = " data_id " name = " data " type = " date " >
id = " data_hora_fuso_id " name = " data - hora - fuso " type = " datetime " >
id = " data_hora_id " name = " data - hora " type = " datetime - local " >
id = " mes_id " name = " mes " type = " month " >
id = " hora_id " name = " hora " type = " time " >
id = " semana_id " name = " semana " type = " week " >
www.facebook.com/k19treinamentos
95
HTML
96
Caixas de senha
As senhas devem ser coletadas com caixas especficas para esse tipo de informao. Para adicionar uma caixa de senha em um formulrio, devemos utilizar o elemento input com o valor password
para o atributo type. Normalmente, os navegadores utilizam smbolos como o asterisco ou o crculo
para omitir o contedo das caixas de senha.
1 < input id = " senha_id " name = " senha " type = " password " >
Podemos definir o limite de caracteres que podem ser inseridos no contedo do elemento textarea atravs do atributo maxlength.
1 < textarea id = " mensagem_id " name = " mensagem " maxlength = " 140 " >
2
3 </ textarea >
Exerccios de Fixao
96
www.k19.com.br
97
HTML
www.facebook.com/k19treinamentos
97
HTML
98
70
71
< br >
72
73
< label for = " festa_aniversario_id " > Festa de Aniversrio : </ label >
74
< input
75
id = " festa_aniversario_id "
76
type = " datetime - local "
77
name = " festa_aniversario " >
78
79
< br >
80
81
< label for = " proximo_carnaval_mes_id " > Ms do prximo Carnaval : </ label >
82
< input
83
id = " proximo_carnaval_mes_id "
84
type = " month "
85
name = " proximo_carnaval_mes " >
86
87
< br >
88
89
< label for = " semana_rock_in_rio_id " > Semana do Rock in Rio : </ label >
90
< input
91
id = " semana_rock_in_rio_id "
92
type = " week "
93
name = " semana_rock_in_rio " >
94
95
< br >
96
97
< label for = " horario_de_entrada_id " > Horrio de entrada : </ label >
98
< input
99
id = " horario_de_entrada_id "
100
type = " time "
101
name = " horario_de_entrada " >
102
103
< br >
104
105
< label for = " senha_id " > Senha : </ label >
106
< input
107
id = " senha_id "
108
type = " password "
109
name = " senha "
110
placeholder = " Sua senha " >
111
112
< br >
113
114
< label for = " mensagem_id " > Mensagem : </ label >
115
< textarea
116
id = " mensagem_id "
117
name = " mensagem "
118
rows = " 5 "
119
cols = " 50 "
120
maxlength = " 150 " > </ textarea >
121
122
< br >
123
124
< input type = " submit " value = " Enviar " >
125
</ form >
126
</ body >
127 </ html >
Cdigo HTML 2.104: formulario-caixas-especificas.html
Importante
No Windows, altere o cdigo acima substituindo o trecho parametros.php pelo
trecho parametros.asp.
98
www.k19.com.br
99
HTML
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao70.zip
71
Utilize o Chrome DevTools ou o Firebug para verificar os parmetros enviados atravs do formulrio. Chame o instrutor caso tenha alguma dvida.
Checkboxes e Radios
Para adicionar um checkbox em um formulrio, devemos utilizar o elemento input com type
igual a checkbox. Ao utilizar esse componente, importante definir um valor para o atributo value.
No envio do formulrio, esse valor transmitido ao Web Server se o checkbox correspondente estiver
marcado.
1 < input id = " sim_id " name = " newsletter " type = " checkbox " value = " sim " >
< input
< input
< input
< input
< input
id = " java_id " type = " checkbox " value = " java " name = " linguagens " >
id = " csharp_id " type = " checkbox " value = " csharp " name = " linguagens " >
id = " php_id " type = " checkbox " value = " php " name = " linguagens " >
id = " ruby_id " type = " checkbox " value = " ruby " name = " linguagens " >
id = " perl_id " type = " checkbox " value = " perl " name = " linguagens " >
Para adicionar um radio em um formulrio, devemos utilizar o elemento input com type igual a
radio. Ao utilizar esse componente, importante definir um valor para o atributo value. No envio
do formulrio, esse valor transmitido ao Web Server se o radio correspondente estiver marcado.
1 < input id = " masculino_id " name = " sexo " type = " radio " value = " masculino " >
Eventualmente interessante agrupar um determinado conjunto de radios. Por exemplo, considere um formulrio que coleta o time preferido dos usurios. Para cada time, podemos definir um
radio. Para agrupar esses radios, basta definir o atributo name com o mesmo valor para eles.
1 < input id = " sp_id " type = " radio " value = " sao - paulo " name = " time - preferido " >
2 < input id = " barcelona_id " type = " radio " value = " barcelona " name = " time - preferido " >
www.facebook.com/k19treinamentos
99
HTML
100
3 < input id = " milan_id " type = " radio " value = " milan " name = " time - preferido " >
4 < input id = " mu_id " type = " radio " value = " manchester - united " name = " time - preferido " >
5 < input id = " bdm_id " type = " radio " value = " bayern - de - munique " name = " time - preferido " >
Por padro, quando um formulrio exibido para os usurios, os checkboxes e os radios no esto marcados. Algumas vezes, desejamos que determinados checkboxes e radios estejam marcados
quando os formulrios so apresentados aos usurios. Para resolver esse problema, podemos utilizar
o atributo checked do elemento input. Esse atributo no precisa de valor.
1 < input id = " java_id " type = " checkbox " value = " java " name = " linguagens " checked >
1 < input id = " sp_id " type = " radio " name = " time - preferido " value = " sao - paulo " checked >
Seleo de cores
No HTML5, para coletar uma cor, podemos utilizar o elemento input com type igual a color.
1 < input id = " cor_id " name = " cor " type = " color " >
Exerccios de Fixao
100
www.k19.com.br
101
HTML
Crie um arquivo chamado checkboxes.html no projeto html em Site Root com o seguinte contedo.
72
Importante
No Windows, altere o cdigo acima substituindo o trecho parametros.php pelo
trecho parametros.asp.
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao72.zip
73
Utilize o Chrome DevTools ou o Firebug para verificar os parmetros enviados atravs do formulrio. Chame o instrutor caso tenha alguma dvida.
74
Crie um arquivo chamado radios.html no projeto html em Site Root com o seguinte contedo.
www.facebook.com/k19treinamentos
101
HTML
102
7
< body >
8
< form action = " parametros . php " method = " post " >
9
< label for = " sp_id " > So Paulo </ label >
10
< input id = " sp_id " type = " radio " value = " sao - paulo " name = " time - preferido " checked >
11
12
< label for = " barcelona_id " > Barcelona </ label >
13
< input id = " barcelona_id " type = " radio " value = " barcelona " name = " time - preferido " >
14
15
< label for = " milan_id " > Milan </ label >
16
< input id = " milan_id " type = " radio " value = " milan " name = " time - preferido " >
17
18
< label for = " mu_id " > Manchester United </ label >
19
< input id = " mu_id " type = " radio " value = " manchester - united " name = " time - preferido " >
20
21
< label for = " bdm_id " > Bayern de Munique </ label >
22
< input id = " bdm_id " type = " radio " value = " bayern - munique " name = " time - preferido " >
23
24
< input type = " submit " value = " Enviar " >
25
</ form >
26
</ body >
27 </ html >
Cdigo HTML 2.113: radios.html
Importante
No Windows, altere o cdigo acima substituindo o trecho parametros.php pelo
trecho parametros.asp.
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao74.zip
75
Utilize o Chrome DevTools ou o Firebug para verificar os parmetros enviados atravs do formulrio. Chame o instrutor caso tenha alguma dvida.
Crie um arquivo chamado selecao-cores.html no projeto html em Site Root com o seguinte
contedo.
76
102
www.k19.com.br
103
HTML
Importante
No Windows, altere o cdigo acima substituindo o trecho parametros.php pelo
trecho parametros.asp.
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao76.zip
77
Utilize o Chrome DevTools ou o Firebug para verificar os parmetros enviados atravs do formulrio. Chame o instrutor caso tenha alguma dvida.
Botes
Botes genricos
Para adicionar um boto genrico em um formulrio, podemos utilizar o elemento input com
type igual a button. As aes desse tipo de componente so definidas com JavaScript. Os textos
desses botes so definidos com o atributo value.
1 < input id = " botao_id " type = " button " value = " boto " >
www.facebook.com/k19treinamentos
103
HTML
104
Botes de reset
Para adicionar um boto de reset em um formulrio, podemos utilizar o elemento input com
type igual a reset. Esse tipo de boto reinicia os dados do formulrio. Os textos desses botes so
definidos com o atributo value.
1 < input id = " botao_id " type = " reset " value = " reiniciar " >
Botes de upload
Para adicionar um boto de upload em um formulrio, podemos utilizar o elemento input com
type igual a file. Esse tipo de boto permite selecionar um arquivo para um eventual upload. O
formulrio que contm esse boto deve possuir o atributo enctype com o valor multipart/formdata.
1 < input id = " botao_id " name = " file " type = " file " >
104
www.k19.com.br
105
HTML
Exerccios de Fixao
78
Crie um arquivo chamado botoes.html no projeto html em Site Root com o seguinte contedo.
www.facebook.com/k19treinamentos
105
HTML
106
Importante
No Windows, altere o cdigo acima substituindo o trecho parametros.php pelo
trecho parametros.asp.
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao78.zip
79
Utilize o Chrome DevTools ou o Firebug para verificar os parmetros enviados atravs do formulrio. Chame o instrutor caso tenha alguma dvida.
Drop-down list
Muitos formulrios permitem que os usurios selecionem um ou mais itens de uma lista de opes. Essa seleo pode ser realizada atravs de um drop-down list. Para adicionar esse tipo de componente, devemos utilizar o elemento select. Normalmente, o select definido pelos navegadores
como inline-level element.
1 < select id = " estados_id " name = " estado " >
2
...
3 </ select >
As opes devem ser definidas no contedo do elemento select e elas so adicionadas com o elemento option. O contedo do elemento option exibido para os usurios. Esse elemento possui um
atributo chamado value. Quando o formulrio for enviado, o valor do atributo value transmitido
ao Web Server se a opo correspondente foi selecionada pelo usurio. Se esse atributo no estiver
definido, o contedo do elemento option transmitido ao Web Server se a opo correspondente foi
selecionada pelo usurio.
1 < select id = " estados_id " name = " estado " >
2
< option value = " SP " > So Paulo </ option >
3
< option value = " RJ " > Rio de Janeiro </ option >
4
< option value = " RS " > Rio Grande do Sul </ option >
5
< option value = " RN " > Rio Grande do Norte </ option >
6 </ select >
106
www.k19.com.br
107
HTML
Por padro, apenas um item de um drop-down list pode ser selecionado pelos usurios. Mas,
utilizando o atributo multiple, um ou mais itens podem ser selecionados. Geralmente, mantendo a
tecla CTRL pressionada, os usurios podero escolher dois ou mais itens.
1 < select id = " estados_id " name = " estado " multiple = " multiple " >
2
< option value = " SP " > So Paulo </ option >
3
< option value = " RJ " > Rio de Janeiro </ option >
4
< option value = " RS " > Rio Grande do Sul </ option >
5
< option value = " PR " > Paran </ option >
6
< option value = " RN " > Rio Grande do Norte </ option >
7
< option value = " BA " > Bahia </ option >
8 </ select >
Nos drop-down lists com muitas opes, interessante agrupar as opes em categorias. Esse
agrupamento pode ser realizado com o elemento optgroup. Esse elemento possui um atributo chamado label. O valor desse atributo exibido no drop-down list.
1 < select id = " estados_id " name = " estado " >
2
< optgroup label = " Regio Sudeste " >
3
< option value = " SP " > So Paulo </ option >
4
< option value = " RJ " > Rio de Janeiro </ option >
5
</ optgroup >
6
< optgroup label = " Regio Sul " >
7
< option value = " RS " > Rio Grande do Sul </ option >
8
< option value = " PR " > Paran </ option >
9
</ optgroup >
10
< optgroup label = " Regio Nordeste " >
11
< option value = " RN " > Rio Grande do Norte </ option >
12
< option value = " BA " > Bahia </ option >
13
</ optgroup >
14 </ select >
www.facebook.com/k19treinamentos
107
HTML
108
Exerccios de Fixao
Crie um arquivo chamado drop-down-list.html no projeto html em Site Root com o seguinte
contedo.
80
108
www.k19.com.br
109
HTML
18
< select id = " estado_id " name = " estado " >
19
< optgroup label = " Regio Sudeste " >
20
< option value = " SP " > So Paulo </ option >
21
< option value = " RJ " > Rio de Janeiro </ option >
22
</ optgroup >
23
< optgroup label = " Regio Sul " >
24
< option value = " RS " > Rio Grande do Sul </ option >
25
< option value = " PR " > Paran </ option >
26
</ optgroup >
27
< optgroup label = " Regio Nordeste " >
28
< option value = " RN " > Rio Grande do Norte </ option >
29
< option value = " BA " > Bahia </ option >
30
</ optgroup >
31
</ select >
32
33
< input type = " submit " value = " Enviar " >
34
</ form >
35
</ body >
36 </ html >
Cdigo HTML 2.127: drop-down-list.html
Importante
No Windows, altere o cdigo acima substituindo o trecho parametros.php pelo
trecho parametros.asp.
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao80.zip
81
Utilize o Chrome DevTools ou o Firebug para verificar os parmetros enviados atravs do formulrio. Chame o instrutor caso tenha alguma dvida.
Fieldset
Os campos de um formulrio muito longo podem ser agrupados logicamente com o elemento
fieldset. No contedo desse elemento, podemos utilizar o elemento legend para definir a legenda do
fieldset. Normalmente, o fieldset definido pelos navegadores como block-level element.
1
2
3
4
5
6
7
8
9
10
11
www.facebook.com/k19treinamentos
109
HTML
110
Exerccios de Fixao
82
Crie um arquivo chamado fieldset.html no projeto html em Site Root com o seguinte contedo.
Importante
No Windows, altere o cdigo acima substituindo o trecho parametros.php pelo
trecho parametros.asp.
110
www.k19.com.br
111
HTML
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao82.zip
83
Utilize o Chrome DevTools ou o Firebug para verificar os parmetros enviados atravs do formulrio. Chame o instrutor caso tenha alguma dvida.
Autocomplete
Para melhorar a usabilidade, podemos utilizar o recurso do autocomplete nas caixas de entrada.
Para utilizar esse recurso, devemos criar uma lista de sugestes com o elemento datalist. fundamental identificar as listas de sugestes com o atributo id.
1 < datalist id = " comidas_id " >
2
...
3 </ datalist >
As opes devem ser definidas no contedo do elemento datalist e elas so adicionadas com o
elemento option. O atributo value de um elemento option define uma sugesto.
1 < datalist id = " comidas_id " >
2
< option value = " Lasanha " >
3
< option value = " Pizza " >
4
< option value = " Sopa " >
5
< option value = " Salada " >
6 </ datalist >
Com a lista de sugestes criada, podemos associ-la a uma caixa de entrada atravs do atributo
list do elemento input.
1 < input id = " comida_id " name = " comida " type = " text " list = " comidas_id " >
2
3 < datalist id = " comidas_id " >
4
< option value = " Lasanha " >
5
< option value = " Pizza " >
6
< option value = " Sopa " >
7
< option value = " Salada " >
8 </ datalist >
www.facebook.com/k19treinamentos
111
HTML
112
Exerccios de Fixao
Crie um arquivo chamado autocomplete.html no projeto html em Site Root com o seguinte
contedo.
84
Importante
No Windows, altere o cdigo acima substituindo o trecho parametros.php pelo
trecho parametros.asp.
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao84.zip
85
Utilize o Chrome DevTools ou o Firebug para verificar os parmetros enviados atravs do formulrio. Chame o instrutor caso tenha alguma dvida.
www.k19.com.br
113
HTML
1 < input id = " nome_id " name = " nome " type = " text " disabled >
Campos fixos
Eventualmente, determinados campos de um formulrio devem ser fixo, ou seja, os usurios no
podem alterar o contedo. Para fixar o contedo de um campo, podemos utilizar o atributo readonly
dos elementos input e textarea. Esse atributo no precisa de valor.
1 < input id = " nome_id " name = " nome " type = " text " value = " Marcelo Martins " readonly >
www.facebook.com/k19treinamentos
113
HTML
114
Exerccios de Fixao
Crie um arquivo chamado disabled-readonly.html no projeto html em Site Root com o seguinte
contedo.
86
Importante
No Windows, altere o cdigo acima substituindo o trecho parametros.php pelo
trecho parametros.asp.
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao86.zip
87
114
115
HTML
http://localhost/html/public_html/disabled-readonly.html.
Utilize o Chrome DevTools ou o Firebug para verificar os parmetros enviados atravs do formulrio. Chame o instrutor caso tenha alguma dvida.
Validao
Alguns recursos para realizar a validao dos campos de um formulrio foram adicionados no
HTML5. Essas validaes ocorrem antes do envio dos formulrios. Por padro, algumas validaes
so realizadas automaticamente de acordo com o tipo do campo. Por exemplo, os navegadores verificam se o contedo de uma caixa de email um email vlido.
1 < input id = " email_id " name = " email " type = " email " >
Os navegadores tambm verificam se o contedo de uma caixa de URL uma url vlida.
1 < input id = " url_id " name = " url " type = " url " >
Outras validaes devem ser definidas explicitamente. Por exemplo, se um determinado campo
obrigatrio, devemos utilizar o atributo required. Esse atributo no precisa de valor.
1 < input id = " nome_id " name = " nome " type = " text " required >
www.facebook.com/k19treinamentos
115
HTML
116
Se um determinado campo deve respeitar uma expresso regular, devemo utilizar o atributo pattern.
1 < input
2
id = " placa_id "
3
name = " placa "
4
type = " text "
5
pattern = " [A - Z ]{3} [0 -9]{4} "
6
title = " As placas so formadas por 3 letras ou 4 nmeros " >
Exerccios de Fixao
Crie um arquivo chamado validacao.html no projeto html em Site Root com o seguinte contedo.
88
116
www.k19.com.br
117
HTML
7
< body >
8
< form action = " parametros . php " method = " post " >
9
< label for = " nome_id " > Nome : </ label >
10
< input id = " nome_id " name = " nome " type = " text " required >
11
12
< label for = " email_id " > Email : </ label >
13
< input id = " email_id " name = " email " type = " email " >
14
15
< label for = " url_id " > Site : </ label >
16
< input id = " url_id " name = " url " type = " url " >
17
18
< label for = " placa_id " > Placa : </ label >
19
< input
20
id = " placa_id "
21
name = " placa "
22
type = " text "
23
pattern = " [A - Z ]{3} [0 -9]{4} "
24
title = " As placas so formadas por 3 letras ou 4 nmeros " >
25
26
< input type = " submit " value = " Enviar " >
27
</ form >
28
</ body >
29 </ html >
Cdigo HTML 2.146: validacao.html
Importante
No Windows, altere o cdigo acima substituindo o trecho parametros.php pelo
trecho parametros.asp.
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao88.zip
89
Utilize o Chrome DevTools ou o Firebug para verificar os parmetros enviados atravs do formulrio. Chame o instrutor caso tenha alguma dvida.
header
O elemento header utilizado para definir um cabealho de um documento HTML ou de uma
seo de um documento HTML. O objetivo desse elemento definir um contedo de introduo
www.facebook.com/k19treinamentos
117
HTML
118
ou de navegao. Normalmente, no header, encontramos os elementos h1, h2, h3, h4, h5 e h6.
No contedo do header, tambm comum encontrar sumrios, formulrios de busca, logos, entre
outros.
1 < body >
2
< header >
3
< h1 > Blog da K19 </ h1 >
4
< img src = " k19 - logo . png " alt = " K19 " >
5
</ header >
6
7
< article >
8
< header >
9
< h1 > Novos elementos do HTML5 </ h1 >
10
< img src = " html5 - logo . png " alt = " HTML5 " >
11
</ header >
12
13
...
14
</ article >
15
16
...
17 </ body >
Cdigo HTML 2.147: Exemplo de cabealho
footer
O elemento footer utilizado para definir um rodap para o documento HTML ou para uma
seo do documento HTML. 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 < body >
2
...
3
< article >
4
<p > Loren ipsum. . . </ p >
5
6
< footer > Postado por : Jonas Hirata </ footer >
7
</ article >
8
9
< footer >© ;2013 K19 Treinamentos . </ footer >
10 </ body >
Cdigo HTML 2.148: Exemplo de rodap
nav
O elemento nav utilizado para definir um bloco com os principais links de um documento
HTML. comum, definir os principais links de um documento HTML nos rodaps. Dessa forma, o
elemento nav aparecer com frequncia no contedo do elemento footer.
1 < body >
2
< header >
3
< h1 > Blog da K19 </ h1 >
4
5
< nav >
6
<a href = " # " > Home </ a >
7
<a href = " # " > ltimos posts </ a >
8
<a href = " # " > Arquivo </ a >
9
</ nav >
10
</ header >
11
12
< section >
118
www.k19.com.br
119
HTML
13
< h1 > Meus Posts </ h1 >
14
15
...
16
</ section >
17
18
< footer >
19
<p >© ;2013 K19 Treinamentos . </ p >
20
< nav >
21
<a href = " # " > Home </ a >
22
<a href = " # " > ltimos posts </ a >
23
<a href = " # " > Arquivo </ a >
24
</ nav >
25
</ footer >
26 </ body >
Cdigo HTML 2.149: Exemplo de nav
article
O elemento article utilizado para definir uma composio independente em um documento
HTML. A princpio, um article pode ser distribudo independentemente ou facilmente reutilizado.
apropriado utilizar esse elemento para definir um post de um frum, um artigo de uma revista
ou jornal, um post de um blog, um comentrio enviado por um usurio, um widget interativo ou
qualquer item independente de contedo.
Considere um blog no qual os usurios podem enviar comentrios sobre os posts publicados. Os
posts desse blog podem ser definidos com o elemento article. Os comentrios podem ser definidos
com elementos article internos aos que definem os posts. Um elemento article dentro de outro
elemento article deve definir algo relacionado ao contedo do article que o contm.
1 < body >
2
< article >
3
< h1 > Primeiro post do blog </ h1 >
4
<p > Loren ipsum. . . </ p >
5
6
< h2 > Comentrios </ h2 >
7
< article > Legal este post ! </ article >
8
< article > Bacana este post ! </ article >
9
< article > Da hora este post ! </ article >
10
</ article >
11 </ body >
Cdigo HTML 2.150: Exemplo de artigo
aside
O elemento aside utilizado para definir algum contedo que esteja relacionado ao contedo
principal, mas no o foco do documento HTML. Normalmente, esse elemento exibido em uma
coluna lateral em relao ao contedo principal.
1 < body >
2
< article >
3
< h1 > Novidades do HTML5 </ h1 >
4
<p > Loren ipsum. . . </ p >
5
6
< h2 > Comentrios </ h2 >
7
< article > Legal este post ! </ article >
8
< article > Bacana este post ! </ article >
9
< article > Da hora este post ! </ article >
10
</ article >
11
< aside >
www.facebook.com/k19treinamentos
119
HTML
120
12
< h1 > Posts relacionados </ h1 >
13
...
14
</ aside >
15 </ body >
Cdigo HTML 2.151: Exemplo de aside
section
O elemento section utilizado para definir uma seo genrica de um documento. Uma seo
o agrupamento de um contedo dentro de um tema. Normalmente, as sees possuem cabealho e
rodap.
1 < body >
2
< section >
3
< h1 > ltimos Posts </ h1 >
4
< article >
5
< h1 > Primeiro post do blog </ h1 >
6
<p > Loren ipsum. . . </ p >
7
</ article >
8
9
< article >
10
< h1 > Segundo post do blog </ h1 >
11
<p > Loren ipsum. . . </ p >
12
</ article >
13
14
< article >
15
< h1 > Terceiro post do blog </ h1 >
16
<p > Loren ipsum. . . </ p >
17
</ article >
18
</ section >
19 </ body >
Cdigo HTML 2.152: Exemplo de seo
figure
O elemento figure deve ser utilizado para definir um contedo que auto-suficiente e tipicamente referenciado como uma unidade singular do fluxo principal do documento. Opcionalmente
o contedo pode possuir uma legenda.
Por exemplo, esse elemento pode ser utilizado para definir ilustraes, diagramas, fotos, vdeos,
cdigos fonte em um documento HTML. Normalmente, esse itens so referenciados no contedo
principal mas podem ser removidos sem afetar o fluxo do documento.
figcaption
O elemento figcaption deve ser filho de um elemento figure. Ele utilizado para definir a legenda
do contedo do elemento pai. Alm disso, o elemento figcaption deve ser o primeiro ou ltimo filho
de um elemento figure.
1 < body >
2
< h1 > Novidades do HTML5 </ h1 >
3
4
<p >
5
Lorem ipsum dolor sit amet , consectetur adipiscing elit . Vestibulum
6
enim est , ultrices ac vehicula vitae , pharetra id mauris . Quisque sit
7
amet nisl mollis sem fermentum accumsan . Sed sed quam nisi , cursus
8
sodales metus . Curabitur dapibus , massa sed sollicitudin viverra , odio
9
justo dignissim metus , vel tempor turpis neque id erat . Aenean fermentum
120
www.k19.com.br
121
HTML
10
ultricies ante a luctus .
11
</ p >
12
13
< figure >
14
< img src = " # " title = " Aenean fermentum " alt = " Mauris convallis , leo sollicitudin " >
15
< figcaption > Figura 3 b . Curabitur dapibus , massa sed sollicitudin . </ figcaption >
16
</ figure >
17
18
<p >
19
Mauris fermentum lorem nec nisi euismod elementum . Aenean nec magna
20
dolor , vel fermentum turpis . Mauris convallis , leo sollicitudin
21
egestas malesuada , nunc est ultrices enim , eget varius odio felis et
22
velit . Sed ac lorem nibh , ut convallis ante .
23
</ p >
24 </ body >
www.facebook.com/k19treinamentos
121
HTML
122
header
nav
Home
Destaque
Arquivo
section
ltimos Posts
article
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus vulputate elit, sit amet venenatis
ante lacinia eget. Ut id urna vel quam dictum elementum. Mauris rutrum magna nec erat ullamcorper
scelerisque. Aenean non est libero. Mauris venenatis, velit quis mattis tempus, neque eros tristique purus,
non pretium nisi urna at nunc. Morbi nec commodo dui, quis vulputate ligula. Maecenas vitae libero a
turpis posuere fringilla. Pellentesque risus neque, pretium vitae elementum ac, ultrices et eros.
figure
K19 Treinamentos
Nulla tincidunt tincidunt
figcaption
aside
Sed sit amet enim sapien. Nulla quis lectus non orci pellentesque tristique. Duis eget ullamcorper turpis,
facilisis commodo nisl. Aliquam rhoncus ut metus a vehicula. Suspendisse pellentesque ligula arcu, in
viverra massa rhoncus a.
Comentrios
article
Mauris Vulputate
13/11/2013 - 10:27 AM
Sed sit amet enim sapien. Nulla quis lectus non orci pellentesque tristique. Duis eget
ullamcorper turpis, facilisis commodo nisl. Aliquam rhoncus ut metus a vehicula. Suspendisse
pellentesque ligula arcu, in viverra massa rhoncus a.
article
Donec Tristique
13/11/2013 - 11:42 AM
Sed sit amet enim sapien. Nulla quis lectus non orci pellentesque tristique. Duis eget
ullamcorper turpis, facilisis commodo nisl. Aliquam rhoncus ut metus a vehicula. Suspendisse
pellentesque ligula arcu, in viverra massa rhoncus a.
Posts em Destaque
section
article
footer
Donec varius a nibh
Like us on
Bookface
122
www.k19.com.br
123
HTML
Normalmente, os elementos header, footer, nav, header, article, aside, section, figure e figcaption so definidos pelos navegadores como block-level elements.
Diviso de contedo
Muitas vezes, desejamos separar o contedo de um documento HTML. Geralmente, essas divises ocorrem quando h uma mudana de tpico no contedo. Essas divises podem ser realizadas
com o elemento hr. Normalmente, o hr definido pelos navegadores como block-level element.
1 < body >
2
< h1 > Novidades do HTML5 </ h1 >
3
4
<p >
5
Lorem ipsum dolor sit amet , consectetur adipiscing elit . Vestibulum
6
enim est , ultrices ac vehicula vitae , pharetra id mauris . Quisque sit
7
amet nisl mollis sem fermentum accumsan . Sed sed quam nisi , cursus
8
sodales metus . Curabitur dapibus , massa sed sollicitudin viverra , odio
9
justo dignissim metus , vel tempor turpis neque id erat . Aenean fermentum
10
ultricies ante a luctus .
11
</ p >
12
13
< hr >
14
15
<p >
16
Mauris fermentum lorem nec nisi euismod elementum . Aenean nec magna
17
dolor , vel fermentum turpis . Mauris convallis , leo sollicitudin
18
egestas malesuada , nunc est ultrices enim , eget varius odio felis et
19
velit . Sed ac lorem nibh , ut convallis ante .
20
</ p >
21 </ body >
Cdigo HTML 2.154: Exemplo de separao de contedo
Exerccios de Fixao
90
Crie um arquivo chamado hr.html no projeto html em Site Root com o seguinte contedo.
www.facebook.com/k19treinamentos
123
HTML
124
22
< h2 > CSS </ h2 >
23
<p >
24
Lorem ipsum dolor sit amet , consectetur adipiscing elit . Vestibulum
25
enim est , ultrices ac vehicula vitae , pharetra id mauris . Quisque sit
26
amet nisl mollis sem fermentum accumsan . Sed sed quam nisi , cursus
27
sodales metus . Curabitur dapibus , massa sed sollicitudin viverra , odio
28
justo dignissim metus , vel tempor turpis neque id erat . Aenean fermentum
29
ultricies ante a luctus .
30
</ p >
31
</ body >
32 </ html >
Cdigo HTML 2.155: hr.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao90.zip
91
Agrupando elementos
Podemos agrupar elementos atravs dos elementos div ou span. Normalmente, os navegadores
definem o elemento div como um block-level element e o span como um inline-level element. O
principal objetivo em agrupar elementos com div ou span aplicar formataes especficas para
cada grupo. Por isso, a utilidade desses elementos ficar mais clara quando falarmos sobre CSS.
124
www.k19.com.br
125
HTML
Exerccios Complementares
1 Crie um arquivo chamado pagina-simples.html no projeto html em Site Root. Utilize a imagem
abaixo como base.
Crie um arquivo chamado geografia.html no projeto html em Site Root. Utilize a imagem abaixo
como base.
2
www.facebook.com/k19treinamentos
125
HTML
126
3
Crie um arquivo chamado seguro-treinamento.html no projeto html em Site Root. Utilize a
imagem abaixo como base.
126
www.k19.com.br
127
HTML
Crie um arquivo chamado codigo-java.html no projeto html em Site Root. Utilize a imagem
abaixo como base.
6
www.facebook.com/k19treinamentos
127
HTML
128
Crie um arquivo chamado elementos-i-b.html no projeto html em Site Root. Utilize a imagem
abaixo como base.
7
8
Crie um arquivo chamado sao-paulo.html no projeto html em Site Root. Utilize a imagem
abaixo como base.
Crie um arquivo chamado spfc.html no projeto html em Site Root. Utilize a imagem abaixo
como base.
9
128
www.k19.com.br
129
HTML
Crie um arquivo chamado mais-citacoes.html no projeto html em Site Root. Utilize a imagem
abaixo como base.
10
Crie um arquivo chamado abbr.html no projeto html em Site Root. Utilize a imagem abaixo
como base.
11
Crie um arquivo chamado mais-definicoes.html no projeto html em Site Root. Utilize a imagem
abaixo como base.
12
www.facebook.com/k19treinamentos
129
HTML
130
Crie um arquivo chamado mais-alteracoes.html no projeto html em Site Root. Utilize a imagem
abaixo como base.
13
14
Crie um arquivo chamado mais-datas.html no projeto html em Site Root. Utilize a imagem
abaixo como base.
Crie um arquivo chamado texto-marcado.html no projeto html em Site Root. Utilize a imagem
abaixo como base.
15
130
www.k19.com.br
131
HTML
Crie um arquivo chamado pontos-turisticos.html no projeto html em Site Root. Utilize a imagem abaixo como base.
16
Crie um arquivo chamado manual-k19.html no projeto html em Site Root. Utilize a imagem
abaixo como base.
17
www.facebook.com/k19treinamentos
131
HTML
132
Crie um arquivo chamado mais-links.html no projeto html em Site Root. Utilize a imagem
abaixo como base.
18
Crie um arquivo chamado mais-imagens.html no projeto html em Site Root. Utilize a imagem
abaixo como base.
19
Crie um arquivo chamado mais-tabelas.html no projeto html em Site Root. Utilize a imagem
abaixo como base.
20
132
www.k19.com.br
133
HTML
Crie um arquivo chamado mais-formularios.html no projeto html em Site Root. Utilize a imagem abaixo como base.
21
Resumo do Captulo
www.facebook.com/k19treinamentos
133
HTML
134
A linguagem HTML utilizada na criao das pginas web e especificada pelo W3C.
Informaes sobre um documento HTML devem ser definidas no corpo do elemento head.
A semntica dos elementos HTML deve ser respeitada para a correta interpretao do contedo
por buscadores e softwares de leitura (acessibilidade), por exemplo.
Os elementos h1, h2, h3, h4, h5 e h6 so utilizados para definir ttulos em um documento
HTML.
10
11
Determinados caracteres devem ser inseridos em um documento HTML atravs do seu respectivo cdigo.
12
Os elementos pre, code, i, b, sub, sup, strong, em, blockquote, q, cite, abbr, dfn, ins, del, s,
time e mark so utilizados para definir os textos de um documento HTML.
13
As listas sem ordem so definidas com o elemento ul. As listas com ordem so definidas com o
elemento ol. As listas de descries so definidas com o elemento dl.
14
Os itens das listas com ordem e sem ordem so definidos com o elemento li.
15
Os termos de uma lista de descries so definidos com o elemento dt. As descries desses
termos so definidas com o elemento dd.
134
www.k19.com.br
135
HTML
16
Podemos adicionar um documento HTML dentro de outro documento HTML com o elemento
iframe.
17
18
19
As tabelas so criadas com os elementos table, tr, th, td, thead, tbody, caption, colgroup e col.
20
21
22
As partes de um documento HTML podem ser definidas com os elementos header, footer,
article, aside, section, figure, figcaption, div e span.
23
Prova
a) Microsoft.
b) Anatel.
c) ABNT.
d) W3C.
e) NASA.
a) O tipo do navegador.
b) O tipo do sistema operacional.
c) O tipo do documento.
www.facebook.com/k19treinamentos
135
HTML
136
d) O tipo do dispositivo.
e) Nenhuma das anteriores.
a) Respeitar a semntica dos elementos HTML facilita o trabalho das ferramentas de busca.
b) Respeitar a semntica dos elementos HTML facilita o trabalho das ferramentas de leitura de
tela para deficientes visuais.
c) Respeitar a semntica dos elementos HTML diminui o tamanho das pginas web.
d) A semntica dos elementos HTML definida na especificao da linguagem HTML.
www.k19.com.br
137
HTML
10 Para exibir um texto quando o mouse passa sobre uma imagem, devemos utilizar qual atributo
do elemento img?
a) alt.
www.facebook.com/k19treinamentos
137
HTML
138
b) title.
c) tooltip.
d) text.
e) description.
11
a) table, td e column.
b) table, row e col.
c) table, table-head e table-body.
d) th, tr e td.
e) tabular, tr e td.
12
13
14
www.k19.com.br
139
HTML
15
Minha Pontuao
Pontuao Mnima:
www.facebook.com/k19treinamentos
12
Pontuao Mxima:
15
139
HTML
140
140
www.k19.com.br
CAPTULO
CSS
Quando no definimos uma formatao especfica para os elementos HTML de uma pgina web,
eles so exibidos com o estilo determinado pelo navegador utilizado. H dois problemas principais
em deixar os navegadores decidirem qual formatao deve ser adotada. O primeiro que cada navegador pode adotar uma formatao diferente. Consequentemente, uma mesma pgina web no
ser exibida exatamente da mesma forma em todos os navegadores. O segundo problema que as
formataes adotadas pelos principais navegadores no so bonitas.
Podemos padronizar a forma que as pginas web so exibidas nos diferentes navegadores e obter
um visual agradvel definindo a nossa prpria formatao. O estilo das pginas deve ser definido
com a linguagem CSS (Cascading Style Sheets).
Mais Sobre
Assim como a linguagem HTML, a linguagem CSS definida pelo W3C. Voc pode consultar a especificao do CSS no endereo http://www.w3.org/Style/CSS/specs.
O W3C faz diversas recomendaes sobre como implementar as funcionalidades do CSS. Contudo, nem sempre, os navegadores respeitam essas recomendaes e eventualmente cada navegador adota uma abordagem prpria para uma determinada funcionalidade. Essas diferenas
podem gerar problemas nas pginas web.
Mais Sobre
Nas primeiras verses da linguagem HTML, a formatao era realizada atravs de atributos especficos dos elementos. Por exemplo, a cor do fundo de uma pgina poderia
ser definida da seguinte forma:
1 < body bgcolor = " red " >
Hoje em dia, essa abordagem totalmente no recomendada. Qualquer alterao visual dos
elementos HTML deve ser definida atravs da linguagem CSS.
Box Model
Todo elemento HTML, no corpo de uma pgina web, est contido em um box. Considere o documento HTML abaixo.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
www.facebook.com/k19treinamentos
141
CSS
142
5
< title > Desenvolvimento Web </ title >
6
</ head >
7
< body >
8
< h1 > Desenvolvimento Web </ h1 >
9
10
< h2 > HTML </ h2 >
11
<p >
12
Lorem ipsum dolor sit amet , consectetur adipiscing elit . Vestibulum
13
enim est , ultrices ac vehicula vitae , pharetra id mauris . Quisque sit
14
amet nisl mollis sem fermentum < strong > accumsan </ strong >.
15
</ p >
16
<a href = " # " > Mais sobre </ a >
17
18
< h2 > CSS </ h2 >
19
<p >
20
Lorem ipsum dolor sit amet , < em > consectetur </ em > adipiscing elit . Vestibulum
21
enim est , ultrices ac vehicula vitae , pharetra id mauris . Quisque sit
22
amet nisl mollis sem fermentum accumsan .
23
</ p >
24
<a href = " # " > Mais sobre </ a >
25
</ body >
26 </ html >
Agora, observe em destaque na imagem a seguir, os boxes correspondentes aos elementos HTML
do documento anterior.
Na imagem, os boxes dos block-level elements foram exibidos com linha contnua enquanto os
boxes dos inline-level elements foram exibidos com linha tracejada. Os boxes dos block-level elements ocupam todo o espao horizontal e provocam quebras de linha. Por outro lado, os boxes dos
inline-level elements ocupam horizontalmente somente o espao necessrio para o seu contedo e
no provocam quebras de linha.
O box de um elemento HTML composto por contedo (content), margem interna (padding),
borda (border) e margem externa (margin).
142
www.k19.com.br
143
CSS
contedo
Regras
Podemos aplicar regras de formatao para cada elemento HTML. Observe a estrutura de uma
regra CSS.
www.facebook.com/k19treinamentos
143
CSS
144
Seletor
Corpo
p
}
{
font-size: 40px;
Propriedade
O seletor determina para quais elementos a regra de formatao deve ser aplicada. No corpo de
uma regra CSS, podemos definir diversas propriedades. Cada propriedade define uma caracterstica
visual. Por exemplo, a propriedade font-size utilizada para definir o tamanho da fonte utilizada
nos textos.
Inline style
Podemos aplicar propriedades CSS atravs do atributo style presente em diversos elementos
HTML. Essa abordagem no recomendada pois o acoplamento entre os elementos HTML e as propriedades CSS muito alto dificultando a manuteno das pginas web.
1 <p style = " color : red " >
2
...
3 </ p >
www.k19.com.br
145
CSS
1 p {
2
color : red ;
3 }
Cdigo CSS 3.1: estilo.css
Depois de definir as regras CSS em um arquivo separado, ele deve ser associado ao documento
HTML atravs do elemento link.
1 < head >
2
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
3
< title > Desenvolvimento Web </ title >
4
< link rel = " stylesheet " type = " text / css " href = " estilo . css " >
5 </ head >
Comentrios
Podemos adicionar comentrios no cdigo CSS atravs dos marcadores /* e */.
1 /* uma regra CSS para formatar os pargrafos */
2 p {
3
color : red ;
4 }
Cdigo CSS 3.2: estilo.css
Chrome DevTools
Como vimos no captulo anterior, podemos utilizar ferramentas como o Chrome DevTools para
analisar e modificar os documentos HTML. Essas ferramentas, tambm podem ser utilizadas para
editar as propriedades CSS dos elementos de uma pgina web. Considere o cdigo HTML e o CSS
abaixo.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< title > K19 - Chrome DevTools </ title >
5
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
6
< link rel = " stylesheet " type = " text / css " href = " chrome - devtools . css " >
7
</ head >
8
< body >
9
<p > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ p >
10
<p class = " class1 " > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ p >
11
</ body >
12 </ html >
Cdigo HTML 3.6: chrome-devtools.html
1 p {
2
border : 4 px solid red ;
3
font - size : 20 px ;
4 }
5
6 . class1 {
7
color : blue ;
www.facebook.com/k19treinamentos
145
CSS
8
9 }
146
border : 10 px solid green ;
Observe a figura abaixo. Atravs do painel Styles podemos visualizar as regras CSS que foram
aplicadas a um determinado elemento HTML. Esse painel tambm mostra a origem dessas regras e
as dimenses do box do elemento.
www.k19.com.br
147
CSS
Observe na imagem abaixo que o elemento HTML selecionado no painel Styles afetado por
duas regras CSS oriundas do arquivo chrome-devtools.css. Repare que a propriedade border definida nessas duas regras. O Chrome DevTools indica atravs de um trao horizontal qual ocorrncia
dessa propriedade est sendo desconsiderada. Mais adiante, discutiremos como determinar a prioridade das regras CSS em situaes como essa.
www.facebook.com/k19treinamentos
147
CSS
148
No painel Computed podemos conferir todas as propriedades CSS que foram aplicadas em um
elemento.
148
www.k19.com.br
149
CSS
Se desejarmos visualizar as propriedades que foram herdadas dos elementos ancestrais, podemos marcar a opo Show inherited.
www.facebook.com/k19treinamentos
149
CSS
150
Exerccios de Fixao
Importante
No Windows, utilizando o IIS (Internet Information Services) como Web Server, voc
deve salvar o projeto css em C:\inetpub\wwwroot. Lembre-se que necessrio instalar o IIS conforme vimos anteriormente.
150
www.k19.com.br
151
CSS
Importante
No Ubuntu, utilizando o Apache HTTP Server como Web Server, voc deve salvar o projeto css em /home/<USUARIO>/public_html. Lembre-se que necessrio instalar
e configurar o Apache HTTP Server como vimos anteriormente.
www.facebook.com/k19treinamentos
151
CSS
152
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao1.zip
152
www.k19.com.br
153
CSS
No projeto css, crie um arquivo chamado css.html. Todos os pargrafos desse documento devem
ser exibidos em negrito, com cor azul e com fonte 20px. Defina uma regra CSS para formatar os
pargrafos.
2
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao2.zip
Para organizar melhor o contedo e a formatao da pgina criada anteriormente, crie um arquivo CSS chamado style.css no projeto css.
4
1 p {
2
font - weight : bold ;
3
font - size : 20 px ;
4
color : #0000 FF ;
5 }
Cdigo CSS 3.4: style.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao4.zip
Modifique o arquivo css.html para aplicar as regras de formatao criadas no exerccio anterior.
www.facebook.com/k19treinamentos
153
CSS
154
10
<p > Outro pargrafo formatado </ p >
11
</ body >
12 </ html >
Cdigo HTML 3.8: css.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao5.zip
Cores
H diversas formas de escolher uma cor na linguagem CSS.
Nome
A especificao da linguagem CSS nomeou 147 cores. Voc pode verificar a lista desses nomes
no endereo http://www.w3.org/TR/css3-color/#svg-color. As cores bsicas do CSS so: aqua,
black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white e yellow.
Hexadecimal
A quantidade de cores suportada pela linguagem CSS 16.777.216. Como vimos apenas 147 cores foram nomeadas. Para escolher uma cor que no possui um nome, podemos utilizar o cdigo
hexadecimal da cor desejada. Todas as cores possuem um cdigo hexadecimal. Veja o cdigo hexadecimal das cores bsicas.
cdigo hexadecimal
#00FFFF
#000000
#0000FF
#FF00FF
#808080
#008000
#00FF00
#800000
nome da cor
aqua
black
blue
fuchsia
gray
green
lime
marron
cor
cdigo hexadecimal
#000080
#808000
#800080
#FF0000
#C0C0C0
#008080
#FFFFFF
#FFFF00
nome da cor
navy
olive
purple
red
silver
teal
white
yellow
cor
O cdigo hexadecimal de uma cor comea com o caractere #. Os dois primeiros dgitos definem
a quantidade de vermelho, os dois dgitos do meio definem a quantidade de verde e os dois ltimos
dgitos definem a quantidade de azul.
Funo rgb()
A funo rgb() devolve uma cor a partir de uma quantidade de vermelho, de verde e de azul.
Essas quantidades podem ser definidas em porcentagem ou em valores inteiros de 0 a 255. Veja
como podemos obter as cores bsicas a partir da funo rgb().
154
www.k19.com.br
155
CSS
rgb()
rgb(0, 255, 255)
rgb(0, 0, 0)
rgb(0, 0, 255)
rgb(255, 0, 255)
rgb(128, 128, 128)
rgb(0, 128, 0)
rgb(0, 255, 0)
rgb(128, 0, 0)
nome da cor
aqua
black
blue
fuchsia
gray
green
lime
marron
cor
rgb()
rgb(0, 0, 128)
rgb(128, 128, 0)
rgb(128, 0, 128)
rgb(255, 0, 0)
rgb(192, 192, 192)
rgb(0, 128, 128)
rgb(255, 255, 255)
rgb(255, 255, 0)
nome da cor
navy
olive
purple
red
silver
teal
white
yellow
cor
Funo rgba()
A funo rgba() muito semelhante funo rgb(). A diferena que a funo rgba() possui um
quarto parmetro que define a opacidade da cor. O valor desse parmetro deve ser maior ou igual a
0 e menor ou igual a 1. Por exemplo, para definir a cor blue com 50% de opacidade, podemos utilizar
a funo rgba() com os seguintes parmetros.
1 rgba (0 , 0 , 255 , 0.5)
Funo hsl()
Podemos usar a escala HSL (Hue, Saturation and Lightness ou Matiz, Saturao e Brilho) para
selecionar uma cor atravs da funo hsl(). Essa funo recebe 3 parmetros. O primeiro deve ser
um valor inteiro de 0 at 360. O segundo e o terceiro so porcetagens.
1 hsl (180 , 50% , 60%)
Funo hsla()
Assim como a funo hsl(), a funo hsla() tambm permite a seleo das cores atravs da escala
HSL. A diferena que a ltima permite que a opacidade da cor seja definida.
1 hsla (180 , 50% , 60% , 0.5)
Unidades de medida
Para definir um tamanho ou uma distncia, devemos utilizar as unidades da linguagem CSS.
Podemos classificar essas unidades em absolutas e relativas.
Unidades absolutas
Unidade
Descrio
cm
centmetro
mm
milmetro
in
polegada
pt
pc
px
pixel
www.facebook.com/k19treinamentos
155
CSS
156
Unidades relativas
Unidade
Descrio
em
ex
ch
rem
vw
vh
vmin
vmax
Backgrounds
Podemos definir a formatao do background de um elemento HTML com as seguintes propriedades CSS:
background-color
A propriedade background-color utilizada para definir a cor do background dos elementos
HTML.
Valor
Descrio
color
transparent
inherit
K19 Treinamentos
background-color: yellow
K19 Treinamentos
background-color: #c1a4cd
K19 Treinamentos
background-color: transparent
background-image
A propriedade background-image utilizada para definir a imagem que deve ser utilizada como
background de um elemento HTML.
156
Valor
Descrio
url(url)
none
inherit
157
CSS
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nunc iaculis pharetra
felis elementum mollis. Integer iaculis
luctus ante quis consectetur. Pellentesque a libero ultrices, varius nibh eu,
ullamcorper nunc. Sed iaculis congue
dui nec iaculis. Ut sagittis nec tortor
quis congue. Quisque tincidunt tincidunt felis id fermentum. Maecenas
adipiscing faucibus nulla et facilisis.
Quisque sed elementum sem. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae;
Morbi lacus odio, adipiscing et ultrices
background-image: url(bg-image.png)
Mais Sobre
Podemos definir mltiplas imagens de background. As URLs dessas imagens devem
ser separadas por vrgula. As imagens so sobrepostas sendo que a primeira ficar no
primeiro plano, a segunda no segundo plano e assim por diante at a ltima que ficar no ltimo
plano.
1 background - image : url ( " imagem1 . png " ) , url ( " imagem2 . png " ) , url ( " imagem3 . png " ) ;
background-repeat
Por padro, se uma imagem utilizada como background for menor do que o box do elemento
HTML correspondente, ela ser replicada na horizontal e na vertical. A propriedade backgroundrepeat permite controlar como essa replicao deve ser realizada. Essa propriedade aceita os seguintes valores:
Valor
Descrio
repeat
repeat-x
repeat-y
no-repeat
A imagem no replicada.
inherit
background-repeat: repeat
www.facebook.com/k19treinamentos
background-repeat: repeat-x
157
CSS
158
background-repeat: repeat-y
background-repeat: no-repeat
background-attachment
A propriedade background-attachment permite definir qual comportamento dos backgrounds
em relao a rolagem do contedo.
Valor
Descrio
scroll
fixed
background-attachment: fixed
background-attachment: scroll
background-position
Para derterminar a posio das imagens utilizadas como background dos elementos HTML, devemos utilizar a propriedade background-position.
158
Valor
Descrio
left top
center top
right top
left center
center center
www.k19.com.br
159
CSS
Valor
Descrio
right center
left bottom
center bottom
right bottom
left
center
right
top
bottom
x% y%
x%
medida1 medida2
inherit
left top
center top
right top
left center
center center
right center
left bottom
center bottom
right bottom
www.facebook.com/k19treinamentos
159
CSS
160
background-clip
A propriedade background-clip determina qual rea do box de um elemento HTML deve ser
afetada pela propriedade background-color e/ou background-image.
Valor
Descrio
border-box
padding-box
content-box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis
pharetra felis elementum mollis.
Integer iaculis luctus ante quis
consectetur. Pellentesque a libero
ultrices, varius nibh eu, ullamcorper
nunc. Sed iaculis congue dui nec
iaculis. Ut sagittis nec tortor quis
background-clip: border-box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis
pharetra felis elementum mollis.
Integer iaculis luctus ante quis
consectetur. Pellentesque a libero
ultrices, varius nibh eu, ullamcorper
nunc. Sed iaculis congue dui nec
iaculis. Ut sagittis nec tortor quis
background-clip: padding-box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis
pharetra felis elementum mollis.
Integer iaculis luctus ante quis
consectetur. Pellentesque a libero
ultrices, varius nibh eu, ullamcorper
nunc. Sed iaculis congue dui nec
iaculis. Ut sagittis nec tortor quis
background-clip: content-box
background-origin
A propriedade background-origin determina onde ficar o ponto de origem para o posicionamento das imagens utilizadas como background.
160
www.k19.com.br
161
CSS
Valor
Descrio
border-box
padding-box
content-box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis
pharetra felis elementum mollis.
Integer iaculis luctus ante quis
consectetur. Pellentesque a libero
ultrices, varius nibh eu, ullamcorper
nunc. Sed iaculis congue dui nec
iaculis. Ut sagittis nec tortor quis
background-origin: border-box;
background-repeat: no-repeat;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis
pharetra felis elementum mollis.
Integer iaculis luctus ante quis
consectetur. Pellentesque a libero
ultrices, varius nibh eu, ullamcorper
nunc. Sed iaculis congue dui nec
iaculis. Ut sagittis nec tortor quis
background-origin: padding-box;
background-repeat: no-repeat;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis
pharetra felis elementum mollis.
Integer iaculis luctus ante quis
consectetur. Pellentesque a libero
ultrices, varius nibh eu, ullamcorper
nunc. Sed iaculis congue dui nec
iaculis. Ut sagittis nec tortor quis
background-origin: content-box;
background-repeat: no-repeat;
background-size
Quando uma imagem utilizada como background de um elemento HTML, podemos definir o
tamanho dessa imagem com a propriedade background-size.
Valor
Descrio
auto auto
auto
medida auto
auto medida
www.facebook.com/k19treinamentos
161
CSS
162
Valor
Descrio
medida1 medida2
x% y%
x% auto
auto y%
O valor y corresponde altura. Esse valor uma porcentagem relativa altura do elemento HTML. A largura calculada automaticamente de forma
proporcional a altura.
cover
contain
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis
pharetra felis elementum mollis.
Integer iaculis luctus ante quis
consectetur. Pellentesque a libero
ultrices, varius nibh eu, ullamcorper
nunc. Sed iaculis congue dui nec
iaculis. Ut sagittis nec tortor quis
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis
pharetra felis elementum mollis.
Integer iaculis luctus ante quis
consectetur. Pellentesque a libero
ultrices, varius nibh eu, ullamcorper
nunc. Sed iaculis congue dui nec
iaculis. Ut sagittis nec tortor quis
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis
pharetra felis elementum mollis.
Integer iaculis luctus ante quis
consectetur. Pellentesque a libero
ultrices, varius nibh eu, ullamcorper
nunc. Sed iaculis congue dui nec
iaculis. Ut sagittis nec tortor quis
162
background-size: cover
background-size: contain
www.k19.com.br
163
CSS
background
A propriedade background um atalho para as outras propriedades de background. A sintaxe
dessa propriedade :
1 background : color position size repeat origin clip attachment image ;
Exerccios de Fixao
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao6.zip
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
www.facebook.com/k19treinamentos
163
CSS
27
28
29
30
31
32
33
34
35
36
37
38
39
164
# div5 {
background - image : url ( " http :// k19 . com . br / figs / seguro - treinamento . png " ) ;
background - repeat : no - repeat ;
background - size : contain ;
}
body {
background - image : url ( " http :// k19 . com . br / figs / main - header - logo . png " ) ;
background - repeat : no - repeat ;
background - attachment : fixed ;
background - position : top center ;
}
Cdigo CSS 3.10: backgrounds.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao7.zip
Textos
Podemos controlar a formatao dos textos contidos nos documentos HTML com as seguintes
propriedades CSS.
color
Podemos definir a cor do texto contido em um elemento HTML atravs da propriedade color.
1 p {
2
color : blue ;
3 }
Valor
Descrio
color
inherit
text-align
O alinhamento do texto contido em um elemento HTML pode ser determinado com a propriedade text-align.
164
Valor
Descrio
left
right
Alinhado direita.
center
Centralizado.
justify
Justificado.
www.k19.com.br
165
CSS
Valor
Descrio
inherit
left
center
right
justify
text-decoration
Podemos definir a decorao dos textos contidos em um elemento HTML com a propriedade
text-decoration.
Valor
Descrio
none
underline
overline
line-through
Texto riscado.
inherit
text-decoration: none
text-decoration: underline
text-decoration: overline
text-decoration: line-through
text-transform
A capitalizao dos textos pode ser determinada atravs da propriedade text-transform.
Valor
Descrio
none
capitalize
uppercase
lowercase
inherit
text-transform: none
text-transform: capitalize
text-transform: uppercase
text-transform: lowercase
www.facebook.com/k19treinamentos
165
CSS
166
text-indent
Normalmente, indentamos a primeira linha de um bloco de texto. Podemos definir o comprimento dessa indentao atravs da propriedade text-indent.
Valor
Descrio
medida
x%
inherit
text-indent: 0
text-indent: 20px
letter-spacing
O espaamento entre as letras pode ser determinado atravs da propriedade letter-spacing.
Valor
Descrio
normal
medida
A medida corresponde ao espaamento extra desejado. Esse valor pode ser negativo.
inherit
letter-spacing: normal
L o r e m
am et ...
letter-spacing: 10px
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Aenean mats nam ...
letter-spacing: -2px
ip s u m
d o l o r
si t
word-spacing
O espaamento entre as palavras pode ser determinado com a propriedade word-spacing.
166
Valor
Descrio
normal
medida
A medida corresponde ao espaamento extra desejado. Esse valor pode ser negativo.
inherit
word-spacing: 0
word-spacing: 4px
Lorem
ipsum
dolor
sit
amet.
Consectetur
adipiscing
elit.
Pellentesque
leo
anon
tortor
tincid...
word-spacing: -4px
www.k19.com.br
167
CSS
word-wrap
Podemos controlar, atravs da propriedade word-wrap, como as palavras so divididas quando
ocorre uma quebra de linha automtica.
Valor
Descrio
normal
As palavras so divididas apenas nos pontos de quebras definidos com o elemento wbr (padro).
break-word
Otorrinolaringologista.
Otorrinolaringo
logista.
word-wrap: normal
word-wrap: break-word
line-height
A altura das linhas de um texto pode ser determinada com a propriedade line-height.
Valor
Descrio
normal
medida
x%
inherit
line-height: normal
line-height: 20px
white-space
possvel controlar a forma de tratamento dos espaos em branco e das quebras de linha atravs
da propriedade white-space. Os valores possveis para essa propriedade so:
Valor
Descrio
normal
www.facebook.com/k19treinamentos
167
CSS
168
Valor
Descrio
nowrap
pre
pre-line
pre-wrap
inherit
HTML
<div>Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula
bibendum arcu.
Sed
dui nulla, cursus et lacinia eu, vulputate ac dolor.
Quisque faucibus congue congue.</div>
white-space: normal
Lorem
white-space: nowrap
ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula bibendum arcu.
Sed dui nulla, cursus et lacinia eu, vulputate ac dolor.
Quisque faucibus congue congue.
white-space: pre
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Cras vehicula bibendum
arcu.
white-space: pre-line
168
white-space: pre-wrap
www.k19.com.br
169
CSS
text-shadow
Para adicionar uma sombra no texto de um elemento HTML, devemos utilizar a propriedade
text-shadow. Para usar essa propriedade, devemos definir as seguintes informaes sobre a sobra
desejada: a posio horizontal, a posio vertical, o raio do blur e a cor.
Deslocamento
horizontal
Esmaecimento
(opcional)
Cor
(opcional)
Vrias sombras podem ser aplicadas ao texto de um elemento HTML. As informaes que definem essas sombras devem ser separadas por vrgula.
Texto
Texto
Texto
Texto
Texto
Texto
Texto
Texto
Outras propriedades
A linguagem CSS define mais algumas propriedades de formatao de texto.
unicode-bdi
hanging-punctuation
punctuation-trim
text-align-last
text-justify
text-outline
text-overflow
text-wrap
direction
www.facebook.com/k19treinamentos
169
CSS
170
word-break
Exerccios de Fixao
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao9.zip
10
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
p {
border : 2 px black solid ;
}
# p1 {
width : 400 px ;
color : blue ;
text - align : justify ;
text - decoration : line - through ;
text - transform : uppercase ;
text - indent : 20 px ;
letter - spacing : 2 px ;
line - height : 25 px ;
word - spacing : 11 px ;
}
# p2 {
width : 100 px ;
word - wrap : break - word ;
170
www.k19.com.br
171
20
21
22
23
24
25
26
27
28
29
30
31
32
CSS
}
# p3 {
width : 400 px ;
white - space : pre - line ;
}
# p4 {
width : 100 px ;
text - transform : uppercase ;
letter - spacing : 5 px ;
text - shadow : 2 px 2 px # ff0000 ;
}
Cdigo CSS 3.12: textos.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao10.zip
11
Fontes
Podemos controlar as fontes utilizadas nos textos de uma pgina web com as seguintes propriedades.
font-family
Uma lista com as fontes desejadas ordenadas por prioridade pode ser determinada atravs da
propriedade font-family.
1 font - family : " Arial Black " , " Georgia " , " Courier New " ;
Eventualmente, uma determinada fonte pode no estar disponvel. Os navegadores devem utilizar a primeira fonte disponvel da lista definida com a propriedade font-family. Por isso, essa lista
deve ser ordenada da fonte com maior prioridade para a fonte com menor prioridade.
Algumas fontes so consideradas seguras (Web Safe Fonts). Essa qualidade atribuda s fontes
que so suportadas em praticamente todos os sistemas operacionais e navegadores. Uma lista com
essas fontes pode ser consultada no endereo http://cssfontstack.com/.
A linguagem CSS classifica as fontes em 5 grupos genricos:
serif: Fontes serifadas. Os acabamentos nas extremidades das hastes das letras so denominados serifas.
sans-serif: Fontes no serifadas.
cursive: Fontes com estilo semelhante escrita manual.
www.facebook.com/k19treinamentos
171
CSS
172
Unispace
Serif
Monospace
Serif
Monospace
Fantasy
Comic Sans
Cursive
Fantasy
Se qualquer fonte de um determinado grupo genrico pode ser utilizada, devemos adicionar o
nome desse grupo na lista definida com a propriedade font-family. Nesse caso, os prprios navegadores escolhem uma fonte do grupo genrico escolhido.
1 font - family : " Arial Black " , " Georgia " , " Courier New " , " sans - serif " ;
No exemplo acima, se as fontes Arial Black, Georgia e Courier New no estiverem disponveis, os navegadores utilizaro alguma fonte do grupo sans-serif.
font-size
O tamanho da fonte determinado atravs da propriedade font-size.
172
Valor
Descrio
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
medida
x%
inherit
www.k19.com.br
173
CSS
9px
K19 Treinamentos
xx-small
K19 Treinamentos
x-small
small
medium
large
x-large
xx-large
K19 Treinamentos
K19 Treinamentos
K19 Treinamentos
K19 Treinamentos
K19 Treinamentos
K19 Treinamentos
font-style
Podemos determinar o estilo da fonte atravs da propriedade font-style.
Valor
Descrio
normal
italic
Fonte itlica.
oblique
Fonte oblqua.
inherit
font-style: normal
font-style: italic
font-style: oblique
font-variant
Para determinar que o texto de um elemento HTML deve ser exibido em small caps, devemos
utilizar a propriedade font-vaiant. Todas as letras de um texto em small caps so transformadas em
maisculas e o tamanho da fonte da primeira letra de cada palavra maior do que o tamanho da
fonte das demais letras.
Valor
Descrio
normal
small-caps
inherit
font-variant: normal
font-variant: small-caps
www.facebook.com/k19treinamentos
173
CSS
174
font-weight
A grossura dos caracteres pode ser definida com a propriedade font-weight.
Valor
Descrio
normal
bold
Negrito.
100
Grossura 100.
200
Grossura 200.
300
Grossura 300.
400
500
Grossura 500.
600
Grossura 600.
700
800
Grossura 800.
900
Grossura 900.
bolder
lighter
inherit
Importante
Normalmente, as fontes no definem uma grossura diferente para cada um dos possveis valores da propriedade font-weight. Por isso, geralmente, dois ou mais valores so
mapeados para a mesma grossura de fonte.
font-weight
Fonte utilizada:
Roboto
http://google.com/fonts/specimen/Roboto
Curiosidade:
A fonte Roboto a fonte padro
utilizada nos sistemas Android a partir
da verso 4.0.
K19 Treinamentos
font-weight: normal
K19 Treinamentos
font-weight: 100
K19 Treinamentos
font-weight: 200
K19 Treinamentos
font-weight: 300
K19 Treinamentos
font-weight: 400
K19 Treinamentos
font-weight: 500
K19 Treinamentos
font-weight: 600
K19 Treinamentos
font-weight: 700
K19 Treinamentos
font-weight: 800
K19 Treinamentos
font-weight: 900
K19 Treinamentos
font-weight: bold
font
A propriedade font um atalho para as outras propriedades de fonte.
174
www.k19.com.br
175
CSS
1 font : font - style font - variant font - weight font - size / line - height font - family ;
@font-face
A regra @font-face permite utilizar uma fonte mesmo que ela no esteja disponvel no sistema
operacional do usurio. A fonte pode estar em um arquivo local (mquina do usurio) ou remoto
(servidor). Para cada fonte que deve ser adicionada, devemos definir uma regra font-face. Os navegadores carregam as fontes sob demanda, ou seja, somente se elas forem necessrias. Veja um
exemplo de utilizao dessa regra.
1 @font - face {
2
font - family : K19 ;
3
src : url ( http : // www . k19 . com . br / fonts / K19 . woff ) ;
4 }
A funo url() deve ser utilizada quando queremos uma fonte que est armazenada remotamente. Para carregar uma fonte disponvel na mquina do usurio, devemos utilizar a funo local(),
passando como parmetro o nome da fonte desejada.
1 @font - face {
2
font - family : NomeDaFonte ;
3
src : local ( nome - da - fonte ) ;
4 }
Para utilizar as fontes definidas na regra @font-face, basta definir a a propriedade font-family.
1 font - family : NomeDaFonte ;
O suporte dos navegadores aos diversos formatos de fonte est constantemente evoluindo. H
diversos sites que informam de maneira atualizada quais formatos so suportados por cada navegador. Recomendamos o site Can I use (http://caniuse.com/).
Existem diversos repositrios de fontes pagas e/ou gratuitas. Podemos utilizar as fontes desses repositrios atravs da regra font-face. Um dos repositrios mais importantes o Google Fonts
(http://www.google.com/fonts).
Outras propriedades
A linguagem CSS define mais algumas propriedades de formatao de fonte.
font-size-adjust
www.facebook.com/k19treinamentos
175
CSS
176
font-stretch
Exerccios de Fixao
12
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao12.zip
13
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
p {
border : 2 px black solid ;
}
# p1 {
width : 400 px ;
font - family : " Arial Black " , " Georgia " , " Courier New " , " sans - serif " ;
font - size : xx - large ;
font - style : italic ;
font - variant : small - caps ;
font - weight : bold ;
}
# p2 {
width : 400 px ;
font - family : " Butcherman " ;
}
Cdigo CSS 3.20: fontes.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao13.zip
14
176
www.k19.com.br
177
CSS
Listas
Podemos controlar a formatao das listas com as seguintes propriedades.
list-style-type
Podemos definir o smbolo utilizado nos itens de uma determinada lista com a propriedade liststyle-type. A listagem completa desses smbolos pode ser consultada no endereo http://www.w3.
org/TR/css3-lists/#ua-stylesheet. Veja alguns possveis valores da propriedade list-style-type.
Listas sem ordem
K19 Treinamentos
K19 Treinamentos
K19 Treinamentos
K19 Treinamentos
K19 Treinamentos
K19 Treinamentos
K19 Treinamentos
K19 Treinamentos
K19 Treinamentos
disc
circle
square
1. K19 Treinamentos
I. K19 Treinamentos
i. K19 Treinamentos
2. K19 Treinamentos
3. K19 Treinamentos
decimal
upper-roman
lower-roman
A. K19 Treinamentos
a. K19 Treinamentos
. K19 Treinamentos
B. K19 Treinamentos
b. K19 Treinamentos
. K19 Treinamentos
C. K19 Treinamentos
c. K19 Treinamentos
. K19 Treinamentos
upper-alpha
lower-alpha
hebrew
. K19 Treinamentos
. K19 Treinamentos
. K19 Treinamentos
. K19 Treinamentos
. K19 Treinamentos
. K19 Treinamentos
lower-greek
katakana
. K19 Treinamentos
. K19 Treinamentos
. K19 Treinamentos
cjk-ideographic
list-style-image
possvel definir uma imagem para ser utilizada nos itens de uma determinada lista com a propriedade list-style-image.
Valor
Descrio
url(url)
URL da imagem.
www.facebook.com/k19treinamentos
177
CSS
178
Valor
Descrio
none
inherit
K19 Treinamentos
K19 Treinamentos
list-style-image: url(estrela.png)
K19 Treinamentos
list-style-position
Por padro, os bullets de uma lista no so exibidos dentro dos boxes dos itens. Podemos alterar
esse comportamento atravs da propriedade list-style-position.
Valor
Descrio
inside
outside
inherit
K19 Treinamentos
K19 Treinamentos
K19 Treinamentos
K19 Treinamentos
K19 Treinamentos
K19 Treinamentos
list-style-position: outside
list-style-position: inside
list-style
A propriedade list-style um atalho para as outras propriedades de lista.
1 list - style : list - style - type list - style - position list - style - image
Exerccios de Fixao
15
178
www.k19.com.br
179
CSS
13
</ ul >
14
15
< ul id = " ul2 " >
16
< li > K01 - Lgica de Programao </ li >
17
< li > K02 - Desenvolvimento Web com HTML , CSS e JavaScript </ li >
18
< li > K03 - Modelo Relacional e SQL </ li >
19
</ ul >
20
21
< ol >
22
< li > K01 - Lgica de Programao </ li >
23
< li > K02 - Desenvolvimento Web com HTML , CSS e JavaScript </ li >
24
< li > K03 - Modelo Relacional e SQL </ li >
25
</ ol >
26
</ body >
27 </ html >
Cdigo HTML 3.12: listas.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao15.zip
16
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao16.zip
17
Bordas
A linguagem CSS possui diversas propriedades para definir a formatao das bordas dos elementos HTML.
www.facebook.com/k19treinamentos
179
CSS
180
border-style
Podemos definir o estilo das bordas de um elemento HTML com a propriedade border-style. Veja
os principais valores dessa propriedade.
dotted
dashed
solid
double
groove
ridge
inset
outset
border-width
A grossura das bordas pode ser determinada com a propriedade border-width.
Valor
Descrio
thin
Borda fina.
medium
thick
Borda grossa.
medida
inherit
thin
medium
thick
10px
border-color
A propriedade border-color define a cor das bordas de um elemento HTML. Essa propriedade
aceita o valor transparent(padro) ou qualquer cor CSS.
180
Valor
Descrio
color
transparent
inherit
www.k19.com.br
181
CSS
border
A propriedade border um atalho para as propriedades que definem o estilo, a grossura e a cor
das bordas dos elementos HTML.
1 border : border - width border - style border - color ;
border-width: 10px;
border-top-style: dashed;
border-top-color: blue;
border-right-style: solid;
border-right-color: green;
border-bottom-style: groove;
border-bottom-color: orange;
border-left-style: dotted;
border-left-color: red;
border-left border-top border-right border-bottom
As propriedades border-left, border-top, border-right e border-bottom so atalhos para as propriedades que definem individualmente o estilo, a grossura e a cor das bordas da esquerda, superiores, da direita e inferiores dos elementos HTML. Veja alguns exemplos:
border-radius
Bordas com cantos arredondados podem ser definidas com a propriedade border-radius.
www.facebook.com/k19treinamentos
181
CSS
182
Valor
Descrio
medida
x%
5px
10px 10px
10px
10px
10px 10px
5px
border-radius: 10px
5px
10px
5px
10px
20px
20px
5px
3px
border-*-*-radius
As propriedades border-top-left-radius, border-top-right-radius, border-bottom-right-radius
e border-bottom-left-radius so utilizadas para definir o arredondamento das bordas dos cantos
superior esquerdo, superior direito, inferior direito e inferior esquerdo respectivamente. Veja alguns
exemplos:
10px
10px
border-top-left-radius: 10px
10px
border-bottom-right-radius: 10px
182
border-top-right-radius: 10px
10px
border-bottom-left-radius: 10px
www.k19.com.br
183
CSS
border-collapse
Podemos definir bordas para cada clula de uma tabela e para a prpria tabela. Por padro, essas
bordas so exibidas separadamente. Mas, possvel determinar que duas bordas vizinhas sejam
exibidas como se fossem uma s com a propriedade border-collapse.
Valor
Descrio
separate
collapse
Bordas unidades.
inherit
Clula 1
Clula 2
Clula 1
Clula 2
Clula 3
Clula 4
Clula 3
Clula 4
border-collapse: separate
border-collapse: collapse
border-spacing
A propriedade border-spacing permite definir o espaamento entre as clulas de uma tabela.
Essa propriedade afeta o espaamento entre as bordas somente se o valor da propriedade bordercollapse for separate.
Valor
Descrio
medida1 medida2
medida
inherit
Clula 1
Clula 2
Clula 1
Clula 2
Clula 3
Clula 4
Clula 3
Clula 4
border-spacing: 5px
Outras propriedades
A linguagem CSS define mais algumas propriedades de formatao de bordas.
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
www.facebook.com/k19treinamentos
183
CSS
184
Exerccios de Fixao
18
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao18.zip
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
div {
width : 200 px ;
height : 100 px ;
margin : 10 px ;
}
# div1 {
border - style : solid ;
border - width : thin ;
border - color : red ;
border - radius : 10 px ;
}
# div2 {
border - style : dotted ;
border - color : yellow ;
border - radius : 10 px 30 px ;
}
# div3 {
184
www.k19.com.br
185
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
CSS
border - style : dashed ;
border - width : 4 px ;
border - color : blue ;
border - radius : 10 px 20 px 30 px 40 px ;
}
# div4 {
border - style : double ;
border - width : 8 px ;
border - color : green ;
border - top - left - radius : 10 px ;
border - top - right - radius : 20 px ;
border - bottom - right - radius : 30 px ;
border - bottom - left - radius : 40 px ;
}
# div5 {
border - left - style : solid ;
border - left - width : thin ;
border - left - color : red ;
border - top - style : dotted ;
border - top - color : yellow ;
border - right - style : dashed ;
border - right - width : 4 px ;
border - right - color : blue ;
border - bottom - style : double ;
border - bottom - width : 8 px ;
border - bottom - color : green ;
}
table , td {
font - size : xx - large ;
border : 1 px solid black ;
margin : 10 px ;
}
# tabela1 {
border - collapse : collapse ;
}
# tabela2 {
border - spacing : 20 px ;
}
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao19.zip
20
Outline
www.facebook.com/k19treinamentos
185
CSS
186
O box de um elemento HTML pode ser contornado por uma linha denominada outline. Essa
linha no afeta as dimenses dos boxes. A linguagem CSS possui diversas propriedades para definir
a formatao do outline dos elementos HTML.
outline-style
Podemos definir o estilo do outline de um elemento HTML com a propriedade outline-style. Veja
os principais valores dessa propriedade.
dotted
dashed
solid
double
groove
ridge
inset
outset
outline-color
A propriedade outline-color define a cor do outline de um elemento HTML.
Valor
Descrio
color
invert
inherit
outline-width
A grossura dos outlines pode ser determinada com a propriedade outline-width.
186
Valor
Descrio
thin
Outline fino.
medium
thick
Outline grosso.
medida
inherit
www.k19.com.br
187
CSS
thin
medium
thick
10px
outline-offset
Podemos definir a distncia do outline de um elemento HTML em relao s bordas do mesmo
com a propriedade outline-offset.
Valor
Descrio
medida
inherit
outline-offset: 10px
outline-offset: -5px
outline
A propriedade outline um atalho para as propriedades outline-color, outline-style e outlinewidth. Veja a sintaxe dessa propriedade.
1 outline : outline - color outline - style outline - width ;
Exerccios de Fixao
21
www.facebook.com/k19treinamentos
187
CSS
188
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao21.zip
22
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
div {
width : 200 px ;
height : 100 px ;
border : 4 px solid black ;
margin : 50 px ;
}
# div1 {
outline - style : solid ;
outline - color : red ;
outline - width : 4 px ;
}
# div2 {
outline - style : dashed ;
outline - color : blue ;
outline - width : 2 px ;
outline - offset : -20 px ;
}
# div3 {
outline - style : solid ;
outline - color : green ;
outline - width : 4 px ;
outline - offset : 20 px ;
}
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao22.zip
23
Sombras
A propriedade box-shadow permite adicionar sombras externas e internas nos boxes dos elementos HTML. O valor dessa propriedade pode ser definido de diversas maneiras. Confira, nas imagens abaixo, algumas formas de utilizao da propriedade box-shadow para definir sombras externas.
188
www.k19.com.br
189
CSS
Deslocamento horizontal
#a {
}
#a
Deslocamento vertical
Deslocamento horizontal
Esmaecimento
#b {
}
#b
Deslocamento vertical
Deslocamento horizontal
#c {
}
Esmaecimento
Propagao
#c
Deslocamento vertical
Os valores dos deslocamentos vertical e horizontal podem ser negativos fazendo com que a sombra externa seja projetada para cima e para a esquerda.
As regras para definir uma da sombra interna so praticamente as mesmas da sombra externa. A
nica diferena que devemos comear a atribuio do valor com a palavra inset.
Deslocamento horizontal
#a {
}
Deslocamento vertical
www.facebook.com/k19treinamentos
#a
189
CSS
190
Deslocamento horizontal
#b {
}
Deslocamento vertical
#b
Esmaecimento
Deslocamento horizontal
#c {
}
Deslocamento vertical
#c
Esmaecimento
Propagao
Exerccios de Fixao
24
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao24.zip
25
1 div {
2
width : 200 px ;
3
height : 100 px ;
4
border : 4 px solid black ;
5
margin : 50 px ;
6 }
7
8 # div1 {
190
www.k19.com.br
191
9
10
11
12
13
14
15
16
17
18
19
20
21
22
CSS
box - shadow : 10 px 5 px gray ;
}
# div2 {
box - shadow : 10 px 5 px 5 px gray ;
}
# div3 {
box - shadow : inset 10 px 10 px gray ;
}
# div4 {
box - shadow : inset 10 px 10 px 5 px gray ;
}
Cdigo CSS 3.27: sombras.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao25.zip
26
Margens
A linguagem CSS possui diversas propriedades para definir a formatao das margens internas e
externas dos elementos HTML.
margin-*
Os tamanhos das margens externas do box de elemento HTML podem ser definidos individualmente com as propriedades margin-left, margin-top, margin-right e margin-bottom.
Valor
Descrio
auto
medida
x%
O valor x corresponde ao tamanho da margem. Esse valor uma porcentagem da largura do elemento HTML pai.
inherit
www.facebook.com/k19treinamentos
191
CSS
192
5px
20px
10px
margin-top: 5px
margin-right: 10px
margin-bottom: 15px
margin-left: 20px
15px
margin
A propriedade margin um atalho para as propriedades margin-left, margin-top, margin-right
e margin-bottom. Podemos utilizar a propriedade margin de 4 formas diferentes:
5px
20px
5px
10px
10px
15px
15px
5px
10px
5px
10px
5px
10px
5px
5px
5px
margin: 5px
padding-*
Os tamanhos das margens internas do box de elemento HTML podem ser definidos individualmente com as propriedades padding-left, padding-top, padding-right e padding-bottom.
192
Valor
Descrio
medida
x%
O valor x corresponde ao tamanho da margem. Esse valor uma porcentagem da largura do elemento HTML pai.
inherit
www.k19.com.br
193
CSS
5px
20px
10px
padding-top: 5px
padding-right: 10px
padding-bottom: 15px
padding-left: 20px
15px
padding
A propriedade padding um atalho para as propriedades padding-left, padding-top, paddingright e padding-bottom. Podemos utilizar a propriedade padding de 4 formas diferentes:
5px
20px
5px
10px
10px
15px
5px
10px
10px
15px
5px
10px
5px
5px
5px
5px
padding: 5px
Mais Sobre
Considere o seguinte exemplo.
1 # div2 {
www.facebook.com/k19treinamentos
193
CSS
194
2
width : 50%;
3 }
Exerccios de Fixao
27
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao27.zip
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div {
width : 600 px ;
border : 1 px solid black ;
}
p, a {
border : 1 px solid black ;
}
# p1 {
margin : 5 px 10 px 20 px 30 px ;
padding : 5 px 0 px 0 px 20 px ;
}
# a1 {
margin - left : 10 px ;
194
www.k19.com.br
195
17
18
19
20
21
22
23
24
25
26
27
28
CSS
padding : 5 px ;
}
# a2 {
margin - left : 20 px ;
padding : 10 px ;
}
# p2 {
margin : 20 px ;
padding : 10 px ;
}
Cdigo CSS 3.30: margens.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao28.zip
29
Altura e Largura
A linguagem CSS possui algumas propriedades para controlar a largura e a altura dos elementos
HTML.
height e width
A altura e a largura dos boxes dos elementos HTML podem ser definidas com as propriedades
height e width respectivamente.
Valor
Descrio
auto
medida
x%
inherit
min-height e max-height
A propriedade height utilizada para determinar a altura exata do box de um elemento HTML.
Uma outra abordagem definir um limite inferior e/ou um limite superior para essa dimenso. Esses
limites podem ser definidos com as propriedades min-height e max-height.
Valor
Descrio
none
medida
www.facebook.com/k19treinamentos
195
CSS
196
Valor
Descrio
x%
inherit
min-width e max-width
A propriedade width utilizada para determinar a largura exata do box de um elemento HTML.
Uma outra abordagem definir um limite inferior e/ou um limite superior para essa dimenso. Esses
limites podem ser definidos com as propriedades min-width e max-width.
Valor
Descrio
none
medida
x%
inherit
Exerccios de Fixao
30
196
www.k19.com.br
197
CSS
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao30.zip
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
p {
border : 1 px solid black ;
max - width : 600 px ;
max - height : 250 px ;
min - height : 100 px ;
}
# p1 {
width : 200 px ;
}
# p2 {
width : 400 px ;
}
Cdigo CSS 3.31: altura-largura.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao31.zip
32
Display e Visibilidade
A linguagem CSS possui algumas propriedades para controlar a forma de exibio e a visibilidade
dos elementos HTML.
display
A propriedade display define a forma de exibio dos elementos HTML. Os 5 principais valores
dessa propriedade so: inline(padro), block, inline-block, list-item e none.
Valor
Descrio
inline
Considere o box de um elemento HTML com display: inline. Esse box no gera
quebras de linha e as suas dimenses so calculadas com base no contedo do elemento HTML. As propriedades width e height no modificam a largura e a altura
do box. As margens e as bordas do box de um elemento HTML com display: inline
empurram os boxes vizinhos horizontalmente. Verticalmente, os boxes vizinhos
no so empurrados.
block
Considere o box de um elemento HTML com display: block. Esse box gera quebras
de linha e, por padro, ocupa todo o espao horizontal do elemento pai. Podemos
controlar a largura e a altura desse box com as propriedades width e height.
www.facebook.com/k19treinamentos
197
CSS
198
Valor
Descrio
inline-block
list-item
O comportamento dos boxes dos elementos HTML com display: list-item similar
ao dos boxes dos elementos HTML com display: block. Basicamente, a diferena
entre eles que um bullet exibido no canto esquerdo de box de um elemento
HTML com display: list-item.
none
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit
amet bibendum. Aliquam sed tempor tellus. Duis
placerat
suscipit turpis in sollicitudin.
Nunc lacus magna, auctor vitae venenatis eu, dictum ac augue. Nunc eleifend dignissim felis.
display: inline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit
amet bibendum. Aliquam sed tempor tellus. Duis
placerat
suscipit turpis in sollicitudin. Nunc lacus magna, auctor vitae venenatis eu, dictum ac augue.
Nunc eleifend dignissim felis.
display: block
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit
amet bibendum. Aliquam sed tempor tellus. Duis
placerat
Nunc lacus magna, auctor vitae venenatis eu, dictum ac augue. Nunc eleifend dignissim felis.
display: inline-block
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit
amet bibendum. Aliquam sed tempor tellus. Duis
placerat
suscipit turpis in sollicitudin. Nunc lacus magna, auctor vitae venenatis eu, dictum ac augue.
Nunc eleifend dignissim felis.
display: list-item
198
www.k19.com.br
199
CSS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit
amet bibendum. Aliquam sed tempor tellus. Duis suscipit turpis in sollicitudin. Nunc lacus
magna, auctor vitae venenatis eu, dictum ac augue. Nunc eleifend dignissim felis.
display: none
visibility
Podemos determinar se um elemento HTML deve ser exibido ou no atravs da propriedade
visibility. O valor visible(padro) indica que o elemento deve ser exibido e o valor hidden indica que
o elemento no deve ser exibido.
Valor
Descrio
visible
Visvel (padro).
hidden
Invisvel.
inherit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit
amet bibendum. Aliquam sed tempor tellus. Duis
placerat
suscipit turpis in sollicitudin.
Nunc lacus magna, auctor vitae venenatis eu, dictum ac augue. Nunc eleifend dignissim felis.
visibility: visible
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit
amet bibendum. Aliquam sed tempor tellus. Duis
suscipit turpis in sollicitudin.
Nunc lacus magna, auctor vitae venenatis eu, dictum ac augue. Nunc eleifend dignissim felis.
visibility: hidden
Importante
Na renderizao, os elementos HTML com display: none so totalmente desconsiderados. Em outras palavras, como se eles simplesmente no existissem. Dessa forma,
eles no afetam o posicionamento dos demais elementos. Por outro lado, os elementos HTML
com visibility: hidden apesar de no serem exibidos fazem parte da pgina renderizada e podem afetar o posicionamento dos demais elementos pois o espao ocupado por eles pode no
ser nulo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit
amet bibendum. Aliquam sed tempor tellus. Duis suscipit turpis in sollicitudin. Nunc lacus
magna, auctor vitae venenatis eu, dictum ac augue. Nunc eleifend dignissim felis.
display: none
www.facebook.com/k19treinamentos
199
CSS
200
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit
amet bibendum. Aliquam sed tempor tellus. Duis
suscipit turpis in sollicitudin.
Nunc lacus magna, auctor vitae venenatis eu, dictum ac augue. Nunc eleifend dignissim felis.
visibility: hidden
Exerccios de Fixao
33
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao33.zip
34
1 p {
2
border : 2 px solid black ;
200
www.k19.com.br
201
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
CSS
width : 600 px ;
}
span {
padding : 15 px ;
margin : 40 px ;
width : 200 px ;
height : 100 px ;
border : 2 px solid black ;
background - color : yellow ;
}
# span1 {
display : inline ;
}
# span2 {
display : block ;
}
# span3 {
display : inline - block ;
}
# span4 {
display : list - item ;
}
# span5 {
display : none ;
}
# span6 {
visibility : hidden ;
}
Cdigo CSS 3.32: display-visibilidade.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao34.zip
35
Opacidade
Podemos definir a opacidade dos elementos HTML com a propriedade opacity.
Valor
Descrio
inherit
www.facebook.com/k19treinamentos
201
CSS
202
opacity: 1
opacity: 0.75
opacity: 0.5
opacity: 0.25
Exerccios de Fixao
36
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao36.zip
37
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
div {
width : 100 px ;
height : 100 px ;
background - color : red ;
}
# div1 {
opacity : 0;
}
# div2 {
opacity : 0.25;
}
# div3 {
opacity : 0.5;
}
# div4 {
opacity : 0.75;
}
# div5 {
opacity : 1;
}
202
www.k19.com.br
203
CSS
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao37.zip
38
Posicionamento
A linguagem CSS define quatro formas para posicionar os boxes dos elementos HTML: static,
relative, fixed e absolute. Mostraremos o funcionamento de cada uma dessas formas. A propriedade
position determina a forma de posicionamento desejada.
static
O valor static o valor padro da propriedade position. O box de um elemento com position:
static colocado na sua posio natural. No podemos alterar a posio dos boxes dos elementos
HTML com position: static.
Duis nunc est, consequat vel pulvinar in, egestas sit amet odio. Praesent
at leo feugiat, fermentum diam ut, commodo lacus. Interdum et malesua
fames ac ante ipsum primis in faucibus.
position: static
relative
O box de um elemento com position: relative colocado em uma posio relativa a sua posio
natural. As propriedades left, top, right e bottom so utilizadas para determinar o deslocamento
entre a posio desejada e a posio natural. O espao que seria ocupado por esse box se ele estivesse
em sua posio natural no ocupado por nenhum outro elemento.
www.facebook.com/k19treinamentos
203
CSS
204
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
accumsan vehicula diam sit amet bibendum. Aliquam sed tempor tellus.
Duis placerat suscipit turpis in sollicitudin.
Duis nunc est, consequat vel pulvinar in, egestas sit amet odio. Praesent
at leo feugiat, fermentum diam ut, commodo lacus. Interdum et malesua
fames ac ante ipsum primis in faucibus.
position: relative
fixed
O box de um elemento com position: fixed colocado em uma posio relativa pgina e no
acompanha a rolagem do contedo. As propriedades left, top, right e bottom so utilizadas para
determinar o deslocamento entre a posio desejada e pagina.
position: fixed
absolute
O box de um elemento com position: absolute colocado em uma posio relativa posio do
box do elemento HTML ancestral mais prximo com position diferente de static. Se no existir um
ancestral nessas condies a posio ser relativa pgina. As propriedades left, top, right e bottom
so utilizadas para determinar o deslocamento entre a posio desejada e o ponto de referncia.
Duis nunc est, consequat vel pulvinar in, egestas sit amet odio. Praesent
at leo feugiat, fermentum diam ut, commodo lacus. Interdum et malesua
fames ac ante ipsum primis in faucibus.
position: absolute
Figura 3.7: Elemento com position diferente de static utilizado como referncia
204
www.k19.com.br
205
CSS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
accumsan vehicula diam sit amet bibendum. Aliquam sed tempor
tellus. Duis placerat suscipit turpis in sollicitudin.
Duis nunc est, consequat vel pulvinar in, egestas sit amet odio.
Praesent at leo feugiat, fermentum diam ut, commodo lacus.
Interdum et malesua fames ac ante ipsum primis in faucibus.
Fusce vehicula turpis vitae mauris ornare, sed vestibulum arcu
dapibus. Etiam posuere luctus arcu ut molestie. Aenean rutrum
erat nec dolor imperdiet volutpat. Fusce id turpis suscipit, tristique
dui ac, gravida augue. Nam ac placerat justo. Aliquam ut congue
ligula. Fusce id varius magna. In quis fringilla ante, id
pellentesque risus. Maecenas elementum at purus a facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis nunc est, consequat vel pulvinar in, egestas sit amet odio.
Praesent at leo feugiat, fermentum diam ut, commodo lacus.
Interdum et malesua fames ac ante ipsum primis in faucibus.
Fusce vehicula turpis vitae mauris ornare, sed vestibulum arcu
dapibus. Etiam posuere luctus arcu ut molestie. Aenean rutrum
erat nec dolor imperdiet volutpat. Fusce id turpis suscipit, tristique
dui ac, gravida augue. Nam ac placerat justo. Aliquam ut congue
ligula. Fusce id varius magna. In quis fringilla ante, id
pellentesque risus. Maecenas elementum at purus a facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sed tempor tellus. Duis placerat suscipit turpis in
sollicitudin. Nunc lacus magna, auctor vitae venenatis eu, dictum
ac augue. Nunc eleifend dignissim felis at mattis.
position: absolute
Figura 3.8: Pgina utilizada como referncia
float
Podemos fazer o box de um elemento HTML flutuar ao redor dos demais elementos atravs da
propriedade float.
Valor
Descrio
left
Flutuar esquerda.
right
Flitar direita.
none
inherit
float: left
float: right
Importante
Os elementos HTML com float diferente de none podem ser reposicionados se a janela
for redimensionada.
Importante
Os elementos HTML com float diferente de none no afetam a altura ou a largura do
elemento HTML onde eles esto contidos.
clear
Os box dos elementos HTML prximos do box de um elemento HTML om float diferente de none
so empurrados horizontalmente esquerda ou direita. Podemos determinar que, ao invs de serem empurrados horizontalmente, eles sejam exibidos em uma nova linha atravs da propriedade
clear.
www.facebook.com/k19treinamentos
205
CSS
206
Valor
Descrio
left
right
both
none
inherit
clear: none
clear: none
clear: left
clear: left
clear: none
clear: none
clear: rigth
Lorem ipsum
dolor sit amet.
Lorem ipsum
dolor sit amet.
clear: right
clear: none
clear: none
clear: both
clear: both
z-index
A sobreposio dos boxes dos elementos HTML pode ser controlada atravs da propriedade zindex. Basicamente, essa propriedade permite determinar em qual plano um box deve ser exibido.
206
Valor
Descrio
auto
inherit
207
CSS
Alinhamento vertical
Utilizando as propriedades de margem e posicionamento podemos alinhar um elemento de
forma centralizada na vertical.
Qualquer valor
diferente de static
#container {
height: 600px;
position: relative;
}
#conteudo {
height: 200px;
position: absolute;
top: 50%;
margin-top: -100px;
}
top: 50%
#conteudo
margin-top: -100px
#container
Exerccios de Fixao
39
www.facebook.com/k19treinamentos
207
CSS
208
32
<p id = " p6 " >
33
Lorem ipsum dolor sit amet , consectetur adipiscing elit . Aliquam
34
accumsan vehicula diam sit amet bibendum .
35
</ p >
36
<p id = " p7 " >
37
Lorem ipsum dolor sit amet , consectetur adipiscing elit . Aliquam
38
accumsan vehicula diam sit amet bibendum .
39
</ p >
40
<p id = " p8 " >
41
Lorem ipsum dolor sit amet , consectetur adipiscing elit . Aliquam
42
accumsan vehicula diam sit amet bibendum .
43
</ p >
44
45
< div id = " div1 " >
46
Posicionamento fixo
47
</ div >
48
49
< div id = " div2 " >
50
Posicionamento relativo
51
< div id = " div3 " >
52
Posicionamento absoluto
53
</ div >
54
</ div >
55
</ body >
56 </ html >
Cdigo HTML 3.21: posicionamento.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao39.zip
40
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
img {
float : left ;
}
# p3 {
clear : left ;
}
div {
width : 200 px ;
height : 100 px ;
color : white ;
}
# div1 {
position : fixed ;
right : 20 px ;
top : 40 px ;
background - color : green ;
}
# div2 {
position : relative ;
top : 30 px ;
left : 60 px ;
background - color : blue ;
}
# div3 {
position : absolute ;
bottom : -40 px ;
right : -100 px ;
background - color : red ;
z - index : -1;
}
208
www.k19.com.br
209
CSS
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao39.zip
41
Overflow e clip
Eventualmente, o contedo de um elemento HTML extrapola os limites do mesmo. A linguagem
CSS define algumas propriedades para determinar como essa situao deve ser tratada.
overflow-x
A propriedade overflow-x determina o que os navegadores devem fazer quando o contedo de
um elemento HTML extrapola horizontalmente os limites do mesmo.
Valor
Descrio
visible
hidden
scroll
auto
overflow-x: visible
overflow-x: hidden
overflow-x: scroll
overflow-x: auto
www.facebook.com/k19treinamentos
Lorem ipsum.
overflow-x: auto
209
CSS
210
overflow-y
A propriedade overflow-y determina o que os navegadores devem fazer quando o contedo de
um elemento HTML extrapola verticalmente os limites do mesmo.
Valor
Descrio
visible
hidden
scroll
O contedo excedente na vertical no ser exibido e um mecanismo rolagem vertical ser disponibilizado.
auto
O contedo excedente na vertical no ser exibido e um mecanismo rolagem vertical ser disponibilizado somente se necessrio.
overflow-y: visible
overflow-y: hidden
overflow-y: scroll
overflow
A propriedade overflow determina o que os navegadores devem fazer quando o contedo de um
elemento HTML extrapola os limites do mesmo.
210
Valor
Descrio
visible
hidden
scroll
auto
O contedo excedente no ser exibido e um mecanismo rolagem ser disponibilizado somente se necessrio.
no-display
inherit
www.k19.com.br
211
CSS
overflow: visible
overflow: hidden
overflow: scroll
overflow: auto
clip
Podemos determinar a regio do box de um elemento HTML que deve ser exibida com a propriedade clip. Essa propriedade s tem efeito sobre elementos com position: absolute.
Valor
Descrio
auto
inherit
85px
20px
50px
95px
clip: auto
Exerccios de Fixao
42
www.facebook.com/k19treinamentos
211
CSS
212
8
< body >
9
< div id = " div1 " >
10
<p > Lorem ipsum dolor sit amet , consectetur . </ p >
11
<p > Lorem ipsum dolor sit amet , consectetur . </ p >
12
<p > Lorem ipsum dolor sit amet , consectetur . </ p >
13
<p > Lorem ipsum dolor sit amet , consectetur . </ p >
14
</ div >
15
16
< div id = " div2 " >
17
<p > Lorem ipsum dolor sit amet , consectetur . </ p >
18
<p > Lorem ipsum dolor sit amet , consectetur . </ p >
19
<p > Lorem ipsum dolor sit amet , consectetur . </ p >
20
<p > Lorem ipsum dolor sit amet , consectetur . </ p >
21
</ div >
22
23
< div id = " div3 " >
24
<p > Lorem ipsum dolor sit amet , consectetur . </ p >
25
<p > Lorem ipsum dolor sit amet , consectetur . </ p >
26
<p > Lorem ipsum dolor sit amet , consectetur . </ p >
27
<p > Lorem ipsum dolor sit amet , consectetur . </ p >
28
</ div >
29
30
< div id = " div4 " >
31
<p > Lorem ipsum dolor sit amet , consectetur . </ p >
32
<p > Lorem ipsum dolor sit amet , consectetur . </ p >
33
<p > Lorem ipsum dolor sit amet , consectetur . </ p >
34
<p > Lorem ipsum dolor sit amet , consectetur . </ p >
35
</ div >
36
37
< div id = " div5 " >
38
Ol .
39
</ div >
40
41
< img id = " img1 " src = " http :// www . k19 . com . br / figs / main - header - logo . png " >
42
< img id = " img2 " src = " http :// www . k19 . com . br / figs / main - header - logo . png " >
43
</ body >
44 </ html >
Cdigo HTML 3.22: overflow-clip.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao42.zip
43
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
div {
margin : 70 px ;
width : 200 px ;
height : 100 px ;
border : 1 px solid red ;
}
p {
width : 270 px ;
}
# div1 {
overflow : visible ;
}
# div2 {
overflow : hidden ;
}
# div3 {
overflow : scroll ;
}
212
www.k19.com.br
213
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
CSS
# div4 {
overflow : auto ;
}
# div5 {
overflow : auto ;
}
# img1 {
position : absolute ;
top : 10 px ;
left : 400 px ;
clip : auto ;
}
# img2 {
position : absolute ;
top : 250 px ;
left : 400 px ;
clip : rect (10 px , 118 px , 108 px , 40 px ) ;
}
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao43.zip
44
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()
213
CSS
214
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.
214
www.k19.com.br
215
CSS
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
Exerccios de Fixao
45
www.facebook.com/k19treinamentos
215
CSS
216
10
translate ()
11
</ div >
12
13
< div id = " div2 " >
14
scale ()
15
</ div >
16
17
< div id = " div3 " >
18
rotate ()
19
</ div >
20
21
< div id = " div4 " >
22
skew ()
23
</ div >
24
</ body >
25 </ html >
Cdigo HTML 3.23: transformacoes.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao45.zip
46
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
div {
margin : 70 px ;
border : 1 px solid black ;
background - color : yellow ;
width : 100 px ;
height : 100 px ;
}
# div1 {
transform : translate (50 px , -20 px ) ;
/* Webkit : Chrome , Safari */
- webkit - transform : translate (50 px , -20 px ) ;
}
# div2 {
transform : scale (0.5 , 2) ;
/* Webkit : Chrome , Safari */
- webkit - transform : scale (0.5 , 2) ;
}
# div3 {
transform : rotate (15 deg ) ;
/* Webkit : Chrome , Safari */
- webkit - transform : rotate (15 deg ) ;
}
# div4 {
transform : skew (10 deg , -45 deg ) ;
/* Webkit : Chrome , Safari */
- webkit - transform : skew (10 deg , -45 deg ) ;
}
/* Moz : Firefox */
/* substituir " webkit " por " moz "
/* O : Opera */
/* substituir " webkit " por " o "
/* Ms : Internet Explorer */
/* substituir " webkit " por " ms " */
216
www.k19.com.br
217
CSS
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao46.zip
47
Transies
Como vimos anteriormente, as regras CSS podem ser aplicadas aos elementos HTML de acordo
com o estado atual do mesmo. Por exemplo, considere as duas regras CSS a seguir.
1
2
3
4
5
6
7
8
9
div {
width : 50 px ;
height : 50 px ;
}
div : hover {
width : 100 px ;
height : 100 px ;
}
De acordo com as duas regras CSS acima, quando o ponteiro do mouse for colocado por cima de
um div, a largura e a altura desse elemento HTML aumentar instantaneamente de 50px para 100px.
height: 20px;
Estado inicial
height: 80px;
Estado final
Quando a mudana visual de um elemento HTML muito significativa, o resultado pode no ser
agradvel aos usurio. A linguagem CSS possui propriedades para melhorar essas transies.
transition-duration
A durao das transies pode ser controlada com a propriedade transition-duration.
www.facebook.com/k19treinamentos
217
CSS
218
Valor
Descrio
tempo
width: 80px;
height: 80px;
transition-duration: 4s;
tempo (s)
transition-delay
Podemos estabelecer um atraso para o incio de uma transio com a propriedade transitiondelay.
Valor
Descrio
tempo
width: 80px;
height: 80px;
transition-duration: 1500ms;
transition-delay: 1s;
width: 20px;
height: 20px;
tempo (s)
0
2.5
transition-timing-function
Os frames que foram uma transio podem ser exibidos com padres diferentes. Por exemplo,
uma transio pode iniciar devagar, no meio acelerar e terminar devagar. O padro desejado pode
ser determinado atravs da propriedade transition-timing-function.
218
Valor
Descrio
linear
ease
O incio da transio lento, o meio rpido e o final volta a ser lento (padro). Equivale a cubic-bezier(0.25, 0.1, 0.25, 1).
Equivale a cubic-
www.k19.com.br
219
CSS
Valor
Descrio
ease-in
ease-out
ease-in-out
Semelhante ao valor ease com incio e final mais longos. Equivale a cubicbezier(0.42, 0, 0.58, 1).
cubic-bezier(n,n,n,n)
height: 20px;
height: 80px;
transition-duration: 4s;
transition-timing-function: linear;
tempo (s)
0
height: 80px;
transition-duration: 4s;
transition-timing-function: ease;
height: 20px;
tempo (s)
0
height: 20px;
height: 80px;
transition-duration: 4s;
transition-timing-function: ease-in;
tempo (s)
0
4
www.facebook.com/k19treinamentos
219
CSS
220
height: 80px;
transition-duration: 4s;
transition-timing-function: ease-out;
height: 20px;
tempo (s)
0
height: 20px;
height: 80px;
transition-duration: 4s;
transition-timing-function: ease-in-out;
tempo (s)
0
transition-property
Podemos escolher quais propriedades CSS devem ser consideradas nas transies atravs da propriedade transition-property.
Valor
Descrio
none
all
lista-de-propriedades
width: 1px;
height: 20px;
opacity: 0.3;
width: 20px;
height: 80px;
opacity: 1;
transition-duration: 4s;
transition-timing-function: linear;
transition-property: height, opacity;
tempo (s)
0
220
4
www.k19.com.br
221
CSS
Exerccios de Fixao
48
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao48.zip
49
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
# div1 {
margin : 300 px ;
padding : 10 px ;
width : 200 px ;
height : 200 px ;
background - color : #064 e83 ;
color : white ;
transition : 1 s ease - in - out ;
}
# div1 : hover {
transform : scale (4 , 4) rotate (360 deg ) ;
/* Webkit : Chrome , Safari */
- webkit - transform : scale (4 , 4) rotate (360 deg ) ;
}
/* Moz : Firefox */
/* substituir " webkit " por " moz "
/* O : Opera */
/* substituir " webkit " por " o "
/* Ms : Internet Explorer */
/* substituir " webkit " por " ms " */
Cdigo CSS 3.38: transicoes.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao49.zip
50
221
CSS
222
Animaes
A partir da sua terceira verso, a linguagem CSS adicionou algumas propriedades para criao de
animaes. Essas animaes so criadas atravs do conceito de keyframes. Nessa abordagem, devemos definir os quadros principais e os navegadores completam a animao inserindo os quadros
intermerdirios.
Keyframe
Frames intermedirios
Keyframe
Os quadros principais so definidos de acordo com o momento no qual eles sero exibidos. Esse
instante descrito como uma porcentagem do tempo total da animao.
222
www.k19.com.br
223
CSS
Quadros gerados automaticamente
pelo navegador
tempo (s)
0
@keyframes minha-animacao {
0% {
height: 20px;
opacity: 0.35;
}
50% {
opacity: 1;
}
100% {
height: 80px;
opacity: 0.35;
}
Mais Sobre
Essencialmente, as duas animaes abaixo so exatamente iguais.
1 @keyframes animacao1 {
2
from {
3
width : 10 px ;
4
}
5
to {
6
width : 70 px ;
7
}
8 }
1 @keyframes animacao2 {
2
0% {
3
width : 10 px ;
4
}
5
100% {
6
width : 70 px ;
7
}
8 }
Depois de definir as animaes com a propriedade keyframes, devemos associ-la aos elementos HTML atravs da propriedade animation-name e determinar o tempo de durao com a propriedade animation-duration.
1 div {
www.facebook.com/k19treinamentos
223
CSS
224
2
animation - name : k19 - animacao ;
3
animation - duration : 3 s ;
4 }
5
6 @keyframes k19 - animacao {
7
from {
8
width : 10 px ;
9
}
10
to {
11
width : 100 px ;
12
}
13 }
animation-timing-function
Podemos determinar o padro de exibio dos quadros de uma animao com a propriedade
animation-timing-function.
Valor
Descrio
linear
ease
O incio da animao lento, o meio rpido e o final volta a ser lento (padro). Equivale a cubic-bezier(0.25, 0.1, 0.25, 1).
ease-in
ease-out
ease-in-out
Semelhante ao valor ease com incio e final mais longos. Equivale a cubicbezier(0.42, 0, 0.58, 1).
cubic-bezier(n,n,n,n)
animation-delay
Podemos adicionar um atraso para o incio de uma animao com a propriedade animationdelay.
Valor
Descrio
tempo
animation-iteration-count
A quantidade de repeties de uma animao pode ser determinada com a propriedade animationiteration-count.
Valor
Descrio
infinite
animation-direction
A direo adotada na exibio de uma animao pode ser determinada atravs da propriedade
animation-direction.
224
www.k19.com.br
225
CSS
Valor
Descrio
normal
reverse
alternate
alternate-reverse
animation-play-state
As animaes podem ser pausadas ou reiniciadas atravs da propriedade animation-play-state.
Valor
Descrio
paused
A animao parada.
running
A animao em execuo.
Exerccios de Fixao
51
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao51.zip
52
1 # img1 {
2
position : absolute ;
3
top : 0 px ;
4
left : 100 px ;
5
z - index : 2;
6
animation : animacao1 1 s linear , animacao2 0.5 s linear ,
7
animacao3 500 ms linear , animacao4 500 ms linear ;
8
animation - delay : 2s , 3s , 3.5 s , 4 s ;
9
10
/* Webkit : Chrome , Safari */
11
- webkit - animation : animacao1 1 s linear , animacao2 0.5 s linear ,
12
animacao3 500 ms linear , animacao4 500 ms linear ;
13
- webkit - animation - delay : 2s , 3s , 3.5 s , 4 s ;
14 }
15
www.facebook.com/k19treinamentos
225
CSS
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
226
# img2 {
position : absolute ;
top : 400 px ;
left : 110 px ;
z - index : 1;
transform : scale (2.5 , 2.5) ;
animation : animacao5 1 s linear , animacao6 0.5 s linear ,
animacao7 500 ms linear , animacao8 500 ms linear ;
animation - delay : 2s , 3s , 3.5 s , 4 s ;
/* Webkit : Chrome , Safari */
- webkit - transform : scale (2.5 , 2.5) ;
- webkit - animation : animacao5 1 s linear , animacao6 0.5 s linear ,
animacao7 500 ms linear , animacao8 500 ms linear ;
- webkit - animation - delay : 2s , 3s , 3.5 s , 4 s ;
}
@keyframes animacao1 {
to {
top : 310 px ;
}
}
@keyframes animacao2 {
from {
top : 310 px ;
}
to {
top : 335 px ;
transform : scale (1.25 , 0.75) ;
}
}
@keyframes animacao3 {
from {
top : 335 px ;
transform : scale (1.25 , 0.75) ;
}
to {
top : 285 px ;
transform : scale (0.75 , 1.25) ;
}
}
@keyframes animacao4 {
from {
top : 285 px ;
transform : scale (0.75 , 1.25) ;
}
to {
top : 310 px ;
transform : scale (1 , 1) ;
}
}
@keyframes animacao5 {
to {
transform : scale (1.5 , 1.5) ;
}
}
@keyframes animacao6 {
from {
transform : scale (1.5 , 1.5) ;
}
to {
transform : scale (1.75 , 1.75) ;
}
}
226
www.k19.com.br
227
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
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
CSS
@keyframes animacao7 {
from {
transform : scale (1.75 , 1.75) ;
}
to {
transform : scale (1.25 , 1.25) ;
}
}
@keyframes animacao8 {
from {
transform : scale (1.25 , 1.25) ;
}
to {
transform : scale (1.5 , 1.5) ;
}
}
/* Webkit : Chrome , Safari */
@ - webkit - keyframes animacao1 {
to {
top : 310 px ;
}
}
@ - webkit - keyframes animacao2 {
from {
top : 310 px ;
}
to {
top : 335 px ;
- webkit - transform : scale (1.25 , 0.75) ;
}
}
@ - webkit - keyframes animacao3 {
from {
top : 335 px ;
- webkit - transform : scale (1.25 , 0.75) ;
}
to {
top : 285 px ;
- webkit - transform : scale (0.75 , 1.25) ;
}
}
@ - webkit - keyframes animacao4 {
from {
top : 285 px ;
- webkit - transform : scale (0.75 , 1.25) ;
}
to {
top : 310 px ;
- webkit - transform : scale (1 , 1) ;
}
}
@ - webkit - keyframes animacao5 {
to {
- webkit - transform : scale (1.5 , 1.5) ;
}
}
@ - webkit - keyframes animacao6 {
from {
- webkit - transform : scale (1.5 , 1.5) ;
}
to {
- webkit - transform : scale (1.75 , 1.75) ;
www.facebook.com/k19treinamentos
227
CSS
156
157
158
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
228
}
}
@ - webkit - keyframes animacao7 {
from {
- webkit - transform : scale (1.75 , 1.75) ;
}
to {
- webkit - transform : scale (1.25 , 1.25) ;
}
}
@ - webkit - keyframes animacao8 {
from {
- webkit - transform : scale (1.25 , 1.25) ;
}
to {
- webkit - transform : scale (1.5 , 1.5) ;
}
}
/* Moz : Firefox */
/* substituir " webkit " por " moz "
/* O : Opera */
/* substituir " webkit " por " o "
/* Ms : Internet Explorer */
/* substituir " webkit " por " ms " */
Cdigo CSS 3.43: animacoes.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao52.zip
53
Seletores
Como vimos, os seletores so utilizados para determinar quais elementos HTML devem ser afetados por uma regra CSS. A linguagem CSS oferece uma grande variedade de seletores.
Seletores bsicos
Seletor
Padro
Exemplo
Descrio
Universal
Tipo
Classe
.class
.erro
ID
#id
#conteudo
Descendente
e1 e2
pa
Filho
e1 > e2
p>a
228
www.k19.com.br
229
CSS
Seletor
Padro
Exemplo
Descrio
Irmo Adjacente
e1 + e2
h1 + p
Irmo
e1 e2
h1 p
Seletores de atributos
Padro
Exemplo
Descrio
[a]
[min]
[a=v]
[min=10]
[a=v]
[title=k19]
[a=v]
[href="https"]
[a$=v]
[href$=".css"]
[a*=v]
[title*=k19]
[a|=v]
[href|="https"]
Padro
Exemplo
Descrio
:root
:root
:nth-child(n)
:nth-child(3)
:nth-last-child(n)
:nth-last-child(3)
:nth-of-type(n)
a:nth-of-type(3)
:nth-last-of-type(n)
a:nth-last-of-type(3)
:first-child
:first-child
:last-child
:last-child
:first-of-type
a:first-of-type
:last-of-type
a:last-of-type
:only-child
:only-child
:only-of-type
a:only-of-type
Pseudo-classes
www.facebook.com/k19treinamentos
229
CSS
230
Padro
Exemplo
Descrio
:empty
:empty
:link
a:link
:visited
a:visited
:active
a:active
:hover
a:hover
:focus
input:focus
:target
:target
:lang(lang)
:lang(pt)
:enabled
input:enabled
:disabled
input:disabled
:checked
input:checked
:not(s)
:not(.erro)
Padro
Exemplo
Descrio
:first-line
p:first-line
:first-letter
p:first-letter
:before
p:before
:after
p:after
Pseudo-elementos
Prioridade de seletores
Eventualmente, um elemento HTML afetado por duas ou mais regras CSS. Alm disso, uma determinada propriedade CSS pode ser definida com valores diferentes em duas ou mais dessas regras.
Nesse caso, essa propriedade ter o valor definido na regra CSS de maior prioridade. Essas prioridades so calculadas de acordo com os seletores utilizados nas regras CSS e na ordem em que elas
foram definidas.
Considere o cdigo HTML e o cdigo CSS a seguir.
1 <p id = " p1 " class = " class1 " >
2
Lorem ipsum dolor sit amet , consectetur adipiscing elit .
3 </ p >
1
2
3
4
5
6
7
8
p {
color : red ;
font - size : 14 px ;
}
p {
color : blue ;
}
Perceba que todo elemento p afetado pelas duas regras CSS acima. Nessas duas regras, a propriedade color foi definida com valores diferentes. Os seletores dessas duas regras possuem a mesma
importncia. Nesse caso, a ltima regra tem maior prioridade. Portanto, o texto do pargrafo ser
exibido em azul.
230
www.k19.com.br
231
CSS
A propriedade font-size no entrou em conflito, pois foi definida em apenas uma das regras CSS.
Portanto, o tamanho da fonte do texto do pargrafo ser 14px.
Agora, suponha que o cdigo CSS seja o seguinte:
1
2
3
4
5
6
7
8
. class1 {
color : red ;
font - size : 14 px ;
}
p {
color : blue ;
}
Observe que o pargrafo do exemplo afetado pelas duas regras CSS acima. Nesse caso, qual ser
a cor do texto do pargrafo? A resposta correta vermelho. Isso ocorre, pois os seletores de classe
possuem importncia maior que os seletores de tipo.
Conforme a complexidade dos seletores utilizados em nossas regras CSS aumenta, a dificuldade
em determinar qual deles possui maior importncia tambm aumenta. Por isso, devemos seguir o
algoritmo definido na especificao da linguagem CSS para determinar a importncia dos seletores.
Nesse algoritmo, os seletores obtero uma pontuao em quatro critrios diferentes.
A: Caso as propriedades sejam definidas atravs do atributo style, a pontuao nesse critrio ser 1.
Caso contrrio ser 0.
B: A pontuao nesse critrio ser a quantidade de seletores de ID que formam o seletor da regra
CSS.
C: A pontuao nesse critrio ser a soma das quantidades de seletores de classe, de atributos e de
pseudo-classes que formam o seletor da regra CSS.
D: A pontuao nesse critrio ser a soma das quantidades de seletores de tipo e de pseudo-elementos
que formam o seletor da regra CSS.
O critrio A possui prioridade sobre o critrio B, que por sua vez possui prioridade sobre o critrio
C, que por sua vez possui prioridade sobre o critrio D. Veja nas imagens abaixo, um exemplo de
como calcular a pontuao dos seletores.
C
Pontuao:
0
A
www.facebook.com/k19treinamentos
3
B
5
C
3
D
231
CSS
232
Pontuao:
0
A
No critrio A, as duas regras obtiveram a mesma pontuao. Como ocorreu um empate, devemos
analisar o critrio seguinte. No critrio B, houve outro empate. Portanto, devemos analisar o prximo
critrio. No critrio C, a primeira regra possui uma pontuao maior. Dessa forma, o seletor da
primeira regra possui maior importncia fazendo com que essa regra tenha maior prioridade.
Exerccios de Fixao
54
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao54.zip
55
1 * {
232
www.k19.com.br
233
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
CSS
margin : 0 px ;
padding : 0 px ;
}
body {
background - color : # ddd ;
}
# conteudo {
width : 800 px ;
margin : 0 auto ;
background - color : white ;
border : 1 px solid #333;
padding : 10 px ;
}
. cancelado {
text - decoration : line - through ;
}
ul {
padding : 0 0 0 40 px ;
}
ul li {
color : blue ;
}
# conteudo > ul > li {
margin : 0 0 20 px 0;
}
ul + p {
color : red ;
}
ul ~ p {
font - style : italic ;
}
Cdigo CSS 3.46: seletores-basicos.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao55.zip
56
57
www.facebook.com/k19treinamentos
233
CSS
234
11
<a href = " # link - c " title = " Pgina 3 " > Link 3 </ a >
12
<a href = " # link - d " title = " Link para a pgina 4 " > Link 4 </ a >
13
<a href = " # link - e " title = " Link para a pgina da K19 Treinamentos " > Link 5 </ a >
14
<a href = " # links - f " title = " Link para a pgina 6 " > Link 6 </ a >
15
<a href = " # link " title = " Link para a pgina 7 " > Link 7 </ a >
16
17
< hr >
18
19
< img src = " http :// www . k19 . com . br / figs / main - header - logo . png "
20
title = " Logo da K19 " >
21
< img src = " http :// www . k19 . com . br / figs / k01 - logo - large . png " >
22
< img src = " http :// www . k19 . com . br / figs / k02 - logo - large . png " >
23
</ body >
24 </ html >
Cdigo HTML 3.28: seletores-de-atributos.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao57.zip
58
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
[ title ] {
border : 4 px solid red ;
}
[ title = Pgina 3 ] {
color : green ;
}
[ title ~= K19 ] {
padding : 10 px ;
background : yellow ;
}
[ title ^= Link ] {
margin - right : 30 px ;
}
[ href$ = link ] {
outline : 4 px solid blue ;
}
[ src *= large ] {
border : 4 px solid green ;
}
[ href |= # link ] {
font - size : 30 px ;
}
Cdigo CSS 3.47: seletores-de-atributos.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao58.zip
59
234
www.k19.com.br
235
60
CSS
www.facebook.com/k19treinamentos
235
CSS
236
69
< li > Item 1 </ li >
70
< li > Item 2 </ li >
71
< li > Item 3 </ li >
72
</ ul >
73
74
< ul lang = " en " >
75
< li > Item 1 </ li >
76
< li > Item 2 </ li >
77
< li > Item 3 </ li >
78
</ ul >
79
80
< ol lang = " en " >
81
< li > Item 1 </ li >
82
< li > Item 2 </ li >
83
< li > Item 3 </ li >
84
</ ol >
85
</ body >
86 </ html >
Cdigo HTML 3.29: seletores-de-pseudo-classes.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao60.zip
61
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
: root {
font - size : 30 px ;
}
# lista1 li : first - child {
color : red ;
}
# lista1 li : last - child {
color : blue ;
}
# lista2 li : nth - child (2) {
color : magenta ;
}
# lista2 li : nth - last - child (2) {
color : orange ;
}
p : first - of - type {
color : yellow ;
}
p : last - of - type {
color : aqua ;
}
p : nth - of - type (2) {
color : firebrick ;
}
p : nth - last - of - type (2) {
color : lawngreen ;
}
: only - child {
border : 4 px solid red ;
}
h2 : only - of - type {
color : plum ;
236
www.k19.com.br
237
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
}
: empty {
height : 20 px ;
border : 4 px dashed black ;
}
a : link {
color : springgreen ;
font - weight : bold ;
}
a : visited {
color : # ccc ;
}
a : active {
color : orange ;
}
a : hover {
color : fuchsia ;
}
input : focus {
background - color : red ;
color : white ;
}
: target {
border : 4 px solid magenta ;
color : purple ;
}
: lang ( en ) {
color : red ;
}
: enabled {
outline : 4 px solid red ;
}
: disabled {
outline : 4 px solid blue ;
}
: checked {
outline : 4 px solid green ;
}
: not ( ul ) > li {
padding - left : 100 px ;
}
Cdigo CSS 3.48: seletores-de-pseudo-classes.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao61.zip
62
www.facebook.com/k19treinamentos
237
CSS
238
63
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao63.zip
64
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
p : first - line {
background - color : yellow ;
}
p : first - letter {
font - size : 50 px ;
}
h1 : before {
content : ~ ;
color : red ;
}
h1 : after {
content : ~ ;
color : red ;
}
Cdigo CSS 3.49: seletores-de-pseudo-elementos.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao64.zip
65
Media Queries
238
www.k19.com.br
239
CSS
Media Types
No momento em que definimos as regras CSS dos nossos documentos, tambm podemos determinar para quais tipos de mdia essas regras sero vlidas, ou seja, podemos decidir quais regras
sero aplicadas quando o documento for apresentado em uma tela, no papel ou narrado por um
sintetizador de voz, por exemplo. Podemos informar o tipo de mdia de duas formas: com o atributo
media do elemento link ou com a regra media do CSS.
1 < link rel = " stylesheet " type = " text / css " href = " aquivo . css " media = " screen " >
1 @media screen {
2
body {
3
background - color : black ;
4
}
5
6
...
7 }
Descrio
all
braille
embossed
Impressoras em braille.
handheld
Impressoras convencionais.
projection
Projetores.
screen
speech
Sintetizadores de voz.
tty
tv
Televisores.
Podemos definir as mesmas regras CSS para diversos tipos de mdia. Para isso devemos separar
esses tipos por vrgula.
1 < link rel = " stylesheet " type = " text / css " href = " aquivo . css " media = " screen , print " >
Media Groups
Algumas propriedades no so aplicveis a determinados tipos de mdia. Por exemplo, a propriedade width no pode ser aplicada mdia speech. Por outro lado, algumas propriedades podem
ser aplicadas diversas mdias. Por exemplo, a propriedade position pode ser aplicada s mdias
screen, projection, handheld, print, tty e tv.
www.facebook.com/k19treinamentos
239
CSS
240
Para identificar, mais facilmente, quais propriedades podem ser aplicadas a um determinado
tipo de mdia, a especificao da linguagem CSS divide em grupos os diversos tipos de mdia.
Confira na tabela a seguir a relao entre os tipos de mdia e os grupos de mdia:
Media Type
Media Groups
continuous e paged
grid e bitmap
interactive e static
braille
continuous
tactile
grid
ambos
embossed
paged
tactile
grid
static
handheld
ambos
ambos
ambos
paged
visual
bitmap
static
projection
paged
visual
bitmap
interactive
screen
continuous
visual, audio
bitmap
ambos
speech
continuous
speech
nenhum
ambos
tty
continuous
visual
grid
ambos
tv
ambos
visual, audio
bitmap
ambos
Propriedades especficas
Os tipos de mdia do CSS permitem definir diferentes regras para cada tipo de mdia. Entretanto,
eventualmente necessrio definir regras CSS de acordo com caractersticas mais especficas dos
dispositivo de sada. Para isso, devemos utilizar as chamadas media queries. Veja o seguinte exemplo.
1 @media screen and ( min - width : 500 px ) {
2
...
3 }
No exemplo acima, as regras CSS sero aplicadas caso o tipo de mdia utilizado seja screen e a
rea de renderizao do documento (viewport) tenha, no mnimo, 500 pixels de largura. Como vimos
as media queries tambm podem ser definidas atravs do atributo media do elemento link.
1 < link
2
rel = " stylesheet "
3
type = " text / css "
4
href = " arquivo . css "
5
media = " screen and ( min - width : 500 px ) " / >
No exemplo abaixo, o cdigo dentro da regra media ser aplicado quando a largura do viewport
for pelo menos 500 pixels ou quando a orientao for portrait.
1 @media ( min - width : 500 px ) , ( orientation : portrait ) {
2
...
3 }
Eventualmente, uma media query pode no fazer sentido. Considere o seguinte exemplo.
1 @media speech and ( min - width : 500 px ) {
2
...
3 }
240
www.k19.com.br
241
CSS
No exemplo acima, a media query contraditria, pois o tipo de mdia speech no compatvel
com a propriedade min-width. Dessa forma, o cdigo CSS definido dentro da regra media nunca
ser processado.
Veja a seguir algumas propriedades que podemos utilizar nas media queries
Propriedade
Descrio
Valor
Media Type
min e max?
width
Medidas
visual e tactile
sim
Medidas
visual e tactile
sim
Medidas
visual e tactile
sim
Medidas
visual e tactile
sim
portrait ou lands-
bitmap
no
cape
inteiro/inteiro
bitmap
sim
inteiro
visual
sim
dpi
bitmap
sim
height
device-height
orientation
(paisagem).
aspect-ratio
color-index
resolution
Exerccios de Fixao
66
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao66.zip
67
1 @media all {
2
p {
3
font - size : 50 px ;
www.facebook.com/k19treinamentos
241
CSS
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
242
}
}
@media screen {
p {
color : red ;
}
}
@media print {
p {
color : blue ;
}
}
@media handheld , screen and ( max - device - width :480 px ) {
p {
color : green ;
}
}
Cdigo CSS 3.55: media-types.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao67.zip
68
Sprites
Normalmente, uma pgina web formada por diversas imagens pequenas ou mdias. Se essas
imagens forem adicionadas com o elemento img, o navegador realizar uma requisio HTTP para
cada imagem. Consequentemente, o tempo de carregamento da pgina ser alto devido a quantidade de requisies e ao overhead dos pacotes HTTP.
Analogia
M
K
P B 0O
K X
E 8
T
80
E
1
B
Y
K
19
Uma tcnica amplamente utilizada para melhorar o tempo de carregamento das pginas web
denominada sprite. Essa tcnica consiste em agrupar todas as imagens pequenas e mdias em uma
nica imagem grande e depois recort-la com as propriedades CSS.
242
www.k19.com.br
243
CSS
cursos-icones.png
background-image: url(cursos-icones.png);
background-position: 0px 0px;
background-image: url(cursos-icones.png);
background-position: -100px -100px;
Exerccios de Fixao
69
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao69.zip
70
1 li : before {
2
content : " " ;
3
display : inline - block ;
4
width : 44 px ;
5
height : 44 px ;
6
vertical - align : middle ;
7
background - image : url ( " http :// www . k19 . com . br / figs / k19 - logos - sprite . png " ) ;
8
background - repeat : no - repeat ;
www.facebook.com/k19treinamentos
243
CSS
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
244
}
li . k12 : before {
background - position : -44 px 0 px ;
}
li . k21 : before {
background - position : -88 px 0 px ;
}
li . k22 : before {
background - position : 0 px -44 px ;
}
li . k23 : before {
background - position : -44 px -44 px ;
}
li . k20 : before {
background - position : -88 px -44 px ;
}
Cdigo CSS 3.56: media-types.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao70.zip
71
Mais Sobre
At o momento do fechamento da verso atual desta apostila, o navegador Firefox
s suporta as funes de gradiente nas propriedades background ou background-
image.
Gradiente linear
Para definir um gradiente linear, necessrio utilizar a funo linear-gradient.
244
www.k19.com.br
245
CSS
Definio da
linha do gradiente
Lista de
paradas de cores
<angulo>
<parada-de-cor>
<parada-de-cor> [, <parada-de-cor>]+ )
<lado-ou-canto>
top left
340
-20
+
Repare que quando a primeira parada de cor comea em uma posio diferente de 0%, o gradiente preenchido com a cor da primeira parada de cor do 0% at essa posio.
245
CSS
246
Gradiente radial
Para definir um gradiente radial, devemos utilizar a funo radial-gradient.
Definio da forma, dimenso e posico do gradiente
radial-gradient( [
[circle || <tamanho>]
[at <posio>]?, |
[ellipse || [<tamanho> | <porcentagem>]{2}] [at <posio>]?, |
[[circle | ellipse] || <alcance> ]
[at <posio>]?, |
at <posio>,
]?
<parada-de-cor>, [, <parada-de-cor>]+)
246
www.k19.com.br
247
CSS
<tamanho> | <porcentagem>
<parada-de-cor>
<posio>
<alcance>
Box do gradiente
Linha do gradiente
www.facebook.com/k19treinamentos
247
CSS
248
1 div {
2
color : red ;
3 }
No exemplo acima, a propriedade color foi definida apenas para o elemento div. No elemento p,
essa propriedade assumir o valor padro que inherit, ou seja, ser herdado automaticamente do
elemento pai. Como consequncia a cor do texto do pargrafo ser vermelha.
Agora, considere este outro exemplo:
1 < div >
2
<p > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ p >
3 </ div >
1 div {
2
border : 1 px solid red ;
3 }
O elemento div ter borda de 1 pixel com cor vermelha. Diferentemente do exemplo anterior, o
pargrafo no herdar o valor para a propriedade border, pois ela no possui o valor inherit como
padro. Se quisssemos que o elemento p herdasse o valor da propriedade border, deveramos definir as seguintes regras CSS:
1
2
3
4
5
6
7
div {
border : 1 px solid red ;
}
p {
border : inherit ;
}
248
www.k19.com.br
249
CSS
content-box
Comportamento padro. As propriedades width e height definem as dimenses da rea do contedo do elemento.
padding-box
As propriedades width e height definem as dimenses da rea do contedo do elemento em
conjunto com as margens internas.
border-box
As propriedades width e height definem as dimenses da rea do contedo do elemento em
conjunto com as margens internas e bordas.
inherit
Assume o valor da mesma propriedade no elemento HTML pai.
Veja a figura abaixo para compreender melhor cada um dos valores:
box-sizing: content-box
box-sizing: padding-box
box-sizing: border-box
width
width
width
padding
padding
padding
border
border
border
249
CSS
250
250
www.k19.com.br
251
CSS
Layouts Flexveis
A ideia por trs dos layouts flexveis fazer com que os elementos de uma pgina sejam capazes
de terem as suas dimenses adaptadas dinamicamente. Isso bem interessante quando queremos
que o layout da pgina se adapte a diferentes tamanhos de tela ou alguns elementos sejam redimensionados aps uma interao do usurio, por exemplo.
Quando criamos layouts estticos, em geral, trabalhamos com unidades de medida estticas
como px, pt, in, cm e etc. Ao criarmos layouts flexveis passamos a trabalhar muito mais com as
unidades relativas como %, em, ex e etc. Fazemos isso para evitar que ocorram deformaes ou
overflow na apresentao do contedo.
Para facilitar o trabalho de quem desenhar o layout de uma pgina e tambm de quem produzir o cdigo HTML e CSS, uma tcnica muito comum a de tentar visualizar a tela como um
sistema de grades. Nesse sistema, cada grade deve ter as suas dimenses definidas com unidades de
medida relativas. Dessa forma, se a tela do usurio for redimensionada, todo o sistema de grade ser
reajustado.
Layout esttico
Layout flexvel
Media Queries
Como o objetivo do design responsivo apresentar o contedo de uma pgina de maneiras diferentes em dispositivos com tamanhos de telas diferentes, em algum momento sentiremos a necessidade de criar regras CSS para cada tamanho de tela ou para cada conjunto de tamanho de telas. Em
uma situao como essa, as media queries se encaixam perfeitamente e devemos utiliz-las.
Breakpoints
O ponto principal da relao das media queries com o design responsivo a definio daquilo
que chamamos de breakpoints (pontos de quebra). Muitos autores costumam definir esses pontos
www.facebook.com/k19treinamentos
251
CSS
252
em torno dos tamanhos dos viewports mais comuns como 320px, 480px, 768px, 1024px e assim por
diante. Essa uma estratgia normalmente chamada de device-driven breakpoints, device-based
breakpoints ou pontos de quebra orientados dispositivos. Evite essa tcnica, pois, como o prprio
nome diz, ela faz com que as regras CSS sejam aplicadas quando uma pgina for aberta em dispositivos com tamanhos de tela esperados, ou seja, a pgina poder estar despreparada quando for aberta
por um dispositivo com tela de 400px, por exemplo.
Uma estratgia muito mais interessante a que chamamos de content-driven breakpoints, contentbased breakpoints ou pontos de quebra orientados ao contedo. Nessa estratgia definimos os pontos de quebra observando se o contedo da pgina se acomoda corretamente ao tamanho do viewport. Uma tcnica muito eficiente comear do menor para o maior tamanho de viewport. Em geral,
o menor tamanho refere-se aos dispositivos mobile e, por isso, a tcnica recebe o nome de mobile
first.
Aplicar a estratgia do content-drive breakpoints juntamente com a tcnica mobile first relativamente simples: redimensione a janela do navegador para que o viewport fique com o menor
tamanho esperado (mobile). Esse ser o primeiro breakpoint. Aplique as regras CSS na pgina e em
seguida redimensione a janela do navegador at que o contedo no seja apresentado corretamente
ou a pgina tenha o layout quebrado. Quando isso ocorrer significa que encontramos o prximo
breakpoint. Nesse breakpoint, aplique as regras CSS para que a pgina volte a ser apresentada corretamente. Repita esse processo at considerar que tenha definido todos os breakpoints necessrios.
Mdias Flexveis
Para criarmos uma pgina que seja confortvel para a leitura, devemos ajustar o posicionamento
e a dimenso dos elementos conforme vimos anteriormente. As imagens, players de vdeo e udio
no so excees. Entretanto, quando trabalhamos com certos tipos de mdias devemos ter alguns
cuidados especiais.
Suponha uma imagem de 320px de largura que gostaramos de exibir em uma pgina de maneira
que ela se adapte largura da tela. Conseguiramos fazer isso utilizando a propriedade width: 100%,
por exemplo. Veja abaixo como ficaria essa pgina exibida em um smartphone e em um desktop.
Smartphone
Desktop
Na imagem acima podemos perceber que a qualidade da imagem diminuiu ao estic-la. Para
evitar ou amenizar esse tipo de problema poderamos criar diversas verses da imagem, uma para
252
www.k19.com.br
253
CSS
cada breakpoint. Poderamos tambm obter uma imagem original de tamanho maior, pois, em geral,
diminuir uma imagem perde menos qualidade do que esticar. Ou ainda, dependendo da imagem,
poderamos utilizar uma verso vetorial da mesma. Como podemos observar, existem diversas tcnicas para resolver esse tipo de problema e, caso tenha interesse, procure por Icon Fonts, formato de
imagem SVG e Compressive Images. Esses so termos muito utilizados por tcnicas de otimizao
de imagens na web.
No caso dos players de vdeo e udio recomendamos a leitura do artigo neste endereo: http:
//alistapart.com/article/creating-intrinsic-ratios-for-video
Exerccios Complementares
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar1.zip
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar2.zip
www.facebook.com/k19treinamentos
253
CSS
3
254
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar4.zip
1 body {
2
background - image :
3
url ( " http :// www . k19 . com . br / figs / planeta . png " ) ,
4
url ( " http :// www . k19 . com . br / figs / fundo . jpg " ) ;
5 }
Cdigo CSS 3.61: background-image.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar5.zip
254
www.k19.com.br
255
CSS
10
< div id = " div2 " > </ div >
11
< div id = " div3 " > </ div >
12
< div id = " div4 " > </ div >
13
</ body >
14 </ html >
Cdigo HTML 3.40: background-repeat.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar7.zip
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
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar8.zip
10
www.facebook.com/k19treinamentos
255
CSS
256
10
</ body >
11 </ html >
Cdigo HTML 3.41: background-attachment.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar10.zip
11
1 body {
2
height : 2000 px ;
3
background - image : url ( " http :// www . k19 . com . br / figs / fundo . jpg " ) ;
4 }
Cdigo CSS 3.63: background-attachment.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar11.zip
12
13
1 body {
2
height : 2000 px ;
3
background - image : url ( " http :// www . k19 . com . br / figs / fundo . jpg " ) ;
4
background - attachment : fixed ;
5 }
Cdigo CSS 3.64: background-attachment.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar13.zip
14
15
256
257
CSS
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar15.zip
16
1 body {
2
background - image : url ( " http :// www . k19 . com . br / figs / planeta - small . png " ) ;
3
background - repeat : no - repeat ;
4
background - position : center top ;
5 }
Cdigo CSS 3.65: background-position.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar16.zip
17
18
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar18.zip
19
257
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
258
div {
width : 400 px ;
height : 50 px ;
margin : 10 px ;
padding : 50 px ;
border : 10 px dotted black ;
background - color : yellow ;
}
# div1 {
background - clip : border - box ;
}
# div2 {
background - clip : padding - box ;
}
# div3 {
background - clip : content - box ;
}
Cdigo CSS 3.66: background-clip.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar19.zip
20
21
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar21.zip
22
1 div {
2
width : 400 px ;
3
height : 100 px ;
4
margin : 10 px ;
5
padding : 25 px ;
258
www.k19.com.br
259
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
CSS
border : 10 px dotted black ;
background - repeat : no - repeat ;
background - image : url ( " http :// www . k19 . com . br / figs / planeta - small . png " ) ;
}
# div1 {
background - origin : border - box ;
}
# div2 {
background - origin : padding - box ;
}
# div3 {
background - origin : content - box ;
}
Cdigo CSS 3.67: background-origin.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar22.zip
23
24
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar24.zip
25
1 div {
2
width : 400 px ;
3
height : 100 px ;
4
margin : 10 px ;
5
padding : 25 px ;
6
border : 10 px dotted black ;
7
background - repeat : no - repeat ;
8
background - image : url ( " http :// www . k19 . com . br / figs / planeta - small . png " ) ;
9 }
10
www.facebook.com/k19treinamentos
259
CSS
11
12
13
14
15
16
17
18
19
20
21
260
# div1 {
background - size : 50 px auto ;
}
# div2 {
background - size : cover ;
}
# div3 {
background - size : contain ;
}
Cdigo CSS 3.68: background-size.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar25.zip
26
http://localhost/css/public_html/background-size.html.
27
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar27.zip
28
1
2
3
4
5
6
7
8
9
10
11
# p1 {
color : red ;
}
# p2 {
color : #00 ff00 ;
}
# p3 {
color : rgb (0 , 0 , 255) ;
}
Cdigo CSS 3.69: color.css
260
www.k19.com.br
261
CSS
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar28.zip
29
30
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar30.zip
31
1 p {
2
border : 1 px solid black ;
3
width : 400 px ;
4 }
www.facebook.com/k19treinamentos
261
CSS
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
262
# p1 {
text - align : left ;
}
# p2 {
text - align : center ;
}
# p3 {
text - align : right ;
}
# p4 {
text - align : justify ;
}
Cdigo CSS 3.70: text-align.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar31.zip
32
33
262
www.k19.com.br
263
CSS
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar33.zip
34
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar34.zip
35
36
www.facebook.com/k19treinamentos
263
CSS
264
28
leo nunc , in ornare turpis aliquam quis .
29
</ p >
30
</ body >
31 </ html >
Cdigo HTML 3.49: text-transform.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar36.zip
37
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
p {
width : 400 px ;
}
# p1 {
text - transform : capitalize ;
}
# p2 {
text - transform : uppercase ;
}
# p3 {
text - transform : lowercase ;
}
Cdigo CSS 3.72: text-transform.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar37.zip
38
39
264
www.k19.com.br
265
CSS
21
leo nunc , in ornare turpis aliquam quis .
22
</ p >
23
</ body >
24 </ html >
Cdigo HTML 3.50: text-indent.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar39.zip
40
1
2
3
4
5
6
7
8
9
10
11
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar40.zip
41
42
www.facebook.com/k19treinamentos
265
CSS
266
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar42.zip
43
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# p1 {
letter - spacing : 2 px ;
}
# p2 {
letter - spacing : -2 px ;
}
# p3 {
letter - spacing : 4 px ;
}
# p4 {
letter - spacing : 6 px ;
}
Cdigo CSS 3.74: letter-spacing.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar43.zip
44
45
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar45.zip
266
www.k19.com.br
267
46
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
CSS
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar46.zip
47
48
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar48.zip
49
1 p {
2
width : 100 px ;
3
border : 1 px solid black ;
4 }
5
www.facebook.com/k19treinamentos
267
CSS
268
6 # p1 {
7
word - wrap : break - word ;
8 }
Cdigo CSS 3.76: word-wrap.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar49.zip
50
http://localhost/css/public_html/word-wrap.html.
51
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar51.zip
52
1
2
3
4
5
6
7
8
9
10
11
12
p {
width : 400 px ;
border : 1 px solid black ;
}
# p1 {
line - height : 20 px ;
}
# p2 {
line - height : 40 px ;
}
268
www.k19.com.br
269
CSS
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar52.zip
53
54
www.facebook.com/k19treinamentos
269
CSS
270
49
50
Sed
51
dui nulla , cursus et lacinia eu , vulputate ac dolor .
52
Quisque faucibus congue congue .
53
</ p >
54
</ body >
55 </ html >
Cdigo HTML 3.55: white-space.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar54.zip
55
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
p {
width : 400 px ;
border : 1 px solid black ;
}
# p1 {
white - space : nowrap ;
}
# p2 {
white - space : pre ;
}
# p3 {
white - space : pre - line ;
}
# p4 {
white - space : pre - wrap ;
}
Cdigo CSS 3.78: white-space.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar55.zip
56
57
270
www.k19.com.br
271
CSS
13
Lorem ipsum
14
</ p >
15
<p id = " p3 " >
16
Lorem ipsum
17
</ p >
18
<p id = " p4 " >
19
Lorem ipsum
20
</ p >
21
<p id = " p5 " >
22
Lorem ipsum
23
</ p >
24
</ body >
25 </ html >
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar57.zip
58
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar58.zip
59
60
www.facebook.com/k19treinamentos
271
CSS
272
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > K19 - font - family </ title >
6
< link rel = " stylesheet " type = " text / css " href = " font - family . css " >
7
</ head >
8
< body >
9
<p id = " p1 " >
10
Lorem ipsum dolor sit amet , consectetur adipiscing elit .
11
</ p >
12
<p id = " p2 " >
13
Lorem ipsum dolor sit amet , consectetur adipiscing elit .
14
</ p >
15
<p id = " p3 " >
16
Lorem ipsum dolor sit amet , consectetur adipiscing elit .
17
</ p >
18
<p id = " p4 " >
19
Lorem ipsum dolor sit amet , consectetur adipiscing elit .
20
</ p >
21
<p id = " p5 " >
22
Lorem ipsum dolor sit amet , consectetur adipiscing elit .
23
</ p >
24
</ body >
25 </ html >
Cdigo HTML 3.57: font-family.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar60.zip
61
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
p {
font - size : xx - large ;
}
# p1 {
font - family : " Arial " ;
}
# p2 {
font - family : " Courier " ;
}
# p3 {
font - family : " Verdana " ;
}
# p4 {
font - family : " serif " ;
}
# p5 {
font - family : " cursive " ;
}
Cdigo CSS 3.80: font-family.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar61.zip
62
www.k19.com.br
273
CSS
http://localhost/~<USUARIO>/css/public_html/font-family.html.
63
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar63.zip
64
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar64.zip
65
273
CSS
274
http://localhost/css/public_html/font-size.html.
66
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar66.zip
67
1
2
3
4
5
6
7
8
9
10
11
p {
font - size : xx - large ;
}
# p1 {
font - style : italic ;
}
# p2 {
font - style : oblique ;
}
Cdigo CSS 3.82: font-style.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar67.zip
68
274
www.k19.com.br
275
69
CSS
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar69.zip
70
1
2
3
4
5
6
7
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar70.zip
71
72
www.facebook.com/k19treinamentos
275
CSS
276
14
</ p >
15
<p id = " p3 " >
16
Lorem ipsum dolor sit amet , consectetur adipiscing elit .
17
</ p >
18
</ body >
19 </ html >
Cdigo HTML 3.61: font-weight.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar72.zip
73
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
p {
font - size : xx - large ;
}
# p1 {
font - weight : 400;
}
# p2 {
font - weight : 700;
}
# p3 {
font - weight : bold ;
}
Cdigo CSS 3.84: font-weight.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar73.zip
74
75
276
www.k19.com.br
277
CSS
19
Lorem ipsum dolor sit amet , consectetur adipiscing elit .
20
</ p >
21
<p id = " p3 " >
22
Lorem ipsum dolor sit amet , consectetur adipiscing elit .
23
</ p >
24
</ body >
25 </ html >
Cdigo HTML 3.62: font-face.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar75.zip
76
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar76.zip
77
78
www.facebook.com/k19treinamentos
277
CSS
278
18
</ ul >
19
< ul id = " ul3 " >
20
< li > K01 - Lgica de Programao </ li >
21
< li > K02 - Desenvolvimento Web com HTML ,
22
< li > K03 - Modelo Relacional e SQL </ li >
23
</ ul >
24
< ol id = " ol1 " >
25
< li > K01 - Lgica de Programao </ li >
26
< li > K02 - Desenvolvimento Web com HTML ,
27
< li > K03 - Modelo Relacional e SQL </ li >
28
</ ol >
29
< ol id = " ol2 " >
30
< li > K01 - Lgica de Programao </ li >
31
< li > K02 - Desenvolvimento Web com HTML ,
32
< li > K03 - Modelo Relacional e SQL </ li >
33
</ ol >
34
< ol id = " ol3 " >
35
< li > K01 - Lgica de Programao </ li >
36
< li > K02 - Desenvolvimento Web com HTML ,
37
< li > K03 - Modelo Relacional e SQL </ li >
38
</ ol >
39
</ body >
40 </ html >
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar78.zip
79
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# ul1 {
list - style - type : disc ;
}
# ul2 {
list - style - type : circle ;
}
# ul3 {
list - style - type : square ;
}
# ol1 {
list - style - type : decimal ;
}
# ol2 {
list - style - type : lower - latin ;
}
# ol3 {
list - style - type : georgian ;
}
Cdigo CSS 3.86: list-style-type.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar79.zip
80
www.k19.com.br
279
CSS
http://localhost/~<USUARIO>/css/public_html/list-style-type.html.
81
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar81.zip
82
1
2
3
4
5
6
7
8
9
10
11
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar82.zip
83
www.facebook.com/k19treinamentos
279
CSS
280
84
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar84.zip
85
1
2
3
4
5
6
7
li {
border : 1 px solid black ;
}
# ul1 {
list - style - position : inside ;
}
Cdigo CSS 3.88: list-style-position.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar85.zip
86
87
280
www.k19.com.br
281
CSS
10
< div id = " div2 " > </ div >
11
< div id = " div3 " > </ div >
12
< div id = " div4 " > </ div >
13
</ body >
14 </ html >
Cdigo HTML 3.66: border-style.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar87.zip
88
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar88.zip
89
90
www.facebook.com/k19treinamentos
281
CSS
282
13
</ body >
14 </ html >
Cdigo HTML 3.67: border-width.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar90.zip
91
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
div {
width : 400 px ;
height : 200 px ;
margin : 10 px ;
border - style : solid ;
}
# div1 {
border - width : thin ;
}
# div2 {
border - width : thick ;
}
# div3 {
border - width : 2 px ;
}
# div4 {
border - width : 10 px ;
}
Cdigo CSS 3.90: border-width.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar91.zip
92
93
282
www.k19.com.br
283
CSS
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar93.zip
94
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar94.zip
95
96
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar96.zip
97
1 div {
2
width : 400 px ;
3
height : 200 px ;
4
www.facebook.com/k19treinamentos
283
CSS
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 }
284
border - top - style : dashed ;
border - top - color : red ;
border - top - width : 2 px ;
border - right - style : dotted ;
border - right - color : #00 ff00 ;
border - right - width : 8 px ;
border - bottom - style : double ;
border - bottom - color : rgb (0 , 0 , 255) ;
border - bottom - width : 14 px ;
border - left - style : solid ;
border - left - color : black ;
border - left - width : 20 px ;
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar97.zip
98
99
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar99.zip
100
1 div {
2
width : 400 px ;
3
height : 100 px ;
4
margin : 10 px ;
5
border : 2 px solid black ;
6 }
7
8 # div1 {
9
border - radius : 20 px ;
284
www.k19.com.br
285
10
11
12
13
14
15
16
17
18
19
20
21
22
CSS
}
# div2 {
border - radius : 20 px 60 px ;
}
# div3 {
border - radius : 20 px 60 px 100 px ;
}
# div4 {
border - radius : 20 px 60 px 100 px 140 px ;
}
Cdigo CSS 3.93: border-radius.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar100.zip
101
102
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar102.zip
www.facebook.com/k19treinamentos
285
CSS
103
1
2
3
4
5
6
7
8
9
10
11
12
286
table {
border : 2 px solid black ;
margin : 10 px ;
}
td {
border : 2 px solid black ;
}
# tabela1 {
border - collapse : collapse ;
}
Cdigo CSS 3.94: border-collapse.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar103.zip
104
105
286
www.k19.com.br
287
CSS
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar105.zip
106
1
2
3
4
5
6
7
8
9
10
11
12
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar106.zip
107
108
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar108.zip
109
1 div {
2
width : 400 px ;
3
height : 100 px ;
4
margin : 10 px ;
5 }
6
7 # div1 {
www.facebook.com/k19treinamentos
287
CSS
8
9
10
11
12
13
14
15
16
17
288
outline - style : dashed ;
}
# div2 {
outline - style : dotted ;
}
# div3 {
outline - style : solid ;
}
Cdigo CSS 3.96: outline-style.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar109.zip
110
http://localhost/css/public_html/outline-style.html.
111
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar111.zip
112
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div {
width : 400 px ;
height : 100 px ;
margin : 10 px ;
outline - style : solid ;
}
# div1 {
outline - color : red ;
}
# div2 {
outline - color : #00 ff00 ;
}
# div3 {
288
www.k19.com.br
289
CSS
17
outline - color : rgb (0 , 0 , 255) ;
18 }
Cdigo CSS 3.97: outline-color.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar112.zip
113
114
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar114.zip
115
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar115.zip
www.facebook.com/k19treinamentos
289
CSS
290
116
http://localhost/css/public_html/outline-width.html.
117
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar117.zip
118
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div {
width : 400 px ;
height : 50 px ;
margin : 50 px ;
outline : 5 px solid red ;
border : 5 px solid black ;
}
# div1 {
outline - offset : 20 px ;
}
# div2 {
outline - offset : -20 px ;
}
Cdigo CSS 3.99: outline-offset.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar118.zip
119
290
www.k19.com.br
291
120
CSS
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar120.zip
121
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar121.zip
122
123
www.facebook.com/k19treinamentos
291
CSS
292
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar123.zip
124
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
div {
display : inline - block ;
border : 1 px solid black ;
width : 100 px ;
height : 100 px ;
}
# div1 {
margin - top : 50 px ;
margin - right : 50 px ;
}
# div2 {
margin - bottom : 50 px ;
}
# div3 {
margin - left : 50 px ;
}
# div4 {
margin - left : 50 px ;
margin - bottom : 50 px ;
}
Cdigo CSS 3.101: margens-externas.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar124.zip
125
126
292
www.k19.com.br
293
CSS
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar126.zip
127
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
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar127.zip
128
129
293
CSS
294
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar129.zip
130
1
2
3
4
5
6
7
8
9
10
11
12
13
p {
border : 1 px solid black ;
max - height : 200 px ;
max - width : 400 px ;
}
# p1 {
width : 200 px ;
}
# p2 {
height : 130 px ;
}
Cdigo CSS 3.103: conteudo-dimensao.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar130.zip
131
www.k19.com.br
295
CSS
http://localhost/~<USUARIO>/css/public_html/conteudo-dimensao.html.
Resumo do Captulo
De acordo com o Box Model, cada box possui contedo, margens internas, bordas e margens
externas.
Por padro, os boxes dos block-level elements ocupam todo o espao horizontal do elemento
pai e provocam quebras de linha.
Por padro, os boxes dos inline-level elements ocupam apenas o espao necessrio e no
provocam quebras de linha.
Uma regra CSS composta por seletor e corpo. No corpo, so definidas as propriedades CSS.
Os seletores definem quais elementos HTML sero afetados pelas regras CSS.
10
11
As regras CSS podem ser aplicadas aos documentos HTML de trs formas diferentes: inline
style, internal style sheet e external style sheet.
12
13
Na linguagem CSS, toda cor est associada a um cdigo numrico expresso em hexadecimal.
Algumas cores possuem nome.
www.facebook.com/k19treinamentos
295
CSS
296
14
Podemos escolher uma cor atravs do cdigo dela ou atravs das funes rgb(), rgba(), hsl() e
hsla(). As cores que possuem nome podem ser escolhidas atravs do seu nome.
15
As unidades absolutas da linguagem CSS so: cm, mm, in, pt, pc e px.
16
As unidades relativas da linguagem CSS so: em, ex, ch, rem, vw, vh, vmin e vmax.
17
As principais propriedades de background so: background-color, background-image, backgroundrepeat, background-attachment, background-position, background-clip, background-origin, backgroundsize e background.
18
19
As principais propriedades de fonte so: font-family, font-size, font-style, font-variant, fontweight, font e @font-face.
20
21
22
23
24
25
26
27
296
www.k19.com.br
297
CSS
28
29
30
31
32
33
34
35
36
37
Quando ocorre conflito entre duas ou mais regras CSS, devemos calcular a prioridade dos
seletores dessas regras para saber qual delas ser aplicada.
38
Com as media queries podemos definir formataes especficas para os diversos tipos de dispositivos que desejamos suportar.
39
Prova
Considere a formatao padro dos navegadores. O que podemos dizer sobre um block-level
element?
1
297
CSS
298
quebras de linha.
c) Ocupa todo o espao vertical e provoca quebras de linha.
d) Ocupa horizontalmente somente o espao necessrio para o seu contedo e provocam quebras de linha.
e) Ocupa todo o espao horizontal e provoca quebras de linha.
2
Considere a formatao padro dos navegadores. O que podemos dizer sobre um inline-level
element?
298
299
CSS
a) red
b) #00ff00
c) preto
d) rgba(0, 100, 30, 0.1)
e) hsl(100, 20%, 10%)
Qual das propriedades abaixo pode ser utilizada para definir uma imagem de fundo de um
elemento?
6
a) background-attachment
b) background
c) bg-color
d) background-size
e) bg-image
Para definirmos a cor da fonte de um texto, qual propriedade CSS devemos utilizar?
a) color
b) font-color
c) text-color
d) foreground-color
e) colour
299
CSS
1
2
3
4
5
6
300
ipsum dolor sit amet , consectetur adipiscing elit .
a) Todas as sequncias de espaos sero tratadas como um nico espao e as quebras de linha
sero respeitadas.
b) Todas as sequncias de espaos sero respeitadas e as quebras de linha sero ignoradas.
c) Todas as sequncias de espaos sero respeitadas e as quebras de linha sero tratadas como
um espao.
d) Todas as sequncias de espaos sero tratadas como um nico espao e as quebras de linha
sero ignoradas.
e) Todas as sequncias de espaos sero tratadas como um nico espao e as quebras de linha
sero tratadas como um espao.
9 Para alterar o comportamento padro com relao ao tratamento dos espaos e quebras de linha,
devemos utilizar qual propriedade CSS?
a) white-space
b) word-spacing
c) word-wrap
d) line-height
e) white-spacing
Podemos alterar a fonte de um texto atravs da propriedade CSS font-family. Quais valores
podem ser atribudos a essa propriedade?
10
300
www.k19.com.br
301
11
1
2
3
4
CSS
a) 120px de largura.
b) 120px de altura.
c) 130px de largura.
d) 140px de altura.
e) 160px de largura.
Qual a diferena entre uma borda produzida pela propriedade outline e outra produzida pela
propriedade border?
12
a) Nenhuma diferena.
b) A borda produzida pela propriedade border mais grossa.
c) A borda produzida pela propriedade outline no pode ter sua cor alterada.
d) A borda produzida pela propriedade outline no afeta as dimenses do box do elemento.
e) A borda produzida pela propriedade border no funciona em todos os navegadores.
Podemos utilizar a propriedade display com valor none ou a propriedade visibility com valor
hidden para fazer com que um elemento no aparea em uma pgina HTML. Qual a diferena entre
as duas abordagens?
13
a) Nenhuma diferena.
b) O espao do box de um elemento com propriedade display igual a none permanece inalterado.
c) O espao do box de um elemento com propriedade visibility igual a hidden deixa de existir.
d) O espao do box de um elemento com propriedade display igual a none deixa de existir.
e) Se o valor none for atribudo a propriedade display, ela no poder mudar mais de valor.
14
301
CSS
302
1 position : absolute ;
2 top : 0 px ;
3 left : 0 px ;
15
16
1 < div id = " div1 " class = " class1 " >
2
<p id = " p1 " > Lorem ipsum dolor sit amet . </ p >
3
<p id = " p2 " class = " class1 " > Lorem ipsum dolor sit amet . </ p >
4
< div id = " div2 " >
5
Lorem ipsum dolor sit amet .
6
<p id = " p3 " class = " class1 " > Lorem ipsum dolor sit amet . </ p >
7
< div id = " div3 " >
8
Lorem ipsum dolor sit amet .
9
<p id = " p4 " class = " class1 " > Lorem ipsum dolor sit amet . </ p >
10
</ div >
302
www.k19.com.br
303
CSS
11
</ div >
12
< div id = " div4 " >
13
Lorem ipsum dolor sit amet .
14
<p id = " p5 " class = " class1 " > Lorem ipsum dolor sit amet . </ p >
15
< div id = " div5 " >
16
Lorem ipsum dolor sit amet .
17
<p id = " p6 " class = " class1 " > Lorem ipsum dolor sit amet . </ p >
18
</ div >
19
</ div >
20
<p id = " p7 " class = " class1 " > Lorem ipsum dolor sit amet . </ p >
21
<a href = " # " class = " class1 " > Lorem ipsum dolor sit amet . </ a >
22
< div id = " div6 " > Lorem ipsum dolor sit amet . </ div >
23 </ div >
17
O que podemos dizer sobre as regras CSS definidas dentro da media query acima?
a) Sero aplicadas quando o viewport tiver 480px e a altura do viewport for maior que a sua largura.
b) Sero aplicadas apenas quando a largura do viewport for maior que a sua altura.
c) Sero aplicadas apenas quando o viewport tiver 480px de largura.
d) Sero aplicadas quando o viewport tiver 480px ou a altura do viewport for maior que a sua
largura.
e) Sero aplicadas apenas quando o viewport tiver 480px de altura. div.
Minha Pontuao
Pontuao Mnima:
www.facebook.com/k19treinamentos
13
Pontuao Mxima:
17
303
CSS
304
304
www.k19.com.br
CAPTULO
J AVA S CRIPT
Nos captulos anteriores, vimos que as linguagens HTML e a CSS so fundamentais para a criao de pginas web. O foco do HTML o contedo enquanto o foco do CSS a formatao dessas
pginas.
As linguagens HTML e CSS no so linguagens de programao. Para resolver determinados
problemas, necessrio utilizar uma linguagem de programao. Por isso, veremos nesse captulo, a
linguagem de programao JavaScript.
Com a linguagem JavaScript podemos construir pginas extremamente dinmicas e interativas.
O foco do JavaScript implementar o comportamento ou a inteligncia das pginas web.
JavaScript interno
O cdigo JavaScript pode ser definido dentro de um documento HTML no corpo do elemento
script.
1 < script >
2
alert ( " K19 " ) ;
3 </ script >
JavaScript externo
O cdigo JavaScript pode ser definido em arquivos separados e depois associados aos documentos HTML atravs do elemento script.
1 alert ( " K19 " ) ;
Cdigo Javascript 4.1: script.js
1 < script src = " script . js " > </ script >
Nessa outra abordagem, podemos reutilizar o mesmo cdigo JavaScript em vrios documentos
HTML.
Carregamento
www.facebook.com/k19treinamentos
305
J AVA S CRIPT
306
Como vimos, o elemento script permite associar cdigo JavaScript aos documentos HTML. Esse
elemento pode ser adicionado dentro do corpo dos elementos head e body. A localizao do elemento script afeta o momento no qual o cdigo JavaScript ser carregado pelos navegadores.
No exemplo a seguir, o elemento script foi colocado dentro do corpo do head. Dessa forma, o
cdigo JavaScript ser carregado antes do body ser processado. Consequentemente, a pgina s ser
exibida depois do carregamento do JavaScript.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Desenvolvimento Web </ title >
6
< script src = " script . js " > </ script >
7
</ head >
8
< body >
9
...
10
</ body >
11 </ html >
Normalmente, a segunda abordagem mais recomendada pois as pginas web so exibidas mais
rapidamente aos usurios. Contudo, eventualmente, o cdigo JavaScript deve ser utilizado antes do
processamento dos elementos do body. Nesses casos, necessrio utilizar a primeira abordagem.
Chrome DevTools
Os navegadores oferecem alguns recursos para testar ou depurar cdigo JavaScript. Nas imagens
abaixo, mostramos a utilizao do painel Console do Chrome DevTools.
306
www.k19.com.br
307
J AVA S CRIPT
www.facebook.com/k19treinamentos
307
J AVA S CRIPT
308
Exerccios de Fixao
Importante
No Windows, utilizando o IIS (Internet Information Services) como Web Server, voc
deve salvar o projeto javascript em C:\inetpub\wwwroot. Lembre-se que necessrio instalar o IIS conforme vimos anteriormente.
308
www.k19.com.br
309
J AVA S CRIPT
Importante
No Ubuntu, utilizando o Apache HTTP Server como Web Server, voc deve salvar o projeto javascript em /home/<USUARIO>/public_html. Lembre-se que necessrio
instalar e configurar o Apache HTTP Server como vimos anteriormente.
www.facebook.com/k19treinamentos
309
J AVA S CRIPT
310
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao1.zip
310
311
J AVA S CRIPT
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao2.zip
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao4.zip
www.facebook.com/k19treinamentos
311
J AVA S CRIPT
312
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao6.zip
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao7.zip
http://localhost/javascript/public_html/javascript.html.
Variveis
Assim como qualquer linguagem de programao, JavaScript permite a criao de variveis atravs da palavra chave var. Toda varivel deve ter um nome (identificador).
1
2
3
4
var
var
var
var
idadeDoJonas = 30;
precoDoProduto = 28.75;
nomeDoInstrutor = " Marcelo Martins " ;
acessoLiberado = true ;
Operadores
312
www.k19.com.br
313
J AVA S CRIPT
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:
Atribuio:
Relacional:
==
Lgico:
&&
+=
-=
*=
/=
!=
<
<=
>
%=
++
--
>=
||
Aritmticos
Os operadores aritmticos funcionam de forma muito semelhante aos operadores da matemtica. Os operadores aritmticos so:
Adio +
Subtrao Multiplicao *
Diviso /
Mdulo %
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var umMaisUm = 1 + 1;
// umMaisUm = 2
var tresVezesDois = 3 * 2;
// tresVezesDois = 6
var quatroDivididoPorDois = 4 / 2;
// quatroDivididoPor2 = 2
var seisModuloCinco = 6 % 5;
// seisModuloCinco = 1
var x = 7;
x = x + 1 * 2;
// x = 9
x = x - 3;
// x = 6
x = x / (6 - 2 - (3 * 5) / (16 - 1) ) ;
// x = 2
Cdigo Javascript 4.5: Exemplo de uso dos operadores aritmticos
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.
www.facebook.com/k19treinamentos
313
J AVA S CRIPT
314
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.
Mais Sobre
As operaes de potenciao e raiz quadrada podem ser realizadas atravs dos mtodos
Math.pow e Math.sqrt. Veja alguns exemplos.
1
2
3
4
5
Concatenao de Strings
Como vimos anteriormente, o operador + utilizado para realizar soma aritmtica. Mas, ele
tambm pode ser utilizado para concatenar strings. Veja um exemplo.
1
2
3
4
5
6
Observe que o operador + foi aplicado a um valor numrico e a um texto. Nesses casos, o valor
numrico , automaticamente, transformado em texto e a concatenao realizada.
314
www.k19.com.br
315
J AVA S CRIPT
Atribuio
Nas sees anteriores, j vimos um dos operadores de atribuio, o operador = (igual). Os operadores de atribuio so:
Simples =
Incremental +=
Decremental -=
Multiplicativa *=
Divisria /=
Modular %=
Incremento ++
Decremento -1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var valor = 1;
// valor = 1
valor += 2;
// valor = 3
valor -= 1;
// valor = 2
valor *= 6;
// valor = 12
valor /= 3;
// valor = 4
valor %= 3;
// valor = 1
valor ++;
// valor = 2
valor - -;
// valor = 1
Cdigo Javascript 4.10: Exemplo de uso dos operadores de atribuio.
var valor = 1;
// valor = 1
valor = valor + 2;
// valor = 3
valor = valor - 1;
// valor = 2
valor = valor * 6;
// valor = 12
valor = valor / 3;
// valor = 4
valor = valor % 3;
// valor = 1
www.facebook.com/k19treinamentos
315
J AVA S CRIPT
19
20
21
22
23
316
valor = valor + 1;
// valor = 2
valor = valor - 1;
// valor = 1
Cdigo Javascript 4.11: O mesmo exemplo anterior, usando os operadores aritmticos.
Como podemos observar, os operadores de atribuio, exceto o simples (=), reduzem a quantidade de cdigo escrito. Podemos dizer que esses operadores funcionam como atalhos para as
operaes que utilizam os operadores aritmticos.
Relacionais
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
Lgicos
A linguagem JavaScript permite verificar duas ou mais condies atravs de operadores lgicos.
Os operadores lgicos devolvem valores booleanos. A seguir descreveremos o funcionamento desses
operadores.
&& (E)
1 var a = Math . random () ;
2 var b = Math . random () ;
3
4 alert ( a > 0.2 && b < 0.8) ;
Cdigo Javascript 4.13: Exemplo de uso do operador &
A tabela verdade uma forma prtica de visualizar o resultado dos operadores lgicos. Veja a
seguir a tabela verdade do operador &&.
316
www.k19.com.br
317
J AVA S CRIPT
a > 0.2
V
V
F
F
b < 0.8
V
F
V
F
|| (OU)
1 var a = Math . random () ;
2 var b = Math . random () ;
3
4 alert ( a > 0.2 || b < 0.8) ;
Cdigo Javascript 4.14: Exemplo de uso do operador ||
A tabela verdade uma forma prtica de visualizar o resultado dos operadores lgicos. Veja a
seguir a tabela verdade do operador ||.
a > 0.2
V
V
b < 0.8
V
F
F
F
V
F
Operador !
Valores booleanos podem ser invertidos com o operador de ! (negao). Por exemplo, podemos
verificar se uma varivel numrica armazena um valor maior do que 0.5 de duas formas diferentes.
1 d > 0.5
1 !( d <= 0.5)
Pr e Ps Incremento ou Pr e Ps Decremento
Os operadores ++ e -- podem ser utilizados de duas formas diferentes, antes ou depois de
uma varivel numrica.
1 var i = 10;
2 i ++;
3 i - -;
www.facebook.com/k19treinamentos
317
J AVA S CRIPT
318
1 var i = 10;
2 ++ i ;
3 --i ;
Observe que o operador ++ foi utilizado nas expresses do exemplo acima em conjunto com
o operador ==. Como dois operadores foram utilizados na mesma expresso, voc pode ter dvida em relao a ordem de execuo desses operadores. O incremento com o operador ++ ser
realizado antes ou depois da comparao com o operador ==?
Como o operador ++ foi utilizado na forma de ps incremento, a comparao ocorrer antes
do incremento. Analogamente, a comparao ocorreria antes do decremento se o operador -- fosse
utilizado na forma de ps decremento.
Agora, considere a utilizao do operador ++ na forma de pr incremento.
1 var i = 10;
2
3 // false
4 alert (++ i == 10) ;
318
www.k19.com.br
319
J AVA S CRIPT
Operador ternrio ?:
Considere um programa que controla as notas dos alunos de uma escola. Para exemplificar, vamos gerar a nota de um aluno aleatoriamente.
1 var nota = Math . random () ;
O programa deve exibir a mensagem aprovado se nota de um aluno for maior ou igual a 0.5
e reprovado se a nota for menor do que 0.5. Esse problema pode ser resolvido com o operador
ternrio.
Valor 1
Valor 2
Quando a condio(nota >= 0.5) verdadeira, o operador ternrio devolve o primeiro resultado
(aprovado). Caso contrrio, devolve o segundo resultado(reprovado). Podemos guardar o resultado do operador ternrio em uma varivel ou simplesmente exibi-lo.
1 var resultado = nota >= 0.5 ? " aprovado " : " reprovado " ;
2 alert ( nota >= 0.5 ? " aprovado " : " reprovado " ) ;
Nos exemplos anteriores, o operador ternrio foi utilizado com valores do tipo string. Contudo,
podemos utiliz-lo com qualquer tipo de valor. Veja o exemplo a seguir.
1 var i = nota >= 0.5 ? 1 : 2;
2 var d = nota >= 0.5 ? 0.1 : 0.2;
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 if ( preco < 0) {
2
alert ( O preo do produto no pode ser negativo ) ;
3 } else {
www.facebook.com/k19treinamentos
319
J AVA S CRIPT
320
4
alert ( Produto cadastrado com sucesso ) ;
5 }
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
comando else assim como o seu bloco so opcionais.
while
Em alguns casos, necessrio repetir um determinado trecho de cdigo vrias vezes. Por exemplo, suponha que seja necessrio exibir 5 vezes a mensagem: Bom Dia. Podemos resolver essa
tarefa com o seguinte cdigo JavaScript.
1
2
3
4
5
Dia " ) ;
Dia " ) ;
Dia " ) ;
Dia " ) ;
Dia " ) ;
Se ao invs de 5 vezes fosse necessrio exibir 100 vezes a mensagem Bom Dia, j seriam 100
linhas de cdigo JavaScript. muito trabalhoso utilizar essa abordagem para solucionar esse problema.
Atravs do comando while, possvel executar vrias vezes um determinado trecho de cdigo.
1 var contador = 0;
2
3 while ( contador < 100) {
4
console . log ( " Bom Dia " ) ;
5
contador ++;
6 }
Cdigo Javascript 4.27: while
A varivel contador indica o nmero de vezes que a mensagem Bom Dia foi exibida. O operador
++ incrementa a varivel contador a cada iterao. O parmetro do comando while deve ser um valor
booleano.
for
O comando for anlogo ao while. A principal diferena entre esses dois comandos que o for
recebe trs argumentos.
1 for ( var contador = 0; contador < 100; contador ++) {
2
console . log ( " Bom Dia " ) ;
3 }
Exerccios de Fixao
320
www.k19.com.br
321
J AVA S CRIPT
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao9.zip
10
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao10.zip
11
12
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao12.zip
13
www.facebook.com/k19treinamentos
321
J AVA S CRIPT
322
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao13.zip
14
*
**
*
**
*
**
Adicione um arquivo chamado exibe-padrao-1.html no projeto javascript.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > K19 - JavaScript </ title >
6
< script type = " text / javascript " src = " exibe - padrao -1. js " > </ script >
7
</ head >
8
< body >
9
</ body >
10 </ html >
Cdigo HTML 4.10: exibe-padrao-1.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao15.zip
16
322
www.k19.com.br
323
J AVA S CRIPT
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao16.zip
17
Percorra todos os nmeros de 1 at 100. Para os nmeros mltiplos de 4, exiba a palavra PIN,
e para os outros, exiba o prprio nmero. Veja o exemplo abaixo:
18
1
2
3
PIN
5
6
7
PIN
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao18.zip
19
www.facebook.com/k19treinamentos
323
J AVA S CRIPT
324
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao19.zip
20
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 com a sintaxe JSON. Veja o exemplo a seguir.
1 var objetoVazio = {};
2 var curso = {
3
sigla : " K11 " ,
4
nome : " Orientao a Objetos em Java "
5 };
Um objeto pode se relacionar com outros objetos atravs de propriedades. Observe o cdigo
abaixo.
1 var formacaoJava = {
2
sigla : " K10 " , nome : " Formao Desenvolvedor Java " ,
3
cursos : [
4
{
5
sigla : " K11 " ,
6
nome : " Orientao a Objetos em Java "
7
},
8
{
9
sigla : " K12 " ,
10
nome : " Desenvolvimento Web com JSF2 e JPA2 "
11
},
12
]
13 };
324
www.k19.com.br
325
5
6
7
8
9
10
J AVA S CRIPT
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 ) ;
Referncias
Os objetos so acessados atravs de referncias.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 ) ;
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
www.facebook.com/k19treinamentos
325
J AVA S CRIPT
326
15
16 // imprime Orientao a Objetos em Java
17 console . log ( novo_curso . nome ) ;
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
8
9
10
11
12
13
14
15
16
17
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
15
16
17
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 ) ;
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
15
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 ) ;
326
www.k19.com.br
327
J AVA S CRIPT
16 // imprime undefined
17 console . log ( curso . carga_horaria ) ;
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
12
13
14
15
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
console . log ( novo_curso . nome ) ;
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
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 " ;
// imprime K11
console . log ( curso . sigla ) ;
// imprime Orientao a Objetos em Java
console . log ( curso . nome ) ;
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
16
17
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
www.facebook.com/k19treinamentos
327
J AVA S CRIPT
328
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 ) ;
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 ) ;
Exerccios de Fixao
21
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao21.zip
Adicione um arquivo chamado objetos.js no projeto javascript. Crie objetos com propriedades
chamadas sigla e nome. Exiba o valor dessas propriedades no console do navegador.
22
328
www.k19.com.br
329
1
2
3
4
5
6
7
J AVA S CRIPT
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 4.47: objetos.js
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao22.zip
23
24
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao24.zip
25
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
www.facebook.com/k19treinamentos
329
J AVA S CRIPT
330
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao25.zip
26
http://localhost/javascript/public_html/referencias.html.
27
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao27.zip
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 ) ;
// exibe K11
console . log ( novo_curso . sigla ) ;
// exibe Orientao a Objetos em Java
console . log ( novo_curso . nome ) ;
Cdigo Javascript 4.49: prototype.js
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao28.zip
29
www.k19.com.br
331
J AVA S CRIPT
http://localhost/~<USUARIO>/javascript/public_html/prototype.html.
Adicione um arquivo chamado propriedade-1.html no projeto javascript. Defina uma propriedade em um objeto utilizado como prottipo e verifique que essa propriedade ser adicionada nos
objetos criados a partir desse prottipo.
30
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao30.zip
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao31.zip
32
33
www.facebook.com/k19treinamentos
331
J AVA S CRIPT
332
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao33.zip
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;
// exibe K11
console . log ( curso . sigla ) ;
// exibe Orientao a Objetos em Java
console . log ( curso . nome ) ;
// exibe undefined
console . log ( curso . carga_horaria ) ;
Cdigo Javascript 4.51: propriedade-2.js
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao34.zip
35
36
332
www.k19.com.br
333
J AVA S CRIPT
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao36.zip
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 ) ;
// exibe K11
console . log ( novo_curso . sigla ) ;
// exibe Orientao a Objetos em Java
console . log ( novo_curso . nome ) ;
curso . sigla = " K12 " ;
curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " ;
// exibe K12
console . log ( novo_curso . sigla ) ;
// exibe Desenvolvimento Web com JSF2 e JPA2
console . log ( novo_curso . nome ) ;
Cdigo Javascript 4.52: propriedade-3.js
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao37.zip
38
39
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao39.zip
www.facebook.com/k19treinamentos
333
J AVA S CRIPT
334
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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 " ;
// exibe K12
console . log ( novo_curso . sigla ) ;
// exibe Desenvolvimento Web com JSF2 e JPA2
console . log ( novo_curso . nome ) ;
curso . sigla = " K21 " ;
curso . nome = " Persistncia com JPA2 e Hibernate " ;
// exibe K12
console . log ( novo_curso . sigla ) ;
// exibe Desenvolvimento Web com JSF2 e JPA2
console . log ( novo_curso . nome ) ;
Cdigo Javascript 4.53: propriedade-4.js
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao40.zip
41
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 var multiplicacao = function (x , y ) {
2
return x * y ;
3 }
Cdigo Javascript 4.54: Uma forma de criar uma funo
1 function multiplicacao (x , y ) {
2
return x * y ;
3 }
Cdigo Javascript 4.55: Outra forma de criar uma funo
334
www.k19.com.br
335
J AVA S CRIPT
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 4.57: 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 var soma = function () {
2
var soma = 0;
3
4
for ( var i = 0; i < arguments . length ; i ++) {
5
soma += arguments [ i ];
6
}
7
8
return soma ;
9 }
10
11 var resultado = soma (2 ,4 ,5 ,6 ,1) ;
www.facebook.com/k19treinamentos
335
J AVA S CRIPT
336
12
13 console . log ( resultado ) ;
Cdigo Javascript 4.59: Arguments
Exerccios de Fixao
42
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao42.zip
43
1
2
3
4
5
6
7
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao43.zip
44
45
336
www.k19.com.br
337
J AVA S CRIPT
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > K19 - JavaScript </ title >
6
< script type = " text / javascript " src = " metodos . js " > </ script >
7
</ head >
8
< body >
9
</ body >
10 </ html >
Cdigo HTML 4.20: metodos.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao45.zip
46
1
2
3
4
5
6
7
8
9
10
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao46.zip
47
48
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao48.zip
49
337
J AVA S CRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
338
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao49.zip
50
http://localhost/javascript/public_html/soma.html.
Arrays
A linguagem Javascript prov um objeto com caractersticas semelhantes a um array. Esse tipo
de objeto pode ser criado de forma literal com a sintaxe JSON.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Percorrendo um Array
Para percorrer um array, podemos utilizar o comando for.
1 var cursos = [ " K01 " ," K02 " ," K03 " ];
2
3 for ( var i = 0; i < cursos . length ; i ++) {
4
console . log ( cursos [ i ]) ;
5 }
338
www.k19.com.br
339
J AVA S CRIPT
Adicionando Elementos
Para adicionar um elemento no final de um array, podemos utilizar a propriedade length.
1
2
3
4
5
6
7
8
Removendo Elementos
O mtodo delete() permite remover elementos de um array.
1
2
3
4
5
6
7
8
var cursos = [ " K01 " , " K02 " , " K03 " ];
delete cursos [0];
// [ undefined , " K02 " , " K03 "]
for ( var i = 0; i < cursos . length ; i ++) {
console . log ( cursos [ i ]) ;
}
Concatenando Arrays
O mtodo concat() permite concatenar dois arrays.
1
2
3
4
5
6
7
8
9
var formacaoBasica = [ " K01 " , " K02 " , " K03 " ];
var formacaoJava = [ " K11 " , " K12 " ];
var formacaoCompleta = formacaoBasica . concat ( formacaoJava ) ;
// [" K01 ", " K02 " , " K03 " , " K11 " , " K12 "]
for ( var i = 0; i < formacaoCompleta . length ; i ++) {
console . log ( formacaoCompleta [ i ]) ;
}
www.facebook.com/k19treinamentos
339
J AVA S CRIPT
340
var cursos = [ " K01 " , " K02 " , " K03 " ];
var curso = cursos . pop () ;
// [" K01 ", " K02 "]
console . log ( " Elemento removido : " + curso ) ;
for ( var i = 0; i < cursos . length ; i ++) {
console . log ( cursos [ i ]) ;
}
var cursos = [ " K01 " , " K02 " , " K03 " ];
cursos . reverse () ;
// [" K03 ", " K02 " , " K01 "]
for ( var i = 0; i < cursos . length ; i ++) {
console . log ( cursos [ i ]) ;
}
var cursos = [ " K01 " , " K02 " , " K03 " ];
var curso = cursos . shift () ;
// [" K02 ", " K03 "]
console . log ( " Elemento removido : " + curso ) ;
for ( var i = 0; i < cursos . length ; i ++) {
console . log ( cursos [ i ]) ;
}
var cursos = [ " K01 " , " K02 " , " K03 " , " K11 " , " K12 " ];
var formacaoBasica = cursos . slice (0 , 3) ;
// [" K01 ", " K02 " , " K03 "]
for ( var i = 0; i < formacaoBasica . length ; i ++) {
console . log ( formacaoBasica [ i ]) ;
}
340
www.k19.com.br
341
J AVA S CRIPT
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ];
cursos . splice (2 , 3 , " K31 " , " K32 " ) ;
// [" K11 ", " K12 " , " K31 " , " K32 "]
for ( var i = 0; i < cursos . length ; i ++) {
console . log ( cursos [ i ]) ;
}
var cursos = [ " K12 " ," K21 " ," K22 " ," K23 " ];
cursos . unshift ( " K11 " ) ;
// [" K11 ", " K12 " , " K21 " , " K22 " , " K23 "]
for ( var i = 0; i < cursos . length ; i ++) {
console . log ( cursos [ i ]) ;
}
Strings
var curso = " K12 - Desenvolvimento Web com JSF2 e JPA2 " ;
var aux = curso . split ( " -" ) ;
console . log ( aux [0]) ;
console . log ( aux [1]) ;
www.facebook.com/k19treinamentos
341
J AVA S CRIPT
342
Exerccios de Fixao
51
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao51.zip
52
1
2
3
4
5
6
7
8
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao52.zip
53
54
342
www.k19.com.br
343
J AVA S CRIPT
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao54.zip
55
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ," K31 " ," K32 " ];
2 for ( var i = 0; i < cursos . length ; i ++) {
3
console . log ( cursos [ i ]) ;
4 }
Cdigo Javascript 4.80: array-elementos.js
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao55.zip
56
57
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao57.zip
58
1
2
3
4
5
6
7
www.facebook.com/k19treinamentos
343
J AVA S CRIPT
344
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao58.zip
59
http://localhost/javascript/public_html/array-add.html.
60
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao60.zip
61
1
2
3
4
5
6
7
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 4.82: array-push.js
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao61.zip
62
63
344
345
J AVA S CRIPT
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao63.zip
64
1
2
3
4
5
6
7
8
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao64.zip
65
66
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao66.zip
www.facebook.com/k19treinamentos
345
J AVA S CRIPT
346
67
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ];
2
3 var curso = cursos . pop () ;
4
5 console . log ( curso ) ;
Cdigo Javascript 4.84: array-pop.js
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao67.zip
68
http://localhost/javascript/public_html/array-pop.html.
69
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao69.zip
70
1
2
3
4
5
6
7
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ];
cursos . reverse () ;
for ( var i = 0; i < cursos . length ; i ++) {
console . log ( cursos [ i ]) ;
}
Cdigo Javascript 4.85: array-reverse.js
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao70.zip
71
346
www.k19.com.br
347
J AVA S CRIPT
72
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao72.zip
73
1
2
3
4
5
6
7
8
9
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao73.zip
74
75
www.facebook.com/k19treinamentos
347
J AVA S CRIPT
348
7
</ head >
8
< body >
9
</ body >
10 </ html >
Cdigo HTML 4.30: array-slice.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao75.zip
76
1
2
3
4
5
6
7
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ];
var formacaoJava = cursos . slice (0 ,2) ;
for ( var i = 0; i < formacaoJava . length ; i ++) {
console . log ( formacaoJava [ i ]) ;
}
Cdigo Javascript 4.87: array-slice.js
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao76.zip
77
78
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao78.zip
79
1 var cursos = [ " K12 " ," K21 " ," K22 " ," K23 " ];
2
3 cursos . unshift ( " K11 " ) ;
4
5 for ( var i = 0; i < cursos . length ; i ++) {
348
www.k19.com.br
349
J AVA S CRIPT
6
console . log ( cursos [ i ]) ;
7 }
Cdigo Javascript 4.88: array-unshift.js
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao79.zip
80
81
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao81.zip
82
1
2
3
4
5
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao82.zip
83
349
J AVA S CRIPT
350
Recuperando elementos
Podemos buscar elementos HTML por ID atravs do mtodo getElementById. Esse mtodo
devolve null se no existir elemento HTML com o identificador desejado.
1 var elemento = document . getElementById ( " conteudo " ) ;
Podemos buscar elementos HTML pelo valor do atributo name atravs do mtodo getElementsByName. Esse mtodo devolve um array com os elementos recuperados.
1 var array = document . getElementsByName ( " categoria " ) ;
Podemos buscar elementos HTML de um determinado tipo atravs do mtodo getElementsByTagName. Esse mtodo devolve um array com os elementos recuperados.
1 var array = document . getElementsByTagName ( " p " ) ;
Podemos buscar elementos HTML pelo valor do atributo class atravs do mtodo getElementsByClassName. Esse mtodo devolve um array com os elementos recuperados.
1 var array = document . getElementsByClassName ( " confirmado " ) ;
Podemos buscar elementos HTML utilizando seletores CSS atravs dos mtodos querySelector e querySelectorAll. O primeiro mtodo devolve o primeiro elemento compatvel com o
seletor CSS passado como parmetro. O segundo mtodo devolve um array com todos os elementos compatveis com o seletor CSS passado como parmetro.
1 var elemento = document . querySelector ( " div . aprovado " ) ;
2 var array = document . querySelectorAll ( " div . aprovado " ) ;
350
www.k19.com.br
351
J AVA S CRIPT
Alterando elementos
Podemos modificar os atributos de um elemento HTML atravs do mtodo setAttribute.
1 elemento . setAttribute ( " type " , " text " ) ;
Removendo elementos
Podemos remover um elemento HTML atravs do mtodo remove.
1 var elemento = document . getElementById ( " conteudo " ) ;
2 elemento . remove () ;
Adicionando elementos
Podemos criar um elemento HTML atravs do mtodo createElement e adicion-lo em um
documento HTML atravs do mtodo appendChild.
1
2
3
4
Tambm podemos adicionar um elemento HTML em um documento HTML atravs do mtodo insertBefore.
1
2
3
4
5
www.facebook.com/k19treinamentos
351
J AVA S CRIPT
352
6
7 conteudo . insertBefore ( titulo , tabela ) ;
Mais Sobre
Os objetos que representam os documentos e os elementos HTML possuem uma
grande quantidade de propriedades e mtodos. Para saber mais sobre essas propriedade e esses mtodos, recomendamos a consulta aos seguintes endereos:
https://developer.mozilla.org/en-US/docs/Web/API/Document
https://developer.mozilla.org/en-US/docs/Web/API/element
Exerccios de Fixao
84
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao84.zip
85
1
2
3
4
5
352
www.k19.com.br
353
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
J AVA S CRIPT
console . log ( array [ i ]. tagName + " : " + array [ i ]. id ) ;
}
array = document . getElementsByTagName ( " label " ) ;
for ( var i = 0; i < array . length ; i ++) {
console . log ( array [ i ]. tagName + " : " + array [ i ]. getAttribute ( " for " ) ) ;
}
array = document . getElementsByClassName ( " centralizado " ) ;
for ( var i = 0; i < array . length ; i ++) {
console . log ( array [ i ]. tagName + " : " + array [ i ]. id ) ;
}
var formulario = document . querySelector ( " body > form " ) ;
console . log ( formulario . tagName + " : " + formulario . getAttribute ( " action " ) ) ;
array = document . querySelectorAll ( " label " ) ;
for ( var i = 0; i < array . length ; i ++) {
console . log ( array [ i ]. tagName + " : " + array [ i ]. getAttribute ( " for " ) ) ;
}
Cdigo Javascript 4.106: DOM.js
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao85.zip
86
87
1
2
3
4
5
6
7
8
9
10
11
12
13
Eventos
A interatividade entres as pginas web e os usurios depende fortemente dos eventos que podem
ser reconhecidos pelos navegadores. Por exemplo, atualmente, os navegadores so capazes de identificar o movimento do mouse, a digitao do usurio, a finalizao do carregamento de uma pgina
web, o redimensionamento da janela, entre outros eventos.
www.facebook.com/k19treinamentos
353
J AVA S CRIPT
354
H uma quantidade muito grande de eventos que podem ser reconhecidos pelos navegadores.
Recomendamos que voc consulte os seguintes endereos para obter maiores informaes:
http://www.w3.org/TR/DOM-Level-3-Events/
http://en.wikipedia.org/wiki/DOM_events
Podemos definir o que deve ocorrer quando um determinado evento detectado. No exemplo
abaixo, toda vez que o usurio clicar no pargrafo, a mensagem K19 ser exibida no console do
navegador.
1 <p onclick = " console . log ( K19 ) " >
2
Lorem ipsum dolor sit amet , consectetur adipiscing elit .
3 </ p >
load
O evento load disparado no trmino do carregamento de um recurso (imagem, script, folhas de
estilos, entre outros) contido em um documento HTML ou do prprio documento. Podemos definir
o tratamento desse evento utilizando o atributo onload. Esse atributo pode ser utilizado em diversos
elementos HTML. Por exemplo: body, img, script e link.
1 < body onload = " console . log ( K19 ) " >
2 </ body >
resize
O evento resize disparado quando ocorre uma alterao no tamanho de determinados elementos. Podemos definir o tratamento desse evento utilizando o atributo onresize. Esse atributo pode
ser utilizado em diversos elementos HTML. Por exemplo: body, img, form e textarea.
1 < body onresize = " console . log ( K19 ) " >
2 </ body >
scroll
O evento scroll disparado quando a barra de rolagem de um determinado elemento HTML
movida. Podemos definir o tratamento desse evento utilizando o atributo onscroll. Esse atributo
pode ser utilizado em diversos elementos HTML. Por exemplo: body, section, div e textarea.
1 < body onscroll = " console . log ( K19 ) " >
2 </ body >
focus
O evento focus disparado quando um determinado elemento ganha o foco. Podemos definir o
tratamento desse evento utilizando o atributo onfocus. Esse atributo pode ser utilizado em diversos
elementos HTML. Por exemplo: input, select e textarea.
1 < input onfocus = " console . log ( K19 ) " . . . >
354
www.k19.com.br
355
J AVA S CRIPT
change
O evento change disparado quando um determinado elemento HTML perde o foco aps ter o
seu contedo alterado. Podemos definir o tratamento desse evento utilizando o atributo onchange.
Esse atributo pode ser utilizado em diversos elementos HTML. Por exemplo: input, select e textarea.
1 < input onchange = " console . log ( K19 ) " . . . >
blur
O evento blur disparado quando um determinado elemento perde o foco. Podemos definir o
tratamento desse evento utilizando o atributo onblur. Esse atributo pode ser utilizado em diversos
elementos HTML. Por exemplo: input, select e textarea.
1 < input onblur = " console . log ( K19 ) " . . . >
select
O evento select disparado quando o texto contido em um input ou textarea selecionado.
Podemos definir o tratamento desse evento utilizando o atributo onselect.
1 < input onselect = " console . log ( K19 ) " . . . >
submit
O evento submit disparado imediatamente antes do envio de um formulrio. Podemos definir
o tratamento desse evento utilizando o atributo onsubmit.
1 < form onsubmit = " console . log ( K19 ) " . . . >
reset
O evento reset disparado quando um formulrio reiniciado. Podemos definir o tratamento
desse evento utilizando o atributo onreset.
1 < form onreset = " console . log ( K19 ) " . . . >
1. mousedown
2. mouseup
3. click
www.facebook.com/k19treinamentos
355
J AVA S CRIPT
356
dblclick
O evento dblclick disparado quando um determinado elemento recebe um duplo clique. Podemos definir o tratamento desse evento utilizando o atributo ondblclick. Esse atributo pode ser
utilizado em diversos elementos HTML. Por exemplo: p, div, table e img.
1 <p ondblclick = " console . log ( K19 ) " >
2
Lorem ipsum dolor sit amet , consectetur adipiscing elit .
3 </ p >
mousemove
O evento mousemove disparado quando o usurio movimenta o mouse sobre um determinado
elemento. Podemos definir o tratamento desse evento utilizando o atributo onmousemove. Esse
atributo pode ser utilizado em diversos elementos HTML. Por exemplo: p, div, table e img.
1 <p onmousemove = " console . log ( K19 ) " >
2
Lorem ipsum dolor sit amet , consectetur adipiscing elit .
3 </ p >
mouveover
O evento mouveover disparado quando o ponteiro do mouse passa a estar sobre um determinado elemento. Podemos definir o tratamento desse evento utilizando o atributo onmouveover.
Esse atributo pode ser utilizado em diversos elementos HTML. Por exemplo: p, div, table e img.
1 <p onmouveover = " console . log ( K19 ) " >
2
Lorem ipsum dolor sit amet , consectetur adipiscing elit .
3 </ p >
mouseout
O evento mouseout disparado quando o ponteiro do mouse deixa de estar sobre um determinado elemento. Podemos definir o tratamento desse evento utilizando o atributo onmouseout. Esse
atributo pode ser utilizado em diversos elementos HTML. Por exemplo: p, div, table e img.
1 <p onmouseout = " console . log ( K19 ) " >
2
Lorem ipsum dolor sit amet , consectetur adipiscing elit .
3 </ p >
www.k19.com.br
357
J AVA S CRIPT
1. keydown
2. keypress
3. keyup
1 < input
2
onkeydown = " console . log ( 1 ) "
3
onkeypress = " console . log ( 2 ) "
4
onkeyup = " console . log ( 3 ) " . . . >
Mais Sobre
O evento keypress no disparado para teclas que no representam caracteres. Por
exemplo, SHIFT, CTRL, ALT, entre outros.
function click () {
console . log ( " click " ) ;
}
var elemento = document . getElementById ( " conteudo " ) ;
elemento . addEventListener ( " click " , click ) ;
Nessa abordagem, podemos associar diversas funes para tratar um determinado evento para
um determinado elemento HTML.
Tambm podemos utilizar funes annimas como mostra o exemplo a seguir.
1 var elemento = document . getElementById ( " conteudo " ) ;
2 elemento . addEventListener (
3
" click " ,
4
function () {
5
console . log ( " click " )
6
}
7 );
www.facebook.com/k19treinamentos
357
J AVA S CRIPT
358
Nessa abordagem, apenas uma funo pode ser associada a um determinado evento para um
determinado elemento HTML.
Exerccios de Fixao
88
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao88.zip
89
358
www.k19.com.br
359
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
72
73
74
75
76
77
78
79
J AVA S CRIPT
console . log ( " blur " ) ;
};
input . onselect = function () {
console . log ( " select " ) ;
};
input . onkeydown = function () {
console . log ( " keydown " ) ;
};
input . onkeypress = function () {
console . log ( " keypress " ) ;
};
input . onkeyup = function () {
console . log ( " keyup " ) ;
};
var div = document . querySelector ( " div " ) ;
div . onmousedown = function () {
console . log ( " mousedown " ) ;
};
div . onmouseup = function () {
console . log ( " mouseup " ) ;
};
div . onclick = function () {
console . log ( " click " ) ;
};
div . ondblclick = function () {
console . log ( " dblclick " ) ;
};
div . onmousemove = function ( event ) {
var x = event . clientX ;
var y = event . clientY ;
console . log ( " mousemove : ( " + x + " , " + y + " ) " ) ;
};
div . onmouseover = function () {
console . log ( " mouseover " ) ;
};
div . onmouseout = function () {
console . log ( " mouseout " ) ;
};
};
function resize () {
var w = window . outerWidth ;
var h = window . outerHeight ;
console . log ( " resize ( " + w + " , " + h + " ) " ) ;
}
function scroll () {
var x = window . pageXOffset ;
var y = window . pageYOffset ;
console . log ( " scroll ( " + x + " , " + y + " ) " ) ;
}
Cdigo Javascript 4.112: eventos.js
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao89.zip
www.facebook.com/k19treinamentos
359
J AVA S CRIPT
90
360
Web Storage
Podemos armazenar dados nos navegadores dos usurios atravs do Web Storage. H duas formas de armazenamento.
Os dados armazenados com a API do Web Storage so separados por domnio e no so compartilhados entre navegadores diferentes. Os navegadores podem determinar a quantidade de espao
de armazenamento disponvel. Por padro, esse espao deve ser de pelo menos 5MB por domnio.
Armazenando dados
O mtodo setItem dos objetos localStorage e sessionStorage utilizado para inserir dados no
Web Storage. Esse mtodo recebe dois parmetros, uma chave e o um valor.
1 localStorage . setItem ( " usuario " , " Rafael Cosentino " ) ;
2 sessionStorage . setItem ( " usuario " , " Rafael Cosentino " ) ;
Recuperando dados
O mtodo getItem dos objetos localStorage e sessionStorage utilizado para recuperar dados
do Web Storage. Esse mtodo recebe uma chave como parmetro.
1 usuario = localStorage . getItem ( " usuario " ) ;
2 usuario = sessionStorage . getItem ( " usuario " ) ;
360
www.k19.com.br
361
J AVA S CRIPT
Removendo dados
O mtodo removeItem dos objetos localStorage e sessionStorage utilizado para remover dados
do Web Storage. Esse mtodo recebe uma chave como parmetro.
1 localStorage . removeItem ( " usuario " ) ;
2 sessionStorage . removeItem ( " usuario " ) ;
Para remover todas as entradas do localStorage ou do sessionStorage, podemos utilizar o mtodo clear.
1 localStorage . clear () ;
2 sessionStorage . clear () ;
Exerccios de Fixao
91
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao91.zip
92
1 function atualizaSaudacao () {
2
var saudacao = document . getElementById ( " saudacao " ) ;
www.facebook.com/k19treinamentos
361
J AVA S CRIPT
362
3
if ( localStorage . nome ) {
4
saudacao . innerHTML = " Ol " + localStorage . nome ;
5
} else {
6
saudacao . innerHTML = null ;
7
}
8 };
9
10 window . onload = function () {
11
var botaoEnviar = document . getElementById ( " botaoEnviar " ) ;
12
botaoEnviar . onclick = function () {
13
var campoNome = document . getElementById ( " campoNome " ) ;
14
localStorage . nome = campoNome . value ;
15
atualizaSaudacao () ;
16
};
17
18
var botaoLimpar = document . getElementById ( " botaoLimpar " ) ;
19
botaoLimpar . onclick = function () {
20
localStorage . removeItem ( " nome " ) ;
21
atualizaSaudacao () ;
22
};
23
24
atualizaSaudacao () ;
25 };
Cdigo Javascript 4.120: web-storage.js
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao92.zip
93
History
Podemos avanar ou retroceder no histrico dos navegadores atravs do objeto history. Esse
objeto pode ser acessado atravs do objeto window.
Avanando ou retrocedendo
Podemos avanar ou retroceder uma pgina no histrico atravs dos mtodos forward e back
respectivamente.
1 window . history . forward () ;
Tambm podemos utilizar o mtodo go. Esse mtodo recebe um nmero inteiro como parmetro.
1 // avana uma pgina
362
www.k19.com.br
363
2
3
4
5
6
7
8
9
10
11
J AVA S CRIPT
stateObject: Um objeto que pode ser utilizado para armazenar informaes sobre a nova entrada.
title: O ttulo da nova entrada.
url: A URL da nova entrada.
Como exemplo, considere que a pgina correspondente URL www.k19.com.br esteja sendo exibida no navegador.
1 var state = { info : " info " };
2 window . history . pushState ( state , " K19 - Cursos " , " cursos " ) ;
O cdigo acima adicionaria uma nova entrada com ttulo K19 - Cursos e URL www.k19.com.br/
cursos. J o cdigo abaixo, substituiria a entrada atual do histrico por uma nova com ttulo K19 Apostilas e URL www.k19.com.br/apostilas.
1 var state = { info : " info " };
2 window . history . replaceState ( state , " K19 - Apostilas " , " apostilas " ) ;
Exerccios de Fixao
94
www.facebook.com/k19treinamentos
363
J AVA S CRIPT
364
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao94.zip
95
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao95.zip
96
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao96.zip
97
http://localhost/javascript/public_html/historico-pagina1.html.
http://localhost/javascript/public_html/historico-pagina2.html.
http://localhost/javascript/public_html/historico-pagina3.html.
364
www.k19.com.br
365
J AVA S CRIPT
Geolocalizao
Se o usurio permitir, podemos obter a localizao dele atravs da API de Geolocalizao do
HTML5. Essa localizao pode ser utilizada para diversos propsitos. Por exemplo, podemos exibir
publicidade relacionada regio onde o usurio est.
O primeiro passo para utilizar essa API, definir uma funo JavaScript para receber a localizao
quando ela for obtida.
1 function positionCallback ( position ) {
2
console . log ( " Latitude : " + position . coords . latitude ) ;
3
console . log ( " Longitude : " + position . coords . longitude ) ;
4 }
Exerccios de Fixao
98
www.facebook.com/k19treinamentos
365
J AVA S CRIPT
366
21
< div id = " mapa " > </ div >
22
</ body >
23 </ html >
Cdigo HTML 4.55: geolocalizacao.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao98.zip
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao99.zip
100
366
www.k19.com.br
367
J AVA S CRIPT
2
console . log ( " timeout " ) ;
3 } , 1600) ;
Por outro lado, nesse outro exemplo, definimos uma funo que ser executada a cada 2500 milisegundos.
1 window . setInterval ( function () {
2
console . log ( " interval " ) ;
3 } , 2500) ;
function alarmeTimeout () {
console . log ( " timeout " ) ;
}
1
2
3
4
5
6
7
function alarmeInterval () {
console . log ( " interval " ) ;
}
Exerccios Complementares
2
Crie um documento HTML vinculado a um documento JavaScript que exiba no console do
navegador o seu nome cinco vezes. A cada exibio do seu nome, exiba trs vezes a palavra K19.
Crie um documento HTML vinculado a um documento JavaScript que percorra todos os nmeros de 1 at 60. Para os nmeros mltiplos de 3, exiba ***. Para os nmeros que no so mltiplos
de 3, exiba *.
3
5
Crie um documento HTML vinculado a um documento JavaScript que exiba no console do
navegador um tringulo de *. Veja o exemplo abaixo:
www.facebook.com/k19treinamentos
367
J AVA S CRIPT
368
*
**
***
****
*****
*
**
***
****
*
**
***
****
8
Crie um documento HTML vinculado a um documento JavaScript que armazene 10 nmeros
em um array. Preencha todas as posies do array com valores sequenciais e em seguida exiba-os na
tela. Depois, escolha duas posies aleatoriamente e troque os valores contidos nelas. Repita essa
operao 10 vezes. Ao final, exiba o array novamente.
Dica: O mtodo Math.random() gera nmeros aleatrios maiores ou iguais a 0 e menores do que
1. O mtodo Math.floor() recebe um nmero real como parmetro e devolve o maior inteiro menor
ou igual a esse nmero real.
9
Crie um documento HTML vinculado a um documento JavaScript que armazene 10 nmeros
em um array. Preencha todas as posies do array com valores aleatrios e em seguida exiba-os na
tela. Aps exibir o array, ordene o array do menor valor para o maior. Ao final, exiba o array ordenado.
Dica: Os arrays possuem um mtodo chamada sort. Esse mtodo ordena os elementos dos arrays.
Resumo do Captulo
368
www.k19.com.br
369
J AVA S CRIPT
A linguagem de programao JavaScript utilizada principalmente para aumentar a interatividade entre as pginas web e os usurios.
Cdigo JavaScript pode ser aplicado aos documentos HTML de duas formas: JavaScript interno
e JavaScript externo.
Comentrios JavaScript de bloco podem ser definidos com os marcadores /* e */. script.
Comentrios JavaScript de linha podem ser definidos com o marcador //. script.
Atribuio:
Relacional:
==
Lgico:
&&
+=
-=
*=
/=
!=
<
<=
>
%=
++
--
>=
||
10
11
12
Os mtodos getElementById(), getElementsByName(), getElementsByTagName(), getElementsByClassName(), querySelector() e querySelectorAll() so utilizados para recuperar os elementos de um documento HTML.
13
369
J AVA S CRIPT
370
14
15
A propriedade style pode ser utilizada para alterar as propriedades CSS dos elementos HTML.
16
17
18
19
Podemos armazenar dados na mquina dos usurios com a API do Web Storage.
20
21
Prova
a) Podemos associar cdigo JavaScript aos documentos HTML atravs dos elementos script e js.
b) O cdigo JavaScript sempre carregado antes de todos os elementos HTML.
c) O cdigo JavaScript sempre colocado dentro do documento HTML.
d) O elemento script s pode ser colocada no corpo do elemento head.
e) Podemos associar cdigo JavaScript aos documentos HTML atravs do elemento script.
www.k19.com.br
371
J AVA S CRIPT
a) 18.
b) 19.
c) 20.
d) 21.
e) 22.
a) K01.
b) K02.
c) K03.
d) K11.
e) Nenhuma das anteriores.
371
J AVA S CRIPT
372
a) 12, 14 e 16.
b) 12 e 14.
c) 11, 13 e 15.
d) 11 e 13.
e) 11, 12, 13 e 14.
a) b, a, b, undefined.
b) a, b, undefined, a.
c) b, a, undefined, a.
d) b, a, undefined, b.
e) a, b, a, undefined.
www.k19.com.br
373
J AVA S CRIPT
c) A propriedade css dos elementos HTML permite que as propriedades CSS sejam acessadas
e/ou modificadas.
d) O mtodo remove() remove elementos de um documento HTML.
e) Podemos acessar o contedo de um elemento HTML atravs da propriedade html.
10
11
Minha Pontuao
Pontuao Mnima:
www.facebook.com/k19treinamentos
Pontuao Mxima:
11
373
J AVA S CRIPT
374
374
www.k19.com.br
CAPTULO
J Q UERY
Introduo
Basicamente, jQuery uma biblioteca JavaScript. Ela foi desenvolvida para simplificar e diminuir
a quantidade de cdigo JavaScript. Os principais recursos oferecidos por essa essa biblioteca so:
Seletores
Manipulao de elementos HTML
Manipulao de propriedades CSS
Eventos
Efeitos e Animaes
AJAX
Para utilizar o jQuery, basta adicionar o arquivo JavaScript que contm o cdigo dessa biblioteca em um documento HTML. Esse arquivo JavaScript pode ser obtido no endereo http://docs.
jquery.com/Downloading_jQuery. Ele est disponvel em duas verses: Compressed e Uncompressed. Em produo, a primeira verso deve ser utilizada para no sobrecarregar a transferncia
de dados entre o Web Server e os navegadores. Em desenvolvimento, podemos utilizar a segunda
verso pois ela possui um cdigo bem mais legvel o que facilita a depurao.
1 < head >
2
< script type = " text / javascript " src = " jquery . js " > </ script >
3 </ head >
Google CDN
www.facebook.com/k19treinamentos
375
J Q UERY
376
1 < script
2
src = " http :// ajax . googleapis . com / ajax / libs / jquery /1.10.2/ jquery . min . js " > </ script >
Microsoft CDN
1 < script
2
src = " http :// ajax . aspnetcdn . com / ajax / jQuery / jquery -1.10.2. min . js " > </ script >
CDNJS
1 < script
2
src = " http :// cdnjs . cloudflare . com / ajax / libs / jquery /1.10.2/ jquery . min . js " > </ script >
Exerccios de Fixao
Importante
No Windows, utilizando o IIS (Internet Information Services) como Web Server, voc
deve salvar o projeto jQuery em C:\inetpub\wwwroot. Lembre-se que necessrio
instalar o IIS conforme vimos anteriormente.
Importante
No Ubuntu, utilizando o Apache HTTP Server como Web Server, voc deve salvar o
projeto jQuery em /home/<USUARIO>/public_html. Lembre-se que necessrio
instalar e configurar o Apache HTTP Server como vimos anteriormente.
376
www.k19.com.br
377
J Q UERY
www.facebook.com/k19treinamentos
377
J Q UERY
378
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-jquery-fixacao1.zip
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-jquery-fixacao2.zip
378
www.k19.com.br
379
1
2
3
4
5
6
7
J Q UERY
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-jquery-fixacao3.zip
Eventos
Evento
Descrio
ready
resize
scroll
focus
focusin
blur
focusout
select
change
Em determinados casos, esse evento disparado depois de um elemento ter o seu valor modificado e em seguida perder o foco. Em outros casos, esse evento disparado
depois de um elemento ter o seu valor modificado e selecionado nessa ordem.
http://api.jquery.com/change
keydown
www.facebook.com/k19treinamentos
379
J Q UERY
380
Evento
Descrio
keypress
keyup
http://api.jquery.com/keypress
http://api.jquery.com/keyup
click
Esse evento disparado quando o usurio clica sobre um elemento com o boto esquerdo ou com o boto do meio do mouse.
http://api.jquery.com/click
dblclick
Esse evento disparado quando o usurio realiza um duplo clique sobre um elemento com o boto esquerdo ou com o boto do meio do mouse.
http://api.jquery.com/dblclick
mousedown
mouseup
Esse evento disparado quando o usurio solta um boto do mouse sobre um determinado elemento.
http://api.jquery.com/mouseup
mouseenter
mouseleave
hover
mouveover
http://api.jquery.com/hover
http://api.jquery.com/mouveover
mouseout
mousemove
Esse evento disparado quando o ponteiro do mouse se move sobre um determinado elemento ou sobre os seus descendentes.
http://api.jquery.com/mousemove
submit
on
Podemos definir o tratamento dos eventos com o mtodo on. No exemplo abaixo, o primeiro
parmetro o nome do evento que ser tratado e o segundo parmetro a funo que tratar o evento.
1 $( " body " ) . on ( " click " , function () {
2
console . log ( " click " ) ;
3 }) ;
O tratamento de diversos eventos pode ser definido com uma nica chamada do mtodo on.
1 $( " body " ) . on ( " click mouseenter mouseleave " , function () {
380
www.k19.com.br
381
J Q UERY
2
console . log ( " click mouseenter mouseleave " ) ;
3 }) ;
off
Podemos eliminar o tratamento de um evento com o mtodo off. A seguir, mostramos algumas
formas de utilizao desse mtodo.
1
2
3
4
5
6
7
8
Atalhos
O tratamento de um evento pode ser definido atravs de mtodos que funcionam como atalhos
para o mtodo on. No exemplo abaixo, utilizamos o mtodo click que um atalho para on("click",
funo).
1 $( " body " ) . click ( function () {
2
console . log ( " click " ) ;
3 }) ;
Propriedades
Os eventos so associados informaes especificas. Por exemplo, quando o evento click disparado, ele associado a uma coordenada horizontal e uma vertical. Essas coordenadas definem
a posio do ponteiro do mouse quando o clique ocorreu. Para recuperar essas informaes, basta
adicionar um parmetro nas funes de tratamento de eventos.
No exemplo abaixo, utilizamos as propriedades pageX e pageY para recuperar as coordenadas
correspondentes posio do ponteiro do mouse quando um clique ocorrer no body.
1 $( " body " ) . click ( function ( event ) {
2
console . log ( " click : ( " + event . pageX + " , " + event . pageY + " ) " ) ;
3 }) ;
Propriedade
Descrio
pageX
pageY
event.type
O tipo de evento.
http://api.jquery.com/event.type
www.facebook.com/k19treinamentos
381
J Q UERY
382
Propriedade
Descrio
event.which
Mais Sobre
Podemos utilizar a propriedade event.which para recuperar o keyCode das teclas
pressionadas nos eventos keydown, keypress e keyup. Contudo, importante saber
que o mapeamento de teclas para os eventos keydown e keyup diferente do mapeamento de
teclas para o evento keypress.
Exerccios de Fixao
382
www.k19.com.br
383
J Q UERY
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-jquery-fixacao5.zip
www.facebook.com/k19treinamentos
383
J Q UERY
384
60
}) ;
61
62
/* tratando o evento keypress */
63
$( " input " ) . keypress ( function ( event ) {
64
console . log ( " keypress : ( " + event . which + " ) " ) ;
65
}) ;
66
67
/* tratando o evento keyup */
68
$( " input " ) . keyup ( function ( event ) {
69
console . log ( " keyup : ( " + event . which + " ) " ) ;
70
}) ;
71
72
/* tratando o evento click */
73
$( " # div1 " ) . click ( function ( event ) {
74
console . log ( " click : ( " + event . pageX + " , " + event . pageY + " ) " ) ;
75
}) ;
76
77
/* tratando o evento dblclick */
78
$( " # div1 " ) . dblclick ( function ( event ) {
79
console . log ( " dblclick : ( " + event . pageX + " , " + event . pageY + " ) " ) ;
80
}) ;
81
82
/* tratando o evento mousedown */
83
$( " # div1 " ) . mousedown ( function ( event ) {
84
console . log ( " mousedown : ( " + event . pageX + " , " + event . pageY + " ) " ) ;
85
}) ;
86
87
/* tratando o evento mouseup */
88
$( " # div1 " ) . mouseup ( function ( event ) {
89
console . log ( " mouseup : ( " + event . pageX + " , " + event . pageY + " ) " ) ;
90
}) ;
91
92
/* tratando o evento mouseenter */
93
$( " # div1 " ) . mouseenter ( function ( event ) {
94
console . log ( " mouseenter : ( " + event . pageX + " , " + event . pageY + " ) " ) ;
95
}) ;
96
97
/* tratando o evento mouseleave */
98
$( " # div1 " ) . mouseleave ( function ( event ) {
99
console . log ( " mouseleave : ( " + event . pageX + " , " + event . pageY + " ) " ) ;
100
}) ;
101
102
/* tratando o evento hover */
103
$( " # div1 " ) . hover ( function ( event ) {
104
console . log ( " hover : ( " + event . pageX + " , " + event . pageY + " ) " ) ;
105
}) ;
106
107
/* tratando o evento mouseover */
108
$( " # div1 " ) . mouseover ( function ( event ) {
109
console . log ( " mouseover : ( " + event . pageX + " , " + event . pageY + " ) " ) ;
110
}) ;
111
112
/* tratando o evento mouseout */
113
$( " # div1 " ) . mouseout ( function ( event ) {
114
console . log ( " mouseout : ( " + event . pageX + " , " + event . pageY + " ) " ) ;
115
}) ;
116
117
/* tratando o evento mousemove */
118
$( " # div2 " ) . mousemove ( function ( event ) {
119
console . log ( " mousemove : ( " + event . pageX + " , " + event . pageY + " ) " ) ;
120
}) ;
121 }) ;
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-jquery-fixacao6.zip
384
www.k19.com.br
385
7
J Q UERY
Seletores
Seletor
Descrio
$("*");
http://api.jquery.com/all-selector
[atributo]
[atributo="valor"]
[atributo!="valor"]
[atributo="valor"]
[atributo$="valor"]
www.facebook.com/k19treinamentos
385
J Q UERY
386
Seletor
Descrio
[atributo*="valor"]
[atributo="valor"]
[atributo|="valor"]
[f1][f2]...[fn]
#id
tipo
s1 s2
s1 > s2
Seleciona todos os elementos que combinam com o seletor s2 e so filhos de elementos que combinam com o seletor s1.
Exemplo: selecionando os spans filhos de um div.
386
www.k19.com.br
387
J Q UERY
Seletor
Descrio
s1 + s2
$ ( " h1 + p " )
http://api.jquery.com/next-adjacent-Selector
s1 s2
$ ( " h1 ~ p " )
http://api.jquery.com/next-siblings-selector
.classe
s1,s2,s3...
Seleciona todos os elementos que combinam com pelo menos um dos seletores especificados.
Exemplo: selecionando os divs ou os elementos da classe titulo.
:first
Seleciona o primeiro elemento da lista dos elementos que combinam com o seletor
utilizado.
Exemplo: selecionando o primeiro div.
:last
Seleciona o ltimo elemento da lista dos elementos que combinam com o seletor utilizado.
Exemplo: selecionando o ltimo div.
:eq(n)
Seleciona o n-simo elemento da lista dos elementos que combinam com o seletor
utilizado.
Exemplo: selecionando o quarto div.
:gt(n)
Da lista de elementos que combinam com o seletor utilizado, seleciona do (n+1)simo elemento at o ltimo.
Exemplo: selecionando do quarto ao ltimo div.
www.facebook.com/k19treinamentos
387
J Q UERY
388
Seletor
Descrio
:lt(n)
:even
Da lista de elementos que combinam com o seletor utilizado, seleciona todos os elementos de ndice par.
Exemplo: selecionando os divs de ndice 0, 2, 4, 6 . . .
:odd
Da lista de elementos que combinam com o seletor utilizado, seleciona todos os elementos de ndice mpar.
Exemplo: selecionando os divs de ndice 1, 3, 5, 7 . . . .
:first-child
:first-of-type
:last-child
:last-of-type
:nth-child(n)
388
www.k19.com.br
389
J Q UERY
Seletor
Descrio
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
:only-child
:only-of-type
:parent
:hidden
:visible
www.facebook.com/k19treinamentos
389
J Q UERY
390
Seletor
Descrio
:disabled
:enabled
:contains("texto")
:empty
:has(seletor)
Seleciona os elementos que possuem pelo menos um descendente que combina com
o seletor passado como parmetro.
Exemplo: selecionando os divs que possuem pelo menos um img.
:not(seletor)
:button
:file
390
www.k19.com.br
391
J Q UERY
Seletor
Descrio
:image
:password
:radio
:checkbox
:reset
:text
:submit
:input
:header
:lang(linguagem)
www.facebook.com/k19treinamentos
391
J Q UERY
392
Seletor
Descrio
:animated
:root
:selected
:checked
:focus
:target
Exerccios de Fixao
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-jquery-fixacao8.zip
392
www.k19.com.br
393
9
J Q UERY
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-jquery-fixacao9.zip
10
Efeitos e Animaes
Efeito
Descrio
fadeIn
fadeOut
fadeToggle
fadeTo(opacidade)
hide
Esconde os elementos.
http://api.jquery.com/hide
www.facebook.com/k19treinamentos
393
J Q UERY
394
Efeito
Descrio
show
Exibe os elementos.
http://api.jquery.com/show
toggle
Esconde os elementos que esto sendo exibidos e exibe os elementos que esto escondidos.
http://api.jquery.com/toggle
slideDown
slideUp
slideToggle
animate
Durao
Podemos definir a durao dos efeitos ou animaes em milissegundos. No exemplo abaixo, o
tempo de execuo do efeito fadeOut foi definido como 1000 milissegundos.
1 $( " a " ) . click ( function () {
2
$( this ) . fadeOut (1000) ;
3 }) ;
Callback
Podemos definir uma funo para ser executada ao trmino da execuo dos efeitos ou das animaes. No exemplo abaixo, uma funo que exibe a mensagem terminou o fadeOut foi associada
ao trmino do efeito fadeOut.
1 $( " a " ) . click ( function () {
2
$( this ) . fadeOut (1000 , function () {
3
console . log ( " terminou o fadeOut " ) ;
4
}) ;
5 }) ;
Exerccios de Fixao
11
394
www.k19.com.br
395
J Q UERY
11
height : 100 px ;
12
background - color : yellow ;
13
border : 1 px solid black ;
14
}
15
</ style >
16
</ head >
17
< body >
18
< button id = " fadeIn " > fadeIn </ button >
19
< button id = " fadeOut " > fadeOut </ button >
20
< button id = " fadeToggle " > fadeToggle </ button >
21
< button id = " fadeTo1 " > fadeTo 0.5 </ button >
22
< button id = " fadeTo2 " > fadeTo 1.0 </ button >
23
< button id = " hide " > hide </ button >
24
< button id = " show " > show </ button >
25
< button id = " toggle " > toggle </ button >
26
< button id = " slideDown " > slideDown </ button >
27
< button id = " slideUp " > slideUp </ button >
28
< button id = " slideToggle " > slideToggle </ button >
29
< button id = " animate1 " > animate1 </ button >
30
< button id = " animate2 " > animate2 </ button >
31
< div id = " div " > </ div >
32
</ body >
33 </ html >
Cdigo HTML 5.9: efeitos.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-jquery-fixacao11.zip
12
www.facebook.com/k19treinamentos
395
J Q UERY
396
38
$( " # toggle " ) . click ( function () {
39
$( " # div " ) . toggle () ;
40
}) ;
41
42
/* slideDown */
43
$( " # slideDown " ) . click ( function () {
44
$( " # div " ) . slideDown () ;
45
}) ;
46
47
/* slideUp */
48
$( " # slideUp " ) . click ( function () {
49
$( " # div " ) . slideUp () ;
50
}) ;
51
52
/* slideToggle */
53
$( " # slideToggle " ) . click ( function () {
54
$( " # div " ) . slideToggle () ;
55
}) ;
56
57
/* animate1 */
58
$( " # animate1 " ) . click ( function () {
59
$( " # div " ) . animate ({
60
" border - width " : " 5 px " ,
61
" margin - top " : " 100 px "
62
}) ;
63
}) ;
64
65
/* animate2 */
66
$( " # animate2 " ) . click ( function () {
67
$( " # div " ) . animate ({
68
" border - width " : " 1 px " ,
69
" margin - top " : " 0 "
70
}) ;
71
}) ;
72 }) ;
Cdigo Javascript 5.66: efeitos.js
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-jquery-fixacao12.zip
13
Manipulao
Mtodo
Descrio
addClass
396
www.k19.com.br
397
J Q UERY
Mtodo
Descrio
removeClass
toggleClass
hasClass
after
$ ( " h1 " ) . after ( " <p > subttulo </ p > " )
http://api.jquery.com/after
before
insertAfter
insertBefore
www.facebook.com/k19treinamentos
397
J Q UERY
398
Mtodo
Descrio
append
$ ( " p " ) . append ( " <em >( fonte K19 ) </ em > " )
http://api.jquery.com/append
prepend
$ ( " p " ) . prepend ( " <em >( fonte K19 ) </ em > " )
http://api.jquery.com/prepend
appendTo
$ ( " <em >( fonte K19 ) </ em > " ) . appendTo ( " p " )
http://api.jquery.com/appendTo
prependTo
$ ( " <em >( fonte K19 ) </ em > " ) . prependTo ( " p " )
http://api.jquery.com/prependTo
attr
Esse mtodo pode ser utilizado para dois propsitos. O primeiro recuperar os valores dos
atributos do primeiro elemento selecionado. O segundo alterar os valores dos atributos de
todos os elementos selecionados.
Exemplo: recuperando o id do primeiro div.
prop
Esse mtodo pode ser utilizado para dois propsitos. O primeiro recuperar os valores
das propriedades do primeiro elemento selecionado. O segundo alterar os valores das
propriedades de todos os elementos selecionados.
Exemplo: recuperando o valor da propriedade checked do primeiro input com type=checkbox.
var checked = $ ( " input [ checkbox ] " ) . prop ( " checked " ) ;
398
www.k19.com.br
399
J Q UERY
Mtodo
Descrio
css
Esse mtodo pode ser utilizado para dois propsitos. O primeiro recuperar os valores das
propriedades CSS do primeiro elemento selecionado. O segundo alterar os valores das
propriedades CSS de todos os elementos selecionados.
Exemplo: recuperando a propriedade CSS color do primeiro div.
removeAttr
removeProp
clone
detach
empty
remove
www.facebook.com/k19treinamentos
399
J Q UERY
400
Mtodo
Descrio
replaceAll
$ ( " <p > K19 </ p > " ) . replaceAll ( " p " ) ;
http://api.jquery.com/replaceAll
replaceWith
$ ( " p " ) . replaceWith ( " <p > K19 </ p > " ) ;
http://api.jquery.com/replaceWith
height
Esse mtodo pode ser utilizado para dois propsitos. O primeiro recuperar a altura do
primeiro elemento selecionado. O segundo alterar a altura de todos os elementos selecionados.
Exemplo: recuperando a altura do primeiro div.
width
Esse mtodo pode ser utilizado para dois propsitos. O primeiro recuperar a largura do
primeiro elemento selecionado. O segundo alterar a largura de todos os elementos selecionados.
Exemplo: recuperando a largura do primeiro div.
innerHeight
innerWidth
Recupera o innerWidth do primeiro elemento selecionado. O innerWidth a soma da largura, margem interna da esquerda e margem interna da direita.
Exemplo: recuperando o innerWidth do primeiro div.
400
www.k19.com.br
401
J Q UERY
Mtodo
Descrio
outerHeight
outerWidth
html
Esse mtodo pode ser utilizado para dois propsitos. O primeiro recuperar o contedo
HTML do primeiro elemento selecionado. O segundo alterar o contedo HTML de todos
os elementos selecionados.
Exemplo: recuperando o contedo HTML do primeiro div.
$ ( " div " ) . html ( " <h1 > K19 < h /1 > <p > Cursos da K19 . </p > " ) ;
http://api.jquery.com/html
text
Esse mtodo pode ser utilizado para dois propsitos. O primeiro recuperar o o texto contido no corpo do primeiro elemento selecionado. O segundo alterar o texto contido no
corpo de todos os elementos selecionados.
Exemplo: recuperando o texto contido no corpo do primeiro div.
val
Esse mtodo utilizado para recuperar o valor de elementos como input, textarea e select.
Ele considera o primeiro elemento selecionado.
Exemplo: recuperador o valor do primeiro input.
www.facebook.com/k19treinamentos
401
J Q UERY
402
Mtodo
Descrio
wrap
Adiciona na rvore de elementos uma estrutura envolvendo cada um dos elementos selecionados.
Exemplo: Envolvendo cada pargrafo com a estrutura <section><div></div></section>.
$ ( " p " ) . wrap ( " < section > < div > </ div > </ section > " ) ;
http://api.jquery.com/wrap
wrapAll
Adiciona na rvore de elementos uma estrutura envolvendo o conjunto dos elementos selecionados.
Exemplo: Envolvendo os pargrafos com a estrutura <section><div></div></section>.
$ ( " p " ) . wrapAll ( " < section > < div > </ div > </ section > " ) ;
http://api.jquery.com/wrapAll
wrapInner
unwrap
offset
Esse mtodo pode ser utilizado para dois propsitos. O primeiro recuperar a posio do
primeiro elemento selecionado. O segundo alterar a posio de todos os elementos selecionados. Nessa alterao, os elementos com position: static passam para position: relative.
Exemplo: recuperando o offset do primeiro div.
position
402
www.k19.com.br
403
J Q UERY
Mtodo
Descrio
scrollLeft
Esse mtodo pode ser utilizado para dois propsitos. O primeiro recuperar a posio da
barra de rolagem horizontal do primeiro elemento selecionado. O segundo alterar a posio da barra de rolagem horizontal de todos os elementos selecionados.
Exemplo: recuperando a posio da barra de rolagem horizontal do primeiro div.
scrollTop
Esse mtodo pode ser utilizado para dois propsitos. O primeiro recuperar a posio da
barra de rolagem vertical do primeiro elemento selecionado. O segundo alterar a posio
da barra de rolagem vertical de todos os elementos selecionados.
Exemplo: recuperando a posio da barra de rolagem vertical do primeiro div.
Exerccios de Fixao
14
www.facebook.com/k19treinamentos
403
J Q UERY
404
29
< button id = " height " > height </ button >
30
< button id = " width " > width </ button >
31
< button id = " innerHeight " > innerHeight </ button >
32
< button id = " innerWidth " > innerWidth </ button >
33
< button id = " outerHeight " > outerHeight </ button >
34
< button id = " outerWidth " > outerWidth </ button >
35
36
< div id = " div1 " >
37
< ul >
38
< li > Jonas Hirata </ li >
39
< li > Marcelo Martins </ li >
40
< li > Rafael Cosentino </ li >
41
</ ul >
42
</ div >
43
</ body >
44 </ html >
Cdigo HTML 5.10: manipulacao.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-jquery-fixacao14.zip
15
404
www.k19.com.br
405
J Q UERY
45
}) ;
46
47
$( " # append " ) . click ( function () {
48
$( " # p1 " ) . remove () ;
49
$( " # div1 " ) . append ( " <p id = p1 > append <p > " ) ;
50
}) ;
51
52
$( " # prepend " ) . click ( function () {
53
$( " # p1 " ) . remove () ;
54
$( " # div1 " ) . prepend ( " <p id = p1 > prepend <p > " ) ;
55
}) ;
56
57
$( " # appendTo " ) . click ( function () {
58
$( " # p1 " ) . remove () ;
59
$( " <p id = p1 > appendTo <p > " ) . appendTo ( " # div1 " ) ;
60
}) ;
61
62
$( " # prependTo " ) . click ( function () {
63
$( " # p1 " ) . remove () ;
64
$( " <p id = p1 > prependTo <p > " ) . prependTo ( " # div1 " ) ;
65
}) ;
66
67
$( " # height " ) . click ( function () {
68
$( " # p1 " ) . remove () ;
69
var height = $( " # div1 " ) . height () ;
70
$( " # div1 " ) . after ( " <p id = p1 > height : " + height + " <p > " ) ;
71
}) ;
72
73
$( " # width " ) . click ( function () {
74
$( " # p1 " ) . remove () ;
75
var width = $( " # div1 " ) . width () ;
76
$( " # div1 " ) . after ( " <p id = p1 > width : " + width + " <p > " ) ;
77
}) ;
78
79
$( " # innerHeight " ) . click ( function () {
80
$( " # p1 " ) . remove () ;
81
var innerHeight = $( " # div1 " ) . innerHeight () ;
82
$( " # div1 " ) . after ( " <p id = p1 > innerHeight : " + innerHeight + " <p > " ) ;
83
}) ;
84
85
$( " # innerWidth " ) . click ( function () {
86
$( " # p1 " ) . remove () ;
87
var innerWidth = $( " # div1 " ) . innerWidth () ;
88
$( " # div1 " ) . after ( " <p id = p1 > innerWidth : " + innerWidth + " <p > " ) ;
89
}) ;
90
91
$( " # outerHeight " ) . click ( function () {
92
$( " # p1 " ) . remove () ;
93
var outerHeight = $( " # div1 " ) . outerHeight () ;
94
$( " # div1 " ) . after ( " <p id = p1 > outerHeight : " + outerHeight + " <p > " ) ;
95
}) ;
96
97
$( " # outerWidth " ) . click ( function () {
98
$( " # p1 " ) . remove () ;
99
var outerWidth = $( " # div1 " ) . outerWidth () ;
100
$( " # div1 " ) . after ( " <p id = p1 > outerWidth : " + outerWidth + " <p > " ) ;
101
}) ;
102 }) ;
Cdigo Javascript 5.119: manipulacao.js
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-jquery-fixacao15.zip
16
405
J Q UERY
406
Mais mtodos
Mtodo
Descrio
add
parent
parents
siblings
children
Exemplo: recuperando os filhos dos divs e dos spans que possuam a classe destaque.
find
Exemplo: recuperando os descendentes dos divs e dos spans que possuam a classe destaque.
406
www.k19.com.br
407
J Q UERY
Mtodo
Descrio
each
map
Permite executar uma funo para cada elemento de um conjunto. Essa funo pode
devolver um valor. Esses valores sero devolvidos em um objeto jQuery.
Exemplo: recupera a largura dos divs.
filter
has
not
first
last
eq
www.facebook.com/k19treinamentos
407
J Q UERY
408
Mtodo
Descrio
slice
next
nextAll
prev
prevAll
AJAX
A forma bsica de interao entre os usurios e as pginas web limitada. Quando o usurio
clica em um link ou em um boto de uma pgina web, uma requisio HTTP enviada ao servidor
correspondente. Quando chegar no servidor, essa requisio ser processada. No trmino desse
processamento, o servidor enviar uma resposta HTTP contendo uma pgina web para a mquina
do usurio. Ao receber essa resposta, o navegador do usurio carregar a pgina inteira.
Nessa abordagem, muitas vezes, ocorre um desperdcio de tempo, pois, na maior parte dos casos, no seria necessrio carregar a pgina inteira e sim pequenos pedaos dela. Mesmo assim, o
navegador sempre carregar todo o contedo das pginas web.
Alm disso, h outro problema nessa abordagem, o usurio no pode interagir com a pgina
web durante o envio da requisio HTTP; processamento no servidor; envio da resposta HTTP e
carregamento do pgina.
Para aumentar a interatividade entre os usurios e as pginas web, podemos utilizar a forma
de interao conhecida como AJAX (Asynchronous Javascript and XML). Nessa outra abordagem,
os navegadores podem atualizar pedaos de uma pgina web sem ter carreg-la completamente.
408
www.k19.com.br
409
J Q UERY
Alm disso, com AJAX, os usurios podem interagir com as pginas web durante o envio da requisio
HTTP; processamento no servidor; envio da resposta HTTP e carregamento parcial das pginas web.
Utilizaremos os recursos da biblioteca jQuery para implementar a interao entre os usurios e
as pginas web com AJAX.
load
Podemos obter contedo de Web Server atravs do mtodo load. Esse mtodo realiza requisies
HTTP do tipo GET com AJAX. No exemplo abaixo, o contedo do documento HTML k19.html obtido
do servidor e inserido no corpo do elemento com id="conteudo".
$( " # conteudo " ) . load ( " k19 . html " ) ;
get
Podemos realizar requisies HTTP do tipo GET com AJAX atravs do mtodo get. Esse mtodo
recebe como parmetro a URL correspondente requisio que desejamos realizar. No exemplo
abaixo, a requisio foi realizada para URL k19.php mas o resultado foi ignorado.
$. get ( " k19 . php " ) ;
Para recuperar o resultado da requisio devemos utilizar o mtodo done. Devemos passar como
argumento para esse mtodo a funo que tratar o resultado. Essa funo receber o resultado
como parmetro. Observe, no exemplo abaixo, que o resultado exibido no console do navegador.
var get = $. get ( " k19 . php " ) ;
get . done ( function ( resultado ) {
console . log ( resultado ) ;
}) ;
k19.php?nome=Rafael&empresa=K19
post
Podemos realizar requisies HTTP do tipo POST com AJAX atravs do mtodo post. Esse mtodo funciona de forma semelhante ao mtodo get. Veja alguns exemplos.
$. post ( " k19 . php " ) ;
www.facebook.com/k19treinamentos
409
J Q UERY
410
var dados = {
nome : " Rafael " ,
empresa : " K19 "
};
var post = $. post ( " k19 . php " , dados ) ;
post . done ( function ( resultado ) {
console . log ( resultado ) ;
}) ;
k19.php?nome=Rafael&empresa=K19
Exerccios de Fixao
17
1
2
3
4
5
<? php
$soma = $_REQUEST [ " x " ] + $_REQUEST [ " y " ];
echo $soma ;
?>
Cdigo HTML 5.11: ajax.php
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-jquery-fixacao17.zip
18
410
www.k19.com.br
411
J Q UERY
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-jquery-fixacao18.zip
19
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-jquery-fixacao19.zip
20
Exerccios Complementares
www.facebook.com/k19treinamentos
411
J Q UERY
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
412
# saida {
margin : 0 px auto ;
width : 800 px ;
height : 200 px ;
overflow : auto ;
}
# content {
width : 800 px ;
margin : 250 px auto 0 px ;
}
pre {
padding : 10 px ;
border - radius : 15 px ;
background - color : # eeeeee ;
}
# div1 , # div2 {
background - color : yellow ;
width : 200 px ;
height : 200 px ;
}
# div3 {
background - color : blue ;
width : 50 px ;
height : 50 px ;
margin : auto ;
}
</ style >
</ head >
< body id = " body " >
< div id = " header " >
< div id = " saida " > </ div >
</ div >
< div id = " content " >
< h1 > ready </ h1 >
< pre id = " ready - on " >
$( document ) . ready ( function () {
var saida = $( " # saida " ) ;
saida . append ( " evento ready disparado & lt ; br & gt ; " ) ;
}) ;
</ pre >
< h1 > resize </ h1 >
< button id = " resize " > ON </ button >
< pre >
/* ON */
$( window ) . resize ( function () {
var largura = $( window ) . width () ;
var altura = $( window ) . height () ;
saida . append ( " resize : ( " + largura + " , " + altura + " ) " ) ;
saida . append ( " & lt ; br & gt ; " ) ;
saida . scrollTop ( saida . prop ( " scrollHeight " ) ) ;
}) ;
/* OFF */
$( window ) . off ( " resize " ) ;
</ pre >
< h1 > scroll </ h1 >
< button id = " scroll " > ON </ button >
< pre >
/* ON */
$( window ) . scroll ( function () {
var x = $( window ) . scrollLeft () ;
var y = $( window ) . scrollTop () ;
saida . append ( " scroll : ( " + x + " , " + y + " ) " ) ;
412
www.k19.com.br
413
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
J Q UERY
www.facebook.com/k19treinamentos
413
J Q UERY
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
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
414
saida . append ( type + " : ( " + event . which + " ) " ) ;
saida . append ( " & lt ; br & gt ; " ) ;
saida . scrollTop ( saida . prop ( " scrollHeight " ) ) ;
}
);
/* OFF */
$( " # input4 " ) . off ( " keydown keypress keyup " ) ;
</ pre >
< label > Teste : </ label >
< input id = " input4 " >
< h1 > click , dblclick , mousedown , mouseup , mouseenter ,
mouseleave , hover , mouseover e mouseout </ h1 >
< button id = " mouse " > ON </ button >
< pre >
/* ON */
$( " # div1 " ) . on ( " click dblclick mousedown mouseup " +
" mouseenter mouseleave hover mouseover mouseout " ,
function ( event ) {
var type = event . type ;
saida . append ( type + " : ( " + event . which + " ) " ) ;
saida . append ( " & lt ; br & gt ; " ) ;
saida . scrollTop ( saida . prop ( " scrollHeight " ) ) ;
}
);
/* OFF */
$( " # div1 " ) . off ( " click dblclick mousedown mouseup " +
" mouseenter mouseleave hover mouseover mouseout " ) ;
</ pre >
< div id = " div1 " > < div id = " div3 " > </ div > </ div >
< h1 > mousemove </ h1 >
< button id = " mousemove " > ON </ button >
< pre >
/* ON */
$( " # div2 " ) . mousemove ( function ( event ) {
var x = event . pageX ;
var y = event . pageY ;
var type = event . type ;
saida . append ( type + " : ( " + x + " , " + y + " ) " ) ;
saida . append ( " & lt ; br & gt ; " ) ;
saida . scrollTop ( saida . prop ( " scrollHeight " ) ) ;
}) ;
/* OFF */
$( " # div2 " ) . off ( " mousemove " ) ;
</ pre >
< div id = " div2 " > </ div >
</ div >
</ body >
</ html >
Cdigo HTML 5.13: jquery-complementar.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-jquery-complementar1.zip
1 /* ready */
2 $( document ) . ready ( function () {
3
var saida = $( " # saida " ) ;
4
saida . append ( " evento ready disparado < br > " ) ;
5
414
www.k19.com.br
415
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
72
73
74
75
J Q UERY
/* resize */
var resize = false ;
$( " # resize " ) . click ( function () {
if ( resize ) {
$( window ) . off ( " resize " ) ;
$( " # resize " ) . html ( " ON " ) ;
resize = false ;
} else {
$( window ) . resize ( function () {
var largura = $( window ) . width () ;
var altura = $( window ) . height () ;
saida . append ( " resize : ( " + largura + " , " + altura + " ) " ) ;
saida . append ( " <br > " ) ;
saida . scrollTop ( saida . prop ( " scrollHeight " ) ) ;
}) ;
$( " # resize " ) . html ( " OFF " ) ;
resize = true ;
}
}) ;
/* scroll */
var scroll = false ;
$( " # scroll " ) . click ( function () {
if ( scroll ) {
$( window ) . off ( " scroll " ) ;
$( " # scroll " ) . html ( " ON " ) ;
scroll = false ;
} else {
$( window ) . scroll ( function () {
var x = $( window ) . scrollLeft () ;
var y = $( window ) . scrollTop () ;
saida . append ( " scroll : ( " + x + " , " + y + " ) " ) ;
saida . append ( " <br > " ) ;
saida . scrollTop ( saida . prop ( " scrollHeight " ) ) ;
}) ;
$( " # scroll " ) . html ( " OFF " ) ;
scroll = true ;
}
}) ;
/* focus focusin blur focusout */
var foco = false ;
$( " # foco " ) . click ( function () {
if ( foco ) {
$( " * " ) . off ( " focus focusin blur focusout " ) ;
$( " # foco " ) . html ( " ON " ) ;
foco = false ;
} else {
$( " * " ) . on ( " focus focusin blur focusout " ,
function ( event ) {
var tag = this . tagName ;
var id = this . id ;
var type = event . type ;
saida . append ( type + " ( " + tag + " , # " + id + " ) " ) ;
saida . append ( " <br > " ) ;
saida . scrollTop ( saida . prop ( " scrollHeight " ) ) ;
}
);
$( " # foco " ) . html ( " OFF " ) ;
foco = true ;
}
}) ;
/* select */
var select = false ;
$( " # select " ) . click ( function () {
if ( select ) {
$( " # input2 " ) . off ( " select " ) ;
$( " # select " ) . html ( " ON " ) ;
www.facebook.com/k19treinamentos
415
J Q UERY
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
416
416
select = false ;
} else {
$( " # input2 " ) . select ( function () {
saida . append ( " select : ( " + window . getSelection () + " ) " ) ;
saida . append ( " <br > " ) ;
saida . scrollTop ( saida . prop ( " scrollHeight " ) ) ;
}) ;
$( " # select " ) . html ( " OFF " ) ;
select = true ;
}
}) ;
/* change */
var change = false ;
$( " # change " ) . click ( function () {
if ( change ) {
$( " # input3 " ) . off ( " change " ) ;
$( " # change " ) . html ( " ON " ) ;
change = false ;
} else {
$( " # input3 " ) . change ( function () {
saida . append ( " change : ( " + $( this ) . val () + " ) " ) ;
saida . append ( " <br > " ) ;
saida . scrollTop ( saida . prop ( " scrollHeight " ) ) ;
}) ;
$( " # change " ) . html ( " OFF " ) ;
change = true ;
}
}) ;
/* key */
var key = false ;
$( " # key " ) . click ( function () {
if ( key ) {
$( " # input4 " ) . off ( " keydown keypress keyup " ) ;
$( " # key " ) . html ( " ON " ) ;
key = false ;
} else {
$( " # input4 " ) . on ( " keydown keypress keyup " ,
function ( event ) {
var type = event . type ;
saida . append ( type + " : ( " + event . which + " ) " ) ;
saida . append ( " <br > " ) ;
saida . scrollTop ( saida . prop ( " scrollHeight " ) ) ;
}
);
$( " # key " ) . html ( " OFF " ) ;
key = true ;
}
}) ;
/* mouse */
var mouse = false ;
$( " # mouse " ) . click ( function () {
if ( mouse ) {
$( " # div1 " ) . off ( " click dblclick mousedown mouseup " +
" mouseenter mouseleave hover mouseover mouseout " ) ;
$( " # mouse " ) . html ( " ON " ) ;
mouse = false ;
} else {
$( " # div1 " ) . on ( " click dblclick mousedown mouseup " +
" mouseenter mouseleave hover mouseover mouseout " ,
function ( event ) {
var x = event . pageX ;
var y = event . pageY ;
var type = event . type ;
saida . append ( type + " : ( " + x + " , " + y + " ) " ) ;
saida . append ( " <br > " ) ;
www.k19.com.br
417
J Q UERY
146
saida . scrollTop ( saida . prop ( " scrollHeight " ) ) ;
147
}
148
);
149
$( " # mouse " ) . html ( " OFF " ) ;
150
mouse = true ;
151
}
152
}) ;
153
154
/* mousemove */
155
var mousemove = false ;
156
$( " # mousemove " ) . click ( function () {
157
if ( mousemove ) {
158
$( " # div2 " ) . off ( " mousemove " ) ;
159
$( " # mousemove " ) . html ( " ON " ) ;
160
mousemove = false ;
161
} else {
162
$( " # div2 " ) . mousemove ( function ( event ) {
163
var x = event . pageX ;
164
var y = event . pageY ;
165
var type = event . type ;
166
167
saida . append ( type + " : ( " + x + " , " + y + " ) " ) ;
168
saida . append ( " <br > " ) ;
169
saida . scrollTop ( saida . prop ( " scrollHeight " ) ) ;
170
}) ;
171
$( " # mousemove " ) . html ( " OFF " ) ;
172
mousemove = true ;
173
}
174
}) ;
175 }) ;
Cdigo Javascript 5.149: jquery-complementar.js
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-jquery-complementar2.zip
Resumo do Captulo
417
J Q UERY
5
418
A biblioteca jQuery suporta todos os seletores do CSS. Alm disso, ela oferece alguns seletores
que no existem no CSS.
Podemos determinar uma funo que deve ser executada ao trmino de um efeito ou anima-
o.
A biblioteca jQuery oferece muitos recursos para a manipulao dos elementos HTML.
Prova
a) Geralmente, a utilizao de CDNs aumenta a quantidade dados transmitidos entre os navegadores e os Web Servers.
b) Geralmente, a utilizao de CDNs diminui a disponibilidade do contedo.
c) Geralmente, a utilizao de CDNs aumenta a latncia na transmisso de dados para os navegadores.
d) Geralmente, a utilizao de CDNs aumenta a segurana dos sites e das aplicao web.
e) Geralmente, a utilizao de CDNs diminui o tempo de carregamento das pginas web.
418
419
J Q UERY
419
J Q UERY
420
Minha Pontuao
420
Pontuao Mnima:
Pontuao Mxima:
www.k19.com.br
APNDICE
P ROJETO
Para exercitar o contedo visto nesta apostila, implemete uma pgina web semelhante imagem
a seguir.
Smartphone
Desktop
Exerccios de Fixao
www.facebook.com/k19treinamentos
421
P ROJETO
422
Importante
No Windows, utilizando o IIS (Internet Information Services) como Web Server, voc
deve salvar o projeto blog em C:\inetpub\wwwroot. Lembre-se que necessrio instalar o IIS conforme vimos anteriormente.
Importante
No Ubuntu, utilizando o Apache HTTP Server como Web Server, voc deve salvar o
projeto blog em /home/<USUARIO>/public_html. Lembre-se que necessrio instalar e configurar o Apache HTTP Server como vimos anteriormente.
422
www.k19.com.br
423
P ROJETO
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-projeto-fixacao1.zip
423
P ROJETO
424
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-projeto-fixacao2.zip
424
www.k19.com.br
425
3
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
P ROJETO
No projeto blog, crie um arquivo chamado principal.css em uma pasta chamada css.
/* Declarando as fontes que sero utilizadas na pgina . */
@font - face {
font - family : Roboto ;
src : url ( Roboto - Regular - webfont . eot ) ;
src : url ( Roboto - Regular - webfont . eot ?# iefix ) format ( embedded - opentype ) ,
url ( Roboto - Regular - webfont . woff ) format ( woff ) ,
url ( Roboto - Regular - webfont . ttf ) format ( truetype ) ,
url ( Roboto - Regular - webfont . svg # RobotoRegular ) format ( svg ) ;
font - weight : normal ;
font - style : normal ;
}
@font - face {
font - family : Roboto ;
src : url ( Roboto - Italic - webfont . eot ) ;
src : url ( Roboto - Italic - webfont . eot ?# iefix ) format ( embedded - opentype ) ,
url ( Roboto - Italic - webfont . woff ) format ( woff ) ,
url ( Roboto - Italic - webfont . ttf ) format ( truetype ) ,
url ( Roboto - Italic - webfont . svg # RobotoItalic ) format ( svg ) ;
font - weight : normal ;
font - style : italic ;
}
@font - face {
font - family : Roboto ;
src : url ( Roboto - Bold - webfont . eot ) ;
src : url ( Roboto - Bold - webfont . eot ?# iefix ) format ( embedded - opentype ) ,
url ( Roboto - Bold - webfont . woff ) format ( woff ) ,
url ( Roboto - Bold - webfont . ttf ) format ( truetype ) ,
url ( Roboto - Bold - webfont . svg # RobotoBold ) format ( svg ) ;
font - weight : bold ;
font - style : normal ;
}
@font - face {
font - family : Roboto ;
src : url ( Roboto - BoldItalic - webfont . eot ) ;
src : url ( Roboto - BoldItalic - webfont . eot ?# iefix ) format ( embedded - opentype ) ,
url ( Roboto - BoldItalic - webfont . woff ) format ( woff ) ,
url ( Roboto - BoldItalic - webfont . ttf ) format ( truetype ) ,
url ( Roboto - BoldItalic - webfont . svg # RobotoBoldItalic ) format ( svg ) ;
font - weight : bold ;
font - style : italic ;
}
@font - face {
font - family : Roboto ;
src : url ( Roboto - Thin - webfont . eot ) ;
src : url ( Roboto - Thin - webfont . eot ?# iefix ) format ( embedded - opentype ) ,
url ( Roboto - Thin - webfont . woff ) format ( woff ) ,
url ( Roboto - Thin - webfont . ttf ) format ( truetype ) ,
url ( Roboto - Thin - webfont . svg # RobotoThin ) format ( svg ) ;
font - weight : 200;
font - style : normal ;
}
@font - face {
font - family : Roboto ;
src : url ( Roboto - ThinItalic - webfont . eot ) ;
src : url ( Roboto - ThinItalic - webfont . eot ?# iefix ) format ( embedded - opentype ) ,
url ( Roboto - ThinItalic - webfont . woff ) format ( woff ) ,
url ( Roboto - ThinItalic - webfont . ttf ) format ( truetype ) ,
url ( Roboto - ThinItalic - webfont . svg # RobotoThinItalic ) format ( svg ) ;
font - weight : 200;
font - style : italic ;
}
@font - face {
www.facebook.com/k19treinamentos
425
P ROJETO
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
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
426
426
www.k19.com.br
427
P ROJETO
139
width : 70%;
140
float : left ;
141
}
142
143
aside {
144
width : 28%;
145
float : left ;
146
margin : 0 0 0 2%;
147
}
148
149
. article - comments form ,
150
. article - comments article {
151
display : block ;
152
}
153
154
# main - header nav {
155
display : inline - block ;
156
vertical - align : middle ;
157
}
158
159
# main - header nav input : first - child {
160
display : none ;
161
}
162
163
# main - header nav ul ,
164
# main - header nav li {
165
display : inherit ;
166
vertical - align : inherit ;
167
}
168
169
# main - header nav ul {
170
margin : 0 0 0 4 em ;
171
}
172
173
# main - header nav li {
174
background : white ;
175
border - radius : 0.3 em ;
176
padding : 0.3 em 0.5 em ;
177
font - size : 0.8 em ;
178
margin : 0 0.5 em ;
179
color : black ;
180
}
181
182
# main - header nav li a {
183
color : inherit ;
184
text - decoration : none ;
185
}
186
187
# main - header nav li : hover {
188
background : #38 c3f2 ;
189
color : white ;
190
}
191
192
. article - text figure {
193
margin - bottom : 1 em ;
194
}
195
196
. article - text figure img {
197
width : 100%;
198
}
199
200
. article - text figure figcaption {
201
font - size : 0.5 em ;
202
font - style : italic ;
203
text - align : center ;
204
}
205 }
206
207 @media ( min - width : 480 px ) {
208
body {
www.facebook.com/k19treinamentos
427
P ROJETO
428
209
font - size :1.5 rem ;
210
}
211
212
. show - comments {
213
display : none ;
214
}
215 }
216
217 @media ( max - width : 640 px ) {
218
# main - header nav {
219
position : absolute ;
220
top : 1 em ;
221
right : 0.5 em ;
222
text - align : right ;
223
}
224
225
# main - header nav input : first - child {
226
background : white ;
227
border - radius : 0.3 em ;
228
border : none ;
229
padding : 0.3 em 0.5 em ;
230
font - size : 0.8 em ;
231
margin : 0 0 0.1 em 0;
232
cursor : pointer ;
233
}
234
235
# main - header nav input : first - child : hover {
236
color : #38 c3f2 ;
237
}
238
239
# main - header nav ul {
240
display : none ;
241
border - radius : 0.3 em ;
242
background : white ;
243
list - style - type : none ;
244
padding : 0.6 em ;
245
box - shadow : 3 px 3 px 10 px rgba (0 , 0 , 0 , 0.8) ;
246
}
247
248
# main - header nav li {
249
text - align : left ;
250
padding : 0.3 em ;
251
color : black ;
252
}
253
254
# main - header nav li a {
255
color : inherit ;
256
text - decoration : none ;
257
}
258
259
# main - header nav li : hover {
260
color : #38 c3f2 ;
261
}
262
263
. article - text figure {
264
float : left ;
265
margin : 0 0.6 em 0.6 em 0;
266
width : 5 em ;
267
}
268
269
. article - text figure img {
270
width : 100%;
271
}
272
273
. article - text figure figcaption {
274
font - size : 0.7 em ;
275
font - style : italic ;
276
text - align : center ;
277
}
278 }
428
www.k19.com.br
429
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
P ROJETO
# main - wrapper {
max - width : 980 px ;
width : 100%;
margin : 0 auto ;
}
# main - header {
position : relative ;
background : black ;
padding : 0.8 em ;
}
# main - header h1 {
color : white ;
font - size : 1.5 em ;
display : inline - block ;
vertical - align : middle ;
}
article header {
background : #38 c3f2 ;
color : white ;
padding : 0.8 em ;
}
article header h1 {
font - size : 1.2 em ;
}
article header h2 {
font - size : 0.8 em ;
font - weight : normal ;
}
. article - text {
padding : 0.8 em ;
}
. article - text p {
font - size : 0.8 em ;
margin - bottom : 0.8 em ;
}
# archive - links header {
background : #888;
color : white ;
padding : 0.8 em ;
}
# archive - links header h1 {
font - size : 1 em ;
}
# archive - links ul {
padding : 0.8 em 0 0.8 em 1.6 em ;
color : #888;
font - size : 0.8 em ;
}
# archive - links li {
padding : 0.2 em 0;
}
# archive - links li a {
color : inherit ;
text - decoration : none ;
}
# archive - links li a : hover {
www.facebook.com/k19treinamentos
429
P ROJETO
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
430
430
www.k19.com.br
431
419
420
421
422
423
424
425
426
P ROJETO
footer {
text - align : center ;
clear : left ;
}
footer small {
font - size : 0.5 em ;
}
Cdigo CSS A.1: principal.css
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-projeto-fixacao3.zip
www.facebook.com/k19treinamentos
431
P ROJETO
432
53
</ p >
54
</ article >
55
</ div >
56
</ article >
57 <? php endfor ; ? >
Cdigo HTML A.2: servico.php
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-projeto-fixacao4.zip
No projeto blog, crie um arquivo chamado principal.js em uma pasta chamada js.
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
54
55
var scrollTimeout = 0;
var isLoadingArticles = false ;
$( document ) . ready ( function () {
$( # articles - container ) . on ( click , . show - comments , function ( e ) {
$( this ) . parent () . find ( form , article ) . slideDown () ;
$( this ) . hide () ;
}) ;
// Trata o evento de clique no boto de menu adicionando uma classe
// ao mesmo para indicar que o mesmo est expandido .
$( # main - menu - btn ) . click ( function ( e ) {
e . stopPropagation () ;
$( this ) . parent () . find ( ul ) . addClass ( expanded ) . slideDown () ;
}) ;
// Trata o evento de clique em qualquer rea da pgina para contrair e
// remover a classe expanded do menu principal .
$( html ) . click ( function ( e ) {
$( # main - header ul . expanded ) . removeClass ( expanded ) . slideUp (400 , function () {
$( this ) . removeAttr ( style ) ;
}) ;
}) ;
$( window ) . scroll ( function () {
// Utilizando um timeout para evitar chamadas excessivas
// funo afterScroll () .
clearTimeout ( scrollTimeout ) ;
scrollTimeout = setTimeout ( afterScroll , 500) ;
}) ;
// Carregando os artigos assim que a pgina for carregada .
loadArticles () ;
}) ;
function afterScroll () {
if (! isLoadingArticles && $( # lazy - load - point ) . isOnScreen () ) {
loadArticles () ;
}
}
function loadArticles () {
$. ajax ({
url : servico . php ,
dataType : html ,
beforeSend : function ( jqXHR , settings ) {
isLoadingArticles = true ;
432
www.k19.com.br
433
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
96
P ROJETO
setTimeout ( function () {
isLoadingArticles = false ;
// Oculta o GIF animado que indica o carregamento do contedo .
$( # lazy - load - point ) . removeClass ( loading ) ;
} , 1000) ;
},
success : function ( data , textStatus , jqXHR ) {
// O uso do timeout neste ponto desnecessrio . Foi utilizado aqui
// para dar tempo do GIF animado ser visualizado em um servidor
// local .
setTimeout ( function () {
$( # articles - container ) . prepend ( data ) ;
} , 1000) ;
},
error : function ( jqXHR , textStatus , errorThrown ) {
alert ( errorThrown ) ;
}
}) ;
}
// Extendendo o jQuery com o mtodo isOnScreen que verifica se um
// elemento est na regio visvel da pgina .
$. fn . isOnScreen = function () {
var win = $( window ) ;
var viewport = {
top : win . scrollTop () ,
left : win . scrollLeft ()
};
viewport . right = viewport . left + win . width () ;
viewport . bottom = viewport . top + win . height () ;
var bounds = this . offset () ;
bounds . right = bounds . left + this . outerWidth () ;
bounds . bottom = bounds . top + this . outerHeight () ;
return (!( viewport . right < bounds . left ||
viewport . left > bounds . right ||
viewport . bottom < bounds . top ||
viewport . top > bounds . bottom ) ) ;
};
Cdigo Javascript A.1: principal.js
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-projeto-fixacao5.zip
6
Copie o arquivo k02-projeto.zip da pasta K19-Arquivos para a sua rea de trabalho. Descompacte esse arquivo e copie o contedo das pastas css e img para as pastas css e img do projeto blog
respectivamente.
www.facebook.com/k19treinamentos
433
P ROJETO
434
434
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
435
QUIZZES
436
436
www.k19.com.br
APNDICE
R ESPOSTAS
Questo 1.1
d
Questo 1.2
e
Questo 1.3
a
Questo 1.4
c
Questo 1.5
d
Questo 1.6
d
Exerccio Complementar 2.1
www.facebook.com/k19treinamentos
437
R ESPOSTAS
438
12
vestibulum , massa ligula sodales metus , nec hendrerit nunc purus eu
13
mauris .
14
</ p >
15
</ body >
16 </ html >
Cdigo HTML 2.159: pagina-simples.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-complementar1.zip
438
www.k19.com.br
439
R ESPOSTAS
43
Japo . </ p >
44
45
< h5 > Nago </ h5 >
46
<p > De 21 de julho at 23 de julho de 2000 , foi sede do encontro anual do G8 . </ p >
47
48
<p > Fonte : wikipedia . org </ p >
49
</ body >
50 </ html >
Cdigo HTML 2.160: geografia.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-complementar2.zip
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-complementar3.zip
www.facebook.com/k19treinamentos
439
R ESPOSTAS
440
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-complementar4.zip
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
c
d
</ pre >
</ body >
</ html >
a b
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-complementar5.zip
440
www.k19.com.br
441
R ESPOSTAS
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-complementar6.zip
www.facebook.com/k19treinamentos
441
R ESPOSTAS
442
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-complementar7.zip
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-complementar8.zip
442
www.k19.com.br
443
R ESPOSTAS
14
</ body >
15 </ html >
Cdigo HTML 2.167: spfc.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-complementar9.zip
www.facebook.com/k19treinamentos
443
R ESPOSTAS
444
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-complementar10.zip
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-complementar11.zip
444
www.k19.com.br
445
R ESPOSTAS
19
< dt > < dfn > Primeiro pau </ dfn > </ dt >
20
< dd >
21
Trave mais prxima da origem de um cruzamento .
22
</ dd >
23
</ dl >
24
</ body >
25 </ html >
Cdigo HTML 2.170: mais-definicoes.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-complementar12.zip
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-complementar13.zip
www.facebook.com/k19treinamentos
445
R ESPOSTAS
446
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Datas e horas </ title >
6
</ head >
7
< body >
8
< h1 > Datas e horas </ h1 >
9
< ul >
10
< li >
11
O Brasil foi pentacampeo em < time datetime = " 2002 -06 -30 " > 30 de Junho
12
de 2002 </ time >.
13
</ li >
14
< li >
15
Ele no pode esquecer o < time datetime = " 03 -08 " > Dia das mulheres </ time >.
16
</ li >
17
</ ul >
18
</ body >
19 </ html >
Cdigo HTML 2.172: mais-datas.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-complementar14.zip
446
www.k19.com.br
447
R ESPOSTAS
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-complementar15.zip
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-complementar16.zip
www.facebook.com/k19treinamentos
447
R ESPOSTAS
448
14
< li >
15
Coloque o aparelho na horizontal sobre uma superfcie plana .
16
</ li >
17
< li >
18
Conecte o aparelho ao computador utilizando um cabo USB .
19
</ li >
20
< li >
21
Use o CD - ROM para instalao do software .
22
</ li >
23
< li >
24
Conecte o aparelho fonte de energia com um adaptador AC .
25
</ li >
26
< li >
27
Ligue o aparelho e espere o reconhecimento do computador .
28
</ li >
29
</ ol >
30
</ body >
31 </ html >
Cdigo HTML 2.175: manual-k19.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-complementar17.zip
448
www.k19.com.br
449
R ESPOSTAS
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-complementar18.zip
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-complementar19.zip
www.facebook.com/k19treinamentos
449
R ESPOSTAS
450
12
< th > Cidade </ th >
13
< th > Idioma </ th >
14
</ tr >
15
</ thead >
16
< tfoot >
17
< tr >
18
< td colspan = " 3 " > ltima atualizao : 11/2012 </ td >
19
</ tr >
20
</ tfoot >
21
< tbody >
22
< tr >
23
< td rowspan = " 2 " > Amrica do Sul </ td >
24
< td > So Paulo </ td >
25
< td > Portugus </ td >
26
</ tr >
27
< tr >
28
< td > Cidade do Mxico </ td >
29
< td > Espanhol </ td >
30
</ tr >
31
< tr >
32
< td rowspan = " 3 " > sia </ td >
33
< td > Tquio </ td >
34
< td > Japons </ td >
35
</ tr >
36
< tr >
37
< td > Xangai </ td >
38
< td > Mandarim </ td >
39
</ tr >
40
< tr >
41
< td > Nova Dlhi </ td >
42
< td > Hindi </ td >
43
</ tr >
44
< tr >
45
< td > Amrica do Norte </ td >
46
< td > Nova Iorque </ td >
47
< td > Ingls </ td >
48
</ tr >
49
</ tbody >
50
</ table >
51
</ body >
52 </ html >
Cdigo HTML 2.178: mais-tabelas.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-complementar20.zip
450
www.k19.com.br
451
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
72
73
74
75
76
R ESPOSTAS
< body >
< h1 > Cadastro de Currculo </ h1 >
< form action = " parametros . php " method = " post " >
< fieldset >
< legend > Informaes Pessoais </ legend >
< label for = " nome_id " > Nome : </ label >
< input
id = " nome_id "
type = " text "
name = " nome "
placeholder = " Digite o seu nome "
required >
< br >
< label for = " email_id " > Email : </ label >
< input
id = " email_id "
type = " email "
name = " email "
placeholder = " Digite o seu email "
required >
< br >
< label for = " nascimento_id " > Data de Nascimento : </ label >
< input
id = " nascimento_id "
type = " date "
name = " nascimento "
required >
< br >
< label for = " altura_id " > Altura ( m ) : </ label >
< input
id = " altura_id "
type = " number "
name = " altura "
step = " 0.01 "
min = " 0 "
max = " 2 " >
< br >
< label for = " site_id " > Site : </ label >
< input
id = " site_id "
type = " url "
name = " site "
placeholder = " Facebook , Linkedin , Twitter " >
< br >
< label for = " estado_civil_id " > Estado Civil : </ label >
< select id = " estado_civil_id " name = " estado - civil " >
< option value = " -1 " > Selecione </ option >
< option value = " S " > Solteiro </ option >
< option value = " C " > Casado </ option >
< option value = " D " > Divorciado </ option >
< option value = " V " > Vivo </ option >
</ select >
< br >
< label > Sexo : </ label >
< input
id = " masculino_id "
type = " radio "
name = " sexo "
value = " masculino " >
< label for = " masculino_id " > Masculino </ label >
< input
id = " feminino_id "
www.facebook.com/k19treinamentos
451
R ESPOSTAS
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
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
452
452
type = " radio "
name = " sexo "
value = " feminino " >
< label for = " feminino_id " > Feminino </ label >
< br >
</ fieldset >
< fieldset >
< legend > Endereo </ legend >
< label for = " cep_id " > CEP : </ label >
< input
id = " cep_id "
type = " text "
name = " cep "
required >
< br >
< label for = " endereco_id " > Endereo : </ label >
< input
id = " endereco_id "
type = " text "
name = " endereco "
required >
< br >
</ fieldset >
< fieldset >
< legend > Contato </ legend >
< label for = " telefone_id " > Telefone : </ label >
< input
id = " telefone_id "
type = " tel "
name = " telefone " >
< br >
< label for = " celular_id " > Celular : </ label >
< input
id = " celular_id "
type = " tel "
name = " celular " >
< br >
</ fieldset >
< fieldset >
< legend > Conhecimentos </ legend >
< input
id = " html_id "
type = " checkbox "
name = " conhecimentos "
value = " HTML " >
< label for = " html_id " > HTML </ label >
< input
id = " css_id "
type = " checkbox "
name = " conhecimentos "
value = " CSS " >
< label for = " css_id " > CSS </ label >
< input
id = " js_id "
type = " checkbox "
name = " conhecimentos "
value = " JS " >
< label for = " js_id " > JavaScript </ label >
< br >
www.k19.com.br
453
R ESPOSTAS
147
< label for = " mais_conhecimentos_id " > Mais conhecimentos </ label >
148
< textarea
149
id = " mais_conhecimentos_id "
150
rows = " 10 "
151
cols = " 20 "
152
maxlength = " 500 " > Digite os seus conhecimentos </ textarea >
153
</ fieldset >
154
155
< input type = " submit " value = " Enviar " >
156
</ form >
157
</ body >
158 </ html >
Cdigo HTML 2.179: mais-formularios.html
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-complementar21.zip
Questo 2.1
d
Questo 2.2
c
Questo 2.3
e
Questo 2.4
a
Questo 2.5
c
Questo 2.6
b
www.facebook.com/k19treinamentos
453
R ESPOSTAS
454
Questo 2.7
d
Questo 2.8
e
Questo 2.9
e
Questo 2.10
a
Questo 2.11
d
Questo 2.12
c
Questo 2.13
e
Questo 2.14
b
Questo 2.15
a
Questo 3.1
e
Questo 3.2
454
www.k19.com.br
455
R ESPOSTAS
b
Questo 3.3
d
Questo 3.4
c
Questo 3.5
d
Questo 3.6
b
Questo 3.7
a
Questo 3.8
d
Questo 3.9
a
Questo 3.10
d
Questo 3.11
e
Questo 3.12
d
www.facebook.com/k19treinamentos
455
R ESPOSTAS
456
Questo 3.13
d
Questo 3.14
e
Questo 3.15
c
Questo 3.16
e
Questo 3.17
d
Exerccio Complementar 4.1
No projeto javascript, adicione um arquivo chamado exibe-numeros-1-50-2x.html e outro chamado exibe-numeros-1-50-2x.js.
1 <! DOCTYPE html >
2 < html lang = " pt - br " >
3
< head >
4
< meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
5
< title > Exibe os nmeros de 1 at 50 duas vezes </ title >
6
< script type = " text / javascript " src = " exibe - numeros -1 -50 -2 x . js " > </ script >
7
</ head >
8
< body >
9
</ body >
10 </ html >
Cdigo HTML 4.56: exibe-numeros-1-50-2x.html
www.k19.com.br
457
R ESPOSTAS
http://localhost/~<USUARIO>/javascript/public_html/exibe-numeros-1-50-2x.html.
www.facebook.com/k19treinamentos
457
R ESPOSTAS
458
7
</ head >
8
< body >
9
</ body >
10 </ html >
Cdigo HTML 4.58: multiplos-de-tres.html
458
www.k19.com.br
459
R ESPOSTAS
www.facebook.com/k19treinamentos
459
R ESPOSTAS
460
1
2
3
4
5
6
7
var penultimo = 0;
var ultimo = 1;
console . log ( penultimo ) ;
console . log ( ultimo ) ;
for ( var contador = 0; contador < 28; contador ++) {
460
www.k19.com.br
461
R ESPOSTAS
8
9
10
11
12
13 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
i
=
=
=
www.facebook.com/k19treinamentos
461
R ESPOSTAS
462
24 }
Cdigo Javascript 4.143: embaralha.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
462
www.k19.com.br
463
R ESPOSTAS
Questo 4.1
e
Questo 4.2
a
Questo 4.3
e
Questo 4.4
c
Questo 4.5
a
Questo 4.6
c
Questo 4.7
b
Questo 4.8
d
Questo 4.9
e
Questo 4.10
www.facebook.com/k19treinamentos
463
R ESPOSTAS
464
b
Questo 4.11
c
Questo 5.1
a
Questo 5.2
e
Questo 5.3
a, d
Questo 5.4
d
Questo 5.5
c
Questo 5.6
todas as alternativas esto corretas
Questo 5.7
b
464
www.k19.com.br