k19 k02 Desenvolvimento Web Com HTML Css e Javascript

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
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.
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.
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.
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
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).
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.
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.
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.
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.
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.
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.

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:
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.
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
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 . 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.
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
Arquivo: https://github.com/K19/K19-Exercicios/archive/k
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
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
29
HTML
30
30
www.k19.com.br
31
5
HTML
Utilize o Chrome DevTools ou o Firebug para analisar a requisio HTTP e a resposta HTTP.
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 " >
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
2-html-fixacao6.zip

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

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
2-html-fixacao8.zip

http://localhost/html/public_html/receita.html.
37
HTML
38

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 ; ★ </ li > 11 < li > & phone ; &# x 26 E ; ☎ </ li > 12 < li > & female ; &# x 264 ; ♀ </ li > 13 < li > & sung ; &# x 266A ; ♪ </ li > 14 </ ul > 15 </ body > 16 </ html >
Cdigo HTML 2.23: Exemplo de character entities
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
2-html-fixacao1 .zip
11

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

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 ; ★ </ li > 11 < li >& phone ; &# x 26 E ; ☎ </ li > 12 < li >& female ; &# x 264 ; ♀ </ li > 13 < li >& sung ; &# x 266A ; ♪ </ li > 14 </ ul > 15 </ body > 16 </ html >
Cdigo HTML 2.25: character-entities.html
2-html-fixacao12.zip
13

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

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.
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.
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
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 >
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
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
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
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
15

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

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
17

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

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
19

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

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 >
53
HTML
15 </ body > 16 </ html >
Cdigo HTML 2.42: b.html
54
21

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

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
23

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

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
25

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

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
55
HTML
56
27

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

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
29

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

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
31

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

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
33

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

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

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

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
37

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

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
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
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.
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
39

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

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
63
HTML
41
64

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

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
43

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

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
45

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

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

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

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
49

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

http://localhost/~<USUARIO>/html/public_html/manual.html.
50
Crie um novo documento HTML chamado cursos.html no projeto html em Site Root.
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
51

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

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
67
HTML
68
53

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

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
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.
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
55

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

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

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

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
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 >
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 >
HTML
60

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

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

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
62

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

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

http://localhost/html/public_html/tabela.html.
84
www.k19.com.br
85
HTML

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
66

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

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 >
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 .
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.
87
HTML
88
Muitas vezes, no adequado exibir os valores dos atributos na barra de endereo dos navegadores. Podemos ocultar esses valores adicionando o atributo method com o valor post no elemento form. Esse atributo aceita apenas dois valores: get e post. Ele 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.
88
www.k19.com.br
89
HTML
Rtulos
Nos formulrios, os rtulos so fundamentais para informar aos usurios quais dados devem ser preenchidos. Para adicionar um rtulo, devemos utilizar o elemento label. Os textos dos rtulos so denidos no contedo desse elemento.
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.
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
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
69

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

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
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 " >
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 "
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
71

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

http://localhost/~<USUARIO>/html/public_html/formulario-caixas-especificas.html.
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 " >
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
101
HTML
102
73

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

http://localhost/~<USUARIO>/html/public_html/checkboxes.html.
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
102
www.k19.com.br
103
75
HTML

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

http://localhost/~<USUARIO>/html/public_html/radios.html.
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
77

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

http://localhost/~<USUARIO>/html/public_html/selecao-cores.html.
Botes
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 " >
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
79

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

http://localhost/~<USUARIO>/html/public_html/botoes.html.
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 >
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 " >
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
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
81

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

http://localhost/~<USUARIO>/html/public_html/drop-down-list.html.
Fieldset
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
83

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

http://localhost/~<USUARIO>/html/public_html/fieldset.html.
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
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
85

http://localhost/html/public_html/autocomplete.html.
112
www.k19.com.br
113
HTML

http://localhost/~<USUARIO>/html/public_html/autocomplete.html.
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 >
1 < textarea disabled > 2 </ textarea >
1 < button type = " button " disabled > 2 Boto desabilitado 3 < img src = " botao . png " alt = " Boto desabilitado " > 4 </ button >
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
87

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

http://localhost/~<USUARIO>/html/public_html/disabled-readonly.html.
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 " >
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
89

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

