k19 k02 desenvolvimento web com html css e javascript

TREINAMENTOS

Desenvolvimento Web comHTML, CSS e Javascript

Desenvolvimento Web com HTML, CSS e Javascript

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

Esta apostila contm:

289 exerccios de fixao.

164 exerccios complementares.

56 questes de prova.

i

Sumrio ii

Sobre a K19 1

Seguro Treinamento 2

Termo de Uso 3

Cursos 4

1 Introduo 11.1 Sites e Aplicaes Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.2 Navegadores e Dispositivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.3 Web Servers e HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41.4 Domnios e endereos IP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51.5 DNS (Domain Name System) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91.6 Servios de Hospedagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101.7 SEO (Search Engine Optimization) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111.8 Arquitetura Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111.9 Ativando o IIS e ASP Classic no Windows 7 . . . . . . . . . . . . . . . . . . . . . . . . . . 121.10 Instalao do Apache HTTP Server no Ubuntu 13.04 . . . . . . . . . . . . . . . . . . . . 161.11 Apache HTTP Server no Mac OS X Mountain Lion . . . . . . . . . . . . . . . . . . . . . . 161.12 Resumo do Captulo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171.13 Prova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

2 HTML 212.1 Introduo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212.2 Estrutura Bsica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212.3 Editores HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252.4 Ferramentas de Desenvolvimento Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252.5 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262.6 Semntica HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322.7 Ttulos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342.8 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352.9 Pargrafos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382.10 Character Entities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392.11 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402.12 Texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412.13 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 522.14 Listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 582.15 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 622.16 Iframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 682.17 Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 692.18 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 702.19 ncoras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 712.20 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 732.21 Imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 752.22 URLs absolutas e relativas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 762.23 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 782.24 Tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

ii www.k19.com.br

iii SUMRIO

2.25 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 832.26 Formulrios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 852.27 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 912.28 Caixas de entrada especficas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 932.29 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 972.30 Checkboxes e Radios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 992.31 Seleo de cores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1002.32 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1012.33 Botes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1032.34 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1052.35 Drop-down list . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1062.36 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1082.37 Fieldset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1092.38 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1102.39 Autocomplete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1112.40 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1122.41 Campos ou botes desabilitados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1132.42 Campos fixos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1142.43 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1142.44 Validao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1152.45 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1172.46 Partes de um documento HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1182.47 Diviso de contedo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1232.48 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1232.49 Agrupando elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1242.50 Erro: Fechamento inadequado das tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1242.51 Erro: Imagens sem texto alternativo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1242.52 Erro: Criar listas com o elemento br . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1252.53 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1252.54 Resumo do Captulo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1332.55 Prova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

3 CSS 1413.1 Box Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1413.2 Regras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1433.3 Aplicando CSS ao HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1443.4 Comentrios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1453.5 Chrome DevTools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1453.6 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1503.7 Cores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1543.8 Unidades de medida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1553.9 Backgrounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1563.10 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1633.11 Textos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1643.12 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1703.13 Fontes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1713.14 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1763.15 Listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1773.16 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178

www.facebook.com/k19treinamentos iii

SUMRIO iv

3.17 Bordas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1793.18 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1843.19 Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1853.20 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1873.21 Sombras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1883.22 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1903.23 Margens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1913.24 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1943.25 Altura e Largura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1953.26 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1963.27 Display e Visibilidade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1973.28 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2003.29 Opacidade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2013.30 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2023.31 Posicionamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2033.32 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2073.33 Overflow e clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2093.34 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2113.35 Transformaes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2133.36 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2153.37 Transies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2173.38 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2213.39 Animaes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2223.40 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2253.41 Seletores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2283.42 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2323.43 Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2383.44 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2413.45 Sprites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2423.46 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2433.47 Gradientes (Contedo Extra) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2443.48 Herana (Contedo Extra) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2483.49 box-sizing (Contedo Extra) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2493.50 Design Responsivo (Contedo Extra) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2493.51 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2533.52 Resumo do Captulo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2953.53 Prova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297

4 JavaScript 3054.1 Aplicando JavaScript ao HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3054.2 Carregamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3054.3 Chrome DevTools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3064.4 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3084.5 Variveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3124.6 Operadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3124.7 Controle de fluxo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3194.8 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3204.9 Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3244.10 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328

iv www.k19.com.br

v SUMRIO

4.11 Funes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3344.12 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3364.13 Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3384.14 Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3414.15 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3424.16 DOM - Document Object Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3504.17 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3524.18 Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3534.19 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3584.20 Web Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3604.21 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3614.22 History . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3624.23 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3644.24 Geolocalizao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3654.25 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3654.26 Alarmes (Contedo Extra) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3664.27 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3674.28 Resumo do Captulo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3694.29 Prova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370

5 jQuery 3755.1 Introduo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3755.2 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3765.3 Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3795.4 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3825.5 Seletores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3855.6 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3925.7 Efeitos e Animaes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3935.8 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3945.9 Manipulao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3965.10 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4035.11 Mais mtodos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4065.12 AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4085.13 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4105.14 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4115.15 Resumo do Captulo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4175.16 Prova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418

A Projeto 421A.1 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421

B Quizzes 435

C Respostas 437

www.facebook.com/k19treinamentos v

SUMRIO vi

vi www.k19.com.br

1 SUMRIO

Sobre a K19

A K19 uma empresa especializada na capacitao de desenvolvedores de software. Sua equipe composta por profissionais formados em Cincia da Computao pela Universidade de So Paulo(USP) e que possuem vasta experincia em treinamento de profissionais para rea de TI.

O principal objetivo da K19 oferecer treinamentos de mxima qualidade e relacionados s prin-cipais tecnologias utilizadas pelas empresas. Atravs desses treinamentos, seus alunos tornam-secapacitados para atuar no mercado de trabalho.

Visando a mxima qualidade, a K19 mantm as suas apostilas em constante renovao e melho-ria, oferece instalaes fsicas apropriadas para o ensino e seus instrutores esto sempre atualizadosdidtica e tecnicamente.

www.facebook.com/k19treinamentos 1

SUMRIO 2

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 pos-sui o Seguro Treinamento. Ao contratar um curso, o aluno poder refaz-lo quantas vezes desejarmediante 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 aoalunos que desejam utilizar o Seguro Treinamento. O valor da franquia para utilizar o Seguro Treina-mento 10% do valor total do curso.

2 www.k19.com.br

3 SUMRIO

Termo de UsoTermo de Uso

