Você está na página 1de 476

TREINAMENTOS

Desenvolvimento Web com HTML, CSS e Javascript

Desenvolvimento Web com HTML, CSS e Javascript

25 de novembro de 2013 As apostilas atualizadas esto disponveis em www.k19.com.br

Esta apostila contm: 289 exerccios de xao. 164 exerccios complementares. 56 questes de prova.

Sumrio Sobre a K19 Seguro Treinamento Termo de Uso Cursos 1 Introduo 1.1 Sites e Aplicaes Web . . . . . . . . . . . . . . . . . . 1.2 Navegadores e Dispositivos . . . . . . . . . . . . . . . 1.3 Web Servers e HTTP . . . . . . . . . . . . . . . . . . . . 1.4 Domnios e endereos IP . . . . . . . . . . . . . . . . . 1.5 DNS (Domain Name System) . . . . . . . . . . . . . . 1.6 Servios de Hospedagem . . . . . . . . . . . . . . . . . 1.7 SEO (Search Engine Optimization) . . . . . . . . . . . 1.8 Arquitetura Web . . . . . . . . . . . . . . . . . . . . . . 1.9 Ativando o IIS e ASP Classic no Windows 7 . . . . . . 1.10 Instalao do Apache HTTP Server no Ubuntu 13.04 1.11 Apache HTTP Server no Mac OS X Mountain Lion . . 1.12 Resumo do Captulo . . . . . . . . . . . . . . . . . . . . 1.13 Prova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 2.1 Introduo . . . . . . . . . . . . . . . . . 2.2 Estrutura Bsica . . . . . . . . . . . . . . 2.3 Editores HTML . . . . . . . . . . . . . . . 2.4 Ferramentas de Desenvolvimento Web 2.5 Exerccios de Fixao . . . . . . . . . . . 2.6 Semntica HTML . . . . . . . . . . . . . 2.7 Ttulos . . . . . . . . . . . . . . . . . . . . 2.8 Exerccios de Fixao . . . . . . . . . . . 2.9 Pargrafos . . . . . . . . . . . . . . . . . . 2.10 Character Entities . . . . . . . . . . . . . 2.11 Exerccios de Fixao . . . . . . . . . . . 2.12 Texto . . . . . . . . . . . . . . . . . . . . . 2.13 Exerccios de Fixao . . . . . . . . . . . 2.14 Listas . . . . . . . . . . . . . . . . . . . . 2.15 Exerccios de Fixao . . . . . . . . . . . 2.16 Iframes . . . . . . . . . . . . . . . . . . . 2.17 Links . . . . . . . . . . . . . . . . . . . . . 2.18 Exerccios de Fixao . . . . . . . . . . . 2.19 ncoras . . . . . . . . . . . . . . . . . . . 2.20 Exerccios de Fixao . . . . . . . . . . . 2.21 Imagens . . . . . . . . . . . . . . . . . . . 2.22 URLs absolutas e relativas . . . . . . . . 2.23 Exerccios de Fixao . . . . . . . . . . . 2.24 Tabelas . . . . . . . . . . . . . . . . . . .

ii 1 2 3 4 1 1 3 4 5 9 10 11 11 12 16 16 17 18 21 21 21 25 25 26 32 34 35 38 39 40 41 52 58 62 68 69 70 71 73 75 76 78 78

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

ii

www.k19.com.br

iii

S UMRIO

2.25 2.26 2.27 2.28 2.29 2.30 2.31 2.32 2.33 2.34 2.35 2.36 2.37 2.38 2.39 2.40 2.41 2.42 2.43 2.44 2.45 2.46 2.47 2.48 2.49 2.50 2.51 2.52 2.53 2.54 2.55 3 CSS 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 3.10 3.11 3.12 3.13 3.14 3.15 3.16

Exerccios de Fixao . . . . . . . . . . . Formulrios . . . . . . . . . . . . . . . . Exerccios de Fixao . . . . . . . . . . . Caixas de entrada especcas . . . . . . Exerccios de Fixao . . . . . . . . . . . Checkboxes e Radios . . . . . . . . . . . Seleo de cores . . . . . . . . . . . . . . Exerccios de Fixao . . . . . . . . . . . Botes . . . . . . . . . . . . . . . . . . . . Exerccios de Fixao . . . . . . . . . . . Drop-down list . . . . . . . . . . . . . . . Exerccios de Fixao . . . . . . . . . . . Fieldset . . . . . . . . . . . . . . . . . . . Exerccios de Fixao . . . . . . . . . . . Autocomplete . . . . . . . . . . . . . . . Exerccios de Fixao . . . . . . . . . . . Campos ou botes desabilitados . . . . Campos xos . . . . . . . . . . . . . . . . Exerccios de Fixao . . . . . . . . . . . Validao . . . . . . . . . . . . . . . . . . Exerccios de Fixao . . . . . . . . . . . Partes de um documento HTML . . . . Diviso de contedo . . . . . . . . . . . Exerccios de Fixao . . . . . . . . . . . Agrupando elementos . . . . . . . . . . Erro: Fechamento inadequado das tags Erro: Imagens sem texto alternativo . . Erro: Criar listas com o elemento br . . Exerccios Complementares . . . . . . . Resumo do Captulo . . . . . . . . . . . . Prova . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

83 85 91 93 97 99 100 101 103 105 106 108 109 110 111 112 113 114 114 115 117 118 123 123 124 124 124 125 125 133 135 141 141 143 144 145 145 150 154 155 156 163 164 170 171 176 177 178
iii

Box Model . . . . . . . . . Regras . . . . . . . . . . . Aplicando CSS ao HTML Comentrios . . . . . . . Chrome DevTools . . . . Exerccios de Fixao . . Cores . . . . . . . . . . . Unidades de medida . . Backgrounds . . . . . . . Exerccios de Fixao . . Textos . . . . . . . . . . . Exerccios de Fixao . . Fontes . . . . . . . . . . . Exerccios de Fixao . . Listas . . . . . . . . . . . Exerccios de Fixao . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

www.facebook.com/k19treinamentos

S UMRIO

iv

3.17 3.18 3.19 3.20 3.21 3.22 3.23 3.24 3.25 3.26 3.27 3.28 3.29 3.30 3.31 3.32 3.33 3.34 3.35 3.36 3.37 3.38 3.39 3.40 3.41 3.42 3.43 3.44 3.45 3.46 3.47 3.48 3.49 3.50 3.51 3.52 3.53 4

Bordas . . . . . . . . . . . . . . . . . . Exerccios de Fixao . . . . . . . . . Outline . . . . . . . . . . . . . . . . . Exerccios de Fixao . . . . . . . . . Sombras . . . . . . . . . . . . . . . . . Exerccios de Fixao . . . . . . . . . Margens . . . . . . . . . . . . . . . . . Exerccios de Fixao . . . . . . . . . Altura e Largura . . . . . . . . . . . . Exerccios de Fixao . . . . . . . . . Display e Visibilidade . . . . . . . . . Exerccios de Fixao . . . . . . . . . Opacidade . . . . . . . . . . . . . . . Exerccios de Fixao . . . . . . . . . Posicionamento . . . . . . . . . . . . Exerccios de Fixao . . . . . . . . . Overow e clip . . . . . . . . . . . . . Exerccios de Fixao . . . . . . . . . Transformaes . . . . . . . . . . . . Exerccios de Fixao . . . . . . . . . Transies . . . . . . . . . . . . . . . Exerccios de Fixao . . . . . . . . . Animaes . . . . . . . . . . . . . . . Exerccios de Fixao . . . . . . . . . Seletores . . . . . . . . . . . . . . . . Exerccios de Fixao . . . . . . . . . Media Queries . . . . . . . . . . . . . Exerccios de Fixao . . . . . . . . . Sprites . . . . . . . . . . . . . . . . . . Exerccios de Fixao . . . . . . . . . Gradientes (Contedo Extra) . . . . . Herana (Contedo Extra) . . . . . . box-sizing (Contedo Extra) . . . . . Design Responsivo (Contedo Extra) Exerccios Complementares . . . . . Resumo do Captulo . . . . . . . . . . Prova . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

179 184 185 187 188 190 191 194 195 196 197 200 201 202 203 207 209 211 213 215 217 221 222 225 228 232 238 241 242 243 244 248 249 249 253 295 297 305 305 305 306 308 312 312 319 320 324 328

JavaScript 4.1 Aplicando JavaScript ao HTML 4.2 Carregamento . . . . . . . . . . 4.3 Chrome DevTools . . . . . . . . 4.4 Exerccios de Fixao . . . . . . 4.5 Variveis . . . . . . . . . . . . . 4.6 Operadores . . . . . . . . . . . . 4.7 Controle de uxo . . . . . . . . 4.8 Exerccios de Fixao . . . . . . 4.9 Objetos . . . . . . . . . . . . . . 4.10 Exerccios de Fixao . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

iv

www.k19.com.br

S UMRIO

4.11 4.12 4.13 4.14 4.15 4.16 4.17 4.18 4.19 4.20 4.21 4.22 4.23 4.24 4.25 4.26 4.27 4.28 4.29 5

Funes . . . . . . . . . . . . . . . Exerccios de Fixao . . . . . . . Arrays . . . . . . . . . . . . . . . . Strings . . . . . . . . . . . . . . . . Exerccios de Fixao . . . . . . . DOM - Document Object Model Exerccios de Fixao . . . . . . . Eventos . . . . . . . . . . . . . . . Exerccios de Fixao . . . . . . . Web Storage . . . . . . . . . . . . Exerccios de Fixao . . . . . . . History . . . . . . . . . . . . . . . Exerccios de Fixao . . . . . . . Geolocalizao . . . . . . . . . . . Exerccios de Fixao . . . . . . . Alarmes (Contedo Extra) . . . . Exerccios Complementares . . . Resumo do Captulo . . . . . . . . Prova . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

334 336 338 341 342 350 352 353 358 360 361 362 364 365 365 366 367 369 370 375 375 376 379 382 385 392 393 394 396 403 406 408 410 411 417 418

jQuery 5.1 Introduo . . . . . . . . . . 5.2 Exerccios de Fixao . . . . 5.3 Eventos . . . . . . . . . . . . 5.4 Exerccios de Fixao . . . . 5.5 Seletores . . . . . . . . . . . 5.6 Exerccios de Fixao . . . . 5.7 Efeitos e Animaes . . . . . 5.8 Exerccios de Fixao . . . . 5.9 Manipulao . . . . . . . . . 5.10 Exerccios de Fixao . . . . 5.11 Mais mtodos . . . . . . . . 5.12 AJAX . . . . . . . . . . . . . . 5.13 Exerccios de Fixao . . . . 5.14 Exerccios Complementares 5.15 Resumo do Captulo . . . . . 5.16 Prova . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

A Projeto 421 A.1 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421 B Quizzes C Respostas 435 437

www.facebook.com/k19treinamentos

S UMRIO

vi

vi

www.k19.com.br

S UMRIO

Sobre a K19
A K19 uma empresa especializada na capacitao de desenvolvedores de software. Sua equipe composta por prossionais formados em Cincia da Computao pela Universidade de So Paulo (USP) e que possuem vasta experincia em treinamento de prossionais para rea de TI. O principal objetivo da K19 oferecer treinamentos de mxima qualidade e relacionados s principais tecnologias utilizadas pelas empresas. Atravs desses treinamentos, seus alunos tornam-se capacitados para atuar no mercado de trabalho. Visando a mxima qualidade, a K19 mantm as suas apostilas em constante renovao e melhoria, oferece instalaes fsicas apropriadas para o ensino e seus instrutores esto sempre atualizados didtica e tecnicamente.

www.facebook.com/k19treinamentos

S UMRIO

Seguro Treinamento
Na K19 o aluno faz o curso quantas vezes quiser! Comprometida com o aprendizado e com a satisfao dos seus alunos, a K19 a nica que possui o Seguro Treinamento. Ao contratar um curso, o aluno poder refaz-lo quantas vezes desejar mediante a disponibilidade de vagas e pagamento da franquia do Seguro Treinamento. As vagas no preenchidas at um dia antes do incio de uma turma da K19 sero destinadas ao alunos que desejam utilizar o Seguro Treinamento. O valor da franquia para utilizar o Seguro Treinamento 10% do valor total do curso.

www.k19.com.br

S UMRIO

Termo de Uso
Termo de Uso
Todo o contedo desta apostila propriedade da K19 Treinamentos. A apostila pode ser utilizada livremente para estudo pessoal . Alm disso, este material didtico pode ser utilizado como material de apoio em cursos de ensino superior desde que a instituio correspondente seja reconhecida pelo MEC (Ministrio da Educao) e que a K19 seja citada explicitamente como proprietria do material. proibida qualquer utilizao desse material que no se enquadre nas condies acima sem o prvio consentimento formal, por escrito, da K19 Treinamentos. O uso indevido est sujeito s medidas legais cabveis.

www.facebook.com/k19treinamentos

S UMRIO

TR

S TO EN AM EIN TREINAMENTOS TR EIN AM EN TO

Conhea os nossos cursos


K01- Lgica de Programao K02 - Desenvolvimento Web com HTML, CSS e JavaScript K03 - SQL e Modelo Relacional K11 - Orientao a Objetos em Java K12 - Desenvolvimento Web com JSF2 e JPA2 K21 - Persistncia com JPA2 e Hibernate K22 - Desenvolvimento Web Avanado com JFS2, EJB3.1 e CDI K23 - Integrao 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 Orientao a Objetos K32 - Desenvolvimento Web com ASP.NET MVC

www.k19.com.br/cursos

www.k19.com.br

CAPTULO

I NTRODUO

Sites e Aplicaes Web


Normalmente, as pessoas utilizam o termo site quando se referem a blogs, sites de notcias, sites institucionais, portais, lojas virtuais, entre outros. J a denominao aplicao web muito utilizada para sistemas de gesto empresarial que so acessados atravs de navegadores (browsers). No h uma denio exata que diferencie claramente sites e aplicaes web. Alguns defendem que os sites so read-only (somente leitura) enquanto as aplicaes web so read-write (leitura e escrita). Nessa denio, os sites apenas fornecem contedo enquanto as aplicaes web podem fornecer e/ou receber contedo. Seguindo essa linha de raciocnio, algumas pessoas gostam de utilizar o grau de interatividade com os usurios para classicar como site ou aplicao web. Nessa viso, aplicaes web seriam mais interativas e os sites menos interativos. Contudo, no h uma medida denida para calcular esse grau de interatividade e com isso aplicar de forma objetiva essa classicao. Dessa forma, essa diferenciao, na prtica, subjetiva. Outras pessoas preferem utilizar o critrio do propsito para classicar como site ou aplicao web. Por exemplo, se o propsito divulgar as informaes de uma empresa, os dados de um produto, as notcias de um determinado assunto, utiliza-se o termo site. Se o propsito criar uma ferramenta para controlar as atividades administrativas de uma organizao, utiliza-se a denominao aplicao web. Utilizando o critrio do propsito para classicar como site ou aplicao web, podemos concluir que, geralmente, os sites necessitam de uma interface mais atrativa pois normalmente esto vendendo alguma coisa ou alguma ideia. Por outro lado, na maior parte dos casos, o mais importante para as aplicaes web possuir uma interface fcil de utilizar. Independentemente do critrio de classicao utilizado, os tpicos discutidos nesse treinamento so importantes tanto para o desenvolvimento de sites quanto para o desenvolvimento de aplicaes web. Portanto, do nosso ponto de vista, essas diferenas no sero to relevantes.
www.facebook.com/k19treinamentos

I NTRODUO

Figura 1.1: Sites

Figura 1.2: Aplicaes Web

www.k19.com.br

I NTRODUO

Navegadores e Dispositivos
As pessoas acessam sites e aplicaes web atravs de navegadores (browsers) como Chrome, Firefox, Internet Explorer e Safari. Normalmente, esses navegadores possuem algumas diferenas na forma de exibir as pginas web aos usurios. Antigamente, essas diferenas eram maiores. Com o passar do tempo, os navegadores caram cada vez mais parecidos nesse aspecto. Contudo, os desenvolvedores web ainda devem tomar cuidado com essas diferenas.

Figura 1.3: ndice de utilizao dos navegadores em Outubro de 2013 (fonte http://gs.statcounter.com/)

Outro problema de compatibilidade importante causado pela grande variedade de dispositivos que podem ser utilizados para acessar os sites e as aplicaes web. Atualmente, as pessoas acessam os sites e as aplicaes web atravs de computadores tradicionais, tablets, celulares, televisores, entre outros. Esses dispositivos possuem telas de tamanhos diferentes. Dessa forma, os desenvolvedores web devem considerar essas diferenas na criao das pginas web. Hoje em dia, fala-se muito de design responsivo. Os sites ou as aplicaes web so ditos responsivos se eles esto preparados para diferentes tamanhos de tela.

Figura 1.4: Design Responsivo

www.facebook.com/k19treinamentos

I NTRODUO

Web Servers e HTTP


Os sites e as aplicaes web so implantados em computadores conectados Internet ou a uma rede privada qualquer (Intranet). Normalmente, os sites so implantados em computadores conectados Internet pois assim podero ser acessados praticamente de qualquer lugar do mundo. Por outro lado, as aplicaes web, muitas vezes, so implantadas em computadores conectados a uma Intranet pois comum ser necessrio restringir o acesso externo elas.

Figura 1.5: Internet

Figura 1.6: Intranet

Os computadores nos quais os sites e as aplicaes web so implantados so chamados de Web


4
www.k19.com.br

I NTRODUO

Servers. Quando acessamos uma pgina web atravs de um navegador, ele realiza uma requisio ao Web Server onde essa pgina est armazenada. Ao receber a resposta do Web Server com a pgina web solicitada, o navegador a exibe para ns. As mensagens de requisio e resposta trocadas entre o navegador e o web server so denidas pelo protocolo HTTP.

GET /cursos/k02 HTTP/1.1 Host: k19.com.br

Requisio HTTP

Resposta HTTP

HTTP/1.1 200 OK Date: Mon, 23 May 2014 22:38:34 GMT Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux) Last-Modified: Wed, 08 Jan 2014 23:11:55 GMT Content-Type: text/html; charset=UTF-8 Content-Length: 131 Connection: Keep-Alive <html> <head> <title>K19 - Treinamentos</title> </head> <body> K02 - Desenvolvimento Web com HTML, CSS e JavaScript </body> </html>

Figura 1.7: Interao entre os navegadores e os Web Servers

Considere um site ou uma aplicao web implantado em um Web Server que est conectado a uma rede. A princpio, qualquer navegador executando em um dispositivo conectado a essa rede pode realizar requisies a esse Web Server. Alguns softwares especializados so utilizados para administrar os sites e as aplicaes web implantadas nos Web Servers. Os principais so o Apache HTTP Server da Apache Software Foundation e o Internet Information Services (IIS) da Microsoft.

Domnios e endereos IP
Os dispositivos conectados a uma rede so identicados atravs de endereos formados por sequncias de nmeros. Esses endereos so chamados de endereos IP. Em uma Intranet, quem controla os endereos IP dos dispositivos conectados a prpria organizao que administra essa Intranet. Por outro lado, os endereos IP dos dispositivos conectados Internet so gerenciados pelos provedores de acesso (ISP).
www.facebook.com/k19treinamentos

I NTRODUO

Figura 1.8: Endereos IP

A princpio, para acessar uma pgina de um site ou de uma aplicao web, devemos conhecer o endereo IP do Web Server que contm esse site ou essa aplicao web. Atualmente, o endereo IP do Web Server onde o site da K19 est implantado 184.72.247.119. Podemos utilizar esse endereo IP para acessar as pginas do site da K19. O endereo IP 200.144.183.244 est vinculado a um dos Web Servers onde o site da USP est implantado. Tambm podemos acessar as pginas do site da USP utilizando diretamente esse endereo IP . Analogamente, podemos acessar as pginas da Wikipdia utilizando o endereo IP 208.80.152.130.

Figura 1.9: Acessando o Web Server da K19 pelo endereo IP

www.k19.com.br

I NTRODUO

Figura 1.10: Acessando o Web Server da USP pelo endereo IP

Figura 1.11: Acessando o Web Server da Wikipdia pelo endereo IP

Se voc tiver uma memria muito boa pode decorar os endereos IP dos sites que acessa com maior frequncia. Mas, para maior parte das pessoas, seria impossvel decorar tantos nmeros. Para resolver esse problema, os endereos IP so associados a domnios. Veja alguns exemplos de domnios.

www.k19.com.br

www.usp.br

www.wikipedia.org

As pessoas conseguem decorar ou deduzir os domnios bem mais facilmente do que os endereos IP.
www.facebook.com/k19treinamentos

I NTRODUO

Figura 1.12: Acessando o Web Server da K19 pelo domnio

Figura 1.13: Acessando o Web Server da USP pelo domnio

Figura 1.14: Acessando o Web Server da Wikipdia pelo domnio

H uma outra vantagem importante dos domnios sobre os endereos IP. Em alguns casos, o endereo IP de um Web Server precisa ser alterado. Geralmente, essa modicao ocorre por motivos tcnicos. Supondo que essa mudana ocorra, quem estiver acessando esse Web Server atravs do endereo IP antigo no conseguir mais acess-lo dessa forma. Por outro lado, quem estiver acessando esse Web Server atravs do domnio dele poder continuar acessando da mesma forma pois esse domnio pode ser facilmente associado ao novo endereo IP.
8
www.k19.com.br

I NTRODUO

Figura 1.15: Alterao do Web Server

Os domnios so controlados por organizaes geralmente vinculadas ao governo. Por exemplo, os domnios .br so controlados e disponibilizados pelo Registro de Domnios para a Internet no Brasil (registro.br).

DNS (Domain Name System)


Como vimos, podemos acessar um Web Server diretamente atravs do seu endereo IP ou indiretamente atravs de um domnio. Para utilizar a segunda abordagem, necessrio consultar um servidor DNS para traduzir o domnio desejado para o endereo IP correspondente. Basicamente, a tarefa dos servidores DNS informar o endereo IP associado a um domnio.
www.facebook.com/k19treinamentos

I NTRODUO

10

Figura 1.16: Interao entre os navegadores e os servidores DNS

H diversos servidores DNS que so pblicos. Eis uma lista com alguns deles. OpenDNS (208.67.222.222 e 208.67.220.220) Google Public DNS (8.8.8.8 e 8.8.4.4) Level3 (209.244.0.3 e 209.244.0.4)

Servios de Hospedagem
Uma organizao pode possuir computadores atuando como Web Servers em sua prpria infraestrutura ou na infraestrutura de empresas especializadas. Em determinadas situaes, a primeira possibilidade mais conveniente. Por exemplo, normalmente, as instituies bancrias preferem manter os seus sites e as suas aplicaes web em Web Servers dentro da sua prpria infraestrutura. Essa abordagem permite um controle maior da comunicao entre essas instituies e os seus clientes. Mas, ela exige grandes investimentos. Para garantir que os seus Web Servers estejam sempre funcionando, essas instituies bancrias mantm prossionais 24 horas por dia 7 dias por semana (24/7). Caso contrrio, os sites ou as aplicaes web dessas instituies podem car fora do ar e gerar grandes prejuzos. Por outro lado, muitas vezes, mais conveniente manter os Web Servers de uma organizao na infraestrutura de uma empresa especializada. Dessa forma, a responsabilidade de mant-los funcionando delegada essa empresa. Essa abordagem, geralmente, diminui os custos. Contudo, o controle delegado a uma outra empresa. O servio oferecido por essas empresas denominado servio de hospedagem. Eis uma lista de empresas que oferecem esse tipo de servio. Amazon
10
www.k19.com.br

11

I NTRODUO

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 contedo relacionado s palavras chaves utilizadas nas buscas. Os sites mais relevantes so apresentados antes e com maior destaque. Para responder rapidamente s consultas realizadas, as ferramentas de busca analisam previamente os sites. Esse processo de anlise chamado de indexao. A indexao realizada por programas de computador que interagem com os sites para obter informaes sobre o contedo de cada um deles. Esses programas so chamados de robs.

Figura 1.17: Robs

No desenvolvimento de um site, podemos aplicar tcnicas que facilitam e melhoram a anlise dos robs das ferramentas de busca. Essas tcnicas so desenvolvidas pelos especialistas em SEO (Search Engine Optimization). Normalmente, as tcnicas de SEO so mais importantes para os sites do que para as aplicaes web.

Arquitetura Web
Vamos utilizar um diagrama para apresentar uma viso geral da arquitetura web.
www.facebook.com/k19treinamentos

11

I NTRODUO

12

Figura 1.18: Diagrama geral da arquitetura web

Observe que o diagrama foi dividido em duas partes: client side e server side. Alguns prossionais se especializam no client side e outros no server side. Outra denominao possvel para client side front-end e para server side back-end. Por exemplo, um web designer deve ter bons conhecimentos do client side. Por outro lado, um programador web deve ter bons conhecimentos do server side. Geralmente, os web designers no precisam ter conhecimento do server side mas t-lo pode ser til. Por outro lado, os programadores web precisam conhecer razoavelmente bem o client side. Nesse treinamento, estamos interessados especicamente no client side.

Ativando o IIS e ASP Classic no Windows 7


Se voc quiser utilizar o Windows 7 para fazer os exerccios dos prximos captulos, 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 NTRODUO

No Painel de Controle, clique em Programas.

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

www.facebook.com/k19treinamentos

13

I NTRODUO

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 boto OK.

Aguarde a ativao dos recursos selecionados.


14
www.k19.com.br

15

I NTRODUO

Depois do trmino da ativao, abra um navegador e acesse o endereo http://localhost.

www.facebook.com/k19treinamentos

15

I NTRODUO

16

Instalao do Apache HTTP Server no Ubuntu 13.04


Se voc quiser utilizar o Ubuntu 13.04 para fazer os exerccios dos prximos captulos, 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

Congurao do Userdir
Congure 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 exerccios dos prximos captulos, congure o Apache HTTP Server de acordo com os passos a seguir. 1. No diretrio /etc/apache2/users/, crie um arquivo de congurao com o nome do seu usurio (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 >
Cdigo XML 1.1: nome_do_usuario.conf

2. Altere as permisses 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 NTRODUO

4. Descomente a linha encontrada anteriormente.


1 LoadModule php5_module libexec / apache2 / libphp5 . so

5. Crie uma pasta chamada Sites na pasta do seu usurio.


mkdir ~/ Sites

6. Inicie o Apache HTTP Server.


sudo apachectl start

7. Congure o Apache HTTP Server para iniciar automaticamente.


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

Resumo do Captulo

No h um critrio exato para diferenciar o que um site e o que uma aplicao web.

Os desenvolvedores web devem considerar as diferenas entre os navegadores (browsers) e os dispositivos (computadores, tablets, celulares, tvs, entre outros) na criao das pginas web de um site ou de uma aplicao web.

A Internet a maior rede pblica de computadores.

Uma rede privada de computadores denominada Intranet

Os sites e as aplicaes web so implantados em computadores denominados Web Servers.

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

Os dispositivos conectados a uma rede de computadores so identicados atravs de endereos

IP.

Para no ter que decorar endereos IP, podemos utilizar domnios.

A utilizao de domnios facilita uma eventual troca do endereo IP de um Web Server.


www.facebook.com/k19treinamentos

17

I NTRODUO
10

18

A funo principal de um servidor DNS traduzir domnios para endereos IP.

Organizaes de grande porte costuma implantar os seus sites e as suas aplicaes web em Web Servers dentro da sua prpria infraestrutura. Por outro lado, organizaes menores, normalmente, preferem contratam empresas especializadas no servio de hospedagem.

11

As tcnicas de SEO so aplicadas com o intuito de melhorar o posicionamento de um site nos resultados das consultas realizadas nas ferramentas de busca.

12

13

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

Prova

Qual alternativa est correta? a) Existe uma diviso clara e exata entre o conceito de site e aplicao web. b) Geralmente, os sites possuem maior grau de interatividade com o usurio do que as aplicaes web. c) As aplicaes web no so utilizadas como ferramentas para controle administrativo de uma empresa. d) Geralmente, os sites vendem algum produto ou alguma ideia. e) Geralmente, as aplicaes web vendem algum produto ou alguma ideia.

Qual alternativa est correta? a) A forma de exibio das pgina web padro em todos os navegadores. b) A forma de exibio das pgina web padro em todos os dispositivos. c) O Design Responsivo trata de questes relacionadas performance dos sites. d) O Design Responsivo trata de questes relacionadas performance dos navegadores. e) Os sites ou as aplicaes web so ditos responsivos se eles esto preparados para diferentes tamanhos de tela.

Qual alternativa est correta? a) HTTP protocolo de comunicao.

18

www.k19.com.br

19

I NTRODUO

b) A Internet uma rede de computadores privada. c) Os sites e as aplicaes web so implantados em Web Computers. d) Aplicaes web s podem ser implantadas em redes privadas. e) Sites s podem ser implantados na Internet.

Qual alternativa est correta? a) O endereo IP de um dispositivo determina precisamente a localizao geogrca desse dispositivo. b) O contedo de um site determinado pelo domnio associado ao Web Server onde esse site est implantado. c) Domnios so associados a endereos IP. d) Para aplicaes web devemos utilizar domnios especiais. e) Todo domnio inicia com www.

Qual alternativa est correta? a) A funo principal de um servidor DNS (Domain Name System) informar o nome do proprietrio de um site. b) O objetivo principal das empresas que fornecem servios de hospedagem vender domnios. c) Tcnicas de SEO melhoram a velocidade de carregamento de um site. d) Tcnicas de SEO melhoram o posicionamento dos sites nas ferramentas de busca. e) O objetivo das empresas especializadas em SEO oferecer servios de hospedagem.

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.

Minha Pontuao

Pontuao Mnima:

Pontuao Mxima:

www.facebook.com/k19treinamentos

19

I NTRODUO

20

20

www.k19.com.br

CAPTULO

HTML

Introduo
Quando acessamos uma pgina web, estamos interessados na informao contida nessa pgina. Essa informao pode estar na forma de texto, imagem ou vdeo. O contedo de uma pgina web denido com a linguagem HTML (HyperText Markup Language). HTML uma linguagem de marcao originalmente proposta por Tim Berners-Lee no nal da dcada de 1980. O objetivo do Tim Barners-Lee era criar um mecanismo simples que pudesse ser utilizado por qualquer pessoa que quisesse disseminar documentos cientcos. Desde sua proposta at os dias de hoje, a linguagem HTML sofreu diversas alteraes. A cada verso, novos recursos so adicionados e problemas corrigidos. A verso mais atual da especicao da linguagem HTML a 5. Essa verso ainda no foi nalizada, a previso que ela seja lanada em denitivo em Julho de 2014. Porm, os navegadores j implementam diversos recursos do HTML5. A especicao est disponvel no endereo http://www.w3.org/TR/html5. As especicaes da linguagem HTML so publicadas pelo World Wide Web Consortium mais conhecido por sua sigla W3C. Alm do HTML, o W3C tambm responsvel por linguagens como o XML, o SVG e pela interface DOM (Document Object Model), por exemplo.

Estrutura Bsica
Basicamente, um documento HTML composto por elementos hierarquicamente organizados. Para inserir um elemento em um documento HTML, devemos utilizar as tags correspondentes a esse elemento. As tags so denidas com parnteses angulares (< e >). Os elementos podem possuir atributos e contedo. Os atributos so formados por nome e valor. Normalmente, os valores dos atributos so denidos dentro de aspas dupla e o contedo dos elementos um texto ou outros elementos.
www.facebook.com/k19treinamentos

21

HTML
Declarao do tipo de documento

22

<!DOCTYPE html>
Tag de abertura do elemento html

<html lang=pt-br> <head>


Nome de atributo Valor de atributo

<meta http-equiv = Content-Type content=text/html; charset=UTF-8> <title>K19 Treinamentos</title> </head> <body>


Contedo do elemento body

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


Tag de fechamento do elemento html

Figura 2.1: Estrutura bsica de um documento HTML

Figura 2.2: Estrutura bsica de um documento HTML

Mais Sobre
A especicao do HTML5 dene duas sintaxes distintas para produzir documentos HTML. A primeira denominada sintaxe HTML e a segunda denominada sintaxe XHTML. A maior parte dos autores recomendam a utilizao da sintaxe HTML. Nos exemplos e nos exerccios dessa apostila, a preferncia ser pela sintaxe HTML.

22

www.k19.com.br

23

HTML

Mais Sobre
De acordo com a especicao da linguagem HTML, alguns elementos so denominados Normal Elements. Esses elementos so abertos com uma tag e fechados com outra tag. Por exemplo, o elemento p um Normal Element. Observe a utilizao da tag de abertura e da tag de fechamento do elemento p.
1 <p > K 2 - Desenvolvimento Web com HTML , CSS e JavaScript </ p >

Mais Sobre
H tambm elementos denominados Void Elements. Esses elementos no possuem contedo. Na sintaxe HTML, esses elementos so abertos e fechados com apenas uma tag com ou sem o caractere /. Um exemplo de Void Element o elemento br.
1 <p > 2 K 1 - Lgica de Programao < br > 3 K 2 - Desenvolvimento Web com HTML , CSS e JavaScript < br / > 4 K 3 - SQL e Modelo Relacional 5 </ p >

Os Void Elements so: area, base, br, col, embed, hr, img, input, keygen, link, meta, param, source, track, wbr. Na sintaxe XHTML, os Void Elements podem ser abertos e fechados na mesma tag ou em tags separadas. Contudo, o caractere / obrigatrio.
1 <p > 2 K 1 - Lgica de Programao < 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 pgina web, devemos informar explicitamente o tipo do documento. O tipo do documento informado com a declarao <!DOCTYPE>. Quando conveniente, discutiremos as principais diferenas entre os tipos de documentos mais importantes. Veja a declarao <!DOCTYPE> para os principais tipos de documentos.
1 <! DOCTYPE html >
Cdigo HTML 2.4: HTML 5

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

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

www.facebook.com/k19treinamentos

23

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

24

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

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

1 <! DOCTYPE html PUBLIC " -// W3C // DTD XHTML 1.1// EN " 2 " http :// www . w3 . org / TR / xhtml11 / DTD / xhtml11 . dtd " >
Cdigo HTML 2.10: XHTML 1.1

<html>
Os elementos HTML, com exceo do DOCTYPE, devem ser inseridos no contedo do elemento html. Esse elemento aberto com a tag <html>, fechado com a tag </html> e deve conter exatamente um elemento head seguido de exatamente um elemento body. Diversos autores recomendam a utilizao do atributo lang. Esse atributo indica a lngua utilizada no documento HTML ou na maior parte dele. Algumas ferramentas de leitura ou de traduo de texto podem utilizar esse atributo para descobrir facilmente em qual lngua os textos contidos no documento HTML ou na maior parte dele foram escritos.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 ... 5 </ head > 6 < body > 7 ... 8 </ body > 9 </ html >

<head>
A principal funo do elemento head agrupar informaes sobre o documento HTML (metainformao). So exemplos de metainformaes: o encoding, a taxa de atualizao, o autor, a descrio e as palavras chaves do documento HTML.
1 < head > 2 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 3 < meta http - equiv = " refresh " content = " 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. Obrigatoriamente, salvo algumas poucas excees, o corpo do head deve conter exatamente uma ocorrncia do elemento title. Esse elemento dene o ttulo do documento HTML.
1 < head > 2 ... 3 < title > K19 Treinamentos </ title > 4 </ head >

<body>
O contedo de uma pgina web deve ser denido no corpo do elemento body. Por exemplo, podemos inserir no corpo do body cabealhos, textos, listas, tabelas, entre outros componentes. Esse elemento aberto pela tag <body> e fechado pela tag </body>.
1 < body > 2 < h1 > K 2 - Desenvolvimento Web com HTML , CSS e JavaScript </ h1 > 3 </ body >

Comentrios
Podemos adicionar comentrios em um documento HTML dentro das tags <!-- e -->. Os comentrios so ignorados pelos navegadores.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 <! - - corpo do head --> 5 </ head > 6 < body > 7 <! - - corpo do body --> 8 </ body > 9 </ html >

Editores HTML
Documentos HTML podem ser criados em qualquer editor de texto bsico. Contudo, para ganhar produtividade, podemos utilizar ferramentas com mais recursos. H diversas opes de editores HTML, alguns gratuitos outros pagos. Nesse treinamento, utilizaremos o Netbeans como editor HTML. Na verdade, o Netbeans oferece muito mais recursos alm do editor HTML. Contudo, agora, no estamos interessados nesses outros recursos. Voc pode obter gratuitamente o Netbeans no endereo https://netbeans.org/.

Ferramentas de Desenvolvimento Web


Hoje em dia, os principais navegadores possuem ferramentas para testar e depurar as pginas web e a interao 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

Exerccios de Fixao

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 necessrio
instalar o IIS conforme vimos anteriormente.

Importante No Ubuntu, utilizando o Apache HTTP Server como Web Server, voc deve salvar o projeto html em /home/<USUARIO>/public_html. Lembre-se que necessrio instalar e congurar 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
www.facebook.com/k19treinamentos

2-html-fixacao1.zip

27

HTML
2

28

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

1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 <! - - cabealho --> 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 >

Cdigo HTML 2.16: index.html

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-fixacao2.zip

No Windows, utilize o Chrome para acessar o endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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

Utilize o Chrome DevTools ou o Firebug para analisar e modicar os elementos do documento HTML.
4

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
5

HTML

Utilize o Chrome DevTools ou o Firebug para analisar a requisio HTTP e a resposta HTTP.

Figura 2.10: Chrome DevTools

Figura 2.11: Chrome DevTools

www.facebook.com/k19treinamentos

31

HTML

32

Semntica HTML
As placas de sinalizao so fundamentais para manter a ordem no trnsito. Cada placa possui um signicado especco. A utilizao equivocada das placas de trnsito pode causar problemas como colises de veculos. Considere um cruzamento no qual proibido virar a esquerda ou a direita (exemplo: Av. Rebouas com Av Brasil ou Av. Prof. Francisco Morato com Av. Vital Brasil). Nesse cruzamento, o funcionrio encarregado de instalar as placas de trnsito decidiu utilizar a sinalizao abaixo.

Figura 2.12: Marcador de perigo.

Essa sinalizao est totalmente equivocada. Ela indica a existncia de obstculos na pista que obrigam a passagem dos veculos pelo lado direito ou pelo lado esquerdo. O motorista que conhece o signicado correto dessa placa pode decidir virar direita ou esquerda e sofrer uma coliso. Para no gerar confuso o funcionrio poderia utilizar a placa abaixo.

Figura 2.13: Siga em frente.

Para manter a organizao no trnsito, a semntica(signicado) das sinalizaes deve ser respeitada. Analogamente, no desenvolvimento web, fundamental respeitar o signicado dos elementos
32
www.k19.com.br

33

HTML

HTML. De acordo com a especicao da linguagem HTML, a maior parte dos elementos possuem um propsito bem denido. Para o funcionamento correto das pginas de uma aplicao web, fundamental respeitar o propsito de cada elemento e utiliz-lo nas condies corretas. Muitos autores utilizam o termo semntica HTML ao se referirem ao uso correto dos elementos da linguagem HTML. No exemplo abaixo, utilizamos o elemento p para denir um pargrafo. De acordo com a especicao da linguagem HTML, esse elemento deve ser utilizado justamente para denir pargrafos. Portanto, ele foi aplicado corretamente.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exemplo de uso correto da semntica HTML </ title > 6 </ head > 7 < body > 8 <p > Este um texto para mostrar o significado da tag p . </ p > 9 </ body > 1 </ html >
Cdigo HTML 2.17: Exemplo de uso correto da semntica 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 Scio fundador da K19 Treinamentos 12 Av . Brigadeiro Faria Lima , 1571 - Jardim Paulistano - So Paulo , SP 13 CEP 1452 - 1 14 </ address > 15 16 < address > 17 Marcelo Martins 18 marcelo . martins@k19 . com . br 19 Scio fundador da K19 Treinamentos 2 Av . Brigadeiro Faria Lima , 1571 - Jardim Paulistano - So Paulo , SP 21 CEP 1452 - 1 22 </ address > 23 </ body > 24 </ html >
Cdigo HTML 2.18: Exemplo de uso incorreto da semntica HTML

Dessa vez, utilizamos o elemento address. De acordo com a especicao, esse elemento deve ser utilizado para fornecer informaes de contato dos autores ou donos do documento. Normalmente, esse elemento aparece no incio ou no nal das pginas. Se observarmos o exemplo mais atentamente, trata-se de uma pgina do site do Jonas (repare no ttulo da pgina). O autor da pgina o Jonas e no o Rafael ou o Marcelo. Portanto, o elemento address foi aplicado incorretamente. Alm disso, devemos evitar o uso desse elemento para informar endereos postais a menos que essas informaes sejam relacionadas ao autor ou dono do docuwww.facebook.com/k19treinamentos

33

HTML

34

mento.

Ttulos
Assim como em um livro, uma pgina web pode conter uma hierarquia de ttulos para estabelecer uma diviso do seu contedo. Para inserir ttulos em uma pgina web, devemos utilizar os elementos h1, h2, h3, h4, h5 e h6. Os suxos numricos de 1 a 6 indicam o nvel do ttulo dentro da hierarquia de ttulos do documento. Veja o exemplo:
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exemplo de ttulos </ title > 6 </ head > 7 < body > 8 < h1 > Ttulo 1 </ h1 > 9 < h2 > Ttulo 2 </ h2 > 1 < h3 > Ttulo 3 </ h3 > 11 < h4 > Ttulo 4 </ h4 > 12 < h5 > Ttulo 5 </ h5 > 13 < h6 > Ttulo 6 </ h6 > 14 </ body > 15 </ html >
Cdigo HTML 2.19: Exemplo de ttulos

Figura 2.14: Exemplo de ttulos

Observe que os ttulos no foram exibidos lado a lado e sim um embaixo do outro. Geralmente, os navegadores exibem os ttulos como blocos. Por padro, esses blocos ocupam todo o espao horizontal do elemento onde os ttulos esto contidos. No exemplo, os ttulos esto contidos no corpo da pgina. Portanto, ocupam todo o espao horizontal da pgina. Esse o comportamento padro dos block-level elements. Utilizando as ferramentas de desenvolvimento do Chrome, podemos visualizar claramente esses blocos.
34
www.k19.com.br

35

HTML

Figura 2.15: Exemplo de ttulos

Geralmente, os navegadores utilizam tamanhos diferentes de fonte para cada ttulo. No existe um padro de tamanho e de fonte entre os navegadores. Em outras palavras, os ttulos de uma pgina web podem ser exibidos de maneiras diferentes em navegadores distintos. Para padronizar a exibio dos ttulos, podemos aplicar as regras CSS. Devemos utilizar os ttulos com cautela, pois eles so usados como critrio de ranqueamento por buscadores como Google, Yahoo e Bing. O uso correto dos elementos de ttulo fortemente recomendado pelos especialistas em SEO (Search Engine Optimization). Para utiliz-los corretamente, devemos respeitar basicamente as seguintes regras. Manter a ordem lgica dos ttulos. Um elemento h2 deve ser precedido de um elemento h1. Um elemento h3 deve ser precedido de um elemento h2. E assim sucessivamente. O ttulo de uma seo deve descrever bem o contedo dela.

Exerccios de Fixao

6 Crie um novo documento HTML chamado titulos.html com o contedo 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
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 , obrigatrio o conhecimento das linguagens : HTML , CSS 13 e JavaScript . </ p > 14 15 <p > Essas linguagens so utilizadas para o desenvolvimento da camada de 16 apresentao das aplicaes web . </ p > 17 18 < h2 >Pr - requisitos </ h2 > 19 2 < ul > 21 < li > Familiaridade com algum sistema operacional ( Windows / Linux / Mac OS X ) </ li > 22 < li > Lgica de programao </ li > 23 </ ul > 24 25 < h2 > Agenda </ h2 > 26 27 < h3 > Aos domingos </ h3 > 28 29 < ul > 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 sbados </ 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 >
Cdigo HTML 2.20: titulos.html

36

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-fixacao6.zip

No Windows, utilize o Chrome para acessar o endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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 requisio HTTP e a resposta HTTP.

Imagine que voc possua um site de culinria no qual voc disponibiliza algumas receitas. Crie uma pgina com uma receita ctcia utilizando ttulos para organizar contedo. Utilize quantos nveis de ttulo achar necessrio. Para isso, adicione um arquivo chamado receita.html no projeto html em Site Root.
8

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

36

www.k19.com.br

37
4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Como preparar um delicioso macarro instantneo em 6 min . </ title > 6 </ head > 7 < body > 8 < h1 > Como preparar um delicioso macarro instantneo em 6 min . </ h1 > 9 1 <p > Com esta receita voc se tornar um profissional na arte de 11 preparar um macarro instantneo . </ p > 12 13 < h2 > Ingredientes </ h2 > 14 15 < ul > 16 < li > Macarro instantneo da sua marca favorita </ li > 17 < li > 6 ml de gua </ li > 18 </ ul > 19 2 < h2 > Modo de preparo </ h2 > 21 22 < h3 > No micro - ondas </ h3 > 23 24 <p > Coloque o macarro instantneo em um recipiente com 6 ml de gua e 25 programe o micro ondas para 6 minutos . Aperte o boto iniciar ou 26 equivalente . </ p > 27 28 < h4 > Dicas </ h4 > 29 3 < ul > 31 < li > 32 Utilize um recipiente que permita o macarro ficar totalmente 33 submerso na gua . 34 </ li > 35 < li > 36 Quando ouvir o bip , no saia correndo . O micro ondas no explodir . 37 O bip significa que o macarro est pronto . 38 </ li > 39 </ ul > 4 41 < h3 > No fogo </ h3 > 42 43 <p > 44 Coloque o macarro instantneo em uma panela com 6 ml de 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 macarro ficar totalmente 53 submerso na gua . 54 </ li > 55 < li > 56 No se distraia com a televiso ou qualquer outra coisa . 57 Voc poder queimar a sua refeio 58 </ li > 59 </ ul > 6 </ body > 61 </ html >
Cdigo HTML 2.21: receita.html

HTML

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-fixacao8.zip

No Windows, utilize o Chrome para acessar o endereo:


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

www.facebook.com/k19treinamentos

37

HTML

38

No Ubuntu, utilize o Chrome para acessar o endereo:


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 requisio HTTP e a resposta HTTP.

Pargrafos
Os pargrafos de uma pgina web so denidos atravs do elemento p. Assim como os ttulos, normalmente, os navegadores denem os pargrafos como block-level elements. Dessa forma, por padro, eles ocupam horizontalmente todo o espao do elemento pai. Os navegadores ajustam os textos dos pargrafos largura do elemento pai. As quebras de linha necessrias so inseridas automaticamente. Os espaos excedentes denidos em um documento HTML entre as palavras de um pargrafo so desconsiderados pelos navegadores na exibio das pginas web. Analogamente, as quebras de linha presentes no documento HTML tambm so desconsideradas pelos navegadores. Caso seja necessrio forar uma quebra de linha entre duas palavras contidas em um pargrafo, podemos utilizar o elemento br. Quando um pargrafo contm palavras muito longas, os navegadores podem ter diculdades para ajustar as quebras de linha. Podemos indicar explicitamente com o elemento wbr, como as palavras podem ser quebradas. Veja o exemplo abaixo.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exemplo de pargrafos </ title > 6 </ head > 7 < body > 8 < h1 > Exemplo de pargrafos </ h1 > 9 <p > 1 Este pargrafo serve para demonstrar a insero 11 automtica das quebras de linha . 12 13 Observe tambm que os espaos excedentes contidos 14 no documento HTML entre as palavras 15 desse pargrafo so desconsiderados 16 17 18 na exibio da pgina web . 19 2 As quebras de linha tambm so 21 desconsideradas . O navegador ajusta o texto 22 desse pargrafo ao espao horizontal do 23 corpo d pgina . 24 </ p > 25 26 <p > 27 Neste pargrafo mostramos a insero de uma quebra de linha forada . 28 < br > Percebeu ? < br > Alm disso , podemos indicar ao navegador como quebrar 29 palavra otorrino < wbr > laringo < wbr > logista otorrino < wbr > laringo < wbr > logista 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

Cdigo HTML 2.22: Exemplo de pargrafos

Figura 2.16: Exemplo de pargrafos

Character Entities
Para inserir determinados caracteres em um documento HTML, devemos utilizar o cdigo do caractere desejado. A utilizao desses cdigos evita problemas de encoding na exibio das pginas web. Voc pode conhecer esses caracteres e os seus respectivos cdigos atravs do seguinte endereo http://dev.w3.org/html5/html-author/charref. Esses caracteres so conhecidos como Character Entities ou HTML Entities. Veja o exemplo a seguir.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exemplo de character entities </ title > 6 </ head > 7 < body > 8 < h1 > Exemplo de character entities </ h1 > 9 < ul > 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 >

Cdigo HTML 2.23: Exemplo de character entities

www.facebook.com/k19treinamentos

39

HTML

40

Figura 2.17: Exemplo de character entities

Exerccios de Fixao

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 pargrafos </ title > 6 </ head > 7 < body > 8 < h1 > Exemplo de pargrafos </ h1 > 9 <p > 1 Este pargrafo serve para demonstrar a insero 11 automtica das quebras de linha . 12 13 Observe tambm que os espaos excedentes contidos 14 no documento HTML entre as palavras 15 desse pargrafo so desconsiderados 16 17 18 na exibio da pgina web . 19 2 As quebras de linha tambm so 21 desconsideradas . O navegador ajusta o texto 22 desse pargrafo ao espao horizontal do 23 corpo d pgina . 24 </ p > 25 26 <p > 27 Neste pargrafo mostramos a insero de uma quebra de linha forada . 28 < br > Percebeu ? < br > Alm disso , podemos indicar ao navegador como quebrar 29 palavra otorrino < wbr > laringo < wbr > logista otorrino < wbr > laringo < wbr / logista 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 >
Cdigo 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 endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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 >
Cdigo 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 endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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

Texto

Texto pr-formatado
Como vimos, os navegadores desconsideram os espaos excedentes entre as palavras contidas em um documento HTML assim como desconsideram as quebras de linha. Contudo, possvel inserir texto formatado com quantos espaos e quebras de linha desejarmos atravs do elemento pre. O texto contido no contedo de um elemento pre exibido com todos os espaos e quebras de linha inseridos no documento HTML. Alm disso, os navegadores costumam utilizar fonte mono espaada para mostrar esse texto.
www.facebook.com/k19treinamentos

41

HTML

42

Assim como os ttulos e os pargrafos, normalmente, os navegadores denem os textos prformatados como block-level element. Dessa forma, por padro, eles ocupam todo o espao horizontal do elemento pai.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 <! DOCTYPE html > < html lang = " pt - br " > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo de texto pr - formatado </ title > </ head > < body > < h1 > Exemplo de texto pr - formatado </ h1 > < pre > Os espaos excedentes so considerados pelos navegadores . Assim como as quebras de linha . Observe tambm o tipo de </ pre > </ body > </ html > fonte utilizada nesse texto .

Cdigo HTML 2.26: Exemplo de texto pr-formatado

Figura 2.18: Exemplo de texto pr-formatado

Cdigo
Para adicionar cdigos em um documento HTML, devemos utilizar o elemento code. Normalmente, esse elemento utilizado para denir cdigos escritos em alguma linguagem de programao. Normalmente, os navegadores utilizam fonte mono espaada para exibir o contedo desse elemento. Diferentemente dos ttulos, dos pargrafos e dos textos pr-formatados, normalmente, os navegadores denem os cdigos como inline-level elements. Dessa forma, por padro, os cdigos ocupam horizontalmente somente o espao necessrio.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >

42

www.k19.com.br

43
5 < title > Exemplo de cdigos </ title > 6 </ head > 7 < body > 8 < h1 > Exemplo de cdigos </ h1 > 9 <p > 1 Em Java , utilizamos o cdigo < code > System . out . println ( " K19 " ) ; </ code >. 11 Em C # , utilizamos o cdigo < code > System . Console . WriteLine ( " K19 " ) ; </ code >. 12 </ p > 13 </ body > 14 </ html >
Cdigo HTML 2.27: Exemplo de cdigo

HTML

Figura 2.19: Exemplo de cdigo

Elemento i
A especicao da linguagem HTML 5 no muito precisa na denio da semntica do elemento i. Ela indica a utilizao desse elemento para denir nomes cientcos, termos tcnicos, expresses idiomticas em outras lnguas, transliteraes, pensamentos. Normalmente, os navegadores denem o i como inline-level element e exibem o seu contedo em itlico.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exemplo de utilizao do elemento i </ title > 6 </ head > 7 < body > 8 < h1 > Exemplo de utilizao do elemento i </ h1 > 9 < ul > 1 < li > Porquinho - da - ndia ou <i > Cavia porcellus </ i > </ li > 11 < li > <i > Backup </ i >( cpia de segurana ) </ li > 12 < li > <i > shoot the breeze </ i >( bater papo ou jogar conversa fora ) </ li > 13 < li > <i > Moskv </ i >( transliterao da palavra Moscou em russo ) </ li > 14 < li > <i > Se no sabes , aprende ; se j sabes , ensina . </ i > ( Confcio ) </ li > 15 </ ul > 16 </ body > 17 </ html >
Cdigo HTML 2.28: Exemplo de utilizao do elemento i

www.facebook.com/k19treinamentos

43

HTML

44

Figura 2.20: Exemplo de utilizao do elemento i

Elemento b
A especicao da linguagem HTML 5 no muito precisa na denio da semntica do elemento b. Ela indica, por exemplo, a utilizao desse elemento para denir as palavras chave do resumo de um documento e o nome do produto em texto de avaliao. Normalmente, os navegadores denem o b como inline-level element e exibem o contedo em negrito.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exemplo de utilizao do elemento b </ title > 6 </ head > 7 < body > 8 < h1 > Exemplo de utilizao do elemento b </ h1 > 9 <p > 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 > , obrigatrio o conhecimento 13 das linguagens : <b > HTML </ b > , <b > CSS </ b > e <b > JavaScript </ b >. 14 </ p > 15 </ body > 16 </ html >
Cdigo HTML 2.29: Exemplo de utilizao do elemento b

Figura 2.21: Exemplo de utilizao do elemento b

44

www.k19.com.br

45

HTML

Texto subscrito ou sobrescrito


Podemos denir textos subscrito ou sobrescrito com os elementos sub e sup respectivamente. Normalmente, os navegadores denem 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 So Paulo possui uma rea de 1.523 km < sup >2 </ sup >. 11 Em 2 11 , So Paulo emitiu 16 ,43 milhes de toneladas de 12 CO < sub >2 </ sub >. 13 </ p > 14 </ body > 15 </ html >
Cdigo HTML 2.30: Exemplo de texto subscrito ou sobrescrito

Figura 2.22: Exemplo de texto subscrito ou sobrescrito

Texto importante ou enfatizado


Podemos denir textos importantes ou enfatizados com os elementos strong e em respectivamente. Por padro, nos navegadores, o contedo de um elemento strong exibido em negrito e o contedo de um elemento em exibido em itlico. Normalmente, os navegadores denem 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 > o nico 11 pas que ganhou < em > cinco vezes </ em > 12 a < strong > copa do mundo de futebol </ strong >. 13 </ p > 14 </ body > 15 </ html >

www.facebook.com/k19treinamentos

45

HTML

46

Cdigo HTML 2.31: Exemplo de texto importante ou enfatizado

Figura 2.23: Exemplo de texto importante ou enfatizado

Citaes
Podemos denir citaes longas ou curtas com os elementos blockquote e q respectivamente. Por padro, o elemento blockquote exibido como elemento de bloco e o elemento q exibido como elemento de linha. Esses dois elementos possuem o atributo cite que deve ser utilizado para indicar a fonte da citao. Tambm podemos citar, com o elemento cite, ttulos de trabalhos, livros, msicas, lmes, programas de TV, peas de teatro, entre outros. Por padro, esse elemento exibido como elemento de linha. Normalmente, os navegadores denem o blockquote como block-level element. Por outro lado, o q e o cite, normalmente, so denidos como inline-level elements.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exemplo de citaes </ title > 6 </ head > 7 < body > 8 < h1 > Exemplo de citaes </ h1 > 9 < blockquote cite = " http :// en . wikipedia . org / wiki / Computer " > 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
28 <p > 29 Nelson Rodrigues disse : 3 <q cite = " http :// pt . wikipedia . org / wiki / Nelson_Rodrigues " > 31 O adulto no existe . O homem um menino perene 32 </ q >. 33 </ p > 34 35 <p > 36 A pea < cite >A mulher sem pecado </ cite > de Nelson Rodrigues estreou 37 em 1941 no Rio de Janeiro . 38 </ p > 39 </ body > 4 </ html >
Cdigo HTML 2.32: Exemplo de citaes

HTML

Figura 2.24: Exemplo de citaes

Abreviaes
Podemos denir abreviaes com o elemento abbr. Por padro, esse elemento exibido como elemento de linha. O atributo title desse elemento utilizado para denir um tootip. Normalmente, os navegadores denem esse elemento como inline-level element
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exemplo de abreviaes </ title > 6 </ head > 7 < body > 8 < h1 > Exemplo de abreviaes </ h1 > 9 <p > 1 O < abbr title = " Instituto de Matemtica e Estatstica " > IME </ abbr > 11 uma das unidades da < abbr title = " Universidade de So Paulo " > USP </ abbr >. 12 </ p > 13 </ body > 14 </ html >
Cdigo HTML 2.33: Exemplo de abreviaes

www.facebook.com/k19treinamentos

47

HTML

48

Figura 2.25: Exemplo de abreviaes

Denies
Podemos inserir denies em um documento HTML com o elemento dfn. Por padro, esse elemento exibido como elemento de linha. Normalmente, os navegadores denem o dfn como inline-level element
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exemplo de definies </ title > 6 </ head > 7 < body > 8 < h1 > Exemplo de definies </ h1 > 9 <p > 1 Um < dfn > pingado </ dfn > um copo de caf com um pouco de leite . < br > 11 Uma < dfn > bomba de chocolate </ dfn > um doce de padaria feito com 12 massa de farinha de trigo com recheio cremoso e cobertura de chocolate . 13 </ p > 14 </ body > 15 </ html >
Cdigo HTML 2.34: Exemplo de denies

Figura 2.26: Exemplo de denies

48

www.k19.com.br

49

HTML

Alteraes
Em alguns casos, importante informar que o texto de um documento HTML sofreu alteraes. Um texto que foi acrescentado em um documento HTML deve ser denido com o elemento ins. Um texto que no faz mais parte do documento deve ser denido com o elemento del. Um texto que deixou de ser correto, preciso ou relevante deve ser denido com o elemento s. Por padro, esses elementos so exibidos como elementos de linha. Normalmente, os navegadores denem esses elementos como inline-level elements.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exemplo de alteraes </ title > 6 </ head > 7 < body > 8 < h1 > Exemplo de alteraes </ h1 > 9 <p > 1 Natal a capital do Rio Grande do Norte . < ins > Sua fundao foi 11 em 25 de dezembro de 1599. </ ins > < del >A rea total dessa cidade 12 167 ,263 km < sup >2 </ sup > </ del >. <s > De acordo com o IBGE , a populao 13 dessa cidade de 774.23 habitantes . </ s > De acordo com o IBGE a 14 populao dessa cidade de 8 3.739 habitantes . 15 </ p > 16 </ body > 17 </ html >
Cdigo HTML 2.35: Exemplo de alteraes

Figura 2.27: Exemplo de alteraes

Os elementos ins e del possuem os atributos cite e datetime. O atributo cite deve ser utilizado para indicar a URL de um documento com as justicativas da alterao. O atributo datetime deve ser utilizado para informar quando ocorreu a alterao.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exemplo de alteraes </ title > 6 </ head > 7 < body > 8 < h1 > Exemplo de alteraes </ h1 > 9 <p > 1 Natal a capital do Rio Grande do Norte . < ins cite = " ins - explicacao . html " 11 datetime = " 2 13 -1 -15 T22 :55: 3 Z " > Sua fundao foi em 25 de dezembro de

www.facebook.com/k19treinamentos

49

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

50

Cdigo HTML 2.36: Exemplo de alteraes

Data e hora

O elemento time permite que datas e horrios sejam denidos em um documento HTML. H duas formas de utilizar esse elemento. A primeira denir a data e o horrio desejado no contedo do elemento time. A segunda denir a data e o horrio desejado no valor do atributo datetime. Nessas duas opes, as datas e os horrios devem ser escritos seguindo o formato denido na especicao da linguagem HTML (http://www.w3.org/TR/html5/text-level-semantics.html# the-time-element). Quando utilizamos o atributo datetime, o contedo do elemento time no precisa seguir um formato especco. Normalmente, os navegadores denem 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 " > Fundao da K19 </ time > </ li > 16 < li > < time datetime = " 1984 -1 -3 " > Aniversrio do Rafael </ time > </ li > 17 < li > < time datetime = " 12 -25 " > Natal </ time > </ li > 18 < li > < time datetime = " 9: " > Horrio 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 >

Cdigo 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. Normalmente, os navegadores denem 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 > so linguagens de programao 11 < mark > orientadas a objeto </ mark >. 12 </ p > 13 </ body > 14 </ html >
Cdigo HTML 2.38: Exemplo de texto marcado

Figura 2.29: Exemplo de texto marcado

www.facebook.com/k19treinamentos

51

HTML

52

Exerccios de Fixao

Crie um novo documento HTML chamado texto-pre-formatado.html no projeto html em Site Root.
14

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2

<! DOCTYPE html > < html lang = " pt - br " > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo de texto pr - formatado </ title > </ head > < body > < h1 > Exemplo de texto pr - formatado </ h1 > < pre > Os espaos excedentes so considerados pelos navegadores . Assim como as quebras de linha . Observe tambm o tipo de </ pre > </ body > </ html > fonte utilizada nesse texto .

Cdigo 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 endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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 cdigos </ title > 6 </ head > 7 < body > 8 < h1 > Exemplo de cdigos </ h1 > 9 <p > 1 Em Java , utilizamos o cdigo < code > System . out . println ( " K19 " ) ; </ code > 11 Em C # , utilizamos o cdigo < code > System . Console . WriteLine ( " K19 " ) ; </ code > 12 </ p > 13 </ body > 14 </ html >
Cdigo HTML 2.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 endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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 utilizao do elemento i </ title > 6 </ head > 7 < body > 8 < h1 > Exemplo de utilizao do elemento i </ h1 > 9 < ul > 1 < li > Porquinho - da - ndia ou <i > Cavia porcellus </ i > </ li > 11 < li > <i > Backup </ i >( cpia de segurana ) </ li > 12 < li > <i > shoot the breeze </ i >( bater papo ou jogar conversa fora ) </ li > 13 < li > <i > Moskv </ i >( transliterao da palavra Moscou em russo ) </ li > 14 < li > <i > Se no sabes , aprende ; se j sabes , ensina . </ i > ( Confcio ) </ li > 15 </ ul > 16 </ body > 17 </ html >
Cdigo HTML 2.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 endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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 utilizao do elemento b </ title > 6 </ head > 7 < body > 8 < h1 > Exemplo de utilizao 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 > , obrigatrio o conhecimento 13 das linguagens : <b > HTML </ b > , <b > CSS </ b > e <b > JavaScript </ b >. 14 </ p >

www.facebook.com/k19treinamentos

53

HTML
15 </ body > 16 </ html >
Cdigo HTML 2.42: b.html

54

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-fixacao2 .zip

21

No Windows, utilize o Chrome para acessar o endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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

Crie um novo documento HTML chamado texto-subscrito-sobrescrito.html no projeto html em Site Root.
22

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 So Paulo possui uma rea de 1.523 km < sup >2 </ sup >. 11 Em 2 11 , So Paulo emitiu 16 ,43 milhes de toneladas de 12 CO < sub >2 </ sub >. 13 </ p > 14 </ body > 15 </ html >
Cdigo 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 endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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

Crie um novo documento HTML chamado texto-importante-enfatizado.html no projeto html em Site Root.
24

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
9 <p > 1 O < strong > Brasil </ strong > o nico 11 pas que ganhou < em > cinco vezes </ em > 12 a < strong > copa do mundo de futebol </ strong >. 13 </ p > 14 </ body > 15 </ html >
Cdigo HTML 2.44: texto-importante-enfatizado.html

HTML

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-fixacao24.zip

25

No Windows, utilize o Chrome para acessar o endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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 citaes </ title > 6 </ head > 7 < body > 8 < h1 > Exemplo de citaes </ 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 no existe . O homem um menino perene 32 </ q >. 33 </ p > 34 35 <p > 36 A pea < cite >A mulher sem pecado </ cite > de Nelson Rodrigues estreou 37 em 1941 no Rio de Janeiro . 38 </ p > 39 </ body > 4 </ html >
Cdigo HTML 2.45: citacoes.html

www.facebook.com/k19treinamentos

55

HTML

56
2-html-fixacao26.zip

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

27

No Windows, utilize o Chrome para acessar o endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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 abreviaes </ title > 6 </ head > 7 < body > 8 < h1 > Exemplo de abreviaes </ h1 > 9 <p > 1 O < abbr title = " Instituto de Matemtica e Estatstica " > IME </ abbr > 11 uma das unidades da < abbr title = " Universidade de So Paulo " > USP </ abbr >. 12 </ p > 13 </ body > 14 </ html >
Cdigo HTML 2.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 endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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

30

Crie um novo documento HTML chamado denicoes.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 definies </ title > 6 </ head > 7 < body > 8 < h1 > Exemplo de definies </ h1 > 9 <p > 1 Um < dfn > pingado </ dfn > um copo de caf com um pouco de leite . < br > 11 Uma < dfn > bomba de chocolate </ dfn > um doce de padaria feito com 12 massa de farinha de trigo com recheio cremoso e cobertura de chocolate . 13 </ p > 14 </ body > 15 </ html >
Cdigo HTML 2.47: denicoes.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 endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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 alteraes </ title > 6 </ head > 7 < body > 8 < h1 > Exemplo de alteraes </ h1 > 9 <p > 1 Natal a capital do Rio Grande do Norte . < ins > Sua fundao foi 11 em 25 de dezembro de 1599. </ ins > < del >A rea total dessa cidade 12 167 ,263 km < sup >2 </ sup > </ del >. <s > De acordo com o IBGE , a populao 13 dessa cidade de 774.23 habitantes . </ s > De acordo com o IBGE a 14 populao dessa cidade de 8 3.739 habitantes . 15 </ p > 16 </ body > 17 </ html >
Cdigo 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 endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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
15 < li > < time 16 < li > < time 17 < li > < time 18 < li > < time 19 < li > < time 2 </ ul > 21 </ body > 22 </ html > datetime = " 2 1 - 8 " > Fundao da K19 </ time > </ li > datetime = " 1984 -1 -3 " > Aniversrio do Rafael </ time > </ li > datetime = " 12 -25 " > Natal </ time > </ li > datetime = " 9: " > Horrio de Entrada </ time > </ li > datetime = " 2 13 -12 -31 23:59:59 " > Ano Novo 2 14 </ time > </ li >

58

Cdigo 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 endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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 > so linguagens de programao 11 < mark > orientadas a objeto </ mark >. 12 </ p > 13 </ body > 14 </ html >
Cdigo 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 endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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

Listas
A linguagem HTML dene trs tipos distintos de listas. Lista de descries
58
www.k19.com.br

59

HTML

Lista com ordem Lista sem ordem

Lista de descries
Para criar uma lista de descries, devemos utilizar o elemento dl. Essas listas so formadas por termos ou nomes e as suas respectivas descries. Os termos ou nomes so denidos com o elemento dt. As descries so denidas com o elemento dd. Normalmente, os navegadores denem todos esses elementos como block-level elements.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exemplo de lista de descries </ title > 6 </ head > 7 < body > 8 < h1 > Exemplo de lista de descries </ h1 > 9 < dl > 1 < dt > K 1 - Lgica de Programao </ dt > 11 < dd > 12 Conhecimentos em Lgica de Programao o pr - requisito fundamental 13 para que uma pessoa consiga aprender qualquer Linguagem de Programao ... 14 </ dd > 15 < dt > 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 aplicaes corporativas necessitam armazenar dados fundamental 23 que os desenvolvedores possuam conhecimentos sobre persistncia de dados . 24 </ dd > 25 </ dl > 26 </ body > 27 </ html >
Cdigo HTML 2.51: Exemplo de lista de descries

Figura 2.30: Exemplo de lista de descries

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 ordem so denidos com o elemento li. Normalmente, os navegadores denem 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 > Macarro instantneo - K19 Receitas </ h1 > 9 < h2 > Modo de preparo </ h2 > 1 11 < ol > 12 < li > Ferver 6 ml de gua em uma panela . </ li > 13 < li > Retirar o macarro do pacote . </ li > 14 < li > Colocar o macarro na panela no fogo baixo . </ li > 15 < li > Cozinhar o macarro por 3 min . </ li > 16 < li > Temperar a gosto . </ li > 17 </ ol > 18 </ body > 19 </ html >
Cdigo 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 ordem so denidos com o elemento li. Normalmente, os navegadores denem 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 >Pr - requisitos </ h2 >

60

www.k19.com.br

61
1 11 < ul > 12 < li > Conhecimento de algum sistema operacional ( Windows / Linux / MacOS X ) </ li > 13 < li > Lgica de programao </ li > 14 </ ul > 15 </ body > 16 </ html >
Cdigo HTML 2.53: Exemplo de lista sem ordem

HTML

Figura 2.32: Exemplo de lista sem ordem

Listas aninhadas
Uma lista pode ser denida dentro de outra lista. Quando listas sem ordem so aninhadas, normalmente, os navegadores alternam o marcadores dos itens.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exemplo de listas aninhadas </ title > 6 </ head > 7 < body > 8 < h1 > Exemplo de listas aninhadas </ h1 > 9 < h2 > Continentes </ h2 > 1 < ul > 11 < li > 12 Europa 13 < ul > 14 < li > Portugual </ li > 15 < li > Frana </ li > 16 < li > Alemanha </ li > 17 </ ul > 18 </ li > 19 < li > 2 sia 21 < ul > 22 < li > Japo </ li > 23 < li > China </ li > 24 < li > ndia </ li > 25 </ ul > 26 </ li > 27 </ ul > 28 < h2 > Cronograma da minha viagem </ h2 > 29 < ol > 3 < li > 31 Europa

www.facebook.com/k19treinamentos

61

HTML
32 < ol > 33 < li > Portugual </ li > 34 < li > Frana </ li > 35 < li > Alemanha </ li > 36 </ ol > 37 </ li > 38 < li > 39 sia 4 < ol > 41 < li > Japo </ li > 42 < li > China </ li > 43 < li > ndia </ li > 44 </ ol > 45 </ li > 46 </ ol > 47 </ body > 48 </ html >
Cdigo HTML 2.54: Exemplo de listas aninhadas

62

Figura 2.33: Exemplo de lista aninhadas

Exerccios de Fixao

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
4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exemplo de lista de descries </ title > 6 </ head > 7 < body > 8 < h1 > Exemplo de lista de descries </ h1 > 9 < dl > 1 < dt > K 1 - Lgica de Programao </ dt > 11 < dd > 12 Conhecimentos em Lgica de Programao o pr - requisito fundamental 13 para que uma pessoa consiga aprender qualquer Linguagem de Programao ... 14 </ dd > 15 < dt > 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 aplicaes corporativas necessitam armazenar dados fundamental 23 que os desenvolvedores possuam conhecimentos sobre persistncia de dados . 24 </ dd > 25 </ dl > 26 </ body > 27 </ html >
Cdigo HTML 2.55: lista-descricoes.html

HTML

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-fixacao38.zip

39

No Windows, utilize o Chrome para acessar o endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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 > Macarro instantneo - K19 Receitas </ h1 > 9 < h2 > Modo de preparo </ h2 > 1 11 < ol > 12 < li > Ferver 6 ml de gua em uma panela . </ li > 13 < li > Retirar o macarro do pacote . </ li > 14 < li > Colocar o macarro na panela no fogo baixo . </ li > 15 < li > Cozinhar o macarro por 3 min . </ li > 16 < li > Temperar a gosto . </ li > 17 </ ol > 18 </ body > 19 </ html >
Cdigo HTML 2.56: lista-com-ordem.html

Arquivo: https://github.com/K19/K19-Exercicios/archive/k
www.facebook.com/k19treinamentos

2-html-fixacao4 .zip

63

HTML
41

64

No Windows, utilize o Chrome para acessar o endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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 >Pr - requisitos </ h2 > 1 11 < ul > 12 < li > Conhecimento de algum sistema operacional ( Windows / Linux / MacOS X ) </ li > 13 < li > Lgica de programao </ li > 14 </ ul > 15 </ body > 16 </ html >
Cdigo HTML 2.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 endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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 > Frana </ li > 16 < li > Alemanha </ li > 17 </ ul > 18 </ li > 19 < li >

64

www.k19.com.br

65
2 sia 21 < ul > 22 < li > Japo </ li > 23 < li > China </ li > 24 < li > ndia </ li > 25 </ ul > 26 </ li > 27 </ ul > 28 < h2 > Cronograma da minha viagem </ h2 > 29 < ol > 3 < li > 31 Europa 32 < ol > 33 < li > Portugual </ li > 34 < li > Frana </ li > 35 < li > Alemanha </ li > 36 </ ol > 37 </ li > 38 < li > 39 sia 4 < ol > 41 < li > Japo </ li > 42 < li > China </ li > 43 < li > ndia </ li > 44 </ ol > 45 </ li > 46 </ ol > 47 </ body > 48 </ html >
Cdigo HTML 2.58: listas-aninhadas.html

HTML

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-fixacao44.zip

45

No Windows, utilize o Chrome para acessar o endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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
21 Aliche , parmeso e rodelas de tomate . 22 </ dd > 23 </ dl > 24 </ body > 25 </ html >
Cdigo HTML 2.59: restaurante.html

66

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-fixacao46.zip

47

No Windows, utilize o Chrome para acessar o endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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 > Operao de saque - Manual do caixa eletrnico - K19 Bank </ title > 6 </ head > 7 < body > 8 < h1 > Operao de saque - Manual do caixa eletrnico - K19 Bank </ h1 > 9 1 < ol > 11 < li > Insira o carto </ li > 12 < li > Digite a senha </ li > 13 < li > Escolha a opo de saque </ li > 14 < li > Informe o valor que deseja sacar </ li > 15 < li > Insira o carto novamente </ li > 16 < li > Aguarde at a liberao do dinheiro </ li > 17 </ ol > 18 </ body > 19 </ html >
Cdigo 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 endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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
4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > K - Formao Bsica - K19 Treinamentos </ title > 6 </ head > 7 < body > 8 < h1 > K - Formao Bsica </ h1 > 9 1 < ul > 11 < li > K 1 - Lgica de Programao </ 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 >
Cdigo HTML 2.61: cursos.html

HTML

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-fixacao5 .zip

51

No Windows, utilize o Chrome para acessar o endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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 > Formaes - K19 Treinamentos </ title > 6 </ head > 7 < body > 8 < h1 > Formaes - K19 Treinamentos </ h1 > 9 < ul > 1 < li > 11 K - Formao Bsica 12 < ul > 13 < li > K 1 - Lgica de Programao </ 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 - Formao Desenvolvedor Java 2 < ul > 21 < li > K11 - Orientao a Objetos em Java </ li > 22 < li > K12 - Desenvolvimento Web com JSF2 e JPA2 </ li > 23 </ ul > 24 </ li > 25 < li > 26 K3 - Formao Desenvolvedor . NET 27 < ul > 28 < li > K31 - C # e Orientao a Objetos </ li > 29 < li > K32 - Desenvolvimento Web com ASP . NET MVC </ li > 3 </ ul > 31 </ li > 32 </ ul > 33 </ body > 34 </ html >
Cdigo HTML 2.62: formacoes.html

www.facebook.com/k19treinamentos

67

HTML

68
2-html-fixacao52.zip

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

53

No Windows, utilize o Chrome para acessar o endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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 contedo do elemento iframe utilizado pelos navegadores que no oferecem suporte a esse elemento. Normalmente, o iframe denido 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 no suporta o elemento <i > iframe </ i >. 11 </ iframe > 12 < iframe src = " http :// www . usp . br " > 13 Esse navegador no suporta o elemento <i > iframe </ i >. 14 </ iframe > 15 </ body > 16 </ html >
Cdigo HTML 2.63: Exemplo de frames

Figura 2.34: Exemplo de frames

68

www.k19.com.br

69

HTML

Importante
No incio do crescimento da Internet, um grande nmero de sites utilizavam iframes. Hoje em dia, os especialistas em design web no recomendam mais utilizao desse recurso. Ento, evite a utilizao de iframes.

Links
Normalmente, um site formado por um conjunto de pginas que esto interligadas de alguma forma. Para permitir que um usurio navegue de uma pgina para outra, devemos utilizar os links. Basicamente, um link faz a ligao de uma pgina para outra do mesmo site (link interno) ou para uma pgina de outro site (link externo). Para criarmos um link, devemos utilizar o elemento a. Esse elemento possui um atributo chamado href. O valor desse atributo indica o caminho relativo ou absoluto de uma outra pgina. Normalmente, o a denido 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 >
Cdigo HTML 2.64: Exemplo de links

Figura 2.35: Exemplo de links

www.facebook.com/k19treinamentos

69

HTML

70

Alm do atributo href, podemos utilizar o atributo target para informar onde o destino de um link deve ser aberto. _blank: Abre o destino do link em uma nova janela ou aba. _self: Abre o destino do link na mesma janela ou no mesmo frame que exibe o documento que contm o link. _parent: Abre o destino do link na janela ou no frame onde est contido o frame que exibe o documento que contm o link. _top: Abre o destino do link na janela que ancestral do frame que exibe o documento que contm o link. Um link com target _self possui o mesmo comportamento de um link com target _top se esses links estiverem em um documento HTML que no esteja dentro de outro documento HTML. Dentro de um documento HTML com diversos frames, podemos denir que o destino de um determinado link deve ser aberto em um determinado frame. Para realizarmos tal tarefa, o valor do atributo target deve ser o nome do frame onde o destino do link deve ser aberto. Por padro, o destino de um link aberto na mesma pgina ou frame onde ele est contido. Em outras palavras, se o atributo target no for denido explicitamente, o padro o comportamento do _self.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exemplo de uso da tag a com o atributo target </ title > 6 </ head > 7 < body > 8 < ul > 9 < li > 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 >
Cdigo HTML 2.65: Exemplo de links com target

Exerccios de Fixao

54 Crie dois arquivos chamados links-origem.html e links-destino.html dentro do projeto html em Site Root.

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
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 >
Cdigo HTML 2.66: links-origem.html

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 >
Cdigo 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 endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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

ncoras
Alm de criar links para outras pginas, podemos criar um link para uma determinada seo de um documento HTML. Esse recurso chamado de ancoragem. O primeiro passo para utilizar esse recurso identicar a seo que ser o destino desse link. Essa identicao 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 identicadores das sees de acordo com a sintaxe do exemplo a seguir. Observe a utilizao do caractere #.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exemplo de ncoras </ title > 6 </ head > 7 < body > 8 < h1 > Exemplo de ncoras </ h1 > 9 < ul > 1 < li > 11 <a href = " # brasil " > Brasil </ a >

www.facebook.com/k19treinamentos

71

HTML
12 </ li > 13 < li > 14 <a href = " # historia " > Histria </ 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 " > Histria </ h3 > 31 ... 32 33 < h3 id = " geografia " > Geografia </ h3 > 34 ... 35 36 < h3 id = " demografia " > Demografia </ h3 > 37 ... 38 </ body > 39 </ html >

72

Cdigo HTML 2.68: Exemplo de ncoras

Figura 2.36: Exemplo de ncoras

72

www.k19.com.br

73

HTML

Exerccios de Fixao

Crie um documento HTML chamado ancoras1.html no projeto html em Site Root. Adicione um link para uma seo dentro desse documento. Dica: insira contedo suciente para que a barra de rolagem vertical do navegador aparea.
56

1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exemplo de ncoras </ title > 6 </ head > 7 < body > 8 < h1 > Exemplo de ncoras </ h2 > 9 < ul > 1 < li > 11 <a href = " # sobre " > Sobre o texto dessa pgina </ 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 pgina </ h2 > 31 <p > 32 O texto dessa pgina foi gerado atravs do site : 33 <a href = " http :// www . lipsum . com / " > http :// www . lipsum . com / </ a > 34 </ p > 35 </ body > 36 </ html >
Cdigo 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 endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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

Crie um novo arquivo chamado ancoras2.html no projeto html em Site Root. Identique uma seo com o nome ok. Dica: insira contedo suciente para que a barra de rolagem vertical do
58

www.facebook.com/k19treinamentos

73

HTML

74

navegador aparea.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exerccio sobre ncoras </ title > 6 </ head > 7 < body > 8 < h1 > Ancora pgina 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 voc chegou aqui deu tudo certo ! :) </ p > 25 </ body > 26 </ html >
Cdigo 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 ncoras </ title > 6 </ head > 7 < body > 8 < h1 > Exemplo de ncoras </ h2 > 9 < ul > 1 < li > 11 <a href = " # sobre " > Sobre o texto dessa pgina </ a > 12 </ li > 13 < li > 14 <a href = " ancoras2 . html # ok " > Seo 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
33 < h2 id = " sobre " > Sobre o texto dessa pgina </ h2 > 34 <p > 35 O texto dessa pgina foi gerado atravs do site : 36 <a href = " http :// www . lipsum . com / " > http :// www . lipsum . com / </ a > 37 </ p > 38 </ body > 39 </ html >
Cdigo HTML 2.71: ancoras1.html

HTML

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-fixacao59.zip

60

No Windows, utilize o Chrome para acessar o endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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

Imagens
Certamente, os sites seriam muito entediantes se no fosse possvel adicionar imagens ao contedo das pginas. Podemos adicionar imagens em documento HTML com o elemento img. Esse elemento possui um atributo chamado src. Esse atributo indica o caminho absoluto ou relativo da imagem que queremos adicionar. Normalmente, o img denido pelos navegadores como inlinelevel element. O elemento img possui um atributo obrigatrio chamado alt. Esse atributo dene um texto alternativo que pode ser utilizado, por exemplo, se houver um problema ao carregar a imagem ou por softwares de leitura de tela.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exemplo de imagens </ title > 6 </ head > 7 < body > 8 < h1 > K19 Treinamentos </ h1 > 9 < img src = " http :// www . k19 . com . br / css / img / main - header - logo . png " alt = " K19 " / > 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 - Lgica de Programao 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 - Orientao a Objetos em Java

www.facebook.com/k19treinamentos

75

HTML
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 >
Cdigo HTML 2.72: Exemplo de imagens

76

Figura 2.37: Exemplo de imagens

Tambm podemos denir um tooltip para uma imagem com o atributo title.
1 < img src = " http :// www . k19 . com . br / css / img / main - header - logo . png " alt = " K19 " title = " K19 " / >
Cdigo HTML 2.73: Exemplo de imagens

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
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 >
Cdigo HTML 2.74: http://www.k19.com.br/index.html

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 padro, essas URLs so relativas a URL do documento HTML que contm 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 >
Cdigo HTML 2.75: http://www.k19.com.br/index.html

Podemos denir uma URL base para as imagens e os links adicionados em um documento HTML com URLs relativas. A URL base denida no valor do atributo href do elemento base. Esse elemento deve ser adicionado no contedo do elemento head.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < base href = " http :// www . k19 . com . br / site " > 6 < title > URLs absolutas e relativas </ title > 7 </ head > 8 < body > 9 < img src = " imagens / k19 - logo . png " alt = " K19 " > 1 <a href = " paginas / cursos . html " > Cursos </ a > 11 </ body > 12 </ html >
Cdigo 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

Exerccios de Fixao

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

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 - Lgica de Programao 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 - Orientao 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 >

Cdigo 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 endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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 relatrios em documentos HTML. Considere que os dados desses relatrios so obtidos a partir de planilhas. Da surge a necessidade de exibir dados de forma tabular em pginas web. Para resolver esse problema, podemos utilizar o elemento table. Esse elemento permite apresentar dados de forma tabular. As linhas de uma tabela so denidas com o elemento tr, as clulas de ttulos com o elemento th e as clulas de dados com o elemento td. Os elementos th e td possuem um atributo chamado colspan e outro chamado rowspan. O colspan dene quantas colunas uma clula deve ocupar e o rowspan dene quantas linhas uma clula deve ocupar. Normalmente, o table denido 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 atualizao : 6/2 12 </ td > 32 </ tr > 33 </ table > 34 </ body > 35 </ html >

Cdigo HTML 2.78: Exemplo de tabela

www.facebook.com/k19treinamentos

79

HTML

80

Figura 2.38: Exemplo de tabela

Cabealho, corpo e rodap


Para melhorar a semntica das tabelas, podemos denir explicitamente o cabealho, o corpo e o rodap de uma tabela atravs dos elementos thead, tbody e tfoot respectivamente.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exemplo de tabela </ title > 6 </ head > 7 < body > 8 < h1 > Carros </ h1 > 9 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 atualizao : 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

Cdigo HTML 2.79: Exemplo de tabela

Figura 2.39: Exemplo de tabela

Repare que visualmente no mudou absolutamente nada. Alm disso, apareceram mais alguns elementos: thead, tfoot e tbody. Qual a semntica desses elementos? thead: dene o cabealho da tabela tfoot: dene o rodap da tabela tbody: dene o corpo da tabela Por que complicar? Qual o motivo da existncia desses elementos? O elemento thead, assim como o tfoot, servem para agrupar as linhas de cabealho e de rodap, respectivamente. O cdigo ca mais claro. Facilita a aplicao de estilos CSS (atravs do seletor de elemento) Os navegadores podem utilizar barras de rolagem para exibir o contedo de uma tabela longa. Essa caracterstica no obrigatria. Na impresso de uma tabela longa, a ferramenta utilizada pode replicar o cabealho e o rodap em todas as pginas. Essa caracterstica no obrigatria.

Ttulos
Tambm podemos denir um ttulo para uma tabela atravs do elemento caption. Esse elemento deve ser o primeiro lho do elemento table.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exemplo de ttulo de tabela </ title > 6 </ head >

www.facebook.com/k19treinamentos

81

HTML
7 < body > 8 < table > 9 < caption > Carros </ caption > 1 ... 11 </ table > 12 </ body > 13 </ html >
Cdigo HTML 2.80: Exemplo de ttulo de tabela

82

Figura 2.40: Exemplo de ttulo de tabela

Agrupando colunas
Podemos dividir as colunas de uma tabela em grupos. Normalmente, o principal motivo para estabelecer essa diviso poder depois denir formataes especcas 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 dene 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 >
Cdigo HTML 2.81: Exemplo de agrupamento de colunas

82

www.k19.com.br

83

HTML

Figura 2.41: Exemplo de agrupamento de colunas

Exerccios de Fixao

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

Figura 2.42: Exerccio para a tag table

www.facebook.com/k19treinamentos

83

HTML

84

As linhas vermelhas foram colocadas na imagem apenas para facilitar a visualizao do problema.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exerccio 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 atualizao : 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 >
Cdigo 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 endereo:


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

84

www.k19.com.br

85

HTML

No Ubuntu, utilize o Chrome para acessar o endereo:


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 > Exerccio 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 >

Cdigo 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 endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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

Formulrios
Alguns sites e praticamente todas as aplicaes web necessitam obter informaes enviadas pelos usurios. Por exemplo, considere uma empresa que deseja receber os pedidos dos seus clientes atravs do seu site. O site dessa empresa precisa oferecer alguma forma de interao que possibilite o recebimento de dados fornecidos pelos usurios. Para tornar os sites e as aplicaes web mais interativos, podemos utilizar formulrios. Atravs dos formulrios, os usurios podem enviar informaes aos Web Servers. Para criar um formulrio, devemos utilizar o elemento form. Esse elemento possui um atributo chamado action. O valor desse atributo indica para qual endereo os dados do formulrio sero enviados.
1 < form action = " pagina . html " > 2 ... 3 </ form >

www.facebook.com/k19treinamentos

85

HTML

86

Os formulrios so compostos por caixas de texto, checkboxes, radios, caixas de seleo, botes, entre outros componentes. Provavelmente, voc reconhecer diversos desses componentes na imagem abaixo.

Figura 2.43: Componentes de formulrio

Caixas de texto
Geralmente, os formulrios possuem uma ou mais caixas de texto. As caixas de texto so adicionadas nos documentos HTML atravs do elemento input. Esse elemento possui um atributo chamado type. Para denir uma caixa de texto, o valor do atributo type deve ser text. Normalmente, o input denido pelos navegadores como inline-level element.
1 < input type = " text " >

Considere um formulrio com diversas caixas de texto. Quando as informaes preenchidas nesse formulrio chegarem ao Web Server, certamente, ele precisar saber o que foi preenchido em cada caixa. Por isso, necessrio identicar 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 " >

Parmetros, GET e POST


Vamos analisar como os valores preenchidos nos formulrios so enviados aos Web Servers. Considere o seguinte exemplo.
86
www.k19.com.br

87

HTML

Figura 2.44: Parmetros HTTP

O formulrio acima possui duas caixas de texto. Nas duas, o atributo name foi denido. Quando as caixas forem preenchidas e o formulrio enviado, os dados desse formulrio so adicionados na requisio HTTP .

Figura 2.45: Parmetros HTTP

Observe na imagem abaixo que os valores preenchidos nas caixas de texto so enviados como parmetros na URL da requisio HTTP . Os nomes dos parmetros so exatamente os nomes denidos nas caixas de texto com o valor do atributo name. Note tambm que os valores dos parmetros cam expostos na barra de endereo do navegador.
www.facebook.com/k19treinamentos

87

HTML

88

Figura 2.46: Parmetros HTTP

Muitas vezes, no adequado exibir os valores dos atributos na barra de endereo dos navegadores. Podemos ocultar esses valores adicionando o atributo method com o valor post no elemento form. Esse atributo aceita apenas dois valores: get e post. Ele dene o tipo de requisio HTTP que o navegador deve realizar para enviar o formulrio. Nas requisies do tipo GET, os parmetros so adicionados na URL da requisio. Nas requisies do tipo POST, os parmetros so adicionados no contedo da requisio.

Figura 2.47: Parmetros HTTP

88

www.k19.com.br

89

HTML

Figura 2.48: Parmetros HTTP

Figura 2.49: Parmetros HTTP

Rtulos
Nos formulrios, os rtulos so fundamentais para informar aos usurios quais dados devem ser preenchidos. Para adicionar um rtulo, devemos utilizar o elemento label. Os textos dos rtulos so denidos no contedo desse elemento.

www.facebook.com/k19treinamentos

89

HTML
1 < label > Nome : </ label > 2 < input type = " text " name = " nome " >

90

Para melhorar a acessibilidade dos documentos HTML, os rtulos devem ser explicitamente associados aos campos dos formulrios. Para estabelecer esse vnculo, o primeiro passo identicar os campos atravs do atributo id. O segundo passo denir o atributo for do elemento label com o identicador do campo correspondente ao rtulo.
1 < label for = " nome_id " > Nome : </ label > 2 < input type = " text " name = " nome " id = " nome_id " >

Figura 2.50: Rtulos

Placeholders
Como vimos, os rtulos so utilizados para informar aos usurios quais dados devem ser preenchidos nos formulrios. Alm dos rtulos, podemos utilizar placeholders para dar dicas ou exemplos do contedo que desejamos em cada caixa de entrada. Um placeholder criado atravs do atributo placeholder do elemento input.
1 < label for = " nome_id " > Nome : </ label > 2 < input id = " nome_id " type = " text " name = " nome " placeholder = " Digite o seu nome aqui " >

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

Botes de submit
Para adicionar um boto de submit em um formulrio, podemos utilizar o elemento input com type igual a submit. Esse tipo de boto envia os dados do formulrio para o Web Server. Os textos desses botes so denidos com o atributo value.
1 < input id = " botao_id " type = " submit " value = " enviar " >

90

www.k19.com.br

91

HTML

Figura 2.53: Botes de submit

Outra forma de adicionar um boto de submit em um documento HTML utilizar o elemento button com type igual a submit. Diferentemente do elemento input, o elemento button permite a criao de botes com imagens alm de texto.
1 < button id = " botao_id " type = " submit " > 2 Enviar 3 < img src = " submit . png " alt = " Enviar " > 4 </ button >

Figura 2.54: Botes de submit

Exerccios de Fixao

Se voc estiver utilizando o Ubuntu, crie um arquivo chamado parametros.php no projeto html em Site Root.
67

1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Parmetros </ title > 6 </ head > 7 < body > 8 < h1 > Parmetros </ h1 > 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 >
Cdigo 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
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Parmetros </ title > 6 </ head > 7 < body > 8 < h1 > Parmetros </ h1 > 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 >
Cdigo HTML 2.94: parametros.asp

92

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-fixacao67.zip

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

1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exerccio de formulrio bsico </ 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 >
Cdigo HTML 2.95: formulario-basico.html

Importante No Windows, altere o cdigo 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 endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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

Utilize o Chrome DevTools ou o Firebug para vericar os parmetros enviados atravs do formulrio. Chame o instrutor caso tenha alguma dvida.

Caixas de entrada especcas


As caixas de texto so componentes muito genricos. Antes do HTML5, informaes de natureza bem distintas eram obtidas atravs desses componentes. Para melhorar a semntica dos documentos HTML, tipos especcos de caixas foram adicionados no HTML5.

Caixas de busca
Assim como as caixas de texto, as caixas de busca so adicionadas nos formulrio com o elemento input. A diferena que o valor do atributo type deve ser search ao invs de text.
1 < input id = " keywords_id " name = " keywords " type = " search " >

As caixas de busca devem ser utilizadas para coletar palavras chave que sero utilizadas em algum tipo de pesquisa. A princpio no h nenhuma diferena prtica entre as caixas de texto e as caixas de busca. Contudo, essa diferenciao adiciona valor semntico aos documentos HTML e possibilita, por exemplo, que os navegadores diferenciem visualmente esses dois tipos de caixas.

Figura 2.55: Caixas de busca

Caixas de nmeros
Para coletar dados numricos, podemos utilizar caixas especcas para nmeros. No HTML5, h dois tipos de caixas para esse propsito. Os dois so denidos com o elemento input. O valor do atributo type number para o primeiro tipo e range para o segundo tipo.
1 < input id = " numero1_id " name = " numero1 " type = " number " > 2 < input id = " numero2_id " name = " numero2 " type = " range " >

Esses dois tipos de componentes devem ser utilizados para coletar valores de sequncias numricas pr-denidas. A principal diferena entre eles que o primeiro (type=number) deve oferecer um mecanismo preciso para os usurios selecionarem o valor desejado enquanto o segundo
www.facebook.com/k19treinamentos

93

HTML

94

(type=range) no possui essa obrigao. A imagem a seguir mostra uma possvel forma dos navegadores exibirem essas caixas.

Figura 2.56: Caixas de nmeros

Para denir a sequncia dos nmeros que podem ser selecionados pelos usurios, podemos utilizar os atributos min, max e step. Por exemplo, para coletar um nmero da sequncia {0; 0,2; 0,4; 0,6; 0,8; 1}, os valores dos atributos min, max e step devem ser 0, 1 e 0.2 respectivamente.
1 < input id = " numero1_id " type = " number " name = " numero1 " min = " " 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 denidas caixas de entradas especcas para emails, telefones e urls. Essas caixas so 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 pginas web melhora com a utilizao dessas caixas. Por exemplo, a congurao do teclado dos celulares ou tablets pode ser alterada de acordo com o tipo de caixa de entrada. Nas caixas de email, o caractere @ pode ser adicionado ao teclado. Nas caixas de telefone, o teclado no precisa conter as letras do alfabeto. Nas caixas de url, teclas especiais como .com ou www podem ser adicionadas ao teclado.
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 so 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, ms e ano) sem fuso horrio. datetime: Utilizado para coletar data (dia, ms e ano) e hora (hora, minuto, segundo e frao de segundo) com fuso horrio em UTC. datetime-local: Utilizado para coletar data (dia, ms e ano) e hora (hora, minuto, segundo e frao de segundo) sem fuso horrio. month: Utilizado para coletar data composta por ms e ano sem fuso horrio. time: Utilizado para coletar hora (hora, minuto, segundo e frao de segundo) sem fuso horrio. week: Utilizado para coletar data composta por semana e ano sem fuso horrio. A criao desses componentes permite que os navegadores melhorem a usabilidade das pginas web. A forma de exibio das caixas de datas e horas pode facilitar o processo de preenchimento dos formulrios. Inclusive, os navegadores podem exibir esses componentes de formas diferentes de acordo com o dispositivo (computador, celular, tablet, entre outros).
1 2 3 4 5 6 < input < input < input < input < input < input id = " data_id " name = " data " type = " date " > id = " data_hora_fuso_id " name = " data - hora - fuso " type = " datetime " > id = " data_hora_id " name = " data - hora " type = " datetime - local " > id = " mes_id " name = " mes " type = " month " > id = " hora_id " name = " hora " type = " time " > id = " semana_id " name = " semana " type = " week " >

www.facebook.com/k19treinamentos

95

HTML

96

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 especcas para esse tipo de informao. Para adicionar uma caixa de senha em um formulrio, devemos utilizar o elemento input com o valor password para o atributo type. Normalmente, os navegadores utilizam smbolos como o asterisco ou o crculo para omitir o contedo das caixas de senha.
1 < input id = " senha_id " name = " senha " type = " password " >

Figura 2.61: Caixa de senha

Caixas de texto longo


Para coletar um texto com vrias linhas, podemos utilizar o elemento textarea. A quantidade de linhas de um textarea denida com o atributo rows e a quantidade de colunas com o atributo cols.
96
www.k19.com.br

97

HTML

Esse elemento tambm 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 denir o limite de caracteres que podem ser inseridos no contedo do elemento textarea atravs do atributo maxlength.
1 < textarea id = " mensagem_id " name = " mensagem " maxlength = " 14 " > 2 3 </ textarea >

Figura 2.62: Caixa de texto longo

Exerccios de Fixao

70 Crie um arquivo chamado formulario-caixas-especicas.html no projeto html em Site Root com o seguinte contedo.

1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exerccio de formulrio com caixas especficas </ 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
32 33 34 35 36 37 38 39 4 41 42 43 44 45 46 47 48 49 5 51 52 53 54 55 56 57 58 59 6 61 62 63 64 65 66 67 68 69 7 71 72 73 74 75 76 77 78 79 8 81 82 83 84 85 86 87 88 89 9 91 92 93 94 95 96 97 98 99 1 1 1 name = " curtiu " min = " " max = " 1 " > < br > < label for = " email_id " > Email : </ label > < input id = " email_id " type = " email " name = " email " placeholder = " Seu email " > < br > < label for = " telefone_id " > Telefone : </ label > < input id = " telefone_id " type = " tel " name = " telefone " placeholder = " Seu telefone " > < br > < label for = " site_id " > Site : </ label > < input id = " site_id " type = " url " name = " site " placeholder = " Seu site " > < br > < label for = " nascimento_id " > Nascimento : </ label > < input id = " nascimento_id " type = " date " name = " nascimento " > < br > < label for = " festa_aniversario_id " > Festa de Aniversrio : </ label > < input id = " festa_aniversario_id " type = " datetime - local " name = " festa_aniversario " > < br > < label for = " proximo_carnaval_mes_id " > Ms do prximo Carnaval : </ label > < input id = " proximo_carnaval_mes_id " type = " month " name = " proximo_carnaval_mes " > < br > < label for = " semana_rock_in_rio_id " > Semana do Rock in Rio : </ label > < input id = " semana_rock_in_rio_id " type = " week " name = " semana_rock_in_rio " > < br > < label for = " horario_de_entrada_id " > Horrio de entrada : </ label > < input id = " horario_de_entrada_id " type = " time " name = " horario_de_entrada " >

98

98

www.k19.com.br

99
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 >
Cdigo HTML 2.104: formulario-caixas-especicas.html

HTML

Importante No Windows, altere o cdigo acima substituindo o trecho parametros.php pelo trecho parametros.asp.

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-fixacao7 .zip

71

No Windows, utilize o Chrome para acessar o endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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

Utilize o Chrome DevTools ou o Firebug para vericar os parmetros enviados atravs do formulrio. Chame o instrutor caso tenha alguma dvida.

Checkboxes e Radios
Para adicionar um checkbox em um formulrio, devemos utilizar o elemento input com type igual a checkbox. Ao utilizar esse componente, importante denir um valor para o atributo value. No envio do formulrio, esse valor transmitido ao Web Server se o checkbox correspondente estiver marcado.
1 < input id = " sim_id " name = " newsletter " type = " checkbox " value = " sim " >

www.facebook.com/k19treinamentos

99

HTML

100

Eventualmente interessante agrupar um determinado conjunto de checkboxes. Por exemplo, considere um formulrio que coleta as linguagens de programao que os usurios conhecem. Para cada linguagem, podemos denir um checkbox. Para agrupar esses checkboxes, basta denir o atributo name com o mesmo valor para eles.
1 2 3 4 5 < input < input < input < input < input id = " java_id " type = " checkbox " value = " java " name = " linguagens " > id = " csharp_id " type = " checkbox " value = " csharp " name = " linguagens " > id = " php_id " type = " checkbox " value = " php " name = " linguagens " > id = " ruby_id " type = " checkbox " value = " ruby " name = " linguagens " > id = " perl_id " type = " checkbox " value = " perl " name = " linguagens " >

Figura 2.63: Checkboxes

Para adicionar um radio em um formulrio, devemos utilizar o elemento input com type igual a radio. Ao utilizar esse componente, importante denir um valor para o atributo value. No envio do formulrio, esse valor transmitido ao Web Server se o radio correspondente estiver marcado.
1 < input id = " masculino_id " name = " sexo " type = " radio " value = " masculino " >

Eventualmente interessante agrupar um determinado conjunto de radios. Por exemplo, considere um formulrio que coleta o time preferido dos usurios. Para cada time, podemos denir um radio. Para agrupar esses radios, basta denir o atributo name com o mesmo valor para eles.
1 2 3 4 5 < input < input < input < input < input id = " sp_id " type = " radio " value = " sao - paulo " name = " time - preferido " > id = " barcelona_id " type = " radio " value = " barcelona " name = " time - preferido " > id = " milan_id " type = " radio " value = " milan " name = " time - preferido " > id = " mu_id " type = " radio " value = " manchester - united " name = " time - preferido " > id = " bdm_id " type = " radio " value = " bayern - de - munique " name = " time - preferido " >

Figura 2.64: Radios

Por padro, quando um formulrio exibido para os usurios, os checkboxes e os radios no esto marcados. Algumas vezes, desejamos que determinados checkboxes e radios estejam marcados quando os formulrios so apresentados aos usurios. Para resolver esse problema, podemos utilizar o atributo checked do elemento input. Esse atributo no precisa de valor.
1 < input id = " java_id " type = " checkbox " value = " java " name = " linguagens " checked >

1 < input id = " sp_id " type = " radio " name = " time - preferido " value = " sao - paulo " checked >

Seleo de cores
No HTML5, para coletar uma cor, podemos utilizar o elemento input com type igual a color.
100
www.k19.com.br

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

HTML

Figura 2.65: Seleo de cores

Exerccios de Fixao

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

1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exerccio 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 >
Cdigo HTML 2.112: checkboxes.html

www.facebook.com/k19treinamentos

101

HTML

102

Importante No Windows, altere o cdigo 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 endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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

Utilize o Chrome DevTools ou o Firebug para vericar os parmetros enviados atravs do formulrio. Chame o instrutor caso tenha alguma dvida.

74

Crie um arquivo chamado radios.html no projeto html em Site Root com o seguinte contedo.

1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exerccio de radios </ title > 6 </ head > 7 < body > 8 < form action = " parametros . php " method = " post " > 9 < label for = " sp_id " > So 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 >
Cdigo HTML 2.113: radios.html

Importante No Windows, altere o cdigo acima substituindo o trecho parametros.php pelo trecho parametros.asp.

Arquivo: https://github.com/K19/K19-Exercicios/archive/k
102

2-html-fixacao74.zip

www.k19.com.br

103
75

HTML

No Windows, utilize o Chrome para acessar o endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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

Utilize o Chrome DevTools ou o Firebug para vericar os parmetros enviados atravs do formulrio. Chame o instrutor caso tenha alguma dvida.

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

1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exerccio de seleo 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 >
Cdigo HTML 2.114: selecao-cores.html

Importante No Windows, altere o cdigo acima substituindo o trecho parametros.php pelo trecho parametros.asp.

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-fixacao76.zip

77

No Windows, utilize o Chrome para acessar o endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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

Utilize o Chrome DevTools ou o Firebug para vericar os parmetros enviados atravs do formulrio. Chame o instrutor caso tenha alguma dvida.

Botes
www.facebook.com/k19treinamentos

103

HTML

104

Botes genricos
Para adicionar um boto genrico em um formulrio, podemos utilizar o elemento input com type igual a button. As aes desse tipo de componente so denidas com JavaScript. Os textos desses botes so denidos com o atributo value.
1 < input id = " botao_id " type = " button " value = " boto " >

Figura 2.66: Botes genricos

Outra forma de adicionar um boto genrico em um documento HTML utilizar o elemento button com type igual a button. Diferentemente do elemento input, o elemento button permite a criao de botes com imagens alm de texto.
1 < button id = " botao_id " type = " button " > 2 Boto genrico 3 < img src = " botao . png " alt = " Boto " > 4 </ button >

Figura 2.67: Botes genricos

Botes de reset
Para adicionar um boto de reset em um formulrio, podemos utilizar o elemento input com type igual a reset. Esse tipo de boto reinicia os dados do formulrio. Os textos desses botes so denidos com o atributo value.
1 < input id = " botao_id " type = " reset " value = " reiniciar " >

Figura 2.68: Botes de reset

Outra forma de adicionar um boto de reset em um documento HTML utilizar o elemento button com type igual a reset. Diferentemente do elemento input, o elemento button permite a criao de botes com imagens alm de texto.
1 < button id = " botao_id " type = " reset " > 2 Boto de reset 3 < img src = " reset . png " alt = " Reiniciar " > 4 </ button >

104

www.k19.com.br

105

HTML

Figura 2.69: Botes de reset

Botes de upload
Para adicionar um boto de upload em um formulrio, podemos utilizar o elemento input com type igual a le. Esse tipo de boto permite selecionar um arquivo para um eventual upload. O formulrio que contm esse boto deve possuir o atributo enctype com o valor multipart/formdata.
1 < input id = " botao_id " name = " file " type = " file " >

Figura 2.70: Botes de upload

Imagem como boto de submit


Uma imagem pode funcionar como um boto 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 denida com o atributo src. Um texto alternativo deve ser denido 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 boto de submit

Exerccios de Fixao

78

Crie um arquivo chamado botoes.html no projeto html em Site Root com o seguinte contedo.

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

www.facebook.com/k19treinamentos

105

HTML
9 < input id = " file_id " type = " file " name = " file " > 1 11 < input id = " b1 " type = " button " value = " Boto genrico " > 12 13 < button id = " b2 " type = " button " > 14 Boto genrico 15 < img src = " http :// www . k19 . com . br / figs / botao - generico . png " alt = " Boto " > 16 </ button > 17 18 < input id = " b3 " type = " reset " value = " Reiniciar " > 19 2 < button id = " b4 " type = " reset " > 21 Boto 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 >
Cdigo HTML 2.121: botoes.html

106

Importante No Windows, altere o cdigo acima substituindo o trecho parametros.php pelo trecho parametros.asp.

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-fixacao78.zip

79

No Windows, utilize o Chrome para acessar o endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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

Utilize o Chrome DevTools ou o Firebug para vericar os parmetros enviados atravs do formulrio. Chame o instrutor caso tenha alguma dvida.

Drop-down list
Muitos formulrios permitem que os usurios selecionem um ou mais itens de uma lista de opes. Essa seleo pode ser realizada atravs de um drop-down list. Para adicionar esse tipo de componente, devemos utilizar o elemento select. Normalmente, o select denido pelos navegadores como inline-level element.
1 < select id = " estados_id " name = " estado " > 2 ... 3 </ select >

106

www.k19.com.br

107

HTML

As opes devem ser denidas no contedo do elemento select e elas so adicionadas com o elemento option. O contedo do elemento option exibido para os usurios. Esse elemento possui um atributo chamado value. Quando o formulrio for enviado, o valor do atributo value transmitido ao Web Server se a opo correspondente foi selecionada pelo usurio. Se esse atributo no estiver denido, o contedo do elemento option transmitido ao Web Server se a opo correspondente foi selecionada pelo usurio.
1 < select id = " estados_id " name = " estado " > 2 < option value = " SP " > So Paulo </ option > 3 < option value = " RJ " > Rio de Janeiro </ option > 4 < option value = " RS " > Rio Grande do Sul </ option > 5 < option value = " RN " > Rio Grande do Norte </ option > 6 </ select >

Figura 2.72: Drop-down list

Por padro, apenas um item de um drop-down list pode ser selecionado pelos usurios. Mas, utilizando o atributo multiple, um ou mais itens podem ser selecionados. Geralmente, mantendo a tecla CTRL pressionada, os usurios podero escolher dois ou mais itens.
1 < select id = " estados_id " name = " estado " multiple = " multiple " > 2 < option value = " SP " > So Paulo </ option > 3 < option value = " RJ " > Rio de Janeiro </ option > 4 < option value = " RS " > Rio Grande do Sul </ option > 5 < option value = " PR " > Paran </ option > 6 < option value = " RN " > Rio Grande do Norte </ option > 7 < option value = " BA " > Bahia </ option > 8 </ select >

Figura 2.73: Drop-down list

Nos drop-down lists com muitas opes, interessante agrupar as opes em categorias. Esse agrupamento pode ser realizado com o elemento optgroup. Esse elemento possui um atributo chamado label. O valor desse atributo exibido no drop-down list.
1 < select id = " estados_id " name = " estado " > 2 < optgroup label = " Regio Sudeste " >

www.facebook.com/k19treinamentos

107

HTML
3 < option value = " SP " > So Paulo </ option > 4 < option value = " RJ " > Rio de Janeiro </ option > 5 </ optgroup > 6 < optgroup label = " Regio Sul " > 7 < option value = " RS " > Rio Grande do Sul </ option > 8 < option value = " PR " > Paran </ option > 9 </ optgroup > 1 < optgroup label = " Regio Nordeste " > 11 < option value = " RN " > Rio Grande do Norte </ option > 12 < option value = " BA " > Bahia </ option > 13 </ optgroup > 14 </ select >

108

Figura 2.74: Drop-down list

Drop-down list com itens pr-selecionados


Quando um drop-down list exibido para os usurios, opes podem estar por padro selecionadas. O atributo selected do elemento option dene as opes que devem estar selecionadas quando um drop-down list exibido para os usurios. Esse atributo no precisa de valor.
1 < select id = " estados_id " name = " estado " multiple = " multiple " > 2 < optgroup label = " Regio Sudeste " > 3 < option value = " SP " selected > So Paulo </ option > 4 < option value = " RJ " > Rio de Janeiro </ option > 5 </ optgroup > 6 < optgroup label = " Regio Sul " > 7 < option value = " RS " selected > Rio Grande do Sul </ option > 8 < option value = " PR " > Paran </ option > 9 </ optgroup > 1 < optgroup label = " Regio Nordeste " > 11 < option value = " RN " > Rio Grande do Norte </ option > 12 < option value = " BA " > Bahia </ option > 13 </ optgroup > 14 </ select >

Exerccios de Fixao

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

1 <! DOCTYPE html > 2 < html lang = " pt - br " >

108

www.k19.com.br

109
3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exerccio 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 " > So Paulo </ option > 11 < option value = " RJ " > Rio de Janeiro </ option > 12 < option value = " RS " > Rio Grande do Sul </ option > 13 < option value = " PR " > Paran </ 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 = " Regio Sudeste " > 2 < option value = " SP " > So Paulo </ option > 21 < option value = " RJ " > Rio de Janeiro </ option > 22 </ optgroup > 23 < optgroup label = " Regio Sul " > 24 < option value = " RS " > Rio Grande do Sul </ option > 25 < option value = " PR " > Paran </ option > 26 </ optgroup > 27 < optgroup label = " Regio Nordeste " > 28 < option value = " RN " > Rio Grande do Norte </ option > 29 < option value = " BA " > Bahia </ option > 3 </ optgroup > 31 </ select > 32 33 < input type = " submit " value = " Enviar " > 34 </ form > 35 </ body > 36 </ html >
Cdigo HTML 2.127: drop-down-list.html

HTML

Importante No Windows, altere o cdigo acima substituindo o trecho parametros.php pelo trecho parametros.asp.

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-fixacao8 .zip

81

No Windows, utilize o Chrome para acessar o endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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

Utilize o Chrome DevTools ou o Firebug para vericar os parmetros enviados atravs do formulrio. Chame o instrutor caso tenha alguma dvida.

Fieldset
www.facebook.com/k19treinamentos

109

HTML

110

Os campos de um formulrio muito longo podem ser agrupados logicamente com o elemento eldset. No contedo desse elemento, podemos utilizar o elemento legend para denir a legenda do eldset. Normalmente, o eldset denido pelos navegadores como block-level element.
1 2 3 4 5 6 7 8 9 1 11 12 < fieldset > < legend > Dados Pessoais </ legend > ... </ fieldset > < fieldset > < legend > Formao </ legend > ... </ fieldset > < fieldset > < legend > Experincia </ legend > ... </ fieldset >

Figura 2.75: Fieldset

Exerccios de Fixao

82

Crie um arquivo chamado eldset.html no projeto html em Site Root com o seguinte contedo.

1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exerccio 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 > Formao </ legend > 16 < label for = " curso_id " > Curso : </ label > 17 < input id = " curso_id " type = " text " name = " curso " > 18 </ fieldset > 19 < fieldset > 2 < legend > Experincia </ legend > 21 < label for = " empresa_id " > Empresa : </ label > 22 < input id = " empresa_id " type = " text " name = " empresa " >

110

www.k19.com.br

111
23 </ fieldset > 24 25 < input type = " submit " value = " Enviar " > 26 </ form > 27 </ body > 28 </ html >
Cdigo HTML 2.129: eldset.html

HTML

Importante No Windows, altere o cdigo acima substituindo o trecho parametros.php pelo trecho parametros.asp.

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-fixacao82.zip

83

No Windows, utilize o Chrome para acessar o endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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

Utilize o Chrome DevTools ou o Firebug para vericar os parmetros enviados atravs do formulrio. Chame o instrutor caso tenha alguma dvida.

Autocomplete
Para melhorar a usabilidade, podemos utilizar o recurso do autocomplete nas caixas de entrada. Para utilizar esse recurso, devemos criar uma lista de sugestes com o elemento datalist. fundamental identicar as listas de sugestes com o atributo id.
1 < datalist id = " comidas_id " > 2 ... 3 </ datalist >

As opes devem ser denidas no contedo do elemento datalist e elas so adicionadas com o elemento option. O atributo value de um elemento option dene uma sugesto.
1 < datalist id = " comidas_id " > 2 < option value = " Lasanha " > 3 < option value = " Pizza " > 4 < option value = " Sopa " > 5 < option value = " Salada " > 6 </ datalist >

Com a lista de sugestes criada, podemos associ-la a uma caixa de entrada atravs do atributo list do elemento input.
1 < input id = " comida_id " name = " comida " type = " text " list = " comidas_id " > 2

www.facebook.com/k19treinamentos

111

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

112

Figura 2.76: Autocomplete

Exerccios de Fixao

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

1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exerccio 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 >
Cdigo HTML 2.133: autocomplete.html

Importante No Windows, altere o cdigo acima substituindo o trecho parametros.php pelo trecho parametros.asp.

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-fixacao84.zip

85

No Windows, utilize o Chrome para acessar o endereo:


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

112

www.k19.com.br

113

HTML

No Ubuntu, utilize o Chrome para acessar o endereo:


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

Utilize o Chrome DevTools ou o Firebug para vericar os parmetros enviados atravs do formulrio. Chame o instrutor caso tenha alguma dvida.

Campos ou botes desabilitados


Eventualmente, determinados campos ou botes de um formulrio devem ser desabilitados. Para desabilitar um campo ou boto, podemos utilizar o atributo disabled dos elementos input, select, textarea e button. Esse atributo no 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 Boto desabilitado 3 < img src = " botao . png " alt = " Boto desabilitado " > 4 </ button >

www.facebook.com/k19treinamentos

113

HTML

114

Figura 2.80: Botes desabilitados

Campos xos
Eventualmente, determinados campos de um formulrio devem ser xo, ou seja, os usurios no podem alterar o contedo. Para xar o contedo de um campo, podemos utilizar o atributo readonly dos elementos input e textarea. Esse atributo no precisa de valor.
1 < input id = " nome_id " name = " nome " type = " text " value = " Marcelo Martins " readonly >

Figura 2.81: Campos xos

1 < textarea readonly > 2 Gostaria de efetuar a matrcula no K1 3 </ textarea >

- Formao Desenvolvedor Java .

Figura 2.82: Campos xos

Exerccios de Fixao

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

1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exerccio 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
14 15 < input type = " submit " value = " Enviar " > 16 </ form > 17 </ body > 18 </ html >
Cdigo HTML 2.140: disabled-readonly.html

HTML

Importante No Windows, altere o cdigo acima substituindo o trecho parametros.php pelo trecho parametros.asp.

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-fixacao86.zip

87

No Windows, utilize o Chrome para acessar o endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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

Utilize o Chrome DevTools ou o Firebug para vericar os parmetros enviados atravs do formulrio. Chame o instrutor caso tenha alguma dvida.

Validao
Alguns recursos para realizar a validao dos campos de um formulrio foram adicionados no HTML5. Essas validaes ocorrem antes do envio dos formulrios. Por padro, algumas validaes so realizadas automaticamente de acordo com o tipo do campo. Por exemplo, os navegadores vericam se o contedo de uma caixa de email um email vlido.
1 < input id = " email_id " name = " email " type = " email " >

Figura 2.83: Validao de email

Os navegadores tambm vericam se o contedo de uma caixa de URL uma url vlida.
1 < input id = " url_id " name = " url " type = " url " >

www.facebook.com/k19treinamentos

115

HTML

116

Figura 2.84: Validao de URL

Outras validaes devem ser denidas explicitamente. Por exemplo, se um determinado campo obrigatrio, devemos utilizar o atributo required. Esse atributo no precisa de valor.
1 < input id = " nome_id " name = " nome " type = " text " required >

Figura 2.85: Validao de campo obrigatrio

Se um determinado campo deve respeitar uma expresso regular, devemo utilizar o atributo pattern.
1 < input 2 id = " placa_id " 3 name = " placa " 4 type = " text " 5 pattern = " [A - Z ]{3} [ -9]{4} " 6 title = " As placas so formadas por 3 letras ou 4 nmeros " >

Figura 2.86: Validao com expresso regular

Se o contedo de um campo numrico 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 minma 18 e a mxima 6 " >

116

www.k19.com.br

117

HTML

Figura 2.87: Validao de numrica de mnimo e mximo

Exerccios de Fixao

Crie um arquivo chamado validacao.html no projeto html em Site Root com o seguinte contedo.
88

1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exerccio de validao </ 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 so formadas por 3 letras ou 4 nmeros " > 25 26 < input type = " submit " value = " Enviar " > 27 </ form > 28 </ body > 29 </ html >
Cdigo HTML 2.146: validacao.html

Importante No Windows, altere o cdigo acima substituindo o trecho parametros.php pelo trecho parametros.asp.

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-fixacao88.zip

89

No Windows, utilize o Chrome para acessar o endereo:


www.facebook.com/k19treinamentos

117

HTML
http://localhost/html/public_html/validacao.html.

118

No Ubuntu, utilize o Chrome para acessar o endereo:


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

Utilize o Chrome DevTools ou o Firebug para vericar os parmetros enviados atravs do formulrio. Chame o instrutor caso tenha alguma dvida.

Partes de um documento HTML


Normalmente, um documento HTML pode ser dividido em pedaos. Por exemplo, comum existir cabealhos, rodaps e menus de navegao na maior parte das pginas web. No HTML5, diversos elementos foram adicionados para denir especicamente os principais pedaos que geralmente um documento HTML possui.

header
O elemento header utilizado para denir um cabealho de um documento HTML ou de uma seo de um documento HTML. O objetivo desse elemento denir um contedo de introduo ou de navegao. Normalmente, no header, encontramos os elementos h1, h2, h3, h4, h5 e h6. No contedo do header, tambm comum encontrar sumrios, formulrios de busca, logos, entre outros.
1 < body > 2 < header > 3 < h1 > Blog da K19 </ h1 > 4 < img src = " k19 - logo . png " alt = " K19 " > 5 </ header > 6 7 < article > 8 < header > 9 < h1 > Novos elementos do HTML5 </ h1 > 1 < img src = " html5 - logo . png " alt = " HTML5 " > 11 </ header > 12 13 ... 14 </ article > 15 16 ... 17 </ body >
Cdigo HTML 2.147: Exemplo de cabealho

footer
O elemento footer utilizado para denir um rodap para o documento HTML ou para uma seo do documento HTML. muito comum encontrarmos em seu contedo informaes sobre a seo a qual ele pertence como quem a escreveu, links relacionados ao contedo da seo e informaes legais, por exemplo.
1 < body > 2 ... 3 < article > 4 <p > Loren ipsum...</ p > 5

118

www.k19.com.br

119
6 < footer > Postado por : Jonas Hirata </ footer > 7 </ article > 8 9 < footer >&copy ;2 13 K19 Treinamentos . </ footer > 1 </ body >
Cdigo HTML 2.148: Exemplo de rodap

HTML

nav
O elemento nav utilizado para denir um bloco com os principais links de um documento HTML. comum, denir os principais links de um documento HTML nos rodaps. Dessa forma, o elemento nav aparecer com frequncia no contedo do elemento footer.
1 < body > 2 < header > 3 < h1 > Blog da K19 </ h1 > 4 5 < nav > 6 <a href = " # " > Home </ a > 7 <a href = " # " > ltimos posts </ a > 8 <a href = " # " > Arquivo </ a > 9 </ nav > 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 >
Cdigo HTML 2.149: Exemplo de nav

article
O elemento article utilizado para denir uma composio independente em um documento HTML. A princpio, um article pode ser distribudo independentemente ou facilmente reutilizado. apropriado utilizar esse elemento para denir um post de um frum, um artigo de uma revista ou jornal, um post de um blog, um comentrio enviado por um usurio, um widget interativo ou qualquer item independente de contedo. Considere um blog no qual os usurios podem enviar comentrios sobre os posts publicados. Os posts desse blog podem ser denidos com o elemento article. Os comentrios podem ser denidos com elementos article internos aos que denem os posts. Um elemento article dentro de outro elemento article deve denir algo relacionado ao contedo do article que o contm.
1 < body > 2 < article > 3 < h1 > Primeiro post do blog </ h1 > 4 <p > Loren ipsum...</ p > 5

www.facebook.com/k19treinamentos

119

HTML
6 < h2 > Comentrios </ h2 > 7 < article > Legal este post ! </ article > 8 < article > Bacana este post ! </ article > 9 < article > Da hora este post ! </ article > 1 </ article > 11 </ body >
Cdigo HTML 2.150: Exemplo de artigo

120

aside
O elemento aside utilizado para denir algum contedo que esteja relacionado ao contedo principal, mas no o foco do documento HTML. Normalmente, esse elemento exibido em uma coluna lateral em relao ao contedo principal.
1 < body > 2 < article > 3 < h1 > Novidades do HTML5 </ h1 > 4 <p > Loren ipsum...</ p > 5 6 < h2 > Comentrios </ h2 > 7 < article > Legal este post ! </ article > 8 < article > Bacana este post ! </ article > 9 < article > Da hora este post ! </ article > 1 </ article > 11 < aside > 12 < h1 > Posts relacionados </ h1 > 13 ... 14 </ aside > 15 </ body >
Cdigo HTML 2.151: Exemplo de aside

section
O elemento section utilizado para denir uma seo genrica de um documento. Uma seo o agrupamento de um contedo dentro de um tema. Normalmente, as sees possuem cabealho e rodap.
1 < body > 2 < section > 3 < h1 > ltimos Posts </ h1 > 4 < article > 5 < h1 > Primeiro post do blog </ h1 > 6 <p > Loren ipsum...</ p > 7 </ article > 8 9 < article > 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 >
Cdigo HTML 2.152: Exemplo de seo

120

www.k19.com.br

121

HTML

gure

O elemento gure deve ser utilizado para denir um contedo que auto-suciente e tipicamente referenciado como uma unidade singular do uxo principal do documento. Opcionalmente o contedo pode possuir uma legenda. Por exemplo, esse elemento pode ser utilizado para denir ilustraes, diagramas, fotos, vdeos, cdigos fonte em um documento HTML. Normalmente, esse itens so referenciados no contedo principal mas podem ser removidos sem afetar o uxo do documento.

gcaption

O elemento gcaption deve ser lho de um elemento gure. Ele utilizado para denir a legenda do contedo do elemento pai. Alm disso, o elemento gcaption deve ser o primeiro ou ltimo lho de um elemento gure.
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 >

Cdigo HTML 2.153: Exemplo de gure e gurecaption

www.facebook.com/k19treinamentos

121

HTML
header nav

122

Home

Destaque

Arquivo

ltimos Posts
Neque porro quisquam est qui dolorem
So Paulo, SP - 12/11/2013 - 03:45 PM

section article

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus vulputate elit, sit amet venenatis ante lacinia eget. Ut id urna vel quam dictum elementum. Mauris rutrum magna nec erat ullamcorper scelerisque. Aenean non est libero. Mauris venenatis, velit quis mattis tempus, neque eros tristique purus, non pretium nisi urna at nunc. Morbi nec commodo dui, quis vulputate ligula. Maecenas vitae libero a turpis posuere fringilla. Pellentesque risus neque, pretium vitae elementum ac, ultrices et eros.

figure
K19 Treinamentos Nulla tincidunt tincidunt

Nullam dictum in nisl mollis ullamcorper.

figcaption

Phasellus ullamcorper nibh

Sed sit amet enim sapien. Nulla quis lectus non orci pellentesque tristique. Duis eget ullamcorper turpis, facilisis commodo nisl. Aliquam rhoncus ut metus a vehicula. Suspendisse pellentesque ligula arcu, in viverra massa rhoncus a.

aside

Comentrios
Mauris Vulputate
13/11/2013 - 10:27 AM

article

Sed sit amet enim sapien. Nulla quis lectus non orci pellentesque tristique. Duis eget ullamcorper turpis, facilisis commodo nisl. Aliquam rhoncus ut metus a vehicula. Suspendisse pellentesque ligula arcu, in viverra massa rhoncus a.

article

Donec Tristique
13/11/2013 - 11:42 AM

Sed sit amet enim sapien. Nulla quis lectus non orci pellentesque tristique. Duis eget ullamcorper turpis, facilisis commodo nisl. Aliquam rhoncus ut metus a vehicula. Suspendisse pellentesque ligula arcu, in viverra massa rhoncus a.

Posts em Destaque
Donec quis suscipit odio, k19 treinamentos
So Paulo, SP - 12/10/2013 - 06:19 PM

section article

Sed sit amet enim sapien. Nulla quis lectus non orci pellentesque tristique. Duis eget ullamcorper turpis, facilisis commodo nisl. Aliquam rhoncus ut metus a vehicula. Suspendisse pellentesque ligula arcu, in viverra massa rhoncus a. Nulla at quam arcu. Quisque sed erat ac ligula auctor porttitor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum eleifend augue at ligula porta consectetur. Mauris a luctus leo. Curabitur auctor aliquet aliquam.

footer
Donec varius a nibh Sed sit amet enim sapien Nulla quis lectus non orci pellentesque tristique Duis eget ullamcorper turpis, facilisis commodo Suspendisse pellentesque ligula arcu, in viverra Nulla at quam arcu Quisque sed erat ac ligula auctor porttitor Donec varius a nibh Maecenas non enim vel est volutpat Vivamus tristique tempor est, interdum Proin id pretium felis Nulla tincidunt tincidunt est, ac porta quam Sed ultricies justo vitae ullamcorper pulvinar Nullam dictum in nisl mollis ullamcorper

Bookface

Like us on

Figura 2.88: Partes de um documento HTML

122

www.k19.com.br

123

HTML

Normalmente, os elementos header, footer, nav, header, article, aside, section, gure e gcaption so denidos pelos navegadores como block-level elements.

Diviso de contedo
Muitas vezes, desejamos separar o contedo de um documento HTML. Geralmente, essas divises ocorrem quando h uma mudana de tpico no contedo. Essas divises podem ser realizadas com o elemento hr. Normalmente, o hr denido 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 >
Cdigo HTML 2.154: Exemplo de separao de contedo

Exerccios de Fixao

90

Crie um arquivo chamado hr.html no projeto html em Site Root com o seguinte contedo.

1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exerccio de separao de contedo </ 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
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 >
Cdigo HTML 2.155: hr.html

124

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-fixacao9 .zip

91

No Windows, utilize o Chrome para acessar o endereo:


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

No Ubuntu, utilize o Chrome para acessar o endereo:


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

Agrupando elementos
Podemos agrupar elementos atravs dos elementos div ou span. Normalmente, os navegadores denem o elemento div como um block-level element e o span como um inline-level element. O principal objetivo em agrupar elementos com div ou span aplicar formataes especcas para cada grupo. Por isso, a utilidade desses elementos car mais clara quando falarmos sobre CSS.

Erro: Fechamento inadequado das tags


Um erro comum, ao denir 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 denir um documento HTML, no denir um texto alternativos para as imagens.

124

www.k19.com.br

125
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 >

HTML

Erro: Criar listas com o elemento br


Um erro comum, ao denir 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 >

Exerccios Complementares

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

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

www.facebook.com/k19treinamentos

125

HTML

126

3 Crie um arquivo chamado seguro-treinamento.html no projeto html em Site Root. Utilize a imagem abaixo como base.

126

www.k19.com.br

127
4

HTML

Crie um arquivo chamado caracteres-especiais.html no projeto html em Site Root. Utilize a imagem abaixo como base.

Crie um arquivo chamado espacos-e-quebras-de-linha.html no projeto html em Site Root. Utilize a imagem abaixo como base.
5

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

www.facebook.com/k19treinamentos

127

HTML
7

128

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.

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

128

www.k19.com.br

129
10

HTML

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

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

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

www.facebook.com/k19treinamentos

129

HTML

130

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

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

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

130

www.k19.com.br

131

HTML

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

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

www.facebook.com/k19treinamentos

131

HTML
18

132

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

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

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

132

www.k19.com.br

133

HTML

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

Resumo do Captulo

www.facebook.com/k19treinamentos

133

HTML
1

134

A linguagem HTML utilizada na criao das pginas web e especicada pelo W3C.

Um documento HTML composto por elementos hierarquicamente organizados.

Os elementos so inseridos em um documento HTML com o uso de tags.

O elemento DOCTYPE utilizado para declarar o tipo do documento.

A raiz de um documento HTML denida pelo elemento html.

Informaes sobre um documento HTML devem ser denidas no corpo do elemento head.

No corpo do elemento body, denido o contedo do documento HTML.

A semntica dos elementos HTML deve ser respeitada para a correta interpretao do contedo por buscadores e softwares de leitura (acessibilidade), por exemplo.

Os elementos h1, h2, h3, h4, h5 e h6 so utilizados para denir ttulos em um documento HTML.

10

Pargrafos so inseridos em um documento HTML com o elemento p.

Determinados caracteres devem ser inseridos em um documento HTML atravs do seu respectivo cdigo.

11

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

12

As listas sem ordem so denidas com o elemento ul. As listas com ordem so denidas com o elemento ol. As listas de descries so denidas com o elemento dl.

13

14

Os itens das listas com ordem e sem ordem so denidos com o elemento li.

Os termos de uma lista de descries so denidos com o elemento dt. As descries desses termos so denidas com o elemento dd.

15

134

www.k19.com.br

135
16

HTML

Podemos adicionar um documento HTML dentro de outro documento HTML com o elemento iframe.

17

Os links de um documento HTML so criados com o elemento a.

18

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

19

As tabelas so criadas com os elementos table, tr, th, td, thead, tbody, caption, colgroup e col.

20

Para criar um formulrio, devemos utilizar o elemento form.

Basicamente, os campos de um formulrio so criados com os elementos input, textarea e select.

21

As partes de um documento HTML podem ser denidas com os elementos header, footer, article, aside, section, gure, gcaption, div e span.

22

23

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

Prova

Quem dene a linguagem HTML?

a) Microsoft. b) Anatel. c) ABNT. d) W3C. e) NASA.

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.

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 so colocados no corpo do elemento html.

Qual alternativa apresenta um comentrio HTML vlido?

a) <! comentrio > b) <* comentrio *> c) // comentrio d) /* comentrio */ e) # comentrio

Qual alternativa est incorreta?

a) Respeitar a semntica dos elementos HTML facilita o trabalho das ferramentas de busca. b) Respeitar a semntica dos elementos HTML facilita o trabalho das ferramentas de leitura de tela para decientes visuais. c) Respeitar a semntica dos elementos HTML diminui o tamanho das pginas web. d) A semntica dos elementos HTML denida na especicao da linguagem HTML.

Qual alternativa est correta?

a) Ttulos com h2 so mais importantes do que ttulos com h1. b) Os ttulos so denidos com os elementos h1, h2, h3, h4, h5 e h6. c) Os ttulos so denidos com os elementos h1, h2 e h3.
136
www.k19.com.br

137

HTML

d) Os ttulos so denidos com os elementos header1, header2, header3, header4, header5 e header6. e) O elemento header1 equivale ao elemento h1.

Qual alternativa est correta?

a) Texto pr-formatado pode ser denido com o elemento text-pre. b) O elemento code utilizado para associar cdigo JavaScript a um documento HTML. c) O elemento stronger dene textos importantes. d) Citaes longas so denidas com o elemento blockquote. e) Podemos marcar texto com o elemento text-mark.

Qual alternativa est correta?

a) As listas com ordem so denidas atravs do elemento dl. b) Os termos de uma lista de descries so denidos com o elemento li. c) As listas com ordem e sem ordem so denidas atravs dos elementos ul e ol respectivamente. d) Os tens de uma lista com ordem so denidos atravs do elemento item. e) Uma lista pode ser denida dentro de outra lista.

Qual alternativa est incorreta?

a) Os links so denidos 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 dene 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 contm 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 so adicionadas com o elemento input-text. b) Os rtulos so denidos com o elemento input-label. c) Podemos criar um boto de submit com o elemento input. d) As caixas de senha so denidas com o elemento password. e) Os checkboxes e os radios so criados com os elementos checkbox e radio respectivamente.

13

Qual alternativa est correta? a) As opes de um drop-down list so denidas com o elemento input. b) As opes de um drop-down list podem ser agrupadas com o elemento option-group. c) O atributo selected do elemento alternative dene as opes 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 formulrio podem ser agrupados com o elemento inputset.

138

www.k19.com.br

139

HTML

b) Os campos de um formulrio podem ser agrupados com o elemento eldset. c) O elemento label deve ser utilizado em conjunto com o elemento eldset. d) O elemento legend deve ser utilizado em conjunto com o elemento inputset. e) A legenda de um eldset denida atravs do atributo legend.

15

Qual alternativa est correta?

a) As sugestes para o autocomplete de um campo so denidas pelos elementos datalist e option. b) As sugestes para o autocomplete de um campo so denidas atravs do atributo autocomplete. c) O elemento disabled utilizado para desabilitar campos ou botes. d) O atributo off utilizado para desabilitar campos ou botes. e) Campos xos podem ser denidos com o atributo no-write.

Minha Pontuao

Pontuao Mnima:

12

Pontuao Mxima:

15

www.facebook.com/k19treinamentos

139

HTML

140

140

www.k19.com.br

CAPTULO
Mais Sobre Mais Sobre

CSS

Quando no denimos uma formatao especca para os elementos HTML de uma pgina web, eles so exibidos com o estilo determinado pelo navegador utilizado. H dois problemas principais em deixar os navegadores decidirem qual formatao deve ser adotada. O primeiro que cada navegador pode adotar uma formatao diferente. Consequentemente, uma mesma pgina web no ser exibida exatamente da mesma forma em todos os navegadores. O segundo problema que as formataes adotadas pelos principais navegadores no so bonitas. Podemos padronizar a forma que as pginas web so exibidas nos diferentes navegadores e obter um visual agradvel denindo a nossa prpria formatao. O estilo das pginas deve ser denido com a linguagem CSS (Cascading Style Sheets).

Assim como a linguagem HTML, a linguagem CSS denida pelo W3C. Voc pode consultar a especicao do CSS no endereo http://www.w3.org/Style/CSS/specs. O W3C faz diversas recomendaes sobre como implementar as funcionalidades do CSS. Contudo, nem sempre, os navegadores respeitam essas recomendaes e eventualmente cada navegador adota uma abordagem prpria para uma determinada funcionalidade. Essas diferenas podem gerar problemas nas pginas web.

Nas primeiras verses da linguagem HTML, a formatao era realizada atravs de atributos especcos dos elementos. Por exemplo, a cor do fundo de uma pgina poderia ser denida da seguinte forma:
1 < body bgcolor = " red " >

Hoje em dia, essa abordagem totalmente no recomendada. Qualquer alterao visual dos elementos HTML deve ser denida atravs da linguagem CSS.

Box Model
Todo elemento HTML, no corpo de uma pgina web, est contido em um box. Considere o documento HTML abaixo.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >

www.facebook.com/k19treinamentos

141

CSS
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 >

142

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 contnua enquanto os boxes dos inline-level elements foram exibidos com linha tracejada. Os boxes dos block-level elements ocupam todo o espao horizontal e provocam quebras de linha. Por outro lado, os boxes dos inline-level elements ocupam horizontalmente somente o espao necessrio para o seu contedo e no provocam quebras de linha. O box de um elemento HTML composto por contedo (content), margem interna (padding),
142
www.k19.com.br

143

CSS

borda (border) e margem externa (margin).

Margem externa (margin) Borda (border) Margem interna (padding)

contedo

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 contedo (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 contedo (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 formatao para cada elemento HTML. Observe a estrutura de uma regra CSS.

Seletor

Corpo

p }

{ font-size: 40px;
Figura 3.3: Estrutura de uma regra CSS

Propriedade

O seletor determina para quais elementos a regra de formatao deve ser aplicada. No corpo de uma regra CSS, podemos denir diversas propriedades. Cada propriedade dene uma caracterstica visual. Por exemplo, a propriedade font-size utilizada para denir o tamanho da fonte utilizada nos textos.

Aplicando CSS ao HTML


Podemos aplicar propriedades CSS a elementos HTML de trs maneiras diferentes.

Inline style
Podemos aplicar propriedades CSS atravs do atributo style presente em diversos elementos HTML. Essa abordagem no recomendada pois o acoplamento entre os elementos HTML e as propriedades CSS muito alto dicultando a manuteno das pginas web.
1 <p style = " color : red " > 2 ... 3 </ p >

Internal style sheet


As regras CSS podem ser denidas no contedo do elemento style. Esse elemento deve ser denido 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 cdigo HTML do cdigo CSS denido as regras de formatao em um arquivo independente.
1 p { 2 color : red ; 3 }
Cdigo CSS 3.1: estilo.css

Depois de denir as regras CSS em um arquivo separado, ele deve ser associado ao documento HTML atravs do elemento link.
1 < head > 2 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 3 < title > Desenvolvimento Web </ title > 4 < link rel = " stylesheet " type = " text / css " href = " estilo . css " > 5 </ head >

Comentrios
Podemos adicionar comentrios no cdigo CSS atravs dos marcadores /* e */.
1 /* uma regra CSS para formatar os pargrafos */ 2 p { 3 color : red ; 4 }
Cdigo CSS 3.2: estilo.css

Chrome DevTools
Como vimos no captulo anterior, podemos utilizar ferramentas como o Chrome DevTools para analisar e modicar os documentos HTML. Essas ferramentas, tambm podem ser utilizadas para editar as propriedades CSS dos elementos de uma pgina web. Considere o cdigo HTML e o CSS abaixo.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < title > K19 - Chrome DevTools </ title > 5 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 6 < link rel = " stylesheet " type = " text / css " href = " chrome - devtools . css " > 7 </ head > 8 < body > 9 <p > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ p > 1 <p class = " class1 " > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ p > 11 </ body > 12 </ html >
Cdigo HTML 3.6: chrome-devtools.html

1 p { 2 border : 4 px solid red ;

www.facebook.com/k19treinamentos

145

CSS
3 font - size : 2 px ; 4 } 5 6 . class1 { 7 color : blue ; 8 border : 1 px solid green ; 9 }

146

Cdigo CSS 3.3: chrome-devtools.css

Observe a gura abaixo. Atravs do painel Styles podemos visualizar as regras CSS que foram aplicadas a um determinado elemento HTML. Esse painel tambm mostra a origem dessas regras e as dimenses do box do elemento.

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 denida nessas duas regras. O Chrome DevTools indica atravs de um trao horizontal qual ocorrncia dessa propriedade est sendo desconsiderada. Mais adiante, discutiremos como determinar a prioridade das regras CSS em situaes como essa.
www.facebook.com/k19treinamentos

147

CSS

148

No painel Computed podemos conferir todas as propriedades CSS que foram aplicadas em um elemento.
148
www.k19.com.br

149

CSS

Se desejarmos visualizar as propriedades que foram herdadas dos elementos ancestrais, podemos marcar a opo Show inherited.
www.facebook.com/k19treinamentos

149

CSS

150

Exerccios de Fixao

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 necessrio instalar o IIS conforme vimos anteriormente.

150

www.k19.com.br

151

CSS

Importante No Ubuntu, utilizando o Apache HTTP Server como Web Server, voc deve salvar o projeto css em /home/<USUARIO>/public_html. Lembre-se que necessrio instalar
e congurar 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
152

2-css-fixacao1.zip

www.k19.com.br

153
2

CSS

No projeto css, crie um arquivo chamado css.html. Todos os pargrafos desse documento devem ser exibidos em negrito, com cor azul e com fonte 20px. Dena uma regra CSS para formatar os pargrafos.
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 pargrafo formatado </ p > 16 <p > Outro pargrafo formatado </ p > 17 </ body > 18 </ html >
Cdigo HTML 3.7: css.html

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-fixacao2.zip

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/css.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/css/public_html/css.html.

Para organizar melhor o contedo e a formatao da pgina criada anteriormente, crie um arquivo CSS chamado style.css no projeto css.
4

1 p { 2 font - weight : bold ; 3 font - size : 2 px ; 4 color : # FF ; 5 }


Cdigo CSS 3.4: style.css

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-fixacao4.zip

Modique o arquivo css.html para aplicar as regras de formatao criadas no exerccio 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 pargrafo formatado </ p >

www.facebook.com/k19treinamentos

153

CSS
1 <p > Outro pargrafo formatado </ p > 11 </ body > 12 </ html >
Cdigo HTML 3.8: css.html

154

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 especicao da linguagem CSS nomeou 147 cores. Voc pode vericar a lista desses nomes no endereo http://www.w3.org/TR/css3-color/#svg-color. As cores bsicas do CSS so: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white e yellow.

Hexadecimal
A quantidade de cores suportada pela linguagem CSS 16.777.216. Como vimos apenas 147 cores foram nomeadas. Para escolher uma cor que no possui um nome, podemos utilizar o cdigo hexadecimal da cor desejada. Todas as cores possuem um cdigo hexadecimal. Veja o cdigo hexadecimal das cores bsicas. cdigo hexadecimal #00FFFF #000000 #0000FF #FF00FF #808080 #008000 #00FF00 #800000 nome da cor aqua black blue fuchsia gray green lime marron cor cdigo hexadecimal #000080 #808000 #800080 #FF0000 #C0C0C0 #008080 #FFFFFF #FFFF00 nome da cor navy olive purple red silver teal white yellow cor

O cdigo hexadecimal de uma cor comea com o caractere #. Os dois primeiros dgitos denem a quantidade de vermelho, os dois dgitos do meio denem a quantidade de verde e os dois ltimos dgitos denem a quantidade de azul.

Funo rgb()
A funo rgb() devolve uma cor a partir de uma quantidade de vermelho, de verde e de azul. Essas quantidades podem ser denidas em porcentagem ou em valores inteiros de 0 a 255. Veja como podemos obter as cores bsicas a partir da funo rgb().
154
www.k19.com.br

155

CSS

rgb() rgb(0, 255, 255) rgb(0, 0, 0) rgb(0, 0, 255) rgb(255, 0, 255) rgb(128, 128, 128) rgb(0, 128, 0) rgb(0, 255, 0) rgb(128, 0, 0)

nome da cor aqua black blue fuchsia gray green lime marron

cor

rgb() rgb(0, 0, 128) rgb(128, 128, 0) rgb(128, 0, 128) rgb(255, 0, 0) rgb(192, 192, 192) rgb(0, 128, 128) rgb(255, 255, 255) rgb(255, 255, 0)

nome da cor navy olive purple red silver teal white yellow

cor

Funo rgba()
A funo rgba() muito semelhante funo rgb(). A diferena que a funo rgba() possui um quarto parmetro que dene a opacidade da cor. O valor desse parmetro deve ser maior ou igual a 0 e menor ou igual a 1. Por exemplo, para denir a cor blue com 50% de opacidade, podemos utilizar a funo rgba() com os seguintes parmetros.
1 rgba ( , , 255 , .5)

Funo hsl()
Podemos usar a escala HSL (Hue, Saturation and Lightness ou Matiz, Saturao e Brilho) para selecionar uma cor atravs da funo hsl(). Essa funo recebe 3 parmetros. O primeiro deve ser um valor inteiro de 0 at 360. O segundo e o terceiro so porcetagens.
1 hsl (18 , 5 % , 6 %)

Funo hsla()
Assim como a funo hsl(), a funo hsla() tambm permite a seleo das cores atravs da escala HSL. A diferena que a ltima permite que a opacidade da cor seja denida.
1 hsla (18 , 5 % , 6 % , .5)

Unidades de medida
Para denir um tamanho ou uma distncia, devemos utilizar as unidades da linguagem CSS. Podemos classicar essas unidades em absolutas e relativas.

Unidades absolutas
Unidade cm mm in pt pc px Descrio centmetro milmetro polegada ponto (1 pt igual a 1/72 in) pica (1 pc igual a 12 pt) pixel
www.facebook.com/k19treinamentos

155

CSS

156

Apesar de ser considerada absoluta, a unidade px depende da resoluo e do tamanho da tela. Por exemplo, considere uma tela de 15 polegadas com resoluo 1920x1080 e outra de 14 polegadas com resoluo 1024x768. Na primeira tela, 1 px igual a 0,172 mm. Na segunda tela, 1 px equivale a 0,277 mm.

Unidades relativas
Unidade em ex ch rem vw vh vmin vmax Descrio 1 em igual ao tamanho da fonte do elemento onde essa unidade for utilizada. Geralmente, 1 ex igual a altura da letra x da fonte atual. Geralmente, 1 ch igual a largura do dgito 0 da fonte atual. 1 rem igual ao tamanho da fonte do elemento raiz do documento HTML. 1 vw igual a 1% da largura da rea de visualizao do navegador (viewport). 1 vh igual a 1% da altura da rea de visualizao do navegador (viewport). 1 vmim igual ao valor mnimo entre vw e vh. 1 vmim igual ao valor mximo entre vw e vh.

Backgrounds
Podemos denir a formatao do background de um elemento HTML com as seguintes propriedades CSS:

background-color
A propriedade background-color utilizada para denir a cor do background dos elementos HTML.
Valor color transparent inherit Descrio Uma cor CSS. Faz o background ser transparente (padro). Assume o valor da mesma propriedade no elemento HTML pai.

K19 Treinamentos K19 Treinamentos K19 Treinamentos

background-color: yellow background-color: #c1a4cd background-color: transparent

background-image
A propriedade background-image utilizada para denir a imagem que deve ser utilizada como background de um elemento HTML.
Valor url(url) none inherit 156 Descrio URL da imagem de background. Sem imagem de background (padro). Assume o valor da mesma propriedade no elemento HTML pai.
www.k19.com.br

157
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis pharetra felis elementum mollis. Integer iaculis luctus ante quis consectetur. Pellentesque a libero ultrices, varius nibh eu, ullamcorper nunc. Sed iaculis congue dui nec iaculis. Ut sagittis nec tortor quis congue. Quisque tincidunt tincidunt felis id fermentum. Maecenas adipiscing faucibus nulla et facilisis. Quisque sed elementum sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacus odio, adipiscing et ultrices

CSS

background-image: url(bg-image.png)

Mais Sobre
Podemos denir mltiplas imagens de background. As URLs dessas imagens devem ser separadas por vrgula. As imagens so sobrepostas sendo que a primeira car no primeiro plano, a segunda no segundo plano e assim por diante at a ltima que car no ltimo plano.
1 background - image : url ( " imagem1 . png " ) , url ( " imagem2 . png " ) , url ( " imagem3 . png " ) ;

background-repeat
Por padro, se uma imagem utilizada como background for menor do que o box do elemento HTML correspondente, ela ser replicada na horizontal e na vertical. A propriedade backgroundrepeat permite controlar como essa replicao deve ser realizada. Essa propriedade aceita os seguintes valores:
Valor repeat repeat-x repeat-y no-repeat inherit Descrio A imagem de background replicada na horizontal e na vertical (padro). A imagem de background replicada apenas na horizontal. A imagem de background replicada apenas na vertical. A imagem no replicada. 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 denir qual comportamento dos backgrounds em relao a rolagem do contedo.
Valor scroll xed Descrio O background acompanha a rolagem do contedo (padro). O background no acompanha a rolagem do contedo.

background-attachment: fixed

background-attachment: scroll

background-position
Para derterminar a posio das imagens utilizadas como background dos elementos HTML, devemos utilizar a propriedade background-position.
Valor left top center top right top left center center center Descrio Canto superior esquerdo (padro). Centralizado horizontalmente no topo. Canto superior direito. Do lado esquerdo centralizado verticalmente. Centralizado horizontalmente e verticalmente.

158

www.k19.com.br

159 Valor right center left bottom center bottom right bottom left center right top bottom x% y% x% medida1 medida2 inherit Descrio Do lado direito centralizado verticalmente. Canto inferior esquerdo. Centralizado horizontalmente na base. Canto inferior direito. O mesmo que "left center". O mesmo que "center center". O mesmo que "right center". O mesmo que "center top". O mesmo que "center bottom".

CSS

O valor x corresponde posio horizontal e o y posio vertical. Eles so relativos ao canto superior esquerdo. O mesmo que "x% 50%". A medida1 corresponde posio horizontal e a medida2 posio vertical. Elas so relativas ao canto superior esquerdo. Assume o valor da mesma propriedade no elemento HTML pai.

left top

center top

right top

left center

center center

right center

left bottom
www.facebook.com/k19treinamentos

center bottom

right bottom
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 border-box padding-box content-box Descrio rea delimitada pelas bordas (padro). rea delimitada pelas margens internas. rea delimitada pelo contedo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis pharetra felis elementum mollis. Integer iaculis luctus ante quis consectetur. Pellentesque a libero ultrices, varius nibh eu, ullamcorper nunc. Sed iaculis congue dui nec iaculis. Ut sagittis nec tortor quis

background-clip: border-box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis pharetra felis elementum mollis. Integer iaculis luctus ante quis consectetur. Pellentesque a libero ultrices, varius nibh eu, ullamcorper nunc. Sed iaculis congue dui nec iaculis. Ut sagittis nec tortor quis

background-clip: padding-box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis pharetra felis elementum mollis. Integer iaculis luctus ante quis consectetur. Pellentesque a libero ultrices, varius nibh eu, ullamcorper nunc. Sed iaculis congue dui nec iaculis. Ut sagittis nec tortor quis

background-clip: content-box

background-origin
A propriedade background-origin determina onde car o ponto de origem para o posicionamento das imagens utilizadas como background.

160

www.k19.com.br

161 Valor border-box padding-box content-box Descrio Canto superior esquerdo da rea delimitada pelas bordas. Canto superior esquerdo da rea delimitada pelas margens internas (padro). Canto superior esquerdo da rea delimitada pelo contedo.

CSS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis pharetra felis elementum mollis. Integer iaculis luctus ante quis consectetur. Pellentesque a libero ultrices, varius nibh eu, ullamcorper nunc. Sed iaculis congue dui nec iaculis. Ut sagittis nec tortor quis

background-origin: border-box; background-repeat: no-repeat;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis pharetra felis elementum mollis. Integer iaculis luctus ante quis consectetur. Pellentesque a libero ultrices, varius nibh eu, ullamcorper nunc. Sed iaculis congue dui nec iaculis. Ut sagittis nec tortor quis

background-origin: padding-box; background-repeat: no-repeat;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis pharetra felis elementum mollis. Integer iaculis luctus ante quis consectetur. Pellentesque a libero ultrices, varius nibh eu, ullamcorper nunc. Sed iaculis congue dui nec iaculis. Ut sagittis nec tortor quis

background-origin: content-box; background-repeat: no-repeat;

background-size
Quando uma imagem utilizada como background de um elemento HTML, podemos denir o tamanho dessa imagem com a propriedade background-size.
Valor auto auto auto medida auto auto medida Descrio Tamanho original da imagem (padro). O mesmo que "auto auto". A medida corresponde largura. A altura calculada de forma proporcional largura. A medida corresponde altura. A largura calculada de forma proporcional altura. 161

www.facebook.com/k19treinamentos

CSS Valor medida1 medida2 x% y% x% auto Descrio A medida1 corresponde largura e a medida2 altura. O valor x corresponde largura e o y altura. Esses valores so porcetagens relativas dimenso do elemento HTML. O valor x corresponde largura. Esse valor uma porcentagem relativa largura do elemento HTML. A altura calculada automaticamente de forma proporcional a largura. O valor y corresponde altura. Esse valor uma porcentagem relativa altura do elemento HTML. A largura calculada automaticamente de forma proporcional a altura. A imagem de background redimensionada proporcionalmente de tal forma a cobrir toda a rea do elemento HTML. A imagem de background redimensionada proporcionalmente de tal forma a ter o maior tamanho possvel sem extrapolar a rea do elemento HTML.

162

auto y%

cover contain

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis pharetra felis elementum mollis. Integer iaculis luctus ante quis consectetur. Pellentesque a libero ultrices, varius nibh eu, ullamcorper nunc. Sed iaculis congue dui nec iaculis. Ut sagittis nec tortor quis

background-size: 50% 50%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis pharetra felis elementum mollis. Integer iaculis luctus ante quis consectetur. Pellentesque a libero ultrices, varius nibh eu, ullamcorper nunc. Sed iaculis congue dui nec iaculis. Ut sagittis nec tortor quis

background-size: cover

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis pharetra felis elementum mollis. Integer iaculis luctus ante quis consectetur. Pellentesque a libero ultrices, varius nibh eu, ullamcorper nunc. Sed iaculis congue dui nec iaculis. Ut sagittis nec tortor quis

background-size: contain

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 ;

Exerccios de Fixao

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 >
Cdigo HTML 3.9: backgrounds.html

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-fixacao6.zip

No projeto css, crie um arquivo CSS chamado backgrounds.css.


div { width : 2 px ; height : 1 px ; margin : 1 px ; border : 5 px black dashed ; } # div1 { background - color : yellow ; } # div2 { background - color : # c1a4cd ; background - clip : padding - box ; } # div3 { background - image : url ( " http :// k19 . com . br / figs / seguro - treinamento . png " ) ; background - repeat : no - repeat ; } # div4 { background - image : url ( " http :// k19 . com . br / figs / seguro - treinamento . png " ) ; background - repeat : no - repeat ; background - origin : border - box ; }

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26

www.facebook.com/k19treinamentos

163

CSS
27 28 29 3 31 32 33 34 35 36 37 38 39

164

# div5 { background - image : url ( " http :// k19 . com . br / figs / seguro - treinamento . png " ) ; background - repeat : no - repeat ; background - size : contain ; } body { background - image : url ( " http :// k19 . com . br / figs / main - header - logo . png " ) ; background - repeat : no - repeat ; background - attachment : fixed ; background - position : top center ; }
Cdigo CSS 3.10: backgrounds.css

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-fixacao7.zip

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/backgrounds.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/css/public_html/backgrounds.html.

Textos
Podemos controlar a formatao dos textos contidos nos documentos HTML com as seguintes propriedades CSS.

color
Podemos denir a cor do texto contido em um elemento HTML atravs da propriedade color.
1 p { 2 color : blue ; 3 }

Valor color inherit

Descrio Uma cor CSS. 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 propriedade text-align.
Valor left right center justify Descrio Alinhado esquerda (padro). Alinhado direita. Centralizado. Justicado.

164

www.k19.com.br

165 Valor inherit Descrio Assume o valor da mesma propriedade no elemento HTML pai.

CSS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula bibendum arcu sit amet lacinia. Sed dui nulla. left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula bibendum arcu sit amet lacinia. Sed dui nulla. center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula bibendum arcu sit amet lacinia. Sed dui nulla. right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula bibendum arcu sit amet lacinia. Sed dui nulla. justify

text-decoration
Podemos denir a decorao dos textos contidos em um elemento HTML com a propriedade text-decoration.
Valor none underline overline line-through inherit Descrio Texto sem decorao (padro). Texto com trao inferior. Texto com trao superior. Texto riscado. Assume o valor da mesma propriedade no elemento HTML pai.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-decoration: none text-decoration: underline text-decoration: overline text-decoration: line-through

text-transform
A capitalizao dos textos pode ser determinada atravs da propriedade text-transform.
Valor none capitalize uppercase lowercase inherit Descrio Texto normal (padro). A primeira letra de cada palavra ser transformada em maiscula. Todas as letras do texto sero transformadas em maisculas. Todas as letras do texto sero transformadas em minsculas. Assume o valor da mesma propriedade no elemento HTML pai.

Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Lorem Ipsum Dolor Sit Amet. Consectetur Adipiscing. LOREM IPSUM DOLOR SIT AMET. CONSECTUR. lorem ipsum dolor sit amet, consectetur adipiscing elit.
www.facebook.com/k19treinamentos

text-transform: none text-transform: capitalize text-transform: uppercase text-transform: lowercase

165

CSS

166

text-indent
Normalmente, indentamos a primeira linha de um bloco de texto. Podemos denir o comprimento dessa indentao atravs da propriedade text-indent.
Valor medida x% inherit Descrio A medida corresponde ao tamanho da indentao. O valor x o tamanho da indentao em porcentagem relativa largura do elemento HTML pai. Assume o valor da mesma propriedade no elemento HTML pai.

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. text-indent: 0

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. text-indent: 20px

letter-spacing
O espaamento entre as letras pode ser determinado atravs da propriedade letter-spacing.
Valor normal medida inherit Descrio Espaamento padro denido para a fonte utilizada (padro). A medida corresponde ao espaamento extra desejado. Esse valor pode ser negativo. Assume o valor da mesma propriedade no elemento HTML pai.

Lorem ipsum dolor sit amet. Consectetur adipiscing elit... L o r e m ip s u m d o l o r si t am et ... Lorem ipsum dolor sit amet, consectetur adipiscing elit.Aenean mats nam ...

letter-spacing: normal letter-spacing: 10px letter-spacing: -2px

word-spacing
O espaamento entre as palavras pode ser determinado com a propriedade word-spacing.
Valor normal medida inherit Descrio Espaamento padro denido para a fonte utilizada (padro). A medida corresponde ao espaamento extra desejado. Esse valor pode ser negativo. Assume o valor da mesma propriedade no elemento HTML pai.

Lorem ipsum dolor sit amet. Consectetur adipiscing elit... Lorem ipsum dolor sit amet. Consectetur adipisc... Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Pellentesque leo a non tortor tincid...
166

word-spacing: 0 word-spacing: 4px word-spacing: -4px


www.k19.com.br

167

CSS

word-wrap
Podemos controlar, atravs da propriedade word-wrap, como as palavras so divididas quando ocorre uma quebra de linha automtica.
Valor normal break-word Descrio As palavras so divididas apenas nos pontos de quebras denidos com o elemento wbr (padro). As palavras podem ser divididas em qualquer ponto.

Otorrinolaringologista.

Otorrinolaringo logista.
word-wrap: break-word

word-wrap: normal
line-height

A altura das linhas de um texto pode ser determinada com a propriedade line-height.
Valor normal x medida x% inherit Descrio Altura padro de linha (padro). A altura das linhas o produto do valor x pelo tamanho da fonte atual. A medida corresponde altura das linhas. O valor x a altura das linhas em porcentagem relativa ao tamanho da fonte atual. Assume o valor da mesma propriedade no elemento HTML pai.

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. line-height: normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula bibendum arcu. Sed dui nulla, cursus et lacinia eu, vulputate ac line-height: 20px

white-space
possvel controlar a forma de tratamento dos espaos em branco e das quebras de linha atravs da propriedade white-space. Os valores possveis para essa propriedade so:
Valor normal Descrio Sequncias de espaos em branco contidas no cdigo HTML so tratadas como um nico espao. As quebras de linha contidas no cdigo HTML no geram quebras de linha na pgina renderizada. Quebras de linha automticas so inseridas quando necessrio (padro).

www.facebook.com/k19treinamentos

167

CSS Valor nowrap Descrio Sequncias de espaos em branco contidas no cdigo HTML so tratadas como um nico espao. As quebras de linha contidas no cdigo HTML no geram quebras de linha na pgina renderizada. Nenhuma quebra de linha inserida automaticamente. Sequncias de espaos em branco so completamente consideradas. As quebras de linha contidas no cdigo HTML geram quebras de linha na pgina renderizada. Nenhuma quebra de linha inserida automaticamente. Sequncias de espaos em branco contidas no cdigo HTML so tratados como um nico espao. As quebras de linha contidas no cdigo HTML geram quebras de linha na pgina renderizada. Quebras de linha automticas so inseridas quando necessrio. Sequncias de espaos em branco so completamente consideradas. As quebras de linha contidas no cdigo HTML geram quebras de linha na pgina renderizada. Quebras de linha automticas so inseridas quando necessrio. Assume o valor da mesma propriedade no elemento HTML pai.

168

pre

pre-line

pre-wrap

inherit

HTML
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula bibendum arcu. Sed dui nulla, cursus et lacinia eu, vulputate ac dolor. Quisque faucibus congue congue.</div>

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

white-space: normal Lorem

white-space: nowrap

ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula bibendum arcu. Sed dui nulla, cursus et lacinia eu, vulputate ac dolor. Quisque faucibus congue congue.

white-space: pre Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula bibendum arcu. Sed dui nulla, cursus et lacinia eu, vulputate ac dolor. Quisque faucibus congue congue. white-space: pre-line 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-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 denir as seguintes informaes sobre a sobra desejada: a posio horizontal, a posio vertical, o raio do blur e a cor.
Deslocamento horizontal Esmaecimento (opcional)

text-shadow: 10px 10px 10px #ff0000


Deslocamento horizontal Cor (opcional)

Vrias sombras podem ser aplicadas ao texto de um elemento HTML. As informaes que denem essas sombras devem ser separadas por vrgula.

text-shadow: 10px 10px 10px #ff0000 , -10px -10px 10px #0000ff

Texto Texto
text-shadow: 10px 10px #ff0000

Texto
text-shadow: 10px 10px 10px #ff0000

Texto Texto
text-shadow: -10px -10px #ff0000

Texto
text-shadow: -10px -10px 10px #ff0000

Texto
text-shadow: 0 0 10px #ff0000

Texto
text-shadow: 10px 10px 10px #ff0000, -10px -10px 10px #0000ff

Outras propriedades
A linguagem CSS dene mais algumas propriedades de formatao de texto. unicode-bdi hanging-punctuation punctuation-trim text-align-last text-justify text-outline text-overow text-wrap direction
www.facebook.com/k19treinamentos

169

CSS

170

word-break

Exerccios de Fixao

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 >
Cdigo 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.


p { border : 2 px black solid ; } # p1 { width : 4 px ; color : blue ; text - align : justify ; text - decoration : line - through ; text - transform : uppercase ; text - indent : 2 px ; letter - spacing : 2 px ; line - height : 25 px ; word - spacing : 11 px ; } # p2 { width : 1 px ; word - wrap : break - word ;

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19

170

www.k19.com.br

171
2 21 22 23 24 25 26 27 28 29 3 31 32 } # p3 { width : 4 px ; white - space : pre - line ; } # p4 { width : 1 px ; text - transform : uppercase ; letter - spacing : 5 px ; text - shadow : 2 px 2 px # ff }

CSS

Cdigo 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 endereo:


http://localhost/css/public_html/textos.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/css/public_html/textos.html.

Fontes
Podemos controlar as fontes utilizadas nos textos de uma pgina web com as seguintes propriedades.

font-family
Uma lista com as fontes desejadas ordenadas por prioridade pode ser determinada atravs da propriedade font-family.
1 font - family : " Arial Black " , " Georgia " , " Courier New " ;

Eventualmente, uma determinada fonte pode no estar disponvel. Os navegadores devem utilizar a primeira fonte disponvel da lista denida com a propriedade font-family. Por isso, essa lista deve ser ordenada da fonte com maior prioridade para a fonte com menor prioridade. Algumas fontes so consideradas seguras (Web Safe Fonts). Essa qualidade atribuda s fontes que so suportadas em praticamente todos os sistemas operacionais e navegadores. Uma lista com essas fontes pode ser consultada no endereo http://cssfontstack.com/. A linguagem CSS classica as fontes em 5 grupos genricos: serif: Fontes serifadas. Os acabamentos nas extremidades das hastes das letras so denominados serifas. sans-serif: Fontes no serifadas. cursive: Fontes com estilo semelhante escrita manual.
www.facebook.com/k19treinamentos

171

CSS

172

fantasy: Fontes que possuem caracteres com decoraes. monospace: Fontes que possuem caracteres com largura exatamente igual.

Verdana Optimus Princeps


Sans-serif Serif

Unispace
Monospace

Honey Script Most Wazted


Cursive Fantasy

Helvetica Times New Roman Courier New Zapfino


Sans-serif Serif Monospace Cursive

Comic Sans
Fantasy

Se qualquer fonte de um determinado grupo genrico pode ser utilizada, devemos adicionar o nome desse grupo na lista denida com a propriedade font-family. Nesse caso, os prprios navegadores escolhem uma fonte do grupo genrico escolhido.
1 font - family : " Arial Black " , " Georgia " , " Courier New " , " sans - serif " ;

No exemplo acima, se as fontes Arial Black, Georgia e Courier New no estiverem disponveis, os navegadores utilizaro alguma fonte do grupo sans-serif.

font-size
O tamanho da fonte determinado atravs da propriedade font-size.
Valor xx-small x-small small medium large x-large xx-large smaller larger medida x% inherit Descrio Tamanho de fonte extra extra pequeno. Tamanho de fonte extra pequeno. Tamanho de fonte pequeno. Tamanho de fonte mdio (padro). Tamanho de fonte grande. Tamanho de fonte extra grande. Tamanho de fonte extra extra grande. Um tamanho de fonte menor do que o do elemento HTML pai. Um tamanho de fonte maior do que o do elemento HTML pai. A medida corresponde ao tamanho da fonte. O valor x o tamanho da fonte. Esse valor uma porcentagem do tamanho da fonte do elemento HTML pai. Assume o valor da mesma propriedade no elemento HTML pai.

172

www.k19.com.br

173

CSS

9px xx-small x-small small medium large x-large xx-large


font-style

K19 Treinamentos K19 Treinamentos

K19 Treinamentos

K19 Treinamentos

K19 Treinamentos

K19 Treinamentos

K19 Treinamentos

K19 Treinamentos
Descrio Fonte normal (padro). Fonte itlica. Fonte oblqua. Assume o valor da mesma propriedade no elemento HTML pai.

Podemos determinar o estilo da fonte atravs da propriedade font-style.


Valor normal italic oblique inherit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

font-style: normal font-style: italic font-style: oblique

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


font-variant

Para determinar que o texto de um elemento HTML deve ser exibido em small caps, devemos utilizar a propriedade font-vaiant. Todas as letras de um texto em small caps so transformadas em maisculas e o tamanho da fonte da primeira letra de cada palavra maior do que o tamanho da fonte das demais letras.
Valor normal small-caps inherit Descrio Fonte normal (padro). Fonte em small caps. Assume o valor da mesma propriedade no elemento HTML pai.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING E...
www.facebook.com/k19treinamentos

font-variant: normal font-variant: small-caps

173

CSS

174

font-weight
A grossura dos caracteres pode ser denida com a propriedade font-weight.
Valor normal bold 100 200 300 400 500 600 700 800 900 bolder lighter inherit Descrio Grossura normal (padro). Negrito. Grossura 100. Grossura 200. Grossura 300. Grossura 400. Equivale ao valor normal Grossura 500. Grossura 600. Grossura 700. Equivale ao valor bold Grossura 800. Grossura 900. Uma grossura maior do que a do elemento HTML pai. Uma grossura menor do que a do elemento HTML pai. Assume o valor da mesma propriedade no elemento HTML pai.

Importante
Normalmente, as fontes no denem uma grossura diferente para cada um dos possveis valores da propriedade font-weight. Por isso, geralmente, dois ou mais valores so mapeados para a mesma grossura de fonte.

font-weight
Fonte utilizada:

Roboto

K19 Treinamentos K19 Treinamentos K19 Treinamentos K19 Treinamentos K19 Treinamentos K19 Treinamentos K19 Treinamentos K19 Treinamentos K19 Treinamentos K19 Treinamentos K19 Treinamentos

font-weight: normal font-weight: 100 font-weight: 200 font-weight: 300 font-weight: 400 font-weight: 500 font-weight: 600 font-weight: 700 font-weight: 800 font-weight: 900 font-weight: bold

http://google.com/fonts/specimen/Roboto

Curiosidade: A fonte Roboto a fonte padro utilizada nos sistemas Android a partir da verso 4.0.

font
A propriedade font um atalho para as outras propriedades de fonte.

174

www.k19.com.br

175
1 font : font - style font - variant font - weight font - size / line - height font - family ;

CSS

@font-face
A regra @font-face permite utilizar uma fonte mesmo que ela no esteja disponvel no sistema operacional do usurio. A fonte pode estar em um arquivo local (mquina do usurio) ou remoto (servidor). Para cada fonte que deve ser adicionada, devemos denir uma regra font-face. Os navegadores carregam as fontes sob demanda, ou seja, somente se elas forem necessrias. Veja um exemplo de utilizao dessa regra.
1 @font - face { 2 font - family : K19 ; 3 src : url ( http : // www . k19 . com . br / fonts / K19 . woff ) ; 4 }

A funo url() deve ser utilizada quando queremos uma fonte que est armazenada remotamente. Para carregar uma fonte disponvel na mquina do usurio, devemos utilizar a funo local(), passando como parmetro o nome da fonte desejada.
1 @font - face { 2 font - family : NomeDaFonte ; 3 src : local ( nome - da - fonte ) ; 4 }

Para utilizar as fontes denidas na regra @font-face, basta denir 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 vrios formatos para suportar diversos navegadores.
1 @font - face { 2 font - family : NomeDaFonte ; 3 src : url ( nome - da - fonte . eot ) ; /* IE9 */ 4 src : url ( nome - da - fonte . eot ?# iefix ) format ( embedded - opentype ) , /* IE6 - IE8 */ 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 so suportados por cada navegador. Recomendamos o site Can I use (http://caniuse.com/). Existem diversos repositrios de fontes pagas e/ou gratuitas. Podemos utilizar as fontes desses repositrios atravs da regra font-face. Um dos repositrios mais importantes o Google Fonts (http://www.google.com/fonts).

Outras propriedades
A linguagem CSS dene mais algumas propriedades de formatao de fonte. font-size-adjust
www.facebook.com/k19treinamentos

175

CSS

176

font-stretch

Exerccios de Fixao

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 >
Cdigo 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.


p { border : 2 px black solid ; } # p1 { width : 4 px ; font - family : " Arial Black " , " Georgia " , " Courier New " , " sans - serif " ; font - size : xx - large ; font - style : italic ; font - variant : small - caps ; font - weight : bold ; } # p2 { width : 4 px ; font - family : Butcherman ; }
Cdigo CSS 3.20: fontes.css

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-fixacao13.zip

14

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/fontes.html.

176

www.k19.com.br

177

CSS

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/css/public_html/fontes.html.

Listas
Podemos controlar a formatao das listas com as seguintes propriedades.

list-style-type
Podemos denir o smbolo utilizado nos itens de uma determinada lista com a propriedade liststyle-type. A listagem completa desses smbolos pode ser consultada no endereo http://www.w3. org/TR/css3-lists/#ua-stylesheet. Veja alguns possveis valores da propriedade list-style-type.
Listas sem ordem K19 Treinamentos K19 Treinamentos K19 Treinamentos
disc

K19 Treinamentos K19 Treinamentos K19 Treinamentos


circle

K19 Treinamentos K19 Treinamentos K19 Treinamentos


square

Listas com ordem 1. K19 Treinamentos 2. K19 Treinamentos 3. K19 Treinamentos


decimal

I. K19 Treinamentos II. K19 Treinamentos III. K19 Treinamentos


upper-roman

i. K19 Treinamentos ii. K19 Treinamentos iii. K19 Treinamentos


lower-roman

A. K19 Treinamentos B. K19 Treinamentos C. K19 Treinamentos


upper-alpha

a. K19 Treinamentos b. K19 Treinamentos c. K19 Treinamentos


lower-alpha

. K19 Treinamentos . K19 Treinamentos . K19 Treinamentos


hebrew

. K19 Treinamentos . K19 Treinamentos . K19 Treinamentos


lower-greek

. K19 Treinamentos . K19 Treinamentos . K19 Treinamentos


katakana

. K19 Treinamentos . K19 Treinamentos . K19 Treinamentos


cjk-ideographic

list-style-image
possvel denir uma imagem para ser utilizada nos itens de uma determinada lista com a propriedade list-style-image.
Valor url(url ) Descrio URL da imagem. 177

www.facebook.com/k19treinamentos

CSS Valor none inherit Descrio Sem imagem (padro). Assume o valor da mesma propriedade no elemento HTML pai.

178

K19 Treinamentos K19 Treinamentos K19 Treinamentos


list-style-position
Por padro, os bullets de uma lista no so exibidos dentro dos boxes dos itens. Podemos alterar esse comportamento atravs da propriedade list-style-position.
Valor inside outside inherit Descrio Os bullets so exibidos dentro dos boxes dos itens. Os bullets no so exibidos dentro dos boxes dos itens. (padro). Assume o valor da mesma propriedade no elemento HTML pai.

list-style-image: url(estrela.png)

K19 Treinamentos K19 Treinamentos K19 Treinamentos


list-style-position: outside

K19 Treinamentos K19 Treinamentos K19 Treinamentos


list-style-position: inside

list-style
A propriedade list-style um atalho para as outras propriedades de lista.
1 list - style : list - style - type , list - style - position , list - style - image

Exerccios de Fixao

15

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 - Lgica de Programao </ 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
13 </ ul > 14 15 < ul id = " ul2 " > 16 < li > K 1 - Lgica de Programao </ 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 - Lgica de Programao </ 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 >
Cdigo HTML 3.12: listas.html

CSS

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-fixacao15.zip

16

No projeto css, crie um arquivo CSS chamado listas.css.


li { border : 2 px black solid ; width : 4 px ; } # ul1 { list - style - type : square ; list - style - position : inside ; } # ul2 { list - style - image : url ( http : // k19 . com . br / figs / k 2 - logo - small . png ) ; } ol { list - style - type : upper - roman ; }
Cdigo CSS 3.22: listas.css

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-fixacao16.zip

17

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/listas.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/css/public_html/listas.html.

Bordas
A linguagem CSS possui diversas propriedades para denir a formatao das bordas dos elementos HTML.
www.facebook.com/k19treinamentos

179

CSS

180

border-style
Podemos denir 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 thin medium thick medida inherit Descrio Borda na. Borda mdia (padro). Borda grossa. A medida corresponde grossura da borda. Assume o valor da mesma propriedade no elemento HTML pai.

thin

medium

thick

10px

border-color
A propriedade border-color dene a cor das bordas de um elemento HTML. Essa propriedade aceita o valor transparent(padro) ou qualquer cor CSS.
Valor color transparent inherit Descrio Uma cor CSS. Faz a borda ser transparente. 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 denem 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 denidos 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 so atalhos para as propriedades que denem individualmente o estilo, a grossura e a cor das bordas da esquerda, superiores, 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 denidas com a propriedade border-radius.

www.facebook.com/k19treinamentos

181

CSS Valor medida x% Descrio A medida corresponde ao raio. O valor x o raio em porcentagem.

182

5px 10px 10px 10px

10px 10px 5px

10px

border-radius: 10px

border-radius: 10px 5px

5px 10px 20px 5px

5px 10px 20px 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 so utilizadas para denir 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
182

border-bottom-left-radius: 10px
www.k19.com.br

183

CSS

border-collapse
Podemos denir bordas para cada clula de uma tabela e para a prpria tabela. Por padro, essas bordas so exibidas separadamente. Mas, possvel determinar que duas bordas vizinhas sejam exibidas como se fossem uma s com a propriedade border-collapse.

Valor separate collapse inherit

Descrio Bordas separadas (padro). Bordas unidades. Assume o valor da mesma propriedade no elemento HTML pai.

Clula 1 Clula 3

Clula 2 Clula 4

Clula 1 Clula 3

Clula 2 Clula 4

border-collapse: separate

border-collapse: collapse

border-spacing
A propriedade border-spacing permite denir o espaamento entre as clulas de uma tabela. Essa propriedade afeta o espaamento entre as bordas somente se o valor da propriedade bordercollapse for separate.
Valor medida1 medida2 medida inherit Descrio A medida1 corresponde ao espaamento horizontal e a medida2 corresponde ao espaamento vertical. A medida corresponde ao espaamento horizontal e vertical. Assume o valor da mesma propriedade no elemento HTML pai.

Clula 1 Clula 3

Clula 2 Clula 4

Clula 1 Clula 3

Clula 2 Clula 4

border-spacing: 5px

border-spacing: 10px 5px

Outras propriedades
A linguagem CSS dene mais algumas propriedades de formatao de bordas. border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width
www.facebook.com/k19treinamentos

183

CSS

184

Exerccios de Fixao

18

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 >
Cdigo 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.


div { width : 2 px ; height : 1 px ; margin : 1 px ; } # div1 { border - style : solid ; border - width : thin ; border - color : red ; border - radius : 1 px ; } # div2 { border - style : dotted ; border - color : yellow ; border - radius : 1 px 3 px ; } # div3 {

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2

184

www.k19.com.br

185
21 22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 39 4 41 42 43 44 45 46 47 48 49 5 51 52 53 54 55 56 57 58 59 6 61 62 63 64 65 66 border - style : dashed ; border - width : 4 px ; border - color : blue ; border - radius : 1 px 2 px 3 px 4 px ; } # div4 { border - style : double ; border - width : 8 px ; border - color : green ; border - top - left - radius : 1 px ; border - top - right - radius : 2 px ; border - bottom - right - radius : 3 px ; border - bottom - left - radius : 4 px ; } # div5 { border - left - style : solid ; border - left - width : thin ; border - left - color : red ; border - top - style : dotted ; border - top - color : yellow ; border - right - style : dashed ; border - right - width : 4 px ; border - right - color : blue ; border - bottom - style : double ; border - bottom - width : 8 px ; border - bottom - color : green ; } table , td { font - size : xx - large ; border : 1 px solid black ; margin : 1 px ; } # tabela1 { border - collapse : collapse ; } # tabela2 { border - spacing : 2 px ; }

CSS

Cdigo 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 endereo:


http://localhost/css/public_html/bordas.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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 no afeta as dimenses dos boxes. A linguagem CSS possui diversas propriedades para denir a formatao do outline dos elementos HTML.

outline-style
Podemos denir 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 dene a cor do outline de um elemento HTML.
Valor color invert inherit Descrio Uma cor CSS. A cor inversa cor do background (padro). 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 thin medium thick medida inherit Descrio Outline no. Outline mdio (padro). Outline grosso. A medida corresponde grossura do outline. Assume o valor da mesma propriedade no elemento HTML pai.

186

www.k19.com.br

187

CSS

thin

medium

thick

10px

outline-offset
Podemos denir a distncia do outline de um elemento HTML em relao s bordas do mesmo com a propriedade outline-offset.
Valor medida inherit Descrio A medida corresponde ao tamanho do outline-offset (0px o valor padro). Esse valor pode ser negativo. 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.
outline-offset: 10px

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.
outline-offset: -5px

outline
A propriedade outline um atalho para as propriedades outline-color, outline-style e outlinewidth. Veja a sintaxe dessa propriedade.
1 outline : outline - color outline - style outline - width ;

Exerccios de Fixao

21

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 >
Cdigo HTML 3.14: outlines.html

www.facebook.com/k19treinamentos

187

CSS

188
2-css-fixacao21.zip

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

22

No projeto css, crie um arquivo CSS chamado outlines.css.


div { width : 2 px ; height : 1 px ; border : 4 px solid black ; margin : 5 px ; } # div1 { outline - style : solid ; outline - color : red ; outline - width : 4 px ; } # div2 { outline - style : dashed ; outline - color : blue ; outline - width : 2 px ; outline - offset : -2 px ; } # div3 { outline - style : solid ; outline - color : green ; outline - width : 4 px ; outline - offset : 2 px ; }

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26

Cdigo 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 endereo:


http://localhost/css/public_html/outlines.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/css/public_html/outlines.html.

Sombras
A propriedade box-shadow permite adicionar sombras externas e internas nos boxes dos elementos HTML. O valor dessa propriedade pode ser denido de diversas maneiras. Conra, nas imagens abaixo, algumas formas de utilizao da propriedade box-shadow para denir sombras externas.
188
www.k19.com.br

189
Deslocamento horizontal

CSS

#a { }

box-shadow: 10px 10px #7f7f7f;


Deslocamento vertical

#a

Deslocamento horizontal Esmaecimento

#b { }

box-shadow: 10px 10px 10px #7f7f7f;


Deslocamento vertical

#b

Deslocamento horizontal Propagao

#c { }

Esmaecimento

box-shadow: 10px 10px 0 10px #7f7f7f;


Deslocamento vertical

#c

Os valores dos deslocamentos vertical e horizontal podem ser negativos fazendo com que a sombra externa seja projetada para cima e para a esquerda. As regras para denir uma da sombra interna so praticamente as mesmas da sombra externa. A nica diferena que devemos comear a atribuio do valor com a palavra inset.
Deslocamento horizontal

#a { }

Deslocamento vertical

box-shadow: inset 10px 10px #000000;

#a
189

www.facebook.com/k19treinamentos

CSS
Deslocamento horizontal

190

#b { }

Deslocamento vertical

box-shadow: inset 10px 10px 10px #000000;

#b

Esmaecimento

Deslocamento horizontal Deslocamento vertical

#c { }

box-shadow: inset 10px 10px 0 10px #000000;


Esmaecimento Propagao

#c

Exerccios de Fixao

24

No projeto css, crie um arquivo chamado sombras.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 - Sombras </ title > 6 < link rel = " stylesheet " type = " text / css " href = " sombras . 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 >
Cdigo HTML 3.15: sombras.html

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-fixacao24.zip

25

No projeto css, crie um arquivo CSS chamado sombras.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 {

190

www.k19.com.br

191
9 1 11 12 13 14 15 16 17 18 19 2 21 22 box - shadow : 1 px 5 px gray ; } # div2 { box - shadow : 1 px 5 px 5 px gray ; } # div3 { box - shadow : inset 1 px 1 px gray ; } # div4 { box - shadow : inset 1 px 1 px 5 px gray ; }
Cdigo CSS 3.27: sombras.css

CSS

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-fixacao25.zip

26

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/sombras.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/css/public_html/sombras.html.

Margens
A linguagem CSS possui diversas propriedades para denir a formatao das margens internas e externas dos elementos HTML.

margin-*
Os tamanhos das margens externas do box de elemento HTML podem ser denidos individualmente com as propriedades margin-left, margin-top, margin-right e margin-bottom.
Valor auto medida x% inherit Descrio O tamanho da margem calculado automaticamente pelos navegadores. A medida corresponde ao tamanho da margem (0px o padro). O valor x corresponde ao tamanho da margem. Esse valor uma porcentagem da largura do elemento HTML pai. Assume o valor da mesma propriedade no elemento HTML pai.

www.facebook.com/k19treinamentos

191

CSS

192

5px 20px 10px

margin-top: 5px

margin-right: 10px margin-left: 20px

margin-bottom: 15px
15px

margin
A propriedade margin um atalho para as propriedades margin-left, margin-top, margin-right e margin-bottom. Podemos utilizar a propriedade margin de 4 formas diferentes:
5px 20px 10px 10px 5px 10px

15px

15px

margin: 5px 10px 15px 20px

margin: 5px 10px 15px

5px 10px 10px 5px

5px 5px

5px

5px

margin: 5px 10px

margin: 5px

padding-*
Os tamanhos das margens internas do box de elemento HTML podem ser denidos individualmente com as propriedades padding-left, padding-top, padding-right e padding-bottom.
Valor medida x% inherit Descrio A medida corresponde ao tamanho da margem (0px o padro). O valor x corresponde ao tamanho da margem. Esse valor uma porcentagem da largura do elemento HTML pai. Assume o valor da mesma propriedade no elemento HTML pai.

192

www.k19.com.br

193

CSS

20px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis volutpat laoreet magna, nec placerat nisl egestas id. Maecenas a nulla vel arcu viverra lobortis. In ligula nunc, cursus non faucibus sed, hendrerit id est. Maecenas felis neque, porta et sagittis faucibus, fringilla id tellus. Etiam nec pulvinar tellus. Mauris et diam at est cursus egestas. Donec tincidunt metus non ante tristique egestas.

5px

10px

padding-top: 5px

padding-right: 10px padding-left: 20px

padding-bottom: 15px

15px

padding
A propriedade padding um atalho para as propriedades padding-left, padding-top, paddingright e padding-bottom. Podemos utilizar a propriedade padding de 4 formas diferentes:
5px 5px

20px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis volutpat laoreet magna, nec placerat nisl egestas id. Maecenas a nulla vel arcu viverra lobortis. In ligula nunc, cursus non faucibus sed, hendrerit id est. Maecenas felis neque, porta et sagittis faucibus, fringilla id tellus. Etiam nec pulvinar tellus. Mauris et diam at est cursus egestas. Donec tincidunt metus non ante tristique egestas.

10px

10px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis volutpat laoreet magna, nec placerat nisl egestas id. Maecenas a nulla vel arcu viverra lobortis. In ligula nunc, cursus non faucibus sed, hendrerit id est. Maecenas felis neque, porta et sagittis faucibus, fringilla id tellus. Etiam nec pulvinar tellus. Mauris et diam at est cursus egestas. Donec tincidunt metus non ante tristique egestas.

10px

15px

15px

padding: 5px 10px 15px 20px

padding: 5px 10px 15px

10px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis volutpat laoreet magna, nec placerat nisl egestas id. Maecenas a nulla vel arcu viverra lobortis. In ligula nunc, cursus non faucibus sed, hendrerit id est. Maecenas felis neque, porta et sagittis faucibus, fringilla id tellus. Etiam nec pulvinar tellus. Mauris et diam at est cursus egestas. Donec tincidunt metus non ante tristique egestas.

5px

10px

5px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis volutpat laoreet magna, nec placerat nisl egestas id. Maecenas a nulla vel arcu viverra lobortis. In ligula nunc, cursus non faucibus sed, hendrerit id est. Maecenas felis neque, porta et sagittis faucibus, fringilla id tellus. Etiam nec pulvinar tellus. Mauris et diam at est cursus egestas. Donec tincidunt metus non ante tristique egestas.

5px

5px

5px

5px

padding: 5px 10px

padding: 5px

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 margin - left : auto ; 3 margin - right : auto ; 4 width : 5 %; 5 }

Exerccios de Fixao

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 >
Cdigo 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.


div { width : 6 px ; border : 1 px solid black ; } p, a { border : 1 px solid black ; } # p1 { margin : 5 px 1 px 2 px 3 px ; padding : 5 px px px 2 px ; } # a1 { margin - left : 1 px ;

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16

194

www.k19.com.br

195
17 18 19 2 21 22 23 24 25 26 27 28 padding : 5 px ; } # a2 { margin - left : 2 px ; padding : 1 px ; } # p2 { margin : 2 px ; padding : 1 px ; }
Cdigo CSS 3.30: margens.css

CSS

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-fixacao28.zip

29

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/margens.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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 denidas com as propriedades height e width respectivamente.
Valor auto medida x% inherit Descrio A altura ou largura so calculadas automaticamente pelos navegadores. A medida corresponde largura ou a altura. A medida corresponde largura ou a altura como porcentagem das dimenses do elemento HTML pai 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 denir um limite inferior e/ou um limite superior para essa dimenso. Esses limites podem ser denidos com as propriedades min-height e max-height.
Valor none medida Descrio Sem valor (padro para max-height). A medida corresponde altura mxima ou mnima desejada (0px padro para min-height).

www.facebook.com/k19treinamentos

195

CSS Valor x% inherit Descrio O valor x corresponde altura mxima ou mnima. Esse valor uma porcentagem da altura do elemento HTML pai Assume o valor da mesma propriedade no elemento HTML pai.

196

min-width e max-width
A propriedade width utilizada para determinar a largura exata do box de um elemento HTML. Uma outra abordagem denir um limite inferior e/ou um limite superior para essa dimenso. Esses limites podem ser denidos com as propriedades min-width e max-width.
Valor none medida x% inherit Descrio Sem valor (padro para max-width). A medida corresponde largura mxima ou mnima desejada (0px padro para min-width). O valor x corresponde largura mxima ou mnima. Esse valor uma porcentagem da largura do elemento HTML pai Assume o valor da mesma propriedade no elemento HTML pai.

Exerccios de Fixao

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 >
Cdigo 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.


p { border : 1 px solid black ; max - width : 6 px ; max - height : 25 px ; min - height : 1 px ; } # p1 { width : 2 } # p2 { width : 4 }

1 2 3 4 5 6 7 8 9 1 11 12 13 14

px ;

px ;

Cdigo 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 endereo:


http://localhost/css/public_html/altura-largura.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/css/public_html/altura-largura.html.

Display e Visibilidade
A linguagem CSS possui algumas propriedades para controlar a forma de exibio e a visibilidade dos elementos HTML.

display
A propriedade display dene a forma de exibio dos elementos HTML. Os 5 principais valores dessa propriedade so: inline(padro), block, inline-block, list-item e none.
Valor inline Descrio Considere o box de um elemento HTML com display: inline. Esse box no gera quebras de linha e as suas dimenses so calculadas com base no contedo do elemento HTML. As propriedades width e height no modicam a largura e a altura do box. As margens e as bordas do box de um elemento HTML com display: inline empurram os boxes vizinhos horizontalmente. Verticalmente, os boxes vizinhos no so empurrados. Considere o box de um elemento HTML com display: block. Esse box gera quebras de linha e, por padro, ocupa todo o espao horizontal do elemento pai. Podemos controlar a largura e a altura desse box com as propriedades width e height.

block

www.facebook.com/k19treinamentos

197

CSS Valor inline-block Descrio O comportamento dos boxes dos elementos HTML com display: inline-block similar ao dos boxes dos elementos HTML com display: inline. Basicamente, a diferena entre eles que podemos modicar a largura e altura dos boxes dos elementos HTML com display: inline-block. O comportamento dos boxes dos elementos HTML com display: list-item similar ao dos boxes dos elementos HTML com display: block. Basicamente, a diferena entre eles que um bullet exibido no canto esquerdo de box de um elemento HTML com display: list-item. Os boxes dos elementos HTML com display: none no so exibidos e no ocupam espao na pgina.

198

list-item

none

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit amet bibendum. Aliquam sed tempor tellus. Duis placerat suscipit turpis in sollicitudin. Nunc lacus magna, auctor vitae venenatis eu, dictum ac augue. Nunc eleifend dignissim felis.
display: inline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit amet bibendum. Aliquam sed tempor tellus. Duis placerat suscipit turpis in sollicitudin. Nunc lacus magna, auctor vitae venenatis eu, dictum ac augue. Nunc eleifend dignissim felis.
display: block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit amet bibendum. Aliquam sed tempor tellus. Duis placerat 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 no atravs da propriedade visibility. O valor visible(padro) indica que o elemento deve ser exibido e o valor hidden indica que o elemento no deve ser exibido.
Valor visible hidden inherit Descrio Visvel (padro). Invisvel. 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 renderizao, os elementos HTML com display: none so totalmente desconsiderados. Em outras palavras, como se eles simplesmente no existissem. Dessa forma, eles no afetam o posicionamento dos demais elementos. Por outro lado, os elementos HTML com visibility: hidden apesar de no serem exibidos fazem parte da pgina renderizada e podem afetar o posicionamento dos demais elementos pois o espao ocupado por eles pode no ser nulo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit amet bibendum. Aliquam sed tempor tellus. Duis suscipit turpis in sollicitudin. Nunc lacus magna, auctor vitae venenatis eu, dictum ac augue. Nunc eleifend dignissim felis.
display: none

www.facebook.com/k19treinamentos

199

CSS

200

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit amet bibendum. Aliquam sed tempor tellus. Duis suscipit turpis in sollicitudin. Nunc lacus magna, auctor vitae venenatis eu, dictum ac augue. Nunc eleifend dignissim felis.
visibility: hidden

Exerccios de Fixao

33

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 >
Cdigo 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 border : 2 px solid black ;

200

www.k19.com.br

201
3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37 width : 6 } span { padding : 15 px ; margin : 4 px ; width : 2 px ; height : 1 px ; border : 2 px solid black ; background - color : yellow ; } # span1 { display : inline ; } # span2 { display : block ; } # span3 { display : inline - block ; } # span4 { display : list - item ; } # span5 { display : none ; } # span6 { visibility : hidden ; }
Cdigo CSS 3.32: display-visibilidade.css

CSS
px ;

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-fixacao34.zip

35

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/display-visibilidade.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/css/public_html/display-visibilidade.html.

Opacidade
Podemos denir a opacidade dos elementos HTML com a propriedade opacity.
Valor x inherit Descrio O valor x um nmero entre 0(totalmente transparente) e 1(sem transparncia, padro). Assume o valor da mesma propriedade no elemento HTML pai.

www.facebook.com/k19treinamentos

201

CSS

202

opacity: 1

opacity: 0.75

opacity: 0.5

opacity: 0.25

Exerccios de Fixao

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 >
Cdigo 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.


div { width : 1 px ; height : 1 px ; background - color : red ; } # div1 { opacity : } # div2 { opacity : } # div3 { opacity : } # div4 { opacity : }

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25

.25;

.5;

.75;

# div5 { opacity : 1; }

202

www.k19.com.br

203

CSS

Cdigo 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 endereo:


http://localhost/css/public_html/opacidade.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/css/public_html/opacidade.html.

Posicionamento
A linguagem CSS dene quatro formas para posicionar os boxes dos elementos HTML: static, relative, xed e absolute. Mostraremos o funcionamento de cada uma dessas formas. A propriedade position determina a forma de posicionamento desejada.

static
O valor static o valor padro da propriedade position. O box de um elemento com position: static colocado na sua posio natural. No podemos alterar a posio dos boxes dos elementos HTML com position: static.

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 posio relativa a sua posio natural. As propriedades left, top, right e bottom so utilizadas para determinar o deslocamento entre a posio desejada e a posio natural. O espao que seria ocupado por esse box se ele estivesse em sua posio natural no ocupado por nenhum outro elemento.
www.facebook.com/k19treinamentos

203

CSS
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.

204

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

xed
O box de um elemento com position: xed colocado em uma posio relativa pgina e no acompanha a rolagem do contedo. As propriedades left, top, right e bottom so utilizadas para determinar o deslocamento entre a posio desejada e pagina.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit amet bibendum. Aliquam sed tempor tellus. Duis placerat suscipit turpis in sollicitudin. Duis nunc est, consequat vel pulvinar in, egestas sit amet odio. Praesent at leo feugiat, fermentum diam ut, commodo lacus. Interdum et malesua fames ac ante ipsum primis in faucibus. Fusce vehicula turpis vitae mauris ornare, sed vestibulum arcu dapibus. Etiam posuere luctus arcu ut molestie. Aenean rutrum erat nec dolor imperdiet volutpat. Fusce id turpis suscipit, tristique dui ac, gravida augue. Nam ac placerat justo. Aliquam ut congue ligula. Fusce id varius magna. In quis fringilla ante, id pellentesque risus. Maecenas elementum at purus a facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Fusce vehicula turpis vitae mauris ornare, sed vestibulum arcu dapibus. Etiam posuere luctus arcu ut molestie. Aenean rutrum erat nec dolor imperdiet volutpat. Fusce id turpis suscipit, tristique dui ac, gravida augue. Nam ac placerat justo. Aliquam ut congue ligula. Fusce id varius magna. In quis fringilla ante, id pellentesque risus. Maecenas elementum at purus a facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed tempor tellus. Duis placerat suscipit turpis in sollicitudin. Nunc lacus magna, auctor vitae venenatis eu, dictum ac augue. Nunc eleifend dignissim felis at mattis. Duis nunc est, consequat vel pulvinar in, egestas sit amet odio. Praesent at leo feugiat, fermentum diam ut, commodo lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus.

position: fixed

absolute
O box de um elemento com position: absolute colocado em uma posio relativa posio do box do elemento HTML ancestral mais prximo com position diferente de static. Se no existir um ancestral nessas condies a posio ser relativa pgina. As propriedades left, top, right e bottom so utilizadas para determinar o deslocamento entre a posio desejada e o ponto de referncia.

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 referncia

204

www.k19.com.br

205
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit amet bibendum. Aliquam sed tempor tellus. Duis placerat suscipit turpis in sollicitudin. Duis nunc est, consequat vel pulvinar in, egestas sit amet odio. Praesent at leo feugiat, fermentum diam ut, commodo lacus. Interdum et malesua fames ac ante ipsum primis in faucibus. Fusce vehicula turpis vitae mauris ornare, sed vestibulum arcu dapibus. Etiam posuere luctus arcu ut molestie. Aenean rutrum erat nec dolor imperdiet volutpat. Fusce id turpis suscipit, tristique dui ac, gravida augue. Nam ac placerat justo. Aliquam ut congue ligula. Fusce id varius magna. In quis fringilla ante, id pellentesque risus. Maecenas elementum at purus a facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nunc est, consequat vel pulvinar in, egestas sit amet odio. Praesent at leo feugiat, fermentum diam ut, commodo lacus. Interdum et malesua fames ac ante ipsum primis in faucibus. Fusce vehicula turpis vitae mauris ornare, sed vestibulum arcu dapibus. Etiam posuere luctus arcu ut molestie. Aenean rutrum erat nec dolor imperdiet volutpat. Fusce id turpis suscipit, tristique dui ac, gravida augue. Nam ac placerat justo. Aliquam ut congue ligula. Fusce id varius magna. In quis fringilla ante, id pellentesque risus. Maecenas elementum at purus a facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed tempor tellus. Duis placerat suscipit turpis in sollicitudin. Nunc lacus magna, auctor vitae venenatis eu, dictum ac augue. Nunc eleifend dignissim felis at mattis.

CSS

position: absolute
Figura 3.8: Pgina utilizada como referncia

oat
Podemos fazer o box de um elemento HTML utuar ao redor dos demais elementos atravs da propriedade oat.
Valor left right none inherit Descrio Flutuar esquerda. Flitar direita. Sem utuao (padro). 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. float: left

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. float: right

Importante
Os elementos HTML com oat diferente de none podem ser reposicionados se a janela for redimensionada.

Importante
Os elementos HTML com oat diferente de none no afetam a altura ou a largura do elemento HTML onde eles esto contidos.

clear
Os box dos elementos HTML prximos do box de um elemento HTML om oat diferente de none so empurrados horizontalmente esquerda ou direita. Podemos determinar que, ao invs de serem empurrados horizontalmente, eles sejam exibidos em uma nova linha atravs da propriedade clear.

www.facebook.com/k19treinamentos

205

CSS Valor left right both none inherit Descrio No permite boxes utuando esquerda dele. No permite boxes utuando direita dele. No permite boxes utuando nem esquerda nem direita dele. Permite boxes utuando esquerda e direita (padro) dele. Assume o valor da mesma propriedade no elemento HTML pai.

206

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


clear: none

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aliquam sed tempor tellus. Duis placerat suscipit turpis in sollicitudin. Nunc lacus magna, auctor vitae venenatis eu, dictum ac augue. clear: none

clear: left

Aliquam sed tempor tellus. Duis placerat suscipit turpis in sollicitudin. Nunc lacus clear: left

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


clear: none

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aliquam sed tempor tellus. Duis placerat suscipit turpis in sollicitudin. Nunc lacus magna, auctor vitae venenatis eu, dictum ac augue. clear: none

clear: right

Aliquam sed tempor tellus. Duis placerat suscipit turpis in sollicitudin. Nunc lacus clear: rigth

Lorem ipsum dolor sit amet.


clear: none

Lorem ipsum dolor sit amet.

Aliquam sed tempor tellus. Duis placerat suscipit turpis in sollicitudin. Nunc lacus magna, auctor vitae venenatis eu, dictum ac augue. clear: none

clear: both

Aliquam sed tempor tellus. Duis placerat suscipit turpis in sollicitudin. Nunc lacus clear: both

z-index
A sobreposio dos boxes dos elementos HTML pode ser controlada atravs da propriedade zindex. Basicamente, essa propriedade permite determinar em qual plano um box deve ser exibido.
Valor auto x inherit 206 Descrio Mesmo plano do box do elemento HTML pai (padro). O valor x o plano desejado. Esse valor pode ser negativo. Assume o valor da mesma propriedade no elemento HTML pai.
www.k19.com.br

207

CSS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam z-index: 1 sit amet bibendum. Aliquam sed tempor tellus. Duis placerat suscipit turpis in sollicitudin. z-index: 2 ac augue. Nunc eleifend dignissim Nunc lacus magna, auctor vitae venenatis eu, dictum 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 top: 50%

#container { height: 600px; position: relative; } #conteudo { height: 200px; position: absolute; top: 50%; margin-top: -100px; }

#conteudo #container

margin-top: -100px

Exerccios de Fixao

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
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 >
Cdigo HTML 3.21: posicionamento.html

208

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-fixacao39.zip

40

No projeto css, crie um arquivo CSS chamado posicionamento.css.


img { float : left ; } # p3 { clear : left ; } div { width : 2 px ; height : 1 px ; color : white ; } # div1 { position : fixed ; right : 2 px ; top : 4 px ; background - color : green ; } # div2 { position : relative ; top : 3 px ; left : 6 px ; background - color : blue ; } # div3 { position : absolute ; bottom : -4 px ; right : -1 px ; background - color : red ; z - index : -1; }

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35

208

www.k19.com.br

209

CSS

Cdigo 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 endereo:


http://localhost/css/public_html/posicionamento.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/css/public_html/posicionamento.html.

Overow e clip
Eventualmente, o contedo de um elemento HTML extrapola os limites do mesmo. A linguagem CSS dene algumas propriedades para determinar como essa situao deve ser tratada.

overow-x
A propriedade overow-x determina o que os navegadores devem fazer quando o contedo de um elemento HTML extrapola horizontalmente os limites do mesmo.
Valor visible hidden scroll auto Descrio O contedo excedente na horizontal ser exibido (padro). O contedo excedente na horizontal no ser exibido. O contedo excedente na horizontal no ser exibido e um mecanismo rolagem horizontal ser disponibilizado. O contedo excedente na horizontal no ser exibido e um mecanismo rolagem horizontal ser disponibilizado somente se necessrio.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

overflow-x: visible

overflow-x: hidden

overflow-x: scroll

Lorem ipsum dolor sit amet.

Lorem ipsum.

overflow-x: auto

overflow-x: auto

www.facebook.com/k19treinamentos

209

CSS

210

overow-y
A propriedade overow-y determina o que os navegadores devem fazer quando o contedo de um elemento HTML extrapola verticalmente os limites do mesmo.
Valor visible hidden scroll auto Descrio O contedo excedente na vertical ser exibido (padro). O contedo excedente na vertical no ser exibido. O contedo excedente na vertical no ser exibido e um mecanismo rolagem vertical ser disponibilizado. O contedo excedente na vertical no ser exibido e um mecanismo rolagem vertical ser disponibilizado somente se necessrio.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit.
overflow-y: visible

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit.
overflow-y: hidden

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit.
overflow-y: scroll

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit.
overflow-y: auto

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


overflow-y: auto

overow
A propriedade overow determina o que os navegadores devem fazer quando o contedo de um elemento HTML extrapola os limites do mesmo.
Valor visible hidden scroll auto no-display inherit Descrio O contedo excedente ser exibido (padro). O contedo excedente no ser exibido. O contedo excedente no ser exibido e um mecanismo rolagem ser disponibilizado. O contedo excedente no ser exibido e um mecanismo rolagem ser disponibilizado somente se necessrio. O elemento HTML no ser exibido se o seu contedo extrapolar os limites do seu box. Assume o valor da mesma propriedade no elemento HTML pai.

210

www.k19.com.br

211

CSS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit. Duis placerat suscipit turpis in sollicitudin.
overflow: visible

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit. Duis placerat suscipit turpis in sollicitudin.
overflow: hidden

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit. Duis placerat suscipit turpis in sollicitudin.
overflow: scroll

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit. Duis placerat suscipit turpis in sollicitudin.
overflow: auto

Lorem ipsum dolor sit amet, consectetur.

overflow: auto

clip
Podemos determinar a regio do box de um elemento HTML que deve ser exibida com a propriedade clip. Essa propriedade s tem efeito sobre elementos com position: absolute.
Valor auto rect(top, right, bottom, left ) inherit Descrio O box inteiro ser exibido (padro). Retngulo que dene a regio que ser exibida. Assume o valor da mesma propriedade no elemento HTML pai.

85px 50px 95px

20px

clip: auto

clip: rect(20px, 95px, 85px, 50px)

Exerccios de Fixao

42

No projeto css, crie um arquivo chamado overow-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
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 Ol . 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 >
Cdigo HTML 3.22: overow-clip.html

212

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-fixacao42.zip

43

No projeto css, crie um arquivo CSS chamado overow-clip.css.


div { margin : 7 px ; width : 2 px ; height : 1 px ; border : 1 px solid red ; } p { width : 27 px ; } # div1 { overflow : visible ; } # div2 { overflow : hidden ; } # div3 { overflow : scroll ; }

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23

212

www.k19.com.br

213
24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 39 4 41 42 43 44 # div4 { overflow : auto ; } # div5 { overflow : auto ; } # img1 { position : absolute ; top : 1 px ; left : 4 px ; clip : auto ; } # img2 { position : absolute ; top : 25 px ; left : 4 px ; clip : rect (1 px , 118 px , 1 8 px , 4 px ) ; }

CSS

Cdigo CSS 3.35: overow-clip.css

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-fixacao43.zip

44

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/overflow-clip.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/css/public_html/overflow-clip.html.

Transformaes
No CSS3 foram introduzidas algumas funes para realizar as transformaes de translado, escalonamento, distoro e rotao nos elementos de uma pgina HTML. Essas funes so utilizadas em conjunto com a propriedade transform do CSS3.

translate()

O resultado da aplicao da funo translate(m, n) semelhante ao resultado obtido ao mover um elemento atravs do atributo position com o valor relative. Ao utilizar a funo translate(m, n) um elemento transladado a m unidades de medida da esquerda e n unidades de medida do topo.
www.facebook.com/k19treinamentos

213

CSS

214

transform: translate( m , n );

Original Transladado

Figura 3.9: Funo translate()

scale()
A funo scale(m, n) escalonar as dimenses de um elemento. O escalonamento ser aplicado sobre a largura a uma taxa denida por m e sobre a altura a uma taxa denida por n. Caso a funo seja chamada com apenas um parmetro, a mesma taxa ser aplicada na altura e largura do elemento.

transform: scale( m , n );

w* m w h h* n

Original Escalonado

Figura 3.10: Funo scale()

rotate()
A funo rotate(m) rotacionar um elemento em torno do seu ponto de origem. O valor de m deve ser dado em graus, voltas ou grado.
214
www.k19.com.br

215

CSS

transform: rotate( m );

Original
m

Rotacionado

Figura 3.11: Funo rotate()

skew()
A funo skew(m, n) distorcer um elemento em relao aos eixos x e y. m e n denem as distores aplicadas nos eixos x e y respectivamente. Os valores de m e n devem ser dados em graus, voltas ou grado.

transform: skew( m , n );

Original Destorcido

Figura 3.12: Funo skew()

Exerccios de Fixao

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 - Transformaes </ title > 6 < link rel = " stylesheet " type = " text / css " href = " transformacoes . css " > 7 </ head > 8 < body >

www.facebook.com/k19treinamentos

215

CSS
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 >
Cdigo HTML 3.23: transformacoes.html

216

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-fixacao45.zip

46

No projeto css, crie um arquivo CSS chamado transformacoes.css.


div { margin : 7 px ; border : 1 px solid black ; background - color : yellow ; width : 1 px ; height : 1 px ; } # div1 { transform : translate (5 px , -2 px ) ; /* Webkit : Chrome , Safari */ - webkit - transform : translate (5 px , -2 px ) ; } # div2 { transform : scale ( .5 , 2) ; /* Webkit : Chrome , Safari */ - webkit - transform : scale ( .5 , 2) ; } # div3 { transform : rotate (15 deg ) ; /* Webkit : Chrome , Safari */ - webkit - transform : rotate (15 deg ) ; } # div4 { transform : skew (1 deg , -45 deg ) ; /* Webkit : Chrome , Safari */ - webkit - transform : skew (1 deg , -45 deg ) ; } /* Moz : Firefox */ /* substituir " webkit " por " moz " /* O : Opera */ /* substituir " webkit " por " o " /* Ms : Internet Explorer */

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 39 4 41 42 43

216

www.k19.com.br

217
44 /* substituir " webkit " por " ms " */
Cdigo CSS 3.36: transformacoes.css

CSS

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-fixacao46.zip

47

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/transformacoes.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/css/public_html/transformacoes.html.

Transies
Como vimos anteriormente, as regras CSS podem ser aplicadas aos elementos HTML de acordo com o estado atual do mesmo. Por exemplo, considere as duas regras CSS a seguir.
1 2 3 4 5 6 7 8 9 div { width : 5 px ; height : 5 px ; } div : hover { width : 1 px ; height : 1 px ; }

De acordo com as duas regras CSS acima, quando o ponteiro do mouse for colocado por cima de um div, a largura e a altura desse elemento HTML aumentar instantaneamente de 50px para 100px.
height: 20px; height: 80px;

Estado inicial

Estado final

Quando a mudana visual de um elemento HTML muito signicativa, o resultado pode no ser agradvel aos usurio. A linguagem CSS possui propriedades para melhorar essas transies.

transition-duration
A durao das transies pode ser controlada com a propriedade transition-duration.

www.facebook.com/k19treinamentos

217

CSS Valor tempo Descrio A durao em segundos(s) ou milissegundos(ms). Os o valor padro.

218

Os navegadores devem gerar, automaticamente, frames intermedirios entre visual inicial e o nal. Esses frames devem ser exibidos sequencialmente durante o tempo determinado com a propriedade transition-duration.
width: 20px; height: 20px; width: 80px; height: 80px; transition-duration: 4s;

tempo (s) 0 4

transition-delay
Podemos estabelecer um atraso para o incio de uma transio com a propriedade transitiondelay.
Valor tempo Descrio A durao em segundos(s) ou milissegundos(ms). Os o valor padro.

width: 20px; height: 20px;

width: 80px; height: 80px; transition-duration: 1500ms; transition-delay: 1s;

tempo (s) 0 1 2.5

transition-timing-function
Os frames que foram uma transio podem ser exibidos com padres diferentes. Por exemplo, uma transio pode iniciar devagar, no meio acelerar e terminar devagar. O padro desejado pode ser determinado atravs da propriedade transition-timing-function.
Valor linear ease Descrio Mesma velocidade do incio at o nal da transio. bezier(0, 0, 1, 1). Equivale a cubic-

O incio da transio lento, o meio rpido e o nal volta a ser lento (padro). Equivale a cubic-bezier(0.25, 0.1, 0.25, 1).
www.k19.com.br

218

219 Valor ease-in ease-out ease-in-out cubic-bezier(n,n,n,n) Descrio

CSS

O incio da transio lento. O meio e o nal so rpidos. Equivale a cubicbezier(0.42, 0, 1, 1) O incio e o meio da transio so rpidos e o nal lento. Equivale a cubicbezier(0, 0, 0.58, 1) Semelhante ao valor ease com incio e nal mais longos. Equivale a cubicbezier(0.42, 0, 0.58, 1). A transio seguir o padro denido pela funo cbica de bezier.

height: 20px;

height: 80px; transition-duration: 4s; transition-timing-function: linear;

tempo (s) 0 4

height: 20px;

height: 80px; transition-duration: 4s; transition-timing-function: ease;

tempo (s) 0 4

height: 20px;

height: 80px; transition-duration: 4s; transition-timing-function: ease-in;

tempo (s) 0
www.facebook.com/k19treinamentos

4
219

CSS
height: 80px; transition-duration: 4s; transition-timing-function: ease-out;

220

height: 20px;

tempo (s) 0 4

height: 20px;

height: 80px; transition-duration: 4s; transition-timing-function: ease-in-out;

tempo (s) 0 4

transition-property
Podemos escolher quais propriedades CSS devem ser consideradas nas transies atravs da propriedade transition-property.
Valor none all lista-de-propriedades Descrio Nenhuma propriedade ser considerada na transio. Todas as propriedades sero consideradas na transio (padro). Lista das propriedades que devem ser consideradas na transio.

width: 1px; height: 20px; opacity: 0.3;

width: 20px; height: 80px; opacity: 1; transition-duration: 4s; transition-timing-function: linear; transition-property: height, opacity;

tempo (s) 0
220

4
www.k19.com.br

221

CSS

Exerccios de Fixao

48

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 - Transies </ 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 >
Cdigo 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.


# div1 { margin : 3 px ; padding : 1 px ; width : 2 px ; height : 2 px ; background - color : # 64 e83 ; color : white ; transition : 1 s ease - in - out ; } # div1 : hover { transform : scale (4 , 4) rotate (36 deg ) ; /* Webkit : Chrome , Safari */ - webkit - transform : scale (4 , 4) rotate (36 deg ) ; } /* Moz : Firefox */ /* substituir " webkit " por " moz " /* O : Opera */ /* substituir " webkit " por " o " /* Ms : Internet Explorer */ /* substituir " webkit " por " ms " */
Cdigo CSS 3.38: transicoes.css

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-fixacao49.zip

50

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/transicoes.html. www.facebook.com/k19treinamentos

221

CSS

222

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/css/public_html/transicoes.html.

Animaes
A partir da sua terceira verso, a linguagem CSS adicionou algumas propriedades para criao de animaes. Essas animaes so criadas atravs do conceito de keyframes. Nessa abordagem, devemos denir os quadros principais e os navegadores completam a animao inserindo os quadros intermerdirios.

Keyframe

Frames intermedirios

Keyframe

Os quadros principais so denidos com a propriedade keyframes. A forma mais simples de utilizao dessa propriedade denir o primeiro e o ltimo quadro da animao. Veja, no exemplo abaixo, a criao de uma animao chamada k19-animacao.
1 @keyframes k19 - animacao { 2 from { 3 width : 1 px ; 4 } 5 to { 6 width : 1 px ; 7 } 8 }

Os quadros principais so denidos de acordo com o momento no qual eles sero exibidos. Esse instante descrito como uma porcentagem do tempo total da animao.
222
www.k19.com.br

223
Quadros gerados automaticamente pelo navegador Quadros gerados automaticamente pelo navegador

CSS

tempo (s) 0 3
@keyframes minha-animacao { 0% { height: 20px; opacity: 0.35; } 50% { opacity: 1; } 100% { height: 80px; opacity: 0.35; }

Mais Sobre
Essencialmente, as duas animaes abaixo so exatamente iguais.

1 @keyframes animacao1 { 2 from { 3 width : 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 denir as animaes com a propriedade keyframes, devemos associ-la aos elementos HTML atravs da propriedade animation-name e determinar o tempo de durao com a propriedade animation-duration.
1 div {

www.facebook.com/k19treinamentos

223

CSS
2 animation - name : k19 - animacao ; 3 animation - duration : 3 s ; 4 } 5 6 @keyframes k19 - animacao { 7 from { 8 width : 1 px ; 9 } 1 to { 11 width : 1 px ; 12 } 13 }

224

animation-timing-function
Podemos determinar o padro de exibio dos quadros de uma animao com a propriedade animation-timing-function.
Valor linear ease ease-in ease-out ease-in-out cubic-bezier(n,n,n,n) Descrio Mesma velocidade do incio at o nal da animao. Equivale a cubicbezier(0, 0, 1, 1). O incio da animao lento, o meio rpido e o nal volta a ser lento (padro). Equivale a cubic-bezier(0.25, 0.1, 0.25, 1). O incio da animao lento. O meio e o nal so rpidos. Equivale a cubicbezier(0.42, 0, 1, 1) O incio e o meio da animao so rpidos e o nal lento. Equivale a cubicbezier(0, 0, 0.58, 1) Semelhante ao valor ease com incio e nal mais longos. Equivale a cubicbezier(0.42, 0, 0.58, 1). A animao seguir o padro denido pela funo cbica de Bzier.

animation-delay
Podemos adicionar um atraso para o incio de uma animao com a propriedade animationdelay.
Valor tempo Descrio A durao em segundos(s) ou milissegundos(ms). 0s o valor padro.

animation-iteration-count
A quantidade de repeties de uma animao pode ser determinada com a propriedade animationiteration-count.
Valor x innite Descrio O valor x a quantidade de repeties da animao. 1 o valor padro. A animao se repetir indenidamente.

animation-direction
A direo adotada na exibio de uma animao pode ser determinada atravs da propriedade animation-direction.

224

www.k19.com.br

225 Valor normal reverse alternate alternate-reverse Descrio A animao ser exibida na direo normal (padro). A animao ser exibida na direo inversa.

CSS

A animao ser exibida nas direes normal e inversa de forma alternada, iniciando com a direo normal A animao ser exibida nas direes normal e inversa de forma alternada, iniciando com a direo inversa.

animation-play-state
As animaes podem ser pausadas ou reiniciadas atravs da propriedade animation-play-state.
Valor paused running Descrio A animao parada. A animao em execuo.

Exerccios de Fixao

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 - Animaes </ 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 >
Cdigo 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
16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 39 4 41 42 43 44 45 46 47 48 49 5 51 52 53 54 55 56 57 58 59 6 61 62 63 64 65 66 67 68 69 7 71 72 73 74 75 76 77 78 79 8 81 82 83 84 85 # img2 { position : absolute ; top : 4 px ; left : 11 px ; z - index : 1; transform : scale (2.5 , 2.5) ; animation : animacao5 1 s linear , animacao6 animacao7 5 ms linear , animacao8 5 animation - delay : 2s , 3s , 3.5 s , 4 s ;

226

.5 s linear , ms linear ;

/* Webkit : Chrome , Safari */ - webkit - transform : scale (2.5 , 2.5) ; - webkit - animation : animacao5 1 s linear , animacao6 .5 s linear , animacao7 5 ms linear , animacao8 5 ms linear ; - webkit - animation - delay : 2s , 3s , 3.5 s , 4 s ; } @keyframes animacao1 { to { top : 31 px ; } } @keyframes animacao2 { from { top : 31 px ; } to { top : 335 px ; transform : scale (1.25 , } }

.75) ;

@keyframes animacao3 { from { top : 335 px ; transform : scale (1.25 , .75) ; } to { top : 285 px ; transform : scale ( .75 , 1.25) ; } } @keyframes animacao4 { from { top : 285 px ; transform : scale ( .75 , 1.25) ; } to { top : 31 px ; transform : scale (1 , 1) ; } } @keyframes animacao5 { to { transform : scale (1.5 , 1.5) ; } } @keyframes animacao6 { from { transform : scale (1.5 , 1.5) ; } to { transform : scale (1.75 , 1.75) ; } }

226

www.k19.com.br

227
86 87 88 89 9 91 92 93 94 95 96 97 98 99 1 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 11 111 112 113 114 115 116 117 118 119 12 121 122 123 124 125 126 127 128 129 13 131 132 133 134 135 136 137 138 139 14 141 142 143 144 145 146 147 148 149 15 151 152 153 154 155 @keyframes animacao7 { from { transform : scale (1.75 , 1.75) ; } to { transform : scale (1.25 , 1.25) ; } } @keyframes animacao8 { from { transform : scale (1.25 , 1.25) ; } to { transform : scale (1.5 , 1.5) ; } } /* Webkit : Chrome , Safari */ @ - webkit - keyframes animacao1 { to { top : 31 px ; } } @ - webkit - keyframes animacao2 { from { top : 31 px ; } to { top : 335 px ; - webkit - transform : scale (1.25 , } }

CSS

.75) ;

@ - webkit - keyframes animacao3 { from { top : 335 px ; - webkit - transform : scale (1.25 , .75) ; } to { top : 285 px ; - webkit - transform : scale ( .75 , 1.25) ; } } @ - webkit - keyframes animacao4 { from { top : 285 px ; - webkit - transform : scale ( .75 , 1.25) ; } to { top : 31 px ; - webkit - transform : scale (1 , 1) ; } } @ - webkit - keyframes animacao5 { to { - webkit - transform : scale (1.5 , 1.5) ; } } @ - webkit - keyframes animacao6 { from { - webkit - transform : scale (1.5 , 1.5) ; } to { - webkit - transform : scale (1.75 , 1.75) ;

www.facebook.com/k19treinamentos

227

CSS
156 157 158 159 16 161 162 163 164 165 166 167 168 169 17 171 172 173 174 175 176 177 178 179 18 181 182 183 184 } } @ - webkit - keyframes animacao7 { from { - webkit - transform : scale (1.75 , 1.75) ; } to { - webkit - transform : scale (1.25 , 1.25) ; } } @ - webkit - keyframes animacao8 { from { - webkit - transform : scale (1.25 , 1.25) ; } to { - webkit - transform : scale (1.5 , 1.5) ; } } /* Moz : Firefox */ /* substituir " webkit " por " moz " /* O : Opera */ /* substituir " webkit " por " o " /* Ms : Internet Explorer */ /* substituir " webkit " por " ms " */
Cdigo CSS 3.43: animacoes.css

228

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-fixacao52.zip

53

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/animacoes.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/css/public_html/animacoes.html.

Seletores
Como vimos, os seletores so utilizados para determinar quais elementos HTML devem ser afetados por uma regra CSS. A linguagem CSS oferece uma grande variedade de seletores.

Seletores bsicos
Seletor Universal Tipo Classe ID Descendente Filho 228 Padro * e .class #id e1 e2 e1 > e2 Exemplo * p .erro #conteudo pa p>a Descrio Seleciona todos os elementos Seleciona todos os elementos p Seleciona todo elemento da classe erro Seleciona o elemento de id conteudo Seleciona todo elemento a descendente de um elemento p Seleciona todo elemento a lho de um elemento p

www.k19.com.br

229 Seletor Irmo Adjacente Irmo Padro e1 + e2 e1 e2 Exemplo h1 + p h1 p Descrio

CSS

Seleciona todo elemento p imediatamente precedido de um elemento h1 Seleciona todo elemento p precedido de um elemento h1

Seletores de atributos
Padro [a] [a=v] [a=v] [a=v] [a$=v] [a*=v] [a|=v] Exemplo [min] [min=10] [title=k19] [href="https"] [href$=".css"] [title*=k19] [href|="https"] Descrio Seleciona todos os elementos que tenham o atributo min denido Seleciona todos os elementos que tenham o atributo min igual a 10 Seleciona todos os elementos que possuam a palavra k19 no valor do atributo title Seleciona todos os elementos que tenham o valor do atributo href iniciando com https Seleciona todos os elementos que tenham o valor do atributo href terminando com .css Seleciona todos os elementos que possuam a string k19 no valor do atributo title Seleciona todos os elementos que tenham o atributo href iniciando com https

Pseudo-classes
Padro :root :nth-child(n) :nth-last-child(n) :nth-of-type(n) :nth-last-of-type(n) :rst-child :last-child :rst-of-type :last-of-type :only-child :only-of-type Exemplo :root :nth-child(3) :nth-last-child(3) a:nth-of-type(3) a:nth-last-of-type(3) :rst-child :last-child a:rst-of-type a:last-of-type :only-child a:only-of-type Descrio Seleciona o elemento raiz do documento Seleciona todo terceiro elemento contido em algum outro elemento Seleciona todo terceiro elemento de trs para frente contido em algum outro elemento Seleciona todo elemento a que o terceiro elemento contido em algum outro elemento Seleciona todo elemento a que o terceiro elemento de trs para frente contido em algum outro elemento Seleciona todo primeiro elemento contido em algum outro elemento Seleciona todo ltimo elemento contido em algum outro elemento Seleciona todo elemento a que o primeiro elemento contido em algum outro elemento Seleciona todo elemento a que o ltimo elemento contido em algum outro elemento Seleciona todo elemento que lho nico Seleciona todo elemento que o nico lho do tipo a de algum outro elemento

www.facebook.com/k19treinamentos

229

CSS Padro :empty :link :visited :active :hover :focus :target :lang(lang) :enabled :disabled :checked :not(s) Exemplo :empty a:link a:visited a:active a:hover input:focus :target :lang(pt) input:enabled input:disabled input:checked :not(.erro) Descrio Seleciona todo elemento que no tem contedo Seleciona todo link no visitado Seleciona todo link visitado Seleciona todo link ativo Seleciona todo link sob o ponteiro do mouse Seleciona o input que est no foco Seleciona a ncora atual Seleciona todos os elementos com a linguagem pt Seleciona todos os inputs habilitados Seleciona todos os inputs desabilitados Seleciona todos os inputs marcados Seleciona todo elemento que no da classe erro

230

Pseudo-elementos
Padro :rst-line :rst-letter :before :after Exemplo p:rst-line p:rst-letter p:before p:after Descrio Seleciona a primeira linha de todo pargrafo Seleciona a primeira letra de todo pargrafo Utilizado para adicionar contedo antes dos pargrafos Utilizado para adicionar contedo depois dos pargrafos

Prioridade de seletores
Eventualmente, um elemento HTML afetado por duas ou mais regras CSS. Alm disso, uma determinada propriedade CSS pode ser denida com valores diferentes em duas ou mais dessas regras. Nesse caso, essa propriedade ter o valor denido na regra CSS de maior prioridade. Essas prioridades so calculadas de acordo com os seletores utilizados nas regras CSS e na ordem em que elas foram denidas. Considere o cdigo HTML e o cdigo CSS a seguir.
1 <p id = " p1 " class = " class1 " > 2 Lorem ipsum dolor sit amet , consectetur adipiscing elit . 3 </ p >

1 2 3 4 5 6 7 8

p { color : red ; font - size : 14 px ; } p { color : blue ; }

Perceba que todo elemento p afetado pelas duas regras CSS acima. Nessas duas regras, a propriedade color foi denida com valores diferentes. Os seletores dessas duas regras possuem a mesma importncia. Nesse caso, a ltima regra tem maior prioridade. Portanto, o texto do pargrafo ser exibido em azul.
230
www.k19.com.br

231

CSS

A propriedade font-size no entrou em conito, pois foi denida em apenas uma das regras CSS. Portanto, o tamanho da fonte do texto do pargrafo ser 14px. Agora, suponha que o cdigo CSS seja o seguinte:
1 2 3 4 5 6 7 8 . class1 { color : red ; font - size : 14 px ; } p { color : blue ; }

Observe que o pargrafo do exemplo afetado pelas duas regras CSS acima. Nesse caso, qual ser a cor do texto do pargrafo? A resposta correta vermelho. Isso ocorre, pois os seletores de classe possuem importncia maior que os seletores de tipo. Conforme a complexidade dos seletores utilizados em nossas regras CSS aumenta, a diculdade em determinar qual deles possui maior importncia tambm aumenta. Por isso, devemos seguir o algoritmo denido na especicao da linguagem CSS para determinar a importncia dos seletores. Nesse algoritmo, os seletores obtero uma pontuao em quatro critrios diferentes.

A: Caso as propriedades sejam denidas atravs do atributo style, a pontuao nesse critrio ser 1. Caso contrrio ser 0.

B: A pontuao nesse critrio ser a quantidade de seletores de ID que formam o seletor da regra CSS.

C: A pontuao nesse critrio ser a soma das quantidades de seletores de classe, de atributos e de pseudo-classes que formam o seletor da regra CSS.

D: A pontuao nesse critrio ser a soma das quantidades de seletores de tipo e de pseudo-elementos que formam o seletor da regra CSS.

O critrio A possui prioridade sobre o critrio B, que por sua vez possui prioridade sobre o critrio C, que por sua vez possui prioridade sobre o critrio D. Veja nas imagens abaixo, um exemplo de como calcular a pontuao dos seletores.
C B C B C B C D D D C

.class2 #div1:hover #p1 .class1 #a1:visited span:first-child input[checked] { color: red; }

Pontuao:

0
A

3
B

5
C

3
D
231

www.facebook.com/k19treinamentos

CSS

232

section article.class2 div div:hover #p1 .class1 #a1:visited #input1 { color: red; }

Pontuao:

0
A

3
B

4
C

4
D

No critrio A, as duas regras obtiveram a mesma pontuao. Como ocorreu um empate, devemos analisar o critrio seguinte. No critrio B, houve outro empate. Portanto, devemos analisar o prximo critrio. No critrio C, a primeira regra possui uma pontuao maior. Dessa forma, o seletor da primeira regra possui maior importncia fazendo com que essa regra tenha maior prioridade.

Exerccios de Fixao

54

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 >
Cdigo 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
2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 39 4 margin : px ; padding : px ; } body { background - color : # ddd ; } # conteudo { width : 8 px ; margin : auto ; background - color : white ; border : 1 px solid #333; padding : 1 px ; } . cancelado { text - decoration : line - through ; } ul { padding : } ul li { color : blue ; } # conteudo > ul > li { margin : 2 px ; } ul + p { color : red ; } ul ~ p { font - style : italic ; }
Cdigo CSS 3.46: seletores-basicos.css

CSS

4 px ;

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-fixacao55.zip

56

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/seletores-basicos.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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 pgina 2 " > Link 2 </ a >

www.facebook.com/k19treinamentos

233

CSS
11 <a href = " # link - c " title = " Pgina 3 " > Link 3 </ a > 12 <a href = " # link - d " title = " Link para a pgina 4 " > Link 4 </ a > 13 <a href = " # link - e " title = " Link para a pgina da K19 Treinamentos " > Link 5 </ a > 14 <a href = " # links - f " title = " Link para a pgina 6 " > Link 6 </ a > 15 <a href = " # link " title = " Link para a pgina 7 " > Link 7 </ a > 16 17 < hr > 18 19 < img src = " http :// www . k19 . com . br / figs / main - header - logo . png " 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 >
Cdigo HTML 3.28: seletores-de-atributos.html

234

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.


[ title ] { border : 4 px solid red ; } [ title = Pgina 3 ] { color : green ; } [ title ~= K19 ] { padding : 1 px ; background : yellow ; } [ title ^= Link ] { margin - right : 3 px ; } [ href$ = link ] { outline : 4 px solid blue ; } [ src *= large ] { border : 4 px solid green ; } [ href |= # link ] { font - size : 3 px ; }
Cdigo CSS 3.47: seletores-de-atributos.css

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-fixacao58.zip

59

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/seletores-de-atributos.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/css/public_html/seletores-de-atributos.html.

234

www.k19.com.br

235
60

CSS

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
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 >
Cdigo HTML 3.29: seletores-de-pseudo-classes.html

236

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.


: root { font - size : 3 px ; } # lista1 li : first - child { color : red ; } # lista1 li : last - child { color : blue ; } # lista2 li : nth - child (2) { color : magenta ; } # lista2 li : nth - last - child (2) { color : orange ; } p : first - of - type { color : yellow ; } p : last - of - type { color : aqua ; } p : nth - of - type (2) { color : firebrick ; } p : nth - last - of - type (2) { color : lawngreen ; } : only - child { border : 4 px solid red ; } h2 : only - of - type { color : plum ;

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 39 4 41 42

236

www.k19.com.br

237
43 44 45 46 47 48 49 5 51 52 53 54 55 56 57 58 59 6 61 62 63 64 65 66 67 68 69 7 71 72 73 74 75 76 77 78 79 8 81 82 83 84 85 86 87 88 89 9 91 92 93 94 95 } : empty { height : 2 px ; border : 4 px dashed black ; } a : link { color : springgreen ; font - weight : bold ; } a : visited { color : # ccc ; } a : active { color : orange ; } a : hover { color : fuchsia ; } input : focus { background - color : red ; color : white ; } : target { border : 4 px solid magenta ; color : purple ; } : lang ( en ) { color : red ; } : enabled { outline : 4 px solid red ; } : disabled { outline : 4 px solid blue ; } : checked { outline : 4 px solid green ; } : not ( ul ) > li { padding - left : 1 }

CSS

px ;

Cdigo 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 endereo:


http://localhost/css/public_html/seletores-de-pseudo-classes.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/css/public_html/seletores-de-pseudo-classes.html.

www.facebook.com/k19treinamentos

237

CSS
63

238

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 >
Cdigo 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.


p : first - line { background - color : yellow ; } p : first - letter { font - size : 5 px ; } h1 : before { content : ~ ; color : red ; } h1 : after { content : ~ ; color : red ; }
Cdigo CSS 3.49: seletores-de-pseudo-elementos.css

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-fixacao64.zip

65

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/seletores-de-pseudo-elementos.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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 denimos as regras CSS dos nossos documentos, tambm podemos determinar para quais tipos de mdia essas regras sero vlidas, ou seja, podemos decidir quais regras sero aplicadas quando o documento for apresentado em uma tela, no papel ou narrado por um sintetizador de voz, por exemplo. Podemos informar o tipo de mdia de duas formas: com o atributo media do elemento link ou com a regra media do CSS.
1 < link rel = " stylesheet " type = " text / css " href = " aquivo . css " media = " screen " >

1 @media screen { 2 body { 3 background - color : black ; 4 } 5 6 ... 7 }

A linguagem CSS dene os seguintes tipos de mdia.


Media Type all braille embossed handheld print projection screen speech tty tv Descrio Todos os tipos de mdia. Dispositivos em braille com resposta a toques. Impressoras em braille. Dispositivos portteis (exceto smartphones mais modernos). Impressoras convencionais. Projetores. Tela de computadores, smartphones ou algum dispositivo do gnero. Sintetizadores de voz. Dispositivos de grades com caracteres de tamanho xo (teletypes, terminal ou dispositivos com limitaes de exibio). Televisores.

Podemos denir as mesmas regras CSS para diversos tipos de mdia. Para isso devemos separar esses tipos por vrgula.
1 < link rel = " stylesheet " type = " text / css " href = " aquivo . css " media = " screen , print " >

1 @media screen , print { 2 body { 3 background - color : black ; 4 } 5 6 ... 7 }

Media Groups
Algumas propriedades no so aplicveis a determinados tipos de mdia. Por exemplo, a propriedade width no pode ser aplicada mdia speech. Por outro lado, algumas propriedades podem ser aplicadas diversas mdias. Por exemplo, a propriedade position pode ser aplicada s mdias screen, projection, handheld, print, tty e tv.
www.facebook.com/k19treinamentos

239

CSS

240

Para identicar, mais facilmente, quais propriedades podem ser aplicadas a um determinado tipo de mdia, a especicao da linguagem CSS divide em grupos os diversos tipos de mdia. Conra na tabela a seguir a relao entre os tipos de mdia e os grupos de mdia:
Media Type
continuous e paged braille embossed handheld print projection screen speech tty tv continuous paged ambos paged paged continuous continuous continuous ambos tactile tactile visual, audio, speech visual visual visual, audio speech visual visual, audio

Media Groups
visual, audio, speech e tactile grid e bitmap grid grid ambos bitmap bitmap bitmap nenhum grid bitmap interactive e static ambos static ambos static interactive ambos ambos ambos ambos

Propriedades especcas
Os tipos de mdia do CSS permitem denir diferentes regras para cada tipo de mdia. Entretanto, eventualmente necessrio denir regras CSS de acordo com caractersticas mais especcas dos dispositivo de sada. Para isso, devemos utilizar as chamadas media queries. Veja o seguinte exemplo.
1 @media screen and ( min - width : 5 2 ... 3 } px ) {

No exemplo acima, as regras CSS sero aplicadas caso o tipo de mdia utilizado seja screen e a rea de renderizao do documento (viewport) tenha, no mnimo, 500 pixels de largura. Como vimos as media queries tambm podem ser denidas atravs do atributo media do elemento link.
1 < link 2 rel = " stylesheet " 3 type = " text / css " 4 href = " arquivo . css " 5 media = " screen and ( min - width : 5

px ) " / >

No exemplo abaixo, o cdigo dentro da regra media ser aplicado quando a largura do viewport for pelo menos 500 pixels ou quando a orientao for portrait.
1 @media ( min - width : 5 2 ... 3 } px ) , ( orientation : portrait ) {

Eventualmente, uma media query pode no fazer sentido. Considere o seguinte exemplo.
1 @media speech and ( min - width : 5 2 ... 3 } px ) {

240

www.k19.com.br

241

CSS

No exemplo acima, a media query contraditria, pois o tipo de mdia speech no compatvel com a propriedade min-width. Dessa forma, o cdigo CSS denido dentro da regra media nunca ser processado. Veja a seguir algumas propriedades que podemos utilizar nas media queries
Propriedade
width height device-width device-height orientation

Descrio
Determina qual deve ser a largura do viewport no dispositivo de sada. Determina qual deve ser a altura do viewport no dispositivo de sada. Determina qual deve ser a largura da tela do dispositivo de sada. Determina qual deve ser a altura da tela do dispositivo de sada. Verica se o viewport est na orientao portrait (retrato) ou landscape (paisagem).

Valor
Medidas Medidas Medidas Medidas portrait ou landscape inteiro/inteiro inteiro dpi

Media Type
visual e tactile visual e tactile visual e tactile visual e tactile bitmap

min e max?
sim sim sim sim no

aspect-ratio color-index resolution

Determina a razo entre as propriedades width e height. Determina o nmero de cores do dispositivo de sada. Determina a resoluo do dispositivo de sada.

bitmap visual bitmap

sim sim sim

Exerccios de Fixao

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 >
Cdigo 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 font - size : 5 px ;

www.facebook.com/k19treinamentos

241

CSS
4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 } } @media screen { p { color : red ; } } @media print { p { color : blue ; } } @media handheld , screen and ( max - device - width :48 px ) { p { color : green ; } }
Cdigo CSS 3.55: media-types.css

242

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-fixacao67.zip

68

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/media-types.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/css/public_html/media-types.html.

Sprites
Normalmente, uma pgina web formada por diversas imagens pequenas ou mdias. Se essas imagens forem adicionadas com o elemento img, o navegador realizar uma requisio HTTP para cada imagem. Consequentemente, o tempo de carregamento da pgina ser alto devido a quantidade de requisies e ao overhead dos pacotes HTTP.

Analogia
Adicionar individualmente imagens pequenas ou mdias em uma pgina web como ter quer comprar diversos itens pequenos ou mdios no supermercado e fazer uma viagem para trazer cada um deles.
M A D K P B 0O K X E 8 T 80 E 1 B Y K 19

Uma tcnica amplamente utilizada para melhorar o tempo de carregamento das pginas web denominada sprite. Essa tcnica consiste em agrupar todas as imagens pequenas e mdias em uma nica imagem grande e depois recort-la com as propriedades CSS.
242
www.k19.com.br

243

CSS

cursos-icones.png

background-image: url(cursos-icones.png); background-position: 0px 0px;

background-image: url(cursos-icones.png); background-position: -100px -100px;

Exerccios de Fixao

69

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 - Orientao a Objetos em Java </ li > 11 < li class = " k12 " > K12 - Desenvolvimento Web com JSF2 e JPA2 </ li > 12 < li class = " k21 " > K21 - Persistncia com JPA2 e Hibernate </ li > 13 < li class = " k22 " > K22 - Desenvolvimento Web Avanado com JSF2 , EJB3 .1 e CDI </ li > 14 < li class = " k23 " > K23 - Integrao de Sistemas com Webservices , JMS e EJB </ li > 15 < li class = " k2 " > K2 - Formao Desenvolvedor Java Avanado </ li > 16 </ ul > 17 </ body > 18 </ html >
Cdigo 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
9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 } li . k12 : before { background - position : -44 px } li . k21 : before { background - position : -88 px } li . k22 : before { background - position : }

244

px ;

px ;

px -44 px ;

li . k23 : before { background - position : -44 px -44 px ; } li . k2 : before { background - position : -88 px -44 px ; }
Cdigo 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 endereo:


http://localhost/css/public_html/sprites.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/css/public_html/sprites.html.

Gradientes (Contedo Extra)


At a verso 2 do CSS, no era possvel denir um gradiente de cores como background de um elemento a no ser atravs de imagens estticas (jpg, gif ou png). A partir da verso 3, podemos denir um gradiente diretamente no cdigo CSS atravs das funes linear-gradient, repeating-lineargradient, radial-gradient e repeating-radial-gradient. De acordo com a especicao CSS, os gradientes so semelhantes s imagens. Eles podem ser denidos em qualquer propriedade que aceite uma imagem como valor.

Mais Sobre
At o momento do fechamento da verso atual desta apostila, o navegador Firefox s suporta as funes de gradiente nas propriedades background ou background-

image.

Gradiente linear
Para denir um gradiente linear, necessrio utilizar a funo linear-gradient.
244
www.k19.com.br

245
Definio da linha do gradiente
linear-gradient( [ <angulo> | to <lado-ou-canto>,]?

CSS
Lista de paradas de cores
<parada-de-cor> [, <parada-de-cor>]+ )

<angulo>

Representa o ngulo de inclinao do gradiente.

<lado-ou-canto>

<parada-de-cor>

Representa uma cor e a posio em que ela deve aparecer sobre a linha do gradiente.

Representa a regio do box do gradiente na qual a ltima <parada-de-cor> ser posicionada. formado pelos pares de lados left | right e/ou top | bottom, no importando a ordem em que aparecem. A primeira <parada-de-cor> ser posicionada na regio simetricamente oposta a da ltima <parada-de-cor>.

No exemplo abaixo, podemos entender melhor cada um dos parmetros:


linear-gradient(to top left, green, yellow)
top left Linha do gradiente

ltima parada de cor (ending point)

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 comea em uma posio diferente de 0%, o gradiente preenchido com a cor da primeira parada de cor do 0% at essa posio.

Gradiente linear com repetio


Para denir um gradiente linear com repetio, devemos utilizar a funo repeating-linear-gradient que recebe exatamente os mesmos parmetros da funo linear-gradient. A princpio o gradiente linear com repetio funcionar da mesma forma que o gradiente linear. Seu comportamento s ser alterado nas seguintes situaes: Se a primeira parada de cor no comear em 0%.
www.facebook.com/k19treinamentos

245

CSS

246

Se a ltima parada de cor no terminar em 100%. Se uma ou as duas situaes ocorrerem, o gradiente se repetir para completar as regies da linha do gradiente sem cores denidas. 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 denir um gradiente radial, devemos utilizar a funo radial-gradient.
Definio da forma, dimenso e posico do gradiente
radial-gradient( [ [circle || <tamanho>] [at <posio>]?, | [ellipse || [<tamanho> | <porcentagem>]{2}] [at <posio>]?, | [[circle | ellipse] || <alcance> ] [at <posio>]?, | at <posio>, ]? <parada-de-cor>, [, <parada-de-cor>]+)

Lista de paradas de cores

246

www.k19.com.br

247
<tamanho> | <porcentagem>
Representa o tamanho do raio da forma do gradiente. No caso da elipse, o tamanho pode ser dado atravs da porcentagem em relao ao tamanho do box do gradiente. Representa a posio do box do gradiente na qual a primeira <parada-de-cor> ser posicionada. Pode ser informada atravs dos pares de lados left | right e/ou top | bottom, no importando a ordem em que aparecem. Tambm pode receber o valor center, que o padro. A posio tambm pode ser informada atravs de coordenadas em relao ao canto superior esquerdo do box do gradiente.

CSS
<posio>

<parada-de-cor>

Representa uma cor e a posio em que ela deve aparecer sobre a linha do gradiente.

<alcance>

Representa a forma como o gradiente ser distribudo dentro do box do gradiente.

No exemplo abaixo, podemos entender melhor cada um dos parmetros:


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 repetio


Para denir um gradiente radial com repetio, devemos utilizar a funo repeating-radial-gradient que recebe exatamente os mesmos parmetros da funo radial-gradient. A princpio o gradiente radial com repetio funcionar da mesma forma que o gradiente radial. Seu comportamento s ser alterado nas seguintes situaes: Se a primeira parada de cor no comear em 0%. Se a ltima parada de cor no terminar em 100%. Se uma ou as duas situaes ocorrerem, o gradiente se repetir para completar as regies da linha do gradiente sem cores denidas. Conra o exemplo:

radial-gradient(black 0%, white 25%)

www.facebook.com/k19treinamentos

247

CSS

248

repeating-radial-gradient(black 0%, white 25%)

Herana (Contedo Extra)


Herana em CSS o mecanismo pelo qual os valores de algumas propriedades so passadas de um elemento pai para um elemento lho. Os valores de algumas propriedades so herdados automaticamente enquanto outros no. Alm disso, existem propriedades que no podem assumir o valor proveniente da mesma propriedade do elemento pai. Uma propriedade herda o valor do elemento pai quando atribumos o valor inherit ela. Considere os seguintes cdigos:
1 < div > 2 <p > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ p > 3 </ div >

1 div { 2 color : red ; 3 }

No exemplo acima, a propriedade color foi denida apenas para o elemento div. No elemento p, essa propriedade assumir o valor padro que inherit, ou seja, ser herdado automaticamente do elemento pai. Como consequncia a cor do texto do pargrafo ser vermelha. Agora, considere este outro exemplo:
1 < div > 2 <p > Lorem ipsum dolor sit amet , consectetur adipiscing elit . </ p > 3 </ div >

1 div { 2 border : 1 px solid red ; 3 }

O elemento div ter borda de 1 pixel com cor vermelha. Diferentemente do exemplo anterior, o pargrafo no herdar o valor para a propriedade border, pois ela no possui o valor inherit como padro. Se quisssemos que o elemento p herdasse o valor da propriedade border, deveramos denir as seguintes regras CSS:
1 2 3 4 5 6 7 div { border : 1 px solid red ; } p { border : inherit ; }

248

www.k19.com.br

249

CSS

box-sizing (Contedo Extra)


De acordo com o box model, devemos levar em considerao as margens internas, bordas e as propriedades width e height de um elemento para determinarmos as suas dimenses. No comeo, isso pode no parecer muito natural, pois tendemos a imaginar a largura e altura nal do elemento como sendo as medidas atribudas somente s propriedades width e height, respectivamente. Isso acaba gerando uma grande confuso, principalmente para quem est comeando a aprender CSS. Atravs da propriedade box-sizing podemos decidir como as propriedades width e height se comportaro. Conra na tabela abaixo os possveis valores da propriedade:

content-box
Comportamento padro. As propriedades width e height denem as dimenses da rea do contedo do elemento.

padding-box
As propriedades width e height denem as dimenses da rea do contedo do elemento em conjunto com as margens internas.

border-box
As propriedades width e height denem as dimenses da rea do contedo do elemento em conjunto com as margens internas e bordas.

inherit
Assume o valor da mesma propriedade no elemento HTML pai. Veja a gura abaixo para compreender melhor cada um dos valores:
box-sizing: content-box box-sizing: padding-box box-sizing: border-box

width padding border

width padding border

width padding border

Design Responsivo (Contedo 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 mveis). O nmero de usurios que acessam a Internet atravs de dispositivos mveis est cada vez maior e s tende a crescer. Portanto, os desenvolvedores web devem car cada vez mais preocupados em atender de maneira satisfatria o pblico mobile. Atender o pblico mobile de maneira satisfatria signica apresentar o contedo de uma pgina utilizando da melhor forma possvel os recursos do dispositivo. Por exemplo, uma pgina pode ter uma usabilidade muito boa quando acessada atravs de um desktop. Porm, ao acess-la atravs de um smartphone, as letras podem car muito pequenas, o contedo pode no se encaixar no tamanho da tela ou as interaes atravs do toque podem no funcionar to bem se comparadas s interaes realizadas com o mouse. Uma soluo para esse problema seria a criao de uma verso do site para cada tipo de dispositivo. Geralmente, a verso para desktop a mais completa e as demais possuem recursos reduzidos. Essa uma soluo adotada por diversos sites. Normalmente, as verses mobile so acessadas atravs de URLs especcas. Em geral, essas URLs comeam com mobile, mob ou at mesmo m (ex: http://m.kekanto.com). Entretanto, antes de adotar essa soluo devemos levantar algumas questes: Como ca a manuteno do site? Muito mais trabalhosa. Basicamente, para cada tipo de dispositivo, teramos um site diferente, ou seja, teramos que gerenciar dois ou mais sites ao invs 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). Alm disso, deveramos nos preocupar com o redirecionamento das URLs, pois seria mais apropriado que um usurio acessando o endereo www.dominio.com atravs de sua televiso fosse redirecionado para tv.dominio.com. O usurio vai car insatisfeito se ele no puder fazer tudo que ele fazia no desktop? Sim! Se a verso diferenciada for uma verso reduzida da verso desktop, ele car extremamente decepcionado. Os usurios tendem a querer ter todo o poder do desktop nos smartphones e ans. Para evitar esses e outros problemas, uma outra soluo que est ganhando cada vez mais fora parte do princpio de que a pgina deve ser a mesma. O que deve mudar a forma de apresent-la ao usurio. Essa a ideia do Design Responsivo. O design responsivo pode ser dividido em trs partes principais: layouts exveis, media queries e mdias exveis. A seguir iremos discutir sobre cada parte.

250

www.k19.com.br

251

CSS

Layouts Flexveis
A ideia por trs dos layouts exveis fazer com que os elementos de uma pgina sejam capazes de terem as suas dimenses adaptadas dinamicamente. Isso bem interessante quando queremos que o layout da pgina se adapte a diferentes tamanhos de tela ou alguns elementos sejam redimensionados aps uma interao do usurio, por exemplo. Quando criamos layouts estticos, em geral, trabalhamos com unidades de medida estticas como px, pt, in, cm e etc. Ao criarmos layouts exveis passamos a trabalhar muito mais com as unidades relativas como %, em, ex e etc. Fazemos isso para evitar que ocorram deformaes ou overow na apresentao do contedo. Para facilitar o trabalho de quem desenhar o layout de uma pgina e tambm de quem produzir o cdigo HTML e CSS, uma tcnica muito comum a de tentar visualizar a tela como um sistema de grades. Nesse sistema, cada grade deve ter as suas dimenses denidas com unidades de medida relativas. Dessa forma, se a tela do usurio for redimensionada, todo o sistema de grade ser reajustado.

Layout esttico

Layout flexvel

Media Queries
Como o objetivo do design responsivo apresentar o contedo de uma pgina de maneiras diferentes em dispositivos com tamanhos de telas diferentes, em algum momento sentiremos a necessidade de criar regras CSS para cada tamanho de tela ou para cada conjunto de tamanho de telas. Em uma situao como essa, as media queries se encaixam perfeitamente e devemos utiliz-las. Breakpoints O ponto principal da relao das media queries com o design responsivo a denio daquilo que chamamos de breakpoints (pontos de quebra). Muitos autores costumam denir esses pontos
www.facebook.com/k19treinamentos

251

CSS

252

em torno dos tamanhos dos viewports mais comuns como 320px, 480px, 768px, 1024px e assim por diante. Essa uma estratgia normalmente chamada de device-driven breakpoints, device-based breakpoints ou pontos de quebra orientados dispositivos. Evite essa tcnica, pois, como o prprio nome diz, ela faz com que as regras CSS sejam aplicadas quando uma pgina for aberta em dispositivos com tamanhos de tela esperados, ou seja, a pgina poder estar despreparada quando for aberta por um dispositivo com tela de 400px, por exemplo. Uma estratgia muito mais interessante a que chamamos de content-driven breakpoints, contentbased breakpoints ou pontos de quebra orientados ao contedo. Nessa estratgia denimos os pontos de quebra observando se o contedo da pgina se acomoda corretamente ao tamanho do viewport. Uma tcnica muito eciente comear do menor para o maior tamanho de viewport. Em geral, o menor tamanho refere-se aos dispositivos mobile e, por isso, a tcnica recebe o nome de mobile rst. Aplicar a estratgia do content-drive breakpoints juntamente com a tcnica mobile rst relativamente simples: redimensione a janela do navegador para que o viewport que com o menor tamanho esperado (mobile). Esse ser o primeiro breakpoint. Aplique as regras CSS na pgina e em seguida redimensione a janela do navegador at que o contedo no seja apresentado corretamente ou a pgina tenha o layout quebrado. Quando isso ocorrer signica que encontramos o prximo breakpoint. Nesse breakpoint, aplique as regras CSS para que a pgina volte a ser apresentada corretamente. Repita esse processo at considerar que tenha denido todos os breakpoints necessrios.

Mdias Flexveis
Para criarmos uma pgina que seja confortvel para a leitura, devemos ajustar o posicionamento e a dimenso dos elementos conforme vimos anteriormente. As imagens, players de vdeo e udio no so excees. Entretanto, quando trabalhamos com certos tipos de mdias devemos ter alguns cuidados especiais. Suponha uma imagem de 320px de largura que gostaramos de exibir em uma pgina de maneira que ela se adapte largura da tela. Conseguiramos fazer isso utilizando a propriedade width: 100%, por exemplo. Veja abaixo como caria essa pgina exibida em um smartphone e em um desktop.

Smartphone

Desktop

Na imagem acima podemos perceber que a qualidade da imagem diminuiu ao estic-la. Para evitar ou amenizar esse tipo de problema poderamos criar diversas verses da imagem, uma para
252
www.k19.com.br

253

CSS

cada breakpoint. Poderamos tambm obter uma imagem original de tamanho maior, pois, em geral, diminuir uma imagem perde menos qualidade do que esticar. Ou ainda, dependendo da imagem, poderamos utilizar uma verso vetorial da mesma. Como podemos observar, existem diversas tcnicas para resolver esse tipo de problema e, caso tenha interesse, procure por Icon Fonts, formato de imagem SVG e Compressive Images. Esses so termos muito utilizados por tcnicas de otimizao de imagens na web. No caso dos players de vdeo e udio recomendamos a leitura do artigo neste endereo: http:

//alistapart.com/article/creating-intrinsic-ratios-for-video

Exerccios Complementares

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 >
Cdigo HTML 3.38: background-color.html

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar1.zip

No projeto css, crie um arquivo CSS chamado background-color.css.


div { height : 1 px ; width : 4 px ; } # div1 { background - color : red ; } # div2 { background - color : # }

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16

ff

# div3 { background - color : rgb ( , }

, 255) ;

Cdigo CSS 3.60: background-color.css

Arquivo: https://github.com/K19/K19-Exercicios/archive/k
www.facebook.com/k19treinamentos

2-css-complementar2.zip

253

CSS
3

254

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/background-color.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/css/public_html/background-color.html.

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 >
Cdigo HTML 3.39: background-image.html

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar4.zip

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 }
Cdigo CSS 3.61: background-image.css

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar5.zip

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/background-image.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/css/public_html/background-image.html.

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
1 < div id = " div2 " > </ div > 11 < div id = " div3 " > </ div > 12 < div id = " div4 " > </ div > 13 </ body > 14 </ html >
Cdigo HTML 3.40: background-repeat.html

CSS

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar7.zip

No projeto css, crie um arquivo CSS chamado background-repeat.css.


div { height : 3 px ; width : 4 px ; border : 1 px solid black ; margin : 1 px ; } # div1 { background - image : url ( " http :// www . k19 . com . br / figs / planeta - small . png " ) ; } # div2 { background - image : url ( " http :// www . k19 . com . br / figs / planeta - small . png " ) ; background - repeat : no - repeat ; } # div3 { background - image : url ( " http :// www . k19 . com . br / figs / planeta - small . png " ) ; background - repeat : repeat - x ; } # div4 { background - image : url ( " http :// www . k19 . com . br / figs / planeta - small . png " ) ; background - repeat : repeat - y ; }
Cdigo CSS 3.62: background-repeat.css

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar8.zip

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/background-repeat.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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
1 </ body > 11 </ html >
Cdigo HTML 3.41: background-attachment.html

256

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 }
Cdigo 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 endereo:


http://localhost/css/public_html/background-attachment.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/css/public_html/background-attachment.html.

Observe o comportamento da imagem de background quando voc movimenta a barra de rolagem.

13

No projeto css, altere o arquivo CSS background-attachment.css.

1 body { 2 height : 2 px ; 3 background - image : url ( " http :// www . k19 . com . br / figs / fundo . jpg " ) ; 4 background - attachment : fixed ; 5 }
Cdigo CSS 3.64: background-attachment.css

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar13.zip

14

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/background-attachment.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/css/public_html/background-attachment.html.

Observe o comportamento da imagem de background quando voc movimenta a barra de rolagem.

15

No projeto css, crie um arquivo chamado background-position.html.


www.k19.com.br

256

257
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 >
Cdigo HTML 3.42: background-position.html

CSS

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 }
Cdigo 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 endereo:


http://localhost/css/public_html/background-position.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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 >
Cdigo 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
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 div { width : 4 px ; height : 5 px ; margin : 1 px ; padding : 5 px ; border : 1 px dotted black ; background - color : yellow ; } # div1 { background - clip : border - box ; } # div2 { background - clip : padding - box ; } # div3 { background - clip : content - box ; }
Cdigo CSS 3.66: background-clip.css

258

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar19.zip

20

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/background-clip.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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 >
Cdigo 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
6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 border : 1 px dotted black ; background - repeat : no - repeat ; background - image : url ( " http :// www . k19 . com . br / figs / planeta - small . png " ) ; } # div1 { background - origin : border - box ; } # div2 { background - origin : padding - box ; } # div3 { background - origin : content - box ; }
Cdigo CSS 3.67: background-origin.css

CSS

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar22.zip

23

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/background-origin.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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 >
Cdigo 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 width : 4 px ; 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
11 12 13 14 15 16 17 18 19 2 21 # div1 { background - size : 5 px auto ; } # div2 { background - size : cover ; } # div3 { background - size : contain ; }
Cdigo CSS 3.68: background-size.css

260

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar25.zip

26

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/background-size.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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 >
Cdigo 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.


# p1 { color : red ; } # p2 { color : # }

1 2 3 4 5 6 7 8 9 1 11

ff

# p3 { color : rgb ( , }

, 255) ;

Cdigo 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 endereo:


http://localhost/css/public_html/color.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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 >
Cdigo 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
5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2

262

# p1 { text - align : left ; } # p2 { text - align : center ; } # p3 { text - align : right ; } # p4 { text - align : justify ; }
Cdigo CSS 3.70: text-align.css

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar31.zip

32

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/text-align.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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 >
Cdigo 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.


p { width : 4 } px ;

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15

# p1 { text - decoration : underline ; } # p2 { text - decoration : overline ; } # p3 { text - decoration : line - through ; }
Cdigo 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 endereo:


http://localhost/css/public_html/text-decoration.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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
28 leo nunc , in ornare turpis aliquam quis . 29 </ p > 3 </ body > 31 </ html >
Cdigo HTML 3.49: text-transform.html

264

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.


p { width : 4 } px ;

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15

# p1 { text - transform : capitalize ; } # p2 { text - transform : uppercase ; } # p3 { text - transform : lowercase ; }


Cdigo CSS 3.72: text-transform.css

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar37.zip

38

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/text-transform.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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
21 leo nunc , in ornare turpis aliquam quis . 22 </ p > 23 </ body > 24 </ html >
Cdigo HTML 3.50: text-indent.html

CSS

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.


p { width : 4 } px ;

1 2 3 4 5 6 7 8 9 1 11

# p1 { text - indent : }

px ;

# p2 { text - indent : 3 px ; }
Cdigo 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 endereo:


http://localhost/css/public_html/text-indent.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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 >
Cdigo HTML 3.51: letter-spacing.html

www.facebook.com/k19treinamentos

265

CSS

266
2-css-complementar42.zip

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

43

No projeto css, crie um arquivo CSS chamado letter-spacing.css.


# p1 { letter - spacing : 2 px ; } # p2 { letter - spacing : -2 px ; } # p3 { letter - spacing : 4 px ; } # p4 { letter - spacing : 6 px ; }
Cdigo CSS 3.74: letter-spacing.css

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar43.zip

44

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/letter-spacing.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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 >
Cdigo HTML 3.52: word-spacing.html

Arquivo: https://github.com/K19/K19-Exercicios/archive/k
266

2-css-complementar45.zip

www.k19.com.br

267
46

CSS

No projeto css, crie um arquivo CSS chamado word-spacing.css.


# p1 { word - spacing : 1 px ; } # p2 { word - spacing : -5 px ; } # p3 { word - spacing : 3 px ; } # p4 { word - spacing : 5 px ; }
Cdigo CSS 3.75: word-spacing.css

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar46.zip

47

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/word-spacing.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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 >
Cdigo 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
6 # p1 { 7 word - wrap : break - word ; 8 }
Cdigo CSS 3.76: word-wrap.css

268

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar49.zip

50

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/word-wrap.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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 >
Cdigo 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.


p { width : 4 px ; border : 1 px solid black ; } # p1 { line - height : 2 px ; } # p2 { line - height : 4 px ; }

1 2 3 4 5 6 7 8 9 1 11 12

268

www.k19.com.br

269

CSS

Cdigo 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 endereo:


http://localhost/css/public_html/line-height.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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
49 5 Sed 51 dui nulla , cursus et lacinia eu , vulputate ac dolor . 52 Quisque faucibus congue congue . 53 </ p > 54 </ body > 55 </ html >
Cdigo HTML 3.55: white-space.html

270

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.


p { width : 4 px ; border : 1 px solid black ; } # p1 { white - space : nowrap ; } # p2 { white - space : pre ; } # p3 { white - space : pre - line ; } # p4 { white - space : pre - wrap ; }
Cdigo CSS 3.78: white-space.css

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar55.zip

56

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/white-space.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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
13 Lorem ipsum 14 </ p > 15 <p id = " p3 " > 16 Lorem ipsum 17 </ p > 18 <p id = " p4 " > 19 Lorem ipsum 2 </ p > 21 <p id = " p5 " > 22 Lorem ipsum 23 </ p > 24 </ body > 25 </ html > dolor sit amet , consectetur adipiscing elit .

CSS

dolor sit amet , consectetur adipiscing elit .

dolor sit amet , consectetur adipiscing elit .

dolor sit amet , consectetur adipiscing elit .

Cdigo 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.


p { font - size : xx - large ; } # p1 { text - shadow : 3 px 3 px # ff } # p2 { text - shadow : -3 px -3 px # ff } # p3 { text - shadow : }

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23

1 px # ff

# p4 { text - shadow : 1 px 1 px 1 px # ff } # p5 { text - shadow : 5 px 5 px 5 px # ff }

, -5 px -5 px 5 px #

ff ;

Cdigo 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 endereo:


http://localhost/css/public_html/text-shadow.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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
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 >
Cdigo HTML 3.57: font-family.html

272

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.


p { font - size : xx - large ; } # p1 { font - family : " Arial " ; } # p2 { font - family : " Courier " ; } # p3 { font - family : " Verdana " ; } # p4 { font - family : " serif " ; } # p5 { font - family : " cursive " ; }
Cdigo CSS 3.80: font-family.css

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar61.zip

62

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/font-family.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


272
www.k19.com.br

273
http://localhost/~<USUARIO>/css/public_html/font-family.html.

CSS

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 >
Cdigo 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.


# p1 { font - size : x - small ; } # p2 { font - size : x - large ; } # p3 { font - size : xx - large ; } # p4 { font - size : 18 px ; } # p5 { font - size : 3 px ; }
Cdigo CSS 3.81: font-size.css

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar64.zip

65

No Windows, utilize o Chrome para acessar o endereo:


www.facebook.com/k19treinamentos

273

CSS
http://localhost/css/public_html/font-size.html.

274

No Ubuntu, utilize o Chrome para acessar o endereo:


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 >
Cdigo 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.


p { font - size : xx - large ; } # p1 { font - style : italic ; } # p2 { font - style : oblique ; }
Cdigo CSS 3.82: font-style.css

1 2 3 4 5 6 7 8 9 1 11

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar67.zip

68

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/font-style.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/css/public_html/font-style.html.

274

www.k19.com.br

275
69

CSS

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 >
Cdigo 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.


p { font - size : xx - large ; } # p1 { font - variant : small - caps ; }
Cdigo CSS 3.83: font-variant.css

1 2 3 4 5 6 7

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar7 .zip

71

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/font-variant.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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
14 </ p > 15 <p id = " p3 " > 16 Lorem ipsum dolor sit amet , consectetur adipiscing elit . 17 </ p > 18 </ body > 19 </ html >
Cdigo HTML 3.61: font-weight.html

276

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.


p { font - size : xx - large ; } # p1 { font - weight : 4 } # p2 { font - weight : 7 }

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15

# p3 { font - weight : bold ; }


Cdigo 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 endereo:


http://localhost/css/public_html/font-weight.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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
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 >
Cdigo HTML 3.62: font-face.html

CSS

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.


p { font - size : xx - large ; } # p1 { font - family : " Norican " ; } # p2 { font - family : " Bad Script " ; } # p3 { font - family : " Ceviche One " ; }
Cdigo CSS 3.85: font-face.css

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar76.zip

77

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/font-face.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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 - Lgica de Programao </ 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 - Lgica de Programao </ 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
18 </ ul > 19 < ul id = " ul3 " > 2 < li > K 1 - Lgica de Programao </ li > 21 < li > K 2 - Desenvolvimento Web com HTML , 22 < li > K 3 - Modelo Relacional e SQL </ li > 23 </ ul > 24 < ol id = " ol1 " > 25 < li > K 1 - Lgica de Programao </ li > 26 < li > K 2 - Desenvolvimento Web com HTML , 27 < li > K 3 - Modelo Relacional e SQL </ li > 28 </ ol > 29 < ol id = " ol2 " > 3 < li > K 1 - Lgica de Programao </ li > 31 < li > K 2 - Desenvolvimento Web com HTML , 32 < li > K 3 - Modelo Relacional e SQL </ li > 33 </ ol > 34 < ol id = " ol3 " > 35 < li > K 1 - Lgica de Programao </ li > 36 < li > K 2 - Desenvolvimento Web com HTML , 37 < li > K 3 - Modelo Relacional e SQL </ li > 38 </ ol > 39 </ body > 4 </ html >

278

CSS e JavaScript </ li >

CSS e JavaScript </ li >

CSS e JavaScript </ li >

CSS e JavaScript </ li >

Cdigo 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.


# ul1 { list - style - type : disc ; } # ul2 { list - style - type : circle ; } # ul3 { list - style - type : square ; } # ol1 { list - style - type : decimal ; } # ol2 { list - style - type : lower - latin ; } # ol3 { list - style - type : georgian ; }
Cdigo CSS 3.86: list-style-type.css

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar79.zip

80

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/list-style-type.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


278
www.k19.com.br

279
http://localhost/~<USUARIO>/css/public_html/list-style-type.html.

CSS

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 - Lgica de Programao </ 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 - Lgica de Programao </ 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 - Lgica de Programao </ 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 >
Cdigo 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.


# ul1 { list - style - image : url ( " http :// www . k19 . com . br / figs / star . png " ) ; } # ul2 { list - style - image : url ( " http :// www . k19 . com . br / figs / cake . png " ) ; } # ul3 { list - style - image : url ( " http :// www . k19 . com . br / figs / flying_heart . png " ) ; }
Cdigo CSS 3.87: list-style-image.css

1 2 3 4 5 6 7 8 9 1 11

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar82.zip

83

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/list-style-image.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/css/public_html/list-style-image.html.

www.facebook.com/k19treinamentos

279

CSS
84

280

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 - Lgica de Programao </ 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 - Lgica de Programao </ 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 >
Cdigo 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.


li { border : 1 px solid black ; } # ul1 { list - style - position : inside ; }
Cdigo CSS 3.88: list-style-position.css

1 2 3 4 5 6 7

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar85.zip

86

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/list-style-position.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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
1 < div id = " div2 " > </ div > 11 < div id = " div3 " > </ div > 12 < div id = " div4 " > </ div > 13 </ body > 14 </ html >
Cdigo HTML 3.66: border-style.html

CSS

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.


div { width : 4 px ; height : 2 px ; margin : 1 px ; border - width : 6 px ; } # div1 { border - style : dotted ; } # div2 { border - style : dashed ; } # div3 { border - style : solid ; } # div4 { border - style : double ; }
Cdigo CSS 3.89: border-style.css

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar88.zip

89

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/border-style.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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
13 </ body > 14 </ html >
Cdigo HTML 3.67: border-width.html

282

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.


div { width : 4 px ; height : 2 px ; margin : 1 px ; border - style : solid ; } # div1 { border - width : thin ; } # div2 { border - width : thick ; } # div3 { border - width : 2 px ; } # div4 { border - width : 1 px ; }
Cdigo CSS 3.90: border-width.css

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar91.zip

92

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/border-width.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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 >
Cdigo 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.


div { width : 4 px ; height : 2 px ; border - style : solid ; } # div1 { border - color : red ; } # div2 { border - color : # }

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17

ff

# div3 { border - color : rgb ( , }

, 255) ;

Cdigo 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 endereo:


http://localhost/css/public_html/border-color.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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 >
Cdigo 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 width : 4 px ; 3 height : 2 px ; 4

www.facebook.com/k19treinamentos

283

CSS
5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 } border - top - style : dashed ; border - top - color : red ; border - top - width : 2 px ; border - right - style : dotted ; border - right - color : # ff ; border - right - width : 8 px ; border - bottom - style : double ; border - bottom - color : rgb ( , , 255) ; border - bottom - width : 14 px ; border - left - style : solid ; border - left - color : black ; border - left - width : 2 px ;

284

Cdigo 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 endereo:


http://localhost/css/public_html/bordas-individuais.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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 >
Cdigo 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
1 11 12 13 14 15 16 17 18 19 2 21 22 } # div2 { border - radius : 2 px 6 px ; } # div3 { border - radius : 2 px 6 px 1 } # div4 { border - radius : 2 px 6 px 1 }

CSS

px ;

px 14 px ;

Cdigo 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 endereo:


http://localhost/css/public_html/border-radius.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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 >
Cdigo HTML 3.71: border-collapse.html

Arquivo: https://github.com/K19/K19-Exercicios/archive/k
www.facebook.com/k19treinamentos

2-css-complementar1 2.zip

285

CSS
103

286

No projeto css, crie um arquivo CSS chamado border-collapse.css.


table { border : 2 px solid black ; margin : 1 px ; } td { border : 2 px solid black ; } # tabela1 { border - collapse : collapse ; }
Cdigo CSS 3.94: border-collapse.css

1 2 3 4 5 6 7 8 9 1 11 12

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar1 3.zip

104

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/border-collapse.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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 >
Cdigo 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.


table { border : 2 px solid black ; margin : 1 px ; } td { border : 2 px solid black ; } # tabela1 { border - spacing : 1 px 5 px ; }
Cdigo CSS 3.95: border-spacing.css

1 2 3 4 5 6 7 8 9 1 11 12

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar1 6.zip

107

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/border-spacing.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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 >
Cdigo 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 width : 4 px ; 3 height : 1 px ; 4 margin : 1 px ; 5 } 6 7 # div1 {

www.facebook.com/k19treinamentos

287

CSS
8 9 1 11 12 13 14 15 16 17 outline - style : dashed ; } # div2 { outline - style : dotted ; } # div3 { outline - style : solid ; }
Cdigo CSS 3.96: outline-style.css

288

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar1 9.zip

110

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/outline-style.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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 >
Cdigo 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.


div { width : 4 px ; height : 1 px ; margin : 1 px ; outline - style : solid ; } # div1 { outline - color : red ; } # div2 { outline - color : # } # div3 {

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16

ff

288

www.k19.com.br

289
17 outline - color : rgb ( , 18 } , 255) ;

CSS

Cdigo 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 endereo:


http://localhost/css/public_html/outline-color.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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 >
Cdigo 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.


div { width : 4 px ; height : 1 px ; margin : 2 px ; outline - style : solid ; } # div1 { outline - width : thin ; } # div2 { outline - width : thick ; } # div3 { outline - width : 2 px ; }
Cdigo CSS 3.98: outline-width.css

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18

Arquivo: https://github.com/K19/K19-Exercicios/archive/k
www.facebook.com/k19treinamentos

2-css-complementar115.zip

289

CSS
116

290

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/outline-width.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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 >
Cdigo 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.


div { width : 4 px ; height : 5 px ; margin : 5 px ; outline : 5 px solid red ; border : 5 px solid black ; } # div1 { outline - offset : 2 px ; } # div2 { outline - offset : -2 px ; }
Cdigo CSS 3.99: outline-offset.css

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar118.zip

119

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/outline-offset.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/css/public_html/outline-offset.html.

290

www.k19.com.br

291
120

CSS

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 >
Cdigo 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.


div { width : 2 px ; height : 1 px ; border : 4 px solid black ; margin : 5 px ; } # div1 { box - shadow : 1 px 5 px gray ; } # div2 { box - shadow : 1 px 5 px 5 px gray ; } # div3 { box - shadow : inset 1 px 1 px gray ; } # div4 { box - shadow : inset 1 px 1 px 5 px gray ; }
Cdigo CSS 3.100: box-shadow.css

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar121.zip

122

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/box-shadow.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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
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 >
Cdigo HTML 3.78: margens-externas.html

292

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.


div { display : inline - block ; border : 1 px solid black ; width : 1 px ; height : 1 px ; } # div1 { margin - top : 5 px ; margin - right : 5 px ; } # div2 { margin - bottom : 5 px ; } # div3 { margin - left : 5 px ; } # div4 { margin - left : 5 px ; margin - bottom : 5 px ; }
Cdigo CSS 3.101: margens-externas.css

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar124.zip

125

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/margens-externas.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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
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 >
Cdigo HTML 3.79: margens-internas.html

CSS

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.


div { display : inline - block ; border : 2 px solid black ; width : 1 px ; height : 1 px ; background - color : yellow ; background - clip : content - box ; } # div1 { padding - top : 5 px ; padding - right : 5 px ; } # div2 { padding - bottom : 5 px ; } # div3 { padding - left : 5 px ; } # div4 { padding - left : 5 px ; padding - bottom : 5 px ; }
Cdigo CSS 3.102: margens-internas.css

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-css-complementar127.zip

128

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/css/public_html/margens-internas.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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
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 >
Cdigo HTML 3.80: conteudo-dimensao.html

294

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.


p { border : 1 px solid black ; max - height : 2 px ; max - width : 4 px ; } # p1 { width : 2 }

1 2 3 4 5 6 7 8 9 1 11 12 13

px ;

# p2 { height : 13 px ; }
Cdigo 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 endereo:


http://localhost/css/public_html/conteudo-dimensao.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


294
www.k19.com.br

295
http://localhost/~<USUARIO>/css/public_html/conteudo-dimensao.html.

CSS

Resumo do Captulo

A linguagem CSS utilizada para formatar visualmente as pginas web.

Podemos considerar cada elemento HTML como um box.

A estrutura dos boxes denida pelo Box Model.

De acordo com o Box Model, cada box possui contedo, margens internas, bordas e margens externas.

Por padro, os boxes dos block-level elements ocupam todo o espao horizontal do elemento pai e provocam quebras de linha.

Por padro, os boxes dos inline-level elements ocupam apenas o espao necessrio e no provocam quebras de linha.

A formatao dos elementos HTML denida atravs das regras CSS

Uma regra CSS composta por seletor e corpo. No corpo, so denidas as propriedades CSS.

Os seletores denem quais elementos HTML sero afetados pelas regras CSS.

10

As propriedades CSS denem as caractersticas visuais dos elementos HTML.

As regras CSS podem ser aplicadas aos documentos HTML de trs formas diferentes: inline style, internal style sheet e external style sheet.

11

12

Os comentrios CSS so denidos com os marcadores /* e */.

Na linguagem CSS, toda cor est associada a um cdigo numrico expresso em hexadecimal. Algumas cores possuem nome.

13

www.facebook.com/k19treinamentos

295

CSS
14

296

Podemos escolher uma cor atravs do cdigo dela ou atravs das funes rgb(), rgba(), hsl() e hsla(). As cores que possuem nome podem ser escolhidas atravs do seu nome.

15

As unidades absolutas da linguagem CSS so: cm, mm, in, pt, pc e px.

16

As unidades relativas da linguagem CSS so: em, ex, ch, rem, vw, vh, vmin e vmax.

As principais propriedades de background so: background-color, background-image, backgroundrepeat, background-attachment, background-position, background-clip, background-origin, backgroundsize e background.

17

As principais propriedades de texto so: color, text-align, text-decoration, text-transform, text-indent, letter-spacing, word-spacing, word-wrap, line-height, white-space e text-shadown.

18

As principais propriedades de fonte so: font-family, font-size, font-style, font-variant, fontweight, font e @font-face.

19

As principais propriedades de lista so: list-style-type, list-style-image, list-style-position e list-style.

20

As principais propriedades de borda so: border-style, border-width, border-color, border, border-left-*, border-top-*, border-right-*, border-bottom-*, border-radius, border-*-*-radius, bordercollapse e border-spacing.

21

As principais propriedades de outline so: outline-style, outline-color, outline-width, outlineoffset e outline.

22

23

A principal propriedade de sombra box-shadow.

24

As principais propriedades de margens so: margin-*, margin, padding-* e padding.

As principais propriedades de altura e largura so: height, width, min-height, max-height, min-width e max-width.

25

26

A propriedade display dene a forma de exibio dos boxes.

27

A propriedade display dene a forma de exibio dos boxes.

296

www.k19.com.br

297
28

CSS

A propriedade visibility dene a visibilidade dos boxes.

29

Podemos controlar a opacidade dos boxes com a propriedade opacity.

30

Os quatro tipos de posicionamento do CSS so: static, relative, xed e absolute.

31

As principais propriedades de posicionamento so: position, oat, clear e z-index.

32

As principais propriedades de overow e clips so: overow, overow-x, overow-y e clip.

33

As principais funes de transformao so: translate(), scale(), rotate() e skew().

As principais propriedades de transio so: transition-duration, transition-delay, transitiontiming-function e transition-property.

34

As principais propriedades de animao so: animation-timing-function, animation-delay, animation-iteration-count, animation-direction e animation-play-state.

35

Podemos dividir os seletores do CSS em bsicos, seletores de atributo, pseudo-classes e pseudoelementos.

36

Quando ocorre conito entre duas ou mais regras CSS, devemos calcular a prioridade dos seletores dessas regras para saber qual delas ser aplicada.

37

Com as media queries podemos denir formataes especcas para os diversos tipos de dispositivos que desejamos suportar.

38

39

A tcnica sprites melhora o tempo de carregamento das pginas web.

Prova

Considere a formatao padro dos navegadores. O que podemos dizer sobre um block-level element?
1

a) Ocupa metade do espao horizontal e no provoca quebras de linha. b) Ocupa horizontalmente somente o espao necessrio para o seu contedo e no provocam
www.facebook.com/k19treinamentos

297

CSS

298

quebras de linha. c) Ocupa todo o espao vertical e provoca quebras de linha. d) Ocupa horizontalmente somente o espao necessrio para o seu contedo e provocam quebras de linha. e) Ocupa todo o espao horizontal e provoca quebras de linha.

2 Considere a formatao padro dos navegadores. O que podemos dizer sobre um inline-level element?

a) Ocupa metade do espao horizontal e no provoca quebras de linha. b) Ocupa horizontalmente somente o espao necessrio para o seu contedo e no provocam quebras de linha. c) Ocupa todo o espao vertical e provoca quebras de linha. d) Ocupa horizontalmente somente o espao necessrio para o seu contedo e provocam quebras de linha. e) Ocupa todo o espao horizontal e provoca quebras de linha.

Como podemos aplicar um cdigo CSS a um documento HTML? a) Atravs do elemento link da seguinte forma:

1 < link rel = " stylesheet " type = " text / css " src = " estilo . css " > </ link >.

b) Atravs do elemento css da seguinte forma:


1 < css >p { font - size : 12 px } </ css >

c) Atravs do elemento style da seguinte forma:


1 < style rel = " stylesheet " type = " text / css " src = " estilo . css " > </ style >

d) Atravs do elemento link da seguinte forma:


1 < link rel = " stylesheet " type = " text / css " href = " estilo . css " > </ link >

e) Atravs do elemento stylesheet da seguinte forma:


1 < stylesheet src = " estilo . css " > </ stylesheet >

Qual das alternativas um valor invlido de cor CSS?


www.k19.com.br

298

299

CSS

a) red b) #00ff00 c) preto d) rgba(0, 100, 30, 0.1) e) hsl(100, 20%, 10%)

Qual das alternativas uma unidade invlida de medida CSS? a) px b) em c) rem d) qm e) pc

Qual das propriedades abaixo pode ser utilizada para denir uma imagem de fundo de um elemento?
6

a) background-attachment b) background c) bg-color d) background-size e) bg-image

Para denirmos 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

Considere o seguinte cdigo HTML:


www.facebook.com/k19treinamentos

299

CSS
1 2 3 4 5 6 < div > Lorem ipsum dolor sit amet , consectetur adipiscing elit .

300

Cras vehicula bibendum arcu . Sed dui nulla , cursus et lacinia eu , vulputate ac dolor . Quisque faucibus congue congue . </ div >

O que acontecer quando esse cdigo for renderizado em um navegador?

a) Todas as sequncias de espaos sero tratadas como um nico espao e as quebras de linha sero respeitadas. b) Todas as sequncias de espaos sero respeitadas e as quebras de linha sero ignoradas. c) Todas as sequncias de espaos sero respeitadas e as quebras de linha sero tratadas como um espao. d) Todas as sequncias de espaos sero tratadas como um nico espao e as quebras de linha sero ignoradas. e) Todas as sequncias de espaos sero tratadas como um nico espao e as quebras de linha sero tratadas como um espao.

9 Para alterar o comportamento padro com relao ao tratamento dos espaos e quebras de linha, devemos utilizar qual propriedade CSS?

a) white-space b) word-spacing c) word-wrap d) line-height e) white-spacing

Podemos alterar a fonte de um texto atravs da propriedade CSS font-family. Quais valores podem ser atribudos a essa propriedade?
10

a) O nome de uma fonte. b) O nome de um grupo de fonte classicado pela espessura das fontes. c) O nome de uma famlia de fonte. d) O nome de uma fonte ou o nome de uma famlia de fonte. e) O nome de um grupo de fonte classicado pelo tamanho das fontes.

300

www.k19.com.br

301
11

CSS

Considere um elemento com as seguintes propriedades CSS:


width : 1 px ; border : 1 px solid black ; margin : 1 px ; padding : 1 px ;

1 2 3 4

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.

Qual a diferena entre uma borda produzida pela propriedade outline e outra produzida pela propriedade border?
12

a) Nenhuma diferena. b) A borda produzida pela propriedade border mais grossa. c) A borda produzida pela propriedade outline no pode ter sua cor alterada. d) A borda produzida pela propriedade outline no afeta as dimenses do box do elemento. e) A borda produzida pela propriedade border no funciona em todos os navegadores.

Podemos utilizar a propriedade display com valor none ou a propriedade visibility com valor hidden para fazer com que um elemento no aparea em uma pgina HTML. Qual a diferena entre as duas abordagens?
13

a) Nenhuma diferena. b) O espao do box de um elemento com propriedade display igual a none permanece inalterado. c) O espao do box de um elemento com propriedade visibility igual a hidden deixa de existir. d) O espao do box de um elemento com propriedade display igual a none deixa de existir. e) Se o valor none for atribudo a propriedade display, ela no poder mudar mais de valor.

14

Considere um elemento com as seguintes propriedades CSS:


www.facebook.com/k19treinamentos

301

CSS
1 position : absolute ; 2 top : px ; 3 left : px ;

302

O que podemos dizer sobre esse elemento?

a) Ser posicionado a 0px do topo e 0px da esquerda da pgina. 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 condio, ele ser posicionado a 0px do topo e 0px da esquerda da pgina.

15

Considere o seguinte cdigo:

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 contedo do elemento div?

a) O trecho do contedo que ultrapassar na vertical e na horizontal os limites do elemento div ser exibido. b) O trecho do contedo que ultrapassar na vertical os limites do elemento div ser exibido. c) O trecho do contedo que ultrapassar na vertical e na horizontal os limites do elemento div no ser exibido. d) O trecho do contedo que ultrapassar na horizontal os limites do elemento div ser exibido.

16

Considere o seguinte cdigo:

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

CSS

Considere tambm que o seguinte cdigo CSS foi aplicado ao documento:


1 # div1 > p + div p . class1 { 2 color : red ; 3 }

Quem car 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 cdigo:

1 @media all and ( width : 48 px ) , ( orientation : portrait ) { 2 ... 3 }

O que podemos dizer sobre as regras CSS denidas dentro da media query acima? a) Sero aplicadas quando o viewport tiver 480px e a altura do viewport for maior que a sua largura. b) Sero aplicadas apenas quando a largura do viewport for maior que a sua altura. c) Sero aplicadas apenas quando o viewport tiver 480px de largura. d) Sero aplicadas quando o viewport tiver 480px ou a altura do viewport for maior que a sua largura. e) Sero aplicadas apenas quando o viewport tiver 480px de altura. div.

Minha Pontuao

Pontuao Mnima:

13

Pontuao Mxima:

17

www.facebook.com/k19treinamentos

303

CSS

304

304

www.k19.com.br

CAPTULO
Cdigo Javascript 4.1: script.js

J AVA S CRIPT

Nos captulos anteriores, vimos que as linguagens HTML e a CSS so fundamentais para a criao de pginas web. O foco do HTML o contedo enquanto o foco do CSS a formatao dessas pginas. As linguagens HTML e CSS no so linguagens de programao. Para resolver determinados problemas, necessrio utilizar uma linguagem de programao. Por isso, veremos nesse captulo, a linguagem de programao JavaScript. Com a linguagem JavaScript podemos construir pginas extremamente dinmicas e interativas. O foco do JavaScript implementar o comportamento ou a inteligncia das pginas web.

Aplicando JavaScript ao HTML


H duas formas de associar cdigo JavaScript e documentos HTML.

JavaScript interno
O cdigo JavaScript pode ser denido dentro de um documento HTML no corpo do elemento script.
1 < script > 2 alert ( " K19 " ) ; 3 </ script >

Nessa abordagem, o cdigo JavaScript ca amarrado a um nico documento HTML.

JavaScript externo
O cdigo JavaScript pode ser denido em arquivos separados e depois associados aos documentos HTML atravs do elemento script.
1 alert ( " K19 " ) ;

1 < script src = " script . js " > </ script >

Nessa outra abordagem, podemos reutilizar o mesmo cdigo JavaScript em vrios documentos HTML.

Carregamento
www.facebook.com/k19treinamentos

305

J AVA S CRIPT

306

Como vimos, o elemento script permite associar cdigo JavaScript aos documentos HTML. Esse elemento pode ser adicionado dentro do corpo dos elementos head e body. A localizao do elemento script afeta o momento no qual o cdigo JavaScript ser carregado pelos navegadores. No exemplo a seguir, o elemento script foi colocado dentro do corpo do head. Dessa forma, o cdigo JavaScript ser carregado antes do body ser processado. Consequentemente, a pgina s ser exibida depois do carregamento do JavaScript.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Desenvolvimento Web </ title > 6 < script src = " script . js " > </ script > 7 </ head > 8 < body > 9 ... 1 </ body > 11 </ html >

No prximo exemplo, o elemento script foi colocado no nal 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 pginas web so exibidas mais rapidamente aos usurios. Contudo, eventualmente, o cdigo JavaScript deve ser utilizado antes do processamento dos elementos do body. Nesses casos, necessrio utilizar a primeira abordagem.

Chrome DevTools
Os navegadores oferecem alguns recursos para testar ou depurar cdigo JavaScript. Nas imagens abaixo, mostramos a utilizao do painel Console do Chrome DevTools.

306

www.k19.com.br

307

J AVA S CRIPT

www.facebook.com/k19treinamentos

307

J AVA S CRIPT

308

Exerccios de Fixao

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 necessrio instalar o IIS conforme vimos anteriormente.

308

www.k19.com.br

309

J AVA S CRIPT

Importante No Ubuntu, utilizando o Apache HTTP Server como Web Server, voc deve salvar o projeto javascript em /home/<USUARIO>/public_html. Lembre-se que necessrio
instalar e congurar 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
310

2-javascript-fixacao1.zip

www.k19.com.br

311
2

J AVA S CRIPT

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 >
Cdigo HTML 4.5: javascript.html

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao2.zip

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/javascript/public_html/javascript.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/javascript.html.

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 >
Cdigo HTML 4.6: javascript.html

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao4.zip

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/javascript/public_html/javascript.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/javascript.html.

No projeto javascript, crie um arquivo chamado script.js.


www.facebook.com/k19treinamentos

311

J AVA S CRIPT
1 alert ( " K19 " ) ;
Cdigo Javascript 4.2: script.js

312

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao6.zip

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 >
Cdigo HTML 4.7: javascript.html

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao7.zip

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/javascript/public_html/javascript.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/javascript.html.

Variveis
Assim como qualquer linguagem de programao, JavaScript permite a criao de variveis atravs da palavra chave var. Toda varivel deve ter um nome (identicador).
1 2 3 4 var var var var idadeDoJonas = 3 ; precoDoProduto = 28.75; nomeDoInstrutor = " Marcelo Martins " ; acessoLiberado = true ;

No exemplo anterior, todas as variveis foram inicializadas. Antes da inicializao, as variveis possuem o valor especial undened. No prximo exemplo, a varivel altura no inicializada. Portanto, ela possura o valor undened.
1 var altura ;

Operadores
312
www.k19.com.br

313

J AVA S CRIPT

Para manipular os valores das variveis de um programa, devemos utilizar os operadores oferecidos pela linguagem de programao adotada. A linguagem JavaScript possui diversos operadores e os principais so categorizados da seguinte forma: Aritmtico: Atribuio: Relacional: Lgico: && + = == || += != * / -= < % *= <= /= > %= >= ++ --

Aritmticos
Os operadores aritmticos funcionam de forma muito semelhante aos operadores da matemtica. Os operadores aritmticos so: Adio + Subtrao Multiplicao * Diviso / Mdulo %
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 var umMaisUm = 1 + 1; // umMaisUm = 2 var tresVezesDois = 3 * 2; // tresVezesDois = 6 var quatroDivididoPorDois = 4 / 2; // quatroDivididoPor2 = 2 var seisModuloCinco = 6 % 5; // seisModuloCinco = 1 var x = 7; x = x + 1 * 2; // x = 9 x = x - 3; // x = 6 x = x / (6 - 2 - (3 * 5) / (16 - 1) ) ; // x = 2
Cdigo Javascript 4.5: Exemplo de uso dos operadores aritmticos

Importante
O mdulo de um nmero x , na matemtica, o valor numrico de x desconsiderando o seu sinal (valor absoluto). Na matemtica expressamos o mdulo da seguinte forma: | 2| = 2. Em linguagens de programao, o mdulo de um nmero o resto da diviso desse nmero por outro. No exemplo acima, o resto da diviso de 6 por 5 igual a 1. Alm disso, lemos a expresso 6%5 da seguinte forma: seis mdulo cinco.

www.facebook.com/k19treinamentos

313

J AVA S CRIPT

314

Importante
As operaes aritmticas em JavaScript obedecem as mesmas regras da matemtica com relao precedncia dos operadores e parnteses. Portanto, as operaes so resolvidas a partir dos parnteses mais internos at os mais externos, primeiro resolvemos as multiplicaes, divises e os mdulos. Em seguida, resolvemos as adies e subtraes.

Mais Sobre
As operaes de potenciao e raiz quadrada podem ser realizadas atravs dos mtodos Math.pow e Math.sqrt. Veja alguns exemplos.
1 2 3 4 5 var a = Math . pow (3 , 5) ; // a = 243 var b = Math . sqrt (9) ; // b = 3
Cdigo Javascript 4.6: Potenciao e raiz quadrada

Concatenao de Strings
Como vimos anteriormente, o operador + utilizado para realizar soma aritmtica. Mas, ele tambm pode ser utilizado para concatenar strings. Veja um exemplo.
1 2 3 4 5 6 var s1 = " Marcelo " ; var s2 = " " ; var s3 = " Martins " ; // " Marcelo Martins " var s4 = s1 + s2 + s3 ;

Considere o exemplo a seguir.


1 2 3 4 5 var s1 = " Idade : " ; var idade = 3 ; // " Idade : 3 " var s2 = s1 + idade ;

Observe que o operador + foi aplicado a um valor numrico e a um texto. Nesses casos, o valor numrico , automaticamente, transformado em texto e a concatenao realizada.

Pare para pensar...


As expresses so avaliadas da esquerda para a direita. Dessa forma, considere o seguinte 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

Atribuio
Nas sees anteriores, j vimos um dos operadores de atribuio, o operador = (igual). Os operadores de atribuio so: Simples = Incremental += Decremental -= Multiplicativa *= Divisria /= Modular %= Incremento ++ Decremento -1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 var valor = 1; // valor = 1 valor += 2; // valor = 3 valor -= 1; // valor = 2 valor *= 6; // valor = 12 valor /= 3; // valor = 4 valor %= 3; // valor = 1 valor ++; // valor = 2 valor - -; // valor = 1
Cdigo Javascript 4.10: Exemplo de uso dos operadores de atribuio.

As instrues acima poderiam ser escritas de outra forma:


1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 var valor = 1; // valor = 1 valor = valor + 2; // valor = 3 valor = valor - 1; // valor = 2 valor = valor * 6; // valor = 12 valor = valor / 3; // valor = 4 valor = valor % 3; // valor = 1

www.facebook.com/k19treinamentos

315

J AVA S CRIPT
19 2 21 22 23 valor = valor + 1; // valor = 2 valor = valor - 1; // valor = 1
Cdigo Javascript 4.11: O mesmo exemplo anterior, usando os operadores aritmticos.

316

Como podemos observar, os operadores de atribuio, exceto o simples (=), reduzem a quantidade de cdigo escrito. Podemos dizer que esses operadores funcionam como atalhos para as operaes que utilizam os operadores aritmticos.

Relacionais
Muitas vezes precisamos determinar a relao entre uma varivel ou valor e outra outra varivel ou valor. Nessas situaes, utilizamos os operadores relacionais. As operaes realizadas com os operadores relacionais devolvem valores booleanos. Os operadores relacionais so: Igualdade == Diferena != Menor < Menor ou igual <= Maior > Maior ou igual >=
1 2 3 4 5 6 7 8 var var t = t = t = t = t = t = valor = 2; t = false ; ( valor == 2) ; ( valor != 2) ; ( valor < 2) ; ( valor <= 2) ; ( valor > 1) ; ( valor >= 1) ;

// // // // // //

t t t t t t

= = = = = =

true false false true true true

Cdigo Javascript 4.12: Exemplo de uso dos operadores relacionais em JavaScript.

Lgicos
A linguagem JavaScript permite vericar duas ou mais condies atravs de operadores lgicos. Os operadores lgicos devolvem valores booleanos. A seguir descreveremos o funcionamento desses operadores. && (E)
1 var a = Math . random () ; 2 var b = Math . random () ; 3 4 alert ( a > .2 && b < .8) ;
Cdigo Javascript 4.13: Exemplo de uso do operador &

A tabela verdade uma forma prtica de visualizar o resultado dos operadores lgicos. Veja a seguir a tabela verdade do operador &&.
316
www.k19.com.br

317

J AVA S CRIPT

a > 0.2 V V F F

b < 0.8 V F V F

a > 0.2 && b < 0.8 V 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) ;
Cdigo Javascript 4.14: Exemplo de uso do operador ||

A tabela verdade uma forma prtica de visualizar o resultado dos operadores lgicos. Veja a seguir a tabela verdade do operador ||.

a > 0.2 V V F F

b < 0.8 V F V F

a > 0.2 || b < 0.8 V V V F

Figura 4.5: Tabela verdade do operador ||

Operador !
Valores booleanos podem ser invertidos com o operador de ! (negao). Por exemplo, podemos vericar se uma varivel numrica armazena um valor maior do que 0.5 de duas formas diferentes.
1 d > .5

1 !( d <=

.5)

Pr e Ps Incremento ou Pr e Ps Decremento
Os operadores ++ e -- podem ser utilizados de duas formas diferentes, antes ou depois de uma varivel numrica.
1 var i = 1 ; 2 i ++;

www.facebook.com/k19treinamentos

317

J AVA S CRIPT
3 i - -;

318

1 var i = 1 ; 2 ++ i ; 3 --i ;

No primeiro exemplo, o operador ++ foi utilizado depois da varivel i. J no segundo exemplo, ele foi utilizado antes da varivel i. A primeira forma de utilizar o operador ++ chamada de ps incremento. A segunda chamada de pr incremento. Analogamente, o operador -- foi utilizado na forma de ps decremento no primeiro exemplo e pr decremento no segundo exemplo. Mas, qual a diferena entre pr incremento e ps incremento ou entre pr decremento e ps decremento? Vamos apresentar a diferena com alguns exemplos.
1 var i = 1 ; 2 3 // true 4 alert ( i ++ == 1 ) ;

Observe que o operador ++ foi utilizado nas expresses do exemplo acima em conjunto com o operador ==. Como dois operadores foram utilizados na mesma expresso, voc pode ter dvida em relao a ordem de execuo desses operadores. O incremento com o operador ++ ser realizado antes ou depois da comparao com o operador ==? Como o operador ++ foi utilizado na forma de ps incremento, a comparao ocorrer antes do incremento. Analogamente, a comparao ocorreria antes do decremento se o operador -- fosse utilizado na forma de ps decremento. Agora, considere a utilizao do operador ++ na forma de pr incremento.
1 var i = 1 ; 2 3 // false 4 alert (++ i == 1 ) ;

Nesse ltimo exemplo, a comparao com o operador == realizada depois do incremento do operador ++. Analogamente, a comparao ocorreria depois do decremento se o operador -- fosse utilizado na forma de pr decremento.

Pare para pensar...


Considere o comportamento do pr incremento, ps incremento, pr decremento e ps 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 ternrio ?:
Considere um programa que controla as notas dos alunos de uma escola. Para exemplicar, vamos gerar a nota de um aluno aleatoriamente.
1 var nota = Math . random () ;

O programa deve exibir a mensagem aprovado se nota de um aluno for maior ou igual a 0.5 e reprovado se a nota for menor do que 0.5. Esse problema pode ser resolvido com o operador ternrio.

nota >= 0.5 ? aprovado : reprovado


Condio Valor 1
Figura 4.6: Operador ternrio

Valor 2

Quando a condio(nota >= 0.5) verdadeira, o operador ternrio devolve o primeiro resultado (aprovado). Caso contrrio, devolve o segundo resultado(reprovado). Podemos guardar o resultado do operador ternrio em uma varivel ou simplesmente exibi-lo.
1 var resultado = nota >= .5 ? " aprovado " : " reprovado " ; 2 alert ( nota >= .5 ? " aprovado " : " reprovado " ) ;

Nos exemplos anteriores, o operador ternrio foi utilizado com valores do tipo string. Contudo, podemos utiliz-lo com qualquer tipo de valor. Veja o exemplo a seguir.
1 var i = nota >= 2 var d = nota >= .5 ? 1 : 2; .5 ? .1 : .2;

Controle de uxo
if e else
O comportamento de uma aplicao pode ser inuenciado por valores denidos pelos usurios. Por exemplo, considere um sistema de cadastro de produtos. Se um usurio tenta adicionar um produto com preo negativo, a aplicao no deve cadastrar esse produto. Caso contrrio, se o preo no for negativo, o cadastro pode ser realizado normalmente. Outro exemplo, quando o pagamento de um boleto realizado em uma agncia bancria, o sistema do banco deve vericar a data de vencimento do boleto para aplicar ou no uma multa por atraso. Para vericar uma determinada condio e decidir qual bloco de instrues deve ser executado, devemos aplicar o comando if.
1 if ( preco < ) { 2 alert ( O preo do produto no pode ser negativo ) ;

www.facebook.com/k19treinamentos

319

J AVA S CRIPT
3 } else { 4 alert ( Produto cadastrado com sucesso ) ; 5 }

320

O comando if permite que valores booleanos sejam testados. Se o valor passado como parmetro para o comando if for true, o bloco do if executado. Caso contrrio, o bloco do else executado. O comando else assim como o seu bloco so opcionais.

while
Em alguns casos, necessrio repetir um determinado trecho de cdigo vrias vezes. Por exemplo, suponha que seja necessrio exibir 5 vezes a mensagem: Bom Dia. Podemos resolver essa tarefa com o seguinte cdigo JavaScript.
1 2 3 4 5 console . log ( " Bom console . log ( " Bom console . log ( " Bom console . log ( " Bom console . log ( " Bom Dia " ) ; Dia " ) ; Dia " ) ; Dia " ) ; Dia " ) ;

Se ao invs de 5 vezes fosse necessrio exibir 100 vezes a mensagem Bom Dia, j seriam 100 linhas de cdigo JavaScript. muito trabalhoso utilizar essa abordagem para solucionar esse problema. Atravs do comando while, possvel executar vrias vezes um determinado trecho de cdigo.
1 var contador = ; 2 3 while ( contador < 1 ) { 4 console . log ( " Bom Dia " ) ; 5 contador ++; 6 }
Cdigo Javascript 4.27: while

A varivel contador indica o nmero de vezes que a mensagem Bom Dia foi exibida. O operador ++ incrementa a varivel contador a cada iterao. O parmetro do comando while deve ser um valor booleano.

for
O comando for anlogo ao while. A principal diferena entre esses dois comandos que o for recebe trs argumentos.
1 for ( var contador = ; contador < 1 2 console . log ( " Bom Dia " ) ; 3 } ; contador ++) {

Exerccios de Fixao

Adicione um arquivo chamado exibe-nome.html no projeto javascript.


www.k19.com.br

320

321
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 >
Cdigo HTML 4.8: exibe-nome.html

J AVA S CRIPT

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao9.zip

10

Adicione um arquivo chamado exibe-nome.js no projeto javascript.


; contador ++) {

1 for ( var contador = ; contador < 1 2 console . log ( " Rafael Cosentino " ) ; 3 }

Cdigo 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 endereo:


http://localhost/javascript/public_html/exibe-nome.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/exibe-nome.html.

Verique 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 >
Cdigo 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.


; contador ++) {

1 for ( var contador = ; contador < 1 2 console . log ( contador ) ;

www.facebook.com/k19treinamentos

321

J AVA S CRIPT
3 }
Cdigo Javascript 4.30: exibe-1-ate-100.js

322

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao13.zip

14

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/javascript/public_html/exibe-1-ate-1 .html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/exibe-1-ate-1 .html.

Verique as mensagens exibidas no console do navegador.

Percorra todos os nmeros de 1 at 100. Para os nmeros mpares, exiba no console um *, e para os nmeros pares, dois **. Veja o exemplo abaixo:
15

* ** * ** * **

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 >
Cdigo 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.


; contador ++) {

1 for ( var contador = 1; contador <= 1 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

Cdigo 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 endereo:


http://localhost/javascript/public_html/exibe-padrao-1.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/exibe-padrao-1.html.

Verique as mensagens exibidas no console do navegador.

Percorra todos os nmeros de 1 at 100. Para os nmeros mltiplos de 4, exiba a palavra PIN, e para os outros, exiba o prprio nmero. Veja o exemplo abaixo:
18

1 2 3 PIN 5 6 7 PIN

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 >
Cdigo 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.


; contador ++) {

1 for ( var contador = 1; contador <= 1 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
7 } 8 }
Cdigo Javascript 4.32: exibe-padrao-2.js

324

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao19.zip

20

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/javascript/public_html/exibe-padrao-2.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/exibe-padrao-2.html.

Verique 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 sequncia de caracteres. O valor de uma propriedade pode ser qualquer valor exceto undened. Podemos adicionar uma nova propriedade a um objeto que j existe. Um objeto pode herdar propriedades de outro objeto utilizando a ideia de prototype.

Criando objetos
Um objeto pode ser criado de forma literal com a sintaxe JSON. Veja o exemplo a seguir.
1 var objetoVazio = {}; 2 var curso = { 3 sigla : " K11 " , 4 nome : " Orientao a Objetos em Java " 5 };

Um objeto pode se relacionar com outros objetos atravs de propriedades. Observe o cdigo abaixo.
1 var formacaoJava = { 2 sigla : " K1 " , nome : " Formao Desenvolvedor Java " , 3 cursos : [ 4 { 5 sigla : " K11 " , 6 nome : " Orientao 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 2 3 4 5 6 7 8 9 1 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; console . log ( curso . sigla ) ; console . log ( curso [ " sigla " ]) ; var sigla = " sigla " ; console . log ( curso [ sigla ]) ;

Alterando o valor de uma propriedade


Para alterar o valor de uma propriedade, basta atribuir um novo valor propriedade do objeto.
1 2 3 4 5 6 7 8 9 1 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; curso . sigla = " K12 " ; curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " ; console . log ( curso . sigla ) ; console . log ( curso . nome ) ;

Referncias
Os objetos so acessados atravs de referncias.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; // copiando uma referncia var x = curso ; x . sigla = " K12 " ; x . nome = " Desenvolvimento Web com JSF2 e JPA2 " ; // imprime K12 console . log ( curso . sigla ) ; // imprime Desenvolvimento Web com JSF2 e JPA2 console . log ( curso . nome ) ;

Prottipos
Podemos criar um objeto baseado em outro objeto existente (prottipo). Para isso, podemos utilizar a propriedade especial __proto__. Observe o cdigo abaixo.
1 // criando um objeto com duas propriedades 2 var curso = { 3 sigla : " K11 " , 4 nome : " Orientao a Objetos em Java "

www.facebook.com/k19treinamentos

325

J AVA S CRIPT
5 6 7 8 9 1 11 12 13 14 15 16 17 }; // criando um objeto sem propriedades var novo_curso = {}; // definindo o primeiro objeto como prottipo do segundo novo_curso . __proto__ = curso ; // imprime K11 console . log ( novo_curso . sigla ) ; // imprime Orientao a Objetos em Java console . log ( novo_curso . nome ) ;

326

Tambm podemos utilizar o mtodo create de Object para criar objetos baseados em objetos existentes. Veja o exemplo abaixo.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 // criando um objeto com duas propriedades var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; // criando um objeto sem propriedades var novo_curso = {}; // definindo o primeiro objeto como prottipo do segundo novo_curso = Object . create ( curso ) ; // imprime K11 console . log ( novo_curso . sigla ) ; // imprime Orientao a Objetos em Java console . log ( novo_curso . nome ) ;

Se uma propriedade for adicionada a um objeto, ela tambm ser adicionada a todos os objetos que o utilizam como prottipo.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; var novo_curso = Object . create ( curso ) ; curso . carga_horaria = 36; // imprime K11 console . log ( novo_curso . sigla ) ; // imprime Orientao a Objetos em Java console . log ( novo_curso . nome ) ; // imprime 36 console . log ( novo_curso . carga_horaria ) ;

Por outro lado, se uma propriedade for adicionada a um objeto, ela no ser adicionada no prottipo desse objeto.
1 var curso = { 2 sigla : " K11 " , 3 nome : " Orientao a Objetos em Java " 4 }; 5

326

www.k19.com.br

327
6 7 8 9 1 11 12 13 14 15 16 17 var novo_curso = Object . create ( curso ) ; novo_curso . carga_horaria = 36; // imprime K11 console . log ( curso . sigla ) ; // imprime Orientao a Objetos em Java console . log ( curso . nome ) ; // imprime undefined console . log ( curso . carga_horaria ) ;

J AVA S CRIPT

Se o valor de uma propriedade de um objeto for modicado, os objetos que o utilizam como prottipo podem ser afetados.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; var novo_curso = Object . create ( curso ) ; curso . sigla = " K12 " ; curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " ; // imprime K12 console . log ( novo_curso . sigla ) ; // imprime Desenvolvimento Web com JSF2 e JPA2 console . log ( novo_curso . nome ) ;

Por outro lado, alteraes nos valores das propriedades de um objeto no afetam o prottipo desse objeto.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; var novo_curso = Object . create ( curso ) ; novo_curso . sigla = " K12 " ; novo_curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " ; // imprime K11 console . log ( curso . sigla ) ; // imprime Orientao a Objetos em Java console . log ( curso . nome ) ;

Considere um objeto que foi construdo a partir de um prottipo. Se o valor de uma propriedade herdada do prottipo for alterada nesse objeto, ela se torna independente da propriedade no prottipo. Dessa forma, alteraes no valor dessa propriedade no prottipo no afetam mais o valor dela no objeto gerado a partir do prottipo.
1 var curso = { 2 sigla : " K11 " , 3 nome : " Orientao a Objetos em Java " 4 }; 5 6 var novo_curso = Object . create ( curso ) ; 7

www.facebook.com/k19treinamentos

327

J AVA S CRIPT
8 9 1 11 12 13 14 15 16 17 18 novo_curso . sigla = " K12 " ; novo_curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " ; curso . sigla = " K21 " ; curso . nome = " Persistncia com JPA2 e Hibernate " ; // imprime K12 console . log ( novo_curso . sigla ) ; // imprime Desenvolvimento Web com JSF2 e JPA2 console . log ( novo_curso . nome ) ;

328

Removendo uma Propriedade


Podemos remover uma propriedade de um objeto com a funo delete.
1 2 3 4 5 6 7 8 9 1 11 12 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; // imprime K11 console . log ( curso . sigla ) ; delete curso . sigla ; // imprime undefined console . log ( curso . sigla ) ;

Vericando a Existncia de uma Propriedade


Podemos vericar se uma propriedade existe, podemos utilizar a funo in.
1 2 3 4 5 6 7 8 9 1 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; // imprime true console . log ( " sigla " in curso ) ; // imprime false console . log ( " carga_horaria " in curso ) ;

Exerccios de Fixao

21

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

Cdigo HTML 4.12: objetos.html

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao21.zip

Adicione um arquivo chamado objetos.js no projeto javascript. Crie objetos com propriedades chamadas sigla e nome. Exiba o valor dessas propriedades no console do navegador.
22

1 2 3 4 5 6 7

var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; console . log ( curso . sigla ) ; console . log ( curso . nome ) ; var curso2 = { sigla : " K12 " , nome : " Desenvolvimento Web com JSF2 e JPA2 " }; console . log ( curso2 . sigla ) ; console . log ( curso2 . nome ) ;
Cdigo Javascript 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 endereo:


http://localhost/javascript/public_html/objetos.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/objetos.html.

Verique 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 >
Cdigo 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.


var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; // exibe K11 console . log ( curso . sigla ) ; // exibe Orientao a Objetos em Java console . log ( curso . nome ) ;

1 2 3 4 5 6 7

www.facebook.com/k19treinamentos

329

J AVA S CRIPT
8 9 1 11 12 13 14 15 16 17 18

330

var x = curso ; x . sigla = " K12 " ; x . nome = " Desenvolvimento Web com JSF2 e JPA2 " ; // exibe K12 console . log ( curso . sigla ) ; // exibe Desenvolvimento Web com JSF2 e JPA2 console . log ( curso . nome ) ;
Cdigo 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 endereo:


http://localhost/javascript/public_html/referencias.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/referencias.html.

Verique 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 >
Cdigo HTML 4.14: prototype.html

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao27.zip

Adicione um arquivo chamado prototype.js no projeto javascript. Crie um objeto a partir de outro objeto existente.
28

1 2 3 4 5 6 7 8 9

var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; var novo_curso = Object . create ( curso ) ; // exibe K11 console . log ( novo_curso . sigla ) ; // exibe Orientao a Objetos em Java console . log ( novo_curso . nome ) ;
Cdigo Javascript 4.49: prototype.js

Arquivo: https://github.com/K19/K19-Exercicios/archive/k
330

2-javascript-fixacao28.zip

www.k19.com.br

331
29

J AVA S CRIPT

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/javascript/public_html/prototype.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/prototype.html.

Verique as mensagens exibidas no console do navegador.

30 Adicione um arquivo chamado propriedade-1.html no projeto javascript. Dena uma propriedade em um objeto utilizado como prottipo e verique que essa propriedade ser adicionada nos objetos criados a partir desse prottipo.

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 >
Cdigo 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.


var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; var novo_curso = Object . create ( curso ) ; curso . carga_horaria = 36; // exibe K11 console . log ( novo_curso . sigla ) ; // exibe Orientao a Objetos em Java console . log ( novo_curso . nome ) ; // exibe 36 console . log ( novo_curso . carga_horaria ) ;
Cdigo Javascript 4.50: propriedade-1.js

1 2 3 4 5 6 7 8 9 1 11 12 13 14

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao31.zip

32

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/javascript/public_html/propriedade-1.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/propriedade-1.html.

www.facebook.com/k19treinamentos

331

J AVA S CRIPT

332

Verique 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 >
Cdigo HTML 4.16: propriedade-2.html

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao33.zip

34 Adicione um arquivo chamado propriedade-2.js no projeto javascript. Dena uma propriedade em um objeto e verique que o prottipo desse objeto no afetado.

1 2 3 4 5 6 7 8 9 1 11 12 13 14

var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; var novo_curso = Object . create ( curso ) ; novo_curso . carga_horaria = 36; // exibe K11 console . log ( curso . sigla ) ; // exibe Orientao a Objetos em Java console . log ( curso . nome ) ; // exibe undefined console . log ( curso . carga_horaria ) ;
Cdigo Javascript 4.51: propriedade-2.js

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao34.zip

35

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/javascript/public_html/propriedade-2.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/propriedade-2.html.

Verique 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
5 < title > K19 - JavaScript </ title > 6 < script type = " text / javascript " src = " propriedade -3. js " > </ script > 7 </ head > 8 < body > 9 </ body > 1 </ html >
Cdigo HTML 4.17: propriedade-3.html

J AVA S CRIPT

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao36.zip

Adicione um arquivo chamado propriedade-3.js no projeto javascript. Altere o valor de uma propriedade de um objeto utilizado como prottipo e verique que essa alterao afetar os objetos criados a partir desse prottipo.
37

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18

var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; var novo_curso = Object . create ( curso ) ; // exibe K11 console . log ( novo_curso . sigla ) ; // exibe Orientao a Objetos em Java console . log ( novo_curso . nome ) ; curso . sigla = " K12 " ; curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " ; // exibe K12 console . log ( novo_curso . sigla ) ; // exibe Desenvolvimento Web com JSF2 e JPA2 console . log ( novo_curso . nome ) ;
Cdigo Javascript 4.52: propriedade-3.js

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao37.zip

38

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/javascript/public_html/propriedade-3.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/propriedade-3.html.

Verique 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
1 </ html >
Cdigo HTML 4.18: propriedade-4.html

334

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao39.zip

Adicione um arquivo chamado propriedade-4.js no projeto javascript. Reescreva em um objeto as propriedades herdadas de um prottipo e verique que alteraes nos valores dessas propriedades no prottipo no afetam mais os valores delas nesse objeto.
40

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21

var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; var novo_curso = Object . create ( curso ) ; novo_curso . sigla = " K12 " ; novo_curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " ; // exibe K12 console . log ( novo_curso . sigla ) ; // exibe Desenvolvimento Web com JSF2 e JPA2 console . log ( novo_curso . nome ) ; curso . sigla = " K21 " ; curso . nome = " Persistncia com JPA2 e Hibernate " ; // exibe K12 console . log ( novo_curso . sigla ) ; // exibe Desenvolvimento Web com JSF2 e JPA2 console . log ( novo_curso . nome ) ;
Cdigo Javascript 4.53: propriedade-4.js

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao4 .zip

41

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/javascript/public_html/propriedade-4.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/propriedade-4.html.

Verique as mensagens exibidas no console do navegador.

Funes
As funes em JavaScript so objetos. Voc pode armazen-las em variveis, arrays e outros objetos. Elas podem ser passadas como argumento ou devolvidas por outra funo. Veja o exemplo abaixo.
1 var multiplicacao = function (x , y ) { 2 return x * y ; 3 }

334

www.k19.com.br

335

J AVA S CRIPT

Cdigo Javascript 4.54: Uma forma de criar uma funo

1 function multiplicacao (x , y ) { 2 return x * y ; 3 }


Cdigo Javascript 4.55: Outra forma de criar uma funo

Utilizando uma Funo


Para utilizar a funo multiplicacao, podemos cham-la da seguinte forma.
1 var resultado = multiplicao (3 ,2) ;
Cdigo Javascript 4.56: Utilizando a funo

Mtodo
Quando uma funo faz parte de um objeto, ela chamada de mtodo. Para executar um mtodo, devemos utilizar a referncia de um objeto e passar os parmetros necessrios. Observe o cdigo abaixo.
1 2 3 4 5 6 7 8 9 var conta = { saldo : , deposita : function ( valor ) { this . saldo += valor ; } } conta . deposita (1 ) ; console . log ( conta . saldo ) ;
Cdigo Javascript 4.57: Mtodo

Apply
Uma funo pode ser associada momentaneamente a um objeto e executada atravs do mtodo apply.
1 2 3 4 5 6 7 8 9 1 var deposita = function ( valor ) { this . saldo += valor ; } var conta = { saldo : } deposita . apply ( conta , [2 ]) ; console . log ( conta . saldo ) ;
Cdigo Javascript 4.58: Mtodo apply

Arguments
Os argumentos passados na chamada de uma funo podem ser recuperados atravs do array Arguments. Inclusive, esse array permite que os argumentos excedentes sejam acessados.
www.facebook.com/k19treinamentos

335

J AVA S CRIPT
1 2 3 4 5 6 7 8 9 1 11 12 13 var soma = function () { var soma = ; for ( var i = ; i < arguments . length ; i ++) { soma += arguments [ i ]; } return soma ; } var resultado = soma (2 ,4 ,5 ,6 ,1) ; console . log ( resultado ) ;
Cdigo Javascript 4.59: Arguments

336

Exerccios de Fixao

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 >
Cdigo 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.


var multiplicacao = function (x , y ) { return x * y ; }; var resultado = multiplicacao (5 , 3) ; console . log ( resultado ) ;
Cdigo Javascript 4.60: multiplicacao.js

1 2 3 4 5 6 7

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao43.zip

44

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/javascript/public_html/multiplicacao.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


336
www.k19.com.br

337
http://localhost/~<USUARIO>/javascript/public_html/multiplicacao.html.

J AVA S CRIPT

Verique 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 >
Cdigo 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.


var conta = { saldo : , deposita : function ( valor ) { this . saldo += valor ; } }; conta . deposita (5 );

1 2 3 4 5 6 7 8 9 1

console . log ( conta . saldo ) ;


Cdigo 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 endereo:


http://localhost/javascript/public_html/metodos.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/metodos.html.

Verique 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
8 < body > 9 </ body > 1 </ html >
Cdigo HTML 4.21: soma.html

338

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao48.zip

49

Adicione um arquivo chamado soma.js no projeto javascript.


var soma = function () { var soma = ; for ( var i = ; i < arguments . length ; i ++) { soma += arguments [ i ]; } return soma ; }; var resultado = soma (2 ,4 ,5 ,6 ,1) ; console . log ( resultado ) ;
Cdigo Javascript 4.62: soma.js

1 2 3 4 5 6 7 8 9 1 11 12 13

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao49.zip

50

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/javascript/public_html/soma.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/soma.html.

Verique as mensagens exibidas no console do navegador.

Arrays
A linguagem Javascript prov um objeto com caractersticas semelhantes a um array. Esse tipo de objeto pode ser criado de forma literal com a sintaxe JSON.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 var vazio = []; var cursos = [ " K 1 " ," K 2 " ," K 3 " ]; console . log ( vazio [ ]) ; // undefined console . log ( cursos [ ]) ; // K 1 console . log ( vazio . length ) ; // console . log ( cursos . length ) ; // 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 nal de um array, podemos utilizar a propriedade length.
1 2 3 4 5 6 7 8 var cursos = [ " K 1 " ," K 2 " ]; cursos [ cursos . length ] = " K 3 " ; // [" K 1 ", " K 2 " , " K 3 "] for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ; }

Tambm podemos utilizar o mtodo push().


1 2 3 4 5 6 7 8 var cursos = [ " K 1 " ," K 2 " ]; cursos . push ( " K 3 " ) ; // [" K 1 ", " K 2 " , " K 3 "] for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ; }

Removendo Elementos
O mtodo delete() permite remover elementos de um array.
1 2 3 4 5 6 7 8 var cursos = [ " K 1 " , " K 2 " , " K 3 " ]; delete cursos [ ]; // [ undefined , " K 2 " , " K 3 "] for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ; }

Concatenando Arrays
O mtodo concat() permite concatenar dois arrays.
1 2 3 4 5 6 7 8 9 var formacaoBasica = [ " K 1 " , " K 2 " , " K 3 " ]; var formacaoJava = [ " K11 " , " K12 " ]; var formacaoCompleta = formacaoBasica . concat ( formacaoJava ) ; // [" K 1 ", " K 2 " , " K 3 " , " K11 " , " K12 "] for ( var i = ; i < formacaoCompleta . length ; i ++) { console . log ( formacaoCompleta [ i ]) ; }

www.facebook.com/k19treinamentos

339

J AVA S CRIPT

340

Gerando uma String com os Elementos de um Array


O mtodo join() cria uma string a partir de um array.
1 2 3 4 5 6 var formacaoJava = [ " K11 " , " K12 " ]; var resultado = formacaoJava . join ( " ," ) ; // K11 , K12 console . log ( resultado ) ;

Removendo o ltimo Elemento


O mtodo pop() remove e retorna o ltimo elemento.
1 2 3 4 5 6 7 8 9 1 var cursos = [ " K 1 " , " K 2 " , " K 3 " ]; var curso = cursos . pop () ; // [" K 1 ", " K 2 "] console . log ( " Elemento removido : " + curso ) ; for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ; }

Invertendo os Elementos de um Array


O mtodo reverse() inverte a ordem dos elementos de um array.
1 2 3 4 5 6 7 8 var cursos = [ " K 1 " , " K 2 " , " K 3 " ]; cursos . reverse () ; // [" K 3 ", " K 2 " , " K 1 "] for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ; }

Removendo o Primeiro Elemento


O mtodo shift() remove e retorna o primeiro elemento de um array.
1 2 3 4 5 6 7 8 9 1 var cursos = [ " K 1 " , " K 2 " , " K 3 " ]; var curso = cursos . shift () ; // [" K 2 ", " K 3 "] console . log ( " Elemento removido : " + curso ) ; for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ; }

Copiando um Trecho de um Array


O mtodo slice() cria uma cpia de uma poro de um array.
1 var cursos = [ " K 1 " , " K 2 " , " K 3 " , " K11 " , " K12 " ]; 2

340

www.k19.com.br

341
3 4 5 6 7 8 var formacaoBasica = cursos . slice ( , 3) ; // [" K 1 ", " K 2 " , " K 3 "] for ( var i = ; i < formacaoBasica . length ; i ++) { console . log ( formacaoBasica [ i ]) ; }

J AVA S CRIPT

Removendo e Adicionando Elementos em um Array


O mtodo splice() permite remover elementos do array e adicionar novos elementos.
1 2 3 4 5 6 7 8 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ]; cursos . splice (2 , 3 , " K31 " , " K32 " ) ; // [" K11 ", " K12 " , " K31 " , " K32 "] for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ; }

Adicionando um Elemento na Primeira Posio


O mtodo unshift() adiciona elementos na primeira posio de um array.
1 2 3 4 5 6 7 8 var cursos = [ " K12 " ," K21 " ," K22 " ," K23 " ]; cursos . unshift ( " K11 " ) ; // [" K11 ", " K12 " , " K21 " , " K22 " , " K23 "] for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ; }

Strings
Acessando os Caracteres de uma String por Posio
O mtodo charAt() retorna o caractere na posio especicada.
1 var curso = " K12 " ; 2 3 console . log ( curso . charAt ( ) ) ;

Recuperando um Trecho de uma String


O mtodo slice() retorna uma poro de uma string.
1 var curso = " K12 - Desenvolvimento Web com JSF2 e JPA2 " ; 2 3 console . log ( curso . slice ( ,3) ) ;

Dividindo uma String


O mtodo split() cria uma array de strings a partir de um separador.
www.facebook.com/k19treinamentos

341

J AVA S CRIPT
1 2 3 4 5 var curso = " K12 - Desenvolvimento Web com JSF2 e JPA2 " ; var aux = curso . split ( " -" ) ; console . log ( aux [ ]) ; console . log ( aux [1]) ;

342

Exerccios de Fixao

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 >
Cdigo 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.


var vazio = []; var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ," K31 " ," K32 " ]; console . log ( vazio [ ]) ; console . log ( cursos [ ]) ; console . log ( vazio . length ) ; console . log ( cursos . length ) ;
Cdigo Javascript 4.79: array-length.js

1 2 3 4 5 6 7 8

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao52.zip

53

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/javascript/public_html/array-length.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/array-length.html.

Verique 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
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 >
Cdigo HTML 4.23: array-elementos.html

J AVA S CRIPT

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 }
Cdigo 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 endereo:


http://localhost/javascript/public_html/array-elementos.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/array-elementos.html.

Verique 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 >
Cdigo 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
4 5 for ( var i = ; i < cursos . length ; i ++) { 6 console . log ( cursos [ i ]) ; 7 }
Cdigo Javascript 4.81: array-add.js

344

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao58.zip

59

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/javascript/public_html/array-add.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/array-add.html.

Verique 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 >
Cdigo 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.


var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ," K31 " ," K32 " ]; cursos . push ( " K 1 " ) ; for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ; }
Cdigo Javascript 4.82: array-push.js

1 2 3 4 5 6 7

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao61.zip

62

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/javascript/public_html/array-push.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


344
www.k19.com.br

345
http://localhost/~<USUARIO>/javascript/public_html/array-push.html.

J AVA S CRIPT

Verique 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 >
Cdigo 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.


var formacaoJava = [ " K11 " ," K12 " ]; var formacaoJavaAvancado = [ " K21 " ," K22 " ," K23 " ]; var formacaoCompleta = formacaoJava . concat ( formacaoJavaAvancado ) ; for ( var i = ; i < formacaoCompleta . length ; i ++) { console . log ( formacaoCompleta [ i ]) ; }
Cdigo Javascript 4.83: array-concat.js

1 2 3 4 5 6 7 8

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao64.zip

65

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/javascript/public_html/array-concat.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/array-concat.html.

Verique 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
1 </ html >
Cdigo HTML 4.27: array-pop.html

346

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 ) ;
Cdigo 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 endereo:


http://localhost/javascript/public_html/array-pop.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/array-pop.html.

Verique 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 >
Cdigo 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.


var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ]; cursos . reverse () ; for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ; }
Cdigo Javascript 4.85: array-reverse.js

1 2 3 4 5 6 7

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 endereo:


http://localhost/javascript/public_html/array-reverse.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/array-reverse.html.

Verique 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 >
Cdigo 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.


var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ]; var curso = cursos . shift () ; console . log ( " Elemento removido : " + curso ) ; for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ; }
Cdigo Javascript 4.86: array-shift.js

1 2 3 4 5 6 7 8 9

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao73.zip

74

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/javascript/public_html/array-shift.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/array-shift.html.

Verique as mensagens exibidas no console do navegador.


www.facebook.com/k19treinamentos

347

J AVA S CRIPT
75

348

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 >
Cdigo 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.


var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ]; var formacaoJava = cursos . slice ( ,2) ; for ( var i = ; i < formacaoJava . length ; i ++) { console . log ( formacaoJava [ i ]) ; }
Cdigo Javascript 4.87: array-slice.js

1 2 3 4 5 6 7

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao76.zip

77

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/javascript/public_html/array-slice.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/array-slice.html.

Verique 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 >
Cdigo HTML 4.31: array-unshift.html

Arquivo: https://github.com/K19/K19-Exercicios/archive/k
348

2-javascript-fixacao78.zip

www.k19.com.br

349
79

J AVA S CRIPT

Adicione um arquivo chamado array-unshift.js no projeto javascript.


var cursos = [ " K12 " ," K21 " ," K22 " ," K23 " ]; cursos . unshift ( " K11 " ) ; for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ; }
Cdigo Javascript 4.88: array-unshift.js

1 2 3 4 5 6 7

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao79.zip

80

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/javascript/public_html/array-unshift.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/array-unshift.html.

Verique 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 >
Cdigo 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.


var curso = " K12 - Desenvolvimento Web com JSF2 e JPA2 " ; var aux = curso . split ( " -" ) ; console . log ( aux [ ]) ; console . log ( aux [1]) ;
Cdigo Javascript 4.89: array-split.js

1 2 3 4 5

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao82.zip

83

No Windows, utilize o Chrome para acessar o endereo:


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 endereo:


http://localhost/~<USUARIO>/javascript/public_html/array-split.html.

Verique as mensagens exibidas no console do navegador.

DOM - Document Object Model


Os documentos HTML assim como os seus elementos so representados por objetos JavaScript. Podemos acessar o objeto que representa o documento HTML atual atravs da varivel document. Os objetos que representam os elementos do documento HTML atual podem ser acessados atravs dessa varivel.

Recuperando elementos
Podemos buscar elementos HTML por ID atravs do mtodo getElementById. Esse mtodo devolve null se no existir elemento HTML com o identicador desejado.
1 var elemento = document . getElementById ( " conteudo " ) ;

Podemos buscar elementos HTML pelo valor do atributo name atravs do mtodo getElementsByName. Esse mtodo devolve um array com os elementos recuperados.
1 var array = document . getElementsByName ( " categoria " ) ;

Podemos buscar elementos HTML de um determinado tipo atravs do mtodo getElementsByTagName. Esse mtodo devolve um array com os elementos recuperados.
1 var array = document . getElementsByTagName ( " p " ) ;

Podemos buscar elementos HTML pelo valor do atributo class atravs do mtodo getElementsByClassName. Esse mtodo devolve um array com os elementos recuperados.
1 var array = document . getElementsByClassName ( " confirmado " ) ;

Podemos buscar elementos HTML utilizando seletores CSS atravs dos mtodos querySelector e querySelectorAll. O primeiro mtodo devolve o primeiro elemento compatvel com o seletor CSS passado como parmetro. O segundo mtodo devolve um array com todos os elementos compatveis com o seletor CSS passado como parmetro.
1 var elemento = document . querySelector ( " div . aprovado " ) ; 2 var array = document . querySelectorAll ( " div . aprovado " ) ;

Podemos acessar os atributos de um elemento HTML atravs do mtodo getAttribute. Esse mtodo recebe como parmetro o nome do atributo desejado e devolve null ou (string vazia) se o atributo no existir.
1 var valor = elemento . getAttribute ( " type " ) ;

Tambm podemos acessar os atributos de um elemento HTML atravs da propriedade attributes.


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 contedo de um elemento HTML atravs da propriedade innerHTML. Essa propriedade armazena o contedo dos elementos HTML em forma de string.
1 var conteudo = elemento . innerHTML ;

Alterando elementos
Podemos modicar os atributos de um elemento HTML atravs do mtodo setAttribute.
1 elemento . setAttribute ( " type " , " text " ) ;

Podemos modicar o estilo de um elemento HTML atravs da propriedade style.


1 elemento . style . color = " red " ;

As propriedades com nome composto devem seguir a conveno Camel Case.


1 elemento . style . borderColor = " red " ;

Podemos modicar o contedo de um elemento HTML atravs da propriedade innerHTML.


1 elemento . innerHTML = " Acesse <a href = http :// www . k19 . com . br > K19 </ a > " ;

Removendo elementos
Podemos remover um elemento HTML atravs do mtodo remove.
1 var elemento = document . getElementById ( " conteudo " ) ; 2 elemento . remove () ;

Podemos remover um elemento HTML atravs do seu pai.


1 var elemento = document . getElementById ( " conteudo " ) ; 2 elemento . parentNode . removeChild ( elemento ) ;

Adicionando elementos
Podemos criar um elemento HTML atravs do mtodo createElement e adicion-lo em um documento HTML atravs do mtodo appendChild.
1 2 3 4 var titulo = document . createElement ( " h1 " ) ; titulo . innerHTML = " K19 Treinamentos " ; var elemento = document . getElementById ( " conteudo " ) ; elemento . appendChild ( titulo ) ;

Tambm podemos adicionar um elemento HTML em um documento HTML atravs do mtodo insertBefore.
www.facebook.com/k19treinamentos

351

J AVA S CRIPT
1 2 3 4 5 6 7 var titulo = document . createElement ( " h1 " ) ; titulo . innerHTML = " Cursos K19 " ; var conteudo = document . getElementById ( " conteudo " ) ; var tabela = conteudo . getElementById ( " tabela - de - cursos " ) ; conteudo . insertBefore ( titulo , tabela ) ;

352

Mais Sobre
Os objetos que representam os documentos e os elementos HTML possuem uma grande quantidade de propriedades e mtodos. Para saber mais sobre essas propriedade e esses mtodos, recomendamos a consulta aos seguintes endereos:

https://developer.mozilla.org/en-US/docs/Web/API/Document https://developer.mozilla.org/en-US/docs/Web/API/element

Exerccios de Fixao

84

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 < label for = " politica " > Poltica : </ label > 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 >
Cdigo 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.


www.k19.com.br

352

353
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 var titulo = document . getElementById ( " titulo " ) ; console . log ( titulo . tagName + " : " + titulo . innerHTML ) ; var array = document . getElementsByName ( " categoria " ) ; for ( var i = ; i < array . length ; i ++) { console . log ( array [ i ]. tagName + " : " + array [ i ]. id ) ; } array = document . getElementsByTagName ( " label " ) ; for ( var i = ; i < array . length ; i ++) { console . log ( array [ i ]. tagName + " : " + array [ i ]. getAttribute ( " for " ) ) ; } array = document . getElementsByClassName ( " centralizado " ) ; for ( var i = ; i < array . length ; i ++) { console . log ( array [ i ]. tagName + " : " + array [ i ]. id ) ; } var formulario = document . querySelector ( " body > form " ) ; console . log ( formulario . tagName + " : " + formulario . getAttribute ( " action " ) ) ; array = document . querySelectorAll ( " label " ) ; for ( var i = ; i < array . length ; i ++) { console . log ( array [ i ]. tagName + " : " + array [ i ]. getAttribute ( " for " ) ) ; }

J AVA S CRIPT

Cdigo 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 endereo:


http://localhost/javascript/public_html/DOM.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/DOM.html.

Verique as mensagens exibidas no console do navegador.

87

No console do navegador, execute os seguintes comandos um de cada vez e observe o resultado.


var titulo = document . getElementById ( " titulo " ) ; titulo . style . color = " red " ; titulo . innerHTML = " K19 - JavaScript - DOM " ; titulo . remove () ; var body = document . querySelector ( " body " ) ; var form = document . getElementById ( " formulario " ) ; body . insertBefore ( titulo , form ) ;

1 2 3 4 5 6 7 8 9 1 11 12 13

Eventos
www.facebook.com/k19treinamentos

353

J AVA S CRIPT

354

A interatividade entres as pginas web e os usurios depende fortemente dos eventos que podem ser reconhecidos pelos navegadores. Por exemplo, atualmente, os navegadores so capazes de identicar o movimento do mouse, a digitao do usurio, a nalizao do carregamento de uma pgina 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 endereos para obter maiores informaes: http://www.w3.org/TR/DOM-Level-3-Events/ http://en.wikipedia.org/wiki/DOM_events Podemos denir o que deve ocorrer quando um determinado evento detectado. No exemplo abaixo, toda vez que o usurio clicar no pargrafo, a mensagem K19 ser exibida no console do navegador.
1 <p onclick = " console . log ( K19 ) " > 2 Lorem ipsum dolor sit amet , consectetur adipiscing elit . 3 </ p >

load
O evento load disparado no trmino do carregamento de um recurso (imagem, script, folhas de estilos, entre outros) contido em um documento HTML ou do prprio documento. Podemos denir o tratamento desse evento utilizando o atributo onload. Esse atributo pode ser utilizado em diversos elementos HTML. Por exemplo: body, img, script e link.
1 < body onload = " console . log ( K19 ) " > 2 </ body >

resize
O evento resize disparado quando ocorre uma alterao no tamanho de determinados elementos. Podemos denir 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 denir 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 denir 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 aps ter o seu contedo alterado. Podemos denir 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 denir 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 denir o tratamento desse evento utilizando o atributo onselect.
1 < input onselect = " console . log ( K19 ) " ...>

submit
O evento submit disparado imediatamente antes do envio de um formulrio. Podemos denir o tratamento desse evento utilizando o atributo onsubmit.
1 < form onsubmit = " console . log ( K19 ) " ...>

reset
O evento reset disparado quando um formulrio reiniciado. Podemos denir o tratamento desse evento utilizando o atributo onreset.
1 < form onreset = " console . log ( K19 ) " ...>

mousedown, mouseup e click


Os eventos mousedown, mouseup e click esto relacionados ao ato de clicar nos elementos HTML com o boto esquerdo ou com o boto do meio do mouse. Podemos denir o tratamento desses eventos utilizando os atributos onmousedown, onmouseup e onclick. Esses atributos podem 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. Podemos denir o tratamento desse evento utilizando o atributo ondblclick. Esse atributo pode ser utilizado em diversos elementos HTML. Por exemplo: p, div, table e img.
1 <p ondblclick = " console . log ( K19 ) " > 2 Lorem ipsum dolor sit amet , consectetur adipiscing elit . 3 </ p >

mousemove
O evento mousemove disparado quando o usurio movimenta o mouse sobre um determinado elemento. Podemos denir o tratamento desse evento utilizando o atributo onmousemove. Esse atributo pode ser utilizado em diversos elementos HTML. Por exemplo: p, div, table e img.
1 <p onmousemove = " console . log ( K19 ) " > 2 Lorem ipsum dolor sit amet , consectetur adipiscing elit . 3 </ p >

mouveover
O evento mouveover disparado quando o ponteiro do mouse passa a estar sobre um determinado elemento. Podemos denir o tratamento desse evento utilizando o atributo onmouveover. Esse atributo pode ser utilizado em diversos elementos HTML. Por exemplo: p, div, table e img.
1 <p onmouveover = " console . log ( K19 ) " > 2 Lorem ipsum dolor sit amet , consectetur adipiscing elit . 3 </ p >

mouseout
O evento mouseout disparado quando o ponteiro do mouse deixa de estar sobre um determinado elemento. Podemos denir 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 esto relacionados ao ato de pressionar uma tecla quando o foco est em um determinado elemento HTML. Podemos denir o tratamento desses eventos utilizando 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 no disparado para teclas que no representam caracteres. Por exemplo, SHIFT, CTRL, ALT, entre outros.

Mtodos: addEventListener e removeEventListener


Podemos denir o tratamento dos eventos programaticamente atravs do mtodo addEventListener. O primeiro parmetro desse mtodo o nome do evento que desejamos tratar. O segundo parmetro a funo que tratar o evento.
1 2 3 4 5 6 function click () { console . log ( " click " ) ; } var elemento = document . getElementById ( " conteudo " ) ; elemento . addEventListener ( " click " , click ) ;

Nessa abordagem, podemos associar diversas funes para tratar um determinado evento para um determinado elemento HTML. Tambm podemos utilizar funes annimas como mostra o exemplo a seguir.
1 var elemento = document . getElementById ( " conteudo " ) ; 2 elemento . addEventListener ( 3 " click " , 4 function () { 5 console . log ( " click " ) 6 } 7 );

Podemos remover um listener com o mtodo removeEventListener.


1 elemento . removeEventListener ( " click " , click ) ;

O mtodo removeEventListener no pode ser utilizado para funes annimas.


www.facebook.com/k19treinamentos

357

J AVA S CRIPT

358

Propriedades dos objetos do DOM


Outra forma de denir 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 funo pode ser associada a um determinado evento para um determinado elemento HTML.

Exerccios de Fixao

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 >
Cdigo 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
8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 39 4 41 42 43 44 45 46 47 48 49 5 51 52 53 54 55 56 57 58 59 6 61 62 63 64 65 66 67 68 69 7 71 72 73 74 75 76 77 }; input . addEventListener ( " change " , function () { console . log ( " change " ) ; }) ; input . onblur = function () { console . log ( " blur " ) ; }; input . onselect = function () { console . log ( " select " ) ; }; input . onkeydown = function () { console . log ( " keydown " ) ; }; input . onkeypress = function () { console . log ( " keypress " ) ; }; input . onkeyup = function () { console . log ( " keyup " ) ; }; var div = document . querySelector ( " div " ) ; div . onmousedown = function () { console . log ( " mousedown " ) ; }; div . onmouseup = function () { console . log ( " mouseup " ) ; }; div . onclick = function () { console . log ( " click " ) ; }; div . ondblclick = function () { console . log ( " dblclick " ) ; }; div . onmousemove = function ( event ) { var x = event . clientX ; var y = event . clientY ; console . log ( " mousemove : ( " + x + " , " + y + " ) " ) ; }; div . onmouseover = function () { console . log ( " mouseover " ) ; }; div . onmouseout = function () { console . log ( " mouseout " ) ; }; }; function resize () { var w = window . outerWidth ; var h = window . outerHeight ; console . log ( " resize ( " + w + " , " + h + " ) " ) ; } function scroll () { var x = window . pageXOffset ; var y = window . pageYOffset ;

J AVA S CRIPT

www.facebook.com/k19treinamentos

359

J AVA S CRIPT
78 console . log ( " scroll ( " + x + " , " + y + " ) " ) ; 79 }
Cdigo Javascript 4.112: eventos.js

360

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao89.zip

90

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/javascript/public_html/eventos.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/eventos.html.

Verique as mensagens exibidas no console do navegador.

Web Storage
Podemos armazenar dados nos navegadores dos usurios atravs do Web Storage. H duas formas de armazenamento.

Local storage: Os dados so armazenados nos navegadores indenidamente. Podemos recuperar esses dados mesmo aps o fechamento de uma aba ou da janela do navegador. Session storage: Os dados armazenados nos navegadores so descartados aps o fechamento de uma aba ou do navegador.

Os dados armazenados com a API do Web Storage so separados por domnio e no so compartilhados entre navegadores diferentes. Os navegadores podem determinar a quantidade de espao de armazenamento disponvel. Por padro, esse espao deve ser de pelo menos 5MB por domnio.

Armazenando dados
O mtodo setItem dos objetos localStorage e sessionStorage utilizado para inserir dados no Web Storage. Esse mtodo recebe dois parmetros, uma chave e o um valor.
1 localStorage . setItem ( " usuario " , " Rafael Cosentino " ) ; 2 sessionStorage . setItem ( " usuario " , " Rafael Cosentino " ) ;

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 mtodo getItem dos objetos localStorage e sessionStorage utilizado para recuperar dados do Web Storage. Esse mtodo recebe uma chave como parmetro.
360
www.k19.com.br

361
1 usuario = localStorage . getItem ( " usuario " ) ; 2 usuario = sessionStorage . getItem ( " usuario " ) ;

J AVA S CRIPT

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 2 3 4 5 6 7 8 9 for ( var i = ; i < localStorage . length ; i ++) { var key = localStorage . key ( i ) ; var value = localStorage . getItem ( key ) ; } for ( var i = ; i < sessionStorage . length ; i ++) { var key = sessionStorage . key ( i ) ; var value = sessionStorage . getItem ( key ) ; }

Removendo dados
O mtodo removeItem dos objetos localStorage e sessionStorage utilizado para remover dados do Web Storage. Esse mtodo recebe uma chave como parmetro.
1 localStorage . removeItem ( " usuario " ) ; 2 sessionStorage . removeItem ( " usuario " ) ;

Para remover todas as entradas do localStorage ou do sessionStorage, podemos utilizar o mtodo clear.
1 localStorage . clear () ; 2 sessionStorage . clear () ;

Exerccios de Fixao

91

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

Cdigo 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.


function atualizaSaudacao () { var saudacao = document . getElementById ( " saudacao " ) ; if ( localStorage . nome ) { saudacao . innerHTML = " Ol " + localStorage . nome ; } else { saudacao . innerHTML = null ; } }; window . onload = function () { var botaoEnviar = document . getElementById ( " botaoEnviar " ) ; botaoEnviar . onclick = function () { var campoNome = document . getElementById ( " campoNome " ) ; localStorage . nome = campoNome . value ; atualizaSaudacao () ; }; var botaoLimpar = document . getElementById ( " botaoLimpar " ) ; botaoLimpar . onclick = function () { localStorage . removeItem ( " nome " ) ; atualizaSaudacao () ; }; atualizaSaudacao () ; };
Cdigo Javascript 4.120: web-storage.js

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao92.zip

93

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/javascript/public_html/web-storage.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/web-storage.html.

Preencha o formulrio. Abra e feche a janela do navegador.

History
Podemos avanar ou retroceder no histrico dos navegadores atravs do objeto history. Esse objeto pode ser acessado atravs do objeto window.

Avanando ou retrocedendo
Podemos avanar ou retroceder uma pgina no histrico atravs dos mtodos forward e back respectivamente.
362
www.k19.com.br

363
1 window . history . forward () ;

J AVA S CRIPT

1 window . history . back () ;

Tambm podemos utilizar o mtodo go. Esse mtodo recebe um nmero inteiro como parmetro.
1 2 3 4 5 6 7 8 9 1 11 // avana uma pgina window . history . go (1) ; // retrocede uma pgina window . history . go ( -1) ; // avana trs pginas window . history . go (3) ; // retrocede trs pginas window . history . go ( -3) ;

A quantidade de pginas no histrico pode ser obtida atravs da propriedade length.


1 var numeroDePaginasDoHistorico = window . history . length ;

Adicionando ou modicando entradas do histrico


Atravs do mtodo pushState, podemos adicionar uma entrada na posio atual do histrico. Com o mtodo replaceState, podemos modicar a entrada atual do histrico. Esses dois mtodos recebem os mesmos parmetros.
1 pushState ( stateObject , title , url ) ;

1 replaceState ( stateObject , title , url ) ;

stateObject: Um objeto que pode ser utilizado para armazenar informaes sobre a nova entrada. title: O ttulo da nova entrada. url: A URL da nova entrada.

Como exemplo, considere que a pgina correspondente URL www.k19.com.br esteja sendo exibida no navegador.
1 var state = { info : " info " }; 2 window . history . pushState ( state , " K19 - Cursos " , " cursos " ) ;

O cdigo acima adicionaria uma nova entrada com ttulo K19 - Cursos e URL www.k19.com.br/ cursos. J o cdigo abaixo, substituiria a entrada atual do histrico por uma nova com ttulo K19 Apostilas e URL www.k19.com.br/apostilas.
1 var state = { info : " info " }; 2 window . history . replaceState ( state , " K19 - Apostilas " , " apostilas " ) ;

www.facebook.com/k19treinamentos

363

J AVA S CRIPT

364

Exerccios de Fixao

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 - Histrico Pgina 1 </ title > 6 </ head > 7 < body > 8 < h1 > K19 - Histrico Pgina 1 </ h1 > 9 < button onclick = " window . history . forward () ; " > Avanar 1 pgina </ button > 1 < button onclick = " window . history . go (2) ; " > Avanar 2 pgina </ button > 11 </ body > 12 </ html >
Cdigo 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 - Histrico Pgina 2 </ title > 6 </ head > 7 < body > 8 < h1 > K19 - Histrico Pgina 2 </ h1 > 9 < button onclick = " window . history . back () ; " > Voltar 1 pgina </ button > 1 < button onclick = " window . history . forward () ; " > Avanar 1 pgina </ button > 11 </ body > 12 </ html >
Cdigo 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 - Histrico Pgina 3 </ title > 6 </ head > 7 < body > 8 < h1 > K19 - Histrico Pgina 3 </ h1 > 9 < button onclick = " window . history . go ( -2) ; " > Voltar 2 pgina </ button > 1 < button onclick = " window . history . back () ; " > Voltar 1 pgina </ button > 11 </ body > 12 </ html >
Cdigo HTML 4.54: historico-pagina3.html

Arquivo: https://github.com/K19/K19-Exercicios/archive/k
364

2-javascript-fixacao96.zip

www.k19.com.br

365
97

J AVA S CRIPT

No Windows, utilize o Chrome para acessar na sequncia os endereos:

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 sequncia os endereos:


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 atravs dos botes.

Geolocalizao
Se o usurio permitir, podemos obter a localizao dele atravs da API de Geolocalizao do HTML5. Essa localizao pode ser utilizada para diversos propsitos. Por exemplo, podemos exibir publicidade relacionada regio onde o usurio est. O primeiro passo para utilizar essa API, denir uma funo JavaScript para receber a localizao quando ela for obtida.
1 function positionCallback ( position ) { 2 console . log ( " Latitude : " + position . coords . latitude ) ; 3 console . log ( " Longitude : " + position . coords . longitude ) ; 4 }

Depois, devemos utilizar a funo getCurrentPosition para solicitar a localizao do usurio.


1 navigator . geolocation . getCurrentPosition ( positionCallback ) ;

Exerccios de Fixao

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
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 >
Cdigo HTML 4.55: geolocalizacao.html

366

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao98.zip

99

Adicione um arquivo chamado geolocalizacao.js no projeto javascript.


function positionCallback ( position ) { var latitude = position . coords . latitude ; var longitude = position . coords . longitude ; var geolocation = new google . maps . LatLng ( latitude , longitude ) ; var mapOptions = { zoom : 18 , center : geolocation , mapTypeId : google . maps . MapTypeId . ROADMAP }; var div = document . getElementById ( " mapa " ) ; var map = new google . maps . Map ( div , mapOptions ) ; var marker = new google . maps . Marker ({ position : geolocation , map : map , title : " Voc est aqui ! " }) ; } window . onload = function () { navigator . geolocation . getCurrentPosition ( positionCallback ) ; };

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-fixacao99.zip

100

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/javascript/public_html/geolocalizacao.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/javascript/public_html/geolocalizacao.html.

Alarmes (Contedo Extra)


Podemos agendar tarefas para serem executadas no futuro. Para isso, podemos utilizar os mtodos setTimeout e setInterval. A primeira permite denir uma funo que deve ser executada apenas uma vez depois de um determinado tempo. A segunda permite denir uma funo que deve ser executada de forma peridica.
366
www.k19.com.br

367

J AVA S CRIPT

No exemplo a seguir, denimos uma funo que ser executada uma vez depois de 1600 milisegundos.
1 window . setTimeou ( function () { 2 console . log ( " timeout " ) ; 3 } , 16 ) ;

Por outro lado, nesse outro exemplo, denimos uma funo que ser executada a cada 2500 milisegundos.
1 window . setInterval ( function () { 2 console . log ( " interval " ) ; 3 } , 25 ) ;

Podemos cancelar os alarmes com os mtodos clearTimeout e clearInterval. Esses mtodos necessitam da referencia da funo associada ao alarme.
1 2 3 4 5 6 7 function alarmeTimeout () { console . log ( " timeout " ) ; } window . setTimeout ( alarmeTimeout , 16 window . clearTimeout ( alarmeTimeout ) ; );

1 2 3 4 5 6 7

function alarmeInterval () { console . log ( " interval " ) ; } window . setInterval ( alarmeInterval , 25 window . clearInterval ( alarmeInterval ) ; );

Exerccios Complementares

1 Crie um documento HTML vinculado a um documento JavaScript que exiba no console do navegador os nmeros de 1 at 50 duas vezes.

Crie um documento HTML vinculado a um documento JavaScript que exiba no console do navegador o seu nome cinco vezes. A cada exibio do seu nome, exiba trs vezes a palavra K19.
2

3 Crie um documento HTML vinculado a um documento JavaScript que percorra todos os nmeros de 1 at 60. Para os nmeros mltiplos de 3, exiba ***. Para os nmeros que no so mltiplos de 3, exiba *.

Crie um documento HTML vinculado a um documento JavaScript que exiba no console do navegador todos os nmeros de 1 at 80 exceto os mltiplos de 4 e 7. Para esses exiba *.
4

www.facebook.com/k19treinamentos

367

J AVA S CRIPT
5

368

Crie um documento HTML vinculado a um documento JavaScript que exiba no console do navegador um tringulo de *. Veja o exemplo abaixo:

* ** *** **** *****

6 Crie um documento HTML vinculado a um documento JavaScript que exiba no console do navegador vrios tringulos de *. Observe o padro abaixo.

* ** *** **** * ** *** ****

7 Os nmeros de Fibonacci so uma sequncia de nmeros denida recursivamente. O primeiro elemento da sequncia 0 e o segundo 1. Os outros elementos so 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 nmeros da sequncia de Fibonacci.

Crie um documento HTML vinculado a um documento JavaScript que armazene 10 nmeros em um array. Preencha todas as posies do array com valores sequenciais e em seguida exiba-os na tela. Depois, escolha duas posies aleatoriamente e troque os valores contidos nelas. Repita essa operao 10 vezes. Ao nal, exiba o array novamente.
8

Dica: O mtodo Math.random() gera nmeros aleatrios maiores ou iguais a 0 e menores do que 1. O mtodo Math.oor() recebe um nmero real como parmetro e devolve o maior inteiro menor ou igual a esse nmero real.

Crie um documento HTML vinculado a um documento JavaScript que armazene 10 nmeros em um array. Preencha todas as posies do array com valores aleatrios e em seguida exiba-os na tela. Aps exibir o array, ordene o array do menor valor para o maior. Ao nal, exiba o array ordenado.
9

368

www.k19.com.br

369

J AVA S CRIPT

Dica: Os arrays possuem um mtodo chamada sort. Esse mtodo ordena os elementos dos arrays.

Resumo do Captulo

A linguagem de programao JavaScript utilizada principalmente para aumentar a interatividade entre as pginas web e os usurios.

Cdigo JavaScript pode ser aplicado aos documentos HTML de duas formas: JavaScript interno e JavaScript externo.

O carregamento do cdigo JavaScript depende do posicionamento do elemento script.

Comentrios JavaScript de bloco podem ser denidos com os marcadores /* e */. script.

Comentrios JavaScript de linha podem ser denidos com o marcador //. script.

Em JavaScript, as variveis so criadas atravs da palavra especial var.

Variveis no inicializadas possuem o valor especial undened.

Os operadores do JavaScript so: Aritmtico: Atribuio: Relacional: Lgico: && + = == || += != * / -= < % *= <= /= > %= >= ++ --

O operador + utilizado para concatenar strings.

10

A linguagem JavaScript permite a denio de objetos com a sintaxe do JSON.

11

Funes JavaScript so criadas com a palavra function.

Os mtodos getElementById(), getElementsByName(), getElementsByTagName(), getElementsByClassName(), querySelector() e querySelectorAll() so utilizados para recuperar os elewww.facebook.com/k19treinamentos

12

369

J AVA S CRIPT

370

mentos de um documento HTML.

Os mtodos getAttribute() e setAttribute() so utilizados, respectivamente, para recuperar e alterar os valores dos atributos dos elementos HTML.

13

14

O contedo de um elemento HTML pode ser acessado atravs da propriedade innerHTML.

15

A propriedade style pode ser utilizada para alterar as propriedades CSS dos elementos HTML.

Os mtodos remove() e removeChild() so utilizados para remover elementos de um documento HTML.

16

Os mtodos appendChild() e insertBefore() so utilizados para adicionar elementos em um documento HTML.

17

18

A interatividade entre as pginas web e os usurios depende dos eventos JavaScript.

19

Podemos armazenar dados na mquina dos usurios com a API do Web Storage.

20

Podemos controlar o histrico do navegador com a API History.

21

Podemos obter a localizao dos usurios atravs da API de geolocalizao.

Prova

Qual alternativa est correta?

a) Podemos associar cdigo JavaScript aos documentos HTML atravs dos elementos script e js. b) O cdigo JavaScript sempre carregado antes de todos os elementos HTML. c) O cdigo JavaScript sempre colocado dentro do documento HTML. d) O elemento script s pode ser colocada no corpo do elemento head. e) Podemos associar cdigo JavaScript aos documentos HTML atravs do elemento script.

Qual alternativa est correta?


www.k19.com.br

370

371

J AVA S CRIPT

a) A palavra especial var utilizada para criar variveis. b) As variveis JavaScript armazenam apenas valores do tipo string. c) As variveis JavaScript no inicializadas possuem o valor empty. d) Na linguagem JavaScript, duas variveis no podem armazenar o mesmo valor. e) Os nomes das variveis JavaScript devem iniciar obrigatoriamente com a letra v.

Considere o seguinte trecho de cdigo JavaScript.


var i = 1 ; var j = ++ i + i - -;

Qual o valor da varivel j?

a) 18. b) 19. c) 20. d) 21. e) 22.

Considere o seguinte trecho de cdigo 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.

Considere o seguinte trecho de cdigo JavaScript.


www.facebook.com/k19treinamentos

371

J AVA S CRIPT
var i = 1 ; while ( i ++ < 15) { console . log (++ i ) ; }

372

Quais nmeros sero 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.

Considere o seguinte trecho de cdigo 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, undened. b) a, b, undened, a. c) b, a, undened, a. d) b, a, undened, b. e) a, b, a, undened.

Qual alternativa est correta?

a) As funes JavaScript so criadas com as palavras func e function. b) As funes JavaScript so criadas com a palavra function. c) As funes JavaScript so criadas com a palavra func. d) Toda funo JavaScript deve receber parmetros. e) A linguagem JavaScript no suporta funes.

372

www.k19.com.br

373
8

J AVA S CRIPT

Qual alternativa est correta?

a) O mtodo getElementsById() recupera elementos HTML por ID. b) O mtodo getElementByTagName() recupera elementos HTML de um determinado tipo. c) A propriedade css dos elementos HTML permite que as propriedades CSS sejam acessadas e/ou modicadas. d) O mtodo remove() remove elementos de um documento HTML. e) Podemos acessar o contedo de um elemento HTML atravs da propriedade html.

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 no suporta eventos. d) A nica forma de associar os eventos aos elementos HTML o mtodo addEventListener(). e) Todas as alternativas anteriores esto 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 so descartados aps o fechamento da aba ou do navegador correspondente. c) Para armazenadas dados com a API Web Storage, devemos utilizar o mtodo put(). d) Para armazenadas dados com a API Web Storage, devemos utilizar o mtodo add(). e) Podemos apagar todos os dados armazenados com a API Web atravs do mtodo reset().

11

Qual alternativa est correta?

a) A API History permite descobrir as senhas dos usurios. b) Atravs da API de geolocalizao podemos descobrir a localizao dos Web Servers. c) A localizao dos usurios pode ser obtida atravs da API de geolocalizao somente com a autorizao dos usurios.
www.facebook.com/k19treinamentos

373

J AVA S CRIPT

374

d) A localizao dos usurios pode ser obtida atravs da API de geolocalizao mesmo sem a autorizao dos usurios. e) Todas as alternativas anteriores esto incorretas.

Minha Pontuao

Pontuao Mnima:

Pontuao Mxima:

11

374

www.k19.com.br

CAPTULO

J Q UERY

Introduo
Basicamente, jQuery uma biblioteca JavaScript. Ela foi desenvolvida para simplicar e diminuir a quantidade de cdigo JavaScript. Os principais recursos oferecidos por essa essa biblioteca so:

Seletores Manipulao de elementos HTML Manipulao de propriedades CSS Eventos Efeitos e Animaes AJAX

Para utilizar o jQuery, basta adicionar o arquivo JavaScript que contm o cdigo dessa biblioteca em um documento HTML. Esse arquivo JavaScript pode ser obtido no endereo http://docs. jquery.com/Downloading_jQuery. Ele est disponvel em duas verses: Compressed e Uncompressed. Em produo, a primeira verso deve ser utilizada para no sobrecarregar a transferncia de dados entre o Web Server e os navegadores. Em desenvolvimento, podemos utilizar a segunda verso pois ela possui um cdigo bem mais legvel o que facilita a depurao.
1 < head > 2 < script type = " text / javascript " src = " jquery . js " > </ script > 3 </ head >

Nessa abordagem, a quantidade de dados transferidos entre o Web Server e os navegadores muito alta. Alm disso, dependendo da localizao dos usurios, a latncia para o download do arquivo JavaScript do jQuery pode ser alta tambm. Para diminuir essa quantidade de dados e essa latncia, podemos utilizar um CDN (Content Delivery Network). Basicamente, CDN uma rede de computadores conectados Internet focada na distribuio de contedo. Eis algumas opes 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 >

A documentao completa do jQuery est no endereo http://docs.jquery.com/.

Exerccios de Fixao

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 necessrio
instalar o IIS conforme vimos anteriormente.

Importante No Ubuntu, utilizando o Apache HTTP Server como Web Server, voc deve salvar o projeto jQuery em /home/<USUARIO>/public_html. Lembre-se que necessrio
instalar e congurar 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

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 >
Cdigo HTML 5.6: jQuery.html

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-jquery-fixacao2.zip

No projeto jQuery, crie um arquivo chamado jQuery.js.


www.k19.com.br

378

379
1 2 3 4 5 6 7 $ ( " # esconder " ) . click ( function () { $ ( " div " ) . slideUp () ; }) ; $ ( " # mostrar " ) . click ( function () { $ ( " div " ) . slideDown () ; }) ;
Cdigo Javascript 5.1: jQuery.js

J Q UERY

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-jquery-fixacao3.zip

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/jQuery/public_html/jQuery.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/jQuery/public_html/jQuery.html.

Eventos
Evento ready Descrio Esse evento disparado aps o carregamento rvore de elementos do documento HTML.
http://api.jquery.com/ready

resize scroll focus focusin

Esse evento disparado quando a janela do navegador redimensionada.


http://api.jquery.com/resize

Esse evento disparado quando a barra de rolagem de um elemento movimentada.


http://api.jquery.com/scroll

Esse evento disparado quando um elemento ganha o foco.


http://api.jquery.com/focus

Esse evento disparado quando um elemento ou um dos seus descendentes ganha o foco.
http://api.jquery.com/focusin

blur focusout

Esse evento disparado quando um elemento perde o foco.


http://api.jquery.com/blur

Esse evento disparado quando um elemento ou um dos seus descendentes perde o foco.
http://api.jquery.com/focusout

select change

Esse evento disparado quando o valor de um elemento selecionado.


http://api.jquery.com/select

Em determinados casos, esse evento disparado depois de um elemento ter o seu valor modicado e em seguida perder o foco. Em outros casos, esse evento disparado depois de um elemento ter o seu valor modicado 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 Descrio Esse evento semelhante ao evento keydown. Contudo, ele no disparado para teclas que no representam caracteres (exemplo: SHIFT, CTRL, ALT, entre outros). O keypress disparado depois do keydown.
http://api.jquery.com/keypress

Evento keypress

keyup click

Esse evento disparado quando uma tecla solta.


http://api.jquery.com/keyup

Esse evento disparado quando o usurio clica sobre um elemento com o boto esquerdo ou com o boto do meio do mouse.
http://api.jquery.com/click

dblclick

Esse evento disparado quando o usurio realiza um duplo clique sobre um elemento com o boto esquerdo ou com o boto do meio do mouse.
http://api.jquery.com/dblclick

mousedown

Esse evento disparado quando o usurio pressiona um boto do mouse sobre um determinado elemento.
http://api.jquery.com/mousedown

mouseup

Esse evento disparado quando o usurio solta um boto do mouse sobre um determinado 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 no estar sobre um determinado elemento.
http://api.jquery.com/mouseleave

hover mouveover

Esse evento disparado no mouseenter e mouseleave.


http://api.jquery.com/hover

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 no 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 determinado elemento ou sobre os seus descendentes.
http://api.jquery.com/mousemove

submit

Esse evento disparado quando um formulrio enviado.


http://api.jquery.com/submit

on
Podemos denir o tratamento dos eventos com o mtodo on. No exemplo abaixo, o primeiro parmetro o nome do evento que ser tratado e o segundo parmetro a funo que tratar o evento.
1 $( " body " ) . on ( " click " , function () { 2 console . log ( " click " ) ; 3 }) ;

O tratamento de diversos eventos pode ser denido com uma nica chamada do mtodo on.
1 $( " body " ) . on ( " click mouseenter mouseleave " , function () {

380

www.k19.com.br

381
2 console . log ( " click mouseenter mouseleave " ) ; 3 }) ;

J Q UERY

off
Podemos eliminar o tratamento de um evento com o mtodo off. A seguir, mostramos algumas formas de utilizao desse mtodo.
1 2 3 4 5 6 7 8 /* Removendo todos os tratamentos associados aos eventos dos pargrafos */ $( " p " ) . off () ; /* Removendo todos os tratamentos associados ao evento de clique dos pargrafos */ $( " p " ) . off ( " click " ) ; /* Removendo um tratamento especfico associado ao evento de clique dos pargrafos */ $( " p " ) . off ( " click " , tratamento ) ;

Atalhos
O tratamento de um evento pode ser denido atravs de mtodos que funcionam como atalhos para o mtodo on. No exemplo abaixo, utilizamos o mtodo click que um atalho para on("click", funo).
1 $( " body " ) . click ( function () { 2 console . log ( " click " ) ; 3 }) ;

Analogamente, para cada evento, h um mtodo de atalho com o mesmo nome.

Propriedades
Os eventos so associados informaes especicas. Por exemplo, quando o evento click disparado, ele associado a uma coordenada horizontal e uma vertical. Essas coordenadas denem a posio do ponteiro do mouse quando o clique ocorreu. Para recuperar essas informaes, basta adicionar um parmetro nas funes de tratamento de eventos. No exemplo abaixo, utilizamos as propriedades pageX e pageY para recuperar as coordenadas correspondentes posio do ponteiro do mouse quando um clique ocorrer no body.
1 $( " body " ) . click ( function ( event ) { 2 console . log ( " click : ( " + event . pageX + " , " + event . pageY + " ) " ) ; 3 }) ;

Propriedade pageX pageY

Descrio Coordenada horizontal da posio do ponteiro do mouse.


http://api.jquery.com/event.pageX

Coordenada vertical da posio do ponteiro do mouse.


http://api.jquery.com/event.pageY

event.timeStampA diferena 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 Descrio A tecla ou o boto do mouse que foi pressionado.


http://api.jquery.com/event.which

Propriedade event.which

Mais Sobre
Podemos utilizar a propriedade event.which para recuperar o keyCode das teclas pressionadas nos eventos keydown, keypress e keyup. Contudo, importante saber que o mapeamento de teclas para os eventos keydown e keyup diferente do mapeamento de teclas para o evento keypress.

Exerccios de Fixao

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

Cdigo HTML 5.7: eventos.html

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-jquery-fixacao5.zip

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 }) ;

Cdigo Javascript 5.7: eventos.js

Arquivo: https://github.com/K19/K19-Exercicios/archive/k
384

2-jquery-fixacao6.zip

www.k19.com.br

385
7

J Q UERY

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/jQuery/public_html/eventos.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/jQuery/public_html/eventos.html.

Utilize o console do navegador para observar as mensagens exibidas.

Seletores
Seletor
*

Descrio
Seleciona todos os elementos.
Exemplo: selecionando todos os elementos.

$("*");
http://api.jquery.com/all-selector

[atributo]

Seleciona os elementos que possuem o atributo especicado.


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 especicado.
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 no igual ao valor especicado.
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 comea com o valor especicado.
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 especicado.
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 Descrio
Seleciona os elementos tal que o valor de um determinado atributo contm o valor especicado como substring.
Exemplo: selecionando os imgs com title contendo a string logo.

Seletor
[atributo*="valor"]

$ ( " img [ title *= logo ] " )


http://api.jquery.com/attribute-contains-selector

[atributo="valor"]

Seleciona os elementos tal que o valor de um determinado atributo contm o valor especicado 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 especicado ou inicia com esse valor seguido do caractere -.
Exemplo: selecionando os imgs com title iniciando com o prexo logo.

$ ( " img [ title |= logo ] " )


http://api.jquery.com/attribute-contains-prefix-selector

[f1][f2]...[fn]

Seleciona os elementos de acordo com os ltros de atributo especicados.


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 identicador especicado.


Exemplo: selecionando o elemento com id igual a conteudo .

$ ( " # conteudo " )


http://api.jquery.com/id-selector

tipo

Seleciona todos os elementos do tipo especicado.


Exemplo: selecionando os divs.

$ ( " div " )


http://api.jquery.com/element-selector

s1 s2

Seleciona todos os elementos que combinam com o seletor s2 e so 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 so lhos de elementos que combinam com o seletor s1.
Exemplo: selecionando os spans lhos de um div.

$ ( " div > span " )


http://api.jquery.com/child-selector

386

www.k19.com.br

387 Seletor
s1 + s2

J Q UERY

Descrio
Seleciona todos os elementos que combinam com o seletor s2 e so irmos 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 so irmos 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 especicada.


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 especicados.
Exemplo: selecionando os divs ou os elementos da classe titulo.

$ ( " div , . titulo " )


http://api.jquery.com/multiple-selector

:rst

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 utilizado.
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 Descrio
Da lista de elementos que combinam com o seletor utilizado, seleciona do primeiro elemento at o (n-1)-simo.
Exemplo: selecionando do primeiro ao dcimo div.

Seletor
:lt(n)

$ ( " div : lt (1 ) " )


http://api.jquery.com/lt-selector

:even

Da lista de elementos que combinam com o seletor utilizado, seleciona todos os elementos de ndice par.
Exemplo: selecionando os divs de ndice 0, 2, 4, 6 . . .

$ ( " div : even " )


http://api.jquery.com/even-selector

:odd

Da lista de elementos que combinam com o seletor utilizado, seleciona todos os elementos de ndice mpar.
Exemplo: selecionando os divs de ndice 1, 3, 5, 7 . . . .

$ ( " div : odd ")


http://api.jquery.com/odd-selector

:rst-child

Seleciona os elementos que no possuem um irmo antecessor.


Exemplo: selecionando os divs que no possuem um irmo antecessor.

$ ( " div : first - child " )


http://api.jquery.com/first-child-selector

:rst-of-type

Seleciona os elementos que no possuem um irmo antecessor do mesmo tipo.


Exemplo: selecionando os divs que no possuem um irmo div antecessor.

$ ( " div : first - of - type " )


http://api.jquery.com/first-of-type-selector

:last-child

Seleciona os elementos que no possuem um irmo sucessor.


Exemplo: selecionando os divs que no possuem um irmo sucessor.

$ ( " div : last - child " )


http://api.jquery.com/last-child-selector

:last-of-type

Seleciona os elementos que no possuem um irmo sucessor do mesmo tipo.


Exemplo: selecionando os divs que no possuem um irmo div sucessor.

$ ( " div : last - of - type " )


http://api.jquery.com/last-of-type-selector

:nth-child(n)

Seleciona os elementos que possuem (n - 1) irmos antecessores.


Exemplo: selecionando os divs que possuem exatamente 3 irmos antecessores.

$ ( " div : nth - child (4) " )


http://api.jquery.com/nth-child-selector

388

www.k19.com.br

389 Seletor
:nth-last-child(n)

J Q UERY

Descrio
Seleciona os elementos que possuem (n - 1) irmos sucessores.
Exemplo: selecionando os divs que possuem exatamente 3 irmos sucessores.

$ ( " div : nth - child (4) " )


http://api.jquery.com/nth-last-child-selector

:nth-of-type(n)

Seleciona os elementos que possuem (n - 1) irmos antecessores do mesmo tipo.


Exemplo: selecionando os divs que possuem exatamente 3 irmos 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) irmos sucessores do mesmo tipo.


Exemplo: selecionando os divs que possuem exatamente 3 irmos div sucessores.

$ ( " div : nth - last - of - type (4) " )


http://api.jquery.com/nth-last-of-type-selector

:only-child

Seleciona todos os elementos que no possuem irmos.


Exemplo: selecionando os divs que no possuem irmos.

$ ( " div : only - child " )


http://api.jquery.com/only-child-selector

:only-of-type

Seleciona todos os elementos que no possuem irmos do mesmo tipo.


Exemplo: selecionando os divs que no possuem irmos div.

$ ( " div : only - of - type " )


http://api.jquery.com/only-of-type-selector

:parent

Seleciona todos os elementos que possuem lhos.


Exemplo: selecionando os divs que possuem lho.

$ ( " div : parent " )


http://api.jquery.com/parent-selector

:hidden

Seleciona os elementos considerados hidden. Os elementos que no ocupam espao na pgina so 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 espao na pgina so considerados visible.
Exemplo: selecionando os divs visible.

$ ( " div : visible " )


http://api.jquery.com/visible-selector

www.facebook.com/k19treinamentos

389

J Q UERY

390 Descrio
Seleciona todos os elementos desabilitados.
Exemplo: selecionando os inputs desabilitados.

Seletor
:disabled

$ ( " 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 especicado em seu contedo.


Exemplo: selecionando os divs que contm o texto k19.

$ ( " div : contains ( k19 ) " )


http://api.jquery.com/contains-selector

:empty

Seleciona todos os elementos sem contedo.


Exemplo: selecionando os divs que no possuem contedo.

$ ( " 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 parmetro.
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 no combinam com o seletor especicado.


Exemplo: selecionando os elementos que no so 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

:le

Seleciona todos os elementos com type="le".


Exemplo: selecionando os inputs com type=le.

$ ( " input : file " )


http://api.jquery.com/file-selector

390

www.k19.com.br

391 Seletor
:image

J Q UERY

Descrio
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 :header :lang(linguagem)

Seleciona todos os elementos input e textarea.


http://api.jquery.com/input-selector

Seleciona os ttulos (h1,h2,h3,h4,h5 e h6).


http://api.jquery.com/header-selector

Seleciona todos os elementos com lang igual linguagem especicada.


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 Descrio
Seleciona todos os elementos que esto com alguma animao em andamento.
Exemplo: selecionando os divs com animao em andamento.

Seletor
:animated

$ ( " div : animated " )


http://api.jquery.com/animated-selector

:root :selected :checked :focus :target

Seleciona o elemento raiz do documento.


http://api.jquery.com/root-selector

Seleciona os elementos option marcados.


http://api.jquery.com/selected-selector

Seleciona todos os checkboxes, radios e options marcados.


http://api.jquery.com/checked-selector

Seleciona o elemento que tem o foco.


http://api.jquery.com/focus-selector

Seleciona o elemento com id igual ao fragmento da URL.


http://api.jquery.com/target-selector

Exerccios de Fixao

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 - Lgica de Programao </ li > 24 < li > K 2 - Desenvolvimento Web com HTML , CSS e JavaScript </ li > 25 < li > K 3 - Lgica de Programao </ li > 26 </ ul > 27 </ body > 28 </ html >
Cdigo HTML 5.8: seletores.html

Arquivo: https://github.com/K19/K19-Exercicios/archive/k
392

2-jquery-fixacao8.zip

www.k19.com.br

393
9

J Q UERY

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 " color " : " red " 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 }) ;
Cdigo 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 endereo:


http://localhost/jQuery/public_html/seletores.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/jQuery/public_html/seletores.html.

Efeitos e Animaes
Efeito
fadeIn fadeOut fadeToggle

Descrio
Faz os elementos se tornarem opacos gradativamente.
http://api.jquery.com/fadeIn

Faz os elementos se tornarem transparentes gradativamente.


http://api.jquery.com/fadeOut

Faz os elementos opacos se tornarem transparentes gradativamente e os elementos transparentes se tornarem opacos gradativamente.
http://api.jquery.com/fadeToggle

fadeTo(opacidade)

Modica a opacidade dos elementos gradativamente at atingir a opacidade especicada.


http://api.jquery.com/fadeTo

hide

Esconde os elementos.
http://api.jquery.com/hide

www.facebook.com/k19treinamentos

393

J Q UERY

394 Descrio
Exibe os elementos.
http://api.jquery.com/show

Efeito
show toggle

Esconde os elementos que esto sendo exibidos e exibe os elementos que esto escondidos.
http://api.jquery.com/toggle

slideDown slideUp slideToggle

Exibe os elementos com efeito de deslizamento.


http://api.jquery.com/slideDown

Esconde os elementos com efeito de deslizamento.


http://api.jquery.com/slideUp

Exibe os elementos que esto escondidos com efeito de deslizamento. Esconde os elementos que esto sendo exibidos com efeito de deslizamento.
http://api.jquery.com/slideToggle

animate

Modica gradativamente determinadas propriedades CSS at atingir os valores especicados.


http://api.jquery.com/animate

Durao
Podemos denir a durao dos efeitos ou animaes em milissegundos. No exemplo abaixo, o tempo de execuo do efeito fadeOut foi denido como 1000 milissegundos.
1 $( " a " ) . click ( function () { 2 $( this ) . fadeOut (1 ); 3 }) ;

Callback
Podemos denir uma funo para ser executada ao trmino da execuo dos efeitos ou das animaes. No exemplo abaixo, uma funo que exibe a mensagem terminou o fadeOut foi associada ao trmino do efeito fadeOut.
1 $( " a " ) . click ( function () { 2 $( this ) . fadeOut (1 , function () { 3 console . log ( " terminou o fadeOut " ) ; 4 }) ; 5 }) ;

Exerccios de Fixao

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
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 >
Cdigo HTML 5.9: efeitos.html

J Q UERY

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 }) ;
Cdigo 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 endereo:


http://localhost/jQuery/public_html/efeitos.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/jQuery/public_html/efeitos.html.

Manipulao
Mtodo
addClass

Descrio
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 Mtodo
removeClass

J Q UERY

Descrio
Remove uma, vrias 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 presena de uma ou mais classes nos elementos selecionados.


Exemplo: invertendo a presena das classes grid e destaque nos divs.

$ ( " div " ) . toggleClass ( " grid destaque " ) ;


http://api.jquery.com/toggleClass

hasClass

Verica se algum dos elementos selecionados da classe especicada.


Exemplo: vericando se algum pargrafo da classe destaque.

var resposta = $ ( " p " ) . hasClass ( " destaque " )


http://api.jquery.com/hasClass

after

Adiciona um determinado contedo imediatamente depois de cada um dos elementos selecionados.


Exemplo: adicionando um pargrafo imediatamente depois dos h1.

$ ( " h1 " ) . after ( " <p > subttulo </ p > " )
http://api.jquery.com/after

before

Adiciona um determinado contedo imediatamente antes de cada um dos elementos selecionados.


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 pargrafo imediatamente depois dos h1.

$ ( <p > subttulo </ 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 Descrio
Adiciona um determinado contedo no nal do corpo de cada um dos elementos selecionados.
Exemplo: adicionando o texto (fonte: K19) no nal de cada p.

Mtodo
append

$ ( " p " ) . append ( " <em >( fonte K19 ) </ em > " )
http://api.jquery.com/append

prepend

Adiciona um determinado contedo no comeo do corpo de cada um dos elementos selecionados.


Exemplo: adicionando o texto (fonte: K19) no comeo 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 nal 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 comeo de cada p.

$ ( " <em >( fonte K19 ) </ em > " ) . prependTo ( " p " )
http://api.jquery.com/prependTo

attr

Esse mtodo pode ser utilizado para dois propsitos. O primeiro recuperar os valores dos atributos do primeiro elemento selecionado. O segundo alterar os valores dos atributos de todos os elementos selecionados.
Exemplo: recuperando o id do primeiro div.

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 mtodo pode ser utilizado para dois propsitos. O primeiro recuperar os valores das propriedades do primeiro elemento selecionado. O segundo alterar os valores das propriedades de todos os elementos selecionados.
Exemplo: recuperando o valor da propriedade checked do primeiro input com type=checkbox.

var checked = $ ( " input [ checkbox ] " ) . prop ( " checked " ) ;

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 Mtodo
css

J Q UERY

Descrio
Esse mtodo pode ser utilizado para dois propsitos. O primeiro recuperar os valores das propriedades CSS do primeiro elemento selecionado. O segundo alterar os valores das propriedades CSS de todos os elementos selecionados.
Exemplo: recuperando a propriedade CSS color do primeiro div.

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 especicado dos elementos selecionados.


Exemplo: removendo o atributo title dos imgs.

$ ( " img " ) . removeAttr ( " title " ) ;


http://api.jquery.com/removeAttr

removeProp

Remove a propriedade especicada dos elementos selecionados.


Exemplo: removendo a propriedade title dos imgs.

$ ( " img " ) . removeProp ( " title " ) ;


http://api.jquery.com/removeProp

clone

Cria uma cpia dos elementos selecionados.


Exemplo: criando uma cpia de todos os pargrafos.

var paragrafos = $ ( " p " ) . clone () ;


http://api.jquery.com/clone

detach

Remove os elementos selecionados da rvore de elementos e os devolve.


Exemplo: retirando os pargrafos.

var paragrafos = $ ( " p " ) . detach () ;


http://api.jquery.com/detach

empty

Remove o contedo dos elementos selecionados.


Exemplo: removendo o contedo dos pargrafos.

$ ( " p " ) . empty () ;


http://api.jquery.com/empty

remove

Remove os elementos selecionados da rvore de elementos.


Exemplo: removendo os pargrafos.

$ ( " p " ) . remove () ;


http://api.jquery.com/remove

www.facebook.com/k19treinamentos

399

J Q UERY

400 Descrio
Substitui todos os elementos selecionados.
Exemplo: substituindo todos os pargrafos por <p>K19</p>.

Mtodo
replaceAll

$ ( " <p > K19 </ p > " ) . replaceAll ( " p " ) ;
http://api.jquery.com/replaceAll

replaceWith

Semelhante ao replaceAll com sintaxe levemente diferente.


Exemplo: substituindo todos os pargrafos por <p>K19</p>.

$ ( " p " ) . replaceWith ( " <p > K19 </ p > " ) ;
http://api.jquery.com/replaceWith

height

Esse mtodo pode ser utilizado para dois propsitos. O primeiro recuperar a altura do primeiro elemento selecionado. O segundo alterar a altura de todos os elementos selecionados.
Exemplo: recuperando a altura do primeiro div.

var altura = $ ( " div " ) . height () ;

Exemplo: alterando altura dos divs.

$ ( " div " ) . height (1


http://api.jquery.com/height

);

width

Esse mtodo pode ser utilizado para dois propsitos. O primeiro recuperar a largura do primeiro elemento selecionado. O segundo alterar a largura de todos os elementos selecionados.
Exemplo: recuperando a largura do primeiro div.

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 largura, 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 Mtodo
outerHeight

J Q UERY

Descrio
Recupera o outerHeight do primeiro elemento selecionado. Se esse mtodo for chamado sem parmetros, o outerHeight a soma da altura, margem interna inferior, margem interna superior, borda inferior e borda superior. Se ele for chamado com o parmetro 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 mtodo for chamado sem parmetros, 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 parmetro 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 externa 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 mtodo pode ser utilizado para dois propsitos. O primeiro recuperar o contedo HTML do primeiro elemento selecionado. O segundo alterar o contedo HTML de todos os elementos selecionados.
Exemplo: recuperando o contedo HTML do primeiro div.

var conteudo = $ ( " div " ) . html () ;

Exemplo: alterando o contedo HTML dos divs.

$ ( " div " ) . html ( " <h1 > K19 < h /1 > <p > Cursos da K19 . </p > " ) ;
http://api.jquery.com/html

text

Esse mtodo pode ser utilizado para dois propsitos. O primeiro recuperar o o texto contido no corpo do primeiro elemento selecionado. O segundo alterar o texto contido no corpo de todos os elementos selecionados.
Exemplo: recuperando o texto contido no corpo do primeiro div.

var texto = $ ( " div " ) . text () ;

Exemplo: alterando o texto contido no corpo dos divs.

$ ( " div " ) . text ( " K19 Cursos " ) ;


http://api.jquery.com/text

val

Esse mtodo utilizado para recuperar o valor de elementos como input, textarea e select. Ele considera o primeiro elemento selecionado.
Exemplo: recuperador o valor do primeiro input.

var valor = $ ( " input " ) . val () ;


http://api.jquery.com/val

www.facebook.com/k19treinamentos

401

J Q UERY

402 Descrio
Adiciona na rvore de elementos uma estrutura envolvendo cada um dos elementos selecionados.
Exemplo: Envolvendo cada pargrafo com a estrutura <section><div></div></section>.

Mtodo
wrap

$ ( " p " ) . wrap ( " < section > < div > </ div > </ section > " ) ;
http://api.jquery.com/wrap

wrapAll

Adiciona na rvore de elementos uma estrutura envolvendo o conjunto dos elementos selecionados.
Exemplo: Envolvendo os pargrafos com a estrutura <section><div></div></section>.

$ ( " p " ) . wrapAll ( " < section > < div > </ div > </ section > " ) ;
http://api.jquery.com/wrapAll

wrapInner

Adiciona na rvore de elementos uma estrutura envolvendo o contedo de cada um dos elementos selecionados.
Exemplo: Envolvendo o contedo dos pargrafos 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 pargrafos.

$ ( " p " ) . unwrap () ;


http://api.jquery.com/unwrap

offset

Esse mtodo pode ser utilizado para dois propsitos. O primeiro recuperar a posio do primeiro elemento selecionado. O segundo alterar a posio de todos os elementos selecionados. Nessa alterao, os elementos com position: static passam para position: relative.
Exemplo: recuperando o offset do primeiro div.

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 posio do primeiro elemento selecionado em relao ao elemento pai.


Exemplo: recuperando a posio 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 Mtodo
scrollLeft

J Q UERY

Descrio
Esse mtodo pode ser utilizado para dois propsitos. O primeiro recuperar a posio da barra de rolagem horizontal do primeiro elemento selecionado. O segundo alterar a posio da barra de rolagem horizontal de todos os elementos selecionados.
Exemplo: recuperando a posio da barra de rolagem horizontal do primeiro div.

var scrollLeft = $ ( " div " ) . scrollLeft () ;

Exemplo: alterando a posio da barra de rolagem horizontal dos divs.

$ ( " div " ) . scrollLeft (3


http://api.jquery.com/scrollLeft

);

scrollTop

Esse mtodo pode ser utilizado para dois propsitos. O primeiro recuperar a posio da barra de rolagem vertical do primeiro elemento selecionado. O segundo alterar a posio da barra de rolagem vertical de todos os elementos selecionados.
Exemplo: recuperando a posio da barra de rolagem vertical do primeiro div.

var scrollTop = $ ( " div " ) . scrollTop () ;

Exemplo: alterando a posio da barra de rolagem vertical dos divs.

$ ( " div " ) . scrollTop (3


http://api.jquery.com/scrollTop

);

Exerccios de Fixao

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 >
Cdigo 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
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 }) ;
Cdigo Javascript 5.119: manipulacao.js

J Q UERY

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-jquery-fixacao15.zip

16

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/jQuery/public_html/manipulacao.html. www.facebook.com/k19treinamentos

405

J Q UERY

406

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/jQuery/public_html/manipulacao.html.

Mais mtodos
Mtodo
add

Descrio
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 irmos de cada elemento de um conjunto.


Exemplo: recupera os irmos dos divs e dos spans.

$ ( " div , span " ) . siblings ()


http://api.jquery.com/siblings

children

Recupera os lhos de cada elemento de um conjunto. Opcionalmente, pode receber um seletor como parmetro para ltrar o resultado.
Exemplo: recuperando os lhos dos divs e dos spans.

$ ( " div , span " ) . children () ;

Exemplo: recuperando os lhos dos divs e dos spans que possuam a classe destaque.

$ ( " div , span " ) . children ( " . destaque " ) ;


http://api.jquery.com/children

nd

Recupera os descendentes de cada elemento de um conjunto. Opcionalmente, pode receber um seletor como parmetro para ltrar 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 Mtodo
each

J Q UERY

Descrio
Permite executar uma funo 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 funo para cada elemento de um conjunto. Essa funo pode devolver um valor. Esses valores sero devolvidos em um objeto jQuery.
Exemplo: recupera a largura dos divs.

function pegaAltura ( indice , elemento ) { return $ ( elemento ) . width () ; } var alturas = $ ( " div " ) . map ( pegaAltura ) ;
http://api.jquery.com/map

lter

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 especicado.
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

rst

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 especicado.


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 Descrio
Recupera um determinado trecho de uma lista de elementos.
Exemplo: recuperando do terceiro ao dcimo elementos da lista de divs e spans.

Mtodo
slice

$ ( " div , span " ) . slice (2 , 9) ;


http://api.jquery.com/slice

next

Devolve os irmos adjacentes sucessores dos elementos de um conjunto.


Exemplo: recupera os irmos adjacentes sucessores dos divs e spans.

$ ( " div , span " ) . next ()


http://api.jquery.com/next

nextAll

Devolve os irmos sucessores dos elementos de um conjunto.


Exemplo: recupera os irmos sucessores dos divs e spans.

$ ( " div , span " ) . nextAll ()


http://api.jquery.com/nextAll

prev

Devolve os irmos adjacentes antecessores dos elementos de um conjunto.


Exemplo: recupera os irmos adjacentes antecessores dos divs e spans.

$ ( " div , span " ) . prev ()


http://api.jquery.com/prev

prevAll

Devolve os irmos antecessores dos elementos de um conjunto.


Exemplo: recupera os irmos antecessores dos divs e spans.

$ ( " div , span " ) . prevAll ()


http://api.jquery.com/prevAll

AJAX
A forma bsica de interao entre os usurios e as pginas web limitada. Quando o usurio clica em um link ou em um boto de uma pgina web, uma requisio HTTP enviada ao servidor correspondente. Quando chegar no servidor, essa requisio ser processada. No trmino desse processamento, o servidor enviar uma resposta HTTP contendo uma pgina web para a mquina do usurio. Ao receber essa resposta, o navegador do usurio carregar a pgina inteira. Nessa abordagem, muitas vezes, ocorre um desperdcio de tempo, pois, na maior parte dos casos, no seria necessrio carregar a pgina inteira e sim pequenos pedaos dela. Mesmo assim, o navegador sempre carregar todo o contedo das pginas web. Alm disso, h outro problema nessa abordagem, o usurio no pode interagir com a pgina web durante o envio da requisio HTTP; processamento no servidor; envio da resposta HTTP e carregamento do pgina. Para aumentar a interatividade entre os usurios e as pginas web, podemos utilizar a forma de interao conhecida como AJAX (Asynchronous Javascript and XML). Nessa outra abordagem, os navegadores podem atualizar pedaos de uma pgina web sem ter carreg-la completamente.
408
www.k19.com.br

409

J Q UERY

Alm disso, com AJAX, os usurios podem interagir com as pginas web durante o envio da requisio HTTP; processamento no servidor; envio da resposta HTTP e carregamento parcial das pginas web. Utilizaremos os recursos da biblioteca jQuery para implementar a interao entre os usurios e as pginas web com AJAX.

load
Podemos obter contedo de Web Server atravs do mtodo load. Esse mtodo realiza requisies HTTP do tipo GET com AJAX. No exemplo abaixo, o contedo do documento HTML k19.html obtido do servidor e inserido no corpo do elemento com id="conteudo".
$( " # conteudo " ) . load ( " k19 . html " ) ;

get
Podemos realizar requisies HTTP do tipo GET com AJAX atravs do mtodo get. Esse mtodo recebe como parmetro a URL correspondente requisio que desejamos realizar. No exemplo abaixo, a requisio foi realizada para URL k19.php mas o resultado foi ignorado.
$. get ( " k19 . php " ) ;

Para recuperar o resultado da requisio devemos utilizar o mtodo done. Devemos passar como argumento para esse mtodo a funo que tratar o resultado. Essa funo receber o resultado como parmetro. Observe, no exemplo abaixo, que o resultado exibido no console do navegador.
var get = $. get ( " k19 . php " ) ; get . done ( function ( resultado ) { console . log ( resultado ) ; }) ;

Tambm 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 so enviados como parmetro na URL da requisio.

k19.php?nome=Rafael&empresa=K19

post
Podemos realizar requisies HTTP do tipo POST com AJAX atravs do mtodo post. Esse mtodo funciona de forma semelhante ao mtodo get. Veja alguns exemplos.
$. post ( " k19 . php " ) ;

www.facebook.com/k19treinamentos

409

J Q UERY

410

var 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 so enviados corpo da requisio HTTP.

k19.php?nome=Rafael&empresa=K19

Exerccios de Fixao

17

No projeto jQuery, crie um arquivo chamado ajax.php.


<? php $soma = $_REQUEST [ " x " ] + $_REQUEST [ " y " ]; echo $soma ; ?>
Cdigo HTML 5.11: ajax.php

1 2 3 4 5

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
21 </ html >
Cdigo HTML 5.12: ajax.html

J Q UERY

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 }) ;
Cdigo 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 endereo:


http://localhost/jQuery/public_html/ajax.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/jQuery/public_html/ajax.html.

Exerccios Complementares

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
# saida { margin : px auto ; width : 8 px ; height : 2 px ; overflow : auto ; } # content { width : 8 px ; margin : 25 px auto }

19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 39 4 41 42 43 44 45 46 47 48 49 5 51 52 53 54 55 56 57 58 59 6 61 62 63 64 65 66 67 68 69 7 71 72 73 74 75 76 77 78 79 8 81 82 83 84 85 86 87 88

px ;

pre { padding : 1 px ; border - radius : 15 px ; background - color : # eeeeee ; } # div1 , # div2 { background - color : yellow ; width : 2 px ; height : 2 px ; } # div3 { background - color : blue ; width : 5 px ; height : 5 px ; margin : auto ; } </ style > </ head > < body id = " body " > < div id = " header " > < div id = " saida " > </ div > </ div > < div id = " content " > < h1 > ready </ h1 > < pre id = " ready - on " > $( document ) . ready ( function () { var saida = $( " # saida " ) ; saida . append ( " evento ready disparado & lt ; br & gt ; " ) ; }) ; </ pre > < h1 > resize </ h1 > < button id = " resize " > ON </ button > < pre > /* ON */ $( window ) . resize ( function () { var largura = $( window ) . width () ; var altura = $( window ) . height () ; saida . append ( " resize : ( " + largura + " , " + altura + " ) " ) ; saida . append ( " & lt ; br & gt ; " ) ; saida . scrollTop ( saida . prop ( " scrollHeight " ) ) ; }) ; /* OFF */ $( window ) . off ( " resize " ) ; </ pre > < h1 > scroll </ h1 > < button id = " scroll " > ON </ button > < pre > /* ON */ $( window ) . scroll ( function () { var x = $( window ) . scrollLeft () ; var y = $( window ) . scrollTop () ; saida . append ( " scroll : ( " + x + " , " + y + " ) " ) ;

412

www.k19.com.br

413
89 9 91 92 93 94 95 96 97 98 99 1 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 11 111 112 113 114 115 116 117 118 119 12 121 122 123 124 125 126 127 128 129 13 131 132 133 134 135 136 137 138 139 14 141 142 143 144 145 146 147 148 149 15 151 152 153 154 155 156 157 158 saida . append ( " & lt ; br & gt ; " ) ; saida . scrollTop ( saida . prop ( " scrollHeight " ) ) ; }) ; /* OFF */ $( window ) . off ( " scroll " ) ; </ pre > < h1 > focus , focusin , blur e focusout </ h1 > < button id = " foco " > ON </ button > < pre > /* ON */ $( " * " ) . on ( " focus focusin blur focusout " , function ( event ) { var tag = this . tagName ; var id = this . id ; var type = event . type ; saida . append ( type + " ( " + tag + " , # " + id + " ) " ) ; saida . append ( " & lt ; br & gt ; " ) ; saida . scrollTop ( saida . prop ( " scrollHeight " ) ) ; } ); /* OFF */ $( " * " ) . off ( " focus focusin blur focusout " ) ; </ pre > < label > Teste : </ label > < input id = " input1 " > < h1 > select </ h1 > < button id = " select " > ON </ button > < pre > /* ON */ $( " # input2 " ) . select ( function () { saida . append ( " select : ( " + window . getSelection () + " ) " ) ; saida . append ( " & lt ; br & gt ; " ) ; saida . scrollTop ( saida . prop ( " scrollHeight " ) ) ; }) ; /* OFF */ $( " # input2 " ) . off ( " select " ) ; </ pre > < label > Teste : </ label > < input id = " input2 " > < h1 > change </ h1 > < button id = " change " > ON </ button > < pre > /* ON */ $( " input3 " ) . change ( function () { saida . append ( " change : ( " + $( this ) . val () + " ) " ) ; saida . append ( " & lt ; br & gt ; " ) ; saida . scrollTop ( saida . prop ( " scrollHeight " ) ) ; }) ; /* OFF */ $( " # input3 " ) . off ( " change " ) ; </ pre > < label > Teste : </ label > < input id = " input3 " > < h1 > keydown , keypress e keyup </ h1 > < button id = " key " > ON </ button > < pre > /* ON */ $( " # input4 " ) . on ( " keydown keypress keyup " , function ( event ) { var type = event . type ;

J Q UERY

www.facebook.com/k19treinamentos

413

J Q UERY

414
saida . append ( type + " : ( " + event . which + " ) " ) ; saida . append ( " & lt ; br & gt ; " ) ; saida . scrollTop ( saida . prop ( " scrollHeight " ) ) ;

159 16 161 162 163 164 165 166 167 168 169 17 171 172 173 174 175 176 177 178 179 18 181 182 183 184 185 186 187 188 189 19 191 192 193 194 195 196 197 198 199 2 2 1 2 2 2 3 2 4 2 5 2 6 2 7 2 8 2 9 21 211 212 213

} ); /* OFF */ $( " # input4 " ) . off ( " keydown keypress keyup " ) ; </ pre > < label > Teste : </ label > < input id = " input4 " > < h1 > click , dblclick , mousedown , mouseup , mouseenter , mouseleave , hover , mouseover e mouseout </ h1 > < button id = " mouse " > ON </ button > < pre > /* ON */ $( " # div1 " ) . on ( " click dblclick mousedown mouseup " + " mouseenter mouseleave hover mouseover mouseout " , function ( event ) { var type = event . type ; saida . append ( type + " : ( " + event . which + " ) " ) ; saida . append ( " & lt ; br & gt ; " ) ; saida . scrollTop ( saida . prop ( " scrollHeight " ) ) ; } ); /* OFF */ $( " # div1 " ) . off ( " click dblclick mousedown mouseup " + " mouseenter mouseleave hover mouseover mouseout " ) ; </ pre > < div id = " div1 " > < div id = " div3 " > </ div > </ div > < h1 > mousemove </ h1 > < button id = " mousemove " > ON </ button > < pre > /* ON */ $( " # div2 " ) . mousemove ( function ( event ) { var x = event . pageX ; var y = event . pageY ; var type = event . type ; saida . append ( type + " : ( " + x + " , " + y + " ) " ) ; saida . append ( " & lt ; br & gt ; " ) ; saida . scrollTop ( saida . prop ( " scrollHeight " ) ) ; }) ; /* OFF */ $( " # div2 " ) . off ( " mousemove " ) ; </ pre > < div id = " div2 " > </ div > </ div > </ body > </ html >
Cdigo HTML 5.13: jquery-complementar.html

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-jquery-complementar1.zip

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
6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 39 4 41 42 43 44 45 46 47 48 49 5 51 52 53 54 55 56 57 58 59 6 61 62 63 64 65 66 67 68 69 7 71 72 73 74 75 /* resize */ var resize = false ; $( " # resize " ) . click ( function () { if ( resize ) { $( window ) . off ( " resize " ) ; $( " # resize " ) . html ( " ON " ) ; resize = false ; } else { $( window ) . resize ( function () { var largura = $( window ) . width () ; var altura = $( window ) . height () ; saida . append ( " resize : ( " + largura + " , " + altura + " ) " ) ; saida . append ( " <br > " ) ; saida . scrollTop ( saida . prop ( " scrollHeight " ) ) ; }) ; $( " # resize " ) . html ( " OFF " ) ; resize = true ; } }) ; /* scroll */ var scroll = false ; $( " # scroll " ) . click ( function () { if ( scroll ) { $( window ) . off ( " scroll " ) ; $( " # scroll " ) . html ( " ON " ) ; scroll = false ; } else { $( window ) . scroll ( function () { var x = $( window ) . scrollLeft () ; var y = $( window ) . scrollTop () ; saida . append ( " scroll : ( " + x + " , " + y + " ) " ) ; saida . append ( " <br > " ) ; saida . scrollTop ( saida . prop ( " scrollHeight " ) ) ; }) ; $( " # scroll " ) . html ( " OFF " ) ; scroll = true ; } }) ; /* focus focusin blur focusout */ var foco = false ; $( " # foco " ) . click ( function () { if ( foco ) { $( " * " ) . off ( " focus focusin blur focusout " ) ; $( " # foco " ) . html ( " ON " ) ; foco = false ; } else { $( " * " ) . on ( " focus focusin blur focusout " , function ( event ) { var tag = this . tagName ; var id = this . id ; var type = event . type ; saida . append ( type + " ( " + tag + " , # " + id + " ) " ) ; saida . append ( " <br > " ) ; saida . scrollTop ( saida . prop ( " scrollHeight " ) ) ; } ); $( " # foco " ) . html ( " OFF " ) ; foco = true ; } }) ; /* select */ var select = false ; $( " # select " ) . click ( function () { if ( select ) { $( " # input2 " ) . off ( " select " ) ; $( " # select " ) . html ( " ON " ) ;

J Q UERY

www.facebook.com/k19treinamentos

415

J Q UERY

416

76 77 78 79 8 81 82 83 84 85 86 87 88 89 9 91 92 93 94 95 96 97 98 99 1 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 11 111 112 113 114 115 116 117 118 119 12 121 122 123 124 125 126 127 128 129 13 131 132 133 134 135 136 137 138 139 14 141 142 143 144 145

select = false ; } else { $( " # input2 " ) . select ( function () { saida . append ( " select : ( " + window . getSelection () + " ) " ) ; saida . append ( " <br > " ) ; saida . scrollTop ( saida . prop ( " scrollHeight " ) ) ; }) ; $( " # select " ) . html ( " OFF " ) ; select = true ; } }) ; /* change */ var change = false ; $( " # change " ) . click ( function () { if ( change ) { $( " # input3 " ) . off ( " change " ) ; $( " # change " ) . html ( " ON " ) ; change = false ; } else { $( " # input3 " ) . change ( function () { saida . append ( " change : ( " + $( this ) . val () + " ) " ) ; saida . append ( " <br > " ) ; saida . scrollTop ( saida . prop ( " scrollHeight " ) ) ; }) ; $( " # change " ) . html ( " OFF " ) ; change = true ; } }) ; /* key */ var key = false ; $( " # key " ) . click ( function () { if ( key ) { $( " # input4 " ) . off ( " keydown keypress keyup " ) ; $( " # key " ) . html ( " ON " ) ; key = false ; } else { $( " # input4 " ) . on ( " keydown keypress keyup " , function ( event ) { var type = event . type ; saida . append ( type + " : ( " + event . which + " ) " ) ; saida . append ( " <br > " ) ; saida . scrollTop ( saida . prop ( " scrollHeight " ) ) ; } ); $( " # key " ) . html ( " OFF " ) ; key = true ; } }) ; /* mouse */ var mouse = false ; $( " # mouse " ) . click ( function () { if ( mouse ) { $( " # div1 " ) . off ( " click dblclick mousedown mouseup " + " mouseenter mouseleave hover mouseover mouseout " ) ; $( " # mouse " ) . html ( " ON " ) ; mouse = false ; } else { $( " # div1 " ) . on ( " click dblclick mousedown mouseup " + " mouseenter mouseleave hover mouseover mouseout " , function ( event ) { var x = event . pageX ; var y = event . pageY ; var type = event . type ; saida . append ( type + " : ( " + x + " , " + y + " ) " ) ; saida . append ( " <br > " ) ;

416

www.k19.com.br

417
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 }) ;
Cdigo Javascript 5.149: jquery-complementar.js

J Q UERY

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-jquery-complementar2.zip

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/jQuery/public_html/jquery-complementar.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/jQuery/public_html/jquery-complementar.html.

Resumo do Captulo

Resumidamente, jQuery uma biblioteca JavaScript.

Podemos obter a biblioteca jQuery na verso compressed ou uncompressed.

A utilizao de um CDN (Content Delivery Network), melhora o tempo de carregamento e a disponibilidade da biblioteca jQuery.

O mtodo on() permite associar eventos jQuery aos elementos HTML.


www.facebook.com/k19treinamentos

417

J Q UERY 5

418

O mtodo off() permite dissociar eventos jQuery dos elementos HTML.

A biblioteca jQuery suporta todos os seletores do CSS. Alm disso, ela oferece alguns seletores que no existem no CSS.

Podemos denir o tempo de durao dos efeitos e animaes do jQuery.

Podemos determinar uma funo que deve ser executada ao trmino de um efeito ou anima-

o.

A biblioteca jQuery oferece muitos recursos para a manipulao dos elementos HTML.

Prova

Qual alternativa est correta?

a) jQuery uma biblioteca JavaScript. b) jQuery uma biblioteca HTML. c) jQuery uma biblioteca CSS. d) jQuery uma linguagem de programao. e) Todas as alternativas anteriores esto incorretas.

Qual alternativa est correta?

a) Geralmente, a utilizao de CDNs aumenta a quantidade dados transmitidos entre os navegadores e os Web Servers. b) Geralmente, a utilizao de CDNs diminui a disponibilidade do contedo. c) Geralmente, a utilizao de CDNs aumenta a latncia na transmisso de dados para os navegadores. d) Geralmente, a utilizao de CDNs aumenta a segurana dos sites e das aplicao web. e) Geralmente, a utilizao de CDNs diminui o tempo de carregamento das pginas web.

Quais alternativas esto corretas?


www.k19.com.br

418

419

J Q UERY

a) Podemos utilizar o mtodo on() para adicionar os tratamentos dos eventos. b) Podemos utilizar o mtodo enable() para determinar os tratamentos dos eventos. c) Podemos utilizar o mtodo event() para adicionar ou eliminar os tratamentos dos eventos. d) Podemos utilizar o mtodo off() para eliminar os tratamentos dos eventos. e) Podemos utilizar o mtodo disable() para eliminar os tratamentos dos eventos.

Qual alternativa est correta?

a) jQuery suporta apenas os seletores do CSS. b) jQuery no suporta todos os seletores do CSS. c) jQuery no suporta nenhum seletor CSS. d) jQuery suporta todos os seletores do CSS. e) Todas as alternativas anteriores esto incorretas.

Qual alternativa est correta?

a) fadeOn, fadeOff so efeitos do jQuery. b) slideLeft e slideRight so efeitos do jQuery. c) hide e show so efeitos do jQuery. d) jQuery no possui efeitos. e) Todas as alternativas anteriores esto incorretas.

Quais alternativas esto corretas?

a) O mtodo empty() remove o contedo dos elementos selecionados. b) O after adiciona contedo imediatamente depois dos elementos selecionados. c) O before adiciona contedo imediatamente antes dos elementos selecionados. d) O addClass adiciona uma ou mais classes aos elementos selecionados. e) O clone cria uma cpia dos elementos selecionados.

Qual alternativa est correta?


www.facebook.com/k19treinamentos

419

J Q UERY

420

a) A utilizao do AJAX elimina o cdigo JavaScript. b) jQuery oferece diversos recursos para a utilizao do AJAX. c) O principal objetivo do AJAX facilitar a utilizao do CSS. d) AJAX uma biblioteca JavaScript. e) O nome AJAX foi inspirado no clube de futebol holands.

Minha Pontuao

Pontuao Mnima:

Pontuao Mxima:

420

www.k19.com.br

APNDICE
Desktop

P ROJETO

Para exercitar o contedo visto nesta apostila, implemete uma pgina web semelhante imagem a seguir.

Smartphone

Exerccios de Fixao

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 necessrio instalar o IIS conforme vimos anteriormente.

Importante No Ubuntu, utilizando o Apache HTTP Server como Web Server, voc deve salvar o projeto blog em /home/<USUARIO>/public_html. Lembre-se que necessrio instalar e congurar 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

No projeto blog, altere o arquivo index.html.


www.facebook.com/k19treinamentos

423

P ROJETO
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 rea visvel da pgina 31 um conjunto de posts ser 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 = " # " > Maro 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 >
Cdigo HTML A.1: index.html

424

Arquivo: https://github.com/K19/K19-Exercicios/archive/k
424

2-projeto-fixacao2.zip

www.k19.com.br

425
3

P ROJETO

No projeto blog, crie um arquivo chamado principal.css em uma pasta chamada css.
/* Declarando as fontes que sero utilizadas na pgina . */ @font - face { font - family : Roboto ; src : url ( Roboto - Regular - webfont . eot ) ; src : url ( Roboto - Regular - webfont . eot ?# iefix ) format ( embedded - opentype ) , url ( Roboto - Regular - webfont . woff ) format ( woff ) , url ( Roboto - Regular - webfont . ttf ) format ( truetype ) , url ( Roboto - Regular - webfont . svg # RobotoRegular ) format ( svg ) ; font - weight : normal ; font - style : normal ; } @font - face { font - family : Roboto ; src : url ( Roboto - Italic - webfont . eot ) ; src : url ( Roboto - Italic - webfont . eot ?# iefix ) format ( embedded - opentype ) , url ( Roboto - Italic - webfont . woff ) format ( woff ) , url ( Roboto - Italic - webfont . ttf ) format ( truetype ) , url ( Roboto - Italic - webfont . svg # RobotoItalic ) format ( svg ) ; font - weight : normal ; font - style : italic ; } @font - face { font - family : Roboto ; src : url ( Roboto - Bold - webfont . eot ) ; src : url ( Roboto - Bold - webfont . eot ?# iefix ) format ( embedded - opentype ) , url ( Roboto - Bold - webfont . woff ) format ( woff ) , url ( Roboto - Bold - webfont . ttf ) format ( truetype ) , url ( Roboto - Bold - webfont . svg # RobotoBold ) format ( svg ) ; font - weight : bold ; font - style : normal ; } @font - face { font - family : Roboto ; src : url ( Roboto - BoldItalic - webfont . eot ) ; src : url ( Roboto - BoldItalic - webfont . eot ?# iefix ) format ( embedded - opentype ) , url ( Roboto - BoldItalic - webfont . woff ) format ( woff ) , url ( Roboto - BoldItalic - webfont . ttf ) format ( truetype ) , url ( Roboto - BoldItalic - webfont . svg # RobotoBoldItalic ) format ( svg ) ; font - weight : bold ; font - style : italic ; } @font - face { font - family : Roboto ; src : url ( Roboto - Thin - webfont . eot ) ; src : url ( Roboto - Thin - webfont . eot ?# iefix ) format ( embedded - opentype ) , url ( Roboto - Thin - webfont . woff ) format ( woff ) , url ( Roboto - Thin - webfont . ttf ) format ( truetype ) , url ( Roboto - Thin - webfont . svg # RobotoThin ) format ( svg ) ; font - weight : 2 ; font - style : normal ; } @font - face { font - family : Roboto ; src : url ( Roboto - ThinItalic - webfont . eot ) ; src : url ( Roboto - ThinItalic - webfont . eot ?# iefix ) format ( embedded - opentype ) , url ( Roboto - ThinItalic - webfont . woff ) format ( woff ) , url ( Roboto - ThinItalic - webfont . ttf ) format ( truetype ) , url ( Roboto - ThinItalic - webfont . svg # RobotoThinItalic ) format ( svg ) ; font - weight : 2 ; font - style : italic ; } @font - face {

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 39 4 41 42 43 44 45 46 47 48 49 5 51 52 53 54 55 56 57 58 59 6 61 62 63 64 65 66 67 68

www.facebook.com/k19treinamentos

425

P ROJETO
69 7 71 72 73 74 75 76 77 78 79 8 81 82 83 84 85 86 87 88 89 9 91 92 93 94 95 96 97 98 99 1 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 11 111 112 113 114 115 116 117 118 119 12 121 122 123 124 125 126 127 128 129 13 131 132 133 134 135 136 137 138 font - family : Roboto ; src : url ( Roboto - Light - webfont . eot ) ; src : url ( Roboto - Light - webfont . eot ?# iefix ) format ( embedded - opentype ) , url ( Roboto - Light - webfont . woff ) format ( woff ) , url ( Roboto - Light - webfont . ttf ) format ( truetype ) , url ( Roboto - Light - webfont . svg # RobotoLight ) format ( svg ) ; font - weight : 1 ; font - style : normal ; } @font - face { font - family : Roboto ; src : url ( Roboto - LightItalic - webfont . eot ) ; src : url ( Roboto - LightItalic - webfont . eot ?# iefix ) format ( embedded - opentype ) , url ( Roboto - LightItalic - webfont . woff ) format ( woff ) , url ( Roboto - LightItalic - webfont . ttf ) format ( truetype ) , url ( Roboto - LightItalic - webfont . svg # RobotoLightItalic ) format ( svg ) ; font - weight : 1 ; font - style : italic ; } @font - face { font - family : Roboto ; src : url ( Roboto - Medium - webfont . eot ) ; src : url ( Roboto - Medium - webfont . eot ?# iefix ) format ( embedded - opentype ) , url ( Roboto - Medium - webfont . woff ) format ( woff ) , url ( Roboto - Medium - webfont . ttf ) format ( truetype ) , url ( Roboto - Medium - webfont . svg # RobotoMedium ) format ( svg ) ; font - weight : 3 ; font - style : normal ; } @font - face { font - family : Roboto ; src : url ( Roboto - MediumItalic - webfont . eot ) ; src : url ( Roboto - MediumItalic - webfont . eot ?# iefix ) format ( embedded - opentype ) , url ( Roboto - MediumItalic - webfont . woff ) format ( woff ) , url ( Roboto - MediumItalic - webfont . ttf ) format ( truetype ) , url ( Roboto - MediumItalic - webfont . svg # RobotoMediumItalic ) format ( svg ) ; font - weight : 3 ; font - style : italic ; } /* Removendo as margens internas e externas de todos os elementos para evitar diferenas entre os navegadores . */ * { margin : ; padding : ; font - family : Roboto , helvetica , arial , sans - serif ; } @media ( max - width : 48 px ) { body { font - size :1.2 rem ; } . show - comments { display : inline ; } . article - comments form , . article - comments article { display : none ; } } @media ( min - width : 64 px ) { # articles - container {

426

426

www.k19.com.br

427
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 font - size : .8 em ; 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 {

P ROJETO

www.facebook.com/k19treinamentos

427

P ROJETO
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 top : 1 em ; 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

428

www.k19.com.br

429
279 28 281 282 283 284 285 286 287 288 289 29 291 292 293 294 295 296 297 298 299 3 3 1 3 2 3 3 3 4 3 5 3 6 3 7 3 8 3 9 31 311 312 313 314 315 316 317 318 319 32 321 322 323 324 325 326 327 328 329 33 331 332 333 334 335 336 337 338 339 34 341 342 343 344 345 346 347 348

P ROJETO

# main - wrapper { max - width : 98 px ; width : 1 %; margin : auto ; } # main - header { position : relative ; background : black ; padding : .8 em ; } # main - header h1 { color : white ; font - size : 1.5 em ; display : inline - block ; vertical - align : middle ; } article header { background : #38 c3f2 ; color : white ; padding : .8 em ; } article header h1 { font - size : 1.2 em ; } article header h2 { font - size : .8 em ; font - weight : normal ; } . article - text { padding : .8 em ; } . article - text p { font - size : .8 em ; margin - bottom : .8 em ; } # archive - links header { background : #888; color : white ; padding : .8 em ; } # archive - links header h1 { font - size : 1 em ; } # archive - links ul { padding : .8 em .8 em 1.6 em ; color : #888; font - size : .8 em ; } # archive - links li { padding : .2 em ; } # archive - links li a { color : inherit ; text - decoration : none ; } # archive - links li a : hover {

www.facebook.com/k19treinamentos

429

P ROJETO
349 35 351 352 353 354 355 356 357 358 359 36 361 362 363 364 365 366 367 368 369 37 371 372 373 374 375 376 377 378 379 38 381 382 383 384 385 386 387 388 389 39 391 392 393 394 395 396 397 398 399 4 4 1 4 2 4 3 4 4 4 5 4 6 4 7 4 8 4 9 41 411 412 413 414 415 416 417 418 color : #38 c3f2 ; } . article - comments { padding : .8 em ; } . article - comments > input : first - child { border : none ; background : # c425 ; color : white ; font - size : .8 em ; padding : .3 em .5 em ; cursor : pointer ; margin : 2 em ; } . article - comments fieldset { border : 1 px solid #999; padding : .8 em ; text - align : right ; margin : 1 em ; } . article - comments fieldset legend { padding : .2 em ; color : #999; } . article - comments fieldset input : not ([ type = submit ]) , . article - comments fieldset textarea { display : block ; font - size : .8 em ; margin : .5 em ; width : 1 %; border : 1 px solid #999; padding : .2 em ; } . article - comments fieldset textarea { height : 1 em ; } . article - comments fieldset input [ type = submit ] { border : none ; background : # c425 ; color : white ; font - size : .8 em ; padding : .3 em .5 em ; cursor : pointer ; } . article - comments article { margin : 1 em ; } . article - comments article p { font - size : .8 em ; color : #444; margin : 1 em ; } # lazy - load - point { height : 24 px ; } # lazy - load - point . loading { background : url ( ajax - loader ) no - repeat center ; }

430

430

www.k19.com.br

431
419 42 421 422 423 424 425 426 footer { text - align : center ; clear : left ; } footer small { font - size : .5 em ; }
Cdigo CSS A.1: principal.css

P ROJETO

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-projeto-fixacao3.zip

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 comentrios " > 35 36 < form > 37 < fieldset > 38 < legend > Deixe o seu comentrio </ legend > 39 < input type = " text " placeholder = " Nome " > 4 < input type = " email " placeholder = "E - mail " > 41 < textarea placeholder = " Comentrios " > </ 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
53 </ p > 54 </ article > 55 </ div > 56 </ article > 57 <? php endfor ; ? >
Cdigo HTML A.2: servico.php

432

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-jquery-fixacao4.zip

No projeto blog, crie um arquivo chamado principal.js em uma pasta chamada js.
var scrollTimeout = ; var isLoadingArticles = false ; $( document ) . ready ( function () { $( # articles - container ) . on ( click , . show - comments , function ( e ) { $( this ) . parent () . find ( form , article ) . slideDown () ; $( this ) . hide () ; }) ; // Trata o evento de clique no boto de menu adicionando uma classe // ao mesmo para indicar que o mesmo est expandido . $( # main - menu - btn ) . click ( function ( e ) { e . stopPropagation () ; $( this ) . parent () . find ( ul ) . addClass ( expanded ) . slideDown () ; }) ; // Trata o evento de clique em qualquer rea da pgina para contrair e // remover a classe expanded do menu principal . $( html ) . click ( function ( e ) { $( # main - header ul . expanded ) . removeClass ( expanded ) . slideUp (4 , function () { $( this ) . removeAttr ( style ) ; }) ; }) ; $( window ) . scroll ( function () { // Utilizando um timeout para evitar chamadas excessivas // funo afterScroll () . clearTimeout ( scrollTimeout ) ; scrollTimeout = setTimeout ( afterScroll , 5 ) ; }) ; // Carregando os artigos assim que a pgina for carregada . loadArticles () ; }) ; function afterScroll () { if (! isLoadingArticles && $( # lazy - load - point ) . isOnScreen () ) { loadArticles () ; } } function loadArticles () { $. ajax ({ url : servico . php , dataType : html , beforeSend : function ( jqXHR , settings ) { isLoadingArticles = true ; // Exibe o GIF animado que indica o carregamento do contedo . $( # lazy - load - point ) . addClass ( loading ) ; }, complete : function () { // O uso do timeout neste ponto desnecessrio . Foi utilizado aqui // para dar tempo do GIF animado ser visualizado em um servidor // local .

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 39 4 41 42 43 44 45 46 47 48 49 5 51 52 53 54 55

432

www.k19.com.br

433
56 57 58 59 6 61 62 63 64 65 66 67 68 69 7 71 72 73 74 75 76 77 78 79 8 81 82 83 84 85 86 87 88 89 9 91 92 93 94 95 96 setTimeout ( function () { isLoadingArticles = false ; // Oculta o GIF animado que indica o carregamento do contedo . $( # lazy - load - point ) . removeClass ( loading ) ; }, 1 ); }, success : function ( data , textStatus , jqXHR ) { // O uso do timeout neste ponto desnecessrio . Foi utilizado aqui // para dar tempo do GIF animado ser visualizado em um servidor // local . setTimeout ( function () { $( # articles - container ) . prepend ( data ) ; }, 1 ); }, error : function ( jqXHR , textStatus , errorThrown ) { alert ( errorThrown ) ; } }) ; } // Extendendo o jQuery com o mtodo isOnScreen que verifica se um // elemento est na regio visvel da pgina . $. fn . isOnScreen = function () { var win = $( window ) ; var viewport = { top : win . scrollTop () , left : win . scrollLeft () }; viewport . right = viewport . left + win . width () ; viewport . bottom = viewport . top + win . height () ; var bounds = this . offset () ; bounds . right = bounds . left + this . outerWidth () ; bounds . bottom = bounds . top + this . outerHeight () ; return (!( viewport . right < bounds . left || viewport . left > bounds . right || viewport . bottom < bounds . top || viewport . top > bounds . bottom ) ) ; };
Cdigo Javascript A.1: principal.js

P ROJETO

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. Descompacte esse arquivo e copie o contedo das pastas css e img para as pastas css e img do projeto blog respectivamente.

O arquivo k02-projeto.zip tambm est disponvel em http://k19.com.br/arquivos. Arquivo: https://github.com/K19/K19-Exercicios/archive/k


2-projeto-fixacao6.zip

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/blog/public_html/index.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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

www.facebook.com/k19treinamentos

433

P ROJETO

434

434

www.k19.com.br

APNDICE

Q UIZZES

Quiz 1
Considere uma pgina HTML contendo um <div> com largura (width) 200px, margem interna (padding) 10px e borda de 3px. Visualmente, qual o espao horizontal ocupado por esse elemento?

a) 200px b) 203px c) 210px d) 213px e) 226px


De acordo com o Box Model do CSS visto no Captulo 3, ao atribuirmos margens internas e bordas em um elemento com largura denida fazemos com que, visualmente, a largura ocupada por esse elemento seja a soma das propriedades width, padding-left, padding-right, borderleft e border-right. Como utilizamos a propriedade padding com o valor 10px para denir as margens internas, podemos considerar que temos 10px nas propriedades padding-left e padding-right. A mesma idia se aplica propriedade border, portanto temos border-left e border-right com 3px cada. Fazendo a soma temos: 200px (width) + 10px (padding-left) + 10px (padding-right) + 3px (borderleft) + 3px (border-right) = 226px Portanto o espao horizontal visualmente ocupado pelo elemento de 226px.

www.facebook.com/k19treinamentos

435

QUIZZES

436

436

www.k19.com.br

APNDICE

R ESPOSTAS

Questo 1.1 d Questo 1.2 e Questo 1.3 a Questo 1.4 c Questo 1.5 d Questo 1.6 d Exerccio Complementar 2.1

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
12 vestibulum , massa ligula sodales metus , nec hendrerit nunc purus eu 13 mauris . 14 </ p > 15 </ body > 16 </ html >
Cdigo HTML 2.159: pagina-simples.html

438

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/html/public_html/pagina-simples.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/html/public_html/pagina-simples.html.

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-complementar1.zip

Exerccio 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 o segundo menor continente em superfcie do mundo , cobrindo 13 cerca de 1 18 quilmetros quadrados ou 2% da superfcie da Terra 14 e cerca de 6 ,8% da rea acima do nvel do mar . </ p > 15 16 < h3 > Alemanha </ h3 > 17 <p > Com 81 ,8 milhes de habitantes em janeiro de 2 1 , o pas tem a maior 18 populao entre os Estados membros da Unio Europeia e tambm o lar da 19 terceira maior populao de migrantes internacionais em todo o mundo . </ p > 2 21 < h4 > Hesse </ h4 > 22 <p >A capital Wiesbaden e a maior cidade Francoforte do Meno ( Frankfurt 23 am Main ) , onde est localizado um dos maiores aeroportos do mundo e um 24 centro financeiro de grande importncia . </ p > 25 26 < h5 > Frankfurt </ h5 > 27 <p > Frankfurt am Main ou Francoforte do Meno , mais conhecida simplesmente como 28 Frankfurt , a maior cidade do estado alemo de Hesse e a quinta maior cidade 29 da Alemanha , com uma populao 7 . habitantes em 2 12. </ p > 3 31 < h2 > sia </ h2 > 32 <p >A sia o maior dos continentes , tanto em rea como em populao . </ p > 33 34 < h3 > Japo </ h3 > 35 <p >O pas um arquiplago de 6 852 ilhas , cujas quatro maiores so Honshu , 36 Hokkaido , Kyushu e Shikoku , representando em conjunto 97% da 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 prpria do desenrolar 42 de uma histria particular e significativamente diferenciada do resto do

438

www.k19.com.br

439
43 Japo . </ p > 44 45 < h5 > Nago </ h5 > 46 <p > De 21 de julho at 23 de julho de 2 47 48 <p > Fonte : wikipedia . org </ p > 49 </ body > 5 </ html >

R ESPOSTAS

, foi sede do encontro anual do G8 . </ p >

Cdigo HTML 2.160: geograa.html

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/html/public_html/geografia.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/html/public_html/geografia.html.

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-complementar2.zip

Exerccio 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 satisfao dos seus alunos , a K19 12 criou o Seguro Treinamento . < br > Ao contratar um curso , o aluno poder 13 refaz - lo quantas vezes desejar mediante a disponibilidade de vagas e 14 pagamento da franquia do Seguro Treinamento . 15 </ p > 16 </ body > 17 </ html >
Cdigo HTML 2.161: seguro-treinamento.html

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/html/public_html/seguro-treinamento.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/html/public_html/seguro-treinamento.html.

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-complementar3.zip

Exerccio Complementar 2.4

www.facebook.com/k19treinamentos

439

R ESPOSTAS
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 >
Cdigo HTML 2.162: caracteres-especiais.html

440

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/html/public_html/caracteres-especiais.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/html/public_html/caracteres-especiais.html.

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-complementar4.zip

Exerccio Complementar 2.5

1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18

<! DOCTYPE html > < html lang = " pt - br " > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Texto pr - formatado </ title > </ head > < body > < h1 > Texto pr - formatado </ h1 > < pre > A B C D E F G 1 2 a b 3 4 5 e 6 f 7 g

c d </ pre > </ body > </ html >

Cdigo HTML 2.163: espacos-e-quebras-de-linha.html

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/html/public_html/espacos-e-quebras-de-linha.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/html/public_html/espacos-e-quebras-de-linha.html.

Arquivo: https://github.com/K19/K19-Exercicios/archive/k
440

2-html-complementar5.zip

www.k19.com.br

441

R ESPOSTAS

Exerccio 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 > Cdigo Java </ title > 6 </ head > 7 < body > 8 < h1 > Cdigo Java </ h1 > 9 < code > 1 double numero = Math . random () ; 11 </ code > 12 </ body > 13 </ html >
Cdigo HTML 2.164: codigo-java.html

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/html/public_html/codigo-java.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/html/public_html/codigo-java.html.

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-complementar6.zip

Exerccio 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 >( cpia de segurana ) </ li > 12 < li > <i > shoot the breeze </ i >( bater papo ou jogar conversa fora ) </ li > 13 < li > <i > Moskv </ i >( transliterao da palavra Moscou em russo ) </ li > 14 < li > <i > Se no sabes , aprende ; se j sabes , ensina . </ i > ( Confcio ) </ li > 15 </ ul > 16 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 > , obrigatrio o conhecimento 21 das linguagens : <b > HTML </ b > , <b > CSS </ b > e <b > JavaScript </ b >. 22 </ p > 23 </ body > 24 </ html >
Cdigo HTML 2.165: elementos-i-b.html

www.facebook.com/k19treinamentos

441

R ESPOSTAS

442

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/html/public_html/elementos-i-b.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/html/public_html/elementos-i-b.html.

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-complementar7.zip

Exerccio 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 > So Paulo </ title > 6 </ head > 7 < body > 8 < h1 > So Paulo </ h1 > 9 <p > 1 A cidade de So Paulo possui uma rea de 1.523 km < sup >2 </ sup >. 11 Em 2 11 , So Paulo emitiu 16 ,43 milhes de toneladas de 12 CO < sub >2 </ sub >. 13 </ p > 14 </ body > 15 </ html >
Cdigo HTML 2.166: sao-paulo.html

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/html/public_html/sao-paulo.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/html/public_html/sao-paulo.html.

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-complementar8.zip

Exerccio 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 > So Paulo FC </ title > 6 </ head > 7 < body > 8 < h1 > So Paulo FC </ h1 > 9 <p > 1 O < strong > So Paulo FC </ strong > o nico 11 time brasileiro que ganhou < em > trs vezes </ em > 12 o < strong > mundial de clubes </ strong >. 13 </ p >

442

www.k19.com.br

443
14 </ body > 15 </ html >
Cdigo HTML 2.167: spfc.html

R ESPOSTAS

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/html/public_html/spfc.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/html/public_html/spfc.html.

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-complementar9.zip

Exerccio 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 > Citaes </ title > 6 </ head > 7 < body > 8 <p >O que a Wikipdia 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 Galvo Bueno disse : 26 <q cite = " http :// www . naosalvo . com . br / as - melhorespiores - frases - de - galvao - bueno - em - um - so - lugar " > 27 A seleo brasileira prioriza o coletivo e a individualidade 28 </ q >. 29 </ p > 3 31 <p > 32 < cite > Dom Quixote </ cite > de Miguel de Cervantes um dos livros mais 33 vendidos da histria . 34 </ p > 35 </ body > 36 </ html >
Cdigo HTML 2.168: mais-citacoes.html

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/html/public_html/mais-citacoes.html.

www.facebook.com/k19treinamentos

443

R ESPOSTAS

444

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/html/public_html/mais-citacoes.html.

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-complementar1 .zip

Exerccio 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 > Abreviaes </ title > 6 </ head > 7 < body > 8 < h1 > Abreviaes </ 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 >
Cdigo HTML 2.169: abbr.html

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/html/public_html/abbr.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/html/public_html/abbr.html.

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-complementar11.zip

Exerccio 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 > Definies </ title > 6 </ head > 7 < body > 8 < h1 > Definies </ h1 > 9 < dl > 1 < dt > < dfn > Folha seca </ dfn > </ dt > 11 < dd > 12 Chute que faz a bola percorrer uma trajetria 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 ltima posio de um campeonato . 18 </ dd >

444

www.k19.com.br

445
19 < dt > < dfn > Primeiro pau </ dfn > </ dt > 2 < dd > 21 Trave mais prxima da origem de um cruzamento . 22 </ dd > 23 </ dl > 24 </ body > 25 </ html >
Cdigo HTML 2.170: mais-denicoes.html

R ESPOSTAS

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/html/public_html/mais-definicoes.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/html/public_html/mais-definicoes.html.

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-complementar12.zip

Exerccio 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 alteraes </ title > 6 </ head > 7 < body > 8 < h1 > Alteraes </ 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 Sria . </ del > 13 </ p > 14 </ body > 15 </ html >
Cdigo HTML 2.171: mais-alteracoes.html

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/html/public_html/mais-alteracoes.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/html/public_html/mais-alteracoes.html.

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-complementar13.zip

Exerccio Complementar 2.14

1 <! DOCTYPE html > 2 < html lang = " pt - br " >

www.facebook.com/k19treinamentos

445

R ESPOSTAS
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 pentacampeo em < time datetime = " 2 2 - 6 -3 " > 3 de Junho 12 de 2 2 </ time >. 13 </ li > 14 < li > 15 Ele no pode esquecer o < time datetime = " 3 - 8 " > Dia das mulheres </ time >. 16 </ li > 17 </ ul > 18 </ body > 19 </ html >
Cdigo HTML 2.172: mais-datas.html

446

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/html/public_html/mais-datas.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/html/public_html/mais-datas.html.

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-complementar14.zip

Exerccio 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 > Frmula 1 </ mark > , trs vezes campeo mundial , nos anos de 1988 , 12 199 e 1991. Foi tambm vice - campeo no controverso campeonato de 1989 13 e em 1993 14 </ p > 15 </ body > 16 </ html >
Cdigo HTML 2.173: texto-marcado.html

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/html/public_html/texto-marcado.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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

Exerccio 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 Tursticos </ title > 6 </ head > 7 < body > 8 < h1 > Pontos Tursticos do Brasil </ h1 > 9 1 < dl > 11 < dt > Ilha Bela - SP </ dt > 12 < dd > 13 Praias , Trilhas e Mergulho em Nufrago . 14 </ dd > 15 < dt > Bonito - MS </ dt > 16 < dd > 17 Mergulho em rios de guas transparentes , cachoeiras , grutas e cavernas . 18 </ dd > 19 < dt > Museu de Arte de So Paulo - SP </ dt > 2 < dd > 21 Grande acervo com diversas obras de artistas consagrados . 22 </ dd > 23 </ dl > 24 </ body > 25 </ html >
Cdigo HTML 2.174: pontos-turisticos.html

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/html/public_html/pontos-turisticos.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/html/public_html/pontos-turisticos.html.

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-complementar16.zip

Exerccio 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 acessrios esto presentes . 13 </ li >

www.facebook.com/k19treinamentos

447

R ESPOSTAS
14 < li > 15 Coloque o aparelho na horizontal sobre uma superfcie plana . 16 </ li > 17 < li > 18 Conecte o aparelho ao computador utilizando um cabo USB . 19 </ li > 2 < li > 21 Use o CD - ROM para instalao do software . 22 </ li > 23 < li > 24 Conecte o aparelho fonte de energia com um adaptador AC . 25 </ li > 26 < li > 27 Ligue o aparelho e espere o reconhecimento do computador . 28 </ li > 29 </ ol > 3 </ body > 31 </ html >
Cdigo HTML 2.175: manual-k19.html

448

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/html/public_html/manual-k19.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/html/public_html/manual-k19.html.

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-complementar17.zip

Exerccio 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 / " > Wikipdia </ a > </ li > 12 < li > <a href = " http :// facebook . com " > Facebook </ a > </ li > 13 </ ul > 14 </ body > 15 </ html >
Cdigo HTML 2.176: mais-links.html

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/html/public_html/mais-links.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


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

Exerccio 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 - Persistncia 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 Avanado 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 - Integrao de Sistemas com Webservices , JMS e EJB 24 </ li > 25 </ ul > 26 </ body > 27 </ html >
Cdigo HTML 2.177: mais-imagens.html

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/html/public_html/mais-imagens.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/html/public_html/mais-imagens.html.

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-complementar19.zip

Exerccio 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
12 < th > Cidade </ th > 13 < th > Idioma </ th > 14 </ tr > 15 </ thead > 16 < tfoot > 17 < tr > 18 < td colspan = " 3 " > ltima atualizao : 11/2 12 </ td > 19 </ tr > 2 </ tfoot > 21 < tbody > 22 < tr > 23 < td rowspan = " 2 " > Amrica do Sul </ td > 24 < td > So Paulo </ td > 25 < td > Portugus </ td > 26 </ tr > 27 < tr > 28 < td > Cidade do Mxico </ td > 29 < td > Espanhol </ td > 3 </ tr > 31 < tr > 32 < td rowspan = " 3 " > sia </ td > 33 < td > Tquio </ td > 34 < td > Japons </ td > 35 </ tr > 36 < tr > 37 < td > Xangai </ td > 38 < td > Mandarim </ td > 39 </ tr > 4 < tr > 41 < td > Nova Dlhi </ td > 42 < td > Hindi </ td > 43 </ tr > 44 < tr > 45 < td > Amrica do Norte </ td > 46 < td > Nova Iorque </ td > 47 < td > Ingls </ td > 48 </ tr > 49 </ tbody > 5 </ table > 51 </ body > 52 </ html >
Cdigo HTML 2.178: mais-tabelas.html

450

No Windows, utilize o Chrome para acessar o endereo:


http://localhost/html/public_html/mais-tabelas.html.

No Ubuntu, utilize o Chrome para acessar o endereo:


http://localhost/~<USUARIO>/html/public_html/mais-tabelas.html.

Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-html-complementar2 .zip

Exerccio 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 > Currculo </ title > 6 </ head >

450

www.k19.com.br

451
7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 39 4 41 42 43 44 45 46 47 48 49 5 51 52 53 54 55 56 57 58 59 6 61 62 63 64 65 66 67 68 69 7 71 72 73 74 75 76 < body > < h1 > Cadastro de Currculo </ h1 > < form action = " parametros . php " method = " post " > < fieldset > < legend > Informaes Pessoais </ legend > < label for = " nome_id " > Nome : </ label > < input id = " nome_id " type = " text " name = " nome " placeholder = " Digite o seu nome " required > < br > < label for = " email_id " > Email : </ label > < input id = " email_id " type = " email " name = " email " placeholder = " Digite o seu email " required > < br > < label for = " nascimento_id " > Data de Nascimento : </ label > < input id = " nascimento_id " type = " date " name = " nascimento " required > < br > < label for = " altura_id " > Altura ( m ) : </ label > < input id = " altura_id " type = " number " name = " altura " step = " . 1 " min = " " max = " 2 " > < br > < label for = " site_id " > Site : </ label > < input id = " site_id " type = " url " name = " site " placeholder = " Facebook , Linkedin , Twitter " > < br > < label for = " estado_civil_id " > Estado Civil : </ label > < select id = " estado_civil_id " name = " estado - civil " > < option value = " -1 " > Selecione </ option > < option value = " S " > Solteiro </ option > < option value = " C " > Casado </ option > < option value = " D " > Divorciado </ option > < option value = " V " > Vivo </ option > </ select > < br > < label > Sexo : </ label > < input id = " masculino_id " type = " radio " name = " sexo " value = " masculino " > < label for = " masculino_id " > Masculino </ label > < input id = " feminino_id "

R ESPOSTAS

www.facebook.com/k19treinamentos

451

R ESPOSTAS
77 78 79 8 81 82 83 84 85 86 87 88 89 9 91 92 93 94 95 96 97 98 99 1 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 11 111 112 113 114 115 116 117 118 119 12 121 122 123 124 125 126 127 128 129 13 131 132 133 134 135 136 137 138 139 14 141 142 143 144 145 146 type = " radio " name = " sexo " value = " feminino " > < label for = " feminino_id " > Feminino </ label > < br > </ fieldset > < fieldset > < legend > Endereo </ legend > < label for = " cep_id " > CEP : </ label > < input id = " cep_id " type = " text " name = " cep " required > < br > < label for = " endereco_id " > Endereo : </ label > < input id = " endereco_id " type = " text " name = " endereco " required > < br > </ fieldset > < fieldset > < legend > Contato </ legend > < label for = " telefone_id " > Telefone : </ label > < input id = " telefone_id " type = " tel " name = " telefone " > < br > < label for = " celular_id " > Celular : </ label > < input id = " celular_id " type = " tel " name = " celular " > < br > </ fieldset > < fieldset > < legend > Conhecimentos </ legend > < input id = " html_id " type = " checkbox " name = " conhecimentos " value = " HTML " > < label for = " html_id " > HTML </ label > < input id = " css_id " type = " checkbox " name = " conhecimentos " value = " CSS " > < label for = " css_id " > CSS </ label > < input id = " js_id " type = " checkbox " name = " conhecimentos " value = " JS " > < label for = " js_id " > JavaScript </ label > < br >

452

452

www.k19.com.br

453
147 < label for = " mais_conhecimentos_id " > Mais conhecimentos &