http://localhost/~<USUARIO>/html/public_html/validacao.html.
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
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
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
article
Donec Tristique
13/11/2013 - 11:42 AM
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
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
91

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

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

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.
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.
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.
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.
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
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
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.
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
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 ;
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.
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.
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
151
CSS
152
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
2-css-fixacao2.zip

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

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
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 >
153
CSS
1 <p > Outro pargrafo formatado </ p > 11 </ body > 12 </ html >
Cdigo HTML 3.8: css.html
154
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
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
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
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
background-clip: padding-box
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
background-origin: border-box; background-repeat: no-repeat;
background-origin: padding-box; background-repeat: no-repeat;
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
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
background-size: 50% 50%
background-size: cover
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
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
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
2-css-fixacao7.zip

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

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.
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).
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
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
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
2-css-fixacao1 .zip
11

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

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

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...
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
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
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
2-css-fixacao13.zip
14

http://localhost/css/public_html/fontes.html.
176
www.k19.com.br
177
CSS

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

circle

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

lower-greek

katakana

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
CSS Valor none inherit Descrio Sem imagem (padro). Assume o valor da mesma propriedade no elemento HTML pai.
178

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)

list-style-position: outside

list-style-position: inside
list-style
A propriedade list-style um atalho para as outras propriedades de lista.
1 list - style : list - style - type , list - style - position , list - style - image
Exerccios de Fixao
15
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
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
2-css-fixacao16.zip
17

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

http://localhost/~<USUARIO>/css/public_html/listas.html.
Bordas
A linguagem CSS possui diversas propriedades para denir a formatao das bordas dos elementos HTML.
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.
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
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
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
2-css-fixacao19.zip
20

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

http://localhost/~<USUARIO>/css/public_html/bordas.html.
Outline
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
187
CSS
188
2-css-fixacao21.zip
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
2-css-fixacao22.zip
23

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

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;

#b
Deslocamento horizontal Propagao
#c { }
Esmaecimento
box-shadow: 10px 10px 0 10px #7f7f7f;

#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.
#a { }
box-shadow: inset 10px 10px #000000;
#a
189
CSS
190
#b { }
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
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
2-css-fixacao25.zip
26

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

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.
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
10px
10px
10px
15px
15px
padding: 5px 10px 15px 20px
padding: 5px 10px 15px
10px
5px
10px
5px
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 {
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
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
2-css-fixacao28.zip
29

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

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).
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
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
2-css-fixacao31.zip
32

http://localhost/css/public_html/altura-largura.html.

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
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
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
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.
visibility: visible
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.
display: none
199
CSS
200
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
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 ;
2-css-fixacao34.zip
35

http://localhost/css/public_html/display-visibilidade.html.

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.
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
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
2-css-fixacao37.zip
38

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

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.
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.
203
CSS
204
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.
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.
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

clear: none
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

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
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 >
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
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
2-css-fixacao39.zip
41

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

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.
overflow-x: visible
overflow-x: hidden
overflow-x: scroll
Lorem ipsum.
overflow-x: auto
overflow-x: auto
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
overflow-y: hidden
overflow-y: scroll
overflow-y: auto

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
overflow: hidden
overflow: scroll
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 >
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
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
2-css-fixacao43.zip
44

http://localhost/css/public_html/overflow-clip.html.

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.
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 >
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
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
2-css-fixacao46.zip
47

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

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.
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
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
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
2-css-fixacao49.zip
50

http://localhost/css/public_html/transicoes.html. www.facebook.com/k19treinamentos
221
CSS
222

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 {
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
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
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) ;
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
2-css-fixacao52.zip
53

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

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
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
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
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 ;
2-css-fixacao55.zip
56

http://localhost/css/public_html/seletores-basicos.html.

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 >
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
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
2-css-fixacao58.zip
59

http://localhost/css/public_html/seletores-de-atributos.html.

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 " >
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
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
2-css-fixacao61.zip
62

http://localhost/css/public_html/seletores-de-pseudo-classes.html.

http://localhost/~<USUARIO>/css/public_html/seletores-de-pseudo-classes.html.
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
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
2-css-fixacao64.zip
65

http://localhost/css/public_html/seletores-de-pseudo-elementos.html.

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.
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
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 ;
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
2-css-fixacao67.zip
68

http://localhost/css/public_html/media-types.html.

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
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 ;
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
2-css-fixacao7 .zip
71

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

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%.
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%)
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
Design Responsivo (Contedo Extra)

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
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
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
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
253
CSS
3
254

http://localhost/css/public_html/background-color.html.

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

http://localhost/css/public_html/background-image.html.

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

http://localhost/css/public_html/background-repeat.html.

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
255
CSS
1 </ body > 11 </ html >
Cdigo HTML 3.41: background-attachment.html
256
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
12

http://localhost/css/public_html/background-attachment.html.

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
14

http://localhost/css/public_html/background-attachment.html.

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

http://localhost/css/public_html/background-position.html.

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
19
No projeto css, crie um arquivo CSS chamado background-clip.css.

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
20