Todo o contedo desta apostila propriedade da K19 Treinamentos. A apostila pode ser utilizadalivremente para estudo pessoal . Alm disso, este material didtico pode ser utilizado como materialde apoio em cursos de ensino superior desde que a instituio correspondente seja reconhecida peloMEC (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 semo prvio consentimento formal, por escrito, da K19 Treinamentos. O uso indevido est sujeito smedidas legais cabveis.


SUMRIO 4

K01- Lgica de Programao

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

K31 - C# e Orientao a Objetos

K32 - Desenvolvimento Web com ASP.NET MVC

TREINA

MENT

OS

TREINAMENTOSTREINAMENTOS Conhea os nossos cursos

www.k19.com.br/cursos

K02 - Desenvolvimento Web com HTML, CSS e JavaScript

K03 - SQL e Modelo Relacional

K41 - Desenvolvimento Mobile com Android

K51 - Design Patterns em Java

K52 - Desenvolvimento Web com Struts

4 www.k19.com.br

INTRODUO

CA

P

TU

LO

1

Sites e Aplicaes Web

Normalmente, as pessoas utilizam o termo site quando se referem a blogs, sites de notcias, sitesinstitucionais, portais, lojas virtuais, entre outros. J a denominao aplicao web muito utilizadapara sistemas de gesto empresarial que so acessados atravs de navegadores (browsers).

No h uma definio exata que diferencie claramente sites e aplicaes web. Alguns defendemque os sites so read-only (somente leitura) enquanto as aplicaes web so read-write (leitura eescrita). Nessa definio, os sites apenas fornecem contedo enquanto as aplicaes web podemfornecer e/ou receber contedo.

Seguindo essa linha de raciocnio, algumas pessoas gostam de utilizar o grau de interatividadecom os usurios para classificar como site ou aplicao web. Nessa viso, aplicaes web seriammais interativas e os sites menos interativos. Contudo, no h uma medida definida para calcularesse grau de interatividade e com isso aplicar de forma objetiva essa classificao. Dessa forma, essadiferenciao, na prtica, subjetiva.

Outras pessoas preferem utilizar o critrio do propsito para classificar como site ou aplicaoweb. Por exemplo, se o propsito divulgar as informaes de uma empresa, os dados de um pro-duto, as notcias de um determinado assunto, utiliza-se o termo site. Se o propsito criar umaferramenta para controlar as atividades administrativas de uma organizao, utiliza-se a denomina-o aplicao web.

Utilizando o critrio do propsito para classificar como site ou aplicao web, podemos concluirque, geralmente, os sites necessitam de uma interface mais atrativa pois normalmente esto ven-dendo alguma coisa ou alguma ideia. Por outro lado, na maior parte dos casos, o mais importantepara as aplicaes web possuir uma interface fcil de utilizar.

Independentemente do critrio de classificao utilizado, os tpicos discutidos nesse treina-mento so importantes tanto para o desenvolvimento de sites quanto para o desenvolvimento deaplicaes web. Portanto, do nosso ponto de vista, essas diferenas no sero to relevantes.


INTRODUO 2

Figura 1.1: Sites

Figura 1.2: Aplicaes Web

2 www.k19.com.br

3 INTRODUO

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 diferenasna forma de exibir as pginas web aos usurios. Antigamente, essas diferenas eram maiores. Como passar do tempo, os navegadores ficaram cada vez mais parecidos nesse aspecto. Contudo, osdesenvolvedores 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 dispositivosque podem ser utilizados para acessar os sites e as aplicaes web. Atualmente, as pessoas acessamos sites e as aplicaes web atravs de computadores tradicionais, tablets, celulares, televisores, entreoutros. Esses dispositivos possuem telas de tamanhos diferentes. Dessa forma, os desenvolvedoresweb devem considerar essas diferenas na criao das pginas web. Hoje em dia, fala-se muito dedesign responsivo. Os sites ou as aplicaes web so ditos responsivos se eles esto preparados paradiferentes tamanhos de tela.

Figura 1.4: Design Responsivo


INTRODUO 4

Web Servers e HTTP

Os sites e as aplicaes web so implantados em computadores conectados Internet ou a umarede privada qualquer (Intranet). Normalmente, os sites so implantados em computadores conec-tados Internet pois assim podero ser acessados praticamente de qualquer lugar do mundo. Poroutro lado, as aplicaes web, muitas vezes, so implantadas em computadores conectados a umaIntranet 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

5 INTRODUO

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

Resposta HTTP

HTTP/1.1 200 OKDate: Mon, 23 May 2014 22:38:34 GMTServer: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)Last-Modified: Wed, 08 Jan 2014 23:11:55 GMTContent-Type: text/html; charset=UTF-8Content-Length: 131Connection: Keep-Alive

K19 - Treinamentos

K02 - Desenvolvimento Web com HTML, CSS e JavaScript

Requisio HTTP

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

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 auma rede. A princpio, qualquer navegador executando em um dispositivo conectado a essa redepode realizar requisies a esse Web Server.

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

Domnios e endereos IP

Os dispositivos conectados a uma rede so identificados atravs de endereos formados porsequncias de nmeros. Esses endereos so chamados de endereos IP. Em uma Intranet, quemcontrola os endereos IP dos dispositivos conectados a prpria organizao que administra essa In-tranet. Por outro lado, os endereos IP dos dispositivos conectados Internet so gerenciados pelosprovedores de acesso (ISP).


INTRODUO 6

Figura 1.8: Endereos IP

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

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

6 www.k19.com.br

7 INTRODUO

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 commaior frequncia. Mas, para maior parte das pessoas, seria impossvel decorar tantos nmeros. Pararesolver esse problema, os endereos IP so associados a domnios. Veja alguns exemplos de dom-nios.

www.k19.com.br

www.usp.br

www.wikipedia.org

As pessoas conseguem decorar ou deduzir os domnios bem mais facilmente do que os endereosIP.


INTRODUO 8

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 en-dereo IP de um Web Server precisa ser alterado. Geralmente, essa modificao ocorre por motivostcnicos. Supondo que essa mudana ocorra, quem estiver acessando esse Web Server atravs doendereo IP antigo no conseguir mais acess-lo dessa forma. Por outro lado, quem estiver aces-sando esse Web Server atravs do domnio dele poder continuar acessando da mesma forma poisesse domnio pode ser facilmente associado ao novo endereo IP.

8 www.k19.com.br

9 INTRODUO

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 noBrasil (registro.br).

DNS (Domain Name System)

Como vimos, podemos acessar um Web Server diretamente atravs do seu endereo IP ou indi-retamente atravs de um domnio. Para utilizar a segunda abordagem, necessrio consultar umservidor 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.


INTRODUO 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 infra-estrutura ou na infraestrutura de empresas especializadas. Em determinadas situaes, a primeirapossibilidade mais conveniente.

Por exemplo, normalmente, as instituies bancrias preferem manter os seus sites e as suasaplicaes web em Web Servers dentro da sua prpria infraestrutura. Essa abordagem permite umcontrole maior da comunicao entre essas instituies e os seus clientes. Mas, ela exige grandesinvestimentos. Para garantir que os seus Web Servers estejam sempre funcionando, essas instituiesbancrias mantm profissionais 24 horas por dia 7 dias por semana (24/7). Caso contrrio, os sitesou as aplicaes web dessas instituies podem ficar fora do ar e gerar grandes prejuzos.

Por outro lado, muitas vezes, mais conveniente manter os Web Servers de uma organizao nainfraestrutura de uma empresa especializada. Dessa forma, a responsabilidade de mant-los fun-cionando delegada essa empresa. Essa abordagem, geralmente, diminui os custos. Contudo, ocontrole delegado a uma outra empresa. O servio oferecido por essas empresas denominadoservio de hospedagem. Eis uma lista de empresas que oferecem esse tipo de servio.

Amazon

10 www.k19.com.br

11 INTRODUO

Localweb

UOL

SEO (Search Engine Optimization)

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

