TREINAMENTOS

Desenvolvimento Web com

HTML, CSS e Javascript
 Desenvolvimento Web com HTML, CSS e Javascript

25 de novembro de 2013
As apostilas atualizadas estão disponíveis em www.k19.com.br

Esta apostila contém:

• 289 exercícios de fixação.

• 164 exercícios complementares.
• 56 questões de prova.

i
Sumário ii

Sobre a K19 1

Seguro Treinamento 2

Termo de Uso 3

Cursos 4

1 Introdução 1
1.1 Sites e Aplicações Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Navegadores e Dispositivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3 Web Servers e HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.4 Domínios e endereços IP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.5 DNS (Domain Name System) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.6 Serviços de Hospedagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.7 SEO (Search Engine Optimization) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.8 Arquitetura Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.9 Ativando o IIS e ASP Classic no Windows 7 . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.10 Instalação do Apache HTTP Server no Ubuntu 13.04 . . . . . . . . . . . . . . . . . . . . 16
1.11 Apache HTTP Server no Mac OS X Mountain Lion . . . . . . . . . . . . . . . . . . . . . . 16
1.12 Resumo do Capítulo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
1.13 Prova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

2 HTML 21
2.1 Introdução . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.2 Estrutura Básica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.3 Editores HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
2.4 Ferramentas de Desenvolvimento Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
2.5 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
2.6 Semântica HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
2.7 Títulos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
2.8 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
2.9 Parágrafos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
2.10 Character Entities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
2.11 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
2.12 Texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
2.13 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
2.14 Listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
2.15 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
2.16 Iframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
2.17 Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
2.18 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
2.19 Âncoras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
2.20 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
2.21 Imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
2.22 URLs absolutas e relativas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
2.23 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
2.24 Tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

ii www.k19.com.br
iii S UMÁRIO

2.25 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

2.26 Formulários . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
2.27 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
2.28 Caixas de entrada específicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
2.29 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
2.30 Checkboxes e Radios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
2.31 Seleção de cores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
2.32 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
2.33 Botões . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
2.34 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
2.35 Drop-down list . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
2.36 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
2.37 Fieldset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
2.38 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
2.39 Autocomplete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
2.40 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
2.41 Campos ou botões desabilitados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
2.42 Campos fixos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
2.43 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
2.44 Validação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
2.45 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
2.46 Partes de um documento HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
2.47 Divisão de conteúdo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
2.48 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
2.49 Agrupando elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
2.50 Erro: Fechamento inadequado das tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
2.51 Erro: Imagens sem texto alternativo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
2.52 Erro: Criar listas com o elemento br . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
2.53 Exercícios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
2.54 Resumo do Capítulo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
2.55 Prova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

3 CSS 141
3.1 Box Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
3.2 Regras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
3.3 Aplicando CSS ao HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
3.4 Comentários . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
3.5 Chrome DevTools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
3.6 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
3.7 Cores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
3.8 Unidades de medida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
3.9 Backgrounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
3.10 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
3.11 Textos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
3.12 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
3.13 Fontes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
3.14 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
3.15 Listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
3.16 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178

www.facebook.com/k19treinamentos iii
S UMÁRIO iv

3.17 Bordas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

3.18 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
3.19 Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
3.20 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
3.21 Sombras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
3.22 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
3.23 Margens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
3.24 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
3.25 Altura e Largura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
3.26 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
3.27 Display e Visibilidade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
3.28 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
3.29 Opacidade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
3.30 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
3.31 Posicionamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
3.32 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
3.33 Overflow e clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
3.34 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
3.35 Transformações . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
3.36 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
3.37 Transições . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
3.38 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
3.39 Animações . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
3.40 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
3.41 Seletores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
3.42 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
3.43 Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
3.44 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
3.45 Sprites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
3.46 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
3.47 Gradientes (Conteúdo Extra) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
3.48 Herança (Conteúdo Extra) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
3.49 box-sizing (Conteúdo Extra) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
3.50 Design Responsivo (Conteúdo Extra) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
3.51 Exercícios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
3.52 Resumo do Capítulo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
3.53 Prova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297

4 JavaScript 305
4.1 Aplicando JavaScript ao HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
4.2 Carregamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
4.3 Chrome DevTools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306
4.4 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308
4.5 Variáveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312
4.6 Operadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312
4.7 Controle de fluxo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319
4.8 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320
4.9 Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324
4.10 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328

iv www.k19.com.br
v S UMÁRIO

4.11 Funções . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334

4.12 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336
4.13 Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
4.14 Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
4.15 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
4.16 DOM - Document Object Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
4.17 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352
4.18 Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
4.19 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358
4.20 Web Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
4.21 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361
4.22 History . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
4.23 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364
4.24 Geolocalização . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365
4.25 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365
4.26 Alarmes (Conteúdo Extra) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366
4.27 Exercícios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
4.28 Resumo do Capítulo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369
4.29 Prova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370

5 jQuery 375
5.1 Introdução . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375
5.2 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376
5.3 Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379
5.4 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382
5.5 Seletores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385
5.6 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392
5.7 Efeitos e Animações . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393
5.8 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394
5.9 Manipulação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396
5.10 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403
5.11 Mais métodos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406
5.12 AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
5.13 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410
5.14 Exercícios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411
5.15 Resumo do Capítulo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
5.16 Prova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418

A Projeto 421
A.1 Exercícios de Fixação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421

B Quizzes 435

C Respostas 437

www.facebook.com/k19treinamentos v
S UMÁRIO vi

vi www.k19.com.br
1 S UMÁRIO

Sobre a K19
A K19 é uma empresa especializada na capacitação de desenvolvedores de software. Sua equipe
é composta por profissionais formados em Ciência da Computação pela Universidade de São Paulo
(USP) e que possuem vasta experiência em treinamento de profissionais para área de TI.

O principal objetivo da K19 é oferecer treinamentos de máxima qualidade e relacionados às prin-

cipais tecnologias utilizadas pelas empresas. Através desses treinamentos, seus alunos tornam-se
capacitados para atuar no mercado de trabalho.

Visando a máxima qualidade, a K19 mantém as suas apostilas em constante renovação e melho-
ria, oferece instalações físicas apropriadas para o ensino e seus instrutores estão sempre atualizados
didática e tecnicamente.

www.facebook.com/k19treinamentos 1
3 S UMÁRIO

Termo de Uso
Termo de Uso
Todo o conteúdo desta apostila é propriedade da K19 Treinamentos. A apostila pode ser utilizada
livremente para estudo pessoal . Além disso, este material didático pode ser utilizado como material
de apoio em cursos de ensino superior desde que a instituição correspondente seja reconhecida pelo
MEC (Ministério da Educação) e que a K19 seja citada explicitamente como proprietária do material.

É proibida qualquer utilização desse material que não se enquadre nas condições acima sem
o prévio consentimento formal, por escrito, da K19 Treinamentos. O uso indevido está sujeito às
medidas legais cabíveis.

www.facebook.com/k19treinamentos 3
S UMÁRIO 4

TR
EIN
AM
EN

TR
TO

EIN
S

TREINAMENTOS
AM
EN
TO
S
Conheça os nossos cursos

K01- Lógica de Programação

K02 - Desenvolvimento Web com HTML, CSS e JavaScript

K03 - SQL e Modelo Relacional

K11 - Orientação a Objetos em Java

K12 - Desenvolvimento Web com JSF2 e JPA2

K21 - Persistência com JPA2 e Hibernate

K22 - Desenvolvimento Web Avançado com JFS2, EJB3.1 e CDI

K23 - Integração de Sistemas com Webservices, JMS e EJB

K41 - Desenvolvimento Mobile com Android

K51 - Design Patterns em Java

K52 - Desenvolvimento Web com Struts

K31 - C# e Orientação a Objetos

K32 - Desenvolvimento Web com ASP.NET MVC

www.k19.com.br/cursos

4 www.k19.com.br
 1

CAPÍTULO
I NTRODUÇÃO

Sites e Aplicações Web

Normalmente, as pessoas utilizam o termo site quando se referem a blogs, sites de notícias, sites
institucionais, portais, lojas virtuais, entre outros. Já a denominação aplicação web é muito utilizada
para sistemas de gestão empresarial que são acessados através de navegadores (browsers).

Não há uma definição exata que diferencie claramente sites e aplicações web. Alguns defendem
que os sites são read-only (somente leitura) enquanto as aplicações web são read-write (leitura e
escrita). Nessa definição, os sites apenas fornecem conteúdo enquanto as aplicações web podem
fornecer e/ou receber conteúdo.

Seguindo essa linha de raciocínio, algumas pessoas gostam de utilizar o grau de interatividade
com os usuários para classificar como site ou aplicação web. Nessa visão, aplicações web seriam
mais interativas e os sites menos interativos. Contudo, não há uma medida definida para calcular
esse grau de interatividade e com isso aplicar de forma objetiva essa classificação. Dessa forma, essa
diferenciação, na prática, é subjetiva.

Outras pessoas preferem utilizar o critério do propósito para classificar como site ou aplicação
web. Por exemplo, se o propósito é divulgar as informações de uma empresa, os dados de um pro-
duto, as notícias de um determinado assunto, utiliza-se o termo site. Se o propósito é criar uma
ferramenta para controlar as atividades administrativas de uma organização, utiliza-se a denomina-
ção aplicação web.

Utilizando o critério do propósito para classificar como site ou aplicação web, podemos concluir
que, geralmente, os sites necessitam de uma interface mais atrativa pois normalmente estão “ven-
dendo” alguma coisa ou alguma ideia. Por outro lado, na maior parte dos casos, o mais importante
para as aplicações web é possuir uma interface fácil de utilizar.

Independentemente do critério de classificação utilizado, os tópicos discutidos nesse treina-

mento são importantes tanto para o desenvolvimento de sites quanto para o desenvolvimento de
aplicações web. Portanto, do nosso ponto de vista, essas diferenças não serão tão relevantes.

www.facebook.com/k19treinamentos 1
I NTRODUÇÃO 2

Figura 1.1: Sites

Figura 1.2: Aplicações Web

2 www.k19.com.br
3 I NTRODUÇÃO

Navegadores e Dispositivos

As pessoas acessam sites e aplicações web através de navegadores (browsers) como Chrome,
Firefox, Internet Explorer e Safari. Normalmente, esses navegadores possuem algumas diferenças
na forma de exibir as páginas web aos usuários. Antigamente, essas diferenças 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 diferenças.

.//gs.statcounter.com/)
Figura 1.3: Índice de utilização dos navegadores em Outubro de 2013 (fonte http.

Outro problema de compatibilidade importante é causado pela grande variedade de dispositivos

que podem ser utilizados para acessar os sites e as aplicações web. Atualmente, as pessoas acessam
os sites e as aplicações web através de computadores tradicionais, tablets, celulares, televisores, entre
outros. Esses dispositivos possuem telas de tamanhos diferentes. Dessa forma, os desenvolvedores
web devem considerar essas diferenças na criação das páginas web. Hoje em dia, fala-se muito de
design responsivo. Os sites ou as aplicações web são ditos responsivos se eles estão preparados para
diferentes tamanhos de tela.

Figura 1.4: Design Responsivo

www.facebook.com/k19treinamentos 3
I NTRODUÇÃO 4

Web Servers e HTTP

Os sites e as aplicações web são implantados em computadores conectados à Internet ou a uma

rede privada qualquer (Intranet). Normalmente, os sites são implantados em computadores conec-
tados à Internet pois assim poderão ser acessados praticamente de qualquer lugar do mundo. Por
outro lado, as aplicações web, muitas vezes, são implantadas em computadores conectados a uma
Intranet pois é comum ser necessário restringir o acesso externo à elas.

Figura 1.5: Internet

Figura 1.6: Intranet

Os computadores nos quais os sites e as aplicações web são implantados são chamados de Web

4 www.k19.com.br
5 I NTRODUÇÃO

Servers. Quando acessamos uma página web através de um navegador, ele realiza uma requisição
ao Web Server onde essa página está armazenada. Ao receber a resposta do Web Server com a página
web solicitada, o navegador a exibe para nós. As mensagens de requisição e resposta trocadas entre
o navegador e o web server são definidas pelo protocolo HTTP.

Figura 1.7: Interação entre os navegadores e os Web Servers

Considere um site ou uma aplicação web implantado em um Web Server que está conectado a
uma rede. A princípio, qualquer navegador executando em um dispositivo conectado a essa rede
pode realizar requisições a esse Web Server.

Alguns softwares especializados são utilizados para administrar os sites e as aplicações web im-
plantadas nos Web Servers. Os principais são o Apache HTTP Server da Apache Software Founda-
tion e o Internet Information Services (IIS) da Microsoft.

Domínios e endereços IP

Os dispositivos conectados a uma rede são identificados através de endereços formados por
sequências de números. Esses endereços são chamados de endereços IP. Em uma Intranet, quem
controla os endereços IP dos dispositivos conectados é a própria organização que administra essa In-
tranet. Por outro lado, os endereços IP dos dispositivos conectados à Internet são gerenciados pelos
provedores de acesso (ISP).

www.facebook.com/k19treinamentos 5
I NTRODUÇÃO 6

Figura 1.8: Endereços IP

A princípio, para acessar uma página de um site ou de uma aplicação web, devemos conhecer o
endereço IP do Web Server que contém esse site ou essa aplicação web. Atualmente, o endereço IP do
Web Server onde o site da K19 está implantado é 184.72.247.119. Podemos utilizar esse endereço IP
para acessar as páginas do site da K19. O endereço IP 200.144.183.244 está vinculado a um dos Web
Servers onde o site da USP está implantado. Também podemos acessar as páginas do site da USP
utilizando diretamente esse endereço IP. Analogamente, podemos acessar as páginas da Wikipédia
utilizando o endereço IP 208.80.152.130.

Figura 1.9: Acessando o Web Server da K19 pelo endereço IP

6 www.k19.com.br
7 I NTRODUÇÃO

Figura 1.10: Acessando o Web Server da USP pelo endereço IP

Figura 1.11: Acessando o Web Server da Wikipédia pelo endereço IP

Se você tiver uma memória muito boa pode decorar os endereços IP dos sites que acessa com
maior frequência. Mas, para maior parte das pessoas, seria impossível decorar tantos números. Para
resolver esse problema, os endereços IP são associados a domínios. Veja alguns exemplos de domí-
nios.

• www.k19.com.br

• www.usp.br

• www.wikipedia.org

As pessoas conseguem decorar ou deduzir os domínios bem mais facilmente do que os endereços
IP.

www.facebook.com/k19treinamentos 7
I NTRODUÇÃO 8

Figura 1.12: Acessando o Web Server da K19 pelo domínio

Figura 1.13: Acessando o Web Server da USP pelo domínio

Figura 1.14: Acessando o Web Server da Wikipédia pelo domínio

Há uma outra vantagem importante dos domínios sobre os endereços IP. Em alguns casos, o en-
dereço IP de um Web Server precisa ser alterado. Geralmente, essa modificação ocorre por motivos
técnicos. Supondo que essa mudança ocorra, quem estiver acessando esse Web Server através do
endereço IP antigo não conseguirá mais acessá-lo dessa forma. Por outro lado, quem estiver aces-
sando esse Web Server através do domínio dele poderá continuar acessando da mesma forma pois
esse domínio pode ser facilmente associado ao novo endereço IP.

8 www.k19.com.br
9 I NTRODUÇÃO

Figura 1.15: Alteração do Web Server

Os domínios são controlados por organizações geralmente vinculadas ao governo. Por exemplo,
os domínios .br são controlados e disponibilizados pelo Registro de Domínios para a Internet no
Brasil (registro.br).

DNS (Domain Name System)

Como vimos, podemos acessar um Web Server diretamente através do seu endereço IP ou indi-
retamente através de um domínio. Para utilizar a segunda abordagem, é necessário consultar um
servidor DNS para “traduzir” o domínio desejado para o endereço IP correspondente. Basicamente,
a tarefa dos servidores DNS é informar o endereço IP associado a um domínio.

www.facebook.com/k19treinamentos 9
I NTRODUÇÃO 10

Figura 1.16: Interação entre os navegadores e os servidores DNS

Há diversos servidores DNS que são públicos. 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)

Serviços de Hospedagem

Uma organização pode possuir computadores atuando como Web Servers em sua própria infra-
estrutura ou na infraestrutura de empresas especializadas. Em determinadas situações, a primeira
possibilidade é mais conveniente.

Por exemplo, normalmente, as instituições bancárias preferem manter os seus sites e as suas
aplicações web em Web Servers dentro da sua própria infraestrutura. Essa abordagem permite um
controle maior da comunicação entre essas instituições e os seus clientes. Mas, ela exige grandes
investimentos. Para garantir que os seus Web Servers estejam sempre funcionando, essas instituições
bancárias mantêm profissionais 24 horas por dia 7 dias por semana (24/7). Caso contrário, os sites
ou as aplicações web dessas instituições podem ficar fora do ar e gerar grandes prejuízos.

Por outro lado, muitas vezes, é mais conveniente manter os Web Servers de uma organização na
infraestrutura de uma empresa especializada. Dessa forma, a responsabilidade de mantê-los fun-
cionando é delegada à essa empresa. Essa abordagem, geralmente, diminui os custos. Contudo, o
controle é delegado a uma outra empresa. O serviço oferecido por essas empresas é denominado
serviço de hospedagem. Eis uma lista de empresas que oferecem esse tipo de serviço.

• Amazon

10 www.k19.com.br
11 I NTRODUÇÃO

• Localweb
• UOL

SEO (Search Engine Optimization)

Hoje em dia, a principal forma de encontrar um site é utilizar alguma ferramenta de busca. A
mais importante delas, atualmente, é o Google. Essas ferramentas encontram os sites que possuem
conteúdo relacionado às palavras chaves utilizadas nas buscas. Os sites mais relevantes são apresen-
tados antes e com maior destaque.

Para responder rapidamente às consultas realizadas, as ferramentas de busca analisam previ-

amente os sites. Esse processo de análise é chamado de indexação. A indexação é realizada por
programas de computador que interagem com os sites para obter informações sobre o conteúdo de
cada um deles. Esses programas são chamados de robôs.

Figura 1.17: Robôs

No desenvolvimento de um site, podemos aplicar técnicas que facilitam e melhoram a análise

dos robôs das ferramentas de busca. Essas técnicas são desenvolvidas pelos especialistas em SEO
(Search Engine Optimization).

Normalmente, as técnicas de SEO são mais importantes para os sites do que para as aplicações
web.

Arquitetura Web

Vamos utilizar um diagrama para apresentar uma visão geral da arquitetura web.

www.facebook.com/k19treinamentos 11
I NTRODUÇÃO 12

Figura 1.18: Diagrama geral da arquitetura web

Observe que o diagrama foi dividido em duas partes: client side e server side. Alguns profissi-
onais se especializam no client side e outros no server side. Outra denominação possível 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 não 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.

Ativando o IIS e ASP Classic no Windows 7

Se você quiser utilizar o Windows 7 para fazer os exercícios dos próximos capítulos, instale o IIS
e o ASP Classic de acordo com os passos a seguir.

No menu Iniciar, clique em Painel de Controle.

12 www.k19.com.br
13 I NTRODUÇÃO

No Painel de Controle, clique em Programas.

Em Programas, clique em Ativar ou desativar recursos do Windows.

www.facebook.com/k19treinamentos 13
I NTRODUÇÃO 14

Aguarde o carregamento da lista de recursos que podem ser ativados ou desativados.

Selecione os recursos de acordo com a imagem a seguir e clique no botão OK.

Aguarde a ativação dos recursos selecionados.

14 www.k19.com.br
15 I NTRODUÇÃO

.//localhost.
Depois do término da ativação, abra um navegador e acesse o endereço http.

www.facebook.com/k19treinamentos 15
I NTRODUÇÃO 16

Instalação do Apache HTTP Server no Ubuntu 13.04

Se você quiser utilizar o Ubuntu 13.04 para fazer os exercícios dos próximos capítulos, instale o
Apache HTTP Server de acordo com os passos a seguir.

Abra um terminal e digite os seguintes comandos.

sudo apt - get update

sudo apt - get install apache2

sudo apt - get install php5 libapache2 - mod - php5

sudo service apache2 restart

Configuração do Userdir
Configure o userdir do Apache HTTP Server seguindo passos abaixo.

sudo a2enmod userdir

sudo service apache2 restart

mkdir ~/ public_html && chmod 755 ~/ public_html

Apache HTTP Server no Mac OS X Mountain Lion

Se você quiser utilizar o Mac OS X Mountain Lion para fazer os exercícios dos próximos capítulos,
configure o Apache HTTP Server de acordo com os passos a seguir.

1. No diretório /etc/apache2/users/, crie um arquivo de configuração com o nome do seu usuário

(ex: jonas.conf ).

1 < Directory " / Users / nome_do_usuario / Sites / " >

2 Options FollowSymLinks Indexes MultiViews
3 AllowOverride All
4 Order allow , deny
5 Allow from all
6 </ Directory >

Código XML 1.1: nome_do_usuario.conf

2. Altere as permissões do arquivo criado anteriormente.

sudo chmod 644 nome_do_usuario . conf

3. Localize, no arquivo /etc/apache2/httpd.conf, a linha:

1 # LoadModule php5_module libexec / apache2 / libphp5 . so

16 www.k19.com.br
17 I NTRODUÇÃO

4. Descomente a linha encontrada anteriormente.

1 LoadModule php5_module libexec / apache2 / libphp5 . so

5. Crie uma pasta chamada Sites na pasta do seu usuário.

mkdir ~/ Sites

6. Inicie o Apache HTTP Server.

sudo apachectl start

7. Configure o Apache HTTP Server para iniciar automaticamente.

sudo defaults write / System / Library / LaunchDaemons / org . apache . httpd Disabled - bool false

Resumo do Capítulo

1 Não há um critério exato para diferenciar o que é um site e o que é uma aplicação web.

2 Os desenvolvedores web devem considerar as diferenças entre os navegadores (browsers) e os

dispositivos (computadores, tablets, celulares, tvs, entre outros) na criação das páginas web de um
site ou de uma aplicação web.

3 A Internet é a maior rede pública de computadores.

4 Uma rede privada de computadores é denominada Intranet

5 Os sites e as aplicações web são implantados em computadores denominados Web Servers.

6 As mensagens trocadas entre os navegadores e os Web Servers seguem o protocolo HTTP.

7 Os dispositivos conectados a uma rede de computadores são identificados através de endereços

IP.

8 Para não ter que decorar endereços IP, podemos utilizar domínios.

9 A utilização de domínios facilita uma eventual troca do endereço IP de um Web Server.

www.facebook.com/k19treinamentos 17
I NTRODUÇÃO 18

10 A função principal de um servidor DNS é traduzir domínios para endereços IP.

11 Organizações de grande porte costuma implantar os seus sites e as suas aplicações web em Web
Servers dentro da sua própria infraestrutura. Por outro lado, organizações menores, normalmente,
preferem contratam empresas especializadas no serviço de hospedagem.

12 As técnicas de SEO são aplicadas com o intuito de melhorar o posicionamento de um site nos
resultados das consultas realizadas nas ferramentas de busca.

13 Podemos dividir a arquitetura web em duas partes: client side e server side.

Prova

1 Qual alternativa está correta?

a) Existe uma divisão clara e exata entre o conceito de site e aplicação web.

b) Geralmente, os sites possuem maior grau de interatividade com o usuário do que as aplicações
web.

c) As aplicações web não são utilizadas como ferramentas para controle administrativo de uma
empresa.

d) Geralmente, os sites “vendem” algum produto ou alguma ideia.

e) Geralmente, as aplicações web “vendem” algum produto ou alguma ideia.

2 Qual alternativa está correta?

a) A forma de exibição das página web é padrão em todos os navegadores.

b) A forma de exibição das página web é padrão em todos os dispositivos.

c) O Design Responsivo trata de questões relacionadas à performance dos sites.

d) O Design Responsivo trata de questões relacionadas à performance dos navegadores.

e) Os sites ou as aplicações web são ditos responsivos se eles estão preparados para diferentes
tamanhos de tela.

3 Qual alternativa está correta?

a) HTTP é protocolo de comunicação.

18 www.k19.com.br
19 I NTRODUÇÃO

b) A Internet é uma rede de computadores privada.

c) Os sites e as aplicações web são implantados em Web Computers.

d) Aplicações web só podem ser implantadas em redes privadas.

e) Sites só podem ser implantados na Internet.

4 Qual alternativa está correta?

a) O endereço IP de um dispositivo determina precisamente a localização geográfica desse dis-

positivo.

b) O conteúdo de um site é determinado pelo domínio associado ao Web Server onde esse site
está implantado.

c) Domínios são associados a endereços IP.

d) Para aplicações web devemos utilizar domínios especiais.

e) Todo domínio inicia com www.

5 Qual alternativa está correta?

a) A função principal de um servidor DNS (Domain Name System) é informar o nome do propri-
etário de um site.

b) O objetivo principal das empresas que fornecem serviços de hospedagem é vender domínios.

c) Técnicas de SEO melhoram a velocidade de carregamento de um site.

d) Técnicas de SEO melhoram o posicionamento dos sites nas ferramentas de busca.

e) O objetivo das empresas especializadas em SEO é oferecer serviços de hospedagem.

6 Qual alternativa está correta?

a) É comum dividir a arquitetura web em left side e right side.

b) É comum dividir a arquitetura web em down side e up side.

c) É comum dividir a arquitetura web em outside e inside.

d) É comum dividir a arquitetura web em client side e server side.

e) É comum dividir a arquitetura web em front side e back side.

4 6
Minha Pontuação Pontuação Mínima: Pontuação Máxima:

www.facebook.com/k19treinamentos 19
I NTRODUÇÃO 20

20 www.k19.com.br
 2

CAPÍTULO
HTML

Introdução

Quando acessamos uma página web, estamos interessados na informação contida nessa página.
Essa informação pode estar na forma de texto, imagem ou vídeo. O conteúdo de uma página web é
definido com a linguagem HTML (HyperText Markup Language). HTML é uma linguagem de mar-
cação originalmente proposta por Tim Berners-Lee no final da década de 1980. O objetivo do Tim
Barners-Lee era criar um mecanismo simples que pudesse ser utilizado por qualquer pessoa que
quisesse disseminar documentos científicos.

Desde sua proposta até os dias de hoje, a linguagem HTML sofreu diversas alterações. A cada
versão, novos recursos são adicionados e problemas corrigidos. A versão mais atual da especificação
da linguagem HTML é a 5. Essa versão ainda não foi finalizada, a previsão é que ela seja lançada em
definitivo em Julho de 2014. Porém, os navegadores já implementam diversos recursos do HTML5.
A especificação está disponível no endereço http. .//www.w3.org/TR/html5.

As especificações da linguagem HTML são publicadas pelo World Wide Web Consortium mais
conhecido por sua sigla W3C. Além do HTML, o W3C também é responsável por linguagens como o
XML, o SVG e pela interface DOM (Document Object Model), por exemplo.

Estrutura Básica

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 são definidas com parênteses angulares (< e >). Os elementos podem possuir
atributos e conteúdo. Os atributos são formados por nome e valor. Normalmente, os valores dos
atributos são definidos dentro de aspas dupla e o conteúdo dos elementos é um texto ou outros
elementos.

www.facebook.com/k19treinamentos 21
HTML 22

Declaração do tipo de documento

<!DOCTYPE html>

Tag de abertura do elemento html

<html lang=”pt-br”>
Nome de atributo
<head>
Valor de atributo

<meta http-equiv = ”Content-Type” content=”text/html; charset=UTF-8”>

<title>K19 Treinamentos</title>

</head>
Conteúdo do elemento body
<body>

<p>K02 - Devenvolvimento Web com HTML, CSS e JavaScript</p>

</body>

</html>

Tag de fechamento do elemento html

Figura 2.1: Estrutura básica de um documento HTML

Figura 2.2: Estrutura básica de um documento HTML

Mais Sobre
A especificação 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 utilização da sintaxe HTML. Nos exemplos
e nos exercícios dessa apostila, a preferência será pela sintaxe HTML.

22 www.k19.com.br
23 HTML

Mais Sobre
De acordo com a especificação da linguagem HTML, alguns elementos são denomina-
dos Normal Elements. Esses elementos são abertos com uma tag e fechados com
outra tag. Por exemplo, o elemento p é um Normal Element. Observe a utilização da tag de
abertura e da tag de fechamento do elemento p.

1 <p > K2 - Desenvolvimento Web com HTML , CSS e JavaScript </ p >

Mais Sobre
Há também elementos denominados Void Elements. Esses elementos não possuem
conteúdo. Na sintaxe HTML, esses elementos são abertos e fechados com apenas uma
tag com ou sem o caractere “/”. Um exemplo de Void Element é o elemento br.

1 <p >
2 K1 - Lo
 gica de Programaça o < br >
3 K2 - Desenvolvimento Web com HTML , CSS e JavaScript < br / >
4 K3 - SQL e Modelo Relacional
5 </ p >

Os Void Elements são: 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 “/” é obrigatório.

1 <p >
2 K1 - Lo
 gica de Programaça o < br / >
3 K2 - Desenvolvimento Web com HTML , CSS e JavaScript < br > </ br >
4 K3 - SQL e Modelo Relacional
5 </ p >

<!DOCTYPE>
Para um navegador exibir corretamente uma página web, devemos informar explicitamente o
tipo do documento. O tipo do documento é informado com a declaração <!DOCTYPE>. Quando
conveniente, discutiremos as principais diferenças entre os tipos de documentos mais importantes.
Veja a declaração <!DOCTYPE> para os principais tipos de documentos.

1 <! DOCTYPE html >

Código HTML 2.4: HTML 5

1 <! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.1// EN "
2 " http .. // www . w3 . org / TR / html4 / strict . dtd " >

Código HTML 2.5: HTML 4.01 Strict

1 <! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.1 Transitional // EN "
2 " http .. // www . w3 . org / TR / html4 / loose . dtd " >

Código HTML 2.6: HTML 4.01 Transitional

www.facebook.com/k19treinamentos 23
HTML 24

1 <! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.1 Frameset // EN "
2 " http .. // www . w3 . org / TR / html4 / frameset . dtd " >

Código HTML 2.7: HTML 4.01 Frameset

1 <! DOCTYPE html PUBLIC " -// W3C // DTD XHTML 1. Transitional // EN "
2 " http .. // www . w3 . org / TR / xhtml1 / DTD / xhtml1 - transitional . dtd " >

Código HTML 2.8: XHTML 1.0 Transitional

1 <! DOCTYPE html PUBLIC " -// W3C // DTD XHTML 1. Frameset // EN "
2 " http .. // www . w3 . org / TR / xhtml1 / DTD / xhtml1 - frameset . dtd " >

Código 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 " >

Código HTML 2.10: XHTML 1.1

<html>
Os elementos HTML, com exceção do DOCTYPE, devem ser inseridos no conteúdo do elemento
html. Esse elemento é aberto com a tag <html>, fechado com a tag </html> e deve conter exata-
mente um elemento head seguido de exatamente um elemento body.

Diversos autores recomendam a utilização do atributo lang. Esse atributo indica a língua utili-
zada no documento HTML ou na maior parte dele. Algumas ferramentas de leitura ou de tradução
de texto podem utilizar esse atributo para descobrir facilmente em qual língua 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 função do elemento head é agrupar informações sobre o documento HTML (metain-
formação). São exemplos de metainformações: o encoding, a taxa de atualização, o autor, a descrição
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 = " 3 " >
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 >

24 www.k19.com.br
25 HTML

O elemento head é aberto e fechado pelas tags <head> e </head> respectivamente. Obrigatoria-
mente, salvo algumas poucas exceções, o corpo do head deve conter exatamente uma ocorrência do
elemento title. Esse elemento define o título do documento HTML.

1 < head >

2 ...
3 < title > K19 Treinamentos </ title >
4 </ head >

<body>

O conteúdo de uma página web deve ser definido no corpo do elemento body. Por exemplo,
podemos inserir no corpo do body cabeçalhos, textos, listas, tabelas, entre outros componentes.
Esse elemento é aberto pela tag <body> e fechado pela tag </body>.

1 < body >

2 < h1 > K2 - Desenvolvimento Web com HTML , CSS e JavaScript </ h1 >
3 </ body >

Comentários

Podemos adicionar comentários em um documento HTML dentro das tags <!-- e -->. Os comen-
tários são 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 básico. Contudo, para ga-
nhar produtividade, podemos utilizar ferramentas com mais recursos. Há diversas opções de edito-
res HTML, alguns gratuitos outros pagos. Nesse treinamento, utilizaremos o Netbeans como editor
HTML. Na verdade, o Netbeans oferece muito mais recursos além do editor HTML. Contudo, agora,
não estamos interessados nesses outros recursos. Você pode obter gratuitamente o Netbeans no en-
.//netbeans.org/.
dereço https.

Ferramentas de Desenvolvimento Web

Hoje em dia, os principais navegadores possuem ferramentas para testar e depurar as páginas
web e a interação com os Web Servers. Nos exemplos dessa apostila, utilizaremos Chrome DevTools
do navegador Chrome. Outra ferramenta muito importante é o Firebug do navegador Firefox.

www.facebook.com/k19treinamentos 25
HTML 26

Exercícios de Fixação

1 Abra o Netbeans e crie um projeto chamado html.

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 é necessário
instalar o IIS conforme vimos anteriormente.

Importante
No Ubuntu, utilizando o Apache HTTP Server como Web Server, você deve salvar o pro-
jeto html em /home/<USUARIO>/public_html. Lembre-se que é necessário insta-
lar e configurar o Apache HTTP Server como vimos anteriormente.

Figura 2.3: Projeto html

26 www.k19.com.br
27 HTML

Figura 2.4: Projeto html

Figura 2.5: Projeto html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao1.zip

www.facebook.com/k19treinamentos 27
HTML 28

2 Edite o arquivo index.html do projeto html que está em Site Root.

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 <! - - cabeçalho -->
4 < head >
5 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
6 < title > K19 Treinamentos </ title >
7 </ head >
8
9 <! - - corpo -->
1 < body >
11 <p > K2 - Desenvolvimento Web com HTML , CSS e JavaScript </ p >
12 </ body >
13 </ html >

Código HTML 2.16: index.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao2.zip

3 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/index.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/index.html.

4 Utilize o Chrome DevTools ou o Firebug para analisar e modificar os elementos do documento

HTML.

28 www.k19.com.br
29 HTML

Figura 2.6: Chrome DevTools

Figura 2.7: Chrome DevTools

www.facebook.com/k19treinamentos 29
HTML 30

Figura 2.8: Chrome DevTools

Figura 2.9: Chrome DevTools

30 www.k19.com.br
31 HTML

5 Utilize o Chrome DevTools ou o Firebug para analisar a requisição HTTP e a resposta HTTP.

Figura 2.10: Chrome DevTools

Figura 2.11: Chrome DevTools

www.facebook.com/k19treinamentos 31
HTML 32

Semântica HTML

As placas de sinalização são fundamentais para manter a ordem no trânsito. Cada placa possui
um significado específico. A utilização equivocada das placas de trânsito pode causar problemas
como colisões de veículos.

Considere um cruzamento no qual é proibido virar a esquerda ou a direita (exemplo: Av. Re-
bouças com Av Brasil ou Av. Prof. Francisco Morato com Av. Vital Brasil). Nesse cruzamento, o
funcionário encarregado de instalar as placas de trânsito decidiu utilizar a sinalização abaixo.

Figura 2.12: Marcador de perigo.

Essa sinalização está totalmente equivocada. Ela indica a existência de obstáculos na pista que
obrigam a passagem dos veículos 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 colisão. Para
não gerar confusão o funcionário poderia utilizar a placa abaixo.

Figura 2.13: Siga em frente.

Para manter a organização no trânsito, a semântica(significado) das sinalizações deve ser respei-
tada. Analogamente, no desenvolvimento web, é fundamental respeitar o significado dos elementos

32 www.k19.com.br
33 HTML

HTML.

De acordo com a especificação da linguagem HTML, a maior parte dos elementos possuem um
propósito bem definido. Para o funcionamento correto das páginas de uma aplicação web, é fun-
damental respeitar o propósito de cada elemento e utilizá-lo nas condições corretas. Muitos autores
utilizam o termo semântica HTML ao se referirem ao uso correto dos elementos da linguagem HTML.

No exemplo abaixo, utilizamos o elemento p para definir um parágrafo. De acordo com a espe-
cificação da linguagem HTML, esse elemento deve ser utilizado justamente para definir parágrafos.
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 sema ntica HTML </ title >
6 </ head >
7 < body >
8 <p > Este e um texto para mostrar o significado da tag p . </ p >
9 </ body >
1 </ html >

Código HTML 2.17: Exemplo de uso correto da semântica HTML

Agora, vejamos outro 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 > Meus amigos - Site do Jonas - Criado pelo Jonas </ title >
6 </ head >
7 < body >
8 < address >
9 Rafael Cosentino
1 rafael . cosentino@k19 . com . br
11 So
 cio fundador da K19 Treinamentos
12 Av . Brigadeiro Faria Lima , 1571 - Jardim Paulistano - Sa o Paulo , SP
13 CEP 1452 -1
14 </ address >
15
16 < address >
17 Marcelo Martins
18 marcelo . martins@k19 . com . br
19 So
 cio fundador da K19 Treinamentos
2 Av . Brigadeiro Faria Lima , 1571 - Jardim Paulistano - Sa o Paulo , SP
21 CEP 1452 -1
22 </ address >
23 </ body >
24 </ html >

Código HTML 2.18: Exemplo de uso incorreto da semântica HTML

Dessa vez, utilizamos o elemento address. De acordo com a especificação, esse elemento deve
ser utilizado para fornecer informações de contato dos autores ou donos do documento. Normal-
mente, esse elemento aparece no início ou no final das páginas.

Se observarmos o exemplo mais atentamente, trata-se de uma página do site do Jonas (repare no
título da página). O autor da página é o Jonas e não o Rafael ou o Marcelo. Portanto, o elemento ad-
dress foi aplicado incorretamente. Além disso, devemos evitar o uso desse elemento para informar
endereços postais a menos que essas informações sejam relacionadas ao autor ou dono do docu-

www.facebook.com/k19treinamentos 33
HTML 34

mento.

Títulos

Assim como em um livro, uma página web pode conter uma hierarquia de títulos para estabelecer
uma divisão do seu conteúdo. Para inserir títulos em uma página web, devemos utilizar os elementos
h1, h2, h3, h4, h5 e h6. Os sufixos numéricos de 1 a 6 indicam o nível do título dentro da hierarquia
de títulos 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 t  tulos </ title >
6 </ head >
7 < body >
8 < h1 > T
 tulo 1 </ h1 >
9 < h2 > T
 tulo 2 </ h2 >
1 < h3 > T
 tulo 3 </ h3 >
11 < h4 > T
 tulo 4 </ h4 >
12 < h5 > T
 tulo 5 </ h5 >
13 < h6 > T
 tulo 6 </ h6 >
14 </ body >
15 </ html >

Código HTML 2.19: Exemplo de títulos

Figura 2.14: Exemplo de títulos

Observe que os títulos não foram exibidos lado a lado e sim um embaixo do outro. Geralmente,
os navegadores exibem os títulos como blocos. Por padrão, esses blocos ocupam todo o espaço ho-
rizontal do elemento onde os títulos estão contidos. No exemplo, os títulos estão contidos no corpo
da página. Portanto, ocupam todo o espaço horizontal da página. Esse é o comportamento padrão
dos block-level elements. Utilizando as ferramentas de desenvolvimento do Chrome, podemos vi-
sualizar claramente esses blocos.

34 www.k19.com.br
35 HTML

Figura 2.15: Exemplo de títulos

Geralmente, os navegadores utilizam tamanhos diferentes de fonte para cada título. Não existe
um padrão de tamanho e de fonte entre os navegadores. Em outras palavras, os títulos de uma página
web podem ser exibidos de maneiras diferentes em navegadores distintos. Para padronizar a exibição
dos títulos, podemos aplicar as regras CSS.

Devemos utilizar os títulos com cautela, pois eles são usados como critério de ranqueamento
por buscadores como Google, Yahoo e Bing. O uso correto dos elementos de título é fortemente re-
comendado pelos especialistas em SEO (Search Engine Optimization). Para utilizá-los corretamente,
devemos respeitar basicamente as seguintes regras.

• Manter a ordem lógica dos títulos. Um elemento h2 deve ser precedido de um elemento h1.
Um elemento h3 deve ser precedido de um elemento h2. E assim sucessivamente.
• O título de uma seção deve descrever bem o conteúdo dela.

Exercícios de Fixação

6 Crie um novo documento HTML chamado titulos.html com o conteúdo abaixo 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 " >

www.facebook.com/k19treinamentos 35
HTML 36

5 < title > K2 - Desenvolvimento Web com HTML , CSS e Javascript </ title >
6 </ head >
7 < body >
8 < h1 > K2 - Desenvolvimento Web com HTML , CSS e Javascript </ h1 >
9
1 <p > Atualmente , praticamente todos os sistemas corporativos possuem
11 interfaces web . Para quem deseja atuar no mercado de desenvolvimento
12 de software , e  obrigato  rio o conhecimento das linguagens .. HTML , CSS
13 e JavaScript . </ p >
14
15 <p > Essas linguagens sa o utilizadas para o desenvolvimento da camada de
16 apresentaça o das aplicaço  es web . </ p >
17
18 < h2 >Pre - requisitos </ h2 >
19
2 < ul >
21 < li > Familiaridade com algum sistema operacional ( Windows / Linux / Mac OS X ) </ li >
22 < li > Lo
 gica de programaça o </ li >
23 </ ul >
24
25 < h2 > Agenda </ h2 >
26
27 < h3 > Aos domingos </ h3 >
28
29 < ul >
3 < li > 1/11/213 das 8. .  às 14..  </ li >
31 < li > 23/2/214 das 14. .  às 2..  </ li >
32 </ ul >
33
34 < h3 > Aos sa  bados </ h3 >
35
36 < ul >
37 < li > 15/3/214 das 8. .  às 14..  </ li >
38 < li > 26/4/214 das 14. .  às 2..  </ li >
39 </ ul >
4 </ body >
41 </ html >

Código HTML 2.20: titulos.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao6.zip

7 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/titulos.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/titulos.html.

Utilize o Chrome DevTools ou o Firebug para analisar os elementos que formam o documento
HTML, a requisição HTTP e a resposta HTTP.

8 Imagine que você possua um site de culinária no qual você disponibiliza algumas receitas. Crie
uma página com uma receita fictícia utilizando títulos para organizar conteúdo. Utilize quantos ní-
veis de título achar necessário. Para isso, adicione um arquivo chamado receita.html no projeto
html em Site Root.

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >

36 www.k19.com.br
37 HTML

4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Como preparar um delicioso macarra o instanta neo em 6 min . </ title >
6 </ head >
7 < body >
8 < h1 > Como preparar um delicioso macarra o instanta neo em 6 min . </ h1 >
9
1 <p > Com esta receita voce  se tornara
 um profissional na arte de
11 preparar um macarra o instanta neo . </ p >
12
13 < h2 > Ingredientes </ h2 >
14
15 < ul >
16 < li > Macarra o instanta neo da sua marca favorita </ li >
17 < li > 6 ml de a  gua </ li >
18 </ ul >
19
2 < h2 > Modo de preparo </ h2 >
21
22 < h3 > No micro - ondas </ h3 >
23
24 <p > Coloque o macarra o instanta neo em um recipiente com 6 ml de a  gua e
25 programe o micro ondas para 6 minutos . Aperte o bota o iniciar ou
26 equivalente . </ p >
27
28 < h4 > Dicas </ h4 >
29
3 < ul >
31 < li >
32 Utilize um recipiente que permita o macarra o ficar totalmente
33 submerso na a  gua .
34 </ li >
35 < li >
36 Quando ouvir o bip , na o saia correndo . O micro ondas na o explodira .
37 O bip significa que o macarra o esta  pronto .
38 </ li >
39 </ ul >
4
41 < h3 > No foga o </ h3 >
42
43 <p >
44 Coloque o macarra o instanta neo em uma panela com 6 ml de a  gua e
45 leve ao fogo por 3 minutos .
46 </ p >
47
48 < h4 > Dicas </ h4 >
49
5 < ul >
51 < li >
52 Utilize uma panela que permita o macarra o ficar totalmente
53 submerso na a  gua .
54 </ li >
55 < li >
56 Na o se distraia com a televisa o ou qualquer outra coisa .
57 Voce  podera  queimar a sua refeiça o
58 </ li >
59 </ ul >
6 </ body >
61 </ html >

Código HTML 2.21: receita.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao8.zip

9 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/receita.html.

www.facebook.com/k19treinamentos 37
HTML 38

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/receita.html.

Utilize o Chrome DevTools ou o Firebug para analisar os elementos que formam o documento
HTML, a requisição HTTP e a resposta HTTP.

Parágrafos

Os parágrafos de uma página web são definidos através do elemento p. Assim como os títulos,
normalmente, os navegadores definem os parágrafos como block-level elements. Dessa forma, por
padrão, eles ocupam horizontalmente todo o espaço do elemento pai.

Os navegadores ajustam os textos dos parágrafos à largura do elemento pai. As quebras de linha
necessárias são inseridas automaticamente. Os espaços excedentes definidos em um documento
HTML entre as palavras de um parágrafo são desconsiderados pelos navegadores na exibição das
páginas web. Analogamente, as quebras de linha presentes no documento HTML também são des-
consideradas pelos navegadores.

Caso seja necessário forçar uma quebra de linha entre duas palavras contidas em um parágrafo,
podemos utilizar o elemento br. Quando um parágrafo contém palavras muito longas, os navegado-
res 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 para  grafos </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de para  grafos </ h1 >
9 <p >
1 Este para grafo serve para demonstrar a inserça o
11 automa  tica das quebras de linha .
12
13 Observe tambe  m que os espaços excedentes contidos
14 no documento HTML entre as palavras
15 desse para  grafo sa o desconsiderados
16
17
18 na exibiça o da pa gina web .
19
2 As quebras de linha tambem sa o
21 desconsideradas . O navegador ajusta o texto
22 desse para grafo ao espaço horizontal do
23 corpo da pa
 gina .
24 </ p >
25
26 <p >
27 Neste para  grafo mostramos a inserça o de uma quebra de linha forçada .
28 < br > Percebeu ? < br > Ale
 m disso , podemos indicar ao navegador como quebrar
29 palavra otorrino < wbr > laringo < wbr > logista otorrino < wbr > laringo < wbr > logista
3 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

Código HTML 2.22: Exemplo de parágrafos

Figura 2.16: Exemplo de parágrafos

Character Entities

Para inserir determinados caracteres em um documento HTML, devemos utilizar o código do

caractere desejado. A utilização desses códigos evita problemas de encoding na exibição das páginas
web. Você pode conhecer esses caracteres e os seus respectivos códigos através do seguinte endereço
http..//dev.w3.org/html5/html-author/charref. Esses caracteres são conhecidos como Charac-
ter 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 >
1 < li > & starf ,. & bigstar ,. &# x265 ., &#9733,. </ li >
11 < li > & phone ,. &# x26E ., &#9742,. </ li >
12 < li > & female ,. &# x264 ., &#9792,. </ li >
13 < li > & sung ,. &# x266A ., &#9834,. </ li >
14 </ ul >
15 </ body >
16 </ html >

Código HTML 2.23: Exemplo de character entities

www.facebook.com/k19treinamentos 39
HTML 40

Figura 2.17: Exemplo de character entities

Exercícios de Fixação

10 Crie um novo documento HTML chamado paragrafos.html 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 > Exemplo de para  grafos </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de para  grafos </ h1 >
9 <p >
1 Este para grafo serve para demonstrar a inserça o
11 automa  tica das quebras de linha .
12
13 Observe tambe  m que os espaços excedentes contidos
14 no documento HTML entre as palavras
15 desse para  grafo sa o desconsiderados
16
17
18 na exibiça o da pa gina web .
19
2 As quebras de linha tambem sa o
21 desconsideradas . O navegador ajusta o texto
22 desse para  grafo ao espaço horizontal do
23 corpo da pa
 gina .
24 </ p >
25
26 <p >
27 Neste para  grafo mostramos a inserça o de uma quebra de linha forçada .
28 < br > Percebeu ? < br > Ale m disso , podemos indicar ao navegador como quebrar
29 palavra otorrino < wbr > laringo < wbr > logista otorrino < wbr > laringo < wbr / logista
3 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 >

Código HTML 2.24: paragrafos.html

40 www.k19.com.br
41 HTML

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao1.zip

11 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/paragrafos.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/paragrafos.html.

12 Crie um novo documento HTML chamado character-entities.html 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 > Exemplo de character entities </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de character entities </ h1 >
9 < ul >
1 < li >& starf ,. & bigstar ,. &# x265 ., &#9733,. </ li >
11 < li >& phone ,. &# x26E ., &#9742,. </ li >
12 < li >& female ., &# x264 ., &#9792,. </ li >
13 < li >& sung ,. &# x266A ., &#9834,. </ li >
14 </ ul >
15 </ body >
16 </ html >

Código HTML 2.25: character-entities.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao12.zip

13 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/character-entities.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/character-entities.html.

Texto

Texto pré-formatado

Como vimos, os navegadores desconsideram os espaços excedentes entre as palavras contidas

em um documento HTML assim como desconsideram as quebras de linha. Contudo, é possível in-
serir texto formatado com quantos espaços e quebras de linha desejarmos através do elemento pre.
O texto contido no conteúdo de um elemento pre é exibido com todos os espaços e quebras de linha
inseridos no documento HTML. Além disso, os navegadores costumam utilizar fonte mono espaçada
para mostrar esse texto.

www.facebook.com/k19treinamentos 41
HTML 42

Assim como os títulos e os parágrafos, normalmente, os navegadores definem os textos pré-

formatados como block-level element. Dessa forma, por padrão, eles ocupam todo o espaço ho-
rizontal do elemento pai.

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 pre  - formatado </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de texto pre  - formatado </ h1 >
9 < pre >
1 Os espaços excedentes sa o considerados pelos
11 navegadores . Assim como as
12
13 quebras
14
15 de
16
17 linha . Observe tambe
 m o tipo de fonte utilizada nesse texto .
18 </ pre >
19 </ body >
2 </ html >

Código HTML 2.26: Exemplo de texto pré-formatado

Figura 2.18: Exemplo de texto pré-formatado

Código
Para adicionar códigos em um documento HTML, devemos utilizar o elemento code. Normal-
mente, esse elemento é utilizado para definir códigos escritos em alguma linguagem de programa-
ção. Normalmente, os navegadores utilizam fonte mono espaçada para exibir o conteúdo desse ele-
mento.

Diferentemente dos títulos, dos parágrafos e dos textos pré-formatados, normalmente, os na-
vegadores definem os códigos como inline-level elements. Dessa forma, por padrão, os códigos
ocupam horizontalmente somente o espaço necessário.

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >

42 www.k19.com.br
43 HTML

5 < title > Exemplo de co digos </ title >

6 </ head >
7 < body >
8 < h1 > Exemplo de co
 digos </ h1 >
9 <p >
1 Em Java , utilizamos o co  digo < code > System . out . println ( " K19 " ) ., </ code >.
11 Em C # , utilizamos o co  digo < code > System . Console . WriteLine ( " K19 " ) ., </ code >.
12 </ p >
13 </ body >
14 </ html >

Código HTML 2.27: Exemplo de código

Figura 2.19: Exemplo de código

Elemento i

A especificação da linguagem HTML 5 não é muito precisa na definição da semântica do ele-

mento i. Ela indica a utilização desse elemento para definir nomes científicos, termos técnicos, ex-
pressões idiomáticas em outras línguas, transliterações, pensamentos. Normalmente, os navegado-
res definem o i como inline-level element e exibem o seu conteúdo em itálico.

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 utilizaça o do elemento i </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de utilizaça o do elemento i </ h1 >
9 < ul >
1 < li > Porquinho - da -  ndia ou <i > Cavia porcellus </ i > </ li >
11 < li > <i > Backup </ i >( co  pia de segurança ) </ li >
12 < li > <i > shoot the breeze </ i >( bater papo ou jogar conversa fora ) </ li >
13 < li > <i > Moskva  </ i >( transliteraça o da palavra Moscou em russo ) </ li >
14 < li > <i > Se na o sabes , aprende ,. se ja  sabes , ensina . </ i > ( Confu
 cio ) </ li >
15 </ ul >
16 </ body >
17 </ html >

Código HTML 2.28: Exemplo de utilização do elemento i

www.facebook.com/k19treinamentos 43
HTML 44

Figura 2.20: Exemplo de utilização do elemento i

Elemento b

A especificação da linguagem HTML 5 não é muito precisa na definição da semântica do ele-

mento b. Ela indica, por exemplo, a utilização desse elemento para definir as palavras chave do re-
sumo de um documento e o nome do produto em texto de avaliação. Normalmente, os navegadores
definem o b como inline-level element e exibem o conteúdo 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 utilizaça o do elemento b </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de utilizaça o do elemento b </ h1 >
9 <p >
1 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 > , e  obrigato  rio o conhecimento
13 das linguagens .. <b > HTML </ b > , <b > CSS </ b > e <b > JavaScript </ b >.
14 </ p >
15 </ body >
16 </ html >

Código HTML 2.29: Exemplo de utilização do elemento b

Figura 2.21: Exemplo de utilização do elemento b

44 www.k19.com.br
45 HTML

Texto subscrito ou sobrescrito

Podemos definir textos subscrito ou sobrescrito com os elementos sub e sup respectivamente.
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 texto subscrito ou sobrescrito </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de texto subscrito ou sobrescrito </ h1 >
9 <p >
1 A cidade de Sa o Paulo possui uma a  rea de 1.523 km < sup >2 </ sup >.
11 Em 211 , Sa o Paulo emitiu 16 ,43 milho  es de toneladas de
12 CO < sub >2 </ sub >.
13 </ p >
14 </ body >
15 </ html >

Código HTML 2.30: Exemplo de texto subscrito ou sobrescrito

Figura 2.22: Exemplo de texto subscrito ou sobrescrito

Texto importante ou enfatizado

Podemos definir textos importantes ou enfatizados com os elementos strong e em respectiva-
mente. Por padrão, nos navegadores, o conteúdo de um elemento strong é exibido em negrito e o
conteúdo de um elemento em é exibido em itálico. 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 texto importante ou enfatizado </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de texto importante ou enfatizado </ h1 >
9 <p >
1 O < strong > Brasil </ strong > e o u nico
11 pa  s que ganhou < em > cinco vezes </ em >
12 a < strong > copa do mundo de futebol </ strong >.
13 </ p >
14 </ body >
15 </ html >

www.facebook.com/k19treinamentos 45
HTML 46

Código HTML 2.31: Exemplo de texto importante ou enfatizado

Figura 2.23: Exemplo de texto importante ou enfatizado

Citações
Podemos definir citações longas ou curtas com os elementos blockquote e q respectivamente.
Por padrão, 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 citação.

Também podemos citar, com o elemento cite, títulos de trabalhos, livros, músicas, filmes, pro-
gramas de TV, peças de teatro, entre outros. Por padrão, 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, são 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 citaço  es </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de citaço  es </ h1 >
9 < blockquote cite = " http .. // en . wikipedia . org / wiki / Computer " >
1 <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
2 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 ..
3 <q cite = " http .. // pt . wikipedia . org / wiki / Nelson_Rodrigues " >
31 O adulto na o existe . O homem e  um menino perene
32 </ q >.
33 </ p >
34
35 <p >
36 A peça < cite >A mulher sem pecado </ cite > de Nelson Rodrigues estreou
37 em 1941 no Rio de Janeiro .
38 </ p >
39 </ body >
4 </ html >

Código HTML 2.32: Exemplo de citações

Figura 2.24: Exemplo de citações

Abreviações
Podemos definir abreviações com o elemento abbr. Por padrão, esse elemento é exibido como
elemento de linha. O atributo title desse elemento é utilizado para definir um tootip. 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 abreviaço  es </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de abreviaço  es </ h1 >
9 <p >
1 O < abbr title = " Instituto de Matema  tica e Estat  stica " > IME </ abbr > e
11 uma das unidades da < abbr title = " Universidade de Sa o Paulo " > USP </ abbr >.
12 </ p >
13 </ body >
14 </ html >

Código HTML 2.33: Exemplo de abreviações

www.facebook.com/k19treinamentos 47
HTML 48

Figura 2.25: Exemplo de abreviações

Definições

Podemos inserir definições em um documento HTML com o elemento dfn. Por padrão, 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 definiço  es </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de definiço  es </ h1 >
9 <p >
1 Um < dfn > pingado </ dfn > e
 um copo de cafe  com um pouco de leite . < br >
11 Uma < dfn > bomba de chocolate </ dfn > e  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 >

Código HTML 2.34: Exemplo de definições

Figura 2.26: Exemplo de definições

48 www.k19.com.br
49 HTML

Alterações
Em alguns casos, é importante informar que o texto de um documento HTML sofreu alterações.
Um texto que foi acrescentado em um documento HTML deve ser definido com o elemento ins.
Um texto que não 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 padrão,
esses elementos são 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 alteraço  es </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de alteraço  es </ h1 >
9 <p >
1 Natal e  a capital do Rio Grande do Norte . < ins > Sua fundaça o foi
11 em 25 de dezembro de 1599. </ ins > < del >A a  rea total dessa cidade e 
12 167 ,263 km < sup >2 </ sup > </ del >. <s > De acordo com o IBGE , a populaça o
13 dessa cidade e  de 774.23 habitantes . </ s > De acordo com o IBGE a
14 populaça o dessa cidade e  de 83.739 habitantes .
15 </ p >
16 </ body >
17 </ html >

Código HTML 2.35: Exemplo de alterações

Figura 2.27: Exemplo de alterações

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 alteração. O atributo datetime deve
ser utilizado para informar quando ocorreu a alteração.

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 alteraço  es </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de alteraço  es </ h1 >
9 <p >
1 Natal e  a capital do Rio Grande do Norte . < ins cite = " ins - explicacao . html "
11 datetime = " 213 -1 -15 T22 .. 55.
. 3 Z " > Sua fundaça o foi em 25 de dezembro de

www.facebook.com/k19treinamentos 49
HTML 50

12 1599. </ ins > < del cite = " del - explicacao . html " datetime = " 213 -1 -1 T17 .. 43.
. 7 Z " >A
13  rea total dessa cidade e
a  167 ,263 km < sup >2 </ sup > </ del >. <s > De acordo com o
14 IBGE , a populaça o dessa cidade e  de 774.23 habitantes . </ s > De acordo com o
15 IBGE a populaça o dessa cidade e  de 83.739 habitantes .
16 </ p >
17 </ body >
18 </ html >

Código HTML 2.36: Exemplo de alterações

Data e hora

O elemento time permite que datas e horários sejam definidos em um documento HTML. Há
duas formas de utilizar esse elemento. A primeira é definir a data e o horário desejado no con-
teúdo do elemento time. A segunda é definir a data e o horário desejado no valor do atributo date-
time. Nessas duas opções, as datas e os horários devem ser escritos seguindo o formato definido na
especificação da linguagem HTML (http. .//www.w3.org/TR/html5/text-level-semantics.html#
the-time-element). Quando utilizamos o atributo datetime, o conteúdo do elemento time não pre-
cisa seguir um formato específico. 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 >
1 < li > < time > 21 -8 </ time > </ li >
11 < li > < time > 1984 -1 -3 </ time > </ li >
12 < li > < time > 12 -25 </ time > </ li >
13 < li > < time > 9..  </ time > </ li >
14 < li > < time > 213 -12 -25 23.. 59 </ time > </ li >
15 < li > < time datetime = " 21 -8 " > Fundaça o da K19 </ time > </ li >
16 < li > < time datetime = " 1984 -1 -3 " > Aniversa  rio do Rafael </ time > </ li >
17 < li > < time datetime = " 12 -25 " > Natal </ time > </ li >
18 < li > < time datetime = " 9. .  " > Hora
 rio de Entrada </ time > </ li >
19 < li > < time datetime = " 213 -12 -31 23.. 59. . 59 " > Ano Novo 214 </ time > </ li >
2 </ ul >
21 </ body >
22 </ html >

Código HTML 2.37: Exemplo de datas e horas

50 www.k19.com.br
51 HTML

Figura 2.28: Exemplo de datas e horas

Texto marcado

O elemento mark permite que determinados trechos de um texto sejam marcados. Normal-
mente, 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 >
1 < mark > Java </ mark > e < mark >C # </ mark > sa o linguagens de programaça o
11 < mark > orientadas a objeto </ mark >.
12 </ p >
13 </ body >
14 </ html >

Código HTML 2.38: Exemplo de texto marcado

Figura 2.29: Exemplo de texto marcado

www.facebook.com/k19treinamentos 51
HTML 52

Exercícios de Fixação

14 Crie um novo documento HTML chamado texto-pre-formatado.html 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 > Exemplo de texto pre  - formatado </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de texto pre  - formatado </ h1 >
9 < pre >
1 Os espaços excedentes sa o considerados pelos
11 navegadores . Assim como as
12
13 quebras
14
15 de
16
17 linha . Observe tambe
 m o tipo de fonte utilizada nesse texto .
18 </ pre >
19 </ body >
2 </ html >

Código HTML 2.39: texto-pre-formatado.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao14.zip

15 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/texto-pre-formatado.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/texto-pre-formatado.html.

16 Crie um novo documento HTML chamado codigo.html 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 > Exemplo de co  digos </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de co  digos </ h1 >
9 <p >
1 Em Java , utilizamos o co  digo < code > System . out . println ( " K19 " ) ., </ code >
11 Em C # , utilizamos o co  digo < code > System . Console . WriteLine ( " K19 " ) ., </ code >
12 </ p >
13 </ body >
14 </ html >

Código HTML 2.40: codigo.html

52 www.k19.com.br
53 HTML

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao16.zip

17 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/codigo.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/codigo.html.

18 Crie um novo documento HTML chamado i.html 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 > Exemplo de utilizaça o do elemento i </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de utilizaça o do elemento i </ h1 >
9 < ul >
1 < li > Porquinho - da -  ndia ou <i > Cavia porcellus </ i > </ li >
11 < li > <i > Backup </ i >( co  pia de segurança ) </ li >
12 < li > <i > shoot the breeze </ i >( bater papo ou jogar conversa fora ) </ li >
13 < li > <i > Moskva  </ i >( transliteraça o da palavra Moscou em russo ) </ li >
14 < li > <i > Se na o sabes , aprende ,. se ja  sabes , ensina . </ i > ( Confu
 cio ) </ li >
15 </ ul >
16 </ body >
17 </ html >

Código HTML 2.41: i.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao18.zip

19 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/i.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/i.html.

20 Crie um novo documento HTML chamado b.html 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 > Exemplo de utilizaça o do elemento b </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de utilizaça o do elemento b </ h1 >
9 <p >
1 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 > , e  obrigato  rio o conhecimento
13 das linguagens .. <b > HTML </ b > , <b > CSS </ b > e <b > JavaScript </ b >.
14 </ p >

www.facebook.com/k19treinamentos 53
HTML 54

15 </ body >

16 </ html >

Código HTML 2.42: b.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao2.zip

21 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/b.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/b.html.

22 Crie um novo documento HTML chamado texto-subscrito-sobrescrito.html 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 > Exemplo de texto subscrito ou sobrescrito </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de texto subscrito ou sobrescrito </ h1 >
9 <p >
1 A cidade de Sa o Paulo possui uma a  rea de 1.523 km < sup >2 </ sup >.
11 Em 211 , Sa o Paulo emitiu 16 ,43 milho  es de toneladas de
12 CO < sub >2 </ sub >.
13 </ p >
14 </ body >
15 </ html >

Código HTML 2.43: texto-subscrito-sobrescrito.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao22.zip

23 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/texto-subscrito-sobrescrito.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/texto-subscrito-sobrescrito.html.

24 Crie um novo documento HTML chamado texto-importante-enfatizado.html 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 > Exemplo de texto importante ou enfatizado </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de texto importante ou enfatizado </ h1 >

54 www.k19.com.br
55 HTML

9 <p >
1 O < strong > Brasil </ strong > e
 o u
 nico
11 pa  s que ganhou < em > cinco vezes </ em >
12 a < strong > copa do mundo de futebol </ strong >.
13 </ p >
14 </ body >
15 </ html >

Código HTML 2.44: texto-importante-enfatizado.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao24.zip

25 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/texto-importante-enfatizado.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/texto-importante-enfatizado.html.

26 Crie um novo documento HTML chamado citacoes.html 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 > Exemplo de citaço  es </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de citaço  es </ h1 >
9 < blockquote cite = " http .. // en . wikipedia . org / wiki / Computer " >
1 <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
2 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
28 <p >
29 Nelson Rodrigues disse ..
3 <q cite = " http .. // pt . wikipedia . org / wiki / Nelson_Rodrigues " >
31 O adulto na o existe . O homem e  um menino perene
32 </ q >.
33 </ p >
34
35 <p >
36 A peça < cite >A mulher sem pecado </ cite > de Nelson Rodrigues estreou
37 em 1941 no Rio de Janeiro .
38 </ p >
39 </ body >
4 </ html >

Código HTML 2.45: citacoes.html

www.facebook.com/k19treinamentos 55
HTML 56

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao26.zip

27 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/citacoes.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/citacoes.html.

28 Crie um novo documento HTML chamado abreviacoes.html 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 > Exemplo de abreviaço  es </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de abreviaço  es </ h1 >
9 <p >
1 O < abbr title = " Instituto de Matema  tica e Estat  stica " > IME </ abbr > e
11 uma das unidades da < abbr title = " Universidade de Sa o Paulo " > USP </ abbr >.
12 </ p >
13 </ body >
14 </ html >

Código HTML 2.46: abreviacoes.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao28.zip

29 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/abreviacoes.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/abreviacoes.html.

30 Crie um novo documento HTML chamado definicoes.html 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 > Exemplo de definiço  es </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de definiço  es </ h1 >
9 <p >
1 Um < dfn > pingado </ dfn > e um copo de cafe  com um pouco de leite . < br >
11 Uma < dfn > bomba de chocolate </ dfn > e  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 >

Código HTML 2.47: definicoes.html

56 www.k19.com.br
57 HTML

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao3.zip

31 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/definicoes.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/definicoes.html.

32 Crie um novo documento HTML chamado alteracoes.html 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 > Exemplo de alteraço  es </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de alteraço  es </ h1 >
9 <p >
1 Natal e  a capital do Rio Grande do Norte . < ins > Sua fundaça o foi
11 em 25 de dezembro de 1599. </ ins > < del >A a  rea total dessa cidade e 
12 167 ,263 km < sup >2 </ sup > </ del >. <s > De acordo com o IBGE , a populaça o
13 dessa cidade e  de 774.23 habitantes . </ s > De acordo com o IBGE a
14 populaça o dessa cidade e  de 83.739 habitantes .
15 </ p >
16 </ body >
17 </ html >

Código HTML 2.48: alteracoes.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao32.zip

33 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/alteracoes.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/alteracoes.html.

34 Crie um novo documento HTML chamado data-hora.html 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 > Exemplo de datas e horas </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de datas e horas </ h1 >
9 < ul >
1 < li > < time > 21 -8 </ time > </ li >
11 < li > < time > 1984 -1 -3 </ time > </ li >
12 < li > < time > 12 -25 </ time > </ li >
13 < li > < time > 9..  </ time > </ li >
14 < li > < time > 213 -12 -25 23.. 59 </ time > </ li >

www.facebook.com/k19treinamentos 57
HTML 58

15 < li > < time datetime = " 21 -8 " > Fundaça o da K19 </ time > </ li >
16 < li > < time datetime = " 1984 -1 -3 " > Aniversa  rio do Rafael </ time > </ li >
17 < li > < time datetime = " 12 -25 " > Natal </ time > </ li >
18 < li > < time datetime = " 9..  " > Hora
 rio de Entrada </ time > </ li >
19 < li > < time datetime = " 213 -12 -31 23.. 59. . 59 " > Ano Novo 214 </ time > </ li >
2 </ ul >
21 </ body >
22 </ html >

Código HTML 2.49: data-hora.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao34.zip

35 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/data-hora.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/data-hora.html.

36 Crie um novo documento HTML chamado mark.html 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 > Exemplo de texto marcado </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de texto marcado </ h1 >
9 <p >
1 < mark > Java </ mark > e < mark >C # </ mark > sa o linguagens de programaça o
11 < mark > orientadas a objeto </ mark >.
12 </ p >
13 </ body >
14 </ html >

Código HTML 2.50: mark.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao36.zip

37 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/mark.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/mark.html.

Listas

A linguagem HTML define três tipos distintos de listas.

• Lista de descrições

58 www.k19.com.br
59 HTML

• Lista com ordem

• Lista sem ordem

Lista de descrições

Para criar uma lista de descrições, devemos utilizar o elemento dl. Essas listas são formadas
por termos ou nomes e as suas respectivas descrições. Os termos ou nomes são definidos com o
elemento dt. As descrições são 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 descriço  es </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de lista de descriço  es </ h1 >
9 < dl >
1 < dt > K1 - Lo gica de Programaça o </ dt >
11 < dd >
12 Conhecimentos em Lo  gica de Programaça o e  o pre
 - requisito fundamental
13 para que uma pessoa consiga aprender qualquer Linguagem de Programaça o ...
14 </ dd >
15 < dt > K2 - 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 >
2 < dt > K3 - SQL e Modelo Relacional </ dt >
21 < dd >
22 Como as aplicaço  es corporativas necessitam armazenar dados e  fundamental
23 que os desenvolvedores possuam conhecimentos sobre persiste  ncia de dados .
24 </ dd >
25 </ dl >
26 </ body >
27 </ html >

Código HTML 2.51: Exemplo de lista de descrições

Figura 2.30: Exemplo de lista de descrições

www.facebook.com/k19treinamentos 59
HTML 60

Lista com ordem

Para criar uma lista com ordem, devemos utilizar o elemento ol. Os itens de uma lista com or-
dem são definidos com o elemento li. 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 com ordem </ title >
6 </ head >
7 < body >
8 < h1 > Macarra o instanta neo - K19 Receitas </ h1 >
9 < h2 > Modo de preparo </ h2 >
1
11 < ol >
12 < li > Ferver 6 ml de a  gua em uma panela . </ li >
13 < li > Retirar o macarra o do pacote . </ li >
14 < li > Colocar o macarra o na panela no fogo baixo . </ li >
15 < li > Cozinhar o macarra o por 3 min . </ li >
16 < li > Temperar a gosto . </ li >
17 </ ol >
18 </ body >
19 </ html >

Código HTML 2.52: Exemplo de lista com ordem

Figura 2.31: Exemplo de lista com ordem

Lista sem ordem

Para criar uma lista sem ordem, devemos utilizar o elemento ul. Os itens de uma lista sem or-
dem são definidos com o elemento li. 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 sem ordem </ title >
6 </ head >
7 < body >
8 < h1 > K2 - Desenvolvimento Web com HTML , CSS e JavaScript </ h1 >
9 < h2 >Pre - requisitos </ h2 >

60 www.k19.com.br
61 HTML

1
11 < ul >
12 < li > Conhecimento de algum sistema operacional ( Windows / Linux / MacOS X ) </ li >
13 < li > Lo
 gica de programaça o </ li >
14 </ ul >
15 </ body >
16 </ html >

Código HTML 2.53: Exemplo de lista sem ordem

Figura 2.32: Exemplo de lista sem ordem

Listas aninhadas
Uma lista pode ser definida dentro de outra lista. Quando listas sem ordem são aninhadas, nor-
malmente, 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 >
1 < ul >
11 < li >
12 Europa
13 < ul >
14 < li > Portugual </ li >
15 < li > França </ li >
16 < li > Alemanha </ li >
17 </ ul >
18 </ li >
19 < li >
2 Ásia
21 < ul >
22 < li > Japa o </ li >
23 < li > China </ li >
24 < li > Índia </ li >
25 </ ul >
26 </ li >
27 </ ul >
28 < h2 > Cronograma da minha viagem </ h2 >
29 < ol >
3 < li >
31 Europa

www.facebook.com/k19treinamentos 61
HTML 62

32 < ol >
33 < li > Portugual </ li >
34 < li > França </ li >
35 < li > Alemanha </ li >
36 </ ol >
37 </ li >
38 < li >
39 Ásia
4 < ol >
41 < li > Japa o </ li >
42 < li > China </ li >
43 < li > Índia </ li >
44 </ ol >
45 </ li >
46 </ ol >
47 </ body >
48 </ html >

Código HTML 2.54: Exemplo de listas aninhadas

Figura 2.33: Exemplo de lista aninhadas

Exercícios de Fixação

38 Crie um novo documento HTML chamado lista-descricoes.html no projeto html em Site Root.

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >

62 www.k19.com.br
63 HTML

4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Exemplo de lista de descriço  es </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de lista de descriço  es </ h1 >
9 < dl >
1 < dt > K1 - Lo
 gica de Programaça o </ dt >
11 < dd >
12 Conhecimentos em Lo  gica de Programaça o e  o pre
 - requisito fundamental
13 para que uma pessoa consiga aprender qualquer Linguagem de Programaça o ...
14 </ dd >
15 < dt > K2 - 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 >
2 < dt > K3 - SQL e Modelo Relacional </ dt >
21 < dd >
22 Como as aplicaço  es corporativas necessitam armazenar dados e  fundamental
23 que os desenvolvedores possuam conhecimentos sobre persiste  ncia de dados .
24 </ dd >
25 </ dl >
26 </ body >
27 </ html >

Código HTML 2.55: lista-descricoes.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao38.zip

39 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/lista-descricoes.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/lista-descricoes.html.

40 Crie um novo documento HTML chamado lista-com-ordem.html 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 > Exemplo de lista com ordem </ title >
6 </ head >
7 < body >
8 < h1 > Macarra o instanta neo - K19 Receitas </ h1 >
9 < h2 > Modo de preparo </ h2 >
1
11 < ol >
12 < li > Ferver 6 ml de a  gua em uma panela . </ li >
13 < li > Retirar o macarra o do pacote . </ li >
14 < li > Colocar o macarra o na panela no fogo baixo . </ li >
15 < li > Cozinhar o macarra o por 3 min . </ li >
16 < li > Temperar a gosto . </ li >
17 </ ol >
18 </ body >
19 </ html >

Código HTML 2.56: lista-com-ordem.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao4.zip

www.facebook.com/k19treinamentos 63
HTML 64

41 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/lista-com-ordem.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/lista-com-ordem.html.

42 Crie um novo documento HTML chamado lista-sem-ordem.html 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 > Exemplo de lista sem ordem </ title >
6 </ head >
7 < body >
8 < h1 > K2 - Desenvolvimento Web com HTML , CSS e JavaScript </ h1 >
9 < h2 >Pre - requisitos </ h2 >
1
11 < ul >
12 < li > Conhecimento de algum sistema operacional ( Windows / Linux / MacOS X ) </ li >
13 < li > Lo
 gica de programaça o </ li >
14 </ ul >
15 </ body >
16 </ html >

Código HTML 2.57: lista-sem-ordem.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao42.zip

43 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/lista-sem-ordem.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/lista-sem-ordem.html.

44 Crie um novo documento HTML chamado listas-aninhadas.html 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 > Exemplo de listas aninhadas </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de listas aninhadas </ h1 >
9 < h2 > Continentes </ h2 >
1 < ul >
11 < li >
12 Europa
13 < ul >
14 < li > Portugual </ li >
15 < li > França </ li >
16 < li > Alemanha </ li >
17 </ ul >
18 </ li >
19 < li >

64 www.k19.com.br
65 HTML

2 Ásia
21 < ul >
22 < li > Japa o </ li >
23 < li > China </ li >
24 < li > Índia </ li >
25 </ ul >
26 </ li >
27 </ ul >
28 < h2 > Cronograma da minha viagem </ h2 >
29 < ol >
3 < li >
31 Europa
32 < ol >
33 < li > Portugual </ li >
34 < li > França </ li >
35 < li > Alemanha </ li >
36 </ ol >
37 </ li >
38 < li >
39 Ásia
4 < ol >
41 < li > Japa o </ li >
42 < li > China </ li >
43 < li > Índia </ li >
44 </ ol >
45 </ li >
46 </ ol >
47 </ body >
48 </ html >

Código HTML 2.58: listas-aninhadas.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao44.zip

45 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/listas-aninhadas.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/listas-aninhadas.html.

46 Crie um novo documento HTML chamado restaurante.html 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 > Menu - K19 Pizzaria </ title >
6 </ head >
7 < body >
8 < h1 > Menu - K19 Pizzaria </ h1 >
9
1 < dl >
11 < dt >À moda da casa </ dt >
12 < dd >
13 Presunto coberto com mussarela , ovos e palmito .
14 </ dd >
15 < dt >À moda do pizzaiolo </ dt >
16 < dd >
17 Mussarela , presunto , ovos e bacon .
18 </ dd >
19 < dt > Aliche </ dt >
2 < dd >

www.facebook.com/k19treinamentos 65
HTML 66

21 Aliche , parmesa o e rodelas de tomate .

22 </ dd >
23 </ dl >
24 </ body >
25 </ html >

Código HTML 2.59: restaurante.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao46.zip

47 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/restaurante.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/restaurante.html.

48 Crie um novo documento HTML chamado manual.html 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 > Operaça o de saque - Manual do caixa eletro  nico - K19 Bank </ title >
6 </ head >
7 < body >
8 < h1 > Operaça o de saque - Manual do caixa eletro  nico - K19 Bank </ h1 >
9
1 < ol >
11 < li > Insira o carta o </ li >
12 < li > Digite a senha </ li >
13 < li > Escolha a opça o de saque </ li >
14 < li > Informe o valor que deseja sacar </ li >
15 < li > Insira o carta o novamente </ li >
16 < li > Aguarde ate  a liberaça o do dinheiro </ li >
17 </ ol >
18 </ body >
19 </ html >

Código HTML 2.60: manual.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao48.zip

49 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/manual.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/manual.html.

50 Crie um novo documento HTML chamado cursos.html no projeto html em Site Root.

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >

66 www.k19.com.br
67 HTML

4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > K - Formaça o Ba  sica - K19 Treinamentos </ title >
6 </ head >
7 < body >
8 < h1 > K - Formaça o Ba sica </ h1 >
9
1 < ul >
11 < li > K1 - Lo
 gica de Programaça o </ li >
12 < li > K2 - Desenvolvimento Web com HTML , CSS e JavaScript </ li >
13 < li > K3 - SQL e Modelo Relacional </ li >
14 </ ul >
15 </ body >
16 </ html >

Código HTML 2.61: cursos.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao5.zip

51 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/cursos.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/cursos.html.

52 Crie um novo documento HTML chamado formacoes.html 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 > Formaço  es - K19 Treinamentos </ title >
6 </ head >
7 < body >
8 < h1 > Formaço  es - K19 Treinamentos </ h1 >
9 < ul >
1 < li >
11 K - Formaça o Ba  sica
12 < ul >
13 < li > K1 - Lo  gica de Programaça o </ li >
14 < li > K2 - Desenvolvimento Web com HTML , CSS e JavaScript </ li >
15 < li > K3 - SQL e Modelo Relacional </ li >
16 </ ul >
17 </ li >
18 < li >
19 K1 - Formaça o Desenvolvedor Java
2 < ul >
21 < li > K11 - Orientaça o a Objetos em Java </ li >
22 < li > K12 - Desenvolvimento Web com JSF2 e JPA2 </ li >
23 </ ul >
24 </ li >
25 < li >
26 K3 - Formaça o Desenvolvedor . NET
27 < ul >
28 < li > K31 - C # e Orientaça o a Objetos </ li >
29 < li > K32 - Desenvolvimento Web com ASP . NET MVC </ li >
3 </ ul >
31 </ li >
32 </ ul >
33 </ body >
34 </ html >

Código HTML 2.62: formacoes.html

www.facebook.com/k19treinamentos 67
HTML 68

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao52.zip

53 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/formacoes.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/formacoes.html.

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 conteúdo do ele-
mento iframe é utilizado pelos navegadores que não oferecem suporte a esse elemento. Normal-
mente, 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 " >
1 Esse navegador na o suporta o elemento <i > iframe </ i >.
11 </ iframe >
12 < iframe src = " http .. // www . usp . br " >
13 Esse navegador na o suporta o elemento <i > iframe </ i >.
14 </ iframe >
15 </ body >
16 </ html >

Código HTML 2.63: Exemplo de frames

Figura 2.34: Exemplo de frames

68 www.k19.com.br
69 HTML

Importante
No início do crescimento da Internet, um grande número de sites utilizavam iframes.
Hoje em dia, os especialistas em design web não recomendam mais utilização desse
recurso. Então, evite a utilização de iframes.

Links

Normalmente, um site é formado por um conjunto de páginas que estão interligadas de alguma
forma. Para permitir que um usuário navegue de uma página para outra, devemos utilizar os links.
Basicamente, um link faz a ligação de uma página para outra do mesmo site (link interno) ou para
uma página de outro site (link externo).

Para criarmos um link, devemos utilizar o elemento a. Esse elemento possui um atributo cha-
mado href. O valor desse atributo indica o caminho relativo ou absoluto de uma outra página. Nor-
malmente, 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 >
1 <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 >
2 </ html >

Código HTML 2.64: Exemplo de links

Figura 2.35: Exemplo de links

www.facebook.com/k19treinamentos 69
HTML 70

Além 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
contém o link.
• _parent: Abre o destino do link na janela ou no frame onde está contido o frame que exibe o
documento que contém o link.
• _top: Abre o destino do link na janela que é “ancestral” do frame que exibe o documento que
contém 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 não 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 padrão, o destino de um link é aberto na mesma página ou frame onde ele está contido. Em
outras palavras, se o atributo target não for definido explicitamente, o padrão é 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 >
1 <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 >
2 </ html >

Código HTML 2.65: Exemplo de links com target

Exercícios de Fixação

54 Crie dois arquivos chamados links-origem.html e links-destino.html dentro do 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 " >

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 >
1 < 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 >

Código HTML 2.66: links-origem.html

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 - destino </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de links - destino </ h1 >
9 </ body >
1 </ html >

Código HTML 2.67: links-destino.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao54.zip

55 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/links-origem.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/links-origem.html.

Âncoras

Além de criar links para outras páginas, podemos criar um link para uma determinada seção
de um documento HTML. Esse recurso é chamado de ancoragem. O primeiro passo para utilizar
esse recurso é identificar a seção que será o destino desse link. Essa identificação é 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 seções de acordo com a sintaxe do exemplo a
seguir. Observe a utilização 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 a ncoras </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de a ncoras </ h1 >
9 < ul >
1 < li >
11 <a href = " # brasil " > Brasil </ a >

www.facebook.com/k19treinamentos 71
HTML 72

12 </ li >
13 < li >
14 <a href = " # historia " > Histo  ria </ a >
15 </ li >
16 < li >
17 <a href = " # geografia " > Geografia </ a >
18 </ li >
19 < li >
2 <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
3 < h3 id = " historia " > Histo  ria </ h3 >
31 ...
32
33 < h3 id = " geografia " > Geografia </ h3 >
34 ...
35
36 < h3 id = " demografia " > Demografia </ h3 >
37 ...
38 </ body >
39 </ html >

Código HTML 2.68: Exemplo de âncoras

Figura 2.36: Exemplo de âncoras

72 www.k19.com.br
73 HTML

Exercícios de Fixação

56 Crie um documento HTML chamado ancoras1.html no projeto html em Site Root. Adicione
um link para uma seção dentro desse documento. Dica: insira conteúdo suficiente para que a barra
de rolagem vertical do navegador apareça.

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 a ncoras </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de a ncoras </ h2 >
9 < ul >
1 < li >
11 <a href = " # sobre " > Sobre o texto dessa pa  gina </ a >
12 </ li >
13 </ ul >
14
15 <p > Lorem ipsum dolor sit amet , consectetur adipiscing elit . Donec justo
16 massa , sodales sit amet eleifend a , elementum eu nibh . Donec egestas dolor
17 quis turpis dictum tincidunt . Donec blandit tempus velit , sit amet
18 adipiscing velit consequat placerat . Curabitur id mauris . </ p >
19
2 <p > ... </ p >
21
22 <p > ... </ p >
23
24 <p > ... </ p >
25
26 <p > At nisi imperdiet lacinia . Ut quis arcu at nisl ornare viverra .
27 Duis vel tristique tellus . Maecenas ultrices placerat tortor . Pellentesque
28 feugiat accumsan commodo . Proin non urna justo , id pulvinar lacus . </ p >
29
3 < h2 id = " sobre " > Sobre o texto dessa pa  gina </ h2 >
31 <p >
32 O texto dessa pa  gina foi gerado atrave  s do site ..
33 <a href = " http .. // www . lipsum . com / " > http .. // www . lipsum . com / </ a >
34 </ p >
35 </ body >
36 </ html >

Código HTML 2.69: ancoras1.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao56.zip

57 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/ancoras1.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/ancoras1.html.

58 Crie um novo arquivo chamado ancoras2.html no projeto html em Site Root. Identifique uma
seção com o nome ok. Dica: insira conteúdo suficiente para que a barra de rolagem vertical do

www.facebook.com/k19treinamentos 73
HTML 74

navegador apareça.

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Exerc  cio sobre a ncoras </ title >
6 </ head >
7 < body >
8 < h1 > Ancora pa  gina 2 </ h1 >
9
1 <p > Lorem ipsum dolor sit amet , consectetur adipiscing elit . Donec justo
11 massa , sodales sit amet eleifend a , elementum eu nibh . Donec egestas dolor
12 quis turpis dictum tincidunt . Donec blandit tempus velit , sit amet
13 adipiscing velit consequat placerat . Curabitur id mauris </ p >
14 <p > ... </ p >
15 <p > ... </ p >
16 <p > ... </ p >
17
18 <p > at nisi imperdiet lacinia . Ut quis arcu at nisl ornare viverra .
19 Duis vel tristique tellus . Maecenas ultrices placerat tortor . Pellentesque
2 feugiat accumsan commodo . Proin non urna justo , id pulvinar lacus . </ p >
21
22 < h2 id = " ok " > OK </ h2 >
23
24 <p > Se voce  chegou aqui deu tudo certo ! .. ) </ p >
25 </ body >
26 </ html >

Código HTML 2.70: ancoras2.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao58.zip

59 Crie um novo link no arquivo ancora1.html que aponte para âncora ok do arquivo ancoras2.html.

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 a ncoras </ title >
6 </ head >
7 < body >
8 < h1 > Exemplo de a ncoras </ h2 >
9 < ul >
1 < li >
11 <a href = " # sobre " > Sobre o texto dessa pa  gina </ a >
12 </ li >
13 < li >
14 <a href = " ancoras2 . html # ok " > Seça o OK </ a >
15 </ li >
16 </ ul >
17
18 <p > Lorem ipsum dolor sit amet , consectetur adipiscing elit . Donec justo
19 massa , sodales sit amet eleifend a , elementum eu nibh . Donec egestas dolor
2 quis turpis dictum tincidunt . Donec blandit tempus velit , sit amet
21 adipiscing velit consequat placerat . Curabitur id mauris . </ p >
22
23 <p > ... </ p >
24
25 <p > ... </ p >
26
27 <p > ... </ p >
28
29 <p > At nisi imperdiet lacinia . Ut quis arcu at nisl ornare viverra .
3 Duis vel tristique tellus . Maecenas ultrices placerat tortor . Pellentesque
31 feugiat accumsan commodo . Proin non urna justo , id pulvinar lacus . </ p >
32

74 www.k19.com.br
75 HTML

33 < h2 id = " sobre " > Sobre o texto dessa pa  gina </ h2 >
34 <p >
35 O texto dessa pa  gina foi gerado atrave  s do site ..
36 <a href = " http .. // www . lipsum . com / " > http .. // www . lipsum . com / </ a >
37 </ p >
38 </ body >
39 </ html >

Código HTML 2.71: ancoras1.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao59.zip

60 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/ancoras1.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/ancoras1.html.

Imagens

Certamente, os sites seriam muito entediantes se não fosse possível adicionar imagens ao con-
teúdo das páginas. 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 inline-
level element.

O elemento img possui um atributo obrigatório chamado alt. Esse atributo define um texto al-
ternativo 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 " / >
1
11 < h2 > Cursos </ h2 >
12 < ul >
13 < li >
14 < img src = " http .. // www . k19 . com . br / css / img / k1 - logo - large . png " alt = " K1 " / >
15 K1 - Lo gica de Programaça o
16 </ li >
17 < li >
18 < img src = " http .. // www . k19 . com . br / css / img / k2 - logo - large . png " alt = " K2 " / >
19 K2 - Desenvolvimento Web com HTML , CSS e JavaScript
2 </ li >
21 < li >
22 < img src = " http .. // www . k19 . com . br / css / img / k3 - logo - large . png " alt = " K3 " / >
23 K3 - 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 - Orientaça o a Objetos em Java

www.facebook.com/k19treinamentos 75
HTML 76

28 </ li >
29 < li >
3 < img src = " http .. // www . k19 . com . br / css / img / k12 - logo - large . png " alt = " K12 " / >
31 K12 - Desenvolvimento Web com JSF2 e JPA2
32 </ li >
33 </ ul >
34 </ body >
35 </ html >

Código HTML 2.72: Exemplo de imagens

Figura 2.37: Exemplo de imagens

Também 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 " / >

Código HTML 2.73: Exemplo de imagens

URLs absolutas e relativas

Os links e as imagens podem ser adicionados em um documento HTML com URLs absolutas ou
relativas.

76 www.k19.com.br
77 HTML

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
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 >
1 </ body >
11 </ html >

Código HTML 2.74: http://www.k19.com.br/index.html

No exemplo acima, a URL do documento HTML é http://www.k19.com.br/index.html. Nesse

documento, uma imagem e um link foram adicionados com URLs relativas (imagens/k19-logo.png e
paginas/cursos.html). Por padrão, essas URLs são relativas a URL do documento HTML que contém
a imagem e o link. Dessa forma, a URL da imagem é http://www.k19.com.br/imagens/k19-logo.png
e a do link é http://www.k19.com.br/paginas/cursos.html.

A mesma imagem e o mesmo link podem ser adicionados com URL absoluta. 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 > URLs absolutas e relativas </ title >
6 </ head >
7 < body >
8 < img src = " http .. // www . k19 . com . br / imagens / k19 - logo . png " alt = " K19 " >
9 <a href = " http .. // www . k19 . com . br / paginas / cursos . html " > Cursos </ a >
1 </ body >
11 </ html >

Código HTML 2.75: 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 conteúdo 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 " >
1 <a href = " paginas / cursos . html " > Cursos </ a >
11 </ body >
12 </ html >

Código HTML 2.76: www.k19.com.br/index.html

No exemplo acima, a URL da imagem é http://www.k19.com.br/site/imagens/k19-logo.png e a

do link é http://www.k19.com.br/site/paginas/cursos.html.

www.facebook.com/k19treinamentos 77
HTML 78

Exercícios de Fixação

61 Crie um documento HTML em um arquivo chamado imagens.html no projeto html em Site

Root com algumas imagens.

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 " / >
1
11 < h2 > Cursos </ h2 >
12 < ul >
13 < li >
14 < img src = " http .. // www . k19 . com . br / figs / k1 - logo - large . png " alt = " K1 " / >
15 K1 - Lo gica de Programaça o
16 </ li >
17 < li >
18 < img src = " http .. // www . k19 . com . br / figs / k2 - logo - large . png " alt = " K2 " / >
19 K2 - Desenvolvimento Web com HTML , CSS e JavaScript
2 </ li >
21 < li >
22 < img src = " http .. // www . k19 . com . br / figs / k3 - logo - large . png " alt = " K3 " / >
23 K3 - SQL e Modelo Relacional
24 </ li >
25 < li >
26 < img src = " http .. // www . k19 . com . br / figs / k11 - logo - large . png " alt = " K11 " / >
27 K11 - Orientaça o a Objetos em Java
28 </ li >
29 < li >
3 < img src = " http .. // www . k19 . com . br / figs / k12 - logo - large . png " alt = " K12 " / >
31 K12 - Desenvolvimento Web com JSF2 e JPA2
32 </ li >
33 </ ul >
34 </ body >
35 </ html >

Código HTML 2.77: imagens.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao61.zip

62 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/imagens.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/imagens.html.

Tabelas

78 www.k19.com.br
79 HTML

Suponha que você esteja desenvolvendo o site de uma empresa e precisa apresentar alguns re-
latórios em documentos HTML. Considere que os dados desses relatórios são obtidos a partir de
planilhas. Daí surge a necessidade de exibir dados de forma tabular em páginas web.

Para resolver esse problema, podemos utilizar o elemento table. Esse elemento permite apre-
sentar dados de forma tabular. As linhas de uma tabela são definidas com o elemento tr, as células
de títulos com o elemento th e as células de dados com o elemento td. Os elementos th e td pos-
suem um atributo chamado colspan e outro chamado rowspan. O colspan define quantas colunas
uma célula deve ocupar e o rowspan define quantas linhas uma célula 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 >
1 < 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 > 21 </ td >
19 </ tr >
2 < tr >
21 < td > Honda </ td >
22 < td > Civic </ td >
23 < td > 211 </ td >
24 </ tr >
25 < tr >
26 < td > Mitsubishi </ td >
27 < td > Lancer </ td >
28 < td > 212 </ td >
29 </ tr >
3 < tr >
31 < td colspan = " 3 " > Última atualizaça o .. 6/212 </ td >
32 </ tr >
33 </ table >
34 </ body >
35 </ html >

Código HTML 2.78: Exemplo de tabela

www.facebook.com/k19treinamentos 79
HTML 80

Figura 2.38: Exemplo de tabela

Cabeçalho, corpo e rodapé

Para melhorar a semântica das tabelas, podemos definir explicitamente o cabeçalho, o corpo e o
rodapé de uma tabela através 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
1 < 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 >
2 < td colspan = " 3 " > Última atualizaça o .. 6/212 </ td >
21 </ tr >
22 </ tfoot >
23 < tbody >
24 < tr >
25 < td > Toyota </ td >
26 < td > Corolla </ td >
27 < td > 21 </ td >
28 </ tr >
29 < tr >
3 < td > Honda </ td >
31 < td > Civic </ td >
32 < td > 211 </ td >
33 </ tr >
34 < tr >
35 < td > Mitsubishi </ td >
36 < td > Lancer </ td >
37 < td > 212 </ td >
38 </ tr >
39 </ tbody >
4 </ table >
41 </ body >
42 </ html >

80 www.k19.com.br
81 HTML

Código HTML 2.79: Exemplo de tabela

Figura 2.39: Exemplo de tabela

Repare que visualmente não mudou absolutamente nada. Além disso, apareceram mais alguns
elementos: thead, tfoot e tbody.

Qual é a semântica desses elementos?

• thead: define o cabeçalho da tabela

• tfoot: define o rodapé da tabela
• tbody: define o corpo da tabela

Por que complicar? Qual o motivo da existência desses elementos?

• O elemento thead, assim como o tfoot, servem para agrupar as linhas de cabeçalho e de ro-
dapé, respectivamente.
• O código fica mais claro.
• Facilita a aplicação de estilos CSS (através do seletor de elemento)
• Os navegadores podem utilizar barras de rolagem para exibir o conteúdo de uma tabela longa.
Essa característica não é obrigatória.
• Na impressão de uma tabela longa, a ferramenta utilizada pode replicar o cabeçalho e o rodapé
em todas as páginas. Essa característica não é obrigatória.

Títulos
Também podemos definir um título para uma tabela através 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 t  tulo de tabela </ title >
6 </ head >

www.facebook.com/k19treinamentos 81
HTML 82

7 < body >

8 < table >
9 < caption > Carros </ caption >
1 ...
11 </ table >
12 </ body >
13 </ html >

Código HTML 2.80: Exemplo de título de tabela

Figura 2.40: Exemplo de título de tabela

Agrupando colunas

Podemos dividir as colunas de uma tabela em grupos. Normalmente, o principal motivo para
estabelecer essa divisão é poder depois definir formatações específicas 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
1 < 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 >
2 </ html >

Código HTML 2.81: Exemplo de agrupamento de colunas

82 www.k19.com.br
83 HTML

Figura 2.41: Exemplo de agrupamento de colunas

Exercícios de Fixação

63 Crie uma página HTML em um arquivo chamado tabela.html no projeto html em Site Root que
contenha uma tabela de acordo com a imagem abaixo:

Figura 2.42: Exercício para a tag table

www.facebook.com/k19treinamentos 83
HTML 84

As linhas vermelhas foram colocadas na imagem apenas para facilitar a visualização do pro-
blema.

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Exerc  cio de tabela </ title >
6 </ head >
7 < body >
8 < table >
9 < thead >
1 < tr >
11 < th > Marca </ th >
12 < th > Modelo </ th >
13 < th > Ano </ th >
14 </ tr >
15 </ thead >
16 < tfoot >
17 < tr >
18 < td colspan = " 3 " > Última atualizaça o .. 6/212 </ td >
19 </ tr >
2 </ tfoot >
21 < tbody >
22 < tr >
23 < td rowspan = " 2 " > Toyota </ td >
24 < td > Corolla </ td >
25 < td > 21 </ td >
26 </ tr >
27 < tr >
28 < td > Camry </ td >
29 < td > 211 </ td >
3 </ tr >
31
32 < tr >
33 < td rowspan = " 3 " > Honda </ td >
34 < td > Civic </ td >
35 < td > 24 </ td >
36 </ tr >
37 < tr >
38 < td > Fit </ td >
39 < td > 212 </ td >
4 </ tr >
41 < tr >
42 < td > City </ td >
43 < td > 211 </ td >
44 </ tr >
45
46 < tr >
47 < td > Mitsubishi </ td >
48 < td > Lancer </ td >
49 < td > 212 </ td >
5 </ tr >
51 </ tbody >
52 </ table >
53 </ body >
54 </ html >

Código HTML 2.82: tabela.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao63.zip

64 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/tabela.html.

84 www.k19.com.br
85 HTML

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/tabela.html.

65 Altere o arquivo tabela.html do projeto html que está 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 > Exerc cio de tabela </ title >
6 </ head >
7 < body >
8 < table >
9 < caption > Carros </ caption >
1 < colgroup >
11 < col span = " 2 " style = " background - color .. gray " >
12 < col style = " background - color .. yellow " >
13 </ colgroup >
14 ...
15 </ table >
16 </ body >
17 </ html >

Código HTML 2.83: tabela.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao65.zip

66 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/tabela.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/tabela.html.

Formulários

Alguns sites e praticamente todas as aplicações web necessitam obter informações enviadas pe-
los usuários. Por exemplo, considere uma empresa que deseja receber os pedidos dos seus clientes
através do seu site. O site dessa empresa precisa oferecer alguma forma de interação que possibilite
o recebimento de dados fornecidos pelos usuários.

Para tornar os sites e as aplicações web mais interativos, podemos utilizar formulários. Através
dos formulários, os usuários podem enviar informações aos Web Servers.

Para criar um formulário, devemos utilizar o elemento form. Esse elemento possui um atributo
chamado action. O valor desse atributo indica para qual endereço os dados do formulário serão
enviados.

1 < form action = " pagina . html " >

2 ...
3 </ form >

www.facebook.com/k19treinamentos 85
HTML 86

Os formulários são compostos por caixas de texto, checkboxes, radios, caixas de seleção, botões,
entre outros componentes. Provavelmente, você reconhecerá diversos desses componentes na ima-
gem abaixo.

Figura 2.43: Componentes de formulário

Caixas de texto

Geralmente, os formulários possuem uma ou mais caixas de texto. As caixas de texto são adici-
onadas nos documentos HTML através do elemento input. Esse elemento possui um atributo cha-
mado 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 " >

Considere um formulário com diversas caixas de texto. Quando as informações preenchidas

nesse formulário chegarem ao Web Server, certamente, ele precisará saber o que foi preenchido em
cada caixa. Por isso, é necessário identificar esses dados. O atributo name do elemento input é
utilizado para resolver esse problema.

1 < input type = " text " name = " endereco " >
2 < input type = " text " name = " cidade " >

Parâmetros, GET e POST

Vamos analisar como os valores preenchidos nos formulários são enviados aos Web Servers. Con-
sidere o seguinte exemplo.

86 www.k19.com.br
87 HTML

Figura 2.44: Parâmetros HTTP

O formulário acima possui duas caixas de texto. Nas duas, o atributo name foi definido. Quando
as caixas forem preenchidas e o formulário enviado, os dados desse formulário são adicionados na
requisição HTTP.

Figura 2.45: Parâmetros HTTP

Observe na imagem abaixo que os valores preenchidos nas caixas de texto são enviados como
parâmetros na URL da requisição HTTP. Os nomes dos parâmetros são exatamente os nomes defini-
dos nas caixas de texto com o valor do atributo name. Note também que os valores dos parâmetros
ficam expostos na barra de endereço do navegador.

www.facebook.com/k19treinamentos 87
HTML 88

Figura 2.46: Parâmetros HTTP

Muitas vezes, não é adequado exibir os valores dos atributos na barra de endereço dos navega-
dores. 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 requisição HTTP que
o navegador deve realizar para enviar o formulário. Nas requisições do tipo GET, os parâmetros são
adicionados na URL da requisição. Nas requisições do tipo POST, os parâmetros são adicionados no
conteúdo da requisição.

Figura 2.47: Parâmetros HTTP

88 www.k19.com.br
89 HTML

Figura 2.48: Parâmetros HTTP

Figura 2.49: Parâmetros HTTP

Rótulos
Nos formulários, os rótulos são fundamentais para informar aos usuários quais dados devem ser
preenchidos. Para adicionar um rótulo, devemos utilizar o elemento label. Os textos dos rótulos são
definidos no conteúdo desse elemento.

www.facebook.com/k19treinamentos 89
HTML 90

1 < label > Nome .. </ label >

2 < input type = " text " name = " nome " >

Para melhorar a acessibilidade dos documentos HTML, os rótulos devem ser explicitamente as-
sociados aos campos dos formulários. Para estabelecer esse vínculo, o primeiro passo é identificar
os campos através do atributo id. O segundo passo é definir o atributo for do elemento label com o
identificador do campo correspondente ao rótulo.

1 < label for = " nome_id " > Nome .. </ label >
2 < input type = " text " name = " nome " id = " nome_id " >

Figura 2.50: Rótulos

Placeholders

Como vimos, os rótulos são utilizados para informar aos usuários quais dados devem ser preen-
chidos nos formulários. Além dos rótulos, podemos utilizar placeholders para dar dicas ou exemplos
do conteúdo que desejamos em cada caixa de entrada. Um placeholder é criado através 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 " >

Figura 2.51: Placeholder

1 < label for = " nome_id " > Nome .. </ label >
2 < input id = " nome_id " type = " text " name = " nome " placeholder = " Rafael Cosentino " >

Figura 2.52: Placeholder

Botões de submit

Para adicionar um botão de submit em um formulário, podemos utilizar o elemento input com
type igual a submit. Esse tipo de botão envia os dados do formulário para o Web Server. Os textos
desses botões são definidos com o atributo value.

1 < input id = " botao_id " type = " submit " value = " enviar " >

90 www.k19.com.br
91 HTML

Figura 2.53: Botões de submit

Outra forma de adicionar um botão de submit em um documento HTML é utilizar o elemento

button com type igual a submit. Diferentemente do elemento input, o elemento button permite a
criação de botões com imagens além de texto.

1 < button id = " botao_id " type = " submit " >
2 Enviar
3 < img src = " submit . png " alt = " Enviar " >
4 </ button >

Figura 2.54: Botões de submit

Exercícios de Fixação

67 Se você estiver utilizando o Ubuntu, crie um arquivo chamado parametros.php 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 > Para metros </ title >
6 </ head >
7 < body >
8 < h1 > Para metros </ h1 >
9 <? php
1 $params = file_get_contents ( ’ php .. // input ’) . ’& ’ . $_SERVER [ ’ QUERY_STRING ’],.
11 $params = explode ( ’& ’ , $params ) ,.
12
13 echo ’< ul > ’, .
14 foreach ( $params as $param ) {
15 if (! empty ( $param ) ) {
16 .
echo ’ < li > ’,
17 echo urldecode ( $param ) ,.
18 echo ’ </ li > ’,.
19 }
2 }
21 echo ’ </ ul > ’, .
22 ?>
23 </ body >
24 </ html >

Código HTML 2.93: parametros.php

Se você estiver utilizando o Windows, crie um arquivo chamado parametros.asp no projeto html
em Site Root.

www.facebook.com/k19treinamentos 91
HTML 92

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Para metros </ title >
6 </ head >
7 < body >
8 < h1 > Para metros </ h1 >
9 < ul >
1 <%
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
2 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 >
3 </ html >

Código HTML 2.94: parametros.asp

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao67.zip

68 Crie um arquivo chamado formulario-basico.html no projeto html em Site Root com o seguinte
conteúdo.

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Exerc cio de formula  rio ba  sico </ title >
6 </ head >
7 < body >
8 < form action = " parametros . php " method = " post " >
9 < label for = " nome_id " > Nome .. </ label >
1 < input id = " nome_id " type = " text " name = " nome " placeholder = " Seu nome " >
11
12 < label for = " estado_id " > Estado .. </ label >
13 < input id = " estado_id " type = " text " name = " estado " placeholder = " Seu estado " >
14
15 < input type = " submit " value = " Enviar " >
16 </ form >
17 </ body >
18 </ html >

Código HTML 2.95: formulario-basico.html

Importante
No Windows, altere o código acima substituindo o trecho “parametros.php” pelo
trecho “parametros.asp”.

92 www.k19.com.br
93 HTML

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao68.zip

69 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/formulario-basico.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/formulario-basico.html.

Utilize o Chrome DevTools ou o Firebug para verificar os parâmetros enviados através do for-
mulário. Chame o instrutor caso tenha alguma dúvida.

Caixas de entrada específicas

As caixas de texto são componentes muito genéricos. Antes do HTML5, informações de natureza
bem distintas eram obtidas através desses componentes. Para melhorar a semântica dos documen-
tos HTML, tipos específicos de caixas foram adicionados no HTML5.

Caixas de busca

Assim como as caixas de texto, as caixas de busca são adicionadas nos formulário com o elemento
input. A diferença é que o valor do atributo type deve ser search ao invés de text.

1 < input id = " keywords_id " name = " keywords " type = " search " >

As caixas de busca devem ser utilizadas para coletar palavras chave que serão utilizadas em al-
gum tipo de pesquisa. A princípio não há nenhuma diferença prática entre as caixas de texto e as
caixas de busca. Contudo, essa diferenciação adiciona valor semântico aos documentos HTML e
possibilita, por exemplo, que os navegadores diferenciem visualmente esses dois tipos de caixas.

Figura 2.55: Caixas de busca

Caixas de números

Para coletar dados numéricos, podemos utilizar caixas específicas para números. No HTML5, há
dois tipos de caixas para esse propósito. Os dois são 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 sequências nu-
méricas pré-definidas. A principal diferença entre eles é que o primeiro (type=number) deve ofe-
recer um mecanismo preciso para os usuários selecionarem o valor desejado enquanto o segundo

www.facebook.com/k19treinamentos 93
HTML 94

(type=range) não possui essa obrigação. A imagem a seguir mostra uma possível forma dos navega-
dores exibirem essas caixas.

Figura 2.56: Caixas de números

Para definir a sequência dos números que podem ser selecionados pelos usuários, podemos uti-
lizar os atributos min, max e step. Por exemplo, para coletar um número da sequência {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 = "  " max = " 1 " step = " .2 " >
2 < input id = " numero2_id " type = " range " name = " numero2 " min = "  " max = " 1 " step = " .2 " >

Caixas de email, telefone e url

No HTML5 foram definidas caixas de entradas específicas para emails, telefones e urls. Essas
caixas são adicionadas com o elemento input. O valor do atributo type deve ser email, tel e url para
emails, telefones e urls respectivamente.

1 < input id = " email_id " name = " email " type = " email " >
2 < input id = " telefone_id " name = " telefone " type = " tel " >
3 < input id = " url_id " name = " url " type = " url " >

A usabilidade das páginas web melhora com a utilização dessas caixas. Por exemplo, a configu-
ração 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
não precisa conter as letras do alfabeto. Nas caixas de url, teclas especiais como “.com” ou “www”
podem ser adicionadas ao teclado.

94 www.k19.com.br
95 HTML

Figura 2.57: Caixas de email, telefone e url

Caixas de datas e horas

Diversos tipos de caixas de entrada para coletar datas e horas foram adicionados no HTML5.
Todas essas caixas são adicionadas com o elemento input e o valor do atributo type desse elemento
assumirá um dos valores listados a seguir.

• date: Utilizado para coletar data (dia, mês e ano) sem fuso horário.

• datetime: Utilizado para coletar data (dia, mês e ano) e hora (hora, minuto, segundo e fração
de segundo) com fuso horário em UTC.

• datetime-local: Utilizado para coletar data (dia, mês e ano) e hora (hora, minuto, segundo e
fração de segundo) sem fuso horário.

• month: Utilizado para coletar data composta por mês e ano sem fuso horário.

• time: Utilizado para coletar hora (hora, minuto, segundo e fração de segundo) sem fuso horá-
rio.

• week: Utilizado para coletar data composta por semana e ano sem fuso horário.

A criação desses componentes permite que os navegadores melhorem a usabilidade das páginas
web. A forma de exibição das caixas de datas e horas pode facilitar o processo de preenchimento
dos formulários. Inclusive, os navegadores podem exibir esses componentes de formas diferentes de
acordo com o dispositivo (computador, celular, tablet, entre outros).

1 < input id = " data_id " name = " data " type = " date " >
2 < input id = " data_hora_fuso_id " name = " data - hora - fuso " type = " datetime " >
3 < input id = " data_hora_id " name = " data - hora " type = " datetime - local " >
4 < input id = " mes_id " name = " mes " type = " month " >
5 < input id = " hora_id " name = " hora " type = " time " >
6 < input id = " semana_id " name = " semana " type = " week " >

www.facebook.com/k19treinamentos 95
HTML 96

Figura 2.58: date e datetime-local

Figura 2.59: week e month

Figura 2.60: time

Caixas de senha
As senhas devem ser coletadas com caixas específicas para esse tipo de informação. Para adicio-
nar uma caixa de senha em um formulário, devemos utilizar o elemento input com o valor password
para o atributo type. Normalmente, os navegadores utilizam símbolos como o asterisco ou o círculo
para omitir o conteúdo das caixas de senha.

1 < input id = " senha_id " name = " senha " type = " password " >

Figura 2.61: Caixa de senha

Caixas de texto longo

Para coletar um texto com várias linhas, podemos utilizar o elemento textarea. A quantidade de
linhas de um textarea é definida com o atributo rows e a quantidade de colunas com o atributo cols.

96 www.k19.com.br
97 HTML

Esse elemento também possui o atributo name que funciona como no elemento input.

1 < textarea id = " mensagem_id " name = " mensagem " rows = " 5 " cols = " 5 " >
2
3 </ textarea >

Podemos definir o limite de caracteres que podem ser inseridos no conteúdo do elemento texta-
rea através do atributo maxlength.

1 < textarea id = " mensagem_id " name = " mensagem " maxlength = " 14 " >
2
3 </ textarea >

Figura 2.62: Caixa de texto longo

Exercícios de Fixação

70 Crie um arquivo chamado formulario-caixas-especificas.html no projeto html em Site Root

com o seguinte conteúdo.

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Exerc  cio de formula
 rio com caixas espec  ficas </ title >
6 </ head >
7 < body >
8 < form action = " parametros . php " method = " post " >
9 < label for = " keywords_id " > Busca .. </ label >
1 < input
11 id = " keywords_id "
12 type = " search "
13 name = " keywords "
14 placeholder = " Keywords " >
15
16 < br >
17
18 < label for = " idade_id " > Idade .. </ label >
19 < input
2 id = " idade_id "
21 type = " number "
22 name = " idade "
23 min = " 18 "
24 max = " 6 " >
25
26 < br >
27
28 < label for = " curtiu_id " > Curtiu .. </ label >
29 < input
3 id = " curtiu_id "
31 type = " range "

www.facebook.com/k19treinamentos 97
 HTML 98

32 name = " curtiu "

33 min = "  "
34 max = " 1 " >
35
36 < br >
37
38 < label for = " email_id " > Email .. </ label >
39 < input
4 id = " email_id "
41 type = " email "
42 name = " email "
43 placeholder = " Seu email " >
44
45 < br >
46
47 < label for = " telefone_id " > Telefone .. </ label >
48 < input
49 id = " telefone_id "
5 type = " tel "
51 name = " telefone "
52 placeholder = " Seu telefone " >
53
54 < br >
55
56 < label for = " site_id " > Site .. </ label >
57 < input
58 id = " site_id "
59 type = " url "
6 name = " site "
61 placeholder = " Seu site " >
62
63 < br >
64
65 < label for = " nascimento_id " > Nascimento .. </ label >
66 < input
67 id = " nascimento_id "
68 type = " date "
69 name = " nascimento " >
7
71 < br >
72
73  rio .. </ label >
< label for = " festa_aniversario_id " > Festa de Aniversa
74 < input
75 id = " festa_aniversario_id "
76 type = " datetime - local "
77 name = " festa_aniversario " >
78
79 < br >
8
81 < label for = " proximo_carnaval_mes_id " > Me  ximo Carnaval .. </ label >
 s do pro
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 >
9 < input
91 id = " semana_rock_in_rio_id "
92 type = " week "
93 name = " semana_rock_in_rio " >
94
95 < br >
96
97  rio de entrada .. </ label >
< label for = " horario_de_entrada_id " > Hora
98 < input
99 id = " horario_de_entrada_id "
1 type = " time "
11 name = " horario_de_entrada " >

98 www.k19.com.br
 99 HTML

12
13 < br >
14
15 < label for = " senha_id " > Senha .. </ label >
16 < input
17 id = " senha_id "
18 type = " password "
19 name = " senha "
11 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 = " 5 "
12 maxlength = " 15 " > </ textarea >
121
122 < br >
123
124 < input type = " submit " value = " Enviar " >
125 </ form >
126 </ body >
127 </ html >

Código HTML 2.104: formulario-caixas-especificas.html

Importante
No Windows, altere o código acima substituindo o trecho “parametros.php” pelo
trecho “parametros.asp”.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao7.zip

71 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/formulario-caixas-especificas.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/formulario-caixas-especificas.html.

Utilize o Chrome DevTools ou o Firebug para verificar os parâmetros enviados através do for-
mulário. Chame o instrutor caso tenha alguma dúvida.

Checkboxes e Radios

Para adicionar um checkbox em um formulário, 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 formulário, esse valor é transmitido ao Web Server se o checkbox correspondente estiver
marcado.

1 < input id = " sim_id " name = " newsletter " type = " checkbox " value = " sim " >

www.facebook.com/k19treinamentos 99
HTML 100

Eventualmente é interessante agrupar um determinado conjunto de checkboxes. Por exemplo,

considere um formulário que coleta as linguagens de programação que os usuários conhecem. Para
cada linguagem, podemos definir um checkbox. Para agrupar esses checkboxes, basta definir o atri-
buto name com o mesmo valor para eles.

1 < input id = " java_id " type = " checkbox " value = " java " name = " linguagens " >
2 < input id = " csharp_id " type = " checkbox " value = " csharp " name = " linguagens " >
3 < input id = " php_id " type = " checkbox " value = " php " name = " linguagens " >
4 < input id = " ruby_id " type = " checkbox " value = " ruby " name = " linguagens " >
5 < input id = " perl_id " type = " checkbox " value = " perl " name = " linguagens " >

Figura 2.63: Checkboxes

Para adicionar um radio em um formulário, 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 formulário, 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, consi-

dere um formulário que coleta o time preferido dos usuários. 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 " >
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 " >

Figura 2.64: Radios

Por padrão, quando um formulário é exibido para os usuários, os checkboxes e os radios não es-
tão marcados. Algumas vezes, desejamos que determinados checkboxes e radios estejam marcados
quando os formulários são apresentados aos usuários. Para resolver esse problema, podemos utilizar
o atributo checked do elemento input. Esse atributo não 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 >

Seleção de cores

No HTML5, para coletar uma cor, podemos utilizar o elemento input com type igual a color.

100 www.k19.com.br
101 HTML

1 < input id = " cor_id " name = " cor " type = " color " >

Figura 2.65: Seleção de cores

Exercícios de Fixação

72 Crie um arquivo chamado checkboxes.html no projeto html em Site Root com o seguinte con-

teúdo.

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Exerc cio de checkboxes </ title >
6 </ head >
7 < body >
8 < form action = " parametros . php " method = " post " >
9 < label for = " java_id " > Java </ label >
1 < input id = " java_id " type = " checkbox " value = " java " name = " linguagens " checked >
11
12 < label for = " csharp_id " >C # </ label >
13 < input id = " csharp_id " type = " checkbox " value = " csharp " name = " linguagens " >
14
15 < label for = " php_id " > PHP </ label >
16 < input id = " php_id " type = " checkbox " value = " php " name = " linguagens " >
17
18 < label for = " ruby_id " > Ruby </ label >
19 < input id = " ruby_id " type = " checkbox " value = " ruby " name = " linguagens " checked >
2
21 < label for = " perl_id " > Perl </ label >
22 < input id = " perl_id " type = " checkbox " value = " perl " name = " linguagens " >
23
24 < input type = " submit " value = " Enviar " >
25 </ form >
26 </ body >
27 </ html >

Código HTML 2.112: checkboxes.html

www.facebook.com/k19treinamentos 101
HTML 102

Importante
No Windows, altere o código acima substituindo o trecho “parametros.php” pelo
trecho “parametros.asp”.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao72.zip

73 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/checkboxes.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/checkboxes.html.

Utilize o Chrome DevTools ou o Firebug para verificar os parâmetros enviados através do for-
mulário. Chame o instrutor caso tenha alguma dúvida.

74 Crie um arquivo chamado radios.html no projeto html em Site Root com o seguinte conteúdo.

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Exerc cio de radios </ title >
6 </ head >
7 < body >
8 < form action = " parametros . php " method = " post " >
9 < label for = " sp_id " > Sa o Paulo </ label >
1 < 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 " >
2
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 >

Código HTML 2.113: radios.html

Importante
No Windows, altere o código acima substituindo o trecho “parametros.php” pelo
trecho “parametros.asp”.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao74.zip

102 www.k19.com.br
103 HTML

75 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/radios.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/radios.html.

Utilize o Chrome DevTools ou o Firebug para verificar os parâmetros enviados através do for-
mulário. Chame o instrutor caso tenha alguma dúvida.

76 Crie um arquivo chamado selecao-cores.html no projeto html em Site Root com o seguinte
conteúdo.

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Exerc cio de seleça o de cores </ title >
6 </ head >
7 < body >
8 < form action = " parametros . php " method = " post " >
9 < label for = " cor_id " > Cor .. </ label >
1 < input id = " cor_id " name = " cor " type = " color " >
11
12 < input type = " submit " value = " Enviar " >
13 </ form >
14 </ body >
15 </ html >

Código HTML 2.114: selecao-cores.html

Importante
No Windows, altere o código acima substituindo o trecho “parametros.php” pelo
trecho “parametros.asp”.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao76.zip

77 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/selecao-cores.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/selecao-cores.html.

Utilize o Chrome DevTools ou o Firebug para verificar os parâmetros enviados através do for-
mulário. Chame o instrutor caso tenha alguma dúvida.

Botões

www.facebook.com/k19treinamentos 103
HTML 104

Botões genéricos
Para adicionar um botão genérico em um formulário, podemos utilizar o elemento input com
type igual a button. As ações desse tipo de componente são definidas com JavaScript. Os textos
desses botões são definidos com o atributo value.

1 < input id = " botao_id " type = " button " value = " bota o " >

Figura 2.66: Botões genéricos

Outra forma de adicionar um botão genérico em um documento HTML é utilizar o elemento

button com type igual a button. Diferentemente do elemento input, o elemento button permite a
criação de botões com imagens além de texto.

1 < button id = " botao_id " type = " button " >
2 Bota o gene rico
3 < img src = " botao . png " alt = " Bota o " >
4 </ button >

Figura 2.67: Botões genéricos

Botões de reset
Para adicionar um botão de reset em um formulário, podemos utilizar o elemento input com
type igual a reset. Esse tipo de botão reinicia os dados do formulário. Os textos desses botões são
definidos com o atributo value.

1 < input id = " botao_id " type = " reset " value = " reiniciar " >

Figura 2.68: Botões de reset

Outra forma de adicionar um botão de reset em um documento HTML é utilizar o elemento

button com type igual a reset. Diferentemente do elemento input, o elemento button permite a
criação de botões com imagens além de texto.

1 < button id = " botao_id " type = " reset " >
2 Bota o de reset
3 < img src = " reset . png " alt = " Reiniciar " >
4 </ button >

104 www.k19.com.br
105 HTML

Figura 2.69: Botões de reset

Botões de upload
Para adicionar um botão de upload em um formulário, podemos utilizar o elemento input com
type igual a file. Esse tipo de botão permite selecionar um arquivo para um eventual upload. O
formulário que contém esse botão deve possuir o atributo enctype com o valor multipart/form-
data.

1 < input id = " botao_id " name = " file " type = " file " >

Figura 2.70: Botões de upload

Imagem como botão de submit

Uma imagem pode funcionar como um botão de submit. Para isso, devemos utilizar o elemento
input com type igual a image. O caminho absoluto ou relativo da imagem que será utilizada deve
ser definida com o atributo src. Um texto alternativo deve ser definido com o atributo alt. Esse texto
pode ser utilizado caso ocorra algum problema no carregamento da imagem.

1 < form action = " parametros . php " method = " post " enctype = " multipart / form - data " >
2 < input id = " botao_id " alt = " enviar " type = " image " src = " submit . png " >
3 </ form >

Figura 2.71: Imagem como botão de submit

Exercícios de Fixação

78 Crie um arquivo chamado botoes.html no projeto html em Site Root com o seguinte conteúdo.

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Exerc cio de checkboxes </ title >
6 </ head >
7 < body >
8 < form action = " parametros . php " method = " post " enctype = " multipart / form - data " >

www.facebook.com/k19treinamentos 105
HTML 106

9 < input id = " file_id " type = " file " name = " file " >
1
11 < input id = " b1 " type = " button " value = " Bota o gene  rico " >
12
13 < button id = " b2 " type = " button " >
14 Bota o gene  rico
15 < img src = " http .. // www . k19 . com . br / figs / botao - generico . png " alt = " Bota o " >
16 </ button >
17
18 < input id = " b3 " type = " reset " value = " Reiniciar " >
19
2 < button id = " b4 " type = " reset " >
21 Bota o de reset
22 < img src = " http .. // www . k19 . com . br / figs / botao - reset . png " alt = " Reiniciar " >
23 </ button >
24
25 < input id = " b5 "
26 type = " image "
27 alt = " enviar "
28 src = " http .. // www . k19 . com . br / figs / submit . png " >
29 </ form >
3 </ body >
31 </ html >

Código HTML 2.121: botoes.html

Importante
No Windows, altere o código acima substituindo o trecho “parametros.php” pelo
trecho “parametros.asp”.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao78.zip

79 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/botoes.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/botoes.html.

Utilize o Chrome DevTools ou o Firebug para verificar os parâmetros enviados através do for-
mulário. Chame o instrutor caso tenha alguma dúvida.

Drop-down list

Muitos formulários permitem que os usuários selecionem um ou mais itens de uma lista de op-
ções. Essa seleção pode ser realizada através de um drop-down list. Para adicionar esse tipo de com-
ponente, 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 >

106 www.k19.com.br
107 HTML

As opções devem ser definidas no conteúdo do elemento select e elas são adicionadas com o ele-
mento option. O conteúdo do elemento option é exibido para os usuários. Esse elemento possui um
atributo chamado value. Quando o formulário for enviado, o valor do atributo value é transmitido
ao Web Server se a opção correspondente foi selecionada pelo usuário. Se esse atributo não estiver
definido, o conteúdo do elemento option é transmitido ao Web Server se a opção correspondente foi
selecionada pelo usuário.

1 < select id = " estados_id " name = " estado " >
2 < option value = " SP " > Sa o 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 >

Figura 2.72: Drop-down list

Por padrão, apenas um item de um drop-down list pode ser selecionado pelos usuários. Mas,
utilizando o atributo multiple, um ou mais itens podem ser selecionados. Geralmente, mantendo a
tecla CTRL pressionada, os usuários poderão escolher dois ou mais itens.

1 < select id = " estados_id " name = " estado " multiple = " multiple " >
2 < option value = " SP " > Sa o Paulo </ option >
3 < option value = " RJ " > Rio de Janeiro </ option >
4 < option value = " RS " > Rio Grande do Sul </ option >
5 < option value = " PR " > Parana  </ option >
6 < option value = " RN " > Rio Grande do Norte </ option >
7 < option value = " BA " > Bahia </ option >
8 </ select >

Figura 2.73: Drop-down list

Nos drop-down lists com muitas opções, é interessante agrupar as opções em categorias. Esse
agrupamento pode ser realizado com o elemento optgroup. Esse elemento possui um atributo cha-
mado label. O valor desse atributo é exibido no drop-down list.

1 < select id = " estados_id " name = " estado " >
2 < optgroup label = " Regia o Sudeste " >

www.facebook.com/k19treinamentos 107
HTML 108

3 < option value = " SP " > Sa o Paulo </ option >
4 < option value = " RJ " > Rio de Janeiro </ option >
5 </ optgroup >
6 < optgroup label = " Regia o Sul " >
7 < option value = " RS " > Rio Grande do Sul </ option >
8 < option value = " PR " > Parana  </ option >
9 </ optgroup >
1 < optgroup label = " Regia o Nordeste " >
11 < option value = " RN " > Rio Grande do Norte </ option >
12 < option value = " BA " > Bahia </ option >
13 </ optgroup >
14 </ select >

Figura 2.74: Drop-down list

Drop-down list com itens pré-selecionados

Quando um drop-down list é exibido para os usuários, opções podem estar por padrão seleciona-
das. O atributo selected do elemento option define as opções que devem estar selecionadas quando
um drop-down list é exibido para os usuários. Esse atributo não precisa de valor.

1 < select id = " estados_id " name = " estado " multiple = " multiple " >
2 < optgroup label = " Regia o Sudeste " >
3 < option value = " SP " selected > Sa o Paulo </ option >
4 < option value = " RJ " > Rio de Janeiro </ option >
5 </ optgroup >
6 < optgroup label = " Regia o Sul " >
7 < option value = " RS " selected > Rio Grande do Sul </ option >
8 < option value = " PR " > Parana </ option >
9 </ optgroup >
1 < optgroup label = " Regia o Nordeste " >
11 < option value = " RN " > Rio Grande do Norte </ option >
12 < option value = " BA " > Bahia </ option >
13 </ optgroup >
14 </ select >

Exercícios de Fixação

80 Crie um arquivo chamado drop-down-list.html no projeto html em Site Root com o seguinte
conteúdo.

1 <! DOCTYPE html >

2 < html lang = " pt - br " >

108 www.k19.com.br
109 HTML

3 < head >

4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Exerc cio de checkboxes </ title >
6 </ head >
7 < body >
8 < form action = " parametros . php " method = " post " >
9 < select id = " estados_id " name = " estados " multiple = " multiple " >
1 < option value = " SP " > Sa o Paulo </ option >
11 < option value = " RJ " > Rio de Janeiro </ option >
12 < option value = " RS " > Rio Grande do Sul </ option >
13 < option value = " PR " > Parana  </ option >
14 < option value = " RN " > Rio Grande do Norte </ option >
15 < option value = " BA " > Bahia </ option >
16 </ select >
17
18 < select id = " estado_id " name = " estado " >
19 < optgroup label = " Regia o Sudeste " >
2 < option value = " SP " > Sa o Paulo </ option >
21 < option value = " RJ " > Rio de Janeiro </ option >
22 </ optgroup >
23 < optgroup label = " Regia o Sul " >
24 < option value = " RS " > Rio Grande do Sul </ option >
25 < option value = " PR " > Parana  </ option >
26 </ optgroup >
27 < optgroup label = " Regia o Nordeste " >
28 < option value = " RN " > Rio Grande do Norte </ option >
29 < option value = " BA " > Bahia </ option >
3 </ optgroup >
31 </ select >
32
33 < input type = " submit " value = " Enviar " >
34 </ form >
35 </ body >
36 </ html >

Código HTML 2.127: drop-down-list.html

Importante
No Windows, altere o código acima substituindo o trecho “parametros.php” pelo
trecho “parametros.asp”.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao8.zip

81 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/drop-down-list.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/drop-down-list.html.

Utilize o Chrome DevTools ou o Firebug para verificar os parâmetros enviados através do for-
mulário. Chame o instrutor caso tenha alguma dúvida.

Fieldset

www.facebook.com/k19treinamentos 109
HTML 110

Os campos de um formulário muito longo podem ser agrupados logicamente com o elemento
fieldset. No conteúdo desse elemento, podemos utilizar o elemento legend para definir a legenda do
fieldset. Normalmente, o fieldset é definido pelos navegadores como block-level element.

1 < fieldset >

2 < legend > Dados Pessoais </ legend >
3 ...
4 </ fieldset >
5 < fieldset >
6 < legend > Formaça o </ legend >
7 ...
8 </ fieldset >
9 < fieldset >
1 < legend > Experie ncia </ legend >
11 ...
12 </ fieldset >

Figura 2.75: Fieldset

Exercícios de Fixação

82 Crie um arquivo chamado fieldset.html no projeto html em Site Root com o seguinte conteúdo.

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Exerc  cio de fieldset </ title >
6 </ head >
7 < body >
8 < form action = " parametros . php " method = " post " >
9 < fieldset >
1 < legend > Dados Pessoais </ legend >
11 < label for = " nome_id " > Nome .. </ label >
12 < input id = " nome_id " type = " text " name = " nome " >
13 </ fieldset >
14 < fieldset >
15 < legend > Formaça o </ legend >
16 < label for = " curso_id " > Curso .. </ label >
17 < input id = " curso_id " type = " text " name = " curso " >
18 </ fieldset >
19 < fieldset >
2 < legend > Experie ncia </ legend >
21 < label for = " empresa_id " > Empresa .. </ label >
22 < input id = " empresa_id " type = " text " name = " empresa " >

110 www.k19.com.br
111 HTML

23 </ fieldset >

24
25 < input type = " submit " value = " Enviar " >
26 </ form >
27 </ body >
28 </ html >

Código HTML 2.129: fieldset.html

Importante
No Windows, altere o código acima substituindo o trecho “parametros.php” pelo
trecho “parametros.asp”.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao82.zip

83 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/fieldset.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/fieldset.html.

Utilize o Chrome DevTools ou o Firebug para verificar os parâmetros enviados através do for-
mulário. Chame o instrutor caso tenha alguma dúvida.

Autocomplete

Para melhorar a usabilidade, podemos utilizar o recurso do autocomplete nas caixas de entrada.
Para utilizar esse recurso, devemos criar uma lista de sugestões com o elemento datalist. É funda-
mental identificar as listas de sugestões com o atributo id.

1 < datalist id = " comidas_id " >

2 ...
3 </ datalist >

As opções devem ser definidas no conteúdo do elemento datalist e elas são adicionadas com o
elemento option. O atributo value de um elemento option define uma sugestão.

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 sugestões criada, podemos associá-la a uma caixa de entrada através do atributo
list do elemento input.

1 < input id = " comida_id " name = " comida " type = " text " list = " comidas_id " >
2

www.facebook.com/k19treinamentos 111
HTML 112

3 < datalist id = " comidas_id " >

4 < option value = " Lasanha " >
5 < option value = " Pizza " >
6 < option value = " Sopa " >
7 < option value = " Salada " >
8 </ datalist >

Figura 2.76: Autocomplete

Exercícios de Fixação

84 Crie um arquivo chamado autocomplete.html no projeto html em Site Root com o seguinte
conteúdo.

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Exerc cio de autocomplete </ title >
6 </ head >
7 < body >
8 < form action = " parametros . php " method = " post " >
9 < input id = " comida_id " name = " comida " type = " text " list = " comidas_id " >
1
11 < datalist id = " comidas_id " >
12 < option value = " Lasanha " >
13 < option value = " Pizza " >
14 < option value = " Sopa " >
15 < option value = " Salada " >
16 </ datalist >
17
18 < input type = " submit " value = " Enviar " >
19 </ form >
2 </ body >
21 </ html >

Código HTML 2.133: autocomplete.html

Importante
No Windows, altere o código acima substituindo o trecho “parametros.php” pelo
trecho “parametros.asp”.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao84.zip

85 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/autocomplete.html.

112 www.k19.com.br
113 HTML

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/autocomplete.html.

Utilize o Chrome DevTools ou o Firebug para verificar os parâmetros enviados através do for-
mulário. Chame o instrutor caso tenha alguma dúvida.

Campos ou botões desabilitados

Eventualmente, determinados campos ou botões de um formulário devem ser desabilitados.

Para desabilitar um campo ou botão, podemos utilizar o atributo disabled dos elementos input,
select, textarea e button. Esse atributo não precisa de valor.

1 < input id = " nome_id " name = " nome " type = " text " disabled >

Figura 2.77: Campos desabilitados

1 < select id = " nomes_id " disabled >

2 ...
3 </ select >

Figura 2.78: Campos desabilitados

1 < textarea disabled >

2 </ textarea >

Figura 2.79: Campos desabilitados

1 < button type = " button " disabled >

2 Bota o desabilitado
3 < img src = " botao . png " alt = " Bota o desabilitado " >
4 </ button >

www.facebook.com/k19treinamentos 113
HTML 114

Figura 2.80: Botões desabilitados

Campos fixos

Eventualmente, determinados campos de um formulário devem ser fixo, ou seja, os usuários não
podem alterar o conteúdo. Para fixar o conteúdo de um campo, podemos utilizar o atributo readonly
dos elementos input e textarea. Esse atributo não precisa de valor.

1 < input id = " nome_id " name = " nome " type = " text " value = " Marcelo Martins " readonly >

Figura 2.81: Campos fixos

1 < textarea readonly >

2 Gostaria de efetuar a matr
 cula no K1 - Formaça o Desenvolvedor Java .
3 </ textarea >

Figura 2.82: Campos fixos

Exercícios de Fixação

86 Crie um arquivo chamado disabled-readonly.html no projeto html em Site Root com o seguinte
conteúdo.

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Exerc cio de autocomplete </ title >
6 </ head >
7 < body >
8 < form action = " parametros . php " method = " post " >
9 < label for = " nome_id " > Nome .. </ label >
1 < input id = " nome_id " name = " nome " type = " text " value = " Marcelo Martins " readonly >
11
12 < label for = " email_id " > Email .. </ label >
13 < input id = " email_id " name = " email " type = " email " disabled >

114 www.k19.com.br
115 HTML

14
15 < input type = " submit " value = " Enviar " >
16 </ form >
17 </ body >
18 </ html >

Código HTML 2.140: disabled-readonly.html

Importante
No Windows, altere o código acima substituindo o trecho “parametros.php” pelo
trecho “parametros.asp”.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao86.zip

87 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/disabled-readonly.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/disabled-readonly.html.

Utilize o Chrome DevTools ou o Firebug para verificar os parâmetros enviados através do for-
mulário. Chame o instrutor caso tenha alguma dúvida.

Validação

Alguns recursos para realizar a validação dos campos de um formulário foram adicionados no
HTML5. Essas validações ocorrem antes do envio dos formulários. Por padrão, algumas validações
são realizadas automaticamente de acordo com o tipo do campo. Por exemplo, os navegadores veri-
ficam se o conteúdo de uma caixa de email é um email válido.

1 < input id = " email_id " name = " email " type = " email " >

Figura 2.83: Validação de email

Os navegadores também verificam se o conteúdo de uma caixa de URL é uma url válida.

1 < input id = " url_id " name = " url " type = " url " >

www.facebook.com/k19treinamentos 115
HTML 116

Figura 2.84: Validação de URL

Outras validações devem ser definidas explicitamente. Por exemplo, se um determinado campo
é obrigatório, devemos utilizar o atributo required. Esse atributo não precisa de valor.

1 < input id = " nome_id " name = " nome " type = " text " required >

Figura 2.85: Validação de campo obrigatório

Se um determinado campo deve respeitar uma expressão regular, devemo utilizar o atributo pat-
tern.

1 < input
2 id = " placa_id "
3 name = " placa "
4 type = " text "
5 pattern = " [A - Z ]{3} [ -9]{4} "
6 title = " As placas sa o formadas por 3 letras ou 4 nu
 meros " >

Figura 2.86: Validação com expressão regular

Se o conteúdo de um campo numérico deve estar em um determinado intervalo, podemo utilizar

os atributos min e max.

1 < input
2 id = " idade_id "
3 name = " idade "
4 type = " number "
5 min = " 18 "
6 max = " 6 "
7 title = " A idade min
 ma e
 18 e a ma
 xima e
 6 " >

116 www.k19.com.br
117 HTML

Figura 2.87: Validação de numérica de mínimo e máximo

Exercícios de Fixação

88 Crie um arquivo chamado validacao.html no projeto html em Site Root com o seguinte con-
teúdo.

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Exerc  cio de validaça o </ title >
6 </ head >
7 < body >
8 < form action = " parametros . php " method = " post " >
9 < label for = " nome_id " > Nome .. </ label >
1 < 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
2 id = " placa_id "
21 name = " placa "
22 type = " text "
23 pattern = " [A - Z ]{3} [ -9]{4} "
24 title = " As placas sa o formadas por 3 letras ou 4 nu  meros " >
25
26 < input type = " submit " value = " Enviar " >
27 </ form >
28 </ body >
29 </ html >

Código HTML 2.146: validacao.html

Importante
No Windows, altere o código acima substituindo o trecho “parametros.php” pelo
trecho “parametros.asp”.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao88.zip

89 No Windows, utilize o Chrome para acessar o endereço:

www.facebook.com/k19treinamentos 117
HTML 118

http..//localhost/html/public_html/validacao.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/validacao.html.

Utilize o Chrome DevTools ou o Firebug para verificar os parâmetros enviados através do for-
mulário. Chame o instrutor caso tenha alguma dúvida.

Partes de um documento HTML

Normalmente, um documento HTML pode ser dividido em “pedaços”. Por exemplo, é comum
existir cabeçalhos, rodapés e menus de navegação na maior parte das páginas web. No HTML5,
diversos elementos foram adicionados para definir especificamente os principais “pedaços” que ge-
ralmente um documento HTML possui.

header
O elemento header é utilizado para definir um cabeçalho de um documento HTML ou de uma
seção de um documento HTML. O objetivo desse elemento é definir um conteúdo de introdução
ou de navegação. Normalmente, no header, encontramos os elementos h1, h2, h3, h4, h5 e h6.
No conteúdo do header, também é comum encontrar sumários, formulários 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 >
1 < img src = " html5 - logo . png " alt = " HTML5 " >
11 </ header >
12
13 ...
14 </ article >
15
16 ...
17 </ body >

Código HTML 2.147: Exemplo de cabeçalho

footer
O elemento footer é utilizado para definir um rodapé para o documento HTML ou para uma
seção do documento HTML. É muito comum encontrarmos em seu conteúdo informações sobre a
seção a qual ele pertence como quem a escreveu, links relacionados ao conteúdo da seção e infor-
mações legais, por exemplo.

1 < body >

2 ...
3 < article >
4 <p > Loren ipsum...</ p >
5

118 www.k19.com.br
119 HTML

6 < footer > Postado por .. Jonas Hirata </ footer >
7 </ article >
8
9 < footer >&copy ,. 213 K19 Treinamentos . </ footer >
1 </ body >

Código 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 rodapés. Dessa forma, o
elemento nav aparecerá com frequência no conteúdo 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 >
1 </ header >
11
12 < section >
13 < h1 > Meus Posts </ h1 >
14
15 ...
16 </ section >
17
18 < footer >
19 <p >&copy ,. 213 K19 Treinamentos . </ p >
2 < nav >
21 <a href = " # " > Home </ a >
22 <a href = " # " > Últimos posts </ a >
23 <a href = " # " > Arquivo </ a >
24 </ nav >
25 </ footer >
26 </ body >

Código HTML 2.149: Exemplo de nav

article
O elemento article é utilizado para definir uma composição independente em um documento
HTML. A princípio, um article pode ser distribuído independentemente ou facilmente reutilizado.
É apropriado utilizar esse elemento para definir um post de um fórum, um artigo de uma revista
ou jornal, um post de um blog, um comentário enviado por um usuário, um widget interativo ou
qualquer item independente de conteúdo.

Considere um blog no qual os usuários podem enviar comentários sobre os posts publicados. Os
posts desse blog podem ser definidos com o elemento article. Os comentários 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 conteúdo do article que o contém.

1 < body >

2 < article >
3 < h1 > Primeiro post do blog </ h1 >
4 <p > Loren ipsum...</ p >
5

www.facebook.com/k19treinamentos 119
HTML 120

6 < h2 > Comenta

 rios </ h2 >
7 < article > Legal este post ! </ article >
8 < article > Bacana este post ! </ article >
9 < article > Da hora este post ! </ article >
1 </ article >
11 </ body >

Código HTML 2.150: Exemplo de artigo

aside
O elemento aside é utilizado para definir algum conteúdo que esteja relacionado ao conteúdo
principal, mas não é o foco do documento HTML. Normalmente, esse elemento é exibido em uma
coluna lateral em relação ao conteúdo principal.

1 < body >

2 < article >
3 < h1 > Novidades do HTML5 </ h1 >
4 <p > Loren ipsum...</ p >
5
6 < h2 > Comenta
 rios </ h2 >
7 < article > Legal este post ! </ article >
8 < article > Bacana este post ! </ article >
9 < article > Da hora este post ! </ article >
1 </ article >
11 < aside >
12 < h1 > Posts relacionados </ h1 >
13 ...
14 </ aside >
15 </ body >

Código HTML 2.151: Exemplo de aside

section
O elemento section é utilizado para definir uma seção genérica de um documento. Uma seção é
o agrupamento de um conteúdo dentro de um tema. Normalmente, as seções possuem cabeçalho 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 >
1 < 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 >

Código HTML 2.152: Exemplo de seção

120 www.k19.com.br
121 HTML

figure

O elemento figure deve ser utilizado para definir um conteúdo que é auto-suficiente e tipica-
mente referenciado como uma unidade singular do fluxo principal do documento. Opcionalmente
o conteúdo pode possuir uma legenda.

Por exemplo, esse elemento pode ser utilizado para definir ilustrações, diagramas, fotos, vídeos,
códigos fonte em um documento HTML. Normalmente, esse itens são referenciados no conteúdo
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 conteúdo do elemento pai. Além 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
1 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
2 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 >

Código HTML 2.153: Exemplo de figure e figurecaption

www.facebook.com/k19treinamentos 121
123 HTML

Normalmente, os elementos header, footer, nav, header, article, aside, section, figure e figcap-
tion são definidos pelos navegadores como block-level elements.

Divisão de conteúdo

Muitas vezes, desejamos separar o conteúdo de um documento HTML. Geralmente, essas divi-
sões ocorrem quando há uma mudança de tópico no conteúdo. Essas divisões 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
1 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 .
2 </ p >
21 </ body >

Código HTML 2.154: Exemplo de separação de conteúdo

Exercícios de Fixação

90 Crie um arquivo chamado hr.html no projeto html em Site Root com o seguinte conteúdo.

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Exerc  cio de separaça o de conteu
 do </ title >
6 </ head >
7 < body >
8 < h1 > Desenvolvimento Web </ h1 >
9
1 < 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 accumsan . Sed sed quam nisi , cursus
15 sodales metus . Curabitur dapibus , massa sed sollicitudin viverra , odio
16 justo dignissim metus , vel tempor turpis neque id erat . Aenean fermentum
17 ultricies ante a luctus .
18 </ p >
19
2 < hr >
21

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 .
3 </ p >
31 </ body >
32 </ html >

Código HTML 2.155: hr.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-fixacao9.zip

91 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/hr.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/hr.html.

Agrupando elementos

Podemos agrupar elementos através 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 formatações específicas para
cada grupo. Por isso, a utilidade desses elementos ficará mais clara quando falarmos sobre CSS.

Erro: Fechamento inadequado das tags

Um erro comum, ao definir um documento HTML, é o fechamento inadequado das tags.

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Fechamento inadequado das tags </ title >
6 </ head >
7 < body >
8 < strong > Fechamento < em > inadequado </ strong > das tags </ em >
9 </ body >
1 </ html >

Erro: Imagens sem texto alternativo

Um erro comum, ao definir um documento HTML, é não definir um texto alternativos para as
imagens.

124 www.k19.com.br
125 HTML

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Imagens sem texto alternativo </ title >
6 </ head >
7 < body >
8 < img src = " imagem . png " >
9 </ body >
1 </ html >

Erro: Criar listas com o elemento br

Um erro comum, ao definir um documento HTML, é criar listas com o elemento br.

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Criar listas com o elemento br </ title >
6 </ head >
7 < body >
8 1. HTML < br >
9 2. CSS < br >
1 3. JavaScript
11 </ body >
12 </ html >

Exercícios Complementares

1 Crie um arquivo chamado pagina-simples.html no projeto html em Site Root. Utilize a imagem

abaixo como base.

2 Crie um arquivo chamado geografia.html no projeto html em Site Root. Utilize a imagem abaixo
como base.

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

4 Crie um arquivo chamado caracteres-especiais.html no projeto html em Site Root. Utilize a

imagem abaixo como base.

5 Crie um arquivo chamado espacos-e-quebras-de-linha.html no projeto html em Site Root.

Utilize a imagem abaixo como base.

6 Crie um arquivo chamado codigo-java.html no projeto html em Site Root. Utilize a imagem
abaixo como base.

www.facebook.com/k19treinamentos 127
HTML 128

7 Crie um arquivo chamado elementos-i-b.html no projeto html em Site Root. Utilize a imagem
abaixo como base.

8 Crie um arquivo chamado sao-paulo.html no projeto html em Site Root. Utilize a imagem
abaixo como base.

9 Crie um arquivo chamado spfc.html no projeto html em Site Root. Utilize a imagem abaixo
como base.

128 www.k19.com.br
129 HTML

10 Crie um arquivo chamado mais-citacoes.html no projeto html em Site Root. Utilize a imagem
abaixo como base.

11 Crie um arquivo chamado abbr.html no projeto html em Site Root. Utilize a imagem abaixo
como base.

12 Crie um arquivo chamado mais-definicoes.html no projeto html em Site Root. Utilize a imagem
abaixo como base.

www.facebook.com/k19treinamentos 129
HTML 130

13 Crie um arquivo chamado mais-alteracoes.html no projeto html em Site Root. Utilize a imagem
abaixo como base.

14 Crie um arquivo chamado mais-datas.html no projeto html em Site Root. Utilize a imagem
abaixo como base.

15 Crie um arquivo chamado texto-marcado.html no projeto html em Site Root. Utilize a imagem
abaixo como base.

130 www.k19.com.br
131 HTML

16 Crie um arquivo chamado pontos-turisticos.html no projeto html em Site Root. Utilize a ima-
gem abaixo como base.

17 Crie um arquivo chamado manual-k19.html no projeto html em Site Root. Utilize a imagem
abaixo como base.

www.facebook.com/k19treinamentos 131
HTML 132

18 Crie um arquivo chamado mais-links.html no projeto html em Site Root. Utilize a imagem
abaixo como base.

19 Crie um arquivo chamado mais-imagens.html no projeto html em Site Root. Utilize a imagem
abaixo como base.

20 Crie um arquivo chamado mais-tabelas.html no projeto html em Site Root. Utilize a imagem
abaixo como base.

132 www.k19.com.br
133 HTML

21 Crie um arquivo chamado mais-formularios.html no projeto html em Site Root. Utilize a ima-
gem abaixo como base.

Resumo do Capítulo

www.facebook.com/k19treinamentos 133
HTML 134

1 A linguagem HTML é utilizada na criação das páginas web e é especificada pelo W3C.

2 Um documento HTML é composto por elementos hierarquicamente organizados.

3 Os elementos são inseridos em um documento HTML com o uso de tags.

4 O elemento DOCTYPE é utilizado para declarar o tipo do documento.

5 A raiz de um documento HTML é definida pelo elemento html.

6 Informações sobre um documento HTML devem ser definidas no corpo do elemento head.

7 No corpo do elemento body, é definido o conteúdo do documento HTML.

8 A semântica dos elementos HTML deve ser respeitada para a correta interpretação do conteúdo
por buscadores e softwares de leitura (acessibilidade), por exemplo.

9 Os elementos h1, h2, h3, h4, h5 e h6 são utilizados para definir títulos em um documento
HTML.

10 Parágrafos são inseridos em um documento HTML com o elemento p.

11 Determinados caracteres devem ser inseridos em um documento HTML através do seu respec-
tivo código.

12 Os elementos pre, code, i, b, sub, sup, strong, em, blockquote, q, cite, abbr, dfn, ins, del, s,
time e mark são utilizados para definir os textos de um documento HTML.

13 As listas sem ordem são definidas com o elemento ul. As listas com ordem são definidas com o
elemento ol. As listas de descrições são definidas com o elemento dl.

14 Os itens das listas com ordem e sem ordem são definidos com o elemento li.

15 Os termos de uma lista de descrições são definidos com o elemento dt. As descrições desses
termos são 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 Os links de um documento HTML são criados com o elemento a.

18 O elemento img é utilizado para adicionar imagens em um documento HTML.

19 As tabelas são criadas com os elementos table, tr, th, td, thead, tbody, caption, colgroup e col.

20 Para criar um formulário, devemos utilizar o elemento form.

21 Basicamente, os campos de um formulário são criados com os elementos input, textarea e

select.

22 As partes de um documento HTML podem ser definidas com os elementos header, footer,
article, aside, section, figure, figcaption, div e span.

23 As partes de um documento HTML podem ser separadas com o elemento hr.

Prova

1 Quem define a linguagem HTML?

a) Microsoft.

b) Anatel.

c) ABNT.

d) W3C.

e) NASA.

2 O que o elemento DOCTYPE determina?

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.

3 Qual alternativa está correta?

a) A raiz de um documento HTML é o elemento body.

b) O elemento head é colocado no corpo do elemento body.

c) O elemento body é colocado no corpo do elemento head.

d) A raiz de um documento HTML 5 é o elemento html5.

e) Os elementos head e body são colocados no corpo do elemento html.

4 Qual alternativa apresenta um comentário HTML válido?

a) <!– comentário –>

b) <* comentário *>

c) // comentário

d) /* comentário */

e) # comentário

5 Qual alternativa está incorreta?

a) Respeitar a semântica dos elementos HTML facilita o trabalho das ferramentas de busca.

b) Respeitar a semântica dos elementos HTML facilita o trabalho das ferramentas de leitura de
tela para deficientes visuais.

c) Respeitar a semântica dos elementos HTML diminui o tamanho das páginas web.

d) A semântica dos elementos HTML é definida na especificação da linguagem HTML.

6 Qual alternativa está correta?

a) Títulos com h2 são mais importantes do que títulos com h1.

b) Os títulos são definidos com os elementos h1, h2, h3, h4, h5 e h6.

c) Os títulos são definidos com os elementos h1, h2 e h3.

136 www.k19.com.br
137 HTML

d) Os títulos são definidos com os elementos header1, header2, header3, header4, header5 e
header6.

e) O elemento header1 equivale ao elemento h1.

7 Qual alternativa está correta?

a) Texto pré-formatado pode ser definido com o elemento text-pre.

b) O elemento code é utilizado para associar código JavaScript a um documento HTML.

c) O elemento stronger define textos importantes.

d) Citações longas são definidas com o elemento blockquote.

e) Podemos marcar texto com o elemento text-mark.

8 Qual alternativa está correta?

a) As listas com ordem são definidas através do elemento dl.

b) Os termos de uma lista de descrições são definidos com o elemento li.

c) As listas com ordem e sem ordem são definidas através dos elementos ul e ol respectivamente.

d) Os ítens de uma lista com ordem são definidos através do elemento item.

e) Uma lista pode ser definida dentro de outra lista.

9 Qual alternativa está incorreta?

a) Os links são definidos com o elemento a.

b) O destino de um link é determinado pelo atributo href.

c) O destino de um link com target="_blank" é aberto em uma nova aba ou janela.

d) O destino de um link com target="_self" é aberto na mesma aba ou janela.

e) O atributo to define o destino dos links.

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 Qual alternativa contém apenas elementos relacionados às tabelas?

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 Qual alternativa está correta?

a) As caixas de texto são adicionadas com o elemento input-text.

b) Os rótulos são definidos com o elemento input-label.

c) Podemos criar um botão de submit com o elemento input.

d) As caixas de senha são definidas com o elemento password.

e) Os checkboxes e os radios são criados com os elementos checkbox e radio respectivamente.

13 Qual alternativa está correta?

a) As opções de um drop-down list são definidas com o elemento input.

b) As opções de um drop-down list podem ser agrupadas com o elemento option-group.

c) O atributo selected do elemento alternative define as opções selecionadas.

d) Podemos criar um drop-down lista com o elemento drop-down.

e) O elemento select é utilizado para criar drop-down lists.

14 Qual alternativa está correta?

a) Os campos de um formulário podem ser agrupados com o elemento inputset.

138 www.k19.com.br
139 HTML

b) Os campos de um formulário podem ser agrupados com o elemento fieldset.

c) O elemento label deve ser utilizado em conjunto com o elemento fieldset.

d) O elemento legend deve ser utilizado em conjunto com o elemento inputset.

e) A legenda de um fieldset é definida através do atributo legend.

15 Qual alternativa está correta?

a) As sugestões para o autocomplete de um campo são definidas pelos elementos datalist e op-
tion.

b) As sugestões para o autocomplete de um campo são definidas através do atributo autocom-

plete.

c) O elemento disabled é utilizado para desabilitar campos ou botões.

d) O atributo off é utilizado para desabilitar campos ou botões.

e) Campos fixos podem ser definidos com o atributo no-write.

12 15
Minha Pontuação Pontuação Mínima: Pontuação Máxima:

www.facebook.com/k19treinamentos 139
HTML 140

140 www.k19.com.br
 3

CAPÍTULO
CSS

Quando não definimos uma formatação específica para os elementos HTML de uma página web,
eles são exibidos com o estilo determinado pelo navegador utilizado. Há dois problemas principais
em deixar os navegadores decidirem qual formatação deve ser adotada. O primeiro é que cada na-
vegador pode adotar uma formatação diferente. Consequentemente, uma mesma página web não
será exibida exatamente da mesma forma em todos os navegadores. O segundo problema é que as
formatações adotadas pelos principais navegadores não são “bonitas”.

Podemos padronizar a forma que as páginas web são exibidas nos diferentes navegadores e obter
um visual agradável definindo a nossa própria formatação. O estilo das páginas 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 con-
sultar a especificação do CSS no endereço http..//www.w3.org/Style/CSS/specs.
O W3C faz diversas recomendações sobre como implementar as funcionalidades do CSS. Con-
tudo, nem sempre, os navegadores respeitam essas recomendações e eventualmente cada nave-
gador adota uma abordagem própria para uma determinada funcionalidade. Essas diferenças
podem gerar problemas nas páginas web.

Mais Sobre
Nas primeiras versões da linguagem HTML, a formatação era realizada através de atri-
butos específicos dos elementos. Por exemplo, a cor do fundo de uma página poderia
ser definida da seguinte forma:

1 < body bgcolor = " red " >

Hoje em dia, essa abordagem é totalmente não recomendada. Qualquer alteração visual dos
elementos HTML deve ser definida através da linguagem CSS.

Box Model

Todo elemento HTML, no corpo de uma página web, está contido em um box. Considere o do-
cumento 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
1 < 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 >
2 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.

Figura 3.1: Boxes

Na imagem, os boxes dos block-level elements foram exibidos com linha contínua enquanto os
boxes dos inline-level elements foram exibidos com linha tracejada. Os boxes dos block-level ele-
ments ocupam todo o espaço horizontal e provocam quebras de linha. Por outro lado, os boxes dos
inline-level elements ocupam horizontalmente somente o espaço necessário para o seu conteúdo e
não provocam quebras de linha.

O box de um elemento HTML é composto por conteúdo (content), margem interna (padding),

142 www.k19.com.br
143 CSS

borda (border) e margem externa (margin).

Margem externa (margin)

Borda (border)
Margem interna (padding)

conteúdo

Figura 3.2: Box model

Observe que a largura de um box corresponde à soma dos seguintes comprimentos.

• Margem externa da esquerda (margin-left)

• Borda da esquerda (border-left)
• Margem interna da esquerda (padding-left)
• Largura do conteúdo (width)
• Margem interna da direita (padding-right)
• Borda da direita (border-right)
• Margem externa da direita (margin-right)

Analogamente, a altura de um box corresponde à soma dos seguintes comprimentos.

• Margem externa superior (margin-top)

• Borda superior (border-top)
• Margem interna superior (padding-top)
• Altura do conteúdo (height)
• Margem interna inferior (padding-bottom)
• Borda inferior (border-bottom)
• Margem externa inferior (margin-bottom)

Regras

www.facebook.com/k19treinamentos 143
CSS 144

Podemos aplicar regras de formatação para cada elemento HTML. Observe a estrutura de uma
regra CSS.

Seletor Corpo

p {

font-size: 40px; Propriedade

}
Figura 3.3: Estrutura de uma regra CSS

O seletor determina para quais elementos a regra de formatação deve ser aplicada. No corpo de
uma regra CSS, podemos definir diversas propriedades. Cada propriedade define uma característica
visual. Por exemplo, a propriedade font-size é utilizada para definir o tamanho da fonte utilizada
nos textos.

Aplicando CSS ao HTML

Podemos aplicar propriedades CSS a elementos HTML de três maneiras diferentes.

Inline style
Podemos aplicar propriedades CSS através do atributo style presente em diversos elementos
HTML. Essa abordagem não é recomendada pois o acoplamento entre os elementos HTML e as pro-
priedades CSS é muito alto dificultando a manutenção das páginas web.

1 <p style = " color .. red " >

2 ...
3 </ p >

Internal style sheet

As regras CSS podem ser definidas no conteúdo do elemento style. Esse elemento deve ser defi-
nido dentro do head.

1 < head >

2 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
3 < title > Desenvolvimento Web </ title >
4 < style >
5 p {
6 color .. red .,
7 }
8 </ style >
9 </ head >

144 www.k19.com.br
145 CSS

External style sheet

Podemos separar o código HTML do código CSS definido as regras de formatação em um arquivo
independente.

1 p {
2 color .
. red .
,
3 }

Código CSS 3.1: estilo.css

Depois de definir as regras CSS em um arquivo separado, ele deve ser associado ao documento
HTML através 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 >

Comentários

Podemos adicionar comentários no código CSS através dos marcadores /* e */.

1 /* uma regra CSS para formatar os para

 grafos */
2 p {
3 color .
. red .
,
4 }

Código CSS 3.2: estilo.css

Chrome DevTools

Como vimos no capítulo anterior, podemos utilizar ferramentas como o Chrome DevTools para
analisar e modificar os documentos HTML. Essas ferramentas, também podem ser utilizadas para
editar as propriedades CSS dos elementos de uma página web. Considere o código 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 >
1 <p class = " class1 " > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ p >
11 </ body >
12 </ html >

Código HTML 3.6: chrome-devtools.html

1 p {
2 . 4 px solid red ,
border . .

www.facebook.com/k19treinamentos 145
CSS 146

3 . 2 px ,.
font - size .
4 }
5
6 . class1 {
7 color .. blue ,.
8 border .. 1 px solid green ,.
9 }

Código CSS 3.3: chrome-devtools.css

Observe a figura abaixo. Através do painel Styles podemos visualizar as regras CSS que foram
aplicadas a um determinado elemento HTML. Esse painel também mostra a origem dessas regras e
as dimensões do box do elemento.

Podemos incluir, remover, desabilitar ou alterar as propriedades de um elemento clicando sobre

elas no painel Styles.

146 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 é defi-
nida nessas duas regras. O Chrome DevTools indica através de um traço horizontal qual ocorrência
dessa propriedade está sendo desconsiderada. Mais adiante, discutiremos como determinar a prio-
ridade das regras CSS em situações 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, pode-
mos marcar a opção Show inherited.

www.facebook.com/k19treinamentos 149
CSS 150

Exercícios de Fixação

1 Abra o Netbeans e crie um projeto chamado css.

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 é necessário ins-
talar 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 pro-
jeto css em /home/<USUARIO>/public_html. Lembre-se que é necessário instalar
e configurar o Apache HTTP Server como vimos anteriormente.

Figura 3.4: Projeto css

www.facebook.com/k19treinamentos 151
CSS 152

Figura 3.5: Projeto css

Figura 3.6: Projeto css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao1.zip

152 www.k19.com.br
153 CSS

2 No projeto css, crie um arquivo chamado css.html. Todos os parágrafos desse documento devem
ser exibidos em negrito, com cor azul e com fonte 20px. Defina uma regra CSS para formatar os
parágrafos.

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > CSS </ title >
6 < style type = " text / css " >
7 p {
8 font - weight .. bold ,.
9 font - size .. 2 px ,.
1 color .. # FF ,.
11 }
12 </ style >
13 </ head >
14 < body >
15 <p > Um para  grafo formatado </ p >
16 <p > Outro para  grafo formatado </ p >
17 </ body >
18 </ html >

Código HTML 3.7: css.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao2.zip

3 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/css.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/css.html.

4 Para organizar melhor o conteúdo e a formatação da página criada anteriormente, crie um ar-
quivo CSS chamado style.css no projeto css.

1 p {
2 . bold ,.
font - weight .
3 font - size .
. 2 px ,.
4 color .. # FF ,.
5 }

Código CSS 3.4: style.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao4.zip

5 Modifique o arquivo css.html para aplicar as regras de formatação criadas no exercício anterior.

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > CSS </ title >
6 < link rel = " stylesheet " type = " text / css " href = " style . css " >
7 </ head >
8 < body >
9 <p > Um para grafo formatado </ p >

www.facebook.com/k19treinamentos 153
CSS 154

1 <p > Outro para

 grafo formatado </ p >
11 </ body >
12 </ html >

Código HTML 3.8: css.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao5.zip

Cores

Há diversas formas de escolher uma cor na linguagem CSS.

Nome

A especificação da linguagem CSS nomeou 147 cores. Você pode verificar a lista desses nomes
no endereço http. .//www.w3.org/TR/css3-color/#svg-color. As cores básicas do CSS são: 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 co-
res foram nomeadas. Para escolher uma cor que não possui um nome, podemos utilizar o código
hexadecimal da cor desejada. Todas as cores possuem um código hexadecimal. Veja o código hexa-
decimal das cores básicas.

código hexadecimal nome da cor cor código hexadecimal nome da cor cor
#00FFFF aqua ♠ #000080 navy ♠
#000000 black ♠ #808000 olive ♠
#0000FF blue ♠ #800080 purple ♠
#FF00FF fuchsia ♠ #FF0000 red ♠
#808080 gray ♠ #C0C0C0 silver ♠
#008000 green ♠ #008080 teal ♠
#00FF00 lime ♠ #FFFFFF white ♠
#800000 marron ♠ #FFFF00 yellow ♠

O código hexadecimal de uma cor começa com o caractere #. Os dois primeiros dígitos definem
a quantidade de vermelho, os dois dígitos do meio definem a quantidade de verde e os dois últimos
dígitos definem a quantidade de azul.

Função rgb()

A função 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 básicas a partir da função rgb().

154 www.k19.com.br
155 CSS

rgb() nome da cor cor rgb() nome da cor cor

rgb(0, 255, 255) aqua ♠ rgb(0, 0, 128) navy ♠
rgb(0, 0, 0) black ♠ rgb(128, 128, 0) olive ♠
rgb(0, 0, 255) blue ♠ rgb(128, 0, 128) purple ♠
rgb(255, 0, 255) fuchsia ♠ rgb(255, 0, 0) red ♠
rgb(128, 128, 128) gray ♠ rgb(192, 192, 192) silver ♠
rgb(0, 128, 0) green ♠ rgb(0, 128, 128) teal ♠
rgb(0, 255, 0) lime ♠ rgb(255, 255, 255) white ♠
rgb(128, 0, 0) marron ♠ rgb(255, 255, 0) yellow ♠

Função rgba()
A função rgba() é muito semelhante à função rgb(). A diferença é que a função rgba() possui um
quarto parâmetro que define a opacidade da cor. O valor desse parâmetro 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 função rgba() com os seguintes parâmetros.

1 rgba ( ,  , 255 , .5)

Função hsl()
Podemos usar a escala HSL (Hue, Saturation and Lightness ou Matiz, Saturação e Brilho) para
selecionar uma cor através da função hsl(). Essa função recebe 3 parâmetros. O primeiro deve ser
um valor inteiro de 0 até 360. O segundo e o terceiro são porcetagens.

1 hsl (18 , 5% , 6%)

Função hsla()
Assim como a função hsl(), a função hsla() também permite a seleção das cores através da escala
HSL. A diferença é que a última permite que a opacidade da cor seja definida.

1 hsla (18 , 5% , 6% , .5)

Unidades de medida

Para definir um tamanho ou uma distância, devemos utilizar as unidades da linguagem CSS.
Podemos classificar essas unidades em absolutas e relativas.

Unidades absolutas

Unidade Descrição
cm centímetro
mm milímetro
in polegada
pt ponto (1 pt é igual a 1/72 in)
pc pica (1 pc é igual a 12 pt)
px pixel

www.facebook.com/k19treinamentos 155
CSS 156

Apesar de ser considerada absoluta, a unidade px depende da resolução e do tamanho da tela.

Por exemplo, considere uma tela de 15 polegadas com resolução 1920x1080 e outra de 14 polegadas
com resolução 1024x768. Na primeira tela, 1 px é igual a 0,172 mm. Na segunda tela, 1 px equivale a
0,277 mm.

Unidades relativas

Unidade Descrição
em 1 em é igual ao tamanho da fonte do elemento onde essa unidade for utili-
zada.
ex Geralmente, 1 ex é igual a altura da letra “x” da fonte atual.
ch Geralmente, 1 ch é igual a largura do dígito “0” da fonte atual.
rem 1 rem é igual ao tamanho da fonte do elemento raiz do documento HTML.
vw 1 vw é igual a 1% da largura da área de visualização do navegador (viewport).
vh 1 vh é igual a 1% da altura da área de visualização do navegador (viewport).
vmin 1 vmim é igual ao valor mínimo entre vw e vh.
vmax 1 vmim é igual ao valor máximo entre vw e vh.

Backgrounds

Podemos definir a formatação do background de um elemento HTML com as seguintes proprie-

dades CSS:

background-color
A propriedade background-color é utilizada para definir a cor do background dos elementos
HTML.

Valor Descrição
color Uma cor CSS.
transparent Faz o background ser transparente (padrão).
inherit Assume o valor da mesma propriedade no elemento HTML pai.

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.

Valor Descrição
url(’url’) URL da imagem de background.
none Sem imagem de background (padrão).
inherit Assume o valor da mesma propriedade no elemento HTML pai.

156 www.k19.com.br
157 CSS

Mais Sobre
Podemos definir múltiplas imagens de background. As URLs dessas imagens devem
ser separadas por vírgula. As imagens são 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.

. url ( " imagem1 . png " ) , url ( " imagem2 . png " ) , url ( " imagem3 . png " ) .,
1 background - image .

background-repeat
Por padrão, 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 background-
repeat permite controlar como essa replicação deve ser realizada. Essa propriedade aceita os se-
guintes valores:

Valor Descrição
repeat A imagem de background é replicada na horizontal e na vertical (padrão).
repeat-x A imagem de background é replicada apenas na horizontal.
repeat-y A imagem de background é replicada apenas na vertical.
no-repeat A imagem não é replicada.
inherit Assume o valor da mesma propriedade no elemento HTML pai.

background-repeat: repeat background-repeat: repeat-x

www.facebook.com/k19treinamentos 157
CSS 158

background-repeat: repeat-y background-repeat: no-repeat

background-attachment
A propriedade background-attachment permite definir qual é comportamento dos backgrounds
em relação a rolagem do conteúdo.

Valor Descrição
scroll O background acompanha a rolagem do conteúdo (padrão).
fixed O background não acompanha a rolagem do conteúdo.

background-attachment: fixed

background-attachment: scroll

background-position
Para derterminar a posição das imagens utilizadas como background dos elementos HTML, de-
vemos utilizar a propriedade background-position.

Valor Descrição
left top Canto superior esquerdo (padrão).
center top Centralizado horizontalmente no topo.
right top Canto superior direito.
left center Do lado esquerdo centralizado verticalmente.
center center Centralizado horizontalmente e verticalmente.

158 www.k19.com.br
159 CSS

Valor Descrição
right center Do lado direito centralizado verticalmente.
left bottom Canto inferior esquerdo.
center bottom Centralizado horizontalmente na base.
right bottom Canto inferior direito.
left O mesmo que "left center".
center O mesmo que "center center".
right O mesmo que "right center".
top O mesmo que "center top".
bottom O mesmo que "center bottom".
x% y% O valor x corresponde à posição horizontal e o y à posição vertical. Eles são
relativos ao canto superior esquerdo.
x% O mesmo que "x% 50%".
medida1 medida2 A medida1 corresponde à posição horizontal e a medida2 à posição vertical.
Elas são relativas ao canto superior esquerdo.
inherit Assume o valor da mesma propriedade no elemento HTML pai.

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.

Valor Descrição
border-box Área delimitada pelas bordas (padrão).
padding-box Área delimitada pelas margens internas.
content-box Área delimitada pelo conteúdo.

Lorem ipsum dolor sit amet, consec-

tetur adipiscing elit. Nunc iaculis
pharetra felis elementum mollis.
Integer iaculis luctus ante quis
background-clip: border-box
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, consec-

tetur adipiscing elit. Nunc iaculis
pharetra felis elementum mollis.
Integer iaculis luctus ante quis
background-clip: padding-box
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, consec-

tetur adipiscing elit. Nunc iaculis
pharetra felis elementum mollis.
Integer iaculis luctus ante quis
background-clip: content-box
consectetur. Pellentesque a libero
ultrices, varius nibh eu, ullamcorper
nunc. Sed iaculis congue dui nec
iaculis. Ut sagittis nec tortor quis

background-origin
A propriedade background-origin determina onde ficará o ponto de origem para o posiciona-
mento das imagens utilizadas como background.

160 www.k19.com.br
161 CSS

Valor Descrição
border-box Canto superior esquerdo da área delimitada pelas bordas.
padding-box Canto superior esquerdo da área delimitada pelas margens internas (padrão).
content-box Canto superior esquerdo da área delimitada pelo conteúdo.

Lorem ipsum dolor sit amet, consec-

tetur adipiscing elit. Nunc iaculis
pharetra felis elementum mollis.
Integer iaculis luctus ante quis background-origin: border-box;
consectetur. Pellentesque a libero background-repeat: no-repeat;
ultrices, varius nibh eu, ullamcorper
nunc. Sed iaculis congue dui nec
iaculis. Ut sagittis nec tortor quis

Lorem ipsum dolor sit amet, consec-

tetur adipiscing elit. Nunc iaculis
pharetra felis elementum mollis.
Integer iaculis luctus ante quis background-origin: padding-box;
consectetur. Pellentesque a libero background-repeat: no-repeat;
ultrices, varius nibh eu, ullamcorper
nunc. Sed iaculis congue dui nec
iaculis. Ut sagittis nec tortor quis

Lorem ipsum dolor sit amet, consec-

tetur adipiscing elit. Nunc iaculis
pharetra felis elementum mollis.
Integer iaculis luctus ante quis background-origin: content-box;
consectetur. Pellentesque a libero background-repeat: no-repeat;
ultrices, varius nibh eu, ullamcorper
nunc. Sed iaculis congue dui nec
iaculis. Ut sagittis nec tortor quis

background-size
Quando uma imagem é utilizada como background de um elemento HTML, podemos definir o
tamanho dessa imagem com a propriedade background-size.

Valor Descrição
auto auto Tamanho original da imagem (padrão).
auto O mesmo que "auto auto".
medida auto A medida corresponde à largura. A altura é calculada de forma proporcional
à largura.
auto medida A medida corresponde à altura. A largura é calculada de forma proporcional
à altura.

www.facebook.com/k19treinamentos 161
CSS 162

Valor Descrição
medida1 medida2 A medida1 corresponde à largura e a medida2 à altura.
x% y% O valor x corresponde à largura e o y à altura. Esses valores são porcetagens
relativas à dimensão do elemento HTML.
x% auto O valor x corresponde à largura. Esse valor é uma porcentagem relativa à
largura do elemento HTML. A altura é calculada automaticamente de forma
proporcional a largura.
auto y% O valor y corresponde à altura. Esse valor é uma porcentagem relativa à al-
tura do elemento HTML. A largura é calculada automaticamente de forma
proporcional a altura.
cover A imagem de background é redimensionada proporcionalmente de tal forma
a cobrir toda a área do elemento HTML.
contain A imagem de background é redimensionada proporcionalmente de tal forma
a ter o maior tamanho possível sem extrapolar a área do elemento HTML.

Lorem ipsum dolor sit amet, consec-

tetur adipiscing elit. Nunc iaculis
pharetra felis elementum mollis.
Integer iaculis luctus ante quis
background-size: 50% 50%
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, consec-

tetur adipiscing elit. Nunc iaculis
pharetra felis elementum mollis.
Integer iaculis luctus ante quis
background-size: cover
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, consec-

tetur adipiscing elit. Nunc iaculis
pharetra felis elementum mollis.
Integer iaculis luctus ante quis
background-size: contain
consectetur. Pellentesque a libero
ultrices, varius nibh eu, ullamcorper
nunc. Sed iaculis congue dui nec
iaculis. Ut sagittis nec tortor quis

162 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 .
,

Exercícios de Fixação

6 No projeto css, crie um arquivo chamado backgrounds.html.

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 - Backgrounds </ title >
6 < link rel = " stylesheet " type = " text / css " href = " backgrounds . css " >
7 </ head >
8 < body >
9 < div id = " div1 " > </ div >
1 < div id = " div2 " > </ div >
11 < div id = " div3 " > </ div >
12 < div id = " div4 " > </ div >
13 < div id = " div5 " > </ div >
14 </ body >
15 </ html >

Código HTML 3.9: backgrounds.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao6.zip

7 No projeto css, crie um arquivo CSS chamado backgrounds.css.

1 div {
2 . 2 px ,.
width .
3 height .. 1 px ,.
4 margin .. 1 px ,.
5 border .. 5 px black dashed ,
.
6 }
7
8 # div1 {
9 background - color .
. yellow ,.
1 }
11
12 # div2 {
13 background - color .. # c1a4cd ,.
14 background - clip .
. padding - box .
,
15 }
16
17 # div3 {
18 . url ( " http .. // k19 . com . br / figs / seguro - treinamento . png " ) .,
background - image .
19 background - repeat .. no - repeat . ,
2 }
21
22 # div4 {
23 background - image .
. url ( " http .. // k19 . com . br / figs / seguro - treinamento . png " ) .,
24 background - repeat .. no - repeat , .
25 background - origin .. border - box . ,
26 }

www.facebook.com/k19treinamentos 163
CSS 164

27
28 # div5 {
29 background - image .. url ( " http .. // k19 . com . br / figs / seguro - treinamento . png " ) .,
3 background - repeat . . no - repeat , .
31 background - size .
. contain . ,
32 }
33
34 body {
35 . url ( " http .. // k19 . com . br / figs / main - header - logo . png " ) .,
background - image .
36 background - repeat .. no - repeat . ,
37 background - attachment . . fixed . ,
38 background - position .. top center , .
39 }

Código CSS 3.10: backgrounds.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao7.zip

8 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/backgrounds.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/backgrounds.html.

Textos

Podemos controlar a formatação dos textos contidos nos documentos HTML com as seguintes
propriedades CSS.

color
Podemos definir a cor do texto contido em um elemento HTML através da propriedade color.

1 p {
2 color .
. blue ,.
3 }

Valor Descrição
color Uma cor CSS.
inherit Assume o valor da mesma propriedade no elemento HTML pai.

text-align
O alinhamento do texto contido em um elemento HTML pode ser determinado com a proprie-
dade text-align.

Valor Descrição
left Alinhado à esquerda (padrão).
right Alinhado à direita.
center Centralizado.
justify Justificado.

164 www.k19.com.br
165 CSS

Valor Descrição
inherit Assume o valor da mesma propriedade no elemento HTML pai.

Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
sit amet, consectetur sit amet, consectetur sit amet, consectetur sit amet, consectetur
adipiscing elit. Cras adipiscing elit. Cras adipiscing elit. Cras adipiscing elit. Cras
vehicula bibendum vehicula bibendum vehicula bibendum vehicula bibendum
arcu sit amet lacinia. arcu sit amet lacinia. arcu sit amet lacinia. arcu sit amet lacinia.
Sed dui nulla. Sed dui nulla. Sed dui nulla. Sed dui nulla.

left center right justify

text-decoration
Podemos definir a decoração dos textos contidos em um elemento HTML com a propriedade
text-decoration.

Valor Descrição
none Texto sem decoração (padrão).
underline Texto com traço inferior.
overline Texto com traço superior.
line-through Texto riscado.
inherit Assume o valor da mesma propriedade no elemento HTML pai.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. text-decoration: none

Lorem ipsum dolor sit amet, consectetur adipiscing elit. text-decoration: underline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. text-decoration: overline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. text-decoration: line-through

text-transform
A capitalização dos textos pode ser determinada através da propriedade text-transform.

Valor Descrição
none Texto normal (padrão).
capitalize A primeira letra de cada palavra será transformada em maiúscula.
uppercase Todas as letras do texto serão transformadas em maiúsculas.
lowercase Todas as letras do texto serão transformadas em minúsculas.
inherit Assume o valor da mesma propriedade no elemento HTML pai.

Lorem ipsum dolor sit amet. Consectetur adipiscing elit. text-transform: none

Lorem Ipsum Dolor Sit Amet. Consectetur Adipiscing. text-transform: capitalize

LOREM IPSUM DOLOR SIT AMET. CONSECTUR. text-transform: uppercase

lorem ipsum dolor sit amet, consectetur adipiscing elit. 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 compri-
mento dessa indentação através da propriedade text-indent.

Valor Descrição
medida A medida corresponde ao tamanho da indentação.
x% O valor x é o tamanho da indentação em porcentagem relativa à largura do ele-
mento HTML pai.
inherit Assume o valor da mesma propriedade no elemento HTML pai.

Lorem ipsum dolor sit amet, consectetur adipiscing Lorem ipsum dolor sit amet, consectetur
elit. Cras vehicula bibendum arcu. adipiscing elit. Cras vehicula bibendum arcu.
Sed dui nulla, cursus et lacinia eu, vulputate ac Sed dui nulla, cursus et lacinia eu, vulputate ac
dolor. dolor.
Quisque faucibus congue congue. Quisque faucibus congue congue.

text-indent: 0 text-indent: 20px

letter-spacing
O espaçamento entre as letras pode ser determinado através da propriedade letter-spacing.

Valor Descrição
normal Espaçamento padrão definido para a fonte utilizada (padrão).
medida A medida corresponde ao espaçamento extra desejado. Esse valor pode ser nega-
tivo.
inherit Assume o valor da mesma propriedade no elemento HTML pai.

Lorem ipsum dolor sit amet. Consectetur adipiscing elit... letter-spacing: normal

L o r e m i p s u m d o l o r s i t a m e t . . . letter-spacing: 10px

Loremipsumdolorsitamet,consecteturadipiscingelit.Aeneanmatsnam... letter-spacing: -2px

word-spacing
O espaçamento entre as palavras pode ser determinado com a propriedade word-spacing.

Valor Descrição
normal Espaçamento padrão definido para a fonte utilizada (padrão).
medida A medida corresponde ao espaçamento extra desejado. Esse valor pode ser nega-
tivo.
inherit Assume o valor da mesma propriedade no elemento HTML pai.

Lorem ipsum dolor sit amet. Consectetur adipiscing elit... word-spacing: 0

Lorem ipsum dolor sit amet. Consectetur adipisc... word-spacing: 4px

Lorem
ipsum
dolor
sit
amet.
Consectetur
adipiscing
elit.
Pellentesque
leo
anon
tortor
tincid... word-spacing: -4px

166 www.k19.com.br
167 CSS

word-wrap
Podemos controlar, através da propriedade word-wrap, como as palavras são divididas quando
ocorre uma quebra de linha automática.

Valor Descrição
normal As palavras são divididas apenas nos “pontos de quebras” definidos com o ele-
mento wbr (padrão).
break-word As palavras podem ser divididas em qualquer ponto.

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 Descrição
normal Altura padrão de linha (padrão).
x A altura das linhas é o produto do valor x pelo tamanho da fonte atual.
medida A medida corresponde à altura das linhas.
x% O valor x é a altura das linhas em porcentagem relativa ao tamanho da fonte atual.
inherit Assume o valor da mesma propriedade no elemento HTML pai.

Lorem ipsum dolor sit amet, consectetur adipiscing Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Cras vehicula bibendum arcu.
Sed dui nulla, cursus et lacinia eu, vulputate ac elit. Cras vehicula bibendum arcu.
dolor.
Quisque faucibus congue congue. Sed dui nulla, cursus et lacinia eu, vulputate ac

line-height: normal line-height: 20px

white-space

É possível controlar a forma de tratamento dos espaços em branco e das quebras de linha através
da propriedade white-space. Os valores possíveis para essa propriedade são:

Valor Descrição
normal Sequências de espaços em branco contidas no código HTML são tratadas como um
único espaço. As quebras de linha contidas no código HTML não geram quebras de
linha na página renderizada. Quebras de linha automáticas são inseridas quando
necessário (padrão).

www.facebook.com/k19treinamentos 167
CSS 168

Valor Descrição
nowrap Sequências de espaços em branco contidas no código HTML são tratadas como um
único espaço. As quebras de linha contidas no código HTML não geram quebras
de linha na página renderizada. Nenhuma quebra de linha é inserida automatica-
mente.
pre Sequências de espaços em branco são completamente consideradas. As quebras
de linha contidas no código HTML geram quebras de linha na página renderizada.
Nenhuma quebra de linha é inserida automaticamente.
pre-line Sequências de espaços em branco contidas no código HTML são tratados como
um único espaço. As quebras de linha contidas no código HTML geram quebras de
linha na página renderizada. Quebras de linha automáticas são inseridas quando
necessário.
pre-wrap Sequências de espaços em branco são completamente consideradas. As quebras
de linha contidas no código HTML geram quebras de linha na página renderizada.
Quebras de linha automáticas são inseridas quando necessário.
inherit Assume o valor da mesma propriedade no elemento HTML pai.

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>

Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipiscing elit.
adipiscing elit. Cras vehicula bibendum
arcu. Sed dui nulla, cursus et lacinia eu,
vulputate ac dolor. Quisque faucibus
congue congue.

white-space: normal white-space: nowrap

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.

white-space: pre

Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
adipiscing elit. Cras vehicula bibendum consectetur adipiscing elit. Cras vehicula
arcu. bibendum arcu.

Sed dui nulla, cursus et lacinia eu, Sed dui nulla, cursus et lacinia
vulputate ac dolor. eu, vulputate ac dolor.
Quisque faucibus congue congue. Quisque faucibus congue congue.

white-space: pre-line white-space: pre-wrap

168 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 informações sobre a sobra
desejada: a posição horizontal, a posição vertical, o raio do blur e a cor.

Deslocamento Esmaecimento
horizontal (opcional)

text-shadow: 10px 10px 10px #ff0000

Deslocamento Cor
horizontal (opcional)

Várias sombras podem ser aplicadas ao texto de um elemento HTML. As informações que defi-
nem essas sombras devem ser separadas por vírgula.

text-shadow: 10px 10px 10px #ff0000 , -10px -10px 10px #0000ff

Outras propriedades
A linguagem CSS define mais algumas propriedades de formatação 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

Exercícios de Fixação

9 No projeto css, crie um arquivo chamado textos.html.

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 - Textos </ title >
6 < link rel = " stylesheet " type = " text / css " href = " textos . css " >
7 </ head >
8 < body >
9 <p id = " p1 " >
1 Lorem ipsum dolor sit amet , consectetur adipiscing elit . Cras
11 vehicula bibendum arcu sit amet lacinia . Sed dui nulla .
12 </ p >
13 <p id = " p2 " >
14 Otorrinolaringologista .
15 </ p >
16 <p id = " p3 " >
17 Lorem ipsum dolor sit amet ,
18 consectetur adipiscing elit . Cras vehicula
19 bibendum arcu .
2 Sed
21 dui nulla , cursus et lacinia eu , vulputate ac dolor .
22
23 Quisque faucibus congue congue .
24 </ p >
25 <p id = " p4 " >
26 Jonas Hirata .
27 </ p >
28 </ body >
29 </ html >

Código HTML 3.10: textos.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao9.zip

10 No projeto css, crie um arquivo CSS chamado textos.css.

1 p {
2 border .
. 2 px black solid .
,
3 }
4
5 # p1 {
6 width .. 4 px ,.
7 color .. blue ,.
8 . justify ,.
text - align .
9 text - decoration . . line - through ,.
1 text - transform . . uppercase .,
11 text - indent .. 2 px ,.
12 letter - spacing . . 2 px .,
13 line - height .. 25 px ,.
14 word - spacing . . 11 px ,.
15 }
16
17 # p2 {
18 width .. 1 px ,.
19 . break - word ,
word - wrap . .

170 www.k19.com.br
171 CSS

2 }
21
22 # p3 {
23 . 4 px ,.
width .
24 white - space .
. pre - line .
,
25 }
26
27 # p4 {
28 width .. 1 px ,.
29 text - transform . . uppercase .
,
3 letter - spacing . . 5 px .,
31 . 2 px 2 px # ff ,.
text - shadow .
32 }

Código CSS 3.12: textos.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao1.zip

11 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/textos.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/textos.html.

Fontes

Podemos controlar as fontes utilizadas nos textos de uma página web com as seguintes proprie-
dades.

font-family
Uma lista com as fontes desejadas ordenadas por prioridade pode ser determinada através da
propriedade font-family.

1 font - family .
. " Arial Black " , " Georgia " , " Courier New " .
,

Eventualmente, uma determinada fonte pode não estar disponível. Os navegadores devem uti-
lizar a primeira fonte disponível 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 são consideradas seguras (Web Safe Fonts). Essa qualidade é atribuída às fontes
que são suportadas em praticamente todos os sistemas operacionais e navegadores. Uma lista com
.//cssfontstack.com/.
essas fontes pode ser consultada no endereço http.

A linguagem CSS classifica as fontes em 5 grupos genéricos:

• serif: Fontes serifadas. Os acabamentos nas extremidades das hastes das letras são denomina-
dos serifas.
• sans-serif: Fontes não serifadas.
• cursive: Fontes com estilo semelhante à escrita manual.

www.facebook.com/k19treinamentos 171
CSS 172

• fantasy: Fontes que possuem caracteres com decorações.

• monospace: Fontes que possuem caracteres com largura exatamente igual.

Verdana Optimus Princeps Unispace Honey Script Most Wazted

Sans-serif Serif Monospace Cursive Fantasy

Helvetica Times New Roman Courier New Zapfino Comic Sans

Sans-serif Serif Monospace Cursive Fantasy

Se qualquer fonte de um determinado grupo genérico pode ser utilizada, devemos adicionar o
nome desse grupo na lista definida com a propriedade font-family. Nesse caso, os próprios navega-
dores escolhem uma fonte do grupo genérico escolhido.

. " Arial Black " , " Georgia " , " Courier New " , " sans - serif " ,
1 font - family . .

No exemplo acima, se as fontes “Arial Black”, “Georgia” e “Courier New” não estiverem disponí-
veis, os navegadores utilizarão alguma fonte do grupo sans-serif.

font-size
O tamanho da fonte é determinado através da propriedade font-size.

Valor Descrição
xx-small Tamanho de fonte extra extra pequeno.
x-small Tamanho de fonte extra pequeno.
small Tamanho de fonte pequeno.
medium Tamanho de fonte médio (padrão).
large Tamanho de fonte grande.
x-large Tamanho de fonte extra grande.
xx-large Tamanho de fonte extra extra grande.
smaller Um tamanho de fonte menor do que o do elemento HTML pai.
larger Um tamanho de fonte maior do que o do elemento HTML pai.
medida A medida corresponde ao tamanho da fonte.
x% O valor x é o tamanho da fonte. Esse valor é uma porcentagem do tamanho da
fonte do elemento HTML pai.
inherit Assume o valor da mesma propriedade no elemento HTML pai.

172 www.k19.com.br
173 CSS

9px K19 Treinamentos

xx-small K19 Treinamentos

x-small K19 Treinamentos

small K19 Treinamentos

medium K19 Treinamentos
large K19 Treinamentos
x-large K19 Treinamentos
xx-large
K19 Treinamentos
font-style
Podemos determinar o estilo da fonte através da propriedade font-style.

Valor Descrição
normal Fonte normal (padrão).
italic Fonte itálica.
oblique Fonte oblíqua.
inherit Assume o valor da mesma propriedade no elemento HTML pai.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. font-style: normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. font-style: italic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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 são transformadas em
maiúsculas e o tamanho da fonte da primeira letra de cada palavra é maior do que o tamanho da
fonte das demais letras.

Valor Descrição
normal Fonte normal (padrão).
small-caps Fonte em small caps.
inherit Assume o valor da mesma propriedade no elemento HTML pai.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. font-variant: normal

LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING E... 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 Descrição
normal Grossura normal (padrão).
bold Negrito.
100 Grossura 100.
200 Grossura 200.
300 Grossura 300.
400 Grossura 400. Equivale ao valor “normal”
500 Grossura 500.
600 Grossura 600.
700 Grossura 700. Equivale ao valor “bold”
800 Grossura 800.
900 Grossura 900.
bolder Uma grossura maior do que a do elemento HTML pai.
lighter Uma grossura menor do que a do elemento HTML pai.
inherit Assume o valor da mesma propriedade no elemento HTML pai.

Importante
Normalmente, as fontes não definem uma grossura diferente para cada um dos possí-
veis valores da propriedade font-weight. Por isso, geralmente, dois ou mais valores são
mapeados para a mesma grossura de fonte.

font-weight

Fonte utilizada: K19 Treinamentos font-weight: normal

Roboto
http://google.com/fonts/specimen/Roboto
K19 Treinamentos font-weight: 100

K19 Treinamentos font-weight: 200

K19 Treinamentos font-weight: 300

Curiosidade:
A fonte Roboto é a fonte padrão K19 Treinamentos font-weight: 400
utilizada nos sistemas Android a partir
K19 Treinamentos font-weight: 500
da versão 4.0.
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

. font - style font - variant font - weight font - size / line - height font - family ,
1 font . .

@font-face
A regra @font-face permite utilizar uma fonte mesmo que ela não esteja disponível no sistema
operacional do usuário. A fonte pode estar em um arquivo local (máquina do usuário) ou remoto
(servidor). Para cada fonte que deve ser adicionada, devemos definir uma regra font-face. Os na-
vegadores carregam as fontes sob demanda, ou seja, somente se elas forem necessárias. Veja um
exemplo de utilização dessa regra.

1 @font - face {
2 font - family .. ’K19 ’,.
3 src .
. url ( ’ http .. // www . k19 . com . br / fonts / K19 . woff ’) ,.
4 }

A função url() deve ser utilizada quando queremos uma fonte que está armazenada remota-
mente. Para carregar uma fonte disponível na máquina do usuário, devemos utilizar a função local(),
passando como parâmetro o nome da fonte desejada.

1 @font - face {
2 font - family .
. ’ NomeDaFonte ’,.
3 . local ( ’ nome - da - fonte ’) .,
src .
4 }

Para utilizar as fontes definidas na regra @font-face, basta definir a a propriedade font-family.

1 font - family .
. ’ NomeDaFonte ’,.

Os formatos de fonte suportados pelos navegadores variam de navegador para navegador. Em

uma regra font-face, podemos indicar a mesma fonte em vários formatos para suportar diversos
navegadores.

1 @font - face {
2 font - family .. ’ NomeDaFonte ’,.
3 src .
. url ( ’ nome - da - fonte . eot ’) ,. /* IE9 */
4 . url ( ’ nome - da - fonte . eot ?# iefix ’) format ( ’ embedded - opentype ’) , /* IE6 - IE8 */
src .
5 url ( ’ nome - da - fonte . woff ’) format ( ’ woff ’) , /* Navegadores Modernos */
6 url ( ’ nome - da - fonte . ttf ’) format ( ’ truetype ’) , /* Safari , Android , iOS */
7 url ( ’ nome - da - fonte . svg # webfontregular ’) format ( ’ svg ’) ,. /* iOS antigos */
8 }

O suporte dos navegadores aos diversos formatos de fonte está constantemente evoluindo. Há
diversos sites que informam de maneira atualizada quais formatos são suportados por cada navega-
dor. Recomendamos o site Can I use (http..//caniuse.com/).

Existem diversos repositórios de fontes pagas e/ou gratuitas. Podemos utilizar as fontes des-
ses repositórios através da regra font-face. Um dos repositórios mais importantes é o Google Fonts
(http..//www.google.com/fonts).

Outras propriedades
A linguagem CSS define mais algumas propriedades de formatação de fonte.

• font-size-adjust

www.facebook.com/k19treinamentos 175
CSS 176

• font-stretch

Exercícios de Fixação

12 No projeto css, crie um arquivo chamado fontes.html.

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 - Fontes </ title >
6 < link rel = ’ stylesheet ’ type = ’ text / css ’
7 href = ’ http .
. // fonts . googleapis . com / css ? family = Butcherman ’ >
8 < link rel = " stylesheet " type = " text / css " href = " fontes . css " >
9 </ head >
1 < body >
11 <p id = " p1 " >
12 Lorem ipsum dolor sit amet , consectetur adipiscing elit . Cras
13 vehicula bibendum arcu sit amet lacinia . Sed dui nulla .
14 </ p >
15 <p id = " p2 " >
16 Lorem ipsum dolor sit amet , consectetur adipiscing elit . Cras
17 vehicula bibendum arcu sit amet lacinia . Sed dui nulla .
18 </ p >
19 </ body >
2 </ html >

Código HTML 3.11: fontes.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao12.zip

13 No projeto css, crie um arquivo CSS chamado fontes.css.

1 p {
2 border .
. 2 px black solid .
,
3 }
4
5 # p1 {
6 width .. 4 px ,.
7 font - family .. " Arial Black " , " Georgia " , " Courier New " , " sans - serif " .
,
8 font - size .
. xx - large ,.
9 font - style .. italic ,.
1 font - variant .. small - caps .,
11 font - weight .. bold ,.
12 }
13
14 # p2 {
15 width .. 4 px ,.
16 font - family .
. ’ Butcherman ’,.
17 }

Código CSS 3.20: fontes.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao13.zip

14 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/fontes.html.

176 www.k19.com.br
177 CSS

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/fontes.html.

Listas

Podemos controlar a formatação das listas com as seguintes propriedades.

list-style-type
Podemos definir o símbolo utilizado nos itens de uma determinada lista com a propriedade list-
.//www.w3.
style-type. A listagem completa desses símbolos pode ser consultada no endereço http.
org/TR/css3-lists/#ua-stylesheet. Veja alguns possíveis 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

Listas com ordem

1. K19 Treinamentos I. K19 Treinamentos i. K19 Treinamentos

2. K19 Treinamentos II. K19 Treinamentos ii. K19 Treinamentos
3. K19 Treinamentos III. K19 Treinamentos iii. 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
γ. K19 Treinamentos ウ. K19 Treinamentos 三. K19 Treinamentos
lower-greek katakana cjk-ideographic

list-style-image

É possível definir uma imagem para ser utilizada nos itens de uma determinada lista com a pro-
priedade list-style-image.

Valor Descrição
url(“url”) URL da imagem.

www.facebook.com/k19treinamentos 177
CSS 178

Valor Descrição
none Sem imagem (padrão).
inherit Assume o valor da mesma propriedade no elemento HTML pai.

K19 Treinamentos
K19 Treinamentos list-style-image: url(’estrela.png’)

K19 Treinamentos

list-style-position
Por padrão, os bullets de uma lista não são exibidos dentro dos boxes dos itens. Podemos alterar
esse comportamento através da propriedade list-style-position.

Valor Descrição
inside Os bullets são exibidos dentro dos boxes dos itens.
outside Os bullets não são exibidos dentro dos boxes dos itens. (padrão).
inherit Assume o valor da mesma propriedade no elemento HTML pai.

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

Exercícios de Fixação

15 No projeto css, crie um arquivo chamado listas.html.

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 - Listas </ title >
6 < link rel = " stylesheet " type = " text / css " href = " listas . css " >
7 </ head >
8 < body >
9 < ul id = " ul1 " >
1 < li > K1 - Lo  gica de Programaça o </ li >
11 < li > K2 - Desenvolvimento Web com HTML , CSS e JavaScript </ li >
12 < li > K3 - Modelo Relacional e SQL </ li >

178 www.k19.com.br
179 CSS

13 </ ul >
14
15 < ul id = " ul2 " >
16 < li > K1 - Lo  gica de Programaça o </ li >
17 < li > K2 - Desenvolvimento Web com HTML , CSS e JavaScript </ li >
18 < li > K3 - Modelo Relacional e SQL </ li >
19 </ ul >
2
21 < ol >
22 < li > K1 - Lo  gica de Programaça o </ li >
23 < li > K2 - Desenvolvimento Web com HTML , CSS e JavaScript </ li >
24 < li > K3 - Modelo Relacional e SQL </ li >
25 </ ol >
26 </ body >
27 </ html >

Código HTML 3.12: listas.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao15.zip

16 No projeto css, crie um arquivo CSS chamado listas.css.

1 li {
2 border .. 2 px black solid .
,
3 . 4 px ,.
width .
4 }
5
6 # ul1 {
7 list - style - type .
. square ,.
8 . inside ,.
list - style - position .
9 }
1
11 # ul2 {
12 list - style - image .
. url ( ’ http .. // k19 . com . br / figs / k2 - logo - small . png ’) ,.
13 }
14
15 ol {
16 list - style - type .
. upper - roman .,
17 }

Código CSS 3.22: listas.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao16.zip

17 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/listas.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/listas.html.

Bordas

A linguagem CSS possui diversas propriedades para definir a formatação das bordas dos elemen-
tos 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 Descrição
thin Borda fina.
medium Borda média (padrão).
thick Borda grossa.
medida A medida corresponde à grossura da borda.
inherit Assume o valor da mesma propriedade no elemento HTML pai.

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(padrão) ou qualquer cor CSS.

Valor Descrição
color Uma cor CSS.
transparent Faz a borda ser transparente.
inherit Assume o valor da mesma propriedade no elemento HTML pai.

180 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-left-* border-top-* border-right-* border-bottom-*

O estilo, a grossura e a cor podem ser definidos individualmente para a borda da esquerda, borda
superior, borda da direita e borda inferior de um elemento HTML. Veja o exemplo a seguir.

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 são atalhos para as pro-
priedades que definem individualmente o estilo, a grossura e a cor das bordas da esquerda, superio-
res, da direita e inferiores dos elementos HTML. Veja alguns exemplos:

border-top: 10px dashed blue;

border-right: 10px solid green;
border-bottom: 10px groove orange;
border-left: 10px dotted red;

border-radius
Bordas com cantos arredondados podem ser definidas com a propriedade border-radius.

www.facebook.com/k19treinamentos 181
CSS 182

Valor Descrição
medida A medida corresponde ao raio.
x% O valor x é o raio em porcentagem.

5px
10px 10px 10px

10px 10px 10px

5px

border-radius: 10px border-radius: 10px 5px

5px 5px
10px 10px

20px 20px

5px 3px

border-radius: 10px 5px 20px border-radius: 10px 5px 20px 3px

border-*-*-radius

As propriedades border-top-left-radius, border-top-right-radius, border-bottom-right-radius

e border-bottom-left-radius são 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 border-top-right-radius: 10px

10px 10px

border-bottom-right-radius: 10px border-bottom-left-radius: 10px

182 www.k19.com.br
183 CSS

border-collapse
Podemos definir bordas para cada célula de uma tabela e para a própria tabela. Por padrão, essas
bordas são exibidas separadamente. Mas, é possível determinar que duas bordas “vizinhas” sejam
exibidas como se fossem uma só com a propriedade border-collapse.

Valor Descrição
separate Bordas separadas (padrão).
collapse Bordas unidades.
inherit Assume o valor da mesma propriedade no elemento HTML pai.

Célula 1 Célula 2 Célula 1 Célula 2

Célula 3 Célula 4 Célula 3 Célula 4

border-collapse: separate border-collapse: collapse

border-spacing
A propriedade border-spacing permite definir o espaçamento entre as células de uma tabela.
Essa propriedade afeta o espaçamento entre as bordas somente se o valor da propriedade border-
collapse for separate.

Valor Descrição
medida1 medida2 A medida1 corresponde ao espaçamento horizontal e a medida2 corresponde
ao espaçamento vertical.
medida A medida corresponde ao espaçamento horizontal e vertical.
inherit Assume o valor da mesma propriedade no elemento HTML pai.

Célula 1 Célula 2 Célula 1 Célula 2

Célula 3 Célula 4 Célula 3 Célula 4

border-spacing: 5px border-spacing: 10px 5px

Outras propriedades
A linguagem CSS define mais algumas propriedades de formatação 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

Exercícios de Fixação

18 No projeto css, crie um arquivo chamado bordas.html.

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 - Bordas </ title >
6 < link rel = " stylesheet " type = " text / css " href = " bordas . css " >
7 </ head >
8 < body >
9 < div id = " div1 " > </ div >
1 < div id = " div2 " > </ div >
11 < div id = " div3 " > </ div >
12 < div id = " div4 " > </ div >
13 < div id = " div5 " > </ div >
14
15 < table id = " tabela1 " >
16 < tr >
17 < td > K1 </ td >
18 < td > K2 </ td >
19 < td > K3 </ td >
2 </ tr >
21 </ table >
22
23 < table id = " tabela2 " >
24 < tr >
25 < td > K1 </ td >
26 < td > K2 </ td >
27 < td > K3 </ td >
28 </ tr >
29 </ table >
3 </ body >
31 </ html >

Código HTML 3.13: bordas.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao18.zip

19 No projeto css, crie um arquivo CSS chamado bordas.css.

1 div {
2 width .
. 2 px ,.
3 height .. 1 px ,.
4 margin .. 1 px ,.
5 }
6
7 # div1 {
8 border - style .
. solid . ,
9 . thin ,.
border - width .
1 border - color .
. red .,
11 border - radius .. 1 px ,.
12 }
13
14 # div2 {
15 . dotted ,.
border - style .
16 border - color .
. yellow ,.
17 border - radius .. 1 px 3 px .,
18 }
19
2 # div3 {

184 www.k19.com.br
185 CSS

21 . dashed ,
border - style . .
22 border - width .
. 4 px .,
23 border - color .
. blue ,.
24 border - radius .. 1 px 2 px 3 px 4 px .,
25 }
26
27 # div4 {
28 border - style .. double ,.
29 border - width .. 8 px .,
3 border - color .. green ,.
31 border - top - left - radius .
. 1 px ,.
32 border - top - right - radius .. 2 px ,.
33 border - bottom - right - radius .. 3 px ,.
34 border - bottom - left - radius .. 4 px ,.
35 }
36
37 # div5 {
38 . solid ,
border - left - style . .
39 border - left - width .
. thin ,.
4 . red .
border - left - color . ,
41
42 border - top - style .
. dotted ,.
43 . yellow ,.
border - top - color .
44
45 border - right - style .
. dashed .,
46 . 4 px .,
border - right - width .
47 border - right - color .
. blue ,.
48
49 border - bottom - style .
. double ,.
5 border - bottom - width .
. 8 px .,
51 . green ,.
border - bottom - color .
52 }
53
54 table , td {
55 font - size .
. xx - large ,.
56 border .. 1 px solid black ,.
57 margin .. 1 px ,.
58 }
59
6 # tabela1 {
61 border - collapse .
. collapse .
,
62 }
63
64 # tabela2 {
65 . 2 px ,.
border - spacing .
66 }

Código CSS 3.24: bordas.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao19.zip

20 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/bordas.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/bordas.html.

Outline

www.facebook.com/k19treinamentos 185
CSS 186

O box de um elemento HTML pode ser contornado por uma linha denominada outline. Essa
linha não afeta as dimensões dos boxes. A linguagem CSS possui diversas propriedades para definir
a formatação 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 Descrição
color Uma cor CSS.
invert A cor inversa à cor do background (padrão).
inherit Assume o valor da mesma propriedade no elemento HTML pai.

outline-width
A grossura dos outlines pode ser determinada com a propriedade outline-width.

Valor Descrição
thin Outline fino.
medium Outline médio (padrão).
thick Outline grosso.
medida A medida corresponde à grossura do outline.
inherit Assume o valor da mesma propriedade no elemento HTML pai.

186 www.k19.com.br
187 CSS

thin medium thick 10px

outline-offset
Podemos definir a distância do outline de um elemento HTML em relação às bordas do mesmo
com a propriedade outline-offset.

Valor Descrição
medida A medida corresponde ao tamanho do outline-offset (0px é o valor padrão). Esse
valor pode ser negativo.
inherit Assume o valor da mesma propriedade no elemento HTML pai.

Lorem ipsum dolor sit amet, consectetur adipiscing Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Aliquam accumsan vehicula diam sit amet elit. Aliquam accumsan vehicula diam sit amet
bibendum. Aliquam sed tempor tellus. Duis bibendum. Aliquam sed tempor tellus. Duis
placerat suscipit turpis in sollicitudin. Nunc lacus placerat suscipit turpis in sollicitudin. Nunc lacus
magna, auctor vitae venenatis eu, dictum ac augue. magna, auctor vitae venenatis eu, dictum ac augue.

outline-offset: 10px outline-offset: -5px

outline
A propriedade outline é um atalho para as propriedades outline-color, outline-style e outline-
width. Veja a sintaxe dessa propriedade.

1 outline .
. outline - color outline - style outline - width .
,

Exercícios de Fixação

21 No projeto css, crie um arquivo chamado outlines.html.

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 - Outlines </ title >
6 < link rel = " stylesheet " type = " text / css " href = " outlines . css " >
7 </ head >
8 < body >
9 < div id = " div1 " > </ div >
1 < div id = " div2 " > </ div >
11 < div id = " div3 " > </ div >
12 </ body >
13 </ html >

Código HTML 3.14: outlines.html

www.facebook.com/k19treinamentos 187
CSS 188

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao21.zip

22 No projeto css, crie um arquivo CSS chamado outlines.css.

1 div {
2 width .
. 2 px ,.
3 height .. 1 px ,.
4 border .. 4 px solid black ,.
5 margin .. 5 px ,.
6 }
7
8 # div1 {
9 outline - style .
. solid . ,
1 . red ,
outline - color . .
11 outline - width .
. 4 px .,
12 }
13
14 # div2 {
15 . dashed ,
outline - style . .
16 outline - color .
. blue ,.
17 outline - width .
. 2 px .,
18 outline - offset .. -2 px ,.
19 }
2
21 # div3 {
22 outline - style .
. solid . ,
23 . green ,.
outline - color .
24 outline - width .
. 4 px .,
25 outline - offset .. 2 px ,.
26 }

Código CSS 3.26: outlines.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao22.zip

23 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/outlines.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/outlines.html.

Sombras

A propriedade box-shadow permite adicionar sombras externas e internas nos boxes dos ele-
mentos HTML. O valor dessa propriedade pode ser definido de diversas maneiras. Confira, nas ima-
gens abaixo, algumas formas de utilização da propriedade box-shadow para definir sombras exter-
nas.

188 www.k19.com.br
189 CSS

Os valores dos deslocamentos vertical e horizontal podem ser negativos fazendo com que a som-
bra externa seja projetada para cima e para a esquerda.

As regras para definir uma da sombra interna são praticamente as mesmas da sombra externa. A
única diferença é que devemos começar a atribuição do valor com a palavra inset.

www.facebook.com/k19treinamentos 189
191 CSS

9 . 1 px 5 px gray ,.
box - shadow .
1 }
11
12 # div2 {
13 box - shadow .
. 1 px 5 px 5 px gray .,
14 }
15
16 # div3 {
17 . inset 1 px 1 px gray .,
box - shadow .
18 }
19
2 # div4 {
21 box - shadow .
. inset 1 px 1 px 5 px gray ,.
22 }

Código CSS 3.27: sombras.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao25.zip

26 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/sombras.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/sombras.html.

Margens

A linguagem CSS possui diversas propriedades para definir a formatação das margens internas e
externas dos elementos HTML.

margin-*
Os tamanhos das margens externas do box de elemento HTML podem ser definidos individual-
mente com as propriedades margin-left, margin-top, margin-right e margin-bottom.

Valor Descrição
auto O tamanho da margem é calculado automaticamente pelos navegadores.
medida A medida corresponde ao tamanho da margem (0px é o padrão).
x% O valor x corresponde ao tamanho da margem. Esse valor é uma porcenta-
gem da largura do elemento HTML pai.
inherit Assume o valor da mesma propriedade no elemento HTML pai.

www.facebook.com/k19treinamentos 191
CSS 192

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:

padding-*
Os tamanhos das margens internas do box de elemento HTML podem ser definidos individual-
mente com as propriedades padding-left, padding-top, padding-right e padding-bottom.

Valor Descrição
medida A medida corresponde ao tamanho da margem (0px é o padrão).
x% O valor x corresponde ao tamanho da margem. Esse valor é uma porcenta-
gem da largura do elemento HTML pai.
inherit Assume o valor da mesma propriedade no elemento HTML pai.

192 www.k19.com.br
193 CSS

padding
A propriedade padding é um atalho para as propriedades padding-left, padding-top, padding-
right e padding-bottom. Podemos utilizar a propriedade padding de 4 formas diferentes:

Mais Sobre
Considere o seguinte exemplo.

1 < div id = " div1 " >

2 < div id = " div2 " >...</ div >
3 < div >

1 # div2 {

www.facebook.com/k19treinamentos 193
CSS 194

2 width .
. 5%,.
3 }

Podemos utilizar as propriedades de margem para alinhar de forma centralizada na horizontal o

div2.

1 # div2 {
2 . auto ,
margin - left . .
3 margin - right .. auto .
,
4 . 5%,.
width .
5 }

Exercícios de Fixação

27 No projeto css, crie um arquivo chamado margens.html.

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 - Margens </ title >
6 < link rel = " stylesheet " type = " text / css " href = " margens . css " >
7 </ head >
8 < body >
9 < div >
1 <p id = " p1 " > K19 </ p >
11 <a id = " a1 " href = " # " > k19 </ a >
12 <a id = " a2 " href = " # " > k19 </ a >
13 <p id = " p2 " > K19 </ p >
14 </ div >
15 </ body >
16 </ html >

Código HTML 3.17: margens.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao27.zip

28 No projeto css, crie um arquivo CSS chamado margens.css.

1 div {
2 width .
. 6 px ,.
3 border .. 1 px solid black ,.
4 }
5
6 p, a {
7 border .
. 1 px solid black ,.
8 }
9
1 # p1 {
11 . 5 px 1 px 2 px 3 px .,
margin .
12 padding .. 5 px  px  px 2 px ,.
13 }
14
15 # a1 {
16 . 1 px ,.
margin - left .

194 www.k19.com.br
195 CSS

17 . 5 px .,
padding .
18 }
19
2 # a2 {
21 margin - left .
. 2 px ,.
22 padding .. 1 px ,.
23 }
24
25 # p2 {
26 margin .
. 2 px ,.
27 padding .. 1 px ,.
28 }

Código CSS 3.30: margens.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao28.zip

29 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/margens.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/margens.html.

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 Descrição
auto A altura ou largura são calculadas automaticamente pelos navegadores.
medida A medida corresponde à largura ou a altura.
x% A medida corresponde à largura ou a altura como porcentagem das dimensões do
elemento HTML pai
inherit Assume o valor da mesma propriedade no elemento HTML pai.

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 dimensão. Esses
limites podem ser definidos com as propriedades min-height e max-height.

Valor Descrição
none Sem valor (padrão para max-height).
medida A medida corresponde à altura máxima ou mínima desejada (0px é padrão para
min-height).

www.facebook.com/k19treinamentos 195
CSS 196

Valor Descrição
x% O valor x corresponde à altura máxima ou mínima. Esse valor é uma porcentagem
da altura do elemento HTML pai
inherit Assume o valor da mesma propriedade no elemento HTML pai.

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 dimensão. Esses
limites podem ser definidos com as propriedades min-width e max-width.

Valor Descrição
none Sem valor (padrão para max-width).
medida A medida corresponde à largura máxima ou mínima desejada (0px é padrão para
min-width).
x% O valor x corresponde à largura máxima ou mínima. Esse valor é uma porcentagem
da largura do elemento HTML pai
inherit Assume o valor da mesma propriedade no elemento HTML pai.

Exercícios de Fixação

30 No projeto css, crie um arquivo chamado altura-largura.html.

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 - Altura e Largura </ title >
6 < link rel = " stylesheet " type = " text / css " href = " altura - largura . css " >
7 </ head >
8 < body >
9 <p id = " p1 " >
1 Lorem ipsum dolor sit amet , consectetur adipiscing elit . In
11 mollis , nibh et tempor sollicitudin , orci lorem iaculis sem ,
12 sit amet sodales quam massa sit amet risus . Fusce malesuada
13 eleifend massa , ac mollis mi fermentum vitae . Nullam consequat
14 leo nunc , in ornare turpis aliquam quis .
15 </ p >
16 <p id = " p2 " >
17 Lorem ipsum dolor sit amet , consectetur adipiscing elit . In
18 mollis , nibh et tempor sollicitudin , orci lorem iaculis sem ,
19 sit amet sodales quam massa sit amet risus . Fusce malesuada
2 eleifend massa , ac mollis mi fermentum vitae . Nullam consequat
21 leo nunc , in ornare turpis aliquam quis .
22 </ p >
23 <p id = " p3 " >
24 Lorem ipsum dolor sit amet , consectetur adipiscing elit . In
25 mollis , nibh et tempor sollicitudin , orci lorem iaculis sem ,
26 sit amet sodales quam massa sit amet risus . Fusce malesuada
27 eleifend massa , ac mollis mi fermentum vitae . Nullam consequat
28 leo nunc , in ornare turpis aliquam quis .
29 </ p >
3 </ body >
31 </ html >

Código HTML 3.18: altura-largura.html

196 www.k19.com.br
197 CSS

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao3.zip

31 No projeto css, crie um arquivo CSS chamado altura-largura.css.

1 p {
2 border .. 1 px solid black ,.
3 max - width .
. 6 px ,.
4 max - height .. 25 px ,.
5 min - height .. 1 px ,.
6 }
7
8 # p1 {
9 width .
. 2 px ,.
1 }
11
12 # p2 {
13 width .
. 4 px ,.
14 }

Código CSS 3.31: altura-largura.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao31.zip

32 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/altura-largura.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/altura-largura.html.

Display e Visibilidade

A linguagem CSS possui algumas propriedades para controlar a forma de exibição e a visibilidade
dos elementos HTML.

display
A propriedade display define a forma de exibição dos elementos HTML. Os 5 principais valores
dessa propriedade são: inline(padrão), block, inline-block, list-item e none.

Valor Descrição
inline Considere o box de um elemento HTML com display: inline. Esse box não gera
quebras de linha e as suas dimensões são calculadas com base no conteúdo do ele-
mento HTML. As propriedades width e height não 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
não são “empurrados”.
block Considere o box de um elemento HTML com display: block. Esse box gera quebras
de linha e, por padrão, ocupa todo o espaço 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 Descrição
inline-block O comportamento dos boxes dos elementos HTML com display: inline-block é
similar ao dos boxes dos elementos HTML com display: inline. Basicamente, a
diferença entre eles é que podemos modificar a largura e altura dos boxes dos ele-
mentos HTML com display: 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 diferença
entre eles é que um bullet é exibido no canto esquerdo de box de um elemento
HTML com display: list-item.
none Os boxes dos elementos HTML com display: none não são exibidos e não ocupam
espaço na página.

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 suscipit turpis in sollicitudin.

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 não através da propriedade
visibility. O valor visible(padrão) indica que o elemento deve ser exibido e o valor hidden indica que
o elemento não deve ser exibido.

Valor Descrição
visible Visível (padrão).
hidden Invisível.
inherit Assume o valor da mesma propriedade no elemento HTML pai.

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 renderização, os elementos HTML com display: none são totalmente desconside-
rados. Em outras palavras, é como se eles simplesmente não existissem. Dessa forma,
eles não afetam o posicionamento dos demais elementos. Por outro lado, os elementos HTML
com visibility: hidden apesar de não serem exibidos fazem parte da página renderizada e po-
dem afetar o posicionamento dos demais elementos pois o espaço ocupado por eles pode não
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

Exercícios de Fixação

33 No projeto css, crie um arquivo chamado display-visibilidade.html.

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 - Display e Visibilidade </ title >
6 < link rel = " stylesheet " type = " text / css " href = " display - visibilidade . css " >
7 </ head >
8 < body >
9 <p >
1 Lorem ipsum dolor sit amet , < span id = " span1 " > inline </ span >
11 adipiscing elit . Aliquam accumsan vehicula diam sit amet bibendum .
12 </ p >
13
14 <p >
15 Lorem ipsum dolor sit amet , < span id = " span2 " > block </ span >
16 adipiscing elit . Aliquam accumsan vehicula diam sit amet bibendum .
17 </ p >
18
19 <p >
2 Lorem ipsum dolor sit amet , < span id = " span3 " > inline - block </ span >
21 adipiscing elit . Aliquam accumsan vehicula diam sit amet bibendum .
22 </ p >
23
24 <p >
25 Lorem ipsum dolor sit amet , < span id = " span4 " > list - item </ span >
26 adipiscing elit . Aliquam accumsan vehicula diam sit amet bibendum .
27 </ p >
28
29 <p >
3 Lorem ipsum dolor sit amet , < span id = " span5 " > none </ span >
31 adipiscing elit . Aliquam accumsan vehicula diam sit amet bibendum .
32 </ p >
33
34 <p >
35 Lorem ipsum dolor sit amet , < span id = " span6 " > hidden </ span >
36 adipiscing elit . Aliquam accumsan vehicula diam sit amet bibendum .
37 </ p >
38 </ body >
39 </ html >

Código HTML 3.19: display-visibilidade.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao33.zip

34 No projeto css, crie um arquivo CSS chamado display-visibilidade.css.

1 p {
2 . 2 px solid black ,.
border .

200 www.k19.com.br
201 CSS

3 . 6 px ,.
width .
4 }
5
6 span {
7 padding .. 15 px ,.
8 margin .. 4 px ,.
9 . 2 px ,.
width .
1 height .. 1 px ,.
11 border .. 2 px solid black ,.
12 background - color .. yellow ,.
13 }
14
15 # span1 {
16 display .
. inline ,.
17 }
18
19 # span2 {
2 . block ,.
display .
21 }
22
23 # span3 {
24 display .
. inline - block ,.
25 }
26
27 # span4 {
28 . list - item ,.
display .
29 }
3
31 # span5 {
32 display .
. none ,.
33 }
34
35 # span6 {
36 visibility .. hidden ,
.
37 }

Código CSS 3.32: display-visibilidade.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao34.zip

35 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/display-visibilidade.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/display-visibilidade.html.

Opacidade

Podemos definir a opacidade dos elementos HTML com a propriedade opacity.

Valor Descrição
x O valor x é um número entre 0(totalmente transparente) e 1(sem transparência,
padrão).
inherit Assume o valor da mesma propriedade no elemento HTML pai.

www.facebook.com/k19treinamentos 201
CSS 202

Exercícios de Fixação

36 No projeto css, crie um arquivo chamado opacidade.html.

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 - Opacidade </ title >
6 < link rel = " stylesheet " type = " text / css " href = " opacidade . css " >
7 </ head >
8 < body >
9 < div id = " div1 " > </ div >
1 < div id = " div2 " > </ div >
11 < div id = " div3 " > </ div >
12 < div id = " div4 " > </ div >
13 < div id = " div5 " > </ div >
14 </ body >
15 </ html >

Código HTML 3.20: opacidade.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao36.zip

37 No projeto css, crie um arquivo CSS chamado opacidade.css.

1 div {
2 width .
. 1 px ,.
3 height .. 1 px ,.
4 background - color .. red ,
.
5 }
6
7 # div1 {
8 opacity . .
. ,
9 }
1
11 # div2 {
12 . .25,.
opacity .
13 }
14
15 # div3 {
16 opacity .
. .5,.
17 }
18
19 # div4 {
2 . .75,.
opacity .
21 }
22
23 # div5 {
24 opacity . .
. 1,
25 }

202 www.k19.com.br
203 CSS

Código CSS 3.33: opacidade.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao37.zip

38 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/opacidade.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/opacidade.html.

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 padrão da propriedade position. O box de um elemento com position:
static é colocado na sua posição natural. Não podemos alterar a posição dos boxes dos elementos
HTML com position: static.

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: static

relative

O box de um elemento com position: relative é colocado em uma posição relativa a sua posição
natural. As propriedades left, top, right e bottom são utilizadas para determinar o deslocamento
entre a posição desejada e a posição natural. O espaço que seria ocupado por esse box se ele estivesse
em sua posição natural não é 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 posição relativa à página e não
acompanha a rolagem do conteúdo. As propriedades left, top, right e bottom são utilizadas para
determinar o deslocamento entre a posição desejada e à pagina.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam Fusce vehicula turpis vitae mauris ornare, sed vestibulum arcu
accumsan vehicula diam sit amet bibendum. Aliquam sed tempor dapibus. Etiam posuere luctus arcu ut molestie. Aenean rutrum
tellus. Duis placerat suscipit turpis in sollicitudin. erat nec dolor imperdiet volutpat. Fusce id turpis suscipit, tristique
Duis nunc est, consequat vel pulvinar in, egestas sit amet odio. dui ac, gravida augue. Nam ac placerat justo. Aliquam ut congue
Praesent at leo feugiat, fermentum diam ut, commodo lacus. ligula. Fusce id varius magna. In quis fringilla ante, id
Interdum et malesua fames ac ante ipsum primis in faucibus. pellentesque risus. Maecenas elementum at purus a facilisis.
Fusce vehicula turpis vitae mauris ornare, sed vestibulum arcu Lorem ipsum dolor sit amet, consectetur adipiscing elit.
dapibus. Etiam posuere luctus arcu ut molestie. Aenean rutrum Aliquam sed tempor tellus. Duis placerat suscipit turpis in
erat nec dolor imperdiet volutpat. Fusce id turpis suscipit, tristique sollicitudin. Nunc lacus magna, auctor vitae venenatis eu, dictum
dui ac, gravida augue. Nam ac placerat justo. Aliquam ut congue ac augue. Nunc eleifend dignissim felis at mattis. Duis nunc est,
ligula. Fusce id varius magna. In quis fringilla ante, id consequat vel pulvinar in, egestas sit amet odio. Praesent at leo
pellentesque risus. Maecenas elementum at purus a facilisis. feugiat, fermentum diam ut, commodo lacus. Interdum et
Lorem ipsum dolor sit amet, consectetur adipiscing elit. malesuada fames ac ante ipsum primis in faucibus.

position: fixed

absolute

O box de um elemento com position: absolute é colocado em uma posição relativa à posição do
box do elemento HTML ancestral mais próximo com position diferente de static. Se não existir um
ancestral nessas condições a posição será relativa à página. As propriedades left, top, right e bottom
são utilizadas para determinar o deslocamento entre a posição desejada e o ponto de referência.

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: absolute

Figura 3.7: Elemento com position diferente de static utilizado como referência

204 www.k19.com.br
205 CSS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam Duis nunc est, consequat vel pulvinar in, egestas sit amet odio.
accumsan vehicula diam sit amet bibendum. Aliquam sed tempor Praesent at leo feugiat, fermentum diam ut, commodo lacus.
tellus. Duis placerat suscipit turpis in sollicitudin. Interdum et malesua fames ac ante ipsum primis in faucibus.
Duis nunc est, consequat vel pulvinar in, egestas sit amet odio. Fusce vehicula turpis vitae mauris ornare, sed vestibulum arcu
Praesent at leo feugiat, fermentum diam ut, commodo lacus. dapibus. Etiam posuere luctus arcu ut molestie. Aenean rutrum
Interdum et malesua fames ac ante ipsum primis in faucibus. erat nec dolor imperdiet volutpat. Fusce id turpis suscipit, tristique
Fusce vehicula turpis vitae mauris ornare, sed vestibulum arcu dui ac, gravida augue. Nam ac placerat justo. Aliquam ut congue
dapibus. Etiam posuere luctus arcu ut molestie. Aenean rutrum ligula. Fusce id varius magna. In quis fringilla ante, id
erat nec dolor imperdiet volutpat. Fusce id turpis suscipit, tristique pellentesque risus. Maecenas elementum at purus a facilisis.
dui ac, gravida augue. Nam ac placerat justo. Aliquam ut congue Lorem ipsum dolor sit amet, consectetur adipiscing elit.
ligula. Fusce id varius magna. In quis fringilla ante, id Aliquam sed tempor tellus. Duis placerat suscipit turpis in
pellentesque risus. Maecenas elementum at purus a facilisis. sollicitudin. Nunc lacus magna, auctor vitae venenatis eu, dictum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ac augue. Nunc eleifend dignissim felis at mattis.

position: absolute

Figura 3.8: Página utilizada como referência

float
Podemos fazer o box de um elemento HTML flutuar ao redor dos demais elementos através da
propriedade float.

Valor Descrição
left Flutuar à esquerda.
right Flitar à direita.
none Sem flutuação (padrão).
inherit Assume o valor da mesma propriedade no elemento HTML pai.

Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetur adipiscing elit. consectetur adipiscing elit.
Aliquam accumsan vehicula Aliquam accumsan vehicula
diam sit amet bibendum. diam sit amet bibendum.
Aliquam sed tempor tellus. Duis placerat Aliquam sed tempor tellus. Duis placerat
suscipit turpis in sollicitudin. suscipit turpis in sollicitudin.

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 não afetam a altura ou a largura do
elemento HTML onde eles estão contidos.

clear
Os box dos elementos HTML próximos do box de um elemento HTML om float diferente de none
são “empurrados” horizontalmente à esquerda ou à direita. Podemos determinar que, ao invés de se-
rem “empurrados” horizontalmente, eles sejam exibidos em uma nova linha através da propriedade
clear.

www.facebook.com/k19treinamentos 205
CSS 206

Valor Descrição
left Não permite boxes flutuando à esquerda dele.
right Não permite boxes flutuando à direita dele.
both Não permite boxes flutuando nem à esquerda nem à direita dele.
none Permite boxes flutuando à esquerda e à direita (padrão) dele.
inherit Assume o valor da mesma propriedade no elemento HTML pai.

Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetur adipiscing elit. consectetur adipiscing elit.
clear: none

Aliquam sed tempor tellus. Duis placerat

clear: left
suscipit turpis in sollicitudin. Nunc lacus
magna, auctor vitae venenatis eu, dictum Aliquam sed tempor tellus. Duis placerat
ac augue. suscipit turpis in sollicitudin. Nunc lacus

clear: none clear: left

Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetur adipiscing elit. consectetur adipiscing elit.
clear: none

Aliquam sed tempor tellus. Duis placerat

clear: right
suscipit turpis in sollicitudin. Nunc lacus
magna, auctor vitae venenatis eu, dictum Aliquam sed tempor tellus. Duis placerat
ac augue. suscipit turpis in sollicitudin. Nunc lacus

clear: none clear: rigth

Lorem ipsum Lorem ipsum

dolor sit amet. dolor sit amet.
clear: none

Aliquam sed tempor tellus. Duis placerat

clear: both
suscipit turpis in sollicitudin. Nunc lacus
magna, auctor vitae venenatis eu, dictum Aliquam sed tempor tellus. Duis placerat
ac augue. suscipit turpis in sollicitudin. Nunc lacus

clear: none clear: both

z-index
A sobreposição dos boxes dos elementos HTML pode ser controlada através da propriedade z-
index. Basicamente, essa propriedade permite determinar em qual plano um box deve ser exibido.

Valor Descrição
auto Mesmo plano do box do elemento HTML pai (padrão).
x O valor x é o plano desejado. Esse valor pode ser negativo.
inherit Assume o valor da mesma propriedade no elemento HTML pai.

206 www.k19.com.br
207 CSS

Lorem ipsum dolor sit amet, consectetur adipiscing

z-index: 1 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
z-index: 2 ac augue. Nunc eleifend dignissim
felis at mattis. Duis nunc est, consequat vel pulvinar in, egestas sit amet odio. Praesent at leo
feugiat, fermentum diam ut, commodo lacus.

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; top: 50%
}
margin-top: -100px
#conteudo { #conteudo
height: 200px;
position: absolute;
top: 50%;
margin-top: -100px; #container
}

Exercícios de Fixação

39 No projeto css, crie um arquivo chamado posicionamento.html.

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 - Posicionamento </ title >
6 < link rel = " stylesheet " type = " text / css " href = " posicionamento . css " >
7 </ head >
8 < body >
9 < img src = " http .. // www . k19 . com . br / app / webroot / figs / main - header - logo . png " >
1 <p id = " p1 " >
11 Lorem ipsum dolor sit amet , consectetur adipiscing elit . Aliquam
12 accumsan vehicula diam sit amet bibendum .
13 </ p >
14 <p id = " p2 " >
15 Lorem ipsum dolor sit amet , consectetur adipiscing elit . Aliquam
16 accumsan vehicula diam sit amet bibendum .
17 </ p >
18
19 <p id = " p3 " >
2 Lorem ipsum dolor sit amet , consectetur adipiscing elit . Aliquam
21 accumsan vehicula diam sit amet bibendum .
22 </ p >
23
24 <p id = " p4 " >
25 Lorem ipsum dolor sit amet , consectetur adipiscing elit . Aliquam
26 accumsan vehicula diam sit amet bibendum .
27 </ p >
28 <p id = " p5 " >
29 Lorem ipsum dolor sit amet , consectetur adipiscing elit . Aliquam
3 accumsan vehicula diam sit amet bibendum .
31 </ p >

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 >
4 <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 " >
5 Posicionamento relativo
51 < div id = " div3 " >
52 Posicionamento absoluto
53 </ div >
54 </ div >
55 </ body >
56 </ html >

Código HTML 3.21: posicionamento.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao39.zip

40 No projeto css, crie um arquivo CSS chamado posicionamento.css.

1 img {
2 float .. left .
,
3 }
4
5 # p3 {
6 clear .. left .
,
7 }
8
9 div {
1 width .
. 2 px ,.
11 height .. 1 px ,.
12 color .
. white . ,
13 }
14
15 # div1 {
16 position .. fixed ,
.
17 right .
. 2 px ,.
18 top .
. 4 px ,.
19 background - color .. green ,.
2 }
21
22 # div2 {
23 position . . relative .,
24 . 3 px ,.
top .
25 left .. 6 px ,.
26 background - color .
. blue ,.
27 }
28
29 # div3 {
3 position . . absolute ,
.
31 bottom .. -4 px ,.
32 right .. -1 px ,.
33 background - color .. red ,
.
34 z - index .
. -1,.
35 }

208 www.k19.com.br
209 CSS

Código CSS 3.34: posicionamento.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao39.zip

41 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/posicionamento.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/posicionamento.html.

Overflow e clip

Eventualmente, o conteúdo de um elemento HTML extrapola os limites do mesmo. A linguagem

CSS define algumas propriedades para determinar como essa situação deve ser tratada.

overflow-x
A propriedade overflow-x determina o que os navegadores devem fazer quando o conteúdo de
um elemento HTML extrapola horizontalmente os limites do mesmo.

Valor Descrição
visible O conteúdo excedente na horizontal será exibido (padrão).
hidden O conteúdo excedente na horizontal não será exibido.
scroll O conteúdo excedente na horizontal não será exibido e um mecanismo rolagem
horizontal será disponibilizado.
auto O conteúdo excedente na horizontal não será exibido e um mecanismo rolagem
horizontal será disponibilizado somente se necessário.

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit am Lorem ipsum dolor sit am

overflow-x: visible overflow-x: hidden overflow-x: scroll

Lorem ipsum dolor sit am Lorem ipsum.

overflow-x: auto overflow-x: auto

www.facebook.com/k19treinamentos 209
CSS 210

overflow-y
A propriedade overflow-y determina o que os navegadores devem fazer quando o conteúdo de
um elemento HTML extrapola verticalmente os limites do mesmo.

Valor Descrição
visible O conteúdo excedente na vertical será exibido (padrão).
hidden O conteúdo excedente na vertical não será exibido.
scroll O conteúdo excedente na vertical não será exibido e um mecanismo rolagem ver-
tical será disponibilizado.
auto O conteúdo excedente na vertical não será exibido e um mecanismo rolagem ver-
tical será disponibilizado somente se necessário.

Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor
amet, consectetur amet, consectetur sit amet, consectetur
adipiscing elit. adipiscing elit. adipiscing elit.
Aliquam accumsan Aliquam accumsan Aliquam accumsan
vehicula diam sit.
overflow-y: visible overflow-y: hidden overflow-y: scroll

Lorem ipsum dolor Lorem ipsum dolor sit

sit amet, consectetur amet, consectetur
adipiscing elit. adipiscing elit.
Aliquam accumsan

overflow-y: auto overflow-y: auto

overflow
A propriedade overflow determina o que os navegadores devem fazer quando o conteúdo de um
elemento HTML extrapola os limites do mesmo.

Valor Descrição
visible O conteúdo excedente será exibido (padrão).
hidden O conteúdo excedente não será exibido.
scroll O conteúdo excedente não será exibido e um mecanismo rolagem será disponibi-
lizado.
auto O conteúdo excedente não será exibido e um mecanismo rolagem será disponibi-
lizado somente se necessário.
no-display O elemento HTML não será exibido se o seu conteúdo extrapolar os limites do seu
box.
inherit Assume o valor da mesma propriedade no elemento HTML pai.

210 www.k19.com.br
211 CSS

Lorem ipsum dolor sit amet, Lorem ipsum dolor sit am Lorem ipsum dolor sit am
consectetur adipiscing elit. consectetur adipiscing eli consectetur adipiscing eli
Aliquam accumsan vehicula Aliquam accumsan vehic Aliquam accumsan vehic
diam sit. Duis placerat diam sit Duis placerat diam sit Duis placerat
suscipit turpis in sollicitudin.
overflow: visible overflow: hidden overflow: scroll

Lorem ipsum dolor sit am Lorem ipsum dolor sit

consectetur adipiscing eli amet, consectetur.
Aliquam accumsan vehic
diam sit Duis placerat

overflow: auto overflow: auto

clip
Podemos determinar a região do box de um elemento HTML que deve ser exibida com a propri-
edade clip. Essa propriedade só tem efeito sobre elementos com position: absolute.

Valor Descrição
auto O box inteiro será exibido (padrão).
rect(top, right, bottom, left) Retângulo que define a região que será exibida.
inherit Assume o valor da mesma propriedade no elemento HTML pai.

85px 20px

50px

95px

clip: auto clip: rect(20px, 95px, 85px, 50px)

Exercícios de Fixação

42 No projeto css, crie um arquivo chamado overflow-clip.html.

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 - Overflow e clip </ title >
6 < link rel = " stylesheet " type = " text / css " href = " overflow - clip . css " >
7 </ head >

www.facebook.com/k19treinamentos 211
CSS 212

8 < body >

9 < div id = " div1 " >
1 <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 >
2 <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
3 < 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 Ola.
39 </ div >
4
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 >

Código HTML 3.22: overflow-clip.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao42.zip

43 No projeto css, crie um arquivo CSS chamado overflow-clip.css.

1 div {
2 margin .. 7 px ,.
3 width .
. 2 px ,.
4 height .. 1 px ,.
5 border .. 1 px solid red .
,
6 }
7
8 p {
9 width .
. 27 px ,.
1 }
11
12 # div1 {
13 overflow .
. visible .
,
14 }
15
16 # div2 {
17 overflow .
. hidden .
,
18 }
19
2 # div3 {
21 . scroll ,
overflow . .
22 }
23

212 www.k19.com.br
213 CSS

24 # div4 {
25 overflow .
. auto .
,
26 }
27
28 # div5 {
29 overflow .
. auto .
,
3 }
31
32 # img1 {
33 position .. absolute .
,
34 top .
. 1 px ,.
35 left .. 4 px ,.
36 clip .. auto . ,
37 }
38
39 # img2 {
4 position . . absolute . ,
41 . 25 px ,.
top .
42 left .. 4 px ,.
43 clip .. rect (1 px , 118 px , 18 px , 4 px ) .,
44 }

Código CSS 3.35: overflow-clip.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao43.zip

44 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/overflow-clip.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/overflow-clip.html.

Transformações

No CSS3 foram introduzidas algumas funções para realizar as transformações de translado, es-
calonamento, distorção e rotação nos elementos de uma página HTML. Essas funções são utilizadas
em conjunto com a propriedade transform do CSS3.

translate()

O resultado da aplicação da função translate(m, n) é semelhante ao resultado obtido ao mover

um elemento através do atributo position com o valor relative. Ao utilizar a função translate(m, n)
um elemento é transladado a m unidades de medida da esquerda e n unidades de medida do topo.

www.facebook.com/k19treinamentos 213
CSS 214

transform: translate( m , n );

Original
Transladado

Figura 3.9: Função translate()

scale()

A função scale(m, n) escalonará as dimensões 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 fun-
ção seja chamada com apenas um parâmetro, a mesma taxa será aplicada na altura e largura do
elemento.

transform: scale( m , n );

w* m Original
w Escalonado

h
h* n

Figura 3.10: Função scale()

rotate()

A função 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

Figura 3.11: Função rotate()

skew()
A função skew(m, n) distorcerá um elemento em relação aos eixos x e y. m e n definem as distor-
ções 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

Figura 3.12: Função skew()

Exercícios de Fixação

45 No projeto css, crie um arquivo chamado transformacoes.html.

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 - Transformaço  es </ title >
6 < link rel = " stylesheet " type = " text / css " href = " transformacoes . css " >
7 </ head >
8 < body >

www.facebook.com/k19treinamentos 215
CSS 216

9 < div id = " div1 " >

1 translate ()
11 </ div >
12
13 < div id = " div2 " >
14 scale ()
15 </ div >
16
17 < div id = " div3 " >
18 rotate ()
19 </ div >
2
21 < div id = " div4 " >
22 skew ()
23 </ div >
24 </ body >
25 </ html >

Código HTML 3.23: transformacoes.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao45.zip

46 No projeto css, crie um arquivo CSS chamado transformacoes.css.

1 div {
2 margin .. 7 px ,.
3 border .. 1 px solid black ,.
4 background - color .. yellow ,.
5 . 1 px ,.
width .
6 height .. 1 px ,.
7 }
8
9 # div1 {
1 transform .
. translate (5 px , -2 px ) ,.
11
12 /* Webkit .. Chrome , Safari */
13 . translate (5 px , -2 px ) ,.
- webkit - transform .
14 }
15
16 # div2 {
17 transform .
. scale (.5 , 2) .,
18
19 /* Webkit .. Chrome , Safari */
2 - webkit - transform .
. scale (.5 , 2) .,
21 }
22
23 # div3 {
24 . rotate (15 deg ) ,.
transform .
25
26 /* Webkit .. Chrome , Safari */
27 . rotate (15 deg ) ,.
- webkit - transform .
28 }
29
3 # div4 {
31 transform .
. skew (1 deg , -45 deg ) ,.
32
33 /* Webkit .. Chrome , Safari */
34 - webkit - transform .
. skew (1 deg , -45 deg ) ,.
35 }
36
37 /* Moz .. Firefox */
38 /* substituir " webkit " por " moz "
39
4 /* O .. Opera */
41 /* substituir " webkit " por " o "
42
43 /* Ms .. Internet Explorer */

216 www.k19.com.br
217 CSS

44 /* substituir " webkit " por " ms " */

Código CSS 3.36: transformacoes.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao46.zip

47 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/transformacoes.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/transformacoes.html.

Transições

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 div {
2 width .
. 5 px ,.
3 height .. 5 px ,.
4 }
5
6 . hover {
div .
7 width .. 1 px ,.
8 height .. 1 px ,.
9 }

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; height: 80px;

Estado inicial Estado final

Quando a mudança visual de um elemento HTML é muito significativa, o resultado pode não ser
agradável aos usuário. A linguagem CSS possui propriedades para melhorar essas transições.

transition-duration
A duração das transições pode ser controlada com a propriedade transition-duration.

www.facebook.com/k19treinamentos 217
CSS 218

Valor Descrição
tempo A duração em segundos(s) ou milissegundos(ms). Os é o valor padrão.

Os navegadores devem gerar, automaticamente, frames intermediários entre visual inicial e o

final. Esses frames devem ser exibidos sequencialmente durante o tempo determinado com a pro-
priedade transition-duration.

width: 80px;
width: 20px; height: 80px;
height: 20px; transition-duration: 4s;

tempo (s)
0 4

transition-delay
Podemos estabelecer um atraso para o início de uma transição com a propriedade transition-
delay.

Valor Descrição
tempo A duração em segundos(s) ou milissegundos(ms). Os é o valor padrão.

width: 80px;
height: 80px;
width: 20px; transition-duration: 1500ms;
height: 20px; transition-delay: 1s;

tempo (s)
0 1 2.5

transition-timing-function
Os frames que foram uma transição podem ser exibidos com padrões diferentes. Por exemplo,
uma transição pode iniciar devagar, no meio acelerar e terminar devagar. O padrão desejado pode
ser determinado através da propriedade transition-timing-function.

Valor Descrição
linear Mesma velocidade do início até o final da transição. Equivale a cubic-
bezier(0, 0, 1, 1).
ease O início da transição é lento, o meio é rápido e o final volta a ser lento (pa-
drão). Equivale a cubic-bezier(0.25, 0.1, 0.25, 1).

218 www.k19.com.br
219 CSS

Valor Descrição
ease-in O início da transição é lento. O meio e o final são rápidos. Equivale a cubic-
bezier(0.42, 0, 1, 1)
ease-out O início e o meio da transição são rápidos e o final é lento. Equivale a cubic-
bezier(0, 0, 0.58, 1)
ease-in-out Semelhante ao valor ease com início e final mais longos. Equivale a cubic-
bezier(0.42, 0, 0.58, 1).
cubic-bezier(n,n,n,n) A transição seguirá o padrão definido pela função cúbica de bezier.

height: 80px;
transition-duration: 4s;
height: 20px; transition-timing-function: linear;

tempo (s)
0 4

height: 80px;
transition-duration: 4s;
height: 20px; transition-timing-function: ease;

tempo (s)
0 4

height: 80px;
transition-duration: 4s;
height: 20px; transition-timing-function: ease-in;

tempo (s)
0 4

www.facebook.com/k19treinamentos 219
CSS 220

height: 80px;
transition-duration: 4s;
height: 20px; transition-timing-function: ease-out;

tempo (s)
0 4

height: 80px;
transition-duration: 4s;
height: 20px; transition-timing-function: ease-in-out;

tempo (s)
0 4

transition-property
Podemos escolher quais propriedades CSS devem ser consideradas nas transições através da pro-
priedade transition-property.

Valor Descrição
none Nenhuma propriedade será considerada na transição.
all Todas as propriedades serão consideradas na transição (padrão).
lista-de-propriedades Lista das propriedades que devem ser consideradas na transição.

220 www.k19.com.br
221 CSS

Exercícios de Fixação

48 No projeto css, crie um arquivo chamado transicoes.html.

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 - Transiço  es </ title >
6 < link rel = " stylesheet " type = " text / css " href = " transicoes . css " >
7 </ head >
8 < body >
9 < div id = " div1 " >
1 K19 Treinamentos
11 </ div >
12 </ body >
13 </ html >

Código HTML 3.24: transicoes.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao48.zip

49 No projeto css, crie um arquivo CSS chamado transicoes.css.

1 # div1 {
2 margin .. 3 px ,.
3 padding .. 1 px ,.
4 width .
. 2 px ,.
5 height .. 2 px ,.
6 background - color .. #64 e83 ,.
7 color .
. white . ,
8 transition .. 1 s ease - in - out ,.
9 }
1
11 # div1 .. hover {
12 transform . . scale (4 , 4) rotate (36 deg ) .,
13
14 /* Webkit .. Chrome , Safari */
15 - webkit - transform .
. scale (4 , 4) rotate (36 deg ) .,
16 }
17
18 /* Moz .. Firefox */
19 /* substituir " webkit " por " moz "
2
21 /* O .. Opera */
22 /* substituir " webkit " por " o "
23
24 /* Ms .. Internet Explorer */
25 /* substituir " webkit " por " ms " */

Código CSS 3.38: transicoes.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao49.zip

50 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/transicoes.html.

www.facebook.com/k19treinamentos 221
CSS 222

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/transicoes.html.

Animações

A partir da sua terceira versão, a linguagem CSS adicionou algumas propriedades para criação de
animações. Essas animações são criadas através do conceito de keyframes. Nessa abordagem, de-
vemos definir os quadros principais e os navegadores completam a animação inserindo os quadros
intermerdiários.

Os quadros principais são definidos com a propriedade keyframes. A forma mais simples de
utilização dessa propriedade é definir o primeiro e o último quadro da animação. Veja, no exemplo
abaixo, a criação de uma animação chamada k19-animacao.

1 @keyframes k19 - animacao {

2 from {
3 . 1 px ,.
width .
4 }
5 to {
6 . 1 px ,.
width .
7 }
8 }

Os quadros principais são definidos de acordo com o momento no qual eles serão exibidos. Esse
instante é descrito como uma porcentagem do tempo total da animação.

222 www.k19.com.br
223 CSS

Mais Sobre
Essencialmente, as duas animações abaixo são exatamente iguais.

1 @keyframes animacao1 {
2 from {
3 width .
. 1 px ,.
4 }
5 to {
6 width .
. 7 px ,.
7 }
8 }

1 @keyframes animacao2 {
2 % {
3 width .
. 1 px ,.
4 }
5 1% {
6 width .
. 7 px ,.
7 }
8 }

Depois de definir as animações com a propriedade keyframes, devemos associá-la aos elemen-
tos HTML através da propriedade animation-name e determinar o tempo de duração com a propri-
edade 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 . 1 px ,.
width .
9 }
1 to {
11 width .
. 1 px ,.
12 }
13 }

animation-timing-function
Podemos determinar o padrão de exibição dos quadros de uma animação com a propriedade
animation-timing-function.

Valor Descrição
linear Mesma velocidade do início até o final da animação. Equivale a cubic-
bezier(0, 0, 1, 1).
ease O início da animação é lento, o meio é rápido e o final volta a ser lento (pa-
drão). Equivale a cubic-bezier(0.25, 0.1, 0.25, 1).
ease-in O início da animação é lento. O meio e o final são rápidos. Equivale a cubic-
bezier(0.42, 0, 1, 1)
ease-out O início e o meio da animação são rápidos e o final é lento. Equivale a cubic-
bezier(0, 0, 0.58, 1)
ease-in-out Semelhante ao valor ease com início e final mais longos. Equivale a cubic-
bezier(0.42, 0, 0.58, 1).
cubic-bezier(n,n,n,n) A animação seguirá o padrão definido pela função cúbica de Bézier.

animation-delay
Podemos adicionar um atraso para o início de uma animação com a propriedade animation-
delay.

Valor Descrição
tempo A duração em segundos(s) ou milissegundos(ms). 0s é o valor padrão.

animation-iteration-count
A quantidade de repetições de uma animação pode ser determinada com a propriedade animation-
iteration-count.

Valor Descrição
x O valor x é a quantidade de repetições da animação. 1 é o valor padrão.
infinite A animação se repetirá indefinidamente.

animation-direction
A direção adotada na exibição de uma animação pode ser determinada através da propriedade
animation-direction.

224 www.k19.com.br
225 CSS

Valor Descrição
normal A animação será exibida na direção normal (padrão).
reverse A animação será exibida na direção inversa.
alternate A animação será exibida nas direções normal e inversa de forma alternada,
iniciando com a direção normal
alternate-reverse A animação será exibida nas direções normal e inversa de forma alternada,
iniciando com a direção inversa.

animation-play-state
As animações podem ser pausadas ou reiniciadas através da propriedade animation-play-state.

Valor Descrição
paused A animação parada.
running A animação em execução.

Exercícios de Fixação

51 No projeto css, crie um arquivo chamado animacoes.html.

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 - Animaço  es </ title >
6 < link rel = " stylesheet " type = " text / css " href = " animacoes . css " >
7 </ head >
8 < body >
9 < img id = " img1 " src = " http .. // www . k19 . com . br / figs / bolinha - vermelha . png " >
1 < img id = " img2 " src = " http .. // www . k19 . com . br / figs / bolinha - vermelha - sombra . png " >
11 </ body >
12 </ html >

Código HTML 3.25: animacoes.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao51.zip

52 No projeto css, crie um arquivo CSS chamado animacoes.css.

1 # img1 {
2 position . . absolute ,.
3 top ..  px .,
4 left .. 1 px ,.
5 z - index .
. 2, .
6 animation . . animacao1 1 s linear , animacao2 .5 s linear ,
7 animacao3 5 ms linear , animacao4 5 ms linear ,.
8 animation - delay .. 2s , 3s , 3.5 s , 4 s ,.
9
1 /* Webkit .. Chrome , Safari */
11 - webkit - animation . . animacao1 1 s linear , animacao2 .5 s linear ,
12 animacao3 5 ms linear , animacao4 5 ms linear ,.
13 - webkit - animation - delay .. 2s , 3s , 3.5 s , 4 s ,.
14 }
15

www.facebook.com/k19treinamentos 225
CSS 226

16 # img2 {
17 position . . absolute .
,
18 top .. 4 px ,.
19 left .. 11 px ,.
2 z - index .
. 1,.
21 transform . . scale (2.5 , 2.5) .,
22 animation . . animacao5 1 s linear , animacao6 .5 s linear ,
23 animacao7 5 ms linear , animacao8 5 ms linear ,.
24 animation - delay .. 2s , 3s , 3.5 s , 4 s ,.
25
26 /* Webkit .. Chrome , Safari */
27 . scale (2.5 , 2.5) .,
- webkit - transform .
28 - webkit - animation .
. animacao5 1 s linear , animacao6 .5 s linear ,
29 animacao7 5 ms linear , animacao8 5 ms linear ,.
3 - webkit - animation - delay .. 2s , 3s , 3.5 s , 4 s ,.
31 }
32
33 @keyframes animacao1 {
34 to {
35 . 31 px ,.
top .
36 }
37 }
38
39 @keyframes animacao2 {
4 from {
41 . 31 px ,.
top .
42 }
43 to {
44 top .
. 335 px ,.
45 transform .. scale (1.25 , .75) ,.
46 }
47 }
48
49 @keyframes animacao3 {
5 from {
51 top .
. 335 px ,.
52 transform .. scale (1.25 , .75) ,.
53 }
54 to {
55 top .
. 285 px ,.
56 transform .. scale (.75 , 1.25) ,.
57 }
58 }
59
6 @keyframes animacao4 {
61 from {
62 top .
. 285 px ,.
63 transform .. scale (.75 , 1.25) ,.
64 }
65 to {
66 top .
. 31 px ,.
67 transform .. scale (1 , 1) ,.
68 }
69 }
7
71 @keyframes animacao5 {
72 to {
73 . scale (1.5 , 1.5) .,
transform .
74 }
75 }
76
77 @keyframes animacao6 {
78 from {
79 . scale (1.5 , 1.5) .,
transform .
8 }
81 to {
82 . scale (1.75 , 1.75) ,.
transform .
83 }
84 }
85

226 www.k19.com.br
 227 CSS

86 @keyframes animacao7 {
87 from {
88 transform .
. scale (1.75 , 1.75) ,.
89 }
9 to {
91 transform .
. scale (1.25 , 1.25) ,.
92 }
93 }
94
95 @keyframes animacao8 {
96 from {
97 . scale (1.25 , 1.25) ,.
transform .
98 }
99 to {
1 . scale (1.5 , 1.5) .,
transform .
11 }
12 }
13
14 /* Webkit .. Chrome , Safari */
15
16 @ - webkit - keyframes animacao1 {
17 to {
18 . 31 px ,.
top .
19 }
11 }
111
112 @ - webkit - keyframes animacao2 {
113 from {
114 top .
. 31 px ,.
115 }
116 to {
117 top .
. 335 px ,.
118 - webkit - transform .
. scale (1.25 , .75) ,.
119 }
12 }
121
122 @ - webkit - keyframes animacao3 {
123 from {
124 . 335 px ,.
top .
125 - webkit - transform .
. scale (1.25 , .75) ,.
126 }
127 to {
128 top .
. 285 px ,.
129 - webkit - transform .
. scale (.75 , 1.25) ,.
13 }
131 }
132
133 @ - webkit - keyframes animacao4 {
134 from {
135 . 285 px ,.
top .
136 - webkit - transform .
. scale (.75 , 1.25) ,.
137 }
138 to {
139 top .
. 31 px ,.
14 - webkit - transform .
. scale (1 , 1) ,.
141 }
142 }
143
144 @ - webkit - keyframes animacao5 {
145 to {
146 . scale (1.5 , 1.5) .,
- webkit - transform .
147 }
148 }
149
15 @ - webkit - keyframes animacao6 {
151 from {
152 . scale (1.5 , 1.5) .,
- webkit - transform .
153 }
154 to {
155 - webkit - transform .
. scale (1.75 , 1.75) ,.

www.facebook.com/k19treinamentos 227
 CSS 228

156 }
157 }
158
159 @ - webkit - keyframes animacao7 {
16 from {
161 - webkit - transform .
. scale (1.75 , 1.75) ,.
162 }
163 to {
164 . scale (1.25 , 1.25) ,.
- webkit - transform .
165 }
166 }
167
168 @ - webkit - keyframes animacao8 {
169 from {
17 . scale (1.25 , 1.25) ,.
- webkit - transform .
171 }
172 to {
173 . scale (1.5 , 1.5) .,
- webkit - transform .
174 }
175 }
176
177 /* Moz .. Firefox */
178 /* substituir " webkit " por " moz "
179
18 /* O .. Opera */
181 /* substituir " webkit " por " o "
182
183 /* Ms .. Internet Explorer */
184 /* substituir " webkit " por " ms " */

Código CSS 3.43: animacoes.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao52.zip

53 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/animacoes.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/animacoes.html.

Seletores

Como vimos, os seletores são utilizados para determinar quais elementos HTML devem ser afe-
tados por uma regra CSS. A linguagem CSS oferece uma grande variedade de seletores.

Seletores básicos

Seletor Padrão Exemplo Descrição

Universal * * Seleciona todos os elementos
Tipo e p Seleciona todos os elementos p
Classe .class .erro Seleciona todo elemento da classe erro
ID #id #conteudo Seleciona o elemento de id conteudo
Descendente e1 e2 pa Seleciona todo elemento a descendente de um ele-
mento p
Filho e1 > e2 p>a Seleciona todo elemento a filho de um elemento p

228 www.k19.com.br
229 CSS

Seletor Padrão Exemplo Descrição

Irmão Adjacente e1 + e2 h1 + p Seleciona todo elemento p imediatamente precedido
de um elemento h1
Irmão e1 ˜ e2 h1 ˜ p Seleciona todo elemento p precedido de um elemento
h1

Seletores de atributos

Padrão Exemplo Descrição

[a] [min] Seleciona todos os elementos que tenham o atributo
min definido
[a=“v”] [min=“10”] Seleciona todos os elementos que tenham o atributo
min igual a 10
[a˜=“v”] [title˜=“k19”] Seleciona todos os elementos que possuam a palavra
k19 no valor do atributo title
[aˆ=“v”] [hrefˆ="https"] Seleciona todos os elementos que tenham o valor do
atributo href iniciando com https
[a$=“v”] [href$=".css"] Seleciona todos os elementos que tenham o valor do
atributo href terminando com .css
[a*=“v”] [title*=“k19”] Seleciona todos os elementos que possuam a string
k19 no valor do atributo title
[a|=“v”] [href|="https"] Seleciona todos os elementos que tenham o atributo
href iniciando com https

Pseudo-classes

Padrão Exemplo Descrição

:root :root Seleciona o elemento raiz do documento
:nth-child(n) :nth-child(3) Seleciona todo terceiro elemento contido em algum
outro elemento
:nth-last-child(n) :nth-last-child(3) Seleciona todo terceiro elemento de trás para frente
contido em algum outro elemento
:nth-of-type(n) a:nth-of-type(3) Seleciona todo elemento a que é o terceiro elemento
contido em algum outro elemento
:nth-last-of-type(n) a:nth-last-of-type(3) Seleciona todo elemento a que é o terceiro elemento de
trás para frente contido em algum outro elemento
:first-child :first-child Seleciona todo primeiro elemento contido em algum
outro elemento
:last-child :last-child Seleciona todo último elemento contido em algum ou-
tro elemento
:first-of-type a:first-of-type Seleciona todo elemento a que é o primeiro elemento
contido em algum outro elemento
:last-of-type a:last-of-type Seleciona todo elemento a que é o último elemento
contido em algum outro elemento
:only-child :only-child Seleciona todo elemento que é filho único
:only-of-type a:only-of-type Seleciona todo elemento que é o único filho do tipo a
de algum outro elemento

www.facebook.com/k19treinamentos 229
CSS 230

Padrão Exemplo Descrição

:empty :empty Seleciona todo elemento que não tem conteúdo
:link a:link Seleciona todo link não visitado
:visited a:visited Seleciona todo link visitado
:active a:active Seleciona todo link ativo
:hover a:hover Seleciona todo link sob o ponteiro do mouse
:focus input:focus Seleciona o input que está no foco
:target :target Seleciona a âncora atual
:lang(lang) :lang(pt) Seleciona todos os elementos com a linguagem pt
:enabled input:enabled Seleciona todos os inputs habilitados
:disabled input:disabled Seleciona todos os inputs desabilitados
:checked input:checked Seleciona todos os inputs marcados
:not(s) :not(.erro) Seleciona todo elemento que não é da classe erro

Pseudo-elementos

Padrão Exemplo Descrição

:first-line p:first-line Seleciona a primeira linha de todo parágrafo
:first-letter p:first-letter Seleciona a primeira letra de todo parágrafo
:before p:before Utilizado para adicionar conteúdo antes dos parágra-
fos
:after p:after Utilizado para adicionar conteúdo depois dos parágra-
fos

Prioridade de seletores
Eventualmente, um elemento HTML é afetado por duas ou mais regras CSS. Além disso, uma de-
terminada 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 priori-
dades são calculadas de acordo com os seletores utilizados nas regras CSS e na ordem em que elas
foram definidas.

Considere o código HTML e o código CSS a seguir.

1 <p id = " p1 " class = " class1 " >

2 Lorem ipsum dolor sit amet , consectetur adipiscing elit .
3 </ p >

1 p {
2 color .. red .,
3 . 14 px ,.
font - size .
4 }
5
6 p {
7 color .
. blue ,.
8 }

Perceba que todo elemento p é afetado pelas duas regras CSS acima. Nessas duas regras, a pro-
priedade color foi definida com valores diferentes. Os seletores dessas duas regras possuem a mesma
importância. Nesse caso, a última regra tem maior prioridade. Portanto, o texto do parágrafo será
exibido em azul.

230 www.k19.com.br
231 CSS

A propriedade font-size não entrou em conflito, pois foi definida em apenas uma das regras CSS.
Portanto, o tamanho da fonte do texto do parágrafo será 14px.

Agora, suponha que o código CSS seja o seguinte:

1 . class1 {
2 color .. red .,
3 font - size .
. 14 px ,.
4 }
5
6 p {
7 . blue ,.
color .
8 }

Observe que o parágrafo do exemplo é afetado pelas duas regras CSS acima. Nesse caso, qual será
a cor do texto do parágrafo? A resposta correta é vermelho. Isso ocorre, pois os seletores de classe
possuem importância 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 importância também aumenta. Por isso, devemos seguir o
algoritmo definido na especificação da linguagem CSS para determinar a importância dos seletores.
Nesse algoritmo, os seletores obterão uma pontuação em quatro critérios diferentes.

A: Caso as propriedades sejam definidas através do atributo style, a pontuação nesse critério será 1.
Caso contrário será 0.

B: A pontuação nesse critério será a quantidade de seletores de ID que formam o seletor da regra
CSS.

C: A pontuação nesse critério será a soma das quantidades de seletores de classe, de atributos e de
pseudo-classes que formam o seletor da regra CSS.

D: A pontuação nesse critério será a soma das quantidades de seletores de tipo e de pseudo-elementos
que formam o seletor da regra CSS.

O critério A possui prioridade sobre o critério B, que por sua vez possui prioridade sobre o critério
C, que por sua vez possui prioridade sobre o critério D. Veja nas imagens abaixo, um exemplo de
como calcular a pontuação dos seletores.

C B C B C B C D D D C
.class2 #div1:hover #p1 .class1 #a1:visited span:first-child input[checked] {
color: red;
}

Pontuação: 0 , 3 , 5 , 3
A B C D

www.facebook.com/k19treinamentos 231
CSS 232

D D C D D C B C B C B
section article.class2 div div:hover #p1 .class1 #a1:visited #input1 {
color: red;
}

Pontuação: 0 , 3 , 4 , 4
A B C D

No critério A, as duas regras obtiveram a mesma pontuação. Como ocorreu um empate, devemos
analisar o critério seguinte. No critério B, houve outro empate. Portanto, devemos analisar o próximo
critério. No critério C, a primeira regra possui uma pontuação maior. Dessa forma, o seletor da
primeira regra possui maior importância fazendo com que essa regra tenha maior prioridade.

Exercícios de Fixação

54 No projeto css, crie um arquivo chamado seletores-basicos.html.

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 - Seletores - 1 </ title >
6 < link rel = " stylesheet " type = " text / css " href = " seletores - basicos . css " >
7 </ head >
8 < body >
9 < div id = " conteudo " >
1 <p > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ p >
11
12 < ul >
13 < li > Item 1 </ li >
14 < li class = " cancelado " > Item 2 </ li >
15 < li >
16 Item 3
17 < ul >
18 < li > Subitem 1 </ li >
19 < li > Subitem 2 </ li >
2 </ ul >
21 </ li >
22 < li class = " cancelado " > Item 4 </ li >
23 </ ul >
24
25 <p > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ p >
26 <p > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ p >
27 <p > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ p >
28 </ div >
29 </ body >
3 </ html >

Código HTML 3.27: seletores-basicos.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao54.zip

55 No projeto css, crie um arquivo CSS chamado seletores-basicos.css.

1 * {

232 www.k19.com.br
233 CSS

2 .  px .,
margin .
3 padding ..  px .,
4 }
5
6 body {
7 background - color .
. # ddd .,
8 }
9
1 # conteudo {
11 width .
. 8 px ,.
12 margin ..  auto . ,
13 background - color . . white ,
.
14 border .. 1 px solid #333,.
15 padding .. 1 px ,.
16 }
17
18 . cancelado {
19 . line - through ,.
text - decoration .
2 }
21
22 ul {
23 padding .
.    4 px .,
24 }
25
26 ul li {
27 . blue ,.
color .
28 }
29
3 # conteudo > ul > li {
31 margin . .
.   2 px ,
32 }
33
34 ul + p {
35 . red ,
color . .
36 }
37
38 ul ~ p {
39 font - style .
. italic ,.
4 }

Código CSS 3.46: seletores-basicos.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao55.zip

56 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/seletores-basicos.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/seletores-basicos.html.

57 No projeto css, crie um arquivo chamado seletores-de-atributos.html.

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 - Seletores - 2 </ title >
6 < link rel = " stylesheet " type = " text / css " href = " seletores - de - atributos . css " >
7 </ head >
8 < body >
9 <a href = " #a - link " > Link 1 </ a >
1 <a href = " #b - link " title = " Link para a pa  gina 2 " > Link 2 </ a >

www.facebook.com/k19treinamentos 233
CSS 234

11 <a href = " # link - c " title = " Pa  gina 3 " > Link 3 </ a >
12 <a href = " # link - d " title = " Link para a pa  gina 4 " > Link 4 </ a >
13 <a href = " # link - e " title = " Link para a pa  gina da K19 Treinamentos " > Link 5 </ a >
14 <a href = " # links - f " title = " Link para a pa  gina 6 " > Link 6 </ a >
15 <a href = " # link " title = " Link para a pa  gina 7 " > Link 7 </ a >
16
17 < hr >
18
19 < img src = " http .. // www . k19 . com . br / figs / main - header - logo . png "
2 title = " Logo da K19 " >
21 < img src = " http .. // www . k19 . com . br / figs / k1 - logo - large . png " >
22 < img src = " http .. // www . k19 . com . br / figs / k2 - logo - large . png " >
23 </ body >
24 </ html >

Código HTML 3.28: seletores-de-atributos.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao57.zip

58 No projeto css, crie um arquivo CSS chamado seletores-de-atributos.css.

1 [ title ] {
2 . 4 px solid red ,
border . .
3 }
4
5 [ title = ’ Pa
 gina 3 ’] {
6 color .. green ,.
7 }
8
9 [ title ~= ’ K19 ’] {
1 padding . . 1 px ,.
11 background . . yellow ,.
12 }
13
14 [ title ^= ’ Link ’] {
15 margin - right .. 3 px ,.
16 }
17
18 [ href$ = ’ link ’] {
19 outline . . 4 px solid blue ,.
2 }
21
22 [ src *= ’ large ’] {
23 border . . 4 px solid green ,.
24 }
25
26 [ href |= ’# link ’] {
27 font - size .
. 3 px ,.
28 }

Código CSS 3.47: seletores-de-atributos.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao58.zip

59 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/seletores-de-atributos.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/seletores-de-atributos.html.

234 www.k19.com.br
235 CSS

60 No projeto css, crie um arquivo chamado seletores-de-pseudo-classes.html.

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 - Seletores - 3 </ title >
6 < link rel = " stylesheet " type = " text / css " href = " seletores - de - pseudo - classes . css " >
7 </ head >
8 < body >
9 < h1 id = " seletores -3 - ancora " >
1 Lorem ipsum dolor sit amet , consectetur adipiscing elit .
11 </ h1 >
12
13 < ul id = " lista1 " >
14 < li > Item 1 </ li >
15 < li > Item 2 </ li >
16 < li > Item 3 </ li >
17 </ ul >
18
19 < ul id = " lista2 " >
2 < li > Item 1 </ li >
21 < li > Item 2 </ li >
22 < li > Item 3 </ li >
23 < li > Item 4 </ li >
24 < li > Item 5 </ li >
25 </ ul >
26
27 <p > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ p >
28 <p > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ p >
29 <p > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ p >
3 <p > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ p >
31 <p > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ p >
32
33 < div >
34 < h1 > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ h1 >
35 < h2 > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ h2 >
36 < h2 > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ h2 >
37 </ div >
38
39 < div >
4 < h1 > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ h1 >
41 </ div >
42
43 < div >
44 < h2 > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ h2 >
45 < h3 > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ h3 >
46 < h3 > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ h3 >
47 </ div >
48
49 < div > </ div >
5
51 < div >
52 <a href = " # seletores -3 - ancora " > Link 1 </ a >
53 <a href = " http .. // www . k19 . com . br " > Link 2 </ a >
54 </ div >
55
56 < div >
57 < input type = " text " >
58 < input type = " text " disabled >
59 < input type = " text " >
6 </ div >
61
62 < div >
63 < input type = " checkbox " >
64 < input type = " checkbox " checked >
65 < input type = " checkbox " >
66 </ div >
67
68 < ul lang = " es " >

www.facebook.com/k19treinamentos 235
CSS 236

69 < li > Item 1 </ li >

7 < 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
8 < ol lang = " en " >
81 < li > Item 1 </ li >
82 < li > Item 2 </ li >
83 < li > Item 3 </ li >
84 </ ol >
85 </ body >
86 </ html >

Código HTML 3.29: seletores-de-pseudo-classes.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao6.zip

61 No projeto css, crie um arquivo CSS chamado seletores-de-pseudo-classes.css.

1 .. root {
2 font - size .
. 3 px ,.
3 }
4
5 # lista1 li .. first - child {
6 color .
. red .,
7 }
8
9 # lista1 li .. last - child {
1 . blue ,.
color .
11 }
12
13 # lista2 li .. nth - child (2) {
14 color .
. magenta ,.
15 }
16
17 # lista2 li .. nth - last - child (2) {
18 . orange ,.
color .
19 }
2
21 p.. first - of - type {
22 color .. yellow ,.
23 }
24
25 p.. last - of - type {
26 color . . aqua ,.
27 }
28
29 p.. nth - of - type (2) {
3 color . . firebrick .,
31 }
32
33 p.. nth - last - of - type (2) {
34 color .. lawngreen .,
35 }
36
37 .. only - child {
38 border .. 4 px solid red .
,
39 }
4
41 h2 .. only - of - type {
42 color .. plum ,.

236 www.k19.com.br
237 CSS

43 }
44
45 .. empty {
46 . 2 px ,.
height .
47 border .
. 4 px dashed black ,.
48 }
49
5 a .. link {
51 color .. springgreen .,
52 font - weight .
. bold ,.
53 }
54
55 a .. visited {
56 color .
. # ccc .,
57 }
58
59 a .. active {
6 . orange ,.
color .
61 }
62
63 a .. hover {
64 color .
. fuchsia ,.
65 }
66
67 input .. focus {
68 . red ,
background - color . .
69 color . . white .
,
7 }
71
72 .. target {
73 border .. 4 px solid magenta ,.
74 color .
. purple ,.
75 }
76
77 .. lang ( en ) {
78 color . . red .
,
79 }
8
81 .. enabled {
82 outline .
. 4 px solid red .
,
83 }
84
85 .. disabled {
86 outline .
. 4 px solid blue ,.
87 }
88
89 .. checked {
9 . 4 px solid green ,.
outline .
91 }
92
93 .. not ( ul ) > li {
94 padding - left .
. 1 px ,.
95 }

Código CSS 3.48: seletores-de-pseudo-classes.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao61.zip

62 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/seletores-de-pseudo-classes.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/seletores-de-pseudo-classes.html.

www.facebook.com/k19treinamentos 237
CSS 238

63 No projeto css, crie um arquivo chamado seletores-de-pseudo-elementos.html.

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 - Seletores - 4 </ title >
6 < link rel = " stylesheet " type = " text / css " href = " seletores - de - pseudo - elementos . css " >
7 </ head >
8 < body >
9 < h1 > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ h1 >
1
11 <p >
12 Lorem ipsum dolor sit amet , consectetur adipiscing elit . In
13 mollis , nibh et tempor sollicitudin , orci lorem iaculis sem ,
14 sit amet sodales quam massa sit amet risus . Fusce malesuada
15 eleifend massa , ac mollis mi fermentum vitae . Nullam consequat
16 leo nunc , in ornare turpis aliquam quis .
17 </ p >
18 </ body >
19 </ html >

Código HTML 3.30: seletores-de-pseudo-elementos.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao63.zip

64 No projeto css, crie um arquivo CSS chamado seletores-de-pseudo-elementos.css.

1 p.. first - line {

2 . yellow ,.
background - color .
3 }
4
5 p.. first - letter {
6 font - size .
. 5 px ,.
7 }
8
9 h1 .. before {
1 content .. ’~ ’,.
11 color .
. red .
,
12 }
13
14 h1 .. after {
15 content .. ’ ~ ’,.
16 . red ,
color . .
17 }

Código CSS 3.49: seletores-de-pseudo-elementos.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao64.zip

65 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/seletores-de-pseudo-elementos.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/seletores-de-pseudo-elementos.html.

Media Queries

238 www.k19.com.br
239 CSS

Media Types
No momento em que definimos as regras CSS dos nossos documentos, também podemos de-
terminar para quais tipos de mídia essas regras serão válidas, ou seja, podemos decidir quais regras
serão 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 mídia 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 }

A linguagem CSS define os seguintes tipos de mídia.

Media Type Descrição

all Todos os tipos de mídia.
braille Dispositivos em braille com resposta a toques.
embossed Impressoras em braille.
handheld Dispositivos portáteis (exceto smartphones mais modernos).
print Impressoras convencionais.
projection Projetores.
screen Tela de computadores, smartphones ou algum dispositivo do gênero.
speech Sintetizadores de voz.
tty Dispositivos de grades com caracteres de tamanho fixo (teletypes, terminal
ou dispositivos com limitações de exibição).
tv Televisores.

Podemos definir as mesmas regras CSS para diversos tipos de mídia. Para isso devemos separar
esses tipos por vírgula.

1 < link rel = " stylesheet " type = " text / css " href = " aquivo . css " media = " screen , print " >

1 @media screen , print {

2 body {
3 background - color .
. black ,.
4 }
5
6 ...
7 }

Media Groups
Algumas propriedades não são aplicáveis a determinados tipos de mídia. Por exemplo, a propri-
edade width não pode ser aplicada à mídia speech. Por outro lado, algumas propriedades podem
ser aplicadas à diversas mídias. Por exemplo, a propriedade position pode ser aplicada às mídias
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 mídia, a especificação da linguagem CSS divide em grupos os diversos tipos de mídia.

Confira na tabela a seguir a relação entre os tipos de mídia e os grupos de mídia:

Media Type Media Groups

continuous e paged visual, audio, speech e tactile grid e bitmap interactive e static
braille continuous tactile grid ambos
embossed paged tactile grid static
handheld ambos visual, audio, speech ambos ambos
print 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 específicas

Os tipos de mídia do CSS permitem definir diferentes regras para cada tipo de mídia. Entretanto,
eventualmente é necessário definir regras CSS de acordo com características mais específicas dos
dispositivo de saída. Para isso, devemos utilizar as chamadas media queries. Veja o seguinte exem-
plo.

. 5 px ) {
1 @media screen and ( min - width .
2 ...
3 }

No exemplo acima, as regras CSS serão aplicadas caso o tipo de mídia utilizado seja screen e a
área de renderização do documento (viewport) tenha, no mínimo, 500 pixels de largura. Como vimos
as media queries também podem ser definidas através 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 .. 5 px ) " / >

No exemplo abaixo, o código dentro da regra media será aplicado quando a largura do viewport
for pelo menos 500 pixels ou quando a orientação for portrait.

1 @media ( min - width .

. 5 px ) , ( orientation .
. portrait ) {
2 ...
3 }

Eventualmente, uma media query pode não fazer sentido. Considere o seguinte exemplo.

1 @media speech and ( min - width .

. 5 px ) {
2 ...
3 }

240 www.k19.com.br
241 CSS

No exemplo acima, a media query é contraditória, pois o tipo de mídia speech não é compatível
com a propriedade min-width. Dessa forma, o código CSS definido dentro da regra media nunca
será processado.

Veja a seguir algumas propriedades que podemos utilizar nas media queries

Propriedade Descrição Valor Media Type min e max?

width Determina qual deve ser a largura do Medidas visual e tactile sim
viewport no dispositivo de saída.
height Determina qual deve ser a altura do Medidas visual e tactile sim
viewport no dispositivo de saída.
device-width Determina qual deve ser a largura da Medidas visual e tactile sim
tela do dispositivo de saída.
device-height Determina qual deve ser a altura da Medidas visual e tactile sim
tela do dispositivo de saída.
orientation Verifica se o viewport está na orien- portrait ou lands- bitmap não
tação portrait (retrato) ou landscape cape
(paisagem).
aspect-ratio Determina a razão entre as proprie- inteiro/inteiro bitmap sim
dades width e height.
color-index Determina o número de cores do inteiro visual sim
dispositivo de saída.
resolution Determina a resolução do disposi- dpi bitmap sim
tivo de saída.

Exercícios de Fixação

66 No projeto css, crie um arquivo chamado media-types.html.

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 - Media Types </ title >
6 < link rel = " stylesheet " type = " text / css " href = " media - types . css " >
7 </ head >
8 < body >
9 <p > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ p >
1 </ body >
11 </ html >

Código HTML 3.34: media-types.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao66.zip

67 No projeto css, crie um arquivo CSS chamado media-types.css.

1 @media all {
2 p {
3 . 5 px ,.
font - size .

www.facebook.com/k19treinamentos 241
CSS 242

4 }
5 }
6
7 @media screen {
8 p {
9 color .
. red .
,
1 }
11 }
12
13 @media print {
14 p {
15 . blue ,.
color .
16 }
17 }
18
19 @media handheld , screen and ( max - device - width .
. 48 px ) {
2 p {
21 . green ,.
color .
22 }
23 }

Código CSS 3.55: media-types.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao67.zip

68 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/media-types.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/media-types.html.

Sprites

Normalmente, uma página web é formada por diversas imagens pequenas ou médias. Se essas
imagens forem adicionadas com o elemento img, o navegador realizará uma requisição HTTP para
cada imagem. Consequentemente, o tempo de carregamento da página será alto devido a quanti-
dade de requisições e ao overhead dos pacotes HTTP.

Analogia
Adicionar individualmente imagens pequenas ou médias em uma página web é como
ter quer comprar diversos itens pequenos ou médios no supermercado e fazer uma vi-
agem para trazer cada um deles.

Uma técnica amplamente utilizada para melhorar o tempo de carregamento das páginas web é
denominada sprite. Essa técnica consiste em agrupar todas as imagens pequenas e médias em uma
única imagem grande e depois “recortá-la” com as propriedades CSS.

242 www.k19.com.br
243 CSS

Exercícios de Fixação

69 No projeto css, crie um arquivo chamado sprites.html.

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 - Sprites </ title >
6 < link rel = " stylesheet " type = " text / css " href = " sprites . css " >
7 </ head >
8 < body >
9 < ul >
1 < li > K11 - Orientaça o a Objetos em Java </ li >
11 < li class = " k12 " > K12 - Desenvolvimento Web com JSF2 e JPA2 </ li >
12 < li class = " k21 " > K21 - Persiste  ncia com JPA2 e Hibernate </ li >
13 < li class = " k22 " > K22 - Desenvolvimento Web Avançado com JSF2 , EJB3 .1 e CDI </ li >
14 < li class = " k23 " > K23 - Integraça o de Sistemas com Webservices , JMS e EJB </ li >
15 < li class = " k2 " > K2 - Formaça o Desenvolvedor Java Avançado </ li >
16 </ ul >
17 </ body >
18 </ html >

Código HTML 3.35: sprites.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao69.zip

70 No projeto css, crie um arquivo CSS chamado sprites.css.

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 244

9 }
1
11 li . k12 .. before {
12 . -44 px  px .,
background - position .
13 }
14
15 li . k21 .. before {
16 background - position .
. -88 px  px .,
17 }
18
19 li . k22 .. before {
2 .  px -44 px .,
background - position .
21 }
22
23 li . k23 .. before {
24 background - position .
. -44 px -44 px ,.
25 }
26
27 li . k2 .. before {
28 . -88 px -44 px ,.
background - position .
29 }

Código CSS 3.56: media-types.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-fixacao7.zip

71 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/sprites.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/sprites.html.

Gradientes (Conteúdo Extra)

Até a versão 2 do CSS, não era possível definir um gradiente de cores como background de um
elemento a não ser através de imagens estáticas (jpg, gif ou png). A partir da versão 3, podemos defi-
nir um gradiente diretamente no código CSS através das funções linear-gradient, repeating-linear-
gradient, radial-gradient e repeating-radial-gradient.

De acordo com a especificação CSS, os gradientes são semelhantes às imagens. Eles podem ser
definidos em qualquer propriedade que aceite uma imagem como valor.

Mais Sobre
Até o momento do fechamento da versão atual desta apostila, o navegador Firefox
só suporta as funções de gradiente nas propriedades background ou background-
image.

Gradiente linear

Para definir um gradiente linear, é necessário utilizar a função linear-gradient.

244 www.k19.com.br
245 CSS

Definição da Lista de
linha do gradiente paradas de cores
linear-gradient( [ <angulo> | to <lado-ou-canto>,]? <parada-de-cor> [, <parada-de-cor>]+ )

<angulo> <lado-ou-canto>
Representa o ângulo de inclinação do gradiente. Representa a região do box do gradiente na qual a última
<parada-de-cor> será posicionada. É formado pelos pares de
<parada-de-cor> lados left | right e/ou top | bottom, não importando a ordem em
Representa uma cor e a posição em que ela deve que aparecem. A primeira <parada-de-cor> será posicionada na
aparecer sobre a linha do gradiente. região simetricamente oposta a da última <parada-de-cor>.

No exemplo abaixo, podemos entender melhor cada um dos parâmetros:

Linha do gradiente
linear-gradient(to top left, green, yellow)

Última parada de cor (ending point)

top left

-
340° -20°

Primeira parada de cor (starting point)

Veja mais alguns exemplos:

linear-gradient(to top right, green 50%, yellow)

linear-gradient(135deg, green, white, blue)

Repare que quando a primeira parada de cor começa em uma posição diferente de 0%, o gradi-
ente é preenchido com a cor da primeira parada de cor do 0% até essa posição.

Gradiente linear com repetição

Para definir um gradiente linear com repetição, devemos utilizar a função repeating-linear-gradient
que recebe exatamente os mesmos parâmetros da função linear-gradient.

A princípio o gradiente linear com repetição funcionará da mesma forma que o gradiente linear.
Seu comportamento só será alterado nas seguintes situações:

• Se a primeira parada de cor não começar em 0%.

www.facebook.com/k19treinamentos 245
CSS 246

• Se a última parada de cor não terminar em 100%.

Se uma ou as duas situações ocorrerem, o gradiente se repetirá para completar as regiões da linha
do gradiente sem cores definidas.

Veja alguns exemplos:

linear-gradient(to top left, green, yellow)

repeating-linear-gradient(to top left, green, yellow)

linear-gradient(to top left, green 50%, yellow)

repeating-linear-gradient(to top left, green 50%, yellow)

linear-gradient(to top left, green, yellow 50%)

repeating-linear-gradient(to top left, green, yellow 50%)

Gradiente radial
Para definir um gradiente radial, devemos utilizar a função radial-gradient.

Definição da forma, dimensão e posicão do gradiente

radial-gradient( [
[circle || <tamanho>] [at <posição>]?, |
[ellipse || [<tamanho> | <porcentagem>]{2}] [at <posição>]?, |
[[circle | ellipse] || <alcance> ] [at <posição>]?, |
at <posição>,
]?
<parada-de-cor>, [, <parada-de-cor>]+)

Lista de paradas de cores

246 www.k19.com.br
247 CSS
<tamanho> | <porcentagem> <posição>
Representa o tamanho do raio da forma do gradiente. Representa a posição do box do gradiente na qual a primeira
No caso da elipse, o tamanho pode ser dado através <parada-de-cor> será posicionada. Pode ser informada através
da porcentagem em relação ao tamanho do box do dos pares de lados left | right e/ou top | bottom, não importando
gradiente. a ordem em que aparecem. Também pode receber o valor
center, que é o padrão. A posição também pode ser informada
<parada-de-cor> através de coordenadas em relação ao canto superior esquerdo
Representa uma cor e a posição em que ela deve do box do gradiente.
aparecer sobre a linha do gradiente.
<alcance>
Representa a forma como o gradiente será distribuído dentro do
box do gradiente.

No exemplo abaixo, podemos entender melhor cada um dos parâmetros:

radial-gradient(50% 50% at center, green, white)

Forma do gradiente

Box do gradiente Linha do gradiente

Primeira parada de cor Última parada de cor

Gradiente radial com repetição

Para definir um gradiente radial com repetição, devemos utilizar a função repeating-radial-gradient
que recebe exatamente os mesmos parâmetros da função radial-gradient.

A princípio o gradiente radial com repetição funcionará da mesma forma que o gradiente radial.
Seu comportamento só será alterado nas seguintes situações:

• Se a primeira parada de cor não começar em 0%.

• Se a última parada de cor não terminar em 100%.

Se uma ou as duas situações ocorrerem, o gradiente se repetirá para completar as regiões da linha
do gradiente sem cores definidas.

Confira o exemplo:

radial-gradient(black 0%, white 25%)

www.facebook.com/k19treinamentos 247
CSS 248

repeating-radial-gradient(black 0%, white 25%)

Herança (Conteúdo Extra)

Herança em CSS é o mecanismo pelo qual os valores de algumas propriedades são passadas de
um elemento pai para um elemento filho. Os valores de algumas propriedades são herdados au-
tomaticamente enquanto outros não. Além disso, existem propriedades que não podem assumir o
valor proveniente da mesma propriedade do elemento pai.

Uma propriedade herda o valor do elemento pai quando atribuímos o valor inherit à ela.

Considere os seguintes códigos:

1 < div >

2 <p > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ p >
3 </ div >

1 div {
2 . red ,
color . .
3 }

No exemplo acima, a propriedade color foi definida apenas para o elemento div. No elemento p,
essa propriedade assumirá o valor padrão que é inherit, ou seja, será herdado automaticamente do
elemento pai. Como consequência a cor do texto do parágrafo 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
parágrafo não herdará o valor para a propriedade border, pois ela não possui o valor inherit como
padrão. Se quiséssemos que o elemento p herdasse o valor da propriedade border, deveríamos defi-
nir as seguintes regras CSS:

1 div {
2 border .
. 1 px solid red .
,
3 }
4
5 p {
6 . inherit ,.
border .
7 }

248 www.k19.com.br
249 CSS

box-sizing (Conteúdo Extra)

De acordo com o box model, devemos levar em consideração as margens internas, bordas e as
propriedades width e height de um elemento para determinarmos as suas dimensões. No começo,
isso pode não parecer muito natural, pois tendemos a imaginar a largura e altura final do elemento
como sendo as medidas atribuídas somente às propriedades width e height, respectivamente. Isso
acaba gerando uma grande confusão, principalmente para quem está começando a aprender CSS.

Através da propriedade box-sizing podemos decidir como as propriedades width e height se

comportarão. Confira na tabela abaixo os possíveis valores da propriedade:

content-box
Comportamento padrão. As propriedades width e height definem as dimensões da área do con-
teúdo do elemento.

padding-box
As propriedades width e height definem as dimensões da área do conteúdo do elemento em
conjunto com as margens internas.

border-box
As propriedades width e height definem as dimensões da área do conteúdo 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

Design Responsivo (Conteúdo Extra)

www.facebook.com/k19treinamentos 249
CSS 250

Durante muito tempo, os computadores tradicionais (desktops e laptops) foram os principais

dispositivos de acesso à Internet. Nos últimos anos, uma grande variedade de novos equipamentos
capazes de acessar a Internet foram introduzidos no mercado. Desses dispositivos podemos destacar
os smartphones e tablets (dispositivos móveis).

O número de usuários que acessam a Internet através de dispositivos móveis está cada vez maior
e só tende a crescer. Portanto, os desenvolvedores web devem ficar cada vez mais preocupados em
atender de maneira satisfatória o público mobile.

Atender o público mobile de maneira satisfatória significa apresentar o conteúdo de uma página
utilizando da melhor forma possível os recursos do dispositivo.

Por exemplo, uma página pode ter uma usabilidade muito boa quando acessada através de um
desktop. Porém, ao acessá-la através de um smartphone, as letras podem ficar muito pequenas, o
conteúdo pode não se encaixar no tamanho da tela ou as interações através do toque podem não
funcionar tão bem se comparadas às interações realizadas com o mouse.

Uma solução para esse problema seria a criação de uma versão do site para cada tipo de disposi-
tivo. Geralmente, a versão para desktop é a mais completa e as demais possuem recursos reduzidos.
Essa é uma solução adotada por diversos sites. Normalmente, as versões mobile são acessadas atra-
vés de URLs específicas. Em geral, essas URLs começam com mobile, mob ou até mesmo m (ex:
http..//m.kekanto.com). Entretanto, antes de adotar essa solução devemos levantar algumas ques-
tões:

Como fica a manutenção do site?

Muito mais trabalhosa. Basicamente, para cada tipo de dispositivo, teríamos um site diferente,
ou seja, teríamos que gerenciar dois ou mais sites ao invés de apenas um.

O que fazer com as URLs do site?

Para cada tipo de dispositivo uma URL diferente. Por exemplo, uma para mobile (http. .//mob.
dominio.com), outra para televisores (http..//tv.dominio.com) e outra para desktops (http..//www.
dominio.com). Além disso, deveríamos nos preocupar com o redirecionamento das URLs, pois seria
mais apropriado que um usuário acessando o endereço www.dominio.com através de sua televisão
fosse redirecionado para tv.dominio.com.

O usuário vai ficar insatisfeito se ele não puder fazer tudo que ele fazia no desktop?

Sim! Se a versão diferenciada for uma versão reduzida da versão desktop, ele ficará extremamente
decepcionado. Os usuários tendem a querer ter todo o poder do desktop nos smartphones e afins.

Para evitar esses e outros problemas, uma outra solução que está ganhando cada vez mais força
parte do princípio de que a página deve ser a mesma. O que deve mudar é a forma de apresentá-la
ao usuário. Essa é a ideia do Design Responsivo.

O design responsivo pode ser dividido em três partes principais: layouts flexíveis, media queries
e mídias flexíveis. A seguir iremos discutir sobre cada parte.

250 www.k19.com.br
251 CSS

Layouts Flexíveis
A ideia por trás dos layouts flexíveis é fazer com que os elementos de uma página sejam capazes
de terem as suas dimensões adaptadas dinamicamente. Isso é bem interessante quando queremos
que o layout da página se adapte a diferentes tamanhos de tela ou alguns elementos sejam redimen-
sionados após uma interação do usuário, por exemplo.

Quando criamos layouts estáticos, em geral, trabalhamos com unidades de medida estáticas
como px, pt, in, cm e etc. Ao criarmos layouts flexíveis passamos a trabalhar muito mais com as
unidades relativas como %, em, ex e etc. Fazemos isso para evitar que ocorram deformações ou
overflow na apresentação do conteúdo.

Para facilitar o trabalho de quem desenhará o layout de uma página e também de quem pro-
duzirá o código HTML e CSS, uma técnica muito comum é a de tentar visualizar a tela como um
sistema de grades. Nesse sistema, cada grade deve ter as suas dimensões definidas com unidades de
medida relativas. Dessa forma, se a tela do usuário for redimensionada, todo o sistema de grade será
reajustado.

Layout estático

Layout flexível

Media Queries
Como o objetivo do design responsivo é apresentar o conteúdo de uma página de maneiras dife-
rentes em dispositivos com tamanhos de telas diferentes, em algum momento sentiremos a necessi-
dade de criar regras CSS para cada tamanho de tela ou para cada conjunto de tamanho de telas. Em
uma situação como essa, as media queries se encaixam perfeitamente e devemos utilizá-las.

Breakpoints

O ponto principal da relação das media queries com o design responsivo é a definição 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 estratégia normalmente chamada de device-driven breakpoints, device-based
breakpoints ou pontos de quebra orientados à dispositivos. Evite essa técnica, pois, como o próprio
nome diz, ela faz com que as regras CSS sejam aplicadas quando uma página for aberta em dispositi-
vos com tamanhos de tela esperados, ou seja, a página poderá estar despreparada quando for aberta
por um dispositivo com tela de 400px, por exemplo.

Uma estratégia muito mais interessante é a que chamamos de content-driven breakpoints, content-
based breakpoints ou pontos de quebra orientados ao conteúdo. Nessa estratégia definimos os pon-
tos de quebra observando se o conteúdo da página se acomoda corretamente ao tamanho do view-
port. Uma técnica muito eficiente é começar do menor para o maior tamanho de viewport. Em geral,
o menor tamanho refere-se aos dispositivos mobile e, por isso, a técnica recebe o nome de mobile
first.

Aplicar a estratégia do content-drive breakpoints juntamente com a técnica mobile first é re-
lativamente 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 página e em
seguida redimensione a janela do navegador até que o conteúdo não seja apresentado corretamente
ou a página tenha o layout “quebrado”. Quando isso ocorrer significa que encontramos o próximo
breakpoint. Nesse breakpoint, aplique as regras CSS para que a página volte a ser apresentada corre-
tamente. Repita esse processo até considerar que tenha definido todos os breakpoints necessários.

Mídias Flexíveis
Para criarmos uma página que seja confortável para a leitura, devemos ajustar o posicionamento
e a dimensão dos elementos conforme vimos anteriormente. As imagens, players de vídeo e áudio
não são exceções. Entretanto, quando trabalhamos com certos tipos de mídias devemos ter alguns
cuidados especiais.

Suponha uma imagem de 320px de largura que gostaríamos de exibir em uma página de maneira
que ela se adapte à largura da tela. Conseguiríamos fazer isso utilizando a propriedade width: 100%,
por exemplo. Veja abaixo como ficaria essa página 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 poderíamos criar diversas versões da imagem, uma para

252 www.k19.com.br
253 CSS

cada breakpoint. Poderíamos também obter uma imagem original de tamanho maior, pois, em geral,
diminuir uma imagem perde menos qualidade do que esticar. Ou ainda, dependendo da imagem,
poderíamos utilizar uma versão vetorial da mesma. Como podemos observar, existem diversas téc-
nicas para resolver esse tipo de problema e, caso tenha interesse, procure por Icon Fonts, formato de
imagem SVG e Compressive Images. Esses são termos muito utilizados por técnicas de otimização
de imagens na web.

.
No caso dos players de vídeo e áudio recomendamos a leitura do artigo neste endereço: http.
//alistapart.com/article/creating-intrinsic-ratios-for-video

Exercícios Complementares

1 No projeto css, crie um arquivo chamado background-color.html.

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 - background - color </ title >
6 < link rel = " stylesheet " type = " text / css " href = " background - color . css " >
7 </ head >
8 < body >
9 < div id = " div1 " > </ div >
1 < div id = " div2 " > </ div >
11 < div id = " div3 " > </ div >
12 </ body >
13 </ html >

Código HTML 3.38: background-color.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar1.zip

2 No projeto css, crie um arquivo CSS chamado background-color.css.

1 div {
2 height .. 1 px ,.
3 . 4 px ,.
width .
4 }
5
6 # div1 {
7 background - color .
. red .
,
8 }
9
1 # div2 {
11 . # ff ,.
background - color .
12 }
13
14 # div3 {
15 background - color .
. rgb ( ,  , 255) .,
16 }

Código CSS 3.60: background-color.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar2.zip

www.facebook.com/k19treinamentos 253
CSS 254

3 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/background-color.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/background-color.html.

4 No projeto css, crie um arquivo chamado background-image.html.

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 - background - image </ title >
6 < link rel = " stylesheet " type = " text / css " href = " background - image . css " >
7 </ head >
8 < body >
9
1 </ body >
11 </ html >

Código HTML 3.39: background-image.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar4.zip

5 No projeto css, crie um arquivo CSS chamado background-image.css.

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 }

Código CSS 3.61: background-image.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar5.zip

6 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/background-image.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/background-image.html.

7 No projeto css, crie um arquivo chamado background-repeat.html.

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 - background - repeat </ title >
6 < link rel = " stylesheet " type = " text / css " href = " background - repeat . css " >
7 </ head >
8 < body >
9 < div id = " div1 " > </ div >

254 www.k19.com.br
255 CSS

1 < div id = " div2 " > </ div >

11 < div id = " div3 " > </ div >
12 < div id = " div4 " > </ div >
13 </ body >
14 </ html >

Código HTML 3.40: background-repeat.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar7.zip

8 No projeto css, crie um arquivo CSS chamado background-repeat.css.

1 div {
2 height .. 3 px ,.
3 width .
. 4 px ,.
4 border .. 1 px solid black ,.
5 margin .. 1 px ,.
6 }
7
8 # div1 {
9 . url ( " http .. // www . k19 . com . br / figs / planeta - small . png " ) .,
background - image .
1 }
11
12 # div2 {
13 background - image .
. url ( " http .. // www . k19 . com . br / figs / planeta - small . png " ) .,
14 background - repeat .. no - repeat . ,
15 }
16
17 # div3 {
18 background - image .
. url ( " http .. // www . k19 . com . br / figs / planeta - small . png " ) .,
19 background - repeat .. repeat - x .
,
2 }
21
22 # div4 {
23 . url ( " http .. // www . k19 . com . br / figs / planeta - small . png " ) .,
background - image .
24 background - repeat .. repeat - y .
,
25 }

Código CSS 3.62: background-repeat.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar8.zip

9 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/background-repeat.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/background-repeat.html.

10 No projeto css, crie um arquivo chamado background-attachment.html.

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 - background - attachment </ title >
6 < link rel = " stylesheet " type = " text / css " href = " background - attachment . css " >
7 </ head >
8 < body >
9

www.facebook.com/k19treinamentos 255
CSS 256

1 </ body >

11 </ html >

Código HTML 3.41: background-attachment.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar1.zip

11 No projeto css, crie um arquivo CSS chamado background-attachment.css.

1 body {
2 height .
. 2 px ,.
3 background - image .. url ( " http .. // www . k19 . com . br / figs / fundo . jpg " ) .,
4 }

Código CSS 3.63: background-attachment.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar11.zip

12 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/background-attachment.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/background-attachment.html.

Observe o comportamento da imagem de background quando você movimenta a barra de ro-

lagem.

13 No projeto css, altere o arquivo CSS background-attachment.css.

1 body {
2 . 2 px ,.
height .
3 background - image .. url ( " http .. // www . k19 . com . br / figs / fundo . jpg " ) .,
4 background - attachment . . fixed . ,
5 }

Código CSS 3.64: background-attachment.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar13.zip

14 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/background-attachment.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/background-attachment.html.

Observe o comportamento da imagem de background quando você movimenta a barra de ro-

lagem.

15 No projeto css, crie um arquivo chamado background-position.html.

256 www.k19.com.br
257 CSS

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 - background - position </ title >
6 < link rel = " stylesheet " type = " text / css " href = " background - position . css " >
7 </ head >
8 < body >
9
1 </ body >
11 </ html >

Código HTML 3.42: background-position.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar15.zip

16 No projeto css, crie um arquivo CSS chamado background-position.css.

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 }

Código CSS 3.65: background-position.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar16.zip

17 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/background-position.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/background-position.html.

18 No projeto css, crie um arquivo chamado background-clip.html.

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 - background - clip </ title >
6 < link rel = " stylesheet " type = " text / css " href = " background - clip . css " >
7 </ head >
8 < body >
9 < div id = " div1 " > </ div >
1 < div id = " div2 " > </ div >
11 < div id = " div3 " > </ div >
12 </ body >
13 </ html >

Código HTML 3.43: background-clip.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar18.zip

19 No projeto css, crie um arquivo CSS chamado background-clip.css.

www.facebook.com/k19treinamentos 257
CSS 258

1 div {
2 . 4 px ,.
width .
3 height .. 5 px ,.
4 margin .. 1 px ,.
5 padding .. 5 px ,.
6 border .. 1 px dotted black .,
7 background - color .. yellow ,.
8 }
9
1 # div1 {
11 background - clip .
. border - box .
,
12 }
13
14 # div2 {
15 background - clip .
. padding - box .
,
16 }
17
18 # div3 {
19 background - clip .
. content - box .
,
2 }

Código CSS 3.66: background-clip.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar19.zip

20 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/background-clip.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/background-clip.html.

21 No projeto css, crie um arquivo chamado background-origin.html.

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 - background - origin </ title >
6 < link rel = " stylesheet " type = " text / css " href = " background - origin . css " >
7 </ head >
8 < body >
9 < div id = " div1 " > </ div >
1 < div id = " div2 " > </ div >
11 < div id = " div3 " > </ div >
12 </ body >
13 </ html >

Código HTML 3.44: background-origin.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar21.zip

22 No projeto css, crie um arquivo CSS chamado background-origin.css.

1 div {
2 width .
. 4 px ,.
3 height .. 1 px ,.
4 margin .. 1 px ,.
5 padding .. 25 px ,.

258 www.k19.com.br
259 CSS

6 border .
. 1 px dotted black .,
7 background - repeat .. no - repeat . ,
8 background - image .
. url ( " http .. // www . k19 . com . br / figs / planeta - small . png " ) .,
9 }
1
11 # div1 {
12 . border - box ,
background - origin . .
13 }
14
15 # div2 {
16 background - origin .
. padding - box .
,
17 }
18
19 # div3 {
2 . content - box ,
background - origin . .
21 }

Código CSS 3.67: background-origin.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar22.zip

23 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/background-origin.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/background-origin.html.

24 No projeto css, crie um arquivo chamado background-size.html.

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 - background - size </ title >
6 < link rel = " stylesheet " type = " text / css " href = " background - size . css " >
7 </ head >
8 < body >
9 < div id = " div1 " > </ div >
1 < div id = " div2 " > </ div >
11 < div id = " div3 " > </ div >
12 </ body >
13 </ html >

Código HTML 3.45: background-size.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar24.zip

25 No projeto css, crie um arquivo CSS chamado background-size.css.

1 div {
2 . 4 px ,.
width .
3 height .. 1 px ,.
4 margin .. 1 px ,.
5 padding .. 25 px ,.
6 border .. 1 px dotted black .,
7 background - repeat .. no - repeat . ,
8 background - image .. url ( " http .. // www . k19 . com . br / figs / planeta - small . png " ) .,
9 }
1

www.facebook.com/k19treinamentos 259
CSS 260

11 # div1 {
12 background - size .
. 5 px auto .
,
13 }
14
15 # div2 {
16 background - size .
. cover ,.
17 }
18
19 # div3 {
2 background - size .
. contain .
,
21 }

Código CSS 3.68: background-size.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar25.zip

26 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/background-size.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/background-size.html.

27 No projeto css, crie um arquivo chamado color.html.

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 - color </ title >
6 < link rel = " stylesheet " type = " text / css " href = " color . css " >
7 </ head >
8 < body >
9 <p id = " p1 " > K19 Treinamentos </ p >
1 <p id = " p2 " > K19 Treinamentos </ p >
11 <p id = " p3 " > K19 Treinamentos </ p >
12 </ body >
13 </ html >

Código HTML 3.46: color.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar27.zip

28 No projeto css, crie um arquivo CSS chamado color.css.

1 # p1 {
2 color .
. red .
,
3 }
4
5 # p2 {
6 . # ff ,.
color .
7 }
8
9 # p3 {
1 color .
. rgb ( ,  , 255) .,
11 }

Código CSS 3.69: color.css

260 www.k19.com.br
261 CSS

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar28.zip

29 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/color.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/color.html.

30 No projeto css, crie um arquivo chamado text-align.html.

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 - text - align </ title >
6 < link rel = " stylesheet " type = " text / css " href = " text - align . css " >
7 </ head >
8 < body >
9 <p id = " p1 " >
1 Lorem ipsum dolor sit amet , consectetur adipiscing elit . In
11 mollis , nibh et tempor sollicitudin , orci lorem iaculis sem ,
12 sit amet sodales quam massa sit amet risus . Fusce malesuada
13 eleifend massa , ac mollis mi fermentum vitae . Nullam consequat
14 leo nunc , in ornare turpis aliquam quis .
15 </ p >
16 <p id = " p2 " >
17 Lorem ipsum dolor sit amet , consectetur adipiscing elit . In
18 mollis , nibh et tempor sollicitudin , orci lorem iaculis sem ,
19 sit amet sodales quam massa sit amet risus . Fusce malesuada
2 eleifend massa , ac mollis mi fermentum vitae . Nullam consequat
21 leo nunc , in ornare turpis aliquam quis .
22 </ p >
23 <p id = " p3 " >
24 Lorem ipsum dolor sit amet , consectetur adipiscing elit . In
25 mollis , nibh et tempor sollicitudin , orci lorem iaculis sem ,
26 sit amet sodales quam massa sit amet risus . Fusce malesuada
27 eleifend massa , ac mollis mi fermentum vitae . Nullam consequat
28 leo nunc , in ornare turpis aliquam quis .
29 </ p >
3 <p id = " p4 " >
31 Lorem ipsum dolor sit amet , consectetur adipiscing elit . In
32 mollis , nibh et tempor sollicitudin , orci lorem iaculis sem ,
33 sit amet sodales quam massa sit amet risus . Fusce malesuada
34 eleifend massa , ac mollis mi fermentum vitae . Nullam consequat
35 leo nunc , in ornare turpis aliquam quis .
36 </ p >
37 </ body >
38 </ html >

Código HTML 3.47: text-align.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar3.zip

31 No projeto css, crie um arquivo CSS chamado text-align.css.

1 p {
2 border .. 1 px solid black ,.
3 width .
. 4 px ,.
4 }

www.facebook.com/k19treinamentos 261
CSS 262

5
6 # p1 {
7 text - align .
. left .
,
8 }
9
1 # p2 {
11 . center ,
text - align . .
12 }
13
14 # p3 {
15 text - align .
. right .
,
16 }
17
18 # p4 {
19 . justify ,.
text - align .
2 }

Código CSS 3.70: text-align.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar31.zip

32 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/text-align.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/text-align.html.

33 No projeto css, crie um arquivo chamado text-decoration.html.

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 - text - decoration </ title >
6 < link rel = " stylesheet " type = " text / css " href = " text - decoration . css " >
7 </ head >
8 < body >
9 <p id = " p1 " >
1 Lorem ipsum dolor sit amet , consectetur adipiscing elit . In
11 mollis , nibh et tempor sollicitudin , orci lorem iaculis sem ,
12 sit amet sodales quam massa sit amet risus . Fusce malesuada
13 eleifend massa , ac mollis mi fermentum vitae . Nullam consequat
14 leo nunc , in ornare turpis aliquam quis .
15 </ p >
16 <p id = " p2 " >
17 Lorem ipsum dolor sit amet , consectetur adipiscing elit . In
18 mollis , nibh et tempor sollicitudin , orci lorem iaculis sem ,
19 sit amet sodales quam massa sit amet risus . Fusce malesuada
2 eleifend massa , ac mollis mi fermentum vitae . Nullam consequat
21 leo nunc , in ornare turpis aliquam quis .
22 </ p >
23 <p id = " p3 " >
24 Lorem ipsum dolor sit amet , consectetur adipiscing elit . In
25 mollis , nibh et tempor sollicitudin , orci lorem iaculis sem ,
26 sit amet sodales quam massa sit amet risus . Fusce malesuada
27 eleifend massa , ac mollis mi fermentum vitae . Nullam consequat
28 leo nunc , in ornare turpis aliquam quis .
29 </ p >
3 </ body >
31 </ html >

Código HTML 3.48: text-decoration.html

262 www.k19.com.br
263 CSS

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar33.zip

34 No projeto css, crie um arquivo CSS chamado text-decoration.css.

1 p {
2 width .
. 4 px ,.
3 }
4
5 # p1 {
6 text - decoration .
. underline .,
7 }
8
9 # p2 {
1 . overline .,
text - decoration .
11 }
12
13 # p3 {
14 text - decoration .
. line - through ,.
15 }

Código CSS 3.71: text-decoration.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar34.zip

35 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/text-decoration.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/text-decoration.html.

36 No projeto css, crie um arquivo chamado text-transform.html.

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 - text - transform </ title >
6 < link rel = " stylesheet " type = " text / css " href = " text - transform . css " >
7 </ head >
8 < body >
9 <p id = " p1 " >
1 Lorem ipsum dolor sit amet , consectetur adipiscing elit . In
11 mollis , nibh et tempor sollicitudin , orci lorem iaculis sem ,
12 sit amet sodales quam massa sit amet risus . Fusce malesuada
13 eleifend massa , ac mollis mi fermentum vitae . Nullam consequat
14 leo nunc , in ornare turpis aliquam quis .
15 </ p >
16 <p id = " p2 " >
17 Lorem ipsum dolor sit amet , consectetur adipiscing elit . In
18 mollis , nibh et tempor sollicitudin , orci lorem iaculis sem ,
19 sit amet sodales quam massa sit amet risus . Fusce malesuada
2 eleifend massa , ac mollis mi fermentum vitae . Nullam consequat
21 leo nunc , in ornare turpis aliquam quis .
22 </ p >
23 <p id = " p3 " >
24 Lorem ipsum dolor sit amet , consectetur adipiscing elit . In
25 mollis , nibh et tempor sollicitudin , orci lorem iaculis sem ,
26 sit amet sodales quam massa sit amet risus . Fusce malesuada
27 eleifend massa , ac mollis mi fermentum vitae . Nullam consequat

www.facebook.com/k19treinamentos 263
CSS 264

28 leo nunc , in ornare turpis aliquam quis .

29 </ p >
3 </ body >
31 </ html >

Código HTML 3.49: text-transform.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar36.zip

37 No projeto css, crie um arquivo CSS chamado text-transform.css.

1 p {
2 . 4 px ,.
width .
3 }
4
5 # p1 {
6 text - transform .
. capitalize .,
7 }
8
9 # p2 {
1 . uppercase ,
text - transform . .
11 }
12
13 # p3 {
14 text - transform .
. lowercase .,
15 }

Código CSS 3.72: text-transform.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar37.zip

38 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/text-transform.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/text-transform.html.

39 No projeto css, crie um arquivo chamado text-indent.html.

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 - text - indent </ title >
6 < link rel = " stylesheet " type = " text / css " href = " text - indent . css " >
7 </ head >
8 < body >
9 <p id = " p1 " >
1 Lorem ipsum dolor sit amet , consectetur adipiscing elit . In
11 mollis , nibh et tempor sollicitudin , orci lorem iaculis sem ,
12 sit amet sodales quam massa sit amet risus . Fusce malesuada
13 eleifend massa , ac mollis mi fermentum vitae . Nullam consequat
14 leo nunc , in ornare turpis aliquam quis .
15 </ p >
16 <p id = " p2 " >
17 Lorem ipsum dolor sit amet , consectetur adipiscing elit . In
18 mollis , nibh et tempor sollicitudin , orci lorem iaculis sem ,
19 sit amet sodales quam massa sit amet risus . Fusce malesuada
2 eleifend massa , ac mollis mi fermentum vitae . Nullam consequat

264 www.k19.com.br
265 CSS

21 leo nunc , in ornare turpis aliquam quis .

22 </ p >
23 </ body >
24 </ html >

Código HTML 3.50: text-indent.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar39.zip

40 No projeto css, crie um arquivo CSS chamado text-indent.css.

1 p {
2 . 4 px ,.
width .
3 }
4
5 # p1 {
6 text - indent .
.  px .,
7 }
8
9 # p2 {
1 . 3 px ,.
text - indent .
11 }

Código CSS 3.73: text-indent.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar4.zip

41 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/text-indent.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/text-indent.html.

42 No projeto css, crie um arquivo chamado letter-spacing.html.

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 - letter - spacing </ title >
6 < link rel = " stylesheet " type = " text / css " href = " letter - spacing . css " >
7 </ head >
8 < body >
9 <p id = " p1 " >
1 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 .
2 </ p >
21 </ body >
22 </ html >

Código HTML 3.51: letter-spacing.html

www.facebook.com/k19treinamentos 265
CSS 266

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar42.zip

43 No projeto css, crie um arquivo CSS chamado letter-spacing.css.

1 # p1 {
2 letter - spacing .
. 2 px .,
3 }
4
5 # p2 {
6 letter - spacing .
. -2 px ,.
7 }
8
9 # p3 {
1 . 4 px .,
letter - spacing .
11 }
12
13 # p4 {
14 letter - spacing .
. 6 px .,
15 }

Código CSS 3.74: letter-spacing.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar43.zip

44 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/letter-spacing.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/letter-spacing.html.

45 No projeto css, crie um arquivo chamado word-spacing.html.

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 - word - spacing </ title >
6 < link rel = " stylesheet " type = " text / css " href = " word - spacing . css " >
7 </ head >
8 < body >
9 <p id = " p1 " >
1 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 .
2 </ p >
21 </ body >
22 </ html >

Código HTML 3.52: word-spacing.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar45.zip

266 www.k19.com.br
267 CSS

46 No projeto css, crie um arquivo CSS chamado word-spacing.css.

1 # p1 {
2 . 1 px ,.
word - spacing .
3 }
4
5 # p2 {
6 word - spacing .
. -5 px ,.
7 }
8
9 # p3 {
1 . 3 px ,.
word - spacing .
11 }
12
13 # p4 {
14 word - spacing .
. 5 px ,.
15 }

Código CSS 3.75: word-spacing.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar46.zip

47 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/word-spacing.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/word-spacing.html.

48 No projeto css, crie um arquivo chamado word-wrap.html.

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 - word - wrap </ title >
6 < link rel = " stylesheet " type = " text / css " href = " word - wrap . css " >
7 </ head >
8 < body >
9 <p id = " p1 " >
1 Otorrinolaringologista .
11 </ p >
12 <p >
13 Otorrinolaringologista .
14 </ p >
15 </ body >
16 </ html >

Código HTML 3.53: word-wrap.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar48.zip

49 No projeto css, crie um arquivo CSS chamado word-wrap.css.

1 p {
2 width .
. 1 px ,.
3 border .. 1 px solid black ,.
4 }
5

www.facebook.com/k19treinamentos 267
CSS 268

6 # p1 {
7 word - wrap .
. break - word .
,
8 }

Código CSS 3.76: word-wrap.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar49.zip

50 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/word-wrap.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/word-wrap.html.

51 No projeto css, crie um arquivo chamado line-height.html.

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 - line - height </ title >
6 < link rel = " stylesheet " type = " text / css " href = " line - height . css " >
7 </ head >
8 < body >
9 <p id = " p1 " >
1 Lorem ipsum dolor sit amet , consectetur adipiscing elit . In
11 mollis , nibh et tempor sollicitudin , orci lorem iaculis sem ,
12 sit amet sodales quam massa sit amet risus . Fusce malesuada
13 eleifend massa , ac mollis mi fermentum vitae . Nullam consequat
14 leo nunc , in ornare turpis aliquam quis .
15 </ p >
16 <p id = " p2 " >
17 Lorem ipsum dolor sit amet , consectetur adipiscing elit . In
18 mollis , nibh et tempor sollicitudin , orci lorem iaculis sem ,
19 sit amet sodales quam massa sit amet risus . Fusce malesuada
2 eleifend massa , ac mollis mi fermentum vitae . Nullam consequat
21 leo nunc , in ornare turpis aliquam quis .
22 </ p >
23 </ body >
24 </ html >

Código HTML 3.54: line-height.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar51.zip

52 No projeto css, crie um arquivo CSS chamado line-height.css.

1 p {
2 width .
. 4 px ,.
3 border .. 1 px solid black ,.
4 }
5
6 # p1 {
7 . 2 px ,.
line - height .
8 }
9
1 # p2 {
11 line - height .
. 4 px ,.
12 }

268 www.k19.com.br
269 CSS

Código CSS 3.77: line-height.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar52.zip

53 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/line-height.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/line-height.html.

54 No projeto css, crie um arquivo chamado white-space.html.

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 - white - space </ title >
6 < link rel = " stylesheet " type = " text / css " href = " white - space . css " >
7 </ head >
8 < body >
9 <p id = " p1 " >
1 Lorem
11 ipsum dolor sit amet , consectetur adipiscing elit . Cras vehicula
12 bibendum arcu .
13
14 Sed
15 dui nulla , cursus et lacinia eu , vulputate ac dolor .
16 Quisque faucibus congue congue .
17 </ p >
18 <p id = " p2 " >
19 Lorem
2 ipsum dolor sit amet , consectetur adipiscing elit . Cras vehicula
21 bibendum arcu .
22
23 Sed
24 dui nulla , cursus et lacinia eu , vulputate ac dolor .
25 Quisque faucibus congue congue .
26 </ p >
27 <p id = " p3 " >
28 Lorem
29 ipsum dolor sit amet , consectetur adipiscing elit . Cras vehicula
3 bibendum arcu .
31
32 Sed
33 dui nulla , cursus et lacinia eu , vulputate ac dolor .
34 Quisque faucibus congue congue .
35 </ p >
36 <p id = " p4 " >
37 Lorem
38 ipsum dolor sit amet , consectetur adipiscing elit . Cras vehicula
39 bibendum arcu .
4
41 Sed
42 dui nulla , cursus et lacinia eu , vulputate ac dolor .
43 Quisque faucibus congue congue .
44 </ p >
45 <p id = " p5 " >
46 Lorem
47 ipsum dolor sit amet , consectetur adipiscing elit . Cras vehicula
48 bibendum arcu .

www.facebook.com/k19treinamentos 269
CSS 270

49
5 Sed
51 dui nulla , cursus et lacinia eu , vulputate ac dolor .
52 Quisque faucibus congue congue .
53 </ p >
54 </ body >
55 </ html >

Código HTML 3.55: white-space.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar54.zip

55 No projeto css, crie um arquivo CSS chamado white-space.css.

1 p {
2 . 4 px ,.
width .
3 border .. 1 px solid black ,.
4 }
5
6 # p1 {
7 . nowrap ,.
white - space .
8 }
9
1 # p2 {
11 white - space .
. pre .
,
12 }
13
14 # p3 {
15 . pre - line ,
white - space . .
16 }
17
18 # p4 {
19 white - space .
. pre - wrap .
,
2 }

Código CSS 3.78: white-space.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar55.zip

56 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/white-space.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/white-space.html.

57 No projeto css, crie um arquivo chamado text-shadow.html.

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 - text - shadow </ title >
6 < link rel = " stylesheet " type = " text / css " href = " text - shadow . css " >
7 </ head >
8 < body >
9 <p id = " p1 " >
1 Lorem ipsum dolor sit amet , consectetur adipiscing elit .
11 </ p >
12 <p id = " p2 " >

270 www.k19.com.br
271 CSS

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 .
2 </ p >
21 <p id = " p5 " >
22 Lorem ipsum dolor sit amet , consectetur adipiscing elit .
23 </ p >
24 </ body >
25 </ html >

Código HTML 3.56: text-shadow.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar57.zip

58 No projeto css, crie um arquivo CSS chamado text-shadow.css.

1 p {
2 font - size .
. xx - large ,.
3 }
4
5 # p1 {
6 text - shadow .
. 3 px 3 px # ff ,.
7 }
8
9 # p2 {
1 text - shadow .
. -3 px -3 px # ff .,
11 }
12
13 # p3 {
14 text - shadow .
.   1 px # ff ,.
15 }
16
17 # p4 {
18 . 1 px 1 px 1 px # ff ,.
text - shadow .
19 }
2
21 # p5 {
22 text - shadow .
. 5 px 5 px 5 px # ff , -5 px -5 px 5 px # ff .
,
23 }

Código CSS 3.79: text-shadow.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar58.zip

59 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/text-shadow.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/text-shadow.html.

60 No projeto css, crie um arquivo chamado font-family.html.

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >

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 " >
1 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 .
2 </ p >
21 <p id = " p5 " >
22 Lorem ipsum dolor sit amet , consectetur adipiscing elit .
23 </ p >
24 </ body >
25 </ html >

Código HTML 3.57: font-family.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar6.zip

61 No projeto css, crie um arquivo CSS chamado font-family.css.

1 p {
2 font - size .
. xx - large ,.
3 }
4
5 # p1 {
6 . " Arial " ,
font - family . .
7 }
8
9 # p2 {
1 font - family .
. " Courier " .
,
11 }
12
13 # p3 {
14 . " Verdana " ,
font - family . .
15 }
16
17 # p4 {
18 font - family .
. " serif " .
,
19 }
2
21 # p5 {
22 . " cursive " ,
font - family . .
23 }

Código CSS 3.80: font-family.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar61.zip

62 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/font-family.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

272 www.k19.com.br
273 CSS

http..//localhost/~<USUARIO>/css/public_html/font-family.html.

63 No projeto css, crie um arquivo chamado font-size.html.

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 - font - size </ title >
6 < link rel = " stylesheet " type = " text / css " href = " font - size . css " >
7 </ head >
8 < body >
9 <p id = " p1 " >
1 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 .
2 </ p >
21 <p id = " p5 " >
22 Lorem ipsum dolor sit amet , consectetur adipiscing elit .
23 </ p >
24 </ body >
25 </ html >

Código HTML 3.58: font-size.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar63.zip

64 No projeto css, crie um arquivo CSS chamado font-size.css.

1 # p1 {
2 . x - small ,.
font - size .
3 }
4
5 # p2 {
6 font - size .
. x - large ,.
7 }
8
9 # p3 {
1 . xx - large ,.
font - size .
11 }
12
13 # p4 {
14 font - size .
. 18 px ,.
15 }
16
17 # p5 {
18 . 3 px ,.
font - size .
19 }

Código CSS 3.81: font-size.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar64.zip

65 No Windows, utilize o Chrome para acessar o endereço:

www.facebook.com/k19treinamentos 273
CSS 274

http..//localhost/css/public_html/font-size.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/font-size.html.

66 No projeto css, crie um arquivo chamado font-style.html.

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 - font - style </ title >
6 < link rel = " stylesheet " type = " text / css " href = " font - style . css " >
7 </ head >
8 < body >
9 <p id = " p1 " >
1 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 </ body >
19 </ html >

Código HTML 3.59: font-style.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar66.zip

67 No projeto css, crie um arquivo CSS chamado font-style.css.

1 p {
2 font - size .
. xx - large ,.
3 }
4
5 # p1 {
6 font - style .
. italic ,.
7 }
8
9 # p2 {
1 font - style .
. oblique ,.
11 }

Código CSS 3.82: font-style.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar67.zip

68 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/font-style.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/font-style.html.

274 www.k19.com.br
275 CSS

69 No projeto css, crie um arquivo chamado font-variant.html.

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 - font - variant </ title >
6 < link rel = " stylesheet " type = " text / css " href = " font - variant . css " >
7 </ head >
8 < body >
9 <p id = " p1 " >
1 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 </ body >
16 </ html >

Código HTML 3.60: font-variant.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar69.zip

70 No projeto css, crie um arquivo CSS chamado font-variant.css.

1 p {
2 . xx - large ,.
font - size .
3 }
4
5 # p1 {
6 font - variant .. small - caps .,
7 }

Código CSS 3.83: font-variant.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar7.zip

71 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/font-variant.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/font-variant.html.

72 No projeto css, crie um arquivo chamado font-weight.html.

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 - font - weight </ title >
6 < link rel = " stylesheet " type = " text / css " href = " font - weight . css " >
7 </ head >
8 < body >
9 <p id = " p1 " >
1 Lorem ipsum dolor sit amet , consectetur adipiscing elit .
11 </ p >
12 <p id = " p2 " >
13 Lorem ipsum dolor sit amet , consectetur adipiscing elit .

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 >

Código HTML 3.61: font-weight.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar72.zip

73 No projeto css, crie um arquivo CSS chamado font-weight.css.

1 p {
2 font - size .
. xx - large ,.
3 }
4
5 # p1 {
6 font - weight .
. 4,.
7 }
8
9 # p2 {
1 font - weight .
. 7,.
11 }
12
13 # p3 {
14 . bold ,.
font - weight .
15 }

Código CSS 3.84: font-weight.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar73.zip

74 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/font-weight.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/font-weight.html.

75 No projeto css, crie um arquivo chamado font-face.html.

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 - font - face </ title >
6 < link rel = " stylesheet " type = " text / css " href = " font - face . css " >
7 < link rel = " stylesheet " type = " text / css "
8 href = " http .. // fonts . googleapis . com / css ? family = Norican " >
9 < link rel = " stylesheet " type = " text / css "
1 href = " http .. // fonts . googleapis . com / css ? family = Bad + Script " >
11 < link rel = " stylesheet " type = " text / css "
12 href = " http .. // fonts . googleapis . com / css ? family = Ceviche + One " >
13 </ head >
14 < body >
15 <p id = " p1 " >
16 Lorem ipsum dolor sit amet , consectetur adipiscing elit .
17 </ p >
18 <p id = " p2 " >

276 www.k19.com.br
277 CSS

19 Lorem ipsum dolor sit amet , consectetur adipiscing elit .

2 </ p >
21 <p id = " p3 " >
22 Lorem ipsum dolor sit amet , consectetur adipiscing elit .
23 </ p >
24 </ body >
25 </ html >

Código HTML 3.62: font-face.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar75.zip

76 No projeto css, crie um arquivo CSS chamado font-face.css.

1 p {
2 . xx - large ,.
font - size .
3 }
4
5 # p1 {
6 font - family .
. " Norican " .
,
7 }
8
9 # p2 {
1 . " Bad Script " ,
font - family . .
11 }
12
13 # p3 {
14 font - family .
. " Ceviche One " .
,
15 }

Código CSS 3.85: font-face.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar76.zip

77 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/font-face.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/font-face.html.

78 No projeto css, crie um arquivo chamado list-style-type.html.

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 - list - style - type </ title >
6 < link rel = " stylesheet " type = " text / css " href = " list - style - type . css " >
7 </ head >
8 < body >
9 < ul id = " ul1 " >
1 < li > K1 - Lo  gica de Programaça o </ li >
11 < li > K2 - Desenvolvimento Web com HTML , CSS e JavaScript </ li >
12 < li > K3 - Modelo Relacional e SQL </ li >
13 </ ul >
14 < ul id = " ul2 " >
15 < li > K1 - Lo  gica de Programaça o </ li >
16 < li > K2 - Desenvolvimento Web com HTML , CSS e JavaScript </ li >
17 < li > K3 - Modelo Relacional e SQL </ li >

www.facebook.com/k19treinamentos 277
CSS 278

18 </ ul >
19 < ul id = " ul3 " >
2 < li > K1 - Lo  gica de Programaça o </ li >
21 < li > K2 - Desenvolvimento Web com HTML , CSS e JavaScript </ li >
22 < li > K3 - Modelo Relacional e SQL </ li >
23 </ ul >
24 < ol id = " ol1 " >
25 < li > K1 - Lo  gica de Programaça o </ li >
26 < li > K2 - Desenvolvimento Web com HTML , CSS e JavaScript </ li >
27 < li > K3 - Modelo Relacional e SQL </ li >
28 </ ol >
29 < ol id = " ol2 " >
3 < li > K1 - Lo  gica de Programaça o </ li >
31 < li > K2 - Desenvolvimento Web com HTML , CSS e JavaScript </ li >
32 < li > K3 - Modelo Relacional e SQL </ li >
33 </ ol >
34 < ol id = " ol3 " >
35 < li > K1 - Lo  gica de Programaça o </ li >
36 < li > K2 - Desenvolvimento Web com HTML , CSS e JavaScript </ li >
37 < li > K3 - Modelo Relacional e SQL </ li >
38 </ ol >
39 </ body >
4 </ html >

Código HTML 3.63: list-style-type.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar78.zip

79 No projeto css, crie um arquivo CSS chamado list-style-type.css.

1 # ul1 {
2 list - style - type .
. disc ,.
3 }
4
5 # ul2 {
6 list - style - type .
. circle ,.
7 }
8
9 # ul3 {
1 list - style - type .
. square ,.
11 }
12
13 # ol1 {
14 . decimal ,.
list - style - type .
15 }
16
17 # ol2 {
18 list - style - type .
. lower - latin .,
19 }
2
21 # ol3 {
22 . georgian .,
list - style - type .
23 }

Código CSS 3.86: list-style-type.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar79.zip

80 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/list-style-type.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

278 www.k19.com.br
279 CSS

http..//localhost/~<USUARIO>/css/public_html/list-style-type.html.

81 No projeto css, crie um arquivo chamado list-style-image.html.

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 - list - style - image </ title >
6 < link rel = " stylesheet " type = " text / css " href = " list - style - image . css " >
7 </ head >
8 < body >
9 < ul id = " ul1 " >
1 < li > K1 - Lo  gica de Programaça o </ li >
11 < li > K2 - Desenvolvimento Web com HTML , CSS e JavaScript </ li >
12 < li > K3 - Modelo Relacional e SQL </ li >
13 </ ul >
14 < ul id = " ul2 " >
15 < li > K1 - Lo  gica de Programaça o </ li >
16 < li > K2 - Desenvolvimento Web com HTML , CSS e JavaScript </ li >
17 < li > K3 - Modelo Relacional e SQL </ li >
18 </ ul >
19 < ul id = " ul3 " >
2 < li > K1 - Lo  gica de Programaça o </ li >
21 < li > K2 - Desenvolvimento Web com HTML , CSS e JavaScript </ li >
22 < li > K3 - Modelo Relacional e SQL </ li >
23 </ ul >
24 </ body >
25 </ html >

Código HTML 3.64: list-style-image.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar81.zip

82 No projeto css, crie um arquivo CSS chamado list-style-image.css.

1 # ul1 {
2 list - style - image .
. url ( " http .. // www . k19 . com . br / figs / star . png " ) .,
3 }
4
5 # ul2 {
6 . url ( " http .. // www . k19 . com . br / figs / cake . png " ) .,
list - style - image .
7 }
8
9 # ul3 {
1 list - style - image .
. url ( " http .. // www . k19 . com . br / figs / flying_heart . png " ) .,
11 }

Código CSS 3.87: list-style-image.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar82.zip

83 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/list-style-image.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/list-style-image.html.

www.facebook.com/k19treinamentos 279
CSS 280

84 No projeto css, crie um arquivo chamado list-style-position.html.

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 - list - style - position </ title >
6 < link rel = " stylesheet " type = " text / css " href = " list - style - position . css " >
7 </ head >
8 < body >
9 < ul id = " ul1 " >
1 < li > K1 - Lo  gica de Programaça o </ li >
11 < li > K2 - Desenvolvimento Web com HTML , CSS e JavaScript </ li >
12 < li > K3 - Modelo Relacional e SQL </ li >
13 </ ul >
14 < ul id = " ul2 " >
15 < li > K1 - Lo  gica de Programaça o </ li >
16 < li > K2 - Desenvolvimento Web com HTML , CSS e JavaScript </ li >
17 < li > K3 - Modelo Relacional e SQL </ li >
18 </ ul >
19 </ body >
2 </ html >

Código HTML 3.65: list-style-position.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar84.zip

85 No projeto css, crie um arquivo CSS chamado list-style-position.css.

1 li {
2 border .
. 1 px solid black ,.
3 }
4
5 # ul1 {
6 list - style - position .
. inside ,.
7 }

Código CSS 3.88: list-style-position.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar85.zip

86 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/list-style-position.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/list-style-position.html.

87 No projeto css, crie um arquivo chamado border-style.html.

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 - border - style </ title >
6 < link rel = " stylesheet " type = " text / css " href = " border - style . css " >
7 </ head >
8 < body >
9 < div id = " div1 " > </ div >

280 www.k19.com.br
281 CSS

1 < div id = " div2 " > </ div >

11 < div id = " div3 " > </ div >
12 < div id = " div4 " > </ div >
13 </ body >
14 </ html >

Código HTML 3.66: border-style.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar87.zip

88 No projeto css, crie um arquivo CSS chamado border-style.css.

1 div {
2 width .
. 4 px ,.
3 height .. 2 px ,.
4 margin .. 1 px ,.
5 border - width . . 6 px .,
6 }
7
8 # div1 {
9 . dotted ,.
border - style .
1 }
11
12 # div2 {
13 border - style .
. dashed .
,
14 }
15
16 # div3 {
17 . solid ,
border - style . .
18 }
19
2 # div4 {
21 border - style .
. double ,.
22 }

Código CSS 3.89: border-style.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar88.zip

89 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/border-style.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/border-style.html.

90 No projeto css, crie um arquivo chamado border-width.html.

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 - border - width </ title >
6 < link rel = " stylesheet " type = " text / css " href = " border - width . css " >
7 </ head >
8 < body >
9 < div id = " div1 " > </ div >
1 < div id = " div2 " > </ div >
11 < div id = " div3 " > </ div >
12 < div id = " div4 " > </ div >

www.facebook.com/k19treinamentos 281
CSS 282

13 </ body >

14 </ html >

Código HTML 3.67: border-width.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar9.zip

91 No projeto css, crie um arquivo CSS chamado border-width.css.

1 div {
2 width .
. 4 px ,.
3 height .. 2 px ,.
4 margin .. 1 px ,.
5 border - style . . solid .
,
6 }
7
8 # div1 {
9 . thin ,.
border - width .
1 }
11
12 # div2 {
13 border - width .
. thick ,.
14 }
15
16 # div3 {
17 border - width .
. 2 px .,
18 }
19
2 # div4 {
21 border - width .
. 1 px ,.
22 }

Código CSS 3.90: border-width.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar91.zip

92 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/border-width.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/border-width.html.

93 No projeto css, crie um arquivo chamado border-color.html.

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 - border - color </ title >
6 < link rel = " stylesheet " type = " text / css " href = " border - color . css " >
7 </ head >
8 < body >
9 < div id = " div1 " > </ div >
1 < div id = " div2 " > </ div >
11 < div id = " div3 " > </ div >
12 </ body >
13 </ html >

Código HTML 3.68: border-color.html

282 www.k19.com.br
283 CSS

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar93.zip

94 No projeto css, crie um arquivo CSS chamado border-color.css.

1 div {
2 width .
. 4 px ,.
3 height .. 2 px ,.
4 border - style .. solid ,
.
5 }
6
7 # div1 {
8 border - color .
. red .
,
9 }
1
11 # div2 {
12 . # ff ,.
border - color .
13 }
14
15 # div3 {
16 border - color .
. rgb ( ,  , 255) .,
17 }

Código CSS 3.91: border-color.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar94.zip

95 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/border-color.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/border-color.html.

96 No projeto css, crie um arquivo chamado bordas-individuais.html.

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 - bordas - individuais </ title >
6 < link rel = " stylesheet " type = " text / css " href = " bordas - individuais . css " >
7 </ head >
8 < body >
9 < div > </ div >
1 </ body >
11 </ html >

Código HTML 3.69: bordas-individuais.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar96.zip

97 No projeto css, crie um arquivo CSS chamado bordas-individuais.css.

1 div {
2 . 4 px ,.
width .
3 height .. 2 px ,.
4

www.facebook.com/k19treinamentos 283
CSS 284

5 . dashed ,
border - top - style . .
6 border - top - color .
. red .,
7 border - top - width .
. 2 px .,
8
9 border - right - style .
. dotted ,.
1 border - right - color .
. # ff ,.
11 . 8 px .,
border - right - width .
12
13 . double ,.
border - bottom - style .
14 border - bottom - color .
. rgb ( ,  , 255) .,
15 border - bottom - width .
. 14 px ,.
16
17 border - left - style .
. solid . ,
18 border - left - color .
. black ,.
19 . 2 px ,.
border - left - width .
2 }

Código CSS 3.92: bordas-individuais.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar97.zip

98 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/bordas-individuais.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/bordas-individuais.html.

99 No projeto css, crie um arquivo chamado border-radius.html.

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 - border - radius </ title >
6 < link rel = " stylesheet " type = " text / css " href = " border - radius . css " >
7 </ head >
8 < body >
9 < div id = " div1 " > </ div >
1 < div id = " div2 " > </ div >
11 < div id = " div3 " > </ div >
12 < div id = " div4 " > </ div >
13 </ body >
14 </ html >

Código HTML 3.70: border-radius.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar99.zip

100 No projeto css, crie um arquivo CSS chamado border-radius.css.

1 div {
2 width .
. 4 px ,.
3 height .. 1 px ,.
4 margin .. 1 px ,.
5 border .. 2 px solid black ,.
6 }
7
8 # div1 {
9 border - radius . . 2 px ,.

284 www.k19.com.br
285 CSS

1 }
11
12 # div2 {
13 . 2 px 6 px .,
border - radius .
14 }
15
16 # div3 {
17 border - radius .
. 2 px 6 px 1 px ,.
18 }
19
2 # div4 {
21 . 2 px 6 px 1 px 14 px ,.
border - radius .
22 }

Código CSS 3.93: border-radius.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar1.zip

101 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/border-radius.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/border-radius.html.

102 No projeto css, crie um arquivo chamado border-collapse.html.

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 - border - collapse </ title >
6 < link rel = " stylesheet " type = " text / css " href = " border - collapse . css " >
7 </ head >
8 < body >
9 < table id = " tabela1 " >
1 < tr >
11 < td > K19 </ td >
12 < td > K19 </ td >
13 </ tr >
14 < tr >
15 < td > K19 </ td >
16 < td > K19 </ td >
17 </ tr >
18 </ table >
19 < table id = " tabela2 " >
2 < tr >
21 < td > K19 </ td >
22 < td > K19 </ td >
23 </ tr >
24 < tr >
25 < td > K19 </ td >
26 < td > K19 </ td >
27 </ tr >
28 </ table >
29 </ body >
3 </ html >

Código HTML 3.71: border-collapse.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar12.zip

www.facebook.com/k19treinamentos 285
CSS 286

103 No projeto css, crie um arquivo CSS chamado border-collapse.css.

1 table {
2 . 2 px solid black ,.
border .
3 margin .
. 1 px ,.
4 }
5
6 td {
7 . 2 px solid black ,.
border .
8 }
9
1 # tabela1 {
11 border - collapse .
. collapse .
,
12 }

Código CSS 3.94: border-collapse.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar13.zip

104 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/border-collapse.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/border-collapse.html.

105 No projeto css, crie um arquivo chamado border-spacing.html.

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 - border - spacing </ title >
6 < link rel = " stylesheet " type = " text / css " href = " border - spacing . css " >
7 </ head >
8 < body >
9 < table id = " tabela1 " >
1 < tr >
11 < td > K19 </ td >
12 < td > K19 </ td >
13 </ tr >
14 < tr >
15 < td > K19 </ td >
16 < td > K19 </ td >
17 </ tr >
18 </ table >
19 < table id = " tabela2 " >
2 < tr >
21 < td > K19 </ td >
22 < td > K19 </ td >
23 </ tr >
24 < tr >
25 < td > K19 </ td >
26 < td > K19 </ td >
27 </ tr >
28 </ table >
29 </ body >
3 </ html >

Código HTML 3.72: border-spacing.html

286 www.k19.com.br
287 CSS

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar15.zip

106 No projeto css, crie um arquivo CSS chamado border-spacing.css.

1 table {
2 border .
. 2 px solid black ,.
3 margin .
. 1 px ,.
4 }
5
6 td {
7 . 2 px solid black ,.
border .
8 }
9
1 # tabela1 {
11 border - spacing .
. 1 px 5 px .,
12 }

Código CSS 3.95: border-spacing.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar16.zip

107 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/border-spacing.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/border-spacing.html.

108 No projeto css, crie um arquivo chamado outline-style.html.

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 - outline - style </ title >
6 < link rel = " stylesheet " type = " text / css " href = " outline - style . css " >
7 </ head >
8 < body >
9 < div id = " div1 " > </ div >
1 < div id = " div2 " > </ div >
11 < div id = " div3 " > </ div >
12 </ body >
13 </ html >

Código HTML 3.73: outline-style.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar18.zip

109 No projeto css, crie um arquivo CSS chamado outline-style.css.

1 div {
2 . 4 px ,.
width .
3 height .. 1 px ,.
4 margin .. 1 px ,.
5 }
6
7 # div1 {

www.facebook.com/k19treinamentos 287
CSS 288

8 . dashed ,
outline - style . .
9 }
1
11 # div2 {
12 outline - style .
. dotted ,.
13 }
14
15 # div3 {
16 . solid ,
outline - style . .
17 }

Código CSS 3.96: outline-style.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar19.zip

110 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/outline-style.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/outline-style.html.

111 No projeto css, crie um arquivo chamado outline-color.html.

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 - outline - color </ title >
6 < link rel = " stylesheet " type = " text / css " href = " outline - color . css " >
7 </ head >
8 < body >
9 < div id = " div1 " > </ div >
1 < div id = " div2 " > </ div >
11 < div id = " div3 " > </ div >
12 </ body >
13 </ html >

Código HTML 3.74: outline-color.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar111.zip

112 No projeto css, crie um arquivo CSS chamado outline-color.css.

1 div {
2 width .
. 4 px ,.
3 height .. 1 px ,.
4 margin .. 1 px ,.
5 outline - style . . solid ,
.
6 }
7
8 # div1 {
9 outline - color .
. red .
,
1 }
11
12 # div2 {
13 outline - color .
. # ff ,.
14 }
15
16 # div3 {

288 www.k19.com.br
289 CSS

17 . rgb ( ,  , 255) .,
outline - color .
18 }

Código CSS 3.97: outline-color.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar112.zip

113 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/outline-color.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/outline-color.html.

114 No projeto css, crie um arquivo chamado outline-width.html.

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 - outline - width </ title >
6 < link rel = " stylesheet " type = " text / css " href = " outline - width . css " >
7 </ head >
8 < body >
9 < div id = " div1 " > </ div >
1 < div id = " div2 " > </ div >
11 < div id = " div3 " > </ div >
12 </ body >
13 </ html >

Código HTML 3.75: outline-width.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar114.zip

115 No projeto css, crie um arquivo CSS chamado outline-width.css.

1 div {
2 . 4 px ,.
width .
3 height .. 1 px ,.
4 margin .. 2 px ,.
5 outline - style . . solid .
,
6 }
7
8 # div1 {
9 outline - width .
. thin ,.
1 }
11
12 # div2 {
13 . thick ,.
outline - width .
14 }
15
16 # div3 {
17 outline - width .
. 2 px .,
18 }

Código CSS 3.98: outline-width.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar115.zip

www.facebook.com/k19treinamentos 289
CSS 290

116 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/outline-width.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/outline-width.html.

117 No projeto css, crie um arquivo chamado outline-offset.html.

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 - outline - offset </ title >
6 < link rel = " stylesheet " type = " text / css " href = " outline - offset . css " >
7 </ head >
8 < body >
9 < div id = " div1 " > </ div >
1 < div id = " div2 " > </ div >
11 < div id = " div3 " > </ div >
12 </ body >
13 </ html >

Código HTML 3.76: outline-offset.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar117.zip

118 No projeto css, crie um arquivo CSS chamado outline-offset.css.

1 div {
2 width .
. 4 px ,.
3 height .. 5 px ,.
4 margin .. 5 px ,.
5 outline .. 5 px solid red .
,
6 border .. 5 px solid black ,.
7 }
8
9 # div1 {
1 outline - offset .
. 2 px ,.
11 }
12
13 # div2 {
14 . -2 px ,.
outline - offset .
15 }

Código CSS 3.99: outline-offset.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar118.zip

119 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/outline-offset.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/outline-offset.html.

290 www.k19.com.br
291 CSS

120 No projeto css, crie um arquivo chamado box-shadow.html.

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 - box - shadow </ title >
6 < link rel = " stylesheet " type = " text / css " href = " box - shadow . css " >
7 </ head >
8 < body >
9 < div id = " div1 " > </ div >
1 < div id = " div2 " > </ div >
11 < div id = " div3 " > </ div >
12 < div id = " div4 " > </ div >
13 </ body >
14 </ html >

Código HTML 3.77: box-shadow.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar12.zip

121 No projeto css, crie um arquivo CSS chamado box-shadow.css.

1 div {
2 width .
. 2 px ,.
3 height .. 1 px ,.
4 border .. 4 px solid black ,.
5 margin .. 5 px ,.
6 }
7
8 # div1 {
9 box - shadow .
. 1 px 5 px gray ,.
1 }
11
12 # div2 {
13 box - shadow .
. 1 px 5 px 5 px gray .,
14 }
15
16 # div3 {
17 box - shadow .
. inset 1 px 1 px gray .,
18 }
19
2 # div4 {
21 box - shadow .
. inset 1 px 1 px 5 px gray ,.
22 }

Código CSS 3.100: box-shadow.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar121.zip

122 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/box-shadow.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/box-shadow.html.

123 No projeto css, crie um arquivo chamado margens-externas.html.

www.facebook.com/k19treinamentos 291
CSS 292

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 - margens - externas </ title >
6 < link rel = " stylesheet " type = " text / css " href = " margens - externas . css " >
7 </ head >
8 < body >
9 < div id = " div1 " > </ div >
1 < div id = " div2 " > </ div >
11 < div id = " div3 " > </ div >
12 < div id = " div4 " > </ div >
13 </ body >
14 </ html >

Código HTML 3.78: margens-externas.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar123.zip

124 No projeto css, crie um arquivo CSS chamado margens-externas.css.

1 div {
2 display .. inline - block ,.
3 border .. 1 px solid black ,.
4 width .
. 1 px ,.
5 height .. 1 px ,.
6 }
7
8 # div1 {
9 margin - top .
. 5 px ,.
1 margin - right .
. 5 px ,.
11 }
12
13 # div2 {
14 . 5 px ,.
margin - bottom .
15 }
16
17 # div3 {
18 margin - left .
. 5 px ,.
19 }
2
21 # div4 {
22 . 5 px ,.
margin - left .
23 margin - bottom .
. 5 px ,.
24 }

Código CSS 3.101: margens-externas.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar124.zip

125 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/margens-externas.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/margens-externas.html.

126 No projeto css, crie um arquivo chamado margens-internas.html.

1 <! DOCTYPE html >

292 www.k19.com.br
293 CSS

2 < html lang = " pt - br " >

3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > K19 - margens - internas </ title >
6 < link rel = " stylesheet " type = " text / css " href = " margens - internas . css " >
7 </ head >
8 < body >
9 < div id = " div1 " > </ div >
1 < div id = " div2 " > </ div >
11 < div id = " div3 " > </ div >
12 < div id = " div4 " > </ div >
13 </ body >
14 </ html >

Código HTML 3.79: margens-internas.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar126.zip

127 No projeto css, crie um arquivo CSS chamado margens-internas.css.

1 div {
2 display .. inline - block ,.
3 border .. 2 px solid black ,.
4 width .
. 1 px ,.
5 height .. 1 px ,.
6 background - color . . yellow ,.
7 background - clip . . content - box .
,
8 }
9
1 # div1 {
11 padding - top .
. 5 px ,.
12 padding - right .
. 5 px ,.
13 }
14
15 # div2 {
16 . 5 px ,.
padding - bottom .
17 }
18
19 # div3 {
2 padding - left .
. 5 px ,.
21 }
22
23 # div4 {
24 . 5 px ,.
padding - left .
25 padding - bottom .
. 5 px ,.
26 }

Código CSS 3.102: margens-internas.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar127.zip

128 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/margens-internas.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/css/public_html/margens-internas.html.

129 No projeto css, crie um arquivo chamado conteudo-dimensao.html.

www.facebook.com/k19treinamentos 293
CSS 294

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 - conteudo - dimensao </ title >
6 < link rel = " stylesheet " type = " text / css " href = " conteudo - dimensao . css " >
7 </ head >
8 < body >
9 <p id = " p1 " >
1 Lorem ipsum dolor sit amet , consectetur adipiscing elit . In
11 mollis , nibh et tempor sollicitudin , orci lorem iaculis sem ,
12 sit amet sodales quam massa sit amet risus . Fusce malesuada
13 eleifend massa , ac mollis mi fermentum vitae . Nullam consequat
14 leo nunc , in ornare turpis aliquam quis .
15 </ p >
16 <p id = " p2 " >
17 Lorem ipsum dolor sit amet , consectetur adipiscing elit . In
18 mollis , nibh et tempor sollicitudin , orci lorem iaculis sem ,
19 sit amet sodales quam massa sit amet risus . Fusce malesuada
2 eleifend massa , ac mollis mi fermentum vitae . Nullam consequat
21 leo nunc , in ornare turpis aliquam quis .
22 </ p >
23 <p id = " p3 " >
24 Lorem ipsum dolor sit amet , consectetur adipiscing elit . In
25 mollis , nibh et tempor sollicitudin , orci lorem iaculis sem ,
26 sit amet sodales quam massa sit amet risus . Fusce malesuada
27 eleifend massa , ac mollis mi fermentum vitae . Nullam consequat
28 leo nunc , in ornare turpis aliquam quis .
29 </ p >
3 </ body >
31 </ html >

Código HTML 3.80: conteudo-dimensao.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar129.zip

130 No projeto css, crie um arquivo CSS chamado conteudo-dimensao.css.

1 p {
2 border .. 1 px solid black ,.
3 max - height .. 2 px ,.
4 max - width .
. 4 px ,.
5 }
6
7 # p1 {
8 . 2 px ,.
width .
9 }
1
11 # p2 {
12 height .
. 13 px ,.
13 }

Código CSS 3.103: conteudo-dimensao.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-css-complementar13.zip

131 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/css/public_html/conteudo-dimensao.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

294 www.k19.com.br
295 CSS

http..//localhost/~<USUARIO>/css/public_html/conteudo-dimensao.html.

Resumo do Capítulo

1 A linguagem CSS é utilizada para formatar visualmente as páginas web.

2 Podemos considerar cada elemento HTML como um box.

3 A estrutura dos boxes é definida pelo Box Model.

4 De acordo com o Box Model, cada box possui conteúdo, margens internas, bordas e margens
externas.

5 Por padrão, os boxes dos block-level elements ocupam todo o espaço horizontal do elemento
pai e provocam quebras de linha.

6 Por padrão, os boxes dos inline-level elements ocupam apenas o espaço necessário e não
provocam quebras de linha.

7 A formatação dos elementos HTML é definida através das regras CSS

8 Uma regra CSS é composta por seletor e corpo. No corpo, são definidas as propriedades CSS.

9 Os seletores definem quais elementos HTML serão afetados pelas regras CSS.

10 As propriedades CSS definem as características visuais dos elementos HTML.

11 As regras CSS podem ser aplicadas aos documentos HTML de três formas diferentes: inline
style, internal style sheet e external style sheet.

12 Os comentários CSS são definidos com os marcadores /* e */.

13 Na linguagem CSS, toda cor está associada a um código numérico expresso em hexadecimal.
Algumas cores possuem nome.

www.facebook.com/k19treinamentos 295
CSS 296

14 Podemos escolher uma cor através do código dela ou através das funções rgb(), rgba(), hsl() e
hsla(). As cores que possuem nome podem ser escolhidas através do seu nome.

15 As unidades absolutas da linguagem CSS são: cm, mm, in, pt, pc e px.

16 As unidades relativas da linguagem CSS são: em, ex, ch, rem, vw, vh, vmin e vmax.

17 As principais propriedades de background são: background-color, background-image, background-

repeat, background-attachment, background-position, background-clip, background-origin, background-
size e background.

18 As principais propriedades de texto são: color, text-align, text-decoration, text-transform,

text-indent, letter-spacing, word-spacing, word-wrap, line-height, white-space e text-shadown.

19 As principais propriedades de fonte são: font-family, font-size, font-style, font-variant, font-

weight, font e @font-face.

20 As principais propriedades de lista são: list-style-type, list-style-image, list-style-position e

list-style.

21 As principais propriedades de borda são: border-style, border-width, border-color, border,

border-left-*, border-top-*, border-right-*, border-bottom-*, border-radius, border-*-*-radius, border-
collapse e border-spacing.

22 As principais propriedades de outline são: outline-style, outline-color, outline-width, outline-

offset e outline.

23 A principal propriedade de sombra é box-shadow.

24 As principais propriedades de margens são: margin-*, margin, padding-* e padding.

25 As principais propriedades de altura e largura são: height, width, min-height, max-height,

min-width e max-width.

26 A propriedade display define a forma de exibição dos boxes.

27 A propriedade display define a forma de exibição dos boxes.

296 www.k19.com.br
297 CSS

28 A propriedade visibility define a visibilidade dos boxes.

29 Podemos controlar a opacidade dos boxes com a propriedade opacity.

30 Os quatro tipos de posicionamento do CSS são: static, relative, fixed e absolute.

31 As principais propriedades de posicionamento são: position, float, clear e z-index.

32 As principais propriedades de overflow e clips são: overflow, overflow-x, overflow-y e clip.

33 As principais funções de transformação são: translate(), scale(), rotate() e skew().

34 As principais propriedades de transição são: transition-duration, transition-delay, transition-

timing-function e transition-property.

35 As principais propriedades de animação são: animation-timing-function, animation-delay,

animation-iteration-count, animation-direction e animation-play-state.

36 Podemos dividir os seletores do CSS em básicos, seletores de atributo, pseudo-classes e pseudo-

elementos.

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 formatações específicas para os diversos tipos de dis-
positivos que desejamos suportar.

39 A técnica sprites melhora o tempo de carregamento das páginas web.

Prova

1 Considere a formatação padrão dos navegadores. O que podemos dizer sobre um block-level
element?

a) Ocupa metade do espaço horizontal e não provoca quebras de linha.

b) Ocupa horizontalmente somente o espaço necessário para o seu conteúdo e não provocam

www.facebook.com/k19treinamentos 297
CSS 298

quebras de linha.

c) Ocupa todo o espaço vertical e provoca quebras de linha.

d) Ocupa horizontalmente somente o espaço necessário para o seu conteúdo e provocam que-
bras de linha.

e) Ocupa todo o espaço horizontal e provoca quebras de linha.

2 Considere a formatação padrão dos navegadores. O que podemos dizer sobre um inline-level
element?

a) Ocupa metade do espaço horizontal e não provoca quebras de linha.

b) Ocupa horizontalmente somente o espaço necessário para o seu conteúdo e não provocam
quebras de linha.

c) Ocupa todo o espaço vertical e provoca quebras de linha.

d) Ocupa horizontalmente somente o espaço necessário para o seu conteúdo e provocam que-
bras de linha.

e) Ocupa todo o espaço horizontal e provoca quebras de linha.

3 Como podemos aplicar um código CSS a um documento HTML?

a) Através do elemento link da seguinte forma:

1 < link rel = " stylesheet " type = " text / css " src = " estilo . css " > </ link >.

b) Através do elemento css da seguinte forma:

1 < css >p { font - size .. 12 px } </ css >

c) Através do elemento style da seguinte forma:

1 < style rel = " stylesheet " type = " text / css " src = " estilo . css " > </ style >

d) Através do elemento link da seguinte forma:

1 < link rel = " stylesheet " type = " text / css " href = " estilo . css " > </ link >

e) Através do elemento stylesheet da seguinte forma:

1 < stylesheet src = " estilo . css " > </ stylesheet >

4 Qual das alternativas é um valor inválido de cor CSS?

298 www.k19.com.br
299 CSS

a) red

b) #00ff00

c) preto

d) rgba(0, 100, 30, 0.1)

e) hsl(100, 20%, 10%)

5 Qual das alternativas é uma unidade inválida de medida CSS?

a) px

b) em

c) rem

d) qm

e) pc

6 Qual das propriedades abaixo pode ser utilizada para definir uma imagem de fundo de um
elemento?

a) background-attachment

b) background

c) bg-color

d) background-size

e) bg-image

7 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

8 Considere o seguinte código HTML:

www.facebook.com/k19treinamentos 299
CSS 300

1 < div > Lorem ipsum dolor sit amet , consectetur adipiscing elit .
2
3 Cras vehicula bibendum arcu .
4 Sed dui nulla , cursus et lacinia eu ,
5 vulputate ac dolor .
6 Quisque faucibus congue congue . </ div >

O que acontecerá quando esse código for renderizado em um navegador?

a) Todas as sequências de espaços serão tratadas como um único espaço e as quebras de linha
serão respeitadas.

b) Todas as sequências de espaços serão respeitadas e as quebras de linha serão ignoradas.

c) Todas as sequências de espaços serão respeitadas e as quebras de linha serão tratadas como
um espaço.

d) Todas as sequências de espaços serão tratadas como um único espaço e as quebras de linha
serão ignoradas.

e) Todas as sequências de espaços serão tratadas como um único espaço e as quebras de linha
serão tratadas como um espaço.

9 Para alterar o comportamento padrão com relação ao tratamento dos espaços e quebras de linha,
devemos utilizar qual propriedade CSS?

a) white-space

b) word-spacing

c) word-wrap

d) line-height

e) white-spacing

10 Podemos alterar a fonte de um texto através da propriedade CSS font-family. Quais valores
podem ser atribuídos a essa propriedade?

a) O nome de uma fonte.

b) O nome de um grupo de fonte classificado pela espessura das fontes.

c) O nome de uma família de fonte.

d) O nome de uma fonte ou o nome de uma família de fonte.

e) O nome de um grupo de fonte classificado pelo tamanho das fontes.

300 www.k19.com.br
301 CSS

11 Considere um elemento com as seguintes propriedades CSS:

1 width .
. 1 px ,.
2 border .. 1 px solid black ,.
3 margin .. 1 px ,.
4 padding .. 1 px ,.

Ao ser renderizado em um navegador, o elemento terá:

a) 120px de largura.

b) 120px de altura.

c) 130px de largura.

d) 140px de altura.

e) 160px de largura.

12 Qual a diferença entre uma “borda” produzida pela propriedade outline e outra produzida pela
propriedade border?

a) Nenhuma diferença.

b) A borda produzida pela propriedade border é mais grossa.

c) A borda produzida pela propriedade outline não pode ter sua cor alterada.

d) A borda produzida pela propriedade outline não afeta as dimensões do box do elemento.

e) A borda produzida pela propriedade border não funciona em todos os navegadores.

13 Podemos utilizar a propriedade display com valor none ou a propriedade visibility com valor
hidden para fazer com que um elemento não apareça em uma página HTML. Qual a diferença entre
as duas abordagens?

a) Nenhuma diferença.

b) O espaço do box de um elemento com propriedade display igual a none permanece inalterado.

c) O espaço do box de um elemento com propriedade visibility igual a hidden deixa de existir.

d) O espaço do box de um elemento com propriedade display igual a none deixa de existir.

e) Se o valor none for atribuído a propriedade display, ela não poderá mudar mais de valor.

14 Considere um elemento com as seguintes propriedades CSS:

www.facebook.com/k19treinamentos 301
CSS 302

1 position . . absolute .
,
.  px .,
2 top .
3 left ..  px .,

O que podemos dizer sobre esse elemento?

a) Será posicionado a 0px do topo e 0px da esquerda da página.

b) Será posicionado a 0px do topo e 0px da esquerda do elemento pai.

c) Será posicionado a 0px do topo e 0px da esquerda do primeiro elemento ancestral.

d) Será posicionado a 0px do topo e 0px da esquerda do primeiro elemento ancestral que tenha a
propriedade position diferente de static.

e) Será posicionado a 0px do topo e 0px da esquerda do primeiro elemento ancestral que tenha
a propriedade position diferente de static. Caso nenhum ancestral se encaixe nessa condição,
ele será posicionado a 0px do topo e 0px da esquerda da página.

15 Considere o seguinte código:

1 < div style = " width .. 5 px ,. height .. 5 px ,. font - size .. 16 px ,.

2 overflow .. hidden ,. border .. 1 px solid red " >
3 Lorem ipsum dolor sit amet , consectetur adipiscing elit . Sed eget arcu neque .
4 Cras at varius libero , vitae varius mauris . Nullam posuere eget nisi at
5 posuere . Cras eu laoreet ipsum .
6 </ div >

O que podemos dizer sobre o conteúdo do elemento div?

a) O trecho do conteúdo que ultrapassar na vertical e na horizontal os limites do elemento div

será exibido.

b) O trecho do conteúdo que ultrapassar na vertical os limites do elemento div será exibido.

c) O trecho do conteúdo que ultrapassar na vertical e na horizontal os limites do elemento div

não será exibido.

d) O trecho do conteúdo que ultrapassar na horizontal os limites do elemento div será exibido.

16 Considere o seguinte código:

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 >
1 </ 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 >
2 <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 >

Considere também que o seguinte código CSS foi aplicado ao documento:

1 # div1 > p + div p . class1 {

2 color .
. red .
,
3 }

Quem ficará com texto vermelho?

a) Apenas o elemento com atributo id igual a p5.

b) Os elementos com atributo id igual a p5 e p6.

c) Os elementos com atributo id igual a p2, p5 e p7.

d) Apenas o elemento com atributo id igual a p3.

e) Os elementos com atributo id igual a p3 e p4.

17 Considere o seguinte código:

1 @media all and ( width .

. 48 px ) , ( orientation .
. portrait ) {
2 ...
3 }

O que podemos dizer sobre as regras CSS definidas dentro da media query acima?

a) Serão aplicadas quando o viewport tiver 480px e a altura do viewport for maior que a sua lar-
gura.

b) Serão aplicadas apenas quando a largura do viewport for maior que a sua altura.

c) Serão aplicadas apenas quando o viewport tiver 480px de largura.

d) Serão aplicadas quando o viewport tiver 480px ou a altura do viewport for maior que a sua
largura.

e) Serão aplicadas apenas quando o viewport tiver 480px de altura. div.

13 17
Minha Pontuação Pontuação Mínima: Pontuação Máxima:

www.facebook.com/k19treinamentos 303
CSS 304

304 www.k19.com.br
 4

CAPÍTULO
J AVA S CRIPT

Nos capítulos anteriores, vimos que as linguagens HTML e a CSS são fundamentais para a cria-
ção de páginas web. O foco do HTML é o conteúdo enquanto o foco do CSS é a formatação dessas
páginas.

As linguagens HTML e CSS não são linguagens de programação. Para resolver determinados
problemas, é necessário utilizar uma linguagem de programação. Por isso, veremos nesse capítulo, a
linguagem de programação JavaScript.

Com a linguagem JavaScript podemos construir páginas extremamente dinâmicas e interativas.

O foco do JavaScript é implementar o comportamento ou a inteligência das páginas web.

Aplicando JavaScript ao HTML

Há duas formas de associar código JavaScript e documentos HTML.

JavaScript interno
O código JavaScript pode ser definido dentro de um documento HTML no corpo do elemento
script.

1 < script >

2 alert ( " K19 " ) .,
3 </ script >

Nessa abordagem, o código JavaScript fica “amarrado” a um único documento HTML.

JavaScript externo
O código JavaScript pode ser definido em arquivos separados e depois associados aos documen-
tos HTML através do elemento script.

1 alert ( " K19 " ) .,

Código Javascript 4.1: script.js

1 < script src = " script . js " > </ script >

Nessa outra abordagem, podemos reutilizar o mesmo código JavaScript em vários documentos
HTML.

Carregamento

www.facebook.com/k19treinamentos 305
J AVA S CRIPT 306

Como vimos, o elemento script permite associar código JavaScript aos documentos HTML. Esse
elemento pode ser adicionado dentro do corpo dos elementos head e body. A localização do ele-
mento script afeta o momento no qual o código JavaScript será carregado pelos navegadores.

No exemplo a seguir, o elemento script foi colocado dentro do corpo do head. Dessa forma, o
código JavaScript será carregado antes do body ser processado. Consequentemente, a página 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 ...
1 </ body >
11 </ html >

No próximo exemplo, o elemento script foi colocado no final do body. Consequentemente, o

JavaScript só será carregado depois de todos os outros elementos do body.

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 </ head >
7 < body >
8 ...
9 < script src = " script . js " > </ script >
1 </ body >
11 </ html >

Normalmente, a segunda abordagem é mais recomendada pois as páginas web são exibidas mais
rapidamente aos usuários. Contudo, eventualmente, o código JavaScript deve ser utilizado antes do
processamento dos elementos do body. Nesses casos, é necessário utilizar a primeira abordagem.

Chrome DevTools

Os navegadores oferecem alguns recursos para testar ou depurar código JavaScript. Nas imagens
abaixo, mostramos a utilização 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

Exercícios de Fixação

1 Abra o Netbeans e crie um projeto chamado javascript.

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 é necessá-
rio 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 pro-
jeto javascript em /home/<USUARIO>/public_html. Lembre-se que é necessário
instalar e configurar o Apache HTTP Server como vimos anteriormente.

Figura 4.1: Projeto javascript

www.facebook.com/k19treinamentos 309
J AVA S CRIPT 310

Figura 4.2: Projeto javascript

Figura 4.3: Projeto javascript

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao1.zip

310 www.k19.com.br
311 J AVA S CRIPT

2 No projeto javascript, crie um arquivo chamado javascript.html.

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > JavaScript </ title >
6 < script >
7 alert ( " K19 " ) .,
8 </ script >
9 </ head >
1 < body >
11 < h1 > K19 - JavaScript </ h1 >
12 </ body >
13 </ html >

Código HTML 4.5: javascript.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao2.zip

3 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/javascript.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/javascript.html.

4 Altere o arquivo javascript.html do 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 > JavaScript </ title >
6 </ head >
7 < body >
8 < h1 > K19 - JavaScript </ h1 >
9 < script >
1 alert ( " K19 " ) .,
11 </ script >
12 </ body >
13 </ html >

Código HTML 4.6: javascript.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao4.zip

5 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/javascript.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/javascript.html.

6 No projeto javascript, crie um arquivo chamado script.js.

www.facebook.com/k19treinamentos 311
J AVA S CRIPT 312

1 alert ( " K19 " ) .,

Código Javascript 4.2: script.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao6.zip

7 Altere novamente o arquivo javascript.html do 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 > JavaScript </ title >
6 < script src = " script . js " > </ script >
7 </ head >
8 < body >
9 < h1 > K19 - JavaScript </ h1 >
1 </ body >
11 </ html >

Código HTML 4.7: javascript.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao7.zip

8 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/javascript.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/javascript.html.

Variáveis

Assim como qualquer linguagem de programação, JavaScript permite a criação de variáveis atra-
vés da palavra chave var. Toda variável deve ter um nome (identificador).

1 var .
idadeDoJonas = 3,
2 var precoDoProduto = 28.75,.
3 var .
nomeDoInstrutor = " Marcelo Martins " ,
4 var acessoLiberado = true .
,

No exemplo anterior, todas as variáveis foram inicializadas. Antes da inicialização, as variáveis

possuem o valor especial undefined. No próximo exemplo, a variável altura não é inicializada. Por-
tanto, ela possuíra o valor undefined.

1 var altura ,.

Operadores

312 www.k19.com.br
313 J AVA S CRIPT

Para manipular os valores das variáveis de um programa, devemos utilizar os operadores ofere-
cidos pela linguagem de programação adotada. A linguagem JavaScript possui diversos operadores
e os principais são categorizados da seguinte forma:

• Aritmético: + - * / %
• Atribuição: = += -= *= /= %= ++ --
• Relacional: == != < <= > >=
• Lógico: && ||

Aritméticos
Os operadores aritméticos funcionam de forma muito semelhante aos operadores da matemá-
tica. Os operadores aritméticos são:

• Adição +
• Subtração -
• Multiplicação *
• Divisão /
• Módulo %

1 .
var umMaisUm = 1 + 1,
2 // umMaisUm = 2
3
4 var tresVezesDois = 3 * 2,.
5 // tresVezesDois = 6
6
7 var quatroDivididoPorDois = 4 / 2,.
8 // quatroDivididoPor2 = 2
9
1 .
var seisModuloCinco = 6 % 5,
11 // seisModuloCinco = 1
12
13 var x = 7,.
14
15 x = x + 1 * 2,.
16 // x = 9
17
18 .
x = x - 3,
19 // x = 6
2
21 x = x / (6 - 2 - (3 * 5) / (16 - 1) ) ,.
22 // x = 2

Código Javascript 4.5: Exemplo de uso dos operadores aritméticos

Importante
O módulo de um número x , na matemática, é o valor numérico de x desconsiderando
o seu sinal (valor absoluto). Na matemática expressamos o módulo da seguinte forma:
| − 2| = 2.

Em linguagens de programação, o módulo de um número é o resto da divisão desse número por

outro. No exemplo acima, o resto da divisão de 6 por 5 é igual a 1. Além disso, lemos a expressão
6%5 da seguinte forma: seis módulo cinco.

www.facebook.com/k19treinamentos 313
J AVA S CRIPT 314

Importante
As operações aritméticas em JavaScript obedecem as mesmas regras da matemática
com relação à precedência dos operadores e parênteses. Portanto, as operações são
resolvidas a partir dos parênteses mais internos até os mais externos, primeiro resolvemos as
multiplicações, divisões e os módulos. Em seguida, resolvemos as adições e subtrações.

Mais Sobre
As operações de potenciação e raiz quadrada podem ser realizadas através dos métodos
Math.pow e Math.sqrt. Veja alguns exemplos.

1 var a = Math . pow (3 , 5) .,

2 // a = 243
3
4 var b = Math . sqrt (9) ,.
5 // b = 3

Código Javascript 4.6: Potenciação e raiz quadrada

Concatenação de Strings
Como vimos anteriormente, o operador + é utilizado para realizar soma aritmética. Mas, ele
também pode ser utilizado para concatenar strings. Veja um exemplo.

1 .
var s1 = " Marcelo " ,
2 var s2 = " " .
,
3 var s3 = " Martins " .
,
4
5 // " Marcelo Martins "
6 var s4 = s1 + s2 + s3 .,

Considere o exemplo a seguir.

1 var s1 = " Idade .. " ,

.
2 var idade = 3,.
3
4 // " Idade .. 3"
5 var s2 = s1 + idade ,.

Observe que o operador + foi aplicado a um valor numérico e a um texto. Nesses casos, o valor
numérico é, automaticamente, transformado em texto e a concatenação é realizada.

Pare para pensar...

As expressões são avaliadas da esquerda para a direita. Dessa forma, considere o se-
guinte exemplo:

1 alert (1 + 2 + 3 + " testando " ) .,

2 alert ( " testando " + 1 + 2 + 3) .,

O que seria exibido nesse exemplo?

314 www.k19.com.br
315 J AVA S CRIPT

Atribuição
Nas seções anteriores, já vimos um dos operadores de atribuição, o operador = (igual). Os opera-
dores de atribuição são:

• Simples =
• Incremental +=
• Decremental -=
• Multiplicativa *=
• Divisória /=
• Modular %=
• Incremento ++
• Decremento --

1 .
var valor = 1,
2 // valor = 1
3
4 .
valor += 2,
5 // valor = 3
6
7 .
valor -= 1,
8 // valor = 2
9
1 valor *= 6,.
11 // valor = 12
12
13 valor /= 3,.
14 // valor = 4
15
16 valor %= 3,.
17 // valor = 1
18
19 .
valor ++,
2 // valor = 2
21
22 .
valor - -,
23 // valor = 1

Código Javascript 4.10: Exemplo de uso dos operadores de atribuição.

As instruções acima poderiam ser escritas de outra forma:

1 .
var valor = 1,
2 // valor = 1
3
4 .
valor = valor + 2,
5 // valor = 3
6
7 .
valor = valor - 1,
8 // valor = 2
9
1 .
valor = valor * 6,
11 // valor = 12
12
13 .
valor = valor / 3,
14 // valor = 4
15
16 valor = valor % 3,.
17 // valor = 1
18

www.facebook.com/k19treinamentos 315
J AVA S CRIPT 316

19 .
valor = valor + 1,
2 // valor = 2
21
22 .
valor = valor - 1,
23 // valor = 1

Código Javascript 4.11: O mesmo exemplo anterior, usando os operadores aritméticos.

Como podemos observar, os operadores de atribuição, exceto o simples (=), reduzem a quan-
tidade de código escrito. Podemos dizer que esses operadores funcionam como “atalhos” para as
operações que utilizam os operadores aritméticos.

Relacionais
Muitas vezes precisamos determinar a relação entre uma variável ou valor e outra outra variável
ou valor. Nessas situações, utilizamos os operadores relacionais. As operações realizadas com os
operadores relacionais devolvem valores booleanos. Os operadores relacionais são:

• Igualdade ==
• Diferença !=
• Menor <
• Menor ou igual <=
• Maior >
• Maior ou igual >=

1 var valor = 2,.

2 var t = false .
,
3 t = ( valor == 2) ,. // t = true
4 t = ( valor != 2) ,. // t = false
5 t = ( valor < 2) ,. // t = false
6 t = ( valor <= 2) ,. // t = true
7 t = ( valor > 1) ,. // t = true
8 t = ( valor >= 1) ,. // t = true

Código Javascript 4.12: Exemplo de uso dos operadores relacionais em JavaScript.

Lógicos
A linguagem JavaScript permite verificar duas ou mais condições através de operadores lógicos.
Os operadores lógicos 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 > .2 && b < .8) ,.

Código Javascript 4.13: Exemplo de uso do operador &

A tabela verdade é uma forma prática de visualizar o resultado dos operadores lógicos. Veja a
seguir a tabela verdade do operador &&.

316 www.k19.com.br
317 J AVA S CRIPT

a > 0.2 b < 0.8 a > 0.2 && b < 0.8

V V V
V F F
F V F
F F F
Figura 4.4: Tabela verdade do operador &&

• || (“OU”)

1 var a = Math . random () .,

2 var b = Math . random () .,
3
4 alert ( a > .2 || b < .8) ,.

Código Javascript 4.14: Exemplo de uso do operador ||

A tabela verdade é uma forma prática de visualizar o resultado dos operadores lógicos. Veja a
seguir a tabela verdade do operador ||.

a > 0.2 b < 0.8 a > 0.2 || b < 0.8

V V V
V F V
F V V
F F F
Figura 4.5: Tabela verdade do operador ||

Operador “!”
Valores booleanos podem ser invertidos com o operador de “!” (negação). Por exemplo, podemos
verificar se uma variável numérica armazena um valor maior do que 0.5 de duas formas diferentes.

1 d > .5

1 !( d <= .5)

Pré e Pós Incremento ou Pré e Pós Decremento

Os operadores “++” e “--” podem ser utilizados de duas formas diferentes, antes ou depois de
uma variável numérica.

1 var i = 1,.
.
2 i ++,

www.facebook.com/k19treinamentos 317
J AVA S CRIPT 318

.
3 i - -,

1 var i = 1,.
2 ++ i .,
3 --i .,

No primeiro exemplo, o operador “++” foi utilizado depois da variável i. Já no segundo exemplo,
ele foi utilizado antes da variável i. A primeira forma de utilizar o operador “++” é chamada de pós
incremento. A segunda é chamada de pré incremento. Analogamente, o operador “--” foi utilizado
na forma de pós decremento no primeiro exemplo e pré decremento no segundo exemplo.

Mas, qual é a diferença entre pré incremento e pós incremento ou entre pré decremento e pós
decremento? Vamos apresentar a diferença com alguns exemplos.

1 var i = 1,.
2
3 // true
4 alert ( i ++ == 1) ,.

Observe que o operador “++” foi utilizado nas expressões do exemplo acima em conjunto com
o operador “==”. Como dois operadores foram utilizados na mesma expressão, você pode ter dú-
vida em relação a ordem de execução desses operadores. O incremento com o operador “++” será
realizado antes ou depois da comparação com o operador “==”?

Como o operador “++” foi utilizado na forma de pós incremento, a comparação ocorrerá antes
do incremento. Analogamente, a comparação ocorreria antes do decremento se o operador “--” fosse
utilizado na forma de pós decremento.

Agora, considere a utilização do operador “++” na forma de pré incremento.

1 var i = 1,.
2
3 // false
4 alert (++ i == 1) ,.

Nesse último exemplo, a comparação com o operador “==” é realizada depois do incremento
do operador “++”. Analogamente, a comparação ocorreria depois do decremento se o operador “--”
fosse utilizado na forma de pré decremento.

Pare para pensar...

Considere o comportamento do pré incremento, pós incremento, pré decre-

mento e pós decremento. O que seria exibido nos exemplos abaixo?

1 var i = 1,.
2
3 var j = ++ i + i - -,.
4
5 alert ( j ) ,.

318 www.k19.com.br
319 J AVA S CRIPT

Operador ternário “?:”

Considere um programa que controla as notas dos alunos de uma escola. Para exemplificar, va-
mos 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
ternário.

nota >= 0.5 ? “aprovado” : “reprovado”

Condição Valor 1 Valor 2

Figura 4.6: Operador ternário

Quando a condição(nota >= 0.5) é verdadeira, o operador ternário devolve o primeiro resultado
(“aprovado”). Caso contrário, devolve o segundo resultado(“reprovado”). Podemos guardar o resul-
tado do operador ternário em uma variável ou simplesmente exibi-lo.

1 var resultado = nota >= .5 ? " aprovado " . . " reprovado " .
,
. " reprovado " ) .,
2 alert ( nota >= .5 ? " aprovado " .

Nos exemplos anteriores, o operador ternário 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 >= .5 ? 1 .. 2,

.
2 var d = nota >= .5 ? .1 .. .2,.

Controle de fluxo

if e else
O comportamento de uma aplicação pode ser influenciado por valores definidos pelos usuários.
Por exemplo, considere um sistema de cadastro de produtos. Se um usuário tenta adicionar um
produto com preço negativo, a aplicação não deve cadastrar esse produto. Caso contrário, se o preço
não for negativo, o cadastro pode ser realizado normalmente.

Outro exemplo, quando o pagamento de um boleto é realizado em uma agência bancária, o sis-
tema do banco deve verificar a data de vencimento do boleto para aplicar ou não uma multa por
atraso.

Para verificar uma determinada condição e decidir qual bloco de instruções deve ser executado,
devemos aplicar o comando if.

1 if ( preco < ) {
2 alert ( ’O preço do produto na o pode ser negativo ’) .,

www.facebook.com/k19treinamentos 319
J AVA S CRIPT 320

3 } else {
4 alert ( ’ Produto cadastrado com sucesso ’) .,
5 }

O comando if permite que valores booleanos sejam testados. Se o valor passado como parâmetro
para o comando if for true, o bloco do if é executado. Caso contrário, o bloco do else é executado. O
comando else assim como o seu bloco são opcionais.

while
Em alguns casos, é necessário repetir um determinado trecho de código várias vezes. Por exem-
plo, suponha que seja necessário exibir 5 vezes a mensagem: “Bom Dia”. Podemos resolver essa
tarefa com o seguinte código JavaScript.

1 console . log ( " Bom Dia " ) .,

2 console . log ( " Bom Dia " ) .,
3 console . log ( " Bom Dia " ) .,
4 console . log ( " Bom Dia " ) .,
5 console . log ( " Bom Dia " ) .,

Se ao invés de 5 vezes fosse necessário exibir 100 vezes a mensagem “Bom Dia”, já seriam 100
linhas de código JavaScript. É muito trabalhoso utilizar essa abordagem para solucionar esse pro-
blema.

Através do comando while, é possível executar várias vezes um determinado trecho de código.

1 var contador = ,.

2
3 while ( contador < 1) {
4 console . log ( " Bom Dia " ) .,
5 contador ++,.
6 }

Código Javascript 4.27: while

A variável contador indica o número de vezes que a mensagem “Bom Dia” foi exibida. O operador
++ incrementa a variável contador a cada iteração. O parâmetro do comando while deve ser um valor
booleano.

for
O comando for é análogo ao while. A principal diferença entre esses dois comandos é que o for
recebe três argumentos.

1 for ( var contador = ,. contador < 1,. contador ++) {

2 console . log ( " Bom Dia " ) .,
3 }

Exercícios de Fixação

9 Adicione um arquivo chamado exibe-nome.html no projeto javascript.

320 www.k19.com.br
321 J AVA S CRIPT

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 - nome . js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.8: exibe-nome.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao9.zip

10 Adicione um arquivo chamado exibe-nome.js no projeto javascript.

1 for ( var contador = ,. contador < 1,. contador ++) {

2 console . log ( " Rafael Cosentino " ) .,
3 }

Código Javascript 4.29: exibe-nome.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao1.zip

11 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/exibe-nome.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/exibe-nome.html.

Verifique as mensagens exibidas no console do navegador.

12 Adicione um arquivo chamado exibe-1-ate-100.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 -1 - ate -1. js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.9: exibe-1-ate-100.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao12.zip

13 Adicione um arquivo chamado exibe-1-ate-100.js no projeto javascript.

1 for ( var contador = ,. contador < 1,. contador ++) {

2 console . log ( contador ) ,.

www.facebook.com/k19treinamentos 321
J AVA S CRIPT 322

3 }

Código Javascript 4.30: exibe-1-ate-100.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao13.zip

14 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/exibe-1-ate-1.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/exibe-1-ate-1.html.

Verifique as mensagens exibidas no console do navegador.

15 Percorra todos os números de 1 até 100. Para os números ímpares, exiba no console um “*”, e
para os números pares, dois “**”. Veja o exemplo abaixo:

*
**
*
**
*
**

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 >
1 </ html >

Código HTML 4.10: exibe-padrao-1.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao15.zip

16 Adicione um arquivo chamado exibe-padrao-1.js no projeto javascript.

1 for ( var contador = 1,. contador <= 1,

. contador ++) {
2 var resto = contador % 2,.
3 if ( resto == 1) {
4 console . log ( " * " ) .,
5 } else {
6 console . log ( " ** " ) .,
7 }
8 }

322 www.k19.com.br
323 J AVA S CRIPT

Código Javascript 4.31: exibe-padrao-1.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao16.zip

17 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/exibe-padrao-1.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/exibe-padrao-1.html.

Verifique as mensagens exibidas no console do navegador.

18 Percorra todos os números de 1 até 100. Para os números múltiplos de 4, exiba a palavra “PIN”,
e para os outros, exiba o próprio número. Veja o exemplo abaixo:

1
2
3
PIN
5
6
7
PIN

Adicione um arquivo chamado exibe-padrao-2.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 -2. js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.11: exibe-padrao-2.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao18.zip

19 Adicione um arquivo chamado exibe-padrao-2.js no projeto javascript.

1 for ( var contador = 1,. contador <= 1,

. contador ++) {
2 var resto = contador % 4,.
3 if ( resto == ) {
4 console . log ( " PI " ) .,
5 } else {
6 console . log ( contador ) ,.

www.facebook.com/k19treinamentos 323
J AVA S CRIPT 324

7 }
8 }

Código Javascript 4.32: exibe-padrao-2.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao19.zip

20 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/exibe-padrao-2.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/exibe-padrao-2.html.

Verifique as mensagens exibidas no console do navegador.

Objetos

Um objeto é um conjunto de propriedades. Toda propriedade possui nome e valor. O nome

de uma propriedade pode ser qualquer sequência 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 .. " Orientaça o a Objetos em Java "
.
5 },

Um objeto pode se relacionar com outros objetos através de propriedades. Observe o código
abaixo.

1 var formacaoJava = {
2 sigla .. " K1 " , nome .. " Formaça o Desenvolvedor Java " ,
3 cursos .. [
4 {
5 sigla .. " K11 " ,
6 nome .. " Orientaça o a Objetos em Java "
7 },
8 {
9 sigla .. " K12 " ,
1 nome .. " Desenvolvimento Web com JSF2 e JPA2 "
11 },
12 ]
13 },.

324 www.k19.com.br
325 J AVA S CRIPT

Recuperando o valor de uma propriedade

Para recuperar os valores das propriedades de um objeto, podemos utilizar o operador “.” ou “[]”.
Veja o exemplo a seguir.

1 var curso = {
2 sigla .. " K11 " ,
3 nome .. " Orientaça o a Objetos em Java "
4 .
},
5
6 console . log ( curso . sigla ) ,.
7 console . log ( curso [ " sigla " ]) .,
8
9 var sigla = " sigla " . ,
1 console . log ( curso [ sigla ]) .,

Alterando o valor de uma propriedade

Para alterar o valor de uma propriedade, basta atribuir um novo valor à propriedade do objeto.

1 var curso = {
2 sigla .. " K11 " ,
3 nome .. " Orientaça o a Objetos em Java "
4 .
},
5
6 .
curso . sigla = " K12 " ,
7 curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " .
,
8
9 console . log ( curso . sigla ) ,.
1 console . log ( curso . nome ) .,

Referências
Os objetos são acessados através de referências.

1 var curso = {
2 sigla .. " K11 " ,
3 nome .. " Orientaça o a Objetos em Java "
4 .
},
5
6 // copiando uma refere
 ncia
7 var x = curso .,
8
9 .
x . sigla = " K12 " ,
1 x . nome = " Desenvolvimento Web com JSF2 e JPA2 " .
,
11
12 // imprime K12
13 console . log ( curso . sigla ) .,
14
15 // imprime Desenvolvimento Web com JSF2 e JPA2
16 console . log ( curso . nome ) .,

Protótipos
Podemos criar um objeto baseado em outro objeto existente (protótipo). Para isso, podemos
utilizar a propriedade especial __proto__. Observe o código abaixo.

1 // criando um objeto com duas propriedades

2 var curso = {
3 sigla .. " K11 " ,
4 nome .. " Orientaça o a Objetos em Java "

www.facebook.com/k19treinamentos 325
J AVA S CRIPT 326

5 .
},
6
7 // criando um objeto sem propriedades
8 .
var novo_curso = {},
9
1 // definindo o primeiro objeto como proto
 tipo do segundo
11 novo_curso . __proto__ = curso .,
12
13 // imprime K11
14 console . log ( novo_curso . sigla ) ,.
15
16 // imprime Orientaça o a Objetos em Java
17 console . log ( novo_curso . nome ) ,.

Também podemos utilizar o método create de Object para criar objetos baseados em objetos
existentes. Veja o exemplo abaixo.

1 // criando um objeto com duas propriedades

2 var curso = {
3 sigla .. " K11 " ,
4 nome .. " Orientaça o a Objetos em Java "
5 .
},
6
7 // criando um objeto sem propriedades
8 .
var novo_curso = {},
9
1 // definindo o primeiro objeto como proto  tipo do segundo
11 novo_curso = Object . create ( curso ) .,
12
13 // imprime K11
14 console . log ( novo_curso . sigla ) ,.
15
16 // imprime Orientaça o a Objetos em Java
17 console . log ( novo_curso . nome ) ,.

Se uma propriedade for adicionada a um objeto, ela também será adicionada a todos os objetos
que o utilizam como protótipo.

1 var curso = {
2 sigla .. " K11 " ,
3 nome .. " Orientaça o a Objetos em Java "
4 .
},
5
6 var novo_curso = Object . create ( curso ) .,
7
8 .
curso . carga_horaria = 36,
9
1 // imprime K11
11 console . log ( novo_curso . sigla ) ,.
12
13 // imprime Orientaça o a Objetos em Java
14 console . log ( novo_curso . nome ) ,.
15
16 // imprime 36
17 console . log ( novo_curso . carga_horaria ) ,.

Por outro lado, se uma propriedade for adicionada a um objeto, ela não será adicionada no pro-
tótipo desse objeto.

1 var curso = {
2 sigla .. " K11 " ,
3 nome .. " Orientaça o a Objetos em Java "
.
4 },
5

326 www.k19.com.br
327 J AVA S CRIPT

6 var novo_curso = Object . create ( curso ) .,

7
8 novo_curso . carga_horaria = 36,.
9
1 // imprime K11
11 console . log ( curso . sigla ) .,
12
13 // imprime Orientaça o a Objetos em Java
14 console . log ( curso . nome ) .,
15
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
protótipo podem ser afetados.

1 var curso = {
2 sigla .. " K11 " ,
3 nome .. " Orientaça o a Objetos em Java "
4 .
},
5
6 var novo_curso = Object . create ( curso ) .,
7
8 curso . sigla = " K12 " .
,
9 .
curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " ,
1
11 // imprime K12
12 console . log ( novo_curso . sigla ) ,.
13
14 // imprime Desenvolvimento Web com JSF2 e JPA2
15 console . log ( novo_curso . nome ) ,.

Por outro lado, alterações nos valores das propriedades de um objeto não afetam o protótipo
desse objeto.

1 var curso = {
2 sigla .. " K11 " ,
3 nome .. " Orientaça o a Objetos em Java "
4 .
},
5
6 var novo_curso = Object . create ( curso ) .,
7
8 novo_curso . sigla = " K12 " .
,
9 .
novo_curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " ,
1
11 // imprime K11
12 console . log ( curso . sigla ) .,
13
14 // imprime Orientaça o a Objetos em Java
15 console . log ( curso . nome ) .,

Considere um objeto que foi construído a partir de um protótipo. Se o valor de uma propriedade
herdada do protótipo for alterada nesse objeto, ela se torna independente da propriedade no protó-
tipo. Dessa forma, alterações no valor dessa propriedade no protótipo não afetam mais o valor dela
no objeto gerado a partir do protótipo.

1 var curso = {
2 sigla .. " K11 " ,
3 nome .. " Orientaça o a Objetos em Java "
.
4 },
5
6 var novo_curso = Object . create ( curso ) .,
7

www.facebook.com/k19treinamentos 327
J AVA S CRIPT 328

8 .
novo_curso . sigla = " K12 " ,
9 novo_curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " .
,
1
11 .
curso . sigla = " K21 " ,
12 curso . nome = " Persiste  ncia com JPA2 e Hibernate " .
,
13
14 // imprime K12
15 console . log ( novo_curso . sigla ) ,.
16
17 // imprime Desenvolvimento Web com JSF2 e JPA2
18 console . log ( novo_curso . nome ) ,.

Removendo uma Propriedade

Podemos remover uma propriedade de um objeto com a função delete.

1 var curso = {
2 sigla .. " K11 " ,
3 nome .. " Orientaça o a Objetos em Java "
4 .
},
5
6 // imprime K11
7 console . log ( curso . sigla ) ,.
8
9 delete curso . sigla .,
1
11 // imprime undefined
12 console . log ( curso . sigla ) .,

Verificando a Existência de uma Propriedade

Podemos verificar se uma propriedade existe, podemos utilizar a função in.

1 var curso = {
2 sigla .. " K11 " ,
3 nome .. " Orientaça o a Objetos em Java "
4 .
},
5
6 // imprime true
7 console . log ( " sigla " in curso ) ,.
8
9 // imprime false
1 console . log ( " carga_horaria " in curso ) ,.

Exercícios de Fixação

21 Adicione um arquivo chamado objetos.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 = " objetos . js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

328 www.k19.com.br
329 J AVA S CRIPT

Código HTML 4.12: objetos.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao21.zip

22Adicione 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.

1 var curso = { sigla .. " K11 " , nome .. " Orientaça o a Objetos em Java " },
.
2 console . log ( curso . sigla ) ,.
3 console . log ( curso . nome ) ,.
4
5 var curso2 = { sigla .. " K12 " , nome .. " Desenvolvimento Web com JSF2 e JPA2 " },
.
6 console . log ( curso2 . sigla ) ,.
7 console . log ( curso2 . nome ) ,.

Código Javascript 4.47: objetos.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao22.zip

23 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/objetos.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/objetos.html.

Verifique as mensagens exibidas no console do navegador.

24 Adicione um arquivo chamado referencias.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 = " referencias . js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.13: referencias.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao24.zip

25 Adicione um arquivo chamado referencias.js no projeto javascript.

1 var curso = { sigla .. " K11 " , nome .. " Orientaça o a Objetos em Java " },
.
2
3 // exibe K11
4 console . log ( curso . sigla ) ,.
5
6 // exibe Orientaça o a Objetos em Java
7 console . log ( curso . nome ) ,.

www.facebook.com/k19treinamentos 329
J AVA S CRIPT 330

8
9 var x = curso .,
1
11 .
x . sigla = " K12 " ,
12 x . nome = " Desenvolvimento Web com JSF2 e JPA2 " .
,
13
14 // exibe K12
15 console . log ( curso . sigla ) .,
16
17 // exibe Desenvolvimento Web com JSF2 e JPA2
18 console . log ( curso . nome ) .,

Código Javascript 4.48: referencias.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao25.zip

26 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/referencias.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/referencias.html.

Verifique as mensagens exibidas no console do navegador.

27 Adicione um arquivo chamado prototype.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 = " prototype . js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.14: prototype.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao27.zip

28 Adicione um arquivo chamado prototype.js no projeto javascript. Crie um objeto a partir de

outro objeto existente.

1 var curso = { sigla .. " K11 " , nome .. " Orientaça o a Objetos em Java " },
.
2
3 var novo_curso = Object . create ( curso ) .,
4
5 // exibe K11
6 console . log ( novo_curso . sigla ) .,
7
8 // exibe Orientaça o a Objetos em Java
9 console . log ( novo_curso . nome ) .,

Código Javascript 4.49: prototype.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao28.zip

330 www.k19.com.br
331 J AVA S CRIPT

29 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/prototype.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/prototype.html.

Verifique as mensagens exibidas no console do navegador.

30 Adicione um arquivo chamado propriedade-1.html no projeto javascript. Defina uma propri-

edade em um objeto utilizado como protótipo e verifique que essa propriedade será adicionada nos
objetos criados a partir desse protótipo.

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 = " propriedade -1. js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.15: propriedade-1.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao3.zip

31 Adicione um arquivo chamado propriedade-1.js no projeto javascript.

1 var curso = { sigla .. " K11 " , nome .. " Orientaça o a Objetos em Java " },
.
2
3 var novo_curso = Object . create ( curso ) .,
4
5 curso . carga_horaria = 36,.
6
7 // exibe K11
8 console . log ( novo_curso . sigla ) .,
9
1 // exibe Orientaça o a Objetos em Java
11 console . log ( novo_curso . nome ) ,.
12
13 // exibe 36
14 console . log ( novo_curso . carga_horaria ) ,.

Código Javascript 4.50: propriedade-1.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao31.zip

32 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/propriedade-1.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/propriedade-1.html.

www.facebook.com/k19treinamentos 331
J AVA S CRIPT 332

Verifique as mensagens exibidas no console do navegador.

33 Adicione um arquivo chamado propriedade-2.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 = " propriedade -2. js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.16: propriedade-2.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao33.zip

34Adicione um arquivo chamado propriedade-2.js no projeto javascript. Defina uma propriedade

em um objeto e verifique que o protótipo desse objeto não é afetado.

1 var curso = { sigla .. " K11 " , nome .. " Orientaça o a Objetos em Java " },
.
2
3 var novo_curso = Object . create ( curso ) .,
4
5 .
novo_curso . carga_horaria = 36,
6
7 // exibe K11
8 console . log ( curso . sigla ) ,.
9
1 // exibe Orientaça o a Objetos em Java
11 console . log ( curso . nome ) .,
12
13 // exibe undefined
14 console . log ( curso . carga_horaria ) .,

Código Javascript 4.51: propriedade-2.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao34.zip

35 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/propriedade-2.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/propriedade-2.html.

Verifique as mensagens exibidas no console do navegador.

36 Adicione um arquivo chamado propriedade-3.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 " >

332 www.k19.com.br
333 J AVA S CRIPT

5 < title > K19 - JavaScript </ title >

6 < script type = " text / javascript " src = " propriedade -3. js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.17: propriedade-3.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao36.zip

37 Adicione um arquivo chamado propriedade-3.js no projeto javascript. Altere o valor de uma

propriedade de um objeto utilizado como protótipo e verifique que essa alteração afetará os objetos
criados a partir desse protótipo.

1 var curso = { sigla .. " K11 " , nome .. " Orientaça o a Objetos em Java " },
.
2
3 var novo_curso = Object . create ( curso ) .,
4
5 // exibe K11
6 console . log ( novo_curso . sigla ) .,
7
8 // exibe Orientaça o a Objetos em Java
9 console . log ( novo_curso . nome ) .,
1
11 curso . sigla = " K12 " .
,
12 curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " .
,
13
14 // exibe K12
15 console . log ( novo_curso . sigla ) ,.
16
17 // exibe Desenvolvimento Web com JSF2 e JPA2
18 console . log ( novo_curso . nome ) ,.

Código Javascript 4.52: propriedade-3.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao37.zip

38 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/propriedade-3.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/propriedade-3.html.

Verifique as mensagens exibidas no console do navegador.

39 Adicione um arquivo chamado propriedade-4.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 = " propriedade -4. js " > </ script >
7 </ head >
8 < body >
9 </ body >

www.facebook.com/k19treinamentos 333
J AVA S CRIPT 334

1 </ html >

Código HTML 4.18: propriedade-4.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao39.zip

40 Adicione um arquivo chamado propriedade-4.js no projeto javascript. Reescreva em um objeto

as propriedades herdadas de um protótipo e verifique que alterações nos valores dessas proprieda-
des no protótipo não afetam mais os valores delas nesse objeto.

1 var curso = { sigla .. " K11 " , nome .. " Orientaça o a Objetos em Java " },
.
2
3 var novo_curso = Object . create ( curso ) .,
4
5 .
novo_curso . sigla = " K12 " ,
6 novo_curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " .
,
7
8 // exibe K12
9 console . log ( novo_curso . sigla ) .,
1
11 // exibe Desenvolvimento Web com JSF2 e JPA2
12 console . log ( novo_curso . nome ) ,.
13
14 .
curso . sigla = " K21 " ,
15 curso . nome = " Persiste  ncia com JPA2 e Hibernate " .
,
16
17 // exibe K12
18 console . log ( novo_curso . sigla ) ,.
19
2 // exibe Desenvolvimento Web com JSF2 e JPA2
21 console . log ( novo_curso . nome ) ,.

Código Javascript 4.53: propriedade-4.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao4.zip

41 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/propriedade-4.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/propriedade-4.html.

Verifique as mensagens exibidas no console do navegador.

Funções

As funções em JavaScript são objetos. Você pode armazená-las em variáveis, arrays e outros ob-
jetos. Elas podem ser passadas como argumento ou devolvidas por outra função. Veja o exemplo
abaixo.

1 var multiplicacao = function (x , y ) {

2 return x * y ,.
3 }

334 www.k19.com.br
335 J AVA S CRIPT

Código Javascript 4.54: Uma forma de criar uma função

1 function multiplicacao (x , y ) {
2 return x * y ,.
3 }

Código Javascript 4.55: Outra forma de criar uma função

Utilizando uma Função

Para utilizar a função multiplicacao, podemos chamá-la da seguinte forma.

1 var resultado = multiplicaça o (3 ,2) ,.

Código Javascript 4.56: Utilizando a função

Método
Quando uma função faz parte de um objeto, ela é chamada de método. Para executar um método,
devemos utilizar a referência de um objeto e passar os parâmetros necessários. Observe o código
abaixo.

1 var conta = {
2 saldo ..  ,
3 deposita .. function ( valor ) {
4 this . saldo += valor ,.
5 }
6 }
7
8 conta . deposita (1) .,
9 console . log ( conta . saldo ) ,.

Código Javascript 4.57: Método

Apply
Uma função pode ser associada momentaneamente a um objeto e executada através do método
apply.

1 var deposita = function ( valor ) {

2 this . saldo += valor ,.
3 }
4
5 var conta = {
6 saldo .. 
7 }
8
9 deposita . apply ( conta , [2]) .,
1 console . log ( conta . saldo ) .,

Código Javascript 4.58: Método apply

Arguments
Os argumentos passados na chamada de uma função podem ser recuperados através do array
Arguments. Inclusive, esse array permite que os argumentos excedentes sejam acessados.

www.facebook.com/k19treinamentos 335
J AVA S CRIPT 336

1 var soma = function () {

2 .
var soma = ,
3
4 for ( var i = ,. i < arguments . length ., i ++) {
5 soma += arguments [ i ],.
6 }
7
8 return soma ,.
9 }
1
11 var resultado = soma (2 ,4 ,5 ,6 ,1) .,
12
13 console . log ( resultado ) ,.

Código Javascript 4.59: Arguments

Exercícios de Fixação

42 Adicione um arquivo chamado multiplicacao.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 = " multiplicacao . js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.19: multiplicacao.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao42.zip

43 Adicione um arquivo chamado multiplicacao.js no projeto javascript.

1 var multiplicacao = function (x , y ) {

2 return x * y ,.
3 .
},
4
5 var resultado = multiplicacao (5 , 3) ,.
6
7 console . log ( resultado ) ,.

Código Javascript 4.60: multiplicacao.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao43.zip

44 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/multiplicacao.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

336 www.k19.com.br
337 J AVA S CRIPT

http..//localhost/~<USUARIO>/javascript/public_html/multiplicacao.html.

Verifique as mensagens exibidas no console do navegador.

45 Adicione um arquivo chamado metodos.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 = " metodos . js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.20: metodos.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao45.zip

46 Adicione um arquivo chamado metodos.js no projeto javascript.

1 var conta = {
2 saldo ..  ,
3 deposita .. function ( valor ) {
4 this . saldo += valor ,.
5 }
6 .
},
7
8 conta . deposita (5) .,
9
1 console . log ( conta . saldo ) .,

Código Javascript 4.61: metodos.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao46.zip

47 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/metodos.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/metodos.html.

Verifique as mensagens exibidas no console do navegador.

48 Adicione um arquivo chamado soma.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 = " soma . js " > </ script >
7 </ head >

www.facebook.com/k19treinamentos 337
J AVA S CRIPT 338

8 < body >

9 </ body >
1 </ html >

Código HTML 4.21: soma.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao48.zip

49 Adicione um arquivo chamado soma.js no projeto javascript.

1 var soma = function () {

2 .
var soma = ,
3
4 for ( var i = ,. i < arguments . length ., i ++) {
5 soma += arguments [ i ],.
6 }
7
8 return soma ,.
9 .
},
1
11 var resultado = soma (2 ,4 ,5 ,6 ,1) .,
12
13 console . log ( resultado ) ,.

Código Javascript 4.62: soma.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao49.zip

50 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/soma.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/soma.html.

Verifique as mensagens exibidas no console do navegador.

Arrays

A linguagem Javascript provê um objeto com características semelhantes a um array. Esse tipo
de objeto pode ser criado de forma literal com a sintaxe JSON.

1 var vazio = [],.

2 .
var cursos = [ " K1 " ," K2 " ," K3 " ],
3
4 console . log ( vazio []) .,
5 // undefined
6
7 console . log ( cursos []) ,.
8 // K1
9
1 console . log ( vazio . length ) .,
11 // 
12
13 console . log ( cursos . length ) .,
14 // 3

338 www.k19.com.br
339 J AVA S CRIPT

Percorrendo um Array
Para percorrer um array, podemos utilizar o comando for.

.
1 var cursos = [ " K1 " ," K2 " ," K3 " ],
2
3 for ( var i = ,. i < cursos . length ., i ++) {
4 console . log ( cursos [ i ]) ,.
5 }

Adicionando Elementos
Para adicionar um elemento no final de um array, podemos utilizar a propriedade length.

1 .
var cursos = [ " K1 " ," K2 " ],
2
3 .
cursos [ cursos . length ] = " K3 " ,
4 // [" K1 " , " K2 " , " K3 "]
5
6 for ( var i = ,. i < cursos . length ., i ++) {
7 console . log ( cursos [ i ]) ,.
8 }

Também podemos utilizar o método push().

1 .
var cursos = [ " K1 " ," K2 " ],
2
3 cursos . push ( " K3 " ) .,
4 // [" K1 " , " K2 " , " K3 "]
5
6 for ( var i = ,. i < cursos . length ., i ++) {
7 console . log ( cursos [ i ]) ,.
8 }

Removendo Elementos
O método delete() permite remover elementos de um array.

1 .
var cursos = [ " K1 " , " K2 " , " K3 " ],
2
3 delete cursos [], .
4 // [ undefined , " K2 " , " K3 "]
5
6 for ( var i = ,. i < cursos . length ., i ++) {
7 console . log ( cursos [ i ]) ,.
8 }

Concatenando Arrays
O método concat() permite concatenar dois arrays.

1 .
var formacaoBasica = [ " K1 " , " K2 " , " K3 " ],
2 .
var formacaoJava = [ " K11 " , " K12 " ],
3
4 var formacaoCompleta = formacaoBasica . concat ( formacaoJava ) ,.
5 // [" K1 " , " K2 " , " K3 " , " K11 " , " K12 "]
6
7 for ( var i = ,. i < formacaoCompleta . length ., i ++) {
8 console . log ( formacaoCompleta [ i ]) ,.
9 }

www.facebook.com/k19treinamentos 339
J AVA S CRIPT 340

Gerando uma String com os Elementos de um Array

O método join() cria uma string a partir de um array.

1 .
var formacaoJava = [ " K11 " , " K12 " ],
2
3 var resultado = formacaoJava . join ( " ," ) .,
4 // K11 , K12
5
6 console . log ( resultado ) ,.

Removendo o Último Elemento

O método pop() remove e retorna o último elemento.

1 .
var cursos = [ " K1 " , " K2 " , " K3 " ],
2
3 var curso = cursos . pop () .,
4 // [" K1 " , " K2 "]
5
6 console . log ( " Elemento removido .. " + curso ) ,.
7
8 for ( var i = ,. i < cursos . length ., i ++) {
9 console . log ( cursos [ i ]) ,.
1 }

Invertendo os Elementos de um Array

O método reverse() inverte a ordem dos elementos de um array.

1 .
var cursos = [ " K1 " , " K2 " , " K3 " ],
2
3 cursos . reverse () ,.
4 // [" K3 " , " K2 " , " K1 "]
5
6 for ( var i = ,. i < cursos . length ., i ++) {
7 console . log ( cursos [ i ]) ,.
8 }

Removendo o Primeiro Elemento

O método shift() remove e retorna o primeiro elemento de um array.

1 .
var cursos = [ " K1 " , " K2 " , " K3 " ],
2
3 var curso = cursos . shift () ,.
4 // [" K2 " , " K3 "]
5
6 console . log ( " Elemento removido .. " + curso ) ,.
7
8 for ( var i = ,. i < cursos . length ., i ++) {
9 console . log ( cursos [ i ]) ,.
1 }

Copiando um Trecho de um Array

O método slice() cria uma cópia de uma porção de um array.

.
1 var cursos = [ " K1 " , " K2 " , " K3 " , " K11 " , " K12 " ],
2

340 www.k19.com.br
341 J AVA S CRIPT

3 var formacaoBasica = cursos . slice ( , 3) .,

4 // [" K1 " , " K2 " , " K3 "]
5
6 for ( var i = ,. i < formacaoBasica . length ,. i ++) {
7 console . log ( formacaoBasica [ i ]) ,.
8 }

Removendo e Adicionando Elementos em um Array

O método splice() permite remover elementos do array e adicionar novos elementos.

1 .
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ],
2
3 cursos . splice (2 , 3 , " K31 " , " K32 " ) .,
4 // [" K11 " , " K12 " , " K31 " , " K32 "]
5
6 for ( var i = ,. i < cursos . length ., i ++) {
7 console . log ( cursos [ i ]) ,.
8 }

Adicionando um Elemento na Primeira Posição

O método unshift() adiciona elementos na primeira posição de um array.

1 .
var cursos = [ " K12 " ," K21 " ," K22 " ," K23 " ],
2
3 cursos . unshift ( " K11 " ) .,
4 // [" K11 " , " K12 " , " K21 " , " K22 " , " K23 "]
5
6 for ( var i = ,. i < cursos . length ., i ++) {
7 console . log ( cursos [ i ]) ,.
8 }

Strings

Acessando os Caracteres de uma String por Posição

O método charAt() retorna o caractere na posição especificada.

1 var curso = " K12 " . ,

2
3 console . log ( curso . charAt () ) .,

Recuperando um Trecho de uma String

O método slice() retorna uma porção de uma string.

.
1 var curso = " K12 - Desenvolvimento Web com JSF2 e JPA2 " ,
2
3 console . log ( curso . slice ( ,3) ) .,

Dividindo uma String

O método split() cria uma array de strings a partir de um separador.

www.facebook.com/k19treinamentos 341
J AVA S CRIPT 342

1 var curso = " K12 - Desenvolvimento Web com JSF2 e JPA2 " .
,
2 var aux = curso . split ( " -" ) .,
3
4 console . log ( aux []) .,
5 console . log ( aux [1]) .,

Exercícios de Fixação

51 Adicione um arquivo chamado array-length.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 = " array - length . js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.22: array-length.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao51.zip

52 Adicione um arquivo chamado array-length.js no projeto javascript.

1 var vazio = [],.

2 .
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ," K31 " ," K32 " ],
3
4 console . log ( vazio []) .,
5 console . log ( cursos []) ,.
6
7 console . log ( vazio . length ) ,.
8 console . log ( cursos . length ) .,

Código Javascript 4.79: array-length.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao52.zip

53 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/array-length.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/array-length.html.

Verifique as mensagens exibidas no console do navegador.

54 Adicione um arquivo chamado array-elementos.html no projeto javascript.

1 <! DOCTYPE html >

342 www.k19.com.br
343 J AVA S CRIPT

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 = " array - elementos . js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.23: array-elementos.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao54.zip

55 Adicione um arquivo chamado array-elementos.js no projeto javascript.

.
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ," K31 " ," K32 " ],
2 for ( var i = ,. i < cursos . length ., i ++) {
3 console . log ( cursos [ i ]) ,.
4 }

Código Javascript 4.80: array-elementos.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao55.zip

56 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/array-elementos.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/array-elementos.html.

Verifique as mensagens exibidas no console do navegador.

57 Adicione um arquivo chamado array-add.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 = " array - add . js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.24: array-add.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao57.zip

58 Adicione um arquivo chamado array-add.js no projeto javascript.

.
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ," K31 " ," K32 " ],
2
.
3 cursos [ cursos . length ] = " K1 " ,

www.facebook.com/k19treinamentos 343
J AVA S CRIPT 344

4
5 for ( var i = ,. i < cursos . length ., i ++) {
6 console . log ( cursos [ i ]) ,.
7 }

Código Javascript 4.81: array-add.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao58.zip

59 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/array-add.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/array-add.html.

Verifique as mensagens exibidas no console do navegador.

60 Adicione um arquivo chamado array-push.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 = " array - push . js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.25: array-push.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao6.zip

61 Adicione um arquivo chamado array-push.js no projeto javascript.

1 .
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ," K31 " ," K32 " ],
2
3 cursos . push ( " K1 " ) .,
4
5 for ( var i = ,. i < cursos . length ., i ++) {
6 console . log ( cursos [ i ]) ,.
7 }

Código Javascript 4.82: array-push.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao61.zip

62 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/array-push.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

344 www.k19.com.br
345 J AVA S CRIPT

http..//localhost/~<USUARIO>/javascript/public_html/array-push.html.

Verifique as mensagens exibidas no console do navegador.

63 Adicione um arquivo chamado array-concat.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 = " array - concat . js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.26: array-concat.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao63.zip

64 Adicione um arquivo chamado array-concat.js no projeto javascript.

1 .
var formacaoJava = [ " K11 " ," K12 " ],
2 .
var formacaoJavaAvancado = [ " K21 " ," K22 " ," K23 " ],
3
4 var formacaoCompleta = formacaoJava . concat ( formacaoJavaAvancado ) .,
5
6 for ( var i = ,. i < formacaoCompleta . length ., i ++) {
7 console . log ( formacaoCompleta [ i ]) ,.
8 }

Código Javascript 4.83: array-concat.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao64.zip

65 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/array-concat.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/array-concat.html.

Verifique as mensagens exibidas no console do navegador.

66 Adicione um arquivo chamado array-pop.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 = " array - pop . js " > </ script >
7 </ head >
8 < body >
9 </ body >

www.facebook.com/k19treinamentos 345
J AVA S CRIPT 346

1 </ html >

Código HTML 4.27: array-pop.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao66.zip

67 Adicione um arquivo chamado array-pop.js no projeto javascript.

.
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ],
2
3 var curso = cursos . pop () .,
4
5 console . log ( curso ) .,

Código Javascript 4.84: array-pop.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao67.zip

68 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/array-pop.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/array-pop.html.

Verifique as mensagens exibidas no console do navegador.

69 Adicione um arquivo chamado array-reverse.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 = " array - reverse . js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.28: array-reverse.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao69.zip

70 Adicione um arquivo chamado array-reverse.js no projeto javascript.

1 .
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ],
2
3 cursos . reverse () ,.
4
5 for ( var i = ,. i < cursos . length ., i ++) {
6 console . log ( cursos [ i ]) ,.
7 }

Código Javascript 4.85: array-reverse.js

346 www.k19.com.br
347 J AVA S CRIPT

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao7.zip

71 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/array-reverse.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/array-reverse.html.

Verifique as mensagens exibidas no console do navegador.

72 Adicione um arquivo chamado array-shift.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 = " array - shift . js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.29: array-shift.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao72.zip

73 Adicione um arquivo chamado array-shift.js no projeto javascript.

1 .
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ],
2
3 var curso = cursos . shift () ,.
4
5 console . log ( " Elemento removido .. " + curso ) ,.
6
7 for ( var i = ,. i < cursos . length ., i ++) {
8 console . log ( cursos [ i ]) ,.
9 }

Código Javascript 4.86: array-shift.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao73.zip

74 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/array-shift.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/array-shift.html.

Verifique as mensagens exibidas no console do navegador.

www.facebook.com/k19treinamentos 347
J AVA S CRIPT 348

75 Adicione um arquivo chamado array-slice.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 = " array - slice . js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.30: array-slice.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao75.zip

76 Adicione um arquivo chamado array-slice.js no projeto javascript.

1 .
var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ],
2
3 var formacaoJava = cursos . slice ( ,2) ,.
4
5 for ( var i = ,. i < formacaoJava . length ,. i ++) {
6 console . log ( formacaoJava [ i ]) .,
7 }

Código Javascript 4.87: array-slice.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao76.zip

77 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/array-slice.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/array-slice.html.

Verifique as mensagens exibidas no console do navegador.

78 Adicione um arquivo chamado array-unshift.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 = " array - unshift . js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.31: array-unshift.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao78.zip

348 www.k19.com.br
349 J AVA S CRIPT

79 Adicione um arquivo chamado array-unshift.js no projeto javascript.

1 .
var cursos = [ " K12 " ," K21 " ," K22 " ," K23 " ],
2
3 cursos . unshift ( " K11 " ) .,
4
5 for ( var i = ,. i < cursos . length ., i ++) {
6 console . log ( cursos [ i ]) ,.
7 }

Código Javascript 4.88: array-unshift.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao79.zip

80 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/array-unshift.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/array-unshift.html.

Verifique as mensagens exibidas no console do navegador.

81 Adicione um arquivo chamado array-split.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 = " array - split . js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.32: array-split.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao81.zip

82 Adicione um arquivo chamado array-split.js no projeto javascript.

1 .
var curso = " K12 - Desenvolvimento Web com JSF2 e JPA2 " ,
2 var aux = curso . split ( " -" ) .,
3
4 console . log ( aux []) .,
5 console . log ( aux [1]) .,

Código Javascript 4.89: array-split.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao82.zip

83 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/array-split.html.

www.facebook.com/k19treinamentos 349
J AVA S CRIPT 350

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/array-split.html.

Verifique as mensagens exibidas no console do navegador.

DOM - Document Object Model

Os documentos HTML assim como os seus elementos são representados por objetos JavaScript.
Podemos acessar o objeto que representa o documento HTML atual através da variável document.
Os objetos que representam os elementos do documento HTML atual podem ser acessados através
dessa variável.

Recuperando elementos

• Podemos buscar elementos HTML por ID através do método getElementById. Esse método
devolve null se não existir elemento HTML com o identificador desejado.

1 var elemento = document . getElementById ( " conteudo " ) .,

• Podemos buscar elementos HTML pelo valor do atributo name através do método getEle-
mentsByName. Esse método devolve um array com os elementos recuperados.

1 var array = document . getElementsByName ( " categoria " ) .,

• Podemos buscar elementos HTML de um determinado tipo através do método getElementsBy-

TagName. Esse método devolve um array com os elementos recuperados.

1 var array = document . getElementsByTagName ( " p " ) .,

• Podemos buscar elementos HTML pelo valor do atributo class através do método getElementsBy-
ClassName. Esse método devolve um array com os elementos recuperados.

1 var array = document . getElementsByClassName ( " confirmado " ) .,

• Podemos buscar elementos HTML utilizando seletores CSS através dos métodos querySelec-
tor e querySelectorAll. O primeiro método devolve o primeiro elemento compatível com o
seletor CSS passado como parâmetro. O segundo método devolve um array com todos os ele-
mentos compatíveis com o seletor CSS passado como parâmetro.

1 var elemento = document . querySelector ( " div . aprovado " ) .,

2 var array = document . querySelectorAll ( " div . aprovado " ) .,

• Podemos acessar os atributos de um elemento HTML através do método getAttribute. Esse

método recebe como parâmetro o nome do atributo desejado e devolve null ou “”(string vazia)
se o atributo não existir.

1 var valor = elemento . getAttribute ( " type " ) .,

• Também podemos acessar os atributos de um elemento HTML através da propriedade attri-

butes.

350 www.k19.com.br
351 J AVA S CRIPT

1 for ( var i = ,. i < elemento . attributes . length - 1, . i ++) {

2 console . log ( elemento . attributes [ i ]. name + " = " + elemento . attributes [ i ]. value ) ,.
3 }

• Podemos acessar o conteúdo de um elemento HTML através da propriedade innerHTML. Essa

propriedade armazena o conteúdo dos elementos HTML em forma de string.

1 var conteudo = elemento . innerHTML ,.

Alterando elementos

• Podemos modificar os atributos de um elemento HTML através do método setAttribute.

1 elemento . setAttribute ( " type " , " text " ) .,

• Podemos modificar o estilo de um elemento HTML através da propriedade style.

1 elemento . style . color = " red " .

,

As propriedades com nome composto devem seguir a convenção Camel Case.

1 elemento . style . borderColor = " red " .

,

• Podemos modificar o conteúdo de um elemento HTML através da propriedade innerHTML.

1 elemento . innerHTML = " Acesse <a href = ’ http .. // www . k19 . com . br ’> K19 </ a > " ,
.

Removendo elementos

• Podemos remover um elemento HTML através do método remove.

1 var elemento = document . getElementById ( " conteudo " ) .,

2 elemento . remove () ,.

• Podemos remover um elemento HTML através do seu pai.

1 var elemento = document . getElementById ( " conteudo " ) .,

2 elemento . parentNode . removeChild ( elemento ) ,.

Adicionando elementos

• Podemos criar um elemento HTML através do método createElement e adicioná-lo em um

documento HTML através do método appendChild.

1 var titulo = document . createElement ( " h1 " ) .,

2 .
titulo . innerHTML = " K19 Treinamentos " ,
3 var elemento = document . getElementById ( " conteudo " ) .,
4 elemento . appendChild ( titulo ) .,

• Também podemos adicionar um elemento HTML em um documento HTML através do mé-

todo insertBefore.

www.facebook.com/k19treinamentos 351
J AVA S CRIPT 352

1 var titulo = document . createElement ( " h1 " ) .,

2 .
titulo . innerHTML = " Cursos K19 " ,
3
4 var conteudo = document . getElementById ( " conteudo " ) .,
5 var tabela = conteudo . getElementById ( " tabela - de - cursos " ) .,
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 métodos. Para saber mais sobre essas proprie-
dade e esses métodos, recomendamos a consulta aos seguintes endereços:

.//developer.mozilla.org/en-US/docs/Web/API/Document
• https.
.//developer.mozilla.org/en-US/docs/Web/API/element
• https.

Exercícios de Fixação

84 Adicione um arquivo chamado DOM.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 </ head >
7 < body >
8 < h1 id = " titulo " class = " centralizado " > K19 - JavaScript </ h1 >
9
1 < form id = " formulario " action = " # " >
11 < label for = " esporte " > Esporte .. </ label >
12 < input id = " esporte " type = " checkbox " name = " categoria " >
13
14  tica .. </ label >
< label for = " politica " > Pol
15 < input id = " politica " type = " checkbox " name = " categoria " >
16
17 < label for = " economia " > Economia .. </ label >
18 < input id = " economia " type = " checkbox " name = " categoria " >
19
2 < label for = " entretenimento " > Entretenimento .. </ label >
21 < input id = " entretenimento " type = " checkbox " name = " categoria " >
22 </ form >
23
24 < script type = " text / javascript " src = " DOM . js " > </ script >
25 </ body >
26 </ html >

Código HTML 4.33: DOM.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao84.zip

85 Adicione um arquivo chamado DOM.js no projeto javascript.

352 www.k19.com.br
353 J AVA S CRIPT

1 var titulo = document . getElementById ( " titulo " ) .,

2 console . log ( titulo . tagName + " .. " + titulo . innerHTML ) .,
3
4 var array = document . getElementsByName ( " categoria " ) .,
5 for ( var i = ,. i < array . length ,. i ++) {
6 console . log ( array [ i ]. tagName + " .. " + array [ i ]. id ) ,.
7 }
8
9 array = document . getElementsByTagName ( " label " ) .,
1 for ( var i = ,. i < array . length ,. i ++) {
11 console . log ( array [ i ]. tagName + " .. " + array [ i ]. getAttribute ( " for " ) ) .,
12 }
13
14 array = document . getElementsByClassName ( " centralizado " ) .,
15 for ( var i = ,. i < array . length ,. i ++) {
16 console . log ( array [ i ]. tagName + " .. " + array [ i ]. id ) ,.
17 }
18
19 var formulario = document . querySelector ( " body > form " ) .,
2 console . log ( formulario . tagName + " .. " + formulario . getAttribute ( " action " ) ) .,
21
22 array = document . querySelectorAll ( " label " ) .,
23 for ( var i = ,. i < array . length ,. i ++) {
24 console . log ( array [ i ]. tagName + " .. " + array [ i ]. getAttribute ( " for " ) ) .,
25 }

Código Javascript 4.106: DOM.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao85.zip

86 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/DOM.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/DOM.html.

Verifique as mensagens exibidas no console do navegador.

87 No console do navegador, execute os seguintes comandos um de cada vez e observe o resultado.

1 var titulo = document . getElementById ( " titulo " ) .,

2
3 .
titulo . style . color = " red " ,
4
5 titulo . innerHTML = " K19 - JavaScript - DOM " .
,
6
7 titulo . remove () ,.
8
9 var body = document . querySelector ( " body " ) .,
1
11 var form = document . getElementById ( " formulario " ) .,
12
13 body . insertBefore ( titulo , form ) .,

Eventos

www.facebook.com/k19treinamentos 353
J AVA S CRIPT 354

A interatividade entres as páginas web e os usuários depende fortemente dos eventos que podem
ser reconhecidos pelos navegadores. Por exemplo, atualmente, os navegadores são capazes de iden-
tificar o movimento do mouse, a digitação do usuário, a finalização do carregamento de uma página
web, o redimensionamento da janela, entre outros eventos.

Há uma quantidade muito grande de eventos que podem ser reconhecidos pelos navegadores.
Recomendamos que você consulte os seguintes endereços para obter maiores informações:

.//www.w3.org/TR/DOM-Level-3-Events/
• http.
.//en.wikipedia.org/wiki/DOM_events
• http.

Podemos definir o que deve ocorrer quando um determinado evento é detectado. No exemplo
abaixo, toda vez que o usuário clicar no parágrafo, 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 término do carregamento de um recurso (imagem, script, folhas de
estilos, entre outros) contido em um documento HTML ou do próprio 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 alteração no tamanho de determinados elemen-
tos. 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

354 www.k19.com.br
355 J AVA S CRIPT

elementos HTML. Por exemplo: input, select e textarea.

1 < input onfocus = " console . log ( ’ K19 ’) " ...>

change
O evento change é disparado quando um determinado elemento HTML perde o foco após ter o
seu conteúdo 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 formulário. Podemos definir
o tratamento desse evento utilizando o atributo onsubmit.

1 < form onsubmit = " console . log ( ’ K19 ’) " ...>

reset
O evento reset é disparado quando um formulário é reiniciado. Podemos definir o tratamento
desse evento utilizando o atributo onreset.

1 < form onreset = " console . log ( ’ K19 ’) " ...>

mousedown, mouseup e click

Os eventos mousedown, mouseup e click estão relacionados ao ato de clicar nos elementos
HTML com o botão esquerdo ou com o botão do meio do mouse. Podemos definir o tratamento
desses eventos utilizando os atributos onmousedown, onmouseup e onclick. Esses atributos po-
dem ser utilizados em diversos elementos HTML. Por exemplo: p, div, table e img. Esses eventos
ocorrem na seguinte ordem:

www.facebook.com/k19treinamentos 355
J AVA S CRIPT 356

1. mousedown

2. mouseup

3. click

1 <p onmousedown = " console . log ( ’1 ’) "

2 onmouseup = " console . log ( ’2 ’) "
3 onclick = " console . log ( ’3 ’) " >
4 Lorem ipsum dolor sit amet , consectetur adipiscing elit .
5 </ p >

dblclick
O evento dblclick é disparado quando um determinado elemento recebe um duplo clique. Po-
demos 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 usuário 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 deter-
minado 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 determi-
nado 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 >

356 www.k19.com.br
357 J AVA S CRIPT

keydown, keypress e keyup

Os eventos keydown, keypress e keyup estão relacionados ao ato de pressionar uma tecla quando
o foco está em um determinado elemento HTML. Podemos definir o tratamento desses eventos uti-
lizando os atributos onkeydown, onkeypress e onkeyup. Esses atributos podem ser utilizados em
diversos elementos HTML. Por exemplo: input e textarea. Esses eventos ocorrem na seguinte ordem:

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 não é disparado para teclas que não representam caracteres. Por
exemplo, SHIFT, CTRL, ALT, entre outros.

Métodos: addEventListener e removeEventListener

Podemos definir o tratamento dos eventos programaticamente através do método addEventLis-
tener. O primeiro parâmetro desse método é o nome do evento que desejamos tratar. O segundo
parâmetro é a função que tratará o evento.

1 function click () {
2 console . log ( " click " ) .,
3 }
4
5 var elemento = document . getElementById ( " conteudo " ) .,
6 elemento . addEventListener ( " click " , click ) .,

Nessa abordagem, podemos associar diversas funções para tratar um determinado evento para
um determinado elemento HTML.

Também podemos utilizar funções anônimas 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 ) .,

Podemos remover um listener com o método removeEventListener.

1 elemento . removeEventListener ( " click " , click ) .,

O método removeEventListener não pode ser utilizado para funções anônimas.

www.facebook.com/k19treinamentos 357
J AVA S CRIPT 358

Propriedades dos objetos do DOM

Outra forma de definir programaticamente o tratamento dos eventos é utilizar as propriedades
de evento dos objetos que representam os elementos HTML. Veja o exemplo a seguir.

1 var elemento = document . getElementById ( " conteudo " ) .,

2 elemento . onclick = function () {
3 console . log ( " click " )
.
4 },

Nessa abordagem, apenas uma função pode ser associada a um determinado evento para um
determinado elemento HTML.

Exercícios de Fixação

88 Adicione um arquivo chamado eventos.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 = " eventos . js " > </ script >
7 < style >
8 body {
9 width .. 2 px ,.
1 height .. 2 px ,.
11 }
12
13 div {
14 width .. 2 px ,.
15 height .. 2 px ,.
16 background - color .. yellow ,.
17 }
18 </ style >
19 </ head >
2 < body onresize = " resize () " onscroll = " scroll () " >
21 < form >
22 < label for = " campo - nome " > Nome .. </ label >
23 < input id = " campo - nome " type = " text " >
24 </ form >
25
26 < div > </ div >
27 </ body >
28 </ html >

Código HTML 4.50: eventos.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao88.zip

89 Adicione um arquivo chamado eventos.js no projeto javascript.

1 window . onload = function ( event ) {

2 console . log ( " documento carregado " ) .,
3
4 var input = document . getElementById ( " campo - nome " ) .,
5
6 input . onfocus = function () {
7 console . log ( " focus " ) .,

358 www.k19.com.br
359 J AVA S CRIPT

8 .
},
9
1 input . addEventListener ( " change " , function () {
11 console . log ( " change " ) .,
12 }) ,.
13
14 input . onblur = function () {
15 console . log ( " blur " ) .,
16 },.
17
18 input . onselect = function () {
19 console . log ( " select " ) .,
2 },.
21
22 input . onkeydown = function () {
23 console . log ( " keydown " ) .,
24 },.
25
26 input . onkeypress = function () {
27 console . log ( " keypress " ) .,
28 },.
29
3 input . onkeyup = function () {
31 console . log ( " keyup " ) .,
32 },.
33
34 var div = document . querySelector ( " div " ) .,
35
36 div . onmousedown = function () {
37 console . log ( " mousedown " ) .,
38 },.
39
4 div . onmouseup = function () {
41 console . log ( " mouseup " ) .,
42 },.
43
44 div . onclick = function () {
45 console . log ( " click " ) .,
46 },.
47
48 div . ondblclick = function () {
49 console . log ( " dblclick " ) .,
5 },.
51
52 div . onmousemove = function ( event ) {
53 var x = event . clientX .,
54 var y = event . clientY .,
55 console . log ( " mousemove .. ( " + x + " , " + y + " ) " ) .,
56 },.
57
58 div . onmouseover = function () {
59 console . log ( " mouseover " ) .,
6 },.
61
62 div . onmouseout = function () {
63 console . log ( " mouseout " ) .,
64 },.
65 },.
66
67 function resize () {
68 var w = window . outerWidth ,.
69 var h = window . outerHeight ,.
7
71 console . log ( " resize ( " + w + " , " + h + " ) " ) .,
72 }
73
74 function scroll () {
75 var x = window . pageXOffset ,.
76 var y = window . pageYOffset ,.
77

www.facebook.com/k19treinamentos 359
J AVA S CRIPT 360

78 console . log ( " scroll ( " + x + " , " + y + " ) " ) .,

79 }

Código Javascript 4.112: eventos.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao89.zip

90 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/eventos.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/eventos.html.

Verifique as mensagens exibidas no console do navegador.

Web Storage

Podemos armazenar dados nos navegadores dos usuários através do Web Storage. Há duas for-
mas de armazenamento.

Local storage: Os dados são armazenados nos navegadores indefinidamente. Podemos recuperar
esses dados mesmo após o fechamento de uma aba ou da janela do navegador.

Session storage: Os dados armazenados nos navegadores são descartados após o fechamento de
uma aba ou do navegador.

Os dados armazenados com a API do Web Storage são separados por domínio e não são compar-
tilhados entre navegadores diferentes. Os navegadores podem determinar a quantidade de espaço
de armazenamento disponível. Por padrão, esse espaço deve ser de pelo menos 5MB por domínio.

Armazenando dados
O método setItem dos objetos localStorage e sessionStorage é utilizado para inserir dados no
Web Storage. Esse método recebe dois parâmetros, uma chave e o um valor.

1 localStorage . setItem ( " usuario " , " Rafael Cosentino " ) .,

2 sessionStorage . setItem ( " usuario " , " Rafael Cosentino " ) .,

No exemplo abaixo, mostramos outra forma de armazenar dados no Web Storage.

1 localStorage . usuario = " Rafael Cosentino " .

,
2 sessionStorage . usuario = " Rafael Cosentino " .
,

Recuperando dados
O método getItem dos objetos localStorage e sessionStorage é utilizado para recuperar dados
do Web Storage. Esse método recebe uma chave como parâmetro.

360 www.k19.com.br
361 J AVA S CRIPT

1 usuario = localStorage . getItem ( " usuario " ) .,

2 usuario = sessionStorage . getItem ( " usuario " ) .,

No exemplo abaixo, mostramos outra forma de recuperar dados do Web Storage.

1 usuario = localStorage . usuario .,

2 usuario = sessionStorage . usuario ,.

Podemos percorrer todas as entradas do localStorage ou do sessionStorage da seguinte forma:

1 for ( var i = ,. i < localStorage . length ,. i ++) {

2 var key = localStorage . key ( i ) .,
3 var value = localStorage . getItem ( key ) .,
4 }
5
6 for ( var i = ,. i < sessionStorage . length ,. i ++) {
7 var key = sessionStorage . key ( i ) .,
8 var value = sessionStorage . getItem ( key ) .,
9 }

Removendo dados
O método removeItem dos objetos localStorage e sessionStorage é utilizado para remover dados
do Web Storage. Esse método recebe uma chave como parâmetro.

1 localStorage . removeItem ( " usuario " ) .,

2 sessionStorage . removeItem ( " usuario " ) .,

Para remover todas as entradas do localStorage ou do sessionStorage, podemos utilizar o mé-

todo clear.

1 localStorage . clear () .,
2 sessionStorage . clear () ,.

Exercícios de Fixação

91 Adicione um arquivo chamado web-storage.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 - Web Storage </ title >
6 < script src = " web - storage . js " > </ script >
7 </ head >
8 < body >
9 < h1 > K19 - Web Storage </ h1 >
1 <p id = " saudacao " > </ p >
11 < label for = " campoNome " > Nome .. </ label >
12 < input id = " campoNome " type = " text " >
13 < button id = " botaoEnviar " > Enviar </ button >
14 < button id = " botaoLimpar " > Limpar </ button >
15 </ body >
16 </ html >

www.facebook.com/k19treinamentos 361
J AVA S CRIPT 362

Código HTML 4.51: web-storage.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao91.zip

92 Adicione um arquivo chamado web-storage.js no projeto javascript.

1 function atualizaSaudacao () {
2 var saudacao = document . getElementById ( " saudacao " ) .,
3 if ( localStorage . nome ) {
4  " + localStorage . nome .,
saudacao . innerHTML = " Ola
5 } else {
6 saudacao . innerHTML = null .,
7 }
8 .
},
9
1 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 () {
2 localStorage . removeItem ( " nome " ) .,
21 atualizaSaudacao () ,.
22 },.
23
24 atualizaSaudacao () ,.
25 },.

Código Javascript 4.120: web-storage.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao92.zip

93 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/web-storage.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/web-storage.html.

Preencha o formulário. Abra e feche a janela do navegador.

History

Podemos avançar ou retroceder no histórico dos navegadores através do objeto history. Esse
objeto pode ser acessado através do objeto window.

Avançando ou retrocedendo
Podemos avançar ou retroceder uma página no histórico através dos métodos forward e back
respectivamente.

362 www.k19.com.br
363 J AVA S CRIPT

1 window . history . forward () ,.

1 window . history . back () .,

Também podemos utilizar o método go. Esse método recebe um número inteiro como parâme-
tro.

1 // avança uma pa  gina

2 window . history . go (1) .,
3
4 // retrocede uma pa  gina
5 window . history . go ( -1) .,
6
7 // avança tre  s pa ginas
8 window . history . go (3) .,
9
1 // retrocede tre  s pa ginas
11 window . history . go ( -3) ,.

A quantidade de páginas no histórico pode ser obtida através da propriedade length.

1 var numeroDePaginasDoHistorico = window . history . length .,

Adicionando ou modificando entradas do histórico

Através do método pushState, podemos adicionar uma entrada na posição atual do histórico.
Com o método replaceState, podemos modificar a entrada atual do histórico. Esses dois métodos
recebem os mesmos parâmetros.

1 pushState ( stateObject , title , url ) ,.

1 replaceState ( stateObject , title , url ) .,

stateObject: Um objeto que pode ser utilizado para armazenar informações sobre a nova entrada.

title: O título da nova entrada.

url: A URL da nova entrada.

Como exemplo, considere que a página correspondente à URL www.k19.com.br esteja sendo exi-
bida no navegador.

1 var state = { info .. " info " }, .

2 window . history . pushState ( state , " K19 - Cursos " , " cursos " ) .,

O código acima adicionaria uma nova entrada com título “K19 - Cursos” e URL www.k19.com.br/
cursos. Já o código abaixo, substituiria a entrada atual do histórico por uma nova com título “K19 -
Apostilas” e URL www.k19.com.br/apostilas.

1 var state = { info .. " info " }, .

2 window . history . replaceState ( state , " K19 - Apostilas " , " apostilas " ) .,

www.facebook.com/k19treinamentos 363
J AVA S CRIPT 364

Exercícios de Fixação

94 Adicione um arquivo chamado historico-pagina1.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 - Histo  rico Pa gina 1 </ title >
6 </ head >
7 < body >
8 < h1 > K19 - Histo  rico Pa gina 1 </ h1 >
9 < button onclick = " window . history . forward () ,. " > Avançar 1 pa  gina </ button >
1 < button onclick = " window . history . go (2) ., " > Avançar 2 pa  gina </ button >
11 </ body >
12 </ html >

Código HTML 4.52: historico-pagina1.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao94.zip

95 Adicione um arquivo chamado historico-pagina2.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 - Histo  rico Pa gina 2 </ title >
6 </ head >
7 < body >
8 < h1 > K19 - Histo  rico Pa gina 2 </ h1 >
9 < button onclick = " window . history . back () ,. " > Voltar 1 pa  gina </ button >
1 < button onclick = " window . history . forward () ,. " > Avançar 1 pa  gina </ button >
11 </ body >
12 </ html >

Código HTML 4.53: historico-pagina2.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao95.zip

96 Adicione um arquivo chamado historico-pagina3.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 - Histo  rico Pa gina 3 </ title >
6 </ head >
7 < body >
8 < h1 > K19 - Histo  rico Pa gina 3 </ h1 >
9 < button onclick = " window . history . go ( -2) ,. " > Voltar 2 pa gina </ button >
1 < button onclick = " window . history . back () ,. " > Voltar 1 pa  gina </ button >
11 </ body >
12 </ html >

Código HTML 4.54: historico-pagina3.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao96.zip

364 www.k19.com.br
365 J AVA S CRIPT

97 No Windows, utilize o Chrome para acessar na sequência os endereços:

http..//localhost/javascript/public_html/historico-pagina1.html.
http..//localhost/javascript/public_html/historico-pagina2.html.
http..//localhost/javascript/public_html/historico-pagina3.html.

No Ubuntu, utilize o Chrome para acessar na sequência os endereços:

http..//localhost/~<USUARIO>/javascript/public_html/historico-pagina1.html.
http..//localhost/~<USUARIO>/javascript/public_html/historico-pagina2.html.
http..//localhost/~<USUARIO>/javascript/public_html/historico-pagina3.html.

Navegue através dos botões.

Geolocalização

Se o usuário permitir, podemos obter a localização dele através da API de Geolocalização do

HTML5. Essa localização pode ser utilizada para diversos propósitos. Por exemplo, podemos exibir
publicidade relacionada à região onde o usuário está.

O primeiro passo para utilizar essa API, é definir uma função JavaScript para receber a localização
quando ela for obtida.

1 function positionCallback ( position ) {

2 console . log ( " Latitude .. " + position . coords . latitude ) .,
3 console . log ( " Longitude .. " + position . coords . longitude ) .,
4 }

Depois, devemos utilizar a função getCurrentPosition para solicitar a localização do usuário.

1 navigator . geolocation . getCurrentPosition ( positionCallback ) ,.

Exercícios de Fixação

98 Adicione um arquivo chamado geolocalizacao.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 - Geolocalizacao </ title >
6 < style type = " text / css " >
7 # mapa {
8 width .. 8 px ,.
9 height .. 6 px ,.
1 }
11 </ style >
12
13 <! - - google maps api -->

www.facebook.com/k19treinamentos 365
J AVA S CRIPT 366

14 < script src = " https .. // maps . googleapis . com / maps / api / js ? v =3. exp & sensor = false " >
15 </ script >
16
17 < script src = " geolocalizacao . js " > </ script >
18 </ head >
19 < body >
2 < h1 > K19 - Geolocalizacao </ h1 >
21 < div id = " mapa " > </ div >
22 </ body >
23 </ html >

Código HTML 4.55: geolocalizacao.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao98.zip

99 Adicione um arquivo chamado geolocalizacao.js no projeto javascript.

1 function positionCallback ( position ) {

2 var latitude = position . coords . latitude .,
3 var longitude = position . coords . longitude ,.
4 var geolocation = new google . maps . LatLng ( latitude , longitude ) ,.
5
6 var mapOptions = {
7 zoom .. 18 ,
8 center .. geolocation ,
9 mapTypeId .. google . maps . MapTypeId . ROADMAP
1 },.
11
12 var div = document . getElementById ( " mapa " ) .,
13 var map = new google . maps . Map ( div , mapOptions ) ,.
14
15 var marker = new google . maps . Marker ({
16 position .. geolocation ,
17 map .. map ,
18 title .. " Voce
 esta
 aqui ! "
19 }) ,.
2 }
21
22 window . onload = function () {
23 navigator . geolocation . getCurrentPosition ( positionCallback ) ,.
24 },.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-fixacao99.zip

100 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/geolocalizacao.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/geolocalizacao.html.

Alarmes (Conteúdo Extra)

Podemos agendar tarefas para serem executadas no futuro. Para isso, podemos utilizar os méto-
dos setTimeout e setInterval. A primeira permite definir uma função que deve ser executada apenas
uma vez depois de um determinado tempo. A segunda permite definir uma função que deve ser
executada de forma periódica.

366 www.k19.com.br
367 J AVA S CRIPT

No exemplo a seguir, definimos uma função que será executada uma vez depois de 1600 milise-
gundos.

1 window . setTimeou ( function () {

2 console . log ( " timeout " ) .,
3 } , 16) ,.

Por outro lado, nesse outro exemplo, definimos uma função que será executada a cada 2500 mi-
lisegundos.

1 window . setInterval ( function () {

2 console . log ( " interval " ) .,
3 } , 25) ,.

Podemos cancelar os alarmes com os métodos clearTimeout e clearInterval. Esses métodos

necessitam da referencia da função associada ao alarme.

1 function alarmeTimeout () {
2 console . log ( " timeout " ) .,
3 }
4
5 window . setTimeout ( alarmeTimeout , 16) .,
6
7 window . clearTimeout ( alarmeTimeout ) ,.

1 function alarmeInterval () {
2 console . log ( " interval " ) .,
3 }
4
5 window . setInterval ( alarmeInterval , 25) ,.
6
7 window . clearInterval ( alarmeInterval ) .,

Exercícios Complementares

1 Crie um documento HTML vinculado a um documento JavaScript que exiba no console do

navegador os números de 1 até 50 duas vezes.

2 Crie um documento HTML vinculado a um documento JavaScript que exiba no console do

navegador o seu nome cinco vezes. A cada exibição do seu nome, exiba três vezes a palavra “K19”.

3 Crie um documento HTML vinculado a um documento JavaScript que percorra todos os núme-
ros de 1 até 60. Para os números múltiplos de 3, exiba “***”. Para os números que não são múltiplos
de 3, exiba “*”.

4 Crie um documento HTML vinculado a um documento JavaScript que exiba no console do

navegador todos os números de 1 até 80 exceto os múltiplos de 4 e 7. Para esses exiba “*”.

www.facebook.com/k19treinamentos 367
J AVA S CRIPT 368

5 Crie um documento HTML vinculado a um documento JavaScript que exiba no console do

navegador um triângulo de “*”. Veja o exemplo abaixo:

*
**
***
****
*****

6 Crie um documento HTML vinculado a um documento JavaScript que exiba no console do

navegador vários triângulos de “*”. Observe o padrão abaixo.

*
**
***
****
*
**
***
****

7 Os números de Fibonacci são uma sequência de números definida recursivamente. O primeiro

elemento da sequência é 0 e o segundo é 1. Os outros elementos são calculados somando os dois
antecessores.

, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233...

Crie um documento HTML vinculado a um documento JavaScript para exibir os 30 primeiros

números da sequência de Fibonacci.

8 Crie um documento HTML vinculado a um documento JavaScript que armazene 10 números

em um array. Preencha todas as posições do array com valores sequenciais e em seguida exiba-os na
tela. Depois, escolha duas posições aleatoriamente e troque os valores contidos nelas. Repita essa
operação 10 vezes. Ao final, exiba o array novamente.

Dica: O método Math.random() gera números aleatórios maiores ou iguais a 0 e menores do que
1. O método Math.floor() recebe um número real como parâmetro e devolve o maior inteiro menor
ou igual a esse número real.

9 Crie um documento HTML vinculado a um documento JavaScript que armazene 10 números

em um array. Preencha todas as posições do array com valores aleatórios e em seguida exiba-os na
tela. Após exibir o array, ordene o array do menor valor para o maior. Ao final, exiba o array ordenado.

368 www.k19.com.br
369 J AVA S CRIPT

Dica: Os arrays possuem um método chamada sort. Esse método ordena os elementos dos ar-
rays.

Resumo do Capítulo

1 A linguagem de programação JavaScript é utilizada principalmente para aumentar a interativi-

dade entre as páginas web e os usuários.

2 Código JavaScript pode ser aplicado aos documentos HTML de duas formas: JavaScript interno
e JavaScript externo.

3 O carregamento do código JavaScript depende do posicionamento do elemento script.

4 Comentários JavaScript de bloco podem ser definidos com os marcadores /* e */. script.

5 Comentários JavaScript de linha podem ser definidos com o marcador //. script.

6 Em JavaScript, as variáveis são criadas através da palavra especial var.

7 Variáveis não inicializadas possuem o valor especial undefined.

8 Os operadores do JavaScript são:

• Aritmético: + - * / %
• Atribuição: = += -= *= /= %= ++ --
• Relacional: == != < <= > >=
• Lógico: && ||

9 O operador + é utilizado para concatenar strings.

10 A linguagem JavaScript permite a definição de objetos com a sintaxe do JSON.

11 Funções JavaScript são criadas com a palavra function.

12 Os métodos getElementById(), getElementsByName(), getElementsByTagName(), getEle-

mentsByClassName(), querySelector() e querySelectorAll() são utilizados para recuperar os ele-

www.facebook.com/k19treinamentos 369
J AVA S CRIPT 370

mentos de um documento HTML.

13 Os métodos getAttribute() e setAttribute() são utilizados, respectivamente, para recuperar e

alterar os valores dos atributos dos elementos HTML.

14 O conteúdo de um elemento HTML pode ser acessado através da propriedade innerHTML.

15 A propriedade style pode ser utilizada para alterar as propriedades CSS dos elementos HTML.

16 Os métodos remove() e removeChild() são utilizados para remover elementos de um docu-

mento HTML.

17 Os métodos appendChild() e insertBefore() são utilizados para adicionar elementos em um

documento HTML.

18 A interatividade entre as páginas web e os usuários depende dos eventos JavaScript.

19 Podemos armazenar dados na máquina dos usuários com a API do Web Storage.

20 Podemos controlar o histórico do navegador com a API History.

21 Podemos obter a localização dos usuários através da API de geolocalização.

Prova

1 Qual alternativa está correta?

a) Podemos associar código JavaScript aos documentos HTML através dos elementos script e js.

b) O código JavaScript sempre é carregado antes de todos os elementos HTML.

c) O código JavaScript sempre é colocado dentro do documento HTML.

d) O elemento script só pode ser colocada no corpo do elemento head.

e) Podemos associar código JavaScript aos documentos HTML através do elemento script.

2 Qual alternativa está correta?

370 www.k19.com.br
371 J AVA S CRIPT

a) A palavra especial var é utilizada para criar variáveis.

b) As variáveis JavaScript armazenam apenas valores do tipo string.

c) As variáveis JavaScript não inicializadas possuem o valor empty.

d) Na linguagem JavaScript, duas variáveis não podem armazenar o mesmo valor.

e) Os nomes das variáveis JavaScript devem iniciar obrigatoriamente com a letra v.

3 Considere o seguinte trecho de código JavaScript.

var i = 1,.

var j = ++ i + i - -,.

Qual é o valor da variável j?

a) 18.

b) 19.

c) 20.

d) 21.

e) 22.

4 Considere o seguinte trecho de código JavaScript.

var i = 1,.
var j = 15,.

console . log (!( i < j ) ? ( j % 2 == i % 3 ? " K1 " .

. " K2 " ) .. ( j % 4 > i % 4 ? " K3 " .
. " ←-
K11 " ) ) .,

O que será exibido no console do navegador?

a) K01.

b) K02.

c) K03.

d) K11.

e) Nenhuma das anteriores.

5 Considere o seguinte trecho de código JavaScript.

www.facebook.com/k19treinamentos 371
J AVA S CRIPT 372

var i = 1,.

while ( i ++ < 15) {

console . log (++ i ) .,
}

Quais números serão exibidos no console do navegador?

a) 12, 14 e 16.

b) 12 e 14.

c) 11, 13 e 15.

d) 11 e 13.

e) 11, 12, 13 e 14.

6 Considere o seguinte trecho de código JavaScript.

var objeto = { a .. " b " , b .. " a " },

.
console . log ( objeto [ " a " ]) .,
console . log ( objeto [ " b " ]) .,
delete objeto . a .,
console . log ( objeto [ " a " ]) .,
console . log ( objeto [ " b " ]) .,

O que será exibido no console do navegador?

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.

7 Qual alternativa está correta?

a) As funções JavaScript são criadas com as palavras func e function.

b) As funções JavaScript são criadas com a palavra function.

c) As funções JavaScript são criadas com a palavra func.

d) Toda função JavaScript deve receber parâmetros.

e) A linguagem JavaScript não suporta funções.

372 www.k19.com.br
373 J AVA S CRIPT

8 Qual alternativa está correta?

a) O método getElementsById() recupera elementos HTML por ID.

b) O método getElementByTagName() recupera elementos HTML de um determinado tipo.

c) A propriedade css dos elementos HTML permite que as propriedades CSS sejam acessadas
e/ou modificadas.

d) O método remove() remove elementos de um documento HTML.

e) Podemos acessar o conteúdo de um elemento HTML através da propriedade html.

9 Qual alternativa está correta?

a) O evento blur é disparado quando um determinado elemento ganha o foco.

b) O evento keyup é sempre disparado antes do evento keypress.

c) A linguagem JavaScript não suporta eventos.

d) A única forma de associar os eventos aos elementos HTML é o método addEventListener().

e) Todas as alternativas anteriores estão incorretas.

10 Qual alternativa está correta?

a) A API Web Storage permite que dados sejam armazenados nos Web Servers.

b) Os dados armazenados em Session Storage são descartados após o fechamento da aba ou do

navegador correspondente.

c) Para armazenadas dados com a API Web Storage, devemos utilizar o método put().

d) Para armazenadas dados com a API Web Storage, devemos utilizar o método add().

e) Podemos apagar todos os dados armazenados com a API Web através do método reset().

11 Qual alternativa está correta?

a) A API History permite descobrir as senhas dos usuários.

b) Através da API de geolocalização podemos descobrir a localização dos Web Servers.

c) A localização dos usuários pode ser obtida através da API de geolocalização somente com a
autorização dos usuários.

www.facebook.com/k19treinamentos 373
J AVA S CRIPT 374

d) A localização dos usuários pode ser obtida através da API de geolocalização mesmo sem a au-
torização dos usuários.

e) Todas as alternativas anteriores estão incorretas.

8 11
Minha Pontuação Pontuação Mínima: Pontuação Máxima:

374 www.k19.com.br
 5

CAPÍTULO
J Q UERY

Introdução

Basicamente, jQuery é uma biblioteca JavaScript. Ela foi desenvolvida para simplificar e diminuir
a quantidade de código JavaScript. Os principais recursos oferecidos por essa essa biblioteca são:

• Seletores

• Manipulação de elementos HTML

• Manipulação de propriedades CSS

• Eventos

• Efeitos e Animações

• AJAX

Para utilizar o jQuery, basta adicionar o arquivo JavaScript que contém o código dessa biblio-
teca em um documento HTML. Esse arquivo JavaScript pode ser obtido no endereço http. .//docs.
jquery.com/Downloading_jQuery. Ele está disponível em duas versões: Compressed e Uncom-
pressed. Em produção, a primeira versão deve ser utilizada para não sobrecarregar a transferência
de dados entre o Web Server e os navegadores. Em desenvolvimento, podemos utilizar a segunda
versão pois ela possui um código bem mais legível o que facilita a depuração.

1 < head >

2 < script type = " text / javascript " src = " jquery . js " > </ script >
3 </ head >

Nessa abordagem, a quantidade de dados transferidos entre o Web Server e os navegadores é

muito alta. Além disso, dependendo da localização dos usuários, a latência para o download do
arquivo JavaScript do jQuery pode ser alta também. Para diminuir essa quantidade de dados e essa
latência, podemos utilizar um CDN (Content Delivery Network). Basicamente, CDN é uma rede de
computadores conectados à Internet focada na distribuição de conteúdo. Eis algumas opções de
CDN:

• CDN do jQuery (MaxCDN)

1 < script src = " http .. // code . jquery . com / jquery -1.1.1. min . js " > </ script >

• Google CDN

www.facebook.com/k19treinamentos 375
J Q UERY 376

1 < script
2 src = " http .. // ajax . googleapis . com / ajax / libs / jquery /1.1.2/ jquery . min . js " > </ script >

• Microsoft CDN

1 < script
2 src = " http .. // ajax . aspnetcdn . com / ajax / jQuery / jquery -1.1.2. min . js " > </ script >

• CDNJS

1 < script
2 src = " http .. // cdnjs . cloudflare . com / ajax / libs / jquery /1.1.2/ jquery . min . js " > </ script >

.//docs.jquery.com/.
A documentação completa do jQuery está no endereço http.

Exercícios de Fixação

1 Abra o Netbeans e crie um projeto chamado jQuery.

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 é necessário
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 é necessário
instalar e configurar o Apache HTTP Server como vimos anteriormente.

376 www.k19.com.br
377 J Q UERY

Figura 5.1: Projeto jQuery

Figura 5.2: Projeto jQuery

www.facebook.com/k19treinamentos 377
J Q UERY 378

Figura 5.3: Projeto jQuery

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-jquery-fixacao1.zip

2 No projeto jQuery, crie um arquivo chamado jQuery.html.

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 - jQuery </ title >
6 < script src = " http .. // code . jquery . com / jquery -1.1.1. min . js " > </ script >
7 < style type = " text / css " >
8 div {
9 height .. 2 px ,.
1 width .. 4 px ,.
11 background - color .. yellow ,.
12 }
13 </ style >
14 </ head >
15 < body >
16 < button id = " esconder " > Esconder </ button >
17 < button id = " mostrar " > Mostrar </ button >
18 < div > </ div >
19
2 < script src = " jQuery . js " > </ script >
21 </ body >
22 </ html >

Código HTML 5.6: jQuery.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-jquery-fixacao2.zip

3 No projeto jQuery, crie um arquivo chamado jQuery.js.

378 www.k19.com.br
379 J Q UERY

1 $ ( " # esconder " ) . click ( function () {

2 $ ( " div " ) . slideUp () .,
3 }) .,
4
5 $ ( " # mostrar " ) . click ( function () {
6 $ ( " div " ) . slideDown () ,.
7 }) .,

Código Javascript 5.1: jQuery.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-jquery-fixacao3.zip

4 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/jQuery/public_html/jQuery.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/jQuery/public_html/jQuery.html.

Eventos

Evento Descrição
ready Esse evento é disparado após o carregamento árvore de elementos do documento
HTML.
http..//api.jquery.com/ready

resize Esse evento é disparado quando a janela do navegador é redimensionada.

http..//api.jquery.com/resize

scroll Esse evento é disparado quando a barra de rolagem de um elemento é movimentada.

http..//api.jquery.com/scroll

focus Esse evento é disparado quando um elemento ganha o foco.

http..//api.jquery.com/focus

focusin Esse evento é disparado quando um elemento ou um dos seus descendentes ganha
o foco.
http..//api.jquery.com/focusin

blur Esse evento é disparado quando um elemento perde o foco.

http..//api.jquery.com/blur

focusout Esse evento é disparado quando um elemento ou um dos seus descendentes perde o
foco.
http..//api.jquery.com/focusout

select Esse evento é disparado quando o valor de um elemento é selecionado.

http..//api.jquery.com/select

change Em determinados casos, esse evento é disparado depois de um elemento ter o seu va-
lor 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 Esse evento é disparado quando uma tecla é pressionada.

http..//api.jquery.com/keydown

www.facebook.com/k19treinamentos 379
J Q UERY 380

Evento Descrição
keypress Esse evento é semelhante ao evento keydown. Contudo, ele não é disparado para
teclas que não representam caracteres (exemplo: SHIFT, CTRL, ALT, entre outros). O
keypress é disparado depois do keydown.
http..//api.jquery.com/keypress

keyup Esse evento é disparado quando uma tecla é solta.

http..//api.jquery.com/keyup

click Esse evento é disparado quando o usuário clica sobre um elemento com o botão es-
querdo ou com o botão do meio do mouse.
http..//api.jquery.com/click

dblclick Esse evento é disparado quando o usuário realiza um duplo clique sobre um ele-
mento com o botão esquerdo ou com o botão do meio do mouse.
http..//api.jquery.com/dblclick

mousedown Esse evento é disparado quando o usuário pressiona um botão do mouse sobre um
determinado elemento.
http..//api.jquery.com/mousedown

mouseup Esse evento é disparado quando o usuário solta um botão do mouse sobre um deter-
minado elemento.
http..//api.jquery.com/mouseup

mouseenter Esse evento é disparado no momento em que o ponteiro do mouse passa a estar
sobre um determinado elemento.
http..//api.jquery.com/mouseenter

mouseleave Esse evento é disparado no momento em que o ponteiro do mouse passa a não estar
sobre um determinado elemento.
http..//api.jquery.com/mouseleave

hover Esse evento é disparado no mouseenter e mouseleave.

http..//api.jquery.com/hover

mouveover Esse evento é disparado no momento em que o ponteiro do mouse passa a estar
sobre um determinado elemento ou sobre os seus descendentes.
http..//api.jquery.com/mouveover

mouseout Esse evento é disparado no momento em que o ponteiro do mouse passa a não estar
sobre um determinado elemento ou sobre os seus descendentes.
http..//api.jquery.com/mouseout

mousemove Esse evento é disparado quando o ponteiro do mouse se move sobre um determi-
nado elemento ou sobre os seus descendentes.
http..//api.jquery.com/mousemove

submit Esse evento é disparado quando um formulário é enviado.

http..//api.jquery.com/submit

on
Podemos definir o tratamento dos eventos com o método on. No exemplo abaixo, o primeiro
parâmetro é o nome do evento que será tratado e o segundo parâmetro a função 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 método 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 método off. A seguir, mostramos algumas
formas de utilização desse método.

1 /* Removendo todos os tratamentos associados aos eventos dos para

 grafos */
2 $( " p " ) . off () ,.
3
4 /* Removendo todos os tratamentos associados ao evento de clique dos para
 grafos */
5 $( " p " ) . off ( " click " ) .,
6
7 /* Removendo um tratamento espec  fico associado ao evento de clique dos para
 grafos */
8 $( " p " ) . off ( " click " , tratamento ) ,.

Atalhos
O tratamento de um evento pode ser definido através de métodos que funcionam como atalhos
para o método on. No exemplo abaixo, utilizamos o método click que é um atalho para on("click",
função).

1 $( " body " ) . click ( function () {

2 console . log ( " click " ) .,
3 }) .,

Analogamente, para cada evento, há um método de atalho com o mesmo nome.

Propriedades
Os eventos são associados à informações especificas. Por exemplo, quando o evento click é dis-
parado, ele é associado a uma coordenada horizontal e uma vertical. Essas coordenadas definem
a posição do ponteiro do mouse quando o clique ocorreu. Para recuperar essas informações, basta
adicionar um parâmetro nas funções de tratamento de eventos.

No exemplo abaixo, utilizamos as propriedades pageX e pageY para recuperar as coordenadas

correspondentes à posição 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 Descrição
pageX Coordenada horizontal da posição do ponteiro do mouse.
http..//api.jquery.com/event.pageX

pageY Coordenada vertical da posição do ponteiro do mouse.

http..//api.jquery.com/event.pageY

event.timeStampA diferença em milissegundos entre 01/01/1970 e o momento no qual o evento foi

criado.
http..//api.jquery.com/event.timeStamp

event.type O tipo de evento.

http..//api.jquery.com/event.type

www.facebook.com/k19treinamentos 381
J Q UERY 382

Propriedade Descrição
event.which A tecla ou o botão do mouse que foi pressionado.
http..//api.jquery.com/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.

Exercícios de Fixação

5 No projeto jQuery, crie um arquivo chamado eventos.html.

1 <! DOCTYPE html >

2 < html lang = " pt - br " id = " html " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > K19 - jQuery </ title >
6 < script src = " http .. // code . jquery . com / jquery -1.1.1. min . js " > </ script >
7 < script src = " eventos . js " > </ script >
8 < style type = " text / css " >
9 body {
1 width .. 1 px ,.
11 height .. 8 px ,.
12 }
13 # div1 {
14 width .. 4 px ,.
15 height .. 3 px ,.
16 background - color .. yellow ,.
17 }
18 # div2 {
19 width .. 4 px ,.
2 height .. 3 px ,.
21 background - color .. blue ,.
22 }
23 # div - interno {
24 width .. 4 px ,.
25 height .. 3 px ,.
26 margin .. auto ,.
27 background - color .. green ,.
28 }
29 </ style >
3 </ head >
31 < body id = " body " >
32 < form id = " form1 " >
33 < input type = " text " id = " input1 " >
34 </ form >
35 < form id = " form2 " >
36 < input type = " text " id = " input2 " >
37 </ form >
38 < div id = " div1 " >
39 < div id = " div - interno " > </ div >
4 </ div >
41 < div id = " div2 " > </ div >
42 </ body >
43 </ html >

382 www.k19.com.br
383 J Q UERY

Código HTML 5.7: eventos.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-jquery-fixacao5.zip

6 No projeto jQuery, crie um arquivo chamado eventos.js.

1 /* tratando o evento ready */

2 $( document ) . ready ( function () {
3 console . log ( " ready " ) .,
4
5 /* tratando o evento resize */
6 $( window ) . resize ( function () {
7 var largura = $( window ) . width () ,.
8 var altura = $( window ) . height () ,.
9 console . log ( " resize .. ( " + largura + " , " + altura + " ) " ) .,
1 }) ,.
11
12 /* tratando o evento scroll */
13 $( window ) . scroll ( function () {
14 var x = $( window ) . scrollLeft () .,
15 var y = $( window ) . scrollTop () .,
16 console . log ( " scroll .. ( " + x + " , " + y + " ) " ) .,
17 }) ,.
18
19 /* tratando o evento focus */
2 $( " * " ) . focus ( function () {
21 var tagName = this . tagName ,.
22 var id = this . id .,
23 console . log ( " focus .. ( " + tagName + " , # " + id + " ) " ) .,
24 }) ,.
25
26 /* tratando o evento focusin */
27 $( " * " ) . focusin ( function () {
28 var tagName = this . tagName ,.
29 var id = this . id .,
3 console . log ( " focusin .. ( " + tagName + " , # " + id + " ) " ) .,
31 }) ,.
32
33 /* tratando o evento blur */
34 $( " * " ) . blur ( function () {
35 var tagName = this . tagName ,.
36 var id = this . id .,
37 console . log ( " blur .. ( " + tagName + " , # " + id + " ) " ) .,
38 }) ,.
39
4 /* tratando o evento focusout */
41 $( " * " ) . focusout ( function () {
42 var tagName = this . tagName ,.
43 var id = this . id .,
44 console . log ( " focusout .. ( " + tagName + " , # " + id + " ) " ) .,
45 }) ,.
46
47 /* tratando o evento select */
48 $( " input " ) . select ( function () {
49 console . log ( " select .. ( " + window . getSelection () + " ) " ) .,
5 }) ,.
51
52 /* tratando o evento change */
53 $( " input " ) . change ( function () {
54 console . log ( " change .. ( " + $ ( this ) . val () + " ) " ) .,
55 }) ,.
56
57 /* tratando o evento keydown */
58 $( " input " ) . keydown ( function ( event ) {
59 console . log ( " keydown .. ( " + event . which + " ) " ) .,

www.facebook.com/k19treinamentos 383
 J Q UERY 384

6 }) ,.
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 + " ) " ) .,
7 }) ,.
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 + " ) " ) .,
8 }) ,.
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 + " ) " ) .,
9 }) ,.
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 + " ) " ) .,
1 }) .,
11
12 /* tratando o evento hover */
13 $( " # div1 " ) . hover ( function ( event ) {
14 console . log ( " hover .. ( " + event . pageX + " , " + event . pageY + " ) " ) .,
15 }) .,
16
17 /* tratando o evento mouseover */
18 $( " # div1 " ) . mouseover ( function ( event ) {
19 console . log ( " mouseover .. ( " + event . pageX + " , " + event . pageY + " ) " ) .,
11 }) .,
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 + " ) " ) .,
12 }) .,
121 }) .,

Código Javascript 5.7: eventos.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-jquery-fixacao6.zip

384 www.k19.com.br
385 J Q UERY

7 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/jQuery/public_html/eventos.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/jQuery/public_html/eventos.html.

Utilize o console do navegador para observar as mensagens exibidas.

Seletores

Seletor Descrição
“*” Seleciona todos os elementos.

Exemplo: selecionando todos os elementos.

$ ( " * " ) .,

http..//api.jquery.com/all-selector

[atributo] Seleciona os elementos que possuem o atributo especificado.

Exemplo: selecionando os divs que possuem id.

$ ( " div [ id ] " ) .,

http..//api.jquery.com/has-attribute-selector

[atributo="valor"] Seleciona os elementos tal que o valor de um determinado atributo é igual ao valor
especificado.

Exemplo: selecionando os imgs com title igual a logo.

$ ( " img [ title = ’ logo ’] " ) .,

http..//api.jquery.com/attribute-equals-selector

[atributo!="valor"] Seleciona os elementos tal que o valor de um determinado atributo não é igual ao
valor especificado.

Exemplo: selecionando os imgs com title diferente de logo.

$ ( " img [ title != ’ logo ’] " ) .,

http..//api.jquery.com/attribute-not-equal-selector

[atributoˆ="valor"] Seleciona os elementos tal que o valor de um determinado atributo começa com o
valor especificado.

Exemplo: selecionando os imgs com title iniciando com a string logo.

$ ( " img [ title ^= ’ logo ’] " ) .,

http..//api.jquery.com/attribute-starts-with-selector

[atributo$="valor"] Seleciona os elementos tal que o valor de um determinado atributo termina com o
valor especificado.

Exemplo: selecionando os imgs com title terminando com a string logo.

$ ( " img [ title$ = ’ logo ’] " )

http..//api.jquery.com/attribute-ends-with-selector

www.facebook.com/k19treinamentos 385
J Q UERY 386

Seletor Descrição
[atributo*="valor"] Seleciona os elementos tal que o valor de um determinado atributo contém o valor
especificado como substring.

Exemplo: selecionando os imgs com title contendo a string logo.

$ ( " img [ title *= ’ logo ’] " )

http..//api.jquery.com/attribute-contains-selector

[atributo˜="valor"] Seleciona os elementos tal que o valor de um determinado atributo contém o valor
especificado como palavra.

Exemplo: selecionando os imgs com title contendo a palavra logo.

$ ( " img [ title ~= ’ logo ’] " )

http..//api.jquery.com/attribute-contains-word-selector

[atributo|="valor"] Seleciona os elementos tal que o valor de um determinado atributo é igual ao valor
especificado ou inicia com esse valor seguido do caractere “-”.

Exemplo: selecionando os imgs com title iniciando com o prefixo logo.

$ ( " img [ title |= ’ logo ’] " )

http..//api.jquery.com/attribute-contains-prefix-selector

[f1][f2]...[fn] Seleciona os elementos de acordo com os filtros de atributo especificados.

Exemplo: selecionando os inputs com id e type igual a text.

$ ( " input [ id ][ type = ’ text ’] " )

http..//api.jquery.com/multiple-attribute-selector

“#id” Seleciona o elemento com o identificador especificado.

Exemplo: selecionando o elemento com id igual a conteudo .

$ ( " # conteudo " )

http..//api.jquery.com/id-selector

“tipo” Seleciona todos os elementos do tipo especificado.

Exemplo: selecionando os divs.

$ ( " div " )

http..//api.jquery.com/element-selector

“s1 s2” Seleciona todos os elementos que combinam com o seletor s2 e são descendentes de
elementos que combinam com o seletor s1.

Exemplo: selecionando os spans descendentes de um div.

$ ( " div span " )

http..//api.jquery.com/descendant-selector

“s1 > s2” Seleciona todos os elementos que combinam com o seletor s2 e são filhos de elemen-
tos que combinam com o seletor s1.

Exemplo: selecionando os spans filhos de um div.

$ ( " div > span " )

http..//api.jquery.com/child-selector

386 www.k19.com.br
387 J Q UERY

Seletor Descrição
“s1 + s2” Seleciona todos os elementos que combinam com o seletor s2 e são irmãos sucessores
adjacentes de elementos que combinam com o seletor s1.

Exemplo: selecionando os ps sucessores adjacentes de um h1.

$ ( " h1 + p " )

http..//api.jquery.com/next-adjacent-Selector

“s1 ˜ s2” Seleciona todos os elementos que combinam com o seletor s2 e são irmãos sucessores
de elementos que combinam com o seletor s1.

Exemplo: selecionando os ps sucessores de um h1.

$ ( " h1 ~ p " )

http..//api.jquery.com/next-siblings-selector

“.classe” Seleciona todos os elementos da classe especificada.

Exemplo: selecionando os elementos da classe titulo.

$ ( " . titulo " )

http..//api.jquery.com/class-selector

“s1,s2,s3...” Seleciona todos os elementos que combinam com pelo menos um dos seletores espe-
cificados.

Exemplo: selecionando os divs ou os elementos da classe titulo.

$ ( " div , . titulo " )

http..//api.jquery.com/multiple-selector

:first Seleciona o primeiro elemento da lista dos elementos que combinam com o seletor
utilizado.

Exemplo: selecionando o primeiro div.

$ ( " div .. first " )

http..//api.jquery.com/first-selector

:last Seleciona o último elemento da lista dos elementos que combinam com o seletor uti-
lizado.

Exemplo: selecionando o último div.

$ ( " div .. last " )

http..//api.jquery.com/last-selector

:eq(n) Seleciona o n-ésimo elemento da lista dos elementos que combinam com o seletor
utilizado.

Exemplo: selecionando o quarto div.

$ ( " div .. eq (3) " )

http..//api.jquery.com/eq-selector

: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.

$ ( " div .. gt (2) " )

http..//api.jquery.com/gt-selector

www.facebook.com/k19treinamentos 387
J Q UERY 388

Seletor Descrição
:lt(n) Da lista de elementos que combinam com o seletor utilizado, seleciona do primeiro
elemento até o (n-1)-ésimo.

Exemplo: selecionando do primeiro ao décimo div.

$ ( " div .. lt (1) " )

http..//api.jquery.com/lt-selector

:even Da lista de elementos que combinam com o seletor utilizado, seleciona todos os ele-
mentos de índice par.

Exemplo: selecionando os divs de índice 0, 2, 4, 6 . . .

$ ( " div .. even " )

http..//api.jquery.com/even-selector

:odd Da lista de elementos que combinam com o seletor utilizado, seleciona todos os ele-
mentos de índice ímpar.

Exemplo: selecionando os divs de índice 1, 3, 5, 7 . . . .

$ ( " div .. odd " )

http..//api.jquery.com/odd-selector

:first-child Seleciona os elementos que não possuem um irmão antecessor.

Exemplo: selecionando os divs que não possuem um irmão antecessor.

$ ( " div .. first - child " )

http..//api.jquery.com/first-child-selector

:first-of-type Seleciona os elementos que não possuem um irmão antecessor do mesmo tipo.

Exemplo: selecionando os divs que não possuem um irmão div antecessor.

$ ( " div .. first - of - type " )

http..//api.jquery.com/first-of-type-selector

:last-child Seleciona os elementos que não possuem um irmão sucessor.

Exemplo: selecionando os divs que não possuem um irmão sucessor.

$ ( " div .. last - child " )

http..//api.jquery.com/last-child-selector

:last-of-type Seleciona os elementos que não possuem um irmão sucessor do mesmo tipo.

Exemplo: selecionando os divs que não possuem um irmão div sucessor.

$ ( " div .. last - of - type " )

http..//api.jquery.com/last-of-type-selector

:nth-child(n) Seleciona os elementos que possuem (n - 1) irmãos antecessores.

Exemplo: selecionando os divs que possuem exatamente 3 irmãos antecessores.

$ ( " div .. nth - child (4) " )

http..//api.jquery.com/nth-child-selector

388 www.k19.com.br
389 J Q UERY

Seletor Descrição
:nth-last-child(n) Seleciona os elementos que possuem (n - 1) irmãos sucessores.

Exemplo: selecionando os divs que possuem exatamente 3 irmãos sucessores.

$ ( " div .. nth - child (4) " )

http..//api.jquery.com/nth-last-child-selector

:nth-of-type(n) Seleciona os elementos que possuem (n - 1) irmãos antecessores do mesmo tipo.

Exemplo: selecionando os divs que possuem exatamente 3 irmãos div antecessores.

$ ( " div .. nth - of - type (4) " )

http..//api.jquery.com/nth-of-type-selector

:nth-last-of-type(n) Seleciona os elementos que possuem (n - 1) irmãos sucessores do mesmo tipo.

Exemplo: selecionando os divs que possuem exatamente 3 irmãos div sucessores.

$ ( " div .. nth - last - of - type (4) " )

http..//api.jquery.com/nth-last-of-type-selector

:only-child Seleciona todos os elementos que não possuem irmãos.

Exemplo: selecionando os divs que não possuem irmãos.

$ ( " div .. only - child " )

http..//api.jquery.com/only-child-selector

:only-of-type Seleciona todos os elementos que não possuem irmãos do mesmo tipo.

Exemplo: selecionando os divs que não possuem irmãos div.

$ ( " div .. only - of - type " )

http..//api.jquery.com/only-of-type-selector

:parent Seleciona todos os elementos que possuem filhos.

Exemplo: selecionando os divs que possuem filho.

$ ( " div .. parent " )

http..//api.jquery.com/parent-selector

:hidden Seleciona os elementos considerados hidden. Os elementos que não ocupam espaço
na página são considerados hidden.

Exemplo: selecionando os divs hidden.

$ ( " div .. hidden " )

http..//api.jquery.com/hidden-selector

:visible Seleciona os elementos considerados visible. Os elementos que ocupam espaço na

página são considerados visible.

Exemplo: selecionando os divs visible.

$ ( " div .. visible " )

http..//api.jquery.com/visible-selector

www.facebook.com/k19treinamentos 389
J Q UERY 390

Seletor Descrição
:disabled Seleciona todos os elementos desabilitados.

Exemplo: selecionando os inputs desabilitados.

$ ( " input .. disabled " )

http..//api.jquery.com/disabled-selector

:enabled Seleciona todos os elementos habilitados.

Exemplo: selecionando os inputs habilitados.

$ ( " input .. enabled " )

http..//api.jquery.com/enabled-selector

:contains("texto") Seleciona todos os elementos que possuem o texto especificado em seu conteúdo.

Exemplo: selecionando os divs que contém o texto k19.

$ ( " div .. contains ( ’ k19 ’) " )

http..//api.jquery.com/contains-selector

:empty Seleciona todos os elementos sem conteúdo.

Exemplo: selecionando os divs que não possuem conteúdo.

$ ( " div .. empty " )

http..//api.jquery.com/empty-selector

:has(seletor) Seleciona os elementos que possuem pelo menos um descendente que combina com
o seletor passado como parâmetro.

Exemplo: selecionando os divs que possuem pelo menos um img.

$ ( " div .. has ( img ) )

http..//api.jquery.com/has-selector

:not(seletor) Seleciona os elementos que não combinam com o seletor especificado.

Exemplo: selecionando os elementos que não são div.

$ ( " .. not ( div ) " )

http..//api.jquery.com/not-selector

:button Seleciona todos os elementos button ou com type="button".

Exemplo: selecionando os inputs com type=’button’.

$ ( " input .. button " )

http..//api.jquery.com/button-selector

:file Seleciona todos os elementos com type="file".

Exemplo: selecionando os inputs com type=’file’.

$ ( " input .. file " )

http..//api.jquery.com/file-selector

390 www.k19.com.br
391 J Q UERY

Seletor Descrição
:image Seleciona todos os elementos com type="image".

Exemplo: selecionando os inputs com type=’image’.

$ ( " input .. image " )

http..//api.jquery.com/image-selector

:password Seleciona todos os elementos com type="password".

Exemplo: selecionando os inputs com type=’password’.

$ ( " input .. password " )

http..//api.jquery.com/password-selector

:radio Seleciona todos os elementos com type="radio".

Exemplo: selecionando os inputs com type=’radio’.

$ ( " input .. radio " )

http..//api.jquery.com/radio-selector

:checkbox Seleciona todos os elementos com type="checkbox".

Exemplo: selecionando os inputs com type=’checkbox’.

$ ( " input .. checkbox " )

http..//api.jquery.com/checkbox-selector

:reset Seleciona todos os elementos com type="reset".

Exemplo: selecionando os inputs com type=’reset’.

$ ( " input .. reset " )

http..//api.jquery.com/reset-selector

:text Seleciona os elementos com type="text".

Exemplo: selecionando os inputs com type=’text’.

$ ( " input .. text " )

http..//api.jquery.com/text-selector

:submit Seleciona os elementos com type="submit".

Exemplo: selecionando os inputs com type=’submit’.

$ ( " input .. submit " )

http..//api.jquery.com/submit-selector

:input Seleciona todos os elementos input e textarea.

http..//api.jquery.com/input-selector

:header Seleciona os títulos (h1,h2,h3,h4,h5 e h6).

http..//api.jquery.com/header-selector

:lang(linguagem) Seleciona todos os elementos com lang igual à linguagem especificada.

Exemplo: selecionando os divs com lang=’pt-br’.

$ ( " div .. lang ( ’ pt - br ’)

http..//api.jquery.com/lang-selector

www.facebook.com/k19treinamentos 391
J Q UERY 392

Seletor Descrição
:animated Seleciona todos os elementos que estão com alguma animação em andamento.

Exemplo: selecionando os divs com animação em andamento.

$ ( " div .. animated " )

http..//api.jquery.com/animated-selector

:root Seleciona o elemento raiz do documento.

http..//api.jquery.com/root-selector

:selected Seleciona os elementos option marcados.

http..//api.jquery.com/selected-selector

:checked Seleciona todos os checkboxes, radios e options marcados.

http..//api.jquery.com/checked-selector

:focus Seleciona o elemento que tem o foco.

http..//api.jquery.com/focus-selector

:target Seleciona o elemento com id igual ao fragmento da URL.

http..//api.jquery.com/target-selector

Exercícios de Fixação

8 No projeto jQuery, crie um arquivo chamado seletores.html.

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 - jQuery </ title >
6 < script src = " http .. // code . jquery . com / jquery -1.1.1. min . js " > </ script >
7 < script src = " seletores . js " > </ script >
8 </ head >
9 < body >
1 < h1 id = " titulo " > K19 - jQuery </ h1 >
11
12 < form >
13 < label for = " nome " > Nome .. </ label >
14 < input id = " nome " type = " text " placeHolder = " Jonas Hirata " required >
15
16 < label for = " email " > Email .. </ label >
17 < input id = " email " type = " text " placeHolder = " jonas . hirata@email . com " >
18
19 < input type = " submit " value = " Enviar " >
2 </ form >
21
22 < ul >
23 < li > K1 - Lo gica de Programaça o </ li >
24 < li > K2 - Desenvolvimento Web com HTML , CSS e JavaScript </ li >
25 < li > K3 - Lo gica de Programaça o </ li >
26 </ ul >
27 </ body >
28 </ html >

Código HTML 5.8: seletores.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-jquery-fixacao8.zip

392 www.k19.com.br
393 J Q UERY

9 No projeto jQuery, crie um arquivo chamado seletores.js.

1 $( document ) . ready ( function () {

2 $( " input [ type = ’ text ’][ required ] " ) . css ({
3 " background - color " . . " yellow "
4 }) .,
5
6 $( " label .. first " ) . css ({
7 . " red "
" color " .
8 }) .,
9
1 $( " input .. last " ) . css ({
11 " color " .
. " blue "
12 }) ,.
13
14 $( " li .. even " ) . css ({
15 " background - color " . . " gray "
16 }) ,.
17
18 $( " input .. eq (1) " ) . css ({
19 " background - color " . . " green "
2 }) ,.
21
22 $( " .. header " ) . css ({
23 " color " .
. " darkgreen "
24 }) ,.
25 }) ,.

Código Javascript 5.63: seletores.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-jquery-fixacao9.zip

10 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/jQuery/public_html/seletores.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/jQuery/public_html/seletores.html.

Efeitos e Animações

Efeito Descrição
fadeIn Faz os elementos se tornarem opacos gradativamente.
http..//api.jquery.com/fadeIn

fadeOut Faz os elementos se tornarem transparentes gradativamente.

http..//api.jquery.com/fadeOut

fadeToggle Faz os elementos opacos se tornarem transparentes gradativamente e os elementos

transparentes se tornarem opacos gradativamente.
http..//api.jquery.com/fadeToggle

fadeTo(opacidade) Modifica a opacidade dos elementos gradativamente até atingir a opacidade especifi-
cada.
http..//api.jquery.com/fadeTo

hide Esconde os elementos.

http..//api.jquery.com/hide

www.facebook.com/k19treinamentos 393
J Q UERY 394

Efeito Descrição
show Exibe os elementos.
http..//api.jquery.com/show

toggle Esconde os elementos que estão sendo exibidos e exibe os elementos que estão es-
condidos.
http..//api.jquery.com/toggle

slideDown Exibe os elementos com efeito de deslizamento.

http..//api.jquery.com/slideDown

slideUp Esconde os elementos com efeito de deslizamento.

http..//api.jquery.com/slideUp

slideToggle Exibe os elementos que estão escondidos com efeito de deslizamento. Esconde os
elementos que estão sendo exibidos com efeito de deslizamento.
http..//api.jquery.com/slideToggle

animate Modifica gradativamente determinadas propriedades CSS até atingir os valores espe-
cificados.
http..//api.jquery.com/animate

Duração
Podemos definir a duração dos efeitos ou animações em milissegundos. No exemplo abaixo, o
tempo de execução do efeito fadeOut foi definido como 1000 milissegundos.

1 $( " a " ) . click ( function () {

2 $( this ) . fadeOut (1) ,.
3 }) .,

Callback
Podemos definir uma função para ser executada ao término da execução dos efeitos ou das ani-
mações. No exemplo abaixo, uma função que exibe a mensagem “terminou o fadeOut” foi associada
ao término do efeito fadeOut.

1 $( " a " ) . click ( function () {

2 $( this ) . fadeOut (1 , function () {
3 console . log ( " terminou o fadeOut " ) .,
4 .
}) ,
5 }) .,

Exercícios de Fixação

11 No projeto jQuery, crie um arquivo chamado efeitos.html.

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 - jQuery </ title >
6 < script src = " http .. // code . jquery . com / jquery -1.1.1. min . js " > </ script >
7 < script src = " efeitos . js " > </ script >
8 < style type = " text / css " >
9 div {
1 width .. 1 px ,.

394 www.k19.com.br
395 J Q UERY

11 height .. 1 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 >
2 < button id = " fadeToggle " > fadeToggle </ button >
21 < button id = " fadeTo1 " > fadeTo .5 </ button >
22 < button id = " fadeTo2 " > fadeTo 1. </ 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 >
3 < button id = " animate2 " > animate2 </ button >
31 < div id = " div " > </ div >
32 </ body >
33 </ html >

Código HTML 5.9: efeitos.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-jquery-fixacao11.zip

12 No projeto jQuery, crie um arquivo chamado efeitos.js.

1 $( document ) . ready ( function () {

2 /* fadeIn */
3 $( " # fadeIn " ) . click ( function () {
4 $( " # div " ) . fadeIn () .,
5 }) .,
6
7 /* fadeOut */
8 $( " # fadeOut " ) . click ( function () {
9 $( " # div " ) . fadeOut () .,
1 }) ,.
11
12 /* fadeToggle */
13 $( " # fadeToggle " ) . click ( function () {
14 $( " # div " ) . fadeToggle () ,.
15 }) ,.
16
17 /* fadeTo1 */
18 $( " # fadeTo1 " ) . click ( function () {
19 $( " # div " ) . fadeTo ( " fast " , .5) ,.
2 }) ,.
21
22 /* fadeTo2 */
23 $( " # fadeTo2 " ) . click ( function () {
24 $( " # div " ) . fadeTo ( " fast " , 1.) ,.
25 }) ,.
26
27 /* hide */
28 $( " # hide " ) . click ( function () {
29 $( " # div " ) . hide () ,.
3 }) ,.
31
32 /* show */
33 $( " # show " ) . click ( function () {
34 $( " # div " ) . show () ,.
35 }) ,.
36
37 /* toggle */

www.facebook.com/k19treinamentos 395
J Q UERY 396

38 $( " # toggle " ) . click ( function () {

39 $( " # div " ) . toggle () .,
4 }) ,.
41
42 /* slideDown */
43 $( " # slideDown " ) . click ( function () {
44 $( " # div " ) . slideDown () ,.
45 }) ,.
46
47 /* slideUp */
48 $( " # slideUp " ) . click ( function () {
49 $( " # div " ) . slideUp () .,
5 }) ,.
51
52 /* slideToggle */
53 $( " # slideToggle " ) . click ( function () {
54 $( " # div " ) . slideToggle () ,.
55 }) ,.
56
57 /* animate1 */
58 $( " # animate1 " ) . click ( function () {
59 $( " # div " ) . animate ({
6 " border - width " .. " 5 px " ,
61 " margin - top " .
. " 1 px "
62 }) .,
63 }) ,.
64
65 /* animate2 */
66 $( " # animate2 " ) . click ( function () {
67 $( " # div " ) . animate ({
68 " border - width " .. " 1 px " ,
69 " margin - top " .
. ""
7 }) .,
71 }) ,.
72 }) ,.

Código Javascript 5.66: efeitos.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-jquery-fixacao12.zip

13 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/jQuery/public_html/efeitos.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/jQuery/public_html/efeitos.html.

Manipulação

Método Descrição
addClass Adiciona uma ou mais classes aos elementos selecionados.

Exemplo: adicionando as classes destaque e grid nos divs.

$ ( " div " ) . addClass ( " destaque grid " )

http..//api.jquery.com/addClass

396 www.k19.com.br
397 J Q UERY

Método Descrição
removeClass Remove uma, várias ou todas as classes dos elementos selecionados.

Exemplo: removendo a classe grid dos divs.

$ ( " div " ) . removeClass ( " grid " ) .,

Exemplo: removendo as classes grid e destaque dos divs.

$ ( " div " ) . removeClass ( " grid destaque " ) .,

Exemplo: removendo todas as classes dos divs.

$ ( " div " ) . removeClass () ,.

http..//api.jquery.com/removeClass

toggleClass Inverte a presença de uma ou mais classes nos elementos selecionados.

Exemplo: invertendo a presença das classes grid e destaque nos divs.

$ ( " div " ) . toggleClass ( " grid destaque " ) .,

http..//api.jquery.com/toggleClass

hasClass Verifica se algum dos elementos selecionados é da classe especificada.

Exemplo: verificando se algum parágrafo é da classe destaque.

var resposta = $ ( " p " ) . hasClass ( " destaque " )

http..//api.jquery.com/hasClass

after Adiciona um determinado conteúdo imediatamente depois de cada um dos elementos se-
lecionados.

Exemplo: adicionando um parágrafo imediatamente depois dos h1.

$ ( " h1 " ) . after ( " <p > subt

 tulo </ p > " )

http..//api.jquery.com/after

before Adiciona um determinado conteúdo imediatamente antes de cada um dos elementos sele-
cionados.

Exemplo: adicionando um hr imediatamente antes dos tables.

$ ( " table " ) . before ( " <hr > " )

http..//api.jquery.com/before

insertAfter Semelhante ao after com sintaxe levemente diferente.

Exemplo: adicionando um parágrafo imediatamente depois dos h1.

$ ( <p > subt

 tulo </ p >) . after ( " h1 " )

http..//api.jquery.com/insertAfter

insertBefore Semelhante ao before com sintaxe levemente diferente.

Exemplo: adicionando um hr imediatamente antes dos tables.

$ ( " <hr > " ) . before ( " table " )

http..//api.jquery.com/insertBefore

www.facebook.com/k19treinamentos 397
J Q UERY 398

Método Descrição
append Adiciona um determinado conteúdo no final do corpo de cada um dos elementos selecio-
nados.

Exemplo: adicionando o texto (fonte: K19) no final de cada p.

$ ( " p " ) . append ( " <em >( fonte K19 ) </ em > " )

http..//api.jquery.com/append

prepend Adiciona um determinado conteúdo no começo do corpo de cada um dos elementos sele-
cionados.

Exemplo: adicionando o texto (fonte: K19) no começo de cada p.

$ ( " p " ) . prepend ( " <em >( fonte K19 ) </ em > " )

http..//api.jquery.com/prepend

appendTo Semelhante ao append com sintaxe levemente diferente.

Exemplo: adicionando o texto (fonte: K19) no final de cada p.

$ ( " <em >( fonte K19 ) </ em > " ) . appendTo ( " p " )

http..//api.jquery.com/appendTo

prependTo Semelhante ao prepend com sintaxe levemente diferente.

Exemplo: adicionando o texto (fonte: K19) no começo de cada p.

$ ( " <em >( fonte K19 ) </ em > " ) . prependTo ( " p " )

http..//api.jquery.com/prependTo

attr Esse método pode ser utilizado para dois propósitos. 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.

var id = $ ( " div " ) . attr ( " id " ) .,

Exemplo: alterando os atributos src, title e alt dos imgs.

$ ( " img " ) . attr ({

src .. " http .. // www . k19 . com . br / figs / main - header - logo . png " ,
title .. " K19 " ,
alt .. " K19 Logo "
}) .,

http..//api.jquery.com/attr

prop Esse método pode ser utilizado para dois propósitos. 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 " ) .,

Exemplo: alterando o valor da propriedade checked do primeiro input com type=’checkbox’.

$ ( " input [ ’ checkbox ’] " ) . prop ( " checked " , false )

http..//api.jquery.com/prop

398 www.k19.com.br
399 J Q UERY

Método Descrição
css Esse método pode ser utilizado para dois propósitos. 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.

var color = $ ( " div " ) . css ( " color " ) .,

Exemplo: alterando as propriedades color, width e height dos divs.

$ ( " div " ) . css ({

color .. " red " ,
width .. " 3 px " ,
height .. " 15 px "
}) .,

http..//api.jquery.com/css

removeAttr Remove o atributo especificado dos elementos selecionados.

Exemplo: removendo o atributo title dos imgs.

$ ( " img " ) . removeAttr ( " title " ) .,

http..//api.jquery.com/removeAttr

removeProp Remove a propriedade especificada dos elementos selecionados.

Exemplo: removendo a propriedade title dos imgs.

$ ( " img " ) . removeProp ( " title " ) .,

http..//api.jquery.com/removeProp

clone Cria uma cópia dos elementos selecionados.

Exemplo: criando uma cópia de todos os parágrafos.

var paragrafos = $ ( " p " ) . clone () .,

http..//api.jquery.com/clone

detach Remove os elementos selecionados da árvore de elementos e os devolve.

Exemplo: retirando os parágrafos.

var paragrafos = $ ( " p " ) . detach () .,

http..//api.jquery.com/detach

empty Remove o conteúdo dos elementos selecionados.

Exemplo: removendo o conteúdo dos parágrafos.

$ ( " p " ) . empty () .,

http..//api.jquery.com/empty

remove Remove os elementos selecionados da árvore de elementos.

Exemplo: removendo os parágrafos.

$ ( " p " ) . remove () .,

http..//api.jquery.com/remove

www.facebook.com/k19treinamentos 399
J Q UERY 400

Método Descrição
replaceAll Substitui todos os elementos selecionados.

Exemplo: substituindo todos os parágrafos por <p>K19</p>.

$ ( " <p > K19 </ p > " ) . replaceAll ( " p " ) .,

http..//api.jquery.com/replaceAll

replaceWith Semelhante ao replaceAll com sintaxe levemente diferente.

Exemplo: substituindo todos os parágrafos por <p>K19</p>.

$ ( " p " ) . replaceWith ( " <p > K19 </ p > " ) .,

http..//api.jquery.com/replaceWith

height Esse método pode ser utilizado para dois propósitos. O primeiro é recuperar a altura do
primeiro elemento selecionado. O segundo é alterar a altura de todos os elementos selecio-
nados.

Exemplo: recuperando a altura do primeiro div.

var altura = $ ( " div " ) . height () .,

Exemplo: alterando altura dos divs.

$ ( " div " ) . height (1) ,.

http..//api.jquery.com/height

width Esse método pode ser utilizado para dois propósitos. O primeiro é recuperar a largura do
primeiro elemento selecionado. O segundo é alterar a largura de todos os elementos seleci-
onados.

Exemplo: recuperando a largura do primeiro div.

var largura = $ ( " div " ) . width () .,

Exemplo: alterando largura dos divs.

$ ( " div " ) . width (1) .,

http..//api.jquery.com/width

innerHeight Recupera o innerHeight do primeiro elemento selecionado. O innerHeight é a soma da

altura, margem interna inferior e margem interna superior.

Exemplo: recuperando o innerHeight do primeiro div.

var innerHeight = $ ( " div " ) . innerHeight () ,.

http..//api.jquery.com/innerHeight

innerWidth Recupera o innerWidth do primeiro elemento selecionado. O innerWidth é a soma da lar-

gura, margem interna da esquerda e margem interna da direita.

Exemplo: recuperando o innerWidth do primeiro div.

var innerWidth = $ ( " div " ) . innerWidth () ,.

http..//api.jquery.com/innerWidth

400 www.k19.com.br
401 J Q UERY

Método Descrição
outerHeight Recupera o outerHeight do primeiro elemento selecionado. Se esse método for chamado
sem parâmetros, o outerHeight é a soma da altura, margem interna inferior, margem in-
terna superior, borda inferior e borda superior. Se ele for chamado com o parâmetro true,
o outerHeight é a soma da altura, margem interna inferior, margem interna superior, borda
inferior, borda superior, margem externa inferior e margem externa superior.

Exemplo: recuperando o outerHeight do primeiro div.

var outerHeight1 = $ ( " div " ) . outerHeight () ,.

var outerHeight2 = $ ( " div " ) . outerHeight ( true ) .,

http..//api.jquery.com/outerHeight

outerWidth Recupera o outerWidth do primeiro elemento selecionado. Se esse método for chamado
sem parâmetros, o outerWidth é a soma da largura, margem interna da esquerda, margem
interna da direita, borda da esquerda e borda da direita. Se ele for chamado com o parâme-
tro true, o outerWidth é a soma da largura, margem interna da esquerda, margem interna
da direita, borda da esquerda, borda da direita, margem externa da esquerda e margem ex-
terna da direita.

Exemplo: recuperando o outerWidth do primeiro div.

var outerWidth1 = $ ( " div " ) . outerWidth () ,.

var outerWidth2 = $ ( " div " ) . outerWidth ( true ) .,

http..//api.jquery.com/outerWidth

html Esse método pode ser utilizado para dois propósitos. O primeiro é recuperar o conteúdo
HTML do primeiro elemento selecionado. O segundo é alterar o conteúdo HTML de todos
os elementos selecionados.

Exemplo: recuperando o conteúdo HTML do primeiro div.

var conteudo = $ ( " div " ) . html () ,.

Exemplo: alterando o conteúdo HTML dos divs.

$ ( " div " ) . html ( " <h1 > K19 < h /1 > <p > Cursos da K19 . </p > " ) .,

http..//api.jquery.com/html

text Esse método pode ser utilizado para dois propósitos. O primeiro é recuperar o o texto con-
tido 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.

var texto = $ ( " div " ) . text () ,.

Exemplo: alterando o texto contido no corpo dos divs.

$ ( " div " ) . text ( " K19 Cursos " ) .,

http..//api.jquery.com/text

val Esse método é 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.

var valor = $ ( " input " ) . val () ,.

http..//api.jquery.com/val

www.facebook.com/k19treinamentos 401
J Q UERY 402

Método Descrição
wrap Adiciona na árvore de elementos uma estrutura envolvendo cada um dos elementos seleci-
onados.

Exemplo: Envolvendo cada parágrafo 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 sele-
cionados.

Exemplo: Envolvendo os parágrafos com a estrutura <section><div></div></section>.

$ ( " p " ) . wrapAll ( " < section > < div > </ div > </ section > " ) .,

http..//api.jquery.com/wrapAll

wrapInner Adiciona na árvore de elementos uma estrutura envolvendo o conteúdo de cada um dos
elementos selecionados.

Exemplo: Envolvendo o conteúdo dos parágrafos com a estrutura <em></em>.

$ ( " p " ) . wrapInner ( " <em > </ em > " ) .,

http..//api.jquery.com/wrapInner

unwrap Remove o elemento pai dos elementos selecionados.

Exemplo: removendo os elementos pai dos parágrafos.

$ ( " p " ) . unwrap () .,

http..//api.jquery.com/unwrap

offset Esse método pode ser utilizado para dois propósitos. O primeiro é recuperar a posição do
primeiro elemento selecionado. O segundo é alterar a posição de todos os elementos seleci-
onados. Nessa alteração, os elementos com position: static passam para position: relative.

Exemplo: recuperando o offset do primeiro div.

var offset = $ ( " div " ) . offset () .,

var left = offset . left .,
var top = offset . top ,.

Exemplo: alterando o offset dos divs.

$ ( " div " ) . offset ({

left .. 1,.
top .. 2, .
}) .,

http..//api.jquery.com/offset

position Recupera a posição do primeiro elemento selecionado em relação ao elemento pai.

Exemplo: recuperando a posição do primeiro div.

var position = $ ( " div " ) . position () .,

var left = position . left .,
var top = position . top .,

http..//api.jquery.com/position

402 www.k19.com.br
403 J Q UERY

Método Descrição
scrollLeft Esse método pode ser utilizado para dois propósitos. O primeiro é recuperar a posição da
barra de rolagem horizontal do primeiro elemento selecionado. O segundo é alterar a posi-
ção da barra de rolagem horizontal de todos os elementos selecionados.

Exemplo: recuperando a posição da barra de rolagem horizontal do primeiro div.

var scrollLeft = $ ( " div " ) . scrollLeft () ,.

Exemplo: alterando a posição da barra de rolagem horizontal dos divs.

$ ( " div " ) . scrollLeft (3) .,

http..//api.jquery.com/scrollLeft

scrollTop Esse método pode ser utilizado para dois propósitos. O primeiro é recuperar a posição da
barra de rolagem vertical do primeiro elemento selecionado. O segundo é alterar a posição
da barra de rolagem vertical de todos os elementos selecionados.

Exemplo: recuperando a posição da barra de rolagem vertical do primeiro div.

var scrollTop = $ ( " div " ) . scrollTop () ,.

Exemplo: alterando a posição da barra de rolagem vertical dos divs.

$ ( " div " ) . scrollTop (3) ,.

http..//api.jquery.com/scrollTop

Exercícios de Fixação

14 No projeto jQuery, crie um arquivo chamado manipulacao.html.

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 - jQuery </ title >
6 < style >
7 . destaque {
8 background - color .. yellow ,.
9 }
1 </ style >
11 < script src = " http .. // code . jquery . com / jquery -1.1.1. min . js " > </ script >
12 < script src = " manipulacao . js " > </ script >
13 </ head >
14 < body >
15 < button id = " addClass " > addClass </ button >
16 < button id = " removeClass " > removeClass </ button >
17 < button id = " toggleClass " > toggleClass </ button >
18 < button id = " hasClass " > hasClass </ button >
19
2 < button id = " after " > after </ button >
21 < button id = " before " > before </ button >
22 < button id = " insertAfter " > insertAfter </ button >
23 < button id = " insertBefore " > insertBefore </ button >
24 < button id = " append " > append </ button >
25 < button id = " prepend " > prepend </ button >
26 < button id = " appendTo " > appendTo </ button >
27 < button id = " prependTo " > prependTo </ button >
28

www.facebook.com/k19treinamentos 403
J Q UERY 404

29 < button id = " height " > height </ button >
3 < 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 >
4 < li > Rafael Cosentino </ li >
41 </ ul >
42 </ div >
43 </ body >
44 </ html >

Código HTML 5.10: manipulacao.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-jquery-fixacao14.zip

15 No projeto jQuery, crie um arquivo chamado manipulacao.js.

1 $( document ) . ready ( function () {

2 $( " # div1 " ) . css ({
3 " border " . . " 2 px solid black " ,
4 " width " .. " 8 px " ,
5 " height " . . " 2 px " ,
6 " margin " . . " 15 px " ,
7 " padding " . . " 15 px "
8 }) .,
9
1 $( " # addClass " ) . click ( function () {
11 $( " # div1 " ) . addClass ( " destaque " ) .,
12 }) ,.
13
14 $( " # removeClass " ) . click ( function () {
15 $( " # div1 " ) . removeClass ( " destaque " ) .,
16 }) ,.
17
18 $( " # toggleClass " ) . click ( function () {
19 $( " # div1 " ) . toggleClass ( " destaque " ) .,
2 }) ,.
21
22 $( " # hasClass " ) . click ( function () {
23 var destaque = $( " # div1 " ) . hasClass ( " destaque " ) .,
24 alert ( destaque ? " Com destaque " . . " Sem destaque " ) .,
25 }) ,.
26
27 $( " # after " ) . click ( function () {
28 $( " # p1 " ) . remove () .,
29 $( " # div1 " ) . after ( " <p id = ’ p1 ’> after <p > " ) .,
3 }) ,.
31
32 $( " # before " ) . click ( function () {
33 $( " # p1 " ) . remove () .,
34 $( " # div1 " ) . before ( " <p id = ’ p1 ’> before <p > " ) .,
35 }) ,.
36
37 $( " # insertAfter " ) . click ( function () {
38 $( " # p1 " ) . remove () .,
39 $( " <p id = ’ p1 ’> insertAfter <p > " ) . insertAfter ( " # div1 " ) .,
4 }) ,.
41
42 $( " # insertBefore " ) . click ( function () {
43 $( " # p1 " ) . remove () .,
44 $( " <p id = ’ p1 ’> insertBefore <p > " ) . insertBefore ( " # div1 " ) .,

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 > " ) .,
5 }) ,.
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 " ) .,
6 }) ,.
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 () .,
7 $( " # 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 () {
8 $( " # 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 }) ,.
9
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 () ,.
1 $( " # div1 " ) . after ( " <p id = ’ p1 ’> outerWidth .. " + outerWidth + " <p > " ) .,
11 }) .,
12 }) .,

Código Javascript 5.119: manipulacao.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-jquery-fixacao15.zip

16 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/jQuery/public_html/manipulacao.html.

www.facebook.com/k19treinamentos 405
J Q UERY 406

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/jQuery/public_html/manipulacao.html.

Mais métodos

Método Descrição
add Adiciona elementos a um conjunto.

Exemplo: adicionando os spans ao conjunto de divs.

$ ( " div " ) . add ( " span " ) .,

http..//api.jquery.com/add

parent Recupera os pais de cada elemento de um conjunto.

Exemplo: recuperando os pais dos divs e dos spans.

$ ( " div , span " ) . parent () .,

http..//api.jquery.com/parent

parents Recupera os ancestrais de cada elemento de um conjunto.

Exemplo: recuperando os ancestrais dos divs e dos spans.

$ ( " div , span " ) . parents () .,

http..//api.jquery.com/parents

siblings Recupera os irmãos de cada elemento de um conjunto.

Exemplo: recupera os irmãos dos divs e dos spans.

$ ( " div , span " ) . siblings ()

http..//api.jquery.com/siblings

children Recupera os filhos de cada elemento de um conjunto. Opcionalmente, pode receber

um seletor como parâmetro para filtrar o resultado.

Exemplo: recuperando os filhos dos divs e dos spans.

$ ( " div , span " ) . children () .,

Exemplo: recuperando os filhos dos divs e dos spans que possuam a classe destaque.

$ ( " div , span " ) . children ( " . destaque " ) .,

http..//api.jquery.com/children

find Recupera os descendentes de cada elemento de um conjunto. Opcionalmente, pode

receber um seletor como parâmetro para filtrar o resultado.

Exemplo: recuperando os descendentes dos divs e dos spans.

$ ( " div , span " ) . find () ,.

Exemplo: recuperando os descendentes dos divs e dos spans que possuam a classe destaque.

$ ( " div , span " ) . find ( " . destaque " ) .,

http..//api.jquery.com/find

406 www.k19.com.br
407 J Q UERY

Método Descrição
each Permite executar uma função para cada elemento de um conjunto.

Exemplo: exibe no console a largura dos divs.

$ ( " div " ) . each ( function ( indice , elemento ) {

console . log ( $ ( elemento ) . width () ) ,.
}) .,

http..//api.jquery.com/each

map Permite executar uma função para cada elemento de um conjunto. Essa função pode
devolver um valor. Esses valores serão devolvidos em um objeto jQuery.

Exemplo: recupera a largura dos divs.

function pegaAltura ( indice , elemento ) {

return $ ( elemento ) . width () .,
}

var alturas = $ ( " div " ) . map ( pegaAltura ) .,

http..//api.jquery.com/map

filter Filtra os elementos de conjunto.

Exemplo: recuperando os divs da classe grid.

$ ( " div " ) . filter ( " . grid " ) .,

http..//api.jquery.com/filter

has Devolve os elementos de um conjunto que possuem um descendente que combina

com o seletor especificado.

Exemplo: recupera os divs e os spans que possuem um elemento da classe destaque como descendente.

$ ( " div , span " ) . has ( " . destaque " )

http..//api.jquery.com/has

not Remove elementos de um conjunto.

Exemplo: removendo os elementos da classe destaque do conjunto de divs e spans.

$ ( " div , span " ) . not ( " . destaque " )

http..//api.jquery.com/not

first Devolve o primeiro elemento de uma lista.

Exemplo: devolve o primeiro elemento da lista de divs e spans.

$ ( " div , span " ) . first () .,

http..//api.jquery.com/first

last Devolve o último elemento de uma lista.

Exemplo: devolve o último elemento da lista de divs e spans.

$ ( " div , span " ) . last ()

http..//api.jquery.com/last

eq Recupera o elemento do índice especificado.

Exemplo: recupera o sexto elemento da lista de divs e spans.

$ ( " div , span " ) . eq (5) ,.

http..//api.jquery.com/eq

www.facebook.com/k19treinamentos 407
J Q UERY 408

Método Descrição
slice Recupera um determinado trecho de uma lista de elementos.

Exemplo: recuperando do terceiro ao décimo elementos da lista de divs e spans.

$ ( " div , span " ) . slice (2 , 9) ,.

http..//api.jquery.com/slice

next Devolve os irmãos adjacentes sucessores dos elementos de um conjunto.

Exemplo: recupera os irmãos adjacentes sucessores dos divs e spans.

$ ( " div , span " ) . next ()

http..//api.jquery.com/next

nextAll Devolve os irmãos sucessores dos elementos de um conjunto.

Exemplo: recupera os irmãos sucessores dos divs e spans.

$ ( " div , span " ) . nextAll ()

http..//api.jquery.com/nextAll

prev Devolve os irmãos adjacentes antecessores dos elementos de um conjunto.

Exemplo: recupera os irmãos adjacentes antecessores dos divs e spans.

$ ( " div , span " ) . prev ()

http..//api.jquery.com/prev

prevAll Devolve os irmãos antecessores dos elementos de um conjunto.

Exemplo: recupera os irmãos antecessores dos divs e spans.

$ ( " div , span " ) . prevAll ()

http..//api.jquery.com/prevAll

AJAX

A forma básica de interação entre os usuários e as páginas web é limitada. Quando o usuário
clica em um link ou em um botão de uma página web, uma requisição HTTP é enviada ao servidor
correspondente. Quando chegar no servidor, essa requisição será processada. No término desse
processamento, o servidor enviará uma resposta HTTP contendo uma página web para a máquina
do usuário. Ao receber essa resposta, o navegador do usuário carregará a página inteira.

Nessa abordagem, muitas vezes, ocorre um desperdício de tempo, pois, na maior parte dos ca-
sos, não seria necessário carregar a página inteira e sim pequenos “pedaços” dela. Mesmo assim, o
navegador sempre carregará todo o conteúdo das páginas web.

Além disso, há outro problema nessa abordagem, o usuário não pode interagir com a página
web durante o envio da requisição HTTP; processamento no servidor; envio da resposta HTTP e
carregamento do página.

Para aumentar a interatividade entre os usuários e as páginas web, podemos utilizar a forma
de interação conhecida como AJAX (Asynchronous Javascript and XML). Nessa outra abordagem,
os navegadores podem atualizar “pedaços” de uma página web sem ter carregá-la completamente.

408 www.k19.com.br
409 J Q UERY

Além disso, com AJAX, os usuários podem interagir com as páginas web durante o envio da requisição
HTTP; processamento no servidor; envio da resposta HTTP e carregamento parcial das páginas web.

Utilizaremos os recursos da biblioteca jQuery para implementar a interação entre os usuários e

as páginas web com AJAX.

load
Podemos obter conteúdo de Web Server através do método load. Esse método realiza requisições
HTTP do tipo GET com AJAX. No exemplo abaixo, o conteúdo do documento HTML k19.html obtido
do servidor e inserido no corpo do elemento com id="conteudo".

$( " # conteudo " ) . load ( " k19 . html " ) .,

get
Podemos realizar requisições HTTP do tipo GET com AJAX através do método get. Esse método
recebe como parâmetro a URL correspondente à requisição que desejamos realizar. No exemplo
abaixo, a requisição foi realizada para URL k19.php mas o resultado foi ignorado.

$. get ( " k19 . php " ) .,

Para recuperar o resultado da requisição devemos utilizar o método done. Devemos passar como
argumento para esse método a função que tratará o resultado. Essa função receberá o resultado
como parâmetro. Observe, no exemplo abaixo, que o resultado é exibido no console do navegador.

var get = $. get ( " k19 . php " ) .,

get . done ( function ( resultado ) {

console . log ( resultado ) ,.
}) .,

Também podemos enviar dados para o servidor. Veja o exemplo a seguir.

var dados = {
nome .. " Rafael " ,
empresa .. " K19 "
.
},

var get = $. get ( " k19 . php " , dados ) .,

get . done ( function ( resultado ) {

console . log ( resultado ) ,.
}) .,

Esses dados são enviados como parâmetro na URL da requisição.

k19.php?nome=Rafael&empresa=K19

post
Podemos realizar requisições HTTP do tipo POST com AJAX através do método post. Esse mé-
todo funciona de forma semelhante ao método get. Veja alguns exemplos.

$. post ( " k19 . php " ) .,

www.facebook.com/k19treinamentos 409
J Q UERY 410

var post = $. post ( " k19 . php " ) .,

post . done ( function ( resultado ) {

console . log ( resultado ) ,.
}) .,

var dados = {
nome .. " Rafael " ,
empresa .. " K19 "
.
},

var post = $. post ( " k19 . php " , dados ) .,

post . done ( function ( resultado ) {

console . log ( resultado ) ,.
}) .,

Esses dados são enviados corpo da requisição HTTP.

k19.php?nome=Rafael&empresa=K19

Exercícios de Fixação

17 No projeto jQuery, crie um arquivo chamado ajax.php.

1 <? php
2 .
$soma = $_REQUEST [ " x " ] + $_REQUEST [ " y " ],
3
4 echo $soma .,
5 ?>

Código HTML 5.11: ajax.php

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-jquery-fixacao17.zip

18 No projeto jQuery, crie um arquivo chamado ajax.html.

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 - jQuery </ title >
6 < script src = " http .. // code . jquery . com / jquery -1.1.1. min . js " > </ script >
7 < script src = " ajax . js " > </ script >
8 </ head >
9 < body >
1 < form action = " ajax . php " method = " post " >
11 < label for = " x " >X .. </ label >
12 < input id = " x " name = " x " type = " text " >
13 < label for = " y " >Y .. </ label >
14 < input id = " y " name = " y " type = " text " >
15
16 < input type = " submit " value = " Enviar " >
17 </ form >
18
19 <p id = " resultado " > </ p >
2 </ body >

410 www.k19.com.br
411 J Q UERY

21 </ html >

Código HTML 5.12: ajax.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-jquery-fixacao18.zip

19 No projeto jQuery, crie um arquivo chamado ajax.js.

1 $( document ) . ready ( function () {

2 $( " input [ type = ’ submit ’] " ) . click ( function () {
3 var x = $( " # x " ) . val () ,.
4 var y = $( " # y " ) . val () ,.
5
6 $. post ( " ajax . php " , { " x " .
. x, "y". . y })
7 . done ( function ( soma ) {
8 $( " # resultado " ) . html ( soma ) .,
9 }) ,.
1
11 return false . ,
12
13 }) ,.
14 }) ,.

Código Javascript 5.148: ajax.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-jquery-fixacao19.zip

20 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/jQuery/public_html/ajax.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/jQuery/public_html/ajax.html.

Exercícios Complementares

1 No projeto jQuery, crie um arquivo chamado jquery-complementar.html.

1 <! DOCTYPE html >

2 < html lang = " pt - br " id = " html " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > K19 - Eventos - jQuery </ title >
6 < script src = " http .. // code . jquery . com / jquery -1.1.1. min . js " > </ script >
7 < script src = " jquery - complementar . js " > </ script >
8 < style type = " text / css " >
9 # header {
1 top ..  px .,
11 left ..  px .,
12 width .. 1%,.
13 padding .. 1 px ,.
14 position .. fixed ,.
15 background - color .. white ,.
16 border - bottom .. 1 px black solid ,.
17 }
18

www.facebook.com/k19treinamentos 411
J Q UERY 412

19 # saida {
2 margin ..  px auto ,.
21 width .. 8 px ,.
22 height .. 2 px ,.
23 overflow .. auto ,.
24 }
25
26 # content {
27 width .. 8 px ,.
28 margin .. 25 px auto  px ,.
29 }
3
31 pre {
32 padding .. 1 px ,.
33 border - radius .. 15 px ,.
34 background - color .. # eeeeee ,.
35 }
36
37 # div1 , # div2 {
38 background - color .. yellow ,.
39 width .. 2 px ,.
4 height .. 2 px ,.
41 }
42
43 # div3 {
44 background - color .. blue ,.
45 width .. 5 px ,.
46 height .. 5 px ,.
47 margin .. auto ,.
48 }
49 </ style >
5 </ head >
51 < body id = " body " >
52 < div id = " header " >
53 < div id = " saida " > </ div >
54 </ div >
55 < div id = " content " >
56
57 < h1 > ready </ h1 >
58 < pre id = " ready - on " >
59 $( document ) . ready ( function () {
6 var saida = $( " # saida " ) .,
61 saida . append ( " evento ready disparado & lt ., br & gt ,. " ) .,
62 }) ,.
63 </ pre >
64
65 < h1 > resize </ h1 >
66 < button id = " resize " > ON </ button >
67 < pre >
68 /* ON */
69 $( window ) . resize ( function () {
7 var largura = $( window ) . width () ,.
71 var altura = $( window ) . height () ,.
72 saida . append ( " resize .. ( " + largura + " , " + altura + " ) " ) .,
73 saida . append ( " & lt ., br & gt ,. " ) .,
74 saida . scrollTop ( saida . prop ( " scrollHeight " ) ) .,
75 }) ,.
76
77 /* OFF */
78 $( window ) . off ( " resize " ) .,
79 </ pre >
8
81 < h1 > scroll </ h1 >
82 < button id = " scroll " > ON </ button >
83 < pre >
84 /* ON */
85 $( window ) . scroll ( function () {
86 var x = $( window ) . scrollLeft () .,
87 var y = $( window ) . scrollTop () .,
88 saida . append ( " scroll .. ( " + x + " , " + y + " ) " ) .,

412 www.k19.com.br
 413 J Q UERY

89 saida . append ( " & lt ., br & gt ,. " ) .,

9 saida . scrollTop ( saida . prop ( " scrollHeight " ) ) .,
91 }) ,.
92
93 /* OFF */
94 $( window ) . off ( " scroll " ) .,
95 </ pre >
96
97 < h1 > focus , focusin , blur e focusout </ h1 >
98 < button id = " foco " > ON </ button >
99 < pre >
1 /* ON */
11 $( " * " ) . on ( " focus focusin blur focusout " ,
12 function ( event ) {
13 var tag = this . tagName ,.
14 var id = this . id .,
15 var type = event . type ,.
16
17 saida . append ( type + " ( " + tag + " , # " + id + " ) " ) .,
18 saida . append ( " & lt ., br & gt ,. " ) .,
19 saida . scrollTop ( saida . prop ( " scrollHeight " ) ) .,
11 }
111 ) ,.
112
113 /* OFF */
114 $( " * " ) . off ( " focus focusin blur focusout " ) .,
115 </ pre >
116 < label > Teste .. </ label >
117 < input id = " input1 " >
118
119 < h1 > select </ h1 >
12 < button id = " select " > ON </ button >
121 < pre >
122 /* ON */
123 $( " # input2 " ) . select ( function () {
124 saida . append ( " select .. ( " + window . getSelection () + " ) " ) .,
125 saida . append ( " & lt ., br & gt ,. " ) .,
126 saida . scrollTop ( saida . prop ( " scrollHeight " ) ) .,
127 }) .,
128
129 /* OFF */
13 $( " # input2 " ) . off ( " select " ) .,
131 </ pre >
132 < label > Teste .. </ label >
133 < input id = " input2 " >
134
135 < h1 > change </ h1 >
136 < button id = " change " > ON </ button >
137 < pre >
138 /* ON */
139 $( " input3 " ) . change ( function () {
14 saida . append ( " change .. ( " + $( this ) . val () + " ) " ) .,
141 saida . append ( " & lt ., br & gt ,. " ) .,
142 saida . scrollTop ( saida . prop ( " scrollHeight " ) ) .,
143 }) .,
144
145 /* OFF */
146 $( " # input3 " ) . off ( " change " ) .,
147 </ pre >
148 < label > Teste .. </ label >
149 < input id = " input3 " >
15
151 < h1 > keydown , keypress e keyup </ h1 >
152 < button id = " key " > ON </ button >
153 < pre >
154 /* ON */
155 $( " # input4 " ) . on ( " keydown keypress keyup " ,
156 function ( event ) {
157 var type = event . type ,.
158

www.facebook.com/k19treinamentos 413
 J Q UERY 414

159 saida . append ( type + " .. ( " + event . which + " ) " ) .,
16 saida . append ( " & lt ., br & gt ,. " ) .,
161 saida . scrollTop ( saida . prop ( " scrollHeight " ) ) .,
162 }
163 ) ,.
164
165 /* OFF */
166 $( " # input4 " ) . off ( " keydown keypress keyup " ) .,
167 </ pre >
168 < label > Teste .. </ label >
169 < input id = " input4 " >
17
171 < h1 > click , dblclick , mousedown , mouseup , mouseenter ,
172 mouseleave , hover , mouseover e mouseout </ h1 >
173 < button id = " mouse " > ON </ button >
174 < pre >
175 /* ON */
176 $( " # div1 " ) . on ( " click dblclick mousedown mouseup " +
177 " mouseenter mouseleave hover mouseover mouseout " ,
178 function ( event ) {
179 var type = event . type ,.
18
181 saida . append ( type + " .. ( " + event . which + " ) " ) .,
182 saida . append ( " & lt ., br & gt ,. " ) .,
183 saida . scrollTop ( saida . prop ( " scrollHeight " ) ) .,
184 }
185 ) ,.
186
187 /* OFF */
188 $( " # div1 " ) . off ( " click dblclick mousedown mouseup " +
189 " mouseenter mouseleave hover mouseover mouseout " ) .,
19 </ pre >
191 < div id = " div1 " > < div id = " div3 " > </ div > </ div >
192
193 < h1 > mousemove </ h1 >
194 < button id = " mousemove " > ON </ button >
195 < pre >
196 /* ON */
197 $( " # div2 " ) . mousemove ( function ( event ) {
198 var x = event . pageX .,
199 var y = event . pageY .,
2 var type = event . type ,.
21
22 saida . append ( type + " .. ( " + x + " , " + y + " ) " ) .,
23 saida . append ( " & lt ., br & gt ,. " ) .,
24 saida . scrollTop ( saida . prop ( " scrollHeight " ) ) .,
25 }) .,
26
27 /* OFF */
28 $( " # div2 " ) . off ( " mousemove " ) .,
29 </ pre >
21 < div id = " div2 " > </ div >
211 </ div >
212 </ body >
213 </ html >

Código HTML 5.13: jquery-complementar.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-jquery-complementar1.zip

2 No projeto jQuery, crie um arquivo chamado jquery-complementar.js.

1 /* ready */
2 $( document ) . ready ( function () {
3 var saida = $( " # saida " ) .,
4 saida . append ( " evento ready disparado < br > " ) .,
5

414 www.k19.com.br
415 J Q UERY

6 /* resize */
7 var resize = false . ,
8 $( " # resize " ) . click ( function () {
9 if ( resize ) {
1 $( window ) . off ( " resize " ) .,
11 $( " # resize " ) . html ( " ON " ) .,
12 resize = false , .
13 } else {
14 $( window ) . resize ( function () {
15 var largura = $( window ) . width () ,.
16 var altura = $( window ) . height () ,.
17 saida . append ( " resize .. ( " + largura + " , " + altura + " ) " ) .,
18 saida . append ( " <br > " ) .,
19 saida . scrollTop ( saida . prop ( " scrollHeight " ) ) .,
2 }) .,
21 $( " # resize " ) . html ( " OFF " ) .,
22 resize = true . ,
23 }
24 }) ,.
25
26 /* scroll */
27 var scroll = false . ,
28 $( " # scroll " ) . click ( function () {
29 if ( scroll ) {
3 $( window ) . off ( " scroll " ) .,
31 $( " # scroll " ) . html ( " ON " ) .,
32 scroll = false . ,
33 } else {
34 $( window ) . scroll ( function () {
35 var x = $( window ) . scrollLeft () .,
36 var y = $( window ) . scrollTop () .,
37 saida . append ( " scroll .. ( " + x + " , " + y + " ) " ) .,
38 saida . append ( " <br > " ) .,
39 saida . scrollTop ( saida . prop ( " scrollHeight " ) ) .,
4 }) .,
41 $( " # scroll " ) . html ( " OFF " ) .,
42 scroll = true , .
43 }
44 }) ,.
45
46 /* focus focusin blur focusout */
47 var foco = false , .
48 $( " # foco " ) . click ( function () {
49 if ( foco ) {
5 $( " * " ) . off ( " focus focusin blur focusout " ) .,
51 $( " # foco " ) . html ( " ON " ) .,
52 foco = false . ,
53 } else {
54 $( " * " ) . on ( " focus focusin blur focusout " ,
55 function ( event ) {
56 var tag = this . tagName ,.
57 var id = this . id .,
58 var type = event . type .,
59
6 saida . append ( type + " ( " + tag + " , # " + id + " ) " ) .,
61 saida . append ( " <br > " ) .,
62 saida . scrollTop ( saida . prop ( " scrollHeight " ) ) .,
63 }
64 ) .,
65 $( " # foco " ) . html ( " OFF " ) .,
66 foco = true , .
67 }
68 }) ,.
69
7 /* select */
71 var select = false . ,
72 $( " # select " ) . click ( function () {
73 if ( select ) {
74 $( " # input2 " ) . off ( " select " ) .,
75 $( " # select " ) . html ( " ON " ) .,

www.facebook.com/k19treinamentos 415
 J Q UERY 416

76 select = false , .
77 } else {
78 $( " # input2 " ) . select ( function () {
79 saida . append ( " select .. ( " + window . getSelection () + " ) " ) .,
8 saida . append ( " <br > " ) .,
81 saida . scrollTop ( saida . prop ( " scrollHeight " ) ) .,
82 }) .,
83 $( " # select " ) . html ( " OFF " ) .,
84 select = true , .
85 }
86 }) ,.
87
88 /* change */
89 var change = false . ,
9 $( " # change " ) . click ( function () {
91 if ( change ) {
92 $( " # input3 " ) . off ( " change " ) .,
93 $( " # change " ) . html ( " ON " ) .,
94 change = false . ,
95 } else {
96 $( " # input3 " ) . change ( function () {
97 saida . append ( " change .. ( " + $( this ) . val () + " ) " ) .,
98 saida . append ( " <br > " ) .,
99 saida . scrollTop ( saida . prop ( " scrollHeight " ) ) .,
1 }) ,.
11 $( " # change " ) . html ( " OFF " ) .,
12 change = true . ,
13 }
14 }) .,
15
16 /* key */
17 var key = false . ,
18 $( " # key " ) . click ( function () {
19 if ( key ) {
11 $( " # input4 " ) . off ( " keydown keypress keyup " ) .,
111 $( " # key " ) . html ( " ON " ) .,
112 key = false , .
113 } else {
114 $( " # input4 " ) . on ( " keydown keypress keyup " ,
115 function ( event ) {
116 var type = event . type .,
117
118 saida . append ( type + " .. ( " + event . which + " ) " ) .,
119 saida . append ( " <br > " ) .,
12 saida . scrollTop ( saida . prop ( " scrollHeight " ) ) .,
121 }
122 ) ,.
123 $( " # key " ) . html ( " OFF " ) .,
124 key = true . ,
125 }
126 }) .,
127
128 /* mouse */
129 var mouse = false . ,
13 $( " # mouse " ) . click ( function () {
131 if ( mouse ) {
132 $( " # div1 " ) . off ( " click dblclick mousedown mouseup " +
133 " mouseenter mouseleave hover mouseover mouseout " ) .,
134 $( " # mouse " ) . html ( " ON " ) .,
135 mouse = false . ,
136 } else {
137 $( " # div1 " ) . on ( " click dblclick mousedown mouseup " +
138 " mouseenter mouseleave hover mouseover mouseout " ,
139 function ( event ) {
14 var x = event . pageX ,.
141 var y = event . pageY ,.
142 var type = event . type .,
143
144 saida . append ( type + " .. ( " + x + " , " + y + " ) " ) .,
145 saida . append ( " <br > " ) .,

416 www.k19.com.br
 417 J Q UERY

146 saida . scrollTop ( saida . prop ( " scrollHeight " ) ) .,

147 }
148 ) ,.
149 $( " # mouse " ) . html ( " OFF " ) .,
15 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 " ) .,
16 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 " ) ) .,
17 }) ,.
171 $( " # mousemove " ) . html ( " OFF " ) .,
172 mousemove = true . ,
173 }
174 }) .,
175 }) .,

Código Javascript 5.149: jquery-complementar.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-jquery-complementar2.zip

3 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/jQuery/public_html/jquery-complementar.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/jQuery/public_html/jquery-complementar.html.

Resumo do Capítulo

1 Resumidamente, jQuery é uma biblioteca JavaScript.

2 Podemos obter a biblioteca jQuery na versão compressed ou uncompressed.

3 A utilização de um CDN (Content Delivery Network), melhora o tempo de carregamento e a

disponibilidade da biblioteca jQuery.

4 O método on() permite associar eventos jQuery aos elementos HTML.

www.facebook.com/k19treinamentos 417
J Q UERY 418

5 O método off() permite dissociar eventos jQuery dos elementos HTML.

6 A biblioteca jQuery suporta todos os seletores do CSS. Além disso, ela oferece alguns seletores
que não existem no CSS.

7 Podemos definir o tempo de duração dos efeitos e animações do jQuery.

8 Podemos determinar uma função que deve ser executada ao término de um efeito ou anima-
ção.

9 A biblioteca jQuery oferece muitos recursos para a manipulação dos elementos HTML.

Prova

1 Qual alternativa está correta?

a) jQuery é uma biblioteca JavaScript.

b) jQuery é uma biblioteca HTML.

c) jQuery é uma biblioteca CSS.

d) jQuery é uma linguagem de programação.

e) Todas as alternativas anteriores estão incorretas.

2 Qual alternativa está correta?

a) Geralmente, a utilização de CDNs aumenta a quantidade dados transmitidos entre os navega-

dores e os Web Servers.

b) Geralmente, a utilização de CDNs diminui a disponibilidade do conteúdo.

c) Geralmente, a utilização de CDNs aumenta a latência na transmissão de dados para os nave-

gadores.

d) Geralmente, a utilização de CDNs aumenta a segurança dos sites e das aplicação web.

e) Geralmente, a utilização de CDNs diminui o tempo de carregamento das páginas web.

3 Quais alternativas estão corretas?

418 www.k19.com.br
419 J Q UERY

a) Podemos utilizar o método on() para adicionar os tratamentos dos eventos.

b) Podemos utilizar o método enable() para determinar os tratamentos dos eventos.

c) Podemos utilizar o método event() para adicionar ou eliminar os tratamentos dos eventos.

d) Podemos utilizar o método off() para eliminar os tratamentos dos eventos.

e) Podemos utilizar o método disable() para eliminar os tratamentos dos eventos.

4 Qual alternativa está correta?

a) jQuery suporta apenas os seletores do CSS.

b) jQuery não suporta todos os seletores do CSS.

c) jQuery não suporta nenhum seletor CSS.

d) jQuery suporta todos os seletores do CSS.

e) Todas as alternativas anteriores estão incorretas.

5 Qual alternativa está correta?

a) fadeOn, fadeOff são efeitos do jQuery.

b) slideLeft e slideRight são efeitos do jQuery.

c) hide e show são efeitos do jQuery.

d) jQuery não possui efeitos.

e) Todas as alternativas anteriores estão incorretas.

6 Quais alternativas estão corretas?

a) O método empty() remove o conteúdo dos elementos selecionados.

b) O after adiciona conteúdo imediatamente depois dos elementos selecionados.

c) O before adiciona conteúdo imediatamente antes dos elementos selecionados.

d) O addClass adiciona uma ou mais classes aos elementos selecionados.

e) O clone cria uma cópia dos elementos selecionados.

7 Qual alternativa está correta?

www.facebook.com/k19treinamentos 419
J Q UERY 420

a) A utilização do AJAX elimina o código JavaScript.

b) jQuery oferece diversos recursos para a utilização do AJAX.

c) O principal objetivo do AJAX é facilitar a utilização do CSS.

d) AJAX é uma biblioteca JavaScript.

e) O nome AJAX foi inspirado no clube de futebol holandês.

5 7
Minha Pontuação Pontuação Mínima: Pontuação Máxima:

420 www.k19.com.br
 A

APÊNDICE
P ROJETO

Para exercitar o conteúdo visto nesta apostila, implemete uma página web semelhante à imagem
a seguir.

Smartphone Desktop

Exercícios de Fixação

1 Abra o Netbeans e crie um projeto chamado blog.

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 é necessário ins-
talar 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 é necessário ins-
talar e configurar o Apache HTTP Server como vimos anteriormente.

Figura A.1: Projeto blog

422 www.k19.com.br
423 P ROJETO

Figura A.2: Projeto blog

Figura A.3: Projeto blog

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-projeto-fixacao1.zip

2 No projeto blog, altere o arquivo index.html.

www.facebook.com/k19treinamentos 423
P ROJETO 424

1 <! DOCTYPE html >

2 < html >
3 < head >
4 < title > K19 Blog </ title >
5 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
6 < meta name = " viewport " content = " width = device - width " >
7 < link rel = " stylesheet " type = " text / css " href = " css / principal . css " >
8 < script type = " text / javascript " src = " http .. // code . jquery . com / jquery -2..3. min . js " >
9 </ script >
1 < script type = " text / javascript " src = " js / principal . js " > </ script >
11 </ head >
12 < body >
13 < div id = " main - wrapper " >
14 < header id = " main - header " >
15 < h1 > K19 Blog </ h1 >
16
17 < nav >
18 < input id = " main - menu - btn " type = " button " value = " Menu " >
19
2 < ul >
21 < li > <a href = " # " > Home </ a > </ li >
22 < li > <a href = " # " > Arquivo </ a > </ li >
23 < li > <a href = " # " > Sobre </ a > </ li >
24 </ ul >
25 </ nav >
26 </ header >
27
28 < section id = " articles - container " >
29 <! - -
3 Quando o DIV abaixo estiver na a  rea vis
 vel da pa
 gina
31 um conjunto de posts sera  carregado via AJAX .
32 -->
33 < div id = " lazy - load - point " > </ div >
34 </ section >
35
36 < aside >
37 < section id = " archive - links " >
38 < header >
39 < h1 > Arquivo </ h1 >
4 </ header >
41
42 < ul >
43 < li > <a href = " # " > Janeiro 213 </ a > </ li >
44 < li > <a href = " # " > Fevereiro 213 </ a > </ li >
45 < li > <a href = " # " > Março 213 </ a > </ li >
46 < li > <a href = " # " > Abril 213 </ a > </ li >
47 < li > <a href = " # " > Maio 213 </ a > </ li >
48 < li > <a href = " # " > Junho 213 </ a > </ li >
49 < li > <a href = " # " > Julho 213 </ a > </ li >
5 < li > <a href = " # " > Agosto 213 </ a > </ li >
51 < li > <a href = " # " > Setembro 213 </ a > </ li >
52 < li > <a href = " # " > Outubro 213 </ a > </ li >
53 < li > <a href = " # " > Novembro 213 </ a > </ li >
54 < li > <a href = " # " > Dezembro 213 </ a > </ li >
55 </ ul >
56 </ section >
57 </ aside >
58
59 < footer >
6 < small >& copy ,. K19 Treinamentos 213. </ small >
61 </ footer >
62 </ div >
63 </ body >
64 </ html >

Código HTML A.1: index.html

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-projeto-fixacao2.zip

424 www.k19.com.br
425 P ROJETO

3 No projeto blog, crie um arquivo chamado principal.css em uma pasta chamada css.

1 /* Declarando as fontes que sera o utilizadas na pa  gina . */

2 @font - face {
3 font - family .. ’ Roboto ’,.
4 src .
. url ( ’ Roboto - Regular - webfont . eot ’) ,.
5 . url ( ’ Roboto - Regular - webfont . eot ?# iefix ’) format ( ’ embedded - opentype ’) ,
src .
6 url ( ’ Roboto - Regular - webfont . woff ’) format ( ’ woff ’) ,
7 url ( ’ Roboto - Regular - webfont . ttf ’) format ( ’ truetype ’) ,
8 url ( ’ Roboto - Regular - webfont . svg # RobotoRegular ’) format ( ’ svg ’) ,.
9 font - weight .. normal ,.
1 font - style .. normal ,.
11 }
12
13 @font - face {
14 font - family .. ’ Roboto ’,.
15 . url ( ’ Roboto - Italic - webfont . eot ’) .,
src .
16 src .
. url ( ’ Roboto - Italic - webfont . eot ?# iefix ’) format ( ’ embedded - opentype ’) ,
17 url ( ’ Roboto - Italic - webfont . woff ’) format ( ’ woff ’) ,
18 url ( ’ Roboto - Italic - webfont . ttf ’) format ( ’ truetype ’) ,
19 url ( ’ Roboto - Italic - webfont . svg # RobotoItalic ’) format ( ’ svg ’) ,.
2 font - weight .. normal ,.
21 font - style .. italic ,.
22 }
23
24 @font - face {
25 font - family .. ’ Roboto ’,.
26 . url ( ’ Roboto - Bold - webfont . eot ’) .,
src .
27 src .
. url ( ’ Roboto - Bold - webfont . eot ?# iefix ’) format ( ’ embedded - opentype ’) ,
28 url ( ’ Roboto - Bold - webfont . woff ’) format ( ’ woff ’) ,
29 url ( ’ Roboto - Bold - webfont . ttf ’) format ( ’ truetype ’) ,
3 url ( ’ Roboto - Bold - webfont . svg # RobotoBold ’) format ( ’ svg ’) .,
31 font - weight .. bold ,.
32 font - style .. normal ,.
33 }
34
35 @font - face {
36 font - family . .
. ’ Roboto ’,
37 . url ( ’ Roboto - BoldItalic - webfont . eot ’) ,.
src .
38 src .
. url ( ’ Roboto - BoldItalic - webfont . eot ?# iefix ’) format ( ’ embedded - opentype ’) ,
39 url ( ’ Roboto - BoldItalic - webfont . woff ’) format ( ’ woff ’) ,
4 url ( ’ Roboto - BoldItalic - webfont . ttf ’) format ( ’ truetype ’) ,
41 url ( ’ Roboto - BoldItalic - webfont . svg # RobotoBoldItalic ’) format ( ’ svg ’) ,.
42 font - weight .. bold ,.
43 font - style .. italic ,.
44 }
45
46 @font - face {
47 font - family .. ’ Roboto ’,.
48 . url ( ’ Roboto - Thin - webfont . eot ’) .,
src .
49 src .
. url ( ’ Roboto - Thin - webfont . eot ?# iefix ’) format ( ’ embedded - opentype ’) ,
5 url ( ’ Roboto - Thin - webfont . woff ’) format ( ’ woff ’) ,
51 url ( ’ Roboto - Thin - webfont . ttf ’) format ( ’ truetype ’) ,
52 url ( ’ Roboto - Thin - webfont . svg # RobotoThin ’) format ( ’ svg ’) .,
53 font - weight .. 2,.
54 font - style .. normal ,.
55 }
56
57 @font - face {
58 font - family . .
. ’ Roboto ’,
59 . url ( ’ Roboto - ThinItalic - webfont . eot ’) ,.
src .
6 src .
. url ( ’ Roboto - ThinItalic - webfont . eot ?# iefix ’) format ( ’ embedded - opentype ’) ,
61 url ( ’ Roboto - ThinItalic - webfont . woff ’) format ( ’ woff ’) ,
62 url ( ’ Roboto - ThinItalic - webfont . ttf ’) format ( ’ truetype ’) ,
63 url ( ’ Roboto - ThinItalic - webfont . svg # RobotoThinItalic ’) format ( ’ svg ’) ,.
64 font - weight .. 2,.
65 font - style .. italic ,.
66 }
67
68 @font - face {

www.facebook.com/k19treinamentos 425
 P ROJETO 426

69 font - family .. ’ Roboto ’,.

7 src .
. url ( ’ Roboto - Light - webfont . eot ’) .,
71 src .
. url ( ’ Roboto - Light - webfont . eot ?# iefix ’) format ( ’ embedded - opentype ’) ,
72 url ( ’ Roboto - Light - webfont . woff ’) format ( ’ woff ’) ,
73 url ( ’ Roboto - Light - webfont . ttf ’) format ( ’ truetype ’) ,
74 url ( ’ Roboto - Light - webfont . svg # RobotoLight ’) format ( ’ svg ’) .,
75 font - weight .. 1,.
76 font - style .. normal ,.
77 }
78
79 @font - face {
8 font - family .. ’ Roboto ’,
.
81 src .
. url ( ’ Roboto - LightItalic - webfont . eot ’) .,
82 src .
. url ( ’ Roboto - LightItalic - webfont . eot ?# iefix ’) format ( ’ embedded - opentype ’) ,
83 url ( ’ Roboto - LightItalic - webfont . woff ’) format ( ’ woff ’) ,
84 url ( ’ Roboto - LightItalic - webfont . ttf ’) format ( ’ truetype ’) ,
85 url ( ’ Roboto - LightItalic - webfont . svg # RobotoLightItalic ’) format ( ’ svg ’) ,.
86 font - weight .. 1,.
87 font - style .. italic ,.
88 }
89
9 @font - face {
91 font - family .. ’ Roboto ’,.
92 src .
. url ( ’ Roboto - Medium - webfont . eot ’) .,
93 src .
. url ( ’ Roboto - Medium - webfont . eot ?# iefix ’) format ( ’ embedded - opentype ’) ,
94 url ( ’ Roboto - Medium - webfont . woff ’) format ( ’ woff ’) ,
95 url ( ’ Roboto - Medium - webfont . ttf ’) format ( ’ truetype ’) ,
96 url ( ’ Roboto - Medium - webfont . svg # RobotoMedium ’) format ( ’ svg ’) ,.
97 font - weight .. 3,.
98 font - style .. normal ,.
99 }
1
11 @font - face {
12 font - family .. ’ Roboto ’,
.
13 src .
. url ( ’ Roboto - MediumItalic - webfont . eot ’) .,
14 src .
. url ( ’ Roboto - MediumItalic - webfont . eot ?# iefix ’) format ( ’ embedded - opentype ’) ,
15 url ( ’ Roboto - MediumItalic - webfont . woff ’) format ( ’ woff ’) ,
16 url ( ’ Roboto - MediumItalic - webfont . ttf ’) format ( ’ truetype ’) ,
17 url ( ’ Roboto - MediumItalic - webfont . svg # RobotoMediumItalic ’) format ( ’ svg ’) .,
18 font - weight .. 3,.
19 font - style .. italic ,.
11 }
111
112 /*
113 Removendo as margens internas e externas de todos os elementos para
114 evitar diferenças entre os navegadores .
115 */
116 * {
117 margin . .
. ,
118 padding .. ,.
119 font - family . .
. ’ Roboto ’ , ’ helvetica ’ , ’ arial ’ , ’ sans - serif ’,
12 }
121
122 @media ( max - width .. 48 px ) {
123 body {
124 . 1.2 rem ,.
font - size .
125 }
126
127 . show - comments {
128 display .. inline ,.
129 }
13
131 . article - comments form ,
132 . article - comments article {
133 display .. none ,.
134 }
135 }
136
137 . 64 px ) {
@media ( min - width .
138 # articles - container {

426 www.k19.com.br
 427 P ROJETO

139 width .. 7%,.

14 float .. left .,
141 }
142
143 aside {
144 width .. 28%,.
145 float .. left ,.
146 margin ..    2%, .
147 }
148
149 . article - comments form ,
15 . 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 {
16 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 {
17 margin ..    4 em .,
171 }
172
173 # main - header nav li {
174 background . . white . ,
175 border - radius . . .3 em ,.
176 padding .. .3 em .5 em .,
177 . .8 em ,.
font - size .
178 margin ..  .5 em ,.
179 color .. black ,.
18 }
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 . ,
19 }
191
192 . article - text figure {
193 margin - bottom . . 1 em .,
194 }
195
196 . article - text figure img {
197 width .. 1%,.
198 }
199
2 . article - text figure figcaption {
21 font - size .
. .5 em ,.
22 font - style .. italic ,.
23 text - align .. center . ,
24 }
25 }
26
27 @media ( min - width . . 48 px ) {
28 body {

www.facebook.com/k19treinamentos 427
 P ROJETO 428

29 font - size . . 1.5 rem ,.

21 }
211
212 . show - comments {
213 display . . none ,.
214 }
215 }
216
217 @media ( max - width . . 64 px ) {
218 # main - header nav {
219 position . . absolute . ,
22 . 1 em .,
top .
221 right .. .5 em ,.
222 text - align . . right . ,
223 }
224
225 # main - header nav input .. first - child {
226 background . . white . ,
227 border - radius . . .3 em ,.
228 border .. none ,.
229 padding . . .3 em .5 em .,
23 font - size . . .8 em ,.
231 margin ..   .1 em , .
232 cursor .. pointer ,.
233 }
234
235 # main - header nav input .. first - child .. hover {
236 color .. #38 c3f2 ,.
237 }
238
239 # main - header nav ul {
24 display . . none ,.
241 border - radius . . .3 em ,.
242 background . . white , .
243 list - style - type . . none ,.
244 padding . . .6 em ,.
245 box - shadow . . 3 px 3 px 1 px rgba ( ,  ,  , .8) ,.
246 }
247
248 # main - header nav li {
249 text - align . . left . ,
25 padding . . .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 {
26 color .. #38 c3f2 ,.
261 }
262
263 . article - text figure {
264 float .. left , .
265 margin ..  .6 em .6 em ,.
266 width .. 5 em .,
267 }
268
269 . article - text figure img {
27 width .. 1%,.
271 }
272
273 . article - text figure figcaption {
274 font - size . . .7 em ,.
275 font - style . . italic ,.
276 text - align . . center . ,
277 }
278 }

428 www.k19.com.br
 429 P ROJETO

279
28 # main - wrapper {
281 max - width .
. 98 px ,.
282 width .. 1%,.
283 margin ..  auto .,
284 }
285
286 # main - header {
287 position .. relative .,
288 background .. black ,.
289 padding .. .8 em ,.
29 }
291
292 # main - header h1 {
293 color .. white ,
.
294 font - size .
. 1.5 em ,.
295 display .. inline - block ,.
296 vertical - align .. middle ,.
297 }
298
299 article header {
3 background .
. #38 c3f2 ,.
31 . white ,
color . .
32 padding .
. .8 em ,.
33 }
34
35 article header h1 {
36 . 1.2 em ,.
font - size .
37 }
38
39 article header h2 {
31 font - size .
. .8 em ,.
311 font - weight .
. normal ,.
312 }
313
314 . article - text {
315 padding .. .8 em ,.
316 }
317
318 . article - text p {
319 font - size .
. .8 em ,.
32 . .8 em ,.
margin - bottom .
321 }
322
323 # archive - links header {
324 background .. #888,.
325 color .
. white .,
326 padding .. .8 em ,.
327 }
328
329 # archive - links header h1 {
33 font - size .
. 1 em .,
331 }
332
333 # archive - links ul {
334 padding .. .8 em  .8 em 1.6 em .,
335 color .. #888,.
336 . .8 em ,.
font - size .
337 }
338
339 # archive - links li {
34 padding .. .2 em ,.
341 }
342
343 # archive - links li a {
344 color .. inherit ,.
345 text - decoration . . none ,.
346 }
347
348 # archive - links li a .. hover {

www.facebook.com/k19treinamentos 429
 P ROJETO 430

349 . #38 c3f2 ,.

color .
35 }
351
352 . article - comments {
353 padding ..  .8 em ,.
354 }
355
356 . article - comments > input .. first - child {
357 border .. none ,.
358 background . . # c425 ,.
359 color .. white .,
36 . .8 em ,.
font - size .
361 padding .. .3 em .5 em .,
362 cursor .. pointer ,.
363 margin ..   2 em , .
364 }
365
366 . article - comments fieldset {
367 border .. 1 px solid #999,.
368 padding .. .8 em ,.
369 text - align .
. right .
,
37 margin ..   1 em ,.
371 }
372
373 . article - comments fieldset legend {
374 padding ..  .2 em ,.
375 color .
. #999,.
376 }
377
378 . article - comments fieldset input .. not ([ type = ’ submit ’]) ,
379 . article - comments fieldset textarea {
38 display .. block ,.
381 font - size .
. .8 em ,.
382 margin ..   .5 em , .
383 width .. 1%,.
384 border .. 1 px solid #999,.
385 padding .. .2 em ,.
386 }
387
388 . article - comments fieldset textarea {
389 height .
. 1 em ,.
39 }
391
392 . article - comments fieldset input [ type = ’ submit ’] {
393 border .. none ,.
394 background . . # c425 ,.
395 color .. white .,
396 . .8 em ,.
font - size .
397 padding .. .3 em .5 em .,
398 cursor .. pointer ,.
399 }
4
41 . article - comments article {
42 margin . .
.   1 em ,
43 }
44
45 . article - comments article p {
46 . .8 em ,.
font - size .
47 color .. #444,.
48 margin ..    1 em .,
49 }
41
411 # lazy - load - point {
412 height .. 24 px ,.
413 }
414
415 # lazy - load - point . loading {
416 background . . url ( ’ ajax - loader ’) no - repeat center .
,
417 }
418

430 www.k19.com.br
 431 P ROJETO

419 footer {
42 text - align .
. center .
,
421 clear .. left .,
422 }
423
424 footer small {
425 . .5 em ,.
font - size .
426 }

Código CSS A.1: principal.css

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-projeto-fixacao3.zip

4 No projeto blog, crie um arquivo chamado servico.php.

1 <? php for ($i = , . $i < 3,. $i ++) .. ? >

2 < article >
3 < header >
4 < h1 > Lorem ipsum dolor sit <? php echo $i ? > </ h1 >
5 < h2 > por Jonas Hirata </ h2 >
6 </ header >
7
8 < div class = " article - text " >
9 < figure >
1 < img
11 src = " img / paisagem . jpg "
12 title = " Paisagem "
13 alt = " Árvores ao redor de um lago no outono " >
14 < figcaption > Árvores ao redor de um lago no outono </ figcaption >
15 </ figure >
16 <p >
17 Lorem ipsum dolor sit amet , consectetur adipiscing elit .
18 Maecenas convallis viverra justo sed adipiscing .
19 Maecenas vitae arcu lectus . Praesent eleifend sapien et
2 consequat ultricies . Donec varius , leo a condimentum
21 porta , quam tortor lobortis metus , consectetur posuere
22 enim metus vitae lorem . In tempor gravida arcu in
23 sollicitudin . Nullam molestie , sem vitae volutpat
24 porta , ligula tortor pretium diam , sed adipiscing magna
25 massa ut nisl . Pellentesque congue nisl vehicula leo
26 tincidunt ultricies .
27 </ p >
28 </ div >
29
3 < div class = " article - comments " >
31 < input
32 class = " show - comments "
33 type = " button "
34 value = " Comentar / Exibir comenta  rios " >
35
36 < form >
37 < fieldset >
38 < legend > Deixe o seu comenta  rio </ legend >
39 < input type = " text " placeholder = " Nome " >
4 < input type = " email " placeholder = "E - mail " >
41 < textarea placeholder = " Comenta  rios " > </ textarea >
42 < input type = " submit " value = " Enviar " >
43 </ fieldset >
44 </ form >
45
46 < article >
47 < small > Jonas Hirata </ small >
48 <p >
49 Praesent eleifend egestas volutpat . Quisque quis
5 tortor ut odio adipiscing egestas sit amet ut
51 nisl . Vivamus venenatis turpis id nisl
52 facilisis , sed cursus odio scelerisque .

www.facebook.com/k19treinamentos 431
P ROJETO 432

53 </ p >
54 </ article >
55 </ div >
56 </ article >
57 <? php endfor ,. ? >

Código HTML A.2: servico.php

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-jquery-fixacao4.zip

5 No projeto blog, crie um arquivo chamado principal.js em uma pasta chamada js.

1 .
var scrollTimeout = ,
2 var isLoadingArticles = false .
,
3
4 $( document ) . ready ( function () {
5 $( ’# articles - container ’) . on ( ’ click ’ , ’. show - comments ’ , function ( e ) {
6 $( this ) . parent () . find ( ’ form , article ’) . slideDown () ,.
7 $( this ) . hide () ,.
8 }) .,
9
1 // Trata o evento de clique no bota o de menu adicionando uma classe
11 // ao mesmo para indicar que o mesmo esta  expandido .
12 $( ’# main - menu - btn ’) . click ( function ( e ) {
13 e . stopPropagation () .,
14 $( this ) . parent () . find ( ’ ul ’) . addClass ( ’ expanded ’) . slideDown () ,.
15 }) ,.
16
17 // Trata o evento de clique em qualquer a  rea da pa  gina para contrair e
18 // remover a classe expanded do menu principal .
19 $( ’ html ’) . click ( function ( e ) {
2 $( ’# main - header ul . expanded ’) . removeClass ( ’ expanded ’) . slideUp (4 , function () {
21 $( this ) . removeAttr ( ’ style ’) .,
22 }) .,
23 }) ,.
24
25 $( window ) . scroll ( function () {
26 // Utilizando um timeout para evitar chamadas excessivas
27 // à funça o afterScroll () .
28 clearTimeout ( scrollTimeout ) .,
29 scrollTimeout = setTimeout ( afterScroll , 5) .,
3 }) ,.
31
32 // Carregando os artigos assim que a pa
 gina for carregada .
33 loadArticles () .,
34 }) ,.
35
36 function afterScroll () {
37 if (! isLoadingArticles && $( ’# lazy - load - point ’) . isOnScreen () ) {
38 loadArticles () ,.
39 }
4 }
41
42 function loadArticles () {
43 $. ajax ({
44 url .. ’ servico . php ’ ,
45 dataType .. ’ html ’ ,
46 beforeSend .. function ( jqXHR , settings ) {
47 isLoadingArticles = true , .
48
49 // Exibe o GIF animado que indica o carregamento do conteu do .
5 $( ’# lazy - load - point ’) . addClass ( ’ loading ’) .,
51 },
52 complete .. function () {
53 // O uso do timeout neste ponto e
 desnecessa
 rio . Foi utilizado aqui
54 // para dar tempo do GIF animado ser visualizado em um servidor
55 // local .

432 www.k19.com.br
433 P ROJETO

56 setTimeout ( function () {
57 isLoadingArticles = false . ,
58 // Oculta o GIF animado que indica o carregamento do conteu  do .
59 $( ’# lazy - load - point ’) . removeClass ( ’ loading ’) .,
6 } , 1) .,
61 },
62 success .. function ( data , textStatus , jqXHR ) {
63 // O uso do timeout neste ponto e  desnecessa  rio . Foi utilizado aqui
64 // para dar tempo do GIF animado ser visualizado em um servidor
65 // local .
66 setTimeout ( function () {
67 $( ’# articles - container ’) . prepend ( data ) ,.
68 } , 1) .,
69 },
7 error .. function ( jqXHR , textStatus , errorThrown ) {
71 alert ( errorThrown ) .,
72 }
73 }) ,.
74 }
75
76 // Extendendo o jQuery com o me  todo isOnScreen que verifica se um
77 // elemento esta  na regia o vis
 vel da pa
 gina .
78 $. fn . isOnScreen = function () {
79 var win = $( window ) .,
8
81 var viewport = {
82 top .. win . scrollTop () ,
83 left .. win . scrollLeft ()
84 },.
85 viewport . right = viewport . left + win . width () ,.
86 viewport . bottom = viewport . top + win . height () ,.
87
88 var bounds = this . offset () .,
89 bounds . right = bounds . left + this . outerWidth () ,.
9 bounds . bottom = bounds . top + this . outerHeight () ,.
91
92 return (!( viewport . right < bounds . left ||
93 viewport . left > bounds . right ||
94 viewport . bottom < bounds . top ||
95 viewport . top > bounds . bottom ) ) ,.
96 },.

Código Javascript A.1: principal.js

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-projeto-fixacao5.zip

6 Copie o arquivo k02-projeto.zip da pasta K19-Arquivos para a sua Área de trabalho. Descom-
pacte esse arquivo e copie o conteúdo das pastas css e img para as pastas css e img do projeto blog
respectivamente.

.//k19.com.br/arquivos.
O arquivo k02-projeto.zip também está disponível em http.
Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-projeto-fixacao6.zip

7 No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/blog/public_html/index.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/blog/public_html/index.html.

www.facebook.com/k19treinamentos 433
P ROJETO 434

434 www.k19.com.br
 B

APÊNDICE
Q UIZZES

Quiz 1

Considere uma página HTML contendo um <div> com largura (width) 200px, margem
interna (padding) 10px e borda de 3px. Visualmente, qual é o espaço 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 Capítulo 3, ao atribuirmos margens internas e bor-
das 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, border-
left 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 idéia 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 (border-
left) + 3px (border-right) = 226px

Portanto o espaço horizontal visualmente ocupado pelo elemento é de 226px.

www.facebook.com/k19treinamentos 435
QUIZZES 436

436 www.k19.com.br
 C

APÊNDICE
R ESPOSTAS

Questão 1.1

Questão 1.2

Questão 1.3

Questão 1.4

Questão 1.5

Questão 1.6

Exercício Complementar 2.1

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 Treinamentos </ title >
6 </ head >
7
8 < body >
9 <p >
1 Lorem ipsum dolor sit amet , consectetur adipiscing elit . Suspendisse
11 bibendum pellentesque hendrerit . Aliquam pretium , quam in porttitor

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 >

Código HTML 2.159: pagina-simples.html

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/pagina-simples.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/pagina-simples.html.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-complementar1.zip

Exercício Complementar 2.2

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Curiosidades do Mundo </ title >
6 </ head >
7
8 < body >
9 < h1 > Curiosidades do Mundo </ h1 >
1
11 < h2 > Europa </ h2 >
12 <p >A Europa e  o segundo menor continente em superf  cie do mundo , cobrindo
13 cerca de 1 18  quilo  metros quadrados ou 2% da superf  cie da Terra
14 e cerca de 6 ,8% da a  rea acima do n  vel do mar . </ p >
15
16 < h3 > Alemanha </ h3 >
17 <p > Com 81 ,8 milho  es de habitantes em janeiro de 21 , o pa  s tem a maior
18 populaça o entre os Estados membros da Unia o Europeia e e  tambe  m o lar da
19 terceira maior populaça o de migrantes internacionais em todo o mundo . </ p >
2
21 < h4 > Hesse </ h4 >
22 <p >A capital e  Wiesbaden e a maior cidade Francoforte do Meno ( Frankfurt
23 am Main ) , onde esta  localizado um dos maiores aeroportos do mundo e um
24 centro financeiro de grande importa ncia . </ p >
25
26 < h5 > Frankfurt </ h5 >
27 <p > Frankfurt am Main ou Francoforte do Meno , mais conhecida simplesmente como
28 Frankfurt , e  a maior cidade do estado alema o de Hesse e a quinta maior cidade
29 da Alemanha , com uma populaça o 7. habitantes em 212. </ p >
3
31 < h2 > Ásia </ h2 >
32 <p >A Ásia e  o maior dos continentes , tanto em a  rea como em populaça o . </ p >
33
34 < h3 > Japa o </ h3 >
35 <p >O pa s e  um arquipe  lago de 6 852 ilhas , cujas quatro maiores sa o Honshu ,
36 Hokkaido , Kyushu e Shikoku , representando em conjunto 97% da a  rea
37 terrestre nacional . </ p >
38
39 < h4 > Okinawa </ h4 >
4 <p > Antigamente , Okinawa fazia parte de um reino independente , o reino Ryukyu ,
41 o que foi decisivo para o desenvolvimento de uma cultura pro  pria do desenrolar
42 de uma histo  ria particular e significativamente diferenciada do resto do

438 www.k19.com.br
439 R ESPOSTAS

43 Japa o . </ p >

44
45 < h5 > Nago </ h5 >
46 <p > De 21 de julho ate  23 de julho de 2 , foi sede do encontro anual do G8 . </ p >
47
48 <p > Fonte .. wikipedia . org </ p >
49 </ body >
5 </ html >

Código HTML 2.160: geografia.html

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/geografia.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/geografia.html.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-complementar2.zip

Exercício Complementar 2.3

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Seguro Treinamento - K19 </ title >
6 </ head >
7
8 < body >
9 < h1 > Na K19 o aluno faz o curso quantas vezes quiser ! </ h1 >
1 <p >
11 Comprometida com o aprendizado e com a satisfaça o dos seus alunos , a K19
12 criou o Seguro Treinamento . < br > Ao contratar um curso , o aluno podera 
13 refaze  - lo quantas vezes desejar mediante a disponibilidade de vagas e
14 pagamento da franquia do Seguro Treinamento .
15 </ p >
16 </ body >
17 </ html >

Código HTML 2.161: seguro-treinamento.html

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/seguro-treinamento.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/seguro-treinamento.html.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-complementar3.zip

Exercício Complementar 2.4

www.facebook.com/k19treinamentos 439
R ESPOSTAS 440

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Caracteres especiais </ title >
6 </ head >
7
8 < body >
9 < h1 > Caracteres especiais </ h1 >
1 <p >
11 & cross ,. & sext ,. & ofcir ,. & check ,. & sharp ,.
12 </ p >
13 </ body >
14 </ html >

Código HTML 2.162: caracteres-especiais.html

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/caracteres-especiais.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/caracteres-especiais.html.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-complementar4.zip

Exercício Complementar 2.5

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Texto pre  - formatado </ title >
6 </ head >
7
8 < body >
9 < h1 > Texto pre
 - formatado </ h1 >
1 < pre >
11 A B C D E F G
12
13 1 2 3 4 5 6 7
14
15 a b c d e f g
16 </ pre >
17 </ body >
18 </ html >

Código HTML 2.163: espacos-e-quebras-de-linha.html

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/espacos-e-quebras-de-linha.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/espacos-e-quebras-de-linha.html.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-complementar5.zip

440 www.k19.com.br
441 R ESPOSTAS

Exercício Complementar 2.6

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Co digo Java </ title >
6 </ head >
7 < body >
8 < h1 > Co
 digo Java </ h1 >
9 < code >
1 double numero = Math . random () ,.
11 </ code >
12 </ body >
13 </ html >

Código HTML 2.164: codigo-java.html

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/codigo-java.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/codigo-java.html.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-complementar6.zip

Exercício Complementar 2.7

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Elemento i e elemento b </ title >
6 </ head >
7 < body >
8 < h1 > Elemento i e elemento b </ h1 >
9 < ul >
1 < li > Porquinho - da -  ndia ou <i > Cavia porcellus </ i > </ li >
11 < li > <i > Backup </ i >( co  pia de segurança ) </ li >
12 < li > <i > shoot the breeze </ i >( bater papo ou jogar conversa fora ) </ li >
13 < li > <i > Moskva  </ i >( transliteraça o da palavra Moscou em russo ) </ li >
14 < li > <i > Se na o sabes , aprende ,. se ja  sabes , ensina . </ i > ( Confu
 cio ) </ li >
15 </ ul >
16
17 <p >
18 Atualmente , praticamente todos os <b > sistemas corporativos </ b >
19 possuem <b > interfaces web </ b >. Para quem deseja atuar no mercado
2 de <b > desenvolvimento de software </ b > , e  obrigato
 rio o conhecimento
21 das linguagens .. <b > HTML </ b > , <b > CSS </ b > e <b > JavaScript </ b >.
22 </ p >
23 </ body >
24 </ html >

Código HTML 2.165: elementos-i-b.html

www.facebook.com/k19treinamentos 441
R ESPOSTAS 442

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/elementos-i-b.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/elementos-i-b.html.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-complementar7.zip

Exercício Complementar 2.8

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Sa o Paulo </ title >
6 </ head >
7 < body >
8 < h1 > Sa o Paulo </ h1 >
9 <p >
1 A cidade de Sa o Paulo possui uma a  rea de 1.523 km < sup >2 </ sup >.
11 Em 211 , Sa o Paulo emitiu 16 ,43 milho  es de toneladas de
12 CO < sub >2 </ sub >.
13 </ p >
14 </ body >
15 </ html >

Código HTML 2.166: sao-paulo.html

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/sao-paulo.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/sao-paulo.html.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-complementar8.zip

Exercício Complementar 2.9

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Sa o Paulo FC </ title >
6 </ head >
7 < body >
8 < h1 > Sa o Paulo FC </ h1 >
9 <p >
1 O < strong > Sa o Paulo FC </ strong > e
 o u  nico
11 time brasileiro que ganhou < em > tre  s vezes </ em >
12 o < strong > mundial de clubes </ strong >.
13 </ p >

442 www.k19.com.br
443 R ESPOSTAS

14 </ body >

15 </ html >

Código HTML 2.167: spfc.html

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/spfc.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/spfc.html.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-complementar9.zip

Exercício Complementar 2.10

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Citaço  es </ title >
6 </ head >
7 < body >
8 <p >O que a Wikipe  dia fala sobre Java ? </ p >
9 < blockquote cite = " http .. // en . wikipedia . org / wiki / Java_ ( programming_language ) " >
1 <p >
11 Java is a general - purpose , concurrent , class - based , object - oriented
12 computer programming language that is specifically designed to have
13 as few implementation dependencies as possible . ...
14 </ p >
15 <p >
16 The original and reference implementation Java compilers , virtual
17 machines , and class libraries were developed by Sun from 1991 and
18 first released in 1995. As of May 27 , in compliance with the
19 specifications of the Java Community Process , Sun relicensed most
2 of its Java technologies under the GNU General Public License ....
21 </ p >
22 </ blockquote >
23
24 <p >
25 Galva o Bueno disse ..
26 <q cite = " http .. // www . naosalvo . com . br / as - melhorespiores - frases - de - galvao - bueno - em ←-
- um - so - lugar " >
27 A seleça o brasileira prioriza o coletivo e a individualidade
28 </ q >.
29 </ p >
3
31 <p >
32 < cite > Dom Quixote </ cite > de Miguel de Cervantes e  um dos livros mais
33 vendidos da histo  ria .
34 </ p >
35 </ body >
36 </ html >

Código HTML 2.168: mais-citacoes.html

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/mais-citacoes.html.

www.facebook.com/k19treinamentos 443
R ESPOSTAS 444

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/mais-citacoes.html.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-complementar1.zip

Exercício Complementar 2.11

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Abreviaço  es </ title >
6 </ head >
7 < body >
8 < h1 > Abreviaço  es </ h1 >
9 < ul >
1 < li > < abbr title = " Federal Bureau Investigation " > FBI </ abbr > </ li >
11 < li > < abbr title = " Central Intelligence Agency " > CIA </ abbr > </ li >
12 < li > < abbr title = " Crime Scene Investigation " > CSI </ abbr > </ li >
13 </ ul >
14 </ body >
15 </ html >

Código HTML 2.169: abbr.html

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/abbr.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/abbr.html.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-complementar11.zip

Exercício Complementar 2.12

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Definiço  es </ title >
6 </ head >
7 < body >
8 < h1 > Definiço  es </ h1 >
9 < dl >
1 < dt > < dfn > Folha seca </ dfn > </ dt >
11 < dd >
12 Chute que faz a bola percorrer uma trajeto  ria em curva acentuada com
13 uma queda brusca no final do percurso .
14 </ dd >
15 < dt > < dfn > Lanterna </ dfn > </ dt >
16 < dd >
17 Equipe que ocupa a u  ltima posiça o de um campeonato .
18 </ dd >

444 www.k19.com.br
445 R ESPOSTAS

19 < dt > < dfn > Primeiro pau </ dfn > </ dt >
2 < dd >
21 Trave mais pro  xima da origem de um cruzamento .
22 </ dd >
23 </ dl >
24 </ body >
25 </ html >

Código HTML 2.170: mais-definicoes.html

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/mais-definicoes.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/mais-definicoes.html.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-complementar12.zip

Exercício Complementar 2.13

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 alteraço  es </ title >
6 </ head >
7 < body >
8 < h1 > Alteraço es </ h1 >
9 <p >
1 <s > Atualmente , eu moro na Inglaterra . </ s >
11 < ins > Atualmente , eu moro no Brasil . </ ins >
12 < del > Eu quero conhecer a S  ria . </ del >
13 </ p >
14 </ body >
15 </ html >

Código HTML 2.171: mais-alteracoes.html

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/mais-alteracoes.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/mais-alteracoes.html.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-complementar13.zip

Exercício Complementar 2.14

1 <! DOCTYPE html >

2 < html lang = " pt - br " >

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 >
1 < li >
11 O Brasil foi pentacampea o em < time datetime = " 22 -6 -3 " > 3 de Junho
12 de 22 </ time >.
13 </ li >
14 < li >
15 Ele na o pode esquecer o < time datetime = " 3 -8 " > Dia das mulheres </ time >.
16 </ li >
17 </ ul >
18 </ body >
19 </ html >

Código HTML 2.172: mais-datas.html

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/mais-datas.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/mais-datas.html.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-complementar14.zip

Exercício Complementar 2.15

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Texto marcado </ title >
6 </ head >
7 < body >
8 < h1 > Texto marcado </ h1 >
9 <p >
1 < mark > Ayrton Senna da Silva </ mark > foi um piloto brasileiro de
11 < mark > Fo
 rmula 1 </ mark > , tre
 s vezes campea o mundial , nos anos de 1988 ,
12 199 e 1991. Foi tambe  m vice - campea o no controverso campeonato de 1989
13 e em 1993
14 </ p >
15 </ body >
16 </ html >

Código HTML 2.173: texto-marcado.html

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/texto-marcado.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/texto-marcado.html.

446 www.k19.com.br
447 R ESPOSTAS

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-complementar15.zip

Exercício Complementar 2.16

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Pontos Tur  sticos </ title >
6 </ head >
7 < body >
8 < h1 > Pontos Tur  sticos do Brasil </ h1 >
9
1 < dl >
11 < dt > Ilha Bela - SP </ dt >
12 < dd >
13 Praias , Trilhas e Mergulho em Na  ufrago .
14 </ dd >
15 < dt > Bonito - MS </ dt >
16 < dd >
17 Mergulho em rios de a  guas transparentes , cachoeiras , grutas e cavernas .
18 </ dd >
19 < dt > Museu de Arte de Sa o Paulo - SP </ dt >
2 < dd >
21 Grande acervo com diversas obras de artistas consagrados .
22 </ dd >
23 </ dl >
24 </ body >
25 </ html >

Código HTML 2.174: pontos-turisticos.html

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/pontos-turisticos.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/pontos-turisticos.html.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-complementar16.zip

Exercício Complementar 2.17

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Como instalar o seu XPTO </ title >
6 </ head >
7 < body >
8 < h1 > Como instalar o seu XPTO - K19 Eletronics </ h1 >
9
1 < ol >
11 < li >
12 Verifique se todos os acesso  rios esta o presentes .
13 </ li >

www.facebook.com/k19treinamentos 447
R ESPOSTAS 448

14 < li >
15 Coloque o aparelho na horizontal sobre uma superf
 cie plana .
16 </ li >
17 < li >
18 Conecte o aparelho ao computador utilizando um cabo USB .
19 </ li >
2 < li >
21 Use o CD - ROM para instalaça o 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 >
3 </ body >
31 </ html >

Código HTML 2.175: manual-k19.html

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/manual-k19.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/manual-k19.html.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-complementar17.zip

Exercício Complementar 2.18

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Links </ title >
6 </ head >
7 < body >
8 < h1 > Links </ h1 >
9 < ul >
1 < li > <a href = " http .. // www . k19 . com . br " > K19 </ a > </ li >
11 < li > <a href = " http .. // www . wikipedia . org / " > Wikipe  dia </ a > </ li >
12 < li > <a href = " http .. // facebook . com " > Facebook </ a > </ li >
13 </ ul >
14 </ body >
15 </ html >

Código HTML 2.176: mais-links.html

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/mais-links.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/mais-links.html.

448 www.k19.com.br
449 R ESPOSTAS

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-complementar18.zip

Exercício Complementar 2.19

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > 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 " / >
1
11 < h2 > Cursos </ h2 >
12 < ul >
13 < li >
14 < img src = " http .. // www . k19 . com . br / figs / k21 - logo - large . png " / >
15 K21 - Persiste  ncia com JPA2 e Hibernate
16 </ li >
17 < li >
18 < img src = " http .. // www . k19 . com . br / figs / k22 - logo - large . png " / >
19 K22 - Desenvolvimento Web Avançado com JSF2 , EJB3 .1 e CDI
2 </ li >
21 < li >
22 < img src = " http .. // www . k19 . com . br / figs / k23 - logo - large . png " / >
23 K23 - Integraça o de Sistemas com Webservices , JMS e EJB
24 </ li >
25 </ ul >
26 </ body >
27 </ html >

Código HTML 2.177: mais-imagens.html

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/mais-imagens.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/mais-imagens.html.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-complementar19.zip

Exercício Complementar 2.20

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Tabelas </ title >
6 </ head >
7 < body >
8 < table >
9 < thead >
1 < tr >
11 < th > Continente / Subcontinente </ th >

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 atualizaça o .. 11/212 </ td >
19 </ tr >
2 </ tfoot >
21 < tbody >
22 < tr >
23 < td rowspan = " 2 " > Ame  rica do Sul </ td >
24 < td > Sa o Paulo </ td >
25 < td > Portugue  s </ td >
26 </ tr >
27 < tr >
28 < td > Cidade do Me  xico </ td >
29 < td > Espanhol </ td >
3 </ tr >
31 < tr >
32 < td rowspan = " 3 " > Ásia </ td >
33 < td > To quio </ td >
34 < td > Japone  s </ td >
35 </ tr >
36 < tr >
37 < td > Xangai </ td >
38 < td > Mandarim </ td >
39 </ tr >
4 < tr >
41 < td > Nova De  lhi </ td >
42 < td > Hindi </ td >
43 </ tr >
44 < tr >
45 < td > Ame  rica do Norte </ td >
46 < td > Nova Iorque </ td >
47 < td > Ingle  s </ td >
48 </ tr >
49 </ tbody >
5 </ table >
51 </ body >
52 </ html >

Código HTML 2.178: mais-tabelas.html

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/mais-tabelas.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/mais-tabelas.html.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-complementar2.zip

Exercício Complementar 2.21

1 <! DOCTYPE html >

2 < html lang = " pt - br " >
3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Curr  culo </ title >
6 </ head >

450 www.k19.com.br
451 R ESPOSTAS

7 < body >

8 < h1 > Cadastro de Curr culo </ h1 >
9 < form action = " parametros . php " method = " post " >
1
11 < fieldset >
12 < legend > Informaço
 es Pessoais </ legend >
13
14 < label for = " nome_id " > Nome .. </ label >
15 < input
16 id = " nome_id "
17 type = " text "
18 name = " nome "
19 placeholder = " Digite o seu nome "
2 required >
21 < br >
22
23 < label for = " email_id " > Email .. </ label >
24 < input
25 id = " email_id "
26 type = " email "
27 name = " email "
28 placeholder = " Digite o seu email "
29 required >
3 < br >
31
32 < label for = " nascimento_id " > Data de Nascimento .. </ label >
33 < input
34 id = " nascimento_id "
35 type = " date "
36 name = " nascimento "
37 required >
38 < br >
39
4 < label for = " altura_id " > Altura ( m ) .. </ label >
41 < input
42 id = " altura_id "
43 type = " number "
44 name = " altura "
45 step = " .1 "
46 min = "  "
47 max = " 2 " >
48 < br >
49
5 < label for = " site_id " > Site .. </ label >
51 < input
52 id = " site_id "
53 type = " url "
54 name = " site "
55 placeholder = " Facebook , Linkedin , Twitter " >
56 < br >
57
58 < label for = " estado_civil_id " > Estado Civil .. </ label >
59 < select id = " estado_civil_id " name = " estado - civil " >
6 < option value = " -1 " > Selecione </ option >
61 < option value = " S " > Solteiro </ option >
62 < option value = " C " > Casado </ option >
63 < option value = " D " > Divorciado </ option >
64 < option value = " V " > Viu
 vo </ option >
65 </ select >
66 < br >
67
68 < label > Sexo .. </ label >
69 < input
7 id = " masculino_id "
71 type = " radio "
72 name = " sexo "
73 value = " masculino " >
74 < label for = " masculino_id " > Masculino </ label >
75 < input
76 id = " feminino_id "

www.facebook.com/k19treinamentos 451
 R ESPOSTAS 452

77 type = " radio "

78 name = " sexo "
79 value = " feminino " >
8 < label for = " feminino_id " > Feminino </ label >
81 < br >
82 </ fieldset >
83
84 < fieldset >
85 < legend > Endereço </ legend >
86
87 < label for = " cep_id " > CEP .. </ label >
88 < input
89 id = " cep_id "
9 type = " text "
91 name = " cep "
92 required >
93 < br >
94
95 < label for = " endereco_id " > Endereço .. </ label >
96 < input
97 id = " endereco_id "
98 type = " text "
99 name = " endereco "
1 required >
11 < br >
12 </ fieldset >
13
14 < fieldset >
15 < legend > Contato </ legend >
16
17 < label for = " telefone_id " > Telefone .. </ label >
18 < input
19 id = " telefone_id "
11 type = " tel "
111 name = " telefone " >
112 < br >
113
114 < label for = " celular_id " > Celular .. </ label >
115 < input
116 id = " celular_id "
117 type = " tel "
118 name = " celular " >
119 < br >
12 </ fieldset >
121
122 < fieldset >
123 < legend > Conhecimentos </ legend >
124
125 < input
126 id = " html_id "
127 type = " checkbox "
128 name = " conhecimentos "
129 value = " HTML " >
13 < label for = " html_id " > HTML </ label >
131
132 < input
133 id = " css_id "
134 type = " checkbox "
135 name = " conhecimentos "
136 value = " CSS " >
137 < label for = " css_id " > CSS </ label >
138
139 < input
14 id = " js_id "
141 type = " checkbox "
142 name = " conhecimentos "
143 value = " JS " >
144 < label for = " js_id " > JavaScript </ label >
145 < br >
146

452 www.k19.com.br
 453 R ESPOSTAS

147 < label for = " mais_conhecimentos_id " > Mais conhecimentos </ label >
148 < textarea
149 id = " mais_conhecimentos_id "
15 rows = " 1 "
151 cols = " 2 "
152 maxlength = " 5 " > Digite os seus conhecimentos </ textarea >
153 </ fieldset >
154
155 < input type = " submit " value = " Enviar " >
156 </ form >
157 </ body >
158 </ html >

Código HTML 2.179: mais-formularios.html

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/html/public_html/mais-formularios.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/html/public_html/mais-formularios.html.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-html-complementar21.zip

Questão 2.1

Questão 2.2

Questão 2.3

Questão 2.4

Questão 2.5

Questão 2.6

www.facebook.com/k19treinamentos 453
R ESPOSTAS 454

Questão 2.7

Questão 2.8

Questão 2.9

Questão 2.10

Questão 2.11

Questão 2.12

Questão 2.13

Questão 2.14

Questão 2.15

Questão 3.1

Questão 3.2

454 www.k19.com.br
455 R ESPOSTAS

Questão 3.3

Questão 3.4

Questão 3.5

Questão 3.6

Questão 3.7

Questão 3.8

Questão 3.9

Questão 3.10

Questão 3.11

Questão 3.12

www.facebook.com/k19treinamentos 455
R ESPOSTAS 456

Questão 3.13

Questão 3.14

Questão 3.15

Questão 3.16

Questão 3.17

Exercício Complementar 4.1

No projeto javascript, adicione um arquivo chamado exibe-numeros-1-50-2x.html e outro cha-

mado 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 nu  meros de 1 ate  5 duas vezes </ title >
6 < script type = " text / javascript " src = " exibe - numeros -1 -5 -2 x . js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.56: exibe-numeros-1-50-2x.html

1 for ( var x = ,. x < 2,. x ++) {

2 for ( var y = 1,. y <= 5,. y ++) {
3 console . log ( y ) .,
4 }
5 }

Código Javascript 4.136: exibe-numeros-1-50-2x.js

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/exibe-numeros-1-5-2x.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

456 www.k19.com.br
457 R ESPOSTAS

http..//localhost/~<USUARIO>/javascript/public_html/exibe-numeros-1-5-2x.html.

Utilize o console do navegador para observar as mensagens exibidas.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-complementar1.zip

Exercício Complementar 4.2

No projeto javascript, adicione um arquivo chamado exibe-nome-k19.html e outro chamado exibe-

nome-k19.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 nome e K19 </ title >
6 < script type = " text / javascript " src = " exibe - nome - k19 . js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.57: exibe-nome-k19.html

1 for ( var x = ,. x < 5,. x ++) {

2 console . log ( " Rafael Cosentino " ) .,
3
4 for ( var y = ,. y < 3,. y ++) {
5 console . log ( " K19 " ) .,
6 }
7 }

Código Javascript 4.137: exibe-nome-k19.js

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/exibe-nome-k19.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/exibe-nome-k19.html.

Utilize o console do navegador para observar as mensagens exibidas.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-complementar2.zip

Exercício Complementar 4.3

No projeto javascript, adicione um arquivo chamado multiplos-de-tres.html e outro chamado multiplos-

de-tres.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 > Mu
 ltiplos de tre  s </ title >
6 < script type = " text / javascript " src = " multiplos - de - tres . js " > </ script >

www.facebook.com/k19treinamentos 457
R ESPOSTAS 458

7 </ head >

8 < body >
9 </ body >
1 </ html >

Código HTML 4.58: multiplos-de-tres.html

1 for ( var x = 1,. x <= 6,. x ++) {

2 if ( x % 3 != ) {
3 console . log ( " * " ) .,
4 } else {
5 console . log ( " *** " )
6 }
7 }

Código Javascript 4.138: multiplos-de-tres.js

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/multiplos-de-tres.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/multiplos-de-tres.html.

Utilize o console do navegador para observar as mensagens exibidas.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-complementar3.zip

Exercício Complementar 4.4

No projeto javascript, adicione um arquivo chamado multiplos-de-quatro-e-sete.html e outro cha-

mado multiplos-de-quatro-e-sete.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 > Mu
 ltiplos de quatro e sete </ title >
6 < script type = " text / javascript " src = " multiplos - de - quatro -e - sete . js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.59: multiplos-de-quatro-e-sete.html

1 for ( var x = 1,. x <= 8,. x ++) {

2 var resto4 = x%4,.
3 var resto7 = x%7,.
4
5 if ( resto4 ==  || resto7 == ) {
6 console . log ( " * " ) .,
7 } else {
8 console . log ( x ) .,
9 }
1 }

Código Javascript 4.139: multiplos-de-quatro-e-sete.js

458 www.k19.com.br
459 R ESPOSTAS

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/multiplos-de-quatro-e-sete.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/multiplos-de-quatro-e-sete.html.

Utilize o console do navegador para observar as mensagens exibidas.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-complementar4.zip

Exercício Complementar 4.5

No projeto javascript, adicione um arquivo chamado exibe-triangulo.html e outro chamado exibe-

triangulo.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 tria ngulo </ title >
6 < script type = " text / javascript " src = " exibe - triangulo . js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.60: exibe-triangulo.html

1 var linha = " * " . ,

2 for ( var contador = 1,. contador <= 1,. contador ++) {
3 console . log ( linha ) .,
4 linha += " * " .,
5 }

Código Javascript 4.140: exibe-triangulo.js

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/exibe-triangulo.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/exibe-triangulo.html.

Utilize o console do navegador para observar as mensagens exibidas.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-complementar5.zip

Exercício Complementar 4.6

No projeto javascript, adicione um arquivo chamado exibe-triangulos.html e outro chamado exibe-

triangulos.js.

1 <! DOCTYPE html >

www.facebook.com/k19treinamentos 459
R ESPOSTAS 460

2 < html lang = " pt - br " >

3 < head >
4 < meta http - equiv = " Content - Type " content = " text / html ., charset = UTF -8 " >
5 < title > Exibe tria ngulos </ title >
6 < script type = " text / javascript " src = " exibe - triangulos . js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.61: exibe-triangulos.html

1 var linha = " * " . ,

2 for ( var contador = 1,. contador <= 8,. contador ++) {
3 console . log ( linha ) .,
4 var resto = contador % 4,.
5 if ( resto == ) {
6 linha = " * " .
,
7 } else {
8 linha += " * " ,.
9 }
1 }

Código Javascript 4.141: exibe-triangulos.js

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/exibe-triangulos.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/exibe-triangulos.html.

Utilize o console do navegador para observar as mensagens exibidas.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-complementar6.zip

Exercício Complementar 4.7

No projeto javascript, adicione um arquivo chamado fibonnaci.html e outro chamado fibonnaci.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 > Fibonacci </ title >
6 < script type = " text / javascript " src = " fibonnaci . js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.62: fibonnaci.html

1 var penultimo = ,.

2 .
var ultimo = 1,
3
4 console . log ( penultimo ) ,.
5 console . log ( ultimo ) .,
6
7 for ( var contador = ,. contador < 28,. contador ++) {

460 www.k19.com.br
461 R ESPOSTAS

8 var proximo = penultimo + ultimo .,

9 console . log ( proximo ) ,.
1
11 penultimo = ultimo ,.
12 ultimo = proximo ,.
13 }

Código Javascript 4.142: fibonnaci.js

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/fibonnaci.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/fibonnaci.html.

Utilize o console do navegador para observar as mensagens exibidas.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-complementar7.zip

Exercício Complementar 4.8

No projeto javascript, adicione um arquivo chamado embaralha.html e outro chamado embara-

lha.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 > Embaralha </ title >
6 < script type = " text / javascript " src = " embaralha . js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.63: embaralha.html

1 var array = new Array (1) .,

2
3 for ( var i = ,. i < array . length ,. i ++) {
4 array [ i ] = i ,.
5 }
6
7 for ( var i = ,. i < array . length ,. i ++) {
8 console . log ( array [ i ]) ,.
9 }
1
11 for ( var i = ,. i < 1,. i ++) {
12 var posicao1 = Math . floor ( Math . random () * 1) .
,
13 var posicao2 = Math . floor ( Math . random () * 1) .
,
14 var auxiliar = array [ posicao1 ], .
15
16 array [ posicao1 ] = array [ posicao2 ],.
17 array [ posicao2 ] = auxiliar ,.
18 }
19
2 console . log ( " -- -- -- - -- -- --- -- -- -- " ) .,
21
22 for ( var i = ,. i < array . length ,. i ++) {
23 console . log ( array [ i ]) .,

www.facebook.com/k19treinamentos 461
R ESPOSTAS 462

24 }

Código Javascript 4.143: embaralha.js

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/embaralha.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/embaralha.html.

Utilize o console do navegador para observar as mensagens exibidas.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-complementar8.zip

Exercício Complementar 4.9

No projeto javascript, adicione um arquivo chamado ordena.html e outro chamado ordena.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 > Ordena </ title >
6 < script type = " text / javascript " src = " ordena . js " > </ script >
7 </ head >
8 < body >
9 </ body >
1 </ html >

Código HTML 4.64: ordena.html

1 var array = new Array (1) .,

2
3 for ( var i = ,. i < array . length ,. i ++) {
4 array [ i ] = Math . floor ( Math . random () * 1) .,
5 }
6
7 for ( var i = ,. i < array . length ,. i ++) {
8 console . log ( array [ i ]) ,.
9 }
1
11 array . sort () ,.
12
13 console . log ( " -- -- -- - -- -- --- -- -- -- " ) .,
14
15 for ( var i = ,. i < array . length ,. i ++) {
16 console . log ( array [ i ]) .,
17 }

Código Javascript 4.144: ordena.js

No Windows, utilize o Chrome para acessar o endereço:

http..//localhost/javascript/public_html/ordena.html.

No Ubuntu, utilize o Chrome para acessar o endereço:

http..//localhost/~<USUARIO>/javascript/public_html/ordena.html.

462 www.k19.com.br
463 R ESPOSTAS

Utilize o console do navegador para observar as mensagens exibidas.

Arquivo: https..//github.com/K19/K19-Exercicios/archive/k2-javascript-complementar9.zip

Questão 4.1

Questão 4.2

Questão 4.3

Questão 4.4

Questão 4.5

Questão 4.6

Questão 4.7

Questão 4.8

Questão 4.9

Questão 4.10

www.facebook.com/k19treinamentos 463
R ESPOSTAS 464

Questão 4.11

Questão 5.1

Questão 5.2

Questão 5.3

a, d

Questão 5.4

Questão 5.5

Questão 5.6

todas as alternativas estão corretas

Questão 5.7

464 www.k19.com.br