http://localhost/css/public_html/background-clip.html.

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

http://localhost/css/public_html/background-origin.html.

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

http://localhost/css/public_html/background-size.html.

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

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

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
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 }
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
32

http://localhost/css/public_html/text-align.html.

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

http://localhost/css/public_html/text-decoration.html.

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
263
CSS
28 leo nunc , in ornare turpis aliquam quis . 29 </ p > 3 </ body > 31 </ html >
Cdigo HTML 3.49: text-transform.html
264
37
No projeto css, crie um arquivo CSS chamado text-transform.css.

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
38

http://localhost/css/public_html/text-transform.html.

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
40
No projeto css, crie um arquivo CSS chamado text-indent.css.

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
41

http://localhost/css/public_html/text-indent.html.

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
265
CSS
266
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
44

http://localhost/css/public_html/letter-spacing.html.

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
266
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
47

http://localhost/css/public_html/word-spacing.html.

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
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
267
CSS
6 # p1 { 7 word - wrap : break - word ; 8 }
Cdigo CSS 3.76: word-wrap.css
268
50

http://localhost/css/public_html/word-wrap.html.

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

http://localhost/css/public_html/line-height.html.

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 .
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
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
56

http://localhost/css/public_html/white-space.html.

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 .
Cdigo HTML 3.56: text-shadow.html
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
59

http://localhost/css/public_html/text-shadow.html.

http://localhost/~<USUARIO>/css/public_html/text-shadow.html.
60
No projeto css, crie um arquivo chamado font-family.html.
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
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
62

http://localhost/css/public_html/font-family.html.

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

273
CSS
http://localhost/css/public_html/font-size.html.
274

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

http://localhost/css/public_html/font-style.html.

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

http://localhost/css/public_html/font-variant.html.

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 .
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
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
74

http://localhost/css/public_html/font-weight.html.

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

http://localhost/css/public_html/font-face.html.

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 >
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 >
Cdigo HTML 3.63: list-style-type.html
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
80

http://localhost/css/public_html/list-style-type.html.

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

http://localhost/css/public_html/list-style-image.html.

http://localhost/~<USUARIO>/css/public_html/list-style-image.html.
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
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
86

http://localhost/css/public_html/list-style-position.html.

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

http://localhost/css/public_html/border-style.html.

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 >
281
CSS
13 </ body > 14 </ html >
Cdigo HTML 3.67: border-width.html
282
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
92

http://localhost/css/public_html/border-width.html.

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

http://localhost/css/public_html/border-color.html.

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
97
No projeto css, crie um arquivo CSS chamado bordas-individuais.css.
1 div { 2 width : 4 px ; 3 height : 2 px ; 4
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
98

http://localhost/css/public_html/bordas-individuais.html.

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
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
2-css-complementar1
.zip
101

http://localhost/css/public_html/border-radius.html.

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

http://localhost/css/public_html/border-collapse.html.

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

http://localhost/css/public_html/border-spacing.html.

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
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 {
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
110

http://localhost/css/public_html/outline-style.html.

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

http://localhost/css/public_html/outline-color.html.

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
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
289
CSS
116
290

http://localhost/css/public_html/outline-width.html.

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

http://localhost/css/public_html/outline-offset.html.

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

http://localhost/css/public_html/box-shadow.html.

http://localhost/~<USUARIO>/css/public_html/box-shadow.html.
123
No projeto css, crie um arquivo chamado margens-externas.html.
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
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
125

http://localhost/css/public_html/margens-externas.html.

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

http://localhost/css/public_html/margens-internas.html.

http://localhost/~<USUARIO>/css/public_html/margens-internas.html.
129
No projeto css, crie um arquivo chamado conteudo-dimensao.html.

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

http://localhost/css/public_html/conteudo-dimensao.html.

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

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:

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
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
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
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
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
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
309
J AVA S CRIPT
310
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

http://localhost/javascript/public_html/javascript.html.

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 >


No projeto javascript, crie um arquivo chamado script.js.

311
J AVA S CRIPT
1 alert ( " K19 " ) ;
Cdigo Javascript 4.2: script.js
312
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 >


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.
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
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 ++;
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 ) ;
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
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
2-javascript-fixacao1 .zip
11

http://localhost/javascript/public_html/exibe-nome.html.

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
13
Adicione um arquivo chamado exibe-1-ate-100.js no projeto javascript.

; contador ++) {
1 for ( var contador = ; contador < 1 2 console . log ( contador ) ;
321
J AVA S CRIPT
3 }
Cdigo Javascript 4.30: exibe-1-ate-100.js
322
14

http://localhost/javascript/public_html/exibe-1-ate-1 .html.

http://localhost/~<USUARIO>/javascript/public_html/exibe-1-ate-1 .html.
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
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
17

http://localhost/javascript/public_html/exibe-padrao-1.html.

http://localhost/~<USUARIO>/javascript/public_html/exibe-padrao-1.html.
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
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 ) ;
323
J AVA S CRIPT
7 } 8 }
Cdigo Javascript 4.32: exibe-padrao-2.js
324
20