Para responder rapidamente s consultas realizadas, as ferramentas de busca analisam previ-amente os sites. Esse processo de anlise chamado de indexao. A indexao realizada porprogramas de computador que interagem com os sites para obter informaes sobre o contedo decada 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 anlisedos 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 aplicaesweb.

Arquitetura Web

Vamos utilizar um diagrama para apresentar uma viso geral da arquitetura web.


INTRODUO 12

Figura 1.18: Diagrama geral da arquitetura web

Observe que o diagrama foi dividido em duas partes: client side e server side. Alguns profissi-onais se especializam no client side e outros no server side. Outra denominao possvel para clientside front-end e para server side back-end.

Por exemplo, um web designer deve ter bons conhecimentos do client side. Por outro lado, umprogramador web deve ter bons conhecimentos do server side.

Geralmente, os web designers no precisam ter conhecimento do server side mas t-lo pode sertil. Por outro lado, os programadores web precisam conhecer razoavelmente bem o client side.Nesse treinamento, estamos interessados especificamente no client side.

Ativando o IIS e ASP Classic no Windows 7

Se voc quiser utilizar o Windows 7 para fazer os exerccios dos prximos captulos, instale o IISe o ASP Classic de acordo com os passos a seguir.

No menu Iniciar, clique em Painel de Controle.

12 www.k19.com.br

13 INTRODUO

No Painel de Controle, clique em Programas.

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


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

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


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

Configurao do Userdir

Configure o userdir do Apache HTTP Server seguindo passos abaixo.

sudo a2enmod userdir

sudo service apache2 restart

mkdir ~/ public_html && chmod 0755 ~/ 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,configure o Apache HTTP Server de acordo com os passos a seguir.

1. No diretrio /etc/apache2/users/, crie um arquivo de configurao com o nome do seu usurio(ex: jonas.conf).

1 2 Options FollowSymLinks Indexes MultiViews3 AllowOverride All4 Order allow ,deny5 Allow from all6

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 INTRODUO

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. Configure o Apache HTTP Server para iniciar automaticamente.

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

Resumo do Captulo

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

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

3 A Internet a maior rede pblica de computadores.

4 Uma rede privada de computadores denominada Intranet

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

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

7 Os dispositivos conectados a uma rede de computadores so identificados atravs de endereosIP.

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

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


INTRODUO 18

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

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

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

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

Prova

1 Qual alternativa est correta?

a) Existe uma 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 aplicaesweb.

c) As aplicaes web no so utilizadas como ferramentas para controle administrativo de umaempresa.

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

e) Geralmente, as aplicaes web vendem algum produto ou alguma ideia.


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 diferentestamanhos de tela.


a) HTTP protocolo de comunicao.

18 www.k19.com.br

19 INTRODUO

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.


a) O endereo IP de um dispositivo determina precisamente a localizao geogrfica desse dis-positivo.

b) O contedo de um site determinado pelo domnio associado ao Web Server onde esse siteest implantado.

c) Domnios so associados a endereos IP.

d) Para aplicaes web devemos utilizar domnios especiais.

e) Todo domnio inicia com www.


a) A funo principal de um servidor DNS (Domain Name System) informar o nome do propri-etrio 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.


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: 4 Pontuao Mxima: 6


INTRODUO 20

20 www.k19.com.br

HTML

CA

P

TU

LO

2

Introduo

Quando acessamos uma pgina web, estamos interessados na informao contida nessa pgina.Essa informao pode estar na forma de texto, imagem ou vdeo. O contedo de uma pgina web definido com a linguagem HTML (HyperText Markup Language). HTML uma linguagem de mar-cao originalmente proposta por Tim Berners-Lee no final da dcada de 1980. O objetivo do TimBarners-Lee era criar um mecanismo simples que pudesse ser utilizado por qualquer pessoa quequisesse disseminar documentos cientficos.

Desde sua proposta at os dias de hoje, a linguagem HTML sofreu diversas alteraes. A cadaverso, novos recursos so adicionados e problemas corrigidos. A verso mais atual da especificaoda linguagem HTML a 5. Essa verso ainda no foi finalizada, a previso que ela seja lanada emdefinitivo em Julho de 2014. Porm, os navegadores j implementam diversos recursos do HTML5.A especificao est disponvel no endereo http://www.w3.org/TR/html5.

As especificaes da linguagem HTML so publicadas pelo World Wide Web Consortium maisconhecido por sua sigla W3C. Alm do HTML, o W3C tambm responsvel por linguagens como oXML, 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 aesse elemento. As tags so definidas com parnteses angulares (< e >). Os elementos podem possuiratributos e contedo. Os atributos so formados por nome e valor. Normalmente, os valores dosatributos so definidos dentro de aspas dupla e o contedo dos elementos um texto ou outroselementos.


HTML 22

K19 Treinamentos K02 - Devenvolvimento Web com HTML, CSS e JavaScript

Declarao do tipo de documento

Tag de abertura do elemento html

Contedo do elemento body

Nome de atributo

Valor de atributo

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 SobreA especificao do HTML5 define duas sintaxes distintas para produzir documentosHTML. A primeira denominada sintaxe HTML e a segunda denominada sintaxe

XHTML. A maior parte dos autores recomendam a utilizao da sintaxe HTML. Nos exemplose nos exerccios dessa apostila, a preferncia ser pela sintaxe HTML.

22 www.k19.com.br

23 HTML

Mais SobreDe acordo com a especificao da linguagem HTML, alguns elementos so denomina-dos Normal Elements. Esses elementos so abertos com uma tag e fechados com

outra tag. Por exemplo, o elemento p um Normal Element. Observe a utilizao da tag deabertura e da tag de fechamento do elemento p.

1 K02 - Desenvolvimento Web com HTML , CSS e JavaScript

Mais SobreH tambm elementos denominados Void Elements. Esses elementos no possuemcontedo. 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 2 K01 - Lgica de Programao 3 K02 - Desenvolvimento Web com HTML , CSS e JavaScript 4 K03 - SQL e Modelo Relacional5

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 tagsseparadas. Contudo, o caractere / obrigatrio.

1 2 K01 - Lgica de Programao 3 K02 - Desenvolvimento Web com HTML , CSS e JavaScript 4 K03 - SQL e Modelo Relacional5

Para um navegador exibir corretamente uma pgina web, devemos informar explicitamente otipo do documento. O tipo do documento informado com a declarao . Quandoconveniente, discutiremos as principais diferenas entre os tipos de documentos mais importantes.Veja a declarao para os principais tipos de documentos.

1

Cdigo HTML 2.4: HTML 5

1

Cdigo HTML 2.5: HTML 4.01 Strict

1

Cdigo HTML 2.6: HTML 4.01 Transitional


HTML 24

1

Cdigo HTML 2.7: HTML 4.01 Frameset

1

Cdigo HTML 2.8: XHTML 1.0 Transitional

1

Cdigo HTML 2.9: XHTML 1.0 Frameset

1

Cdigo HTML 2.10: XHTML 1.1

Os elementos HTML, com exceo do DOCTYPE, devem ser inseridos no contedo do elementohtml. Esse elemento aberto com a tag , fechado com a tag e deve conter exata-mente um elemento head seguido de exatamente um elemento body.

Diversos autores recomendam a utilizao do atributo lang. Esse atributo indica a lngua utili-zada no documento HTML ou na maior parte dele. Algumas ferramentas de leitura ou de traduode texto podem utilizar esse atributo para descobrir facilmente em qual lngua os textos contidos nodocumento HTML ou na maior parte dele foram escritos.

1 2 3 4 ...5 6 7 ...8 9

A principal funo do elemento head agrupar informaes sobre o documento HTML (metain-formao). So exemplos de metainformaes: o encoding, a taxa de atualizao, o autor, a descrioe as palavras chaves do documento HTML.

1 2 3 4 5 6 7

24 www.k19.com.br

25 HTML

O elemento head aberto e fechado pelas tags e respectivamente. Obrigatoria-mente, salvo algumas poucas excees, o corpo do head deve conter exatamente uma ocorrncia doelemento title. Esse elemento define o ttulo do documento HTML.

1 2 ...3 K19 Treinamentos 4

O contedo de uma pgina web deve ser definido no corpo do elemento body. Por exemplo,podemos inserir no corpo do body cabealhos, textos, listas, tabelas, entre outros componentes.Esse elemento aberto pela tag e fechado pela tag .

1 2 K02 - Desenvolvimento Web com HTML , CSS e JavaScript 3

Comentrios

Podemos adicionar comentrios em um documento HTML dentro das tags . Os comen-trios so ignorados pelos navegadores.

1 2 3 4 5 6 7 8 9

Editores HTML

Documentos HTML podem ser criados em qualquer editor de texto bsico. Contudo, para ga-nhar produtividade, podemos utilizar ferramentas com mais recursos. H diversas opes de edito-res HTML, alguns gratuitos outros pagos. Nesse treinamento, utilizaremos o Netbeans como editorHTML. 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 en-dereo https://netbeans.org/.

Ferramentas de Desenvolvimento Web

Hoje em dia, os principais navegadores possuem ferramentas para testar e depurar as pginasweb e a interao com os Web Servers. Nos exemplos dessa apostila, utilizaremos Chrome DevToolsdo navegador Chrome. Outra ferramenta muito importante o Firebug do navegador Firefox.


HTML 26

Exerccios de Fixao

1 Abra o Netbeans e crie um projeto chamado html.

ImportanteNo Windows, utilizando o IIS (Internet Information Services) como Web Server, vocdeve salvar o projeto html em C:\inetpub\wwwroot. Lembre-se que necessrio

instalar o IIS conforme vimos anteriormente.

ImportanteNo Ubuntu, utilizando o Apache HTTP Server como Web Server, voc deve salvar o pro-jeto html em /home//public_html. Lembre-se que necessrio insta-

lar e configurar 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/k02-html-fixacao1.zip


HTML 28

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

1 2 3 4 5 6 K19 Treinamentos 7 89 10 11 K02 - Desenvolvimento Web com HTML , CSS e JavaScript 12 13

Cdigo HTML 2.16: index.html


3 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/~/html/public_html/index.html.

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

28 www.k19.com.br

29 HTML

Figura 2.6: Chrome DevTools



HTML 30



30 www.k19.com.br

31 HTML

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




HTML 32

Semntica HTML

As placas de sinalizao so fundamentais para manter a ordem no trnsito. Cada placa possuium significado especfico. A utilizao equivocada das placas de trnsito pode causar problemascomo colises de veculos.

Considere um cruzamento no qual proibido virar a esquerda ou a direita (exemplo: Av. Re-bouas com Av Brasil ou Av. Prof. Francisco Morato com Av. Vital Brasil). Nesse cruzamento, ofuncionrio 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 queobrigam a passagem dos veculos pelo lado direito ou pelo lado esquerdo. O motorista que conheceo significado correto dessa placa pode decidir virar direita ou esquerda e sofrer uma coliso. Parano gerar confuso o funcionrio poderia utilizar a placa abaixo.

Figura 2.13: Siga em frente.

Para manter a organizao no trnsito, a semntica(significado) das sinalizaes deve ser respei-tada. Analogamente, no desenvolvimento web, fundamental respeitar o significado dos elementos

32 www.k19.com.br

33 HTML

HTML.

De acordo com a especificao da linguagem HTML, a maior parte dos elementos possuem umpropsito bem definido. Para o funcionamento correto das pginas de uma aplicao web, fun-damental respeitar o propsito de cada elemento e utiliz-lo nas condies corretas. Muitos autoresutilizam o termo semntica HTML ao se referirem ao uso correto dos elementos da linguagem HTML.

No exemplo abaixo, utilizamos o elemento p para definir um pargrafo. De acordo com a espe-cificao da linguagem HTML, esse elemento deve ser utilizado justamente para definir pargrafos.Portanto, ele foi aplicado corretamente.

1 2 3 4 5 Exemplo de uso correto da semntica HTML6 7 8 Este um texto para mostrar o significado da tag p.9 10

Cdigo HTML 2.17: Exemplo de uso correto da semntica HTML

Agora, vejamos outro exemplo:

1 2 3 4 5 Meus amigos - Site do Jonas - Criado pelo Jonas6 7 8 9 Rafael Cosentino10 [email protected] Scio fundador da K19 Treinamentos12 Av. Brigadeiro Faria Lima , 1571 - Jardim Paulistano - So Paulo , SP13 CEP 01452 -00114 1516 17 Marcelo Martins18 [email protected] Scio fundador da K19 Treinamentos20 Av. Brigadeiro Faria Lima , 1571 - Jardim Paulistano - So Paulo , SP21 CEP 01452 -00122 23 24

Cdigo HTML 2.18: Exemplo de uso incorreto da semntica HTML

Dessa vez, utilizamos o elemento address. De acordo com a especificao, esse elemento deveser utilizado para fornecer informaes de contato dos autores ou donos do documento. Normal-mente, esse elemento aparece no incio ou no final das pginas.

Se observarmos o exemplo mais atentamente, trata-se de uma pgina do site do Jonas (repare nottulo da pgina). O autor da pgina o Jonas e no o Rafael ou o Marcelo. Portanto, o elemento ad-dress foi aplicado incorretamente. Alm disso, devemos evitar o uso desse elemento para informarendereos postais a menos que essas informaes sejam relacionadas ao autor ou dono do docu-


HTML 34

mento.

Ttulos

Assim como em um livro, uma pgina web pode conter uma hierarquia de ttulos para estabeleceruma diviso do seu contedo. Para inserir ttulos em uma pgina web, devemos utilizar os elementosh1, h2, h3, h4, h5 e h6. Os sufixos numricos de 1 a 6 indicam o nvel do ttulo dentro da hierarquiade ttulos do documento. Veja o exemplo:

1 2 3 4 5 Exemplo de ttulos 6 7 8 Ttulo 19 Ttulo 210 Ttulo 311 Ttulo 412 Ttulo 513 Ttulo 614 15

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 ho-rizontal do elemento onde os ttulos esto contidos. No exemplo, os ttulos esto contidos no corpoda pgina. Portanto, ocupam todo o espao horizontal da pgina. Esse o comportamento padrodos block-level elements. Utilizando as ferramentas de desenvolvimento do Chrome, podemos vi-sualizar claramente esses blocos.

34 www.k19.com.br

35 HTML

Figura 2.15: Exemplo de ttulos