http://localhost/javascript/public_html/exibe-padrao-2.html.

http://localhost/~<USUARIO>/javascript/public_html/exibe-padrao-2.html.
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 "
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
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
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
23

http://localhost/javascript/public_html/objetos.html.

http://localhost/~<USUARIO>/javascript/public_html/objetos.html.
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
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
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
26

http://localhost/javascript/public_html/referencias.html.

http://localhost/~<USUARIO>/javascript/public_html/referencias.html.
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
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
330
www.k19.com.br
331
29
J AVA S CRIPT

http://localhost/javascript/public_html/prototype.html.

http://localhost/~<USUARIO>/javascript/public_html/prototype.html.
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
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
32

http://localhost/javascript/public_html/propriedade-1.html.

http://localhost/~<USUARIO>/javascript/public_html/propriedade-1.html.
331
J AVA S CRIPT
332
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 >
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 ) ;
35


36
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 >
J AVA S CRIPT
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 ) ;
38


39
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 >
333
J AVA S CRIPT
1 </ html >
334
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 ) ;
41


Funes
As funes em JavaScript so objetos. Voc pode armazen-las em variveis, arrays e outros objetos. Elas podem ser passadas como argumento ou devolvidas por outra funo. Veja o exemplo abaixo.
1 var multiplicacao = function (x , y ) { 2 return x * y ; 3 }
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.
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
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
44

http://localhost/javascript/public_html/multiplicacao.html.

336
www.k19.com.br
337
http://localhost/~<USUARIO>/javascript/public_html/multiplicacao.html.
J AVA S CRIPT
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
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
47

http://localhost/javascript/public_html/metodos.html.

http://localhost/~<USUARIO>/javascript/public_html/metodos.html.
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 >
337
J AVA S CRIPT
8 < body > 9 </ body > 1 </ html >
Cdigo HTML 4.21: soma.html
338
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
50

http://localhost/javascript/public_html/soma.html.

http://localhost/~<USUARIO>/javascript/public_html/soma.html.
Arrays
A linguagem Javascript prov um objeto com caractersticas semelhantes a um array. Esse tipo de objeto pode ser criado de forma literal com a sintaxe JSON.
1 2 3 4 5 6 7 8 9 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 ]) ; }
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.
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
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
53

http://localhost/javascript/public_html/array-length.html.

http://localhost/~<USUARIO>/javascript/public_html/array-length.html.
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
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
56

http://localhost/javascript/public_html/array-elementos.html.

http://localhost/~<USUARIO>/javascript/public_html/array-elementos.html.
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
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 " ;
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
59

http://localhost/javascript/public_html/array-add.html.

http://localhost/~<USUARIO>/javascript/public_html/array-add.html.
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
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
62

http://localhost/javascript/public_html/array-push.html.

344
www.k19.com.br
345
http://localhost/~<USUARIO>/javascript/public_html/array-push.html.
J AVA S CRIPT
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
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
65

http://localhost/javascript/public_html/array-concat.html.

http://localhost/~<USUARIO>/javascript/public_html/array-concat.html.
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 >
345
J AVA S CRIPT
1 </ html >
Cdigo HTML 4.27: array-pop.html
346
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
68

http://localhost/javascript/public_html/array-pop.html.

http://localhost/~<USUARIO>/javascript/public_html/array-pop.html.
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
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
71

http://localhost/javascript/public_html/array-reverse.html.

http://localhost/~<USUARIO>/javascript/public_html/array-reverse.html.
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
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
74

http://localhost/javascript/public_html/array-shift.html.

http://localhost/~<USUARIO>/javascript/public_html/array-shift.html.

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

http://localhost/javascript/public_html/array-slice.html.

http://localhost/~<USUARIO>/javascript/public_html/array-slice.html.
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
348
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
80

http://localhost/javascript/public_html/array-unshift.html.

http://localhost/~<USUARIO>/javascript/public_html/array-unshift.html.
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
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
83

http://localhost/javascript/public_html/array-split.html. www.facebook.com/k19treinamentos
349
J AVA S CRIPT
350

http://localhost/~<USUARIO>/javascript/public_html/array-split.html.
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.
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
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
86