Geralmente, os navegadores utilizam tamanhos diferentes de fonte para cada ttulo. No existeum padro de tamanho e de fonte entre os navegadores. Em outras palavras, os ttulos de uma pginaweb podem ser exibidos de maneiras diferentes em navegadores distintos. Para padronizar a exibiodos ttulos, podemos aplicar as regras CSS.

Devemos utilizar os ttulos com cautela, pois eles so usados como critrio de ranqueamentopor buscadores como Google, Yahoo e Bing. O uso correto dos elementos de ttulo fortemente re-comendado 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 htmlem Site Root.

1 2 3 4


HTML 36

5 K02 - Desenvolvimento Web com HTML , CSS e Javascript 6 7 8 K02 - Desenvolvimento Web com HTML , CSS e Javascript 910 Atualmente , praticamente todos os sistemas corporativos possuem11 interfaces web. Para quem deseja atuar no mercado de desenvolvimento12 de software , obrigatrio o conhecimento das linguagens: HTML , CSS13 e JavaScript.1415 Essas linguagens so utilizadas para o desenvolvimento da camada de16 apresentao das aplicaes web.1718 Pr -requisitos 1920 21 Familiaridade com algum sistema operacional (Windows/Linux/Mac OS X)22 Lgica de programao 23 2425 Agenda 2627 Aos domingos 2829 30 10/11/2013 das 08:00 s 14:0031 23/02/2014 das 14:00 s 20:0032 3334 Aos sbados 3536 37 15/03/2014 das 08:00 s 14:0038 26/04/2014 das 14:00 s 20:0039 40 41

Cdigo HTML 2.20: titulos.html



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


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

Utilize o Chrome DevTools ou o Firebug para analisar os elementos que formam o documentoHTML, a requisio HTTP e a resposta HTTP.

8 Imagine que voc possua um site de culinria no qual voc disponibiliza algumas receitas. Crieuma pgina com uma receita fictcia utilizando ttulos para organizar contedo. Utilize quantos n-veis de ttulo achar necessrio. Para isso, adicione um arquivo chamado receita.html no projetohtml em Site Root.

1 2 3

36 www.k19.com.br

37 HTML

4 5 Como preparar um delicioso macarro instantneo em 6 min.6 7 8 Como preparar um delicioso macarro instantneo em 6 min.910 Com esta receita voc se tornar um profissional na arte de11 preparar um macarro instantneo.1213 Ingredientes 1415 16 Macarro instantneo da sua marca favorita 17 600ml de gua18 1920 Modo de preparo 2122 No micro -ondas2324 Coloque o macarro instantneo em um recipiente com 600ml de gua e25 programe o micro ondas para 6 minutos. Aperte o boto iniciar ou26 equivalente.2728 Dicas2930 31 32 Utilize um recipiente que permita o macarro ficar totalmente33 submerso na gua.34 35 36 Quando ouvir o bip , no saia correndo. O micro ondas no explodir.37 O bip significa que o macarro est pronto.38 39 4041 No fogo4243 44 Coloque o macarro instantneo em uma panela com 600ml de gua e45 leve ao fogo por 3 minutos.46 4748 Dicas4950 51 52 Utilize uma panela que permita o macarro ficar totalmente53 submerso na gua.54 55 56 No se distraia com a televiso ou qualquer outra coisa.57 Voc poder queimar a sua refeio58 59 60 61

Cdigo HTML 2.21: receita.html



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


HTML 38


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

Utilize o Chrome DevTools ou o Firebug para analisar os elementos que formam o documentoHTML, a requisio HTTP e a resposta HTTP.

Pargrafos

Os pargrafos de uma pgina web so definidos atravs do elemento p. Assim como os ttulos,normalmente, os navegadores definem os pargrafos como block-level elements. Dessa forma, porpadro, eles ocupam horizontalmente todo o espao do elemento pai.

Os navegadores ajustam os textos dos pargrafos largura do elemento pai. As quebras de linhanecessrias so inseridas automaticamente. Os espaos excedentes definidos em um documentoHTML entre as palavras de um pargrafo so desconsiderados pelos navegadores na exibio daspginas web. Analogamente, as quebras de linha presentes no documento HTML tambm so des-consideradas 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 navegado-res podem ter dificuldades para ajustar as quebras de linha. Podemos indicar explicitamente com oelemento wbr, como as palavras podem ser quebradas. Veja o exemplo abaixo.

1 2 3 4 5 Exemplo de pargrafos 6 7 8 Exemplo de pargrafos 9 10 Este pargrafo serve para demonstrar a insero11 automtica das quebras de linha.1213 Observe tambm que os espaos excedentes contidos14 no documento HTML entre as palavras15 desse pargrafo so desconsiderados161718 na exibio da pgina web.1920 As quebras de linha tambm so21 desconsideradas. O navegador ajusta o texto22 desse pargrafo ao espao horizontal do23 corpo d pgina.24 2526 27 Neste pargrafo mostramos a insero de uma quebra de linha forada.28 Percebeu? Alm disso , podemos indicar ao navegador como quebrar29 palavra otorrino laringo logista otorrino laringo logista30 otorrino laringo logista otorrino laringo logista31 otorrino laringo logista otorrino laringo logista32 otorrino laringo logista otorrino laringo logista33 otorrino laringo logista.34 35 36

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 docaractere desejado. A utilizao desses cdigos evita problemas de encoding na exibio das pginasweb. Voc pode conhecer esses caracteres e os seus respectivos cdigos atravs do seguinte endereohttp://dev.w3.org/html5/html-author/charref. Esses caracteres so conhecidos como Charac-ter Entities ou HTML Entities. Veja o exemplo a seguir.

1 2 3 4 5 Exemplo de character entities 6 7 8 Exemplo de character entities 9 10 &starf; &bigstar; x02605; 11 &phone; x0260E; 12 &female; x02640; 13 &sung; x0266A; 14 15 16

Cdigo HTML 2.23: Exemplo de character entities


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 2 3 4 5 Exemplo de pargrafos 6 7 8 Exemplo de pargrafos 9 10 Este pargrafo serve para demonstrar a insero11 automtica das quebras de linha.1213 Observe tambm que os espaos excedentes contidos14 no documento HTML entre as palavras15 desse pargrafo so desconsiderados161718 na exibio da pgina web.1920 As quebras de linha tambm so21 desconsideradas. O navegador ajusta o texto22 desse pargrafo ao espao horizontal do23 corpo d pgina.24 2526 27 Neste pargrafo mostramos a insero de uma quebra de linha forada.28 Percebeu?Alm disso , podemos indicar ao navegador como quebrar29 palavra otorrino laringo logista otorrino laringo

41 HTML



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


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

12 Crie um novo documento HTML chamado character-entities.html no projeto html em SiteRoot.

1 2 3 4 5 Exemplo de character entities 6 7 8 Exemplo de character entities 9 10 &starf; &bigstar; x02605; 11 &phone; x0260E; 12 &female; x02640; 13 &sung; x0266A; 14 15 16

Cdigo HTML 2.25: character-entities.html



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


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

Texto

Texto pr-formatado

Como vimos, os navegadores desconsideram os espaos excedentes entre as palavras contidasem um documento HTML assim como desconsideram as quebras de linha. Contudo, possvel in-serir 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 linhainseridos no documento HTML. Alm disso, os navegadores costumam utilizar fonte mono espaadapara mostrar esse texto.


HTML 42

Assim como os ttulos e os pargrafos, normalmente, os navegadores definem os textos pr-formatados como block-level element. Dessa forma, por padro, eles ocupam todo o espao ho-rizontal do elemento pai.

1 2 3 4 5 Exemplo de texto pr -formatado 6 7 8 Exemplo de texto pr -formatado 9 10 Os espaos excedentes so considerados pelos11 navegadores. Assim como as1213 quebras1415 de1617 linha. Observe tambm o tipo de fonte utilizada nesse texto.18 19 20

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. Normal-mente, esse elemento utilizado para definir cdigos escritos em alguma linguagem de programa-o. Normalmente, os navegadores utilizam fonte mono espaada para exibir o contedo desse ele-mento.

Diferentemente dos ttulos, dos pargrafos e dos textos pr-formatados, normalmente, os na-vegadores definem os cdigos como inline-level elements. Dessa forma, por padro, os cdigosocupam horizontalmente somente o espao necessrio.

1 2 3 4

42 www.k19.com.br

43 HTML

5 Exemplo de cdigos 6 7 8 Exemplo de cdigos 9 10 Em Java , utilizamos o cdigo System.out.println("K19");.11 Em C#, utilizamos o cdigo System.Console.WriteLine("K19");.12 13 14

Cdigo HTML 2.27: Exemplo de cdigo

Figura 2.19: Exemplo de cdigo

Elemento i

A especificao da linguagem HTML 5 no muito precisa na definio da semntica do ele-mento i. Ela indica a utilizao desse elemento para definir nomes cientficos, termos tcnicos, ex-presses idiomticas em outras lnguas, transliteraes, pensamentos. Normalmente, os navegado-res definem o i como inline-level element e exibem o seu contedo em itlico.

1 2 3 4 5 Exemplo de utilizao do elemento i6 7 8 Exemplo de utilizao do elemento i9 10 Porquinho -da-ndia ou Cavia porcellus 11 Backup (cpia de segurana)12 shoot the breeze (bater papo ou jogar conversa fora)13 Moskv (transliterao da palavra Moscou em russo)14 Se no sabes , aprende; se j sabes , ensina. (Confcio)15 16 17

Cdigo HTML 2.28: Exemplo de utilizao do elemento i


HTML 44

Figura 2.20: Exemplo de utilizao do elemento i

Elemento b

A especificao da linguagem HTML 5 no muito precisa na definio da semntica do ele-mento b. Ela indica, por exemplo, a utilizao desse elemento para definir as palavras chave do re-sumo de um documento e o nome do produto em texto de avaliao. Normalmente, os navegadoresdefinem o b como inline-level element e exibem o contedo em negrito.

1 2 3 4 5 Exemplo de utilizao do elemento b6 7 8 Exemplo de utilizao do elemento b9 10 Atualmente , praticamente todos os sistemas corporativos 11 possuem interfaces web. Para quem deseja atuar no mercado12 de desenvolvimento de software , obrigatrio o conhecimento13 das linguagens: HTML, CSS e JavaScript .14 15 16

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 definir textos subscrito ou sobrescrito com os elementos sub e sup respectivamente.Normalmente, os navegadores definem esses elementos como inline-level elements.

1 2 3 4 5 Exemplo de texto subscrito ou sobrescrito 6 7 8 Exemplo de texto subscrito ou sobrescrito 9 10 A cidade de So Paulo possui uma rea de 1.523 km 2.11 Em 2011, So Paulo emitiu 16,430 milhes de toneladas de12 CO 2.13 14 15

Cdigo HTML 2.30: Exemplo de texto subscrito ou sobrescrito

Figura 2.22: Exemplo de texto subscrito ou sobrescrito

Texto importante ou enfatizado

Podemos definir textos importantes ou enfatizados com os elementos strong e em respectiva-mente. Por padro, nos navegadores, o contedo de um elemento strong exibido em negrito e ocontedo de um elemento em exibido em itlico. Normalmente, os navegadores definem esseselementos como inline-level elements.

1 2 3 4 5 Exemplo de texto importante ou enfatizado 6 7 8 Exemplo de texto importante ou enfatizado 9 10 O Brasil o nico11 pas que ganhou cinco vezes12 a copa do mundo de futebol .13 14 15


HTML 46

Cdigo HTML 2.31: Exemplo de texto importante ou enfatizado

Figura 2.23: Exemplo de texto importante ou enfatizado

Citaes

Podemos definir citaes longas ou curtas com os elementos blockquote e q respectivamente.Por padro, o elemento blockquote exibido como elemento de bloco e o elemento q exibidocomo elemento de linha. Esses dois elementos possuem o atributo cite que deve ser utilizado paraindicar a fonte da citao.

Tambm podemos citar, com o elemento cite, ttulos de trabalhos, livros, msicas, filmes, pro-gramas de TV, peas de teatro, entre outros. Por padro, esse elemento exibido como elemento delinha.

Normalmente, os navegadores definem o blockquote como block-level element. Por outro lado,o q e o cite, normalmente, so definidos como inline-level elements.

1 2 3 4 5 Exemplo de citaes 6 7 8 Exemplo de citaes 9 10 11 A computer is a general purpose device that can be programmed12 to carry out a set of arithmetic or logical operations. Since a13 sequence of operations can be readily changed , the computer14 can solve more than one kind of problem.15 1617 18 Conventionally , a computer consists of at least one processing19 element , typically a central processing unit (CPU) and some form20 of memory. The processing element carries out arithmetic and21 logic operations , and a sequencing and control unit that can22 change the order of operations based on stored information.23 Peripheral devices allow information to be retrieved from an24 external source , and the result of operations saved and retrieved.25 26 27

46 www.k19.com.br

47 HTML

28 29 Nelson Rodrigues disse:30 31 O adulto no existe. O homem um menino perene32 .33 3435 36 A pea A mulher sem pecado de Nelson Rodrigues estreou37 em 1941 no Rio de Janeiro.38 39 40

Cdigo HTML 2.32: Exemplo de citaes

Figura 2.24: Exemplo de citaes

Abreviaes

Podemos definir abreviaes com o elemento abbr. Por padro, esse elemento exibido comoelemento de linha. O atributo title desse elemento utilizado para definir um tootip. Normalmente,os navegadores definem esse elemento como inline-level element

1 2 3 4 5 Exemplo de abreviaes 6 7 8 Exemplo de abreviaes 9 10 O IME 11 uma das unidades da USP.12 13 14

Cdigo HTML 2.33: Exemplo de abreviaes


HTML 48

Figura 2.25: Exemplo de abreviaes

Definies

Podemos inserir definies em um documento HTML com o elemento dfn. Por padro, esseelemento exibido como elemento de linha. Normalmente, os navegadores definem o dfn comoinline-level element

1 2 3 4 5 Exemplo de definies 6 7 8 Exemplo de definies 9 10 Um pingado um copo de caf com um pouco de leite.11 Uma bomba de chocolate um doce de padaria feito com12 massa de farinha de trigo com recheio cremoso e cobertura de chocolate.13 14 15