http://localhost/javascript/public_html/DOM.html.

http://localhost/~<USUARIO>/javascript/public_html/DOM.html.
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
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:
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.

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
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
359
J AVA S CRIPT
78 console . log ( " scroll ( " + x + " , " + y + " ) " ) ; 79 }
Cdigo Javascript 4.112: eventos.js
360
90

http://localhost/javascript/public_html/eventos.html.

http://localhost/~<USUARIO>/javascript/public_html/eventos.html.
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 >
361
J AVA S CRIPT
362
Cdigo HTML 4.51: web-storage.html
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
93

http://localhost/javascript/public_html/web-storage.html.

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 " ) ;
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
95
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 >
96
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 >
364
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 -->
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
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
100

http://localhost/javascript/public_html/geolocalizacao.html.

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 ) ; );
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
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
a) Podemos associar cdigo JavaScript aos documentos HTML atravs dos elementos script e js. b) O cdigo JavaScript sempre carregado antes de todos os elementos HTML. c) O cdigo JavaScript sempre colocado dentro do documento HTML. d) O elemento script s pode ser colocada no corpo do elemento head. e) Podemos associar cdigo JavaScript aos documentos HTML atravs do elemento script.

www.k19.com.br
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.

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.

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.

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.
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
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.
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
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
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.
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
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
377
J Q UERY
378
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
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

http://localhost/jQuery/public_html/jQuery.html.

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
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
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
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 + " ) " ) ;
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
384
www.k19.com.br
385
7
J Q UERY

http://localhost/jQuery/public_html/eventos.html.

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
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
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
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
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
392
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
10

http://localhost/jQuery/public_html/seletores.html.

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
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
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 */
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
13

http://localhost/jQuery/public_html/efeitos.html.

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

http://localhost/jQuery/public_html/manipulacao.html. www.facebook.com/k19treinamentos
405
J Q UERY
406

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
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 " ) ;
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
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
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
20

http://localhost/jQuery/public_html/ajax.html.

http://localhost/~<USUARIO>/jQuery/public_html/ajax.html.
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
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
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
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
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
2-jquery-complementar2.zip