Cdigo HTML 2.34: Exemplo de definies

Figura 2.26: Exemplo de definies

48 www.k19.com.br

49 HTML

Alteraes

Em alguns casos, importante informar que o texto de um documento HTML sofreu alteraes.Um texto que foi acrescentado em um documento HTML deve ser definido com o elemento ins.Um texto que no faz mais parte do documento deve ser definido com o elemento del. Um textoque deixou de ser correto, preciso ou relevante deve ser definido com o elemento s. Por padro,esses elementos so exibidos como elementos de linha. Normalmente, os navegadores definem esseselementos como inline-level elements.

1 2 3 4 5 Exemplo de alteraes 6 7 8 Exemplo de alteraes 9 10 Natal a capital do Rio Grande do Norte. Sua fundao foi11 em 25 de dezembro de 1599. A rea total dessa cidade 12 167 ,263 km2. De acordo com o IBGE , a populao13 dessa cidade de 774.230 habitantes. De acordo com o IBGE a14 populao dessa cidade de 803.739 habitantes.15 16 17

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 utilizadopara indicar a URL de um documento com as justificativas da alterao. O atributo datetime deveser utilizado para informar quando ocorreu a alterao.

1 2 3 4 5 Exemplo de alteraes 6 7 8 Exemplo de alteraes 9 10 Natal a capital do Rio Grande do Norte. Sua fundao foi em 25 de dezembro de


HTML 50

12 1599. A13 rea total dessa cidade 167 ,263 km2. De acordo com o14 IBGE , a populao dessa cidade de 774.230 habitantes. De acordo com o15 IBGE a populao dessa cidade de 803.739 habitantes.16 17 18

Cdigo HTML 2.36: Exemplo de alteraes

Data e hora

O elemento time permite que datas e horrios sejam definidos em um documento HTML. Hduas formas de utilizar esse elemento. A primeira definir a data e o horrio desejado no con-tedo do elemento time. A segunda definir a data e o horrio desejado no valor do atributo date-time. Nessas duas opes, as datas e os horrios devem ser escritos seguindo o formato definido naespecificao 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 pre-cisa seguir um formato especfico. Normalmente, os navegadores definem o time como inline-levelelement.

1 2 3 4 5 Exemplo de datas e horas6 7 8 Exemplo de datas e horas9 10 2010 -0811 1984 -10 -3012 12-2513 09:0014 2013 -12 -25 23:5915 Fundao da K1916 Aniversrio do Rafael 17 Natal18 Horrio de Entrada 19 Ano Novo 201420 21 22

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. Normal-mente, os navegadores definem o mark como inline-level element.

1 2 3 4 5 Exemplo de texto marcado 6 7 8 Exemplo de texto marcado 9 10 Java e C# so linguagens de programao11 orientadas a objeto .12 13 14

Cdigo HTML 2.38: Exemplo de texto marcado

Figura 2.29: Exemplo de texto marcado


HTML 52

Exerccios de Fixao

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

1 2 3 4 5 Exemplo de texto pr -formatado 6 7 8 Exemplo de texto pr -formatado 9 10 Os espaos excedentes so considerados pelos11 navegadores. Assim como as1213 quebras1415 de1617 linha. Observe tambm o tipo de fonte utilizada nesse texto.18 19 20

Cdigo HTML 2.39: texto-pre-formatado.html



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


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

16 Crie um novo documento HTML chamado codigo.html no projeto html em Site Root.

1 2 3 4 5 Exemplo de cdigos 6 7 8 Exemplo de cdigos 9 10 Em Java , utilizamos o cdigo System.out.println("K19");11 Em C#, utilizamos o cdigo System.Console.WriteLine("K19");12 13 14

Cdigo HTML 2.40: codigo.html

52 www.k19.com.br

53 HTML



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


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

18 Crie um novo documento HTML chamado i.html no projeto html em Site Root.

1 2 3 4 5 Exemplo de utilizao do elemento i6 7 8 Exemplo de utilizao do elemento i9 10 Porquinho -da-ndia ou Cavia porcellus 11 Backup (cpia de segurana)12 shoot the breeze (bater papo ou jogar conversa fora)13 Moskv (transliterao da palavra Moscou em russo)14 Se no sabes , aprende; se j sabes , ensina. (Confcio)15 16 17

Cdigo HTML 2.41: i.html



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


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

20 Crie um novo documento HTML chamado b.html no projeto html em Site Root.

1 2 3 4 5 Exemplo de utilizao do elemento b6 7 8 Exemplo de utilizao do elemento b9 10 Atualmente , praticamente todos os sistemas corporativos 11 possuem interfaces web. Para quem deseja atuar no mercado12 de desenvolvimento de software , obrigatrio o conhecimento13 das linguagens: HTML, CSS e JavaScript .14


HTML 54

15 16

Cdigo HTML 2.42: b.html



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


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

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

1 2 3 4 5 Exemplo de texto subscrito ou sobrescrito 6 7 8 Exemplo de texto subscrito ou sobrescrito 9 10 A cidade de So Paulo possui uma rea de 1.523 km2.11 Em 2011, So Paulo emitiu 16,430 milhes de toneladas de12 CO2.13 14 15

Cdigo HTML 2.43: texto-subscrito-sobrescrito.html



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


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

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

1 2 3 4 5 Exemplo de texto importante ou enfatizado 6 7 8 Exemplo de texto importante ou enfatizado

54 www.k19.com.br

55 HTML

9 10 O Brasil o nico11 pas que ganhou cinco vezes12 a copa do mundo de futebol .13 14 15

Cdigo HTML 2.44: texto-importante-enfatizado.html



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


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

26 Crie um novo documento HTML chamado citacoes.html no projeto html em Site Root.

1 2 3 4 5 Exemplo de citaes 6 7 8 Exemplo de citaes 9 10 11 A computer is a general purpose device that can be programmed12 to carry out a set of arithmetic or logical operations. Since a13 sequence of operations can be readily changed , the computer14 can solve more than one kind of problem.15 1617 18 Conventionally , a computer consists of at least one processing19 element , typically a central processing unit (CPU) and some form20 of memory. The processing element carries out arithmetic and21 logic operations , and a sequencing and control unit that can22 change the order of operations based on stored information.23 Peripheral devices allow information to be retrieved from an24 external source , and the result of operations saved and retrieved.25 26 2728 29 Nelson Rodrigues disse:30 31 O adulto no existe. O homem um menino perene32 .33 3435 36 A pea A mulher sem pecado de Nelson Rodrigues estreou37 em 1941 no Rio de Janeiro.38 39 40

Cdigo HTML 2.45: citacoes.html


HTML 56



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


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

28 Crie um novo documento HTML chamado abreviacoes.html no projeto html em Site Root.

1 2 3 4 5 Exemplo de abreviaes 6 7 8 Exemplo de abreviaes 9 10 O IME 11 uma das unidades da USP.12 13 14

Cdigo HTML 2.46: abreviacoes.html



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


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

30 Crie um novo documento HTML chamado definicoes.html no projeto html em Site Root.

1 2 3 4 5 Exemplo de definies 6 7 8 Exemplo de definies 9 10 Um pingado um copo de caf com um pouco de leite.11 Uma bomba de chocolate um doce de padaria feito com12 massa de farinha de trigo com recheio cremoso e cobertura de chocolate.13 14 15