http://localhost/jQuery/public_html/jquery-complementar.html.

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.

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

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.
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
2-projeto-fixacao1.zip
No projeto blog, altere o arquivo index.html.

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
424
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
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
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 {
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
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 .
431
P ROJETO
53 </ p > 54 </ article > 55 </ div > 56 </ article > 57 <? php endfor ; ? >
Cdigo HTML A.2: servico.php
432
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
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


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

http://localhost/~<USUARIO>/blog/public_html/index.html.
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.
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
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

http://localhost/html/public_html/pagina-simples.html.

http://localhost/~<USUARIO>/html/public_html/pagina-simples.html.
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

http://localhost/html/public_html/geografia.html.

http://localhost/~<USUARIO>/html/public_html/geografia.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 > 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

http://localhost/html/public_html/seguro-treinamento.html.

http://localhost/~<USUARIO>/html/public_html/seguro-treinamento.html.
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

http://localhost/html/public_html/caracteres-especiais.html.

http://localhost/~<USUARIO>/html/public_html/caracteres-especiais.html.
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

http://localhost/html/public_html/espacos-e-quebras-de-linha.html.

http://localhost/~<USUARIO>/html/public_html/espacos-e-quebras-de-linha.html.
440
www.k19.com.br
441
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 > 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

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

http://localhost/~<USUARIO>/html/public_html/codigo-java.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 > 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
441
R ESPOSTAS
442

http://localhost/html/public_html/elementos-i-b.html.

http://localhost/~<USUARIO>/html/public_html/elementos-i-b.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 > 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

http://localhost/html/public_html/sao-paulo.html.

http://localhost/~<USUARIO>/html/public_html/sao-paulo.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 > 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

http://localhost/html/public_html/spfc.html.

http://localhost/~<USUARIO>/html/public_html/spfc.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 > 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

http://localhost/html/public_html/mais-citacoes.html.
443
R ESPOSTAS
444

http://localhost/~<USUARIO>/html/public_html/mais-citacoes.html.
2-html-complementar1 .zip
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

http://localhost/html/public_html/abbr.html.

http://localhost/~<USUARIO>/html/public_html/abbr.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 > 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

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

http://localhost/~<USUARIO>/html/public_html/mais-definicoes.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 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

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

http://localhost/~<USUARIO>/html/public_html/mais-alteracoes.html.
1 <! DOCTYPE html > 2 < html lang = " pt - br " >
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

http://localhost/html/public_html/mais-datas.html.

http://localhost/~<USUARIO>/html/public_html/mais-datas.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 > 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

http://localhost/html/public_html/texto-marcado.html.

http://localhost/~<USUARIO>/html/public_html/texto-marcado.html.
446
www.k19.com.br
447
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 > 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

http://localhost/html/public_html/pontos-turisticos.html.

http://localhost/~<USUARIO>/html/public_html/pontos-turisticos.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 > 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 >
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

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

http://localhost/~<USUARIO>/html/public_html/manual-k19.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 > 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

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

http://localhost/~<USUARIO>/html/public_html/mais-links.html.
448
www.k19.com.br
449
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 > 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

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

http://localhost/~<USUARIO>/html/public_html/mais-imagens.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 > Tabelas </ title > 6 </ head > 7 < body > 8 < table > 9 < thead > 1 < tr > 11 < th > Continente / Subcontinente </ th >
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

http://localhost/html/public_html/mais-tabelas.html.

http://localhost/~<USUARIO>/html/public_html/mais-tabelas.html.
2-html-complementar2 .zip
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
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 </ label > 148 < textarea 149 id = " mais_conhecimentos_id " 15 rows = " 1 " 151 cols = " 2 " 152 maxlength = " 5 " > Digite os seus conhecimentos </ textarea > 153 </ fieldset > 154 155 < input type = " submit " value = " Enviar " > 156 </ form > 157 </ body > 158 </ html >
Cdigo HTML 2.179: mais-formularios.html
R ESPOSTAS

http://localhost/html/public_html/mais-formularios.html.

http://localhost/~<USUARIO>/html/public_html/mais-formularios.html.
Questo 2.1 d Questo 2.2 c Questo 2.3 e Questo 2.4 a Questo 2.5 c Questo 2.6 b
453
R ESPOSTAS
454
Questo 2.7 d Questo 2.8 e Questo 2.9 e Questo 2.10 a Questo 2.11 d Questo 2.12 c Questo 2.13 e Questo 2.14 b Questo 2.15 a Questo 3.1 e Questo 3.2
454
www.k19.com.br
455
R ESPOSTAS
b Questo 3.3 d Questo 3.4 c Questo 3.5 d Questo 3.6 b Questo 3.7 a Questo 3.8 d Questo 3.9 a Questo 3.10 d Questo 3.11 e Questo 3.12 d
455
R ESPOSTAS
456
Questo 3.13 d Questo 3.14 e Questo 3.15 c Questo 3.16 e Questo 3.17 d Exerccio Complementar 4.1 No projeto javascript, adicione um arquivo chamado exibe-numeros-1-50-2x.html e outro chamado exibe-numeros-1-50-2x.js.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exibe os nmeros de 1 at 5 duas vezes </ title > 6 < script type = " text / javascript " src = " exibe - numeros -1 -5 -2 x . js " > </ script > 7 </ head > 8 < body > 9 </ body > 1 </ html >
Cdigo HTML 4.56: exibe-numeros-1-50-2x.html
1 for ( var x = ; x < 2; x ++) { 2 for ( var y = 1; y <= 5 ; y ++) { 3 console . log ( y ) ; 4 } 5 }
Cdigo Javascript 4.136: exibe-numeros-1-50-2x.js

http://localhost/javascript/public_html/exibe-numeros-1-5 -2x.html.

456
www.k19.com.br
457
http://localhost/~<USUARIO>/javascript/public_html/exibe-numeros-1-5 -2x.html.
R ESPOSTAS
Utilize o console do navegador para observar as mensagens exibidas. Arquivo: https://github.com/K19/K19-Exercicios/archive/k

2-javascript-complementar1.zip
Exerccio Complementar 4.2 No projeto javascript, adicione um arquivo chamado exibe-nome-k19.html e outro chamado exibenome-k19.js.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exibe nome e K19 </ title > 6 < script type = " text / javascript " src = " exibe - nome - k19 . js " > </ script > 7 </ head > 8 < body > 9 </ body > 1 </ html >
Cdigo HTML 4.57: exibe-nome-k19.html
1 for ( var x = ; x < 5; x ++) { 2 console . log ( " Rafael Cosentino " ) ; 3 4 for ( var y = ; y < 3; y ++) { 5 console . log ( " K19 " ) ; 6 } 7 }
Cdigo Javascript 4.137: exibe-nome-k19.js

http://localhost/javascript/public_html/exibe-nome-k19.html.

http://localhost/~<USUARIO>/javascript/public_html/exibe-nome-k19.html.

Exerccio Complementar 4.3 No projeto javascript, adicione um arquivo chamado multiplos-de-tres.html e outro chamado multiplosde-tres.js.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Mltiplos de trs </ title > 6 < script type = " text / javascript " src = " multiplos - de - tres . js " > </ script >
457
R ESPOSTAS
7 </ head > 8 < body > 9 </ body > 1 </ html >
Cdigo HTML 4.58: multiplos-de-tres.html
458
1 for ( var x = 1; x <= 6 ; x ++) { 2 if ( x % 3 != ) { 3 console . log ( " * " ) ; 4 } else { 5 console . log ( " *** " ) 6 } 7 }
Cdigo Javascript 4.138: multiplos-de-tres.js

http://localhost/javascript/public_html/multiplos-de-tres.html.

http://localhost/~<USUARIO>/javascript/public_html/multiplos-de-tres.html.

Exerccio Complementar 4.4 No projeto javascript, adicione um arquivo chamado multiplos-de-quatro-e-sete.html e outro chamado multiplos-de-quatro-e-sete.js.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Mltiplos de quatro e sete </ title > 6 < script type = " text / javascript " src = " multiplos - de - quatro -e - sete . js " > </ script > 7 </ head > 8 < body > 9 </ body > 1 </ html >
Cdigo HTML 4.59: multiplos-de-quatro-e-sete.html
1 for ( var x = 1; x <= 8 ; x ++) { 2 var resto4 = x%4; 3 var resto7 = x%7; 4 5 if ( resto4 == || resto7 == ) { 6 console . log ( " * " ) ; 7 } else { 8 console . log ( x ) ; 9 } 1 }
Cdigo Javascript 4.139: multiplos-de-quatro-e-sete.js
458
www.k19.com.br
459
R ESPOSTAS

http://localhost/javascript/public_html/multiplos-de-quatro-e-sete.html.

http://localhost/~<USUARIO>/javascript/public_html/multiplos-de-quatro-e-sete.html.

Exerccio Complementar 4.5 No projeto javascript, adicione um arquivo chamado exibe-triangulo.html e outro chamado exibetriangulo.js.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exibe tringulo </ title > 6 < script type = " text / javascript " src = " exibe - triangulo . js " > </ script > 7 </ head > 8 < body > 9 </ body > 1 </ html >
Cdigo HTML 4.60: exibe-triangulo.html
1 var linha = " * " ; 2 for ( var contador = 1; contador <= 1 ; contador ++) { 3 console . log ( linha ) ; 4 linha += " * " ; 5 }
Cdigo Javascript 4.140: exibe-triangulo.js

http://localhost/javascript/public_html/exibe-triangulo.html.

http://localhost/~<USUARIO>/javascript/public_html/exibe-triangulo.html.

Exerccio Complementar 4.6 No projeto javascript, adicione um arquivo chamado exibe-triangulos.html e outro chamado exibetriangulos.js.
1 <! DOCTYPE html >
459
R ESPOSTAS
2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Exibe tringulos </ title > 6 < script type = " text / javascript " src = " exibe - triangulos . js " > </ script > 7 </ head > 8 < body > 9 </ body > 1 </ html >
Cdigo HTML 4.61: exibe-triangulos.html
460
1 var linha = " * " ; 2 for ( var contador = 1; contador <= 8; contador ++) { 3 console . log ( linha ) ; 4 var resto = contador % 4; 5 if ( resto == ) { 6 linha = " * " ; 7 } else { 8 linha += " * " ; 9 } 1 }
Cdigo Javascript 4.141: exibe-triangulos.js

http://localhost/javascript/public_html/exibe-triangulos.html.

http://localhost/~<USUARIO>/javascript/public_html/exibe-triangulos.html.

Exerccio Complementar 4.7 No projeto javascript, adicione um arquivo chamado bonnaci.html e outro chamado bonnaci.js.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Fibonacci </ title > 6 < script type = " text / javascript " src = " fibonnaci . js " > </ script > 7 </ head > 8 < body > 9 </ body > 1 </ html >
Cdigo HTML 4.62: bonnaci.html
1 2 3 4 5 6 7
var penultimo = var ultimo = 1;
console . log ( penultimo ) ; console . log ( ultimo ) ; for ( var contador = ; contador < 28; contador ++) {
460
www.k19.com.br
461
8 9 1 11 12 13 } var proximo = penultimo + ultimo ; console . log ( proximo ) ; penultimo = ultimo ; ultimo = proximo ;
R ESPOSTAS
Cdigo Javascript 4.142: bonnaci.js

http://localhost/javascript/public_html/fibonnaci.html.

http://localhost/~<USUARIO>/javascript/public_html/fibonnaci.html.

Exerccio Complementar 4.8 No projeto javascript, adicione um arquivo chamado embaralha.html e outro chamado embaralha.js.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Embaralha </ title > 6 < script type = " text / javascript " src = " embaralha . js " > </ script > 7 </ head > 8 < body > 9 </ body > 1 </ html >
Cdigo HTML 4.63: embaralha.html
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23
var array = new Array (1 ) ; for ( var i = ; i < array . length ; i ++) { array [ i ] = i ; } for ( var i = ; i < array . length ; i ++) { console . log ( array [ i ]) ; } for ( var i = ; var posicao1 var posicao2 var auxiliar i = = = < 1 ; i ++) { Math . floor ( Math . random () * 1 ) ; Math . floor ( Math . random () * 1 ) ; array [ posicao1 ];
array [ posicao1 ] = array [ posicao2 ]; array [ posicao2 ] = auxiliar ; } console . log ( " --------------------" ) ; for ( var i = ; i < array . length ; i ++) { console . log ( array [ i ]) ;
461
R ESPOSTAS
24 }
Cdigo Javascript 4.143: embaralha.js
462

http://localhost/javascript/public_html/embaralha.html.

http://localhost/~<USUARIO>/javascript/public_html/embaralha.html.

Exerccio Complementar 4.9 No projeto javascript, adicione um arquivo chamado ordena.html e outro chamado ordena.js.
1 <! DOCTYPE html > 2 < html lang = " pt - br " > 3 < head > 4 < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > 5 < title > Ordena </ title > 6 < script type = " text / javascript " src = " ordena . js " > </ script > 7 </ head > 8 < body > 9 </ body > 1 </ html >
Cdigo HTML 4.64: ordena.html
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17
var array = new Array (1 ) ; for ( var i = ; i < array . length ; i ++) { array [ i ] = Math . floor ( Math . random () * 1 ) ; } for ( var i = ; i < array . length ; i ++) { console . log ( array [ i ]) ; } array . sort () ; console . log ( " --------------------" ) ; for ( var i = ; i < array . length ; i ++) { console . log ( array [ i ]) ; }
Cdigo Javascript 4.144: ordena.js

http://localhost/javascript/public_html/ordena.html.

http://localhost/~<USUARIO>/javascript/public_html/ordena.html.
462
www.k19.com.br
463
R ESPOSTAS

Questo 4.1 e Questo 4.2 a Questo 4.3 e Questo 4.4 c Questo 4.5 a Questo 4.6 c Questo 4.7 b Questo 4.8 d Questo 4.9 e Questo 4.10
463
R ESPOSTAS
464
b Questo 4.11 c Questo 5.1 a Questo 5.2 e Questo 5.3 a, d
Questo 5.4 d Questo 5.5 c Questo 5.6 todas as alternativas esto corretas Questo 5.7 b
464
www.k19.com.br

k19 k02 Desenvolvimento Web Com HTML Css e Javascript

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

k19 k02 Desenvolvimento Web Com HTML Css e Javascript

Transféré par

Droits d'auteur :

Formats disponibles

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

S TO EN AM EIN TREINAMENTOS TR EIN AM EN TO

Conhea os nossos cursos

Sites e Aplicaes Web

Figura 1.1: Sites

Figura 1.2: Aplicaes Web

Figura 1.4: Design Responsivo

Web Servers e HTTP

Figura 1.5: Internet

Figura 1.6: Intranet

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

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

Figura 1.7: Interao entre os navegadores e os Web Servers

Figura 1.8: Endereos IP

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

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

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

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

Figura 1.15: Alterao do Web Server

DNS (Domain Name System)

Figura 1.16: Interao entre os navegadores e os servidores DNS

SEO (Search Engine Optimization)

Figura 1.17: Robs

Figura 1.18: Diagrama geral da arquitetura web

Ativando o IIS e ASP Classic no Windows 7

No Painel de Controle, clique em Programas.

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

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.

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

Instalao do Apache HTTP Server no Ubuntu 13.04

sudo apt - get install apache2

sudo apt - get install php5 libapache2 - mod - php5

sudo service apache2 restart

sudo service apache2 restart

mkdir ~/ public_html && chmod

Apache HTTP Server no Mac OS X Mountain Lion

2. Altere as permisses do arquivo criado anteriormente.

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

4. Descomente a linha encontrada anteriormente.

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

6. Inicie o Apache HTTP Server.

7. Congure o Apache HTTP Server para iniciar automaticamente.

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

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.

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

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

<html lang=pt-br> <head>

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

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

Figura 2.1: Estrutura bsica de um documento HTML

Figura 2.2: Estrutura bsica de um documento HTML

Ferramentas de Desenvolvimento Web