Cdigo HTML 2.47: definicoes.html

56 www.k19.com.br

57 HTML



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


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

32 Crie um novo documento HTML chamado alteracoes.html no projeto html em Site Root.

1 2 3 4 5 Exemplo de alteraes 6 7 8 Exemplo de alteraes 9 10 Natal a capital do Rio Grande do Norte. Sua fundao foi11 em 25 de dezembro de 1599. A rea total dessa cidade 12 167 ,263 km2. De acordo com o IBGE , a populao13 dessa cidade de 774.230 habitantes. De acordo com o IBGE a14 populao dessa cidade de 803.739 habitantes.15 16 17

Cdigo HTML 2.48: alteracoes.html



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


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

34 Crie um novo documento HTML chamado data-hora.html no projeto html em Site Root.

1 2 3 4 5 Exemplo de datas e horas6 7 8 Exemplo de datas e horas9 10 2010 -0811 1984 -10 -3012 12-2513 09:0014 2013 -12 -25 23:59


HTML 58

15 Fundao da K1916 Aniversrio do Rafael 17 Natal18 Horrio de Entrada 19 Ano Novo 201420 21 22

Cdigo HTML 2.49: data-hora.html



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


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

36 Crie um novo documento HTML chamado mark.html no projeto html em Site Root.

1 2 3 4 5 Exemplo de texto marcado 6 7 8 Exemplo de texto marcado 9 10 Java e C# so linguagens de programao11 orientadas a objeto .12 13 14

Cdigo HTML 2.50: mark.html



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


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

Listas

A linguagem HTML define 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 formadaspor termos ou nomes e as suas respectivas descries. Os termos ou nomes so definidos com oelemento dt. As descries so definidas com o elemento dd. Normalmente, os navegadores definemtodos esses elementos como block-level elements.

1 2 3 4 5 Exemplo de lista de descries 6 7 8 Exemplo de lista de descries 9 10 K01 - Lgica de Programao 11 12 Conhecimentos em Lgica de Programao o pr -requisito fundamental13 para que uma pessoa consiga aprender qualquer Linguagem de Programao ...14 15 K02 - Desenvolvimento Web com HTML , CSS e JavaScript 16 17 Atualmente , praticamente todos os sistemas corporativos possuem18 interfaces web. Para quem deseja atuar no mercado de desenvolvimento ...19 20 K03 - SQL e Modelo Relacional 21 22 Como as aplicaes corporativas necessitam armazenar dados fundamental23 que os desenvolvedores possuam conhecimentos sobre persistncia de dados.24 25 26 27

Cdigo HTML 2.51: Exemplo de lista de descries

Figura 2.30: Exemplo de lista de descries


HTML 60

Lista com ordem

Para criar uma lista com ordem, devemos utilizar o elemento ol. Os itens de uma lista com or-dem so definidos com o elemento li. Normalmente, os navegadores definem todos esses elementoscomo block-level elements.

1 2 3 4 5 Exemplo de lista com ordem6 7 8 Macarro instantneo - K19 Receitas 9 Modo de preparo 1011 12 Ferver 600ml de gua em uma panela.13 Retirar o macarro do pacote.14 Colocar o macarro na panela no fogo baixo.15 Cozinhar o macarro por 3min.16 Temperar a gosto.17 18 19

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 or-dem so definidos com o elemento li. Normalmente, os navegadores definem todos esses elementoscomo block-level elements.

1 2 3 4 5 Exemplo de lista sem ordem6 7 8 K02 - Desenvolvimento Web com HTML , CSS e JavaScript 9 Pr -requisitos

60 www.k19.com.br

61 HTML

1011 12 Conhecimento de algum sistema operacional (Windows/Linux/MacOS X)13 Lgica de programao 14 15 16

Cdigo HTML 2.53: Exemplo de lista sem ordem

Figura 2.32: Exemplo de lista sem ordem

Listas aninhadas

Uma lista pode ser definida dentro de outra lista. Quando listas sem ordem so aninhadas, nor-malmente, os navegadores alternam o marcadores dos itens.

1 2 3 4 5 Exemplo de listas aninhadas 6 7 8 Exemplo de listas aninhadas 9 Continentes 10 11 12 Europa13 14 Portugual 15 Frana 16 Alemanha 17 18 19 20 sia21 22 Japo23 China24 ndia25 26 27 28 Cronograma da minha viagem 29 30 31 Europa


HTML 62

32 33 Portugual 34 Frana 35 Alemanha 36 37 38 39 sia40 41 Japo42 China43 ndia44 45 46 47 48

Cdigo HTML 2.54: Exemplo de listas aninhadas

Figura 2.33: Exemplo de lista aninhadas

Exerccios de Fixao

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

1 2 3

62 www.k19.com.br

63 HTML

4 5 Exemplo de lista de descries 6 7 8 Exemplo de lista de descries 9 10 K01 - Lgica de Programao 11 12 Conhecimentos em Lgica de Programao o pr -requisito fundamental13 para que uma pessoa consiga aprender qualquer Linguagem de Programao ...14 15 K02 - Desenvolvimento Web com HTML , CSS e JavaScript 16 17 Atualmente , praticamente todos os sistemas corporativos possuem18 interfaces web. Para quem deseja atuar no mercado de desenvolvimento ...19 20 K03 - SQL e Modelo Relacional 21 22 Como as aplicaes corporativas necessitam armazenar dados fundamental23 que os desenvolvedores possuam conhecimentos sobre persistncia de dados.24 25 26 27

Cdigo HTML 2.55: lista-descricoes.html



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


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

40 Crie um novo documento HTML chamado lista-com-ordem.html no projeto html em Site Root.

1 2 3 4 5 Exemplo de lista com ordem6 7 8 Macarro instantneo - K19 Receitas 9 Modo de preparo 1011 12 Ferver 600ml de gua em uma panela.13 Retirar o macarro do pacote.14 Colocar o macarro na panela no fogo baixo.15 Cozinhar o macarro por 3min.16 Temperar a gosto.17 18 19

Cdigo HTML 2.56: lista-com-ordem.html



HTML 64


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


http://localhost/~/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 2 3 4 5 Exemplo de lista sem ordem6 7 8 K02 - Desenvolvimento Web com HTML , CSS e JavaScript 9 Pr -requisitos 1011 12 Conhecimento de algum sistema operacional (Windows/Linux/MacOS X)13 Lgica de programao 14 15 16

Cdigo HTML 2.57: lista-sem-ordem.html



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


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

44 Crie um novo documento HTML chamado listas-aninhadas.html no projeto html em Site Root.

1 2 3 4 5 Exemplo de listas aninhadas 6 7 8 Exemplo de listas aninhadas 9 Continentes 10 11 12 Europa13 14 Portugual 15 Frana 16 Alemanha 17 18 19

64 www.k19.com.br

65 HTML

20 sia21 22 Japo23 China24 ndia25 26 27 28 Cronograma da minha viagem 29 30 31 Europa32 33 Portugual 34 Frana 35 Alemanha 36 37 38 39 sia40 41 Japo42 China43 ndia44 45 46 47 48

Cdigo HTM

k19 k02 desenvolvimento web com html css e javascript

Documents